diff --git a/surfsense_web/app/(home)/login/LocalLoginForm.tsx b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
index a0326e39b..9692d35e1 100644
--- a/surfsense_web/app/(home)/login/LocalLoginForm.tsx
+++ b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { getAuthErrorDetails, isNetworkError } from "@/lib/auth-errors";
 import { AUTH_TYPE } from "@/lib/env-config";
@@ -120,11 +121,13 @@ export function LocalLoginForm() {
 									<p className="text-sm font-semibold mb-1">{error.title}</p>
 									<p className="text-sm text-destructive">{error.message}</p>
 								</div>
-								<button
+								<Button
+									variant="ghost"
+									size="icon"
 									onClick={() => {
 										setError({ title: null, message: null });
 									}}
-									className="flex-shrink-0 text-destructive hover:text-destructive/90 transition-colors"
+									className="size-6 flex-shrink-0 text-destructive hover:bg-transparent hover:text-destructive/90"
 									aria-label="Dismiss error"
 									type="button"
 								>
@@ -143,7 +146,7 @@ export function LocalLoginForm() {
 										<line x1="18" y1="6" x2="6" y2="18" />
 										<line x1="6" y1="6" x2="18" y2="18" />
 									</svg>
-								</button>
+								</Button>
 							</div>
 						</motion.div>
 					)}
@@ -191,21 +194,23 @@ export function LocalLoginForm() {
 							}`}
 							disabled={isLoggingIn}
 						/>
-						<button
+						<Button
 							type="button"
+							variant="ghost"
+							size="icon"
 							onClick={() => setShowPassword((prev) => !prev)}
-							className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground"
+							className="absolute inset-y-0 right-0 h-full w-10 text-muted-foreground hover:bg-transparent hover:text-foreground"
 							aria-label={showPassword ? t("hide_password") : t("show_password")}
 						>
 							{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-						</button>
+						</Button>
 					</div>
 				</div>
 
-				<button
+				<Button
 					type="submit"
 					disabled={isLoggingIn}
-					className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+					className="relative h-auto w-full px-4 py-1.5 text-sm md:py-2 md:text-base"
 				>
 					<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
 					{isLoggingIn && (
@@ -213,7 +218,7 @@ export function LocalLoginForm() {
 							<Spinner size="sm" className="text-primary-foreground" />
 						</span>
 					)}
-				</button>
+				</Button>
 			</form>
 
 			{authType === "LOCAL" && (
diff --git a/surfsense_web/app/(home)/login/page.tsx b/surfsense_web/app/(home)/login/page.tsx
index c336e757c..42a9182e9 100644
--- a/surfsense_web/app/(home)/login/page.tsx
+++ b/surfsense_web/app/(home)/login/page.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { Suspense, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Logo } from "@/components/Logo";
+import { Button } from "@/components/ui/button";
 import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 import { getAuthErrorDetails, shouldRetry } from "@/lib/auth-errors";
 import { setRedirectPath } from "@/lib/auth-utils";
@@ -154,10 +155,12 @@ function LoginContent() {
 									<p className="text-sm font-semibold mb-1">{urlError.title}</p>
 									<p className="text-sm text-red-700 dark:text-red-300">{urlError.message}</p>
 								</div>
-								<button
+								<Button
 									type="button"
+									variant="ghost"
+									size="icon"
 									onClick={() => setUrlError(null)}
-									className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors"
+									className="size-6 flex-shrink-0 text-red-500 hover:bg-transparent hover:text-red-700 dark:text-red-400 dark:hover:text-red-200"
 									aria-label="Dismiss error"
 								>
 									<svg
@@ -175,7 +178,7 @@ function LoginContent() {
 										<line x1="18" y1="6" x2="6" y2="18" />
 										<line x1="6" y1="6" x2="18" y2="18" />
 									</svg>
-								</button>
+								</Button>
 							</div>
 						</motion.div>
 					)}
diff --git a/surfsense_web/app/(home)/register/page.tsx b/surfsense_web/app/(home)/register/page.tsx
index 00f142567..1fd1a4ecb 100644
--- a/surfsense_web/app/(home)/register/page.tsx
+++ b/surfsense_web/app/(home)/register/page.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { type ExternalToast, toast } from "sonner";
 import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
 import { Logo } from "@/components/Logo";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
 import { getBearerToken } from "@/lib/auth-utils";
@@ -199,11 +200,13 @@ export default function RegisterPage() {
 											<p className="text-sm font-semibold mb-1">{error.title}</p>
 											<p className="text-sm text-red-700 dark:text-red-300">{error.message}</p>
 										</div>
-										<button
+										<Button
+											variant="ghost"
+											size="icon"
 											onClick={() => {
 												setError({ title: null, message: null });
 											}}
-											className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors"
+											className="size-6 flex-shrink-0 text-red-500 hover:bg-transparent hover:text-red-700 dark:text-red-400 dark:hover:text-red-200"
 											aria-label="Dismiss error"
 											type="button"
 										>
@@ -222,7 +225,7 @@ export default function RegisterPage() {
 												<line x1="18" y1="6" x2="6" y2="18" />
 												<line x1="6" y1="6" x2="18" y2="18" />
 											</svg>
-										</button>
+										</Button>
 									</div>
 								</motion.div>
 							)}
@@ -295,18 +298,18 @@ export default function RegisterPage() {
 							/>
 						</div>
 
-						<button
+						<Button
 							type="submit"
 							disabled={isRegistering}
-							className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+							className="relative h-auto w-full px-4 py-1.5 text-sm md:py-2 md:text-base"
 						>
 							<span className={isRegistering ? "invisible" : ""}>{t("register")}</span>
 							{isRegistering && (
 								<span className="absolute inset-0 flex items-center justify-center gap-2">
-									<Spinner size="sm" className="text-white" />
+									<Spinner size="sm" className="text-primary-foreground" />
 								</span>
 							)}
-						</button>
+						</Button>
 					</form>
 
 					<div className="mt-4 text-center text-sm">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
index d5f1d0539..ba13a6239 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
@@ -4,6 +4,7 @@ import { motion } from "motion/react";
 import { useState } from "react";
 import { BuyPagesContent } from "@/components/settings/buy-pages-content";
 import { BuyTokensContent } from "@/components/settings/buy-tokens-content";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 const TABS = [
@@ -26,19 +27,21 @@ export default function BuyMorePage() {
 			>
 				<div className="flex items-center justify-center rounded-lg border bg-muted/30 p-1">
 					{TABS.map((tab) => (
-						<button
+						<Button
 							key={tab.id}
 							type="button"
+							variant="ghost"
+							size="sm"
 							onClick={() => setActiveTab(tab.id)}
 							className={cn(
-								"flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+								"h-auto flex-1 px-3 py-1.5 text-sm",
 								activeTab === tab.id
 									? "bg-background text-foreground shadow-sm"
 									: "text-muted-foreground hover:text-accent-foreground"
 							)}
 						>
 							{tab.label}
-						</button>
+						</Button>
 					))}
 				</div>
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index c431ab304..604e241f9 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -44,6 +44,7 @@ import {
 } from "@/components/assistant-ui/edit-message-dialog";
 import { StepSeparatorDataUI } from "@/components/assistant-ui/step-separator";
 import { Thread } from "@/components/assistant-ui/thread";
+import { Button } from "@/components/ui/button";
 import {
 	createTokenUsageStore,
 	type TokenUsageData,
@@ -76,8 +77,6 @@ import {
 import { createStreamFlushHelpers } from "@/lib/chat/stream-flush";
 import {
 	consumeSseEvents,
-	hasPersistableContent,
-	markInterruptsCompleted,
 	processSharedStreamEvent,
 } from "@/lib/chat/stream-pipeline";
 import {
@@ -88,7 +87,6 @@ import {
 } from "@/lib/chat/stream-side-effects";
 import {
 	addToolCall,
-	buildContentForPersistence,
 	buildContentForUI,
 	type ContentPartsState,
 	type FrameBatchedUpdater,
@@ -1718,8 +1716,19 @@ export default function NewChatPage() {
 			}
 
 			const byTcId = new Map<string, (typeof incoming)[number]>();
-			for (let i = 0; i < tcIds.length; i++) byTcId.set(tcIds[i], incoming[i]);
-			const submittedDecisions = tcIds.map((id) => byTcId.get(id)!);
+			const submittedDecisions: typeof incoming = [];
+			for (let i = 0; i < tcIds.length; i++) {
+				const tcId = tcIds[i];
+				const decision = incoming[i];
+				if (tcId === undefined || decision === undefined) {
+					toast.error(
+						`Cannot resume: ${incoming.length} decision(s) submitted for ${N} pending actions.`
+					);
+					return;
+				}
+				byTcId.set(tcId, decision);
+				submittedDecisions.push(decision);
+			}
 
 			setMessages((prev) =>
 				prev.map((m) => {
@@ -2341,16 +2350,15 @@ export default function NewChatPage() {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-4">
 				<div className="text-destructive">Failed to load chat</div>
-				<button
+				<Button
 					type="button"
 					onClick={() => {
 						setIsInitializing(true);
 						initializeThread();
 					}}
-					className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
 				>
 					Try Again
-				</button>
+				</Button>
 			</div>
 		);
 	}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
index 2ab6ef34e..e93ad1799 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
@@ -482,13 +482,15 @@ function MemberRow({
 				{showActions ? (
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<button
+							<Button
 								type="button"
-								className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
+								variant="ghost"
+								size="sm"
+								className="h-auto gap-1.5 px-0 py-0 text-sm text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
 							>
 								{roleName}
 								<ChevronDown className="h-4 w-4" />
-							</button>
+							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
 							align="end"
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
index 17d8aa50c..1c20b79c2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
@@ -6,6 +6,7 @@ import { useMemo } from "react";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { AgentFeatureFlags } from "@/lib/apis/agent-flags-api.service";
@@ -246,14 +247,16 @@ export function AgentStatusContent() {
 				<AlertTitle>Failed to load agent status</AlertTitle>
 				<AlertDescription className="flex items-center gap-2">
 					{error instanceof Error ? error.message : "Unknown error."}
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="sm"
 						onClick={() => refetch()}
-						className="ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs hover:bg-background"
+						className="ml-auto h-auto gap-1 px-2 py-0.5 text-xs hover:bg-background"
 					>
 						<RotateCcw className="size-3" />
 						Retry
-					</button>
+					</Button>
 				</AlertDescription>
 			</Alert>
 		);
diff --git a/surfsense_web/app/dashboard/error.tsx b/surfsense_web/app/dashboard/error.tsx
index fa71f72bb..85c31e1a0 100644
--- a/surfsense_web/app/dashboard/error.tsx
+++ b/surfsense_web/app/dashboard/error.tsx
@@ -3,6 +3,7 @@
 import { ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
 import { buildIssueUrl } from "@/lib/error-toast";
 
 export default function DashboardError({
@@ -39,13 +40,12 @@ export default function DashboardError({
 			)}
 
 			<div className="flex gap-2">
-				<button
+				<Button
 					type="button"
 					onClick={reset}
-					className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
 				>
 					Try again
-				</button>
+				</Button>
 				<Link
 					href="/dashboard"
 					className="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
diff --git a/surfsense_web/app/error.tsx b/surfsense_web/app/error.tsx
index 251c69d29..dd3a35d41 100644
--- a/surfsense_web/app/error.tsx
+++ b/surfsense_web/app/error.tsx
@@ -2,6 +2,7 @@
 
 import { ExternalLink } from "lucide-react";
 import { useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
 import { buildIssueUrl } from "@/lib/error-toast";
 
 export default function ErrorPage({
@@ -37,13 +38,12 @@ export default function ErrorPage({
 			)}
 
 			<div className="flex gap-2">
-				<button
+				<Button
 					type="button"
 					onClick={reset}
-					className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
 				>
 					Try again
-				</button>
+				</Button>
 				<a
 					href={issueUrl}
 					target="_blank"
diff --git a/surfsense_web/components/free-chat/anonymous-chat.tsx b/surfsense_web/components/free-chat/anonymous-chat.tsx
index 3de2ca434..93168d084 100644
--- a/surfsense_web/components/free-chat/anonymous-chat.tsx
+++ b/surfsense_web/components/free-chat/anonymous-chat.tsx
@@ -2,6 +2,7 @@
 
 import { ArrowUp, Loader2, Square } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
 import type { AnonModel, AnonQuotaResponse } from "@/contracts/types/anonymous-chat.types";
 import { anonymousChatApiService } from "@/lib/apis/anonymous-chat-api.service";
 import { readSSEStream } from "@/lib/chat/streaming-state";
@@ -28,14 +29,16 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 	const abortRef = useRef<AbortController | null>(null);
 	const messagesEndRef = useRef<HTMLDivElement>(null);
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const modelSlug = model.seo_slug ?? model.model_name;
 
 	useEffect(() => {
 		anonymousChatApiService.getQuota().then(setQuota).catch(console.error);
 	}, []);
 
 	useEffect(() => {
+		if (messages.length === 0) return;
 		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-	}, [messages]);
+	}, [messages.length]);
 
 	const autoResizeTextarea = useCallback(() => {
 		const textarea = textareaRef.current;
@@ -63,7 +66,7 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 		}
 
 		trackAnonymousChatMessageSent({
-			modelSlug: model.seo_slug,
+			modelSlug,
 			messageLength: trimmed.length,
 			surface: "free_model_page",
 		});
@@ -84,7 +87,7 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 					headers: { "Content-Type": "application/json" },
 					credentials: "include",
 					body: JSON.stringify({
-						model_slug: model.seo_slug,
+						model_slug: modelSlug,
 						messages: chatHistory,
 					}),
 					signal: controller.signal,
@@ -100,6 +103,7 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 						remaining: 0,
 						status: "exceeded",
 						warning_threshold: quota?.warning_threshold ?? 800000,
+						captcha_required: errorData.detail?.captcha_required ?? quota?.captcha_required ?? false,
 					});
 					setMessages((prev) => prev.filter((m) => m.id !== assistantId));
 					return;
@@ -148,7 +152,7 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 			abortRef.current = null;
 			anonymousChatApiService.getQuota().then(setQuota).catch(console.error);
 		}
-	}, [input, isStreaming, messages, model.seo_slug, quota]);
+	}, [input, isStreaming, messages, modelSlug, quota]);
 
 	const handleCancel = useCallback(() => {
 		abortRef.current?.abort();
@@ -258,22 +262,26 @@ export function AnonymousChat({ model }: AnonymousChatProps) {
 						)}
 					/>
 					{isStreaming ? (
-						<button
+						<Button
 							type="button"
+							variant="ghost"
+							size="icon"
 							onClick={handleCancel}
-							className="absolute right-2 bottom-2 flex h-8 w-8 items-center justify-center rounded-lg bg-foreground text-background transition-colors hover:opacity-80"
+							className="absolute right-2 bottom-2 size-8 bg-foreground text-background hover:bg-foreground hover:text-background hover:opacity-80"
 						>
 							<Square className="h-3.5 w-3.5" fill="currentColor" />
-						</button>
+						</Button>
 					) : (
-						<button
+						<Button
 							type="button"
+							variant="ghost"
+							size="icon"
 							onClick={handleSubmit}
 							disabled={!input.trim() || isExceeded}
-							className="absolute right-2 bottom-2 flex h-8 w-8 items-center justify-center rounded-lg bg-foreground text-background transition-colors hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"
+							className="absolute right-2 bottom-2 size-8 bg-foreground text-background hover:bg-foreground hover:text-background hover:opacity-80 disabled:opacity-40"
 						>
 							<ArrowUp className="h-4 w-4" />
-						</button>
+						</Button>
 					)}
 				</div>
 
diff --git a/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx b/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
index 3730f0e53..473a4894b 100644
--- a/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
@@ -9,9 +9,9 @@ import {
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuLabel,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -65,29 +65,30 @@ export function DesktopLocalTabContent({
 	return (
 		<div className="flex min-h-0 flex-1 flex-col select-none">
 			<div className="mx-4 mt-4 mb-3">
-				<div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground hover:bg-accent hover:text-accent-foreground">
+				<div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground">
 					{localRootPaths.length > 0 ? (
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
-								<button
+								<Button
 									type="button"
-									className="min-w-0 flex-1 flex items-center gap-1 rounded-l-lg px-2 text-left transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+									variant="ghost"
+									size="sm"
+									className="min-w-0 flex-1 h-full justify-start gap-1 px-2 text-left text-[11px] text-muted-foreground"
 									title={localRootPaths.join("\n")}
 									aria-label="Manage selected folders"
 								>
-									<Folder className="size-3 shrink-0 text-muted-foreground" />
+									<Folder className="size-3 shrink-0" />
 									<span className="truncate">
 										{localRootPaths.length === 1
 											? "1 folder selected"
 											: `${localRootPaths.length} folders selected`}
 									</span>
-								</button>
+								</Button>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent align="start" className="w-56 select-none p-0.5">
 								<DropdownMenuLabel className="px-1.5 pt-1.5 pb-0.5 text-xs font-medium text-muted-foreground">
 									Selected folders
 								</DropdownMenuLabel>
-								<DropdownMenuSeparator className="mx-1 my-0.5" />
 								{localRootPaths.map((rootPath) => (
 									<DropdownMenuItem
 										key={rootPath}
@@ -98,9 +99,11 @@ export function DesktopLocalTabContent({
 										<span className="min-w-0 flex-1 truncate">
 											{getFolderDisplayName(rootPath)}
 										</span>
-										<button
+										<Button
 											type="button"
-											className="inline-flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:text-accent-foreground"
+											variant="ghost"
+											size="icon"
+											className="size-5 text-muted-foreground hover:text-accent-foreground"
 											onClick={(event) => {
 												event.stopPropagation();
 												void onRemoveFilesystemRoot(rootPath);
@@ -108,10 +111,9 @@ export function DesktopLocalTabContent({
 											aria-label={`Remove ${getFolderDisplayName(rootPath)}`}
 										>
 											<X className="size-3" />
-										</button>
+										</Button>
 									</DropdownMenuItem>
 								))}
-								<DropdownMenuSeparator className="mx-1 my-0.5" />
 								<DropdownMenuItem
 									variant="destructive"
 									className="h-8 px-1.5 text-xs text-destructive focus:text-destructive"
@@ -125,10 +127,10 @@ export function DesktopLocalTabContent({
 						</DropdownMenu>
 					) : (
 						<div
-							className="min-w-0 flex-1 flex items-center gap-1 px-2"
+							className="min-w-0 flex-1 flex items-center gap-1 px-2 transition-colors hover:bg-accent hover:text-accent-foreground"
 							title="No local folders selected"
 						>
-							<Folder className="size-3 shrink-0 text-muted-foreground" />
+							<Folder className="size-3 shrink-0" />
 							<span className="truncate">No local folders selected</span>
 						</div>
 					)}
@@ -140,9 +142,11 @@ export function DesktopLocalTabContent({
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<span className="inline-flex">
-									<button
+									<Button
 										type="button"
-										className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
+										variant="ghost"
+										size="icon"
+										className="h-full w-8 text-muted-foreground hover:text-accent-foreground"
 										onClick={() => {
 											void onPickFilesystemRoot();
 										}}
@@ -150,7 +154,7 @@ export function DesktopLocalTabContent({
 										aria-label="Add folder"
 									>
 										<FolderPlus className="size-3.5" />
-									</button>
+									</Button>
 								</span>
 							</TooltipTrigger>
 							<TooltipContent side="top" className="text-xs">
@@ -177,9 +181,11 @@ export function DesktopLocalTabContent({
 						aria-label="Search local files"
 					/>
 					{Boolean(localSearch) && (
-						<button
+						<Button
 							type="button"
-							className="absolute inset-y-0 right-0 flex h-full w-8 items-center justify-center rounded-r-md text-muted-foreground hover:text-accent-foreground transition-colors"
+							variant="ghost"
+							size="icon"
+							className="absolute inset-y-0 right-0 h-full w-8 text-muted-foreground hover:text-accent-foreground"
 							aria-label="Clear local search"
 							onClick={() => {
 								setLocalSearch("");
@@ -187,7 +193,7 @@ export function DesktopLocalTabContent({
 							}}
 						>
 							<X size={13} strokeWidth={2} aria-hidden="true" />
-						</button>
+						</Button>
 					)}
 				</div>
 			</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 017f14adf..98943a6e4 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -1043,82 +1043,84 @@ function AuthenticatedDocumentsSidebarBase({
 	const cloudContent = (
 		<>
 			{/* Connected tools strip */}
-			<div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted transition-colors hover:bg-accent hover:text-accent-foreground">
-				<button
-					type="button"
-					onClick={() => setConnectorDialogOpen(true)}
-					className="flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 text-left"
-				>
-					<Unplug className="size-4 shrink-0 text-muted-foreground" />
-					<span className="truncate text-xs text-muted-foreground">
-						{connectorCount > 0 ? "Manage connectors" : "Connect your connectors"}
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				onClick={() => setConnectorDialogOpen(true)}
+				className="shrink-0 mx-4 mt-6 mb-2.5 h-auto select-none justify-start gap-2 bg-muted px-3 py-1.5 text-xs text-muted-foreground"
+			>
+				<Unplug className="size-4 shrink-0" />
+				<span className="truncate">
+					{connectorCount > 0 ? "Manage connectors" : "Connect your connectors"}
+				</span>
+				{connectorCount > 0 && (
+					<span className="shrink-0 rounded-full bg-muted-foreground/15 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+						{connectorCount}
 					</span>
-					{connectorCount > 0 && (
-						<span className="shrink-0 rounded-full bg-muted-foreground/15 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-							{connectorCount}
-						</span>
-					)}
-					<AvatarGroup className="ml-auto shrink-0">
-						{connectorCount > 0 && connectors
-							? connectors.slice(0, isMobile ? 5 : 9).map((connector, i) => {
+				)}
+				<AvatarGroup className="ml-auto shrink-0">
+					{connectorCount > 0 && connectors
+						? connectors.slice(0, isMobile ? 5 : 9).map((connector, i) => {
+								const avatar = (
+									<Avatar
+										key={connector.id}
+										className="size-6"
+										style={{ zIndex: Math.max(9 - i, 1) }}
+									>
+										<AvatarFallback className="bg-muted text-[10px] text-muted-foreground">
+											{getConnectorIcon(connector.connector_type, "size-3.5")}
+										</AvatarFallback>
+									</Avatar>
+								);
+								if (isMobile) return avatar;
+								return (
+									<Tooltip key={connector.id}>
+										<TooltipTrigger asChild>{avatar}</TooltipTrigger>
+										<TooltipContent side="top" className="text-xs">
+											{connector.name}
+										</TooltipContent>
+									</Tooltip>
+								);
+							})
+						: (isMobile ? SHOWCASE_CONNECTORS.slice(0, 5) : SHOWCASE_CONNECTORS).map(
+								({ type, label }, i) => {
 									const avatar = (
 										<Avatar
-											key={connector.id}
+											key={type}
 											className="size-6"
-											style={{ zIndex: Math.max(9 - i, 1) }}
+											style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}
 										>
-											<AvatarFallback className="bg-muted text-[10px]">
-												{getConnectorIcon(connector.connector_type, "size-3.5")}
+											<AvatarFallback className="bg-muted text-[10px] text-muted-foreground">
+												{getConnectorIcon(type, "size-3.5")}
 											</AvatarFallback>
 										</Avatar>
 									);
 									if (isMobile) return avatar;
 									return (
-										<Tooltip key={connector.id}>
+										<Tooltip key={type}>
 											<TooltipTrigger asChild>{avatar}</TooltipTrigger>
 											<TooltipContent side="top" className="text-xs">
-												{connector.name}
+												{label}
 											</TooltipContent>
 										</Tooltip>
 									);
-								})
-							: (isMobile ? SHOWCASE_CONNECTORS.slice(0, 5) : SHOWCASE_CONNECTORS).map(
-									({ type, label }, i) => {
-										const avatar = (
-											<Avatar
-												key={type}
-												className="size-6"
-												style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}
-											>
-												<AvatarFallback className="bg-muted text-[10px]">
-													{getConnectorIcon(type, "size-3.5")}
-												</AvatarFallback>
-											</Avatar>
-										);
-										if (isMobile) return avatar;
-										return (
-											<Tooltip key={type}>
-												<TooltipTrigger asChild>{avatar}</TooltipTrigger>
-												<TooltipContent side="top" className="text-xs">
-													{label}
-												</TooltipContent>
-											</Tooltip>
-										);
-									}
-								)}
-					</AvatarGroup>
-				</button>
-			</div>
+								}
+							)}
+				</AvatarGroup>
+			</Button>
 
 			{isElectron && (
-				<button
+				<Button
 					type="button"
+					variant="ghost"
+					size="sm"
 					onClick={handleWatchLocalFolder}
-					className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted px-3 py-1.5 transition-colors hover:bg-accent hover:text-accent-foreground"
+					className="shrink-0 mx-4 mb-2.5 h-auto select-none justify-start gap-2 bg-muted px-3 py-1.5 text-xs text-muted-foreground"
 				>
-					<FolderClock className="size-4 shrink-0 text-muted-foreground" />
-					<span className="truncate text-xs text-muted-foreground">Watch local folder</span>
-				</button>
+					<FolderClock className="size-4 shrink-0" />
+					<span className="truncate">Watch local folder</span>
+				</Button>
 			)}
 
 			<div className="flex-1 min-h-0 pt-0 flex flex-col">
@@ -1139,15 +1141,17 @@ function AuthenticatedDocumentsSidebarBase({
 				<div className="relative flex-1 min-h-0 overflow-auto">
 					{deletableSelectedIds.length > 0 && (
 						<div className="absolute inset-x-0 top-0 z-10 flex items-center justify-center px-4 py-1.5 animate-in fade-in duration-150 pointer-events-none">
-							<button
+							<Button
 								type="button"
+								variant="destructive"
+								size="sm"
 								onClick={() => setBulkDeleteConfirmOpen(true)}
-								className="pointer-events-auto flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-lg text-xs font-medium hover:bg-destructive/90 transition-colors"
+								className="pointer-events-auto h-auto gap-1.5 px-3 py-1 text-xs shadow-lg"
 							>
 								<Trash2 size={12} />
 								Delete {deletableSelectedIds.length}{" "}
 								{deletableSelectedIds.length === 1 ? "item" : "items"}
-							</button>
+							</Button>
 						</div>
 					)}
 
@@ -1762,42 +1766,42 @@ function AnonymousDocumentsSidebar({
 			</div>
 
 			{/* Connectors strip (gated) */}
-			<div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-accent hover:text-accent-foreground">
-				<button
-					type="button"
-					onClick={() => gate("connect your data sources")}
-					className="flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 text-left"
-				>
-					<Unplug className="size-4 shrink-0 text-muted-foreground" />
-					<span className="truncate text-xs text-muted-foreground">Connect your connectors</span>
-					<AvatarGroup className="ml-auto shrink-0">
-						{(isMobile ? SHOWCASE_CONNECTORS.slice(0, 5) : SHOWCASE_CONNECTORS).map(
-							({ type, label }, i) => {
-								const avatar = (
-									<Avatar
-										key={type}
-										className="size-6"
-										style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}
-									>
-										<AvatarFallback className="bg-muted text-[10px]">
-											{getConnectorIcon(type, "size-3.5")}
-										</AvatarFallback>
-									</Avatar>
-								);
-								if (isMobile) return avatar;
-								return (
-									<Tooltip key={type}>
-										<TooltipTrigger asChild>{avatar}</TooltipTrigger>
-										<TooltipContent side="top" className="text-xs">
-											{label}
-										</TooltipContent>
-									</Tooltip>
-								);
-							}
-						)}
-					</AvatarGroup>
-				</button>
-			</div>
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				onClick={() => gate("connect your data sources")}
+				className="shrink-0 mx-4 mt-6 mb-2.5 h-auto select-none justify-start gap-2 border bg-muted/50 px-3 py-1.5 text-xs text-muted-foreground"
+			>
+				<Unplug className="size-4 shrink-0" />
+				<span className="truncate">Connect your connectors</span>
+				<AvatarGroup className="ml-auto shrink-0">
+					{(isMobile ? SHOWCASE_CONNECTORS.slice(0, 5) : SHOWCASE_CONNECTORS).map(
+						({ type, label }, i) => {
+							const avatar = (
+								<Avatar
+									key={type}
+									className="size-6"
+									style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}
+								>
+									<AvatarFallback className="bg-muted text-[10px] text-muted-foreground">
+										{getConnectorIcon(type, "size-3.5")}
+									</AvatarFallback>
+								</Avatar>
+							);
+							if (isMobile) return avatar;
+							return (
+								<Tooltip key={type}>
+									<TooltipTrigger asChild>{avatar}</TooltipTrigger>
+									<TooltipContent side="top" className="text-xs">
+										{label}
+									</TooltipContent>
+								</Tooltip>
+							);
+						}
+					)}
+				</AvatarGroup>
+			</Button>
 
 			{/* Filters & upload */}
 			<div className="flex-1 min-h-0 pt-0 flex flex-col">
@@ -1849,18 +1853,19 @@ function AnonymousDocumentsSidebar({
 
 					{!hasDoc && (
 						<div className="px-4 py-8 text-center">
-							<button
+							<Button
 								type="button"
+								variant="ghost"
 								onClick={handleAnonUploadClick}
 								disabled={isUploading}
-								className="relative flex w-full items-center justify-center rounded-lg border-2 border-dashed border-primary/30 px-4 py-6 text-sm text-primary transition-colors hover:border-primary/60 hover:bg-primary/5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
+								className="relative h-auto w-full border-2 border-dashed border-primary/30 px-4 py-6 text-sm text-primary hover:border-primary/60 hover:bg-primary/5 hover:text-primary cursor-pointer"
 							>
 								<span className={`flex items-center gap-2 ${isUploading ? "opacity-0" : ""}`}>
 									<Upload className="size-4" />
 									Upload a document
 								</span>
 								{isUploading && <Spinner size="sm" className="absolute" />}
-							</button>
+							</Button>
 							<p className="mt-2 text-[11px] text-muted-foreground leading-relaxed">
 								Text, code, CSV, and HTML files only. Create an account for PDFs, images, and 30+
 								connectors.
diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx
index 86caaf543..a3c530ac0 100644
--- a/surfsense_web/components/onboarding-tour.tsx
+++ b/surfsense_web/components/onboarding-tour.tsx
@@ -9,6 +9,7 @@ import { createPortal } from "react-dom";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { Button } from "@/components/ui/button";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
 import { fetchThreads } from "@/lib/chat/thread-persistence";
@@ -322,39 +323,45 @@ function TourTooltip({
 					{/* Navigation buttons */}
 					<div className="flex items-center gap-3">
 						{!isFirstStep && (
-							<button
+							<Button
 								type="button"
+								variant="ghost"
+								size="sm"
 								onClick={(e) => {
 									e.stopPropagation();
 									onPrev();
 								}}
-								className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80"
+								className="h-auto px-0 py-0 text-sm text-muted-foreground hover:bg-transparent hover:text-muted-foreground hover:opacity-80"
 							>
 								Back
-							</button>
+							</Button>
 						)}
 						{isFirstStep && (
-							<button
+							<Button
 								type="button"
+								variant="ghost"
+								size="sm"
 								onClick={(e) => {
 									e.stopPropagation();
 									onSkip();
 								}}
-								className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80"
+								className="h-auto px-0 py-0 text-sm text-muted-foreground hover:bg-transparent hover:text-muted-foreground hover:opacity-80"
 							>
 								Skip
-							</button>
+							</Button>
 						)}
-						<button
+						<Button
 							type="button"
+							variant="ghost"
+							size="sm"
 							onClick={(e) => {
 								e.stopPropagation();
 								onNext();
 							}}
-							className="text-sm font-medium text-foreground transition-opacity hover:opacity-80"
+							className="h-auto px-0 py-0 text-sm text-foreground hover:bg-transparent hover:text-foreground hover:opacity-80"
 						>
 							{isLastStep ? "Done" : "Next"}
-						</button>
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -714,9 +721,10 @@ export function OnboardingTour() {
 			`}</style>
 			<div className="fixed inset-0 z-[99995]">
 				{/* Clickable backdrop to close */}
-				<button
+				<Button
 					type="button"
-					className="fixed inset-0 w-full h-full bg-transparent border-0 cursor-default"
+					variant="ghost"
+					className="fixed inset-0 h-full w-full rounded-none border-0 bg-transparent p-0 hover:bg-transparent cursor-default"
 					onClick={handleOverlayClick}
 					aria-label="Close tour"
 				/>