diff --git a/frontend/App.js b/frontend/App.js
index 93ae8648..01fa9e3d 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -3,10 +3,11 @@ import axios from "axios";
 
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
+import useDarkMode from "./hooks/useDarkMode";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false);
 
   useEffect(() => {
     axios
diff --git a/frontend/hooks/useDarkMode.js b/frontend/hooks/useDarkMode.js
new file mode 100644
index 00000000..ffabf937
--- /dev/null
+++ b/frontend/hooks/useDarkMode.js
@@ -0,0 +1,9 @@
+import { useState } from "react";
+import useLocalStorage from "./useLocalStorage";
+
+const useDarkMode = (initialValue) => {
+    const [darkMode, setDarkMode] = useLocalStorage('darkMode', initialValue);
+    return [darkMode, setDarkMode];
+}
+
+export default useDarkMode;
\ No newline at end of file
diff --git a/frontend/hooks/useLocalStorage.js b/frontend/hooks/useLocalStorage.js
new file mode 100644
index 00000000..7afe7631
--- /dev/null
+++ b/frontend/hooks/useLocalStorage.js
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+const useLocalStorage = (key, initialValue) => {
+    const [state, setState] = useState(() => {
+        if(localStorage.getItem(key)) {
+            return JSON.parse(localStorage.getItem(key));
+        }
+        
+        localStorage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
+    });
+
+    const setStorageState = (value) => {
+        localStorage.setItem(key, JSON.stringify(value));
+        setState(value);
+    }
+
+    return([state, setStoredState]);
+
+}
+
+export default useLocalStorage;
\ No newline at end of file