diff --git a/apps/mana/apps/web/src/routes/(app)/nutriphi/+page.svelte b/apps/mana/apps/web/src/routes/(app)/nutriphi/+page.svelte
index 9c56c5061..ad2a3f327 100644
--- a/apps/mana/apps/web/src/routes/(app)/nutriphi/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/nutriphi/+page.svelte
@@ -196,13 +196,14 @@
 		{:else}
 			<div class="space-y-3">
 				{#each todaysMeals as meal (meal.id)}
-					<div
-						class="rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 transition-all hover:border-[hsl(var(--primary)/0.3)]"
+					<a
+						href="/nutriphi/{meal.id}"
+						class="block rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 transition-all hover:border-[hsl(var(--primary)/0.3)]"
 					>
 						<div class="flex items-start gap-3">
-							{#if meal.photoUrl}
+							{#if meal.photoThumbnailUrl || meal.photoUrl}
 								<img
-									src={meal.photoUrl}
+									src={meal.photoThumbnailUrl ?? meal.photoUrl}
 									alt={meal.description}
 									class="h-16 w-16 flex-shrink-0 rounded-lg object-cover"
 									loading="lazy"
@@ -245,7 +246,7 @@
 								</span>
 							{/if}
 						</div>
-					</div>
+					</a>
 				{/each}
 			</div>
 		{/if}
diff --git a/apps/mana/apps/web/src/routes/(app)/nutriphi/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/nutriphi/[id]/+page.svelte
new file mode 100644
index 000000000..0c8572541
--- /dev/null
+++ b/apps/mana/apps/web/src/routes/(app)/nutriphi/[id]/+page.svelte
@@ -0,0 +1,518 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
+	import { loadMealById } from '$lib/modules/nutriphi/queries';
+	import { mealMutations, photoMutations } from '$lib/modules/nutriphi/mutations';
+	import { MEAL_TYPE_LABELS, NUTRIENT_INFO } from '$lib/modules/nutriphi/constants';
+	import type { MealType, MealWithNutrition, NutritionData } from '$lib/modules/nutriphi/types';
+	import { ArrowLeft, Trash } from '@mana/shared-icons';
+
+	// Inline the live query so the closure captures page.params.id directly
+	// (matches the planta DetailView pattern).
+	const mealQuery = useLiveQueryWithDefault(
+		() => (page.params.id ? loadMealById(page.params.id) : Promise.resolve(null)),
+		null as MealWithNutrition | null
+	);
+	let meal = $derived(mealQuery.value);
+
+	const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snack'];
+
+	// Edit-mode state
+	let editing = $state(false);
+	let editMealType = $state<MealType>('breakfast');
+	let editDescription = $state('');
+	let editCalories = $state<number | null>(null);
+	let editProtein = $state<number | null>(null);
+	let editCarbs = $state<number | null>(null);
+	let editFat = $state<number | null>(null);
+	let editFiber = $state<number | null>(null);
+	let editSugar = $state<number | null>(null);
+
+	let saving = $state(false);
+	let reanalyzing = $state(false);
+	let lightboxOpen = $state(false);
+	let confirmDelete = $state(false);
+	let error = $state('');
+
+	function startEdit() {
+		if (!meal) return;
+		editMealType = meal.mealType;
+		editDescription = meal.description;
+		editCalories = meal.nutrition?.calories ?? null;
+		editProtein = meal.nutrition?.protein ?? null;
+		editCarbs = meal.nutrition?.carbohydrates ?? null;
+		editFat = meal.nutrition?.fat ?? null;
+		editFiber = meal.nutrition?.fiber ?? null;
+		editSugar = meal.nutrition?.sugar ?? null;
+		editing = true;
+		error = '';
+	}
+
+	function cancelEdit() {
+		editing = false;
+		error = '';
+	}
+
+	async function saveEdit() {
+		if (!meal) return;
+		if (!editDescription.trim()) {
+			error = 'Beschreibung darf nicht leer sein';
+			return;
+		}
+		saving = true;
+		error = '';
+		try {
+			const nutrition: NutritionData | null =
+				editCalories !== null
+					? {
+							calories: editCalories ?? 0,
+							protein: editProtein ?? 0,
+							carbohydrates: editCarbs ?? 0,
+							fat: editFat ?? 0,
+							fiber: editFiber ?? 0,
+							sugar: editSugar ?? 0,
+						}
+					: null;
+			await mealMutations.update(meal.id, {
+				mealType: editMealType,
+				description: editDescription,
+				nutrition,
+			});
+			editing = false;
+		} catch (err) {
+			console.error('meal update failed:', err);
+			error = 'Speichern fehlgeschlagen';
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleReanalyze() {
+		if (!meal?.photoUrl) return;
+		reanalyzing = true;
+		error = '';
+		try {
+			const analysis = await photoMutations.analyze(meal.photoUrl);
+			const nutrition: NutritionData | null = analysis.totalNutrition
+				? {
+						calories: analysis.totalNutrition.calories ?? 0,
+						protein: analysis.totalNutrition.protein ?? 0,
+						carbohydrates: analysis.totalNutrition.carbohydrates ?? 0,
+						fat: analysis.totalNutrition.fat ?? 0,
+						fiber: analysis.totalNutrition.fiber ?? 0,
+						sugar: analysis.totalNutrition.sugar ?? 0,
+					}
+				: null;
+			await mealMutations.update(meal.id, {
+				description: analysis.description ?? meal.description,
+				nutrition,
+			});
+		} catch (err) {
+			console.error('re-analyze failed:', err);
+			error = 'KI-Analyse fehlgeschlagen';
+		} finally {
+			reanalyzing = false;
+		}
+	}
+
+	async function handleDelete() {
+		if (!meal) return;
+		try {
+			await mealMutations.delete(meal.id);
+			goto('/nutriphi');
+		} catch (err) {
+			console.error('delete failed:', err);
+			error = 'Löschen fehlgeschlagen';
+			confirmDelete = false;
+		}
+	}
+
+	function formatDateTime(dateString: string): string {
+		return new Date(dateString).toLocaleString('de-DE', {
+			weekday: 'long',
+			day: 'numeric',
+			month: 'long',
+			hour: '2-digit',
+			minute: '2-digit',
+		});
+	}
+
+	function getMealTypeLabel(type: string): string {
+		return MEAL_TYPE_LABELS[type as keyof typeof MEAL_TYPE_LABELS]?.de ?? type;
+	}
+</script>
+
+<svelte:head>
+	<title>{meal?.description ?? 'Mahlzeit'} - NutriPhi - Mana</title>
+</svelte:head>
+
+<div class="mx-auto max-w-2xl space-y-6">
+	<a
+		href="/nutriphi"
+		class="inline-flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+	>
+		<ArrowLeft class="h-4 w-4" />
+		Zurueck
+	</a>
+
+	{#if !meal}
+		<div
+			class="rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-12 text-center"
+		>
+			<p class="text-sm text-[hsl(var(--muted-foreground))]">Mahlzeit nicht gefunden.</p>
+		</div>
+	{:else}
+		{#if error}
+			<div
+				class="rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400"
+			>
+				{error}
+			</div>
+		{/if}
+
+		<!-- Photo (clickable for lightbox) -->
+		{#if meal.photoUrl}
+			<button
+				type="button"
+				onclick={() => (lightboxOpen = true)}
+				class="block w-full overflow-hidden rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--muted))] transition-opacity hover:opacity-95"
+				aria-label="Bild vergrößern"
+			>
+				<img src={meal.photoUrl} alt={meal.description} class="max-h-96 w-full object-contain" />
+			</button>
+		{/if}
+
+		<!-- Header / Metadata -->
+		<div class="rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6">
+			<div class="mb-3 flex items-center gap-2">
+				<span
+					class="rounded-full bg-[hsl(var(--muted))] px-2 py-0.5 text-xs font-medium text-[hsl(var(--muted-foreground))]"
+				>
+					{getMealTypeLabel(meal.mealType)}
+				</span>
+				<span class="text-xs text-[hsl(var(--muted-foreground))]">
+					{formatDateTime(meal.createdAt)}
+				</span>
+				{#if meal.inputType === 'photo'}
+					<span class="text-xs text-[hsl(var(--muted-foreground))]">📷</span>
+				{/if}
+				{#if meal.confidence > 0 && meal.confidence < 1}
+					<span class="ml-auto text-xs text-[hsl(var(--muted-foreground))]">
+						KI {Math.round(meal.confidence * 100)}%
+					</span>
+				{/if}
+			</div>
+
+			{#if !editing}
+				<h1 class="text-xl font-semibold text-[hsl(var(--foreground))]">{meal.description}</h1>
+				{#if meal.nutrition}
+					<div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
+						<div class="rounded-lg bg-[hsl(var(--muted)/0.4)] p-3">
+							<div class="flex items-center gap-1.5">
+								<div
+									class="h-2 w-2 rounded-full"
+									style="background-color: {NUTRIENT_INFO.calories.color}"
+								></div>
+								<span class="text-xs text-[hsl(var(--muted-foreground))]">Kalorien</span>
+							</div>
+							<p class="mt-1 text-lg font-bold text-[hsl(var(--foreground))]">
+								{meal.nutrition.calories}
+								<span class="text-xs font-normal text-[hsl(var(--muted-foreground))]">kcal</span>
+							</p>
+						</div>
+						<div class="rounded-lg bg-[hsl(var(--muted)/0.4)] p-3">
+							<div class="flex items-center gap-1.5">
+								<div
+									class="h-2 w-2 rounded-full"
+									style="background-color: {NUTRIENT_INFO.protein.color}"
+								></div>
+								<span class="text-xs text-[hsl(var(--muted-foreground))]">Protein</span>
+							</div>
+							<p class="mt-1 text-lg font-bold text-[hsl(var(--foreground))]">
+								{meal.nutrition.protein}<span
+									class="text-xs font-normal text-[hsl(var(--muted-foreground))]">g</span
+								>
+							</p>
+						</div>
+						<div class="rounded-lg bg-[hsl(var(--muted)/0.4)] p-3">
+							<div class="flex items-center gap-1.5">
+								<div
+									class="h-2 w-2 rounded-full"
+									style="background-color: {NUTRIENT_INFO.carbohydrates.color}"
+								></div>
+								<span class="text-xs text-[hsl(var(--muted-foreground))]">Kohlenhydrate</span>
+							</div>
+							<p class="mt-1 text-lg font-bold text-[hsl(var(--foreground))]">
+								{meal.nutrition.carbohydrates}<span
+									class="text-xs font-normal text-[hsl(var(--muted-foreground))]">g</span
+								>
+							</p>
+						</div>
+						<div class="rounded-lg bg-[hsl(var(--muted)/0.4)] p-3">
+							<div class="flex items-center gap-1.5">
+								<div
+									class="h-2 w-2 rounded-full"
+									style="background-color: {NUTRIENT_INFO.fat.color}"
+								></div>
+								<span class="text-xs text-[hsl(var(--muted-foreground))]">Fett</span>
+							</div>
+							<p class="mt-1 text-lg font-bold text-[hsl(var(--foreground))]">
+								{meal.nutrition.fat}<span
+									class="text-xs font-normal text-[hsl(var(--muted-foreground))]">g</span
+								>
+							</p>
+						</div>
+					</div>
+					<div class="mt-2 grid grid-cols-2 gap-3 text-xs text-[hsl(var(--muted-foreground))]">
+						<div>Ballaststoffe: {meal.nutrition.fiber}g</div>
+						<div>Zucker: {meal.nutrition.sugar}g</div>
+					</div>
+				{/if}
+
+				<div class="mt-5 flex flex-wrap gap-2">
+					<button
+						type="button"
+						onclick={startEdit}
+						class="rounded-lg border border-[hsl(var(--border))] px-4 py-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
+					>
+						Bearbeiten
+					</button>
+					{#if meal.inputType === 'photo' && meal.photoUrl}
+						<button
+							type="button"
+							onclick={handleReanalyze}
+							disabled={reanalyzing}
+							class="rounded-lg border border-[hsl(var(--border))] px-4 py-2 text-sm text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] disabled:opacity-50"
+						>
+							{reanalyzing ? 'Analysiere…' : '🔄 Erneut analysieren'}
+						</button>
+					{/if}
+					{#if !confirmDelete}
+						<button
+							type="button"
+							onclick={() => (confirmDelete = true)}
+							class="ml-auto inline-flex items-center gap-1 rounded-lg border border-[hsl(var(--border))] px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+						>
+							<Trash size={14} />
+							Löschen
+						</button>
+					{:else}
+						<div class="ml-auto flex items-center gap-2">
+							<span class="text-xs text-[hsl(var(--muted-foreground))]">Sicher?</span>
+							<button
+								type="button"
+								onclick={() => (confirmDelete = false)}
+								class="rounded-lg border border-[hsl(var(--border))] px-3 py-1.5 text-xs text-[hsl(var(--foreground))]"
+							>
+								Abbrechen
+							</button>
+							<button
+								type="button"
+								onclick={handleDelete}
+								class="rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700"
+							>
+								Löschen
+							</button>
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<!-- Edit form -->
+				<div class="space-y-5">
+					<div>
+						<label class="mb-2 block text-sm font-medium text-[hsl(var(--foreground))]">
+							Mahlzeittyp
+						</label>
+						<div class="grid grid-cols-4 gap-2">
+							{#each mealTypes as type}
+								<button
+									type="button"
+									onclick={() => (editMealType = type)}
+									class="rounded-lg border-2 px-3 py-2 text-sm transition-all
+										{editMealType === type
+										? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.05)] font-medium'
+										: 'border-[hsl(var(--border))] hover:border-[hsl(var(--primary)/0.3)]'}"
+								>
+									{MEAL_TYPE_LABELS[type].de}
+								</button>
+							{/each}
+						</div>
+					</div>
+
+					<div>
+						<label
+							for="edit-desc"
+							class="mb-2 block text-sm font-medium text-[hsl(var(--foreground))]"
+						>
+							Beschreibung
+						</label>
+						<textarea
+							id="edit-desc"
+							bind:value={editDescription}
+							rows="3"
+							class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-4 py-3 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+						></textarea>
+					</div>
+
+					<div>
+						<h3 class="mb-3 text-sm font-medium text-[hsl(var(--foreground))]">Naehrwerte</h3>
+						<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+							<div>
+								<label
+									for="edit-cal"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Kalorien (kcal)
+								</label>
+								<input
+									id="edit-cal"
+									type="number"
+									bind:value={editCalories}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+							<div>
+								<label
+									for="edit-prot"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Protein (g)
+								</label>
+								<input
+									id="edit-prot"
+									type="number"
+									bind:value={editProtein}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+							<div>
+								<label
+									for="edit-carbs"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Kohlenhydrate (g)
+								</label>
+								<input
+									id="edit-carbs"
+									type="number"
+									bind:value={editCarbs}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+							<div>
+								<label
+									for="edit-fat"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Fett (g)
+								</label>
+								<input
+									id="edit-fat"
+									type="number"
+									bind:value={editFat}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+							<div>
+								<label
+									for="edit-fiber"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Ballaststoffe (g)
+								</label>
+								<input
+									id="edit-fiber"
+									type="number"
+									bind:value={editFiber}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+							<div>
+								<label
+									for="edit-sugar"
+									class="mb-1 block text-xs text-[hsl(var(--muted-foreground))]"
+								>
+									Zucker (g)
+								</label>
+								<input
+									id="edit-sugar"
+									type="number"
+									bind:value={editSugar}
+									min="0"
+									class="w-full rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--input))] px-3 py-2 text-sm text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary))]"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex gap-3">
+						<button
+							type="button"
+							onclick={cancelEdit}
+							class="flex-1 rounded-lg border border-[hsl(var(--border))] px-4 py-3 text-sm font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
+						>
+							Abbrechen
+						</button>
+						<button
+							type="button"
+							onclick={saveEdit}
+							disabled={saving || !editDescription.trim()}
+							class="flex-1 rounded-lg bg-[hsl(var(--primary))] px-4 py-3 text-sm font-medium text-[hsl(var(--primary-foreground))] hover:opacity-90 disabled:opacity-50"
+						>
+							{saving ? 'Speichere…' : 'Speichern'}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Foods Breakdown -->
+		{#if !editing && meal.foods && meal.foods.length > 0}
+			<div class="rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6">
+				<h2 class="mb-3 text-sm font-semibold text-[hsl(var(--foreground))]">
+					Erkannte Bestandteile
+				</h2>
+				<ul class="space-y-2">
+					{#each meal.foods as food}
+						<li
+							class="flex items-baseline justify-between gap-2 border-b border-[hsl(var(--border))] pb-2 last:border-b-0 last:pb-0"
+						>
+							<div class="text-sm text-[hsl(var(--foreground))]">
+								{food.name}
+								{#if food.quantity}
+									<span class="text-xs text-[hsl(var(--muted-foreground))]">
+										· {food.quantity}</span
+									>
+								{/if}
+							</div>
+							{#if food.calories != null}
+								<span class="whitespace-nowrap text-sm text-[hsl(var(--muted-foreground))]">
+									{food.calories} kcal
+								</span>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<!-- Lightbox modal -->
+{#if lightboxOpen && meal?.photoUrl}
+	<button
+		type="button"
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+		onclick={() => (lightboxOpen = false)}
+		aria-label="Bild schließen"
+	>
+		<img src={meal.photoUrl} alt={meal.description} class="max-h-full max-w-full object-contain" />
+		<span class="absolute right-4 top-4 text-3xl text-white/80">×</span>
+	</button>
+{/if}
diff --git a/apps/mana/apps/web/src/routes/(app)/nutriphi/add/+page.svelte b/apps/mana/apps/web/src/routes/(app)/nutriphi/add/+page.svelte
index f43b8d138..836b2c6fe 100644
--- a/apps/mana/apps/web/src/routes/(app)/nutriphi/add/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/nutriphi/add/+page.svelte
@@ -8,7 +8,7 @@
 		textAnalysisMutations,
 	} from '$lib/modules/nutriphi/mutations';
 	import { MEAL_TYPE_LABELS, suggestMealType } from '$lib/modules/nutriphi/constants';
-	import type { MealType, NutritionData } from '$lib/modules/nutriphi/types';
+	import type { AnalyzedFood, MealType, NutritionData } from '$lib/modules/nutriphi/types';
 	import { ArrowLeft } from '@mana/shared-icons';
 
 	const allFavorites = useAllFavorites();
@@ -32,7 +32,9 @@
 	let photoPreviewUrl = $state<string | null>(null);
 	let photoMediaId = $state<string | null>(null);
 	let photoUploadedUrl = $state<string | null>(null);
+	let photoUploadedThumbnailUrl = $state<string | null>(null);
 	let aiConfidence = $state<number | null>(null);
+	let aiFoods = $state<AnalyzedFood[] | null>(null);
 	let analyzing = $state(false);
 	let analyzed = $state(false);
 
@@ -67,7 +69,9 @@
 		photoPreviewUrl = null;
 		photoMediaId = null;
 		photoUploadedUrl = null;
+		photoUploadedThumbnailUrl = null;
 		aiConfidence = null;
+		aiFoods = null;
 		analyzed = false;
 	}
 
@@ -93,7 +97,9 @@
 		photoPreviewUrl = URL.createObjectURL(file);
 		photoMediaId = null;
 		photoUploadedUrl = null;
+		photoUploadedThumbnailUrl = null;
 		aiConfidence = null;
+		aiFoods = null;
 		analyzed = false;
 		error = '';
 	}
@@ -106,6 +112,7 @@
 			const { upload, analysis } = await photoMutations.uploadAndAnalyze(photoFile);
 			photoMediaId = upload.mediaId;
 			photoUploadedUrl = upload.publicUrl;
+			photoUploadedThumbnailUrl = upload.thumbnailUrl;
 
 			// Prefill the same fields the text mode uses, so the user can review/edit.
 			if (analysis.description) description = analysis.description;
@@ -118,6 +125,7 @@
 				sugar = analysis.totalNutrition.sugar ?? null;
 			}
 			aiConfidence = analysis.confidence ?? null;
+			aiFoods = analysis.foods?.length ? analysis.foods : null;
 			analyzed = true;
 		} catch (err) {
 			console.error('photo analysis failed:', err);
@@ -189,7 +197,9 @@
 					nutrition,
 					photoMediaId,
 					photoUrl: photoUploadedUrl,
+					photoThumbnailUrl: photoUploadedThumbnailUrl,
 					confidence: aiConfidence ?? 0.8,
+					foods: aiFoods,
 				});
 			} else {
 				await mealMutations.create({
@@ -348,6 +358,33 @@
 							{/if}
 						</div>
 					{/if}
+
+					{#if analyzed && aiFoods && aiFoods.length > 0}
+						<div
+							class="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.3)] p-3"
+						>
+							<p class="mb-2 text-xs font-medium text-[hsl(var(--muted-foreground))]">
+								Erkannte Bestandteile
+							</p>
+							<ul class="space-y-1">
+								{#each aiFoods as food}
+									<li class="flex items-baseline justify-between gap-2 text-xs">
+										<span class="text-[hsl(var(--foreground))]">
+											{food.name}
+											{#if food.quantity}
+												<span class="text-[hsl(var(--muted-foreground))]"> · {food.quantity}</span>
+											{/if}
+										</span>
+										{#if food.calories != null}
+											<span class="whitespace-nowrap text-[hsl(var(--muted-foreground))]">
+												{food.calories} kcal
+											</span>
+										{/if}
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/if}
 				</div>
 			{/if}
 		</div>
diff --git a/apps/mana/apps/web/src/routes/(app)/nutriphi/history/+page.svelte b/apps/mana/apps/web/src/routes/(app)/nutriphi/history/+page.svelte
index 328c9853f..d2aad7914 100644
--- a/apps/mana/apps/web/src/routes/(app)/nutriphi/history/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/nutriphi/history/+page.svelte
@@ -164,38 +164,42 @@
 							<div
 								class="group flex items-center gap-4 rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3"
 							>
-								{#if meal.photoUrl}
-									<img
-										src={meal.photoUrl}
-										alt={meal.description}
-										class="h-12 w-12 flex-shrink-0 rounded-lg object-cover"
-										loading="lazy"
-									/>
-								{/if}
-								<div class="min-w-0 flex-1">
-									<div class="flex items-center gap-2">
-										<span
-											class="rounded bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]"
-										>
-											{getMealTypeLabel(meal.mealType)}
-										</span>
-										<span class="text-xs text-[hsl(var(--muted-foreground))]">
-											{formatTime(meal.createdAt)}
-										</span>
-										{#if meal.inputType === 'photo'}
-											<span class="text-xs text-[hsl(var(--muted-foreground))]">📷</span>
-										{/if}
+								<a href="/nutriphi/{meal.id}" class="flex min-w-0 flex-1 items-center gap-4">
+									{#if meal.photoThumbnailUrl || meal.photoUrl}
+										<img
+											src={meal.photoThumbnailUrl ?? meal.photoUrl}
+											alt={meal.description}
+											class="h-12 w-12 flex-shrink-0 rounded-lg object-cover"
+											loading="lazy"
+										/>
+									{/if}
+									<div class="min-w-0 flex-1">
+										<div class="flex items-center gap-2">
+											<span
+												class="rounded bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]"
+											>
+												{getMealTypeLabel(meal.mealType)}
+											</span>
+											<span class="text-xs text-[hsl(var(--muted-foreground))]">
+												{formatTime(meal.createdAt)}
+											</span>
+											{#if meal.inputType === 'photo'}
+												<span class="text-xs text-[hsl(var(--muted-foreground))]">📷</span>
+											{/if}
+										</div>
+										<p class="mt-1 text-sm text-[hsl(var(--foreground))] truncate">
+											{meal.description}
+										</p>
 									</div>
-									<p class="mt-1 text-sm text-[hsl(var(--foreground))] truncate">
-										{meal.description}
-									</p>
-								</div>
 
-								{#if meal.nutrition}
-									<span class="whitespace-nowrap text-sm font-medium text-[hsl(var(--foreground))]">
-										{meal.nutrition.calories} kcal
-									</span>
-								{/if}
+									{#if meal.nutrition}
+										<span
+											class="whitespace-nowrap text-sm font-medium text-[hsl(var(--foreground))]"
+										>
+											{meal.nutrition.calories} kcal
+										</span>
+									{/if}
+								</a>
 
 								<button
 									onclick={() => deleteMeal(meal.id)}