diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 6d183ea7..8111b069 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="tackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -148,13 +149,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 
 export default {
   components: {
-    'progress-track': ProgressTrack
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 99ebedaf..5f304b96 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else 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>
@@ -102,13 +103,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 
 export default {
   components: {
-    'progress-track': ProgressTrack
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 518e3fac..bc264ba5 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Processing Invoice</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -144,13 +145,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 
 export default {
   components: {
-    'progress-track': ProgressTrack
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 9e5fba88..230604b0 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,7 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
-
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <div align="center">
       <h4 style="margin-top:5%;">Processing Invoice</h4>
       <br>
@@ -131,13 +131,14 @@
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 
 export default {
   components: {
-    'progress-track': ProgressTrack
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index b009fad7..fe103a79 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Bankin Slip Approved</h1>
     <h2>Transfer In Progress</h2>
     <div class="goBackButton">
@@ -123,13 +124,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 
 export default {
   components: {
-    'progress-track': ProgressTrack
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 82f3a7da..6b7d00f7 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Transfer Completed</h1>
     <h2> Please upload your purchase order </h2>
     <!-- upload card -->
@@ -183,14 +184,15 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-  import axios from 'axios'
+ import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
+export default {
+  components: {
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
+  },
     data() {
       return {
         booking_id: this.$route.params.id,
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 56a63bc3..828b5154 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,8 @@
 <template>
 	<el-main>
-		<progress-track v-model="trackerConfig" />
+		<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
+		    v-model="trackerConfig" />
+		<progress-track v-else 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
@@ -152,6 +154,7 @@
 <script>
 	import VueCountdown from '@xkeshi/vue-countdown'
 	import ProgressTrack from '~/components/ProgressTrack'
+	import X2ProgressTrack from '~/components/X2ProgressTrack'
 	import axios from 'axios'
 
 	export default {
@@ -159,7 +162,8 @@
 		name: 'MyComponent',
 		components: {
 			'vue-countdown': VueCountdown,
-			'progress-track': ProgressTrack
+			'progress-track': ProgressTrack,
+			'x2-progress-track': X2ProgressTrack
 		},
 		data() {
 			return {
diff --git a/resources/assets/js/pages/booking/x2Completed.vue b/resources/assets/js/pages/booking/x2Completed.vue
index f2961c26..6bf26565 100644
--- a/resources/assets/js/pages/booking/x2Completed.vue
+++ b/resources/assets/js/pages/booking/x2Completed.vue
@@ -1,6 +1,8 @@
 <template>
   <el-main>
-    <progress-track v-model="tackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
+      v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -11,7 +13,7 @@
         <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'> 
+            <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>
@@ -24,8 +26,8 @@
     </div>
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -36,11 +38,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -58,15 +60,17 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
                   <td></td>
-                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                  <td>
+                    <b>MYR {{ booking_details.bia }}</b>
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -81,7 +85,7 @@
           <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>  
+          </a>
         </div>
       </div>
     </div>
@@ -89,98 +93,104 @@
 </template>
 <style>
   h1 {
-    margin-top:5%;
-    font-size:3vw;
-    text-align:center;
-    margin-bottom:3%;
+    margin-top: 5%;
+    font-size: 3vw;
+    text-align: center;
+    margin-bottom: 3%;
   }
+
   .goBackButton {
-    text-align:center;
-    margin-bottom:3%;
+    text-align: center;
+    margin-bottom: 3%;
   }
+
   .uploadedImage {
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      margin-left: auto;
-      margin-right: auto;
-      width: 150px;
-      display: block;
+    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 {
+    .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'
+  import ProgressTrack from '~/components/ProgressTrack'
+  import X2ProgressTrack from '~/components/X2ProgressTrack'
+  import axios from 'axios'
 
-export default {
-  components: {
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      trackerConfig :{
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
+    },
+    data() {
+      return {
+        trackerConfig: {
           status: 7,
           term: null,
-      },
-      loading_btn: false,
-      booking_details:{
+        },
+        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'
-        })
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
-  },
-  methods: {
-    getExtension(path){
-      return path.slice(-3);
+
+      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'
+          })
+        })
     },
-    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;
+    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>
+</script>
\ No newline at end of file