diff --git a/src/lib/components/EditImageModal.svelte b/src/lib/components/EditImageModal.svelte
new file mode 100644
index 0000000..0240ba6
--- /dev/null
+++ b/src/lib/components/EditImageModal.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+	import { X, RotateCcw } from 'lucide-svelte';
+	import type { ImageEntry, Device, PipelineConfig } from '$lib/types';
+	import { clonePipelineConfig, DEFAULT_PIPELINE_CONFIG } from '$lib/types';
+	import { pipelineStore } from '$lib/stores/pipeline.svelte';
+	import PipelinePanel from './PipelinePanel.svelte';
+	import ImagePreview from './ImagePreview.svelte';
+
+	interface Props {
+		open: boolean;
+		image: ImageEntry | null;
+		device: Device;
+		onClose: () => void;
+		onApply: (imageId: string, config: PipelineConfig) => void;
+	}
+
+	let { open, image, device, onClose, onApply }: Props = $props();
+
+	// Local pipeline config for editing (cloned from image override or global)
+	let localConfig = $state<PipelineConfig>(clonePipelineConfig(DEFAULT_PIPELINE_CONFIG));
+
+	// Preview state
+	let previewDataUrl = $state<string | null>(null);
+	let isProcessing = $state(false);
+
+	// Initialize local config when modal opens or image changes
+	$effect(() => {
+		if (open && image) {
+			// Use image's override if it has one, otherwise use global config
+			const sourceConfig = image.pipelineOverride ?? pipelineStore.globalConfig;
+			localConfig = clonePipelineConfig(sourceConfig);
+			// Set initial preview to current processed image
+			previewDataUrl = image.processedDataUrl;
+		}
+	});
+
+	function handleApply(): void {
+		if (!image) return;
+		onApply(image.id, localConfig);
+		onClose();
+	}
+
+	function handleReset(): void {
+		localConfig = clonePipelineConfig(pipelineStore.globalConfig);
+	}
+
+	function handleConfigChange(newConfig: PipelineConfig): void {
+		localConfig = newConfig;
+	}
+
+	function handlePreviewUpdate(dataUrl: string): void {
+		previewDataUrl = dataUrl;
+	}
+
+	function handleProcessingChange(processing: boolean): void {
+		isProcessing = processing;
+	}
+
+	function handleBackdropClick(e: MouseEvent): void {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent): void {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+</script>
+
+{#if open && image}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="edit-modal-title"
+		class="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 backdrop-blur-sm"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeyDown}
+	>
+		<div
+			class="
+				bg-white rounded-lg shadow-[--shadow-modal]
+				w-full h-full
+				sm:w-[95vw] sm:h-[90vh] sm:max-w-6xl
+				flex flex-col
+				overflow-hidden
+			"
+		>
+			<!-- Header -->
+			<header class="flex items-center justify-between px-4 py-3 border-b border-grey-200">
+				<h2 id="edit-modal-title" class="text-lg font-semibold text-ink truncate">
+					Edit: {image.filename}
+				</h2>
+
+				<div class="flex items-center gap-2">
+					<button
+						type="button"
+						class="
+							flex items-center gap-1.5
+							px-3 py-1.5
+							text-grey-500
+							hover:text-ink hover:bg-grey-100
+							rounded-md
+							text-sm font-medium
+							transition-colors duration-150
+						"
+						onclick={handleReset}
+						title="Reset to global defaults"
+					>
+						<RotateCcw class="w-4 h-4" />
+						<span class="hidden sm:inline">Reset</span>
+					</button>
+
+					<button
+						type="button"
+						class="
+							px-4 py-1.5
+							bg-white text-ink
+							border border-grey-200
+							rounded-md
+							text-sm font-medium
+							hover:bg-grey-50 hover:border-grey-300
+							transition-colors duration-150
+						"
+						onclick={onClose}
+					>
+						Cancel
+					</button>
+
+					<button
+						type="button"
+						class="
+							px-4 py-1.5
+							bg-accent text-white
+							rounded-md
+							text-sm font-medium
+							hover:bg-accent-hover
+							transition-colors duration-150
+							disabled:opacity-50
+						"
+						onclick={handleApply}
+						disabled={isProcessing}
+					>
+						Apply
+					</button>
+
+					<button
+						type="button"
+						class="p-1.5 text-grey-400 hover:text-grey-600 hover:bg-grey-100 rounded-md sm:hidden"
+						onclick={onClose}
+						aria-label="Close"
+					>
+						<X class="w-5 h-5" />
+					</button>
+				</div>
+			</header>
+
+			<!-- Content -->
+			<div class="flex-1 flex flex-col lg:flex-row overflow-hidden">
+				<!-- Preview section -->
+				<div class="flex-1 p-4 overflow-auto bg-grey-50">
+					<ImagePreview
+						{image}
+						{device}
+						config={localConfig}
+						onPreviewUpdate={handlePreviewUpdate}
+						onProcessingChange={handleProcessingChange}
+					/>
+				</div>
+
+				<!-- Pipeline panel -->
+				<div class="w-full lg:w-80 xl:w-96 border-t lg:border-t-0 lg:border-l border-grey-200 overflow-auto">
+					<PipelinePanel
+						config={localConfig}
+						{device}
+						onConfigChange={handleConfigChange}
+					/>
+				</div>
+			</div>
+
+			<!-- Footer with device info -->
+			<footer class="px-4 py-2 border-t border-grey-200 bg-grey-50">
+				<p class="text-xs text-grey-400 font-mono">
+					Device: {device.brand} {device.name} · {device.width} × {device.height} · {device.greyLevels} levels
+				</p>
+			</footer>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/PipelinePanel.svelte b/src/lib/components/PipelinePanel.svelte
new file mode 100644
index 0000000..07bcdec
--- /dev/null
+++ b/src/lib/components/PipelinePanel.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { Save } from 'lucide-svelte';
+	import type { PipelineConfig, Device, CropMode, ResizeMode, GreyscaleMethod, DitherAlgorithm } from '$lib/types';
+	import { pipelineStore } from '$lib/stores/pipeline.svelte';
+	import PipelineStep from './PipelineStep.svelte';
+
+	interface Props {
+		config: PipelineConfig;
+		device: Device;
+		onConfigChange: (config: PipelineConfig) => void;
+	}
+
+	let { config, device, onConfigChange }: Props = $props();
+
+	// Preset management
+	let showSaveDialog = $state(false);
+	let newPresetName = $state('');
+
+	// Helper to update a step
+	function updateStep<K extends keyof PipelineConfig>(
+		step: K,
+		updates: Partial<PipelineConfig[K]>
+	): void {
+		onConfigChange({
+			...config,
+			[step]: { ...config[step], ...updates }
+		});
+	}
+
+	function handlePresetChange(e: Event): void {
+		const select = e.target as HTMLSelectElement;
+		const preset = pipelineStore.allPresets.find((p) => p.id === select.value);
+		if (preset) {
+			onConfigChange(JSON.parse(JSON.stringify(preset.config)));
+		}
+	}
+
+	function handleSavePreset(): void {
+		if (!newPresetName.trim()) return;
+		pipelineStore.saveAsPreset(newPresetName.trim());
+		showSaveDialog = false;
+		newPresetName = '';
+	}
+
+	// Options for selects
+	const cropModes: { value: CropMode; label: string }[] = [
+		{ value: 'center', label: 'Center' },
+		{ value: 'top', label: 'Top' },
+		{ value: 'bottom', label: 'Bottom' },
+		{ value: 'manual', label: 'Manual (coming soon)' }
+	];
+
+	const resizeModes: { value: ResizeMode; label: string }[] = [
+		{ value: 'cover', label: 'Cover (fill, may crop)' },
+		{ value: 'contain', label: 'Contain (fit, may pad)' },
+		{ value: 'stretch', label: 'Stretch (distort)' }
+	];
+
+	const greyscaleMethods: { value: GreyscaleMethod; label: string }[] = [
+		{ value: 'luminosity', label: 'Luminosity (natural)' },
+		{ value: 'average', label: 'Average' },
+		{ value: 'lightness', label: 'Lightness' },
+		{ value: 'red', label: 'Red channel' },
+		{ value: 'green', label: 'Green channel' },
+		{ value: 'blue', label: 'Blue channel' }
+	];
+
+	const ditherAlgorithms: { value: DitherAlgorithm; label: string }[] = [
+		{ value: 'floyd-steinberg', label: 'Floyd-Steinberg' },
+		{ value: 'ordered', label: 'Ordered (Bayer)' },
+		{ value: 'atkinson', label: 'Atkinson' }
+	];
+</script>
+
+<div class="flex flex-col h-full">
+	<!-- Preset selector -->
+	<div class="p-4 border-b border-grey-200">
+		<label class="block text-xs font-medium text-grey-500 uppercase tracking-wide mb-2">
+			Preset
+		</label>
+		<div class="flex gap-2">
+			<select
+				class="
+					flex-1 px-3 py-2
+					bg-white text-ink text-sm
+					border border-grey-200 rounded-md
+					focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent
+				"
+				value={pipelineStore.selectedPresetId ?? ''}
+				onchange={handlePresetChange}
+			>
+				{#each pipelineStore.allPresets as preset}
+					<option value={preset.id}>
+						{preset.name}{preset.isBuiltIn ? '' : ' (custom)'}
+					</option>
+				{/each}
+			</select>
+
+			<button
+				type="button"
+				class="
+					p-2
+					bg-white text-grey-500
+					border border-grey-200 rounded-md
+					hover:bg-grey-50 hover:text-ink
+					transition-colors duration-150
+				"
+				onclick={() => (showSaveDialog = true)}
+				title="Save as preset"
+			>
+				<Save class="w-4 h-4" />
+			</button>
+		</div>
+
+		{#if showSaveDialog}
+			<div class="mt-2 flex gap-2">
+				<input
+					type="text"
+					bind:value={newPresetName}
+					placeholder="Preset name"
+					class="
+						flex-1 px-3 py-1.5
+						bg-white text-ink text-sm
+						border border-grey-200 rounded-md
+						focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent
+					"
+				/>
+				<button
+					type="button"
+					class="px-3 py-1.5 bg-accent text-white text-sm rounded-md hover:bg-accent-hover"
+					onclick={handleSavePreset}
+				>
+					Save
+				</button>
+				<button
+					type="button"
+					class="px-3 py-1.5 text-grey-500 text-sm hover:text-ink"
+					onclick={() => (showSaveDialog = false)}
+				>
+					Cancel
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Pipeline steps -->
+	<div class="flex-1 overflow-auto">
+		<div class="text-xs font-medium text-grey-500 uppercase tracking-wide px-4 py-2 bg-grey-50">
+			Pipeline Steps
+		</div>
+
+		<!-- Crop -->
+		<PipelineStep
+			label="Crop"
+			enabled={config.crop.enabled}
+			onToggle={(enabled) => updateStep('crop', { enabled })}
+			defaultExpanded
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Mode</label>
+				<select
+					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
+					value={config.crop.mode}
+					onchange={(e) => updateStep('crop', { mode: (e.target as HTMLSelectElement).value as CropMode })}
+				>
+					{#each cropModes as mode}
+						<option value={mode.value}>{mode.label}</option>
+					{/each}
+				</select>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Resize -->
+		<PipelineStep
+			label="Resize"
+			enabled={config.resize.enabled}
+			onToggle={(enabled) => updateStep('resize', { enabled })}
+			defaultExpanded
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Mode</label>
+				<select
+					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
+					value={config.resize.mode}
+					onchange={(e) => updateStep('resize', { mode: (e.target as HTMLSelectElement).value as ResizeMode })}
+				>
+					{#each resizeModes as mode}
+						<option value={mode.value}>{mode.label}</option>
+					{/each}
+				</select>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Brightness -->
+		<PipelineStep
+			label="Brightness"
+			enabled={config.brightness.enabled}
+			onToggle={(enabled) => updateStep('brightness', { enabled })}
+		>
+			{#snippet children()}
+				<div class="flex items-center gap-2">
+					<input
+						type="range"
+						min="-100"
+						max="100"
+						step="1"
+						value={config.brightness.value}
+						oninput={(e) => updateStep('brightness', { value: parseInt((e.target as HTMLInputElement).value) })}
+						class="flex-1"
+					/>
+					<span class="text-xs text-grey-500 w-8 text-right">{config.brightness.value}</span>
+				</div>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Contrast -->
+		<PipelineStep
+			label="Contrast"
+			enabled={config.contrast.enabled}
+			onToggle={(enabled) => updateStep('contrast', { enabled })}
+		>
+			{#snippet children()}
+				<div class="flex items-center gap-2">
+					<input
+						type="range"
+						min="-100"
+						max="100"
+						step="1"
+						value={config.contrast.value}
+						oninput={(e) => updateStep('contrast', { value: parseInt((e.target as HTMLInputElement).value) })}
+						class="flex-1"
+					/>
+					<span class="text-xs text-grey-500 w-8 text-right">{config.contrast.value}</span>
+				</div>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Gamma -->
+		<PipelineStep
+			label="Gamma"
+			enabled={config.gamma.enabled}
+			onToggle={(enabled) => updateStep('gamma', { enabled })}
+		>
+			{#snippet children()}
+				<div class="flex items-center gap-2">
+					<input
+						type="range"
+						min="0.2"
+						max="3"
+						step="0.1"
+						value={config.gamma.value}
+						oninput={(e) => updateStep('gamma', { value: parseFloat((e.target as HTMLInputElement).value) })}
+						class="flex-1"
+					/>
+					<span class="text-xs text-grey-500 w-10 text-right">{config.gamma.value.toFixed(1)}</span>
+				</div>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Auto-levels -->
+		<PipelineStep
+			label="Auto-levels"
+			enabled={config.autoLevels.enabled}
+			onToggle={(enabled) => updateStep('autoLevels', { enabled })}
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Clip %</label>
+				<div class="flex items-center gap-2">
+					<input
+						type="range"
+						min="0"
+						max="5"
+						step="0.1"
+						value={config.autoLevels.clipPercent}
+						oninput={(e) => updateStep('autoLevels', { clipPercent: parseFloat((e.target as HTMLInputElement).value) })}
+						class="flex-1"
+					/>
+					<span class="text-xs text-grey-500 w-10 text-right">{config.autoLevels.clipPercent.toFixed(1)}%</span>
+				</div>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Greyscale -->
+		<PipelineStep
+			label="Greyscale"
+			enabled={config.greyscale.enabled}
+			onToggle={(enabled) => updateStep('greyscale', { enabled })}
+			defaultExpanded
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Method</label>
+				<select
+					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
+					value={config.greyscale.method}
+					onchange={(e) => updateStep('greyscale', { method: (e.target as HTMLSelectElement).value as GreyscaleMethod })}
+				>
+					{#each greyscaleMethods as method}
+						<option value={method.value}>{method.label}</option>
+					{/each}
+				</select>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Sharpen -->
+		<PipelineStep
+			label="Sharpen"
+			enabled={config.sharpen.enabled}
+			onToggle={(enabled) => updateStep('sharpen', { enabled })}
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Amount</label>
+				<div class="flex items-center gap-2">
+					<input
+						type="range"
+						min="0"
+						max="100"
+						step="1"
+						value={config.sharpen.amount}
+						oninput={(e) => updateStep('sharpen', { amount: parseInt((e.target as HTMLInputElement).value) })}
+						class="flex-1"
+					/>
+					<span class="text-xs text-grey-500 w-8 text-right">{config.sharpen.amount}</span>
+				</div>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Quantize -->
+		<PipelineStep
+			label="Quantize"
+			enabled={config.quantize.enabled}
+			onToggle={(enabled) => updateStep('quantize', { enabled })}
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Levels</label>
+				<select
+					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
+					value={config.quantize.levels}
+					onchange={(e) => updateStep('quantize', { levels: parseInt((e.target as HTMLSelectElement).value) })}
+				>
+					<option value={device.greyLevels}>{device.greyLevels} (device default)</option>
+					<option value="2">2</option>
+					<option value="4">4</option>
+					<option value="8">8</option>
+					<option value="16">16</option>
+					<option value="32">32</option>
+					<option value="64">64</option>
+					<option value="256">256 (no quantization)</option>
+				</select>
+			{/snippet}
+		</PipelineStep>
+
+		<!-- Dither -->
+		<PipelineStep
+			label="Dither"
+			enabled={config.dither.enabled}
+			onToggle={(enabled) => updateStep('dither', { enabled })}
+		>
+			{#snippet children()}
+				<label class="block text-xs text-grey-500 mb-1">Algorithm</label>
+				<select
+					class="w-full px-2 py-1.5 text-sm border border-grey-200 rounded-md"
+					value={config.dither.algorithm}
+					onchange={(e) => updateStep('dither', { algorithm: (e.target as HTMLSelectElement).value as DitherAlgorithm })}
+				>
+					{#each ditherAlgorithms as algo}
+						<option value={algo.value}>{algo.label}</option>
+					{/each}
+				</select>
+			{/snippet}
+		</PipelineStep>
+	</div>
+</div>
diff --git a/src/lib/components/PipelineStep.svelte b/src/lib/components/PipelineStep.svelte
new file mode 100644
index 0000000..0c284e6
--- /dev/null
+++ b/src/lib/components/PipelineStep.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label: string;
+		enabled: boolean;
+		onToggle: (enabled: boolean) => void;
+		children?: Snippet;
+		defaultExpanded?: boolean;
+	}
+
+	let { label, enabled, onToggle, children, defaultExpanded = false }: Props = $props();
+
+	let expanded = $state(defaultExpanded);
+
+	function handleToggle(): void {
+		onToggle(!enabled);
+	}
+
+	function toggleExpand(): void {
+		if (enabled && children) {
+			expanded = !expanded;
+		}
+	}
+</script>
+
+<div class="border-b border-grey-100 last:border-b-0">
+	<!-- Header row -->
+	<div class="flex items-center gap-2 px-4 py-3">
+		<!-- Checkbox -->
+		<input
+			type="checkbox"
+			checked={enabled}
+			onchange={handleToggle}
+			class="
+				w-4 h-4
+				rounded
+				border-grey-300
+				text-accent
+				focus:ring-accent focus:ring-offset-0
+				cursor-pointer
+			"
+		/>
+
+		<!-- Label + expand toggle -->
+		<button
+			type="button"
+			class="
+				flex-1 flex items-center justify-between
+				text-sm font-medium
+				{enabled ? 'text-ink' : 'text-grey-400'}
+				text-left
+			"
+			onclick={toggleExpand}
+			disabled={!enabled || !children}
+		>
+			<span>{label}</span>
+
+			{#if children && enabled}
+				{#if expanded}
+					<ChevronDown class="w-4 h-4 text-grey-400" />
+				{:else}
+					<ChevronRight class="w-4 h-4 text-grey-400" />
+				{/if}
+			{/if}
+		</button>
+	</div>
+
+	<!-- Expanded content -->
+	{#if expanded && enabled && children}
+		<div class="px-4 pb-3 pl-10">
+			{@render children()}
+		</div>
+	{/if}
+</div>