diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx
index 09af1f8..43eadf0 100644
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -3,12 +3,11 @@ import { Link } from "react-router-dom";
 import { useDarkMode } from "../../hooks/useDarkMode";
 
 export const Navbar2 = (): ReactElement => {
-  const [colorTheme, setTheme] = useDarkMode();
-  const [darkMode, setDarkMode] = useState(false);
+  const [theme, setTheme] = useDarkMode();
+  const darkMode = theme === "dark";
 
-  const toggleDarkMode = (checked) => {
-    setTheme(colorTheme);
-    setDarkMode(!darkMode);
+  const toggleDarkMode = () => {
+    setTheme(darkMode ? "light" : "dark");
   };
 
   return (
@@ -98,7 +97,7 @@ export const Navbar2 = (): ReactElement => {
               <li>
                 {/* Light/Dark Mode toggle */}
                 <div className="flex items-center space-x-2">
-                  <span className="text-gray-600 dark:text-white">Dark</span>
+                  <span className="text-gray-600 dark:text-white">Light</span>
                   <label
                     htmlFor="toggle"
                     className="relative inline-flex items-center"
@@ -117,7 +116,7 @@ export const Navbar2 = (): ReactElement => {
                       }`}
                     ></span>
                   </label>
-                  <span className="text-gray-600 dark:text-white">Light</span>
+                  <span className="text-gray-600 dark:text-white">Dark</span>
                 </div>
               </li>
             </ul>
diff --git a/src/client/hooks/useDarkMode.tsx b/src/client/hooks/useDarkMode.tsx
index b7cec71..0af1c37 100644
--- a/src/client/hooks/useDarkMode.tsx
+++ b/src/client/hooks/useDarkMode.tsx
@@ -13,5 +13,5 @@ export const useDarkMode = () => {
     localStorage.setItem("theme", theme);
   }, [theme, colorTheme]);
 
-  return [colorTheme, setTheme];
+  return [theme, setTheme];
 };