diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 54cc8904..bad276d5 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,6 +1,8 @@
 <template>
 
   <el-main>
+
+<!-- Input-Amount -->
     <el-row :gutter="20" type="flex" justify="center" align="middle">
         <el-col :span="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="input"></el-input></div></el-col>
         <el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
@@ -8,9 +10,9 @@
               <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
               </el-select></div></el-col>      
     </el-row>
+<!-- Input-Amount-end -->
     <hr>
-
-
+<!-- Rate-Display -->
 <br>
 <el-row :gutter="20" type="flex" justify="center" align="middle">
   <el-col><div class="grid-content bg-purple" align="right"></div></el-col>
@@ -31,11 +33,37 @@
 <el-row :gutter="20" type="flex" justify="center" align="middle">
   <el-col><div class="grid-content bg-purple"></div></el-col>
   <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
 </el-row>
 
+<!-- Form_popup -->
+<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen="true">
+  <el-form :model="form"><div align="center">
+    <el-form-item>
+      <el-input placeholder="China Beneficiary Account" style="width: 80%"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input placeholder="Branch / 分行/支行" style="width: 80%"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"></el-input>
+    </el-form-item></div>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogFormVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">Book Now</el-button>
+  </span>
+</el-dialog>
+<!-- Form_popup-end -->
+
 <br>
 <el-row :gutter="20" type="flex" justify="center" align="middle">
   <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
@@ -48,13 +76,19 @@
 <el-row :gutter="20" type="flex" justify="center" align="middle">
   <el-col><div class="grid-content bg-purple"></div></el-col>
   <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+  <el-col><div class="grid-content bg-purple" align="center">
+    <el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
 </el-row>
+<!-- Rate-Display-end -->
 
   <br><br>
   <hr>
+
+<!-- Booking Table -->
   <el-row :gutter="20" >
     <div>
       <el-table :data="tableData" >
@@ -89,9 +123,13 @@
       </el-table>
       </div>
     </el-row>
+<!-- Booking Table-end -->
+
   </el-main>
 </template>
 
+
+
 <script>
   export default {
     middleware: ['auth'],
@@ -162,7 +200,13 @@
         value: '',
         value2: '',
         input: '',
-      }
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: ''
+        },
+        formLabelWidth: '0px'
+      };
     },
     methods: {
       formatter(row, column) {
@@ -175,6 +219,6 @@
         const property = column['property'];
         return row[property] === value;
       }
-    }
-  }
+    },    
+}
 </script>