diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 3f6cd5f..bcf1850 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -31,7 +31,7 @@
                 <div id="data-panel" class="relative">
                     <div class="bg-white p-6 rounded-3xl shadow-2xl border border-slate-100 relative z-10">
                         <div class="flex justify-between items-center mb-6">
-                            <h3 class="font-bold text-slate-800">Capaian Indikator Utama</h3>
+                            <h3 class="font-bold text-slate-800">Statistik</h3>
                             <i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
                         </div>
                         <div class="space-y-6">
@@ -68,7 +68,7 @@
                                         <i data-lucide="grid"></i>
                                     </div>
                                     <div>
-                                        <p class="text-xs text-slate-500 font-medium">Indikator Utama</p>
+                                        <p class="text-xs text-slate-500 font-medium">Tabel Utama</p>
                                         <p class="font-bold text-xl">{{ $count['resource'] }}</p>
                                     </div>
                                 </div>
@@ -86,39 +86,55 @@
 
     <!-- DPSIR Framework -->
     <section class="py-20 bg-blue-900 text-white overflow-hidden relative">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h3 class="text-3xl font-bold mb-4">Kerangka Kerja DPSIR</h3>
-            <p class="text-blue-200 max-w-2xl mx-auto mb-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h3 class="text-center text-3xl font-bold mb-4">8 Matra DPSIR</h3>
+            <p class="text-center text-blue-200 max-w-2xl mx-auto mb-16">
                 Analisis hubungan kausalitas antara aktivitas manusia dan perubahan lingkungan untuk merumuskan respon kebijakan yang tepat.
             </p>
-            
-            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
-                    <div class="text-4xl font-black mb-4 text-blue-400">D</div>
-                    <h4 class="font-bold mb-2 text-lg">Driving Force</h4>
-                    <p class="text-sm opacity-70">Pertumbuhan penduduk & aktivitas ekonomi kota.</p>
+            <div class="flex gap-4">
+                <div class="w-1/2">
+                    <div class="flex flex-col gap-2">
+                        <div data-d="Eksploitasi sumber daya alam" data-p="Fragmentasi habitat" data-s="Penurunan populasi tumbuhan endemik" data-i="Gangguan penyerbukan pertanian" data-r="Penetapan area ekploitasi terbatas" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>1. Keanekaragaman Hayati</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Pengembangan industri sebagai mesin pertumbuhan ekonomi" data-p="Pembuangan air limbah (BOD, COD, TSS)" data-s="Penurunan kualitas air permukaan" data-i="Ketersediaan air bersih semakin berkurang" data-r="Instalasi pengolahan air limbah" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>2. Kualitas Air</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Urbanisasi pesisir" data-p="Pembuangan Limbah domestik ke laut" data-s="Degradasi terumbu karang" data-i="Penurunan hasil tangkapan ikan" data-r="Pengelolaan wilayah pesisir terpadu" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>3. Laut, Pesisir dan Pantai</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Peningkatan aktivitas transportasi" data-p="Emisi gas buang (CO2, NOx, SO2, PM2.5)" data-s="Konsentrasi polutan PM2.5" data-i="Gangguan kesehatan (ISPA)" data-r="Transportasi ramah lingkungan, penghijauan kota" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>4. Kualitas Udara</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Perluasan pemukiman" data-p="Alih fungsi lahan" data-s="Penurunan tutupan hutan" data-i="Erosi" data-r="Pengaturan Koefisien Dasar Bangunan < 50%" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>5. Lahan dan Hutan</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Peningkatan konsumsi" data-p="Produksi sampah berlebih" data-s="Timbunan sampah di TPA" data-i="Emisi metana" data-r="Ekonomi Sirkular" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>6. Pengelolaan Sampah dan Limbah</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Pertumbuhan ekonomi berbasis fosil" data-p="Emisi dari sektor energi & transportasi" data-s="Perubahan pola curah hujan (musim tak menentu)" data-i="Bencana hidrometeorologi meningkat (banjir, kekeringan)" data-r="Insentif ekonomi hijau" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>7. Perubahan Iklim</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                        <div data-d="Pembangunan tidak berkelanjutan" data-p="Pemukiman di daerah rawan" data-s="Kerentanan wilayah meningkat terhadap bencana" data-i="Kerugian ekonomi" data-r="Tata ruang berbasis risiko" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>8. Risiko Bencana</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
+                    </div>
                 </div>
-                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
-                    <div class="text-4xl font-black mb-4 text-blue-400">P</div>
-                    <h4 class="font-bold mb-2 text-lg">Pressure</h4>
-                    <p class="text-sm opacity-70">Emisi kendaraan, limbah industri & konsumsi air.</p>
-                </div>
-                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
-                    <div class="text-4xl font-black mb-4 text-blue-400">S</div>
-                    <h4 class="font-bold mb-2 text-lg">State</h4>
-                    <p class="text-sm opacity-70">Kondisi riil kualitas udara, air & tutupan lahan.</p>
-                </div>
-                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
-                    <div class="text-4xl font-black mb-4 text-blue-400">I</div>
-                    <h4 class="font-bold mb-2 text-lg">Impact</h4>
-                    <p class="text-sm opacity-70">Dampak pada kesehatan warga & ekosistem perkotaan.</p>
-                </div>
-                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
-                    <div class="text-4xl font-black mb-4 text-blue-400">R</div>
-                    <h4 class="font-bold mb-2 text-lg">Response</h4>
-                    <p class="text-sm opacity-70">Kebijakan pemerintah, inovasi & peran masyarakat.</p>
+                <div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
+                            <div class="text-4xl font-black mb-4 text-blue-400">D</div>
+                            <h4 class="font-bold mb-2 text-lg">Driving Force</h4>
+                            <p class="text-sm opacity-70 d">Eksploitasi sumber daya alam.</p>
+                        </div>
+                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
+                            <div class="text-4xl font-black mb-4 text-blue-400">P</div>
+                            <h4 class="font-bold mb-2 text-lg">Pressure</h4>
+                            <p class="text-sm opacity-70 p">Fragmentasi habitat.</p>
+                        </div>
+                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
+                            <div class="text-4xl font-black mb-4 text-blue-400">S</div>
+                            <h4 class="font-bold mb-2 text-lg">State</h4>
+                            <p class="text-sm opacity-70 s">Penurunan populasi tumbuhan endemik.</p>
+                        </div>
+                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
+                            <div class="text-4xl font-black mb-4 text-blue-400">I</div>
+                            <h4 class="font-bold mb-2 text-lg">Impact</h4>
+                            <p class="text-sm opacity-70 i">Gangguan penyerbukan pertanian.</p>
+                        </div>
+                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
+                            <div class="text-4xl font-black mb-4 text-blue-400">R</div>
+                            <h4 class="font-bold mb-2 text-lg">Response</h4>
+                            <p class="text-sm opacity-70 r">Penetapan area ekploitasi terbatas.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
+
         </div>
     </section>
 
@@ -158,4 +174,21 @@
             </div>
         </div>
     </section>
+@endsection
+@section('js')
+<script>
+    $('.dpsir').on('click',function(){
+        var d = $(this).attr('data-d');
+        var p = $(this).attr('data-p');
+        var s = $(this).attr('data-s');
+        var i = $(this).attr('data-i');
+        var r = $(this).attr('data-r');
+
+        $('.d').html(d);
+        $('.p').html(p);
+        $('.s').html(s);
+        $('.i').html(i);
+        $('.r').html(r); 
+    });
+</script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/appNew.blade.php b/resources/views/layouts/appNew.blade.php
index 5dd32db..5aea4fe 100644
--- a/resources/views/layouts/appNew.blade.php
+++ b/resources/views/layouts/appNew.blade.php
@@ -186,5 +186,6 @@
             }
         });
     </script>
+    @yield('js')
 </body>
 </html>
\ No newline at end of file