diff --git a/frontend/App.js b/frontend/App.js
index 93ae8648..b4780cf7 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -4,9 +4,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..ced505a6
--- /dev/null
+++ b/frontend/hooks/useDarkMode.js
@@ -0,0 +1,8 @@
+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..d43b604d
--- /dev/null
+++ b/frontend/hooks/useLocalStorage.js
@@ -0,0 +1,19 @@
+import React, {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