diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index ec68844..9f912e4 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -9,6 +9,7 @@ import type {
 	Registry,
 	RegistryImage,
 	Settings,
+	Stage,
 	StageEnv,
 	Volume
 } from './types';
@@ -115,6 +116,20 @@ export function deleteProject(id: string): Promise<{ deleted: string }> {
 	return del<{ deleted: string }>(`/api/projects/${id}`);
 }
 
+// ── Stages ─────────────────────────────────────────────────────────
+
+export function createStage(projectId: string, data: Partial<Stage>): Promise<Stage> {
+	return post<Stage>(`/api/projects/${projectId}/stages`, data);
+}
+
+export function updateStage(projectId: string, stageId: string, data: Partial<Stage>): Promise<Stage> {
+	return put<Stage>(`/api/projects/${projectId}/stages/${stageId}`, data);
+}
+
+export function deleteStage(projectId: string, stageId: string): Promise<void> {
+	return del<void>(`/api/projects/${projectId}/stages/${stageId}`);
+}
+
 // ── Instances ───────────────────────────────────────────────────────
 
 export function listInstances(projectId: string, stageId: string): Promise<Instance[]> {
diff --git a/web/src/routes/projects/[id]/+page.svelte b/web/src/routes/projects/[id]/+page.svelte
index a691884..8d4df0a 100644
--- a/web/src/routes/projects/[id]/+page.svelte
+++ b/web/src/routes/projects/[id]/+page.svelte
@@ -7,7 +7,9 @@
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import Skeleton from '$lib/components/Skeleton.svelte';
-	import { IconTrash, IconKey, IconHardDrive, IconDeploy, IconChevronRight, IconClock, IconTag, IconLoader } from '$lib/components/icons';
+	import { IconTrash, IconKey, IconHardDrive, IconDeploy, IconChevronRight, IconClock, IconTag, IconLoader, IconPlus } from '$lib/components/icons';
+	import FormField from '$lib/components/FormField.svelte';
+	import { toasts } from '$lib/stores/toast';
 	import { t } from '$lib/i18n';
 
 	let project = $state<Project | null>(null);
@@ -23,6 +25,45 @@
 	let deployError = $state('');
 
 	let availableTags = $state<string[]>([]);
+
+	// Add stage form
+	let showAddStage = $state(false);
+	let stageName = $state('');
+	let stageTagPattern = $state('*');
+	let stageAutoDeploy = $state(true);
+	let stageMaxInstances = $state('1');
+	let addingStage = $state(false);
+
+	async function handleAddStage() {
+		if (!stageName.trim()) return;
+		addingStage = true;
+		try {
+			await api.createStage(projectId, {
+				name: stageName.trim(),
+				tag_pattern: stageTagPattern.trim() || '*',
+				auto_deploy: stageAutoDeploy,
+				max_instances: parseInt(stageMaxInstances) || 1,
+			});
+			toasts.success(`Stage "${stageName}" created`);
+			stageName = ''; stageTagPattern = '*'; stageAutoDeploy = true; stageMaxInstances = '1';
+			showAddStage = false;
+			await loadProject();
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to create stage');
+		} finally {
+			addingStage = false;
+		}
+	}
+
+	async function handleDeleteStage(stageId: string, name: string) {
+		try {
+			await api.deleteStage(projectId, stageId);
+			toasts.success(`Stage "${name}" deleted`);
+			await loadProject();
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to delete stage');
+		}
+	}
 	let tagsLoading = $state(false);
 
 	let showDeleteConfirm = $state(false);
@@ -205,9 +246,45 @@
 
 		<!-- Stages & Instances -->
 		<div>
-			<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('projectDetail.stages')}</h2>
+			<div class="flex items-center justify-between">
+				<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('projectDetail.stages')}</h2>
+				<button
+					type="button"
+					onclick={() => { showAddStage = !showAddStage; }}
+					class="inline-flex items-center gap-1.5 rounded-lg {showAddStage ? 'border border-[var(--border-primary)] text-[var(--text-secondary)]' : 'bg-[var(--color-brand-600)] text-white'} px-3 py-1.5 text-xs font-medium transition-all hover:opacity-90"
+				>
+					{#if !showAddStage}<IconPlus size={14} />{/if}
+					{showAddStage ? $t('projects.cancel') : 'Add Stage'}
+				</button>
+			</div>
 
-			{#if stages.length === 0}
+			{#if showAddStage}
+				<div class="mt-3 rounded-xl border border-[var(--color-brand-200)] bg-[var(--color-brand-50)]/30 p-4 animate-scale-in">
+					<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+						<FormField label="Name *" name="stageName" bind:value={stageName} placeholder="dev" />
+						<FormField label="Tag Pattern" name="stagePattern" bind:value={stageTagPattern} placeholder="dev-*" helpText="Glob pattern (e.g., dev-*, v*)" />
+						<FormField label="Max Instances" name="stageMax" type="number" bind:value={stageMaxInstances} />
+						<div class="flex items-end pb-1">
+							<label class="flex items-center gap-2 text-sm text-[var(--text-primary)]">
+								<input type="checkbox" bind:checked={stageAutoDeploy} class="rounded" />
+								Auto Deploy
+							</label>
+						</div>
+					</div>
+					<div class="mt-3 flex justify-end">
+						<button
+							type="button"
+							onclick={handleAddStage}
+							disabled={addingStage || !stageName.trim()}
+							class="rounded-lg bg-[var(--color-brand-600)] px-4 py-2 text-sm font-medium text-white hover:bg-[var(--color-brand-700)] disabled:opacity-50 transition-all"
+						>
+							{addingStage ? 'Creating...' : 'Create Stage'}
+						</button>
+					</div>
+				</div>
+			{/if}
+
+			{#if stages.length === 0 && !showAddStage}
 				<div class="mt-4">
 					<EmptyState title={$t('projectDetail.noStages')} icon="instances" />
 				</div>
@@ -240,6 +317,14 @@
 										<IconDeploy size={14} />
 										{$t('projectDetail.deployNewVersion')}
 									</button>
+									<button
+										type="button"
+										title="Delete stage"
+										onclick={() => { if (confirm(`Delete stage "${stage.name}"?`)) handleDeleteStage(stage.id, stage.name); }}
+										class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--color-danger-light)] hover:text-[var(--color-danger)] transition-colors"
+									>
+										<IconTrash size={14} />
+									</button>
 								</div>
 							</div>
 
diff --git a/web/src/routes/projects/[id]/env/+page.svelte b/web/src/routes/projects/[id]/env/+page.svelte
index d86c3e4..1a128d8 100644
--- a/web/src/routes/projects/[id]/env/+page.svelte
+++ b/web/src/routes/projects/[id]/env/+page.svelte
@@ -34,7 +34,7 @@
 		error = '';
 		try {
 			const detail = await api.getProject(projectId);
-			stages = detail.stages;
+			stages = detail.stages ?? [];
 			try {
 				projectEnv = JSON.parse(detail.project.env || '{}');
 			} catch {