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..ce9719fe9b0512cce313b28d823a5390265988b4
--- /dev/null
+++ b/theme-costume-app/src/CategoriesPage.css
@@ -0,0 +1,35 @@
+.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;
+  cursor: pointer; /* Add cursor pointer for better UX */
+  transition: transform 0.4s, box-shadow 0.4s; /* Add transition for smoothness */
+}
+
+/* Add the hover effect */
+.category-item:hover {
+  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/* Define the shadow-drop-2-center animation */
+@keyframes shadow-drop-2-center {
+  0% {
+    transform: translateZ(0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    transform: translateZ(50px);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+  }
+}
diff --git a/theme-costume-app/src/CategoriesPage.js b/theme-costume-app/src/CategoriesPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6cb2de080594bd8277ce9fed96770227cb87f56
--- /dev/null
+++ b/theme-costume-app/src/CategoriesPage.js
@@ -0,0 +1,33 @@
+import React from 'react';
+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 = () => {
+  return (
+    <div className="categories-container">
+      <h1 className="categories-title">Categories</h1>
+      <div>
+        {categories.map((category, index) => (
+          <div 
+            key={index} 
+            className="category-item"
+            onClick={() => { 
+              window.location.href = category.link;
+            }}
+          >
+            {category.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesPage;