diff --git a/CulinaryCommandApp/Components/App.razor b/CulinaryCommandApp/Components/App.razor
index 88e8715..7a8e5e8 100644
--- a/CulinaryCommandApp/Components/App.razor
+++ b/CulinaryCommandApp/Components/App.razor
@@ -26,9 +26,7 @@
     </CascadingAuthenticationState>
 
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
 
     <script src="_framework/blazor.server.js"></script>
 </body>
diff --git a/CulinaryCommandApp/Components/Custom/PrepTasksPanel.razor.css b/CulinaryCommandApp/Components/Custom/PrepTasksPanel.razor.css
index 67b2292..2156b14 100644
--- a/CulinaryCommandApp/Components/Custom/PrepTasksPanel.razor.css
+++ b/CulinaryCommandApp/Components/Custom/PrepTasksPanel.razor.css
@@ -65,8 +65,8 @@
     }
     
     .cc-check-circle.checked {
-        background: #22c55e;
-        border-color: #22c55e;
+        background: #009A3B;
+        border-color: #009A3B;
         box-shadow: inset 0 0 0 2px #ffffff;
     }
     
diff --git a/CulinaryCommandApp/Components/Layout/Welcome.razor.css b/CulinaryCommandApp/Components/Layout/Welcome.razor.css
index e031548..5a8a11e 100644
--- a/CulinaryCommandApp/Components/Layout/Welcome.razor.css
+++ b/CulinaryCommandApp/Components/Layout/Welcome.razor.css
@@ -20,7 +20,7 @@
 
 .nav-brand {
     font-weight: 700;
-    color: #16a34a;
+    color: #009A3B;
     padding-left: 8px;
 }
 
@@ -29,7 +29,7 @@
     gap: 8px;
     padding: 6px 8px;
     border-radius: 999px;
-    background: linear-gradient(135deg, #22c55e, #10b981);
+    background: linear-gradient(135deg, #009A3B, #009A3B);
 }
 
 .nav-pill a {
@@ -49,7 +49,7 @@
 }
 
 .hero-banner {
-    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);
+    background: linear-gradient(135deg, #e6f7ed 0%, #e6f7ed 50%, #e6f7ed 100%);
     border-radius: 20px;
     padding: 80px 60px;
     margin-bottom: 40px;
@@ -76,7 +76,7 @@
     gap: 8px;
     padding: 8px 16px;
     border-radius: 999px;
-    background: #10b981;
+    background: #009A3B;
     color: #ffffff;
     font-size: 0.75rem;
     font-weight: 600;
@@ -113,7 +113,7 @@
 }
 
 .hero-title-accent {
-    color: #10b981;
+    color: #009A3B;
     font-style: italic;
     font-weight: 800;
 }
@@ -133,7 +133,7 @@
 }
 
 .btn-primary {
-    background: #10b981;
+    background: #009A3B;
     color: #ffffff;
     padding: 16px 32px;
     border-radius: 12px;
@@ -150,7 +150,7 @@
 }
 
 .btn-primary:hover {
-    background: #059669;
+    background: #007a2f;
     transform: translateY(-2px);
     box-shadow: 0 14px 30px rgba(16, 185, 129, 0.40);
 }
@@ -172,9 +172,9 @@
 }
 
 .btn-secondary:hover {
-    border-color: #10b981;
-    background: #f0fdf4;
-    color: #10b981;
+    border-color: #009A3B;
+    background: #e6f7ed;
+    color: #009A3B;
 }
 
 .btn-secondary i {
@@ -224,8 +224,8 @@
 
 .overlay-stat i {
     font-size: 1.8rem;
-    color: #10b981;
-    background: #f0fdf4;
+    color: #009A3B;
+    background: #e6f7ed;
     padding: 12px;
     border-radius: 10px;
 }
@@ -245,7 +245,7 @@
 }
 
 .btn-cta {
-    background: #10b981;
+    background: #009A3B;
     color: #ffffff;
     padding: 10px 20px;
     border-radius: 999px;
@@ -258,13 +258,13 @@
 }
 
 .btn-cta:hover {
-    background: #059669;
+    background: #007a2f;
     transform: translateY(-1px);
 }
 
 .btn-ghost {
     color: #1f2937;
-    border: 2px solid #10b981;
+    border: 2px solid #009A3B;
     background: #ffffff;
     padding: 10px 20px;
     border-radius: 999px;
@@ -277,8 +277,8 @@
 }
 
 .btn-ghost:hover {
-    background: #f0fdf4;
-    border-color: #059669;
+    background: #e6f7ed;
+    border-color: #007a2f;
 }
 
 .welcome-section {
@@ -315,7 +315,7 @@
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-size: 0.75rem;
-    color: #16a34a;
+    color: #009A3B;
 }
 
 .section-header h2 {
@@ -351,7 +351,7 @@
     width: 64px;
     height: 64px;
     border-radius: 16px;
-    background: #ecfdf5;
+    background: #e6f7ed;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -360,7 +360,7 @@
 
 .feature-icon i {
     font-size: 28px;
-    color: #10b981;
+    color: #009A3B;
 }
 
 .feature-title {
@@ -381,7 +381,7 @@
 .feature-progress {
     width: 50px;
     height: 4px;
-    background: #10b981;
+    background: #009A3B;
     border-radius: 2px;
     margin-top: auto;
 }
@@ -421,7 +421,7 @@
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #10b981, #059669);
+    background: linear-gradient(135deg, #009A3B, #007a2f);
     color: #ffffff;
     display: flex;
     align-items: center;
@@ -434,7 +434,7 @@
     width: 80px;
     height: 80px;
     border-radius: 20px;
-    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
+    background: linear-gradient(135deg, #e6f7ed, #b3e6c8);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -443,7 +443,7 @@
 
 .step-icon i {
     font-size: 36px;
-    color: #10b981;
+    color: #009A3B;
 }
 
 .step-title {
@@ -490,7 +490,7 @@
 .pricing-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
-    border-color: #10b981;
+    border-color: #009A3B;
 }
 
 .pricing-header {
@@ -510,7 +510,7 @@
 .price {
     font-size: 3rem;
     font-weight: 800;
-    color: #10b981;
+    color: #009A3B;
     margin: 0;
     line-height: 1;
 }
@@ -539,13 +539,13 @@
 }
 
 .pricing-features i {
-    color: #10b981;
+    color: #009A3B;
     font-size: 1.125rem;
     flex-shrink: 0;
 }
 
 .pricing-card.featured {
-    border-color: #10b981;
+    border-color: #009A3B;
     box-shadow: 0 20px 50px rgba(16, 185, 129, 0.25);
     transform: scale(1.05);
 }
@@ -562,7 +562,7 @@
     display: inline-flex;
     padding: 6px 16px;
     border-radius: 999px;
-    background: linear-gradient(135deg, #10b981, #059669);
+    background: linear-gradient(135deg, #009A3B, #007a2f);
     color: #ffffff;
     font-size: 0.75rem;
     font-weight: 700;
@@ -595,14 +595,14 @@
 .faq-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
-    border-color: #10b981;
+    border-color: #009A3B;
 }
 
 .faq-icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
-    background: #ecfdf5;
+    background: #e6f7ed;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -611,7 +611,7 @@
 
 .faq-icon i {
     font-size: 24px;
-    color: #10b981;
+    color: #009A3B;
 }
 
 .faq-title {
@@ -634,8 +634,8 @@
     margin: 80px 60px 0 60px;
     padding: 80px 60px;
     border-radius: 24px;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
-    border: 4px solid #059669 !important;
+    background: linear-gradient(135deg, #009A3B 0%, #007a2f 100%) !important;
+    border: 4px solid #007a2f !important;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -709,7 +709,7 @@
 }
 
 .btn-link-green:hover {
-    color: #f0fdf4;
+    color: #e6f7ed;
 }
 
 .cta-notice {
@@ -754,7 +754,7 @@
 
 .footer-logo i {
     font-size: 1.5rem;
-    color: #10b981;
+    color: #009A3B;
 }
 
 .footer-tagline {
@@ -785,7 +785,7 @@
 }
 
 .footer-social a:hover {
-    background: #10b981;
+    background: #009A3B;
     color: #ffffff;
 }
 
@@ -821,7 +821,7 @@
 }
 
 .footer-column a:hover {
-    color: #10b981;
+    color: #009A3B;
 }
 
 .footer-column.newsletter p {
@@ -847,14 +847,14 @@
 }
 
 .newsletter-form input:focus {
-    border-color: #10b981;
+    border-color: #009A3B;
 }
 
 .newsletter-form button {
     width: 44px;
     height: 44px;
     border-radius: 8px;
-    background: #10b981;
+    background: #009A3B;
     color: #ffffff;
     border: none;
     display: flex;
@@ -865,7 +865,7 @@
 }
 
 .newsletter-form button:hover {
-    background: #059669;
+    background: #007a2f;
 }
 
 .footer-bottom {
@@ -899,7 +899,7 @@
 }
 
 .footer-legal a:hover {
-    color: #10b981;
+    color: #009A3B;
 }
 
 @media (max-width: 900px) {
diff --git a/CulinaryCommandApp/Components/Pages/AdminView.razor b/CulinaryCommandApp/Components/Pages/AdminView.razor
index f32f9d0..0f9e401 100644
--- a/CulinaryCommandApp/Components/Pages/AdminView.razor
+++ b/CulinaryCommandApp/Components/Pages/AdminView.razor
@@ -2,43 +2,4 @@
 <div class="admin-dashboard">
     <PageTitle>Dashboard</PageTitle>
 
-<div class="container mt-4">
-    <div class="row g-5">
-        <div class="col-12 col-md-6">
-            <DashboardCard Title="Prep Items Needing Attention" Value="5 items" Color="#ffc107"
-                IconClass="bi bi-exclamation-triangle" Link="/prep" />
-            <DashboardCard Title="Orders Pending Approval" Value="3 orders" Color="#688f72"
-                IconClass="bi bi-file-earmark-check" Link="/orders" />
-            <DashboardCard Title="Daily Summaries / Reports" Value="1" Color="#883ae1" IconClass="bi bi-file-text"
-                Link="/reports" />
-        </div>
-        <div class="col-12 col-md-6">
-            <DashboardCard Title="Active Tasks by Employee" Value="6 tasks" Color="#3662e3" IconClass="bi bi-people"
-                Link="/tasks" />
-            <DashboardCard Title="Low Stock Ingredients" Value="2" Color="#ca3a31" IconClass="bi bi-box-seam"
-                Link="/inventory-management" />
-            <DashboardCard Title="Manage Employees" Value="35" Color="#e28743" IconClass="bi bi-person-gear"
-                Link="/employees" />
-        </div>
-    </div>
-
-    <div class="row g-5">
-        <div class="col-12">
-            <div class="card shadow d-flex flex-column py-3 px-4 mb-5">
-                <p class="fs-5 fw-semibold mb-3">Recent Activity</p>
-                <div class="activity-list">
-                    <ActivityCard Title="Sarah assigned 3 new prep tasks to kitchen staff" TimeInfo="10 minutes ago"
-                        IconClass="bi bi-people" />
-                    <ActivityCard Title="New order #1234 received from Table 7" TimeInfo="35 minutes ago"
-                        IconClass="bi bi-file-earmark-check" />
-                    <ActivityCard Title="Inventory alert: Tomatoes below threshold" TimeInfo="1 hour ago"
-                        IconClass="bi bi-box-seam" />
-                </div>
-
-            </div>
-        </div>
-    </div>
-
 </div>
-</div>
-
diff --git a/CulinaryCommandApp/Components/Pages/Dashboard.razor b/CulinaryCommandApp/Components/Pages/Dashboard.razor
index a50c2ca..b251589 100644
--- a/CulinaryCommandApp/Components/Pages/Dashboard.razor
+++ b/CulinaryCommandApp/Components/Pages/Dashboard.razor
@@ -6,8 +6,11 @@
 @using CulinaryCommandApp.AIDashboard.Services.Reporting
 @using CulinaryCommandApp.AIDashboard.Services.DTOs
 @using CulinaryCommand.Services
+@using CulinaryCommandApp.Inventory.DTOs
+@using CulinaryCommandApp.Data.Models
 @inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment Env
 @inject NavigationManager Nav
+@inject LocationState LocationState
 @inject AIReportingService ReportingService
 @inject IUserContextService UserCtx
 
@@ -24,7 +27,32 @@ else if (!_isSignedIn)
 }
 else
 {
-    <div class="container mt-4">
+    <div class="container-fluid px-3 px-lg-4 mt-4">
+        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
+            <div>
+                <div class="text-uppercase text-muted small fw-semibold mb-1">Kitchen Operations</div>
+                <h1 class="fw-bold mb-1">Dashboard</h1>
+                <p class="text-muted mb-0">Overview of your kitchen operations, tasks, and inventory at a glance.</p>
+            </div>
+            <div class="d-flex align-items-center gap-3">
+                <div class="text-end">
+                    <div class="small text-muted fw-semibold">Location</div>
+                    <div class="fw-semibold">@(LocationState.CurrentLocation?.Name ?? "—")</div>
+                </div>
+                <div class="vr d-none d-md-block"></div>
+                <div class="d-flex gap-3">
+                    <div>
+                        <div class="text-muted small">Low Stock</div>
+                        <div class="fs-5 fw-semibold">@_lowStockItems.Count</div>
+                    </div>
+                    <div>
+                        <div class="text-muted small">Open Tasks</div>
+                        <div class="fs-5 fw-semibold">@_taskData.Count(t => !string.Equals(t.Status, "Completed", StringComparison.OrdinalIgnoreCase))</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         @if (_role == "Admin")
         {
             <AdminView />
@@ -144,6 +172,9 @@ else
     private bool _isSignedIn;
     private string? _role;
 
+    private List<InventoryItemDTO> _lowStockItems = new();
+    private List<TaskAssignmentModel> _taskData = new();
+
     private bool _aiLoading;
     private string? _aiAnalysis;
     private AIAnalysisResultDTO? _aiAnalysisObj;
diff --git a/CulinaryCommandApp/Components/Pages/Home.Tworazor.css b/CulinaryCommandApp/Components/Pages/Home.Tworazor.css
index dda652e..d898040 100644
--- a/CulinaryCommandApp/Components/Pages/Home.Tworazor.css
+++ b/CulinaryCommandApp/Components/Pages/Home.Tworazor.css
@@ -29,7 +29,7 @@
     width: 12px;
     height: 12px;
     border-radius: 999px;
-    background: linear-gradient(135deg, #22c55e, #10b981);
+    background: linear-gradient(135deg, #009A3B, #009A3B);
     box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
 }
 
@@ -51,7 +51,7 @@
 }
 
 .nav-cta {
-    background: #22c55e;
+    background: #009A3B;
     color: #0d1210;
     padding: 10px 18px;
     border-radius: 999px;
@@ -105,7 +105,7 @@
     display: block;
     font-family: "Source Sans 3", sans-serif;
     font-size: clamp(2.2rem, 4.3vw, 3.8rem);
-    color: #22c55e;
+    color: #009A3B;
 }
 
 .hero-card p {
@@ -122,7 +122,7 @@
 }
 
 .btn-primary {
-    background: #22c55e;
+    background: #009A3B;
     color: #0d1210;
     padding: 12px 20px;
     border-radius: 999px;
@@ -151,7 +151,7 @@
 }
 
 .btn-ghost:hover {
-    color: #22c55e;
+    color: #009A3B;
     border-color: rgba(34, 197, 94, 0.8);
 }
 
@@ -294,7 +294,7 @@
 
 .feature-card i {
     font-size: 1.6rem;
-    color: #22c55e;
+    color: #009A3B;
     margin-bottom: 10px;
     display: inline-block;
 }
@@ -302,7 +302,7 @@
 .step-number {
     font-size: 0.9rem;
     font-weight: 700;
-    color: #22c55e;
+    color: #009A3B;
     letter-spacing: 0.1em;
 }
 
@@ -343,7 +343,7 @@
     padding: 4px 10px;
     border-radius: 999px;
     background: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
+    color: #009A3B;
     font-size: 0.75rem;
     margin-bottom: 8px;
 }
diff --git a/CulinaryCommandApp/Components/Pages/Users/Index.razor b/CulinaryCommandApp/Components/Pages/Users/Index.razor
index ba7179a..2eb1cc5 100644
--- a/CulinaryCommandApp/Components/Pages/Users/Index.razor
+++ b/CulinaryCommandApp/Components/Pages/Users/Index.razor
@@ -2,6 +2,4 @@
 @using CulinaryCommand.Data.Entities
 @rendermode InteractiveServer
 
-<h3>Manage Users</h3>
-
 <UserList />
\ No newline at end of file
diff --git a/CulinaryCommandApp/Components/Pages/Users/UserList.razor b/CulinaryCommandApp/Components/Pages/Users/UserList.razor
index 6122815..ef21ce9 100644
--- a/CulinaryCommandApp/Components/Pages/Users/UserList.razor
+++ b/CulinaryCommandApp/Components/Pages/Users/UserList.razor
@@ -10,17 +10,35 @@
 @inject LocationState LocationState
 @inject NavigationManager Nav
 
-<div class="users-head">
+<div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
     <div>
-        <div class="text-muted users-sub">Invite teammates and manage access per location.</div>
+        <div class="text-uppercase text-muted small fw-semibold mb-1">Kitchen Operations</div>
+        <h1 class="fw-bold mb-1">Manage Users</h1>
+        <p class="text-muted mb-0">Invite teammates and manage access per location.</p>
+    </div>
+    <div class="d-flex align-items-center gap-3">
+        <div class="text-end">
+            <div class="small text-muted fw-semibold">Location</div>
+            <div class="fw-semibold">@(LocationState.CurrentLocation?.Name ?? "—")</div>
+        </div>
+        <div class="vr d-none d-md-block"></div>
+        <div class="d-flex gap-3">
+            <div>
+                <div class="text-muted small">Total Users</div>
+                <div class="fs-5 fw-semibold">@(_users?.Count ?? 0)</div>
+            </div>
+            <div>
+                <div class="text-muted small">Active</div>
+                <div class="fs-5 fw-semibold">@(_users?.Count(u => u.IsActive) ?? 0)</div>
+            </div>
+        </div>
+        @if (priv)
+        {
+            <button class="btn btn-success" @onclick="CreateUser">
+                <i class="bi bi-plus-lg me-1"></i> Add User
+            </button>
+        }
     </div>
-
-    @if (priv)
-    {
-        <button class="btn btn-success users-add" @onclick="CreateUser">
-            <i class="bi bi-plus-lg me-1"></i> Add User
-        </button>
-    }
 </div>
 
 @if (_users == null)
diff --git a/CulinaryCommandApp/Components/Pages/Users/UserList.razor.css b/CulinaryCommandApp/Components/Pages/Users/UserList.razor.css
index aa19686..6f38829 100644
--- a/CulinaryCommandApp/Components/Pages/Users/UserList.razor.css
+++ b/CulinaryCommandApp/Components/Pages/Users/UserList.razor.css
@@ -1,3 +1,5 @@
+h1 { margin: 0 0 4px; }
+
 .users-acc { padding: 4px; }
 .users-acc-item{
     border-radius: 14px;
diff --git a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryCatalog.razor.css b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryCatalog.razor.css
index c676ba5..b448985 100644
--- a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryCatalog.razor.css
+++ b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryCatalog.razor.css
@@ -1,23 +1,9 @@
-:root {
-    --ink: #1f2a37;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --bg: #f6f7f9;
-    --card: #ffffff;
-    --green: #0a8f3c;
-    --green-dark: #087136;
-    --pill: #f0f2f5;
-    --shadow: 0 10px 30px rgba(31, 42, 55, 0.08);
-}
-
 .inventory-container {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 24px 24px 40px;
-    background: var(--bg);
+    padding: 24px 0 40px;
+    background: var(--cc-bg);
     min-height: 100vh;
     font-family: "Source Sans 3", "Segoe UI", sans-serif;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .inventory-container button,
@@ -54,11 +40,11 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
     padding: 16px 18px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     margin-bottom: 14px;
 }
 
@@ -68,14 +54,14 @@
     gap: 10px;
     flex: 2 1 520px;
     background: #f9fafb;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     border-radius: 12px;
     padding: 10px 14px;
     min-width: 360px;
 }
 
 .search-bar i {
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .search-bar input {
@@ -97,20 +83,20 @@
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    border: 1px solid var(--green);
-    background: var(--green);
+    border: 1px solid var(--cc-green);
+    background: var(--cc-green);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--ink);
+    color: #ffffff;
     transition: all 0.2s ease;
     font-weight: 600;
 }
 
 .icon-btn:hover {
-    color: var(--ink);
-    border-color: var(--green-dark);
-    background: var(--green-dark);
+    color: #ffffff;
+    border-color: var(--cc-green-dark);
+    background: var(--cc-green-dark);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25);
 }
 
@@ -120,15 +106,15 @@
 
 .select-wrap .form-select {
     border-radius: 10px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     padding: 8px 30px 8px 12px;
     font-size: 0.9rem;
     background-color: #ffffff;
 }
 
 .btn-add {
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: #ffffff;
     border: none;
     padding: 9px 14px;
     border-radius: 10px;
@@ -141,7 +127,8 @@
 }
 
 .btn-add:hover {
-    background: var(--green-dark);
+    background: var(--cc-green-dark);
+    color: #ffffff;
     transform: translateY(-1px);
 }
 
@@ -153,35 +140,35 @@
 }
 
 .tab-btn {
-    border: 1px solid var(--green);
+    border: 1px solid var(--cc-green);
     background: #ffffff;
     padding: 8px 14px;
     border-radius: 999px;
     font-weight: 600;
     font-size: 0.9rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.2s ease;
 }
 
 .tab-btn:hover {
-    background: var(--green);
+    background: var(--cc-green);
     color: #ffffff;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.2);
 }
 
 .tab-btn.active {
-    background: var(--green);
-    color: var(--ink);
-    border-color: var(--green);
+    background: var(--cc-green);
+    color: #ffffff;
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.25);
 }
 
 .inventory-table-container {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     overflow: hidden;
 }
 
@@ -212,7 +199,7 @@
 }
 
 .inventory-table tbody tr {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
     background: #ffffff;
 }
 
@@ -237,12 +224,12 @@
 
 .name-cell .item-name {
     font-weight: 600;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .name-cell .item-sku {
     font-size: 0.78rem;
-    color: var(--muted);
+    color: var(--cc-muted);
     margin-top: 2px;
 }
 
@@ -387,7 +374,7 @@
 }
 
 .footer-count {
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.85rem;
 }
 
@@ -402,7 +389,7 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid #d1fae5;
+    border: 1px solid #b3e6c8;
     background: #ffffff;
     display: inline-flex;
     align-items: center;
@@ -430,7 +417,7 @@
 
 .page-ellipsis {
     padding: 0 6px;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 /* Modal */
@@ -458,15 +445,15 @@
 .modal-content-custom {
     background: #ffffff;
     border-radius: 18px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     overflow: hidden;
-    box-shadow: var(--shadow);
+    box-shadow: var(--cc-shadow);
 }
 
 .modal-header-custom {
     padding: 18px 22px;
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: var(--cc-ink);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -480,7 +467,7 @@
 .btn-close-custom {
     border: none;
     background: rgba(31, 42, 55, 0.1);
-    color: var(--ink);
+    color: var(--cc-ink);
     width: 32px;
     height: 32px;
     border-radius: 10px;
@@ -496,7 +483,7 @@
 .modal-body-custom label {
     display: block;
     font-weight: 700;
-    color: var(--ink);
+    color: var(--cc-ink);
     margin-bottom: 8px;
     font-size: 0.95rem;
 }
@@ -507,13 +494,13 @@
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 0.95rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     background-color: #ffffff;
 }
 
 .modal-body-custom .form-control:focus,
 .modal-body-custom .form-select:focus {
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 0 0 3px rgba(10, 143, 60, 0.1);
     outline: none;
 }
@@ -524,7 +511,7 @@
     display: flex;
     justify-content: flex-end;
     gap: 10px;
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--cc-border);
 }
 
 .modal-footer-custom .btn {
@@ -536,7 +523,7 @@
 .modal-footer-custom .btn-secondary {
     background: #e5e7eb;
     border-color: #e5e7eb;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .modal-footer-custom .btn-secondary:hover {
@@ -545,15 +532,15 @@
 }
 
 .modal-footer-custom .btn-success {
-    background: var(--green);
-    border-color: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
+    color: #ffffff;
 }
 
 .modal-footer-custom .btn-success:hover {
-    background: var(--green-dark);
-    border-color: var(--green-dark);
-    color: var(--ink);
+    background: var(--cc-green-dark);
+    border-color: var(--cc-green-dark);
+    color: #ffffff;
 }
 
 /* Loading Spinner */
@@ -561,7 +548,7 @@
     width: 3rem;
     height: 3rem;
     border-width: 0.3rem;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     border-right-color: transparent;
     animation: spin 0.8s linear infinite;
 }
diff --git a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css
index c7ed0cf..b791440 100644
--- a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css
+++ b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css
@@ -1,23 +1,11 @@
-:root {
-    --ink: #1f2a37;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --bg: #f6f7f9;
-    --card: #ffffff;
-    --green: #0a8f3c;
-    --green-dark: #087136;
-    --pill: #f0f2f5;
-    --shadow: 0 10px 30px rgba(31, 42, 55, 0.08);
-}
-
 .inventory-container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 24px 24px 40px;
-    background: var(--bg);
+    background: var(--cc-bg);
     min-height: 100vh;
     font-family: "Source Sans 3", "Segoe UI", sans-serif;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .inventory-container button,
@@ -28,11 +16,11 @@
 }
 
 .inventory-header {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
     padding: 22px 26px;
-    box-shadow: var(--shadow);
-    border: 1px solid var(--border);
+    box-shadow: var(--cc-shadow);
+    border: 1px solid var(--cc-border);
     margin-bottom: 18px;
 }
 
@@ -44,7 +32,7 @@
 
 .header-text p {
     margin: 0;
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.95rem;
 }
 
@@ -54,11 +42,11 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
     padding: 16px 18px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     margin-bottom: 14px;
 }
 
@@ -68,14 +56,14 @@
     gap: 10px;
     flex: 2 1 520px;
     background: #f9fafb;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     border-radius: 12px;
     padding: 10px 14px;
     min-width: 360px;
 }
 
 .search-bar i {
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .search-bar input {
@@ -97,27 +85,27 @@
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    border: 1px solid var(--green);
-    background: var(--green);
+    border: 1px solid var(--cc-green);
+    background: var(--cc-green);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.2s ease;
     font-weight: 600;
 }
 
 .icon-btn:hover {
-    color: var(--ink);
-    border-color: var(--green-dark);
-    background: var(--green-dark);
+    color: var(--cc-ink);
+    border-color: var(--cc-green-dark);
+    background: var(--cc-green-dark);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25);
 }
 
 .icon-btn.selected,
 .icon-btn.active {
-    background: var(--green);
-    border-color: var(--green);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.3);
 }
 
@@ -127,15 +115,15 @@
 
 .select-wrap .form-select {
     border-radius: 10px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     padding: 8px 30px 8px 12px;
     font-size: 0.9rem;
     background-color: #ffffff;
 }
 
 .btn-add {
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: var(--cc-ink);
     border: none;
     padding: 9px 14px;
     border-radius: 10px;
@@ -148,7 +136,7 @@
 }
 
 .btn-add:hover {
-    background: var(--green-dark);
+    background: var(--cc-green-dark);
     transform: translateY(-1px);
 }
 
@@ -160,36 +148,36 @@
 }
 
 .tab-btn {
-    border: 1px solid var(--green);
+    border: 1px solid var(--cc-green);
     background: #ffffff;
     padding: 8px 14px;
     border-radius: 999px;
     font-weight: 600;
     font-size: 0.9rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.2s ease;
 }
 
 .tab-btn:hover {
-    background: var(--green);
+    background: var(--cc-green);
     color: #ffffff;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.2);
 }
 
 .tab-btn.active,
 .tab-btn.selected {
-    background: var(--green);
-    color: var(--ink);
-    border-color: var(--green);
+    background: var(--cc-green);
+    color: var(--cc-ink);
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.25);
 }
 
 .inventory-table-container {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     overflow: hidden;
 }
 
@@ -200,8 +188,8 @@
 }
 
 .inventory-table thead {
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: var(--cc-ink);
 }
 
 .inventory-table thead th {
@@ -220,7 +208,7 @@
 }
 
 .inventory-table tbody tr {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
     background: #ffffff;
 }
 
@@ -244,12 +232,12 @@
 
 .name-cell .item-name {
     font-weight: 600;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .name-cell .item-sku {
     font-size: 0.78rem;
-    color: var(--muted);
+    color: var(--cc-muted);
     margin-top: 2px;
 }
 
@@ -260,7 +248,7 @@
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 700;
-    background: var(--pill);
+    background: var(--cc-pill);
     color: #1f2a37;
 }
 
@@ -280,7 +268,7 @@
 }
 
 .category-vegetables {
-    background: #22c55e;
+    background: #009A3B;
     color: #fafafa;
 }
 
@@ -330,13 +318,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.2s ease;
     font-weight: 600;
 }
 
 .btn-action:hover {
-    color: var(--ink);
+    color: var(--cc-ink);
     border-color: #9ca3af;
     background: #e5e7eb;
     transform: translateY(-1px);
@@ -346,11 +334,11 @@
 .btn-action.delete {
     background: #ef4444;
     border-color: #ef4444;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .btn-action.delete:hover {
-    color: var(--ink);
+    color: var(--cc-ink);
     border-color: #dc2626;
     background: #dc2626;
     box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
@@ -358,9 +346,9 @@
 
 .btn-action.selected,
 .btn-action.active {
-    background: var(--green);
-    border-color: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
+    color: var(--cc-ink);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.3);
 }
 
@@ -368,7 +356,7 @@
 .btn-action.delete.active {
     background: #dc2626;
     border-color: #dc2626;
-    color: var(--ink);
+    color: var(--cc-ink);
     box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
 }
 
@@ -381,7 +369,7 @@
 }
 
 .footer-count {
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.85rem;
 }
 
@@ -396,12 +384,12 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid #d1fae5;
+    border: 1px solid #b3e6c8;
     background: #ffffff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--green);
+    color: var(--cc-green);
     font-size: 0.85rem;
     font-weight: 600;
     transition: all 0.2s ease;
@@ -409,23 +397,23 @@
 
 .page-btn:hover,
 .page-nav:hover {
-    background: var(--green);
+    background: var(--cc-green);
     color: #ffffff;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25);
 }
 
 .page-btn.active,
 .page-btn.selected {
-    background: var(--green);
-    border-color: var(--green);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
     color: #ffffff;
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25);
 }
 
 .page-ellipsis {
     padding: 0 6px;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 /* Modal */
@@ -453,15 +441,15 @@
 .modal-content-custom {
     background: #ffffff;
     border-radius: 18px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     overflow: hidden;
-    box-shadow: var(--shadow);
+    box-shadow: var(--cc-shadow);
 }
 
 .modal-header-custom {
     padding: 18px 22px;
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: var(--cc-ink);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -475,7 +463,7 @@
 .btn-close-custom {
     border: none;
     background: rgba(31, 42, 55, 0.1);
-    color: var(--ink);
+    color: var(--cc-ink);
     width: 32px;
     height: 32px;
     border-radius: 10px;
@@ -491,7 +479,7 @@
 .modal-body-custom label {
     display: block;
     font-weight: 700;
-    color: var(--ink);
+    color: var(--cc-ink);
     margin-bottom: 8px;
     font-size: 0.95rem;
 }
@@ -502,13 +490,13 @@
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 0.95rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     background-color: #ffffff;
 }
 
 .modal-body-custom .form-control:focus,
 .modal-body-custom .form-select:focus {
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 0 0 3px rgba(10, 143, 60, 0.1);
     outline: none;
 }
@@ -519,7 +507,7 @@
     display: flex;
     justify-content: flex-end;
     gap: 10px;
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--cc-border);
 }
 
 .modal-footer-custom .btn {
@@ -531,7 +519,7 @@
 .modal-footer-custom .btn-secondary {
     background: #e5e7eb;
     border-color: #e5e7eb;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .modal-footer-custom .btn-secondary:hover {
@@ -540,15 +528,15 @@
 }
 
 .modal-footer-custom .btn-success {
-    background: var(--green);
-    border-color: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
+    color: var(--cc-ink);
 }
 
 .modal-footer-custom .btn-success:hover {
-    background: var(--green-dark);
-    border-color: var(--green-dark);
-    color: var(--ink);
+    background: var(--cc-green-dark);
+    border-color: var(--cc-green-dark);
+    color: var(--cc-ink);
 }
 
 /* Loading Spinner */
@@ -556,7 +544,7 @@
     width: 3rem;
     height: 3rem;
     border-width: 0.3rem;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     border-right-color: transparent;
     animation: spin 0.8s linear infinite;
 }
diff --git a/CulinaryCommandApp/PurchaseOrder/Pages/PurchaseOrderList.razor b/CulinaryCommandApp/PurchaseOrder/Pages/PurchaseOrderList.razor
index a07856a..caff213 100644
--- a/CulinaryCommandApp/PurchaseOrder/Pages/PurchaseOrderList.razor
+++ b/CulinaryCommandApp/PurchaseOrder/Pages/PurchaseOrderList.razor
@@ -1,14 +1,37 @@
 @inject NavigationManager Nav
 @inject IJSRuntime Js
 @inject CulinaryCommand.Data.AppDbContext Db
+@inject LocationState LocationState
 @using Microsoft.EntityFrameworkCore
 @rendermode InteractiveServer
 
-<h3 class="mb-3">Purchase Orders</h3>
-
-<button type="button" class="btn btn-success mb-3" @onclick="AddNew">
-    <i class="bi bi-plus-circle"></i> Create Purchase Order
-</button>
+<div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
+    <div>
+        <div class="text-uppercase text-muted small fw-semibold mb-1">Kitchen Operations</div>
+        <h1 class="fw-bold mb-1">Purchase Orders</h1>
+        <p class="text-muted mb-0">Create and track purchase orders for your location's suppliers.</p>
+    </div>
+    <div class="d-flex align-items-center gap-3">
+        <div class="text-end">
+            <div class="small text-muted fw-semibold">Location</div>
+            <div class="fw-semibold">@(LocationState.CurrentLocation?.Name ?? "—")</div>
+        </div>
+        <div class="vr d-none d-md-block"></div>
+        <div class="d-flex gap-3">
+            <div>
+                <div class="text-muted small">Total</div>
+                <div class="fs-5 fw-semibold">@(items?.Count ?? 0)</div>
+            </div>
+            <div>
+                <div class="text-muted small">Pending</div>
+                <div class="fs-5 fw-semibold">@(items?.Count(o => o.Status == "Pending") ?? 0)</div>
+            </div>
+        </div>
+        <button type="button" class="btn btn-success" @onclick="AddNew">
+            <i class="bi bi-plus-circle me-1"></i> Create Order
+        </button>
+    </div>
+</div>
 
 @if (items == null)
 {
diff --git a/CulinaryCommandApp/Recipe/Pages/RecipeList.razor b/CulinaryCommandApp/Recipe/Pages/RecipeList.razor
index 0ca866d..2df8b31 100644
--- a/CulinaryCommandApp/Recipe/Pages/RecipeList.razor
+++ b/CulinaryCommandApp/Recipe/Pages/RecipeList.razor
@@ -26,10 +26,28 @@ else
     <div class="recipes-container">
 
         @* ── Header ── *@
-        <div class="recipes-header">
-            <div class="header-text">
-                <h1>Recipes</h1>
-                <p>Manage your location's recipes and prep items</p>
+        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
+            <div>
+                <div class="text-uppercase text-muted small fw-semibold mb-1">Kitchen Operations</div>
+                <h1 class="fw-bold mb-1">Recipes</h1>
+                <p class="text-muted mb-0">Manage your location's recipes and prep items.</p>
+            </div>
+            <div class="d-flex align-items-center gap-3">
+                <div class="text-end">
+                    <div class="small text-muted fw-semibold">Location</div>
+                    <div class="fw-semibold">@(LocationState.CurrentLocation?.Name ?? "—")</div>
+                </div>
+                <div class="vr d-none d-md-block"></div>
+                <div class="d-flex gap-3">
+                    <div>
+                        <div class="text-muted small">Total</div>
+                        <div class="fs-5 fw-semibold">@_allRecipes.Count</div>
+                    </div>
+                    <div>
+                        <div class="text-muted small">Sub-Recipes</div>
+                        <div class="fs-5 fw-semibold">@_allRecipes.Count(r => r.IsSubRecipe)</div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -140,7 +158,7 @@ else
                                     <td>
                                         @if (!string.IsNullOrWhiteSpace(recipe.Category))
                                         {
-                                            <span class="category-pill">@recipe.Category</span>
+                                            <span class="category-pill @GetCategoryClass(recipe.Category)">@recipe.Category</span>
                                         }
                                         else
                                         {
@@ -418,6 +436,18 @@ else
         return _sortAsc ? "bi-chevron-up" : "bi-chevron-down";
     }
 
+    private string GetCategoryClass(string? category) => category switch
+    {
+        "Produce"    => "category-produce",
+        "Dairy"      => "category-dairy",
+        "Meat"       => "category-meat",
+        "Dry Goods"  => "category-dry-goods",
+        "Beverages"  => "category-beverages",
+        "Condiments" => "category-condiments",
+        "Spices"     => "category-spices",
+        _            => "category-default"
+    };
+
     private void GoToPage(int page)
     {
         if (page < 1 || page > _totalPages) return;
diff --git a/CulinaryCommandApp/Recipe/Pages/RecipeList.razor.css b/CulinaryCommandApp/Recipe/Pages/RecipeList.razor.css
index a9d2787..9d79a8d 100644
--- a/CulinaryCommandApp/Recipe/Pages/RecipeList.razor.css
+++ b/CulinaryCommandApp/Recipe/Pages/RecipeList.razor.css
@@ -1,25 +1,11 @@
-:root {
-    --ink: #1f2a37;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --bg: #f6f7f9;
-    --card: #ffffff;
-    --green: #0a8f3c;
-    --green-dark: #087136;
-    --pill: #f0f2f5;
-    --shadow: 0 10px 30px rgba(31, 42, 55, 0.08);
-}
-
 /* ── Layout ──────────────────────────────────────────────────────────────── */
 
 .recipes-container {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 24px 24px 40px;
-    background: var(--bg);
+    padding: 24px 0 40px;
+    background: var(--cc-bg);
     min-height: 100vh;
     font-family: "Source Sans 3", "Segoe UI", sans-serif;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .recipes-container button,
@@ -31,27 +17,10 @@
 
 /* ── Header ──────────────────────────────────────────────────────────────── */
 
-.recipes-header {
-    background: var(--card);
-    border-radius: 16px;
-    padding: 22px 26px;
-    box-shadow: var(--shadow);
-    border: 1px solid var(--border);
-    margin-bottom: 18px;
-}
-
-.header-text h1 {
-    font-family: "Space Grotesk", "Source Sans 3", sans-serif;
-    font-size: 1.6rem;
+.recipes-container h1 {
     margin: 0 0 4px;
 }
 
-.header-text p {
-    margin: 0;
-    color: var(--muted);
-    font-size: 0.95rem;
-}
-
 /* ── Toolbar ─────────────────────────────────────────────────────────────── */
 
 .recipes-toolbar {
@@ -60,11 +29,11 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
     padding: 16px 18px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     margin-bottom: 14px;
 }
 
@@ -74,14 +43,14 @@
     gap: 10px;
     flex: 2 1 400px;
     background: #f9fafb;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     border-radius: 12px;
     padding: 10px 14px;
     min-width: 280px;
 }
 
 .search-bar i {
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .search-bar input {
@@ -103,33 +72,33 @@
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    border: 1px solid var(--green);
-    background: var(--green);
+    border: 1px solid var(--cc-green);
+    background: var(--cc-green);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--ink);
+    color: #ffffff;
     transition: all 0.2s ease;
     font-weight: 600;
 }
 
 .icon-btn:hover {
-    background: var(--green-dark);
-    border-color: var(--green-dark);
+    background: var(--cc-green-dark);
+    border-color: var(--cc-green-dark);
     box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25);
 }
 
 .select-wrap .form-select {
     border-radius: 10px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     padding: 8px 30px 8px 12px;
     font-size: 0.9rem;
     background-color: #ffffff;
 }
 
 .btn-add {
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: #ffffff;
     border: none;
     padding: 9px 14px;
     border-radius: 10px;
@@ -142,7 +111,8 @@
 }
 
 .btn-add:hover {
-    background: var(--green-dark);
+    background: var(--cc-green-dark);
+    color: #ffffff;
     transform: translateY(-1px);
 }
 
@@ -156,37 +126,37 @@
 }
 
 .tab-btn {
-    border: 1px solid var(--green);
+    border: 1px solid var(--cc-green);
     background: #ffffff;
     padding: 8px 14px;
     border-radius: 999px;
     font-weight: 600;
     font-size: 0.9rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.2s ease;
 }
 
 .tab-btn:hover {
-    background: var(--green);
+    background: var(--cc-green);
     color: #ffffff;
-    border-color: var(--green);
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.2);
 }
 
 .tab-btn.active {
-    background: var(--green);
-    color: var(--ink);
-    border-color: var(--green);
+    background: var(--cc-green);
+    color: #ffffff;
+    border-color: var(--cc-green);
     box-shadow: 0 4px 12px rgba(10, 143, 60, 0.25);
 }
 
 /* ── Table ───────────────────────────────────────────────────────────────── */
 
 .recipes-table-container {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     overflow: hidden;
 }
 
@@ -197,8 +167,8 @@
 }
 
 .recipes-table thead {
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: #ffffff;
 }
 
 .recipes-table thead th {
@@ -218,7 +188,7 @@
 }
 
 .recipes-table tbody tr {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
     background: #ffffff;
 }
 
@@ -239,7 +209,7 @@
 
 .name-cell .item-name {
     font-weight: 600;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .category-pill {
@@ -249,8 +219,8 @@
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 700;
-    background: var(--pill);
-    color: var(--ink);
+    background: var(--cc-pill);
+    color: var(--cc-ink);
 }
 
 .cost-badge {
@@ -260,7 +230,7 @@
     border-radius: 8px;
     font-size: 0.82rem;
     font-weight: 700;
-    background: #dcfce7;
+    background: #c8efd9;
     color: #166534;
 }
 
@@ -287,19 +257,19 @@
     width: 30px;
     height: 30px;
     border-radius: 8px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     background: #ffffff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.85rem;
     transition: all 0.15s ease;
 }
 
 .btn-action:hover {
     background: #f3f4f6;
-    color: var(--ink);
+    color: var(--cc-ink);
     border-color: #d1d5db;
 }
 
@@ -318,13 +288,13 @@
 
 .empty-icon {
     font-size: 2.5rem;
-    color: var(--muted);
+    color: var(--cc-muted);
     display: block;
     margin-bottom: 12px;
 }
 
 .empty-state p {
-    color: var(--muted);
+    color: var(--cc-muted);
     margin-bottom: 16px;
 }
 
@@ -335,14 +305,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 14px 18px;
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--cc-border);
     flex-wrap: wrap;
     gap: 10px;
 }
 
 .footer-count {
     font-size: 0.88rem;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .pagination {
@@ -356,26 +326,26 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     background: #ffffff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.85rem;
-    color: var(--ink);
+    color: var(--cc-ink);
     transition: all 0.15s ease;
 }
 
 .page-nav:hover,
 .page-btn:hover {
-    background: var(--green);
-    border-color: var(--green);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
     color: #ffffff;
 }
 
 .page-btn.active {
-    background: var(--green);
-    border-color: var(--green);
+    background: var(--cc-green);
+    border-color: var(--cc-green);
     color: #ffffff;
     font-weight: 700;
 }
@@ -386,6 +356,17 @@
 }
 
 .page-ellipsis {
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.85rem;
 }
+
+/* ── Category pill colors ────────────────────────────────────────────────── */
+
+.category-produce    { background: #009A3B; color: #ffffff; }
+.category-dairy      { background: #7c3aed; color: #ffffff; }
+.category-meat       { background: #dc2626; color: #ffffff; }
+.category-dry-goods  { background: #d97706; color: #ffffff; }
+.category-beverages  { background: #0891b2; color: #ffffff; }
+.category-condiments { background: #ea580c; color: #ffffff; }
+.category-spices     { background: #b45309; color: #ffffff; }
+.category-default    { background: #6b7280; color: #ffffff; }
diff --git a/CulinaryCommandApp/Recipe/Pages/RecipeView.razor.css b/CulinaryCommandApp/Recipe/Pages/RecipeView.razor.css
index 0291ff2..6837e9b 100644
--- a/CulinaryCommandApp/Recipe/Pages/RecipeView.razor.css
+++ b/CulinaryCommandApp/Recipe/Pages/RecipeView.razor.css
@@ -1,13 +1,3 @@
-:root {
-    --ink: #1f2a37;
-    --muted: #6b7280;
-    --border: #e5e7eb;
-    --bg: #f6f7f9;
-    --card: #ffffff;
-    --green: #0a8f3c;
-    --shadow: 0 10px 30px rgba(31, 42, 55, 0.08);
-}
-
 /* ── Layout ─────────────────────────────────────────────────────────────── */
 
 .rv-container {
@@ -15,18 +5,18 @@
     margin: 0 auto;
     padding: 24px 24px 48px;
     font-family: "Source Sans 3", "Segoe UI", sans-serif;
-    color: var(--ink);
-    background: var(--bg);
+    color: var(--cc-ink);
+    background: var(--cc-bg);
     min-height: 100vh;
 }
 
 /* ── Header card ─────────────────────────────────────────────────────────── */
 
 .rv-header-card {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     padding: 24px 28px;
     margin-bottom: 20px;
     display: flex;
@@ -55,7 +45,7 @@
     font-size: 1.75rem;
     font-weight: 700;
     margin: 0;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .rv-sub-badge {
@@ -86,17 +76,17 @@
     font-size: 0.78rem;
     font-weight: 700;
     background: #f0f2f5;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .rv-pill-type {
-    background: #f0fdf4;
+    background: #e6f7ed;
     color: #166534;
 }
 
 .rv-meta-text {
     font-size: 0.85rem;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 /* ── Stats ───────────────────────────────────────────────────────────────── */
@@ -118,19 +108,19 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .rv-stat-value {
     font-size: 1.15rem;
     font-weight: 700;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .rv-stat-unit {
     font-size: 0.9rem;
     font-weight: 500;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .rv-cost {
@@ -156,10 +146,10 @@
 /* ── Shared card ─────────────────────────────────────────────────────────── */
 
 .rv-card {
-    background: var(--card);
+    background: var(--cc-card);
     border-radius: 16px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--cc-border);
+    box-shadow: var(--cc-shadow);
     overflow: hidden;
 }
 
@@ -171,9 +161,9 @@
     font-size: 0.95rem;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    background: var(--green);
-    color: var(--ink);
-    border-bottom: 1px solid var(--border);
+    background: var(--cc-green);
+    color: var(--cc-ink);
+    border-bottom: 1px solid var(--cc-border);
 }
 
 .rv-count-badge {
@@ -187,7 +177,7 @@
 
 .rv-empty {
     padding: 24px 20px;
-    color: var(--muted);
+    color: var(--cc-muted);
     font-style: italic;
     margin: 0;
 }
@@ -202,7 +192,7 @@
 
 .rv-table thead tr {
     background: #f9fafb;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
 }
 
 .rv-table thead th {
@@ -211,11 +201,11 @@
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.02em;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
 
 .rv-table tbody tr {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
 }
 
 .rv-table tbody tr:last-child {
@@ -228,7 +218,7 @@
 }
 
 .rv-sort-num {
-    color: var(--muted);
+    color: var(--cc-muted);
     font-size: 0.82rem;
     width: 36px;
     text-align: center;
@@ -246,7 +236,7 @@
 }
 
 .rv-prepnote {
-    color: var(--muted);
+    color: var(--cc-muted);
     font-style: italic;
     font-size: 0.88rem;
 }
@@ -264,7 +254,7 @@
     display: flex;
     gap: 16px;
     padding: 18px 20px;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--cc-border);
     counter-increment: step-counter;
 }
 
@@ -280,8 +270,8 @@
     min-width: 32px;
     height: 32px;
     border-radius: 999px;
-    background: var(--green);
-    color: var(--ink);
+    background: var(--cc-green);
+    color: var(--cc-ink);
     font-weight: 700;
     font-size: 0.88rem;
     flex-shrink: 0;
@@ -296,7 +286,7 @@
     margin: 0 0 10px;
     font-size: 0.95rem;
     line-height: 1.6;
-    color: var(--ink);
+    color: var(--cc-ink);
 }
 
 .rv-step-instructions:only-child {
@@ -315,7 +305,7 @@
     padding: 3px 10px;
     border-radius: 8px;
     background: #f3f4f6;
-    border: 1px solid var(--border);
+    border: 1px solid var(--cc-border);
     font-size: 0.8rem;
-    color: var(--muted);
+    color: var(--cc-muted);
 }
diff --git a/CulinaryCommandApp/wwwroot/css/app.css b/CulinaryCommandApp/wwwroot/css/app.css
index 6fd4d76..614f5df 100644
--- a/CulinaryCommandApp/wwwroot/css/app.css
+++ b/CulinaryCommandApp/wwwroot/css/app.css
@@ -1,3 +1,16 @@
+/* Brand CSS variables — global so they work across all scoped component stylesheets */
+:root {
+    --cc-ink: #1f2a37;
+    --cc-muted: #6b7280;
+    --cc-border: #e5e7eb;
+    --cc-bg: #f6f7f9;
+    --cc-card: #ffffff;
+    --cc-green: #009A3B;
+    --cc-green-dark: #007a2f;
+    --cc-pill: #f0f2f5;
+    --cc-shadow: 0 10px 30px rgba(31, 42, 55, 0.08);
+}
+
 /* Feedback Button Styles */
 .feedback-fixed {
   position: fixed;
@@ -133,6 +146,39 @@ a,
   border-color: #1861ac;
 }
 
+/* Brand green overrides for Bootstrap success utilities */
+.btn-success,
+.btn-success:focus {
+  background-color: #009A3B;
+  border-color: #009A3B;
+  color: #fff;
+}
+.btn-success:hover,
+.btn-success:active,
+.btn-success.active,
+.show > .btn-success.dropdown-toggle {
+  background-color: #007a2f;
+  border-color: #007a2f;
+  color: #fff;
+}
+.btn-outline-success {
+  color: #009A3B;
+  border-color: #009A3B;
+}
+.btn-outline-success:hover {
+  background-color: #009A3B;
+  border-color: #009A3B;
+  color: #fff;
+}
+.bg-success { background-color: #009A3B !important; }
+.text-success { color: #009A3B !important; }
+.border-success { border-color: #009A3B !important; }
+.badge.text-bg-success,
+.text-bg-success { background-color: #009A3B !important; color: #fff !important; }
+.bg-success-subtle { background-color: #e6f7ed !important; }
+.border-success-subtle { border-color: #b3e6c8 !important; }
+.text-success-emphasis { color: #007a2f !important; }
+
 .btn:focus,
 .btn:active:focus,
 .btn-link.nav-link:focus,