diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index ce1d310..bf4c60a 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -113,7 +113,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       });
       
       console.log('Creating earthquake marker:', quakeId, 'at', lat, lon, 'size:', size, 'color:', color);
-      const circle = L.marker([lat, lon], { icon, opacity });
+      const circle = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
 
       // Add to map first
       circle.addTo(map);
diff --git a/src/plugins/layers/useLightning.js b/src/plugins/layers/useLightning.js
index ad2f994..126f188 100644
--- a/src/plugins/layers/useLightning.js
+++ b/src/plugins/layers/useLightning.js
@@ -167,7 +167,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         iconAnchor: [size/2, size/2]
       });
       
-      const marker = L.marker([lat, lon], { icon, opacity });
+      const marker = L.marker([lat, lon], { 
+        icon, 
+        opacity,
+        zIndexOffset: 10000 // Ensure markers appear on top
+      });
       
       // Add to map first
       marker.addTo(map);
diff --git a/src/styles/main.css b/src/styles/main.css
index 6a5c551..022b7a4 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -874,8 +874,9 @@ body::before {
 
 /* Earthquake icon markers */
 .earthquake-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .earthquake-icon div {
@@ -884,12 +885,15 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }
 
 /* Lightning icon markers */
 .lightning-icon {
-  z-index: 1000 !important;
+  z-index: 10000 !important;
   pointer-events: auto;
+  position: relative !important;
 }
 
 .lightning-icon div {
@@ -898,4 +902,6 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  z-index: 10000 !important;
 }