diff --git a/src/lib/components/chat/Messages/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown.svelte
similarity index 89%
rename from src/lib/components/chat/Messages/MarkdownTokens.svelte
rename to src/lib/components/chat/Messages/Markdown.svelte
index fd86a586c..e43907530 100644
--- a/src/lib/components/chat/Messages/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -1,14 +1,28 @@
 <script lang="ts">
-	import type { Token } from 'marked';
-	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
-	import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
 	import { onMount } from 'svelte';
+	import { marked } from 'marked';
+	import type { Token } from 'marked';
+
+	import {
+		replaceTokens,
+		revertSanitizedResponseContent,
+		sanitizeResponseContent,
+		unescapeHtml
+	} from '$lib/utils';
+	import CodeBlock from '$lib/components/chat/Messages/CodeBlock.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 a0cadaf27..0f96da729 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1,7 +1,6 @@
 <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';
@@ -38,7 +37,7 @@
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';
 	import Sparkles from '$lib/components/icons/Sparkles.svelte';
-	import MarkdownTokens from './MarkdownTokens.svelte';
+	import Markdown from './Markdown.svelte';
 
 	export let message;
 	export let siblings;
@@ -77,10 +76,6 @@
 
 	let selectedCitation = null;
 
-	$: tokens = marked.lexer(
-		replaceTokens(sanitizeResponseContent(message?.content), model?.name, $user?.name)
-	);
-
 	$: if (message) {
 		renderStyling();
 	}
@@ -500,8 +495,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 tokens}
-										<MarkdownTokens id={message.id} {tokens} />
+									{#key message.id}
+										<Markdown id={message.id} {model} content={message.content} />
 									{/key}
 								{/if}