diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index a76b5def80..f234b52d4c 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -11,14 +11,16 @@
 	let showPercentage = false;
 	let showRelevance = true;
 
+	let citationModal = null;
 	let showCitationModal = false;
 	let selectedCitation: any = null;
 	let isCollapsibleOpen = false;
 
 	export const showSourceModal = (sourceIdx) => {
 		if (citations[sourceIdx]) {
-			selectedCitation = citations[sourceIdx];
-			showCitationModal = true;
+			console.log('Showing citation modal for:', citations[sourceIdx]);
+			citationModal?.showCitation(citations[sourceIdx]);
+			// showCitationModal = true;
 		}
 	};
 
@@ -94,7 +96,14 @@
 	}
 </script>
 
-<CitationsModal bind:show={showCitationModal} {id} {citations} {showPercentage} {showRelevance} />
+<CitationsModal
+	bind:this={citationModal}
+	bind:show={showCitationModal}
+	{id}
+	{citations}
+	{showPercentage}
+	{showRelevance}
+/>
 
 {#if citations.length > 0}
 	{@const urlCitations = citations.filter((c) => c?.source?.name?.startsWith('http'))}
diff --git a/src/lib/components/chat/Messages/Citations/CitationsModal.svelte b/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
index 1f53c8e186..0e40827ac6 100644
--- a/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
+++ b/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
@@ -5,6 +5,7 @@
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import CitationModal from './CitationModal.svelte';
 
 	export let id = '';
 	export let show = false;
@@ -12,6 +13,14 @@
 	export let showPercentage = false;
 	export let showRelevance = true;
 
+	let showCitationModal = false;
+	let selectedCitation: any = null;
+
+	export const showCitation = (citation) => {
+		selectedCitation = citation;
+		showCitationModal = true;
+	};
+
 	const decodeString = (str: string) => {
 		try {
 			return decodeURIComponent(str);
@@ -21,6 +30,13 @@
 	};
 </script>
 
+<CitationModal
+	bind:show={showCitationModal}
+	citation={selectedCitation}
+	{showPercentage}
+	{showRelevance}
+/>
+
 <Modal size="lg" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">