diff --git a/app/Livewire/Home/Index.php b/app/Livewire/Home/Index.php
index de319d1..126275a 100644
--- a/app/Livewire/Home/Index.php
+++ b/app/Livewire/Home/Index.php
@@ -2,9 +2,11 @@
 
 namespace App\Livewire\Home;
 
+use App\Models\Brand;
 use App\Models\ChooseUs;
 use App\Models\Faq;
 use App\Models\PerfumeFeature;
+use Illuminate\Support\Facades\Storage;
 use Livewire\Attributes\Layout;
 use Livewire\Component;
 
@@ -13,6 +15,8 @@
 ])]
 class Index extends Component
 {
+    public array $brands = [];
+
     public array $perfumeFeatures = [];
 
     public array $faqs = [];
@@ -21,6 +25,14 @@ class Index extends Component
 
     public function mount()
     {
+        $this->brands = Brand::orderBy('sort_order')
+            ->get()
+            ->map(fn (Brand $brand) => [
+                'name' => $brand->name,
+                'image' => $brand->getFirstMediaUrl('image') ? Storage::url($brand->getFirstMediaUrl('image')) : asset('assets/images/logo.png'),
+            ])
+            ->toArray();
+
         $this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
             ->get()
             ->map(fn (PerfumeFeature $perfumeFeature) => [
diff --git a/resources/views/livewire/home/index.blade.php b/resources/views/livewire/home/index.blade.php
index 0b15929..bf90fca 100644
--- a/resources/views/livewire/home/index.blade.php
+++ b/resources/views/livewire/home/index.blade.php
@@ -29,15 +29,12 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
                         </span>
                     </div>
                 </div>
-                <!-- /column -->
                 <div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
                     <figure>
                         <img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
                     </figure>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
         </div>
         <!-- /.container -->
         <div class="overflow-hidden" style="z-index:1;">
@@ -49,9 +46,7 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
                 </svg>
             </div>
         </div>
-        <!-- /.overflow-hidden -->
     </section>
-    <!-- /section -->
     <section class="wrapper bg-light">
         <div class="container pt-18 pt-md-20 pb-14 pb-md-16">
             <div class="row text-center">
@@ -60,95 +55,42 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
                         class="h-11 position-absolute d-none d-lg-block" style="top: -45%; left: 23%" alt="">
                     <img src="{{ asset('assets/images/svg/doodle4.svg') }}"
                         class="h-8 position-absolute d-none d-lg-block" style="top: 6%; right: 2%" alt="">
-                    <h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
-                    <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
-                            class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
-                        setiap hari.</h3>
+                    <h2 class="fs-16 text-uppercase text-muted mb-3">Merek</h2>
+                    <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami menghadirkan beberapa <span
+                            class="text-gradient gradient-7">merek terkenal</span> terkenal.</h3>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="row mb-20">
                 <div class="col-xxl-11 mx-auto">
-                    <div class="row gx-md-8 gy-10 text-center">
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/cloud-network-2.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Tahan Lama</h4>
+                    <div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-loop="true"
+                        data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000"
+                        data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
+                        <div class="swiper">
+                            <div class="swiper-wrapper ticker">
+                                @foreach ($brands as $brand)
+                                    <div class="swiper-slide px-5">
+                                        <img src="{{ $brand['image'] }}" alt="{{ $brand['name'] }}" />
+                                    </div>
+                                @endforeach
+                            </div>
                         </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-green rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/touchscreen.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Kualitas Terjamin</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-purple rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/lock.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Bahan Premium</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/rocket.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Ramah Untuk Kulit</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-violet rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/bar-chart.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">200+ Aroma</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-orange rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/safe.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Kemasan Elegant</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/controls.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Bebas Alkohol</h4>
-                        </div>
-                        <!--/column -->
-                        <div class="col-md-6 col-lg-3">
-                            <div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl mb-4"> <img
-                                    src="./assets/images/icons/solid/checked.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
-                            <h4 class="fs-20">Tersertifikasi</h4>
-                        </div>
-                        <!--/column -->
                     </div>
-                    <!--/.row -->
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="row text-center">
                 <div class="col-md-10 col-lg-7 mx-auto position-relative">
                     <img src="{{ asset('assets/images/svg/doodle5.svg') }}"
                         class="w-15 position-absolute d-none d-lg-block" data-delay="1800"
                         style="bottom: -60%; right: 10%" alt="">
                     <img src="{{ asset('assets/images/svg/doodle6.svg') }}"
-                        class="h-15 position-absolute d-none d-lg-block" data-delay="1800"
-                        style="top: -40%; left: -5%" alt="">
+                        class="h-15 position-absolute d-none d-lg-block" data-delay="1800" style="top: -40%; left: -5%"
+                        alt="">
                     <h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
                     <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
                             class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
                         setiap hari.</h3>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="row mb-lg-20 mb-xl-23">
                 <div class="col-xxl-11 mx-auto">
                     @if (!empty($perfumeFeatures))
@@ -187,13 +129,10 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
                         </div>
                     @endif
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
         </div>
         <!-- /.container -->
     </section>
-    <!-- /section -->
     <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
         data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
         <div class="container py-14 pt-md-16 pt-lg-0 pb-md-17 position-relative" style="z-index: 2;">
@@ -268,7 +207,6 @@ class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
         <!--/.row -->
         <!-- /.container -->
     </section>
-    <!-- /section -->
     <section class="wrapper bg-light">
         <div class="container py-16 py-md-18">
             <div class="row text-center">
@@ -284,16 +222,13 @@ class="h-17 position-absolute d-none d-lg-block" style="bottom: 5%; left: -17%"
                             class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa harus
                         berlebihan.</h3>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="row d-flex align-items-start mb-19">
                 <div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
                     <figure>
                         <img src="{{ asset('assets/images/devices5.png') }}" alt="image">
                     </figure>
                 </div>
-                <!-- /column -->
                 <div class="col-lg-5 ms-auto">
                     @foreach ($whyChooseUs as $item)
                         <div class="d-flex flex-row mb-8">
@@ -306,9 +241,7 @@ class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa ha
                         </div>
                     @endforeach
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="row">
                 <div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
                     <img src="{{ asset('assets/images/svg/doodle1.svg') }}"
@@ -324,9 +257,7 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
                         <span class="text-gradient gradient-7">pelanggan</span> tentang kami.
                     </h3>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
             <div class="grid mb-12">
                 <div class="row isotope gy-6">
                     <div class="item col-md-6 col-xl-4">
@@ -453,13 +384,11 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
                     </div>
                     <!--/column -->
                 </div>
-                <!-- /.row -->
             </div>
             <!-- /.grid-view -->
         </div>
         <!-- /.container -->
     </section>
-    <!-- /section -->
     <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
         data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
         <div class="overflow-hidden" style="z-index:1;">
@@ -471,7 +400,6 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
                 </svg>
             </div>
         </div>
-        <!-- /.overflow-hidden -->
         <div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
             <div class="row gx-0 gy-10">
                 <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
@@ -494,16 +422,12 @@ class="text-gradient gradient-7">one place.</span></h2>
                                     class="h-11 rounded-xl" alt=""></a></span>
                     </div>
                 </div>
-                <!-- /column -->
                 <div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
                     <figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
                 </div>
-                <!-- /column -->
             </div>
-            <!-- /.row -->
         </div>
         <!-- /.container -->
     </section>
-    <!-- /section -->
 
 </div>