diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 1dd13888..03914fb8 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -9,7 +9,7 @@
           I need :
           <el-select v-model="value" placeholder="RMB">
             <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" />
+            <!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
           </el-select>
         </div>
       </el-col>
@@ -158,7 +158,7 @@
           </el-form-item>
           <el-form-item>
             <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    
+
             <el-button type="primary" :loading="loading" @click="getCalculationValue('bookingForm')">Book Now</el-button>
           </el-form-item>
         </div>
@@ -176,38 +176,38 @@
       </el-table> -->
       <!-- Table_booking_confirmation-end -->
 
-      <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;" >
+      <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
         <tbody>
           <tr>
-            <td class="el-table_2_column_9 is-right ">Date :  </td>
+            <td class="el-table_2_column_9 is-right ">Date : </td>
             <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Customer Marking :  </td>
+            <td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
           </tr>
-                    <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Payment Method :  </td>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB :  </td>
+            <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
           </tr>
           <tr>
             <td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.service_charge }}</td>
           </tr>
-                    <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> RATE  :</td>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">  </td>
+            <td width="200" class="el-table_2_column_9 is-right "> </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">  </td>
+            <td width="200" class="el-table_2_column_9 is-right "> </td>
             <td width="200" class="el-table_2_column_9 is-left "></td>
           </tr>
 
@@ -215,9 +215,11 @@
             <td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
           </tr>
-                  <tr>
+          <tr>
             <td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; <b> RM {{ bookingConfirmTable.bankin_amount }}</b></td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -421,64 +423,11 @@
           rate: 'undefined',
           bankin_amount: 'undefined',
           china_beneficiary: 'undefined',
-        },
-        // bookingConfirmTable: [{
-        //   data1: 'Date :',
-        //   data2: '25/5/2018'
-        // }, {
-        //   data1: 'Customer Marking :',
-        //   data2: 'CIEF/150ECE'
-        // }, {
-        //   data1: '',
-        //   data2: ''
-        // }, {
-        //   data1: 'Payment Method :',
-        //   data2: 'Cash/Bank Transfer'
-        // }, {
-        //   data1: '',
-        //   data2: ''
-        // }, {
-        //   data1: 'CNY/RMB :',
-        //   data2: 'CNY 120,500.00'
-        // }, {
-        //   data1: '+ Service Charge :',
-        //   data2: 'CNY 20.00'
-        // }, {
-        //   data1: '/ RATE :',
-        //   data2: '1.63'
-        // }, {
-        //   data1: '',
-        //   data2: 'MYR 73,848.04'
-        // }, {
-        //   data1: '+ GST 6% :',
-        //   data2: 'MYR 4,430.88'
-        // }, {
-        //   data1: '',
-        //   data2: 'MYR 78,278.92'
-        // }, {
-        //   data1: '',
-        //   data2: ''
-        // }, {
-        //   data1: 'China Beneficiary Acc :',
-        //   data2: ''
-        // }, {
-        //   data1: '',
-        //   data2: 'PENDING'
-        // }, {
-        //   data1: '',
-        //   data2: ''
-        // }, {
-        //   data1: 'Bank In Amount :',
-        //   data2: 'MYR 78,278.92'
-        // }, {
-        //   data1: '',
-        //   data2: ''
-        // }]
+        }
       }
     },
     methods: {
       // TODO fetch booking data on load 
-
       formatter(row, column) {
         return row.address
       },
@@ -500,6 +449,13 @@
         this.dialogFormVisible = true
         this.term = newterm
       },
+      BookingList() {
+        axios.get('api/booking')
+          .then((response) => {
+            console.log(response)
+            this.list = response.data
+          })
+      },
       // Get calculation before submitting booking 
       getCalculationValue(formName) {
         this.loading = true
@@ -514,7 +470,7 @@
                 this.loading = false
                 console.log(response)
                 this.bookingConfirmTable.date = response.data.date
-                this.bookingConfirmTable.marking = response.data.marking 
+                this.bookingConfirmTable.marking = response.data.marking
                 this.bookingConfirmTable.payment_method = response.data.payment_method
                 this.bookingConfirmTable.amount = response.data.amount
                 this.bookingConfirmTable.service_charge = response.data.service_charge
@@ -535,38 +491,32 @@
 
       },
       createBooking: function () {
-        this.$router.push({
-          name: 'booking.user.upload'
-        })
-        // this.dialogFormVisible1 = true
+        this.dialogFormVisible1 = true
 
-        // let newBooking = {
-        //   amount: this.booking.amount,
-        //   account_name: this.booking.account_name,
-        //   bank_name: this.booking.bank_name,
-        //   bank_branch: this.booking.bank_branch,
-        //   account_num: this.booking.account_num,
-        //   term: this.term
-        // }
-        // console.log(newBooking)
-        // axios.post('api/booking', newBooking)
-        //   .then((response) => {
-        //     console.log(response)
+        let newBooking = {
+          amount: this.booking.amount,
+          account_name: this.bookingForm.account_name,
+          bank_name: this.bookingForm.bank_name,
+          bank_branch: this.bookingForm.bank_branch,
+          account_num: this.bookingForm.account_num,
+          term: this.term
+        }
+        console.log(newBooking)
+        axios.post('api/booking', newBooking)
+          .then((response) => {
 
-        //     // this code to insert the input data into the database (success)
-        //     // this.Booking.amount = amount;
-        //     // this.Booking.account_name = account_name;
-        //     // this.Booking.bank_name = bank_name;
-        //     // this.Booking.branch = bank_branch;
-        //     // this.Booking.account_num = account_num;
-        //     // this.term = term;
-        //   })
-        //   .catch((error) => {
-        //     console.log(error)
-        //   })
-      },
-      handleDelete(index, row) {
-        console.log(index, row);
+            // push with return id 
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+
+            // pass variable to another router 
+
+          })
+          .catch((error) => {
+            console.log(error)
+            return
+          })
       },
       BookingStatus(index, row) {
 
@@ -609,28 +559,6 @@
           default:
             break
         }
-        // axios.post('api/booking/'+ id + '/status', newBooking)
-        //   .then((response) => {
-        //     console.log(response)
-
-        //     // this code to insert the input data into the database (success)
-        //     // this.Booking.amount = amount;
-        //     // this.Booking.account_name = account_name;
-        //     // this.Booking.bank_name = bank_name;
-        //     // this.Booking.branch = bank_branch;
-        //     // this.Booking.account_num = account_num;
-        //     // this.term = term;
-        //   })
-        //   .catch((error) => {
-        //     console.log(error)
-        // })
-      },
-      BookingList() {
-        axios.get('api/booking')
-          .then((response) => {
-            console.log(response)
-            this.list = response.data
-          })
       }
     }