diff --git a/frontend/src/lib/planner/SwapSuggestionList.svelte b/frontend/src/lib/planner/SwapSuggestionList.svelte
new file mode 100644
index 0000000..68273f8
--- /dev/null
+++ b/frontend/src/lib/planner/SwapSuggestionList.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	interface Recipe {
+		id: string;
+		name: string;
+		effort?: string | null;
+		cookTimeMin?: number | null;
+	}
+
+	let {
+		replacingName,
+		replacingMeta,
+		recipes,
+		currentWeekRecipeIds,
+		onpick,
+		oncancel
+	}: {
+		replacingName: string;
+		replacingMeta?: string;
+		recipes: Recipe[];
+		currentWeekRecipeIds: Set<string>;
+		onpick: (recipeId: string, recipeName: string) => void;
+		oncancel?: () => void;
+	} = $props();
+
+	function recipeMeta(recipe: Recipe): string {
+		return [
+			recipe.cookTimeMin != null ? `${recipe.cookTimeMin} min` : null,
+			recipe.effort ?? null
+		]
+			.filter(Boolean)
+			.join(' · ');
+	}
+</script>
+
+<!-- Replacing banner -->
+<div
+	style="background: var(--orange-tint); border: 1px solid #FBCDA4; border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 14px;"
+>
+	<p
+		style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 4px 0; font-family: var(--font-sans);"
+	>
+		Replacing
+	</p>
+	<span
+		data-testid="replacing-name"
+		style="font-family: var(--font-display); font-size: 14px; text-decoration: line-through; opacity: 0.6; color: var(--color-text);"
+	>
+		{replacingName}{#if replacingMeta}<br />{replacingMeta}{/if}
+	</span>
+</div>
+
+<!-- Eyebrow label -->
+<p
+	style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 6px 0; font-family: var(--font-sans);"
+>
+	Swap to (easiest first)
+</p>
+
+<!-- Recipe list -->
+{#if recipes.length === 0}
+	<p
+		data-testid="swap-empty-state"
+		style="text-align: center; color: var(--color-text-muted); font-family: var(--font-sans); margin: 0;"
+	>
+		Keine Rezepte verfügbar.
+	</p>
+{:else}
+	{#each recipes as recipe (recipe.id)}
+		{@const meta = recipeMeta(recipe)}
+		{@const alreadyPlanned = currentWeekRecipeIds.has(recipe.id)}
+		<div
+			style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px;"
+		>
+			<div style="flex: 1; min-width: 0;">
+				<p
+					style="font-family: var(--font-display); font-size: 13px; color: var(--color-text); margin: 0;"
+				>
+					{recipe.name}
+				</p>
+				{#if meta}
+					<p
+						style="font-size: 9px; color: var(--color-text-muted); font-family: var(--font-sans); margin: 1px 0 0;"
+					>
+						{meta}
+					</p>
+				{/if}
+				{#if alreadyPlanned}
+					<p
+						data-testid="already-planned-{recipe.id}"
+						style="font-size: 9px; color: var(--yellow-text); font-family: var(--font-sans); margin: 1px 0 0;"
+					>
+						⚠ Bereits diese Woche
+					</p>
+				{/if}
+			</div>
+			<button
+				type="button"
+				onclick={() => onpick(recipe.id, recipe.name)}
+				style="background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 500; color: var(--green); font-family: var(--font-sans); flex-shrink: 0;"
+			>
+				Pick
+			</button>
+		</div>
+	{/each}
+{/if}
+
+<!-- Cancel button (optional) -->
+{#if oncancel}
+	<button
+		type="button"
+		onclick={oncancel}
+		style="width: 100%; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 8px 0; font-family: var(--font-sans);"
+	>
+		Cancel
+	</button>
+{/if}
diff --git a/frontend/src/lib/planner/SwapSuggestionList.test.ts b/frontend/src/lib/planner/SwapSuggestionList.test.ts
new file mode 100644
index 0000000..9fc9f32
--- /dev/null
+++ b/frontend/src/lib/planner/SwapSuggestionList.test.ts
@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import SwapSuggestionList from './SwapSuggestionList.svelte';
+
+const recipes = [
+	{ id: 'r1', name: 'Quick carbonara', effort: 'easy', cookTimeMin: 20 },
+	{ id: 'r2', name: 'Chicken stir-fry', effort: 'easy', cookTimeMin: 25 },
+	{ id: 'r3', name: 'Mushroom risotto', effort: 'medium', cookTimeMin: 50 }
+];
+
+const baseProps = {
+	replacingName: 'Tomato pasta',
+	replacingMeta: '45 min · Easy',
+	recipes,
+	currentWeekRecipeIds: new Set<string>(),
+	onpick: vi.fn()
+};
+
+describe('SwapSuggestionList', () => {
+	it('renders the Replacing banner', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		expect(screen.getByText(/Replacing/i)).toBeTruthy();
+	});
+
+	it('renders old meal name with strikethrough', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		const struck = screen.getByTestId('replacing-name');
+		expect(struck.textContent).toContain('Tomato pasta');
+		expect(getComputedStyle(struck).textDecoration || struck.style.textDecoration).toContain('line-through');
+	});
+
+	it('renders the easiest-first eyebrow label', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		expect(screen.getByText(/easiest first/i)).toBeTruthy();
+	});
+
+	it('renders all recipe names', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		expect(screen.getByText('Quick carbonara')).toBeTruthy();
+		expect(screen.getByText('Chicken stir-fry')).toBeTruthy();
+		expect(screen.getByText('Mushroom risotto')).toBeTruthy();
+	});
+
+	it('clicking Pick calls onpick with recipeId and name', async () => {
+		const onpick = vi.fn();
+		const user = userEvent.setup();
+		render(SwapSuggestionList, { props: { ...baseProps, onpick } });
+		const buttons = screen.getAllByRole('button', { name: /Pick/i });
+		await user.click(buttons[0]);
+		expect(onpick).toHaveBeenCalledWith('r1', 'Quick carbonara');
+	});
+
+	it('shows already-planned warning for recipes in currentWeekRecipeIds', () => {
+		render(SwapSuggestionList, {
+			props: { ...baseProps, currentWeekRecipeIds: new Set(['r2']) }
+		});
+		expect(screen.getByTestId('already-planned-r2')).toBeTruthy();
+	});
+
+	it('does not show already-planned warning for recipes not in currentWeekRecipeIds', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		expect(screen.queryByTestId('already-planned-r1')).toBeNull();
+	});
+
+	it('shows empty state when no recipes', () => {
+		render(SwapSuggestionList, { props: { ...baseProps, recipes: [] } });
+		expect(screen.getByTestId('swap-empty-state')).toBeTruthy();
+	});
+
+	it('renders optional Cancel button when oncancel provided', () => {
+		render(SwapSuggestionList, { props: { ...baseProps, oncancel: vi.fn() } });
+		expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+	});
+
+	it('does not render Cancel button when oncancel not provided', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		expect(screen.queryByRole('button', { name: /Cancel/i })).toBeNull();
+	});
+
+	it('clicking Cancel calls oncancel', async () => {
+		const oncancel = vi.fn();
+		const user = userEvent.setup();
+		render(SwapSuggestionList, { props: { ...baseProps, oncancel } });
+		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+		expect(oncancel).toHaveBeenCalledOnce();
+	});
+});