diff --git a/app/Livewire/Home/Index.php b/app/Livewire/Home/Index.php
index 6dabc84..ab95398 100644
--- a/app/Livewire/Home/Index.php
+++ b/app/Livewire/Home/Index.php
@@ -4,6 +4,7 @@
 
 use App\Models\Brand;
 use App\Models\ChooseUs;
+use App\Models\Customer;
 use App\Models\Faq;
 use App\Models\PerfumeFeature;
 use Illuminate\Support\Facades\Storage;
@@ -23,11 +24,15 @@ class Index extends Component
 
     public array $whyChooseUs = [];
 
+    public int $totalMembersCount = 0;
+
+    public $latestMembers = [];
+
     public function mount()
     {
         $this->brands = Brand::orderBy('sort_order')
             ->get()
-            ->map(fn (Brand $brand) => [
+            ->map(fn(Brand $brand) => [
                 'name' => $brand->name,
                 'image' => $brand->getFirstMediaUrl('image') ? Storage::url($brand->getFirstMediaUrl('image')) : asset('assets/images/logo.png'),
             ])
@@ -35,7 +40,7 @@ public function mount()
 
         $this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
             ->get()
-            ->map(fn (PerfumeFeature $perfumeFeature) => [
+            ->map(fn(PerfumeFeature $perfumeFeature) => [
                 'name' => $perfumeFeature->name,
                 'description' => $perfumeFeature->description,
             ])
@@ -43,7 +48,7 @@ public function mount()
 
         $this->faqs = Faq::orderBy('sort_order')
             ->get()
-            ->map(fn (Faq $faq) => [
+            ->map(fn(Faq $faq) => [
                 'question' => $faq->question,
                 'answer' => $faq->answer,
             ])
@@ -51,11 +56,18 @@ public function mount()
 
         $this->whyChooseUs = ChooseUs::orderBy('sort_order')
             ->get()
-            ->map(fn (ChooseUs $chooseUs) => [
+            ->map(fn(ChooseUs $chooseUs) => [
                 'name' => $chooseUs->name,
                 'description' => $chooseUs->description,
             ])
             ->toArray();
+
+        $this->totalMembersCount = Customer::whereNotNull('user_id')->count();
+
+        $this->latestMembers = Customer::whereNotNull('user_id')
+            ->inRandomOrder()
+            ->take(3)
+            ->get();
     }
 
     public function render()
diff --git a/resources/views/components/sections/ui/home/_header.blade.php b/resources/views/components/sections/ui/home/_header.blade.php
index 727b10c..6672dc0 100644
--- a/resources/views/components/sections/ui/home/_header.blade.php
+++ b/resources/views/components/sections/ui/home/_header.blade.php
@@ -6,7 +6,8 @@ class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center
             class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group">
 
             <svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                stroke-width="1.5" stroke="currentColor" class="size-6 text-home-foreground transition-colors duration-300">
+                stroke-width="1.5" stroke="currentColor"
+                class="size-6 text-home-foreground transition-colors duration-300">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
             </svg>
 
@@ -28,7 +29,9 @@ class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full tran
         aria-label="Main Navigation">
         @foreach ($header as $item)
             @if ($item['type'] === 'link')
-                <a href="{{ route($item['route']) }}" class="hover:opacity-80 transition-opacity" wire:navigate>
+                <a href="{{ route($item['route']) }}"
+                    class="{{ request()->routeIs($item['route']) ? 'font-bold text-home-primary' : 'hover:opacity-80' }} transition-opacity"
+                    wire:navigate>
                     {{ $item['title'] }}
                 </a>
             @endif
diff --git a/resources/views/livewire/home/article/index.blade.php b/resources/views/livewire/home/article/index.blade.php
index aec40b8..ecf78dc 100644
--- a/resources/views/livewire/home/article/index.blade.php
+++ b/resources/views/livewire/home/article/index.blade.php
@@ -30,7 +30,7 @@ class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full fl
         </div>
     </section>
 
-    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
+    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">k
 
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
 
diff --git a/resources/views/livewire/home/faq/index.blade.php b/resources/views/livewire/home/faq/index.blade.php
index 26c4de3..49966a5 100644
--- a/resources/views/livewire/home/faq/index.blade.php
+++ b/resources/views/livewire/home/faq/index.blade.php
@@ -1,12 +1,36 @@
 <div>
-    <section class="px-6 lg:px-32 xl:px-48 py-36 bg-white min-h-screen">
+    {{-- Hero Section --}}
+    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
+        {{-- Background Image --}}
+        <div class="absolute inset-0 z-0">
+            <img src="https://images.unsplash.com/photo-1752042143353-e6dcc822a023?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Perfume Background" class="w-full h-full object-cover">
+            <div class="absolute inset-0 bg-black/40"></div>
+        </div>
 
-        <header class="mb-16 text-center">
-            <h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
-            <p class="text-home-foreground/60 text-lg max-w-2xl mx-auto">
-                Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami.
+        {{-- Content --}}
+        <div class="relative z-10 container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Artikel Terbaru</h1>
+            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                Baca tips profesional seputar perawatan wewangian, tren lifestyle, dan rekomendasi terbaik.
             </p>
-        </header>
+
+            {{-- Search Bar --}}
+            <div class="max-w-xl mx-auto relative group">
+                <input type="search" placeholder="Cari artikel menarik..." aria-label="Cari artikel"
+                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
+                <button
+                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
 
@@ -74,5 +98,5 @@ class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rou
             </div>
         </div>
 
-    </section>
+        </section>
 </div>
diff --git a/resources/views/livewire/home/partials/jumbotron/left.blade.php b/resources/views/livewire/home/partials/jumbotron/left.blade.php
index a9f020b..56508d7 100644
--- a/resources/views/livewire/home/partials/jumbotron/left.blade.php
+++ b/resources/views/livewire/home/partials/jumbotron/left.blade.php
@@ -3,48 +3,44 @@ class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:px-10 lg:pb-8 flex
 
     <div class="flex flex-col justify-center flex-1 space-y-6 lg:pt-48">
 
-    <header class="flex flex-wrap items-center gap-4">
+        @if ($totalMembersCount > 0)
+            <header class="flex flex-wrap items-center gap-4">
+                <div class="flex items-center">
+                    @foreach ($latestMembers as $member)
+                        <figure
+                            class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm {{ !$loop->first ? '-ms-2' : '' }}">
+                            <img src="https://ui-avatars.com/api/?name={{ urlencode($member->name) }}&background=random&color=fff"
+                                alt="{{ $member->name }}" class="w-full h-full object-cover">
+                        </figure>
+                    @endforeach
+                </div>
+
+                <div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
+                    Plus <span class="text-home-primary font-bold">{{ $totalMembersCount }}</span> Trusted users!
+                </div>
+            </header>
+        @endif
+
+        <h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
+            Discover your best<br><span class="italic font-serif font-light text-home-primary">perfume</span> at today
+        </h1>
+
+        <p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
+            Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you
+            want
+            to make.
+        </p>
+
         <div class="flex items-center">
-            <figure class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
-                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=100"
-                    alt="User 1" class="w-full h-full object-cover">
-            </figure>
-            <figure class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
-                <img src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?auto=format&fit=crop&q=80&w=100"
-                    alt="User 2" class="w-full h-full object-cover">
-            </figure>
-            <figure class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
-                <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=100"
-                    alt="User 3" class="w-full h-full object-cover">
-            </figure>
+            <button
+                class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
+                Explore Shop
+            </button>
+            <span class="w-8 h-[2px] bg-home-primary/20"></span>
+            <button
+                class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
+                <div <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
         </div>
-
-        <div
-            class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
-            Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
-        </div>
-    </header>
-
-    <h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
-        Discover your best<br><span class="italic font-serif font-light text-home-primary">perfume</span> at today
-    </h1>
-
-    <p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
-        Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want
-        to make.
-    </p>
-
-    <div class="flex items-center">
-        <button
-            class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
-            Explore Shop
-        </button>
-        <span class="w-8 h-[2px] bg-home-primary/20"></span>
-        <button
-            class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
-            <div
-                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-            </div>
         </button>
     </div>