From de6b315c42d9a137a7d57783195cd921a5ec1d54 Mon Sep 17 00:00:00 2001
From: yashyrs027 <yashyrsgupta@gmail.com>
Date: Wed, 6 May 2026 22:08:52 +0530
Subject: [PATCH 1/2] feat: implement centralized dual-theme system
 (light/dark)

---
 index.html                                    |  14 +
 src/App.css                                   | 488 +++++++++++++++---
 src/Component/ui/Button.tsx                   |  50 +-
 src/Component/ui/DropDown.tsx                 |  99 ++--
 src/Component/ui/Input.tsx                    |  49 +-
 src/Component/ui/TextArea.tsx                 |  29 +-
 src/Component/ui/ThemeToggle.tsx              |  27 +
 src/config/them.config.ts                     | 163 +-----
 .../v1/Component/AddMemberHeader.tsx          |  22 +-
 .../v1/Component/Administrative_MetaData.tsx  |  16 +-
 .../v1/Component/Community_Involment.tsx      |  19 +-
 .../AddMember/v1/Page/AddMemberPage.tsx       |  11 +-
 .../v1/Sections/PersonalInfoCard.tsx          |  62 ++-
 .../v1/Sections/ProfessionalDetails.tsx       |  53 +-
 .../v1/Components/InternalDashboardSearch.tsx |  21 +-
 .../v1/Components/InternalSupport_Table.tsx   | 218 ++++----
 .../v1/Components/Support.tsx                 | 141 +++--
 .../Contact_And_Support/v1/Pages/Contact.tsx  |   9 +-
 .../v1/Section/ContactHeader.tsx              |  15 +-
 .../v1/Section/InternalDirectoryTable.tsx     |  11 +-
 .../Dashboard/components/AISuggestions.tsx    |  38 +-
 .../Dashboard/components/Achievements.tsx     |  71 +--
 .../Dashboard/components/ActivityFeed.tsx     |  71 ++-
 .../Dashboard/components/BudgetCard.tsx       | 103 ++--
 .../Dashboard/components/CalendarWidget.tsx   | 154 +++---
 .../Dashboard/components/CommunityStats.tsx   |  67 ++-
 .../Dashboard/components/IssuesPanel.tsx      |  90 ++--
 .../Dashboard/components/PerformanceStats.tsx |  62 ++-
 .../components/ProductivityScore.tsx          |  68 +--
 .../Dashboard/components/RecentTasks.tsx      | 132 +++--
 .../Dashboard/components/SmartReminders.tsx   |  75 +--
 .../Dashboard/components/SummaryCard.tsx      |  62 +--
 .../Dashboard/components/TaskOverview.tsx     |  33 +-
 src/features/Dashboard/components/TaskRow.tsx |  45 +-
 .../components/UpcomingUrgentTasks.tsx        |  42 +-
 .../Dashboard/layouts/DashboardLayout.tsx     |  12 +-
 .../Dashboard/v1/Pages/DashboardPage.tsx      |  24 +-
 .../Events/v1/Components/EventTable.tsx       | 169 +++---
 src/features/Events/v1/Components/Judge.tsx   | 105 ++--
 src/features/Events/v1/Components/Mentors.tsx | 105 ++--
 .../v1/Components/Partners_And_Sponsors.tsx   |  74 +--
 .../Events/v1/Components/Speakers.tsx         | 109 ++--
 .../Events/v1/Pages/CreateNewEvent.tsx        |  23 +-
 src/features/Events/v1/Pages/ViewEvent.tsx    |  83 +--
 .../Events/v1/Sections/Event_Basic_Info.tsx   |  98 ++--
 .../Events/v1/Sections/Event_Header.tsx       |  26 +-
 .../Events/v1/Sections/Event_View_Header.tsx  |  35 +-
 .../Member/v1/Components/MemberHeader.tsx     |  36 +-
 .../Member/v1/Components/MemberTable.tsx      |  67 ++-
 .../Member/v1/Components/RoleChip.tsx         |  23 +-
 .../Member/v1/Components/SearchMember.tsx     |  30 +-
 .../Member/v1/Components/StatusChip.tsx       |  40 +-
 src/features/Member/v1/Pages/MemberPage.tsx   |  10 +-
 .../SideBar/v1/Components/SideBarLink.tsx     |  54 +-
 .../SideBar/v1/Section/BotamNavBar.tsx        |  51 +-
 src/features/SideBar/v1/Section/SideBar.tsx   |  69 +--
 src/features/template/LoginUserTemplate.tsx   |  15 +-
 src/main.tsx                                  |   9 +-
 src/theme/colors.ts                           | 182 +++++++
 src/theme/hooks/useTheme.ts                   |   8 +
 src/theme/index.ts                            |   7 +
 src/theme/provider.tsx                        |  56 ++
 src/theme/shadows.ts                          |  24 +
 src/theme/spacing.ts                          |  26 +
 src/theme/theme.config.ts                     |  46 ++
 src/theme/typography.ts                       |  36 ++
 66 files changed, 2384 insertions(+), 1898 deletions(-)
 create mode 100644 src/Component/ui/ThemeToggle.tsx
 create mode 100644 src/theme/colors.ts
 create mode 100644 src/theme/hooks/useTheme.ts
 create mode 100644 src/theme/index.ts
 create mode 100644 src/theme/provider.tsx
 create mode 100644 src/theme/shadows.ts
 create mode 100644 src/theme/spacing.ts
 create mode 100644 src/theme/theme.config.ts
 create mode 100644 src/theme/typography.ts

diff --git a/index.html b/index.html
index e6fe822..689270a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,20 @@
     <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CommDesk</title>
+    <!-- Prevent flash of wrong theme on load -->
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem('commdesk-theme');
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          var isDark = stored === 'dark' || (!stored && prefersDark);
+          if (isDark) {
+            document.documentElement.classList.add('dark');
+            document.documentElement.setAttribute('data-theme', 'dark');
+          }
+        } catch (e) {}
+      })();
+    </script>
   </head>
 
   <body>
diff --git a/src/App.css b/src/App.css
index b8822c2..44fe5c5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,14 @@
 @custom-variant dark (&:is(.dark *));
 @plugin "@tailwindcss/typography";
 
+/* ─── Prevent flash on load ─────────────────────────────────────────────── */
+html {
+  color-scheme: light;
+}
+html.dark {
+  color-scheme: dark;
+}
+
 html,
 body {
   margin: 0;
@@ -14,6 +22,7 @@ body {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 #root {
@@ -21,6 +30,7 @@ body {
   height: 100%;
 }
 
+/* ─── Tailwind radius tokens ─────────────────────────────────────────────── */
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -60,119 +70,435 @@ body {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* CommDesk design tokens */
+  --color-cd-bg: var(--cd-bg);
+  --color-cd-surface: var(--cd-surface);
+  --color-cd-surface-2: var(--cd-surface-2);
+  --color-cd-surface-3: var(--cd-surface-3);
+  --color-cd-border: var(--cd-border);
+  --color-cd-border-subtle: var(--cd-border-subtle);
+  --color-cd-text: var(--cd-text);
+  --color-cd-text-2: var(--cd-text-2);
+  --color-cd-text-muted: var(--cd-text-muted);
+  --color-cd-primary: var(--cd-primary);
+  --color-cd-primary-hover: var(--cd-primary-hover);
+  --color-cd-primary-subtle: var(--cd-primary-subtle);
+  --color-cd-primary-text: var(--cd-primary-text);
+  --color-cd-secondary: var(--cd-secondary);
+  --color-cd-accent: var(--cd-accent);
+  --color-cd-success: var(--cd-success);
+  --color-cd-success-subtle: var(--cd-success-subtle);
+  --color-cd-warning: var(--cd-warning);
+  --color-cd-warning-subtle: var(--cd-warning-subtle);
+  --color-cd-danger: var(--cd-danger);
+  --color-cd-danger-subtle: var(--cd-danger-subtle);
+  --color-cd-hover: var(--cd-hover);
 }
 
+/* ─── Light theme (default) ──────────────────────────────────────────────── */
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+
+  /* Shadcn tokens */
+  --background: #f8fafc;
+  --foreground: #1e293b;
+  --card: #ffffff;
+  --card-foreground: #1e293b;
+  --popover: #ffffff;
+  --popover-foreground: #1e293b;
+  --primary: #2563eb;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #1e293b;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #1e293b;
+  --destructive: #dc2626;
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #3b82f6;
+  --chart-1: #3b82f6;
+  --chart-2: #22c55e;
+  --chart-3: #a855f7;
+  --chart-4: #f59e0b;
+  --chart-5: #ef4444;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #1e293b;
+  --sidebar-primary: #2563eb;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #1e293b;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #3b82f6;
+
+  /* CommDesk design tokens – light */
+  --cd-bg: #f8fafc;
+  --cd-surface: #ffffff;
+  --cd-surface-2: #f1f5f9;
+  --cd-surface-3: #eef2f7;
+  --cd-border: #e2e8f0;
+  --cd-border-subtle: #f1f5f9;
+  --cd-text: #1e293b;
+  --cd-text-2: #64748b;
+  --cd-text-muted: #94a3b8;
+  --cd-primary: #2563eb;
+  --cd-primary-hover: #1d4ed8;
+  --cd-primary-subtle: #eff6ff;
+  --cd-primary-text: #1d4ed8;
+  --cd-secondary: #9333ea;
+  --cd-accent: #06b6d4;
+  --cd-success: #16a34a;
+  --cd-success-subtle: #f0fdf4;
+  --cd-warning: #ca8a04;
+  --cd-warning-subtle: #fefce8;
+  --cd-danger: #dc2626;
+  --cd-danger-subtle: #fef2f2;
+  --cd-hover: #f1f5f9;
+  --cd-shadow: rgba(15, 23, 42, 0.08);
+  --cd-shadow-md: rgba(15, 23, 42, 0.12);
 }
 
+/* ─── Dark theme ─────────────────────────────────────────────────────────── */
 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  /* Shadcn tokens */
+  --background: #0f1320;
+  --foreground: #f8fafc;
+  --card: #1a1f2e;
+  --card-foreground: #f8fafc;
+  --popover: #1a1f2e;
+  --popover-foreground: #f8fafc;
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
+  --destructive: #f87171;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #3b82f6;
+  --chart-1: #60a5fa;
+  --chart-2: #4ade80;
+  --chart-3: #c084fc;
+  --chart-4: #facc15;
+  --chart-5: #f87171;
+  --sidebar: #1a1f2e;
+  --sidebar-foreground: #f8fafc;
+  --sidebar-primary: #3b82f6;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #1e293b;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #3b82f6;
+
+  /* CommDesk design tokens – dark */
+  --cd-bg: #0f1320;
+  --cd-surface: #1a1f2e;
+  --cd-surface-2: #151929;
+  --cd-surface-3: #1e293b;
+  --cd-border: rgba(255, 255, 255, 0.08);
+  --cd-border-subtle: rgba(255, 255, 255, 0.04);
+  --cd-text: #f8fafc;
+  --cd-text-2: #94a3b8;
+  --cd-text-muted: #64748b;
+  --cd-primary: #3b82f6;
+  --cd-primary-hover: #60a5fa;
+  --cd-primary-subtle: rgba(59, 130, 246, 0.12);
+  --cd-primary-text: #93c5fd;
+  --cd-secondary: #a855f7;
+  --cd-accent: #22d3ee;
+  --cd-success: #4ade80;
+  --cd-success-subtle: rgba(74, 222, 128, 0.10);
+  --cd-warning: #facc15;
+  --cd-warning-subtle: rgba(250, 204, 21, 0.10);
+  --cd-danger: #f87171;
+  --cd-danger-subtle: rgba(248, 113, 113, 0.10);
+  --cd-hover: rgba(255, 255, 255, 0.05);
+  --cd-shadow: rgba(0, 0, 0, 0.3);
+  --cd-shadow-md: rgba(0, 0, 0, 0.4);
 }
 
+/* ─── Base layer ─────────────────────────────────────────────────────────── */
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
   }
   body {
     @apply bg-background text-foreground;
   }
 }
 
-.inter {
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
+/* ─── CommDesk utility classes ───────────────────────────────────────────── */
+@layer components {
+  /* Cards */
+  .cd-card {
+    background-color: var(--cd-surface);
+    border: 1px solid var(--cd-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    box-shadow: 0 1px 3px var(--cd-shadow);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+  }
+  .cd-card:hover {
+    box-shadow: 0 4px 12px var(--cd-shadow-md);
+  }
+  .cd-card-hover {
+    @apply hover:-translate-y-[2px];
+  }
 
-  font-style: normal;
-}
+  /* Section title */
+  .cd-section-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--cd-text);
+    margin-bottom: 1rem;
+  }
 
-@layer components {
-  .card {
-    @apply bg-white/80 backdrop-blur-xl p-4 sm:p-5 rounded-2xl border border-gray-100 shadow-sm;
+  /* Muted text */
+  .cd-text-muted {
+    font-size: 0.875rem;
+    color: var(--cd-text-2);
   }
 
-  .card-hover {
-    @apply hover:shadow-md hover:-translate-y-[2px] transition-all duration-200;
+  /* Badges */
+  .cd-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.65rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+  .cd-badge-success {
+    background-color: var(--cd-success-subtle);
+    color: var(--cd-success);
+  }
+  .cd-badge-warning {
+    background-color: var(--cd-warning-subtle);
+    color: var(--cd-warning);
+  }
+  .cd-badge-danger {
+    background-color: var(--cd-danger-subtle);
+    color: var(--cd-danger);
+  }
+  .cd-badge-primary {
+    background-color: var(--cd-primary-subtle);
+    color: var(--cd-primary-text);
+  }
+  .cd-badge-neutral {
+    background-color: var(--cd-surface-2);
+    color: var(--cd-text-2);
   }
 
-  .section-title {
-    @apply text-base sm:text-lg font-semibold text-gray-800;
+  /* Buttons */
+  .cd-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 1px solid transparent;
+  }
+  .cd-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .cd-btn-primary {
+    background-color: var(--cd-primary);
+    color: #ffffff;
+    border-color: var(--cd-primary);
+  }
+  .cd-btn-primary:hover:not(:disabled) {
+    background-color: var(--cd-primary-hover);
+    border-color: var(--cd-primary-hover);
+  }
+  .cd-btn-secondary {
+    background-color: var(--cd-surface-2);
+    color: var(--cd-text);
+    border-color: var(--cd-border);
+  }
+  .cd-btn-secondary:hover:not(:disabled) {
+    background-color: var(--cd-hover);
+  }
+  .cd-btn-ghost {
+    background-color: transparent;
+    color: var(--cd-text-2);
+    border-color: transparent;
+  }
+  .cd-btn-ghost:hover:not(:disabled) {
+    background-color: var(--cd-hover);
+    color: var(--cd-text);
+  }
+  .cd-btn-danger {
+    background-color: var(--cd-danger-subtle);
+    color: var(--cd-danger);
+    border-color: var(--cd-danger-subtle);
+  }
+  .cd-btn-danger:hover:not(:disabled) {
+    background-color: var(--cd-danger);
+    color: #ffffff;
   }
 
-  .text-muted {
-    @apply text-xs sm:text-sm text-gray-500;
+  /* Inputs */
+  .cd-input {
+    width: 100%;
+    background-color: var(--cd-surface);
+    border: 1px solid var(--cd-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--cd-text);
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .cd-input::placeholder {
+    color: var(--cd-text-muted);
+  }
+  .cd-input:focus {
+    border-color: var(--cd-primary);
+    box-shadow: 0 0 0 3px var(--cd-primary-subtle);
+  }
+  .cd-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 
-  .badge-success {
-    @apply bg-green-100 text-green-600 px-2 py-1 rounded-full text-xs;
+  /* Table */
+  .cd-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  .cd-table thead {
+    background-color: var(--cd-surface-2);
+  }
+  .cd-table th {
+    padding: 0.75rem 1.25rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--cd-text-2);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--cd-border);
+  }
+  .cd-table td {
+    padding: 0.875rem 1.25rem;
+    font-size: 0.875rem;
+    color: var(--cd-text);
+    border-bottom: 1px solid var(--cd-border-subtle);
+  }
+  .cd-table tbody tr:hover {
+    background-color: var(--cd-hover);
+  }
+  .cd-table tbody tr:last-child td {
+    border-bottom: none;
   }
 
-  .badge-warning {
-    @apply bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full text-xs;
+  /* Sidebar */
+  .cd-sidebar {
+    background-color: var(--cd-surface);
+    border-right: 1px solid var(--cd-border);
+  }
+
+  /* Nav link */
+  .cd-nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    color: var(--cd-text-2);
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    text-decoration: none;
+  }
+  .cd-nav-link:hover {
+    background-color: var(--cd-hover);
+    color: var(--cd-text);
+  }
+  .cd-nav-link.active {
+    background-color: var(--cd-primary-subtle);
+    color: var(--cd-primary-text);
   }
 
+  /* Page background */
+  .cd-page {
+    background-color: var(--cd-bg);
+    min-height: 100vh;
+  }
+
+  /* Stat metric box */
+  .cd-metric {
+    background-color: var(--cd-surface-2);
+    border-radius: 0.75rem;
+    padding: 0.75rem;
+  }
+
+  /* Glassmorphism surface */
+  .cd-glass {
+    background-color: color-mix(in srgb, var(--cd-surface) 80%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--cd-border);
+  }
+
+  /* Legacy aliases (keep old .card / .section-title working) */
+  .card {
+    @apply cd-card;
+  }
+  .section-title {
+    @apply cd-section-title;
+  }
+  .text-muted {
+    @apply cd-text-muted;
+  }
+  .badge-success {
+    @apply cd-badge cd-badge-success;
+  }
+  .badge-warning {
+    @apply cd-badge cd-badge-warning;
+  }
   .badge-default {
-    @apply bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs;
+    @apply cd-badge cd-badge-neutral;
   }
 }
+
+/* ─── Smooth theme transition ────────────────────────────────────────────── */
+html {
+  transition: background-color 0.25s ease;
+}
+
+/* ─── Inter font helper ──────────────────────────────────────────────────── */
+.inter {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+/* ─── Scrollbar styling ──────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--cd-border);
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--cd-text-muted);
+}
diff --git a/src/Component/ui/Button.tsx b/src/Component/ui/Button.tsx
index 25fbd84..96d83f9 100644
--- a/src/Component/ui/Button.tsx
+++ b/src/Component/ui/Button.tsx
@@ -6,38 +6,32 @@ type ButtonProps = {
   width?: string;
   height?: string;
   onClick: () => void;
-  textColor?: string;
+  variant?: "primary" | "secondary" | "ghost" | "danger";
   disabled?: boolean;
-  backgroundColor?: string;
+  className?: string;
 };
 
-const Button = ({
-  text,
-  textColor,
-  icon,
-  onClick,
-  disabled,
-  width,
-  backgroundColor,
-  height,
-}: ButtonProps) => {
+const Button = ({ text, icon, onClick, disabled, width, height, variant = "primary", className = "" }: ButtonProps) => {
+  const variantClass = disabled
+    ? "bg-[var(--cd-surface-2)] text-[var(--cd-text-muted)] cursor-not-allowed"
+    : variant === "secondary"
+      ? "cd-btn-secondary"
+      : variant === "ghost"
+        ? "cd-btn-ghost"
+        : variant === "danger"
+          ? "cd-btn-danger"
+          : "cd-btn-primary";
+
   return (
-    <div className="text-sm lg:text-[1vw]">
-      <button
-        onClick={onClick}
-        disabled={disabled}
-        className={`px-5 py-3 rounded-lg flex items-center ${disabled ? "bg-gray-300 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white"}`}
-        style={{
-          width: width || "auto",
-          height: height || "auto",
-          backgroundColor: backgroundColor || undefined,
-          color: textColor || undefined,
-        }}
-      >
-        {icon && <span className="Icon mr-2 inline h-fit w-fit">{icon}</span>}
-        {text}
-      </button>
-    </div>
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`cd-btn ${variantClass} ${className}`}
+      style={{ width: width || "auto", height: height || "auto" }}
+    >
+      {icon && <span className="flex items-center">{icon}</span>}
+      {text}
+    </button>
   );
 };
 
diff --git a/src/Component/ui/DropDown.tsx b/src/Component/ui/DropDown.tsx
index a1578a2..3f6efb0 100644
--- a/src/Component/ui/DropDown.tsx
+++ b/src/Component/ui/DropDown.tsx
@@ -1,14 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
-import { getTheme, ThemeMode } from "../../config/them.config";
 import { FaChevronDown } from "react-icons/fa";
 
 type DropDownProps = {
   options: string[];
-
   label?: string;
   onSelect: (option: string) => void;
   className?: string;
-  themeMode?: ThemeMode;
   value?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -19,40 +16,26 @@ const DropDown: React.FC<DropDownProps> = ({
   onSelect,
   className,
   label,
-  themeMode = "light",
   value,
   placeholder = "Select an option",
   disabled = false,
 }) => {
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState(value ?? options[0] ?? "");
-  const [hoveredOption, setHoveredOption] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const theme = getTheme(themeMode);
-
   useEffect(() => {
     if (value !== undefined) {
       setSelected(value);
       return;
     }
-
-    setSelected((previous) => {
-      if (previous && options.includes(previous)) {
-        return previous;
-      }
-      return options[0] ?? "";
-    });
+    setSelected((prev) => (prev && options.includes(prev) ? prev : (options[0] ?? "")));
   }, [options, value]);
 
   useEffect(() => {
-    const onClickOutside = (event: MouseEvent) => {
-      if (!containerRef.current) return;
-      if (!containerRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
+    const onClickOutside = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
     };
-
     document.addEventListener("mousedown", onClickOutside);
     return () => document.removeEventListener("mousedown", onClickOutside);
   }, []);
@@ -65,17 +48,13 @@ const DropDown: React.FC<DropDownProps> = ({
   };
 
   const isDisabled = disabled || options.length === 0;
-  const displayValue = selected || placeholder;
 
   return (
-    <div ref={containerRef} className={`relative w-full  ${className || ""}`}>
+    <div ref={containerRef} className={`relative w-full ${className || ""}`}>
       {label && (
         <p
-          className="text-sm my-2 uppercase font-semibold tracking-wide"
-          style={{
-            color: theme.textColor.secondary,
-            fontFamily: theme.fontFamily.primary,
-          }}
+          className="text-xs font-semibold uppercase tracking-wider mb-1.5"
+          style={{ color: "var(--cd-text-2)" }}
         >
           {label}
         </p>
@@ -87,52 +66,54 @@ const DropDown: React.FC<DropDownProps> = ({
         disabled={isDisabled}
         aria-haspopup="listbox"
         aria-expanded={open}
-        className="w-full border rounded-lg px-3 py-2 text-left flex justify-between items-center text-sm md:text-base transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-70"
+        className="w-full rounded-lg px-3 py-2 text-left flex justify-between items-center text-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-60"
         style={{
-          borderColor: theme.borderColor.primary,
-          backgroundColor: theme.background.secondary,
-          color: selected ? theme.textColor.primary : theme.textColor.muted,
-          fontFamily: theme.fontFamily.primary,
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+          color: selected ? "var(--cd-text)" : "var(--cd-text-muted)",
+          border: "1px solid var(--cd-border)",
         }}
       >
-        <span className="truncate">{displayValue}</span>
+        <span className="truncate">{selected || placeholder}</span>
         <FaChevronDown
           className={`ml-2 shrink-0 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
+          style={{ color: "var(--cd-text-muted)" }}
         />
       </button>
 
       {open && options.length > 0 && (
         <div
-          className="absolute mt-2 w-full border rounded-lg shadow-md z-20 overflow-hidden max-h-60 overflow-y-auto"
+          className="absolute mt-1 w-full rounded-lg z-20 overflow-hidden max-h-60 overflow-y-auto"
           style={{
-            borderColor: theme.borderColor.primary,
-            backgroundColor: theme.background.primary,
+            backgroundColor: "var(--cd-surface)",
+            border: "1px solid var(--cd-border)",
+            boxShadow: "0 8px 24px var(--cd-shadow-md)",
           }}
           role="listbox"
         >
-          {options.map((opt) => {
-            const isHighlighted = hoveredOption === opt || selected === opt;
-
-            return (
-              <button
-                type="button"
-                key={opt}
-                onClick={() => handleSelect(opt)}
-                onMouseEnter={() => setHoveredOption(opt)}
-                onMouseLeave={() => setHoveredOption(null)}
-                className="w-full px-3 py-2 text-left text-sm md:text-base transition-colors duration-150"
-                style={{
-                  backgroundColor: isHighlighted
-                    ? theme.background.tertiary
-                    : theme.background.primary,
-                  color: isHighlighted ? theme.textColor.primary : theme.textColor.secondary,
-                  fontFamily: theme.fontFamily.primary,
-                }}
-              >
-                <span className="block truncate">{opt}</span>
-              </button>
-            );
-          })}
+          {options.map((opt) => (
+            <button
+              type="button"
+              key={opt}
+              onClick={() => handleSelect(opt)}
+              className="w-full px-3 py-2 text-left text-sm transition-colors duration-100"
+              style={{
+                backgroundColor: selected === opt ? "var(--cd-primary-subtle)" : "transparent",
+                color: selected === opt ? "var(--cd-primary-text)" : "var(--cd-text)",
+              }}
+              onMouseEnter={(e) => {
+                if (selected !== opt)
+                  (e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                    "var(--cd-hover)";
+              }}
+              onMouseLeave={(e) => {
+                if (selected !== opt)
+                  (e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent";
+              }}
+            >
+              {opt}
+            </button>
+          ))}
         </div>
       )}
     </div>
diff --git a/src/Component/ui/Input.tsx b/src/Component/ui/Input.tsx
index 3243c28..b0a3798 100644
--- a/src/Component/ui/Input.tsx
+++ b/src/Component/ui/Input.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { getTheme } from "../../config/them.config";
 
 type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "time";
 
@@ -9,18 +8,13 @@ type InputProps = {
   placeholder?: string;
   value?: string | number;
   type?: InputType;
-
   onChange?: (name: string, value: string) => void;
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-
   error?: string;
-
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
-
   className?: string;
   inputClassName?: string;
-
   disabled?: boolean;
   required?: boolean;
 };
@@ -45,28 +39,32 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
-    const theme = getTheme("light");
-
     return (
-      <div className={`flex flex-col gap-2 mb-4 ${className}`}>
+      <div className={`flex flex-col gap-1.5 mb-4 ${className}`}>
         {label && (
-          <label htmlFor={name} className="text-sm text-gray-400 uppercase font-semibold inter">
+          <label
+            htmlFor={name}
+            className="text-xs font-semibold uppercase tracking-wider"
+            style={{ color: "var(--cd-text-2)" }}
+          >
             {label}
           </label>
         )}
 
         <div
-          className={`flex items-center gap-2 border-2 rounded-lg px-3 py-2 ${
-            error ? "border-red-500" : ""
-          }`}
+          className="flex items-center gap-2 rounded-lg px-3 py-2 border transition-all duration-150"
           style={{
-            borderColor: error ? "red" : theme.borderColor.primary,
+            backgroundColor: "var(--cd-surface)",
+            borderColor: error ? "var(--cd-danger)" : "var(--cd-border)",
+            boxShadow: error ? "0 0 0 3px var(--cd-danger-subtle)" : undefined,
           }}
         >
-          {/* Left Icon */}
-          {leftIcon && <div className="flex items-center text-gray-400">{leftIcon}</div>}
+          {leftIcon && (
+            <div className="flex items-center" style={{ color: "var(--cd-text-muted)" }}>
+              {leftIcon}
+            </div>
+          )}
 
-          {/* Input Field */}
           <input
             ref={ref}
             id={name}
@@ -78,15 +76,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             required={required}
             onKeyDown={onKeyDown}
             onChange={(e) => onChange?.(name, e.target.value)}
-            className={`flex-1 bg-transparent outline-none  text-[1.8vw] lg:text-lg ${inputClassName}`}
+            className={`flex-1 bg-transparent outline-none text-sm ${inputClassName}`}
+            style={{ color: "var(--cd-text)" }}
           />
 
-          {/* Right Icon */}
-          {rightIcon && <div className="flex items-center text-gray-400">{rightIcon}</div>}
+          {rightIcon && (
+            <div className="flex items-center" style={{ color: "var(--cd-text-muted)" }}>
+              {rightIcon}
+            </div>
+          )}
         </div>
 
-        {/* Error Message */}
-        {error && <span className="text-red-500 text-sm">{error}</span>}
+        {error && (
+          <span className="text-xs" style={{ color: "var(--cd-danger)" }}>
+            {error}
+          </span>
+        )}
       </div>
     );
   },
diff --git a/src/Component/ui/TextArea.tsx b/src/Component/ui/TextArea.tsx
index 0f8eab8..4df50d1 100644
--- a/src/Component/ui/TextArea.tsx
+++ b/src/Component/ui/TextArea.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { getTheme } from "../../config/them.config";
 
 type TextAreaProps = {
   label?: string;
@@ -18,13 +17,17 @@ type TextAreaProps = {
 };
 
 export const TextArea = (props: TextAreaProps) => {
-  const theme = getTheme("light");
-
   return (
-    <div className={`textarea-container flex flex-col gap-2 mb-4 ${props.className || ""}`}>
-      <label className="text-sm text-gray-400 uppercase font-semibold" htmlFor={props.name}>
-        {props.label}
-      </label>
+    <div className={`flex flex-col gap-1.5 mb-4 ${props.className || ""}`}>
+      {props.label && (
+        <label
+          className="text-xs font-semibold uppercase tracking-wider"
+          htmlFor={props.name}
+          style={{ color: "var(--cd-text-2)" }}
+        >
+          {props.label}
+        </label>
+      )}
 
       <textarea
         id={props.name}
@@ -38,13 +41,19 @@ export const TextArea = (props: TextAreaProps) => {
         disabled={props.disabled}
         required={props.required}
         maxLength={props.maxLength}
-        className="border-2 rounded-lg p-2  text-[1.8vw] lg:text-lg resize-y"
+        className="rounded-lg p-3 text-sm resize-y outline-none border transition-all duration-150"
         style={{
-          borderColor: theme.borderColor.primary,
+          backgroundColor: "var(--cd-surface)",
+          borderColor: props.error ? "var(--cd-danger)" : "var(--cd-border)",
+          color: "var(--cd-text)",
         }}
       />
 
-      {props.error && <span className="error">{props.error}</span>}
+      {props.error && (
+        <span className="text-xs" style={{ color: "var(--cd-danger)" }}>
+          {props.error}
+        </span>
+      )}
     </div>
   );
 };
diff --git a/src/Component/ui/ThemeToggle.tsx b/src/Component/ui/ThemeToggle.tsx
new file mode 100644
index 0000000..1cca083
--- /dev/null
+++ b/src/Component/ui/ThemeToggle.tsx
@@ -0,0 +1,27 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "@/theme/hooks/useTheme";
+
+export function ThemeToggle() {
+  const { mode, toggle } = useTheme();
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label={`Switch to ${mode === "light" ? "dark" : "light"} mode`}
+      className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-150"
+      style={{
+        backgroundColor: "var(--cd-surface-2)",
+        color: "var(--cd-text-2)",
+        border: "1px solid var(--cd-border)",
+      }}
+      onMouseEnter={(e) =>
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-hover)")
+      }
+      onMouseLeave={(e) =>
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-surface-2)")
+      }
+    >
+      {mode === "light" ? <Moon size={16} /> : <Sun size={16} />}
+    </button>
+  );
+}
diff --git a/src/config/them.config.ts b/src/config/them.config.ts
index 4af9b2f..00f7846 100644
--- a/src/config/them.config.ts
+++ b/src/config/them.config.ts
@@ -1,160 +1,3 @@
-// Theme configuration for Apex Circle
-// Light and Dark mode variants
-
-export type ThemeMode = "light" | "dark";
-
-export type Theme = {
-  background: {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-  };
-
-  textColor: {
-    primary: string;
-    secondary: string;
-    tersiary: string;
-    muted: string;
-    error: string;
-  };
-
-  borderColor: {
-    primary: string;
-    secondary: string;
-  };
-
-  alert: {
-    success: {
-      text: string;
-      background: string;
-      border: string;
-      icon: string;
-    };
-    warning: {
-      text: string;
-      background: string;
-      border: string;
-      icon: string;
-    };
-    error: {
-      text: string;
-      background: string;
-      border: string;
-      icon: string;
-    };
-    info: {
-      text: string;
-      background: string;
-      border: string;
-      icon: string;
-    };
-  };
-
-  fontFamily: {
-    primary: string;
-    secondary: string;
-  };
-};
-//
-export const lightTheme: Theme = {
-  background: {
-    primary: "#FFFFFF",
-    secondary: "#F5F5F5",
-    tertiary: "#E0E0E0",
-  },
-  textColor: {
-    primary: "#333333",
-    secondary: "#666666",
-    tersiary: "#306ee8",
-    muted: "#999999",
-    error: "#FF0000",
-  },
-  borderColor: {
-    primary: "#CCCCCC",
-    secondary: "#EEEEEE",
-  },
-  alert: {
-    success: {
-      text: "#155724",
-      background: "#D4EDDA",
-      border: "#C3E6CB",
-      icon: "#28A745",
-    },
-    warning: {
-      text: "#856404",
-      background: "#FFF3CD",
-      border: "#FFEEBA",
-      icon: "#FFC107",
-    },
-    error: {
-      text: "#721C24",
-      background: "#F8D7DA",
-      border: "#F5C6CB",
-      icon: "#DC3545",
-    },
-    info: {
-      text: "#0D47A1",
-      background: "#D1E9F0",
-      border: "#B3E5FCB",
-      icon: "#2196F3",
-    },
-  },
-  fontFamily: {
-    primary: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
-    secondary: "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif",
-  },
-};
-
-export const darkTheme: Theme = {
-  background: {
-    primary: "#FFFFFF",
-    secondary: "#f6f6f8",
-    tertiary: "#dbeafe",
-  },
-  textColor: {
-    primary: "#1e293b",
-    secondary: "#738196",
-    tersiary: "#306ee8",
-    error: "#ff0000",
-    muted: "#777777",
-  },
-  borderColor: {
-    primary: "#e2e8f0",
-    secondary: "#444444",
-  },
-  alert: {
-    success: {
-      text: "#D4EDDA",
-      background: "#155724",
-      border: "#C3E6CB",
-      icon: "#28A745",
-    },
-    warning: {
-      text: "#FFF3CD",
-      background: "#856404",
-      border: "#FFEEBA",
-      icon: "#FFC107",
-    },
-    error: {
-      text: "#F8D7DA",
-      background: "#721C24",
-      border: "#F5C6CB",
-      icon: "#DC3545",
-    },
-    info: {
-      text: "#D1E9F0",
-      background: "#0D47A1",
-      border: "#B3E5FCB",
-      icon: "#2196F3",
-    },
-  },
-  fontFamily: {
-    primary: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
-    secondary: "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif",
-  },
-};
-
-// Theme toggle utility
-export function getTheme(mode: ThemeMode): Theme {
-  return mode === "dark" ? darkTheme : lightTheme;
-}
+// Re-exports from the new centralized theme system.
+// Kept for backward compatibility — prefer importing from @/theme directly.
+export { getTheme, themes, type ThemeMode, type Theme } from "../theme/theme.config";
diff --git a/src/features/AddMember/v1/Component/AddMemberHeader.tsx b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
index 2b60384..1326a00 100644
--- a/src/features/AddMember/v1/Component/AddMemberHeader.tsx
+++ b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
@@ -5,26 +5,32 @@ import { memo } from "react";
 
 const AddMemberHeader = () => {
   return (
-    <div className="py-[3vh] w-full  bg-white border-b border-gray-300 flex    text-xl font-bold  justify-between">
-      <Link to="/member" className="w-1/3 h-full  flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-gray-800  ml-5 mt-2">
+    <div
+      className="py-[3vh] w-full border-b flex text-xl font-bold justify-between"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
+      <Link to="/org/member" className="w-1/3 h-full flex items-center">
+        <h1
+          className="text-2xl font-bold ml-5 mt-2"
+          style={{ color: "var(--cd-text)" }}
+        >
           <IoMdArrowRoundBack className="mr-[3vw] inline" />
           Create New Member
         </h1>
       </Link>
 
-      <div className="w-[40%] h-full mr-[3vw] flex justify-end  gap-3  ">
+      <div className="w-[40%] h-full mr-[3vw] flex justify-end gap-3">
         <Button
           text="Discard Draft"
+          variant="secondary"
           onClick={() => alert("Discard Draft clicked")}
-          backgroundColor="#ffffff"
-          textColor="black"
         />
-
         <Button
           text="Create Member"
           onClick={() => alert("Create Member clicked")}
-          backgroundColor="#4f46e4"
         />
       </div>
     </div>
diff --git a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
index 8bd30b2..724e009 100644
--- a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
+++ b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
@@ -1,23 +1,19 @@
-import { getTheme } from "../../../../config/them.config";
 import MemberShip_Status from "./MemberShip_Status";
 import AccessLevel from "./AccessLevel";
 
-// Removed unused Role type
 const Administrative_MetaData = () => {
-  let theme = getTheme("light");
-
   return (
     <div
-      className="bg-white w-full lg:w-[30%] h-full flex flex-col border-2 rounded-lg self-center mt-3 lg:mt-10 p-7"
+      className="w-full lg:w-[30%] h-full flex flex-col rounded-xl self-center mt-3 lg:mt-10 p-7"
       style={{
-        backgroundColor: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <p className="uppercase text-lg font-bold">Administrative Metadata</p>
-
+      <p className="uppercase text-lg font-bold" style={{ color: "var(--cd-text)" }}>
+        Administrative Metadata
+      </p>
       <MemberShip_Status />
-
       <AccessLevel />
     </div>
   );
diff --git a/src/features/AddMember/v1/Component/Community_Involment.tsx b/src/features/AddMember/v1/Component/Community_Involment.tsx
index 2375274..24e915b 100644
--- a/src/features/AddMember/v1/Component/Community_Involment.tsx
+++ b/src/features/AddMember/v1/Component/Community_Involment.tsx
@@ -1,29 +1,32 @@
 import { useState } from "react";
-import { getTheme } from "../../../../config/them.config";
 import { GrGroup } from "react-icons/gr";
 import InterestBox from "./InterestBox";
 import AREA_OF_INTEREST from "../Constant/Interest.constant";
 import { TextArea } from "../../../../Component/ui/TextArea";
 
 const Community_Involvement = () => {
-  let theme = getTheme("light");
   const [internalNotes, setInternalNotes] = useState("");
 
   return (
     <div
-      className="bg-white w-full h-fit flex flex-col border-2 rounded-lg self-center mt-10 p-7"
+      className="w-full h-fit flex flex-col rounded-xl self-center mt-10 p-7"
       style={{
-        backgroundColor: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <span className="font-extrabold text-xl text-gray-800 uppercase mb-[3vh] flex items-center gap-3">
-        <GrGroup className="text-[#4f46e5]" />
+      <span
+        className="font-extrabold text-xl uppercase mb-[3vh] flex items-center gap-3"
+        style={{ color: "var(--cd-text)" }}
+      >
+        <GrGroup style={{ color: "var(--cd-primary)" }} />
         Community Involvement
       </span>
 
       <div className="flex flex-col">
-        <p className="text-md text-gray-400 uppercase font-semibold">Area of Interest</p>
+        <p className="text-sm uppercase font-semibold" style={{ color: "var(--cd-text-2)" }}>
+          Area of Interest
+        </p>
 
         <div className="flex flex-wrap gap-4 mt-3">
           {AREA_OF_INTEREST.map((interest, index) => (
diff --git a/src/features/AddMember/v1/Page/AddMemberPage.tsx b/src/features/AddMember/v1/Page/AddMemberPage.tsx
index 79c738c..cfa19d6 100644
--- a/src/features/AddMember/v1/Page/AddMemberPage.tsx
+++ b/src/features/AddMember/v1/Page/AddMemberPage.tsx
@@ -1,4 +1,3 @@
-import { getTheme } from "../../../../config/them.config";
 import AddMemberHeader from "../Component/AddMemberHeader";
 import Administrative_MetaData from "../Component/Administrative_MetaData";
 import Community_Involvement from "../Component/Community_Involment";
@@ -6,23 +5,15 @@ import PersonalInfoCard from "../Sections/PersonalInfoCard";
 import ProfessionalDetails from "../Sections/ProfessionalDetails";
 
 const AddMemberPage = () => {
-  let theme = getTheme("light");
   return (
-    <div
-      className="w-full flex flex-col "
-      style={{
-        background: theme.background.secondary,
-      }}
-    >
+    <div className="w-full flex flex-col cd-page">
       <AddMemberHeader />
-
       <div className="flex p-8 gap-8 w-full flex-col lg:flex-row items-start overflow-x-hidden">
         <div className="w-full lg:w-[65%] h-full flex-col">
           <PersonalInfoCard />
           <ProfessionalDetails />
           <Community_Involvement />
         </div>
-
         <Administrative_MetaData />
       </div>
     </div>
diff --git a/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx b/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
index 56f3414..7ddb7d6 100644
--- a/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
+++ b/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
@@ -1,46 +1,52 @@
 import React, { memo } from "react";
 import { Input } from "../../../../Component/ui/Input";
-import { getTheme } from "../../../../config/them.config";
 import Url from "../../../../Component/ui/Url";
 import { CiCamera } from "react-icons/ci";
 import { FaUser } from "react-icons/fa";
 
 const PersonalInfoCard = () => {
-  let theme = getTheme("light");
-
-  let [firstName, setFirstName] = React.useState("");
-  let [lastName, setLastName] = React.useState("");
-  let [email, setEmail] = React.useState("");
-  let [profileUrl, setProfileUrl] = React.useState("example.com");
+  const [firstName, setFirstName] = React.useState("");
+  const [lastName, setLastName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [profileUrl, setProfileUrl] = React.useState("example.com");
 
   return (
     <div
-      className="bg-white w-full flex flex-col border-2 rounded-lg self-center mt-5 p-7"
+      className="w-full flex flex-col rounded-xl self-center mt-5 p-7"
       style={{
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <span className="font-extrabold text-xl text-gray-800 uppercase mb-[3vh] flex items-center gap-3">
-        <FaUser className="text-[#4f46e5]" />
+      <span
+        className="font-extrabold text-xl uppercase mb-[3vh] flex items-center gap-3"
+        style={{ color: "var(--cd-text)" }}
+      >
+        <FaUser style={{ color: "var(--cd-primary)" }} />
         Personal Information
       </span>
-      <div className="flex gap-4  ">
-        <div className="w-[18%] flex flex-col gap-2  mb-4">
+
+      <div className="flex gap-4">
+        <div className="w-[18%] flex flex-col gap-2 mb-4">
           <div
-            className="w-[130px] h-[150px] border-2 border-dashed rounded-lg flex flex-col items-center justify-center text-2xl"
+            className="w-[130px] h-[150px] border-2 border-dashed rounded-xl flex flex-col items-center justify-center"
             style={{
-              borderColor: theme.borderColor.primary,
-              backgroundColor: theme.background.secondary,
+              borderColor: "var(--cd-border)",
+              backgroundColor: "var(--cd-surface-2)",
             }}
           >
-            <CiCamera className="text-4xl text-gray-400" />
-            <p className="text-2xl text-gray-400">Upload</p>
+            <CiCamera className="text-4xl" style={{ color: "var(--cd-text-muted)" }} />
+            <p className="text-sm mt-1" style={{ color: "var(--cd-text-muted)" }}>
+              Upload
+            </p>
           </div>
         </div>
-        <div className="w-1/2 flex flex-col gap-2  p-4 mb-4 text-md">
-          <p className="font-bold ">Profile Photo</p>
-          <p className="w-full  text-gray-500">
-            Recommended size is 400x400px. Max file size is 5MB. Allowed formats are
+        <div className="w-1/2 flex flex-col gap-2 p-4 mb-4">
+          <p className="font-bold" style={{ color: "var(--cd-text)" }}>
+            Profile Photo
+          </p>
+          <p className="w-full text-sm" style={{ color: "var(--cd-text-2)" }}>
+            Recommended size is 400x400px. Max file size is 5MB. Allowed formats are JPG, PNG.
           </p>
         </div>
       </div>
@@ -74,13 +80,17 @@ const PersonalInfoCard = () => {
             value={email}
             onChange={(_, value) => setEmail(value)}
           />
-
-          <div className="w-1/2 flex flex-col gap-2  mb-4">
-            <div className="Label">Public Profile URL</div>
+          <div className="w-1/2 flex flex-col gap-2 mb-4">
+            <div
+              className="text-xs font-semibold uppercase tracking-wider"
+              style={{ color: "var(--cd-text-2)" }}
+            >
+              Public Profile URL
+            </div>
             <Url
               protocol="http://"
               domain={profileUrl}
-              className="w-[80%] text-2xl  flex"
+              className="w-[80%] text-2xl flex"
               setDomain={(domain) => setProfileUrl(domain)}
             />
           </div>
diff --git a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
index b72dcc6..3909697 100644
--- a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
+++ b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
@@ -1,5 +1,4 @@
 import React, { memo } from "react";
-import { getTheme } from "../../../../config/them.config";
 import { IoBag } from "react-icons/io5";
 import { Input } from "../../../../Component/ui/Input";
 import DropDown from "../../../../Component/ui/DropDown";
@@ -7,17 +6,15 @@ import { Roles } from "../Constant/Role.constant";
 import { SkillColor } from "../Constant/Skill.constant";
 
 const ProfessionalDetails = () => {
-  let theme = getTheme("light");
-
-  const [SkillInput, setSkillInput] = React.useState("");
+  const [skillInput, setSkillInput] = React.useState("");
   const [, setSelectedRole] = React.useState("");
-  const [Location, setLocation] = React.useState("");
-  const [Skills, setSkills] = React.useState<string[]>([]);
+  const [location, setLocation] = React.useState("");
+  const [skills, setSkills] = React.useState<string[]>([]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
-      const skill = SkillInput.trim();
-      if (skill !== "" && !Skills.includes(skill)) {
+      const skill = skillInput.trim();
+      if (skill !== "" && !skills.includes(skill)) {
         setSkills((prev) => [...prev, skill]);
         setSkillInput("");
       }
@@ -25,35 +22,40 @@ const ProfessionalDetails = () => {
   };
 
   const getSkillColor = (skill: string) => {
-    const index = Skills.indexOf(skill);
+    const index = skills.indexOf(skill);
     return SkillColor[index % SkillColor.length];
   };
 
   return (
     <div
-      className="bg-white w-full flex flex-col border-2 rounded-lg self-center mt-5 p-7"
+      className="w-full flex flex-col rounded-xl self-center mt-5 p-7"
       style={{
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <span className="font-extrabold text-xl text-gray-800 uppercase mb-[3vh] flex items-center gap-3">
-        <IoBag className="text-[#4f46e5]" />
+      <span
+        className="font-extrabold text-xl uppercase mb-[3vh] flex items-center gap-3"
+        style={{ color: "var(--cd-text)" }}
+      >
+        <IoBag style={{ color: "var(--cd-primary)" }} />
         Professional Details
       </span>
 
       <div className="flex mt-[3.5vh] gap-5">
         <div className="flex flex-col gap-2 w-[40%]">
-          <p className="text-md text-gray-400 uppercase font-semibold">Primary Role</p>
-
+          <p className="text-xs font-semibold uppercase" style={{ color: "var(--cd-text-2)" }}>
+            Primary Role
+          </p>
           <DropDown options={Roles} onSelect={(opt: string) => setSelectedRole(opt)} />
         </div>
 
         <div className="flex flex-col w-[40%]">
           <Input
-            label="CITY / LOCATION"
-            placeholder="San Francisco CA"
+            label="City / Location"
+            placeholder="San Francisco, CA"
             name="location"
-            value={Location}
+            value={location}
             onChange={(_, value) => setLocation(value)}
           />
         </div>
@@ -63,24 +65,27 @@ const ProfessionalDetails = () => {
         <div className="flex flex-col w-full">
           <Input
             name="skills"
-            label="skills & expertise"
+            label="Skills & Expertise"
             placeholder="Type a skill and press Enter"
-            value={SkillInput}
+            value={skillInput}
             className="w-full"
             onKeyDown={handleKeyDown}
             onChange={(_, value) => setSkillInput(value)}
           />
 
           <div className="flex gap-2 mt-2 flex-wrap">
-            {Skills.map((skill, index) => (
+            {skills.map((skill, index) => (
               <div
                 key={index}
-                className={` text-gray-500 font-bold px-3 py-2 rounded-xl text-lg flex items-center gap-2`}
-                style={{ backgroundColor: getSkillColor(skill) }}
+                className="font-semibold px-3 py-1.5 rounded-xl text-sm flex items-center gap-2"
+                style={{
+                  backgroundColor: getSkillColor(skill),
+                  color: "var(--cd-text)",
+                }}
               >
                 {skill}
                 <span
-                  className="cursor-pointer text-2xl"
+                  className="cursor-pointer text-base leading-none"
                   onClick={() => setSkills((prev) => prev.filter((_, i) => i !== index))}
                 >
                   &times;
diff --git a/src/features/Contact_And_Support/v1/Components/InternalDashboardSearch.tsx b/src/features/Contact_And_Support/v1/Components/InternalDashboardSearch.tsx
index f8896b4..8e711ac 100644
--- a/src/features/Contact_And_Support/v1/Components/InternalDashboardSearch.tsx
+++ b/src/features/Contact_And_Support/v1/Components/InternalDashboardSearch.tsx
@@ -1,18 +1,21 @@
 import Input from "@/Component/ui/Input";
-import { getTheme } from "@/config/them.config";
 import { FaIdCardAlt, FaSearch } from "react-icons/fa";
 
 const InternalDashboardSearch = () => {
-  let theme = getTheme("light");
-
   return (
     <div
-      className="Table_Header bg-white w-full flex flex-col lg:flex-row lg:items-center lg:justify-between border-b-2 p-3 gap-3"
-      style={{ borderColor: theme.borderColor.primary }}
+      className="w-full flex flex-col lg:flex-row lg:items-center lg:justify-between border-b p-3 gap-3"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
     >
-      <span className="flex items-center">
-        <FaIdCardAlt className="inline text-2xl text-[#5850ec]" />
-        <h1 className="text-base sm:text-lg lg:text-2xl font-bold text-gray-800 ml-3 sm:ml-5">
+      <span className="flex items-center gap-2">
+        <FaIdCardAlt className="text-2xl" style={{ color: "var(--cd-primary)" }} />
+        <h1
+          className="text-base sm:text-lg lg:text-2xl font-bold"
+          style={{ color: "var(--cd-text)" }}
+        >
           Internal Directory
         </h1>
       </span>
@@ -22,7 +25,7 @@ const InternalDashboardSearch = () => {
           placeholder="Search Directory"
           name="Search"
           leftIcon={<FaSearch />}
-          className="w-full bg-[#f8fafc] mb-0"
+          className="w-full mb-0"
           inputClassName="text-sm md:text-base"
         />
       </div>
diff --git a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
index 795a6de..6e28c85 100644
--- a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
+++ b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
@@ -1,4 +1,3 @@
-import { getTheme } from "@/config/them.config";
 import { useState } from "react";
 import { FiMail, FiCopy, FiCheck } from "react-icons/fi";
 
@@ -12,171 +11,132 @@ type TeamMember = {
 };
 
 const MEMBERS: TeamMember[] = [
-  {
-    id: 1,
-    name: "John Doe",
-    department: "IT",
-    role: "System Admin",
-    email: "john.doe@example.com",
-    status: "active",
-  },
-  {
-    id: 2,
-    name: "Jane Smith",
-    department: "HR",
-    role: "HR Manager",
-    email: "jane.smith@example.com",
-    status: "active",
-  },
-  {
-    id: 3,
-    name: "Alex Turner",
-    department: "Finance",
-    role: "Finance Lead",
-    email: "alex.turner@example.com",
-    status: "away",
-  },
-  {
-    id: 4,
-    name: "Maria Garcia",
-    department: "Design",
-    role: "UI/UX Designer",
-    email: "maria.garcia@example.com",
-    status: "active",
-  },
-  {
-    id: 5,
-    name: "Chris Wilson",
-    department: "DevOps",
-    role: "Infrastructure",
-    email: "chris.wilson@example.com",
-    status: "offline",
-  },
+  { id: 1, name: "John Doe", department: "IT", role: "System Admin", email: "john.doe@example.com", status: "active" },
+  { id: 2, name: "Jane Smith", department: "HR", role: "HR Manager", email: "jane.smith@example.com", status: "active" },
+  { id: 3, name: "Alex Turner", department: "Finance", role: "Finance Lead", email: "alex.turner@example.com", status: "away" },
+  { id: 4, name: "Maria Garcia", department: "Design", role: "UI/UX Designer", email: "maria.garcia@example.com", status: "active" },
+  { id: 5, name: "Chris Wilson", department: "DevOps", role: "Infrastructure", email: "chris.wilson@example.com", status: "offline" },
 ];
 
-const STATUS_DOT: Record<TeamMember["status"], string> = {
-  active: "bg-green-400",
-  away: "bg-yellow-400",
-  offline: "bg-gray-300",
+const STATUS_COLOR: Record<TeamMember["status"], string> = {
+  active: "var(--cd-success)",
+  away: "var(--cd-warning)",
+  offline: "var(--cd-text-muted)",
 };
 
 function getInitials(name: string): string {
-  return name
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
 }
 
 const CopyEmailButton = ({ email }: { email: string }) => {
   const [copied, setCopied] = useState(false);
-
   const handleCopy = () => {
     navigator.clipboard.writeText(email);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
-
   return (
     <button
       onClick={handleCopy}
       title="Copy email"
-      className="p-1.5 rounded-md transition-colors hover:bg-gray-100 text-gray-400 hover:text-gray-600"
+      className="p-1.5 rounded-md transition-colors"
+      style={{ color: "var(--cd-text-muted)" }}
+      onMouseEnter={(e) =>
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-hover)")
+      }
+      onMouseLeave={(e) =>
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+      }
     >
-      {copied ? <FiCheck size={14} className="text-green-500" /> : <FiCopy size={14} />}
+      {copied ? (
+        <FiCheck size={14} style={{ color: "var(--cd-success)" }} />
+      ) : (
+        <FiCopy size={14} />
+      )}
     </button>
   );
 };
 
 const InternalSupport_Table = () => {
-  const theme = getTheme("light");
-
   return (
     <div className="w-full h-fit overflow-x-auto">
-      <table className="w-full min-w-[680px] border-collapse">
+      <table className="cd-table min-w-[680px]">
         <thead>
-          <tr
-            className="text-xs sm:text-sm font-semibold uppercase tracking-wider"
-            style={{ background: theme.background.secondary, color: theme.textColor.secondary }}
-          >
-            <th className="text-left px-3 sm:px-5 py-3">Team Member</th>
-            <th className="text-left px-3 sm:px-5 py-3">Role / Department</th>
-            <th className="text-left px-3 sm:px-5 py-3">Email Address</th>
-            <th className="text-center px-3 sm:px-5 py-3">Actions</th>
+          <tr>
+            <th>Team Member</th>
+            <th>Role / Department</th>
+            <th>Email Address</th>
+            <th className="text-center">Actions</th>
           </tr>
         </thead>
-
-        <tbody style={{ background: theme.background.primary }}>
-          {MEMBERS.map((member) => {
-            return (
-              <tr key={member.id} className="group transition-colors hover:bg-[#f8fafc]">
-                {/* Team Member */}
-                <td className="px-3 sm:px-5 py-3.5">
-                  <div className="flex items-center gap-3">
-                    <div className="relative flex-shrink-0">
-                      <div
-                        className="w-9 h-9 rounded-full flex items-center justify-center text-md font-bold text-white select-none"
-                        style={{ background: "#5850ec" }}
-                      >
-                        {getInitials(member.name)}
-                      </div>
-                      <span
-                        className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white ${STATUS_DOT[member.status]}`}
-                      />
-                    </div>
-                    <span
-                      className="font-medium text-sm sm:text-base"
-                      style={{ color: theme.textColor.primary }}
+        <tbody>
+          {MEMBERS.map((member) => (
+            <tr key={member.id}>
+              <td>
+                <div className="flex items-center gap-3">
+                  <div className="relative shrink-0">
+                    <div
+                      className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white select-none"
+                      style={{ backgroundColor: "var(--cd-primary)" }}
                     >
-                      {member.name}
-                    </span>
-                  </div>
-                </td>
-
-                {/* Role / Department */}
-                <td className="px-3 sm:px-5 py-3.5">
-                  <div className="flex flex-col gap-1">
+                      {getInitials(member.name)}
+                    </div>
                     <span
-                      className="text-xs sm:text-sm w-fit px-3 py-2 rounded-lg text-gray-600 font-bold"
-                      style={{ background: theme.background.secondary }}
-                    >
-                      {member.role}
-                    </span>
+                      className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2"
+                      style={{
+                        backgroundColor: STATUS_COLOR[member.status],
+                        borderColor: "var(--cd-surface)",
+                      }}
+                    />
                   </div>
-                </td>
-
-                {/* Email */}
-                <td className="px-3 sm:px-5 py-3.5">
-                  <span
-                    className="text-xs sm:text-sm break-all"
-                    style={{ color: theme.textColor.secondary }}
-                  >
-                    {member.email}
+                  <span className="font-medium text-sm" style={{ color: "var(--cd-text)" }}>
+                    {member.name}
                   </span>
-                </td>
-
-                {/* Actions */}
-                <td className="px-3 sm:px-5 py-3.5">
-                  <div className="flex items-center justify-center gap-1">
-                    <a
-                      href={`mailto:${member.email}`}
-                      title="Send email"
-                      className="p-1.5 rounded-md transition-colors hover:bg-indigo-50 text-gray-400 hover:text-indigo-600"
-                    >
-                      <FiMail size={14} />
-                    </a>
-                    <CopyEmailButton email={member.email} />
-                  </div>
-                </td>
-              </tr>
-            );
-          })}
+                </div>
+              </td>
+              <td>
+                <span
+                  className="text-xs px-3 py-1.5 rounded-lg font-semibold"
+                  style={{
+                    backgroundColor: "var(--cd-surface-2)",
+                    color: "var(--cd-text-2)",
+                  }}
+                >
+                  {member.role}
+                </span>
+              </td>
+              <td>
+                <span className="text-xs break-all" style={{ color: "var(--cd-text-2)" }}>
+                  {member.email}
+                </span>
+              </td>
+              <td>
+                <div className="flex items-center justify-center gap-1">
+                  <a
+                    href={`mailto:${member.email}`}
+                    title="Send email"
+                    className="p-1.5 rounded-md transition-colors"
+                    style={{ color: "var(--cd-text-muted)" }}
+                    onMouseEnter={(e) =>
+                      ((e.currentTarget as HTMLAnchorElement).style.backgroundColor =
+                        "var(--cd-primary-subtle)")
+                    }
+                    onMouseLeave={(e) =>
+                      ((e.currentTarget as HTMLAnchorElement).style.backgroundColor = "transparent")
+                    }
+                  >
+                    <FiMail size={14} />
+                  </a>
+                  <CopyEmailButton email={member.email} />
+                </div>
+              </td>
+            </tr>
+          ))}
         </tbody>
       </table>
 
       {MEMBERS.length === 0 && (
-        <div className="py-16 text-center text-sm" style={{ color: theme.textColor.muted }}>
+        <div className="py-16 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
           No team members found.
         </div>
       )}
diff --git a/src/features/Contact_And_Support/v1/Components/Support.tsx b/src/features/Contact_And_Support/v1/Components/Support.tsx
index 8a14544..0f2a84f 100644
--- a/src/features/Contact_And_Support/v1/Components/Support.tsx
+++ b/src/features/Contact_And_Support/v1/Components/Support.tsx
@@ -1,8 +1,6 @@
 import DropDown from "@/Component/ui/DropDown";
 import Input from "@/Component/ui/Input";
-import { getTheme } from "@/config/them.config";
 import { FormEvent, useState } from "react";
-
 import { MdOutlineSupportAgent } from "react-icons/md";
 import { FiAlertCircle, FiCheckCircle } from "react-icons/fi";
 import { CONTACT_AND_SUPPORT_CONSTANT } from "../constants/ContactAndSupport.constant";
@@ -16,8 +14,14 @@ type FormErrors = {
 
 const PRIORITY_OPTIONS: PriorityLevel[] = ["Low", "Medium", "High", "Critical"];
 
+const priorityColor: Record<PriorityLevel, string> = {
+  Low: "var(--cd-success)",
+  Medium: "var(--cd-warning)",
+  High: "var(--cd-danger)",
+  Critical: "var(--cd-secondary)",
+};
+
 const Support = () => {
-  const theme = getTheme("light");
   const initialCategory = CONTACT_AND_SUPPORT_CONSTANT[0] ?? "";
   const [selectedCategory, setSelectedCategory] = useState<string>(initialCategory);
   const [priority, setPriority] = useState<PriorityLevel>("Medium");
@@ -28,21 +32,12 @@ const Support = () => {
 
   const validateForm = (): boolean => {
     const nextErrors: FormErrors = {};
-
-    if (!subject.trim()) {
-      nextErrors.subject = "Issue subject is required.";
-    } else if (subject.trim().length < 6) {
-      nextErrors.subject = "Use at least 6 characters for a clear subject.";
-    }
-
-    if (!issueDetails.trim()) {
-      nextErrors.issueDetails = "Issue details are required.";
-    } else if (issueDetails.trim().length < 20) {
-      nextErrors.issueDetails = "Add a few more details so support can reproduce the issue.";
-    }
-
+    if (!subject.trim()) nextErrors.subject = "Issue subject is required.";
+    else if (subject.trim().length < 6) nextErrors.subject = "Use at least 6 characters.";
+    if (!issueDetails.trim()) nextErrors.issueDetails = "Issue details are required.";
+    else if (issueDetails.trim().length < 20)
+      nextErrors.issueDetails = "Add more details so support can reproduce the issue.";
     setErrors(nextErrors);
-
     return Object.keys(nextErrors).length === 0;
   };
 
@@ -61,40 +56,36 @@ const Support = () => {
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-
-    if (!validateForm()) {
-      setTicketReference("");
-      return;
-    }
-
-    const reference = `SUP-${Date.now().toString().slice(-6)}`;
-    setTicketReference(reference);
+    if (!validateForm()) { setTicketReference(""); return; }
+    setTicketReference(`SUP-${Date.now().toString().slice(-6)}`);
     resetForm();
   };
 
   return (
     <div
-      className="h-full w-full rounded-xl border-2 overflow-hidden"
-      style={{ background: theme.background.primary, borderColor: theme.borderColor.primary }}
+      className="h-full w-full rounded-xl overflow-hidden"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
+      }}
     >
       <div
-        className="flex flex-col p-5 gap-2 border-b-2"
-        style={{ borderColor: theme.borderColor.primary }}
+        className="flex flex-col p-5 gap-2 border-b"
+        style={{ borderColor: "var(--cd-border)" }}
       >
-        <span className="flex items-center">
+        <span className="flex items-center gap-2">
           <MdOutlineSupportAgent
-            className="inline text-3xl"
-            style={{ color: theme.textColor.tersiary }}
+            className="text-3xl"
+            style={{ color: "var(--cd-primary)" }}
           />
           <h1
-            className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-2"
-            style={{ color: theme.textColor.primary }}
+            className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold"
+            style={{ color: "var(--cd-text)" }}
           >
-            ADMIN SUPPORT
+            Admin Support
           </h1>
         </span>
-
-        <p className="text-sm md:text-base" style={{ color: theme.textColor.secondary }}>
+        <p className="text-sm" style={{ color: "var(--cd-text-2)" }}>
           Submit Technical Issues, Report Bugs, or Operational Queries.
         </p>
       </div>
@@ -105,34 +96,29 @@ const Support = () => {
       >
         <DropDown
           className="w-full"
-          label="ISSUE CATEGORY"
+          label="Issue Category"
           options={CONTACT_AND_SUPPORT_CONSTANT}
           value={selectedCategory}
           onSelect={setSelectedCategory}
         />
 
         <div className="flex flex-col gap-2">
-          <p
-            className="text-sm uppercase font-semibold tracking-wide"
-            style={{ color: theme.textColor.secondary, fontFamily: theme.fontFamily.primary }}
-          >
+          <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-2)" }}>
             Priority Level
           </p>
-
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
             {PRIORITY_OPTIONS.map((option) => {
               const isSelected = option === priority;
-
               return (
                 <button
                   key={option}
                   type="button"
                   onClick={() => setPriority(option)}
-                  className="rounded-lg border px-3 py-2 text-sm font-semibold transition-colors"
+                  className="rounded-lg px-3 py-2 text-sm font-semibold transition-all"
                   style={{
-                    borderColor: isSelected ? theme.textColor.tersiary : theme.borderColor.primary,
-                    background: isSelected ? theme.background.tertiary : theme.background.primary,
-                    color: isSelected ? theme.textColor.tersiary : theme.textColor.secondary,
+                    border: `1px solid ${isSelected ? priorityColor[option] : "var(--cd-border)"}`,
+                    backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                    color: isSelected ? priorityColor[option] : "var(--cd-text-2)",
                   }}
                 >
                   {option}
@@ -143,7 +129,7 @@ const Support = () => {
         </div>
 
         <Input
-          label="ISSUE SUBJECT"
+          label="Issue Subject"
           name="Issue Subject"
           value={subject}
           onChange={(_, value) => setSubject(value)}
@@ -152,87 +138,80 @@ const Support = () => {
           error={errors.subject}
         />
 
-        <div className="flex flex-col gap-2 -mt-2">
+        <div className="flex flex-col gap-1.5 -mt-2">
           <label
             htmlFor="issue-details"
-            className="text-sm uppercase font-semibold tracking-wide"
-            style={{ color: theme.textColor.secondary, fontFamily: theme.fontFamily.primary }}
+            className="text-xs font-semibold uppercase tracking-wider"
+            style={{ color: "var(--cd-text-2)" }}
           >
             Issue Details
           </label>
-
           <textarea
             id="issue-details"
             name="issue-details"
             value={issueDetails}
-            onChange={(event) => setIssueDetails(event.target.value)}
+            onChange={(e) => setIssueDetails(e.target.value)}
             placeholder="Share exact steps, affected section, and what result you expected."
             rows={5}
-            className="w-full border-2 rounded-lg px-3 py-2 text-sm md:text-base resize-y outline-none"
+            className="w-full rounded-lg px-3 py-2 text-sm resize-y outline-none transition-all"
             style={{
-              borderColor: errors.issueDetails ? theme.textColor.error : theme.borderColor.primary,
-              background: theme.background.primary,
-              color: theme.textColor.primary,
+              border: `1px solid ${errors.issueDetails ? "var(--cd-danger)" : "var(--cd-border)"}`,
+              backgroundColor: "var(--cd-surface)",
+              color: "var(--cd-text)",
             }}
           />
-
-          <div
-            className="flex items-center justify-between text-xs"
-            style={{ color: theme.textColor.muted }}
-          >
+          <div className="flex items-center justify-between text-xs" style={{ color: "var(--cd-text-muted)" }}>
             <span>Minimum 20 characters recommended.</span>
             <span>{issueDetails.length}/1000</span>
           </div>
-
           {errors.issueDetails && (
-            <p className="text-sm flex items-center gap-1" style={{ color: theme.textColor.error }}>
-              <FiAlertCircle />
-              {errors.issueDetails}
+            <p className="text-xs flex items-center gap-1" style={{ color: "var(--cd-danger)" }}>
+              <FiAlertCircle /> {errors.issueDetails}
             </p>
           )}
         </div>
 
         {ticketReference && (
           <div
-            className="rounded-lg border px-3 py-2 text-sm flex items-center gap-2"
+            className="rounded-lg px-3 py-2 text-sm flex items-center gap-2"
             style={{
-              background: theme.alert.success.background,
-              color: theme.alert.success.text,
-              borderColor: theme.alert.success.border,
+              backgroundColor: "var(--cd-success-subtle)",
+              color: "var(--cd-success)",
+              border: "1px solid var(--cd-border-subtle)",
             }}
           >
             <FiCheckCircle />
-            Ticket submitted successfully. Reference: <strong>{ticketReference}</strong>
+            Ticket submitted. Reference: <strong>{ticketReference}</strong>
           </div>
         )}
 
         <div className="flex flex-wrap items-center gap-3 pt-1">
           <button
             type="submit"
-            className="px-4 py-2 rounded-lg text-sm font-semibold"
-            style={{ background: theme.textColor.tersiary, color: "#ffffff" }}
+            className="cd-btn cd-btn-primary"
           >
             Submit Ticket
           </button>
-
           <button
             type="button"
             onClick={clearAll}
-            className="px-4 py-2 rounded-lg text-sm font-semibold border"
-            style={{ borderColor: theme.borderColor.primary, color: theme.textColor.secondary }}
+            className="cd-btn cd-btn-secondary"
           >
             Clear Form
           </button>
         </div>
 
         <div
-          className="rounded-lg border p-3 text-sm"
-          style={{ borderColor: theme.borderColor.primary, background: theme.background.secondary }}
+          className="rounded-lg p-3 text-sm"
+          style={{
+            border: "1px solid var(--cd-border)",
+            backgroundColor: "var(--cd-surface-2)",
+          }}
         >
-          <p className="font-semibold" style={{ color: theme.textColor.primary }}>
+          <p className="font-semibold" style={{ color: "var(--cd-text)" }}>
             What happens next?
           </p>
-          <p className="mt-1" style={{ color: theme.textColor.secondary }}>
+          <p className="mt-1" style={{ color: "var(--cd-text-2)" }}>
             Critical issues are triaged first. Include reproducible steps and screenshots to reduce
             turnaround time.
           </p>
diff --git a/src/features/Contact_And_Support/v1/Pages/Contact.tsx b/src/features/Contact_And_Support/v1/Pages/Contact.tsx
index f62866e..c1b1f26 100644
--- a/src/features/Contact_And_Support/v1/Pages/Contact.tsx
+++ b/src/features/Contact_And_Support/v1/Pages/Contact.tsx
@@ -1,22 +1,15 @@
-import { getTheme } from "@/config/them.config";
 import ContactHeader from "../Section/ContactHeader";
 import InternalDirectoryTable from "../Section/InternalDirectoryTable";
 import Support from "../Components/Support";
 
 const Contact = () => {
-  let theme = getTheme("light");
   return (
-    <div
-      className="w-full h-full min-h-0 flex flex-col"
-      style={{ background: theme.background.secondary }}
-    >
+    <div className="w-full h-full min-h-0 flex flex-col cd-page">
       <ContactHeader />
-
       <div className="w-full min-h-0 flex flex-col xl:flex-row p-4 sm:p-5 lg:p-6 gap-4 lg:gap-6">
         <div className="w-full min-w-0 xl:flex-1">
           <InternalDirectoryTable />
         </div>
-
         <div className="w-full min-w-0 xl:max-w-[30rem] flex">
           <Support />
         </div>
diff --git a/src/features/Contact_And_Support/v1/Section/ContactHeader.tsx b/src/features/Contact_And_Support/v1/Section/ContactHeader.tsx
index c155cbe..aba8020 100644
--- a/src/features/Contact_And_Support/v1/Section/ContactHeader.tsx
+++ b/src/features/Contact_And_Support/v1/Section/ContactHeader.tsx
@@ -1,8 +1,17 @@
 const ContactHeader = () => {
   return (
-    <div className="py-[3vh] bg-white border-b-[1px] border-gray-300 flex   text-xl font-bold  justify-between">
-      <span className="">
-        <h1 className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold text-gray-800  ml-5 mt-2">
+    <div
+      className="py-[3vh] border-b flex text-xl font-bold justify-between"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
+      <span>
+        <h1
+          className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 mt-2"
+          style={{ color: "var(--cd-text)" }}
+        >
           Admin Contact & Support
         </h1>
       </span>
diff --git a/src/features/Contact_And_Support/v1/Section/InternalDirectoryTable.tsx b/src/features/Contact_And_Support/v1/Section/InternalDirectoryTable.tsx
index 5c683f0..60f88f2 100644
--- a/src/features/Contact_And_Support/v1/Section/InternalDirectoryTable.tsx
+++ b/src/features/Contact_And_Support/v1/Section/InternalDirectoryTable.tsx
@@ -1,18 +1,17 @@
-import { getTheme } from "@/config/them.config";
 import InternalDashboardSearch from "@/features/Contact_And_Support/v1/Components/InternalDashboardSearch";
 import InternalSupport_Table from "../Components/InternalSupport_Table";
 
 const InternalDirectoryTable = () => {
-  let theme = getTheme("light");
-
   return (
     <div
-      className="w-full min-w-0 flex rounded-xl border-2 overflow-hidden"
-      style={{ borderColor: theme.borderColor.primary }}
+      className="w-full min-w-0 flex rounded-xl overflow-hidden"
+      style={{
+        border: "1px solid var(--cd-border)",
+        backgroundColor: "var(--cd-surface)",
+      }}
     >
       <div className="flex flex-col w-full h-fit">
         <InternalDashboardSearch />
-
         <InternalSupport_Table />
       </div>
     </div>
diff --git a/src/features/Dashboard/components/AISuggestions.tsx b/src/features/Dashboard/components/AISuggestions.tsx
index 699dc88..20fb459 100644
--- a/src/features/Dashboard/components/AISuggestions.tsx
+++ b/src/features/Dashboard/components/AISuggestions.tsx
@@ -10,30 +10,38 @@ export default function AISuggestions({ tasks }: Props) {
   const suggestions = getAISuggestions(tasks);
 
   return (
-    <div className="bg-white p-4 rounded-2xl shadow-sm hover:shadow-md transition-all">
-      {/* Header */}
+    <div className="cd-card cd-card-hover">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
-          <Sparkles className="text-indigo-500" size={18} />
-          <h3 className="font-semibold text-lg">AI Suggestions</h3>
+          <Sparkles size={17} style={{ color: "var(--cd-secondary)" }} />
+          <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
+            AI Suggestions
+          </h3>
         </div>
-
-        <span className="text-xs text-indigo-500">Smart Insights</span>
+        <span className="text-xs font-medium" style={{ color: "var(--cd-secondary)" }}>
+          Smart Insights
+        </span>
       </div>
 
-      {/* Suggestions */}
-      <div className="space-y-3">
+      <div className="space-y-2">
         {suggestions.map((s, i) => (
           <div
             key={i}
-            className={`
-              p-3 rounded-xl text-sm
-              transition-all duration-200
-              hover:bg-indigo-50 hover:shadow-sm break-words
-              ${i === 0 ? "bg-green-50 border border-green-100" : "bg-gray-50"}
-            `}
+            className="p-3 rounded-xl text-sm break-words transition-colors"
+            style={{
+              backgroundColor: i === 0 ? "var(--cd-success-subtle)" : "var(--cd-surface-2)",
+              color: "var(--cd-text)",
+            }}
+            onMouseEnter={(e) =>
+              ((e.currentTarget as HTMLDivElement).style.backgroundColor =
+                "var(--cd-primary-subtle)")
+            }
+            onMouseLeave={(e) =>
+              ((e.currentTarget as HTMLDivElement).style.backgroundColor =
+                i === 0 ? "var(--cd-success-subtle)" : "var(--cd-surface-2)")
+            }
           >
-            <span className="text-gray-800">{s}</span>
+            {s}
           </div>
         ))}
       </div>
diff --git a/src/features/Dashboard/components/Achievements.tsx b/src/features/Dashboard/components/Achievements.tsx
index 3af9580..99cf475 100644
--- a/src/features/Dashboard/components/Achievements.tsx
+++ b/src/features/Dashboard/components/Achievements.tsx
@@ -1,5 +1,4 @@
 import { Trophy, Flame, Star, Award } from "lucide-react";
-
 import { AchievementsData } from "@/features/Dashboard/types/dashboard";
 
 interface Props {
@@ -7,45 +6,43 @@ interface Props {
 }
 
 const iconMap = {
-  trophy: <Trophy size={20} />,
-  flame: <Flame size={20} />,
-  star: <Star size={20} />,
-  award: <Award size={20} />,
+  trophy: <Trophy size={18} />,
+  flame: <Flame size={18} />,
+  star: <Star size={18} />,
+  award: <Award size={18} />,
 };
 
 export default function Achievements({ data }: Props) {
   const { badges = [], certificates = [] } = data || {};
 
   return (
-    <div className="card hover:shadow-md transition">
-      <h3 className="section-title">Achievements</h3>
+    <div className="cd-card cd-card-hover">
+      <h3 className="cd-section-title">Achievements</h3>
 
-      {/* Badges */}
       <div className="mb-5">
-        <p className="text-xs text-gray-500 mb-3">Badges</p>
-
+        <p className="text-xs font-semibold mb-3" style={{ color: "var(--cd-text-2)" }}>
+          Badges
+        </p>
         {badges.length === 0 ? (
-          <p className="text-gray-400 text-sm">No badges yet</p>
+          <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+            No badges yet
+          </p>
         ) : (
           <div className="grid grid-cols-2 gap-3">
             {badges.map((b, i) => (
               <div
                 key={i}
-                className="
-                  p-3 rounded-xl
-                  bg-gradient-to-br from-indigo-50 to-indigo-100
-                  hover:shadow-md hover:scale-[1.03]
-                  transition-all duration-200
-                  flex items-center gap-3
-                "
+                className="p-3 rounded-xl flex items-center gap-3 hover:scale-[1.03] transition-all duration-200 cursor-pointer"
+                style={{ backgroundColor: "var(--cd-primary-subtle)" }}
               >
-                {/* Icon */}
-                <div className="text-indigo-600">{iconMap[b.icon]}</div>
-
-                {/* Text */}
+                <div style={{ color: "var(--cd-primary)" }}>{iconMap[b.icon]}</div>
                 <div>
-                  <p className="text-sm font-semibold text-indigo-700">{b.title}</p>
-                  <p className="text-xs text-gray-500">Earned</p>
+                  <p className="text-sm font-semibold" style={{ color: "var(--cd-primary-text)" }}>
+                    {b.title}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                    Earned
+                  </p>
                 </div>
               </div>
             ))}
@@ -53,14 +50,28 @@ export default function Achievements({ data }: Props) {
         )}
       </div>
 
-      {/* Certificates */}
       <div>
-        <p className="text-xs text-gray-500 mb-2">Certificates</p>
-
+        <p className="text-xs font-semibold mb-2" style={{ color: "var(--cd-text-2)" }}>
+          Certificates
+        </p>
         {certificates.map((c, i) => (
-          <div key={i} className="p-2 rounded-xl bg-gray-50 hover:bg-gray-100 transition">
-            <p className="text-sm font-medium text-gray-800">{c.title}</p>
-            <p className="text-xs text-gray-400">{c.issuer}</p>
+          <div
+            key={i}
+            className="p-2.5 rounded-xl mb-1.5 transition-colors"
+            style={{ backgroundColor: "var(--cd-surface-2)" }}
+            onMouseEnter={(e) =>
+              ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-hover)")
+            }
+            onMouseLeave={(e) =>
+              ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-surface-2)")
+            }
+          >
+            <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+              {c.title}
+            </p>
+            <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              {c.issuer}
+            </p>
           </div>
         ))}
       </div>
diff --git a/src/features/Dashboard/components/ActivityFeed.tsx b/src/features/Dashboard/components/ActivityFeed.tsx
index 33f5274..ec80a8b 100644
--- a/src/features/Dashboard/components/ActivityFeed.tsx
+++ b/src/features/Dashboard/components/ActivityFeed.tsx
@@ -10,72 +10,63 @@ export default function ActivityFeed({ activities }: Props) {
     switch (type) {
       case "completed":
         return {
-          icon: <CheckCircle size={16} />,
-          bg: "bg-emerald-50",
-          iconBg: "bg-emerald-100 text-emerald-600",
-          border: "border-emerald-200",
+          icon: <CheckCircle size={15} />,
+          color: "var(--cd-success)",
+          subtle: "var(--cd-success-subtle)",
         };
-
       case "comment":
         return {
-          icon: <MessageSquare size={16} />,
-          bg: "bg-yellow-50",
-          iconBg: "bg-yellow-100 text-yellow-600",
-          border: "border-yellow-200",
+          icon: <MessageSquare size={15} />,
+          color: "var(--cd-warning)",
+          subtle: "var(--cd-warning-subtle)",
         };
-
-      case "assigned":
       default:
         return {
-          icon: <Bell size={16} />,
-          bg: "bg-indigo-50",
-          iconBg: "bg-indigo-100 text-indigo-600",
-          border: "border-indigo-200",
+          icon: <Bell size={15} />,
+          color: "var(--cd-primary)",
+          subtle: "var(--cd-primary-subtle)",
         };
     }
   };
 
   return (
-    <div className="bg-white/70 backdrop-blur-xl p-5 rounded-2xl border border-white/40 shadow-sm">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="font-semibold text-lg">Activity Feed</h3>
-      </div>
+    <div className="cd-card">
+      <h3 className="cd-section-title">Activity Feed</h3>
 
-      <div className="space-y-3 max-h-[280px] overflow-y-auto pr-1">
+      <div className="space-y-2 max-h-[280px] overflow-y-auto pr-1">
         {activities.map((activity) => {
-          const config = getConfig(activity.type);
-
+          const cfg = getConfig(activity.type);
           return (
             <div
               key={activity.id}
-              className={`
-                flex items-start gap-3 p-3 rounded-xl border
-                ${config.bg} ${config.border}
-                hover:shadow-sm hover:-translate-y-[1px]
-                transition-all duration-200
-              `}
+              className="flex items-start gap-3 p-3 rounded-xl border transition-all duration-200 hover:-translate-y-[1px]"
+              style={{
+                backgroundColor: cfg.subtle,
+                borderColor: "var(--cd-border-subtle)",
+              }}
             >
-              {/* Icon */}
               <div
-                className={`
-                  p-2 rounded-lg flex items-center justify-center
-                  ${config.iconBg}
-                `}
+                className="p-1.5 rounded-lg flex items-center justify-center shrink-0"
+                style={{ backgroundColor: cfg.subtle, color: cfg.color }}
               >
-                {config.icon}
+                {cfg.icon}
               </div>
-
-              {/* Content */}
-              <div className="flex-1">
-                <p className="text-sm text-gray-800 font-medium break-words">{activity.text}</p>
-                <p className="text-xs text-gray-500 mt-1">{activity.time}</p>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium break-words" style={{ color: "var(--cd-text)" }}>
+                  {activity.text}
+                </p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+                  {activity.time}
+                </p>
               </div>
             </div>
           );
         })}
 
         {activities.length === 0 && (
-          <p className="text-sm text-gray-400 text-center py-4">No recent activity</p>
+          <p className="text-sm text-center py-4" style={{ color: "var(--cd-text-muted)" }}>
+            No recent activity
+          </p>
         )}
       </div>
     </div>
diff --git a/src/features/Dashboard/components/BudgetCard.tsx b/src/features/Dashboard/components/BudgetCard.tsx
index 83731ec..3ffe0a8 100644
--- a/src/features/Dashboard/components/BudgetCard.tsx
+++ b/src/features/Dashboard/components/BudgetCard.tsx
@@ -9,72 +9,105 @@ export default function BudgetCard({ data }: Props) {
   const progress = data.nextReward > 0 ? (data.points / data.nextReward) * 100 : 0;
 
   return (
-    <div className="card hover:shadow-md transition-all duration-200">
-      {/* Header */}
+    <div className="cd-card cd-card-hover">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="section-title">Rewards & Earnings</h3>
-        <Gift className="text-indigo-500" size={18} />
+        <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
+          Rewards & Earnings
+        </h3>
+        <Gift size={18} style={{ color: "var(--cd-primary)" }} />
       </div>
 
-      {/*points*/}
-      <div className="bg-indigo-50 p-4 rounded-xl mb-4 hover:scale-[1.01] transition">
-        <p className="text-xs text-gray-500">Your Points</p>
+      <div
+        className="p-4 rounded-xl mb-4 transition-transform hover:scale-[1.01]"
+        style={{ backgroundColor: "var(--cd-primary-subtle)" }}
+      >
+        <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+          Your Points
+        </p>
         <div className="flex items-center gap-2">
-          <Star className="text-indigo-500" size={18} />
-          <p className="text-3xl font-bold text-indigo-600">{data.points}</p>
+          <Star size={18} style={{ color: "var(--cd-primary)" }} />
+          <p className="text-3xl font-bold" style={{ color: "var(--cd-primary)" }}>
+            {data.points}
+          </p>
         </div>
-
-        {/* Progress */}
         <div className="mt-3">
-          <div className="w-full h-2 bg-indigo-100 rounded-full overflow-hidden">
+          <div
+            className="w-full h-1.5 rounded-full overflow-hidden"
+            style={{ backgroundColor: "var(--cd-border)" }}
+          >
             <div
-              className="h-2 bg-indigo-500 rounded-full transition-all duration-700"
-              style={{ width: `${Math.min(progress, 100)}%` }}
+              className="h-1.5 rounded-full transition-all duration-700"
+              style={{
+                width: `${Math.min(progress, 100)}%`,
+                backgroundColor: "var(--cd-primary)",
+              }}
             />
           </div>
-
-          <p className="text-xs text-gray-400 mt-1">
+          <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
             {data.nextReward - data.points} pts to next reward
           </p>
         </div>
       </div>
 
-      {/*stats*/}
       <div className="grid grid-cols-2 gap-3 mb-4">
-        {/* Stipend */}
         {data.stipend !== undefined && (
-          <div className="p-3 rounded-xl bg-green-50 hover:scale-[1.02] transition flex items-center gap-2">
-            <Wallet size={16} className="text-green-600" />
+          <div
+            className="p-3 rounded-xl flex items-center gap-2 hover:scale-[1.02] transition"
+            style={{ backgroundColor: "var(--cd-success-subtle)" }}
+          >
+            <Wallet size={15} style={{ color: "var(--cd-success)" }} />
             <div>
-              <p className="text-xs text-gray-500">Stipend</p>
-              <p className="text-sm font-semibold text-green-600">₹{data.stipend}</p>
+              <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+                Stipend
+              </p>
+              <p className="text-sm font-semibold" style={{ color: "var(--cd-success)" }}>
+                ₹{data.stipend}
+              </p>
             </div>
           </div>
         )}
-
-        {/* Rewardss */}
         {data.rewardsEarned !== undefined && (
-          <div className="p-3 rounded-xl bg-yellow-50 hover:scale-[1.02] transition flex items-center gap-2">
-            <Gift size={16} className="text-yellow-600" />
+          <div
+            className="p-3 rounded-xl flex items-center gap-2 hover:scale-[1.02] transition"
+            style={{ backgroundColor: "var(--cd-warning-subtle)" }}
+          >
+            <Gift size={15} style={{ color: "var(--cd-warning)" }} />
             <div>
-              <p className="text-xs text-gray-500">Rewards</p>
-              <p className="text-sm font-semibold text-yellow-600">{data.rewardsEarned}</p>
+              <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+                Rewards
+              </p>
+              <p className="text-sm font-semibold" style={{ color: "var(--cd-warning)" }}>
+                {data.rewardsEarned}
+              </p>
             </div>
           </div>
         )}
       </div>
 
-      {/* rewards preview */}
-      <div className="p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center">
+      <div
+        className="p-3 rounded-xl flex justify-between items-center transition-colors"
+        style={{ backgroundColor: "var(--cd-surface-2)" }}
+        onMouseEnter={(e) =>
+          ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-hover)")
+        }
+        onMouseLeave={(e) =>
+          ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-surface-2)")
+        }
+      >
         <div>
-          <p className="text-xs text-gray-500">Next Reward</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Next Reward
+          </p>
           <div className="flex items-center gap-2">
-            <Gift size={16} className="text-indigo-500" />
-            <p className="text-sm font-medium text-gray-800">Amazon Voucher</p>
+            <Gift size={15} style={{ color: "var(--cd-primary)" }} />
+            <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+              Amazon Voucher
+            </p>
           </div>
         </div>
-
-        <span className="text-xs text-indigo-500">{data.nextReward} pts</span>
+        <span className="text-xs" style={{ color: "var(--cd-primary)" }}>
+          {data.nextReward} pts
+        </span>
       </div>
     </div>
   );
diff --git a/src/features/Dashboard/components/CalendarWidget.tsx b/src/features/Dashboard/components/CalendarWidget.tsx
index 8e38e4e..140d9aa 100644
--- a/src/features/Dashboard/components/CalendarWidget.tsx
+++ b/src/features/Dashboard/components/CalendarWidget.tsx
@@ -12,146 +12,152 @@ export default function CalendarWidget({ data }: Props) {
 
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth();
-
-  // ✅ Days in month (leap-safe)
   const daysInMonth = new Date(year, month + 1, 0).getDate();
-
-  // ✅ First day alignment
   const firstDay = new Date(year, month, 1).getDay();
 
-  // ✅ Auto-select today
   useEffect(() => {
     setSelectedDay(new Date().getDate());
   }, [month, year]);
 
   const today = new Date();
-
   const isToday = (day: number) =>
     day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
 
-  // ✅ Build grid
   const dates: (number | null)[] = [
     ...Array(firstDay).fill(null),
     ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
   ];
 
-  // ✅ FIXED event mapping (month + year safe)
   const eventMap: Record<number, any[]> = {};
-
   data.events.forEach((e) => {
-    const eventDate = new Date(e.date);
-
-    if (eventDate.getMonth() === month && eventDate.getFullYear() === year) {
-      const day = eventDate.getDate();
+    const d = new Date(e.date);
+    if (d.getMonth() === month && d.getFullYear() === year) {
+      const day = d.getDate();
       if (!eventMap[day]) eventMap[day] = [];
       eventMap[day].push(e);
     }
   });
 
-  // ✅ Selected day events
   const selectedEvents = selectedDay && eventMap[selectedDay] ? eventMap[selectedDay] : [];
-
-  const changeMonth = (offset: number) => {
-    setCurrentDate(new Date(year, month + offset, 1));
-  };
-
+  const changeMonth = (offset: number) => setCurrentDate(new Date(year, month + offset, 1));
   const days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
   return (
-    <div className="bg-white/70 backdrop-blur-xl p-5 rounded-2xl border border-white/40 shadow-sm">
-      {/* Header */}
+    <div className="cd-card">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
-          <CalendarDays size={18} className="text-indigo-500" />
-          <h3 className="font-semibold text-lg">Calendar</h3>
+          <CalendarDays size={17} style={{ color: "var(--cd-primary)" }} />
+          <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
+            Calendar
+          </h3>
         </div>
-
-        <div className="flex items-center gap-2">
-          <button onClick={() => changeMonth(-1)} className="p-1 rounded-md hover:bg-gray-100">
-            <ChevronLeft size={16} />
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => changeMonth(-1)}
+            className="p-1.5 rounded-lg transition-colors"
+            style={{ color: "var(--cd-text-2)" }}
+            onMouseEnter={(e) =>
+              ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-hover)")
+            }
+            onMouseLeave={(e) =>
+              ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+            }
+          >
+            <ChevronLeft size={15} />
           </button>
-
-          <span className="text-sm font-medium text-gray-600">
-            {currentDate.toLocaleString("default", {
-              month: "long",
-              year: "numeric",
-            })}
+          <span className="text-xs font-medium px-1" style={{ color: "var(--cd-text-2)" }}>
+            {currentDate.toLocaleString("default", { month: "long", year: "numeric" })}
           </span>
-
-          <button onClick={() => changeMonth(1)} className="p-1 rounded-md hover:bg-gray-100">
-            <ChevronRight size={16} />
+          <button
+            onClick={() => changeMonth(1)}
+            className="p-1.5 rounded-lg transition-colors"
+            style={{ color: "var(--cd-text-2)" }}
+            onMouseEnter={(e) =>
+              ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-hover)")
+            }
+            onMouseLeave={(e) =>
+              ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+            }
+          >
+            <ChevronRight size={15} />
           </button>
         </div>
       </div>
 
-      {/* Weekdays */}
-      <div className="grid grid-cols-7 text-xs text-gray-400 mb-2">
+      <div className="grid grid-cols-7 text-xs mb-2" style={{ color: "var(--cd-text-muted)" }}>
         {days.map((d) => (
-          <div key={d} className="text-center">
+          <div key={d} className="text-center font-medium">
             {d}
           </div>
         ))}
       </div>
 
-      {/* Dates */}
-      <div className="grid grid-cols-7 gap-1 sm:gap-2">
+      <div className="grid grid-cols-7 gap-1">
         {dates.map((d, i) => {
           if (!d) return <div key={i} />;
-
           const hasEvents = eventMap[d];
+          const isSelected = selectedDay === d;
+          const isTodayDay = isToday(d);
 
           return (
             <div
               key={i}
               onClick={() => setSelectedDay(d)}
-              className={`
-                relative h-8 sm:h-10 text-xs sm:text-sm flex items-center justify-center rounded-xl
-                cursor-pointer transition-all duration-200
-
-                ${
-                  selectedDay === d
-                    ? "bg-indigo-600 text-white shadow-md"
-                    : isToday(d)
-                      ? "bg-indigo-500 text-white"
-                      : hasEvents
-                        ? "bg-yellow-50 text-yellow-700 hover:bg-yellow-100"
-                        : "bg-gray-50 text-gray-600 hover:bg-gray-100"
-                }
-              `}
+              className="relative h-8 sm:h-9 text-xs flex items-center justify-center rounded-lg cursor-pointer transition-all duration-150"
+              style={{
+                backgroundColor: isSelected
+                  ? "var(--cd-primary)"
+                  : isTodayDay
+                    ? "var(--cd-primary-subtle)"
+                    : hasEvents
+                      ? "var(--cd-warning-subtle)"
+                      : "transparent",
+                color: isSelected
+                  ? "#ffffff"
+                  : isTodayDay
+                    ? "var(--cd-primary-text)"
+                    : hasEvents
+                      ? "var(--cd-warning)"
+                      : "var(--cd-text)",
+              }}
             >
               {d}
-
-              {/* Event dot */}
-              {hasEvents && (
-                <span className="absolute bottom-1 w-1.5 h-1.5 bg-yellow-500 rounded-full" />
+              {hasEvents && !isSelected && (
+                <span
+                  className="absolute bottom-0.5 w-1 h-1 rounded-full"
+                  style={{ backgroundColor: "var(--cd-warning)" }}
+                />
               )}
             </div>
           );
         })}
       </div>
 
-      {/* Selected Day Events */}
-      <div className="mt-5">
-        <p className="text-sm font-medium mb-2">
+      <div className="mt-4">
+        <p className="text-xs font-medium mb-2" style={{ color: "var(--cd-text-2)" }}>
           {selectedDay ? `Events on ${selectedDay}` : "Select a date"}
         </p>
-
         {selectedDay && selectedEvents.length === 0 && (
-          <p className="text-xs text-gray-400">No events for this day</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+            No events for this day
+          </p>
         )}
-
         {selectedEvents.map((e, i) => (
           <div
             key={i}
-            className="
-              flex items-center gap-2 p-2 mb-2
-              rounded-lg bg-gray-50 hover:bg-yellow-50
-              transition
-            "
+            className="flex items-center gap-2 p-2 mb-1.5 rounded-lg transition-colors"
+            style={{ backgroundColor: "var(--cd-surface-2)" }}
           >
-            <span className="w-2 h-2 rounded-full bg-yellow-500" />
-            <span className="text-xs text-gray-500">{e.time}</span>
-            <span className="text-sm text-gray-800 break-words">{e.title}</span>
+            <span
+              className="w-1.5 h-1.5 rounded-full shrink-0"
+              style={{ backgroundColor: "var(--cd-warning)" }}
+            />
+            <span className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              {e.time}
+            </span>
+            <span className="text-xs font-medium" style={{ color: "var(--cd-text)" }}>
+              {e.title}
+            </span>
           </div>
         ))}
       </div>
diff --git a/src/features/Dashboard/components/CommunityStats.tsx b/src/features/Dashboard/components/CommunityStats.tsx
index cb8ba16..a376cb3 100644
--- a/src/features/Dashboard/components/CommunityStats.tsx
+++ b/src/features/Dashboard/components/CommunityStats.tsx
@@ -9,67 +9,64 @@ export default function CommunityStatsCard({ data }: Props) {
     data.totalMembers > 0 ? Math.round((data.activeMembers / data.totalMembers) * 100) : 0;
 
   return (
-    <div className="card hover:shadow-md transition">
-      {/* Header */}
-      <h3 className="section-title">Community Insights</h3>
+    <div className="cd-card cd-card-hover">
+      <h3 className="cd-section-title">Community Insights</h3>
 
-      {/* Stats */}
       <div className="grid grid-cols-2 gap-3 mb-4">
-        {/* Members */}
         <div
-          className="
-            p-3 rounded-xl bg-gray-50 cursor-pointer
-            hover:bg-gray-100 hover:-translate-y-[1px] hover:shadow-sm
-            transition
-          "
+          className="cd-metric cursor-pointer hover:-translate-y-[1px] transition-all"
           onClick={() => alert("View members")}
         >
-          <p className="text-xs text-gray-500">Members</p>
-          <p className="text-lg font-semibold text-gray-800">{data.totalMembers}</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Members
+          </p>
+          <p className="text-lg font-semibold" style={{ color: "var(--cd-text)" }}>
+            {data.totalMembers}
+          </p>
         </div>
 
-        {/* Active members */}
         <div
-          className="
-            p-3 rounded-xl bg-emerald-50 cursor-pointer
-            hover:bg-emerald-100 hover:-translate-y-[1px] hover:shadow-sm
-            transition
-          "
+          className="p-3 rounded-xl cursor-pointer hover:-translate-y-[1px] transition-all"
+          style={{ backgroundColor: "var(--cd-success-subtle)" }}
           onClick={() => alert("View active users")}
         >
-          <p className="text-xs text-gray-500">Active</p>
-          <p className="text-lg font-semibold text-emerald-600">{data.activeMembers}</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Active
+          </p>
+          <p className="text-lg font-semibold" style={{ color: "var(--cd-success)" }}>
+            {data.activeMembers}
+          </p>
         </div>
       </div>
 
-      {/* Engagement */}
       <div className="mb-3">
-        <div className="flex justify-between text-xs text-gray-500 mb-1">
+        <div className="flex justify-between text-xs mb-1" style={{ color: "var(--cd-text-2)" }}>
           <span>Engagement</span>
           <span>{activityPercent}%</span>
         </div>
-
-        <div className="w-full h-2 bg-gray-100 rounded-full">
+        <div
+          className="w-full h-1.5 rounded-full overflow-hidden"
+          style={{ backgroundColor: "var(--cd-border)" }}
+        >
           <div
-            className="h-2 bg-emerald-500 rounded-full transition-all duration-700"
-            style={{ width: `${activityPercent}%` }}
+            className="h-1.5 rounded-full transition-all duration-700"
+            style={{ width: `${activityPercent}%`, backgroundColor: "var(--cd-success)" }}
           />
         </div>
       </div>
 
-      {/* Rank */}
       {data.rank !== undefined && (
         <div
-          className="
-            mt-3 p-3 rounded-xl bg-indigo-50 cursor-pointer
-            flex justify-between items-center
-            hover:bg-indigo-100 hover:-translate-y-[1px] hover:shadow-sm
-            transition
-          "
+          className="mt-3 p-3 rounded-xl flex justify-between items-center cursor-pointer hover:-translate-y-[1px] transition-all"
+          style={{ backgroundColor: "var(--cd-primary-subtle)" }}
           onClick={() => alert("View leaderboard")}
         >
-          <span className="text-xs text-gray-500">Your Rank</span>
-          <span className="font-semibold text-indigo-600">#{data.rank}</span>
+          <span className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Your Rank
+          </span>
+          <span className="font-semibold" style={{ color: "var(--cd-primary)" }}>
+            #{data.rank}
+          </span>
         </div>
       )}
     </div>
diff --git a/src/features/Dashboard/components/IssuesPanel.tsx b/src/features/Dashboard/components/IssuesPanel.tsx
index 6bfc97a..e5b4679 100644
--- a/src/features/Dashboard/components/IssuesPanel.tsx
+++ b/src/features/Dashboard/components/IssuesPanel.tsx
@@ -7,86 +7,82 @@ interface Props {
 
 export default function IssuesPanel({ data }: Props) {
   const total = data.open + data.resolved;
-
   const resolvedPercent = total > 0 ? Math.round((data.resolved / total) * 100) : 0;
-
   const hasIssues = data.open > 0;
 
   return (
-    <div className="card hover:shadow-md transition">
-      {/* Header */}
-      <h3 className="section-title">Issues</h3>
+    <div className="cd-card cd-card-hover">
+      <h3 className="cd-section-title">Issues</h3>
 
-      {/* Stats */}
       <div className="grid grid-cols-2 gap-3 mb-4">
-        {/* Open */}
         <div
-          className="
-            p-3 rounded-xl bg-red-50 border border-red-100
-            flex items-center gap-2
-            hover:bg-red-100 hover:shadow-sm hover:-translate-y-[1px]
-            transition cursor-pointer
-          "
+          className="p-3 rounded-xl flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-[1px]"
+          style={{
+            backgroundColor: "var(--cd-danger-subtle)",
+            border: "1px solid var(--cd-border-subtle)",
+          }}
           onClick={() => alert("View open issues")}
         >
-          <AlertCircle size={18} className="text-red-600" />
-
+          <AlertCircle size={17} style={{ color: "var(--cd-danger)" }} />
           <div>
-            <p className="text-xs text-gray-500">Open</p>
-            <p className="text-lg font-semibold text-red-600">{data.open}</p>
+            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+              Open
+            </p>
+            <p className="text-lg font-semibold" style={{ color: "var(--cd-danger)" }}>
+              {data.open}
+            </p>
           </div>
         </div>
 
-        {/* Resolved*/}
         <div
-          className="
-            p-3 rounded-xl bg-emerald-50 border border-emerald-100
-            flex items-center gap-2
-            hover:bg-emerald-100 hover:shadow-sm hover:-translate-y-[1px]
-            transition cursor-pointer
-          "
+          className="p-3 rounded-xl flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-[1px]"
+          style={{
+            backgroundColor: "var(--cd-success-subtle)",
+            border: "1px solid var(--cd-border-subtle)",
+          }}
           onClick={() => alert("View resolved issues")}
         >
-          <CheckCircle size={18} className="text-emerald-600" />
-
+          <CheckCircle size={17} style={{ color: "var(--cd-success)" }} />
           <div>
-            <p className="text-xs text-gray-500">Resolved</p>
-            <p className="text-lg font-semibold text-emerald-600">{data.resolved}</p>
+            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+              Resolved
+            </p>
+            <p className="text-lg font-semibold" style={{ color: "var(--cd-success)" }}>
+              {data.resolved}
+            </p>
           </div>
         </div>
       </div>
 
-      {/* Progress */}
       <div className="mb-3">
-        <div className="flex justify-between text-xs text-gray-500 mb-1">
+        <div className="flex justify-between text-xs mb-1" style={{ color: "var(--cd-text-2)" }}>
           <span>Resolution Progress</span>
           <span>{resolvedPercent}%</span>
         </div>
-
-        <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+        <div
+          className="w-full h-1.5 rounded-full overflow-hidden"
+          style={{ backgroundColor: "var(--cd-border)" }}
+        >
           <div
-            className="h-2 bg-indigo-500 rounded-full transition-all duration-700"
-            style={{ width: `${resolvedPercent}%` }}
+            className="h-1.5 rounded-full transition-all duration-700"
+            style={{
+              width: `${resolvedPercent}%`,
+              backgroundColor: "var(--cd-primary)",
+            }}
           />
         </div>
       </div>
 
-      {/* Insights*/}
       <div
-        className={`
-          mt-4 p-3 rounded-xl border text-sm
-          flex items-start gap-2 cursor-pointer transition
-
-          ${
-            hasIssues
-              ? "bg-yellow-50 border-yellow-100 text-yellow-700 hover:bg-yellow-100"
-              : "bg-emerald-50 border-emerald-100 text-emerald-700 hover:bg-emerald-100"
-          }
-        `}
+        className="mt-4 p-3 rounded-xl border text-sm flex items-start gap-2 cursor-pointer transition-colors"
+        style={{
+          backgroundColor: hasIssues ? "var(--cd-warning-subtle)" : "var(--cd-success-subtle)",
+          borderColor: "var(--cd-border-subtle)",
+          color: hasIssues ? "var(--cd-warning)" : "var(--cd-success)",
+        }}
         onClick={() => alert("Review issues")}
       >
-        <AlertTriangle size={16} className="mt-[2px]" />
-
+        <AlertTriangle size={15} className="mt-[2px]" />
         <span>
           {hasIssues
             ? `${data.open} issue(s) need attention`
diff --git a/src/features/Dashboard/components/PerformanceStats.tsx b/src/features/Dashboard/components/PerformanceStats.tsx
index 8a84775..7cb73d1 100644
--- a/src/features/Dashboard/components/PerformanceStats.tsx
+++ b/src/features/Dashboard/components/PerformanceStats.tsx
@@ -5,7 +5,6 @@ interface Props {
   data: Performance;
 }
 
-// mock data
 const trendData = [
   { day: "Mon", tasks: 2 },
   { day: "Tue", tasks: 4 },
@@ -18,39 +17,46 @@ const trendData = [
 
 export default function PerformanceStats({ data }: Props) {
   return (
-    <div className="card">
-      <h3 className="section-title">Performance Overview</h3>
+    <div className="cd-card">
+      <h3 className="cd-section-title">Performance Overview</h3>
 
-      {/* Metrics */}
-      <div className="grid grid-cols-2 gap-4 mb-5">
-        <div className="p-3 bg-gray-50 rounded-xl">
-          <p className="text-xs text-gray-500">Completion Rate</p>
-          <p className="text-xl font-semibold text-green-600">{data.completionRate}%</p>
-        </div>
-
-        <div className="p-3 bg-gray-50 rounded-xl">
-          <p className="text-xs text-gray-500">Avg Completion</p>
-          <p className="text-xl font-semibold text-indigo-600">{data.avgTime}</p>
-        </div>
-
-        <div className="p-3 bg-gray-50 rounded-xl">
-          <p className="text-xs text-gray-500">Streak</p>
-          <p className="text-xl font-semibold text-orange-500">{data.streak} days 🔥</p>
-        </div>
-
-        <div className="p-3 bg-gray-50 rounded-xl">
-          <p className="text-xs text-gray-500">Weekly Done</p>
-          <p className="text-xl font-semibold text-blue-600">{data.weeklyCompleted}</p>
-        </div>
+      <div className="grid grid-cols-2 gap-3 mb-5">
+        {[
+          { label: "Completion Rate", value: `${data.completionRate}%`, color: "var(--cd-success)" },
+          { label: "Avg Completion", value: data.avgTime, color: "var(--cd-primary)" },
+          { label: "Streak", value: `${data.streak} days 🔥`, color: "var(--cd-warning)" },
+          { label: "Weekly Done", value: data.weeklyCompleted, color: "var(--cd-accent)" },
+        ].map((m) => (
+          <div key={m.label} className="cd-metric">
+            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+              {m.label}
+            </p>
+            <p className="text-xl font-semibold" style={{ color: m.color }}>
+              {m.value}
+            </p>
+          </div>
+        ))}
       </div>
 
-      {/* Chart */}
       <div className="h-40">
         <ResponsiveContainer width="100%" height="100%">
           <LineChart data={trendData}>
-            <XAxis dataKey="day" fontSize={12} />
-            <Tooltip />
-            <Line type="monotone" dataKey="tasks" stroke="#6366f1" strokeWidth={3} dot={{ r: 3 }} />
+            <XAxis dataKey="day" fontSize={11} stroke="var(--cd-text-muted)" />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "var(--cd-surface)",
+                border: "1px solid var(--cd-border)",
+                borderRadius: "0.5rem",
+                color: "var(--cd-text)",
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="tasks"
+              stroke="var(--cd-primary)"
+              strokeWidth={2.5}
+              dot={{ r: 3, fill: "var(--cd-primary)" }}
+            />
           </LineChart>
         </ResponsiveContainer>
       </div>
diff --git a/src/features/Dashboard/components/ProductivityScore.tsx b/src/features/Dashboard/components/ProductivityScore.tsx
index eb9cd6b..2ba49bb 100644
--- a/src/features/Dashboard/components/ProductivityScore.tsx
+++ b/src/features/Dashboard/components/ProductivityScore.tsx
@@ -9,62 +9,68 @@ export default function ProductivityScore({ data }: Props) {
   const score = calculateProductivityScore(data);
 
   return (
-    <div className="card hover:shadow-md transition">
-      {/* Header */}
-      <h3 className="section-title">Productivity Score</h3>
+    <div className="cd-card cd-card-hover">
+      <h3 className="cd-section-title">Productivity Score</h3>
 
       <div className="flex justify-center mb-4">
         <div className="relative w-24 h-24 flex items-center justify-center group cursor-pointer">
-          {/* Yellow activity ring */}
-          <div className="absolute inset-0 rounded-full border-4 border-yellow-300 opacity-40 group-hover:scale-105 transition" />
-
-          <div className="w-full h-full rounded-full border-4 border-indigo-500 flex items-center justify-center shadow-inner group-hover:shadow-md transition">
-            <span className="text-2xl font-bold text-indigo-600">{score}</span>
+          <div
+            className="absolute inset-0 rounded-full border-4 opacity-30 group-hover:scale-105 transition"
+            style={{ borderColor: "var(--cd-warning)" }}
+          />
+          <div
+            className="w-full h-full rounded-full border-4 flex items-center justify-center group-hover:shadow-md transition"
+            style={{ borderColor: "var(--cd-primary)" }}
+          >
+            <span className="text-2xl font-bold" style={{ color: "var(--cd-primary)" }}>
+              {score}
+            </span>
           </div>
         </div>
       </div>
 
-      {/* Stats */}
       <div className="grid grid-cols-2 gap-3 mb-3">
-        {/* Completion */}
         <div
-          className="
-            p-3 rounded-xl bg-indigo-50 cursor-pointer
-            hover:bg-indigo-100 hover:-translate-y-[1px] hover:shadow-sm
-            transition
-          "
+          className="p-3 rounded-xl cursor-pointer hover:-translate-y-[1px] transition-all"
+          style={{ backgroundColor: "var(--cd-primary-subtle)" }}
           onClick={() => alert("View completion details")}
         >
-          <p className="text-xs text-gray-500">Completion</p>
-          <p className="text-sm font-semibold text-indigo-600">{data.completionRate}%</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Completion
+          </p>
+          <p className="text-sm font-semibold" style={{ color: "var(--cd-primary)" }}>
+            {data.completionRate}%
+          </p>
         </div>
 
-        {/* Streaks */}
         <div
-          className="
-            p-3 rounded-xl bg-yellow-50 cursor-pointer
-            hover:bg-yellow-100 hover:-translate-y-[1px] hover:shadow-sm
-            transition
-          "
+          className="p-3 rounded-xl cursor-pointer hover:-translate-y-[1px] transition-all"
+          style={{ backgroundColor: "var(--cd-warning-subtle)" }}
           onClick={() => alert("View streak details")}
         >
-          <p className="text-xs text-gray-500">Streak</p>
-          <p className="text-sm font-semibold text-yellow-600">{data.streak} days</p>
+          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            Streak
+          </p>
+          <p className="text-sm font-semibold" style={{ color: "var(--cd-warning)" }}>
+            {data.streak} days
+          </p>
         </div>
       </div>
 
-      {/* Weekly Progress */}
-      <div className="mb-3">
-        <div className="flex justify-between text-xs text-gray-500 mb-1">
+      <div>
+        <div className="flex justify-between text-xs mb-1" style={{ color: "var(--cd-text-2)" }}>
           <span>Weekly Tasks</span>
           <span>{data.weeklyCompleted}</span>
         </div>
-
-        <div className="w-full h-2 bg-gray-100 rounded-full">
+        <div
+          className="w-full h-1.5 rounded-full overflow-hidden"
+          style={{ backgroundColor: "var(--cd-border)" }}
+        >
           <div
-            className="h-2 bg-indigo-500 rounded-full transition-all duration-700"
+            className="h-1.5 rounded-full transition-all duration-700"
             style={{
               width: `${Math.min(data.weeklyCompleted * 10, 100)}%`,
+              backgroundColor: "var(--cd-primary)",
             }}
           />
         </div>
diff --git a/src/features/Dashboard/components/RecentTasks.tsx b/src/features/Dashboard/components/RecentTasks.tsx
index 3e4f0ab..ca60540 100644
--- a/src/features/Dashboard/components/RecentTasks.tsx
+++ b/src/features/Dashboard/components/RecentTasks.tsx
@@ -5,87 +5,107 @@ interface Props {
   tasks: Task[];
 }
 
-const getStatusStyle = (status: Task["status"]) => {
+const getStatusStyle = (status: Task["status"]): { bg: string; color: string } => {
   switch (status) {
     case "completed":
-      return "badge-success";
+      return { bg: "var(--cd-success-subtle)", color: "var(--cd-success)" };
     case "in-progress":
-      return "badge-warning";
+      return { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)" };
     default:
-      return "badge-default";
+      return { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" };
   }
 };
 
-const formatDeadline = (date: string) => {
-  const d = new Date(date);
-  return d.toLocaleDateString(undefined, {
-    day: "numeric",
-    month: "short",
-  });
-};
+const formatDeadline = (date: string) =>
+  new Date(date).toLocaleDateString(undefined, { day: "numeric", month: "short" });
 
 export default function RecentTasks({ tasks }: Props) {
   if (!tasks.length) {
     return (
-      <div className="card card-hover w-full">
-        <p className="text-gray-400 text-sm">No tasks assigned</p>
+      <div className="cd-card cd-card-hover w-full">
+        <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+          No tasks assigned
+        </p>
       </div>
     );
   }
 
   return (
-    <div className="card card-hover w-full">
-      {/* Header */}
+    <div className="cd-card cd-card-hover w-full">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
-        <h3 className="section-title">Recent Tasks</h3>
-        <button className="text-sm text-indigo-500 hover:underline self-start sm:self-auto">
+        <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
+          Recent Tasks
+        </h3>
+        <button className="text-xs font-medium self-start sm:self-auto" style={{ color: "var(--cd-primary)" }}>
           View All
         </button>
       </div>
 
-      {/* Task List */}
-      <div className="space-y-3">
-        {tasks.slice(0, 8).map((task) => (
-          <div
-            key={task.id}
-            className="
-              flex flex-col sm:flex-row sm:items-center sm:justify-between
-              gap-3 p-3 rounded-xl hover:bg-gray-50 transition
-            "
-          >
-            {/* LEFT */}
-            <div className="min-w-0">
-              <p className="text-sm font-medium text-gray-800 break-words">{task.title}</p>
-              <p className="text-xs text-gray-400">Due {formatDeadline(task.deadline)}</p>
-            </div>
-
-            {/* RIGHT */}
-            <div className="flex flex-wrap items-center gap-2 sm:gap-3 justify-between sm:justify-end w-full sm:w-auto">
-              {/* Status */}
-              <span
-                className={`
-                  text-xs px-2 py-1 rounded-full whitespace-nowrap
-                  ${getStatusStyle(task.status)}
-                `}
-              >
-                {task.status}
-              </span>
-
-              {/* Actions */}
-              <div className="flex gap-2">
-                <button className="p-2 rounded-lg hover:bg-gray-100 transition">
-                  <Eye size={16} />
-                </button>
+      <div className="space-y-2">
+        {tasks.slice(0, 8).map((task) => {
+          const s = getStatusStyle(task.status);
+          return (
+            <div
+              key={task.id}
+              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded-xl transition-colors"
+              onMouseEnter={(e) =>
+                ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-hover)")
+              }
+              onMouseLeave={(e) =>
+                ((e.currentTarget as HTMLDivElement).style.backgroundColor = "transparent")
+              }
+            >
+              <div className="min-w-0">
+                <p className="text-sm font-medium break-words" style={{ color: "var(--cd-text)" }}>
+                  {task.title}
+                </p>
+                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                  Due {formatDeadline(task.deadline)}
+                </p>
+              </div>
 
-                {task.status !== "completed" && (
-                  <button className="p-2 rounded-lg hover:bg-green-100 text-green-600 transition">
-                    <Check size={16} />
+              <div className="flex flex-wrap items-center gap-2 justify-between sm:justify-end w-full sm:w-auto">
+                <span
+                  className="cd-badge text-xs"
+                  style={{ backgroundColor: s.bg, color: s.color }}
+                >
+                  {task.status}
+                </span>
+                <div className="flex gap-1">
+                  <button
+                    className="p-1.5 rounded-lg transition-colors"
+                    style={{ color: "var(--cd-text-2)" }}
+                    onMouseEnter={(e) =>
+                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                        "var(--cd-hover)")
+                    }
+                    onMouseLeave={(e) =>
+                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+                    }
+                  >
+                    <Eye size={15} />
                   </button>
-                )}
+                  {task.status !== "completed" && (
+                    <button
+                      className="p-1.5 rounded-lg transition-colors"
+                      style={{ color: "var(--cd-success)" }}
+                      onMouseEnter={(e) =>
+                        ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                          "var(--cd-success-subtle)")
+                      }
+                      onMouseLeave={(e) =>
+                        ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                          "transparent")
+                      }
+                    >
+                      <Check size={15} />
+                    </button>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );
diff --git a/src/features/Dashboard/components/SmartReminders.tsx b/src/features/Dashboard/components/SmartReminders.tsx
index 80b31a5..badc5b8 100644
--- a/src/features/Dashboard/components/SmartReminders.tsx
+++ b/src/features/Dashboard/components/SmartReminders.tsx
@@ -8,37 +8,39 @@ interface Props {
 
 export default function SmartReminders({ tasks }: Props) {
   const reminders = getSmartReminders(tasks);
-
   const urgent = reminders.filter((r) => r.type === "urgent");
   const upcoming = reminders.filter((r) => r.type === "upcoming");
 
   return (
-    <div className="bg-white/70 backdrop-blur-xl p-5 rounded-2xl border border-white/40 shadow-sm">
-      {/* Header */}
-      <h3 className="font-semibold text-lg mb-4">Smart Reminders</h3>
+    <div className="cd-card">
+      <h3 className="cd-section-title">Smart Reminders</h3>
 
-      {/* 🔴 URGENT */}
       {urgent.length > 0 && (
         <div className="mb-4">
-          <p className="text-xs text-red-500 mb-2 font-medium">Urgent</p>
-
+          <p className="text-xs font-semibold mb-2" style={{ color: "var(--cd-danger)" }}>
+            Urgent
+          </p>
           <div className="space-y-2">
             {urgent.map((r, i) => (
               <div
                 key={i}
-                className="
-                  flex items-start gap-3 p-3 rounded-xl
-                  bg-red-50 border border-red-100
-                  hover:bg-red-100 transition cursor-pointer
-                "
+                className="flex items-start gap-3 p-3 rounded-xl cursor-pointer transition-colors"
+                style={{ backgroundColor: "var(--cd-danger-subtle)" }}
+                onMouseEnter={(e) =>
+                  ((e.currentTarget as HTMLDivElement).style.filter = "brightness(0.95)")
+                }
+                onMouseLeave={(e) =>
+                  ((e.currentTarget as HTMLDivElement).style.filter = "none")
+                }
               >
-                <div className="text-red-600 mt-[2px]">
-                  <AlertTriangle size={16} />
-                </div>
-
+                <AlertTriangle size={15} className="mt-[2px] shrink-0" style={{ color: "var(--cd-danger)" }} />
                 <div>
-                  <p className="text-sm font-medium text-gray-800 break-words">{r.title}</p>
-                  <p className="text-xs text-red-600">{r.label}</p>
+                  <p className="text-sm font-medium break-words" style={{ color: "var(--cd-text)" }}>
+                    {r.title}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--cd-danger)" }}>
+                    {r.label}
+                  </p>
                 </div>
               </div>
             ))}
@@ -46,28 +48,32 @@ export default function SmartReminders({ tasks }: Props) {
         </div>
       )}
 
-      {/* 🟡 UPCOMING */}
       {upcoming.length > 0 && (
         <div>
-          <p className="text-xs text-yellow-600 mb-2 font-medium">Upcoming</p>
-
+          <p className="text-xs font-semibold mb-2" style={{ color: "var(--cd-warning)" }}>
+            Upcoming
+          </p>
           <div className="space-y-2">
             {upcoming.map((r, i) => (
               <div
                 key={i}
-                className="
-                  flex items-start gap-3 p-3 rounded-xl
-                  bg-yellow-50 border border-yellow-100
-                  hover:bg-yellow-100 transition cursor-pointer
-                "
+                className="flex items-start gap-3 p-3 rounded-xl cursor-pointer transition-colors"
+                style={{ backgroundColor: "var(--cd-warning-subtle)" }}
+                onMouseEnter={(e) =>
+                  ((e.currentTarget as HTMLDivElement).style.filter = "brightness(0.95)")
+                }
+                onMouseLeave={(e) =>
+                  ((e.currentTarget as HTMLDivElement).style.filter = "none")
+                }
               >
-                <div className="text-yellow-600 mt-[2px]">
-                  <Clock size={16} />
-                </div>
-
+                <Clock size={15} className="mt-[2px] shrink-0" style={{ color: "var(--cd-warning)" }} />
                 <div>
-                  <p className="text-sm font-medium text-gray-800">{r.title}</p>
-                  <p className="text-xs text-yellow-700">{r.label}</p>
+                  <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+                    {r.title}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--cd-warning)" }}>
+                    {r.label}
+                  </p>
                 </div>
               </div>
             ))}
@@ -75,9 +81,10 @@ export default function SmartReminders({ tasks }: Props) {
         </div>
       )}
 
-      {/* Empty */}
       {reminders.length === 0 && (
-        <p className="text-sm text-gray-400 text-center py-4">🎉 You're all caught up!</p>
+        <p className="text-sm text-center py-4" style={{ color: "var(--cd-text-muted)" }}>
+          🎉 You're all caught up!
+        </p>
       )}
     </div>
   );
diff --git a/src/features/Dashboard/components/SummaryCard.tsx b/src/features/Dashboard/components/SummaryCard.tsx
index 4f3ecbd..661797b 100644
--- a/src/features/Dashboard/components/SummaryCard.tsx
+++ b/src/features/Dashboard/components/SummaryCard.tsx
@@ -4,54 +4,34 @@ interface Props {
   color?: "green" | "red" | "blue" | "yellow" | "purple";
 }
 
-const colorMap = {
-  green: {
-    text: "text-green-600",
-    border: "border-green-500",
-    bg: "bg-green-50",
-  },
-  red: {
-    text: "text-red-600",
-    border: "border-red-500",
-    bg: "bg-red-50",
-  },
-  blue: {
-    text: "text-blue-600",
-    border: "border-blue-500",
-    bg: "bg-blue-50",
-  },
-  yellow: {
-    text: "text-yellow-600",
-    border: "border-yellow-500",
-    bg: "bg-yellow-50",
-  },
-  purple: {
-    text: "text-purple-600",
-    border: "border-purple-500",
-    bg: "bg-purple-50",
-  },
+const borderMap = {
+  green: "border-l-[var(--cd-success)]",
+  red: "border-l-[var(--cd-danger)]",
+  blue: "border-l-[var(--cd-primary)]",
+  yellow: "border-l-[var(--cd-warning)]",
+  purple: "border-l-[var(--cd-secondary)]",
 };
 
-export default function SummaryCard({ title, value, color = "blue" }: Props) {
-  const styles = colorMap[color];
+const textMap = {
+  green: "var(--cd-success)",
+  red: "var(--cd-danger)",
+  blue: "var(--cd-primary)",
+  yellow: "var(--cd-warning)",
+  purple: "var(--cd-secondary)",
+};
 
+export default function SummaryCard({ title, value, color = "blue" }: Props) {
   return (
     <div
-      className={`
-        relative
-        flex items-center gap-4
-        p-5
-        rounded-2xl
-        bg-white
-        shadow-sm hover:shadow-md
-        transition
-        border-l-4 ${styles.border}
-      `}
+      className={`cd-card cd-card-hover flex items-center gap-4 border-l-4 ${borderMap[color]}`}
     >
-      {/* Content */}
       <div>
-        <p className="text-gray-500 text-sm">{title}</p>
-        <h2 className={`text-2xl font-bold ${styles.text}`}>{value}</h2>
+        <p className="text-sm" style={{ color: "var(--cd-text-2)" }}>
+          {title}
+        </p>
+        <h2 className="text-2xl font-bold" style={{ color: textMap[color] }}>
+          {value}
+        </h2>
       </div>
     </div>
   );
diff --git a/src/features/Dashboard/components/TaskOverview.tsx b/src/features/Dashboard/components/TaskOverview.tsx
index eff5d45..a27ab43 100644
--- a/src/features/Dashboard/components/TaskOverview.tsx
+++ b/src/features/Dashboard/components/TaskOverview.tsx
@@ -9,21 +9,19 @@ export default function TaskOverview({ tasks }: Props) {
   const todo = tasks.filter((t) => t.status === "todo").length;
   const inProgress = tasks.filter((t) => t.status === "in-progress").length;
   const completed = tasks.filter((t) => t.status === "completed").length;
-
   const total = tasks.length;
 
   const data = [
-    { name: "Todo", value: todo, color: "#facc15" },
-    { name: "In Progress", value: inProgress, color: "#60a5fa" },
-    { name: "Completed", value: completed, color: "#34d399" },
+    { name: "Todo", value: todo, color: "var(--cd-warning)" },
+    { name: "In Progress", value: inProgress, color: "var(--cd-primary)" },
+    { name: "Completed", value: completed, color: "var(--cd-success)" },
   ];
 
   return (
-    <div className="card hover:shadow-md transition">
-      <h3 className="section-title">Task Overview</h3>
+    <div className="cd-card cd-card-hover">
+      <h3 className="cd-section-title">Task Overview</h3>
 
       <div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
-        {/* Chart */}
         <div className="w-full max-w-[160px] h-[160px] mx-auto sm:mx-0 relative">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
@@ -34,21 +32,24 @@ export default function TaskOverview({ tasks }: Props) {
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-
-          {/* Center Label */}
           <div className="absolute inset-0 flex flex-col items-center justify-center">
-            <p className="text-sm text-gray-400">Total</p>
-            <p className="text-xl font-bold">{total}</p>
+            <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              Total
+            </p>
+            <p className="text-xl font-bold" style={{ color: "var(--cd-text)" }}>
+              {total}
+            </p>
           </div>
         </div>
 
-        {/* Legend */}
         <div className="space-y-3 w-full">
           {data.map((item) => (
-            <div key={item.name} className="flex items-center justify-between gap-2 text-sm">
-              <span className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
-              <span className="text-sm text-gray-600">{item.name}</span>
-              <span className="text-sm font-semibold ml-auto">{item.value}</span>
+            <div key={item.name} className="flex items-center gap-2 text-sm">
+              <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+              <span style={{ color: "var(--cd-text-2)" }}>{item.name}</span>
+              <span className="font-semibold ml-auto" style={{ color: "var(--cd-text)" }}>
+                {item.value}
+              </span>
             </div>
           ))}
         </div>
diff --git a/src/features/Dashboard/components/TaskRow.tsx b/src/features/Dashboard/components/TaskRow.tsx
index 6507c1f..0fc778b 100644
--- a/src/features/Dashboard/components/TaskRow.tsx
+++ b/src/features/Dashboard/components/TaskRow.tsx
@@ -12,25 +12,44 @@ export default function TaskRow({ task, urgent = false }: TaskRowProps) {
 
   return (
     <div
-      className={`
-        flex items-center justify-between
-        p-3 rounded-xl transition
-        hover:bg-gray-50
-        ${urgent ? "border-l-4 border-red-500 bg-red-50/30" : ""}
-      `}
+      className="flex items-center justify-between p-3 rounded-xl transition-colors"
+      style={{
+        borderLeft: urgent ? "3px solid var(--cd-danger)" : undefined,
+        backgroundColor: urgent ? "var(--cd-danger-subtle)" : "transparent",
+      }}
+      onMouseEnter={(e) => {
+        if (!urgent)
+          (e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-hover)";
+      }}
+      onMouseLeave={(e) => {
+        if (!urgent)
+          (e.currentTarget as HTMLDivElement).style.backgroundColor = "transparent";
+      }}
     >
-      {/* Left */}
       <div>
-        <p className="text-sm font-medium text-gray-800">{task.title || "Untitled Task"}</p>
-
-        <p className={`text-xs ${urgent ? "text-red-500" : "text-gray-400"}`}>
+        <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+          {task.title || "Untitled Task"}
+        </p>
+        <p
+          className="text-xs"
+          style={{ color: urgent ? "var(--cd-danger)" : "var(--cd-text-muted)" }}
+        >
           {formatDueLabel(task.deadline)}
         </p>
       </div>
 
-      {/* Action */}
-      <button className="p-2 rounded-lg hover:bg-green-100 text-green-600">
-        <Check size={16} />
+      <button
+        className="p-1.5 rounded-lg transition-colors"
+        style={{ color: "var(--cd-success)" }}
+        onMouseEnter={(e) =>
+          ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+            "var(--cd-success-subtle)")
+        }
+        onMouseLeave={(e) =>
+          ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+        }
+      >
+        <Check size={15} />
       </button>
     </div>
   );
diff --git a/src/features/Dashboard/components/UpcomingUrgentTasks.tsx b/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
index af3f884..5019b23 100644
--- a/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
+++ b/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
@@ -9,8 +9,10 @@ interface Props {
 export default function UpcomingUrgentTasks({ tasks }: Props) {
   if (!tasks || !Array.isArray(tasks)) {
     return (
-      <div className="bg-white p-5 rounded-2xl shadow-sm">
-        <p className="text-gray-400 text-sm">No tasks available</p>
+      <div className="cd-card">
+        <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+          No tasks available
+        </p>
       </div>
     );
   }
@@ -18,22 +20,26 @@ export default function UpcomingUrgentTasks({ tasks }: Props) {
   const { urgent, upcoming } = categorizeTasks(tasks);
 
   return (
-    <div className="bg-white p-5 rounded-2xl shadow-sm">
-      {/* Header */}
+    <div className="cd-card">
       <div className="flex justify-between items-center mb-4">
-        <h3 className="font-semibold text-lg">Upcoming & Urgent Tasks</h3>
-
-        <button className="text-sm text-indigo-500 hover:underline">View All</button>
+        <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
+          Upcoming & Urgent Tasks
+        </h3>
+        <button className="text-xs font-medium" style={{ color: "var(--cd-primary)" }}>
+          View All
+        </button>
       </div>
 
-      {/*Urgent Section */}
       <div className="mb-5">
-        <p className="text-sm font-medium text-red-500 mb-2 break-words">Urgent Tasks</p>
-
+        <p className="text-xs font-semibold mb-2" style={{ color: "var(--cd-danger)" }}>
+          Urgent Tasks
+        </p>
         {urgent.length === 0 ? (
-          <p className="text-gray-400 text-sm">No urgent tasks</p>
+          <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+            No urgent tasks
+          </p>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-2">
             {urgent.slice(0, 4).map((task) => (
               <TaskRow key={task.id} task={task} urgent />
             ))}
@@ -41,14 +47,16 @@ export default function UpcomingUrgentTasks({ tasks }: Props) {
         )}
       </div>
 
-      {/* Upcoming Section */}
       <div>
-        <p className="text-sm font-medium text-gray-500 mb-2 break-words">Upcoming Tasks</p>
-
+        <p className="text-xs font-semibold mb-2" style={{ color: "var(--cd-text-2)" }}>
+          Upcoming Tasks
+        </p>
         {upcoming.length === 0 ? (
-          <p className="text-gray-400 text-sm">No upcoming tasks</p>
+          <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+            No upcoming tasks
+          </p>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-2">
             {upcoming.slice(0, 4).map((task) => (
               <TaskRow key={task.id} task={task} />
             ))}
diff --git a/src/features/Dashboard/layouts/DashboardLayout.tsx b/src/features/Dashboard/layouts/DashboardLayout.tsx
index 463a353..fb6c506 100644
--- a/src/features/Dashboard/layouts/DashboardLayout.tsx
+++ b/src/features/Dashboard/layouts/DashboardLayout.tsx
@@ -4,19 +4,9 @@ interface Props {
 
 export default function DashboardLayout({ children }: Props) {
   return (
-    <div className="relative min-h-screen w-full overflow-x-hidden">
-      {/* 🌈 Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-yellow-50" />
-
-      {/* ✨ Glow Effects */}
-      <div className="pointer-events-none absolute -top-32 -left-32 w-96 h-96 bg-indigo-200 rounded-full blur-3xl opacity-20" />
-      <div className="pointer-events-none absolute bottom-0 right-0 w-96 h-96 bg-yellow-200 rounded-full blur-3xl opacity-20" />
-
-      {/* 📦 Content Wrapper */}
+    <div className="relative min-h-screen w-full overflow-x-hidden cd-page">
       <div className="relative w-full flex justify-center">
-        {/* 📏 Max Width Container */}
         <main className="w-full max-w-[1400px] flex-1 px-4 sm:px-6 lg:px-8 py-4 sm:py-5 md:py-6">
-          {/* 🚀 FORCE FULL WIDTH CONTENT */}
           <div className="w-full">{children}</div>
         </main>
       </div>
diff --git a/src/features/Dashboard/v1/Pages/DashboardPage.tsx b/src/features/Dashboard/v1/Pages/DashboardPage.tsx
index 4fb81e8..5c0d05b 100644
--- a/src/features/Dashboard/v1/Pages/DashboardPage.tsx
+++ b/src/features/Dashboard/v1/Pages/DashboardPage.tsx
@@ -21,12 +21,22 @@ export default function DashboardPage() {
   const { data, isLoading, error } = useDashboardData();
 
   if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
+    return (
+      <div
+        className="flex items-center justify-center min-h-screen"
+        style={{ color: "var(--cd-text-2)" }}
+      >
+        Loading...
+      </div>
+    );
   }
 
   if (error || !data) {
     return (
-      <div className="flex items-center justify-center min-h-screen text-red-500">
+      <div
+        className="flex items-center justify-center min-h-screen"
+        style={{ color: "var(--cd-danger)" }}
+      >
         Error loading dashboard
       </div>
     );
@@ -38,10 +48,15 @@ export default function DashboardPage() {
         {/* Header */}
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
           <div>
-            <h1 className="text-lg sm:text-xl md:text-2xl font-semibold text-gray-800">
+            <h1
+              className="text-lg sm:text-xl md:text-2xl font-semibold"
+              style={{ color: "var(--cd-text)" }}
+            >
               Welcome back, {data.user.name.split(" ")[0]} 👋
             </h1>
-            <p className="text-sm text-gray-500">Here’s what’s happening today</p>
+            <p className="text-sm" style={{ color: "var(--cd-text-2)" }}>
+              Here's what's happening today
+            </p>
           </div>
         </div>
 
@@ -58,7 +73,6 @@ export default function DashboardPage() {
         <div className="grid grid-cols-1 xl:grid-cols-3 gap-5 items-start w-full">
           {/* LEFT */}
           <div className="xl:col-span-2 space-y-5 w-full">
-            {/* 🔥 FIXED SECTION (NO EMPTY SPACE NOW) */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
               <TaskOverview tasks={data.tasks || []} />
               <RecentTasks tasks={data.tasks || []} />
diff --git a/src/features/Events/v1/Components/EventTable.tsx b/src/features/Events/v1/Components/EventTable.tsx
index 1225d1f..f71825b 100644
--- a/src/features/Events/v1/Components/EventTable.tsx
+++ b/src/features/Events/v1/Components/EventTable.tsx
@@ -7,109 +7,120 @@ type EventProps = {
   itemsPerPage: number;
 };
 
-const statusStyle: Record<Event["status"], string> = {
-  Live: "bg-green-100 text-green-700",
-  Upcoming: "bg-blue-100 text-blue-700",
-  Completed: "bg-gray-200 text-gray-700",
+const statusConfig: Record<Event["status"], { bg: string; color: string }> = {
+  Live: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)" },
+  Upcoming: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" },
+  Completed: { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" },
 };
 
 function EventTable({ events, itemsPerPage }: EventProps) {
   const [currentPage, setCurrentPage] = useState(1);
-
-  const totalItems = events.length;
-  const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-  const indexOfLastItem = currentPage * itemsPerPage;
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-
-  const currentItems = events.slice(indexOfFirstItem, indexOfLastItem);
-
-  const handleNext = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
-
-  const handlePrevious = () => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  };
+  const totalPages = Math.ceil(events.length / itemsPerPage);
+  const indexOfLast = currentPage * itemsPerPage;
+  const indexOfFirst = indexOfLast - itemsPerPage;
+  const currentItems = events.slice(indexOfFirst, indexOfLast);
 
   return (
-    <div className="bg-white rounded-xl border shadow-sm overflow-hidden h-[63vh] relative">
-      <table className="w-full text-sm">
-        <thead className="text-gray-500 uppercase text-xs border-b bg-gray-50">
+    <div
+      className="rounded-xl overflow-hidden h-[63vh] relative"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
+        boxShadow: "0 1px 3px var(--cd-shadow)",
+      }}
+    >
+      <table className="cd-table">
+        <thead>
           <tr>
-            <th className="px-6 py-4 text-left">Name</th>
-            <th className="px-6 py-4 text-left">Date</th>
-            <th className="px-6 py-4 text-left">Status</th>
-            <th className="px-6 py-4 text-left">Teams</th>
-            <th className="px-6 py-4 text-left">Submissions</th>
-            <th className="px-6 py-4 text-right">Actions</th>
+            <th>Name</th>
+            <th>Date</th>
+            <th>Status</th>
+            <th>Teams</th>
+            <th>Submissions</th>
+            <th className="text-right">Actions</th>
           </tr>
         </thead>
-
         <tbody>
-          {currentItems.map((event) => (
-            <tr key={event.id} className="border-b last:border-none hover:bg-gray-50 transition">
-              <td className="px-6 py-4">
-                <div className="flex items-center gap-3">
-                  <div className="w-9 h-9 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center text-xl">
-                    {event.logo}
-                  </div>
-
-                  <div>
-                    <p className="font-medium text-gray-800">{event.name}</p>
-                    <p className="text-sm text-gray-500">{event.subtitle}</p>
+          {currentItems.map((event) => {
+            const s = statusConfig[event.status];
+            return (
+              <tr key={event.id}>
+                <td>
+                  <div className="flex items-center gap-3">
+                    <div
+                      className="w-9 h-9 rounded-lg flex items-center justify-center text-lg shrink-0"
+                      style={{
+                        backgroundColor: "var(--cd-primary-subtle)",
+                        color: "var(--cd-primary)",
+                      }}
+                    >
+                      {event.logo}
+                    </div>
+                    <div>
+                      <p className="font-medium" style={{ color: "var(--cd-text)" }}>
+                        {event.name}
+                      </p>
+                      <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+                        {event.subtitle}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              </td>
-
-              <td className="px-6 py-4 text-gray-700">{event.date}</td>
-
-              <td className="px-6 py-4">
-                <span
-                  className={`px-3 py-1 text-xs rounded-full font-medium ${statusStyle[event.status]}`}
-                >
-                  {event.status}
-                </span>
-              </td>
-
-              <td className="px-6 py-4 text-gray-700">{event.teams}</td>
-
-              <td className="px-6 py-4 text-gray-700">{event.submissions}</td>
-
-              <td className="px-6 py-4 text-right">
-                <button className="p-2 rounded-md hover:bg-gray-100">
-                  <MoreVertical size={16} />
-                </button>
-              </td>
-            </tr>
-          ))}
+                </td>
+                <td style={{ color: "var(--cd-text-2)" }}>{event.date}</td>
+                <td>
+                  <span
+                    className="cd-badge"
+                    style={{ backgroundColor: s.bg, color: s.color }}
+                  >
+                    {event.status}
+                  </span>
+                </td>
+                <td style={{ color: "var(--cd-text-2)" }}>{event.teams}</td>
+                <td style={{ color: "var(--cd-text-2)" }}>{event.submissions}</td>
+                <td className="text-right">
+                  <button
+                    className="p-1.5 rounded-lg transition-colors"
+                    style={{ color: "var(--cd-text-2)" }}
+                    onMouseEnter={(e) =>
+                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                        "var(--cd-hover)")
+                    }
+                    onMouseLeave={(e) =>
+                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+                    }
+                  >
+                    <MoreVertical size={15} />
+                  </button>
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
 
-      {/* FOOTER */}
-      <div className="flex justify-between items-center px-6 py-4 text-sm text-gray-500 border-t absolute w-full bottom-0 bg-white">
+      <div
+        className="flex justify-between items-center px-6 py-3 text-sm border-t absolute w-full bottom-0"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+          color: "var(--cd-text-2)",
+        }}
+      >
         <p>
-          Showing {indexOfFirstItem + 1} to {Math.min(indexOfLastItem, totalItems)} of {totalItems}{" "}
-          results
+          Showing {indexOfFirst + 1}–{Math.min(indexOfLast, events.length)} of {events.length}
         </p>
-
         <div className="flex gap-2">
           <button
-            onClick={handlePrevious}
+            onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
             disabled={currentPage === 1}
-            className="px-3 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-40"
+            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
           >
             Previous
           </button>
-
           <button
-            onClick={handleNext}
+            onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
             disabled={currentPage === totalPages}
-            className="px-3 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-40"
+            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
           >
             Next
           </button>
diff --git a/src/features/Events/v1/Components/Judge.tsx b/src/features/Events/v1/Components/Judge.tsx
index d7854d3..da115c7 100644
--- a/src/features/Events/v1/Components/Judge.tsx
+++ b/src/features/Events/v1/Components/Judge.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
-import { getTheme } from "@/config/them.config";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import JudgeCard from "./JudgeCard";
@@ -11,107 +10,83 @@ type JudgeProps = {
 };
 
 const JUDGES = [
-  {
-    id: 1,
-    image: "https://randomuser.me/api/portraits/men/36.jpg",
-    name: "Kabir Shah",
-    role: "Technical Judge",
-  },
-  {
-    id: 2,
-    image: "https://randomuser.me/api/portraits/women/31.jpg",
-    name: "Meera Joshi",
-    role: "Design Judge",
-  },
+  { id: 1, image: "https://randomuser.me/api/portraits/men/36.jpg", name: "Kabir Shah", role: "Technical Judge" },
+  { id: 2, image: "https://randomuser.me/api/portraits/women/31.jpg", name: "Meera Joshi", role: "Design Judge" },
 ];
 
 const Judge = ({ isExpanded = true, onToggleExpand }: JudgeProps) => {
-  const theme = getTheme("light");
   const [searchTerm, setSearchTerm] = useState("");
 
-  const filteredJudges = useMemo(() => {
-    const normalizedQuery = searchTerm.trim().toLowerCase();
-
-    if (!normalizedQuery) {
-      return JUDGES;
-    }
-
-    return JUDGES.filter((judge) => {
-      const searchableText = `${judge.name} ${judge.role}`.toLowerCase();
-      return searchableText.includes(normalizedQuery);
-    });
+  const filtered = useMemo(() => {
+    const q = searchTerm.trim().toLowerCase();
+    return q ? JUDGES.filter((j) => `${j.name} ${j.role}`.toLowerCase().includes(q)) : JUDGES;
   }, [searchTerm]);
 
-  const visibleCount = isExpanded ? filteredJudges.length : JUDGES.length;
-
   return (
     <div
-      className="flex flex-col w-full p-4 border-2 rounded-lg shadow-sm transition-all duration-200"
+      className="flex flex-col w-full p-4 rounded-xl transition-all duration-200"
       style={{
-        background: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <div className="mb-1 flex items-center justify-between gap-3">
+      <div className="mb-2 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
-          <h2 className="font-bold text-lg text-black uppercase">Judges</h2>
-          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700">
-            {visibleCount}
+          <h2 className="font-bold text-base uppercase" style={{ color: "var(--cd-text)" }}>
+            Judges
+          </h2>
+          <span
+            className="cd-badge"
+            style={{ backgroundColor: "var(--cd-warning-subtle)", color: "var(--cd-warning)" }}
+          >
+            {isExpanded ? filtered.length : JUDGES.length}
           </span>
         </div>
-
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            className="flex items-center justify-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1.5 text-sm font-semibold text-amber-700 transition-colors hover:bg-amber-100"
-          >
-            <IoMdAdd className="text-base" />
-            Add
+          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+            <IoMdAdd className="text-base" /> Add
           </button>
-
-          {onToggleExpand ? (
+          {onToggleExpand && (
             <button
               type="button"
               onClick={onToggleExpand}
-              className="rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+              className="cd-btn cd-btn-secondary px-2.5 py-1.5 text-xs"
             >
               {isExpanded ? "Hide" : "View"}
             </button>
-          ) : null}
+          )}
         </div>
       </div>
 
       {isExpanded ? (
         <>
-          <div className="Search">
-            <Input
-              name="SearchJudge"
-              placeholder="Search Judges..."
-              leftIcon={<CiSearch />}
-              value={searchTerm}
-              onChange={(_, value) => setSearchTerm(value)}
-            />
-          </div>
-
+          <Input
+            name="SearchJudge"
+            placeholder="Search Judges..."
+            leftIcon={<CiSearch />}
+            value={searchTerm}
+            onChange={(_, value) => setSearchTerm(value)}
+          />
           <div className="mt-1 grid grid-cols-1 gap-3">
-            {filteredJudges.length === 0 ? (
-              <p className="rounded-md border border-dashed border-gray-300 px-3 py-4 text-sm text-gray-500">
+            {filtered.length === 0 ? (
+              <p
+                className="rounded-xl border border-dashed px-3 py-4 text-sm"
+                style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+              >
                 No judges found.
               </p>
             ) : (
-              filteredJudges.map((judge) => (
-                <JudgeCard
-                  key={`judge-${judge.id}`}
-                  image={judge.image}
-                  name={judge.name}
-                  role={judge.role}
-                />
+              filtered.map((j) => (
+                <JudgeCard key={`judge-${j.id}`} image={j.image} name={j.name} role={j.role} />
               ))
             )}
           </div>
         </>
       ) : (
-        <p className="mt-2 rounded-md border border-dashed border-gray-300 px-3 py-2 text-xs text-gray-500">
+        <p
+          className="mt-2 rounded-xl border border-dashed px-3 py-2 text-xs"
+          style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+        >
           Collapsed. Click View to manage judges.
         </p>
       )}
diff --git a/src/features/Events/v1/Components/Mentors.tsx b/src/features/Events/v1/Components/Mentors.tsx
index 6c867db..d399bff 100644
--- a/src/features/Events/v1/Components/Mentors.tsx
+++ b/src/features/Events/v1/Components/Mentors.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
-import { getTheme } from "@/config/them.config";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import MentorCard from "./MentorCard";
@@ -11,107 +10,83 @@ type MentorsProps = {
 };
 
 const MENTORS = [
-  {
-    id: 1,
-    image: "https://randomuser.me/api/portraits/men/52.jpg",
-    name: "Arjun Rao",
-    role: "Startup Mentor",
-  },
-  {
-    id: 2,
-    image: "https://randomuser.me/api/portraits/women/63.jpg",
-    name: "Priya Nair",
-    role: "Leadership Mentor",
-  },
+  { id: 1, image: "https://randomuser.me/api/portraits/men/52.jpg", name: "Arjun Rao", role: "Startup Mentor" },
+  { id: 2, image: "https://randomuser.me/api/portraits/women/63.jpg", name: "Priya Nair", role: "Leadership Mentor" },
 ];
 
 const Mentors = ({ isExpanded = true, onToggleExpand }: MentorsProps) => {
-  const theme = getTheme("light");
   const [searchTerm, setSearchTerm] = useState("");
 
-  const filteredMentors = useMemo(() => {
-    const normalizedQuery = searchTerm.trim().toLowerCase();
-
-    if (!normalizedQuery) {
-      return MENTORS;
-    }
-
-    return MENTORS.filter((mentor) => {
-      const searchableText = `${mentor.name} ${mentor.role}`.toLowerCase();
-      return searchableText.includes(normalizedQuery);
-    });
+  const filtered = useMemo(() => {
+    const q = searchTerm.trim().toLowerCase();
+    return q ? MENTORS.filter((m) => `${m.name} ${m.role}`.toLowerCase().includes(q)) : MENTORS;
   }, [searchTerm]);
 
-  const visibleCount = isExpanded ? filteredMentors.length : MENTORS.length;
-
   return (
     <div
-      className="flex flex-col w-full p-4 border-2 rounded-lg shadow-sm transition-all duration-200"
+      className="flex flex-col w-full p-4 rounded-xl transition-all duration-200"
       style={{
-        background: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <div className="mb-1 flex items-center justify-between gap-3">
+      <div className="mb-2 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
-          <h2 className="font-bold text-lg text-black uppercase">Mentors</h2>
-          <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">
-            {visibleCount}
+          <h2 className="font-bold text-base uppercase" style={{ color: "var(--cd-text)" }}>
+            Mentors
+          </h2>
+          <span
+            className="cd-badge"
+            style={{ backgroundColor: "var(--cd-success-subtle)", color: "var(--cd-success)" }}
+          >
+            {isExpanded ? filtered.length : MENTORS.length}
           </span>
         </div>
-
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            className="flex items-center justify-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-2.5 py-1.5 text-sm font-semibold text-emerald-700 transition-colors hover:bg-emerald-100"
-          >
-            <IoMdAdd className="text-base" />
-            Add
+          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+            <IoMdAdd className="text-base" /> Add
           </button>
-
-          {onToggleExpand ? (
+          {onToggleExpand && (
             <button
               type="button"
               onClick={onToggleExpand}
-              className="rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+              className="cd-btn cd-btn-secondary px-2.5 py-1.5 text-xs"
             >
               {isExpanded ? "Hide" : "View"}
             </button>
-          ) : null}
+          )}
         </div>
       </div>
 
       {isExpanded ? (
         <>
-          <div className="Search">
-            <Input
-              name="SearchMentor"
-              placeholder="Search Mentors..."
-              leftIcon={<CiSearch />}
-              value={searchTerm}
-              onChange={(_, value) => setSearchTerm(value)}
-            />
-          </div>
-
+          <Input
+            name="SearchMentor"
+            placeholder="Search Mentors..."
+            leftIcon={<CiSearch />}
+            value={searchTerm}
+            onChange={(_, value) => setSearchTerm(value)}
+          />
           <div className="mt-1 grid grid-cols-1 gap-3">
-            {filteredMentors.length === 0 ? (
-              <p className="rounded-md border border-dashed border-gray-300 px-3 py-4 text-sm text-gray-500">
+            {filtered.length === 0 ? (
+              <p
+                className="rounded-xl border border-dashed px-3 py-4 text-sm"
+                style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+              >
                 No mentors found.
               </p>
             ) : (
-              filteredMentors.map((mentor) => (
-                <MentorCard
-                  key={`mentor-${mentor.id}`}
-                  image={mentor.image}
-                  name={mentor.name}
-                  role={mentor.role}
-                />
+              filtered.map((m) => (
+                <MentorCard key={`mentor-${m.id}`} image={m.image} name={m.name} role={m.role} />
               ))
             )}
           </div>
         </>
       ) : (
-        <p className="mt-2 rounded-md border border-dashed border-gray-300 px-3 py-2 text-xs text-gray-500">
+        <p
+          className="mt-2 rounded-xl border border-dashed px-3 py-2 text-xs"
+          style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+        >
           Collapsed. Click View to manage mentors.
         </p>
       )}
diff --git a/src/features/Events/v1/Components/Partners_And_Sponsors.tsx b/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
index c593738..9429ff2 100644
--- a/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
+++ b/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
@@ -1,31 +1,11 @@
-import { getTheme } from "@/config/them.config";
 import { IoMdAdd } from "react-icons/io";
 import Partners_And_Sponsors_Card from "./Partners_And_Sponsors_Card";
 
 const PARTNERS = [
-  {
-    name: "Google",
-    category: "Official Partner",
-    image:
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWIl8zC8WAMHi5JVmKUb3YVvZd5gvoCdy-NQ&s",
-  },
-  {
-    name: "Microsoft",
-    category: "Platinum Sponsor",
-    image:
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy0dDdi3KJgMq_87aJt9us_0yh69ewaKgUzg&s",
-  },
-  {
-    name: "Amazon Web Services",
-    category: "Gold Sponsor",
-    image: "https://amcham.no/wp-content/uploads/2020/04/AWS-Logo-Final-768x768.png",
-  },
-  {
-    name: "IBM",
-    category: "Silver Sponsor",
-    image:
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxk2TBtiMBNmv3VO4APHeB-XCGatVy5aW0bw&s",
-  },
+  { name: "Google", category: "Official Partner", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWIl8zC8WAMHi5JVmKUb3YVvZd5gvoCdy-NQ&s" },
+  { name: "Microsoft", category: "Platinum Sponsor", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy0dDdi3KJgMq_87aJt9us_0yh69ewaKgUzg&s" },
+  { name: "Amazon Web Services", category: "Gold Sponsor", image: "https://amcham.no/wp-content/uploads/2020/04/AWS-Logo-Final-768x768.png" },
+  { name: "IBM", category: "Silver Sponsor", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxk2TBtiMBNmv3VO4APHeB-XCGatVy5aW0bw&s" },
 ];
 
 type Partners_And_SponsorsProps = {
@@ -33,47 +13,40 @@ type Partners_And_SponsorsProps = {
   onToggleExpand?: () => void;
 };
 
-const Partners_And_Sponsors = ({
-  isExpanded = true,
-  onToggleExpand,
-}: Partners_And_SponsorsProps) => {
-  const theme = getTheme("light");
-  const visibleCount = PARTNERS.length;
-
+const Partners_And_Sponsors = ({ isExpanded = true, onToggleExpand }: Partners_And_SponsorsProps) => {
   return (
     <div
-      className="flex w-full flex-col rounded-lg border-2 p-4 shadow-sm transition-all duration-200"
+      className="flex w-full flex-col rounded-xl p-4 transition-all duration-200"
       style={{
-        background: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
       <div className="mb-3 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
-          <h2 className="text-lg font-bold uppercase text-black">Partners & Sponsors</h2>
-          <span className="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-700">
-            {visibleCount}
+          <h2 className="text-base font-bold uppercase" style={{ color: "var(--cd-text)" }}>
+            Partners & Sponsors
+          </h2>
+          <span
+            className="cd-badge"
+            style={{ backgroundColor: "var(--cd-secondary)", color: "#ffffff", opacity: 0.9 }}
+          >
+            {PARTNERS.length}
           </span>
         </div>
-
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            className="flex items-center justify-center gap-1 rounded-md border border-indigo-200 bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-700 transition-colors hover:bg-indigo-100"
-          >
-            <IoMdAdd className="text-base" />
-            Add
+          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+            <IoMdAdd className="text-base" /> Add
           </button>
-
-          {onToggleExpand ? (
+          {onToggleExpand && (
             <button
               type="button"
               onClick={onToggleExpand}
-              className="rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+              className="cd-btn cd-btn-secondary px-2.5 py-1.5 text-xs"
             >
               {isExpanded ? "Hide" : "View"}
             </button>
-          ) : null}
+          )}
         </div>
       </div>
 
@@ -89,7 +62,10 @@ const Partners_And_Sponsors = ({
           ))}
         </div>
       ) : (
-        <p className="mt-2 rounded-md border border-dashed border-gray-300 px-3 py-2 text-xs text-gray-500">
+        <p
+          className="mt-2 rounded-xl border border-dashed px-3 py-2 text-xs"
+          style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+        >
           Collapsed. Click View to manage partners and sponsors.
         </p>
       )}
diff --git a/src/features/Events/v1/Components/Speakers.tsx b/src/features/Events/v1/Components/Speakers.tsx
index 2fe5296..60f9c45 100644
--- a/src/features/Events/v1/Components/Speakers.tsx
+++ b/src/features/Events/v1/Components/Speakers.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
-import { getTheme } from "@/config/them.config";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import SpeakerCard from "./SpeakerCard";
@@ -11,113 +10,87 @@ type SpeakersProps = {
 };
 
 const SPEAKERS = [
-  {
-    id: 1,
-    image: "https://randomuser.me/api/portraits/women/68.jpg",
-    name: "Aanya Patel",
-    role: "Product Strategist",
-  },
-  {
-    id: 2,
-    image: "https://randomuser.me/api/portraits/men/41.jpg",
-    name: "Rohan Mehta",
-    role: "Engineering Lead",
-  },
-  {
-    id: 3,
-    image: "https://randomuser.me/api/portraits/women/44.jpg",
-    name: "Nisha Verma",
-    role: "Community Mentor",
-  },
+  { id: 1, image: "https://randomuser.me/api/portraits/women/68.jpg", name: "Aanya Patel", role: "Product Strategist" },
+  { id: 2, image: "https://randomuser.me/api/portraits/men/41.jpg", name: "Rohan Mehta", role: "Engineering Lead" },
+  { id: 3, image: "https://randomuser.me/api/portraits/women/44.jpg", name: "Nisha Verma", role: "Community Mentor" },
 ];
 
 const Speakers = ({ isExpanded = true, onToggleExpand }: SpeakersProps) => {
-  const theme = getTheme("light");
   const [searchTerm, setSearchTerm] = useState("");
 
-  const filteredSpeakers = useMemo(() => {
-    const normalizedQuery = searchTerm.trim().toLowerCase();
-
-    if (!normalizedQuery) {
-      return SPEAKERS;
-    }
-
-    return SPEAKERS.filter((speaker) => {
-      const searchableText = `${speaker.name} ${speaker.role}`.toLowerCase();
-      return searchableText.includes(normalizedQuery);
-    });
+  const filtered = useMemo(() => {
+    const q = searchTerm.trim().toLowerCase();
+    return q ? SPEAKERS.filter((s) => `${s.name} ${s.role}`.toLowerCase().includes(q)) : SPEAKERS;
   }, [searchTerm]);
 
-  const visibleCount = isExpanded ? filteredSpeakers.length : SPEAKERS.length;
-
   return (
     <div
-      className="flex flex-col w-full p-4 border-2 rounded-lg shadow-sm transition-all duration-200"
+      className="flex flex-col w-full p-4 rounded-xl transition-all duration-200"
       style={{
-        background: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <div className="mb-1 flex items-center justify-between gap-3">
+      <div className="mb-2 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
-          <h2 className="font-bold text-lg text-black uppercase">Speakers</h2>
-          <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700">
-            {visibleCount}
+          <h2 className="font-bold text-base uppercase" style={{ color: "var(--cd-text)" }}>
+            Speakers
+          </h2>
+          <span
+            className="cd-badge cd-badge-primary"
+            style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
+          >
+            {isExpanded ? filtered.length : SPEAKERS.length}
           </span>
         </div>
-
         <div className="flex items-center gap-2">
           <button
             type="button"
-            className="flex items-center justify-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2.5 py-1.5 text-sm font-semibold text-blue-700 transition-colors hover:bg-blue-100"
+            className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs"
           >
-            <IoMdAdd className="text-base" />
-            Add
+            <IoMdAdd className="text-base" /> Add
           </button>
-
-          {onToggleExpand ? (
+          {onToggleExpand && (
             <button
               type="button"
               onClick={onToggleExpand}
-              className="rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+              className="cd-btn cd-btn-secondary px-2.5 py-1.5 text-xs"
             >
               {isExpanded ? "Hide" : "View"}
             </button>
-          ) : null}
+          )}
         </div>
       </div>
 
       {isExpanded ? (
         <>
-          <div className="Search">
-            <Input
-              name="SearchSpeaker"
-              placeholder="Search Speakers..."
-              leftIcon={<CiSearch />}
-              value={searchTerm}
-              onChange={(_, value) => setSearchTerm(value)}
-            />
-          </div>
-
+          <Input
+            name="SearchSpeaker"
+            placeholder="Search Speakers..."
+            leftIcon={<CiSearch />}
+            value={searchTerm}
+            onChange={(_, value) => setSearchTerm(value)}
+          />
           <div className="mt-1 grid grid-cols-1 gap-3">
-            {filteredSpeakers.length === 0 ? (
-              <p className="rounded-md border border-dashed border-gray-300 px-3 py-4 text-sm text-gray-500">
+            {filtered.length === 0 ? (
+              <p
+                className="rounded-xl border border-dashed px-3 py-4 text-sm"
+                style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+              >
                 No speakers found.
               </p>
             ) : (
-              filteredSpeakers.map((speaker) => (
-                <SpeakerCard
-                  key={speaker.id}
-                  image={speaker.image}
-                  name={speaker.name}
-                  role={speaker.role}
-                />
+              filtered.map((s) => (
+                <SpeakerCard key={s.id} image={s.image} name={s.name} role={s.role} />
               ))
             )}
           </div>
         </>
       ) : (
-        <p className="mt-2 rounded-md border border-dashed border-gray-300 px-3 py-2 text-xs text-gray-500">
+        <p
+          className="mt-2 rounded-xl border border-dashed px-3 py-2 text-xs"
+          style={{ borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+        >
           Collapsed. Click View to manage speakers.
         </p>
       )}
diff --git a/src/features/Events/v1/Pages/CreateNewEvent.tsx b/src/features/Events/v1/Pages/CreateNewEvent.tsx
index 29123e4..4627144 100644
--- a/src/features/Events/v1/Pages/CreateNewEvent.tsx
+++ b/src/features/Events/v1/Pages/CreateNewEvent.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { getTheme } from "../../../../config/them.config";
 import Judge from "../Components/Judge";
 import Mentors from "../Components/Mentors";
 import Speakers from "../Components/Speakers";
@@ -13,7 +12,6 @@ import Partners_And_Sponsors from "../Components/Partners_And_Sponsors";
 type PanelKey = "speakers" | "mentors" | "judges" | "partners";
 
 const CreateNewEvent = () => {
-  let theme = getTheme("light");
   const [expandedPanel, setExpandedPanel] = useState<PanelKey | null>("speakers");
 
   const handlePanelToggle = (panel: PanelKey) => {
@@ -21,15 +19,27 @@ const CreateNewEvent = () => {
   };
 
   return (
-    <div className="w-full h-full flex flex-col" style={{ background: theme.background.secondary }}>
+    <div className="w-full h-full flex flex-col cd-page">
       <Event_Header />
-      <div className="flex flex-col items-center min-[1408px]:items-start min-[1408px]:flex-row w-full p-[2vw]  gap-5">
-        <div className="w-[90%] min-[1408px]:w-[65%]  mb-[2vh] bg-gray-200 rounded-lg p-4">
+      <div className="flex flex-col items-center min-[1408px]:items-start min-[1408px]:flex-row w-full p-[2vw] gap-5">
+        <div
+          className="w-[90%] min-[1408px]:w-[65%] mb-[2vh] rounded-xl p-4"
+          style={{
+            backgroundColor: "var(--cd-surface-2)",
+            border: "1px solid var(--cd-border)",
+          }}
+        >
           <Event_Basic_Info />
           <DateAndSchedule />
           <Capacity_And_Registration />
         </div>
-        <div className="w-[90%] min-[1408px]:w-[35%] min-[1408px]:h-screen rounded-2xl space-y-5 min-[1408px]:overflow-y-auto pr-1 bg-gray-200 rounded-lg p-4">
+        <div
+          className="w-[90%] min-[1408px]:w-[35%] min-[1408px]:h-screen rounded-xl space-y-5 min-[1408px]:overflow-y-auto pr-1 p-4"
+          style={{
+            backgroundColor: "var(--cd-surface-2)",
+            border: "1px solid var(--cd-border)",
+          }}
+        >
           <Settings />
           <Speakers
             isExpanded={expandedPanel === "speakers"}
@@ -43,7 +53,6 @@ const CreateNewEvent = () => {
             isExpanded={expandedPanel === "judges"}
             onToggleExpand={() => handlePanelToggle("judges")}
           />
-
           <Partners_And_Sponsors
             isExpanded={expandedPanel === "partners"}
             onToggleExpand={() => handlePanelToggle("partners")}
diff --git a/src/features/Events/v1/Pages/ViewEvent.tsx b/src/features/Events/v1/Pages/ViewEvent.tsx
index b7fb417..c968c38 100644
--- a/src/features/Events/v1/Pages/ViewEvent.tsx
+++ b/src/features/Events/v1/Pages/ViewEvent.tsx
@@ -1,88 +1,21 @@
-import { getTheme } from "@/config/them.config";
 import Event_View_Header from "../Sections/Event_View_Header";
 import EventTable from "../Components/EventTable";
-
 import { FaRocket, FaCode, FaGlobe, FaBolt, FaPalette } from "react-icons/fa";
 import { Event } from "../Event.type";
 
 const events: Event[] = [
-  {
-    id: 1,
-    name: "Summer AI Challenge 2024",
-    subtitle: "Sponsored by TechCorp",
-    logo: <FaRocket />,
-    date: "Jun 15 - Jun 17, 2024",
-    status: "Live",
-    teams: 142,
-    submissions: "-",
-  },
-  {
-    id: 2,
-    name: "Web3 Builders Sprint",
-    subtitle: "Internal Team Event",
-    logo: <FaCode />,
-    date: "Jul 01 - Jul 03, 2024",
-    status: "Upcoming",
-    teams: 45,
-    submissions: "-",
-  },
-  {
-    id: 3,
-    name: "Global Open Source Hack",
-    subtitle: "Public Event",
-    logo: <FaGlobe />,
-    date: "May 10 - May 12, 2024",
-    status: "Completed",
-    teams: 218,
-    submissions: 86,
-  },
-  {
-    id: 4,
-    name: "Speed Code Blitz",
-    subtitle: "Internal Team Event",
-    logo: <FaBolt />,
-    date: "Apr 22 - Apr 22, 2024",
-    status: "Completed",
-    teams: 56,
-    submissions: 12,
-  },
-  {
-    id: 5,
-    name: "Design Systems Hack",
-    subtitle: "Design Dept.",
-    logo: <FaPalette />,
-    date: "Aug 05 - Aug 07, 2024",
-    status: "Upcoming",
-    teams: 24,
-    submissions: "-",
-  },
-
-  {
-    id: 6,
-    name: "Design Systems Hack",
-    subtitle: "Design Dept.",
-    logo: <FaPalette />,
-    date: "Aug 05 - Aug 07, 2024",
-    status: "Upcoming",
-    teams: 24,
-    submissions: "-",
-  },
-  {
-    id: 7,
-    name: "Design Systems Hack",
-    subtitle: "Design Dept.",
-    logo: <FaPalette />,
-    date: "Aug 05 - Aug 07, 2024",
-    status: "Upcoming",
-    teams: 24,
-    submissions: "-",
-  },
+  { id: 1, name: "Summer AI Challenge 2024", subtitle: "Sponsored by TechCorp", logo: <FaRocket />, date: "Jun 15 - Jun 17, 2024", status: "Live", teams: 142, submissions: "-" },
+  { id: 2, name: "Web3 Builders Sprint", subtitle: "Internal Team Event", logo: <FaCode />, date: "Jul 01 - Jul 03, 2024", status: "Upcoming", teams: 45, submissions: "-" },
+  { id: 3, name: "Global Open Source Hack", subtitle: "Public Event", logo: <FaGlobe />, date: "May 10 - May 12, 2024", status: "Completed", teams: 218, submissions: 86 },
+  { id: 4, name: "Speed Code Blitz", subtitle: "Internal Team Event", logo: <FaBolt />, date: "Apr 22 - Apr 22, 2024", status: "Completed", teams: 56, submissions: 12 },
+  { id: 5, name: "Design Systems Hack", subtitle: "Design Dept.", logo: <FaPalette />, date: "Aug 05 - Aug 07, 2024", status: "Upcoming", teams: 24, submissions: "-" },
+  { id: 6, name: "Design Systems Hack", subtitle: "Design Dept.", logo: <FaPalette />, date: "Aug 05 - Aug 07, 2024", status: "Upcoming", teams: 24, submissions: "-" },
+  { id: 7, name: "Design Systems Hack", subtitle: "Design Dept.", logo: <FaPalette />, date: "Aug 05 - Aug 07, 2024", status: "Upcoming", teams: 24, submissions: "-" },
 ];
 
 const ViewEvent = () => {
-  let theme = getTheme("light");
   return (
-    <div className="w-full h-full flex flex-col" style={{ background: theme.background.secondary }}>
+    <div className="w-full h-full flex flex-col cd-page">
       <Event_View_Header />
       <div className="w-full h-full p-[3vw]">
         <EventTable events={events} itemsPerPage={5} />
diff --git a/src/features/Events/v1/Sections/Event_Basic_Info.tsx b/src/features/Events/v1/Sections/Event_Basic_Info.tsx
index cc5019d..ba02810 100644
--- a/src/features/Events/v1/Sections/Event_Basic_Info.tsx
+++ b/src/features/Events/v1/Sections/Event_Basic_Info.tsx
@@ -1,5 +1,4 @@
 import { MdMedicalInformation } from "react-icons/md";
-import { getTheme } from "../../../../config/them.config";
 import { IoMdCloudUpload } from "react-icons/io";
 import { Input } from "../../../../Component/ui/Input";
 import { useState } from "react";
@@ -10,9 +9,7 @@ import MarkdownToJsx from "../../../../Component/ui/MarkdownToJsx";
 import { FaLink } from "react-icons/fa";
 
 const Event_Basic_Info = () => {
-  let theme = getTheme("light");
-
-  let [eventData, setEventData] = useState({
+  const [eventData, setEventData] = useState({
     title: "",
     eventType: "",
     description: "",
@@ -25,34 +22,44 @@ const Event_Basic_Info = () => {
     tags: [],
   });
 
-  let [isPreviewMode, setIsPreviewMode] = useState(false);
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
 
   return (
     <div
-      className="flex flex-col w-full p-8 border-2 rounded-lg"
+      className="flex flex-col w-full p-8 rounded-xl"
       style={{
-        background: theme.background.primary,
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
       }}
     >
-      <span className="font-extrabold text-xl text-gray-800 uppercase mb-[3vh] flex items-center gap-3">
-        <MdMedicalInformation className="text-[#4f46e5]" />
+      <span
+        className="font-extrabold text-xl uppercase mb-[3vh] flex items-center gap-3"
+        style={{ color: "var(--cd-text)" }}
+      >
+        <MdMedicalInformation style={{ color: "var(--cd-primary)" }} />
         Event Information
       </span>
 
-      <div className="flex flex-col gap-4  ">
-        <p className="text-md text-gray-400 uppercase font-semibold">Event Cover Image</p>
+      <div className="flex flex-col gap-4">
+        <p className="text-xs font-semibold uppercase" style={{ color: "var(--cd-text-2)" }}>
+          Event Cover Image
+        </p>
 
-        <div className="w-full flex h-[15vh] flex-col gap-2  mb-4">
+        <div className="w-full flex h-[15vh] flex-col gap-2 mb-4">
           <div
-            className="w-full h-full border-2 border-dashed rounded-lg flex flex-col items-center justify-center bg-gray-50"
+            className="w-full h-full border-2 border-dashed rounded-xl flex flex-col items-center justify-center"
             style={{
-              borderColor: theme.borderColor.primary,
+              borderColor: "var(--cd-border)",
+              backgroundColor: "var(--cd-surface-2)",
             }}
           >
-            <IoMdCloudUpload className="text-2xl text-gray-400" />
-            <p className="text-[1vw]">Click to upload or drag and drop</p>
-            <p className="text-[1vw]">PNG , JPG up to 10MB (16:9 aspect ratio)</p>
+            <IoMdCloudUpload className="text-2xl" style={{ color: "var(--cd-text-muted)" }} />
+            <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
+              Click to upload or drag and drop
+            </p>
+            <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              PNG, JPG up to 10MB (16:9 aspect ratio)
+            </p>
           </div>
         </div>
 
@@ -71,19 +78,18 @@ const Event_Basic_Info = () => {
             type="url"
             placeholder="Enter registration link"
             className="my-[2vh]"
-            leftIcon={<FaLink className="text-gray-400" />}
+            leftIcon={<FaLink style={{ color: "var(--cd-text-muted)" }} />}
             value={eventData.registrationLink}
             onChange={(name, value) => setEventData({ ...eventData, [name]: value })}
           />
 
-          <div className="flex gap-[5%] w-full ">
+          <div className="flex gap-[5%] w-full">
             <DropDown
               options={EVENT_TYPE}
               label="Event Type"
               className="w-[48%]"
               onSelect={(value) => setEventData({ ...eventData, eventType: value })}
             />
-
             <DropDown
               options={EVENT_CATEGORY}
               label="Event Category"
@@ -92,70 +98,63 @@ const Event_Basic_Info = () => {
             />
           </div>
 
-          <div className="Description flex flex-col mt-[4vh]">
+          <div className="flex flex-col mt-[4vh]">
             <div
-              className="w-full flex items-center justify-between px-4 py-4 rounded-t-lg border-2 border-b-0"
+              className="w-full flex items-center justify-between px-4 py-3 rounded-t-xl border border-b-0"
               style={{
-                backgroundColor: theme.background.tertiary,
-                borderColor: theme.borderColor.primary,
+                backgroundColor: "var(--cd-surface-2)",
+                borderColor: "var(--cd-border)",
               }}
             >
               <p
-                className="text-base font-semibold uppercase tracking-wide"
-                style={{ color: theme.textColor.primary }}
+                className="text-sm font-semibold uppercase tracking-wide"
+                style={{ color: "var(--cd-text)" }}
               >
                 Event Description
               </p>
-
               <div className="flex gap-2">
                 <Button
                   text="Write"
-                  backgroundColor={
-                    isPreviewMode ? theme.background.primary : theme.textColor.tersiary
-                  }
-                  textColor={isPreviewMode ? theme.textColor.secondary : "#ffffff"}
+                  variant={isPreviewMode ? "secondary" : "primary"}
                   onClick={() => setIsPreviewMode(false)}
                 />
-
                 <Button
                   text="Preview"
-                  backgroundColor={
-                    isPreviewMode ? theme.textColor.tersiary : theme.background.primary
-                  }
-                  textColor={isPreviewMode ? "#ffffff" : theme.textColor.secondary}
+                  variant={isPreviewMode ? "primary" : "secondary"}
                   onClick={() => setIsPreviewMode(true)}
                 />
               </div>
             </div>
 
             <div
-              className="border-2 border-t-0 rounded-b-lg"
-              style={{ borderColor: theme.borderColor.primary }}
+              className="border border-t-0 rounded-b-xl"
+              style={{ borderColor: "var(--cd-border)" }}
             >
               {isPreviewMode ? (
                 <div
                   className="min-h-[24vh] p-4"
                   style={{
-                    backgroundColor: theme.background.primary,
-                    color: theme.textColor.secondary,
+                    backgroundColor: "var(--cd-surface)",
+                    color: "var(--cd-text-2)",
                   }}
                 >
                   {eventData.description.trim() ? (
                     <MarkdownToJsx markdown={eventData.description} />
                   ) : (
-                    <p className="italic">Preview will appear here...</p>
+                    <p className="italic" style={{ color: "var(--cd-text-muted)" }}>
+                      Preview will appear here...
+                    </p>
                   )}
                 </div>
               ) : (
                 <textarea
                   value={eventData.description}
                   onChange={(e) => setEventData({ ...eventData, description: e.target.value })}
-                  placeholder="Write your event description here in markdown language..."
-                  className="w-full min-h-[24vh] p-4  rounded-b-lg resize-none focus:outline-none"
+                  placeholder="Write your event description here in markdown..."
+                  className="w-full min-h-[24vh] p-4 rounded-b-xl resize-none focus:outline-none"
                   style={{
-                    backgroundColor: theme.background.primary,
-                    borderColor: theme.borderColor.primary,
-                    color: theme.textColor.secondary,
+                    backgroundColor: "var(--cd-surface)",
+                    color: "var(--cd-text)",
                   }}
                 />
               )}
@@ -168,8 +167,3 @@ const Event_Basic_Info = () => {
 };
 
 export default Event_Basic_Info;
-
-//  className="w-full flex flex-col "
-//       style={{
-//         background: theme.background.secondary,
-//       }}
diff --git a/src/features/Events/v1/Sections/Event_Header.tsx b/src/features/Events/v1/Sections/Event_Header.tsx
index 6193b21..fdc93a8 100644
--- a/src/features/Events/v1/Sections/Event_Header.tsx
+++ b/src/features/Events/v1/Sections/Event_Header.tsx
@@ -5,27 +5,29 @@ import { MdPublish } from "react-icons/md";
 
 const Event_Header = () => {
   return (
-    <div className="py-[3vh] bg-white border-b-[1px] border-gray-300 flex   text-xl font-bold  justify-between">
-      <Link to="/member" className="w-1/3 h-full  flex justify-between items-center">
-        <h1 className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold text-gray-800  ml-5 mt-2">
+    <div
+      className="py-[3vh] border-b flex text-xl font-bold justify-between"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
+      <Link to="/org/events" className="w-1/3 h-full flex items-center">
+        <h1
+          className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 mt-2"
+          style={{ color: "var(--cd-text)" }}
+        >
           <IoMdArrowRoundBack className="mr-[3vw] inline" />
           Create New Event
         </h1>
       </Link>
 
-      <div className="w-1/2 xl:w-fit h-full mr-[3vw] flex justify-end  gap-5  ">
-        <Button
-          text="Save Draft"
-          onClick={() => alert("Save Draft clicked")}
-          backgroundColor="#e5e7eb"
-          textColor="#0f172a"
-        />
-
+      <div className="w-1/2 xl:w-fit h-full mr-[3vw] flex justify-end gap-3">
+        <Button text="Save Draft" variant="secondary" onClick={() => alert("Save Draft clicked")} />
         <Button
           text="Create Event"
           icon={<MdPublish className="inline" />}
           onClick={() => alert("Create Event clicked")}
-          backgroundColor="#4f46e4"
         />
       </div>
     </div>
diff --git a/src/features/Events/v1/Sections/Event_View_Header.tsx b/src/features/Events/v1/Sections/Event_View_Header.tsx
index 1d613ea..09831a7 100644
--- a/src/features/Events/v1/Sections/Event_View_Header.tsx
+++ b/src/features/Events/v1/Sections/Event_View_Header.tsx
@@ -1,26 +1,34 @@
 import Button from "@/Component/ui/Button";
 import { useCallback, useState } from "react";
-
 import { IoMdAdd } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
 import { EventTabs } from "../Constants/Event.constant";
 
 const Event_View_Header = () => {
   const navigate = useNavigate();
-  let [SelectedTab, setSelectedTab] = useState("Upcoming Events");
+  const [selectedTab, setSelectedTab] = useState("Upcoming Events");
 
-  let HandleSelectedTab = useCallback((tab: string) => {
+  const handleSelectedTab = useCallback((tab: string) => {
     setSelectedTab(tab);
   }, []);
 
   return (
-    <div className="pt-[3vh] bg-white border-b-[1px] border-gray-300 flex  flex-col text-xl font-bold  justify-between">
+    <div
+      className="pt-[3vh] border-b flex flex-col font-bold justify-between"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
       <div className="flex w-full justify-between items-start">
         <div className="w-1/2 xl:w-fit flex flex-col">
-          <h1 className="text-lg sm:text-[2.5vw] lg:text-2xl   font-bold text-gray-800  ml-5 w-fit">
+          <h1
+            className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 w-fit"
+            style={{ color: "var(--cd-text)" }}
+          >
             Events
           </h1>
-          <p className=" text-lg  lg:text-md  text-gray-500 ml-5 mt-1 w-fit">
+          <p className="text-sm lg:text-base ml-5 mt-1 w-fit" style={{ color: "var(--cd-text-2)" }}>
             Manage all your events in one place. Create, edit, and track event details with ease.
           </p>
         </div>
@@ -28,22 +36,21 @@ const Event_View_Header = () => {
           <Button
             text="Create Event"
             onClick={() => navigate("/org/create-event")}
-            backgroundColor="#4f46e4"
             icon={<IoMdAdd />}
           />
         </div>
       </div>
 
-      <div className="flex space-x-4 mt-[5vh] ml-5 p-3 ">
+      <div className="flex space-x-1 mt-[4vh] ml-5 px-3">
         {EventTabs.map((tab) => (
           <button
             key={tab}
-            className={`px-4 py-2 border-b-4  ease-in duration-200 ${
-              SelectedTab === tab
-                ? " text-blue-500 border-blue-600"
-                : " text-gray-700 border-transparent"
-            }`}
-            onClick={() => HandleSelectedTab(tab)}
+            className="px-4 py-2 border-b-2 text-sm font-medium transition-all duration-200"
+            style={{
+              color: selectedTab === tab ? "var(--cd-primary)" : "var(--cd-text-2)",
+              borderColor: selectedTab === tab ? "var(--cd-primary)" : "transparent",
+            }}
+            onClick={() => handleSelectedTab(tab)}
           >
             {tab}
           </button>
diff --git a/src/features/Member/v1/Components/MemberHeader.tsx b/src/features/Member/v1/Components/MemberHeader.tsx
index 1a899e9..37e9e70 100644
--- a/src/features/Member/v1/Components/MemberHeader.tsx
+++ b/src/features/Member/v1/Components/MemberHeader.tsx
@@ -6,26 +6,40 @@ const MemberHeader = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="w-full py-[3vh] bg-white border-b-[1px] border-gray-300 flex   text-xl font-bold  justify-between ">
-      <div className="w-1/2 h-full  flex flex-col justify-between gap-2">
-        <h1 className="text-lg sm:text-[2.5vw] lg:text-2xl  font-bold text-gray-800  ml-5 mt-2">
-          Member Managements
+    <div
+      className="w-full py-[3vh] border-b flex text-xl font-bold justify-between"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
+      <div className="w-1/2 h-full flex flex-col justify-between gap-2">
+        <h1
+          className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 mt-2"
+          style={{ color: "var(--cd-text)" }}
+        >
+          Member Management
         </h1>
-        <span className="text-sm  lg:text-md  w-fit text-gray-600 ml-5 bg-gray-200 rounded-2xl py-1 px-3">
+        <span
+          className="text-sm w-fit ml-5 rounded-2xl py-1 px-3"
+          style={{
+            backgroundColor: "var(--cd-surface-2)",
+            color: "var(--cd-text-2)",
+          }}
+        >
           1,248 Members
         </span>
       </div>
-      <div className="w-1/3 h-full flex justify-end items-center gap-2 px-5">
+      <div className="w-1/3 h-full flex justify-end items-center gap-3 px-5">
         <Button
           text="Add Member"
-          onClick={() => navigate("/org//add-member")}
-          backgroundColor="#4f46e4"
+          onClick={() => navigate("/org/add-member")}
           icon={<IoPersonAdd />}
         />
-
         <img
-          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsPJ9cm0-r5p50py0yUzvM5ZtEB-xWoJRPRA&s"
-          className="w-[4.5vh] h-[4.5vh] rounded-full object-cover"
+          src="https://randomuser.me/api/portraits/men/1.jpg"
+          className="w-9 h-9 rounded-full object-cover"
+          alt="User avatar"
         />
       </div>
     </div>
diff --git a/src/features/Member/v1/Components/MemberTable.tsx b/src/features/Member/v1/Components/MemberTable.tsx
index a11a9e1..1386ba5 100644
--- a/src/features/Member/v1/Components/MemberTable.tsx
+++ b/src/features/Member/v1/Components/MemberTable.tsx
@@ -16,49 +16,60 @@ type MemberTableProps = {
 
 const MemberTable = ({ members }: MemberTableProps) => {
   return (
-    <div className="w-[90%] mt-6 rounded-2xl overflow-hidden border border-gray-200">
-      <table className="w-full border-collapse">
-        <thead className="bg-gray-100">
-          <tr className="text-left text-sm text-gray-600">
-            <th className="px-6 py-4">Member Name</th>
-            <th className="px-6 py-4">Role</th>
-            <th className="px-6 py-4">Status</th>
-            <th className="px-6 py-4">Skills</th>
-            <th className="px-6 py-4">Certificates</th>
-            <th className="px-6 py-4">Actions</th>
+    <div
+      className="w-[90%] mt-4 rounded-2xl overflow-hidden"
+      style={{ border: "1px solid var(--cd-border)" }}
+    >
+      <table className="cd-table">
+        <thead>
+          <tr>
+            <th>Member Name</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th>Skills</th>
+            <th>Certificates</th>
+            <th>Actions</th>
           </tr>
         </thead>
-
-        <tbody className="bg-white divide-y divide-gray-200">
+        <tbody>
           {members.map((member, index) => (
-            <tr key={index} className="hover:bg-gray-50 transition">
-              <td className="px-6 py-4 font-medium text-gray-900">
+            <tr key={index}>
+              <td className="font-medium">
                 {member.image && (
                   <img
                     src={member.image}
                     alt={member.name}
-                    className="w-10 h-10 rounded-xl mr-3 inline-block"
+                    className="w-9 h-9 rounded-xl mr-3 inline-block object-cover"
                   />
                 )}
-                {member.name}
+                <span style={{ color: "var(--cd-text)" }}>{member.name}</span>
               </td>
-
-              <td className="px-6 py-4">
+              <td>
                 <RoleChip role={member.role} />
               </td>
-
-              <td className="px-6 py-4">
+              <td>
                 <StatusChip status={member.status} />
               </td>
-
-              <td className="px-6 py-4 text-gray-600">{member.skills}</td>
-
-              <td className="px-6 py-4 text-gray-600">
-                <FaCertificate className="inline mr-2" /> {member.certificates}
+              <td style={{ color: "var(--cd-text-2)" }}>{member.skills}</td>
+              <td style={{ color: "var(--cd-text-2)" }}>
+                <FaCertificate
+                  className="inline mr-1.5"
+                  style={{ color: "var(--cd-warning)" }}
+                />
+                {member.certificates}
               </td>
-
-              <td className="px-6 py-4">
-                <button className="px-4 py-2 text-sm rounded-lg  text-gray-600 hover:bg-gray-100   transition">
+              <td>
+                <button
+                  className="p-2 rounded-lg transition-colors"
+                  style={{ color: "var(--cd-text-2)" }}
+                  onMouseEnter={(e) =>
+                    ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                      "var(--cd-hover)")
+                  }
+                  onMouseLeave={(e) =>
+                    ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
+                  }
+                >
                   <BsThreeDotsVertical />
                 </button>
               </td>
diff --git a/src/features/Member/v1/Components/RoleChip.tsx b/src/features/Member/v1/Components/RoleChip.tsx
index 334c08e..1f42d23 100644
--- a/src/features/Member/v1/Components/RoleChip.tsx
+++ b/src/features/Member/v1/Components/RoleChip.tsx
@@ -1,7 +1,26 @@
+const roleConfig: Record<string, { bg: string; color: string }> = {
+  Mentor: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" },
+  Mentee: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)" },
+  Admin: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)" },
+  Organizer: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)" },
+  Volunteer: { bg: "var(--cd-accentSubtle, var(--cd-primary-subtle))", color: "var(--cd-accent)" },
+  Member: { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" },
+};
+
 const RoleChip = ({ role }: { role: string }) => {
-  const styles = role === "Mentor" ? "bg-blue-100 text-blue-600" : "bg-purple-100 text-purple-600";
+  const cfg = roleConfig[role] ?? {
+    bg: "var(--cd-surface-2)",
+    color: "var(--cd-secondary)",
+  };
 
-  return <span className={`px-3 py-1 rounded-lg text-xs font-medium ${styles}`}>{role}</span>;
+  return (
+    <span
+      className="cd-badge"
+      style={{ backgroundColor: cfg.bg, color: cfg.color }}
+    >
+      {role}
+    </span>
+  );
 };
 
 export default RoleChip;
diff --git a/src/features/Member/v1/Components/SearchMember.tsx b/src/features/Member/v1/Components/SearchMember.tsx
index 7826139..1d56543 100644
--- a/src/features/Member/v1/Components/SearchMember.tsx
+++ b/src/features/Member/v1/Components/SearchMember.tsx
@@ -1,56 +1,52 @@
 import { useState } from "react";
 import { CiSearch } from "react-icons/ci";
-import { getTheme } from "../../../../config/them.config";
 import DropDown from "../../../../Component/ui/DropDown";
 import Button from "../../../../Component/ui/Button";
 
 const ROLE_OPTIONS = ["All Roles", "Mentor", "Lean Developer", "Mentee", "Observer", "Other"];
-const STATUS_OPTIONS = ["Active", "Inactive", "Pending", "Banned", "On Bording"];
+const STATUS_OPTIONS = ["Active", "Inactive", "Pending", "Banned", "On Boarding"];
 
 const SearchMember = () => {
-  let theme = getTheme("light");
   const [searchText, setSearchText] = useState("");
   const [selectedRole, setSelectedRole] = useState(ROLE_OPTIONS[0]);
   const [selectedStatus, setSelectedStatus] = useState(STATUS_OPTIONS[0]);
 
   const handleSearch = () => {
-    console.log("Member search filters:", {
-      searchText,
-      role: selectedRole,
-      status: selectedStatus,
-    });
+    console.log("Member search filters:", { searchText, role: selectedRole, status: selectedStatus });
   };
 
   return (
     <div
-      className="bg-white w-[90%] h-[7vh] mt-[4vh] flex items-center p-3 rounded-2xl border "
+      className="w-[90%] mt-[4vh] flex items-center p-3 rounded-2xl border gap-3"
       style={{
-        borderColor: theme.borderColor.primary,
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
       }}
     >
       <div
-        className="Search_Container bg-[#f8fafc] w-1/2 h-full flex items-center gap-4 px-4 border rounded-lg mr-4"
+        className="flex-1 h-10 flex items-center gap-2 px-3 border rounded-lg"
         style={{
-          borderColor: theme.borderColor.primary,
-          backgroundColor: theme.background.secondary,
+          backgroundColor: "var(--cd-surface-2)",
+          borderColor: "var(--cd-border)",
         }}
       >
-        <CiSearch />
+        <CiSearch style={{ color: "var(--cd-text-muted)" }} />
         <input
           type="text"
           placeholder="Search Member"
-          className="w-full h-full px-4 text-lg outline-none"
+          className="flex-1 h-full bg-transparent outline-none text-sm"
+          style={{ color: "var(--cd-text)" }}
           value={searchText}
           onChange={(e) => setSearchText(e.target.value)}
         />
       </div>
 
-      <div className="DropDownContainer flex gap-3 mr-[2vw]">
+      <div className="flex gap-3">
         <DropDown options={ROLE_OPTIONS} onSelect={setSelectedRole} />
         <DropDown options={STATUS_OPTIONS} onSelect={setSelectedStatus} />
       </div>
 
-      <Button text="Search" width="8vw" icon={<CiSearch />} onClick={handleSearch} />
+      <Button text="Search" icon={<CiSearch />} onClick={handleSearch} />
     </div>
   );
 };
diff --git a/src/features/Member/v1/Components/StatusChip.tsx b/src/features/Member/v1/Components/StatusChip.tsx
index 3ff8864..86ab865 100644
--- a/src/features/Member/v1/Components/StatusChip.tsx
+++ b/src/features/Member/v1/Components/StatusChip.tsx
@@ -1,18 +1,32 @@
+const statusConfig: Record<string, { bg: string; color: string }> = {
+  Active: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)" },
+  Inactive: { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" },
+  Pending: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)" },
+  "On Boarding": { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)" },
+  Banned: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)" },
+  Suspended: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)" },
+  Flagged: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)" },
+  "Under Review": { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" },
+  Draft: { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" },
+  Submitted: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" },
+  Approved: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)" },
+  Rejected: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)" },
+};
+
 const StatusChip = ({ status }: { status: string }) => {
-  const styles =
-    status === "Active"
-      ? "bg-green-100 text-green-600"
-      : status === "Inactive"
-        ? "bg-gray-100 text-gray-600"
-        : status === "Pending"
-          ? "bg-yellow-100 text-yellow-600"
-          : status === "On Boarding"
-            ? "bg-yellow-200 text-yellow-800"
-            : status === "Banned"
-              ? "bg-red-100 text-red-600"
-              : "bg-gray-100 text-gray-600";
+  const cfg = statusConfig[status] ?? {
+    bg: "var(--cd-surface-2)",
+    color: "var(--cd-text-2)",
+  };
 
-  return <span className={`px-3 py-1 rounded-lg text-xs font-medium ${styles}`}>{status}</span>;
+  return (
+    <span
+      className="cd-badge"
+      style={{ backgroundColor: cfg.bg, color: cfg.color }}
+    >
+      {status}
+    </span>
+  );
 };
 
 export default StatusChip;
diff --git a/src/features/Member/v1/Pages/MemberPage.tsx b/src/features/Member/v1/Pages/MemberPage.tsx
index 1a43915..8ba6956 100644
--- a/src/features/Member/v1/Pages/MemberPage.tsx
+++ b/src/features/Member/v1/Pages/MemberPage.tsx
@@ -1,9 +1,8 @@
-import { getTheme } from "../../../../config/them.config";
 import MemberHeader from "../Components/MemberHeader";
 import MemberTable from "../Components/MemberTable";
 import SearchMember from "../Components/SearchMember";
 
-let membersData = [
+const membersData = [
   {
     name: "John Doe",
     image: "https://randomuser.me/api/portraits/men/1.jpg",
@@ -39,15 +38,10 @@ let membersData = [
 ];
 
 const MemberPage = () => {
-  let theme = getTheme("light");
   return (
-    <div
-      className="w-full  h-screen flex flex-col items-center gap-4"
-      style={{ background: theme.background.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col items-center gap-4 cd-page">
       <MemberHeader />
       <SearchMember />
-
       <MemberTable members={membersData} />
     </div>
   );
diff --git a/src/features/SideBar/v1/Components/SideBarLink.tsx b/src/features/SideBar/v1/Components/SideBarLink.tsx
index 0521acb..156789b 100644
--- a/src/features/SideBar/v1/Components/SideBarLink.tsx
+++ b/src/features/SideBar/v1/Components/SideBarLink.tsx
@@ -1,53 +1,33 @@
 import React from "react";
-import { getTheme } from "../../../../config/them.config";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 
 type SideBarLinkProps = {
   icon: React.ReactNode;
   text: string;
-  link?: string | undefined;
+  link?: string;
 };
 
-const SideBarLink = ({ icon, text, link }: SideBarLinkProps) => {
-  const LinkRef = React.useRef<HTMLAnchorElement>(null);
-  const theme = getTheme("light");
+const SideBarLink = ({ icon, text, link = "/" }: SideBarLinkProps) => {
+  const { pathname } = useLocation();
+  const isActive = pathname === link || (link !== "/org" && pathname.startsWith(link));
 
   return (
     <Link
-      to={link || "/"}
-      ref={LinkRef}
-      className="sidebar-link flex items-center gap-3 px-4 py-2 rounded-lg cursor-pointer transition-colors duration-200"
-      style={{
-        fontFamily: theme.fontFamily.primary,
-        color: theme.textColor.secondary,
-        borderColor: theme.borderColor.primary,
-        background: "transparent",
-      }}
-      onMouseOver={() => {
-        if (LinkRef.current) {
-          LinkRef.current.style.backgroundColor = theme.background.secondary;
-          LinkRef.current.style.color = theme.textColor.primary;
-        }
-      }}
-      onMouseOut={() => {
-        if (LinkRef.current) {
-          LinkRef.current.style.backgroundColor = "transparent";
-          LinkRef.current.style.color = theme.textColor.secondary;
-        }
-      }}
+      to={link}
+      className="cd-nav-link"
+      style={
+        isActive
+          ? {
+              backgroundColor: "var(--cd-primary-subtle)",
+              color: "var(--cd-primary-text)",
+            }
+          : undefined
+      }
     >
-      <div
-        className="icon flex items-center justify-center text-[2em] lg:text-[1.7em]"
-        style={{ minWidth: 32 }}
-      >
+      <div className="flex items-center justify-center text-xl" style={{ minWidth: 24 }}>
         {icon}
       </div>
-      <span
-        className="link-text hidden lg:block "
-        style={{ marginLeft: 8, fontSize: "1.1em", fontWeight: 500 }}
-      >
-        {text}
-      </span>
+      <span className="hidden lg:block text-[0.9375rem] font-medium">{text}</span>
     </Link>
   );
 };
diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index 1622495..b295ebd 100644
--- a/src/features/SideBar/v1/Section/BotamNavBar.tsx
+++ b/src/features/SideBar/v1/Section/BotamNavBar.tsx
@@ -2,7 +2,6 @@ import { RiContactsBookFill } from "react-icons/ri";
 import { type IconType } from "react-icons";
 import { MdDashboard, MdEvent, MdGroup } from "react-icons/md";
 import { Link, useLocation } from "react-router-dom";
-import { getTheme } from "../../../../config/them.config";
 
 type NavItem = {
   icon: IconType;
@@ -15,51 +14,47 @@ const navItems: NavItem[] = [
   {
     icon: MdDashboard,
     text: "Dashboard",
-    link: "/dashboard",
-    isActive: (pathname) => pathname === "/" || pathname.startsWith("/dashboard"),
+    link: "/org/dashboard",
+    isActive: (p) => p === "/org" || p.startsWith("/org/dashboard"),
   },
   {
     icon: MdGroup,
     text: "Teams",
-    link: "/member",
-    isActive: (pathname) => pathname.startsWith("/member") || pathname.startsWith("/add-member"),
+    link: "/org/member",
+    isActive: (p) => p.startsWith("/org/member") || p.startsWith("/org/add-member"),
   },
   {
     icon: MdEvent,
     text: "Events",
-    link: "/events",
-    isActive: (pathname) => pathname.startsWith("/events") || pathname.startsWith("/create-event"),
+    link: "/org/events",
+    isActive: (p) => p.startsWith("/org/events") || p.startsWith("/org/create-event"),
   },
   {
     icon: RiContactsBookFill,
     text: "Support",
-    link: "/contact",
-    isActive: (pathname) => pathname.startsWith("/contact"),
+    link: "/org/contact",
+    isActive: (p) => p.startsWith("/org/contact"),
   },
 ];
 
 const BotamNavBar = () => {
-  const theme = getTheme("light");
   const { pathname } = useLocation();
 
   return (
     <nav
-      className="fixed inset-x-0 bottom-0 z-9999 px-3 pb-3 lg:hidden"
+      className="fixed inset-x-0 bottom-0 z-[9999] px-3 pb-3 lg:hidden"
       style={{ paddingBottom: "calc(env(safe-area-inset-bottom) + 0.75rem)" }}
       aria-label="Mobile navigation"
     >
       <div
-        className="relative mx-auto flex max-w-md items-center gap-2 overflow-hidden rounded-[30px] border px-3 py-3 backdrop-blur-xl"
-        style={{
-          borderColor: "rgba(255, 255, 255, 0.85)",
-          background: `linear-gradient(145deg, rgba(255,255,255,0.94), ${theme.background.secondary})`,
-          boxShadow: "0 24px 60px -28px rgba(15, 23, 42, 0.42)",
-        }}
+        className="cd-glass relative mx-auto flex max-w-md items-center gap-2 overflow-hidden rounded-[30px] px-3 py-3"
+        style={{ boxShadow: "0 24px 60px -28px var(--cd-shadow-md)" }}
       >
         <div
           className="pointer-events-none absolute inset-x-10 top-0 h-px"
           style={{
-            background: "linear-gradient(90deg, transparent, rgba(48,110,232,0.45), transparent)",
+            background:
+              "linear-gradient(90deg, transparent, var(--cd-primary-subtle), transparent)",
           }}
         />
 
@@ -78,30 +73,28 @@ const BotamNavBar = () => {
                 className="absolute inset-0 rounded-[24px] border transition-all duration-200"
                 style={{
                   opacity: active ? 1 : 0,
-                  borderColor: "rgba(48, 110, 232, 0.12)",
-                  background:
-                    "linear-gradient(180deg, rgba(48,110,232,0.18), rgba(48,110,232,0.06))",
+                  borderColor: "var(--cd-primary-subtle)",
+                  backgroundColor: "var(--cd-primary-subtle)",
                 }}
               />
 
               <div className="relative flex w-full flex-col items-center gap-1.5 rounded-[24px] px-2 py-2.5">
                 <div
-                  className="flex h-11 w-11 items-center justify-center rounded-[18px] border text-[1.35rem] transition-all duration-200"
+                  className="flex h-10 w-10 items-center justify-center rounded-[16px] border text-xl transition-all duration-200"
                   style={{
-                    color: active ? theme.textColor.tersiary : theme.textColor.secondary,
-                    borderColor: active ? "rgba(48, 110, 232, 0.18)" : theme.borderColor.primary,
-                    background: active ? "rgba(255,255,255,0.96)" : "rgba(255,255,255,0.58)",
-                    boxShadow: active ? "0 18px 26px -22px rgba(48,110,232,0.95)" : "none",
+                    color: active ? "var(--cd-primary)" : "var(--cd-text-2)",
+                    borderColor: active ? "var(--cd-primary-subtle)" : "var(--cd-border)",
+                    backgroundColor: active ? "var(--cd-surface)" : "transparent",
+                    boxShadow: active ? "0 4px 12px var(--cd-shadow)" : "none",
                   }}
                 >
                   <Icon />
                 </div>
 
                 <span
-                  className="max-w-full truncate text-[0.72rem] font-semibold tracking-[0.02em] transition-colors duration-200"
+                  className="max-w-full truncate text-[0.7rem] font-semibold tracking-wide transition-colors duration-200"
                   style={{
-                    color: active ? theme.textColor.primary : theme.textColor.secondary,
-                    fontFamily: theme.fontFamily.primary,
+                    color: active ? "var(--cd-primary-text)" : "var(--cd-text-2)",
                   }}
                 >
                   {item.text}
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index a33f80d..1c0abab 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,85 +1,72 @@
 import { RiContactsBookFill } from "react-icons/ri";
-import { getTheme } from "../../../../config/them.config";
 import SideBarLink from "../Components/SideBarLink";
 import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
 import { dashboardData } from "@/features/Dashboard/mock/dashboardData";
+import { ThemeToggle } from "@/Component/ui/ThemeToggle";
 
 const SideBar = () => {
-  let theme = getTheme("light");
-
   return (
     <div
-      className="sidebar w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col border-r"
-      style={{
-        borderColor: theme.borderColor.primary,
-        background: theme.background.primary,
-      }}
+      className="cd-sidebar w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col"
     >
       <div
-        className="sidebar-header p-2 border-b border-t-2  min-h-21 w-full flex  items-center justify-center"
-        style={{ borderColor: theme.borderColor.primary }}
+        className="p-2 border-b min-h-21 w-full flex items-center justify-center"
+        style={{ borderColor: "var(--cd-border)" }}
       >
         <img
           src="/logoWithoutText.png"
           alt="CommDesk logo"
-          className="w-[6vw] h-full  object-cover shrink-0"
+          className="w-[6vw] h-full object-cover shrink-0"
         />
-
         <h1
-          className="font-bold h-fit  text-[1.40em] leading-0"
-          style={{
-            color: theme.textColor.tersiary,
-            fontFamily: theme.fontFamily.primary,
-          }}
+          className="font-bold h-fit text-[1.40em] leading-none inter"
+          style={{ color: "var(--cd-primary)" }}
         >
           CommDesk
         </h1>
       </div>
-      <div className="sidebar-content flex flex-col gap-3 p-4 flex-1 w-full">
-        {/* Sidebar content goes here */}
-        <h1>Operations</h1>
-        <SideBarLink icon={<MdDashboard />} text="Dashboard" />
-        <SideBarLink icon={<MdWork />} text="Projects" />
+
+      <div className="flex flex-col gap-1 p-4 flex-1 w-full">
+        <p
+          className="text-xs font-semibold uppercase tracking-widest px-4 py-2"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
+          Operations
+        </p>
+        <SideBarLink icon={<MdDashboard />} text="Dashboard" link="/org/dashboard" />
+        <SideBarLink icon={<MdWork />} text="Projects" link="/org" />
         <SideBarLink icon={<MdGroup />} text="Teams" link="/org/member" />
         <SideBarLink icon={<MdEvent />} text="Events" link="/org/events" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
         <div
           className="mt-auto w-full border-t flex flex-col py-5"
-          style={{ borderColor: theme.borderColor.primary }}
+          style={{ borderColor: "var(--cd-border)" }}
         >
-          <div className="w-full">
-            <SideBarLink icon={<MdSettings />} text="Settings" />
+          <div className="flex items-center justify-between mb-2">
+            <SideBarLink icon={<MdSettings />} text="Settings" link="/org" />
+            <ThemeToggle />
           </div>
 
           <div
-            className="Profile mt-4 w-full rounded-lg  p-3 flex items-center gap-3 cursor-pointer  bg-[#f0f4fc]"
-            style={{
-              borderColor: theme.borderColor.primary,
-            }}
+            className="mt-3 w-full rounded-xl p-3 flex items-center gap-3 cursor-pointer transition-colors duration-150"
+            style={{ backgroundColor: "var(--cd-surface-2)" }}
           >
             <img
               src="https://randomuser.me/api/portraits/men/1.jpg"
               alt="Profile"
-              className="w-10 h-10 rounded-full object-cover shrink-0"
+              className="w-9 h-9 rounded-full object-cover shrink-0"
             />
-
-            <div className="min-w-0 flex-1 flex flex-col justify-center gap-1">
+            <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p
                 className="text-sm font-semibold truncate"
-                style={{
-                  color: theme.textColor.primary,
-                  fontFamily: theme.fontFamily.primary,
-                }}
+                style={{ color: "var(--cd-text)" }}
               >
                 {dashboardData.user.name}
               </p>
               <p
-                className="text-xs truncate font-black"
-                style={{
-                  color: theme.textColor.tersiary,
-                  fontFamily: theme.fontFamily.primary,
-                }}
+                className="text-xs truncate font-medium"
+                style={{ color: "var(--cd-primary)" }}
               >
                 {dashboardData.user.role}
               </p>
diff --git a/src/features/template/LoginUserTemplate.tsx b/src/features/template/LoginUserTemplate.tsx
index f7cbb6f..171bdb7 100644
--- a/src/features/template/LoginUserTemplate.tsx
+++ b/src/features/template/LoginUserTemplate.tsx
@@ -1,24 +1,13 @@
 import SideBar from "../SideBar/v1/Section/SideBar";
-import { getTheme } from "../../config/them.config";
 import { Outlet } from "react-router";
 import BotamNavBar from "../SideBar/v1/Section/BotamNavBar";
 
 const LoginUserTemplate = () => {
-  let theme = getTheme("light");
-
   return (
-    <div
-      className="dashboard-page flex w-screen min-h-screen overflow-x-hidden items-stretch"
-      style={{ background: theme.background.secondary }}
-    >
+    <div className="flex w-screen min-h-screen overflow-x-hidden items-stretch cd-page">
       <SideBar />
-
       <BotamNavBar />
-
-      <div
-        className="dashboard-content flex min-h-screen min-w-0 flex-1 flex-row pb-32 lg:pb-0"
-        style={{ background: theme.background.secondary }}
-      >
+      <div className="flex min-h-screen min-w-0 flex-1 flex-row pb-32 lg:pb-0">
         <Outlet />
       </div>
     </div>
diff --git a/src/main.tsx b/src/main.tsx
index 16c8fd2..d26cc80 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,13 +2,16 @@ import React from "react";
 import App from "./App";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "./theme/provider";
 
 const queryClient = new QueryClient();
 const container = document.getElementById("root");
 const root = createRoot(container!);
 
 root.render(
-  <QueryClientProvider client={queryClient}>
-    <App />
-  </QueryClientProvider>,
+  <ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </ThemeProvider>,
 );
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
new file mode 100644
index 0000000..918f717
--- /dev/null
+++ b/src/theme/colors.ts
@@ -0,0 +1,182 @@
+export const palette = {
+  // Primary – Blue
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+  },
+  // Secondary – Purple
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7c3aed",
+    800: "#6d28d9",
+    900: "#4c1d95",
+  },
+  // Tertiary – Cyan/Green
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+  },
+  // Status
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+  },
+  // Neutral
+  gray: {
+    0: "#ffffff",
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    150: "#eef2f7",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    850: "#172033",
+    900: "#0f172a",
+    950: "#080d18",
+  },
+  // Dark surfaces
+  charcoal: {
+    800: "#1a1f2e",
+    850: "#151929",
+    900: "#0f1320",
+    950: "#090d16",
+  },
+} as const;
+
+export const lightTokens = {
+  background: palette.gray[50],
+  surface: palette.gray[0],
+  surfaceSecondary: palette.gray[100],
+  surfaceTertiary: palette.gray[150],
+  border: palette.gray[200],
+  borderSubtle: palette.gray[100],
+  textPrimary: palette.gray[800],
+  textSecondary: palette.gray[500],
+  textMuted: palette.gray[400],
+  textInverse: palette.gray[0],
+  primary: palette.blue[600],
+  primaryHover: palette.blue[700],
+  primarySubtle: palette.blue[50],
+  primaryText: palette.blue[700],
+  secondary: palette.purple[600],
+  secondaryHover: palette.purple[700],
+  secondarySubtle: palette.purple[50],
+  accent: palette.cyan[500],
+  accentSubtle: palette.cyan[50],
+  success: palette.green[600],
+  successSubtle: palette.green[50],
+  successText: palette.green[700],
+  warning: palette.yellow[600],
+  warningSubtle: palette.yellow[50],
+  warningText: palette.yellow[700],
+  danger: palette.red[600],
+  dangerSubtle: palette.red[50],
+  dangerText: palette.red[700],
+  info: palette.blue[600],
+  infoSubtle: palette.blue[50],
+  infoText: palette.blue[700],
+  hover: palette.gray[100],
+  active: palette.gray[150],
+  focus: palette.blue[500],
+  disabled: palette.gray[300],
+  disabledText: palette.gray[400],
+  overlay: "rgba(15, 23, 42, 0.4)",
+  shadow: "rgba(15, 23, 42, 0.08)",
+  shadowMd: "rgba(15, 23, 42, 0.12)",
+  shadowLg: "rgba(15, 23, 42, 0.16)",
+} as const;
+
+export const darkTokens = {
+  background: palette.charcoal[900],
+  surface: palette.charcoal[800],
+  surfaceSecondary: palette.charcoal[850],
+  surfaceTertiary: palette.gray[800],
+  border: "rgba(255,255,255,0.08)",
+  borderSubtle: "rgba(255,255,255,0.04)",
+  textPrimary: palette.gray[50],
+  textSecondary: palette.gray[400],
+  textMuted: palette.gray[500],
+  textInverse: palette.gray[900],
+  primary: palette.blue[500],
+  primaryHover: palette.blue[400],
+  primarySubtle: "rgba(59,130,246,0.12)",
+  primaryText: palette.blue[300],
+  secondary: palette.purple[500],
+  secondaryHover: palette.purple[400],
+  secondarySubtle: "rgba(168,85,247,0.12)",
+  accent: palette.cyan[400],
+  accentSubtle: "rgba(34,211,238,0.10)",
+  success: palette.green[400],
+  successSubtle: "rgba(74,222,128,0.10)",
+  successText: palette.green[400],
+  warning: palette.yellow[400],
+  warningSubtle: "rgba(250,204,21,0.10)",
+  warningText: palette.yellow[400],
+  danger: palette.red[400],
+  dangerSubtle: "rgba(248,113,113,0.10)",
+  dangerText: palette.red[400],
+  info: palette.blue[400],
+  infoSubtle: "rgba(96,165,250,0.10)",
+  infoText: palette.blue[300],
+  hover: "rgba(255,255,255,0.05)",
+  active: "rgba(255,255,255,0.08)",
+  focus: palette.blue[400],
+  disabled: palette.gray[700],
+  disabledText: palette.gray[600],
+  overlay: "rgba(0,0,0,0.6)",
+  shadow: "rgba(0,0,0,0.3)",
+  shadowMd: "rgba(0,0,0,0.4)",
+  shadowLg: "rgba(0,0,0,0.5)",
+} as const;
diff --git a/src/theme/hooks/useTheme.ts b/src/theme/hooks/useTheme.ts
new file mode 100644
index 0000000..8b9e469
--- /dev/null
+++ b/src/theme/hooks/useTheme.ts
@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ThemeContext } from "../provider";
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  return ctx;
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..6aec453
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,7 @@
+export { ThemeProvider, ThemeContext } from "./provider";
+export { themes, getTheme, type ThemeMode, type Theme } from "./theme.config";
+export { useTheme } from "./hooks/useTheme";
+export { palette, lightTokens, darkTokens } from "./colors";
+export { typography } from "./typography";
+export { lightShadows, darkShadows } from "./shadows";
+export { spacing, radius } from "./spacing";
diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx
new file mode 100644
index 0000000..d060c84
--- /dev/null
+++ b/src/theme/provider.tsx
@@ -0,0 +1,56 @@
+import React, { createContext, useCallback, useEffect, useState } from "react";
+import { type ThemeMode, themes, type Theme } from "./theme.config";
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  theme: Theme;
+  toggle: () => void;
+  setMode: (mode: ThemeMode) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = "commdesk-theme";
+
+function resolveInitialMode(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY) as ThemeMode | null;
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {}
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>(resolveInitialMode);
+
+  const applyMode = useCallback((m: ThemeMode) => {
+    const root = document.documentElement;
+    root.classList.toggle("dark", m === "dark");
+    root.setAttribute("data-theme", m);
+  }, []);
+
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+
+  const setMode = useCallback(
+    (m: ThemeMode) => {
+      setModeState(m);
+      try {
+        localStorage.setItem(STORAGE_KEY, m);
+      } catch {}
+      applyMode(m);
+    },
+    [applyMode],
+  );
+
+  const toggle = useCallback(() => {
+    setMode(mode === "light" ? "dark" : "light");
+  }, [mode, setMode]);
+
+  return (
+    <ThemeContext.Provider value={{ mode, theme: themes[mode], toggle, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts
new file mode 100644
index 0000000..f1d602d
--- /dev/null
+++ b/src/theme/shadows.ts
@@ -0,0 +1,24 @@
+export const lightShadows = {
+  sm: "0 1px 2px rgba(15,23,42,0.06)",
+  md: "0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06)",
+  lg: "0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.06)",
+  xl: "0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.06)",
+  card: "0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04)",
+  cardHover: "0 4px 12px rgba(15,23,42,0.12)",
+  inner: "inset 0 2px 4px rgba(15,23,42,0.06)",
+} as const;
+
+export const darkShadows = {
+  sm: "0 1px 2px rgba(0,0,0,0.3)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.4)",
+  card: "0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3)",
+  cardHover: "0 4px 12px rgba(0,0,0,0.5)",
+  inner: "inset 0 2px 4px rgba(0,0,0,0.3)",
+  // Glow accents for dark mode
+  glowBlue: "0 0 20px rgba(59,130,246,0.25)",
+  glowPurple: "0 0 20px rgba(168,85,247,0.25)",
+  glowCyan: "0 0 20px rgba(34,211,238,0.20)",
+  glowGreen: "0 0 20px rgba(74,222,128,0.20)",
+} as const;
diff --git a/src/theme/spacing.ts b/src/theme/spacing.ts
new file mode 100644
index 0000000..d034ade
--- /dev/null
+++ b/src/theme/spacing.ts
@@ -0,0 +1,26 @@
+export const spacing = {
+  0: "0",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+} as const;
+
+export const radius = {
+  none: "0",
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem",
+  "2xl": "1.25rem",
+  "3xl": "1.5rem",
+  full: "9999px",
+} as const;
diff --git a/src/theme/theme.config.ts b/src/theme/theme.config.ts
new file mode 100644
index 0000000..b34d695
--- /dev/null
+++ b/src/theme/theme.config.ts
@@ -0,0 +1,46 @@
+import { lightTokens, darkTokens } from "./colors";
+import { typography } from "./typography";
+import { lightShadows, darkShadows } from "./shadows";
+import { spacing, radius } from "./spacing";
+
+export type ThemeMode = "light" | "dark";
+
+export const themes = {
+  light: {
+    colors: lightTokens,
+    typography,
+    shadows: lightShadows,
+    spacing,
+    radius,
+    gradients: {
+      primary: "linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)",
+      secondary: "linear-gradient(135deg, #a855f7 0%, #6366f1 100%)",
+      accent: "linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)",
+      surface: "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)",
+      hero: "linear-gradient(135deg, #eff6ff 0%, #faf5ff 50%, #ecfeff 100%)",
+    },
+  },
+  dark: {
+    colors: darkTokens,
+    typography,
+    shadows: darkShadows,
+    spacing,
+    radius,
+    gradients: {
+      primary: "linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%)",
+      secondary: "linear-gradient(135deg, #a855f7 0%, #6366f1 100%)",
+      accent: "linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%)",
+      surface: "linear-gradient(135deg, #1a1f2e 0%, #151929 100%)",
+      hero: "linear-gradient(135deg, #0f1320 0%, #1a1f2e 50%, #151929 100%)",
+    },
+  },
+} as const;
+
+export type Theme = (typeof themes)["light"];
+
+export function getTheme(mode: ThemeMode): Theme {
+  return themes[mode];
+}
+
+// Legacy compat — keeps old callers working while migration proceeds
+export type { ThemeMode as default };
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
new file mode 100644
index 0000000..d80d76e
--- /dev/null
+++ b/src/theme/typography.ts
@@ -0,0 +1,36 @@
+export const typography = {
+  fontFamily: {
+    sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+  },
+  lineHeight: {
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+  },
+  letterSpacing: {
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+  },
+} as const;

From c5028b738f96ab80ca9fb1e5168a6c4b5e0eb475 Mon Sep 17 00:00:00 2001
From: yashyrs027 <yashyrsgupta@gmail.com>
Date: Thu, 7 May 2026 10:58:46 +0530
Subject: [PATCH 2/2] All changes

---
 src/Component/ui/Button.tsx                   |  12 +-
 src/Component/ui/DropDown.tsx                 |  35 ++--
 src/Component/ui/Input.tsx                    |  19 ++-
 src/Component/ui/TextArea.tsx                 |  13 +-
 src/Component/ui/ThemeToggle.tsx              |  14 +-
 src/config/them.config.ts                     |   6 +-
 .../Dashboard/components/ActivityFeed.tsx     |  32 ++--
 .../Dashboard/components/BudgetCard.tsx       |  83 ++++------
 .../Dashboard/components/IssuesPanel.tsx      |  54 ++----
 .../Dashboard/components/PerformanceStats.tsx |  31 ++--
 .../Dashboard/components/SummaryCard.tsx      |  35 ++--
 .../SideBar/v1/Components/SideBarLink.tsx     |  28 +++-
 .../SideBar/v1/Section/BotamNavBar.tsx        |  35 ++--
 src/features/SideBar/v1/Section/SideBar.tsx   |  37 +++--
 src/theme/hooks/useTheme.ts                   |  13 +-
 src/theme/index.ts                            |   6 +-
 src/theme/provider.tsx                        |  26 ++-
 src/theme/theme.config.ts                     | 155 +++++++++++++-----
 18 files changed, 351 insertions(+), 283 deletions(-)

diff --git a/src/Component/ui/Button.tsx b/src/Component/ui/Button.tsx
index 96d83f9..5cd0949 100644
--- a/src/Component/ui/Button.tsx
+++ b/src/Component/ui/Button.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTheme } from "@/theme";
 
 type ButtonProps = {
   text: string;
@@ -11,7 +12,16 @@ type ButtonProps = {
   className?: string;
 };
 
-const Button = ({ text, icon, onClick, disabled, width, height, variant = "primary", className = "" }: ButtonProps) => {
+const Button = ({
+  text,
+  icon,
+  onClick,
+  disabled,
+  width,
+  height,
+  variant = "primary",
+  className = "",
+}: ButtonProps) => {
   const variantClass = disabled
     ? "bg-[var(--cd-surface-2)] text-[var(--cd-text-muted)] cursor-not-allowed"
     : variant === "secondary"
diff --git a/src/Component/ui/DropDown.tsx b/src/Component/ui/DropDown.tsx
index 3f6efb0..57eda56 100644
--- a/src/Component/ui/DropDown.tsx
+++ b/src/Component/ui/DropDown.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { FaChevronDown } from "react-icons/fa";
+import { useTheme } from "@/theme";
 
 type DropDownProps = {
   options: string[];
@@ -20,15 +21,13 @@ const DropDown: React.FC<DropDownProps> = ({
   placeholder = "Select an option",
   disabled = false,
 }) => {
+  const { theme } = useTheme();
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState(value ?? options[0] ?? "");
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (value !== undefined) {
-      setSelected(value);
-      return;
-    }
+    if (value !== undefined) { setSelected(value); return; }
     setSelected((prev) => (prev && options.includes(prev) ? prev : (options[0] ?? "")));
   }, [options, value]);
 
@@ -47,14 +46,12 @@ const DropDown: React.FC<DropDownProps> = ({
     setOpen(false);
   };
 
-  const isDisabled = disabled || options.length === 0;
-
   return (
     <div ref={containerRef} className={`relative w-full ${className || ""}`}>
       {label && (
         <p
           className="text-xs font-semibold uppercase tracking-wider mb-1.5"
-          style={{ color: "var(--cd-text-2)" }}
+          style={{ color: theme.text.secondary }}
         >
           {label}
         </p>
@@ -63,21 +60,20 @@ const DropDown: React.FC<DropDownProps> = ({
       <button
         type="button"
         onClick={() => setOpen((prev) => !prev)}
-        disabled={isDisabled}
+        disabled={disabled || options.length === 0}
         aria-haspopup="listbox"
         aria-expanded={open}
         className="w-full rounded-lg px-3 py-2 text-left flex justify-between items-center text-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-60"
         style={{
-          backgroundColor: "var(--cd-surface)",
-          borderColor: "var(--cd-border)",
-          color: selected ? "var(--cd-text)" : "var(--cd-text-muted)",
-          border: "1px solid var(--cd-border)",
+          backgroundColor: theme.bg.surface,
+          border: `1px solid ${theme.border.default}`,
+          color: selected ? theme.text.primary : theme.text.muted,
         }}
       >
         <span className="truncate">{selected || placeholder}</span>
         <FaChevronDown
           className={`ml-2 shrink-0 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
-          style={{ color: "var(--cd-text-muted)" }}
+          style={{ color: theme.text.muted }}
         />
       </button>
 
@@ -85,9 +81,9 @@ const DropDown: React.FC<DropDownProps> = ({
         <div
           className="absolute mt-1 w-full rounded-lg z-20 overflow-hidden max-h-60 overflow-y-auto"
           style={{
-            backgroundColor: "var(--cd-surface)",
-            border: "1px solid var(--cd-border)",
-            boxShadow: "0 8px 24px var(--cd-shadow-md)",
+            backgroundColor: theme.bg.surface,
+            border: `1px solid ${theme.border.default}`,
+            boxShadow: `0 8px 24px ${theme.shadow.md}`,
           }}
           role="listbox"
         >
@@ -98,13 +94,12 @@ const DropDown: React.FC<DropDownProps> = ({
               onClick={() => handleSelect(opt)}
               className="w-full px-3 py-2 text-left text-sm transition-colors duration-100"
               style={{
-                backgroundColor: selected === opt ? "var(--cd-primary-subtle)" : "transparent",
-                color: selected === opt ? "var(--cd-primary-text)" : "var(--cd-text)",
+                backgroundColor: selected === opt ? theme.primary.subtle : "transparent",
+                color: selected === opt ? theme.primary.text : theme.text.primary,
               }}
               onMouseEnter={(e) => {
                 if (selected !== opt)
-                  (e.currentTarget as HTMLButtonElement).style.backgroundColor =
-                    "var(--cd-hover)";
+                  (e.currentTarget as HTMLButtonElement).style.backgroundColor = theme.interactive.hover;
               }}
               onMouseLeave={(e) => {
                 if (selected !== opt)
diff --git a/src/Component/ui/Input.tsx b/src/Component/ui/Input.tsx
index b0a3798..629f819 100644
--- a/src/Component/ui/Input.tsx
+++ b/src/Component/ui/Input.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { useTheme } from "@/theme";
 
 type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "time";
 
@@ -39,13 +40,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
+    const { theme } = useTheme();
+
     return (
       <div className={`flex flex-col gap-1.5 mb-4 ${className}`}>
         {label && (
           <label
             htmlFor={name}
             className="text-xs font-semibold uppercase tracking-wider"
-            style={{ color: "var(--cd-text-2)" }}
+            style={{ color: theme.text.secondary }}
           >
             {label}
           </label>
@@ -54,13 +57,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <div
           className="flex items-center gap-2 rounded-lg px-3 py-2 border transition-all duration-150"
           style={{
-            backgroundColor: "var(--cd-surface)",
-            borderColor: error ? "var(--cd-danger)" : "var(--cd-border)",
-            boxShadow: error ? "0 0 0 3px var(--cd-danger-subtle)" : undefined,
+            backgroundColor: theme.bg.surface,
+            borderColor: error ? theme.danger.default : theme.border.default,
+            boxShadow: error ? `0 0 0 3px ${theme.danger.subtle}` : undefined,
           }}
         >
           {leftIcon && (
-            <div className="flex items-center" style={{ color: "var(--cd-text-muted)" }}>
+            <div className="flex items-center" style={{ color: theme.text.muted }}>
               {leftIcon}
             </div>
           )}
@@ -77,18 +80,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             onKeyDown={onKeyDown}
             onChange={(e) => onChange?.(name, e.target.value)}
             className={`flex-1 bg-transparent outline-none text-sm ${inputClassName}`}
-            style={{ color: "var(--cd-text)" }}
+            style={{ color: theme.text.primary }}
           />
 
           {rightIcon && (
-            <div className="flex items-center" style={{ color: "var(--cd-text-muted)" }}>
+            <div className="flex items-center" style={{ color: theme.text.muted }}>
               {rightIcon}
             </div>
           )}
         </div>
 
         {error && (
-          <span className="text-xs" style={{ color: "var(--cd-danger)" }}>
+          <span className="text-xs" style={{ color: theme.danger.default }}>
             {error}
           </span>
         )}
diff --git a/src/Component/ui/TextArea.tsx b/src/Component/ui/TextArea.tsx
index 4df50d1..d8a7175 100644
--- a/src/Component/ui/TextArea.tsx
+++ b/src/Component/ui/TextArea.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTheme } from "@/theme";
 
 type TextAreaProps = {
   label?: string;
@@ -17,13 +18,15 @@ type TextAreaProps = {
 };
 
 export const TextArea = (props: TextAreaProps) => {
+  const { theme } = useTheme();
+
   return (
     <div className={`flex flex-col gap-1.5 mb-4 ${props.className || ""}`}>
       {props.label && (
         <label
           className="text-xs font-semibold uppercase tracking-wider"
           htmlFor={props.name}
-          style={{ color: "var(--cd-text-2)" }}
+          style={{ color: theme.text.secondary }}
         >
           {props.label}
         </label>
@@ -43,14 +46,14 @@ export const TextArea = (props: TextAreaProps) => {
         maxLength={props.maxLength}
         className="rounded-lg p-3 text-sm resize-y outline-none border transition-all duration-150"
         style={{
-          backgroundColor: "var(--cd-surface)",
-          borderColor: props.error ? "var(--cd-danger)" : "var(--cd-border)",
-          color: "var(--cd-text)",
+          backgroundColor: theme.bg.surface,
+          borderColor: props.error ? theme.danger.default : theme.border.default,
+          color: theme.text.primary,
         }}
       />
 
       {props.error && (
-        <span className="text-xs" style={{ color: "var(--cd-danger)" }}>
+        <span className="text-xs" style={{ color: theme.danger.default }}>
           {props.error}
         </span>
       )}
diff --git a/src/Component/ui/ThemeToggle.tsx b/src/Component/ui/ThemeToggle.tsx
index 1cca083..bc2918a 100644
--- a/src/Component/ui/ThemeToggle.tsx
+++ b/src/Component/ui/ThemeToggle.tsx
@@ -1,8 +1,8 @@
 import { Moon, Sun } from "lucide-react";
-import { useTheme } from "@/theme/hooks/useTheme";
+import { useTheme } from "@/theme";
 
 export function ThemeToggle() {
-  const { mode, toggle } = useTheme();
+  const { mode, toggle, theme } = useTheme();
 
   return (
     <button
@@ -10,15 +10,15 @@ export function ThemeToggle() {
       aria-label={`Switch to ${mode === "light" ? "dark" : "light"} mode`}
       className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-150"
       style={{
-        backgroundColor: "var(--cd-surface-2)",
-        color: "var(--cd-text-2)",
-        border: "1px solid var(--cd-border)",
+        backgroundColor: theme.bg.surfaceSecondary,
+        color: theme.text.secondary,
+        border: `1px solid ${theme.border.default}`,
       }}
       onMouseEnter={(e) =>
-        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-hover)")
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = theme.interactive.hover)
       }
       onMouseLeave={(e) =>
-        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "var(--cd-surface-2)")
+        ((e.currentTarget as HTMLButtonElement).style.backgroundColor = theme.bg.surfaceSecondary)
       }
     >
       {mode === "light" ? <Moon size={16} /> : <Sun size={16} />}
diff --git a/src/config/them.config.ts b/src/config/them.config.ts
index 00f7846..4dcc305 100644
--- a/src/config/them.config.ts
+++ b/src/config/them.config.ts
@@ -1,3 +1,3 @@
-// Re-exports from the new centralized theme system.
-// Kept for backward compatibility — prefer importing from @/theme directly.
-export { getTheme, themes, type ThemeMode, type Theme } from "../theme/theme.config";
+// Legacy shim — kept so old imports don't break during migration.
+// New code should import directly from "@/theme".
+export { theme as getTheme, type ThemeMode, type ThemeTokens as Theme } from "../theme/theme.config";
diff --git a/src/features/Dashboard/components/ActivityFeed.tsx b/src/features/Dashboard/components/ActivityFeed.tsx
index ec80a8b..7065ab3 100644
--- a/src/features/Dashboard/components/ActivityFeed.tsx
+++ b/src/features/Dashboard/components/ActivityFeed.tsx
@@ -1,31 +1,22 @@
 import { CheckCircle, MessageSquare, Bell } from "lucide-react";
 import { ActivityItem } from "@/features/Dashboard/types/dashboard";
+import { useTheme } from "@/theme";
 
 interface Props {
   activities: ActivityItem[];
 }
 
 export default function ActivityFeed({ activities }: Props) {
+  const { theme } = useTheme();
+
   const getConfig = (type: ActivityItem["type"]) => {
     switch (type) {
       case "completed":
-        return {
-          icon: <CheckCircle size={15} />,
-          color: "var(--cd-success)",
-          subtle: "var(--cd-success-subtle)",
-        };
+        return { icon: <CheckCircle size={15} />, color: theme.success.default, subtle: theme.success.subtle };
       case "comment":
-        return {
-          icon: <MessageSquare size={15} />,
-          color: "var(--cd-warning)",
-          subtle: "var(--cd-warning-subtle)",
-        };
+        return { icon: <MessageSquare size={15} />, color: theme.warning.default, subtle: theme.warning.subtle };
       default:
-        return {
-          icon: <Bell size={15} />,
-          color: "var(--cd-primary)",
-          subtle: "var(--cd-primary-subtle)",
-        };
+        return { icon: <Bell size={15} />, color: theme.primary.default, subtle: theme.primary.subtle };
     }
   };
 
@@ -40,10 +31,7 @@ export default function ActivityFeed({ activities }: Props) {
             <div
               key={activity.id}
               className="flex items-start gap-3 p-3 rounded-xl border transition-all duration-200 hover:-translate-y-[1px]"
-              style={{
-                backgroundColor: cfg.subtle,
-                borderColor: "var(--cd-border-subtle)",
-              }}
+              style={{ backgroundColor: cfg.subtle, borderColor: theme.border.subtle }}
             >
               <div
                 className="p-1.5 rounded-lg flex items-center justify-center shrink-0"
@@ -52,10 +40,10 @@ export default function ActivityFeed({ activities }: Props) {
                 {cfg.icon}
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium break-words" style={{ color: "var(--cd-text)" }}>
+                <p className="text-sm font-medium break-words" style={{ color: theme.text.primary }}>
                   {activity.text}
                 </p>
-                <p className="text-xs mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+                <p className="text-xs mt-0.5" style={{ color: theme.text.muted }}>
                   {activity.time}
                 </p>
               </div>
@@ -64,7 +52,7 @@ export default function ActivityFeed({ activities }: Props) {
         })}
 
         {activities.length === 0 && (
-          <p className="text-sm text-center py-4" style={{ color: "var(--cd-text-muted)" }}>
+          <p className="text-sm text-center py-4" style={{ color: theme.text.muted }}>
             No recent activity
           </p>
         )}
diff --git a/src/features/Dashboard/components/BudgetCard.tsx b/src/features/Dashboard/components/BudgetCard.tsx
index 3ffe0a8..1ee24d4 100644
--- a/src/features/Dashboard/components/BudgetCard.tsx
+++ b/src/features/Dashboard/components/BudgetCard.tsx
@@ -1,113 +1,90 @@
 import { Rewards } from "@/features/Dashboard/types/dashboard";
 import { Gift, Star, Wallet } from "lucide-react";
+import { useTheme } from "@/theme";
 
 interface Props {
   data: Rewards;
 }
 
 export default function BudgetCard({ data }: Props) {
+  const { theme } = useTheme();
   const progress = data.nextReward > 0 ? (data.points / data.nextReward) * 100 : 0;
 
   return (
     <div className="cd-card cd-card-hover">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="cd-section-title" style={{ marginBottom: 0 }}>
-          Rewards & Earnings
-        </h3>
-        <Gift size={18} style={{ color: "var(--cd-primary)" }} />
+        <h3 className="cd-section-title" style={{ marginBottom: 0 }}>Rewards & Earnings</h3>
+        <Gift size={18} style={{ color: theme.primary.default }} />
       </div>
 
+      {/* Points */}
       <div
         className="p-4 rounded-xl mb-4 transition-transform hover:scale-[1.01]"
-        style={{ backgroundColor: "var(--cd-primary-subtle)" }}
+        style={{ backgroundColor: theme.primary.subtle }}
       >
-        <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-          Your Points
-        </p>
+        <p className="text-xs" style={{ color: theme.text.secondary }}>Your Points</p>
         <div className="flex items-center gap-2">
-          <Star size={18} style={{ color: "var(--cd-primary)" }} />
-          <p className="text-3xl font-bold" style={{ color: "var(--cd-primary)" }}>
+          <Star size={18} style={{ color: theme.primary.default }} />
+          <p className="text-3xl font-bold" style={{ color: theme.primary.default }}>
             {data.points}
           </p>
         </div>
         <div className="mt-3">
-          <div
-            className="w-full h-1.5 rounded-full overflow-hidden"
-            style={{ backgroundColor: "var(--cd-border)" }}
-          >
+          <div className="w-full h-1.5 rounded-full overflow-hidden" style={{ backgroundColor: theme.border.default }}>
             <div
               className="h-1.5 rounded-full transition-all duration-700"
-              style={{
-                width: `${Math.min(progress, 100)}%`,
-                backgroundColor: "var(--cd-primary)",
-              }}
+              style={{ width: `${Math.min(progress, 100)}%`, backgroundColor: theme.primary.default }}
             />
           </div>
-          <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
+          <p className="text-xs mt-1" style={{ color: theme.text.muted }}>
             {data.nextReward - data.points} pts to next reward
           </p>
         </div>
       </div>
 
+      {/* Stats */}
       <div className="grid grid-cols-2 gap-3 mb-4">
         {data.stipend !== undefined && (
           <div
             className="p-3 rounded-xl flex items-center gap-2 hover:scale-[1.02] transition"
-            style={{ backgroundColor: "var(--cd-success-subtle)" }}
+            style={{ backgroundColor: theme.success.subtle }}
           >
-            <Wallet size={15} style={{ color: "var(--cd-success)" }} />
+            <Wallet size={15} style={{ color: theme.success.default }} />
             <div>
-              <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-                Stipend
-              </p>
-              <p className="text-sm font-semibold" style={{ color: "var(--cd-success)" }}>
-                ₹{data.stipend}
-              </p>
+              <p className="text-xs" style={{ color: theme.text.secondary }}>Stipend</p>
+              <p className="text-sm font-semibold" style={{ color: theme.success.default }}>₹{data.stipend}</p>
             </div>
           </div>
         )}
         {data.rewardsEarned !== undefined && (
           <div
             className="p-3 rounded-xl flex items-center gap-2 hover:scale-[1.02] transition"
-            style={{ backgroundColor: "var(--cd-warning-subtle)" }}
+            style={{ backgroundColor: theme.warning.subtle }}
           >
-            <Gift size={15} style={{ color: "var(--cd-warning)" }} />
+            <Gift size={15} style={{ color: theme.warning.default }} />
             <div>
-              <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-                Rewards
-              </p>
-              <p className="text-sm font-semibold" style={{ color: "var(--cd-warning)" }}>
-                {data.rewardsEarned}
-              </p>
+              <p className="text-xs" style={{ color: theme.text.secondary }}>Rewards</p>
+              <p className="text-sm font-semibold" style={{ color: theme.warning.default }}>{data.rewardsEarned}</p>
             </div>
           </div>
         )}
       </div>
 
+      {/* Next reward */}
       <div
-        className="p-3 rounded-xl flex justify-between items-center transition-colors"
-        style={{ backgroundColor: "var(--cd-surface-2)" }}
-        onMouseEnter={(e) =>
-          ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-hover)")
-        }
-        onMouseLeave={(e) =>
-          ((e.currentTarget as HTMLDivElement).style.backgroundColor = "var(--cd-surface-2)")
-        }
+        className="p-3 rounded-xl flex justify-between items-center transition-colors cursor-pointer"
+        style={{ backgroundColor: theme.bg.surfaceSecondary }}
+        onMouseEnter={(e) => ((e.currentTarget as HTMLDivElement).style.backgroundColor = theme.interactive.hover)}
+        onMouseLeave={(e) => ((e.currentTarget as HTMLDivElement).style.backgroundColor = theme.bg.surfaceSecondary)}
       >
         <div>
-          <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-            Next Reward
-          </p>
+          <p className="text-xs" style={{ color: theme.text.secondary }}>Next Reward</p>
           <div className="flex items-center gap-2">
-            <Gift size={15} style={{ color: "var(--cd-primary)" }} />
-            <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
-              Amazon Voucher
-            </p>
+            <Gift size={15} style={{ color: theme.primary.default }} />
+            <p className="text-sm font-medium" style={{ color: theme.text.primary }}>Amazon Voucher</p>
           </div>
         </div>
-        <span className="text-xs" style={{ color: "var(--cd-primary)" }}>
-          {data.nextReward} pts
-        </span>
+        <span className="text-xs" style={{ color: theme.primary.default }}>{data.nextReward} pts</span>
       </div>
     </div>
   );
diff --git a/src/features/Dashboard/components/IssuesPanel.tsx b/src/features/Dashboard/components/IssuesPanel.tsx
index e5b4679..8ab8578 100644
--- a/src/features/Dashboard/components/IssuesPanel.tsx
+++ b/src/features/Dashboard/components/IssuesPanel.tsx
@@ -1,11 +1,13 @@
 import { Issues } from "@/features/Dashboard/types/dashboard";
 import { AlertCircle, CheckCircle, AlertTriangle } from "lucide-react";
+import { useTheme } from "@/theme";
 
 interface Props {
   data: Issues;
 }
 
 export default function IssuesPanel({ data }: Props) {
+  const { theme } = useTheme();
   const total = data.open + data.resolved;
   const resolvedPercent = total > 0 ? Math.round((data.resolved / total) * 100) : 0;
   const hasIssues = data.open > 0;
@@ -17,58 +19,38 @@ export default function IssuesPanel({ data }: Props) {
       <div className="grid grid-cols-2 gap-3 mb-4">
         <div
           className="p-3 rounded-xl flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-[1px]"
-          style={{
-            backgroundColor: "var(--cd-danger-subtle)",
-            border: "1px solid var(--cd-border-subtle)",
-          }}
+          style={{ backgroundColor: theme.danger.subtle, border: `1px solid ${theme.border.subtle}` }}
           onClick={() => alert("View open issues")}
         >
-          <AlertCircle size={17} style={{ color: "var(--cd-danger)" }} />
+          <AlertCircle size={17} style={{ color: theme.danger.default }} />
           <div>
-            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-              Open
-            </p>
-            <p className="text-lg font-semibold" style={{ color: "var(--cd-danger)" }}>
-              {data.open}
-            </p>
+            <p className="text-xs" style={{ color: theme.text.secondary }}>Open</p>
+            <p className="text-lg font-semibold" style={{ color: theme.danger.default }}>{data.open}</p>
           </div>
         </div>
 
         <div
           className="p-3 rounded-xl flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-[1px]"
-          style={{
-            backgroundColor: "var(--cd-success-subtle)",
-            border: "1px solid var(--cd-border-subtle)",
-          }}
+          style={{ backgroundColor: theme.success.subtle, border: `1px solid ${theme.border.subtle}` }}
           onClick={() => alert("View resolved issues")}
         >
-          <CheckCircle size={17} style={{ color: "var(--cd-success)" }} />
+          <CheckCircle size={17} style={{ color: theme.success.default }} />
           <div>
-            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
-              Resolved
-            </p>
-            <p className="text-lg font-semibold" style={{ color: "var(--cd-success)" }}>
-              {data.resolved}
-            </p>
+            <p className="text-xs" style={{ color: theme.text.secondary }}>Resolved</p>
+            <p className="text-lg font-semibold" style={{ color: theme.success.default }}>{data.resolved}</p>
           </div>
         </div>
       </div>
 
       <div className="mb-3">
-        <div className="flex justify-between text-xs mb-1" style={{ color: "var(--cd-text-2)" }}>
+        <div className="flex justify-between text-xs mb-1" style={{ color: theme.text.secondary }}>
           <span>Resolution Progress</span>
           <span>{resolvedPercent}%</span>
         </div>
-        <div
-          className="w-full h-1.5 rounded-full overflow-hidden"
-          style={{ backgroundColor: "var(--cd-border)" }}
-        >
+        <div className="w-full h-1.5 rounded-full overflow-hidden" style={{ backgroundColor: theme.border.default }}>
           <div
             className="h-1.5 rounded-full transition-all duration-700"
-            style={{
-              width: `${resolvedPercent}%`,
-              backgroundColor: "var(--cd-primary)",
-            }}
+            style={{ width: `${resolvedPercent}%`, backgroundColor: theme.primary.default }}
           />
         </div>
       </div>
@@ -76,17 +58,15 @@ export default function IssuesPanel({ data }: Props) {
       <div
         className="mt-4 p-3 rounded-xl border text-sm flex items-start gap-2 cursor-pointer transition-colors"
         style={{
-          backgroundColor: hasIssues ? "var(--cd-warning-subtle)" : "var(--cd-success-subtle)",
-          borderColor: "var(--cd-border-subtle)",
-          color: hasIssues ? "var(--cd-warning)" : "var(--cd-success)",
+          backgroundColor: hasIssues ? theme.warning.subtle : theme.success.subtle,
+          borderColor: theme.border.subtle,
+          color: hasIssues ? theme.warning.default : theme.success.default,
         }}
         onClick={() => alert("Review issues")}
       >
         <AlertTriangle size={15} className="mt-[2px]" />
         <span>
-          {hasIssues
-            ? `${data.open} issue(s) need attention`
-            : "All issues are resolved — great job!"}
+          {hasIssues ? `${data.open} issue(s) need attention` : "All issues are resolved — great job!"}
         </span>
       </div>
     </div>
diff --git a/src/features/Dashboard/components/PerformanceStats.tsx b/src/features/Dashboard/components/PerformanceStats.tsx
index 7cb73d1..daceb8d 100644
--- a/src/features/Dashboard/components/PerformanceStats.tsx
+++ b/src/features/Dashboard/components/PerformanceStats.tsx
@@ -1,5 +1,6 @@
 import { Performance } from "../types/dashboard";
 import { LineChart, Line, XAxis, Tooltip, ResponsiveContainer } from "recharts";
+import { useTheme } from "@/theme";
 
 interface Props {
   data: Performance;
@@ -16,19 +17,23 @@ const trendData = [
 ];
 
 export default function PerformanceStats({ data }: Props) {
+  const { theme } = useTheme();
+
+  const metrics = [
+    { label: "Completion Rate", value: `${data.completionRate}%`, color: theme.success.default },
+    { label: "Avg Completion", value: data.avgTime, color: theme.primary.default },
+    { label: "Streak", value: `${data.streak} days 🔥`, color: theme.warning.default },
+    { label: "Weekly Done", value: data.weeklyCompleted, color: theme.accent.default },
+  ];
+
   return (
     <div className="cd-card">
       <h3 className="cd-section-title">Performance Overview</h3>
 
       <div className="grid grid-cols-2 gap-3 mb-5">
-        {[
-          { label: "Completion Rate", value: `${data.completionRate}%`, color: "var(--cd-success)" },
-          { label: "Avg Completion", value: data.avgTime, color: "var(--cd-primary)" },
-          { label: "Streak", value: `${data.streak} days 🔥`, color: "var(--cd-warning)" },
-          { label: "Weekly Done", value: data.weeklyCompleted, color: "var(--cd-accent)" },
-        ].map((m) => (
+        {metrics.map((m) => (
           <div key={m.label} className="cd-metric">
-            <p className="text-xs" style={{ color: "var(--cd-text-2)" }}>
+            <p className="text-xs" style={{ color: theme.text.secondary }}>
               {m.label}
             </p>
             <p className="text-xl font-semibold" style={{ color: m.color }}>
@@ -41,21 +46,21 @@ export default function PerformanceStats({ data }: Props) {
       <div className="h-40">
         <ResponsiveContainer width="100%" height="100%">
           <LineChart data={trendData}>
-            <XAxis dataKey="day" fontSize={11} stroke="var(--cd-text-muted)" />
+            <XAxis dataKey="day" fontSize={11} stroke={theme.text.muted} />
             <Tooltip
               contentStyle={{
-                backgroundColor: "var(--cd-surface)",
-                border: "1px solid var(--cd-border)",
+                backgroundColor: theme.bg.surface,
+                border: `1px solid ${theme.border.default}`,
                 borderRadius: "0.5rem",
-                color: "var(--cd-text)",
+                color: theme.text.primary,
               }}
             />
             <Line
               type="monotone"
               dataKey="tasks"
-              stroke="var(--cd-primary)"
+              stroke={theme.primary.default}
               strokeWidth={2.5}
-              dot={{ r: 3, fill: "var(--cd-primary)" }}
+              dot={{ r: 3, fill: theme.primary.default }}
             />
           </LineChart>
         </ResponsiveContainer>
diff --git a/src/features/Dashboard/components/SummaryCard.tsx b/src/features/Dashboard/components/SummaryCard.tsx
index 661797b..ae8488f 100644
--- a/src/features/Dashboard/components/SummaryCard.tsx
+++ b/src/features/Dashboard/components/SummaryCard.tsx
@@ -1,35 +1,34 @@
+import { useTheme } from "@/theme";
+
 interface Props {
   title: string;
   value: number | string;
   color?: "green" | "red" | "blue" | "yellow" | "purple";
 }
 
-const borderMap = {
-  green: "border-l-[var(--cd-success)]",
-  red: "border-l-[var(--cd-danger)]",
-  blue: "border-l-[var(--cd-primary)]",
-  yellow: "border-l-[var(--cd-warning)]",
-  purple: "border-l-[var(--cd-secondary)]",
-};
+export default function SummaryCard({ title, value, color = "blue" }: Props) {
+  const { theme } = useTheme();
+
+  const colorMap = {
+    green: { border: theme.success.default, text: theme.success.default },
+    red: { border: theme.danger.default, text: theme.danger.default },
+    blue: { border: theme.primary.default, text: theme.primary.default },
+    yellow: { border: theme.warning.default, text: theme.warning.default },
+    purple: { border: theme.secondary.default, text: theme.secondary.default },
+  };
 
-const textMap = {
-  green: "var(--cd-success)",
-  red: "var(--cd-danger)",
-  blue: "var(--cd-primary)",
-  yellow: "var(--cd-warning)",
-  purple: "var(--cd-secondary)",
-};
+  const c = colorMap[color];
 
-export default function SummaryCard({ title, value, color = "blue" }: Props) {
   return (
     <div
-      className={`cd-card cd-card-hover flex items-center gap-4 border-l-4 ${borderMap[color]}`}
+      className="cd-card cd-card-hover flex items-center gap-4 border-l-4"
+      style={{ borderLeftColor: c.border }}
     >
       <div>
-        <p className="text-sm" style={{ color: "var(--cd-text-2)" }}>
+        <p className="text-sm" style={{ color: theme.text.secondary }}>
           {title}
         </p>
-        <h2 className="text-2xl font-bold" style={{ color: textMap[color] }}>
+        <h2 className="text-2xl font-bold" style={{ color: c.text }}>
           {value}
         </h2>
       </div>
diff --git a/src/features/SideBar/v1/Components/SideBarLink.tsx b/src/features/SideBar/v1/Components/SideBarLink.tsx
index 156789b..47bd916 100644
--- a/src/features/SideBar/v1/Components/SideBarLink.tsx
+++ b/src/features/SideBar/v1/Components/SideBarLink.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Link, useLocation } from "react-router";
+import { useTheme } from "@/theme";
 
 type SideBarLinkProps = {
   icon: React.ReactNode;
@@ -8,21 +9,30 @@ type SideBarLinkProps = {
 };
 
 const SideBarLink = ({ icon, text, link = "/" }: SideBarLinkProps) => {
+  const { theme } = useTheme();
   const { pathname } = useLocation();
   const isActive = pathname === link || (link !== "/org" && pathname.startsWith(link));
 
   return (
     <Link
       to={link}
-      className="cd-nav-link"
-      style={
-        isActive
-          ? {
-              backgroundColor: "var(--cd-primary-subtle)",
-              color: "var(--cd-primary-text)",
-            }
-          : undefined
-      }
+      className="flex items-center gap-3 px-4 py-2 rounded-lg transition-colors duration-150 text-decoration-none"
+      style={{
+        backgroundColor: isActive ? theme.primary.subtle : "transparent",
+        color: isActive ? theme.primary.text : theme.text.secondary,
+      }}
+      onMouseEnter={(e) => {
+        if (!isActive) {
+          (e.currentTarget as HTMLAnchorElement).style.backgroundColor = theme.interactive.hover;
+          (e.currentTarget as HTMLAnchorElement).style.color = theme.text.primary;
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isActive) {
+          (e.currentTarget as HTMLAnchorElement).style.backgroundColor = "transparent";
+          (e.currentTarget as HTMLAnchorElement).style.color = theme.text.secondary;
+        }
+      }}
     >
       <div className="flex items-center justify-center text-xl" style={{ minWidth: 24 }}>
         {icon}
diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index b295ebd..98a87f6 100644
--- a/src/features/SideBar/v1/Section/BotamNavBar.tsx
+++ b/src/features/SideBar/v1/Section/BotamNavBar.tsx
@@ -2,6 +2,7 @@ import { RiContactsBookFill } from "react-icons/ri";
 import { type IconType } from "react-icons";
 import { MdDashboard, MdEvent, MdGroup } from "react-icons/md";
 import { Link, useLocation } from "react-router-dom";
+import { useTheme } from "@/theme";
 
 type NavItem = {
   icon: IconType;
@@ -38,6 +39,7 @@ const navItems: NavItem[] = [
 ];
 
 const BotamNavBar = () => {
+  const { theme } = useTheme();
   const { pathname } = useLocation();
 
   return (
@@ -47,17 +49,13 @@ const BotamNavBar = () => {
       aria-label="Mobile navigation"
     >
       <div
-        className="cd-glass relative mx-auto flex max-w-md items-center gap-2 overflow-hidden rounded-[30px] px-3 py-3"
-        style={{ boxShadow: "0 24px 60px -28px var(--cd-shadow-md)" }}
+        className="relative mx-auto flex max-w-md items-center gap-2 overflow-hidden rounded-[30px] px-3 py-3 backdrop-blur-xl"
+        style={{
+          backgroundColor: theme.bg.surface,
+          border: `1px solid ${theme.border.default}`,
+          boxShadow: `0 24px 60px -28px ${theme.shadow.md}`,
+        }}
       >
-        <div
-          className="pointer-events-none absolute inset-x-10 top-0 h-px"
-          style={{
-            background:
-              "linear-gradient(90deg, transparent, var(--cd-primary-subtle), transparent)",
-          }}
-        />
-
         {navItems.map((item) => {
           const active = item.isActive(pathname);
           const Icon = item.icon;
@@ -70,11 +68,10 @@ const BotamNavBar = () => {
               className="group relative flex min-w-0 flex-1 items-center justify-center"
             >
               <div
-                className="absolute inset-0 rounded-[24px] border transition-all duration-200"
+                className="absolute inset-0 rounded-[24px] transition-all duration-200"
                 style={{
                   opacity: active ? 1 : 0,
-                  borderColor: "var(--cd-primary-subtle)",
-                  backgroundColor: "var(--cd-primary-subtle)",
+                  backgroundColor: theme.primary.subtle,
                 }}
               />
 
@@ -82,10 +79,10 @@ const BotamNavBar = () => {
                 <div
                   className="flex h-10 w-10 items-center justify-center rounded-[16px] border text-xl transition-all duration-200"
                   style={{
-                    color: active ? "var(--cd-primary)" : "var(--cd-text-2)",
-                    borderColor: active ? "var(--cd-primary-subtle)" : "var(--cd-border)",
-                    backgroundColor: active ? "var(--cd-surface)" : "transparent",
-                    boxShadow: active ? "0 4px 12px var(--cd-shadow)" : "none",
+                    color: active ? theme.primary.default : theme.text.secondary,
+                    borderColor: active ? theme.primary.subtle : theme.border.default,
+                    backgroundColor: active ? theme.bg.surface : "transparent",
+                    boxShadow: active ? `0 4px 12px ${theme.shadow.sm}` : "none",
                   }}
                 >
                   <Icon />
@@ -93,9 +90,7 @@ const BotamNavBar = () => {
 
                 <span
                   className="max-w-full truncate text-[0.7rem] font-semibold tracking-wide transition-colors duration-200"
-                  style={{
-                    color: active ? "var(--cd-primary-text)" : "var(--cd-text-2)",
-                  }}
+                  style={{ color: active ? theme.primary.text : theme.text.secondary }}
                 >
                   {item.text}
                 </span>
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index 1c0abab..bda5dee 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,17 +1,25 @@
 import { RiContactsBookFill } from "react-icons/ri";
-import SideBarLink from "../Components/SideBarLink";
 import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
-import { dashboardData } from "@/features/Dashboard/mock/dashboardData";
+import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
+import { dashboardData } from "@/features/Dashboard/mock/dashboardData";
+import SideBarLink from "../Components/SideBarLink";
 
 const SideBar = () => {
+  const { theme } = useTheme();
+
   return (
     <div
-      className="cd-sidebar w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col"
+      className="w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col"
+      style={{
+        backgroundColor: theme.bg.surface,
+        borderRight: `1px solid ${theme.border.default}`,
+      }}
     >
+      {/* Logo */}
       <div
         className="p-2 border-b min-h-21 w-full flex items-center justify-center"
-        style={{ borderColor: "var(--cd-border)" }}
+        style={{ borderColor: theme.border.default }}
       >
         <img
           src="/logoWithoutText.png"
@@ -20,28 +28,31 @@ const SideBar = () => {
         />
         <h1
           className="font-bold h-fit text-[1.40em] leading-none inter"
-          style={{ color: "var(--cd-primary)" }}
+          style={{ color: theme.primary.default }}
         >
           CommDesk
         </h1>
       </div>
 
+      {/* Nav */}
       <div className="flex flex-col gap-1 p-4 flex-1 w-full">
         <p
           className="text-xs font-semibold uppercase tracking-widest px-4 py-2"
-          style={{ color: "var(--cd-text-muted)" }}
+          style={{ color: theme.text.muted }}
         >
           Operations
         </p>
+
         <SideBarLink icon={<MdDashboard />} text="Dashboard" link="/org/dashboard" />
         <SideBarLink icon={<MdWork />} text="Projects" link="/org" />
         <SideBarLink icon={<MdGroup />} text="Teams" link="/org/member" />
         <SideBarLink icon={<MdEvent />} text="Events" link="/org/events" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
+        {/* Footer */}
         <div
           className="mt-auto w-full border-t flex flex-col py-5"
-          style={{ borderColor: "var(--cd-border)" }}
+          style={{ borderColor: theme.border.default }}
         >
           <div className="flex items-center justify-between mb-2">
             <SideBarLink icon={<MdSettings />} text="Settings" link="/org" />
@@ -50,7 +61,7 @@ const SideBar = () => {
 
           <div
             className="mt-3 w-full rounded-xl p-3 flex items-center gap-3 cursor-pointer transition-colors duration-150"
-            style={{ backgroundColor: "var(--cd-surface-2)" }}
+            style={{ backgroundColor: theme.bg.surfaceSecondary }}
           >
             <img
               src="https://randomuser.me/api/portraits/men/1.jpg"
@@ -58,16 +69,10 @@ const SideBar = () => {
               className="w-9 h-9 rounded-full object-cover shrink-0"
             />
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
-              <p
-                className="text-sm font-semibold truncate"
-                style={{ color: "var(--cd-text)" }}
-              >
+              <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
                 {dashboardData.user.name}
               </p>
-              <p
-                className="text-xs truncate font-medium"
-                style={{ color: "var(--cd-primary)" }}
-              >
+              <p className="text-xs truncate font-medium" style={{ color: theme.primary.default }}>
                 {dashboardData.user.role}
               </p>
             </div>
diff --git a/src/theme/hooks/useTheme.ts b/src/theme/hooks/useTheme.ts
index 8b9e469..945541f 100644
--- a/src/theme/hooks/useTheme.ts
+++ b/src/theme/hooks/useTheme.ts
@@ -1,8 +1,19 @@
 import { useContext } from "react";
 import { ThemeContext } from "../provider";
 
+/**
+ * useTheme — access the current theme mode and typed design tokens.
+ *
+ * @example
+ * const { theme, mode, toggle } = useTheme();
+ *
+ * // Use typed tokens instead of raw CSS variable strings:
+ * <p style={{ color: theme.text.primary }}>Hello</p>
+ * <div style={{ background: theme.bg.surface }}>Card</div>
+ * <span style={{ color: theme.success.default }}>Done</span>
+ */
 export function useTheme() {
   const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  if (!ctx) throw new Error("useTheme must be used inside <ThemeProvider>");
   return ctx;
 }
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 6aec453..0db5e65 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,7 +1,3 @@
 export { ThemeProvider, ThemeContext } from "./provider";
-export { themes, getTheme, type ThemeMode, type Theme } from "./theme.config";
+export { theme, themeTokens, type ThemeMode, type ThemeTokens } from "./theme.config";
 export { useTheme } from "./hooks/useTheme";
-export { palette, lightTokens, darkTokens } from "./colors";
-export { typography } from "./typography";
-export { lightShadows, darkShadows } from "./shadows";
-export { spacing, radius } from "./spacing";
diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx
index d060c84..f9cfc28 100644
--- a/src/theme/provider.tsx
+++ b/src/theme/provider.tsx
@@ -1,15 +1,25 @@
 import React, { createContext, useCallback, useEffect, useState } from "react";
-import { type ThemeMode, themes, type Theme } from "./theme.config";
+import { type ThemeMode, theme, type ThemeTokens } from "./theme.config";
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Context shape
+// ─────────────────────────────────────────────────────────────────────────────
 interface ThemeContextValue {
+  /** Current active mode: "light" | "dark" */
   mode: ThemeMode;
-  theme: Theme;
+  /** Typed design tokens — use these in components instead of raw var() strings */
+  theme: ThemeTokens;
+  /** Toggle between light and dark */
   toggle: () => void;
+  /** Explicitly set a mode */
   setMode: (mode: ThemeMode) => void;
 }
 
 export const ThemeContext = createContext<ThemeContextValue | null>(null);
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Persistence key
+// ─────────────────────────────────────────────────────────────────────────────
 const STORAGE_KEY = "commdesk-theme";
 
 function resolveInitialMode(): ThemeMode {
@@ -20,13 +30,16 @@ function resolveInitialMode(): ThemeMode {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [mode, setModeState] = useState<ThemeMode>(resolveInitialMode);
 
+  // Apply .dark class to <html> so CSS variables resolve correctly
   const applyMode = useCallback((m: ThemeMode) => {
-    const root = document.documentElement;
-    root.classList.toggle("dark", m === "dark");
-    root.setAttribute("data-theme", m);
+    document.documentElement.classList.toggle("dark", m === "dark");
+    document.documentElement.setAttribute("data-theme", m);
   }, []);
 
   useEffect(() => {
@@ -49,7 +62,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   }, [mode, setMode]);
 
   return (
-    <ThemeContext.Provider value={{ mode, theme: themes[mode], toggle, setMode }}>
+    // `theme` is the same object for both modes — CSS variables do the switching
+    <ThemeContext.Provider value={{ mode, theme, toggle, setMode }}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/src/theme/theme.config.ts b/src/theme/theme.config.ts
index b34d695..f324cf4 100644
--- a/src/theme/theme.config.ts
+++ b/src/theme/theme.config.ts
@@ -1,46 +1,123 @@
-import { lightTokens, darkTokens } from "./colors";
-import { typography } from "./typography";
-import { lightShadows, darkShadows } from "./shadows";
-import { spacing, radius } from "./spacing";
+// ─────────────────────────────────────────────────────────────────────────────
+// theme.config.ts
+//
+// THE SINGLE SOURCE OF TRUTH for CommDesk theming.
+//
+// HOW IT WORKS
+// ─────────────────────────────────────────────────────────────────────────────
+// 1. CSS variables are declared in App.css for :root (light) and .dark (dark).
+//    They are what actually change when the user toggles the theme.
+//
+// 2. This file maps every CSS variable to a human-readable TypeScript property.
+//    Components import `useTheme()` and write:
+//
+//      const { theme } = useTheme();
+//      <p style={{ color: theme.text.primary }}>Hello</p>
+//
+//    instead of the raw, hard-to-read:
+//
+//      <p style={{ color: "var(--cd-text)" }}>Hello</p>
+//
+// 3. To change a color across the whole app, edit App.css (the CSS variable).
+//    To rename a token or add a new one, edit the `themeTokens` object below
+//    and TypeScript will tell you everywhere it needs updating.
+//
+// ─────────────────────────────────────────────────────────────────────────────
 
 export type ThemeMode = "light" | "dark";
 
-export const themes = {
-  light: {
-    colors: lightTokens,
-    typography,
-    shadows: lightShadows,
-    spacing,
-    radius,
-    gradients: {
-      primary: "linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)",
-      secondary: "linear-gradient(135deg, #a855f7 0%, #6366f1 100%)",
-      accent: "linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)",
-      surface: "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)",
-      hero: "linear-gradient(135deg, #eff6ff 0%, #faf5ff 50%, #ecfeff 100%)",
-    },
-  },
-  dark: {
-    colors: darkTokens,
-    typography,
-    shadows: darkShadows,
-    spacing,
-    radius,
-    gradients: {
-      primary: "linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%)",
-      secondary: "linear-gradient(135deg, #a855f7 0%, #6366f1 100%)",
-      accent: "linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%)",
-      surface: "linear-gradient(135deg, #1a1f2e 0%, #151929 100%)",
-      hero: "linear-gradient(135deg, #0f1320 0%, #1a1f2e 50%, #151929 100%)",
-    },
+/**
+ * Every property here is a CSS variable reference.
+ * The actual color values live in App.css — edit them there.
+ * This object is the typed bridge between CSS and TypeScript.
+ */
+export const themeTokens = {
+  // ── Backgrounds ────────────────────────────────────────────────────────────
+  bg: {
+    /** Page-level background */
+    page: "var(--cd-bg)",
+    /** Card / panel surface */
+    surface: "var(--cd-surface)",
+    /** Slightly elevated surface (inputs, tags, rows) */
+    surfaceSecondary: "var(--cd-surface-2)",
+    /** Tertiary surface (hover states, subtle fills) */
+    surfaceTertiary: "var(--cd-surface-3)",
+  },
+
+  // ── Text ───────────────────────────────────────────────────────────────────
+  text: {
+    /** Main body text */
+    primary: "var(--cd-text)",
+    /** Secondary / supporting text */
+    secondary: "var(--cd-text-2)",
+    /** Placeholder / disabled text */
+    muted: "var(--cd-text-muted)",
+    /** Text on dark/colored backgrounds */
+    inverse: "#ffffff",
+  },
+
+  // ── Borders ────────────────────────────────────────────────────────────────
+  border: {
+    /** Default border */
+    default: "var(--cd-border)",
+    /** Subtle divider (table rows, inner sections) */
+    subtle: "var(--cd-border-subtle)",
   },
-} as const;
 
-export type Theme = (typeof themes)["light"];
+  // ── Brand — Primary (Blue) ─────────────────────────────────────────────────
+  primary: {
+    /** Main primary color */
+    default: "var(--cd-primary)",
+    /** Hover state */
+    hover: "var(--cd-primary-hover)",
+    /** Light tinted background (badges, highlights) */
+    subtle: "var(--cd-primary-subtle)",
+    /** Text on primary-subtle backgrounds */
+    text: "var(--cd-primary-text)",
+  },
+
+  // ── Brand — Secondary (Purple) ─────────────────────────────────────────────
+  secondary: {
+    default: "var(--cd-secondary)",
+  },
+
+  // ── Brand — Accent (Cyan) ──────────────────────────────────────────────────
+  accent: {
+    default: "var(--cd-accent)",
+  },
+
+  // ── Status ─────────────────────────────────────────────────────────────────
+  success: {
+    default: "var(--cd-success)",
+    subtle: "var(--cd-success-subtle)",
+  },
+  warning: {
+    default: "var(--cd-warning)",
+    subtle: "var(--cd-warning-subtle)",
+  },
+  danger: {
+    default: "var(--cd-danger)",
+    subtle: "var(--cd-danger-subtle)",
+  },
+
+  // ── Interactive ────────────────────────────────────────────────────────────
+  interactive: {
+    /** Background on hover */
+    hover: "var(--cd-hover)",
+  },
+
+  // ── Shadows ────────────────────────────────────────────────────────────────
+  shadow: {
+    sm: "var(--cd-shadow)",
+    md: "var(--cd-shadow-md)",
+  },
+} as const;
 
-export function getTheme(mode: ThemeMode): Theme {
-  return themes[mode];
-}
+/** The shape every component receives from useTheme() */
+export type ThemeTokens = typeof themeTokens;
 
-// Legacy compat — keeps old callers working while migration proceeds
-export type { ThemeMode as default };
+// ─────────────────────────────────────────────────────────────────────────────
+// The theme object is the same for both modes — the CSS variables resolve
+// to different values automatically via App.css :root / .dark rules.
+// ─────────────────────────────────────────────────────────────────────────────
+export const theme: ThemeTokens = themeTokens;