diff --git a/frontend/index.html b/frontend/index.html
index 57b544e..6151220 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -15,7 +15,7 @@
     <!-- Navigation -->
     <nav class="navbar">
         <div class="nav-container">
-            <div class="nav-brand">
+            <div class="nav-brand" style="margin: 10px;">
                 <i class="fas fa-recycle"></i>
                 <span>ReWear</span>
             </div>
@@ -36,6 +36,9 @@
                 </div>
 
                 <div id="auth-buttons">
+                    <button id="theme-toggle" class="theme-toggle">
+                        <i class="fas fa-moon"></i> Dark
+                    </button>
                     <button class="btn btn-outline" onclick="showPage('login')">Login</button>
                     <button class="btn btn-primary" onclick="showPage('signup')">Sign Up</button>
                 </div>
@@ -43,6 +46,9 @@
             <div class="nav-auth">
 
                 <div id="user-menu" style="display: none;">
+                    <button id="theme-toggle-user" class="theme-toggle">
+                        <i class="fas fa-moon"></i> Dark
+                    </button>
                     <span id="user-points" class="points-badge"></span>
                     <span id="username-display"></span>
                     <button id="notifications-bell" class="btn btn-icon" style="margin-right: 10px; display: none;"
@@ -157,32 +163,27 @@ <h3>Earn & Redeem Points</h3>
             </div>
         </section>
 
-        <section class="how-rewear" style="padding: 60px 20px; background-color: #f9f9f9; text-align: center;">
+        <section class="how-rewear">
             <div class="container">
-                <h2 style="font-size: 2.5rem; margin-bottom: 40px; color: #333;">How ReWear Works</h2>
-                <div class="how-grid"
-                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
+                <h2 class="how-title">How ReWear Works</h2>
+                <div class="how-grid">
 
                     <div class="how-card">
-
-                        <i class="fas fa-upload" style="font-size: 2.5rem; color: #4CAF50; margin-bottom: 20px;"></i>
-                        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #222;">List Your Items</h3>
-                        <p style="color: #555;">Upload photos and details of clothing you no longer wear.</p>
+                        <i class="fas fa-upload how-icon how-icon-green"></i>
+                        <h3 class="how-card-title">List Your Items</h3>
+                        <p class="how-card-description">Upload photos and details of clothing you no longer wear.</p>
                     </div>
 
                     <div class="how-card">
-
-                        <i class="fas fa-exchange-alt"
-                            style="font-size: 2.5rem; color: #FF9800; margin-bottom: 20px;"></i>
-                        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #222;">Swap or Redeem</h3>
-                        <p style="color: #555;">Exchange directly with others or use points to get items you love.</p>
+                        <i class="fas fa-exchange-alt how-icon how-icon-orange"></i>
+                        <h3 class="how-card-title">Swap or Redeem</h3>
+                        <p class="how-card-description">Exchange directly with others or use points to get items you love.</p>
                     </div>
 
                     <div class="how-card">
-
-                        <i class="fas fa-leaf" style="font-size: 2.5rem; color: #8BC34A; margin-bottom: 20px;"></i>
-                        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #222;">Reduce Waste</h3>
-                        <p style="color: #555;">Help create a more sustainable fashion ecosystem.</p>
+                        <i class="fas fa-leaf how-icon how-icon-light-green"></i>
+                        <h3 class="how-card-title">Reduce Waste</h3>
+                        <p class="how-card-description">Help create a more sustainable fashion ecosystem.</p>
                     </div>
 
                 </div>
diff --git a/frontend/static/script.js b/frontend/static/script.js
index 6f3d980..513225b 100644
--- a/frontend/static/script.js
+++ b/frontend/static/script.js
@@ -1,4 +1,50 @@
+// Dark Mode Toggle Functionality
+function initializeTheme() {
+  // Check for saved theme preference or default to light mode
+  const savedTheme = localStorage.getItem('theme') || 'light';
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  
+  // Update toggle button text
+  updateThemeToggleText(savedTheme);
+}
+
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  
+  document.documentElement.setAttribute('data-theme', newTheme);
+  localStorage.setItem('theme', newTheme);
+  updateThemeToggleText(newTheme);
+}
+
+function updateThemeToggleText(theme) {
+  const toggleButtons = [
+    document.getElementById('theme-toggle'),
+    document.getElementById('theme-toggle-user')
+  ];
+  
+  toggleButtons.forEach(button => {
+    if (button) {
+      button.innerHTML = theme === 'light' 
+        ? '<i class="fas fa-moon"></i> Dark' 
+        : '<i class="fas fa-sun"></i> Light';
+    }
+  });
+}
+
 function setupEventListeners() {
+  // Theme toggle setup for both buttons
+  const themeToggleButtons = [
+    document.getElementById('theme-toggle'),
+    document.getElementById('theme-toggle-user')
+  ];
+  
+  themeToggleButtons.forEach(button => {
+    if (button) {
+      button.addEventListener('click', toggleTheme);
+    }
+  });
+  
   // Stub function to prevent errors
   // Add event listeners here if needed in future
 }
@@ -14,6 +60,7 @@ const API_BASE = "/api";
 
 // Initialize app
 document.addEventListener("DOMContentLoaded", function () {
+  initializeTheme();
   checkAuth();
   loadCategories();
   loadFeaturedItems();
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 13c59e8..5b94687 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -1,3 +1,37 @@
+/* Color Variables for Light/Dark Mode */
+:root {
+  --primary-color: #007aff;
+  --secondary-color: #5856d6;
+  --bg-primary: #f5f5f7;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #e8e8ed;
+  --text-primary: #1d1d1f;
+  --text-secondary: #6e6e73;
+  --text-accent: #007aff;
+  --border-color: rgba(0, 0, 0, 0.1);
+  --nav-bg: rgba(255, 255, 255, 0.8);
+  --card-bg: #ffffff;
+  --shadow-light: rgba(0, 0, 0, 0.08);
+  --shadow-medium: rgba(0, 0, 0, 0.12);
+  --gradient-primary: linear-gradient(135deg, #007aff, #5856d6);
+  --gradient-bg: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
+}
+
+[data-theme="dark"] {
+  --bg-primary: #1c1c1e;
+  --bg-secondary: #2c2c2e;
+  --bg-tertiary: #3a3a3c;
+  --text-primary: #ffffff;
+  --text-secondary: #8e8e93;
+  --text-accent: #0a84ff;
+  --border-color: rgba(255, 255, 255, 0.1);
+  --nav-bg: rgba(44, 44, 46, 0.8);
+  --card-bg: #2c2c2e;
+  --shadow-light: rgba(0, 0, 0, 0.3);
+  --shadow-medium: rgba(0, 0, 0, 0.5);
+  --gradient-bg: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
+}
+
 /* Reset and Base Styles */
 * {
   margin: 0;
@@ -9,9 +43,10 @@ body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     sans-serif;
   line-height: 1.6;
-  color: #1d1d1f;
-  background-color: #f5f5f7;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
   overflow-x: hidden;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .container {
@@ -22,10 +57,10 @@ body {
 
 /* Navigation */
 .navbar {
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--nav-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--border-color);
   position: fixed;
   top: 0;
   width: 100%;
@@ -48,8 +83,9 @@ body {
   align-items: center;
   font-size: 1.5rem;
   font-weight: 700;
-  color: #007aff;
+  color: var(--primary-color);
   text-decoration: none;
+  margin-left: 10px;
 }
 
 .nav-brand i {
@@ -58,7 +94,7 @@ body {
 }
 
 .nav-link {
-  color: #1d1d1f;
+  color: var(--text-primary);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
@@ -66,7 +102,7 @@ body {
 }
 
 .nav-link:hover {
-  color: #007aff;
+  color: var(--text-accent);
 }
 
 .nav-link::after {
@@ -76,7 +112,7 @@ body {
   left: 0;
   width: 0;
   height: 2px;
-  background: #007aff;
+  background: var(--text-accent);
   transition: width 0.3s ease;
 }
 
@@ -87,16 +123,87 @@ body {
 .nav-auth {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 12px;
+}
+
+#auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#user-menu {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#user-menu .theme-toggle {
+  order: -1; /* Put theme toggle first in user menu */
+}
+
+.navItems {
+  display: flex;
+  gap: 24px;
 }
 
 .points-badge {
-  background: linear-gradient(135deg, #007aff, #5856d6);
+  background: var(--gradient-primary);
   color: white;
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 0.9rem;
+  padding: 6px 12px;
+  border-radius: 18px;
+  font-size: 0.8rem;
   font-weight: 600;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+#username-display {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+/* Dark Mode Toggle */
+.theme-toggle {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--text-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+  height: 32px;
+  min-width: fit-content;
+}
+
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  transform: translateY(-1px);
+}
+
+.theme-toggle i {
+  font-size: 0.7rem;
+}
+
+/* Navigation-specific button styles */
+.nav-menu .btn,
+.nav-auth .btn {
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav-toggle {
@@ -108,7 +215,7 @@ body {
 .nav-toggle span {
   width: 25px;
   height: 3px;
-  background: #1d1d1f;
+  background: var(--text-primary);
   margin: 3px 0;
   transition: 0.3s;
   border-radius: 2px;
@@ -131,7 +238,7 @@ body {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #007aff, #5856d6);
+  background: var(--gradient-primary);
   color: white;
   box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }
@@ -143,12 +250,12 @@ body {
 
 .btn-outline {
   background: transparent;
-  color: #007aff;
-  border: 2px solid #007aff;
+  color: var(--text-accent);
+  border: 2px solid var(--text-accent);
 }
 
 .btn-outline:hover {
-  background: #007aff;
+  background: var(--text-accent);
   color: white;
   transform: translateY(-2px);
 }
@@ -185,7 +292,7 @@ body {
 
 /* Hero background and illustration */
 .hero {
-  background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
+  background: var(--gradient-bg);
   padding: 80px 0 40px 0;
   display: flex;
   align-items: center;
@@ -200,7 +307,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 70% 30%, #e0e7ff 0%, #f5f5f7 80%);
+  background: radial-gradient(circle at 70% 30%, rgba(0, 122, 255, 0.05) 0%, transparent 80%);
   z-index: 0;
 }
 
@@ -215,8 +322,8 @@ body {
   width: 350px;
   max-width: 90vw;
   border-radius: 24px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
-  background: white;
+  box-shadow: 0 8px 32px var(--shadow-light);
+  background: var(--card-bg);
   margin-bottom: 20px;
 }
 
@@ -290,7 +397,7 @@ body {
 
 /* Why ReWear section */
 .why-rewear {
-  background: #f8faff;
+  background: var(--bg-primary);
   padding: 60px 0 40px 0;
 }
 
@@ -298,7 +405,7 @@ body {
   text-align: center;
   font-size: 2.2rem;
   margin-bottom: 36px;
-  color: #1d1d1f;
+  color: var(--text-primary);
 }
 
 .why-grid {
@@ -309,9 +416,9 @@ body {
 }
 
 .why-card {
-  background: white;
+  background: var(--card-bg);
   border-radius: 18px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 24px var(--shadow-light);
   padding: 32px 28px;
   text-align: center;
   flex: 1 1 220px;
@@ -335,17 +442,17 @@ body {
 .why-card h3 {
   font-size: 1.2rem;
   margin-bottom: 10px;
-  color: #1d1d1f;
+  color: var(--text-primary);
 }
 
 .why-card p {
-  color: #6e6e73;
+  color: var(--text-secondary);
   font-size: 1rem;
 }
 
 /* Make featured items more prominent */
 .featured-items {
-  background: linear-gradient(135deg, #e8e8ed 0%, #f5f5f7 100%);
+  background: var(--gradient-bg);
   padding: 60px 0 40px 0;
 }
 
@@ -372,23 +479,23 @@ body {
 }
 
 .item-card {
-  background: white;
+  background: var(--card-bg);
   border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px var(--shadow-light);
   transition: all 0.3s ease;
   cursor: pointer;
 }
 
 .item-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 40px var(--shadow-medium);
 }
 
 .item-image {
   width: 100%;
   height: 200px;
-  background: linear-gradient(135deg, #f5f5f7, #e8e8ed);
+  background: var(--gradient-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -415,8 +522,8 @@ body {
 }
 
 .item-category {
-  background: #e8e8ed;
-  color: #6e6e73;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
   padding: 4px 12px;
   border-radius: 12px;
   font-size: 0.9rem;
@@ -454,10 +561,10 @@ body {
 }
 
 .auth-card {
-  background: white;
+  background: var(--card-bg);
   padding: 40px;
   border-radius: 20px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 20px 40px var(--shadow-light);
   width: 100%;
   max-width: 400px;
 }
@@ -474,11 +581,30 @@ body {
   margin-bottom: 20px;
 }
 
+/* How ReWear Section */
+.how-rewear {
+  background: var(--bg-primary);
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.how-title {
+  font-size: 2.5rem;
+  margin-bottom: 40px;
+  color: var(--text-primary);
+}
+
+.how-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+}
+
 .how-card {
-  background: #ffffff;
+  background: var(--card-bg);
   padding: 30px 20px;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px var(--shadow-light);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -487,6 +613,33 @@ body {
   box-shadow: 0 8px 20px rgba(0, 122, 255, 0.15);
 }
 
+.how-icon {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+
+.how-icon-green {
+  color: #4CAF50;
+}
+
+.how-icon-orange {
+  color: #FF9800;
+}
+
+.how-icon-light-green {
+  color: #8BC34A;
+}
+
+.how-card-title {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: var(--text-primary);
+}
+
+.how-card-description {
+  color: var(--text-secondary);
+}
+
 .form-group label {
   display: block;
   margin-bottom: 8px;
@@ -503,14 +656,15 @@ body {
   border-radius: 12px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
-  background: white;
+  background: var(--card-bg);
+  color: var(--text-primary);
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
   outline: none;
-  border-color: #007aff;
+  border-color: var(--text-accent);
 }
 
 .form-row {
@@ -532,15 +686,25 @@ body {
 
 /* Page Headers */
 .page-header {
-  padding: 40px 0;
+  padding: 60px 20px 40px 20px;
   text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .page-header h1 {
   font-size: 2.5rem;
   font-weight: 700;
-  margin-bottom: 20px;
-  color: #1d1d1f;
+  margin-bottom: 16px;
+  color: var(--text-primary);
+}
+
+.page-header p {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  margin-bottom: 0;
+  line-height: 1.6;
 }
 
 .search-filters {
@@ -553,10 +717,19 @@ body {
 .search-input,
 .filter-select {
   padding: 12px 16px;
-  border: 2px solid #e8e8ed;
+  border: 2px solid var(--border-color);
   border-radius: 12px;
   font-size: 1rem;
   min-width: 200px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  transition: border-color 0.3s ease, background-color 0.3s ease;
+}
+
+.search-input:focus,
+.filter-select:focus {
+  outline: none;
+  border-color: var(--text-accent);
 }
 
 /* Dashboard */
@@ -574,11 +747,11 @@ body {
 }
 
 .stat-card {
-  background: white;
+  background: var(--card-bg);
   padding: 30px;
   border-radius: 20px;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px var(--shadow-light);
   min-width: 150px;
 }
 
@@ -644,10 +817,10 @@ body {
 }
 
 .swap-card {
-  background: white;
+  background: var(--card-bg);
   padding: 20px;
   border-radius: 16px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 5px 15px var(--shadow-light);
   margin-bottom: 20px;
 }
 
@@ -695,10 +868,10 @@ body {
 }
 
 .users-list {
-  background: white;
+  background: var(--card-bg);
   border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px var(--shadow-light);
 }
 
 .user-item {
@@ -725,10 +898,10 @@ body {
 
 /* Item Detail */
 .item-detail {
-  background: white;
+  background: var(--card-bg);
   border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 20px 40px var(--shadow-light);
   margin: 40px 0;
 }
 
@@ -742,20 +915,20 @@ body {
 .item-detail-image {
   width: 100%;
   height: 400px;
-  background: linear-gradient(135deg, #f5f5f7, #e8e8ed);
+  background: var(--gradient-bg);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 6rem;
-  color: #6e6e73;
+  color: var(--text-secondary);
 }
 
 .item-detail-info h1 {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 20px;
-  color: #1d1d1f;
+  color: var(--text-primary);
 }
 
 .item-detail-meta {
@@ -766,7 +939,7 @@ body {
 }
 
 .meta-item {
-  background: #f5f5f7;
+  background: var(--bg-primary);
   padding: 15px;
   border-radius: 12px;
 }
@@ -806,8 +979,8 @@ body {
 }
 
 .tag {
-  background: #e8e8ed;
-  color: #6e6e73;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
   padding: 6px 12px;
   border-radius: 12px;
   font-size: 0.9rem;
@@ -827,14 +1000,14 @@ body {
 }
 
 .modal-content {
-  background: white;
+  background: var(--card-bg);
   margin: 5% auto;
   padding: 40px;
   border-radius: 20px;
   width: 90%;
   max-width: 500px;
   position: relative;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 40px var(--shadow-medium);
 }
 
 .close {
@@ -918,17 +1091,16 @@ body {
 }
 .nav-menu {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
 }
+
 .navItems {
   display: flex;
-  gap: 20px;
-  justify-content: flex-end;
-  width: 50%;
+  gap: 24px;
 }
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .nav-menu {
@@ -937,11 +1109,12 @@ body {
     position: absolute;
     top: 100%;
     width: 100%;
-    background: azure;
-    /* margin: 0 auto; */
+    background: var(--nav-bg);
+    backdrop-filter: blur(20px);
     right: 0;
     padding: 22px;
     gap: 22px;
+    border-top: 1px solid var(--border-color);
   }
   .navItems {
     display: flex;
@@ -1459,34 +1632,51 @@ body {
 
 .feedback-form {
   max-width: 600px;
-  margin: auto;
-  padding: 1.5rem;
-  background: #f5f6fa;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  margin: 0 auto 40px auto;
+  padding: 2rem;
+  background: var(--card-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px var(--shadow-light);
 }
 
 .feedback-form .form-group {
-  margin-bottom: 1.2rem;
+  margin-bottom: 1.5rem;
 }
 
 .feedback-form label {
   font-weight: 600;
   margin-bottom: 0.5rem;
   display: block;
+  color: var(--text-primary);
+  font-size: 0.95rem;
 }
 
 .feedback-form input,
 .feedback-form textarea {
   width: 100%;
-  padding: 0.8rem;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  padding: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   font-size: 1rem;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+  box-sizing: border-box;
+}
+
+.feedback-form input:focus,
+.feedback-form textarea:focus {
+  outline: none;
+  border-color: var(--text-accent);
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
 }
 
 .feedback-form button {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
+  width: 100%;
+  padding: 0.875rem;
+  font-size: 1rem;
+  font-weight: 600;
 }
 /* Scroll to Top Button - Enhanced for ReWear Design */
 #scrollToTopBtn {
@@ -1556,153 +1746,15 @@ body {
   }
 }
 
-<<<<<<< HEAD
-
-#about-page .about-section {
-    padding: 70px 20px;
-    background-color: #f0f4f8; 
-    text-align: center;
-    color: #333;
-}
-
-#about-page .about-section .container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-#about-page .section-title {
-    font-size: 2rem;
-    margin-bottom: 20px;
-    color: #2c3e50;
-    font-weight: 700;
-}
-
-#about-page .section-subtitle {
-    font-size: 1.25rem;
-    color: #556b82;
-    max-width: 900px;
-    margin: 0 auto 60px auto;
-    line-height: 1.6;
-}
-
-
-#about-page .about-content {
-    display: flex;
-    justify-content: center; 
-    gap: 40px; 
-    flex-wrap: wrap; 
-    text-align: left;
-    margin-bottom: 80px;
-}
-
-#about-page .about-item {
-    flex: 1; 
-    max-width: 500px; 
-    min-width: 300px;
-    background-color: #ffffff;
-    padding: 35px; 
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-#about-page .about-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
-}
-
-#about-page .about-item h3 {
-    font-size: 1.8rem;
-    color: #007aff;
-    margin-bottom: 20px;
-    font-weight: 600;
-    position: relative;
-    padding-bottom: 10px;
-}
-
-#about-page .about-item h3::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 60px;
-    height: 4px;
-    background-color: #007aff;
-    border-radius: 2px;
-}
-
-@media (max-width: 768px) {
-    #about-page .about-item h3::after {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
-
-
-#about-page .about-item p {
-    font-size: 1.05rem;
-    color: #555;
-    line-height: 1.8;
-}
-
-#about-page .about-item strong {
-    color: #007aff;
-}
-
-
-@media (max-width: 992px) {
-    #about-page .section-title {
-        font-size: 2.5rem;
-    }
-    #about-page .section-subtitle {
-        font-size: 1.1rem;
-    }
-    #about-page .about-content {
-        gap: 30px;
-    }
-    #about-page .about-item {
-        max-width: unset; 
-    }
-    #about-page .about-item h3 {
-        font-size: 1.6rem;
-    }
-}
-
-@media (max-width: 768px) {
-    #about-page .about-section {
-        padding: 50px 15px;
-    }
-    #about-page .section-title {
-        font-size: 2rem;
-        margin-bottom: 15px;
-    }
-    #about-page .section-subtitle {
-        font-size: 1rem;
-        margin-bottom: 40px;
-    }
-    #about-page .about-content {
-        flex-direction: column; 
-        gap: 30px;
-    }
-    #about-page .about-item {
-        flex-basis: 100%; 
-        text-align: center; 
-    }
-    #about-page .about-item h3::after {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
-=======
 .f1 {
   display: flex;
   flex-direction: column;
   height: 450px;
   width: 320px;
   margin: 2rem;
-  background-color: #ffffff;
+  background-color: var(--card-bg);
   border-radius: 10px;
-  overflow: hidden; /* Optional: to hide image overflow */
+  overflow: hidden;
 }
 
 .f1 h2,button,p{
@@ -1713,6 +1765,14 @@ body {
   margin: 0.2rem;
   margin-left: 0.3rem;
 }
+
+.f1 h2 {
+  color: var(--text-primary);
+}
+
+.f1 p {
+  color: var(--text-secondary);
+}
 .f1 button {
   width: 30%;
   padding: 10px 16px;
@@ -1740,16 +1800,17 @@ body {
 
 .f1 p{
   font-size: 13px;
+  color: var(--text-secondary);
 }
 .f1 img {
   width: 100%;
-  height: 290px;               /* Fixed height for layout consistency */
-  object-fit: contain;         /* Shows entire product without cropping */
-  background-color: #fff;      /* Optional: for images with transparency */
+  height: 290px;
+  object-fit: contain;
+  background-color: var(--bg-secondary);
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  padding: 0.5rem;             /* Adds breathing room */
-  box-sizing: border-box;     /* Keeps padding inside the height */
+  padding: 0.5rem;
+  box-sizing: border-box;
 }
 
 
@@ -1760,6 +1821,7 @@ body {
 }
 .cards{
   display: flex;
+  background: var(--gradient-bg);
   flex-wrap: wrap;
   flex-direction: row;
 }
@@ -1769,7 +1831,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: var(--bg-secondary);
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
@@ -1780,4 +1842,3 @@ body {
   object-fit: contain;
 }
 
->>>>>>> AditiTangri-h
diff --git a/frontend/static/styles_new.css b/frontend/static/styles_new.css
new file mode 100644
index 0000000..e69de29