diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 14d22d5b66..740a8981fd 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -49,6 +49,7 @@
 	export let topPadding = false;
 	export let bottomPadding = false;
 	export let autoScroll;
+	export let messagesContainerId = 'messages-container';
 
 	export let onSelect = (e) => {};
 	export let onInsertToNote: ((content: string) => void) | null = null;
@@ -56,14 +57,18 @@
 	export let messagesCount: number | null = 8;
 	let messagesLoading = false;
 
+	const getMessagesContainer = () => document.getElementById(messagesContainerId);
+
 	onDestroy(() => {
 		cancelAnimationFrame(pendingRebuild);
 	});
 
 	const loadMoreMessages = async () => {
 		// scroll slightly down to disable continuous loading
-		const element = document.getElementById('messages-container');
-		element.scrollTop = element.scrollTop + 100;
+		const element = getMessagesContainer();
+		if (element) {
+			element.scrollTop = element.scrollTop + 100;
+		}
 
 		messagesLoading = true;
 		messagesCount += 8;
@@ -135,7 +140,7 @@
 	}
 
 	const scrollToBottom = () => {
-		const element = document.getElementById('messages-container');
+		const element = getMessagesContainer();
 		if (element) {
 			element.scrollTop = element.scrollHeight;
 
@@ -215,8 +220,10 @@
 
 		// Optional auto-scroll
 		if ($settings?.scrollOnBranchChange ?? true) {
-			const element = document.getElementById('messages-container');
-			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+			const element = getMessagesContainer();
+			autoScroll = element
+				? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
+				: false;
 
 			setTimeout(() => {
 				scrollToBottom();
@@ -262,8 +269,10 @@
 		await tick();
 
 		if ($settings?.scrollOnBranchChange ?? true) {
-			const element = document.getElementById('messages-container');
-			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+			const element = getMessagesContainer();
+			autoScroll = element
+				? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
+				: false;
 
 			setTimeout(() => {
 				scrollToBottom();
@@ -313,8 +322,10 @@
 		await tick();
 
 		if ($settings?.scrollOnBranchChange ?? true) {
-			const element = document.getElementById('messages-container');
-			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+			const element = getMessagesContainer();
+			autoScroll = element
+				? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
+				: false;
 
 			setTimeout(() => {
 				scrollToBottom();
@@ -485,11 +496,13 @@
 
 	const triggerScroll = () => {
 		if (autoScroll) {
-			const element = document.getElementById('messages-container');
-			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
-			setTimeout(() => {
-				scrollToBottom();
-			}, 100);
+			const element = getMessagesContainer();
+			if (element) {
+				autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+				setTimeout(() => {
+					scrollToBottom();
+				}, 100);
+			}
 		}
 	};
 </script>
diff --git a/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte b/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
index 0d663479cc..e4f964b654 100644
--- a/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
+++ b/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
@@ -26,6 +26,8 @@
 	let requestedChatId = '';
 	let loadToken = 0;
 
+	$: messagesContainerId = `chat-hover-preview-messages-${chatId}`;
+
 	const scrollPreviewToBottom = async () => {
 		await tick();
 		requestAnimationFrame(() => {
@@ -103,6 +105,7 @@
 				</div>
 			</div>
 			<div
+				id={messagesContainerId}
 				bind:this={messagesContainerElement}
 				class="max-h-[min(15rem,calc(100vh-4rem))] overflow-y-auto bg-white scrollbar-hover @container dark:bg-gray-850"
 			>
@@ -130,6 +133,7 @@
 						atSelectedModel={null}
 						{history}
 						autoScroll={true}
+						{messagesContainerId}
 						messagesCount={8}
 						sendMessage={() => {}}
 						continueResponse={() => {}}