Optimize performance, fix theme consistency, and improve notification UX

prisma.config.ts

@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"],
+  },
+});

src/app/globals.css

@@ -163,25 +163,33 @@
   --tracking-wide: calc(var(--tracking-normal) + 0.025em);
   --tracking-wider: calc(var(--tracking-normal) + 0.05em);
   --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+
+  /* Background gradients */
+  --bg-main: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 20%, #bbf7d0 40%, #dcfce7 60%, #f0fdf4 80%, #dcfce7 100%);
+  --bg-orbs:
+    radial-gradient(ellipse at 15% 10%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
+    radial-gradient(ellipse at 85% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 35%),
+    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
+    radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.05) 0%, transparent 35%);
 }
 
 @layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply text-foreground;
     font-family: var(--font-sans);
     letter-spacing: var(--tracking-normal);
-    background: linear-gradient(135deg,
+    background-color: transparent;
-      #0f0f1a 0%,
-      #1a1a2e 20%,
-      #16213e 40%,
-      #1a1a2e 60%,
-      #0f0f1a 80%,
-      #1a1a2e 100%);
-    background-attachment: fixed;
     min-height: 100vh;
+    overflow-x: hidden;
   }
 
   body::before {
@@ -191,14 +199,21 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background:
+    background: var(--bg-orbs), var(--bg-main);
+    background-size: cover;
+    pointer-events: none;
+    z-index: -50;
+  }
+
+  /* Dark mode overrides */
+  .dark {
+    --bg-main: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 20%, #16213e 40%, #1a1a2e 60%, #0f0f1a 80%, #1a1a2e 100%);
+    --bg-orbs:
       radial-gradient(ellipse at 15% 10%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
       radial-gradient(ellipse at 85% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 35%),
       radial-gradient(ellipse at 50% 50%, rgba(45, 55, 72, 0.1) 0%, transparent 50%),
       radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
       radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.08) 0%, transparent 35%);
-    pointer-events: none;
-    z-index: -1;
   }
 
   /* Calendar styling - reduce overall size */
@@ -217,8 +232,13 @@
 
 /* Animation keyframes */
 @keyframes fade-in {
-  from { opacity: 0; }
+  from {
-  to { opacity: 1; }
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fade-in-up {
@@ -226,6 +246,7 @@
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -237,6 +258,7 @@
     opacity: 0;
     transform: translateY(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -248,6 +270,7 @@
     opacity: 0;
     transform: scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -259,6 +282,7 @@
     opacity: 0;
     transform: translateX(20px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -270,6 +294,7 @@
     opacity: 0;
     transform: translateX(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -277,23 +302,49 @@
 }
 
 @keyframes pulse-subtle {
-  0%, 100% { opacity: 1; }
+
-  50% { opacity: 0.7; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
 }
 
 @keyframes float {
-  0%, 100% { transform: translateY(0); }
+
-  50% { transform: translateY(-5px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 @keyframes shimmer {
-  0% { background-position: -200% 0; }
+  0% {
-  100% { background-position: 200% 0; }
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 @keyframes glow {
-  0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
+
-  50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
+  }
+
+  50% {
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
+  }
 }
 
 @keyframes confetti {
@@ -301,6 +352,7 @@
     transform: translateY(0) rotate(0deg);
     opacity: 1;
   }
+
   100% {
     transform: translateY(100vh) rotate(720deg);
     opacity: 0;
@@ -349,15 +401,34 @@
 }
 
 /* Stagger delay utilities */
-.delay-100 { animation-delay: 100ms; }
+.delay-100 {
-.delay-200 { animation-delay: 200ms; }
+  animation-delay: 100ms;
-.delay-300 { animation-delay: 300ms; }
+}
-.delay-400 { animation-delay: 400ms; }
+
-.delay-500 { animation-delay: 500ms; }
+.delay-200 {
-.delay-600 { animation-delay: 600ms; }
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+.delay-400 {
+  animation-delay: 400ms;
+}
+
+.delay-500 {
+  animation-delay: 500ms;
+}
+
+.delay-600 {
+  animation-delay: 600ms;
+}
 
 /* Start hidden for animations */
-.opacity-0 { opacity: 0; }
+.opacity-0 {
+  opacity: 0;
+}
 
 /* Smooth transitions */
 .transition-smooth {
@@ -474,4 +545,4 @@
   opacity: 0.03;
   pointer-events: none;
   border-radius: inherit;
-}
+}

src/components/Dashboard.tsx

@@ -187,13 +187,11 @@ export function Dashboard({ user }: DashboardProps) {
     );
   }
 
-  const pageBackground = theme === 'dark'
+
-    ? 'linear-gradient(135deg, #0a0a14 0%, #141e3c 50%, #0f1932 100%)'
-    : 'linear-gradient(135deg, #ffffff 0%, #f0f4f8 50%, #e8ecf0 100%)';
 
   return (
-    <div className="min-h-screen" style={{ background: pageBackground }}>
+    <div className="min-h-screen">
-      <UserHeader user={user} />
+      <UserHeader user={user} preferences={preferences} />
 
       <main className="container mx-auto px-4 py-8">
         {preferences && (

src/components/HealthTimelineCard.tsx

@@ -85,7 +85,7 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
 
   const cardBackground =
     theme === 'light'
-      ? 'linear-gradient(135deg, rgba(6, 95, 70, 0.85) 0%, rgba(4, 120, 87, 0.9) 100%)'
+      ? 'linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.8) 100%)'
       : 'linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(6, 182, 212, 0.15) 100%)';
 
   const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
@@ -98,11 +98,11 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
       <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-teal-500/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />
 
       <CardHeader className="relative z-10 pb-2">
-        <CardTitle className="flex items-center gap-2 text-white text-shadow-sm">
+        <CardTitle className={`flex items-center gap-2 ${theme === 'light' ? 'text-teal-900' : 'text-white'} text-shadow-sm`}>
-          <Heart className="h-5 w-5 text-teal-400" />
+          <Heart className="h-5 w-5 text-teal-500" />
           <span>Health Recovery</span>
         </CardTitle>
-        <p className="text-sm text-white/70">
+        <p className={`text-sm ${theme === 'light' ? 'text-teal-700' : 'text-white/70'}`}>
           {substanceLabel}-free for {formatDuration(minutesSinceQuit)}
         </p>
       </CardHeader>
@@ -110,10 +110,10 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
       <CardContent className="relative z-10">
         {/* Progress to next milestone */}
         {nextMilestone && (
-          <div className="mb-4 p-3 bg-teal-500/20 rounded-xl border border-teal-500/30">
+          <div className="mb-4 p-3 bg-teal-500/10 rounded-xl border border-teal-500/20">
             <div className="flex items-center justify-between mb-2">
-              <span className="text-sm text-white/80">Next milestone</span>
+              <span className={`text-sm ${theme === 'light' ? 'text-teal-900' : 'text-white/80'}`}>Next milestone</span>
-              <span className="text-sm text-teal-300 font-medium">
+              <span className="text-sm text-teal-600 font-medium">
                 {formatTimeRemaining(minutesSinceQuit, nextMilestone.timeMinutes)}
               </span>
             </div>
@@ -123,7 +123,7 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
                 style={{ width: `${progressToNext}%` }}
               />
             </div>
-            <p className="text-xs text-white/60 mt-2">{nextMilestone.title}</p>
+            <p className={`text-xs ${theme === 'light' ? 'text-teal-700' : 'text-white/60'} mt-2`}>{nextMilestone.title}</p>
           </div>
         )}
 
@@ -137,19 +137,17 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
             return (
               <div
                 key={milestone.id}
-                className={`flex items-start gap-3 p-2 rounded-lg transition-all ${
+                className={`flex items-start gap-3 p-2 rounded-lg transition-all ${isAchieved
-                  isAchieved
+                  ? 'bg-teal-500/20'
-                    ? 'bg-teal-500/20'
+                  : 'bg-black/5 opacity-60 dark:bg-white/5'
-                    : 'bg-white/5 opacity-60'
+                  } ${isCurrent ? 'ring-2 ring-teal-500/50' : ''}`}
-                } ${isCurrent ? 'ring-2 ring-teal-400/50' : ''}`}
               >
                 {/* Icon */}
                 <div
-                  className={`p-2 rounded-full shrink-0 ${
+                  className={`p-2 rounded-full shrink-0 ${isAchieved
-                    isAchieved
+                    ? 'bg-teal-500/20 text-teal-600 dark:text-teal-300'
-                      ? 'bg-teal-500/30 text-teal-300'
+                    : 'bg-black/5 text-black/40 dark:bg-white/10 dark:text-white/40'
-                      : 'bg-white/10 text-white/40'
+                    }`}
-                  }`}
                 >
                   {isAchieved ? (
                     <CheckCircle2 className="h-4 w-4" />
@@ -161,9 +159,9 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
                 {/* Content */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <p
+                    <p className={`text-sm font-medium ${isAchieved
-                      className={`text-sm font-medium ${
+                      ? (theme === 'light' ? 'text-teal-900' : 'text-white')
-                        isAchieved ? 'text-white' : 'text-white/60'
+                      : (theme === 'light' ? 'text-teal-900/60' : 'text-white/60')
                       }`}
                     >
                       {milestone.title}
@@ -178,8 +176,8 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
                     {milestone.description}
                   </p>
                   <div className="flex items-center gap-1 mt-1">
-                    <Clock className="h-3 w-3 text-white/40" />
+                    <Clock className={`h-3 w-3 ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`} />
-                    <span className="text-[10px] text-white/40">
+                    <span className={`text-[10px] ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`}>
                       {formatDuration(milestone.timeMinutes)}
                     </span>
                   </div>
@@ -189,6 +187,6 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
           })}
         </div>
       </CardContent>
-    </Card>
+    </Card >
   );
 }

src/components/SavingsSetupDialog.tsx

@@ -79,7 +79,7 @@ export function SavingsSetupDialog({
       costPerUnit: cost,
       unitsPerDay: units,
       currency,
-      substance,
+      substance: substance as 'nicotine' | 'weed',
       savingsGoal: savingsGoal ? parseFloat(savingsGoal) : null,
       goalName: goalName.trim() || null,
     };
@@ -97,13 +97,13 @@ export function SavingsSetupDialog({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="sm:max-w-md bg-emerald-950 border-emerald-800 text-white">
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-white">
+          <DialogTitle className="flex items-center gap-2">
-            <DollarSign className="h-5 w-5 text-emerald-400" />
+            <DollarSign className="h-5 w-5 text-emerald-500" />
             {existingConfig ? 'Edit Savings Tracker' : 'Set Up Savings Tracker'}
           </DialogTitle>
-          <DialogDescription className="text-emerald-200">
+          <DialogDescription>
             Enter your usage costs to track how much you&apos;re saving
           </DialogDescription>
         </DialogHeader>
@@ -111,9 +111,9 @@ export function SavingsSetupDialog({
         <div className="space-y-4 py-4">
           {/* Substance Selection */}
           <div className="space-y-2">
-            <Label className="text-white">What are you tracking?</Label>
+            <Label>What are you tracking?</Label>
             <Select value={substance} onValueChange={(v) => setSubstance(v as 'nicotine' | 'weed')}>
-              <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
+              <SelectTrigger>
                 <SelectValue placeholder="Select substance" />
               </SelectTrigger>
               <SelectContent>
@@ -125,9 +125,9 @@ export function SavingsSetupDialog({
 
           {/* Currency Selection */}
           <div className="space-y-2">
-            <Label className="text-white">Currency</Label>
+            <Label>Currency</Label>
             <Select value={currency} onValueChange={setCurrency}>
-              <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
+              <SelectTrigger>
                 <SelectValue placeholder="Select currency" />
               </SelectTrigger>
               <SelectContent>
@@ -142,11 +142,11 @@ export function SavingsSetupDialog({
 
           {/* Cost Per Unit */}
           <div className="space-y-2">
-            <Label htmlFor="costPerUnit" className="text-white">
+            <Label htmlFor="costPerUnit">
               Cost per pack/cartridge/unit
             </Label>
             <div className="relative">
-              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
                 {CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
               </span>
               <Input
@@ -156,18 +156,18 @@ export function SavingsSetupDialog({
                 step="0.01"
                 value={costPerUnit}
                 onChange={(e) => setCostPerUnit(e.target.value)}
-                className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
+                className="pl-8"
                 placeholder="10.00"
               />
             </div>
-            <p className="text-xs text-emerald-300">
+            <p className="text-xs text-muted-foreground">
               How much does one pack or cartridge cost?
             </p>
           </div>
 
           {/* Units Per Week */}
           <div className="space-y-2">
-            <Label htmlFor="unitsPerDay" className="text-white">
+            <Label htmlFor="unitsPerDay">
               Packs/vapes per week (before quitting)
             </Label>
             <Input
@@ -178,24 +178,23 @@ export function SavingsSetupDialog({
               value={unitsPerDay}
               onChange={(e) => setUnitsPerDay(e.target.value)}
               placeholder="1"
-              className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
             />
-            <p className="text-xs text-emerald-300">
+            <p className="text-xs text-muted-foreground">
               How many packs/vapes did you typically use per week?
             </p>
           </div>
 
           {/* Optional: Savings Goal */}
-          <div className="pt-4 border-t border-emerald-800 space-y-4">
+          <div className="pt-4 border-t space-y-4">
-            <div className="flex items-center gap-2 text-sm text-emerald-300">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <Target className="h-4 w-4" />
               <span>See your real time savings:</span>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="savingsGoal" className="text-white">Target amount</Label>
+              <Label htmlFor="savingsGoal">Target amount</Label>
               <div className="relative">
-                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
                   {CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
                 </span>
                 <Input
@@ -205,34 +204,33 @@ export function SavingsSetupDialog({
                   step="1"
                   value={savingsGoal}
                   onChange={(e) => setSavingsGoal(e.target.value)}
-                  className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
+                  className="pl-8"
                   placeholder="500"
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="goalName" className="text-white">What are you saving for?</Label>
+              <Label htmlFor="goalName">What are you saving for?</Label>
               <Input
                 id="goalName"
                 type="text"
                 value={goalName}
                 onChange={(e) => setGoalName(e.target.value)}
                 placeholder="e.g., New Phone, Vacation"
-                className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
               />
             </div>
           </div>
 
           {/* Actions */}
           <div className="flex gap-2 pt-4">
-            <Button onClick={onClose} className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white">
+            <Button onClick={onClose} variant="outline" className="flex-1">
               Cancel
             </Button>
             <Button
               onClick={handleSave}
               disabled={!isValid}
-              className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white"
+              className="flex-1"
             >
               {existingConfig ? 'Update' : 'Save'}
             </Button>

src/components/UsageCalendar.tsx

@@ -232,7 +232,7 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
 
   const calendarBackground = theme === 'light'
     ? 'linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(30, 30, 45, 0.9) 100%)'
-    : undefined;
+    : 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.9) 100%)';
 
   return (
     <>
@@ -248,8 +248,8 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'bg-background/50'}`}
+                className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'text-slate-900 bg-background/50'}`}
-                style={theme === 'light' ? { background: calendarBackground } : undefined}
+                style={{ background: calendarBackground }}
                 showOutsideDays={false}
                 components={{
                   DayButton: CustomDayButton,

src/components/UserHeader.tsx

@@ -18,7 +18,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { User } from '@/lib/session';
-import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings } from '@/lib/storage';
+import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings, UserPreferences } from '@/lib/storage';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
@@ -27,9 +27,10 @@ import { useTheme } from '@/lib/theme-context';
 
 interface UserHeaderProps {
   user: User;
+  preferences?: UserPreferences | null;
 }
 
-export function UserHeader({ user }: UserHeaderProps) {
+export function UserHeader({ user, preferences }: UserHeaderProps) {
   const [userName, setUserName] = useState<string | null>(null);
   const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00' });
   const [showReminderDialog, setShowReminderDialog] = useState(false);
@@ -40,16 +41,22 @@ export function UserHeader({ user }: UserHeaderProps) {
 
   useEffect(() => {
     const loadData = async () => {
+      // If preferences passed from parent, use them. Otherwise fetch.
+      /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
       const [prefs, reminders] = await Promise.all([
-        fetchPreferences(),
+        preferences ? Promise.resolve(preferences) : fetchPreferences(),
         fetchReminderSettings(),
       ]);
-      setUserName(prefs.userName);
+
+      if (prefs) {
+        setUserName(prefs.userName);
+      }
+
       setReminderSettings(reminders);
       setLocalTime(reminders.reminderTime);
     };
     loadData();
-  }, []);
+  }, [preferences]);
 
   const handleToggleReminders = async () => {
     if (!reminderSettings.enabled && permission !== 'granted') {
@@ -82,8 +89,10 @@ export function UserHeader({ user }: UserHeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-50 border-b border-white/10" style={{
+    <header className="sticky top-0 z-50 border-b border-border/10 transition-colors duration-300" style={{
-      background: 'linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 30, 60, 0.95) 50%, rgba(15, 25, 50, 0.98) 100%)',
+      background: theme === 'light'
+        ? 'rgba(255, 255, 255, 0.8)'
+        : 'linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 30, 60, 0.95) 50%, rgba(15, 25, 50, 0.98) 100%)',
       backdropFilter: 'blur(10px)',
     }}>
       <div className="container mx-auto px-4 py-3 sm:py-4 flex items-center justify-between">
@@ -101,7 +110,7 @@ export function UserHeader({ user }: UserHeaderProps) {
             QuitTraq
           </h1>
           {userName && (
-            <p className="text-white/90 text-lg hidden sm:block ml-4">
+            <p className="text-foreground/90 text-lg hidden sm:block ml-4">
               Welcome {userName}, you got this!
             </p>
           )}
@@ -110,23 +119,22 @@ export function UserHeader({ user }: UserHeaderProps) {
         <div className="flex items-center gap-2 sm:gap-3">
           <button
             onClick={() => setShowReminderDialog(true)}
-            className={`p-2.5 sm:p-2 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95 ${
+            className={`p-2.5 sm:p-2 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95 ${reminderSettings.enabled
-              reminderSettings.enabled
+              ? 'bg-indigo-500/30 hover:bg-indigo-500/40'
-                ? 'bg-indigo-500/30 hover:bg-indigo-500/40'
+              : 'bg-muted hover:bg-muted/80'
-                : 'bg-white/10 hover:bg-white/20'
+              }`}
-            }`}
             aria-label="Reminder settings"
             title={reminderSettings.enabled ? `Reminders on at ${reminderSettings.reminderTime}` : 'Reminders off'}
           >
             {reminderSettings.enabled ? (
               <BellRing className="h-5 w-5 text-indigo-300 transition-transform duration-300" />
             ) : (
-              <Bell className="h-5 w-5 text-white/70 transition-transform duration-300" />
+              <Bell className="h-5 w-5 text-muted-foreground transition-transform duration-300" />
             )}
           </button>
           <button
             onClick={toggleTheme}
-            className="p-2.5 sm:p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95"
+            className="p-2.5 sm:p-2 rounded-full bg-muted hover:bg-muted/80 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/30 hover:scale-110 active:scale-95"
             aria-label="Toggle theme"
           >
             {theme === 'dark' ? (
@@ -137,17 +145,17 @@ export function UserHeader({ user }: UserHeaderProps) {
           </button>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-white/30">
+              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-muted hover:bg-muted/80 transition-all focus:outline-none focus:ring-2 focus:ring-primary/30">
-                <Avatar className="h-8 w-8 ring-2 ring-white/30">
+                <Avatar className="h-8 w-8 ring-2 ring-primary/30">
                   <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
-                  <AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
+                  <AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback>
                 </Avatar>
-                <ChevronDown className="h-4 w-4 text-white" />
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={8}>
               <DropdownMenuItem onClick={() => handleNavigate('/')}>
-                <Home className="mr-3 h-4 w-4 text-white/70" />
+                <Home className="mr-3 h-4 w-4 text-muted-foreground" />
                 <span>Dashboard</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -170,7 +178,7 @@ export function UserHeader({ user }: UserHeaderProps) {
       </div>
       {userName && (
         <div className="sm:hidden container mx-auto px-4 pb-2">
-          <p className="text-white/90 text-sm">
+          <p className="text-muted-foreground text-sm">
             Welcome {userName}, you got this!
           </p>
         </div>
@@ -187,19 +195,7 @@ export function UserHeader({ user }: UserHeaderProps) {
           </DialogHeader>
 
           <div className="space-y-4 py-4">
-            {/* Permission Status */}
+
-            <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-              <span className="text-sm text-muted-foreground">Notifications</span>
-              <span className={`text-sm font-medium ${
-                !isSupported ? 'text-red-400' :
-                permission === 'granted' ? 'text-green-400' :
-                permission === 'denied' ? 'text-red-400' : 'text-yellow-400'
-              }`}>
-                {!isSupported ? 'Not supported' :
-                 permission === 'granted' ? 'Enabled' :
-                 permission === 'denied' ? 'Blocked' : 'Not set'}
-              </span>
-            </div>
 
             {/* Enable/Disable Toggle */}
             <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
@@ -215,15 +211,13 @@ export function UserHeader({ user }: UserHeaderProps) {
               </div>
               <button
                 onClick={handleToggleReminders}
-                disabled={!isSupported || permission === 'denied'}
+                disabled={!isSupported || (permission === 'denied' && !reminderSettings.enabled)}
-                className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
+                className={`relative w-12 h-6 rounded-full transition-all duration-300 ${reminderSettings.enabled ? 'bg-indigo-500' : 'bg-muted-foreground/30'
-                  reminderSettings.enabled ? 'bg-indigo-500' : 'bg-muted-foreground/30'
+                  } ${!isSupported || (permission === 'denied' && !reminderSettings.enabled) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-                } ${!isSupported || permission === 'denied' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
               >
                 <div
-                  className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${
+                  className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${reminderSettings.enabled ? 'left-7' : 'left-1'
-                    reminderSettings.enabled ? 'left-7' : 'left-1'
+                    }`}
-                  }`}
                 />
               </button>
             </div>

src/lib/storage.ts

@@ -123,6 +123,7 @@ export function getCurrentUserId(): string | null {
 
 // Async API functions
 export async function fetchPreferences(): Promise<UserPreferences> {
+  if (preferencesCache) return preferencesCache;
   try {
     const response = await fetch('/api/preferences');
     if (!response.ok) {
@@ -154,6 +155,7 @@ export async function savePreferencesAsync(preferences: UserPreferences): Promis
 }
 
 export async function fetchUsageData(): Promise<UsageEntry[]> {
+  if (usageDataCache) return usageDataCache;
   try {
     const response = await fetch('/api/usage');
     if (!response.ok) {
@@ -216,6 +218,7 @@ export async function clearDayDataAsync(
 // ============ ACHIEVEMENTS FUNCTIONS ============
 
 export async function fetchAchievements(): Promise<Achievement[]> {
+  if (achievementsCache) return achievementsCache;
   try {
     const response = await fetch('/api/achievements');
     if (!response.ok) return [];
@@ -264,6 +267,7 @@ export function getAchievements(): Achievement[] {
 // ============ REMINDERS FUNCTIONS ============
 
 export async function fetchReminderSettings(): Promise<ReminderSettings> {
+  if (reminderSettingsCache) return reminderSettingsCache;
   try {
     const response = await fetch('/api/reminders');
     if (!response.ok) return { enabled: false, reminderTime: '09:00' };
@@ -298,6 +302,7 @@ export function getReminderSettings(): ReminderSettings {
 // ============ SAVINGS FUNCTIONS ============
 
 export async function fetchSavingsConfig(): Promise<SavingsConfig | null> {
+  if (savingsConfigCache) return savingsConfigCache;
   try {
     const response = await fetch('/api/savings');
     if (!response.ok) return null;
@@ -403,7 +408,7 @@ export function getMinutesSinceQuit(
   const now = new Date();
   const todayStr = now.toISOString().split('T')[0];
   const lastUsageDateStr = substanceData[0].date;
-  
+
   // If the last usage was today, reset to 0 (just used)
   if (lastUsageDateStr === todayStr) {
     return 0;

src/lib/theme-context.tsx

@@ -21,6 +21,15 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }, [theme]);
+
   const toggleTheme = () => {
     const newTheme = theme === 'dark' ? 'light' : 'dark';
     setTheme(newTheme);

src/proxy 2.ts

@@ -0,0 +1,9 @@
+import { authkitMiddleware } from "@workos-inc/authkit-nextjs";
+
+export const proxy = authkitMiddleware();
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};