diff --git a/apps/web/components/comparator-7.tsx b/apps/web/components/comparator-7.tsx
index 7c2cea6..ebc87c7 100644
--- a/apps/web/components/comparator-7.tsx
+++ b/apps/web/components/comparator-7.tsx
@@ -1,189 +1,169 @@
-import { cn } from '@workspace/ui/lib/utils'
-import { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Check, X } from "lucide-react"
 
-const plans = ['rollYourOwn', 'hostedSaas', 'helpbase'] as const
+import { cn } from "@workspace/ui/lib/utils"
 
-type Plan = (typeof plans)[number]
-
-type Cell = boolean | string
-
-type Feature = {
+type Option = {
+    key: "roll-your-own" | "hosted-saas" | "helpbase"
     name: string
-    description?: string
-    plans: Record<Plan, Cell>
-}
-
-const planLabels: Record<Plan, string> = {
-    rollYourOwn: 'Roll your own',
-    hostedSaas: 'Hosted SaaS',
-    helpbase: 'Helpbase',
+    metric: string
+    metricSubtitle: string
+    body: string
+    signals: Array<{ positive: boolean; text: string }>
+    cost: string
+    costNote?: string
+    emphasized?: boolean
 }
 
-const features: Feature[] = [
-    {
-        name: 'Time to first site',
-        description: 'From zero to a live docs site on your domain.',
-        plans: { rollYourOwn: '2-3 days', hostedSaas: '1 day', helpbase: '3 min' },
-    },
+const options: Option[] = [
     {
-        name: 'You own every file',
-        description: 'Code lives in your repo, commits land in your git history.',
-        plans: { rollYourOwn: true, hostedSaas: false, helpbase: true },
+        key: "roll-your-own",
+        name: "Roll your own",
+        metric: "2–3 days",
+        metricSubtitle: "to first site",
+        body: "Build a docs site in Next.js from scratch. Burn the weekend writing the framework, then another maintaining it.",
+        signals: [
+            { positive: true, text: "You own every file" },
+            { positive: false, text: "No MCP, no llms.txt" },
+            { positive: false, text: "No hosted option" },
+        ],
+        cost: "Your weekend",
     },
     {
-        name: 'MCP server',
-        description: 'Model Context Protocol endpoint Claude / Cursor / ChatGPT can query.',
-        plans: { rollYourOwn: 'DIY', hostedSaas: 'Limited', helpbase: 'Built in' },
+        key: "hosted-saas",
+        name: "Hosted docs SaaS",
+        metric: "1 day",
+        metricSubtitle: "to first site",
+        body: "Pay a hosted vendor to run your docs. Fast to start. Your content lives in their database. Migrating off is a project.",
+        signals: [
+            { positive: false, text: "Your docs, their database" },
+            { positive: false, text: "MCP is a Pro-tier add-on" },
+            { positive: false, text: "Vendor-locked hosting" },
+        ],
+        cost: "$200–1k",
+        costNote: "/ month",
     },
     {
-        name: 'llms.txt + typed output',
-        description: 'Discoverability manifest + machine-readable content, by default.',
-        plans: { rollYourOwn: false, hostedSaas: false, helpbase: true },
-    },
-    {
-        name: 'Deploy anywhere',
-        description: 'No platform lock-in. Ship your docs on whatever infra you already use \u2014 Vercel, Fly, self-host, your call.',
-        plans: { rollYourOwn: true, hostedSaas: false, helpbase: true },
-    },
-    {
-        name: 'Cost',
-        description: 'Sticker price for a working help center at seed stage.',
-        plans: { rollYourOwn: 'Your weekend', hostedSaas: '$200-1k/mo', helpbase: 'Free or hosted' },
-    },
-    {
-        name: 'Maintained without you',
-        description: 'Hosted tier handles updates, caching, MCP scaling.',
-        plans: { rollYourOwn: false, hostedSaas: true, helpbase: 'Hosted tier' },
-    },
-    {
-        name: 'Agents can read it',
-        description: 'Your editor autocompletes from your real docs instead of guessing.',
-        plans: { rollYourOwn: 'DIY', hostedSaas: 'Limited', helpbase: true },
+        key: "helpbase",
+        name: "Helpbase",
+        metric: "3 min",
+        metricSubtitle: "to first site",
+        body: "Open source. One command drops a Next.js help center into your repo. MCP server and llms.txt built in. Host it yourself, or with us.",
+        signals: [
+            { positive: true, text: "Own every file" },
+            { positive: true, text: "MCP + llms.txt built in" },
+            { positive: true, text: "Host anywhere, or with us" },
+        ],
+        cost: "Free or hosted",
+        emphasized: true,
     },
 ]
 
-const renderPlanColumn = (plan: Plan) => {
-    const isPrimary = plan === 'helpbase'
-    const header = (
-        <div className={cn('sticky top-0 flex h-14 flex-col items-center justify-center gap-1.5 px-4 text-center lg:px-6', isPrimary && 'rounded-t-xl')}>
-            <span className={cn('text-foreground text-sm font-semibold', isPrimary && 'text-primary')}>{planLabels[plan]}</span>
-        </div>
-    )
-
-    return (
-        <div
-            data-plan={plan}
-            className={cn(isPrimary && 'ring-border bg-card/50 shadow-black/6.5 relative z-10 rounded-xl shadow-xl ring-1')}>
-            {header}
-
-            <div>
-                {features.map((feature, index) => {
-                    const value = feature.plans[plan]
-                    return (
-                        <div
-                            key={index}
-                            className="odd:bg-card flex h-14 items-center justify-center px-4 text-sm last:h-[calc(3.5rem+1px)] last:border-b group-last:odd:rounded-r-lg">
-                            <div className="text-center">
-                                {value === true ? (
-                                    <Indicator checked />
-                                ) : value === false ? (
-                                    <Indicator />
-                                ) : (
-                                    <span className={cn('text-muted-foreground text-xs font-medium', isPrimary && 'text-foreground')}>{value}</span>
-                                )}
-                            </div>
-                        </div>
-                    )
-                })}
-                <div className="h-6"></div>
-            </div>
-        </div>
-    )
-}
-
 export default function Comparator() {
     return (
         <section
             aria-labelledby="comparator-heading"
             className="bg-background py-16 md:py-24">
             <div className="mx-auto max-w-5xl px-6">
-                <div className="grid gap-12 lg:grid-cols-[1fr_2fr]">
-                    <div className="max-w-lg max-md:px-6">
-                        <div className="text-balance lg:max-w-xs">
-                            <h2
-                                id="comparator-heading"
-                                className="text-foreground text-3xl font-semibold md:text-4xl">
-                                Two options today. Both are compromises.
-                            </h2>
-                            <p className="text-muted-foreground mt-4 text-balance lg:mt-6">
-                                Build your own in Next.js and burn a weekend. Pay a hosted docs SaaS and get locked in. Helpbase is the third option: free as open source, paid only when you want us to host it.
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className="grid grid-cols-[1fr_1fr_1fr_1.1fr]">
-                        <div>
-                            <div className="z-1 sticky top-0 flex h-14 items-end gap-1.5 px-4 py-2 lg:px-6">
-                                <div className="text-muted-foreground text-sm font-medium">Feature</div>
-                            </div>
-
-                            {features.map((feature, index) => (
-                                <div
-                                    key={index}
-                                    className="text-muted-foreground md:nth-2:rounded-tl-xl even:bg-card flex h-14 items-center gap-1 rounded-l-lg px-4 last:h-[calc(3.5rem+1px)] md:last:rounded-bl-xl lg:px-6">
-                                    <div className="text-sm">{feature.name}</div>
-                                    {feature.description && (
-                                        <TooltipProvider>
-                                            <Tooltip>
-                                                <TooltipTrigger className="flex size-7">
-                                                    <span className="bg-foreground/10 text-foreground/65 m-auto flex size-4 items-center justify-center rounded-full text-sm">?</span>
-                                                </TooltipTrigger>
-                                                <TooltipContent className="max-w-56 text-sm">{feature.description}</TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>
-                                    )}
-                                </div>
-                            ))}
-                        </div>
+                <div className="mx-auto mb-12 max-w-2xl text-center">
+                    <h2
+                        id="comparator-heading"
+                        className="text-foreground text-3xl font-semibold md:text-4xl">
+                        Two options today. Both are compromises.
+                    </h2>
+                    <p className="text-muted-foreground mx-auto mt-4 max-w-xl text-balance text-lg">
+                        Helpbase is the third option.
+                    </p>
+                </div>
 
-                        {plans.map((plan) => (
-                            <div
-                                key={plan}
-                                className="group">
-                                {renderPlanColumn(plan)}
-                            </div>
-                        ))}
-                    </div>
+                <div className="grid gap-4 md:grid-cols-3">
+                    {options.map((option) => (
+                        <OptionCard
+                            key={option.key}
+                            option={option}
+                        />
+                    ))}
                 </div>
             </div>
         </section>
     )
 }
 
-const Indicator = ({ checked = false }: { checked?: boolean }) => {
+function OptionCard({ option }: { option: Option }) {
     return (
-        <span
+        <div
             className={cn(
-                'mx-auto flex size-4 items-center justify-center rounded-full bg-rose-500 font-sans text-xs font-semibold text-white',
-                checked && 'bg-emerald-600 text-white',
+                "ring-border relative flex flex-col rounded-2xl border border-transparent p-6 ring-1",
+                option.emphasized
+                    ? "bg-card shadow-black/6.5 z-10 shadow-xl"
+                    : "bg-card/40",
             )}>
-            {checked ? <CheckIcon /> : '✗'}
-        </span>
-    )
-}
+            {option.emphasized && (
+                <span className="bg-foreground text-background absolute -top-3 right-6 rounded-full px-2 py-0.5 text-[0.65rem] font-medium uppercase tracking-wider">
+                    Recommended
+                </span>
+            )}
 
-const CheckIcon = () => {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 512 512"
-            className="size-2.5">
-            <path
-                fill="currentColor"
-                d="M17.47 250.9C88.82 328.1 158 397.6 224.5 485.5c72.3-143.8 146.3-288.1 268.4-444.37L460 26.06C356.9 135.4 276.8 238.9 207.2 361.9c-48.4-43.6-126.62-105.3-174.38-137z"
-            />
-        </svg>
+            <div className="text-muted-foreground text-sm font-medium">
+                {option.name}
+            </div>
+
+            <div className="mt-2">
+                <div className="text-foreground text-3xl font-semibold tabular-nums">
+                    {option.metric}
+                </div>
+                <div className="text-muted-foreground text-xs">
+                    {option.metricSubtitle}
+                </div>
+            </div>
+
+            <p className="text-muted-foreground mt-4 text-sm leading-relaxed">
+                {option.body}
+            </p>
+
+            <ul
+                role="list"
+                className="mt-5 space-y-2.5 text-sm">
+                {option.signals.map((signal, i) => (
+                    <li
+                        key={i}
+                        className="flex items-start gap-2">
+                        {signal.positive ? (
+                            <span className="bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 mt-px flex size-4 shrink-0 items-center justify-center rounded-full">
+                                <Check
+                                    className="size-2.5"
+                                    strokeWidth={3}
+                                />
+                            </span>
+                        ) : (
+                            <span className="bg-foreground/10 text-muted-foreground mt-px flex size-4 shrink-0 items-center justify-center rounded-full">
+                                <X
+                                    className="size-2.5"
+                                    strokeWidth={3}
+                                />
+                            </span>
+                        )}
+                        <span
+                            className={cn(
+                                signal.positive
+                                    ? "text-foreground"
+                                    : "text-muted-foreground",
+                            )}>
+                            {signal.text}
+                        </span>
+                    </li>
+                ))}
+            </ul>
+
+            <div className="border-border/60 mt-6 flex items-baseline gap-1 border-t pt-4">
+                <span className="text-foreground text-sm font-medium">
+                    {option.cost}
+                </span>
+                {option.costNote && (
+                    <span className="text-muted-foreground text-xs">
+                        {option.costNote}
+                    </span>
+                )}
+            </div>
+        </div>
     )
 }
diff --git a/apps/web/components/illustrations/flow.tsx b/apps/web/components/illustrations/flow.tsx
index 1008e7e..707ff68 100644
--- a/apps/web/components/illustrations/flow.tsx
+++ b/apps/web/components/illustrations/flow.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { LogoIcon } from "@/components/logo"
 import { Vercel } from '@/components/ui/svgs/vercel'
 import { Supabase } from '@/components/ui/svgs/supabase'
 import { Firebase } from '@/components/ui/svgs/firebase'
@@ -184,8 +183,10 @@ export const FlowIllustration = () => {
             </div>
 
             <div className="relative z-10 mb-20 mt-24">
-                <div className="dark:bg-illustration/75 dark:ring-border-illustration relative flex size-14 items-center justify-center rounded-full bg-black/75 shadow-xl shadow-black/20 ring-1 ring-black backdrop-blur">
-                    <LogoIcon className="size-6" />
+                <div className="dark:bg-illustration/75 dark:ring-border-illustration relative flex size-14 items-center justify-center rounded-full bg-black/85 shadow-xl shadow-black/20 ring-1 ring-black backdrop-blur">
+                    <span className="text-background text-lg font-semibold leading-none tracking-tight">
+                        h
+                    </span>
                 </div>
             </div>
 
diff --git a/apps/web/components/illustrations/mdx-source-preview.tsx b/apps/web/components/illustrations/mdx-source-preview.tsx
index 31dd286..f1d35b7 100644
--- a/apps/web/components/illustrations/mdx-source-preview.tsx
+++ b/apps/web/components/illustrations/mdx-source-preview.tsx
@@ -1,36 +1,73 @@
+import { FileText, Lightbulb } from "lucide-react"
+
 export const MdxSourcePreview = () => (
   <div
     aria-hidden
-    className="ring-border bg-card relative z-10 mx-auto w-full max-w-sm rounded-xl border border-transparent p-4 font-mono text-xs ring-1">
-    <div className="text-muted-foreground mb-3 text-[0.65rem] uppercase tracking-wider">
-      content/getting-started.mdx
+    className="ring-border bg-card relative z-10 mx-auto w-full max-w-sm overflow-hidden rounded-xl border border-transparent ring-1">
+    <div className="border-border/60 bg-muted/40 flex items-center justify-between gap-2 border-b px-3.5 py-2">
+      <div className="flex items-center gap-1.5">
+        <FileText className="text-muted-foreground size-3" />
+        <span className="text-muted-foreground font-mono text-[0.65rem] uppercase tracking-wider">
+          getting-started.mdx
+        </span>
+      </div>
+      <span className="text-emerald-600 dark:text-emerald-400 text-[0.6rem] font-medium uppercase tracking-wider">
+        Source
+      </span>
     </div>
-    <div className="space-y-1.5">
-      <div className="text-muted-foreground">---</div>
+
+    <div className="space-y-1.5 p-4 font-mono text-xs leading-relaxed">
+      <div className="text-muted-foreground/80">---</div>
       <div>
-        <span className="text-muted-foreground">title:</span>{" "}
-        <span className="text-foreground">Getting started</span>
+        <span className="text-violet-600 dark:text-violet-400">title:</span>{" "}
+        <span className="text-foreground">Install helpbase</span>
       </div>
       <div>
-        <span className="text-muted-foreground">order:</span>{" "}
-        <span className="text-foreground">1</span>
+        <span className="text-violet-600 dark:text-violet-400">order:</span>{" "}
+        <span className="text-amber-600 dark:text-amber-400">1</span>
       </div>
-      <div className="text-muted-foreground">---</div>
-      <div className="h-1.5" />
-      <div className="text-foreground"># Install helpbase</div>
-      <div className="h-1.5" />
-      <div className="text-muted-foreground">
-        Run one command in your repo to
+      <div className="text-muted-foreground/80">---</div>
+      <div className="h-1" />
+      <div>
+        <span className="text-foreground"># Install helpbase</span>
       </div>
       <div className="text-muted-foreground">
-        create a full Next.js help center.
+        Run one command to get started.
+      </div>
+      <div className="h-1" />
+      <div>
+        <span className="text-sky-600 dark:text-sky-400">{"<Callout"}</span>{" "}
+        <span className="text-violet-600 dark:text-violet-400">type</span>
+        <span className="text-muted-foreground">=</span>
+        <span className="text-emerald-600 dark:text-emerald-400">"tip"</span>
+        <span className="text-sky-600 dark:text-sky-400">{">"}</span>
+      </div>
+      <div className="text-muted-foreground pl-3">
+        Edit and ship.
+      </div>
+      <div className="text-sky-600 dark:text-sky-400">{"</Callout>"}</div>
+    </div>
+
+    <div className="border-border/60 bg-background/60 border-t px-4 py-3">
+      <div className="text-muted-foreground mb-2 text-[0.6rem] font-medium uppercase tracking-wider">
+        Rendered
+      </div>
+      <div className="text-foreground mb-1 text-base font-semibold leading-tight">
+        Install helpbase
+      </div>
+      <div className="text-muted-foreground mb-2.5 text-xs leading-relaxed">
+        Run one command to get started.
       </div>
-      <div className="h-1.5" />
-      <div className="text-primary">{`<Callout type="tip">`}</div>
-      <div className="pl-3 text-muted-foreground">
-        Edit this file to add your own content.
+      <div className="ring-amber-500/25 bg-amber-500/10 flex items-start gap-2 rounded-md px-2.5 py-2 ring-1">
+        <Lightbulb
+          aria-hidden
+          className="mt-0.5 size-3 shrink-0 text-amber-600 dark:text-amber-400"
+          strokeWidth={2.5}
+        />
+        <span className="text-foreground text-xs leading-snug">
+          Edit and ship.
+        </span>
       </div>
-      <div className="text-primary">{`</Callout>`}</div>
     </div>
   </div>
 )
diff --git a/apps/web/components/marketing/hero.tsx b/apps/web/components/marketing/hero.tsx
index 1a7a639..e6458d4 100644
--- a/apps/web/components/marketing/hero.tsx
+++ b/apps/web/components/marketing/hero.tsx
@@ -41,7 +41,7 @@ export function Hero() {
           </div>
         </div>
 
-        <div className="corner-t-notch relative z-10 mx-auto grid max-w-6xl gap-8 rounded-t-[2rem] border-x border-t px-6 py-16 max-md:pb-10">
+        <div className="relative z-10 mx-auto grid max-w-6xl gap-8 px-6 py-16 max-md:pb-10">
           <div className="mx-auto max-w-3xl text-center">
             <h1
               id="hero-heading"
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index b6c7104..d0a0dbf 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -3,12 +3,12 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@workspace/ui/lib/utils'
 
-const buttonVariants = cva('cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+const buttonVariants = cva('cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,transform,box-shadow] duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
-            default: 'shadow-md border-[0.5px] border-white/10 shadow-black/15 [&_svg]:drop-shadow-sm text-shadow-sm bg-primary ring-1 ring-(--ring-color) [--ring-color:color-mix(in_oklab,black_15%,var(--color-primary))] dark:border-transparent dark:[--ring-color:color-mix(in_oklab,white_15%,var(--color-primary))] text-primary-foreground hover:bg-primary/90',
-            destructive: 'shadow-md border-[0.5px] border-white/10 shadow-black/25 [&_svg]:drop-shadow-sm text-shadow-sm bg-destructive ring-1 ring-(--ring-color) [--ring-color:color-mix(in_oklab,black_15%,var(--color-destructive))] text-destructive-foreground hover:bg-destructive/90',
-            outline: 'shadow-sm shadow-black/15 border border-transparent bg-card ring-1 ring-foreground/10 duration-200 hover:bg-muted/50 dark:ring-foreground/15 dark:hover:bg-muted/50',
+            default: 'shadow-md border-[0.5px] border-white/10 shadow-black/15 [&_svg]:drop-shadow-sm text-shadow-sm bg-primary ring-1 ring-(--ring-color) [--ring-color:color-mix(in_oklab,black_15%,var(--color-primary))] dark:border-transparent dark:[--ring-color:color-mix(in_oklab,white_15%,var(--color-primary))] text-primary-foreground hover:bg-primary/90 active:shadow-sm',
+            destructive: 'shadow-md border-[0.5px] border-white/10 shadow-black/25 [&_svg]:drop-shadow-sm text-shadow-sm bg-destructive ring-1 ring-(--ring-color) [--ring-color:color-mix(in_oklab,black_15%,var(--color-destructive))] text-destructive-foreground hover:bg-destructive/90 active:shadow-sm',
+            outline: 'shadow-sm shadow-black/15 border border-transparent bg-card ring-1 ring-foreground/10 hover:bg-muted/50 active:shadow-xs dark:ring-foreground/15 dark:hover:bg-muted/50',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
             ghost: 'hover:bg-foreground/5 hover:text-foreground',
             link: 'text-primary underline-offset-4 hover:underline',
diff --git a/apps/web/public/r/help-center.json b/apps/web/public/r/help-center.json
index a85231a..a2e2b4f 100644
--- a/apps/web/public/r/help-center.json
+++ b/apps/web/public/r/help-center.json
@@ -12,11 +12,13 @@
     "rehype-pretty-code",
     "shiki",
     "zod",
-    "lucide-react"
+    "lucide-react",
+    "@radix-ui/react-slot"
   ],
   "registryDependencies": [
     "badge",
     "accordion",
+    "button",
     "tabs"
   ],
   "files": [
@@ -52,7 +54,7 @@
     },
     {
       "path": "registry/helpbase/components/footer.tsx",
-      "content": "import Link from \"next/link\"\n\nexport function Footer() {\n  return (\n    <footer className=\"border-t border-border/50\">\n      <div className=\"mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-6 text-sm text-muted-foreground sm:flex-row\">\n        <p>\n          Built with{\" \"}\n          <Link\n            href=\"/docs\"\n            className=\"font-medium text-foreground underline-offset-4 hover:underline\"\n          >\n            helpbase\n          </Link>\n        </p>\n        <div className=\"flex items-center gap-4\">\n          <a\n            href=\"https://github.com/Codehagen/helpbase\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"transition-colors hover:text-foreground\"\n          >\n            GitHub\n          </a>\n          <span className=\"text-border\">|</span>\n          <a\n            href=\"https://x.com/CodeHagen\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"transition-colors hover:text-foreground\"\n          >\n            Twitter\n          </a>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
+      "content": "import { Button } from '@/components/ui/button'\nimport Link from 'next/link'\n\nconst links = [\n    {\n        group: 'Product',\n        items: [\n            { title: 'Pricing', href: '/#pricing' },\n            { title: 'Demo', href: 'https://demo.helpbase.dev' },\n            { title: 'FAQ', href: '/#faq' },\n        ],\n    },\n    {\n        group: 'Resources',\n        items: [\n            { title: 'Docs', href: '/docs' },\n            { title: 'GitHub', href: 'https://github.com/Codehagen/helpbase' },\n            { title: 'MCP', href: '/docs/mcp' },\n        ],\n    },\n    {\n        group: 'Company',\n        items: [\n            { title: 'Changelog', href: 'https://github.com/Codehagen/helpbase/releases' },\n            { title: 'License', href: 'https://github.com/Codehagen/helpbase/blob/main/LICENSE' },\n            { title: 'Privacy', href: '/docs/privacy' },\n        ],\n    },\n]\n\nexport default function FooterSection() {\n    return (\n        <footer\n            role=\"contentinfo\"\n            className=\"bg-background pt-8 sm:pt-20\">\n            <div className=\"mx-auto max-w-5xl space-y-16 px-6\">\n                <div className=\"flex flex-wrap justify-between gap-6\">\n                    <div className=\"max-w-xs space-y-6 md:col-span-2\">\n                        <Link\n                            href=\"/\"\n                            aria-label=\"helpbase home\"\n                            className=\"text-foreground block size-fit text-lg font-semibold tracking-tight\">\n                            helpbase\n                        </Link>\n\n                        <p className=\"text-muted-foreground text-balance text-sm\">\n                            Open-source help centers with an MCP server and llms.txt built in. Self-host free, or host it with us.\n                        </p>\n                    </div>\n\n                    <div className=\"flex flex-wrap gap-3 text-sm\">\n                        <Link\n                            href=\"https://github.com/Codehagen/helpbase\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            aria-label=\"GitHub\"\n                            className=\"text-muted-foreground hover:text-primary block\">\n                            <svg\n                                className=\"size-5\"\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"currentColor\">\n                                <path d=\"M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.94c.57.1.78-.25.78-.55v-2.1c-3.2.7-3.87-1.37-3.87-1.37-.52-1.34-1.27-1.7-1.27-1.7-1.04-.71.08-.69.08-.69 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.25 3.34.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.3-.52-1.47.11-3.06 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.78 0c2.2-1.5 3.17-1.18 3.17-1.18.64 1.59.23 2.76.12 3.05.74.82 1.18 1.86 1.18 3.1 0 4.43-2.7 5.41-5.26 5.69.41.36.78 1.06.78 2.13v3.17c0 .31.21.67.79.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z\" />\n                            </svg>\n                        </Link>\n                        <Link\n                            href=\"https://x.com/codehagen\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            aria-label=\"X/Twitter\"\n                            className=\"text-muted-foreground hover:text-primary block\">\n                            <svg\n                                className=\"size-5\"\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                viewBox=\"0 0 24 24\">\n                                <path\n                                    fill=\"currentColor\"\n                                    d=\"M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z\"\n                                />\n                            </svg>\n                        </Link>\n                    </div>\n                </div>\n                <div\n                    aria-hidden\n                    className=\"h-px bg-[length:6px_1px] bg-repeat-x opacity-25 [background-image:linear-gradient(90deg,var(--color-foreground)_1px,transparent_1px)]\"\n                />\n                <div className=\"grid gap-12 md:grid-cols-5\">\n                    <div className=\"grid gap-6 sm:grid-cols-3 md:col-span-3\">\n                        {links.map((group) => (\n                            <div\n                                key={group.group}\n                                className=\"space-y-4 text-sm\">\n                                <span className=\"block font-medium\">{group.group}</span>\n\n                                <div className=\"flex flex-wrap gap-4 sm:flex-col\">\n                                    {group.items.map((item) => (\n                                        <Link\n                                            key={item.title}\n                                            href={item.href}\n                                            {...(item.href.startsWith('http') && {\n                                                target: '_blank',\n                                                rel: 'noreferrer',\n                                            })}\n                                            className=\"text-muted-foreground hover:text-primary block duration-150\">\n                                            <span>{item.title}</span>\n                                        </Link>\n                                    ))}\n                                </div>\n                            </div>\n                        ))}\n                    </div>\n\n                    <div className=\"md:col-span-2\">\n                        <div className=\"ml-auto w-full space-y-4 md:max-w-xs\">\n                            <div className=\"block text-sm font-medium\">Updates, every release</div>\n                            <div className=\"flex gap-2\">\n                                <Button\n                                    asChild\n                                    variant=\"outline\"\n                                    size=\"sm\">\n                                    <Link\n                                        href=\"https://github.com/Codehagen/helpbase/releases\"\n                                        target=\"_blank\"\n                                        rel=\"noreferrer\">\n                                        Follow on GitHub Releases\n                                        <span\n                                            aria-hidden\n                                            className=\"text-muted-foreground ml-1\">\n                                            ↗\n                                        </span>\n                                    </Link>\n                                </Button>\n                            </div>\n                            <p className=\"text-muted-foreground text-xs\">\n                                Release notes and shipped features, straight from the repo. No newsletter inbox to opt out of.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"flex flex-wrap justify-between gap-4 border-t py-8\">\n                    <span className=\"text-muted-foreground text-sm\">\n                        © {new Date().getFullYear()} helpbase. Built with shadcn/ui, Next.js, Supabase, Vercel.\n                    </span>\n                    <div className=\"ring-foreground/5 bg-card flex items-center gap-2 rounded-full border border-transparent py-1 pl-2 pr-4 shadow ring-1\">\n                        <div className=\"relative flex size-3\">\n                            <span className=\"duration-1500 absolute inset-0 block size-full animate-pulse rounded-full bg-emerald-100\"></span>\n                            <span className=\"relative m-auto block size-1 rounded-full bg-emerald-500\"></span>\n                        </div>\n                        <span className=\"text-sm\">Open source, live</span>\n                    </div>\n                </div>\n            </div>\n        </footer>\n    )\n}\n\nexport { FooterSection as Footer }\n",
       "type": "registry:component",
       "target": "components/footer.tsx"
     },
diff --git a/apps/web/public/r/registry.json b/apps/web/public/r/registry.json
index 31f11ff..1d1c936 100644
--- a/apps/web/public/r/registry.json
+++ b/apps/web/public/r/registry.json
@@ -17,9 +17,10 @@
         "rehype-pretty-code",
         "shiki",
         "zod",
-        "lucide-react"
+        "lucide-react",
+        "@radix-ui/react-slot"
       ],
-      "registryDependencies": ["badge", "accordion", "tabs"],
+      "registryDependencies": ["badge", "accordion", "button", "tabs"],
       "files": [
         {
           "path": "registry/helpbase/app/(docs)/layout.tsx",
diff --git a/packages/create-helpbase/templates/components/ui/button.tsx b/packages/create-helpbase/templates/components/ui/button.tsx
new file mode 100644
index 0000000..59e8eb9
--- /dev/null
+++ b/packages/create-helpbase/templates/components/ui/button.tsx
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/create-helpbase/templates/components/ui/card.tsx b/packages/create-helpbase/templates/components/ui/card.tsx
deleted file mode 100644
index 96681a2..0000000
--- a/packages/create-helpbase/templates/components/ui/card.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean
-}
-
-function Card({ className, asChild = false, ...props }: CardProps) {
-    const Comp = asChild ? Slot : 'div'
-    return (
-        <Comp
-            data-slot="card"
-            className={cn('ring-foreground/6.5 bg-card text-card-foreground rounded-xl shadow ring-1', className)}
-            {...props}
-        />
-    )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-header"
-            className={cn('flex flex-col gap-1.5 p-6', className)}
-            {...props}
-        />
-    )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-title"
-            className={cn('font-semibold leading-none tracking-tight', className)}
-            {...props}
-        />
-    )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-description"
-            className={cn('text-muted-foreground text-sm', className)}
-            {...props}
-        />
-    )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-content"
-            className={cn('p-6 pt-0', className)}
-            {...props}
-        />
-    )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-footer"
-            className={cn('flex items-center p-6 pt-0', className)}
-            {...props}
-        />
-    )
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/packages/create-helpbase/templates/components/ui/chart.tsx b/packages/create-helpbase/templates/components/ui/chart.tsx
deleted file mode 100644
index 17a5927..0000000
--- a/packages/create-helpbase/templates/components/ui/chart.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-import type { TooltipValueType } from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-const INITIAL_DIMENSION = { width: 320, height: 200 } as const
-type TooltipNameType = number | string
-
-export type ChartConfig = Record<
-  string,
-  {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
->
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-  initialDimension?: {
-    width: number
-    height: number
-  }
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
-          initialDimension={initialDimension}
-        >
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  } & Omit<
-    RechartsPrimitive.DefaultTooltipContentProps<
-      TooltipValueType,
-      TooltipNameType
-    >,
-    "accessibilityLayer"
-  >) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "grid min-w-32 items-start gap-1.5 rounded-xl bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color ?? item.payload?.fill ?? item.color
-
-            return (
-              <div
-                key={index}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
-                        </span>
-                      </div>
-                      {item.value != null && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
-                          {typeof item.value === "number"
-                            ? item.value.toLocaleString()
-                            : String(item.value)}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> & {
-  hideIcon?: boolean
-  nameKey?: string
-} & RechartsPrimitive.DefaultLegendContentProps) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item, index) => {
-          const key = `${nameKey ?? item.dataKey ?? "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={index}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/packages/create-helpbase/templates/components/ui/infinite-slider.tsx b/packages/create-helpbase/templates/components/ui/infinite-slider.tsx
deleted file mode 100644
index 084b2f1..0000000
--- a/packages/create-helpbase/templates/components/ui/infinite-slider.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-import { cn } from '@/lib/utils'
-import { useMotionValue, animate, motion } from 'motion/react'
-import { useState, useEffect, type ReactNode } from 'react'
-import useMeasure from 'react-use-measure'
-
-export type InfiniteSliderProps = {
-    children: ReactNode
-    gap?: number
-    speed?: number
-    speedOnHover?: number
-    direction?: 'horizontal' | 'vertical'
-    reverse?: boolean
-    className?: string
-}
-
-export function InfiniteSlider({ children, gap = 16, speed = 100, speedOnHover, direction = 'horizontal', reverse = false, className }: InfiniteSliderProps) {
-    const [currentSpeed, setCurrentSpeed] = useState(speed)
-    const [ref, { width, height }] = useMeasure()
-    const translation = useMotionValue(0)
-    const [isTransitioning, setIsTransitioning] = useState(false)
-    const [key, setKey] = useState(0)
-
-    useEffect(() => {
-        let controls
-        const size = direction === 'horizontal' ? width : height
-        const contentSize = size + gap
-        const from = reverse ? -contentSize / 2 : 0
-        const to = reverse ? 0 : -contentSize / 2
-
-        const distanceToTravel = Math.abs(to - from)
-        const duration = distanceToTravel / currentSpeed
-
-        if (isTransitioning) {
-            const remainingDistance = Math.abs(translation.get() - to)
-            const transitionDuration = remainingDistance / currentSpeed
-
-            controls = animate(translation, [translation.get(), to], {
-                ease: 'linear',
-                duration: transitionDuration,
-                onComplete: () => {
-                    setIsTransitioning(false)
-                    setKey((prevKey) => prevKey + 1)
-                },
-            })
-        } else {
-            controls = animate(translation, [from, to], {
-                ease: 'linear',
-                duration: duration,
-                repeat: Infinity,
-                repeatType: 'loop',
-                repeatDelay: 0,
-                onRepeat: () => {
-                    translation.set(from)
-                },
-            })
-        }
-
-        return controls?.stop
-    }, [key, translation, currentSpeed, width, height, gap, isTransitioning, direction, reverse])
-
-    const hoverProps = speedOnHover
-        ? {
-              onHoverStart: () => {
-                  setIsTransitioning(true)
-                  setCurrentSpeed(speedOnHover)
-              },
-              onHoverEnd: () => {
-                  setIsTransitioning(true)
-                  setCurrentSpeed(speed)
-              },
-          }
-        : {}
-
-    return (
-        <div className={cn('overflow-hidden', className)}>
-            <motion.div
-                className="flex w-max"
-                style={{
-                    ...(direction === 'horizontal' ? { x: translation } : { y: translation }),
-                    gap: `${gap}px`,
-                    flexDirection: direction === 'horizontal' ? 'row' : 'column',
-                }}
-                ref={ref}
-                {...hoverProps}>
-                {children}
-                {children}
-            </motion.div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/packages/create-helpbase/templates/components/ui/input.tsx b/packages/create-helpbase/templates/components/ui/input.tsx
deleted file mode 100644
index 290b7b8..0000000
--- a/packages/create-helpbase/templates/components/ui/input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-    return (
-        <input
-            type={type}
-            data-slot="input"
-            className={cn(
-                'bg-card ring-foreground/10 file:text-foreground placeholder:text-muted-foreground/75 selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border border-transparent px-3 py-1 text-base shadow-sm outline-none ring-1 transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                'focus-visible:border-foreground/35 focus-visible:ring-ring/25 dark:focus-visible:border-foreground/25 focus-visible:ring-[3px]',
-                'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-export { Input }
\ No newline at end of file
diff --git a/packages/create-helpbase/templates/components/ui/label.tsx b/packages/create-helpbase/templates/components/ui/label.tsx
deleted file mode 100644
index 1ac80f7..0000000
--- a/packages/create-helpbase/templates/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/packages/create-helpbase/templates/components/ui/text-scramble.tsx b/packages/create-helpbase/templates/components/ui/text-scramble.tsx
deleted file mode 100644
index 64a6d87..0000000
--- a/packages/create-helpbase/templates/components/ui/text-scramble.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client';
-import { type JSX, useEffect, useState } from 'react';
-import { motion, MotionProps } from 'motion/react';
-
-export type TextScrambleProps = {
-  children: string;
-  duration?: number;
-  speed?: number;
-  characterSet?: string;
-  as?: React.ElementType;
-  className?: string;
-  trigger?: boolean;
-  onScrambleComplete?: () => void;
-} & MotionProps;
-
-const defaultChars =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-export function TextScramble({
-  children,
-  duration = 0.8,
-  speed = 0.04,
-  characterSet = defaultChars,
-  className,
-  as: Component = 'p',
-  trigger = true,
-  onScrambleComplete,
-  ...props
-}: TextScrambleProps) {
-  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements
-  );
-  const [displayText, setDisplayText] = useState(children);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const text = children;
-
-  const scramble = async () => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-
-    const steps = duration / speed;
-    let step = 0;
-
-    const interval = setInterval(() => {
-      let scrambled = '';
-      const progress = step / steps;
-
-      for (let i = 0; i < text.length; i++) {
-        if (text[i] === ' ') {
-          scrambled += ' ';
-          continue;
-        }
-
-        if (progress * text.length > i) {
-          scrambled += text[i];
-        } else {
-          scrambled +=
-            characterSet[Math.floor(Math.random() * characterSet.length)];
-        }
-      }
-
-      setDisplayText(scrambled);
-      step++;
-
-      if (step > steps) {
-        clearInterval(interval);
-        setDisplayText(text);
-        setIsAnimating(false);
-        onScrambleComplete?.();
-      }
-    }, speed * 1000);
-  };
-
-  useEffect(() => {
-    if (!trigger) return;
-
-    scramble();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [trigger]);
-
-  return (
-    <MotionComponent className={className} {...props}>
-      {displayText}
-    </MotionComponent>
-  );
-}
\ No newline at end of file
diff --git a/packages/create-helpbase/templates/components/ui/tooltip.tsx b/packages/create-helpbase/templates/components/ui/tooltip.tsx
deleted file mode 100644
index 93b19a5..0000000
--- a/packages/create-helpbase/templates/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-
-import { cn } from '@/lib/utils'
-
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-    return (
-        <TooltipPrimitive.Provider
-            data-slot="tooltip-provider"
-            delayDuration={delayDuration}
-            {...props}
-        />
-    )
-}
-
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-    return (
-        <TooltipProvider>
-            <TooltipPrimitive.Root
-                data-slot="tooltip"
-                {...props}
-            />
-        </TooltipProvider>
-    )
-}
-
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-    return (
-        <TooltipPrimitive.Trigger
-            data-slot="tooltip-trigger"
-            {...props}
-        />
-    )
-}
-
-function TooltipContent({ className, sideOffset = 4, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-    return (
-        <TooltipPrimitive.Portal>
-            <TooltipPrimitive.Content
-                data-slot="tooltip-content"
-                sideOffset={sideOffset}
-                className={cn(
-                    'bg-card text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-(--radius) ring-foreground/10 z-50 max-w-sm border border-transparent px-3 py-2 text-xs shadow-md shadow-black/10 ring-1 backdrop-blur dark:border-white/5 dark:bg-zinc-900/75 dark:shadow-lg dark:shadow-black/20 dark:ring-black/75',
-                    className
-                )}
-                {...props}>
-                {children}
-            </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-    )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
\ No newline at end of file
diff --git a/packages/create-helpbase/templates/package.json b/packages/create-helpbase/templates/package.json
index e7e9a11..0f7983c 100644
--- a/packages/create-helpbase/templates/package.json
+++ b/packages/create-helpbase/templates/package.json
@@ -31,6 +31,7 @@
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "tw-animate-css": "^1.4.0",
     "shadcn": "^4.2.0"
   },
diff --git a/registry.json b/registry.json
index 31f11ff..1d1c936 100644
--- a/registry.json
+++ b/registry.json
@@ -17,9 +17,10 @@
         "rehype-pretty-code",
         "shiki",
         "zod",
-        "lucide-react"
+        "lucide-react",
+        "@radix-ui/react-slot"
       ],
-      "registryDependencies": ["badge", "accordion", "tabs"],
+      "registryDependencies": ["badge", "accordion", "button", "tabs"],
       "files": [
         {
           "path": "registry/helpbase/app/(docs)/layout.tsx",
diff --git a/registry/helpbase/components/ui/card.tsx b/registry/helpbase/components/ui/card.tsx
deleted file mode 100644
index 96681a2..0000000
--- a/registry/helpbase/components/ui/card.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean
-}
-
-function Card({ className, asChild = false, ...props }: CardProps) {
-    const Comp = asChild ? Slot : 'div'
-    return (
-        <Comp
-            data-slot="card"
-            className={cn('ring-foreground/6.5 bg-card text-card-foreground rounded-xl shadow ring-1', className)}
-            {...props}
-        />
-    )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-header"
-            className={cn('flex flex-col gap-1.5 p-6', className)}
-            {...props}
-        />
-    )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-title"
-            className={cn('font-semibold leading-none tracking-tight', className)}
-            {...props}
-        />
-    )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-description"
-            className={cn('text-muted-foreground text-sm', className)}
-            {...props}
-        />
-    )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-content"
-            className={cn('p-6 pt-0', className)}
-            {...props}
-        />
-    )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="card-footer"
-            className={cn('flex items-center p-6 pt-0', className)}
-            {...props}
-        />
-    )
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/registry/helpbase/components/ui/chart.tsx b/registry/helpbase/components/ui/chart.tsx
deleted file mode 100644
index 17a5927..0000000
--- a/registry/helpbase/components/ui/chart.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-import type { TooltipValueType } from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-const INITIAL_DIMENSION = { width: 320, height: 200 } as const
-type TooltipNameType = number | string
-
-export type ChartConfig = Record<
-  string,
-  {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
->
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-  initialDimension?: {
-    width: number
-    height: number
-  }
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
-          initialDimension={initialDimension}
-        >
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  } & Omit<
-    RechartsPrimitive.DefaultTooltipContentProps<
-      TooltipValueType,
-      TooltipNameType
-    >,
-    "accessibilityLayer"
-  >) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "grid min-w-32 items-start gap-1.5 rounded-xl bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color ?? item.payload?.fill ?? item.color
-
-            return (
-              <div
-                key={index}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
-                        </span>
-                      </div>
-                      {item.value != null && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
-                          {typeof item.value === "number"
-                            ? item.value.toLocaleString()
-                            : String(item.value)}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> & {
-  hideIcon?: boolean
-  nameKey?: string
-} & RechartsPrimitive.DefaultLegendContentProps) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item, index) => {
-          const key = `${nameKey ?? item.dataKey ?? "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={index}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/registry/helpbase/components/ui/infinite-slider.tsx b/registry/helpbase/components/ui/infinite-slider.tsx
deleted file mode 100644
index 084b2f1..0000000
--- a/registry/helpbase/components/ui/infinite-slider.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-import { cn } from '@/lib/utils'
-import { useMotionValue, animate, motion } from 'motion/react'
-import { useState, useEffect, type ReactNode } from 'react'
-import useMeasure from 'react-use-measure'
-
-export type InfiniteSliderProps = {
-    children: ReactNode
-    gap?: number
-    speed?: number
-    speedOnHover?: number
-    direction?: 'horizontal' | 'vertical'
-    reverse?: boolean
-    className?: string
-}
-
-export function InfiniteSlider({ children, gap = 16, speed = 100, speedOnHover, direction = 'horizontal', reverse = false, className }: InfiniteSliderProps) {
-    const [currentSpeed, setCurrentSpeed] = useState(speed)
-    const [ref, { width, height }] = useMeasure()
-    const translation = useMotionValue(0)
-    const [isTransitioning, setIsTransitioning] = useState(false)
-    const [key, setKey] = useState(0)
-
-    useEffect(() => {
-        let controls
-        const size = direction === 'horizontal' ? width : height
-        const contentSize = size + gap
-        const from = reverse ? -contentSize / 2 : 0
-        const to = reverse ? 0 : -contentSize / 2
-
-        const distanceToTravel = Math.abs(to - from)
-        const duration = distanceToTravel / currentSpeed
-
-        if (isTransitioning) {
-            const remainingDistance = Math.abs(translation.get() - to)
-            const transitionDuration = remainingDistance / currentSpeed
-
-            controls = animate(translation, [translation.get(), to], {
-                ease: 'linear',
-                duration: transitionDuration,
-                onComplete: () => {
-                    setIsTransitioning(false)
-                    setKey((prevKey) => prevKey + 1)
-                },
-            })
-        } else {
-            controls = animate(translation, [from, to], {
-                ease: 'linear',
-                duration: duration,
-                repeat: Infinity,
-                repeatType: 'loop',
-                repeatDelay: 0,
-                onRepeat: () => {
-                    translation.set(from)
-                },
-            })
-        }
-
-        return controls?.stop
-    }, [key, translation, currentSpeed, width, height, gap, isTransitioning, direction, reverse])
-
-    const hoverProps = speedOnHover
-        ? {
-              onHoverStart: () => {
-                  setIsTransitioning(true)
-                  setCurrentSpeed(speedOnHover)
-              },
-              onHoverEnd: () => {
-                  setIsTransitioning(true)
-                  setCurrentSpeed(speed)
-              },
-          }
-        : {}
-
-    return (
-        <div className={cn('overflow-hidden', className)}>
-            <motion.div
-                className="flex w-max"
-                style={{
-                    ...(direction === 'horizontal' ? { x: translation } : { y: translation }),
-                    gap: `${gap}px`,
-                    flexDirection: direction === 'horizontal' ? 'row' : 'column',
-                }}
-                ref={ref}
-                {...hoverProps}>
-                {children}
-                {children}
-            </motion.div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/registry/helpbase/components/ui/input.tsx b/registry/helpbase/components/ui/input.tsx
deleted file mode 100644
index 290b7b8..0000000
--- a/registry/helpbase/components/ui/input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-    return (
-        <input
-            type={type}
-            data-slot="input"
-            className={cn(
-                'bg-card ring-foreground/10 file:text-foreground placeholder:text-muted-foreground/75 selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border border-transparent px-3 py-1 text-base shadow-sm outline-none ring-1 transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                'focus-visible:border-foreground/35 focus-visible:ring-ring/25 dark:focus-visible:border-foreground/25 focus-visible:ring-[3px]',
-                'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-export { Input }
\ No newline at end of file
diff --git a/registry/helpbase/components/ui/label.tsx b/registry/helpbase/components/ui/label.tsx
deleted file mode 100644
index 1ac80f7..0000000
--- a/registry/helpbase/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/registry/helpbase/components/ui/text-scramble.tsx b/registry/helpbase/components/ui/text-scramble.tsx
deleted file mode 100644
index 64a6d87..0000000
--- a/registry/helpbase/components/ui/text-scramble.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client';
-import { type JSX, useEffect, useState } from 'react';
-import { motion, MotionProps } from 'motion/react';
-
-export type TextScrambleProps = {
-  children: string;
-  duration?: number;
-  speed?: number;
-  characterSet?: string;
-  as?: React.ElementType;
-  className?: string;
-  trigger?: boolean;
-  onScrambleComplete?: () => void;
-} & MotionProps;
-
-const defaultChars =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-export function TextScramble({
-  children,
-  duration = 0.8,
-  speed = 0.04,
-  characterSet = defaultChars,
-  className,
-  as: Component = 'p',
-  trigger = true,
-  onScrambleComplete,
-  ...props
-}: TextScrambleProps) {
-  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements
-  );
-  const [displayText, setDisplayText] = useState(children);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const text = children;
-
-  const scramble = async () => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-
-    const steps = duration / speed;
-    let step = 0;
-
-    const interval = setInterval(() => {
-      let scrambled = '';
-      const progress = step / steps;
-
-      for (let i = 0; i < text.length; i++) {
-        if (text[i] === ' ') {
-          scrambled += ' ';
-          continue;
-        }
-
-        if (progress * text.length > i) {
-          scrambled += text[i];
-        } else {
-          scrambled +=
-            characterSet[Math.floor(Math.random() * characterSet.length)];
-        }
-      }
-
-      setDisplayText(scrambled);
-      step++;
-
-      if (step > steps) {
-        clearInterval(interval);
-        setDisplayText(text);
-        setIsAnimating(false);
-        onScrambleComplete?.();
-      }
-    }, speed * 1000);
-  };
-
-  useEffect(() => {
-    if (!trigger) return;
-
-    scramble();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [trigger]);
-
-  return (
-    <MotionComponent className={className} {...props}>
-      {displayText}
-    </MotionComponent>
-  );
-}
\ No newline at end of file
diff --git a/registry/helpbase/components/ui/tooltip.tsx b/registry/helpbase/components/ui/tooltip.tsx
deleted file mode 100644
index 93b19a5..0000000
--- a/registry/helpbase/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-
-import { cn } from '@/lib/utils'
-
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-    return (
-        <TooltipPrimitive.Provider
-            data-slot="tooltip-provider"
-            delayDuration={delayDuration}
-            {...props}
-        />
-    )
-}
-
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-    return (
-        <TooltipProvider>
-            <TooltipPrimitive.Root
-                data-slot="tooltip"
-                {...props}
-            />
-        </TooltipProvider>
-    )
-}
-
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-    return (
-        <TooltipPrimitive.Trigger
-            data-slot="tooltip-trigger"
-            {...props}
-        />
-    )
-}
-
-function TooltipContent({ className, sideOffset = 4, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-    return (
-        <TooltipPrimitive.Portal>
-            <TooltipPrimitive.Content
-                data-slot="tooltip-content"
-                sideOffset={sideOffset}
-                className={cn(
-                    'bg-card text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-(--radius) ring-foreground/10 z-50 max-w-sm border border-transparent px-3 py-2 text-xs shadow-md shadow-black/10 ring-1 backdrop-blur dark:border-white/5 dark:bg-zinc-900/75 dark:shadow-lg dark:shadow-black/20 dark:ring-black/75',
-                    className
-                )}
-                {...props}>
-                {children}
-            </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-    )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
\ No newline at end of file
diff --git a/scripts/sync-templates.mjs b/scripts/sync-templates.mjs
index f1d8f73..a671a6f 100644
--- a/scripts/sync-templates.mjs
+++ b/scripts/sync-templates.mjs
@@ -141,6 +141,18 @@ const HOSTED_TIER_EXCLUDES = [
   "components/ui/navigation-menu.tsx",
   "components/ui/illustrations/",
   "components/ui/svgs/",
+  // These primitives are only used by marketing components (pricing, bento)
+  // or by chart-illustration (which lives in components/ui/illustrations/,
+  // already excluded). Shipping them as dead code in the scaffold drags in
+  // recharts, motion/react, and other marketing-only deps that scaffolds
+  // don't need. Scaffold consumers can `shadcn add card` etc. on demand.
+  "components/ui/card.tsx",
+  "components/ui/chart.tsx",
+  "components/ui/infinite-slider.tsx",
+  "components/ui/input.tsx",
+  "components/ui/label.tsx",
+  "components/ui/text-scramble.tsx",
+  "components/ui/tooltip.tsx",
   // Tailark Pro illustrations installed via shadcn registry land here.
   // Used exclusively by the marketing Tailark blocks above.
   "components/illustrations/",
@@ -449,11 +461,21 @@ function inlineWorkspaceUtilitiesToTemplates() {
 }
 
 function inlineShadcnPrimitivesToTemplates() {
-  const src = join(UI_SRC, "components/badge.tsx")
-  const dest = join(TEMPLATES, "components/ui/badge.tsx")
-  let content = readFileSync(src, "utf-8")
-  content = transformImports(content)
-  writeFile(dest, content)
+  const primitives = [
+    { src: "components/badge.tsx", dest: "components/ui/badge.tsx" },
+    // The marketing footer's 'Follow on GitHub Releases' CTA uses Button.
+    // apps/web's components/ui/button.tsx is in HOSTED_TIER_EXCLUDES (it
+    // carries marketing-only press feedback styling), so the scaffold needs
+    // its own copy. Use the shared packages/ui Button — neutral, well-tested.
+    { src: "components/button.tsx", dest: "components/ui/button.tsx" },
+  ]
+  for (const { src, dest } of primitives) {
+    const srcPath = join(UI_SRC, src)
+    const destPath = join(TEMPLATES, dest)
+    let content = readFileSync(srcPath, "utf-8")
+    content = transformImports(content)
+    writeFile(destPath, content)
+  }
 }
 
 function inlineGlobalsCssToTemplates() {
@@ -657,6 +679,11 @@ function generateTemplatesPackageJson() {
       "class-variance-authority": "^0.7.1",
       "lucide-react": "^1.8.0",
       "radix-ui": "^1.4.3",
+      // card.tsx + (when scaffolds add their own primitives) other shadcn
+      // components import { Slot } from '@radix-ui/react-slot' directly.
+      // The umbrella radix-ui package re-exports it differently (Slot.Root),
+      // so we ship the individual package alongside.
+      "@radix-ui/react-slot": "^1.2.4",
       "tw-animate-css": "^1.4.0",
       shadcn: "^4.2.0",
     },
@@ -725,7 +752,7 @@ function syncTemplates() {
   console.log("  ✓ Inlined 4 workspace utilities into templates/lib/")
 
   inlineShadcnPrimitivesToTemplates()
-  console.log("  ✓ Inlined 1 shadcn primitive (Badge) into templates/components/ui/")
+  console.log("  ✓ Inlined 2 shadcn primitives (Badge, Button) into templates/components/ui/")
 
   inlineGlobalsCssToTemplates()
   console.log("  ✓ Inlined globals.css into templates/app/globals.css")