diff --git a/front/src/features/catalog/SidebarCategories.tsx b/front/src/features/catalog/SidebarCategories.tsx
index bbcdad2..3844280 100644
--- a/front/src/features/catalog/SidebarCategories.tsx
+++ b/front/src/features/catalog/SidebarCategories.tsx
@@ -5,8 +5,33 @@ import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
 import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
 
 const SidebarCategories: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+
+    useEffect(() => { 
+        dispatch(fetchCategories()); 
+    }, [dispatch]);
+
+    const onClick = (catId: number) => {
+    dispatch(setSelectedCategory(catId));
+    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setPage(1));
+    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  };
     return(
-        <>
-        </>
+        <aside className={styles.sidebar}>
+            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+            {loading ? <p>Загрузка...</p> : (
+                <ul className={styles.list}>
+                {items.map(cat => (
+                    <li key={cat.id}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        onClick={() => onClick(cat.id)}>
+                    {cat.name}
+                    </li>
+                ))}
+                </ul>
+            )}
+        </aside>
     )
 }
\ No newline at end of file