diff --git a/templates/portal/base.html b/templates/portal/base.html
index 25daa37..e771c96 100644
--- a/templates/portal/base.html
+++ b/templates/portal/base.html
@@ -1,43 +1,135 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full dark">
+<html lang="en" class="h-full">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Monitoring{% endblock %} · TMI</title>
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
-            darkMode: 'class',
-            theme: { extend: { colors: { seismo: {
-                orange: '#f48b1c', navy: '#142a66', burgundy: '#7d234d'
-            } } } }
+            theme: { extend: {
+                colors: { seismo: { orange: '#f48b1c', navy: '#142a66', burgundy: '#7d234d' } },
+                fontFamily: {
+                    sans: ['"Hanken Grotesk"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+                    mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
+                },
+            } }
         }
     </script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
-    <meta name="theme-color" content="#142a66">
+    <meta name="theme-color" content="#080b14">
+
+    <style>
+        :root {
+            --bg: #080b14;
+            --border: rgba(124, 146, 188, 0.14);
+            --border-bright: rgba(168, 188, 224, 0.30);
+            --text: #e7ecf6;
+            --text-dim: #8c98b0;
+            --accent: #f48b1c;
+            --accent-glow: rgba(244, 139, 28, 0.40);
+            --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
+        }
+        html, body { height: 100%; }
+        body {
+            margin: 0;
+            color: var(--text);
+            font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+            font-feature-settings: "ss01";
+            background-color: var(--bg);
+            /* atmosphere: a navy aurora up top + a faint instrument grid */
+            background-image:
+                radial-gradient(1100px 560px at 50% -12%, rgba(20, 42, 102, 0.55), transparent 68%),
+                radial-gradient(700px 400px at 88% 8%, rgba(125, 35, 77, 0.18), transparent 70%),
+                linear-gradient(rgba(124, 146, 188, 0.045) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(124, 146, 188, 0.045) 1px, transparent 1px);
+            background-size: auto, auto, 46px 46px, 46px 46px;
+            background-attachment: fixed;
+        }
+        ::selection { background: rgba(244, 139, 28, 0.30); }
+
+        .font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+
+        /* Panel system — translucent, hairline-lit, with depth */
+        .panel {
+            position: relative;
+            background: linear-gradient(180deg, rgba(24, 33, 54, 0.72), rgba(12, 18, 31, 0.62));
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px -28px rgba(0, 0, 0, 0.85);
+        }
+        .panel::before {
+            content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
+            background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
+        }
+        .panel-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
+        .panel-hover:hover {
+            transform: translateY(-3px);
+            border-color: rgba(244, 139, 28, 0.55);
+            box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--accent-glow);
+        }
+
+        .hairline { border-top: 1px solid var(--border); }
+
+        /* Live indicator */
+        .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s infinite; }
+        @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px rgba(244, 139, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 139, 28, 0); } }
+
+        /* Staggered load reveal */
+        @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+        .reveal { opacity: 0; animation: rise .55s cubic-bezier(.2, .7, .2, 1) forwards; }
+
+        /* Brand signal-bars mark */
+        .signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
+        .signal-bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; }
+        .signal-bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
+        .signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
+        .signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; }
+        .signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
+        @keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
+
+        /* Dark Leaflet polish */
+        .leaflet-container { background: #0a0f1c !important; }
+        .leaflet-tooltip { background: rgba(14, 20, 34, 0.95); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; }
+        .leaflet-tooltip-top::before { border-top-color: var(--border-bright); }
+        .leaflet-control-attribution { background: rgba(8, 11, 20, 0.6) !important; color: #5a6478 !important; }
+        .leaflet-control-attribution a { color: #7a8499 !important; }
+        ::-webkit-scrollbar { width: 9px; height: 9px; }
+        ::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; }
+    </style>
     {% block head %}{% endblock %}
 </head>
-<body class="h-full bg-slate-900 text-gray-100 antialiased">
-    <header class="border-b border-slate-700/70 bg-slate-800/60 backdrop-blur">
-        <div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
-            <a href="/portal" class="flex items-center gap-2 font-semibold">
-                <span class="inline-block w-2.5 h-2.5 rounded-full bg-seismo-orange"></span>
-                TMI Monitoring{% if client %} <span class="text-gray-500 font-normal">·</span>
-                <span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
+<body class="min-h-full antialiased">
+    <header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[rgba(8,11,20,0.72)] backdrop-blur-xl">
+        <div class="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between">
+            <a href="/portal" class="flex items-center gap-2.5 group">
+                <span class="signal-bars"><i></i><i></i><i></i><i></i></span>
+                <span class="font-semibold tracking-tight text-[15px]">
+                    TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span>
+                    {% if client %}<span class="text-[var(--text-dim)] font-normal mx-0.5">/</span>
+                    <span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
+                </span>
             </a>
             {% if client %}
-            <a href="/portal/logout" class="text-sm text-gray-400 hover:text-gray-200">Sign out</a>
+            <a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">Sign out</a>
             {% endif %}
         </div>
     </header>
 
-    <main class="max-w-5xl mx-auto px-4 py-6">
+    <main class="max-w-5xl mx-auto px-5 py-8">
         {% block content %}{% endblock %}
     </main>
 
-    <footer class="max-w-5xl mx-auto px-4 py-8 text-xs text-gray-600">
-        Read-only monitoring view. Data is provided as-is for informational purposes.
+    <footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)]/70 flex items-center gap-2">
+        <span class="w-1 h-1 rounded-full bg-[var(--text-dim)]/50"></span>
+        Read-only monitoring view · data provided as-is for informational purposes
     </footer>
     {% block scripts %}{% endblock %}
 </body>
diff --git a/templates/portal/overview.html b/templates/portal/overview.html
index 4f01d3d..a4760fb 100644
--- a/templates/portal/overview.html
+++ b/templates/portal/overview.html
@@ -4,49 +4,55 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 {% endblock %}
 {% block content %}
-<h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
-<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>
+<div class="reveal">
+    <div class="text-[11px] uppercase tracking-[0.2em] text-seismo-orange/80 font-mono mb-2">Live monitoring</div>
+    <h1 class="text-3xl font-bold tracking-tight">Your locations</h1>
+    <p class="text-[var(--text-dim)] text-sm mt-1">Real-time sound levels across your active monitoring sites.</p>
+</div>
 
 {% if locations %}
 <!-- Status rollup (filled live from the per-location /live fetches) -->
-<div id="rollup" class="hidden mb-5 flex flex-wrap items-center gap-2 text-sm">
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="text-gray-400">Locations</span><b id="r-total" class="text-gray-100">&ndash;</b>
-    </span>
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="w-2 h-2 rounded-full bg-green-500"></span><b id="r-live">&ndash;</b><span class="text-gray-400">live</span>
-    </span>
-    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="w-2 h-2 rounded-full bg-slate-500"></span><b id="r-off">&ndash;</b><span class="text-gray-400">offline</span>
-    </span>
-    <span id="r-peak-wrap" class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
-        <span class="text-gray-400">Loudest now</span><b id="r-peak" class="text-seismo-orange">&ndash;</b><span class="text-gray-400">dB Leq &middot;</span><span id="r-peak-loc" class="text-gray-300"></span>
-    </span>
+<div id="rollup" class="hidden mt-6 mb-6 flex flex-wrap items-center gap-2.5">
+    <div class="panel px-4 py-2.5 flex items-center gap-2.5">
+        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Locations</span>
+        <b id="r-total" class="reading text-lg font-semibold">&ndash;</b>
+    </div>
+    <div class="panel px-4 py-2.5 flex items-center gap-2">
+        <span class="live-dot"></span><b id="r-live" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">live</span>
+    </div>
+    <div class="panel px-4 py-2.5 flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-[var(--text-dim)]/50"></span><b id="r-off" class="reading text-lg font-semibold">&ndash;</b><span class="text-[var(--text-dim)] text-xs">offline</span>
+    </div>
+    <div id="r-peak-wrap" class="hidden panel px-4 py-2.5 flex items-center gap-2">
+        <span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Loudest now</span>
+        <b id="r-peak" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">dB</span>
+        <span id="r-peak-loc" class="text-[var(--text-dim)] text-sm"></span>
+    </div>
 </div>
 
-<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>
+<div id="loc-map" class="panel reveal hidden h-72 overflow-hidden mb-6" style="animation-delay:80ms"></div>
 
 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {% for loc in locations %}
     <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
-       class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
+       class="loc-tile panel panel-hover reveal block p-5" style="animation-delay: {{ (loop.index0 * 55) + 140 }}ms">
         <div class="flex items-start justify-between gap-2">
-            <div class="font-semibold">{{ loc.name }}</div>
-            <span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
+            <div class="min-w-0">
+                <div class="font-semibold tracking-tight truncate">{{ loc.name }}</div>
+                <div class="text-xs text-[var(--text-dim)] mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
+            </div>
+            <span class="loc-badge hidden shrink-0"></span>
         </div>
-        <div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
-        <div class="mt-3 flex items-baseline gap-1">
-            <span class="loc-leq text-3xl font-bold text-seismo-orange">--</span>
-            <span class="text-sm text-gray-400">dB Leq</span>
+        <div class="mt-5 flex items-baseline gap-1.5">
+            <span class="loc-leq reading text-[2.6rem] leading-none font-semibold">--</span>
+            <span class="text-xs text-[var(--text-dim)] font-mono tracking-wide">dB&nbsp;Leq</span>
         </div>
-        <div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
+        <div class="loc-fresh text-[11px] text-[var(--text-dim)]/70 mt-2 font-mono">&nbsp;</div>
     </a>
     {% endfor %}
 </div>
 {% else %}
-<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
-    No active monitoring locations yet.
-</div>
+<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No active monitoring locations yet.</div>
 {% endif %}
 {% endblock %}
 
@@ -57,15 +63,14 @@ const LOCATIONS = {{ locations|tojson }};
 const liveState = {};          // loc.id -> {status, leq(num|null), leqStr}
 const markersById = {};        // loc.id -> circleMarker (for live recolor)
 
-// Dot/level color. Bands are placeholders until per-location alert thresholds
-// exist (M2 alerts will color by threshold breach instead).
+// Dot/level color. Placeholder bands until per-location alert thresholds exist.
 const LEVEL_AMBER = 55, LEVEL_RED = 70;
-const COLOR_IDLE = '#64748b';  // slate-500 — not producing a live level
+const COLOR_IDLE = '#5a6478';
 function levelColor(st) {
     if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
-    if (st.leq >= LEVEL_RED) return '#ef4444';    // red-500
-    if (st.leq >= LEVEL_AMBER) return '#f59e0b';  // amber-500
-    return '#22c55e';                              // green-500
+    if (st.leq >= LEVEL_RED) return '#f87171';
+    if (st.leq >= LEVEL_AMBER) return '#fbbf24';
+    return '#34d399';
 }
 function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
 
@@ -78,11 +83,13 @@ function fmtAgo(iso) {
     return 'updated ' + Math.round(s / 3600) + 'h ago';
 }
 
+const BADGE_BASE = 'loc-badge inline-flex items-center gap-1.5 shrink-0 px-2.5 py-1 text-[11px] rounded-full border ';
+
 function updateMarker(loc) {
     const m = markersById[loc.id]; if (!m) return;
     const st = liveState[loc.id];
     m.setStyle({ fillColor: levelColor(st) });
-    let label = loc.name;
+    let label = `<b>${loc.name}</b>`;
     if (st) {
         if (st.status === 'measuring') label += ` &middot; ${st.leqStr} dB Leq`;
         else if (st.status === 'stopped') label += ' &middot; stopped';
@@ -102,23 +109,18 @@ async function loadTile(loc) {
         const d = j.data;
         if (!d) {
             liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
-            if (badge) {
-                badge.classList.remove('hidden');
-                badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
-                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
-            }
-            if (leqEl) leqEl.textContent = '--';
+            if (badge) { badge.classList.remove('hidden'); badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline'; }
+            if (leqEl) { leqEl.textContent = '--'; leqEl.style.color = 'var(--text-dim)'; }
             if (fresh) fresh.innerHTML = '&nbsp;';
         } else {
             const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
             const leqStr = (d.leq == null || d.leq === '') ? '--' : d.leq;
             liveState[loc.id] = { status: measuring ? 'measuring' : 'stopped', leq: num(d.leq), leqStr };
-            if (leqEl) leqEl.textContent = leqStr;
+            if (leqEl) { leqEl.textContent = leqStr; leqEl.style.color = measuring ? levelColor(liveState[loc.id]) : 'var(--text)'; }
             if (badge) {
                 badge.classList.remove('hidden');
-                badge.textContent = measuring ? '● Live' : 'Stopped';
-                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
-                    (measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
+                if (measuring) { badge.className = BADGE_BASE + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; badge.innerHTML = '<span class="live-dot"></span> Live'; }
+                else { badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = 'Stopped'; }
             }
             if (fresh) fresh.textContent = fmtAgo(d.last_seen);
         }
@@ -155,30 +157,28 @@ async function refreshAll() {
 refreshAll();
 setInterval(refreshAll, 15000);
 
-// Map of locations that have coordinates — dots recolor live via updateMarker().
+// Map of locations with coordinates — dark tiles, dots recolor live.
 const withCoords = LOCATIONS.filter(l => l.coordinates);
 if (withCoords.length) {
     const mapEl = document.getElementById('loc-map');
     mapEl.classList.remove('hidden');
-    const map = L.map('loc-map', { scrollWheelZoom: false });
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-        { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
+    const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
+    }).addTo(map);
     const pts = [];
     withCoords.forEach(l => {
         const [la, lo] = (l.coordinates || '').split(',').map(Number);
         if (!isNaN(la) && !isNaN(lo)) {
-            // Same dot style as the internal project map (circleMarker, not a pin),
-            // but recolored live by current level.
             markersById[l.id] = L.circleMarker([la, lo], {
-                radius: 8, fillColor: levelColor(liveState[l.id]), color: '#fff',
-                weight: 2, opacity: 1, fillOpacity: 0.9,
+                radius: 7, fillColor: levelColor(liveState[l.id]), color: '#fff',
+                weight: 2, opacity: 0.9, fillOpacity: 0.95,
             }).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
             pts.push([la, lo]);
         }
     });
-    if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
+    if (pts.length) map.fitBounds(pts, { padding: [36, 36], maxZoom: 15 });
     else mapEl.classList.add('hidden');
-    // Paint dots with whatever live data has already arrived.
     LOCATIONS.forEach(updateMarker);
 }
 </script>
