diff --git a/ui-react/apps/console/src/components/common/Alert.tsx b/ui-react/apps/console/src/components/common/Alert.tsx
new file mode 100644
index 00000000000..e023d0be18b
--- /dev/null
+++ b/ui-react/apps/console/src/components/common/Alert.tsx
@@ -0,0 +1,103 @@
+import { ReactNode } from "react";
+import {
+  ExclamationCircleIcon,
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+export type AlertVariant = "error" | "success" | "warning" | "info";
+
+interface AlertProps {
+  /** Visual and semantic variant. Controls color, icon, role, and aria-live. */
+  variant: AlertVariant;
+
+  /** Alert body — plain string or rich JSX. */
+  children: ReactNode;
+
+  /** When provided, renders a dismiss button (XMark). The parent owns visibility state. */
+  onDismiss?: () => void;
+
+  /** Layout overrides only — margins, display mode. Don't override color or typography. */
+  className?: string;
+}
+
+type IconComponent = (props: { className?: string; strokeWidth?: number }) => React.ReactElement | null;
+
+type VariantConfig = {
+  bg: string;
+  border: string;
+  text: string;
+  Icon: IconComponent;
+  role: "alert" | "status";
+  ariaLive: "assertive" | "polite";
+};
+
+const VARIANT: Record<AlertVariant, VariantConfig> = {
+  error: {
+    bg: "bg-accent-red/8",
+    border: "border-accent-red/20",
+    text: "text-accent-red",
+    Icon: ExclamationCircleIcon as IconComponent,
+    role: "alert",
+    ariaLive: "assertive",
+  },
+  success: {
+    bg: "bg-accent-green/8",
+    border: "border-accent-green/20",
+    text: "text-accent-green",
+    Icon: CheckCircleIcon as IconComponent,
+    role: "status",
+    ariaLive: "polite",
+  },
+  warning: {
+    bg: "bg-accent-yellow/8",
+    border: "border-accent-yellow/20",
+    text: "text-accent-yellow",
+    Icon: ExclamationTriangleIcon as IconComponent,
+    role: "alert",
+    ariaLive: "assertive",
+  },
+  info: {
+    bg: "bg-accent-blue/8",
+    border: "border-accent-blue/20",
+    text: "text-accent-blue",
+    Icon: InformationCircleIcon as IconComponent,
+    role: "status",
+    ariaLive: "polite",
+  },
+};
+
+export default function Alert({ variant, children, onDismiss, className }: AlertProps) {
+  const { bg, border, text, Icon, role, ariaLive } = VARIANT[variant];
+
+  return (
+    <div
+      role={role}
+      aria-live={ariaLive}
+      className={[
+        "flex items-center gap-2 border px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down",
+        bg,
+        border,
+        text,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <Icon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
+      <span className="flex-1 min-w-0">{children}</span>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label="Dismiss alert"
+          onClick={onDismiss}
+          className="ml-1 hover:opacity-70 transition-opacity shrink-0 -mr-0.5"
+        >
+          <XMarkIcon className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/ui-react/apps/console/src/components/common/__tests__/Alert.test.tsx b/ui-react/apps/console/src/components/common/__tests__/Alert.test.tsx
new file mode 100644
index 00000000000..30f3b1fe515
--- /dev/null
+++ b/ui-react/apps/console/src/components/common/__tests__/Alert.test.tsx
@@ -0,0 +1,197 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Alert, { type AlertVariant } from "@/components/common/Alert";
+
+describe("Alert", () => {
+  describe("variant rendering", () => {
+    it.each<[AlertVariant, string]>([
+      ["error", "bg-accent-red/8"],
+      ["success", "bg-accent-green/8"],
+      ["warning", "bg-accent-yellow/8"],
+      ["info", "bg-accent-blue/8"],
+    ])("variant=%s applies the correct background class", (variant, expected) => {
+      const { container } = render(
+        <Alert variant={variant}>message</Alert>,
+      );
+      expect((container.firstChild as HTMLElement).className).toContain(expected);
+    });
+
+    it.each<[AlertVariant, string]>([
+      ["error", "border-accent-red/20"],
+      ["success", "border-accent-green/20"],
+      ["warning", "border-accent-yellow/20"],
+      ["info", "border-accent-blue/20"],
+    ])("variant=%s applies the correct border class", (variant, expected) => {
+      const { container } = render(
+        <Alert variant={variant}>message</Alert>,
+      );
+      expect((container.firstChild as HTMLElement).className).toContain(expected);
+    });
+
+    it.each<[AlertVariant, string]>([
+      ["error", "text-accent-red"],
+      ["success", "text-accent-green"],
+      ["warning", "text-accent-yellow"],
+      ["info", "text-accent-blue"],
+    ])("variant=%s applies the correct text class", (variant, expected) => {
+      const { container } = render(
+        <Alert variant={variant}>message</Alert>,
+      );
+      expect((container.firstChild as HTMLElement).className).toContain(expected);
+    });
+  });
+
+  describe("semantic roles", () => {
+    it("error variant uses role=alert and aria-live=assertive", () => {
+      const { container } = render(<Alert variant="error">Error</Alert>);
+      const el = container.firstChild as HTMLElement;
+      expect(el).toHaveAttribute("role", "alert");
+      expect(el).toHaveAttribute("aria-live", "assertive");
+    });
+
+    it("warning variant uses role=alert and aria-live=assertive", () => {
+      const { container } = render(<Alert variant="warning">Warning</Alert>);
+      const el = container.firstChild as HTMLElement;
+      expect(el).toHaveAttribute("role", "alert");
+      expect(el).toHaveAttribute("aria-live", "assertive");
+    });
+
+    it("success variant uses role=status and aria-live=polite", () => {
+      const { container } = render(<Alert variant="success">Success</Alert>);
+      const el = container.firstChild as HTMLElement;
+      expect(el).toHaveAttribute("role", "status");
+      expect(el).toHaveAttribute("aria-live", "polite");
+    });
+
+    it("info variant uses role=status and aria-live=polite", () => {
+      const { container } = render(<Alert variant="info">Info</Alert>);
+      const el = container.firstChild as HTMLElement;
+      expect(el).toHaveAttribute("role", "status");
+      expect(el).toHaveAttribute("aria-live", "polite");
+    });
+  });
+
+  describe("content rendering", () => {
+    it("renders plain string children", () => {
+      render(<Alert variant="error">Something went wrong</Alert>);
+      expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    });
+
+    it("renders ReactNode children with nested elements", () => {
+      render(
+        <Alert variant="error">
+          <span>Error: <strong>field required</strong></span>
+        </Alert>,
+      );
+      expect(screen.getByText(/field required/)).toBeInTheDocument();
+    });
+
+    it("is findable via its role", () => {
+      render(<Alert variant="error">Error message</Alert>);
+      expect(screen.getByRole("alert")).toBeInTheDocument();
+    });
+
+    it("is findable via role=status for success", () => {
+      render(<Alert variant="success">Saved successfully</Alert>);
+      expect(screen.getByRole("status")).toBeInTheDocument();
+    });
+  });
+
+  describe("icon rendering", () => {
+    it("renders an icon SVG for every variant", () => {
+      const { container } = render(<Alert variant="error">msg</Alert>);
+      expect(container.querySelector("svg")).not.toBeNull();
+    });
+
+    it.each<AlertVariant>(["error", "success", "warning", "info"])(
+      "renders exactly one icon for variant=%s",
+      (variant) => {
+        const { container } = render(<Alert variant={variant}>msg</Alert>);
+        expect(container.querySelectorAll("svg")).toHaveLength(1);
+      },
+    );
+  });
+
+  describe("dismiss behavior", () => {
+    it("does not render a dismiss button when onDismiss is not provided", () => {
+      render(<Alert variant="error">Error</Alert>);
+      expect(
+        screen.queryByRole("button", { name: /dismiss/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders a dismiss button when onDismiss is provided", () => {
+      render(
+        <Alert variant="error" onDismiss={() => {}}>
+          Error
+        </Alert>,
+      );
+      expect(
+        screen.getByRole("button", { name: "Dismiss alert" }),
+      ).toBeInTheDocument();
+    });
+
+    it("calls onDismiss when the dismiss button is clicked", async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(
+        <Alert variant="error" onDismiss={onDismiss}>
+          Error
+        </Alert>,
+      );
+      await user.click(screen.getByRole("button", { name: "Dismiss alert" }));
+      expect(onDismiss).toHaveBeenCalledOnce();
+    });
+
+    it("dismiss button has type=button to avoid form submission", () => {
+      render(
+        <Alert variant="error" onDismiss={() => {}}>
+          Error
+        </Alert>,
+      );
+      const btn = screen.getByRole("button", { name: "Dismiss alert" });
+      expect(btn).toHaveAttribute("type", "button");
+    });
+  });
+
+  describe("className pass-through", () => {
+    it("appends extra className to the root element", () => {
+      const { container } = render(
+        <Alert variant="error" className="mb-4">
+          Error
+        </Alert>,
+      );
+      expect((container.firstChild as HTMLElement).className).toContain("mb-4");
+    });
+
+    it("preserves built-in classes when className is provided", () => {
+      const { container } = render(
+        <Alert variant="error" className="mb-4">
+          Error
+        </Alert>,
+      );
+      const cls = (container.firstChild as HTMLElement).className;
+      expect(cls).toContain("rounded-md");
+      expect(cls).toContain("font-mono");
+    });
+
+    it("renders without errors when className is undefined", () => {
+      expect(() =>
+        render(<Alert variant="success">OK</Alert>),
+      ).not.toThrow();
+    });
+  });
+
+  describe("base styling", () => {
+    it("always applies the compact inline layout classes", () => {
+      const { container } = render(<Alert variant="info">msg</Alert>);
+      const cls = (container.firstChild as HTMLElement).className;
+      expect(cls).toContain("flex items-center gap-2");
+      expect(cls).toContain("px-3.5 py-2.5");
+      expect(cls).toContain("rounded-md");
+      expect(cls).toContain("text-xs font-mono");
+      expect(cls).toContain("animate-slide-down");
+    });
+  });
+});
diff --git a/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx b/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
index 3cea5846438..57d835f2521 100644
--- a/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
+++ b/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
@@ -1,6 +1,7 @@
 import { useState, FormEvent } from "react";
 import { ExclamationTriangleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
 import { disableMfa } from "@/client";
+import Alert from "@/components/common/Alert";
 import { useOtpInput } from "@/hooks/useOtpInput";
 import { useAuthStore } from "@/stores/authStore";
 import Spinner from "@/components/common/Spinner";
@@ -129,15 +130,7 @@ export default function MfaDisableDialog({
         </div>
 
         <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
-          {error && (
-            <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono">
-              <ExclamationTriangleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
           {mode === "totp" ? (
             <>
diff --git a/ui-react/apps/console/src/components/mfa/MfaEnableDrawer.tsx b/ui-react/apps/console/src/components/mfa/MfaEnableDrawer.tsx
index 73696452c9c..f47f0cca2e6 100644
--- a/ui-react/apps/console/src/components/mfa/MfaEnableDrawer.tsx
+++ b/ui-react/apps/console/src/components/mfa/MfaEnableDrawer.tsx
@@ -2,9 +2,9 @@ import { useState, FormEvent, useEffect, useRef } from "react";
 import {
   ShieldCheckIcon,
   CheckCircleIcon,
-  ExclamationCircleIcon,
   EnvelopeIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import Drawer from "../common/Drawer";
 import CheckboxField from "@/components/common/fields/CheckboxField";
 import { QRCodeDisplay } from "./QRCodeDisplay";
@@ -249,15 +249,7 @@ export default function MfaEnableDrawer({
       }
     >
       <div className="space-y-5">
-        {error && (
-          <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-            <ExclamationCircleIcon
-              className="w-3.5 h-3.5 shrink-0"
-              strokeWidth={2}
-            />
-            {error}
-          </div>
-        )}
+        {error && <Alert variant="error">{error}</Alert>}
 
         {/* Step 1: Recovery Email */}
         {step === 1 && (
diff --git a/ui-react/apps/console/src/pages/ConfirmAccount.tsx b/ui-react/apps/console/src/pages/ConfirmAccount.tsx
index fe304a5c829..48f261b8cc8 100644
--- a/ui-react/apps/console/src/pages/ConfirmAccount.tsx
+++ b/ui-react/apps/console/src/pages/ConfirmAccount.tsx
@@ -1,10 +1,7 @@
 import { useEffect } from "react";
 import { Link, Navigate, useSearchParams } from "react-router-dom";
-import {
-  EnvelopeIcon,
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-} from "@heroicons/react/24/outline";
+import { EnvelopeIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useSignUpStore } from "../stores/signUpStore";
 import { useResendEmail } from "../hooks/useResendEmail";
 import Spinner from "@/components/common/Spinner";
@@ -44,17 +41,15 @@ export default function ConfirmAccount() {
         </p>
 
         {resendSuccess && (
-          <div role="status" className="flex items-center gap-2 bg-accent-green/8 border border-accent-green/20 text-accent-green px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down mb-4">
-            <CheckCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
+          <Alert variant="success" className="mb-4">
             Confirmation email sent successfully.
-          </div>
+          </Alert>
         )}
 
         {resendError && (
-          <div role="alert" className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down mb-4">
-            <ExclamationCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
+          <Alert variant="error" className="mb-4">
             {resendError}
-          </div>
+          </Alert>
         )}
 
         <button
diff --git a/ui-react/apps/console/src/pages/Login.tsx b/ui-react/apps/console/src/pages/Login.tsx
index ab865f3e2c2..b3a6e62d11b 100644
--- a/ui-react/apps/console/src/pages/Login.tsx
+++ b/ui-react/apps/console/src/pages/Login.tsx
@@ -7,11 +7,10 @@ import {
   useSearchParams,
 } from "react-router-dom";
 import {
-  ExclamationCircleIcon,
-  CheckCircleIcon,
   LockClosedIcon,
   ArrowRightEndOnRectangleIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAuthStore } from "../stores/authStore";
 import { getConfig } from "../env";
 import { getSafeRedirect } from "../utils/navigation";
@@ -234,55 +233,26 @@ export default function Login() {
         (!!error && !lockoutExpired)) && (
         <div className="w-full max-w-sm flex flex-col gap-3 mb-4">
           {lockoutExpired && (
-            <div className="flex items-center gap-2 bg-accent-green/8 border border-accent-green/20 text-accent-green px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-              <CheckCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
+            <Alert variant="success">
               Your timeout has finished. Please try to log back in.
-            </div>
-          )}
-          {notice && (
-            <div
-              role="alert"
-              className="flex items-center gap-2 bg-accent-green/8 border border-accent-green/20 text-accent-green px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down"
-            >
-              <CheckCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
-              {notice}
-            </div>
+            </Alert>
           )}
+          {notice && <Alert variant="success">{notice}</Alert>}
           {missingAssertions && (
-            <div
-              role="alert"
-              className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down"
-            >
-              <ExclamationCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
+            <Alert variant="error">
               The SSO configuration is incomplete due to missing required
               mappings. Please contact your administrator.
-            </div>
+            </Alert>
           )}
           {error && !lockoutExpired && (
-            <div
-              role="alert"
-              className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down"
-            >
-              <ExclamationCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
+            <Alert variant="error">
               <span>
                 {error}
                 {countdownDisplay && (
                   <span className="font-semibold"> ({countdownDisplay})</span>
                 )}
               </span>
-            </div>
+            </Alert>
           )}
         </div>
       )}
diff --git a/ui-react/apps/console/src/pages/MfaLogin.tsx b/ui-react/apps/console/src/pages/MfaLogin.tsx
index b45d870b3ef..bf079c49f1b 100644
--- a/ui-react/apps/console/src/pages/MfaLogin.tsx
+++ b/ui-react/apps/console/src/pages/MfaLogin.tsx
@@ -1,14 +1,12 @@
 import { FormEvent, useEffect } from "react";
 import { useNavigate, Link, useLocation } from "react-router-dom";
-import {
-  ExclamationCircleIcon,
-  ShieldCheckIcon,
-} from "@heroicons/react/24/outline";
+import { ShieldCheckIcon } from "@heroicons/react/24/outline";
 import { useAuthStore } from "../stores/authStore";
 import { useOtpInput } from "../hooks/useOtpInput";
 import { getSafeRedirect } from "../utils/navigation";
 import AuthFooterLinks from "../components/common/AuthFooterLinks";
 import Spinner from "@/components/common/Spinner";
+import Alert from "@/components/common/Alert";
 
 export default function MfaLogin() {
   const otp = useOtpInput(6);
@@ -73,15 +71,7 @@ export default function MfaLogin() {
         style={{ animationDelay: "200ms" }}
       >
         <form onSubmit={(e) => void handleSubmit(e)} className="space-y-5">
-          {error && (
-            <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-              <ExclamationCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
           <div>
             <label className="block text-2xs font-mono font-semibold uppercase tracking-label text-text-muted mb-3 text-center">
diff --git a/ui-react/apps/console/src/pages/MfaRecover.tsx b/ui-react/apps/console/src/pages/MfaRecover.tsx
index d191ef4c3d7..96f69ca5454 100644
--- a/ui-react/apps/console/src/pages/MfaRecover.tsx
+++ b/ui-react/apps/console/src/pages/MfaRecover.tsx
@@ -1,6 +1,7 @@
 import { useState, FormEvent, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { ExclamationCircleIcon, KeyIcon } from "@heroicons/react/24/outline";
+import { KeyIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAuthStore } from "../stores/authStore";
 import { disableMfa } from "../client";
 import MfaRecoveryTimeoutModal from "../components/mfa/MfaRecoveryTimeoutModal";
@@ -102,15 +103,7 @@ export default function MfaRecover() {
         style={{ animationDelay: "200ms" }}
       >
         <form onSubmit={(e) => void handleSubmit(e)} className="space-y-5">
-          {error && (
-            <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-              <ExclamationCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
           <div>
             <label
diff --git a/ui-react/apps/console/src/pages/MfaResetComplete.tsx b/ui-react/apps/console/src/pages/MfaResetComplete.tsx
index 8fe5546914b..f489d4d6f9e 100644
--- a/ui-react/apps/console/src/pages/MfaResetComplete.tsx
+++ b/ui-react/apps/console/src/pages/MfaResetComplete.tsx
@@ -1,6 +1,7 @@
 import { FormEvent, useState } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { ShieldCheckIcon, ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { resetMfa } from "../client";
 import { useAuthStore } from "../stores/authStore";
 import { useOtpInput } from "../hooks/useOtpInput";
@@ -107,12 +108,7 @@ export default function MfaResetComplete() {
         style={{ animationDelay: "200ms" }}
       >
         <form onSubmit={(e) => void handleSubmit(e)} className="space-y-5">
-          {error && (
-            <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-              <ExclamationCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
           {/* Main Email Code */}
           <div>
diff --git a/ui-react/apps/console/src/pages/MfaResetRequest.tsx b/ui-react/apps/console/src/pages/MfaResetRequest.tsx
index 642b7e3615f..26cc8146cdb 100644
--- a/ui-react/apps/console/src/pages/MfaResetRequest.tsx
+++ b/ui-react/apps/console/src/pages/MfaResetRequest.tsx
@@ -1,6 +1,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { EnvelopeIcon, ExclamationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
+import { EnvelopeIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAuthStore } from "../stores/authStore";
 import AuthFooterLinks from "../components/common/AuthFooterLinks";
 import Spinner from "@/components/common/Spinner";
@@ -67,12 +68,7 @@ export default function MfaResetRequest() {
       >
         {!emailsSent ? (
           <form onSubmit={(e) => void handleSubmit(e)} className="space-y-5">
-            {error && (
-              <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-                <ExclamationCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
-                {error}
-              </div>
-            )}
+            {error && <Alert variant="error">{error}</Alert>}
 
             <div className="p-4 bg-primary/5 border border-primary/20 rounded-lg">
               <p className="text-xs text-text-muted text-center">
diff --git a/ui-react/apps/console/src/pages/MfaResetVerify.tsx b/ui-react/apps/console/src/pages/MfaResetVerify.tsx
index 4d67052578f..10ecd835f23 100644
--- a/ui-react/apps/console/src/pages/MfaResetVerify.tsx
+++ b/ui-react/apps/console/src/pages/MfaResetVerify.tsx
@@ -1,6 +1,7 @@
 import { FormEvent, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { ShieldCheckIcon, ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import { ShieldCheckIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAuthStore } from "../stores/authStore";
 import { useOtpInput } from "../hooks/useOtpInput";
 import AuthFooterLinks from "../components/common/AuthFooterLinks";
@@ -69,12 +70,7 @@ export default function MfaResetVerify() {
         style={{ animationDelay: "200ms" }}
       >
         <form onSubmit={(e) => void handleSubmit(e)} className="space-y-5">
-          {error && (
-            <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down">
-              <ExclamationCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
           {/* Main Email Code */}
           <div>
diff --git a/ui-react/apps/console/src/pages/SignUp.tsx b/ui-react/apps/console/src/pages/SignUp.tsx
index 0ba6166a6f5..8d5db5c9b44 100644
--- a/ui-react/apps/console/src/pages/SignUp.tsx
+++ b/ui-react/apps/console/src/pages/SignUp.tsx
@@ -1,10 +1,7 @@
 import { useState, useMemo, FormEvent, useEffect } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
-import {
-  UserPlusIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-} from "@heroicons/react/24/outline";
+import { UserPlusIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { validate, type FormErrors } from "./setup/validate";
 import { useSignUpStore } from "../stores/signUpStore";
 import AccountCreated from "../components/auth/AccountCreated";
@@ -176,17 +173,9 @@ export default function SignUp() {
       <div className="w-full max-w-sm space-y-4">
         {/* Invite alert */}
         {isInvite && (
-          <div
-            className="flex items-start gap-2.5 bg-accent-yellow/8 border border-accent-yellow/20 text-accent-yellow px-3.5 py-3 rounded-lg text-xs font-mono animate-slide-down"
-            role="alert"
-          >
-            <ExclamationTriangleIcon
-              className="w-4 h-4 shrink-0 mt-0.5"
-              strokeWidth={2}
-            />
-            Please create your account before accepting the namespace
-            invitation.
-          </div>
+          <Alert variant="warning">
+            Please create your account before accepting the namespace invitation.
+          </Alert>
         )}
 
         {/* Form card */}
@@ -195,16 +184,9 @@ export default function SignUp() {
           style={{ animationDelay: "150ms" }}
         >
           {signUpError && (
-            <div
-              role="alert"
-              className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono animate-slide-down mb-5"
-            >
-              <ExclamationCircleIcon
-                className="w-3.5 h-3.5 shrink-0"
-                strokeWidth={2}
-              />
+            <Alert variant="error" className="mb-5">
               {signUpError}
-            </div>
+            </Alert>
           )}
 
           <form
diff --git a/ui-react/apps/console/src/pages/admin/Sessions.tsx b/ui-react/apps/console/src/pages/admin/Sessions.tsx
index 7ccf109624c..dabcac49f1a 100644
--- a/ui-react/apps/console/src/pages/admin/Sessions.tsx
+++ b/ui-react/apps/console/src/pages/admin/Sessions.tsx
@@ -2,11 +2,11 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   CommandLineIcon,
-  ExclamationCircleIcon,
   ExclamationTriangleIcon,
   ShieldCheckIcon,
   ShieldExclamationIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminSessionsList } from "@/hooks/useAdminSessionsList";
 import type { Session } from "@/client";
 import PageHeader from "@/components/common/PageHeader";
@@ -153,16 +153,9 @@ export default function AdminSessions() {
       />
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/admin/announcements/EditAnnouncement.tsx b/ui-react/apps/console/src/pages/admin/announcements/EditAnnouncement.tsx
index 1892dbdacc8..295dbd28d7c 100644
--- a/ui-react/apps/console/src/pages/admin/announcements/EditAnnouncement.tsx
+++ b/ui-react/apps/console/src/pages/admin/announcements/EditAnnouncement.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import {
-  ExclamationCircleIcon,
   MegaphoneIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminAnnouncement } from "@/hooks/useAdminAnnouncements";
 import { useAdminUpdateAnnouncement } from "@/hooks/useAdminAnnouncementMutations";
 import AnnouncementEditor from "./AnnouncementEditor";
@@ -94,16 +94,9 @@ export default function EditAnnouncement() {
       </h1>
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error}
-        </div>
+        </Alert>
       )}
 
       {/* Form */}
diff --git a/ui-react/apps/console/src/pages/admin/announcements/NewAnnouncement.tsx b/ui-react/apps/console/src/pages/admin/announcements/NewAnnouncement.tsx
index 1e7244edd82..56768b7e7df 100644
--- a/ui-react/apps/console/src/pages/admin/announcements/NewAnnouncement.tsx
+++ b/ui-react/apps/console/src/pages/admin/announcements/NewAnnouncement.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminCreateAnnouncement } from "@/hooks/useAdminAnnouncementMutations";
 import AnnouncementEditor from "./AnnouncementEditor";
 import Breadcrumb from "@/components/common/Breadcrumb";
@@ -52,16 +52,9 @@ export default function NewAnnouncement() {
       </h1>
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error}
-        </div>
+        </Alert>
       )}
 
       {/* Form */}
diff --git a/ui-react/apps/console/src/pages/admin/announcements/index.tsx b/ui-react/apps/console/src/pages/admin/announcements/index.tsx
index 21c8effc718..efa970f6a07 100644
--- a/ui-react/apps/console/src/pages/admin/announcements/index.tsx
+++ b/ui-react/apps/console/src/pages/admin/announcements/index.tsx
@@ -2,11 +2,11 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   MegaphoneIcon,
-  ExclamationCircleIcon,
   TrashIcon,
   PencilSquareIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminAnnouncements } from "@/hooks/useAdminAnnouncements";
 import PageHeader from "@/components/common/PageHeader";
 import DataTable, { type Column } from "@/components/common/DataTable";
@@ -111,16 +111,9 @@ export default function AdminAnnouncements() {
       </PageHeader>
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/admin/devices/index.tsx b/ui-react/apps/console/src/pages/admin/devices/index.tsx
index c714f9a7c04..1f3ade924cd 100644
--- a/ui-react/apps/console/src/pages/admin/devices/index.tsx
+++ b/ui-react/apps/console/src/pages/admin/devices/index.tsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import {
   CpuChipIcon,
-  ExclamationCircleIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import {
   useAdminDevices,
   type NormalizedDevice,
@@ -215,16 +215,9 @@ export default function AdminDevices() {
       </div>
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/admin/firewall-rules/index.tsx b/ui-react/apps/console/src/pages/admin/firewall-rules/index.tsx
index eb2e1d50b34..af6a4cf59da 100644
--- a/ui-react/apps/console/src/pages/admin/firewall-rules/index.tsx
+++ b/ui-react/apps/console/src/pages/admin/firewall-rules/index.tsx
@@ -2,10 +2,10 @@ import { useState, useMemo } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import {
   ShieldExclamationIcon,
-  ExclamationCircleIcon,
   CheckCircleIcon,
   NoSymbolIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminFirewallRules } from "@/hooks/useAdminFirewallRules";
 import PageHeader from "@/components/common/PageHeader";
 import DataTable, { type Column } from "@/components/common/DataTable";
@@ -150,16 +150,9 @@ export default function AdminFirewallRules() {
       />
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/admin/namespaces/index.tsx b/ui-react/apps/console/src/pages/admin/namespaces/index.tsx
index ce96405be2d..2cf8ec9f1f4 100644
--- a/ui-react/apps/console/src/pages/admin/namespaces/index.tsx
+++ b/ui-react/apps/console/src/pages/admin/namespaces/index.tsx
@@ -4,8 +4,8 @@ import {
   ServerStackIcon,
   PencilSquareIcon,
   TrashIcon,
-  ExclamationCircleIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminNamespaces } from "@/hooks/useAdminNamespaces";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import type { Namespace } from "@/client";
@@ -139,16 +139,9 @@ export default function AdminNamespaces() {
       />
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/admin/settings/Authentication.tsx b/ui-react/apps/console/src/pages/admin/settings/Authentication.tsx
index 8f5c2814f6c..91afafa5338 100644
--- a/ui-react/apps/console/src/pages/admin/settings/Authentication.tsx
+++ b/ui-react/apps/console/src/pages/admin/settings/Authentication.tsx
@@ -1,9 +1,9 @@
 import { useState, useEffect, useCallback } from "react";
 import {
   KeyIcon,
-  ExclamationCircleIcon,
   ArrowTopRightOnSquareIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import {
   getAuthenticationSettings,
   configureLocalAuthentication,
@@ -162,13 +162,9 @@ export default function AdminAuthentication() {
       />
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-5 animate-slide-down"
-        >
-          <ExclamationCircleIcon className="w-3.5 h-3.5 shrink-0" strokeWidth={2} />
+        <Alert variant="error" className="mb-5">
           {error}
-        </div>
+        </Alert>
       )}
 
       <div className="space-y-4">
diff --git a/ui-react/apps/console/src/pages/admin/users/index.tsx b/ui-react/apps/console/src/pages/admin/users/index.tsx
index b1d4d358fb7..240ee223d44 100644
--- a/ui-react/apps/console/src/pages/admin/users/index.tsx
+++ b/ui-react/apps/console/src/pages/admin/users/index.tsx
@@ -6,8 +6,8 @@ import {
   PencilSquareIcon,
   TrashIcon,
   ArrowRightStartOnRectangleIcon,
-  ExclamationCircleIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { useAdminUsers } from "@/hooks/useAdminUsers";
 import { useLoginAsUser } from "@/hooks/useLoginAsUser";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
@@ -172,16 +172,9 @@ export default function AdminUsers() {
       />
 
       {error && (
-        <div
-          role="alert"
-          className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down"
-        >
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/containers/index.tsx b/ui-react/apps/console/src/pages/containers/index.tsx
index 56732fcc8b9..757cd5b1c5a 100644
--- a/ui-react/apps/console/src/pages/containers/index.tsx
+++ b/ui-react/apps/console/src/pages/containers/index.tsx
@@ -24,10 +24,10 @@ import {
   PlusIcon,
   TagIcon,
   XMarkIcon,
-  ExclamationCircleIcon,
   CubeIcon,
   ChevronDoubleRightIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import RestrictedAction from "@/components/common/RestrictedAction";
 
 const statusTabs: { label: string; value: DeviceStatus }[] = [
@@ -393,13 +393,9 @@ export default function Containers() {
       )}
 
       {error && (
-        <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down">
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/devices/index.tsx b/ui-react/apps/console/src/pages/devices/index.tsx
index 2db2ccbc456..eebd1afa85a 100644
--- a/ui-react/apps/console/src/pages/devices/index.tsx
+++ b/ui-react/apps/console/src/pages/devices/index.tsx
@@ -25,10 +25,10 @@ import {
   PlusIcon,
   TagIcon,
   XMarkIcon,
-  ExclamationCircleIcon,
   CpuChipIcon,
   ChevronDoubleRightIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import RestrictedAction from "@/components/common/RestrictedAction";
 
 const statusTabs: { label: string; value: DeviceStatus }[] = [
@@ -379,13 +379,9 @@ export default function Devices() {
       )}
 
       {error && (
-        <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down">
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       <DataTable
diff --git a/ui-react/apps/console/src/pages/sessions/index.tsx b/ui-react/apps/console/src/pages/sessions/index.tsx
index 48be6cf1756..ec9f09db669 100644
--- a/ui-react/apps/console/src/pages/sessions/index.tsx
+++ b/ui-react/apps/console/src/pages/sessions/index.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  ExclamationCircleIcon,
   CommandLineIcon,
   ExclamationTriangleIcon,
   XCircleIcon,
 } from "@heroicons/react/24/outline";
+import Alert from "@/components/common/Alert";
 import { PlayIcon } from "@heroicons/react/24/solid";
 import { useSessions } from "@/hooks/useSessions";
 import { useCloseSession } from "@/hooks/useSessionMutations";
@@ -221,23 +221,15 @@ export default function Sessions() {
       />
 
       {error && (
-        <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down">
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {error.message}
-        </div>
+        </Alert>
       )}
 
       {logsError && (
-        <div className="flex items-center gap-2 bg-accent-red/8 border border-accent-red/20 text-accent-red px-3.5 py-2.5 rounded-md text-xs font-mono mb-4 animate-slide-down">
-          <ExclamationCircleIcon
-            className="w-3.5 h-3.5 shrink-0"
-            strokeWidth={2}
-          />
+        <Alert variant="error" className="mb-4">
           {logsError}
-        </div>
+        </Alert>
       )}
 
       <DataTable