diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index 3150e63525..99cfaf5240 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -18,6 +18,13 @@
 	let selectedCitation: any = null;
 	let isCollapsibleOpen = false;
 
+	export const showSourceModal = (sourceIdx) => {
+		if (citations[sourceIdx]) {
+			selectedCitation = citations[sourceIdx];
+			showCitationModal = true;
+		}
+	};
+
 	function calculateShowRelevance(sources: any[]) {
 		const distances = sources.flatMap((citation) => citation.distances ?? []);
 		const inRange = distances.filter((d) => d !== undefined && d >= -1 && d <= 1).length;
diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index feaa3501cb..4bc0ee60d5 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -139,15 +139,15 @@
 		{preview}
 		{done}
 		{topPadding}
-		sourceIds={(sources ?? []).reduce((acc, s) => {
+		sourceIds={(sources ?? []).reduce((acc, source) => {
 			let ids = [];
-			s.document.forEach((document, index) => {
+			source.document.forEach((document, index) => {
 				if (model?.info?.meta?.capabilities?.citations == false) {
 					ids.push('N/A');
 					return ids;
 				}
 
-				const metadata = s.metadata?.[index];
+				const metadata = source.metadata?.[index];
 				const id = metadata?.source ?? 'N/A';
 
 				if (metadata?.name) {
@@ -158,7 +158,7 @@
 				if (id.startsWith('http://') || id.startsWith('https://')) {
 					ids.push(id);
 				} else {
-					ids.push(s?.source?.name ?? id);
+					ids.push(source?.source?.name ?? id);
 				}
 
 				return ids;
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 5c4ae8b77a..5055cba674 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -140,6 +140,7 @@
 	export let readOnly = false;
 	export let topPadding = false;
 
+	let citationsElement: HTMLDivElement;
 	let buttonsContainerElement: HTMLDivElement;
 	let showDeleteConfirm = false;
 
@@ -820,29 +821,9 @@
 										}}
 										onSourceClick={async (id, idx) => {
 											console.log(id, idx);
-											let sourceButton = document.getElementById(`source-${message.id}-${idx}`);
-											const sourcesCollapsible = document.getElementById(
-												`collapsible-${message.id}`
-											);
 
-											if (sourceButton) {
-												sourceButton.click();
-											} else if (sourcesCollapsible) {
-												// Open sources collapsible so we can click the source button
-												sourcesCollapsible
-													.querySelector('div:first-child')
-													.dispatchEvent(new PointerEvent('pointerup', {}));
-
-												// Wait for next frame to ensure DOM updates
-												await new Promise((resolve) => {
-													requestAnimationFrame(() => {
-														requestAnimationFrame(resolve);
-													});
-												});
-
-												// Try clicking the source button again
-												sourceButton = document.getElementById(`source-${message.id}-${idx}`);
-												sourceButton && sourceButton.click();
+											if (citationsElement) {
+												citationsElement?.showSourceModal(idx - 1);
 											}
 										}}
 										onAddMessages={({ modelId, parentId, messages }) => {
@@ -863,7 +844,11 @@
 								{/if}
 
 								{#if (message?.sources || message?.citations) && (model?.info?.meta?.capabilities?.citations ?? true)}
-									<Citations id={message?.id} sources={message?.sources ?? message?.citations} />
+									<Citations
+										bind:this={citationsElement}
+										id={message?.id}
+										sources={message?.sources ?? message?.citations}
+									/>
 								{/if}
 
 								{#if message.code_executions}