diff --git a/apps/web/src/routes/study/[deckId]/+page.svelte b/apps/web/src/routes/study/[deckId]/+page.svelte
index aafdb49..036664b 100644
--- a/apps/web/src/routes/study/[deckId]/+page.svelte
+++ b/apps/web/src/routes/study/[deckId]/+page.svelte
@@ -2,7 +2,12 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
-	import type { Rating } from '@cards/domain';
+	import {
+		clusterIdForSubIndex,
+		renderClozePrompt,
+		renderClozeAnswer,
+		type Rating,
+	} from '@cards/domain';
 	import { getDeck } from '$lib/api/decks.ts';
 	import { listDueReviews, gradeReview, type DueReview } from '$lib/api/reviews.ts';
 	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
@@ -32,6 +37,11 @@
 				return fields.front ?? '';
 			case 'basic-reverse':
 				return subIndex === 0 ? (fields.front ?? '') : (fields.back ?? '');
+			case 'cloze': {
+				const text = fields.text ?? '';
+				const clusterId = clusterIdForSubIndex(text, subIndex);
+				return clusterId !== null ? renderClozePrompt(text, clusterId) : text;
+			}
 			default:
 				return fields.front ?? '';
 		}
@@ -47,6 +57,13 @@
 				return fields.back ?? '';
 			case 'basic-reverse':
 				return subIndex === 0 ? (fields.back ?? '') : (fields.front ?? '');
+			case 'cloze': {
+				const text = fields.text ?? '';
+				const clusterId = clusterIdForSubIndex(text, subIndex);
+				const body = clusterId !== null ? renderClozeAnswer(text, clusterId) : text;
+				const extra = fields.extra ? `\n\n${fields.extra}` : '';
+				return body + extra;
+			}
 			default:
 				return fields.back ?? '';
 		}