diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index 3fe5e8e..763384e 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -61,7 +61,7 @@ export function StatsCard({ usageData, substance }: StatsCardProps) {
   return (
     <Card className={`bg-card/80 backdrop-blur-sm border ${borderColor} bg-gradient-to-br ${bgGradient}`}>
       <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2">
+        <CardTitle className="flex items-center gap-2 text-white">
           <SubstanceIcon className={`h-5 w-5 ${iconColor}`} />
           <span>{substanceLabel} Stats</span>
         </CardTitle>
@@ -69,20 +69,20 @@ export function StatsCard({ usageData, substance }: StatsCardProps) {
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
           <div className="bg-muted p-4 rounded-lg text-center">
-            <p className="text-2xl font-bold">{todayUsage}</p>
-            <p className="text-sm text-muted-foreground">Today</p>
+            <p className="text-2xl font-bold text-white">{todayUsage}</p>
+            <p className="text-sm text-white/70">Today</p>
           </div>
           <div className="bg-muted p-4 rounded-lg text-center">
-            <p className="text-2xl font-bold">{weekAverage}</p>
-            <p className="text-sm text-muted-foreground">Daily Avg (7d)</p>
+            <p className="text-2xl font-bold text-white">{weekAverage}</p>
+            <p className="text-sm text-white/70">Daily Avg (7d)</p>
           </div>
           <div className="bg-muted p-4 rounded-lg text-center">
-            <p className="text-2xl font-bold">{streak}</p>
-            <p className="text-sm text-muted-foreground">Free days</p>
+            <p className="text-2xl font-bold text-white">{streak}</p>
+            <p className="text-sm text-white/70">Free days</p>
           </div>
           <div className="bg-muted p-4 rounded-lg text-center">
-            <p className="text-2xl font-bold">{totalDays}</p>
-            <p className="text-sm text-muted-foreground">Days tracked</p>
+            <p className="text-2xl font-bold text-white">{totalDays}</p>
+            <p className="text-sm text-white/70">Days tracked</p>
           </div>
         </div>
 
diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 61465d5..28d2b3d 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +12,7 @@ import { User } from '@/lib/session';
 import { fetchPreferences } from '@/lib/storage';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Cigarette, Leaf, LogOut, Home } from 'lucide-react';
+import { Cigarette, Leaf, LogOut, Home, ChevronDown } from 'lucide-react';
 
 interface UserHeaderProps {
   user: User;
@@ -36,10 +35,14 @@ export function UserHeader({ user }: UserHeaderProps) {
     .join('')
     .toUpperCase() || user.email[0].toUpperCase();
 
-  const handleLogout = async () => {
+  const handleLogout = () => {
     window.location.href = '/api/auth/logout';
   };
 
+  const handleNavigate = (path: string) => {
+    router.push(path);
+  };
+
   return (
     <header className="border-b border-white/10" style={{
       background: 'linear-gradient(135deg, rgba(147, 112, 219, 0.9) 0%, rgba(138, 99, 210, 0.85) 50%, rgba(123, 82, 195, 0.9) 100%)',
@@ -49,7 +52,7 @@ export function UserHeader({ user }: UserHeaderProps) {
         <div className="flex items-center gap-4">
           <h1
             className="text-2xl font-bold text-white cursor-pointer hover:opacity-80 transition-opacity"
-            onClick={() => router.push('/')}
+            onClick={() => handleNavigate('/')}
           >
             QuitTraq
           </h1>
@@ -60,34 +63,35 @@ export function UserHeader({ user }: UserHeaderProps) {
           )}
         </div>
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="focus:outline-none focus:ring-2 focus:ring-white/30 rounded-full">
-                <Avatar className="h-10 w-10 ring-2 ring-white/30 cursor-pointer hover:ring-white/50 transition-all">
+              <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">
+                <Avatar className="h-8 w-8 ring-2 ring-white/30">
                   <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
-                  <AvatarFallback className="bg-white/20 text-white">{initials}</AvatarFallback>
+                  <AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
                 </Avatar>
+                <ChevronDown className="h-4 w-4 text-white" />
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuItem onClick={() => router.push('/')} className="cursor-pointer">
-                <Home className="mr-2 h-4 w-4" />
-                Dashboard
+            <DropdownMenuContent align="end" sideOffset={8}>
+              <DropdownMenuItem onClick={() => handleNavigate('/')}>
+                <Home className="mr-3 h-4 w-4 text-white/70" />
+                <span>Dashboard</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={() => router.push('/track/nicotine')} className="cursor-pointer">
-                <Cigarette className="mr-2 h-4 w-4 text-red-500" />
-                Track Nicotine Usage
+              <DropdownMenuItem onClick={() => handleNavigate('/track/nicotine')}>
+                <Cigarette className="mr-3 h-4 w-4 text-red-400" />
+                <span>Track Nicotine Usage</span>
               </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push('/track/marijuana')} className="cursor-pointer">
-                <Leaf className="mr-2 h-4 w-4 text-green-500" />
-                Track Marijuana Usage
+              <DropdownMenuItem onClick={() => handleNavigate('/track/marijuana')}>
+                <Leaf className="mr-3 h-4 w-4 text-green-400" />
+                <span>Track Marijuana Usage</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-500">
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign out
+              <DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
+                <LogOut className="mr-3 h-4 w-4" />
+                <span>Sign out</span>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index ff0ef8f..9717aa2 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -16,7 +16,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-[100] min-w-[12rem] overflow-hidden rounded-lg border border-white/20 bg-zinc-900 p-2 text-white shadow-xl",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -35,7 +35,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-md px-3 py-2.5 text-sm outline-none transition-colors hover:bg-white/10 focus:bg-white/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -50,7 +50,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("my-2 h-px bg-white/20", className)}
     {...props}
   />
 ))