diff --git a/frontend/src/lib/components/AuthShell.svelte b/frontend/src/lib/components/AuthShell.svelte
new file mode 100644
index 0000000..e687038
--- /dev/null
+++ b/frontend/src/lib/components/AuthShell.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	let { title, subtitle, children }: {
+		title: string;
+		subtitle?: string;
+		children?: any;
+	} = $props();
+</script>
+
+<main class="auth">
+	<a class="brand" href="/">FamChore</a>
+	<div class="card">
+		<h1>{title}</h1>
+		{#if subtitle}
+			<p class="sub">{subtitle}</p>
+		{/if}
+		{@render children?.()}
+	</div>
+</main>
+
+<style>
+	.auth {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem 1rem;
+		background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
+		font-family: system-ui, -apple-system, sans-serif;
+		color: #1f2937;
+	}
+	.brand {
+		font-size: 1.15rem;
+		font-weight: 700;
+		color: #4338ca;
+		text-decoration: none;
+		margin-bottom: 1.5rem;
+	}
+	.card {
+		width: 100%;
+		max-width: 420px;
+		background: #fff;
+		border: 1px solid #e5e7eb;
+		border-radius: 16px;
+		box-shadow: 0 12px 30px rgba(67, 56, 202, 0.08);
+		padding: 2rem;
+	}
+	.card h1 {
+		margin: 0 0 0.35rem;
+		font-size: 1.5rem;
+	}
+	.sub {
+		margin: 0 0 1.5rem;
+		color: #6b7280;
+		font-size: 0.9rem;
+		line-height: 1.5;
+	}
+	@media (max-width: 480px) {
+		.card { padding: 1.5rem; }
+	}
+</style>