diff --git a/views/index.ejs b/views/index.ejs
index 084ee8b..0291b68 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -135,6 +135,21 @@
         	stateDuration: 0
   	});
    });
+   const btnDarkMode = document.getElementById('btnDarkMode');
+   const htmlElement = document.documentElement;
+   const setTheme = (theme) => {
+	htmlElement.setAttribute('data-bs-theme', theme);
+	localStorage.setItem('theme', theme);
+   };
+   btnDarkMode.addEventListener('click', () => {
+	const currentTheme = htmlElement.getAttribute('data-bs-theme');
+	const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+	setTheme(newTheme);
+   });
+   const savedTheme = localStorage.getItem('theme');
+   if (savedTheme) {
+	setTheme(savedTheme);
+   }
  </script>
 </body>
 </html>
diff --git a/views/navbar.ejs b/views/navbar.ejs
index c89f4b3..5246c3d 100644
--- a/views/navbar.ejs
+++ b/views/navbar.ejs
@@ -20,6 +20,12 @@
           </ul>
         </li>
       </ul>
+      <ul class="navbar-nav border-end pe-3 me-3">
+        <div class="form-check form-switch">
+          <input class="form-check-input order-2" type="checkbox" role="switch" id="darkModeSwitch">
+          <label class="form-check-label order-1" for="darkModeSwitch">🌓︎</label>
+        </div>
+      </ul>
       <ul class="navbar-nav">
         <li class="nav-item"><a class="nav-link" href="https://github.com/alseambusher/crontab-ui">Fork me on Github</a></li>
       </ul>