diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index eeb9b7bfca7..60a0bcf1387 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -1,12 +1,10 @@
 @props(['active'])
 
 <div x-data="{ active: '{{ $active }}' }">
-    <div {{ $attributes }}>
-        <div>
-            <ul class="flex items-center">
-                {!! $navs !!}
-            </ul>
-        </div>
+    <div>
+        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
+            {!! $navs !!}
+        </ul>
     </div>
 
     {!! $content !!}
diff --git a/resources/views/components/tabs/nav-link.blade.php b/resources/views/components/tabs/nav-link.blade.php
index 3c205becf0a..e50ba771123 100644
--- a/resources/views/components/tabs/nav-link.blade.php
+++ b/resources/views/components/tabs/nav-link.blade.php
@@ -1,13 +1,11 @@
 @props(['id', 'name', 'href', 'active'])
 
-<li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link"
-    @class([
-        'text-purple border-purple transition-al after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md' => !empty($active),
-    ])
+<li 
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
-    x-bind:class="active != '{{ $id }}' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
+    x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}
 >
     @if ($slot->isNotEmpty())
diff --git a/resources/views/components/tabs/nav.blade.php b/resources/views/components/tabs/nav.blade.php
index d9e55dee3c3..10a1546b854 100644
--- a/resources/views/components/tabs/nav.blade.php
+++ b/resources/views/components/tabs/nav.blade.php
@@ -1,14 +1,12 @@
 @props(['id', 'name', 'active'])
 
-<li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link"
-    @class([
-        'text-purple border-purple transition-al after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md' => !empty($active),
-    ])
+<li 
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
     x-on:click="active = '{{ $id }}'"
-    x-bind:class="active != '{{ $id }}' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
+    x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}
 >
     @if ($slot->isNotEmpty())
diff --git a/resources/views/modals/customers/create.blade.php b/resources/views/modals/customers/create.blade.php
index 4666726336b..140b9b56515 100644
--- a/resources/views/modals/customers/create.blade.php
+++ b/resources/views/modals/customers/create.blade.php
@@ -1,90 +1,63 @@
 <x-form id="form-create-customer" route="customers.store">
-    <div x-data="{ active: 'general' }">
-        <div>
-            <div>
-                <ul class="grid grid-cols-6">
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-general"
-                        data-id="tab-general"
-                        data-tabs="general"
-                        x-on:click="active = 'general'"
-                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.general') }}
-
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-address"
-                        data-id="tab-address"
-                        data-tabs="address"
-                        x-on:click="active = 'address'"
-                        x-bind:class="active != 'address' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.address') }}
-
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-other"
-                        data-id="tab-other"
-                        data-tabs="other"
-                        x-on:click="active = 'other'"
-                        x-bind:class="active != 'other' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans_choice('general.others', 1) }}
-
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-
-        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
-
-                <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
-
-                <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.currency without-add-new form-group-class="col-span-6" :add-new-text="trans_choice('general.currencies', 1)" />
-            </div>
-        </div>
-        
-        <div id="tab-address" data-tabs-content="address" x-show="active === 'address'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
-                <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" rows=2 not-required />
-        
-                <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
-
-                <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
-
-                <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
-
-                <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
-            </div>
-        </div>
-
-        <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
-
-                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
-
-                <x-form.input.hidden name="type" value="customer" />
-                <x-form.input.hidden name="enabled" value="1" />
-            </div>
-        </div>
-    </div>
+    <x-tabs active="general" class="grid grid-cols-3" override="class">
+        <x-slot name="navs">
+            <x-tabs.nav id="general">
+                {{ trans('general.general') }}  
+                
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>   
+
+            <x-tabs.nav id="address">
+                {{ trans('general.address') }}
+
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>  
+
+            <x-tabs.nav id="other">
+                {{ trans_choice('general.others', 1) }}
+
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+        </x-slot>   
+
+        <x-slot name="content">
+            <x-tabs.tab id="general">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" /> 
+                    <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
+
+                    <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />  
+                    <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
+
+                    <x-form.group.currency without-add-new form-group-class="col-span-6" :add-new-text="trans_choice('general.currencies', 1)" />
+                </div>
+            </x-tabs.tab>   
+
+            <x-tabs.tab id="address">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
+                    <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" rows=2 not-required />
+
+                    <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />    
+                    <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />    
+                    <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />  
+                    <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
+                </div>
+            </x-tabs.tab>  
+             
+            <x-tabs.tab id="other">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />  
+                    <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />  
+                    <x-form.input.hidden name="type" value="customer" />
+                    <x-form.input.hidden name="enabled" value="1" />
+                </div>
+            </x-tabs.tab>
+        </x-slot>
+    </x-tabs>
 </x-form>
diff --git a/resources/views/modals/customers/edit.blade.php b/resources/views/modals/customers/edit.blade.php
index f2344bc83d9..7a3ffcb6c66 100644
--- a/resources/views/modals/customers/edit.blade.php
+++ b/resources/views/modals/customers/edit.blade.php
@@ -1,90 +1,70 @@
 <x-form id="form-edit-customer" method="PATCH" :route="['customers.update', $customer->id]" :model="$customer">
-    <div x-data="{ active: 'general' }">
-        <div>
-            <div>
-                <ul class="grid grid-cols-6">
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-general"
-                        data-id="tab-general"
-                        data-tabs="general"
-                        x-on:click="active = 'general'"
-                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.general') }}
+    <x-tabs active="general" class="grid grid-cols-3" override="class">
+        <x-slot name="navs">
+            <x-tabs.nav id="general">
+                {{ trans('general.general') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-address"
-                        data-id="tab-address"
-                        data-tabs="address"
-                        x-on:click="active = 'address'"
-                        x-bind:class="active != 'address' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.address') }}
+            <x-tabs.nav id="address">
+                {{ trans('general.address') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-other"
-                        data-id="tab-other"
-                        data-tabs="other"
-                        x-on:click="active = 'other'"
-                        x-bind:class="active != 'other' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans_choice('general.others', 1) }}
+            <x-tabs.nav id="other">
+                {{ trans_choice('general.others', 1) }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+        </x-slot>
 
-        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
+        <x-slot name="content">
+            <x-tabs.tab id="general">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
 
-                <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.currency without-add-new form-group-class="col-span-6" />
-            </div>
-        </div>
-        
-        <div id="tab-address" data-tabs-content="address" x-show="active === 'address'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
-                <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.currency without-add-new form-group-class="col-span-6" />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="address">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
+                    <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
-            </div>
-        </div>
+                    <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
 
-        <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="other">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.input.hidden name="type" value="customer" />
-                <x-form.input.hidden name="enabled" value="1" />
-            </div>
-        </div>
-    </div>
+                    <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+
+                    <x-form.input.hidden name="type" value="customer" />
+                    <x-form.input.hidden name="enabled" value="1" />
+                </div>
+            </x-tabs.tab>
+        </x-slot>
+    </x-tabs>
 </x-form>
diff --git a/resources/views/modals/documents/payment.blade.php b/resources/views/modals/documents/payment.blade.php
index 455e44b1a0a..127994f927b 100644
--- a/resources/views/modals/documents/payment.blade.php
+++ b/resources/views/modals/documents/payment.blade.php
@@ -3,68 +3,54 @@
         <p class="text-sm mb-0 text-red-600" v-html="form.response.message"></p>
     </div>
 
-    <div x-data="{ active: 'general' }">
-        <div>
-            <div>
-                <ul class="grid grid-cols-6">
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-3"
-                        id="tab-general"
-                        data-id="tab-general"
-                        data-tabs="general"
-                        x-on:click="active = 'general'"
-                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.general') }}
-
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('paid_at')||form.errors.has('amount')||form.errors.has('payment_method')||form.errors.has('account_id')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-3"
-                        id="tab-other"
-                        data-id="tab-other"
-                        data-tabs="other"
-                        x-on:click="active = 'other'"
-                        x-bind:class="active != 'other' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans_choice('general.others', 1) }}
-
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('number')||form.errors.has('description')||form.errors.has('recurring')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-
-        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.date name="paid_at" label="{{ trans('general.date') }}" icon="calendar_today" value="{{ $document->paid_at }}" show-date-format="{{ company_date_format() }}" date-format="Y-m-d" autocomplete="off" form-group-class="col-span-6" />
-
-                <x-form.group.money name="amount" label="{{ trans('general.amount') }}" value="{{ $document->grand_total }}" autofocus="autofocus" :currency="$currency" dynamicCurrency="currency" form-group-class="col-span-6" />
-
-                <x-form.group.payment-method form-group-class="col-span-6"/>
-
-                <x-form.group.account change="onChangePaymentAccount" form-group-class="col-span-6" without-add-new />
-            </div>
-        </div>
-
-        <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.textarea name="description" label="{{ trans('general.description') }}" rows="2" not-required form-group-class="col-span-6" />
-
-                <x-form.group.text name="number" label="{{ trans_choice('general.numbers', 1) }}" value="{{ $number }}" form-group-class="col-span-6" />
-
-                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" not-required form-group-class="col-span-6" />
-
-                <x-form.input.hidden name="document_id" :value="$document->id" />
-                <x-form.input.hidden name="category_id" :value="$document->category->id" />
-                <x-form.input.hidden name="amount" :value="$document->grand_total" />
-                <x-form.input.hidden name="currency_code" :value="$document->currency_code" />
-                <x-form.input.hidden name="currency_rate" :value="$document->currency_rate" />
-                <x-form.input.hidden name="type" :value="config('type.document.' . $document->type . '.transaction_type')" />
-            </div>
-        </div>
-    </div>
+    <x-tabs active="general" class="grid grid-cols-2" override="class">
+        <x-slot name="navs">
+            <x-tabs.nav id="general">
+                {{ trans('general.general') }}
+
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('paid_at')||form.errors.has('amount')||form.errors.has('payment_method')||form.errors.has('account_id')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+
+            <x-tabs.nav id="other">
+                {{ trans_choice('general.others', 1) }}
+
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('number')||form.errors.has('description')||form.errors.has('recurring')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+        </x-slot>
+
+        <x-slot name="content">
+            <x-tabs.tab id="general">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.date name="paid_at" label="{{ trans('general.date') }}" icon="calendar_today" value="{{ $document->paid_at }}" show-date-format="{{ company_date_format() }}" date-format="Y-m-d" autocomplete="off" form-group-class="col-span-6" />
+
+                    <x-form.group.money name="amount" label="{{ trans('general.amount') }}" value="{{ $document->grand_total }}" autofocus="autofocus" :currency="$currency" dynamicCurrency="currency" form-group-class="col-span-6" />
+
+                    <x-form.group.payment-method form-group-class="col-span-6"/>
+
+                    <x-form.group.account change="onChangePaymentAccount" form-group-class="col-span-6" without-add-new />
+                </div>
+            </x-tabs.tab>
+
+            <x-tabs.tab id="other">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.textarea name="description" label="{{ trans('general.description') }}" rows="2" not-required form-group-class="col-span-6" />
+
+                    <x-form.group.text name="number" label="{{ trans_choice('general.numbers', 1) }}" value="{{ $number }}" form-group-class="col-span-6" />
+
+                    <x-form.group.text name="reference" label="{{ trans('general.reference') }}" not-required form-group-class="col-span-6" />
+
+                    <x-form.input.hidden name="document_id" :value="$document->id" />
+                    <x-form.input.hidden name="category_id" :value="$document->category->id" />
+                    <x-form.input.hidden name="amount" :value="$document->grand_total" />
+                    <x-form.input.hidden name="currency_code" :value="$document->currency_code" />
+                    <x-form.input.hidden name="currency_rate" :value="$document->currency_rate" />
+                    <x-form.input.hidden name="type" :value="config('type.document.' . $document->type . '.transaction_type')" />
+                </div>
+            </x-tabs.tab>
+        </x-slot>
+    </x-tabs>
 </x-form>
diff --git a/resources/views/modals/vendors/create.blade.php b/resources/views/modals/vendors/create.blade.php
index 8a7d39c5718..58f52ee2171 100644
--- a/resources/views/modals/vendors/create.blade.php
+++ b/resources/views/modals/vendors/create.blade.php
@@ -1,90 +1,70 @@
 <x-form id="form-create-vendor" route="vendors.store">
-    <div x-data="{ active: 'general' }">
-        <div>
-            <div>
-                <ul class="grid grid-cols-6">
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-general"
-                        data-id="tab-general"
-                        data-tabs="general"
-                        x-on:click="active = 'general'"
-                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.general') }}
+    <x-tabs active="general" class="grid grid-cols-3" override="class">
+        <x-slot name="navs">
+            <x-tabs.nav id="general">
+                {{ trans('general.general') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-address"
-                        data-id="tab-address"
-                        data-tabs="address"
-                        x-on:click="active = 'address'"
-                        x-bind:class="active != 'address' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.address') }}
+            <x-tabs.nav id="address">
+                {{ trans('general.address') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-other"
-                        data-id="tab-other"
-                        data-tabs="other"
-                        x-on:click="active = 'other'"
-                        x-bind:class="active != 'other' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans_choice('general.others', 1) }}
+            <x-tabs.nav id="other">
+                {{ trans_choice('general.others', 1) }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+        </x-slot>
 
-        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
+        <x-slot name="content">
+            <x-tabs.tab id="general">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
 
-                <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.currency without-add-new form-group-class="col-span-6" />
-            </div>
-        </div>
-        
-        <div id="tab-address" data-tabs-content="address" x-show="active === 'address'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
-                <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.currency without-add-new form-group-class="col-span-6" />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="address">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
+                    <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
-            </div>
-        </div>
+                    <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
 
-        <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="other">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.input.hidden name="type" value="vendor" />
-                <x-form.input.hidden name="enabled" value="1" />
-            </div>
-        </div>
-    </div>
+                    <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+
+                    <x-form.input.hidden name="type" value="vendor" />
+                    <x-form.input.hidden name="enabled" value="1" />
+                </div>
+            </x-tabs.tab>
+        </x-slot>
+    </x-tabs>
 </x-form>
diff --git a/resources/views/modals/vendors/edit.blade.php b/resources/views/modals/vendors/edit.blade.php
index db5f674593b..22645dbeb72 100644
--- a/resources/views/modals/vendors/edit.blade.php
+++ b/resources/views/modals/vendors/edit.blade.php
@@ -1,90 +1,70 @@
 <x-form id="form-edit-vendor" method="PATCH" :route="['vendors.update', $vendor->id]" :model="$vendor">
-    <div x-data="{ active: 'general' }">
-        <div>
-            <div>
-                <ul class="grid grid-cols-6">
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-general"
-                        data-id="tab-general"
-                        data-tabs="general"
-                        x-on:click="active = 'general'"
-                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.general') }}
+    <x-tabs active="general" class="grid grid-cols-3" override="class">
+        <x-slot name="navs">
+            <x-tabs.nav id="general">
+                {{ trans('general.general') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('name')||form.errors.has('email')||form.errors.has('phone')||form.errors.has('tax_number')||form.errors.has('currency_code')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-address"
-                        data-id="tab-address"
-                        data-tabs="address"
-                        x-on:click="active = 'address'"
-                        x-bind:class="active != 'address' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans('general.address') }}
+            <x-tabs.nav id="address">
+                {{ trans('general.address') }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('address')||form.errors.has('city')||form.errors.has('zip_code')||form.errors.has('state')||form.errors.has('country')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
 
-                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-2"
-                        id="tab-other"
-                        data-id="tab-other"
-                        data-tabs="other"
-                        x-on:click="active = 'other'"
-                        x-bind:class="active != 'other' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                    >
-                        {{ trans_choice('general.others', 1) }}
+            <x-tabs.nav id="other">
+                {{ trans_choice('general.others', 1) }}
 
-                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
-                            {{ trans('general.validation_error') }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
+                <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('website')||form.errors.has('reference')">
+                    {{ trans('general.validation_error') }}
+                </span>
+            </x-tabs.nav>
+        </x-slot>
 
-        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
+        <x-slot name="content">
+            <x-tabs.tab id="general">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="name" label="{{ trans('general.name') }}" form-group-class="col-span-6" />
 
-                <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="email" label="{{ trans('general.email') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="phone" label="{{ trans('general.phone') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.currency without-add-new form-group-class="col-span-6" />
-            </div>
-        </div>
-        
-        <div id="tab-address" data-tabs-content="address" x-show="active === 'address'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
-                <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
-        
-                <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="tax_number" label="{{ trans('general.tax_number') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.currency without-add-new form-group-class="col-span-6" />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="address">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">      
+                    <x-form.group.textarea name="address" label="{{ trans('general.address') }}" form-group-class="col-span-6" not-required />
+            
+                    <x-form.group.text name="city" label="{{ trans_choice('general.cities', 1) }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.text name="zip_code" label="{{ trans('general.zip_code') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
-            </div>
-        </div>
+                    <x-form.group.text name="state" label="{{ trans('general.state') }}" form-group-class="col-span-6" not-required />
 
-        <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
-            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-                <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
+                    <x-form.group.country form-group-class="col-span-6 el-select-tags-pl-38" not-required />
+                </div>
+            </x-tabs.tab>
 
-                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+            <x-tabs.tab id="other">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                    <x-form.group.text name="website" label="{{ trans('general.website') }}" form-group-class="col-span-6" not-required />
 
-                <x-form.input.hidden name="type" value="vendor" />
-                <x-form.input.hidden name="enabled" value="1" />
-            </div>
-        </div>
-    </div>
+                    <x-form.group.text name="reference" label="{{ trans('general.reference') }}" form-group-class="col-span-6" not-required />
+
+                    <x-form.input.hidden name="type" value="vendor" />
+                    <x-form.input.hidden name="enabled" value="1" />
+                </div>
+            </x-tabs.tab>
+        </x-slot>
+    </x-tabs>
 </x-form>