diff --git a/static/index.html b/static/index.html
index b4be649..0b9600a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -35,7 +35,7 @@
 
     /* Slider panel (top-left, below controls, stations mode only) */
     #slider-panel {
-      position: fixed; top: 56px; left: 56px;
+      position: fixed; top: 70px; left: 56px;
       background: white; padding: 10px 14px;
       border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
       z-index: 2000; font-size: 13px; min-width: 260px;
@@ -61,6 +61,15 @@
     }
     .legend-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; }
     #stats { margin-top: 8px; font-size: 11px; color: #888; }
+
+    /* Gas pump markers */
+    .pump-icon {
+      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
+      transition: transform 0.1s;
+    }
+    .pump-icon:hover {
+      transform: scale(1.3);
+    }
   </style>
 </head>
 <body>
@@ -216,14 +225,16 @@
         count++;
 
         const color = priceColor(s.regular, minPrice, maxPrice);
-        const marker = L.circleMarker([s.lat, s.lng], {
-          radius: 7,
-          fillColor: color,
-          color: '#fff',
-          weight: 1.5,
-          fillOpacity: 0.9,
+        const icon = L.divIcon({
+          html: pumpSvg(color),
+          className: '',
+          iconSize: [20, 24],
+          iconAnchor: [10, 24],
+          popupAnchor: [0, -24],
         });
 
+        const marker = L.marker([s.lat, s.lng], { icon });
+
         let popup = `<strong>${s.name}</strong><br>`;
         popup += `${s.brand}<br>`;
         popup += `${s.address}<br>`;
@@ -238,6 +249,23 @@
       document.getElementById('visible-count').textContent = count + ' / ' + allStations.length + ' stations';
     }
 
+    function pumpSvg(fill) {
+      return `<svg class="pump-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" width="20" height="24">
+        <!-- pump body -->
+        <rect x="3" y="6" width="12" height="16" rx="1.5" fill="${fill}" stroke="#fff" stroke-width="1.2"/>
+        <!-- gauge window -->
+        <rect x="5.5" y="8.5" width="7" height="5" rx="0.8" fill="#fff" opacity="0.45"/>
+        <!-- base -->
+        <rect x="1.5" y="22" width="15" height="2.5" rx="1" fill="${fill}" stroke="#fff" stroke-width="1"/>
+        <!-- nozzle arm -->
+        <path d="M15 10 h3 v8 h-1.5 v-2 h-1.5" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+        <!-- hose nozzle -->
+        <rect x="15" y="16" width="4" height="2.5" rx="0.6" fill="${fill}" stroke="#fff" stroke-width="0.8"/>
+        <!-- top cap -->
+        <rect x="5" y="4" width="8" height="2.5" rx="1" fill="${fill}" stroke="#fff" stroke-width="0.8"/>
+      </svg>`;
+    }
+
     function priceColor(price, min, max) {
       const t = Math.max(0, Math.min(1, (price - min) / (max - min)));
       const colors = [
