diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 5cfd855e..b2ed845d 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -38,6 +38,7 @@ class BookingController extends Controller
      */
     public function store(Request $request)
     {
+
         $rates = Rate::all()->last();
         $term = $request->input('term');
         $rate = 1;
@@ -62,7 +63,7 @@ class BookingController extends Controller
                 $rate = $rates->x2_ba;
                 break;
             default:
-            $rate = "no";
+            return response()->json(["success"=>false, "message"=>"Term not found"], 400);
             break;
          }
 
@@ -70,8 +71,8 @@ class BookingController extends Controller
         //  $bookings = Booking::all();
          $amount = $request->input("amount");
          $svcharge=20.00;
-         $bia = round(($amount + ($svcharge / $rate) + 0.06), 2);
-
+         $bia = round(($amount + ($svcharge / $rate)), 2);
+         
         //  return $bia;
          $user = Auth::user(); 
          $booking = new Booking();
@@ -79,13 +80,13 @@ class BookingController extends Controller
          $booking->account_num = $request->input('account_num');
          $booking->bank_name = $request->input('bank_name');
          $booking->bank_branch = $request->input('bank_branch');
-         $booking->company_name = $request->input('company_name');
-         $booking->company_address = $request->input('company_address');
-         $booking->bank_address = $request->input('bank_address');
-         $booking->swift_code = $request->input('swift_code');
-         $booking->cnap = $request->input('cnap');
-         $booking->term = $request->input('term');
-         $booking->amount = $request->input('amount');
+        //  $booking->company_name = $request->input('company_name');
+        //  $booking->company_address = $request->input('company_address');
+        //  $booking->bank_address = $request->input('bank_address');
+        //  $booking->swift_code = $request->input('swift_code');
+        //  $booking->cnap = $request->input('cnap');
+         $booking->term = $term;
+         $booking->amount = $amount;
          $booking->rate_id = $rate;
          $booking->user()->associate($user);
          //$booking->user_id = $request->input('user_id');
@@ -94,7 +95,8 @@ class BookingController extends Controller
 
         // return false;
         //$booking = Booking::create($request->all());
-        return response()->json($booking, 201);
+        return ['redirect' => route('upload')];
+        // return response()->json($booking, 201);
        
     }
 
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index c7bb2bd5..45bea195 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -3,8 +3,8 @@ import store from '~/store'
 import router from '~/router'
 import i18n from '~/plugins/i18n'
 import App from '~/components/App'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en'
 
 import '~/plugins'
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 7bc1a0c3..69b59a57 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -4,7 +4,7 @@
 
 <!-- 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="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="Booking.amount"></el-input></div></el-col>
         <el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
               <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
               <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
@@ -34,11 +34,11 @@
   <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" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cash')">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-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cheque')">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-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_ba')">Book</el-button></div></el-col>
 </el-row>
 
 <br>
@@ -54,39 +54,39 @@
   <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" @click="dialogFormVisible = true">Book</el-button></div></el-col>
+    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cash')">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-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cheque')">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-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
 </el-row>
 <!-- Rate-Display-end -->
 
 <!-- Form_popup -->
-<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen="true">
-  <el-form :model="form"><div align="center">
+<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen:true>
+  <el-form><div align="center">
     <el-form-item>
-      <el-input placeholder="China Beneficiary Account" style="width: 80%"></el-input>
+      <el-input type="text" placeholder="China Beneficiary Account" style="width: 80%" v-model="Booking.account_name"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-input placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"></el-input>
+      <el-input type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" v-model="Booking.bank_name"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-input placeholder="Branch / 分行/支行" style="width: 80%"></el-input>
+      <el-input type="text" placeholder="Branch / 分行/支行" style="width: 80%" v-model="Booking.bank_branch"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-input placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"></el-input>
+      <el-input type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%" v-model="Booking.account_num"></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="dialogFormVisible1 = true">Book Now</el-button>
+    <el-button type="submit" @click="createBooking">Book Now</el-button>
   </span>
 </el-dialog>
 <!-- Form_popup-end -->
 
 <!-- Booking_confirmation_popup -->
-<el-dialog title="Booking Confirmation" :visible.sync="dialogFormVisible1" center fullscreen="true">
+<el-dialog title="Booking Confirmation" :visible.sync="dialogFormVisible1" center fullscreen:true>
 
 <!-- Table_booking_confirmation -->
 <el-table :data="tableData1" align="center">
@@ -108,30 +108,30 @@
 <!-- Booking Table -->
   <el-row :gutter="20" >
     <div>
-      <el-table :data="tableData" >
-        <el-table-column prop="odr_num" label="Order No" sortable width="106">
+      <el-table>
+        <el-table-column  label="Order No" sortable width="106">
         </el-table-column>
-        <el-table-column prop="date" label="Date" sortable width="92">
+        <el-table-column  label="Date" sortable width="92">
         </el-table-column>
-        <!-- <el-table-column prop="term" label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
+        <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
         </el-table-column> -->
-                <el-table-column prop="rate" label="Rate" sortable width="74">
+                <el-table-column label="Rate" sortable width="74">
         </el-table-column>
-                <el-table-column prop="amount" label="Amount" sortable justify="center" width="98"> 
+                <el-table-column label="Amount" sortable justify="center" width="98"> 
         </el-table-column>
-                        <el-table-column prop="t_amount" label="Transfer Amount (RMB / USD)" :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" width="133">
+                        <el-table-column label="Transfer Amount (RMB / USD)" :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" width="133">
         </el-table-column>
-                       <el-table-column prop="eta" label="ETA" sortable width="92">
+                       <el-table-column label="ETA" sortable width="92">
         </el-table-column>
-                       <!-- <el-table-column prop="pay_method" label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+                       <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
         </el-table-column> -->
-                         <el-table-column prop="status" label="Status" :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler">
+                         <el-table-column label="Status" :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler">
         </el-table-column>
-                         <el-table-column prop="bal_amt" label="Balance Amount (RMB/USD)" sortable width="100">
+                         <el-table-column label="Balance Amount (RMB/USD)" sortable width="100">
         </el-table-column>
-                         <el-table-column prop="time" label="Time Left" sortable>
+                         <el-table-column label="Time Left" sortable>
         </el-table-column>
-        <el-table-column prop="tag" label="Tag" width="82" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]"
+        <el-table-column label="Tag" width="82" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]"
           :filter-method="filterTag" filter-placement="bottom-end">
           <template slot-scope="scope">
             <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
@@ -148,11 +148,18 @@
 
 
 <script>
+import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
+import store from '~/store'
+import axios from 'axios'
+
   export default {
     middleware: ['auth'],
 
-     data() {
+    data () {
       return {
+        Booking: {amount:'', account_name:'', bank_name:'', bank_branch:'', account_num:''},
+        term: '',
         options1: [{
           value: 'RMB',
           label: 'RMB to MYR'
@@ -161,68 +168,11 @@
           value2: 'MYR',
           label2: 'MYR to RMB'
         }],
-        tableData: [{
-          odr_num: '001',
-          date: '2018-05-23',
-          term: 'X2',
-          rate: '1.63',
-          amount: '12000',
-          t_amount: 'RMB 4000',
-          eta: '2018-05-28',
-          pay_method: 'Cash',
-          status: '(2/6) Waiting for Upload Bank in Slip',
-          bal_amt: 'None',
-          time: '00h 05m 00s',
-          tag: 'Success'
-        }, {
-          odr_num: '002',
-          date: '2018-05-20',
-          term: 'X1',
-          rate: '1.72',
-          amount: '1200',
-          t_amount: 'USD 400',
-          eta: '2018-05-25',
-          pay_method: 'Cheque',
-          status: '(5/6) Waiting for upload PO',
-          bal_amt: '100',
-          time: '00h 02m 11s',
-          tag: 'Pending'
-        }, {
-          odr_num: '003',
-          date: '2018-05-17',
-          term: 'X1',
-          rate: '1.70',
-          amount: '1000',
-          t_amount: 'RMB 300',
-          eta: '2018-05-20',
-          pay_method: 'BA',
-          status: '(3/6) Order Confirmation',
-          bal_amt: 'None',
-          time: '00h 30m 21s',
-          tag: 'Success'
-        }, {
-          odr_num: '004',
-          date: '2018-05-22',
-          term: 'X2',
-          rate: '1.68',
-          amount: '30000',
-          t_amount: 'USD 500',
-          eta: '2018-05-27',
-          pay_method: 'Cheque',
-          status: '(4/6) Processing Transfer',
-          bal_amt: 'None',
-          time: '00h 23m 15s',
-          tag: 'Pending'
-        }],
         value: '',
         value2: '',
         input: '',
         dialogFormVisible: false,
         dialogFormVisible1: false,
-        form: {
-          name: '',
-          region: ''
-        },
         formLabelWidth: '0px',
         tableData1: [{
           data1: 'Order Number :',
@@ -278,7 +228,7 @@
         },{
           data1: '',
           data2: ''
-        }]
+        }],
       };
     },
     methods: {
@@ -291,7 +241,46 @@
       filterHandler(value, row, column) {
         const property = column['property'];
         return row[property] === value;
-      }
-    },    
+      },
+      acceptTerm: function(newterm){
+        this.term = newterm
+      },
+      createBooking : function(){
+        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);
+            
+            //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;
+          })
+        }
+  },    
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/upload.vue b/resources/assets/js/pages/upload.vue
new file mode 100644
index 00000000..20492836
--- /dev/null
+++ b/resources/assets/js/pages/upload.vue
@@ -0,0 +1,7 @@
+<template>
+<el-main></el-main>    
+  
+  
+  
+
+</template>