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;
+  }
+}
