diff --git a/assets/css/custom.css b/assets/css/custom.css
index b052b9b..efdb7ad 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,13 +1,25 @@
+:root {
+    --brand-primary: #2D6A4F; /* Deep Emerald Green */
+    --brand-primary-hover: #1B4332;
+    --brand-secondary: #D4A373; /* Warm Gold/Honey */
+    --brand-accent: #E9C46A; /* Saffron */
+    --brand-danger: #BC4749; /* Deep Earthy Red */
+    --bg-main: #FDFBF7; /* Cream/Off-white */
+    --text-main: #2D2D2D;
+    --text-muted: #666666;
+    --card-shadow: 0 12px 40px rgba(45, 106, 79, 0.08);
+}
+
 /* General Body Styles */
 body {
-    background-color: #FAF9F6; /* Light beige background */
-    color: #2D2D2D; /* Dark gray text */
+    background-color: var(--bg-main);
+    color: var(--text-main);
     font-family: 'Poppins', sans-serif;
 }
 
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
-    color: #2D2D2D !important;
+    color: var(--text-main) !important;
     font-weight: 700;
 }
 
@@ -29,29 +41,29 @@ button,
 /* Main Content */
 .display-4 {
     font-weight: 700;
-    color: #2D2D2D;
+    color: var(--text-main);
 }
 
 .lead {
-    color: #666666;
+    color: var(--text-muted);
 }
 
 /* Cards */
 .card {
     background-color: #ffffff;
     border: none;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    border-radius: 24px;
+    box-shadow: var(--card-shadow);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .card-body {
-    color: #2D2D2D;
+    color: var(--text-main);
 }
 
 /* Forms */
 .form-label {
-    color: #2D2D2D;
+    color: var(--text-main);
     font-weight: 600;
     margin-bottom: 0.5rem;
 }
@@ -59,17 +71,17 @@ button,
 .form-control,
 .form-select {
     background-color: #ffffff;
-    border: 2px solid #EEEEEE;
-    color: #2D2D2D;
+    border: 2px solid #F0F0F0;
+    color: var(--text-main);
     padding: 12px 16px;
 }
 
 .form-control:focus,
 .form-select:focus {
     background-color: #ffffff;
-    border-color: #FF7F50; /* Orange accent */
-    box-shadow: 0 0 0 0.25rem rgba(255, 127, 80, 0.15);
-    color: #2D2D2D;
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 0.25rem rgba(45, 106, 79, 0.1);
+    color: var(--text-main);
 }
 
 .form-control::placeholder {
@@ -78,50 +90,89 @@ button,
 
 /* Buttons */
 .btn-primary {
-    background-color: #FF7F50 !important; /* Orange */
-    border-color: #FF7F50 !important;
+    background-color: var(--brand-primary) !important;
+    border-color: var(--brand-primary) !important;
     color: #ffffff !important;
 }
 
 .btn-primary:hover {
-    background-color: #E66E45 !important;
-    border-color: #E66E45 !important;
+    background-color: var(--brand-primary-hover) !important;
+    border-color: var(--brand-primary-hover) !important;
     transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(255, 127, 80, 0.3);
+    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.2);
+}
+
+.btn-outline-primary {
+    color: var(--brand-primary) !important;
+    border-color: var(--brand-primary) !important;
+    border-width: 2px;
+}
+
+.btn-outline-primary:hover {
+    background-color: var(--brand-primary) !important;
+    color: #ffffff !important;
+}
+
+.text-primary {
+    color: var(--brand-primary) !important;
 }
 
 .btn-danger {
-    background-color: #FF4B2B !important;
-    border-color: #FF4B2B !important;
+    background-color: var(--brand-danger) !important;
+    border-color: var(--brand-danger) !important;
     color: #ffffff !important;
 }
+/* ... rest of existing styles ... */
+/* Feature Icons */
+.feature-list .bi {
+    background: rgba(255, 255, 255, 0.1);
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 14px;
+    font-size: 1.5rem !important;
+    transition: all 0.3s ease;
+}
+
+.feature-list .d-flex:hover .bi {
+    background: var(--brand-secondary);
+    color: #ffffff !important;
+    transform: scale(1.1);
+}
+
+.feature-list h5 {
+    color: #ffffff !important;
+    font-size: 1.1rem;
+}
 
 .btn-outline-secondary {
     border: 2px solid #EEEEEE;
-    color: #666666;
+    color: var(--text-muted);
 }
 
 .btn-outline-secondary:hover {
     background-color: #F8F8F8;
-    color: #2D2D2D;
+    color: var(--text-main);
     border-color: #DDDDDD;
 }
 
 .btn-secondary {
-    background-color: #EEEEEE;
+    background-color: #F0F0F0;
     border: none;
-    color: #666666;
+    color: var(--text-muted);
 }
 
 .btn-secondary:hover {
-    background-color: #DDDDDD;
-    color: #2D2D2D;
+    background-color: #E0E0E0;
+    color: var(--text-main);
 }
 
 /* Shopping List & Recipe Cards */
 .recipe-card {
     background-color: #ffffff;
-    border-radius: 20px;
+    border-radius: 24px;
     padding: 20px;
     margin-bottom: 20px;
     border: 1px solid #F0F0F0;
@@ -148,7 +199,7 @@ button,
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #CCCCCC;
+    background: var(--brand-secondary);
 }
 
 /* Footer */
@@ -161,9 +212,9 @@ footer {
 /* Shopping List Checkbox */
 .list-group-item {
     background-color: transparent !important;
-    border-bottom: 1px solid #F0F0F0 !important;
+    border-bottom: 1px solid #F8F8F8 !important;
     padding: 15px 0 !important;
-    color: #2D2D2D !important;
+    color: var(--text-main) !important;
 }
 
 .list-group-item.checked .form-check-label {
@@ -179,8 +230,8 @@ footer {
 }
 
 .form-check-input:checked {
-    background-color: #FF7F50;
-    border-color: #FF7F50;
+    background-color: var(--brand-primary);
+    border-color: var(--brand-primary);
 }
 
 /* Unit buttons */
@@ -190,16 +241,16 @@ footer {
 }
 
 .unit-selector .btn-secondary {
-    background-color: #FF7F50 !important;
+    background-color: var(--brand-primary) !important;
     color: white !important;
 }
 
 /* Badges */
 .bg-custom-green {
-    background-color: #FFF0EB !important;
-    color: #FF7F50 !important;
+    background-color: #E9F5EF !important;
+    color: var(--brand-primary) !important;
     font-weight: 700;
-    border: 1px solid #FFE4DB;
+    border: 1px solid #D1EADE;
 }
 
 /* Quantity Modifiers */
@@ -212,38 +263,38 @@ footer {
     justify-content: center;
     background-color: #F8F8F8;
     border: 1px solid #EEEEEE;
-    color: #666666;
+    color: var(--text-muted);
     padding: 0 !important;
 }
 
 .btn-quantity-modifier:hover {
-    background-color: #FF7F50;
+    background-color: var(--brand-primary);
     color: white;
-    border-color: #FF7F50;
+    border-color: var(--brand-primary);
 }
 
 /* Modal Styles */
 .modal-content {
     background-color: #ffffff;
     border: none;
-    border-radius: 24px;
+    border-radius: 32px;
     overflow: hidden;
 }
 
 .modal-header {
-    border-bottom: 1px solid #F0F0F0;
+    border-bottom: 1px solid #F8F8F8;
     padding: 24px;
 }
 
 .modal-footer {
-    border-top: 1px solid #F0F0F0;
+    border-top: 1px solid #F8F8F8;
     padding: 20px 24px;
 }
 
 /* Category Label */
 .recipe-category-label {
-    background-color: #FFF0EB;
-    color: #FF7F50;
+    background-color: #E9F5EF;
+    color: var(--brand-primary);
     padding: 4px 12px;
     border-radius: 8px;
     font-size: 0.75rem;
@@ -254,16 +305,16 @@ footer {
 
 /* Category Filters */
 #category-filters .btn {
-    border: 2px solid #EEEEEE;
+    border: 2px solid #F0F0F0;
     background-color: #ffffff;
-    color: #666666;
+    color: var(--text-muted);
     font-size: 0.85rem;
     padding: 8px 16px !important;
 }
 
 #category-filters .btn.active {
-    background-color: #FF7F50 !important;
-    border-color: #FF7F50 !important;
+    background-color: var(--brand-primary) !important;
+    border-color: var(--brand-primary) !important;
     color: #ffffff !important;
 }
 
@@ -271,7 +322,7 @@ footer {
 #recipe-search {
     padding-left: 3rem;
     height: 54px;
-    border-color: #EEEEEE;
+    border-color: #F0F0F0;
 }
 
 .search-container .bi-search {
@@ -282,21 +333,21 @@ footer {
 
 /* Recipe Card Image */
 .card .card-img-top {
-    height: 180px;
+    height: 200px;
     object-fit: cover;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
 }
 
 /* View Recipe Modal */
 #view-recipe-ingredients {
-    background-color: #F9F9F9;
-    border-radius: 16px;
+    background-color: #FBFBFB;
+    border-radius: 20px;
     padding: 20px;
 }
 
 #view-recipe-ingredients .list-group-item {
-    border-bottom: 1px solid #EEEEEE !important;
+    border-bottom: 1px solid #F0F0F0 !important;
     padding: 10px 0 !important;
 }
 
@@ -323,33 +374,33 @@ footer {
 }
 
 .auth-image-overlay {
-    background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
+    background: radial-gradient(circle at center, rgba(45, 106, 79, 0.1) 0%, rgba(27, 67, 50, 0.7) 100%);
     width: 100%;
     height: 100%;
 }
 
 .auth-branding-content {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 30px;
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 40px;
     padding: 60px 40px;
     max-width: 600px;
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .auth-branding-content p.lead {
-    color: rgba(255, 255, 255, 0.9) !important;
+    color: rgba(255, 255, 255, 0.95) !important;
 }
 
 .auth-form-container {
-    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
+    box-shadow: -20px 0 40px rgba(45, 106, 79, 0.05);
     background-color: #ffffff;
 }
 
 .auth-form-container h2 {
-    color: #2D2D2D;
+    color: var(--text-main);
     font-weight: 700;
     letter-spacing: -1px;
 }
@@ -364,7 +415,7 @@ footer {
 
 .auth-screen .form-control-lg:focus {
     background-color: #ffffff;
-    border-color: #FF7F50;
+    border-color: var(--brand-primary);
 }
 
 #auth-nav.guest-nav {
diff --git a/index.php b/index.php
index 6af1c67..e5525b4 100644
--- a/index.php
+++ b/index.php
@@ -27,15 +27,15 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v5">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v7">
 
 </head>
 <body>
 
-    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm sticky-top mb-4">
+    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top mb-4">
         <div class="container">
             <a class="navbar-brand d-flex align-items-center" href="/">
-                <i class="bi bi-flow me-2" style="color: var(--accent-color);"></i>
+                <i class="bi bi-flow me-2" style="color: var(--brand-primary);"></i>
                 <span class="fw-bold">FoodieFlow</span>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -60,35 +60,35 @@
                     <div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
                         <div class="auth-branding-content">
                             <div class="text-center mb-4">
-                                <i class="bi bi-flow display-1 mb-2" style="color: #FF7F50; filter: drop-shadow(0 0 10px rgba(255, 127, 80, 0.3));"></i>
+                                <i class="bi bi-flow display-1 mb-2" style="color: var(--brand-secondary); filter: drop-shadow(0 0 15px rgba(212, 163, 115, 0.4));"></i>
                                 <h1 class="display-3 fw-bold">FoodieFlow</h1>
                                 <p class="lead mt-2">An AI-powered flow from recipe to grocery — every day, every occasion</p>
                             </div>
                             
                             <div class="feature-list mt-4 text-start">
-                                <div class="d-flex mb-3">
-                                    <i class="bi bi-stars fs-3 me-3 text-warning"></i>
+                                <div class="d-flex mb-3 align-items-center">
+                                    <i class="bi bi-stars me-3 text-warning"></i>
                                     <div>
                                         <h5 class="mb-1">AI Recipes from Photos</h5>
                                         <p class="small mb-0">Upload a photo of any dish, and our AI will instantly create its recipe.</p>
                                     </div>
                                 </div>
-                                <div class="d-flex mb-3">
-                                    <i class="bi bi-cart-check fs-3 me-3 text-info"></i>
+                                <div class="d-flex mb-3 align-items-center">
+                                    <i class="bi bi-cart-check me-3 text-info"></i>
                                     <div>
                                         <h5 class="mb-1">Smart Shopping</h5>
                                         <p class="small mb-0">Automatic grocery lists. We'll find where it's cheaper and build your basket.</p>
                                     </div>
                                 </div>
-                                <div class="d-flex mb-3">
-                                    <i class="bi bi-people fs-3 me-3 text-success"></i>
+                                <div class="d-flex mb-3 align-items-center">
+                                    <i class="bi bi-people me-3 text-success"></i>
                                     <div>
                                         <h5 class="mb-1">For Holidays & Weekdays</h5>
                                         <p class="small mb-0">Plan parties together: share your grocery list with friends and family.</p>
                                     </div>
                                 </div>
-                                <div class="d-flex mb-3">
-                                    <i class="bi bi-receipt fs-3 me-3 text-danger"></i>
+                                <div class="d-flex mb-3 align-items-center">
+                                    <i class="bi bi-receipt me-3 text-danger"></i>
                                     <div>
                                         <h5 class="mb-1">Expense Control</h5>
                                         <p class="small mb-0">Snap a photo of your receipt, and the app will help split the cost among all participants.</p>