diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss
new file mode 100644
index 00000000..1bf97f83
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss
@@ -0,0 +1,43 @@
+// ©AngelaMos | 2026
+// Dashboard.module.scss
+
+.root {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas:
+    'topstrip'
+    'alertbanner'
+    'main'
+    'bottomticker';
+  height: 100dvh;
+  width: 100vw;
+  background: var(--bg);
+  color: var(--fg-1);
+  overflow: hidden;
+}
+
+.grid {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: var(--col-panel-width) 1fr var(--col-panel-width);
+  min-height: 0;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid var(--fg-4);
+}
+
+.center {
+  position: relative;
+  overflow: hidden;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-left: 1px solid var(--fg-4);
+}
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
new file mode 100644
index 00000000..0a6fcf55
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
@@ -0,0 +1,18 @@
+// ©AngelaMos | 2026
+// Dashboard.tsx
+
+import styles from './Dashboard.module.scss'
+
+export function Dashboard(): React.ReactElement {
+  return (
+    <div className={styles.root}>
+      <main className={styles.grid}>
+        <aside className={styles.left} />
+        <section className={styles.center} />
+        <aside className={styles.right} />
+      </main>
+    </div>
+  )
+}
+
+Dashboard.displayName = 'Dashboard'
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss
deleted file mode 100644
index 0fa5d6d3..00000000
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// ©AngelaMos | 2026
-// dashboard.module.scss
-
-.scaffold {
-  height: 100dvh;
-  width: 100%;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.label {
-  font-family: var(--font-sans);
-  font-size: var(--type-label);
-  letter-spacing: var(--letter-spacing-label);
-  text-transform: uppercase;
-  color: var(--fg-3);
-}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
index a418e3db..b183a002 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
@@ -1,14 +1,4 @@
 // ©AngelaMos | 2026
 // index.tsx
 
-import styles from './dashboard.module.scss'
-
-export function Component(): React.ReactElement {
-  return (
-    <div className={styles.scaffold}>
-      <span className={styles.label}>MONITOR THE SITUATION · SCAFFOLD</span>
-    </div>
-  )
-}
-
-Component.displayName = 'Dashboard'
+export { Dashboard as Component } from './Dashboard'
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 2bfdcd91..22d26385 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
@@ -208,4 +208,7 @@ $container-full: 100%;
   --type-label:  11px;   // UPPERCASE labels
   --type-num-l:  20px;   // KPI numbers
   --type-num-xl: 28px;   // hero KPI numbers (rare; only top-of-panel)
+
+  // Layout — fixed panel column width (spec §11.1)
+  --col-panel-width: 320px;
 }