diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug
index 4b47151..1cfd9c6 100644
--- a/practice/practice-02/src/includes/mixins.pug
+++ b/practice/practice-02/src/includes/mixins.pug
@@ -1,3 +1,5 @@
+- var avatar_img_path = "./assets/images/avatar/";
+
 mixin foodItemCard(food)
   .card-item
     img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug
index 2af539f..7422c13 100644
--- a/practice/practice-02/src/index.pug
+++ b/practice/practice-02/src/index.pug
@@ -23,3 +23,4 @@ html(lang="en")
     include layouts/welcome
     include layouts/offer
     include layouts/service
+    include layouts/menu
diff --git a/practice/practice-02/src/layouts/menu.pug b/practice/practice-02/src/layouts/menu.pug
new file mode 100644
index 0000000..0cdd49a
--- /dev/null
+++ b/practice/practice-02/src/layouts/menu.pug
@@ -0,0 +1,21 @@
+- var image_menu_path = "./assets/images/menu/";
+- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
+- var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_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
+    .menu__list-category
+      each item in list_category
+        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 };
+
+        +foodItemCard({ ...image_food, ...default_food_data })
diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug
index e4cc937..2e6d4f9 100644
--- a/practice/practice-02/src/layouts/offer.pug
+++ b/practice/practice-02/src/layouts/offer.pug
@@ -1,5 +1,4 @@
 - 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" }] };