From 2afc4bb73507c872c848190d63f9142d85253c43 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 9 Feb 2026 18:43:15 +0530
Subject: [PATCH 1/2] Added consistent light mode toggle

---
 src/App.css                              |    3 +-
 src/App.jsx                              |   98 +-
 src/components/Blog.css                  |  212 ++-
 src/components/Blog.jsx                  |   58 +-
 src/components/ContactUs.css             |  126 +-
 src/components/Contributors.jsx          |   16 +-
 src/components/CookiePolicy.css          |   64 +-
 src/components/FAQ.css                   |   71 +-
 src/components/Features.css              |  177 +-
 src/components/Features.jsx              |  198 +-
 src/components/Footer.css                |  107 +-
 src/components/LoadingSpinner.css        |   26 +-
 src/components/Login.css                 |   90 +-
 src/components/MarketFilters.css         |   31 +-
 src/components/Navbar.css                | 2142 +++-------------------
 src/components/Navbar.jsx                |  363 +---
 src/components/Pricing.css               |  150 +-
 src/components/Pricing.jsx               |   52 +-
 src/components/ThemeToggle.jsx           |   20 +
 src/components/contributors.css          |  476 +++--
 src/context/ThemeContext.jsx             |   18 +-
 src/data/BlogArticle.css                 |  144 +-
 src/index.css                            |  116 +-
 src/pages/Dashboard/Dashboard.jsx        |  129 +-
 src/pages/Dashboard/DashboardContent.jsx |  121 +-
 src/pages/Dashboard/MarketOverview.jsx   |   96 +-
 src/pages/Home/Coin/CoinWrapper.jsx      |    6 +-
 src/pages/Home/Home.css                  |  852 +++++----
 src/pages/Home/Home.jsx                  |   18 +-
 tailwind.config.js                       |    1 +
 30 files changed, 2269 insertions(+), 3712 deletions(-)
 create mode 100644 src/components/ThemeToggle.jsx

diff --git a/src/App.css b/src/App.css
index 0521d89..97a73c7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,6 @@
 .app {
   min-height: 100vh;
   width: 100%;
-  overflow-x: hidden;
 }
 
 .app-container {
@@ -92,4 +91,4 @@
 
 table {
   min-width: 100%;
-}
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 3ad3902..f1fb40f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext,useRef } from "react";
+import React, { useEffect, useContext, useRef } from "react";
 import Lenis from "@studio-freight/lenis";
 import Navbar from "@/components/Navbar";
 import { Routes, Route, useLocation } from "react-router-dom";
@@ -30,14 +30,14 @@ import ScrollToTop from "@/components/ScrollToTop";
 import PrivacyPolicy from "@/components/PrivacyPolicy.jsx";
 import TermsOfService from "@/components/TermsOfService.jsx";
 import CookiePolicy from "@/components/CookiePolicy.jsx";
-import "./App.css";
 import ContactUs from "./components/ContactUs";
 import FAQ from "./components/FAQ";
 import PageNotFound from "./components/PageNotFound";
+import "./App.css";
 
 const App = () => {
+  const lenisRef = useRef(null);
 
-  const lenisRef = useRef(null)
   useEffect(() => {
     const lenis = new Lenis({
       smoothWheel: true,
@@ -63,11 +63,12 @@ const App = () => {
 
   const { isLoading } = useContext(CoinContext);
   const location = useLocation();
+
   const isDashboard =
     location.pathname === "/dashboard" ||
     location.pathname === "/leaderboard" ||
     location.pathname === "/market-overview" ||
-    location.pathname === "/change-password" ;
+    location.pathname === "/change-password";
 
   const authRoutes = ["/login", "/signup", "/forgot-password"];
   const isAuthPage = authRoutes.includes(location.pathname);
@@ -80,58 +81,59 @@ const App = () => {
   }, []);
 
   return (
-    <>
-      <Toaster
-        position="top-center"
-        toastOptions={{
-          style: {
-            background: "rgba(15, 15, 25, 0.9)",
-            color: "#fff",
-            backdropFilter: "blur(12px)",
-            border: "1px solid rgba(139, 92, 246, 0.3)",
-            borderRadius: "12px",
-          },
-          success: {
-            iconTheme: {
-              primary: "#22c55e",
-              secondary: "#0f0f19",
-            },
-          },
-          error: {
-            iconTheme: {
-              primary: "#ef4444",
-              secondary: "#0f0f19",
-            },
-          },
-        }}
-      />
-      <ThemeProvider>
-        <AuthProvider>
+    <ThemeProvider>
+      <AuthProvider>
+        <>
+          <Toaster
+            position="top-center"
+            toastOptions={{
+              className: "theme-toaster",
+              style: {
+                background: "var(--glass-panel-bg)",
+                color: "var(--text-main)",
+                backdropFilter: "blur(12px)",
+                border: "1px solid var(--border-color)",
+                borderRadius: "12px",
+              },
+              success: {
+                iconTheme: {
+                  primary: "#22c55e",
+                  secondary: "var(--bg-deep)",
+                },
+              },
+              error: {
+                iconTheme: {
+                  primary: "#ef4444",
+                  secondary: "var(--bg-deep)",
+                },
+              },
+            }}
+          />
+
           <div className="app">
-            {/* Loading Spinner - will show when isLoading is true */}
             {isLoading && !isDashboard && <LoadingSpinner />}
 
             <div
               className={
-                isDashboard ? "app-dashboard-container" : "app-container"
+                isDashboard
+                  ? "app-dashboard-container"
+                  : "app-container"
               }
             >
               {!isDashboard && <Navbar />}
+
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/pricing" element={<Pricing />} />
                 <Route path="/blog" element={<Blog />} />
-                {/* Blog detail route supporting both slug and id patterns */}
                 <Route path="/blog/:slug" element={<BlogDetail />} />
                 <Route path="/blog/article/:id" element={<BlogDetail />} />
-
                 <Route path="/features" element={<Features />} />
                 <Route path="/signup" element={<Signup />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/forgot-password" element={<ForgotPassword />} />
                 <Route path="/contributors" element={<Contributors />} />
 
-                {/* Dashboard Layout with nested routes - all share the same sidebar */}
                 <Route
                   element={
                     <PrivateRoute>
@@ -145,31 +147,23 @@ const App = () => {
                   <Route path="/change-password" element={<ChangePassword />} />
                 </Route>
 
-                {/* Coin route - accessible to all but shows sidebar if logged in */}
                 <Route path="/coin/:coinId" element={<CoinWrapper />} />
-
-                {/* Add 404 Route if you implemented it earlier */}
-                {/* <Route path="*" element={<NotFound />} /> */}
-
                 <Route path="/privacy" element={<PrivacyPolicy />} />
                 <Route path="/terms" element={<TermsOfService />} />
                 <Route path="/contactus" element={<ContactUs />} />
                 <Route path="/faq" element={<FAQ />} />
-
-                {/* Page Not Found */}
-                <Route path="*" element={<PageNotFound />} />
-
-
-
                 <Route path="/cookies" element={<CookiePolicy />} />
+                <Route path="*" element={<PageNotFound />} />
               </Routes>
             </div>
-           {!isDashboard && !isAuthPage && <Footer />}
+
+            {!isDashboard && !isAuthPage && <Footer />}
           </div>
-          <ScrollToTop  lenis={lenisRef.current} />
-        </AuthProvider>
-      </ThemeProvider>
-    </>
+
+          <ScrollToTop lenis={lenisRef.current} />
+        </>
+      </AuthProvider>
+    </ThemeProvider>
   );
 };
 
diff --git a/src/components/Blog.css b/src/components/Blog.css
index 4308747..d3a9cea 100644
--- a/src/components/Blog.css
+++ b/src/components/Blog.css
@@ -1,11 +1,35 @@
-/* 
-  Glassnode Style - 30 Cards Version
-*/
+/* ========== THEME VARIABLES ========== */
+.blog-page,
+.blog-detail-page {
+  --bg-dots: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+  --bg-dots-size: 24px 24px;
+
+  /* Light Mode Defaults */
+  --bg-surface: #ffffff;
+  --bg-card: #ffffff;
+  --bg-glass: rgba(69, 89, 220, 0.04);
+  --blog-border: rgba(0, 0, 0, 0.08);
+  --blog-text-primary: #15171A;
+  --blog-text-muted: #64748b;
+  --blog-accent: #4559DC;
+}
+
+.dark .blog-page,
+.dark .blog-detail-page {
+  --bg-dots: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  --bg-surface: #0f0f1a;
+  --bg-card: rgba(25, 25, 45, 0.8);
+  --bg-glass: rgba(255, 255, 255, 0.03);
+  --blog-border: rgba(255, 255, 255, 0.1);
+  --blog-text-primary: #ffffff;
+  --blog-text-muted: #a0a0a0;
+  --blog-accent: #00f3ff;
+}
 
 /* ========== BASE STYLES ========== */
 .blog-page.glassnode-style {
-  background: #0a0a0a;
-  color: #f7f8fa;
+  background: var(--bg-stars);
+  color: var(--text-main);
   min-height: 100vh;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   padding: 0;
@@ -21,9 +45,10 @@
 /* ========== HERO SECTION ========== */
 .glassnode-hero {
   text-align: center;
-  padding: 4rem 0 5rem;
+  padding: 6rem 0 5rem;
   margin-bottom: 3rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-stars);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .hero-badge {
@@ -36,7 +61,7 @@
   border-radius: 24px;
   font-size: 0.85rem;
   font-weight: 600;
-  color: #4559DC;
+  color: var(--primary-color);
   letter-spacing: 0.03em;
   margin-bottom: 1.5rem;
   backdrop-filter: blur(10px);
@@ -47,19 +72,26 @@
   font-weight: 800;
   line-height: 1.1;
   margin: 0.5rem 0 1.2rem;
-  background: linear-gradient(135deg, #00f3ff 0%, #4559DC 50%, #9d4edd 100%);
+  background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--primary-color) 50%, var(--neon-purple) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .gradient-text {
-  background: linear-gradient(135deg, #4559DC, #00f3ff);
+  background: linear-gradient(135deg, var(--primary-color), var(--neon-cyan));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+.hero-subtitle {
+  font-size: 1.25rem;
+  color: var(--text-muted);
+  max-width: 800px;
+  margin: 1.5rem auto 0;
+  line-height: 1.6;
+}
 
 
 /* ========== FEATURED SECTION ========== */
@@ -73,10 +105,10 @@
   gap: 0.8rem;
   font-size: 1.8rem;
   font-weight: 700;
-  color: #ffffff;
+  color: var(--text-main);
   margin-bottom: 2.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .featured-grid {
@@ -87,8 +119,8 @@
 
 /* Featured Card */
 .featured-card {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-panel-bg);
+  border: 1px solid var(--border-color);
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;
@@ -98,10 +130,8 @@
 .featured-card:hover {
   border-color: #4559DC;
   transform: translateY(-10px);
-  background: rgba(255, 255, 255, 0.03);
-  box-shadow:
-    0 25px 50px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(69, 89, 220, 0.1);
+  background: var(--dashboard-bg-secondary);
+  box-shadow: var(--dashboard-shadow-lg), 0 0 0 1px var(--border-color);
 }
 
 .card-image-container {
@@ -136,14 +166,14 @@
   top: 1.2rem;
   right: 1.2rem;
   padding: 0.5rem 1rem;
-  background: #4559DC;
-  color: white;
+  background: var(--primary-color);
+  color: #ffffff;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 600;
   z-index: 2;
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--border-color);
 }
 
 .card-content {
@@ -194,17 +224,18 @@
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1.3;
-  color: #ffffff;
+  color: var(--text-main);
   margin: 0 0 1rem 0;
 }
 
 .card-excerpt {
-  color: #a0a0a0;
+  color: var(--text-muted);
   font-size: 0.95rem;
   line-height: 1.6;
   margin-bottom: 1.8rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -268,7 +299,7 @@
 .section-header h2 {
   font-size: 2rem;
   font-weight: 700;
-  color: #ffffff;
+  color: var(--text-main);
   margin-bottom: 0.5rem;
 }
 
@@ -358,22 +389,24 @@
 .post-title {
   font-size: 1.2rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-main);
   margin-bottom: 0.8rem;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 .post-excerpt {
-  color: #a0a0a0;
+  color: var(--text-muted);
   font-size: 0.9rem;
   line-height: 1.5;
   margin-bottom: 1.5rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -455,6 +488,8 @@
   margin: 0 auto;
 }
 
+
+
 .newsletter-icon {
   margin-bottom: 2rem;
 }
@@ -463,15 +498,15 @@
   font-size: 2.2rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: #ffffff;
+  color: var(--text-main);
 }
 
 .highlight {
-  color: #4559DC;
+  color: var(--primary-color);
 }
 
 .newsletter-description {
-  color: #a0a0a0;
+  color: var(--text-muted);
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 2rem;
@@ -498,10 +533,10 @@
 .email-input {
   flex: 1;
   padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--dashboard-bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
-  color: #ffffff;
+  color: var(--text-main);
   font-size: 1rem;
   transition: all 0.2s ease;
 }
@@ -515,8 +550,8 @@
 
 .subscribe-btn {
   padding: 1rem 2.5rem;
-  background: linear-gradient(135deg, #4559DC, #00a6ff);
-  color: white;
+  background: var(--gradient-primary);
+  color: #ffffff;
   border: none;
   border-radius: 12px;
   font-weight: 600;
@@ -727,7 +762,12 @@
 .blog-download-btn:hover {
   transform: translateY(-2px);
   background: rgba(255, 255, 255, 0.06);
-  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45);
+  box-shadow: var(--shadow-md);
+}
+
+:root:not(.dark) .blog-download-btn:hover {
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .blog-download-btn:active {
@@ -739,17 +779,17 @@
   border: 1px dashed rgba(255, 255, 255, 0.06);
 }
 
-[data-theme="light"] .blog-download-btn {
+:root:not(.dark) .blog-download-btn {
   background: rgba(255, 255, 255, 0.96);
   color: #1e293b;
   border: 1px solid rgba(148, 163, 184, 0.4);
 }
 
-[data-theme="light"] .blog-download-btn.blog-download-txt {
+:root:not(.dark) .blog-download-btn.blog-download-txt {
   background: transparent;
 }
 
-[data-theme="light"] .blog-back-btn {
+:root:not(.dark) .blog-back-btn {
   background: radial-gradient(circle at top left, #1d4ed8, #3b82f6);
   color: white;
   border-color: #4559DC;
@@ -761,34 +801,34 @@
 }
 
 /* Light Theme */
-[data-theme="light"] .blog-page.glassnode-style {
-  background: #f7f8fa;
+:root:not(.dark) .blog-page.glassnode-style {
+  background: var(--bg-stars);
   color: #15171A;
 }
 
-[data-theme="light"] .featured-card,
-[data-theme="light"] .post-card {
+:root:not(.dark) .featured-card,
+:root:not(.dark) .post-card {
   background: white;
   border: 1px solid #e5e7eb;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
 }
 
-[data-theme="light"] .card-title,
-[data-theme="light"] .post-title {
+:root:not(.dark) .card-title,
+:root:not(.dark) .post-title {
   color: #15171A;
 }
 
-[data-theme="light"] .card-excerpt,
-[data-theme="light"] .post-excerpt {
+:root:not(.dark) .card-excerpt,
+:root:not(.dark) .post-excerpt {
   color: #666666;
 }
 
-[data-theme="light"] .newsletter-section {
+:root:not(.dark) .newsletter-section {
   background: linear-gradient(135deg, #f0f4ff, #f0fdff);
   border-color: #e0e7ff;
 }
 
-[data-theme="light"] .email-input {
+:root:not(.dark) .email-input {
   background: white;
   border-color: #d1d5db;
   color: #15171A;
@@ -796,16 +836,16 @@
 
 /* ========== BLOG DETAIL PAGE STYLES ========== */
 .blog-detail-page {
-  background: #0a0a0a;
+  background: var(--bg-stars);
   min-height: 100vh;
   padding: 2rem 1.5rem;
-  color: #f7f8fa;
+  color: var(--text-main);
 }
 
 .blog-detail-error {
   text-align: center;
   padding: 4rem 2rem;
-  color: #f7f8fa;
+  color: var(--text-muted);
 }
 
 /* Breadcrumb */
@@ -837,22 +877,27 @@
 }
 
 .breadcrumb-divider {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--blog-text-muted);
+  opacity: 0.5;
 }
 
 .breadcrumb-current {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--blog-text-primary);
+  font-weight: 600;
 }
 
 /* Header Section */
 .blog-detail-header {
   max-width: 1200px;
   margin: 0 auto 3rem;
-  padding: 2rem;
-  background: rgba(15, 15, 25, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  backdrop-filter: blur(10px);
+  padding: 2.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--blog-border);
+  border-radius: 20px;
+  backdrop-filter: blur(20px);
+  box-shadow: var(--dashboard-shadow-sm);
+  position: relative;
+  z-index: 2;
 }
 
 .blog-detail-tags {
@@ -877,9 +922,9 @@
   border-radius: 6px;
   font-size: 0.75rem;
   font-weight: 600;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.9);
+  background: var(--bg-glass);
+  border: 1px solid var(--blog-border);
+  color: var(--blog-text-primary);
 }
 
 .access-tag.premium {
@@ -899,13 +944,13 @@
   font-weight: 800;
   line-height: 1.2;
   margin: 0 0 1rem;
-  color: #ffffff;
+  color: var(--text-main);
 }
 
 .blog-detail-excerpt {
   font-size: 1.1rem;
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-muted);
   margin-bottom: 2rem;
   padding-left: 1rem;
   border-left: 3px solid #4559DC;
@@ -924,8 +969,8 @@
   align-items: center;
   gap: 1rem;
   padding: 1.25rem;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-glass);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   transition: all 0.3s;
 }
@@ -951,14 +996,14 @@
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.05em;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--blog-text-muted);
   text-transform: uppercase;
 }
 
 .metadata-value {
   font-size: 0.95rem;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--blog-text-primary);
 }
 
 /* Statistics Cards */
@@ -994,7 +1039,7 @@
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.1em;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-muted);
   text-transform: uppercase;
 }
 
@@ -1017,17 +1062,18 @@
   position: sticky;
   top: 100px;
   padding: 1.5rem;
-  background: rgba(15, 15, 25, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   backdrop-filter: blur(10px);
+  box-shadow: var(--dashboard-shadow-sm);
 }
 
 .sidebar-title {
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.1em;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-muted);
   text-transform: uppercase;
   margin-bottom: 1.5rem;
 }
@@ -1067,7 +1113,7 @@
 .toc-number {
   font-size: 0.75rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   min-width: 24px;
   transition: color 0.2s;
 }
@@ -1075,17 +1121,18 @@
 .toc-text {
   font-size: 0.9rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-main);
   line-height: 1.4;
   transition: color 0.2s;
 }
 
 /* Main Content */
 .blog-detail-main {
-  padding: 2rem;
-  background: rgba(15, 15, 25, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
+  padding: 3rem;
+  background: var(--bg-card);
+  border: 1px solid var(--blog-border);
+  border-radius: 20px;
+  box-shadow: var(--dashboard-shadow-sm);
 }
 
 .content-section {
@@ -1095,7 +1142,7 @@
 .section-heading {
   font-size: 1.8rem;
   font-weight: 700;
-  color: #ffffff;
+  color: var(--text-main);
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
   border-bottom: 2px solid rgba(69, 89, 220, 0.3);
@@ -1104,8 +1151,9 @@
 .section-text {
   font-size: 1.05rem;
   line-height: 1.8;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-main);
   margin-bottom: 1.5rem;
+  opacity: 0.9;
 }
 
 /* Footer */
@@ -1153,10 +1201,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(15, 15, 25, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
   border-radius: 50%;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-muted);
   cursor: pointer;
   backdrop-filter: blur(10px);
   transition: all 0.3s;
diff --git a/src/components/Blog.jsx b/src/components/Blog.jsx
index 80625ab..a29e1b5 100644
--- a/src/components/Blog.jsx
+++ b/src/components/Blog.jsx
@@ -492,12 +492,12 @@ export default function Blog() {
   const regularPosts = blogPosts.filter(post => !post.isFeatured);
 
   return (
-    <div className="blog-page glassnode-style">
+    <div className="blog-page glassnode-style bg-[var(--bg-deep)] text-[var(--text-main)]">
       <div className="blog-container">
-        
+
         {/* Hero Section - Glassnode Inspired */}
         <section className="glassnode-hero">
-          <motion.div 
+          <motion.div
             className="hero-content"
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -505,8 +505,8 @@ export default function Blog() {
           >
             <div className="hero-badge">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="7" stroke="#4559DC" strokeWidth="2"/>
-                <path d="M5 8L7 10L11 6" stroke="#4559DC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <circle cx="8" cy="8" r="7" stroke="var(--primary-color)" strokeWidth="2" />
+                <path d="M5 8L7 10L11 6" stroke="var(--primary-color)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
               <span>On-Chain Market Intelligence</span>
             </div>
@@ -514,7 +514,7 @@ export default function Blog() {
               Professional-Grade <span className="gradient-text">Insights</span>
             </h1>
             <p className="hero-subtitle">
-              Your portal to contextualised market analysis, and cutting edge research 
+              Your portal to contextualised market analysis, and cutting edge research
               for Bitcoin, Ethereum, DeFi and more. Access premium on-chain data and institutional-grade analysis.
             </p>
           </motion.div>
@@ -524,12 +524,12 @@ export default function Blog() {
         <div className="featured-section">
           <h2 className="section-title">
             <svg width="20" height="20" viewBox="0 0 16 17" fill="none">
-              <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" 
-                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z"
+                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
             Featured Reports
           </h2>
-          
+
           <div className="featured-grid">
             {featuredPosts.map((post, index) => (
               <motion.article
@@ -543,13 +543,13 @@ export default function Blog() {
               >
                 <div className="card-image-container">
                   <div className="image-gradient-overlay" style={{ background: post.gradient }}></div>
-                  <img 
-                    src={post.image} 
+                  <img
+                    src={post.image}
                     alt={post.title}
                     className="card-image"
                     loading="lazy"
                   />
-                  
+
                   <div className="image-badge" style={{ background: post.badgeColor }}>
                     {post.tag}
                   </div>
@@ -562,16 +562,16 @@ export default function Blog() {
                       {post.tag === "Premium" ? (
                         <div className="premium-indicator">
                           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                            <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1"/>
-                            <path d="M3.5 6L5 7.5L8.5 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                            <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1" />
+                            <path d="M3.5 6L5 7.5L8.5 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                           </svg>
                           Premium
                         </div>
                       ) : (
                         <div className="free-indicator">
                           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                            <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1"/>
-                            <path d="M8 6H4M6 4V8" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
+                            <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1" />
+                            <path d="M8 6H4M6 4V8" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
                           </svg>
                           Free
                         </div>
@@ -588,13 +588,13 @@ export default function Blog() {
                       <span className="divider">•</span>
                       <span className="read-time">{post.readTime}</span>
                     </div>
-                    
+
                     <button className="read-btn">
                       Read
                       <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                        <path d="M3.5 8H12.5M12.5 8L9 4.5M12.5 8L9 11.5" 
-                          stroke="currentColor" strokeWidth="1.5" 
-                          strokeLinecap="round" strokeLinejoin="round"/>
+                        <path d="M3.5 8H12.5M12.5 8L9 4.5M12.5 8L9 11.5"
+                          stroke="currentColor" strokeWidth="1.5"
+                          strokeLinecap="round" strokeLinejoin="round" />
                       </svg>
                     </button>
                   </div>
@@ -624,8 +624,8 @@ export default function Blog() {
                 onClick={() => navigate(`/blog/${post.id}`, { state: { post } })}
               >
                 <div className="post-image-container">
-                  <img 
-                    src={post.image}  
+                  <img
+                    src={post.image}
                     alt={post.title}
                     className="post-image"
                     loading="lazy"
@@ -640,18 +640,18 @@ export default function Blog() {
                     <span className="post-category">{post.category}</span>
                     <span className="post-date">{post.date}</span>
                   </div>
-                  
+
                   <h3 className="post-title">{post.title}</h3>
                   <p className="post-excerpt">{post.excerpt}</p>
-                  
+
                   <div className="post-footer">
                     <span className="post-read-time">{post.readTime}</span>
                     <div className="post-read-more">
                       Read Article
                       <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                        <path d="M1 7H13M13 7L9 3M13 7L9 11" 
-                          stroke="currentColor" strokeWidth="1.5" 
-                          strokeLinecap="round" strokeLinejoin="round"/>
+                        <path d="M1 7H13M13 7L9 3M13 7L9 11"
+                          stroke="currentColor" strokeWidth="1.5"
+                          strokeLinecap="round" strokeLinejoin="round" />
                       </svg>
                     </div>
                   </div>
@@ -662,14 +662,14 @@ export default function Blog() {
 
           {/* Load More Button */}
           <div className="load-more-container">
-            <motion.button 
+            <motion.button
               className="load-more-btn"
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
             >
               Load More Insights
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M8 3V13M13 8L3 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                <path d="M8 3V13M13 8L3 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
               </svg>
             </motion.button>
           </div>
diff --git a/src/components/ContactUs.css b/src/components/ContactUs.css
index 4e6ea58..1951ca9 100644
--- a/src/components/ContactUs.css
+++ b/src/components/ContactUs.css
@@ -1,89 +1,115 @@
-.contact-container{
-    padding:60px 20px;
-    max-width:900px;
-    margin:auto;
-    color:#fff;
-     background: linear-gradient(135deg, #0b021f, #1a0438);
-     margin-bottom: 10px;
-}
-.contact-header{
+.contact-container {
+    padding: 60px 20px;
+    max-width: 900px;
+    margin: auto;
+    color: var(--text-main);
+    background: transparent;
+    margin-bottom: 10px;
+}
+
+.contact-header {
     text-align: center;
     margin-bottom: 60px;
 }
-.contact-header h1{
+
+.contact-header h1 {
     font-size: 40px;
     margin-top: 10px;
-    color:#c77dff;
+    color: var(--neon-purple);
     font-weight: 700;
 }
-.contact-header p{
-    color: #cfcfcf;
-  max-width: 600px;
-  margin: 0 auto;
+
+.contact-header p {
+    color: var(--text-muted);
+    max-width: 600px;
+    margin: 0 auto;
 }
-.contact-content{
+
+.contact-content {
     display: grid;
-      grid-template-columns: 1.2fr 0.8fr;
-      gap:50px;
+    grid-template-columns: 1.2fr 0.8fr;
+    gap: 50px;
 }
-.contact-form{
-    background: rgba(255, 255, 255, 0.05);
-    padding:30px;
-    border-radius:10px;
+
+.contact-form {
+    background: var(--glass-panel-bg);
+    padding: 30px;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
 }
-.form-group{
-    margin-bottom:20px;
+
+.form-group {
+    margin-bottom: 20px;
     display: flex;
     flex-direction: column;
 }
-.form-group label{
+
+.form-group label {
     margin-bottom: 10px;
     font-weight: 600;
-    color:#ddd;
+    color: var(--text-main);
 }
+
 .form-group input,
-.form-group textarea{
-    padding:10px;
-    border-radius:10px;
-    border:1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(255, 255, 255, 0.07);
-    color:#fff
+.form-group textarea {
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    background: var(--dashboard-bg-secondary);
+    color: var(--text-main);
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    border-color: var(--neon-cyan);
+    box-shadow: 0 0 10px var(--glow-cyan);
 }
+
 .form-group input::placeholder,
-.form-group textarea::placeholder{
-    color:#bbb;
+.form-group textarea::placeholder {
+    color: var(--text-muted);
+    opacity: 0.6;
 }
-.form-group textarea{
+
+.form-group textarea {
     resize: vertical;
-    min-height:100px;
+    min-height: 100px;
 }
-button{
-    background: #c77dff;
-    color:#fff;
-    border:none;
-    padding:12px 17px;
+
+button {
+    background: var(--neon-purple);
+    color: #fff;
+    border: none;
+    padding: 12px 17px;
     border-radius: 10px;
     cursor: pointer;
     font-weight: 600;
     transition: background 0.3s ease;
 }
-button:hover{
-    background: #a64dff;
+
+button:hover {
+    background: var(--primary-color);
+    box-shadow: var(--dashboard-shadow-md);
 }
+
 .contact-info {
-  padding: 30px;
+    padding: 30px;
 }
-.contact-info h3{
+
+.contact-info h3 {
     margin-bottom: 15px;
-    color:#c77dff;
+    color: #c77dff;
 }
-.contact-info p{
+
+.contact-info p {
     margin-bottom: 10px;
-    color:#ccc;
+    color: #ccc;
 }
 
-@media (max-width:768px){
-    .contact-content{
+@media (max-width:768px) {
+    .contact-content {
         grid-template-columns: 1fr;
     }
 }
\ No newline at end of file
diff --git a/src/components/Contributors.jsx b/src/components/Contributors.jsx
index 729390c..cb1bed5 100644
--- a/src/components/Contributors.jsx
+++ b/src/components/Contributors.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import "./contributors.css"; 
+import "./contributors.css";
 
 const OWNER = "KaranUnique";
 const REPO = "CryptoHub";
@@ -15,7 +15,7 @@ const PROJECT_ADMIN = {
   repo: "CryptoHub",
   repoUrl: `https://github.com/${OWNER}/${REPO}`,
   githubUrl: `https://github.com/${OWNER}`,
-  avatarUrl: `https://avatars.githubusercontent.com/${OWNER}?v=4&s=200`, 
+  avatarUrl: `https://avatars.githubusercontent.com/${OWNER}?v=4&s=200`,
   description: "Project Creator & Lead Maintainer"
 };
 
@@ -390,13 +390,13 @@ const Contributors = () => {
           </div>
 
           <div className="project-admin-actions">
-            <button 
+            <button
               className="btn btn-primary project-admin-btn"
               onClick={() => handleOpenGitHubProfile(PROJECT_ADMIN.githubUrl)}
             >
               View GitHub Profile →
             </button>
-            <button 
+            <button
               className="btn btn-outline project-admin-btn"
               onClick={handleOpenRepo}
             >
@@ -417,7 +417,7 @@ const Contributors = () => {
         {error && (
           <div className="error-container">
             <p className="contributors-error">{error}</p>
-            <p style={{fontSize: '0.85rem', color: '#9ca3af'}}>
+            <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
               Stats will show "No contributors found" - normal if repo has no merged PRs yet.
             </p>
           </div>
@@ -426,9 +426,9 @@ const Contributors = () => {
         {!loading && !error && filteredContributors.length === 0 && (
           <div className="empty-state">
             <p className="contributors-empty">No contributors found.</p>
-            <p style={{fontSize: '0.9rem', color: '#9ca3af'}}>
-              No merged pull requests in KaranUnique/CryptoHub yet. 
-              <br/>Stats show 0 contributors, 0 PRs, 0 points ✅
+            <p style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>
+              No merged pull requests in KaranUnique/CryptoHub yet.
+              <br />Stats show 0 contributors, 0 PRs, 0 points ✅
             </p>
           </div>
         )}
diff --git a/src/components/CookiePolicy.css b/src/components/CookiePolicy.css
index 79a4a09..c4f26bb 100644
--- a/src/components/CookiePolicy.css
+++ b/src/components/CookiePolicy.css
@@ -1,23 +1,23 @@
-/* CookiePolicy.css - Scoped & Simple */
 .cookie-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
+  background: var(--bg-stars);
   padding: 2rem;
-  color: #e5e5e5;
+  color: var(--text-main);
   font-family: system-ui, -apple-system, sans-serif;
 }
 
 .cookie-container h1 {
   font-size: 2.5rem;
-  background: linear-gradient(135deg, #fff, #ccc);
+  background: var(--gradient-primary);
   -webkit-background-clip: text;
   background-clip: text;
+  -webkit-text-fill-color: transparent;
   text-align: center;
-  margin-bottom: 1rem;
-  font-weight: 700;
+  margin-bottom: 1.5rem;
+  font-weight: 800;
 }
 
-.cookie-container > p {
+.cookie-container>p {
   text-align: center;
   color: #aaa;
   margin-bottom: 2.5rem;
@@ -27,25 +27,31 @@
 section {
   max-width: 800px;
   margin: 0 auto 2.5rem;
+  background: var(--bg-card);
+  padding: 2.5rem;
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--dashboard-shadow-sm);
+}
+
+.dark section {
   background: rgba(15, 15, 35, 0.7);
-  padding: 2rem;
-  border-radius: 16px;
-  border: 1px solid rgba(255,255,255,0.1);
+  border-color: rgba(255, 255, 255, 0.1);
 }
 
 section h2 {
   font-size: 1.6rem;
-  color: #fff;
+  color: var(--text-main);
   margin-bottom: 1.2rem;
   padding-left: 1rem;
-  border-left: 3px solid #4ade80;
+  border-left: 4px solid #4ade80;
 }
 
 p {
   line-height: 1.7;
   font-size: 1.05rem;
   margin-bottom: 1rem;
-  color: #d0d0d0;
+  color: var(--text-muted);
 }
 
 ul {
@@ -57,14 +63,14 @@ ul li {
   position: relative;
   margin-bottom: 0.8rem;
   font-size: 1.05rem;
-  color: #d0d0d0;
+  color: var(--text-muted);
 }
 
 
 
 strong {
-  color: #fff;
-  font-weight: 600;
+  color: var(--text-main);
+  font-weight: 700;
 }
 
 a {
@@ -80,20 +86,20 @@ a:hover {
 }
 
 @media (max-width: 768px) {
-  .cookie-container { 
-    padding: 1rem; 
+  .cookie-container {
+    padding: 1rem;
   }
-  
-  section { 
-    padding: 1.5rem; 
-    margin-bottom: 2rem; 
+
+  section {
+    padding: 1.5rem;
+    margin-bottom: 2rem;
   }
-  
-  .cookie-container h1 { 
-    font-size: 2rem; 
+
+  .cookie-container h1 {
+    font-size: 2rem;
   }
-  
-  section h2 { 
-    font-size: 1.4rem; 
+
+  section h2 {
+    font-size: 1.4rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/FAQ.css b/src/components/FAQ.css
index d205a5c..6141898 100644
--- a/src/components/FAQ.css
+++ b/src/components/FAQ.css
@@ -1,36 +1,43 @@
-.faq-page{
-    padding:60px 20px;
-    max-width:900px;
-    margin:auto;
-    color:#fff;
-}
-.faq-title{
-    text-align:center;
-    font-size:2rem;
-    font-weight:700;
-}
-.faq-subtitle{
-    font-size: 1.2rem;
-    margin-bottom: 30px;
-    color: #b3b3b3;
-    text-align:center;
-}
-.faq-container{
-    display:flex;
-    flex-direction:column;
-    gap:16px;
-}
-.faq-item{
-     background: rgba(255, 255, 255, 0.05);
-     border-radius: 10px;
-     overflow: hidden;
-      border: 1px solid rgba(255, 255, 255, 0.1);
+.faq-page {
+  padding: 60px 20px;
+  max-width: 900px;
+  margin: auto;
+  color: var(--text-main);
 }
+
+.faq-title {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.faq-subtitle {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.faq-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.faq-item {
+  background: var(--glass-panel-bg);
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--dashboard-shadow-sm);
+}
+
 .faq-question {
   width: 100%;
   background: none;
   border: none;
-  color: #fff;
+  color: var(--text-main);
   padding: 18px 20px;
   font-size: 18px;
   display: flex;
@@ -38,6 +45,7 @@
   align-items: center;
   cursor: pointer;
 }
+
 .faq-question span {
   font-size: 24px;
 }
@@ -46,12 +54,13 @@
   max-height: 0;
   overflow: hidden;
   padding: 0 20px;
-  color: #cfcfcf;
+  color: var(--text-muted);
   line-height: 1.6;
   transition: max-height 0.4s ease, padding 0.3s ease;
 }
 
 .faq-answer.show {
-  max-height: 200px; /* enough for text */
+  max-height: 200px;
+  /* enough for text */
   padding: 0 20px 18px;
-}
+}
\ No newline at end of file
diff --git a/src/components/Features.css b/src/components/Features.css
index a16bbaf..9c945e3 100644
--- a/src/components/Features.css
+++ b/src/components/Features.css
@@ -3,23 +3,40 @@
   Cosmic Features / Chart
   -----------------------
 */
+
+/* Features Page Theme Variables */
+:root {
+  --features-bg: #fdfdfd;
+  --features-bg: var(--bg-deep);
+  --features-card-bg: var(--glass-panel-bg);
+  --features-card-border: var(--border-color);
+  --features-text: var(--text-main);
+  --features-text-muted: var(--text-muted);
+  --features-select-bg: var(--dashboard-bg-secondary);
+  --features-coin-bg: var(--dashboard-bg-elevated);
+}
+
+:root[class~="dark"] {
+  --features-bg: linear-gradient(145deg, #0a0a0f 0%, #0f0a1a 30%, #1a0f2e 60%, #0a1428 100%);
+  --features-card-bg: rgba(20, 20, 45, 0.9);
+  --features-card-border: rgba(255, 255, 255, 0.06);
+  --features-text: #ffffff;
+  --features-text-muted: rgba(255, 255, 255, 0.7);
+  --features-select-bg: linear-gradient(145deg, rgba(25, 25, 50, 0.95), rgba(15, 15, 35, 0.95));
+  --features-coin-bg: rgba(35, 35, 60, 0.8);
+}
+
 .features-container {
   min-height: 100vh;
-  background: linear-gradient(
-    145deg,
-    #0a0a0f 0%,
-    #0f0a1a 30%,
-    #1a0f2e 60%,
-    #0a1428 100%
-  );
+  background: var(--features-bg);
   padding: 2rem 1rem;
   position: relative;
   overflow-x: hidden;
   isolation: isolate;
 }
 
-/* Animated Cosmic Background */
-.features-container::before {
+/* Animated Cosmic Background - Dark Mode Only */
+:root[class~="dark"] .features-container::before {
   content: "";
   position: fixed;
   top: 0;
@@ -27,41 +44,38 @@
   width: 100%;
   height: 100%;
   background:
-    radial-gradient(
-      circle at 10% 20%,
+    radial-gradient(circle at 10% 20%,
       rgba(139, 92, 246, 0.1) 0%,
-      transparent 50%
-    ),
-    radial-gradient(
-      circle at 90% 80%,
+      transparent 50%),
+    radial-gradient(circle at 90% 80%,
       rgba(236, 72, 153, 0.1) 0%,
-      transparent 50%
-    ),
-    radial-gradient(
-      circle at 30% 90%,
+      transparent 50%),
+    radial-gradient(circle at 30% 90%,
       rgba(245, 158, 11, 0.08) 0%,
-      transparent 50%
-    );
+      transparent 50%);
   animation: cosmicShift 15s ease-in-out infinite;
   z-index: 0;
   pointer-events: none;
 }
 
 @keyframes cosmicShift {
+
   0%,
   100% {
     transform: scale(1) rotate(0deg);
   }
+
   33% {
     transform: scale(1.1) rotate(120deg);
   }
+
   66% {
     transform: scale(0.95) rotate(240deg);
   }
 }
 
-/* Floating Particles */
-.features-container::after {
+/* Floating Particles - Dark Mode Only */
+:root[class~="dark"] .features-container::after {
   content: "";
   position: absolute;
   top: 0;
@@ -87,6 +101,7 @@
   from {
     background-position: 0 0;
   }
+
   to {
     background-position: 100px 200px;
   }
@@ -103,14 +118,12 @@
 
 .features-title {
   font-size: clamp(2.8rem, 6vw, 5rem);
-  background: linear-gradient(
-    135deg,
-    #8b5cf6 0%,
-    #ec4899 25%,
-    #f59e0b 50%,
-    #10b981 75%,
-    #8b5cf6 100%
-  );
+  background: linear-gradient(135deg,
+      #8b5cf6 0%,
+      #ec4899 25%,
+      #f59e0b 50%,
+      #10b981 75%,
+      #8b5cf6 100%);
   background-size: 300% 300%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -126,10 +139,12 @@
 }
 
 @keyframes gradientShift {
+
   0%,
   100% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
@@ -139,6 +154,7 @@
   from {
     filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.8)) brightness(1);
   }
+
   to {
     filter: drop-shadow(0 0 60px rgba(236, 72, 153, 0.9)) brightness(1.1);
   }
@@ -166,24 +182,20 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  background: linear-gradient(
-    145deg,
-    rgba(25, 25, 50, 0.95),
-    rgba(15, 15, 35, 0.95)
-  );
+  background: var(--dashboard-bg-secondary);
   backdrop-filter: blur(30px);
-  border: 2px solid rgba(139, 92, 246, 0.4);
+  border: 2px solid var(--neon-cyan);
   border-radius: 24px;
   padding: 1.4rem 4rem 1.4rem 2rem;
   font-size: 1.15rem;
   font-weight: 600;
-  color: #ffffff !important;
+  color: var(--text-main) !important;
   cursor: pointer;
   min-width: 200px;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   box-shadow:
-    0 20px 40px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    0 20px 40px rgba(0, 0, 0, 0.1),
+    0 0 0 1px var(--border-color);
 }
 
 select option {
@@ -218,7 +230,7 @@ select option:hover {
   z-index: 20;
 }
 
-select:focus + .select-wrapper::after {
+select:focus+.select-wrapper::after {
   transform: translateY(-50%) rotate(180deg);
   color: #ec4899;
 }
@@ -243,25 +255,24 @@ select:focus {
 .features-card {
   position: relative;
   z-index: 10;
-  background: rgba(20, 20, 45, 0.9);
+  background: var(--features-card-bg);
   backdrop-filter: blur(60px);
   border-radius: 36px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--features-card-border);
   padding: 4rem 3rem;
   margin: 0 auto 3rem;
   max-width: 1300px;
-  box-shadow:
-    0 50px 100px -25px rgba(0, 0, 0, 0.7),
-    0 0 0 1px rgba(255, 255, 255, 0.02),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  box-shadow: var(--dashboard-shadow-lg);
   animation: cardFloat 6s ease-in-out infinite;
 }
 
 @keyframes cardFloat {
+
   0%,
   100% {
     transform: translateY(0px);
   }
+
   50% {
     transform: translateY(-10px);
   }
@@ -274,32 +285,29 @@ select:focus {
   left: 0;
   right: 0;
   height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(139, 92, 246, 0.6) 50%,
-    transparent 100%
-  );
+  background: linear-gradient(90deg,
+      transparent 0%,
+      rgba(139, 92, 246, 0.6) 50%,
+      transparent 100%);
   z-index: 5;
 }
 
 /* Chart Wrapper */
 .chart-wrapper {
-  height: 450px;
+  height: 550px;
   width: 100%;
   position: relative;
-  height: 550px;
   min-height: 450px;
   border-radius: 28px;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--dashboard-bg-secondary);
 }
 
 .chart-wrapper canvas {
   border-radius: 28px !important;
   box-shadow:
-    0 30px 60px rgba(0, 0, 0, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+    0 15px 35px rgba(0, 0, 0, 0.1),
+    0 0 0 1px var(--border-color) !important;
 }
 
 /* Loading State */
@@ -329,12 +337,14 @@ select:focus {
 }
 
 @keyframes loaderPulse {
+
   0%,
   100% {
     box-shadow:
       0 0 0 0 rgba(139, 92, 246, 0.8),
       0 0 0 0 rgba(139, 92, 246, 0.4);
   }
+
   50% {
     box-shadow:
       0 0 0 20px rgba(139, 92, 246, 0),
@@ -345,7 +355,7 @@ select:focus {
 .loading-text {
   font-size: 1.3rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-muted);
   text-align: center;
   animation: textPulse 2s ease-in-out infinite;
 }
@@ -363,7 +373,7 @@ select:focus {
   justify-content: center;
   align-items: center;
   height: 450px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--features-text-muted);
   text-align: center;
   gap: 1rem;
 }
@@ -384,13 +394,11 @@ select:focus {
   max-width: 1300px;
   margin: 0 auto 4rem;
   padding: 3rem 2rem;
-  background: rgba(25, 25, 50, 0.6);
+  background: var(--features-card-bg);
   backdrop-filter: blur(30px);
   border-radius: 28px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 30px 60px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--features-card-border);
+  box-shadow: var(--dashboard-shadow-lg);
 }
 
 .top-coins-title {
@@ -420,8 +428,8 @@ select:focus {
   align-items: center;
   padding: 1.8rem 1.5rem;
   border-radius: 20px;
-  background: rgba(35, 35, 60, 0.8);
-  border: 2px solid rgba(255, 255, 255, 0.05);
+  background: var(--features-coin-bg);
+  border: 2px solid var(--features-card-border);
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   position: relative;
@@ -436,11 +444,9 @@ select:focus {
   left: 0;
   right: 0;
   height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.1),
-    rgba(236, 72, 153, 0.1)
-  );
+  background: linear-gradient(135deg,
+      rgba(139, 92, 246, 0.1),
+      rgba(236, 72, 153, 0.1));
   opacity: 0;
   transition: opacity 0.4s ease;
 }
@@ -449,8 +455,8 @@ select:focus {
   transform: translateY(-12px) scale(1.05);
   border-color: rgba(139, 92, 246, 0.6);
   box-shadow:
-    0 35px 70px rgba(139, 92, 246, 0.4),
-    0 20px 40px rgba(0, 0, 0, 0.5);
+    0 35px 70px rgba(139, 92, 246, 0.15),
+    0 20px 40px rgba(0, 0, 0, 0.1);
 }
 
 .coin-item:hover::before {
@@ -458,15 +464,13 @@ select:focus {
 }
 
 .coin-item.active {
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.2),
-    rgba(236, 72, 153, 0.2)
-  );
+  background: linear-gradient(135deg,
+      rgba(139, 92, 246, 0.2),
+      rgba(236, 72, 153, 0.2));
   border-color: #8b5cf6;
   box-shadow:
-    0 0 0 1px rgba(139, 92, 246, 0.5),
-    0 35px 70px rgba(139, 92, 246, 0.4);
+    0 0 0 1px rgba(139, 92, 246, 0.3),
+    0 35px 70px rgba(139, 92, 246, 0.15);
   transform: scale(1.08);
 }
 
@@ -481,7 +485,7 @@ select:focus {
 .coin-name {
   font-size: 1.1rem;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--features-text);
   letter-spacing: 0.5px;
 }
 
@@ -568,7 +572,7 @@ select:focus {
 }
 
 .features-container::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--dashboard-bg-secondary);
   border-radius: 16px;
 }
 
@@ -593,6 +597,7 @@ select,
 
 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
+
   *,
   *::before,
   *::after {
@@ -603,9 +608,11 @@ select,
 }
 
 /* High DPI Displays */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
+
   .features-card,
   .top-coins-display {
     border-width: 0.5px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Features.jsx b/src/components/Features.jsx
index 336ef98..5a29277 100644
--- a/src/components/Features.jsx
+++ b/src/components/Features.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
+import { useTheme } from "@/context/ThemeContext";
 import { Line } from "react-chartjs-2";
 import "./Features.css";
 // eslint-disable-next-line no-unused-vars
@@ -29,6 +30,7 @@ const Features = () => {
     { id: "binancecoin", name: "BNB", symbol: "BNB", color: "#F3BA2F" },
     { id: "cardano", name: "Cardano", symbol: "ADA", color: "#2979FF" },
   ];
+  const { isDark } = useTheme();
 
   const [selectedCoin, setSelectedCoin] = useState(topCoins[0].id);
   const [days, setDays] = useState(1);
@@ -151,113 +153,113 @@ const Features = () => {
           </div>
         </div>
 
-      {/* CARD */}
-      <div className="features-card">
-        {loading ? (
-          <div className="features-loading">
-            <div className="loader"></div>
-            <p className="loading-text">Loading {topCoins.find(c => c.id === selectedCoin)?.name} chart...</p>
-          </div>
-        ) : prices.length === 0 ? (
-          <div className="no-data">
-            <h3>No data available</h3>
-            <p>Please try a different coin or time range</p>
-          </div>
-        ) : (
-          <div className="chart-wrapper">
-            <Line 
-              data={chartData}
-              options={{
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                  legend: {
-                    display: false
-                  },
-                  tooltip: {
-                    mode: 'index',
-                    intersect: false,
-                    backgroundColor: 'rgba(15, 23, 42, 0.95)',
-                    titleColor: '#f8fafc',
-                    bodyColor: currentCoin.color,
-                    borderColor: 'rgba(255, 255, 255, 0.1)',
-                    borderWidth: 1,
-                    padding: 12,
-                    cornerRadius: 8,
-                    titleFont: { family: 'Outfit', size: 14, weight: 'bold' },
-                    bodyFont: { family: 'JetBrains Mono', size: 13 },
-                    callbacks: {
-                      label: function (context) {
-                        let label = context.dataset.label || '';
-                        if (label) {
-                          label = 'Price: ';
-                        }
-                        if (context.parsed.y !== null) {
-                          label += new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(context.parsed.y);
+        {/* CARD */}
+        <div className="features-card">
+          {loading ? (
+            <div className="features-loading">
+              <div className="loader"></div>
+              <p className="loading-text">Loading {topCoins.find(c => c.id === selectedCoin)?.name} chart...</p>
+            </div>
+          ) : prices.length === 0 ? (
+            <div className="no-data">
+              <h3>No data available</h3>
+              <p>Please try a different coin or time range</p>
+            </div>
+          ) : (
+            <div className="chart-wrapper">
+              <Line
+                data={chartData}
+                options={{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      display: false
+                    },
+                    tooltip: {
+                      mode: 'index',
+                      intersect: false,
+                      backgroundColor: 'rgba(15, 23, 42, 0.95)',
+                      titleColor: '#f8fafc',
+                      bodyColor: currentCoin.color,
+                      borderColor: 'rgba(255, 255, 255, 0.1)',
+                      borderWidth: 1,
+                      padding: 12,
+                      cornerRadius: 8,
+                      titleFont: { family: 'Outfit', size: 14, weight: 'bold' },
+                      bodyFont: { family: 'JetBrains Mono', size: 13 },
+                      callbacks: {
+                        label: function (context) {
+                          let label = context.dataset.label || '';
+                          if (label) {
+                            label = 'Price: ';
+                          }
+                          if (context.parsed.y !== null) {
+                            label += new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(context.parsed.y);
+                          }
+                          return label;
                         }
-                        return label;
                       }
                     }
-                  }
-                },
-                scales: {
-                  x: {
-                    ticks: {
-                      color: '#64748b',
-                      font: { family: 'JetBrains Mono', size: 11 },
-                      maxTicksLimit: 6,
-                      maxRotation: 0
-                    },
-                    grid: {
-                      color: 'rgba(255, 255, 255, 0.03)',
-                      drawBorder: false,
-                    }
                   },
-                  y: {
-                    position: 'right',
-                    ticks: {
-                      color: '#64748b',
-                      font: { family: 'JetBrains Mono', size: 11 },
-                      callback: function (value) {
-                        return '₹' + value.toLocaleString();
+                  scales: {
+                    x: {
+                      ticks: {
+                        color: isDark ? '#94a3b8' : '#475569',
+                        font: { family: 'JetBrains Mono', size: 11 },
+                        maxTicksLimit: 6,
+                        maxRotation: 0
+                      },
+                      grid: {
+                        color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false,
                       }
                     },
-                    grid: {
-                      color: 'rgba(255, 255, 255, 0.03)',
-                      drawBorder: false,
+                    y: {
+                      position: 'right',
+                      ticks: {
+                        color: isDark ? '#94a3b8' : '#475569',
+                        font: { family: 'JetBrains Mono', size: 11 },
+                        callback: function (value) {
+                          return '₹' + value.toLocaleString();
+                        }
+                      },
+                      grid: {
+                        color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+                        drawBorder: false,
+                      }
                     }
+                  },
+                  interaction: {
+                    mode: 'index',
+                    intersect: false,
+                  },
+                  hover: {
+                    mode: 'index',
+                    intersect: false
                   }
-                },
-                interaction: {
-                  mode: 'index',
-                  intersect: false,
-                },
-                hover: {
-                  mode: 'index',
-                  intersect: false
-                }
-              }}
-            />
-          </div>
-        )}
-      </div>
-
-      {/* TOP 5 COINS DISPLAY */}
-      <div className="top-coins-display">
-        <h3 className="top-coins-title">Top 5 Coins</h3>
-        <div className="coins-grid">
-          {topCoins.map((coin) => (
-            <div 
-              key={coin.id}
-              className={`coin-item ${selectedCoin === coin.id ? 'active' : ''}`}
-              onClick={() => setSelectedCoin(coin.id)}
-            >
-              <span className="coin-symbol">{coin.symbol}</span>
-              <span className="coin-name">{coin.name}</span>
+                }}
+              />
             </div>
-          ))}
+          )}
+        </div>
+
+        {/* TOP 5 COINS DISPLAY */}
+        <div className="top-coins-display">
+          <h3 className="top-coins-title">Top 5 Coins</h3>
+          <div className="coins-grid">
+            {topCoins.map((coin) => (
+              <div
+                key={coin.id}
+                className={`coin-item ${selectedCoin === coin.id ? 'active' : ''}`}
+                onClick={() => setSelectedCoin(coin.id)}
+              >
+                <span className="coin-symbol">{coin.symbol}</span>
+                <span className="coin-name">{coin.name}</span>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
       </motion.div>
 
       <div className="features-note">
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 8b2c434..74c2030 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -1,9 +1,23 @@
 /* Main Container */
+:root {
+  --footer-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+  --footer-text: #475569;
+  --footer-border: rgba(0, 0, 0, 0.08);
+  --footer-heading: #1e293b;
+}
+
+:root[class~="dark"] {
+  --footer-bg: linear-gradient(180deg, #0b0028 0%, #1a0033 100%);
+  --footer-text: #b8bdd0;
+  --footer-border: rgba(255, 255, 255, 0.08);
+  --footer-heading: #fff;
+}
+
 .footer-container {
   width: 100%;
-  background: linear-gradient(180deg, #0b0028 0%, #1a0033 100%);
-  color: #fff;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--footer-bg);
+  color: var(--footer-heading);
+  border-top: 1px solid var(--footer-border);
   position: relative;
   overflow: hidden;
 }
@@ -52,7 +66,7 @@
 }
 
 .footer-brand p {
-  color: #b8bdd0;
+  color: var(--footer-text);
   font-size: 15px;
   line-height: 1.6;
   margin-bottom: 24px;
@@ -84,7 +98,7 @@
 .footer-newsletter h4 {
   font-size: 16px;
   font-weight: 700;
-  color: #fff;
+  color: var(--footer-heading);
   margin-bottom: 20px;
   letter-spacing: -0.02em;
 }
@@ -100,7 +114,7 @@
 }
 
 .footer-links a {
-  color: #b8bdd0;
+  color: var(--footer-text);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
@@ -109,13 +123,13 @@
 }
 
 .footer-links a:hover {
-  color: #fff;
+  color: var(--footer-heading);
   transform: translateX(4px);
 }
 
 /* Newsletter */
 .footer-newsletter p {
-  color: #b8bdd0;
+  color: var(--footer-text);
   font-size: 14px;
   margin-bottom: 20px;
 }
@@ -128,18 +142,18 @@
 
 .newsletter-form input {
   flex: 1;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--glass-panel-bg);
+  border: 1px solid var(--footer-border);
   border-radius: 12px;
   padding: 14px 18px;
-  color: #fff;
+  color: var(--footer-heading);
   font-size: 15px;
   backdrop-filter: blur(20px);
   transition: all 0.3s ease;
 }
 
 .newsletter-form input::placeholder {
-  color: #8f9bba;
+  color: var(--footer-text);
 }
 
 .newsletter-form input:focus {
@@ -194,7 +208,7 @@
 
 /* Bottom Section */
 .footer-bottom-section {
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--footer-border);
   padding-top: 32px;
   display: flex;
   justify-content: space-between;
@@ -212,12 +226,12 @@
   width: 44px;
   height: 44px;
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--glass-card-bg);
+  border: 1px solid var(--footer-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #b8bdd0;
+  color: var(--footer-text);
   font-size: 18px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(10px);
@@ -226,7 +240,7 @@
 .social-links a:hover {
   background: rgba(121, 40, 202, 0.2);
   border-color: #7928ca;
-  color: #fff;
+  color: var(--footer-heading);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(121, 40, 202, 0.3);
 }
@@ -237,13 +251,13 @@
 
 .footer-bottom p {
   font-size: 13px;
-  color: #8f9bba;
+  color: var(--footer-text);
   margin: 0;
   line-height: 1.5;
 }
 
 .footer-bottom a {
-  color: #b8bdd0;
+  color: var(--footer-text);
   text-decoration: none;
   margin: 0 12px;
 }
@@ -251,28 +265,34 @@
 .footer-bottom a:hover {
   color: #7928ca;
 }
-.footer-newsletter{
-  max-width:100%;
+
+.footer-newsletter {
+  max-width: 100%;
 }
-.footer-newsletter form{
-  display:flex;
-  flex-wrap:wrap;
-  gap:10px;
+
+.footer-newsletter form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
-.footer-newsletter form input{
+
+.footer-newsletter form input {
   border-radius: 5px;
-  flex:1;
-padding:5px 0px;
+  flex: 1;
+  padding: 5px 0px;
 }
-.footer-newsletter form input::placeholder{
-  padding-left:10px;
+
+.footer-newsletter form input::placeholder {
+  padding-left: 10px;
 }
-button{
+
+button {
   border-radius: 5px;
-  padding:5px 10px;
+  padding: 5px 10px;
   background-color: #666;
 }
-button:hover{
+
+button:hover {
   background-color: #7928ca;
 }
 
@@ -282,6 +302,7 @@ button:hover{
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -294,7 +315,7 @@ button:hover{
     grid-template-columns: 1fr 1fr 1fr;
     gap: 32px;
   }
-  
+
   .footer-brand {
     grid-column: span 3;
   }
@@ -304,30 +325,30 @@ button:hover{
   .footer-content {
     padding: 40px 20px 20px;
   }
-  
+
   .footer-main {
     grid-template-columns: 1fr;
     gap: 32px;
   }
-  
+
   .footer-brand {
     text-align: center;
   }
-  
+
   .payment-methods {
     justify-content: center;
   }
-  
+
   .footer-bottom-section {
     flex-direction: column;
     text-align: center;
   }
-  
+
   .footer-bottom {
     text-align: center;
     order: -1;
   }
-  
+
   .newsletter-form {
     max-width: 100%;
   }
@@ -337,13 +358,13 @@ button:hover{
   .social-links {
     justify-content: center;
   }
-  
+
   .payment-methods {
     gap: 6px;
   }
-  
+
   .payment-icon {
     width: 36px;
     height: 24px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/LoadingSpinner.css b/src/components/LoadingSpinner.css
index bc18a72..425227e 100644
--- a/src/components/LoadingSpinner.css
+++ b/src/components/LoadingSpinner.css
@@ -9,16 +9,16 @@
   justify-content: center;
   align-items: center;
   z-index: 9999;
-  background: transparent; /* No background overlay */
+  background: transparent;
+  /* No background overlay */
 }
 
 .spinner-card {
-  background: rgba(31, 31, 31, 0.95);
+  background: var(--glass-panel-bg);
   padding: 30px 40px;
   border-radius: 16px;
-  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3),
-              0 0 0 1px rgba(127, 92, 255, 0.3);
-  border: 1px solid rgba(127, 92, 255, 0.4);
+  box-shadow: var(--dashboard-shadow-lg);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,6 +32,7 @@
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -84,14 +85,23 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes bounce {
-  0%, 80%, 100% {
+
+  0%,
+  80%,
+  100% {
     transform: scale(0);
   }
+
   40% {
     transform: scale(1);
   }
diff --git a/src/components/Login.css b/src/components/Login.css
index ddd3366..0a0ea48 100644
--- a/src/components/Login.css
+++ b/src/components/Login.css
@@ -69,7 +69,7 @@
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 10px;
-  color: #fff;
+  color: var(--text-main);
 }
 
 .auth-subtitle {
@@ -112,11 +112,11 @@
 
 .auth-input {
   width: 100%;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--dashboard-bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 12px 50px 12px 60px;
-  color: #fff;
+  color: var(--text-main);
   font-size: 1rem;
   outline: none;
   transition: all 0.3s ease;
@@ -149,7 +149,7 @@
 }
 
 .toggle-password:hover {
-  color: #fff;
+  color: var(--text-main);
 }
 
 /* Error Messages */
@@ -207,7 +207,7 @@
 }
 
 .forgot-password:hover {
-  color: #fff;
+  color: var(--primary-color);
   text-decoration: underline;
 }
 
@@ -231,7 +231,7 @@
 .divider::after {
   content: "";
   flex: 1;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .divider span {
@@ -249,16 +249,16 @@
   border-radius: 12px;
   cursor: pointer;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-main);
   margin-bottom: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--glass-border);
+  background: var(--glass-panel-bg);
   transition: all 0.3s;
 }
 
 .google-signin-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
+  background: var(--dashboard-bg-secondary);
+  border-color: var(--dashboard-border-hover);
   transform: translateY(-2px);
 }
 
@@ -300,72 +300,8 @@
   }
 }
 
-/* Google Sign-In Button */
-.divider {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin: 24px 0;
-}
-
-.divider::before,
-.divider::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.divider span {
-  padding: 0 16px;
-  color: #b8b8b8;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.google-signin-btn {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.google-signin-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(121, 39, 255, 0.3);
-  transform: translateY(-2px);
-}
-
+/* Google Sign-In Button - Disabled State */
 .google-signin-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-}
-
-body[data-theme="light"] .divider::before,
-body[data-theme="light"] .divider::after {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-}
-
-body[data-theme="light"] .divider span {
-  color: #718096;
-}
-
-body[data-theme="light"] .google-signin-btn {
-  background: #ffffff;
-  border-color: #cbd5e0;
-  color: #2d3748;
-}
-
-body[data-theme="light"] .google-signin-btn:hover:not(:disabled) {
-  background: #f7fafc;
-  border-color: #7927ff;
 }
\ No newline at end of file
diff --git a/src/components/MarketFilters.css b/src/components/MarketFilters.css
index d862aa9..bba7e06 100644
--- a/src/components/MarketFilters.css
+++ b/src/components/MarketFilters.css
@@ -12,26 +12,28 @@
 
 .filter-label {
   font-size: 14px;
-  color: #aaa;
+  color: var(--text-muted);
 }
 
 .filter-btn {
   padding: 6px 14px;
   border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background: transparent;
-  color: #fff;
+  border: 1px solid var(--border-color);
+  background: var(--dashboard-bg-secondary);
+  color: var(--text-main);
   cursor: pointer;
-  transition: background 0.2s ease, border 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .filter-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--dashboard-accent-cyan-dim);
+  border-color: var(--neon-cyan);
 }
 
 .filter-btn.active {
-  background: #7927ff;
-  border-color: #7927ff;
+  background: var(--neon-purple);
+  border-color: var(--neon-purple);
+  color: #fff;
 }
 
 /* Toggle button hidden on desktop */
@@ -45,10 +47,11 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-}
+  }
+
   .filter-toggle {
     display: block;
-    background: #111;
+    background: var(--dashboard-bg-secondary);
     color: #fff;
     border: none;
     padding: 10px 14px;
@@ -61,9 +64,10 @@
     align-items: flex-start;
     gap: 8px;
     margin-top: 10px;
-    background: #111;
+    background: var(--dashboard-bg-secondary);
     padding: 10px;
     border-radius: 8px;
+    border: 1px solid var(--border-color);
 
     /* Animation setup */
     opacity: 0;
@@ -81,7 +85,8 @@
   .market-filters.open {
     opacity: 1;
     transform: translateY(0);
-    max-height: 300px; /* safe height */
+    max-height: 300px;
+    /* safe height */
     pointer-events: auto;
   }
 
@@ -93,4 +98,4 @@
     width: 100%;
     text-align: left;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 6d34279..e91ff2f 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -1,2059 +1,379 @@
-/* RESPONSIVE NAVBAR CSS WITH MOBILE DROPDOWN MENU */
 
-/* Base Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  --primary-color: #b026ff;
-  --secondary-color: #00f3ff;
-  --bg-dark: #0a0a0f;
-  --text-light: #ffffff;
-  --border-color: rgba(255, 255, 255, 0.1);
-  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --transition-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-/* MOTION & ANIMATION KEYFRAMES */
-
-/* Navbar slide-down entrance animation */
-@keyframes navbarSlideDown {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Staggered fade-in for nav items */
-@keyframes navItemFadeIn {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Glow pulse effect */
-@keyframes glowPulse {
-  0%,
-  100% {
-    box-shadow:
-      0 0 5px rgba(0, 243, 255, 0.3),
-      0 0 10px rgba(176, 38, 255, 0.2);
-  }
-  50% {
-    box-shadow:
-      0 0 15px rgba(0, 243, 255, 0.5),
-      0 0 25px rgba(176, 38, 255, 0.4);
-  }
-}
+/* === Overrides: logo size & theme toggle contrast === */
 
-/* Shimmer effect for buttons */
-@keyframes shimmer {
-  0% {
-    background-position: -200% center;
-  }
-  100% {
-    background-position: 200% center;
-  }
+.navbar-logo img {
+  width: 56px; /* slightly larger logo */
+  height: auto;
+  flex-shrink: 0;
 }
 
-/* Floating animation */
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.04); /* light subtle contrast */
+  border: 1px solid rgba(148, 163, 184, 0.6);
+  color: #0f172a;
+  cursor: pointer;
+  transition: all 0.25s ease;
 }
 
-/* Border gradient animation */
-@keyframes borderGlow {
-  0%,
-  100% {
-    border-color: rgba(0, 243, 255, 0.3);
-  }
-  50% {
-    border-color: rgba(176, 38, 255, 0.5);
-  }
+/* Dark mode base */
+.dark .theme-toggle-btn {
+  background: rgba(15, 23, 42, 0.85);
+  border-color: rgba(148, 163, 184, 0.9);
+  color: #e5e7eb;
 }
 
-/* Ripple effect */
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(4);
-    opacity: 0;
-  }
+/* Light mode hover */
+.theme-toggle-btn:hover {
+  background: #0f172a;
+  color: #f9fafb;
+  border-color: #0f172a;
+  box-shadow: 0 0 12px rgba(15, 23, 42, 0.35);
 }
 
-/* Text gradient animation */
-@keyframes gradientShift {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
+/* Dark mode hover */
+.dark .theme-toggle-btn:hover {
+  background: #f9fafb;
+  color: #020617;
+  border-color: #f9fafb;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
 }
+/* ========================= */
+/* NAVBAR CLEAN STABLE FIX  */
+/* ========================= */
 
-/* Navbar Container */
 .navbar {
   position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
   width: 100%;
-  background: rgba(10, 10, 15, 0.95);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-bottom: 1px solid var(--border-color);
-  padding: 0.875rem 2%;
-  z-index: 1000;
-  transition: all 0.4s var(--transition-smooth);
-  /* Entrance animation */
-  animation: navbarSlideDown 0.6s var(--transition-elastic) forwards;
-  overflow: visible;
+  backdrop-filter: blur(12px); /* reduced from 20px */
+  -webkit-backdrop-filter: blur(12px);
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  z-index: 999;
+  transition: background 0.3s ease, border 0.3s ease;
 }
 
-/* Subtle border glow animation on navbar */
-.navbar::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(0, 243, 255, 0.5),
-    rgba(176, 38, 255, 0.5),
-    transparent
-  );
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
 
-.navbar:hover::after {
-  opacity: 1;
+/* LIGHT MODE */
+.navbar {
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }
 
-.navbar.scrolled {
-  padding: 0.65rem 2%;
-  background: rgba(10, 10, 15, 0.98);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+/* DARK MODE */
+.dark .navbar {
+  background: rgba(12, 12, 28, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-/* Navbar Content Container */
-.navbar-content {
+.navbar-container {
+  max-width: 1400px;
+  margin: auto;
+  padding: 0.8rem 2rem;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: 1.2rem;
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  min-height: 56px;
-}
-
-/* Desktop layout - grid for logo, menu, actions */
-@media (min-width: 768px) {
-  .navbar-content {
-    display: grid;
-    grid-template-columns: auto 1fr auto; /* logo | menu | actions */
-    gap: 1rem;
-    align-items: center;
-  }
-}
-
-@media (min-width: 1024px) {
-  .navbar-content {
-    gap: 2rem;
-  }
+  justify-content: space-between;
 }
 
-@media (min-width: 1280px) {
-  .navbar-content {
-    gap: 3rem;
-  }
-}
+/* LOGO */
 
-/* Logo/Brand */
 .navbar-logo {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: 10px;
+  font-weight: 700;
+  font-size: 1.2rem;
   text-decoration: none;
-  flex-shrink: 0;
-  font-weight: 800;
-  font-size: 1.35rem;
-  background: linear-gradient(135deg, #ffffff 0%, #00f3ff 50%, #b026ff 100%);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transition: all 0.4s var(--transition-elastic);
-  position: relative;
-  padding: 0;
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.1s both;
-}
-
-.navbar-logo:hover {
-  transform: translateY(-3px) scale(1.02);
-  animation:
-    gradientShift 2s ease infinite,
-    float 2s ease-in-out infinite;
-  filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.4));
-}
-
-.navbar-logo::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00f3ff, #b026ff);
-  transition: width 0.4s var(--transition-smooth);
-  border-radius: 2px;
-}
-
-.navbar-logo:hover::after {
-  width: 100%;
+  transition: color 0.3s ease;
 }
 
-.navbar-logo-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.2) 0%,
-    rgba(0, 243, 255, 0.15) 50%,
-    rgba(176, 38, 255, 0.1) 100%
-  );
-  border: 1.5px solid rgba(176, 38, 255, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.4s var(--transition-smooth);
-  position: relative;
-  overflow: hidden;
-}
-
-.navbar-logo-icon::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.1),
-    transparent
-  );
-  transition: left 0.6s var(--transition-smooth);
-}
-
-.navbar-logo:hover .navbar-logo-icon {
-  border-color: rgba(0, 243, 255, 0.6);
-  box-shadow:
-    0 8px 32px rgba(0, 243, 255, 0.25),
-    0 0 0 1px rgba(176, 38, 255, 0.2);
-  transform: rotate(5deg) scale(1.05);
+/* Light */
+.navbar-logo {
+  color: #111;
 }
 
-.navbar-logo:hover .navbar-logo-icon::before {
-  left: 100%;
+/* Dark */
+.dark .navbar-logo {
+  color: #fff;
 }
 
-.logo-img {
-  width: 70%;
-  height: 70%;
-  object-fit: contain;
-  filter: drop-shadow(0 0 6px rgba(0, 243, 255, 0.8))
-    drop-shadow(0 0 12px rgba(176, 38, 255, 0.4));
-  transition: all 0.4s var(--transition-smooth);
+.navbar-logo img {
+  width: 45px;
 }
 
-.navbar-logo:hover .logo-img {
-  transform: scale(1.1);
-  filter: drop-shadow(0 0 8px rgba(0, 243, 255, 1))
-    drop-shadow(0 0 16px rgba(176, 38, 255, 0.6));
-}
+/* MENU */
 
-/* Desktop Navigation Menu */
 .navbar-menu {
   display: flex;
-  flex-direction: column;
+  gap: 1.5rem;
   list-style: none;
-  gap: 1.2rem;
-  padding: 0;
-  margin: 0;
-}
-
-@media (min-width: 768px) {
-  .navbar-menu {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    max-width: none;
-    margin: 0;
-    padding: 0;
-    gap: 0.5rem;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-@media (min-width: 1024px) {
-  .navbar-menu {
-    gap: 0.875rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .navbar-menu {
-    gap: 1.2rem;
-  }
+  align-items: center;
 }
 
 .navbar-item {
-  display: flex;
   position: relative;
 }
 
-.navbar-item:hover {
-  z-index: 100;
+.navbar-link {
+  background: none;
+  border: none;
+  font-size: 0.95rem;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 8px 14px;
+  border-radius: 8px;
+  transition: 0.25s ease;
 }
 
+/* Light */
 .navbar-link {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 1.125rem;
-  color: rgba(255, 255, 255, 0.75);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.95rem;
-  letter-spacing: 0.3px;
-  transition: all 0.3s var(--transition-smooth);
-  position: relative;
-  white-space: nowrap;
-  border-radius: 10px;
-  overflow: hidden;
-  z-index: 1;
+  color: #333;
 }
 
-.navbar-link::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.1) 0%,
-    rgba(0, 243, 255, 0.05) 100%
-  );
-  border-radius: 10px;
-  transform: scaleX(0);
-  transform-origin: right;
-  transition: transform 0.4s var(--transition-smooth);
-  z-index: -1;
+/* Dark */
+.dark .navbar-link {
+  color: #ddd;
 }
 
 .navbar-link:hover {
-  color: #ffffff;
-  transform: translateY(-3px) scale(1.05);
-  text-shadow:
-    0 0 10px rgba(0, 243, 255, 0.5),
-    0 0 20px rgba(176, 38, 255, 0.3);
+  background: rgba(176, 38, 255, 0.08);
+  color: #b026ff;
 }
 
-.navbar-item:hover .navbar-link {
-  color: #ffffff;
-  transform: translateY(-3px) scale(1.05);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5),
-                0 0 20px rgba(176, 38, 255, 0.3);
+.dark .navbar-link:hover {
+  background: rgba(176, 38, 255, 0.15);
 }
 
-.navbar-link:focus-visible,
-.navbar-link:active {
-  color: #ffffff;
-  transform: translateY(-3px) scale(1.05);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5),
-                0 0 20px rgba(176, 38, 255, 0.3);
+.navbar-link.active {
+  background: rgba(176, 38, 255, 0.12);
+  color: #b026ff;
 }
 
-.navbar-link:hover::before {
-  transform: scaleX(1);
-  transform-origin: left;
-}
+/* DROPDOWN */
 
-.navbar-item:hover .navbar-link::before {
-  transform: scaleX(1);
-  transform-origin: left;
+.dropdown-menu {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  border-radius: 10px;
+  padding: 10px 0;
+  min-width: 180px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: background 0.3s ease;
 }
 
-.navbar-link:focus-visible::before,
-.navbar-link:active::before {
-  transform: scaleX(1);
-  transform-origin: left;
+/* Light */
+.dropdown-menu {
+  background: #fff;
 }
 
-.navbar-link::after {
-  content: "";
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00f3ff, #b026ff);
-  border-radius: 2px;
-  transition: all 0.4s var(--transition-bounce);
-  opacity: 0;
-  box-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
+/* Dark */
+.dark .dropdown-menu {
+  background: #1a1a2e;
 }
 
-.navbar-link:hover::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
+.dropdown-menu li {
+  list-style: none;
 }
 
-.navbar-item:hover .navbar-link::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
+.dropdown-menu a {
+  display: block;
+  padding: 10px 18px;
+  text-decoration: none;
+  transition: 0.2s;
 }
 
-.navbar-link:focus-visible::after,
-.navbar-link:active::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
+/* Light */
+.dropdown-menu a {
+  color: #333;
 }
 
-/* Staggered animation for nav items */
-.navbar-item:nth-child(1) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.15s both;
-}
-.navbar-item:nth-child(2) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.2s both;
-}
-.navbar-item:nth-child(3) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.25s both;
-}
-.navbar-item:nth-child(4) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.3s both;
-}
-.navbar-item:nth-child(5) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.35s both;
-}
-.navbar-item:nth-child(6) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.4s both;
-}
-.navbar-item:nth-child(7) {
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.45s both;
+/* Dark */
+.dark .dropdown-menu a {
+  color: #ddd;
 }
 
-.navbar-link.active {
-  color: #ffffff;
-  font-weight: 600;
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15) 0%,
-    rgba(0, 243, 255, 0.1) 100%
-  );
-  box-shadow:
-    0 4px 20px rgba(176, 38, 255, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  animation: borderGlow 3s ease infinite;
-  border: 1px solid rgba(0, 243, 255, 0.2);
+.dropdown-menu a:hover {
+  background: rgba(176, 38, 255, 0.08);
+  color: #b026ff;
 }
 
-.navbar-link.active::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 2s ease infinite;
-}
+/* RIGHT SIDE */
 
-/* Actions Container */
 .navbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  flex-shrink: 0;
-}
-
-/* Desktop Auth */
-.desktop-auth {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
-/* Mobile Only Elements */
-.mobile-only {
-  display: none;
-}
+/* BUTTONS */
 
-/* Action Buttons */
 .navbar-btn {
-  padding: 0.75rem 1.5rem;
-  border-radius: 12px;
-  font-weight: 600;
-  font-size: 0.95rem;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 0.9rem;
   text-decoration: none;
-  transition: all 0.4s var(--transition-smooth);
-  cursor: pointer;
-  border: none;
-  white-space: nowrap;
-  display: inline-block;
-  text-align: center;
-  min-width: fit-content;
-  position: relative;
-  overflow: hidden;
-  letter-spacing: 0.5px;
-  z-index: 1;
-}
-
-.navbar-btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: inherit;
-  border-radius: inherit;
-  z-index: -1;
-  transition: transform 0.4s var(--transition-smooth);
-}
-
-.navbar-btn:hover::before {
-  transform: scale(1.05);
+  transition: 0.25s;
 }
 
-.navbar-btn-login {
-  color: #ffffff;
-  background: transparent;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  padding: 0.75rem 1.8rem;
-  position: relative;
-  overflow: hidden;
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.4s both;
-  transition: all 0.3s var(--transition-elastic);
+/* Login Button */
+.navbar-btn.login {
+  border: 1px solid #ccc;
+  color: #333;
 }
 
-.navbar-btn-login::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
-  transition: left 0.5s var(--transition-smooth);
+.dark .navbar-btn.login {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #ddd;
 }
 
-/* Ripple container for login button */
-.navbar-btn-login::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition:
-    width 0.6s ease,
-    height 0.6s ease;
+/* Signup Button */
+.navbar-btn.signup {
+  background: linear-gradient(135deg, #00f3ff, #b026ff);
+  color: white;
 }
 
-.navbar-btn-login:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(0, 243, 255, 0.5);
-  transform: translateY(-3px) scale(1.03);
-  box-shadow:
-    0 8px 32px rgba(0, 243, 255, 0.15),
-    0 0 0 1px rgba(0, 243, 255, 0.1);
-  color: #00f3ff;
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
-}
+/* PROFILE */
 
-.navbar-btn-login:hover::after {
-  left: 100%;
+.profile-menu-container {
+  position: relative;
 }
 
-.navbar-btn-login:hover::before {
-  width: 300px;
-  height: 300px;
-  opacity: 0;
+.profile-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  transition: color 0.3s ease;
 }
 
-.navbar-btn-login:active {
-  transform: translateY(-1px) scale(0.98);
+/* Light */
+.profile-btn {
+  color: #333;
 }
 
-.navbar-btn-signup {
-  background: linear-gradient(135deg, #00f3ff 0%, #b026ff 50%, #00f3ff 100%);
-  background-size: 200% auto;
-  color: #000000;
-  padding: 0.75rem 2rem;
-  font-weight: 700;
-  box-shadow:
-    0 4px 20px rgba(0, 243, 255, 0.3),
-    0 0 0 1px rgba(176, 38, 255, 0.2);
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.5s both;
-  transition: all 0.3s var(--transition-elastic);
-  position: relative;
-  z-index: 1;
+/* Dark */
+.dark .profile-btn {
+  color: #ddd;
 }
 
-.navbar-btn-signup::before {
-  content: "";
+.profile-dropdown {
   position: absolute;
-  top: 0;
-  left: 0;
   right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #00f3ff 0%, #b026ff 50%, #00f3ff 100%);
-  background-size: 200% auto;
-  border-radius: inherit;
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.navbar-btn-signup:hover {
-  transform: translateY(-4px) scale(1.05);
-  box-shadow:
-    0 15px 45px rgba(0, 243, 255, 0.5),
-    0 0 0 2px rgba(176, 38, 255, 0.4),
-    0 0 40px rgba(176, 38, 255, 0.3),
-    0 0 60px rgba(0, 243, 255, 0.2);
-  animation: shimmer 1.5s linear infinite;
-  color: #ffffff;
-  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  top: 120%;
+  border-radius: 10px;
+  padding: 12px;
+  min-width: 220px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: background 0.3s ease;
 }
 
-.navbar-btn-signup:hover::before {
-  opacity: 1;
-  animation: shimmer 1.5s linear infinite;
+/* Light */
+.profile-dropdown {
+  background: white;
 }
 
-.navbar-btn-signup:active {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow:
-    0 8px 25px rgba(0, 243, 255, 0.4),
-    0 0 0 1px rgba(176, 38, 255, 0.3);
+/* Dark */
+.dark .profile-dropdown {
+  background: #1a1a2e;
 }
 
-/* User Menu */
-.user-menu {
+.profile-dropdown a,
+.profile-dropdown button {
   display: flex;
+  gap: 8px;
   align-items: center;
-  gap: 0.875rem;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 10px 18px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  flex-shrink: 0;
-  backdrop-filter: blur(10px);
-  transition: all 0.4s var(--transition-elastic);
-  animation: navItemFadeIn 0.5s var(--transition-smooth) 0.3s both;
-  position: relative;
-  overflow: hidden;
-}
-
-.user-menu::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.05),
-    transparent
-  );
-  transition: left 0.8s var(--transition-smooth);
-}
-
-.user-menu:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(0, 243, 255, 0.3);
-  transform: translateY(-2px);
-  box-shadow:
-    0 12px 32px rgba(0, 0, 0, 0.3),
-    0 0 0 1px rgba(0, 243, 255, 0.1);
-}
-
-.user-menu:hover::before {
-  left: 150%;
-}
-
-.user-email {
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.85);
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-  flex-shrink: 1;
-}
-
-.icon-btn {
+  width: 100%;
+  padding: 8px;
   background: none;
   border: none;
-  color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s var(--transition-smooth);
-  font-size: 1.1rem;
-  padding: 8px;
-  border-radius: 8px;
-  flex-shrink: 0;
-  position: relative;
-  overflow: hidden;
+  text-decoration: none;
+  transition: 0.2s;
 }
 
-.icon-btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  transform: scale(0);
-  transition: transform 0.3s var(--transition-smooth);
+/* Light */
+.profile-dropdown a,
+.profile-dropdown button {
+  color: #333;
 }
 
-.icon-btn:hover {
-  color: #00f3ff;
-  transform: translateY(-2px) rotate(10deg) scale(1.1);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
+/* Dark */
+.dark .profile-dropdown a,
+.dark .profile-dropdown button {
+  color: #ddd;
 }
 
-.icon-btn:hover::before {
-  transform: scale(1);
-  background: rgba(0, 243, 255, 0.15);
+.profile-dropdown a:hover,
+.profile-dropdown button:hover {
+  background: rgba(176, 38, 255, 0.08);
+  color: #b026ff;
 }
 
-.icon-btn:active {
-  transform: translateY(0) rotate(0deg) scale(0.95);
-}
+/* MOBILE */
 
-.logout-btn {
-  padding: 8px 16px;
-  border-radius: 10px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  background: linear-gradient(
-    135deg,
-    rgba(239, 68, 68, 0.15) 0%,
-    rgba(239, 68, 68, 0.1) 100%
-  );
-  border: 1.5px solid rgba(239, 68, 68, 0.25);
-  color: #ef4444;
+.navbar-toggle {
+  display: none;
+  font-size: 1.4rem;
+  background: none;
+  border: none;
   cursor: pointer;
-  transition: all 0.3s var(--transition-smooth);
-  flex-shrink: 0;
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-}
-
-.logout-btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(239, 68, 68, 0.1),
-    transparent
-  );
-  transition: left 0.6s var(--transition-smooth);
-}
-
-.logout-btn:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(239, 68, 68, 0.25) 0%,
-    rgba(239, 68, 68, 0.2) 100%
-  );
-  border-color: rgba(239, 68, 68, 0.6);
-  transform: translateY(-3px) scale(1.03);
-  box-shadow:
-    0 10px 25px rgba(239, 68, 68, 0.25),
-    0 0 20px rgba(239, 68, 68, 0.15);
-  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+  color: inherit;
 }
 
-.logout-btn:hover::before {
-  left: 100%;
-}
-
-.logout-btn:active {
-  transform: translateY(-1px) scale(0.98);
-}
+@media (max-width: 900px) {
+  .navbar-menu {
+    display: none;
+  }
 
-/* Profile Menu Container */
-.profile-menu-container {
-  position: relative;
+  .navbar-toggle {
+    display: block;
+  }
 }
 
-.profile-icon-btn {
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, 
-    rgba(176, 38, 255, 0.2) 0%, 
-    rgba(0, 243, 255, 0.15) 100%);
-  border: 2px solid rgba(176, 38, 255, 0.3);
-  color: #fff;
+.theme-toggle-btn {
+  background: var(--navbar-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  padding: 10px;
+  border-radius: 12px;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.4rem;
-  transition: all 0.3s var(--transition-smooth);
-  position: relative;
-  overflow: hidden;
+  transition: all 0.25s ease;
 }
 
-.profile-icon-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, 
-    rgba(0, 243, 255, 0.2) 0%, 
-    rgba(176, 38, 255, 0.2) 100%);
-  opacity: 0;
-  transition: opacity 0.3s var(--transition-smooth);
+/* Light mode hover */
+:root:not(.dark) .theme-toggle-btn:hover {
+  background: var(--primary-color);
+  color: #ffffff;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 12px rgba(176, 38, 255, 0.4);
 }
 
-.profile-icon-btn:hover {
-  transform: translateY(-3px) scale(1.08);
-  border-color: rgba(0, 243, 255, 0.6);
-  box-shadow: 0 8px 24px rgba(0, 243, 255, 0.3),
-              0 0 20px rgba(176, 38, 255, 0.25);
+/* Dark mode hover */
+:root.dark .theme-toggle-btn:hover {
+  background: #ffffff;
+  color: #111;
+  border-color: #ffffff;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
 }
 
-.profile-icon-btn:hover::before {
-  opacity: 1;
-}
+/* === Final theme toggle contrast fix (light mode) === */
 
-.profile-icon-btn:active {
-  transform: translateY(0) scale(0.98);
+:root:not(.dark) .theme-toggle-btn {
+  background: #ffffff;
+  color: #0f172a;
+  border-color: rgba(148, 163, 184, 0.9);
 }
 
-/* Profile Dropdown */
-.profile-dropdown {
-  position: absolute;
-  top: calc(100% + 12px);
-  right: 0;
-  min-width: 280px;
-  background: rgba(15, 15, 25, 0.98);
-  border: 1px solid rgba(176, 38, 255, 0.3);
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
-              0 0 40px rgba(176, 38, 255, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(20px);
-  overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px) scale(0.95);
-  transition: all 0.3s var(--transition-smooth);
-  z-index: 100;
-}
-
-.profile-dropdown.show {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0) scale(1);
-}
-
-.profile-dropdown::before {
-  content: '';
-  position: absolute;
-  top: -8px;
-  right: 18px;
-  width: 0;
-  height: 0;
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-bottom: 8px solid rgba(176, 38, 255, 0.3);
-}
-
-.profile-dropdown-header {
-  padding: 18px 20px;
-  background: linear-gradient(135deg, 
-    rgba(176, 38, 255, 0.15) 0%, 
-    rgba(0, 243, 255, 0.1) 100%);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.profile-dropdown-header .profile-icon {
-  font-size: 1.25rem;
-  color: #00f3ff;
-  filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
-}
-
-.profile-email {
-  color: rgba(255, 255, 255, 0.95);
-  font-size: 0.9rem;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.profile-dropdown-divider {
-  height: 1px;
-  background: linear-gradient(90deg, 
-    transparent, 
-    rgba(176, 38, 255, 0.3), 
-    rgba(0, 243, 255, 0.3), 
-    transparent);
-}
-
-.profile-dropdown-items {
-  padding: 8px;
-}
-
-.profile-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 0.95rem;
-  font-weight: 500;
-  text-decoration: none;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: 10px;
-  transition: all 0.25s var(--transition-smooth);
-  width: 100%;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-}
-
-.profile-dropdown-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, 
-    transparent, 
-    rgba(176, 38, 255, 0.15), 
-    transparent);
-  transition: left 0.4s var(--transition-smooth);
-}
-
-.profile-dropdown-item:hover {
-  background: rgba(176, 38, 255, 0.2);
-  color: #fff;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(176, 38, 255, 0.2);
-}
-
-.profile-dropdown-item:hover::before {
-  left: 100%;
-}
-
-.profile-dropdown-item svg {
-  font-size: 1.1rem;
-  transition: all 0.25s var(--transition-smooth);
-}
-
-.profile-dropdown-item:hover svg {
-  transform: scale(1.15);
-  filter: drop-shadow(0 0 6px currentColor);
-}
-
-.profile-dropdown-item.logout-item {
-  color: #ef4444;
-  margin-top: 4px;
-}
-
-.profile-dropdown-item.logout-item:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ff6b6b;
-}
-
-.profile-dropdown-item:active {
-  transform: translateX(3px) scale(0.98);
-}
-
-/* Mobile Menu Toggle Button */
-.navbar-toggle {
-  display: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 10px;
-  transition: all 0.3s var(--transition-smooth);
-  position: relative;
-  overflow: hidden;
-  color: #ffffff;
-}
-
-.navbar-toggle::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  transform: scale(0);
-  transition: transform 0.3s var(--transition-smooth);
-}
-
-.navbar-toggle:hover::before {
-  transform: scale(1);
-}
-
-.navbar-toggle:hover {
-  color: var(--secondary-color);
-}
-
-.navbar-toggle span {
-  display: block;
-  width: 24px;
-  height: 2.5px;
-  background: currentColor;
-  border-radius: 2px;
-  transition: all 0.3s var(--transition-smooth);
-  position: relative;
-}
-
-.navbar-toggle span:not(:last-child) {
-  margin-bottom: 5px;
-}
-
-.navbar-toggle.active span:nth-child(1) {
-  transform: rotate(45deg) translateY(7.5px);
-  background: #00f3ff;
-}
-
-.navbar-toggle.active span:nth-child(2) {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.navbar-toggle.active span:nth-child(3) {
-  transform: rotate(-45deg) translateY(-7.5px);
-  background: #b026ff;
-}
-
-/* Mobile Menu Dropdown */
-.mobile-menu {
-  position: fixed;
-  top: 64px;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background: rgba(10, 10, 15, 0.98);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-  padding: 0.5rem 0;
-  animation: slideDown 0.3s ease-out;
-  z-index: 999;
-  max-height: calc(100vh - 64px);
-  overflow-y: auto;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.mobile-menu-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.mobile-menu-item {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.mobile-menu-link {
-  display: block;
-  padding: 1rem 1.5rem;
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.95rem;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.mobile-menu-link::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, 
-    rgba(176, 38, 255, 0.1) 0%, 
-    rgba(0, 243, 255, 0.05) 100%);
-  border-radius: 10px;
-  transform: scaleX(0);
-  transform-origin: right;
-  transition: transform 0.4s ease;
-  z-index: -1;
-}
-
-.mobile-menu-link::after {
-  content: '';
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00f3ff, #b026ff);
-  border-radius: 2px;
-  transition: all 0.4s ease;
-  opacity: 0;
-  box-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
-}
-
-.mobile-menu-link:hover,
-.mobile-menu-link.active {
-  color: #ffffff;
-  transform: translateY(-2px) scale(1.02);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5),
-                0 0 20px rgba(176, 38, 255, 0.3);
-}
-
-.mobile-menu-link:hover::before,
-.mobile-menu-link.active::before {
-  transform: scaleX(1);
-  transform-origin: left;
-}
-
-.mobile-menu-link:hover::after,
-.mobile-menu-link.active::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
-}
-
-.mobile-menu-item:hover .mobile-menu-link {
-  color: #ffffff;
-  transform: translateY(-2px) scale(1.02);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5),
-                0 0 20px rgba(176, 38, 255, 0.3);
-}
-
-.mobile-menu-item:hover .mobile-menu-link::before {
-  transform: scaleX(1);
-  transform-origin: left;
-}
-
-.mobile-menu-item:hover .mobile-menu-link::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
-}
-
-.mobile-menu-link:focus-visible,
-.mobile-menu-link:active {
-  color: #ffffff;
-  transform: translateY(-2px) scale(1.02);
-  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5),
-                0 0 20px rgba(176, 38, 255, 0.3);
-}
-
-.mobile-menu-link:focus-visible::before,
-.mobile-menu-link:active::before {
-  transform: scaleX(1);
-  transform-origin: left;
-}
-
-.mobile-menu-link:focus-visible::after,
-.mobile-menu-link:active::after {
-  width: 80%;
-  opacity: 1;
-  animation: glowPulse 1.5s ease infinite;
-}
-
-.mobile-dropdown-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.mobile-dropdown-link {
-  display: block;
-  padding: 0.75rem 1.5rem 0.75rem 2.5rem;
-  color: rgba(255, 255, 255, 0.7);
-  text-decoration: none;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.mobile-dropdown-link::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3px;
-  height: 100%;
-  background: linear-gradient(180deg, #b026ff, #00f3ff);
-  transform: scaleY(0);
-  transition: transform 0.3s ease;
-  border-radius: 0 3px 3px 0;
-}
-
-.mobile-dropdown-link:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.mobile-dropdown-link:hover::before {
-  transform: scaleY(1);
-}
-
-.mobile-dropdown-menu li:hover .mobile-dropdown-link {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.mobile-dropdown-menu li:hover .mobile-dropdown-link::before {
-  transform: scaleY(1);
-}
-
-.mobile-dropdown-link:focus-visible,
-.mobile-dropdown-link:active {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
+:root:not(.dark) .theme-toggle-btn:hover {
+  background: #0f172a;
   color: #ffffff;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.mobile-dropdown-link:focus-visible::before,
-.mobile-dropdown-link:active::before {
-  transform: scaleY(1);
-}
-
-.mobile-controls {
-  padding: 1rem 2rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.mobile-control-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 0;
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-}
-
-.toggle-track {
-  width: 50px;
-  height: 26px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 13px;
-  position: relative;
-  transition: all 0.3s ease;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.toggle-track.dark {
-  background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%);
-}
-
-.toggle-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-track.dark .toggle-thumb {
-  transform: translateX(24px);
-}
-
-.mobile-auth {
-  padding: 1rem 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-  display: flex;
-  gap: 0.75rem;
-  flex-direction: column;
-}
-
-.mobile-auth .navbar-btn {
-  width: 100%;
-  text-align: center;
-  padding: 0.875rem 1rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.mobile-auth .navbar-btn-login {
-  border: 2px solid rgba(0, 243, 255, 0.5);
-  background: transparent;
-  color: #00f3ff;
-}
-
-.mobile-auth .navbar-btn-login:hover {
-  background: rgba(0, 243, 255, 0.1);
-  border-color: #00f3ff;
-}
-
-.mobile-auth .navbar-btn-signup {
-  background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%);
-  color: white;
-  border: none;
-}
-
-.mobile-auth .navbar-btn-signup:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 20px rgba(0, 243, 255, 0.4);
-}
-
-.mobile-change-password {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  margin-bottom: 0.75rem;
-  color: rgba(255, 255, 255, 0.7);
-  text-decoration: none;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: all 0.3s ease;
-}
-
-.mobile-change-password:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-
-.mobile-auth-buttons {
-  display: flex;
-  flex-direction: row;
-  gap: 0.75rem;
-}
-
-.mobile-auth-buttons .login-btn,
-.mobile-auth-buttons .signup-btn {
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-  text-decoration: none;
-  display: block;
-  flex: 1;
-}
-
-.mobile-auth-buttons .login-btn {
-  background: transparent;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  color: #ffffff;
-}
-
-.mobile-auth-buttons .login-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.6);
-}
-
-.mobile-auth-buttons .signup-btn {
-  background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%);
-  color: #000000;
-}
-
-.mobile-auth-buttons .signup-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 243, 255, 0.5);
-}
-
-.full-width {
-  width: 100%;
-}
-
-/* Visibility Classes */
-.desktop-only {
-  display: none;
-}
-
-.mobile-only {
-  display: flex;
-}
-
-/* ===================================
-   RESPONSIVE BREAKPOINTS
-   =================================== */
-
-/* Desktop Only */
-.desktop-only {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-  /* Show desktop elements, hide mobile elements on desktop only */
-  .desktop-only {
-    display: flex;
-  }
-
-  .mobile-only {
-    display: none;
-  }
-
-  .mobile-menu {
-    display: none !important;
-  }
-  
-  .navbar-menu {
-    display: flex;
-  }
-}
-
-/* Mobile Only */
-@media (max-width: 767px) {
-  .navbar {
-    padding: 0.75rem 4%;
-  }
-  
-  .navbar.scrolled {
-    padding: 0.65rem 4%;
-  }
-  
-  .navbar-content {
-    gap: 1rem;
-    grid-template-columns: auto 1fr;
-  }
-  
-  .mobile-only {
-    display: flex;
-  }
-
-  .desktop-only {
-    display: none !important;
-  }
-
-  .navbar-toggle {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .navbar-menu {
-    display: none;
-  }
-
-  .desktop-auth {
-    display: flex !important;
-  }
-  
-  .navbar-btn-login,
-  .navbar-btn-signup {
-    display: none;
-  }
-  
-  .navbar-logo {
-    font-size: 1.25rem;
-  }
-  
-  .navbar-logo-icon {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .navbar-actions {
-    gap: 0.875rem;
-    justify-content: flex-end;
-  }
-  
-  .profile-icon-btn {
-    width: 48px;
-    height: 48px;
-    font-size: 1.3rem;
-  }
-  
-  .profile-dropdown {
-    min-width: 260px;
-    right: -10px;
-  }
-  
-  .profile-dropdown-header {
-    padding: 14px 16px;
-  }
-  
-  .profile-email {
-    font-size: 0.85rem;
-  }
-  
-  .profile-dropdown-item {
-    padding: 10px 14px;
-    font-size: 0.9rem;
-  }
-}
-
-/* Tablet */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .navbar {
-    padding: 0.75rem 2%;
-  }
-  
-  .navbar.scrolled {
-    padding: 0.6rem 2%;
-  }
-  
-  .navbar-content {
-    gap: 1rem;
-    grid-template-columns: auto 1fr;
-  }
-  
-  .navbar-toggle {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .navbar-menu {
-    display: none;
-  }
-  
-  .desktop-auth {
-    display: flex !important;
-  }
-  
-  .navbar-btn-login,
-  .navbar-btn-signup {
-    display: none;
-  }
-  
-  .navbar-logo {
-    font-size: 1.2rem;
-  }
-  
-  .navbar-logo-icon {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .navbar-actions {
-    gap: 1rem;
-    justify-content: flex-end;
-  }
-  
-  .profile-icon-btn {
-    width: 50px;
-    height: 50px;
-    font-size: 1.35rem;
-  }
-  
-  .profile-dropdown {
-    min-width: 270px;
-  }
-  
-  .profile-dropdown-header {
-    padding: 16px 18px;
-  }
-  
-  .profile-email {
-    font-size: 0.875rem;
-  }
-  
-  .profile-dropdown-item {
-    padding: 11px 15px;
-    font-size: 0.925rem;
-  }
-}
-
-/* Desktop */
-@media (min-width: 1024px) and (max-width: 1279px) {
-  .navbar {
-    padding: 0.875rem 3%;
-  }
-  
-  .navbar.scrolled {
-    padding: 0.65rem 3%;
-  }
-  
-  .navbar-toggle {
-    display: none;
-  }
-
-  .navbar-menu {
-    display: flex !important;
-    gap: 0.5rem;
-  }
-  
-  .navbar-content {
-    padding: 0;
-    grid-template-columns: auto 1fr auto;
-    gap: 1.5rem;
-  }
-
-  .navbar-link {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
-  }
-
-  .navbar-logo {
-    font-size: 1.35rem;
-  }
-  
-  .navbar-logo-icon {
-    width: 42px;
-    height: 42px;
-  }
-
-  .navbar-actions {
-    gap: 1rem;
-  }
-
-  .navbar-btn {
-    padding: 0.6rem 1.1rem;
-    font-size: 0.85rem;
-  }
-
-  .navbar-btn-login {
-    padding: 0.6rem 1.3rem;
-  }
-
-  .navbar-btn-signup {
-    padding: 0.6rem 1.5rem;
-  }
-  
-  .profile-icon-btn {
-    width: 50px;
-    height: 50px;
-    font-size: 1.35rem;
-  }
-  
-  .profile-dropdown {
-    min-width: 275px;
-  }
-}
-
-/* Large Desktop */
-@media (min-width: 1280px) {
-  .navbar {
-    padding: 0.875rem 3%;
-  }
-  
-  .navbar.scrolled {
-    padding: 0.65rem 3%;
-  }
-  
-  .navbar-content {
-    padding: 0;
-    max-width: 1400px;
-    gap: 2rem;
-  }
-
-  .navbar-link {
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-  }
-
-  .navbar-logo {
-    font-size: 1.5rem;
-  }
-  
-  .navbar-logo-icon {
-    width: 44px;
-    height: 44px;
-  }
-
-  .navbar-actions {
-    gap: 1.5rem;
-  }
-
-  .navbar-btn {
-    padding: 0.75rem 1.5rem;
-    font-size: 0.95rem;
-  }
-
-  .navbar-btn-login {
-    padding: 0.75rem 1.75rem;
-  }
-
-  .navbar-btn-signup {
-    padding: 0.75rem 2rem;
-  }
-  
-  .profile-icon-btn {
-    width: 52px;
-    height: 52px;
-    font-size: 1.4rem;
-  }
-}
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Touch devices */
-@media (hover: none) and (pointer: coarse) {
-  .navbar-link,
-  .navbar-btn,
-  .icon-btn,
-  .mobile-nav-link,
-  .login-btn,
-  .signup-btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-}
-/* Dropdown */
-.dropdown-trigger {
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dropdown-trigger::after {
-  content: "▼";
-  font-size: 0.65rem;
-  transition: transform 0.3s var(--transition-smooth);
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.navbar-item:hover .dropdown-trigger::after {
-  color: var(--secondary-color);
-}
-
-.navbar-item:hover .dropdown-trigger {
-  color: #ffffff;
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.1) 0%,
-    rgba(0, 243, 255, 0.05) 100%
-  );
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 50%;
-  transform: translateX(-50%) translateY(-10px);
-  background: rgba(10, 10, 15, 0.98);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 12px;
-  min-width: 200px;
-  padding: 0.5rem;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    opacity 0.3s var(--transition-smooth),
-    transform 0.3s var(--transition-smooth),
-    visibility 0.3s;
-  box-shadow:
-    0 10px 40px rgba(0, 0, 0, 0.5),
-    0 0 20px rgba(176, 38, 255, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.navbar-item:hover .dropdown-menu {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translateX(-50%) translateY(0);
-}
-
-.dropdown-menu.show {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translateX(-50%) translateY(0);
-}
-
-.dropdown-menu::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid rgba(255, 255, 255, 0.15);
-}
-
-.dropdown-menu li {
-  list-style: none;
-  margin: 0.25rem 0;
-}
-
-.dropdown-menu li:first-child {
-  margin-top: 0;
-}
-
-.dropdown-menu li:last-child {
-  margin-bottom: 0;
-}
-
-.dropdown-link {
-  display: block;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  color: rgba(255, 255, 255, 0.75);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.9rem;
-  transition: all 0.3s var(--transition-smooth);
-  position: relative;
-  overflow: hidden;
-}
-
-.dropdown-link::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3px;
-  height: 100%;
-  background: linear-gradient(
-    180deg,
-    var(--secondary-color),
-    var(--primary-color)
-  );
-  transform: scaleY(0);
-  transition: transform 0.3s var(--transition-smooth);
-  border-radius: 0 3px 3px 0;
-}
-
-.dropdown-link:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-  padding-left: 1.25rem;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.dropdown-menu li:hover .dropdown-link {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-  padding-left: 1.25rem;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.dropdown-link:focus-visible,
-.dropdown-link:active {
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-  padding-left: 1.25rem;
-  transform: translateX(5px);
-  box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1);
-}
-
-.dropdown-link:hover::before {
-  transform: scaleY(1);
-}
-
-.dropdown-menu li:hover .dropdown-link::before {
-  transform: scaleY(1);
-}
-
-.dropdown-link:focus-visible::before,
-.dropdown-link:active::before {
-  transform: scaleY(1);
-}
-
-.dropdown-link:focus {
-  outline: 2px solid var(--secondary-color);
-  outline-offset: 2px;
-  background: linear-gradient(
-    135deg,
-    rgba(176, 38, 255, 0.15),
-    rgba(0, 243, 255, 0.1)
-  );
-  color: #ffffff;
-}
-
-/* Mobile Dropdown Styles */
-@media (max-width: 767px) {
-  .dropdown-trigger {
-    width: 100%;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  .dropdown-trigger::after {
-    content: "▼";
-    font-size: 0.7rem;
-    margin-left: auto;
-    transition: transform 0.3s var(--transition-smooth);
-  }
-
-  .navbar-item:has(.dropdown-menu.show) .dropdown-trigger,
-  .dropdown-trigger:active {
-    color: #ffffff;
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  .navbar-item:has(.dropdown-menu.show) .dropdown-trigger::after {
-    transform: rotate(180deg);
-    color: var(--secondary-color);
-  }
-
-  .dropdown-menu {
-    position: static;
-    transform: none;
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    margin-top: 0.5rem;
-    margin-left: 1rem;
-    padding: 0;
-    border: none;
-    border-left: 2px solid rgba(0, 243, 255, 0.3);
-    background: transparent;
-    box-shadow: none;
-    transition: all 0.3s var(--transition-smooth);
-  }
-
-  .dropdown-menu.show {
-    opacity: 1;
-    max-height: 300px;
-    padding: 0.5rem 0;
-  }
-
-  .dropdown-menu::before {
-    display: none;
-  }
-
-  .dropdown-link {
-    padding: 0.6rem 1rem;
-    font-size: 0.85rem;
-  }
-
-  .dropdown-link:hover {
-    padding-left: 1.5rem;
-  }
+  border-color: #0f172a;
+  box-shadow: 0 0 12px rgba(15, 23, 42, 0.35);
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 0a4bb7d..341e07c 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useTheme } from "../context/ThemeContext";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import { FiLock, FiUser, FiLogOut, FiMail } from "react-icons/fi";
+import ThemeToggle from "./ThemeToggle";
 import "./Navbar.css";
 
 function Navbar() {
   const { currentUser, logout, isEmailProvider } = useAuth();
-  const { theme } = useTheme();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -15,79 +14,52 @@ function Navbar() {
   const [scrolled, setScrolled] = useState(false);
   const [openDropdown, setOpenDropdown] = useState(null);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
- 
 
   const isDashboardPage = location.pathname === "/dashboard";
 
-  /* -------------------- Handlers -------------------- */
-
-  const handleDropdownEnter = (label) => {
-    setOpenDropdown(label);
-  };
+  /* Scroll Effect */
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
-  const handleDropdownLeave = () => {
-    setOpenDropdown(null);
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (!e.target.closest(".dropdown-container")) {
+        setOpenDropdown(null);
+      }
+      if (!e.target.closest(".profile-menu-container")) {
+        setIsProfileOpen(false);
+      }
     };
 
-  const handleDropdownClick = (label) => {
-    setOpenDropdown(openDropdown === label ? null : label);
-  };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
 
-  const toggleMobileMenu = () => {
+  const toggleMobileMenu = () =>
     setIsMobileMenuOpen((prev) => !prev);
-  };
 
   const closeMobileMenu = () => {
     setIsMobileMenuOpen(false);
     setOpenDropdown(null);
   };
 
+  const handleDropdownClick = (label) => {
+    setOpenDropdown(openDropdown === label ? null : label);
+  };
+
   const handleLogout = useCallback(async () => {
     try {
       await logout();
       navigate("/");
-      closeMobileMenu();
-    } catch (error) {
-      console.error("Logout failed:", error);
+    } catch (err) {
+      console.error(err);
     }
   }, [logout, navigate]);
 
-  /* -------------------- Effects -------------------- */
-
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 20);
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (openDropdown && !e.target.closest(".dropdown-container")) {
-        setOpenDropdown(null);
-      }
-      if (isProfileOpen && !event.target.closest('.profile-menu-container')) {
-        setIsProfileOpen(false);
-      }
-    };
-
-    const handleEscapeKey = (event) => {
-      if (event.key === 'Escape') {
-        if (openDropdown) setOpenDropdown(null);
-        if (isProfileOpen) setIsProfileOpen(false);
-      }
-    };
-
-    document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [openDropdown, isProfileOpen]);
-
-  /* -------------------- Nav Links -------------------- */
-
   const navLinks = [
     { to: "/", label: "Home" },
     { to: "/pricing", label: "Pricing" },
@@ -103,214 +75,44 @@ function Navbar() {
     },
   ];
 
-  const authenticatedNavLinks = [
-    ...navLinks,
-    { to: "/dashboard", label: "Dashboard" },
-    { to: "/leaderboard", label: "Leaderboard" },
-  ];
-
-  const linksToRender = currentUser ? authenticatedNavLinks : navLinks;
-
-  /* -------------------- JSX -------------------- */
+  const linksToRender = currentUser
+    ? [...navLinks, { to: "/dashboard", label: "Dashboard" }]
+    : navLinks;
 
   return (
-    <nav
-      className={`navbar ${scrolled ? "scrolled" : ""} ${
-        isMobileMenuOpen ? "has-mobile-menu" : ""
-      } ${isDashboardPage ? "is-dashboard" : ""}`}
-    >
-      <div className="navbar-content">
-        {/* Logo */}
+    <nav className={`navbar ${scrolled ? "scrolled" : ""}`}>
+      <div className="navbar-container">
+        {/* LEFT - LOGO */}
         <Link to="/" className="navbar-logo">
-          <img src="/crypto-logo.png" alt="CryptoHub" className="logo-img" />
-          <span className="logo-text">CryptoHub</span>
+          <img src="/crypto-logo.png" alt="CryptoHub" />
+          <span>CryptoHub</span>
         </Link>
 
-        {/* Desktop Menu */}
+        {/* CENTER - LINKS */}
         {!isDashboardPage && (
-    <ul className="navbar-menu">
-      {(currentUser ? authenticatedNavLinks : navLinks).map((link) => (
-        <li
-          key={link.label}
-          className="navbar-item"
-          onMouseEnter={() => link.dropdown && handleDropdownEnter(link.label)}
-          onMouseLeave={handleDropdownLeave}
-        >
-          {link.dropdown ? (
-            <>
-              <span 
-                className="navbar-link dropdown-trigger"
-                onClick={() => handleDropdownClick(link.label)}
-                role="button"
-                aria-expanded={openDropdown === link.label}
-                aria-haspopup="true"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    handleDropdownClick(link.label);
-                  }
-                }}
-              >
-                {link.label}
-              </span>
-
-              <ul 
-                className={`dropdown-menu ${openDropdown === link.label ? 'show' : ''}`}
-                role="menu"
-                aria-label={`${link.label} submenu`}
+          <ul className="navbar-menu">
+            {linksToRender.map((link) => (
+              <li
+                key={link.label}
+                className="navbar-item dropdown-container"
               >
-                {!link.dropdown ? (
-                  <Link
-                    to={link.to}
-                    className={`navbar-link ${
-                      location.pathname === link.to ? "active" : ""
-                    }`}
-                    onClick={closeMobileMenu}
-                  >
-                    {link.label}
-                  </Link>
-                ) : (
+                {link.dropdown ? (
                   <>
-                    <span
-                      className="navbar-link dropdown-trigger"
-                      role="button"
-                      tabIndex={0}
-                      aria-haspopup="true"
-                      aria-expanded={openDropdown === link.label}
-                      onClick={() => handleDropdownClick(link.label)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleDropdownClick(link.label);
-                        }
-                      }}
+                    <button
+                      className="navbar-link"
+                      onClick={() =>
+                        handleDropdownClick(link.label)
+                      }
                     >
                       {link.label}
-                    </span>
-
-                    <ul
-                      className={`dropdown-menu ${
-                        openDropdown === link.label ? "show" : ""
-                      }`}
-                      role="menu"
-                    >
-                      {link.dropdown.map((item) => (
-                        <li key={item.to} role="none">
-                          <Link
-                            to={item.to}
-                            className="dropdown-link"
-                            role="menuitem"
-                            onClick={closeMobileMenu}
-                          >
-                            {item.label}
-                          </Link>
-                        </li>
-                      ))}
-                    </ul>
-                  </>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {/* Right Actions */}
-        <div className="navbar-actions">
-          <div className="desktop-auth">
-            {currentUser ? (
-              <div className="profile-menu-container">
-                <button 
-                  className="profile-icon-btn"
-                  onClick={() => setIsProfileOpen(!isProfileOpen)}
-                  aria-label="User profile menu"
-                  aria-expanded={isProfileOpen}
-                >
-                  <FiUser />
-                </button>
-                
-                <div className={`profile-dropdown ${isProfileOpen ? 'show' : ''}`}>
-                  <div className="profile-dropdown-header">
-                    <FiMail className="profile-icon" />
-                    <span className="profile-email">{currentUser.email}</span>
-                  </div>
-                  
-                  <div className="profile-dropdown-divider"></div>
-                  
-                  <div className="profile-dropdown-items">
-                    {isEmailProvider() && (
-                      <Link
-                        to="/change-password"
-                        className="profile-dropdown-item"
-                        onClick={() => setIsProfileOpen(false)}
-                      >
-                        <FiLock />
-                        <span>Change Password</span>
-                      </Link>
-                    )}
-                    
-                    <button 
-                      onClick={() => {
-                        setIsProfileOpen(false);
-                        handleLogout();
-                      }} 
-                      className="profile-dropdown-item logout-item"
-                    >
-                      <FiLogOut />
-                      <span>Logout</span>
                     </button>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <>
-                <Link to="/login" className="navbar-btn navbar-btn-login">
-                  LOGIN
-                </Link>
-                <Link to="/signup" className="navbar-btn navbar-btn-signup">
-                  Get Started
-                </Link>
-              </>
-            )}
-          </div>
-
-          {/* Mobile Toggle */}
-          <button
-            className={`navbar-toggle ${
-              isMobileMenuOpen ? "active" : ""
-            }`}
-            onClick={toggleMobileMenu}
-            aria-label="Toggle navigation"
-          >
-            <span />
-            <span />
-            <span />
-          </button>
-        </div>
-
-      </div>
 
-      {/* Mobile Menu Dropdown */}
-      {isMobileMenuOpen && !isDashboardPage && (
-        <div className="mobile-menu">
-          <ul className="mobile-menu-list">
-            {(currentUser ? authenticatedNavLinks : navLinks).map((link) => (
-              <li key={link.label} className="mobile-menu-item">
-                {link.dropdown ? (
-                  <>
-                    <span 
-                      className="mobile-menu-link"
-                      onClick={() => handleDropdownClick(link.label)}
-                    >
-                      {link.label}
-                    </span>
                     {openDropdown === link.label && (
-                      <ul className="mobile-dropdown-menu">
+                      <ul className="dropdown-menu">
                         {link.dropdown.map((item) => (
                           <li key={item.to}>
                             <Link
                               to={item.to}
-                              className="mobile-dropdown-link"
                               onClick={closeMobileMenu}
                             >
                               {item.label}
@@ -323,10 +125,11 @@ function Navbar() {
                 ) : (
                   <Link
                     to={link.to}
-                    className={`mobile-menu-link ${
-                      location.pathname === link.to ? "active" : ""
+                    className={`navbar-link ${
+                      location.pathname === link.to
+                        ? "active"
+                        : ""
                     }`}
-                    onClick={closeMobileMenu}
                   >
                     {link.label}
                   </Link>
@@ -334,28 +137,62 @@ function Navbar() {
               </li>
             ))}
           </ul>
+        )}
 
-          {/* Mobile Auth Buttons */}
-          {!currentUser && (
-            <div className="mobile-auth">
-              <Link
-                to="/login"
-                className="navbar-btn navbar-btn-login"
-                onClick={closeMobileMenu}
+        {/* RIGHT - ACTIONS */}
+        <div className="navbar-actions">
+          <ThemeToggle />
+
+          {currentUser ? (
+            <div className="profile-menu-container">
+              <button
+                className="profile-btn"
+                onClick={() =>
+                  setIsProfileOpen(!isProfileOpen)
+                }
               >
-                LOGIN
+                <FiUser />
+              </button>
+
+              {isProfileOpen && (
+                <div className="profile-dropdown">
+                  <div className="profile-email">
+                    <FiMail />
+                    {currentUser.email}
+                  </div>
+
+                  {isEmailProvider() && (
+                    <Link to="/change-password">
+                      <FiLock /> Change Password
+                    </Link>
+                  )}
+
+                  <button onClick={handleLogout}>
+                    <FiLogOut /> Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <Link to="/login" className="navbar-btn login">
+                Login
               </Link>
-              <Link
-                to="/signup"
-                className="navbar-btn navbar-btn-signup"
-                onClick={closeMobileMenu}
-              >
+              <Link to="/signup" className="navbar-btn signup">
                 Get Started
               </Link>
-            </div>
+            </>
           )}
+
+          {/* MOBILE TOGGLE */}
+          <button
+            className="navbar-toggle"
+            onClick={toggleMobileMenu}
+          >
+            ☰
+          </button>
         </div>
-      )}
+      </div>
     </nav>
   );
 }
diff --git a/src/components/Pricing.css b/src/components/Pricing.css
index f82047f..c65272b 100644
--- a/src/components/Pricing.css
+++ b/src/components/Pricing.css
@@ -1,7 +1,38 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
+/* Pricing Page Theme Variables */
+:root {
+  --pricing-bg: var(--bg-deep);
+  --pricing-card-bg: var(--glass-panel-bg);
+  --pricing-card-inner-bg: var(--dashboard-bg-elevated);
+  --pricing-card-border: var(--border-color);
+  --pricing-table-bg: var(--glass-panel-bg);
+  --pricing-table-header-bg: var(--dashboard-bg-secondary);
+  --pricing-table-border: var(--border-color);
+  --pricing-text-primary: #1e293b;
+  --pricing-text-secondary: #475569;
+  --pricing-text-muted: #94a3b8;
+  --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
+}
+
+:root[class~="dark"] {
+  --pricing-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(7, 14, 30, 1) 100%);
+  --pricing-card-bg: rgba(255, 255, 255, 0.12);
+  --pricing-card-inner-bg: rgba(255, 255, 255, 0.08);
+  --pricing-card-border: rgba(255, 255, 255, 0.15);
+  --pricing-table-bg: rgba(17, 24, 39, 0.95);
+  --pricing-table-header-bg: rgba(15, 23, 42, 0.98);
+  --pricing-table-border: rgba(71, 85, 105, 0.3);
+  --pricing-text-primary: #e2e8f0;
+  --pricing-text-secondary: #94a3b8;
+  --pricing-text-muted: #64748b;
+  --gradient-primary: linear-gradient(135deg, #9333ea 0%, #db2777 100%);
+}
+
 /* Base Reset */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -9,18 +40,20 @@ body {
   font-family: 'Inter', sans-serif;
   line-height: 1.6;
 }
-section.py-20.px-8 {
-    max-width: 1200px;
 
+section.py-20.px-8 {
+  max-width: 1200px;
 }
+
 section.py-20.px-6 {
-    max-width: 1200px;}
+  max-width: 1200px;
+}
 
 /* Glass Panels */
 .glass-panel {
-  background: rgba(255, 255, 255, 0.12);
+  background: var(--pricing-card-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid var(--pricing-card-border);
   border-radius: 1.5rem;
   position: relative;
   overflow: visible !important;
@@ -33,14 +66,14 @@ section.py-20.px-6 {
   margin-top: 2.75rem !important;
 }
 
-.glass-panel.rounded-3xl.p-1 > div {
-  background: rgba(255, 255, 255, 0.08);
+.glass-panel.rounded-3xl.p-1>div {
+  background: var(--pricing-card-inner-bg);
   border-radius: 1.5rem !important;
   padding: 3rem 2rem 2.5rem !important;
   min-height: 32rem !important;
   display: flex !important;
   flex-direction: column !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--pricing-card-border);
 }
 
 /* PERFECT Most Popular Badge */
@@ -55,31 +88,29 @@ section.py-20.px-6 {
   font-size: 0.875rem !important;
   font-weight: 900 !important;
   border-radius: 50rem !important;
-  box-shadow: 0 16px 40px rgba(251, 191, 36, 0.5);
+  box-shadow: 0 16px 40px rgba(251, 191, 36, 0.3);
   white-space: nowrap;
 }
 
 
-.py-24.px-6.bg-gradient-to-b {
-  background: linear-gradient(180deg, 
-    rgba(15, 23, 42, 0.98) 0%, 
-    rgba(7, 14, 30, 1) 100%) !important;
+.pricing-section {
+  background: var(--pricing-bg) !important;
   padding: 6rem 1.5rem !important;
   position: relative;
 }
 
-.py-24.px-6.bg-gradient-to-b::before {
+.pricing-section::before {
   content: '';
   position: absolute;
   inset: 0;
-  background: 
-    radial-gradient(ellipse 30% 30% at 25% 75%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
-    radial-gradient(ellipse 25% 25% at 75% 25%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
+  background:
+    radial-gradient(ellipse 30% 30% at 25% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+    radial-gradient(ellipse 25% 25% at 75% 25%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
   z-index: 0;
 }
 
 /* FIXED: Table Container */
-.overflow-x-auto > div {
+.overflow-x-auto>div {
   position: relative;
   z-index: 10;
 }
@@ -87,21 +118,19 @@ section.py-20.px-6 {
 .max-w-7xl table {
   width: 100% !important;
   min-width: 0;
-  background: rgba(17, 24, 39, 0.95) !important;
+  background: var(--pricing-table-bg) !important;
   backdrop-filter: blur(40px) !important;
-  border: 1px solid rgba(71, 85, 105, 0.3) !important;
+  border: 1px solid var(--pricing-table-border) !important;
   border-radius: 1.75rem !important;
-  box-shadow: 
-    0 35px 80px rgba(0, 0, 0, 0.6),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  box-shadow: var(--dashboard-shadow-lg);
   overflow: hidden !important;
   table-layout: fixed !important;
 }
 
 /* Table Headers */
 table thead tr th {
-  background: rgba(15, 23, 42, 0.98) !important;
-  border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important;
+  background: var(--pricing-table-header-bg) !important;
+  border-bottom: 1px solid var(--pricing-table-border) !important;
   position: relative;
 }
 
@@ -111,7 +140,7 @@ table thead th:first-child {
   width: 25% !important;
   font-size: 1.25rem !important;
   font-weight: 800 !important;
-  color: #e2e8f0 !important;
+  color: var(--pricing-text-primary) !important;
 }
 
 table thead th:not(:first-child) {
@@ -133,14 +162,13 @@ table thead th .text-2xl {
   background-clip: text !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
-  text-fill-color: transparent !important;
   margin-bottom: 0.5rem;
   display: block !important;
 }
 
 table thead th .text-sm {
   font-size: 0.8125rem !important;
-  color: #94a3b8 !important;
+  color: var(--pricing-text-muted) !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.1em !important;
@@ -163,7 +191,7 @@ table th .absolute.-top-4 {
 /* Table Body */
 table tbody tr {
   transition: all 0.3s ease;
-  border-bottom: 1px solid rgba(71, 85, 105, 0.15);
+  border-bottom: 1px solid var(--pricing-table-border);
 }
 
 table tbody tr:hover {
@@ -173,21 +201,22 @@ table tbody tr:hover {
 table tbody td {
   padding: 1.75rem 1.5rem !important;
   vertical-align: middle !important;
-  border-right: 1px solid rgba(71, 85, 105, 0.1);
-  color: #cbd5e1 !important;
+  border-right: 1px solid var(--pricing-table-border);
+  color: var(--pricing-text-secondary) !important;
 }
 
 table tbody td:first-child {
   font-weight: 700 !important;
   font-size: 1.125rem !important;
-  background: rgba(15, 23, 42, 0.7) !important;
+  background: var(--pricing-table-header-bg) !important;
   width: 25% !important;
+  color: var(--pricing-text-primary) !important;
 }
 
 table tbody td:not(:first-child) {
   text-align: center !important;
   padding: 1.75rem 1rem !important;
-  border-right: 1px solid rgba(71, 85, 105, 0.1);
+  border-right: 1px solid var(--pricing-table-border);
 }
 
 table tbody td:last-child {
@@ -210,7 +239,8 @@ table tbody td:last-child {
 
 
 .w-full.py-6.px-8.rounded-2xl {
-  height: 4.5rem !important; /* FIXED: Fixed height */
+  height: 4.5rem !important;
+  /* FIXED: Fixed height */
   min-height: 4.5rem !important;
   display: flex !important;
   align-items: center !important;
@@ -225,38 +255,30 @@ table tbody td:last-child {
   letter-spacing: 0.08em !important;
   border: none !important;
   cursor: pointer !important;
-  margin-top: auto !important; /* FIXED: Push to bottom */
-}
-
-/* Trader Button (Highlighted) */
-.bg-gradient-to-r.from-purple-600.to-pink-600 {
-  background: linear-gradient(135deg, #9333ea 0%, #ec4899 50%, #3b82f6 100%) !important;
-  box-shadow: 
-    0 16px 40px rgba(147, 51, 234, 0.5),
-    0 8px 24px rgba(0, 0, 0, 0.3) !important;
-  color: #fff !important;
+  margin-top: auto !important;
+  /* FIXED: Push to bottom */
 }
 
-.bg-gradient-to-r.from-purple-600.to-pink-600:hover {
-  transform: translateY(-3px) !important;
-  box-shadow: 
-    0 24px 60px rgba(147, 51, 234, 0.6),
-    0 12px 32px rgba(0, 0, 0, 0.4) !important;
+/* Global CTA Button Look - All Purple/Pink Gradient */
+.w-full.py-6.px-8.rounded-2xl {
+  background: var(--gradient-primary) !important;
+  color: #ffffff !important;
+  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.3) !important;
+  border: none !important;
+  position: relative !important;
+  z-index: 30 !important;
 }
 
-/* Explorer/Pro Buttons */
-.bg-white\/80, .dark\:bg-gray-800\/80 {
-  background: rgba(255, 255, 255, 0.95) !important;
-  color: #1e293b !important;
-  border: 2px solid rgba(255, 255, 255, 0.4) !important;
-  font-weight: 800 !important;
-  backdrop-filter: blur(20px) !important;
+.w-full.py-6.px-8.rounded-2xl:hover {
+  transform: translateY(-4px) scale(1.05) !important;
+  box-shadow:
+    0 24px 60px rgba(147, 51, 234, 0.5),
+    0 12px 32px rgba(0, 0, 0, 0.3) !important;
 }
 
-.dark .bg-white\/80 {
-  background: rgba(30, 41, 59, 0.95) !important;
-  color: #f1f5f9 !important;
-  border-color: rgba(71, 85, 105, 0.4) !important;
+/* Specific highlight logic (optional differentiator) */
+.glass-panel.ring-4 .w-full.py-6.px-8.rounded-2xl {
+  box-shadow: 0 20px 50px rgba(147, 51, 234, 0.5) !important;
 }
 
 /* Button Inner Content */
@@ -278,11 +300,11 @@ table tbody td:last-child {
   .overflow-x-auto {
     scrollbar-width: thin;
   }
-  
+
   table {
     min-width: 650px !important;
   }
-  
+
   .w-full.py-6.px-8.rounded-2xl {
     height: 3.75rem !important;
     font-size: 1rem !important;
@@ -297,4 +319,4 @@ table tbody td:last-child {
 .dark table thead th:first-child,
 .dark table tbody td:first-child {
   color: #e2e8f0 !important;
-}
+}
\ No newline at end of file
diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx
index 33fc65e..b20606f 100644
--- a/src/components/Pricing.jsx
+++ b/src/components/Pricing.jsx
@@ -94,7 +94,7 @@ export default function Pricing() {
   };
 
   return (
-    <div className={`min-h-screen ${isDark ? 'dark' : ''}`}>
+    <div className={`min-h-screen bg-[var(--bg-deep)] text-[var(--text-main)] ${isDark ? 'dark' : ''}`}>
       {/* FIXED: Progress Bar */}
       <motion.div
         className="fixed top-0 left-0 h-1 bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 z-50 origin-left"
@@ -106,7 +106,7 @@ export default function Pricing() {
 
       {/* Hero Header */}
       <motion.section
-        className="relative py-24 px-6 overflow-hidden"
+        className="relative py-24 px-6 overflow-hidden pricing-section"
         variants={containerVariants}
         initial="hidden"
         whileInView="visible"
@@ -154,7 +154,7 @@ export default function Pricing() {
             transition={{ type: "spring" }}
           >
             <div className="flex flex-col lg:flex-row justify-center items-center gap-6">
-              <span className={`text-lg font-semibold ${billingCycle === 'monthly' ? 'text-gray-900 dark:dark:text-yellow-400' : 'text-gray-500 dark:text-gray-400'}`}>
+              <span className={`text-lg font-semibold ${billingCycle === 'monthly' ? 'text-gray-900 dark:text-yellow-400' : 'text-gray-500 dark:text-gray-400'}`}>
                 Monthly
               </span>
 
@@ -166,13 +166,13 @@ export default function Pricing() {
               >
                 <motion.div
                   className="absolute top-2 w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full shadow-lg flex items-center justify-center shadow-purple-500/50"
-                  animate={{ 
-                    x: billingCycle === 'yearly' ? 56 : 0 
+                  animate={{
+                    x: billingCycle === 'yearly' ? 56 : 0
                   }}
-                  transition={{ 
-                    type: "spring", 
-                    stiffness: 300, 
-                    damping: 25 
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 25
                   }}
                 >
                   <FiZap className="text-white w-5 h-5" />
@@ -205,7 +205,7 @@ export default function Pricing() {
 
       {/* Pricing Cards */}
       <motion.section
-        className="py-20 px-8"
+        className="py-20 px-8 pricing-section"
         variants={containerVariants}
         initial="hidden"
         whileInView="visible"
@@ -230,7 +230,7 @@ export default function Pricing() {
                 onHoverEnd={() => setHoveredPlan(null)}
               >
                 {/* Card Background */}
-                <div className="h-full w-full bg-linear-to-br bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-[1.75rem] p-8 flex flex-col relative z-10 border border-white/30 dark:border-gray-700/50">
+                <div className="h-full w-full bg-linear-to-br bg-[var(--glass-card-bg)] dark:bg-[var(--dashboard-bg-card)] backdrop-blur-xl rounded-[1.75rem] p-8 flex flex-col relative z-10 border border-[var(--glass-border)] dark:border-gray-700/50">
 
                   {/* Popular Badge */}
                   {plan.highlight && (
@@ -283,10 +283,7 @@ export default function Pricing() {
 
                   {/* CTA Button */}
                   <motion.button
-                    className={`w-full py-6 px-8 rounded-2xl font-bold text-lg uppercase tracking-wider shadow-2xl transition-all duration-300 overflow-hidden relative ${plan.highlight
-                      ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-purple-500/40 hover:shadow-purple-500/60 hover:-translate-y-1'
-                      : 'bg-gray-700 dark:bg-gray-700 text-gray-900 dark:text-white border-2 border-gray-200/50 dark:border-gray-600/50 hover:bg-gray-800 dark:hover:bg-gray-900'
-                      }`}
+                    className="w-full py-6 px-8 rounded-2xl font-bold text-lg uppercase tracking-wider shadow-2xl overflow-hidden relative bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-purple-500/40 hover:shadow-purple-500/60"
                     onClick={() => handlePlanClick(plan.name)}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.98 }}
@@ -301,15 +298,16 @@ export default function Pricing() {
             );
           })}
         </div>
-      </motion.section>
+      </motion.section >
 
       {/* FIXED: Working Comparison Table */}
-      <motion.section
-        className="py-20 px-6 bg-linear-to-b from-gray-50/50 to-transparent dark:from-gray-900/50"
+      < motion.section
+        className="py-20 px-6 bg-[var(--bg-stars)] rounded-3xl shadow-lg border border-[var(--border-color)]"
         variants={containerVariants}
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true }}
+        viewport={{ once: true }
+        }
       >
         <div className="max-w-7xl mx-auto">
           <motion.div className="text-center mb-20" variants={itemVariants}>
@@ -322,7 +320,7 @@ export default function Pricing() {
           </motion.div>
 
           <div className="overflow-x-auto">
-            <table className="w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-3xl border border-white/30 dark:border-gray-700/50 shadow-2xl">
+            <table className="w-full bg-[var(--glass-panel-bg)] backdrop-blur-xl rounded-3xl border border-[var(--border-color)] shadow-2xl">
               <thead>
                 <tr className="border-b border-gray-200/50 dark:border-gray-700/50">
                   <th className="p-6 text-left font-bold text-lg">Feature</th>
@@ -375,11 +373,11 @@ export default function Pricing() {
             </table>
           </div>
         </div>
-      </motion.section>
+      </motion.section >
 
       {/* FIXED: Working FAQ Section */}
-      <motion.section
-        className="py-24 px-6"
+      < motion.section
+        className="py-24 px-6 pricing-section"
         variants={containerVariants}
         initial="hidden"
         whileInView="visible"
@@ -440,10 +438,10 @@ export default function Pricing() {
             ))}
           </div>
         </div>
-      </motion.section>
+      </motion.section >
 
       {/* FIXED: Payment Modal */}
-      <dialog id="payment-modal" className="backdrop:bg-black/80 p-8 w-full max-w-md mx-auto">
+      < dialog id="payment-modal" className="backdrop:bg-black/80 p-8 w-full max-w-md mx-auto" >
         <motion.form
           className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl rounded-3xl p-12 shadow-2xl border border-white/50 dark:border-gray-700/50"
           initial={{ scale: 0.9, opacity: 0, y: 20 }}
@@ -476,7 +474,7 @@ export default function Pricing() {
             </button>
           </div>
         </motion.form>
-      </dialog>
+      </dialog >
 
       <style jsx>{`
         dialog[open] {
@@ -487,6 +485,6 @@ export default function Pricing() {
           to { opacity: 1; transform: scale(1) translateY(0); }
         }
       `}</style>
-    </div>
+    </div >
   );
 }
\ No newline at end of file
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..9d8ca98
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTheme } from '../context/ThemeContext';
+import { FiSun, FiMoon } from 'react-icons/fi';
+
+const ThemeToggle = () => {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className="theme-toggle-btn"
+            aria-label="Toggle theme"
+            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+            {theme === 'dark' ? <FiSun className="w-5 h-5" /> : <FiMoon className="w-5 h-5" />}
+        </button>
+    );
+};
+
+export default ThemeToggle;
diff --git a/src/components/contributors.css b/src/components/contributors.css
index a8ec0a8..3573e02 100644
--- a/src/components/contributors.css
+++ b/src/components/contributors.css
@@ -1,104 +1,135 @@
-:root {
+/* Contributors Variables - Default to Light Mode (Airy/White) */
+.contributors-page {
   --primary-50: #f3e8ff;
   --primary-100: #e9d5ff;
   --primary-200: #d6b4fc;
   --primary-300: #c084fc;
   --primary-400: #a855f7;
-  --primary-500: #9333ea;  
+  --primary-500: #9333ea;
   --primary-600: #7e22ce;
   --primary-700: #6b21a8;
   --primary-800: #581c87;
-  --primary-900: #3b0764;  
-  
+  --primary-900: #3b0764;
+
   --secondary-400: #60a5fa;
-  --secondary-500: #3b82f6; 
+  --secondary-500: #3b82f6;
   --secondary-600: #2563eb;
   --secondary-700: #1d4ed8;
-  
+
   --accent-cyan: #06b6d4;
   --accent-teal: #14b8a6;
-  
+
   --gold-400: #facc15;
-  --gold-500: #eab308; 
+  --gold-500: #eab308;
   --gold-600: #ca8a04;
   --silver-300: #d1d5db;
   --silver-400: #9ca3af;
   --bronze-400: #f59e0b;
   --bronze-500: #d97706;
-  
-  --bg-body: #0a0315;          
-  --bg-surface: #120537;        
+
+  /* Default Light Mode */
+  --bg-body-inner: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-card: #ffffff;
+  --bg-card-hover: #f1f5f9;
+  --bg-glass: rgba(147, 51, 234, 0.04);
+  --bg-glass-hover: rgba(147, 51, 234, 0.08);
+
+  --text-primary-inner: var(--text-main);
+  --text-secondary-inner: var(--text-muted);
+  --text-muted-inner: #64748b;
+  --text-accent: var(--gold-600);
+
+  --border-base: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(147, 51, 234, 0.2);
+  --border-active: rgba(147, 51, 234, 0.3);
+
+  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--primary-900) 100%);
+  --gradient-secondary: linear-gradient(135deg, var(--secondary-500) 0%, var(--accent-cyan) 50%, var(--secondary-700) 100%);
+  --gradient-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
+  --gradient-silver: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
+  --gradient-bronze: linear-gradient(135deg, var(--bronze-400) 0%, #b45309 100%);
+  --gradient-glass: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
+
+  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
+  --shadow-purple-glow: 0 0 15px rgba(147, 51, 234, 0.12);
+  --shadow-blue-glow: 0 0 15px rgba(59, 130, 246, 0.12);
+  --shadow-gold-glow: 0 0 15px rgba(234, 179, 8, 0.15);
+
+  --radius-sm: 12px;
+  --radius-md: 20px;
+  --radius-lg: 28px;
+
+  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark Mode Overrides */
+.dark .contributors-page {
+  --bg-body-inner: #0a0315;
+  --bg-surface: #120537;
   --bg-card: rgba(18, 5, 55, 0.8);
   --bg-glass: rgba(255, 255, 255, 0.08);
   --bg-glass-hover: rgba(255, 255, 255, 0.12);
-  
-  --text-primary: #ffffff;
-  --text-secondary: #e5d8ff;
-  --text-muted: #a78bfa;
+  --bg-card-hover: linear-gradient(168deg, rgba(24, 8, 70, 0.98) 0%, rgba(14, 5, 35, 1) 100%);
+
+  --text-primary-inner: #ffffff;
+  --text-secondary-inner: #e5d8ff;
+  --text-muted-inner: #a78bfa;
   --text-accent: var(--gold-500);
-  
+
   --border-base: rgba(147, 51, 234, 0.2);
   --border-hover: rgba(59, 130, 246, 0.4);
   --border-active: rgba(147, 51, 234, 0.6);
-  
-  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--primary-900) 100%);
-  --gradient-secondary: linear-gradient(135deg, var(--secondary-500) 0%, var(--accent-cyan) 50%, var(--secondary-700) 100%);
-  --gradient-gold: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 50%, #ca8a04 100%);
-  --gradient-silver: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #9ca3af 100%);
-  --gradient-bronze: linear-gradient(135deg, var(--bronze-400) 0%, var(--bronze-500) 50%, #b45309 100%);
-  --gradient-glass: linear-gradient(135deg, rgba(147,51,234,0.1) 0%, rgba(59,130,246,0.1) 50%, rgba(6,182,212,0.1) 100%);
-  
+
   --shadow-sm: 0 4px 14px rgba(10, 3, 21, 0.4);
   --shadow-md: 0 12px 32px rgba(10, 3, 21, 0.6);
   --shadow-lg: 0 24px 64px rgba(10, 3, 21, 0.8);
   --shadow-purple-glow: 0 0 32px rgba(147, 51, 234, 0.4);
   --shadow-blue-glow: 0 0 32px rgba(59, 130, 246, 0.4);
   --shadow-gold-glow: 0 0 24px rgba(234, 179, 8, 0.6);
-  
-  --radius-sm: 12px;
-  --radius-md: 20px;
-  --radius-lg: 28px;
-  
-  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  background: var(--bg-body);
-  color: var(--text-primary);
+.contributors-page {
+  background: var(--bg-body-inner);
+  color: var(--text-primary-inner);
   line-height: 1.6;
-  overflow-x: hidden;
-  position: relative;
 }
 
-body::before {
+/* Cosmic background overlay - only in dark mode */
+.dark .contributors-page::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: 
-    radial-gradient(circle at 20% 80%, rgba(147,51,234,0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(59,130,246,0.1) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(6,182,212,0.08) 0%, transparent 50%);
+  background-image:
+    radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
   pointer-events: none;
   z-index: -1;
   animation: bgShift 20s ease-in-out infinite;
 }
 
 @keyframes bgShift {
-  0%, 100% { transform: scale(1) rotate(0deg); }
-  33% { transform: scale(1.05) rotate(1deg); }
-  66% { transform: scale(1.02) rotate(-1deg); }
+
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  33% {
+    transform: scale(1.05) rotate(1deg);
+  }
+
+  66% {
+    transform: scale(1.02) rotate(-1deg);
+  }
 }
 
 .contributors-page {
@@ -115,6 +146,7 @@ body::before {
     opacity: 0;
     transform: translateY(40px) scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -122,34 +154,62 @@ body::before {
 }
 
 @keyframes cosmicFloat {
-  0%, 100% { transform: translateY(0px) rotate(0deg); }
-  33% { transform: translateY(-12px) rotate(1deg); }
-  66% { transform: translateY(-6px) rotate(-1deg); }
+
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+
+  33% {
+    transform: translateY(-12px) rotate(1deg);
+  }
+
+  66% {
+    transform: translateY(-6px) rotate(-1deg);
+  }
 }
 
 @keyframes pulseNeon {
-  0%, 100% { 
+
+  0%,
+  100% {
     box-shadow: var(--shadow-md);
     border-color: var(--border-base);
   }
-  50% { 
+
+  50% {
     box-shadow: var(--shadow-purple-glow), var(--shadow-lg);
     border-color: var(--border-active);
   }
 }
 
 @keyframes shimmerWave {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 @keyframes rotateGlow {
-  from { filter: hue-rotate(0deg) brightness(1); }
-  to { filter: hue-rotate(360deg) brightness(1.1); }
+  from {
+    filter: hue-rotate(0deg) brightness(1);
+  }
+
+  to {
+    filter: hue-rotate(360deg) brightness(1.1);
+  }
 }
 
-.fade-in-up { animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
-.cosmic-float { animation: cosmicFloat 4s ease-in-out infinite; }
+.fade-in-up {
+  animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+.cosmic-float {
+  animation: cosmicFloat 4s ease-in-out infinite;
+}
 
 .contributors-header {
   text-align: center;
@@ -161,6 +221,10 @@ body::before {
   border-radius: var(--radius-lg);
   position: relative;
   overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.dark .contributors-header {
   box-shadow: var(--shadow-lg);
 }
 
@@ -177,7 +241,10 @@ body::before {
   animation: shimmerWave 3s infinite;
 }
 
-.contributors-header > * { position: relative; z-index: 2; }
+.contributors-header>* {
+  position: relative;
+  z-index: 2;
+}
 
 .contributors-title {
   font-size: clamp(3rem, 6vw, 5rem);
@@ -188,10 +255,13 @@ body::before {
   background-clip: text;
   margin-bottom: 1.5rem;
   letter-spacing: -0.03em;
-  text-shadow: 0 8px 32px rgba(147, 51, 234, 0.4);
   position: relative;
 }
 
+.dark .contributors-title {
+  text-shadow: 0 8px 32px rgba(147, 51, 234, 0.4);
+}
+
 .contributors-title::after {
   content: '';
   position: absolute;
@@ -206,7 +276,7 @@ body::before {
 
 .contributors-subtitle {
   font-size: 1.4rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary-inner);
   max-width: 700px;
   margin: 0 auto 4rem;
   font-weight: 300;
@@ -241,12 +311,11 @@ body::before {
   left: -150%;
   width: 150%;
   height: 100%;
-  background: linear-gradient(90deg, 
-    transparent, 
-    rgba(147,51,234,0.1), 
-    rgba(59,130,246,0.1), 
-    transparent
-  );
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(147, 51, 234, 0.1),
+      rgba(59, 130, 246, 0.1),
+      transparent);
   transition: left 0.8s;
 }
 
@@ -264,7 +333,7 @@ body::before {
 .stat-label {
   display: block;
   font-size: 0.95rem;
-  color: var(--text-muted);
+  color: var(--text-muted-inner);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.2px;
@@ -302,7 +371,7 @@ body::before {
   flex-wrap: wrap;
   margin-bottom: 4rem;
   padding: 2rem;
-  background: var(--bg-glass);
+  background: var(--bg-surface);
   backdrop-filter: blur(24px);
   border: 1px solid var(--border-base);
   border-radius: var(--radius-lg);
@@ -404,8 +473,25 @@ body::before {
   contain: layout style;
 }
 
+.project-admin-container {
+  background: var(--bg-card);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-lg);
+  padding: 3.5rem 4rem;
+  max-width: 900px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  transition: var(--transition-slow);
+  box-shadow: var(--shadow-md);
+}
+
+.dark .project-admin-container {
+  background: linear-gradient(168deg, rgba(234, 179, 8, 0.05) 0%, rgba(10, 3, 21, 0.98) 100%);
+}
+
 .contributor-card {
-  background: linear-gradient(168deg, rgba(18, 5, 55, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%);
+  background: var(--bg-card);
   border: 1px solid var(--border-base);
   border-radius: var(--radius-lg);
   padding: 2.5rem;
@@ -459,26 +545,40 @@ body::before {
 }
 
 .contributor-card:hover {
-  transform: translateY(-10px) scale(1.02);
+  transform: translateY(-8px) scale(1.02);
   box-shadow:
-    0 0 24px rgba(147, 51, 234, 0.25),
-    0 20px 60px rgba(10, 3, 21, 0.7),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    var(--shadow-purple-glow),
+    var(--shadow-lg),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
   border-color: var(--border-hover);
+  background: var(--bg-card-hover);
+}
+
+.dark .contributor-card:hover {
   background: linear-gradient(168deg, rgba(24, 8, 70, 0.98) 0%, rgba(14, 5, 35, 1) 100%);
+  box-shadow:
+    0 0 24px rgba(147, 51, 234, 0.25),
+    0 20px 60px rgba(10, 3, 21, 0.7);
 }
 
 /* ===== RANK-SPECIFIC CARD THEMES ===== */
 .contributor-card.contributor-rank-gold {
   border-color: rgba(234, 179, 8, 0.2);
+  background: var(--bg-card);
+}
+
+.dark .contributor-card.contributor-rank-gold {
   background: linear-gradient(168deg, rgba(30, 18, 5, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%);
 }
+
 .contributor-card.contributor-rank-gold::before {
   background: var(--gradient-gold);
 }
+
 .contributor-card.contributor-rank-gold::after {
   background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 70%);
 }
+
 .contributor-card.contributor-rank-gold:hover {
   border-color: rgba(234, 179, 8, 0.4);
   box-shadow:
@@ -496,11 +596,17 @@ body::before {
 
 .contributor-card.contributor-rank-silver {
   border-color: rgba(209, 213, 219, 0.15);
+  background: var(--bg-card);
+}
+
+.dark .contributor-card.contributor-rank-silver {
   background: linear-gradient(168deg, rgba(20, 15, 35, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%);
 }
+
 .contributor-card.contributor-rank-silver::before {
   background: var(--gradient-silver);
 }
+
 .contributor-card.contributor-rank-silver:hover {
   border-color: rgba(209, 213, 219, 0.35);
   box-shadow:
@@ -518,11 +624,17 @@ body::before {
 
 .contributor-card.contributor-rank-bronze {
   border-color: rgba(217, 119, 6, 0.2);
+  background: var(--bg-card);
+}
+
+.dark .contributor-card.contributor-rank-bronze {
   background: linear-gradient(168deg, rgba(25, 12, 5, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%);
 }
+
 .contributor-card.contributor-rank-bronze::before {
   background: var(--gradient-bronze);
 }
+
 .contributor-card.contributor-rank-bronze:hover {
   border-color: rgba(217, 119, 6, 0.4);
   box-shadow:
@@ -541,6 +653,7 @@ body::before {
 .contributor-card.contributor-rank-contributor {
   border-color: rgba(168, 85, 247, 0.15);
 }
+
 .contributor-card.contributor-rank-contributor::before {
   background: linear-gradient(90deg, var(--primary-500), var(--accent-cyan));
 }
@@ -603,7 +716,7 @@ body::before {
   font-size: 1.45rem;
   font-weight: 800;
   margin-bottom: 0.5rem;
-  background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);
+  background: linear-gradient(135deg, var(--text-primary-inner) 0%, var(--text-secondary-inner) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -626,9 +739,10 @@ body::before {
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-family: 'SF Mono', 'Roboto Mono', monospace;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-glass);
+  border: 1px solid var(--border-base);
   display: inline-block;
+  color: var(--text-secondary-inner);
 }
 
 .contributor-stats {
@@ -637,9 +751,9 @@ body::before {
   gap: 0;
   margin-bottom: 1.75rem;
   padding: 0;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--bg-glass);
   border-radius: var(--radius-sm);
-  border: 1px solid rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-base);
   overflow: hidden;
 }
 
@@ -650,13 +764,13 @@ body::before {
 }
 
 .contributor-stat-item:first-child {
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  border-right: 1px solid var(--border-base);
 }
 
 .contributor-stat-label {
   display: block;
   font-size: 0.7rem;
-  color: var(--text-muted);
+  color: var(--text-muted-inner);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 0.4rem;
@@ -674,6 +788,12 @@ body::before {
   font-family: 'SF Mono', 'Roboto Mono', monospace;
 }
 
+:root:not(.dark) .contributor-stat-value {
+  background: none;
+  -webkit-text-fill-color: initial;
+  color: var(--gold-600);
+}
+
 .btn {
   padding: 1.125rem 2.25rem;
   border-radius: var(--radius-md);
@@ -701,11 +821,10 @@ body::before {
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, 
-    transparent, 
-    rgba(255,255,255,0.3), 
-    transparent
-  );
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent);
   transition: left 0.6s;
   z-index: 1;
 }
@@ -729,15 +848,16 @@ body::before {
 
 .btn-outline {
   background: transparent;
-  color: var(--text-primary);
+  color: var(--text-primary-inner);
   border: 2px solid var(--secondary-500);
-  box-shadow: var(--shadow-blue-glow);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
 }
 
 .btn-outline:hover {
   background: var(--secondary-500);
-  transform: translateY(-4px) scale(1.08);
-  box-shadow: var(--shadow-blue-glow), 0 20px 40px rgba(59, 130, 246, 0.4);
+  transform: translateY(-4px) scale(1.05);
+  box-shadow: var(--shadow-blue-glow), 0 12px 24px rgba(59, 130, 246, 0.25);
+  color: white;
 }
 
 .contributor-actions {
@@ -760,7 +880,8 @@ body::before {
 .contributors-modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(10, 3, 21, 0.9);
+  background: rgba(10, 3, 21, 0.85);
+  /* Dark theme default */
   backdrop-filter: blur(12px);
   z-index: 1000;
   display: flex;
@@ -769,20 +890,29 @@ body::before {
   animation: fadeInUp 0.4s ease-out;
 }
 
+:root:not(.dark) .contributors-modal-backdrop {
+  background: rgba(255, 255, 255, 0.6);
+}
+
 .contributors-modal {
   background: var(--bg-surface);
   backdrop-filter: blur(40px);
-  border: 1px solid var(--border-active);
+  border: 1px solid var(--border-base);
   border-radius: var(--radius-lg);
   max-width: 700px;
   max-height: 85vh;
   width: 92%;
   overflow-y: auto;
   animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-shadow: var(--shadow-lg), var(--shadow-purple-glow);
+  box-shadow: var(--shadow-lg);
   position: relative;
 }
 
+.dark .contributors-modal {
+  border-color: var(--border-active);
+  box-shadow: var(--shadow-lg), var(--shadow-purple-glow);
+}
+
 .contributors-modal::-webkit-scrollbar {
   width: 10px;
 }
@@ -814,17 +944,17 @@ body::before {
 .contributors-modal-title {
   font-size: 1.8rem;
   font-weight: 800;
-  background: var(--gradient-secondary);
+  background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .contributors-modal-close {
-  background: rgba(147, 51, 234, 0.2);
-  border: 2px solid var(--border-base);
+  background: var(--bg-glass);
+  border: 1px solid var(--border-base);
   font-size: 1.8rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary-inner);
   cursor: pointer;
   width: 48px;
   height: 48px;
@@ -946,45 +1076,78 @@ body::before {
 }
 
 @media (max-width: 1024px) {
-  .contributors-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
+  .contributors-grid {
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  }
 }
 
 @media (max-width: 768px) {
-  .contributors-page { padding: 1.5rem 1rem; }
-  .contributors-controls { 
+  .contributors-page {
+    padding: 1.5rem 1rem;
+  }
+
+  .contributors-controls {
     justify-content: center;
-    align-items: center; 
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .contributors-search-input {
+    min-width: 200px;
+  }
+
+  .contributors-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .contributor-stats {
+    flex-direction: column;
     gap: 1.5rem;
   }
-  .contributors-search-input { min-width: 200px; }
-  .contributors-grid { 
-    grid-template-columns: 1fr; 
-    gap: 2rem; 
+
+  .contributor-actions {
+    flex-direction: column;
   }
-  .contributor-stats { 
-    flex-direction: column; 
-    gap: 1.5rem; 
+
+  .contributors-stats {
+    gap: 1.5rem;
   }
-  .contributor-actions { flex-direction: column; }
-  .contributors-stats { gap: 1.5rem; }
-  .contributors-modal-header { 
-    flex-direction: column; 
-    gap: 1.5rem; 
-    text-align: center; 
+
+  .contributors-modal-header {
+    flex-direction: column;
+    gap: 1.5rem;
+    text-align: center;
   }
-  .contributors-filters{
+
+  .contributors-filters {
     flex-direction: column;
   }
 }
 
 @media (max-width: 480px) {
-  .contributors-header { padding: 2.5rem 1.5rem; }
-  .contributors-stats { flex-direction: column; align-items: center; }
-  .contributors-stat-card { min-width: 280px; }
-  .contributor-card { padding: 2rem; }
+  .contributors-header {
+    padding: 2.5rem 1.5rem;
+  }
+
+  .contributors-stats {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .contributors-stat-card {
+    min-width: 280px;
+  }
+
+  .contributor-card {
+    padding: 2rem;
+  }
 }
 
-.contributor-card, .btn, .contributors-select, .contributors-search-input {
+.contributor-card,
+.btn,
+.contributors-select,
+.contributors-search-input {
   backface-visibility: hidden;
   transform: translateZ(0);
 }
@@ -1001,12 +1164,16 @@ body::before {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  * { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; }
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.2s !important;
+  }
 }
 
 /* Custom Scrollbar for Grid */
 .contributors-grid::-webkit-scrollbar {
-  width: 12px; height: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 .contributors-grid::-webkit-scrollbar-track {
@@ -1025,10 +1192,14 @@ body::before {
 @media print {
   :root {
     --bg-body: white;
-    --bg-card: rgba(255,255,255,0.9);
+    --bg-card: rgba(255, 255, 255, 0.9);
     --text-primary: black;
   }
-  .btn, .contributors-modal { display: none !important; }
+
+  .btn,
+  .contributors-modal {
+    display: none !important;
+  }
 }
 
 
@@ -1043,20 +1214,24 @@ body::before {
 }
 
 .project-admin-container {
-  background: linear-gradient(165deg, rgba(24, 10, 65, 0.97) 0%, rgba(12, 4, 30, 0.99) 60%, rgba(18, 8, 50, 0.97) 100%);
-  border: 1px solid rgba(147, 51, 234, 0.3);
+  background: var(--bg-card);
+  border: 1px solid var(--border-base);
   border-radius: var(--radius-lg);
   padding: 3rem;
   position: relative;
   overflow: hidden;
-  box-shadow:
-    0 24px 80px rgba(10, 3, 21, 0.7),
-    0 0 40px rgba(147, 51, 234, 0.15);
+  box-shadow: var(--shadow-md);
   transition: var(--transition-slow);
   max-width: 640px;
   margin: 0 auto 3rem;
 }
 
+.dark .project-admin-container {
+  box-shadow:
+    0 24px 80px rgba(10, 3, 21, 0.7),
+    0 0 40px rgba(147, 51, 234, 0.15);
+}
+
 /* Animated gradient top border */
 .project-admin-container::before {
   content: '';
@@ -1088,12 +1263,19 @@ body::before {
 .project-admin-container:hover {
   transform: translateY(-6px);
   box-shadow:
-    0 0 32px rgba(234, 179, 8, 0.15),
-    0 32px 80px rgba(10, 3, 21, 0.8),
+    var(--shadow-gold-glow),
+    var(--shadow-lg),
     inset 0 1px 0 rgba(234, 179, 8, 0.08);
   border-color: rgba(234, 179, 8, 0.3);
 }
 
+.dark .project-admin-container:hover {
+  box-shadow:
+    var(--shadow-gold-glow),
+    var(--shadow-xl),
+    inset 0 1px 0 rgba(234, 179, 8, 0.08);
+}
+
 .project-admin-container:hover::after {
   top: -60px;
   right: -60px;
@@ -1143,13 +1325,17 @@ body::before {
   height: 100%;
   border-radius: 50%;
   border: none;
-  box-shadow: 0 4px 20px rgba(10, 3, 21, 0.6);
+  box-shadow: var(--shadow-sm);
   transition: var(--transition-normal);
   object-fit: cover;
   position: relative;
   z-index: 1;
 }
 
+.dark .project-admin-avatar {
+  box-shadow: 0 4px 20px rgba(10, 3, 21, 0.6);
+}
+
 .project-admin-container:hover .project-admin-avatar {
   transform: scale(1.06);
   box-shadow: 0 0 24px rgba(234, 179, 8, 0.3);
@@ -1182,8 +1368,7 @@ body::before {
 .project-admin-info h2 {
   font-size: 1.75rem;
   font-weight: 900;
-  background: linear-gradient(135deg, var(--gold-400) 0%, #fff 50%, var(--gold-500) 100%);
-  background-size: 200% 100%;
+  background: var(--gradient-gold);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1228,14 +1413,14 @@ body::before {
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 1.5rem;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--bg-glass);
+  border: 1px solid var(--border-base);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition-normal);
   font-weight: 600;
   font-size: 1.05rem;
-  color: var(--text-primary);
+  color: var(--text-primary-inner);
 }
 
 .project-admin-repo-link:hover {
@@ -1277,11 +1462,11 @@ body::before {
     text-align: center;
     gap: 1.25rem;
   }
-  
+
   .project-admin-actions {
     flex-direction: column;
   }
-  
+
   .project-admin-container {
     margin: 0 0 2rem;
     padding: 2rem 1.5rem;
@@ -1293,7 +1478,8 @@ body::before {
     height: 90px;
   }
 }
-.contributors-content{
+
+.contributors-content {
   display: flex;
   flex-direction: column;
   gap: 3rem;
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
index 97c6663..5fa718b 100644
--- a/src/context/ThemeContext.jsx
+++ b/src/context/ThemeContext.jsx
@@ -14,14 +14,22 @@ export const useTheme = () => {
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState(() => {
     const savedTheme = localStorage.getItem("cryptohub-theme");
-    return savedTheme || "dark";
+    if (savedTheme) return savedTheme;
+    // Fallback to system preference
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+      return "light";
+    }
+    return "dark";
   });
 
   useEffect(() => {
-    requestAnimationFrame(() => {
-      localStorage.setItem("cryptohub-theme", theme);
-      document.documentElement.classList.toggle("dark", theme === "dark");
-    });
+    localStorage.setItem("cryptohub-theme", theme);
+    document.documentElement.setAttribute("data-theme", theme);
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
   }, [theme]);
 
   const toggleTheme = useCallback(() => {
diff --git a/src/data/BlogArticle.css b/src/data/BlogArticle.css
index b25734d..4fb42c8 100644
--- a/src/data/BlogArticle.css
+++ b/src/data/BlogArticle.css
@@ -62,10 +62,10 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, 
-    rgba(69, 89, 220, 0.1) 0%, 
-    rgba(34, 197, 94, 0.05) 50%, 
-    rgba(157, 78, 221, 0.05) 100%);
+  background: linear-gradient(135deg,
+      rgba(69, 89, 220, 0.1) 0%,
+      rgba(34, 197, 94, 0.05) 50%,
+      rgba(157, 78, 221, 0.05) 100%);
   z-index: -1;
 }
 
@@ -919,12 +919,12 @@
   .content-layout {
     grid-template-columns: 1fr;
   }
-  
+
   .article-sidebar {
     position: static;
     order: 2;
   }
-  
+
   .toc-card {
     display: none;
   }
@@ -938,38 +938,38 @@
     transform: none;
     flex-direction: row;
   }
-  
+
   .article-title {
     font-size: 32px;
   }
-  
+
   .article-excerpt {
     font-size: 18px;
     padding-left: 15px;
   }
-  
+
   .article-meta-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .quick-stats {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .cta-content {
     flex-direction: column;
     text-align: center;
   }
-  
+
   .cta-form {
     flex-direction: column;
     width: 100%;
   }
-  
+
   .related-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .takeaways-grid {
     grid-template-columns: 1fr;
   }
@@ -980,20 +980,128 @@
     flex-direction: column;
     align-items: flex-start;
   }
-  
+
   .article-title {
     font-size: 28px;
   }
-  
+
   .article-excerpt {
     font-size: 16px;
   }
-  
+
   .content-section h2 {
     font-size: 22px;
   }
-  
+
   .content-section p {
     font-size: 16px;
   }
+}
+
+/* ========== LIGHT THEME OVERRIDES ========== */
+[data-theme="light"] .blog-article-container {
+  background: var(--bg-deep);
+  color: var(--text-main);
+}
+
+[data-theme="light"] .article-title {
+  background: none;
+  -webkit-text-fill-color: initial;
+  color: #0f172a;
+}
+
+[data-theme="light"] .article-excerpt {
+  color: #475569;
+  border-left-color: #7c3aed;
+}
+
+[data-theme="light"] .meta-value,
+[data-theme="light"] .toc-title,
+[data-theme="light"] .data-source h4,
+[data-theme="light"] .author-info h4,
+[data-theme="light"] .content-section h2,
+[data-theme="light"] .highlight-box strong,
+[data-theme="light"] .card-header h3,
+[data-theme="light"] .viz-header,
+[data-theme="light"] .section-header h2,
+[data-theme="light"] .card-body h3,
+[data-theme="light"] .blog-article-not-found h1 {
+  color: #0f172a;
+}
+
+[data-theme="light"] .article-meta-grid,
+[data-theme="light"] .toc-card,
+[data-theme="light"] .stat,
+[data-theme="light"] .author-card-sidebar,
+[data-theme="light"] .metric-card,
+[data-theme="light"] .insight-list li,
+[data-theme="light"] .takeaway,
+[data-theme="light"] .insight-card,
+[data-theme="light"] .cta-content,
+[data-theme="light"] .viz-placeholder {
+  background: #ffffff;
+  border-color: #e2e8f0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] .content-section p,
+[data-theme="light"] .meta-label,
+[data-theme="light"] .stat-label,
+[data-theme="light"] .toc-link,
+[data-theme="light"] .author-info p,
+[data-theme="light"] .metric-label,
+[data-theme="light"] .viz-labels,
+[data-theme="light"] .takeaway p,
+[data-theme="light"] .card-body p,
+[data-theme="light"] .section-subtitle,
+[data-theme="light"] .date,
+[data-theme="light"] .read-time,
+[data-theme="light"] .blog-article-not-found p,
+[data-theme="light"] .cta-text p {
+  color: #475569;
+}
+
+[data-theme="light"] .highlight-box {
+  background: #f5f3ff;
+}
+
+[data-theme="light"] .highlight-box.success {
+  background: #f0fdf4;
+}
+
+[data-theme="light"] .data-viz {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+[data-theme="light"] .key-takeaways-card {
+  background: linear-gradient(135deg, #f5f3ff 0%, #f0fdf4 100%);
+  border-color: #e0e7ff;
+}
+
+[data-theme="light"] .related-insights {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+[data-theme="light"] .cta-form input {
+  background: #ffffff;
+  border-color: #d1d5db;
+  color: #0f172a;
+}
+
+[data-theme="light"] .back-btn {
+  border-color: #d1d5db;
+  color: #475569;
+}
+
+[data-theme="light"] .back-btn:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+[data-theme="light"] .toc-link:hover,
+[data-theme="light"] .toc-link.active {
+  background: #f5f3ff;
+  color: #7c3aed;
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 4ce4e59..617b5e6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,6 +6,57 @@
 @tailwind utilities;
 
 :root {
+  /* Light Mode Defaults - Smoother Palette */
+  --bg-deep: #fdfdfd;
+  --bg-stars: #f8fafc;
+
+  /* Neon Accents - Refined for Light Mode Contrast */
+  --neon-cyan: #0891b2;
+  --neon-purple: #7c3aed;
+  --neon-pink: #db2777;
+
+  /* Glows - Subtle */
+  --glow-cyan: rgba(8, 145, 178, 0.15);
+  --glow-purple: rgba(124, 58, 237, 0.15);
+
+  --text-main: #0f172a;
+  --text-muted: #475569;
+
+  /* Professional Dashboard Theme - Light */
+  --dashboard-bg-primary: #f8fafc;
+  --dashboard-bg-secondary: #f1f5f9;
+  --dashboard-bg-elevated: #ffffff;
+  --dashboard-bg-card: #ffffff;
+
+  /* Dashboard Borders - Light */
+  --dashboard-border-subtle: rgba(0, 0, 0, 0.05);
+  --dashboard-border-medium: rgba(0, 0, 0, 0.08);
+  --dashboard-border-hover: rgba(8, 145, 178, 0.2);
+  --dashboard-border-active: rgba(8, 145, 178, 0.3);
+
+  /* Dashboard Text - Light */
+  --dashboard-text-primary: #0f172a;
+  --dashboard-text-secondary: #334155;
+  --dashboard-text-muted: #64748b;
+
+  /* Dashboard Accents - Light */
+  --dashboard-accent-cyan: #0891b2;
+  --dashboard-accent-cyan-dim: rgba(8, 145, 178, 0.08);
+  --dashboard-accent-cyan-hover: rgba(8, 145, 178, 0.12);
+
+  /* Dashboard Shadows - Professional & Soft */
+  --dashboard-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --dashboard-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --dashboard-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* Glass - Softened for Light Mode */
+  --glass-panel-bg: rgba(255, 255, 255, 0.85);
+  --glass-card-bg: rgba(255, 255, 255, 0.9);
+  --glass-border: rgba(0, 0, 0, 0.04);
+  --navbar-bg: rgba(255, 255, 255, 0.9);
+}
+
+:root[class~="dark"] {
   --bg-deep: #050505;
   --bg-stars: #0a0a0f;
 
@@ -47,6 +98,11 @@
   --dashboard-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
   --dashboard-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
   --dashboard-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
+
+  /* Glass - Dark */
+  --glass-panel-bg: rgba(10, 10, 15, 0.6);
+  --glass-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
+  --glass-border: rgba(255, 255, 255, 0.08);
 }
 
 * {
@@ -56,23 +112,31 @@
   font-family: "Outfit", sans-serif;
 }
 
+html {
+  /* Lenis handles smooth scrolling; keep native behavior instant for consistency */
+  scroll-behavior: auto;
+}
+
 body {
   background-color: var(--bg-deep);
   color: var(--text-main);
-  background:
-    radial-gradient(ellipse at top, #19102c 0%, transparent 40%),
-    /* Top Purple Nebula */
-    radial-gradient(circle at 80% 20%, #0c1827 0%, transparent 30%),
-    /* Right Blue Void */
-    #050505;
-  /* Fallback Base */
   min-height: 100vh;
   overflow-x: hidden;
   position: relative;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Global theme transition for all elements */
+*,
+*::before,
+*::after {
+  transition-property: background-color, border-color, color, box-shadow;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
 }
 
-/* Starfield overlay pattern (optional enhancement) */
-body::before {
+/* Starfield overlay pattern - dark mode only */
+:root[class~="dark"] body::before {
   content: "";
   position: fixed;
   top: 0;
@@ -100,17 +164,17 @@ a {
    Glassmorphism Utilities
 -------------------------------- */
 .glass-panel {
-  background: rgba(10, 10, 15, 0.6);
+  background: var(--glass-panel-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
 }
 
 .glass-card {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
+  background: var(--glass-card-bg);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--glass-border);
   transition: all 0.3s ease;
 }
 
@@ -124,10 +188,10 @@ a {
 .auth-input {
   width: 100%;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--dashboard-bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  color: #fff;
+  color: var(--text-main);
   font-size: 1rem;
   outline: none;
   transition: all 0.3s ease;
@@ -135,8 +199,8 @@ a {
 
 .auth-input:focus {
   border-color: var(--neon-cyan);
-  box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
-  background: rgba(0, 243, 255, 0.05);
+  box-shadow: 0 0 10px var(--glow-cyan);
+  background: var(--dashboard-accent-cyan-dim);
 }
 
 /* -----------------------------
@@ -160,7 +224,6 @@ a {
 
 .btn-neon:hover {
   box-shadow: 0 0 20px var(--glow-cyan);
-  transform: translateY(-2px);
   filter: brightness(1.2);
 }
 
@@ -177,21 +240,21 @@ a {
 
 .btn-neon-purple:hover {
   box-shadow: 0 0 20px var(--glow-purple);
-  transform: translateY(-2px);
   filter: brightness(1.2);
 }
 
 /* Text Gradients */
 .text-gradient-cyan {
-  background: linear-gradient(to right, #00f3ff, #0066ff);
+  background: linear-gradient(to right, var(--neon-cyan), #0066ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .text-gradient-purple {
-  background: linear-gradient(to right, #bc00dd, #ff0055);
+  background: linear-gradient(to right, #8b5cf6, #ec4899);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 /* -----------------------------
@@ -232,16 +295,17 @@ a {
 }
 
 ::-webkit-scrollbar-track {
-  background: #000;
+  background: var(--bg-deep);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #333;
+  background: var(--text-muted);
   border-radius: 3px;
+  border: 2px solid var(--bg-deep);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: var(--text-main);
 }
 
 body[data-theme="light"] .signup-btn,
diff --git a/src/pages/Dashboard/Dashboard.jsx b/src/pages/Dashboard/Dashboard.jsx
index 2bf9a34..6f249e2 100644
--- a/src/pages/Dashboard/Dashboard.jsx
+++ b/src/pages/Dashboard/Dashboard.jsx
@@ -75,13 +75,10 @@ const Dashboard = () => {
   ];
 
   return (
-    <div className={`min-h-screen flex ${isDark ? 'bg-[#0a0a1a]' : 'bg-gradient-to-br from-gray-50 to-gray-100'}`}>
+    <div className="min-h-screen flex bg-[var(--dashboard-bg-primary)] transition-colors duration-300">
       <aside
         className={`fixed lg:sticky top-0 left-0 h-screen transition-all duration-300 z-50 ${sidebarOpen ? "w-72" : "w-0 lg:w-20"
-          } overflow-hidden ${isDark
-            ? 'bg-[#0f0f1f] border-[rgba(255,255,255,0.08)]'
-            : 'bg-white border-gray-200'
-          } backdrop-blur-2xl border-r shadow-2xl`}
+          } overflow-hidden bg-[var(--dashboard-bg-elevated)] border-r border-[var(--dashboard-border-subtle)] backdrop-blur-2xl shadow-2xl`}
       >
         <div className="flex flex-col h-full p-5">
           <div className="flex items-center justify-between mb-8">
@@ -99,31 +96,25 @@ const Dashboard = () => {
             )}
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
-              className={`p-2.5 rounded-lg transition-all duration-200 ${isDark
-                ? 'hover:bg-[rgba(0,217,255,0.1)]'
-                : 'hover:bg-gray-100'
-                }`}
+              className="p-2.5 rounded-lg transition-all duration-200 hover:bg-[var(--dashboard-border-hover)] text-[var(--dashboard-text-secondary)]"
             >
-              <span className={`text-lg ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
+              <span className="text-lg">
                 {sidebarOpen ? "◀" : "▶"}
               </span>
             </button>
           </div>
 
           {sidebarOpen && (
-            <div className={`mb-6 p-4 rounded-xl border transition-all duration-200 ${isDark
-              ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)] hover:border-[rgba(0,217,255,0.2)]'
-              : 'bg-gradient-to-br from-purple-50 to-blue-50 border-purple-200 hover:border-purple-300'
-              }`}>
+            <div className="mb-6 p-4 rounded-xl border transition-all duration-200 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-medium)] hover:border-[var(--dashboard-border-hover)]">
               <div className="flex items-center gap-3">
-                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00d9ff] to-[#00a8cc] flex items-center justify-center text-2xl font-bold shadow-lg ring-4 ring-[rgba(0,217,255,0.1)] text-[#0a0a1a]">
+                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00d9ff] to-[#00a8cc] flex items-center justify-center text-2xl font-bold shadow-lg ring-4 ring-[rgba(0,217,255,0.12)] text-[#0a0a1a]">
                   {getFirstName().charAt(0).toUpperCase()}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className={`font-bold truncate text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  <p className="font-bold truncate text-base text-[var(--dashboard-text-primary)]">
                     {getFirstName()}
                   </p>
-                  <p className={`text-xs truncate ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
+                  <p className="text-xs truncate text-[var(--dashboard-text-muted)]">
                     {currentUser?.email}
                   </p>
                 </div>
@@ -137,10 +128,8 @@ const Dashboard = () => {
                 key={index}
                 onClick={() => navigate(item.path)}
                 className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-xl transition-all duration-200 font-medium ${item.active
-                  ? "bg-[rgba(0,217,255,0.1)] text-[#00d9ff] border border-[rgba(0,217,255,0.2)]"
-                  : isDark
-                    ? "text-gray-300 hover:bg-[rgba(0,217,255,0.05)] hover:text-[#00d9ff]"
-                    : "text-gray-700 hover:bg-purple-50 hover:text-purple-700"
+                  ? "bg-[var(--dashboard-accent-cyan-dim)] text-[var(--dashboard-accent-cyan)] border border-[var(--dashboard-border-active)]"
+                  : "text-[var(--dashboard-text-secondary)] hover:bg-[var(--dashboard-border-subtle)] hover:text-[var(--dashboard-accent-cyan)]"
                   } ${!sidebarOpen && "justify-center"}`}
               >
                 <span className={sidebarOpen ? "" : ""}>{item.icon}</span>
@@ -152,21 +141,15 @@ const Dashboard = () => {
           {sidebarOpen && (
             <div className={`mt-auto space-y-3`}>
               {/* Theme Toggle Section */}
-              <div className={`p-3 rounded-xl border ${isDark
-                ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.05)]'
-                : 'bg-gray-50 border-gray-200'
-                }`}>
+              <div className="p-3 rounded-xl border bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
                 <div className="flex items-center justify-between mb-2">
-                  <span className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
+                  <span className="text-sm font-medium text-[var(--dashboard-text-secondary)]">
                     Theme
                   </span>
                 </div>
                 <button
                   onClick={toggleTheme}
-                  className={`w-full flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg transition-all duration-200 ${isDark
-                    ? 'bg-[rgba(0,217,255,0.1)] hover:bg-[rgba(0,217,255,0.15)] text-white'
-                    : 'bg-white hover:bg-gray-100 text-gray-900 border border-gray-200'
-                    }`}
+                  className="w-full flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg transition-all duration-200 bg-[var(--dashboard-bg-elevated)] hover:bg-[var(--dashboard-border-subtle)] text-[var(--dashboard-text-primary)] border border-[var(--dashboard-border-medium)]"
                 >
                   <span className="text-lg">{isDark ? "🌙" : "☀️"}</span>
                   <span className="flex-1 text-left font-medium">{isDark ? "Dark" : "Light"}</span>
@@ -218,12 +201,9 @@ const Dashboard = () => {
         <div className="p-6 lg:p-10 max-w-[1600px] mx-auto">
           <button
             onClick={() => setSidebarOpen(!sidebarOpen)}
-            className={`lg:hidden mb-6 p-3 rounded-xl transition-all duration-200 ${isDark
-              ? 'bg-[rgba(0,217,255,0.1)] hover:bg-[rgba(0,217,255,0.15)]'
-              : 'bg-white hover:bg-gray-100 border border-gray-200'
-              }`}
+            className="lg:hidden mb-6 p-3 rounded-xl transition-all duration-200 bg-[var(--dashboard-bg-elevated)] hover:bg-[var(--dashboard-border-subtle)] border border-[var(--dashboard-border-medium)]"
           >
-            <span className={`text-2xl ${isDark ? 'text-white' : 'text-gray-900'}`}>☰</span>
+            <span className="text-2xl text-[var(--dashboard-text-primary)]">☰</span>
           </button>
 
           <div className="mb-10">
@@ -235,89 +215,71 @@ const Dashboard = () => {
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
               </svg>
             </h1>
-            <p className={`text-lg ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
+            <p className="text-lg text-[var(--dashboard-text-secondary)]">
               Welcome back to your crypto dashboard
             </p>
           </div>
 
           <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
-            <div className={`xl:col-span-2 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 ${isDark
-              ? 'bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]'
-              : 'bg-white border-gray-200 shadow-xl'
-              }`}>
+            <div className="xl:col-span-2 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
               <div className="flex items-center gap-4 mb-6">
-                <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
-                  <svg className="w-6 h-6 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-12 h-12 rounded-xl bg-[var(--dashboard-accent-cyan-dim)] border border-[var(--dashboard-accent-cyan-hover)] flex items-center justify-center shadow-lg">
+                  <svg className="w-6 h-6 text-[var(--dashboard-accent-cyan)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                   </svg>
                 </div>
-                <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
                   Portfolio Overview
                 </h2>
               </div>
               <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                  ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                  : 'bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200'
-                  }`}>
-                  <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Total Value</p>
-                  <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>$0.00</p>
+                <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                  <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Total Value</p>
+                  <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">$0.00</p>
                 </div>
-                <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                  ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                  : 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200'
-                  }`}>
-                  <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Assets</p>
-                  <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>0</p>
+                <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                  <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Assets</p>
+                  <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">0</p>
                 </div>
-                <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                  ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                  : 'bg-gradient-to-br from-green-50 to-green-100 border-green-200'
-                  }`}>
-                  <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>24h Profit</p>
+                <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                  <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">24h Profit</p>
                   <p className="text-3xl font-bold text-green-400">+0.00%</p>
                 </div>
-                <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                  ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                  : 'bg-gradient-to-br from-amber-50 to-amber-100 border-amber-200'
-                  }`}>
-                  <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Watchlist</p>
-                  <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>0</p>
+                <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                  <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Watchlist</p>
+                  <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">0</p>
                 </div>
               </div>
             </div>
 
-            <div className={`xl:col-span-1 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 ${isDark
-              ? 'bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]'
-              : 'bg-white border-gray-200 shadow-xl'
-              }`}>
+            <div className="xl:col-span-1 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
               <div className="flex items-center gap-4 mb-6">
-                <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
-                  <svg className="w-6 h-6 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-12 h-12 rounded-xl bg-[var(--dashboard-accent-cyan-dim)] border border-[var(--dashboard-accent-cyan-hover)] flex items-center justify-center shadow-lg">
+                  <svg className="w-6 h-6 text-[var(--dashboard-accent-cyan)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                   </svg>
                 </div>
-                <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
                   Account
                 </h2>
               </div>
               <div className="space-y-4">
-                <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                  <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Email</p>
-                  <p className={`font-semibold truncate ${isDark ? 'text-gray-300' : 'text-gray-900'}`}>
+                <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                  <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Email</p>
+                  <p className="font-semibold truncate text-[var(--dashboard-text-secondary)]">
                     {currentUser?.email}
                   </p>
                 </div>
-                <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                  <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Status</p>
+                <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                  <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Status</p>
                   <span className="inline-flex items-center gap-2 text-green-400 bg-green-400/10 px-3 py-1.5 rounded-lg text-sm font-medium">
                     <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                     Active
                   </span>
                 </div>
-                <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                  <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Member Since</p>
-                  <p className={`font-semibold ${isDark ? 'text-gray-300' : 'text-gray-900'}`}>
+                <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                  <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Member Since</p>
+                  <p className="font-semibold text-[var(--dashboard-text-secondary)]">
                     {currentUser?.metadata?.creationTime
                       ? new Date(currentUser.metadata.creationTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
                       : "N/A"}
@@ -326,10 +288,7 @@ const Dashboard = () => {
                 <div className="pt-2">
                   <button
                     onClick={() => navigate('/change-password')}
-                    className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl transition-all duration-200 font-medium border ${isDark
-                      ? 'bg-[rgba(0,217,255,0.1)] hover:bg-[rgba(0,217,255,0.15)] text-[#00d9ff] border-[rgba(0,217,255,0.2)] hover:border-[rgba(0,217,255,0.3)]'
-                      : 'bg-purple-50 hover:bg-purple-100 text-purple-600 border-purple-200 hover:border-purple-300'
-                      }`}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl transition-all duration-200 font-medium border bg-[var(--dashboard-accent-cyan-dim)] hover:bg-[var(--dashboard-accent-cyan-hover)] text-[var(--dashboard-accent-cyan)] border-[var(--dashboard-border-hover)] hover:border-[var(--dashboard-border-active)]"
                   >
                     <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
diff --git a/src/pages/Dashboard/DashboardContent.jsx b/src/pages/Dashboard/DashboardContent.jsx
index 40848af..7fe7df3 100644
--- a/src/pages/Dashboard/DashboardContent.jsx
+++ b/src/pages/Dashboard/DashboardContent.jsx
@@ -35,89 +35,71 @@ const DashboardContent = () => {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
                     </svg>
                 </h1>
-                <p className={`text-lg ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
+                <p className="text-lg text-[var(--dashboard-text-secondary)]">
                     Welcome back to your crypto dashboard
                 </p>
             </div>
 
             <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
-                <div className={`xl:col-span-2 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 ${isDark
-                    ? 'bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]'
-                    : 'bg-white border-gray-200 shadow-xl'
-                    }`}>
+                <div className="xl:col-span-2 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
                     <div className="flex items-center gap-4 mb-6">
-                        <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
-                            <svg className="w-6 h-6 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="w-12 h-12 rounded-xl bg-[var(--dashboard-accent-cyan-dim)] border border-[var(--dashboard-accent-cyan-hover)] flex items-center justify-center shadow-lg">
+                            <svg className="w-6 h-6 text-[var(--dashboard-accent-cyan)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                             </svg>
                         </div>
-                        <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
                             Portfolio Overview
                         </h2>
                     </div>
                     <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                        <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                            ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                            : 'bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200'
-                            }`}>
-                            <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Total Value</p>
-                            <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>$0.00</p>
+                        <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                            <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Total Value</p>
+                            <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">$0.00</p>
                         </div>
-                        <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                            ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                            : 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200'
-                            }`}>
-                            <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Assets</p>
-                            <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>0</p>
+                        <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                            <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Assets</p>
+                            <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">0</p>
                         </div>
-                        <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                            ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                            : 'bg-gradient-to-br from-green-50 to-green-100 border-green-200'
-                            }`}>
-                            <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>24h Profit</p>
+                        <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                            <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">24h Profit</p>
                             <p className="text-3xl font-bold text-green-400">+0.00%</p>
                         </div>
-                        <div className={`p-5 rounded-xl border transition-all duration-200 hover:scale-105 ${isDark
-                            ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)]'
-                            : 'bg-gradient-to-br from-amber-50 to-amber-100 border-amber-200'
-                            }`}>
-                            <p className={`text-sm mb-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Watchlist</p>
-                            <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>0</p>
+                        <div className="p-5 rounded-xl border transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)]">
+                            <p className="text-sm mb-2 text-[var(--dashboard-text-muted)]">Watchlist</p>
+                            <p className="text-3xl font-bold text-[var(--dashboard-text-primary)]">0</p>
                         </div>
                     </div>
                 </div>
 
-                <div className={`xl:col-span-1 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 ${isDark
-                    ? 'bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]'
-                    : 'bg-white border-gray-200 shadow-xl'
-                    }`}>
+                <div className="xl:col-span-1 rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
                     <div className="flex items-center gap-4 mb-6">
-                        <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
-                            <svg className="w-6 h-6 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="w-12 h-12 rounded-xl bg-[var(--dashboard-accent-cyan-dim)] border border-[var(--dashboard-accent-cyan-hover)] flex items-center justify-center shadow-lg">
+                            <svg className="w-6 h-6 text-[var(--dashboard-accent-cyan)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                             </svg>
                         </div>
-                        <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
                             Account
                         </h2>
                     </div>
                     <div className="space-y-4">
-                        <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                            <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Email</p>
-                            <p className={`font-semibold truncate ${isDark ? 'text-gray-300' : 'text-gray-900'}`}>
+                        <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                            <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Email</p>
+                            <p className="font-semibold truncate text-[var(--dashboard-text-secondary)]">
                                 {currentUser?.email}
                             </p>
                         </div>
-                        <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                            <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Status</p>
+                        <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                            <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Status</p>
                             <span className="inline-flex items-center gap-2 text-green-400 bg-green-400/10 px-3 py-1.5 rounded-lg text-sm font-medium">
                                 <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                                 Active
                             </span>
                         </div>
-                        <div className={`pb-4 border-b ${isDark ? 'border-[rgba(255,255,255,0.06)]' : 'border-gray-200'}`}>
-                            <p className={`text-sm mb-1 ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>Member Since</p>
-                            <p className={`font-semibold ${isDark ? 'text-gray-300' : 'text-gray-900'}`}>
+                        <div className="pb-4 border-b border-[var(--dashboard-border-medium)]">
+                            <p className="text-sm mb-1 text-[var(--dashboard-text-muted)]">Member Since</p>
+                            <p className="font-semibold text-[var(--dashboard-text-secondary)]">
                                 {currentUser?.metadata?.creationTime
                                     ? new Date(currentUser.metadata.creationTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
                                     : "N/A"}
@@ -126,10 +108,7 @@ const DashboardContent = () => {
                         <div className="pt-2">
                             <button
                                 onClick={() => navigate('/change-password')}
-                                className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl transition-all duration-200 font-medium border ${isDark
-                                    ? 'bg-[rgba(0,217,255,0.1)] hover:bg-[rgba(0,217,255,0.15)] text-[#00d9ff] border-[rgba(0,217,255,0.2)] hover:border-[rgba(0,217,255,0.3)]'
-                                    : 'bg-purple-50 hover:bg-purple-100 text-purple-600 border-purple-200 hover:border-purple-300'
-                                    }`}
+                                className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl transition-all duration-200 font-medium border bg-[var(--dashboard-accent-cyan-dim)] hover:bg-[var(--dashboard-accent-cyan-hover)] text-[var(--dashboard-accent-cyan)] border-[var(--dashboard-border-hover)] hover:border-[var(--dashboard-border-active)]"
                             >
                                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -168,27 +147,21 @@ const MarketOverviewWidget = ({ isDark, navigate }) => {
     }, [allCoin]);
 
     return (
-        <div className={`rounded-2xl p-8 border transition-all duration-300 ${isDark
-            ? 'bg-[#14141f] border-[rgba(255,255,255,0.08)]'
-            : 'bg-white border-gray-200 shadow-xl'
-            }`}>
+        <div className="rounded-2xl p-8 border transition-all duration-300 bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
             <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center gap-4">
-                    <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
-                        <svg className="w-6 h-6 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="w-12 h-12 rounded-xl bg-[var(--dashboard-accent-cyan-dim)] border border-[var(--dashboard-accent-cyan-hover)] flex items-center justify-center shadow-lg">
+                        <svg className="w-6 h-6 text-[var(--dashboard-accent-cyan)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                         </svg>
                     </div>
-                    <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
                         Market Overview
                     </h2>
                 </div>
                 <button
                     onClick={() => navigate('/market-overview')}
-                    className={`px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium ${isDark
-                        ? 'bg-[rgba(0,217,255,0.1)] hover:bg-[rgba(0,217,255,0.15)] text-[#00d9ff] border border-[rgba(0,217,255,0.2)]'
-                        : 'bg-cyan-50 hover:bg-cyan-100 text-cyan-600 border border-cyan-200'
-                        }`}
+                    className="px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium bg-[var(--dashboard-accent-cyan-dim)] hover:bg-[var(--dashboard-accent-cyan-hover)] text-[var(--dashboard-accent-cyan)] border border-[var(--dashboard-border-active)]"
                 >
                     View All →
                 </button>
@@ -200,7 +173,7 @@ const MarketOverviewWidget = ({ isDark, navigate }) => {
                     <svg className="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M12 2c1.5 3 4 5 4 8 0 2.21-1.79 4-4 4s-4-1.79-4-4c0-3 2.5-5 4-8zm0 20c-3.31 0-6-2.69-6-6 0-1.5.5-3 1.5-4.25.5 1.25 1.5 2.25 2.5 2.75v.5c0 1.1.9 2 2 2s2-.9 2-2v-.5c1-.5 2-1.5 2.5-2.75C18.5 13 19 14.5 19 16c0 3.31-2.69 6-6 6z" />
                     </svg>
-                    <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    <h3 className="text-lg font-semibold text-[var(--dashboard-text-primary)]">
                         Top Gainers (24h)
                     </h3>
                 </div>
@@ -209,18 +182,15 @@ const MarketOverviewWidget = ({ isDark, navigate }) => {
                         <div
                             key={coin.id}
                             onClick={() => navigate(`/coin/${coin.id}`)}
-                            className={`p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 ${isDark
-                                ? 'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.08)] hover:border-[rgba(0,217,255,0.2)]'
-                                : 'bg-gray-50 border-gray-200 hover:border-cyan-300'
-                                }`}
+                            className="p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] border-[var(--dashboard-border-subtle)] hover:border-[var(--dashboard-border-hover)]"
                         >
                             <div className="flex items-center gap-3 mb-2">
                                 <img src={coin.image} alt={coin.name} className="w-8 h-8 rounded-full" />
                                 <div>
-                                    <p className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                                    <p className="font-semibold text-[var(--dashboard-text-primary)]">
                                         {coin.name}
                                     </p>
-                                    <p className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>
+                                    <p className="text-xs text-[var(--dashboard-text-muted)]">
                                         {coin.symbol.toUpperCase()}
                                     </p>
                                 </div>
@@ -239,7 +209,7 @@ const MarketOverviewWidget = ({ isDark, navigate }) => {
                     <svg className="w-5 h-5 text-[#00d9ff]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                     </svg>
-                    <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    <h3 className="text-lg font-semibold text-[var(--dashboard-text-primary)]">
                         Top Cryptocurrencies
                     </h3>
                 </div>
@@ -248,27 +218,24 @@ const MarketOverviewWidget = ({ isDark, navigate }) => {
                         <div
                             key={coin.id}
                             onClick={() => navigate(`/coin/${coin.id}`)}
-                            className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all duration-200 ${isDark
-                                ? 'hover:bg-[rgba(0,217,255,0.05)]'
-                                : 'hover:bg-gray-50'
-                                }`}
+                            className="flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all duration-200 hover:bg-[var(--dashboard-border-subtle)]"
                         >
                             <div className="flex items-center gap-3">
-                                <span className={`text-sm font-bold w-6 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+                                <span className="text-sm font-bold w-6 text-[var(--dashboard-text-muted)]">
                                     #{index + 1}
                                 </span>
                                 <img src={coin.image} alt={coin.name} className="w-8 h-8 rounded-full" />
                                 <div>
-                                    <p className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                                    <p className="font-semibold text-[var(--dashboard-text-primary)]">
                                         {coin.name}
                                     </p>
-                                    <p className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-600'}`}>
+                                    <p className="text-xs text-[var(--dashboard-text-muted)]">
                                         {coin.symbol.toUpperCase()}
                                     </p>
                                 </div>
                             </div>
                             <div className="text-right">
-                                <p className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                                <p className="font-semibold text-[var(--dashboard-text-primary)]">
                                     {currency.Symbol}{coin.current_price.toLocaleString()}
                                 </p>
                                 <p className={`text-sm ${coin.price_change_percentage_24h > 0 ? 'text-green-400' : 'text-red-400'}`}>
diff --git a/src/pages/Dashboard/MarketOverview.jsx b/src/pages/Dashboard/MarketOverview.jsx
index 09677ba..04f199a 100644
--- a/src/pages/Dashboard/MarketOverview.jsx
+++ b/src/pages/Dashboard/MarketOverview.jsx
@@ -69,20 +69,14 @@ const MarketOverview = () => {
             />
           </svg>
         </h1>
-        <p className={`text-lg ${isDark ? "text-gray-400" : "text-gray-600"}`}>
+        <p className="text-lg text-[var(--dashboard-text-secondary)]">
           Real-time cryptocurrency market insights
         </p>
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-6 w-full">
         {/* Top Gainers */}
-        <div
-          className={`rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full ${
-            isDark
-              ? "bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]"
-              : "bg-white border-gray-200 shadow-xl"
-          }`}
-        >
+        <div className="rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
           <div className="flex items-center gap-4 mb-6">
             <div className="w-12 h-12 rounded-xl bg-[rgba(74,222,128,0.1)] border border-[rgba(74,222,128,0.2)] flex items-center justify-center shadow-lg">
               <svg
@@ -99,9 +93,7 @@ const MarketOverview = () => {
                 />
               </svg>
             </div>
-            <h2
-              className={`text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"}`}
-            >
+            <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
               Top Gainers 24h
             </h2>
           </div>
@@ -110,28 +102,18 @@ const MarketOverview = () => {
               <div
                 key={coin.id}
                 onClick={() => navigate(`/coin/${coin.id}`)}
-                className={`flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 ${
-                  isDark
-                    ? "bg-[rgba(255,255,255,0.03)] hover:bg-[rgba(255,255,255,0.05)]"
-                    : "bg-gray-50 hover:bg-gray-100"
-                }`}
+                className="flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] hover:bg-[var(--dashboard-border-subtle)]"
               >
                 <div className="flex items-center gap-3">
-                  <span
-                    className={`font-bold ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                  >
+                  <span className="font-bold text-[var(--dashboard-text-muted)]">
                     #{index + 1}
                   </span>
                   <img src={coin.image} alt={coin.name} className="w-8 h-8" />
                   <div>
-                    <p
-                      className={`font-semibold ${isDark ? "text-white" : "text-gray-900"}`}
-                    >
+                    <p className="font-semibold text-[var(--dashboard-text-primary)]">
                       {coin.name}
                     </p>
-                    <p
-                      className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                    >
+                    <p className="text-sm text-[var(--dashboard-text-muted)]">
                       {formatPrice(coin.current_price)}
                     </p>
                   </div>
@@ -145,13 +127,7 @@ const MarketOverview = () => {
         </div>
 
         {/* Top Losers */}
-        <div
-          className={`rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full ${
-            isDark
-              ? "bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]"
-              : "bg-white border-gray-200 shadow-xl"
-          }`}
-        >
+        <div className="rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
           <div className="flex items-center gap-4 mb-6">
             <div className="w-12 h-12 rounded-xl bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.2)] flex items-center justify-center shadow-lg">
               <svg
@@ -168,9 +144,7 @@ const MarketOverview = () => {
                 />
               </svg>
             </div>
-            <h2
-              className={`text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"}`}
-            >
+            <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
               Top Losers 24h
             </h2>
           </div>
@@ -179,28 +153,18 @@ const MarketOverview = () => {
               <div
                 key={coin.id}
                 onClick={() => navigate(`/coin/${coin.id}`)}
-                className={`flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 ${
-                  isDark
-                    ? "bg-[rgba(255,255,255,0.03)] hover:bg-[rgba(255,255,255,0.05)]"
-                    : "bg-gray-50 hover:bg-gray-100"
-                }`}
+                className="flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] hover:bg-[var(--dashboard-border-subtle)]"
               >
                 <div className="flex items-center gap-3">
-                  <span
-                    className={`font-bold ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                  >
+                  <span className="font-bold text-[var(--dashboard-text-muted)]">
                     #{index + 1}
                   </span>
                   <img src={coin.image} alt={coin.name} className="w-8 h-8" />
                   <div>
-                    <p
-                      className={`font-semibold ${isDark ? "text-white" : "text-gray-900"}`}
-                    >
+                    <p className="font-semibold text-[var(--dashboard-text-primary)]">
                       {coin.name}
                     </p>
-                    <p
-                      className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                    >
+                    <p className="text-sm text-[var(--dashboard-text-muted)]">
                       {formatPrice(coin.current_price)}
                     </p>
                   </div>
@@ -215,13 +179,7 @@ const MarketOverview = () => {
       </div>
 
       {/* Trending Cryptocurrencies */}
-      <div
-        className={`rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full ${
-          isDark
-            ? "bg-[#14141f] border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]"
-            : "bg-white border-gray-200 shadow-xl"
-        }`}
-      >
+      <div className="rounded-2xl p-8 border transition-all duration-300 hover:shadow-2xl w-full bg-[var(--dashboard-bg-card)] border-[var(--dashboard-border-subtle)] shadow-[var(--dashboard-shadow-md)]">
         <div className="flex items-center gap-4 mb-6">
           <div className="w-12 h-12 rounded-xl bg-[rgba(0,217,255,0.1)] border border-[rgba(0,217,255,0.2)] flex items-center justify-center shadow-lg">
             <svg
@@ -238,9 +196,7 @@ const MarketOverview = () => {
               />
             </svg>
           </div>
-          <h2
-            className={`text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"}`}
-          >
+          <h2 className="text-2xl font-bold text-[var(--dashboard-text-primary)]">
             Top 10 by Market Cap
           </h2>
         </div>
@@ -249,23 +205,15 @@ const MarketOverview = () => {
             <div
               key={coin.id}
               onClick={() => navigate(`/coin/${coin.id}`)}
-              className={`p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 ${
-                isDark
-                  ? "bg-[rgba(255,255,255,0.02)] hover:bg-[rgba(255,255,255,0.03)]"
-                  : "bg-gray-50 hover:bg-gray-100"
-              }`}
+              className="p-4 rounded-xl cursor-pointer transition-all duration-200 hover:scale-105 bg-[var(--dashboard-bg-secondary)] hover:bg-[var(--dashboard-border-subtle)]"
             >
               <div className="flex items-center gap-3 mb-3">
                 <img src={coin.image} alt={coin.name} className="w-10 h-10" />
                 <div className="flex-1">
-                  <p
-                    className={`font-bold ${isDark ? "text-white" : "text-gray-900"}`}
-                  >
+                  <p className="font-bold text-[var(--dashboard-text-primary)]">
                     {coin.name}
                   </p>
-                  <p
-                    className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                  >
+                  <p className="text-sm text-[var(--dashboard-text-muted)]">
                     {coin.symbol.toUpperCase()}
                   </p>
                 </div>
@@ -280,14 +228,10 @@ const MarketOverview = () => {
                 </span>
               </div>
               <div className="space-y-1">
-                <p
-                  className={`text-lg font-bold ${isDark ? "text-white" : "text-gray-900"}`}
-                >
+                <p className="text-lg font-bold text-[var(--dashboard-text-primary)]">
                   {formatPrice(coin.current_price)}
                 </p>
-                <p
-                  className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}
-                >
+                <p className="text-sm text-[var(--dashboard-text-muted)]">
                   MCap: {currency.symbol}
                   {(coin.market_cap / 1e9).toFixed(2)}B
                 </p>
diff --git a/src/pages/Home/Coin/CoinWrapper.jsx b/src/pages/Home/Coin/CoinWrapper.jsx
index 10f4127..676f90a 100644
--- a/src/pages/Home/Coin/CoinWrapper.jsx
+++ b/src/pages/Home/Coin/CoinWrapper.jsx
@@ -110,10 +110,10 @@ const CoinWrapper = () => {
                                     {getFirstName().charAt(0).toUpperCase()}
                                 </div>
                                 <div className="flex-1 min-w-0">
-                                    <p className={`font-bold truncate text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                                    <p className="font-bold truncate text-base text-gray-900 dark:text-white">
                                         {getFirstName()}
                                     </p>
-                                    <p className={`text-xs truncate ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
+                                    <p className="text-xs truncate text-gray-600 dark:text-gray-400">
                                         {currentUser?.email}
                                     </p>
                                 </div>
@@ -170,7 +170,7 @@ const CoinWrapper = () => {
                             : 'bg-white hover:bg-gray-100 border border-gray-200'
                             }`}
                     >
-                        <span className={`text-2xl ${isDark ? 'text-white' : 'text-gray-900'}`}>☰</span>
+                        <span className="text-2xl text-gray-900 dark:text-white">☰</span>
                     </button>
 
                     {/* Coin component */}
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
index c9ebb0f..37432f9 100644
--- a/src/pages/Home/Home.css
+++ b/src/pages/Home/Home.css
@@ -1,9 +1,49 @@
+/* 
+  ------------------------
+  Home Variables
+  ------------------------
+*/
+:root {
+    --home-hero-title: #0f172a;
+    --home-hero-subtitle: #475569;
+    --home-orbital-bg: rgba(255, 255, 255, 0.85);
+    --home-orbital-text: #334155;
+    --home-orbital-border: rgba(0, 0, 0, 0.08);
+    --home-search-bg: #ffffff;
+    --home-search-border: rgba(0, 0, 0, 0.1);
+    --home-search-text: #0f172a;
+    --home-search-placeholder: #94a3b8;
+    --home-table-header: #64748b;
+    --home-table-border: rgba(0, 0, 0, 0.08);
+    --home-table-row-hover: rgba(0, 0, 0, 0.03);
+    --home-coin-symbol: #1e293b;
+    --home-coin-name: #64748b;
+    --home-price: #0f172a;
+}
+
+:root[class~="dark"] {
+    --home-hero-title: #ffffff;
+    --home-hero-subtitle: #a0aec0;
+    --home-orbital-bg: rgba(15, 23, 42, 0.6);
+    --home-orbital-text: #cbd5e0;
+    --home-orbital-border: rgba(255, 255, 255, 0.1);
+    --home-search-bg: rgba(15, 23, 42, 0.7);
+    --home-search-border: rgba(255, 255, 255, 0.1);
+    --home-search-text: #e2e8f0;
+    --home-search-placeholder: #64748b;
+    --home-table-header: #94a3b8;
+    --home-table-border: rgba(255, 255, 255, 0.08);
+    --home-table-row-hover: rgba(255, 255, 255, 0.02);
+    --home-coin-symbol: #ffffff;
+    --home-coin-name: #64748b;
+    --home-price: #e2e8f0;
+}
+
 .home-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  /* padding: 0 5% 100px 5%; */
-  position: relative;
-  overflow: hidden;
+    max-width: 1400px;
+    margin: 0 auto;
+    /* padding: 0 5% 100px 5%; */
+    position: relative;
 }
 
 .hero {
@@ -44,47 +84,46 @@
 }
 
 .hero-title .title-purple {
-    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 .hero-title .title-cyan {
-    background: linear-gradient(135deg, #06b6d4 0%, #00f5ff 100%);
+    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
-.hero-glow-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 800px;
-  height: 800px;
-  background: radial-gradient(
-    circle,
-    rgba(124, 58, 237, 0.2) 0%,
-    rgba(79, 70, 229, 0.1) 40%,
-    transparent 70%
-  );
-  z-index: -1;
-  filter: blur(80px);
-}
-
-.hero-planet {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 400px;
-  height: 400px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, rgba(79, 70, 229, 0.3) 0%, rgba(124, 58, 237, 0.2) 50%, transparent 70%);
-  z-index: -1;
-  opacity: 0.6;
+/* Cosmic glows - dark mode only */
+:root[class~="dark"] .hero-glow-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle,
+            rgba(124, 58, 237, 0.2) 0%,
+            rgba(79, 70, 229, 0.1) 40%,
+            transparent 70%);
+    z-index: -1;
+    filter: blur(80px);
+}
+
+:root[class~="dark"] .hero-planet {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 400px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(79, 70, 229, 0.3) 0%, rgba(124, 58, 237, 0.2) 50%, transparent 70%);
+    z-index: -1;
+    opacity: 0.6;
 }
 
 .hero-title .title-cyan {
@@ -102,12 +141,13 @@
 }
 
 .hero-subtitle {
-    font-size: 1.1rem;
-    color: #a0aec0;
+    font-size: 1.15rem;
+    color: var(--home-hero-subtitle);
     margin-bottom: 2.5rem;
     text-align: center;
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: 0.3px;
+    opacity: 1 !important;
 }
 
 .orbital-element {
@@ -115,20 +155,20 @@
     padding: 8px 16px;
     border-radius: 24px;
     backdrop-filter: blur(10px);
-    background: rgba(15, 23, 42, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--home-orbital-bg);
+    border: 1px solid var(--home-orbital-border);
     font-size: 0.85rem;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
-    color: #e2e8f0;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    color: var(--text-main);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     white-space: nowrap;
 }
 
 .orbital-element span:first-child {
-    color: #cbd5e0;
+    color: var(--home-orbital-text);
 }
 
 .orb-1 {
@@ -168,15 +208,16 @@
     gap: 12px;
     padding: 12px 20px;
     border-radius: 50px;
-    background: rgba(15, 23, 42, 0.7);
+    background: var(--home-search-bg);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--home-search-border);
     transition: all 0.3s ease;
 }
 
 .search-bar-cosmic:hover {
-    border-color: rgba(255, 255, 255, 0.2);
-    background: rgba(15, 23, 42, 0.8);
+    border-color: var(--home-search-border);
+    background: var(--home-search-bg);
+    box-shadow: var(--dashboard-shadow-sm);
 }
 
 .search-bar-cosmic .search-icon {
@@ -189,13 +230,13 @@
     background: transparent;
     border: none;
     outline: none;
-    color: #e2e8f0;
+    color: var(--home-search-text);
     font-size: 1rem;
     padding: 4px 0;
 }
 
 .search-bar-cosmic input::placeholder {
-    color: #64748b;
+    color: var(--home-search-placeholder);
 }
 
 .search-bar-cosmic .filter-trigger {
@@ -211,14 +252,14 @@
 }
 
 .search-bar-cosmic .filter-trigger:hover {
-    color: #e2e8f0;
+    color: var(--text-main);
 }
 
 .market-section {
     padding: 0;
     width: 100%;
     max-width: none;
-    
+    background: transparent;
 }
 
 .section-header {
@@ -231,10 +272,14 @@
 .section-header h2 {
     font-size: 2.5rem;
     font-weight: 700;
-    color: #ffffff;
+    color: var(--text-main);
     margin: 0;
 }
 
+[data-theme="light"] .section-header h2 {
+    color: #0f172a;
+}
+
 .live-indicator {
     display: flex;
     align-items: center;
@@ -257,9 +302,12 @@
 }
 
 @keyframes pulse {
-    0%, 100% {
+
+    0%,
+    100% {
         opacity: 1;
     }
+
     50% {
         opacity: 0.5;
     }
@@ -269,10 +317,10 @@
     display: grid;
     grid-template-columns: 0.5fr 2fr 1.5fr 1.2fr 1.8fr;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--home-table-border);
     font-weight: 600;
     font-size: 0.9rem;
-    color: #94a3b8;
+    color: var(--home-table-header);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -288,14 +336,14 @@
     padding: 20px 24px;
     align-items: center;
     gap: 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--home-table-border);
     text-decoration: none;
     color: inherit;
     transition: all 0.2s ease;
 }
 
 .table-row:hover {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--home-table-row-hover);
     border-left: 3px solid #06b6d4;
     padding-left: 21px;
 }
@@ -313,12 +361,12 @@
 }
 
 .coin-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: contain;
-  display: block;
-  margin-left: -10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: contain;
+    display: block;
+    margin-left: -10px;
 }
 
 .coin-info {
@@ -330,18 +378,18 @@
 .coin-symbol {
     font-weight: 600;
     font-size: 1rem;
-    color: #ffffff;
+    color: var(--home-coin-symbol);
 }
 
 .coin-fullname {
     font-size: 0.85rem;
-    color: #64748b;
+    color: var(--home-coin-name);
 }
 
 .col-price {
     font-weight: 600;
     font-size: 1rem;
-    color: #e2e8f0;
+    color: var(--home-price);
 }
 
 .col-change {
@@ -407,180 +455,179 @@
 }
 
 .hero-sub {
-  width: 90%;
-  color: #e0e0e0;
-  line-height: 1.5;
-  font-size: 1rem;
-  margin-bottom: 0;
+    width: 90%;
+    color: var(--home-hero-subtitle);
+    line-height: 1.5;
+    font-size: 1rem;
+    margin-bottom: 0;
 }
 
 .hero-form {
-  padding: 0;
-  width: 100%;
-  background: none;
-  border-radius: 0;
-  font-size: 18px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  box-shadow: none;
-  border: none;
+    padding: 0;
+    width: 100%;
+    background: none;
+    border-radius: 0;
+    font-size: 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    box-shadow: none;
+    border: none;
 }
 
 .hero-form input {
-  flex: 1;
-  font-size: 15px;
-  outline: none;
-  border: none;
-  padding-left: 10px;
-  background: #fff1;
-  color: #111;
-  border-radius: 6px;
-  padding: 8px 10px;
+    flex: 1;
+    font-size: 15px;
+    outline: none;
+    border: 1px solid var(--border-color);
+    padding-left: 10px;
+    background: var(--home-search-bg);
+    color: var(--text-main);
+    border-radius: 6px;
+    padding: 8px 10px;
 }
 
 .hero-form button {
-  border: none;
-  background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
-  color: #fff;
-  font-size: 15px;
-  padding: 8px 22px;
-  border-radius: 7px;
-  cursor: pointer;
-  font-weight: 600;
-  box-shadow: 0 2px 8px #7927ff22;
-  transition: background 0.2s, transform 0.2s;
+    border: none;
+    background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
+    color: #fff;
+    font-size: 15px;
+    padding: 8px 22px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-weight: 600;
+    box-shadow: 0 2px 8px #7927ff22;
+    transition: background 0.2s, transform 0.2s;
 }
 
 .hero-form button:hover {
-  background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%);
-  transform: translateY(-2px) scale(1.04);
+    background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%);
+    transform: translateY(-2px) scale(1.04);
 }
 
 .hero p {
-  width: 75%;
-  color: #e3e3e3;
-  line-height: 1.5;
+    width: 75%;
+    color: var(--home-hero-subtitle);
+    line-height: 1.5;
 }
 
 .hero form {
-  padding: 8px;
-  width: 80%;
-  background-color: white;
-  border-radius: 5px;
-  font-size: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
+    padding: 8px;
+    width: 80%;
+    background-color: white;
+    border-radius: 5px;
+    font-size: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
 }
 
 .filter-bar {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 10px;
-  margin-top: 10px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 10px;
+    margin-top: 10px;
 }
 
 /* Filter Button Icon */
 .filter-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px !important;
-  min-width: 50px;
-  background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%) !important;
-  border: none;
-  border-radius: 7px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px #7927ff22;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px !important;
+    min-width: 50px;
+    background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%) !important;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px #7927ff22;
 }
 
 .filter-btn:hover {
-  background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%) !important;
-  transform: translateY(-2px) scale(1.04);
-  box-shadow: 0 4px 12px #7927ff44;
+    background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%) !important;
+    transform: translateY(-2px) scale(1.04);
+    box-shadow: 0 4px 12px #7927ff44;
 }
 
 /* Filter Panel Container */
 .filter-panel {
-  position: absolute;
-  top: calc(100% + 12px);
-  right: 0;
-  width: 280px;
-  background: linear-gradient(
-    145deg,
-    rgba(18, 18, 35, 0.95),
-    rgba(30, 30, 50, 0.95)
-  );
-  border: 1px solid rgba(121, 39, 255, 0.3);
-  border-radius: 16px;
-  padding: 20px;
-  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(121, 39, 255, 0.2);
-  backdrop-filter: blur(10px);
-  z-index: 1000;
-  animation: slideDown 0.3s ease-out;
+    position: absolute;
+    top: calc(100% + 12px);
+    right: 0;
+    width: 280px;
+    background: linear-gradient(145deg,
+            rgba(18, 18, 35, 0.95),
+            rgba(30, 30, 50, 0.95));
+    border: 1px solid rgba(121, 39, 255, 0.3);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(121, 39, 255, 0.2);
+    backdrop-filter: blur(10px);
+    z-index: 1000;
+    animation: slideDown 0.3s ease-out;
 }
 
 @keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .filter-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 16px;
 }
 
 .filter-group label {
-  font-size: 14px;
-  color: #e0e0e0;
-  font-weight: 600;
-  letter-spacing: 0.3px;
+    font-size: 14px;
+    color: #e0e0e0;
+    font-weight: 600;
+    letter-spacing: 0.3px;
 }
 
 .filter-group input,
 .filter-group select {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
-  outline: none;
-  font-size: 14px;
-  transition: all 0.3s ease;
+    width: 100%;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--dashboard-bg-secondary);
+    color: var(--text-main);
+    outline: none;
+    font-size: 14px;
+    transition: all 0.3s ease;
 }
 
 .filter-group input:focus,
 .filter-group select:focus {
-  border-color: rgba(121, 39, 255, 0.8);
-  background: rgba(255, 255, 255, 0.12);
-  box-shadow: 0 0 0 3px rgba(121, 39, 255, 0.1);
+    border-color: rgba(121, 39, 255, 0.8);
+    background: rgba(255, 255, 255, 0.12);
+    box-shadow: 0 0 0 3px rgba(121, 39, 255, 0.1);
 }
 
 .filter-group input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.4);
 }
 
 .filter-group select {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .filter-group select:hover {
-  border-color: rgba(121, 39, 255, 0.6);
+    border-color: rgba(121, 39, 255, 0.6);
 }
 
 .hero form {
@@ -603,32 +650,32 @@
 }
 
 .filter-actions button {
-  flex: 1;
-  padding: 10px 16px;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
+    flex: 1;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 .filter-actions button:first-child {
-  background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
-  color: #fff;
-  box-shadow: 0 4px 12px rgba(121, 39, 255, 0.3);
+    background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(121, 39, 255, 0.3);
 }
 
 .filter-actions button:first-child:hover {
-  background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(121, 39, 255, 0.4);
+    background: linear-gradient(90deg, #2193b0 0%, #7927ff 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(121, 39, 255, 0.4);
 }
 
 .filter-actions button.reset {
-  background: rgba(255, 255, 255, 0.1);
-  color: #e0e0e0;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    background: var(--dashboard-bg-secondary);
+    color: var(--text-main);
+    border: 1px solid var(--border-color);
 }
 
 .cosmic-filters {
@@ -662,67 +709,75 @@
 }
 
 .hero input {
-  flex: 1;
-  font-size: 16px;
-  outline: none;
-  border: none;
-  padding-left: 10px;
+    flex: 1;
+    font-size: 16px;
+    outline: none;
+    border: none;
+    padding-left: 10px;
 }
 
 .hero button {
-  border: none;
-  background: #7927ff;
-  color: white;
-  font-size: 16px;
-  padding: 10px 30px;
-  border-radius: 5px;
-  cursor: pointer;
+    border: none;
+    background: #7927ff;
+    color: white;
+    font-size: 16px;
+    padding: 10px 30px;
+    border-radius: 5px;
+    cursor: pointer;
 }
 
 .crypto-table {
-  max-width: 100%;
-  margin: 0;
-  background: linear-gradient(rgba(84, 3, 255, 0.15), rgba(105, 2, 153, 0.15));
-  border-radius: 25px;
-  padding: 35px;
-  box-shadow: 0 25px 70px rgba(127, 92, 255, 0.4);
-  border: 1px solid rgba(127, 92, 255, 0.3);
+    max-width: 1300px;
+    margin: 20px auto 80px auto;
+    background: var(--glass-panel-bg);
+    border-radius: 25px;
+    padding: 35px;
+    box-shadow: var(--dashboard-shadow-lg);
+    border: 1px solid var(--border-color);
+    overflow-x: auto;
 }
 
 .table-layout {
-  display: grid;
-  grid-template-columns: 0.5fr 2fr 1fr 1fr 1.5fr;
-  padding: 18px 24px;
-  align-items: center;
-  border-bottom: 1px solid #3c3c3c;
-  contain: layout;
+    display: grid;
+    grid-template-columns: 0.5fr 2fr 1fr 1fr 1.5fr;
+    padding: 18px 24px;
+    align-items: center;
+    border-bottom: 1px solid var(--home-table-border);
+    contain: layout;
 }
 
 .market-cap {
-  text-align: right;
+    text-align: right;
 }
 
 .table-layout:last-child {
-  border: none;
+    border: none;
 }
 
 .table-layout div {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.crypto-table {
-    max-width: 1300px;
-    margin: 20px auto 80px auto;
-    background: linear-gradient(rgba(84, 3, 255, 0.15), rgba(105, 2, 153, 0.15));
-    border-radius: 25px;
-    padding: 35px;
-    box-shadow: 0 25px 70px rgba(127, 92, 255, 0.4);
-    border: 1px solid rgba(127, 92, 255, 0.3);
-    overflow-x: auto;
+/* Table header labels contrast */
+.table-layout div p,
+.table-layout .asset-name span:last-child {
+    color: var(--home-table-header);
+    font-weight: 500;
+}
+
+.table-layout .asset-name p {
+    color: var(--home-coin-symbol);
+    font-weight: 600;
+}
+
+.table-layout .price-cell {
+    color: var(--home-price);
+    font-weight: 600;
 }
 
+
 /* Table Enhancements */
 .table-container {
     border-radius: 24px;
@@ -731,136 +786,141 @@
 }
 
 .table-layout .green {
-  color: #00d515;
-  text-align: center;
+    color: #00d515;
+    text-align: center;
 }
 
 .table-layout .red {
-  color: #ff4646;
-  text-align: center;
+    color: #ff4646;
+    text-align: center;
 }
+
 /* ==================== Pagination ==================== */
 .table-container .pagination {
-    margin-top: 0 ;  /*overriding to fix auto margin-top:4rem; */
+    margin-top: 0;
+    /*overriding to fix auto margin-top:4rem; */
 }
+
 .pagination {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-  align-content: space-between;
-  align-items: center;
-  gap: 12px;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    display: flex;
+    justify-content: center;
+    align-content: space-between;
+    align-items: center;
+    gap: 12px;
 }
 
 .pagination button:disabled {
-  background: #1a1a1a;
-  color: #666;
-  border-color: #222;
-  cursor: default;
-  transform: none;
-  box-shadow: none;
+    background: var(--glass-panel-bg);
+    color: var(--text-muted);
+    border-color: var(--border-color);
+    cursor: default;
+    transform: none;
+    box-shadow: none;
 }
 
 /* ==================== LOADING STYLES ==================== */
 .loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-  width: 100%;
-  margin: 40px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    width: 100%;
+    margin: 40px 0;
 }
 
 .table-loading {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 40px;
-  background: linear-gradient(rgba(84, 3, 255, 0.1), rgba(105, 2, 153, 0.1));
-  border-radius: 20px;
-  margin: 40px auto;
-  max-width: 800px;
-  width: 100%;
-  border: 1px solid rgba(127, 92, 255, 0.2);
-  box-shadow: 0 15px 50px rgba(127, 92, 255, 0.2);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+    background: var(--glass-panel-bg);
+    border-radius: 20px;
+    margin: 40px auto;
+    max-width: 800px;
+    width: 100%;
+    border: 1px solid var(--border-color);
+    box-shadow: var(--dashboard-shadow-lg);
 }
 
 .table-loading p {
-  font-size: 1.2rem;
-  color: #e0e0e0;
-  margin-bottom: 20px;
-  font-weight: 500;
+    font-size: 1.2rem;
+    color: var(--text-main);
+    margin-bottom: 20px;
+    font-weight: 500;
 }
+
 @media (max-width: 500px) {
-  .table-layout div img {
-    width: 25px;
-    height: 25px;
-  }
-
-  .mini-spinner {
-    width: 45px;
-    height: 45px;
-    border: 4px solid rgba(127, 92, 255, 0.2);
-    border-top: 4px solid #7f5cff;
-    border-radius: 50%;
-    animation: spin 1.2s linear infinite;
-  }
+    .table-layout div img {
+        width: 25px;
+        height: 25px;
+    }
 
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
+    .mini-spinner {
+        width: 45px;
+        height: 45px;
+        border: 4px solid rgba(127, 92, 255, 0.2);
+        border-top: 4px solid #7f5cff;
+        border-radius: 50%;
+        animation: spin 1.2s linear infinite;
     }
-    100% {
-      transform: rotate(360deg);
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
     }
-  }
 
-  /* Disabled state for inputs */
-  .hero-form input:disabled,
-  .hero-form button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+    /* Disabled state for inputs */
+    .hero-form input:disabled,
+    .hero-form button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 
-  .hero-form button:disabled:hover {
-    background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
-    transform: none;
-    box-shadow: 0 2px 8px #7927ff22;
-  }
+    .hero-form button:disabled:hover {
+        background: linear-gradient(90deg, #7927ff 0%, #2193b0 100%);
+        transform: none;
+        box-shadow: 0 2px 8px #7927ff22;
+    }
 
-  .load-more {
-    display: flex;
-    justify-content: center;
-    margin-top: 30px;
-  }
+    .load-more {
+        display: flex;
+        justify-content: center;
+        margin-top: 30px;
+    }
 
-  .load-more button {
-    padding: 14px 46px;
-    font-size: 20px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    color: #ffffff;
-    background: linear-gradient(135deg, #7f5cff, #00d4ff);
-    border: none;
-    border-radius: 50px;
-    cursor: pointer;
-    box-shadow: 0 10px 30px rgba(127, 92, 255, 0.35);
-    transition: all 0.3s ease;
-  }
+    .load-more button {
+        padding: 14px 46px;
+        font-size: 20px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        color: #ffffff;
+        background: linear-gradient(135deg, #7f5cff, #00d4ff);
+        border: none;
+        border-radius: 50px;
+        cursor: pointer;
+        box-shadow: 0 10px 30px rgba(127, 92, 255, 0.35);
+        transition: all 0.3s ease;
+    }
 
-  /* Hover Effect */
-  .load-more button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 16px 40px rgba(0, 212, 255, 0.45);
-    background: linear-gradient(135deg, #00d4ff, #7f5cff);
-  }
+    /* Hover Effect */
+    .load-more button:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 16px 40px rgba(0, 212, 255, 0.45);
+        background: linear-gradient(135deg, #00d4ff, #7f5cff);
+    }
 
-  .load-more button:active {
-    transform: scale(0.96);
-    box-shadow: 0 6px 18px rgba(127, 92, 255, 0.3);
-  }
+    .load-more button:active {
+        transform: scale(0.96);
+        box-shadow: 0 6px 18px rgba(127, 92, 255, 0.3);
+    }
 }
 
 @media (max-width: 500px) {
@@ -893,44 +953,44 @@
 }
 
 @media (max-width: 500px) {
-  .table-layout div img {
-    width: 25px;
-  }
+    .table-layout div img {
+        width: 25px;
+    }
 
-  .table-layout {
-    font-size: 13px;
-  }
+    .table-layout {
+        font-size: 13px;
+    }
 
-.load-more-wrapper {
-    margin-top: 40px;
-    display: flex;
-    justify-content: center;
-    margin-top: 30px;
+    .load-more-wrapper {
+        margin-top: 40px;
+        display: flex;
+        justify-content: center;
+        margin-top: 30px;
 
-}
+    }
 
-  .loading-container {
-    min-height: 250px;
-  }
+    .loading-container {
+        min-height: 250px;
+    }
 
-  .table-loading {
-    padding: 20px 15px;
-    border-radius: 12px;
-  }
+    .table-loading {
+        padding: 20px 15px;
+        border-radius: 12px;
+    }
 
-  .mini-spinner {
-    width: 30px;
-    height: 30px;
-  }
+    .mini-spinner {
+        width: 30px;
+        height: 30px;
+    }
 }
 
 .search-wrapper {
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 }
 
 /* Responsive adjustments */
@@ -1091,6 +1151,7 @@
         border-left: none;
         border-right: none;
     }
+
     .hero-title {
         font-size: 2.5rem;
         margin-bottom: 15px;
@@ -1369,27 +1430,27 @@
 }
 
 .load-more-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
 }
 
 .btn-neon {
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(90deg, #06b6d4, #b026ff);
-  border: none;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    background: linear-gradient(90deg, #06b6d4, #b026ff);
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
 }
 
 .btn-neon:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 }
 
 .market-actions {
@@ -1399,21 +1460,20 @@
 }
 
 @media (max-width: 768px) {
-.market-actions {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: 12px;
-    justify-content: space-between;
-}
-}
-
-.glass-panel-home{
-        background: rgba(255, 255, 255, 0.12);
-        backdrop-filter: blur(24px);
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        border-radius: 1.5rem;
-        position: relative;
-        transition: all 0.3s ease;
+    .market-actions {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: 12px;
+        justify-content: space-between;
+    }
 }
 
+.glass-panel-home {
+    background: var(--glass-panel-bg);
+    backdrop-filter: blur(24px);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    position: relative;
+    transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 588d8e1..1cdb366 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -16,9 +16,9 @@ const Home = () => {
   const [minPrice, setMinPrice] = useState("");
   const [maxPrice, setMaxPrice] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
-  const coinPerPage =5;
+  const coinPerPage = 5;
   const totalPages = Math.ceil(displayCoin.length / coinPerPage);
-  const paginatedCoins = displayCoin.slice((currentPage - 1 ) *coinPerPage, currentPage* coinPerPage);
+  const paginatedCoins = displayCoin.slice((currentPage - 1) * coinPerPage, currentPage * coinPerPage);
 
   const inputHandler = (e) => {
     setInput(e.target.value);
@@ -68,7 +68,7 @@ const Home = () => {
           transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
         >
           <span>Bitcoin</span>
-          <span className="text-gradient-cyan" style={{ color: '#00f5ff' }}>+5.2%</span>
+          <span className="text-gradient-cyan">+5.2%</span>
         </motion.div>
 
         <motion.div
@@ -77,7 +77,7 @@ const Home = () => {
           transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
         >
           <span>Ethereum</span>
-          <span className="text-gradient-cyan" style={{ color: '#00f5ff' }}>+1.5%</span>
+          <span className="text-gradient-cyan">+1.5%</span>
         </motion.div>
 
         <motion.div
@@ -86,7 +86,7 @@ const Home = () => {
           transition={{ duration: 6, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
         >
           <span>Solana</span>
-          <span className="text-gradient-cyan" style={{ color: '#00f5ff' }}>+8.5%</span>
+          <span className="text-gradient-cyan">+8.5%</span>
         </motion.div>
 
         <motion.div
@@ -95,7 +95,7 @@ const Home = () => {
           transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
         >
           <span>Cardano</span>
-          <span style={{ color: '#ff4d6d' }}>-2.1%</span>
+          <span className="text-red-500 dark:text-[#ff4d6d]">-2.1%</span>
         </motion.div>
 
         <motion.div
@@ -104,7 +104,7 @@ const Home = () => {
           transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 2 }}
         >
           <span>BNB</span>
-          <span className="text-gradient-cyan" style={{ color: '#00f5ff' }}>+1.2%</span>
+          <span className="text-gradient-cyan">+1.2%</span>
         </motion.div>
 
         <div className="hero-content">
@@ -191,7 +191,7 @@ const Home = () => {
               /* VIRTUAL SCROLLER IMPLEMENTATION */
               <Virtuoso
                 useWindowScroll
-                data={paginatedCoins}  
+                data={paginatedCoins}
                 itemContent={(index, item) => (
                   <Link to={`/coin/${item.id}`} className="table-row" key={index}>
                     <div className="col-rank">{item.market_cap_rank}</div>
@@ -242,7 +242,7 @@ const Home = () => {
             </button>
           </div>
         </div>
-        
+
         {/* Load More Button removed because Virtual Scrolling handles infinite lists automatically */}
       </section>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 498a3eb..977a922 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: 'class',
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",

From cbad0039d440d40070b9e870f3fe68e956d8f120 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Wed, 11 Feb 2026 21:05:23 +0530
Subject: [PATCH 2/2] Fix App.jsx structure and theme integration

---
 src/App.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.jsx b/src/App.jsx
index f1fb40f..74f5fed 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -165,6 +165,7 @@ const App = () => {
       </AuthProvider>
     </ThemeProvider>
   );
+
 };
 
 export default App;