diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 20e0c8a48a837a1ac181bb4033febc2cc3a1afa9..91b0ba70167b6575dffb08b609f7665cad16dbc2 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -5,6 +5,8 @@ import About from './About';
 import Profile from './Profile';
 import Charts from './Charts';
 import ResponsiveAppBar from './components/ResponsiveAppBar';
+import CategoriesPage from './CategoriesPage';
+
 
 function App() {
   const [user, setUser] = useState(null);
@@ -32,6 +34,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/news" element={<About />} />
           <Route path="/Topplistan" element={<Charts />} />
+          <Route path="/Categories" element={<CategoriesPage />} />
 
         </Routes>  
       </div>
diff --git a/theme-costume-app/src/CategoriesPage.css b/theme-costume-app/src/CategoriesPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..32c5db269155068e1ed3b8099d19372038a3449a
--- /dev/null
+++ b/theme-costume-app/src/CategoriesPage.css
@@ -0,0 +1,18 @@
+/* CategoriesPage.css */
+.categories-container {
+    padding: 20px;
+  }
+  
+  .categories-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .category-item {
+    font-size: 18px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
\ No newline at end of file
diff --git a/theme-costume-app/src/CategoriesPage.js b/theme-costume-app/src/CategoriesPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..95c3f3c995f1d6f2062f96a90ce061de6f8f9ef4
--- /dev/null
+++ b/theme-costume-app/src/CategoriesPage.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+const categories = [
+  { name: 'Men', link: '/category/men' },
+  { name: 'Women', link: '/category/women' },
+  { name: 'Kids', link: '/category/kids' },
+];
+
+const CategoriesPage = () => {
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Categories</h1>
+      <div>
+        {categories.map((category, index) => (
+          <div 
+            key={index} 
+            style={{ 
+              fontSize: '18px', 
+              padding: '10px', 
+              marginBottom: '10px', 
+              border: '1px solid #ccc', 
+              borderRadius: '4px',
+              cursor: 'pointer' // Add cursor pointer for better UX
+            }}
+            onClick={() => { // Navigate to the category link on click
+              window.location.href = category.link;
+            }}
+          >
+            {category.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesPage;