diff --git a/backend/handlers/item_handlers.go b/backend/handlers/item_handlers.go
index 8db1bc7..0bff0bd 100644
--- a/backend/handlers/item_handlers.go
+++ b/backend/handlers/item_handlers.go
@@ -88,3 +88,16 @@ func DeleteItem(c *gin.Context) {
 
 	c.JSON(http.StatusOK, gin.H{"message": "Товар успешно удален"})
 }
+
+func GetCategories(c *gin.Context) {
+	var item models.Item
+	var categories []string
+
+	err := database.DB.Model(&item).Where("category IS NOT NULL AND category != ''").Distinct().Pluck("category", &categories).Error
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, categories)
+}
diff --git a/backend/main.go b/backend/main.go
index cb98e12..c6fd820 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -44,6 +44,7 @@ func main() {
 			protected.DELETE("/items/:id", handlers.DeleteItem)
 			protected.PATCH("/items/:id", handlers.UpdateItem)
 			protected.POST("/items", handlers.AddItem)
+			protected.GET("/getCategories", handlers.GetCategories)
 		}
 
 		admin := protected.Group("/")
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 2f726ca..14c6330 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -36,3 +36,5 @@ export const updateItem = (id, itemData) =>
   axios.patch(`${API_URL}/items/${id}`, itemData);
 
 export const deleteItem = (id) => axios.delete(`${API_URL}/items/${id}`);
+
+export const getAllCategories = () => axios.get(`${API_URL}/getCategory`)
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 14f1742..148d753 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -1,6 +1,18 @@
 import PageLayout from "../components/PageLayout";
+import { useState, useEffect } from "react"
+import * as api from '../api/index'
 
 export default function Shop() {
+
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    pa
+  })
+
+
+
   return (
     <PageLayout>
       <main className="px-16 grow w-full">
diff --git a/frontend/src/pages/Shop.jsx b/frontend/src/pages/Shop.jsx
index 14f1742..efb935d 100644
--- a/frontend/src/pages/Shop.jsx
+++ b/frontend/src/pages/Shop.jsx
@@ -1,14 +1,38 @@
 import PageLayout from "../components/PageLayout";
+import * as api from "../api/index";
+import { useState, useEffect } from "react";
 
 export default function Shop() {
+  const [items, setItems] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([api.getAllItems(), api.getAllCategories()])
+      .then((itemsRes, categoriesRes) => {
+        setItems(itemsRes.data);
+        setCategories(categoriesRes.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Ошибка при загрузке товара", err);
+        setLoading(false);
+      });
+  }, []);
+
+  const filteredItems =
+    activeCategory === "all"
+      ? items
+      : items.fitler(
+        (item) =>
+          item.category?.toLowerCase() === activeCategory.toLowerCase(),
+      );
+
   return (
     <PageLayout>
       <main className="px-16 grow w-full">
-        <div className="flex flex-row text-white">
-          <div className="text-4xl flex-col">
-            <h1 className="uppercase">fish fish</h1>
-          </div>
-        </div>
+        <div className="flex flex-row text-white"></div>
       </main>
     </PageLayout>
   );