Index: frontend/src/components/CategoryMenu.js
===================================================================
--- frontend/src/components/CategoryMenu.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
+++ frontend/src/components/CategoryMenu.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -0,0 +1,30 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import SubCategoryMenu from "./SubCategoryMenu";
+
+function CategoryMenu(props) {
+  let ul = document.getElementById("subCategoryList");
+
+  const result = [];
+
+  props.category.subCategories.forEach((sub) => {
+    result.push(
+      <SubCategoryMenu
+        subCategory={sub}
+        category={props.category}
+      ></SubCategoryMenu>
+    );
+  });
+
+  const categoryUrl = `/products/${props.category.categorySlug}/all`;
+  return (
+    <div>
+      <Link to={categoryUrl}>
+        <span>{props.category.categoryName}</span>
+      </Link>
+      <ul id="subCategoryList">{result}</ul>
+    </div>
+  );
+}
+
+export default CategoryMenu;
Index: frontend/src/components/Header.js
===================================================================
--- frontend/src/components/Header.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/components/Header.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -1,3 +1,3 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from "../Images/logo.png";
 import "../styles/Header.css";
@@ -24,4 +24,6 @@
 import NavDropdown from "react-bootstrap/NavDropdown";
 import { height } from "@mui/system";
+import Axios from "axios";
+import CategoryMenu from "./CategoryMenu";
 
 const toggleMenu = (event) => {
@@ -76,4 +78,7 @@
   const navigate = useNavigate();
 
+  const [categories, setCategories] = useState([]);
+  //const []
+
   const signoutHandler = () => {
     ctxDispatch({ type: "USER_SIGNOUT" });
@@ -83,4 +88,49 @@
     window.location.href = "/signin";
   };
+
+  const searchHandler = () => {
+    let text = document.querySelector(".header__searchInput").value;
+    console.log(text);
+    navigate(`/products/search?text=${text}`);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cat = await Axios.get(`/api/category/getCategories`);
+      categories.splice(0, categories.length);
+      for (let i = 0; i < cat.data.length; i++) {
+        categories.push(cat.data[i]);
+      }
+      console.log(categories[0]);
+    };
+    fetchData();
+  }, [categories]);
+  const results = [];
+  const results1 = [];
+  const results2 = [];
+  const results3 = [];
+  if (categories) createMenu(categories);
+  function createMenu(categories) {
+    /*
+    let ul = document.getElementById("category-ul-1");
+    for(let i=0;i<categories.length;i++){
+      ul.appendChild()
+    }*/
+    results.splice(0, results.length);
+    categories.forEach((category) => {
+      results.push(<CategoryMenu category={category} />);
+    });
+    for (let i = 0; i < categories.length; i++) {
+      if (i < 3) {
+        results1.push(<CategoryMenu category={categories[i]} />);
+      } else if (i < 5) {
+        results2.push(<CategoryMenu category={categories[i]} />);
+      } else {
+        results3.push(<CategoryMenu category={categories[i]} />);
+      }
+    }
+    console.log("Results:");
+    console.log(categories);
+  }
 
   return (
@@ -839,5 +889,7 @@
           <div className="header__dropdown">
             <div className="header__dropdownColumn">
-              <ul>
+              <ul id="category-ul-1">
+                <li>{categories[0] && results1}</li>
+                {/*
                 <li>
                   <Link to="/products/dnevna/all">
@@ -916,9 +968,11 @@
                     </li>
                   </ul>
-                </li>
+                        </li>*/}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results2}</li>
+                {/*
                 <li>
                   <Link to="/products/spalna/all">
@@ -998,8 +1052,11 @@
                   </ul>
                 </li>
+                      */}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results3}</li>
+                {/*
                 <li>
                   <Link to="/products/kancelarija/all">
@@ -1083,4 +1140,5 @@
                   </ul>
                 </li>
+                */}
               </ul>
             </div>
@@ -1201,6 +1259,8 @@
         </div>
         <div className="header__search">
-          <input className="header__searchInput" type="text" />
-          <SearchIcon className="header__searchIcon" fontSize="large" />
+          <input className="header__searchInput" type="text" name="text" />
+          <button onClick={searchHandler}>
+            <SearchIcon className="header__searchIcon" fontSize="large" />
+          </button>
         </div>
       </div>
Index: frontend/src/components/Product.js
===================================================================
--- frontend/src/components/Product.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/components/Product.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -54,24 +54,39 @@
       <div
         style={{
-          width: "100%",
           display: "flex",
-          justifyContent: "center",
+          justifyContent: "space-around",
           alignItems: "center",
         }}
       >
-        {product.countInStock > 0 ? (
-          <span style={{ color: "green" }}>
-            <CheckIcon></CheckIcon>Залиха
-          </span>
-        ) : (
-          <span style={{ color: "red" }}>
-            <ClearIcon></ClearIcon>Залиха
-          </span>
-        )}
+        <h5>H: {product.height}</h5>
+        <h5>W: {product.width}</h5>
+        <h5>L: {product.length}</h5>
       </div>
-      <div className="product__addToCart" style={{ marginTop: "15px" }}>
+      <div
+        className="product__addToCart"
+        style={{ marginTop: "15px", display: "flex", justifyContent: "center" }}
+      >
         <button onClick={addToCartHandler}>
           <ShoppingBasketIcon />
         </button>
+        <div
+          style={{
+            //width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginLeft: "10px",
+          }}
+        >
+          {product.countInStock > 0 ? (
+            <span style={{ color: "green" }}>
+              <CheckIcon></CheckIcon>Залиха
+            </span>
+          ) : (
+            <span style={{ color: "red" }}>
+              <ClearIcon></ClearIcon>Залиха
+            </span>
+          )}
+        </div>
       </div>
     </div>
Index: frontend/src/components/SubCategoryMenu.js
===================================================================
--- frontend/src/components/SubCategoryMenu.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
+++ frontend/src/components/SubCategoryMenu.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -0,0 +1,56 @@
+import axios from "axios";
+import React, { useEffect, useReducer } from "react";
+import { Link } from "react-router-dom";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return {
+        ...state,
+        getCategories: action.payload,
+        loading: false,
+      };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function SubCategoryMenu(props) {
+  const [{ loading, getCategories }, dispatch] = useReducer(reducer, {
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        const { data } = await axios.get(
+          `/api/category/getSubCategory?subCategory=${props.subCategory}`
+        );
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err });
+      }
+    };
+    fetchData();
+  }, [props.subCategory]);
+
+  return (
+    <li>
+      {getCategories && (
+        <Link
+          to={`/products/${props.category.categorySlug}/${getCategories[0].subCategorySlug}`}
+        >
+          {getCategories && getCategories[0].subCategoryName}
+        </Link>
+      )}
+    </li>
+  );
+}
+
+export default SubCategoryMenu;
