diff --git a/client/components/ui/badge.tsx b/client/components/ui/badge.tsx
index 3044f18..4cb99df 100644
--- a/client/components/ui/badge.tsx
+++ b/client/components/ui/badge.tsx
@@ -12,12 +12,12 @@ const badgeVariants = cva(
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline:     'text-foreground',
         // Bill status variants
-        paid:      'bg-emerald-500/20 text-emerald-300 border-emerald-400/35',
-        late:      'bg-orange-500/30 text-orange-100 border-orange-300/60 shadow-sm shadow-orange-950/10',
-        missed:    'bg-rose-500/30 text-rose-100 border-rose-300/60 shadow-sm shadow-rose-950/10',
-        due_soon:  'bg-yellow-500/20 text-yellow-200 border-yellow-400/35',
-        upcoming:  'bg-slate-400/20 text-slate-200 border-slate-300/30',
-        autodraft: 'bg-amber-500/20 text-amber-200 border-amber-400/35',
+        paid:      'bg-emerald-500/15 text-emerald-700 border-emerald-500/35 dark:text-emerald-200 dark:border-emerald-300/35',
+        late:      'bg-orange-500/15 text-orange-700 border-orange-500/45 shadow-sm shadow-orange-950/10 dark:text-orange-100 dark:border-orange-300/55',
+        missed:    'bg-rose-500/15 text-rose-700 border-rose-500/45 shadow-sm shadow-rose-950/10 dark:text-rose-100 dark:border-rose-300/55',
+        due_soon:  'bg-amber-500/15 text-amber-700 border-amber-500/40 dark:text-amber-100 dark:border-amber-300/40',
+        upcoming:  'bg-slate-500/10 text-slate-700 border-slate-400/35 dark:text-slate-200 dark:border-slate-300/30',
+        autodraft: 'bg-teal-500/15 text-teal-700 border-teal-500/35 dark:text-teal-100 dark:border-teal-300/35',
       },
     },
     defaultVariants: {
diff --git a/client/components/ui/button.tsx b/client/components/ui/button.tsx
index f26e111..d40bfac 100644
--- a/client/components/ui/button.tsx
+++ b/client/components/ui/button.tsx
@@ -8,11 +8,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:     'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md active:scale-[0.99]',
+        default:     'bg-primary text-primary-foreground shadow-sm shadow-primary/15 hover:bg-primary/90 hover:shadow-md active:scale-[0.99]',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md active:scale-[0.99]',
-        outline:     'border border-input bg-card/80 shadow-sm hover:bg-accent hover:text-accent-foreground hover:shadow',
+        outline:     'border border-input bg-card/80 shadow-sm shadow-black/5 hover:bg-accent/90 hover:text-accent-foreground hover:shadow',
         secondary:   'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 hover:shadow-md',
-        ghost:       'hover:bg-accent hover:text-accent-foreground active:bg-accent/80',
+        ghost:       'hover:bg-accent/90 hover:text-accent-foreground active:bg-accent/80',
         link:        'text-primary underline-offset-4 hover:underline',
       },
       size: {
diff --git a/client/components/ui/card.tsx b/client/components/ui/card.tsx
index bcaad43..45e125f 100644
--- a/client/components/ui/card.tsx
+++ b/client/components/ui/card.tsx
@@ -5,7 +5,7 @@ function Card({ className, ref, ...props }: ComponentProps<'div'>) {
   return (
     <div
       ref={ref}
-      className={cn('rounded-2xl border border-border/80 bg-card/95 text-card-foreground shadow-sm shadow-black/10 transition-shadow hover:shadow-md hover:shadow-black/10', className)}
+      className={cn('rounded-xl border border-border/75 bg-card/95 text-card-foreground shadow-sm shadow-black/10 backdrop-blur-sm transition-shadow hover:shadow-md hover:shadow-black/10', className)}
       {...props}
     />
   );