diff --git a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
index 19a81573..14f31e80 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
@@ -7,13 +7,13 @@
                     <div class="row align-items-center">
                         <div class="col p-t-5 p-b-5">
                             <div class="row">
-                                <div class="col-auto">
+                                <div class="col-6 col-md-6 col-lg-3">
                                     <div class="font-heading fs-10 muted all-caps">Reference</div>
                                     <div class="font-heading fs-10">
                                         {{item.bill_no}}
                                     </div>
                                 </div>
-                                <div class="col-auto">
+                                <div class="col-6 col-md-6 col-lg-3">
                                     <div class="font-heading fs-10 muted all-caps">Transfer No.</div>
                                     <a :href="route('booking.details', item.booking.marking)">
                                         <div class="font-heading fs-10">
@@ -21,13 +21,13 @@
                                         </div>
                                     </a>
                                 </div>
-                                <div class="col-auto">
+                                <div class="col-6 col-md-auto">
                                     <div class="font-heading fs-10 muted all-caps">Marking</div>
                                     <div class="font-heading fs-10">
                                         {{item.booking.company.reference}}
                                     </div>
                                 </div>
-                                <div class="col text-right">
+                                <div class="col text-lg-right">
                                     <div class="font-heading fs-10 muted all-caps">Date</div>
                                     <div class="font-heading fs-10">
                                         {{item.documents.created_at}}
@@ -35,10 +35,10 @@
                                 </div>
                             </div>
                             <div class="row m-t-10">
-                                <div class="col-auto">
+                                <div class="col-6 col-md-6 col-lg-3">
                                     <div class="font-heading fs-10 muted all-caps">Payment Proof</div>
                                     <div class="row no-margin" v-if="item.documents != null">
-                                        <div v-for="file in item.documents.files" v-bind:key="file.id"  class="col-auto no-padding">
+                                        <div v-for="file in item.documents.files" v-bind:key="file.id"  class="col-6 col-md-auto no-padding">
                                             <document-file-viewer-component :file="file">
                                                 <template slot="button">
                                                     <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
@@ -49,7 +49,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto">
+                                <div class="col-6 col-md-6 col-lg-3">
                                     <div class="font-heading fs-10 muted all-caps">Amount</div>
                                     <div class="font-heading fs-12 text-success bold">
                                         MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
@@ -61,7 +61,7 @@
                                         {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                     </div>
                                 </div>
-                                <div v-if="!no_action" class="col-auto text-right">
+                                <div v-if="!no_action" class="col-6 col-md-auto text-right">
                                     <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="rejectPayment">
                                         <i class="fa fa-times fa-fw"></i>
                                     </button>
diff --git a/resources/views/pages/payments.blade.php b/resources/views/pages/payments.blade.php
index 437043cc..00e480c3 100644
--- a/resources/views/pages/payments.blade.php
+++ b/resources/views/pages/payments.blade.php
@@ -3,7 +3,7 @@
     <div class="row">
         <div class="col bg-white p-t-15 p-b-15">
             <div class="row no-margin">
-                <div class="col-4">
+                <div class="col-12 col-md-4">
                     <div class="row m-b-15 p-b-10 b-b b-grey">
                         <div class="col">
                             <small class="all-caps muted fs-10">Complete Payments</small>
@@ -19,7 +19,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-4">
+                <div class="col-12 col-md-4">
                     <div class="row m-b-15 p-b-10 b-b b-grey">
                         <div class="col">
                             <small class="all-caps muted fs-10">Complete Currency Orders</small>