diff --git a/web/src/components/top-bar.tsx b/web/src/components/top-bar.tsx
index 3d295686..f891bc93 100644
--- a/web/src/components/top-bar.tsx
+++ b/web/src/components/top-bar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useMemo } from "react";
+import { useMemo, useLayoutEffect, useState, useCallback } from "react";
 import { useLocation } from "react-router-dom";
 import logoWide from "src/assets/svg/logo-wide.svg";
 import logoSquare from "src/assets/svg/logo-square.svg";
@@ -41,6 +41,26 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
 
   const { localize } = useLocale();
 
+  const [isDark, setIsDark] = useState(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const isDark = savedTheme === "dark";
+    return savedTheme ? isDark : true; // default should be dark
+  });
+
+  useLayoutEffect(() => {
+    const theme = localStorage.getItem("theme");
+    if (theme) {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    const newTheme = isDark ? "light" : "dark";
+    setIsDark(!isDark);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }, [isDark, setIsDark]);
+
   return (
     <div className="bg-neutral">
       <div className="m-auto flex max-w-7xl flex-row gap-4 p-4 items-center">
@@ -113,10 +133,12 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
             <input
+              onClick={toggleTheme}
               id="theme-toggle"
               type="checkbox"
               value="dzcodeLight"
               className="theme-controller toggle"
+              checked={!isDark}
             />
             <svg
               xmlns="http://www.w3.org/2000/svg"