diff --git a/frontend/index.html b/frontend/index.html
index c3f97ab..1acc006 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,7 +8,31 @@
     <title>LeetCode Leaderboard</title>
 </head>
 <body class="bg-gray-900 text-white p-5">
-    <!-- <canvas id="myChart" style="width:100%;max-width:600px"></canvas> -->
+    <button id="theme-toggle" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-200">
+        Toggle Dark/Light Mode
+    </button>
+    <script>
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const body = document.body;
+
+        // Check for saved user preference, if any, on load of the website
+        if (localStorage.getItem('theme') === 'light') {
+            body.classList.remove('bg-gray-900', 'text-white');
+            body.classList.add('bg-white', 'text-black');
+        }
+
+        themeToggleBtn.addEventListener('click', () => {
+            if (body.classList.contains('bg-gray-900')) {
+                body.classList.remove('bg-gray-900', 'text-white');
+                body.classList.add('bg-white', 'text-black');
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.remove('bg-white', 'text-black');
+                body.classList.add('bg-gray-900', 'text-white');
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+    </script>
     <div class="container mx-auto my-10">
         <div class="">
             <!-- Leaderboard -->
@@ -91,4 +115,5 @@ <h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
     <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+
