diff --git a/frontend/App.js b/frontend/App.js
index 93ae8648..af1ccadf 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from "react";
 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..936f2ea2
--- /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..569f98f0
--- /dev/null
+++ b/frontend/hooks/useLocalStorage.js
@@ -0,0 +1,20 @@
+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 setStoredState = (value) => {
+    localStorage.setItem(key, JSON.stringify(value));
+    setState(value);
+   } 
+   return([state,setStoredState]);
+}
+
+export default useLocalStorage;
\ No newline at end of file