diff --git a/src/App.tsx b/src/App.tsx
index d243398..f5672fa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -128,6 +128,7 @@ const App = () => {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
+                background: backgroundColor,
                 minHeight: "calc(100vh - 64px - 70px)", // Adjust for Navbar and Footer height
               }}
             >
diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx
index d3bd390..6ca0b04 100644
--- a/src/components/ToggleDarkMode.tsx
+++ b/src/components/ToggleDarkMode.tsx
@@ -1,15 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, {  useState } from "react";
 import { ToggleDarkModeContainer } from "../styles/components/ToggleDarkMode";
 import DarkModeToggle from "react-dark-mode-toggle";
 import useAppStore from "../store/store";
 
 const ToggleDarkMode: React.FC = () => {
-  const { backgroundColor, toggleDarkMode } = useAppStore();
-  const [isDarkMode, setIsDarkMode] = useState(backgroundColor === "#121212");
+  const {  toggleDarkMode } = useAppStore();
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(localStorage.getItem('theme') === 'dark');
 
-  useEffect(() => {
-    setIsDarkMode(backgroundColor === "#121212");
-  }, [backgroundColor]);
+ 
 
   const handleChange = () => {
     toggleDarkMode();
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..0b666da
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,4 @@
+export const lightBackgroundColor = "#ffffff";
+export const lightTextColor = "#121212";
+export const darkBackgroundColor = "#121212";
+export const darkTextColor = "#ffffff";
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 52d697f..c02ac86 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -9,6 +9,7 @@ import { transform } from "@accordproject/markdown-transform";
 import { SAMPLES, Sample } from "../samples";
 import * as playground from "../samples/playground";
 import { compress, decompress } from "../utils/compression/compression";
+import { darkBackgroundColor, darkTextColor, lightBackgroundColor, lightTextColor } from "../constants";
 
 interface AppState {
   templateMarkdown: string;
@@ -87,6 +88,21 @@ const useAppStore = create<AppState>()(
       init: async () => {
         const params = new URLSearchParams(window.location.search);
         const compressedData = params.get("data");
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+          set(() => ({
+            backgroundColor: darkBackgroundColor,
+            textColor: darkTextColor,
+          }));
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+        else {
+          set(() => ({
+            backgroundColor: lightBackgroundColor,
+            textColor: lightTextColor,
+          }));
+          document.documentElement.setAttribute("data-theme", "light");
+        }
         if (compressedData) {
           await get().loadFromLink(compressedData);
         } else {
@@ -197,9 +213,14 @@ const useAppStore = create<AppState>()(
       toggleDarkMode: () => {
         set((state) => {
           const isDark = state.backgroundColor === '#121212';
+          const newBackgroundColor = isDark ? '#ffffff' : '#121212';
+          const newTextColor = isDark ? '#121212' : '#ffffff';
+
+          localStorage.setItem('theme', isDark ? 'light' : 'dark');
+      
           return {
-            backgroundColor: isDark ? '#ffffff' : '#121212',
-            textColor: isDark ? '#121212' : '#ffffff',
+            backgroundColor: newBackgroundColor,
+            textColor: newTextColor,
           };
         });
       },