diff --git a/css/index.css b/css/index.css
index d07f9f869..28b64ec2f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -12,42 +12,45 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
-/* Default Light Mode */
+/* Default Dark Mode */
 body {
-  background-color: #ffffff;
-  color: #000000;
-}
-
-body .semigray {
-  color: #424242 !important;
-}
-
-body .semigray2 {
-  color: #424242 !important;
-}
-
-body .icon {
-  fill: #424242 !important;
-}
-
-/* Dark Mode */
-body.dark-mode {
   background-color: #121212;
   color: #ffffff;
 }
 
-body.dark-mode .semigray {
+body .semigray {
   color: #e5e7eb !important;
 }
 
-body.dark-mode .semigray2 {
+body .semigray2 {
   color: #d1d5db !important;
 }
 
-body.dark-mode .icon {
+body .icon {
   fill: #ffffff !important;
 }
 
+/* lightMode */
+body.light-mode {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body.light-mode .semigray {
+  
+  color: #424242 !important;
+}
+
+body.light-mode .semigray2 {
+  
+  color: #424242 !important;
+}
+
+body.light-mode .icon {
+  
+  fill: #424242 !important;
+}
+
 .double_bg {
   background-color: rgb(100 100 100 / 0.2);
 }
diff --git a/static/js/custom.js b/static/js/custom.js
index 8f0e34201..9bc222791 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -195,33 +195,33 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
 
 
 // Get the toggle switch and the logo element
-const toggleSwitch = document.getElementById('darkModeSwitch');
+const toggleSwitch = document.getElementById('lightModeSwitch');
 const siteLogo = document.getElementById('site-logo');
 
 // Apply the saved theme on load
 document.addEventListener('DOMContentLoaded', () => {
   const savedTheme = localStorage.getItem('theme');
-  if (savedTheme === 'dark') {
-    document.body.classList.add('dark-mode');
+  if (savedTheme === 'light') {
+    document.body.classList.add('light-mode');
     toggleSwitch.checked = true;
-    siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
-  } else {
-    document.body.classList.remove('dark-mode');
-    toggleSwitch.checked = false;
     siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
+  } else {
+    document.body.classList.remove('light-mode');
+    toggleSwitch.checked = false;
+    siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
   }
 });
 
-// Toggle dark mode
+// Toggle light mode
 toggleSwitch.addEventListener('change', () => {
   if (toggleSwitch.checked) {
-    document.body.classList.add('dark-mode');
-    localStorage.setItem('theme', 'dark');
-    siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
-  } else {
-    document.body.classList.remove('dark-mode');
+    document.body.classList.add('light-mode');
     localStorage.setItem('theme', 'light');
     siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
+  } else {
+    document.body.classList.remove('light-mode');
+    localStorage.setItem('theme', 'dark');
+    siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
   }
 });
 
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 4199ffa0a..6b4e25136 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -114,8 +114,8 @@
                     </li> 
                   </ul>  -->
                   <button class="theme-toggle px-2 mx-2">
-                    <label for="darkModeSwitch">Dark Mode:</label>
-                    <input type="checkbox" id="darkModeSwitch">
+                    <label for="lightModeSwitch">Dark Mode:</label>
+                    <input type="checkbox" id="lightModeSwitch">
                   </button>