diff --git a/internal/server/server.go b/internal/server/server.go
index d47d1e7..ed90f4e 100644
--- a/internal/server/server.go
+++ b/internal/server/server.go
@@ -410,8 +410,7 @@ func (s *Server) handleFavicon(w http.ResponseWriter, r *http.Request) {
 
 func (s *Server) staticFileHandler() http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		// Remove /static/ prefix from URL path to get the actual file path
-		filePath := "static" + r.URL.Path[len("/static"):]
+		filePath := "static" + r.URL.Path
 		
 		data, err := s.staticFiles.ReadFile(filePath)
 		if err != nil {
diff --git a/static/index.html b/static/index.html
index 5dd05b6..d8b3b0f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,35 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkyView - Multi-Source ADS-B Aircraft Tracker</title>
+    <title>SkyView - ADS-B Aircraft Tracker</title>
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
-    
-    <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    
-    <!-- Chart.js -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
-    
-    <!-- Three.js for 3D radar (ES modules) -->
-    <script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
-        }
-    }
-    </script>
-    
-    <!-- Custom CSS -->
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <div id="app">
         <header class="header">
             <h1>SkyView</h1>
-            
-            <!-- Status indicators -->
-            <div class="status-section">
+            <div class="clock-section">
                 <div class="clock-display">
                     <div class="clock" id="utc-clock">
                         <div class="clock-face">
@@ -49,38 +30,27 @@
                     </div>
                 </div>
             </div>
-            
-            <!-- Summary stats -->
             <div class="stats-summary">
                 <span id="aircraft-count">0 aircraft</span>
-                <span id="sources-count">0 sources</span>
-                <span id="connection-status" class="connection-status disconnected">Connecting...</span>
+                <span id="connection-status" class="connected">Connected</span>
             </div>
         </header>
 
         <main class="main-content">
-            <!-- View selection tabs -->
             <div class="view-toggle">
                 <button id="map-view-btn" class="view-btn active">Map</button>
                 <button id="table-view-btn" class="view-btn">Table</button>
-                <button id="stats-view-btn" class="view-btn">Statistics</button>
-                <button id="coverage-view-btn" class="view-btn">Coverage</button>
-                <button id="radar3d-view-btn" class="view-btn">3D Radar</button>
+                <button id="stats-view-btn" class="view-btn">Stats</button>
             </div>
 
-            <!-- Map View -->
             <div id="map-view" class="view active">
                 <div id="map"></div>
-                
-                <!-- Map controls -->
                 <div class="map-controls">
-                    <button id="center-map" title="Center on aircraft">Center Map</button>
-                    <button id="toggle-trails" title="Show/hide aircraft trails">Show Trails</button>
-                    <button id="toggle-range" title="Show/hide range circles">Show Range</button>
-                    <button id="toggle-sources" title="Show/hide source locations">Show Sources</button>
+                    <button id="center-map">Center Map</button>
+                    <button id="toggle-trails">Toggle Trails</button>
+                    <button id="toggle-history">Show History</button>
                 </div>
                 
-                <!-- Legend -->
                 <div class="legend">
                     <h4>Aircraft Types</h4>
                     <div class="legend-item">
@@ -103,13 +73,9 @@
                         <span class="legend-icon ground"></span>
                         <span>Ground</span>
                     </div>
-                    
-                    <h4>Sources</h4>
-                    <div id="sources-legend"></div>
                 </div>
             </div>
 
-            <!-- Table View -->
             <div id="table-view" class="view">
                 <div class="table-controls">
                     <input type="text" id="search-input" placeholder="Search by flight, ICAO, or squawk...">
@@ -120,11 +86,8 @@
                         <option value="flight">Flight</option>
                         <option value="icao">ICAO</option>
                         <option value="squawk">Squawk</option>
-                        <option value="signal">Signal</option>
                         <option value="age">Age</option>
-                    </select>
-                    <select id="source-filter">
-                        <option value="">All Sources</option>
+                        <option value="rssi">RSSI</option>
                     </select>
                 </div>
                 <div class="table-container">
@@ -138,9 +101,9 @@
                                 <th>Speed</th>
                                 <th>Distance</th>
                                 <th>Track</th>
-                                <th>Sources</th>
-                                <th>Signal</th>
+                                <th>Msgs</th>
                                 <th>Age</th>
+                                <th>RSSI</th>
                             </tr>
                         </thead>
                         <tbody id="aircraft-tbody">
@@ -149,78 +112,41 @@
                 </div>
             </div>
 
-            <!-- Statistics View -->
             <div id="stats-view" class="view">
                 <div class="stats-grid">
                     <div class="stat-card">
                         <h3>Total Aircraft</h3>
                         <div class="stat-value" id="total-aircraft">0</div>
                     </div>
-                    <div class="stat-card">
-                        <h3>Active Sources</h3>
-                        <div class="stat-value" id="active-sources">0</div>
-                    </div>
                     <div class="stat-card">
                         <h3>Messages/sec</h3>
                         <div class="stat-value" id="messages-sec">0</div>
                     </div>
+                    <div class="stat-card">
+                        <h3>Avg RSSI</h3>
+                        <div class="stat-value" id="signal-strength">0 dBFS</div>
+                    </div>
                     <div class="stat-card">
                         <h3>Max Range</h3>
-                        <div class="stat-value" id="max-range">0 km</div>
+                        <div class="stat-value" id="max-range">0 nm</div>
                     </div>
                 </div>
-                
-                <!-- Charts -->
                 <div class="charts-container">
                     <div class="chart-card">
-                        <h3>Aircraft Count Timeline</h3>
+                        <h3>Aircraft Count (24h)</h3>
                         <canvas id="aircraft-chart"></canvas>
                     </div>
                     <div class="chart-card">
-                        <h3>Message Rate by Source</h3>
+                        <h3>Message Rate</h3>
                         <canvas id="message-chart"></canvas>
                     </div>
-                    <div class="chart-card">
-                        <h3>Signal Strength Distribution</h3>
-                        <canvas id="signal-chart"></canvas>
-                    </div>
-                    <div class="chart-card">
-                        <h3>Altitude Distribution</h3>
-                        <canvas id="altitude-chart"></canvas>
-                    </div>
                 </div>
             </div>
-
-            <!-- Coverage View -->
-            <div id="coverage-view" class="view">
-                <div class="coverage-controls">
-                    <select id="coverage-source">
-                        <option value="">Select Source</option>
-                    </select>
-                    <button id="toggle-heatmap">Toggle Heatmap</button>
-                </div>
-                <div id="coverage-map"></div>
-            </div>
-
-            <!-- 3D Radar View -->
-            <div id="radar3d-view" class="view">
-                <div class="radar3d-controls">
-                    <button id="radar3d-reset">Reset View</button>
-                    <button id="radar3d-auto-rotate">Auto Rotate</button>
-                    <label>
-                        <input type="range" id="radar3d-range" min="10" max="500" value="100">
-                        Range: <span id="radar3d-range-value">100</span> km
-                    </label>
-                </div>
-                <div id="radar3d-container"></div>
-            </div>
         </main>
     </div>
 
-    <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    
-    <!-- Custom JS -->
-    <script type="module" src="/static/js/app.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <script src="/static/js/app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/js/app.js b/static/js/app.js
index a94cd9e..c69a031 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,60 +1,46 @@
-// Import Three.js modules
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
 class SkyView {
     constructor() {
         this.map = null;
-        this.coverageMap = null;
-        this.radar3d = null;
-        this.websocket = null;
-        
-        // Data storage
-        this.aircraftData = new Map();
-        this.sourcesData = new Map();
-        this.stats = {};
-        
-        // Map markers and overlays
         this.aircraftMarkers = new Map();
-        this.sourceMarkers = new Map();
         this.aircraftTrails = new Map();
-        this.rangeCircles = new Map();
-        this.heatmapLayer = null;
-        
-        // UI state
-        this.currentView = 'map';
+        this.historicalTracks = new Map();
+        this.websocket = null;
+        this.aircraftData = [];
         this.showTrails = false;
-        this.showRange = false;
-        this.showSources = true;
-        this.selectedSource = null;
-        
-        // Charts
+        this.showHistoricalTracks = false;
+        this.currentView = 'map';
         this.charts = {};
-        
-        // Update tracking
+        this.origin = { latitude: 37.7749, longitude: -122.4194, name: 'Default' };
         this.lastUpdateTime = new Date();
         
         this.init();
     }
 
-    async init() {
-        try {
+    init() {
+        this.loadConfig().then(() => {
             this.initializeViews();
             this.initializeMap();
-            await this.initializeWebSocket();
+            this.initializeWebSocket();
             this.initializeEventListeners();
             this.initializeCharts();
             this.initializeClocks();
-            this.initialize3DRadar();
             
-            this.startPeriodicTasks();
+            this.startPeriodicUpdates();
+        });
+    }
+
+    async loadConfig() {
+        try {
+            const response = await fetch('/api/config');
+            const config = await response.json();
+            if (config.origin) {
+                this.origin = config.origin;
+            }
         } catch (error) {
-            console.error('Initialization failed:', error);
-            this.showError('Failed to initialize application');
+            console.warn('Failed to load config, using defaults:', error);
         }
     }
 
-    // View Management
     initializeViews() {
         const viewButtons = document.querySelectorAll('.view-btn');
         const views = document.querySelectorAll('.view');
@@ -63,800 +49,107 @@ class SkyView {
             btn.addEventListener('click', () => {
                 const viewId = btn.id.replace('-btn', '');
                 this.switchView(viewId);
+                
+                viewButtons.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                views.forEach(v => v.classList.remove('active'));
+                document.getElementById(viewId).classList.add('active');
             });
         });
     }
 
-    switchView(viewId) {
-        // Update buttons
-        document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
-        document.getElementById(`${viewId}-btn`).classList.add('active');
-        
-        // Update views
-        document.querySelectorAll('.view').forEach(view => view.classList.remove('active'));
-        document.getElementById(`${viewId}-view`).classList.add('active');
-        
-        this.currentView = viewId;
-        
-        // Handle view-specific initialization
-        switch (viewId) {
-            case 'coverage':
-                this.initializeCoverageMap();
-                break;
-            case 'radar3d':
-                this.update3DRadar();
-                break;
+    switchView(view) {
+        this.currentView = view;
+        if (view === 'map' && this.map) {
+            setTimeout(() => this.map.invalidateSize(), 100);
         }
     }
 
-    // Map Initialization
     initializeMap() {
-        this.map = L.map('map').setView([51.4700, -0.4600], 10);
-        
-        // Dark tile layer
-        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> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 19
-        }).addTo(this.map);
-        
-        // Map controls
-        document.getElementById('center-map').addEventListener('click', () => this.centerMapOnAircraft());
-        document.getElementById('toggle-trails').addEventListener('click', () => this.toggleTrails());
-        document.getElementById('toggle-range').addEventListener('click', () => this.toggleRangeCircles());
-        document.getElementById('toggle-sources').addEventListener('click', () => this.toggleSources());
-    }
-
-    initializeCoverageMap() {
-        if (!this.coverageMap) {
-            this.coverageMap = L.map('coverage-map').setView([51.4700, -0.4600], 10);
-            
-            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> contributors'
-            }).addTo(this.coverageMap);
-        }
-        
-        // Update coverage controls
-        this.updateCoverageControls();
-        
-        // Coverage controls
-        document.getElementById('toggle-heatmap').addEventListener('click', () => this.toggleHeatmap());
-        document.getElementById('coverage-source').addEventListener('change', (e) => {
-            this.selectedSource = e.target.value;
-            this.updateCoverageDisplay();
+        this.map = L.map('map', {
+            center: [this.origin.latitude, this.origin.longitude],
+            zoom: 8,
+            zoomControl: true
         });
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(this.map);
+
+        L.marker([this.origin.latitude, this.origin.longitude], {
+            icon: L.divIcon({
+                html: '<div style="background: #e74c3c; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white;"></div>',
+                className: 'origin-marker',
+                iconSize: [16, 16],
+                iconAnchor: [8, 8]
+            })
+        }).addTo(this.map).bindPopup(`<b>Origin</b><br>${this.origin.name}`);
+
+        L.circle([this.origin.latitude, this.origin.longitude], {
+            radius: 185200,
+            fillColor: 'transparent',
+            color: '#404040',
+            weight: 1,
+            opacity: 0.5
+        }).addTo(this.map);
+
+        const centerBtn = document.getElementById('center-map');
+        centerBtn.addEventListener('click', () => this.centerMapOnAircraft());
+
+        const trailsBtn = document.getElementById('toggle-trails');
+        trailsBtn.addEventListener('click', () => this.toggleTrails());
+        
+        const historyBtn = document.getElementById('toggle-history');
+        historyBtn.addEventListener('click', () => this.toggleHistoricalTracks());
     }
 
-    // WebSocket Connection
-    async initializeWebSocket() {
+    initializeWebSocket() {
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
         const wsUrl = `${protocol}//${window.location.host}/ws`;
         
-        try {
-            this.websocket = new WebSocket(wsUrl);
-            
-            this.websocket.onopen = () => {
-                console.log('WebSocket connected');
-                this.updateConnectionStatus('connected');
-            };
-            
-            this.websocket.onclose = () => {
-                console.log('WebSocket disconnected');
-                this.updateConnectionStatus('disconnected');
-                // Reconnect after 5 seconds
-                setTimeout(() => this.initializeWebSocket(), 5000);
-            };
-            
-            this.websocket.onerror = (error) => {
-                console.error('WebSocket error:', error);
-                this.updateConnectionStatus('disconnected');
-            };
-            
-            this.websocket.onmessage = (event) => {
-                try {
-                    const message = JSON.parse(event.data);
-                    this.handleWebSocketMessage(message);
-                } catch (error) {
-                    console.error('Failed to parse WebSocket message:', error);
-                }
-            };
-            
-        } catch (error) {
-            console.error('WebSocket connection failed:', error);
-            this.updateConnectionStatus('disconnected');
-        }
-    }
-
-    handleWebSocketMessage(message) {
-        switch (message.type) {
-            case 'initial_data':
-            case 'aircraft_update':
-                this.updateData(message.data);
-                break;
-            default:
-                console.log('Unknown message type:', message.type);
-        }
-    }
-
-    updateData(data) {
-        // Update aircraft data
-        if (data.aircraft) {
-            this.aircraftData.clear();
-            for (const [icao, aircraft] of Object.entries(data.aircraft)) {
-                this.aircraftData.set(icao, aircraft);
-            }
-        }
+        this.websocket = new WebSocket(wsUrl);
         
-        // Update sources data
-        if (data.sources) {
-            this.sourcesData.clear();
-            data.sources.forEach(source => {
-                this.sourcesData.set(source.id, source);
-            });
-        }
-        
-        // Update statistics
-        if (data.stats) {
-            this.stats = data.stats;
-        }
-        
-        this.lastUpdateTime = new Date();
-        
-        // Update UI
-        this.updateMapMarkers();
-        this.updateAircraftTable();
-        this.updateStatistics();
-        this.updateHeaderInfo();
-        
-        if (this.currentView === 'radar3d') {
-            this.update3DRadar();
-        }
-    }
-
-    // Map Updates
-    updateMapMarkers() {
-        // Clear stale aircraft markers
-        const currentICAOs = new Set(this.aircraftData.keys());
-        for (const [icao, marker] of this.aircraftMarkers) {
-            if (!currentICAOs.has(icao)) {
-                this.map.removeLayer(marker);
-                this.aircraftMarkers.delete(icao);
-                this.aircraftTrails.delete(icao);
-            }
-        }
-        
-        // Update aircraft markers
-        for (const [icao, aircraft] of this.aircraftData) {
-            if (aircraft.Latitude && aircraft.Longitude) {
-                this.updateAircraftMarker(icao, aircraft);
-            }
-        }
-        
-        // Update source markers
-        if (this.showSources) {
-            this.updateSourceMarkers();
-        }
-        
-        // Update range circles
-        if (this.showRange) {
-            this.updateRangeCircles();
-        }
-    }
-
-    updateAircraftMarker(icao, aircraft) {
-        const pos = [aircraft.Latitude, aircraft.Longitude];
-        
-        if (this.aircraftMarkers.has(icao)) {
-            // Update existing marker
-            const marker = this.aircraftMarkers.get(icao);
-            marker.setLatLng(pos);
-            this.updateMarkerRotation(marker, aircraft.Track || 0);
-            this.updatePopupContent(marker, aircraft);
-        } else {
-            // Create new marker
-            const icon = this.createAircraftIcon(aircraft);
-            const marker = L.marker(pos, { 
-                icon: icon,
-                rotationAngle: aircraft.Track || 0
-            }).addTo(this.map);
-            
-            marker.bindPopup(this.createPopupContent(aircraft), {
-                maxWidth: 450,
-                className: 'aircraft-popup'
-            });
-            
-            this.aircraftMarkers.set(icao, marker);
-        }
-        
-        // Update trails
-        if (this.showTrails) {
-            this.updateAircraftTrail(icao, pos);
-        }
-    }
-
-    createAircraftIcon(aircraft) {
-        const type = this.getAircraftType(aircraft);
-        const color = this.getAircraftColor(type);
-        const size = aircraft.OnGround ? 12 : 16;
-        
-        const svg = `
-            <svg width="${size * 2}" height="${size * 2}" viewBox="0 0 32 32">
-                <g transform="translate(16,16)">
-                    <path d="M0,-12 L-8,8 L-2,8 L0,12 L2,8 L8,8 Z" 
-                          fill="${color}" 
-                          stroke="#ffffff" 
-                          stroke-width="1"
-                          filter="drop-shadow(0 0 4px rgba(0,212,255,0.8))"/>
-                </g>
-            </svg>
-        `;
-        
-        return L.divIcon({
-            html: svg,
-            iconSize: [size * 2, size * 2],
-            iconAnchor: [size, size],
-            className: 'aircraft-marker'
-        });
-    }
-
-    getAircraftType(aircraft) {
-        if (aircraft.OnGround) return 'ground';
-        if (aircraft.Category) {
-            const cat = aircraft.Category.toLowerCase();
-            if (cat.includes('military')) return 'military';
-            if (cat.includes('cargo') || cat.includes('heavy')) return 'cargo';
-            if (cat.includes('light') || cat.includes('glider')) return 'ga';
-        }
-        if (aircraft.Callsign) {
-            const cs = aircraft.Callsign.toLowerCase();
-            if (cs.includes('mil') || cs.includes('army') || cs.includes('navy')) return 'military';
-            if (cs.includes('cargo') || cs.includes('fedex') || cs.includes('ups')) return 'cargo';
-        }
-        return 'commercial';
-    }
-
-    getAircraftColor(type) {
-        const colors = {
-            commercial: '#00ff88',
-            cargo: '#ff8c00',
-            military: '#ff4444',
-            ga: '#ffff00',
-            ground: '#888888'
+        this.websocket.onopen = () => {
+            document.getElementById('connection-status').textContent = 'Connected';
+            document.getElementById('connection-status').className = 'connection-status connected';
         };
-        return colors[type] || colors.commercial;
-    }
-
-    updateMarkerRotation(marker, track) {
-        if (marker._icon) {
-            marker._icon.style.transform = `rotate(${track}deg)`;
-        }
-    }
-
-    updateSourceMarkers() {
-        // Clear existing source markers
-        this.sourceMarkers.forEach(marker => this.map.removeLayer(marker));
-        this.sourceMarkers.clear();
         
-        // Add source markers
-        for (const [id, source] of this.sourcesData) {
-            if (source.latitude && source.longitude) {
-                const marker = L.circleMarker([source.latitude, source.longitude], {
-                    radius: source.active ? 10 : 6,
-                    fillColor: source.active ? '#00d4ff' : '#666666',
-                    color: '#ffffff',
-                    weight: 2,
-                    fillOpacity: 0.8,
-                    className: 'source-marker'
-                }).addTo(this.map);
-                
-                marker.bindPopup(this.createSourcePopupContent(source), {
-                    maxWidth: 300
-                });
-                
-                this.sourceMarkers.set(id, marker);
+        this.websocket.onclose = () => {
+            document.getElementById('connection-status').textContent = 'Disconnected';
+            document.getElementById('connection-status').className = 'connection-status disconnected';
+            setTimeout(() => this.initializeWebSocket(), 5000);
+        };
+        
+        this.websocket.onmessage = (event) => {
+            const message = JSON.parse(event.data);
+            if (message.type === 'aircraft_update') {
+                this.updateAircraftData(message.data);
             }
-        }
-        
-        this.updateSourcesLegend();
+        };
     }
 
-    updateRangeCircles() {
-        // Clear existing circles
-        this.rangeCircles.forEach(circle => this.map.removeLayer(circle));
-        this.rangeCircles.clear();
-        
-        // Add range circles for active sources
-        for (const [id, source] of this.sourcesData) {
-            if (source.active && source.latitude && source.longitude) {
-                // Add multiple range circles (50km, 100km, 200km)
-                const ranges = [50000, 100000, 200000];
-                ranges.forEach((range, index) => {
-                    const circle = L.circle([source.latitude, source.longitude], {
-                        radius: range,
-                        fillColor: 'transparent',
-                        color: '#00d4ff',
-                        weight: 1,
-                        opacity: 0.3 - (index * 0.1),
-                        dashArray: '5,5'
-                    }).addTo(this.map);
-                    
-                    this.rangeCircles.set(`${id}_${range}`, circle);
-                });
-            }
-        }
-    }
-
-    updateAircraftTrail(icao, pos) {
-        if (!this.aircraftTrails.has(icao)) {
-            this.aircraftTrails.set(icao, []);
-        }
-        
-        const trail = this.aircraftTrails.get(icao);
-        trail.push(pos);
-        
-        // Keep only last 50 positions
-        if (trail.length > 50) {
-            trail.shift();
-        }
-        
-        // Draw polyline
-        const trailLine = L.polyline(trail, {
-            color: '#00d4ff',
-            weight: 2,
-            opacity: 0.6
-        }).addTo(this.map);
-        
-        // Store reference for cleanup
-        if (!this.aircraftTrails.get(icao).polyline) {
-            this.aircraftTrails.get(icao).polyline = trailLine;
-        } else {
-            this.map.removeLayer(this.aircraftTrails.get(icao).polyline);
-            this.aircraftTrails.get(icao).polyline = trailLine;
-        }
-    }
-
-    // Popup Content
-    createPopupContent(aircraft) {
-        const type = this.getAircraftType(aircraft);
-        const country = this.getCountryFromICAO(aircraft.ICAO24 ? aircraft.ICAO24.toString(16).toUpperCase() : '');
-        const flag = this.getCountryFlag(country);
-        
-        const altitude = aircraft.Altitude || aircraft.BaroAltitude || 0;
-        const altitudeM = altitude ? Math.round(altitude * 0.3048) : 0;
-        const speedKmh = aircraft.GroundSpeed ? Math.round(aircraft.GroundSpeed * 1.852) : 0;
-        const distance = this.calculateDistance(aircraft);
-        const distanceKm = distance ? (distance * 1.852).toFixed(1) : 'N/A';
-        
-        const sources = aircraft.Sources ? Object.keys(aircraft.Sources).map(id => {
-            const source = this.sourcesData.get(id);
-            const srcData = aircraft.Sources[id];
-            return `<span class="source-badge" title="Signal: ${srcData.SignalLevel?.toFixed(1)} dBFS">
-                        ${source?.name || id}
-                    </span>`;
-        }).join('') : 'N/A';
-        
-        return `
-            <div class="aircraft-popup">
-                <div class="popup-header">
-                    <div class="flight-info">
-                        <span class="icao-flag">${flag}</span>
-                        <span class="flight-id">${aircraft.ICAO24 ? aircraft.ICAO24.toString(16).toUpperCase() : 'N/A'}</span>
-                        ${aircraft.Callsign ? `→ <span class="callsign">${aircraft.Callsign}</span>` : ''}
-                    </div>
-                </div>
-                
-                <div class="popup-details">
-                    <div class="detail-row">
-                        <strong>Country:</strong> ${country}
-                    </div>
-                    <div class="detail-row">
-                        <strong>Type:</strong> ${type.charAt(0).toUpperCase() + type.slice(1)}
-                    </div>
-                    
-                    <div class="detail-grid">
-                        <div class="detail-item">
-                            <div class="label">Altitude:</div>
-                            <div class="value">${altitude ? `${altitude} ft | ${altitudeM} m` : 'N/A'}</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="label">Squawk:</div>
-                            <div class="value">${aircraft.Squawk || 'N/A'}</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="label">Speed:</div>
-                            <div class="value">${aircraft.GroundSpeed ? `${aircraft.GroundSpeed} kt | ${speedKmh} km/h` : 'N/A'}</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="label">Track:</div>
-                            <div class="value">${aircraft.Track ? `${aircraft.Track}°` : 'N/A'}</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="label">V/Rate:</div>
-                            <div class="value">${aircraft.VerticalRate ? `${aircraft.VerticalRate} ft/min` : 'N/A'}</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="label">Distance:</div>
-                            <div class="value">${distanceKm} km</div>
-                        </div>
-                    </div>
-                    
-                    <div class="sources-info">
-                        <strong>Sources:</strong><br>
-                        ${sources}
-                    </div>
-                    
-                    <div class="detail-row">
-                        <strong>Position:</strong> ${aircraft.Latitude?.toFixed(4)}°, ${aircraft.Longitude?.toFixed(4)}°
-                    </div>
-                    <div class="detail-row">
-                        <strong>Messages:</strong> ${aircraft.TotalMessages || 0}
-                    </div>
-                    <div class="detail-row">
-                        <strong>Age:</strong> ${aircraft.Age ? aircraft.Age.toFixed(1) : '0'}s
-                    </div>
-                </div>
-            </div>
-        `;
-    }
-
-    updatePopupContent(marker, aircraft) {
-        if (marker && marker.isPopupOpen()) {
-            const newContent = this.createPopupContent(aircraft);
-            marker.setPopupContent(newContent);
-        }
-    }
-
-    createSourcePopupContent(source) {
-        const aircraftCount = Array.from(this.aircraftData.values())
-            .filter(aircraft => aircraft.Sources && aircraft.Sources[source.id]).length;
-        
-        return `
-            <div class="source-popup">
-                <h3>${source.name}</h3>
-                <p><strong>ID:</strong> ${source.id}</p>
-                <p><strong>Location:</strong> ${source.latitude.toFixed(4)}°, ${source.longitude.toFixed(4)}°</p>
-                <p><strong>Status:</strong> ${source.active ? 'Active' : 'Inactive'}</p>
-                <p><strong>Aircraft:</strong> ${aircraftCount}</p>
-                <p><strong>Messages:</strong> ${source.messages || 0}</p>
-                <p><strong>Last Seen:</strong> ${source.last_seen ? new Date(source.last_seen).toLocaleString() : 'N/A'}</p>
-            </div>
-        `;
-    }
-
-    updateSourcesLegend() {
-        const legend = document.getElementById('sources-legend');
-        legend.innerHTML = '';
-        
-        for (const [id, source] of this.sourcesData) {
-            const item = document.createElement('div');
-            item.className = 'legend-item';
-            item.innerHTML = `
-                <span class="legend-icon" style="background: ${source.active ? '#00d4ff' : '#666666'}"></span>
-                <span title="${source.host}:${source.port}">${source.name}</span>
-            `;
-            legend.appendChild(item);
-        }
-    }
-
-    // Table Management
-    updateAircraftTable() {
-        const tbody = document.getElementById('aircraft-tbody');
-        tbody.innerHTML = '';
-        
-        let filteredData = Array.from(this.aircraftData.values());
-        
-        // Apply filters
-        const searchTerm = document.getElementById('search-input').value.toLowerCase();
-        const sourceFilter = document.getElementById('source-filter').value;
-        
-        if (searchTerm) {
-            filteredData = filteredData.filter(aircraft =>
-                (aircraft.Callsign && aircraft.Callsign.toLowerCase().includes(searchTerm)) ||
-                (aircraft.ICAO24 && aircraft.ICAO24.toString(16).toLowerCase().includes(searchTerm)) ||
-                (aircraft.Squawk && aircraft.Squawk.includes(searchTerm))
-            );
-        }
-        
-        if (sourceFilter) {
-            filteredData = filteredData.filter(aircraft =>
-                aircraft.Sources && aircraft.Sources[sourceFilter]
-            );
-        }
-        
-        // Sort data
-        const sortBy = document.getElementById('sort-select').value;
-        this.sortAircraft(filteredData, sortBy);
-        
-        // Populate table
-        filteredData.forEach(aircraft => {
-            const row = this.createTableRow(aircraft);
-            tbody.appendChild(row);
-        });
-        
-        // Update source filter options
-        this.updateSourceFilter();
-    }
-
-    createTableRow(aircraft) {
-        const type = this.getAircraftType(aircraft);
-        const icao = aircraft.ICAO24 ? aircraft.ICAO24.toString(16).toUpperCase() : 'N/A';
-        const altitude = aircraft.Altitude || aircraft.BaroAltitude || 0;
-        const distance = this.calculateDistance(aircraft);
-        const sources = aircraft.Sources ? Object.keys(aircraft.Sources).length : 0;
-        const bestSignal = this.getBestSignalFromSources(aircraft.Sources);
-        
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td><span class="type-badge ${type}">${icao}</span></td>
-            <td>${aircraft.Callsign || '-'}</td>
-            <td>${aircraft.Squawk || '-'}</td>
-            <td>${altitude ? `${altitude} ft` : '-'}</td>
-            <td>${aircraft.GroundSpeed || '-'} kt</td>
-            <td>${distance ? distance.toFixed(1) : '-'} km</td>
-            <td>${aircraft.Track || '-'}°</td>
-            <td>${sources}</td>
-            <td><span class="${this.getSignalClass(bestSignal)}">${bestSignal ? bestSignal.toFixed(1) : '-'}</span></td>
-            <td>${aircraft.Age ? aircraft.Age.toFixed(0) : '0'}s</td>
-        `;
-        
-        row.addEventListener('click', () => {
-            if (aircraft.Latitude && aircraft.Longitude) {
-                this.switchView('map');
-                this.map.setView([aircraft.Latitude, aircraft.Longitude], 12);
-                const marker = this.aircraftMarkers.get(icao);
-                if (marker) {
-                    marker.openPopup();
-                }
-            }
-        });
-        
-        return row;
-    }
-
-    getBestSignalFromSources(sources) {
-        if (!sources) return null;
-        let bestSignal = -999;
-        for (const [id, data] of Object.entries(sources)) {
-            if (data.SignalLevel > bestSignal) {
-                bestSignal = data.SignalLevel;
-            }
-        }
-        return bestSignal === -999 ? null : bestSignal;
-    }
-
-    getSignalClass(signal) {
-        if (!signal) return '';
-        if (signal > -10) return 'signal-strong';
-        if (signal > -20) return 'signal-good';
-        if (signal > -30) return 'signal-weak';
-        return 'signal-poor';
-    }
-
-    updateSourceFilter() {
-        const select = document.getElementById('source-filter');
-        const currentValue = select.value;
-        
-        // Clear options except "All Sources"
-        select.innerHTML = '<option value="">All Sources</option>';
-        
-        // Add source options
-        for (const [id, source] of this.sourcesData) {
-            const option = document.createElement('option');
-            option.value = id;
-            option.textContent = source.name;
-            if (id === currentValue) option.selected = true;
-            select.appendChild(option);
-        }
-    }
-
-    sortAircraft(aircraft, sortBy) {
-        aircraft.sort((a, b) => {
-            switch (sortBy) {
-                case 'distance':
-                    return (this.calculateDistance(a) || Infinity) - (this.calculateDistance(b) || Infinity);
-                case 'altitude':
-                    return (b.Altitude || b.BaroAltitude || 0) - (a.Altitude || a.BaroAltitude || 0);
-                case 'speed':
-                    return (b.GroundSpeed || 0) - (a.GroundSpeed || 0);
-                case 'flight':
-                    return (a.Callsign || a.ICAO24?.toString(16) || '').localeCompare(b.Callsign || b.ICAO24?.toString(16) || '');
-                case 'icao':
-                    return (a.ICAO24?.toString(16) || '').localeCompare(b.ICAO24?.toString(16) || '');
-                case 'squawk':
-                    return (a.Squawk || '').localeCompare(b.Squawk || '');
-                case 'signal':
-                    return (this.getBestSignalFromSources(b.Sources) || -999) - (this.getBestSignalFromSources(a.Sources) || -999);
-                case 'age':
-                    return (a.Age || 0) - (b.Age || 0);
-                default:
-                    return 0;
-            }
-        });
-    }
-
-    // Statistics
-    updateStatistics() {
-        document.getElementById('total-aircraft').textContent = this.aircraftData.size;
-        document.getElementById('active-sources').textContent = 
-            Array.from(this.sourcesData.values()).filter(s => s.active).length;
-        
-        // Calculate max range
-        let maxDistance = 0;
-        for (const aircraft of this.aircraftData.values()) {
-            const distance = this.calculateDistance(aircraft);
-            if (distance && distance > maxDistance) {
-                maxDistance = distance;
-            }
-        }
-        document.getElementById('max-range').textContent = `${maxDistance.toFixed(1)} km`;
-        
-        // Update message rate
-        const totalMessages = this.stats.total_messages || 0;
-        document.getElementById('messages-sec').textContent = Math.round(totalMessages / 60);
-        
-        this.updateCharts();
-    }
-
-    updateHeaderInfo() {
-        document.getElementById('aircraft-count').textContent = `${this.aircraftData.size} aircraft`;
-        document.getElementById('sources-count').textContent = `${this.sourcesData.size} sources`;
-        
-        this.updateClocks();
-    }
-
-    // Event Listeners
     initializeEventListeners() {
-        document.getElementById('search-input').addEventListener('input', () => this.updateAircraftTable());
-        document.getElementById('sort-select').addEventListener('change', () => this.updateAircraftTable());
-        document.getElementById('source-filter').addEventListener('change', () => this.updateAircraftTable());
+        const searchInput = document.getElementById('search-input');
+        const sortSelect = document.getElementById('sort-select');
+        
+        searchInput.addEventListener('input', () => this.filterAircraftTable());
+        sortSelect.addEventListener('change', () => this.sortAircraftTable());
     }
 
-    // Map Controls
-    centerMapOnAircraft() {
-        if (this.aircraftData.size === 0) return;
-        
-        const validAircraft = Array.from(this.aircraftData.values())
-            .filter(a => a.Latitude && a.Longitude);
-        
-        if (validAircraft.length === 0) return;
-        
-        const group = new L.featureGroup(
-            validAircraft.map(a => L.marker([a.Latitude, a.Longitude]))
-        );
-        
-        this.map.fitBounds(group.getBounds().pad(0.1));
-    }
-
-    toggleTrails() {
-        this.showTrails = !this.showTrails;
-        document.getElementById('toggle-trails').textContent = 
-            this.showTrails ? 'Hide Trails' : 'Show Trails';
-        
-        if (!this.showTrails) {
-            // Clear all trails
-            this.aircraftTrails.forEach((trail, icao) => {
-                if (trail.polyline) {
-                    this.map.removeLayer(trail.polyline);
-                }
-            });
-            this.aircraftTrails.clear();
-        }
-    }
-
-    toggleRangeCircles() {
-        this.showRange = !this.showRange;
-        document.getElementById('toggle-range').textContent = 
-            this.showRange ? 'Hide Range' : 'Show Range';
-        
-        if (this.showRange) {
-            this.updateRangeCircles();
-        } else {
-            this.rangeCircles.forEach(circle => this.map.removeLayer(circle));
-            this.rangeCircles.clear();
-        }
-    }
-
-    toggleSources() {
-        this.showSources = !this.showSources;
-        document.getElementById('toggle-sources').textContent = 
-            this.showSources ? 'Hide Sources' : 'Show Sources';
-        
-        if (this.showSources) {
-            this.updateSourceMarkers();
-        } else {
-            this.sourceMarkers.forEach(marker => this.map.removeLayer(marker));
-            this.sourceMarkers.clear();
-        }
-    }
-
-    // Coverage and Heatmap
-    updateCoverageControls() {
-        const select = document.getElementById('coverage-source');
-        select.innerHTML = '<option value="">Select Source</option>';
-        
-        for (const [id, source] of this.sourcesData) {
-            const option = document.createElement('option');
-            option.value = id;
-            option.textContent = source.name;
-            select.appendChild(option);
-        }
-    }
-
-    async updateCoverageDisplay() {
-        if (!this.selectedSource) return;
-        
-        try {
-            const response = await fetch(`/api/coverage/${this.selectedSource}`);
-            const data = await response.json();
-            
-            // Clear existing coverage markers
-            this.coverageMap.eachLayer(layer => {
-                if (layer instanceof L.CircleMarker) {
-                    this.coverageMap.removeLayer(layer);
-                }
-            });
-            
-            // Add coverage points
-            data.points.forEach(point => {
-                const intensity = Math.max(0, (point.signal + 50) / 50); // Normalize signal strength
-                L.circleMarker([point.lat, point.lon], {
-                    radius: 3,
-                    fillColor: this.getSignalColor(point.signal),
-                    color: 'white',
-                    weight: 1,
-                    fillOpacity: intensity
-                }).addTo(this.coverageMap);
-            });
-            
-        } catch (error) {
-            console.error('Failed to load coverage data:', error);
-        }
-    }
-
-    async toggleHeatmap() {
-        if (!this.selectedSource) {
-            alert('Please select a source first');
-            return;
-        }
-        
-        if (this.heatmapLayer) {
-            this.coverageMap.removeLayer(this.heatmapLayer);
-            this.heatmapLayer = null;
-            document.getElementById('toggle-heatmap').textContent = 'Show Heatmap';
-        } else {
-            try {
-                const response = await fetch(`/api/heatmap/${this.selectedSource}`);
-                const data = await response.json();
-                
-                // Create heatmap layer (simplified)
-                // In a real implementation, you'd use a proper heatmap library
-                this.createHeatmapOverlay(data);
-                document.getElementById('toggle-heatmap').textContent = 'Hide Heatmap';
-                
-            } catch (error) {
-                console.error('Failed to load heatmap data:', error);
-            }
-        }
-    }
-
-    getSignalColor(signal) {
-        if (signal > -10) return '#00ff88';
-        if (signal > -20) return '#ffff00';
-        if (signal > -30) return '#ff8c00';
-        return '#ff4444';
-    }
-
-    // Charts (continued in next part due to length)
     initializeCharts() {
-        this.charts.aircraft = new Chart(document.getElementById('aircraft-chart'), {
+        const aircraftCtx = document.getElementById('aircraft-chart').getContext('2d');
+        const messageCtx = document.getElementById('message-chart').getContext('2d');
+
+        this.charts.aircraft = new Chart(aircraftCtx, {
             type: 'line',
             data: {
                 labels: [],
                 datasets: [{
                     label: 'Aircraft Count',
                     data: [],
-                    borderColor: '#00d4ff',
-                    backgroundColor: 'rgba(0, 212, 255, 0.1)',
+                    borderColor: '#00a8ff',
+                    backgroundColor: 'rgba(0, 168, 255, 0.1)',
                     tension: 0.4
                 }]
             },
@@ -867,165 +160,39 @@ class SkyView {
                     legend: { display: false }
                 },
                 scales: {
-                    x: { display: false },
-                    y: { 
-                        beginAtZero: true,
-                        ticks: { color: '#888' }
-                    }
+                    y: { beginAtZero: true }
                 }
             }
         });
-        
-        // Add other charts...
-    }
 
-    updateCharts() {
-        const now = new Date();
-        const timeLabel = now.toLocaleTimeString();
-        
-        // Update aircraft count chart
-        if (this.charts.aircraft) {
-            const chart = this.charts.aircraft;
-            chart.data.labels.push(timeLabel);
-            chart.data.datasets[0].data.push(this.aircraftData.size);
-            
-            if (chart.data.labels.length > 20) {
-                chart.data.labels.shift();
-                chart.data.datasets[0].data.shift();
+        this.charts.messages = new Chart(messageCtx, {
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: [{
+                    label: 'Messages/sec',
+                    data: [],
+                    borderColor: '#2ecc71',
+                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                    tension: 0.4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { display: false }
+                },
+                scales: {
+                    y: { beginAtZero: true }
+                }
             }
-            
-            chart.update('none');
-        }
-    }
-
-    // 3D Radar (basic implementation)
-    initialize3DRadar() {
-        try {
-            const container = document.getElementById('radar3d-container');
-            if (!container) return;
-            
-            // Create scene
-            this.radar3d = {
-                scene: new THREE.Scene(),
-                camera: new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000),
-                renderer: new THREE.WebGLRenderer({ alpha: true, antialias: true }),
-                controls: null,
-                aircraftMeshes: new Map()
-            };
-            
-            // Set up renderer
-            this.radar3d.renderer.setSize(container.clientWidth, container.clientHeight);
-            this.radar3d.renderer.setClearColor(0x0a0a0a, 0.9);
-            container.appendChild(this.radar3d.renderer.domElement);
-            
-            // Add lighting
-            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
-            this.radar3d.scene.add(ambientLight);
-            
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(10, 10, 5);
-            this.radar3d.scene.add(directionalLight);
-            
-            // Set up camera
-            this.radar3d.camera.position.set(0, 50, 50);
-            this.radar3d.camera.lookAt(0, 0, 0);
-            
-            // Add controls
-            this.radar3d.controls = new OrbitControls(this.radar3d.camera, this.radar3d.renderer.domElement);
-            this.radar3d.controls.enableDamping = true;
-            this.radar3d.controls.dampingFactor = 0.05;
-            
-            // Add ground plane
-            const groundGeometry = new THREE.PlaneGeometry(200, 200);
-            const groundMaterial = new THREE.MeshLambertMaterial({ 
-                color: 0x2a4d3a, 
-                transparent: true, 
-                opacity: 0.5 
-            });
-            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-            ground.rotation.x = -Math.PI / 2;
-            this.radar3d.scene.add(ground);
-            
-            // Add grid
-            const gridHelper = new THREE.GridHelper(200, 20, 0x44aa44, 0x44aa44);
-            this.radar3d.scene.add(gridHelper);
-            
-            // Start render loop
-            this.render3DRadar();
-            
-            console.log('3D Radar initialized successfully');
-        } catch (error) {
-            console.error('Failed to initialize 3D radar:', error);
-        }
-    }
-
-    update3DRadar() {
-        if (!this.radar3d || !this.radar3d.scene) return;
-        
-        try {
-            // Update aircraft positions in 3D space
-            this.aircraftData.forEach((aircraft, icao) => {
-                if (aircraft.Latitude && aircraft.Longitude) {
-                    const key = icao.toString();
-                    
-                    if (!this.radar3d.aircraftMeshes.has(key)) {
-                        // Create new aircraft mesh
-                        const geometry = new THREE.ConeGeometry(0.5, 2, 6);
-                        const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
-                        const mesh = new THREE.Mesh(geometry, material);
-                        this.radar3d.aircraftMeshes.set(key, mesh);
-                        this.radar3d.scene.add(mesh);
-                    }
-                    
-                    const mesh = this.radar3d.aircraftMeshes.get(key);
-                    
-                    // Convert lat/lon to local coordinates (simplified)
-                    const x = (aircraft.Longitude - (-0.4600)) * 111320 * Math.cos(aircraft.Latitude * Math.PI / 180) / 1000;
-                    const z = -(aircraft.Latitude - 51.4700) * 111320 / 1000;
-                    const y = (aircraft.Altitude || 0) / 1000; // Convert feet to km for display
-                    
-                    mesh.position.set(x, y, z);
-                    
-                    // Orient mesh based on track
-                    if (aircraft.Track !== undefined) {
-                        mesh.rotation.y = -aircraft.Track * Math.PI / 180;
-                    }
-                }
-            });
-            
-            // Remove old aircraft
-            this.radar3d.aircraftMeshes.forEach((mesh, key) => {
-                if (!this.aircraftData.has(parseInt(key, 16))) {
-                    this.radar3d.scene.remove(mesh);
-                    this.radar3d.aircraftMeshes.delete(key);
-                }
-            });
-        } catch (error) {
-            console.error('Failed to update 3D radar:', error);
-        }
-    }
-
-    render3DRadar() {
-        if (!this.radar3d) return;
-        
-        requestAnimationFrame(() => this.render3DRadar());
-        
-        if (this.radar3d.controls) {
-            this.radar3d.controls.update();
-        }
-        
-        this.radar3d.renderer.render(this.radar3d.scene, this.radar3d.camera);
-    }
-
-    // Utility functions
-    updateConnectionStatus(status) {
-        const statusEl = document.getElementById('connection-status');
-        statusEl.className = `connection-status ${status}`;
-        statusEl.textContent = status === 'connected' ? 'Connected' : 'Disconnected';
+        });
     }
 
     initializeClocks() {
         this.updateClocks();
+        setInterval(() => this.updateClocks(), 1000);
     }
 
     updateClocks() {
@@ -1050,69 +217,616 @@ class SkyView {
         if (minuteHand) minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
     }
 
-    calculateDistance(aircraft) {
-        if (!aircraft.Latitude || !aircraft.Longitude) return null;
+    updateAircraftData(data) {
+        this.aircraftData = data.aircraft || [];
+        this.lastUpdateTime = new Date();
+        this.updateMapMarkers();
+        this.updateAircraftTable();
+        this.updateStats();
         
-        // Use closest source as reference point
-        let minDistance = Infinity;
-        for (const [id, srcData] of Object.entries(aircraft.Sources || {})) {
-            if (srcData.Distance && srcData.Distance < minDistance) {
-                minDistance = srcData.Distance;
+        document.getElementById('aircraft-count').textContent = `${this.aircraftData.length} aircraft`;
+    }
+
+    updateMapMarkers() {
+        const currentHexCodes = new Set(this.aircraftData.map(a => a.hex));
+        
+        this.aircraftMarkers.forEach((marker, hex) => {
+            if (!currentHexCodes.has(hex)) {
+                this.map.removeLayer(marker);
+                this.aircraftMarkers.delete(hex);
             }
+        });
+
+        this.aircraftData.forEach(aircraft => {
+            if (!aircraft.lat || !aircraft.lon) return;
+
+            const pos = [aircraft.lat, aircraft.lon];
+            
+            if (this.aircraftMarkers.has(aircraft.hex)) {
+                const marker = this.aircraftMarkers.get(aircraft.hex);
+                marker.setLatLng(pos);
+                this.updateMarkerRotation(marker, aircraft.track, aircraft);
+                this.updatePopupContent(marker, aircraft);
+            } else {
+                const marker = this.createAircraftMarker(aircraft, pos);
+                this.aircraftMarkers.set(aircraft.hex, marker);
+            }
+
+            if (this.showTrails) {
+                this.updateTrail(aircraft.hex, pos);
+            }
+            
+            if (this.showHistoricalTracks && aircraft.track_history && aircraft.track_history.length > 1) {
+                this.displayHistoricalTrack(aircraft.hex, aircraft.track_history, aircraft.flight);
+            }
+        });
+    }
+
+    createAircraftMarker(aircraft, pos) {
+        const hasPosition = aircraft.lat && aircraft.lon;
+        const size = hasPosition ? 24 : 18;
+        
+        const icon = L.divIcon({
+            html: this.getAircraftIcon(aircraft),
+            className: 'aircraft-marker',
+            iconSize: [size, size],
+            iconAnchor: [size/2, size/2]
+        });
+
+        const marker = L.marker(pos, { icon }).addTo(this.map);
+        
+        marker.bindPopup(this.createPopupContent(aircraft), {
+            className: 'aircraft-popup'
+        });
+        
+        marker.on('click', () => {
+            if (this.showHistoricalTracks) {
+                this.loadAircraftHistory(aircraft.hex);
+            }
+        });
+
+        return marker;
+    }
+
+    getAircraftType(aircraft) {
+        if (aircraft.on_ground) return 'ground';
+        
+        // Determine type based on flight number patterns and characteristics
+        const flight = aircraft.flight || '';
+        
+        // Cargo airlines (simplified patterns)
+        if (/^(UPS|FDX|FX|ABX|ATN|5Y|QY)/i.test(flight)) return 'cargo';
+        
+        // Military patterns (basic)
+        if (/^(RCH|CNV|MAC|EVAC|ARMY|NAVY|AF|USAF)/i.test(flight)) return 'military';
+        
+        // General aviation (no airline code pattern)
+        if (flight.length > 0 && !/^[A-Z]{2,3}[0-9]/.test(flight)) return 'ga';
+        
+        // Default commercial
+        return 'commercial';
+    }
+
+    getAircraftIcon(aircraft) {
+        const rotation = aircraft.track || 0;
+        const hasPosition = aircraft.lat && aircraft.lon;
+        const type = this.getAircraftType(aircraft);
+        const size = hasPosition ? 24 : 18;
+        
+        let color, icon;
+        
+        switch (type) {
+            case 'cargo':
+                color = hasPosition ? "#ff8c00" : "#666666";
+                icon = `<rect x="8" y="6" width="8" height="12" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+                        <polygon points="12,2 10,6 14,6" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="4,10 8,8 8,14" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="20,10 16,8 16,14" fill="${color}" stroke="#ffffff" stroke-width="1"/>`;
+                break;
+            case 'military':
+                color = hasPosition ? "#ff4444" : "#666666";
+                icon = `<polygon points="12,2 9,20 12,18 15,20" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+                        <polygon points="6,8 12,6 12,10" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="18,8 12,6 12,10" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="8,16 12,14 12,18" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="16,16 12,14 12,18" fill="${color}" stroke="#ffffff" stroke-width="1"/>`;
+                break;
+            case 'ga':
+                color = hasPosition ? "#ffff00" : "#666666";
+                icon = `<polygon points="12,2 11,20 12,19 13,20" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+                        <polygon points="7,12 12,10 12,14" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="17,12 12,10 12,14" fill="${color}" stroke="#ffffff" stroke-width="1"/>`;
+                break;
+            case 'ground':
+                color = "#888888";
+                icon = `<circle cx="12" cy="12" r="6" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+                        <text x="12" y="16" text-anchor="middle" font-size="8" fill="#ffffff">G</text>`;
+                break;
+            default: // commercial
+                color = hasPosition ? "#00ff88" : "#666666";
+                icon = `<polygon points="12,2 10,20 12,18 14,20" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+                        <polygon points="5,10 12,8 12,12" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+                        <polygon points="19,10 12,8 12,12" fill="${color}" stroke="#ffffff" stroke-width="1"/>`;
+                break;
         }
         
-        return minDistance === Infinity ? null : minDistance;
+        return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="transform: rotate(${rotation}deg); filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));">
+            ${icon}
+        </svg>`;
     }
 
-    getCountryFromICAO(icao) {
-        if (!icao || icao.length < 6) return 'Unknown';
-        
-        const prefix = icao[0];
-        const countryMap = {
-            '4': 'Europe',
-            'A': 'United States',
-            'C': 'Canada', 
-            'D': 'Germany',
-            'F': 'France',
-            'G': 'United Kingdom',
-            'I': 'Italy',
-            'J': 'Japan'
-        };
-        
-        return countryMap[prefix] || 'Unknown';
+    updateMarkerRotation(marker, track, aircraft) {
+        if (track !== undefined) {
+            const hasPosition = aircraft.lat && aircraft.lon;
+            const size = hasPosition ? 24 : 18;
+            
+            const icon = L.divIcon({
+                html: this.getAircraftIcon(aircraft),
+                className: 'aircraft-marker',
+                iconSize: [size, size],
+                iconAnchor: [size/2, size/2]
+            });
+            marker.setIcon(icon);
+        }
     }
 
+    createPopupContent(aircraft) {
+        const type = this.getAircraftType(aircraft);
+        const distance = this.calculateDistance(aircraft);
+        const distanceKm = distance ? (distance * 1.852).toFixed(1) : 'N/A';
+        const altitudeM = aircraft.alt_baro ? Math.round(aircraft.alt_baro * 0.3048) : 'N/A';
+        const speedKmh = aircraft.gs ? Math.round(aircraft.gs * 1.852) : 'N/A';
+        const trackText = aircraft.track ? `${aircraft.track}° (${this.getTrackDirection(aircraft.track)})` : 'N/A';
+        
+        return `
+            <div class="aircraft-popup">
+                <div class="popup-header">
+                    <div class="flight-info">
+                        <span class="icao-flag">${this.getCountryFlag(aircraft.country)}</span>
+                        <span class="flight-id">${aircraft.hex}</span>
+                        ${aircraft.flight ? `→ <span class="callsign">${aircraft.flight}</span>` : ''}
+                    </div>
+                </div>
+                
+                <div class="popup-details">
+                    <div class="detail-row">
+                        <strong>Country of registration:</strong> ${aircraft.country || 'Unknown'}
+                    </div>
+                    <div class="detail-row">
+                        <strong>Registration:</strong> ${aircraft.registration || aircraft.hex}
+                    </div>
+                    <div class="detail-row">
+                        <strong>Type:</strong> ${type.charAt(0).toUpperCase() + type.slice(1)}
+                    </div>
+                    
+                    <div class="detail-grid">
+                        <div class="detail-item">
+                            <div class="label">Altitude:</div>
+                            <div class="value">${aircraft.alt_baro ? `▲ ${aircraft.alt_baro} ft | ${altitudeM} m` : 'N/A'}</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="label">Squawk:</div>
+                            <div class="value">${aircraft.squawk || 'N/A'}</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="label">Speed:</div>
+                            <div class="value">${aircraft.gs ? `${aircraft.gs} kt | ${speedKmh} km/h` : 'N/A'}</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="label">RSSI:</div>
+                            <div class="value">${aircraft.rssi ? `${aircraft.rssi.toFixed(1)} dBFS` : 'N/A'}</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="label">Track:</div>
+                            <div class="value">${trackText}</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="label">Last seen:</div>
+                            <div class="value">${aircraft.seen ? `${aircraft.seen.toFixed(1)}s ago` : 'now'}</div>
+                        </div>
+                    </div>
+                    
+                    <div class="detail-row">
+                        <strong>Position:</strong> ${aircraft.lat && aircraft.lon ? 
+                            `${aircraft.lat.toFixed(3)}°, ${aircraft.lon.toFixed(3)}°` : 'N/A'}
+                    </div>
+                    <div class="detail-row">
+                        <strong>Distance from Site:</strong> ${distance ? `${distance} NM | ${distanceKm} km` : 'N/A'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
     getCountryFlag(country) {
         const flags = {
             'United States': '🇺🇸',
-            'Canada': '🇨🇦',
+            'United Kingdom': '🇬🇧',
             'Germany': '🇩🇪',
             'France': '🇫🇷',
-            'United Kingdom': '🇬🇧',
+            'Netherlands': '🇳🇱',
+            'Sweden': '🇸🇪',
+            'Spain': '🇪🇸',
             'Italy': '🇮🇹',
+            'Canada': '🇨🇦',
             'Japan': '🇯🇵',
-            'Europe': '🇪🇺'
+            'Denmark': '🇩🇰',
+            'Austria': '🇦🇹',
+            'Belgium': '🇧🇪',
+            'Finland': '🇫🇮',
+            'Greece': '🇬🇷'
         };
         return flags[country] || '🏳️';
     }
-
-    startPeriodicTasks() {
-        // Update clocks every second
-        setInterval(() => this.updateClocks(), 1000);
-        
-        // Periodic cleanup
-        setInterval(() => {
-            // Clean up old trail data, etc.
-        }, 30000);
+    
+    getTrackDirection(track) {
+        const directions = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 
+                          'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
+        const index = Math.round(track / 22.5) % 16;
+        return directions[index];
     }
 
-    showError(message) {
-        console.error(message);
-        // Could implement toast notifications here
+    updatePopupContent(marker, aircraft) {
+        marker.setPopupContent(this.createPopupContent(aircraft));
+    }
+
+    updateTrail(hex, pos) {
+        if (!this.aircraftTrails.has(hex)) {
+            this.aircraftTrails.set(hex, []);
+        }
+        
+        const trail = this.aircraftTrails.get(hex);
+        trail.push(pos);
+        
+        if (trail.length > 50) {
+            trail.shift();
+        }
+        
+        const polyline = L.polyline(trail, {
+            color: '#00a8ff',
+            weight: 2,
+            opacity: 0.6
+        }).addTo(this.map);
+    }
+
+    toggleTrails() {
+        this.showTrails = !this.showTrails;
+        
+        if (!this.showTrails) {
+            this.aircraftTrails.clear();
+            this.map.eachLayer(layer => {
+                if (layer instanceof L.Polyline) {
+                    this.map.removeLayer(layer);
+                }
+            });
+        }
+        
+        document.getElementById('toggle-trails').textContent = 
+            this.showTrails ? 'Hide Trails' : 'Show Trails';
+    }
+
+    centerMapOnAircraft() {
+        if (this.aircraftData.length === 0) return;
+        
+        const validAircraft = this.aircraftData.filter(a => a.lat && a.lon);
+        if (validAircraft.length === 0) return;
+        
+        const group = new L.featureGroup(
+            validAircraft.map(a => L.marker([a.lat, a.lon]))
+        );
+        
+        this.map.fitBounds(group.getBounds().pad(0.1));
+    }
+
+    updateAircraftTable() {
+        const tbody = document.getElementById('aircraft-tbody');
+        tbody.innerHTML = '';
+        
+        let filteredData = [...this.aircraftData];
+        
+        const searchTerm = document.getElementById('search-input').value.toLowerCase();
+        if (searchTerm) {
+            filteredData = filteredData.filter(aircraft => 
+                (aircraft.flight && aircraft.flight.toLowerCase().includes(searchTerm)) ||
+                aircraft.hex.toLowerCase().includes(searchTerm) ||
+                (aircraft.squawk && aircraft.squawk.includes(searchTerm))
+            );
+        }
+        
+        const sortBy = document.getElementById('sort-select').value;
+        this.sortAircraft(filteredData, sortBy);
+        
+        filteredData.forEach(aircraft => {
+            const type = this.getAircraftType(aircraft);
+            const country = aircraft.country || 'Unknown';
+            const countryFlag = this.getCountryFlag(country);
+            const age = aircraft.seen ? aircraft.seen.toFixed(0) : '0';
+            const distance = this.calculateDistance(aircraft);
+            const distanceStr = distance ? distance.toFixed(1) : '-';
+            const altitudeStr = aircraft.alt_baro ? 
+                (aircraft.alt_baro >= 0 ? `▲ ${aircraft.alt_baro}` : `▼ ${Math.abs(aircraft.alt_baro)}`) : 
+                '-';
+            
+            const row = document.createElement('tr');
+            // Color code RSSI values
+            let rssiStr = '-';
+            let rssiClass = '';
+            if (aircraft.rssi) {
+                const rssi = aircraft.rssi;
+                rssiStr = rssi.toFixed(1);
+                if (rssi > -10) rssiClass = 'rssi-strong';
+                else if (rssi > -20) rssiClass = 'rssi-good';
+                else if (rssi > -30) rssiClass = 'rssi-weak';
+                else rssiClass = 'rssi-poor';
+            }
+            
+            row.innerHTML = `
+                <td><span class="type-badge ${type}">${aircraft.hex}</span></td>
+                <td>${aircraft.flight || '-'}</td>
+                <td>${aircraft.squawk || '-'}</td>
+                <td>${altitudeStr}</td>
+                <td>${aircraft.gs || '-'}</td>
+                <td>${distanceStr}</td>
+                <td>${aircraft.track || '-'}°</td>
+                <td>${aircraft.messages || '-'}</td>
+                <td>${age}</td>
+                <td><span class="${rssiClass}">${rssiStr}</span></td>
+            `;
+            
+            row.addEventListener('click', () => {
+                if (aircraft.lat && aircraft.lon) {
+                    this.switchView('map');
+                    document.getElementById('map-view-btn').classList.add('active');
+                    document.querySelectorAll('.view-btn:not(#map-view-btn)').forEach(btn => 
+                        btn.classList.remove('active'));
+                    document.querySelectorAll('.view:not(#map-view)').forEach(view => 
+                        view.classList.remove('active'));
+                    document.getElementById('map-view').classList.add('active');
+                    
+                    this.map.setView([aircraft.lat, aircraft.lon], 12);
+                    
+                    const marker = this.aircraftMarkers.get(aircraft.hex);
+                    if (marker) {
+                        marker.openPopup();
+                    }
+                }
+            });
+            
+            tbody.appendChild(row);
+        });
+    }
+
+    filterAircraftTable() {
+        this.updateAircraftTable();
+    }
+
+    sortAircraftTable() {
+        this.updateAircraftTable();
+    }
+
+    sortAircraft(aircraft, sortBy) {
+        aircraft.sort((a, b) => {
+            switch (sortBy) {
+                case 'distance':
+                    return (this.calculateDistance(a) || Infinity) - (this.calculateDistance(b) || Infinity);
+                case 'altitude':
+                    return (b.alt_baro || 0) - (a.alt_baro || 0);
+                case 'speed':
+                    return (b.gs || 0) - (a.gs || 0);
+                case 'flight':
+                    return (a.flight || a.hex).localeCompare(b.flight || b.hex);
+                case 'icao':
+                    return a.hex.localeCompare(b.hex);
+                case 'squawk':
+                    return (a.squawk || '').localeCompare(b.squawk || '');
+                case 'age':
+                    return (a.seen || 0) - (b.seen || 0);
+                case 'rssi':
+                    return (b.rssi || -999) - (a.rssi || -999);
+                default:
+                    return 0;
+            }
+        });
+    }
+
+    calculateDistance(aircraft) {
+        if (!aircraft.lat || !aircraft.lon) return null;
+        
+        const centerLat = this.origin.latitude;
+        const centerLng = this.origin.longitude;
+        
+        const R = 3440.065;
+        const dLat = (aircraft.lat - centerLat) * Math.PI / 180;
+        const dLon = (aircraft.lon - centerLng) * Math.PI / 180;
+        const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
+                Math.cos(centerLat * Math.PI / 180) * Math.cos(aircraft.lat * Math.PI / 180) *
+                Math.sin(dLon/2) * Math.sin(dLon/2);
+        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+        return R * c;  // Return a number, not a string
+    }
+
+    updateStats() {
+        document.getElementById('total-aircraft').textContent = this.aircraftData.length;
+        
+        const withPosition = this.aircraftData.filter(a => a.lat && a.lon).length;
+        const avgAltitude = this.aircraftData
+            .filter(a => a.alt_baro)
+            .reduce((sum, a) => sum + a.alt_baro, 0) / this.aircraftData.length || 0;
+        
+        const distances = this.aircraftData
+            .map(a => this.calculateDistance(a))
+            .filter(d => d !== null);
+        const maxDistance = distances.length > 0 ? Math.max(...distances) : 0;
+        
+        document.getElementById('max-range').textContent = `${maxDistance.toFixed(1)} nm`;
+        
+        this.updateChartData();
+    }
+
+    updateChartData() {
+        const now = new Date();
+        const timeLabel = now.toLocaleTimeString();
+        
+        if (this.charts.aircraft) {
+            const chart = this.charts.aircraft;
+            chart.data.labels.push(timeLabel);
+            chart.data.datasets[0].data.push(this.aircraftData.length);
+            
+            if (chart.data.labels.length > 20) {
+                chart.data.labels.shift();
+                chart.data.datasets[0].data.shift();
+            }
+            
+            chart.update('none');
+        }
+        
+        if (this.charts.messages) {
+            const chart = this.charts.messages;
+            const totalMessages = this.aircraftData.reduce((sum, a) => sum + (a.messages || 0), 0);
+            const messagesPerSec = totalMessages / 60;
+            
+            chart.data.labels.push(timeLabel);
+            chart.data.datasets[0].data.push(messagesPerSec);
+            
+            if (chart.data.labels.length > 20) {
+                chart.data.labels.shift();
+                chart.data.datasets[0].data.shift();
+            }
+            
+            chart.update('none');
+            
+            document.getElementById('messages-sec').textContent = Math.round(messagesPerSec);
+        }
+    }
+
+    startPeriodicUpdates() {
+        setInterval(() => {
+            if (this.websocket.readyState !== WebSocket.OPEN) {
+                this.fetchAircraftData();
+            }
+        }, 5000);
+        
+        setInterval(() => {
+            this.fetchStatsData();
+        }, 10000);
+    }
+
+    async fetchAircraftData() {
+        try {
+            const response = await fetch('/api/aircraft');
+            const data = await response.json();
+            this.updateAircraftData(data);
+        } catch (error) {
+            console.error('Failed to fetch aircraft data:', error);
+        }
+    }
+
+    async fetchStatsData() {
+        try {
+            const response = await fetch('/api/stats');
+            const stats = await response.json();
+            
+            if (stats.total && stats.total.messages) {
+                const messagesPerSec = stats.total.messages.last1min / 60;
+                document.getElementById('messages-sec').textContent = Math.round(messagesPerSec);
+            }
+            
+            // Calculate average RSSI from aircraft data
+            const aircraftWithRSSI = this.aircraftData.filter(a => a.rssi);
+            if (aircraftWithRSSI.length > 0) {
+                const avgRSSI = aircraftWithRSSI.reduce((sum, a) => sum + a.rssi, 0) / aircraftWithRSSI.length;
+                document.getElementById('signal-strength').textContent = `${avgRSSI.toFixed(1)} dBFS`;
+            } else {
+                document.getElementById('signal-strength').textContent = '0 dBFS';
+            }
+        } catch (error) {
+            console.error('Failed to fetch stats:', error);
+        }
+    }
+
+    toggleHistoricalTracks() {
+        this.showHistoricalTracks = !this.showHistoricalTracks;
+        
+        const btn = document.getElementById('toggle-history');
+        btn.textContent = this.showHistoricalTracks ? 'Hide History' : 'Show History';
+        
+        if (!this.showHistoricalTracks) {
+            this.clearAllHistoricalTracks();
+        }
+    }
+
+    async loadAircraftHistory(hex) {
+        try {
+            const response = await fetch(`/api/aircraft/${hex}/history`);
+            const data = await response.json();
+            
+            if (data.track_history && data.track_history.length > 1) {
+                this.displayHistoricalTrack(hex, data.track_history, data.flight);
+            }
+        } catch (error) {
+            console.error('Failed to load aircraft history:', error);
+        }
+    }
+
+    displayHistoricalTrack(hex, trackHistory, flight) {
+        this.clearHistoricalTrack(hex);
+        
+        const points = trackHistory.map(point => [point.lat, point.lon]);
+        
+        const polyline = L.polyline(points, {
+            color: '#ff6b6b',
+            weight: 3,
+            opacity: 0.8,
+            dashArray: '5, 5'
+        }).addTo(this.map);
+        
+        polyline.bindPopup(`<b>Historical Track</b><br>${flight || hex}<br>${trackHistory.length} points`);
+        
+        this.historicalTracks.set(hex, polyline);
+        
+        // Add start/end markers
+        if (trackHistory.length > 0) {
+            const start = trackHistory[0];
+            const end = trackHistory[trackHistory.length - 1];
+            
+            L.circleMarker([start.lat, start.lon], {
+                color: '#ffffff',
+                fillColor: '#00ff00',
+                fillOpacity: 0.8,
+                radius: 4
+            }).addTo(this.map).bindPopup(`<b>Start</b><br>${new Date(start.timestamp).toLocaleString()}`);
+            
+            L.circleMarker([end.lat, end.lon], {
+                color: '#ffffff',
+                fillColor: '#ff0000',
+                fillOpacity: 0.8,
+                radius: 4
+            }).addTo(this.map).bindPopup(`<b>End</b><br>${new Date(end.timestamp).toLocaleString()}`);
+        }
+    }
+
+    clearHistoricalTrack(hex) {
+        if (this.historicalTracks.has(hex)) {
+            this.map.removeLayer(this.historicalTracks.get(hex));
+            this.historicalTracks.delete(hex);
+        }
+    }
+
+    clearAllHistoricalTracks() {
+        this.historicalTracks.forEach(track => {
+            this.map.removeLayer(track);
+        });
+        this.historicalTracks.clear();
+        
+        // Also remove start/end markers
+        this.map.eachLayer(layer => {
+            if (layer instanceof L.CircleMarker) {
+                this.map.removeLayer(layer);
+            }
+        });
     }
 }
 
-// Initialize application when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
-    window.skyview = new SkyView();
+    new SkyView();
 });
\ No newline at end of file
