diff --git a/public/css/style.css b/public/css/style.css
index c2855b7..368d0f4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -16,6 +16,11 @@
   max-width: 100rem;
 }
 
+.dark-mode {
+  background-color: #121212;
+  color: #f5f5f5;
+}
+
 h6 {
   font-size: 1rem;
 }
@@ -61,6 +66,11 @@ html {
   transition: 0.5s;
 }
 
+.get-started-dark-mode {
+  background-color: #f5f5f5;
+  color: #121212;
+}
+
 @keyframes animate {
   0% {
     background-position-y: 0;
diff --git a/views/home.pug b/views/home.pug
index 4cc5a70..d4c856f 100644
--- a/views/home.pug
+++ b/views/home.pug
@@ -7,6 +7,19 @@ block content
       h2 Get <span class="name">Interactive</span> Beautiful Insights on what you listen ( On Spotify )!
 
     a.get-started(href="/login") GET STARTED
+    button.dark-mode-button(onclick="toggleDarkMode()") Dark Mode
+    script.
+      function toggleDarkMode() {
+        var body = document.body;
+        var button = document.querySelector('.dark-mode-button');
+        if (body.classList.contains('dark-mode')) {
+          body.classList.remove('dark-mode');
+          button.classList.remove('get-started-dark-mode');
+        } else {
+          body.classList.add('dark-mode');
+          button.classList.add('get-started-dark-mode');
+        }
+      }
 
     h5 P.S. If the graphs are a bit messed up in size or are blurred, please <span class="name">refresh</span> the page and <span class="name">adjust the browser zoom level.</span>