diff --git a/content/header/index.md b/content/header/index.md
index 96e9d970f..67194b90d 100644
--- a/content/header/index.md
+++ b/content/header/index.md
@@ -3,7 +3,8 @@ title: "Header"
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "images/new_logo_tft_light.png"
+  logoPathLight: "images/new_logo_tft_light.png"
+  logoPathDark: "images/new_logo_tft_dark.png"
 
 ---
 
diff --git a/static/js/custom.js b/static/js/custom.js
index 481a7d2b7..adbbbfcb9 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -194,36 +194,32 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
 
 
 
+// Get the toggle switch and the logo element
+const toggleSwitch = document.getElementById('darkModeSwitch');
+const siteLogo = document.getElementById('site-logo');
+
+// Apply the saved theme on load
 document.addEventListener('DOMContentLoaded', () => {
-  const toggleSwitch = document.getElementById('darkModeSwitch');
-  const logo = document.getElementById('logo');
-
-  // Log the current state for debugging
-  console.log('Light logo:', logo.getAttribute('data-light-logo'));
-  console.log('Dark logo:', logo.getAttribute('data-dark-logo'));
-
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'dark') {
-      document.body.classList.add('dark-mode');
-      toggleSwitch.checked = true;
-      logo.src = logo.getAttribute('data-dark-logo');
-      console.log('Loaded dark mode with dark logo.');
+    document.body.classList.add('dark-mode');
+    toggleSwitch.checked = true;
+    siteLogo.src = siteLogo.getAttribute('data-dark');
   } else {
-      logo.src = logo.getAttribute('data-light-logo');
-      console.log('Loaded light mode with light logo.');
+    document.body.classList.remove('dark-mode');
+    siteLogo.src = siteLogo.getAttribute('data-light');
+  }
+});
+
+// Toggle dark mode
+toggleSwitch.addEventListener('change', () => {
+  if (toggleSwitch.checked) {
+    document.body.classList.add('dark-mode');
+    localStorage.setItem('theme', 'dark');
+    siteLogo.src = siteLogo.getAttribute('data-dark');
+  } else {
+    document.body.classList.remove('dark-mode');
+    localStorage.setItem('theme', 'light');
+    siteLogo.src = siteLogo.getAttribute('data-light');
   }
-
-  toggleSwitch.addEventListener('change', () => {
-      if (toggleSwitch.checked) {
-          document.body.classList.add('dark-mode');
-          localStorage.setItem('theme', 'dark');
-          logo.src = logo.getAttribute('data-dark-logo');
-          console.log('Switched to dark mode. Updated logo to dark.');
-      } else {
-          document.body.classList.remove('dark-mode');
-          localStorage.setItem('theme', 'light');
-          logo.src = logo.getAttribute('data-light-logo');
-          console.log('Switched to light mode. Updated logo to light.');
-      }
-  });
 });
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 2dced2bcf..78b988edd 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -6,16 +6,15 @@
         <div class="relative z-50">
         <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
           <a href="{{ get_url(path='/') }}" class="flex">
-            <img
-                id="logo"
-                class="w-36 h-auto"
-                style="max-width: none;"
-                src="{{ get_url(path=section.extra.logoPathLight) }}"
-                data-light-logo="{{ get_url(path=section.extra.logoPathLight) }}"
-                data-dark-logo="{{ get_url(path=section.extra.logoPathDark) }}"
-                alt="ThreeFold Logo"
-            />
-        </a>
+            <img 
+              id="site-logo" 
+              class="w-36 h-auto" 
+              style="max-width: none;" 
+              src="{{ get_url(path=section.extra.logoPathLight) }}" 
+              data-light="{{ get_url(path=section.extra.logoPathLight) }}" 
+              data-dark="{{ get_url(path=section.extra.logoPathDark) }}" 
+              alt="ThreeFold Logo" />
+          </a>
         
         </a>