feat: added the mobile friendly ui implimentation

- added nav bar and added the morden layout to it
- added mobile friendly css for responsiveness
- added more other components to it

4 files changed, 1128 insertions, 55 deletions

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 89de65b..5210ba7 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -3,6 +3,9 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom responsive breakpoints */
+@custom-variant xs (&:is(@media (min-width: 475px) *));
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -289,16 +292,23 @@ button.nav-button-transparent:focus,
 
 /* Dropdown and navigation item transparency */
 .nav-dropdown-transparent {
-  background: rgba(255, 255, 255, 0.98) !important;
-  backdrop-filter: blur(16px) saturate(180%) !important;
-  border: 1px solid rgba(255, 255, 255, 0.3) !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+  background: rgba(255, 255, 255, 0.85) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 16px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+  border-radius: 0.75rem !important;
 }
 
 .dark .nav-dropdown-transparent {
-  background: rgba(23, 23, 23, 0.98) !important;
-  border: 1px solid rgba(82, 82, 82, 0.4) !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+  background: rgba(15, 15, 15, 0.85) !important;
+  border: 1px solid rgba(82, 82, 82, 0.3) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
 }
 
 .nav-dropdown-item {
@@ -510,3 +520,239 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
   background: rgba(255, 255, 255, 0.06) !important;
   background-color: rgba(255, 255, 255, 0.06) !important;
 }
+
+/* Enhanced Theme Toggle Transparency Effects */
+/* Theme toggle specific enhancements for better navbar integration */
+.nav-button-transparent.group {
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px) saturate(150%);
+  border-radius: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Enhanced hover state for theme toggle */
+.nav-button-transparent.group:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  transform: scale(1.05);
+  backdrop-filter: blur(12px) saturate(180%);
+}
+
+.dark .nav-button-transparent.group:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Active state for theme toggle */
+.nav-button-transparent.group:active {
+  transform: scale(0.95);
+  transition: transform 0.1s ease-in-out;
+}
+
+/* Enhanced focus state for theme toggle */
+.nav-button-transparent.group:focus-visible {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
+  outline: none !important;
+}
+
+.dark .nav-button-transparent.group:focus-visible {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
+}
+
+
+/* Enhanced dropdown items for theme toggle */
+.nav-dropdown-item.group\/item {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  margin: 2px !important;
+  padding: 0.5rem 0.75rem !important;
+}
+
+.nav-dropdown-item.group\/item:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  backdrop-filter: blur(8px) !important;
+  transform: translateX(2px) !important;
+}
+
+.dark .nav-dropdown-item.group\/item:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Smooth icon transitions for theme toggle */
+.nav-button-transparent.group svg {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.dark .nav-button-transparent.group svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Enhanced glow effect for theme toggle */
+.nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.dark .nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
+}
+
+/* Ultra-smooth dropdown animations */
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+}
+
+/* Apply dropdown animation to nav dropdowns */
+.nav-dropdown-transparent[data-state="open"] {
+  animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Improved checkmark animation */
+.nav-dropdown-item span[class*="animate-in"] {
+  animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes checkmark-in {
+  from {
+    opacity: 0;
+    transform: scale(0.3) rotate(-12deg);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* Prevent any conflicting backgrounds on theme toggle */
+.nav-button-transparent.group[data-state="open"] {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transform: scale(1.05);
+}
+
+.dark .nav-button-transparent.group[data-state="open"] {
+  background: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(8px) !important;
+  border-radius: 0.5rem !important;
+}
+
+/* Mobile-friendly enhancements */
+@media (max-width: 768px) {
+  /* Ensure touch targets are at least 44px */
+  .touch-manipulation {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Better mobile spacing for action buttons */
+  .mobile-action-buttons {
+    gap: 0.25rem !important;
+  }
+  
+  /* Mobile menu improvements */
+  .mobile-menu-item {
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease-in-out;
+  }
+  
+  .mobile-menu-item:active {
+    transform: scale(0.98);
+    background: rgba(0, 0, 0, 0.05);
+  }
+  
+  .dark .mobile-menu-item:active {
+    background: rgba(255, 255, 255, 0.05);
+  }
+  
+  /* Prevent text selection on mobile UI elements */
+  .no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  
+  /* Improve mobile sheet content scrolling */
+  .mobile-sheet-content {
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Small mobile optimizations */
+@media (max-width: 475px) {
+  /* Tighter spacing on very small screens */
+  .action-buttons-compact {
+    gap: 0.125rem !important;
+  }
+  
+  /* Slightly smaller touch targets for very small screens */
+  .compact-touch-target {
+    min-width: 40px !important;
+    min-height: 40px !important;
+  }
+  
+  /* Reduce header height on very small screens */
+  .compact-header {
+    height: 3.5rem !important; /* 56px */
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .nav-button-transparent,
+  .nav-dropdown-item,
+  .mobile-menu-item {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .nav-button-transparent {
+    border: 1px solid currentColor !important;
+  }
+  
+  .nav-dropdown-transparent {
+    border: 1px solid currentColor !important;
+    background: var(--background) !important;
+  }
+}
+
+/* Focus visible for keyboard navigation */
+.nav-button-transparent:focus-visible {
+  outline: 2px solid var(--ring) !important;
+  outline-offset: 2px !important;
+}
diff --git a/frontend/src/app/globals.css.backup b/frontend/src/app/globals.css.backup
new file mode 100644
index 0000000..d573de5
--- /dev/null
+++ b/frontend/src/app/globals.css.backup
@@ -0,0 +1,679 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Complete override for ghost variant default styles */
+/* This targets the specific ghost variant classes from the button component */
+.nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  --tw-bg-opacity: 0 !important;
+  --accent: transparent !important;
+  --background: transparent !important;
+  --tw-border-opacity: 0 !important;
+  --tw-shadow: none !important;
+  --tw-ring-shadow: none !important;
+  --tw-ring-offset-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Force override ghost variant styles completely */
+button[class*="nav-button-transparent"],
+[data-slot="button"][class*="nav-button-transparent"],
+[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Override ghost variant hover specifically */
+button[class*="nav-button-transparent"][class*="hover:bg-accent"],
+[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"],
+[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Dark mode ghost variant overrides */
+.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
+.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
+.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Remove focus rings and outlines for nav buttons */
+.nav-button-transparent:focus,
+.nav-button-transparent:focus-visible {
+  outline: none !important;
+  ring: none !important;
+  --tw-ring-shadow: none !important;
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Light mode subtle hover effects - only show on hover */
+.nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  --tw-bg-opacity: 1 !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+/* Dark mode even more subtle hover effects */
+.dark .nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+/* Override NavigationMenuTrigger specific classes with maximum specificity */
+.nav-button-transparent.bg-background {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Focus states - only subtle background, no borders or rings */
+.nav-button-transparent:focus:not(:hover) {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.dark .nav-button-transparent:focus:not(:hover) {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Override open states */
+.nav-button-transparent[data-state="open"] {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+}
+
+.dark .nav-button-transparent[data-state="open"] {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+}
+
+/* Ensure all shadcn/ui utility classes are overridden with high specificity */
+button.nav-button-transparent,
+[data-slot="button"].nav-button-transparent,
+[data-slot="navigation-menu-trigger"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Hover states for all button types */
+button.nav-button-transparent:hover,
+[data-slot="button"].nav-button-transparent:hover,
+[data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+  cursor: pointer !important;
+}
+
+/* Focus states for all button types */
+button.nav-button-transparent:focus,
+[data-slot="button"].nav-button-transparent:focus,
+[data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  cursor: pointer !important;
+}
+
+/* Dark mode hover and focus states */
+.dark button.nav-button-transparent:hover,
+.dark [data-slot="button"].nav-button-transparent:hover,
+.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+  cursor: pointer !important;
+}
+
+.dark button.nav-button-transparent:focus,
+.dark [data-slot="button"].nav-button-transparent:focus,
+.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  cursor: pointer !important;
+}
+
+/* Dropdown and navigation item transparency */
+.nav-dropdown-transparent {
+  background: rgba(255, 255, 255, 0.85) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 16px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+  border-radius: 0.75rem !important;
+}
+
+.dark .nav-dropdown-transparent {
+  background: rgba(15, 15, 15, 0.85) !important;
+  border: 1px solid rgba(82, 82, 82, 0.3) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+}
+
+.nav-dropdown-item {
+  background: transparent !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.nav-dropdown-item:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+}
+
+.dark .nav-dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border: none !important;
+}
+
+/* Additional overrides for complete transparency */
+/* Handle any remaining shadcn/ui styling conflicts */
+.nav-button-transparent[data-variant="ghost"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.nav-button-transparent[data-variant="ghost"]:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.dark .nav-button-transparent[data-variant="ghost"]:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Override any remaining background utilities */
+.nav-button-transparent.bg-transparent,
+.nav-button-transparent.bg-accent,
+.nav-button-transparent.hover\:bg-accent,
+.nav-button-transparent.focus\:bg-accent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Ensure link elements in navigation also have transparent styling */
+a.nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+a.nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+.dark a.nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+/* Ultra-specific overrides to ensure transparency takes precedence */
+/* Handle all possible combinations of button classes */
+button.nav-button-transparent.hover\:bg-accent,
+button.nav-button-transparent.dark\:hover\:bg-accent\/50,
+button.nav-button-transparent[class*="hover:bg"],
+[data-slot="button"].nav-button-transparent.hover\:bg-accent,
+[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50,
+[data-slot="button"].nav-button-transparent[class*="hover:bg"],
+[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent,
+[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50,
+[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Override any CSS custom properties that might affect background */
+.nav-button-transparent {
+  --tw-bg-accent: transparent !important;
+  --tw-bg-background: transparent !important;
+  --tw-bg-muted: transparent !important;
+  --tw-bg-secondary: transparent !important;
+}
+
+/* Ensure no background on any state for nav buttons */
+.nav-button-transparent,
+.nav-button-transparent:not(:hover):not(:focus):not(:active) {
+  background: transparent !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+/* Maximum specificity overrides - nuclear option for transparency */
+html body header button.nav-button-transparent,
+html body header [data-slot="button"].nav-button-transparent,
+html body header [data-slot="navigation-menu-trigger"].nav-button-transparent,
+html body header div button.nav-button-transparent,
+html body header div [data-slot="button"].nav-button-transparent,
+html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+/* Override any inline styles or computed styles */
+.nav-button-transparent[style*="background"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Target specific button classes that might have background */
+.nav-button-transparent.inline-flex,
+.nav-button-transparent[class*="inline-flex"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Enhanced link element transparency for Sale button and similar nav links */
+/* Apply maximum specificity for link elements in navigation */
+html body header a.nav-button-transparent,
+html body header div a.nav-button-transparent,
+html body header nav a.nav-button-transparent,
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  cursor: pointer !important;
+}
+
+/* Override any NavigationMenuLink default styles */
+a.nav-button-transparent[data-slot="navigation-menu-link"],
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Ensure link hover states maintain transparency in default state */
+a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Specific overrides for NavigationMenuLink component (Sale button) */
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Override NavigationMenuLink hover and focus states */
+[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent,
+[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent,
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"],
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"],
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Override NavigationMenuLink data states */
+[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Ensure NavigationMenuLink has proper hover effect */
+[data-slot="navigation-menu-link"].nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Enhanced Theme Toggle Transparency Effects */
+/* Theme toggle specific enhancements for better navbar integration */
+.nav-button-transparent.group {
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px) saturate(150%);
+  border-radius: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Enhanced hover state for theme toggle */
+.nav-button-transparent.group:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  transform: scale(1.05);
+  backdrop-filter: blur(12px) saturate(180%);
+}
+
+.dark .nav-button-transparent.group:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Active state for theme toggle */
+.nav-button-transparent.group:active {
+  transform: scale(0.95);
+  transition: transform 0.1s ease-in-out;
+}
+
+/* Enhanced focus state for theme toggle */
+.nav-button-transparent.group:focus-visible {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
+  outline: none !important;
+}
+
+.dark .nav-button-transparent.group:focus-visible {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Theme toggle dropdown enhanced transparency */
+.nav-dropdown-transparent {
+  background: rgba(255, 255, 255, 0.98) !important;
+  backdrop-filter: blur(20px) saturate(200%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    0 2px 16px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
+  border-radius: 0.75rem !important;
+}
+
+.dark .nav-dropdown-transparent {
+  background: rgba(23, 23, 23, 0.98) !important;
+  border: 1px solid rgba(82, 82, 82, 0.5) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Enhanced dropdown items for theme toggle */
+.nav-dropdown-item.group\/item {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  margin: 2px !important;
+  padding: 0.5rem 0.75rem !important;
+}
+
+.nav-dropdown-item.group\/item:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  backdrop-filter: blur(8px) !important;
+  transform: translateX(2px) !important;
+}
+
+.dark .nav-dropdown-item.group\/item:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Smooth icon transitions for theme toggle */
+.nav-button-transparent.group svg {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.dark .nav-button-transparent.group svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Enhanced glow effect for theme toggle */
+.nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.dark .nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
+}
+
+/* Ultra-smooth dropdown animations */
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+}
+
+/* Apply dropdown animation to nav dropdowns */
+.nav-dropdown-transparent[data-state="open"] {
+  animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Improved checkmark animation */
+.nav-dropdown-item span[class*="animate-in"] {
+  animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes checkmark-in {
+  from {
+    opacity: 0;
+    transform: scale(0.3) rotate(-12deg);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* Prevent any conflicting backgrounds on theme toggle */
+.nav-button-transparent.group[data-state="open"] {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transform: scale(1.05);
+}
+
+.dark .nav-button-transparent.group[data-state="open"] {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index 851f637..475c1f3 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -104,8 +104,8 @@ export function Header() {
 
       {/* Main header */}
       <div className="border-b dark:border-neutral-800">
-        <div className="container mx-auto px-4">
-          <div className="flex h-16 items-center justify-between">
+        <div className="container mx-auto px-3 sm:px-4 lg:px-6">
+          <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4">
             {/* Mobile menu */}
             <Sheet>
               <SheetTrigger asChild>
@@ -117,28 +117,127 @@ export function Header() {
                   <Menu className="h-5 w-5" />
                 </Button>
               </SheetTrigger>
-              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
-                <SheetHeader>
-                  <SheetTitle>Menu</SheetTitle>
-                </SheetHeader>
-                <nav className="mt-6 space-y-4">
-                  {categories.map((category) => (
-                    <div key={category.title} className="space-y-2">
-                      <h3 className="font-semibold">{category.title}</h3>
-                      <div className="ml-4 space-y-1">
-                        {category.items.map((item) => (
-                          <Link
-                            key={item.name}
-                            href={item.href}
-                            className="block py-1 text-sm text-muted-foreground hover:text-foreground"
+              <SheetContent 
+                side="left" 
+                className="w-[280px] xs:w-[320px] sm:w-[380px] p-0 border-r dark:border-neutral-800"
+              >
+                <div className="flex flex-col h-full">
+                  {/* Header Section */}
+                  <SheetHeader className="px-6 py-4 border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900">
+                    <SheetTitle className="text-left text-lg font-semibold">
+                      Menu
+                    </SheetTitle>
+                  </SheetHeader>
+
+                  {/* Navigation Section */}
+                  <div className="flex-1 overflow-y-auto">
+                    <nav className="px-4 py-6 space-y-6">
+                      {categories.map((category) => (
+                        <div key={category.title} className="space-y-3">
+                          {/* Category Header */}
+                          <h3 className="px-2 text-sm font-semibold text-foreground uppercase tracking-wider border-b border-neutral-200 dark:border-neutral-700 pb-2">
+                            {category.title}
+                          </h3>
+                          
+                          {/* Category Items */}
+                          <div className="space-y-1">
+                            {category.items.map((item) => (
+                              <Link
+                                key={item.name}
+                                href={item.href}
+                                className="flex items-center px-3 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]"
+                              >
+                                <span className="flex-1">{item.name}</span>
+                                <svg 
+                                  className="w-4 h-4 opacity-40" 
+                                  fill="none" 
+                                  stroke="currentColor" 
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                                </svg>
+                              </Link>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+
+                      {/* Sale Section */}
+                      <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700">
+                        <h3 className="px-2 text-sm font-semibold text-red-600 uppercase tracking-wider">
+                          Special
+                        </h3>
+                        <Link
+                          href="/sale"
+                          className="flex items-center px-3 py-3 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]"
+                        >
+                          <span className="flex-1">Sale Items</span>
+                          <svg 
+                            className="w-4 h-4" 
+                            fill="none" 
+                            stroke="currentColor" 
+                            viewBox="0 0 24 24"
                           >
-                            {item.name}
-                          </Link>
-                        ))}
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </Link>
                       </div>
+                    </nav>
+                  </div>
+
+                  {/* Footer Section */}
+                  <div className="border-t dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-4 py-4">
+                    <div className="grid grid-cols-2 gap-3">
+                      {/* Search Button */}
+                      <Button 
+                        variant="outline" 
+                        size="sm" 
+                        className="flex items-center justify-center gap-2 h-10 text-xs font-medium"
+                      >
+                        <Search className="h-4 w-4" />
+                        Search
+                      </Button>
+                      
+                      {/* Account Button */}
+                      <Button 
+                        variant="outline" 
+                        size="sm" 
+                        className="flex items-center justify-center gap-2 h-10 text-xs font-medium"
+                      >
+                        <User className="h-4 w-4" />
+                        Account
+                      </Button>
                     </div>
-                  ))}
-                </nav>
+                    
+                    {/* Quick Actions */}
+                    <div className="flex items-center justify-center space-x-6 mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700">
+                      <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative">
+                        <Heart className="h-5 w-5 text-muted-foreground" />
+                        <span className="text-xs text-muted-foreground">Wishlist</span>
+                        {wishlistItems > 0 && (
+                          <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs">
+                            {wishlistItems}
+                          </Badge>
+                        )}
+                      </button>
+                      
+                      <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative">
+                        <ShoppingBag className="h-5 w-5 text-muted-foreground" />
+                        <span className="text-xs text-muted-foreground">Cart</span>
+                        {cartItems > 0 && (
+                          <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs">
+                            {cartItems}
+                          </Badge>
+                        )}
+                      </button>
+                      
+                      <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation">
+                        <Globe className="h-5 w-5 text-muted-foreground" />
+                        <span className="text-xs text-muted-foreground">USD</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
               </SheetContent>
             </Sheet>
 
@@ -214,26 +313,28 @@ export function Header() {
             </div>
 
             {/* Action buttons */}
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center space-x-1 sm:space-x-2">
               {/* Search icon for mobile */}
               <Button 
                 variant="ghost" 
                 size="icon" 
-                className="lg:hidden nav-button-transparent backdrop-blur-sm"
+                className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
               >
                 <Search className="h-5 w-5" />
               </Button>
 
               {/* Theme toggle */}
-              <ThemeToggle />
+              <div className="hidden sm:block">
+                <ThemeToggle />
+              </div>
 
-              {/* User menu */}
+              {/* User menu - Hidden on small mobile, visible on larger screens */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button 
                     variant="ghost" 
                     size="icon" 
-                    className="nav-button-transparent backdrop-blur-sm"
+                    className="hidden sm:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                   >
                     <User className="h-5 w-5" />
                   </Button>
@@ -261,11 +362,11 @@ export function Header() {
                 </DropdownMenuContent>
               </DropdownMenu>
 
-              {/* Wishlist */}
+              {/* Wishlist - Hidden on small mobile */}
               <Button 
                 variant="ghost" 
                 size="icon" 
-                className="relative nav-button-transparent backdrop-blur-sm"
+                className="relative hidden xs:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
               >
                 <Heart className="h-5 w-5" />
                 {wishlistItems > 0 && (
@@ -275,11 +376,11 @@ export function Header() {
                 )}
               </Button>
 
-              {/* Cart */}
+              {/* Cart - Always visible */}
               <Button 
                 variant="ghost" 
                 size="icon" 
-                className="relative nav-button-transparent backdrop-blur-sm"
+                className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
               >
                 <ShoppingBag className="h-5 w-5" />
                 {cartItems > 0 && (
@@ -289,13 +390,13 @@ export function Header() {
                 )}
               </Button>
 
-              {/* Language/Currency */}
+              {/* Language/Currency - Hidden on mobile */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button 
                     variant="ghost" 
                     size="icon" 
-                    className="nav-button-transparent backdrop-blur-sm"
+                    className="hidden md:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]"
                   >
                     <Globe className="h-5 w-5" />
                   </Button>
diff --git a/frontend/src/components/theme-toggle.tsx b/frontend/src/components/theme-toggle.tsx
index 17df44e..53d8286 100644
--- a/frontend/src/components/theme-toggle.tsx
+++ b/frontend/src/components/theme-toggle.tsx
@@ -14,6 +14,26 @@ import {
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  // Ensure we only render the correct icon after mounting to avoid hydration mismatch
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button 
+        variant="ghost" 
+        size="icon" 
+        className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95"
+        disabled
+      >
+        <Monitor className="h-[1.1rem] w-[1.1rem] text-muted-foreground/60" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
 
   return (
     <DropdownMenu>
@@ -21,28 +41,55 @@ export function ThemeToggle() {
         <Button 
           variant="ghost" 
           size="icon" 
-          className="nav-button-transparent backdrop-blur-sm"
+          className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 group"
         >
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          {/* Enhanced icon transitions with better positioning */}
+          <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all duration-500 ease-in-out dark:-rotate-180 dark:scale-0 text-amber-500 dark:text-amber-400 group-hover:text-amber-600 dark:group-hover:text-amber-300" />
+          <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-180 scale-0 transition-all duration-500 ease-in-out dark:rotate-0 dark:scale-100 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" />
+          
+          {/* Subtle background glow effect on hover */}
+          <div className="absolute inset-0 rounded-full bg-gradient-to-r from-amber-500/0 to-blue-500/0 group-hover:from-amber-500/10 group-hover:to-blue-500/10 dark:group-hover:from-amber-400/10 dark:group-hover:to-blue-400/10 transition-all duration-300" />
+          
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="nav-dropdown-transparent">
-        <DropdownMenuItem onClick={() => setTheme("light")} className="flex items-center gap-2 nav-dropdown-item">
-          <Sun className="h-4 w-4" />
-          Light
-          {theme === "light" && <span className="ml-auto text-xs">✓</span>}
+      
+      <DropdownMenuContent 
+        align="end" 
+        className="nav-dropdown-transparent min-w-[140px] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
+        sideOffset={8}
+      >
+        <DropdownMenuItem 
+          onClick={() => setTheme("light")} 
+          className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+        >
+          <Sun className="h-4 w-4 text-amber-500 group-hover/item:text-amber-600 transition-colors duration-200" />
+          <span className="flex-1">Light</span>
+          {theme === "light" && (
+            <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+          )}
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")} className="flex items-center gap-2 nav-dropdown-item">
-          <Moon className="h-4 w-4" />
-          Dark
-          {theme === "dark" && <span className="ml-auto text-xs">✓</span>}
+        
+        <DropdownMenuItem 
+          onClick={() => setTheme("dark")} 
+          className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+        >
+          <Moon className="h-4 w-4 text-blue-600 dark:text-blue-400 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-300 transition-colors duration-200" />
+          <span className="flex-1">Dark</span>
+          {theme === "dark" && (
+            <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+          )}
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")} className="flex items-center gap-2 nav-dropdown-item">
-          <Monitor className="h-4 w-4" />
-          System
-          {theme === "system" && <span className="ml-auto text-xs">✓</span>}
+        
+        <DropdownMenuItem 
+          onClick={() => setTheme("system")} 
+          className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item"
+        >
+          <Monitor className="h-4 w-4 text-slate-600 dark:text-slate-400 group-hover/item:text-slate-700 dark:group-hover/item:text-slate-300 transition-colors duration-200" />
+          <span className="flex-1">System</span>
+          {theme === "system" && (
+            <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span>
+          )}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>