diff --git a/src/app/[country]/[locale]/(storefront)/account/layout.tsx b/src/app/[country]/[locale]/(storefront)/account/layout.tsx
index 1733437ee..155e1f0f0 100644
--- a/src/app/[country]/[locale]/(storefront)/account/layout.tsx
+++ b/src/app/[country]/[locale]/(storefront)/account/layout.tsx
@@ -67,7 +67,7 @@ function AccountShell({
   isLoading,
 }: AccountShellProps) {
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
       <div className="flex flex-col lg:flex-row gap-8">
         {/* Sidebar Navigation */}
         <aside className="lg:w-64 flex-shrink-0">
diff --git a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsx b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsx
index b54725a23..426cb9ef8 100644
--- a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsx
+++ b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsx
@@ -4,9 +4,9 @@ export default function CategoryLoading() {
   return (
     <div>
       {/* Banner skeleton */}
-      <div className="w-full h-48 md:h-64 lg:h-80 bg-gray-200 animate-pulse" />
+      <div className="w-full h-48 md:h-64 lg:h-80 bg-gray-50 animate-pulse" />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
         {/* Breadcrumb skeleton */}
         <div className="flex items-center gap-2 mb-8">
           <div className="h-4 bg-gray-200 rounded w-12 animate-pulse" />
diff --git a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
index 1948a2a53..0fd9679f5 100644
--- a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
+++ b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Breadcrumbs } from "@/components/navigation/Breadcrumbs";
-import { CategoryBanner } from "@/components/navigation/CategoryBanner";
 import { JsonLd } from "@/components/seo/JsonLd";
 import { getCategory } from "@/lib/data/categories";
 import { generateCategoryMetadata } from "@/lib/metadata/category";
@@ -51,41 +50,44 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
         <JsonLd data={buildBreadcrumbJsonLd(category, basePath, storeUrl)} />
       )}
 
-      {/* Banner Image — returns null when image missing or fails to load */}
-      <CategoryBanner imageUrl={category.image_url} name={category.name} />
+      <div
+        className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
+        style={{ backgroundImage: `url(${category.image_url})` }}
+      >
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs category={category} basePath={basePath} />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <Breadcrumbs category={category} basePath={basePath} />
+          <div className="mb-4">
+            <h1 className="text-4xl font-bold text-gray-900">
+              {category.name}
+            </h1>
+          </div>
 
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">{category.name}</h1>
+          {/* Description */}
+          {category.description && (
+            <p className="mb-4 text-gray-600">{category.description}</p>
+          )}
         </div>
+      </div>
 
-        {/* Description */}
-        {category.description && (
-          <p className="mb-8 text-gray-600">{category.description}</p>
-        )}
-
-        {/* Subcategories */}
-        {category.children && category.children.length > 0 && (
-          <div className="mb-8">
-            <h2 className="text-lg font-semibold text-gray-900 mb-4">
-              Subcategories
-            </h2>
-            <div className="flex flex-wrap gap-2">
-              {category.children.map((child) => (
-                <Link
-                  key={child.id}
-                  href={`${basePath}/c/${child.permalink}`}
-                  className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm text-gray-700 transition-colors"
-                >
-                  {child.name}
-                </Link>
-              ))}
-            </div>
+      {/* Subcategories */}
+      {category.children && category.children.length > 0 && (
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+          <div className="flex flex-wrap gap-2 items-center border-b border-gray-100 pb-4">
+            {category.children.map((child) => (
+              <Link
+                key={child.id}
+                href={`${basePath}/c/${child.permalink}`}
+                className="px-1.5 py-1 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors"
+              >
+                {child.name}
+              </Link>
+            ))}
           </div>
-        )}
+        </div>
+      )}
 
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-4">
         {/* Products */}
         <CategoryProductsContent
           categoryId={category.id}
diff --git a/src/app/[country]/[locale]/(storefront)/cart/page.tsx b/src/app/[country]/[locale]/(storefront)/cart/page.tsx
index be79f6543..a9353f0b6 100644
--- a/src/app/[country]/[locale]/(storefront)/cart/page.tsx
+++ b/src/app/[country]/[locale]/(storefront)/cart/page.tsx
@@ -40,7 +40,7 @@ export default function CartPage() {
 
   if (loading) {
     return (
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
         <div className="animate-pulse">
           <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
           <div className="space-y-4">
@@ -55,7 +55,7 @@ export default function CartPage() {
 
   if (!cart || !cart.items || cart.items.length === 0) {
     return (
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-16">
         <div className="text-center">
           <ShoppingBag
             className="w-24 h-24 text-gray-300 mx-auto"
@@ -78,7 +78,7 @@ export default function CartPage() {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
       <h1 className="text-3xl font-bold text-gray-900 mb-8">Shopping Cart</h1>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
diff --git a/src/app/[country]/[locale]/(storefront)/page.tsx b/src/app/[country]/[locale]/(storefront)/page.tsx
index 5de9a508e..a4e680298 100644
--- a/src/app/[country]/[locale]/(storefront)/page.tsx
+++ b/src/app/[country]/[locale]/(storefront)/page.tsx
@@ -27,7 +27,7 @@ export default async function HomePage({ params }: HomePageProps) {
     <div>
       {/* Hero Section */}
       <section className="border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-24">
           <div className="text-center">
             <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">
               Welcome to {getStoreName()}
@@ -48,7 +48,7 @@ export default async function HomePage({ params }: HomePageProps) {
       </section>
 
       {/* Featured Products */}
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <section className="container mx-auto px-4 sm:px-6 lg:px-8  py-16">
         <div className="flex items-center justify-between mb-8">
           <h2 className="text-2xl font-bold text-gray-900">
             Featured Products
diff --git a/src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx b/src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx
index a2f79be93..e94a4a4f1 100644
--- a/src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx
+++ b/src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx
@@ -62,7 +62,7 @@ export function ProductsContent({ basePath }: ProductsContentProps) {
   ]);
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
       {/* Header */}
       <div className="mb-8">
         {query ? (
diff --git a/src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx b/src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
index 7a8c6b142..df35119b9 100644
--- a/src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
+++ b/src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
@@ -115,7 +115,7 @@ export function ProductDetails({ product, basePath }: ProductDetailsProps) {
   };
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-8">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
         {/* Media Gallery */}
         <div>
diff --git a/src/components/navigation/CategoryBanner.tsx b/src/components/navigation/CategoryBanner.tsx
deleted file mode 100644
index 0a688e367..000000000
--- a/src/components/navigation/CategoryBanner.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useState } from "react";
-
-interface CategoryBannerProps {
-  imageUrl: string | null | undefined;
-  name: string;
-}
-
-/**
- * Full-width category hero image banner. Returns `null` when no image URL is
- * provided or the image fails to load, so the page gracefully falls back to
- * a plain title.
- *
- * The category name is rendered as a `<span>` (not `<h1>`) because the page
- * always renders its own `<h1>` below — this avoids duplicate headings.
- */
-export function CategoryBanner({
-  imageUrl,
-  name,
-}: CategoryBannerProps): React.JSX.Element | null {
-  const [hasError, setHasError] = useState(false);
-
-  if (!imageUrl || hasError) {
-    return null;
-  }
-
-  return (
-    <div className="relative w-full h-48 md:h-64 lg:h-80 bg-gray-100">
-      <Image
-        src={imageUrl}
-        alt={name}
-        fill
-        priority
-        className="object-cover"
-        sizes="100vw"
-        onError={() => setHasError(true)}
-      />
-      <div className="absolute inset-0 bg-black/30" />
-      <div className="absolute inset-0 flex items-center justify-center">
-        <span
-          className="text-3xl md:text-4xl lg:text-5xl font-bold text-white"
-          aria-hidden="true"
-        >
-          {name}
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/products/filters/FilterDropdown.tsx b/src/components/products/filters/FilterDropdown.tsx
index a0add26d7..14a717217 100644
--- a/src/components/products/filters/FilterDropdown.tsx
+++ b/src/components/products/filters/FilterDropdown.tsx
@@ -38,7 +38,12 @@ export function FilterDropdown({
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" aria-expanded={isOpen} aria-haspopup="menu">
+        <Button
+          variant="outline"
+          aria-expanded={isOpen}
+          aria-haspopup="menu"
+          size="sm"
+        >
           <span>{label}</span>
           {hasActive && (
             <span className="flex items-center justify-center w-5 h-5 text-xs bg-primary text-white rounded-lg">
diff --git a/src/components/products/filters/ProductFilters.tsx b/src/components/products/filters/ProductFilters.tsx
index 268e50e34..b736e02e7 100644
--- a/src/components/products/filters/ProductFilters.tsx
+++ b/src/components/products/filters/ProductFilters.tsx
@@ -135,11 +135,10 @@ export const FilterBar = memo(function FilterBar({
     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 className="h-9 w-20 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="h-9 w-16 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="h-9 w-24 bg-gray-200 rounded-lg animate-pulse" />
+          <div className="ml-auto h-9 w-16 bg-gray-200 rounded-lg animate-pulse" />
         </div>
       );
     }
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index d72388475..d8a95822d 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -188,7 +188,7 @@ export function SearchBar({ basePath, autoFocus, onNavigate }: SearchBarProps) {
           className="fixed left-0 right-0 mt-1 bg-white border-b border-gray-200 z-50"
           onMouseDown={handleSuggestionsMouseDown}
         >
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
             {loading ? (
               <div className="p-4 text-center text-gray-500 text-sm">
                 Searching...
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 4885f13c2..17ab01974 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -43,7 +43,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 shadow-lg",
           className,
         )}
         {...props}