diff --git a/templates/partials/header.html b/templates/partials/header.html
index b05a535..80d5dfc 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -15,6 +15,14 @@
               <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
               <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
             </a>
+            <div class="theme-toggle mx-4 lg:hidden">
+              <label for="lightModeSwitch" class="switch">
+                  <i class="fa-solid fa-sun" id="lightIcon"></i>
+                  <input type="checkbox" id="lightModeSwitch">
+                  <span class="slider"></span>
+                  <i class="fas fa-moon" id="darkIcon"></i>
+              </label>
+          </div>
             <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
@@ -166,6 +174,7 @@
             From: "opacity-100 scale-100"
             To: "opacity-0 scale-95"
         -->
+     
     <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
             <div class="nav_header shadow-xs h-screen divide-y-2 divide-gray-50">