diff --git a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
index b30fa82c..944abc7a 100644
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -50,21 +50,11 @@
           </BaseInputGroup>
         </template>
       </ValidateEach>
-      <div
-        slot="footer"
-        class="
-          z-0
-          flex
-          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton :loading="isSaving" variant="primary" type="submit">
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseCard>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index b3a4780f..eafd39ad 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -57,9 +57,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.create') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 13bd6dca..787e7042 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -47,15 +47,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -80,7 +72,7 @@
           </template>
           {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index a28b990a..dd1cfcab 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -116,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
+       <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -141,7 +141,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index be737479..b0a9d264 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -425,9 +425,7 @@
         </BaseTabGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -447,7 +445,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
index 5bde3806..eec7395d 100644
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600">
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -63,7 +63,7 @@
           </template>
           {{ $t('general.delete') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index cf8f682c..df3ce46b 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -150,9 +150,7 @@
           @Remove="removeUsedSelectedCurrencies"
         />
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -179,7 +177,7 @@
             exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index aa408853..7ccb7cd3 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -20,15 +20,7 @@
         @submit="createNewDisk"
       >
         <template #default="slotProps">
-          <div
-            class="
-              z-0
-              flex
-              justify-end
-              p-4
-              border-t border-solid border-gray-light dark:border-gray-600
-            "
-          >
+          <BaseModalFooter>
             <BaseButton
               class="mr-3 text-sm"
               variant="primary-outline"
@@ -52,7 +44,7 @@
 
               {{ $t('general.save') }}
             </BaseButton>
-          </div>
+          </BaseModalFooter>
         </template>
       </component>
     </div>
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index dd9e8d63..e2c186a3 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -89,9 +89,7 @@
             </BaseInputGroup>
           </BaseInputGrid>
         </div>
-        <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-        >
+        <BaseModalFooter>
           <BaseButton
             class="mr-3"
             variant="primary-outline"
@@ -111,7 +109,7 @@
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
-        </div>
+        </BaseModalFooter>
       </form>
     </div>
   </BaseModal>
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index d32acd5c..e9738be0 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -31,15 +31,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid dark:border-gray-600
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -66,7 +58,7 @@
             itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index 7ca54993..e2a00f7e 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+     <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           type="button"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index 4c55448c..baaade03 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -63,16 +63,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-gray-200 border-solid dark:border-gray-600
-        "
-      >
+     <BaseModalFooter>
         <BaseButton
           class="mr-2"
           variant="primary-outline"
@@ -93,7 +84,7 @@
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index 0c93b66b..14739f39 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -29,9 +29,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           class="mr-3"
@@ -56,7 +54,7 @@
               : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 4825258e..0ff92ad9 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -116,15 +116,7 @@
           </span>
         </div>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid dark:border-gray-600
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -144,7 +136,7 @@
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index ff505a49..77cf21f5 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
+    <BaseModalFooter>
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
@@ -80,7 +80,7 @@
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
-    </div>
+    </BaseModalFooter>
   </BaseModal>
 </template>
 
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index 6ab4938a..c253c4af 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -85,7 +83,7 @@
           <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index 60d27430..c856cdff 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 8fc556cb..1862a984 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index 417cc2e7..f09daaad 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -90,15 +90,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid dark:border-gray-600
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -122,7 +114,7 @@
           </template>
           {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index 535ab366..f2dadfaf 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -87,9 +87,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -109,7 +107,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
index a573dcef..6db7a14a 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -172,15 +172,7 @@
         </div>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid dark:border-gray-600
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           type="button"
@@ -207,7 +199,7 @@
             !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/components/base/BaseModalFooter.vue b/resources/scripts/components/base/BaseModalFooter.vue
new file mode 100644
index 00000000..780464c2
--- /dev/null
+++ b/resources/scripts/components/base/BaseModalFooter.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="
+      z-0
+      flex
+      justify-end
+      p-4
+      border-t border-gray-200 border-solid
+      dark:border-gray-600
+    "
+  >
+    <slot />
+  </div>
+</template>