diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index ffb8ce00..58812c71 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="status"></progress-track>
 
     <div align="center">
-      <h4 style="margin-top:5%;">Waiting Bankin Slip To Be Verify</h4>
+      <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
       <br>
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index e69de29b..c9c7b4d9 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"></progress-track>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+      <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/ProgressTrack'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 4,
+        bookingConfirmTable: [{
+          data1: 'Order Number :',
+          data2: '001'
+        }, {
+          data1: 'Date :',
+          data2: '25/5/2018'
+        }, {
+          data1: 'Customer Marking :',
+          data2: 'CIEF/150ECE'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Payment Method :',
+          data2: 'Cash/Bank Transfer'
+        }, {
+          data1: '',
+          data2: ''
+        }],
+        bookingConfirmTable2:[{
+          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: ''
+        }
+        ]
+      }
+    },
+    methods: {
+
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index e69de29b..bd1875d9 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -0,0 +1,157 @@
+<template>
+    <el-main>
+        <progress-track v-model="status"></progress-track>
+
+        <div align="center">
+            <h4 style="margin-top:5%;">Transfer Completed</h4>
+            <h5> Please upload your PO </h5>
+            <br>
+        </div>
+
+        <!-- upload card -->
+        <br>
+        <el-row :gutter="12" justify="center" align="center">
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Upload PO</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+
+                    <!-- upload image -->
+                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
+                        :file-list="fileList" multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">Drop file here or
+                            <em>click to upload</em>
+                        </div>
+                        <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+                    </el-upload>
+                    <br>
+                    <!-- upload image end -->
+
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Proof : China BankSlip</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                    <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+        <br>
+
+        <!-- order details -->
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Details</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+        <br>
+
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>BankinSlip</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="22" style="text-align:center">
+                        <img src="http://via.placeholder.com/600x400" class="image">
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+    </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+    import VueCountdown from '@dmaksimovic/vue-countdown'
+    import ProgressTrack from '~/components/ProgressTrack'
+
+    export default {
+        components: {
+            'progress-track': ProgressTrack
+        },
+        data() {
+            return {
+                status: 5,
+                bookingConfirmTable: [{
+                    data1: 'Order Number :',
+                    data2: '001'
+                }, {
+                    data1: 'Date :',
+                    data2: '25/5/2018'
+                }, {
+                    data1: 'Customer Marking :',
+                    data2: 'CIEF/150ECE'
+                }, {
+                    data1: '',
+                    data2: ''
+                }, {
+                    data1: 'Payment Method :',
+                    data2: 'Cash/Bank Transfer'
+                }, {
+                    data1: '',
+                    data2: ''
+                }],
+                bookingConfirmTable2: [{
+                    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: ''
+                }]
+            }
+        },
+        methods: {
+
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 8bebdca6..e6a350ec 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -452,7 +452,7 @@
       BookingStatus(index, row) {
 
         // TODO : Get booking status from server 
-        this.status = 3
+        this.status = 5
         
         switch (this.status) {
           case 1:
@@ -472,19 +472,19 @@
             break;
           case 4:
             this.$router.push({
-              name: 'booking.user.upload'
+              name: 'booking.transfer'
             })
             break;
 
           case 5:
             this.$router.push({
-              name: 'booking.user.upload'
+              name: 'booking.user.uploadpo'
             })
             break;
 
           case 6:
             this.$router.push({
-              name: 'booking.user.upload'
+              name: 'booking.user.complete'
             })
             break;
           default: