diff --git a/dump1090.c b/dump1090.c
index d080470c3..7295f6acb 100644
--- a/dump1090.c
+++ b/dump1090.c
@@ -2507,6 +2507,7 @@ char *aircraftsToJson(int *len) {
     int buflen = 1024; /* The initial buffer is incremented as needed. */
     char *buf = malloc(buflen), *p = buf;
     int l;
+    time_t now = time(NULL);
 
     l = snprintf(p,buflen,"[\n");
     p += l; buflen -= l;
@@ -2523,9 +2524,9 @@ char *aircraftsToJson(int *len) {
             l = snprintf(p,buflen,
                 "{\"hex\":\"%s\", \"flight\":\"%s\", \"lat\":%f, "
                 "\"lon\":%f, \"altitude\":%d, \"track\":%d, "
-                "\"speed\":%d},\n",
+                "\"speed\":%d, \"messages\":%ld, \"seen\":%d},\n",
                 a->hexaddr, a->flight, a->lat, a->lon, altitude, a->track,
-                speed);
+                speed, a->messages, (int)(now - a->seen));
             p += l; buflen -= l;
             /* Resize if needed. */
             if (buflen < 256) {
diff --git a/gmap.html b/gmap.html
index ad6c30ac5..181be17bf 100644
--- a/gmap.html
+++ b/gmap.html
@@ -4,159 +4,541 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
-    <title>Dump1090</title>
+    <title>DUMP1090 // ATC MONITOR</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=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
         integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
         integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        /* Base styles */
+        :root {
+            --navy:         #0d1926;
+            --slate:        rgba(16, 28, 44, 0.97);
+            --cyan:         #50c0e0;
+            --cyan-dim:     #6a9ab8;
+            --cyan-faint:   #0e1a2a;
+            --white:        #eaf4fc;
+            --amber:        #ffb800;
+            --amber-dim:    #a07000;
+            --red:          #ff4a6e;
+            --border:       rgba(80, 192, 224, 0.20);
+            --border-hi:    rgba(80, 192, 224, 0.48);
+            --header-h:     44px;
+            --font:         'IBM Plex Mono', 'Courier New', monospace;
+        }
+
+        * { box-sizing: border-box; }
+
         body {
             margin: 0;
             padding: 0;
             height: 100dvh;
+            background: var(--navy);
+            font-family: var(--font);
+            color: var(--cyan);
+            overflow: hidden;
         }
 
-        /* Map block */
-        .map {
-            width: 100%;
-            height: 100%;
+        /* ─── HEADER ───────────────────────────────────────────────── */
+        .header {
+            position: fixed;
+            top: 0; left: 0; right: 0;
+            height: var(--header-h);
+            background: rgba(13, 20, 34, 0.99);
+            border-bottom: 1px solid var(--border-hi);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 18px;
+            z-index: 2000;
+        }
+
+        .header__left {
+            display: flex;
+            align-items: center;
+            gap: 18px;
         }
 
-        /* Plane icon block */
+        .header__title {
+            font-size: 13px;
+            letter-spacing: 4px;
+            color: var(--white);
+            white-space: nowrap;
+        }
+
+        .header__sep {
+            width: 1px;
+            height: 18px;
+            background: var(--border-hi);
+        }
+
+        .header__badge {
+            font-size: 9px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+            border: 1px solid var(--border);
+            padding: 2px 7px;
+            white-space: nowrap;
+        }
+
+        .header__status {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            font-size: 10px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+        }
+
+        .header__dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 0;
+            background: var(--cyan);
+            animation: blink 1.6s ease-in-out infinite;
+        }
+
+        .header__dot--error {
+            background: #e05050;
+        }
+
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50%       { opacity: 0.08; }
+        }
+
+        .header__right {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+        }
+
+        .header__unit-toggle {
+            font-size: 9px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+            border: 1px solid var(--border);
+            padding: 2px 7px;
+            cursor: pointer;
+            transition: border-color 0.12s, color 0.12s;
+            white-space: nowrap;
+        }
+        .header__unit-toggle:hover {
+            border-color: var(--border-hi);
+            color: var(--cyan);
+        }
+
+        .header__notif-btn {
+            font-size: 9px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+            border: 1px solid var(--border);
+            padding: 2px 7px;
+            cursor: pointer;
+            transition: border-color 0.12s, color 0.12s;
+            white-space: nowrap;
+        }
+        .header__notif-btn:hover {
+            border-color: var(--border-hi);
+            color: var(--cyan);
+        }
+        .header__notif-btn--on {
+            color: var(--cyan);
+            border-color: var(--border-hi);
+        }
+        .header__notif-btn--denied {
+            color: var(--red);
+            border-color: rgba(255,74,110,0.3);
+            cursor: not-allowed;
+        }
+
+        .header__clock-wrap {
+            text-align: right;
+            line-height: 1;
+        }
+
+        .header__clock-label {
+            display: block;
+            font-size: 8px;
+            letter-spacing: 3px;
+            color: var(--cyan-dim);
+            margin-bottom: 2px;
+        }
+
+        .header__clock {
+            font-size: 16px;
+            letter-spacing: 3px;
+            color: var(--white);
+        }
+
+        /* ─── MAP ──────────────────────────────────────────────────── */
+        #canvas {
+            position: absolute;
+            top: var(--header-h);
+            left: 0; right: 0; bottom: 0;
+        }
+
+        /* Leaflet control overrides */
+        .leaflet-control-attribution {
+            background: rgba(13, 20, 34, 0.88) !important;
+            color: var(--cyan-dim) !important;
+            font-family: var(--font) !important;
+            font-size: 9px !important;
+            border: 1px solid var(--border) !important;
+            border-radius: 0 !important;
+        }
+        .leaflet-control-attribution a { color: var(--cyan-dim) !important; }
+        .leaflet-attribution-flag { display: none !important; }
+        .leaflet-control-zoom {
+            border: 1px solid var(--border-hi) !important;
+            border-radius: 0 !important;
+        }
+        .leaflet-control-zoom a {
+            background: var(--slate) !important;
+            color: var(--cyan) !important;
+            border-bottom: 1px solid var(--border) !important;
+            font-family: var(--font) !important;
+            border-radius: 0 !important;
+            width: 28px !important;
+            height: 28px !important;
+            line-height: 28px !important;
+        }
+        .leaflet-control-zoom a:hover {
+            background: var(--cyan-faint) !important;
+        }
+
+        /* ─── PLANE ICON ───────────────────────────────────────────── */
         .plane-icon {
             padding: 0;
             margin: 0;
             cursor: pointer;
-            transition: transform 500ms linear;
         }
 
         .plane-icon__symbol {
-            font-size: 24px;
+            font-size: 15px;
             line-height: 32px;
             width: 32px;
             height: 32px;
             text-align: center;
             cursor: pointer;
-            color: #ffd700;
-            -webkit-text-stroke: 1px #000000;
+            color: var(--cyan);
+            filter: drop-shadow(0 0 3px var(--cyan));
+            transition: transform 500ms linear;
         }
 
         .plane-icon__symbol--selected {
-            color: #ff6b6b;
+            color: #ffffff;
+            filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--cyan));
+            animation: selected-pulse 1.2s ease-in-out infinite;
+        }
+
+        @keyframes selected-pulse {
+            0%, 100% { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--cyan)); }
+            50%       { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px var(--cyan)) drop-shadow(0 0 35px var(--cyan)); }
         }
 
-        /* Info panel block */
+        /* ─── INFO PANEL ───────────────────────────────────────────── */
         .info-panel {
             position: absolute;
-            top: 20px;
-            right: 20px;
-            width: 260px;
-            background-color: rgba(20, 20, 30, 0.6);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            font-family: system-ui, sans-serif;
+            top: calc(var(--header-h) + 16px);
+            right: 16px;
+            width: 300px;
+            background: var(--slate);
+            border: 1px solid var(--border);
+            border-left: 3px solid var(--cyan);
+            font-family: var(--font);
             z-index: 1000;
             touch-action: none;
             user-select: none;
-            color: #ffffff;
+            color: var(--cyan);
+            max-height: calc(100dvh - var(--header-h) - 32px);
+            display: flex;
+            flex-direction: column;
         }
 
         .info-panel__header {
-            padding: 12px 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 8px 12px;
+            border-bottom: 1px solid var(--border);
             cursor: move;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(80, 192, 224, 0.04);
+            flex-shrink: 0;
         }
 
         .info-panel__title {
             margin: 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: #ffffff;
+            font-size: 9px;
+            font-weight: 400;
+            letter-spacing: 4px;
+            color: var(--cyan-dim);
+            font-family: var(--font);
+            font-variant: small-caps;
         }
 
-        .info-panel__content {
-            padding: 12px 16px;
-            margin: 0;
+        .info-panel__count {
+            font-size: 9px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
         }
 
-        .info-panel__text {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.85);
-            margin: 0 0 8px 0;
-            line-height: 1.5;
+        /* ─── FLIGHT LIST ──────────────────────────────────────────── */
+        .info-panel__list {
+            max-height: 240px;
+            overflow-y: auto;
+            border-bottom: 1px solid var(--border);
+            flex-shrink: 0;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
         }
+        .info-panel__list:empty { display: none; }
 
-        .info-panel__text:last-child {
-            margin-bottom: 0;
+        .flight-item {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 5px 12px;
+            font-size: 11px;
+            cursor: pointer;
+            transition: background 0.1s;
+            border-left: 2px solid transparent;
+            border-bottom: 1px solid var(--border);
+        }
+        .flight-item:last-child { border-bottom: none; }
+        .flight-item:hover { background: rgba(80, 192, 224, 0.07); }
+        .flight-item--selected {
+            background: rgba(80, 192, 224, 0.12);
+            border-left-color: var(--cyan);
         }
 
-        .info-panel__flight {
-            font-size: 20px;
-            font-weight: 700;
-            color: #ffffff;
-            margin: 0 0 4px 0;
+        .flight-item__flag {
+            font-size: 13px;
+            line-height: 1;
+            min-width: 20px;
+            text-align: center;
         }
+        .flight-item__callsign {
+            color: var(--white);
+            letter-spacing: 1px;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .flight-item__alt {
+            color: var(--cyan-dim);
+            font-size: 10px;
+            letter-spacing: 1px;
+            white-space: nowrap;
+        }
+
+        /* ─── PANEL CONTENT (detail view) ──────────────────────────── */
+        .info-panel__content {
+            padding: 12px;
+            overflow-y: auto;
+            flex: 1;
+            min-height: 0;
+        }
+
+        /* Target data */
+        .target__callsign {
+            font-size: 26px;
+            letter-spacing: 2px;
+            color: var(--white);
+            margin: 0 0 3px 0;
+            cursor: pointer;
+            transition: color 0.1s;
+        }
+        .target__callsign:hover { color: #fff; }
 
-        .info-panel__icao {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.5);
+        .target__icao {
+            font-size: 10px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
             margin: 0 0 12px 0;
-            font-family: monospace;
+            cursor: pointer;
+            transition: color 0.1s;
         }
+        .target__icao:hover { color: var(--cyan); }
 
-        .info-panel__grid {
+        .target__divider {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 10px 0;
+            color: var(--cyan-dim);
+            font-size: 8px;
+            letter-spacing: 2px;
+        }
+        .target__divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: var(--border);
+        }
+
+        .target__grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 12px;
+            gap: 6px;
         }
 
-        .info-panel__item {
+        .target__cell {
             display: flex;
             flex-direction: column;
-            gap: 2px;
+            gap: 3px;
+            cursor: pointer;
+            padding: 7px 9px;
+            border-left: 1px solid var(--border);
+            transition: border-color 0.12s;
         }
 
-        .info-panel__label {
+        .target__cell:hover {
+            border-left-color: var(--cyan);
+        }
+
+        .target__label {
+            font-size: 8px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+        }
+
+        .target__value {
+            font-size: 16px;
+            color: var(--white);
+            line-height: 1;
+        }
+
+        .target__unit {
+            font-size: 9px;
+            color: var(--cyan-dim);
+        }
+
+        .target__coords {
+            margin-top: 8px;
+            padding: 7px 9px;
+            border: 1px solid var(--border);
+            font-size: 11px;
+            letter-spacing: 1px;
+            color: var(--cyan-dim);
+            cursor: pointer;
+            transition: border-color 0.12s, color 0.12s;
+        }
+        .target__coords:hover {
+            border-color: var(--border-hi);
+            color: var(--cyan);
+        }
+
+        .target__standby {
             font-size: 11px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+            text-align: left;
+            padding: 10px 0 4px;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: rgba(255, 255, 255, 0.5);
         }
+        .target__standby::before { content: '▸ '; }
 
-        .info-panel__value {
-            font-size: 15px;
-            font-weight: 500;
-            color: #ffffff;
+        .copied-flash {
+            color: var(--amber) !important;
+            text-shadow: 0 0 8px rgba(255,184,0,0.6) !important;
+            border-color: var(--amber-dim) !important;
+        }
+
+        .target__aircraft {
+            margin-top: 8px;
+            padding: 7px 9px;
+            border: 1px solid var(--border);
+        }
+
+        .target__aircraft-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 11px;
+        }
+
+        .target__aircraft-flag { font-size: 15px; line-height: 1; }
+
+        .target__aircraft-reg {
+            color: var(--white);
+            letter-spacing: 1px;
+        }
+
+        .target__aircraft-type { color: var(--cyan-dim); }
+
+        .target__aircraft-operator {
+            font-size: 9px;
+            letter-spacing: 1px;
+            color: var(--cyan-dim);
+            margin-top: 3px;
+            padding-left: 23px;
         }
 
-        .info-panel__coords {
-            margin-top: 12px;
-            padding-top: 12px;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            font-size: 12px;
-            font-family: monospace;
-            color: rgba(255, 255, 255, 0.7);
+        .target__aircraft-loading {
+            margin-top: 8px;
+            font-size: 9px;
+            letter-spacing: 2px;
+            color: var(--cyan-dim);
+            opacity: 0.5;
+        }
+
+        /* ─── HISTORY CHART ─────────────────────────────────────────── */
+        .history-chart-wrap {
+            border: 1px solid var(--border);
+            padding: 4px 4px 2px;
+            background: rgba(0, 0, 0, 0.25);
+        }
+        .history-chart-wrap canvas {
+            display: block;
+            width: 100%;
+            height: 80px;
         }
     </style>
 </head>
 
 <body>
-    <!-- Canvas for Leaflet map -->
-    <div id="canvas" class="map"></div>
+    <!-- Header bar -->
+    <header class="header">
+        <div class="header__left">
+            <span class="header__title">DUMP1090&nbsp;&nbsp;·&nbsp;&nbsp;ATC MONITOR</span>
+            <div class="header__sep"></div>
+            <div class="header__status">
+                <div class="header__dot"></div>
+                <span>◉ LIVE</span>
+            </div>
+            <div class="header__badge">1090 MHz</div>
+        </div>
+        <div class="header__right">
+            <div class="header__notif-btn" id="notifBtn" title="Toggle new-contact notifications">
+                <span id="notifLabel">◎ NOTIFY</span>
+            </div>
+            <div class="header__unit-toggle" id="unitToggle" title="Toggle units">
+                <span id="unitLabel">FT / KT</span>
+            </div>
+            <div class="header__clock-wrap">
+                <span class="header__clock-label">UTC</span>
+                <span class="header__clock" id="utcClock">--:--:--</span>
+            </div>
+        </div>
+    </header>
+
+    <!-- Full-screen map -->
+    <div id="canvas"></div>
 
     <!-- Floating info panel -->
     <div class="info-panel" id="info-panel">
         <div class="info-panel__header">
-            <h1 class="info-panel__title">Dump1090</h1>
+            <h1 class="info-panel__title">▸ CONTACT</h1>
+            <span class="info-panel__count" id="planeCount">00 TRACKED</span>
         </div>
+        <div class="info-panel__list" id="flightList"></div>
         <div class="info-panel__content">
-            <p id="generalInfo" class="info-panel__text"></p>
-            <p id="planeInfo" class="info-panel__text">Click on a plane for info</p>
+            <div id="planeInfo"><p class="target__standby">No target selected</p></div>
         </div>
     </div>
 
@@ -164,52 +546,455 @@ <h1 class="info-panel__title">Dump1090</h1>
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
     <script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.27/dist/interact.min.js"></script>
     <script type="module">
+        // UTC clock
+        const tickClock = () => {
+            const now = new Date();
+            const h = String(now.getUTCHours()).padStart(2, '0');
+            const m = String(now.getUTCMinutes()).padStart(2, '0');
+            const s = String(now.getUTCSeconds()).padStart(2, '0');
+            document.getElementById('utcClock').textContent = `${h}:${m}:${s}`;
+        };
+        tickClock();
+        setInterval(tickClock, 1000);
+
         // Leaflet map instance and planes state
         let map = null;
         const planes = {};
         let selectedPlane = null;
-        let copyingHex = null; // tracks which plane's info is being shown as "copied"
+        let copyingHex = null;
 
-        // Update panel general info
-        const updateGeneralInfo = () => {
-            const el = document.getElementById('generalInfo');
-            const planesCount = Object.keys(planes).length;
+        // ─── NOTIFICATIONS ───────────────────────────────────────────
+        let notifEnabled = localStorage.getItem('notifEnabled') === 'true';
+        let initialLoadDone = false; // suppress notifications on the first poll
+
+        const updateNotifBtn = () => {
+            const btn = document.getElementById('notifBtn');
+            const lbl = document.getElementById('notifLabel');
+            if (Notification.permission === 'denied') {
+                btn.className = 'header__notif-btn header__notif-btn--denied';
+                lbl.textContent = '✕ NOTIFY';
+                notifEnabled = false;
+            } else if (notifEnabled && Notification.permission === 'granted') {
+                btn.className = 'header__notif-btn header__notif-btn--on';
+                lbl.textContent = '● NOTIFY';
+            } else {
+                btn.className = 'header__notif-btn';
+                lbl.textContent = '◎ NOTIFY';
+            }
+        };
+        updateNotifBtn();
+
+        document.getElementById('notifBtn').addEventListener('click', async () => {
+            if (Notification.permission === 'denied') return;
+            if (Notification.permission === 'default') {
+                const result = await Notification.requestPermission();
+                if (result !== 'granted') { updateNotifBtn(); return; }
+            }
+            notifEnabled = !notifEnabled;
+            localStorage.setItem('notifEnabled', notifEnabled);
+            updateNotifBtn();
+        });
+
+        const notifyNewPlane = (plane) => {
+            if (!notifEnabled || !initialLoadDone) return;
+            if (Notification.permission !== 'granted') return;
+            const id = plane.flight || plane.hex.toUpperCase();
+            const alt = formatAlt(plane.altitude);
+            const unit = getAltUnit();
+            const body = [
+                plane.flight ? `ICAO: ${plane.hex.toUpperCase()}` : null,
+                alt !== '---' ? `ALT ${alt} ${unit}` : null,
+                plane.speed  ? `${formatSpd(plane.speed)} ${getSpdUnit()}` : null,
+            ].filter(Boolean).join('  ·  ');
+            new Notification(`✈ NEW CONTACT: ${id}`, {
+                body: body || 'Acquired on 1090 MHz',
+                tag: plane.hex,
+                silent: true,
+            });
+        };
+
+        // ─── UNIT CONVERSION ──────────────────────────────────────────
+        let useMetric = localStorage.getItem('useMetric') === 'true';
+        document.getElementById('unitLabel').textContent = useMetric ? 'M / KM/H' : 'FT / KT';
+
+        const formatAlt = (alt) => (alt == null ? '---' : (useMetric ? Math.round(alt * 0.3048) : alt));
+        const formatSpd = (spd) => (spd == null ? '---' : (useMetric ? Math.round(spd * 1.852) : spd));
+        const getAltUnit = () => useMetric ? 'M' : 'FT';
+        const getSpdUnit = () => useMetric ? 'KM/H' : 'KT';
+
+        document.getElementById('unitToggle').addEventListener('click', () => {
+            useMetric = !useMetric;
+            localStorage.setItem('useMetric', useMetric);
+            document.getElementById('unitLabel').textContent = useMetric ? 'M / KM/H' : 'FT / KT';
+            if (selectedPlane) {
+                const plane = planes[selectedPlane.hex];
+                if (plane) {
+                    // Force full re-render by clearing currentHex
+                    document.getElementById('planeInfo').dataset.currentHex = '';
+                    updatePlaneInfo(plane);
+                    requestAnimationFrame(() => drawHistoryChart(plane));
+                }
+            }
+            updateFlightList();
+        });
+
+        // ─── REGISTRATION PREFIX → FLAG ───────────────────────────────
+        const REGISTRATION_PREFIXES = [
+            ['A9C','BH'],['A40','OM'],['A6','AE'],['A7','QA'],
+            ['4X','IL'],['4O','ME'],['4L','GE'],['4K','AZ'],
+            ['5B','CY'],['5N','NG'],['5Y','KE'],
+            ['9A','HR'],['9H','MT'],['9K','KW'],['9M','MY'],['9V','SG'],
+            ['AP','PK'],['CC','CL'],['CS','PT'],
+            ['EC','ES'],['EI','IE'],['EK','AM'],['EL','LR'],
+            ['EP','IR'],['ER','MD'],['ES','EE'],['ET','ET'],['EW','BY'],
+            ['HA','HU'],['HB','CH'],['HK','CO'],['HL','KR'],['HS','TH'],['HZ','SA'],
+            ['JA','JP'],['JY','JO'],
+            ['LN','NO'],['LV','AR'],['LX','LU'],['LY','LT'],['LZ','BG'],
+            ['OB','PE'],['OD','LB'],['OE','AT'],['OH','FI'],
+            ['OK','CZ'],['OM','SK'],['OO','BE'],['OY','DK'],
+            ['PH','NL'],['PK','ID'],['PP','BR'],['PR','BR'],['PT','BR'],
+            ['RA','RU'],['RP','PH'],
+            ['SE','SE'],['SP','PL'],['SU','EG'],['SX','GR'],['S5','SI'],
+            ['TC','TR'],['TF','IS'],
+            ['UK','UZ'],['UP','KZ'],['UR','UA'],
+            ['VH','AU'],['VN','VN'],['VT','IN'],
+            ['XA','MX'],['XB','MX'],['XC','MX'],
+            ['YA','AF'],['YI','IQ'],['YL','LV'],['YR','RO'],['YU','RS'],['YV','VE'],
+            ['ZK','NZ'],['ZS','ZA'],['ZT','ZA'],['ZU','ZA'],
+            ['B','CN'],['C','CA'],['D','DE'],['F','FR'],['G','GB'],['I','IT'],['N','US'],
+        ];
+
+        const ccToFlag = (cc) =>
+            [...cc].map(c => String.fromCodePoint(0x1F1E6 + c.charCodeAt(0) - 65)).join('');
+
+        const registrationToFlag = (reg) => {
+            if (!reg) return '';
+            const norm = reg.toUpperCase().replace(/[^A-Z0-9]/g, '');
+            for (const [prefix, cc] of REGISTRATION_PREFIXES) {
+                if (norm.startsWith(prefix)) return ccToFlag(cc);
+            }
+            return '';
+        };
+
+        // ─── AIRCRAFT INFO (hexdb.io) ─────────────────────────────────
+        const renderAircraftInfo = (plane) => {
+            const el = document.getElementById('aircraftInfo');
+            if (!el || !plane.aircraftInfo) return;
+            const { Registration, Type, RegisteredOwners } = plane.aircraftInfo;
+            const flag = registrationToFlag(Registration);
+            el.className = 'target__aircraft';
             el.innerHTML = `
-                <span class="info-panel__value">${planesCount}</span>
-                <span class="info-panel__label">aircraft tracked</span>
-                `;
+                <div class="target__aircraft-row">
+                    ${flag         ? `<span class="target__aircraft-flag">${flag}</span>` : ''}
+                    ${Registration ? `<span class="target__aircraft-reg">${Registration}</span>` : ''}
+                    ${Type         ? `<span class="target__aircraft-type">${Type}</span>` : ''}
+                </div>
+                ${RegisteredOwners ? `<div class="target__aircraft-operator">${RegisteredOwners}</div>` : ''}
+            `;
+        };
+
+        const fetchAircraftInfo = async (plane) => {
+            const el = document.getElementById('aircraftInfo');
+            if (!el) return;
+            el.className = 'target__aircraft-loading';
+            el.textContent = 'QUERYING DATABASE…';
+            try {
+                const res = await fetch(`https://hexdb.io/api/v1/aircraft/${plane.hex}`);
+                if (!res.ok) { el.textContent = ''; return; }
+                plane.aircraftInfo = await res.json();
+                renderAircraftInfo(plane);
+                updateFlightList(); // refresh flags
+            } catch {
+                el.textContent = '';
+            }
+        };
+
+        // ─── GENERAL INFO ─────────────────────────────────────────────
+        const updateGeneralInfo = () => {
+            const count = Object.keys(planes).length;
+            document.getElementById('planeCount').textContent =
+                String(count).padStart(2, '0') + ' TRACKED';
+        };
+
+        // ─── HISTORY CHART ────────────────────────────────────────────
+        const drawHistoryChart = (plane, hoverX = null) => {
+            const canvas = document.getElementById('historyChart');
+            if (!canvas || !plane.history || plane.history.length < 2) return;
+
+            const dpr = window.devicePixelRatio || 1;
+            const cssW = canvas.clientWidth || 268;
+            const cssH = 80;
+            canvas.width  = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+
+            const ctx = canvas.getContext('2d');
+            ctx.scale(dpr, dpr);
+
+            const W = cssW;
+            const H = cssH;
+            ctx.clearRect(0, 0, W, H);
+
+            const hist = plane.history;
+            const tMin = hist[0].t;
+            const tMax = hist[hist.length - 1].t;
+            const tRange = tMax - tMin || 1;
+
+            const xOf = (h) => ((h.t - tMin) / tRange) * (W - 6) + 3;
+
+            const makeYScale = (values) => {
+                const valid = values.filter(v => v != null);
+                if (valid.length < 2) return null;
+                const min = Math.min(...valid);
+                const max = Math.max(...valid);
+                const range = max - min || 1;
+                return { yOf: (v) => H - 16 - ((v - min) / range) * (H - 28) };
+            };
+
+            const altValues = hist.map(h => h.alt);
+            const spdValues = hist.map(h => h.spd);
+            const altY = makeYScale(altValues);
+            const spdY = makeYScale(spdValues);
+
+            const drawLine = (values, ys, color) => {
+                if (!ys) return;
+                const pts = [];
+                for (let i = 0; i < hist.length; i++) {
+                    if (values[i] == null) continue;
+                    pts.push([xOf(hist[i]), ys.yOf(values[i])]);
+                }
+                if (pts.length < 2) return;
+                ctx.beginPath();
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 1.5;
+                ctx.lineJoin = 'round';
+                ctx.moveTo(pts[0][0], pts[0][1]);
+                for (let i = 1; i < pts.length - 1; i++) {
+                    const mx = (pts[i][0] + pts[i + 1][0]) / 2;
+                    const my = (pts[i][1] + pts[i + 1][1]) / 2;
+                    ctx.quadraticCurveTo(pts[i][0], pts[i][1], mx, my);
+                }
+                ctx.lineTo(pts[pts.length - 1][0], pts[pts.length - 1][1]);
+                ctx.stroke();
+            };
+
+            drawLine(altValues, altY, '#50c0e0');
+            drawLine(spdValues, spdY, '#ffb800');
+
+            // Legend
+            ctx.font = '8px IBM Plex Mono, monospace';
+            ctx.fillStyle = '#50c0e0';
+            ctx.fillText(`ALT (${getAltUnit()})`, 3, H - 3);
+            ctx.fillStyle = '#ffb800';
+            ctx.fillText(`SPD (${getSpdUnit()})`, 66, H - 3);
+
+            // Hover overlay
+            if (hoverX != null && hist.length >= 2) {
+                // Find history entry closest to mouse x
+                let closestIdx = 0, minDist = Infinity;
+                for (let i = 0; i < hist.length; i++) {
+                    const d = Math.abs(xOf(hist[i]) - hoverX);
+                    if (d < minDist) { minDist = d; closestIdx = i; }
+                }
+                const h = hist[closestIdx];
+                const lineX = xOf(h);
+
+                ctx.save();
+
+                // Vertical hairline
+                ctx.beginPath();
+                ctx.strokeStyle = 'rgba(234, 244, 252, 0.30)';
+                ctx.lineWidth = 1;
+                ctx.setLineDash([3, 3]);
+                ctx.moveTo(lineX, 0);
+                ctx.lineTo(lineX, H - 14);
+                ctx.stroke();
+                ctx.setLineDash([]);
+
+                // Dots at intersection
+                if (altY && h.alt != null) {
+                    ctx.beginPath();
+                    ctx.arc(lineX, altY.yOf(h.alt), 3, 0, Math.PI * 2);
+                    ctx.fillStyle = '#50c0e0';
+                    ctx.fill();
+                }
+                if (spdY && h.spd != null) {
+                    ctx.beginPath();
+                    ctx.arc(lineX, spdY.yOf(h.spd), 3, 0, Math.PI * 2);
+                    ctx.fillStyle = '#ffb800';
+                    ctx.fill();
+                }
+
+                // Tooltip box
+                const lines = [];
+                if (h.alt != null) lines.push({ text: `${formatAlt(h.alt)} ${getAltUnit()}`, color: '#50c0e0' });
+                if (h.spd != null) lines.push({ text: `${formatSpd(h.spd)} ${getSpdUnit()}`, color: '#ffb800' });
+
+                if (lines.length) {
+                    ctx.font = '8px IBM Plex Mono, monospace';
+                    const lineH = 10, pad = 4;
+                    const boxW = Math.max(...lines.map(l => ctx.measureText(l.text).width)) + pad * 2;
+                    const boxH = lines.length * lineH + pad * 2;
+                    let boxX = lineX + 7;
+                    if (boxX + boxW > W - 2) boxX = lineX - boxW - 7;
+                    const boxY = 2;
+
+                    ctx.fillStyle = 'rgba(13, 25, 38, 0.90)';
+                    ctx.fillRect(boxX, boxY, boxW, boxH);
+                    ctx.strokeStyle = 'rgba(80, 192, 224, 0.35)';
+                    ctx.lineWidth = 0.5;
+                    ctx.strokeRect(boxX, boxY, boxW, boxH);
+
+                    lines.forEach((l, i) => {
+                        ctx.fillStyle = l.color;
+                        ctx.fillText(l.text, boxX + pad, boxY + pad + (i + 1) * lineH - 2);
+                    });
+                }
+
+                ctx.restore();
+            }
+        };
+
+        const setupChartHover = (plane) => {
+            const canvas = document.getElementById('historyChart');
+            if (!canvas) return;
+            canvas.style.cursor = 'crosshair';
+            canvas.addEventListener('mousemove', (e) => drawHistoryChart(plane, e.offsetX));
+            canvas.addEventListener('mouseleave', ()  => drawHistoryChart(plane));
+        };
+
+        // ─── FLIGHT PATH ──────────────────────────────────────────────
+        const updateFlightPath = (plane) => {
+            const latlngs = plane.history
+                .filter(h => h.lat != null && h.lon != null)
+                .map(h => [h.lat, h.lon]);
+            if (latlngs.length < 2) return;
+            if (plane.pathLine) {
+                plane.pathLine.setLatLngs(latlngs);
+            } else {
+                plane.pathLine = L.polyline(latlngs, {
+                    color: '#50c0e0',
+                    weight: 2,
+                    opacity: 0.55,
+                    dashArray: '5 6',
+                    lineCap: 'round',
+                }).addTo(map);
+            }
+        };
+
+        const clearFlightPath = (plane) => {
+            if (plane?.pathLine) {
+                map.removeLayer(plane.pathLine);
+                plane.pathLine = null;
+            }
+        };
+
+        // ─── FLIGHT LIST ──────────────────────────────────────────────
+        const updateFlightList = () => {
+            const listEl = document.getElementById('flightList');
+            const sorted = Object.values(planes).sort((a, b) => {
+                if (a.hex === selectedPlane?.hex) return -1;
+                if (b.hex === selectedPlane?.hex) return 1;
+                return (a.flight || a.hex).localeCompare(b.flight || b.hex);
+            });
+
+            listEl.innerHTML = sorted.map(p => {
+                const flag = p.aircraftInfo?.Registration
+                    ? registrationToFlag(p.aircraftInfo.Registration)
+                    : '';
+                const isSelected = p.hex === selectedPlane?.hex;
+                const alt = formatAlt(p.altitude);
+
+                const flagHtml = flag
+                    ? `<span class="flight-item__flag">${flag}</span>`
+                    : `<span class="flight-item__flag" style="opacity:0.3"><i class="fa-solid fa-plane" style="font-size:10px"></i></span>`;
+                const altHtml = alt !== '---'
+                    ? `<span class="flight-item__alt">${alt}\u00A0${getAltUnit()}</span>`
+                    : '';
+
+                return `<div class="flight-item${isSelected ? ' flight-item--selected' : ''}" data-hex="${p.hex}" onclick="window._selectByHex('${p.hex}')">${flagHtml}<span class="flight-item__callsign">${p.flight || p.hex.toUpperCase()}</span>${altHtml}</div>`;
+            }).join('');
+        };
+
+        window._selectByHex = (hex) => {
+            const plane = planes[hex];
+            if (plane) selectPlane(plane);
         };
 
-        // Update panel with new plane info
+        // ─── UPDATE PLANE INFO ────────────────────────────────────────
         const updatePlaneInfo = (newPlane) => {
-            // Exit if new plane is not found, or if we're currently showing "Copied!" feedback
             if (!newPlane || copyingHex === newPlane.hex) return;
 
-            // Update selected plane info
             const el = document.getElementById('planeInfo');
+            const hdg = newPlane.track != null
+                ? String(Math.round(newPlane.track)).padStart(3, '0')
+                : '---';
+
+            // Incremental update — same plane already rendered, just refresh values
+            if (el.dataset.currentHex === newPlane.hex) {
+                const altEl = el.querySelector('[data-field="altitude"]');
+                if (altEl) altEl.innerHTML = `${formatAlt(newPlane.altitude)}<span class="target__unit"> ${getAltUnit()}</span>`;
+
+                const spdEl = el.querySelector('[data-field="speed"]');
+                if (spdEl) spdEl.innerHTML = `${formatSpd(newPlane.speed)}<span class="target__unit"> ${getSpdUnit()}</span>`;
+
+                const hdgEl = el.querySelector('[data-field="heading"]');
+                if (hdgEl) hdgEl.innerHTML = `${hdg}<span class="target__unit">°</span>`;
+
+                const coordsEl = el.querySelector('[data-field="coords"]');
+                if (coordsEl) {
+                    coordsEl.dataset.copy = `${newPlane.lat.toFixed(4)}, ${newPlane.lon.toFixed(4)}`;
+                    coordsEl.innerHTML = `${Math.abs(newPlane.lat).toFixed(4)}°${newPlane.lat >= 0 ? 'N' : 'S'}&nbsp;&nbsp;·&nbsp;&nbsp;${Math.abs(newPlane.lon).toFixed(4)}°${newPlane.lon >= 0 ? 'E' : 'W'}`;
+                }
+
+                const msgEl = el.querySelector('[data-field="messages"]');
+                if (msgEl) msgEl.textContent = newPlane.messages ?? '---';
+
+                const seenEl = el.querySelector('[data-field="seen"]');
+                if (seenEl) seenEl.innerHTML = newPlane.seen != null
+                    ? `${newPlane.seen}<span class="target__unit">s</span>`
+                    : '---';
+
+                drawHistoryChart(newPlane);
+                return;
+            }
+
+            // Full render — first time or switching planes
+            el.dataset.currentHex = newPlane.hex;
             el.innerHTML = `
-                <div class="info-panel__flight" data-copy="${newPlane.flight || '—'}" onclick="copyField(this)" title="Click to copy">${newPlane.flight || '—'}</div>
-                <div class="info-panel__icao" data-copy="${newPlane.hex}" onclick="copyField(this)" title="Click to copy">${newPlane.hex}</div>
-                <div class="info-panel__grid">
-                    <div class="info-panel__item">
-                        <span class="info-panel__label">Altitude</span>
-                        <span class="info-panel__value" data-copy="${newPlane.altitude ?? '—'}" onclick="copyField(this)" title="Click to copy">${newPlane.altitude ?? '—'} ft</span>
+                <div class="target__callsign" data-copy="${newPlane.flight || '—'}" onclick="copyField(this)" title="Click to copy">${newPlane.flight || '--------'}</div>
+                <div class="target__icao" data-copy="${newPlane.hex}" onclick="copyField(this)" title="Click to copy">HEX&nbsp;&nbsp;·&nbsp;&nbsp;${newPlane.hex.toUpperCase()}</div>
+                <div class="target__divider">── TELEMETRY ──</div>
+                <div class="target__grid">
+                    <div class="target__cell" data-copy="${newPlane.altitude ?? '—'}" onclick="copyField(this)" title="Click to copy">
+                        <span class="target__label">ALTITUDE</span>
+                        <span class="target__value" data-field="altitude">${formatAlt(newPlane.altitude)}<span class="target__unit"> ${getAltUnit()}</span></span>
                     </div>
-                    <div class="info-panel__item">
-                        <span class="info-panel__label">Speed</span>
-                        <span class="info-panel__value" data-copy="${newPlane.speed ?? '—'}" onclick="copyField(this)" title="Click to copy">${newPlane.speed ?? '—'} kts</span>
+                    <div class="target__cell" data-copy="${newPlane.speed ?? '—'}" onclick="copyField(this)" title="Click to copy">
+                        <span class="target__label">GND SPEED</span>
+                        <span class="target__value" data-field="speed">${formatSpd(newPlane.speed)}<span class="target__unit"> ${getSpdUnit()}</span></span>
                     </div>
-                    <div class="info-panel__item">
-                        <span class="info-panel__label">Heading</span>
-                        <span class="info-panel__value" data-copy="${newPlane.track ?? '—'}" onclick="copyField(this)" title="Click to copy">${newPlane.track ?? '—'}°</span>
+                    <div class="target__cell" data-copy="${newPlane.track ?? '—'}" onclick="copyField(this)" title="Click to copy">
+                        <span class="target__label">HEADING</span>
+                        <span class="target__value" data-field="heading">${hdg}<span class="target__unit">°</span></span>
+                    </div>
+                    <div class="target__cell" title="Mode S messages received">
+                        <span class="target__label">MESSAGES</span>
+                        <span class="target__value" data-field="messages">${newPlane.messages ?? '---'}</span>
+                    </div>
+                    <div class="target__cell" title="Seconds since last message">
+                        <span class="target__label">LAST SEEN</span>
+                        <span class="target__value" data-field="seen">${newPlane.seen != null ? `${newPlane.seen}<span class="target__unit">s</span>` : '---'}</span>
                     </div>
                 </div>
-                <div class="info-panel__coords" data-copy="${newPlane.lat.toFixed(4)}, ${newPlane.lon.toFixed(4)}" onclick="copyField(this)" title="Click to copy">${newPlane.lat.toFixed(4)}, ${newPlane.lon.toFixed(4)}</div>
+                <div class="target__coords" data-field="coords" data-copy="${newPlane.lat.toFixed(4)}, ${newPlane.lon.toFixed(4)}" onclick="copyField(this)" title="Click to copy">${Math.abs(newPlane.lat).toFixed(4)}°${newPlane.lat >= 0 ? 'N' : 'S'}&nbsp;&nbsp;·&nbsp;&nbsp;${Math.abs(newPlane.lon).toFixed(4)}°${newPlane.lon >= 0 ? 'E' : 'W'}</div>
+                <div class="target__divider">── HISTORY ──</div>
+                <div class="history-chart-wrap"><canvas id="historyChart"></canvas></div>
+                <div id="aircraftInfo"></div>
             `;
+            requestAnimationFrame(() => { drawHistoryChart(newPlane); setupChartHover(newPlane); });
         };
 
-        // Copy text to clipboard when clicking on value elements
-        // Defines copyField function on the global window object to be accessible from inline onclick handlers
+        // ─── COPY FIELD ───────────────────────────────────────────────
         window.copyField = (el) => {
             const text = el.dataset.copy;
             if (!text || text === '—') return;
@@ -218,9 +1003,11 @@ <h1 class="info-panel__title">Dump1090</h1>
 
             const finish = () => {
                 const original = el.innerHTML;
-                el.innerHTML = 'Copied!';
+                el.classList.add('copied-flash');
+                el.innerHTML = '&lt;&nbsp;COPIED&nbsp;&gt;';
                 setTimeout(() => {
                     el.innerHTML = original;
+                    el.classList.remove('copied-flash');
                     copyingHex = null;
                 }, 1500);
             };
@@ -228,7 +1015,6 @@ <h1 class="info-panel__title">Dump1090</h1>
             if (navigator.clipboard) {
                 navigator.clipboard.writeText(text).then(finish);
             } else {
-                // non-secure contexts (not on https or localhost)
                 const ta = document.createElement('textarea');
                 ta.value = text;
                 ta.style.position = 'fixed';
@@ -241,12 +1027,13 @@ <h1 class="info-panel__title">Dump1090</h1>
             }
         };
 
-        // Create a custom marker with Font Awesome plane icon
+        // ─── PLANE ICON ───────────────────────────────────────────────
         const getIconForPlane = (plane) => {
-            const icon = L.divIcon({
+            const isSelected = selectedPlane?.hex === plane.hex;
+            return L.divIcon({
                 html: `
                     <div
-                        class="plane-icon__symbol${selectedPlane?.hex === plane.hex ? ' plane-icon__symbol--selected' : ''}"
+                        class="plane-icon__symbol${isSelected ? ' plane-icon__symbol--selected' : ''}"
                         style="transform: rotate(${plane.track ?? 0}deg);"
                     >
                         <i class="fa-solid fa-plane-up"></i>
@@ -256,93 +1043,112 @@ <h1 class="info-panel__title">Dump1090</h1>
                 iconSize: [32, 32],
                 iconAnchor: [16, 16]
             });
-            return icon;
         };
 
-        // Select a new plane
+        // ─── SELECT PLANE ─────────────────────────────────────────────
         const selectPlane = (newPlane) => {
-            // Exit if new plane is not found
             if (!newPlane) return;
 
-            // Update plane selection
             const oldPlane = planes[selectedPlane?.hex];
             selectedPlane = newPlane;
 
-            // Remove highlighting from the previously selected plane
+            // Swap icons
             oldPlane?.marker.setIcon(getIconForPlane(oldPlane));
-
-            // Update currently selected plane
             newPlane.marker.setIcon(getIconForPlane(newPlane));
+
+            // Swap path: clear old, draw new
+            if (oldPlane?.hex !== newPlane.hex) clearFlightPath(oldPlane);
+            updateFlightPath(newPlane);
+
+            // Force full re-render when switching planes
+            document.getElementById('planeInfo').dataset.currentHex = '';
             updatePlaneInfo(newPlane);
+            updateFlightList();
+
+            if (newPlane.aircraftInfo) renderAircraftInfo(newPlane);
+            else fetchAircraftInfo(newPlane);
         };
 
-        // Fetch planes data from the server
+        // ─── FETCH DATA ───────────────────────────────────────────────
         const fetchData = async () => {
+            const dot = document.querySelector('.header__dot');
             try {
                 const response = await fetch('/data.json');
-                if (!response.ok) return;
+                if (!response.ok) {
+                    dot.classList.add('header__dot--error');
+                    return;
+                }
+                dot.classList.remove('header__dot--error');
                 const data = await response.json();
                 const activePlanes = {};
+
                 for (const plane of data) {
-                    // Skip planes without valid coordinates
                     if (plane.lat == null || plane.lon == null) continue;
 
-                    // Build the plane list from the fetched data
-                    let marker = null;
                     activePlanes[plane.hex] = true;
                     plane.flight = plane.flight?.trim() || '';
                     const existingPlane = planes[plane.hex];
+
                     if (existingPlane) {
-                        // Update existing plane marker position
-                        marker = existingPlane.marker;
-                        marker.setLatLng([plane.lat, plane.lon]);
+                        existingPlane.marker.setLatLng([plane.lat, plane.lon]);
 
-                        // Update existing plane marker icon if track changed significantly
                         if (existingPlane.track != null && plane.track != null) {
                             let trackDelta = Math.abs(existingPlane.track - plane.track);
                             if (trackDelta > 180) trackDelta = 360 - trackDelta;
-                            if (trackDelta > 5) marker.setIcon(getIconForPlane(plane));
+                            if (trackDelta > 5) existingPlane.marker.setIcon(getIconForPlane(plane));
                         }
 
-                        // Update existing plane properties
                         existingPlane.altitude = plane.altitude;
-                        existingPlane.speed = plane.speed;
-                        existingPlane.lat = plane.lat;
-                        existingPlane.lon = plane.lon;
-                        existingPlane.track = plane.track;
-                        existingPlane.flight = plane.flight;
+                        existingPlane.speed    = plane.speed;
+                        existingPlane.lat      = plane.lat;
+                        existingPlane.lon      = plane.lon;
+                        existingPlane.track    = plane.track;
+                        existingPlane.flight   = plane.flight;
+                        existingPlane.messages = plane.messages;
+                        existingPlane.seen     = plane.seen;
+
+                        // Track history for chart + path
+                        if (!existingPlane.history) existingPlane.history = [];
+                        existingPlane.history.push({ t: Date.now(), alt: plane.altitude, spd: plane.speed, lat: plane.lat, lon: plane.lon });
+                        if (existingPlane.history.length > 300) existingPlane.history.shift();
+
+                        // Extend path polyline if this plane is selected
+                        if (existingPlane.hex === selectedPlane?.hex) updateFlightPath(existingPlane);
 
-                        // Update existing plane info in the panel if it is selected
                         if (existingPlane.hex === selectedPlane?.hex) {
                             updatePlaneInfo(existingPlane);
                         }
                     } else {
-                        // Create a new marker for new planes
-                        const icon = getIconForPlane(plane);
-                        marker = L.marker([plane.lat, plane.lon], { icon: icon }).addTo(map);
+                        plane.history = [{ t: Date.now(), alt: plane.altitude, spd: plane.speed, lat: plane.lat, lon: plane.lon }];
+                        const marker = L.marker([plane.lat, plane.lon], { icon: getIconForPlane(plane) }).addTo(map);
                         plane.marker = marker;
                         planes[plane.hex] = plane;
                         marker.on('click', () => selectPlane(planes[plane.hex]));
+                        notifyNewPlane(plane);
                     }
                 }
 
-                // Remove idle planes
+                // Remove planes that dropped out of the feed
                 for (const plane of Object.values(planes)) {
                     if (!activePlanes[plane.hex]) {
+                        clearFlightPath(plane);
                         map.removeLayer(plane.marker);
                         delete planes[plane.hex];
                         if (selectedPlane?.hex === plane.hex) {
                             selectedPlane = null;
-                            document.getElementById('planeInfo').innerHTML = 'Click on a plane for info';
+                            const el = document.getElementById('planeInfo');
+                            el.dataset.currentHex = '';
+                            el.innerHTML = '<p class="target__standby">No target selected</p>';
                         }
                     }
                 }
             } catch (error) {
+                dot.classList.add('header__dot--error');
                 console.error('Error fetching data:', error);
             }
         };
 
-        // Make info panel draggable
+        // ─── DRAGGABLE PANEL ──────────────────────────────────────────
         interact('#info-panel').draggable({
             allowFrom: '.info-panel__header',
             listeners: {
@@ -357,33 +1163,32 @@ <h1 class="info-panel__title">Dump1090</h1>
             }
         });
 
-        // Initialize Leaflet instance
-        const savedView = JSON.parse(localStorage.getItem('mapView'));
-        map = L.map('canvas').setView(
-            savedView ? [savedView.lat, savedView.lng] : [37.0, 13.0],
-            savedView ? savedView.zoom : 8
-        );
+        // ─── MAP INIT ─────────────────────────────────────────────────
+        map = L.map('canvas').setView([37.0, 13.0], 8);
 
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            maxZoom: 19,
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/">CARTO</a>',
+            subdomains: 'abcd',
+            maxZoom: 19
         }).addTo(map);
 
-        map.on('moveend', () => {
-            const center = map.getCenter();
-            localStorage.setItem('mapView', JSON.stringify({
-                lat: center.lat,
-                lng: center.lng,
-                zoom: map.getZoom()
-            }));
-        });
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                (pos) => map.setView([pos.coords.latitude, pos.coords.longitude], 10),
+                () => {}
+            );
+        }
 
-        // Setup a timer to poll from the server
-        setInterval(() => {
-            fetchData();
+        // ─── POLLING LOOP ─────────────────────────────────────────────
+        const poll = async () => {
+            await fetchData();
             updateGeneralInfo();
-        }, 100);
+            updateFlightList();
+            initialLoadDone = true;
+        };
+        poll();
+        setInterval(poll, 1000);
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
