diff --git a/frontend/components/theme-toggle.tsx b/frontend/components/theme-toggle.tsx
index e8a9802..8cc2a43 100644
--- a/frontend/components/theme-toggle.tsx
+++ b/frontend/components/theme-toggle.tsx
@@ -1,15 +1,16 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun, Monitor } from "lucide-react"
 import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
+import * as Popover from "@radix-ui/react-popover"
+
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
 
-  // useEffect only runs on the client, so now we can safely show the UI
   useEffect(() => {
     setMounted(true)
   }, [])
@@ -19,7 +20,7 @@ export function ThemeToggle() {
       <Button
         variant="ghost"
         size="icon"
-        className="w-9 h-9 rounded-md shadow-sm dark:shadow-none"
+        className="w-9 h-9 rounded-full shadow-sm dark:shadow-none"
         disabled
       >
         <Sun className="h-4 w-4" />
@@ -28,20 +29,90 @@ export function ThemeToggle() {
     )
   }
 
+  const getActiveIcon = () => {
+    if (theme === "system") return <Monitor className="h-4 w-4" />
+    if (theme === "dark") return <Moon className="h-4 w-4" />
+    return <Sun className="h-4 w-4" />
+  }
+
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className="w-9 h-9 rounded-md hover:bg-gray-100 dark:hover:bg-accent hover:text-foreground transition-colors shadow-sm dark:shadow-none border border-gray-200 dark:border-border"
-      title={`Switch to ${theme === "light" ? "dark" : "light"} theme`}
-    >
-      {theme === "light" ? (
-        <Moon className="h-4 w-4" />
-      ) : (
-        <Sun className="h-4 w-4" />
-      )}
-      <span className="sr-only">Toggle theme</span>
-    </Button>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="w-9 h-9 rounded-full hover:bg-gray-100 dark:hover:bg-accent hover:text-foreground transition-colors shadow-sm dark:shadow-none border border-gray-200 dark:border-border"
+          title="Select theme"
+        >
+          {getActiveIcon()}
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+  sideOffset={8}
+  className="flex gap-1 px-2 py-1 rounded-full z-[100] shadow-lg"
+  style={{
+    backgroundColor: theme === "dark" ? "#23272f" : "#3a3a3a",
+    zIndex: 100,
+  }}
+>
+  <Button
+    variant="ghost"
+    size="icon"
+    className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors
+      focus:outline-none focus:ring-0 active:bg-transparent
+      ${theme === "system" ? "bg-gray-700 dark:bg-gray-700" : ""}
+      hover:bg-gray-600 dark:hover:bg-gray-700
+    `}
+    onClick={() => setTheme("system")}
+    title="System"
+  >
+    <Monitor
+      className={`h-6 w-6 transition-colors
+        ${theme === "system" ? "text-white" : "text-gray-300"}
+        hover:text-yellow-400
+      `}
+    />
+  </Button>
+  <Button
+    variant="ghost"
+    size="icon"
+    className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors
+      focus:outline-none focus:ring-0 active:bg-transparent
+      ${theme === "light" ? "bg-gray-700 dark:bg-gray-700" : ""}
+      hover:bg-gray-600 dark:hover:bg-gray-700
+    `}
+    onClick={() => setTheme("light")}
+    title="Light"
+  >
+    <Sun
+      className={`h-6 w-6 transition-colors
+        ${theme === "light" ? "text-white" : "text-gray-300"}
+        hover:text-yellow-400
+      `}
+    />
+  </Button>
+  <Button
+    variant="ghost"
+    size="icon"
+    className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors
+      focus:outline-none focus:ring-0 active:bg-transparent
+      ${theme === "dark" ? "bg-gray-700 dark:bg-gray-700" : ""}
+      hover:bg-gray-600 dark:hover:bg-gray-700
+    `}
+    onClick={() => setTheme("dark")}
+    title="Dark"
+  >
+    <Moon
+      className={`h-6 w-6 transition-colors
+        ${theme === "dark" ? "text-white" : "text-gray-300"}
+        hover:text-yellow-400
+      `}
+    />
+  </Button>
+</Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 62327b8..17641ce 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -54,7 +54,7 @@
         "next": "^15.2.4",
         "next-themes": "^0.4.4",
         "react": "^19.1.0",
-        "react-day-picker": "8.10.1",
+        "react-day-picker": "9.9.0",
         "react-dom": "^19.1.0",
         "react-hook-form": "^7.54.1",
         "react-hot-toast": "^2.5.2",
@@ -64,7 +64,7 @@
         "sonner": "^1.7.1",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
-        "vaul": "^0.9.6",
+        "vaul": "^1.1.2",
         "zod": "^3.24.1"
       },
       "devDependencies": {
@@ -101,6 +101,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
@@ -4324,6 +4330,12 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -6243,17 +6255,24 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
-      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.9.0.tgz",
+      "integrity": "sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==",
       "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/gpbl"
       },
       "peerDependencies": {
-        "date-fns": "^2.28.0 || ^3.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.8.0"
       }
     },
     "node_modules/react-dom": {
@@ -7247,16 +7266,16 @@
       }
     },
     "node_modules/vaul": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.9.tgz",
-      "integrity": "sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.1"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
     "node_modules/victory-vendor": {
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7981a2d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.15",
+    "framer-motion": "^12.23.12"
+  }
+}