diff --git a/web/src/routes/repo/new/+page.server.ts b/web/src/routes/repo/new/+page.server.ts
new file mode 100644
index 00000000..a68ccc6c
--- /dev/null
+++ b/web/src/routes/repo/new/+page.server.ts
@@ -0,0 +1,6 @@
+import { requireAuth } from "$lib/auth/guards";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = (event) => {
+	requireAuth(event);
+};
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
new file mode 100644
index 00000000..66427067
--- /dev/null
+++ b/web/src/routes/repo/new/+page.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { getAuth } from "$lib/auth.svelte";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Radio from "$lib/components/ui/Radio.svelte";
+	import BookPlus from "$icon/book-plus";
+
+	const auth = getAuth();
+	const user = $derived(auth.currentUser);
+
+	let repoName = $state("");
+	let description = $state("");
+	let defaultBranch = $state("main");
+	let selectedKnot = $state("knot1.tangled.sh");
+
+	const knots = ["knot1.tangled.sh"];
+</script>
+
+<svelte:head>
+	<title>New repository &middot; Tangled</title>
+</svelte:head>
+
+<div class="mx-auto w-full max-w-2xl px-4 py-12">
+	<div class="px-6 py-2">
+		<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
+		<p class="text-sm text-foreground-subtle mb-1">
+			Repositories contain a project's files and version history. All repositories are publicly
+			accessible.
+		</p>
+	</div>
+
+	<div class="bg-background-default drop-shadow-sm rounded p-6">
+		<form>
+			<div class="flex gap-4 relative border-l border-border-default pl-6">
+				<div class="absolute -left-3 -top-0">
+					<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
+						1
+					</div>
+				</div>
+
+				<div class="flex-1 pb-12">
+					<h2 class="text-lg font-medium text-foreground-default">General</h2>
+					<div class="text-sm text-foreground-subtle mb-4">Basic repository information.</div>
+
+					<div class="space-y-2">
+						<div>
+							<label class="block text-sm font-bold text-foreground-default mb-1">
+								Repository name
+							</label>
+							<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
+								<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-foreground-muted md:border md:border-r-0 md:border-border-default md:rounded-l md:bg-background-inset">
+									<Avatar src={user?.avatar} handle={user?.handle} size="size-5" />
+									<span>{user?.handle ?? "…"}</span>
+								</div>
+								<input
+									id="name"
+									name="name"
+									type="text"
+									placeholder="repository-name"
+									bind:value={repoName}
+									required
+									class="flex-1 md:rounded-r md:rounded-l-none py-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong px-2"
+								/>
+							</div>
+							<p class="text-sm text-foreground-subtle mt-1">
+								Choose a unique, descriptive name for your repository. Use letters, numbers, and
+								hyphens.
+							</p>
+						</div>
+
+						<div>
+							<label for="description" class="block text-sm font-bold text-foreground-default mb-1">
+								Description
+							</label>
+							<input
+								id="description"
+								name="description"
+								type="text"
+								placeholder="A brief description of your project..."
+								maxlength={140}
+								bind:value={description}
+								class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
+							/>
+							<p class="text-sm text-foreground-subtle mt-1">
+								Optional. A short description to help others understand what your project does (max
+								140 characters).
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex gap-4 relative border-l border-border-default pl-6">
+				<div class="absolute -left-3 -top-0">
+					<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
+						2
+					</div>
+				</div>
+
+				<div class="flex-1">
+					<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
+					<div class="text-sm text-foreground-subtle mb-4">Repository settings and hosting.</div>
+
+					<div class="space-y-2">
+						<div>
+							<label for="branch" class="block text-sm font-bold text-foreground-default mb-1">
+								Default branch
+							</label>
+							<input
+								id="branch"
+								name="branch"
+								type="text"
+								bind:value={defaultBranch}
+								required
+								class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
+							/>
+							<p class="text-sm text-foreground-subtle mt-1">
+								The primary branch where development happens. Common choices are "main" or "master".
+							</p>
+						</div>
+
+						<div>
+							<label class="block text-sm font-bold text-foreground-default mb-1">
+								Select a knot
+							</label>
+							<div class="w-full space-y-2">
+								{#each knots as knot}
+									<Radio value={knot} bind:group={selectedKnot} name="domain">
+										{knot}
+									</Radio>
+								{/each}
+							</div>
+							<p class="text-sm text-foreground-subtle mt-1">
+								A knot hosts repository data and handles Git operations. You can also
+								<a href="/settings/knots" class="underline">register your own knot</a>.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="mt-8 flex justify-end">
+				<Button variant="primary" type="submit" icon={BookPlus}>
+					Create repository (TODO)
+				</Button>
+			</div>
+		</form>
+	</div>
+</div>