diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-1.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-1-item-1.png
rename to practice/practice-02/src/assets/images/avatar/avatar-1.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-2.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-2-item-1.png
rename to practice/practice-02/src/assets/images/avatar/avatar-2.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-3.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-3-item-1.png
rename to practice/practice-02/src/assets/images/avatar/avatar-3.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-4.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-1-item-2.png
rename to practice/practice-02/src/assets/images/avatar/avatar-4.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-5.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-2-item-2.png
rename to practice/practice-02/src/assets/images/avatar/avatar-5.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-6.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-3-item-2.png
rename to practice/practice-02/src/assets/images/avatar/avatar-6.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-7.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-1-item-3.png
rename to practice/practice-02/src/assets/images/avatar/avatar-7.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-8.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-2-item-3.png
rename to practice/practice-02/src/assets/images/avatar/avatar-8.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-9.png
similarity index 100%
rename from practice/practice-02/src/assets/images/offer/avatar-3-item-3.png
rename to practice/practice-02/src/assets/images/avatar/avatar-9.png
diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png
deleted file mode 100644
index bb4221f..0000000
Binary files a/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png and /dev/null differ
diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png
deleted file mode 100644
index 685124a..0000000
Binary files a/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png and /dev/null differ
diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png
deleted file mode 100644
index 974de73..0000000
Binary files a/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png and /dev/null differ
diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug
index f166d0a..4b47151 100644
--- a/practice/practice-02/src/includes/mixins.pug
+++ b/practice/practice-02/src/includes/mixins.pug
@@ -1,30 +1,17 @@
-- var values = [1, 2, 3];
-
-mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
-  .offer__card-item
-    img.offer__card-img(
-      src=offer_img_path + "item-card.png",
-      alt="Item card image"
-    )
-    img.offer__food-image(
-      src=offer_img_path + "food-" + itemFood + ".png",
-      alt="Food " + itemFood + " image"
-    )
-    span.offer__price= price + "$"
-    .offer__content-card
-      .offer__rate
-        .offer__avatar-container
-          each val in values 
-            img(
-              src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
-              alt="Avatar user rate",
-              class="offer__avatar-" + val
-            )
-        .offer__star-container
+mixin foodItemCard(food)
+  .card-item
+    img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
+    img.food-image(src=food.imageUrl, alt=food.name + " image")
+    span.price= food.price + "$"
+    .content-card
+      .rate
+        .avatar-container
+          if food.avatarImageList && food.avatarImageList.length > 0
+            each avatar, index in food.avatarImageList 
+              img.avatar(src=avatar.avatarUrl, alt="Avatar user rate")
+        .star-container
           img(src=offer_img_path + "star.png", alt="Star image")
-        span.offer__rate-point= "(" + ratePoint + ")"
-      span.offer__food-name= foodName
-      p.offer__food-description= foodDescription
-    a.offer__order-btn Order now
-
-//- mixin listCategory(iconUrl, content)
+        span.rate-point= "(" + food.ratePoint + ")"
+      p.food-name= food.foodName
+      p.food-description= food.foodDescription
+    a.order-btn.btn(href="javascript:void(0)") Order now
diff --git a/practice/practice-02/src/layouts/nav-menu.pug b/practice/practice-02/src/layouts/nav-menu.pug
index 5ffe22f..fad3302 100644
--- a/practice/practice-02/src/layouts/nav-menu.pug
+++ b/practice/practice-02/src/layouts/nav-menu.pug
@@ -6,5 +6,5 @@ nav.nav
   ul.nav-list
     each val in list
       li.nav-item
-        a.nav-link.no-underline(href="javascript:void(0)")= val
-a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
+        a.nav-link.link-text(href="javascript:void(0)")= val
+a.btn.nav-download-btn(href="javascript:void(0)") Download App
diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug
index f3291ab..e4cc937 100644
--- a/practice/practice-02/src/layouts/offer.pug
+++ b/practice/practice-02/src/layouts/offer.pug
@@ -1,4 +1,11 @@
 - var offer_img_path = "./assets/images/offer/";
+- var avatar_img_path = "./assets/images/avatar/";
+
+- var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+- var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] };
+- var food_3 = { imageUrl: offer_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] };
+- var food_4 = { imageUrl: offer_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+- var list_food = [food_1, food_2, food_3, food_4];
 
 section.offer
   .offer__container
@@ -13,10 +20,8 @@ section.offer
       = " Offers"
     p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
     .offer__card-list
-      +cardFoodItem(1, 10, "4.5", "Kebab", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
-      +cardFoodItem(2, 15, "4.8", "Chicken Tikka", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
-      +cardFoodItem(3, 8, "4.2", "Desi Chowmein", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
-      +cardFoodItem(4, 28, "5.0", "Chicken Chargha", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
+      each val in list_food
+        +foodItemCard(val)
   .offer__rosemary-container
     picture
       source(
diff --git a/practice/practice-02/src/layouts/service.pug b/practice/practice-02/src/layouts/service.pug
index 8322fbc..fd97f1c 100644
--- a/practice/practice-02/src/layouts/service.pug
+++ b/practice/practice-02/src/layouts/service.pug
@@ -1,6 +1,5 @@
 - var service_img_path = "./assets/images/service/";
-- var list_1 = [{icon : 1, content: "Online order"}, {icon : 3, content: "Pre-Reservation"}, {icon : 3, content: "Super chef"}];
-- var list_2 = [{icon : 2, content: "24/7 Service"}, {icon : 3, content: "Oragonized foodhut place"}, {icon : 3, content: "Clean Kitchen"}];
+- var list_service_category = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}, {url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
 
 section.service
   .service__container
@@ -42,13 +41,9 @@ section.service
         = " service"
       p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
       .service__category
-        each item in [list_1, list_2]
-          .service__category-list
-            each val in item
-              .service__category-item
-                img.service__icon-category(
-                  src=service_img_path + "icon-" + val.icon + ".png",
-                  alt="Icon category"
-                )
-                span.service__name-category= val.content
+        .service__category-list
+          each val in list_service_category
+            .service__category-item
+              img.service__icon-category(src=val.url_icon, alt="Icon category")
+              p.service__name-category= val.content
       a.service__btn.btn(href="javascript:void(0)") About us
diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug
index 5a9fc61..641ae51 100644
--- a/practice/practice-02/src/layouts/welcome.pug
+++ b/practice/practice-02/src/layouts/welcome.pug
@@ -1,100 +1,104 @@
 - var welcome_img_path = "./assets/images/welcome/";
 
 section.welcome
-  .welcome__banner
-    .welcome__banner-container
-      img.welcome__banner-img(
-        src=welcome_img_path + "welcome-image-mobile.png",
-        alt="Welcome banner image"
-      )
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "lines-background-desktop.png"
+  .welcome__container
+    .welcome__banner
+      .welcome__banner-container
+        img.welcome__banner-img(
+          src=welcome_img_path + "welcome-image-mobile.png",
+          alt="Welcome banner image"
         )
-        img.welcome__lines-background(
-          src=welcome_img_path + "lines-background-mobile.png",
-          alt="Lines background"
-        )
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "arrow-desktop.png",
-          alt="Arrow image"
-        )
-        img.welcome__arrow-img-up(
-          src=welcome_img_path + "arrow-mobile.png",
-          alt="Arrow image"
-        )
-      img.welcome__mint-img(
-        src=welcome_img_path + "mint.png",
-        alt="Mint image"
-      )
-  .welcome__content
-    .welcome__arrow-down-img-wrapper
-      img.welcome__arrow-img-down(
-        src=welcome_img_path + "arrow-desktop-2.png",
-        alt="Arrow image down"
-      )
-    .welcome__orange-img-wrapper
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "orange-desktop.png"
-        )
-        img(src=welcome_img_path + "orange.png", alt="Orange background image")
-    .welcome__text-box
-      .welcome__icon-container
-        img.welcome__love-icon(
-          src=welcome_img_path + "love-icon.png",
-          alt="Love icon"
-        )
-      .welcome__head-arrow-container
-        img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
-      p.welcome__text-box-content People Trust us
-    h1.welcome__heading We're
-      = " "
-      span.primary-text serious
-      = " for "
-      span.primary-text food
-      = " & "
-      .delivery-text-box
-        span.secondary-text delivery
-        .welcome__underline-img-container
-          img(src=welcome_img_path + "underline.png", alt="Underline image")
-      = "."
-
-    p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
-    form.welcome__search-form(action="#")
-      .welcome__search-icon-wrapper
-        img.welcome__search-icon(
-          src=welcome_img_path + "search-icon.png",
-          alt="Search icon"
-        )
-      input.welcome__text-input(type="text", placeholder="Search food")
-      button.welcome__submit-btn(type="submit")
-        img.welcome__search-icon-btn(
-          src=welcome_img_path + "search-icon-btn.svg",
-          alt="Search button image"
-        )
-    .welcome__action-container
-      a.welcome__download-btn.btn(href="javascript:void(0)") Download App
-      a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
-        .welcome__play-icon-wrapper
-          svg.welcome__play-icon(
-            width="12",
-            height="12",
-            viewBox="0 0 12 13",
-            fill="none",
-            xmlns="http://www.w3.org/2000/svg"
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "lines-background-desktop.png"
           )
-            path(
-              d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
-              fill="currentColor"
-            ) 
-        span.welcome__text-download-btn Watch Video
-    .welcome__slider-container
-      img.welcome__slider-img(
-        src=welcome_img_path + "slider.png",
-        alt="Slider image"
-      )
+          img.welcome__lines-background(
+            src=welcome_img_path + "lines-background-mobile.png",
+            alt="Lines background"
+          )
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "arrow-desktop.png",
+            alt="Arrow image"
+          )
+          img.welcome__arrow-img-up(
+            src=welcome_img_path + "arrow-mobile.png",
+            alt="Arrow image"
+          )
+        img.welcome__mint-img(
+          src=welcome_img_path + "mint.png",
+          alt="Mint image"
+        )
+    .welcome__content
+      .welcome__arrow-down-img-wrapper
+        img.welcome__arrow-img-down(
+          src=welcome_img_path + "arrow-desktop-2.png",
+          alt="Arrow image down"
+        )
+      .welcome__orange-img-wrapper
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "orange-desktop.png"
+          )
+          img(
+            src=welcome_img_path + "orange.png",
+            alt="Orange background image"
+          )
+      .welcome__text-box
+        .welcome__icon-container
+          img.welcome__love-icon(
+            src=welcome_img_path + "love-icon.png",
+            alt="Love icon"
+          )
+        .welcome__head-arrow-container
+          img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
+        p.welcome__text-box-content People Trust us
+      h1.welcome__heading We're
+        = " "
+        span.primary-text serious
+        = " for "
+        span.primary-text food
+        = " & "
+        .delivery-text-box
+          span.secondary-text delivery
+          .welcome__underline-img-container
+            img(src=welcome_img_path + "underline.png", alt="Underline image")
+        = "."
+
+      p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
+      form.welcome__search-form(action="#")
+        .welcome__search-icon-wrapper
+          img.welcome__search-icon(
+            src=welcome_img_path + "search-icon.png",
+            alt="Search icon"
+          )
+        input.welcome__text-input(type="text", placeholder="Search food")
+        button.welcome__submit-btn(type="submit")
+          img.welcome__search-icon-btn(
+            src=welcome_img_path + "search-icon-btn.svg",
+            alt="Search button image"
+          )
+      .welcome__action-container
+        a.welcome__download-btn.btn(href="javascript:void(0)") Download App
+        a.welcome__watch-video-link.link-text(href="javascript:void(0)")
+          .welcome__play-icon-wrapper
+            svg.welcome__play-icon(
+              width="12",
+              height="12",
+              viewBox="0 0 12 13",
+              fill="none",
+              xmlns="http://www.w3.org/2000/svg"
+            )
+              path(
+                d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+                fill="currentColor"
+              ) 
+          span.welcome__text-download-btn Watch Video
+      .welcome__slider-container
+        img.welcome__slider-img(
+          src=welcome_img_path + "slider.png",
+          alt="Slider image"
+        )
diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index 75cb637..b0fa2d4 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -1,3 +1,11 @@
+%d-flex {
+  display: flex;
+}
+
+%absolute {
+  position: absolute;
+}
+
 @mixin base-icon-menu {
   @include size(36px, 3px);
 
@@ -8,38 +16,38 @@
 
 @mixin icon-menu {
   @include base-icon-menu;
+  @extend %absolute;
 
   content: "";
-  position: absolute;
   right: 0;
 }
 
-@mixin flex-container(
-  $flex: false,
-  $justify-content: null,
-  $flex-direction: null,
-  $align-items: null,
-  $gap: null
+@mixin flex-layout(
+  $justify: null,
+  $align: null,
+  $direction: null,
+  $gap: null,
+  $wrap: null
 ) {
-  @if $flex {
-    display: flex;
+  @if $justify != null {
+    justify-content: $justify;
   }
 
-  @if $justify-content != null {
-    justify-content: $justify-content;
+  @if $align != null {
+    align-items: $align;
   }
 
-  @if $flex-direction != null {
-    flex-direction: $flex-direction;
-  }
-
-  @if $align-items != null {
-    align-items: $align-items;
+  @if $direction != null {
+    flex-direction: $direction;
   }
 
   @if $gap != null {
     gap: $gap;
   }
+
+  @if $wrap != null {
+    flex-wrap: $wrap;
+  }
 }
 
 @mixin size($width: null, $height: null) {
@@ -52,17 +60,12 @@
   }
 }
 
-@mixin setAbsoluteAndLocation(
-  $absolute: false,
+@mixin set-absolute-and-location(
   $top: null,
   $left: null,
   $right: null,
   $bottom: null
 ) {
-  @if $absolute {
-    position: absolute;
-  }
-
   @if $top != null {
     top: $top;
   }
diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss
index 0be5e68..2652adf 100644
--- a/practice/practice-02/src/styles/bases/_base.scss
+++ b/practice/practice-02/src/styles/bases/_base.scss
@@ -1,4 +1,6 @@
-.no-underline {
+.link-text {
+  font-size: $fs-md;
+  color: $black;
   text-decoration: none;
 }
 
diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
new file mode 100644
index 0000000..2d80572
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -0,0 +1,102 @@
+%align-center-col {
+  @include flex-layout($align: center, $direction: column);
+}
+
+.card-item {
+  @extend %d-flex, %align-center-col;
+  @include size(auto, 516px);
+
+  position: relative;
+}
+
+.food-image {
+  @extend %absolute;
+  @include set-absolute-and-location($top: 29px);
+
+  margin: auto;
+}
+
+.price {
+  @extend %absolute;
+  @include set-absolute-and-location($top: 176px, $right: 70px);
+  @include size(52px, 52px);
+
+  color: $white;
+  border: 4px solid $white;
+  border-radius: 50px;
+  background-color: $secondary-color;
+  font-size: $fs-md;
+  text-align: center;
+  line-height: 50px;
+}
+
+.content-card {
+  @extend %d-flex, %align-center-col, %absolute;
+  @include set-absolute-and-location($bottom: 60px);
+  @include size(100%, auto);
+}
+
+.rate {
+  @extend %d-flex;
+  @include flex-layout($align: center, $gap: 10px);
+}
+
+.star-container {
+  @include size(24px, 22px);
+}
+
+.avatar-container {
+  @include size(74px, 38px);
+
+  position: relative;
+}
+
+.avatar {
+  &:first-child {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 38px);
+
+    z-index: 2;
+  }
+
+  &:nth-child(2) {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 19px);
+
+    z-index: 1;
+  }
+
+  &:last-child {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 0);
+  }
+}
+
+.food-name {
+  margin-top: 30px;
+  color: $primary-color;
+  font-size: $fs-lg;
+  font-weight: 600;
+}
+
+.food-description {
+  @include size(100%, auto);
+
+  max-width: 243px;
+  margin-top: 16px;
+  text-align: center;
+  text-transform: capitalize;
+  color: $black;
+}
+
+.order-btn {
+  @extend %absolute;
+  @include set-absolute-and-location($bottom: 0px);
+
+  padding: 10px 20px;
+  text-transform: capitalize;
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}
diff --git a/practice/practice-02/src/styles/components/_toggle-menu.scss b/practice/practice-02/src/styles/components/_toggle-menu.scss
index 57cd366..74e7ceb 100644
--- a/practice/practice-02/src/styles/components/_toggle-menu.scss
+++ b/practice/practice-02/src/styles/components/_toggle-menu.scss
@@ -18,9 +18,9 @@
 }
 
 .toggle-menu {
+  @extend %absolute;
   @include size(36px, 27px);
 
-  position: absolute;
   top: 46px;
   right: 21px;
   cursor: pointer;
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 528e34d..9f71f26 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -1,18 +1,16 @@
 .header {
-  @include setAbsoluteAndLocation(
-    $absolute: true,
-    $top: 0,
-    $right: 0,
-    $left: 0
-  );
+  @extend %absolute;
+  @include set-absolute-and-location($top: 0, $right: 0, $left: 0);
 
   max-width: 428px;
   margin: auto;
 }
 
 .header-container {
-  @include flex-container(true, space-between, $align-items: center);
+  @extend %d-flex;
+  @include flex-layout($align: center);
 
+  justify-content: space-between;
   position: relative;
   max-width: 428px;
   min-width: $min-width;
@@ -21,7 +19,8 @@
 }
 
 .header-content {
-  @include flex-container(true, space-between);
+  @extend %d-flex;
+  @include flex-layout($justify: space-between);
 }
 
 @media screen and (min-width: 840px) {
@@ -30,17 +29,18 @@
   }
 
   .header-container {
+    @include flex-layout($gap: 10px);
+
     padding-top: 32px;
     padding-left: 70px;
     padding-right: 61px;
-    gap: 10px;
     max-width: 1309px;
   }
 
   .header-content {
+    @include flex-layout($gap: 10px);
     @include size(100%, auto);
 
-    gap: 10px;
     max-width: 918px;
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index 3194837..70ab433 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -1,10 +1,10 @@
 .nav-list {
+  @extend %absolute;
   @include size(max-content, auto);
 
   display: none;
   list-style: none;
   transition: 0.1s;
-  position: absolute;
   border: 2px solid $primary-color;
   top: 100px;
   right: 25px;
@@ -53,12 +53,12 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(true, space-between, column);
+    @include flex-layout($justify: space-between, $direction: row, $gap: 10px);
 
+    display: flex;
     position: unset;
-    flex-direction: row;
     border: none;
-    max-width: 600px;
+    max-width: 660px;
     margin: unset;
     background-color: transparent;
   }
@@ -66,6 +66,7 @@
   .nav-item {
     border-bottom: none;
     padding: 0;
+    text-align: center;
 
     &:hover {
       background-color: unset;
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index ea6454d..0c33500 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -4,11 +4,8 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container(
-      true,
-      $justify-content: center,
-      $flex-direction: column
-    );
+    @extend %d-flex;
+    @include flex-layout($justify: center, $direction: column);
 
     max-width: 380px;
     margin: auto;
@@ -17,7 +14,8 @@
   }
 
   &__dot-background {
-    @include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 168px, $left: 0px);
 
     display: none;
   }
@@ -40,112 +38,24 @@
   }
 
   &__card-list {
-    display: grid;
+    @extend %d-flex;
+    @include flex-layout($wrap: nowrap, $gap: 70px);
+
+    padding-inline: 35px;
     padding-top: 65px;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
-  &__card-item {
-    @include flex-container(
-      true,
-      $align-items: center,
-      $flex-direction: column
-    );
-    @include size(auto, 516px);
-
-    position: relative;
-  }
-
-  &__food-image {
-    @include setAbsoluteAndLocation(true, $top: 29px);
-
-    margin: auto;
-  }
-
-  &__price {
-    @include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
-    @include size(52px, 52px);
-
-    color: $white;
-    border: 4px solid $white;
-    border-radius: 50px;
-    background-color: $secondary-color;
-    font-size: $fs-md;
-    text-align: center;
-    line-height: 50px;
-  }
-
-  &__content-card {
-    @include setAbsoluteAndLocation(true, $bottom: 60px);
-    @include size(100%, auto);
-    @include flex-container(
-      true,
-      $align-items: center,
-      $flex-direction: column
-    );
-  }
-
-  &__rate {
-    @include flex-container(true, $align-items: center, $gap: 10px);
-  }
-
-  &__avatar-container {
-    position: relative;
-    @include size(74px, 38px);
-  }
-
-  &__avatar {
-    &-1 {
-      @include setAbsoluteAndLocation(true, $left: 38px);
-      z-index: 2;
-    }
-
-    &-2 {
-      @include setAbsoluteAndLocation(true, $left: 19px);
-      z-index: 1;
-    }
-
-    &-3 {
-      @include setAbsoluteAndLocation(true, $left: 0);
-    }
-  }
-
-  &__food-name {
-    margin-top: 30px;
-    color: $primary-color;
-    font-size: $fs-lg;
-    font-weight: 600;
-  }
-
-  &__food-description {
-    @include size(100%, auto);
-
-    max-width: 243px;
-    margin-top: 16px;
-    text-align: center;
-    text-transform: capitalize;
-    color: $black;
-  }
-
-  &__order-btn {
-    @include setAbsoluteAndLocation(true, $bottom: 0px);
-
-    padding: 10px 20px;
-    background-color: $primary-color;
-    border-radius: 100px;
-    color: $white;
-    text-transform: capitalize;
-  }
-
   &__rosemary-container {
-    @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: -120px, $right: 0);
+
     z-index: 0;
   }
 }
@@ -158,23 +68,15 @@
       max-width: $max-width;
     }
 
-    &__food-image {
-      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-    }
-
     &__card-list {
-      @include flex-container(
-        true,
-        $align-items: center,
-        $gap: 18px,
-        $justify-content: center
+      @include flex-layout(
+        $align: center,
+        $justify: center,
+        $wrap: wrap,
+        $gap: 18px
       );
-      row-gap: 30px;
-      flex-wrap: wrap;
-    }
 
-    &__price {
-      @include setAbsoluteAndLocation($top: 176px, $right: 70px);
+      row-gap: 30px;
     }
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index 4b51df9..c0a6825 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -4,20 +4,25 @@
 }
 
 .welcome {
-  @include flex-container(true, center, column);
-  margin: auto;
-  max-width: 428px;
-  padding-top: 117px;
   background: linear-gradient(
     180deg,
     rgba(245, 71, 72, 0.06) 0%,
     rgba(245, 71, 72, 0) 100%
   );
 
+  &__container {
+    @extend %d-flex;
+    @include flex-layout($justify: center, $direction: column);
+
+    margin: auto;
+    max-width: 428px;
+    padding-top: 117px;
+  }
   // Start banner
   &__banner-container {
+    @extend %d-flex;
     @include size(428px, auto);
-    @include flex-container(true, center, column);
+    @include flex-layout($justify: center, $direction: column);
 
     position: relative;
   }
@@ -27,25 +32,28 @@
   }
 
   &__lines-background {
-    @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($top: -76px, $right: 0);
     @include size(187px, 430px);
   }
 
   &__arrow-img-up {
-    @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
-
+    @extend %absolute;
+    @include set-absolute-and-location($top: -15px, $right: 50px);
     @include size(43px, 215px);
   }
 
   &__mint-img {
-    @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: 100px, $right: 0);
   }
   // End banner
 
   // Start content
   &__content {
-    @include flex-container(true, $flex-direction: column);
     @include size(calc(428px - 48px), auto);
+    @extend %d-flex;
+    @include flex-layout($direction: column);
 
     position: relative;
     padding-top: 63.37px;
@@ -53,15 +61,19 @@
   }
 
   &__arrow-down-img-wrapper {
+    @extend %absolute;
+
     display: none;
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 0, $right: 35px);
   }
 
   &__text-box {
-    @include flex-container(true, $align-items: center, $gap: 6px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 6px);
     @include size(fit-content);
 
     background-color: #feeae9;
@@ -84,7 +96,8 @@
 
   &__head-arrow-container {
     @include size(13px, 7.3px);
-    @include setAbsoluteAndLocation($absolute: true, $right: 107px);
+    @extend %absolute;
+    @include set-absolute-and-location($right: 107px);
   }
 
   &__heading {
@@ -96,11 +109,8 @@
   }
 
   &__underline-img-container {
-    @include setAbsoluteAndLocation(
-      $absolute: true,
-      $bottom: -20px,
-      $left: 0px
-    );
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: -20px, $left: 0px);
   }
 
   &__description {
@@ -112,7 +122,7 @@
   }
 
   &__search-form {
-    @include flex-container(true);
+    @extend %d-flex;
 
     margin-top: 32px;
     border-radius: 100px;
@@ -154,7 +164,8 @@
   }
 
   &__action-container {
-    @include flex-container(true, $justify-content: space-between);
+    @extend %d-flex;
+    @include flex-layout($justify: space-between, $gap: 10px);
 
     width: 100%;
     margin-top: 44px;
@@ -162,10 +173,10 @@
   }
 
   &__watch-video-link {
-    @include flex-container(true, $align-items: center, $gap: 21px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 21px);
 
     position: relative;
-
     &:hover {
       .welcome__play-icon-wrapper {
         transform: scale(1.2);
@@ -183,8 +194,9 @@
   }
 
   &__play-icon-wrapper {
+    @extend %absolute;
     @include size(12px, 17px);
-    position: absolute;
+
     padding: 17.5px 20px;
     border-radius: 50px;
     background-color: $white;
@@ -208,6 +220,8 @@
   }
 
   &__slider-container {
+    @extend %absolute;
+
     display: none;
   }
   // End content
@@ -219,15 +233,17 @@
 
 @media screen and (min-width: 840px) {
   .welcome {
-    @include flex-container(
-      $flex-direction: row-reverse,
-      $align-items: center,
-      $justify-content: space-between
-    );
+    &__container {
+      @include flex-layout(
+        $direction: row-reverse,
+        $align: center,
+        $justify: space-between
+      );
 
-    padding-top: 130px;
-    width: 100%;
-    max-width: $max-width;
+      padding-top: 130px;
+      width: 100%;
+      max-width: $max-width;
+    }
 
     // Start banner
     &__banner-img {
@@ -237,13 +253,14 @@
     }
 
     &__lines-background {
-      @include setAbsoluteAndLocation($top: -150px, $right: 0px);
+      @include set-absolute-and-location($top: -150px, $right: 0px);
       @include size(313px, 718px);
     }
 
     &__arrow-img-up {
       @include size(117px, 315px);
-      @include setAbsoluteAndLocation($top: -40px, $right: 5px);
+      @include set-absolute-and-location($top: -40px, $right: 5px);
+
       transition: 0.2s;
     }
 
@@ -262,13 +279,15 @@
     // Start content
     &__content {
       @include size(auto, auto);
+
       padding-left: 70px;
       padding-right: 0px;
       max-width: 560px;
     }
 
     &__orange-img-wrapper {
-      @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+      @include set-absolute-and-location($top: 170px, $right: -50px);
+
       transition: 0.2s;
     }
 
@@ -278,7 +297,7 @@
     }
 
     &__underline-img-container {
-      @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+      @include set-absolute-and-location($bottom: -25px, $left: 8px);
     }
 
     &__description {
@@ -298,11 +317,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation(
-        $absolute: true,
-        $top: -50px,
-        $left: 220px
-      );
+      @include set-absolute-and-location($top: -50px, $left: 220px);
 
       display: block;
       transition: 0.2s;
@@ -314,11 +329,7 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation(
-        $absolute: true,
-        $bottom: -135px,
-        $left: 65px
-      );
+      @include set-absolute-and-location($bottom: -135px, $left: 65px);
     }
 
     // End content
@@ -332,15 +343,15 @@
     }
 
     &__arrow-img-up {
-      @include setAbsoluteAndLocation($top: 8px, $right: 62px);
+      @include set-absolute-and-location($top: 8px, $right: 62px);
     }
 
     &__orange-img-wrapper {
-      @include setAbsoluteAndLocation($top: 110px, $right: -50px);
+      @include set-absolute-and-location($top: 110px, $right: -50px);
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -75px, $left: 230px);
+      @include set-absolute-and-location($top: -75px, $left: 230px);
     }
   }
 }
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 33edc07..05fa2b1 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -11,6 +11,7 @@
 @import "./components/button";
 @import "./components/toggle-menu";
 @import "./components/logo";
+@import "./components/card-item";
 
 // Layouts
 @import "./layouts/navbar";