diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/MarkdownTokens.svelte
similarity index 89%
rename from src/lib/components/chat/Messages/Markdown.svelte
rename to src/lib/components/chat/Messages/MarkdownTokens.svelte
index e43907530..fd86a586c 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/MarkdownTokens.svelte
@@ -1,28 +1,14 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { marked } from 'marked';
 	import type { Token } from 'marked';
-
-	import {
-		replaceTokens,
-		revertSanitizedResponseContent,
-		sanitizeResponseContent,
-		unescapeHtml
-	} from '$lib/utils';
+	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
 	import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
+	import { onMount } from 'svelte';
 	import MarkdownInlineTokens from '$lib/components/chat/Messages/MarkdownInlineTokens.svelte';
-	import { user } from '$lib/stores';
 
 	export let id: string;
 	export let tokens: Token[];
-	export let model = null;
-	export let content = '';
 	export let top = true;
 
-	$: tokens = marked.lexer(
-		replaceTokens(sanitizeResponseContent(content), model?.name, $user?.name)
-	);
-
 	const headerComponent = (depth: number) => {
 		return 'h' + depth;
 	};
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 0f96da729..a0cadaf27 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
+	import { marked } from 'marked';
 	import tippy from 'tippy.js';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
 	import 'katex/dist/katex.min.css';
@@ -37,7 +38,7 @@
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';
 	import Sparkles from '$lib/components/icons/Sparkles.svelte';
-	import Markdown from './Markdown.svelte';
+	import MarkdownTokens from './MarkdownTokens.svelte';
 
 	export let message;
 	export let siblings;
@@ -76,6 +77,10 @@
 
 	let selectedCitation = null;
 
+	$: tokens = marked.lexer(
+		replaceTokens(sanitizeResponseContent(message?.content), model?.name, $user?.name)
+	);
+
 	$: if (message) {
 		renderStyling();
 	}
@@ -495,8 +500,8 @@
 									<!-- always show message contents even if there's an error -->
 									<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->
 
-									{#key message.id}
-										<Markdown id={message.id} {model} content={message.content} />
+									{#key tokens}
+										<MarkdownTokens id={message.id} {tokens} />
 									{/key}
 								{/if}