diff --git a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
index 4dfb9f2c5b..be90a3a007 100644
--- a/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
+++ b/src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
@@ -1,10 +1,22 @@
 <script lang="ts">
-	import katex from 'katex';
-	import 'katex/contrib/mhchem';
-	import 'katex/dist/katex.min.css';
+	import type { renderToString as katexRenderToString } from 'katex';
+	import { onMount } from 'svelte';
 
 	export let content: string;
 	export let displayMode: boolean = false;
+
+	let renderToString: typeof katexRenderToString | null = null;
+
+	onMount(async () => {
+		const [katex] = await Promise.all([
+			import('katex'),
+			import('katex/contrib/mhchem'),
+			import('katex/dist/katex.min.css'),
+		]);
+		renderToString = katex.renderToString;
+	});
 </script>
 
-{@html katex.renderToString(content, { displayMode, throwOnError: false })}
+{#if renderToString}
+	{@html renderToString(content, { displayMode, throwOnError: false })}
+{/if}
diff --git a/src/lib/utils/marked/katex-extension.ts b/src/lib/utils/marked/katex-extension.ts
index 8d7d0dc87d..dd755066ce 100644
--- a/src/lib/utils/marked/katex-extension.ts
+++ b/src/lib/utils/marked/katex-extension.ts
@@ -1,5 +1,3 @@
-import katex from 'katex';
-
 const DELIMITER_LIST = [
 	{ left: '$$', right: '$$', display: true },
 	{ left: '$', right: '$', display: false },