diff --git a/src/main.css b/src/main.css
index c81e4b8..8238536 100644
--- a/src/main.css
+++ b/src/main.css
@@ -36,6 +36,13 @@ a:not(.no-link-style), button.link-style {
     @apply link-style-u;
 }
 
+h1:not(.no-heading-style) {
+    @apply text-4xl lg:text-5xl my-4;
+}
+h2:not(.no-heading-style) {
+    @apply text-teal-600 text-2xl font-semibold my-1;
+}
+
 
 @layer utilities {
     .link-style-u {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3e5f746..e264035 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,7 +36,7 @@
 		</div>
 	</nav>
 
-	<section class="container mx-auto">
+	<section class="Layout-content container w-full mx-auto">
 		<div class="m-1">
 			<slot />
 		</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2038c1b..81c8b9f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,15 +6,6 @@
 	import forkGraph from "./fork.svg?raw";
 </script>
 
-<style>
-	h1 {
-		@apply text-4xl lg:text-5xl my-4;
-	}
-	h2 {
-		@apply text-teal-600 text-2xl font-semibold my-1;
-	}
-</style>
-
 <div class="flex flex-col gap-8">
 	<div>
 		<h1>An all-encompassing, declarative<br> <span class="text-blue-800">package ecosystem</span>.</h1>
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
new file mode 100644
index 0000000..bc24033
--- /dev/null
+++ b/src/routes/docs/+layout.svelte
@@ -0,0 +1,27 @@
+<div class="Layout-docs-root flex max-xl:flex-col lg:gap-2 justify-around">
+	<div class="grow xl:relative">
+		<nav class="mt-12 xl:absolute lg:right-0">
+			<ul
+				class="p-1 xl:p-2 block bg-zinc-100 rounded-md text-teal-950
+			 		  flex flex-col text-xl tracking-tight w-fit xl:w-80 overflow-hidden"
+			>
+				{#each ["Introduction", "How to Meow 😼🐾", `Installing ${DISTRO}`, "aarch64-darwin??", "I want one too but it's a bootstrapped startup"] as m}
+					<li class="w-full h-10 odd:bg-blue-100 hover:bg-zinc-200 odd:hover:bg-blue-200 overflow-hidden flex items-center">
+						<a class="no-link-style truncate w-full h-full p-1" href="/docs/meowing">{m}</a>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+	</div>
+	<div class="Layout-docs-content max-w-[700px]"><slot /></div>
+	<div class="grow"></div>
+</div>
+
+<style>
+	:global(.Layout-docs-content p:not(.no-docs-style)) {
+		@apply text-xl tracking-tight mb-1;
+	}
+	:global(.Layout-docs-content h1:not(.no-docs-style)) {
+		@apply text-center underline underline-offset-8 decoration-teal-700 font-aladin text-teal-950;
+	}
+</style>
diff --git a/src/routes/docs/intro/+page.svelte b/src/routes/docs/intro/+page.svelte
new file mode 100644
index 0000000..f2459f7
--- /dev/null
+++ b/src/routes/docs/intro/+page.svelte
@@ -0,0 +1,27 @@
+<h1>Getting started in Floral</h1>
+<p>
+	Floral aims to be a fresh take on the Nix ecosystem. It maintains a few core components with the
+	extensive infrastructure required to make them shine:
+</p>
+
+<h2>{PKGS}</h2>
+<p>
+	Petalpkgs commodi quibusdam nixpkgs optimalis, proin libero sem chadoceros, derivationibus
+	patapum, ultra-flake structoribus caput. Nemo epiphaniæ instantiationibus florum flakes.grow
+	nusquam, excepturi garnier vegetatis pull-req magnitud
+</p>
+<p>
+	PatchOram-enabled susurrus invokePkgs quasi unlock-package, ante traferis derivatio? Nullam
+	adhuc initRd non-mutable, nemo derivaturus nixpkgs strictio nullig. Api.glibc, voluptaria
+	structoris
+</p>
+
+<h2>{DISTRO}</h2>
+<p>This is the Linux distribution.</p>
+<p>
+	FleurixOS volatile, init-systemibus nixtra-light, systemd totem morpheum dandelion-boot. RootFs?
+	Non sequitur flakulationibus exprimes multiuser.state generibus nixosOptionals metamorphose
+	transcende. "mkdir -p /run/shields.flake". Stipes initia commutata atemporal, dumptamen
+	tftp.bridge gloriosus, quod wireless non potest offerti? Nil moduli graecum, functio gitRepo
+	cloneState.temp conatus, potius florescat ssh.enableSubsystem.basiliskd.
+</p>
diff --git a/src/routes/docs/meowing/+page.svelte b/src/routes/docs/meowing/+page.svelte
new file mode 100644
index 0000000..46c052b
--- /dev/null
+++ b/src/routes/docs/meowing/+page.svelte
@@ -0,0 +1,2 @@
+<h1>You can meow by using your mouth.</h1>
+<p>Just be a cat! It's cheap (check AliExpress), easy, and most importantly.. fun!</p>