diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index de1eb0131..51b90892b 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -283,6 +283,16 @@
 				await goto('/');
 			}
 		}
+
+		showControls.subscribe(async (value) => {
+			if (controlPane) {
+				if (value) {
+					controlPane.resize(parseInt(localStorage.getItem('chat-controls-size') || '35'));
+				} else {
+					controlPane.resize(0);
+				}
+			}
+		});
 	});
 
 	onDestroy(() => {
@@ -1764,7 +1774,6 @@
 			bind:selectedModels
 			bind:showModelSelector
 			shareEnabled={messages.length > 0}
-			{controlPane}
 			{chat}
 			{initNewChat}
 		/>
@@ -1847,8 +1856,8 @@
 							{messages}
 							{submitPrompt}
 							{stopResponse}
-							on:call={() => {
-								showControls.set(true);
+							on:call={async () => {
+								await showControls.set(true);
 							}}
 						/>
 					</div>
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 925f19aa4..12a9905b7 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -140,17 +140,19 @@
 						: 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-800'}  rounded-lg z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
 				>
 					{#if $showCallOverlay}
-						<CallOverlay
-							bind:files
-							{submitPrompt}
-							{stopResponse}
-							{modelId}
-							{chatId}
-							{eventTarget}
-							on:close={() => {
-								showControls.set(false);
-							}}
-						/>
+						<div class="w-full h-full flex justify-center">
+							<CallOverlay
+								bind:files
+								{submitPrompt}
+								{stopResponse}
+								{modelId}
+								{chatId}
+								{eventTarget}
+								on:close={() => {
+									showControls.set(false);
+								}}
+							/>
+						</div>
 					{:else if $showOverview}
 						<Overview
 							{history}
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 8ac4c6027..7c6c11369 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -29,7 +29,6 @@
 	export let initNewChat: Function;
 	export let title: string = $WEBUI_NAME;
 	export let shareEnabled: boolean = false;
-	export let controlPane;
 
 	export let chat;
 	export let selectedModels;
@@ -112,16 +111,6 @@
 							class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 							on:click={async () => {
 								await showControls.set(!$showControls);
-
-								if (controlPane) {
-									if ($showControls) {
-										controlPane.resize(
-											parseInt(localStorage.getItem('chat-controls-size') || '35')
-										);
-									} else {
-										controlPane.resize(0);
-									}
-								}
 							}}
 							aria-label="Controls"
 						>