diff --git a/package-lock.json b/package-lock.json
index 94ad76c..062b261 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react": "^18.1.0",
         "react-avatar": "^4.1.0",
         "react-confirm-alert": "^2.8.0",
+        "react-dark-mode-toggle": "^0.2.0",
         "react-dom": "^18.1.0",
         "react-fast-marquee": "^1.3.2",
         "react-files": "^3.0.0-alpha.3",
@@ -16526,6 +16527,15 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "react-dark-mode-toggle": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/react-dark-mode-toggle/-/react-dark-mode-toggle-0.2.0.tgz",
+      "integrity": "sha512-YGN6EKU54TaEIQ2G5veB+XVRXSsbyrW9+rop/1Ap06A0z1j6QBVuMIZjhQpwYLKVhSPIxoe7zsWj0cZaEf7cQA==",
+      "requires": {
+        "parse-unit": "^1.0.1",
+        "react-lottie-player": "^1.1.1"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/package.json b/package.json
index 88ddd3e..7438ebb 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.1.0",
     "react-avatar": "^4.1.0",
     "react-confirm-alert": "^2.8.0",
+    "react-dark-mode-toggle": "^0.2.0",
     "react-dom": "^18.1.0",
     "react-fast-marquee": "^1.3.2",
     "react-files": "^3.0.0-alpha.3",
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 302bcc9..c1b849c 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -20,13 +20,15 @@ import TaskCreateRuns from './TaskCreate';
 
 const Layout = () => {
   const [scroll, setScroll] = useState(0);
-  const [darkMode, setDarkMode] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState('loading');
   const [userData, setUserData] = useState({});
   const location = useLocation();
   const params = new URLSearchParams(location.hash);
   const navigate = useNavigate();
 
+  const storedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
+  const [darkMode, setDarkMode] = useState(storedDarkMode || false);
+
   function arr2obj(arr) {
     const obj = {};
     arr.forEach((v) => {
@@ -80,10 +82,18 @@ const Layout = () => {
     };
   });
 
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('dark');
+      document.body.classList.add('bg-gray-800');
+    }
+  }, [darkMode]);
+
   const toggleDarkMode = () => {
     document.body.classList.toggle('dark');
     document.body.classList.toggle('bg-gray-800');
     setDarkMode(!darkMode);
+    localStorage.setItem('darkMode', JSON.stringify(!darkMode));
   };
 
   const showToast = (type, msg) => {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index ce55b2b..9a8b1ee 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -4,6 +4,7 @@ import Avatar from 'react-avatar';
 import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
 import { host_uri } from '../config';
 import { confirmAlert } from 'react-confirm-alert';
+import DarkModeToggle from 'react-dark-mode-toggle';
 
 const Navbar = ({
   scroll,
@@ -50,7 +51,7 @@ const Navbar = ({
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <div className="bg-white rounded-lg p-10 shadow-xl font-open ">
+          <div className="bg-white rounded-lg p-10 shadow-xl font-open">
             <h1 className="mb-8">
               Are you sure to logout from{' '}
               <span className="font-mons font-semibold">KRINI</span>?
@@ -100,7 +101,7 @@ const Navbar = ({
           : 'bg-white z-10 fixed w-full shadow-lg  py-5 pt-10 md:px-32 px-10 flex justify-between items-center'
       }
     >
-      {/* <div className=""> */}
+     {/* <div className=""> */}
       <Link to="/">
         <div className="flex items-center cursor-pointer">
           <div className="h-10 mr-4 mb-1">
@@ -135,7 +136,12 @@ const Navbar = ({
           </Link>
         </div>
       ) : (
-        <div>
+        <div className="flex items-center">
+          <DarkModeToggle
+            onChange={toggleDarkMode}
+            checked={darkMode}
+            size={40}
+          />
           <Menu
             menuButton={
               <MenuButton>