diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 53292027d..a4a5ffa21 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -221,14 +221,13 @@
 			scrollToBottom();
 		}, 100);
 	};
-	
-	const deleteMessage = async (messageId) => {
+
+	const deleteMessagePair = async (messageId) => {
 		history.messages[messageId].deleted = true;
 		history.messages[history.messages[messageId].childrenIds[0]].deleted = true;
-		updateChatById(localStorage.token, chatId, {
-			messages: messages,
-			history: history
-		});
+
+		await updateChatById(localStorage.token, chatId, { history });
+		await chats.set(await getChatList(localStorage.token));
 	};
 </script>
 
@@ -247,7 +246,7 @@
 						>
 							{#if message.role === 'user'}
 								<UserMessage
-									on:delete={() => deleteMessage(message.id)}
+									on:delete={() => deleteMessagePair(message.id)}
 									user={$user}
 									{message}
 									isFirstMessage={messageIdx === 0}
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 7dfca9e36..ca1cff59d 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -45,6 +45,10 @@
 		edit = false;
 		editedContent = '';
 	};
+
+	const deleteMessageHandler = async () => {
+		dispatch('delete', message.id);
+	};
 </script>
 
 <div class=" flex w-full">
@@ -288,7 +292,9 @@
 						{#if !isFirstMessage}
 						<button
 							class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition"
-							on:click={() => dispatch('delete', { messageId: message.id })}
+							on:click={() => {
+								deleteMessageHandler();
+							}}
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"