diff --git a/public/css/app.css b/public/css/app.css
index 10c97872c..f189a82ba 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -57157,6 +57157,11 @@ body{
     line-height: 2.75rem;
   }
 
+  .sm\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
   .sm\:text-purple{
     --tw-text-opacity: 1;
     color: rgb(85 88 139 / var(--tw-text-opacity));
diff --git a/resources/assets/js/components/AkauntingModal.vue b/resources/assets/js/components/AkauntingModal.vue
index ef056234c..af8a5c3e9 100644
--- a/resources/assets/js/components/AkauntingModal.vue
+++ b/resources/assets/js/components/AkauntingModal.vue
@@ -31,8 +31,8 @@
 
                         <div class="p-5 border-gray-300">
                             <slot name="card-footer">
-                                <div class="flex items-center justify-end">
-                                    <button type="button" class="px-6 py-1.5 ltr:mr-2 rtl:ml-2 hover:bg-gray-200 rounded-lg" @click="onCancel">
+                                <div class="flex items-center justify-end space-x-2 rtl:space-x-reverse">
+                                    <button type="button" class="px-6 py-1.5 hover:bg-gray-200 rounded-lg" @click="onCancel">
                                         {{ button_cancel }}
                                     </button>
 
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index d24cd8c27..a3a8e5f9f 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -36,12 +36,12 @@
 
                         <div class="p-5 border-gray-300">
                             <slot name="card-footer">
-                                <div class="flex items-center justify-end">
-                                    <button type="button" class="px-6 py-1.5 mr-2 hover:bg-gray-200 rounded-lg" :class="buttons.cancel.class" @click="onCancel">
+                                <div class="flex items-center justify-end space-x-2 rtl:space-x-reverse">
+                                    <button type="button" class="px-6 py-1.5 hover:bg-gray-200 rounded-lg" :class="buttons.cancel.class" @click="onCancel">
                                         {{ buttons.cancel.text }}
                                     </button>
 
-                                    <a v-if="buttons.payment" :href="buttons.payment.url" class="px-3 py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medium leading-6 ltr:mr-2 rtl:ml-2" :class="buttons.payment.class">
+                                    <a v-if="buttons.payment" :href="buttons.payment.url" class="px-6 py-1.5 text-xs bg-transparent hover:bg-gray-200 font-medium rounded-lg leading-6" :class="buttons.payment.class">
                                         {{ buttons.payment.text }}
                                     </a>
 
diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
index 186103d6d..fd062f874 100644
--- a/resources/views/components/table/actions-mobile.blade.php
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -35,7 +35,7 @@
                     @case('button')
                         <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
                             <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                <span class="material-icons-outlined text-purple text-lg ltr:mr-2 rtl:ml-2 pointer-events-none">
                                     {{ $action['icon'] }}
                                 </span>
 
@@ -57,7 +57,7 @@
                     @default
                         <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
                             <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                <span class="material-icons-outlined text-purple text-lg ltr:mr-2 rtl:ml-2 pointer-events-none">
                                     {{ $action['icon'] }}
                                 </span>
 
@@ -101,7 +101,7 @@
 
                             <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
                                 <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    <span class="material-icons-outlined text-purple text-lg ltr:mr-2 rtl:mr-2 pointer-events-none">
                                         {{ $action['icon'] }}
                                     </span>
 
@@ -135,7 +135,7 @@
 
                             <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
                                 <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    <span class="material-icons-outlined text-purple text-lg ltr:mr-2 rtl:ml-2 pointer-events-none">
                                         {{ $action['icon'] }}
                                     </span>