diff --git a/client/components/MobileTrackerRow.jsx b/client/components/MobileTrackerRow.jsx
index b81d222..45c763a 100644
--- a/client/components/MobileTrackerRow.jsx
+++ b/client/components/MobileTrackerRow.jsx
@@ -13,12 +13,12 @@ const MONTHS = [
 ];
 
 const ROW_STATUS_CLS = {
-  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
-  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.02]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.018]',
   upcoming:  '',
-  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
-  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
-  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.016]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.014]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.01]',
 };
 
 function paymentDateForTrackerMonth(year, month, dueDay) {
@@ -164,7 +164,7 @@ export const MobileTrackerRow = React.memo(function MobileTrackerRow({ row, year
     <>
       <div
         className={cn(
-          'rounded-lg border border-border/60 bg-background/60 p-3 shadow-sm',
+          'rounded-lg border border-border/70 bg-card/90 p-3 shadow-sm shadow-black/10',
           'space-y-3 transition-colors',
           isSkipped ? 'opacity-55' : rowBg,
         )}
diff --git a/client/components/SummaryCard.jsx b/client/components/SummaryCard.jsx
index 38428b8..f5af0a7 100644
--- a/client/components/SummaryCard.jsx
+++ b/client/components/SummaryCard.jsx
@@ -48,8 +48,8 @@ export const SummaryCard = React.memo(function SummaryCard({ type, value, onEdit
 
   return (
     <div className={cn(
-      'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border',
-      'bg-card px-5 py-4 transition-all duration-300',
+      'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80',
+      'bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
       isActive && def.glow,
       isActive && def.borderActive,
     )}>
diff --git a/client/components/layout/Layout.jsx b/client/components/layout/Layout.jsx
index 855e823..0440d55 100644
--- a/client/components/layout/Layout.jsx
+++ b/client/components/layout/Layout.jsx
@@ -3,7 +3,7 @@ import AppNavigation from './Sidebar';
 
 export default function Layout({ mainContentId }) {
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.08),transparent_32rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.14))] text-foreground"
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.06),transparent_30rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.12))] text-foreground"
       role="main"
       aria-labelledby={mainContentId}
     >
diff --git a/client/index.css b/client/index.css
index 312e16e..4334029 100644
--- a/client/index.css
+++ b/client/index.css
@@ -69,38 +69,38 @@
   }
 
   .dark {
-    --background: 0.18 0.016 245;
+    --background: 0.165 0.014 245;
     --foreground: 0.95 0.006 245;
-    --card: 0.245 0.016 245;
+    --card: 0.225 0.014 245;
     --card-foreground: 0.95 0.006 245;
-    --popover: 0.27 0.018 245;
+    --popover: 0.25 0.016 245;
     --popover-foreground: 0.95 0.006 245;
-    --primary: 0.67 0.18 150;
+    --primary: 0.69 0.18 150;
     --primary-foreground: 0.14 0.018 150;
-    --secondary: 0.29 0.018 245;
+    --secondary: 0.265 0.016 245;
     --secondary-foreground: 0.92 0.007 245;
-    --muted: 0.285 0.016 245;
-    --muted-foreground: 0.68 0.014 245;
-    --accent: 0.31 0.030 158;
+    --muted: 0.255 0.014 245;
+    --muted-foreground: 0.70 0.014 245;
+    --accent: 0.295 0.035 158;
     --accent-foreground: 0.95 0.006 245;
     --destructive: 0.66 0.18 26;
     --destructive-foreground: 0.98 0.004 245;
-    --border: 0.35 0.018 245;
+    --border: 0.36 0.018 245;
     --input: 0.36 0.018 245;
-    --ring: 0.67 0.16 150;
+    --ring: 0.69 0.16 150;
     --chart-1: 0.55 0.22 270;
     --chart-2: 0.62 0.14 150;
     --chart-3: 0.65 0.18 310;
     --chart-4: 0.62 0.16 130;
     --chart-5: 0.58 0.18 255;
-    --sidebar: 0.19 0.014 245;
+    --sidebar: 0.18 0.014 245;
     --sidebar-foreground: 0.93 0.006 245;
-    --sidebar-primary: 0.67 0.18 150;
+    --sidebar-primary: 0.69 0.18 150;
     --sidebar-primary-foreground: 0.14 0.018 150;
-    --sidebar-accent: 0.29 0.026 158;
+    --sidebar-accent: 0.275 0.030 158;
     --sidebar-accent-foreground: 0.93 0.006 245;
     --sidebar-border: 0.32 0.018 245;
-    --sidebar-ring: 0.67 0.16 150;
+    --sidebar-ring: 0.69 0.16 150;
   }
 
   * {
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index b12b138..384e990 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -49,12 +49,12 @@ function paymentDateForTrackerMonth(year, month, dueDay) {
 }
 
 const ROW_STATUS_CLS = {
-  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
-  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
+  paid:      'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.02]',
+  autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.018]',
   upcoming:  '',
-  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
-  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
-  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
+  due_soon:  'bg-amber-400/[0.07] dark:bg-amber-300/[0.016]',
+  late:      'bg-orange-400/[0.08] dark:bg-orange-300/[0.014]',
+  missed:    'bg-red-400/[0.08] dark:bg-rose-300/[0.01]',
 };
 
 const STATUS_META = {
@@ -199,8 +199,8 @@ function SummaryCard({ type, value, onEdit, hint, label }) {
 
   return (
     <div className={cn(
-      'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border',
-      'bg-card px-5 py-4 transition-all duration-300',
+      'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80',
+      'bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
       isActive && def.glow,
       isActive && def.borderActive,
     )}>
@@ -240,7 +240,7 @@ function TrendCard({ trend }) {
   if (!trend) return null;
   
   return (
-    <div className="flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border bg-card px-5 py-4 transition-all duration-300">
+    <div className="flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80 bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300">
       <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-purple-500 to-indigo-400" />
       <div className="flex items-center gap-2 mb-3">
         <TrendingUp className="h-4 w-4 text-foreground" />
@@ -1436,7 +1436,7 @@ function Row({ row, year, month, refresh, index, onEditBill }) {
     <>
       <TableRow
         className={cn(
-          'group border-border/50 transition-colors duration-150',
+          'group border-border/65 transition-colors duration-150',
           isSkipped ? 'opacity-40' : 'hover:bg-accent/50',
           rowBg,
         )}
@@ -2053,10 +2053,10 @@ function Bucket({ label, rows, year, month, refresh, onEditBill, loading }) {
   const allPaid        = pct >= 100;
 
   return (
-    <div className="rounded-xl border border-border overflow-hidden bg-card">
+    <div className="rounded-xl border border-border/80 overflow-hidden bg-card/95 shadow-sm shadow-black/15">
 
       {/* Bucket header */}
-      <div className="flex items-center justify-between px-5 py-3 bg-muted/30 border-b border-border">
+      <div className="flex items-center justify-between px-5 py-3 bg-muted/35 border-b border-border/80">
         <div className="flex items-center gap-3">
           <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
             {label}
@@ -2141,16 +2141,16 @@ function Bucket({ label, rows, year, month, refresh, onEditBill, loading }) {
         <div className="overflow-x-auto">
           <Table className="min-w-[1120px]">
           <TableHeader>
-            <TableRow className="border-border hover:bg-transparent">
-              <TableHead className="w-[18%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Bill</TableHead>
-              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Due</TableHead>
-              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right">Expected</TableHead>
-              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right text-muted-foreground/70">Last Month</TableHead>
-              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right">Paid</TableHead>
-              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Paid Date</TableHead>
-              <TableHead className="w-[9%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Status</TableHead>
+            <TableRow className="border-border/80 bg-background/30 hover:bg-background/30">
+              <TableHead className="w-[18%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Bill</TableHead>
+              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Due</TableHead>
+              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Expected</TableHead>
+              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 text-right">Last Month</TableHead>
+              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Paid</TableHead>
+              <TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Paid Date</TableHead>
+              <TableHead className="w-[9%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Status</TableHead>
               <TableHead className="w-[10%] py-2.5" />
-              <TableHead className="w-[23%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground border-l border-border pl-4">
+              <TableHead className="w-[23%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 border-l border-border/80 pl-4">
                 Notes
               </TableHead>
             </TableRow>
@@ -2378,7 +2378,7 @@ export default function TrackerPage() {
         </div>
       </div>
 
-      <div className="rounded-xl border border-border bg-card p-4 space-y-3">
+      <div className="rounded-xl border border-border/80 bg-card/95 p-4 shadow-sm shadow-black/15 space-y-3">
         <div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_220px_180px_auto] lg:items-center">
           <label className="relative">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />