diff --git a/frontend/src/lib/recipes/RecipeCard.svelte b/frontend/src/lib/recipes/RecipeCard.svelte
index 8140373..d38249b 100644
--- a/frontend/src/lib/recipes/RecipeCard.svelte
+++ b/frontend/src/lib/recipes/RecipeCard.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { RecipeSummary } from './types';
 
-	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
+	let { recipe, compact = false, onplan }: {
+		recipe: RecipeSummary;
+		compact?: boolean;
+		onplan?: ((recipeId: string, recipeName: string) => void);
+	} = $props();
 
 	let metadata = $derived(
 		[
@@ -13,48 +17,61 @@
 	);
 </script>
 
-<a
-	href="/recipes/{recipe.id}"
-	class="block rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]"
->
-	<div
-		data-testid="image-area"
-		class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
-	>
-		{#if recipe.heroImageUrl}
-			<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
-		{:else}
-			<div
-				data-testid="image-placeholder"
-				class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-					class="text-[var(--color-text-muted)] opacity-50"
+<div class="rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]">
+	<a href="/recipes/{recipe.id}" class="block">
+		<div
+			data-testid="image-area"
+			class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
+		>
+			{#if recipe.heroImageUrl}
+				<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
+			{:else}
+				<div
+					data-testid="image-placeholder"
+					class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
 				>
-					<!-- plate -->
-					<circle cx="12" cy="13" r="6" />
-					<path d="M12 7V5" />
-					<!-- fork tines -->
-					<path d="M8 3v3c0 1.1.9 2 2 2h4" />
-				</svg>
-			</div>
-		{/if}
-	</div>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+						class="text-[var(--color-text-muted)] opacity-50"
+					>
+						<!-- plate -->
+						<circle cx="12" cy="13" r="6" />
+						<path d="M12 7V5" />
+						<!-- fork tines -->
+						<path d="M8 3v3c0 1.1.9 2 2 2h4" />
+					</svg>
+				</div>
+			{/if}
+		</div>
 
-	<div class="px-2 py-1.5">
-		<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
-		{#if metadata}
-			<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
-		{/if}
-	</div>
-</a>
+		<div class="px-2 py-1.5">
+			<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
+			{#if metadata}
+				<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
+			{/if}
+		</div>
+	</a>
+
+	{#if onplan}
+		<div class="flex gap-[5px] px-2 pb-2">
+			<a
+				href="/cook/{recipe.id}"
+				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green)] text-white"
+			>🍳 Jetzt kochen</a>
+			<button
+				type="button"
+				onclick={() => onplan!(recipe.id, recipe.name)}
+				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green-tint)] text-[var(--green-dark)] border border-[var(--green-light)]"
+			>📅 Zur Woche +</button>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/recipes/RecipeCard.test.ts b/frontend/src/lib/recipes/RecipeCard.test.ts
index f9792a4..d606ab9 100644
--- a/frontend/src/lib/recipes/RecipeCard.test.ts
+++ b/frontend/src/lib/recipes/RecipeCard.test.ts
@@ -42,12 +42,36 @@ describe('RecipeCard', () => {
 		expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese');
 	});
 
-	it('wraps in a link to the recipe detail page', () => {
+	it('has a link to the recipe detail page', () => {
 		render(RecipeCard, { props: { recipe: mockRecipe } });
-		const link = screen.getByRole('link');
+		const link = screen.getByRole('link', { name: /Spaghetti Bolognese/i });
 		expect(link).toHaveAttribute('href', '/recipes/recipe-1');
 	});
 
+	it('shows Jetzt kochen link when onplan provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
+		const cookLink = screen.getByRole('link', { name: /Jetzt kochen/i });
+		expect(cookLink).toHaveAttribute('href', '/cook/recipe-1');
+	});
+
+	it('does not show Jetzt kochen when onplan not provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull();
+	});
+
+	it('shows Zur Woche + button when onplan provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
+		expect(screen.getByRole('button', { name: /Zur Woche/i })).toBeTruthy();
+	});
+
+	it('calls onplan with recipeId and name when Zur Woche + clicked', async () => {
+		const onplan = vi.fn();
+		const user = userEvent.setup();
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan } });
+		await user.click(screen.getByRole('button', { name: /Zur Woche/i }));
+		expect(onplan).toHaveBeenCalledWith('recipe-1', 'Spaghetti Bolognese');
+	});
+
 	it('applies compact image height when compact prop is true', () => {
 		render(RecipeCard, { props: { recipe: mockRecipe, compact: true } });
 		const imageArea = document.querySelector('[data-testid="image-area"]');