diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 56b0e97..074babe 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -96,8 +96,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         mag: mag,
         geojson: `[lon=${coords[0]}, lat=${coords[1]}, depth=${coords[2]}]`,
         extracted: `lat=${lat} (coords[1]), lon=${lon} (coords[0])`,
-        leafletMarkerCall: `L.marker([${lon}, ${lat}])`,
-        explanation: `TESTING: Using [longitude, latitude] format`
+        leafletMarkerCall: `L.marker([${lat}, ${lon}])`,
+        explanation: `Standard Leaflet [latitude, longitude] format - CSS position fixed`
       });
 
       currentQuakeIds.add(quakeId);
@@ -147,21 +147,18 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           box-shadow: 0 2px 8px rgba(0,0,0,0.5);
         ">${waveIcon}</div>`,
         iconSize: [size, size],
-        iconAnchor: [size/2, size/2]
+        iconAnchor: [size/2, size/2],
+        popupAnchor: [0, 0]  // Popup appears at the marker position (icon center)
       });
       
       console.log(`📍 Creating marker for ${quakeId}: M${mag.toFixed(1)} at [lat=${lat}, lon=${lon}] - ${props.place}`);
       
-      // TESTING: Try swapping to [lon, lat] format
-      // Based on user testing, [lat, lon] format is plotting in wrong locations
-      // Japan earthquake (37.6°N, 142.4°E) appearing near Tasmania with [lat, lon]
-      // This suggests coordinates need to be swapped
-      const markerCoords = [lon, lat];  // SWAPPED: [longitude, latitude]
+      // Use standard Leaflet [latitude, longitude] format
+      // The popup was appearing in the correct location, confirming marker position is correct
+      // The icon was appearing offset due to CSS position: relative issue (now fixed)
+      const markerCoords = [lat, lon];  // CORRECT: [latitude, longitude]
       
-      console.log(`   → TESTING [LON, LAT] FORMAT:`);
-      console.log(`   → markerCoords = [${markerCoords[0]}, ${markerCoords[1]}]`);
-      console.log(`   → This is [${lon}, ${lat}] = [longitude, latitude]`);
-      console.log(`   → For Japan: [142.4, 37.6] should plot in Japan, not Tasmania`);
+      console.log(`   → Creating L.marker([${markerCoords[0]}, ${markerCoords[1]}]) = [lat, lon]`);
       
       const circle = L.marker(markerCoords, { 
         icon, 
@@ -196,8 +193,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           }
         }, 10);
         
-        // Create pulsing ring effect - use same [lon, lat] format as marker
-        const pulseRing = L.circle([lon, lat], {
+        // Create pulsing ring effect - use same [lat, lon] format
+        const pulseRing = L.circle([lat, lon], {
           radius: 50000, // 50km radius in meters
           fillColor: color,
           fillOpacity: 0,
diff --git a/src/styles/main.css b/src/styles/main.css
index 022b7a4..ad8b710 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -876,7 +876,7 @@ body::before {
 .earthquake-icon {
   z-index: 10000 !important;
   pointer-events: auto;
-  position: relative !important;
+  /* Removed position: relative - was causing icons to appear offset from marker position */
 }
 
 .earthquake-icon div {
@@ -885,7 +885,7 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
-  position: relative;
+  /* position: relative removed here too */
   z-index: 10000 !important;
 }