diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
index 044bb5565..a4f145e06 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
@@ -70,23 +70,21 @@ export const BaiduSearchApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSu
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You'll need a Baidu AppBuilder API key to use this connector. You can get one by signing
-						up at{" "}
-						<a
-							href="https://qianfan.cloud.baidu.com/"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							qianfan.cloud.baidu.com
-						</a>
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a Baidu AppBuilder API key to use this connector. You can get one by signing
+					up at{" "}
+					<a
+						href="https://qianfan.cloud.baidu.com/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4"
+					>
+						qianfan.cloud.baidu.com
+					</a>
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
index 65edb095c..b2a6b0b25 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
@@ -96,15 +96,13 @@ export const BookStackConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You'll need a BookStack API Token to use this connector. You can create one from your
-						BookStack instance settings.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a BookStack API Token to use this connector. You can create one from your
+					BookStack instance settings.
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
index 625856e46..c23dfcf03 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
@@ -64,15 +64,13 @@ export const CirclebackConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmit
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Webhook className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">Webhook-Based Integration</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						Circleback uses webhooks to automatically send meeting data. After connecting, you'll
-						receive a webhook URL to configure in your Circleback settings.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Webhook className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">Webhook-Based Integration</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Circleback uses webhooks to automatically send meeting data. After connecting, you'll
+					receive a webhook URL to configure in your Circleback settings.
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
index 95b93cd20..b3298cbe0 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
@@ -172,14 +172,12 @@ export const ElasticsearchConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSub
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						Enter your Elasticsearch cluster endpoint URL and authentication credentials to connect.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Enter your Elasticsearch cluster endpoint URL and authentication credentials to connect.
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
index 9d0ef2c45..68d5ef5fb 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
@@ -105,24 +105,21 @@ export const GithubConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">Personal Access Token (Optional)</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						A GitHub PAT is only required for private repositories. Public repos work without a
-						token.{" "}
-						<a
-							href="https://github.com/settings/tokens/new?description=surfsense&scopes=repo"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4 inline-flex items-center gap-1.5"
-						>
-							Get your token
-							<ExternalLink className="h-3 w-3 sm:h-4 sm:w-4" />
-						</a>{" "}
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">Personal Access Token (Optional)</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					A GitHub PAT is only required for private repositories. Public repos work without a token.{" "}
+					<a
+						href="https://github.com/settings/tokens/new?description=surfsense&scopes=repo"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4 inline-flex items-center gap-1.5"
+					>
+						Get your token
+						<ExternalLink className="h-3 w-3 sm:h-4 sm:w-4" />
+					</a>{" "}
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
index 7c4ff0a46..b9771e95a 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
@@ -70,22 +70,20 @@ export const LinkupApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You'll need a Linkup API key to use this connector. You can get one by signing up at{" "}
-						<a
-							href="https://linkup.so"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							linkup.so
-						</a>
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a Linkup API key to use this connector. You can get one by signing up at{" "}
+					<a
+						href="https://linkup.so"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4"
+					>
+						linkup.so
+					</a>
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
index 63be3cc93..13cc7efe1 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
@@ -88,22 +88,20 @@ export const LumaConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting }
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You'll need a Luma API Key to use this connector. You can create one from{" "}
-						<a
-							href="https://lu.ma/api"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							Luma API Settings
-						</a>
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a Luma API Key to use this connector. You can create one from{" "}
+					<a
+						href="https://lu.ma/api"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4"
+					>
+						Luma API Settings
+					</a>
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
index 9ece079f3..2a5bb2121 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
@@ -136,7 +136,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 [&>svg]:top-2 sm:[&>svg]:top-3">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
 				<Server className="h-4 w-4 shrink-0" />
 				<AlertDescription className="text-[10px] sm:text-xs">
 					Connect to an MCP (Model Context Protocol) server. Each MCP server is added as a separate
@@ -230,55 +230,51 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 							) : (
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
-							<div className="flex-1">
-								<div className="flex items-center justify-between">
-									<AlertTitle className="text-sm">
-										{testResult.status === "success"
-											? "Connection Successful"
-											: "Connection Failed"}
-									</AlertTitle>
-									{testResult.tools.length > 0 && (
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											className="h-6 px-2 self-start sm:self-auto text-xs"
-											onClick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												setShowDetails(!showDetails);
-											}}
-										>
-											{showDetails ? (
-												<>
-													<ChevronUp className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Hide Details</span>
-													<span className="sm:hidden">Hide</span>
-												</>
-											) : (
-												<>
-													<ChevronDown className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Show Details</span>
-													<span className="sm:hidden">Show</span>
-												</>
-											)}
-										</Button>
-									)}
-								</div>
-								<AlertDescription className="text-[10px] sm:text-xs mt-1">
-									{testResult.message}
-									{showDetails && testResult.tools.length > 0 && (
-										<div className="mt-3 pt-3 border-t border-green-500/20">
-											<p className="font-semibold mb-2">Available tools:</p>
-											<ul className="list-disc list-inside text-xs space-y-0.5">
-												{testResult.tools.map((tool, i) => (
-													<li key={i}>{tool.name}</li>
-												))}
-											</ul>
-										</div>
-									)}
-								</AlertDescription>
+							<div className="col-start-2 flex items-center justify-between">
+								<AlertTitle className="text-sm">
+									{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+								</AlertTitle>
+								{testResult.tools.length > 0 && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 self-start sm:self-auto text-xs"
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											setShowDetails(!showDetails);
+										}}
+									>
+										{showDetails ? (
+											<>
+												<ChevronUp className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Hide Details</span>
+												<span className="sm:hidden">Hide</span>
+											</>
+										) : (
+											<>
+												<ChevronDown className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Show Details</span>
+												<span className="sm:hidden">Show</span>
+											</>
+										)}
+									</Button>
+								)}
 							</div>
+							<AlertDescription className="text-[10px] sm:text-xs mt-1">
+								{testResult.message}
+								{showDetails && testResult.tools.length > 0 && (
+									<div className="mt-3 pt-3 border-t border-green-500/20">
+										<p className="font-semibold mb-2">Available tools:</p>
+										<ul className="list-disc list-inside text-xs space-y-0.5">
+											{testResult.tools.map((tool, i) => (
+												<li key={i}>{tool.name}</li>
+											))}
+										</ul>
+									</div>
+								)}
+							</AlertDescription>
 						</Alert>
 					)}
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/obsidian-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/obsidian-connect-form.tsx
index 3c4b64090..08c1dd30c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/obsidian-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/obsidian-connect-form.tsx
@@ -102,15 +102,13 @@ export const ObsidianConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitti
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-purple-500/10 dark:bg-purple-500/10 border-purple-500/30 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1 text-purple-500" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">Self-Hosted Only</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs pl-0!">
-						This connector requires direct file system access and only works with self-hosted
-						SurfSense installations.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-purple-500/10 dark:bg-purple-500/10 border-purple-500/30 p-2 sm:p-3">
+				<Info className="size-4 shrink-0 text-purple-500" />
+				<AlertTitle className="text-xs sm:text-sm">Self-Hosted Only</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					This connector requires direct file system access and only works with self-hosted
+					SurfSense installations.
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
index ecf219924..5ff54fb9e 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
@@ -123,23 +123,21 @@ export const SearxngConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmittin
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">SearxNG Instance Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You need access to a running SearxNG instance. Refer to the{" "}
-						<a
-							href="https://docs.searxng.org/admin/installation-docker.html"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							SearxNG installation guide
-						</a>{" "}
-						for setup instructions. If your instance requires an API key, include it below.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">SearxNG Instance Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You need access to a running SearxNG instance. Refer to the{" "}
+					<a
+						href="https://docs.searxng.org/admin/installation-docker.html"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4"
+					>
+						SearxNG installation guide
+					</a>{" "}
+					for setup instructions. If your instance requires an API key, include it below.
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
index a8032e11a..57d183d44 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
@@ -70,22 +70,20 @@ export const TavilyApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						You'll need a Tavily API key to use this connector. You can get one by signing up at{" "}
-						<a
-							href="https://tavily.com"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							tavily.com
-						</a>
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a Tavily API key to use this connector. You can get one by signing up at{" "}
+					<a
+						href="https://tavily.com"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4"
+					>
+						tavily.com
+					</a>
+				</AlertDescription>
 			</Alert>
 
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
index 568b47d09..3ab9cba53 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
@@ -166,7 +166,7 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({ connector, onNameC
 					<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
 						<Info className="h-3 w-3 sm:h-4 sm:w-4" />
 						<AlertTitle className="text-xs sm:text-sm">Configuration Instructions</AlertTitle>
-						<AlertDescription className="text-[10px] sm:text-xs !pl-0 mt-1">
+						<AlertDescription className="text-[10px] sm:text-xs mt-1">
 							Configure this URL in Circleback Settings → Automations → Create automation → Send
 							webhook request. The webhook will automatically send meeting notes, transcripts, and
 							action items to this search space.
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
index ac450677e..38d60d7bd 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
@@ -235,55 +235,51 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							) : (
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
-							<div className="flex-1">
-								<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
-									<AlertTitle className="text-sm">
-										{testResult.status === "success"
-											? "Connection Successful"
-											: "Connection Failed"}
-									</AlertTitle>
-									{testResult.tools.length > 0 && (
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											className="h-6 px-2 self-start sm:self-auto text-xs"
-											onClick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												setShowDetails(!showDetails);
-											}}
-										>
-											{showDetails ? (
-												<>
-													<ChevronUp className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Hide Details</span>
-													<span className="sm:hidden">Hide</span>
-												</>
-											) : (
-												<>
-													<ChevronDown className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Show Details</span>
-													<span className="sm:hidden">Show</span>
-												</>
-											)}
-										</Button>
-									)}
-								</div>
-								<AlertDescription className="text-xs mt-1">
-									{testResult.message}
-									{showDetails && testResult.tools.length > 0 && (
-										<div className="mt-3 pt-3 border-t border-green-500/20">
-											<p className="font-semibold mb-2">Available tools:</p>
-											<ul className="list-disc list-inside text-xs space-y-0.5">
-												{testResult.tools.map((tool) => (
-													<li key={tool.name}>{tool.name}</li>
-												))}
-											</ul>
-										</div>
-									)}
-								</AlertDescription>
+							<div className="col-start-2 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
+								<AlertTitle className="text-sm">
+									{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+								</AlertTitle>
+								{testResult.tools.length > 0 && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 self-start sm:self-auto text-xs"
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											setShowDetails(!showDetails);
+										}}
+									>
+										{showDetails ? (
+											<>
+												<ChevronUp className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Hide Details</span>
+												<span className="sm:hidden">Hide</span>
+											</>
+										) : (
+											<>
+												<ChevronDown className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Show Details</span>
+												<span className="sm:hidden">Show</span>
+											</>
+										)}
+									</Button>
+								)}
 							</div>
+							<AlertDescription className="text-xs mt-1">
+								{testResult.message}
+								{showDetails && testResult.tools.length > 0 && (
+									<div className="mt-3 pt-3 border-t border-green-500/20">
+										<p className="font-semibold mb-2">Available tools:</p>
+										<ul className="list-disc list-inside text-xs space-y-0.5">
+											{testResult.tools.map((tool) => (
+												<li key={tool.name}>{tool.name}</li>
+											))}
+										</ul>
+									</div>
+								)}
+							</AlertDescription>
 						</Alert>
 					)}
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
index 446c08857..164d78e09 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
@@ -124,9 +124,9 @@ export const WebcrawlerConfig: FC<ConnectorConfigProps> = ({ connector, onConfig
 			</div>
 
 			{/* Info Alert */}
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center gap-2 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
-				<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs">
 					Configuration is saved when you start indexing. You can update these settings anytime from
 					the connector management page.
 				</AlertDescription>
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index cf7bb5671..456af05f2 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -348,7 +348,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 
 			{/* Global info */}
 			{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
-				<Alert className="flex flex-row items-center gap-2 bg-muted/50 py-3 [&>svg]:static [&>svg+div]:translate-y-0 [&>svg~*]:pl-0">
+				<Alert className="bg-muted/50 py-3">
 					<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 					<AlertDescription className="text-xs md:text-sm">
 						<span className="font-medium">
diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx
index 30db47801..6817b19db 100644
--- a/surfsense_web/components/sources/DocumentUploadTab.tsx
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@@ -254,7 +254,7 @@ export function DocumentUploadTab({
 
 	return (
 		<div className="space-y-3 sm:space-y-6 max-w-4xl mx-auto pt-0">
-			<Alert className="border border-border bg-slate-400/5 dark:bg-white/5 flex items-start gap-3 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg~*]:pl-0">
+			<Alert className="border border-border bg-slate-400/5 dark:bg-white/5">
 				<Info className="h-4 w-4 shrink-0 mt-0.5" />
 				<AlertDescription className="text-xs sm:text-sm leading-relaxed pt-0.5">
 					{t("file_size_limit")}{" "}
diff --git a/surfsense_web/components/ui/alert.tsx b/surfsense_web/components/ui/alert.tsx
index 21ee71c69..450b60285 100644
--- a/surfsense_web/components/ui/alert.tsx
+++ b/surfsense_web/components/ui/alert.tsx
@@ -1,15 +1,16 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
+
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-	"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 	{
 		variants: {
 			variant: {
-				default: "bg-background text-foreground",
+				default: "bg-card text-card-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -18,31 +19,42 @@ const alertVariants = cva(
 	}
 );
 
-const Alert = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-	<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-	({ className, ...props }, ref) => (
-		<h5
-			ref={ref}
-			className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
 			{...props}
 		/>
-	)
-);
-AlertTitle.displayName = "AlertTitle";
+	);
+}
 
-const AlertDescription = React.forwardRef<
-	HTMLParagraphElement,
-	React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
 
 export { Alert, AlertTitle, AlertDescription };