diff --git a/theme-costume-app/src/CategoriesPage.js b/theme-costume-app/src/CategoriesPage.js
index e6cb2de080594bd8277ce9fed96770227cb87f56..98eb2033dc0a1c9e3220481195508b846616ab1a 100644
--- a/theme-costume-app/src/CategoriesPage.js
+++ b/theme-costume-app/src/CategoriesPage.js
@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import './CategoriesPage.css'; // Import the CSS file
 
-const categories = [
-  { name: 'Men', link: '/category/men' },
-  { name: 'Women', link: '/category/women' },
-  { name: 'Kids', link: '/category/kids' },
-  { name: 'Accessories', link: '/category/accessories' },
-  { name: 'Sale', link: '/category/sale' },
-];
-
 const CategoriesPage = () => {
+  const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    axios.get('http://127.0.0.1:8000/themeApp/categories/')  // Replace with your Django API endpoint
+      .then(response => {
+        setCategories(response.data);
+        setLoading(false);
+      })
+      .catch(error => {
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error loading categories: {error.message}</p>;
+
   return (
     <div className="categories-container">
       <h1 className="categories-title">Categories</h1>
@@ -19,7 +31,7 @@ const CategoriesPage = () => {
             key={index} 
             className="category-item"
             onClick={() => { 
-              window.location.href = category.link;
+              window.location.href = category.name;
             }}
           >
             {category.name}