Index: frontend/src/styles/CartScreen.css
===================================================================
--- frontend/src/styles/CartScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/CartScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,114 @@
+.img-thumbnail {
+  height: 80px;
+  margin-left: 20px;
+}
+
+.pageContainer {
+  min-height: 100vh;
+}
+
+main {
+  margin-top: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.itemContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.trashImgContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  color: black;
+  display: flex;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsPriceContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.productRow {
+  width: 800px;
+}
+
+.quantityInput {
+  height: 40px;
+  width: 40px;
+  text-align: center;
+}
+
+.marginBtn {
+  margin-right: 20px;
+}
+
+.lastRow {
+  border-top: 1px solid black;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.totalPriceContainer {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checkoutBtnContainer {
+  display: flex;
+  justify-content: right;
+}
+
+@media only screen and (max-width: 801px) {
+  .productRow {
+    width: 100vw;
+  }
+}
+
+@media only screen and (max-width: 554px) {
+  .productRow {
+    width: 100vw;
+  }
+
+  .itemContainer {
+    flex-direction: column;
+  }
+
+  .trashImgContainer {
+    width: 100%;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  .trashIconContainer {
+    display: flex;
+    justify-content: right;
+  }
+
+  .btnsPriceContainer {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .checkoutBtnContainer button {
+    width: 100%;
+  }
+}
Index: frontend/src/styles/Footer.css
===================================================================
--- frontend/src/styles/Footer.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/Footer.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,63 @@
+.footer {
+  box-sizing: border-box;
+  margin-top: 40px;
+  padding-top: 10px;
+  border-top: 5px solid red;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.footer__social {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer__social img {
+  width: 30px;
+  margin-top: 7px;
+}
+
+.socialIconText {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.socialIconText span {
+  margin-left: 5px;
+}
+
+.footer__newsletter {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer__newsletter div {
+  width: auto;
+  display: flex;
+}
+
+.footer__newsletter input {
+  background-color: #e9e9e9;
+  border: none;
+  height: 30px;
+}
+
+#email {
+  flex: 1;
+}
+#submit {
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+
+#email:focus {
+  outline: none;
+}
+
+@media only screen and (max-width: 440px) {
+  .footer {
+    flex-direction: column;
+  }
+}
Index: frontend/src/styles/Header.css
===================================================================
--- frontend/src/styles/Header.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/Header.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,283 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.header {
+  margin: 0;
+  padding: 0;
+  height: 70px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgb(166, 165, 165);
+}
+
+span {
+  display: flex;
+  align-items: center;
+}
+
+span p {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.header__menu {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.header__menu li {
+  margin-left: 20px;
+}
+
+.header__right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.header__search {
+  display: flex;
+}
+
+.header__searchInput {
+  width: 300px;
+}
+
+.header__buttons {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.link {
+  color: black;
+  text-decoration: none;
+}
+
+.link:hover {
+  color: black;
+}
+
+.header__cart {
+  color: black;
+}
+
+.badgee {
+  text-decoration: none;
+}
+
+.header__dropdown {
+  width: 700px;
+  padding-top: 28px;
+  background-color: #ffffff;
+  border: 1px solid rgb(166, 165, 165);
+  box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+  padding-right: 10px;
+  position: absolute;
+  display: none;
+  z-index: 10;
+}
+
+.header__products {
+  position: relative;
+  cursor: pointer;
+}
+
+.header__products:hover .header__dropdown {
+  display: flex;
+}
+
+.header__dropdown a {
+  display: block;
+}
+
+.header__dropdownColumn ul {
+  list-style: none;
+  padding: 0;
+}
+
+.header__dropdownColumn ul li {
+  font-weight: bold;
+  margin-top: 4px;
+}
+
+.header__dropdownColumn ul li a {
+  color: rgb(45, 44, 44);
+  text-decoration: 0;
+}
+
+.header__dropdownColumn ul li ul {
+  margin-bottom: 15px;
+}
+
+.header__dropdownColumn ul li ul li {
+  font-weight: 100;
+  text-decoration: none;
+  color: rgb(107, 106, 106);
+}
+
+.header__dropdownColumn ul li:hover span {
+  border-bottom: 1px solid rgb(45, 44, 44);
+}
+
+.header__dropdownColumn ul li ul li a:hover {
+  text-decoration: underline;
+  color: red;
+}
+
+.header__icon {
+  display: none !important;
+}
+
+.header__iconContainer {
+  display: none;
+}
+
+.header__iconContainer img {
+  margin-left: 10px;
+}
+
+.mobile-menu-container {
+  background-color: white;
+  box-shadow: 0 10px 15px rgb(0 0 0 / 40%);
+  height: 100vh;
+  z-index: 20;
+  position: absolute;
+  top: 0;
+}
+
+.closeBtn {
+  margin-right: 20px;
+  text-align: right;
+  cursor: pointer;
+  font-size: 40px;
+}
+
+.mobile-menu-container ul {
+  list-style: none;
+  padding: 0px;
+  margin-top: 10px;
+}
+
+.mobile-menu-container ul li {
+  cursor: pointer;
+  border-top: 1px solid grey;
+  font-size: 20px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: 50px;
+}
+
+.subDropdown {
+  background-color: white;
+  height: 100vh;
+  z-index: 21;
+  position: absolute;
+  top: 0;
+}
+
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+.category-menu {
+  position: absolute;
+  background-color: #ffffff;
+  top: 0;
+  z-index: 22;
+  height: 100vh;
+}
+
+@media only screen and (max-width: 1015px) {
+  .header__dropdown {
+    margin-left: -200px;
+  }
+}
+
+@media only screen and (max-width: 873px) {
+  .header__menu {
+    display: none;
+  }
+
+  .header__icon {
+    display: block !important;
+    cursor: pointer;
+  }
+
+  .header__iconContainer {
+    display: flex;
+  }
+
+  .mobile-menu-container {
+    width: 40vw;
+  }
+
+  .subDropdown {
+    width: 40vw;
+  }
+
+  .category-menu {
+    width: 40vw;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .mobile-menu-container {
+    width: 50vw;
+  }
+
+  .subDropdown {
+    width: 50vw;
+  }
+
+  .category-menu {
+    width: 50vw;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .header__search {
+    display: none;
+  }
+
+  .mobile-menu-container {
+    width: 80vw;
+  }
+
+  .subDropdown {
+    width: 80vw;
+  }
+
+  .category-menu {
+    width: 80vw;
+  }
+}
+
+@media only screen and (max-width: 355px) {
+  span p {
+    display: none;
+  }
+
+  .mobile-menu-container {
+    width: 100vw;
+  }
+
+  .subDropdown {
+    width: 100vw;
+  }
+
+  .category-menu {
+    width: 100vw;
+  }
+}
Index: frontend/src/styles/Home.css
===================================================================
--- frontend/src/styles/Home.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/Home.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,192 @@
+.sliderContainer {
+  width: auto;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.iconWrapper {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.iconContainer {
+  width: 200px;
+  height: 100%;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #808285;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon {
+  width: 100px;
+  height: 100px;
+}
+
+.icon-text {
+  margin: 0px;
+  text-align: center;
+}
+
+.activeIcon {
+  filter: invert(42%) sepia(100%) saturate(7464%) hue-rotate(349deg)
+    brightness(86%) contrast(96%);
+}
+
+.activeIconContainer {
+  background-color: #dbd8d8;
+  border-top-left-radius: 10%;
+  border-top-right-radius: 10%;
+}
+
+.descriptionContainer {
+  width: 100%;
+  height: 40px;
+  background-color: #dbd8d8;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: 300px 300px 300px 300px;
+  gap: 10px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.grid-item {
+  text-align: center;
+  font-size: 30px;
+  border-radius: 20px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 100%);
+  color: #ffffff;
+  text-shadow: 3px 3px 3px rgb(0 0 0 / 100%);
+  cursor: pointer;
+}
+
+.item1 {
+  background-image: url("../Images/dnevna.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  grid-row: 1 / 3;
+}
+.item2 {
+  background-image: url("../Images/hodnik.jpg");
+  background-size: cover;
+}
+.item3 {
+  background-image: url("../Images/trpezarija.jpg");
+  background-size: cover;
+}
+.item4 {
+  background-image: url("../Images/spalna.jpg");
+  background-size: cover;
+  background-position: center;
+  grid-column: 2 / 4;
+}
+.item5 {
+  background-image: url("../Images/kujna.jpg");
+  background-size: cover;
+}
+.item6 {
+  background-image: url("../Images/kancelarija.jpg");
+  background-size: cover;
+}
+.item7 {
+  background-image: url("../Images/detska.jpg");
+  background-size: cover;
+  grid-column: 3;
+  grid-row: 3 / 5;
+}
+.item8 {
+  background-image: url("../Images/gradina.jpg");
+  background-size: cover;
+  grid-column: 1 / 3;
+}
+
+.most-popular-products {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.icon-description {
+  margin-top: 2px;
+}
+
+@media only screen and (max-width: 650px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: 300px 300px 300px 300px;
+    gap: 10px;
+    margin-top: 20px;
+    padding: 10px;
+  }
+
+  .grid-container .grid-item {
+    grid-row: auto;
+    grid-column: auto;
+  }
+
+  .iconWrapper {
+    height: 70px;
+  }
+
+  .iconContainer {
+    width: 120px;
+  }
+
+  .icon {
+    width: 50px;
+    height: 50px;
+  }
+
+  .icon-text {
+    font-size: 10px;
+  }
+}
+
+@media only screen and (max-width: 560px) {
+  .icon-description {
+    font-size: 15px;
+  }
+}
+
+@media only screen and (max-width: 534px) {
+  .descriptionContainer {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-rows: repeat(8, minmax(0, 200px));
+    gap: 10px;
+    margin-top: 20px;
+    padding: 10px;
+  }
+
+  .grid-container .grid-item {
+    grid-row: auto;
+    grid-column: auto;
+  }
+}
Index: frontend/src/styles/Product.css
===================================================================
--- frontend/src/styles/Product.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/Product.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,50 @@
+.product__container {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid grey;
+  padding: 2px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 100%);
+}
+
+.product__img img {
+  width: 100%;
+}
+
+.product__textContainer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.product__name {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__price {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__addToCart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__addToCart button {
+  width: 40%;
+  height: 30px;
+  background-color: red;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 19px;
+}
Index: frontend/src/styles/ProductScreen.css
===================================================================
--- frontend/src/styles/ProductScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/ProductScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,154 @@
+.container {
+  display: flex;
+}
+
+.container img {
+  height: 100%;
+}
+
+.left-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.mainImg {
+  height: 500px;
+}
+
+.sideImgContainer {
+  height: 150px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.sideImg {
+  height: 100%;
+}
+
+.name-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.price-container {
+  display: flex;
+}
+
+.price-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: center;
+}
+
+.price-left h2 {
+  color: red;
+}
+
+.price-left img {
+  width: 40px;
+  height: 40px;
+}
+
+.price-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.price-right button {
+  height: 80%;
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: red;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 19px;
+}
+
+#name {
+  text-align: center;
+}
+
+#price {
+  color: red;
+}
+
+#icon {
+  width: 40px;
+  height: 40px;
+  filter: invert(0%) sepia(00%) saturate(8000%) hue-rotate(8deg) brightness(0%)
+    contrast(234%);
+}
+
+#table {
+  margin-top: 10px;
+}
+
+tr {
+  cursor: pointer;
+}
+
+.imgRow {
+  display: flex !important;
+  justify-content: center !important;
+}
+
+#sec {
+  width: 100px;
+  height: 100px;
+}
+
+table img {
+  width: 200px;
+}
+#tmp {
+  margin-left: 20px;
+}
+#tmp tr,
+#tmp td,
+#tmp th {
+  border: 1px solid black;
+  height: 40px;
+  padding: 3px;
+}
+
+@media only screen and (max-width: 750) {
+  #main {
+    height: 300px;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  #sec {
+    height: 50px;
+  }
+}
+
+@media only screen and (max-width: 768) {
+  #main {
+    height: 260px !important;
+  }
+}
+
+@media only screen and (max-width: 575) {
+  #main {
+    height: auto !important;
+  }
+}
Index: frontend/src/styles/SigninScreen.css
===================================================================
--- frontend/src/styles/SigninScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/styles/SigninScreen.css	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
@@ -0,0 +1,33 @@
+.pageContainer {
+  min-height: 100vh;
+}
+
+.main {
+  margin-top: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.formCointainer {
+  width: 400px;
+}
+
+.submitBtnContainer {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.registerParagraph {
+  margin-top: 10px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 440px) {
+  .formCointainer {
+    width: 100%;
+  }
+}
