diff --git a/index.html b/index.html
index eebe792..54359cc 100644
--- a/index.html
+++ b/index.html
@@ -528,6 +528,36 @@
         </div>
       </a>
 
+      <!-- PROJECT 4: Choropleth Map -->
+      <a href="choropleth/02.1_ChoroplethMapPontianak.html" class="card"
+        style="--accent: #8B5CF6; --accent-bg: #F5F3FF;">
+        <div class="card-icon-wrap">
+          <!-- Users / Demographic icon -->
+          <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
+        </div>
+        <h3>WebGIS Choropleth Kepadatan Penduduk</h3>
+        <p>Visualisasi spasial interaktif tingkat kepadatan penduduk per wilayah kecamatan di Kota Pontianak berbasis klasifikasi warna tematik menggunakan data BPS 2023.</p>
+        <div class="badges">
+            <span class="badge">Leaflet.js</span>
+            <span class="badge">GeoJSON</span>
+            <span class="badge">Choropleth</span>
+            <span class="badge">BPS 2023</span>
+        </div>
+        <div class="card-action">
+          <span>Buka Aplikasi</span>
+          <svg viewBox="0 0 24 24">
+            <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+        </div>
+      </a>
+
     </div>
   </main>