diff --git a/Tugas3/index.html b/Tugas3/index.html
new file mode 100644
index 0000000..3c0a3e9
--- /dev/null
+++ b/Tugas3/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="utf-8">
+<title>Tugas 3 - Layer Control SPBU</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<style>
+html, body {height:100%; margin:0; font-family: Arial, Helvetica, sans-serif;}
+#map {height:100%;}
+input, select {width:100%; margin-bottom:5px; padding:4px;}
+button {margin-top:5px; cursor:pointer;}
+.back-link {
+  position: fixed; z-index: 9999; left: 12px; top: 12px;
+  background: white; color: #111827; padding: 9px 12px;
+  border-radius: 10px; text-decoration: none; font-weight: 700;
+  box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
+}
+.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
+.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
+</style>
+</head>
+<body>
+<a class="back-link" href="../">← Landing Page</a>
+<div id="map"></div>
+<script>
+const map = L.map('map').setView([-0.02, 109.34], 13);
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+const iconHijau = new L.Icon({iconUrl:'https://maps.google.com/mapfiles/ms/icons/green-dot.png',iconSize:[32,32]});
+const iconMerah = new L.Icon({iconUrl:'https://maps.google.com/mapfiles/ms/icons/red-dot.png',iconSize:[32,32]});
+const spbuBuka = L.layerGroup();
+const spbuTutup = L.layerGroup();
+
+fetch('../ambil.php').then(res=>res.json()).then(data=>{
+  data.forEach(d=>{
+    const icon = d.buka=='Iya' ? iconHijau : iconMerah;
+    const marker = L.marker([d.lat,d.lng],{icon}).bindPopup(`<b>${d.nama}</b><br>WA: ${d.wa}<br>${d.buka=='Iya'?'Buka 24 Jam':'Tidak Buka 24 Jam'}`);
+    if(d.buka=='Iya') marker.addTo(spbuBuka); else marker.addTo(spbuTutup);
+  });
+  spbuBuka.addTo(map); spbuTutup.addTo(map);
+});
+
+const overlayMaps = {
+  '<img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> SPBU Buka 24 Jam': spbuBuka,
+  '<img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> SPBU Tidak Buka': spbuTutup
+};
+L.control.layers(null, overlayMaps).addTo(map);
+const legend = L.control({position:'bottomright'});
+legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Legenda SPBU</b><br><img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> Buka 24 Jam<br><img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> Tidak Buka 24 Jam'; return div; };
+legend.addTo(map);
+</script>
+</body>
+</html>
