diff --git a/frontend/src/lib/components/QuizPreviewReadonly.svelte b/frontend/src/lib/components/QuizPreviewReadonly.svelte
index 6881ccd..d2c1fa0 100644
--- a/frontend/src/lib/components/QuizPreviewReadonly.svelte
+++ b/frontend/src/lib/components/QuizPreviewReadonly.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { tick } from 'svelte';
+	import { autoRenderMath } from '$lib/actions/renderMath';
+
 	interface QuizOption {
 		id: string;
 		text: string;
@@ -21,9 +24,19 @@
 	}
 
 	let { quizData }: Props = $props();
+
+	let rootEl = $state<HTMLElement | null>(null);
+	// Render LaTeX (KaTeX) pada preview soal kuis di content editor guru.
+	// autoRenderMath idempoten; track quizData agar re-run saat data berubah.
+	$effect(() => {
+		void quizData;
+		if (rootEl) {
+			tick().then(() => rootEl && autoRenderMath(rootEl));
+		}
+	});
 </script>
 
-<div class="quiz-preview-readonly">
+<div class="quiz-preview-readonly" bind:this={rootEl}>
 	<h3 class="quiz-preview-title">Preview Kunci Jawaban</h3>
 	<p class="quiz-preview-note">Tampilan ini hanya untuk pratinjau — tidak mengirim attempt ke server.</p>
 
diff --git a/frontend/src/routes/lesson/[slug]/QuizTab.svelte b/frontend/src/routes/lesson/[slug]/QuizTab.svelte
index 3a05283..a3eb811 100644
--- a/frontend/src/routes/lesson/[slug]/QuizTab.svelte
+++ b/frontend/src/routes/lesson/[slug]/QuizTab.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { authLoggedIn, authToken } from '$stores/auth';
 	import { get } from 'svelte/store';
-	import { onMount } from 'svelte';
-	import { renderMath } from '$lib/actions/renderMath';
+	import { onMount, tick } from 'svelte';
+	import { autoRenderMath } from '$lib/actions/renderMath';
 	import { shouldShowQuizReview } from '$services/quiz-integrity';
 	import type { LessonManager } from './lesson.svelte';
 	import type { QuizQuestion, QuizAnswer } from '$types/quiz';
@@ -75,6 +75,18 @@
 		}
 	});
 
+	// Re-render LaTeX math (KaTeX) whenever quiz content changes — covers active
+	// quiz options, live review, and async-loaded stored review. autoRenderMath is
+	// idempotent: already-rendered KaTeX spans leave no raw delimiters to re-process.
+	let quizEl = $state<HTMLElement | null>(null);
+	$effect(() => {
+		// Track content-bearing reactive values so the effect re-runs on data changes.
+		void [result, questions, currentQuestion, currentAnswer, reviewQuestions, storedAttempt];
+		if (quizEl) {
+			tick().then(() => quizEl && autoRenderMath(quizEl));
+		}
+	});
+
 	function handleExit() {
 		if (!mgr.isQuizMode) return;
 
@@ -91,9 +103,9 @@
 	}
 </script>
 
-<div class="quiz-container">
+<div class="quiz-container" bind:this={quizEl}>
 	{#if result || quizAlreadyCompleted}
-		<div class="summary-view" use:renderMath>
+		<div class="summary-view">
 			<div class="summary-header">
 				<div class="summary-icon">🏁</div>
 				<h2>Kuis Selesai!</h2>