diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index b8555526b..adab432eb 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -23,68 +23,70 @@
         <div class="flex flex-col lg:flex-row my-10 lg:space-x-24 rtl:space-x-reverse space-y-12 lg:space-y-0">
             <div class="w-full lg:w-5/12">
                 @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
-                    <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
+                    <x-tabs active="{{ reset($payment_methods) }}">
                         <div role="tablist" class="flex flex-wrap">
                             @php $is_active = true; @endphp
 
-                            <div class="swiper swiper-links w-full">
-                                <div class="swiper-wrapper">
-                                    @foreach ($payment_methods as $key => $name)
-                                        @stack('invoice_{{ $key }}_tab_start')
-                                        <div class="swiper-slide">
-                                            <div
-                                                x-on:click="active = '{{ $name }}'"
-                                                @click="onChangePaymentMethodSigned('{{ $key }}')"
-                                                id="tabs-payment-method-{{ $key }}-tab"
-                                                x-bind:class="active != '{{ $name }}' ? '' : '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'"
-                                                class="relative text-sm text-black text-center pb-2 border-b cursor-pointer transition-all tabs-link"
-                                            >
-                                                {{ $name }}
+                            <x-slot name="navs">
+                                <div class="swiper swiper-links w-full">
+                                    <div class="swiper-wrapper">
+                                        @foreach ($payment_methods as $key => $name)
+                                            @stack('invoice_{{ $key }}_tab_start')
+                                            <div class="swiper-slide">
+                                                <x-tabs.nav
+                                                    id="{{ $name }}"
+                                                    @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                >
+                                                    <div class="w-24 truncate">
+                                                        {{ $name }}
+                                                    </div>
+                                                </x-tabs.nav>
                                             </div>
-                                        </div>
-                                        @stack('invoice_{{ $key }}_tab_end')
+                                            @stack('invoice_{{ $key }}_tab_end')
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
-                                </div>
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </div>
 
-                                <div class="swiper-button-next top-3 right-0">
-                                    <span class="material-icons">chevron_right</span>
+                                    <div class="swiper-button-next top-3 right-0">
+                                        <span class="material-icons">chevron_right</span>
+                                    </div>
+
+                                    <div class="swiper-button-prev top-3 left-0">
+                                        <span class="material-icons">chevron_left</span>
+                                    </div>
                                 </div>
-                                <div class="swiper-button-prev top-3 left-0">
-                                    <span class="material-icons">chevron_left</span>
-                                </div>
-                            </div>
+                            </x-slot>
                         </div>
                         @php $is_active = true; @endphp
 
-                        @foreach ($payment_methods as $key => $name)
-                            @stack('invoice_{{ $key }}_content_start')
-                            <div
-                                x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
-                                class="my-3"
-                                id="tabs-payment-method-{{ $key }}"
-                            >
-                                <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
-                            </div>
-                            @stack('invoice_{{ $key }}_content_end')
+                        <x-slot name="content">
+                            @foreach ($payment_methods as $key => $name)
+                                @stack('invoice_{{ $key }}_content_start')
+                                <x-tabs.tab id="{{ $name }}">
+                                    <div class="my-3">
+                                        <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
+                                    </div>
+                                </x-tabs.tab>
+                                @stack('invoice_{{ $key }}_content_end')
 
-                            @php $is_active = false; @endphp
-                        @endforeach
-                    </div>
+                                @php $is_active = false; @endphp
+                            @endforeach
 
-                    <x-form id="portal">
-                        <x-form.group.payment-method
-                            id="payment-method"
-                            :selected="array_key_first($payment_methods)"
-                            not-required
-                            form-group-class="invisible"
-                            placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
-                            change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
-                        />
+                            <x-form id="portal">
+                                <x-form.group.payment-method
+                                    id="payment-method"
+                                    :selected="array_key_first($payment_methods)"
+                                    not-required
+                                    form-group-class="invisible"
+                                    placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
+                                    change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
+                                />
 
-                        <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
-                    </x-form>
+                                <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
+                            </x-form>
+                        </x-slot>
+                    </x-tabs>
                 @endif
 
                 @if ($invoice->transactions->count())
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index b1bc4adeb..239a04d13 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -21,66 +21,70 @@
         <div class="flex flex-col lg:flex-row my-10 lg:space-x-24 rtl:space-x-reverse space-y-12 lg:space-y-0">
             <div class="w-full lg:w-5/12">
                 @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
-                    <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
-                        <div role="tablist" class="flex flex-wrap gap-y-4">
+                    <x-tabs active="{{ reset($payment_methods) }}">
+                        <div role="tablist" class="flex flex-wrap">
                             @php $is_active = true; @endphp
 
-                            <div class="swiper swiper-links w-full">
-                                <div class="swiper-wrapper">
-                                    @foreach ($payment_methods as $key => $name)
-                                        @stack('invoice_{{ $key }}_tab_start')
+                            <x-slot name="navs">
+                                <div class="swiper swiper-links w-full">
+                                    <div class="swiper-wrapper">
+                                        @foreach ($payment_methods as $key => $name)
+                                            @stack('invoice_{{ $key }}_tab_start')
+                                                <div class="swiper-slide">
+                                                    <x-tabs.nav
+                                                        id="{{ $name }}"
+                                                        @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                    >
+                                                        <div class="w-24 truncate">
+                                                            {{ $name }}
+                                                        </div>
+                                                    </x-tabs.nav>
+                                                </div>
+                                            @stack('invoice_{{ $key }}_tab_end')
 
-                                        <div class="swiper-slide">
-                                            <div
-                                                x-on:click="active = '{{ $name }}'"
-                                                @click="onChangePaymentMethod('{{ $key }}')"
-                                                id="tabs-payment-method-{{ $key }}-tab"
-                                                x-bind:class="active != '{{ $name }}' ? '' : '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'"
-                                                class="text-sm text-black text-center pb-2 border-b cursor-pointer transition-all tabs-link"
-                                            >
-                                                {{ $name }}
-                                            </div>
-                                        </div>
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </div>
 
-                                        @stack('invoice_{{ $key }}_tab_end')
+                                    <div class="swiper-button-next top-3 right-0">
+                                        <span class="material-icons">chevron_right</span>
+                                    </div>
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
+                                    <div class="swiper-button-prev top-3 left-0">
+                                        <span class="material-icons">chevron_left</span>
+                                    </div>
                                 </div>
-                            </div>
+                            </x-slot>
                         </div>
-
                         @php $is_active = true; @endphp
 
-                        @foreach ($payment_methods as $key => $name)
-                            @stack('invoice_{{ $key }}_content_start')
+                        <x-slot name="content">
+                            @foreach ($payment_methods as $key => $name)
+                                @stack('invoice_{{ $key }}_content_start')
+                                    <x-tabs.tab id="{{ $name }}">
+                                        <div class="my-3">
+                                            <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
+                                        </div>
+                                    </x-tabs.tab>
+                                @stack('invoice_{{ $key }}_content_end')
 
-                            <div
-                                x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
-                                class="my-3"
-                                id="tabs-payment-method-{{ $key }}"
-                            >
-                                <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
-                            </div>
+                                @php $is_active = false; @endphp
+                            @endforeach
 
-                            @stack('invoice_{{ $key }}_content_end')
+                            <x-form id="portal">
+                                <x-form.group.payment-method
+                                    id="payment-method"
+                                    :selected="array_key_first($payment_methods)"
+                                    not-required
+                                    form-group-class="invisible"
+                                    placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
+                                    change="onChangePaymentMethod('{{ array_key_first($payment_methods) }}')"
+                                />
 
-                            @php $is_active = false; @endphp
-                        @endforeach
-                    </div>
-
-                    <x-form id="portal">
-                        <x-form.group.payment-method
-                            id="payment-method"
-                            :selected="array_key_first($payment_methods)"
-                            not-required
-                            form-group-class="invisible"
-                            placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
-                            change="onChangePaymentMethod('{{ array_key_first($payment_methods) }}')"
-                        />
-
-                        <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
-                    </x-form>
+                                <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
+                            </x-form>
+                        </x-slot>
+                    </x-tabs>
                 @endif
 
                 @if ($invoice->transactions->count())
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index 9f2e35cf9..a7af3a0f1 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -30,60 +30,70 @@
             <div class="flex flex-col lg:flex-row my-10 lg:space-x-24 rtl:space-x-reverse space-y-12 lg:space-y-0">
                 <div class="w-full lg:w-5/12">
                     @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
-                        <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
+                        <x-tabs active="{{ reset($payment_methods) }}">
                             <div role="tablist" class="flex flex-wrap">
                                 @php $is_active = true; @endphp
 
-                                <div class="swiper swiper-links w-full">
-                                    <div class="swiper-wrapper">
+                                <x-slot name="navs">
+                                    <div class="swiper swiper-links w-full">
+                                        <div class="swiper-wrapper">
                                         @foreach ($payment_methods as $key => $name)
                                             @stack('invoice_{{ $key }}_tab_start')
-                                            <div class="swiper-slide">
-                                                <div
-                                                    x-on:click="active = '{{ $name }}'"
-                                                    @click="onChangePaymentMethodSigned('{{ $key }}')"
-                                                    id="tabs-payment-method-{{ $key }}-tab"
-                                                    x-bind:class="active != '{{ $name }}' ? '' : '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'"
-                                                    class="relative text-sm text-black text-center pb-2 border-b cursor-pointer transition-all tabs-link"
-                                                >
-                                                    {{ $name }}
+                                                <div class="swiper-slide">
+                                                    <x-tabs.nav
+                                                        id="{{ $name }}"
+                                                        @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                    >
+                                                        <div class="w-24 truncate">
+                                                            {{ $name }}
+                                                        </div>
+                                                    </x-tabs.nav>
                                                 </div>
-                                            </div>
                                             @stack('invoice_{{ $key }}_tab_end')
 
                                             @php $is_active = false; @endphp
                                         @endforeach
+                                        </div>
+
+                                        <div class="swiper-button-next top-3 right-0">
+                                            <span class="material-icons">chevron_right</span>
+                                        </div>
+
+                                        <div class="swiper-button-prev top-3 left-0">
+                                            <span class="material-icons">chevron_left</span>
+                                        </div>
                                     </div>
-                                </div>
+                                </x-slot>
                             </div>
                             @php $is_active = true; @endphp
 
-                            @foreach ($payment_methods as $key => $name)
-                                @stack('invoice_{{ $key }}_content_start')
-                                <div
-                                    x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
-                                    class="my-3"
-                                    id="tabs-payment-method-{{ $key }}"
-                                >
-                                    <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
-                                </div>
-                                @stack('invoice_{{ $key }}_content_end')
+                            <x-slot name="content">
+                                @foreach ($payment_methods as $key => $name)
+                                    @stack('invoice_{{ $key }}_content_start')
+                                        <x-tabs.tab id="{{ $name }}">
+                                            <div class="my-3">
+                                                <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
+                                            </div>
+                                        </x-tabs.tab>
+                                    @stack('invoice_{{ $key }}_content_end')
+                                    
+                                    @php $is_active = false; @endphp
+                                @endforeach
 
-                                @php $is_active = false; @endphp
-                            @endforeach
-                        </div>
-                        <x-form id="portal">
-                            <x-form.group.payment-method
-                                id="payment-method"
-                                :selected="array_key_first($payment_methods)"
-                                not-required
-                                form-group-class="invisible"
-                                placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
-                                change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
-                            />
+                                <x-form id="portal">
+                                    <x-form.group.payment-method
+                                        id="payment-method"
+                                        :selected="array_key_first($payment_methods)"
+                                        not-required
+                                        form-group-class="invisible"
+                                        placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
+                                        change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
+                                    />
 
-                            <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
-                        </x-form>
+                                    <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
+                                </x-form>
+                            </x-slot>
+                        </x-tabs>
                     @endif
 
                     @if ($invoice->transactions->count())