diff --git a/web/src/lib/components/home/SelfHostSection.stories.svelte b/web/src/lib/components/home/SelfHostSection.stories.svelte
new file mode 100644
index 000000000..591255480
--- /dev/null
+++ b/web/src/lib/components/home/SelfHostSection.stories.svelte
@@ -0,0 +1,13 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SelfHostSection from "$lib/components/home/SelfHostSection.svelte";
+
+	const { Story } = defineMeta({
+		title: "Home/SelfHostSection",
+		component: SelfHostSection,
+		tags: ["autodocs"],
+		parameters: { layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" />
diff --git a/web/src/lib/components/home/SelfHostSection.svelte b/web/src/lib/components/home/SelfHostSection.svelte
new file mode 100644
index 000000000..d408ff833
--- /dev/null
+++ b/web/src/lib/components/home/SelfHostSection.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { play } from "cuelume";
+	import { onMount, type Component, type Snippet } from "svelte";
+	import FloppyComputer from "$lib/components/home/electronics/FloppyComputer.svelte";
+	import PiCartridge from "$lib/components/home/electronics/PiCartridge.svelte";
+	import SectionHeader from "$lib/components/home/SectionHeader.svelte";
+	import SnesCartridge from "$lib/components/home/electronics/SnesCartridge.svelte";
+	import Sticker from "$lib/components/home/Sticker.svelte";
+	import { formStep } from "$lib/components/ui/FormStep.svelte";
+	import StepMarker from "$lib/components/ui/StepMarker.svelte";
+
+	const MACHINES: Component<{ class?: string }>[] = [PiCartridge, SnesCartridge, FloppyComputer];
+
+	let shown = $state<number>();
+	const Machine = $derived(shown === undefined ? undefined : MACHINES[shown]);
+	onMount(() => {
+		shown = Math.floor(Math.random() * MACHINES.length);
+	});
+
+	const next = () => {
+		if (shown === undefined) return;
+		shown = (shown + 1) % MACHINES.length;
+		play("toggle", { theme: "mech" });
+	};
+</script>
+
+{#snippet step(n: number, body: Snippet, last = false)}
+	{@const slot = formStep(last ? { connected: false, spacing: "none" } : {})}
+	<li class={slot.root({ class: last && "border-l border-transparent" })}>
+		<StepMarker class={slot.marker({ class: "bg-background-muted" })}>{n}</StepMarker>
+		<p class="{slot.body()} typography-paragraph-large text-foreground-muted">
+			{@render body()}
+		</p>
+	</li>
+{/snippet}
+
+{#snippet pick()}
+	You can self-host any part of Tangled: repository hosting using
+	<span class="text-foreground-default">knots</span>, CI using
+	<span class="text-foreground-default">spindles</span>, or custom clients.
+{/snippet}
+
+{#snippet grab()}
+	Grab your software of choice using our official NixOS module or Docker images.
+{/snippet}
+
+{#snippet plop()}
+	Plop that onto your VPS or homelab and you are off to the races!
+{/snippet}
+
+<section class="px-md py-5xl md:px-xl md:py-28">
+	<SectionHeader
+		title="Self-host any part of Tangled."
+		subtitle="On the cloud or in your homelab."
+	>
+		{#snippet stickers()}
+			<Sticker tone="deep" rotate={-5}>Bring</Sticker>
+			<Sticker tone="soft" rotate={4} class="z-10 -mx-1.5 -translate-y-2">your own</Sticker>
+			<button type="button" tabindex={-1} class="cursor-pointer" onclick={next}>
+				<Sticker tone="accent" rotate={-3}>box</Sticker>
+			</button>
+		{/snippet}
+	</SectionHeader>
+
+	<div class="mx-auto grid max-w-page grid-cols-1 items-center gap-2xl md:grid-cols-2 md:gap-4xl">
+		<div class="aspect-square">
+			<Machine />
+		</div>
+		<ol class="pl-3">
+			{@render step(1, pick)}
+			{@render step(2, grab)}
+			{@render step(3, plop, true)}
+		</ol>
+	</div>
+</section>