diff --git a/src/lib/components/modeSwitcher.svelte b/src/lib/components/modeSwitcher.svelte
index 04e986c..061d0e5 100644
--- a/src/lib/components/modeSwitcher.svelte
+++ b/src/lib/components/modeSwitcher.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button/index';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import Moon from 'lucide-svelte/icons/moon-star';
   import Sun from 'lucide-svelte/icons/sun';
   import { toggleMode } from 'mode-watcher';
 </script>
 
-<Button on:click={toggleMode} variant="secondary" size="icon" class="ml-auto">
-  <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-  <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-  <span class="sr-only">Toggle theme</span>
-</Button>
+<Tooltip.Root>
+  <Tooltip.Trigger class="ml-auto">
+    <Button on:click={toggleMode} variant="secondary" size="icon">
+      <Sun class="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon class="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  </Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>Toggle theme</p>
+  </Tooltip.Content>
+</Tooltip.Root>