diff --git a/public/css/app.css b/public/css/app.css
index 5870378..bd170ce 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -425,14 +425,19 @@ section .login input {
 section #deleteCartButton {
   color: #fe5f1e;
 }
+section input::-webkit-outer-spin-button,
+section input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 
 section.menu img {
-  transition: transform 0.3s;
+  transition: transform 0.2s;
   z-index: -1;
 }
 
 section.menu img:hover {
-  transform: scale(1.2);
+  transform: scale(1.1);
   z-index: -1;
 }
 
diff --git a/public/img/hero-pizza2.png b/public/img/hero-pizza2.png
deleted file mode 100644
index 0f5ad1a..0000000
Binary files a/public/img/hero-pizza2.png and /dev/null differ
diff --git a/public/img/piz1.jpg b/public/img/piz1.jpg
deleted file mode 100644
index 7ddf9a6..0000000
Binary files a/public/img/piz1.jpg and /dev/null differ
diff --git a/public/img/piz2.jpg b/public/img/piz2.jpg
deleted file mode 100644
index b94f3d5..0000000
Binary files a/public/img/piz2.jpg and /dev/null differ
diff --git a/public/img/piz3.jpg b/public/img/piz3.jpg
deleted file mode 100644
index 385239a..0000000
Binary files a/public/img/piz3.jpg and /dev/null differ
diff --git a/public/img/piz4.jpg b/public/img/piz4.jpg
deleted file mode 100644
index ce9ea5b..0000000
Binary files a/public/img/piz4.jpg and /dev/null differ
diff --git a/src/scss/app.scss b/src/scss/app.scss
index a75f439..19c7c51 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -108,15 +108,21 @@ section {
   #deleteCartButton {
     color: $primary;
   }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
 
 // Hover Pizza
 section.menu img {
-  transition: transform 0.3s;
+  transition: transform 0.2s;
   z-index: -1;
 }
 section.menu img:hover {
-  transform: scale(1.2);
+  transform: scale(1.1);
   z-index: -1;
 }
 
diff --git a/src/views/customers/cart.ejs b/src/views/customers/cart.ejs
index 867c718..9a5954c 100644
--- a/src/views/customers/cart.ejs
+++ b/src/views/customers/cart.ejs
@@ -10,7 +10,7 @@
             <div class="pizza-list">
                 <% for(let pizza of Object.values(session.cart.items)) { %>
                     <div class="flex items-center my-8">
-                        <img class="w-24" src="/img/<%= pizza.item.image %>" alt="">
+                        <img class="w-24" src="<%= pizza.item.image %>" alt="">
                         <div class="ml-4 flex-1">
                             <h1>
                                 <%= pizza.item.name %>
@@ -35,13 +35,13 @@
                 <div>
                     <span class="font-bold text-lg">Total Amount: </span>
                     <span class="amount text-2xl font-bold md:ml-2">
-                        <%= session.cart.totalPrice %>$
+                        <%= session.cart.totalPrice %> $
                     </span>
                 </div>
                 <% if(user) { %>
                     <div>
                         <form action="/customer/orders" method="POST" class="mt-12">
-                            <input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="text"
+                            <input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="number"
                                 placeholder="Phone number" required>
                             <input name="address" class="border border-gray-400 p-2 w-1/2" type="text"
                                 placeholder="Address" required>
diff --git a/src/views/home.ejs b/src/views/home.ejs
index 5f3b3a2..5bc0f85 100644
--- a/src/views/home.ejs
+++ b/src/views/home.ejs
@@ -16,32 +16,120 @@
   </div>
 </section>
 
-<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2" id="menu">
+<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2 z-10" id="menu">
   <h1 class="text-xl font-bold mb-16 text-center md:text-3xl">Menu</h1>
-  <div
-    class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-    <% pizzas.forEach((pizza)=> { %>
-      <div class="w-66">
-        <img class="mb-4" src="/img/<%= pizza.image %>" alt="">
-        <div class="text-center">
-          <h2 class="mb-4 text-lg">
-            <%= pizza.name %>
-          </h2>
-          <span class="size py-1 px-4 uppercase text-xs rounded-full">
-            <%= pizza.size %>
-          </span>
-          <div class="flex items-center justify-around mt-6">
-            <span class="font-bold text-lg">
-              <%= pizza.price %>$
-            </span>
-            <button data-pizza="<%= JSON.stringify(pizza) %>"
-              class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
-              <span>+</span>
-              <span class="ml-4">Add</span>
-            </button>
+  <div class="flex flex-wrap" id="tabs-id">
+    <div class="w-full">
+      <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
+        <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+          <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-yellow-600 cursor-pointer"
+            onclick="changeAtiveTab(event,'tab-pizza')">
+            Pizzas
+          </a>
+        </li>
+        <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+          <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal  bg-white cursor-pointer"
+            onclick="changeAtiveTab(event,'tab-drink')">
+            Drinks
+          </a>
+        </li>
+      </ul>
+      <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
+        <div class="px-4 py-5 flex-auto">
+          <div class="tab-content tab-space">
+            <div class="block" id="tab-pizza">
+              <!-- Pizza -->
+              <div
+                class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                <% pizzas.forEach((pizza)=> { %>
+                  <% if(pizza.name.includes('Pizza') ) { %>
+                    <div class="w-66">
+                      <img class="mb-4" src="<%= pizza.image %>" alt="">
+                      <div class="text-center">
+                        <h2 class="mb-4 text-lg">
+                          <%= pizza.name %>
+                        </h2>
+                        <span class="size py-1 px-4 uppercase text-xs rounded-full">
+                          <%= pizza.size %>
+                        </span>
+                        <div class="flex items-center justify-around mt-6">
+                          <span class="font-bold text-lg">
+                            <%= pizza.price %> $
+                          </span>
+                          <button data-pizza="<%= JSON.stringify(pizza) %>"
+                            class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
+                            <span>+</span>
+                            <span class="ml-4">Add</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <% } %>
+                      <% }) %>
+              </div>
+              <!-- End pizza  -->
+            </div>
+            <div class="hidden" id="tab-drink">
+              <!-- Drinks -->
+              <div
+                class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                <% pizzas.forEach((pizza)=> { %>
+
+                  <% if(pizza.name.includes("Drink") ) { %>
+                    <div class="w-66">
+                      <img class="mb-4" src="<%= pizza.image %>" alt="">
+                      <div class="text-center">
+                        <h2 class="mb-4 text-lg">
+                          <%= pizza.name %>
+                        </h2>
+                        <span class="size py-1 px-4 uppercase text-xs rounded-full">
+                          <%= pizza.size %>
+                        </span>
+                        <div class="flex items-center justify-around mt-6">
+                          <span class="font-bold text-lg">
+                            <%= pizza.price %> $
+                          </span>
+                          <button data-pizza="<%= JSON.stringify(pizza) %>"
+                            class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
+                            <span>+</span>
+                            <span class="ml-4">Add</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <% } %>
+                      <% }) %>
+              </div>
+              <!-- End drinks  -->
+            </div>
           </div>
         </div>
       </div>
-      <% }) %>
+    </div>
   </div>
-</section>
\ No newline at end of file
+</section>
+<script type="text/javascript">
+  function changeAtiveTab(event, tabID) {
+    let element = event.target;
+    while (element.nodeName !== "A") {
+      element = element.parentNode;
+    }
+    ulElement = element.parentNode.parentNode;
+    aElements = ulElement.querySelectorAll("li > a");
+    tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
+    for (let i = 0; i < aElements.length; i++) {
+      aElements[i].classList.remove("text-white");
+      aElements[i].classList.remove("bg-yellow-600");
+      aElements[i].classList.add("text-black");
+      aElements[i].classList.add("bg-white");
+      tabContents[i].classList.add("hidden");
+      tabContents[i].classList.remove("block");
+    }
+    element.classList.remove("text-white");
+    element.classList.remove("bg-white");
+    element.classList.add("text-white");
+    element.classList.add("bg-yellow-600");
+    document.getElementById(tabID).classList.remove("hidden");
+    document.getElementById(tabID).classList.add("block");
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/layout.ejs b/src/views/layout.ejs
index 2328baf..6e5f95d 100644
--- a/src/views/layout.ejs
+++ b/src/views/layout.ejs
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <nav class="sticky top-0">
+  <nav class="sticky top-0 z-20">
     <div class="mx-auto flex items-center justify-between py-4 container pl-3 md:pl-0">
       <a class="hidden md:contents" href="/">
         <img src="/img/logo.png" alt="logo" /></a>