diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index 05657577..160a72a5 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -30,7 +30,7 @@
 		</p>
 	</div>
 
-	<div class="rounded border border-border-default bg-background-default bg-background-default p-6">
+	<div class="rounded border border-border-default bg-background-default p-6">
 		<form>
 			<div class="relative flex gap-4 border-l border-border-default pl-6">
 				<div class="absolute -top-0 -left-3">
diff --git a/web/src/routes/settings/+layout.server.ts b/web/src/routes/settings/+layout.server.ts
new file mode 100644
index 00000000..b774a0e8
--- /dev/null
+++ b/web/src/routes/settings/+layout.server.ts
@@ -0,0 +1,6 @@
+import { requireAuth } from "$lib/auth/guards";
+import type { LayoutServerLoad } from "./$types";
+
+export const load: LayoutServerLoad = (event) => {
+	requireAuth(event);
+};
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
new file mode 100644
index 00000000..331d4b08
--- /dev/null
+++ b/web/src/routes/settings/+layout.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import User from "$icon/user";
+	import Key from "$icon/key";
+	import Mail from "$icon/mail";
+	import Bell from "$icon/bell";
+	import Volleyball from "$icon/volleyball";
+	import Spool from "$icon/spool";
+	import Globe from "$icon/globe";
+
+	let { children } = $props();
+
+	const tabs: TabDef[] = [
+		{ id: "profile", label: "Profile", href: "/settings", icon: User },
+		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
+		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
+		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
+		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
+		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
+	];
+
+	const tabSegment = $derived(page.url.pathname.replace(/^\/settings\/?/, "").split("/")[0]);
+	const active = $derived(
+		["keys", "emails", "notifications", "knots", "spindles", "sites"].includes(tabSegment)
+			? tabSegment
+			: "profile"
+	);
+</script>
+
+<svelte:head>
+	<title>Settings &middot; Tangled</title>
+</svelte:head>
+
+<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
+	<div class="px-2 py-2">
+		<h1 class="text-xl font-bold text-foreground-default">Settings</h1>
+	</div>
+
+	<div class="mt-4 rounded border border-border-default bg-background-default p-6">
+		<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
+			<div class="col-span-1">
+				<Tabs {tabs} {active} label="Settings" vertical />
+			</div>
+
+			<div class="col-span-1 flex flex-col gap-6 md:col-span-3">
+				{@render children()}
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
new file mode 100644
index 00000000..7512a58b
--- /dev/null
+++ b/web/src/routes/settings/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import ProfileTab from "$lib/components/settings/tabs/ProfileTab.svelte";
+</script>
+
+<ProfileTab />
diff --git a/web/src/routes/settings/emails/+page.svelte b/web/src/routes/settings/emails/+page.svelte
new file mode 100644
index 00000000..b6757685
--- /dev/null
+++ b/web/src/routes/settings/emails/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import EmailsTab from "$lib/components/settings/tabs/EmailsTab.svelte";
+</script>
+
+<EmailsTab />
diff --git a/web/src/routes/settings/notifications/+page.svelte b/web/src/routes/settings/notifications/+page.svelte
new file mode 100644
index 00000000..b4e84cef
--- /dev/null
+++ b/web/src/routes/settings/notifications/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import NotificationsTab from "$lib/components/settings/tabs/NotificationsTab.svelte";
+</script>
+
+<NotificationsTab />
diff --git a/web/src/routes/settings/sites/+page.svelte b/web/src/routes/settings/sites/+page.svelte
new file mode 100644
index 00000000..a4b5f916
--- /dev/null
+++ b/web/src/routes/settings/sites/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SitesTab from "$lib/components/settings/tabs/SitesTab.svelte";
+</script>
+
+<SitesTab />