diff --git a/app/header.tsx b/app/header.tsx
index a10f60d..13678e9 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -66,7 +66,7 @@ export default function Header() {
           <Image src="/convex.svg" alt="Convex" width={24} height={24} />
         </Link>
 
-        <div className="flex hover:bg-slate-500 rounded-md px-1">
+        <div className="">
           <ThemeToggle />
         </div>
         {!isAuthenticated ? (
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index 3c4e681..c762266 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -2,13 +2,26 @@
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const darkMode = useTheme().systemTheme;
+
   return (
-    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme} className="">
-      {theme == "light" ? (
+    <ToggleGroup
+      type="single"
+      size="sm"
+      value={theme}
+      onValueChange={(e) => {
+        console.log(`theme: ${theme}`);
+        console.log(`darkMode: ${darkMode}`);
+        setTheme(e);
+      }}
+      className={`${"flex px-1 py-1 rounded-md"} ${theme == "light" || (theme=="system" && darkMode=="light") ? "bg-blue-200" : "bg-slate-700"}`}
+    >
+      {theme == "light" || (theme=="system"&& darkMode=="light") ? (
         <ToggleGroupItem value="dark" aria-label="Dark">
           <MoonIcon />
         </ToggleGroupItem>