diff --git a/assets/asset 43.png b/assets/asset 43.png
new file mode 100644
index 000000000..e86aa0039
Binary files /dev/null and b/assets/asset 43.png differ
diff --git a/assets/asset 44.png b/assets/asset 44.png
new file mode 100644
index 000000000..a698922be
Binary files /dev/null and b/assets/asset 44.png differ
diff --git a/assets/asset 45.png b/assets/asset 45.png
new file mode 100644
index 000000000..45ad82033
Binary files /dev/null and b/assets/asset 45.png differ
diff --git a/index.html b/index.html
index 32ae52c65..18261db11 100644
--- a/index.html
+++ b/index.html
@@ -123,6 +123,9 @@
                 >Doubt Engine</a
               >
             </li>
+            <li>
+              <img src="./assets/asset 43.png" id="mode-switch-icon" />
+            </li>
           </ul>
         </div>
         <div class="hamburger">
@@ -559,5 +562,6 @@ <h3>
       }
     </script>
     <script src="scroll-reveal.js"></script>
+    <script src="mode-switch.js"></script>
   </body>
 </html>
diff --git a/mode-switch.js b/mode-switch.js
new file mode 100644
index 000000000..d59324043
--- /dev/null
+++ b/mode-switch.js
@@ -0,0 +1,44 @@
+var icon = document.getElementById("mode-switch-icon");
+
+icon.onclick = function () {
+    var footer = document.querySelector("footer");
+    var tables = document.querySelectorAll(".wrapper .table");
+    var linksTitle = document.querySelectorAll(".links-title");
+    var copyright = document.querySelector(".copyright");
+    var copyrightH3 = document.querySelector(".copyright h3");
+    var navbarLogo = document.querySelector("navbar img"); // assuming the img is directly under navbar
+
+    document.body.classList.toggle("dark-mode");
+    document.documentElement.style.setProperty("--primary-text-color", "#ffffff");
+    document.documentElement.style.setProperty("--secondary-text-color", "#ffffff");
+
+    if (document.body.classList.contains("dark-mode")) {
+        document.body.style.backgroundColor = "#111111";
+        document.documentElement.style.setProperty("--primary-text-color", "#ffffff");
+        document.documentElement.style.setProperty("--secondary-text-color", "#ffffff");
+        footer.style.backgroundColor = "#242525";
+        tables.forEach(function(table) {
+            table.style.backgroundColor = "#242426";
+        });
+        linksTitle.forEach(function(link) {
+            link.style.color = "#ffffff";
+        });
+        copyright.style.backgroundColor = "#232325";
+        copyrightH3.style.color = "#ffffff";
+        navbarLogo.src = "./assets/asset 45.png";
+    } else {
+        document.body.style.backgroundColor = "#ffffff";
+        document.documentElement.style.setProperty("--primary-text-color", "#183b56");
+        document.documentElement.style.setProperty("--secondary-text-color", "#577592");
+        footer.style.backgroundColor = "#ebf2fa";
+        tables.forEach(function(table) {
+            table.style.backgroundColor = "#e9ebff";
+        });
+        linksTitle.forEach(function(link) {
+            link.style.color = "rgb(33, 28, 28)";
+        });
+        copyright.style.backgroundColor = "#d6d9fd";
+        copyrightH3.style.color = "rgb(33, 28, 28)";
+        navbarLogo.src = "./assets/asset 41.png";
+    }
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index 9c818711b..93b91975f 100644
--- a/style.css
+++ b/style.css
@@ -768,3 +768,8 @@ table .ribbon::after {
         transform: translateY(3px);
     }
 }
+
+#mode-switch-icon{
+	width: 22px;
+	cursor: pointer;
+}
\ No newline at end of file