diff --git a/app/src/lib/components/RootNav.svelte b/app/src/lib/components/RootNav.svelte
index 99df60e..cb2a3bd 100644
--- a/app/src/lib/components/RootNav.svelte
+++ b/app/src/lib/components/RootNav.svelte
@@ -2,10 +2,10 @@
 	import Logo from './Logo.svelte';
 	import SearchSlideSheet from './SlideSheet.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { Button } from './ui/button';
 	import { getAppContext } from '$lib/stores/appContext.svelte';
 	import { invalidateAll } from '$app/navigation';
 	import { mediaBreakPoints$ } from '@/utils/mediaBreakpoints';
+	import SidebarToggleButton from './SidebarToggleButton.svelte';
 
 	export let sessionId: string;
 
@@ -28,20 +28,9 @@
 					</svelte-fragment>
 				</SearchSlideSheet>
 			</div>
-		{/if}
-
-		{#if $mdAndUp}
+		{:else}
 			<div class="pl-3 block">
-				<Button variant="ghost" class="px-2" on:click={() => openSettingsDrawer$.update((v) => !v)}>
-					<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
-						<path
-							fill="currentColor"
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
-						></path>
-					</svg>
-				</Button>
+				<SidebarToggleButton on:click={() => openSettingsDrawer$.update((v) => !v)} />
 			</div>
 		{/if}
 
diff --git a/app/src/lib/components/SidebarToggleButton.svelte b/app/src/lib/components/SidebarToggleButton.svelte
new file mode 100644
index 0000000..8c1501b
--- /dev/null
+++ b/app/src/lib/components/SidebarToggleButton.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { Button } from './ui/button';
+	export let builders = undefined;
+</script>
+
+<Button {builders} variant="ghost" class="px-2" on:click>
+	<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
+		<path
+			fill="currentColor"
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
+		></path>
+	</svg>
+</Button>
diff --git a/app/src/lib/components/SlideSheet.svelte b/app/src/lib/components/SlideSheet.svelte
index 19d4772..c1584f5 100644
--- a/app/src/lib/components/SlideSheet.svelte
+++ b/app/src/lib/components/SlideSheet.svelte
@@ -1,21 +1,12 @@
 <script>
 	import * as Sheet from './ui/sheet';
-	import { Button } from './ui/button';
+	import SidebarToggleButton from './SidebarToggleButton.svelte';
 	export let open = false;
 </script>
 
 <Sheet.Root bind:open closeOnOutsideClick>
 	<Sheet.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="ghost" class="px-2">
-			<svg viewBox="0 0 24 24" fill="none" class="text-icon-secondary h-6">
-				<path
-					fill="currentColor"
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H3C2.44772 19 2 18.5523 2 18Z"
-				></path>
-			</svg>
-		</Button>
+		<SidebarToggleButton builders={[builder]} />
 	</Sheet.Trigger>
 	<Sheet.Content side="left" class="bg-gray-900 border-muted">
 		<Sheet.Header class="mb-1 text-left">