diff --git a/src/assets/bouquet.jpg b/src/assets/bouquet.jpg
new file mode 100644
index 0000000..1ee747a
Binary files /dev/null and b/src/assets/bouquet.jpg differ
diff --git a/src/assets/food.jfif b/src/assets/food.jfif
new file mode 100644
index 0000000..76a5f28
Binary files /dev/null and b/src/assets/food.jfif differ
diff --git a/src/assets/food.jpg b/src/assets/food.jpg
new file mode 100644
index 0000000..329092f
Binary files /dev/null and b/src/assets/food.jpg differ
diff --git a/src/assets/foodorder.jpg b/src/assets/foodorder.jpg
new file mode 100644
index 0000000..0d186b4
Binary files /dev/null and b/src/assets/foodorder.jpg differ
diff --git a/src/assets/veg.png b/src/assets/veg.png
new file mode 100644
index 0000000..e76380c
Binary files /dev/null and b/src/assets/veg.png differ
diff --git a/src/components/Buffet.vue b/src/components/Buffet.vue
index 3fcf03f..34da862 100644
--- a/src/components/Buffet.vue
+++ b/src/components/Buffet.vue
@@ -143,7 +143,7 @@ export default{
 }
 
 #wrapper {
-  margin-top:5rem;
+  margin-top:1.5rem;
   width: 90%;
   max-width:80rem;
 } 
diff --git a/src/components/booking-request.vue b/src/components/booking-request.vue
index 86d083f..49758fb 100644
--- a/src/components/booking-request.vue
+++ b/src/components/booking-request.vue
@@ -15,45 +15,29 @@
                                     <label for="email" class="form__label">Email address</label>
                                 </div>
                              
-                                    <div class="u-center-text">
-                    <a href="#popup" class="btn-text">See all rooms &rarr;</a>
-                </div>
-                               <div class="row roomsrow">
+                                  <div class="row roomsrow">
                                 <div class="form__group col-1-of-4">
-                                    <input type="number" class="form__input" placeholder="Number of people" id="number" required min="1" max="3" v-model="rooms">
-                                </div>
-                                <div class="form__group roomtype col-1-of-4">
-                                    <select class="room-types" v-if="rooms==1||rooms==2||rooms==3" required>
-                                        <option value="0">R-1</option>
-                                        <option value="1">Queen</option>
-                                        <option value="2">King</option>
-                                        <option value="3">Executive Suite</option>
-                                        <option value="4">Cabana</option>
-                                    </select>
+                                    <input type="number" class="form__input roomno" placeholder="Number of rooms" required min="1" max="3" v-model="rooms" id="numberofrooms">
                                 </div>
-                                <div class="form__group roomtype col-1-of-4">
-                                    <select class="room-types" v-if="rooms==2||rooms==3" required>
-                                        <option value="0">R-2</option>
-                                        <option value="1">Queen</option>
-                                        <option value="2">King</option>
-                                        <option value="3">Executive Suite</option>
-                                        <option value="4">Cabana</option>
-                                    </select>
+                                   </div>
+                <div class="roomdetails">
+                    <a href="#popup" class="btn-text">See all rooms &rarr;</a>
+                    <a href="#popup" class="btn-text">Book room(s) &rarr;</a>
+                </div>
+
+
+                                <div class="form__group numberpeople">
+                                    <input type="number" class="form__input" placeholder="Number of adults" id="number1" required min="1" max="20">
+                                    <label for="number1" class="form__label">Number of adults</label>
                                 </div>
-                                <div class="form__group roomtype col-1-of-4 thirdroom">
-                                    <select class="room-types" v-if="rooms==3" required>
-                                        <option value="0">R-3</option>
-                                        <option value="1">Queen</option>
-                                        <option value="2">King</option>
-                                        <option value="3">Executive Suite</option>
-                                        <option value="4">Cabana</option>
-                                    </select>
+                                <div class="form__group numberpeople">
+                                    <input type="number" class="form__input" placeholder="Number of children" id="number2" required min="1" max="20">
+                                    <label for="number2" class="form__label">Number of children</label>
                                 </div>
-</div>
+                                <div class="form_group">
+                                    <input placeholder="Check-in Date" class="textbox-n" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" id="date1" required>
+                                    <input placeholder="Check-out Date" class="textbox-n" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" id="date2" required>
 
-                                <div class="form__group numberpeople">
-                                    <input type="number" class="form__input" placeholder="Number of people" id="number" required min="1" max="20">
-                                    <label for="number" class="form__label">Number of people</label>
                                 </div>
                                 <div class="form__group">
                                     <button class="btn btn--blue">Next step &rarr;</button>
@@ -119,8 +103,9 @@ export default {
 
 <style lang="scss" scoped>
 .section-book {
-    padding: 4.5rem 0;
+    padding: 1.4rem 0;
     background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
+    background-size:cover;
 }
 
 .book {
@@ -133,12 +118,12 @@ export default {
     border-radius: 3px;
     box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
     margin: 0 auto;
-    height: 38rem;
-    width:80rem;
+    height: 44.5rem;
+    width:90rem;
 
     &__form {
         width: 50%;
-        padding: 6rem;
+        padding: 3rem;
     }
 }
 .booking-heading{
@@ -208,8 +193,8 @@ export default {
 
 .form {
     &__group:not(:last-child) {
-        margin-bottom: 2rem;
-        margin-top:1rem;
+        margin-bottom: 0.5rem;
+        margin-top:0.7rem;
         padding:0;
     }
 
@@ -247,6 +232,7 @@ export default {
         font-weight: 700;
         margin-left: 1.5rem;
         margin-top: .5rem;
+        margin-bottom:0.5rem;
         display: block;
         transition: all .3s;
     }
@@ -350,9 +336,8 @@ export default {
 
     &--blue {
         background-color: $color-primary;
+        margin-top:1rem;
         color: $color-white;
-        margin-top:-2rem;
-
         &::after {
             background-color: $color-primary;
         }
@@ -376,21 +361,10 @@ export default {
         animation-fill-mode: backwards;
     }
 }
-.room-types{
-    border:none;
-    padding:1rem;
-    color:$color-grey-dark-2;
-    width:35%;
-    &:focus{
-        outline:none;
-    }
-}
 .btn-text {
     &:link,
     &:visited {
-        position:absolute;
-        top:20rem;
-        left:14.5rem;
+        margin: 0.7rem auto 0.7rem auto;
         font-size: $default-font-size;
         color: $color-primary;
         display: inline-block;
@@ -398,6 +372,7 @@ export default {
         border-bottom: 1px solid $color-primary;
         padding: 3px;
         transition: all .2s;
+        margin-right:2rem;
     }
 
     &:hover {
@@ -515,10 +490,6 @@ export default {
 .roomsrow{
     padding:0;
 }
-.room-types{
-    width:90%;
-    height:3.7rem;
-}
 .thirdroom
 {
     margin-top:1rem;
@@ -528,9 +499,22 @@ export default {
     top:40rem;
     left:20rem;
 }
+.textbox-n{
+    margin-right:0.8rem;
+    width:35%;
+    padding:0.8rem;
+      border:none;
+    &:focus{
+        border:none;
+    }
+}
+.roomno{
+    width:15rem;
+}
 .u-center-text { text-align: center; }
 
 .u-margin-bottom-small { margin-bottom: 1.5rem; }
 .u-margin-bottom-medium { margin-bottom: 4rem; }
 .u-margin-bottom-big { margin-bottom: 8rem; }
+
 </style>
\ No newline at end of file
diff --git a/src/components/checkout.vue b/src/components/checkout.vue
new file mode 100644
index 0000000..9618438
--- /dev/null
+++ b/src/components/checkout.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <navbar/>
+    <div class="checkout-main">
+        <div class="container checkout-form">
+       <div class="row my-row">
+           <div class="col-lg-6 col-md-12 col-sm-12 my-col">
+             <h1 class="heading-secondary">Receipt form</h1>
+             <h4 class="fields">ROOM NO.</h4>
+             <h4 class="fields">ROOM CHARGES</h4>
+             <h4 class="fields">SERVICES</h4>
+             <h4 class="fields">GST</h4>
+             <h2 class="fields">TOTAL</h2>
+             <div class="col-1-of-2"><a href="#" class="btn btn--blue btn--animated"><strong>PAY SECURELY</strong></a></div>
+           </div>
+            <div class="col-6 d-none d-lg-block flower my-col">
+            
+           </div>
+        </div>
+        
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import navbar from "./navbar.vue";
+export default {
+		components: {
+navbar
+	},
+  data(){
+    return {
+    };
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.checkout-main
+{
+	height:91.75vh;
+	background-image:linear-gradient(to right bottom,rgba(#FFFFDD,0.3),rgba(#FFDAB9,0.5)) , url(../assets/hero.jpg);
+	background-size: cover;
+	background-position: top;
+	padding-top:1.5rem;
+	padding-left:1rem;
+	padding-right:1rem;
+}
+.checkout-form
+{
+  height:40rem;
+  background-image:linear-gradient(to right bottom,rgba(#FFF4D1,0.8),rgba(#FFFDD0,0.8));
+  border-radius:1.75rem;
+  overflow:hidden;
+
+}
+
+.flower
+{
+	background-image:url(../assets/bouquet.jpg);
+	background-size:cover;
+	border-radius:1.75rem;
+	box-shadow: 0 1rem 2rem rgba($color-black,.2);
+}
+.my-row
+{
+	height:40rem;
+	padding:1rem;
+}
+.heading-secondary{
+	font-size:2.7rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	color:#006a71;
+    letter-spacing: 0.2rem;
+    margin-top:1rem;
+    margin-left:1.5rem;
+}
+.fields
+{
+	margin:1.7rem;
+}
+.btn {
+    &,
+    &:link,
+    &:visited {
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 1rem 3.5rem;
+        display: inline-block;
+        border-radius: 10rem;
+        transition: all .2s;
+        position: relative;
+        font-size: $default-font-size;
+
+        border: none;
+        cursor: pointer;
+        margin-top:4rem;
+        margin-left:6rem;
+    }
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 1rem 1.5rem rgba($color-black,.2);
+        color:white;
+
+        &::after {
+            transform: scaleX(1.4) scaleY(1.6);
+            opacity: 0;
+        }
+    }
+    
+    &:active,
+    &:focus {
+        outline: none;
+        transform: translateY(-1px);
+        box-shadow: 0 .5rem 1rem rgba($color-black,.2);
+    }
+    
+    &--white {
+        background-color: $color-white;
+        color: $color-grey-dark;
+
+        &::after {
+            background-color: $color-white;
+        }
+    }
+
+    &--blue {
+        background-color: #006a71;
+        color: $color-white;
+
+        &::after {
+            background-color: #006a71;
+        }
+    }
+    
+    &::after {
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+        border-radius: 10rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transition: all .4s;
+    }
+    
+    &--animated {
+        animation: moveInBottom .5s ease-out .75s;
+        animation-fill-mode: backwards;
+    }
+}
+.my-col
+{
+	padding:1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/edit-profile.vue b/src/components/edit-profile.vue
index e041bde..5b5d4a7 100644
--- a/src/components/edit-profile.vue
+++ b/src/components/edit-profile.vue
@@ -47,10 +47,10 @@
 </template>
 
 <script>
-import Navbar from "./navbar.vue";
+import navbar from "./navbar.vue";
 export default {
 	components: {
-Navbar
+navbar
 	},
   data(){
     return {
diff --git a/src/components/food-menu.vue b/src/components/food-menu.vue
new file mode 100644
index 0000000..0d1e773
--- /dev/null
+++ b/src/components/food-menu.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return {
+    };
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 5435ef1..a3622ac 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -75,6 +75,9 @@ i {
 .navbar-mainbg{
 	background-color: #006a71;
 	padding: 0px;
+	/*position:fixed;
+	width:100vw;
+	z-index:9999;*/
 }
 #navbarSupportedContent{
 	position: relative;
diff --git a/src/components/table-reserve3.vue b/src/components/table-reserve3.vue
index c41b15f..b947acd 100644
--- a/src/components/table-reserve3.vue
+++ b/src/components/table-reserve3.vue
@@ -1,4 +1,5 @@
-<template><div>
+<template>
+  <div>
 	<navbar/>
 <div id="maindiv">
         <div class="container">
@@ -28,12 +29,12 @@
             Welcome to Desi Addicts
           </h3>
           <form class="form-box px-3">
-            <button type="button" class="btn btn-secondary">Show Food Menu</button>
+            <a href="#popup1" class="btn btn-secondary" id="food-menu-button">Show Food Menu</a>
             <h6 class="ques">Do You want to pre-order food as well?</h6>
             <label>&nbsp;&nbsp;<input type="radio" name="optradio" v-model="x" value="yes">&nbsp;&nbsp;Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;
             <label>&nbsp;&nbsp;<input type="radio" name="optradio" v-model="x" value="no">&nbsp;&nbsp;No</label>&nbsp;&nbsp;&nbsp;&nbsp;
             <br>
-            <button type="button" v-show="x==='yes'" class="btn btn-secondary">Select Food items</button>
+            <a href="#popup2" class="btn btn-secondary" v-if="x=='yes'">Select Food items</a>
             <div class="mb-3">
               <button type="submit" class="btn btn-block text-uppercase">
                 Reserve Table
@@ -47,6 +48,81 @@
  </div>
  </div>
  </div>
+
+  <div class="popup" id="popup1">
+   <div class="popup__content menu-popup">
+    <div class="container my-container">
+      <div class="row my-row">
+        <div class="col-lg-6 d-none d-lg-block my-col left-popup">
+        </div>
+        <div class="col-lg-6 col-md-12 my-col right-popup">
+        <div class="menu-card">
+          <h1 class="menu-heading">FOOD MENU</h1>
+          <h3 class="menu-card-content">MAIN DISHES</h3>
+          <h3 class="menu-card-content">SALADS</h3>
+          <h3 class="menu-card-content">DESSERTS</h3>
+          <h3 class="menu-card-content">DRINKS</h3>
+        </div>
+      <a href="#food-menu-button" class="popup__close">&times;</a>
+    </div>
+      </div>
+    </div>
+   </div>
+ </div>
+
+ <div class="popup" id="popup2">
+   <div class="popup__content food-order">
+    <div class="food-order-heading">
+      <h1>ORDER FOOD</h1>
+    </div>
+    
+    <div class="container food-order-container">
+      <div class="row food-order-pane">
+        <div class="col-lg-6 col-md-12 u-add-height u-made-scroll">
+        <h3 class="food-order-pane-heading">FOOD ITEMS</h3>
+        
+          <h4 class="food-order-types">MAIN COURSE</h4>
+          <ul class="food-order-items">
+            <li class="custom">DAL MAKHANI<div class="hover-text">-->dal makhani is a veg food</div></li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">CHANA MASALA<div class="hover-text">-->chana masala is a veg food</div></li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">PANEER TIKKA BUTTER MASALA</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">PALAK PANEER</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">MUSHROOM MASALA</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+          </ul>
+          <h4 class="food-order-types">SALADS</h4>
+          <ul class="food-order-items">
+            <li class="custom">Vegetable Som Tam Salad</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">Compressed Melon Sliders</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">Mixed Beans Salad</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">Fruit Cube Salad</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+          </ul>
+          <h4 class="food-order-types">DRINKS</h4>
+          <ul class="food-order-items">
+            <li class="custom">vodka lemon</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">coke</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">orange juice</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+          </ul>
+          <h4 class="food-order-types">DESSERTS</h4>
+          <ul class="food-order-items">
+            <li class="custom">choco-lave cake</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">ras-malai</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+            <li class="custom">rice kheer</li><b-form-spinbutton class="my-spin-button" min=0></b-form-spinbutton>
+          </ul>
+      </div>
+        <div class="col-lg-6 col-md-12 u-add-height u-made-scroll">
+          <h3 class="food-order-pane-heading">CART</h3>
+          <div class="food-order-cart"><h4 class="food-order-types">TOTAL</h4>        
+          </div>
+          <button class="btn btn--blue order-now-btn">order now&rarr;</button>
+      </div>
+      </div>
+    </div>
+   </div>
+ </div>
+
+ 
+
+
  </div>
  </div>
 </template>
@@ -65,7 +141,7 @@ Navbar
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .ques
 {
   margin-top: 1.5rem;
@@ -212,4 +288,303 @@ img{
     align-items: center;
     padding-bottom: 2rem;
 }
+
+.popup {
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba($color-black, .8);
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .3s;
+    overflow-y:auto;   
+
+    &__content {
+        @include absCenter;
+        width:80%;
+        height:40rem;
+        background-color: $color-white;
+        box-shadow: 0 2rem 4rem rgba($color-black, .2);
+        border-radius: 3px;
+        display: table;
+        overflow: hidden;
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(.25);
+        transition: all .5s .2s;
+        overflow-y:auto;   
+    }
+
+    &__text {
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+
+        -moz-column-count: 2;
+        -moz-column-gap: 1rem; //1em = 14px;
+        -moz-column-rule: 1px solid $color-grey-light-2;
+
+        column-count: 2;
+        column-gap: 1rem; //1em = 14px;
+        column-rule: 1px solid $color-grey-light-2;
+
+        -moz-hyphens: auto;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+    }
+
+    //Open states
+    &:target {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &:target &__content {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    &__close {
+        &:link,
+        &:visited {
+            color: $color-grey-dark;
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            font-size: 3rem;
+            text-decoration: none;
+            display: inline-block;
+            transition: all .2s;
+            line-height: 1;
+        }
+
+        &:hover {
+            color: $color-primary;
+        }
+    }
+}
+.my-container
+{
+  height:90vh;
+  margin:2rem auto;
+  border-radius:5px;
+  overflow:hidden;
+  padding-left:1.1rem;;
+  background-image:linear-gradient(to right bottom,#ddd6f3,#faaca8);
+}
+.my-row
+{
+  width:100%;
+  height:100%;
+}
+.left-popup{
+  background-image:url(../assets/food.jpg);
+  background-size:cover;
+  background-position:center;
+  border-radius:5px;
+  box-shadow: 0 1rem 2rem rgba($color-black,.2);
+}
+.menu-card{
+  height:95%;
+  opacity:0.7;
+  background-color:white;
+  margin:1rem 0.75rem;
+  margin-left:1.2rem;
+  border-radius:5px;
+  box-shadow: 1rem 1rem 4rem #002225;
+  overflow-y:auto;
+}
+.my-col{
+padding:0.2rem;;
+height:100%;
+}
+.menu-heading
+{
+  margin-left:8rem;
+}
+.menu-card-content{
+  margin-left:1rem;
+}
+.menu-popup
+{
+  background-image:linear-gradient(to right bottom,#cc2b5e ,#753a88);
+          padding:0.5rem;
+}
+
+.food-order
+{
+  background-image:url(../assets/foodorder.jpg);
+  background-size:cover;
+  filter: blur(0.1px);
+  &-heading
+ {
+  color:white;
+  text-shadow: 1px 1px #fe4902, 
+                2px 2px #fe4902, 
+                3px 3px #fe4902;
+  width:28%;
+  margin:1rem auto;
+  &:hover {
+   position: relative; 
+   top: -3px; 
+   left: -3px; 
+   text-shadow: 1px 1px #fe4902, 
+                2px 2px #fe4902, 
+                3px 3px #fe4902, 
+                4px 4px #fe4902, 
+                5px 5px #fe4902, 
+                6px 6px #fe4902;
+}
+ }
+ &-pane
+ {
+  &-heading
+  {
+    color:#2a2a2a;
+    text-shadow: 1px 1px #fe4902, 
+                2px 2px #fe4902, 
+                3px 3px #fe4902;
+    font-size:2.2rem;
+
+  }
+ }
+ &-container
+ {
+  opacity:0.85;
+  border-radius:5px;
+ }
+ &-items{
+  text-transform:uppercase;
+  list-style:square outside none;
+
+ }
+ &-types{
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: bold;
+  text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
+    0px -4px 10px rgba(255,255,255,0.3);
+ }
+}
+.u-add-height{
+  height:30rem;
+}
+.u-made-scroll{
+  overflow-y:auto;
+}
+.u-made-scroll::-webkit-scrollbar {
+    width: 12px;
+}
+
+.u-made-scroll::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    border-radius: 10px;
+}
+
+.u-made-scroll::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}
+.custom
+{
+  font-weight:bold;
+  font-style:italic;
+  line-height:2;
+  &:hover>.hover-text{
+   display:block;
+   position:absolute;
+   left:10rem;
+  }
+}
+.my-spin-button{
+  width:20%;
+  font-weight:bold;
+  background-color:lightgrey;
+  height:2rem;
+}
+.hover-text
+{
+  display:none;
+  font-size:0.8rem;
+  width:50%;
+}
+
+.btn {
+    &,
+    &:link,
+    &:visited {
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 1rem 3.5rem;
+        display: inline-block;
+        border-radius: 10rem;
+        transition: all .2s;
+        position: relative;
+
+        border: none;
+        cursor: pointer;
+    }
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 1rem 2rem rgba($color-black,.2);
+        color:white;
+
+        &::after {
+            transform: scaleX(1.4) scaleY(1.6);
+            opacity: 0;
+        }
+    }
+    
+    &:active,
+    &:focus {
+        outline: none;
+        transform: translateY(-1px);
+        box-shadow: 0 .5rem 1rem rgba($color-black,.2);
+    }
+    
+    &--white {
+        background-color: $color-white;
+        color: $color-grey-dark;
+
+        &::after {
+            background-color: $color-white;
+        }
+    }
+
+    &--blue {
+        background-color: #FF9900;
+        margin-top:1rem;
+        font-size:1rem;
+        font-weight:bold;
+        color:black;
+        &::after {
+            background-color: #FF9900;
+        }
+    }
+    
+    &::after {
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+        border-radius: 10rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transition: all .4s;
+    }
+    
+    &--animated {
+        animation: moveInBottom .5s ease-out .75s;
+        animation-fill-mode: backwards;
+    }
+}
+.order-now-btn{
+  position:absolute;
+  bottom:1rem;
+  left:10rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 2df017c..97bb9fc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,7 @@ import Table from '../components/table-reserve'
 import Table2 from '../components/table-reserve2'
 import Table3 from '../components/table-reserve3'
 import Room from '../components/room-service-main'
+import checkout from '../components/checkout'
 
 import Buffet from '../components/Buffet'
 import store from '../store'
@@ -26,6 +27,11 @@ const routes = [{
     name: 'HelloWorld',
     component: Landing
   },
+  {
+    path: '/checkout',
+    name: 'checkout',
+    component: checkout
+  },
   {
     path: '/book',
     name: 'Book',