diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index ef502cbb..ace3bf53 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -11,10 +11,29 @@ use App\UserBankSlip;
 use App\User;
 use Auth;
 use Validator;
+use DateTime;
 
 class BookingController extends Controller
 {
 
+    public function show($id)
+    {   
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
+
+        $date1 = new DateTime($booking->created_at);
+        $date2 = new DateTime();
+        $difference_in_seconds = ($date1->format('U') + 60) - ($date2->format('U'));
+
+        
+
+        $booking->timeout = $difference_in_seconds;   
+
+        if (!$booking){
+            return response()->json(['success'=>false, 'message'=>'not found'], 404);
+        }
+        return $booking;
+    }
+
     public function store(Request $request)
     {
         $rates = Rate::orderby('updated_at','desc')->first();
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 7b8f829b..db025863 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -5,21 +5,36 @@
     <div align="center">
       <h4 style="margin-top:5%;">Waiting For Payment</h4>
     </div>
-  
+
     <el-row justify="center" align="center">
-      <el-table :data="bookingDetails" style="width: 50%; margin: 0 auto; margin-top: 2%; margin-bottom:2%" :show-header="false" align="center">
-        <el-table-column prop="label" align="right" />
-        <el-table-column class-name="booking-details" prop="data" align="left"/>
-      </el-table>
+      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
+        <tbody>
+          <tr>
+            <td class="el-table_2_column_9 is-right ">Amount : </td>
+            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> {{ booking.amount }} </b>
+            </td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> {{ booking.bankin_amount }} </b>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </el-row>
+    <br>
+
 
     <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
 
 
     <div align="center">
-      Time Left :
-      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire" />
 
+      <vue-countdown :time="booking.timeout">
+        <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+      </vue-countdown>
       <!-- <button v-on:click="startTimer">Start timer</button> -->
     </div>
     <br>
@@ -27,7 +42,8 @@
 
 
     <!-- upload image -->
-    <el-upload :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" align="center">
+    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+      list-type="picture-card" align="center">
       <i class="el-icon-plus" />
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
@@ -57,15 +73,17 @@
   </el-main>
 </template>
 <style>
-.booking-details{
-  font-weight: bold;
-}
+  .booking-details {
+    font-weight: bold;
+  }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import VueCountdown from '@xkeshi/vue-countdown'
   import ProgressTrack from '~/components/ProgressTrack'
+  import axios from 'axios'
 
   export default {
+    middleware: ['auth'],
     name: 'MyComponent',
     components: {
       'vue-countdown': VueCountdown,
@@ -77,20 +95,64 @@
         start: false,
         dialogImageUrl: '',
         dialogVisible: false,
-        bookingDetails: [
-        {
-          label: 'Exchange',
-          data: 'RMB 10,000',
+        booking: {
+          amount: '',
+          bankin_amount: '',
+          timeout: 1
         },
-        {
-          label: 'Payment',
-          data: 'MYR 5,000',
-        },
-        ]
       }
     },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/booking/' + this.$route.params.id)
+        .then((response) => {
+          console.log(response)
+          this.booking.amount = response.data.amount
+          this.booking.bankin_amount = response.data.bia
+          this.booking.timeout = response.data.timeout * 1000
+          this.start = true;
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+     
+    },
     mounted() {
-      this.$refs.countdown.start()
+      // const loading = this.$loading({
+      //   lock: true,
+      //   text: 'Please wait..',
+      //   spinner: 'el-icon-loading',
+      //   background: 'rgba(0, 0, 0, 0.7)'
+      // })
+
+      // axios
+      // .get('/api/booking/'+ this.$route.params.id)
+      // .then((response) => {
+      //   console.log(response)
+      //   this.booking.amount = response.data.amount
+      //   this.booking.bankin_amount = response.data.bia
+      //   this.booking.timeout = response.data.timeout
+      //   this.start = true;
+      //   loading.close()
+      // }).catch((error) => {
+      //   console.log(error)
+      //   loading.close()
+      //   this.$router.push({
+      //     name: 'notfound'
+      //   })
+      // })
+      //this.$refs.countdown.start()
     },
     methods: {
       handleRemove(file, fileList) {
@@ -112,7 +174,7 @@
         })
       },
       handleTimeExpire() {
-        alert('Time is up!')
+        alert('Booking expired')
       },
       startTimer() {
         this.start = true
diff --git a/resources/assets/js/pages/errors/404.vue b/resources/assets/js/pages/errors/404.vue
index 018d26c8..afa8e2ca 100644
--- a/resources/assets/js/pages/errors/404.vue
+++ b/resources/assets/js/pages/errors/404.vue
@@ -3,7 +3,7 @@
     <h3 class="mb-4">{{ $t('page_not_found') }}</h3>
 
     <div class="links">
-      <router-link :to="{ name: 'welcome' }">
+      <router-link :to="{ name: 'home' }">
         {{ $t('go_home') }}
       </router-link>
     </div>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 125f9ce1..0f53ca45 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -522,39 +522,45 @@
       BookingStatus(index, row) {
 
         // TODO : Get booking status from server 
-        this.status = 6
+        this.status = 2
 
         switch (this.status) {
           case 1:
             this.$router.push({
-              name: 'booking.user.upload'
+              name: 'booking.user.upload',
+              params: {id: "12" }
             })
 
           case 2:
             this.$router.push({
-              name: 'booking.user.upload'
+              name: 'booking.user.upload',
+              params: {id: "12" }
             })
             break;
           case 3:
             this.$router.push({
-              name: 'booking.confirmation'
+              name: 'booking.confirmation',
+              params: {id: "1" }
             })
             break;
           case 4:
             this.$router.push({
-              name: 'booking.transfer'
+              name: 'booking.transfer',
+              params: {id: "1" }
             })
             break;
 
           case 5:
             this.$router.push({
-              name: 'booking.user.uploadpo'
+              name: 'booking.user.uploadpo',
+              params: {id: "1" }
             })
             break;
 
           case 6:
             this.$router.push({
-              name: 'booking.complete'
+              name: 'booking.complete',
+              params: {id: "1" }
             })
             break;
           default:
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 9d72ad75..e9fd43c9 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -38,14 +38,14 @@ export default [
     ] },
   
   // Booking
-  { path: '/booking/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
-  { path: '/booking/confirmation', name: 'booking.confirmation', component: Confirmation },
-  { path: '/booking/transfer', name: 'booking.transfer', component: Transfer },
-  { path: '/booking/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
-  { path: '/booking/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
-  { path: '/booking/complete', name: 'booking.complete', component: Completed },
+  { path: '/booking/:id/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
+  { path: '/booking/:id/confirmation', name: 'booking.confirmation', component: Confirmation },
+  { path: '/booking/:id/transfer', name: 'booking.transfer', component: Transfer },
+  { path: '/booking/:id/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
+  { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
+  { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '*', component: NotFound }
+  { path: '*', name:'notfound', component: NotFound }
 ]
diff --git a/resources/assets/js/store/modules/booking.js b/resources/assets/js/store/modules/booking.js
new file mode 100644
index 00000000..879d74f1
--- /dev/null
+++ b/resources/assets/js/store/modules/booking.js
@@ -0,0 +1,38 @@
+// import axios from 'axios'
+// import Cookies from 'js-cookie'
+// import * as types from '../mutation-types'
+
+// // state
+// export const state = {
+//   booking: null
+// }
+
+// // getters
+// export const getters = {
+//   booking: state => state.booking,
+// }
+
+// // mutations
+// export const mutations = {
+//   [types.FETCH_BOOKING_SUCCESS] (state, { booking }) {
+//     state.booking = booking
+//   },
+
+//   [types.FETCH_BOOKING_FAILURE] (state) {
+//     state.booking = null
+//   },
+
+// }
+
+// // actions
+// export const actions = {
+//   async fetchBooking ({ commit }) {
+//     try {
+//       const { data } = await axios.get('/api/user')
+
+//       commit(types.FETCH_BOOKING_SUCCESS, { booking: data })
+//     } catch (e) {
+//       commit(types.FETCH_BOOKING_FAILURE)
+//     }
+//   }
+// }
diff --git a/routes/api.php b/routes/api.php
index d33a7e0c..eea4ae26 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -21,13 +21,6 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
     return $request->user();
 });
 
-/*Route for the booking */
-Route::get('/booking', 'BookingController@index');
-Route::get('/booking/{book_id}', 'BookingController@show');
-Route::post('/booking', 'BookingController@store');
-Route::put('/booking/{book_id}', 'BookingController@update');
-Route::delete('/booking/{book_id}', 'BookingController@delete');
-Route::post('/booking/calculation', 'BookingController@calculation');
 
 
 //Route::middleware('auth:api')->get('/user', function (Request $request) {
@@ -36,6 +29,14 @@ Route::post('/booking/calculation', 'BookingController@calculation');
 Route::group(['middleware' => 'auth:api'], function () {
     Route::post('logout', 'Auth\LoginController@logout');
 
+    /*Route for the booking */
+    Route::get('/booking', 'BookingController@index');
+    Route::get('/booking/{book_id}', 'BookingController@show');
+    Route::post('/booking', 'BookingController@store');
+    Route::put('/booking/{book_id}', 'BookingController@update');
+    Route::delete('/booking/{book_id}', 'BookingController@delete');
+    Route::post('/booking/calculation', 'BookingController@calculation');
+
     Route::get('/user', function (Request $request) {
         return $request->user();
     });