diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index e4fd9d02..bff8b973 100644
--- a/resources/assets/vue/app.js
+++ b/resources/assets/vue/app.js
@@ -34,6 +34,13 @@ Vue.use(VueTheMask);
 Vue.use(filters);
 
 Vue.directive('closable', closable);
+Vue.directive('tooltip', function(el, binding){
+    $(el).tooltip({
+        title: binding.value,
+        placement: binding.arg,
+        trigger: 'hover'
+    })
+})
 Vue.mixin({
     methods: {
         route: route
diff --git a/resources/assets/vue/components/bookings/elements/PaymentComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentComponent.vue
index 1db46493..1f9a606f 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentComponent.vue
@@ -13,7 +13,7 @@
                     <download-supplier-white-form-component section="paymentsReportSection" ></download-supplier-white-form-component>
                 </div>
             </div>
-            <div class="row">
+            <div class="row m-b-20">
                 <div class="col-12 col-md-6">
                     <div class="row">
                         <div class="col p-l-0">
diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index bec07cc5..1197f0f1 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -233,7 +233,7 @@
                             <div class="font-heading all-caps fs-10 m-b-5">Our Payment Proof</div>
                             <div class="row" v-if="item.transaction_bill">
                                 <div class="col">
-                                    <div class="row" v-if="item.transaction_bill.status !== 2 && item.transaction_bill.status !== 3">
+                                    <div class="row hide" v-if="item.transaction_bill.status !== 2 && item.transaction_bill.status !== 3">
                                         <div class="col">
                                             <p class="fs-12 muted">Payment proof will be uploaded {{ (parseFloat(item.interval.duration) + 1) <= 0 ? 'today' : (parseFloat(item.interval.duration) + 1) === 2 ? 'tomorrow' : 'in '+(parseFloat(item.interval.duration) + 1)+' days'}} at 4:00 PM</p>
                                         </div>
diff --git a/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue b/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
index 1ff74398..24794be1 100644
--- a/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
@@ -19,37 +19,32 @@
                         </div>
                         <div class="col">
                             <div class="font-heading fs-10 muted all-caps text-right">Export</div>
-                                <div class="row parentcontainer">
-                                        <div class="col d-flex justify-content-end">
-                                            <!-- pdf format output button-->
-                                            <a :href="route('group.pdf', item.id)" target="_blank">
-                                                <button class="btn btn-xs b-rad-none">
-                                                    <i class="fa fa-file-pdf-o"></i>
-                                                </button>
-                                            </a>
-                                            <!-- txt format output button-->
-                                            <a :href="route('group.text', item.id)" target="_blank"> 
-                                                <button class="btn btn-xs b-rad-none">
-                                                    <i class="fa solid fa-file-text-o"></i>
-                                                </button>
-                                            </a>
-                                            <!-- csv format output button-->
-                                            <a :href="route('group.excel', item.id)" target="_blank">
-                                                <button class="btn btn-xs b-rad-none">
-                                                    <i class="fa solid fa-file-excel-o"></i>
-                                                </button>
-                                            </a>
-                                            <!-- invoice format output button-->
-                                            <a :href="route('group.invoice', item.id)" target="_blank">
-                                                <button class="btn btn-xs b-rad-none">
-                                                    <i class="fa fa-list-alt" aria-hidden="true"></i>
-                                                </button>
-                                            </a>
-                                        </div>
+                            <div class="row parentcontainer">
+                                <div class="col d-flex justify-content-end">
+                                    <a :href="route('group.pdf', item.id)" target="_blank">
+                                        <button class="btn btn-xs b-rad-none" v-tooltip:top="'Export in PDF'">
+                                            <i class="fa fa-file-pdf-o bold fs-12"></i>
+                                        </button>
+                                    </a>
+                                    <a :href="route('group.text', item.id)" target="_blank" v-tooltip:top="'Export in Text'">
+                                        <button class="btn btn-xs b-rad-none">
+                                            <i class="fa fa-font bold fs-12"></i>
+                                        </button>
+                                    </a>
+                                    <a :href="route('group.excel', item.id)" target="_blank" v-tooltip:top="'Export in Excel'">
+                                        <button class="btn btn-xs b-rad-none">
+                                            <i class="fa fa-file-excel-o bold fs-12"></i>
+                                        </button>
+                                    </a>
+                                    <a :href="route('group.invoice', item.id)" target="_blank" v-tooltip:top="'Export Invoice PDF'">
+                                        <button class="btn btn-xs b-rad-none">
+                                            <i class="fa fa-list-alt bold fs-12"></i>
+                                        </button>
+                                    </a>
                                 </div>
+                            </div>
                         </div>
                     </div>
-                    
                     <div class="row">
                         <div class="col-auto">
                             <div class="font-heading fs-10 muted all-caps">Currency Rate</div>
diff --git a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
index c8c581ee..59291ed1 100644
--- a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
@@ -6,7 +6,7 @@
                     <small class="bold fs-10 text-danger">{{error}}</small>
                 </div>
             </div>
-            <div class="row m-b-15" v-show="calculation.date && !error">
+            <div class="row m-b-15 hide" v-show="calculation.date && !error">
                 <div class="col padding-15 bg-master-lightest text-center m-l-15 m-r-15">
                     <div class="fs-14 muted" >The recipient will receive the transfer amount by <br><span class="bold text-success">{{ this.calculation.receive_date }}</span></div>
                 </div>
@@ -225,7 +225,7 @@
                 if (!this.currentSegmentNames.includes('enable enter MYR rate')) {
                     return true;
                 }
-                
+
                 return false;
             },
         },