diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss
new file mode 100644
index 00000000..fb4458ec
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.module.scss
@@ -0,0 +1,44 @@
+// ©AngelaMos | 2026
+// AlertBanner.module.scss
+
+.banner {
+  grid-area: alertbanner;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  padding: 0 16px;
+  background: var(--amber);
+  color: var(--amber-fg);
+  font-size: var(--type-body);
+  font-weight: 500;
+}
+
+.message {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--amber-fg);
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--amber-fg);
+    outline-offset: 1px;
+  }
+}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx
new file mode 100644
index 00000000..329b4a4c
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/AlertBanner.tsx
@@ -0,0 +1,38 @@
+// ©AngelaMos | 2026
+// AlertBanner.tsx
+
+import { useEffect } from 'react'
+import { FiX } from 'react-icons/fi'
+import { useUIStore } from '@/stores/ui'
+import styles from './AlertBanner.module.scss'
+
+const AUTO_DISMISS_MS = 30_000
+
+export function AlertBanner(): React.ReactElement | null {
+  const alert = useUIStore((s) => s.currentAlert)
+  const dismiss = useUIStore((s) => s.dismissAlert)
+
+  useEffect(() => {
+    if (!alert) return
+    const id = setTimeout(dismiss, AUTO_DISMISS_MS)
+    return () => clearTimeout(id)
+  }, [alert, dismiss])
+
+  if (!alert) return null
+
+  return (
+    <aside className={styles.banner} role="alert">
+      <span className={styles.message}>{alert.message}</span>
+      <button
+        type="button"
+        className={styles.dismiss}
+        onClick={dismiss}
+        aria-label="Dismiss"
+      >
+        <FiX aria-hidden />
+      </button>
+    </aside>
+  )
+}
+
+AlertBanner.displayName = 'AlertBanner'
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
index cc5791b3..5caec687 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
@@ -1,6 +1,7 @@
 // ©AngelaMos | 2026
 // Dashboard.tsx
 
+import { AlertBanner } from './AlertBanner'
 import styles from './Dashboard.module.scss'
 import { TopStrip } from './TopStrip'
 
@@ -8,6 +9,7 @@ export function Dashboard(): React.ReactElement {
   return (
     <div className={styles.root}>
       <TopStrip />
+      <AlertBanner />
       <main className={styles.grid}>
         <aside className={styles.left} />
         <section className={styles.center} />
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
index 22d26385..c77dec59 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
@@ -168,8 +168,7 @@ $container-2xl: 42rem;
 $container-full: 100%;
 
 // ============================================================================
-// ETHOS TOKENS — operator-grade dashboard surface
-//
+// ETHOS TOKENS — operator-grade dashboard surface.
 // Per docs/design/ethos-reference.md (also mirrored in _ethos.scss).
 // Used by /pages/dashboard/, /pages/globe/, /pages/panels/. NOT used by
 // auth pages — those keep the template's SCSS variables above.
@@ -192,6 +191,7 @@ $container-full: 100%;
   // Accents — ONE green, ONE amber. That is all.
   --ok:    #4ade80;  // live / healthy / busy
   --amber: #f59e0b;  // stale / breached / anomaly. NEVER for decoration.
+  --amber-fg: #1a1a1a;  // near-black text-on-amber pairing (alert banner only)
 
   // Type
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;