diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 4794b44d..e9d8958b 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -8,198 +8,130 @@
       <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">
+    
+    <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 id="app">
+      <el-row :gutter="10">
+        <el-col :xs="28" :sm="10" :md="8" :lg="12" :xl="14">
             <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>
+              
+                <table>
                   <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Order Number :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Date :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Customer Marking :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <div class="cell">CIEF/150ECE</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Term :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <div class="cell">{{ booking_details.term }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                </div>
+        </el-col>
+        <el-col :xs="28" :sm="10" :md="8" :lg="12" :xl="14">
+          <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+                <table>
                   <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell">CNY/RMB :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <div class="cell">CNY {{ booking_details.amount }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell">+ Service Charge :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell">/ RATE :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <div class="cell">{{ booking_details.rate }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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>
+                </div>
+        </el-col>
+      </el-row>
+      </div>
+    </el-card>
     <br>
 
     <el-row justify="center" align="center">
@@ -221,7 +153,13 @@
   .booking-details {
     font-weight: bold;
   }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
 </style>
+<script src="//unpkg.com/vue/dist/vue.js"></script>
+<script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 693401f7..3ae1ae56 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -8,198 +8,130 @@
       <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">
+    
+    <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 id="app">
+      <el-row :gutter="10">
+        <el-col :xs="28" :sm="10" :md="8" :lg="12" :xl="14">
             <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>
+              
+                <table>
                   <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Order Number :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Date :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Customer Marking :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <div class="cell">CIEF/150ECE</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                    <tr>
+                      <td>
+                        <div class="cell" align="right">Term :</div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <div class="cell">{{ booking_details.term }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_2_column_10 is-left ">
+                      <td>
                         <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>
+                </div>
+        </el-col>
+        <el-col :xs="28" :sm="10" :md="8" :lg="12" :xl="14">
+          <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+                <table>
                   <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell">CNY/RMB :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <div class="cell">CNY {{ booking_details.amount }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell">+ Service Charge :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell">/ RATE :</div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <div class="cell">{{ booking_details.rate }}</div>
                       </td>
                     </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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 ">
+                    <tr>
+                      <td>
                         <div class="cell"></div>
                       </td>
-                      <td class="el-table_3_column_12 is-left ">
+                      <td>
                         <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>
+                </div>
+        </el-col>
+      </el-row>
+      </div>
+    </el-card>
     <br>
 
     <el-row justify="center" align="center">