diff --git a/public/css/app.css b/public/css/app.css
index 7382abd97..25b5300d6 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1451,10 +1451,16 @@ html[dir='rtl'] .index-actions:nth-child(3){
     }
 
 table thead a{
-  border-bottom-width: 1px;
-  border-color: transparent;
-  -webkit-transition-property: all;
-  transition-property: all;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tw-gradient-stops)));
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+  --tw-gradient-from: transparent;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
+  --tw-gradient-to: #424242;
+  background-size: 0 2px;
+  background-position:  0 100%;
+  background-repeat: no-repeat;
+  -webkit-transition-property: background-size;
+  transition-property: background-size;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 150ms;
@@ -1462,6 +1468,7 @@ table thead a{
 }
 
 table thead a:hover{
+  background-size: 100% 2px;
   --tw-border-opacity: 1;
   border-color: rgb(66 66 66 / var(--tw-border-opacity));
 }
@@ -47436,26 +47443,6 @@ body{
   border-color: rgb(66 66 66 / var(--tw-border-opacity));
 }
 
-.hover\:border-white:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(85 88 139 / var(--tw-border-opacity));
-}
-
-.hover\:border-black-400:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(123 123 123 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-700:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(83 121 62 / var(--tw-border-opacity));
-}
-
 .hover\:bg-gray-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -47560,11 +47547,6 @@ body{
   color: rgb(66 66 66 / var(--tw-text-opacity));
 }
 
-.hover\:text-purple:hover{
-  --tw-text-opacity: 1;
-  color: rgb(85 88 139 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-500:hover{
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -47575,16 +47557,16 @@ body{
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.hover\:text-purple:hover{
+  --tw-text-opacity: 1;
+  color: rgb(85 88 139 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-700:hover{
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.hover\:text-green-700:hover{
-  --tw-text-opacity: 1;
-  color: rgb(83 121 62 / var(--tw-text-opacity));
-}
-
 .hover\:underline:hover{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -47695,16 +47677,6 @@ body{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group:hover .group-hover\:border-black-400{
-  --tw-border-opacity: 1;
-  border-color: rgb(123 123 123 / var(--tw-border-opacity));
-}
-
-.group:hover .group-hover\:border-black{
-  --tw-border-opacity: 1;
-  border-color: rgb(66 66 66 / var(--tw-border-opacity));
-}
-
 .group:hover .group-hover\:bg-gray-900{
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
index 96d66966e..6c909b892 100644
--- a/resources/assets/js/views/wizard/Currencies.vue
+++ b/resources/assets/js/views/wizard/Currencies.vue
@@ -121,7 +121,7 @@
                         <div v-if="currencies.length" class="w-full border-b hover:bg-gray-100" style="height:53px;">
                             <button type="button" class="w-full h-full flex items-center justify-center text-purple font-medium disabled:bg-gray-200" @click="onAddItem()">
                                 <span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
-                                <span class="border-b border-transparent transition-all">{{ translations.currencies.new_currency }}</span>
+                                <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">{{ translations.currencies.new_currency }}</span>
                             </button>
                         </div>
 
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 610fd9e42..10404cf74 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -93,7 +93,7 @@
     }
 
     table thead a {
-        @apply border-b border-transparent transition-all;
+        @apply bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize;
     }
 
     table thead a:hover {
diff --git a/resources/views/common/dashboards/show.blade.php b/resources/views/common/dashboards/show.blade.php
index b80f6b9d7..6a80ec40c 100644
--- a/resources/views/common/dashboards/show.blade.php
+++ b/resources/views/common/dashboards/show.blade.php
@@ -8,8 +8,8 @@
             <div class="flex items-center relative cursor-pointer">
                 <x-dropdown id="dashboard-list">
                     <x-slot name="trigger" class="flex items-center" override="class">
-                        <span class="text-2xl xl:text-5xl text-black font-light truncate border-b border-transparent transition-all hover:text-black-700 hover:border-black">
-                            {{ $dashboard->name }}
+                        <span class="text-2xl xl:text-5xl text-black font-light truncate">
+                            <x-text.hover text="{{ $dashboard->name }}" color="to-black-700" />
                         </span>
 
                         <svg class="w-5 h-5 mt-1 text-gray-400" x-description="Heroicon name: solid/selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/resources/views/common/reports/index.blade.php b/resources/views/common/reports/index.blade.php
index 70d586ed5..95252def9 100644
--- a/resources/views/common/reports/index.blade.php
+++ b/resources/views/common/reports/index.blade.php
@@ -42,9 +42,7 @@
 
                                     <div class="ltr:ml-2 rtl:mr-2">
                                         <h2 class="mb-1">
-                                            <span class="border-b border-transparent transition-all group-hover:border-black">
-                                                {{ $report->name }}
-                                            </span>
+                                            <x-text.hover text="{{ $report->name }}" color="to-black" />
                                         </h2>
 
                                         <span class="text-black-400 text-sm">{{ $report->description }}</span>
diff --git a/resources/views/components/documents/show/get-paid.blade.php b/resources/views/components/documents/show/get-paid.blade.php
index 4f8491287..09969157e 100644
--- a/resources/views/components/documents/show/get-paid.blade.php
+++ b/resources/views/components/documents/show/get-paid.blade.php
@@ -35,9 +35,7 @@
                     override="class"
                     class="py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medium leading-6"
                 >
-                    <span class="border-b border-transparent transition-all hover:border-black">
-                        {{ trans('documents.accept_payment_online') }}
-                    </span>
+                    <x-text.hover text="{{ trans('documents.accept_payment_online') }}" color="to-black" />
                 </x-link>
             @endif
         </div>
diff --git a/resources/views/components/index/bulkaction/index.blade.php b/resources/views/components/index/bulkaction/index.blade.php
index 9ea8f8261..0bb06b13f 100644
--- a/resources/views/components/index/bulkaction/index.blade.php
+++ b/resources/views/components/index/bulkaction/index.blade.php
@@ -56,8 +56,8 @@
         </div>
         
         <div class="ltr:mr-4 rtl:ml-4" v-if="bulk_action.count">
-            <button type="button" class="text-sm border-b border-transparent transition-all hover:border-black" @click="onClearBulkAction">
-                <span>{{ trans('general.clear') }}</span>
+            <button type="button" @click="onClearBulkAction">
+                <x-text.hover text="{{ trans('general.clear') }}" color="to-black" />
             </button>
         </div>
     </div>
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 1efa0dbc8..88fe2db00 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -113,9 +113,7 @@
 
                 <div class="flex ltr:ml-2 rtl:mr-2">
                     <span class="w-28 text-left block text-base truncate">
-                        <span class="border-b border-transparent transition-all hover:border-black">
-                            {{ Str::limit(setting('company.name'), 22) }}
-                        </span>
+                        <x-text.hover text="{{ Str::limit(setting('company.name'), 22) }}" color="to-black" />
                     </span>
 
                     @can('read-common-companies')
diff --git a/resources/views/components/layouts/modules/bar.blade.php b/resources/views/components/layouts/modules/bar.blade.php
index 1925f4d00..1431d0b81 100644
--- a/resources/views/components/layouts/modules/bar.blade.php
+++ b/resources/views/components/layouts/modules/bar.blade.php
@@ -14,9 +14,7 @@
                     <div class="grid grid-cols-2 gap-2">
                         @foreach ($categories as $slug => $category)
                             <x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
-                                <span class="border-b border-transparent transition-all hover:border-black">
-                                    {{ $category }}
-                                </span>
+                                <x-text.hover text="{{ $category }}" color="to-black" />
                             </x-link>
                         @endforeach
                     </div>
@@ -80,27 +78,19 @@
 
         <div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400">
             <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <span class="border-b border-transparent transition-all hover:border-black-400">
-                    {{ trans('modules.home') }}
-                </span>
+                <x-text.hover text="{{ trans('modules.home') }}" color="to-black-400" />
             </x-link>
 
             <x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <span class="border-b border-transparent transition-all hover:border-black-400">
-                    {{ trans('modules.new') }}
-                </span>
+                <x-text.hover text="{{ trans('modules.new') }}" color="to-black-400" />
             </x-link>
 
             <x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <span class="border-b border-transparent transition-all hover:border-black-400">
-                    {{ trans('modules.top_paid') }}
-                </span>
+                <x-text.hover text="{{ trans('modules.top_paid') }}" color="to-black-400" />
             </x-link>
 
             <x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <span class="border-b border-transparent transition-all hover:border-black-400">
-                    {{ trans('modules.top_free') }}
-                </span>
+                <x-text.hover text="{{ trans('modules.top_free') }}" color="to-black-400" />
             </x-link>
         </div>
     </div>
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index db8201d5d..f414f8721 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -84,9 +84,7 @@
 
                 <div class="flex ltr:ml-2 rtl:mr-2">
                     <span class="w-28 text-left block text-base truncate">
-                        <span class="border-b border-transparent transition-all hover:border-black">
-                            {{ Str::limit(setting('company.name'), 22) }}
-                        </span>
+                        <x-text.hover text="{{ Str::limit(setting('company.name'), 22) }}" color="to-black" />
                     </span>
 
                     @can('read-common-companies')
diff --git a/resources/views/components/modules/items.blade.php b/resources/views/components/modules/items.blade.php
index 47b82f5bb..7111f83ae 100644
--- a/resources/views/components/modules/items.blade.php
+++ b/resources/views/components/modules/items.blade.php
@@ -11,9 +11,7 @@
         @if ($attributes->has('route'))
             <div class="flex justify-center items-center group">
                 <a href="{{ route($attributes->get('route')) }}">
-                    <span class="border-b border-transparent transition-all group-hover:border-black">
-                        {{ trans('modules.see_all_type', ['type' => $attributes->get('title')]) }}
-                    </span>
+                    <x-text.hover text="{{ trans('modules.see_all_type', ['type' => $attributes->get('title')]) }}" color="to-black" />
                 </a>
 
                 <i class="material-icons text-sm ltr:ml-1 rtl:mr-1 transform transition-all group-hover:translate-x-1">arrow_forward</i>
diff --git a/resources/views/components/show/accordion/head.blade.php b/resources/views/components/show/accordion/head.blade.php
index f9bbd9957..f57f07da2 100644
--- a/resources/views/components/show/accordion/head.blade.php
+++ b/resources/views/components/show/accordion/head.blade.php
@@ -1,8 +1,6 @@
 <div>
     <h2 class="lg:text-lg font-medium text-black">
-        <span class="border-b border-transparent transition-all group-hover:border-black">
-            {{ $title }}
-        </span>
+        <x-text.hover text="{{ $title }}" color="to-black" />   
     </h2>
 
     @if (! empty($description))
diff --git a/resources/views/components/show/no-records.blade.php b/resources/views/components/show/no-records.blade.php
index 2e28ac52b..db45d95c3 100644
--- a/resources/views/components/show/no-records.blade.php
+++ b/resources/views/components/show/no-records.blade.php
@@ -22,8 +22,8 @@
         @if (! empty($button) && $button->isNotEmpty())
             {!! $button !!}
         @else
-            <a href="{!! $url !!}" class="border-b border-transparent transition-all hover:border-white">
-                {{ $textAction }}
+            <a href="{!! $url !!}">
+                <x-text.hover text="{{ $textAction }}" color="to-white" />  
             </a>
         @endif
     </div>
diff --git a/resources/views/components/tips/fixed.blade.php b/resources/views/components/tips/fixed.blade.php
index 657d89b58..4f1ca39b9 100644
--- a/resources/views/components/tips/fixed.blade.php
+++ b/resources/views/components/tips/fixed.blade.php
@@ -14,8 +14,8 @@
                 {!! $item->description !!}
             </p>
 
-            <a href="{{ $item->action }}" class="font-light text-sm border-b border-transparent transition-all hover:border-black" target="_blank">
-                {{ $item->learn_more }}
+            <a href="{{ $item->action }}" class="font-light text-sm" target="_blank">
+                <x-text.hover text="{{ $item->learn_more }}" color="to-black" />    
             </a>
         </div>
 
diff --git a/resources/views/components/tips/relative.blade.php b/resources/views/components/tips/relative.blade.php
index f1b1bde6f..f976a3f8b 100644
--- a/resources/views/components/tips/relative.blade.php
+++ b/resources/views/components/tips/relative.blade.php
@@ -14,8 +14,8 @@
                 {!! $item->description !!}
             </p>
 
-            <a href="{{ $item->action }}" class="font-light text-sm border-b border-transparent transition-all hover:border-black">
-                {{ $item->learn_more }}
+            <a href="{{ $item->action }}" class="font-light text-sm">
+                <x-text.hover text="{{ $item->learn_more }}" color="to-black" />
             </a>
         </div>
 
diff --git a/resources/views/components/transactions/show/attachment.blade.php b/resources/views/components/transactions/show/attachment.blade.php
index 3e2e88a94..cc2f470a9 100644
--- a/resources/views/components/transactions/show/attachment.blade.php
+++ b/resources/views/components/transactions/show/attachment.blade.php
@@ -5,8 +5,8 @@
         <div class="relative w-full text-left cursor-pointer group"
             x-on:click="attachment !== 1 ? attachment = 1 : attachment = null"
         >
-            <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                {{ trans_choice('general.attachments', 2) }}
+            <span class="font-medium">
+                <x-text.hover text="{{ trans_choice('general.attachments', 2) }}" color="to-black" />
             </span>
 
             <div class="text-black-400 text-sm">
diff --git a/resources/views/components/transactions/show/children.blade.php b/resources/views/components/transactions/show/children.blade.php
index 77741c3c4..c4e981a5f 100644
--- a/resources/views/components/transactions/show/children.blade.php
+++ b/resources/views/components/transactions/show/children.blade.php
@@ -2,8 +2,8 @@
     <button class="relative w-full text-left cursor-pointer group"
         x-on:click="children !== 1 ? children = 1 : children = null"
     >
-        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-            {{ trans_choice('general.transactions', 2) }}
+        <span class="font-medium">
+            <x-text.hover text="{{ trans_choice('general.transactions', 2) }}" color="to-black" />
         </span>
 
         <div class="text-black-400 text-sm">
diff --git a/resources/views/components/transactions/show/create.blade.php b/resources/views/components/transactions/show/create.blade.php
index c2574d7a7..f8ba224f3 100644
--- a/resources/views/components/transactions/show/create.blade.php
+++ b/resources/views/components/transactions/show/create.blade.php
@@ -4,8 +4,8 @@
     <button class="relative w-full text-left group"
         x-on:click="create !== 1 ? create = 1 : create = null"
     >
-        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-            {{ trans('general.create') }}
+        <span class="font-medium">
+            <x-text.hover text="{{ trans('general.create') }}" color="to-black" />
         </span>
 
         <div class="text-black-400 text-sm">
diff --git a/resources/views/components/transactions/show/schedule.blade.php b/resources/views/components/transactions/show/schedule.blade.php
index df4d28e6c..cf1e5bee8 100644
--- a/resources/views/components/transactions/show/schedule.blade.php
+++ b/resources/views/components/transactions/show/schedule.blade.php
@@ -7,8 +7,8 @@
     <button class="relative w-full text-left cursor-pointer group"
         x-on:click="schedule !== 1 ? schedule = 1 : schedule = null"
     >
-        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-            {{ trans_choice('general.schedules', 1) }}
+        <span class="font-medium">
+            <x-text.hover text="{{ trans_choice('general.schedules', 1) }}" color="to-black" />
         </span>
 
         <div class="text-black-400 text-sm">
diff --git a/resources/views/components/transfers/show/attachment.blade.php b/resources/views/components/transfers/show/attachment.blade.php
index f58fabb77..cff195fbf 100644
--- a/resources/views/components/transfers/show/attachment.blade.php
+++ b/resources/views/components/transfers/show/attachment.blade.php
@@ -1,8 +1,8 @@
 @if ($transfer->attachment)
     <div class="border-b border-gray-200 pb-4" x-data="{ attachment : null }">
         <div class="relative w-full text-left cursor-pointer group" x-on:click="attachment !== 1 ? attachment = 1 : attachment = null">
-            <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                {{ trans_choice('general.attachments', 2) }}
+            <span class="font-medium">
+                <x-text.hover text="{{ trans_choice('general.attachments', 2) }}" color="to-black" />
             </span>
 
             <div class="text-black-400 text-sm">
diff --git a/resources/views/components/transfers/show/create.blade.php b/resources/views/components/transfers/show/create.blade.php
index 1316426c0..5ce9123cf 100644
--- a/resources/views/components/transfers/show/create.blade.php
+++ b/resources/views/components/transfers/show/create.blade.php
@@ -2,8 +2,8 @@
 
 <div class="border-b pb-4" x-data="{ create : null }">
     <button class="relative w-full text-left group" x-on:click="create !== 1 ? create = 1 : create = null">
-        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-            {{ trans('general.create') }}
+        <span class="font-medium">
+            <x-text.hover text="{{ trans('general.create') }}" color="to-black" />
         </span>
 
         <div class="text-black-400 text-sm">
diff --git a/resources/views/livewire/report/pins.blade.php b/resources/views/livewire/report/pins.blade.php
index 147dde580..4124a9dd6 100644
--- a/resources/views/livewire/report/pins.blade.php
+++ b/resources/views/livewire/report/pins.blade.php
@@ -7,10 +7,9 @@
             ])
         >
             <span class="material-icons-outlined text-4xl transition-all text-black-400">{{ $icons[$report->id] }}</span>
+            
             <div class="h-10 font-medium text-sm mt-2">
-                <span class="border-b border-transparent transition-all group-hover:border-black">
-                    {{ $report->name }}
-                </span>
+                <x-text.hover text="{{ $report->name }}" color="to-black" />
             </div>
         </a>
     @endforeach
diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index 635ba06ee..33d130e36 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -106,7 +106,7 @@
                                     @foreach ($invoice->transactions as $transaction)
                                         <div class="my-2">
                                             <span>
-                                                <x-link href="{{ route('preview.payments.show', $transaction->id) }}" class="text-black border-b border-transparent transition-all hover:border-black" override="class">
+                                                <x-link href="{{ route('preview.payments.show', $transaction->id) }}" class="text-black bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize" override="class">
                                                     <x-date :date="$transaction->paid_at" />
                                                 </x-link>
                                                 - {!! trans('documents.transaction', [
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index 27e738642..5a9fe9bc1 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -102,7 +102,7 @@
                                     @foreach ($invoice->transactions as $transaction)
                                         <div class="my-2">
                                             <span>
-                                                <x-link href="{{ route('portal.payments.show', $transaction->id) }}" class="text-black border-b border-transparent transition-all hover:border-black" override="class">
+                                                <x-link href="{{ route('portal.payments.show', $transaction->id) }}" class="text-black bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize" override="class">
                                                     <x-date :date="$transaction->paid_at" />
                                                 </x-link>
                                                 - {!! trans('documents.transaction', [
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index 5549a2bda..e2a2f3f9d 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -105,7 +105,7 @@
                                         @foreach ($invoice->transactions as $transaction)
                                             <div class="my-2">
                                                 <span>
-                                                    <x-link href="{{ \URL::signedRoute('portal.payments.show', [$transaction->id]) }}" class="text-black border-b border-transparent transition-all hover:border-black" override="class">
+                                                    <x-link href="{{ \URL::signedRoute('portal.payments.show', [$transaction->id]) }}" class="text-black bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize" override="class">
                                                         <x-date :date="$transaction->paid_at" />
                                                     </x-link>
                                                     - {!! trans('documents.transaction', [
diff --git a/resources/views/portal/payments/preview.blade.php b/resources/views/portal/payments/preview.blade.php
index 05ba4ec0c..78712ead9 100644
--- a/resources/views/portal/payments/preview.blade.php
+++ b/resources/views/portal/payments/preview.blade.php
@@ -24,9 +24,7 @@
             <div class="w-full lg:w-5/12 space-y-8">
                 <div class="border-b-2 border-gray-200 pb-1">
                     <div class="relative w-full text-left group">
-                        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                            {{ trans('portal.received_date') }}
-                        </span>
+                        <x-text.hover text="{{ trans('portal.received_date') }}" color="to-black" />  
                     </div>
 
                     <div class="relative overflow-hidden transition-all duration-700">
diff --git a/resources/views/portal/payments/show.blade.php b/resources/views/portal/payments/show.blade.php
index 104d75185..d80b1edf5 100644
--- a/resources/views/portal/payments/show.blade.php
+++ b/resources/views/portal/payments/show.blade.php
@@ -22,9 +22,7 @@
             <div class="w-full lg:w-5/12 space-y-8">
                 <div class="border-b-2 border-gray-200 pb-1">
                     <div class="relative w-full text-left group">
-                        <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                            {{ trans('portal.received_date') }}
-                        </span>
+                        <x-text.hover text="{{ trans('portal.received_date') }}" color="to-black" />    
                     </div>
 
                     <div class="relative overflow-hidden transition-all duration-700">
diff --git a/resources/views/portal/payments/signed.blade.php b/resources/views/portal/payments/signed.blade.php
index b4ee5f460..683c69af6 100644
--- a/resources/views/portal/payments/signed.blade.php
+++ b/resources/views/portal/payments/signed.blade.php
@@ -32,9 +32,7 @@
                 <div class="w-full lg:w-5/12 space-y-8">
                     <div class="border-b-2 border-gray-200 pb-1">
                         <div class="relative w-full text-left group">
-                            <span class="font-medium border-b border-transparent transition-all group-hover:border-black">
-                                {{ trans('portal.received_date') }}
-                            </span>
+                            <x-text.hover text="{{ trans('portal.received_date') }}" color="to-black" />    
                         </div>
 
                         <div class="relative overflow-hidden transition-all duration-700">
diff --git a/resources/views/widgets/receivables_payables.blade.php b/resources/views/widgets/receivables_payables.blade.php
index e55d3d06d..f01c45f55 100644
--- a/resources/views/widgets/receivables_payables.blade.php
+++ b/resources/views/widgets/receivables_payables.blade.php
@@ -28,7 +28,7 @@
             </span>
 
             <button id="dashboard-widget-{{ strtolower(class_basename($class)) }}-overdue" type="button" class="flex items-center text-black-400 font-medium group" data-dropdown-toggle="widgets-list-{{ $class->model->id }}">
-                <span class="border-b border-transparent transition-all group-hover:border-black-400"> {{ $totals['overdue'] }} </span>
+                <x-text.hover text="{{ $totals['overdue'] }}" color="to-black-400" />    
 
                 <div class="relative flex">
                     <span class="material-icons-round cursor-pointer">arrow_drop_down</span>