diff --git a/resources/assets/js/components/AkauntingContactCard.vue b/resources/assets/js/components/AkauntingContactCard.vue
index 212c5dad6..5ee7d4d1e 100644
--- a/resources/assets/js/components/AkauntingContactCard.vue
+++ b/resources/assets/js/components/AkauntingContactCard.vue
@@ -98,12 +98,12 @@
 
                 <div class="absolute flex flex-col mt-2">
                     <button type="button" class="p-0 text-xs text-purple ltr:text-left rtl:text-right" @click="onContactEdit">
-                        <span class="border-b border-transparent transition-all hover:border-purple">
+                        <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">
                             {{ editContactText.replace(':contact_name', contact.name).replace(':field', contact.name) }}
                         </span>
                     </button>
                     <button type="button" class="p-0 text-xs text-purple ltr:text-left rtl:text-right" @click="onContactList">
-                        <span class="border-b border-transparent transition-all hover:border-purple">
+                        <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">
                             {{ chooseDifferentContactText }}
                         </span>
                     </button>
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index 5c54baa21..9d025c80a 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -286,7 +286,7 @@ return [
     ],
 
     'empty' => [
-        'documentation' => 'Check out the <a href=":url" target="_blank" class="text-green border-b border-transparent transition-all hover:text-green-700 hover:border-green-700">documentation</a> for more details.',
+        'documentation' => 'Check out the <a href=":url" target="_blank" class="text-green bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-green transition-backgroundSize">documentation</a> for more details.',
         'items' => 'Items can be products or services. You can use items when creating invoices and bills to have the price, tax etc fields populated.',
         'invoices' => 'Invoices can be one time or recurring. You can send them to customers and start accepting online payments.',
         'revenues' => 'Revenue is a paid income transaction. It can be an independent record (i.e. deposit) or attached to an invoice.',
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index b201acbb2..36a661f2c 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -190,18 +190,14 @@
                                 @if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
                                     <div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
                                         <button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)">
-                                            <span class="border-b border-transparent transition-all hover:border-purple">
-                                                {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
-                                            </span>
+                                            <x-text.hover text="{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}" />
                                         </button>
                                     </div>
                                 @endif
 
                                 <div class="text-right border-0 p-0 pr-4">
                                     <button type="button" class="text-xs text-purple" @click="onAddTax(index)">
-                                        <span class="border-b border-transparent transition-all hover:border-purple">
-                                            {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
-                                        </span>
+                                        <x-text.hover text="{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}" />
                                     </button>
                                 </div>
                             </div>
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index cc24db664..20d3f0f58 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -79,10 +79,8 @@
                             <td class="border-t-0 py-0"></td>
 
                             <td class="text-right border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
-                                <div v-if="show_discount_text">
-                                    <span class="border-b border-transparent transition-all text-sm text-purple cursor-pointer hover:border-purple" v-if="!totals.discount_text" @click="onAddDiscount()">
-                                        {{ trans('invoices.add_discount') }}
-                                    </span>
+                                <div v-if="show_discount_text" v-if="!totals.discount_text" @click="onAddDiscount()">
+                                    <x-text.hover text="{{ trans('invoices.add_discount') }}" />
                                 </div>
 
                                 <span v-if="totals.discount_text" v-html="totals.discount_text"></span>
diff --git a/resources/views/components/documents/show/get-paid.blade.php b/resources/views/components/documents/show/get-paid.blade.php
index 5a9014bcb..4f8491287 100644
--- a/resources/views/components/documents/show/get-paid.blade.php
+++ b/resources/views/components/documents/show/get-paid.blade.php
@@ -62,16 +62,12 @@
 
                         @if (! empty($transaction->contact) && $transaction->contact->email)
                             <x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
-                                <span class="border-b border-transparent transition-all hover:border-purple">
-                                    {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
-                                </span>
+                                <x-text.hover text="{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}" />
                             </x-button>
                         @else
                             <x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
                                 <x-button class="text-purple mt-1" override="class" disabled="disabled">
-                                    <span class="border-b border-transparent transition-all hover:border-purple">
-                                        {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
-                                    </span>
+                                    <x-text.hover text="{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}" />
                                 </x-button>
                             </x-tooltip>
                         @endif
@@ -84,9 +80,7 @@
                             class="text-purple mt-1"
                             override="class"
                         >
-                            <span class="border-b border-transparent transition-all hover:border-purple">
-                                {{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
-                            </span>
+                            <x-text.hover text="{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}" />
                         </x-button>
 
                         <span> - </span>
@@ -105,7 +99,7 @@
                             :message="$message"
                             :label="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
                             class="text-purple mt-1"
-                            text-class="border-b border-transparent transition-all hover:border-purple"
+                            text-class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize"
                             override="class"
                         />
                     </div>
diff --git a/resources/views/components/documents/show/make-payment.blade.php b/resources/views/components/documents/show/make-payment.blade.php
index 67773333b..6c693280b 100644
--- a/resources/views/components/documents/show/make-payment.blade.php
+++ b/resources/views/components/documents/show/make-payment.blade.php
@@ -46,16 +46,12 @@
 
                         @if (! empty($transaction->contact) && $transaction->contact->email)
                             <x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
-                                <span class="border-b border-transparent transition-all hover:border-purple">
-                                    {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
-                                </span>
+                                <x-text.hover text="{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}" />
                             </x-button>
                         @else
                             <x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
                                 <x-button class="text-purple mt-1" override="class" disabled="disabled">
-                                    <span class="border-b border-transparent transition-all hover:border-purple">
-                                        {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
-                                    </span>
+                                    <x-text.hover text="{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}" />
                                 </x-button>
                             </x-tooltip>
                         @endif
@@ -68,9 +64,7 @@
                             class="text-purple mt-1"
                             override="class"
                         >
-                            <span class="border-b border-transparent transition-all hover:border-purple">
-                                {{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
-                            </span>
+                            <x-text.hover text="{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}" />
                         </x-button>
 
                         <span> - </span>
@@ -89,7 +83,7 @@
                             :message="$message"
                             :label="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
                             class="text-purple mt-1"
-                            text-class="border-b border-transparent transition-all hover:border-purple"
+                            text-class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize"
                             override="class"
                         />
                     </div>
diff --git a/resources/views/components/text/hover.blade.php b/resources/views/components/text/hover.blade.php
new file mode 100644
index 000000000..d6620c703
--- /dev/null
+++ b/resources/views/components/text/hover.blade.php
@@ -0,0 +1,11 @@
+@props(['color', 'text'])
+
+@php
+    if (empty($color)) {
+        $color = 'to-purple';
+    }
+@endphp
+
+<span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent {{ $color }} transition-backgroundSize">   
+    {{ $text }} 
+</span>
\ No newline at end of file
diff --git a/resources/views/components/widgets/header.blade.php b/resources/views/components/widgets/header.blade.php
index d2681a235..c7bdf5f91 100644
--- a/resources/views/components/widgets/header.blade.php
+++ b/resources/views/components/widgets/header.blade.php
@@ -8,9 +8,7 @@
         <div class="flex items-center">
             @if ($report = $class->getReportUrl())
                 <a href="{{ $report }}" class="text-purple text-sm mr-3">
-                    <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">    
-                        {{ trans('widgets.view_report') }}
-                    </span>
+                    <x-text.hover text="{{ trans('widgets.view_report') }}" />
                 </a>
             @endif
 
diff --git a/resources/views/settings/email-templates/edit.blade.php b/resources/views/settings/email-templates/edit.blade.php
index 93b52a2ad..2fd086c5c 100644
--- a/resources/views/settings/email-templates/edit.blade.php
+++ b/resources/views/settings/email-templates/edit.blade.php
@@ -14,8 +14,8 @@
                             <div class="flex flex-col">
                                 <div class="mb-3">
                                     @foreach ($template as $item)
-                                        <button class="text-xs truncate text-left border-b border-transparent transition-all hover:border-purple hover:text-purple" @click="onEditEmailTemplate({{ $item->id }}, $event)" >
-                                            {{ trans($item->name) }}
+                                        <button class="text-xs truncate text-left" @click="onEditEmailTemplate({{ $item->id }}, $event)" >
+                                            <x-text.hover text="{{ trans($item->name) }}" />
                                         </button>
                                     @endforeach
                                 </div>