diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index abb7a17e..39e22279 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/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>