diff --git a/apps/website/components.json b/apps/website/components.json
new file mode 100644
index 000000000..93b584cf6
--- /dev/null
+++ b/apps/website/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/website/package.json b/apps/website/package.json
index cc69ee2c1..432100f25 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -3,9 +3,13 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "next": "~16.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "shiki": "*"
+    "shiki": "*",
+    "tailwind-merge": "^2.5.0"
   }
 }
diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index 2b83225be..bfdf8fb5e 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @theme {
+  /* Existing design tokens — preserved for backward compat */
   --color-bg: #080B14;
   --color-accent: #6C8EFF;
   --color-accent-glow: rgba(108, 142, 255, 0.35);
@@ -18,7 +19,25 @@
   --font-mono: "JetBrains Mono", monospace;
 }
 
+/* shadcn CSS variable tokens — new, non-conflicting names */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+}
+
 :root {
+  /* Existing legacy vars */
   --color-bg: #080B14;
   --color-accent: #6C8EFF;
   --color-accent-glow: rgba(108, 142, 255, 0.35);
@@ -30,6 +49,21 @@
   --color-text-muted: #4A527A;
   --color-sidebar-bg: #0A0D18;
   --color-angular-red: #DD0031;
+
+  /* shadcn semantic vars — maps to same palette */
+  --background: #080B14;
+  --foreground: #EEF1FF;
+  --primary: #6C8EFF;
+  --primary-foreground: #ffffff;
+  --card: #0A0D18;
+  --card-foreground: #EEF1FF;
+  --muted: #0D1020;
+  --muted-foreground: #8B96C8;
+  --border: #1a2040;
+  --input: #1a2040;
+  --ring: #6C8EFF;
+  --destructive: #FF6B6B;
+  --destructive-foreground: #ffffff;
 }
 
 * {
diff --git a/apps/website/src/components/landing/FeatureStrip.tsx b/apps/website/src/components/landing/FeatureStrip.tsx
index 133e5f09b..7d3f61a0e 100644
--- a/apps/website/src/components/landing/FeatureStrip.tsx
+++ b/apps/website/src/components/landing/FeatureStrip.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { motion } from 'framer-motion';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
 
 const FEATURES = [
   { icon: '⚡', title: 'Token-by-token streaming', desc: 'Real-time SSE streaming via FetchStreamTransport. Messages update as each token arrives.' },
@@ -13,14 +14,16 @@ const FEATURES = [
 export function FeatureStrip() {
   return (
     <section className="px-8 py-16 max-w-6xl mx-auto">
-      <h2 className="font-mono text-xs uppercase tracking-widest mb-12 text-center"
-        style={{ color: 'var(--color-accent)', fontWeight: 'normal' }}>Features</h2>
+      <h2
+        className="font-mono text-xs uppercase tracking-widest mb-12 text-center"
+        style={{ color: 'var(--color-accent)', fontWeight: 'normal' }}
+      >
+        Features
+      </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {FEATURES.map((f, i) => (
           <motion.div
             key={f.title}
-            className="p-6 rounded-lg cursor-default"
-            style={{ border: '1px solid rgba(108,142,255,0.15)', background: 'rgba(108,142,255,0.02)' }}
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
@@ -28,10 +31,17 @@ export function FeatureStrip() {
             whileHover={{
               borderColor: 'rgba(108,142,255,0.4)',
               boxShadow: '0 0 12px rgba(108,142,255,0.2)',
-            }}>
-            <div className="mb-3" style={{ fontSize: '1.5rem', color: '#6C8EFF' }} aria-hidden="true">{f.icon}</div>
-            <h3 style={{ fontFamily: 'var(--font-garamond)', fontWeight: 700, fontSize: '1.125rem', color: '#EEF1FF', marginBottom: 8 }}>{f.title}</h3>
-            <p style={{ fontSize: '0.875rem', color: '#8B96C8', lineHeight: 1.6 }}>{f.desc}</p>
+            }}
+          >
+            <Card className="p-6 h-full cursor-default transition-all">
+              <div className="mb-3 text-2xl" style={{ color: '#6C8EFF' }} aria-hidden="true">
+                {f.icon}
+              </div>
+              <CardTitle className="mb-2">{f.title}</CardTitle>
+              <CardContent className="p-0">
+                <p className="text-sm text-muted-foreground leading-relaxed">{f.desc}</p>
+              </CardContent>
+            </Card>
           </motion.div>
         ))}
       </div>
diff --git a/apps/website/src/components/landing/HeroTwoCol.tsx b/apps/website/src/components/landing/HeroTwoCol.tsx
index b1364cecb..a801db800 100644
--- a/apps/website/src/components/landing/HeroTwoCol.tsx
+++ b/apps/website/src/components/landing/HeroTwoCol.tsx
@@ -1,44 +1,45 @@
 import { GenerativeUIFrame } from './GenerativeUIFrame';
 import { CopyPromptButton } from '../docs/CopyPromptButton';
 import { getPromptBySlug } from '../../lib/docs';
+import { Badge } from '@/components/ui/badge';
 
 function LangChainBadge() {
   return (
-    <span style={{
-      display: 'inline-flex', alignItems: 'center', gap: 6,
-      background: 'rgba(108,142,255,0.08)',
-      border: '1px solid rgba(108,142,255,0.15)',
-      borderRadius: 20, padding: '4px 10px 4px 8px',
-      fontFamily: 'var(--font-mono)', fontSize: 11, color: '#EEF1FF',
-    }}>
-      <span style={{
-        width: 14, height: 14, borderRadius: 3,
-        background: 'rgba(127,200,255,0.2)',
-        border: '1px solid rgba(127,200,255,0.4)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        fontSize: 7, fontWeight: 700, color: '#7FC8FF', lineHeight: 1,
-      }}>LC</span>
+    <Badge variant="default">
+      <span
+        style={{
+          width: 14,
+          height: 14,
+          borderRadius: 3,
+          background: 'rgba(127,200,255,0.2)',
+          border: '1px solid rgba(127,200,255,0.4)',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 7,
+          fontWeight: 700,
+          color: '#7FC8FF',
+          lineHeight: 1,
+          flexShrink: 0,
+        }}
+      >
+        LC
+      </span>
       LangChain
-    </span>
+    </Badge>
   );
 }
 
 function AngularBadge() {
   return (
-    <span style={{
-      display: 'inline-flex', alignItems: 'center', gap: 6,
-      background: 'rgba(108,142,255,0.08)',
-      border: '1px solid rgba(108,142,255,0.15)',
-      borderRadius: 20, padding: '4px 10px 4px 8px',
-      fontFamily: 'var(--font-mono)', fontSize: 11, color: '#EEF1FF',
-    }}>
-      <svg width="14" height="14" viewBox="0 0 250 250" aria-hidden={true}>
-        <path fill="#DD0031" d="M125 30L31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z"/>
-        <path fill="#C3002F" d="M125 30v22.2l-61.7 162.4 37.8 15.4z"/>
-        <path fill="#fff" d="M125 52.1L66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9z"/>
+    <Badge variant="default">
+      <svg width="14" height="14" viewBox="0 0 250 250" aria-hidden={true} style={{ flexShrink: 0 }}>
+        <path fill="#DD0031" d="M125 30L31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z" />
+        <path fill="#C3002F" d="M125 30v22.2l-61.7 162.4 37.8 15.4z" />
+        <path fill="#fff" d="M125 52.1L66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9z" />
       </svg>
       Angular
-    </span>
+    </Badge>
   );
 }
 
@@ -63,6 +64,7 @@ export async function HeroTwoCol() {
           .hero-right { flex: none; max-width: 100%; width: 100%; max-height: 300px; overflow: hidden; }
         }
       `}</style>
+
       {/* Left column — 55% */}
       <div className="hero-left">
         <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
@@ -70,54 +72,56 @@ export async function HeroTwoCol() {
           <AngularBadge />
         </div>
 
-        <h1 id="hero-heading" style={{
-          fontFamily: 'var(--font-garamond)',
-          fontSize: 'clamp(36px, 4.5vw, 72px)',
-          fontWeight: 800,
-          lineHeight: 1.05,
-          color: '#EEF1FF',
-          margin: 0,
-          marginBottom: 20,
-        }}>
+        <h1
+          id="hero-heading"
+          style={{
+            fontFamily: 'var(--font-garamond)',
+            fontSize: 'clamp(36px, 4.5vw, 72px)',
+            fontWeight: 800,
+            lineHeight: 1.05,
+            color: '#EEF1FF',
+            margin: 0,
+            marginBottom: 20,
+          }}
+        >
           The Enterprise Streaming Resource for LangChain and{' '}
-          <span style={{
-            color: '#DD0031',
-            textShadow: '0 0 30px rgba(221,0,49,0.5)',
-          }}>
+          <span style={{ color: '#DD0031', textShadow: '0 0 30px rgba(221,0,49,0.5)' }}>
             Angular
           </span>
         </h1>
 
-        <p style={{
-          fontFamily: 'var(--font-garamond)',
-          fontStyle: 'italic',
-          fontSize: 'clamp(16px, 1.8vw, 20px)',
-          color: '#8B96C8',
-          maxWidth: '44ch',
-          lineHeight: 1.5,
-          margin: 0,
-          marginBottom: 32,
-        }}>
+        <p
+          style={{
+            fontFamily: 'var(--font-garamond)',
+            fontStyle: 'italic',
+            fontSize: 'clamp(16px, 1.8vw, 20px)',
+            color: '#8B96C8',
+            maxWidth: '44ch',
+            lineHeight: 1.5,
+            margin: 0,
+            marginBottom: 32,
+          }}
+        >
           Full parity with React{' '}
-          <code style={{
-            fontStyle: 'normal',
-            fontFamily: 'var(--font-mono)',
-            fontSize: '0.8em',
-            background: 'rgba(108,142,255,0.08)',
-            color: '#6C8EFF',
-            padding: '2px 6px',
-            borderRadius: 4,
-          }}>useStream()</code>
+          <code
+            style={{
+              fontStyle: 'normal',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.8em',
+              background: 'rgba(108,142,255,0.08)',
+              color: '#6C8EFF',
+              padding: '2px 6px',
+              borderRadius: 4,
+            }}
+          >
+            useStream()
+          </code>
           {' '}— built natively for Angular 20+.
         </p>
 
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
           <CopyPromptButton prompt={prompt} variant="hero" />
-          <span style={{
-            fontFamily: 'var(--font-mono)',
-            fontSize: 12,
-            color: '#4A527A',
-          }}>
+          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#4A527A' }}>
             npm install @cacheplane/stream-resource
           </span>
         </div>
diff --git a/apps/website/src/components/pricing/LeadForm.tsx b/apps/website/src/components/pricing/LeadForm.tsx
index 063f8743c..f63020277 100644
--- a/apps/website/src/components/pricing/LeadForm.tsx
+++ b/apps/website/src/components/pricing/LeadForm.tsx
@@ -1,5 +1,9 @@
 'use client';
 import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
 
 export function LeadForm() {
   const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
@@ -21,21 +25,14 @@ export function LeadForm() {
     }
   };
 
-  const inputStyle: React.CSSProperties = {
-    background: 'rgba(108,142,255,0.04)',
-    border: '1px solid rgba(108,142,255,0.15)',
-    color: '#EEF1FF',
-    borderRadius: '6px',
-    padding: '10px 14px',
-    width: '100%',
-    fontFamily: 'var(--font-sans)',
-    fontSize: '14px',
-    outline: 'none',
-  };
-
   return (
     <section id="lead-form" className="px-8 py-16 max-w-xl mx-auto">
-      <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center" style={{ color: '#6C8EFF' }}>Enterprise</p>
+      <p
+        className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
+        style={{ color: '#6C8EFF' }}
+      >
+        Enterprise
+      </p>
       <h2
         style={{
           fontFamily: 'var(--font-garamond)',
@@ -44,64 +41,41 @@ export function LeadForm() {
           color: '#EEF1FF',
           textAlign: 'center',
           marginBottom: 32,
-        }}>
+        }}
+      >
         Need volume seats or a custom contract?
       </h2>
+
       {status === 'sent' ? (
-        <p className="text-center" style={{ color: '#8B96C8' }}>Thanks — we&apos;ll be in touch within one business day.</p>
+        <p className="text-center text-muted-foreground">
+          Thanks — we&apos;ll be in touch within one business day.
+        </p>
       ) : (
         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-          <input
-            name="name"
-            placeholder="Name"
-            required
-            style={inputStyle}
-            onFocus={(e) => { e.target.style.borderColor = '#6C8EFF'; e.target.style.outline = '2px solid rgba(108,142,255,0.4)'; e.target.style.outlineOffset = '2px'; }}
-            onBlur={(e) => { e.target.style.borderColor = 'rgba(108,142,255,0.15)'; e.target.style.outline = 'none'; }}
-          />
-          <input
-            name="email"
-            type="email"
-            placeholder="Work email"
-            required
-            style={inputStyle}
-            onFocus={(e) => { e.target.style.borderColor = '#6C8EFF'; e.target.style.outline = '2px solid rgba(108,142,255,0.4)'; e.target.style.outlineOffset = '2px'; }}
-            onBlur={(e) => { e.target.style.borderColor = 'rgba(108,142,255,0.15)'; e.target.style.outline = 'none'; }}
-          />
-          <input
-            name="company"
-            placeholder="Company"
-            style={inputStyle}
-            onFocus={(e) => { e.target.style.borderColor = '#6C8EFF'; e.target.style.outline = '2px solid rgba(108,142,255,0.4)'; e.target.style.outlineOffset = '2px'; }}
-            onBlur={(e) => { e.target.style.borderColor = 'rgba(108,142,255,0.15)'; e.target.style.outline = 'none'; }}
-          />
-          <textarea
-            name="message"
-            placeholder="Tell us about your use case"
-            rows={4}
-            style={{ ...inputStyle, resize: 'vertical' }}
-            onFocus={(e) => { e.target.style.borderColor = '#6C8EFF'; e.target.style.outline = '2px solid rgba(108,142,255,0.4)'; e.target.style.outlineOffset = '2px'; }}
-            onBlur={(e) => { e.target.style.borderColor = 'rgba(108,142,255,0.15)'; e.target.style.outline = 'none'; }}
-          />
-          <button
-            type="submit"
-            disabled={status === 'sending'}
-            style={{
-              background: '#6C8EFF',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '6px',
-              padding: '12px 24px',
-              fontFamily: 'var(--font-mono)',
-              fontSize: '14px',
-              cursor: status === 'sending' ? 'not-allowed' : 'pointer',
-              opacity: status === 'sending' ? 0.6 : 1,
-              transition: 'box-shadow 0.2s',
-            }}
-            onMouseEnter={(e) => { if (status !== 'sending') e.currentTarget.style.boxShadow = '0 0 16px rgba(108,142,255,0.4)'; }}
-            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="lead-name">Name</Label>
+            <Input id="lead-name" name="name" placeholder="Name" required />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="lead-email">Work email</Label>
+            <Input id="lead-email" name="email" type="email" placeholder="Work email" required />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="lead-company">Company</Label>
+            <Input id="lead-company" name="company" placeholder="Company" />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="lead-message">Use case</Label>
+            <Textarea
+              id="lead-message"
+              name="message"
+              placeholder="Tell us about your use case"
+              rows={4}
+            />
+          </div>
+          <Button type="submit" disabled={status === 'sending'} className="w-full mt-2">
             {status === 'sending' ? 'Sending…' : 'Get in touch'}
-          </button>
+          </Button>
           {status === 'error' && (
             <p className="text-sm text-center" style={{ color: '#FF6B6B' }}>
               Something went wrong — try again or email us directly.
diff --git a/apps/website/src/components/pricing/PricingGrid.tsx b/apps/website/src/components/pricing/PricingGrid.tsx
index 0936523d4..38bb91f90 100644
--- a/apps/website/src/components/pricing/PricingGrid.tsx
+++ b/apps/website/src/components/pricing/PricingGrid.tsx
@@ -1,4 +1,7 @@
 'use client';
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 
 const PLANS = [
   {
@@ -44,52 +47,49 @@ export function PricingGrid() {
     <section className="px-8 py-16 max-w-6xl mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {PLANS.map((plan) => (
-          <div
+          <Card
             key={plan.name}
-            className="p-8 rounded-xl flex flex-col"
+            className="flex flex-col"
             style={{
               border: `1px solid ${plan.highlight ? '#6C8EFF' : 'rgba(108,142,255,0.15)'}`,
               boxShadow: plan.highlight ? '0 0 28px rgba(108,142,255,0.32)' : 'none',
-              background: 'rgba(108,142,255,0.02)',
-            }}>
-            <p
-              className="font-mono text-xs uppercase tracking-widest mb-4"
-              style={{ color: '#6C8EFF' }}>
-              {plan.name}
-            </p>
-            <p
-              style={{
-                fontFamily: 'var(--font-garamond)',
-                fontWeight: 700,
-                fontSize: 48,
-                color: '#EEF1FF',
-                lineHeight: 1,
-                marginBottom: 4,
-              }}>
-              {plan.price}
-            </p>
-            <p className="text-sm mb-8" style={{ color: '#4A527A' }}>{plan.period}</p>
-            <ul className="flex flex-col gap-2 mb-8 flex-1">
-              {plan.features.map((f) => (
-                <li key={f} className="text-sm flex items-center gap-2" style={{ color: '#8B96C8' }}>
-                  <span style={{ color: '#6C8EFF' }}>✓</span> {f}
-                </li>
-              ))}
-            </ul>
-            <a
-              href={plan.ctaHref}
-              className="text-center py-3 px-6 rounded font-mono text-sm transition-all"
-              style={{
-                background: plan.highlight ? '#6C8EFF' : 'transparent',
-                color: plan.highlight ? '#fff' : '#6C8EFF',
-                border: '1px solid #6C8EFF',
-                textDecoration: 'none',
-              }}
-              onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 0 16px rgba(108,142,255,0.4)')}
-              onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
-              {plan.cta}
-            </a>
-          </div>
+            }}
+          >
+            <CardHeader className="pb-0">
+              <Badge variant="default" className="w-fit mb-4">{plan.name}</Badge>
+              <p
+                style={{
+                  fontFamily: 'var(--font-garamond)',
+                  fontWeight: 700,
+                  fontSize: 48,
+                  color: '#EEF1FF',
+                  lineHeight: 1,
+                  marginBottom: 4,
+                }}
+              >
+                {plan.price}
+              </p>
+              <p className="text-sm" style={{ color: '#4A527A' }}>{plan.period}</p>
+            </CardHeader>
+            <CardContent className="flex-1 pt-6">
+              <ul className="flex flex-col gap-2">
+                {plan.features.map((f) => (
+                  <li key={f} className="text-sm flex items-center gap-2 text-muted-foreground">
+                    <span style={{ color: '#6C8EFF' }}>✓</span> {f}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button
+                asChild
+                variant={plan.highlight ? 'default' : 'outline'}
+                className="w-full"
+              >
+                <a href={plan.ctaHref}>{plan.cta}</a>
+              </Button>
+            </CardFooter>
+          </Card>
         ))}
       </div>
     </section>
diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index ef07fa294..8ba1a8e79 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -1,5 +1,6 @@
 'use client';
 import Link from 'next/link';
+import { Button } from '@/components/ui/button';
 
 const links = [
   { label: 'Docs', href: '/docs' },
@@ -9,26 +10,35 @@ const links = [
 
 export function Nav() {
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-5"
-      style={{ borderBottom: '1px solid var(--color-accent-border)', background: 'rgba(8,11,20,0.85)', backdropFilter: 'blur(12px)' }}>
-      <Link href="/" className="font-garamond text-xl font-bold" style={{ color: 'var(--color-text-primary)' }}>
+    <nav
+      className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-5"
+      style={{
+        borderBottom: '1px solid var(--color-accent-border)',
+        background: 'rgba(8,11,20,0.85)',
+        backdropFilter: 'blur(12px)',
+      }}
+    >
+      <Link
+        href="/"
+        className="font-bold text-xl"
+        style={{ fontFamily: 'var(--font-garamond)', color: 'var(--color-text-primary)' }}
+      >
         StreamResource
       </Link>
       <div className="flex items-center gap-8">
         {links.map((l) => (
-          <Link key={l.href} href={l.href}
+          <Link
+            key={l.href}
+            href={l.href}
             className="text-sm font-mono transition-colors"
-            style={{ color: 'var(--color-text-secondary)' }}>
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
             {l.label}
           </Link>
         ))}
-        <Link href="/pricing"
-          className="px-4 py-2 text-sm font-mono rounded transition-all"
-          style={{ background: 'var(--color-accent)', color: '#fff' }}
-          onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 0 16px rgba(108,142,255,0.4)')}
-          onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
-          Get Started
-        </Link>
+        <Button asChild size="default">
+          <Link href="/pricing">Get Started</Link>
+        </Button>
       </div>
     </nav>
   );
diff --git a/apps/website/src/components/ui/badge.tsx b/apps/website/src/components/ui/badge.tsx
new file mode 100644
index 000000000..bee6a1a85
--- /dev/null
+++ b/apps/website/src/components/ui/badge.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-mono transition-colors',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-[rgba(108,142,255,0.08)] border border-[rgba(108,142,255,0.15)] text-foreground',
+        primary:
+          'bg-primary text-primary-foreground',
+        outline:
+          'border border-[rgba(108,142,255,0.15)] bg-[rgba(108,142,255,0.08)] text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/website/src/components/ui/button.tsx b/apps/website/src/components/ui/button.tsx
new file mode 100644
index 000000000..125e26ed2
--- /dev/null
+++ b/apps/website/src/components/ui/button.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-mono transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:shadow-[0_0_16px_rgba(108,142,255,0.4)]',
+        outline:
+          'border border-primary text-primary bg-transparent hover:shadow-[0_0_16px_rgba(108,142,255,0.4)]',
+        ghost:
+          'text-muted-foreground hover:text-foreground hover:bg-[rgba(108,142,255,0.08)]',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'px-4 py-2',
+        sm: 'px-3 py-1.5 text-xs',
+        lg: 'px-6 py-3',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/apps/website/src/components/ui/card.tsx b/apps/website/src/components/ui/card.tsx
new file mode 100644
index 000000000..8158e3f10
--- /dev/null
+++ b/apps/website/src/components/ui/card.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border bg-card text-card-foreground',
+        className
+      )}
+      style={{ borderColor: 'rgba(108,142,255,0.15)', background: 'rgba(108,142,255,0.02)' }}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('font-bold text-lg text-foreground', className)}
+      style={{ fontFamily: 'var(--font-garamond)' }}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground leading-relaxed', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
diff --git a/apps/website/src/components/ui/input.tsx b/apps/website/src/components/ui/input.tsx
new file mode 100644
index 000000000..c528a1854
--- /dev/null
+++ b/apps/website/src/components/ui/input.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex w-full rounded px-3.5 py-2.5 text-sm text-foreground',
+          'bg-[rgba(108,142,255,0.04)] border border-input',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-[rgba(108,142,255,0.4)] focus-visible:ring-offset-0',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/apps/website/src/components/ui/label.tsx b/apps/website/src/components/ui/label.tsx
new file mode 100644
index 000000000..22d1a8623
--- /dev/null
+++ b/apps/website/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      'text-xs font-mono uppercase tracking-widest text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = 'Label';
+
+export { Label };
diff --git a/apps/website/src/components/ui/textarea.tsx b/apps/website/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..a3b03e960
--- /dev/null
+++ b/apps/website/src/components/ui/textarea.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex w-full rounded px-3.5 py-2.5 text-sm text-foreground resize-vertical',
+          'bg-[rgba(108,142,255,0.04)] border border-input',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-[rgba(108,142,255,0.4)] focus-visible:ring-offset-0',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/apps/website/src/lib/utils.ts b/apps/website/src/lib/utils.ts
new file mode 100644
index 000000000..2819a830d
--- /dev/null
+++ b/apps/website/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
index 2fac34de1..8b6eaf7d5 100644
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -17,6 +17,7 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
       "@cacheplane/cockpit-docs": ["../../libs/cockpit-docs/src/index.ts"],
diff --git a/package-lock.json b/package-lock.json
index 3a5b1727c..9c333cb38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
     "": {
       "name": "stream-resource",
       "version": "0.0.0",
-      "license": "MIT",
+      "license": "PolyForm-Noncommercial-1.0.0",
       "workspaces": [
         "packages/*",
         "apps/*"
@@ -93,10 +93,14 @@
     "apps/website": {
       "version": "0.0.1",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.1.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
         "next": "~16.1.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "shiki": "*"
+        "shiki": "*",
+        "tailwind-merge": "^2.5.0"
       }
     },
     "node_modules/@algolia/abtesting": {
@@ -13426,6 +13430,39 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-beta.58",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-beta.58.tgz",
@@ -15859,6 +15896,70 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
@@ -19342,6 +19443,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -19529,6 +19642,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cockpit": {
       "resolved": "apps/cockpit",
       "link": true
@@ -33165,6 +33287,16 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
@@ -35695,11 +35827,12 @@
     "packages/mcp": {
       "name": "@cacheplane/stream-resource-mcp",
       "version": "0.1.0",
+      "license": "PolyForm-Noncommercial-1.0.0",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.0.0"
       },
       "bin": {
-        "stream-resource-mcp": "dist/index.js"
+        "stream-resource-mcp": "src/index.js"
       },
       "devDependencies": {
         "typescript": "^5.4.0"