diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 0161e8b0..21241dfb 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
@@ -13,10 +13,14 @@
 </template>
 
 <style type="text/css">
-    /* .el-row {
-        margin: 20px 0;
-    }
-
+    @media screen and (max-width: 800px) {
+		 .progressBar {
+            width: 60%;
+        }
+		
+	}
+   
+    /*
     .el-steps {
         padding-top: 70px;
     }
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 69808a3a..c915fd7e 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,278 +1,144 @@
 <template>
   <el-main>
     <progress-track v-model="status"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Order Completed</h4>
-      <br>
+    <h1>Order Completed</h1>
+    <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
-    <br>
-
     <!-- bankslip  -->
-    <br>
-    <el-row :gutter="12" justify="center" align="center">
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Purchase Order</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Purchase Order</div>
+          <div class="row">
+            <div class="card-body">
+              <a target=" _blank" :href="booking_details.user_po_path">
+                <img v-bind:src="booking_details.user_po_path" class="uploadedImage">
               </a>
-            </el-col>
-          </el-row>
-
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>China Bank Slip</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
-              </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Invoice</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">     
-                <img v-bind:src="booking_details.invoice_path" class="image">
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
-    <br>
-    <!-- bank slips END --> 
-
-    <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> -->
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
-          </div>
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </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>Payment Bankin Slip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">China Bank Slip</div>
+          <div class="row">
+            <div class="card-body">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
+                <img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
+              </a>
+            </div>
+          </div>
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Invoice</div>
+          <div class="row">
+            <div class="card-body">     
+                <img class="uploadedImage" src="http://via.placeholder.com/900x1615">   
+            </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>Order Number :</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="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>    
+        </div>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  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'
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index d1de4156..c5b00205 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,226 +1,104 @@
 <template>
   <el-main>
     <progress-track v-model="status"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
-      <br>
+    <h1>Bankin Slip Verification in Progress</h1>
+    <div class="goBackButton">
       <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> -->
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
+    <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>Order Number :</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="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </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>
-        <!-- <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>
+      </div>
+    </div>
     <br>
-
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Banking Slip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+    <div class="card">
+      <div class="card-header">Order Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>    
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:5%;
+    text-align:center;
+    font-size:3vw;
+    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);
+  }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+	}
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index f7ba1050..50cdab99 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -1,281 +1,123 @@
 <template>
   <el-main>
     <progress-track v-model="status"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Processing Invoice</h4>
-      <br>
+    <h1>Processing Invoice</h1>
+    <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
-    <br>
-
     <!-- bankslip  -->
-    <br>
-    <el-row :gutter="12" justify="center" align="center">
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Purchase Order</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Purchase Order</div>
+          <div class="row">
+            <div class="card-body">
               <a target=" _blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+                <img v-bind:src="booking_details.user_po_path" class="uploadedImage">
               </a>
-            </el-col>
-          </el-row>
-
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>China Bank Slip</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+            </div>
           </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">China Bank Slip</div>
+          <div class="row">
+            <div class="card-body">
               <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+                <img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
               </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Invoice</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">     
-                <img width="100%" height="100%" src="http://via.placeholder.com/900x1615">   
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
-    <br>
-    <!-- bank slips END --> 
-
-    <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> -->
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
-          </div>
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </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>Payment Bankin Slip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Invoice</div>
+          <div class="row">
+            <div class="card-body">     
+                <img class="uploadedImage" src="http://via.placeholder.com/900x1615">   
+            </div>
+          </div>
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
-            </a>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </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>Order Number :</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="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>    
+        </div>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:5%;
+    font-size:3vw;
+    text-align:center;
+    margin-bottom:3%;
   }
-  .image {
+  .goBackButton {
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .uploadedImage {
       border: 1px solid #ddd;
       border-radius: 4px;
       margin-left: auto;
@@ -283,9 +125,20 @@
       width: 150px;
       display: block;
   }
-  .image:hover {
+  .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'
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 5bb61d5d..77778baa 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -60,213 +60,69 @@
     <br>
     <!-- bank slips END --> 
 
-    <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> -->
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></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>Order Number :</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="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </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>
-        <!-- <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>Payment Bankin Slip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+      </div>
+    </div>
+     <br>
+    <div class="card">
+      <div class="card-header">Payment Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>    
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 5fac361e..8db07eaf 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,226 +1,115 @@
 <template>
   <el-main>
     <progress-track v-model="status"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Bankin Slip Aprroved <br><br> Transfer In Progress</h4>
-      <br>
+    <h1>Bankin Slip Approved</h1>
+    <h2>Transfer In Progress</h2>
+    <div class="goBackButton">
       <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> -->
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></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>Order Number :</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="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </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>
-        <!-- <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>
+    </div>
+    <div class="card">
+      <div class="card-header">Order Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>    
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:5%;
+    font-size:3vw;
+    text-align:center;
   }
+  h2 {
+    font-size:2vw;
+    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;
+    }
+    h2 {
+      font-size: 0.8em;
+    }
+	}
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 5ce467b5..c74e9076 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,260 +1,172 @@
 <template>
-  <el-main>
-    <progress-track v-model="status"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Transfer Completed</h4>
-      <h5> Please upload your purchase order </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-main>
+  <progress-track v-model="status"/>
+  <h1>Transfer Completed</h1>
+  <h2> Please upload your purchase order </h2>
+  <!-- upload card -->
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <div class="card-header">Upload PO</div>
+        <!-- upload image -->
+        <div class="card-body">
+          
           <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
-                     :on-remove="handleRemove"
-                     class="upload-demo"
-                     drag
-                     multiple>
+                      :on-remove="handleRemove"
+                      class="upload-demo uploadAreaOne"
+                      drag
+                      multiple>
             <i class="el-icon-upload"/>
             <div class="el-upload__text">Drop file here or
               <em>click to upload</em>
             </div>
             <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
           </el-upload>
-
-          <br>
-
+          <el-upload
+            class="upload-demo uploadAreaTwo"
+            :action="'/api/booking/' + booking_id + '/upload-po'"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            multiple
+            :file-list="fileList">
+            <el-button size="small" type="primary">Click to upload</el-button>
+            <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+          </el-upload>
+          
           <div class="bottom clearfix" style="text-align:right;">
             <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
           </div>
-          <!-- upload image end -->
-
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>China Bank Slip</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
-              </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> -->
+        <!-- upload image end -->
         </div>
-                <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="200">
-                    <col name="el-table_2_column_10" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card">
+        <div class="card-header">China Bank Slip</div>
+        <div class="card-body">
+          <a target="_blank" :href="booking_details.china_bankslip_path">
+            <img v-bind:src="booking_details.china_bankslip_path" class="bankinSlipImage">
+          </a>
+        </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>Order Number :</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="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">
-                          <b>MYR {{ booking_details.bia }}</b>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </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>
-      </el-card>
-    </el-row>
-    <br>
-
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Order Bankin Slip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">Order Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
+            <img v-bind:src="booking_details.user_bankslip_path" class="bankinSlipImage">
+          </a>    
         </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
-            </a>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-    .booking-details {
-        font-weight: bold;
-    }
-    .image {
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      margin-left: auto;
-      margin-right: auto;
-      width: 150px;
-      display: block;
+  * {
+    box-sizing: border-box;
   }
-    .image:hover {
-      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  h1 {
+    margin-top:5%;
+    font-size:3vw;
+    text-align:center;
+  }
+  h2 {
+    font-size:2vw;
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .booking-details {
+    font-weight: bold;
+  }
+  .bankinSlipImage {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .bankinSlipImage:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
+  .uploadAreaTwo {
+    display: none;
+  }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    .uploadAreaOne {
+      display: none;
     }
+    .uploadAreaTwo {
+      display: unset;
+    }
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+    h2 {
+      font-size: 0.8em;
+    }
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 593af081..b5d1c6bd 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,102 +1,107 @@
 <template>
 	<el-main>
-	<progress-track v-model="status"/>
-
-	<div align="center" v-if="booking.user_bankslip_path">
-		<h4 style="margin-top:5%" >
-		Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-		Reason : {{ booking.reject_reason }}
-		</h4>
-		<br>
-		<br>
-	</div>
-
-	 <div v-else align="center">
-		<h4 style="margin-top:5%;">Waiting For Payment</h4>
-	</div>
-
-	<el-row justify="center" align="center">
-		<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
-		<tbody>
-			<tr>
-			<td class="el-table_2_column_9 is-right ">Amount : </td>
-			<td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-				<b> RMB {{ booking.amount }} </b>
-			</td>
-			</tr>
-			<tr>
-			<td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
-			<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-				<b> MYR {{ booking.bankin_amount }} </b>
-			</td>
-			</tr>
-		</tbody>
-		</table>
-		<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
-		<tr>
-			<td align="center">
-				{{bankDetail.company_name}}<br/>
-				{{bankDetail.bank_name}} : {{bankDetail.acc_no}}
-			</td>
-			
-		</tr>
-		</table>
-	</el-row>
-	<br>
-
-	<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
-
-	<div align="center">
-
-		<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-		<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-		</vue-countdown>
-		<!-- <button v-on:click="startTimer">Start timer</button> -->
-	</div>
-	<br>
-
-	<!-- upload image -->
-	<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-				 list-type="picture-card" align="center">
-		<i class="el-icon-plus" />
-	</el-upload>
-	<el-dialog :visible.sync="dialogVisible">
-		<img :src="dialogImageUrl" width="100%" alt="">
-	</el-dialog>
-	<br>
-	<!-- upload image end -->
-
-	<!-- <el-form label-width="300px">
-	<el-form-item label="Amount (RM) :"> -->
-	<div align="center">
-		Bankin Amount (RM) :
-		<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-		<div align="center">
-			<el-form-item prop="transfer_amount">
-			<el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
-			/>
-			</el-form-item>
-			<el-form-item>
-			<div align="center">
-				<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
-				<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-				Upload Later
-				</router-link>
-			</div>
-			</el-form-item>
+		<progress-track v-model="status"/>
+		<div align="center" v-if="booking.user_bankslip_path">
+			<h4 style="margin-top:5%" >
+			Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
+			Reason : {{ booking.reject_reason }}
+			</h4>
+			<br>
+			<br>
+		</div>
+		<div v-else align="center">
+			<h1>Waiting For Payment</h1>
 		</div>
-		</el-form>
-		<br>
-		<br>
-	</div>
-	<!-- </el-form-item>
-	</el-form> -->
 
+		<div class="row">
+			<table class="table table-striped">
+				<tbody>
+					<tr>
+						<td>Amount : </td>
+						<td><b>RMB {{ booking.amount }}</b></td>
+					</tr>
+					<tr>
+						<td>Bankin Amount : </td>
+						<td><b> MYR {{ booking.bankin_amount }}</b></td>
+					</tr>
+					<tr>
+						<td colspan="2">
+							<b>{{ bankDetail.company_name }}</b><br>
+							{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<div class="row timer">
+			<div class="col">
+				<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+				<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+				</vue-countdown>
+			</div>
+		</div>
+		<!-- upload image -->
+		<div class="row upload">
+			<div class="col">
+				<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+							list-type="picture-card" align="center">
+					<i class="el-icon-plus" />
+				</el-upload>
+				<el-dialog :visible.sync="dialogVisible">
+					<img :src="dialogImageUrl" width="100%" alt="">
+				</el-dialog>
+			</div>
+		</div>
+		<!-- upload image end -->
+		<div class="row bankinAmount">
+			<div class="col">
+				Bankin Amount (RM) :<br>
+				<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+					<el-form-item prop="transfer_amount">
+						<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
+					</el-form-item>
+					<el-form-item>
+						<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+						<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+							Upload Later
+						</router-link>
+					</el-form-item>	
+				</el-form>
+			</div>
+		</div>
 	</el-main>
 </template>
 <style>
-	.booking-details {
-	font-weight: bold;
+	h1 {
+		margin-top:5%;
+		font-size:3vw;
+		text-align:center;
+		margin-bottom:3%;
+  	}
+	.timer, .upload, .bankinAmount {
+		text-align: center;
+	}
+	
+	.transferAmountInput {
+		width: 20%;
+	}
+	.row {
+    	margin-bottom: 3%;
+  	}
+	td:last-child {
+		text-align:center;
+	}
+	@media screen and (max-width: 767px) {
+		.transferAmountInput {
+			width: 60%;
+		}
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      		font-size: 1em;
+    	}
+		
 	}
 </style>
 <script>
@@ -142,8 +147,7 @@ export default {
 				x2_bank_id: null,
 				beneficiary_id: null
 			},
-			bankDetail : {},
-
+			bankDetail: {}
 		}
 	},
 	beforeCreate () {
@@ -189,7 +193,7 @@ export default {
 		})
 		})
 	},
-	beforeMount(){
+	beforeMount() {
 		this.updateBankDetail();
 	},
 	methods: {
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 99e51477..04154d47 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -7,7 +7,6 @@
           I need :
           <el-select v-model="value" placeholder="RMB">
             <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            <!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
           </el-select>
         </div>
       </el-col>
@@ -15,7 +14,7 @@
     <br>
     <el-row :gutter="20" type="flex" justify="center" align="middle">
       <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
-        <div class="grid-content bg-purple" align="left">
+        <div class="grid-content bg-purple" align="right">
           <el-input v-model="booking.amount" placeholder="Amount" />
         </div>
       </el-col>
@@ -29,7 +28,7 @@
         <div class="grid-content bg-purple" align="right" />
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="left" />
+        <div class="grid-content bg-purple" align="right" />
       </el-col>
       <el-col>
         <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
@@ -44,15 +43,14 @@
 
     <el-row :gutter="20" type="flex" justify="center" align="middle">
       <el-col>
-        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="right">
           <div class="grid-content bg-purple" align="right">
             <i type="button" class="el-icon-question" circle/>
           </div>
         </el-tooltip>
       </el-col>
-      <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
       <el-col>
-        <div class="grid-content bg-purple" align="left">X1 :</div>
+        <div class="grid-content bg-purple" align="right">X1 :</div>
       </el-col>
       <el-col>
         <div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
@@ -92,14 +90,14 @@
     <br>
     <el-row :gutter="20" type="flex" justify="center" align="middle">
       <el-col>
-        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="right">
           <div class="grid-content bg-purple" align="right">
             <i type="button" class="el-icon-question" circle/>
           </div>
         </el-tooltip>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="left">X2 :</div>
+        <div class="grid-content bg-purple" align="right">X2 :</div>
       </el-col>
       <el-col>
         <div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
@@ -166,69 +164,51 @@
 
     <!-- Booking_confirmation_popup -->
     <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
-
-      <!-- Table_booking_confirmation -->
-      <!-- <el-table :data="bookingConfirmTable" align="center">
-        <el-table-column prop="data1" align="right" width="200" />
-        <el-table-column prop="data2" align="left" width="200" />
-      </el-table> -->
-      <!-- Table_booking_confirmation-end -->
-
-      <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
+      <table class="table table-striped">
         <tbody>
           <tr>
-            <td class="el-table_2_column_9 is-right ">Date : </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
+            <td>Date : </td>
+            <td> {{ bookingConfirmTable.date }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
+            <td>Customer Marking : </td>
+            <td> {{ bookingConfirmTable.marking }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
+            <td>Payment Method : </td>
+            <td> {{ bookingConfirmTable.payment_method }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
+            <td>CNY/RMB : </td>
+            <td> {{ bookingConfirmTable.amount }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
+            <td>+ Service Charge : </td>
+            <td> RMB {{ bookingConfirmTable.service_charge }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
+            <td> RATE :</td>
+            <td> {{ bookingConfirmTable.rate }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "/>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
+            <td>China Beneficiary Acc :</td>
+            <td> {{ bookingConfirmTable.account_name }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "/>
-            <td width="200" class="el-table_2_column_9 is-left "/>
-          </tr>
-
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
-          </tr>
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+            <td>Bank in Amount :</td>
+            <td>
               <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
             </td>
           </tr>
         </tbody>
       </table>
-
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
         <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
       </span>
     </el-dialog>
     <!-- Booking_confirmation_popup -->
-    
+
     <br>
     <br>
     <hr>
@@ -286,6 +266,7 @@
       </el-button>
     </div>
     <!-- Booking Table-end -->
+    </div>
   </el-main>
 </template>
 <style>