diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx
index cc08a4d..77309a4 100644
--- a/resources/js/pages/homepage.tsx
+++ b/resources/js/pages/homepage.tsx
@@ -20,7 +20,11 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
 
     useEffect(() => {
         const timer = setTimeout(() => {
-            router.get(window.location.pathname, { search, category: selectedCategorySlug }, {
+            const params: any = {};
+            if (search) params.search = search;
+            if (selectedCategorySlug) params.category = selectedCategorySlug;
+
+            router.get(window.location.pathname, params, {
                 preserveState: true,
                 preserveScroll: true,
                 only: ['bestSellers'],
@@ -34,7 +38,11 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
     }, [search]);
 
     useEffect(() => {
-        router.get(window.location.pathname, { search, category: selectedCategorySlug }, {
+        const params: any = {};
+        if (search) params.search = search;
+        if (selectedCategorySlug) params.category = selectedCategorySlug;
+
+        router.get(window.location.pathname, params, {
             preserveState: true,
             preserveScroll: true,
             only: ['bestSellers'],
@@ -135,7 +143,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                         <nav className="hidden items-center gap-10 text-[10px] font-bold uppercase tracking-[0.2em] md:flex">
                             <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:opacity-70 transition-opacity">Beranda</a>
                             <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:opacity-70 transition-opacity">Produk</a>
-                            <a href="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:opacity-70 transition-opacity">Cara Pesan</a>
                             <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:opacity-70 transition-opacity">Tentang Kami</a>
                         </nav>
 
@@ -357,29 +364,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                     </div>
                 </section>
 
-                {/* How To Order Section */}
-                <section id="howToOrder" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
-                    <div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
-                        <div className="grid grid-cols-1 md:grid-cols-3">
-                            {[
-                                { step: "01", title: "Pilih Product", desc: "Temukan koleksi kemeja terbaik kami yang sesuai dengan gaya Anda." },
-                                { step: "02", title: "Hubungi Kami", desc: "Konfirmasi pesanan melalui WhatsApp dengan detail ukuran dan warna." },
-                                { step: "03", title: "Pengiriman", desc: "Pesanan akan dikemas eksklusif dan dikirim langsung ke alamat Anda." }
-                            ].map((item, idx) => (
-                                <div key={idx} className="group border-b border-[#1e4a6d]/20 p-12 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0">
-                                    <div className="mb-8 flex h-12 w-12 items-center justify-center rounded-full border border-[#1e4a6d]/20 text-xs font-bold transition-all group-hover:bg-[#1e4a6d] group-hover:text-white">
-                                        {item.step}
-                                    </div>
-                                    <h3 className="mb-4 text-xl font-medium">{item.title}</h3>
-                                    <p className="text-sm leading-relaxed opacity-60">
-                                        {item.desc}
-                                    </p>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </section>
-
                 {/* Brand Section */}
                 <section id="aboutUs" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
                     <div className="mx-auto max-w-7xl">
@@ -434,7 +418,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                                 <ul className="flex flex-col gap-3 text-sm opacity-60">
                                     <li><Link href="#" className="hover:underline">Beranda</Link></li>
                                     <li><Link href="#" className="hover:underline">Produk</Link></li>
-                                    <li><Link href="#" className="hover:underline">Cara Pesan</Link></li>
                                     <li><Link href="#" className="hover:underline">Tentang Kami</Link></li>
                                 </ul>
                             </div>
@@ -483,7 +466,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                         <div className="flex flex-col gap-8 text-3xl font-medium">
                             <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:italic transition-all">Beranda</a>
                             <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:italic transition-all">Produk</a>
-                            <a href="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:italic transition-all">Cara Pesan</a>
                             <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami</a>
                         </div>
                         <div className="mt-20 flex gap-6">
@@ -525,8 +507,8 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                                         <div
                                             onClick={() => setActiveModalImage(selectedProduct?.thumbnail_url)}
                                             className={`relative aspect-square w-14 cursor-pointer overflow-hidden transition-all duration-300 ${activeModalImage === selectedProduct?.thumbnail_url
-                                                    ? 'ring-1 ring-[#1e4a6d] ring-offset-2'
-                                                    : 'opacity-40 hover:opacity-100'
+                                                ? 'ring-1 ring-[#1e4a6d] ring-offset-2'
+                                                : 'opacity-40 hover:opacity-100'
                                                 }`}
                                         >
                                             <img src={selectedProduct?.thumbnail_url} className="h-full w-full object-cover" alt="main" />
@@ -538,8 +520,8 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                                                 key={i}
                                                 onClick={() => setActiveModalImage(img.url)}
                                                 className={`relative aspect-square w-14 cursor-pointer overflow-hidden transition-all duration-300 ${activeModalImage === img.url
-                                                        ? 'ring-1 ring-[#1e4a6d] ring-offset-2'
-                                                        : 'opacity-40 hover:opacity-100'
+                                                    ? 'ring-1 ring-[#1e4a6d] ring-offset-2'
+                                                    : 'opacity-40 hover:opacity-100'
                                                     }`}
                                             >
                                                 <img src={img.url} className="h-full w-full object-cover" alt={`view ${i + 1}`} />