Index: frontend/src/screens/CartScreen.js
===================================================================
--- frontend/src/screens/CartScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/CartScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,148 @@
+import React, { useContext } from "react";
+import "../styles/CartScreen.css";
+import { Store } from "../Store";
+import { Helmet } from "react-helmet-async";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import MessageBox from "../components/MessageBox";
+import ListGroup from "react-bootstrap/ListGroup";
+import Button from "react-bootstrap/Button";
+import { Link, useNavigate } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import DeleteIcon from "@mui/icons-material/Delete";
+import axios from "axios";
+function CartScreen() {
+  const navigate = useNavigate();
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const {
+    cart: { cartItems },
+  } = state;
+
+  const updateCartHandler = async (item, quantity) => {
+    const { data } = await axios.get(`/api/products/${item._id}`);
+    if (data.countInStock < quantity) {
+      window.alert("Sorry. Product is out of stock");
+      return;
+    }
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...item, quantity },
+    });
+  };
+
+  const removeItemHandler = (item) => {
+    ctxDispatch({ type: "CART_REMOVE_ITEM", payload: item });
+  };
+
+  const checkoutHandler = () => {
+    navigate("/signin?redirect=/shipping");
+  };
+
+  return (
+    <div className="d-flex flex-column pageContainer">
+      <Helmet>
+        <title>Кошничка</title>
+      </Helmet>
+      <main>
+        <h2>Кошничка</h2>
+        <Row className="productRow">
+          <Col>
+            {cartItems.length === 0 ? (
+              <MessageBox>Кошничката е празна</MessageBox>
+            ) : (
+              <ListGroup>
+                {cartItems.map((item) => (
+                  <ListGroup.Item
+                    variant="dark"
+                    key={item._id}
+                    className="item"
+                  >
+                    <div className="itemContainer ">
+                      <div className="trashImgContainer">
+                        <div className="trashIconContainer">
+                          <Button
+                            variant="dark"
+                            onClick={() => removeItemHandler(item)}
+                          >
+                            <DeleteIcon />
+                          </Button>
+                        </div>
+                        <div>
+                          <Link className="link" to={`/product/${item.slug}`}>
+                            <img
+                              src={item.image}
+                              alt={item.name}
+                              className="img-fluid rounded img-thumbnail"
+                            ></img>
+                            <p>{item.name}</p>
+                          </Link>
+                        </div>
+                      </div>
+                      <div className="btnsPriceContainer">
+                        <div className="">
+                          <Button
+                            variant="danger"
+                            onClick={() =>
+                              updateCartHandler(item, item.quantity - 1)
+                            }
+                            disabled={item.quantity === 1}
+                          >
+                            <RemoveCircleIcon />
+                          </Button>{" "}
+                          <input
+                            className="quantityInput"
+                            readOnly
+                            value={item.quantity}
+                          ></input>{" "}
+                          <Button
+                            variant="danger"
+                            className="marginBtn"
+                            onClick={() =>
+                              updateCartHandler(item, item.quantity + 1)
+                            }
+                            disabled={item.quantity === item.countInStock}
+                          >
+                            <AddCircleIcon />
+                          </Button>
+                        </div>
+                        <div>
+                          <h3>{item.price}ден</h3>
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            )}
+          </Col>
+        </Row>
+        {cartItems.length === 0 ? (
+          <h2></h2>
+        ) : (
+          <Row className="productRow lastRow">
+            <div className="totalPriceContainer">
+              <h3>Вкупно:</h3>
+              <h3>
+                {cartItems.reduce((a, c) => a + c.price * c.quantity, 0)}ден
+              </h3>
+            </div>
+            <div className="checkoutBtnContainer">
+              <Button
+                variant="danger"
+                size="lg"
+                onClick={checkoutHandler}
+                disabled={cartItems.length === 0}
+              >
+                НАРАЧАЈТЕ
+              </Button>
+            </div>
+          </Row>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default CartScreen;
Index: frontend/src/screens/CategoryScreen.js
===================================================================
--- frontend/src/screens/CategoryScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/CategoryScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,64 @@
+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";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, products: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function Home() {
+  const [{ loading, error, products }, dispatch] = useReducer(reducer, {
+    products: [],
+    loading: true,
+    error: "",
+  });
+  //const [products, setProducts] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get("/api/products");
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+
+      //setProducts(result.data);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+
+      <div className="most-popular-products">
+        {loading ? (
+          <div>Loading...</div>
+        ) : error ? (
+          <div>{error}</div>
+        ) : (
+          products.map((product) => (
+            <Product key={product.slug} product={product} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/Home.js
===================================================================
--- frontend/src/screens/Home.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/Home.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,175 @@
+import React, { useEffect, useReducer, useState } from "react";
+import "../styles/Home.css";
+import Header from "../components/Header";
+import ImageSlider from "../components/ImageSlider";
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+import icon1 from "../Images/icon1.svg";
+import icon2 from "../Images/icon2.svg";
+import icon3 from "../Images/icon3.svg";
+import Footer from "../components/Footer";
+// import data from "./data";
+import Product from "../components/Product";
+import axios from "axios";
+import { Helmet } from "react-helmet-async";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, products: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function Home() {
+  const [{ loading, error, products }, dispatch] = useReducer(reducer, {
+    products: [],
+    loading: true,
+    error: "",
+  });
+  //const [products, setProducts] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get("/api/products");
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+
+      //setProducts(result.data);
+    };
+    fetchData();
+  }, []);
+
+  const slides = [
+    { url: image1, title: "Shiping" },
+    { url: image2, title: "SchoolDiscount" },
+    { url: image3, title: "OfficeDiscount" },
+  ];
+
+  const clearActive = () => {
+    let icon1 = document.getElementById("icon1");
+    icon1.classList.remove("activeIcon");
+    let icon2 = document.getElementById("icon2");
+    icon2.classList.remove("activeIcon");
+    let icon3 = document.getElementById("icon3");
+    icon3.classList.remove("activeIcon");
+
+    let icon1Text = document.getElementById("icon1-text");
+    icon1Text.classList.remove("activeIcon");
+    let icon2Text = document.getElementById("icon2-text");
+    icon2Text.classList.remove("activeIcon");
+    let icon3Text = document.getElementById("icon3-text");
+    icon3Text.classList.remove("activeIcon");
+
+    let icon1Container = document.getElementById("1");
+    icon1Container.classList.remove("activeIconContainer");
+    let icon2Container = document.getElementById("2");
+    icon2Container.classList.remove("activeIconContainer");
+    let icon3Container = document.getElementById("3");
+    icon3Container.classList.remove("activeIconContainer");
+  };
+
+  const handleClick = (event) => {
+    let clickedIcon = document.getElementById("icon" + event.currentTarget.id);
+    let clickedIconText = document.getElementById(
+      "icon" + event.currentTarget.id + "-text"
+    );
+    clearActive();
+    clickedIcon.classList.add("activeIcon");
+    clickedIconText.classList.add("activeIcon");
+
+    let iconContainer = document.getElementById(event.currentTarget.id);
+    iconContainer.classList.add("activeIconContainer");
+
+    const icon1Text = "Бесплатна достава за нарачки над 1500 ден.";
+    const icon2Text =
+      "Ние можеме да го монтираме мебелот наместо Вас – брзо, лесно и чисто.";
+    const icon3Text = "Доставуваме над 1000 производи до 10 дена.";
+
+    let p = document.querySelector(".icon-description");
+    if (event.currentTarget.id === "1") p.textContent = icon1Text;
+    else if (event.currentTarget.id === "2") p.textContent = icon2Text;
+    else p.textContent = icon3Text;
+  };
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+      <Header />
+      <div className="sliderContainer">
+        <ImageSlider slides={slides} />
+      </div>
+      <div className="section">
+        <div className="iconWrapper">
+          <div
+            className="iconContainer activeIconContainer"
+            id="1"
+            onClick={handleClick}
+          >
+            <img
+              src={icon1}
+              alt="бесплатна достава"
+              className="icon activeIcon"
+              id="icon1"
+            />
+            <p className="icon-text activeIcon" id="icon1-text">
+              Бесплатна достава
+            </p>
+          </div>
+          <div className="iconContainer" id="2" onClick={handleClick}>
+            <img src={icon2} className="icon" alt="монтажа" id="icon2" />
+            <p className="icon-text" id="icon2-text">
+              Монтажа
+            </p>
+          </div>
+          <div className="iconContainer" onClick={handleClick} id="3">
+            <img src={icon3} alt="брза достава" className="icon" id="icon3" />
+            <p className="icon-text" id="icon3-text">
+              Брза достава
+            </p>
+          </div>
+        </div>
+        <div className="descriptionContainer">
+          <p className="icon-description">
+            Бесплатна достава за нарачки над 1500 ден.
+          </p>
+        </div>
+      </div>
+      <div className="grid-container">
+        <div className="grid-item item1">Дневна</div>
+        <div className="grid-item item2">Ходник</div>
+        <div className="grid-item item3">Трпезарија</div>
+        <div className="grid-item item4">Спална</div>
+        <div className="grid-item item5">Кујна</div>
+        <div className="grid-item item6">Канцеларија</div>
+        <div className="grid-item item7">Детска соба</div>
+        <div className="grid-item item8">Мебел за градина</div>
+      </div>
+      <div className="most-popular-products">
+        {loading ? (
+          <div>Loading...</div>
+        ) : error ? (
+          <div>{error}</div>
+        ) : (
+          products.map((product) => (
+            <Product key={product.slug} product={product} />
+          ))
+        )}
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/HomeWithJumbo.js
===================================================================
--- frontend/src/screens/HomeWithJumbo.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/HomeWithJumbo.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,123 @@
+import React from "react";
+import "../styles/Home.css";
+import Header from "../components/Header";
+
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+import icon1 from "../Images/icon1.svg";
+import icon2 from "../Images/icon2.svg";
+import icon3 from "../Images/icon3.svg";
+import Footer from "../components/Footer";
+// import data from "./data";
+
+import { Helmet } from "react-helmet-async";
+import Jumbo from "../components/JumboSlider";
+
+function Home() {
+  const clearActive = () => {
+    let icon1 = document.getElementById("icon1");
+    icon1.classList.remove("activeIcon");
+    let icon2 = document.getElementById("icon2");
+    icon2.classList.remove("activeIcon");
+    let icon3 = document.getElementById("icon3");
+    icon3.classList.remove("activeIcon");
+
+    let icon1Text = document.getElementById("icon1-text");
+    icon1Text.classList.remove("activeIcon");
+    let icon2Text = document.getElementById("icon2-text");
+    icon2Text.classList.remove("activeIcon");
+    let icon3Text = document.getElementById("icon3-text");
+    icon3Text.classList.remove("activeIcon");
+
+    let icon1Container = document.getElementById("1");
+    icon1Container.classList.remove("activeIconContainer");
+    let icon2Container = document.getElementById("2");
+    icon2Container.classList.remove("activeIconContainer");
+    let icon3Container = document.getElementById("3");
+    icon3Container.classList.remove("activeIconContainer");
+  };
+
+  const handleClick = (event) => {
+    let clickedIcon = document.getElementById("icon" + event.currentTarget.id);
+    let clickedIconText = document.getElementById(
+      "icon" + event.currentTarget.id + "-text"
+    );
+    clearActive();
+    clickedIcon.classList.add("activeIcon");
+    clickedIconText.classList.add("activeIcon");
+
+    let iconContainer = document.getElementById(event.currentTarget.id);
+    iconContainer.classList.add("activeIconContainer");
+
+    const icon1Text = "Бесплатна достава за нарачки над 1500 ден.";
+    const icon2Text =
+      "Ние можеме да го монтираме мебелот наместо Вас – брзо, лесно и чисто.";
+    const icon3Text = "Доставуваме над 1000 производи до 10 дена.";
+
+    let p = document.querySelector(".icon-description");
+    if (event.currentTarget.id === "1") p.textContent = icon1Text;
+    else if (event.currentTarget.id === "2") p.textContent = icon2Text;
+    else p.textContent = icon3Text;
+  };
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+
+      <div className="sliderContainer">
+        <Jumbo />
+      </div>
+      <div className="section">
+        <div className="iconWrapper">
+          <div
+            className="iconContainer activeIconContainer"
+            id="1"
+            onClick={handleClick}
+          >
+            <img
+              src={icon1}
+              alt="бесплатна достава"
+              className="icon activeIcon"
+              id="icon1"
+            />
+            <p className="icon-text activeIcon" id="icon1-text">
+              Бесплатна достава
+            </p>
+          </div>
+          <div className="iconContainer" id="2" onClick={handleClick}>
+            <img src={icon2} className="icon" alt="монтажа" id="icon2" />
+            <p className="icon-text" id="icon2-text">
+              монтажа
+            </p>
+          </div>
+          <div className="iconContainer" onClick={handleClick} id="3">
+            <img src={icon3} alt="брза достава" className="icon" id="icon3" />
+            <p className="icon-text" id="icon3-text">
+              Брза достава
+            </p>
+          </div>
+        </div>
+        <div className="descriptionContainer">
+          <p className="icon-description">
+            Бесплатна достава за нарачки над 1500 ден.
+          </p>
+        </div>
+      </div>
+      <div className="grid-container">
+        <div className="grid-item item1">Дневна</div>
+        <div className="grid-item item2">Ходник</div>
+        <div className="grid-item item3">Трпезарија</div>
+        <div className="grid-item item4">Спална</div>
+        <div className="grid-item item5">Кујна</div>
+        <div className="grid-item item6">Канцеларија</div>
+        <div className="grid-item item7">Детска соба</div>
+        <div className="grid-item item8">Мебел за градина</div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/ProductScreen.js
===================================================================
--- frontend/src/screens/ProductScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/ProductScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,112 @@
+import axios from "axios";
+import React, { useEffect, useReducer } from "react";
+import { Helmet } from "react-helmet-async";
+import { useParams } from "react-router-dom";
+import Footer from "../components/Footer";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Header from "../components/Header";
+import icon1 from "../Images/icon3.svg";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import "../styles/ProductScreen.css";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, product: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function ProductScreen() {
+  const params = useParams();
+  const { slug } = params;
+
+  const [{ loading, error, product }, dispatch] = useReducer(reducer, {
+    product: [],
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get(`/api/products/slug/${slug}`);
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+    };
+    fetchData();
+  }, [slug]);
+
+  return loading ? (
+    <div>Loading...</div>
+  ) : error ? (
+    <div>{error}</div>
+  ) : (
+    <div>
+      <Helmet>
+        <title>{product.name}</title>
+      </Helmet>
+      <div>
+        <Header />
+        <Container>
+          <div className="left-side">
+            <div className="mainImg">
+              <img src={product.image} alt={product.name}></img>
+            </div>
+            <div className="sideImgContainer">
+              <div className="sideImg">
+                <img src={product.image} alt={product.name}></img>
+              </div>
+              <div className="sideImg">
+                <img src={product.sideImage} alt={product.name}></img>
+              </div>
+            </div>
+          </div>
+          <div className="right-side">
+            <div className="name-container">
+              <h2>{product.name}</h2>
+            </div>
+            <div className="price-container">
+              <div className="price-left">
+                <h2>{product.price} ден</h2>
+                <span>
+                  <img src={icon1} alt="10-day-delivery"></img>Бесплатна
+                  достава: 10 дена
+                </span>
+              </div>
+              <div className="price-right">
+                <button className="addToCartBtn">
+                  <ShoppingBasketIcon />
+                  ДОДАЈ ВО КОШНИЧКА
+                </button>
+              </div>
+            </div>
+
+            <div className="informationContainer">
+              <div className="table">
+                <div>Опис</div>
+                <div>Димензии</div>
+                <div>Монтажа</div>
+                <div>Шема за монтажа</div>
+              </div>
+            </div>
+          </div>
+        </Container>
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default ProductScreen;
Index: frontend/src/screens/ProductScreenBootstrap.js
===================================================================
--- frontend/src/screens/ProductScreenBootstrap.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/ProductScreenBootstrap.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,226 @@
+import axios from "axios";
+import React, { useContext, useEffect, useReducer } from "react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate, useParams } from "react-router-dom";
+import Footer from "../components/Footer";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Header from "../components/Header";
+import icon1 from "../Images/icon3.svg";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import "../styles/ProductScreen.css";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+import Table from "react-bootstrap/Table";
+import LoadingBox from "../components/LoadingBox";
+import MessageBox from "../components/MessageBox";
+import { getError } from "../components/utils";
+import { Store } from "../Store";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, product: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function ProductScreen() {
+  const navigate = useNavigate();
+  const params = useParams();
+  const { slug } = params;
+
+  const [{ loading, error, product }, dispatch] = useReducer(reducer, {
+    product: [],
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get(`/api/products/slug/${slug}`);
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
+  }, [slug]);
+
+  const handleClick = (event) => {
+    let tmp = document.querySelector("#tmp");
+    if (tmp != null) {
+      tmp.parentNode.removeChild(tmp);
+      if (document.querySelector("#tmp") != null) {
+        let tmp = document.querySelector("#tmp");
+        tmp.parentNode.removeChild(tmp);
+      }
+    }
+    if (event.target.textContent === "Опис") {
+      let pre = document.createElement("pre");
+      pre.setAttribute("id", "tmp");
+      pre.textContent = product.description;
+      event.target.appendChild(pre);
+    } else if (event.target.textContent === "Монтажа") {
+      let table = document.createElement("table");
+      let thModel = document.createElement("th");
+      let thPrice = document.createElement("th");
+      let tdName = document.createElement("td");
+      let tdPrice = document.createElement("td");
+      let tr1 = document.createElement("tr");
+      let tr2 = document.createElement("tr");
+      thModel.innerHTML = "Модел";
+      thPrice.innerHTML = "Цена";
+      tdName.innerHTML = product.name;
+      tdPrice.innerHTML = product.priceMontaza;
+      tr1.appendChild(thModel);
+      tr1.appendChild(thPrice);
+      tr2.appendChild(tdName);
+      tr2.appendChild(tdPrice);
+      table.appendChild(tr1);
+      table.appendChild(tr2);
+      table.setAttribute("id", "tmp");
+      let p = document.createElement("p");
+      p.innerHTML = "Цената за монтажа е посочена на секој производ посебно.";
+      p.setAttribute("id", "tmp");
+
+      event.target.appendChild(table);
+      event.target.appendChild(p);
+    } else {
+      let p = document.createElement("p");
+      let a = document.createElement("a");
+      let img = document.createElement("img");
+      if (event.target.textContent === "Димензии") {
+        a.setAttribute("href", product.dimension);
+        img.src = product.dimension;
+      } else {
+        a.setAttribute("href", product.scheme);
+        img.src = product.scheme;
+      }
+      p.appendChild(img);
+      a.setAttribute("id", "tmp");
+      a.appendChild(p);
+      event.target.appendChild(a);
+    }
+  };
+
+  const changePhoto = (event) => {
+    let main = document.getElementById("main");
+    main.setAttribute("src", event.target.src);
+  };
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart } = state;
+  const addToCartHandler = async () => {
+    const existItem = cart.cartItems.find((x) => x._id === product._id);
+    const quantity = existItem ? existItem.quantity + 1 : 1;
+    const { data } = await axios.get(`/api/products/${product._id}`);
+    if (data.countInStock < quantity) {
+      window.alert("Sorry. Product is out of stock");
+      return;
+    }
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...product, quantity },
+    });
+    navigate("/cart");
+  };
+
+  return loading ? (
+    <LoadingBox />
+  ) : error ? (
+    <MessageBox variant="danger">{error}</MessageBox>
+  ) : (
+    <div>
+      <Helmet>
+        <title>{product.name}</title>
+      </Helmet>
+      <div>
+        <Container>
+          <Row>
+            <Col>
+              <Row>
+                <img id="main" src={product.image} alt={product.name}></img>
+              </Row>
+              <Row className="imgRow">
+                <img
+                  id="sec"
+                  src={product.image}
+                  alt={product.name}
+                  onClick={changePhoto}
+                ></img>
+
+                <img
+                  id="sec"
+                  src={product.sideImage}
+                  alt={product.name}
+                  onClick={changePhoto}
+                ></img>
+              </Row>
+
+              {/*</div>*/}
+            </Col>
+            <Col sm>
+              <Row>
+                <h2 id="name">{product.name}</h2>
+              </Row>
+              <Row>
+                <h2 id="price">{product.price} ден</h2>
+                <span>
+                  <img id="icon" src={icon1} alt="10-day-delivery"></img>
+                  Бесплатна достава: 10 дена
+                </span>
+              </Row>
+              <Row>
+                <Button
+                  onClick={addToCartHandler}
+                  className="addToCartBtn"
+                  variant="danger"
+                >
+                  <ShoppingBasketIcon />
+                  ДОДАЈ ВО КОШНИЧКА
+                </Button>
+              </Row>
+              <Row>
+                <Table id="table">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Опис</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Димензии</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Монтажа</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Шема за монтажа</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </Table>
+              </Row>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </div>
+  );
+}
+
+export default ProductScreen;
Index: frontend/src/screens/SigninScreen.js
===================================================================
--- frontend/src/screens/SigninScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/SigninScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,44 @@
+import Container from "react-bootstrap/Container";
+import Form from "react-bootstrap/Form";
+import { Helmet } from "react-helmet-async";
+import Button from "react-bootstrap/Button";
+import "../styles/SigninScreen.css";
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+function SigninScreen() {
+  const { search } = useLocation();
+  const redirectInUrl = new URLSearchParams(search).get("redirect");
+  const redirect = redirectInUrl ? redirectInUrl : "/";
+  return (
+    <div className="pageContainer">
+      <Container className="main">
+        <Helmet>
+          <title>Најави се</title>
+        </Helmet>
+        <h1>Најави се</h1>
+        <Form className="formCointainer">
+          <Form.Group controlId="email">
+            <Form.Label>Email</Form.Label>
+            <Form.Control type="email" required />
+          </Form.Group>
+          <Form.Group controlId="password">
+            <Form.Label>Лозинка</Form.Label>
+            <Form.Control type="email" required />
+          </Form.Group>
+          <div className="submitBtnContainer">
+            <Button variant="danger" size="lg" type="submit">
+              Најави се
+            </Button>
+          </div>
+          <div className="registerParagraph">
+            Нов корисник?{" "}
+            <Link to={`/signup?redirect=${redirect}`}>Регистрирај се</Link>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default SigninScreen;
