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 0a6fcf55..cc5791b3 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
@@ -2,10 +2,12 @@
 // Dashboard.tsx
 
 import styles from './Dashboard.module.scss'
+import { TopStrip } from './TopStrip'
 
 export function Dashboard(): React.ReactElement {
   return (
     <div className={styles.root}>
+      <TopStrip />
       <main className={styles.grid}>
         <aside className={styles.left} />
         <section className={styles.center} />
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss
new file mode 100644
index 00000000..a47c71ba
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss
@@ -0,0 +1,64 @@
+// ©AngelaMos | 2026
+// TopStrip.module.scss
+
+.strip {
+  grid-area: topstrip;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--fg-4);
+  background: var(--bg);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: start;
+}
+
+.title {
+  font-size: var(--type-label);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+  color: var(--fg-2);
+}
+
+.clock {
+  font-family: var(--font-mono);
+  font-size: var(--type-body);
+  color: var(--fg-2);
+  justify-self: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: end;
+}
+
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--fg-3);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--fg-1);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--fg-2);
+    outline-offset: 1px;
+  }
+}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx
new file mode 100644
index 00000000..eab6f1d5
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx
@@ -0,0 +1,70 @@
+// ©AngelaMos | 2026
+// TopStrip.tsx
+
+import { useEffect, useState } from 'react'
+import { FiHelpCircle, FiSettings, FiUser } from 'react-icons/fi'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES } from '@/config'
+import { useAuthStore } from '@/core/lib/auth.store'
+import { useUIStore } from '@/stores/ui'
+import styles from './TopStrip.module.scss'
+
+const CLOCK_TICK_MS = 1000
+
+export function TopStrip(): React.ReactElement {
+  const [now, setNow] = useState(() => new Date())
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const openAbout = useUIStore((s) => s.openAbout)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), CLOCK_TICK_MS)
+    return () => clearInterval(id)
+  }, [])
+
+  return (
+    <header className={styles.strip}>
+      <div className={styles.left}>
+        <span className={styles.title}>MONITORING THE SITUATION</span>
+        <button
+          type="button"
+          className={styles.iconButton}
+          onClick={openAbout}
+          aria-label="About"
+        >
+          <FiHelpCircle aria-hidden />
+        </button>
+      </div>
+
+      <div className={styles.clock}>{formatUTC(now)}</div>
+
+      <div className={styles.right}>
+        {isAuthenticated ? (
+          <button
+            type="button"
+            className={styles.iconButton}
+            onClick={() => navigate(ROUTES.SETTINGS)}
+            aria-label="Preferences"
+          >
+            <FiSettings aria-hidden />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={styles.iconButton}
+            onClick={() => navigate(ROUTES.LOGIN)}
+            aria-label="Login"
+          >
+            <FiUser aria-hidden />
+          </button>
+        )}
+      </div>
+    </header>
+  )
+}
+
+TopStrip.displayName = 'TopStrip'
+
+function formatUTC(d: Date): string {
+  return `${d.toISOString().slice(11, 19)} UTC`
+}