diff --git a/src/hooks/useDarkMode.js b/src/hooks/useDarkMode.js
new file mode 100644
index 00000000..5bed9ae9
--- /dev/null
+++ b/src/hooks/useDarkMode.js
@@ -0,0 +1,7 @@
+import { useLocalStorage } from "./useLocalStorage";
+
+export const useDarkMode = () => {
+    const [darkValue, setDarkValue] = useLocalStorage("dark", false);
+
+    return [darkValue, setDarkValue];
+};
\ No newline at end of file
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 00000000..dd6384a9
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useLocalStorage = (key, initialValue) => {
+    const [storedValue, setStoredValue] = useState(() => {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+    });
+    const setValue = value => {
+        setStoredValue(value);
+        window.localStorage.setItem(key, JSON.stringify(value));
+    };
+
+    return [storedValue, setValue];
+};
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 956fe3a7..114e7eda 100755
--- a/src/index.js
+++ b/src/index.js
@@ -4,13 +4,14 @@ import axios from "axios";
 
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
+import { useDarkMode } from "./hooks/useDarkMode"
 
 
 import "./styles.scss";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false);
 
   useEffect(() => {
     axios