diff --git a/practice/practice-02/src/assets/images/platform/background-tablet.png b/practice/practice-02/src/assets/images/platform/background-tablet.png
new file mode 100644
index 0000000..5cb6125
Binary files /dev/null and b/practice/practice-02/src/assets/images/platform/background-tablet.png differ
diff --git a/practice/practice-02/src/assets/images/service/background-tablet.png b/practice/practice-02/src/assets/images/service/background-tablet.png
new file mode 100644
index 0000000..ae824c2
Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-tablet.png differ
diff --git a/practice/practice-02/src/layouts/footer.pug b/practice/practice-02/src/layouts/footer.pug
index fbef4f5..e660ff7 100644
--- a/practice/practice-02/src/layouts/footer.pug
+++ b/practice/practice-02/src/layouts/footer.pug
@@ -1,43 +1,43 @@
-- var image_footer_path = "./assets/images/footer/";
-- var about_us_links = ["About Us", "Service Us", "Contact", "Company"];
-- var company_links = ["Partnership", "Terms of Use", "Privacy", "Sitemap"];
+- var image_footer_path = './assets/images/footer/';
+- var about_us_links = ['About Us', 'Service Us', 'Contact', 'Company'];
+- var company_links = ['Partnership', 'Terms of Use', 'Privacy', 'Sitemap'];
 
 footer.footer
   .footer__container
     .footer__introduction
-      p.footer__brand-name.primary-text Foodhut
+      p.footer__brand-name.text--primary Foodhut
       p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
       .footer__social-media
-        a.footer__social-link(href="javascript:void(0)")
+        a.footer__social-link(href='javascript:void(0)')
           img.facebook-icon(
-            src=image_footer_path + "facebook.png",
-            alt="Facebook icon"
+            src=image_footer_path + 'facebook.png',
+            alt='Facebook icon'
           )
-        a.footer__social-link(href="javascript:void(0)")
+        a.footer__social-link(href='javascript:void(0)')
           img.instagram-icon(
-            src=image_footer_path + "instagram.png",
-            alt="Instagram icon"
+            src=image_footer_path + 'instagram.png',
+            alt='Instagram icon'
           )
-        a.footer__social-link(href="javascript:void(0)")
+        a.footer__social-link(href='javascript:void(0)')
           img.twitter-icon(
-            src=image_footer_path + "twitter.png",
-            alt="Twitter icon"
+            src=image_footer_path + 'twitter.png',
+            alt='Twitter icon'
           )
     .footer__information
       .footer__about-us
-        h3.footer__heading.primary-text About Us
+        h3.footer__heading.text--primary About Us
           .footer__link
             each item in about_us_links 
-              a.link-text(href="javascript:void(0)")= item
+              a.link-text(href='javascript:void(0)')= item
       .footer_company
-        h3.footer__heading.primary-text Company
+        h3.footer__heading.text--primary Company
           .footer__link
             each item in company_links 
-              a.link-text(href="javascript:void(0)")= item
+              a.link-text(href='javascript:void(0)')= item
     .footer__contact
-      h3.footer__heading.primary-text Get in touch
+      h3.footer__heading.text--primary Get in touch
       p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-      form.footer__form(action="#")
-        input.footer__email-input(type="text", placeholder="Email")
-        button.footer__submit-btn(type="submit") Subscribe
+      form.footer__form(action='#')
+        input.footer__email-input(type='text', placeholder='Email')
+        button.footer__submit-btn(type='submit') Subscribe
   p.footer__copyright Copyright &copy 2022 Foodhut.
diff --git a/practice/practice-02/src/sections/menu.pug b/practice/practice-02/src/sections/menu.pug
index 0ef3ccc..fae4769 100644
--- a/practice/practice-02/src/sections/menu.pug
+++ b/practice/practice-02/src/sections/menu.pug
@@ -1,21 +1,21 @@
-- var avatar_img_path = "./assets/images/avatar/";
-- var food_img_path = "./assets/images/food/";
+- var avatar_img_path = './assets/images/avatar/';
+- var food_img_path = './assets/images/food/';
 
-- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
-- var list_image_food = [food_img_path + "food-1.png", food_img_path + "food-2.png", food_img_path + "food-3.png", food_img_path + "food-4.png", food_img_path + "food-5.png", food_img_path + "food-6.png", food_img_path + "food-7.png", food_img_path + "food-8.png"];
-- var default_food_data = { 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 list_category = ['Ramen', 'Breakfast', 'Lunch', 'Dinner', 'Maxican', 'Italian', 'Desserts', 'Drinks'];
+- var list_image_food = [food_img_path + 'food-1.png', food_img_path + 'food-2.png', food_img_path + 'food-3.png', food_img_path + 'food-4.png', food_img_path + 'food-5.png', food_img_path + 'food-6.png', food_img_path + 'food-7.png', food_img_path + 'food-8.png'];
+- var default_food_data = { 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' }] };
 
 section.menu
   .menu__container
     h2.menu__heading
-      span.primary-text Menu
-      = " That "
-      span.secondary-text Always
-      = " Make You Fall In "
-      span.primary-text Love
+      span.text--primary Menu
+      = ' That '
+      span.text--secondary Always
+      = ' Make You Fall In '
+      span.text--primary Love
     .menu__list-category
       each item in list_category
-        a.menu__category-item.link-text(href="javascript:void(0)")= item
+        a.menu__category-item.link-text(href='javascript:void(0)')= item
     .menu__card-list
       each url in list_image_food
         - var image_food = { imageUrl: url };
diff --git a/practice/practice-02/src/sections/offer.pug b/practice/practice-02/src/sections/offer.pug
index ade9599..0e9500b 100644
--- a/practice/practice-02/src/sections/offer.pug
+++ b/practice/practice-02/src/sections/offer.pug
@@ -1,24 +1,24 @@
-- var offer_img_path = "./assets/images/offer/";
-- var avatar_img_path = "./assets/images/avatar/";
-- var food_img_path = "./assets/images/food/";
+- var offer_img_path = './assets/images/offer/';
+- var avatar_img_path = './assets/images/avatar/';
+- var food_img_path = './assets/images/food/';
 
-- var food_1 = { imageUrl: food_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: food_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: food_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: food_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 food_1 = { imageUrl: food_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: food_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: food_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: food_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
     .offer__dot-background
       img(
-        src=offer_img_path + "dot-background.png",
-        alt="Dot background image"
+        src=offer_img_path + 'dot-background.png',
+        alt='Dot background image'
       )
     h2.offer__heading Today
-      = " "
-      span.primary-text Special
-      = " Offers"
+      = ' '
+      span.text--primary Special
+      = ' 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
       each val in list_food
@@ -26,7 +26,7 @@ section.offer
   .offer__rosemary-container
     picture
       source(
-        media="(min-width: 840px)",
-        srcset=offer_img_path + "rosemary-desktop.png"
+        media='(min-width: 840px)',
+        srcset=offer_img_path + 'rosemary-desktop.png'
       )
-      img(src=offer_img_path + "rosemary-mobile.png", alt="Rosemary image")
+      img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image')
diff --git a/practice/practice-02/src/sections/platform.pug b/practice/practice-02/src/sections/platform.pug
index 11a2eef..0fe4beb 100644
--- a/practice/practice-02/src/sections/platform.pug
+++ b/practice/practice-02/src/sections/platform.pug
@@ -1,4 +1,4 @@
-- var platform_image_path = "./assets/images/platform/";
+- var platform_image_path = './assets/images/platform/';
 - var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}];
 
 section.platform
@@ -6,43 +6,47 @@ section.platform
     .platform__image-container
       each item in list_food_image_path 
         picture.platform__image-food
-          source(media="(min-width: 1200px)", srcset=item.desktop_image_path)
-          img(src=item.mobile_image_path, alt="Food image")
+          source(media='(min-width: 1200px)', srcset=item.desktop_image_path)
+          img(src=item.mobile_image_path, alt='Food image')
       picture
         source(
-          media="(min-width: 1200px)",
-          srcset=platform_image_path + "background-desktop.png"
+          media='(min-width: 1200px)',
+          srcset=platform_image_path + 'background-desktop.png'
+        )
+        source(
+          media='(min-width: 600px)',
+          srcset=platform_image_path + 'background-tablet.png'
         )
         img.platform__background-img(
-          src=platform_image_path + "background-mobile.png",
-          alt="Background image"
+          src=platform_image_path + 'background-mobile.png',
+          alt='Background image'
         )
       picture
         source(
-          media="(min-width: 1200px)",
-          srcset=platform_image_path + "main-image-desktop.png"
+          media='(min-width: 1200px)',
+          srcset=platform_image_path + 'main-image-desktop.png'
         )
         img.platform__main-image(
-          src=platform_image_path + "main-image-mobile.png",
-          alt="The image introduce the platform"
+          src=platform_image_path + 'main-image-mobile.png',
+          alt='The image introduce the platform'
         )
     .platform__content
       h2.platform__heading It's Now
-        = " "
-        span.primary-text More Easy
-        = " to "
-        span.secondary-text Order
-        = " by Our Mobile "
-        span.primary-text App
+        = ' '
+        span.text--primary More Easy
+        = ' to '
+        span.text--secondary Order
+        = ' by Our Mobile '
+        span.text--primary App
       p.platform__description All you need to do is downlode one of the best delivery apps, make a and most companies are opting for mobile app devlopment for food delivery
       .platform__store-container
         .platform__google-store
           img.platform__google-store-image(
-            src=platform_image_path + "chplay.png",
-            alt="Google store image"
+            src=platform_image_path + 'chplay.png',
+            alt='Google store image'
           )
         .platform__app-store
           img.platform__app-store-image(
-            src=platform_image_path + "app-store.png",
-            alt="App store image"
+            src=platform_image_path + 'app-store.png',
+            alt='App store image'
           )
diff --git a/practice/practice-02/src/sections/service.pug b/practice/practice-02/src/sections/service.pug
index 2902cb1..0826381 100644
--- a/practice/practice-02/src/sections/service.pug
+++ b/practice/practice-02/src/sections/service.pug
@@ -1,4 +1,4 @@
-- var service_img_path = "./assets/images/service/";
+- var service_img_path = './assets/images/service/';
 - var list_service_category_1 = [{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"}];
 - var list_service_category_2 = [{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"}];
 - var list_service_category = [list_service_category_1, list_service_category_2];
@@ -9,38 +9,42 @@ section.service
     .service__img-container
       picture
         source(
-          media="(min-width: 1200px)",
-          srcset=service_img_path + "background-desktop.png"
+          media='(min-width: 1200px)',
+          srcset=service_img_path + 'background-desktop.png'
+        )
+        source(
+          media='(min-width: 600px)',
+          srcset=service_img_path + 'background-tablet.png'
         )
         img.service__background-img(
-          src=service_img_path + "background-mobile.png",
-          alt="Background image"
+          src=service_img_path + 'background-mobile.png',
+          alt='Background image'
         )
       picture
         source(
-          media="(min-width: 1200px)",
-          srcset=service_img_path + "main-character-desktop.png"
+          media='(min-width: 1200px)',
+          srcset=service_img_path + 'main-character-desktop.png'
         )
         img.service__main-img(
-          src=service_img_path + "main-character-mobile.png",
-          alt="Main character image"
+          src=service_img_path + 'main-character-mobile.png',
+          alt='Main character image'
         )
       picture
         source(
-          media="(min-width: 1200px)",
-          srcset=service_img_path + "vegetable-desktop.png"
+          media='(min-width: 1200px)',
+          srcset=service_img_path + 'vegetable-desktop.png'
         )
         img.service__vegetable-img(
-          src=service_img_path + "vegetable-mobile.png",
-          alt="Vegetable background image"
+          src=service_img_path + 'vegetable-mobile.png',
+          alt='Vegetable background image'
         )
     .service__content
       h2.service__heading We are
-        = " "
-        span.primary-text more
-        = " than "
-        span.secondary-text multiple
-        = " service"
+        = ' '
+        span.text--primary more
+        = ' than '
+        span.text--secondary multiple
+        = ' 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 list in list_service_category
@@ -49,7 +53,7 @@ section.service
               .service__category-item
                 img.service__icon-category(
                   src=item.url_icon,
-                  alt="Icon category"
+                  alt='Icon category'
                 )
                 p.service__name-category= item.content
-      a.service__btn.btn(href="javascript:void(0)") About us
+      a.service__btn.btn(href='javascript:void(0)') About us
diff --git a/practice/practice-02/src/sections/welcome.pug b/practice/practice-02/src/sections/welcome.pug
index 477a457..30d0fe1 100644
--- a/practice/practice-02/src/sections/welcome.pug
+++ b/practice/practice-02/src/sections/welcome.pug
@@ -93,14 +93,17 @@ section.welcome
         p.welcome__text-box-content People Trust us
       h1.welcome__heading We're
         = ' '
-        span.primary-text serious
+        span.text--primary serious
         = ' for '
-        span.primary-text food
+        span.text--primary food
         = ' & '
         .delivery-text-box
-          span.secondary-text delivery
+          span.text--secondary delivery
           .welcome__underline-img-container
-            img(src=welcome_img_path + 'underline.png', alt='Underline image')
+            img.welcome__underline-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.
diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss
index 72c0b7c..ec1f792 100644
--- a/practice/practice-02/src/styles/bases/_typography.scss
+++ b/practice/practice-02/src/styles/bases/_typography.scss
@@ -1,47 +1,47 @@
-$font-path: "../assets/fonts";
+$font-path: '../assets/fonts';
 
 %fs-100 {
   font-size: 100%;
 }
 
 @font-face {
-  font-family: "Sofia Pro";
-  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
-    url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
+  font-family: 'Sofia Pro';
+  src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
+    url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
   font-weight: 400;
 }
 
 @font-face {
-  font-family: "Sofia Pro";
-  src: url("#{$font-path}/sofia-pro-medium.woff2") format("woff2"),
-    url("#{$font-path}/sofia-pro-medium.ttf") format("truetype");
+  font-family: 'Sofia Pro';
+  src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
+    url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
   font-weight: 600;
 }
 
 @font-face {
-  font-family: "Sofia Pro";
-  src: url("#{$font-path}/sofia-pro-semi-bold.woff2") format("woff2"),
-    url("#{$font-path}/sofia-pro-semi-bold.ttf") format("truetype");
+  font-family: 'Sofia Pro';
+  src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'),
+    url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype');
   font-weight: 700;
 }
 
 @font-face {
-  font-family: "Sofia Pro";
-  src: url("#{$font-path}/sofia-pro-bold.woff2") format("woff2"),
-    url("#{$font-path}/sofia-pro-bold.ttf") format("truetype");
+  font-family: 'Sofia Pro';
+  src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
+    url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
   font-weight: 900;
 }
 
 @font-face {
-  font-family: "Inter";
-  src: url("#{$font-path}/inter.woff2") format("woff2"),
-    url("#{$font-path}/inter.ttf") format("truetype");
+  font-family: 'Inter';
+  src: url('#{$font-path}/inter.woff2') format('woff2'),
+    url('#{$font-path}/inter.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: "Poppins";
-  src: url("#{$font-path}/poppins-medium.woff2") format("woff2"),
-    url("#{$font-path}/poppins-medium.ttf") format("truetype");
+  font-family: 'Poppins';
+  src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
+    url('#{$font-path}/poppins-medium.ttf') format('truetype');
 }
 
 * {
@@ -59,13 +59,13 @@ $font-path: "../assets/fonts";
   color: $secondary-color;
 }
 
-.primary-text {
+.text--primary {
   @extend %fs-100;
 
   color: $primary-color;
 }
 
-.secondary-text {
+.text--secondary {
   @extend %fs-100;
 
   color: $secondary-color;
diff --git a/practice/practice-02/src/styles/layouts/_footer.scss b/practice/practice-02/src/styles/layouts/_footer.scss
index 410bb01..f3999de 100644
--- a/practice/practice-02/src/styles/layouts/_footer.scss
+++ b/practice/practice-02/src/styles/layouts/_footer.scss
@@ -69,15 +69,16 @@
   }
 
   &__form {
-    @include size(378px, auto);
+    @extend %d-flex;
+    @include flex-layout($justify: space-between, $gap: 15px, $wrap: wrap);
 
+    max-width: 338px;
     margin-top: 27px;
   }
 
   &__email-input {
     @include size(178px, 48px);
 
-    margin-right: 15px;
     border-radius: 40px;
     padding-left: 25px;
     border: none;
@@ -88,7 +89,7 @@
   &__submit-btn {
     @include size(118px, 50px);
 
-    border-radius: 40px;
+    border-radius: 30px;
     color: $white;
     background-color: $primary-color;
     border: none;
@@ -111,15 +112,15 @@
   }
 }
 
-@media screen and (min-width: 840px) {
+@media screen and (min-width: 600px) {
   .footer {
     &__container {
       display: grid;
       grid-template-columns: 1fr 1fr;
       max-width: $max-width;
       width: auto;
-      padding-inline: 90px;
       column-gap: 10px;
+      padding-inline: 10px;
     }
 
     &__introduction {
@@ -133,36 +134,52 @@
     &__contact {
       grid-column: -2;
     }
+
+    &__information {
+      @include flex-layout($justify: space-between);
+
+      max-width: 310px;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .footer {
+    &__container {
+      padding-inline: 30px;
+    }
   }
 }
 
 @media screen and (min-width: 1200px) {
   .footer {
     &__container {
-      grid-template-columns: auto auto auto;
+      grid-template-columns: 505px auto auto;
       padding-left: 135px;
-      column-gap: 40px;
+      column-gap: 30px;
     }
 
     &__introduction {
-      padding-top: 119px;
-      padding-left: 112px;
+      padding-top: 89px;
+      padding-left: unset;
     }
 
     &__information {
       @include flex-layout($justify: space-between, $gap: 30px);
 
       max-width: 304px;
-      padding-top: 155px;
-    }
-
-    &__description {
-      margin-top: 9px;
-      padding-left: 1px;
+      padding-top: 138px;
     }
 
     &__contact {
-      padding-top: 155px;
+      padding-top: 138px;
+      padding-left: 5px;
     }
   }
 }
+
+@media screen and (min-width: 1300px) {
+  .footer__introduction {
+    padding-left: 112px;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 85b066f..e480a09 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -2,7 +2,7 @@
   @extend %absolute;
   @include set-location($top: 0, $right: 0, $left: 0);
 
-  min-width: 428px;
+  width: 428px;
   margin: auto;
 }
 
@@ -21,6 +21,12 @@
   @include flex-layout($justify: space-between);
 }
 
+@media screen and (min-width: 600px) {
+  .header {
+    width: auto;
+  }
+}
+
 @media screen and (min-width: 840px) {
   .header {
     @include size(auto, auto);
diff --git a/practice/practice-02/src/styles/layouts/_menu.scss b/practice/practice-02/src/styles/layouts/_menu.scss
index d6c389c..4e187d6 100644
--- a/practice/practice-02/src/styles/layouts/_menu.scss
+++ b/practice/practice-02/src/styles/layouts/_menu.scss
@@ -72,7 +72,7 @@
   }
 }
 
-@media screen and (min-width: 840px) {
+@media screen and (min-width: 600px) {
   .menu {
     &__container {
       max-width: $max-width;
@@ -82,6 +82,16 @@
       max-width: 653px;
     }
 
+    &__card-list {
+      grid-auto-columns: unset;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 66px;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .menu {
     &__list-category {
       margin-inline: 59px;
     }
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index 1dcdc52..3d78f76 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -4,7 +4,7 @@
 
     position: relative;
     cursor: pointer;
-    top: -1px;
+    top: -5px;
 
     &:before {
       @extend .line-icon-menu;
diff --git a/practice/practice-02/src/styles/layouts/_platform.scss b/practice/practice-02/src/styles/layouts/_platform.scss
index 3797922..8e0d498 100644
--- a/practice/practice-02/src/styles/layouts/_platform.scss
+++ b/practice/practice-02/src/styles/layouts/_platform.scss
@@ -79,25 +79,44 @@
   }
 }
 
+@media screen and (min-width: 600px) {
+  .platform {
+    &__container {
+      max-width: $max-width;
+    }
+
+    &__image-container {
+      width: fit-content;
+      margin-inline: auto;
+    }
+
+    &__main-image {
+      @include set-location($top: 0, $left: 28px);
+    }
+
+    &__heading,
+    &__description {
+      max-width: unset;
+    }
+  }
+}
+
 @media screen and (min-width: 840px) {
   .platform {
     &__container {
-      @include flex-layout($direction: row-reverse, $align: center);
+      @include flex-layout(
+        $direction: row-reverse,
+        $align: center,
+        $justify: space-between
+      );
 
+      // width: 100%;
       display: flex;
-      max-width: $max-width;
-      max-height: 632px;
       padding-top: 50px;
     }
 
     &__image-container {
-      @include size(100%, 500px);
-    }
-
-    &__background-img {
-      @include set-location($top: 0, $right: 0);
-
-      position: absolute;
+      margin-inline: unset;
     }
 
     &__main-image {
@@ -140,43 +159,35 @@
     }
 
     &__image-container {
-      @include size(600px, 632px);
+      @include size(auto, 632px);
 
+      padding-top: 20px;
       text-align: right;
     }
 
     &__main-image {
-      @include set-location($top: 20px, $right: 105px);
-    }
-
-    &__background-img {
-      @include set-location($top: 20px, $right: 00px);
-    }
-
-    &__image-food:first-child {
-      @include set-location($bottom: -65px, $right: 263px);
-    }
-
-    &__image-food:nth-child(2) {
-      @include set-location($bottom: -40px, $right: 190px);
-    }
-
-    &__image-food:nth-child(3) {
-      @include set-location($bottom: -8px, $right: 125px);
+      @include set-location($top: 20px, $right: 107px);
     }
 
+    &__image-food:first-child,
+    &__image-food:nth-child(2),
+    &__image-food:nth-child(3),
     &__image-food:nth-child(4) {
-      @include set-location($bottom: 80px, $right: 80px);
+      display: none;
+    }
+
+    &__content {
+      padding-top: 33px;
     }
 
     &__heading,
     &__description,
     &__store-container {
-      padding-left: 47px;
+      padding-left: 45px;
     }
 
     &__description {
-      margin-top: 52px;
+      margin-top: 58px;
     }
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_service.scss b/practice/practice-02/src/styles/layouts/_service.scss
index a245409..addd166 100644
--- a/practice/practice-02/src/styles/layouts/_service.scss
+++ b/practice/practice-02/src/styles/layouts/_service.scss
@@ -22,29 +22,24 @@
   }
 
   &__img-container {
-    @include size(auto, 436.81px);
-
+    padding-top: 75px;
     position: relative;
-    padding-top: 80px;
-  }
-
-  &__background-img {
-    @extend %absolute;
-    @include set-location($top: 75px, $left: 0);
+    width: fit-content;
   }
 
   &__main-img {
     @extend %absolute;
-    @include set-location($top: 70px, $left: 35px);
+    @include set-location($top: 73px, $left: 35px);
   }
 
   &__vegetable-img {
     @extend %absolute;
     @include set-location($bottom: -10px, $left: 50px);
+    z-index: 4;
   }
 
   &__content {
-    margin-top: 65px;
+    margin-top: 61px;
     padding-inline: 24px;
 
     z-index: 1;
@@ -60,7 +55,6 @@
 
   &__description {
     margin-top: 29px;
-    margin-inline: auto;
     max-width: 381px;
   }
 
@@ -102,7 +96,27 @@
 }
 
 @media screen and (min-width: 600px) {
-  //TODO
+  .service {
+    max-width: $max-width;
+
+    &__main-img {
+      @include set-location($top: 30px, $left: 25px);
+    }
+
+    &__heading {
+      max-width: unset;
+    }
+
+    &__description {
+      max-width: 690px;
+    }
+
+    &__category {
+      @include flex-layout($direction: row, $gap: 10px);
+
+      margin-top: 29px;
+    }
+  }
 }
 
 @media screen and (min-width: 840px) {
@@ -122,6 +136,7 @@
       @include size($width: 100%);
 
       max-width: 460px;
+      margin-inline: auto;
     }
 
     &__img-container {
@@ -148,12 +163,12 @@
     }
 
     &__main-img {
-      @include set-location($top: 95px, $left: 35px);
+      @include set-location($top: 55px, $left: 25px);
       @extend %absolute_840;
     }
 
     &__vegetable-img {
-      @include set-location($bottom: 145px, $left: 50px);
+      @include set-location($bottom: 180px, $left: 50px);
       @extend %absolute_840;
     }
 
@@ -161,16 +176,6 @@
       max-width: 452px;
       margin: unset;
     }
-
-    &__description {
-      max-width: 690px;
-    }
-
-    &__category {
-      @include flex-layout($direction: row, $gap: 10px);
-
-      margin-top: 29px;
-    }
   }
 }
 
@@ -189,21 +194,27 @@
       @extend %absolute_1200;
     }
 
+    &__img-container {
+      margin-inline: unset;
+    }
+
     &__background-color {
-      @include set-location($left: -150px);
+      @include set-location($left: -151px);
       @include size(500px, 50%);
 
       border-radius: 50%;
       background: radial-gradient(
         circle,
-        rgba(253, 197, 94, 0.6),
-        rgba(253, 197, 94, 0.4),
+        rgba(253, 197, 94, 0.3),
         rgba(253, 197, 94, 0.2),
+        rgba(253, 197, 94, 0.1),
         rgba(253, 197, 94, 0.06),
         rgba(253, 197, 94, 0.01),
         rgba(253, 197, 94, 0),
         rgba(253, 197, 94, 0)
       );
+
+      clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
     }
 
     &__description {
@@ -227,8 +238,12 @@
     }
 
     &__content {
-      padding-top: 78px;
+      padding-top: 69px;
       padding-left: 29px;
     }
+
+    &__btn {
+      margin-top: 26px;
+    }
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index 11838f5..8181de4 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -1,7 +1,7 @@
 .delivery-text-box {
   position: relative;
   display: inline-block;
-  font-size: $fs-xxx-lg;
+  font-size: $fs-xx-lg;
 }
 
 .welcome {
@@ -63,7 +63,7 @@
 
   &__rate-card {
     @extend %absolute;
-    @include set-location($top: 103px, $right: 0);
+    @include set-location($top: 103px, $right: -5px);
   }
 
   &__background-banner {
@@ -142,7 +142,7 @@
   }
 
   &__heading {
-    margin-top: 12px;
+    margin-top: 16px;
     font-size: $fs-xx-lg;
     text-transform: capitalize;
     font-weight: 900;
@@ -150,11 +150,11 @@
 
   &__underline-img-container {
     @extend %absolute;
-    @include set-location($bottom: -27px, $left: 0);
+    @include set-location($bottom: -15px, $left: 0);
   }
 
   &__description {
-    margin-top: 40px;
+    margin-top: 36px;
     font-size: $fs-x-md;
     line-height: 140%;
     letter-spacing: -0.2px;
@@ -164,7 +164,7 @@
   &__search-form {
     @extend %d-flex;
 
-    margin-top: 32px;
+    margin-top: 30px;
     border-radius: 100px;
     border: 0.5px solid $black;
     max-width: 471px;
@@ -317,7 +317,17 @@
     }
 
     &__content {
-      width: fit-content;
+      width: unset;
+      padding-inline: unset;
+      padding-left: 24px;
+    }
+
+    &__underline-img-container {
+      @include set-location($bottom: 0px, $left: 0);
+    }
+
+    &__underline-img {
+      width: 180px;
     }
   }
 }
@@ -362,8 +372,12 @@
       line-height: 125%;
     }
 
+    &__underline-img {
+      width: unset;
+    }
+
     &__underline-img-container {
-      @include set-location($bottom: -25px, $left: 8px);
+      @include set-location($bottom: -10px, $left: 8px);
     }
 
     &__description {
@@ -432,11 +446,11 @@
     }
 
     &__lines-background {
-      @include set-location($top: -85px, $right: -98px);
+      @include set-location($top: -85px, $right: -96px);
     }
 
     &__review-card {
-      @include set-location($top: 160px, $left: -47px);
+      @include set-location($top: 160px, $left: 1px);
     }
 
     &__rate-card {
@@ -444,11 +458,11 @@
     }
 
     &__food-img:nth-child(2) {
-      @include set-location($bottom: 108px, $left: -68px);
+      @include set-location($bottom: 108px, $left: -18px);
     }
 
     &__food-img:nth-child(3) {
-      @include set-location($bottom: -29px, $left: 102);
+      @include set-location($bottom: -29px, $left: 151px);
     }
 
     &__food-img:nth-child(4) {
@@ -477,6 +491,10 @@
       padding-left: 1px;
     }
 
+    .delivery-text-box {
+      font-size: $fs-xxx-lg;
+    }
+
     &__description {
       margin-top: 29px;
     }