diff --git a/frontend/src/routes/(app)/recipes/[id]/+page.svelte b/frontend/src/routes/(app)/recipes/[id]/+page.svelte
new file mode 100644
index 0000000..2c19e8a
--- /dev/null
+++ b/frontend/src/routes/(app)/recipes/[id]/+page.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import RecipeHero from '$lib/recipes/RecipeHero.svelte';
+	import IngredientList from '$lib/recipes/IngredientList.svelte';
+	import StepList from '$lib/recipes/StepList.svelte';
+
+	type RecipeData = {
+		recipe: {
+			id: string;
+			name: string;
+			serves?: number;
+			cookTimeMin?: number;
+			effort?: string;
+			heroImageUrl?: string;
+			ingredients: { ingredientId?: string; name?: string; quantity?: number; unit?: string; sortOrder?: number }[];
+			steps: { stepNumber?: number; instruction?: string }[];
+			tags: { id: string; name: string; tagType?: string }[];
+		};
+	};
+
+	let { data }: { data: RecipeData } = $props();
+</script>
+
+<svelte:head>
+	<title>{data.recipe.name} — Mealplan</title>
+</svelte:head>
+
+<div>
+	<RecipeHero recipe={data.recipe} />
+
+	<div class="md:flex">
+		<div class="md:flex-1 md:border-r md:border-[var(--color-border)] p-[24px]">
+			<IngredientList ingredients={data.recipe.ingredients} />
+		</div>
+		<div class="md:flex-1 p-[24px]">
+			<StepList steps={data.recipe.steps} />
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(app)/recipes/[id]/page.test.ts b/frontend/src/routes/(app)/recipes/[id]/page.test.ts
new file mode 100644
index 0000000..f599700
--- /dev/null
+++ b/frontend/src/routes/(app)/recipes/[id]/page.test.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Page from './+page.svelte';
+
+const mockData = {
+	recipe: {
+		id: 'r1',
+		name: 'Spaghetti Bolognese',
+		serves: 4,
+		cookTimeMin: 30,
+		effort: 'Easy',
+		heroImageUrl: undefined as string | undefined,
+		ingredients: [
+			{ ingredientId: 'i1', name: 'Spaghetti', quantity: 200, unit: 'g' },
+			{ ingredientId: 'i2', name: 'Hackfleisch', quantity: 400, unit: 'g' }
+		],
+		steps: [
+			{ stepNumber: 1, instruction: 'Wasser aufsetzen' },
+			{ stepNumber: 2, instruction: 'Sauce zubereiten' }
+		],
+		tags: [{ id: 't1', name: 'Pasta', tagType: 'category' }]
+	}
+};
+
+describe('recipe detail page', () => {
+	it('renders the recipe name', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
+	});
+
+	it('renders page title', () => {
+		render(Page, { props: { data: mockData } });
+		expect(document.title).toBe('Spaghetti Bolognese — Mealplan');
+	});
+
+	it('renders back link to /recipes', () => {
+		render(Page, { props: { data: mockData } });
+		const backLink = screen.getByRole('link', { name: /zurück/i });
+		expect(backLink).toHaveAttribute('href', '/recipes');
+	});
+
+	it('renders cook now link to /cook/[id]', () => {
+		render(Page, { props: { data: mockData } });
+		const cookLink = screen.getByRole('link', { name: /jetzt kochen/i });
+		expect(cookLink).toHaveAttribute('href', '/cook/r1');
+	});
+
+	it('renders ingredients section heading', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText(/zutaten/i)).toBeInTheDocument();
+	});
+
+	it('renders steps section heading', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText(/zubereitung/i)).toBeInTheDocument();
+	});
+
+	it('renders ingredient names', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText('Spaghetti')).toBeInTheDocument();
+		expect(screen.getByText('Hackfleisch')).toBeInTheDocument();
+	});
+
+	it('renders step instructions', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText('Wasser aufsetzen')).toBeInTheDocument();
+		expect(screen.getByText('Sauce zubereiten')).toBeInTheDocument();
+	});
+});