Index: frontend/src/components/Footer.js
===================================================================
--- frontend/src/components/Footer.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/Footer.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,41 @@
+import React from "react";
+import "../styles/Footer.css";
+import fbIcon from "../Images/facebook.png";
+import igIcon from "../Images/instragram.png";
+import twIcon from "../Images/twitter.png";
+import piIcon from "../Images/pinterest.png";
+
+function Footer() {
+  return (
+    <div className="footer">
+      <div className="footer__contact">
+        <h2>Контакти</h2>
+        <p>E-mail: mebelcity@gmail.com</p>
+        <p>Од понеделник до сабота: 08:00 - 19:00</p>
+        <p>Недела: 09:00 - 16:00</p>
+        <p>Call Center: 0123456789 </p>
+      </div>
+      <div className="footer__social">
+        <h2>Следете не</h2>
+        <div className="socialIconText">
+          <img alt="facebook" src={fbIcon}></img>
+          <span>Facebook</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="instagram" src={igIcon}></img>
+          <span>Instagram</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="twitter" src={twIcon}></img>
+          <span>Twitter</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="pinterest" src={piIcon}></img>
+          <span>Pinterest</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
Index: frontend/src/components/Header.js
===================================================================
--- frontend/src/components/Header.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/Header.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,519 @@
+import React from "react";
+import logo from "../Images/logo.png";
+import "../styles/Header.css";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+//import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import WeekendIcon from "@mui/icons-material/Weekend";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
+import TableRestaurantIcon from "@mui/icons-material/TableRestaurant";
+import BedIcon from "@mui/icons-material/Bed";
+import KitchenIcon from "@mui/icons-material/Kitchen";
+import ChairAltIcon from "@mui/icons-material/ChairAlt";
+import BedroomChildIcon from "@mui/icons-material/BedroomChild";
+import DeckIcon from "@mui/icons-material/Deck";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import MenuIcon from "@mui/icons-material/Menu";
+import { Link } from "react-router-dom";
+import logo2 from "../Images/logo2.png";
+import Badge from "react-bootstrap/Badge";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Store } from "../Store";
+import { useContext } from "react";
+
+const toggleMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const toggleSubMenu = (event) => {
+  let menu = document.querySelector(".subDropdown");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+  let tog = document.querySelector(".subMenu");
+  tog.removeAttribute("onClick");
+  console.log("SubMenu Visible");
+};
+
+const categoryMenuTrigger = (event) => {
+  event.stopPropagation();
+  let span = event.target;
+  let menu = document.querySelector(`.${span.classList[0]}-menu`);
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const closeMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+const backToMenu = (event) => {
+  event.stopPropagation();
+  let menu1 = document.querySelector(".subDropdown");
+  menu1.classList.remove("visible");
+  menu1.classList.add("hidden");
+  console.log("SubMenu Invisible");
+};
+
+const backToSubMenu = (event) => {
+  event.stopPropagation();
+  let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+function Header() {
+  const { state } = useContext(Store);
+  const { cart } = state;
+  return (
+    <div className="header">
+      <div className="header__iconContainer">
+        <MenuIcon
+          className="header__icon"
+          fontSize="large"
+          onClick={toggleMenu}
+        />
+        <img className="header__icon" src={logo2} alt="logo"></img>
+      </div>
+      <div className="mobile-menu-container hidden">
+        <div className="closeBtn" onClick={closeMenu}>
+          x
+        </div>
+        <ul className="mobile-menu">
+          <li>Почетна</li>
+          <li onClick={toggleSubMenu} className="subMenu">
+            Производи <ArrowDropDownIcon />
+            <div className="subDropdown hidden">
+              <div className="backBtn" onClick={backToMenu}>
+                <ArrowBackIcon />
+                Назад
+              </div>
+              <ul className="mobile-submenu">
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="dnevna">
+                    <WeekendIcon /> Дневна
+                  </span>
+                  <div className="category-menu dnevna-menu hidden">
+                    <div onClick={backToSubMenu} className="dnevna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Аголни гарнитури</li>
+                      <li>Софи</li>
+                      <li>Фотелји</li>
+                      <li>Табуретки</li>
+                      <li>Клуб Маси</li>
+                      <li>ТВ комоди</li>
+                      <li>Комоди</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="hodnik">
+                    <MeetingRoomIcon />
+                    Ходник
+                  </span>
+                  <div className="category-menu hodnik-menu hidden">
+                    <div onClick={backToSubMenu} className="hodnik">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Шкафови за чевли</li>
+                      <li>Закачалки и огледала</li>
+                      <li>Колекции за ходник</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kujna">
+                    <KitchenIcon />
+                    Кујна
+                  </span>
+                  <div className="category-menu kujna-menu hidden">
+                    <div onClick={backToSubMenu} className="kujna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Кујнски аголни гарнитури</li>
+                      <li>Стандардни кујни</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="spalna">
+                    <BedIcon />
+                    Спална
+                  </span>
+                  <div className="category-menu spalna-menu hidden">
+                    <div onClick={backToSubMenu} className="spalna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Спални комплети</li>
+                      <li>Лежаи</li>
+                      <li>Кревети</li>
+                      <li>Плакари</li>
+                      <li>Ноќни шкафчиња</li>
+                      <li>Тоалетни маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="gradina">
+                    <DeckIcon />
+                    Градина
+                  </span>
+                  <div className="category-menu gradina-menu hidden">
+                    <div onClick={backToSubMenu} className="gradina">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Градинарски комплети</li>
+                      <li>Градинарски лулки</li>
+                      <li>Градинарски чадори</li>
+                      <li>Градинарски маси</li>
+                      <li>Градинарски столови</li>
+                      <li>Градинарско осветлување</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kancelarija">
+                    <ChairAltIcon />
+                    Канцеларија
+                  </span>
+                  <div className="category-menu kancelarija-menu hidden">
+                    <div onClick={backToSubMenu} className="kancelarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Бироа</li>
+                      <li>Канцелариски столови</li>
+                      <li>Гејмерски столови</li>
+                      <li>Канцелариски шкафови</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="trpezarija">
+                    <TableRestaurantIcon />
+                    Трпезарија
+                  </span>
+                  <div className="category-menu trpezarija-menu hidden">
+                    <div onClick={backToSubMenu} className="trpezarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Трпезариски маси</li>
+                      <li>Трпезариски столови</li>
+                      <li>Кујнски гарнитури</li>
+                      <li>Бар столови и маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="detska">
+                    <BedroomChildIcon />
+                    Детска соба
+                  </span>
+                  <div className="category-menu detska-menu hidden">
+                    <div onClick={backToSubMenu} className="detska">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Колекции за детска соба</li>
+                      <li>Детски бироа</li>
+                      <li>Лежаи</li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>За Нас</li>
+          <li>Контакти</li>
+        </ul>
+      </div>
+      <nav className="header__menu">
+        <img src={logo} alt="logo"></img>
+        <li>
+          <Link to={"/"} className="link">
+            Почетна
+          </Link>
+        </li>
+        <li className="header__products">
+          <span className="header__productsSpan">
+            Производи <ArrowDropDownIcon />
+          </span>
+          <div className="header__dropdown">
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <WeekendIcon /> Дневна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Софи</a>
+                    </li>
+                    <li>
+                      <a href="#">Фотелји</a>
+                    </li>
+                    <li>
+                      <a href="#">Табуретки</a>
+                    </li>
+                    <li>
+                      <a href="#">Клуб Маси</a>
+                    </li>
+                    <li>
+                      <a href="#">ТВ Комоди</a>
+                    </li>
+                    <li>
+                      <a href="#">Комоди</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <MeetingRoomIcon />
+                      Ходник
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Шкафови за чевли</a>
+                    </li>
+                    <li>
+                      <a href="#">Закачалки и огледала</a>
+                    </li>
+                    <li>
+                      <a href="#">Колекции за ходник</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <KitchenIcon />
+                      Кујна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Кујнски аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Стандардни кујни</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedIcon />
+                      Спална
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Спални комплети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Кревети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Плакари</a>
+                    </li>
+                    <li>
+                      <a href="#">Ноќни шкафчиња</a>
+                    </li>
+                    <li>
+                      <a href="#">Тоалетни маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <DeckIcon />
+                      Мебел за градина
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Градинарски комплети</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски лулки</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски чадори</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарско осветлување</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <ChairAltIcon />
+                      Канцеларија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Гејмерски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски шкафови</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <TableRestaurantIcon />
+                      Трпезарија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Трпезариски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Трпезариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Кујнски гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Бар столови и маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedroomChildIcon />
+                      Детска соба
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Колекции за детска соба</a>
+                    </li>
+                    <li>
+                      <a href="#">Детски бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul></ul>
+            </div>
+          </div>
+        </li>
+        <li className="header__aboutUs">За Нас</li>
+        <li className="header__contacts">Контакти</li>
+      </nav>
+      <div className="header__right">
+        <div className="header__buttons">
+          <span>
+            <AccountCircleIcon className="header__login" fontSize="large" />
+            <p>Најави се</p>
+          </span>
+          <Link to="/cart" className="badgee">
+            <span>
+              <ShoppingBasketIcon className="header__cart" fontSize="large" />
+
+              {cart.cartItems.length > 0 && (
+                <Badge pill bg="danger">
+                  {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
+                </Badge>
+              )}
+            </span>
+          </Link>
+        </div>
+        <div className="header__search">
+          <input className="header__searchInput" type="text" />
+          <SearchIcon className="header__searchIcon" fontSize="large" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
Index: frontend/src/components/ImageSlider.js
===================================================================
--- frontend/src/components/ImageSlider.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/ImageSlider.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,96 @@
+import React from 'react'
+import { useState } from 'react'
+
+
+const ImageSlider = ({ slides }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const sliderStyles = {
+        height: "100%",
+        position: "relative",
+    }
+
+    const slideStyles = {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        backgroundPosition: "center",
+        backgroundSize: 'cover',
+        backgroundImage: `url(${slides[currentIndex].url})`
+    }
+
+    const leftArrowStyle = {
+        fontSize: '60px',
+        color: '#fff',
+        userSelect: 'none',
+        zIndex: 2,
+        cursor: 'pointer',
+        marginLeft: "10px",
+    };
+
+    const rightArrowStyle = {
+        fontSize: '60px',
+        userSelect: 'none',
+        color: '#fff',
+        zIndex: 2,
+        cursor: 'pointer',
+        marginRight: "10px",
+    };
+
+    const goToPrevious = () =>{
+        const isFirstSlide = currentIndex === 0;
+        const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+        setCurrentIndex(newIndex);
+    }
+
+    const goToNext = () =>{
+        const isLastSlide = currentIndex === slides.length - 1;
+        const newIndex = isLastSlide ? 0 : currentIndex + 1;
+        setCurrentIndex(newIndex);
+    }
+
+    /*
+    const slideBtnContainer = {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: "5px",
+
+    }
+
+    const slideBtn = {
+        marginLeft: "5px",
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        backgroundColor: "grey",
+        cursor: "pointer",
+    }
+    
+    const changeSlide = (index) =>{
+        setCurrentIndex(index);
+    }
+
+     <div style={slideBtnContainer}>
+                <button style={slideBtn} onClick={()=>changeSlide(0)}></button>
+                <button style={slideBtn} onClick={()=>changeSlide(1)}></button>
+                <button style={slideBtn} onClick={()=>changeSlide(2)}></button>
+            </div>
+    */
+
+    return(
+        <div style={sliderStyles}>
+            
+            <div style={slideStyles}>
+                <div style={leftArrowStyle} onClick={goToPrevious}>{"<"}</div>
+                <div style={rightArrowStyle} onClick={goToNext}>{">"}</div>
+            </div>
+           
+            
+        </div>
+    )
+}
+
+export default ImageSlider
Index: frontend/src/components/JumboSlider.js
===================================================================
--- frontend/src/components/JumboSlider.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/JumboSlider.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,21 @@
+import Carousel from "react-bootstrap/Carousel";
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+function CarouselFadeExample() {
+  return (
+    <Carousel fade>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image1} alt="First slide" />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image2} alt="Second slide" />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image3} alt="Third slide" />
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default CarouselFadeExample;
Index: frontend/src/components/LoadingBox.js
===================================================================
--- frontend/src/components/LoadingBox.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/LoadingBox.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,12 @@
+import Spinner from "react-bootstrap/Spinner";
+import Header from "./Header";
+
+export default function LoadingBox() {
+  return (
+    <div>
+      <Spinner animation="border" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </Spinner>
+    </div>
+  );
+}
Index: frontend/src/components/MessageBox.js
===================================================================
--- frontend/src/components/MessageBox.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/MessageBox.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,10 @@
+import Alert from "react-bootstrap/Alert";
+import Header from "./Header";
+
+export default function MessageBox(props) {
+  return (
+    <div>
+      <Alert variant={props.variant || "info"}>{props.children}</Alert>
+    </div>
+  );
+}
Index: frontend/src/components/Product.js
===================================================================
--- frontend/src/components/Product.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/Product.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import "../styles/Product.css";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import { Link } from "react-router-dom";
+import { Store } from "../Store";
+
+function Product({ product }) {
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const addToCartHandler = () => {
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...product, quantity: 1 },
+    });
+  };
+  return (
+    <div className="product__container">
+      <Link to={`/product/${product.slug}`}>
+        <div className="product__img">
+          <img src={product.image} alt="product"></img>
+        </div>
+      </Link>
+      <div className="product__textContainer">
+        <Link to={`/product/${product.slug}`}>
+          <div className="product__name">
+            <h3>{product.name}</h3>
+          </div>
+        </Link>
+        <div className="product__price">
+          <h5>{product.price}ден</h5>
+        </div>
+      </div>
+      <div className="product__addToCart">
+        <button onClick={addToCartHandler}>
+          <ShoppingBasketIcon />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Product;
Index: frontend/src/components/utils.js
===================================================================
--- frontend/src/components/utils.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/utils.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,5 @@
+export const getError = (error) => {
+  return error.response && error.response.data.message
+    ? error.response.data.message
+    : error.message;
+};
