diff --git a/src/app/[country]/[locale]/(storefront)/layout.tsx b/src/app/[country]/[locale]/(storefront)/layout.tsx
index 37ec088b..e3eea42a 100644
--- a/src/app/[country]/[locale]/(storefront)/layout.tsx
+++ b/src/app/[country]/[locale]/(storefront)/layout.tsx
@@ -43,14 +43,12 @@ export default async function StorefrontLayout({
     .then((res) => res.data)
     .catch(() => []);
 
-  const menuCategories = rootCategories.flatMap((root) => root.children ?? []);
-
   return (
     <>
       <Header rootCategories={rootCategories} />
-      {menuCategories.length > 0 && (
+      {rootCategories.length > 0 && (
         <nav aria-label="Category navigation" className="sr-only">
-          <CategoryLinks categories={menuCategories} basePath={basePath} />
+          <CategoryLinks categories={rootCategories} basePath={basePath} />
         </nav>
       )}
       <main className="flex-1">{children}</main>
diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
index 0996d0da..c562d4c1 100644
--- a/src/components/layout/MobileMenu.tsx
+++ b/src/components/layout/MobileMenu.tsx
@@ -3,7 +3,6 @@
 import type { Category } from "@spree/sdk";
 import { ArrowLeft, Check, ChevronRight, User, X } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Button } from "@/components/ui/button";
@@ -46,7 +45,6 @@ export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const { country, currency, countries } = useStore();
-  const router = useRouter();
   const { isCountryNavigating, handleCountrySelect } = useCountrySwitch({
     currentCountry: country,
     onBeforeNavigate: () => setOpen(false),
@@ -98,14 +96,6 @@ export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
     }
   };
 
-  const handleNavigate = (href: string) => {
-    setOpen(false);
-    router.push(href);
-  };
-
-  // Flatten root categories: show their children directly instead of taxonomy names
-  const menuCategories = rootCategories.flatMap((root) => root.children ?? []);
-
   // Shared link style
   const linkClass =
     "text-left text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg px-3 py-2.5 text-base transition-colors";
@@ -225,21 +215,21 @@ export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
             }`}
           >
             <nav className="flex flex-col gap-1 px-4 flex-1 overflow-y-auto pt-2">
-              <button
-                type="button"
-                onClick={() => handleNavigate(basePath || "/")}
+              <Link
+                href={basePath || "/"}
+                onClick={() => setOpen(false)}
                 className={linkClass}
               >
                 Home
-              </button>
-              <button
-                type="button"
-                onClick={() => handleNavigate(`${basePath}/products`)}
+              </Link>
+              <Link
+                href={`${basePath}/products`}
+                onClick={() => setOpen(false)}
                 className={linkClass}
               >
                 All Products
-              </button>
-              {menuCategories.map((category) =>
+              </Link>
+              {rootCategories.map((category) =>
                 category.children && category.children.length > 0 ? (
                   <button
                     key={category.id}
@@ -251,25 +241,23 @@ export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
                     <ChevronRight className="w-4 h-4 text-gray-400" />
                   </button>
                 ) : (
-                  <button
+                  <Link
                     key={category.id}
-                    type="button"
-                    onClick={() =>
-                      handleNavigate(`${basePath}/c/${category.permalink}`)
-                    }
+                    href={`${basePath}/c/${category.permalink}`}
+                    onClick={() => setOpen(false)}
                     className={linkClass}
                   >
                     {category.name}
-                  </button>
+                  </Link>
                 ),
               )}
-              <button
-                type="button"
-                onClick={() => handleNavigate(`${basePath}/#contact`)}
+              <Link
+                href={`${basePath}/#contact`}
+                onClick={() => setOpen(false)}
                 className={linkClass}
               >
                 Contact
-              </button>
+              </Link>
             </nav>
 
             {/* Footer: Country switcher (mobile + tablet) + Account (mobile only) */}
@@ -342,33 +330,27 @@ export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
                         <ChevronRight className="w-4 h-4 text-gray-400" />
                       </button>
                     ) : (
-                      <button
+                      <Link
                         key={child.id}
-                        type="button"
-                        onClick={() =>
-                          handleNavigate(`${basePath}/c/${child.permalink}`)
-                        }
+                        href={`${basePath}/c/${child.permalink}`}
+                        onClick={() => handleOpenChange(false)}
                         className={linkClass}
                       >
                         {child.name}
-                      </button>
+                      </Link>
                     ),
                   )}
                 </nav>
 
                 {/* "View all" at the bottom */}
                 <div className="border-t border-gray-200 px-4 py-3">
-                  <button
-                    type="button"
-                    onClick={() =>
-                      handleNavigate(
-                        `${basePath}/c/${panel.category.permalink}`,
-                      )
-                    }
-                    className="w-full text-center text-sm text-gray-500 hover:text-gray-900 py-2 transition-colors"
+                  <Link
+                    href={`${basePath}/c/${panel.category.permalink}`}
+                    onClick={() => handleOpenChange(false)}
+                    className="block w-full text-center text-sm text-gray-500 hover:text-gray-900 py-2 transition-colors"
                   >
                     View all {panel.category.name}
-                  </button>
+                  </Link>
                 </div>
               </div>
             );
diff --git a/src/components/products/filters/ProductFilters.tsx b/src/components/products/filters/ProductFilters.tsx
index 32f76917..268e50e3 100644
--- a/src/components/products/filters/ProductFilters.tsx
+++ b/src/components/products/filters/ProductFilters.tsx
@@ -131,20 +131,21 @@ export const FilterBar = memo(function FilterBar({
 
   const activeSortBy = activeFilters.sortBy || filtersData?.default_sort;
 
-  if (filtersLoading) {
-    return (
-      <div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-200">
-        <div className="h-10 w-20 bg-gray-200 rounded-lg animate-pulse" />
-        <div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
-        <div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
-        <div className="h-10 w-24 bg-gray-200 rounded-lg animate-pulse" />
-        <div className="ml-auto h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
-      </div>
-    );
+  if (!filtersData) {
+    if (filtersLoading) {
+      return (
+        <div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-200">
+          <div className="h-10 w-20 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="h-10 w-24 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="ml-auto h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
+        </div>
+      );
+    }
+    return null;
   }
 
-  if (!filtersData) return null;
-
   const availabilityFilter = filtersData.filters.find(
     (f) => f.type === "availability",
   ) as AvailabilityFilter | undefined;