diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index de6886fb..30ae073b 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -1,4 +1,4 @@
-import { createContext, use } from 'react';
+import { useThemeStore } from '../stores/themeStore';
 
 export type Theme = 'light' | 'dark';
 
@@ -7,10 +7,16 @@ export interface ThemeContextType {
   toggleTheme: () => void;
 }
 
-export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
+/**
+ * useTheme hook — reads theme state from the zustand store.
+ *
+ * Components that call this hook will re-render when the theme changes.
+ * Theme persistence is handled by the zustand persist middleware.
+ */
 export const useTheme = () => {
-  const context = use(ThemeContext);
-  if (!context) throw new Error('useTheme must be used within ThemeProvider');
-  return context;
-};
+  const theme = useThemeStore((s) => s.theme as Theme);
+  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+  const setTheme = useThemeStore((s) => s.setTheme);
+
+  return { theme, toggleTheme, setTheme };
+};
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d4d498c9..10e0a9f6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -21,6 +21,41 @@
   --accent2: #7c6ff7;
   --danger: #ff7b72;
   --success: #3fb950;
+  --warning: #ffd500;
+  --accent-alpha-06: rgba(74, 240, 184, 0.06);
+  --accent-alpha-08: rgba(74, 240, 184, 0.08);
+  --accent-alpha-10: rgba(74, 240, 184, 0.1);
+  --accent-alpha-12: rgba(74, 240, 184, 0.12);
+  --accent-alpha-15: rgba(74, 240, 184, 0.15);
+  --accent-alpha-20: rgba(74, 240, 184, 0.2);
+  --accent-alpha-30: rgba(74, 240, 184, 0.3);
+  --accent2-alpha-06: rgba(124, 111, 247, 0.06);
+  --accent2-alpha-10: rgba(124, 111, 247, 0.1);
+  --accent2-alpha-12: rgba(124, 111, 247, 0.12);
+  --accent2-alpha-15: rgba(124, 111, 247, 0.15);
+  --accent2-alpha-20: rgba(124, 111, 247, 0.2);
+  --accent2-alpha-25: rgba(124, 111, 247, 0.25);
+  --accent2-hover: #6657e8;
+  --danger-alpha-08: rgba(255, 123, 114, 0.08);
+  --danger-alpha-10: rgba(255, 123, 114, 0.1);
+  --danger-alpha-12: rgba(255, 123, 114, 0.12);
+  --danger-alpha-15: rgba(255, 123, 114, 0.15);
+  --danger-alpha-20: rgba(255, 123, 114, 0.2);
+  --danger-hover: #ff5b53;
+  --success-alpha-10: rgba(63, 185, 80, 0.1);
+  --success-alpha-12: rgba(63, 185, 80, 0.12);
+  --success-alpha-20: rgba(63, 185, 80, 0.2);
+  --warning-alpha-10: rgba(255, 213, 0, 0.1);
+  --warning-alpha-12: rgba(255, 213, 0, 0.12);
+  --warning-alpha-20: rgba(255, 213, 0, 0.2);
+  --accent-glow: 0 0 20px rgba(74, 240, 184, 0.3);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --input-bg: rgba(255, 255, 255, 0.05);
+  --input-bg-hover: rgba(255, 255, 255, 0.08);
+  --row-hover: rgba(255, 255, 255, 0.02);
+  --scrim: rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --header-h: 64px;
   --font-head: 'Syne', sans-serif;
   --font-body: 'Inter', sans-serif;
@@ -40,6 +75,41 @@
   --accent2: #6c5ce7;
   --danger: #d1242f;
   --success: #1a7f37;
+  --warning: #daa520;
+  --accent-alpha-06: rgba(13, 150, 104, 0.06);
+  --accent-alpha-08: rgba(13, 150, 104, 0.08);
+  --accent-alpha-10: rgba(13, 150, 104, 0.1);
+  --accent-alpha-12: rgba(13, 150, 104, 0.12);
+  --accent-alpha-15: rgba(13, 150, 104, 0.15);
+  --accent-alpha-20: rgba(13, 150, 104, 0.2);
+  --accent-alpha-30: rgba(13, 150, 104, 0.3);
+  --accent2-alpha-06: rgba(108, 92, 231, 0.06);
+  --accent2-alpha-10: rgba(108, 92, 231, 0.1);
+  --accent2-alpha-12: rgba(108, 92, 231, 0.12);
+  --accent2-alpha-15: rgba(108, 92, 231, 0.15);
+  --accent2-alpha-20: rgba(108, 92, 231, 0.2);
+  --accent2-alpha-25: rgba(108, 92, 231, 0.25);
+  --accent2-hover: #5a4bd6;
+  --danger-alpha-08: rgba(209, 36, 47, 0.08);
+  --danger-alpha-10: rgba(209, 36, 47, 0.1);
+  --danger-alpha-12: rgba(209, 36, 47, 0.12);
+  --danger-alpha-15: rgba(209, 36, 47, 0.15);
+  --danger-alpha-20: rgba(209, 36, 47, 0.2);
+  --danger-hover: #b71b26;
+  --success-alpha-10: rgba(26, 127, 55, 0.1);
+  --success-alpha-12: rgba(26, 127, 55, 0.12);
+  --success-alpha-20: rgba(26, 127, 55, 0.2);
+  --warning-alpha-10: rgba(218, 165, 32, 0.1);
+  --warning-alpha-12: rgba(218, 165, 32, 0.12);
+  --warning-alpha-20: rgba(218, 165, 32, 0.2);
+  --accent-glow: 0 0 20px rgba(13, 150, 104, 0.3);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --input-bg: rgba(0, 0, 0, 0.03);
+  --input-bg-hover: rgba(0, 0, 0, 0.05);
+  --row-hover: rgba(0, 0, 0, 0.02);
+  --scrim: rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
   --header-h: 64px;
   --font-head: 'Syne', sans-serif;
   --font-body: 'Inter', sans-serif;
diff --git a/frontend/src/pages/CashFlowForecast.tsx b/frontend/src/pages/CashFlowForecast.tsx
index f83a9209..3b087f0f 100644
--- a/frontend/src/pages/CashFlowForecast.tsx
+++ b/frontend/src/pages/CashFlowForecast.tsx
@@ -132,7 +132,7 @@ export default function CashFlowForecast() {
     const { direction } = forecast.trendAnalysis;
     if (direction === 'increasing') return <TrendingUp className="w-5 h-5 text-emerald-400" />;
     if (direction === 'decreasing') return <TrendingDown className="w-5 h-5 text-red-400" />;
-    return <Minus className="w-5 h-5 text-zinc-400" />;
+    return <Minus className="w-5 h-5 text-[var(--muted)]" />;
   };
 
   const getAlertIcon = (severity: BudgetAlert['severity']) => {
@@ -146,7 +146,7 @@ export default function CashFlowForecast() {
       <header className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
         <div>
           <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">Cash Flow Forecast</h1>
-          <p className="text-sm text-zinc-400">
+          <p className="text-sm text-[var(--muted)]">
             Analyze historical payroll data and project future cash flow requirements
           </p>
         </div>
@@ -156,14 +156,14 @@ export default function CashFlowForecast() {
             placeholder="Distribution Account"
             value={params.distributionAccount}
             onChange={(e) => setParams({ ...params, distributionAccount: e.target.value })}
-            className="px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[44px]"
+            className="px-4 py-2 bg-zinc-900 border border-[var(--border-hi)] rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[44px]"
           />
           <input
             type="text"
             placeholder="Asset Issuer"
             value={params.assetIssuer}
             onChange={(e) => setParams({ ...params, assetIssuer: e.target.value })}
-            className="px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[44px]"
+            className="px-4 py-2 bg-zinc-900 border border-[var(--border-hi)] rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[44px]"
           />
           <input
             type="number"
@@ -172,7 +172,7 @@ export default function CashFlowForecast() {
             onChange={(e) =>
               setParams({ ...params, forecastDays: parseInt(e.target.value, 10) || 90 })
             }
-            className="px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-24 min-h-[44px]"
+            className="px-4 py-2 bg-zinc-900 border border-[var(--border-hi)] rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-24 min-h-[44px]"
           />
           <button
             onClick={() => {
@@ -192,7 +192,7 @@ export default function CashFlowForecast() {
           {[1, 2, 3].map((i) => (
             <div
               key={i}
-              className="animate-pulse bg-zinc-900 border border-zinc-800 rounded-xl p-6 h-64"
+              className="animate-pulse bg-zinc-900 border border-[var(--border-hi)] rounded-xl p-6 h-64"
             />
           ))}
         </div>
@@ -200,10 +200,10 @@ export default function CashFlowForecast() {
         <>
           {/* Summary Cards */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-zinc-400">Current Balance</span>
-                <DollarSign className="w-5 h-5 text-zinc-500" />
+                <span className="text-sm text-[var(--muted)]">Current Balance</span>
+                <DollarSign className="w-5 h-5 text-[var(--muted)]" />
               </div>
               <p className="text-2xl font-bold text-white">
                 {parseFloat(forecast.currentBalance).toLocaleString('en-US', {
@@ -211,13 +211,13 @@ export default function CashFlowForecast() {
                   maximumFractionDigits: 2,
                 })}
               </p>
-              <p className="text-xs text-zinc-500 mt-1">ORGUSD</p>
+              <p className="text-xs text-[var(--muted)] mt-1">ORGUSD</p>
             </div>
 
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-zinc-400">Projected Outflow</span>
-                <Calendar className="w-5 h-5 text-zinc-500" />
+                <span className="text-sm text-[var(--muted)]">Projected Outflow</span>
+                <Calendar className="w-5 h-5 text-[var(--muted)]" />
               </div>
               <p className="text-2xl font-bold text-white">
                 {forecast.totalProjectedOutflow.toLocaleString('en-US', {
@@ -225,15 +225,15 @@ export default function CashFlowForecast() {
                   maximumFractionDigits: 2,
                 })}
               </p>
-              <p className="text-xs text-zinc-500 mt-1">
+              <p className="text-xs text-[var(--muted)] mt-1">
                 {forecast.projections.length} scheduled payments
               </p>
             </div>
 
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-zinc-400">Projected Balance</span>
-                <TrendingDown className="w-5 h-5 text-zinc-500" />
+                <span className="text-sm text-[var(--muted)]">Projected Balance</span>
+                <TrendingDown className="w-5 h-5 text-[var(--muted)]" />
               </div>
               <p
                 className={`text-2xl font-bold ${
@@ -245,18 +245,18 @@ export default function CashFlowForecast() {
                   maximumFractionDigits: 2,
                 })}
               </p>
-              <p className="text-xs text-zinc-500 mt-1">After all projections</p>
+              <p className="text-xs text-[var(--muted)] mt-1">After all projections</p>
             </div>
 
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-zinc-400">Trend</span>
+                <span className="text-sm text-[var(--muted)]">Trend</span>
                 {getTrendIcon()}
               </div>
               <p className="text-2xl font-bold text-white capitalize">
                 {forecast.trendAnalysis.direction}
               </p>
-              <p className="text-xs text-zinc-500 mt-1">
+              <p className="text-xs text-[var(--muted)] mt-1">
                 {forecast.trendAnalysis.changePercent > 0 ? '+' : ''}
                 {forecast.trendAnalysis.changePercent.toFixed(1)}% vs historical
               </p>
@@ -265,7 +265,7 @@ export default function CashFlowForecast() {
 
           {/* Budget Alerts */}
           {alerts.length > 0 && (
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                 <AlertTriangle className="w-5 h-5 text-yellow-400" />
                 Budget Alerts ({alerts.length})
@@ -297,7 +297,7 @@ export default function CashFlowForecast() {
                           >
                             {alert.severity}
                           </span>
-                          <span className="text-xs text-zinc-400">
+                          <span className="text-xs text-[var(--muted)]">
                             {new Date(alert.projectedDate).toLocaleDateString()}
                           </span>
                         </div>
@@ -318,7 +318,7 @@ export default function CashFlowForecast() {
           {/* Charts */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {/* Cash Flow Projection Chart */}
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <h3 className="text-lg font-bold text-white mb-4">Cash Flow Projection</h3>
               <ResponsiveContainer width="100%" height={300}>
                 <AreaChart data={balanceProjectionData}>
@@ -333,7 +333,7 @@ export default function CashFlowForecast() {
                   <YAxis stroke="#9ca3af" fontSize={12} />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: '#18181b',
+                      backgroundColor: 'var(--surface)',
                       border: '1px solid #27272a',
                       borderRadius: '8px',
                     }}
@@ -350,7 +350,7 @@ export default function CashFlowForecast() {
             </div>
 
             {/* Historical vs Projected Chart */}
-            <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+            <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
               <h3 className="text-lg font-bold text-white mb-4">Historical vs Projected</h3>
               <ResponsiveContainer width="100%" height={300}>
                 <BarChart data={chartData}>
@@ -359,7 +359,7 @@ export default function CashFlowForecast() {
                   <YAxis stroke="#9ca3af" fontSize={12} />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: '#18181b',
+                      backgroundColor: 'var(--surface)',
                       border: '1px solid #27272a',
                       borderRadius: '8px',
                     }}
@@ -373,11 +373,11 @@ export default function CashFlowForecast() {
           </div>
 
           {/* Historical Averages */}
-          <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-6">
+          <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-6">
             <h3 className="text-lg font-bold text-white mb-4">Historical Averages</h3>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
-                <p className="text-sm text-zinc-400 mb-1">Weekly Average</p>
+              <div className="p-4 bg-zinc-900/50 rounded-lg border border-[var(--border-hi)]">
+                <p className="text-sm text-[var(--muted)] mb-1">Weekly Average</p>
                 <p className="text-2xl font-bold text-white">
                   {forecast.historicalAverage.weekly.toLocaleString('en-US', {
                     minimumFractionDigits: 2,
@@ -385,8 +385,8 @@ export default function CashFlowForecast() {
                   })}
                 </p>
               </div>
-              <div className="p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
-                <p className="text-sm text-zinc-400 mb-1">Biweekly Average</p>
+              <div className="p-4 bg-zinc-900/50 rounded-lg border border-[var(--border-hi)]">
+                <p className="text-sm text-[var(--muted)] mb-1">Biweekly Average</p>
                 <p className="text-2xl font-bold text-white">
                   {forecast.historicalAverage.biweekly.toLocaleString('en-US', {
                     minimumFractionDigits: 2,
@@ -394,8 +394,8 @@ export default function CashFlowForecast() {
                   })}
                 </p>
               </div>
-              <div className="p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
-                <p className="text-sm text-zinc-400 mb-1">Monthly Average</p>
+              <div className="p-4 bg-zinc-900/50 rounded-lg border border-[var(--border-hi)]">
+                <p className="text-sm text-[var(--muted)] mb-1">Monthly Average</p>
                 <p className="text-2xl font-bold text-white">
                   {forecast.historicalAverage.monthly.toLocaleString('en-US', {
                     minimumFractionDigits: 2,
@@ -407,8 +407,8 @@ export default function CashFlowForecast() {
           </div>
         </>
       ) : (
-        <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-xl p-12 text-center">
-          <p className="text-zinc-400">
+        <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-xl p-12 text-center">
+          <p className="text-[var(--muted)]">
             Enter distribution account and asset issuer to load forecast
           </p>
         </div>
diff --git a/frontend/src/pages/CrossAssetPayment.tsx b/frontend/src/pages/CrossAssetPayment.tsx
index 67a47233..1f30c5f7 100644
--- a/frontend/src/pages/CrossAssetPayment.tsx
+++ b/frontend/src/pages/CrossAssetPayment.tsx
@@ -173,14 +173,14 @@ export default function CrossAssetPayment() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0c] text-white p-8 font-sans">
+    <div className="min-h-screen bg-[var(--bg)] text-white p-8 font-sans">
       <div className="max-w-4xl mx-auto">
         <header className="mb-12 flex items-end justify-between gap-4">
           <div>
             <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
               Cross-Asset Payment Settlement
             </h1>
-            <p className="text-zinc-400 mt-2">
+            <p className="text-[var(--muted)] mt-2">
               Live pathfinding, Soroban simulation, and wallet-signed contract submission.
             </p>
           </div>
@@ -195,24 +195,24 @@ export default function CrossAssetPayment() {
               Connect Wallet
             </button>
           ) : (
-            <span className="text-xs text-zinc-400 font-mono">
+            <span className="text-xs text-[var(--muted)] font-mono">
               {address.slice(0, 6)}...{address.slice(-4)}
             </span>
           )}
         </header>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-8 shadow-2xl backdrop-blur-xl">
+          <div className="bg-[var(--surface)] border border-[var(--border-hi)] rounded-2xl p-8 shadow-2xl backdrop-blur-xl">
             <div className="space-y-6">
               <div className="flex items-center gap-4">
                 <div className="flex-1">
-                  <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">
+                  <label className="block text-xs font-semibold text-[var(--muted)] uppercase tracking-wider mb-2">
                     Send Asset
                   </label>
                   <select
                     value={assetIn}
                     onChange={(e) => setAssetIn(e.target.value)}
-                    className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-xl px-4 py-3 outline-none"
+                    className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-xl px-4 py-3 outline-none"
                   >
                     <option>USDC</option>
                     <option>XLM</option>
@@ -222,13 +222,13 @@ export default function CrossAssetPayment() {
                   <ArrowRightLeft className="text-zinc-600 h-6 w-6" />
                 </div>
                 <div className="flex-1">
-                  <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">
+                  <label className="block text-xs font-semibold text-[var(--muted)] uppercase tracking-wider mb-2">
                     Receive Asset
                   </label>
                   <select
                     value={assetOut}
                     onChange={(e) => setAssetOut(e.target.value)}
-                    className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-xl px-4 py-3 outline-none"
+                    className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-xl px-4 py-3 outline-none"
                   >
                     <option>XLM</option>
                     <option>USDC</option>
@@ -241,7 +241,7 @@ export default function CrossAssetPayment() {
               </div>
 
               <div>
-                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">
+                <label className="block text-xs font-semibold text-[var(--muted)] uppercase tracking-wider mb-2">
                   Amount to Send
                 </label>
                 <div className="relative">
@@ -250,16 +250,16 @@ export default function CrossAssetPayment() {
                     value={amount}
                     onChange={(e) => setAmount(e.target.value)}
                     placeholder="0.00"
-                    className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-xl px-4 py-3 text-2xl font-bold focus:ring-2 focus:ring-blue-500 outline-none"
+                    className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-xl px-4 py-3 text-2xl font-bold focus:ring-2 focus:ring-blue-500 outline-none"
                   />
-                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 font-bold">
+                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--muted)] font-bold">
                     {assetIn}
                   </span>
                 </div>
               </div>
 
               <div>
-                <label className="block text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">
+                <label className="block text-xs font-semibold text-[var(--muted)] uppercase tracking-wider mb-2">
                   Receiver Address
                 </label>
                 <input
@@ -267,7 +267,7 @@ export default function CrossAssetPayment() {
                   value={receiver}
                   onChange={(e) => setReceiver(e.target.value)}
                   placeholder="G... recipient wallet"
-                  className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-xl px-4 py-3 outline-none"
+                  className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-xl px-4 py-3 outline-none"
                 />
               </div>
 
@@ -294,13 +294,13 @@ export default function CrossAssetPayment() {
           <div className="space-y-8">
             {/* Quote Panel */}
             {(isLoadingPaths || paths.length > 0) && (
-              <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-2xl p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <div className="bg-gradient-to-br from-zinc-900 to-black border border-[var(--border-hi)] rounded-2xl p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
                 <h3 className="text-lg font-bold flex items-center gap-2 mb-6">
                   <ShieldCheck className="text-emerald-400" />
                   Available Conversion Paths
                 </h3>
                 {isLoadingPaths ? (
-                  <div className="flex items-center gap-2 text-sm text-zinc-400">
+                  <div className="flex items-center gap-2 text-sm text-[var(--muted)]">
                     <Loader2 className="h-4 w-4 animate-spin" />
                     Fetching conversion paths...
                   </div>
@@ -311,16 +311,16 @@ export default function CrossAssetPayment() {
                         key={path.id}
                         type="button"
                         onClick={() => setSelectedPathId(path.id)}
-                        className={`w-full text-left rounded-xl border px-4 py-3 transition ${selectedPathId === path.id ? 'border-emerald-500/60 bg-emerald-500/10' : 'border-zinc-800 hover:border-zinc-700'}`}
+                        className={`w-full text-left rounded-xl border px-4 py-3 transition ${selectedPathId === path.id ? 'border-emerald-500/60 bg-emerald-500/10' : 'border-[var(--border-hi)] hover:border-zinc-700'}`}
                       >
                         <div className="flex items-center justify-between">
                           <span className="text-sm font-semibold flex items-center gap-2">
                             <Radio className="h-4 w-4" />
                             {path.hops.join(' -> ')}
                           </span>
-                          <span className="text-xs text-zinc-400">{path.rate.toFixed(4)} rate</span>
+                          <span className="text-xs text-[var(--muted)]">{path.rate.toFixed(4)} rate</span>
                         </div>
-                        <div className="mt-2 text-xs text-zinc-400">
+                        <div className="mt-2 text-xs text-[var(--muted)]">
                           Fee: {path.fee.toFixed(4)} {assetOut} | Slippage:{' '}
                           {path.slippage.toFixed(2)}%
                         </div>
@@ -332,22 +332,22 @@ export default function CrossAssetPayment() {
             )}
 
             {selectedPath && (
-              <div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-6">
+              <div className="bg-[var(--surface)] border border-[var(--border-hi)] rounded-2xl p-6">
                 <h4 className="font-bold mb-3">Settlement Preview</h4>
                 <div className="space-y-2 text-sm">
-                  <div className="flex justify-between text-zinc-400">
+                  <div className="flex justify-between text-[var(--muted)]">
                     <span>Expected Delivery</span>
                     <span className="text-white font-mono">
                       {selectedPath.estimatedDestinationAmount.toLocaleString()} {assetOut}
                     </span>
                   </div>
-                  <div className="flex justify-between text-zinc-400">
+                  <div className="flex justify-between text-[var(--muted)]">
                     <span>Fee</span>
                     <span className="text-white">
                       {selectedPath.fee.toFixed(4)} {assetOut}
                     </span>
                   </div>
-                  <div className="flex justify-between text-zinc-400">
+                  <div className="flex justify-between text-[var(--muted)]">
                     <span>Slippage</span>
                     <span className="text-white">{selectedPath.slippage.toFixed(2)}%</span>
                   </div>
@@ -356,7 +356,7 @@ export default function CrossAssetPayment() {
             )}
 
             {status !== 'idle' && (
-              <div className="bg-[#16161a] border border-blue-900/30 rounded-2xl p-8 shadow-xl relative overflow-hidden">
+              <div className="bg-[var(--surface)] border border-blue-900/30 rounded-2xl p-8 shadow-xl relative overflow-hidden">
                 <div className="absolute top-0 right-0 p-4">
                   <div
                     className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest ${status === 'completed' || status === 'confirmed' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-blue-500/20 text-blue-400'}`}
@@ -375,7 +375,7 @@ export default function CrossAssetPayment() {
                     </div>
                     <div>
                       <p className="font-bold">Authentication</p>
-                      <p className="text-xs text-zinc-500">Wallet connected and signer ready</p>
+                      <p className="text-xs text-[var(--muted)]">Wallet connected and signer ready</p>
                     </div>
                   </div>
 
@@ -391,7 +391,7 @@ export default function CrossAssetPayment() {
                     </div>
                     <div>
                       <p className="font-bold">Initiation</p>
-                      <p className="text-xs text-zinc-500">Contract call simulated and submitted</p>
+                      <p className="text-xs text-[var(--muted)]">Contract call simulated and submitted</p>
                     </div>
                   </div>
 
@@ -403,14 +403,14 @@ export default function CrossAssetPayment() {
                     </div>
                     <div>
                       <p className="font-bold">Settlement</p>
-                      <p className="text-xs text-zinc-500">{liveStatusMessage}</p>
+                      <p className="text-xs text-[var(--muted)]">{liveStatusMessage}</p>
                     </div>
                   </div>
                 </div>
 
                 {submissionTxHash && (
-                  <div className="mt-8 pt-6 border-t border-zinc-800">
-                    <p className="text-xs text-zinc-500 uppercase font-bold mb-2">
+                  <div className="mt-8 pt-6 border-t border-[var(--border-hi)]">
+                    <p className="text-xs text-[var(--muted)] uppercase font-bold mb-2">
                       Transaction Hash
                     </p>
                     <p className="text-xs font-mono break-all text-blue-400">{submissionTxHash}</p>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 5dec16bf..f6566a8d 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -43,7 +43,7 @@ const Login: React.FC = () => {
 
           <button
             onClick={() => handleLogin('github')}
-            className="flex items-center justify-center gap-3 w-full py-3 px-4 bg-[#24292e] text-white font-bold rounded-xl hover:scale-[1.02] transition-all border border-white/5"
+            className="flex items-center justify-center gap-3 w-full py-3 px-4 bg-[var(--surface-hi)] text-white font-bold rounded-xl hover:scale-[1.02] transition-all border border-[var(--border)]"
           >
             <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
               <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.041-1.416-4.041-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
@@ -52,7 +52,7 @@ const Login: React.FC = () => {
           </button>
         </div>
 
-        <div className="mt-8 pt-8 border-t border-white/5">
+        <div className="mt-8 pt-8 border-t border-[var(--border)]">
           <p className="text-[10px] text-muted tracking-widest uppercase font-mono">
             Secure · Encrypted · Non-Custodial
           </p>
diff --git a/frontend/src/pages/RevenueSplitDashboard.tsx b/frontend/src/pages/RevenueSplitDashboard.tsx
index 0ad56537..cac7fe84 100644
--- a/frontend/src/pages/RevenueSplitDashboard.tsx
+++ b/frontend/src/pages/RevenueSplitDashboard.tsx
@@ -190,12 +190,12 @@ export default function RevenueSplitDashboard() {
 
   return (
     <div className="flex-1 flex flex-col p-4 md:p-6 lg:p-12 max-w-7xl mx-auto w-full">
-      <div className="mb-6 md:mb-8 flex flex-wrap items-end justify-between gap-4 border-b border-zinc-800 pb-4 md:pb-6">
+      <div className="mb-6 md:mb-8 flex flex-wrap items-end justify-between gap-4 border-b border-[var(--border-hi)] pb-4 md:pb-6">
         <div>
           <h1 className="text-2xl md:text-3xl lg:text-4xl font-black tracking-tight">
             Revenue Split <span className="text-accent">Dashboard</span>
           </h1>
-          <p className="text-zinc-500 font-mono text-xs md:text-sm tracking-wider uppercase mt-2">
+          <p className="text-[var(--muted)] font-mono text-xs md:text-sm tracking-wider uppercase mt-2">
             Contract-backed allocations and distribution history
           </p>
         </div>
@@ -211,14 +211,14 @@ export default function RevenueSplitDashboard() {
             Connect Wallet
           </button>
         ) : (
-          <span className="text-xs text-zinc-400 font-mono">
+          <span className="text-xs text-[var(--muted)] font-mono">
             Connected: {address.slice(0, 6)}...{address.slice(-4)}
           </span>
         )}
       </div>
 
       {isLoading ? (
-        <p className="text-sm text-zinc-400 mb-6">Loading revenue split dashboard...</p>
+        <p className="text-sm text-[var(--muted)] mb-6">Loading revenue split dashboard...</p>
       ) : null}
       {error ? <p className="text-sm text-red-400 mb-6">{error}</p> : null}
 
@@ -232,11 +232,11 @@ export default function RevenueSplitDashboard() {
             />
             <div className="space-y-2 w-full md:w-auto">
               {allocations.length === 0 ? (
-                <p className="text-sm text-zinc-400">No allocation data loaded.</p>
+                <p className="text-sm text-[var(--muted)]">No allocation data loaded.</p>
               ) : (
                 allocations.map((entry, idx) => (
                   // eslint-disable-next-line react-x/no-array-index-key
-                  <p key={`${entry.recipient}-${idx}`} className="text-xs text-zinc-300">
+                  <p key={`${entry.recipient}-${idx}`} className="text-xs text-[var(--text)]">
                     {entry.recipient.slice(0, 6)}...{entry.recipient.slice(-4)} -{' '}
                     <span className="font-bold text-white">{entry.percentage.toFixed(2)}%</span>
                   </p>
@@ -276,7 +276,7 @@ export default function RevenueSplitDashboard() {
                   value={entry.recipient}
                   onChange={(event) => setAllocationField(idx, 'recipient', event.target.value)}
                   placeholder="Recipient Stellar Address"
-                  className="md:col-span-8 bg-[#0a0a0c] border border-zinc-800 rounded-lg px-3 py-2 text-xs"
+                  className="md:col-span-8 bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg px-3 py-2 text-xs"
                   style={{ minHeight: '44px' }}
                 />
                 <input
@@ -287,7 +287,7 @@ export default function RevenueSplitDashboard() {
                   max={100}
                   step={0.01}
                   placeholder="%"
-                  className="md:col-span-3 bg-[#0a0a0c] border border-zinc-800 rounded-lg px-3 py-2 text-xs"
+                  className="md:col-span-3 bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg px-3 py-2 text-xs"
                   style={{ minHeight: '44px' }}
                 />
                 <button
@@ -303,7 +303,7 @@ export default function RevenueSplitDashboard() {
           </div>
 
           <div className="mt-5 flex items-center justify-between">
-            <p className="text-xs text-zinc-400">Total allocation must be exactly 100%.</p>
+            <p className="text-xs text-[var(--muted)]">Total allocation must be exactly 100%.</p>
             <button
               type="button"
               onClick={() => {
@@ -323,15 +323,15 @@ export default function RevenueSplitDashboard() {
         <section className="card glass noise lg:col-span-1">
           <h2 className="text-base md:text-lg font-bold mb-4">Live Recipient Balances</h2>
           {recipientBalances.length === 0 ? (
-            <p className="text-sm text-zinc-400">No recipient distributions available yet.</p>
+            <p className="text-sm text-[var(--muted)]">No recipient distributions available yet.</p>
           ) : (
             <div className="space-y-2">
               {recipientBalances.map((row) => (
                 <div
                   key={row.recipient}
-                  className="flex items-center justify-between border-b border-zinc-800 pb-2"
+                  className="flex items-center justify-between border-b border-[var(--border-hi)] pb-2"
                 >
-                  <span className="text-xs text-zinc-300 truncate max-w-[120px] md:max-w-[180px]">
+                  <span className="text-xs text-[var(--text)] truncate max-w-[120px] md:max-w-[180px]">
                     {row.recipient}
                   </span>
                   <span className="text-xs font-bold text-white">
@@ -350,13 +350,13 @@ export default function RevenueSplitDashboard() {
         <section className="card glass noise lg:col-span-2">
           <h2 className="text-base md:text-lg font-bold mb-4">Historical Distribution Events</h2>
           {events.length === 0 ? (
-            <p className="text-sm text-zinc-400">No backend indexed distribution events found.</p>
+            <p className="text-sm text-[var(--muted)]">No backend indexed distribution events found.</p>
           ) : (
             <>
               {/* Desktop Table View */}
               <div className="hidden md:block overflow-x-auto">
                 <table className="w-full text-sm">
-                  <thead className="text-left text-zinc-500 border-b border-zinc-800">
+                  <thead className="text-left text-[var(--muted)] border-b border-[var(--border-hi)]">
                     <tr>
                       <th className="py-2 pr-4">Date</th>
                       <th className="py-2 pr-4">Recipient</th>
@@ -367,7 +367,7 @@ export default function RevenueSplitDashboard() {
                   </thead>
                   <tbody>
                     {events.map((event) => (
-                      <tr key={event.id} className="border-b border-zinc-800/50">
+                      <tr key={event.id} className="border-b border-[var(--border-hi)]/50">
                         <td className="py-2 pr-4 text-xs">
                           {new Date(event.createdAt).toLocaleString()}
                         </td>
@@ -387,7 +387,7 @@ export default function RevenueSplitDashboard() {
                               {event.txHash.slice(0, 10)}...
                             </a>
                           ) : (
-                            <span className="text-zinc-500">N/A</span>
+                            <span className="text-[var(--muted)]">N/A</span>
                           )}
                         </td>
                       </tr>
@@ -401,7 +401,7 @@ export default function RevenueSplitDashboard() {
                 {events.map((event) => (
                   <div key={event.id} className="bg-white/5 rounded-lg p-3 border border-white/10">
                     <div className="flex justify-between items-start mb-2">
-                      <span className="text-xs text-zinc-400">
+                      <span className="text-xs text-[var(--muted)]">
                         {new Date(event.createdAt).toLocaleDateString()}
                       </span>
                       <span className="text-xs font-semibold text-white px-2 py-1 bg-zinc-800 rounded">
@@ -410,13 +410,13 @@ export default function RevenueSplitDashboard() {
                     </div>
                     <div className="space-y-1 text-xs">
                       <div className="flex justify-between">
-                        <span className="text-zinc-400">Recipient:</span>
-                        <span className="text-zinc-300 truncate max-w-[150px]">
+                        <span className="text-[var(--muted)]">Recipient:</span>
+                        <span className="text-[var(--text)] truncate max-w-[150px]">
                           {event.recipientLabel}
                         </span>
                       </div>
                       <div className="flex justify-between">
-                        <span className="text-zinc-400">Amount:</span>
+                        <span className="text-[var(--muted)]">Amount:</span>
                         <span className="text-white font-semibold">
                           {formatAmount(event.amount, event.assetCode || preferredStablecoin)}
                         </span>
diff --git a/frontend/src/pages/TransactionHistory.tsx b/frontend/src/pages/TransactionHistory.tsx
index 8994eec2..b42fdb38 100644
--- a/frontend/src/pages/TransactionHistory.tsx
+++ b/frontend/src/pages/TransactionHistory.tsx
@@ -32,7 +32,7 @@ function TimelineSkeleton() {
       {[0, 1, 2, 3, 4, 5].map((val) => (
         <div
           key={`skeleton-${val}`}
-          className="animate-pulse rounded-xl border border-zinc-800 p-4"
+          className="animate-pulse rounded-xl border border-[var(--border-hi)] p-4"
         >
           <div className="h-3 w-40 bg-zinc-800 rounded mb-2" />
           <div className="h-3 w-64 bg-zinc-800 rounded mb-2" />
@@ -115,12 +115,12 @@ export default function TransactionHistory() {
 
   return (
     <div className="flex-1 flex flex-col p-4 sm:p-6 lg:p-12 max-w-7xl mx-auto w-full">
-      <div className="mb-6 sm:mb-8 flex flex-col md:flex-row md:items-end justify-between border-b border-zinc-800 pb-4 sm:pb-6 gap-4">
+      <div className="mb-6 sm:mb-8 flex flex-col md:flex-row md:items-end justify-between border-b border-[var(--border-hi)] pb-4 sm:pb-6 gap-4">
         <div className="flex-1 min-w-0">
           <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">
             Transaction <span className="text-accent">History</span>
           </h1>
-          <p className="text-zinc-500 font-mono text-xs sm:text-sm tracking-wider uppercase">
+          <p className="text-[var(--muted)] font-mono text-xs sm:text-sm tracking-wider uppercase">
             Unified classic + contract event timeline
           </p>
         </div>
@@ -134,24 +134,24 @@ export default function TransactionHistory() {
       </div>
 
       {showFilters && (
-        <div className="bg-[#16161a] border border-zinc-800 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6">
+        <div className="bg-[var(--surface)] border border-[var(--border-hi)] rounded-xl p-4 sm:p-6 mb-4 sm:mb-6">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 w-4 h-4" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted)] w-4 h-4" />
               <input
                 value={filters.search}
                 onChange={(event) =>
                   setFilters((prev) => ({ ...prev, search: event.target.value }))
                 }
                 placeholder="Search tx hash / actor"
-                className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-lg py-2.5 pl-10 pr-4 text-sm"
+                className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg py-2.5 pl-10 pr-4 text-sm"
               />
             </div>
 
             <select
               value={filters.status}
               onChange={(event) => setFilters((prev) => ({ ...prev, status: event.target.value }))}
-              className="bg-[#0a0a0c] border border-zinc-800 rounded-lg px-3 py-2.5 text-sm"
+              className="bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg px-3 py-2.5 text-sm"
             >
               <option value="">All Statuses</option>
               <option value="confirmed">Confirmed</option>
@@ -165,49 +165,49 @@ export default function TransactionHistory() {
                 setFilters((prev) => ({ ...prev, employee: event.target.value }))
               }
               placeholder="Employee"
-              className="bg-[#0a0a0c] border border-zinc-800 rounded-lg px-3 py-2.5 text-sm"
+              className="bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg px-3 py-2.5 text-sm"
             />
 
             <input
               value={filters.asset}
               onChange={(event) => setFilters((prev) => ({ ...prev, asset: event.target.value }))}
               placeholder="Asset (USDC, XLM...)"
-              className="bg-[#0a0a0c] border border-zinc-800 rounded-lg px-3 py-2.5 text-sm"
+              className="bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg px-3 py-2.5 text-sm"
             />
 
             <div className="relative">
-              <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 w-4 h-4" />
+              <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted)] w-4 h-4" />
               <input
                 type="date"
                 value={filters.startDate}
                 onChange={(event) =>
                   setFilters((prev) => ({ ...prev, startDate: event.target.value }))
                 }
-                className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-lg py-2.5 pl-10 pr-4 text-sm"
+                className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg py-2.5 pl-10 pr-4 text-sm"
               />
             </div>
 
             <div className="relative">
-              <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 w-4 h-4" />
+              <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted)] w-4 h-4" />
               <input
                 type="date"
                 value={filters.endDate}
                 onChange={(event) =>
                   setFilters((prev) => ({ ...prev, endDate: event.target.value }))
                 }
-                className="w-full bg-[#0a0a0c] border border-zinc-800 rounded-lg py-2.5 pl-10 pr-4 text-sm"
+                className="w-full bg-[var(--bg)] border border-[var(--border-hi)] rounded-lg py-2.5 pl-10 pr-4 text-sm"
               />
             </div>
           </div>
         </div>
       )}
 
-      <div className="bg-[#16161a] border border-zinc-800 rounded-xl p-3 sm:p-5 flex-1">
+      <div className="bg-[var(--surface)] border border-[var(--border-hi)] rounded-xl p-3 sm:p-5 flex-1">
         {error ? <p className="text-xs sm:text-sm text-red-400 mb-4 p-2">{error}</p> : null}
         {isLoading ? <TimelineSkeleton /> : null}
 
         {!isLoading && items.length === 0 ? (
-          <div className="text-zinc-500 text-center py-12 sm:py-16">
+          <div className="text-[var(--muted)] text-center py-12 sm:py-16">
             <Activity className="w-6 h-6 sm:w-8 sm:h-8 opacity-30 mx-auto mb-3" />
             <p className="text-xs sm:text-sm">No records found for current filters.</p>
           </div>
@@ -218,10 +218,10 @@ export default function TransactionHistory() {
             {items.map((item) => (
               <div
                 key={item.id}
-                className="rounded-xl border border-zinc-800 p-3 sm:p-4 hover:bg-zinc-900/40 transition-colors"
+                className="rounded-xl border border-[var(--border-hi)] p-3 sm:p-4 hover:bg-zinc-900/40 transition-colors"
               >
                 <div className="flex flex-wrap items-center gap-2 mb-2">
-                  <span className="px-2 py-0.5 rounded-md text-[10px] sm:text-[11px] border border-zinc-700 text-zinc-300">
+                  <span className="px-2 py-0.5 rounded-md text-[10px] sm:text-[11px] border border-zinc-700 text-[var(--text)]">
                     {item.badge}
                   </span>
                   <span
@@ -229,13 +229,13 @@ export default function TransactionHistory() {
                   >
                     {item.status}
                   </span>
-                  <span className="text-[10px] sm:text-xs text-zinc-500">
+                  <span className="text-[10px] sm:text-xs text-[var(--muted)]">
                     {new Date(item.createdAt).toLocaleString()}
                   </span>
                 </div>
                 <p className="text-xs sm:text-sm font-semibold mb-1">{item.label}</p>
-                <p className="text-[10px] sm:text-xs text-zinc-400">Actor: {item.actor}</p>
-                <p className="text-[10px] sm:text-xs text-zinc-400">
+                <p className="text-[10px] sm:text-xs text-[var(--muted)]">Actor: {item.actor}</p>
+                <p className="text-[10px] sm:text-xs text-[var(--muted)]">
                   Amount: {item.amount} {item.asset}
                 </p>
                 {item.txHash ? (
diff --git a/frontend/src/providers/ThemeProvider.tsx b/frontend/src/providers/ThemeProvider.tsx
index 925251cd..9ffb268a 100644
--- a/frontend/src/providers/ThemeProvider.tsx
+++ b/frontend/src/providers/ThemeProvider.tsx
@@ -1,25 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { ThemeContext, Theme } from '../hooks/useTheme';
-
-const STORAGE_KEY = 'payd-theme';
-
-function getInitialTheme(): Theme {
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === 'light' || stored === 'dark') return stored;
-  return 'dark';
-}
+import React, { useEffect } from 'react';
+import { useThemeStore } from '../stores/themeStore';
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+  const theme = useThemeStore((s) => s.theme);
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem(STORAGE_KEY, theme);
   }, [theme]);
 
-  const toggleTheme = useCallback(() => {
-    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
-  }, []);
-
-  return <ThemeContext value={{ theme, toggleTheme }}>{children}</ThemeContext>;
-};
+  return <>{children}</>;
+};
\ No newline at end of file
diff --git a/frontend/src/stores/themeStore.ts b/frontend/src/stores/themeStore.ts
new file mode 100644
index 00000000..4f4f9d2c
--- /dev/null
+++ b/frontend/src/stores/themeStore.ts
@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Theme } from '../hooks/useTheme';
+
+const STORAGE_KEY = 'payd-theme';
+
+function getInitialTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark') return stored;
+  } catch {
+    /* localStorage unavailable — fall through to default */
+  }
+  return 'dark';
+}
+
+export interface ThemeStoreState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+export const useThemeStore = create<ThemeStoreState>()(
+  persist(
+    (set) => ({
+      theme: getInitialTheme(),
+      setTheme: (theme) => set({ theme }),
+      toggleTheme: () => set((state) => ({ theme: state.theme === 'dark' ? 'light' : 'dark' })),
+    }),
+    {
+      name: STORAGE_KEY,
+      partialize: (state) => ({ theme: state.theme }),
+    },
+  ),
+);
\ No newline at end of file