diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx
index c6185dd..a6cd8dc 100644
--- a/client/src/pages/MapView.jsx
+++ b/client/src/pages/MapView.jsx
@@ -139,7 +139,7 @@ const MapView = () => {
       const newDetection = {
         ...latestDetection,
         timestamp: Date.now(),
-        id: `${latestDetection.device_id}-${latestDetection.drone_id}-${latestDetection.device_timestamp}`
+        id: `${latestDetection.device_id}-${latestDetection.drone_id || 'unknown'}-${latestDetection.device_timestamp || Date.now()}`
       };
       
       console.log('MapView: Adding to history:', newDetection);
@@ -393,14 +393,25 @@ const MapView = () => {
                   const dashPattern = getDashPattern(detection.drone_type, droneIndex, totalDrones);
                   const [latOffset, lonOffset] = getPositionOffset(droneIndex, totalDrones);
                   
+                  // Ensure coordinates are numbers and properly calculated
+                  const baseLat = parseFloat(detection.geo_lat) || 0;
+                  const baseLon = parseFloat(detection.geo_lon) || 0;
+                  const centerLat = baseLat + latOffset;
+                  const centerLon = baseLon + lonOffset;
+                  
+                  console.log('MapView: Coordinate calculation - baseLat:', baseLat, 'baseLon:', baseLon, 'latOffset:', latOffset, 'lonOffset:', lonOffset, 'centerLat:', centerLat, 'centerLon:', centerLon);
+                  
+                  // Validate coordinates before rendering
+                  if (!isFinite(centerLat) || !isFinite(centerLon) || centerLat < -90 || centerLat > 90 || centerLon < -180 || centerLon > 180) {
+                    console.error('MapView: Invalid coordinates detected, skipping ring:', centerLat, centerLon);
+                    return null;
+                  }
+                  
                   return (
                     <React.Fragment key={`${detection.id}_${droneIndex}`}>
                       {/* Detection Ring around Detector (NOT drone position) */}
                       <Circle
-                        center={[
-                          detection.geo_lat + latOffset, 
-                          detection.geo_lon + lonOffset
-                        ]} // Detector position with slight offset
+                        center={[centerLat, centerLon]} // Detector position with slight offset
                         radius={radius}
                         pathOptions={{
                           color: ringColor,
@@ -416,8 +427,8 @@ const MapView = () => {
                       {totalDrones > 1 && age < 5 && ( // Show labels for recent detections with multiple drones
                         <Marker
                           position={[
-                            detection.geo_lat + (latOffset * 3), 
-                            detection.geo_lon + (lonOffset * 3)
+                            centerLat + (latOffset * 2), 
+                            centerLon + (lonOffset * 2)
                           ]}
                           icon={L.divIcon({
                             html: `<div style="
@@ -448,7 +459,7 @@ const MapView = () => {
                       {/* Optional: Small info marker at detector showing detection details (for single drone) */}
                       {totalDrones === 1 && age < 1 && ( // Only show for very recent detections (< 1 minute) and single drone
                         <Marker
-                          position={[detection.geo_lat, detection.geo_lon]}
+                          position={[centerLat, centerLon]}
                           icon={createDroneIcon(detection.rssi, detection.drone_type)}
                           opacity={opacity * 0.7}
                         >