diff --git a/src/lib/components/layout/Navigation.svelte b/src/lib/components/layout/Navigation.svelte
index 8128894..a8c452a 100644
--- a/src/lib/components/layout/Navigation.svelte
+++ b/src/lib/components/layout/Navigation.svelte
@@ -31,6 +31,6 @@
 	{/if}
 	<div class="ml-auto flex items-center gap-1 sm:gap-2">
 		<LanguageToggle {color} />
-		<ThemeToggle />
+		<ThemeToggle size="sm" {color} />
 	</div>
 </nav>
diff --git a/src/lib/components/ui/theme-toggle/ThemeToggle.svelte b/src/lib/components/ui/theme-toggle/ThemeToggle.svelte
index d20e523..a9de3ea 100644
--- a/src/lib/components/ui/theme-toggle/ThemeToggle.svelte
+++ b/src/lib/components/ui/theme-toggle/ThemeToggle.svelte
@@ -2,13 +2,22 @@
 	import { themeStore } from '$lib/stores/theme.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Sun, Moon, Monitor } from 'lucide-svelte';
+    import IconButton from '../IconButton.svelte';
+
+	let {
+		color = $bindable(null),
+		size = 'sm',
+	}: {
+		color: string | null;
+		size?: 'sm' | 'md' | 'lg';
+	} = $props();
 
 	function toggle() {
 		themeStore.toggle();
 	}
 </script>
 
-<Button onclick={toggle} variant="ghost" size="icon" class="rounded-full">
+<IconButton onclick={toggle} {size} {color}>
 	{#if themeStore.current === 'light'}
 		<Sun size={20} />
 		<span class="sr-only">Light mode (click for dark)</span>
@@ -19,4 +28,4 @@
 		<Monitor size={20} />
 		<span class="sr-only">System mode (click for light)</span>
 	{/if}
-</Button>
+</IconButton>