diff --git a/resources/assets/js/components/AkauntingConnectTransactions.vue b/resources/assets/js/components/AkauntingConnectTransactions.vue
index 3b4b33078..0978c75a8 100644
--- a/resources/assets/js/components/AkauntingConnectTransactions.vue
+++ b/resources/assets/js/components/AkauntingConnectTransactions.vue
@@ -171,7 +171,7 @@
                                                     <td class="text-sm text-right border-b-0 p-0">
                                                         <div>
                                                             <money
-                                                                :name="'total_amount'"
+                                                                name="total_amount"
                                                                 :value="total_amount"
                                                                 v-bind="money"
                                                                 masked
@@ -229,7 +229,7 @@
                                                     <td class="text-right text-sm border-b-0 p-0">
                                                         <div>
                                                             <money
-                                                                :name="'difference_amount'"
+                                                                name="difference_amount"
                                                                 :value="difference_amount"
                                                                 v-bind="money"
                                                                 masked
@@ -255,7 +255,7 @@
                                     </button>
 
                                     <button type="button"
-                                        :disabled="this.difference_amount != 0 || (this.difference_amount == 0 && form.loading)"
+                                        :disabled="differenceAmount != 0 || (differenceAmount == 0 && form.loading)"
                                         class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg disabled:bg-green-100"
                                         @click="onConfirm"
                                     >
@@ -264,7 +264,7 @@
                                             class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
                                         >
                                         </i>
-                                        <span :class="[{'opacity-0': this.difference_amount != 0}]">{{ translations.save }}</span>
+                                        <span :class="[{'opacity-0': differenceAmount != 0}]">{{ translations.save }}</span>
                                     </button>
                                 </div>
                             </slot>
@@ -320,9 +320,45 @@ export default {
             },
             transaction_amount: "",
             money: {},
+            totalAmount: 0,
+            differenceAmount: 0,
         };
     },
 
+    created() {
+        this.totalAmount = this.total_amount;
+        this.differenceAmount = this.difference_amount;
+    },
+
+    computed: {
+        total_amount: function () {
+            let amount = 0;
+
+            this.form.items.forEach(function(item) {
+                amount += this.convertMoneyToFloat(item.amount);
+            }, this);
+
+            this.totalAmount = parseFloat(amount.toFixed(this.currency.precision));
+
+            return parseFloat(amount.toFixed(this.currency.precision));
+        },
+
+        difference_amount: function () {
+            if (! this.transaction_amount) {
+                this.differenceAmount = 0;
+
+                return 0;
+            }
+
+            let transaction_amount = this.convertMoneyToFloat(this.transaction_amount);
+            let amount = parseFloat((this.total_amount - transaction_amount).toFixed(this.currency.precision));
+
+            this.differenceAmount = amount;
+
+            return amount;
+        }
+    },
+
     mounted() {
         window.addEventListener('keyup',(e) => {
             if (e.key === 'Escape') { 
@@ -418,9 +454,11 @@ export default {
                 this.form.items = [];
             }
         },
+
         transaction: function (transaction) {
             this.transaction_amount = transaction.amount;
         },
+
         currency: function (currency) {
             this.money = {
                 decimal: currency.decimal_mark,
@@ -431,26 +469,5 @@ export default {
             };
         }
     },
-
-    computed: {
-        total_amount: function () {
-            let amount = 0;
-
-            this.form.items.forEach(function(item) {
-                amount += this.convertMoneyToFloat(item.amount);
-            }, this);
-
-            return parseFloat(amount.toFixed(this.currency.precision));
-        },
-        difference_amount: function () {
-            if (!this.transaction_amount) {
-                return 0;
-            }
-
-            let transaction_amount = this.convertMoneyToFloat(this.transaction_amount);
-
-            return parseFloat((this.total_amount - transaction_amount).toFixed(this.currency.precision));
-        }
-    },
 }
 </script>
diff --git a/resources/views/components/documents/show/get-paid.blade.php b/resources/views/components/documents/show/get-paid.blade.php
index 35d39cfed..d49c4b78e 100644
--- a/resources/views/components/documents/show/get-paid.blade.php
+++ b/resources/views/components/documents/show/get-paid.blade.php
@@ -27,7 +27,7 @@
 
             @if (! $hideAcceptPayment)
                 <x-link href="{{ route('apps.categories.show', [
-                        'alias' => 'payment-method', 
+                        'alias' => 'payment-method',
                         'utm_source' => $type,
                         'utm_medium' => 'app',
                         'utm_campaign' => trans('documents.accept_payment_online'),
@@ -86,7 +86,7 @@
                         >
                             <span class="border-b border-transparent transition-all hover:border-purple">
                                 {{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
-                            <span class="border-b border-transparent transition-all hover:border-purple">
+                            </span>
                         </x-button>
 
                         <span> - </span>
diff --git a/resources/views/components/documents/show/make-payment.blade.php b/resources/views/components/documents/show/make-payment.blade.php
index ef98d25f6..67773333b 100644
--- a/resources/views/components/documents/show/make-payment.blade.php
+++ b/resources/views/components/documents/show/make-payment.blade.php
@@ -26,7 +26,7 @@
             @stack('timeline_get_paid_body_button_payment_end')
         </div>
 
-        <div class="text-xs mt-1" style="margin-left: 0 !important;">
+        <div class="text-xs mt-4" style="margin-left: 0 !important;">
             <span class="font-medium">
                 {{ trans('bills.payment_made') }} :
             </span>
@@ -45,13 +45,17 @@
                         </br>
 
                         @if (! empty($transaction->contact) && $transaction->contact->email)
-                            <x-button id="button-email-send" class="text-purple" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
-                                {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
+                            <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-button>
                         @else
                             <x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
-                                <x-button class="text-purple" override="class" disabled="disabled">
-                                    {{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
+                                <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-button>
                             </x-tooltip>
                         @endif
@@ -61,10 +65,12 @@
                         <x-button
                             @click="onEditPayment('{{ $transaction->id }}')"
                             id="button-edit-payment"
-                            class="text-purple"
+                            class="text-purple mt-1"
                             override="class"
                         >
-                            {{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
+                            <span class="border-b border-transparent transition-all hover:border-purple">
+                                {{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
+                            </span>
                         </x-button>
 
                         <span> - </span>
@@ -82,8 +88,8 @@
                             :title="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
                             :message="$message"
                             :label="trans('general.title.delete', ['type' => trans_choice('general.payments', 1)])"
-                            class="text-purple"
-                            text-class="text-purple"
+                            class="text-purple mt-1"
+                            text-class="border-b border-transparent transition-all hover:border-purple"
                             override="class"
                         />
                     </div>