From e0253893ffb5a28580c19fd7962965e066fcd7a6 Mon Sep 17 00:00:00 2001
From: sagesan2580 <sagesan2580@proton.me>
Date: Wed, 29 Jul 2026 18:07:11 +0100
Subject: [PATCH] feat(frontend): add dark mode toggle with theme-aware styling
 (#235)

- Add ThemeProvider (next-themes) to root layout with system default
- Create ThemeToggle (sun/moon) component with hydration-safe rendering
- Add toggle button to sidebar header and mobile navbar
- Add missing --input-background and --switch-background to .dark CSS
- Convert all 22 dashboard pages from hardcoded dark colors to theme-aware
  CSS variables (bg-background, text-foreground, bg-card, border-border,
  text-muted-foreground, bg-sidebar, etc.)
- Use semantic tokens: bg-accent for active states, bg-muted for icon
  containers, bg-card for cards, border-border for borders
- Preserve all semantic status colors (green/red/yellow/blue)
---
 .../src/app/components/theme-toggle.tsx       | 39 +++++++++++
 .../src/app/dashboard/api-keys/loading.tsx    |  4 +-
 .../src/app/dashboard/api-keys/page.tsx       | 26 ++++----
 .../src/app/dashboard/audit-logs/loading.tsx  |  8 +--
 .../src/app/dashboard/audit-logs/page.tsx     | 38 +++++------
 .../src/app/dashboard/compliance/loading.tsx  | 10 +--
 .../src/app/dashboard/compliance/page.tsx     | 22 +++----
 .../src/app/dashboard/escrow/loading.tsx      |  8 +--
 .../src/app/dashboard/escrow/page.tsx         | 34 +++++-----
 apps/frontend/src/app/dashboard/layout.tsx    | 37 ++++++-----
 apps/frontend/src/app/dashboard/loading.tsx   | 14 ++--
 apps/frontend/src/app/dashboard/page.tsx      | 66 +++++++++----------
 .../src/app/dashboard/payments/loading.tsx    |  8 +--
 .../src/app/dashboard/payments/page.tsx       | 48 +++++++-------
 .../app/dashboard/subscriptions/loading.tsx   |  8 +--
 .../src/app/dashboard/subscriptions/page.tsx  | 34 +++++-----
 .../src/app/dashboard/tokens/loading.tsx      |  6 +-
 .../src/app/dashboard/tokens/page.tsx         | 36 +++++-----
 .../src/app/dashboard/treasury/loading.tsx    | 12 ++--
 .../src/app/dashboard/treasury/page.tsx       | 44 ++++++-------
 .../src/app/dashboard/webhooks/loading.tsx    |  8 +--
 .../src/app/dashboard/webhooks/page.tsx       | 36 +++++-----
 apps/frontend/src/app/globals.css             |  2 +
 apps/frontend/src/app/layout.tsx              |  7 +-
 apps/frontend/src/app/login/page.tsx          | 30 ++++-----
 25 files changed, 317 insertions(+), 268 deletions(-)
 create mode 100644 apps/frontend/src/app/components/theme-toggle.tsx

diff --git a/apps/frontend/src/app/components/theme-toggle.tsx b/apps/frontend/src/app/components/theme-toggle.tsx
new file mode 100644
index 0000000..babafee
--- /dev/null
+++ b/apps/frontend/src/app/components/theme-toggle.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors cursor-pointer"
+        aria-label="Toggle theme"
+        tabIndex={-1}
+        style={{ visibility: 'hidden' }}
+      >
+        <Sun className="size-4" />
+      </button>
+    );
+  }
+
+  const isDark = theme === 'dark';
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      className="flex items-center justify-center w-9 h-9 hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </button>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/api-keys/loading.tsx b/apps/frontend/src/app/dashboard/api-keys/loading.tsx
index c5b72cd..7d8d688 100644
--- a/apps/frontend/src/app/dashboard/api-keys/loading.tsx
+++ b/apps/frontend/src/app/dashboard/api-keys/loading.tsx
@@ -22,10 +22,10 @@ export default function ApiKeysLoading() {
         <Skeleton className="h-11 w-44 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="space-y-4 p-6">
           {Array.from({ length: 2 }).map((_, i) => (
-            <div key={i} className="p-6 bg-white/[0.02] border border-white/5 rounded-lg">
+            <div key={i} className="p-6 bg-muted/30 border-border rounded-lg">
               <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                 <div className="flex-1">
                   <div className="flex items-center gap-3 mb-3">
diff --git a/apps/frontend/src/app/dashboard/api-keys/page.tsx b/apps/frontend/src/app/dashboard/api-keys/page.tsx
index 343ed87..a863b80 100644
--- a/apps/frontend/src/app/dashboard/api-keys/page.tsx
+++ b/apps/frontend/src/app/dashboard/api-keys/page.tsx
@@ -32,7 +32,7 @@ export default function ApiKeysPage() {
         >
           API Keys
         </motion.h1>
-        <p className="text-sm text-neutral-400">Manage authentication credentials for API access</p>
+        <p className="text-sm text-muted-foreground">Manage authentication credentials for API access</p>
       </div>
 
       <motion.div
@@ -44,7 +44,7 @@ export default function ApiKeysPage() {
           <Eye className="size-5 text-yellow-400 mt-0.5" />
           <div>
             <div className="font-medium text-yellow-400 mb-1">Keep your keys secure</div>
-            <div className="text-sm text-neutral-400">
+            <div className="text-sm text-muted-foreground">
               Never share your API keys in publicly accessible areas such as GitHub, client-side code, or logging systems.
             </div>
           </div>
@@ -56,14 +56,14 @@ export default function ApiKeysPage() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <button className="px-4 py-3 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all flex items-center gap-2 font-medium cursor-pointer">
+        <button className="px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all flex items-center gap-2 font-medium cursor-pointer">
           <Plus className="size-4" />
           Generate New Key
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -72,7 +72,7 @@ export default function ApiKeysPage() {
           {apiKeys.map((key, index) => (
             <motion.div
               key={key.id}
-              className="p-6 bg-white/[0.02] border border-white/5 rounded-lg hover:border-white/10 transition-all"
+              className="p-6 bg-muted/30 border-border rounded-lg hover:border-foreground/10 transition-all"
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.4 + index * 0.05 }}
@@ -81,40 +81,40 @@ export default function ApiKeysPage() {
                 <div className="flex-1">
                   <div className="flex items-center gap-3 mb-3">
                     <div className="font-medium">{key.name}</div>
-                    <span className="px-2 py-1 bg-white/5 rounded text-xs">{key.permissions}</span>
+                    <span className="px-2 py-1 bg-muted rounded text-xs">{key.permissions}</span>
                   </div>
                   
                   <div className="flex items-center gap-2 mb-3">
-                    <div className="font-mono text-sm bg-black border border-white/10 rounded px-3 py-2 flex-1">
+                    <div className="font-mono text-sm bg-background border-border rounded px-3 py-2 flex-1">
                       {visibleKeys.has(key.id) ? key.id : "sk_" + "•".repeat(20)}
                     </div>
                     <button
                       onClick={() => toggleKeyVisibility(key.id)}
-                      className="p-2 hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
+                      className="p-2 hover:bg-accent rounded-lg transition-colors cursor-pointer"
                       title={visibleKeys.has(key.id) ? "Hide" : "Show"}
                     >
                       {visibleKeys.has(key.id) ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                     </button>
                     <button
-                      className="p-2 hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
+                      className="p-2 hover:bg-accent rounded-lg transition-colors cursor-pointer"
                       title="Copy"
                     >
                       <Copy className="size-4" />
                     </button>
                   </div>
 
-                  <div className="grid sm:grid-cols-2 gap-4 text-xs text-neutral-400">
+                  <div className="grid sm:grid-cols-2 gap-4 text-xs text-muted-foreground">
                     <div>
-                      <span className="text-neutral-500">Created:</span> {key.created}
+                      <span className="text-muted-foreground/70">Created:</span> {key.created}
                     </div>
                     <div>
-                      <span className="text-neutral-500">Last used:</span> {key.lastUsed}
+                      <span className="text-muted-foreground/70">Last used:</span> {key.lastUsed}
                     </div>
                   </div>
                 </div>
 
                 <div className="flex gap-2">
-                  <button className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all text-sm cursor-pointer">
+                  <button className="px-4 py-2 bg-muted border-border rounded-lg hover:bg-accent transition-all text-sm cursor-pointer">
                     Rotate
                   </button>
                   <button className="p-2 hover:bg-red-400/10 rounded-lg transition-colors text-red-400 cursor-pointer">
diff --git a/apps/frontend/src/app/dashboard/audit-logs/loading.tsx b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx
index 9c1d90c..2bd9b92 100644
--- a/apps/frontend/src/app/dashboard/audit-logs/loading.tsx
+++ b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx
@@ -12,7 +12,7 @@ export default function AuditLogsLoading() {
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
-            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-4 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-8 w-20 mb-1" />
             <Skeleton className="h-4 w-24" />
@@ -30,11 +30,11 @@ export default function AuditLogsLoading() {
         <Skeleton className="h-11 w-24 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 6 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -44,7 +44,7 @@ export default function AuditLogsLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 6 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/audit-logs/page.tsx b/apps/frontend/src/app/dashboard/audit-logs/page.tsx
index d22004b..99d838f 100644
--- a/apps/frontend/src/app/dashboard/audit-logs/page.tsx
+++ b/apps/frontend/src/app/dashboard/audit-logs/page.tsx
@@ -27,16 +27,16 @@ export default function AuditLogsPage() {
   ) : auditLogs.map((log, index) => (
     <motion.tr
       key={index}
-      className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+      className="border-border hover:bg-muted/20 transition-colors"
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.4 + index * 0.03 }}
     >
-      <td className="py-4 px-4 text-neutral-400 whitespace-nowrap">{log.timestamp}</td>
+      <td className="py-4 px-4 text-muted-foreground whitespace-nowrap">{log.timestamp}</td>
       <td className="py-4 px-4 font-medium">{log.action}</td>
-      <td className="py-4 px-4 font-mono text-xs text-neutral-400">{log.actor}</td>
-      <td className="py-4 px-4 font-mono text-xs text-neutral-400">{log.ip}</td>
-      <td className="py-4 px-4 text-neutral-400 text-xs">{log.details}</td>
+      <td className="py-4 px-4 font-mono text-xs text-muted-foreground">{log.actor}</td>
+      <td className="py-4 px-4 font-mono text-xs text-muted-foreground">{log.ip}</td>
+      <td className="py-4 px-4 text-muted-foreground text-xs">{log.details}</td>
       <td className="py-4 px-4">
         <span
           className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
@@ -59,7 +59,7 @@ export default function AuditLogsPage() {
         >
           Audit Logs
         </motion.h1>
-        <p className="text-sm text-neutral-400">Complete activity history with tamper-proof logging</p>
+        <p className="text-sm text-muted-foreground">Complete activity history with tamper-proof logging</p>
       </div>
 
       <div className="grid sm:grid-cols-4 gap-4 mb-8">
@@ -71,13 +71,13 @@ export default function AuditLogsPage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-4 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
           >
             <div className="text-2xl font-medium mb-1">{stat.value}</div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
@@ -99,21 +99,21 @@ export default function AuditLogsPage() {
               repeat: Infinity,
             }}
           />
-          <span className="text-sm text-neutral-400">Live monitoring active</span>
+          <span className="text-sm text-muted-foreground">Live monitoring active</span>
         </div>
         <div className="flex-1" />
-        <button className="px-4 py-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all flex items-center justify-center gap-2 text-sm cursor-pointer">
+        <button className="px-4 py-3 bg-muted border-border rounded-lg hover:bg-accent transition-all flex items-center justify-center gap-2 text-sm cursor-pointer">
           <Filter className="size-4" />
           Filter
         </button>
-        <button className="px-4 py-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all flex items-center justify-center gap-2 text-sm cursor-pointer">
+        <button className="px-4 py-3 bg-muted border-border rounded-lg hover:bg-accent transition-all flex items-center justify-center gap-2 text-sm cursor-pointer">
           <Download className="size-4" />
           Export
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -121,13 +121,13 @@ export default function AuditLogsPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium whitespace-nowrap">Timestamp</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Action</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Actor</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">IP Address</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Details</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium whitespace-nowrap">Timestamp</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Action</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Actor</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">IP Address</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Details</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
               </tr>
             </thead>
             <tbody>
diff --git a/apps/frontend/src/app/dashboard/compliance/loading.tsx b/apps/frontend/src/app/dashboard/compliance/loading.tsx
index b600a7c..c062af9 100644
--- a/apps/frontend/src/app/dashboard/compliance/loading.tsx
+++ b/apps/frontend/src/app/dashboard/compliance/loading.tsx
@@ -12,7 +12,7 @@ export default function ComplianceLoading() {
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <div className="flex items-center gap-3 mb-4">
               <Skeleton className="h-9 w-9 rounded-lg" />
@@ -24,11 +24,11 @@ export default function ComplianceLoading() {
       </div>
 
       <div className="grid lg:grid-cols-2 gap-6">
-        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="p-6 bg-card border-border rounded-xl">
           <Skeleton className="h-6 w-44 mb-6" />
           <div className="space-y-4">
             {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+              <div key={i} className="p-4 bg-muted/30 border-border rounded-lg">
                 <div className="flex items-center justify-between">
                   <div>
                     <Skeleton className="h-5 w-36 mb-1" />
@@ -42,11 +42,11 @@ export default function ComplianceLoading() {
           <Skeleton className="h-11 w-full mt-6 rounded-lg" />
         </div>
 
-        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="p-6 bg-card border-border rounded-xl">
           <Skeleton className="h-6 w-44 mb-6" />
           <div className="space-y-6">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="pb-4 border-b border-white/5 last:border-0">
+              <div key={i} className="pb-4 border-b border-border last:border-0">
                 <div className="flex items-center justify-between mb-2">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-6 w-16" />
diff --git a/apps/frontend/src/app/dashboard/compliance/page.tsx b/apps/frontend/src/app/dashboard/compliance/page.tsx
index 71c886d..6a060b4 100644
--- a/apps/frontend/src/app/dashboard/compliance/page.tsx
+++ b/apps/frontend/src/app/dashboard/compliance/page.tsx
@@ -14,7 +14,7 @@ export default function CompliancePage() {
         >
           Compliance
         </motion.h1>
-        <p className="text-sm text-neutral-400">KYC/AML status and regulatory requirements</p>
+        <p className="text-sm text-muted-foreground">KYC/AML status and regulatory requirements</p>
       </div>
 
       <div className="grid sm:grid-cols-2 gap-4 mb-8">
@@ -26,7 +26,7 @@ export default function CompliancePage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
@@ -35,7 +35,7 @@ export default function CompliancePage() {
               <div className={`p-2 bg-${stat.color}-400/10 rounded-lg`}>
                 <stat.icon className={`size-5 text-${stat.color}-400`} />
               </div>
-              <div className="text-xs text-neutral-500">{stat.label}</div>
+              <div className="text-xs text-muted-foreground/70">{stat.label}</div>
             </div>
             <div className="text-2xl font-medium">{stat.value}</div>
           </motion.div>
@@ -44,7 +44,7 @@ export default function CompliancePage() {
 
       <div className="grid lg:grid-cols-2 gap-6">
         <motion.div
-          className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.3 }}
@@ -59,7 +59,7 @@ export default function CompliancePage() {
             ].map((doc, index) => (
               <motion.div
                 key={doc.name}
-                className="p-4 bg-white/[0.02] border border-white/5 rounded-lg"
+                className="p-4 bg-muted/30 border-border rounded-lg"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.4 + index * 0.05 }}
@@ -67,7 +67,7 @@ export default function CompliancePage() {
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="font-medium mb-1">{doc.name}</div>
-                    <div className="text-xs text-neutral-500">Uploaded: {doc.date}</div>
+                    <div className="text-xs text-muted-foreground/70">Uploaded: {doc.date}</div>
                   </div>
                   <span
                     className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
@@ -81,14 +81,14 @@ export default function CompliancePage() {
               </motion.div>
             ))}
           </div>
-          <button className="mt-6 w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all flex items-center justify-center gap-2 text-sm font-medium cursor-pointer">
+          <button className="mt-6 w-full px-4 py-3 bg-muted border-border rounded-lg hover:bg-accent transition-all flex items-center justify-center gap-2 text-sm font-medium cursor-pointer">
             <Upload className="size-4" />
             Upload Document
           </button>
         </motion.div>
 
         <motion.div
-          className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.3 }}
@@ -100,9 +100,9 @@ export default function CompliancePage() {
               { label: "Flagged for Review", value: "0" },
               { label: "Risk Score", value: "Low" },
             ].map((metric) => (
-              <div key={metric.label} className="pb-4 border-b border-white/5 last:border-0">
+              <div key={metric.label} className="pb-4 border-b border-border last:border-0">
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm text-neutral-400">{metric.label}</span>
+                  <span className="text-sm text-muted-foreground">{metric.label}</span>
                   <span className="text-lg font-medium">{metric.value}</span>
                 </div>
               </div>
@@ -114,7 +114,7 @@ export default function CompliancePage() {
               <CheckCircle2 className="size-5 text-green-400 mt-0.5" />
               <div>
                 <div className="font-medium text-green-400 mb-1">Fully Compliant</div>
-                <div className="text-xs text-neutral-400">All regulatory requirements met. Next review scheduled for April 1, 2026.</div>
+                <div className="text-xs text-muted-foreground">All regulatory requirements met. Next review scheduled for April 1, 2026.</div>
               </div>
             </div>
           </div>
diff --git a/apps/frontend/src/app/dashboard/escrow/loading.tsx b/apps/frontend/src/app/dashboard/escrow/loading.tsx
index 601a52d..9f45f8d 100644
--- a/apps/frontend/src/app/dashboard/escrow/loading.tsx
+++ b/apps/frontend/src/app/dashboard/escrow/loading.tsx
@@ -12,7 +12,7 @@ export default function EscrowLoading() {
         {Array.from({ length: 3 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-8 w-24 mb-1" />
             <Skeleton className="h-4 w-28" />
@@ -24,11 +24,11 @@ export default function EscrowLoading() {
         <Skeleton className="h-11 w-40 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 7 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -38,7 +38,7 @@ export default function EscrowLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 3 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 7 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/escrow/page.tsx b/apps/frontend/src/app/dashboard/escrow/page.tsx
index f7af8b3..7ae8e65 100644
--- a/apps/frontend/src/app/dashboard/escrow/page.tsx
+++ b/apps/frontend/src/app/dashboard/escrow/page.tsx
@@ -20,7 +20,7 @@ export default function EscrowPage() {
         >
           Escrow
         </motion.h1>
-        <p className="text-sm text-neutral-400">Manage escrow accounts and conditional releases</p>
+        <p className="text-sm text-muted-foreground">Manage escrow accounts and conditional releases</p>
       </div>
 
       <div className="grid sm:grid-cols-3 gap-4 mb-8">
@@ -31,13 +31,13 @@ export default function EscrowPage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
           >
             <div className="text-2xl font-medium mb-1">{stat.value}</div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
@@ -47,14 +47,14 @@ export default function EscrowPage() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <button className="px-4 py-3 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all flex items-center gap-2 font-medium cursor-pointer">
+        <button className="px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all flex items-center gap-2 font-medium cursor-pointer">
           <Plus className="size-4" />
           Create Escrow
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -62,21 +62,21 @@ export default function EscrowPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Escrow ID</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Parties</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Amount</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Asset</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Condition</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Release Date</th>
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Escrow ID</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Parties</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Amount</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Asset</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Condition</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Release Date</th>
               </tr>
             </thead>
             <tbody>
               {escrows.map((escrow, index) => (
                 <motion.tr
                   key={escrow.id}
-                  className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+                  className="border-border hover:bg-muted/20 transition-colors"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.4 + index * 0.05 }}
@@ -85,9 +85,9 @@ export default function EscrowPage() {
                   <td className="py-4 px-4">{escrow.parties}</td>
                   <td className="py-4 px-4 font-medium">{escrow.amount}</td>
                   <td className="py-4 px-4">
-                    <span className="px-2 py-1 bg-white/5 rounded text-xs">{escrow.asset}</span>
+                    <span className="px-2 py-1 bg-muted rounded text-xs">{escrow.asset}</span>
                   </td>
-                  <td className="py-4 px-4 text-neutral-400 text-xs">{escrow.condition}</td>
+                  <td className="py-4 px-4 text-muted-foreground text-xs">{escrow.condition}</td>
                   <td className="py-4 px-4">
                     <span
                       className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
@@ -108,7 +108,7 @@ export default function EscrowPage() {
                       {escrow.status}
                     </span>
                   </td>
-                  <td className="py-4 px-4 text-neutral-400">{escrow.releaseDate}</td>
+                  <td className="py-4 px-4 text-muted-foreground">{escrow.releaseDate}</td>
                 </motion.tr>
               ))}
             </tbody>
diff --git a/apps/frontend/src/app/dashboard/layout.tsx b/apps/frontend/src/app/dashboard/layout.tsx
index f63c1e7..b456897 100644
--- a/apps/frontend/src/app/dashboard/layout.tsx
+++ b/apps/frontend/src/app/dashboard/layout.tsx
@@ -22,6 +22,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { ThemeToggle } from '@/app/components/theme-toggle';
 
 const navigation = [
   { name: 'Overview', href: '/dashboard', icon: LayoutDashboard },
@@ -57,23 +58,26 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   }
 
   return (
-    <div className="min-h-screen bg-black text-white">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Mobile menu button */}
-      <div className="lg:hidden fixed top-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-xl border-b border-white/5 px-4 py-3">
+      <div className="lg:hidden fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-xl border-b border-border px-4 py-3">
         <div className="flex items-center justify-between">
           <div className="font-medium">StellarPay Rails</div>
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="p-2 hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
-          >
-            {sidebarOpen ? <X className="size-5" /> : <Menu className="size-5" />}
-          </button>
+          <div className="flex items-center gap-1">
+            <ThemeToggle />
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="p-2 hover:bg-accent rounded-lg transition-colors cursor-pointer"
+            >
+              {sidebarOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+            </button>
+          </div>
         </div>
       </div>
 
       {/* Sidebar */}
       <motion.aside
-        className={`fixed top-0 left-0 bottom-0 w-64 bg-black border-r border-white/5 flex flex-col z-40 ${
+        className={`fixed top-0 left-0 bottom-0 w-64 bg-sidebar border-r border-sidebar-border flex flex-col z-40 ${
           sidebarOpen ? 'translate-x-0' : '-translate-x-full'
         } lg:translate-x-0 transition-transform duration-300`}
         initial={{ x: -256 }}
@@ -81,13 +85,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         transition={{ duration: 0.3 }}
       >
         {/* Logo */}
-        <div className="h-16 flex items-center px-6 border-b border-white/5">
+        <div className="h-16 flex items-center justify-between px-6 border-b border-sidebar-border">
           <Link
             href="/"
-            className="font-medium text-lg hover:text-neutral-400 transition-colors cursor-pointer"
+            className="font-medium text-lg hover:text-muted-foreground transition-colors cursor-pointer"
           >
             StellarPay Rails
           </Link>
+          <ThemeToggle />
         </div>
 
         {/* Navigation */}
@@ -105,8 +110,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                   <motion.div
                     className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
                       isActive
-                        ? 'bg-white/10 text-white'
-                        : 'text-neutral-400 hover:text-white hover:bg-white/5'
+                        ? 'bg-accent text-accent-foreground'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                     }`}
                     whileHover={{ x: 4 }}
                     whileTap={{ scale: 0.98 }}
@@ -126,8 +131,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         </nav>
 
         {/* Footer */}
-        <div className="p-4 border-t border-white/5">
-          <div className="text-xs text-neutral-500">
+        <div className="p-4 border-t border-sidebar-border">
+          <div className="text-xs text-muted-foreground/70">
             <div className="mb-1">
               API Status: <span className="text-green-400">Operational</span>
             </div>
@@ -150,7 +155,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       {/* Mobile overlay */}
       {sidebarOpen && (
         <div
-          className="lg:hidden fixed inset-0 bg-black/80 backdrop-blur-sm z-30"
+          className="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-30"
           onClick={() => setSidebarOpen(false)}
         />
       )}
diff --git a/apps/frontend/src/app/dashboard/loading.tsx b/apps/frontend/src/app/dashboard/loading.tsx
index f56d229..0f66e2d 100644
--- a/apps/frontend/src/app/dashboard/loading.tsx
+++ b/apps/frontend/src/app/dashboard/loading.tsx
@@ -12,7 +12,7 @@ export default function OverviewLoading() {
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-10 w-10 rounded-lg mb-4" />
             <Skeleton className="h-8 w-32 mb-1" />
@@ -22,14 +22,14 @@ export default function OverviewLoading() {
       </div>
 
       <div className="grid lg:grid-cols-3 gap-6 mb-8">
-        <div className="lg:col-span-2 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="lg:col-span-2 p-6 bg-card border-border rounded-xl">
           <div className="flex items-center justify-between mb-6">
             <Skeleton className="h-6 w-48" />
             <Skeleton className="h-4 w-16" />
           </div>
           <div className="space-y-4">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+              <div key={i} className="p-4 bg-muted/30 border-border rounded-lg">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-4">
                     <Skeleton className="h-10 w-10 rounded-full" />
@@ -49,7 +49,7 @@ export default function OverviewLoading() {
           </div>
         </div>
 
-        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="p-6 bg-card border-border rounded-xl">
           <Skeleton className="h-6 w-32 mb-6" />
           <div className="flex items-center justify-center mb-6">
             <Skeleton className="h-40 w-40 rounded-full" />
@@ -65,7 +65,7 @@ export default function OverviewLoading() {
         </div>
       </div>
 
-      <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+      <div className="p-6 bg-card border-border rounded-xl">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <Skeleton className="h-6 w-52" />
@@ -76,7 +76,7 @@ export default function OverviewLoading() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5">
+              <tr className="border-b border-border">
                 {Array.from({ length: 7 }).map((_, i) => (
                   <th key={i} className="py-3 px-4">
                     <Skeleton className="h-4 w-16" />
@@ -86,7 +86,7 @@ export default function OverviewLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 5 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 7 }).map((_, j) => (
                     <td key={j} className="py-3 px-4">
                       <Skeleton className="h-4 w-20" />
diff --git a/apps/frontend/src/app/dashboard/page.tsx b/apps/frontend/src/app/dashboard/page.tsx
index 19c658c..d54ff6d 100644
--- a/apps/frontend/src/app/dashboard/page.tsx
+++ b/apps/frontend/src/app/dashboard/page.tsx
@@ -117,7 +117,7 @@ export default function OverviewPage() {
         >
           Overview
         </motion.h1>
-        <p className="text-sm text-neutral-400">Real-time metrics and settlement status</p>
+        <p className="text-sm text-muted-foreground">Real-time metrics and settlement status</p>
       </div>
 
       {/* Stats Grid */}
@@ -126,14 +126,14 @@ export default function OverviewPage() {
         {stats.map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl relative overflow-hidden group"
+            className="p-6 bg-card border-border rounded-xl relative overflow-hidden group"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
             whileHover={{ y: -4, transition: { duration: 0.2 } }}
           >
             <motion.div
-              className="absolute inset-0 bg-gradient-to-r from-white/5 via-white/10 to-white/5 opacity-0 group-hover:opacity-100"
+              className="absolute inset-0 bg-gradient-to-r from-foreground/[0.03] via-foreground/[0.06] to-foreground/[0.03] opacity-0 group-hover:opacity-100"
               animate={{
                 x: ['-100%', '200%'],
               }}
@@ -145,8 +145,8 @@ export default function OverviewPage() {
             />
 
             <div className="flex items-start justify-between mb-4 relative z-10">
-              <div className="p-2 bg-white/5 rounded-lg">
-                <stat.icon className="size-5 text-white" />
+              <div className="p-2 bg-muted rounded-lg">
+                <stat.icon className="size-5 text-foreground" />
               </div>
               <div
                 className={`flex items-center gap-1 text-xs ${
@@ -164,7 +164,7 @@ export default function OverviewPage() {
 
             <div className="relative z-10">
               <div className="text-2xl sm:text-3xl font-medium mb-1">{stat.value}</div>
-              <div className="text-xs text-neutral-500">{stat.label}</div>
+              <div className="text-xs text-muted-foreground/70">{stat.label}</div>
             </div>
           </motion.div>
         ))}
@@ -175,14 +175,14 @@ export default function OverviewPage() {
       <div className="grid lg:grid-cols-3 gap-6 mb-8">
         {/* Asset Balances */}
         <motion.div
-          className="lg:col-span-2 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="lg:col-span-2 p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.3 }}
         >
           <div className="flex items-center justify-between mb-6">
             <h2 className="text-lg font-medium">Settlement Balance by Asset</h2>
-            <button className="text-xs text-neutral-400 hover:text-white transition-colors flex items-center gap-1 cursor-pointer">
+            <button className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 cursor-pointer">
               View all <ArrowUpRight className="size-3" />
             </button>
           </div>
@@ -191,7 +191,7 @@ export default function OverviewPage() {
             {assets.map((asset, index) => (
               <motion.div
                 key={asset.symbol}
-                className="p-4 bg-white/[0.02] border border-white/5 rounded-lg hover:border-white/10 transition-all"
+                className="p-4 bg-muted/30 border-border rounded-lg hover:border-foreground/10 transition-all"
                 initial={{ opacity: 0, x: -20 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: 0.4 + index * 0.1 }}
@@ -199,12 +199,12 @@ export default function OverviewPage() {
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-4">
-                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-white/20 to-white/10 flex items-center justify-center font-medium text-sm">
+                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-foreground/10 to-foreground/5 flex items-center justify-center font-medium text-sm">
                       {asset.symbol.slice(0, 2)}
                     </div>
                     <div>
                       <div className="font-medium">{asset.symbol}</div>
-                      <div className="text-sm text-neutral-500">{asset.balance}</div>
+                      <div className="text-sm text-muted-foreground/70">{asset.balance}</div>
                     </div>
                   </div>
                   <div className="text-right">
@@ -218,9 +218,9 @@ export default function OverviewPage() {
                 </div>
 
                 {/* Mini bar chart */}
-                <div className="mt-3 h-1 bg-white/5 rounded-full overflow-hidden">
+                <div className="mt-3 h-1 bg-muted rounded-full overflow-hidden">
                   <motion.div
-                    className="h-full bg-gradient-to-r from-white/30 to-white/10"
+                    className="h-full bg-gradient-to-r from-foreground/20 to-foreground/10"
                     initial={{ width: 0 }}
                     animate={{ width: `${assetWidths[index]}%` }}
                     transition={{ duration: 1, delay: 0.5 + index * 0.1 }}
@@ -233,7 +233,7 @@ export default function OverviewPage() {
 
         {/* Reserve Ratio Gauge */}
         <motion.div
-          className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.3 }}
@@ -267,22 +267,22 @@ export default function OverviewPage() {
               </svg>
               <div className="absolute inset-0 flex flex-col items-center justify-center">
                 <div className="text-3xl font-medium">127.3%</div>
-                <div className="text-xs text-neutral-500">Ratio</div>
+                <div className="text-xs text-muted-foreground/70">Ratio</div>
               </div>
             </div>
           </div>
 
           <div className="space-y-3">
             <div className="flex items-center justify-between text-sm">
-              <span className="text-neutral-500">Target</span>
+              <span className="text-muted-foreground/70">Target</span>
               <span className="font-medium">120%</span>
             </div>
             <div className="flex items-center justify-between text-sm">
-              <span className="text-neutral-500">Minimum</span>
+              <span className="text-muted-foreground/70">Minimum</span>
               <span className="font-medium">100%</span>
             </div>
             <div className="flex items-center justify-between text-sm">
-              <span className="text-neutral-500">Status</span>
+              <span className="text-muted-foreground/70">Status</span>
               <span className="text-green-400 flex items-center gap-1">
                 <CheckCircle2 className="size-3" /> Healthy
               </span>
@@ -295,7 +295,7 @@ export default function OverviewPage() {
       <ErrorBoundary name="Transaction Feed">
       {/* Real-time Transaction Feed */}
       <motion.div
-        className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+        className="p-6 bg-card border-border rounded-xl"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.5 }}
@@ -315,7 +315,7 @@ export default function OverviewPage() {
               }}
             />
           </div>
-          <button className="text-xs text-neutral-400 hover:text-white transition-colors flex items-center gap-1 cursor-pointer">
+          <button className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 cursor-pointer">
             View all <ArrowUpRight className="size-3" />
           </button>
         </div>
@@ -323,29 +323,29 @@ export default function OverviewPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5">
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">ID</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Type</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Asset</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Amount</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Time</th>
-                <th className="text-left py-3 px-4 text-neutral-500 font-medium">Hash</th>
+              <tr className="border-border">
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">ID</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Type</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Asset</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Amount</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Time</th>
+                <th className="text-left py-3 px-4 text-muted-foreground/70 font-medium">Hash</th>
               </tr>
             </thead>
             <tbody>
               {transactions.map((tx, index) => (
                 <motion.tr
                   key={tx.id}
-                  className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+                  className="border-border hover:bg-muted/20 transition-colors"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.6 + index * 0.05 }}
                 >
-                  <td className="py-3 px-4 font-mono text-xs text-neutral-400">{tx.id}</td>
+                  <td className="py-3 px-4 font-mono text-xs text-muted-foreground">{tx.id}</td>
                   <td className="py-3 px-4">{tx.type}</td>
                   <td className="py-3 px-4">
-                    <span className="px-2 py-1 bg-white/5 rounded text-xs font-medium">
+                    <span className="px-2 py-1 bg-muted rounded text-xs font-medium">
                       {tx.asset}
                     </span>
                   </td>
@@ -370,9 +370,9 @@ export default function OverviewPage() {
                       {tx.status}
                     </span>
                   </td>
-                  <td className="py-3 px-4 text-neutral-400">{tx.time}</td>
+                  <td className="py-3 px-4 text-muted-foreground">{tx.time}</td>
                   <td className="py-3 px-4">
-                    <button className="font-mono text-xs text-neutral-500 hover:text-white transition-colors cursor-pointer">
+                    <button className="font-mono text-xs text-muted-foreground/70 hover:text-foreground transition-colors cursor-pointer">
                       {tx.hash}
                     </button>
                   </td>
diff --git a/apps/frontend/src/app/dashboard/payments/loading.tsx b/apps/frontend/src/app/dashboard/payments/loading.tsx
index c49342c..725138a 100644
--- a/apps/frontend/src/app/dashboard/payments/loading.tsx
+++ b/apps/frontend/src/app/dashboard/payments/loading.tsx
@@ -18,7 +18,7 @@ export default function PaymentsLoading() {
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
-            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-lg"
+            className="p-4 bg-card border-border rounded-lg"
           >
             <Skeleton className="h-8 w-16 mb-1" />
             <Skeleton className="h-4 w-24" />
@@ -26,11 +26,11 @@ export default function PaymentsLoading() {
         ))}
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 7 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -40,7 +40,7 @@ export default function PaymentsLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 10 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 7 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/payments/page.tsx b/apps/frontend/src/app/dashboard/payments/page.tsx
index f366d8d..08c694d 100644
--- a/apps/frontend/src/app/dashboard/payments/page.tsx
+++ b/apps/frontend/src/app/dashboard/payments/page.tsx
@@ -99,7 +99,7 @@ export default function PaymentsPage() {
         >
           Payments
         </motion.h1>
-        <p className="text-sm text-neutral-400">Track and manage all payment transactions</p>
+        <p className="text-sm text-muted-foreground">Track and manage all payment transactions</p>
       </div>
 
       {/* Filters */}
@@ -109,20 +109,20 @@ export default function PaymentsPage() {
         animate={{ opacity: 1, y: 0 }}
       >
         <div className="flex-1 relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-neutral-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-muted-foreground/70" />
           <input
             type="text"
             placeholder="Search by ID, reference, or currency..."
             value={searchQuery}
             onChange={(e) => handleSearch(e.target.value)}
-            className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg text-sm focus:outline-none focus:border-white/20 transition-colors"
+            className="w-full pl-10 pr-4 py-3 bg-muted border-border rounded-lg text-sm focus:outline-none focus:border-white/20 transition-colors"
           />
         </div>
-        <button className="px-4 py-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all flex items-center justify-center gap-2 cursor-pointer">
+        <button className="px-4 py-3 bg-muted border-border rounded-lg hover:bg-accent transition-all flex items-center justify-center gap-2 cursor-pointer">
           <Filter className="size-4" />
           <span className="text-sm">Filters</span>
         </button>
-        <button className="px-4 py-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all flex items-center justify-center gap-2 cursor-pointer">
+        <button className="px-4 py-3 bg-muted border-border rounded-lg hover:bg-accent transition-all flex items-center justify-center gap-2 cursor-pointer">
           <Download className="size-4" />
           <span className="text-sm">Export</span>
         </button>
@@ -138,7 +138,7 @@ export default function PaymentsPage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-lg"
+            className="p-4 bg-card border-border rounded-lg"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
@@ -150,7 +150,7 @@ export default function PaymentsPage() {
                 stat.value.toLocaleString()
               )}
             </div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
@@ -175,7 +175,7 @@ export default function PaymentsPage() {
 
       {/* Payments Table */}
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -183,24 +183,24 @@ export default function PaymentsPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium whitespace-nowrap">
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium whitespace-nowrap">
                   Payment ID
                 </th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium whitespace-nowrap">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium whitespace-nowrap">
                   Date & Time
                 </th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Asset</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Amount</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Reference</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Actions</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Asset</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Amount</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Reference</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Actions</th>
               </tr>
             </thead>
             <tbody>
               {loading ? (
                 Array.from({ length: limit }).map((_, i) => (
-                  <tr key={`skeleton-${i}`} className="border-b border-white/5">
+                  <tr key={`skeleton-${i}`} className="border-b border-border">
                     <td className="py-4 px-4">
                       <Skeleton className="h-4 w-32" />
                     </td>
@@ -243,7 +243,7 @@ export default function PaymentsPage() {
                 payments.map((payment, index) => (
                   <motion.tr
                     key={payment.id}
-                    className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+                    className="border-border hover:bg-muted/20 transition-colors"
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0.05 * index }}
@@ -251,11 +251,11 @@ export default function PaymentsPage() {
                     <td className="py-4 px-4">
                       <div className="font-mono text-xs">{payment.paymentReference}</div>
                     </td>
-                    <td className="py-4 px-4 text-neutral-400 whitespace-nowrap">
+                    <td className="py-4 px-4 text-muted-foreground whitespace-nowrap">
                       {new Date(payment.createdAt).toLocaleString()}
                     </td>
                     <td className="py-4 px-4">
-                      <span className="px-2 py-1 bg-white/5 rounded text-xs font-medium">
+                      <span className="px-2 py-1 bg-muted rounded text-xs font-medium">
                         {payment.currency}
                       </span>
                     </td>
@@ -282,11 +282,11 @@ export default function PaymentsPage() {
                         {payment.status}
                       </span>
                     </td>
-                    <td className="py-4 px-4 text-neutral-400 text-xs">
+                    <td className="py-4 px-4 text-muted-foreground text-xs">
                       {payment.reference ?? '—'}
                     </td>
                     <td className="py-4 px-4">
-                      <button className="text-white hover:text-neutral-400 transition-colors cursor-pointer">
+                      <button className="text-foreground hover:text-muted-foreground transition-colors cursor-pointer">
                         <ArrowUpRight className="size-4" />
                       </button>
                     </td>
@@ -299,7 +299,7 @@ export default function PaymentsPage() {
 
         {/* Pagination */}
         {totalPages > 1 && (
-          <div className="border-t border-white/5 py-4 px-4">
+          <div className="border-t border-border py-4 px-4">
             <Pagination>
               <PaginationContent>
                 <PaginationItem>
@@ -322,7 +322,7 @@ export default function PaymentsPage() {
                   .map((item, i) =>
                     item === 'ellipsis' ? (
                       <PaginationItem key={`ellipsis-${i}`}>
-                        <span className="flex size-9 items justify-center text-neutral-500">
+                        <span className="flex size-9 items justify-center text-muted-foreground/70">
                           ...
                         </span>
                       </PaginationItem>
diff --git a/apps/frontend/src/app/dashboard/subscriptions/loading.tsx b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx
index 81fd9ec..1d82762 100644
--- a/apps/frontend/src/app/dashboard/subscriptions/loading.tsx
+++ b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx
@@ -12,7 +12,7 @@ export default function SubscriptionsLoading() {
         {Array.from({ length: 3 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-8 w-24 mb-1" />
             <Skeleton className="h-4 w-36" />
@@ -24,11 +24,11 @@ export default function SubscriptionsLoading() {
         <Skeleton className="h-11 w-52 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 7 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -38,7 +38,7 @@ export default function SubscriptionsLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 3 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 7 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/subscriptions/page.tsx b/apps/frontend/src/app/dashboard/subscriptions/page.tsx
index 8d01739..b6fa339 100644
--- a/apps/frontend/src/app/dashboard/subscriptions/page.tsx
+++ b/apps/frontend/src/app/dashboard/subscriptions/page.tsx
@@ -44,7 +44,7 @@ export default function SubscriptionsPage() {
         >
           Subscriptions
         </motion.h1>
-        <p className="text-sm text-neutral-400">Manage recurring payment subscriptions</p>
+        <p className="text-sm text-muted-foreground">Manage recurring payment subscriptions</p>
       </div>
 
       <div className="grid sm:grid-cols-3 gap-4 mb-8">
@@ -55,26 +55,26 @@ export default function SubscriptionsPage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
           >
             <div className="text-2xl font-medium mb-1">{stat.value}</div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
 
       <motion.div className="mb-6" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
-        <button className="px-4 py-3 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all flex items-center gap-2 font-medium cursor-pointer">
+        <button className="px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all flex items-center gap-2 font-medium cursor-pointer">
           <Plus className="size-4" />
           Create Subscription
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -82,23 +82,23 @@ export default function SubscriptionsPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">
                   Subscription ID
                 </th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Customer</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Plan</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Amount</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Interval</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Next Billing</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Customer</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Plan</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Amount</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Interval</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Next Billing</th>
                </tr>
             </thead>
             <tbody>
               {subscriptions.map((sub, index) => (
                 <motion.tr
                   key={sub.id}
-                  className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+                  className="border-border hover:bg-muted/20 transition-colors"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.4 + index * 0.05 }}
@@ -106,10 +106,10 @@ export default function SubscriptionsPage() {
                   <td className="py-4 px-4 font-mono text-xs">{sub.id}</td>
                   <td className="py-4 px-4">{sub.customer}</td>
                   <td className="py-4 px-4">
-                    <span className="px-2 py-1 bg-white/5 rounded text-xs">{sub.plan}</span>
+                    <span className="px-2 py-1 bg-muted rounded text-xs">{sub.plan}</span>
                   </td>
                   <td className="py-4 px-4 font-medium">${sub.amount}</td>
-                  <td className="py-4 px-4 text-neutral-400">{sub.interval}</td>
+                  <td className="py-4 px-4 text-muted-foreground">{sub.interval}</td>
                   <td className="py-4 px-4">
                     <span
                       className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
@@ -126,7 +126,7 @@ export default function SubscriptionsPage() {
                       {sub.status}
                     </span>
                   </td>
-                  <td className="py-4 px-4 text-neutral-400">{sub.nextBilling}</td>
+                  <td className="py-4 px-4 text-muted-foreground">{sub.nextBilling}</td>
                 </motion.tr>
               ))}
             </tbody>
diff --git a/apps/frontend/src/app/dashboard/tokens/loading.tsx b/apps/frontend/src/app/dashboard/tokens/loading.tsx
index 3b0b5a2..d78d0c4 100644
--- a/apps/frontend/src/app/dashboard/tokens/loading.tsx
+++ b/apps/frontend/src/app/dashboard/tokens/loading.tsx
@@ -12,11 +12,11 @@ export default function TokensLoading() {
         <Skeleton className="h-11 w-32 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 6 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -26,7 +26,7 @@ export default function TokensLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 4 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 6 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/tokens/page.tsx b/apps/frontend/src/app/dashboard/tokens/page.tsx
index e75b234..7e4b461 100644
--- a/apps/frontend/src/app/dashboard/tokens/page.tsx
+++ b/apps/frontend/src/app/dashboard/tokens/page.tsx
@@ -24,14 +24,14 @@ export default function TokenWhitelistPage() {
   ) : tokens.map((token, index) => (
     <motion.tr
       key={token.symbol}
-      className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+      className="border-border hover:bg-muted/20 transition-colors"
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.3 + index * 0.05 }}
     >
       <td className="py-4 px-4">
         <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-white/20 to-white/10 flex items-center justify-center font-medium text-xs">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-foreground/10 to-foreground/5 flex items-center justify-center font-medium text-xs">
             {token.symbol.slice(0, 2)}
           </div>
           <span className="font-medium">{token.symbol}</span>
@@ -42,9 +42,9 @@ export default function TokenWhitelistPage() {
           {token.enabled ? (
             <ToggleRight className="size-6 text-green-400" />
           ) : (
-            <ToggleLeft className="size-6 text-neutral-500" />
+            <ToggleLeft className="size-6 text-muted-foreground/70" />
           )}
-          <span className={token.enabled ? "text-green-400" : "text-neutral-500"}>
+          <span className={token.enabled ? "text-green-400" : "text-muted-foreground/70"}>
             {token.enabled ? "Enabled" : "Disabled"}
           </span>
         </button>
@@ -54,14 +54,14 @@ export default function TokenWhitelistPage() {
           {token.autoConvert ? (
             <ToggleRight className="size-6 text-green-400" />
           ) : (
-            <ToggleLeft className="size-6 text-neutral-500" />
+            <ToggleLeft className="size-6 text-muted-foreground/70" />
           )}
         </button>
       </td>
-      <td className="py-4 px-4 font-mono text-neutral-400">{token.minAmount}</td>
-      <td className="py-4 px-4 font-mono text-neutral-400">{token.maxAmount}</td>
+      <td className="py-4 px-4 font-mono text-muted-foreground">{token.minAmount}</td>
+      <td className="py-4 px-4 font-mono text-muted-foreground">{token.maxAmount}</td>
       <td className="py-4 px-4">
-        <button className="p-2 hover:bg-white/5 rounded-lg transition-colors cursor-pointer">
+        <button className="p-2 hover:bg-accent rounded-lg transition-colors cursor-pointer">
           <Settings className="size-4" />
         </button>
       </td>
@@ -77,7 +77,7 @@ export default function TokenWhitelistPage() {
         >
           Token Whitelist
         </motion.h1>
-        <p className="text-sm text-neutral-400">Configure accepted tokens and conversion rules</p>
+        <p className="text-sm text-muted-foreground">Configure accepted tokens and conversion rules</p>
       </div>
 
       <motion.div
@@ -85,14 +85,14 @@ export default function TokenWhitelistPage() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <button className="px-4 py-3 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all flex items-center gap-2 font-medium cursor-pointer">
+        <button className="px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all flex items-center gap-2 font-medium cursor-pointer">
           <Plus className="size-4" />
           Add Token
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.2 }}
@@ -100,13 +100,13 @@ export default function TokenWhitelistPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Token</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Auto-Convert</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Min Amount</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Max Amount</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Actions</th>
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Token</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Auto-Convert</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Min Amount</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Max Amount</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Actions</th>
               </tr>
             </thead>
             <tbody>
diff --git a/apps/frontend/src/app/dashboard/treasury/loading.tsx b/apps/frontend/src/app/dashboard/treasury/loading.tsx
index 50558d1..b598cf6 100644
--- a/apps/frontend/src/app/dashboard/treasury/loading.tsx
+++ b/apps/frontend/src/app/dashboard/treasury/loading.tsx
@@ -12,7 +12,7 @@ export default function TreasuryLoading() {
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-10 w-10 rounded-lg mb-4" />
             <Skeleton className="h-8 w-32 mb-1" />
@@ -21,11 +21,11 @@ export default function TreasuryLoading() {
         ))}
       </div>
 
-      <div className="mb-8 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+      <div className="mb-8 p-6 bg-card border-border rounded-xl">
         <Skeleton className="h-6 w-36 mb-6" />
         <div className="space-y-4">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="p-6 bg-white/[0.02] border border-white/5 rounded-lg">
+            <div key={i} className="p-6 bg-muted/30 border-border rounded-lg">
               <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <div>
                   <Skeleton className="h-12 w-32" />
@@ -50,11 +50,11 @@ export default function TreasuryLoading() {
       </div>
 
       <div className="grid lg:grid-cols-2 gap-6">
-        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="p-6 bg-card border-border rounded-xl">
           <Skeleton className="h-6 w-44 mb-6" />
           <div className="space-y-3">
             {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+              <div key={i} className="p-4 bg-muted/30 border-border rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <Skeleton className="h-5 w-16 rounded" />
                   <Skeleton className="h-4 w-24" />
@@ -68,7 +68,7 @@ export default function TreasuryLoading() {
           </div>
         </div>
 
-        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="p-6 bg-card border-border rounded-xl">
           <Skeleton className="h-6 w-44 mb-6" />
           <div className="space-y-6">
             {Array.from({ length: 3 }).map((_, i) => (
diff --git a/apps/frontend/src/app/dashboard/treasury/page.tsx b/apps/frontend/src/app/dashboard/treasury/page.tsx
index e656620..762095e 100644
--- a/apps/frontend/src/app/dashboard/treasury/page.tsx
+++ b/apps/frontend/src/app/dashboard/treasury/page.tsx
@@ -85,7 +85,7 @@ export default function TreasuryPage() {
         >
           Treasury
         </motion.h1>
-        <p className="text-sm text-neutral-400">Manage mirror assets, reserves, and redemptions</p>
+        <p className="text-sm text-muted-foreground">Manage mirror assets, reserves, and redemptions</p>
       </div>
 
       {/* Error State */}
@@ -111,20 +111,20 @@ export default function TreasuryPage() {
         {overviewStats.map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
           >
             <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-white/5 rounded-lg">
+              <div className="p-2 bg-muted rounded-lg">
                 <stat.icon className="size-5" />
               </div>
             </div>
             <div className="text-2xl font-medium mb-1">
               {loading ? <Skeleton className="h-8 w-28 inline-block" /> : stat.value}
             </div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
@@ -132,7 +132,7 @@ export default function TreasuryPage() {
       <ErrorBoundary name="Mirror Assets">
       {/* Mirror Assets */}
       <motion.div
-        className="mb-8 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+        className="mb-8 p-6 bg-card border-border rounded-xl"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -141,7 +141,7 @@ export default function TreasuryPage() {
 
         <div className="space-y-4">
           {loading ? Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="p-6 bg-white/[0.02] border border-white/5 rounded-lg">
+            <div key={i} className="p-6 bg-muted/30 border-border rounded-lg">
               <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <div>
                   <Skeleton className="h-12 w-32" />
@@ -165,7 +165,7 @@ export default function TreasuryPage() {
           )) : data?.assets.map((asset, index) => (
             <motion.div
               key={asset.symbol}
-              className="p-6 bg-white/[0.02] border border-white/5 rounded-lg hover:border-white/10 transition-all"
+              className="p-6 bg-muted/30 border-border rounded-lg hover:border-foreground/10 transition-all"
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.4 + index * 0.1 }}
@@ -173,23 +173,23 @@ export default function TreasuryPage() {
               <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <div>
                   <div className="flex items-center gap-3 mb-3">
-                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-white/20 to-white/10 flex items-center justify-center font-medium">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-foreground/10 to-foreground/5 flex items-center justify-center font-medium">
                       {asset.symbol.slice(0, 2)}
                     </div>
                     <div>
                       <div className="font-medium">s{asset.symbol}</div>
-                      <div className="text-xs text-neutral-500">{assetNames[asset.symbol] ?? asset.symbol}</div>
+                      <div className="text-xs text-muted-foreground/70">{assetNames[asset.symbol] ?? asset.symbol}</div>
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <div className="text-xs text-neutral-500 mb-1">Balance</div>
+                  <div className="text-xs text-muted-foreground/70 mb-1">Balance</div>
                   <div className="font-medium">{parseFloat(asset.treasury_balance).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}</div>
                 </div>
 
                 <div>
-                  <div className="text-xs text-neutral-500 mb-1">Reserve Backing</div>
+                  <div className="text-xs text-muted-foreground/70 mb-1">Reserve Backing</div>
                   <div className="font-medium">{parseFloat(asset.total_supply).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}</div>
                   <div className="flex items-center gap-1 text-xs text-green-400">
                     <CheckCircle2 className="size-3" />
@@ -198,10 +198,10 @@ export default function TreasuryPage() {
                 </div>
 
                 <div className="flex flex-col gap-2">
-                  <button className="px-4 py-2 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all text-sm font-medium cursor-pointer">
+                  <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all text-sm font-medium cursor-pointer">
                     Redeem
                   </button>
-                  <button className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all text-sm flex items-center justify-center gap-2 cursor-pointer">
+                  <button className="px-4 py-2 bg-muted border-border rounded-lg hover:bg-accent transition-all text-sm flex items-center justify-center gap-2 cursor-pointer">
                     <Eye className="size-4" />
                     Proof of Reserves
                   </button>
@@ -218,7 +218,7 @@ export default function TreasuryPage() {
         <ErrorBoundary name="Burn History">
         {/* Burn History */}
         <motion.div
-          className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.5 }}
@@ -229,20 +229,20 @@ export default function TreasuryPage() {
             {burnHistory.map((burn, index) => (
               <motion.div
                 key={index}
-                className="p-4 bg-white/[0.02] border border-white/5 rounded-lg hover:border-white/10 transition-all"
+                className="p-4 bg-muted/30 border-border rounded-lg hover:border-foreground/10 transition-all"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.6 + index * 0.05 }}
               >
                 <div className="flex items-center justify-between mb-2">
-                  <span className="px-2 py-1 bg-white/5 rounded text-xs font-medium">
+                  <span className="px-2 py-1 bg-muted rounded text-xs font-medium">
                     {burn.asset}
                   </span>
-                  <span className="text-xs text-neutral-500">{burn.date}</span>
+                  <span className="text-xs text-muted-foreground/70">{burn.date}</span>
                 </div>
                 <div className="flex items-center justify-between">
                   <div className="font-medium">{burn.amount}</div>
-                  <button className="font-mono text-xs text-neutral-500 hover:text-white transition-colors cursor-pointer">
+                  <button className="font-mono text-xs text-muted-foreground/70 hover:text-foreground transition-colors cursor-pointer">
                     {burn.hash}
                   </button>
                 </div>
@@ -256,7 +256,7 @@ export default function TreasuryPage() {
         <ErrorBoundary name="Liquidity Health">
         {/* Liquidity Health */}
         <motion.div
-          className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl"
+          className="p-6 bg-card border-border rounded-xl"
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.5 }}
@@ -273,10 +273,10 @@ export default function TreasuryPage() {
             )) : liquidityMetrics.map((metric, index) => (
               <div key={metric.label}>
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm text-neutral-400">{metric.label}</span>
+                  <span className="text-sm text-muted-foreground">{metric.label}</span>
                   <span className="text-sm font-medium text-green-400">{metric.status}</span>
                 </div>
-                <div className="h-2 bg-white/5 rounded-full overflow-hidden">
+                <div className="h-2 bg-muted rounded-full overflow-hidden">
                   <motion.div
                     className="h-full bg-gradient-to-r from-green-400 to-green-300"
                     initial={{ width: 0 }}
@@ -284,7 +284,7 @@ export default function TreasuryPage() {
                     transition={{ duration: 1, delay: 0.6 + index * 0.1 }}
                   />
                 </div>
-                <div className="text-right text-xs text-neutral-500 mt-1">{metric.value}%</div>
+                <div className="text-right text-xs text-muted-foreground/70 mt-1">{metric.value}%</div>
               </div>
             ))}
           </div>
diff --git a/apps/frontend/src/app/dashboard/webhooks/loading.tsx b/apps/frontend/src/app/dashboard/webhooks/loading.tsx
index 0ac8883..53ceaf5 100644
--- a/apps/frontend/src/app/dashboard/webhooks/loading.tsx
+++ b/apps/frontend/src/app/dashboard/webhooks/loading.tsx
@@ -12,7 +12,7 @@ export default function WebhooksLoading() {
         {Array.from({ length: 3 }).map((_, i) => (
           <div
             key={i}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
           >
             <Skeleton className="h-8 w-20 mb-1" />
             <Skeleton className="h-4 w-28" />
@@ -24,11 +24,11 @@ export default function WebhooksLoading() {
         <Skeleton className="h-11 w-36 rounded-lg" />
       </div>
 
-      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+      <div className="bg-card border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
+              <tr className="border-border bg-muted/20">
                 {Array.from({ length: 6 }).map((_, i) => (
                   <th key={i} className="py-4 px-4">
                     <Skeleton className="h-4 w-20" />
@@ -38,7 +38,7 @@ export default function WebhooksLoading() {
             </thead>
             <tbody>
               {Array.from({ length: 3 }).map((_, i) => (
-                <tr key={i} className="border-b border-white/5">
+                <tr key={i} className="border-b border-border">
                   {Array.from({ length: 6 }).map((_, j) => (
                     <td key={j} className="py-4 px-4">
                       <Skeleton className="h-4 w-24" />
diff --git a/apps/frontend/src/app/dashboard/webhooks/page.tsx b/apps/frontend/src/app/dashboard/webhooks/page.tsx
index 5a2c30d..d66e7b7 100644
--- a/apps/frontend/src/app/dashboard/webhooks/page.tsx
+++ b/apps/frontend/src/app/dashboard/webhooks/page.tsx
@@ -45,7 +45,7 @@ export default function WebhooksPage() {
         >
           Webhooks
         </motion.h1>
-        <p className="text-sm text-neutral-400">
+        <p className="text-sm text-muted-foreground">
           Configure event notifications with on-chain proof
         </p>
       </div>
@@ -58,26 +58,26 @@ export default function WebhooksPage() {
         ].map((stat, index) => (
           <motion.div
             key={stat.label}
-            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+            className="p-6 bg-card border-border rounded-xl"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
           >
             <div className="text-2xl font-medium mb-1">{stat.value}</div>
-            <div className="text-xs text-neutral-500">{stat.label}</div>
+            <div className="text-xs text-muted-foreground/70">{stat.label}</div>
           </motion.div>
         ))}
       </div>
 
       <motion.div className="mb-6" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
-        <button className="px-4 py-3 bg-white text-black rounded-lg hover:bg-neutral-200 transition-all flex items-center gap-2 font-medium cursor-pointer">
+        <button className="px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all flex items-center gap-2 font-medium cursor-pointer">
           <Plus className="size-4" />
           Add Webhook
         </button>
       </motion.div>
 
       <motion.div
-        className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden"
+        className="bg-card border-border rounded-xl overflow-hidden"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3 }}
@@ -85,13 +85,13 @@ export default function WebhooksPage() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/5 bg-white/[0.02]">
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Webhook ID</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Endpoint</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Events</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Status</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Last Triggered</th>
-                <th className="text-left py-4 px-4 text-neutral-500 font-medium">Proof Hash</th>
+              <tr className="border-border bg-muted/20">
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Webhook ID</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Endpoint</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Events</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Status</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Last Triggered</th>
+                <th className="text-left py-4 px-4 text-muted-foreground/70 font-medium">Proof Hash</th>
                </tr>
             </thead>
             <tbody>
@@ -106,19 +106,19 @@ export default function WebhooksPage() {
                 webhooks.map((webhook, index) => (
                   <motion.tr
                     key={webhook.id}
-                    className="border-b border-white/5 hover:bg-white/[0.02] transition-colors"
+                    className="border-border hover:bg-muted/20 transition-colors"
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0.4 + index * 0.05 }}
                   >
                     <td className="py-4 px-4 font-mono text-xs">{webhook.id}</td>
-                    <td className="py-4 px-4 text-neutral-400 text-xs">{webhook.endpoint}</td>
+                    <td className="py-4 px-4 text-muted-foreground text-xs">{webhook.endpoint}</td>
                     <td className="py-4 px-4">
                       <div className="flex flex-wrap gap-1">
                         {webhook.events.slice(0, 2).map((event) => (
                           <span
                             key={event}
-                            className="px-2 py-1 bg-white/5 rounded text-xs whitespace-nowrap"
+                            className="px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
                           >
                             {event}
                           </span>
@@ -130,7 +130,7 @@ export default function WebhooksPage() {
                         className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
                           webhook.status === 'active'
                             ? 'bg-green-400/10 text-green-400'
-                            : 'bg-neutral-400/10 text-neutral-400'
+                            : 'bg-neutral-400/10 text-muted-foreground'
                         }`}
                       >
                         {webhook.status === 'active' ? (
@@ -141,9 +141,9 @@ export default function WebhooksPage() {
                         {webhook.status}
                       </span>
                     </td>
-                    <td className="py-4 px-4 text-neutral-400">{webhook.lastTriggered}</td>
+                    <td className="py-4 px-4 text-muted-foreground">{webhook.lastTriggered}</td>
                     <td className="py-4 px-4">
-                      <button className="font-mono text-xs text-neutral-500 hover:text-white transition-colors cursor-pointer">
+                      <button className="font-mono text-xs text-muted-foreground/70 hover:text-foreground transition-colors cursor-pointer">
                         {webhook.hash}
                       </button>
                     </td>
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
index ee3d93b..6519e6f 100644
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -64,6 +64,8 @@
   --destructive-foreground: oklch(0.637 0.237 25.331);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
+  --input-background: oklch(0.205 0 0);
+  --switch-background: oklch(0.37 0 0);
   --ring: oklch(0.439 0 0);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index 7e81108..b7f1b20 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
+import { ThemeProvider } from 'next-themes';
 import { AuthProvider } from '@/contexts/AuthContext';
 import './globals.css';
 
@@ -84,9 +85,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <AuthProvider>{children}</AuthProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <AuthProvider>{children}</AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/apps/frontend/src/app/login/page.tsx b/apps/frontend/src/app/login/page.tsx
index 5eb621c..11f6ca8 100644
--- a/apps/frontend/src/app/login/page.tsx
+++ b/apps/frontend/src/app/login/page.tsx
@@ -68,7 +68,7 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black px-6 py-12">
+    <div className="flex min-h-screen items-center justify-center bg-background px-6 py-12">
       <Toaster />
       <motion.div
         initial={{ opacity: 0, y: 20 }}
@@ -76,11 +76,11 @@ export default function LoginPage() {
         transition={{ duration: 0.5, ease: 'easeOut' }}
         className="w-full max-w-md"
       >
-        <div className="rounded-2xl border border-white/10 bg-white/5 p-8 shadow-2xl shadow-black/50">
+        <div className="rounded-2xl border-border bg-card p-8 shadow-2xl shadow-black/50">
           <div className="mb-8 text-center">
-            <p className="text-sm uppercase tracking-[0.3em] text-neutral-400">StellarPay</p>
-            <h1 className="mt-3 text-3xl font-semibold text-white">Sign in</h1>
-            <p className="mt-2 text-sm text-neutral-400">Access your merchant dashboard.</p>
+            <p className="text-sm uppercase tracking-[0.3em] text-muted-foreground">StellarPay</p>
+            <h1 className="mt-3 text-3xl font-semibold text-foreground">Sign in</h1>
+            <p className="mt-2 text-sm text-muted-foreground">Access your merchant dashboard.</p>
           </div>
 
           {apiError && (
@@ -95,16 +95,16 @@ export default function LoginPage() {
 
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-5" noValidate>
             <div className="space-y-2">
-              <Label htmlFor="email" className="text-neutral-300">
+              <Label htmlFor="email" className="text-muted-foreground">
                 Email
               </Label>
               <div className="relative">
-                <Mail className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-500" />
+                <Mail className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/70" />
                 <Input
                   id="email"
                   type="email"
                   placeholder="merchant@example.com"
-                  className="border-white/10 bg-black/40 pl-10 text-white placeholder:text-neutral-600"
+                  className="border-border bg-muted pl-10 text-foreground placeholder:text-muted-foreground"
                   {...register('email')}
                 />
               </div>
@@ -112,22 +112,22 @@ export default function LoginPage() {
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password" className="text-neutral-300">
+              <Label htmlFor="password" className="text-muted-foreground">
                 Password
               </Label>
               <div className="relative">
-                <Lock className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-500" />
+                <Lock className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/70" />
                 <Input
                   id="password"
                   type={showPassword ? 'text' : 'password'}
                   placeholder="Enter your password"
-                  className="border-white/10 bg-black/40 pl-10 pr-10 text-white placeholder:text-neutral-600"
+                  className="border-border bg-muted pl-10 pr-10 text-foreground placeholder:text-muted-foreground"
                   {...register('password')}
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-neutral-300"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground/70 hover:text-muted-foreground"
                   tabIndex={-1}
                 >
                   {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
@@ -139,7 +139,7 @@ export default function LoginPage() {
             <Button
               type="submit"
               disabled={isSubmitting}
-              className="w-full bg-white py-6 text-sm font-semibold text-black transition hover:bg-neutral-200 disabled:opacity-50"
+              className="w-full bg-primary py-6 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
             >
               {isSubmitting ? (
                 <span className="flex items-center gap-2">
@@ -152,11 +152,11 @@ export default function LoginPage() {
             </Button>
           </form>
 
-          <p className="mt-8 text-center text-sm text-neutral-500">
+          <p className="mt-8 text-center text-sm text-muted-foreground/70">
             Don&apos;t have an account?{' '}
             <Link
               href="/register"
-              className="font-medium text-white underline-offset-4 hover:underline"
+              className="font-medium text-foreground underline-offset-4 hover:underline"
             >
               Create one
             </Link>