diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 03dee5594a..869c8459cd 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -78,7 +78,17 @@
 		<div
 			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
 		>
-			<CallOverlay bind:files {submitPrompt} {stopResponse} {modelId} {chatId} {eventTarget} />
+			<CallOverlay
+				bind:files
+				{submitPrompt}
+				{stopResponse}
+				{modelId}
+				{chatId}
+				{eventTarget}
+				on:close={() => {
+					show = false;
+				}}
+			/>
 		</div>
 	</div>
 {:else}
diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index 7995677306..c8ec20db78 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { config, models, settings, showCallOverlay } from '$lib/stores';
-	import { onMount, tick, getContext, onDestroy } from 'svelte';
+	import { onMount, tick, getContext, onDestroy, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	import {
 		blobToFile,
@@ -923,6 +925,7 @@
 						stopAudioStream();
 						stopVideoStream();
 						showCallOverlay.set(false);
+						dispatch('close');
 					}}
 					type="button"
 				>