diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 9311f4d3..b9d04658 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -229,6 +229,7 @@ class BookingController extends Controller
     public function calculation(Request $request){
        $amount = $request->input('amount');
        $term = $request->input('term');
+       $china_beneficiary = $request->input('china_beneficiary');
        $rates = Rate::all()->last();
 
        // TODO : get marking 
@@ -274,13 +275,16 @@ class BookingController extends Controller
         }
 
         $bankin_amount = round(($amount + $svcharge) / $rate + (0 * ($amount + $svcharge)), 2);
-        
+
         return response()->json([
-            'customer_marking' => $marking,
+            'date' => date('Y-m-d'),
+            'marking' => $marking,
+            'amount' => $amount,
             'payment_method' => $payment_method,
             'service_charge' => $svcharge,
             'rate' => $rate,
-            'bankin_amount' => $bankin_amount
+            'bankin_amount' => $bankin_amount,
+            'china_beneficary' => $china_beneficiary
         ], 200);
     }
 }
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index c95694f4..1dd13888 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -180,31 +180,31 @@
         <tbody>
           <tr>
             <td class="el-table_2_column_9 is-right ">Date :  </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;123</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-left ">&nbsp;&nbsp;123</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>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;123</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-left ">&nbsp;&nbsp;123</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;123</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>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;123</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-left ">&nbsp;&nbsp;RM 12,000</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>
@@ -213,11 +213,11 @@
 
           <tr>
             <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; 123123</td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
           </tr>
                   <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bank in Amoint :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; <b>123123</b></td>
+            <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>
           </tr>
         </tbody>
       </table>
@@ -412,58 +412,68 @@
             timeout: '56:00:00'
           }
         ],
-        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: ''
-        }]
+        bookingConfirmTable: {
+          date: 'undefined',
+          marking: 'undefined',
+          payment_method: 'undefined',
+          amount: 'undefined',
+          service_charge: 'undefined',
+          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: {
@@ -490,34 +500,34 @@
         this.dialogFormVisible = true
         this.term = newterm
       },
+      // Get calculation before submitting booking 
       getCalculationValue(formName) {
         this.loading = true
         this.$refs[formName].validate((valid) => {
           if (valid) {
-            
             let newConfirmation = {
               amount: this.booking.amount,
               term: this.term
             }
-            
             axios.post('api/booking/calculation', newConfirmation)
               .then((response) => {
+                this.loading = false
                 console.log(response)
+                this.bookingConfirmTable.date = response.data.date
+                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
+                this.bookingConfirmTable.rate = response.data.rate
+                this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
+                this.bookingConfirmTable.account_name = this.bookingForm.account_name
                 this.dialogFormVisible = false
                 this.dialogFormVisible1 = true
-                // 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) => {
+                this.loading = false
                 console.log(error)
               })
-
-   
           } else {
             return;
           }