diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index c6b839b6..a8a2bfff 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+	import Theme from './theme.svelte';
+
 	interface Link {
 		title: string;
 		href: string;
@@ -54,6 +56,7 @@
 		></label>
 	<input class="hidden" type="checkbox" id="menu-toggle" />
 
+	<Theme />
 	<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
 		<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
 			{#each links as { title, href, icon }}
diff --git a/src/lib/components/theme.svelte b/src/lib/components/theme.svelte
index bbf388d0..b347fbe2 100644
--- a/src/lib/components/theme.svelte
+++ b/src/lib/components/theme.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <select
-	class="select select-bordered w-full max-w-xs"
+	class="select select-bordered"
 	bind:value={selectedTheme}
 	on:change={() => setTheme(selectedTheme)}>
 	{#each themes as theme}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7e16bcbf..288d7d66 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -4,7 +4,6 @@
 	import { onMount } from 'svelte';
 	import { loadingStateStore } from '$lib/util/loading';
 	import { themeStore } from '$lib/util/theme';
-	import Theme from '$lib/components/theme.svelte';
 
 	// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
 	// Then move it into src and vite will bundle it automatically.
@@ -25,7 +24,6 @@
 </script>
 
 <main class="h-screen" data-theme={$themeStore}>
-	<Theme />
 	<slot />
 </main>