diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index e69de29b..9d739b0f 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.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 1mb</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/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
new file mode 100644
index 00000000..3627916e
--- /dev/null
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -0,0 +1,152 @@
+<template>
+    <el-main>
+        <progress-track v-model="status"></progress-track>
+
+        <div align="center">
+            <h4 style="margin-top:5%;">Processing Invoice</h4>
+            <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>PO</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-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/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index bd1875d9..f936462f 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -27,7 +27,12 @@
                         </div>
                         <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
                     </el-upload>
+
                     <br>
+
+                    <div class="bottom clearfix" style="text-align:right;">
+                        <el-button type="primary">Submit</el-button>
+                    </div>
                     <!-- upload image end -->
 
                 </el-card>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 2f3d21d6..9d72ad75 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -15,6 +15,7 @@ const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.de
 const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.default || m)
 const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
 const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
+const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 
 
@@ -40,7 +41,8 @@ export default [
   { 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/uploadPo', name: 'booking.user.uploadpo', component: UploadPo },
+  { 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 },