diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
index 71ba496..540f713 100644
--- a/src/components/Drawer.astro
+++ b/src/components/Drawer.astro
@@ -30,6 +30,20 @@ const subpath = pathname.match(/[^/]+/g);
       ))
     }
   </nav>
+  <div class="mt-5 flex">
+    <button
+      id="drawer-theme-button"
+      aria-label="Toggle light and dark theme"
+      class="flex items-center space-x-2 rounded-full border border-black/10 bg-transparent stroke-current p-2 px-4 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:stroke-black dark:border-white/25 dark:hover:bg-white/20 hover:dark:stroke-white"
+    >
+      <Icon name="sun" class="block size-6 dark:hidden" />
+      <Icon name="moon" class="hidden size-6 dark:block" />
+      <span class="text-sm text-black dark:text-white">
+        <span class="block dark:hidden">Light</span>
+        <span class="hidden dark:block">Dark</span>
+      </span>
+    </button>
+  </div>
 </div>
 
 <style>