diff --git a/Choropleth/ptk.html b/Choropleth/ptk.html
index 25cea62..82bbeaa 100644
--- a/Choropleth/ptk.html
+++ b/Choropleth/ptk.html
@@ -1,51 +1,187 @@
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
 <head>
-	<base target="_top">
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Kepadatan Penduduk Pontianak - Choropleth Map</title>
 	
-	<title>Choropleth Tutorial - Leaflet</title>
+	<!-- Google Fonts -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 	
-	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
-
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+	<!-- Leaflet CSS -->
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 
 	<style>
-		html, body {
-			height: 100%;
+		body, html {
 			margin: 0;
+			padding: 0;
+			height: 100%;
+			font-family: 'Inter', sans-serif;
+			overflow: hidden;
+			background-color: #f8fafc;
 		}
-		.leaflet-container {
-			height: 400px;
-			width: 600px;
-			max-width: 100%;
-			max-height: 100%;
+		
+		#map {
+			width: 100vw;
+			height: 100vh;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 1;
+		}
+
+		/* Brand panel overlay */
+		.brand-panel {
+			position: absolute;
+			top: 20px;
+			left: 20px;
+			z-index: 1000;
+			background: rgba(255, 255, 255, 0.9);
+			backdrop-filter: blur(8px);
+			border: 1px solid rgba(191, 219, 254, 0.6);
+			padding: 20px;
+			border-radius: 16px;
+			box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
+			max-width: 320px;
+			transition: all 0.3s ease;
+		}
+		.brand-panel:hover {
+			box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.08);
+			border-color: rgba(29, 78, 216, 0.3);
+		}
+		.brand-title {
+			font-size: 18px;
+			font-weight: 700;
+			color: #1e293b;
+			margin-bottom: 6px;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+		.brand-title svg {
+			color: #1d4ed8;
+		}
+		.brand-subtitle {
+			font-size: 13px;
+			color: #64748b;
+			margin-bottom: 16px;
+			line-height: 1.5;
+		}
+		.btn-back {
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 13px;
+			font-weight: 600;
+			color: #1d4ed8;
+			background: #eff6ff;
+			border: 1px solid #bfdbfe;
+			padding: 10px 16px;
+			border-radius: 10px;
+			text-decoration: none;
+			transition: all 0.2s ease;
+			width: 100%;
+			box-sizing: border-box;
+			justify-content: center;
+		}
+		.btn-back:hover {
+			background: #dbeafe;
+			color: #1e40af;
+			transform: translateY(-1px);
+		}
+		.btn-back svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		/* Custom Info Box style */
+		.info {
+			padding: 12px 18px;
+			font-family: 'Inter', sans-serif;
+			background: rgba(255, 255, 255, 0.9) !important;
+			backdrop-filter: blur(8px);
+			border: 1px solid rgba(191, 219, 254, 0.8) !important;
+			box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
+			border-radius: 14px !important;
+			color: #1e293b;
+			min-width: 200px;
+		}
+		.info h4 {
+			margin: 0 0 6px;
+			color: #64748b;
+			font-size: 11px;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+		.info b {
+			color: #1e293b;
+			font-size: 15px;
+			font-weight: 700;
+		}
+		.info-desc {
+			font-size: 13px;
+			color: #475569;
+			margin-top: 4px;
+		}
+
+		/* Custom Legend style */
+		.legend {
+			line-height: 22px;
+			color: #475569;
+			font-family: 'Inter', sans-serif;
+			font-size: 12px;
+			padding: 14px 18px;
+			background: rgba(255, 255, 255, 0.9) !important;
+			backdrop-filter: blur(8px);
+			border: 1px solid rgba(191, 219, 254, 0.8) !important;
+			box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
+			border-radius: 14px !important;
+		}
+		.legend i {
+			width: 18px;
+			height: 18px;
+			float: left;
+			margin-right: 10px;
+			opacity: 0.85;
+			border-radius: 4px;
 		}
 	</style>
-
-	<style>#map { width: 800px; height: 500px; }
-.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
-.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style>
 </head>
 <body>
 
-<div id='map'></div>
+<div class="brand-panel">
+	<div class="brand-title">
+		<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+		Kepadatan Penduduk
+	</div>
+	<div class="brand-subtitle">Visualisasi choropleth spasial jumlah penduduk per kecamatan di Kota Pontianak.</div>
+	<a href="../index.php" class="btn-back">
+		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+		Kembali ke Portal
+	</a>
+</div>
 
+<div id="map"></div>
+
+<!-- GeoJSON Data -->
 <script type="text/javascript" src="pontianakk.js"></script>
 
 <script type="text/javascript">
+	// Inisialisasi peta
+	const map = L.map('map', { zoomControl: false }).setView([-0.02, 109.34], 12);
 
-	const map = L.map('map').setView([-0.02, 109.34], 12);
+	// Tambahkan tombol zoom di kanan bawah agar tidak bertabrakan dengan brand panel
+	L.control.zoom({ position: 'bottomright' }).addTo(map);
 
 	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
 		maxZoom: 19,
 		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 	}).addTo(map);
 
-	// control that shows state info on hover
+	// Info control (hover)
 	const info = L.control();
 
 	info.onAdd = function (map) {
@@ -55,31 +191,32 @@
 	};
 
 	info.update = function (props) {
-		const contents = props ? `<b>${props.name}</b><br />${props.civilians.toLocaleString()} jiwa` : 'Hover ke kecamatan';
-		this._div.innerHTML = `<h4>Pontianak Population Civilians</h4>${contents}`;
+		const contents = props 
+			? `<b>Kec. ${props.name}</b><br /><div class="info-desc">${props.civilians.toLocaleString('id-ID')} jiwa</div>` 
+			: '<div class="info-desc">Hover ke kecamatan</div>';
+		this._div.innerHTML = `<h4>Info Kependudukan</h4>${contents}`;
 	};
 
 	info.addTo(map);
 
-
-	// get color depending on population density value
-function getColor(d) {
-    return d > 140000 ? '#800026' :
-           d > 120000 ? '#BD0026' :
-           d > 100000 ? '#E31A1C' :
-           d > 80000  ? '#FC4E2A' :
-           d > 60000  ? '#FD8D3C' :
-           d > 50000  ? '#FEB24C' :
-                        '#FFEDA0';
-}
+	// Warna gradien berdasarkan jumlah penduduk
+	function getColor(d) {
+		return d > 140000 ? '#800026' :
+		       d > 120000 ? '#BD0026' :
+		       d > 100000 ? '#E31A1C' :
+		       d > 80000  ? '#FC4E2A' :
+		       d > 60000  ? '#FD8D3C' :
+		       d > 50000  ? '#FEB24C' :
+		                    '#FFEDA0';
+	}
 
 	function style(feature) {
 		return {
-			weight: 2,
+			weight: 2.5,
 			opacity: 1,
 			color: 'white',
 			dashArray: '3',
-			fillOpacity: 0.7,
+			fillOpacity: 0.75,
 			fillColor: getColor(feature.properties.civilians)
 		};
 	}
@@ -88,18 +225,16 @@ function getColor(d) {
 		const layer = e.target;
 
 		layer.setStyle({
-			weight: 5,
-			color: '#666',
+			weight: 4,
+			color: '#1d4ed8',
 			dashArray: '',
-			fillOpacity: 0.7
+			fillOpacity: 0.85
 		});
 
 		layer.bringToFront();
-
 		info.update(layer.feature.properties);
 	}
 
-	/* global statesData */
 	const geojson = L.geoJson(pontianakData, {
 		style,
 		onEachFeature
@@ -122,23 +257,24 @@ function getColor(d) {
 		});
 	}
 
-	map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
-
-
+	// Legend control
 	const legend = L.control({position: 'bottomright'});
 
 	legend.onAdd = function (map) {
-
 		const div = L.DomUtil.create('div', 'info legend');
 		const grades = [50000, 60000, 80000, 100000, 120000, 140000];
 		const labels = [];
 		let from, to;
 
+		labels.push('<strong>Jiwa / Kecamatan</strong><br><br>');
 		for (let i = 0; i < grades.length; i++) {
 			from = grades[i];
 			to = grades[i + 1];
 
-			labels.push(`<i style="background:${getColor(from + 1)}"></i> ${from}${to ? `&ndash;${to}` : '+'}`);
+			labels.push(
+				`<i style="background:${getColor(from + 1)}"></i> ` +
+				`${from.toLocaleString('id-ID')}${to ? ` &ndash; ${to.toLocaleString('id-ID')}` : '+'}`
+			);
 		}
 
 		div.innerHTML = labels.join('<br>');
@@ -146,10 +282,7 @@ function getColor(d) {
 	};
 
 	legend.addTo(map);
-
 </script>
 
-
-
 </body>
 </html>
diff --git a/index.php b/index.php
index b56c946..824516a 100644
--- a/index.php
+++ b/index.php
@@ -1,3 +1,10 @@
+<?php
+// Semua project di-deploy dalam satu folder — gunakan relative path
+$url_spbu       = 'SIG_spbu/';
+$url_miskin     = 'SIG_miskin/gis/';
+$url_jalantanah = 'SIG2_jalantanah/';
+$url_choropleth = 'Choropleth/ptk.html';
+?>
 <!DOCTYPE html>
 <html lang="id">
 <head>
@@ -21,7 +28,7 @@ body {
 .navbar {
   background: var(--white);
   padding: 20px 40px;
-  display: flex;href
+  display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--border);
@@ -55,21 +62,40 @@ body {
 .main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; }
 
 .projects {
-  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+}
+@media (max-width: 1100px) {
+  .projects {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .projects {
+    grid-template-columns: 1fr;
+  }
 }
-@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } }
 
 .project-card {
   background: var(--white); border: 1px solid var(--border);
   border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
   display: flex; flex-direction: column;
-  transition: all .25s ease;
+  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
 }
 .project-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
-  border-color: #bfdbfe;
+  box-shadow: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
+  border-color: #3b82f6;
+}
+.project-card:hover .pc-icon {
+  background: var(--blue-primary);
+  color: var(--white);
+  transform: scale(1.08) rotate(2deg);
+}
+.project-card:hover .pc-link svg {
+  transform: translateX(6px);
 }
 .pc-head {
   padding: 30px 24px 20px; border-bottom: 1px solid var(--border);
@@ -80,6 +106,7 @@ body {
   display: flex; align-items: center; justify-content: center;
   margin-bottom: 18px;
   background: var(--blue-light); color: var(--blue-primary);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .pc-icon svg { width: 28px; height: 28px; }
 .pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
@@ -97,6 +124,9 @@ body {
   font-size: 14px; font-weight: 600; color: var(--blue-primary);
   display: flex; align-items: center; gap: 4px;
 }
+.pc-link svg {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .pc-tag {
   font-size: 11px; font-weight: 600; text-transform: uppercase;
   letter-spacing: .05em; padding: 4px 10px; border-radius: 6px;
@@ -133,7 +163,7 @@ body {
 <main class="main">
   <div class="projects">
 
-    <a class="project-card" href="http://zcgk444o4k8okss8ggcos4os.203.24.51.230.sslip.io">
+    <a class="project-card" href="<?= htmlspecialchars($url_spbu) ?>">
       <div class="pc-head">
         <div class="pc-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>
@@ -150,10 +180,11 @@ body {
       </div>
       <div class="pc-foot">
         <span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+        <span class="pc-tag">SIG SPBU</span>
       </div>
     </a>
 
-    <a class="project-card" href="http://vk04ckgok4s0wosoc884os48.203.24.51.230.sslip.io">
+    <a class="project-card" href="<?= htmlspecialchars($url_miskin) ?>">
       <div class="pc-head">
         <div class="pc-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
@@ -170,10 +201,11 @@ body {
       </div>
       <div class="pc-foot">
         <span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+        <span class="pc-tag">SIG Miskin</span>
       </div>
     </a>
 
-    <a class="project-card" href="http://bggcs44gog844wkcko8sko04.203.24.51.230.sslip.io">
+    <a class="project-card" href="<?= htmlspecialchars($url_jalantanah) ?>">
       <div class="pc-head">
         <div class="pc-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
@@ -190,6 +222,33 @@ body {
       </div>
       <div class="pc-foot">
         <span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+        <span class="pc-tag">SIG Jalan</span>
+      </div>
+    </a>
+
+    <a class="project-card" href="<?= htmlspecialchars($url_choropleth) ?>">
+      <div class="pc-head">
+        <div class="pc-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="9" cy="7" r="4"></circle>
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+          </svg>
+        </div>
+        <h2>Kepadatan Penduduk Pontianak</h2>
+        <p>Peta tematik choropleth wilayah Kota Pontianak berdasarkan jumlah kepadatan penduduk per kecamatan.</p>
+      </div>
+      <div class="pc-body">
+        <ul class="pc-features">
+          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta choropleth interaktif</li>
+          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data populasi per kecamatan</li>
+          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Informasi detail saat hover</li>
+        </ul>
+      </div>
+      <div class="pc-foot">
+        <span class="pc-link">Buka peta tematik <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+        <span class="pc-tag">Choropleth</span>
       </div>
     </a>
 
