diff --git a/spbu/index.php b/spbu/index.php
index 744ae73..d74d953 100644
--- a/spbu/index.php
+++ b/spbu/index.php
@@ -1109,6 +1109,32 @@ function openParsilPopup(layer, geojson, luas) {
         });
     }, 50);
 }
+function openPointPopup(layer, latlng) {
+    const popupContent = formTambah(latlng.lat.toFixed(7), latlng.lng.toFixed(7));
+    layer.bindPopup(popupContent, { closeButton: true, minWidth: 300 }).openPopup(latlng);
+    setTimeout(() => {
+        const form = document.getElementById('formTambah');
+        if (!form) return;
+        form.addEventListener('submit', function(ev) {
+            ev.preventDefault();
+            const fd = new FormData(this);
+            fetch('simpan.php', { method: 'POST', body: fd })
+                .then(r => r.text())
+                .then(res => {
+                    if (res.trim() === 'success') {
+                        map.closePopup();
+                        cancelPendingShape(false);
+                        setMode(null);
+                        loadData();
+                        showToast('SPBU berhasil ditambahkan!', 'success');
+                    } else {
+                        showToast('Gagal menyimpan SPBU. Coba lagi.', 'error');
+                    }
+                })
+                .catch(() => showToast('Error koneksi ke server.', 'error'));
+        });
+    }, 50);
+}
 map.on('click', function(e) {
     if (mode !== 'point') return;
     if (pendingLayer) {
@@ -1212,6 +1238,62 @@ const iconMerah = L.icon({
     iconAnchor: [16, 32]
 });
 
+function loadData() {
+    // Clear existing SPBU layers
+    layers.spbu24.clearLayers();
+    layers.spbuNo24.clearLayers();
+    featureLayers.spbu = {};
+
+    Promise.all([
+        fetch('ambil_data.php').then(r => r.json()),
+        fetch('ambil_jalan.php').then(r => r.json()),
+        fetch('ambil_parsil.php').then(r => r.json())
+    ]).then(([spbu, jalan, parsil]) => {
+        spbuData = spbu;
+        jalanData = jalan;
+        parsilData = parsil;
+        const spbu24 = spbu.filter(item => item.buka_24jam === 'Ya');
+        const spbuNo24 = spbu.filter(item => item.buka_24jam !== 'Ya');
+        document.getElementById('count-spbu').textContent = spbu.length;
+        document.getElementById('count-jalan').textContent = jalan.length;
+        document.getElementById('count-parsil').textContent = parsil.length;
+
+        spbu24.forEach(item => {
+            const marker = L.marker([parseFloat(item.latitude), parseFloat(item.longitude)], { icon: iconHijau }).addTo(layers.spbu24);
+            featureLayers.spbu[item.id] = marker;
+            marker.on('click', () => selectFeature('spbu', item.id, marker));
+            marker.bindPopup(getFeaturePopup('spbu', item));
+        });
+        spbuNo24.forEach(item => {
+            const marker = L.marker([parseFloat(item.latitude), parseFloat(item.longitude)], { icon: iconMerah }).addTo(layers.spbuNo24);
+            featureLayers.spbu[item.id] = marker;
+            marker.on('click', () => selectFeature('spbu', item.id, marker));
+            marker.bindPopup(getFeaturePopup('spbu', item));
+        });
+
+        renderList('spbu', spbu);
+        renderList('jalan', jalan);
+        renderList('parsil', parsil);
+        const recentItems = [];
+        spbu.slice(-2).reverse().forEach(item => recentItems.push({ type:'spbu', id:item.id, title:item.nama_spbu, subtitle:item.buka_24jam === 'Ya' ? 'SPBU 24 Jam' : 'SPBU Tidak 24 Jam'}));
+        jalan.slice(-2).reverse().forEach(item => recentItems.push({ type:'jalan', id:item.id, title:item.nama_jalan, subtitle:item.status_jalan }));
+        parsil.slice(-1).reverse().forEach(item => recentItems.push({ type:'parsil', id:item.id, title:item.nama_pemilik, subtitle:item.status }));
+        document.getElementById('recent-assets').innerHTML = recentItems.map(item => `
+            <div class="group bg-surface-container-low/50 hover:bg-surface-container-high/80 p-3 rounded-xl cursor-pointer transition-all duration-300 border border-transparent hover:border-outline-variant/20" onclick="flyToFeature('${item.type}', ${item.id})">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
+                        <span class="material-symbols-outlined text-lg">${item.type === 'spbu' ? 'local_gas_station' : item.type === 'jalan' ? 'route' : 'grid_view'}</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="text-sm font-semibold text-on-surface">${item.title}</p>
+                        <p class="text-[10px] text-outline">Updated recently • ${item.type === 'spbu' ? 'SPBU' : item.type === 'jalan' ? 'Jalan' : 'Parsil'}</p>
+                    </div>
+                    <span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
+                </div>
+            </div>`).join('');
+    });
+}
+
 Promise.all([
     fetch('ambil_data.php').then(r => r.json()),
     fetch('ambil_jalan.php').then(r => r.json()),