diff --git a/public/css/app.css b/public/css/app.css
index 1424ee98b..40f642430 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -50876,6 +50876,10 @@ body{
     width: 8.333333%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:w-3\/12{
     width: 25%;
   }
@@ -50940,10 +50944,6 @@ body{
     width: 1rem;
   }
 
-  .lg\:w-auto{
-    width: auto;
-  }
-
   .lg\:w-2\/4{
     width: 50%;
   }
diff --git a/resources/assets/js/views/portal/apps.js b/resources/assets/js/views/portal/apps.js
index 547c56aa4..f079b0929 100644
--- a/resources/assets/js/views/portal/apps.js
+++ b/resources/assets/js/views/portal/apps.js
@@ -66,10 +66,37 @@ const app = new Vue({
         if (typeof this.form.password !== 'undefined') {
             this.form.password = '';
         }
+        
+
+        if (document.querySelector('[data-tabs-swiper]').childElementCount) {
+
+            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,
-            slidesPerView: 3,
+            slidesPerView: 1,
             pagination: {
                 el: ".swiper-pagination",
                 clickable: true
diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index adab432eb..86c14a20b 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -28,33 +28,23 @@
                             @php $is_active = true; @endphp
 
                             <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 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 class="w-24 truncate">
+                                                    <div>
                                                         {{ $name }}
                                                     </div>
                                                 </x-tabs.nav>
                                             </div>
-                                            @stack('invoice_{{ $key }}_tab_end')
+                                        @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>
+                                        @php $is_active = false; @endphp
+                                    @endforeach
                                 </div>
                             </x-slot>
                         </div>
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index 67844fe81..33736c241 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -26,33 +26,23 @@
                             @php $is_active = true; @endphp
 
                             <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="onChangePaymentMethod('{{ $key }}')"
-                                                    >
-                                                        <div class="w-24 truncate">
-                                                            {{ $name }}
-                                                        </div>
-                                                    </x-tabs.nav>
-                                                </div>
-                                            @stack('invoice_{{ $key }}_tab_end')
+                                <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')
 
-                                            @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>
+                                        @php $is_active = false; @endphp
+                                    @endforeach
                                 </div>
                             </x-slot>
                         </div>
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index a7af3a0f1..403d1d89d 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -35,16 +35,15 @@
                                 @php $is_active = true; @endphp
 
                                 <x-slot name="navs">
-                                    <div class="swiper swiper-links w-full">
-                                        <div class="swiper-wrapper">
+                                    <div data-tabs-swiper class="w-full flex">
                                         @foreach ($payment_methods as $key => $name)
                                             @stack('invoice_{{ $key }}_tab_start')
-                                                <div class="swiper-slide">
+                                                <div data-tabs-slide>
                                                     <x-tabs.nav
                                                         id="{{ $name }}"
                                                         @click="onChangePaymentMethodSigned('{{ $key }}')"
                                                     >
-                                                        <div class="w-24 truncate">
+                                                        <div>
                                                             {{ $name }}
                                                         </div>
                                                     </x-tabs.nav>
@@ -53,15 +52,6 @@
 
                                             @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>
                                 </x-slot>
                             </div>