diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 81a4ab6..6bdcdd0 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -370,6 +370,8 @@ export default function Canvas(props) {
     };
   });
 
+  const theme = localStorage.getItem("theme");
+
   return (
     <div className="flex-grow h-full" id="canvas">
       <div ref={canvas} className="w-full h-full">
@@ -380,8 +382,7 @@ export default function Canvas(props) {
           className="w-full h-full"
           style={{
             cursor: cursor,
-            backgroundColor:
-              settings.mode === "light" ? "white" : "rgba(22, 22, 26, 1)",
+            backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
           }}
         >
           {settings.showGrid && (
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index d1a507b..3471a20 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -921,6 +921,7 @@ export default function ControlPanel(props) {
               if (body.hasAttribute("theme-mode")) {
                 body.setAttribute("theme-mode", "light");
               }
+              localStorage.setItem("theme", "light");
               setSettings((prev) => ({ ...prev, mode: "light" }));
             },
           },
@@ -930,6 +931,7 @@ export default function ControlPanel(props) {
               if (body.hasAttribute("theme-mode")) {
                 body.setAttribute("theme-mode", "dark");
               }
+              localStorage.setItem("theme", "dark");
               setSettings((prev) => ({ ...prev, mode: "dark" }));
             },
           },
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 0be69b7..c972a1f 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -490,6 +490,21 @@ export default function Editor(props) {
     socket.on("user-connected", onUserConnected);
     socket.on("user-disconnected", onUserDisconnected);
 
+    const theme = localStorage.getItem("theme");
+    if (theme === "dark") {
+      setSettings((prev) => ({ ...prev, mode: "dark" }));
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "dark");
+      }
+    } else {
+      setSettings((prev) => ({ ...prev, mode: "light" }));
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "light");
+      }
+    }
+
     return () => {
       socket.off("connect", onConnect);
       socket.off("recieve-message", onRecieve);