diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 7d8c6bf2..1df1aba5 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -46,6 +46,12 @@ class BookingController extends Controller
             $booking->transfer_amount = $booking->bia; 
             
             $booking->track_status = "(". $booking->status ."/7)";
+
+            // all x2 until step 5 only
+            if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba") {
+                $booking->track_status = "(". $booking->status ."/5)";
+            }
+
             switch ($booking->status) {
                 case 1:
                     $status_desc = "Order in progress"; 
@@ -61,6 +67,9 @@ class BookingController extends Controller
                     break;
                 case 5:
                     $status_desc = "Transfer Complete, please upload your PO"; 
+                    if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                        $status_desc = "Order Completed";
+                    }
                     break;
                 case 6:
                     $status_desc = "Processing invoice"; 
@@ -118,15 +127,11 @@ class BookingController extends Controller
 						$status_desc = "Verify user bank slip";  
 						break;    
 					case 3:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
-                            $status_desc = "Generate supplier booking report";    
-                            break;  
-                        }
+                        $status_desc = "Generate supplier booking report";    
+                        break;  
 					case 4:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
-    						$status_desc = "Supplier booking report. Please confirm with your booking."; 
-    						break;
-                        }
+                        $status_desc = "Supplier booking report. Please confirm with your booking."; 
+                        break;
 					case 5:
 						$status_desc = "Please, upload China Bankslip"; 
 						break;
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 21241dfb..f7238a85 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row>
-    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
-      <el-step title="Processing Transfer"/>
-      <el-step title="Transfer Complete"/>
-      <el-step title="Processing Invoice"/>
+      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Transfer"/>
+      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Transfer Complete"/>
+      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Invoice"/>
       <el-step title="Order Complete"/>
     </el-steps>
   </el-row>
@@ -19,32 +19,12 @@
         }
 		
 	}
-   
-    /*
-    .el-steps {
-        padding-top: 70px;
-    }
-
-    .el-step .el-step__main {
-        transform: translateY(-70px);
-    }
-    .el-step__title.is-wait {
-        font-size: 10pt;
-    }
-    .el-step__title {
-        line-height: 1.4;
-    }
-
-    .el-step .is-success .el-step__line {
-        background-color: #67c23a;
-    } */
 </style>
 
 <script>
 export default {
   props: ['value'],
   data: () => ({
-    status: 1
   })
 }
 </script>
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 19c6c4e8..6d183ea7 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="tackerConfig"/>
     <h1>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -158,7 +158,10 @@ export default {
   },
   data () {
     return {
-      status: 7,
+      trackerConfig :{
+          status: 7,
+          term: null,
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -180,6 +183,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close();
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 24dc64a5..99ebedaf 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="trackerConfig"/>
     <h1>Bankin Slip Verification in Progress</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -112,7 +112,10 @@ export default {
   },
   data () {
     return {
-      status: 3,
+        trackerConfig :{
+          status: 3,
+          term: null
+        },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -134,6 +137,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 8f248d6b..518e3fac 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -154,7 +154,10 @@ export default {
   },
   data () {
     return {
-      status: 6,
+      trackerConfig :{
+        status: 6,
+        term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -176,6 +179,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 78a53e43..9e5fba88 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="trackerConfig"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Processing Invoice</h4>
@@ -141,7 +141,10 @@ export default {
   },
   data () {
     return {
-      status: 6,
+      trackerConfig :{
+          status: 6,
+          term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -163,6 +166,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 877f757b..b009fad7 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="trackerConfig"/>
     <h1>Bankin Slip Approved</h1>
     <h2>Transfer In Progress</h2>
     <div class="goBackButton">
@@ -133,7 +133,10 @@ export default {
   },
   data () {
     return {
-      status: 4,
+      trackerConfig :{
+          status: 4,
+          term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -155,6 +158,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 6fe76174..82f3a7da 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />
     <h1>Transfer Completed</h1>
     <h2> Please upload your purchase order </h2>
     <!-- upload card -->
@@ -194,7 +194,10 @@
     data() {
       return {
         booking_id: this.$route.params.id,
-        status: 5,
+        trackerConfig :{
+            status: 5,
+            term: null
+        },
         loading_btn: false,
         booking_details: {
           id: null,
@@ -217,6 +220,7 @@
         .get('/api/booking/' + this.$route.params.id)
         .then((response) => {
           this.booking_details = response.data
+          this.trackerConfig.term = response.data.term
           loading.close()
 
         }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 4f640558..56a63bc3 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-main>
-		<progress-track v-model="status" />
+		<progress-track v-model="trackerConfig" />
 		<div align="center" v-if="booking.user_bankslip_path">
 			<h4 style="margin-top:5%">
 				Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
@@ -56,9 +56,8 @@
 				<el-dialog :visible.sync="dialogVisible">
 					<img :src="dialogImageUrl" width="100%" alt="">
 				</el-dialog> -->
-				<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-success="handleUploadSuccess"
-				    :before-upload="beforeFileUpload"
-					algin="center">
+				<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false"
+				    :on-success="handleUploadSuccess" :before-upload="beforeFileUpload" algin="center">
 					<img v-if="imageUrl" :src="imageUrl" class="avatar">
 					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 				</el-upload>
@@ -122,29 +121,33 @@
 			font-size: 1em;
 		}
 	}
-	  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
+
+	.avatar-uploader .el-upload {
+		border: 1px dashed #d9d9d9;
+		border-radius: 6px;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.avatar-uploader .el-upload:hover {
+		border-color: #409EFF;
+	}
+
+	.avatar-uploader-icon {
+		font-size: 28px;
+		color: #8c939d;
+		width: 178px;
+		height: 178px;
+		line-height: 178px;
+		text-align: center;
+	}
+
+	.avatar {
+		width: 178px;
+		height: 178px;
+		display: block;
+	}
 </style>
 <script>
 	import VueCountdown from '@xkeshi/vue-countdown'
@@ -160,11 +163,14 @@
 		},
 		data() {
 			return {
-				status: 2,
+				trackerConfig: {
+					status: 2,
+					term: null
+				},
 				start: false,
 				loading: false,
 				dialogImageUrl: '',
-				imageUrl:null,
+				imageUrl: null,
 				dialogVisible: false,
 				booking_id: this.$route.params.id,
 				user_slip_form: {
@@ -207,6 +213,7 @@
 					this.booking.bankin_amount = response.data.bia;
 					this.booking.timeout = response.data.timeout * 1000;
 					this.booking.term = response.data.term;
+					this.trackerConfig.term = response.data.term
 
 					if (response.data.user_bankslip_path) {
 						this.booking.user_bankslip_path = response.data.user_bankslip_path
diff --git a/resources/assets/js/pages/booking/x2Completed.vue b/resources/assets/js/pages/booking/x2Completed.vue
new file mode 100644
index 00000000..f2961c26
--- /dev/null
+++ b/resources/assets/js/pages/booking/x2Completed.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-main>
+    <progress-track v-model="tackerConfig"/>
+    <h1>Order Completed</h1>
+    <div class="goBackButton">
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <!-- bankslip  -->
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">China Bank Slip</div>
+          <div class="row">
+            <div  v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'> 
+              <a target="_blank" :href="getURL(cn_bankslip)">
+                <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                <p v-else>Download</p>
+                <br/>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- order details -->
+    <div class="card">
+    <div class="card-header">Order Details</div>
+    <div class="card-body">
+        <div class="row">
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Ref No :</td>
+                  <td>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">Order Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <p v-else>Download</p>
+          </a>  
+        </div>
+      </div>
+    </div>
+  </el-main>
+</template>
+<style>
+  h1 {
+    margin-top:5%;
+    font-size:3vw;
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .goBackButton {
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .uploadedImage {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .uploadedImage:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+	}
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig :{
+          status: 7,
+          term: null,
+      },
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        }
+    }
+  },
+  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) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        loading.close();
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index cd6abbc6..cb35b5a4 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -282,7 +282,7 @@
         <el-table :data="bookingTable">
           <el-table-column label="Ref No." width="100">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
           <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
@@ -308,7 +308,7 @@
           <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
           <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
                            label="" width="180" filter-placement="bottom-end">
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
             <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
@@ -620,7 +620,7 @@ export default {
              
             })
     },
-    BookingStatus (status, booking_id) {
+    BookingStatus (status, booking_id, term) {
       console.log(status)
       // TODO : Get booking status from server
       this.status = status
@@ -652,6 +652,14 @@ export default {
           break
 
         case 5:
+          console.log(term)
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+              this.$router.push({
+              name: 'booking.user.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
           this.$router.push({
             name: 'booking.user.uploadpo',
             params: {id: booking_id }
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 91506aeb..0d1e3498 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -24,6 +24,7 @@ const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.de
 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 X2Completed = () => import('~/pages/booking/x2Completed').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)
 
@@ -75,7 +76,8 @@ export default [
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/po', name: 'booking.user.po', component: PurchaseOrder },
   { path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },
-
+  { path: '/booking/:id/x2-complete', name: 'booking.user.x2complete', component: X2Completed },
+  
   // Admin booking
   { path: '/booking/:id/booking-detail', name: 'booking.admin.booking.detail', component: BookingDetail },
   { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },