diff --git a/index.html b/index.html
index c149619..e169e19 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
   </a>
 </div>
 
+<button id="dark" onclick="myFunction()">Dark Mode</button>
 <button id="notifications">Notifications</button>
 <button id="location">Location</button>
 <button id="camera">Camera</button>
diff --git a/index.js b/index.js
index 10f0dda..aca44d4 100644
--- a/index.js
+++ b/index.js
@@ -658,3 +658,18 @@ window.addEventListener("load", function() {
   }
 
 });
+
+function myFunction() {
+  const button = document.getElementById('dark');
+  const toggle = document.getElementById('toggle');
+  toggle.style.backgroundColor = "#EEEEEE";
+  var element = document.body;
+  element.classList.toggle("dark-mode");
+  if(button.innerHTML === "Light Mode") {
+      button.innerHTML = "Dark Mode";
+  } 
+  else if(button.innerHTML === "Dark Mode") {
+      button.innerHTML = "Light Mode";
+  }
+}
+
diff --git a/style.css b/style.css
index 258ecfb..1ca79da 100644
--- a/style.css
+++ b/style.css
@@ -180,3 +180,17 @@ a#toggle:hover {
   color: rgb(219, 68, 55);
   font-size: 2em;
 }
+
+#dark {
+  position:fixed;
+  left: 1px;
+  top: 1px;
+  width: 80px;
+  height: 35px;
+  font-size: smaller;
+}
+
+.dark-mode {
+  background-color: #000000c4;
+  color: white;
+}
\ No newline at end of file