diff --git a/CLAUDE.md b/CLAUDE.md
index 543aa14..a602de9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -257,6 +257,16 @@ Dual testing setup with different environments:
 - Snippet syntax for slot-like components
 - Compile errors if mixing old and new syntax
 
+### UI Components & Styling
+
+- **Skeleton UI Components**: Use Skeleton Labs components for consistent UI
+  - Reference: https://www.skeleton.dev/llms-svelte.txt (use this for LLM context)
+  - Always use Skeleton components with **Tailwind CSS classes only**
+  - **NO inline styles** - use Tailwind utilities for all styling
+  - **NO `<style>` blocks** unless absolutely necessary for complex animations/behavior
+  - Use Tailwind's utility classes for responsive design and state variants
+  - Leverage Skeleton's pre-built components (buttons, cards, modals, etc.) instead of creating custom ones
+
 ## Important Notes
 
 - **Package Manager**: Always use `pnpm` (never npm or yarn)
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index 7aecdbf..f25b5dc 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -22,8 +22,8 @@ Quick checklist of all issues in planned order.
 ## Phase 1
 
 - [x] **1.1** - TypeScript Interfaces for Business Domain (TDD) (#GH-10)
-- [ ] **1.2** - Calculate Margins and Totals Logic (TDD) (#GH-11)
-- [ ] **1.3** - Svelte Store for Active Order (Svelte 5 Runes - TDD) (#GH-12)
+- [x] **1.2** - Calculate Margins and Totals Logic (TDD) (#GH-11)
+- [x] **1.3** - Svelte Store for Active Order (Svelte 5 Runes - TDD) (#GH-12)
 - [ ] **1.4** - Product Form Component Tests (TDD) (#GH-13-test)
 - [ ] **1.4a** - Product Form Component (#GH-13)
 - [ ] **1.5** - Product Grid Component Tests (POS-style - TDD) (#GH-14-test)
diff --git a/src/lib/index.ts b/src/lib/index.ts
index d23bb49..c301f87 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -10,3 +10,4 @@ export {
 	DB_NAME
 } from './db/database';
 export { config } from './config';
+export { createOrderStore, getOrderStore } from './stores/order.svelte';
diff --git a/src/lib/stores/order.svelte.spec.ts b/src/lib/stores/order.svelte.spec.ts
new file mode 100644
index 0000000..5d58a70
--- /dev/null
+++ b/src/lib/stores/order.svelte.spec.ts
@@ -0,0 +1,393 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createOrderStore } from './order.svelte';
+import type { Order, OrderItem } from '$lib/types/interfaces';
+
+describe('createOrderStore', () => {
+	let store: ReturnType<typeof createOrderStore>;
+
+	beforeEach(() => {
+		store = createOrderStore();
+	});
+
+	describe('initial state', () => {
+		it('should initialize with null order', () => {
+			expect(store.order).toBeNull();
+		});
+
+		it('should initialize with empty items array', () => {
+			expect(store.items).toEqual([]);
+		});
+
+		it('should have zero totals initially', () => {
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(0);
+			expect(totals.totalRevenue).toBe(0);
+			expect(totals.totalMargin).toBe(0);
+			expect(Number.isNaN(totals.totalMarginPercent)).toBe(true);
+		});
+	});
+
+	describe('setOrder', () => {
+		it('should set the active order', () => {
+			const order: Order = {
+				id: 'order-1',
+				clientId: 'client-1',
+				items: [],
+				status: 'draft' as const,
+				totalCost: 0,
+				totalRevenue: 0,
+				totalMargin: 0,
+				totalMarginPercent: 0,
+				createdAt: new Date().toISOString(),
+				completedAt: null
+			};
+
+			store.setOrder(order);
+			expect(store.order?.id).toBe(order.id);
+			expect(store.order?.clientId).toBe(order.clientId);
+		});
+
+		it('should set order to null', () => {
+			const order: Order = {
+				id: 'order-1',
+				clientId: 'client-1',
+				items: [],
+				status: 'draft' as const,
+				totalCost: 0,
+				totalRevenue: 0,
+				totalMargin: 0,
+				totalMarginPercent: 0,
+				createdAt: new Date().toISOString(),
+				completedAt: null
+			};
+
+			store.setOrder(order);
+			store.setOrder(null);
+			expect(store.order).toBeNull();
+		});
+	});
+
+	describe('addItem', () => {
+		it('should add a single item to the order', () => {
+			const item: OrderItem = {
+				productId: 'product-1',
+				quantity: 2,
+				get itemCost() {
+					return this.quantity * 10;
+				},
+				get itemRevenue() {
+					return this.quantity * 15;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item);
+			expect(store.items).toHaveLength(1);
+			expect(store.items[0]).toEqual(item);
+		});
+
+		it('should add multiple items to the order', () => {
+			const item1: OrderItem = {
+				productId: 'product-1',
+				quantity: 1,
+				get itemCost() {
+					return 10;
+				},
+				get itemRevenue() {
+					return 15;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			const item2: OrderItem = {
+				productId: 'product-2',
+				quantity: 2,
+				get itemCost() {
+					return 20;
+				},
+				get itemRevenue() {
+					return 30;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item1);
+			store.addItem(item2);
+			expect(store.items).toHaveLength(2);
+		});
+
+		it('should calculate totals after adding items', () => {
+			const item: OrderItem = {
+				productId: 'product-1',
+				quantity: 2,
+				get itemCost() {
+					return 20; // 2 * 10
+				},
+				get itemRevenue() {
+					return 30; // 2 * 15
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost; // 10
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100; // 33.33%
+				}
+			};
+
+			store.addItem(item);
+
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(20);
+			expect(totals.totalRevenue).toBe(30);
+			expect(totals.totalMargin).toBe(10);
+			expect(totals.totalMarginPercent).toBeCloseTo(33.33, 1);
+		});
+	});
+
+	describe('removeItem', () => {
+		beforeEach(() => {
+			const item1: OrderItem = {
+				productId: 'product-1',
+				quantity: 1,
+				get itemCost() {
+					return 10;
+				},
+				get itemRevenue() {
+					return 15;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			const item2: OrderItem = {
+				productId: 'product-2',
+				quantity: 2,
+				get itemCost() {
+					return 20;
+				},
+				get itemRevenue() {
+					return 30;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item1);
+			store.addItem(item2);
+		});
+
+		it('should remove an item by productId', () => {
+			store.removeItem('product-1');
+			expect(store.items).toHaveLength(1);
+			expect(store.items[0].productId).toBe('product-2');
+		});
+
+		it('should not remove if productId not found', () => {
+			store.removeItem('non-existent');
+			expect(store.items).toHaveLength(2);
+		});
+
+		it('should update totals after removing item', () => {
+			store.removeItem('product-1');
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(20);
+			expect(totals.totalRevenue).toBe(30);
+		});
+	});
+
+	describe('updateItem', () => {
+		beforeEach(() => {
+			const item: OrderItem = {
+				productId: 'product-1',
+				quantity: 2,
+				get itemCost() {
+					return this.quantity * 10;
+				},
+				get itemRevenue() {
+					return this.quantity * 15;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item);
+		});
+
+		it('should update item quantity', () => {
+			store.updateItem('product-1', 5);
+			expect(store.items[0].quantity).toBe(5);
+		});
+
+		it('should not update if productId not found', () => {
+			store.updateItem('non-existent', 5);
+			expect(store.items[0].quantity).toBe(2);
+		});
+
+		it('should update totals after updating item quantity', () => {
+			store.updateItem('product-1', 4);
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(40); // 4 * 10
+			expect(totals.totalRevenue).toBe(60); // 4 * 15
+		});
+
+		it('should allow decimal quantities', () => {
+			store.updateItem('product-1', 2.5);
+			expect(store.items[0].quantity).toBe(2.5);
+		});
+	});
+
+	describe('clearOrder', () => {
+		beforeEach(() => {
+			const item: OrderItem = {
+				productId: 'product-1',
+				quantity: 2,
+				get itemCost() {
+					return 20;
+				},
+				get itemRevenue() {
+					return 30;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item);
+			const order: Order = {
+				id: 'order-1',
+				clientId: 'client-1',
+				items: [],
+				status: 'draft' as const,
+				totalCost: 0,
+				totalRevenue: 0,
+				totalMargin: 0,
+				totalMarginPercent: 0,
+				createdAt: new Date().toISOString(),
+				completedAt: null
+			};
+			store.setOrder(order);
+		});
+
+		it('should clear all items', () => {
+			store.clearOrder();
+			expect(store.items).toEqual([]);
+		});
+
+		it('should reset order to null', () => {
+			store.clearOrder();
+			expect(store.order).toBeNull();
+		});
+
+		it('should reset totals to zero', () => {
+			store.clearOrder();
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(0);
+			expect(totals.totalRevenue).toBe(0);
+			expect(totals.totalMargin).toBe(0);
+			expect(Number.isNaN(totals.totalMarginPercent)).toBe(true);
+		});
+	});
+
+	describe('getTotals', () => {
+		it('should calculate totals with multiple items', () => {
+			const item1: OrderItem = {
+				productId: 'product-1',
+				quantity: 2,
+				get itemCost() {
+					return 20;
+				},
+				get itemRevenue() {
+					return 30;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			const item2: OrderItem = {
+				productId: 'product-2',
+				quantity: 3,
+				get itemCost() {
+					return 30;
+				},
+				get itemRevenue() {
+					return 50;
+				},
+				get itemMargin() {
+					return this.itemRevenue - this.itemCost;
+				},
+				get itemMarginPercent() {
+					return (this.itemMargin / this.itemRevenue) * 100;
+				}
+			};
+
+			store.addItem(item1);
+			store.addItem(item2);
+
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(50);
+			expect(totals.totalRevenue).toBe(80);
+			expect(totals.totalMargin).toBe(30);
+			expect(totals.totalMarginPercent).toBeCloseTo(37.5, 1);
+		});
+
+		it('should handle zero revenue edge case', () => {
+			const item: OrderItem = {
+				productId: 'product-1',
+				quantity: 0,
+				get itemCost() {
+					return 0;
+				},
+				get itemRevenue() {
+					return 0;
+				},
+				get itemMargin() {
+					return 0;
+				},
+				get itemMarginPercent() {
+					return 0;
+				}
+			};
+
+			store.addItem(item);
+			const totals = store.getTotals();
+			expect(totals.totalCost).toBe(0);
+			expect(totals.totalRevenue).toBe(0);
+			expect(totals.totalMargin).toBe(0);
+			expect(Number.isNaN(totals.totalMarginPercent)).toBe(true);
+		});
+	});
+});
diff --git a/src/lib/stores/order.svelte.ts b/src/lib/stores/order.svelte.ts
new file mode 100644
index 0000000..b9d9b50
--- /dev/null
+++ b/src/lib/stores/order.svelte.ts
@@ -0,0 +1,108 @@
+import { calculateOrderTotals } from '$lib/utils/calculations';
+import type { Order, OrderItem, OrderTotals } from '$lib/types/interfaces';
+
+/**
+ * Creates a reactive store for the active order
+ * Can be used with Svelte 5 runes in components
+ *
+ * @returns Order store with state management methods
+ */
+export function createOrderStore() {
+	let order: Order | null = null;
+	let items: OrderItem[] = [];
+
+	/**
+	 * Calculate totals from current items
+	 */
+	function calculateTotals(): OrderTotals {
+		return calculateOrderTotals(items);
+	}
+
+	return {
+		/**
+		 * Get the current active order
+		 */
+		get order() {
+			return order;
+		},
+
+		/**
+		 * Set the active order
+		 * @param value - Order object or null
+		 */
+		setOrder(value: Order | null) {
+			order = value;
+		},
+
+		/**
+		 * Get the current items in the order
+		 */
+		get items() {
+			return items;
+		},
+
+		/**
+		 * Add an item to the order
+		 * @param item - OrderItem to add
+		 */
+		addItem(item: OrderItem) {
+			items.push(item);
+		},
+
+		/**
+		 * Remove an item from the order by productId
+		 * @param productId - ID of the product to remove
+		 */
+		removeItem(productId: string) {
+			const index = items.findIndex((item) => item.productId === productId);
+			if (index > -1) {
+				items.splice(index, 1);
+			}
+		},
+
+		/**
+		 * Update an item's quantity in the order
+		 * @param productId - ID of the product to update
+		 * @param quantity - New quantity (can be decimal)
+		 */
+		updateItem(productId: string, quantity: number) {
+			const item = items.find((item) => item.productId === productId);
+			if (item) {
+				item.quantity = quantity;
+			}
+		},
+
+		/**
+		 * Clear all items and reset the order
+		 */
+		clearOrder() {
+			order = null;
+			items = [];
+		},
+
+		/**
+		 * Get calculated totals for the current order
+		 * @returns OrderTotals with cost, revenue, margin, and margin percentage
+		 */
+		getTotals(): OrderTotals {
+			return calculateTotals();
+		}
+	};
+}
+
+/**
+ * Singleton instance of the order store
+ * Shared across the entire application
+ */
+let instance: ReturnType<typeof createOrderStore> | null = null;
+
+/**
+ * Get or create the singleton order store instance
+ * @returns The order store instance
+ */
+export function getOrderStore() {
+	if (!instance) {
+		instance = createOrderStore();
+	}
+	return instance;
+}