Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/App.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -28,4 +28,6 @@
 import AdminOrdersScreen from "./screens/AdminOrdersScreen";
 import AdminOrderScreen from "./screens/AdminOrderScreen";
+import AdminAddCategoryScreen from "./screens/AdminAddCategoryScreen";
+import SearchScreen from "./screens/SearchScreen";
 function App() {
   const { state } = useContext(Store);
@@ -54,6 +56,11 @@
           element={<CategoryScreen />}
         />
+        <Route path="/products/search" element={<SearchScreen />} />
         <Route path="/admin/dashboard" element={<AdminDashboardScreen />} />
         <Route path="/admin/addProduct" element={<AdminAddProductScreen />} />
+        <Route
+          path="/admin/addCategory"
+          element={<AdminAddCategoryScreen />}
+        ></Route>
         <Route path="/admin/products" element={<AdminProductsScreen />} />
         <Route path="/admin/orders" element={<AdminOrdersScreen />} />
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;
Index: frontend/src/screens/AdminAddCategoryScreen.js
===================================================================
--- frontend/src/screens/AdminAddCategoryScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
+++ frontend/src/screens/AdminAddCategoryScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -0,0 +1,282 @@
+import React, { useContext, useEffect, useReducer, useState } from "react";
+import Button from "react-bootstrap/Button";
+import "../styles/AdminDashboard.css";
+import { Store } from "../Store";
+import { useNavigate, Link } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import Form from "react-bootstrap/Form";
+import Axios from "axios";
+import { toast } from "react-toastify";
+import axios from "axios";
+
+// Mesto podkategorii cuvaj stringovi od slugovite na podkategoriite vo kategoriite. Posle koga ce treba da gi stavas
+//ce pravis get povik i ce gi zemis site podkategorii so tia slugovi zacuvani u kategorijata, i vnesi gi vo lista i vrati
+//gi kako objekti (podkategorija)
+
+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 AdminDashboardScreen() {
+  const navigate = useNavigate();
+  const { state } = useContext(Store);
+  const { userInfo } = state;
+  useEffect(() => {
+    if (!userInfo || !userInfo.isAdmin) {
+      return navigate("/");
+    }
+  }, [userInfo, navigate]);
+
+  const [category, setCategory] = useState("");
+  const [categorySlug, setCategorySlug] = useState("");
+  const [categories, setCategories] = useState([]);
+  const [subCategory, setSubCategory] = useState("");
+  const [subCategorySlug, setSubCategorySlug] = useState("");
+  let counter = 0;
+  const addCategoryHandler = async (e) => {
+    e.preventDefault();
+    setCategories([]);
+    try {
+      const { data } = await Axios.post("/api/category/addCategory", {
+        category,
+        categorySlug,
+        categories,
+      });
+      toast.success("Категоријата е додадена");
+      counter++;
+    } catch (err) {
+      console.log(err);
+      toast.error("Грешка");
+    }
+  };
+
+  const addSubCategoryHandler = async (e) => {
+    e.preventDefault();
+
+    try {
+      const data3 = await Axios.get(
+        `/api/category/getCategory?category=${category}`
+      );
+
+      //console.log("<=============KATEGORII POCETNA SOSTOJBA==============>");
+      //console.log(categories);
+      let subcategoriesSlugs = data3.data[0].subCategories;
+      for (let i = 0; i < subcategoriesSlugs.length; i++) {
+        categories.push(subcategoriesSlugs[i]);
+      }
+
+      console.log(
+        "<=============KATEGORII PO DOBIVANJETO NA PODKATEGORIITE==============>"
+      );
+      console.log(categories);
+
+      const { data } = await Axios.post("/api/category/addSubCategory", {
+        subCategory,
+        subCategorySlug,
+      });
+
+      categories.push(data.subCategory.subCategorySlug);
+      console.log("<=============KATEGORII POSLE PUSH==============>");
+      console.log(categories);
+
+      //categories.push(data.subCategory);
+      //console.log(categories);
+
+      const { data1 } = await Axios.put("/api/category/updateCategory", {
+        category,
+        //categorySlug,
+        categories,
+      });
+      toast.success("Категоријата е додадена");
+      categories.splice(0, categories.length);
+
+      counter++;
+    } catch (err) {
+      console.log(err);
+      toast.error("Грешка");
+    } finally {
+    }
+  };
+
+  const [{ loading, getCategories }, dispatch] = useReducer(reducer, {
+    loading: true,
+    error: "",
+  });
+
+  const flag = 1;
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        /*
+      const { data } = await axios.get(
+        `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+      );*/
+        const { data } = await Axios.get(`/api/category/getCategories`);
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err });
+      }
+      console.log(counter);
+    };
+    fetchData();
+  }, [counter]);
+  if (getCategories) foo(getCategories);
+  function foo(getCategories) {
+    let container = document.getElementById("selectContainer");
+    container.innerHTML = "";
+    for (let i = 0; i < getCategories.length; i++) {
+      let option = document.createElement("option");
+      option.setAttribute("value", getCategories[i].categorySlug);
+      option.innerHTML = getCategories[i].categoryName;
+      container.appendChild(option);
+    }
+  }
+
+  return (
+    <div id="pgContainer">
+      <Helmet>
+        <title>Dashboard</title>
+      </Helmet>
+      <div id="sidebarMenu">
+        <Link
+          to={"/admin/addProduct"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn" to="/admin/addProduct">
+            Додади нов производ
+          </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
+        </Link>
+        <Link
+          to={"/admin/products"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Производи</div>
+        </Link>
+        <Link
+          to={"/admin/orders"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Нарачки</div>
+        </Link>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-around",
+          width: "100%",
+        }}
+      >
+        <div
+          id="category-form-container"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            marginTop: "40px",
+          }}
+        >
+          <h2>Додади категорија</h2>
+          <Form
+            className="formCointainer"
+            onSubmit={addCategoryHandler}
+            style={{ marginTop: "30px" }}
+          >
+            <Form.Group controlId="category">
+              <Form.Control
+                type="text"
+                placeholder="Категорија"
+                required
+                onChange={(e) => setCategory(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group controlId="categorySlug" style={{ marginTop: "20px" }}>
+              <Form.Control
+                type="text"
+                placeholder="slug"
+                required
+                onChange={(e) => setCategorySlug(e.target.value)}
+              />
+            </Form.Group>
+            <div className="submitBtnContainer">
+              <Button variant="danger" size="lg" type="submit">
+                Додади категорија
+              </Button>
+            </div>
+          </Form>
+        </div>
+        <div
+          id="subcategory-form-container"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            marginTop: "40px",
+          }}
+        >
+          <h2>Додади подкатегорија</h2>
+          <Form
+            className="formCointainer"
+            onSubmit={addSubCategoryHandler}
+            style={{ marginTop: "30px" }}
+          >
+            <Form.Group>
+              <Form.Select
+                id="selectContainer"
+                value={category}
+                onChange={(e) => {
+                  setCategory(e.target.value);
+                }}
+              ></Form.Select>
+            </Form.Group>
+            <Form.Group controlId="subcategory" style={{ marginTop: "20px" }}>
+              <Form.Control
+                type="text"
+                placeholder="Подкатегорија"
+                required
+                onChange={(e) => setSubCategory(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group
+              controlId="subcategorySlug"
+              style={{ marginTop: "20px" }}
+            >
+              <Form.Control
+                type="text"
+                placeholder="slug"
+                required
+                onChange={(e) => setSubCategorySlug(e.target.value)}
+              />
+            </Form.Group>
+            <div className="submitBtnContainer">
+              <Button variant="danger" size="lg" type="submit">
+                Додади подкатегорија
+              </Button>
+            </div>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminDashboardScreen;
Index: frontend/src/screens/AdminAddProductScreen.js
===================================================================
--- frontend/src/screens/AdminAddProductScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/AdminAddProductScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -20,4 +20,7 @@
   const [dimension, setDimension] = useState("");
   const [scheme, setScheme] = useState("");
+  const [H, setH] = useState("");
+  const [W, setW] = useState("");
+  const [L, setL] = useState("");
   const [message, setMessage] = useState("");
 
@@ -56,5 +59,7 @@
     formData.append("dimension", dimension);
     formData.append("scheme", scheme);
-
+    formData.append("H", H);
+    formData.append("W", W);
+    formData.append("L", L);
     try {
       const result = await axios.post("/api/products/add", formData);
@@ -76,4 +81,10 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link
@@ -351,4 +362,59 @@
               </div>
               <div>
+                <Form.Group
+                  style={{ display: "flex", justifyContent: "space-around" }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>H:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      style={{ width: "60px" }}
+                      value={H}
+                      onChange={(e) => setH(e.target.value)}
+                      required
+                    ></Form.Control>
+                  </div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>W:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      value={W}
+                      onChange={(e) => setW(e.target.value)}
+                      style={{ width: "60px" }}
+                      required
+                    ></Form.Control>
+                  </div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Form.Label>L:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      name="dimension"
+                      style={{ width: "60px" }}
+                      value={L}
+                      onChange={(e) => setL(e.target.value)}
+                      required
+                    ></Form.Control>
+                  </div>
+                </Form.Group>
                 <Form.Group>
                   <Form.Label>Слика со димензии</Form.Label>
Index: frontend/src/screens/AdminDashboardScreen.js
===================================================================
--- frontend/src/screens/AdminDashboardScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/AdminDashboardScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -6,4 +6,5 @@
 import { useNavigate, Link } from "react-router-dom";
 import ListProducts from "../components/ListProducts";
+import { Helmet } from "react-helmet-async";
 
 function AdminDashboardScreen() {
@@ -19,4 +20,7 @@
   return (
     <div id="pgContainer">
+      <Helmet>
+        <title>Dashboard</title>
+      </Helmet>
       <div id="sidebarMenu">
         <Link
@@ -27,4 +31,10 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link
Index: frontend/src/screens/AdminEditProductScreen.js
===================================================================
--- frontend/src/screens/AdminEditProductScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/AdminEditProductScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -83,4 +83,10 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link
Index: frontend/src/screens/AdminOrdersScreen.js
===================================================================
--- frontend/src/screens/AdminOrdersScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/AdminOrdersScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -82,4 +82,10 @@
             Додади нов производ
           </div>
+        </Link>
+        <Link
+          to={"/admin/addCategory"}
+          style={{ textDecoration: "none", width: "100%" }}
+        >
+          <div className="dashboard-btn">Додади категорија</div>
         </Link>
         <Link
Index: frontend/src/screens/AdminProductsScreen.js
===================================================================
--- frontend/src/screens/AdminProductsScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/AdminProductsScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -96,4 +96,10 @@
                 Додади нов производ
               </div>
+            </Link>
+            <Link
+              to={"/admin/addCategory"}
+              style={{ textDecoration: "none", width: "100%" }}
+            >
+              <div className="dashboard-btn">Додади категорија</div>
             </Link>
             <Link
Index: frontend/src/screens/CategoryScreen.js
===================================================================
--- frontend/src/screens/CategoryScreen.js	(revision 113029bbf1a9831d3ae8fae3e6e1d250ae725493)
+++ frontend/src/screens/CategoryScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -1,3 +1,3 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import "../styles/Home.css";
 // import data from "./data";
@@ -34,4 +34,15 @@
   const params = useParams();
   const { category, subCategory } = params;
+  var HF = 0;
+  var HT = 1000;
+  var WF = 0;
+  var WT = 1000;
+  var LF = 0;
+  var LT = 1000;
+  //const [HT, setHT] = useState(1000);
+  //const [WF, setWF] = useState(0);
+  //const [WT, setWT] = useState(1000);
+  //const [LF, setLF] = useState(0);
+  //const [LT, setLT] = useState(1000);
   const navigate = useNavigate();
   const { search } = useLocation();
@@ -43,5 +54,4 @@
   const order = sp.get("order") || "newest";
   const page = sp.get("page") || 1;
-
   const [{ loading, error, products, pages, countProducts }, dispatch] =
     useReducer(reducer, { loading: true, error: "" });
@@ -56,5 +66,5 @@
         );*/
         const { data } = await axios.get(
-          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}&LT=${LT}`
         );
         dispatch({ type: "FETCH_SUCCESS", payload: data });
@@ -64,5 +74,18 @@
     };
     fetchData();
-  }, [category, page, query, order, subCategory, error]);
+  }, [
+    category,
+    page,
+    query,
+    order,
+    subCategory,
+    error,
+    HF,
+    HT,
+    WF,
+    WT,
+    LF,
+    LT,
+  ]);
 
   const getFilterUrl = (filter) => {
@@ -72,5 +95,38 @@
     const filterSubCategory = filter.subCategory || subCategory;
     const sortOrder = filter.order || order;
-    return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}`;
+    const filterHF = filter.HF || HF;
+    const filterHT = filter.HT || HT;
+    const filterWF = filter.WF || WF;
+    const filterWT = filter.WT || WT;
+    const filterLF = filter.LF || LF;
+    const filterLT = filter.LT || LT;
+    return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}&HF=${filterHF}&HT=${filterHT}&WF=${filterWF}&WT=${filterWT}&LF=${filterLF}&LT=${filterLT}`;
+  };
+
+  const filterHandler = (e) => {
+    e.preventDefault();
+    HF = document.getElementById("HF").value;
+    HT = document.getElementById("HT").value;
+    WF = document.getElementById("WF").value;
+    WT = document.getElementById("WT").value;
+    LF = document.getElementById("LF").value;
+    LT = document.getElementById("LT").value;
+    console.log(HT);
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        /*
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+        );*/
+        const { data } = await axios.get(
+          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}&LT=${LT}`
+        );
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
   };
 
@@ -124,12 +180,55 @@
             >
               <Form
+                onSubmit={filterHandler}
                 style={{
                   width: "100%",
                   display: "flex",
-                  justifyContent: "end",
+                  justifyContent: "space-around",
                   marginRight: "40px",
                   alignItems: "center",
                 }}
               >
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>H:</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="HF"
+                    //onChange={(e) => setHF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="HT"
+                    //onChange={(e) => setHT(e.target.value)}
+                  />
+                </Form.Group>
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>W:</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="WF"
+                    //onChange={(e) => setWF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    style={{ width: "60px" }}
+                    id="WT"
+                    //onChange={(e) => setWT(e.target.value)}
+                  />
+                </Form.Group>
+                <Form.Group style={{ display: "flex", alignItems: "center" }}>
+                  <Form.Label style={{ margin: "0px" }}>L:</Form.Label>
+                  <Form.Control
+                    id="LF"
+                    style={{ width: "60px" }}
+                    //onChange={(e) => setLF(e.target.value)}
+                  />
+                  <Form.Label style={{ margin: "0px" }}>-</Form.Label>
+                  <Form.Control
+                    id="LT"
+                    style={{ width: "60px" }}
+                    //onChange={(e) => setLT(e.target.value)}
+                  />
+                </Form.Group>
                 {/*}
                 <Form.Group>
@@ -292,4 +391,9 @@
                     <option value={"highFirst"}>Од висока кон ниска</option>
                   </Form.Select>
+                </Form.Group>
+                <Form.Group>
+                  <Button variant="danger" size="lg" type="submit">
+                    Филтрирај
+                  </Button>
                 </Form.Group>
               </Form>
Index: frontend/src/screens/SearchScreen.js
===================================================================
--- frontend/src/screens/SearchScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
+++ frontend/src/screens/SearchScreen.js	(revision a2e57352512ead87a9738f42509448ff26fdd514)
@@ -0,0 +1,157 @@
+import React, { useEffect, useReducer, useState } from "react";
+import "../styles/Home.css";
+// import data from "./data";
+import Product from "../components/Product";
+import axios from "axios";
+import { Helmet } from "react-helmet-async";
+import { getError } from "../components/utils";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import LinkContainer from "react-router-bootstrap/LinkContainer";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return {
+        ...state,
+        products: action.payload.products,
+        page: action.payload.page,
+        pages: action.payload.pages,
+        countProducts: action.payload.countProducts,
+        loading: false,
+      };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function Home() {
+  const params = useParams();
+
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const sp = new URLSearchParams(search);
+  const text = sp.get("text") || "";
+  const page = sp.get("page") || 1;
+  const [{ loading, error, products, pages, countProducts }, dispatch] =
+    useReducer(reducer, { loading: true, error: "" });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        /*
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+        );*/
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&text=${text}`
+        );
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
+  }, [page, error, text]);
+
+  const getFilterUrl = (filter) => {
+    const filterPage = filter.page || page;
+    const filterText = filter.text || text;
+    return `?page=${filterPage}&text=${filterText}`;
+  };
+
+  const filterHandler = (e) => {
+    e.preventDefault();
+
+    const fetchData = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        /*
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
+        );*/
+        const { data } = await axios.get(
+          `/api/products/search?page=${page}&text=${text}`
+        );
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
+  };
+
+  return (
+    <div style={{ width: "100%" }}>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+
+      <div className="most-popular-products">
+        {loading ? (
+          <div>Loading...</div>
+        ) : error ? (
+          <div>{error}</div>
+        ) : (
+          <div style={{ width: "100%" }}>
+            <h1>Резултати од пребарување</h1>
+
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-evenly",
+                alignItems: "center",
+                marginTop: "20px",
+              }}
+            ></div>
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                justifyContent: "space-evenly",
+                alignItems: "center",
+                marginTop: "10px",
+              }}
+            >
+              {products.map((product) => (
+                <Product key={product.slug} product={product} />
+              ))}
+            </div>
+            <div
+              style={{
+                marginTop: "20px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              {[...Array(pages).keys()].map((x) => (
+                <LinkContainer
+                  key={x + 1}
+                  className="mx-1"
+                  to={getFilterUrl({ page: x + 1 })}
+                >
+                  <Button
+                    className={Number(page) === x + 1 ? "text-bold" : ""}
+                    variant={Number(page) === x + 1 ? "danger" : "light"}
+                  >
+                    {x + 1}
+                  </Button>
+                </LinkContainer>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Home;
