diff --git a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
index 805d690c76..aba7a8844d 100644
--- a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
@@ -61,18 +61,12 @@ const ReasoningDisclosure: FC<{
 	return (
 		<div className="w-full">
 			{hasText ? (
-				<div
-					role="button"
-					tabIndex={0}
+				<button
+					type="button"
 					aria-expanded={isOpen}
 					aria-controls={id}
-					className="flex items-center gap-2 text-content-secondary transition-colors hover:text-content-primary cursor-pointer"
+					className="flex items-center gap-2 bg-transparent border-0 p-0 text-content-secondary transition-colors hover:text-content-primary cursor-pointer"
 					onClick={() => setIsOpen((prev) => !prev)}
-					onKeyDown={(event) => {
-						if (event.key === "Enter" || event.key === " ") {
-							setIsOpen((prev) => !prev);
-						}
-					}}
 				>
 					{labelContent}
 					<ChevronDownIcon
@@ -81,7 +75,7 @@ const ReasoningDisclosure: FC<{
 							isOpen ? "rotate-0" : "-rotate-90",
 						)}
 					/>
-				</div>
+				</button>
 			) : (
 				<div className="flex items-center gap-2 text-content-secondary transition-colors hover:text-content-primary">
 					{labelContent}
diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelForm.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelForm.tsx
index aa9193cd3f..6fbe00ef2a 100644
--- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelForm.tsx
+++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelForm.tsx
@@ -230,27 +230,14 @@ export const ModelForm: FC<ModelFormProps> = ({
 	if (!selectedProviderState || modelConfigsUnavailable) {
 		return (
 			<div>
-				<div
-					tabIndex={0}
-					role="button"
+				<button
+					type="button"
 					onClick={onCancel}
-					onKeyDown={(e) => {
-						if (e.key === "Enter") {
-							onCancel();
-							e.stopPropagation();
-						}
-					}}
-					onKeyUp={(e) => {
-						if (e.key === " ") {
-							onCancel();
-							e.stopPropagation();
-						}
-					}}
-					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
+					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
 				>
 					<ChevronLeftIcon className="h-4 w-4" />
 					Back
-				</div>{" "}
+				</button>{" "}
 				<h2 className="m-0 text-lg font-medium text-content-primary">
 					{isEditing ? "Edit Model" : "Add Model"}
 				</h2>
@@ -264,27 +251,14 @@ export const ModelForm: FC<ModelFormProps> = ({
 	if (!canManageModels && !isEditing) {
 		return (
 			<div>
-				<div
-					tabIndex={0}
-					role="button"
+				<button
+					type="button"
 					onClick={onCancel}
-					onKeyDown={(e) => {
-						if (e.key === "Enter") {
-							onCancel();
-							e.stopPropagation();
-						}
-					}}
-					onKeyUp={(e) => {
-						if (e.key === " ") {
-							onCancel();
-							e.stopPropagation();
-						}
-					}}
-					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
+					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
 				>
 					<ChevronLeftIcon className="h-4 w-4" />
 					Back
-				</div>
+				</button>
 				<h2 className="m-0 text-lg font-medium text-content-primary">
 					Add Model
 				</h2>{" "}
@@ -310,27 +284,15 @@ export const ModelForm: FC<ModelFormProps> = ({
 	return (
 		<div className="flex min-h-full flex-col">
 			{/* Back */}
-			<div
-				tabIndex={0}
-				role="button"
+			<button
+				type="button"
 				onClick={onCancel}
-				onKeyDown={(e) => {
-					if (e.key === "Enter") {
-						onCancel();
-						e.stopPropagation();
-					}
-				}}
-				onKeyUp={(e) => {
-					if (e.key === " ") {
-						onCancel();
-						e.stopPropagation();
-					}
-				}}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
+				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
 			>
 				<ChevronLeftIcon className="h-4 w-4" />
 				Back
-			</div>
+			</button>
+
 			{/* Header — editable display name */}
 			<div className="flex items-center gap-3">
 				{selectedProviderState && (
@@ -439,23 +401,10 @@ export const ModelForm: FC<ModelFormProps> = ({
 
 					{/* Advanced — toggle */}
 					<div>
-						<div
-							tabIndex={0}
-							role="button"
+						<button
+							type="button"
 							onClick={() => setShowAdvanced((v) => !v)}
-							onKeyDown={(e) => {
-								if (e.key === "Enter") {
-									setShowAdvanced((v) => !v);
-									e.stopPropagation();
-								}
-							}}
-							onKeyUp={(e) => {
-								if (e.key === " ") {
-									setShowAdvanced((v) => !v);
-									e.stopPropagation();
-								}
-							}}
-							className="inline-flex cursor-pointer items-center gap-1 text-sm font-medium text-content-secondary transition-colors hover:text-content-primary"
+							className="inline-flex cursor-pointer items-center gap-1 bg-transparent border-0 p-0 text-sm font-medium text-content-secondary transition-colors hover:text-content-primary"
 						>
 							{showAdvanced ? (
 								<ChevronDownIcon className="h-4 w-4" />
@@ -463,7 +412,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 								<ChevronRightIcon className="h-4 w-4" />
 							)}
 							Advanced
-						</div>{" "}
+						</button>{" "}
 						{showAdvanced && (
 							<div className="mt-4 space-y-5">
 								<div className="grid grid-cols-2 gap-3">
diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelsSection.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelsSection.tsx
index 88fd4b4e29..47228f788d 100644
--- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelsSection.tsx
+++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ModelsSection.tsx
@@ -194,28 +194,15 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 							{/* Star for default */}
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<div
-										tabIndex={0}
-										role="button"
+									<button
+										type="button"
 										onClick={(e) => {
 											e.stopPropagation();
 											handleSetDefault(modelConfig);
 										}}
-										onKeyDown={(e) => {
-											if (e.key === "Enter") {
-												e.stopPropagation();
-												handleSetDefault(modelConfig);
-											}
-										}}
-										onKeyUp={(e) => {
-											if (e.key === " ") {
-												e.stopPropagation();
-												handleSetDefault(modelConfig);
-											}
-										}}
 										aria-disabled={isUpdating || modelConfig.is_default}
 										className={cn(
-											"flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors",
+											"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-transparent border-0 p-0 transition-colors",
 											modelConfig.is_default
 												? "text-yellow-400"
 												: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
@@ -227,7 +214,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 												modelConfig.is_default && "fill-current",
 											)}
 										/>
-									</div>
+									</button>
 								</TooltipTrigger>
 								<TooltipContent side="right">
 									{modelConfig.is_default
@@ -236,25 +223,11 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 								</TooltipContent>
 							</Tooltip>
 							{/* Clickable row content */}
-							<div
-								tabIndex={0}
-								role="button"
+							<button
+								type="button"
 								onClick={() => setView({ mode: "edit", model: modelConfig })}
-								onKeyDown={(e) => {
-									if (e.key === "Enter") {
-										setView({ mode: "edit", model: modelConfig });
-										e.stopPropagation();
-									}
-								}}
-								onKeyUp={(e) => {
-									if (e.key === " ") {
-										setView({ mode: "edit", model: modelConfig });
-										e.stopPropagation();
-									}
-								}}
-								className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 transition-colors hover:opacity-80"
+								className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left transition-colors hover:opacity-80"
 							>
-								{" "}
 								<ProviderIcon
 									provider={modelConfig.provider}
 									className="h-8 w-8 shrink-0"
@@ -277,7 +250,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 									</Badge>
 								)}
 								<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
-							</div>{" "}
+							</button>{" "}
 						</div>
 					))}
 				</div>
diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProviderForm.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProviderForm.tsx
index a4c971db42..cf0d3dfad6 100644
--- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProviderForm.tsx
+++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProviderForm.tsx
@@ -155,27 +155,15 @@ export const ProviderForm: FC<ProviderFormProps> = ({
 	return (
 		<div className="flex min-h-full flex-col">
 			{/* Back */}
-			<div
-				tabIndex={0}
-				role="button"
+			<button
+				type="button"
 				onClick={onBack}
-				onKeyDown={(e) => {
-					if (e.key === "Enter") {
-						onBack();
-						e.stopPropagation();
-					}
-				}}
-				onKeyUp={(e) => {
-					if (e.key === " ") {
-						onBack();
-						e.stopPropagation();
-					}
-				}}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
+				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
 			>
 				<ChevronLeftIcon className="h-4 w-4" />
 				Back
-			</div>
+			</button>
+
 			{/* Provider header — editable name */}
 			<div className="flex items-center gap-3">
 				<ProviderIcon provider={provider} className="h-8 w-8" />
diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx
index 4f37a47562..a02cbcb1f8 100644
--- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx
+++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx
@@ -85,10 +85,9 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 			)}
 			<div>
 				{providerStates.map((providerState, i) => (
-					<div
+					<button
+						type="button"
 						key={providerState.provider}
-						tabIndex={0}
-						role="button"
 						aria-label={providerState.label}
 						onClick={() => {
 							onSelectedProviderChange(providerState.provider);
@@ -97,28 +96,8 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 								provider: providerState.provider,
 							});
 						}}
-						onKeyDown={(e) => {
-							if (e.key === "Enter") {
-								onSelectedProviderChange(providerState.provider);
-								setView({
-									mode: "detail",
-									provider: providerState.provider,
-								});
-								e.stopPropagation();
-							}
-						}}
-						onKeyUp={(e) => {
-							if (e.key === " ") {
-								onSelectedProviderChange(providerState.provider);
-								setView({
-									mode: "detail",
-									provider: providerState.provider,
-								});
-								e.stopPropagation();
-							}
-						}}
 						className={cn(
-							"flex cursor-pointer items-center gap-3.5 px-3 py-3 transition-colors hover:bg-surface-secondary/30",
+							"flex w-full cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 px-3 py-3 text-left transition-colors hover:bg-surface-secondary/30",
 							i > 0 && "border-0 border-t border-solid border-border/50",
 						)}
 					>
@@ -126,7 +105,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 							provider={providerState.provider}
 							className="h-8 w-8 shrink-0"
 						/>
-						<span className="min-w-0 flex-1 truncate text-[15px] font-medium text-content-primary">
+						<span className="min-w-0 flex-1 truncate text-[15px] font-medium text-content-primary text-left">
 							{providerState.label}
 						</span>
 						{providerState.hasEffectiveAPIKey ? (
@@ -135,7 +114,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 							<CircleIcon className="h-4 w-4 shrink-0 text-content-secondary opacity-40" />
 						)}
 						<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
-					</div>
+					</button>
 				))}{" "}
 			</div>
 		</>