diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 3f8f56f041a..b60f1533da3 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -172,11 +172,7 @@ function ComposerBannerStackAlert({
   const dismissOnly = item.onDismiss && !item.actions;
 
   return (
-    <Alert
-      variant={item.variant}
-      className={cn("alert-glass", item.className)}
-      data-variant={item.variant}
-    >
+    <Alert variant={item.variant} className={cn("alert-glass", item.className)}>
       {item.icon}
       <AlertTitle>{item.title}</AlertTitle>
       {item.description ? <AlertDescription>{item.description}</AlertDescription> : null}
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.test.tsx b/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
index 2a5bfe9ed3a..3d8a33360eb 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
@@ -41,7 +41,15 @@ describe("ProviderStatusBanner", () => {
 
     expect(markup).toContain('role="alert"');
     expect(markup).toContain('aria-label="Dismiss Codex provider warning"');
-    expect(markup).toContain("absolute top-2 right-2");
+  });
+
+  it("renders an opaque surface so the timeline behind it cannot read through", () => {
+    const markup = renderToStaticMarkup(
+      <ProviderStatusBanner status={warningProvider()} onDismiss={() => {}} />,
+    );
+
+    expect(markup).toContain("alert-glass");
+    expect(markup).toContain('data-variant="warning"');
   });
 
   it("labels error dismiss controls with the correct severity", () => {
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx
index a64a94bc1c3..957fe8c9049 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx
@@ -3,6 +3,8 @@ import { memo } from "react";
 import { InfoIcon, XIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { formatProviderDriverKindLabel } from "../../providerModels";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../ui/alert";
+import { Button } from "../ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
 export function getProviderStatusBannerKey(status: ServerProvider | null): string | null {
@@ -31,6 +33,7 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
   }
 
   const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
+  const variant = status.status === "warning" ? "warning" : "error";
   const isUnauthenticated = status.status === "error" && status.auth.status === "unauthenticated";
   const title = isUnauthenticated
     ? `${providerName} is unauthenticated`
@@ -44,36 +47,34 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
 
   return (
     <div className="pointer-events-auto mx-auto w-fit max-w-[calc(100%-2rem)] pt-3">
-      <div
-        className={cn(
-          "relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",
-          status.status === "warning"
-            ? "border-warning/32 bg-warning/4 [&_svg]:text-warning"
-            : "border-destructive/32 bg-destructive/4 text-destructive-foreground [&_svg]:text-destructive",
-        )}
-        role="alert"
-      >
-        <InfoIcon className="size-4 shrink-0" aria-hidden />
-        <div className="flex min-w-0 flex-col gap-1">
-          <div className="font-medium">{title}</div>
+      <Alert variant={variant} className="alert-glass">
+        <InfoIcon aria-hidden />
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>
           <Tooltip>
-            <TooltipTrigger
-              render={<div className="line-clamp-3 text-muted-foreground">{message}</div>}
-            />
+            <TooltipTrigger render={<div className="line-clamp-3">{message}</div>} />
             <TooltipPopup side="top" className="max-w-96 whitespace-pre-wrap">
               {message}
             </TooltipPopup>
           </Tooltip>
-        </div>
-        <button
-          type="button"
-          aria-label={`Dismiss ${providerName} provider ${status.status}`}
-          className="absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-foreground/8 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-          onClick={onDismiss}
-        >
-          <XIcon aria-hidden className="size-3.5" />
-        </button>
-      </div>
+        </AlertDescription>
+        <AlertAction>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            aria-label={`Dismiss ${providerName} provider ${status.status}`}
+            onClick={onDismiss}
+          >
+            <XIcon
+              aria-hidden
+              className={cn(
+                "size-3.5",
+                variant === "warning" ? "text-warning" : "text-destructive",
+              )}
+            />
+          </Button>
+        </AlertAction>
+      </Alert>
     </div>
   );
 });
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 20be44dd3e5..c2b8c5ea0d7 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -68,6 +68,7 @@ function Alert({
     <div
       className={cn(alertVariants({ variant }), className)}
       data-slot="alert"
+      data-variant={variant ?? "default"}
       role="alert"
       {...props}
     >