diff --git a/public/app-mapbox.js b/public/app-mapbox.js
index db9a451..7e36150 100644
--- a/public/app-mapbox.js
+++ b/public/app-mapbox.js
@@ -46,15 +46,48 @@ document.addEventListener('DOMContentLoaded', async () => {
         currentMarkers = [];
     };
 
+    // Create custom icons for different report types
+    const createCustomIcon = (isPersistent = false) => {
+        const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+        const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
+        
+        return L.divIcon({
+            className: 'custom-marker',
+            html: `
+                <div style="
+                    background-color: ${iconColor};
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    border: 3px solid white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                    cursor: pointer;
+                ">${iconSymbol}</div>
+            `,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            popupAnchor: [0, -15]
+        });
+    };
+
     const showMarkers = locations => {
         clearMarkers();
         
-        locations.forEach(({ latitude, longitude, address, description, created_at }) => {
+        locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
             if (latitude && longitude) {
                 const timeAgo = getTimeAgo(created_at);
-                const marker = L.marker([latitude, longitude])
+                const isPersistent = !!persistent;
+                const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
+                
+                const marker = L.marker([latitude, longitude], {
+                    icon: createCustomIcon(isPersistent)
+                })
                     .addTo(map)
-                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
+                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
                 currentMarkers.push(marker);
             }
         });
diff --git a/public/app.js b/public/app.js
index 8e4f13d..421bfdb 100644
--- a/public/app.js
+++ b/public/app.js
@@ -26,16 +26,49 @@ document.addEventListener('DOMContentLoaded', () => {
         currentMarkers = [];
     };
 
+    // Create custom icons for different report types
+    const createCustomIcon = (isPersistent = false) => {
+        const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+        const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
+        
+        return L.divIcon({
+            className: 'custom-marker',
+            html: `
+                <div style="
+                    background-color: ${iconColor};
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    border: 3px solid white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                    cursor: pointer;
+                ">${iconSymbol}</div>
+            `,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            popupAnchor: [0, -15]
+        });
+    };
+
     const showMarkers = locations => {
         // Clear existing markers first
         clearMarkers();
         
-        locations.forEach(({ latitude, longitude, address, description, created_at }) => {
+        locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
             if (latitude && longitude) {
                 const timeAgo = getTimeAgo(created_at);
-                const marker = L.marker([latitude, longitude])
+                const isPersistent = !!persistent;
+                const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
+                
+                const marker = L.marker([latitude, longitude], {
+                    icon: createCustomIcon(isPersistent)
+                })
                     .addTo(map)
-                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
+                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
                 currentMarkers.push(marker);
             }
         });