diff --git a/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue b/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
index 45722aaf..7c3d5494 100644
--- a/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
@@ -3,18 +3,21 @@
         <div class="col">
             <div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
                 <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" @click="selectVoucher(item)">
-                    <div class="row parentContainer">
-                        <div class="col">
-                            <p>{{ item.voucher.code }}</p>
+                    <div class="row fs-10 p-b-5">List of Vouchers, click to select</div>
+                    <div class="row">
+                        <!-- <div class="col">
                             <p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value/100 }} Discount</p>
                             <p v-if="item.voucher.type == 'PERCENT'">{{ item.voucher.value }}% Discount</p>
-                        </div>
-                        <div class="col" v-if="item.voucher.end_date">
+                        </div> -->
+                        <span>{{ item.voucher.code }}</span>
+                    </div>
+                    <div class="row">
+                        <span v-if="item.voucher.end_date">
                             Valid till {{ item.voucher.end_date }}
-                        </div>
-                        <div class="col" v-else>
+                        </span>
+                        <span v-else>
                             No expiry date
-                        </div>
+                        </span>
                     </div>
                 </div>
             </div>
diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 50c6c701..50a421b5 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -244,11 +244,11 @@
                                                             <i class="fa fa-times muted"></i>
                                                         </div>
                                                     </div>
-                                                    <div class="col-auto p-r-10 p-l-10">
+                                                    <!-- <div class="col-auto p-r-10 p-l-10">
                                                         <button class="btn btn-xs btn-outline-info b-rad-none m-r-5 requestModal" data-type="voucherList">
                                                             <i class="fa fa-list"></i>
                                                         </button>
-                                                    </div>
+                                                    </div> -->
                                                 </div>
                                             </validation-wrapper-component>
                                         </div>
@@ -256,17 +256,17 @@
                                             <list-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers-component>
                                         </modal-component>
                                     </div>
+                                    <div class="row m-l-0 m-r-0" v-show="showApplyVoucher">
+                                        <div class="col">
+                                            <available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
+                                        </div>
+                                    </div>
                                     <span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
                                     <div class="row m-l-0 m-r-0" style="height: 20px">
                                         <i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
                                         <span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
                                         <span class="text-success" v-if="voucherCodeFailedReason === '' && voucherValidated">Voucher applied</span>
                                     </div>
-                                    <div class="row m-l-0 m-r-0">
-                                        <div class="col">
-                                            <available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
-                                        </div>
-                                    </div>
                                     <div class="row m-t-5">
                                         <div class="col">
                                             <div class="row p-l-15 p-r-15">