diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
index 1c82d6f..c37a06d 100644
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -3,28 +3,22 @@
 }
 
 <!-- Hero Section -->
-<section class="relative min-h-screen bg-cover bg-center overflow-hidden" style="background-image: url('/images/bg-landing-page-header.png');">
+<section id="home" class="relative min-h-screen bg-cover bg-center overflow-hidden"
+    style="background-image: url('/images/bg-landing-page.png');">
     <!-- Background overlay -->
     <div class="absolute inset-0 bg-black/50"></div>
 
     <!-- Hero Content -->
     <div class="relative z-10 flex items-center min-h-screen px-4 lg:px-28 py-20">
-        <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
+        <div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-20">
             <div class="flex justify-start items-center gap-8 w-full">
                 <div class="max-w-[800px] pr-10 flex flex-col justify-start items-start gap-8">
                     <div class="flex flex-col justify-start items-start gap-8 w-full">
-                        <!-- Badge -->
-                        <div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
-                            <div class="w-4 h-4 relative">
-                                <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-900 rounded-full"></div>
-                            </div>
-                            <div class="text-green-900 text-base font-bold font-jakarta">Portal Resmi</div>
-                        </div>
 
                         <!-- Main Title -->
                         <div class="flex flex-col justify-start items-start gap-2 w-full">
                             <h1 class="text-white hero-title font-bold font-jakarta w-full">
-                                e-Bank Sampah Jakarta
+                                E-Bank Sampah Jakarta
                             </h1>
                             <p class="text-white text-base sm:text-lg font-medium font-jakarta leading-7 w-full">
                                 Program dari Dinas Lingkungan Hidup Provinsi Jakarta
@@ -33,17 +27,14 @@
                     </div>
 
                     <!-- CTA Buttons -->
-                    <div class="flex flex-col sm:flex-row justify-start items-start gap-4">
-                        <a href="/Registrasi/RegisterNasabah" class="btn-custom px-8 py-3 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
-                            <span class="text-white text-base font-semibold font-jakarta">Pendaftaran Nasabah</span>
-                            <div class="w-5 h-5 relative">
-                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                                </svg>
-                            </div>
+                    <div class="flex flex-col sm:flex-row justify-start items-start gap-8">
+                        <a href="/Registrasi/RegisterNasabah" class="btn-cta group">
+                            <span class="font-jakarta tracking-wide">Pendaftaran Nasabah</span>
+                            <i class="ph ph-arrow-up-right btn-cta__icon"></i>
                         </a>
-                        <a href="/Registrasi/RegisterBankSampah" class="btn-custom px-8 py-3 bg-white/10 hover:bg-white/20 rounded-full border border-gray-300 flex justify-center items-center gap-2 transition-colors">
-                            <span class="text-white text-base font-semibold font-jakarta">Pendaftaran Bank Sampah</span>
+                        <a href="/Registrasi/RegisterBankSampah" class="btn-cta group">
+                            <span class="font-jakarta tracking-wide">Pendaftaran Bank Sampah</span>
+                            <i class="ph ph-arrow-up-right btn-cta__icon"></i>
                         </a>
                     </div>
                 </div>
diff --git a/Views/Shared/_NavbarLanding.cshtml b/Views/Shared/_NavbarLanding.cshtml
index 998c9fc..df04a56 100644
--- a/Views/Shared/_NavbarLanding.cshtml
+++ b/Views/Shared/_NavbarLanding.cshtml
@@ -1,31 +1,35 @@
 <nav id="navbar" class="w-full h-24 px-4 lg:px-28 fixed left-0 top-0 z-50 flex flex-col justify-center items-center transition-all duration-300">
     <div class="w-full max-w-[1440px] flex justify-center items-center gap-8">
         <div class="flex-1 flex justify-start items-center gap-2">
-            <img class="w-11 h-10" src="/images/logo.png" alt="Logo" />
+            <div class="bg-white rounded-full p-2 flex gap-2">
+                <img class="w-8 h-8" src="/images/logo/e_bank_sampah.png" alt="E Bank Sampah" />
+                <img class="w-8 h-8" src="/images/logo/dlh_jakarta.png" alt="DLH Jakarta" />
+                <img class="w-8 h-8" src="/images/logo/jakarta.png" alt="Jakarta" />
+            </div>
         </div>
-        <div class="hidden lg:flex justify-start items-center gap-8">
-            <a href="/" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+        <div class="hidden lg:flex justify-start items-center gap-8 bg-white/10 backdrop-blur-md p-2 rounded-lg">
+            <a href="#home" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-white text-base font-semibold font-jakarta leading-6">Beranda</div>
             </a>
-            <a href="#about" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+            <a href="#about" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Tentang</div>
             </a>
-            <a href="#publications" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+            <a href="#publications" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Publikasi</div>
             </a>
-            <a href="#regulations" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+            <a href="#regulations" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Regulasi</div>
             </a>
-            <a href="#location" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+            <a href="#location" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Lokasi</div>
             </a>
-            <a href="#helpdesk" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+            <a href="#helpdesk" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
                 <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Helpdesk</div>
             </a>
         </div>
         <div class="flex-1 flex justify-end items-center gap-4">
-            <a asp-controller="Auth" asp-action="Login" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
-                <div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
+            <a asp-controller="Auth" asp-action="Login" class="btn bg-white rounded-full shadow-none border-none">
+                <div class="text-base font-semibold font-jakarta leading-6">Login</div>
             </a>
         </div>
     </div>
@@ -33,7 +37,7 @@
 
 <script>
     // Navbar scroll effect
-    window.addEventListener('scroll', function() {
+    window.addEventListener('scroll', function () {
         const navbar = document.getElementById('navbar');
         if (window.scrollY > 50) {
             navbar.classList.add('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
@@ -41,4 +45,4 @@
             navbar.classList.remove('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
         }
     });
-</script>
+</script>
\ No newline at end of file
diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css
index b4d4e9c..b18380d 100644
--- a/wwwroot/css/input.css
+++ b/wwwroot/css/input.css
@@ -53,14 +53,19 @@
     border-radius: 50%;
   }
 
-  /* Hover effects for buttons and cards */
-  .btn-custom {
-    transition: all 0.3s ease;
+  /* Hover effects for CTA button */
+  .btn-cta {
+    @apply btn btn-outline btn-lg border-white text-white bg-transparent shadow-none;
+    @apply rounded-lg px-6 flex items-center justify-center transition-all duration-300 ease-out;
   }
 
-  .btn-custom:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  .btn-cta:hover {
+    @apply px-6 bg-white/10 border-none scale-110 backdrop-blur-md;
+  }
+
+  .btn-cta__icon {
+    @apply text-xl inline-flex w-0 overflow-hidden opacity-0 -translate-x-3 transition-all duration-300;
+    @apply group-hover:w-5 group-hover:ml-2 group-hover:opacity-100 group-hover:translate-x-1;
   }
 
   /* Map marker animation */
diff --git a/wwwroot/images/bg-landing-page.png b/wwwroot/images/bg-landing-page.png
new file mode 100644
index 0000000..5ffea54
Binary files /dev/null and b/wwwroot/images/bg-landing-page.png differ
diff --git a/wwwroot/images/logo/dlh_jakarta.png b/wwwroot/images/logo/dlh_jakarta.png
new file mode 100644
index 0000000..9789863
Binary files /dev/null and b/wwwroot/images/logo/dlh_jakarta.png differ
diff --git a/wwwroot/images/logo/e_bank_sampah.png b/wwwroot/images/logo/e_bank_sampah.png
new file mode 100644
index 0000000..bcd0e38
Binary files /dev/null and b/wwwroot/images/logo/e_bank_sampah.png differ
diff --git a/wwwroot/images/logo/jakarta.png b/wwwroot/images/logo/jakarta.png
new file mode 100644
index 0000000..287117b
Binary files /dev/null and b/wwwroot/images/logo/jakarta.png differ