diff --git a/auth/templates/login.html b/auth/templates/login.html
index ed7fca8..0e0fb2d 100644
--- a/auth/templates/login.html
+++ b/auth/templates/login.html
@@ -1,19 +1,19 @@
 <!doctype html>
-<html lang="en">
+<html lang="pl">
 <head>
     <meta charset="UTF-8" />
-    <title>Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login — Zamówienia ciast</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/static/style.css">
-    <link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
-    <link rel="stylesheet" href="/static/fontawesome/css/solid.css">
 </head>
 <body class="login-page">
     <div class="login-card">
         <div class="login-icon">
-            <i class="fa-solid fa-birthday-cake"></i>
+            <span class="material-symbols-outlined" style="font-size:40px">cake</span>
         </div>
         <h1>Zaloguj się</h1>
         <form method="post">
diff --git a/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md b/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md
new file mode 100644
index 0000000..5d2e247
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md
@@ -0,0 +1,159 @@
+---
+name: Bakery Operations Interface
+colors:
+  surface: '#f8f9ff'
+  surface-dim: '#cbdbf5'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eff4ff'
+  surface-container: '#e5eeff'
+  surface-container-high: '#dce9ff'
+  surface-container-highest: '#d3e4fe'
+  on-surface: '#0b1c30'
+  on-surface-variant: '#45464d'
+  inverse-surface: '#213145'
+  inverse-on-surface: '#eaf1ff'
+  outline: '#76777d'
+  outline-variant: '#c6c6cd'
+  surface-tint: '#565e74'
+  primary: '#000000'
+  on-primary: '#ffffff'
+  primary-container: '#131b2e'
+  on-primary-container: '#7c839b'
+  inverse-primary: '#bec6e0'
+  secondary: '#9b4500'
+  on-secondary: '#ffffff'
+  secondary-container: '#fd8a42'
+  on-secondary-container: '#682c00'
+  tertiary: '#000000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#271901'
+  on-tertiary-container: '#98805d'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2fd'
+  primary-fixed-dim: '#bec6e0'
+  on-primary-fixed: '#131b2e'
+  on-primary-fixed-variant: '#3f465c'
+  secondary-fixed: '#ffdbca'
+  secondary-fixed-dim: '#ffb68e'
+  on-secondary-fixed: '#331200'
+  on-secondary-fixed-variant: '#763300'
+  tertiary-fixed: '#fcdeb5'
+  tertiary-fixed-dim: '#dec29a'
+  on-tertiary-fixed: '#271901'
+  on-tertiary-fixed-variant: '#574425'
+  background: '#f8f9ff'
+  on-background: '#0b1c30'
+  surface-variant: '#d3e4fe'
+typography:
+  headline-lg:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+    letterSpacing: -0.01em
+  headline-sm:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  label-md:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  label-sm:
+    fontFamily: Inter
+    fontSize: 11px
+    fontWeight: '600'
+    lineHeight: 14px
+  table-data:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 16px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  container-margin: 16px
+  gutter: 8px
+  row-padding: 8px 12px
+  cell-padding: 4px 8px
+  stack-gap-sm: 4px
+  stack-gap-md: 12px
+---
+
+## Brand & Style
+
+The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue. 
+
+The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
+
+## Colors
+
+The palette is anchored in professional neutrality to keep the focus on data. 
+- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
+- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
+- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
+
+## Typography
+
+This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel. 
+- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen. 
+- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data. 
+- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
+
+## Layout & Spacing
+
+The layout follows a **Fluid Grid** model with a 4px base increment. 
+- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
+- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
+- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
+
+## Elevation & Depth
+
+This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows. 
+- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields. 
+- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
+- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
+
+## Shapes
+
+The design system uses a **Soft (Level 1)** roundedness profile. 
+- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
+- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
+
+## Components
+
+- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
+- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
+- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
+- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
+- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
+- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system(1)/code.html b/inspiration/stitch_bakery_order_management_system(1)/code.html
new file mode 100644
index 0000000..7cc272a
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system(1)/code.html
@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Catalogue Management</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "outline-variant": "#c6c6cd",
+                      "on-tertiary-container": "#98805d",
+                      "on-secondary": "#ffffff",
+                      "tertiary": "#000000",
+                      "surface-container-highest": "#d3e4fe",
+                      "on-tertiary-fixed-variant": "#574425",
+                      "secondary-container": "#fd8a42",
+                      "surface-tint": "#565e74",
+                      "on-secondary-fixed": "#331200",
+                      "on-primary-container": "#7c839b",
+                      "inverse-on-surface": "#eaf1ff",
+                      "on-primary-fixed": "#131b2e",
+                      "on-surface": "#0b1c30",
+                      "on-primary-fixed-variant": "#3f465c",
+                      "surface": "#f8f9ff",
+                      "on-background": "#0b1c30",
+                      "on-error-container": "#93000a",
+                      "surface-container-low": "#eff4ff",
+                      "surface-container-lowest": "#ffffff",
+                      "primary-fixed-dim": "#bec6e0",
+                      "outline": "#76777d",
+                      "surface-container-high": "#dce9ff",
+                      "on-primary": "#ffffff",
+                      "inverse-primary": "#bec6e0",
+                      "primary-container": "#131b2e",
+                      "secondary-fixed": "#ffdbca",
+                      "tertiary-fixed-dim": "#dec29a",
+                      "secondary": "#9b4500",
+                      "primary": "#000000",
+                      "surface-container": "#e5eeff",
+                      "background": "#f8f9ff",
+                      "surface-variant": "#d3e4fe",
+                      "on-error": "#ffffff",
+                      "on-secondary-container": "#682c00",
+                      "inverse-surface": "#213145",
+                      "primary-fixed": "#dae2fd",
+                      "on-secondary-fixed-variant": "#763300",
+                      "on-surface-variant": "#45464d",
+                      "error": "#ba1a1a",
+                      "surface-dim": "#cbdbf5",
+                      "secondary-fixed-dim": "#ffb68e",
+                      "tertiary-container": "#271901",
+                      "surface-bright": "#f8f9ff",
+                      "error-container": "#ffdad6",
+                      "on-tertiary-fixed": "#271901",
+                      "on-tertiary": "#ffffff",
+                      "tertiary-fixed": "#fcdeb5"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.125rem",
+                      "lg": "0.25rem",
+                      "xl": "0.5rem",
+                      "full": "0.75rem"
+              },
+              "spacing": {
+                      "stack-gap-md": "12px",
+                      "row-padding": "8px 12px",
+                      "container-margin": "16px",
+                      "unit": "4px",
+                      "stack-gap-sm": "4px",
+                      "cell-padding": "4px 8px",
+                      "gutter": "8px"
+              },
+              "fontFamily": {
+                      "body-md": ["Inter", "sans-serif"],
+                      "label-md": ["Inter", "sans-serif"],
+                      "label-sm": ["Inter", "sans-serif"],
+                      "headline-md": ["Inter", "sans-serif"],
+                      "headline-sm": ["Inter", "sans-serif"],
+                      "body-sm": ["Inter", "sans-serif"],
+                      "table-data": ["Inter", "sans-serif"],
+                      "headline-lg": ["Inter", "sans-serif"]
+              },
+              "fontSize": {
+                      "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
+                      "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
+                      "label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
+                      "headline-md": ["20px", {"lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
+                      "headline-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
+                      "body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
+                      "table-data": ["13px", {"lineHeight": "16px", "fontWeight": "400"}],
+                      "headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
+              }
+            }
+          }
+        }
+    </script>
+<style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+        
+        /* Utility for Material Symbols */
+        .material-symbols-outlined {
+            font-family: 'Material Symbols Outlined';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 20px;
+            display: inline-block;
+            line-height: 1;
+            text-transform: none;
+            letter-spacing: normal;
+            word-wrap: normal;
+            white-space: nowrap;
+            direction: ltr;
+        }
+        
+        /* Custom scrollbar for high-density data areas */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #c6c6cd; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #76777d; }
+    </style>
+</head>
+<body class="bg-background text-on-background min-h-screen font-body-md overflow-hidden flex">
+<!-- SideNavBar Component -->
+<nav class="fixed left-0 top-0 bottom-0 flex flex-col p-4 z-40 w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest dark:bg-surface-container-lowest">
+<!-- Brand Header -->
+<div class="flex items-center gap-3 px-4 py-6 mb-4">
+<div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center font-bold">
+                C
+            </div>
+<div class="flex flex-col">
+<span class="font-headline-sm text-headline-sm font-bold text-primary">Crumbs &amp; Co.</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Production Hub</span>
+</div>
+</div>
+<!-- Primary CTA -->
+<div class="px-4 mb-6">
+<button class="w-full flex items-center justify-center gap-2 h-10 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity">
+<span class="material-symbols-outlined text-[18px]">add</span>
+                New Order
+            </button>
+</div>
+<!-- Main Navigation -->
+<ul class="flex flex-col gap-1 flex-1">
+<li>
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
+<span class="material-symbols-outlined">dashboard</span>
+                    Dashboard
+                </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
+<span class="material-symbols-outlined">shopping_cart</span>
+                    Orders
+                </a>
+</li>
+<!-- Active Tab: Catalogue -->
+<li>
+<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-bold transition-colors cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
+                    Catalogue
+                </a>
+</li>
+</ul>
+<!-- Footer Navigation -->
+<ul class="flex flex-col gap-1 mt-auto border-t border-outline-variant pt-4">
+<li>
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
+<span class="material-symbols-outlined">settings</span>
+                    Settings
+                </a>
+</li>
+</ul>
+</nav>
+<!-- TopNavBar Component -->
+<header class="fixed top-0 right-0 left-[280px] flex justify-between items-center px-6 z-30 h-14 w-full border-b border-outline-variant bg-surface dark:bg-surface">
+<!-- Left Side: Product Name & Search -->
+<div class="flex items-center gap-6">
+<h1 class="font-headline-md text-headline-md font-black text-primary">Order Tracker</h1>
+<div class="relative flex items-center">
+<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-[18px]">search</span>
+<input class="h-8 w-64 pl-9 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-0 text-on-surface transition-colors placeholder:text-on-surface-variant" placeholder="Search orders..." type="text"/>
+</div>
+</div>
+<!-- Center: Navigation Links (Optional/Contextual, kept for structural fidelity) -->
+<nav class="hidden lg:flex items-center gap-6 font-body-sm text-body-sm">
+<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Today</a>
+<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">This Week</a>
+<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Monthly</a>
+</nav>
+<!-- Right Side: Actions -->
+<div class="flex items-center gap-4">
+<button class="h-8 px-4 border border-primary text-primary font-label-md rounded hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
+                Sync Data
+            </button>
+<div class="flex items-center gap-2 text-on-surface-variant">
+<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
+<span class="material-symbols-outlined">account_circle</span>
+</button>
+</div>
+</div>
+</header>
+<!-- Main Content Canvas (List-Detail Pattern) -->
+<main class="ml-[280px] mt-14 flex-1 flex flex-col sm:flex-row h-[calc(100vh-56px)] bg-background">
+<!-- Left Pane: Catalogue Table (Fluid) -->
+<section class="flex-1 flex flex-col min-w-0 bg-surface-container-lowest border-r border-outline-variant overflow-hidden">
+<!-- Pane Header -->
+<div class="px-6 py-5 border-b border-outline-variant flex items-center justify-between bg-surface-container-lowest shrink-0">
+<h2 class="font-headline-lg text-headline-lg text-on-surface">Catalogue Management</h2>
+<div class="flex items-center gap-3">
+<div class="relative">
+<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[16px]">filter_list</span>
+<select class="h-8 pl-8 pr-8 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none appearance-none text-on-surface">
+<option>All Categories</option>
+<option>Signature</option>
+<option>Seasonal</option>
+</select>
+</div>
+</div>
+</div>
+<!-- High-Density Table Container -->
+<div class="flex-1 overflow-auto bg-surface-container-lowest">
+<table class="w-full text-left border-collapse whitespace-nowrap">
+<thead class="sticky top-0 bg-surface z-10 shadow-[0_1px_0_0_#c6c6cd]">
+<tr>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium w-12"></th>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Cake Name</th>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">SKU</th>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Base Price</th>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Category</th>
+<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Actions</th>
+</tr>
+</thead>
+<tbody class="font-table-data text-table-data text-on-surface divide-y divide-outline-variant/30">
+<!-- Table Row 1 -->
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
+<td class="px-4 py-1">
+<div class="w-6 h-6 rounded bg-primary-container/20 flex items-center justify-center">
+<span class="material-symbols-outlined text-[14px] text-primary">cake</span>
+</div>
+</td>
+<td class="px-4 py-1 font-medium">Classic Vanilla Bean</td>
+<td class="px-4 py-1 text-on-surface-variant">VB-1001</td>
+<td class="px-4 py-1 text-right">$45.00</td>
+<td class="px-4 py-1">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
+</td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
+<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
+</td>
+</tr>
+<!-- Table Row 2 -->
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
+<td class="px-4 py-1">
+<div class="w-6 h-6 rounded bg-secondary-container/20 flex items-center justify-center">
+<span class="material-symbols-outlined text-[14px] text-secondary">cake</span>
+</div>
+</td>
+<td class="px-4 py-1 font-medium">Decadent Chocolate Fudge</td>
+<td class="px-4 py-1 text-on-surface-variant">CF-1002</td>
+<td class="px-4 py-1 text-right">$55.00</td>
+<td class="px-4 py-1">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
+</td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
+<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
+</td>
+</tr>
+<!-- Table Row 3 -->
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group bg-surface-container-highest/20">
+<td class="px-4 py-1">
+<div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center">
+<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span>
+</div>
+</td>
+<td class="px-4 py-1 font-medium">Autumn Spiced Carrot</td>
+<td class="px-4 py-1 text-on-surface-variant">SC-2001</td>
+<td class="px-4 py-1 text-right">$48.00</td>
+<td class="px-4 py-1">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span>
+</td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
+<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
+</td>
+</tr>
+<!-- More rows appended to show density -->
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
+<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
+<td class="px-4 py-1 font-medium">Lemon Raspberry Delight</td>
+<td class="px-4 py-1 text-on-surface-variant">LR-1004</td>
+<td class="px-4 py-1 text-right">$50.00</td>
+<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
+</tr>
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
+<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
+<td class="px-4 py-1 font-medium">Strawberry Shortcake</td>
+<td class="px-4 py-1 text-on-surface-variant">SS-1005</td>
+<td class="px-4 py-1 text-right">$42.00</td>
+<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
+</tr>
+<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
+<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
+<td class="px-4 py-1 font-medium">Winter Peppermint Mocha</td>
+<td class="px-4 py-1 text-on-surface-variant">PM-2002</td>
+<td class="px-4 py-1 text-right">$52.00</td>
+<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span></td>
+<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
+</tr>
+</tbody>
+</table>
+</div>
+<!-- Table Footer / Pagination -->
+<div class="p-3 border-t border-outline-variant bg-surface flex items-center justify-between shrink-0 font-body-sm text-body-sm text-on-surface-variant">
+<span>Showing 1 to 6 of 24 entries</span>
+<div class="flex items-center gap-1">
+<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center disabled:opacity-50"><span class="material-symbols-outlined text-[18px]">chevron_left</span></button>
+<button class="w-8 h-8 rounded bg-primary text-on-primary flex items-center justify-center font-medium">1</button>
+<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">2</button>
+<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">3</button>
+<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center"><span class="material-symbols-outlined text-[18px]">chevron_right</span></button>
+</div>
+</div>
+</section>
+<!-- Right Pane: Add/Edit Form (Fixed Width) -->
+<aside class="w-[320px] bg-surface flex flex-col shrink-0 overflow-y-auto border-l border-outline-variant">
+<div class="p-5 border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10 flex items-center justify-between">
+<h3 class="font-headline-sm text-headline-sm text-on-surface">Add New Cake</h3>
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[20px]">close</span></button>
+</div>
+<form class="p-5 flex flex-col gap-5 flex-1">
+<!-- Input Group -->
+<div class="flex flex-col gap-1.5">
+<label class="font-label-md text-label-md text-on-surface">Cake Name <span class="text-error">*</span></label>
+<input class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="e.g. Red Velvet Dream" type="text"/>
+</div>
+<!-- Input Group -->
+<div class="flex flex-col gap-1.5">
+<label class="font-label-md text-label-md text-on-surface">SKU <span class="text-on-surface-variant font-normal">(Auto-generated)</span></label>
+<input class="h-9 px-3 rounded border border-outline-variant bg-surface font-body-sm text-body-sm text-on-surface-variant w-full cursor-not-allowed" disabled="" type="text" value="RV-1006"/>
+</div>
+<!-- Split Row -->
+<div class="grid grid-cols-2 gap-4">
+<div class="flex flex-col gap-1.5">
+<label class="font-label-md text-label-md text-on-surface">Base Price</label>
+<div class="relative">
+<span class="absolute left-3 top-2 text-on-surface-variant font-body-sm">$</span>
+<input class="h-9 pl-7 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="0.00" type="number"/>
+</div>
+</div>
+<div class="flex flex-col gap-1.5">
+<label class="font-label-md text-label-md text-on-surface">Category</label>
+<select class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface">
+<option>Signature</option>
+<option>Seasonal</option>
+<option>Custom</option>
+</select>
+</div>
+</div>
+<!-- Textarea -->
+<div class="flex flex-col gap-1.5 mt-2">
+<label class="font-label-md text-label-md text-on-surface">Internal Notes</label>
+<textarea class="p-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface resize-none" placeholder="Production instructions or special alerts..." rows="3"></textarea>
+</div>
+<!-- Toggles / Checklist -->
+<div class="flex flex-col gap-3 mt-2 border border-outline-variant rounded p-3 bg-surface-container-lowest">
+<label class="flex items-center gap-2 cursor-pointer">
+<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
+<span class="font-body-sm text-body-sm text-on-surface">Available for Order</span>
+</label>
+<label class="flex items-center gap-2 cursor-pointer">
+<input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
+<span class="font-body-sm text-body-sm text-on-surface">Requires 48hr Notice</span>
+</label>
+</div>
+</form>
+<!-- Form Actions -->
+<div class="p-5 border-t border-outline-variant bg-surface-container-lowest sticky bottom-0 z-10 flex items-center justify-end gap-3 mt-auto">
+<button class="h-10 px-4 rounded border border-outline-variant text-on-surface font-label-md hover:bg-surface-container-highest transition-colors">
+                    Cancel
+                </button>
+<button class="h-10 px-6 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px]">save</span>
+                    Save Cake
+                </button>
+</div>
+</aside>
+</main>
+</body></html>
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system(1)/screen.png b/inspiration/stitch_bakery_order_management_system(1)/screen.png
new file mode 100644
index 0000000..ee09ece
Binary files /dev/null and b/inspiration/stitch_bakery_order_management_system(1)/screen.png differ
diff --git a/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md b/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md
new file mode 100644
index 0000000..5d2e247
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md
@@ -0,0 +1,159 @@
+---
+name: Bakery Operations Interface
+colors:
+  surface: '#f8f9ff'
+  surface-dim: '#cbdbf5'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eff4ff'
+  surface-container: '#e5eeff'
+  surface-container-high: '#dce9ff'
+  surface-container-highest: '#d3e4fe'
+  on-surface: '#0b1c30'
+  on-surface-variant: '#45464d'
+  inverse-surface: '#213145'
+  inverse-on-surface: '#eaf1ff'
+  outline: '#76777d'
+  outline-variant: '#c6c6cd'
+  surface-tint: '#565e74'
+  primary: '#000000'
+  on-primary: '#ffffff'
+  primary-container: '#131b2e'
+  on-primary-container: '#7c839b'
+  inverse-primary: '#bec6e0'
+  secondary: '#9b4500'
+  on-secondary: '#ffffff'
+  secondary-container: '#fd8a42'
+  on-secondary-container: '#682c00'
+  tertiary: '#000000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#271901'
+  on-tertiary-container: '#98805d'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2fd'
+  primary-fixed-dim: '#bec6e0'
+  on-primary-fixed: '#131b2e'
+  on-primary-fixed-variant: '#3f465c'
+  secondary-fixed: '#ffdbca'
+  secondary-fixed-dim: '#ffb68e'
+  on-secondary-fixed: '#331200'
+  on-secondary-fixed-variant: '#763300'
+  tertiary-fixed: '#fcdeb5'
+  tertiary-fixed-dim: '#dec29a'
+  on-tertiary-fixed: '#271901'
+  on-tertiary-fixed-variant: '#574425'
+  background: '#f8f9ff'
+  on-background: '#0b1c30'
+  surface-variant: '#d3e4fe'
+typography:
+  headline-lg:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+    letterSpacing: -0.01em
+  headline-sm:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  label-md:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  label-sm:
+    fontFamily: Inter
+    fontSize: 11px
+    fontWeight: '600'
+    lineHeight: 14px
+  table-data:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 16px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  container-margin: 16px
+  gutter: 8px
+  row-padding: 8px 12px
+  cell-padding: 4px 8px
+  stack-gap-sm: 4px
+  stack-gap-md: 12px
+---
+
+## Brand & Style
+
+The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue. 
+
+The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
+
+## Colors
+
+The palette is anchored in professional neutrality to keep the focus on data. 
+- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
+- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
+- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
+
+## Typography
+
+This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel. 
+- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen. 
+- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data. 
+- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
+
+## Layout & Spacing
+
+The layout follows a **Fluid Grid** model with a 4px base increment. 
+- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
+- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
+- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
+
+## Elevation & Depth
+
+This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows. 
+- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields. 
+- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
+- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
+
+## Shapes
+
+The design system uses a **Soft (Level 1)** roundedness profile. 
+- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
+- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
+
+## Components
+
+- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
+- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
+- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
+- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
+- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
+- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system(2)/code.html b/inspiration/stitch_bakery_order_management_system(2)/code.html
new file mode 100644
index 0000000..c976ce8
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system(2)/code.html
@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Production Dashboard - Crumbs &amp; Co.</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "outline-variant": "#c6c6cd",
+                      "on-tertiary-container": "#98805d",
+                      "on-secondary": "#ffffff",
+                      "tertiary": "#000000",
+                      "surface-container-highest": "#d3e4fe",
+                      "on-tertiary-fixed-variant": "#574425",
+                      "secondary-container": "#fd8a42",
+                      "surface-tint": "#565e74",
+                      "on-secondary-fixed": "#331200",
+                      "on-primary-container": "#7c839b",
+                      "inverse-on-surface": "#eaf1ff",
+                      "on-primary-fixed": "#131b2e",
+                      "on-surface": "#0b1c30",
+                      "on-primary-fixed-variant": "#3f465c",
+                      "surface": "#f8f9ff",
+                      "on-background": "#0b1c30",
+                      "on-error-container": "#93000a",
+                      "surface-container-low": "#eff4ff",
+                      "surface-container-lowest": "#ffffff",
+                      "primary-fixed-dim": "#bec6e0",
+                      "outline": "#76777d",
+                      "surface-container-high": "#dce9ff",
+                      "on-primary": "#ffffff",
+                      "inverse-primary": "#bec6e0",
+                      "primary-container": "#131b2e",
+                      "secondary-fixed": "#ffdbca",
+                      "tertiary-fixed-dim": "#dec29a",
+                      "secondary": "#9b4500",
+                      "primary": "#000000",
+                      "surface-container": "#e5eeff",
+                      "background": "#f8f9ff",
+                      "surface-variant": "#d3e4fe",
+                      "on-error": "#ffffff",
+                      "on-secondary-container": "#682c00",
+                      "inverse-surface": "#213145",
+                      "primary-fixed": "#dae2fd",
+                      "on-secondary-fixed-variant": "#763300",
+                      "on-surface-variant": "#45464d",
+                      "error": "#ba1a1a",
+                      "surface-dim": "#cbdbf5",
+                      "secondary-fixed-dim": "#ffb68e",
+                      "tertiary-container": "#271901",
+                      "surface-bright": "#f8f9ff",
+                      "error-container": "#ffdad6",
+                      "on-tertiary-fixed": "#271901",
+                      "on-tertiary": "#ffffff",
+                      "tertiary-fixed": "#fcdeb5"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.125rem",
+                      "lg": "0.25rem",
+                      "xl": "0.5rem",
+                      "full": "0.75rem"
+              },
+              "spacing": {
+                      "stack-gap-md": "12px",
+                      "row-padding": "8px 12px",
+                      "container-margin": "16px",
+                      "unit": "4px",
+                      "stack-gap-sm": "4px",
+                      "cell-padding": "4px 8px",
+                      "gutter": "8px"
+              },
+              "fontFamily": {
+                      "body-md": [
+                              "Inter"
+                      ],
+                      "label-md": [
+                              "Inter"
+                      ],
+                      "label-sm": [
+                              "Inter"
+                      ],
+                      "headline-md": [
+                              "Inter"
+                      ],
+                      "headline-sm": [
+                              "Inter"
+                      ],
+                      "body-sm": [
+                              "Inter"
+                      ],
+                      "table-data": [
+                              "Inter"
+                      ],
+                      "headline-lg": [
+                              "Inter"
+                      ]
+              },
+              "fontSize": {
+                      "body-md": [
+                              "14px",
+                              {
+                                      "lineHeight": "20px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "label-md": [
+                              "12px",
+                              {
+                                      "lineHeight": "16px",
+                                      "letterSpacing": "0.05em",
+                                      "fontWeight": "500"
+                              }
+                      ],
+                      "label-sm": [
+                              "11px",
+                              {
+                                      "lineHeight": "14px",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "headline-md": [
+                              "20px",
+                              {
+                                      "lineHeight": "28px",
+                                      "letterSpacing": "-0.01em",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "headline-sm": [
+                              "16px",
+                              {
+                                      "lineHeight": "24px",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "body-sm": [
+                              "13px",
+                              {
+                                      "lineHeight": "18px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "table-data": [
+                              "13px",
+                              {
+                                      "lineHeight": "16px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "headline-lg": [
+                              "24px",
+                              {
+                                      "lineHeight": "32px",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "600"
+                              }
+                      ]
+              }
+      },
+          },
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background font-body-md text-body-md overflow-hidden">
+<!-- TopNavBar -->
+<nav class="fixed top-0 right-0 left-[280px] flex justify-between items-center px-6 z-30 h-14 w-full border-b border-outline-variant bg-surface text-primary flat no shadows" style="width: calc(100% - 280px);">
+<div class="flex items-center gap-6 flex-1">
+<span class="font-headline-md text-headline-md font-black text-primary">Order Tracker</span>
+<div class="relative w-96 flex items-center">
+<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-sm">search</span>
+<input class="w-full h-8 pl-9 pr-3 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none placeholder:text-on-surface-variant transition-colors" placeholder="Search orders, customers, or SKUs..." type="text"/>
+</div>
+</div>
+<div class="flex items-center gap-6">
+<div class="flex gap-4">
+<button class="text-primary font-bold border-b-2 border-secondary pb-1 cursor-pointer active:scale-95 font-body-sm text-body-sm transition-colors">Today</button>
+<button class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 hover:text-primary font-body-sm text-body-sm transition-colors">This Week</button>
+<button class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 hover:text-primary font-body-sm text-body-sm transition-colors">Monthly</button>
+</div>
+<div class="h-6 w-px bg-outline-variant mx-2"></div>
+<button class="h-8 px-4 bg-primary text-on-primary rounded flex items-center gap-2 hover:opacity-90 transition-opacity font-label-md text-label-md active:scale-95">
+<span class="material-symbols-outlined text-[18px]">sync</span>
+                Sync Data
+            </button>
+<div class="flex items-center gap-3 text-on-surface-variant">
+<button class="hover:text-primary transition-colors active:scale-95 p-1 rounded hover:bg-surface-container">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<button class="hover:text-primary transition-colors active:scale-95 p-1 rounded hover:bg-surface-container">
+<span class="material-symbols-outlined">account_circle</span>
+</button>
+</div>
+</div>
+</nav>
+<!-- SideNavBar -->
+<aside class="fixed left-0 top-0 bottom-0 flex flex-col p-4 z-40 w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest text-primary flat no shadows">
+<div class="mb-8 mt-2 px-2">
+<h1 class="font-headline-sm text-headline-sm font-bold text-primary">Crumbs &amp; Co.</h1>
+<p class="font-label-md text-label-md text-on-surface-variant mt-1">Production Hub</p>
+</div>
+<button class="mb-8 w-full h-10 bg-primary text-on-primary rounded flex justify-center items-center gap-2 hover:opacity-90 transition-opacity font-label-md text-label-md font-bold active:scale-95">
+<span class="material-symbols-outlined text-[18px]">add</span>
+            New Order
+        </button>
+<div class="flex flex-col gap-1 flex-1">
+<button class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-bold font-label-md text-label-md cursor-pointer active:opacity-80 w-full text-left">
+<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">dashboard</span>
+                Dashboard
+            </button>
+<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
+<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
+                Orders
+            </button>
+<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
+<span class="material-symbols-outlined text-[20px]">inventory_2</span>
+                Catalogue
+            </button>
+</div>
+<div class="mt-auto pt-4 border-t border-outline-variant">
+<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
+<span class="material-symbols-outlined text-[20px]">settings</span>
+                Settings
+            </button>
+<div class="mt-4 px-4 flex items-center gap-3">
+<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center text-primary font-bold font-label-sm text-label-sm">
+                    BM
+                </div>
+<div class="flex flex-col">
+<span class="font-label-md text-label-md font-bold text-primary">Bakery Manager</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Active</span>
+</div>
+</div>
+</div>
+</aside>
+<!-- Main Content Canvas -->
+<main class="ml-[280px] mt-14 p-6 h-[calc(100vh-56px)] overflow-y-auto bg-background">
+<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
+<!-- Key Metrics Grid -->
+<div class="grid grid-cols-4 gap-4">
+<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
+<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
+<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[16px]">receipt_long</span> Total Orders Today
+                    </span>
+<span class="font-headline-lg text-headline-lg font-bold text-primary">142</span>
+<span class="font-label-sm text-label-sm text-[#16a34a] flex items-center">
+<span class="material-symbols-outlined text-[14px]">arrow_upward</span> 12% vs yesterday
+                    </span>
+</div>
+<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
+<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
+<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[16px]">cake</span> Cakes to Decorate
+                    </span>
+<span class="font-headline-lg text-headline-lg font-bold text-primary">87</span>
+<span class="font-label-sm text-label-sm text-[#ca8a04] flex items-center">
+<span class="material-symbols-outlined text-[14px]">priority_high</span> 24 Rush Orders
+                    </span>
+</div>
+<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
+<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
+<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[16px]">check_circle</span> Ready for Pickup
+                    </span>
+<span class="font-headline-lg text-headline-lg font-bold text-primary">34</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center">
+                        Next pickup in 15m
+                    </span>
+</div>
+<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
+<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
+<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[16px]">payments</span> Revenue (Est)
+                    </span>
+<span class="font-headline-lg text-headline-lg font-bold text-primary">$4,250</span>
+<span class="font-label-sm text-label-sm text-[#16a34a] flex items-center">
+<span class="material-symbols-outlined text-[14px]">trending_up</span> On target
+                    </span>
+</div>
+</div>
+<div class="grid grid-cols-12 gap-6 items-start">
+<!-- Production View (Left Pane) -->
+<div class="col-span-3 flex flex-col gap-4">
+<div class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col">
+<div class="p-3 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
+<h2 class="font-headline-sm text-headline-sm font-bold text-primary">Production Queue</h2>
+<button class="p-1 text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined text-[18px]">filter_list</span></button>
+</div>
+<div class="p-0 flex flex-col">
+<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded bg-[#3b2f2f] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">CF</div>
+<div class="flex flex-col">
+<span class="font-body-sm text-body-sm font-bold text-primary">Chocolate Fudge</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Standard 8"</span>
+</div>
+</div>
+<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">12</span>
+</div>
+<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer bg-surface-container-lowest">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded bg-[#a22a2a] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">RV</div>
+<div class="flex flex-col">
+<span class="font-body-sm text-body-sm font-bold text-primary">Red Velvet</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Custom Inscriptions</span>
+</div>
+</div>
+<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">5</span>
+</div>
+<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded bg-[#f3e5ab] flex items-center justify-center text-[#5c4033] font-bold font-label-sm text-label-sm">VB</div>
+<div class="flex flex-col">
+<span class="font-body-sm text-body-sm font-bold text-primary">Vanilla Bean</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Tiered</span>
+</div>
+</div>
+<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">8</span>
+</div>
+<div class="flex items-center justify-between p-3 hover:bg-surface-container-low transition-colors cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded bg-[#e8a365] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">CC</div>
+<div class="flex flex-col">
+<span class="font-body-sm text-body-sm font-bold text-primary">Carrot Cake</span>
+<span class="font-label-sm text-label-sm text-on-surface-variant">Nut-Free</span>
+</div>
+</div>
+<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">3</span>
+</div>
+</div>
+<div class="p-2 border-t border-outline-variant bg-surface-container-low text-center">
+<button class="font-label-md text-label-md text-secondary font-bold hover:underline">View Full Inventory</button>
+</div>
+</div>
+</div>
+<!-- Order Table (Right Pane) -->
+<div class="col-span-9 flex flex-col gap-4">
+<div class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col h-[500px]">
+<div class="p-3 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
+<div class="flex items-center gap-4">
+<h2 class="font-headline-sm text-headline-sm font-bold text-primary">Active Orders</h2>
+<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container rounded font-label-sm text-label-sm font-bold">142 Total</span>
+</div>
+<div class="flex items-center gap-2">
+<button class="h-8 px-3 border border-outline-variant rounded flex items-center gap-1 font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
+<span class="material-symbols-outlined text-[16px]">tune</span> Filter
+                                </button>
+<button class="h-8 px-3 border border-outline-variant rounded flex items-center gap-1 font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
+<span class="material-symbols-outlined text-[16px]">ios_share</span> Export
+                                </button>
+</div>
+</div>
+<div class="flex-1 overflow-auto">
+<table class="w-full text-left border-collapse">
+<thead class="sticky top-0 bg-surface-container-lowest border-b border-outline-variant z-10">
+<tr>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Order ID</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Customer</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Pickup Time</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant w-1/3">Items</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant text-right">Total</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant text-center">Status</th>
+<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant w-8"></th>
+</tr>
+</thead>
+<tbody>
+<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
+<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9921</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface">Sarah Jenkins</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">10:30 AM</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title='1x Chocolate Fudge (8"), 12x Macarons'>1x Chocolate Fudge (8"), 12x Macarons</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$65.00</td>
+<td class="p-cell-padding text-center">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#dcfce7] text-[#166534]">Ready</span>
+</td>
+<td class="p-cell-padding text-center">
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
+</td>
+</tr>
+<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors bg-[#F8FAFC] h-[40px]">
+<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9922</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface">Michael Chang</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant text-[#ca8a04] font-bold">11:00 AM (Rush)</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="2x Red Velvet (Tiered), 1x Custom Inscription">2x Red Velvet (Tiered), 1x Custom In...</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$145.50</td>
+<td class="p-cell-padding text-center">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#fef08a] text-[#854d0e]">Decorating</span>
+</td>
+<td class="p-cell-padding text-center">
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
+</td>
+</tr>
+<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
+<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9923</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface">Elena Rodriguez</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">1:00 PM</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title='1x Vanilla Bean (10")'>1x Vanilla Bean (10")</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$45.00</td>
+<td class="p-cell-padding text-center">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#fee2e2] text-[#991b1b]">Baking</span>
+</td>
+<td class="p-cell-padding text-center">
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
+</td>
+</tr>
+<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors bg-[#F8FAFC] h-[40px]">
+<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9924</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface">David Kim</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">2:30 PM</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="1x Carrot Cake (Nut-Free)">1x Carrot Cake (Nut-Free)</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$50.00</td>
+<td class="p-cell-padding text-center">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#f1f5f9] text-[#475569]">Queued</span>
+</td>
+<td class="p-cell-padding text-center">
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
+</td>
+</tr>
+<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
+<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9925</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface">Corporate Event Inc.</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">4:00 PM</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="5x Chocolate Fudge (Sheet), 100x Cookies">5x Chocolate Fudge (Sheet), 100x C...</td>
+<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$450.00</td>
+<td class="p-cell-padding text-center">
+<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#f1f5f9] text-[#475569]">Queued</span>
+</td>
+<td class="p-cell-padding text-center">
+<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+<div class="p-2 border-t border-outline-variant bg-surface-container-lowest flex justify-between items-center text-on-surface-variant">
+<span class="font-label-sm text-label-sm">Showing 1-5 of 142</span>
+<div class="flex gap-1">
+<button class="w-6 h-6 rounded flex items-center justify-center border border-outline-variant hover:bg-surface-container-low disabled:opacity-50"><span class="material-symbols-outlined text-[16px]">chevron_left</span></button>
+<button class="w-6 h-6 rounded flex items-center justify-center border border-outline-variant hover:bg-surface-container-low"><span class="material-symbols-outlined text-[16px]">chevron_right</span></button>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</body></html>
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system(2)/screen.png b/inspiration/stitch_bakery_order_management_system(2)/screen.png
new file mode 100644
index 0000000..8350eb1
Binary files /dev/null and b/inspiration/stitch_bakery_order_management_system(2)/screen.png differ
diff --git a/inspiration/stitch_bakery_order_management_system/DESIGN.md b/inspiration/stitch_bakery_order_management_system/DESIGN.md
new file mode 100644
index 0000000..5d2e247
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system/DESIGN.md
@@ -0,0 +1,159 @@
+---
+name: Bakery Operations Interface
+colors:
+  surface: '#f8f9ff'
+  surface-dim: '#cbdbf5'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eff4ff'
+  surface-container: '#e5eeff'
+  surface-container-high: '#dce9ff'
+  surface-container-highest: '#d3e4fe'
+  on-surface: '#0b1c30'
+  on-surface-variant: '#45464d'
+  inverse-surface: '#213145'
+  inverse-on-surface: '#eaf1ff'
+  outline: '#76777d'
+  outline-variant: '#c6c6cd'
+  surface-tint: '#565e74'
+  primary: '#000000'
+  on-primary: '#ffffff'
+  primary-container: '#131b2e'
+  on-primary-container: '#7c839b'
+  inverse-primary: '#bec6e0'
+  secondary: '#9b4500'
+  on-secondary: '#ffffff'
+  secondary-container: '#fd8a42'
+  on-secondary-container: '#682c00'
+  tertiary: '#000000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#271901'
+  on-tertiary-container: '#98805d'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2fd'
+  primary-fixed-dim: '#bec6e0'
+  on-primary-fixed: '#131b2e'
+  on-primary-fixed-variant: '#3f465c'
+  secondary-fixed: '#ffdbca'
+  secondary-fixed-dim: '#ffb68e'
+  on-secondary-fixed: '#331200'
+  on-secondary-fixed-variant: '#763300'
+  tertiary-fixed: '#fcdeb5'
+  tertiary-fixed-dim: '#dec29a'
+  on-tertiary-fixed: '#271901'
+  on-tertiary-fixed-variant: '#574425'
+  background: '#f8f9ff'
+  on-background: '#0b1c30'
+  surface-variant: '#d3e4fe'
+typography:
+  headline-lg:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+    letterSpacing: -0.01em
+  headline-sm:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  label-md:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  label-sm:
+    fontFamily: Inter
+    fontSize: 11px
+    fontWeight: '600'
+    lineHeight: 14px
+  table-data:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 16px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  container-margin: 16px
+  gutter: 8px
+  row-padding: 8px 12px
+  cell-padding: 4px 8px
+  stack-gap-sm: 4px
+  stack-gap-md: 12px
+---
+
+## Brand & Style
+
+The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue. 
+
+The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
+
+## Colors
+
+The palette is anchored in professional neutrality to keep the focus on data. 
+- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
+- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
+- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
+
+## Typography
+
+This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel. 
+- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen. 
+- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data. 
+- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
+
+## Layout & Spacing
+
+The layout follows a **Fluid Grid** model with a 4px base increment. 
+- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
+- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
+- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
+
+## Elevation & Depth
+
+This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows. 
+- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields. 
+- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
+- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
+
+## Shapes
+
+The design system uses a **Soft (Level 1)** roundedness profile. 
+- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
+- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
+
+## Components
+
+- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
+- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
+- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
+- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
+- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
+- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system/code.html b/inspiration/stitch_bakery_order_management_system/code.html
new file mode 100644
index 0000000..7825373
--- /dev/null
+++ b/inspiration/stitch_bakery_order_management_system/code.html
@@ -0,0 +1,443 @@
+<!DOCTYPE html>
+
+<html class="h-full bg-background antialiased" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Order Tracker - Dashboard</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "outline-variant": "#c6c6cd",
+                        "on-tertiary-container": "#98805d",
+                        "on-secondary": "#ffffff",
+                        "tertiary": "#000000",
+                        "surface-container-highest": "#d3e4fe",
+                        "on-tertiary-fixed-variant": "#574425",
+                        "secondary-container": "#fd8a42",
+                        "surface-tint": "#565e74",
+                        "on-secondary-fixed": "#331200",
+                        "on-primary-container": "#7c839b",
+                        "inverse-on-surface": "#eaf1ff",
+                        "on-primary-fixed": "#131b2e",
+                        "on-surface": "#0b1c30",
+                        "on-primary-fixed-variant": "#3f465c",
+                        "surface": "#f8f9ff",
+                        "on-background": "#0b1c30",
+                        "on-error-container": "#93000a",
+                        "surface-container-low": "#eff4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "primary-fixed-dim": "#bec6e0",
+                        "outline": "#76777d",
+                        "surface-container-high": "#dce9ff",
+                        "on-primary": "#ffffff",
+                        "inverse-primary": "#bec6e0",
+                        "primary-container": "#131b2e",
+                        "secondary-fixed": "#ffdbca",
+                        "tertiary-fixed-dim": "#dec29a",
+                        "secondary": "#9b4500",
+                        "primary": "#000000",
+                        "surface-container": "#e5eeff",
+                        "background": "#f8f9ff",
+                        "surface-variant": "#d3e4fe",
+                        "on-error": "#ffffff",
+                        "on-secondary-container": "#682c00",
+                        "inverse-surface": "#213145",
+                        "primary-fixed": "#dae2fd",
+                        "on-secondary-fixed-variant": "#763300",
+                        "on-surface-variant": "#45464d",
+                        "error": "#ba1a1a",
+                        "surface-dim": "#cbdbf5",
+                        "secondary-fixed-dim": "#ffb68e",
+                        "tertiary-container": "#271901",
+                        "surface-bright": "#f8f9ff",
+                        "error-container": "#ffdad6",
+                        "on-tertiary-fixed": "#271901",
+                        "on-tertiary": "#ffffff",
+                        "tertiary-fixed": "#fcdeb5"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-gap-md": "12px",
+                        "row-padding": "8px 12px",
+                        "container-margin": "16px",
+                        "unit": "4px",
+                        "stack-gap-sm": "4px",
+                        "cell-padding": "4px 8px",
+                        "gutter": "8px"
+                    },
+                    "fontFamily": {
+                        "body-md": ["Inter"],
+                        "label-md": ["Inter"],
+                        "label-sm": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "headline-sm": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "table-data": ["Inter"],
+                        "headline-lg": ["Inter"]
+                    },
+                    "fontSize": {
+                        "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
+                        "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
+                        "label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
+                        "headline-md": ["20px", {"lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
+                        "headline-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
+                        "body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
+                        "table-data": ["13px", {"lineHeight": "16px", "fontWeight": "400"}],
+                        "headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .material-symbols-outlined.fill {
+            font-variation-settings: 'FILL' 1;
+        }
+        
+        /* Custom scrollbar for dense data areas */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c6c6cd;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #76777d;
+        }
+    </style>
+</head>
+<body class="h-full flex overflow-hidden">
+<!-- SideNavBar (Shared Component) -->
+<nav class="hidden md:flex flex-col w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest fixed left-0 top-0 bottom-0 p-4 z-40">
+<div class="mb-8">
+<h1 class="font-headline-sm text-headline-sm font-bold text-primary truncate">Crumbs &amp; Co.</h1>
+<p class="font-body-sm text-body-sm text-on-surface-variant truncate mt-1">Production Hub</p>
+</div>
+<button class="w-full flex items-center justify-center gap-2 bg-primary text-on-primary py-2 px-4 rounded mb-6 font-label-md text-label-md hover:opacity-90 transition-opacity">
+<span class="material-symbols-outlined text-[18px]">add</span>
+            New Order
+        </button>
+<div class="flex-1 flex flex-col gap-1">
+<!-- Active Tab: Dashboard -->
+<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-label-md text-label-md font-bold cursor-pointer active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
+                Dashboard
+            </a>
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
+                Orders
+            </a>
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
+                Catalogue
+            </a>
+</div>
+<div class="mt-auto border-t border-outline-variant pt-4">
+<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+                Settings
+            </a>
+<div class="mt-4 flex items-center gap-3 px-4">
+<div class="w-8 h-8 rounded-full bg-surface-container-high overflow-hidden border border-outline-variant flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-surface-variant text-[20px]">person</span>
+</div>
+<div class="truncate">
+<p class="font-label-sm text-label-sm text-on-surface">Bakery Manager</p>
+</div>
+</div>
+</div>
+</nav>
+<!-- Main Content Area -->
+<div class="flex-1 flex flex-col md:ml-[280px] w-full min-w-0 bg-background">
+<!-- TopNavBar (Shared Component) -->
+<header class="h-14 w-full border-b border-outline-variant bg-surface flex justify-between items-center px-6 z-30 sticky top-0 shrink-0">
+<div class="flex items-center gap-8">
+<div class="font-headline-md text-headline-md font-black text-primary">Order Tracker</div>
+<!-- Search Bar -->
+<div class="relative w-64 hidden lg:block">
+<span class="material-symbols-outlined absolute left-2.5 top-1.5 text-on-surface-variant text-[20px]">search</span>
+<input class="w-full h-8 pl-9 pr-3 border border-outline-variant rounded bg-surface-container-lowest text-body-sm focus:border-primary focus:ring-0 placeholder:text-on-surface-variant/60" placeholder="Search orders..." type="text"/>
+</div>
+</div>
+<nav class="hidden lg:flex items-center gap-6 font-body-sm text-body-sm">
+<a class="text-primary font-bold border-b-2 border-secondary pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">Today</a>
+<a class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">This Week</a>
+<a class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">Monthly</a>
+</nav>
+<div class="flex items-center gap-4">
+<button class="hidden sm:flex h-8 px-4 border border-outline-variant rounded items-center justify-center font-label-md text-label-md text-on-surface hover:bg-surface-container-low transition-colors active:scale-95">
+                    Sync Data
+                </button>
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:scale-95">
+<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
+</button>
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:scale-95 md:hidden">
+<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
+</button>
+</div>
+</header>
+<!-- Canvas / Dashboard Layout -->
+<main class="flex-1 overflow-auto p-4 flex flex-col gap-4">
+<div class="flex flex-col lg:flex-row gap-4 h-full min-h-[600px]">
+<!-- Left Pane: Order Entry Form & Catalogue -->
+<div class="flex-1 flex flex-col gap-4 min-w-0">
+<!-- Customer Info Form -->
+<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col">
+<div class="px-4 py-3 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/50">
+<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px] text-on-surface-variant">person_add</span>
+                                Customer Details
+                            </h2>
+</div>
+<div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4">
+<!-- Input Fields -->
+<div class="flex flex-col gap-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Customer Name *</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="John Doe" type="text"/>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Phone</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="(555) 123-4567" type="tel"/>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Email</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="john@example.com" type="email"/>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Pickup Date *</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" type="date"/>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Pickup Time</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" type="time"/>
+</div>
+<div class="flex flex-col gap-1 md:col-span-2 lg:col-span-1">
+<label class="font-label-sm text-label-sm text-on-surface-variant">Order Notes</label>
+<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="Allergies, special requests..." type="text"/>
+</div>
+</div>
+</section>
+<!-- Catalogue Selection Grid -->
+<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col flex-1 min-h-[300px]">
+<div class="px-4 py-3 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/50">
+<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px] text-on-surface-variant">inventory_2</span>
+                                Catalogue Items
+                            </h2>
+<div class="relative w-48">
+<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[16px]">filter_list</span>
+<input class="w-full h-7 pl-8 pr-2 border border-outline-variant rounded bg-surface font-body-sm text-body-sm focus:border-primary focus:ring-0 placeholder:text-on-surface-variant/60" placeholder="Filter items..." type="text"/>
+</div>
+</div>
+<div class="p-4 overflow-y-auto flex-1">
+<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
+<!-- Item Card 1 -->
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between hover:border-outline transition-colors bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-secondary-container/20 rounded border border-secondary-container/30 flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-secondary-container text-[16px]">cake</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Classic Vanilla</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$35.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant hover:bg-outline-variant hover:text-on-surface transition-colors disabled:opacity-50">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary transition-colors">+</button>
+</div>
+</div>
+<!-- Item Card 2 -->
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between hover:border-outline transition-colors bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-tertiary-fixed-dim/20 rounded border border-tertiary-fixed-dim/30 flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-tertiary-container text-[16px]">cake</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Rich Chocolate</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$40.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant hover:bg-outline-variant hover:text-on-surface transition-colors">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">1</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary transition-colors">+</button>
+</div>
+</div>
+<!-- Placeholder Items to simulate density -->
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-surface-variant text-[16px]">cake</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Red Velvet</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$42.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
+</div>
+</div>
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-surface-variant text-[16px]">cookie</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Choc Chip Box</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$15.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
+</div>
+</div>
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-surface-variant text-[16px]">bakery_dining</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Sourdough Loaf</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$8.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
+</div>
+</div>
+<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
+<div class="flex items-start gap-2">
+<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-surface-variant text-[16px]">breakfast_dining</span>
+</div>
+<div class="min-w-0">
+<div class="font-label-sm text-label-sm text-on-surface truncate">Croissant Box</div>
+<div class="font-table-data text-table-data text-on-surface-variant">$24.00</div>
+</div>
+</div>
+<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
+<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
+<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
+</div>
+</div>
+</div>
+</div>
+</section>
+</div>
+<!-- Right Pane: Order Summary -->
+<aside class="w-full lg:w-[320px] flex flex-col bg-surface-container-lowest border border-outline-variant rounded shrink-0">
+<div class="px-4 py-3 border-b border-outline-variant bg-surface-container-low/50">
+<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px] text-on-surface-variant">receipt_long</span>
+                            Order Summary
+                        </h2>
+</div>
+<!-- Line Items -->
+<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
+<div class="flex justify-between items-start border-b border-outline-variant/50 pb-2">
+<div class="min-w-0 flex-1 pr-2">
+<div class="font-label-sm text-label-sm text-on-surface">1x Rich Chocolate</div>
+<div class="font-table-data text-table-data text-on-surface-variant truncate">No substitutions</div>
+</div>
+<div class="font-label-sm text-label-sm text-on-surface whitespace-nowrap">$40.00</div>
+<button class="ml-2 text-error hover:text-error/80">
+<span class="material-symbols-outlined text-[16px]">close</span>
+</button>
+</div>
+</div>
+<!-- Totals & Actions -->
+<div class="p-4 border-t border-outline-variant bg-surface-bright flex flex-col gap-3">
+<div class="flex justify-between items-center font-body-sm text-body-sm text-on-surface-variant">
+<span>Subtotal</span>
+<span>$40.00</span>
+</div>
+<div class="flex justify-between items-center font-body-sm text-body-sm text-on-surface-variant">
+<span>Tax (8%)</span>
+<span>$3.20</span>
+</div>
+<div class="flex justify-between items-center font-headline-sm text-headline-sm text-on-surface pt-2 border-t border-outline-variant/50">
+<span>Total</span>
+<span>$43.20</span>
+</div>
+<button class="w-full h-10 mt-2 bg-primary text-on-primary rounded font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity active:scale-[0.98]">
+<span class="material-symbols-outlined text-[18px]">check_circle</span>
+                            Finalize Order
+                        </button>
+</div>
+</aside>
+</div>
+<!-- Bottom List View: Recent Orders -->
+<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col shrink-0 mt-2">
+<div class="px-4 py-2 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/30">
+<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Recent Orders</h3>
+<button class="text-on-surface-variant hover:text-primary p-1">
+<span class="material-symbols-outlined text-[16px]">expand_less</span>
+</button>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse">
+<thead>
+<tr class="border-b border-outline-variant bg-surface">
+<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Order ID</th>
+<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Customer</th>
+<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Date</th>
+<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Status</th>
+<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Total</th>
+</tr>
+</thead>
+<tbody class="font-table-data text-table-data text-on-surface">
+<tr class="border-b border-outline-variant/50 hover:bg-surface-container-low transition-colors">
+<td class="p-cell-padding">#ORD-092</td>
+<td class="p-cell-padding font-medium">Alice Smith</td>
+<td class="p-cell-padding text-on-surface-variant">Today, 09:30 AM</td>
+<td class="p-cell-padding">
+<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-surface-container text-on-surface-variant text-[10px] font-bold uppercase">Preparing</span>
+</td>
+<td class="p-cell-padding text-right">$125.50</td>
+</tr>
+<tr class="border-b border-outline-variant/50 hover:bg-surface-container-low transition-colors">
+<td class="p-cell-padding">#ORD-091</td>
+<td class="p-cell-padding font-medium">Bob Jones</td>
+<td class="p-cell-padding text-on-surface-variant">Today, 08:15 AM</td>
+<td class="p-cell-padding">
+<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-surface-variant text-on-surface text-[10px] font-bold uppercase">Ready</span>
+</td>
+<td class="p-cell-padding text-right">$45.00</td>
+</tr>
+</tbody>
+</table>
+</div>
+</section>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/inspiration/stitch_bakery_order_management_system/screen.png b/inspiration/stitch_bakery_order_management_system/screen.png
new file mode 100644
index 0000000..c634e28
Binary files /dev/null and b/inspiration/stitch_bakery_order_management_system/screen.png differ
diff --git a/server/static/fontawesome/css/fontawesome.min.css b/server/static/fontawesome/css/fontawesome.min.css
deleted file mode 100644
index 4e07e30..0000000
--- a/server/static/fontawesome/css/fontawesome.min.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-regular,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-brands:before,.fa-regular:before,.fa-solid:before,.fa:before,.fab:before,.far:before,.fas:before{content:var(--fa)}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}
-
-.fa-0{--fa:"\30"}.fa-1{--fa:"\31"}.fa-2{--fa:"\32"}.fa-3{--fa:"\33"}.fa-4{--fa:"\34"}.fa-5{--fa:"\35"}.fa-6{--fa:"\36"}.fa-7{--fa:"\37"}.fa-8{--fa:"\38"}.fa-9{--fa:"\39"}.fa-fill-drip{--fa:"\f576"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-at{--fa:"\40"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-text-height{--fa:"\f034"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-stethoscope{--fa:"\f0f1"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-info{--fa:"\f129"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-explosion{--fa:"\e4e9"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-wave-square{--fa:"\f83e"}.fa-ring{--fa:"\f70b"}.fa-building-un{--fa:"\e4d9"}.fa-dice-three{--fa:"\f527"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-door-open{--fa:"\f52b"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-atom{--fa:"\f5d2"}.fa-soap{--fa:"\e06e"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-pump-medical{--fa:"\e06a"}.fa-fingerprint{--fa:"\f577"}.fa-hand-point-right{--fa:"\f0a4"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-flag-checkered{--fa:"\f11e"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-crop{--fa:"\f125"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-users-rectangle{--fa:"\e594"}.fa-people-roof{--fa:"\e537"}.fa-people-line{--fa:"\e534"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-diagram-predecessor{--fa:"\e477"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-male,.fa-person{--fa:"\f183"}.fa-laptop{--fa:"\f109"}.fa-file-csv{--fa:"\f6dd"}.fa-menorah{--fa:"\f676"}.fa-truck-plane{--fa:"\e58f"}.fa-record-vinyl{--fa:"\f8d9"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-bong{--fa:"\f55c"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-jar-wheat{--fa:"\e517"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-pager{--fa:"\f815"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-strikethrough{--fa:"\f0cc"}.fa-k{--fa:"\4b"}.fa-landmark-flag{--fa:"\e51c"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-backward{--fa:"\f04a"}.fa-caret-right{--fa:"\f0da"}.fa-comments{--fa:"\f086"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-code-pull-request{--fa:"\e13c"}.fa-clipboard-list{--fa:"\f46d"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-user-check{--fa:"\f4fc"}.fa-vial-virus{--fa:"\e597"}.fa-sheet-plastic{--fa:"\e571"}.fa-blog{--fa:"\f781"}.fa-user-ninja{--fa:"\f504"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-toggle-off{--fa:"\f204"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-person-drowning{--fa:"\e545"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-spray-can{--fa:"\f5bd"}.fa-truck-monster{--fa:"\f63b"}.fa-w{--fa:"\57"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-rainbow{--fa:"\f75b"}.fa-circle-notch{--fa:"\f1ce"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-paw{--fa:"\f1b0"}.fa-cloud{--fa:"\f0c2"}.fa-trowel-bricks{--fa:"\e58a"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-hospital-user{--fa:"\f80d"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-binoculars{--fa:"\f1e5"}.fa-microphone-slash{--fa:"\f131"}.fa-box-tissue{--fa:"\e05b"}.fa-motorcycle{--fa:"\f21c"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-toilets-portable{--fa:"\e584"}.fa-hockey-puck{--fa:"\f453"}.fa-table{--fa:"\f0ce"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-users-slash{--fa:"\e073"}.fa-clover{--fa:"\e139"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-star-and-crescent{--fa:"\f699"}.fa-house-fire{--fa:"\e50c"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-helicopter{--fa:"\f533"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-file-circle-question{--fa:"\e4ef"}.fa-laptop-code{--fa:"\f5fc"}.fa-swatchbook{--fa:"\f5c3"}.fa-prescription-bottle{--fa:"\f485"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-people-group{--fa:"\e533"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-film{--fa:"\f008"}.fa-ruler-horizontal{--fa:"\f547"}.fa-people-robbery{--fa:"\e536"}.fa-lightbulb{--fa:"\f0eb"}.fa-caret-left{--fa:"\f0d9"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-headphones-alt,.fa-headphones-simple{--fa:"\f58f"}.fa-sitemap{--fa:"\f0e8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-memory{--fa:"\f538"}.fa-road-spikes{--fa:"\e568"}.fa-fire-burner{--fa:"\e4f1"}.fa-flag{--fa:"\f024"}.fa-hanukiah{--fa:"\f6e6"}.fa-feather{--fa:"\f52d"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-comment-slash{--fa:"\f4b3"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-compress{--fa:"\f066"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-ankh{--fa:"\f644"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-asterisk{--fa:"\2a"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-peseta-sign{--fa:"\e221"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-ghost{--fa:"\f6e2"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-cart-plus{--fa:"\f217"}.fa-gamepad{--fa:"\f11b"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-egg{--fa:"\f7fb"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-campground{--fa:"\f6bb"}.fa-folder-plus{--fa:"\f65e"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-lock{--fa:"\f023"}.fa-gas-pump{--fa:"\f52f"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-house-flood-water{--fa:"\e50e"}.fa-tree{--fa:"\f1bb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-sack-dollar{--fa:"\f81d"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-car-side{--fa:"\f5e4"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-microscope{--fa:"\f610"}.fa-sink{--fa:"\e06d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-mitten{--fa:"\f7b5"}.fa-person-rays{--fa:"\e54d"}.fa-users{--fa:"\f0c0"}.fa-eye-slash{--fa:"\f070"}.fa-flask-vial{--fa:"\e4f3"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-om{--fa:"\f679"}.fa-worm{--fa:"\e599"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-plug{--fa:"\f1e6"}.fa-chevron-up{--fa:"\f077"}.fa-hand-spock{--fa:"\f259"}.fa-stopwatch{--fa:"\f2f2"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-chess-bishop{--fa:"\f43a"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-road-circle-check{--fa:"\e564"}.fa-dice-five{--fa:"\f523"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-land-mine-on{--fa:"\e51b"}.fa-i-cursor{--fa:"\f246"}.fa-stamp{--fa:"\f5bf"}.fa-stairs{--fa:"\e289"}.fa-i{--fa:"\49"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-pills{--fa:"\f484"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-tooth{--fa:"\f5c9"}.fa-v{--fa:"\56"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bicycle{--fa:"\f206"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-snowman{--fa:"\f7d0"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-road-barrier{--fa:"\e562"}.fa-school{--fa:"\f549"}.fa-igloo{--fa:"\f7ae"}.fa-joint{--fa:"\f595"}.fa-angle-right{--fa:"\f105"}.fa-horse{--fa:"\f6f0"}.fa-q{--fa:"\51"}.fa-g{--fa:"\47"}.fa-notes-medical{--fa:"\f481"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-dong-sign{--fa:"\e169"}.fa-capsules{--fa:"\f46b"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-hand-point-up{--fa:"\f0a6"}.fa-money-bill{--fa:"\f0d6"}.fa-bookmark{--fa:"\f02e"}.fa-align-justify{--fa:"\f039"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-helmet-un{--fa:"\e503"}.fa-bullseye{--fa:"\f140"}.fa-bacon{--fa:"\f7e5"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-radiation{--fa:"\f7b9"}.fa-chart-simple{--fa:"\e473"}.fa-mars-stroke{--fa:"\f229"}.fa-vial{--fa:"\f492"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-e{--fa:"\45"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-user{--fa:"\f007"}.fa-school-circle-check{--fa:"\e56b"}.fa-dumpster{--fa:"\f793"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-building-user{--fa:"\e4da"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-highlighter{--fa:"\f591"}.fa-key{--fa:"\f084"}.fa-bullhorn{--fa:"\f0a1"}.fa-globe{--fa:"\f0ac"}.fa-synagogue{--fa:"\f69b"}.fa-person-half-dress{--fa:"\e548"}.fa-road-bridge{--fa:"\e563"}.fa-location-arrow{--fa:"\f124"}.fa-c{--fa:"\43"}.fa-tablet-button{--fa:"\f10a"}.fa-building-lock{--fa:"\e4d6"}.fa-pizza-slice{--fa:"\f818"}.fa-money-bill-wave{--fa:"\f53a"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-house-flag{--fa:"\e50d"}.fa-person-circle-minus{--fa:"\e540"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-camera-rotate{--fa:"\e0d8"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-star{--fa:"\f005"}.fa-repeat{--fa:"\f363"}.fa-cross{--fa:"\f654"}.fa-box{--fa:"\f466"}.fa-venus-mars{--fa:"\f228"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-charging-station{--fa:"\f5e7"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-mobile-retro{--fa:"\e527"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-spider{--fa:"\f717"}.fa-hands-bound{--fa:"\e4f9"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-x-ray{--fa:"\f497"}.fa-spell-check{--fa:"\f891"}.fa-slash{--fa:"\f715"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-server{--fa:"\f233"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-shop-lock{--fa:"\e4a5"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-blender-phone{--fa:"\f6b6"}.fa-building-wheat{--fa:"\e4db"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-venus{--fa:"\f221"}.fa-passport{--fa:"\f5ab"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-temperature-high{--fa:"\f769"}.fa-microchip{--fa:"\f2db"}.fa-crown{--fa:"\f521"}.fa-weight-hanging{--fa:"\f5cd"}.fa-xmarks-lines{--fa:"\e59a"}.fa-file-prescription{--fa:"\f572"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-chess-knight{--fa:"\f441"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-wheelchair{--fa:"\f193"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-toggle-on{--fa:"\f205"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-l{--fa:"\4c"}.fa-fire{--fa:"\f06d"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-folder-open{--fa:"\f07c"}.fa-heart-circle-plus{--fa:"\e500"}.fa-code-fork{--fa:"\e13b"}.fa-city{--fa:"\f64f"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-pepper-hot{--fa:"\f816"}.fa-unlock{--fa:"\f09c"}.fa-colon-sign{--fa:"\e140"}.fa-headset{--fa:"\f590"}.fa-store-slash{--fa:"\e071"}.fa-road-circle-xmark{--fa:"\e566"}.fa-user-minus{--fa:"\f503"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-clipboard{--fa:"\f328"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-underline{--fa:"\f0cd"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-signature{--fa:"\f5b7"}.fa-stroopwafel{--fa:"\f551"}.fa-bold{--fa:"\f032"}.fa-anchor-lock{--fa:"\e4ad"}.fa-building-ngo{--fa:"\e4d7"}.fa-manat-sign{--fa:"\e1d5"}.fa-not-equal{--fa:"\f53e"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-jedi{--fa:"\f669"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-mug-hot{--fa:"\f7b6"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-gift{--fa:"\f06b"}.fa-dice-two{--fa:"\f528"}.fa-chess-queen{--fa:"\f445"}.fa-glasses{--fa:"\f530"}.fa-chess-board{--fa:"\f43c"}.fa-building-circle-check{--fa:"\e4d2"}.fa-person-chalkboard{--fa:"\e53d"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-less-than-equal{--fa:"\f537"}.fa-train{--fa:"\f238"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-crow{--fa:"\f520"}.fa-sailboat{--fa:"\e445"}.fa-window-restore{--fa:"\f2d2"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-torii-gate{--fa:"\f6a1"}.fa-frog{--fa:"\f52e"}.fa-bucket{--fa:"\e4cf"}.fa-image{--fa:"\f03e"}.fa-microphone{--fa:"\f130"}.fa-cow{--fa:"\f6c8"}.fa-caret-up{--fa:"\f0d8"}.fa-screwdriver{--fa:"\f54a"}.fa-folder-closed{--fa:"\e185"}.fa-house-tsunami{--fa:"\e515"}.fa-square-nfi{--fa:"\e576"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-square-binary{--fa:"\e69b"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-lemon{--fa:"\f094"}.fa-head-side-mask{--fa:"\e063"}.fa-handshake{--fa:"\f2b5"}.fa-gem{--fa:"\f3a5"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-smoking{--fa:"\f48d"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-monument{--fa:"\f5a6"}.fa-snowplow{--fa:"\f7d2"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-cannabis{--fa:"\f55f"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-tablets{--fa:"\f490"}.fa-ethernet{--fa:"\f796"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-chair{--fa:"\f6c0"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-plate-wheat{--fa:"\e55a"}.fa-icicles{--fa:"\f7ad"}.fa-person-shelter{--fa:"\e54f"}.fa-neuter{--fa:"\f22c"}.fa-id-badge{--fa:"\f2c1"}.fa-marker{--fa:"\f5a1"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-helicopter-symbol{--fa:"\e502"}.fa-universal-access{--fa:"\f29a"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-lari-sign{--fa:"\e1c8"}.fa-volcano{--fa:"\f770"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-viruses{--fa:"\e076"}.fa-square-person-confined{--fa:"\e577"}.fa-user-tie{--fa:"\f508"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-certificate{--fa:"\f0a3"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-suitcase{--fa:"\f0f2"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-camera-retro{--fa:"\f083"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-box-open{--fa:"\f49e"}.fa-scroll{--fa:"\f70e"}.fa-spa{--fa:"\f5bb"}.fa-location-pin-lock{--fa:"\e51f"}.fa-pause{--fa:"\f04c"}.fa-hill-avalanche{--fa:"\e507"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-bomb{--fa:"\f1e2"}.fa-registered{--fa:"\f25d"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-subscript{--fa:"\f12c"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-burst{--fa:"\e4dc"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-money-bills{--fa:"\e1f3"}.fa-smog{--fa:"\f75f"}.fa-crutch{--fa:"\f7f7"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-palette{--fa:"\f53f"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-vest{--fa:"\e085"}.fa-ferry{--fa:"\e4ea"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-boxes-packing{--fa:"\e4c7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-bowl-food{--fa:"\e4c6"}.fa-candy-cane{--fa:"\f786"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-file-word{--fa:"\f1c2"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-house-lock{--fa:"\e510"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-children{--fa:"\e4e1"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-user-alt-slash,.fa-user-large-slash{--fa:"\f4fa"}.fa-envelope-open{--fa:"\f2b6"}.fa-handshake-alt-slash,.fa-handshake-simple-slash{--fa:"\e05f"}.fa-mattress-pillow{--fa:"\e525"}.fa-guarani-sign{--fa:"\e19a"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-fire-extinguisher{--fa:"\f134"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-greater-than-equal{--fa:"\f532"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-virus{--fa:"\e074"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-layer-group{--fa:"\f5fd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-archway{--fa:"\f557"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-square{--fa:"\f0c8"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-couch{--fa:"\f4b8"}.fa-cedi-sign{--fa:"\e0df"}.fa-italic{--fa:"\f033"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-church{--fa:"\f51d"}.fa-comments-dollar{--fa:"\f653"}.fa-democrat{--fa:"\f747"}.fa-z{--fa:"\5a"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-road-lock{--fa:"\e567"}.fa-a{--fa:"\41"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-p{--fa:"\50"}.fa-snowflake{--fa:"\f2dc"}.fa-newspaper{--fa:"\f1ea"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-locust{--fa:"\e520"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-person-dress-burst{--fa:"\e544"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-vector-square{--fa:"\f5cb"}.fa-bread-slice{--fa:"\f7ec"}.fa-language{--fa:"\f1ab"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-filter{--fa:"\f0b0"}.fa-question{--fa:"\3f"}.fa-file-signature{--fa:"\f573"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-house-chimney-user{--fa:"\e065"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-puzzle-piece{--fa:"\f12e"}.fa-money-check{--fa:"\f53c"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-code{--fa:"\f121"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-virus-covid{--fa:"\e4a8"}.fa-austral-sign{--fa:"\e0a9"}.fa-f{--fa:"\46"}.fa-leaf{--fa:"\f06c"}.fa-road{--fa:"\f018"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-person-circle-plus{--fa:"\e541"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-sack-xmark{--fa:"\e56a"}.fa-file-excel{--fa:"\f1c3"}.fa-file-contract{--fa:"\f56c"}.fa-fish-fins{--fa:"\e4f2"}.fa-building-flag{--fa:"\e4d5"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-object-ungroup{--fa:"\f248"}.fa-poop{--fa:"\f619"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-kaaba{--fa:"\f66b"}.fa-toilet-paper{--fa:"\f71e"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-eject{--fa:"\f052"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-plane-circle-check{--fa:"\e555"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-object-group{--fa:"\f247"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-mask-ventilator{--fa:"\e524"}.fa-arrow-right{--fa:"\f061"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-cash-register{--fa:"\f788"}.fa-person-circle-question{--fa:"\e542"}.fa-h{--fa:"\48"}.fa-tarp{--fa:"\e57b"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-heart{--fa:"\f004"}.fa-mars-and-venus{--fa:"\f224"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-dumpster-fire{--fa:"\f794"}.fa-house-crack{--fa:"\e3b1"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-bottle-water{--fa:"\e4c5"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-kitchen-set{--fa:"\e51a"}.fa-r{--fa:"\52"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-cube{--fa:"\f1b2"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-shield-dog{--fa:"\e573"}.fa-solar-panel{--fa:"\f5ba"}.fa-lock-open{--fa:"\f3c1"}.fa-elevator{--fa:"\e16d"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-circle{--fa:"\f111"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-recycle{--fa:"\f1b8"}.fa-user-astronaut{--fa:"\f4fb"}.fa-plane-slash{--fa:"\e069"}.fa-trademark{--fa:"\f25c"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-satellite-dish{--fa:"\f7c0"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-users-rays{--fa:"\e593"}.fa-wallet{--fa:"\f555"}.fa-clipboard-check{--fa:"\f46c"}.fa-file-audio{--fa:"\f1c7"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-wrench{--fa:"\f0ad"}.fa-bugs{--fa:"\e4d0"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-file-image{--fa:"\f1c5"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-plane-departure{--fa:"\f5b0"}.fa-handshake-slash{--fa:"\e060"}.fa-book-bookmark{--fa:"\e0bb"}.fa-code-branch{--fa:"\f126"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-bridge{--fa:"\e4c8"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-truck-front{--fa:"\e2b7"}.fa-cat{--fa:"\f6be"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-truck-field{--fa:"\e58d"}.fa-route{--fa:"\f4d7"}.fa-clipboard-question{--fa:"\e4e3"}.fa-panorama{--fa:"\e209"}.fa-comment-medical{--fa:"\f7f5"}.fa-teeth-open{--fa:"\f62f"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-tags{--fa:"\f02c"}.fa-wine-glass{--fa:"\f4e3"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-house-signal{--fa:"\e012"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-faucet-drip{--fa:"\e006"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-terminal{--fa:"\f120"}.fa-mobile-button{--fa:"\f10b"}.fa-house-medical-flag{--fa:"\e514"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-tape{--fa:"\f4db"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-eye{--fa:"\f06e"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-audio-description{--fa:"\f29e"}.fa-person-military-to-person{--fa:"\e54c"}.fa-file-shield{--fa:"\e4f0"}.fa-user-slash{--fa:"\f506"}.fa-pen{--fa:"\f304"}.fa-tower-observation{--fa:"\e586"}.fa-file-code{--fa:"\f1c9"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-bus{--fa:"\f207"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-window-maximize{--fa:"\f2d0"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-prescription{--fa:"\f5b1"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-vihara{--fa:"\f6a7"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-plant-wilt{--fa:"\e5aa"}.fa-diamond{--fa:"\f219"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-chart-diagram{--fa:"\e695"}.fa-bacterium{--fa:"\e05a"}.fa-hand-pointer{--fa:"\f25a"}.fa-drum-steelpan{--fa:"\f56a"}.fa-hand-scissors{--fa:"\f257"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-biohazard{--fa:"\f780"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-mars-double{--fa:"\f227"}.fa-child-dress{--fa:"\e59c"}.fa-users-between-lines{--fa:"\e591"}.fa-lungs-virus{--fa:"\e067"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-phone{--fa:"\f095"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-child-reaching{--fa:"\e59d"}.fa-head-side-virus{--fa:"\e064"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-door-closed{--fa:"\f52a"}.fa-shield-virus{--fa:"\e06c"}.fa-dice-six{--fa:"\f526"}.fa-mosquito-net{--fa:"\e52c"}.fa-file-fragment{--fa:"\e697"}.fa-bridge-water{--fa:"\e4ce"}.fa-person-booth{--fa:"\f756"}.fa-text-width{--fa:"\f035"}.fa-hat-wizard{--fa:"\f6e8"}.fa-pen-fancy{--fa:"\f5ac"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-trash{--fa:"\f1f8"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-book-medical{--fa:"\f7e6"}.fa-poo{--fa:"\f2fe"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-cubes{--fa:"\f1b3"}.fa-divide{--fa:"\f529"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-headphones{--fa:"\f025"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-clapping{--fa:"\e1a8"}.fa-republican{--fa:"\f75e"}.fa-arrow-left{--fa:"\f060"}.fa-person-circle-xmark{--fa:"\e543"}.fa-ruler{--fa:"\f545"}.fa-align-left{--fa:"\f036"}.fa-dice-d6{--fa:"\f6d1"}.fa-restroom{--fa:"\f7bd"}.fa-j{--fa:"\4a"}.fa-users-viewfinder{--fa:"\e595"}.fa-file-video{--fa:"\f1c8"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-file-pdf{--fa:"\f1c1"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-o{--fa:"\4f"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-user-secret{--fa:"\f21b"}.fa-otter{--fa:"\f700"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-comment-dollar{--fa:"\f651"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-clipboard-user{--fa:"\f7f3"}.fa-child{--fa:"\f1ae"}.fa-lira-sign{--fa:"\f195"}.fa-satellite{--fa:"\f7bf"}.fa-plane-lock{--fa:"\e558"}.fa-tag{--fa:"\f02b"}.fa-comment{--fa:"\f075"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-envelope{--fa:"\f0e0"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-paperclip{--fa:"\f0c6"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-ribbon{--fa:"\f4d6"}.fa-lungs{--fa:"\f604"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-border-none{--fa:"\f850"}.fa-circle-nodes{--fa:"\e4e2"}.fa-parachute-box{--fa:"\f4cd"}.fa-indent{--fa:"\f03c"}.fa-truck-field-un{--fa:"\e58e"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-mountain{--fa:"\f6fc"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-cloud-meatball{--fa:"\f73b"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-square-virus{--fa:"\e578"}.fa-meteor{--fa:"\f753"}.fa-car-on{--fa:"\e4dd"}.fa-sleigh{--fa:"\f7cc"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-water{--fa:"\f773"}.fa-calendar-check{--fa:"\f274"}.fa-braille{--fa:"\f2a1"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-landmark{--fa:"\f66f"}.fa-truck{--fa:"\f0d1"}.fa-crosshairs{--fa:"\f05b"}.fa-person-cane{--fa:"\e53c"}.fa-tent{--fa:"\e57d"}.fa-vest-patches{--fa:"\e086"}.fa-check-double{--fa:"\f560"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-cookie{--fa:"\f563"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-dumbbell{--fa:"\f44b"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-tarp-droplet{--fa:"\e57c"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-calendar-plus{--fa:"\f271"}.fa-plane-arrival{--fa:"\f5af"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-chart-gantt{--fa:"\e0e4"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-dna{--fa:"\f471"}.fa-virus-slash{--fa:"\e075"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-chess{--fa:"\f439"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-plug-circle-check{--fa:"\e55c"}.fa-street-view{--fa:"\f21d"}.fa-franc-sign{--fa:"\e18f"}.fa-volume-off{--fa:"\f026"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-mosque{--fa:"\f678"}.fa-mosquito{--fa:"\e52b"}.fa-star-of-david{--fa:"\f69a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-vials{--fa:"\f493"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-place-of-worship{--fa:"\f67f"}.fa-grip-vertical{--fa:"\f58e"}.fa-hexagon-nodes{--fa:"\e699"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-u{--fa:"\55"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-pallet{--fa:"\f482"}.fa-faucet{--fa:"\e005"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-s{--fa:"\53"}.fa-timeline{--fa:"\e29c"}.fa-keyboard{--fa:"\f11c"}.fa-caret-down{--fa:"\f0d7"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-plane-up{--fa:"\e22d"}.fa-piggy-bank{--fa:"\f4d3"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-mountain-city{--fa:"\e52e"}.fa-coins{--fa:"\f51e"}.fa-khanda{--fa:"\f66d"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-folder-tree{--fa:"\f802"}.fa-network-wired{--fa:"\f6ff"}.fa-map-pin{--fa:"\f276"}.fa-hamsa{--fa:"\f665"}.fa-cent-sign{--fa:"\e3f5"}.fa-flask{--fa:"\f0c3"}.fa-person-pregnant{--fa:"\e31e"}.fa-wand-sparkles{--fa:"\f72b"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-ticket{--fa:"\f145"}.fa-power-off{--fa:"\f011"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-flag-usa{--fa:"\f74d"}.fa-laptop-file{--fa:"\e51d"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-diagram-next{--fa:"\e476"}.fa-person-rifle{--fa:"\e54e"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-closed-captioning{--fa:"\f20a"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-venus-double{--fa:"\f226"}.fa-images{--fa:"\f302"}.fa-calculator{--fa:"\f1ec"}.fa-people-pulling{--fa:"\e535"}.fa-n{--fa:"\4e"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-cloud-rain{--fa:"\f73d"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-ship{--fa:"\f21a"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-download{--fa:"\f019"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-file-circle-check{--fa:"\e5a0"}.fa-forward{--fa:"\f04e"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-align-center{--fa:"\f037"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-calendar-week{--fa:"\f784"}.fa-laptop-medical{--fa:"\f812"}.fa-b{--fa:"\42"}.fa-file-medical{--fa:"\f477"}.fa-dice-one{--fa:"\f525"}.fa-kiwi-bird{--fa:"\f535"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-mill-sign{--fa:"\e1ed"}.fa-bowl-rice{--fa:"\e2eb"}.fa-skull{--fa:"\f54c"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-truck-pickup{--fa:"\f63c"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-stop{--fa:"\f04d"}.fa-code-merge{--fa:"\f387"}.fa-upload{--fa:"\f093"}.fa-hurricane{--fa:"\f751"}.fa-mound{--fa:"\e52d"}.fa-toilet-portable{--fa:"\e583"}.fa-compact-disc{--fa:"\f51f"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-caravan{--fa:"\f8ff"}.fa-shield-cat{--fa:"\e572"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-glass-water{--fa:"\e4f4"}.fa-oil-well{--fa:"\e532"}.fa-vault{--fa:"\e2c5"}.fa-mars{--fa:"\f222"}.fa-toilet{--fa:"\f7d8"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-sun{--fa:"\f185"}.fa-guitar{--fa:"\f7a6"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-horse-head{--fa:"\f7ab"}.fa-bore-hole{--fa:"\e4c3"}.fa-industry{--fa:"\f275"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-florin-sign{--fa:"\e184"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-less-than{--fa:"\3c"}.fa-angle-down{--fa:"\f107"}.fa-car-tunnel{--fa:"\e4de"}.fa-head-side-cough{--fa:"\e061"}.fa-grip-lines{--fa:"\f7a4"}.fa-thumbs-down{--fa:"\f165"}.fa-user-lock{--fa:"\f502"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-chess-pawn{--fa:"\f443"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-person-through-window{--fa:"\e5a9"}.fa-toolbox{--fa:"\f552"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-bug{--fa:"\f188"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-mountain-sun{--fa:"\e52f"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-dice-d20{--fa:"\f6cf"}.fa-truck-droplet{--fa:"\e58c"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-medal{--fa:"\f5a2"}.fa-bed{--fa:"\f236"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-podcast{--fa:"\f2ce"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-bell{--fa:"\f0f3"}.fa-superscript{--fa:"\f12b"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-star-of-life{--fa:"\f621"}.fa-phone-slash{--fa:"\f3dd"}.fa-paint-roller{--fa:"\f5aa"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-file{--fa:"\f15b"}.fa-greater-than{--fa:"\3e"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-arrow-down{--fa:"\f063"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-eraser{--fa:"\f12d"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-person-burst{--fa:"\e53b"}.fa-dove{--fa:"\f4ba"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-socks{--fa:"\f696"}.fa-inbox{--fa:"\f01c"}.fa-section{--fa:"\e447"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-envelope-open-text{--fa:"\f658"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-wine-bottle{--fa:"\f72f"}.fa-chess-rook{--fa:"\f447"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-dharmachakra{--fa:"\f655"}.fa-hotdog{--fa:"\f80f"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-drum{--fa:"\f569"}.fa-ice-cream{--fa:"\f810"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-fax{--fa:"\f1ac"}.fa-paragraph{--fa:"\f1dd"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-star-half{--fa:"\f089"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-tree-city{--fa:"\e587"}.fa-play{--fa:"\f04b"}.fa-font{--fa:"\f031"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-rupiah-sign{--fa:"\e23d"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-naira-sign{--fa:"\e1f6"}.fa-cart-arrow-down{--fa:"\f218"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-receipt{--fa:"\f543"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-chevron-down{--fa:"\f078"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-skull-crossbones{--fa:"\f714"}.fa-code-compare{--fa:"\e13a"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-school-lock{--fa:"\e56f"}.fa-tower-cell{--fa:"\e585"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-ranking-star{--fa:"\e561"}.fa-chess-king{--fa:"\f43f"}.fa-person-harassing{--fa:"\e549"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-arrow-up{--fa:"\f062"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-shrimp{--fa:"\e448"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-jug-detergent{--fa:"\e519"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-user-shield{--fa:"\f505"}.fa-wind{--fa:"\f72e"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-y{--fa:"\59"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-fish{--fa:"\f578"}.fa-user-graduate{--fa:"\f501"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-clapperboard{--fa:"\e131"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-jet-fighter-up{--fa:"\e518"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-copy{--fa:"\f0c5"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-hand-sparkles{--fa:"\e05d"}.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-gun{--fa:"\e19b"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-add,.fa-plus{--fa:"\2b"}.fa-expand{--fa:"\f065"}.fa-computer{--fa:"\e4e5"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-peso-sign{--fa:"\e222"}.fa-building-shield{--fa:"\e4d8"}.fa-baby{--fa:"\f77c"}.fa-users-line{--fa:"\e592"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-tractor{--fa:"\f722"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-lines-leaning{--fa:"\e51e"}.fa-ruler-combined{--fa:"\f546"}.fa-copyright{--fa:"\f1f9"}.fa-equals{--fa:"\3d"}.fa-blender{--fa:"\f517"}.fa-teeth{--fa:"\f62e"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-map{--fa:"\f279"}.fa-rocket{--fa:"\f135"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-folder-minus{--fa:"\f65d"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-store{--fa:"\f54e"}.fa-arrow-trend-up{--fa:"\e098"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-bezier-curve{--fa:"\f55b"}.fa-bell-slash{--fa:"\f1f6"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-school-flag{--fa:"\e56e"}.fa-fill{--fa:"\f575"}.fa-angle-up{--fa:"\f106"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-holly-berry{--fa:"\f7aa"}.fa-chevron-left{--fa:"\f053"}.fa-bacteria{--fa:"\e059"}.fa-hand-lizard{--fa:"\f258"}.fa-notdef{--fa:"\e1fe"}.fa-disease{--fa:"\f7fa"}.fa-briefcase-medical{--fa:"\f469"}.fa-genderless{--fa:"\f22d"}.fa-chevron-right{--fa:"\f054"}.fa-retweet{--fa:"\f079"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-pump-soap{--fa:"\e06b"}.fa-video-slash{--fa:"\f4e2"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-radio{--fa:"\f8d7"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-traffic-light{--fa:"\f637"}.fa-thermometer{--fa:"\f491"}.fa-vr-cardboard{--fa:"\f729"}.fa-hand-middle-finger{--fa:"\f806"}.fa-percent,.fa-percentage{--fa:"\25"}.fa-truck-moving{--fa:"\f4df"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-display{--fa:"\e163"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-trophy{--fa:"\f091"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hammer{--fa:"\f6e3"}.fa-hand-peace{--fa:"\f25b"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-spinner{--fa:"\f110"}.fa-robot{--fa:"\f544"}.fa-peace{--fa:"\f67c"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-warehouse{--fa:"\f494"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-splotch{--fa:"\f5bc"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-dice-four{--fa:"\f524"}.fa-sim-card{--fa:"\f7c4"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-mercury{--fa:"\f223"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-person-falling-burst{--fa:"\e547"}.fa-award{--fa:"\f559"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-building{--fa:"\f1ad"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-qrcode{--fa:"\f029"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-comment-nodes{--fa:"\e696"}.fa-house-medical{--fa:"\e3b2"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-house-chimney-window{--fa:"\e00d"}.fa-pen-nib{--fa:"\f5ad"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tents{--fa:"\e582"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-dog{--fa:"\f6d3"}.fa-carrot{--fa:"\f787"}.fa-moon{--fa:"\f186"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-cheese{--fa:"\f7ef"}.fa-yin-yang{--fa:"\f6ad"}.fa-music{--fa:"\f001"}.fa-code-commit{--fa:"\f386"}.fa-temperature-low{--fa:"\f76b"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-broom{--fa:"\f51a"}.fa-shield-heart{--fa:"\e574"}.fa-gopuram{--fa:"\f664"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-hashtag{--fa:"\23"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-oil-can{--fa:"\f613"}.fa-t{--fa:"\54"}.fa-hippo{--fa:"\f6ed"}.fa-chart-column{--fa:"\e0e3"}.fa-infinity{--fa:"\f534"}.fa-vial-circle-check{--fa:"\e596"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-voicemail{--fa:"\f897"}.fa-fan{--fa:"\f863"}.fa-person-walking-luggage{--fa:"\e554"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-calendar{--fa:"\f133"}.fa-trailer{--fa:"\e041"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-sd-card{--fa:"\f7c2"}.fa-dragon{--fa:"\f6d5"}.fa-shoe-prints{--fa:"\f54b"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-hand-holding{--fa:"\f4bd"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-clone{--fa:"\f24d"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-tornado{--fa:"\f76f"}.fa-file-circle-plus{--fa:"\e494"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-anchor{--fa:"\f13d"}.fa-border-all{--fa:"\f84c"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-cookie-bite{--fa:"\f564"}.fa-arrow-trend-down{--fa:"\e097"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-draw-polygon{--fa:"\f5ee"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-shower{--fa:"\f2cc"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-m{--fa:"\4d"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-book{--fa:"\f02d"}.fa-user-plus{--fa:"\f234"}.fa-check{--fa:"\f00c"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-house-circle-check{--fa:"\e509"}.fa-angle-left{--fa:"\f104"}.fa-diagram-successor{--fa:"\e47a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-cloud-moon{--fa:"\f6c3"}.fa-briefcase{--fa:"\f0b1"}.fa-person-falling{--fa:"\e546"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-user-tag{--fa:"\f507"}.fa-rug{--fa:"\e569"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-baht-sign{--fa:"\e0ac"}.fa-book-open{--fa:"\f518"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-handcuffs{--fa:"\e4f8"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-database{--fa:"\f1c0"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-mask-face{--fa:"\e1d7"}.fa-hill-rockslide{--fa:"\e508"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-paper-plane{--fa:"\f1d8"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-dungeon{--fa:"\f6d9"}.fa-align-right{--fa:"\f038"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-life-ring{--fa:"\f1cd"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-calendar-day{--fa:"\f783"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-dice{--fa:"\f522"}.fa-bowling-ball{--fa:"\f436"}.fa-brain{--fa:"\f5dc"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-calendar-minus{--fa:"\f272"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-gifts{--fa:"\f79c"}.fa-hotel{--fa:"\f594"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-thumbs-up{--fa:"\f164"}.fa-user-clock{--fa:"\f4fd"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-file-invoice{--fa:"\f570"}.fa-window-minimize{--fa:"\f2d1"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-brush{--fa:"\f55d"}.fa-file-half-dashed{--fa:"\e698"}.fa-mask{--fa:"\f6fa"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-ruler-vertical{--fa:"\f548"}.fa-user-alt,.fa-user-large{--fa:"\f406"}.fa-train-tram{--fa:"\e5b4"}.fa-user-nurse{--fa:"\f82f"}.fa-syringe{--fa:"\f48e"}.fa-cloud-sun{--fa:"\f6c4"}.fa-stopwatch-20{--fa:"\e06f"}.fa-square-full{--fa:"\f45c"}.fa-magnet{--fa:"\f076"}.fa-jar{--fa:"\e516"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-bug-slash{--fa:"\e490"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-bone{--fa:"\f5d7"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-user-injured{--fa:"\f728"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-plane{--fa:"\f072"}.fa-tent-arrows-down{--fa:"\e581"}.fa-exclamation{--fa:"\21"}.fa-arrows-spin{--fa:"\e4bb"}.fa-print{--fa:"\f02f"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\24"}.fa-x{--fa:"\58"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-person-military-pointing{--fa:"\e54a"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-umbrella{--fa:"\f0e9"}.fa-trowel{--fa:"\e589"}.fa-d{--fa:"\44"}.fa-stapler{--fa:"\e5af"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-kip-sign{--fa:"\e1c4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-handshake-alt,.fa-handshake-simple{--fa:"\f4c6"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-barcode{--fa:"\f02a"}.fa-plus-minus{--fa:"\e43c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-person-circle-check{--fa:"\e53e"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}
-.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
\ No newline at end of file
diff --git a/server/static/fontawesome/css/solid.css b/server/static/fontawesome/css/solid.css
deleted file mode 100644
index 6742be3..0000000
--- a/server/static/fontawesome/css/solid.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:root, :host {
-  --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-.fas,
-.fa-solid {
-  font-weight: 900; }
diff --git a/server/static/fontawesome/webfonts/fa-solid-900.ttf b/server/static/fontawesome/webfonts/fa-solid-900.ttf
deleted file mode 100644
index 1c10972..0000000
Binary files a/server/static/fontawesome/webfonts/fa-solid-900.ttf and /dev/null differ
diff --git a/server/static/fontawesome/webfonts/fa-solid-900.woff2 b/server/static/fontawesome/webfonts/fa-solid-900.woff2
deleted file mode 100644
index 1672102..0000000
Binary files a/server/static/fontawesome/webfonts/fa-solid-900.woff2 and /dev/null differ
diff --git a/server/static/order.js b/server/static/order.js
index b7e7c73..a655658 100644
--- a/server/static/order.js
+++ b/server/static/order.js
@@ -1,55 +1,74 @@
-function addCake(id, name, price, amount) {
-  const cake = document.querySelector(`[name="cake[${id}]"]`);
-  if (cake != null) {
-    cake.value = Number(cake.value) + 1;
-    let tr = cake.parentElement.parentElement.parentElement;
-    console.log(tr);
-    tr.querySelector(".cake-total").innerText =
-      `${price * Number(cake.value)}PLN`;
-    updateTotalPrice();
-    return;
-  }
-  let template = document.getElementById("basket_element_template");
-  let tr = template.content.querySelector("tr").cloneNode(true);
-  tr.querySelector(".cake-name").innerText = name;
-  tr.querySelector(".cake-price").innerText = `${price}PLN`;
-  tr.querySelector(".cake-total").innerText = `${price * amount}PLN`;
-  tr.querySelector("button").onclick = () => {
-    tr.remove();
-  };
-  let input = tr.querySelector("input");
-  input.onchange = () => {
-    if (input.value == 0) {
-      tr.remove();
+function changeCake(id, name, price, delta) {
+  var input = document.querySelector('[name="cake[' + id + ']"]');
+  if (input != null) {
+    var qty = Number(input.value) + delta;
+    if (qty <= 0) {
+      var item = input.closest('.summary-item');
+      if (item) item.remove();
+      updateTotals();
+      updateCatalogueQty(id, 0);
+      return;
     }
-    tr.querySelector(".cake-total").innerText = `${price * input.value}PLN`;
-    updateTotalPrice();
-  };
-  input.value = amount;
-  input.name = `cake[${id}]`;
-  document.querySelector("#basket_table").appendChild(tr);
-  updateTotalPrice();
-}
-function updateTotalPrice() {
-  document.querySelector("#total-price").innerText = `${totalPrice()}PLN`;
-}
-function totalPrice() {
-  let out = 0;
-  const cakes = document.querySelectorAll("#basket_table>tr");
-  cakes.forEach((e) => {
-    let priceString = e.querySelector(".cake-price").innerText;
-    let price = Number(priceString.substring(0, priceString.length - 3));
-    let amount = Number(e.querySelector("input").value);
-    out += price * amount;
-    console.log(out);
-  });
-  return out;
-}
-function toggleDetails(row) {
-  const detailsRow = row.nextElementSibling;
-  if (detailsRow.classList.contains("hidden")) {
-    detailsRow.classList.remove("hidden");
+    input.value = qty;
+    var item = input.closest('.summary-item');
+    item.querySelector('.cake-qty').innerText = qty;
+    item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
+    updateTotals();
+    updateCatalogueQty(id, qty);
     return;
   }
-  detailsRow.classList.add("hidden");
+  if (delta <= 0) return;
+  var item = document.createElement('div');
+  item.className = 'summary-item';
+  item.setAttribute('data-cake-id', id);
+  item.innerHTML =
+    '<div class="summary-item-info">' +
+      '<div class="summary-item-name cake-name">' + name + '</div>' +
+      '<div class="summary-item-detail cake-price">' + price + ' PLN × <span class="cake-qty">1</span></div>' +
+    '</div>' +
+    '<div class="summary-item-price cake-total">' + price + ' PLN</div>' +
+    '<button type="button" class="summary-item-remove" onclick="removeCake(this)">' +
+      '<span class="material-symbols-outlined">close</span>' +
+    '</button>' +
+    '<input type="hidden" name="cake[' + id + ']" value="1">';
+  document.getElementById('basket_items').appendChild(item);
+  updateTotals();
+  updateCatalogueQty(id, 1);
+}
+
+function removeCake(btn) {
+  var item = btn.closest('.summary-item');
+  var id = item.getAttribute('data-cake-id');
+  item.remove();
+  updateTotals();
+  updateCatalogueQty(id, 0);
+}
+
+function updateTotals() {
+  var subtotal = 0;
+  var items = document.querySelectorAll('#basket_items .summary-item');
+  items.forEach(function(item) {
+    var priceText = item.querySelector('.cake-price').innerText;
+    var price = Number(priceText.split(' ')[0]);
+    var qty = Number(item.querySelector('.cake-qty').innerText);
+    subtotal += price * qty;
+  });
+  var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
+  document.getElementById('subtotal-price').innerText = subtotal + ' PLN';
+  document.getElementById('paid-amount').innerText = paid + ' PLN';
+  document.getElementById('total-price').innerText = (subtotal - paid) + ' PLN';
+}
+
+function updateCatalogueQty(id, qty) {
+  var el = document.getElementById('qty-' + id);
+  if (el) el.innerText = qty;
+}
+
+function filterCatalogue(input) {
+  var query = input.value.toLowerCase();
+  var items = document.querySelectorAll('.catalogue-item');
+  items.forEach(function(item) {
+    var name = item.getAttribute('data-name').toLowerCase();
+    item.style.display = name.includes(query) ? '' : 'none';
+  });
 }
diff --git a/server/static/style.css b/server/static/style.css
index 87ef09f..b4dc6b7 100644
--- a/server/static/style.css
+++ b/server/static/style.css
@@ -1,566 +1,1073 @@
 :root {
     --surface: #fff8f0;
     --surface-container-low: #faf3e7;
-    --surface-container-highest: #eae2d2;
+    --surface-container: #f5ede0;
+    --surface-container-high: #ede3d4;
+    --surface-container-highest: #e5d9c8;
+    --surface-container-lowest: #ffffff;
+    --surface-bright: #fff8f0;
+    --surface-dim: #e5d9c8;
     --primary: #8c4d50;
-    --primary-container: #fcacaf;
     --primary-hover: #7a3f42;
-    --on-background: #363227;
+    --primary-container: #fcacaf;
+    --on-primary: #ffffff;
     --on-surface: #363227;
     --on-surface-variant: #645f52;
-    --outline-variant: #b9b1a3;
-    --secondary-container: #e0f5cb;
-    --on-secondary-container: #4c5e3e;
-    --nav-height: 4rem;
-    --border-radius: 48px;
-    --small-radius: 24px;
-    --small-border-radius: 8px;
-    --max-content-width: 80rem;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
-    --transition: 0.2s ease;
-    --transition-slow: 0.3s ease;
+    --outline: #b9b1a3;
+    --outline-variant: #d4cdbe;
+    --secondary: #b45309;
+    --secondary-container: #fd8a42;
+    --on-secondary-container: #682c00;
+    --error: #ba1a1a;
+    --error-container: #ffdad6;
+    --on-error-container: #93000a;
+    --success-bg: #dcfce7;
+    --success-text: #166534;
+    --warning-bg: #fef08a;
+    --warning-text: #854d0e;
+    --danger-bg: #fee2e2;
+    --danger-text: #991b1b;
+    --info-bg: #f1f5f9;
+    --info-text: #475569;
+    --sidebar-width: 280px;
+    --topnav-height: 56px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-full: 9999px;
+    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    --transition: 0.15s ease;
 }
 
-* {
+*, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
+
 body {
-    font-family: "Plus Jakarta Sans", sans-serif;
-    color: var(--on-background);
-    background-color: var(--surface);
+    font-family: var(--font-family);
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--on-surface);
+    background: var(--surface);
     display: flex;
-    width: 100%;
-    line-height: 1.6;
 }
 
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
+input, select, textarea, button {
+    font-family: inherit;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes slideDown {
-    from { opacity: 0; max-height: 0; }
-    to { opacity: 1; max-height: 500px; }
-}
-
-aside {
-    min-width: 5rem;
-    max-width: 5rem;
-    background-color: var(--surface-container-low);
-    height: 100vh;
+/* ========== SIDEBAR ========== */
+.sidebar {
     position: fixed;
     left: 0;
     top: 0;
-    box-shadow: var(--shadow-md);
-    z-index: 10;
-    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    background: var(--surface-container-lowest);
     border-right: 1px solid var(--outline-variant);
-    animation: fadeIn 0.3s ease;
-}
-
-nav {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    padding-top: 2rem;
-    gap: 0.5rem;
-    height: 100%;
+    padding: 16px;
+    z-index: 40;
 }
 
-nav > a {
-    color: var(--on-surface-variant);
-    text-decoration: none;
-    font-size: 1.3rem;
-    width: 3rem;
-    height: 3rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: var(--small-border-radius);
-    transition: all var(--transition);
-    position: relative;
+.sidebar-brand {
+    margin-bottom: 24px;
+    padding: 0 8px;
 }
 
-nav > a:hover {
-    background-color: var(--primary-container);
-    color: var(--primary);
-    transform: scale(1.1);
-}
-
-nav > a:active {
-    transform: scale(0.95);
-}
-
-nav > a:last-child {
-    margin-top: auto;
-    margin-bottom: 2rem;
-}
-
-nav > a > i {
-    text-decoration: none;
-    color: inherit;
-}
-
-nav > a::after {
-    content: attr(data-title);
-    position: absolute;
-    left: 120%;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: var(--on-background);
-    color: var(--surface);
-    padding: 0.4rem 0.8rem;
-    border-radius: var(--small-border-radius);
-    font-size: 0.8rem;
-    font-weight: 500;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: all var(--transition-slow);
-    z-index: 1;
-    box-shadow: var(--shadow-sm);
-}
-
-nav > a:hover::after {
-    opacity: 1;
-    left: 130%;
-}
-
-.app-body {
-    flex: 1;
-    margin-left: 5rem;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100dvh;
-    overflow-x: hidden;
-    animation: fadeInUp 0.35s ease;
-}
-
-header {
-    background-color: var(--surface);
-    border-bottom: 1px solid var(--outline-variant);
-    padding: 1rem 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: sticky;
-    top: 0;
-    z-index: 5;
-    transition: box-shadow var(--transition);
-}
-
-header h1 {
-    font-family: "Plus Jakarta Sans", sans-serif;
-    font-size: 1.5rem;
+.sidebar-brand h1 {
+    font-size: 20px;
     font-weight: 700;
-    color: var(--on-background);
-    letter-spacing: -0.02em;
+    color: var(--primary);
+    letter-spacing: -0.01em;
+    line-height: 1.3;
 }
 
-main {
-    flex: 1;
-    padding: 1.5rem 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    overflow-y: auto;
-    min-height: 0;
-    max-width: var(--max-content-width);
-    width: 100%;
-    margin: 0 auto;
-}
-
-.toolbar {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.search-container {
-    background-color: var(--surface);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-radius);
-    padding: 1rem 1.25rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    align-items: flex-end;
-    box-shadow: var(--shadow-sm);
-    transition: box-shadow var(--transition);
-}
-
-.search-container:hover {
-    box-shadow: var(--shadow-md);
-}
-
-.search-box {
-    flex: 1;
-    min-width: 200px;
-    position: relative;
-}
-
-.search-box input {
-    width: 100%;
-    padding: 0.5rem 1rem 0.5rem 2.5rem;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-border-radius);
-    font-size: 0.85rem;
-    font-family: inherit;
-    background-color: var(--surface);
-    color: var(--on-surface);
-    transition: all var(--transition);
-}
-
-.search-box input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12);
-}
-
-.search-box::before {
-    content: "\f002";
-    font-family: "Font Awesome 6 Free";
-    font-weight: 900;
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
+.sidebar-brand p {
+    font-size: 13px;
     color: var(--on-surface-variant);
-    font-size: 0.8rem;
-    pointer-events: none;
+    margin-top: 4px;
 }
 
-.search-container label:not(.search-box) {
+.sidebar-cta {
+    width: 100%;
+    height: 40px;
     display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--on-surface-variant);
-}
-
-.search-container input[type="date"] {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-border-radius);
-    min-width: 140px;
-    font-family: inherit;
-    font-size: 0.8rem;
-    background-color: var(--surface);
-    color: var(--on-surface);
-    transition: all var(--transition);
-}
-
-.search-container input[type="date"]:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12);
-}
-
-.btn-primary {
-    display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.55rem 1.3rem;
-    background-color: var(--primary);
-    color: #fff;
+    justify-content: center;
+    gap: 8px;
+    background: var(--primary);
+    color: var(--on-primary);
     border: none;
-    border-radius: var(--border-radius);
-    font-size: 0.85rem;
-    font-weight: 600;
-    font-family: inherit;
-    cursor: pointer;
-    text-decoration: none;
-    transition: all var(--transition);
-    white-space: nowrap;
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-hover);
-    color: #fff;
-    transform: scale(1.02);
-}
-
-.btn-primary:active {
-    transform: scale(0.97);
-}
-
-#results-table {
-    background-color: var(--surface);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-radius);
-    box-shadow: var(--shadow-sm);
-    overflow: hidden;
-    transition: box-shadow var(--transition);
-}
-
-#results-table:hover {
-    box-shadow: var(--shadow-md);
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    font-size: 0.85rem;
-}
-
-thead {
-    border-bottom: 2px solid var(--outline-variant);
-    background-color: var(--surface-container-low);
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-thead th {
-    color: var(--on-surface-variant);
-    font-weight: 600;
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 0.75rem 1rem;
-}
-
-tbody th {
-    font-weight: 400;
-    color: var(--on-surface);
-}
-
-th {
-    text-align: left;
-    padding: 0.75rem 1rem;
-}
-
-td {
-    padding: 0.75rem 1rem;
-}
-
-th:first-child,
-td:first-child {
-    padding-left: 1.25rem;
-}
-
-th:last-child,
-td:last-child {
-    padding-right: 1.25rem;
-}
-
-tr {
-    transition: background-color var(--transition);
-}
-
-tr.clickable {
-    cursor: pointer;
-}
-
-tr.clickable:hover {
-    background-color: var(--surface-container-low);
-}
-
-tr.active {
-    background-color: var(--primary-container);
-}
-
-tr:not(:last-child) {
-    border-bottom: 1px solid var(--outline-variant);
-}
-
-.status-badge {
-    display: inline-block;
-    padding: 0.15rem 0.55rem;
-    border-radius: 999px;
-    font-size: 0.7rem;
+    border-radius: var(--border-radius-md);
+    font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.02em;
-}
-
-.status-accepted {
-    background-color: #fff3e0;
-    color: #e65100;
-}
-
-.status-done {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-}
-
-.details-content {
-    background-color: var(--surface-container-low);
-    padding: 0 !important;
-}
-
-.details-content table {
-    margin: 0;
-    box-shadow: none;
-}
-
-.details-content th {
-    background-color: transparent;
-    font-weight: 500;
-}
-
-a {
-    text-decoration: none;
-    color: var(--on-surface-variant);
-    transition: color var(--transition);
-}
-
-a:hover {
-    color: var(--primary);
-}
-
-tr a {
-    text-decoration: none;
-    font-weight: 600;
-    color: var(--primary);
-}
-
-tr a:hover {
-    text-decoration: underline;
-}
-
-.order {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-    width: 100%;
-    align-content: start;
-}
-
-.order > div {
-    display: flex;
-    flex-direction: column;
-    gap: 0.65rem;
-    background-color: var(--surface);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-border-radius);
-    padding: 1rem 1.25rem;
-    transition: box-shadow var(--transition);
-}
-
-.order > div:hover {
-    box-shadow: var(--shadow-sm);
-}
-
-.order > div:last-child:nth-child(odd) {
-    grid-column: 1 / -1;
-}
-
-.order label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--on-surface-variant);
-}
-
-input, select {
-    padding: 0.45rem 0.7rem;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--small-border-radius);
-    font-size: 0.85rem;
-    font-family: inherit;
-    background-color: var(--surface);
-    color: var(--on-surface);
-    transition: all var(--transition);
-}
-
-input:focus, select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12);
-}
-
-button[type="submit"] {
-    padding: 0.5rem 1.5rem;
-    background-color: var(--primary);
-    color: #fff;
-    border: none;
-    border-radius: var(--border-radius);
-    font-size: 0.85rem;
-    font-weight: 600;
-    font-family: inherit;
     cursor: pointer;
-    transition: all var(--transition);
-    align-self: flex-start;
-}
-
-button[type="submit"]:hover {
-    background-color: var(--primary-hover);
-    transform: scale(1.02);
-}
-
-button[type="submit"]:active {
-    transform: scale(0.97);
-}
-
-.order h2 {
-    font-size: 1rem;
-    font-weight: 700;
-    color: var(--on-background);
-    letter-spacing: -0.01em;
-}
-
-.scrollable {
-    overflow-y: auto;
-    min-height: 0;
-}
-
-#basket_table button, .order table button {
-    padding: 0.3rem 0.5rem;
-    background-color: var(--primary-container);
-    color: var(--primary);
-    border: none;
-    border-radius: var(--small-border-radius);
-    cursor: pointer;
-    font-size: 0.75rem;
-    transition: all var(--transition);
-}
-
-#basket_table button:hover, .order table button:hover {
-    background-color: var(--primary);
-    color: #fff;
-    transform: scale(1.05);
-}
-
-#basket_table button:active, .order table button:active {
-    transform: scale(0.95);
-}
-
-#total-price {
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--primary);
-}
-
-.order table {
-    font-size: 0.8rem;
-}
-
-.order table th {
-    padding: 0.35rem 0.5rem;
-}
-
-.htmx-request {
-    opacity: 0.7;
-    pointer-events: none;
+    text-decoration: none;
+    margin-bottom: 24px;
     transition: opacity var(--transition);
 }
 
+.sidebar-cta:hover {
+    opacity: 0.9;
+}
+
+.sidebar-cta .material-symbols-outlined {
+    font-size: 18px;
+}
+
+.sidebar-nav {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.sidebar-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: var(--border-radius-md);
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+    color: var(--on-surface-variant);
+    transition: all var(--transition);
+    cursor: pointer;
+}
+
+.sidebar-link:hover {
+    background: var(--surface-container-low);
+    color: var(--on-surface);
+}
+
+.sidebar-link.active {
+    background: var(--primary-container);
+    color: var(--primary);
+    font-weight: 700;
+}
+
+.sidebar-link .material-symbols-outlined {
+    font-size: 20px;
+}
+
+.sidebar-footer {
+    margin-top: auto;
+    padding-top: 16px;
+    border-top: 1px solid var(--outline-variant);
+}
+
+.sidebar-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    margin-top: 12px;
+}
+
+.sidebar-user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--surface-container-high);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--on-surface);
+    font-size: 14px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.sidebar-user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-user-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--on-surface);
+}
+
+.sidebar-user-status {
+    font-size: 11px;
+    color: var(--on-surface-variant);
+}
+
+/* ========== MAIN LAYOUT ========== */
+.app-body {
+    margin-left: var(--sidebar-width);
+    width: calc(100% - var(--sidebar-width));
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+}
+
+/* ========== TOP NAVBAR ========== */
+.topnav {
+    height: var(--topnav-height);
+    border-bottom: 1px solid var(--outline-variant);
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 30;
+}
+
+.topnav-left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    flex: 1;
+    min-width: 0;
+}
+
+.topnav-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--on-surface);
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+}
+
+.topnav-search {
+    position: relative;
+    width: 240px;
+}
+
+.topnav-search .material-symbols-outlined {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 18px;
+    color: var(--on-surface-variant);
+    pointer-events: none;
+}
+
+.topnav-search input {
+    width: 100%;
+    height: 32px;
+    padding: 0 8px 0 32px;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: var(--surface-container-lowest);
+    font-size: 13px;
+    color: var(--on-surface);
+    outline: none;
+    transition: border-color var(--transition);
+}
+
+.topnav-search input:focus {
+    border-color: var(--primary);
+}
+
+.topnav-search input::placeholder {
+    color: var(--on-surface-variant);
+    opacity: 0.6;
+}
+
+.topnav-center {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.topnav-period {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--on-surface-variant);
+    text-decoration: none;
+    cursor: pointer;
+    padding-bottom: 2px;
+    transition: color var(--transition);
+}
+
+.topnav-period:hover {
+    color: var(--on-surface);
+}
+
+.topnav-period.active {
+    color: var(--primary);
+    font-weight: 700;
+    border-bottom: 2px solid var(--secondary);
+}
+
+.topnav-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.topnav-btn {
+    height: 32px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: transparent;
+    color: var(--on-surface);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition);
+    text-decoration: none;
+}
+
+.topnav-btn:hover {
+    background: var(--surface-container-low);
+}
+
+.topnav-btn .material-symbols-outlined {
+    font-size: 16px;
+}
+
+.topnav-icon {
+    color: var(--on-surface-variant);
+    cursor: pointer;
+    transition: color var(--transition);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.topnav-icon:hover {
+    color: var(--primary);
+}
+
+.topnav-icon .material-symbols-outlined {
+    font-size: 22px;
+}
+
+/* ========== MAIN CONTENT ========== */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+/* ========== CARDS / SECTIONS ========== */
+.card {
+    background: var(--surface-container-lowest);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.card-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--outline-variant);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--surface-container-low);
+}
+
+.card-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--on-surface);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.card-header h2 .material-symbols-outlined {
+    font-size: 18px;
+    color: var(--on-surface-variant);
+}
+
+.card-body {
+    padding: 16px;
+    flex: 1;
+}
+
+/* ========== METRICS GRID ========== */
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+}
+
+.metric-card {
+    background: var(--surface-container-lowest);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.metric-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--on-surface-variant);
+    letter-spacing: 0.02em;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.metric-label .material-symbols-outlined {
+    font-size: 14px;
+}
+
+.metric-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--on-surface);
+    line-height: 1.2;
+}
+
+.metric-change {
+    font-size: 11px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.metric-change.positive {
+    color: var(--success-text);
+}
+
+.metric-change.warning {
+    color: var(--warning-text);
+}
+
+.metric-change .material-symbols-outlined {
+    font-size: 14px;
+}
+
+/* ========== SPLIT PANE ========== */
+.split-pane {
+    display: flex;
+    gap: 16px;
+    flex: 1;
+    min-height: 0;
+}
+
+.split-pane-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+
+.split-pane-right {
+    width: 320px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ========== FORM ========== */
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.form-group label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+    letter-spacing: 0.02em;
+}
+
+.form-input {
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: var(--surface-container-lowest);
+    font-size: 13px;
+    color: var(--on-surface);
+    outline: none;
+    transition: border-color var(--transition);
+    width: 100%;
+}
+
+.form-input:focus {
+    border-color: var(--primary);
+}
+
+.form-input::placeholder {
+    color: var(--on-surface-variant);
+    opacity: 0.6;
+}
+
+textarea.form-input {
+    height: auto;
+    padding: 8px;
+    resize: vertical;
+}
+
+select.form-input {
+    appearance: auto;
+}
+
+/* ========== CATALOGUE GRID ========== */
+.catalogue-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+}
+
+.catalogue-item {
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: var(--surface-bright);
+    transition: border-color var(--transition);
+}
+
+.catalogue-item:hover {
+    border-color: var(--outline);
+}
+
+.catalogue-item-top {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.catalogue-item-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 16px;
+}
+
+.catalogue-item-icon.icon-cake {
+    background: var(--primary-container);
+    color: var(--primary);
+}
+
+.catalogue-item-icon.icon-cookie {
+    background: var(--surface-container-high);
+    color: var(--on-surface-variant);
+}
+
+.catalogue-item-name {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--on-surface);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.catalogue-item-price {
+    font-size: 13px;
+    color: var(--on-surface-variant);
+}
+
+.catalogue-item-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--outline-variant);
+}
+
+.qty-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    font-size: 14px;
+    transition: all var(--transition);
+}
+
+.qty-btn.qty-minus {
+    background: var(--surface-container-low);
+    color: var(--on-surface-variant);
+}
+
+.qty-btn.qty-minus:hover {
+    background: var(--outline-variant);
+    color: var(--on-surface);
+}
+
+.qty-btn.qty-plus {
+    background: var(--surface-container-high);
+    color: var(--on-surface);
+}
+
+.qty-btn.qty-plus:hover {
+    background: var(--primary);
+    color: var(--on-primary);
+}
+
+.qty-btn .material-symbols-outlined {
+    font-size: 14px;
+}
+
+.qty-value {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--on-surface);
+    width: 24px;
+    text-align: center;
+}
+
+/* ========== ORDER SUMMARY ========== */
+.summary-lineitems {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.summary-item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--outline-variant);
+}
+
+.summary-item-info {
+    flex: 1;
+    min-width: 0;
+    padding-right: 8px;
+}
+
+.summary-item-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--on-surface);
+}
+
+.summary-item-detail {
+    font-size: 13px;
+    color: var(--on-surface-variant);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.summary-item-price {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--on-surface);
+    white-space: nowrap;
+}
+
+.summary-item-remove {
+    color: var(--error);
+    cursor: pointer;
+    transition: opacity var(--transition);
+    background: none;
+    border: none;
+    margin-left: 4px;
+}
+
+.summary-item-remove:hover {
+    opacity: 0.8;
+}
+
+.summary-item-remove .material-symbols-outlined {
+    font-size: 16px;
+}
+
+.summary-totals {
+    padding: 16px;
+    border-top: 1px solid var(--outline-variant);
+    background: var(--surface-bright);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.summary-total-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 13px;
+    color: var(--on-surface-variant);
+}
+
+.summary-total-row.total {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--on-surface);
+    padding-top: 8px;
+    border-top: 1px solid var(--outline-variant);
+}
+
+.btn-finalize {
+    width: 100%;
+    height: 40px;
+    margin-top: 8px;
+    background: var(--primary);
+    color: var(--on-primary);
+    border: none;
+    border-radius: var(--border-radius-sm);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+    transition: opacity var(--transition);
+}
+
+.btn-finalize:hover {
+    opacity: 0.9;
+}
+
+.btn-finalize .material-symbols-outlined {
+    font-size: 18px;
+}
+
+/* ========== TABLES ========== */
+.table-container {
+    overflow-x: auto;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.data-table thead {
+    background: var(--surface-container-low);
+    border-bottom: 1px solid var(--outline-variant);
+}
+
+.data-table th {
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.data-table th.right {
+    text-align: right;
+}
+
+.data-table th.center {
+    text-align: center;
+}
+
+.data-table td {
+    padding: 8px 12px;
+    color: var(--on-surface);
+    white-space: nowrap;
+}
+
+.data-table tbody tr {
+    border-bottom: 1px solid var(--outline-variant);
+    transition: background var(--transition);
+    height: 40px;
+}
+
+.data-table tbody tr:hover {
+    background: var(--surface-container-low);
+}
+
+.data-table tbody tr:nth-child(even) {
+    background: var(--surface-bright);
+}
+
+.data-table tbody tr:nth-child(even):hover {
+    background: var(--surface-container-low);
+}
+
+.data-table td .truncate {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+}
+
+.data-table .order-id {
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.data-table .customer-name {
+    font-weight: 500;
+}
+
+.data-table .text-right {
+    text-align: right;
+}
+
+.data-table .text-center {
+    text-align: center;
+}
+
+.data-table .text-on-surface-variant {
+    color: var(--on-surface-variant);
+}
+
+/* ========== STATUS CHIPS ========== */
+.status-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: var(--border-radius-full);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.status-chip.ready {
+    background: var(--success-bg);
+    color: var(--success-text);
+}
+
+.status-chip.decorating {
+    background: var(--warning-bg);
+    color: var(--warning-text);
+}
+
+.status-chip.baking {
+    background: var(--danger-bg);
+    color: var(--danger-text);
+}
+
+.status-chip.queued {
+    background: var(--info-bg);
+    color: var(--info-text);
+}
+
+.status-chip.accepted {
+    background: #fff3e0;
+    color: #e65100;
+}
+
+.status-chip.done {
+    background: var(--success-bg);
+    color: var(--success-text);
+}
+
+/* ========== TABLE PAGINATION ========== */
+.table-footer {
+    padding: 8px 12px;
+    border-top: 1px solid var(--outline-variant);
+    background: var(--surface-container-lowest);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 11px;
+    color: var(--on-surface-variant);
+}
+
+.pagination {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.pagination-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: transparent;
+    cursor: pointer;
+    color: var(--on-surface-variant);
+    transition: all var(--transition);
+    font-size: 12px;
+}
+
+.pagination-btn:hover {
+    background: var(--surface-container-low);
+}
+
+.pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.pagination-btn .material-symbols-outlined {
+    font-size: 14px;
+}
+
+.pagination-btn.active {
+    background: var(--primary);
+    color: var(--on-primary);
+    border-color: var(--primary);
+}
+
+/* ========== BADGE PILLS ========== */
+.badge-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: var(--border-radius-full);
+    font-size: 10px;
+    font-weight: 600;
+}
+
+.badge-pill.signature {
+    background: var(--primary-container);
+    color: var(--primary);
+}
+
+.badge-pill.seasonal {
+    background: var(--surface-container-high);
+    color: var(--on-surface);
+}
+
+/* ========== FORM CARD (single column) ========== */
+.form-card {
+    max-width: 480px;
+}
+
+.form-card .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--outline-variant);
+    margin-top: 8px;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 16px;
+    height: 40px;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition);
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: var(--on-primary);
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-outline {
+    background: transparent;
+    border: 1px solid var(--outline-variant);
+    color: var(--on-surface);
+}
+
+.btn-outline:hover {
+    background: var(--surface-container-high);
+}
+
+.btn-sm {
+    height: 32px;
+    padding: 0 12px;
+}
+
+.btn .material-symbols-outlined {
+    font-size: 18px;
+}
+
+/* ========== TABLE ACTIONS ========== */
+.action-btn {
+    color: var(--on-surface-variant);
+    cursor: pointer;
+    transition: color var(--transition);
+    background: none;
+    border: none;
+}
+
+.action-btn:hover {
+    color: var(--primary);
+}
+
+.action-btn .material-symbols-outlined {
+    font-size: 18px;
+}
+
+/* ========== CONFIRMATION ========== */
+.confirmation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 8px;
+    text-align: center;
+}
+
+.confirmation h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--on-surface);
+}
+
+/* ========== LOGIN PAGE ========== */
 .login-page {
     display: flex;
     justify-content: center;
@@ -572,11 +1079,11 @@ button[type="submit"]:active {
 .login-card {
     background-color: var(--surface);
     border: 1px solid var(--outline-variant);
-    border-radius: var(--small-radius);
-    padding: 2.5rem;
-    box-shadow: var(--shadow-lg);
+    border-radius: var(--border-radius-md);
+    padding: 40px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
     width: 100%;
-    max-width: 26rem;
+    max-width: 400px;
     position: relative;
     overflow: hidden;
 }
@@ -594,16 +1101,14 @@ button[type="submit"]:active {
 .login-icon {
     display: flex;
     justify-content: center;
-    margin-bottom: 1.5rem;
-    font-size: 2.5rem;
+    margin-bottom: 24px;
     color: var(--primary);
 }
 
 .login-card h1 {
-    font-family: "Plus Jakarta Sans", sans-serif;
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 700;
-    margin-bottom: 1.5rem;
+    margin-bottom: 24px;
     color: var(--on-background);
     text-align: center;
     letter-spacing: -0.02em;
@@ -612,95 +1117,143 @@ button[type="submit"]:active {
 .login-card form {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 16px;
 }
 
 .login-card label {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
-    font-size: 0.85rem;
+    gap: 4px;
+    font-size: 13px;
     font-weight: 600;
     color: var(--on-surface-variant);
 }
 
+.login-card input {
+    padding: 8px 12px;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+    font-family: inherit;
+    background-color: var(--surface);
+    color: var(--on-surface);
+    transition: border-color var(--transition);
+}
+
+.login-card input:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
 .login-card button {
-    padding: 0.75rem 2rem;
+    padding: 10px 32px;
     background-color: var(--primary);
     color: #fff;
     border: none;
-    border-radius: var(--border-radius);
-    font-size: 1rem;
+    border-radius: var(--border-radius-md);
+    font-size: 14px;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
-    transition: all var(--transition);
-    margin-top: 0.5rem;
+    transition: opacity var(--transition);
+    margin-top: 8px;
 }
 
 .login-card button:hover {
-    background-color: var(--primary-hover);
-    transform: scale(1.02);
+    opacity: 0.9;
 }
 
-.login-card button:active {
-    transform: scale(0.97);
+/* ========== HTMX ========== */
+.htmx-request {
+    opacity: 0.6;
+    pointer-events: none;
 }
 
+/* ========== HIDDEN ========== */
+.hidden {
+    display: none !important;
+}
+
+/* ========== RESPONSIVE ========== */
 @media (max-width: 1024px) {
-    .order {
-        grid-template-columns: 1fr;
+    .metrics-grid {
+        grid-template-columns: repeat(2, 1fr);
     }
 
-    .order > div:last-child:nth-child(odd) {
-        grid-column: 1;
+    .split-pane {
+        flex-direction: column;
+    }
+
+    .split-pane-right {
+        width: 100%;
+    }
+
+    .form-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .topnav-center {
+        display: none;
+    }
+
+    .topnav-search {
+        width: 160px;
     }
 }
 
 @media (max-width: 768px) {
-    .toolbar {
-        flex-direction: column;
-        align-items: stretch;
+    .sidebar {
+        width: 56px;
+        padding: 8px;
     }
 
-    .search-container {
-        flex-direction: column;
-        align-items: stretch;
+    .sidebar-brand h1,
+    .sidebar-brand p,
+    .sidebar-link span:not(.material-symbols-outlined),
+    .sidebar-cta span:not(.material-symbols-outlined),
+    .sidebar-user-info {
+        display: none;
     }
 
-    .search-container > * {
-        width: 100%;
+    .sidebar-cta {
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        margin: 0 auto 16px;
+        border-radius: 50%;
     }
 
-    aside {
-        min-width: 3.5rem;
-        max-width: 3.5rem;
-        border-radius: 0 var(--small-border-radius) var(--small-border-radius) 0;
+    .sidebar-link {
+        justify-content: center;
+        padding: 12px 8px;
+    }
+
+    .sidebar-user {
+        justify-content: center;
     }
 
     .app-body {
-        margin-left: 3.5rem;
+        margin-left: 56px;
+        width: calc(100% - 56px);
     }
 
-    nav a {
-        width: 2.5rem;
-        height: 2.5rem;
-        font-size: 1.1rem;
+    .topnav {
+        padding: 0 12px;
     }
 
-    main {
-        padding: 1rem;
+    .topnav-search {
+        display: none;
     }
 
-    header {
-        padding: 0.75rem 1rem;
+    .metrics-grid {
+        grid-template-columns: 1fr 1fr;
     }
 
-    header h1 {
-        font-size: 1.15rem;
+    .form-grid {
+        grid-template-columns: 1fr;
     }
 
-    .order > div {
-        padding: 0.85rem 1rem;
+    .main-content {
+        padding: 8px;
     }
 }
diff --git a/server/template.go b/server/template.go
index 7517ae8..adff311 100644
--- a/server/template.go
+++ b/server/template.go
@@ -14,8 +14,12 @@ var templates embed.FS
 
 func (h *Server) loadTemplates() {
 	h.tmpl = make(map[string]*template.Template)
+	funcs := template.FuncMap{
+		"add":  func(a, b int) int { return a + b },
+		"mult": func(a, b int) int { return a * b },
+	}
 	for _, page := range h.routes {
-		tmpl, err := template.ParseFS(templates,
+		tmpl, err := template.New("").Funcs(funcs).ParseFS(templates,
 			"templates/layout/*.gohtml",
 			"templates/"+page.template+".gohtml",
 		)
diff --git a/server/templates/cake.gohtml b/server/templates/cake.gohtml
index 77db7aa..a13409e 100644
--- a/server/templates/cake.gohtml
+++ b/server/templates/cake.gohtml
@@ -2,33 +2,48 @@
 Ciasto {{if .ID}}#{{.ID}}{{else}}nowe{{end}}
 {{end}}
 {{define "main"}}
-<main>
-    <form method="post" class="order">
-        <div>
-            <h2>Informacje o cieście</h2>
-            <input hidden="hidden" name="id" value="{{.ID}}">
-            <label>Nazwa
-                <input type="text" name="name" value="{{.Name}}">
-            </label>
-            <label>Cena (gr)
-                <input type="number" name="price" min="0" value="{{.Price}}">
-            </label>
-            <label>Kategoria
-                <select name="category" id="category">
-                    <option {{ if eq .Category "common" }}selected{{ end }} value="common">common</option>
-                    <option {{ if eq .Category "christmas" }}selected{{ end }} value="christmas">christmas</option>
-                    <option {{ if eq .Category "easter" }}selected{{ end }} value="easter">easter</option>
-                    <option {{ if eq .Category "donuts" }}selected{{ end }} value="donuts">donuts</option>
-                </select>
-            </label>
-            <label>Dostępność
-                <select name="availability" id="availability">
-                    <option {{ if eq .Availability "available" }}selected{{ end }} value="available">dostępne</option>
-                    <option {{ if eq .Availability "unavailable" }}selected{{ end }} value="unavailable">niedostępne</option>
-                </select>
-            </label>
-            <button type="submit">Zapisz ciasto</button>
+<div class="form-card">
+    <section class="card">
+        <div class="card-header">
+            <h2>
+                <span class="material-symbols-outlined">cake</span>
+                {{if .ID}}Edytuj ciasto #{{.ID}}{{else}}Nowe ciasto{{end}}
+            </h2>
         </div>
-    </form>
-</main>
+        <form method="post" class="card-body">
+            <input type="hidden" name="id" value="{{.ID}}">
+            <div class="form-group">
+                <label>Nazwa *</label>
+                <input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Nazwa ciasta">
+            </div>
+            <div class="form-group">
+                <label>Cena (gr) *</label>
+                <input class="form-input" type="number" name="price" min="0" value="{{.Price}}">
+            </div>
+            <div class="form-group">
+                <label>Kategoria</label>
+                <select class="form-input" name="category">
+                    <option {{if eq .Category "common"}}selected{{end}} value="common">Zwykłe</option>
+                    <option {{if eq .Category "christmas"}}selected{{end}} value="christmas">Bożonarodzeniowe</option>
+                    <option {{if eq .Category "easter"}}selected{{end}} value="easter">Wielkanocne</option>
+                    <option {{if eq .Category "donuts"}}selected{{end}} value="donuts">Pączki</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Dostępność</label>
+                <select class="form-input" name="availability">
+                    <option {{if eq .Availability "available"}}selected{{end}} value="available">Dostępne</option>
+                    <option {{if eq .Availability "unavailable"}}selected{{end}} value="unavailable">Niedostępne</option>
+                </select>
+            </div>
+            <div class="form-actions">
+                <a href="/cakes" class="btn btn-outline">Anuluj</a>
+                <button type="submit" class="btn btn-primary">
+                    <span class="material-symbols-outlined">save</span>
+                    Zapisz ciasto
+                </button>
+            </div>
+        </form>
+    </section>
+</div>
 {{end}}
diff --git a/server/templates/cakes.gohtml b/server/templates/cakes.gohtml
index e544b43..710438d 100644
--- a/server/templates/cakes.gohtml
+++ b/server/templates/cakes.gohtml
@@ -1,37 +1,73 @@
 {{define "title"}}
-Ciasta
+Katalog
 {{end}}
 {{define "main"}}
-<main>
-    <div class="toolbar">
-        <a href="/cake" class="btn-primary">
-            <i class="fa-solid fa-plus"></i>
+<section class="card">
+    <div class="card-header">
+        <h2>
+            <span class="material-symbols-outlined">inventory_2</span>
+            Zarządzanie katalogiem
+        </h2>
+        <a href="/cake" class="btn btn-primary btn-sm">
+            <span class="material-symbols-outlined">add</span>
             Nowe ciasto
         </a>
     </div>
-    <div id="results-table" class="scrollable">
-        <table>
+    <div class="table-container">
+        <table class="data-table">
             <thead>
                 <tr>
-                    <th></th>
+                    <th style="width:32px"></th>
                     <th>Nazwa</th>
-                    <th>Cena</th>
+                    <th>SKU</th>
+                    <th class="right">Cena bazowa</th>
                     <th>Kategoria</th>
                     <th>Dostępność</th>
+                    <th class="center"></th>
                 </tr>
             </thead>
             <tbody>
                 {{range .}}
                 <tr>
-                    <th><a href="/cake/{{.ID}}">Edytuj</a></th>
-                    <th>{{.Name}}</th>
-                    <th>{{.Price}} PLN</th>
-                    <th>{{.Category}}</th>
-                    <th>{{.Availability}}</th>
+                    <td>
+                        <div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
+                            <span class="material-symbols-outlined" style="font-size:14px">cake</span>
+                        </div>
+                    </td>
+                    <td style="font-weight:500">{{.Name}}</td>
+                    <td class="text-on-surface-variant">#{{.ID}}</td>
+                    <td class="text-right">{{.Price}} PLN</td>
+                    <td>
+                        <span class="badge-pill {{if eq .Category "common"}}signature{{else}}seasonal{{end}}">
+                            {{if eq .Category "common"}}Zwykłe
+                            {{else if eq .Category "christmas"}}Bożonarodzeniowe
+                            {{else if eq .Category "easter"}}Wielkanocne
+                            {{else if eq .Category "donuts"}}Pączki
+                            {{else}}{{.Category}}{{end}}
+                        </span>
+                    </td>
+                    <td>{{if eq .Availability "available"}}Dostępne{{else}}Niedostępne{{end}}</td>
+                    <td class="text-center">
+                        <a href="/cake/{{.ID}}" class="action-btn">
+                            <span class="material-symbols-outlined">edit</span>
+                        </a>
+                    </td>
                 </tr>
                 {{end}}
             </tbody>
         </table>
     </div>
-</main>
+    <div class="table-footer">
+        <span>Pokazuje 1-{{len .}} z {{len .}}</span>
+        <div class="pagination">
+            <button class="pagination-btn" disabled>
+                <span class="material-symbols-outlined">chevron_left</span>
+            </button>
+            <button class="pagination-btn active">1</button>
+            <button class="pagination-btn" disabled>
+                <span class="material-symbols-outlined">chevron_right</span>
+            </button>
+        </div>
+    </div>
+</section>
 {{end}}
diff --git a/server/templates/confirmation.gohtml b/server/templates/confirmation.gohtml
index 824fbc0..9ed0444 100644
--- a/server/templates/confirmation.gohtml
+++ b/server/templates/confirmation.gohtml
@@ -1,8 +1,13 @@
 {{define "title"}}
-Confirmed
+Potwierdzone
 {{end}}
 {{define "main"}}
-<main>
-    <h2>{{.ID}} confirmed</h2>
-</main>
+<div class="confirmation">
+    <span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
+    <h2>{{.ID}} — zapisano</h2>
+    <a href="/orders" class="btn btn-primary" style="margin-top:16px">
+        <span class="material-symbols-outlined">arrow_back</span>
+        Powrót do zamówień
+    </a>
+</div>
 {{end}}
diff --git a/server/templates/layout/layout.gohtml b/server/templates/layout/layout.gohtml
index 9320a4b..46aeb87 100644
--- a/server/templates/layout/layout.gohtml
+++ b/server/templates/layout/layout.gohtml
@@ -1,31 +1,61 @@
 {{define "layout"}}
 <!doctype html>
-<html lang="en">
-
+<html lang="pl">
 <head>
     <meta charset="UTF-8" />
-    <title>{{template "title" .}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{template "title" .}} — Zamówienia ciast</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0&display=swap" rel="stylesheet">
     <script src="/static/htmx2.04.js" defer></script>
-    <script src="/static/order.js" ></script>
+    <script src="/static/order.js"></script>
     <link rel="stylesheet" href="/static/style.css">
-    <link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
-    <link rel="stylesheet" href="/static/fontawesome/css/solid.css">
 </head>
-
 <body>
-    <aside>
-        <nav>{{template "nav" .}}</nav>
+    <aside class="sidebar">
+        {{template "nav" .}}
     </aside>
     <div class="app-body">
-        <header>
-            <h1>{{template "title" .}}</h1>
+        <header class="topnav">
+            <div class="topnav-left">
+                <h1 class="topnav-title">{{template "title" .}}</h1>
+                <div class="topnav-search">
+                    <span class="material-symbols-outlined">search</span>
+                    <input type="text" placeholder="Szukaj zamówień..." />
+                </div>
+            </div>
+            <nav class="topnav-center">
+                <a class="topnav-period active" href="/orders">Dzisiaj</a>
+                <a class="topnav-period" href="/orders">Ten tydzień</a>
+                <a class="topnav-period" href="/orders">Miesiąc</a>
+            </nav>
+            <div class="topnav-right">
+                <a class="topnav-btn" href="/orders">
+                    <span class="material-symbols-outlined">sync</span>
+                    Sync
+                </a>
+                <a class="topnav-icon" href="#">
+                    <span class="material-symbols-outlined">notifications</span>
+                </a>
+            </div>
         </header>
-        {{template "main" .}}
+        <div class="main-content">
+            {{template "main" .}}
+        </div>
     </div>
+    <script>
+        (function() {
+            var path = window.location.pathname;
+            var links = document.querySelectorAll('.sidebar-link');
+            for (var i = 0; i < links.length; i++) {
+                if (links[i].getAttribute('href') === path) {
+                    links[i].classList.add('active');
+                }
+            }
+        })();
+    </script>
 </body>
-
 </html>
 {{end}}
diff --git a/server/templates/layout/nav.gohtml b/server/templates/layout/nav.gohtml
index 0de5bbb..d53d667 100644
--- a/server/templates/layout/nav.gohtml
+++ b/server/templates/layout/nav.gohtml
@@ -1,7 +1,39 @@
 {{define "nav"}}
-<a href="/orders" data-title="Zamówienia"><i class="fa-solid fa-list-ul"></i></a>
-<a href="/order" data-title="Nowe zamówienie"><i class="fa-solid fa-plus-circle"></i></a>
-<a href="/cakes" data-title="Wszystkie ciasta"><i class="fa-solid fa-birthday-cake"></i></a>
-<a href="/cake" data-title="Nowe ciasto"><i class="fa-solid fa-plus"></i></a>
-<a href="/logout" data-title="Wyloguj"><i class="fa-solid fa-sign-out-alt"></i></a>
+<div class="sidebar-brand">
+    <h1>Crumbs &amp; Co.</h1>
+    <p>Produkcja</p>
+</div>
+<a href="/order" class="sidebar-cta">
+    <span class="material-symbols-outlined">add</span>
+    <span>Nowe zamówienie</span>
+</a>
+<div class="sidebar-nav">
+    <a href="/orders" class="sidebar-link">
+        <span class="material-symbols-outlined">dashboard</span>
+        <span>Panel główny</span>
+    </a>
+    <a href="/order" class="sidebar-link">
+        <span class="material-symbols-outlined">shopping_cart</span>
+        <span>Zamówienia</span>
+    </a>
+    <a href="/cakes" class="sidebar-link">
+        <span class="material-symbols-outlined">inventory_2</span>
+        <span>Katalog</span>
+    </a>
+</div>
+<div class="sidebar-footer">
+    <a href="/logout" class="sidebar-link">
+        <span class="material-symbols-outlined">settings</span>
+        <span>Ustawienia</span>
+    </a>
+    <div class="sidebar-user">
+        <div class="sidebar-user-avatar">
+            <span class="material-symbols-outlined" style="font-size:18px">person</span>
+        </div>
+        <div class="sidebar-user-info">
+            <span class="sidebar-user-name">Menedżer</span>
+            <span class="sidebar-user-status">Aktywny</span>
+        </div>
+    </div>
+</div>
 {{end}}
diff --git a/server/templates/order.gohtml b/server/templates/order.gohtml
index 13d36b8..5b9f7d3 100644
--- a/server/templates/order.gohtml
+++ b/server/templates/order.gohtml
@@ -6,100 +6,153 @@
     {{end}}
 {{end}}
 {{define "main"}}
-    <main>
-        <form method="post" class="order">
-            {{with .Order}}
-            <div>
-                <h2>Dane zamówienia</h2>
-                <input hidden="hidden" name="id" value="{{.ID}}">
-                <label>Imię
-                    <input type="text" name="name" value="{{.Name}}">
-                </label>
-                <label>Nazwisko
-                    <input type="text" name="surname" value="{{.Surname}}">
-                </label>
-                <label>Numer telefonu
-                    <input type="tel" name="phone" value="{{.Phone}}">
-                </label>
-                <label>Lokalizacja
-                    <select name="location">
-                        <option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option>
-                        <option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option>
-                    </select>
-                </label>
-                <label>Data dostawy
-                    <input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
-                </label>
-                <label>Status
-                    <select name="status">
-                        <option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
-                        <option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
-                    </select>
-                </label>
-                <label>Zaliczka
-                    <input type="number" name="paid" min="0" value="{{.Paid}}">
-                </label>
+<form method="post" class="split-pane" style="flex:1;min-height:0">
+    {{$catalogue := .Catalogue}}
+    {{with .Order}}
+    <input type="hidden" name="id" value="{{.ID}}">
+    <div class="split-pane-left">
+        <section class="card">
+            <div class="card-header">
+                <h2>
+                    <span class="material-symbols-outlined">person_add</span>
+                    Dane klienta
+                </h2>
             </div>
-            <div>
-                <h2>Dodane ciasta</h2>
-                <div class="scrollable" style="flex:1">
-                    <table id="basket_table">
-                    </table>
-                </div>
-                <ul id="basket" class="scrollable">
-                </ul>
-            </div>
-            <div>
-                <h2>Podsumowanie</h2>
-                <label>
-                    <small>Do zapłaty:</small>
-                    <span id="total-price">100 PLN</span>
-                </label>
-                <button type="submit">Zapisz</button>
-            </div>
-            {{end}}
-            {{with .Catalogue}}
-            <div class="catalog-section">
-                <h2>Katalog</h2>
-                <div class="scrollable">
-                    <table>
-                        {{range .}}
-                        <tr>
-                            <th>{{.Name}}<br><small>{{.Category}} (#{{.ID}})</small></th>
-                            <th>{{.Price}} PLN</th>
-                            <th>
-                                <button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
-                                    <i class="fa-solid fa-plus"></i>
-                                </button>
-                            </th>
-                        </tr>
-                        {{end}}
-                    </table>
+            <div class="card-body">
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label>Imię *</label>
+                        <input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Jan">
+                    </div>
+                    <div class="form-group">
+                        <label>Nazwisko *</label>
+                        <input class="form-input" type="text" name="surname" value="{{.Surname}}" placeholder="Kowalski">
+                    </div>
+                    <div class="form-group">
+                        <label>Telefon</label>
+                        <input class="form-input" type="tel" name="phone" value="{{.Phone}}" placeholder="+48 123 456 789">
+                    </div>
+                    <div class="form-group">
+                        <label>Lokalizacja</label>
+                        <select class="form-input" name="location">
+                            <option {{if eq .Location "Kartuzy"}}selected{{end}} value="Kartuzy">Kartuzy</option>
+                            <option {{if eq .Location "Somonino"}}selected{{end}} value="Somonino">Somonino</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Data dostawy *</label>
+                        <input class="form-input" type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
+                    </div>
+                    <div class="form-group">
+                        <label>Status</label>
+                        <select class="form-input" name="status">
+                            <option {{if eq .Status "accepted"}}selected{{end}} value="accepted">Przyjęte</option>
+                            <option {{if eq .Status "done"}}selected{{end}} value="done">Gotowe</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Zaliczka</label>
+                        <input class="form-input" type="number" name="paid" min="0" value="{{.Paid}}">
+                    </div>
+                    <div class="form-group" style="grid-column:span 2">
+                        <label>Uwagi</label>
+                        <input class="form-input" type="text" placeholder="Alergie, specjalne życzenia...">
+                    </div>
                 </div>
             </div>
-            {{end}}
-        </form>
-    </main>
-    <template id="basket_element_template">
-        <tr>
-            <th class="cake-name">Name</th>
-            <th class="cake-price">Price</th>
-            <th>
-                <label>
-                    <input type="number" min="0">
-                </label>
-            </th>
-            <th class="cake-total">Total</th>
-            <th>
-                <button type=button>
-                    <i class="fa-solid fa-minus"></i>
+        </section>
+        <section class="card" style="flex:1;min-height:200px">
+            <div class="card-header">
+                <h2>
+                    <span class="material-symbols-outlined">inventory_2</span>
+                    Katalog produktów
+                </h2>
+                <div class="topnav-search" style="width:180px">
+                    <span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
+                    <input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)">
+                </div>
+            </div>
+            <div class="card-body" style="overflow-y:auto">
+                <div class="catalogue-grid" id="catalogue-grid">
+                    {{range $catalogue}}
+                    <div class="catalogue-item" data-name="{{.Name}}">
+                        <div class="catalogue-item-top">
+                            <div class="catalogue-item-icon icon-cake">
+                                <span class="material-symbols-outlined" style="font-size:16px">cake</span>
+                            </div>
+                            <div style="min-width:0">
+                                <div class="catalogue-item-name">{{.Name}}</div>
+                                <div class="catalogue-item-price">{{.Price}} PLN</div>
+                            </div>
+                        </div>
+                        <div class="catalogue-item-actions">
+                            <button type="button" class="qty-btn qty-minus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},-1)">
+                                <span class="material-symbols-outlined">remove</span>
+                            </button>
+                            <span class="qty-value" id="qty-{{.ID}}">0</span>
+                            <button type="button" class="qty-btn qty-plus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},1)">
+                                <span class="material-symbols-outlined">add</span>
+                            </button>
+                        </div>
+                    </div>
+                    {{end}}
+                </div>
+            </div>
+        </section>
+    </div>
+    <aside class="split-pane-right">
+        <section class="card" style="flex:1;display:flex;flex-direction:column">
+            <div class="card-header">
+                <h2>
+                    <span class="material-symbols-outlined">receipt_long</span>
+                    Podsumowanie
+                </h2>
+            </div>
+            <div class="summary-lineitems" id="basket_items">
+                {{$sub := 0}}
+                {{range .Cakes}}
+                {{$sub = add $sub (mult .Price .Amount)}}
+                <div class="summary-item" data-cake-id="{{.ID}}">
+                    <div class="summary-item-info">
+                        <div class="summary-item-name cake-name">{{.Name}}</div>
+                        <div class="summary-item-detail cake-price">{{.Price}} PLN × <span class="cake-qty">{{.Amount}}</span></div>
+                    </div>
+                    <div class="summary-item-price cake-total">{{.Total}} PLN</div>
+                    <button type="button" class="summary-item-remove" onclick="removeCake(this)">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
+                    <input type="hidden" name="cake[{{.ID}}]" value="{{.Amount}}">
+                </div>
+                {{end}}
+            </div>
+            <div class="summary-totals">
+                <div class="summary-total-row">
+                    <span>Subtotal</span>
+                    <span id="subtotal-price">{{$sub}} PLN</span>
+                </div>
+                <div class="summary-total-row">
+                    <span>Zaliczka</span>
+                    <span id="paid-amount">{{.Paid}} PLN</span>
+                </div>
+                <div class="summary-total-row total">
+                    <span>Do zapłaty</span>
+                    <span id="total-price">{{add $sub (mult .Paid -1)}} PLN</span>
+                </div>
+                <button type="submit" class="btn-finalize">
+                    <span class="material-symbols-outlined">check_circle</span>
+                    Finalizuj zamówienie
                 </button>
-            </th>
-        </tr>
-    </template>
-    <script>
-        {{range .Order.Cakes}}
-        addCake({{.ID}},{{.Name}}, {{.Price}}, {{.Amount}})
-        {{end}}
-    </script>
+            </div>
+        </section>
+    </aside>
+    {{end}}
+</form>
+<script>
+    {{if .Order.ID}}
+    {{range .Order.Cakes}}
+    updateCatalogueQty({{.ID}}, {{.Amount}});
+    {{end}}
+    {{end}}
+    updateTotals();
+</script>
 {{end}}
diff --git a/server/templates/orders.gohtml b/server/templates/orders.gohtml
index 96bf0e8..479572f 100644
--- a/server/templates/orders.gohtml
+++ b/server/templates/orders.gohtml
@@ -1,68 +1,138 @@
 {{define "title"}}
-Zamówienia
+Panel główny
 {{end}}
 {{define "main"}}
-<main>
-    <div class="toolbar">
-        <a href="/order" class="btn-primary">
-            <i class="fa-solid fa-plus"></i>
-            Nowe zamówienie
-        </a>
+<div class="metrics-grid">
+    <div class="metric-card">
+        <span class="metric-label">
+            <span class="material-symbols-outlined">receipt_long</span>
+            Zamówienia dzisiaj
+        </span>
+        <span class="metric-value">{{len .Orders}}</span>
+        <span class="metric-change positive">
+            <span class="material-symbols-outlined">arrow_upward</span>
+            Wszystkie aktywne
+        </span>
     </div>
-    <form class="search-container" hx-get="/orders/search" hx-target="#results-table"
-        hx-trigger="keyup delay:500ms, change">
-        <label>Data początkowa
-            <input type="date" value="{{.First}}" name="from">
-        </label>
-        <label>Data końcowa
-            <input type="date" value="{{.Last}}" name="to">
-        </label>
-    </form>
-    <div id="results-table" class="scrollable">
+    <div class="metric-card">
+        <span class="metric-label">
+            <span class="material-symbols-outlined">cake</span>
+            Do realizacji
+        </span>
+        <span class="metric-value">
+            {{$pending := 0}}
+            {{range .Orders}}{{if ne .Status "done"}}{{$pending = add $pending 1}}{{end}}{{end}}
+            {{$pending}}
+        </span>
+        <span class="metric-change warning">
+            <span class="material-symbols-outlined">priority_high</span>
+            Oczekujące
+        </span>
+    </div>
+    <div class="metric-card">
+        <span class="metric-label">
+            <span class="material-symbols-outlined">check_circle</span>
+            Gotowe do odbioru
+        </span>
+        <span class="metric-value">
+            {{$done := 0}}
+            {{range .Orders}}{{if eq .Status "done"}}{{$done = add $done 1}}{{end}}{{end}}
+            {{$done}}
+        </span>
+        <span class="metric-change">Zrealizowane</span>
+    </div>
+    <div class="metric-card">
+        <span class="metric-label">
+            <span class="material-symbols-outlined">payments</span>
+            Przychód (szac.)
+        </span>
+        <span class="metric-value">
+            {{$total := 0}}
+            {{range .Orders}}{{range .Cakes}}{{$total = add $total (mult .Price .Amount)}}{{end}}{{end}}
+            {{$total}} PLN
+        </span>
+        <span class="metric-change positive">
+            <span class="material-symbols-outlined">trending_up</span>
+            W bieżącym miesiącu
+        </span>
+    </div>
+</div>
+
+<section class="card">
+    <div class="card-header">
+        <h2>
+            <span class="material-symbols-outlined">list_alt</span>
+            Aktywne zamówienia
+        </h2>
+        <div style="display:flex;align-items:center;gap:8px">
+            <form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
+                <div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
+                    <label style="font-size:11px;white-space:nowrap">Od</label>
+                    <input class="form-input" style="width:140px" type="date" value="{{.First}}" name="from">
+                </div>
+                <div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
+                    <label style="font-size:11px;white-space:nowrap">Do</label>
+                    <input class="form-input" style="width:140px" type="date" value="{{.Last}}" name="to">
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="table-container" id="results-table">
         {{template "orders-table" .Orders}}
     </div>
-</main>
+</section>
 {{end}}
 {{define "orders-table"}}
-<table id="orders_table">
+<table class="data-table">
     <thead>
         <tr>
-            <th>Numer zamówienia</th>
+            <th>ID zamówienia</th>
             <th>Klient</th>
-            <th>Lokalizacja</th>
-            <th>Data zamówienia</th>
-            <th>Pozostało do zapłaty</th>
-            <th>Status</th>
+            <th>Data odbioru</th>
+            <th>Pozycje</th>
+            <th class="right">Suma</th>
+            <th class="center">Status</th>
+            <th class="center"></th>
         </tr>
     </thead>
     <tbody>
         {{range .}}
-        <tr class="clickable" onclick="toggleDetails(this)">
-            <th><a href="/order/{{.ID}}">#{{.ID}}</a></th>
-            <th>{{.Surname}} {{.Name}} {{.Phone}}</th>
-            <th>{{.Location}}</th>
-            <th>{{.Date.Format "2006-01-02"}}</th>
-            <th>{{.Total}} PLN</th>
-            <th><span class="status-badge status-{{.Status}}">{{.Status}}</span></th>
-        </tr>
-        <tr class="hidden details-row">
-            <td colspan="6" class="details-content">
-            {{template "order_info" .}}
+        <tr>
+            <td><a href="/order/{{.ID}}" class="order-id">#{{.ID}}</a></td>
+            <td class="customer-name">{{.Surname}} {{.Name}}<br><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{{.Phone}}</span></td>
+            <td class="text-on-surface-variant">{{.Date.Format "2006-01-02 15:04"}}</td>
+            <td>
+                <span class="truncate" title="{{range .Cakes}}{{.Name}} (x{{.Amount}}), {{end}}">
+                    {{range $i, $c := .Cakes}}{{if $i}}, {{end}}{{.Name}} (x{{.Amount}}){{end}}
+                </span>
+            </td>
+            <td class="text-right" style="font-weight:700">{{.Total}} PLN</td>
+            <td class="text-center">
+                <span class="status-chip {{.Status}}">
+                    {{if eq .Status "accepted"}}Przyjęte
+                    {{else if eq .Status "done"}}Gotowe
+                    {{else}}Oczekujące{{end}}
+                </span>
+            </td>
+            <td class="text-center">
+                <a href="/order/{{.ID}}" class="action-btn">
+                    <span class="material-symbols-outlined">edit</span>
+                </a>
             </td>
         </tr>
         {{end}}
     </tbody>
 </table>
-{{end}}
-{{define "order_info"}}
-    <table>
-        {{range .Cakes}}
-        <tr>
-            <th>{{.Name}}<br><small>ID: {{.ID}}</small></th>
-            <th><small>Cena:</small><br>{{.Price}} PLN</th>
-            <th><small>Ilość:</small><br>{{.Amount}}</th>
-            <th><small>Razem:</small><br>{{.Total}} PLN</th>
-        </tr>
-        {{end}}
-    </table>
+<div class="table-footer">
+    <span>Pokazuje 1-{{len .}} z {{len .}}</span>
+    <div class="pagination">
+        <button class="pagination-btn" disabled>
+            <span class="material-symbols-outlined">chevron_left</span>
+        </button>
+        <button class="pagination-btn active">1</button>
+        <button class="pagination-btn" disabled>
+            <span class="material-symbols-outlined">chevron_right</span>
+        </button>
+    </div>
+</div>
 {{end}}

	Cake Name	SKU	Base Price	Category	Actions
+ +cake + +	Classic Vanilla Bean	VB-1001	$45.00	+Signature +	+ +
+ +cake + +	Decadent Chocolate Fudge	CF-1002	$55.00	+Signature +	+ +
+ +cake + +	Autumn Spiced Carrot	SC-2001	$48.00	+Seasonal +	+ +
cake	Lemon Raspberry Delight	LR-1004	$50.00	Signature
cake	Strawberry Shortcake	SS-1005	$42.00	Signature
cake	Winter Peppermint Mocha	PM-2002	$52.00	Seasonal
Order ID	Customer	Pickup Time	Items	Total	Status
#ORD-9921	Sarah Jenkins	10:30 AM	1x Chocolate Fudge (8"), 12x Macarons	$65.00	+Ready +	+ +
#ORD-9922	Michael Chang	11:00 AM (Rush)	2x Red Velvet (Tiered), 1x Custom In...	$145.50	+Decorating +	+ +
#ORD-9923	Elena Rodriguez	1:00 PM	1x Vanilla Bean (10")	$45.00	+Baking +	+ +
#ORD-9924	David Kim	2:30 PM	1x Carrot Cake (Nut-Free)	$50.00	+Queued +	+ +
#ORD-9925	Corporate Event Inc.	4:00 PM	5x Chocolate Fudge (Sheet), 100x C...	$450.00	+Queued +	+ +
Order ID	Customer	Date	Status	Total
#ORD-092	Alice Smith	Today, 09:30 AM	+Preparing +	$125.50
#ORD-091	Bob Jones	Today, 08:15 AM	+Ready +	$45.00
Numer zamówienia	ID zamówienia	Klient	Lokalizacja	Data zamówienia	Pozostało do zapłaty	Status
#{{.ID}}	{{.Surname}} {{.Name}} {{.Phone}}	{{.Location}}	{{.Date.Format "2006-01-02"}}	{{.Total}} PLN	{{.Status}}
- {{template "order_info" .}} +
#{{.ID}}	{{.Surname}} {{.Name}} {{.Phone}}	{{.Date.Format "2006-01-02 15:04"}}	+ + {{range $i, $c := .Cakes}}{{if $i}}, {{end}}{{.Name}} (x{{.Amount}}){{end}} + +	{{.Total}} PLN	+ + {{if eq .Status "accepted"}}Przyjęte + {{else if eq .Status "done"}}Gotowe + {{else}}Oczekujące{{end}} + +	+ + edit +