From ee72a49ab14ab3bbd38eb8488e178ff6dae31772 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 14:40:08 +0530
Subject: [PATCH] refactor: replace button elements with Button component for
 improved consistency and styling across additional UI components

---
 .../components/composio-drive-config.tsx      |  24 +--
 .../components/dropbox-config.tsx             |  24 +--
 .../components/google-drive-config.tsx        |  27 ++--
 .../components/onedrive-config.tsx            |  24 +--
 .../views/connector-accounts-list-view.tsx    |  14 +-
 .../assistant-ui/inline-citation.tsx          |  15 +-
 .../connectors/drive-folder-tree.tsx          |  23 +--
 .../components/documents/DocumentNode.tsx     |  24 ++-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     |  14 +-
 .../ui/sidebar/LocalFilesystemBrowser.tsx     |  23 ++-
 surfsense_web/components/markdown-viewer.tsx  |  88 ++---------
 .../components/new-chat/prompt-picker.tsx     |  15 +-
 .../components/settings/buy-pages-content.tsx |  23 +--
 .../settings/buy-tokens-content.tsx           |  23 +--
 .../components/settings/roles-manager.tsx     | 147 ++++++++++--------
 .../components/settings/settings-dialog.tsx   |  15 +-
 .../components/shared/llm-config-form.tsx     |  14 +-
 17 files changed, 274 insertions(+), 263 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
index 8e92af44b..6d119e8a2 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
@@ -14,6 +14,7 @@ import {
 import type { FC } from "react";
 import { useCallback, useState } from "react";
 import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
@@ -196,14 +197,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
 								>
 									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFolder(folder.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${folder.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 							{selectedFiles.map((file) => (
@@ -214,14 +217,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
 								>
 									{getFileIconFromName(file.name)}
 									<span className="flex-1 truncate">{file.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFile(file.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${file.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 						</div>
@@ -237,10 +242,11 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
 
 				{isEditMode ? (
 					<div className="space-y-2">
-						<button
+						<Button
 							type="button"
+							variant="ghost"
 							onClick={() => setIsFolderTreeOpen((prev) => !prev)}
-							className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
+							className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 						>
 							Change Selection
 							{isFolderTreeOpen ? (
@@ -248,7 +254,7 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
 							) : (
 								<ChevronRight className="size-4" />
 							)}
-						</button>
+						</Button>
 						{isFolderTreeOpen && (
 							<DriveFolderTree
 								fetchItems={fetchItems}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx
index 706e8f2e4..7696ce9a5 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx
@@ -14,6 +14,7 @@ import {
 import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
@@ -177,14 +178,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
 								>
 									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFolder(folder.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${folder.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 							{selectedFiles.map((file) => (
@@ -195,14 +198,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
 								>
 									{getFileIconFromName(file.name)}
 									<span className="flex-1 truncate">{file.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFile(file.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${file.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 						</div>
@@ -217,10 +222,11 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
 
 				{isEditMode ? (
 					<div className="space-y-2">
-						<button
+						<Button
 							type="button"
+							variant="ghost"
 							onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)}
-							className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
+							className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 						>
 							Change Selection
 							{isFolderTreeOpen ? (
@@ -228,7 +234,7 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
 							) : (
 								<ChevronRight className="size-4" />
 							)}
-						</button>
+						</Button>
 						{isFolderTreeOpen && (
 							<DriveFolderTree
 								fetchItems={fetchItems}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
index 5d5f2e236..6111feba3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
@@ -92,11 +92,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 	const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
 	const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
 
-	const updateConfig = (
-		folders: SelectedItem[],
-		files: SelectedItem[],
-		options: IndexingOptions
-	) => {
+	const updateConfig = useCallback((folders: SelectedItem[], files: SelectedItem[], options: IndexingOptions) => {
 		if (onConfigChange) {
 			onConfigChange({
 				...connector.config,
@@ -105,7 +101,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 				indexing_options: options,
 			});
 		}
-	};
+	}, [connector.config, onConfigChange]);
 
 	const handlePicked = useCallback(
 		(result: PickerResult) => {
@@ -115,8 +111,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 			setSelectedFiles(files);
 			updateConfig(folders, files, indexingOptions);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[indexingOptions, connector.config]
+		[indexingOptions, updateConfig]
 	);
 
 	const {
@@ -188,14 +183,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 								>
 									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFolder(folder.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${folder.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 							{selectedFiles.map((file) => (
@@ -206,14 +203,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 								>
 									{getFileIconFromName(file.name)}
 									<span className="flex-1 truncate">{file.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFile(file.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${file.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 						</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
index 208a42123..5ecaee045 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
@@ -14,6 +14,7 @@ import {
 import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
@@ -178,14 +179,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
 								>
 									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFolder(folder.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${folder.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 							{selectedFiles.map((file) => (
@@ -196,14 +199,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
 								>
 									{getFileIconFromName(file.name)}
 									<span className="flex-1 truncate">{file.name}</span>
-									<button
+									<Button
 										type="button"
+										variant="ghost"
+										size="icon"
 										onClick={() => handleRemoveFile(file.id)}
-										className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
+										className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
 										aria-label={`Remove ${file.name}`}
 									>
 										<X className="size-3.5" />
-									</button>
+									</Button>
 								</div>
 							))}
 						</div>
@@ -218,10 +223,11 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
 
 				{isEditMode ? (
 					<div className="space-y-2">
-						<button
+						<Button
 							type="button"
+							variant="ghost"
 							onClick={() => setIsFolderTreeOpen((prev) => !prev)}
-							className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
+							className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 						>
 							Change Selection
 							{isFolderTreeOpen ? (
@@ -229,7 +235,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
 							) : (
 								<ChevronRight className="size-4" />
 							)}
-						</button>
+						</Button>
 						{isFolderTreeOpen && (
 							<DriveFolderTree
 								fetchItems={fetchItems}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
index b4234b119..5aed026e7 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
@@ -110,14 +110,15 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 			{/* Header */}
 			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 bg-popover">
 				{/* Back button */}
-				<button
+				<Button
 					type="button"
+					variant="ghost"
 					onClick={onBack}
-					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
+					className="mb-6 h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 				>
 					<ArrowLeft className="size-4" />
 					Back to connectors
-				</button>
+				</Button>
 
 				{/* Connector header */}
 				<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
@@ -135,12 +136,13 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 						</div>
 					</div>
 					{/* Add Account Button with dashed border */}
-					<button
+					<Button
 						type="button"
+						variant="ghost"
 						onClick={onAddAccount}
 						disabled={isConnecting || !isEnabled}
 						className={cn(
-							"flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border-2 border-dashed text-xs sm:text-sm transition-all duration-200 shrink-0 w-full sm:w-auto",
+							"h-8 w-full shrink-0 gap-1.5 rounded-md border-2 border-dashed px-3 text-xs transition-all duration-200 sm:w-auto sm:text-sm",
 							!isEnabled
 								? "border-border/30 opacity-50 cursor-not-allowed"
 								: "border-slate-400/20 dark:border-white/20 hover:bg-accent hover:text-accent-foreground",
@@ -155,7 +157,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 							)}
 						</div>
 						<span className="text-xs sm:text-sm font-medium">{buttonText}</span>
-					</button>
+					</Button>
 				</div>
 			</div>
 
diff --git a/surfsense_web/components/assistant-ui/inline-citation.tsx b/surfsense_web/components/assistant-ui/inline-citation.tsx
index 1a3d04262..abb89d5da 100644
--- a/surfsense_web/components/assistant-ui/inline-citation.tsx
+++ b/surfsense_web/components/assistant-ui/inline-citation.tsx
@@ -9,6 +9,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
 import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
 import { Citation } from "@/components/tool-ui/citation";
+import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -76,15 +77,16 @@ const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
 	const openCitationPanel = useSetAtom(openCitationPanelAtom);
 
 	return (
-		<button
+		<Button
 			type="button"
+			variant="ghost"
 			onClick={() => openCitationPanel({ chunkId })}
-			className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+			className="ml-0.5 h-5 min-w-5 cursor-pointer rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 			title={`View source chunk #${chunkId}`}
 			aria-label={`View cited chunk ${chunkId}`}
 		>
 			{chunkId}
-		</button>
+		</Button>
 	);
 };
 
@@ -121,8 +123,9 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>
-				<button
+				<Button
 					type="button"
+					variant="ghost"
 					onClick={() => setOpen((prev) => !prev)}
 					onMouseEnter={() => {
 						cancelClose();
@@ -134,13 +137,13 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
 						setOpen(true);
 					}}
 					onBlur={scheduleClose}
-					className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+					className="ml-0.5 h-5 min-w-5 cursor-pointer gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 					aria-label={`Show Surfsense documentation chunk ${chunkId}`}
 					title="Surfsense documentation"
 				>
 					<FileText className="size-3" />
 					doc
-				</button>
+				</Button>
 			</PopoverTrigger>
 			<PopoverContent
 				className="w-96 max-w-[calc(100vw-2rem)] p-0"
diff --git a/surfsense_web/components/connectors/drive-folder-tree.tsx b/surfsense_web/components/connectors/drive-folder-tree.tsx
index 5f11222f0..dd9cd7323 100644
--- a/surfsense_web/components/connectors/drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/drive-folder-tree.tsx
@@ -13,6 +13,7 @@ import {
 	Presentation,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
@@ -267,9 +268,11 @@ export function DriveFolderTree({
 					)}
 				>
 					{isFolder ? (
-						<button
+						<Button
 							type="button"
-							className="flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 shrink-0 bg-transparent border-0 p-0 cursor-pointer"
+							variant="ghost"
+							size="icon"
+							className="h-3 w-3 shrink-0 cursor-pointer bg-transparent p-0 hover:bg-transparent sm:h-4 sm:w-4"
 							onClick={(e) => {
 								e.stopPropagation();
 								toggleFolder(item);
@@ -283,7 +286,7 @@ export function DriveFolderTree({
 							) : (
 								<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
 							)}
-						</button>
+						</Button>
 					) : (
 						<span className="w-3 h-3 sm:w-4 sm:h-4 shrink-0" />
 					)}
@@ -314,13 +317,14 @@ export function DriveFolderTree({
 					</div>
 
 					{isFolder ? (
-						<button
+						<Button
 							type="button"
-							className="truncate flex-1 text-left text-xs sm:text-sm min-w-0 bg-transparent border-0 p-0 cursor-pointer"
+							variant="ghost"
+							className="h-auto min-w-0 flex-1 justify-start truncate bg-transparent p-0 text-left text-xs font-normal hover:bg-transparent hover:text-inherit sm:text-sm"
 							onClick={() => toggleFolder(item)}
 						>
 							{item.name}
-						</button>
+						</Button>
 					) : (
 						<span className="truncate flex-1 text-left text-xs sm:text-sm min-w-0">
 							{item.name}
@@ -356,13 +360,14 @@ export function DriveFolderTree({
 								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
 							/>
 							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
-							<button
+							<Button
 								type="button"
-								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
+								variant="ghost"
+								className="h-auto min-w-0 justify-start truncate bg-transparent p-0 text-left text-xs font-semibold hover:bg-transparent hover:text-inherit sm:text-sm"
 								onClick={() => toggleFolderSelection("root", rootLabel)}
 							>
 								{rootLabel}
-							</button>
+							</Button>
 						</div>
 					</div>
 
diff --git a/surfsense_web/components/documents/DocumentNode.tsx b/surfsense_web/components/documents/DocumentNode.tsx
index 826feb51d..0f3cd4a19 100644
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@@ -138,10 +138,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 	return (
 		<ContextMenu onOpenChange={onContextMenuOpenChange}>
 			<ContextMenuTrigger asChild>
-				{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
 				<div
-					role="button"
-					tabIndex={0}
 					ref={attachRef}
 					className={cn(
 						"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left",
@@ -149,13 +146,6 @@ export const DocumentNode = React.memo(function DocumentNode({
 						isDragging && "opacity-40"
 					)}
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
-					onClick={handleCheckChange}
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							handleCheckChange();
-						}
-					}}
 				>
 					{(() => {
 						if (statusState === "pending") {
@@ -212,9 +202,17 @@ export const DocumentNode = React.memo(function DocumentNode({
 						onOpenChange={handleTitleTooltipOpenChange}
 					>
 						<TooltipTrigger asChild>
-							<span ref={titleRef} className="flex-1 min-w-0 truncate">
-								{doc.title}
-							</span>
+							<Button
+								type="button"
+								variant="ghost"
+								aria-disabled={!isSelectable}
+								onClick={handleCheckChange}
+								className="h-full min-w-0 flex-1 justify-start bg-transparent px-0 py-0 text-left font-normal text-inherit hover:bg-transparent hover:text-inherit"
+							>
+								<span ref={titleRef} className="min-w-0 flex-1 truncate">
+									{doc.title}
+								</span>
+							</Button>
 						</TooltipTrigger>
 						<TooltipContent side="bottom" className="max-w-xs break-words">
 							{doc.title}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index e5bc0bd31..a2e912c72 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -348,8 +348,9 @@ export function AllPrivateChatsSidebarContent({
 							return (
 								<div key={thread.id} className="group/item relative w-full">
 									{isMobile ? (
-										<button
+										<Button
 											type="button"
+											variant="ghost"
 											onClick={() => {
 												if (wasLongPress()) return;
 												handleThreadClick(thread.id);
@@ -362,7 +363,7 @@ export function AllPrivateChatsSidebarContent({
 											onTouchMove={longPressHandlers.onTouchMove}
 											disabled={isBusy}
 											className={cn(
-												"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
+												"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
 												"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 												"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 												isActive && "bg-accent text-accent-foreground",
@@ -370,16 +371,17 @@ export function AllPrivateChatsSidebarContent({
 											)}
 										>
 											<span className="truncate">{thread.title || "New Chat"}</span>
-										</button>
+										</Button>
 									) : (
 										<Tooltip delayDuration={600}>
 											<TooltipTrigger asChild>
-												<button
+												<Button
 													type="button"
+													variant="ghost"
 													onClick={() => handleThreadClick(thread.id)}
 													disabled={isBusy}
 													className={cn(
-														"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
+														"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
 														"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 														"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 														isActive && "bg-accent text-accent-foreground",
@@ -387,7 +389,7 @@ export function AllPrivateChatsSidebarContent({
 													)}
 												>
 													<span className="truncate">{thread.title || "New Chat"}</span>
-												</button>
+												</Button>
 											</TooltipTrigger>
 											<TooltipContent side="bottom" align="start">
 												<p>
diff --git a/surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx b/surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx
index 9184ed511..aa773f3e1 100644
--- a/surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx
@@ -3,9 +3,11 @@
 import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_EXCLUDE_PATTERNS } from "@/components/sources/FolderWatchDialog";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { useElectronAPI } from "@/hooks/use-platform";
+import { cn } from "@/lib/utils";
 
 interface LocalFilesystemBrowserProps {
 	rootPaths: string[];
@@ -409,10 +411,11 @@ export function LocalFilesystemBrowser({
 			const files = [...folder.files].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
 			return (
 				<div key={folder.key} className="select-none">
-					<button
+					<Button
 						type="button"
+						variant="ghost"
 						onClick={() => toggleFolder(folder.key)}
-						className="flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+						className="h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal hover:bg-accent hover:text-accent-foreground"
 						style={{ paddingInlineStart: `${depth * 12 + 8}px` }}
 						draggable={false}
 					>
@@ -423,7 +426,7 @@ export function LocalFilesystemBrowser({
 						)}
 						<FolderIcon className="size-3.5 shrink-0 text-muted-foreground" />
 						<span className="truncate">{folder.name}</span>
-					</button>
+					</Button>
 					{isExpanded && (
 						<>
 							{childFolders.map((childFolder) => renderFolder(childFolder, depth + 1, mount))}
@@ -431,17 +434,21 @@ export function LocalFilesystemBrowser({
 								const extension = getNormalizedExtension(file.relativePath);
 								const isOpenable = openableExtensions.has(extension);
 								return (
-									<button
+									<Button
 										key={file.fullPath}
 										type="button"
+										variant="ghost"
 										onClick={
 											isOpenable
 												? () => onOpenFile(toMountedVirtualPath(mount, file.relativePath))
 												: undefined
 										}
-										className={`flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors ${
-											isOpenable ? "hover:bg-accent hover:text-accent-foreground" : "cursor-not-allowed opacity-60"
-										}`}
+										className={cn(
+											"h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal",
+											isOpenable
+												? "hover:bg-accent hover:text-accent-foreground"
+												: "cursor-not-allowed opacity-60"
+										)}
 										style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }}
 										title={
 											isOpenable
@@ -453,7 +460,7 @@ export function LocalFilesystemBrowser({
 									>
 										<FileText className="size-3.5 shrink-0 text-muted-foreground" />
 										<span className="truncate">{getFileName(file.relativePath)}</span>
-									</button>
+									</Button>
 								);
 							})}
 						</>
diff --git a/surfsense_web/components/markdown-viewer.tsx b/surfsense_web/components/markdown-viewer.tsx
index 6caf01917..45bdc7be1 100644
--- a/surfsense_web/components/markdown-viewer.tsx
+++ b/surfsense_web/components/markdown-viewer.tsx
@@ -13,10 +13,7 @@ const code = createCodePlugin({
 });
 
 const math = createMathPlugin({
-	// Disabled so currency like "$3,120.00 and ... $0.00" isn't parsed as
-	// inline LaTeX. convertLatexDelimiters() below normalises any genuine
-	// inline math (\(...\), $...$ starting with a LaTeX command, etc.) to
-	// $$...$$, so this flip doesn't lose any math rendering.
+	// Keep currency from being parsed as math; real math is normalized below.
 	singleDollarTextMath: false,
 });
 
@@ -24,76 +21,37 @@ interface MarkdownViewerProps {
 	content: string;
 	className?: string;
 	maxLength?: number;
-	/**
-	 * When true, render `[citation:N]` / `[citation:URL]` tokens as the
-	 * interactive citation badges/popovers used in chat. Default `false`
-	 * so callers that don't need citations are unchanged.
-	 *
-	 * Note: we deliberately do NOT override `<a>` to inject citations into
-	 * link text — that would produce `<button>` inside `<a>` (invalid
-	 * HTML). A `[citation:N]` token literally placed inside markdown link
-	 * text stays as raw text.
-	 */
+	/** Render citation tokens as interactive badges. */
 	enableCitations?: boolean;
 }
 
 const EMPTY_URL_MAP: CitationUrlMap = new Map();
 
-/**
- * If the entire content is wrapped in a single ```markdown or ```md
- * code fence, strip the fence so the inner markdown renders properly.
- */
+/** Strip a single outer markdown fence when the whole payload is fenced. */
 function stripOuterMarkdownFence(content: string): string {
 	const trimmed = content.trim();
-	// Match 3+ backtick fences (LLMs escalate to 4+ when content has triple-backtick blocks)
 	const match = trimmed.match(/^(`{3,})(?:markdown|md)?\s*\n([\s\S]+?)\n\1\s*$/);
 	return match ? match[2] : content;
 }
 
-/**
- * Convert all LaTeX delimiter styles to the double-dollar syntax
- * that Streamdown's @streamdown/math plugin understands.
- *
- * Streamdown math conventions (different from remark-math!):
- *   $$...$$  on the SAME line     → inline math
- *   $$\n...\n$$  on SEPARATE lines → block (display) math
- *
- * Conversions performed:
- *   \[...\]                              → $$\n ... \n$$  (block math)
- *   \(...\)                              → $$...$$        (inline math, same line)
- *   \begin{equation}...\end{equation}    → $$\n ... \n$$  (block math)
- *   \begin{displaymath}...\end{displaymath} → $$\n ... \n$$ (block math)
- *   \begin{math}...\end{math}            → $$...$$        (inline math, same line)
- *   `$$ … $$`                             → $$ … $$       (strip wrapping backtick code)
- *   `$ … $`                               → $ … $         (strip wrapping backtick code)
- *   $...$                                 → $$...$$        (normalise single-$ to double-$$)
- */
+/** Normalize common LaTeX delimiters to Streamdown's double-dollar syntax. */
 function convertLatexDelimiters(content: string): string {
-	// 1. Block math: \[...\] → $$\n...\n$$ (display math on separate lines)
 	content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `\n$$\n${inner.trim()}\n$$\n`);
-	// 2. Inline math: \(...\) → $$...$$ (inline math on same line)
 	content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$$${inner.trim()}$$`);
-	// 3. Block: \begin{equation}...\end{equation} → $$\n...\n$$
 	content = content.replace(
 		/\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g,
 		(_, inner) => `\n$$\n${inner.trim()}\n$$\n`
 	);
-	// 4. Block: \begin{displaymath}...\end{displaymath} → $$\n...\n$$
 	content = content.replace(
 		/\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g,
 		(_, inner) => `\n$$\n${inner.trim()}\n$$\n`
 	);
-	// 5. Inline: \begin{math}...\end{math} → $$...$$
 	content = content.replace(
 		/\\begin\{math\}([\s\S]*?)\\end\{math\}/g,
 		(_, inner) => `$$${inner.trim()}$$`
 	);
-	// 6. Strip backtick wrapping around math: `$$...$$` → $$...$$ and `$...$` → $...$
 	content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1");
-	// 7. Normalise single-dollar $...$ to double-dollar $$...$$ so they render
-	//    reliably in Streamdown (single-$ has strict no-space rules that often fail).
-	//    We match $…$ where the content starts with a backslash (LaTeX command)
-	//    to avoid converting currency like $50.
+	// Only convert command-style single-dollar math, leaving currency alone.
 	content = content.replace(
 		/(?<!\$)\$(?!\$)(\\[a-zA-Z][\s\S]*?)(?<!\$)\$(?!\$)/g,
 		(_, inner) => `$$${inner.trim()}$$`
@@ -110,9 +68,7 @@ export function MarkdownViewer({
 	const isTruncated = maxLength != null && content.length > maxLength;
 	const displayContent = isTruncated ? content.slice(0, maxLength) : content;
 
-	// Preprocess for URL placeholders BEFORE LaTeX so GFM autolinks don't
-	// split `[citation:https://…]` apart. The preprocess is code-fence
-	// aware so citations inside fenced code stay literal.
+	// Rewrite citation URLs before markdown autolinking can split them.
 	const { processedContent, urlMap } = useMemo(() => {
 		const stripped = stripOuterMarkdownFence(displayContent);
 		if (!enableCitations) {
@@ -128,11 +84,7 @@ export function MarkdownViewer({
 		};
 	}, [displayContent, enableCitations]);
 
-	// Phrasing/block renderers wrap their string children through the
-	// citation renderer when `enableCitations` is on. We deliberately do
-	// NOT override `<a>` (would produce <button> inside <a>) and we do
-	// NOT touch the inline/fenced `code` paths (citations stay literal
-	// inside code, matching markdown-text.tsx behavior).
+	// Do not wrap anchors or code; citation buttons inside them would be invalid.
 	const wrap = (children: React.ReactNode): React.ReactNode =>
 		enableCitations ? processChildrenWithCitations(children, urlMap) : children;
 
@@ -198,27 +150,21 @@ export function MarkdownViewer({
 		),
 		hr: ({ ...props }) => <hr className="my-4 border-muted" {...props} />,
 		img: ({ src, alt, width: _w, height: _h, ...props }) => {
-			const isDataOrUnknownUrl =
-				typeof src === "string" && (src.startsWith("data:") || !src.startsWith("http"));
+			if (typeof src !== "string") return null;
 
-			return isDataOrUnknownUrl ? (
-				// eslint-disable-next-line @next/next/no-img-element
-				<img
-					className="max-w-full h-auto my-4 rounded"
-					alt={alt || "markdown image"}
-					src={src}
-					loading="lazy"
-					{...props}
-				/>
-			) : (
+			const width = typeof _w === "number" ? _w : Number(_w) || 800;
+			const height = typeof _h === "number" ? _h : Number(_h) || 600;
+			const shouldSkipOptimization = src.startsWith("data:");
+
+			return (
 				<Image
 					className="max-w-full h-auto my-4 rounded"
 					alt={alt || "markdown image"}
-					src={typeof src === "string" ? src : ""}
-					width={_w || 800}
-					height={_h || 600}
+					src={src}
+					width={width}
+					height={height}
 					sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
-					unoptimized={isDataOrUnknownUrl}
+					unoptimized={shouldSkipOptimization}
 					{...props}
 				/>
 			);
diff --git a/surfsense_web/components/new-chat/prompt-picker.tsx b/surfsense_web/components/new-chat/prompt-picker.tsx
index 3f18890c7..220fe3436 100644
--- a/surfsense_web/components/new-chat/prompt-picker.tsx
+++ b/surfsense_web/components/new-chat/prompt-picker.tsx
@@ -15,6 +15,7 @@ import {
 
 import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
 import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
@@ -150,17 +151,18 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 							Saved Prompts
 						</div>
 						{filtered.map((action, index) => (
-							<button
+							<Button
 								key={action.id}
 								ref={(el) => {
 									if (el) itemRefs.current.set(index, el);
 									else itemRefs.current.delete(index);
 								}}
 								type="button"
+								variant="ghost"
 								onClick={() => handleSelect(index)}
 								onMouseEnter={() => setHighlightedIndex(index)}
 								className={cn(
-									"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer",
+									"h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal transition-colors",
 									index === highlightedIndex && "bg-accent text-accent-foreground"
 								)}
 							>
@@ -168,20 +170,21 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 									<Zap className="size-4" />
 								</span>
 								<span className="flex-1 text-sm truncate">{action.name}</span>
-							</button>
+							</Button>
 						))}
 
 						<div className="mx-2 my-1 border-t border-popover-border" />
-						<button
+						<Button
 							ref={(el) => {
 								if (el) itemRefs.current.set(createPromptIndex, el);
 								else itemRefs.current.delete(createPromptIndex);
 							}}
 							type="button"
+							variant="ghost"
 							onClick={() => handleSelect(createPromptIndex)}
 							onMouseEnter={() => setHighlightedIndex(createPromptIndex)}
 							className={cn(
-								"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer text-muted-foreground",
+								"h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal text-muted-foreground transition-colors",
 								highlightedIndex === createPromptIndex
 									? "bg-accent text-accent-foreground"
 									: "hover:text-accent-foreground hover:bg-accent"
@@ -191,7 +194,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 								<Plus className="size-4" />
 							</span>
 							<span>Create prompt</span>
-						</button>
+						</Button>
 					</div>
 				)}
 			</div>
diff --git a/surfsense_web/components/settings/buy-pages-content.tsx b/surfsense_web/components/settings/buy-pages-content.tsx
index 5e2c6f9db..3cb8e7133 100644
--- a/surfsense_web/components/settings/buy-pages-content.tsx
+++ b/surfsense_web/components/settings/buy-pages-content.tsx
@@ -72,44 +72,49 @@ export function BuyPagesContent() {
 			<div className="space-y-3">
 				{/* Stepper */}
 				<div className="flex items-center justify-center gap-3">
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="icon"
 						onClick={() => setQuantity((q) => Math.max(1, q - 1))}
 						disabled={quantity <= 1 || purchaseMutation.isPending}
-						className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
 					>
 						<Minus className="h-3.5 w-3.5" />
-					</button>
+					</Button>
 					<span className="min-w-28 text-center text-lg font-semibold tabular-nums">
 						{totalPages.toLocaleString()}
 					</span>
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="icon"
 						onClick={() => setQuantity((q) => Math.min(100, q + 1))}
 						disabled={quantity >= 100 || purchaseMutation.isPending}
-						className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
 					>
 						<Plus className="h-3.5 w-3.5" />
-					</button>
+					</Button>
 				</div>
 
 				{/* Quick-pick presets */}
 				<div className="flex flex-wrap justify-center gap-1.5">
 					{PRESET_MULTIPLIERS.map((m) => (
-						<button
+						<Button
 							key={m}
 							type="button"
+							variant="ghost"
 							onClick={() => setQuantity(m)}
 							disabled={purchaseMutation.isPending}
 							className={cn(
-								"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
+								"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
 								quantity === m
 									? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
 									: "border-border hover:border-emerald-500/40 hover:bg-muted/40"
 							)}
 						>
 							{(m * PAGE_PACK_SIZE).toLocaleString()}
-						</button>
+						</Button>
 					))}
 				</div>
 
diff --git a/surfsense_web/components/settings/buy-tokens-content.tsx b/surfsense_web/components/settings/buy-tokens-content.tsx
index 79a1b4943..abda14266 100644
--- a/surfsense_web/components/settings/buy-tokens-content.tsx
+++ b/surfsense_web/components/settings/buy-tokens-content.tsx
@@ -105,43 +105,48 @@ export function BuyTokensContent() {
 
 			<div className="space-y-3">
 				<div className="flex items-center justify-center gap-3">
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="icon"
 						onClick={() => setQuantity((q) => Math.max(1, q - 1))}
 						disabled={quantity <= 1 || purchaseMutation.isPending}
-						className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
 					>
 						<Minus className="h-3.5 w-3.5" />
-					</button>
+					</Button>
 					<span className="min-w-32 text-center text-lg font-semibold tabular-nums">
 						${(totalCreditMicros / 1_000_000).toFixed(0)} of credit
 					</span>
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="icon"
 						onClick={() => setQuantity((q) => Math.min(100, q + 1))}
 						disabled={quantity >= 100 || purchaseMutation.isPending}
-						className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
 					>
 						<Plus className="h-3.5 w-3.5" />
-					</button>
+					</Button>
 				</div>
 
 				<div className="flex flex-wrap justify-center gap-1.5">
 					{PRESET_MULTIPLIERS.map((m) => (
-						<button
+						<Button
 							key={m}
 							type="button"
+							variant="ghost"
 							onClick={() => setQuantity(m)}
 							disabled={purchaseMutation.isPending}
 							className={cn(
-								"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
+								"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
 								quantity === m
 									? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400"
 									: "border-border hover:border-purple-500/40 hover:bg-muted/40"
 							)}
 						>
 							${m}
-						</button>
+						</Button>
 					))}
 				</div>
 
diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
index eb049d8fa..d2ddba9a0 100644
--- a/surfsense_web/components/settings/roles-manager.tsx
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -462,47 +462,44 @@ function RolesContent({
 
 					return (
 						<div key={role.id} className="rounded-lg border border-border/60 overflow-hidden">
-							{/* biome-ignore lint/a11y/useSemanticElements: row contains nested interactive elements (DropdownMenu); using a <button> would produce invalid nested-button markup */}
 							<div
-								role="button"
-								tabIndex={0}
-								aria-expanded={isExpanded}
-								className="flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-								onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" || e.key === " ") {
-										e.preventDefault();
-										setExpandedRoleId(isExpanded ? null : role.id);
-									}
-								}}
+								className="group/role-header flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
 							>
-								<div className="flex-1 min-w-0 text-left">
-									<div className="flex items-center gap-2">
-										<span className="font-medium text-sm">{role.name}</span>
-										{role.is_system_role && (
-											<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
-												System
-											</span>
-										)}
-										{role.is_default && (
-											<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
-												Default
-											</span>
+								<Button
+									type="button"
+									variant="ghost"
+									aria-expanded={isExpanded}
+									className="h-auto min-w-0 flex-1 justify-start gap-4 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
+									onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
+								>
+									<div className="flex-1 min-w-0 text-left">
+										<div className="flex items-center gap-2">
+											<span className="font-medium text-sm">{role.name}</span>
+											{role.is_system_role && (
+												<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
+													System
+												</span>
+											)}
+											{role.is_default && (
+												<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
+													Default
+												</span>
+											)}
+										</div>
+										{role.description && (
+											<p className="text-xs text-muted-foreground mt-0.5 truncate">
+												{role.description}
+											</p>
 										)}
 									</div>
-									{role.description && (
-										<p className="text-xs text-muted-foreground mt-0.5 truncate">
-											{role.description}
-										</p>
-									)}
-								</div>
 
-								<div className="shrink-0">
-									<PermissionsBadge permissions={role.permissions} />
-								</div>
+									<div className="shrink-0">
+										<PermissionsBadge permissions={role.permissions} />
+									</div>
+								</Button>
 
 								{!role.is_system_role && (
-									<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()}>
+									<div className="shrink-0">
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
 												<Button variant="ghost" size="icon" className="h-8 w-8">
@@ -552,14 +549,22 @@ function RolesContent({
 									</div>
 								)}
 
-								<div className="shrink-0 p-1">
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									aria-label={isExpanded ? `Collapse ${role.name}` : `Expand ${role.name}`}
+									aria-expanded={isExpanded}
+									className="size-6 shrink-0 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
+									onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
+								>
 									<ChevronRight
 										className={cn(
 											"h-4 w-4 text-muted-foreground transition-transform duration-200",
 											isExpanded && "rotate-90"
 										)}
 									/>
-								</div>
+								</Button>
 							</div>
 
 							{isExpanded && (
@@ -692,40 +697,44 @@ function PermissionsEditor({
 
 					return (
 						<div key={category} className="rounded-lg border border-border/60 overflow-hidden">
-							{/* biome-ignore lint/a11y/useSemanticElements: row contains a nested interactive Checkbox; using a <button> would produce invalid nested-button markup */}
 							<div
-								role="button"
-								tabIndex={0}
-								aria-expanded={isExpanded}
-								className="flex items-center justify-between px-3 py-2.5 hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-								onClick={() => toggleCategoryExpanded(category)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" || e.key === " ") {
-										e.preventDefault();
-										toggleCategoryExpanded(category);
-									}
-								}}
+								className="group/category-header flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
 							>
-								<div className="flex-1 flex items-center gap-2.5">
+								<Button
+									type="button"
+									variant="ghost"
+									aria-expanded={isExpanded}
+									className="h-auto min-w-0 flex-1 justify-start gap-2.5 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
+									onClick={() => toggleCategoryExpanded(category)}
+								>
 									<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
 									<span className="font-medium text-sm">{config.label}</span>
 									<span className="text-[11px] text-muted-foreground tabular-nums">
 										{stats.selected}/{stats.total}
 									</span>
-								</div>
+								</Button>
 								<div className="flex items-center gap-2">
 									<Checkbox
 										checked={stats.allSelected}
-										onClick={(e) => e.stopPropagation()}
 										onCheckedChange={() => onToggleCategory(category)}
 										aria-label={`Select all ${config.label} permissions`}
 									/>
-									<ChevronRight
-										className={cn(
-											"h-4 w-4 text-muted-foreground transition-transform duration-200",
-											isExpanded && "rotate-90"
-										)}
-									/>
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon"
+										aria-label={isExpanded ? `Collapse ${config.label}` : `Expand ${config.label}`}
+										aria-expanded={isExpanded}
+										className="size-6 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
+										onClick={() => toggleCategoryExpanded(category)}
+									>
+										<ChevronRight
+											className={cn(
+												"h-4 w-4 text-muted-foreground transition-transform duration-200",
+												isExpanded && "rotate-90"
+											)}
+										/>
+									</Button>
 								</div>
 							</div>
 
@@ -745,16 +754,19 @@ function PermissionsEditor({
 														isSelected ? "bg-muted/60 hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
 													)}
 												>
-													<button
+													<Button
 														type="button"
-														className="flex-1 min-w-0 text-left cursor-pointer focus:outline-none focus-visible:outline-none"
+														variant="ghost"
+														className="h-auto flex-1 min-w-0 justify-start p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
 														onClick={() => onTogglePermission(perm.value)}
 													>
-														<span className="text-sm font-medium">{actionLabel}</span>
-														<p className="text-xs text-muted-foreground truncate">
-															{perm.description}
-														</p>
-													</button>
+														<span className="min-w-0">
+															<span className="block text-sm font-medium">{actionLabel}</span>
+															<span className="block text-xs text-muted-foreground truncate">
+																{perm.description}
+															</span>
+														</span>
+													</Button>
 													<Checkbox
 														checked={isSelected}
 														onCheckedChange={() => onTogglePermission(perm.value)}
@@ -871,12 +883,13 @@ function CreateRoleDialog({
 							<Label className="text-sm font-medium">Start from a template</Label>
 							<div className="grid grid-cols-3 gap-2">
 								{Object.entries(ROLE_PRESETS).map(([key, preset]) => (
-									<button
+									<Button
 										key={key}
 										type="button"
+										variant="outline"
 										onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
 										className={cn(
-											"p-3 rounded-lg border transition-colors hover:bg-accent hover:text-accent-foreground",
+											"h-auto p-3 whitespace-normal transition-colors hover:bg-accent hover:text-accent-foreground",
 											"flex items-center justify-center text-center sm:block sm:text-left",
 											selectedPermissions.length > 0 &&
 												preset.permissions.every((p) => selectedPermissions.includes(p))
@@ -888,7 +901,7 @@ function CreateRoleDialog({
 										<p className="hidden sm:block text-xs text-muted-foreground mt-0.5 line-clamp-2">
 											{preset.description}
 										</p>
-									</button>
+									</Button>
 								))}
 							</div>
 						</div>
diff --git a/surfsense_web/components/settings/settings-dialog.tsx b/surfsense_web/components/settings/settings-dialog.tsx
index 7bfcb9a60..d3f75c2a8 100644
--- a/surfsense_web/components/settings/settings-dialog.tsx
+++ b/surfsense_web/components/settings/settings-dialog.tsx
@@ -2,6 +2,7 @@
 
 import type * as React from "react";
 import { useCallback, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
@@ -55,12 +56,13 @@ export function SettingsDialog({
 				<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
 					<div className="flex flex-col gap-0.5">
 						{navItems.map((item) => (
-							<button
+							<Button
 								key={item.value}
 								type="button"
+								variant="ghost"
 								onClick={() => onItemChange(item.value)}
 								className={cn(
-									"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left focus:outline-none focus-visible:outline-none",
+									"h-auto justify-start gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none",
 									activeItem === item.value
 										? "bg-accent text-accent-foreground"
 										: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@@ -68,7 +70,7 @@ export function SettingsDialog({
 							>
 								{item.icon}
 								{item.label}
-							</button>
+							</Button>
 						))}
 					</div>
 				</nav>
@@ -88,13 +90,14 @@ export function SettingsDialog({
 					>
 						<div className="flex gap-1 px-4 pb-2">
 							{navItems.map((item) => (
-								<button
+								<Button
 									key={item.value}
 									ref={activeItem === item.value ? activeRef : undefined}
 									type="button"
+									variant="ghost"
 									onClick={() => handleItemChange(item.value)}
 									className={cn(
-										"flex items-center gap-2 whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium transition-colors shrink-0 focus:outline-none focus-visible:outline-none",
+										"h-auto shrink-0 gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:outline-none",
 										activeItem === item.value
 											? "bg-accent text-accent-foreground"
 											: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@@ -102,7 +105,7 @@ export function SettingsDialog({
 								>
 									{item.icon}
 									{item.label}
-								</button>
+								</Button>
 							))}
 						</div>
 					</div>
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 3581ac302..6b00408cb 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -407,9 +407,10 @@ export function LLMConfigForm({
 						<Separator />
 						<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
 							<CollapsibleTrigger asChild>
-								<button
+								<Button
 									type="button"
-									className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors"
+									variant="ghost"
+									className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 								>
 									<span>Advanced Parameters</span>
 									<ChevronDown
@@ -418,7 +419,7 @@ export function LLMConfigForm({
 											advancedOpen && "rotate-180"
 										)}
 									/>
-								</button>
+								</Button>
 							</CollapsibleTrigger>
 							<CollapsibleContent className="space-y-4 pt-2">
 								<FormField
@@ -445,9 +446,10 @@ export function LLMConfigForm({
 				<Separator />
 				<Collapsible open={systemInstructionsOpen} onOpenChange={setSystemInstructionsOpen}>
 					<CollapsibleTrigger asChild>
-						<button
+						<Button
 							type="button"
-							className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors"
+							variant="ghost"
+							className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
 						>
 							<span>System Instructions</span>
 							<ChevronDown
@@ -456,7 +458,7 @@ export function LLMConfigForm({
 									systemInstructionsOpen && "rotate-180"
 								)}
 							/>
-						</button>
+						</Button>
 					</CollapsibleTrigger>
 					<CollapsibleContent className="space-y-4 pt-2">
 						{/* System Instructions */}