diff --git a/public/assets/.DS_Store b/public/assets/.DS_Store
index 6f13ee5..7a39fc0 100644
Binary files a/public/assets/.DS_Store and b/public/assets/.DS_Store differ
diff --git a/public/assets/Background.png b/public/assets/Background.png
new file mode 100644
index 0000000..4fa99ca
Binary files /dev/null and b/public/assets/Background.png differ
diff --git a/public/assets/character 1.png b/public/assets/character 1.png
new file mode 100644
index 0000000..a8b00cb
Binary files /dev/null and b/public/assets/character 1.png differ
diff --git a/public/assets/character 2.png b/public/assets/character 2.png
new file mode 100644
index 0000000..f6191af
Binary files /dev/null and b/public/assets/character 2.png differ
diff --git a/public/assets/logo/dinas.png b/public/assets/logo/dinas.png
new file mode 100644
index 0000000..b542fbc
Binary files /dev/null and b/public/assets/logo/dinas.png differ
diff --git a/public/assets/logo/dishub.png b/public/assets/logo/dishub.png
new file mode 100644
index 0000000..3131cfc
Binary files /dev/null and b/public/assets/logo/dishub.png differ
diff --git a/public/assets/logo/kai.png b/public/assets/logo/kai.png
new file mode 100644
index 0000000..adc8efc
Binary files /dev/null and b/public/assets/logo/kai.png differ
diff --git a/public/assets/logo/mrt.png b/public/assets/logo/mrt.png
new file mode 100644
index 0000000..5712ab9
Binary files /dev/null and b/public/assets/logo/mrt.png differ
diff --git a/public/assets/logo/pam.png b/public/assets/logo/pam.png
new file mode 100644
index 0000000..3af8442
Binary files /dev/null and b/public/assets/logo/pam.png differ
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 4bb6e36..7d39e34 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,117 +1,289 @@
 @extends('layouts.app')
+@section('css')
+@endsection
 @section('content')
-<div class="flex flex-col justify-center items-center mx-auto gap-10 bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl  inset-y-0 w-full -z-10" style='min-height:60vh;'>
-    <div class="p-3">
-        <h1 class="text-white text-center bold text-4xl">Pencarian Data Menjadi Lebih Sederhana</h1>
+<!-- Navbar -->
+  <!-- Navbar -->
+  
+  <?php $asset = asset('assets/Background.png'); ?>
+  <section 
+    class="relative h-[90vh] mb-10 md:h-screen bg-cover bg-center flex items-center bg-[#1E4D8B] md:bg-white md:bg-[url({{ $asset }})]"
+    style="">
+
+    {{-- <div class="absolute md:hidden bottom-0 left-0 w-full">
+      <svg viewBox="0 0 1440 320">
+        <path fill="#ffffff" fill-opacity="1" 
+          d="M0,224L60,224C120,224,240,224,360,202.7C480,181,600,139,720,128C840,117,960,139,1080,160C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
+        </path>
+      </svg>
+    </div> --}}
+
+    <div class="container relative z-10 mx-auto px-6">
+      <h2 class="text-3xl md:text-4xl active font-bold text-white mb-4">Dokumen Informasi Kinerja</h2>
+      <h3 class="text-3xl md:text-4xl font-bold text-white mb-6">Pengelolaan Lingkungan Hidup Daerah</h3>
+      <p class="text-white mb-6 md:w-130">
+        Dinas Lingkungan Hidup di tingkat daerah, menyediakan data dan informasi
+        tentang kondisi lingkungan hidup dan kinerja pengelolaan lingkungan di wilayahnya.
+      </p>
+      <form action="">
+        <div class="relative w-full max-w-md">
+                <!-- Input -->
+                <input 
+                type="text" 
+                placeholder="Apa yang ingin kamu cari ?" 
+                style="border: none;"
+                class="w-full pl-5 pr-16 py-5 rounded-full text-[#fff] focus:outline-none"
+                />
+                <!-- Tombol cari -->
+                <button 
+                class="absolute top-15.5 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full"
+                style="background: #E9811A;">
+                <i class="ri-search-line"></i>
+                </button>
+            </div>
+        
+      </form>
     </div>
-    <div class="px-3">
-        <form action="">
-            <div class="flex flex-row justify-between items-center gap-10 rounded-full bg-white p-3">
+  </section>
+  
+
+  <!-- Stats Section -->
+  <section class="container relative z-10 mx-auto px-6 md:-mt-45 grid grid-cols-1 md:grid-cols-3 gap-6">
+    <!-- Card 1 -->
+    <div class="bg-[#F08787] rounded-2xl shadow-lg p-6 text-white text-left">
+        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
+            <div class="flex justify-between items-start">
                 <div>
-                    <select name="" id="" class="form-select border-none">
-                        <option value="">All</option>
-                    </select>
+                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Dataset</h3>
                 </div>
-                <div class="">
-                    <input type="text" class="px-6 form-input border-none" placeholder="Data apa yang ingin anda cari..">
-                </div>
-                <div class="pl-3">
-                    <button class="btn"><i class="ri-search-line"></i></button>
+                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
+                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M24.5 8C16.4887 8 10 11.2817 10 15.3333C10 19.385 16.4887 22.6667 24.5 22.6667C32.5112 22.6667 39 19.385 39 15.3333C39 11.2817 32.5112 8 24.5 8ZM10 19V24.5C10 28.5517 16.4887 31.8333 24.5 31.8333C32.5112 31.8333 39 28.5517 39 24.5V19C39 23.0517 32.5112 26.3333 24.5 26.3333C16.4887 26.3333 10 23.0517 10 19ZM10 28.1667V33.6667C10 37.7183 16.4887 41 24.5 41C32.5112 41 39 37.7183 39 33.6667V28.1667C39 32.2183 32.5112 35.5 24.5 35.5C16.4887 35.5 10 32.2183 10 28.1667Z" fill="white"/>
+                    </svg>
+                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
                 </div>
             </div>
-        </form>
-    </div>
-    <div class="relative container mx-auto p-3">
-        <div class="grid grid-cols-1 lg:flex -z-10  w-full gap-6 justify-center items-center">
-            <div class="card rounded-full p-3">
-                <div class="flex flex-row items-center gap-3">
-                    <div class="p-3 ">
-                        <i class="ri-database-line text-xl"></i>
-                    </div>
-                    <h5 class="text-xl bold">1.000</h5>
-                    <span>Dataset</span>
-                </div>
-            </div>
-            <div class="card rounded-full p-3">
-                <div class="flex flex-row items-center gap-3">
-                    <div class="p-3 ">
-                        <i class="ri-survey-line text-xl"></i>
-                    </div>
-                    <h5 class="text-xl bold">290</h5>
-                    <span>Survei</span>
-                </div>
-            </div>
-            <div class="card rounded-full p-3">
-                <div class="flex flex-row items-center gap-3">
-                    <div class="p-3 ">
-                        <i class="ri-box-3-line text-xl"></i>
-                    </div>
-                    <h5 class="text-xl bold">19</h5>
-                    <span>Produk Statistik</span>
+            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
+                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
+                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="367">367</div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
-<div class="container mx-auto hidden">
-    <div class="px-6 py-10">
-        <div class="grid md:grid-cols-3 xl:grid-cols-4 gap-6 justify-center items-center">
-            @foreach($topik as $dataTtopik)
-            <a href="">
-                <div class="card px-6 py-3 rounded-full">
-                    <div class="flex flex-row items-center gap-2">
-                        <div class="p-2 ">
-                            <i class="ri-team-line text-xl"></i>
-                        </div>
-                        <div class="">
-                            <h5 class=" text-md">{{$dataTtopik->name}}</h5>
-                        </div>
-                    </div>
+    <!-- Card 2 -->
+    <div class="bg-[#A3DC9A] rounded-2xl shadow-lg p-6 text-white text-left">
+        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Resource Data</h3>
                 </div>
-            </a>
-            @endforeach
-        </div>
-    </div>
-</div>
+                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
+                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M33.6875 20.9271L42.875 25.5208L24.5 34.7083L6.125 25.5208L15.3125 20.9271M33.6875 31.1354L42.875 35.7292L24.5 44.9167L6.125 35.7292L15.3125 31.1354M24.5 6.125L42.875 15.3125L24.5 24.5L6.125 15.3125L24.5 6.125Z" stroke="white" stroke-width="2"/>
+                    </svg>
 
-<div class="card p-10">
-    <div class="container mx-auto">
-        <div class="flex flex-col gap-6">
-            <div>
-                <h5 class="bold text-2xl">Dataset Terbaru</h5>
+                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
+                </div>
             </div>
-            <div>
-                <div class="grid md:grid-cols-2 lg:grid-cols-4 grid-cols-1 gap-3">
-                    @foreach($dataset as $dataSet)
-                    <div class="card p-6">
-                        <div class="flex flex-col gap-2">
-                            <div class="flex flex-row gap-3">
-                                <div>
-                                    <img src="{{asset('assets/logo-dlh.png')}}" width="80" alt="">
-                                </div>
-                                <div class="flex flex-col gap-3">
-                                    <h4 class="font-bold text-md">{{$dataSet->name}}</h4>
-                                    <h4 class="text-xs">{{$dataSet->instansi->name}}</h4>
-                                </div>
-                            </div>
-                            <div>
-                                <p>{{substr($dataSet->deskripsi,0,100)}}</p>
-                            </div>
-                            <div>
-                                <p><i class="ri-calendar-line"></i>&nbsp;{{date('d-m-Y',strtotime($dataSet->created_at))}}</p>
-                            </div>
-                            <div>
-                                <a href="" class="btn bg-primary mt-4 text-white">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    @endforeach
-
-
+            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
+                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
+                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="60">60</div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+    <!-- Card 3 -->
+    <div class="bg-[#7F55B1] rounded-2xl shadow-lg p-6 text-white text-left">
+        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Organisasi Terintegrasi</h3>
+                </div>
+                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
+                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M24.526 45.9283C12.7216 45.9283 3.10843 36.335 3.08852 24.5275C3.0761 21.7112 3.62273 18.9204 4.69673 16.3169C5.77073 13.7134 7.35074 11.3489 9.34521 9.36047L11.515 11.5226C9.80564 13.2272 8.4514 15.2539 7.53067 17.4854C6.60993 19.7169 6.141 22.1089 6.15103 24.5229C6.14865 26.937 6.62517 29.3275 7.553 31.5561C8.48083 33.7848 9.84154 35.8072 11.5563 37.5064C13.2577 39.2112 15.2796 40.5625 17.5055 41.4823C19.7315 42.4022 22.1175 42.8723 24.526 42.8658H24.5567C26.579 42.8678 28.5873 42.5303 30.4979 41.8674L31.5116 44.7584C29.2771 45.5345 26.9282 45.93 24.5628 45.9283H24.526Z" fill="white"/>
+                    <path d="M22.9688 24.5H26.0312V30.625H29.0938C29.906 30.625 30.6849 30.9477 31.2593 31.522C31.8336 32.0963 32.1562 32.8753 32.1562 33.6875V38.2812H29.0938V33.6875H26.0312V38.2812H22.9688V33.6875H19.9062V38.2812H16.8438V33.6875C16.8438 32.8753 17.1664 32.0963 17.7407 31.522C18.3151 30.9477 19.094 30.625 19.9062 30.625H22.9688V24.5ZM35.2188 39.8125C35.6249 39.8125 36.0143 39.9738 36.3015 40.261C36.5887 40.5482 36.75 40.9376 36.75 41.3438C36.75 41.7499 36.5887 42.1393 36.3015 42.4265C36.0143 42.7137 35.6249 42.875 35.2188 42.875C34.8126 42.875 34.4232 42.7137 34.136 42.4265C33.8488 42.1393 33.6875 41.7499 33.6875 41.3438C33.6875 40.9376 33.8488 40.5482 34.136 40.261C34.4232 39.9738 34.8126 39.8125 35.2188 39.8125ZM13.7812 6.125C14.1874 6.125 14.5768 6.28633 14.864 6.57349C15.1512 6.86066 15.3125 7.25014 15.3125 7.65625C15.3125 8.06236 15.1512 8.45184 14.864 8.73901C14.5768 9.02617 14.1874 9.1875 13.7812 9.1875C13.3751 9.1875 12.9857 9.02617 12.6985 8.73901C12.4113 8.45184 12.25 8.06236 12.25 7.65625C12.25 7.25014 12.4113 6.86066 12.6985 6.57349C12.9857 6.28633 13.3751 6.125 13.7812 6.125Z" fill="white"/>
+                    <path d="M32.0338 15.4748C31.3876 11.9039 28.2546 9.1875 24.5 9.1875C20.7454 9.1875 17.6124 11.9039 16.9662 15.4748C15.6247 15.7947 14.4299 16.5568 13.5744 17.6385C12.7188 18.7202 12.2523 20.0584 12.25 21.4375C12.25 24.8154 14.9971 27.5625 18.375 27.5625H19.9062V24.5H18.375C16.686 24.5 15.3125 23.1265 15.3125 21.4375C15.3125 19.7485 16.686 18.375 18.375 18.375H19.9062V16.8438C19.9062 14.3111 21.9673 12.25 24.5 12.25C27.0327 12.25 29.0938 14.3111 29.0938 16.8438V18.375H30.625C32.314 18.375 33.6875 19.7501 33.6875 21.4375C33.6875 23.1249 32.314 24.5 30.625 24.5H29.0938V27.5625H30.625C34.0029 27.5625 36.75 24.8154 36.75 21.4375C36.7477 20.0584 36.2812 18.7202 35.4256 17.6385C34.5701 16.5568 33.3753 15.7947 32.0338 15.4748Z" fill="white"/>
+                    <path d="M39.6594 39.6426L37.4942 37.4759C39.2061 35.7743 40.5636 33.7502 41.488 31.5205C42.4124 29.2908 42.8854 26.9 42.8796 24.4863C42.8796 14.3555 34.6369 6.11127 24.5046 6.11127C22.4374 6.11127 20.4391 6.44355 18.5618 7.0974L17.5543 4.2064C19.7899 3.43426 22.1394 3.04295 24.5046 3.04877C36.3259 3.04877 45.9421 12.665 45.9421 24.4863C45.9421 30.2086 43.7111 35.5909 39.6594 39.6426Z" fill="white"/>
+                    </svg>
+
+                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
+                </div>
+            </div>
+            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
+                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
+                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="60">60</div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </section>
+  
+  <section class="contianer relative px-10 pt-20">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div class="">
+        <img src="{{ asset('assets/character 2.png') }}" class="left-0">
+      </div>
+      <div class="p-5 flex flex-col gap-3">
+        <h3 class="text-3xl poppins-bold active">Resource Data Terbaru</h3>
+        <p class="lg:w-150">Temukan informasi terbaru dan terpercaya dari koleksi 60 resource data kami. Berikut beberapa data pilihan yang dapat Anda akses langsung. Untuk melihat semua data, silakan kunjungi halaman penuh</p>
+        <div class="flex flex-col mt-10 gap-5">
+          <div class="flex">
+            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
+              <a class="mr-10" href="">Curah Hujan Rata-Rata Bulanan</a>
+              <i class="ri-arrow-right-line"></i>
+            </div>
+          </div>
+          <div class="flex">
+            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
+              <a class="mr-10" href="">Jumlah Rumah Tangga dan Fasilitas Tempat Buang Air Besar</a>
+              <i class="ri-arrow-right-line"></i>
+            </div>
+          </div>
+          <div class="flex">
+            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
+              <a class="mr-10" href="">Jumlah Rumah Tangga Miskin</a>
+              <i class="ri-arrow-right-line"></i>
+            </div>
+          </div>
+          <div class="flex">
+            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
+              <a class="mr-10" href="">Jumlah Kendaraan Bermotor dan Jenis Bahan Bakar yang digunakan</a>
+              <i class="ri-arrow-right-line"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
+  <section class="contianer relative pt-20">
+    <div class="flex gap-7 md:gap-3 bg-[#F0F0F0] p-10 overflow-x-auto">
+      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
+        <div class="mx-auto">
+          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="" class="">
+        </div>
+        <div class="mx-auto">
+          <h1>Dinas Lingungkang Hidup</h1>
+        </div>
+      </div>
+      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
+        <div class="mx-auto">
+          <img src="{{ asset('assets/logo/mrt.png') }}" alt="" width="" class="">
+        </div>
+        <div class="mx-auto">
+          <h1>MRT Jakarta</h1>
+        </div>
+      </div>
+      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
+        <div class="mx-auto">
+          <img src="{{ asset('assets/logo/kai.png') }}" alt="" width="" class="">
+        </div>
+        <div class="mx-auto">
+          <h1>KAI Commuter Line</h1>
+        </div>
+      </div>
+      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
+        <div class="mx-auto">
+          <img src="{{ asset('assets/logo/pam.png') }}" alt="" width="" class="">
+        </div>
+        <div class="mx-auto">
+          <h1>PAM Jaya</h1>
+        </div>
+      </div>
+      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
+        <div class="mx-auto">
+          <img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="" class="">
+        </div>
+        <div class="mx-auto">
+          <h1>Dinas Perhubungan</h1>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <section class="container relative px-10 py-20">
+    <div class="relative flex justify-between items-center content-center mb-10">
+      <div>
+        <h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
+      </div>
+      <div>
+        <a href="" class="p-3 bg-[#FFAD5C] text-white rounded-full">Lihat Semua Dataset</a>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
+        <div class="flex flex-col gap-3 mx-auto items-center">
+          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
+          <h1 class="font-bold">Dinas Lingungkang Hidup</h1>
+        </div>
+        <div class="flex flex-col gap-3 w-1/2">
+          <div>
+            <h5 class="font-bold">Jumlah Rumah Tangga Miskin</h5>
+          </div>
+          <div>
+            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
+          </div>
+          <div class="mt-4">
+            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
+          </div>
+        </div>
+      </div>
+      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
+        <div class="flex flex-col gap-3 mx-auto items-center">
+          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
+          <h1 class="font-bold">Dinas Lingungkang Hidup</h1>
+        </div>
+        <div class="flex flex-col gap-3 w-1/2">
+          <div>
+            <h5 class="font-bold">Curah Hujan Rata-Rata Bulanan</h5>
+          </div>
+          <div>
+            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
+          </div>
+          <div class="mt-4">
+            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
+          </div>
+        </div>
+      </div>
+      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
+        <div class="flex flex-col gap-3 mx-auto items-center">
+          <img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="50" class="">
+          <h1 class="font-bold">Dinas Perhubungan</h1>
+        </div>
+        <div class="flex flex-col gap-3 w-1/2">
+          <div>
+            <h5 class="font-bold">Jumlah Kendaraan Bermotor dan Jenis Bahan Bakar  yang digunakan</h5>
+          </div>
+          <div>
+            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
+          </div>
+          <div class="mt-4">
+            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
+          </div>
+        </div>
+      </div>
+      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
+        <div class="flex flex-col gap-3 mx-auto items-center">
+          <img src="{{ asset('assets/logo/pam.png') }}" alt="" width="100%" class="">
+          <h1 class="font-bold">PAM JAYA</h1>
+        </div>
+        <div class="flex flex-col gap-3 w-1/2">
+          <div>
+            <h5 class="font-bold">Jumlah Rumah Tangga dan Fasilitas Tempat Buang Air Besar</h5>
+          </div>
+          <div>
+            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
+          </div>
+          <div class="mt-4">
+            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+  
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 3c3eafc..7bd47cf 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -18,37 +18,169 @@
     <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
     <script src="{{asset('assets/js/config.js')}}"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <style>
+        .active{
+            color: #E9811A!important;
+        }
+        .poppins-thin {
+            font-family: "Poppins", sans-serif;
+            font-weight: 100;
+            font-style: normal;
+            }
+
+            .poppins-extralight {
+            font-family: "Poppins", sans-serif;
+            font-weight: 200;
+            font-style: normal;
+            }
+
+            .poppins-light {
+            font-family: "Poppins", sans-serif;
+            font-weight: 300;
+            font-style: normal;
+            }
+
+            .poppins-regular {
+            font-family: "Poppins", sans-serif;
+            font-weight: 400;
+            font-style: normal;
+            }
+
+            .poppins-medium {
+            font-family: "Poppins", sans-serif;
+            font-weight: 500;
+            font-style: normal;
+            }
+
+            .poppins-semibold {
+            font-family: "Poppins", sans-serif;
+            font-weight: 600;
+            font-style: normal;
+            }
+
+            .poppins-bold {
+            font-family: "Poppins", sans-serif;
+            font-weight: 700;
+            font-style: normal;
+            }
+
+            .poppins-extrabold {
+            font-family: "Poppins", sans-serif;
+            font-weight: 800;
+            font-style: normal;
+            }
+
+            .poppins-black {
+            font-family: "Poppins", sans-serif;
+            font-weight: 900;
+            font-style: normal;
+            }
+
+            .poppins-thin-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 100;
+            font-style: italic;
+            }
+
+            .poppins-extralight-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 200;
+            font-style: italic;
+            }
+
+            .poppins-light-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 300;
+            font-style: italic;
+            }
+
+            .poppins-regular-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 400;
+            font-style: italic;
+            }
+
+            .poppins-medium-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 500;
+            font-style: italic;
+            }
+
+            .poppins-semibold-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 600;
+            font-style: italic;
+            }
+
+            .poppins-bold-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 700;
+            font-style: italic;
+            }
+
+            .poppins-extrabold-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 800;
+            font-style: italic;
+            }
+
+            .poppins-black-italic {
+            font-family: "Poppins", sans-serif;
+            font-weight: 900;
+            font-style: italic;
+            }
+
+    </style>
     @yield('css')
 </head>
 
-<body class="">
-    <nav class="relative bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl">
-        <div class="container mx-auto">
-            <div class="flex justify-between items-center px-5 py-5">
-                <div class="flex flex-row items-center gap-3">
-                    <div class="p-1 bg-white rounded-full">
-                        <img src="{{asset('assets/logo-dlh.png')}}" width="40" alt="">
-                    </div>
-                    <div>
-                        <h5 class="text-white bold text-2xl">DIKPLHD</h5>
-                        <h5 class="text-white ">Dinas Lingkungan Hidup</h5>
-                    </div>
-                </div>
-                <div class="flex flex-row gap-10">
-                    <a class="text-white font-bold" href="{{url('/')}}">Home</a>
-                    <a class="text-white font-bold" href="{{url('/search?page=opd')}}">OPD</a>
-                    <a class="text-white font-bold" href="{{url('/search?page=dataset')}}">Dataset</a>
-                </div>
-                <div>
-                    <a class="btn text-white font-bold" href="{{url('login')}}">Login&nbsp;<i class="ri-login-box-line"></i></a>
-                </div>
+<body class="poppins-regular bg-white">
+    <header class="absolute w-full z-20">
+        <div class="container mx-auto flex justify-between items-center px-6 py-4">
+        <!-- Logo -->
+        <div class="flex items-center gap-3">
+            <img src="{{ asset('assets/logo-dlh.png') }}" class="w-12 h-12 rounded-full bg-white p-1" alt="logo">
+            <div>
+            <h1 class="text-accent poppins-bold font-bold text-lg active">DIKPLHD</h1>
+            <p class="text-white text-sm">Dinas Lingkungan Hidup Jakarta</p>
             </div>
         </div>
-    </nav>
+
+        <!-- Menu Desktop -->
+        <nav class="hidden lg:flex gap-8">
+            <a href="#" class="active font-bold">Home</a>
+            <a href="#" class="text-white hover:text-accent">Resource Data</a>
+            <a href="#" class="text-white hover:text-accent">Dataset</a>
+            <a href="#" class="text-white hover:text-accent">Dataset Tambahan</a>
+            <a href="#" class="text-white hover:text-accent">Bantuan</a>
+        </nav>
+
+        <!-- Tombol Mobile -->
+        <button id="menu-btn" class="lg:hidden block  text-white focus:outline-none">
+            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+        </button>
+        </div>
+
+        <!-- Menu Mobile -->
+        <div id="mobile-menu" class="hidden flex flex-col bg-white px-6 py-4 md:hidden">
+            <a href="#" class="py-2 text-[#103760] hover:text-[#E9811A]">Home</a>
+            <a href="#" class="py-2 text-[#103760] hover:text-[#E9811A]">Resource Data</a>
+            <a href="#" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset</a>
+            <a href="#" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset Tambahan</a>
+            <a href="#" class="py-2 text-[#103760] hover:text-[#E9811A]">Bantuan</a>
+        </div>
+    </header>
     
     @yield('content')
 
-    <div class="p-12 text-white" style="background:#333;">
+    <div class="p-12 text-white hidden" style="background:#333;">
         <div class="container">
             <div class="flex flex-row justify-between items-center gap-6 mb-5">
                 <div>
@@ -85,9 +217,12 @@
             </div>
         </div>
     </div>
-    <div class="flex flex-row items-center text-center justify-center p-4 text-white" style="background:#333;">
-        <p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta. All Right Reserved</p>
+    <div class="w-full p-4 bg-[#103760]">
+        <div class="flex px-10 text-white">
+            <p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
+        </div>
     </div>
+    
 
     <!-- Plugin Js -->
     <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
@@ -125,6 +260,14 @@
                   toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
               @endif
     </script>
+    <script>
+    // Toggle Menu Mobile
+    const btn = document.getElementById('menu-btn');
+    const menu = document.getElementById('mobile-menu');
+    btn.addEventListener('click', () => {
+      menu.classList.toggle('hidden');
+    });
+  </script>
 
     <!-- Dashboard App js -->
     @yield('js')