diff --git a/front/src/features/catalog/CategoriesGrid.tsx b/front/src/features/catalog/CategoriesGrid.tsx
new file mode 100644
index 0000000..7eab034
--- /dev/null
+++ b/front/src/features/catalog/CategoriesGrid.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { onSelect?: (id:number) => void }
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;
\ No newline at end of file