diff --git a/website/package.json b/website/package.json
index b30a5e7..8309e78 100644
--- a/website/package.json
+++ b/website/package.json
@@ -20,7 +20,6 @@
     "fumadocs-mdx": "^15.4.5",
     "fumadocs-ui": "^16.15.14",
     "lucide-react": "^1.14.0",
-    "motion": "^13.4.4",
     "next": "16.2.4",
     "next-themes": "^0.4.6",
     "posthog-js": "^1.418.10",
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 6b4fa4c..7fb61da 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -28,9 +28,6 @@ importers:
       lucide-react:
         specifier: ^1.14.0
         version: 1.14.0(react@19.2.4)
-      motion:
-        specifier: ^13.4.4
-        version: 13.4.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next:
         specifier: 16.2.4
         version: 16.2.4(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
diff --git a/website/public/landing/history.mp4 b/website/public/landing/history.mp4
new file mode 100644
index 0000000..3a3ce55
Binary files /dev/null and b/website/public/landing/history.mp4 differ
diff --git a/website/public/landing/live-terminal.mp4 b/website/public/landing/live-terminal.mp4
new file mode 100644
index 0000000..e30bf89
Binary files /dev/null and b/website/public/landing/live-terminal.mp4 differ
diff --git a/website/public/landing/request.png b/website/public/landing/request.png
new file mode 100644
index 0000000..3c49ae2
Binary files /dev/null and b/website/public/landing/request.png differ
diff --git a/website/public/landing/response.png b/website/public/landing/response.png
new file mode 100644
index 0000000..9c7b7df
Binary files /dev/null and b/website/public/landing/response.png differ
diff --git a/website/src/app/changelog/page.tsx b/website/src/app/changelog/page.tsx
index 8fe7ac8..7908df6 100644
--- a/website/src/app/changelog/page.tsx
+++ b/website/src/app/changelog/page.tsx
@@ -1,10 +1,13 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import { DocsBody } from 'fumadocs-ui/layouts/docs/page';
 import { getMDXComponents } from '@/components/mdx';
 import { changelog } from '@/lib/source';
 import Footer from '@/components/footer';
-import Nav from '@/components/nav';
+import { baseOptions } from '@/lib/layout.shared';
 
 const siteUrl = 'https://reqsh.dev';
 
@@ -35,27 +38,95 @@ export default async function ChangelogPage() {
   const Content = page.body;
 
   return (
-    <>
-      <Nav />
-      <main id="main-content" className="flex-1" tabIndex={-1}>
-        <div className="mx-auto max-w-2xl px-6 py-10">
-          <DocsBody>
-            <Content components={getMDXComponents()} />
-          </DocsBody>
-
-          <div className="mt-8">
+    <HomeLayout
+      {...baseOptions()}
+      id="main-content"
+      className="bg-fd-background text-fd-foreground"
+      tabIndex={-1}
+    >
+      <section className="border-b border-fd-border" aria-labelledby="changelog-heading">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:min-h-97.5 lg:grid-cols-[0.88fr_1.12fr]">
+          <div className="relative flex items-end px-5 py-16 sm:px-10 sm:py-20 lg:border-r lg:border-fd-border lg:px-14 lg:py-24 xl:px-20">
+            <span
+              className="absolute top-0 left-5 h-1 w-20 bg-brand sm:left-10 lg:left-14 xl:left-20"
+              aria-hidden="true"
+            />
+            <h1
+              id="changelog-heading"
+              className="text-[clamp(3.5rem,8vw,8rem)] leading-[0.9] font-semibold tracking-[-0.07em] text-balance"
+            >
+              Changelog
+            </h1>
+          </div>
+
+          <div className="flex flex-col justify-end border-t border-fd-border bg-fd-muted/45 px-5 py-12 sm:px-10 sm:py-16 lg:border-t-0 lg:px-14 lg:py-24 xl:px-20">
+            <p className="max-w-xl text-lg leading-8 text-fd-muted-foreground sm:text-xl sm:leading-9">
+              Every reqsh release, from new workflows to the smallest fixes. Newest updates appear
+              first.
+            </p>
             <a
               href="https://github.com/hars-21/reqsh/releases"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-accent"
+              className="mt-7 inline-flex w-fit items-center gap-2 border-b border-fd-foreground/35 pb-1 text-sm font-medium transition-colors hover:border-brand hover:text-brand"
             >
-              View all releases on GitHub
+              View releases on GitHub
+              <ArrowUpRight size={15} aria-hidden="true" />
             </a>
           </div>
         </div>
-      </main>
+      </section>
+
+      <section className="border-b border-fd-border" aria-label="Release history">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:grid-cols-[0.36fr_1fr]">
+          <aside className="border-b border-fd-border px-5 py-10 sm:px-10 lg:border-r lg:border-b-0 lg:px-14 lg:py-16 xl:px-20">
+            <div className="lg:sticky lg:top-24">
+              <p className="text-lg font-semibold tracking-[-0.02em]">Release archive</p>
+              <p className="mt-3 max-w-xs leading-7 text-fd-muted-foreground">
+                Features, fixes, and contributor notes, ordered from newest to oldest.
+              </p>
+
+              <div className="mt-8 border-y border-fd-border py-5">
+                <p className="font-mono text-xs text-fd-muted-foreground">Install the latest</p>
+                <Link
+                  href="/docs/install"
+                  className="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-brand transition-colors hover:text-brand-strong"
+                >
+                  Installation guide
+                  <ArrowRight size={15} aria-hidden="true" />
+                </Link>
+              </div>
+            </div>
+          </aside>
+
+          <article className="min-w-0 px-5 py-12 sm:px-10 sm:py-16 lg:px-14 lg:py-20 xl:px-20">
+            <DocsBody className="changelog-content">
+              <Content
+                components={getMDXComponents({
+                  h2: (props) => <h2 {...props} />,
+                })}
+              />
+            </DocsBody>
+
+            <div className="mt-16 border-t border-fd-border pt-8">
+              <p className="max-w-lg leading-7 text-fd-muted-foreground">
+                Looking for release assets, checksums, or older tags?
+              </p>
+              <a
+                href="https://github.com/hars-21/reqsh/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-brand transition-colors hover:text-brand-strong"
+              >
+                Browse every GitHub release
+                <ArrowUpRight size={15} aria-hidden="true" />
+              </a>
+            </div>
+          </article>
+        </div>
+      </section>
+
       <Footer />
-    </>
+    </HomeLayout>
   );
 }
diff --git a/website/src/app/docs/layout.tsx b/website/src/app/docs/layout.tsx
index 4a3b0ae..f4d217f 100644
--- a/website/src/app/docs/layout.tsx
+++ b/website/src/app/docs/layout.tsx
@@ -6,7 +6,17 @@ import { baseOptions } from '@/lib/layout.shared';
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <main id="main-content" className="min-h-screen" tabIndex={-1}>
-      <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
+      <DocsLayout
+        tree={source.getPageTree()}
+        {...baseOptions({ navOnlyLinks: true })}
+        sidebar={{
+          banner: (
+            <p className="px-2 pt-2 text-sm font-semibold tracking-[-0.01em] text-fd-foreground">
+              Documentation
+            </p>
+          ),
+        }}
+      >
         {children}
       </DocsLayout>
     </main>
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index f89fb66..ca62987 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -5,154 +5,172 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  --background: oklch(0.98 0.002 90);
-  --foreground: oklch(0.14 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.14 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.14 0 0);
-  --primary: oklch(0.4 0.15 25);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.96 0 0);
-  --secondary-foreground: oklch(0.14 0 0);
-  --muted: oklch(0.96 0.002 90);
-  --muted-foreground: oklch(0.42 0.01 280);
-  --accent: oklch(0.4 0.15 25);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.88 0.005 90);
-  --input: oklch(0.92 0 0);
-  --ring: oklch(0.4 0.15 25);
-  --success: oklch(0.48 0.18 150);
-  --radius: 0.5rem;
-
-  --terminal: oklch(0.97 0.002 90);
-  --terminal-foreground: oklch(0.14 0 0);
-  --terminal-muted: oklch(0.55 0.01 280);
-  --terminal-border: oklch(0 0 0 / 0.1);
-  --terminal-accent: oklch(0.55 0.22 30);
-  --terminal-success: oklch(0.55 0.2 145);
-
-  --color-fd-background: var(--background);
-  --color-fd-foreground: var(--foreground);
-  --color-fd-muted: var(--muted);
-  --color-fd-muted-foreground: var(--muted-foreground);
-  --color-fd-popover: var(--popover);
-  --color-fd-popover-foreground: var(--popover-foreground);
-  --color-fd-card: var(--card);
-  --color-fd-card-foreground: var(--card-foreground);
-  --color-fd-border: var(--border);
-  --color-fd-primary: var(--accent);
-  --color-fd-primary-foreground: var(--accent-foreground);
-  --color-fd-secondary: var(--secondary);
-  --color-fd-secondary-foreground: var(--secondary-foreground);
-  --color-fd-accent: var(--muted);
-  --color-fd-accent-foreground: var(--foreground);
-  --color-fd-ring: var(--ring);
+  --brand: #e21637;
+  --brand-strong: #c2061f;
+  --brand-foreground: #ffffff;
+  --color-fd-background: #fbfbfa;
+  --color-fd-foreground: #17171a;
+  --color-fd-card: #ffffff;
+  --color-fd-card-foreground: #17171a;
+  --color-fd-popover: #ffffff;
+  --color-fd-popover-foreground: #17171a;
+  --color-fd-muted: #f1f1ef;
+  --color-fd-muted-foreground: #696970;
+  --color-fd-border: #dcdcd7;
+  --color-fd-primary: var(--brand);
+  --color-fd-primary-foreground: var(--brand-foreground);
+  --color-fd-secondary: #f3f3f1;
+  --color-fd-secondary-foreground: #1b1b1f;
+  --color-fd-accent: #ededeb;
+  --color-fd-accent-foreground: #17171a;
+  --color-fd-ring: var(--brand);
+  --terminal: #0d0d10;
+  --terminal-border: #303036;
 }
 
 .dark {
-  --background: oklch(0.07 0 0);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.1 0.002 280);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.13 0 0);
-  --popover-foreground: oklch(0.98 0 0);
-  --primary: oklch(0.5 0.2 25);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.98 0 0);
-  --muted: oklch(0.18 0 0);
-  --muted-foreground: oklch(0.58 0.01 280);
-  --accent: oklch(0.5 0.2 25);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(1 0 0 / 0.15);
-  --input: oklch(0.2 0 0);
-  --ring: oklch(0.5 0.2 25);
-  --success: oklch(0.75 0.2 145);
-
-  --terminal: oklch(0.03 0.005 280);
-  --terminal-foreground: oklch(0.93 0 0);
-  --terminal-muted: oklch(0.55 0.01 280);
-  --terminal-border: oklch(1 0 0 / 0.09);
-  --terminal-accent: oklch(0.6 0.22 30);
-  --terminal-success: oklch(0.75 0.2 145);
-}
-
-.dark #nd-sidebar {
-  --color-fd-muted: var(--muted);
-  --color-fd-secondary: var(--secondary);
-  --color-fd-muted-foreground: var(--muted-foreground);
+  --brand: #ff3153;
+  --brand-strong: #e21637;
+  --color-fd-background: #101014;
+  --color-fd-foreground: #f5f4f5;
+  --color-fd-card: #151519;
+  --color-fd-card-foreground: #f5f4f5;
+  --color-fd-popover: #17171c;
+  --color-fd-popover-foreground: #f5f4f5;
+  --color-fd-muted: #1a191e;
+  --color-fd-muted-foreground: #aaa7af;
+  --color-fd-border: #302d33;
+  --color-fd-primary: var(--brand);
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #1b1a1f;
+  --color-fd-secondary-foreground: #f5f4f5;
+  --color-fd-accent: #262229;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-ring: var(--brand);
+  --terminal: #09090b;
+  --terminal-border: #2d2d33;
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-success: var(--success);
+  --color-background: var(--color-fd-background);
+  --color-foreground: var(--color-fd-foreground);
+  --color-card: var(--color-fd-card);
+  --color-card-foreground: var(--color-fd-card-foreground);
+  --color-popover: var(--color-fd-popover);
+  --color-popover-foreground: var(--color-fd-popover-foreground);
+  --color-primary: var(--color-fd-primary);
+  --color-primary-foreground: var(--color-fd-primary-foreground);
+  --color-secondary: var(--color-fd-secondary);
+  --color-secondary-foreground: var(--color-fd-secondary-foreground);
+  --color-muted: var(--color-fd-muted);
+  --color-muted-foreground: var(--color-fd-muted-foreground);
+  --color-accent: var(--brand);
+  --color-accent-foreground: var(--brand-foreground);
+  --color-border: var(--color-fd-border);
+  --color-ring: var(--brand);
+  --color-brand: var(--brand);
+  --color-brand-strong: var(--brand-strong);
+  --color-brand-foreground: var(--brand-foreground);
   --color-terminal: var(--terminal);
-  --color-terminal-foreground: var(--terminal-foreground);
-  --color-terminal-muted: var(--terminal-muted);
   --color-terminal-border: var(--terminal-border);
-  --color-terminal-accent: var(--terminal-accent);
-  --color-terminal-success: var(--terminal-success);
   --font-sans: var(--font-inter), ui-sans-serif, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, monospace;
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 0.25rem);
-  --radius-2xl: calc(var(--radius) + 0.5rem);
-}
-
-html {
-  scroll-behavior: smooth;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
 }
 
 body {
-  background-color: var(--background);
-  color: var(--foreground);
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
   font-family: var(--font-inter), ui-sans-serif, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+#nd-nav > div {
+  background-color: var(--color-fd-background);
+  backdrop-filter: none;
+}
+
+:is(#nd-sidebar, #nd-sidebar-mobile) {
+  --color-fd-primary: var(--color-fd-foreground);
+  --color-fd-accent: var(--color-fd-muted);
+  --color-fd-accent-foreground: var(--color-fd-foreground);
+  background-color: var(--color-fd-background);
+}
+
+:is(#nd-sidebar, #nd-sidebar-mobile) [data-active='true'] {
+  background-color: var(--color-fd-muted);
+  color: var(--color-fd-foreground);
+}
+
 ::selection {
-  background: color-mix(in oklch, var(--accent) 30%, transparent);
-  color: var(--foreground);
+  background: color-mix(in srgb, var(--brand) 24%, transparent);
+  color: var(--color-fd-foreground);
+}
+
+.changelog-content {
+  max-width: none;
+  font-size: 1rem;
+}
+
+.changelog-content > h1:first-child,
+.changelog-content > h1:first-child + p {
+  display: none;
+}
+
+.changelog-content > h2 {
+  margin: 0;
+  border-top: 1px solid var(--color-fd-border);
+  padding-top: 3.5rem;
+  font-size: clamp(1.65rem, 3vw, 2.25rem);
+  line-height: 1.15;
+  letter-spacing: -0.04em;
 }
 
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+.changelog-content > h2:first-of-type {
+  border-top: 0;
+  padding-top: 0;
 }
 
-*::-webkit-scrollbar-track {
-  background: transparent;
+.changelog-content > h2:not(:first-of-type) {
+  margin-top: 3.5rem;
 }
 
-*::-webkit-scrollbar-thumb {
-  background: color-mix(in oklch, var(--foreground) 15%, transparent);
-  border-radius: 999px;
+.changelog-content > h2 a {
+  color: inherit;
+  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
+  text-underline-offset: 0.2em;
+}
+
+.changelog-content > h3 {
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.changelog-content > ul {
+  margin-top: 0.75rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.changelog-content > ul li::marker {
+  color: var(--brand);
+}
+
+.changelog-content a {
+  text-decoration-color: color-mix(in srgb, var(--brand) 38%, transparent);
+  text-underline-offset: 0.18em;
+}
+
+.changelog-content a:hover {
+  color: var(--brand);
+  text-decoration-color: var(--brand);
 }
 
 @layer base {
@@ -166,7 +184,16 @@ body {
   }
 
   :focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+    outline: 2px solid var(--brand);
+    outline-offset: 3px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index 990fe90..dc0b8dd 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -168,7 +168,7 @@ export default function RootLayout({
         />
         <RootProvider
           theme={{
-            defaultTheme: 'dark',
+            defaultTheme: 'light',
             enableSystem: false,
             disableTransitionOnChange: true,
           }}
diff --git a/website/src/app/not-found.tsx b/website/src/app/not-found.tsx
index 711ff3a..4d3abfe 100644
--- a/website/src/app/not-found.tsx
+++ b/website/src/app/not-found.tsx
@@ -35,9 +35,9 @@ export default function NotFound() {
 
       <Link
         href="/"
-        className="group mt-10 flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3.5 text-sm font-bold text-accent-foreground transition-snappy hover:brightness-110 hover:shadow-[0_0_30px_-5px_color-mix(in_oklch,var(--accent)_45%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+        className="mt-10 flex items-center justify-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-medium text-background transition-colors hover:bg-foreground/85 focus-visible:outline-none"
       >
-        <ArrowLeft size={16} className="transition-snappy group-hover:-translate-x-1" />
+        <ArrowLeft size={16} />
         Back to Home
       </Link>
     </main>
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index de61590..d9c582b 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -1,289 +1,257 @@
-'use client';
-
 import Link from 'next/link';
-import { useState } from 'react';
-import posthog from 'posthog-js';
-import { ArrowRight, Copy, Check } from 'lucide-react';
-import Nav from '@/components/nav';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import Footer from '@/components/footer';
-import Reveal from '@/components/reveal';
-import { Cmd, Code, FeatureRow, Fg, Line, Method, Muted, TerminalCard } from '@/components/feature';
+import InstallCommand from '@/components/install-command';
+import { baseOptions } from '@/lib/layout.shared';
+import Image from 'next/image';
+
+const sessionFeatures = [
+  {
+    title: 'Variables',
+    description: 'Keep base URLs, tokens, and values available throughout the session.',
+  },
+  {
+    title: 'Saved requests',
+    description: 'Give useful requests a name and run them again without rebuilding them.',
+  },
+  {
+    title: 'Persistent context',
+    description: 'Reopen reqsh and continue with your headers, variables, and requests intact.',
+  },
+];
 
 export default function Home() {
-  const [curlCopied, setCurlCopied] = useState(false);
+  return (
+    <HomeLayout
+      {...baseOptions()}
+      id="main-content"
+      className="bg-fd-background text-fd-foreground"
+      tabIndex={-1}
+    >
+      <section className="border-b border-fd-border" aria-labelledby="hero-heading">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:min-h-160 lg:grid-cols-[0.88fr_1.12fr]">
+          <div className="relative flex flex-col justify-center px-5 py-16 sm:px-10 sm:py-20 lg:border-r lg:border-fd-border lg:px-14 lg:py-24 xl:px-20">
+            <span
+              className="absolute top-0 left-5 h-1 w-20 bg-brand sm:left-10 lg:left-14 xl:left-20"
+              aria-hidden="true"
+            />
+            <h1
+              id="hero-heading"
+              className="max-w-2xl text-[clamp(2.75rem,4.5vw,4.75rem)] leading-[0.96] font-semibold tracking-[-0.055em] text-balance"
+            >
+              HTTP requests, without starting over.
+            </h1>
+            <p className="mt-7 max-w-xl text-base leading-7 text-fd-muted-foreground sm:text-lg sm:leading-8">
+              Build, send, save, and replay requests from an interactive shell. Set the URL,
+              headers, and variables once, then keep working at the prompt.
+            </p>
+            <div className="mt-9 flex flex-wrap items-center gap-4">
+              <Link
+                href="/docs/install"
+                className="inline-flex h-11 items-center gap-2 rounded-md bg-brand px-5 text-sm font-semibold text-brand-foreground transition-colors hover:bg-brand-strong"
+              >
+                Install reqsh
+                <ArrowRight size={16} aria-hidden="true" />
+              </Link>
+              <Link
+                href="/docs"
+                className="inline-flex h-11 items-center border-b border-fd-foreground/35 text-sm font-medium transition-colors hover:border-brand hover:text-brand"
+              >
+                Read the docs
+              </Link>
+            </div>
+          </div>
 
-  const handleCopyCurl = (location: 'hero' | 'cta') => {
-    const cmd = 'curl -fsSL https://reqsh.dev/install.sh | sh';
-    navigator.clipboard.writeText(cmd);
-    setCurlCopied(true);
-    setTimeout(() => setCurlCopied(false), 2000);
-    posthog.capture('install_command_copied', { location });
-  };
+          <div className="flex min-w-0 items-center bg-fd-muted/45 px-5 py-10 sm:px-10 sm:py-14 lg:px-14">
+            <figure className="w-full overflow-hidden rounded-lg border border-terminal-border bg-terminal shadow-[0_24px_70px_-38px_rgba(16,10,12,0.72)]">
+              <video
+                src="/landing/live-terminal.mp4"
+                aria-label="A reqsh terminal session sending an HTTP request and receiving a response"
+                width={960}
+                height={660}
+                controls
+                muted
+                playsInline
+                autoPlay
+                loop
+                preload="metadata"
+                className="aspect-16/11 w-full object-cover"
+              />
+            </figure>
+          </div>
+        </div>
+      </section>
 
-  return (
-    <>
-      <Nav />
-      <main id="main-content" className="flex-1" tabIndex={-1}>
-        <div className="relative">
-          <div className="hero-glow pointer-events-none absolute inset-x-0 top-0 -z-10 h-184" />
+      <section className="border-b border-fd-border" aria-label="Install reqsh">
+        <div className="mx-auto w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border">
+          <InstallCommand location="home_install_bar" />
+        </div>
+      </section>
 
-          <div className="mx-auto max-w-6xl px-4 sm:px-6">
-            <section
-              className="flex flex-col items-center pt-16 pb-4 text-center sm:pt-20 md:pt-28 mb-16"
-              aria-labelledby="hero-heading"
+      <section className="border-b border-fd-border" aria-labelledby="context-heading">
+        <div className="mx-auto w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border">
+          <div className="px-5 pt-16 pb-10 sm:px-10 sm:pt-20 lg:px-14 lg:pt-24 xl:px-20">
+            <h2
+              id="context-heading"
+              className="max-w-3xl text-3xl leading-tight font-semibold tracking-[-0.045em] text-balance sm:text-5xl"
             >
-              <Reveal delay={0.08}>
-                <h1
-                  id="hero-heading"
-                  className="mt-6 max-w-4xl text-4xl leading-[1.1] font-bold tracking-tighter text-balance text-foreground sm:text-6xl md:text-7xl lg:text-[5.25rem]"
-                >
-                  The interactive shell for <span className="text-accent">HTTP</span> requests.
-                </h1>
-              </Reveal>
+              One prompt. Your whole request context.
+            </h2>
+          </div>
 
-              <Reveal delay={0.16}>
-                <p className="mt-6 max-w-2xl text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg md:mt-8 md:text-xl">
-                  Set a base URL once. Add headers once. Use variables, save requests, and re-run
-                  them from history. Pure terminal efficiency, built in Rust.
+          <div className="grid border-t border-fd-border md:grid-cols-3">
+            {sessionFeatures.map((feature) => (
+              <article
+                key={feature.title}
+                className="border-b border-fd-border px-5 py-8 last:border-b-0 sm:px-10 md:border-r md:border-b-0 md:last:border-r-0 lg:px-12 lg:py-11"
+              >
+                <h3 className="text-lg font-semibold tracking-[-0.02em]">{feature.title}</h3>
+                <p className="mt-3 max-w-sm leading-7 text-fd-muted-foreground">
+                  {feature.description}
                 </p>
-              </Reveal>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
 
-              <Reveal delay={0.24}>
-                <div className="mt-9 flex flex-col sm:flex-row items-center justify-center gap-3.5 w-full sm:w-auto px-2 sm:px-0">
-                  <Link
-                    href="/docs/install"
-                    className="group flex w-full sm:w-auto items-center justify-center gap-2 rounded-full bg-accent px-7 py-3.5 text-sm font-semibold text-accent-foreground transition-snappy hover:brightness-110 hover:shadow-[0_0_32px_-6px_color-mix(in_oklch,var(--accent)_60%,transparent)]"
-                  >
-                    Install reqsh
-                    <ArrowRight
-                      size={15}
-                      className="stroke-current transition-snappy group-hover:translate-x-1"
-                    />
-                  </Link>
-                  <Link
-                    href="/docs"
-                    className="flex w-full sm:w-auto items-center justify-center rounded-full border border-border bg-card px-7 py-3.5 text-sm font-semibold text-foreground transition-snappy hover:bg-muted"
-                  >
-                    Documentation
-                  </Link>
-                </div>
-              </Reveal>
+      <section className="border-b border-fd-border" aria-labelledby="readable-heading">
+        <div className="mx-auto w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border">
+          <div className="grid lg:grid-cols-[0.62fr_1.38fr]">
+            <div className="px-5 py-16 sm:px-10 sm:py-20 lg:border-r lg:border-fd-border lg:px-14 lg:py-24 xl:px-20">
+              <h2
+                id="readable-heading"
+                className="text-3xl leading-tight font-semibold tracking-[-0.04em] text-balance sm:text-4xl"
+              >
+                Write requests like you read them.
+              </h2>
+              <p className="mt-5 max-w-md leading-7 text-fd-muted-foreground">
+                Put the method, path, headers, and body on separate lines. End with{' '}
+                <code className="rounded-sm border border-fd-border bg-fd-muted px-1.5 py-0.5 font-mono text-sm text-fd-foreground">
+                  ###
+                </code>{' '}
+                and read the formatted response beside it.
+              </p>
+            </div>
 
-              <Reveal delay={0.32}>
-                <div className="mx-auto my-7 flex w-full max-w-md sm:max-w-lg items-center justify-between gap-2 rounded-xl border border-terminal-border bg-terminal px-3 py-2 font-mono text-[11px] sm:text-xs md:text-sm shadow-sm sm:px-4 sm:py-2.5">
-                  <div className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto scrollbar-none py-0.5">
-                    <span className="text-terminal-accent shrink-0 select-none text-xs sm:text-sm">
-                      $
-                    </span>
-                    <span className="whitespace-nowrap text-terminal-foreground">
-                      curl -fsSL https://reqsh.dev/install.sh | sh
-                    </span>
-                  </div>
-                  <button
-                    onClick={() => handleCopyCurl('hero')}
-                    className="shrink-0 rounded-md p-1 text-terminal-muted hover:bg-white/10 hover:text-terminal-foreground transition-colors"
-                    aria-label="Copy curl command"
-                  >
-                    {curlCopied ? (
-                      <Check size={14} className="text-terminal-success" />
-                    ) : (
-                      <Copy size={14} />
-                    )}
-                  </button>
+            <div className="grid min-w-0 border-t border-fd-border bg-fd-muted/35 sm:grid-cols-2 lg:border-t-0">
+              <figure className="flex min-w-0 flex-col border-b border-fd-border sm:border-r sm:border-b-0">
+                <figcaption className="border-b border-fd-border px-5 py-3 text-sm font-medium">
+                  Request
+                </figcaption>
+                <div className="relative aspect-4/3 w-full overflow-hidden">
+                  <Image
+                    src="/landing/request.png"
+                    alt="A multiline POST request written in reqsh"
+                    fill
+                    sizes="(min-width: 1024px) 34vw, (min-width: 640px) 50vw, 100vw"
+                    className="object-cover"
+                  />
                 </div>
-              </Reveal>
-
-              <Reveal delay={0.4}>
-                <div className="mx-auto w-full max-w-4xl overflow-hidden rounded-2xl border border-border/80 bg-card shadow-2xl">
-                  <video
-                    className="w-full h-auto block rounded-2xl"
-                    autoPlay
-                    loop
-                    muted
-                    playsInline
-                  >
-                    <source src="/demo.mp4" type="video/mp4" />
-                  </video>
+              </figure>
+              <figure className="flex min-w-0 flex-col">
+                <figcaption className="flex items-center justify-between border-b border-fd-border px-5 py-3 text-sm font-medium">
+                  <span>Response</span>
+                  <span className="font-mono text-xs font-normal text-emerald-700 dark:text-emerald-400">
+                    201 Created
+                  </span>
+                </figcaption>
+                <div className="relative aspect-4/3 w-full overflow-hidden">
+                  <Image
+                    src="/landing/response.png"
+                    alt="A formatted successful HTTP response displayed in reqsh"
+                    fill
+                    sizes="(min-width: 1024px) 34vw, (min-width: 640px) 50vw, 100vw"
+                    className="object-cover"
+                  />
                 </div>
-              </Reveal>
-            </section>
-
-            <section className="pb-8" aria-labelledby="features-heading">
-              <Reveal>
-                <h2
-                  id="features-heading"
-                  className="mx-auto mt-6 max-w-2xl text-center text-2xl font-bold tracking-tight text-balance text-foreground sm:text-3xl md:text-5xl"
-                >
-                  Everything a terminal-first workflow needs.
-                </h2>
-              </Reveal>
-
-              <FeatureRow
-                title="A persistent REPL."
-                description="Stop typing the same host and authentication headers over and over. Set your base URL and headers once per session, every subsequent request uses them automatically."
-              >
-                <TerminalCard>
-                  <Line prompt>
-                    <Cmd>base</Cmd> <Muted>https://api.stripe.com</Muted>
-                  </Line>
-                  <Line prompt>
-                    <Cmd>header set</Cmd> <Muted>Authorization Bearer sk_test</Muted>
-                  </Line>
-                  <div className="mt-4" />
-                  <Line prompt>
-                    <Method>GET</Method> <Fg>/v1/customers</Fg>
-                  </Line>
-                  <Line cont>
-                    <Fg>###</Fg>
-                  </Line>
-                </TerminalCard>
-              </FeatureRow>
-
-              <FeatureRow
-                reverse
-                title="Time-travel with history."
-                description={
-                  <>
-                    Every command is saved. Type <Code>history</Code> to see everything you&apos;ve
-                    done in the current session. Made a typo or need to repeat a request? Just use{' '}
-                    <Code>rerun &lt;id&gt;</Code> to execute it instantly.
-                  </>
-                }
-              >
-                <TerminalCard>
-                  <Line prompt>
-                    <Cmd>history</Cmd>
-                  </Line>
-                  <div className="mt-2 ml-4 space-y-0.5">
-                    <div className="flex gap-4">
-                      <Muted>1:</Muted>
-                      <Muted>base https://api.stripe.com</Muted>
-                    </div>
-                    <div className="flex gap-4">
-                      <Muted>2:</Muted>
-                      <Muted>header set Authorization Bearer sk_test</Muted>
-                    </div>
-                    <div className="flex gap-4">
-                      <Muted>3:</Muted>
-                      <Muted>GET /v1/customers</Muted>
-                    </div>
-                  </div>
-                  <div className="mt-4" />
-                  <Line prompt>
-                    <Cmd>history rerun</Cmd> <Muted>3</Muted>
-                  </Line>
-                </TerminalCard>
-              </FeatureRow>
+              </figure>
+            </div>
+          </div>
+        </div>
+      </section>
 
-              <FeatureRow
-                title="Variables. Save. Run."
-                description={
-                  <>
-                    Use{' '}
-                    <Code>
-                      {'{{'}name{'}}'}
-                    </Code>{' '}
-                    syntax to interpolate values into paths, headers, and bodies. Save any request
-                    with <Code>save</Code> and replay it instantly with <Code>run</Code>. Every
-                    response includes its timing.
-                  </>
-                }
-              >
-                <TerminalCard>
-                  <Line prompt>
-                    <Cmd>var set</Cmd> <Muted>token eyJhbGciOiJIUzI1NiJ9</Muted>
-                  </Line>
-                  <div className="mt-4" />
-                  <Line prompt>
-                    <Method>GET</Method>{' '}
-                    <Fg>
-                      /users/
-                      <span className="text-terminal-accent">
-                        {'{{'}token{'}}'}
-                      </span>
-                    </Fg>
-                  </Line>
-                  <Line cont>
-                    <Fg>###</Fg>
-                  </Line>
-                  <div className="mt-3 text-xs text-terminal-success">HTTP/1.1 200 OK 142ms</div>
-                  <div className="mt-5" />
-                  <Line prompt>
-                    <Cmd>req save</Cmd> <Muted>get-users</Muted>
-                  </Line>
-                  <Line prompt>
-                    <Cmd>req run</Cmd> <Muted>get-users</Muted>
-                  </Line>
-                </TerminalCard>
-              </FeatureRow>
-            </section>
+      <section className="border-b border-fd-border" aria-labelledby="repeat-heading">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:grid-cols-[1.18fr_0.82fr]">
+          <div className="min-w-0 bg-fd-muted/35 p-5 sm:p-10 lg:border-r lg:border-fd-border lg:p-14">
+            <figure className="overflow-hidden rounded-lg border border-terminal-border bg-terminal">
+              <video
+                src="/landing/history.mp4"
+                aria-label="Using reqsh history to find and rerun an earlier request"
+                width={960}
+                height={620}
+                controls
+                muted
+                autoPlay
+                loop
+                playsInline
+                preload="metadata"
+                className="aspect-48/31 w-full object-cover"
+              />
+            </figure>
+          </div>
 
-            <section
-              className="relative w-full overflow-hidden rounded-2xl sm:rounded-3xl border border-border bg-card px-4 py-10 sm:px-8 sm:py-16 md:py-24"
-              aria-labelledby="cta-heading"
+          <div className="flex flex-col justify-center px-5 py-16 sm:px-10 sm:py-20 lg:px-14 lg:py-24 xl:px-20">
+            <h2
+              id="repeat-heading"
+              className="text-3xl leading-tight font-semibold tracking-[-0.045em] text-balance sm:text-5xl"
             >
-              <div className="section-glow pointer-events-none absolute inset-0" />
-              <Reveal className="relative z-10 mx-auto flex w-full max-w-2xl flex-col items-center text-center">
-                <h2
-                  id="cta-heading"
-                  className="w-full text-2xl font-bold tracking-tight text-balance text-foreground sm:text-3xl md:text-5xl"
-                >
-                  Ready to leave curl flags behind?
-                </h2>
-                <p className="mx-auto mt-4 max-w-lg text-xs leading-relaxed text-muted-foreground sm:text-base md:text-lg">
-                  One command. No config files, no accounts, no runtime. Just a fast shell for your
-                  API work.
-                </p>
-
-                <div className="mx-auto mt-6 flex w-full max-w-md items-center justify-between gap-2 rounded-xl border border-terminal-border bg-terminal px-3 py-2 font-mono text-[11px] sm:text-xs md:text-sm shadow-sm sm:px-4 sm:py-2.5">
-                  <div className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto scrollbar-none py-0.5">
-                    <span className="text-terminal-accent shrink-0 select-none text-xs sm:text-sm">
-                      $
-                    </span>
-                    <span className="whitespace-nowrap text-terminal-foreground">
-                      curl -fsSL https://reqsh.dev/install.sh | sh
-                    </span>
-                  </div>
-                  <button
-                    onClick={() => handleCopyCurl('cta')}
-                    className="shrink-0 rounded-md p-1 text-terminal-muted hover:bg-white/10 hover:text-terminal-foreground transition-colors"
-                    aria-label="Copy curl command"
-                  >
-                    {curlCopied ? (
-                      <Check size={14} className="text-terminal-success" />
-                    ) : (
-                      <Copy size={14} />
-                    )}
-                  </button>
-                </div>
+              Repeat, don’t rebuild.
+            </h2>
+            <p className="mt-5 max-w-md leading-7 text-fd-muted-foreground">
+              Find any earlier command, rerun it by ID, or save a useful request under a memorable
+              name.
+            </p>
+            <dl className="mt-8 border-y border-fd-border font-mono text-sm">
+              <div className="grid gap-1 border-b border-fd-border py-4 sm:grid-cols-[1fr_auto] sm:items-center sm:gap-6">
+                <dt className="text-fd-foreground">history rerun 14</dt>
+                <dd className="font-sans text-sm text-fd-muted-foreground">Recall any command</dd>
+              </div>
+              <div className="grid gap-1 py-4 sm:grid-cols-[1fr_auto] sm:items-center sm:gap-6">
+                <dt className="text-fd-foreground">req save get-posts</dt>
+                <dd className="font-sans text-sm text-fd-muted-foreground">Name useful requests</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </section>
 
-                <div className="mt-7 flex flex-col sm:flex-row items-center justify-center gap-3 w-full sm:w-auto px-2 sm:px-0">
-                  <Link
-                    href="/docs/install"
-                    className="group flex w-full sm:w-auto min-w-36 items-center justify-center gap-2 rounded-full bg-accent px-6 py-3 text-xs sm:text-sm font-semibold text-accent-foreground transition-snappy hover:brightness-110"
-                  >
-                    Get started
-                    <ArrowRight
-                      size={15}
-                      className="stroke-current transition-snappy group-hover:translate-x-1"
-                    />
-                  </Link>
-                  <a
-                    href="https://github.com/hars-21/reqsh"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    onClick={() => posthog.capture('github_link_clicked', { location: 'home_cta' })}
-                    className="flex w-full sm:w-auto min-w-36 items-center justify-center rounded-full border border-border bg-background px-6 py-3 text-xs sm:text-sm font-semibold text-foreground transition-snappy hover:bg-muted"
-                  >
-                    Star on GitHub
-                  </a>
-                </div>
-              </Reveal>
-            </section>
+      <section className="border-b border-fd-border" aria-labelledby="cta-heading">
+        <div className="mx-auto flex w-full max-w-(--fd-layout-width) flex-col items-start gap-8 px-5 py-16 sm:border-x sm:border-fd-border sm:px-10 sm:py-20 md:flex-row md:items-end md:justify-between lg:px-14 lg:py-24 xl:px-20">
+          <div>
+            <h2
+              id="cta-heading"
+              className="max-w-3xl text-3xl leading-tight font-semibold tracking-[-0.045em] text-balance sm:text-5xl"
+            >
+              Your next request starts at the prompt.
+            </h2>
+            <p className="mt-4 max-w-xl leading-7 text-fd-muted-foreground">
+              Install reqsh, open a shell, and send the first request in a few commands.
+            </p>
           </div>
-        </div>{' '}
-      </main>
+          <div className="flex shrink-0 flex-wrap items-center gap-4">
+            <Link
+              href="/docs/install"
+              className="inline-flex h-11 items-center gap-2 rounded-md bg-brand px-5 text-sm font-semibold text-brand-foreground transition-colors hover:bg-brand-strong"
+            >
+              Install reqsh
+              <ArrowRight size={16} aria-hidden="true" />
+            </Link>
+            <a
+              href="https://github.com/hars-21/reqsh"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex h-11 items-center gap-2 rounded-md border border-fd-border bg-fd-background px-5 text-sm font-medium transition-colors hover:border-fd-foreground/40 hover:bg-fd-muted"
+            >
+              View on GitHub
+              <ArrowUpRight size={15} aria-hidden="true" />
+            </a>
+          </div>
+        </div>
+      </section>
+
       <Footer />
-    </>
+    </HomeLayout>
   );
 }
diff --git a/website/src/components/feature.tsx b/website/src/components/feature.tsx
deleted file mode 100644
index 81af5a3..0000000
--- a/website/src/components/feature.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import Reveal from './reveal';
-
-export function FeatureRow({
-  title,
-  description,
-  children,
-  reverse = false,
-}: {
-  title: string;
-  description: React.ReactNode;
-  children: React.ReactNode;
-  reverse?: boolean;
-}) {
-  return (
-    <section
-      className="py-16 md:py-24"
-      aria-labelledby={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
-    >
-      <div className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-20">
-        <Reveal className={reverse ? 'md:order-2' : ''}>
-          <h3
-            id={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
-            className="mb-5 text-2xl font-bold tracking-tight text-foreground md:text-4xl"
-          >
-            {title}
-          </h3>
-          <p className="text-base leading-relaxed text-muted-foreground md:text-lg">
-            {description}
-          </p>
-        </Reveal>
-        <Reveal className={reverse ? 'md:order-1' : ''} delay={0.1}>
-          {children}
-        </Reveal>
-      </div>
-    </section>
-  );
-}
-
-export function TerminalCard({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="overflow-x-auto rounded-2xl border border-terminal-border bg-terminal p-4 sm:p-6 font-mono text-xs sm:text-sm leading-7 sm:leading-8 md:p-8">
-      {children}
-    </div>
-  );
-}
-
-export function Line({
-  prompt = false,
-  cont = false,
-  children,
-}: {
-  prompt?: boolean;
-  cont?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="whitespace-pre">
-      <span className="font-bold text-terminal-accent">
-        {prompt ? 'reqsh>' : cont ? '.....>' : ''}
-      </span>{' '}
-      {children}
-    </div>
-  );
-}
-
-export function Cmd({ children }: { children: React.ReactNode }) {
-  return <span className="font-semibold text-terminal-foreground">{children}</span>;
-}
-
-export function Fg({ children }: { children: React.ReactNode }) {
-  return <span className="text-terminal-foreground">{children}</span>;
-}
-
-export function Muted({ children }: { children: React.ReactNode }) {
-  return <span className="text-terminal-muted">{children}</span>;
-}
-
-export function Method({ children }: { children: React.ReactNode }) {
-  return <span className="font-semibold text-terminal-accent">{children}</span>;
-}
-
-export function Code({ children }: { children: React.ReactNode }) {
-  return (
-    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm text-foreground">
-      {children}
-    </code>
-  );
-}
diff --git a/website/src/components/footer.tsx b/website/src/components/footer.tsx
index d5999d0..c976db6 100644
--- a/website/src/components/footer.tsx
+++ b/website/src/components/footer.tsx
@@ -1,20 +1,26 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className="mt-20 border-t border-border">
-      <div className="mx-auto flex max-w-6xl flex-col gap-5 px-5 py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-8">
-        <p>reqsh is open source under the MIT License.</p>
+    <footer>
+      <div className="mx-auto flex max-w-(--fd-layout-width) flex-col gap-5 px-5 py-7 text-sm text-fd-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:border-x sm:border-fd-border sm:px-10 lg:px-14 xl:px-20">
+        <div className="flex items-center gap-3">
+          <Image src="/logo.svg" alt="" width={22} height={22} />
+          <span className="font-semibold tracking-tight text-fd-foreground">reqsh</span>
+          <span aria-hidden="true">·</span>
+          <span>Open source under the MIT License</span>
+        </div>
         <nav className="flex items-center gap-5" aria-label="Footer navigation">
-          <Link href="/docs" className="transition-colors hover:text-foreground">
-            Docs
+          <Link href="/docs" className="transition-colors hover:text-fd-foreground">
+            Documentation
           </Link>
-          <Link href="/changelog" className="transition-colors hover:text-foreground">
+          <Link href="/changelog" className="transition-colors hover:text-fd-foreground">
             Changelog
           </Link>
           <a
             href="https://github.com/hars-21/reqsh"
-            className="transition-colors hover:text-foreground"
+            className="transition-colors hover:text-fd-foreground"
             target="_blank"
             rel="noreferrer"
           >
diff --git a/website/src/components/install-command.tsx b/website/src/components/install-command.tsx
index 2ccd627..f62cdfe 100644
--- a/website/src/components/install-command.tsx
+++ b/website/src/components/install-command.tsx
@@ -2,32 +2,34 @@
 
 import { useState } from 'react';
 import { Check, Copy } from 'lucide-react';
+import posthog from 'posthog-js';
 
-const installCommand =
-  'curl -fsSL https://github.com/hars-21/reqsh/releases/latest/download/reqsh-installer.sh | sh';
+const installCommand = 'curl -fsSL https://reqsh.dev/install.sh | sh';
 
-export default function InstallCommand() {
+export default function InstallCommand({ location = 'unknown' }: { location?: string }) {
   const [copied, setCopied] = useState(false);
 
   async function copyCommand() {
     await navigator.clipboard.writeText(installCommand);
+    posthog.capture('install_command_copied', { location });
     setCopied(true);
     window.setTimeout(() => setCopied(false), 2000);
   }
 
   return (
-    <div className="flex min-w-0 items-center gap-3 rounded-lg border border-terminal-border bg-terminal px-4 py-3 font-mono text-xs text-terminal-foreground sm:text-sm">
-      <span className="shrink-0 text-terminal-accent">$</span>
+    <div className="flex min-w-0 items-center gap-3 bg-fd-card px-5 py-3.5 font-mono text-xs sm:px-6 sm:text-sm lg:px-8">
+      <span className="shrink-0 text-brand">$</span>
       <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap py-1">
         {installCommand}
       </code>
       <button
         type="button"
         onClick={copyCommand}
-        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-terminal-muted transition-colors hover:bg-white/8 hover:text-terminal-foreground"
+        className="inline-flex h-8 shrink-0 items-center justify-center gap-2 rounded-md border border-fd-border px-2.5 font-sans text-xs font-medium text-fd-muted-foreground transition-colors hover:border-brand/40 hover:bg-fd-accent hover:text-fd-foreground sm:px-3"
         aria-label={copied ? 'Install command copied' : 'Copy install command'}
       >
-        {copied ? <Check size={15} className="text-terminal-success" /> : <Copy size={15} />}
+        {copied ? <Check size={14} className="text-brand" /> : <Copy size={14} />}
+        <span className="hidden sm:inline">{copied ? 'Copied' : 'Copy'}</span>
       </button>
       <span className="sr-only" aria-live="polite">
         {copied ? 'Install command copied' : ''}
diff --git a/website/src/components/nav.tsx b/website/src/components/nav.tsx
deleted file mode 100644
index 0c293b1..0000000
--- a/website/src/components/nav.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import ThemeToggle from '@/components/theme-toggle';
-
-export default function Nav() {
-  return (
-    <header className="sticky top-0 z-50 border-b border-border/70 bg-background/90 backdrop-blur-md">
-      <nav
-        className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5 sm:px-8"
-        aria-label="Main navigation"
-      >
-        <Link href="/" className="flex items-center gap-2.5 font-semibold tracking-tight">
-          <Image src="/logo.svg" alt="" width={22} height={22} priority />
-          reqsh
-        </Link>
-
-        <div className="flex items-center gap-1 sm:gap-2">
-          <Link
-            href="/docs"
-            className="rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Docs
-          </Link>
-          <a
-            href="https://github.com/hars-21/reqsh"
-            target="_blank"
-            rel="noreferrer"
-            className="rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            GitHub
-          </a>
-          <ThemeToggle />
-          <Link
-            href="/docs/install"
-            className="ml-1 hidden rounded-md bg-foreground px-3.5 py-2 text-xs font-medium text-background transition-opacity hover:opacity-85 sm:inline-flex"
-          >
-            Install
-          </Link>
-        </div>
-      </nav>
-    </header>
-  );
-}
diff --git a/website/src/components/reveal.tsx b/website/src/components/reveal.tsx
deleted file mode 100644
index c2ca430..0000000
--- a/website/src/components/reveal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-import { motion, useReducedMotion } from 'motion/react';
-import type { ReactNode } from 'react';
-
-export default function Reveal({
-  children,
-  delay = 0,
-  className,
-}: {
-  children: ReactNode;
-  delay?: number;
-  className?: string;
-}) {
-  const reduceMotion = useReducedMotion();
-
-  return (
-    <motion.div
-      className={className}
-      initial={reduceMotion ? false : { opacity: 0, y: 24 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true, margin: '-80px' }}
-      transition={{ duration: 0.6, delay, ease: [0.2, 0.8, 0.2, 1] }}
-    >
-      {children}
-    </motion.div>
-  );
-}
diff --git a/website/src/components/theme-toggle.tsx b/website/src/components/theme-toggle.tsx
deleted file mode 100644
index 03aacf1..0000000
--- a/website/src/components/theme-toggle.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { useTheme } from 'next-themes';
-import { Sun, Moon } from 'lucide-react';
-
-export default function ThemeToggle() {
-  const [mounted, setMounted] = useState(false);
-  const { resolvedTheme, setTheme } = useTheme();
-
-  useEffect(() => {
-    React.startTransition(() => {
-      setMounted(true);
-    });
-  }, []);
-
-  const isDark = resolvedTheme === 'dark';
-
-  return (
-    <button
-      type="button"
-      onClick={() => setTheme(isDark ? 'light' : 'dark')}
-      className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
-      aria-label={mounted ? `Switch to ${isDark ? 'light' : 'dark'} theme` : 'Toggle theme'}
-    >
-      {mounted ? isDark ? <Sun size={15} /> : <Moon size={15} /> : <span className="size-4" />}
-    </button>
-  );
-}
diff --git a/website/src/lib/layout.shared.tsx b/website/src/lib/layout.shared.tsx
index 2dc4afd..7bc6a2e 100644
--- a/website/src/lib/layout.shared.tsx
+++ b/website/src/lib/layout.shared.tsx
@@ -1,7 +1,9 @@
 import Image from 'next/image';
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
-export function baseOptions(): BaseLayoutProps {
+export function baseOptions({
+  navOnlyLinks = false,
+}: { navOnlyLinks?: boolean } = {}): BaseLayoutProps {
   return {
     nav: {
       title: (
@@ -15,13 +17,14 @@ export function baseOptions(): BaseLayoutProps {
     githubUrl: 'https://github.com/hars-21/reqsh',
     links: [
       {
-        text: 'Changelog',
-        url: '/changelog',
+        text: 'Documentation',
+        url: '/docs',
+        on: navOnlyLinks ? 'nav' : 'all',
       },
       {
-        type: 'button',
-        text: 'Install',
-        url: '/docs/install',
+        text: 'Changelog',
+        url: '/changelog',
+        on: navOnlyLinks ? 'nav' : 'all',
       },
     ],
     themeSwitch: {