diff --git a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx
new file mode 100644
index 00000000..ffe4b8e4
--- /dev/null
+++ b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx
@@ -0,0 +1,69 @@
+import type { Category } from "@spree/sdk";
+import { cacheLife, cacheTag } from "next/cache";
+import Link from "next/link";
+import { Breadcrumbs } from "@/components/navigation/Breadcrumbs";
+
+interface CategoryBannerProps {
+  category: Category;
+  basePath: string;
+  locale: string;
+}
+
+export async function CategoryBanner({
+  category,
+  basePath,
+  locale,
+}: CategoryBannerProps) {
+  "use cache: remote";
+  cacheLife("minutes");
+  cacheTag("category-banner");
+
+  return (
+    <>
+      <div
+        className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
+        style={
+          category.image_url
+            ? { backgroundImage: `url(${category.image_url})` }
+            : undefined
+        }
+      >
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs
+            category={category}
+            basePath={basePath}
+            locale={locale}
+          />
+
+          <div className="mb-4">
+            <h1 className="text-4xl font-bold text-gray-900">
+              {category.name}
+            </h1>
+          </div>
+
+          {/* Description */}
+          {category.description && (
+            <p className="mb-4 text-gray-600">{category.description}</p>
+          )}
+        </div>
+      </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>
+      )}
+    </>
+  );
+}
diff --git a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
index c51d9c21..dad91b33 100644
--- a/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
+++ b/src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
@@ -7,6 +7,7 @@ import { getCategory } from "@/lib/data/categories";
 import { generateCategoryMetadata } from "@/lib/metadata/category";
 import { buildBreadcrumbJsonLd } from "@/lib/seo";
 import { getStoreUrl } from "@/lib/store";
+import { CategoryBanner } from "./CategoryBanner";
 import { CategoryProductsContent } from "./CategoryProductsContent";
 
 interface CategoryPageProps {
@@ -51,50 +52,7 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
         <JsonLd data={buildBreadcrumbJsonLd(category, basePath, storeUrl)} />
       )}
 
-      <div
-        className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
-        style={
-          category.image_url
-            ? { backgroundImage: `url(${category.image_url})` }
-            : undefined
-        }
-      >
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <Breadcrumbs
-            category={category}
-            basePath={basePath}
-            locale={locale}
-          />
-
-          <div className="mb-4">
-            <h1 className="text-4xl font-bold text-gray-900">
-              {category.name}
-            </h1>
-          </div>
-
-          {/* Description */}
-          {category.description && (
-            <p className="mb-4 text-gray-600">{category.description}</p>
-          )}
-        </div>
-      </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>
-      )}
+      <CategoryBanner category={category} basePath={basePath} locale={locale} />
 
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-4">
         {/* Products */}
diff --git a/src/lib/data/categories.ts b/src/lib/data/categories.ts
index f2016e16..0d65cb07 100644
--- a/src/lib/data/categories.ts
+++ b/src/lib/data/categories.ts
@@ -19,12 +19,23 @@ export async function getCategories(params?: CategoryListParams) {
   return cachedListCategories(params, options);
 }
 
+async function cachedGetCategory(
+  idOrPermalink: string,
+  params: { expand?: string[] } | undefined,
+  options: { locale?: string; country?: string },
+) {
+  "use cache: remote";
+  cacheLife("minutes");
+  cacheTag("category");
+  return getClient().categories.get(idOrPermalink, params, options);
+}
+
 export async function getCategory(
   idOrPermalink: string,
-  params?: CategoryListParams,
+  params?: { expand?: string[] },
 ) {
   const options = await getLocaleOptions();
-  return getClient().categories.get(idOrPermalink, params, options);
+  return cachedGetCategory(idOrPermalink, params, options);
 }
 
 export async function getCategoryProducts(