diff --git a/src/lib/components/ExpandNavigation.svelte b/src/lib/components/ExpandNavigation.svelte
index 45aa691f1e0..ad2e2e8133a 100644
--- a/src/lib/components/ExpandNavigation.svelte
+++ b/src/lib/components/ExpandNavigation.svelte
@@ -10,7 +10,7 @@
 
 <button
 	onclick={onClick}
-	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
+	class="{classNames} group flex h-16 w-6 flex-col items-end justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
 		? '*:bg-gray-200/70 dark:*:bg-gray-800'
 		: '*:bg-gray-200 dark:*:bg-gray-700'}"
 	name="sidebar-toggle"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1d5950b864..9d33577b949 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -241,18 +241,12 @@
 <BackgroundGenerationPoller />
 
 <div
-	class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
-		? 'md:grid-cols-[290px,1fr]'
-		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
+	class={[
+		"fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-sm",
+		isNavCollapsed ? "md:grid-cols-[0px,1fr]" : "md:grid-cols-[290px,1fr]",
+		"transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]",
+	]}
 >
-	<ExpandNavigation
-		isCollapsed={isNavCollapsed}
-		onClick={() => (isNavCollapsed = !isNavCollapsed)}
-		classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
-			? 'left-[290px]'
-			: 'left-0'} *:transition-transform"
-	/>
-
 	{#if canShare}
 		<button
 			type="button"
@@ -273,17 +267,24 @@
 			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
 		/>
 	</MobileNav>
-	<nav
-		class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px] max-md:hidden"
-	>
-		<NavMenu
-			{conversations}
-			user={data.user}
-			canLogin={!data.user && data.loginEnabled}
-			ondeleteConversation={(id) => deleteConversation(id)}
-			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+	<div class="relative max-h-screen max-md:hidden">
+		<nav
+			class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px]"
+		>
+			<NavMenu
+				{conversations}
+				user={data.user}
+				canLogin={!data.user && data.loginEnabled}
+				ondeleteConversation={(id) => deleteConversation(id)}
+				oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+			/>
+		</nav>
+		<ExpandNavigation
+			isCollapsed={isNavCollapsed}
+			onClick={() => (isNavCollapsed = !isNavCollapsed)}
+			classNames="absolute inset-y-0 -right-2 z-10 my-auto *:transition-transform"
 		/>
-	</nav>
+	</div>
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}