diff --git a/resources/assets/js/views/portal/apps.js b/resources/assets/js/views/portal/apps.js
index 308420c25..547c56aa4 100644
--- a/resources/assets/js/views/portal/apps.js
+++ b/resources/assets/js/views/portal/apps.js
@@ -66,33 +66,6 @@ const app = new Vue({
         if (typeof this.form.password !== 'undefined') {
             this.form.password = '';
         }
-        
-
-        if (document.querySelector('[data-tabs-swiper]').childElementCount > 2) {
-
-            document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
-                item.classList.add('swiper-slide');
-            });
-
-            document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
-
-            let html = `
-            <div class="swiper-wrapper">
-                ${document.querySelector('[data-tabs-swiper]').innerHTML}
-            </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>
-            `; 
-
-            document.querySelector('[data-tabs-swiper]').innerHTML = html; 
-        }
-
 
         new Swiper(".swiper-links", {
             loop: false,
diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index 86c14a20b..c65867582 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -28,23 +28,35 @@
                             @php $is_active = true; @endphp
 
                             <x-slot name="navs">
-                                <div data-tabs-swiper class="w-full flex">
-                                    @foreach ($payment_methods as $key => $name)
-                                        @stack('invoice_{{ $key }}_tab_start')
-                                            <div data-tabs-slide>
-                                                <x-tabs.nav
-                                                    id="{{ $name }}"
-                                                    @click="onChangePaymentMethodSigned('{{ $key }}')"
-                                                >
-                                                    <div>
-                                                        {{ $name }}
-                                                    </div>
-                                                </x-tabs.nav>
-                                            </div>
-                                        @stack('invoice_{{ $key }}_tab_end')
+                                <div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                    <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}">
+                                        @foreach ($payment_methods as $key => $name)
+                                            @stack('invoice_{{ $key }}_tab_start')
+                                                <div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}">
+                                                    <x-tabs.nav
+                                                        id="{{ $name }}"
+                                                        @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                    >
+                                                        <div>
+                                                            {{ $name }}
+                                                        </div>
+                                                    </x-tabs.nav>
+                                                </div>
+                                            @stack('invoice_{{ $key }}_tab_end')
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </div>
+
+                                    @if (count($payment_methods) > 3)
+                                        <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>
+                                    @endif
                                 </div>
                             </x-slot>
                         </div>
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index 33736c241..bb1ae6fe6 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -26,23 +26,35 @@
                             @php $is_active = true; @endphp
 
                             <x-slot name="navs">
-                                <div data-tabs-swiper class="w-full flex">
-                                    @foreach ($payment_methods as $key => $name)
-                                        @stack('invoice_{{ $key }}_tab_start')
-                                            <div data-tabs-slide>
-                                                <x-tabs.nav
-                                                    id="{{ $name }}"
-                                                    @click="onChangePaymentMethod('{{ $key }}')"
-                                                >
-                                                    <div>
-                                                        {{ $name }}
-                                                    </div>
-                                                </x-tabs.nav>
-                                            </div>
-                                        @stack('invoice_{{ $key }}_tab_end')
+                                <div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                    <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}">
+                                        @foreach ($payment_methods as $key => $name)
+                                            @stack('invoice_{{ $key }}_tab_start')
+                                                <div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}">
+                                                    <x-tabs.nav
+                                                        id="{{ $name }}"
+                                                        @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                    >
+                                                        <div>
+                                                            {{ $name }}
+                                                        </div>
+                                                    </x-tabs.nav>
+                                                </div>
+                                            @stack('invoice_{{ $key }}_tab_end')
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </div>
+
+                                    @if (count($payment_methods) > 3)
+                                        <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>
+                                    @endif
                                 </div>
                             </x-slot>
                         </div>
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index c3e00e454..86bed3ae3 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -35,23 +35,35 @@
                                 @php $is_active = true; @endphp
 
                                 <x-slot name="navs">
-                                    <div data-tabs-swiper class="w-full flex">
-                                        @foreach ($payment_methods as $key => $name)
-                                            @stack('invoice_{{ $key }}_tab_start')
-                                                <div data-tabs-slide>
-                                                    <x-tabs.nav
-                                                        id="{{ $name }}"
-                                                        @click="onChangePaymentMethodSigned('{{ $key }}')"
-                                                    >
-                                                        <div>
-                                                            {{ $name }}
-                                                        </div>
-                                                    </x-tabs.nav>
-                                                </div>
-                                            @stack('invoice_{{ $key }}_tab_end')
+                                    <div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                        <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}">
+                                            @foreach ($payment_methods as $key => $name)
+                                                @stack('invoice_{{ $key }}_tab_start')
+                                                    <div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}">
+                                                        <x-tabs.nav
+                                                            id="{{ $name }}"
+                                                            @click="onChangePaymentMethodSigned('{{ $key }}')"
+                                                        >
+                                                            <div>
+                                                                {{ $name }}
+                                                            </div>
+                                                        </x-tabs.nav>
+                                                    </div>
+                                                @stack('invoice_{{ $key }}_tab_end')
 
-                                            @php $is_active = false; @endphp
-                                        @endforeach
+                                                @php $is_active = false; @endphp
+                                            @endforeach
+                                        </div>
+
+                                        @if (count($payment_methods) > 3)
+                                            <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>
+                                        @endif
                                     </div>
                                 </x-slot>
                             </div>