diff --git a/static/index.html b/static/index.html
index 61026fc..b3e1c94 100644
--- a/static/index.html
+++ b/static/index.html
@@ -804,6 +804,7 @@
     .map-chip.heat-on svg { color: #000; }
     .map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; }
     .map-chip.park-on svg { color: #fff; }
+    .cat-pin-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
     .park-label-icon { pointer-events: none !important; background: transparent !important; border: none !important; }
     .leaflet-popup-content-wrapper {
       background: var(--card) !important;
@@ -4397,7 +4398,18 @@
             var popupHtml = '<b>' + esc(a.name) + '</b><br>' + esc(a.machine_id || '') +
               '<br><button class="btn btn-outline btn-sm" style="margin-top:6px;" ' +
               'onclick="switchTab(\'tabAssets\');viewAsset(' + a.id + ');">View Details</button>';
-            var marker = L.marker([a.latitude, a.longitude])
+            var catColor = catEntry ? catEntry.color : '#6b7280';
+            var pinIcon = L.divIcon({
+              className: 'cat-pin-icon',
+              html: '<div style="background:' + catColor + '22;color:' + catColor +
+                    ';border:2px solid ' + catColor + ';width:36px;height:36px;border-radius:50%;' +
+                    'display:flex;align-items:center;justify-content:center;font-size:18px;' +
+                    'box-shadow:0 2px 8px rgba(0,0,0,0.4);">' + icon + '</div>',
+              iconSize: [36, 36],
+              iconAnchor: [18, 18],
+              popupAnchor: [0, -20],
+            });
+            var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon })
               .addTo(map)
               .bindPopup(popupHtml);
             window._assetPins.push(marker);