diff --git a/packages/website/app/blog/agent/page.tsx b/packages/website/app/blog/agent/page.tsx
index 1c5e6f004..585f9663c 100644
--- a/packages/website/app/blog/agent/page.tsx
+++ b/packages/website/app/blog/agent/page.tsx
@@ -12,6 +12,7 @@ import { GithubButton } from "@/components/github-button";
 import { ViewDocsButton } from "@/components/view-docs-button";
 import { BlogArticleLayout } from "@/components/blog-article-layout";
 import { COPY_FEEDBACK_DURATION_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
 
 interface HighlightedCodeBlockProps {
   code: string;
@@ -43,13 +44,15 @@ const HighlightedCodeBlock = ({ code, lang }: HighlightedCodeBlockProps) => {
 
   return (
     <div className="group relative">
-      <button
+      <Button
         type="button"
         onClick={handleCopy}
-        className="absolute right-0 top-0 text-[11px] text-white/50 opacity-0 transition-opacity hover:text-white group-hover:opacity-100 z-10"
+        variant="ghost"
+        size="sm"
+        className="absolute right-0 top-0 z-10 h-auto px-1 py-0 text-[11px] text-white/50 opacity-0 transition-opacity hover:bg-transparent hover:text-white group-hover:opacity-100"
       >
         {didCopy ? "Copied" : "Copy"}
-      </button>
+      </Button>
       {highlightedHtml ? (
         <div
           className="overflow-x-auto font-mono text-[13px] leading-relaxed"
diff --git a/packages/website/app/blog/page.tsx b/packages/website/app/blog/page.tsx
index 2149f8605..906d40d8f 100644
--- a/packages/website/app/blog/page.tsx
+++ b/packages/website/app/blog/page.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import ReactGrabLogo from "@/public/logo.svg";
+import { Button } from "@/components/ui/button";
 
 interface BlogPost {
   slug: string;
@@ -38,16 +39,20 @@ const BlogPage = () => {
   return (
     <div className="min-h-screen bg-black px-4 py-6 sm:px-8 sm:py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-2 pt-4 text-base sm:pt-8">
-        <Link
-          href="/"
-          className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-all mb-4 underline underline-offset-4 opacity-50 hover:opacity-100"
+        <Button
+          asChild
+          variant="link"
+          size="sm"
+          className="mb-4 h-auto px-0 py-0 text-sm text-neutral-400 opacity-50 hover:text-white hover:opacity-100"
         >
-          <ArrowLeft size={16} />
-          Back to home
-        </Link>
+          <Link href="/" className="flex items-center gap-2">
+            <ArrowLeft size={16} />
+            Back to home
+          </Link>
+        </Button>
 
         <div className="inline-flex" style={{ padding: "2px" }}>
-          <Link href="/" className="transition-opacity hover:opacity-80">
+          <Link href="/" className="rounded-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
             <Image
               src={ReactGrabLogo}
               alt="React Grab"
@@ -79,7 +84,7 @@ const BlogPage = () => {
                 )}
                 <Link
                   href={`/blog/${post.slug}`}
-                  className="group grid grid-cols-[1fr] sm:grid-cols-[80px_1fr] sm:gap-8 py-2 sm:py-3 sm:-mx-3 sm:px-3 rounded-lg transition-colors hover:bg-[#0f0f0f]"
+                  className="group grid grid-cols-[1fr] rounded-lg py-2 transition-colors hover:bg-[#0f0f0f] focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black sm:-mx-3 sm:grid-cols-[80px_1fr] sm:gap-8 sm:px-3 sm:py-3"
                 >
                   <span className="hidden sm:block text-neutral-500 text-base tabular-nums">
                     {showYear ? post.year : ""}
diff --git a/packages/website/app/changelog/page.tsx b/packages/website/app/changelog/page.tsx
index f805ef878..ea7cbc013 100644
--- a/packages/website/app/changelog/page.tsx
+++ b/packages/website/app/changelog/page.tsx
@@ -6,6 +6,7 @@ import { readFileSync } from "fs";
 import { join } from "path";
 import ReactGrabLogo from "@/public/logo.svg";
 import { parseChangelog } from "@/utils/parse-changelog";
+import { Button } from "@/components/ui/button";
 
 const title = "Changelog";
 const description = "Release notes and version history for React Grab";
@@ -50,16 +51,20 @@ const ChangelogPage = () => {
   return (
     <div className="min-h-screen bg-black px-4 py-6 sm:px-8 sm:py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-2 pt-4 text-base sm:pt-8">
-        <Link
-          href="/"
-          className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors mb-4"
+        <Button
+          asChild
+          variant="link"
+          size="sm"
+          className="mb-4 h-auto px-0 py-0 text-sm text-neutral-400 hover:text-white"
         >
-          <ArrowLeft size={16} />
-          Back to home
-        </Link>
+          <Link href="/" className="flex items-center gap-2">
+            <ArrowLeft size={16} />
+            Back to home
+          </Link>
+        </Button>
 
         <div className="inline-flex" style={{ padding: "2px" }}>
-          <Link href="/" className="transition-opacity hover:opacity-80">
+          <Link href="/" className="rounded-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
             <Image
               src={ReactGrabLogo}
               alt="React Grab"
diff --git a/packages/website/app/not-found.tsx b/packages/website/app/not-found.tsx
index 9005df19d..738f601d5 100644
--- a/packages/website/app/not-found.tsx
+++ b/packages/website/app/not-found.tsx
@@ -1,21 +1,26 @@
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { ReactGrabLogo } from "@/components/react-grab-logo";
+import { Button } from "@/components/ui/button";
 
 const NotFound = () => {
   return (
     <div className="min-h-screen bg-black px-4 py-6 sm:px-8 sm:py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-2 pt-4 text-base sm:pt-8 sm:text-lg">
-        <Link
-          href="/"
-          className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-all mb-4 underline underline-offset-4 opacity-50 hover:opacity-100"
+        <Button
+          asChild
+          variant="link"
+          size="sm"
+          className="mb-4 h-auto px-0 py-0 text-sm text-neutral-400 opacity-50 hover:text-white hover:opacity-100"
         >
-          <ArrowLeft size={16} />
-          Back to home
-        </Link>
+          <Link href="/" className="flex items-center gap-2">
+            <ArrowLeft size={16} />
+            Back to home
+          </Link>
+        </Button>
 
         <div className="inline-flex" style={{ padding: "2px" }}>
-          <Link href="/" className="transition-opacity hover:opacity-80">
+          <Link href="/" className="rounded-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
             <ReactGrabLogo
               width={42}
               height={42}
diff --git a/packages/website/app/open-file/page.tsx b/packages/website/app/open-file/page.tsx
index 3f3c6c196..7e02824e1 100644
--- a/packages/website/app/open-file/page.tsx
+++ b/packages/website/app/open-file/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useQueryState, parseAsStringLiteral } from "nuqs";
-import { useState, useEffect, useCallback, Suspense, useRef } from "react";
+import { useState, useEffect, useCallback, Suspense } from "react";
 import { ReactGrabLogo } from "@/components/react-grab-logo";
 import { cn } from "@/utils/cn";
 import { IconCursor } from "@/components/icons/icon-cursor";
@@ -10,6 +10,16 @@ import { IconZed } from "@/components/icons/icon-zed";
 import { IconWebStorm } from "@/components/icons/icon-webstorm";
 import { ChevronDown, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
 
 const EDITOR_OPTIONS = ["cursor", "vscode", "zed", "webstorm"] as const;
 type Editor = (typeof EDITOR_OPTIONS)[number];
@@ -29,6 +39,9 @@ const EDITORS: EditorOption[] = [
 
 const STORAGE_KEY = "react-grab-preferred-editor";
 
+const isEditorOption = (value: string): value is Editor =>
+  EDITORS.some((editorOption) => editorOption.id === value);
+
 const getEditorUrl = (
   editor: Editor,
   filePath: string,
@@ -61,8 +74,8 @@ const OpenFileContent = () => {
     const params = new URLSearchParams(window.location.search);
     if (params.has("raw")) return { editor: "cursor", hasSaved: false };
     const saved = localStorage.getItem(STORAGE_KEY);
-    if (saved && EDITORS.some((e) => e.id === saved)) {
-      return { editor: saved as Editor, hasSaved: true };
+    if (saved && isEditorOption(saved)) {
+      return { editor: saved, hasSaved: true };
     }
     return { editor: "cursor", hasSaved: false };
   };
@@ -76,21 +89,6 @@ const OpenFileContent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [hasSavedPreference] = useState(() => getInitialEditor().hasSaved);
   const [isInfoOpen, setIsInfoOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
 
   const handleOpen = useCallback(() => {
     if (!resolvedFilePath) return;
@@ -139,7 +137,7 @@ const OpenFileContent = () => {
   if (!resolvedFilePath) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-black p-4">
-        <div className="w-full max-w-md rounded-lg border border-white/10 bg-[#0d0d0d] p-8 text-center shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
+        <Card className="w-full max-w-md p-8 text-center">
           <div className="mb-6 flex justify-center">
             <ReactGrabLogo width={100} height={40} />
           </div>
@@ -150,7 +148,7 @@ const OpenFileContent = () => {
             </code>{" "}
             to the URL.
           </div>
-        </div>
+        </Card>
       </div>
     );
   }
@@ -167,18 +165,18 @@ const OpenFileContent = () => {
         </Link>
       </div>
 
-      <div className="w-full max-w-lg rounded-lg border border-white/10 bg-[#0d0d0d] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
+      <Card className="w-full max-w-lg p-8">
         <div className="mb-2 flex flex-wrap items-center gap-2 text-lg text-white/80">
           <span>Opening</span>
-          <span className="inline-flex items-center rounded bg-white/10 px-2 py-0.5 font-mono text-sm text-white/90">
+          <Badge variant="default" className="rounded bg-white/10 px-2 py-0.5 font-mono text-sm text-white/90">
             {fileName}
-          </span>
+          </Badge>
           {lineNumber && (
             <>
               <span>at line</span>
-              <span className="inline-flex items-center rounded bg-white/10 px-2 py-0.5 font-mono text-sm text-white/90">
+              <Badge variant="default" className="rounded bg-white/10 px-2 py-0.5 font-mono text-sm text-white/90">
                 {lineNumber}
-              </span>
+              </Badge>
             </>
           )}
         </div>
@@ -188,79 +186,82 @@ const OpenFileContent = () => {
         </div>
 
         <div className="mb-6 inline-flex items-stretch rounded-lg border border-white/10 bg-white/5">
-          <div className="relative" ref={dropdownRef}>
-            <button
-              type="button"
-              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className="flex h-full items-center gap-2 rounded-l-lg px-4 py-2.5 text-sm text-white/80 transition-colors hover:bg-white/10"
+          <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                className="h-full rounded-r-none px-4 py-2.5 text-sm text-white/80 hover:bg-white/10"
+              >
+                <span className="opacity-70">{selectedEditor?.icon}</span>
+                <span>{selectedEditor?.name}</span>
+                <ChevronDown
+                  size={14}
+                  className={cn(
+                    "opacity-40 transition-transform",
+                    isDropdownOpen && "rotate-180",
+                  )}
+                />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              className="min-w-[160px] border-white/10 bg-[#0d0d0d]"
             >
-              <span className="opacity-70">{selectedEditor?.icon}</span>
-              <span>{selectedEditor?.name}</span>
-              <ChevronDown
-                size={14}
-                className={cn(
-                  "opacity-40 transition-transform",
-                  isDropdownOpen && "rotate-180",
-                )}
-              />
-            </button>
-
-            {isDropdownOpen && (
-              <div className="absolute left-0 top-full z-10 mt-1 min-w-[160px] overflow-hidden rounded-lg border border-white/10 bg-[#0d0d0d] shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
-                {EDITORS.map((editor) => (
-                  <button
-                    key={editor.id}
-                    type="button"
-                    onClick={() => handleEditorChange(editor.id)}
-                    className={cn(
-                      "flex w-full items-center gap-2.5 px-4 py-2.5 text-sm transition-colors",
-                      preferredEditor === editor.id
-                        ? "bg-white/10 text-white"
-                        : "text-white/60 hover:bg-white/10 hover:text-white/90",
-                    )}
-                  >
-                    <span className="opacity-70">{editor.icon}</span>
-                    <span>{editor.name}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="w-px bg-white/10" />
-
-          <button
+              {EDITORS.map((editor) => (
+                <DropdownMenuItem
+                  key={editor.id}
+                  onSelect={() => handleEditorChange(editor.id)}
+                  className={cn(
+                    preferredEditor === editor.id
+                      ? "bg-white/10 text-white"
+                      : "text-white/60 hover:bg-white/10 hover:text-white/90",
+                  )}
+                >
+                  <span className="opacity-70">{editor.icon}</span>
+                  <span>{editor.name}</span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Separator orientation="vertical" className="bg-white/10" />
+
+          <Button
             type="button"
+            variant="ghost"
             onClick={handleOpen}
-            className="flex items-center gap-1.5 rounded-r-lg px-4 py-2.5 text-sm text-white/80 transition-colors hover:bg-white/10"
+            className="h-full rounded-l-none px-4 py-2.5 text-sm text-white/80 hover:bg-white/10"
           >
             <span>Open</span>
             <ArrowUpRight size={14} className="opacity-50" />
-          </button>
+          </Button>
         </div>
 
         <div className="space-y-1 text-xs text-white/40">
           <p>Your preference will be saved for future use.</p>
           <p>Only open files from trusted sources.</p>
         </div>
-      </div>
+      </Card>
 
-      <button
+      <Button
         type="button"
         onClick={() => setIsInfoOpen(!isInfoOpen)}
-        className="mt-8 flex items-center gap-1.5 text-xs text-white/25 transition-colors hover:text-white/40 focus:outline-none"
+        variant="ghost"
+        size="sm"
+        className="mt-8 h-auto gap-1.5 px-0 py-0 text-xs text-white/25 hover:bg-transparent hover:text-white/40"
       >
         <span>What is React Grab?</span>
         <ChevronDown
           size={10}
           className={cn("transition-transform", isInfoOpen && "rotate-180")}
         />
-      </button>
+      </Button>
 
       {isInfoOpen && (
         <p className="mt-2 text-center text-xs text-white/30">
           Select any element in your React app and copy its context to AI tools.{" "}
-          <Link href="/" className="underline hover:text-white/50">
+          <Link href="/" className="rounded-sm underline hover:text-white/50 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
             Learn more
           </Link>
         </p>
diff --git a/packages/website/app/privacy/page.tsx b/packages/website/app/privacy/page.tsx
index 0e8233968..0715275fc 100644
--- a/packages/website/app/privacy/page.tsx
+++ b/packages/website/app/privacy/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { ReactGrabLogo } from "@/components/react-grab-logo";
+import { Button } from "@/components/ui/button";
 
 const title = "Privacy Policy";
 const description =
@@ -39,16 +40,20 @@ const PrivacyPage = () => {
   return (
     <div className="min-h-screen bg-black px-4 py-6 sm:px-8 sm:py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-2 pt-4 text-base sm:pt-8 sm:text-lg">
-        <Link
-          href="/"
-          className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-all mb-4 underline underline-offset-4 opacity-50 hover:opacity-100"
+        <Button
+          asChild
+          variant="link"
+          size="sm"
+          className="mb-4 h-auto px-0 py-0 text-sm text-neutral-400 opacity-50 hover:text-white hover:opacity-100"
         >
-          <ArrowLeft size={16} />
-          Back to home
-        </Link>
+          <Link href="/" className="flex items-center gap-2">
+            <ArrowLeft size={16} />
+            Back to home
+          </Link>
+        </Button>
 
         <div className="inline-flex" style={{ padding: "2px" }}>
-          <Link href="/" className="transition-opacity hover:opacity-80">
+          <Link href="/" className="rounded-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
             <ReactGrabLogo
               width={42}
               height={42}
@@ -167,7 +172,7 @@ const PrivacyPage = () => {
                 href="https://github.com/aidenybai/react-grab"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-white underline underline-offset-4 hover:opacity-80 transition-opacity"
+                className="rounded-sm text-white underline underline-offset-4 transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
               >
                 GitHub
               </a>{" "}
@@ -192,7 +197,7 @@ const PrivacyPage = () => {
                 href="https://github.com/aidenybai/react-grab/issues"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-white underline underline-offset-4 hover:opacity-80 transition-opacity"
+                className="rounded-sm text-white underline underline-offset-4 transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
               >
                 GitHub repository
               </a>{" "}
@@ -201,7 +206,7 @@ const PrivacyPage = () => {
                 href="https://discord.com/invite/G7zxfUzkm7"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-white underline underline-offset-4 hover:opacity-80 transition-opacity"
+                className="rounded-sm text-white underline underline-offset-4 transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
               >
                 Discord community
               </a>
diff --git a/packages/website/components.json b/packages/website/components.json
index b7b9791c7..3dfe5ff00 100644
--- a/packages/website/components.json
+++ b/packages/website/components.json
@@ -13,7 +13,7 @@
   "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils",
+    "utils": "@/utils/cn",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
diff --git a/packages/website/components/benchmark-tooltip.tsx b/packages/website/components/benchmark-tooltip.tsx
index 4f0cd11a8..0016fdc2c 100644
--- a/packages/website/components/benchmark-tooltip.tsx
+++ b/packages/website/components/benchmark-tooltip.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, type ReactElement } from "react";
+import { useState, type ReactElement } from "react";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import Link from "next/link";
 import {
@@ -12,6 +12,11 @@ import {
   BENCHMARK_TOOLTIP_SPEEDUP_FACTOR,
   TOOLTIP_HOVER_DELAY_MS,
 } from "@/constants";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 
 interface BenchmarkTooltipProps {
   href: string;
@@ -192,69 +197,59 @@ export const BenchmarkTooltip = ({
   const shouldReduceMotion = Boolean(useReducedMotion());
   const [isHovered, setIsHovered] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleMouseEnter = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsHovered(true);
-      setIsVisible(true);
-    }, TOOLTIP_HOVER_DELAY_MS);
+  const handleOpenChange = (open: boolean) => {
+    setIsHovered(open);
+    setIsVisible(open);
   };
 
-  const handleMouseLeave = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsHovered(false);
-    setIsVisible(false);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
   return (
-    <span
-      className="relative inline-block"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+    <HoverCard
+      openDelay={TOOLTIP_HOVER_DELAY_MS}
+      closeDelay={0}
+      onOpenChange={handleOpenChange}
     >
-      <Link href={href} rel="noreferrer" className={className}>
-        {children}
-      </Link>
-      <AnimatePresence>
-        {isHovered && (
-          <motion.div
-            initial={
-              shouldReduceMotion ? false : { opacity: 0, y: 8, scale: 0.96 }
-            }
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={
-              shouldReduceMotion ? undefined : { opacity: 0, y: 4, scale: 0.98 }
-            }
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : { duration: 0.15, ease: "easeOut" }
-            }
-            style={{ transformOrigin: "top center" }}
-            className="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 pointer-events-none"
-          >
-            <div className="absolute left-1/2 -translate-x-1/2 -top-1.5 w-3 h-3 bg-[#0a0a0a] border-l border-t border-neutral-800 rotate-45" />
-            <div className="bg-[#0a0a0a] border border-neutral-800 rounded-lg shadow-2xl overflow-hidden">
+      <span className="relative inline-block">
+        <HoverCardTrigger asChild>
+          <Link href={href} rel="noreferrer" className={className}>
+            {children}
+          </Link>
+        </HoverCardTrigger>
+      </span>
+      <HoverCardContent
+        forceMount
+        className="z-50 border-neutral-800 bg-[#0a0a0a] p-0"
+        align="center"
+        sideOffset={8}
+      >
+        <AnimatePresence>
+          {isHovered && (
+            <motion.div
+              initial={
+                shouldReduceMotion ? false : { opacity: 0, y: 8, scale: 0.96 }
+              }
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={
+                shouldReduceMotion
+                  ? undefined
+                  : { opacity: 0, y: 4, scale: 0.98 }
+              }
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0.15, ease: "easeOut" }
+              }
+              style={{ transformOrigin: "top center" }}
+              className="overflow-hidden rounded-lg border border-neutral-800"
+            >
               <MiniChart
                 isVisible={isVisible}
                 shouldReduceMotion={shouldReduceMotion}
               />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </HoverCardContent>
+    </HoverCard>
   );
 };
 
diff --git a/packages/website/components/benchmarks/benchmark-charts.tsx b/packages/website/components/benchmarks/benchmark-charts.tsx
index bebfdc836..58b219f81 100644
--- a/packages/website/components/benchmarks/benchmark-charts.tsx
+++ b/packages/website/components/benchmarks/benchmark-charts.tsx
@@ -15,6 +15,14 @@ import { BenchmarkResult, Metric } from "./types";
 import { calculateStats } from "./utils";
 import prettyMs from "pretty-ms";
 import Image from "next/image";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   BENCHMARK_GRID_INTERVAL_SECONDS,
   BENCHMARK_CHART_HEIGHT_PX,
@@ -260,7 +268,7 @@ export const BenchmarkChartsTweet = ({ results }: BenchmarkChartsProps) => {
           href="https://ui.shadcn.com"
           target="_blank"
           rel="noopener noreferrer"
-          className="underline underline-offset-2 hover:text-neutral-400"
+          className="rounded-sm underline underline-offset-2 hover:text-neutral-400 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
         >
           shadcn/ui
         </a>{" "}
@@ -269,7 +277,7 @@ export const BenchmarkChartsTweet = ({ results }: BenchmarkChartsProps) => {
           href="https://github.com/aidenybai/react-grab/tree/main/packages/benchmarks"
           target="_blank"
           rel="noopener noreferrer"
-          className="underline underline-offset-2 hover:text-neutral-400"
+          className="rounded-sm underline underline-offset-2 hover:text-neutral-400 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
         >
           More info
         </a>
@@ -566,55 +574,55 @@ export const BenchmarkCharts = ({ results }: BenchmarkChartsProps) => {
         </div>
 
         <div className="overflow-x-auto flex justify-center">
-          <table className="text-sm border-collapse max-w-2xl w-full">
-            <thead>
-              <tr className="border-b border-[#2a2a2a]">
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
+          <Table className="max-w-2xl border-collapse text-sm">
+            <TableHeader>
+              <TableRow className="border-[#2a2a2a]">
+                <TableHead className="px-4 py-2 text-xs font-medium text-neutral-500">
                   Metric
-                </th>
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                </TableHead>
+                <TableHead className="px-4 py-2 text-xs font-medium text-neutral-500">
                   Control
-                </th>
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider bg-[#1f1f1f]/50 rounded-tr-md">
+                </TableHead>
+                <TableHead className="rounded-tr-md bg-[#1f1f1f]/50 px-4 py-2 text-xs font-medium text-neutral-500">
                   <div className="flex items-center gap-1.5">
                     <Image
                       src="/logo.svg"
                       alt="React Grab"
                       width={12}
                       height={12}
-                      className="w-3 h-3"
+                      className="size-3"
                     />
                     <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
                       React Grab
                     </span>
                   </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[#2a2a2a]">
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="divide-y divide-[#2a2a2a]">
               {metrics.map((metric) => (
-                <tr
+                <TableRow
                   key={metric.name}
                   className="hover:bg-[#1a1a1a] transition-colors group"
                 >
-                  <td className="py-2 px-4 font-medium text-neutral-300 text-sm group-hover:text-white transition-colors">
+                  <TableCell className="px-4 py-2 text-sm font-medium text-neutral-300 transition-colors group-hover:text-white">
                     {metric.name}
-                  </td>
-                  <td className="py-2 px-4 text-neutral-400 tabular-nums text-sm">
+                  </TableCell>
+                  <TableCell className="px-4 py-2 text-sm tabular-nums text-neutral-400">
                     {metric.control}
-                  </td>
-                  <td className="py-2 px-4 text-neutral-300 tabular-nums bg-[#1f1f1f]/50 text-sm group-hover:bg-[#1f1f1f] transition-colors">
+                  </TableCell>
+                  <TableCell className="bg-[#1f1f1f]/50 px-4 py-2 text-sm tabular-nums text-neutral-300 transition-colors group-hover:bg-[#1f1f1f]">
                     {metric.treatment}
                     <span
                       className={`ml-2 text-xs font-medium ${metric.isImprovement ? "text-green-400" : "text-red-400"}`}
                     >
                       {metric.isImprovement ? "↓" : "↑"} {metric.change}
                     </span>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               ))}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
       </div>
     </div>
diff --git a/packages/website/components/benchmarks/benchmark-detailed-table.tsx b/packages/website/components/benchmarks/benchmark-detailed-table.tsx
index c08dcbaaa..d3dfd03aa 100644
--- a/packages/website/components/benchmarks/benchmark-detailed-table.tsx
+++ b/packages/website/components/benchmarks/benchmark-detailed-table.tsx
@@ -5,6 +5,16 @@ import { useState, useMemo } from "react";
 import { ChevronDown, ChevronUp, Search, ArrowUpDown } from "lucide-react";
 import Image from "next/image";
 import { BENCHMARK_TREATMENT_COLOR } from "@/constants";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 interface BenchmarkDetailedTableProps {
   results: BenchmarkResult[];
@@ -39,6 +49,43 @@ const SortIcon = ({ field, sortField, sortDirection }: SortIconProps) => {
 
 SortIcon.displayName = "SortIcon";
 
+interface SortButtonProps {
+  field: SortField;
+  label: string;
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSort: (field: SortField) => void;
+  className?: string;
+}
+
+const SortButton = ({
+  field,
+  label,
+  sortField,
+  sortDirection,
+  onSort,
+  className,
+}: SortButtonProps) => (
+  <Button
+    type="button"
+    variant="ghost"
+    size="sm"
+    onClick={() => onSort(field)}
+    className={`h-auto justify-start px-0 py-0 text-left text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200 ${className ?? ""}`}
+  >
+    <span className="flex items-center">
+      {label}
+      <SortIcon
+        field={field}
+        sortField={sortField}
+        sortDirection={sortDirection}
+      />
+    </span>
+  </Button>
+);
+
+SortButton.displayName = "SortButton";
+
 export const BenchmarkDetailedTable = ({
   results,
   testCaseMap,
@@ -143,199 +190,168 @@ export const BenchmarkDetailedTable = ({
             size={14}
             className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
           />
-          <input
+          <Input
             type="text"
             placeholder="Filter tests..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-md py-1.5 pl-9 pr-3 text-xs text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-[#404040] w-full sm:w-[200px]"
+            className="h-auto w-full border-[#2a2a2a] bg-[#1a1a1a] py-1.5 pr-3 pl-9 text-xs text-neutral-200 placeholder:text-neutral-600 sm:w-[200px]"
           />
         </div>
       </div>
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-[#2a2a2a]">
-              <th
-                rowSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("testName")}
-              >
-                <div className="flex items-center">
-                  Test Name
-                  <SortIcon
-                    field="testName"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-              <th
-                colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("inputTokens")}
-              >
-                <div className="flex items-center">
-                  Input Tokens
-                  <SortIcon
-                    field="inputTokens"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-              <th
-                colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("outputTokens")}
-              >
-                <div className="flex items-center">
-                  Output Tokens
-                  <SortIcon
-                    field="outputTokens"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-              <th
-                colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("cost")}
-              >
-                <div className="flex items-center">
-                  Cost
-                  <SortIcon
-                    field="cost"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-              <th
-                colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("duration")}
-              >
-                <div className="flex items-center">
-                  Duration
-                  <SortIcon
-                    field="duration"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-              <th
-                colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("toolCalls")}
-              >
-                <div className="flex items-center">
-                  Tool Calls
-                  <SortIcon
-                    field="toolCalls"
-                    sortField={sortField}
-                    sortDirection={sortDirection}
-                  />
-                </div>
-              </th>
-            </tr>
-            <tr className="border-b border-[#2a2a2a] bg-[#0d0d0d]">
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
-                Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
-                <div className="flex items-center gap-1.5">
-                  <Image
-                    src="/logo.svg"
-                    alt="React Grab"
-                    width={10}
-                    height={10}
-                    className="w-2.5 h-2.5"
-                  />
-                  <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
-                    React Grab
-                  </span>
-                </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
-                Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
-                <div className="flex items-center gap-1.5">
-                  <Image
-                    src="/logo.svg"
-                    alt="React Grab"
-                    width={10}
-                    height={10}
-                    className="w-2.5 h-2.5"
-                  />
-                  <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
-                    React Grab
-                  </span>
-                </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
-                Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
-                <div className="flex items-center gap-1.5">
-                  <Image
-                    src="/logo.svg"
-                    alt="React Grab"
-                    width={10}
-                    height={10}
-                    className="w-2.5 h-2.5"
-                  />
-                  <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
-                    React Grab
-                  </span>
-                </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
-                Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
-                <div className="flex items-center gap-1.5">
-                  <Image
-                    src="/logo.svg"
-                    alt="React Grab"
-                    width={10}
-                    height={10}
-                    className="w-2.5 h-2.5"
-                  />
-                  <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
-                    React Grab
-                  </span>
-                </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
-                Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
-                <div className="flex items-center gap-1.5">
-                  <Image
-                    src="/logo.svg"
-                    alt="React Grab"
-                    width={10}
-                    height={10}
-                    className="w-2.5 h-2.5"
-                  />
-                  <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
-                    React Grab
-                  </span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-[#2a2a2a]">
+      <Table className="text-sm">
+        <TableHeader>
+          <TableRow className="border-[#2a2a2a]">
+            <TableHead rowSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="testName"
+                label="Test Name"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+            <TableHead colSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="inputTokens"
+                label="Input Tokens"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+            <TableHead colSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="outputTokens"
+                label="Output Tokens"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+            <TableHead colSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="cost"
+                label="Cost"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+            <TableHead colSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="duration"
+                label="Duration"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+            <TableHead colSpan={2} className="px-3 py-2 align-middle">
+              <SortButton
+                field="toolCalls"
+                label="Tool Calls"
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </TableHead>
+          </TableRow>
+          <TableRow className="border-[#2a2a2a] bg-[#0d0d0d]">
+            <TableHead className="px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              Control
+            </TableHead>
+            <TableHead className="bg-[#111111] px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              <div className="flex items-center gap-1.5">
+                <Image
+                  src="/logo.svg"
+                  alt="React Grab"
+                  width={10}
+                  height={10}
+                  className="size-2.5"
+                />
+                <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
+                  React Grab
+                </span>
+              </div>
+            </TableHead>
+            <TableHead className="px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              Control
+            </TableHead>
+            <TableHead className="bg-[#111111] px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              <div className="flex items-center gap-1.5">
+                <Image
+                  src="/logo.svg"
+                  alt="React Grab"
+                  width={10}
+                  height={10}
+                  className="size-2.5"
+                />
+                <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
+                  React Grab
+                </span>
+              </div>
+            </TableHead>
+            <TableHead className="px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              Control
+            </TableHead>
+            <TableHead className="bg-[#111111] px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              <div className="flex items-center gap-1.5">
+                <Image
+                  src="/logo.svg"
+                  alt="React Grab"
+                  width={10}
+                  height={10}
+                  className="size-2.5"
+                />
+                <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
+                  React Grab
+                </span>
+              </div>
+            </TableHead>
+            <TableHead className="px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              Control
+            </TableHead>
+            <TableHead className="bg-[#111111] px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              <div className="flex items-center gap-1.5">
+                <Image
+                  src="/logo.svg"
+                  alt="React Grab"
+                  width={10}
+                  height={10}
+                  className="size-2.5"
+                />
+                <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
+                  React Grab
+                </span>
+              </div>
+            </TableHead>
+            <TableHead className="px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              Control
+            </TableHead>
+            <TableHead className="bg-[#111111] px-3 py-1.5 text-[10px] font-normal text-neutral-600">
+              <div className="flex items-center gap-1.5">
+                <Image
+                  src="/logo.svg"
+                  alt="React Grab"
+                  width={10}
+                  height={10}
+                  className="size-2.5"
+                />
+                <span style={{ color: BENCHMARK_TREATMENT_COLOR }}>
+                  React Grab
+                </span>
+              </div>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="divide-y divide-[#2a2a2a]">
             {filteredAndSortedResults.length === 0 ? (
-              <tr>
-                <td colSpan={11} className="py-8 text-center text-neutral-500">
+              <TableRow>
+                <TableCell colSpan={11} className="py-8 text-center text-neutral-500">
                   No results found matching &quot;{searchQuery}&quot;
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ) : (
               filteredAndSortedResults.map(([testName, results]) => {
                 const control = results.control || ({} as BenchmarkResult);
@@ -365,23 +381,23 @@ export const BenchmarkDetailedTable = ({
                 const prompt = testCaseMap[testName] || "";
 
                 return (
-                  <tr
+                  <TableRow
                     key={testName}
                     className="hover:bg-[#1a1a1a] transition-colors"
                   >
-                    <td
-                      className="py-2 px-3 font-medium text-neutral-300 cursor-help max-w-[200px] truncate"
+                    <TableCell
+                      className="max-w-[200px] cursor-help truncate px-3 py-2 font-medium text-neutral-300"
                       title={prompt}
                     >
                       {testName}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="px-3 py-2 text-xs tabular-nums text-neutral-400">
                       {control.inputTokens
                         ? control.inputTokens.toLocaleString()
                         : "-"}
-                    </td>
-                    <td
-                      className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
+                    </TableCell>
+                    <TableCell
+                      className="px-3 py-2 text-xs tabular-nums text-neutral-300"
                       style={{
                         backgroundColor:
                           inputChange.bgColor !== "transparent"
@@ -397,14 +413,14 @@ export const BenchmarkDetailedTable = ({
                           {inputChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="px-3 py-2 text-xs tabular-nums text-neutral-400">
                       {control.outputTokens
                         ? control.outputTokens.toLocaleString()
                         : "-"}
-                    </td>
-                    <td
-                      className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
+                    </TableCell>
+                    <TableCell
+                      className="px-3 py-2 text-xs tabular-nums text-neutral-300"
                       style={{
                         backgroundColor:
                           outputChange.bgColor !== "transparent"
@@ -420,14 +436,14 @@ export const BenchmarkDetailedTable = ({
                           {outputChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="px-3 py-2 text-xs tabular-nums text-neutral-400">
                       {control.costUsd !== undefined
                         ? "$" + control.costUsd.toFixed(2)
                         : "-"}
-                    </td>
-                    <td
-                      className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
+                    </TableCell>
+                    <TableCell
+                      className="px-3 py-2 text-xs tabular-nums text-neutral-300"
                       style={{
                         backgroundColor:
                           costChange.bgColor !== "transparent"
@@ -443,12 +459,12 @@ export const BenchmarkDetailedTable = ({
                           {costChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="px-3 py-2 text-xs tabular-nums text-neutral-400">
                       {control.durationMs ? prettyMs(control.durationMs) : "-"}
-                    </td>
-                    <td
-                      className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
+                    </TableCell>
+                    <TableCell
+                      className="px-3 py-2 text-xs tabular-nums text-neutral-300"
                       style={{
                         backgroundColor:
                           durationChange.bgColor !== "transparent"
@@ -464,14 +480,14 @@ export const BenchmarkDetailedTable = ({
                           {durationChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="px-3 py-2 text-xs tabular-nums text-neutral-400">
                       {control.toolCalls !== undefined
                         ? control.toolCalls
                         : "-"}
-                    </td>
-                    <td
-                      className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
+                    </TableCell>
+                    <TableCell
+                      className="px-3 py-2 text-xs tabular-nums text-neutral-300"
                       style={{
                         backgroundColor:
                           toolCallsChange.bgColor !== "transparent"
@@ -487,14 +503,13 @@ export const BenchmarkDetailedTable = ({
                           {toolCallsChange.change}
                         </span>
                       )}
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 );
               })
             )}
-          </tbody>
-        </table>
-      </div>
+        </TableBody>
+      </Table>
     </div>
   );
 };
diff --git a/packages/website/components/blocks/code-block.tsx b/packages/website/components/blocks/code-block.tsx
index 546851591..c19ad7cec 100644
--- a/packages/website/components/blocks/code-block.tsx
+++ b/packages/website/components/blocks/code-block.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/constants";
 import { type StreamRenderedBlock } from "@/hooks/use-stream";
 import { highlightCode } from "@/lib/shiki";
+import { Button } from "@/components/ui/button";
 import { StreamingText } from "./streaming-text";
 
 interface CodeBlockProps {
@@ -75,17 +76,19 @@ export const CodeBlock = ({ block }: CodeBlockProps): ReactElement => {
       )}
 
       {shouldShowExpandButton && (
-        <button
+        <Button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="relative w-full py-2 flex items-center justify-center gap-1 text-xs text-white/50 hover:text-white/90 transition-colors bg-[#0d0d0d]"
           type="button"
+          variant="ghost"
+          size="sm"
+          className="relative w-full rounded-none bg-[#0d0d0d] py-2 text-xs text-white/50 hover:bg-[#0d0d0d] hover:text-white/90"
         >
           <span>{isExpanded ? "Show less" : "Show more"}</span>
           <ChevronDown
             size={14}
             className={`transition-transform ${isExpanded ? "rotate-180" : ""}`}
           />
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/packages/website/components/blocks/read-tool-call-block.tsx b/packages/website/components/blocks/read-tool-call-block.tsx
index 3498f4699..5923cff41 100644
--- a/packages/website/components/blocks/read-tool-call-block.tsx
+++ b/packages/website/components/blocks/read-tool-call-block.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, type ReactElement } from "react";
 import { CLICK_FEEDBACK_DURATION_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
 
 interface ReadToolCallBlockProps {
   parameter: string;
@@ -38,15 +39,18 @@ export const ReadToolCallBlock = ({
   return (
     <div className="flex flex-wrap gap-1 text-[#818181]">
       <span className={isStreaming ? "shimmer-text" : ""}>{displayName}</span>
-      <button
+      <Button
+        type="button"
+        variant="link"
+        size="sm"
         onClick={handleClick}
-        className="max-w-full break-all text-left transition-colors duration-300"
+        className="h-auto max-w-full break-all whitespace-normal px-0 py-0 text-left transition-colors duration-300"
         style={{
           color: isClicked ? "#ffffff" : "#5b5b5b",
         }}
       >
         {parameter}
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/packages/website/components/blog-article-layout.tsx b/packages/website/components/blog-article-layout.tsx
index 524ee31fd..ee8d61192 100644
--- a/packages/website/components/blog-article-layout.tsx
+++ b/packages/website/components/blog-article-layout.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import ReactGrabLogo from "@/public/logo.svg";
 import { TableOfContents } from "@/components/table-of-contents";
+import { Button } from "@/components/ui/button";
 
 interface TocHeading {
   id: string;
@@ -42,20 +43,26 @@ export const BlogArticleLayout = ({
 
           <div className="w-full max-w-2xl flex flex-col gap-6">
             <div className="flex items-center gap-2 text-sm text-neutral-400 opacity-50 hover:opacity-100 transition-opacity">
-              <Link
-                href="/"
-                className="hover:text-white transition-colors flex items-center gap-2 underline underline-offset-4"
+              <Button
+                asChild
+                variant="link"
+                size="sm"
+                className="h-auto px-0 py-0 text-sm text-neutral-400 hover:text-white"
               >
-                <ArrowLeft size={16} />
-                Back to home
-              </Link>
+                <Link href="/" className="flex items-center gap-2">
+                  <ArrowLeft size={16} />
+                  Back to home
+                </Link>
+              </Button>
               <span>·</span>
-              <Link
-                href="/blog"
-                className="hover:text-white transition-colors underline underline-offset-4"
+              <Button
+                asChild
+                variant="link"
+                size="sm"
+                className="h-auto px-0 py-0 text-sm text-neutral-400 hover:text-white"
               >
-                Read more posts
-              </Link>
+                <Link href="/blog">Read more posts</Link>
+              </Button>
             </div>
 
             <div className="flex flex-col gap-2">
@@ -74,14 +81,14 @@ export const BlogArticleLayout = ({
                 By{" "}
                 {authors.map((author, index) => (
                   <span key={author.name}>
-                    <a
+                    <Link
                       href={author.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-neutral-300 hover:text-white underline underline-offset-4"
+                      className="rounded-sm text-neutral-300 underline underline-offset-4 transition-colors hover:text-white focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
                     >
                       {author.name}
-                    </a>
+                    </Link>
                     {index < authors.length - 1 && ", "}
                   </span>
                 ))}
diff --git a/packages/website/components/demo-footer.tsx b/packages/website/components/demo-footer.tsx
index bdcd2736c..fab6e9a71 100644
--- a/packages/website/components/demo-footer.tsx
+++ b/packages/website/components/demo-footer.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { type ReactElement } from "react";
+import Link from "next/link";
 import { RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export const DemoFooter = (): ReactElement => {
   const handleRestartClick = () => {
@@ -17,28 +19,24 @@ export const DemoFooter = (): ReactElement => {
 
   return (
     <div className="pt-4 text-sm text-white/50 sm:text-base">
-      <button
+      <Button
         type="button"
         onClick={handleRestartClick}
-        className="hidden items-center gap-1 hover:text-white/80 sm:inline-flex"
+        variant="link"
+        size="sm"
+        className="hidden h-auto items-center gap-1 px-0 py-0 text-sm text-white/60 hover:text-white/80 sm:inline-flex sm:text-base"
       >
-        <span className="underline underline-offset-4">restart demo</span>
+        <span>restart demo</span>
         <RotateCcw size={13} className="align-middle" />
-      </button>
+      </Button>
       <span className="hidden sm:inline"> &middot; </span>
-      <a
-        href="/blog"
-        className="underline underline-offset-4 hover:text-white/80"
-      >
-        blog
-      </a>{" "}
+      <Button asChild variant="link" size="sm" className="h-auto px-0 py-0 text-sm text-white/60 hover:text-white/80 sm:text-base">
+        <Link href="/blog">blog</Link>
+      </Button>{" "}
       &middot;{" "}
-      <a
-        href="/changelog"
-        className="underline underline-offset-4 hover:text-white/80"
-      >
-        changelog
-      </a>
+      <Button asChild variant="link" size="sm" className="h-auto px-0 py-0 text-sm text-white/60 hover:text-white/80 sm:text-base">
+        <Link href="/changelog">changelog</Link>
+      </Button>
     </div>
   );
 };
diff --git a/packages/website/components/github-button.tsx b/packages/website/components/github-button.tsx
index 9238e44ad..a345409a4 100644
--- a/packages/website/components/github-button.tsx
+++ b/packages/website/components/github-button.tsx
@@ -1,17 +1,20 @@
 import { type ReactElement } from "react";
 import { IconGithub } from "./icons/icon-github";
+import { Button } from "@/components/ui/button";
 
 export const GithubButton = (): ReactElement => {
   return (
-    <a
-      href="https://github.com/aidenybai/react-grab"
-      target="_blank"
-      rel="noreferrer"
-      className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white px-3 py-1.5 text-sm text-black transition-all hover:bg-white/90 active:scale-[0.98] sm:text-base"
+    <Button
+      asChild
+      variant="default"
+      size="sm"
+      className="h-auto gap-2 px-3 py-1.5 text-sm sm:text-base"
     >
-      <IconGithub className="h-[18px] w-[18px]" />
-      Star on GitHub
-    </a>
+      <a href="https://github.com/aidenybai/react-grab" target="_blank" rel="noreferrer">
+        <IconGithub className="size-[18px]" />
+        Star on GitHub
+      </a>
+    </Button>
   );
 };
 
diff --git a/packages/website/components/grab-element-button.tsx b/packages/website/components/grab-element-button.tsx
index 921c5a0d9..c67263c55 100644
--- a/packages/website/components/grab-element-button.tsx
+++ b/packages/website/components/grab-element-button.tsx
@@ -15,6 +15,7 @@ import { cn } from "@/utils/cn";
 import { detectMobile } from "@/utils/detect-mobile";
 import { getKeyFromCode } from "@/utils/get-key-from-code";
 import { hotkeyToString } from "@/utils/hotkey-to-string";
+import { Button } from "@/components/ui/button";
 import { useHotkey } from "./hotkey-context";
 
 export interface RecordedHotkey {
@@ -398,12 +399,14 @@ export const GrabElementButton = ({
             }
           />
         )}
-        <button
+        <Button
           onClick={toggleReactGrab}
+          variant="secondary"
+          size="sm"
           className={cn(
-            "relative flex h-12 w-full items-center justify-center gap-2 rounded-lg px-3 text-sm text-white transition-all active:scale-[0.98] sm:w-auto sm:text-base",
+            "relative h-12 w-full gap-2 rounded-lg px-3 text-sm text-white sm:w-auto sm:text-base",
             hasAdvanced
-              ? "border border-white/20 bg-white/5 hover:bg-white/10"
+              ? "border-white/20 bg-white/5 hover:bg-white/10"
               : "border border-[#d75fcb] bg-[#330039] hover:bg-[#4a0052] shadow-[0_0_12px_rgba(215,95,203,0.4)]",
           )}
           type="button"
@@ -415,7 +418,7 @@ export const GrabElementButton = ({
               Click to select an element
             </span>
           )}
-        </button>
+        </Button>
         {!hasAdvanced && !isActivated && (
           <motion.div
             initial={shouldReduceMotion ? false : { opacity: 0 }}
@@ -496,13 +499,15 @@ export const GrabElementButton = ({
         )}
       </div>
       {!hideSkip && showSkip && (
-        <button
+        <Button
           onClick={handleSkip}
-          className="px-3 py-2 text-white/50 hover:text-white/90 text-sm transition-colors"
+          variant="ghost"
+          size="sm"
+          className="px-3 py-2 text-sm text-white/50 hover:bg-transparent hover:text-white/90"
           type="button"
         >
           Skip
-        </button>
+        </Button>
       )}
     </motion.div>
   );
diff --git a/packages/website/components/install-tabs.tsx b/packages/website/components/install-tabs.tsx
index 64269e92c..fb5d214ae 100644
--- a/packages/website/components/install-tabs.tsx
+++ b/packages/website/components/install-tabs.tsx
@@ -1,11 +1,14 @@
 "use client";
 
 import { useEffect, useState, useCallback, type ReactElement } from "react";
+import Link from "next/link";
 import { Copy, Check } from "lucide-react";
 import { COPY_FEEDBACK_DURATION_MS } from "@/constants";
 import { cn } from "@/utils/cn";
 import { detectMobile } from "@/utils/detect-mobile";
 import { hotkeyToString } from "@/utils/hotkey-to-string";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { RecordedHotkey } from "./grab-element-button";
 import { useHotkey } from "./hotkey-context";
 import { highlightCode } from "../lib/shiki";
@@ -366,45 +369,45 @@ export const InstallTabs = ({
         <span className="hidden sm:inline text-white">
           {headingText}
           {activeTabId === "cli" && (
-            <button
+            <Button
               type="button"
               onClick={() => setActiveTabId("next-app")}
-              className="ml-3 text-xs italic text-white/40 hover:text-white/60 hover:underline transition-colors sm:text-sm"
+              variant="link"
+              size="sm"
+              className="ml-3 h-auto px-0 py-0 text-xs italic text-white/40 underline underline-offset-4 hover:text-white/60 sm:text-sm"
             >
               Prefer manual install?
-            </button>
+            </Button>
           )}
         </span>
       )}
-      <div className="mt-4 overflow-hidden rounded-lg border border-white/10 bg-white/5 text-white shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
-        <div className="flex items-center gap-4 overflow-x-auto border-b border-white/10 px-4 pt-2">
-          {installTabsData.map((tab) => {
-            const isActive = tab.id === activeTab.id;
-
-            return (
-              <button
-                key={tab.id}
-                type="button"
-                className={cn(
-                  "shrink-0 whitespace-nowrap border-b pb-2 font-sans text-sm transition-colors sm:text-base",
-                  isActive
-                    ? "border-white text-white"
-                    : "border-transparent text-white/60 hover:text-white",
-                )}
-                onClick={() => setActiveTabId(tab.id)}
-              >
-                <span>{tab.label}</span>
-              </button>
-            );
-          })}
-        </div>
+      <Tabs
+        value={activeTabId}
+        onValueChange={(value) => setActiveTabId(value)}
+        className="mt-4 gap-0 overflow-hidden rounded-lg border border-white/10 bg-white/5 text-white shadow-[0_8px_30px_rgb(0,0,0,0.3)]"
+      >
+        <TabsList className="h-auto w-full justify-start gap-1 overflow-x-auto rounded-none border-b border-white/10 bg-transparent px-4 pt-2 pb-0">
+          {installTabsData.map((tab) => (
+            <TabsTrigger
+              key={tab.id}
+              value={tab.id}
+              className={cn(
+                "h-auto shrink-0 rounded-none border-b px-0 pt-0 pb-2 font-sans text-sm data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:text-white sm:text-base",
+                "border-transparent text-white/60 hover:text-white",
+              )}
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
         <div className="bg-black/60 relative">
           <div className="relative">
             {activeTabId === "cli" ? (
-              <button
+              <Button
                 type="button"
                 onClick={handleCopyClick}
-                className="group flex w-full items-center justify-between gap-4 px-4 py-6 transition-colors hover:bg-white/5"
+                variant="ghost"
+                className="group h-auto w-full justify-between rounded-none px-4 py-6 hover:bg-white/5"
               >
                 {highlightedCode ? (
                   <div
@@ -419,16 +422,18 @@ export const InstallTabs = ({
                 <span className="shrink-0 text-white/50 transition-colors group-hover:text-white">
                   {didCopy ? <Check size={16} /> : <Copy size={16} />}
                 </span>
-              </button>
+              </Button>
             ) : (
               <div className="group relative">
-                <button
+                <Button
                   type="button"
                   onClick={handleCopyClick}
-                  className="touch-hitbox absolute! right-4 top-4 text-white/50 opacity-0 transition-opacity hover:text-white group-hover:opacity-100 z-10"
+                  variant="ghost"
+                  size="icon"
+                  className="touch-hitbox absolute! right-4 top-4 z-10 text-white/50 opacity-0 transition-opacity hover:text-white group-hover:opacity-100"
                 >
                   {didCopy ? <Check size={16} /> : <Copy size={16} />}
-                </button>
+                </Button>
                 {highlightedCode ? (
                   <div
                     className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed highlighted-code"
@@ -443,7 +448,7 @@ export const InstallTabs = ({
             )}
           </div>
         </div>
-      </div>
+      </Tabs>
       {activeTabId !== "cli" && (
         <span className="mt-4 block text-sm text-white/50 sm:text-base">
           {activeTab.description}
@@ -452,9 +457,9 @@ export const InstallTabs = ({
       {showAgentNote && activeTabId !== "cli" && (
         <span className="mt-2 block text-sm text-white/50 sm:text-base">
           Want to connect directly to your coding agent?{" "}
-          <a href="/blog/agent" className="underline hover:text-white/70">
-            See our agent connection guide
-          </a>
+          <Button asChild variant="link" size="sm" className="h-auto px-0 py-0 text-sm text-white/70 underline underline-offset-4 hover:text-white">
+            <Link href="/blog/agent">See our agent connection guide</Link>
+          </Button>
         </span>
       )}
     </div>
diff --git a/packages/website/components/table-of-contents.tsx b/packages/website/components/table-of-contents.tsx
index b72c1ba22..6eff2320e 100644
--- a/packages/website/components/table-of-contents.tsx
+++ b/packages/website/components/table-of-contents.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Link from "next/link";
+import { cn } from "@/utils/cn";
 
 interface TocHeading {
   id: string;
@@ -46,7 +48,7 @@ export const TableOfContents = ({ headings }: TableOfContentsProps) => {
   }, [headings]);
 
   const handleClick = (
-    event: React.MouseEvent<HTMLAnchorElement>,
+    event: React.MouseEvent<HTMLAnchorElement | HTMLSpanElement>,
     id: string,
   ) => {
     event.preventDefault();
@@ -74,17 +76,19 @@ export const TableOfContents = ({ headings }: TableOfContentsProps) => {
 
             return (
               <li key={heading.id}>
-                <a
+                <Link
                   href={`#${heading.id}`}
                   onClick={(event) => handleClick(event, heading.id)}
-                  className={`block text-sm border-l-2 pl-3 -ml-0.5 ${indentClass} ${
+                  className={cn(
+                    "block rounded-sm border-l-2 -ml-0.5 pl-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+                    indentClass,
                     isActive
-                      ? "text-neutral-200 border-[#ff4fff]"
-                      : "text-neutral-500 border-transparent hover:text-neutral-300 hover:border-neutral-700"
-                  }`}
+                      ? "border-[#ff4fff] text-neutral-200"
+                      : "border-transparent text-neutral-500 hover:border-neutral-700 hover:text-neutral-300",
+                  )}
                 >
                   {heading.text}
-                </a>
+                </Link>
               </li>
             );
           })}
diff --git a/packages/website/components/ui/badge.tsx b/packages/website/components/ui/badge.tsx
new file mode 100644
index 000000000..844cc60c9
--- /dev/null
+++ b/packages/website/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-white/15 bg-white/5 text-white/85",
+        secondary: "border-[#ff4fff]/30 bg-[#330039] text-[#ff4fff]",
+        success: "border-emerald-300/25 bg-emerald-500/10 text-emerald-300",
+        danger: "border-red-300/25 bg-red-500/10 text-red-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export const Badge = ({
+  className,
+  variant,
+  ...props
+}: BadgeProps): ReactElement => (
+  <div className={cn(badgeVariants({ variant }), className)} {...props} />
+);
+
+Badge.displayName = "Badge";
diff --git a/packages/website/components/ui/button.tsx b/packages/website/components/ui/button.tsx
new file mode 100644
index 000000000..bd66d758b
--- /dev/null
+++ b/packages/website/components/ui/button.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+  {
+    variants: {
+      variant: {
+        default: "bg-white text-black hover:bg-white/90",
+        secondary: "border border-white/20 bg-white/5 text-white hover:bg-white/10",
+        ghost: "text-white/70 hover:bg-white/10 hover:text-white",
+        link: "text-white/70 hover:text-white",
+        destructive:
+          "bg-red-500 text-white hover:bg-red-500/90 focus-visible:ring-red-400/80",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-6 text-base",
+        icon: "size-9 p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = ({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps): ReactElement => {
+  if (asChild) {
+    return (
+      <Slot className={cn(buttonVariants({ variant, size }), className)} {...props} />
+    );
+  }
+
+  const { type = "button", ...buttonProps } = props;
+
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...buttonProps}
+    />
+  );
+};
+
+Button.displayName = "Button";
diff --git a/packages/website/components/ui/card.tsx b/packages/website/components/ui/card.tsx
new file mode 100644
index 000000000..afd6c04cb
--- /dev/null
+++ b/packages/website/components/ui/card.tsx
@@ -0,0 +1,89 @@
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface CardProps extends ComponentProps<"div"> {
+  className?: string;
+}
+
+export const Card = ({ className, ...props }: CardProps): ReactElement => (
+  <div
+    className={cn(
+      "rounded-lg border border-white/10 bg-[#0d0d0d] text-white shadow-[0_8px_30px_rgb(0,0,0,0.3)]",
+      className,
+    )}
+    {...props}
+  />
+);
+
+Card.displayName = "Card";
+
+interface CardHeaderProps extends ComponentProps<"div"> {
+  className?: string;
+}
+
+export const CardHeader = ({
+  className,
+  ...props
+}: CardHeaderProps): ReactElement => (
+  <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
+);
+
+CardHeader.displayName = "CardHeader";
+
+interface CardTitleProps extends ComponentProps<"h3"> {
+  className?: string;
+}
+
+export const CardTitle = ({
+  className,
+  children,
+  ...props
+}: CardTitleProps): ReactElement => (
+  <h3 className={cn("text-lg font-semibold", className)} {...props}>
+    {children}
+  </h3>
+);
+
+CardTitle.displayName = "CardTitle";
+
+interface CardDescriptionProps extends ComponentProps<"p"> {
+  className?: string;
+}
+
+export const CardDescription = ({
+  className,
+  children,
+  ...props
+}: CardDescriptionProps): ReactElement => (
+  <p className={cn("text-sm text-white/55", className)} {...props}>
+    {children}
+  </p>
+);
+
+CardDescription.displayName = "CardDescription";
+
+interface CardContentProps extends ComponentProps<"div"> {
+  className?: string;
+}
+
+export const CardContent = ({
+  className,
+  ...props
+}: CardContentProps): ReactElement => (
+  <div className={cn("p-6 pt-0", className)} {...props} />
+);
+
+CardContent.displayName = "CardContent";
+
+interface CardFooterProps extends ComponentProps<"div"> {
+  className?: string;
+}
+
+export const CardFooter = ({
+  className,
+  ...props
+}: CardFooterProps): ReactElement => (
+  <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);
+
+CardFooter.displayName = "CardFooter";
diff --git a/packages/website/components/ui/collapsible.tsx b/packages/website/components/ui/collapsible.tsx
index 3fc42b216..208688681 100644
--- a/packages/website/components/ui/collapsible.tsx
+++ b/packages/website/components/ui/collapsible.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { useState, useMemo, type ReactElement, type ReactNode } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { motion, AnimatePresence } from "motion/react";
 import { ChevronDown, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface CollapsibleProps {
   header: ReactNode;
@@ -31,44 +33,47 @@ export const Collapsible = ({
     return defaultExpanded;
   }, [manualExpanded, isStreaming, defaultExpanded, autoExpandOnStreaming]);
 
-  const handleToggle = () => {
-    setManualExpanded(!isExpanded);
-  };
-
   return (
-    <div>
-      <button
-        onClick={handleToggle}
-        className="w-full text-left group relative"
-      >
-        <div className="flex items-center text-[#818181]">
+    <CollapsiblePrimitive.Root
+      open={isExpanded}
+      onOpenChange={setManualExpanded}
+    >
+      <CollapsiblePrimitive.Trigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="group relative h-auto w-full justify-start px-0 py-0 text-left text-[#818181] hover:bg-transparent hover:text-[#a4a4a4]"
+        >
           {header}
           {isExpanded ? (
             <span className="ml-2 opacity-50">
-              <ChevronDown className="w-3 h-3" />
+              <ChevronDown className="size-3" />
             </span>
           ) : (
-            <span className="ml-2 opacity-0 group-hover:opacity-50 transition-opacity">
-              <ChevronRight className="w-3 h-3" />
+            <span className="ml-2 opacity-0 transition-opacity group-hover:opacity-50">
+              <ChevronRight className="size-3" />
             </span>
           )}
-        </div>
-      </button>
+        </Button>
+      </CollapsiblePrimitive.Trigger>
 
       <AnimatePresence initial={false}>
         {isExpanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2, ease: "easeOut" }}
-            className="overflow-hidden"
-          >
-            {children}
-          </motion.div>
+          <CollapsiblePrimitive.Content forceMount asChild>
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              className="overflow-hidden"
+            >
+              {children}
+            </motion.div>
+          </CollapsiblePrimitive.Content>
         )}
       </AnimatePresence>
-    </div>
+    </CollapsiblePrimitive.Root>
   );
 };
 
diff --git a/packages/website/components/ui/dropdown-menu.tsx b/packages/website/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..befa7a3a3
--- /dev/null
+++ b/packages/website/components/ui/dropdown-menu.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight } from "lucide-react";
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+interface DropdownMenuSubTriggerProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> {
+  inset?: boolean;
+}
+
+export const DropdownMenuSubTrigger = ({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps): ReactElement => (
+  <DropdownMenuPrimitive.SubTrigger
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-white outline-none focus:bg-white/10 data-[state=open]:bg-white/10",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+);
+
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+interface DropdownMenuSubContentProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.SubContent> {
+  className?: string;
+}
+
+export const DropdownMenuSubContent = ({
+  className,
+  ...props
+}: DropdownMenuSubContentProps): ReactElement => (
+  <DropdownMenuPrimitive.SubContent
+    className={cn(
+      "z-50 min-w-32 overflow-hidden rounded-md border border-white/10 bg-[#0d0d0d] p-1 text-white shadow-lg",
+      className,
+    )}
+    {...props}
+  />
+);
+
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+interface DropdownMenuContentProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.Content> {
+  className?: string;
+}
+
+export const DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: DropdownMenuContentProps): ReactElement => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-40 overflow-hidden rounded-md border border-white/10 bg-[#0d0d0d] p-1 text-white shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+interface DropdownMenuItemProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.Item> {
+  inset?: boolean;
+}
+
+export const DropdownMenuItem = ({
+  className,
+  inset,
+  ...props
+}: DropdownMenuItemProps): ReactElement => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-white/70 outline-none transition-colors focus:bg-white/10 focus:text-white focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0d0d0d] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+);
+
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+interface DropdownMenuCheckboxItemProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> {
+  className?: string;
+}
+
+export const DropdownMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  ...props
+}: DropdownMenuCheckboxItemProps): ReactElement => (
+  <DropdownMenuPrimitive.CheckboxItem
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-white/70 outline-none transition-colors focus:bg-white/10 focus:text-white focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0d0d0d] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+);
+
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+interface DropdownMenuLabelProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.Label> {
+  inset?: boolean;
+}
+
+export const DropdownMenuLabel = ({
+  className,
+  inset,
+  ...props
+}: DropdownMenuLabelProps): ReactElement => (
+  <DropdownMenuPrimitive.Label
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+);
+
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+interface DropdownMenuSeparatorProps
+  extends ComponentProps<typeof DropdownMenuPrimitive.Separator> {
+  className?: string;
+}
+
+export const DropdownMenuSeparator = ({
+  className,
+  ...props
+}: DropdownMenuSeparatorProps): ReactElement => (
+  <DropdownMenuPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-white/10", className)} {...props} />
+);
+
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+interface DropdownMenuShortcutProps extends ComponentProps<"span"> {
+  className?: string;
+}
+
+export const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: DropdownMenuShortcutProps): ReactElement => (
+  <span className={cn("ml-auto text-xs tracking-widest text-white/45", className)} {...props} />
+);
+
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
diff --git a/packages/website/components/ui/hover-card.tsx b/packages/website/components/ui/hover-card.tsx
new file mode 100644
index 000000000..a93badac1
--- /dev/null
+++ b/packages/website/components/ui/hover-card.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const HoverCard = HoverCardPrimitive.Root;
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+interface HoverCardContentProps
+  extends ComponentProps<typeof HoverCardPrimitive.Content> {
+  className?: string;
+}
+
+export const HoverCardContent = ({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: HoverCardContentProps): ReactElement => (
+  <HoverCardPrimitive.Content
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 rounded-md border border-white/10 bg-[#0d0d0d] p-2 text-white shadow-lg outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+HoverCardContent.displayName = "HoverCardContent";
diff --git a/packages/website/components/ui/input.tsx b/packages/website/components/ui/input.tsx
new file mode 100644
index 000000000..21f1be9b3
--- /dev/null
+++ b/packages/website/components/ui/input.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import type { InputHTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = ({ className, ...props }: InputProps): ReactElement => (
+  <input
+    className={cn(
+      "h-9 w-full rounded-md border border-white/15 bg-black/40 px-3 py-2 text-base text-white placeholder:text-white/35 outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black sm:text-sm",
+      className,
+    )}
+    {...props}
+  />
+);
+
+Input.displayName = "Input";
diff --git a/packages/website/components/ui/scroll-area.tsx b/packages/website/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..5e8968e24
--- /dev/null
+++ b/packages/website/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  className?: string;
+}
+
+export const ScrollArea = ({
+  className,
+  children,
+  ...props
+}: ScrollAreaProps): ReactElement => (
+  <ScrollAreaPrimitive.Root className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+
+ScrollArea.displayName = "ScrollArea";
+
+interface ScrollBarProps
+  extends ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {
+  className?: string;
+}
+
+export const ScrollBar = ({ className, orientation = "vertical", ...props }: ScrollBarProps): ReactElement => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none p-px transition-colors",
+      orientation === "vertical" ? "h-full w-2.5 border-l border-l-transparent" : "h-2.5 flex-col border-t border-t-transparent",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-white/20 hover:bg-white/30" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+
+ScrollBar.displayName = "ScrollBar";
diff --git a/packages/website/components/ui/scrollable.tsx b/packages/website/components/ui/scrollable.tsx
index 0a3546d60..6b3a301c9 100644
--- a/packages/website/components/ui/scrollable.tsx
+++ b/packages/website/components/ui/scrollable.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { useRef, useState, useEffect, type ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/utils/cn";
 
 interface ScrollableProps {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   maxHeight?: string;
 }
@@ -13,104 +15,12 @@ export const Scrollable = ({
   className = "",
   maxHeight = "200px",
 }: ScrollableProps): ReactElement => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const scrollbarRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const [showScrollbar, setShowScrollbar] = useState(false);
-  const [scrollbarHeight, setScrollbarHeight] = useState(0);
-  const [scrollbarTop, setScrollbarTop] = useState(0);
-
-  useEffect(() => {
-    const updateScrollbar = () => {
-      if (!contentRef.current) return;
-
-      const element = contentRef.current;
-      const hasScroll = element.scrollHeight > element.clientHeight;
-      setShowScrollbar(hasScroll);
-
-      if (hasScroll) {
-        const scrollRatio = element.clientHeight / element.scrollHeight;
-        const newScrollbarHeight = Math.max(
-          element.clientHeight * scrollRatio,
-          20,
-        );
-        setScrollbarHeight(newScrollbarHeight);
-
-        const scrollPercentage =
-          element.scrollTop / (element.scrollHeight - element.clientHeight);
-        const maxScrollbarTop = element.clientHeight - newScrollbarHeight;
-        setScrollbarTop(scrollPercentage * maxScrollbarTop);
-      }
-    };
-
-    const element = contentRef.current;
-    if (!element) return;
-
-    updateScrollbar();
-    element.addEventListener("scroll", updateScrollbar);
-    window.addEventListener("resize", updateScrollbar);
-
-    return () => {
-      element.removeEventListener("scroll", updateScrollbar);
-      window.removeEventListener("resize", updateScrollbar);
-    };
-  }, [children]);
-
-  const handleScrollbarMouseDown = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const startY = event.clientY;
-    const startScrollTop = contentRef.current?.scrollTop || 0;
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      if (!contentRef.current) return;
-
-      const deltaY = moveEvent.clientY - startY;
-      const scrollRatio =
-        contentRef.current.scrollHeight / contentRef.current.clientHeight;
-      contentRef.current.scrollTop = startScrollTop + deltaY * scrollRatio;
-    };
-
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
   return (
-    <div
-      className="relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div
-        ref={contentRef}
-        className={`overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${className}`}
-        style={{ maxHeight }}
-      >
+    <div className="relative">
+      <ScrollArea className={cn("pr-2", className)} style={{ maxHeight }}>
         {children}
-      </div>
-      <div className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none bg-linear-to-t from-black/50 to-transparent" />
-      {showScrollbar && (
-        <div
-          className={`absolute right-0 top-0 w-1 transition-opacity duration-200 ${
-            isHovered ? "opacity-100" : "opacity-0"
-          }`}
-          style={{ height: maxHeight }}
-        >
-          <div
-            ref={scrollbarRef}
-            className="absolute right-0 w-1 bg-[#3a3a3a] cursor-pointer hover:bg-[#4a4a4a] transition-colors"
-            style={{
-              height: `${scrollbarHeight}px`,
-              top: `${scrollbarTop}px`,
-            }}
-            onMouseDown={handleScrollbarMouseDown}
-          />
-        </div>
-      )}
+      </ScrollArea>
+      <div className="pointer-events-none absolute bottom-0 left-0 right-2 h-8 bg-linear-to-t from-black/50 to-transparent" />
     </div>
   );
 };
diff --git a/packages/website/components/ui/separator.tsx b/packages/website/components/ui/separator.tsx
new file mode 100644
index 000000000..0d0abc28d
--- /dev/null
+++ b/packages/website/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import type { HTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+export const Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps): ReactElement => (
+  <div
+    role={decorative ? "none" : "separator"}
+    aria-orientation={orientation}
+    className={cn(
+      "shrink-0 bg-white/10",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className,
+    )}
+    {...props}
+  />
+);
+
+Separator.displayName = "Separator";
diff --git a/packages/website/components/ui/table.tsx b/packages/website/components/ui/table.tsx
new file mode 100644
index 000000000..2c0e84c1f
--- /dev/null
+++ b/packages/website/components/ui/table.tsx
@@ -0,0 +1,92 @@
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface TableProps extends ComponentProps<"table"> {
+  className?: string;
+}
+
+export const Table = ({ className, ...props }: TableProps): ReactElement => (
+  <div className="relative w-full overflow-x-auto">
+    <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+  </div>
+);
+
+Table.displayName = "Table";
+
+interface TableHeaderProps extends ComponentProps<"thead"> {
+  className?: string;
+}
+
+export const TableHeader = ({
+  className,
+  ...props
+}: TableHeaderProps): ReactElement => (
+  <thead className={cn("[&_tr]:border-b [&_tr]:border-white/10", className)} {...props} />
+);
+
+TableHeader.displayName = "TableHeader";
+
+interface TableBodyProps extends ComponentProps<"tbody"> {
+  className?: string;
+}
+
+export const TableBody = ({ className, ...props }: TableBodyProps): ReactElement => (
+  <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+
+TableBody.displayName = "TableBody";
+
+interface TableRowProps extends ComponentProps<"tr"> {
+  className?: string;
+}
+
+export const TableRow = ({ className, ...props }: TableRowProps): ReactElement => (
+  <tr
+    className={cn(
+      "border-b border-white/10 transition-colors hover:bg-white/[0.04]",
+      className,
+    )}
+    {...props}
+  />
+);
+
+TableRow.displayName = "TableRow";
+
+interface TableHeadProps extends ComponentProps<"th"> {
+  className?: string;
+}
+
+export const TableHead = ({ className, ...props }: TableHeadProps): ReactElement => (
+  <th
+    className={cn(
+      "h-10 px-2 text-left align-middle text-xs font-medium uppercase tracking-wide text-white/45",
+      className,
+    )}
+    {...props}
+  />
+);
+
+TableHead.displayName = "TableHead";
+
+interface TableCellProps extends ComponentProps<"td"> {
+  className?: string;
+}
+
+export const TableCell = ({ className, ...props }: TableCellProps): ReactElement => (
+  <td className={cn("px-2 py-2 align-middle", className)} {...props} />
+);
+
+TableCell.displayName = "TableCell";
+
+interface TableCaptionProps extends ComponentProps<"caption"> {
+  className?: string;
+}
+
+export const TableCaption = ({
+  className,
+  ...props
+}: TableCaptionProps): ReactElement => (
+  <caption className={cn("mt-4 text-sm text-white/45", className)} {...props} />
+);
+
+TableCaption.displayName = "TableCaption";
diff --git a/packages/website/components/ui/tabs.tsx b/packages/website/components/ui/tabs.tsx
new file mode 100644
index 000000000..f9e8b50b1
--- /dev/null
+++ b/packages/website/components/ui/tabs.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
+  className?: string;
+}
+
+export const Tabs = ({ className, ...props }: TabsProps): ReactElement => (
+  <TabsPrimitive.Root className={cn("flex flex-col gap-4", className)} {...props} />
+);
+
+Tabs.displayName = "Tabs";
+
+interface TabsListProps extends ComponentProps<typeof TabsPrimitive.List> {
+  className?: string;
+}
+
+export const TabsList = ({
+  className,
+  ...props
+}: TabsListProps): ReactElement => (
+  <TabsPrimitive.List
+    className={cn(
+      "inline-flex h-10 items-center rounded-lg border border-white/10 bg-white/5 p-1",
+      className,
+    )}
+    {...props}
+  />
+);
+
+TabsList.displayName = "TabsList";
+
+interface TabsTriggerProps extends ComponentProps<typeof TabsPrimitive.Trigger> {
+  className?: string;
+}
+
+export const TabsTrigger = ({
+  className,
+  ...props
+}: TabsTriggerProps): ReactElement => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-white/65 transition-colors data-[state=active]:bg-black/70 data-[state=active]:text-white hover:text-white disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+      className,
+    )}
+    {...props}
+  />
+);
+
+TabsTrigger.displayName = "TabsTrigger";
+
+interface TabsContentProps extends ComponentProps<typeof TabsPrimitive.Content> {
+  className?: string;
+}
+
+export const TabsContent = ({
+  className,
+  ...props
+}: TabsContentProps): ReactElement => (
+  <TabsPrimitive.Content
+    className={cn(
+      "outline-none focus-visible:ring-2 focus-visible:ring-[#ff4fff]/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+      className,
+    )}
+    {...props}
+  />
+);
+
+TabsContent.displayName = "TabsContent";
diff --git a/packages/website/components/view-docs-button.tsx b/packages/website/components/view-docs-button.tsx
index 121e22184..27634f54d 100644
--- a/packages/website/components/view-docs-button.tsx
+++ b/packages/website/components/view-docs-button.tsx
@@ -1,16 +1,19 @@
 import { type ReactElement } from "react";
 import { BookOpen } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export const ViewDocsButton = (): ReactElement => (
-  <a
-    href="https://github.com/aidenybai/react-grab#readme"
-    target="_blank"
-    rel="noreferrer"
-    className="hidden sm:inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition-all hover:bg-white/10 active:scale-[0.98] sm:text-base"
+  <Button
+    asChild
+    variant="secondary"
+    size="sm"
+    className="hidden sm:inline-flex h-auto gap-2 px-3 py-1.5 text-sm sm:text-base"
   >
-    <BookOpen className="h-[15px] w-[15px]" />
-    View docs
-  </a>
+    <a href="https://github.com/aidenybai/react-grab#readme" target="_blank" rel="noreferrer">
+      <BookOpen className="size-[15px]" />
+      View docs
+    </a>
+  </Button>
 );
 
 ViewDocsButton.displayName = "ViewDocsButton";
diff --git a/packages/website/custom-modules.d.ts b/packages/website/custom-modules.d.ts
new file mode 100644
index 000000000..8587370a8
--- /dev/null
+++ b/packages/website/custom-modules.d.ts
@@ -0,0 +1,43 @@
+declare module "*.svg" {
+  import type { StaticImageData } from "next/image";
+
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module "@react-grab/design-system" {
+  export const renderDesignSystemPreview: (
+    containerElement: HTMLElement,
+  ) => () => void;
+}
+
+declare module "react-grab" {
+  interface ReactGrabPlugin {
+    name: string;
+    hooks?: Record<string, (...args: unknown[]) => void>;
+  }
+
+  interface ReactGrabApi {
+    toggle: () => void;
+    deactivate: () => void;
+    dispose: () => void;
+    registerPlugin: (plugin: ReactGrabPlugin) => void;
+  }
+
+  export const init: (options?: Record<string, unknown>) => ReactGrabApi;
+  export const getGlobalApi: () => ReactGrabApi | undefined;
+  export const setGlobalApi: (api: ReactGrabApi) => void;
+}
+
+declare module "react-grab/core" {
+  interface ReactGrabCorePlugin {
+    name: string;
+    hooks?: Record<string, (...args: unknown[]) => void>;
+  }
+
+  interface ReactGrabCoreApi {
+    registerPlugin: (plugin: ReactGrabCorePlugin) => void;
+  }
+
+  export const init: (options?: Record<string, unknown>) => ReactGrabCoreApi;
+}
diff --git a/packages/website/e2e/benchmark-table-interactions.spec.ts b/packages/website/e2e/benchmark-table-interactions.spec.ts
new file mode 100644
index 000000000..f4ea5a9bc
--- /dev/null
+++ b/packages/website/e2e/benchmark-table-interactions.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+import { expectVisibleFocusRing, getStyleProperty } from "./style-helpers";
+
+test.describe("Benchmark Table Hover & Focus States", () => {
+  test("filter input and sort controls preserve interactive states", async ({
+    page,
+  }) => {
+    await page.goto("/blog/intro");
+
+    const filterInput = page.getByPlaceholder("Filter tests...");
+    await filterInput.scrollIntoViewIfNeeded();
+    await expect(filterInput).toBeVisible({ timeout: 45_000 });
+    await expectVisibleFocusRing(filterInput);
+
+    const inputTokensSortButton = page.getByRole("button", {
+      name: /input tokens/i,
+    });
+    await expect(inputTokensSortButton).toBeVisible();
+
+    const sortButtonColorBeforeHover = await getStyleProperty(
+      inputTokensSortButton,
+      "color",
+    );
+    await inputTokensSortButton.hover();
+    const sortButtonColorAfterHover = await getStyleProperty(
+      inputTokensSortButton,
+      "color",
+    );
+    expect(sortButtonColorAfterHover).not.toBe(sortButtonColorBeforeHover);
+
+    await expectVisibleFocusRing(inputTokensSortButton);
+  });
+});
diff --git a/packages/website/e2e/blog-interactions.spec.ts b/packages/website/e2e/blog-interactions.spec.ts
new file mode 100644
index 000000000..cb6704a2b
--- /dev/null
+++ b/packages/website/e2e/blog-interactions.spec.ts
@@ -0,0 +1,46 @@
+import { expect, test } from "@playwright/test";
+import { expectVisibleFocusRing, getStyleProperty } from "./style-helpers";
+
+test.describe("Blog Hover & Focus States", () => {
+  test("blog index post links keep hover and focus styles", async ({ page }) => {
+    await page.goto("/blog");
+
+    const introPostLink = page.getByRole("link", {
+      name: /React Grab Is Now 1.0/i,
+    });
+    await expect(introPostLink).toBeVisible();
+
+    const postTitleText = introPostLink.getByText("React Grab Is Now 1.0");
+    const titleColorBeforeHover = await getStyleProperty(
+      postTitleText,
+      "color",
+    );
+    await introPostLink.hover();
+    await expect
+      .poll(
+        async () =>
+          getStyleProperty(
+            postTitleText,
+            "color",
+          ),
+        { timeout: 2000 },
+      )
+      .not.toBe(titleColorBeforeHover);
+
+    await expectVisibleFocusRing(introPostLink);
+  });
+
+  test("agent blog copy button and back link keep focus styles", async ({
+    page,
+  }) => {
+    await page.goto("/blog/agent");
+
+    const backToHomeLink = page.getByRole("link", { name: /Back to home/i });
+    await expect(backToHomeLink).toBeVisible();
+    await expectVisibleFocusRing(backToHomeLink);
+
+    const copyButton = page.getByRole("button", { name: "Copy" }).first();
+    await expect(copyButton).toBeVisible();
+    await expectVisibleFocusRing(copyButton);
+  });
+});
diff --git a/packages/website/e2e/homepage-interactions.spec.ts b/packages/website/e2e/homepage-interactions.spec.ts
new file mode 100644
index 000000000..fb29abbf5
--- /dev/null
+++ b/packages/website/e2e/homepage-interactions.spec.ts
@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { expectVisibleFocusRing, getStyleProperty } from "./style-helpers";
+
+test.describe("Homepage Hover & Focus States", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      window.localStorage.setItem("stream-completed", "true");
+    });
+    await page.goto("/");
+  });
+
+  test("primary CTA controls keep hover and focus styles", async ({ page }) => {
+    const githubCta = page.getByRole("link", { name: "Star on GitHub" });
+    await expect(githubCta).toBeVisible();
+
+    const githubBackgroundBeforeHover = await getStyleProperty(
+      githubCta,
+      "background-color",
+    );
+    await githubCta.hover();
+    const githubBackgroundAfterHover = await getStyleProperty(
+      githubCta,
+      "background-color",
+    );
+
+    expect(githubBackgroundAfterHover).not.toBe(githubBackgroundBeforeHover);
+    await expectVisibleFocusRing(githubCta);
+
+    const holdHotkeyButton = page.getByRole("button", { name: /hold/i });
+    await expect(holdHotkeyButton).toBeVisible();
+    await expectVisibleFocusRing(holdHotkeyButton);
+  });
+
+  test("install tabs keep interactive states", async ({ page }) => {
+    const cliTabTrigger = page.getByRole("tab", { name: "CLI" });
+    const manualInstallTabTrigger = page.getByRole("tab", {
+      name: "Next.js (App)",
+    });
+
+    await expect(cliTabTrigger).toBeVisible();
+    await expect(manualInstallTabTrigger).toBeVisible();
+
+    const tabColorBeforeHover = await getStyleProperty(
+      manualInstallTabTrigger,
+      "color",
+    );
+    await manualInstallTabTrigger.hover();
+    const tabColorAfterHover = await getStyleProperty(
+      manualInstallTabTrigger,
+      "color",
+    );
+    expect(tabColorAfterHover).not.toBe(tabColorBeforeHover);
+
+    await expectVisibleFocusRing(manualInstallTabTrigger);
+  });
+});
diff --git a/packages/website/e2e/open-file-interactions.spec.ts b/packages/website/e2e/open-file-interactions.spec.ts
new file mode 100644
index 000000000..4917cdcda
--- /dev/null
+++ b/packages/website/e2e/open-file-interactions.spec.ts
@@ -0,0 +1,76 @@
+import { expect, test } from "@playwright/test";
+import { expectVisibleFocusRing, getStyleProperty } from "./style-helpers";
+
+test.describe("Open File Page Hover & Focus States", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/open-file?url=src/components/button.tsx&line=23");
+  });
+
+  test("editor dropdown and open controls keep hover and focus styles", async ({
+    page,
+  }) => {
+    const editorDropdownTrigger = page.getByRole("button", {
+      name: /cursor/i,
+    });
+    const openButton = page.getByRole("button", { name: "Open", exact: true });
+
+    await expect(editorDropdownTrigger).toBeVisible();
+    await expect(openButton).toBeVisible();
+
+    const openButtonBackgroundBeforeHover = await getStyleProperty(
+      openButton,
+      "background-color",
+    );
+    await openButton.hover();
+    const openButtonBackgroundAfterHover = await getStyleProperty(
+      openButton,
+      "background-color",
+    );
+    expect(openButtonBackgroundAfterHover).not.toBe(
+      openButtonBackgroundBeforeHover,
+    );
+
+    await expectVisibleFocusRing(editorDropdownTrigger);
+    await expectVisibleFocusRing(openButton);
+  });
+
+  test("editor menu options are keyboard focusable and selectable", async ({
+    page,
+  }) => {
+    const editorDropdownTrigger = page.getByRole("button", {
+      name: /cursor/i,
+    });
+    await editorDropdownTrigger.focus();
+    await page.keyboard.press("Enter");
+
+    const vsCodeOption = page.getByRole("menuitem", { name: /vs code/i });
+    await expect(vsCodeOption).toBeVisible();
+    const optionBackgroundBeforeFocus = await getStyleProperty(
+      vsCodeOption,
+      "background-color",
+    );
+    await vsCodeOption.focus();
+    const optionBackgroundAfterFocus = await getStyleProperty(
+      vsCodeOption,
+      "background-color",
+    );
+    expect(optionBackgroundAfterFocus).not.toBe(optionBackgroundBeforeFocus);
+    await page.keyboard.press("Enter");
+
+    await expect(
+      page.getByRole("button", {
+        name: /vs code/i,
+      }),
+    ).toBeVisible();
+  });
+
+  test("info toggle preserves focus style", async ({ page }) => {
+    const infoToggle = page.getByRole("button", { name: /what is react grab/i });
+    await expect(infoToggle).toBeVisible();
+
+    await expectVisibleFocusRing(infoToggle);
+    await infoToggle.click();
+
+    await expect(page.getByRole("link", { name: "Learn more" })).toBeVisible();
+  });
+});
diff --git a/packages/website/e2e/style-helpers.ts b/packages/website/e2e/style-helpers.ts
new file mode 100644
index 000000000..603288cf0
--- /dev/null
+++ b/packages/website/e2e/style-helpers.ts
@@ -0,0 +1,18 @@
+import type { Locator } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+export const getStyleProperty = async (
+  locator: Locator,
+  propertyName: string,
+): Promise<string> =>
+  locator.evaluate(
+    (element, requestedPropertyName) =>
+      getComputedStyle(element).getPropertyValue(requestedPropertyName),
+    propertyName,
+  );
+
+export const expectVisibleFocusRing = async (locator: Locator) => {
+  await locator.focus();
+  const boxShadow = await getStyleProperty(locator, "box-shadow");
+  expect(boxShadow).not.toBe("none");
+};
diff --git a/packages/website/package.json b/packages/website/package.json
index 0ba9e9084..73db104ca 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -6,9 +6,17 @@
     "dev": "next dev",
     "build": "pnpm --filter react-grab build && pnpm --filter react-grab exec cp dist/index.global.js ../website/public/script.js && pnpm --filter @react-grab/design-system build && next build",
     "start": "next start",
-    "lint": "oxlint"
+    "lint": "oxlint",
+    "typecheck": "tsc --noEmit",
+    "test:e2e": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@react-grab/design-system": "workspace:*",
     "@vercel/analytics": "^1.5.0",
     "@vercel/firewall": "^1.1.1",
@@ -29,6 +37,7 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
@@ -36,6 +45,7 @@
     "critters": "^0.0.25",
     "eslint": "^9",
     "eslint-config-next": "16.0.7",
+    "oxlint": "^1.42.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"
diff --git a/packages/website/playwright.config.ts b/packages/website/playwright.config.ts
new file mode 100644
index 000000000..388771f65
--- /dev/null
+++ b/packages/website/playwright.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = 4200;
+const BASE_URL = `http://127.0.0.1:${PORT}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 60_000,
+  fullyParallel: true,
+  use: {
+    baseURL: BASE_URL,
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: `pnpm exec next dev -p ${PORT}`,
+    url: BASE_URL,
+    timeout: 120_000,
+    reuseExistingServer: true,
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 130462c85..6752f2a26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -752,6 +752,24 @@ importers:
 
   packages/website:
     dependencies:
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@react-grab/design-system':
         specifier: workspace:*
         version: link:../design-system
@@ -807,6 +825,9 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.57.0
+        version: 1.57.0
       '@tailwindcss/postcss':
         specifier: ^4
         version: 4.1.15
@@ -828,6 +849,9 @@ importers:
       eslint-config-next:
         specifier: 16.0.7
         version: 16.0.7(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      oxlint:
+        specifier: ^1.42.0
+        version: 1.42.0
       tailwindcss:
         specifier: ^4
         version: 4.1.15
@@ -2841,6 +2865,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-hover-card@1.1.15':
+    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -2954,6 +2991,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-select@2.2.6':
     resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
     peerDependencies:
@@ -3420,8 +3470,8 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
-  '@sourcegraph/amp@0.0.1771838262-g353b96':
-    resolution: {integrity: sha512-uFAaUMheC6iSXII1rP9r16DPpkrFhklrXjNj0Wq3poUrAwjjJRE6BtnMcMC8RVfLGfwyc933fQh6QMumMoYkGw==}
+  '@sourcegraph/amp@0.0.1772107648-gbe4328':
+    resolution: {integrity: sha512-ekkK4vs/AWgEYVRanF6bZ7T0XrlF2jTEyIzDQaJVU/mugZ6dZsQ/d+8GX6si9DuvPXnelOh6cku74WcN198zmg==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -9132,6 +9182,12 @@ snapshots:
       react: 19.0.1
       react-dom: 19.0.1(react@19.0.1)
 
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
   '@floating-ui/utils@0.2.10': {}
 
   '@hono/node-server@1.19.9(hono@4.11.7)':
@@ -9632,6 +9688,15 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9670,6 +9735,22 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9686,6 +9767,18 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9698,12 +9791,24 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
@@ -9738,12 +9843,31 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9757,6 +9881,21 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9772,12 +9911,29 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9789,6 +9945,30 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -9805,6 +9985,32 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      aria-hidden: 1.2.6
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.2(@types/react@19.2.2)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9831,6 +10037,24 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9849,6 +10073,16 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9859,6 +10093,16 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9869,6 +10113,15 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.0.1)
@@ -9887,6 +10140,23 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9904,6 +10174,23 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -9942,6 +10229,13 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9949,6 +10243,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9956,6 +10257,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -10018,12 +10335,26 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.0.1)
@@ -10032,6 +10363,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10039,6 +10377,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10053,6 +10398,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
@@ -10065,6 +10416,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -10072,6 +10430,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10405,14 +10770,14 @@ snapshots:
 
   '@sourcegraph/amp-sdk@0.1.0-20251210081226-g90e3892':
     dependencies:
-      '@sourcegraph/amp': 0.0.1771838262-g353b96
+      '@sourcegraph/amp': 0.0.1772107648-gbe4328
       zod: 3.25.76
 
   '@sourcegraph/amp@0.0.1767830505-ga62310':
     dependencies:
       '@napi-rs/keyring': 1.1.9
 
-  '@sourcegraph/amp@0.0.1771838262-g353b96':
+  '@sourcegraph/amp@0.0.1772107648-gbe4328':
     dependencies:
       '@napi-rs/keyring': 1.1.9
 
@@ -14198,6 +14563,14 @@ snapshots:
 
   react-refresh@0.9.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -14206,6 +14579,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  react-remove-scroll@2.7.2(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.2)(react@19.2.1)
+      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.2)(react@19.2.1)
+      use-sidecar: 1.1.3(@types/react@19.2.2)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -14225,6 +14609,14 @@ snapshots:
       react-dom: 19.0.1(react@19.0.1)
       react-transition-group: 4.4.5(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
 
+  react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       get-nonce: 1.0.1
@@ -15250,6 +15642,13 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -15257,6 +15656,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  use-sidecar@1.1.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   use-sidecar@1.1.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       detect-node-es: 1.1.0