diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
new file mode 100644
index 00000000..fe69da23
--- /dev/null
+++ b/resources/assets/js/pages/booking/po.vue
@@ -0,0 +1,115 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+      <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" :show-header="false" align="center">
+              <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" :show-header="false" align="center">
+              <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>