diff --git a/web/package-lock.json b/web/package-lock.json
index 47fdd5fd21..d753e2a0cd 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,7 +8,7 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
-        "@nous-research/ui": "0.7.0",
+        "@nous-research/ui": "^0.8.0",
         "@observablehq/plot": "^0.6.17",
         "@react-three/fiber": "^9.6.0",
         "@tailwindcss/vite": "^4.2.1",
@@ -1078,9 +1078,9 @@
       }
     },
     "node_modules/@nous-research/ui": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@nous-research/ui/-/ui-0.7.0.tgz",
-      "integrity": "sha512-kQYjfaYnYOntQ7Pa4sEM5RJXjRRaaVqs8z3DqaO9xc7hNiTPvK63kdTJDElJFZdHFGALbOGr9hB5HKAMkQj7/g==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@nous-research/ui/-/ui-0.8.0.tgz",
+      "integrity": "sha512-3hnsyCgBfzgJZkjSQIhEPd6yi7eevZddbfA+AfZ/j+ese1zcdhc0/7ini477MOiHlepjQ73n/DBx0p3XVYPqPg==",
       "license": "MIT",
       "dependencies": {
         "@nanostores/react": "^1.0.0",
diff --git a/web/package.json b/web/package.json
index c9cdff0337..5557cad05d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@nous-research/ui": "0.7.0",
+    "@nous-research/ui": "^0.8.0",
     "@observablehq/plot": "^0.6.17",
     "@react-three/fiber": "^9.6.0",
     "@tailwindcss/vite": "^4.2.1",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 841108a50d..4f7f41898f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -42,7 +42,7 @@ import {
   X,
   Zap,
 } from "lucide-react";
-import { SelectionSwitcher, Typography } from "@nous-research/ui";
+import { Button, SelectionSwitcher, Typography } from "@nous-research/ui";
 import { cn } from "@/lib/utils";
 import { Backdrop } from "@/components/Backdrop";
 import { SidebarFooter } from "@/components/SidebarFooter";
@@ -370,20 +370,17 @@ export default function App() {
           clipPath: "var(--component-header-clip-path)",
         }}
       >
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={() => setMobileOpen(true)}
           aria-label={t.app.openNavigation}
           aria-expanded={mobileOpen}
           aria-controls="app-sidebar"
-          className={cn(
-            "inline-flex h-8 w-8 items-center justify-center",
-            "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-          )}
+          className="text-midground/70 hover:text-midground"
         >
-          <Menu className="h-4 w-4" />
-        </button>
+          <Menu />
+        </Button>
 
         <Typography
           className="font-bold text-[0.95rem] leading-[0.95] tracking-[0.05em] text-midground"
@@ -445,18 +442,15 @@ export default function App() {
                 </Typography>
               </div>
 
-              <button
-                type="button"
+              <Button
+                ghost
+                size="icon"
                 onClick={closeMobile}
                 aria-label={t.app.closeNavigation}
-                className={cn(
-                  "lg:hidden inline-flex h-7 w-7 items-center justify-center",
-                  "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-                )}
+                className="lg:hidden text-midground/70 hover:text-midground"
               >
-                <X className="h-4 w-4" />
-              </button>
+                <X />
+              </Button>
             </div>
 
             <nav
diff --git a/web/src/components/AutoField.tsx b/web/src/components/AutoField.tsx
index 44128cf9f2..30977de91c 100644
--- a/web/src/components/AutoField.tsx
+++ b/web/src/components/AutoField.tsx
@@ -1,6 +1,6 @@
+import { Select, SelectOption } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 
 function FieldHint({ schema, schemaKey }: { schema: Record<string, unknown>; schemaKey: string }) {
diff --git a/web/src/components/ModelPickerDialog.tsx b/web/src/components/ModelPickerDialog.tsx
index 81bb5abf59..3628192a72 100644
--- a/web/src/components/ModelPickerDialog.tsx
+++ b/web/src/components/ModelPickerDialog.tsx
@@ -145,14 +145,15 @@ export function ModelPickerDialog({ gw, sessionId, onClose, onSubmit }: Props) {
       aria-labelledby="model-picker-title"
     >
       <div className="relative w-full max-w-3xl max-h-[80vh] border border-border bg-card shadow-2xl flex flex-col">
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={onClose}
-          className="absolute right-3 top-3 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
           aria-label="Close"
         >
-          <X className="h-5 w-5" />
-        </button>
+          <X />
+        </Button>
 
         <header className="p-5 pb-3 border-b border-border">
           <h2
diff --git a/web/src/components/OAuthLoginModal.tsx b/web/src/components/OAuthLoginModal.tsx
index f88b9c4292..8a85d79abd 100644
--- a/web/src/components/OAuthLoginModal.tsx
+++ b/web/src/components/OAuthLoginModal.tsx
@@ -171,14 +171,15 @@ export function OAuthLoginModal({
       aria-labelledby="oauth-modal-title"
     >
       <div className="relative w-full max-w-md border border-border bg-card shadow-2xl">
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={handleClose}
-          className="absolute right-3 top-3 text-muted-foreground hover:text-foreground transition-colors"
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
           aria-label={t.common.close}
         >
-          <X className="h-5 w-5" />
-        </button>
+          <X />
+        </Button>
         <div className="p-6 flex flex-col gap-4">
           <div>
             <H2
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
deleted file mode 100644
index ae4d6a0d2d..0000000000
--- a/web/src/components/ui/select.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { ChevronDown, Check } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export function Select({
-  value,
-  onValueChange,
-  children,
-  className,
-  id,
-  disabled,
-}: SelectProps) {
-  const [open, setOpen] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const options: SelectOptionData[] = [];
-  flattenChildren(children, options);
-
-  const selectedOption = options.find((o) => o.value === value);
-  const displayLabel = selectedOption?.label ?? value ?? "";
-
-  const close = useCallback(() => {
-    setOpen(false);
-    setHighlightedIndex(-1);
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        close();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, close]);
-
-  useEffect(() => {
-    if (open && listRef.current && highlightedIndex >= 0) {
-      const el = listRef.current.children[highlightedIndex] as HTMLElement | undefined;
-      el?.scrollIntoView({ block: "nearest" });
-    }
-  }, [open, highlightedIndex]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-          setHighlightedIndex(options.findIndex((o) => o.value === value));
-        } else if (highlightedIndex >= 0 && options[highlightedIndex]) {
-          onValueChange?.(options[highlightedIndex].value);
-          close();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-          setHighlightedIndex(options.findIndex((o) => o.value === value));
-        } else {
-          setHighlightedIndex((i) => Math.min(i + 1, options.length - 1));
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (open) {
-          setHighlightedIndex((i) => Math.max(i - 1, 0));
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        close();
-        break;
-    }
-  };
-
-  return (
-    <div ref={containerRef} className={cn("relative", className)} id={id}>
-      <button
-        type="button"
-        role="combobox"
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        disabled={disabled}
-        onClick={() => !disabled && setOpen((o) => !o)}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          "flex h-9 w-full items-center justify-between border border-border bg-background/40 px-3 py-1 font-courier text-sm text-left transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "cursor-pointer",
-        )}
-      >
-        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>
-          {displayLabel}
-        </span>
-        <ChevronDown
-          className={cn(
-            "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
-            open && "rotate-180",
-          )}
-        />
-      </button>
-
-      {open && (
-        <div
-          ref={listRef}
-          role="listbox"
-          className={cn(
-            "absolute z-50 mt-1 w-full border border-border bg-popover text-popover-foreground shadow-lg",
-            "max-h-60 overflow-auto",
-            "animate-[fade-in_100ms_ease-out]",
-          )}
-        >
-          {options.map((opt, i) => {
-            const isSelected = opt.value === value;
-            const isHighlighted = i === highlightedIndex;
-            return (
-              <div
-                key={opt.value}
-                role="option"
-                aria-selected={isSelected}
-                onMouseEnter={() => setHighlightedIndex(i)}
-                onClick={() => {
-                  onValueChange?.(opt.value);
-                  close();
-                }}
-                className={cn(
-                  "flex items-center gap-2 px-3 py-2 text-sm font-courier cursor-pointer transition-colors",
-                  isHighlighted && "bg-foreground/10",
-                  isSelected && "text-foreground",
-                  !isSelected && "text-muted-foreground",
-                )}
-              >
-                <Check
-                  className={cn(
-                    "h-3.5 w-3.5 shrink-0",
-                    isSelected ? "opacity-100" : "opacity-0",
-                  )}
-                />
-                <span className="truncate">{opt.label}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function SelectOption(_props: SelectOptionProps) {
-  return null;
-}
-
-function flattenChildren(children: React.ReactNode, out: SelectOptionData[]) {
-  const arr = Array.isArray(children) ? children : [children];
-  for (const child of arr) {
-    if (!child || typeof child !== "object" || !("props" in child)) continue;
-    const props = child.props as Record<string, unknown>;
-    if (props.value !== undefined) {
-      out.push({
-        value: String(props.value),
-        label: typeof props.children === "string" ? props.children : String(props.value),
-      });
-    } else if (props.children) {
-      flattenChildren(props.children as React.ReactNode, out);
-    }
-  }
-}
-
-interface SelectProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  children?: React.ReactNode;
-  className?: string;
-  id?: string;
-  disabled?: boolean;
-}
-
-interface SelectOptionProps {
-  value: string;
-  children: React.ReactNode;
-}
-
-interface SelectOptionData {
-  value: string;
-  label: string;
-}
diff --git a/web/src/pages/ChatPage.tsx b/web/src/pages/ChatPage.tsx
index 3b7f3b2acc..3bd5189c38 100644
--- a/web/src/pages/ChatPage.tsx
+++ b/web/src/pages/ChatPage.tsx
@@ -22,7 +22,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css";
-import { Typography } from "@nous-research/ui";
+import { Button, Typography } from "@nous-research/ui";
 import { cn } from "@/lib/utils";
 import { Copy, PanelRight, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -732,18 +732,15 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
               {t.app.modelToolsSheetSubtitle}
             </Typography>
 
-            <button
-              type="button"
+            <Button
+              ghost
+              size="icon"
               onClick={closeMobilePanel}
               aria-label={t.app.closeModelTools}
-              className={cn(
-                "inline-flex h-7 w-7 items-center justify-center",
-                "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-              )}
+              className="text-midground/70 hover:text-midground"
             >
-              <X className="h-4 w-4" />
-            </button>
+              <X />
+            </Button>
           </div>
 
           <div
diff --git a/web/src/pages/CronPage.tsx b/web/src/pages/CronPage.tsx
index e8b3d1f63d..80c91dfd63 100644
--- a/web/src/pages/CronPage.tsx
+++ b/web/src/pages/CronPage.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Clock, Pause, Play, Plus, Trash2, Zap } from "lucide-react";
-import { Button, H2 } from "@nous-research/ui";
+import { Badge, Button, H2, Select, SelectOption } from "@nous-research/ui";
 import { api } from "@/lib/api";
 import type { CronJob } from "@/lib/api";
 import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";
@@ -8,10 +8,8 @@ import { useToast } from "@/hooks/useToast";
 import { useConfirmDelete } from "@/hooks/useConfirmDelete";
 import { Toast } from "@/components/Toast";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { useI18n } from "@/i18n";
 import { PluginSlot } from "@/plugins";
 
diff --git a/web/src/pages/SessionsPage.tsx b/web/src/pages/SessionsPage.tsx
index 20e7db2824..37f545978e 100644
--- a/web/src/pages/SessionsPage.tsx
+++ b/web/src/pages/SessionsPage.tsx
@@ -693,14 +693,15 @@ export default function SessionsPage() {
               </Badge>
             </div>
 
-            <button
-              type="button"
+            <Button
+              ghost
+              size="icon"
               onClick={dismissLog}
-              className="shrink-0 opacity-60 hover:opacity-100 cursor-pointer"
+              className="shrink-0 opacity-60 hover:opacity-100"
               aria-label={t.common.close}
             >
-              <X className="h-3.5 w-3.5" />
-            </button>
+              <X />
+            </Button>
           </div>
 
           <pre
diff --git a/web/src/plugins/registry.ts b/web/src/plugins/registry.ts
index 49446ba6ac..c005503d39 100644
--- a/web/src/plugins/registry.ts
+++ b/web/src/plugins/registry.ts
@@ -19,12 +19,10 @@ import React, {
 } from "react";
 import { api, fetchJSON } from "@/lib/api";
 import { cn, timeAgo, isoTimeAgo } from "@/lib/utils";
-import { Button } from "@nous-research/ui";
+import { Badge, Button, Select, SelectOption } from "@nous-research/ui";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Badge } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useI18n } from "@/i18n";