diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2f69b9b..8ee47cb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -46,13 +46,14 @@ export default async function Home() {
     (slot) => slot.key === STATIC_IMAGE_KEYS.threeBannerRow,
   );
   const heroImages = imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.homeHero);
+  const featuredCategoryImages = imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.featuredCategories);
 
   return (
     <>
       <HeroSlider images={heroImages} />
       <SpecialSaleCarousel products={specialSaleProducts} contactPhone={contactPhone} />
       <FeatureBar />
-      <FeaturedCategories categories={categories} />
+      <FeaturedCategories categories={categories} images={featuredCategoryImages} />
       <TwoBanners
         images={imagesForSlot(staticImageSlots, STATIC_IMAGE_KEYS.twoBanner)}
         aspectRatio={twoBannerSlot?.aspectRatio}
diff --git a/src/components/home/FeaturedCategories.tsx b/src/components/home/FeaturedCategories.tsx
index 6ad0da3..6b780fa 100644
--- a/src/components/home/FeaturedCategories.tsx
+++ b/src/components/home/FeaturedCategories.tsx
@@ -7,9 +7,33 @@ import "swiper/css/free-mode";
 import { Placeholder } from "@/components/ui/Placeholder";
 import { SectionTitle } from "@/components/ui/SectionTitle";
 import { EmptyState } from "@/components/ui/EmptyState";
-import type { Category } from "@/lib/meshkee";
+import type { Category, StaticImageWithUrl } from "@/lib/meshkee";
 
-export function FeaturedCategories({ categories }: { categories: Category[] }) {
+function CategorySlotCard({ image }: { image: StaticImageWithUrl }) {
+  const label = image.titleFa ?? image.titleEn ?? "";
+  const content = (
+    <div className="group flex h-full flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md">
+      <div className="mb-3 aspect-square w-[72px] overflow-hidden rounded-full border border-border">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={image.url} alt={label} className="h-full w-full object-cover" />
+      </div>
+      {label && (
+        <span className="w-full truncate text-center text-xs font-medium leading-relaxed md:text-sm">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+  return image.linkUrl ? <a href={image.linkUrl}>{content}</a> : content;
+}
+
+export function FeaturedCategories({
+  categories,
+  images = [],
+}: {
+  categories: Category[];
+  images?: StaticImageWithUrl[];
+}) {
   return (
     <section className="py-10 md:py-14">
       <div className="mx-auto max-w-7xl px-4">
@@ -18,7 +42,29 @@ export function FeaturedCategories({ categories }: { categories: Category[] }) {
           enTitle="Featured Categories"
           action="همه دسته‌ها"
         />
-        {categories.length === 0 ? (
+        {images.length > 0 ? (
+          <Swiper
+            modules={[FreeMode]}
+            dir="rtl"
+            slidesPerView={2.3}
+            spaceBetween={12}
+            breakpoints={{
+              640: { slidesPerView: 4.3, spaceBetween: 12 },
+              1024: { slidesPerView: 8, spaceBetween: 12 },
+            }}
+            freeMode={{ enabled: true, momentum: true, sticky: true }}
+            grabCursor
+            className="!px-1 !py-2"
+          >
+            {images.map((image, i) => (
+              <SwiperSlide key={image.id}>
+                <div className="animate-slide-in h-full" style={{ animationDelay: `${i * 60}ms` }}>
+                  <CategorySlotCard image={image} />
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        ) : categories.length === 0 ? (
           <EmptyState message="هنوز دسته‌بندی‌ای ثبت نشده است." />
         ) : (
           <Swiper
diff --git a/src/lib/meshkee.ts b/src/lib/meshkee.ts
index efd671d..b752e63 100644
--- a/src/lib/meshkee.ts
+++ b/src/lib/meshkee.ts
@@ -484,6 +484,7 @@ export const STATIC_IMAGE_KEYS = {
   homeHero: "home-hero",
   twoBanner: "two-banner",
   threeBannerRow: "three-banner-row",
+  featuredCategories: "featured-categories",
 } as const;
 
 export const STATIC_IMAGE_SLOT_CATALOG = [
@@ -514,6 +515,15 @@ export const STATIC_IMAGE_SLOT_CATALOG = [
     itemCount: 3,
     recommendedWidth: 1200,
   },
+  {
+    key: STATIC_IMAGE_KEYS.featuredCategories,
+    label: "Featured categories",
+    kind: "list" as const,
+    pageKey: "home",
+    aspectRatio: "1:1",
+    itemCount: null,
+    recommendedWidth: 300,
+  },
 ];
 
 export async function getStaticImageSlots(): Promise<StaticImageSlot[]> {