diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index 30cc4c5bb..a6f2307db 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -162,59 +162,57 @@ export default {
 
         //swiper slider for long tabs items
         for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
-            if (item.getAttribute('data-is-slider') == true) {
-                if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 3) {
-                    let initial_slide = 0;
-                    let hash_split = window.location.hash.split('#')[1];
+            if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
+                let initial_slide = 0;
+                let hash_split = window.location.hash.split('#')[1];
     
-                    item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
-                        item.classList.add('swiper-slide');
+                item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
+                    item.classList.add('swiper-slide');
     
-                        if (item.getAttribute('data-tabs') == hash_split) {
-                            initial_slide = index;
-                        }
-                    });
+                    if (item.getAttribute('data-tabs') == hash_split) {
+                        initial_slide = index;
+                    }
+                });
     
-                    item.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
-                    item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
+                item.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
+                item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
     
-                    let html = `
-                        <div class="swiper-tabs-container">
-                            ${item.querySelector('[data-tabs-swiper]').innerHTML}
-                        </div>
+                let html = `
+                    <div class="swiper-tabs-container">
+                        ${item.querySelector('[data-tabs-swiper]').innerHTML}
+                    </div>
     
-                        <div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0">
-                            <span class="material-icons">chevron_right</span>
-                        </div>
-                        <div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
-                            <span class="material-icons">chevron_left</span>
-                        </div>
-                        `; 
+                    <div class="swiper-button-next bg-transparent text-white flex items-center justify-center right-0">
+                        <span class="material-icons text-purple text-4xl">chevron_right</span>
+                    </div>
+                    <div class="swiper-button-prev bg-transparent text-white flex items-center justify-center left-0">
+                        <span class="material-icons text-purple text-4xl">chevron_left</span>
+                    </div>
+                    `; 
     
-                    item.querySelector('[data-tabs-swiper]').innerHTML = html; 
+                item.querySelector('[data-tabs-swiper]').innerHTML = html; 
     
-                    new Swiper(".swiper-tabs-container", {
-                        loop: false,
-                        slidesPerView: Number(item.getAttribute('data-swiper')),
-                        pagination: {
-                            el: ".swiper-pagination",
-                            clickable: true
-                        },
-                        navigation: {
-                            nextEl: ".swiper-button-next",
-                            prevEl: ".swiper-button-prev",
-                        },
-                        initialSlide: initial_slide,
-                    });
-                } else {
-                    item.removeAttribute('data-swiper');
-                    item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper');
-                    item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper');
+                new Swiper('.swiper-tabs-container', {
+                    loop: false,
+                    slidesPerView: Number(item.getAttribute('data-swiper')),
+                    pagination: {
+                        el: '.swiper-pagination',
+                        clickable: true
+                    },
+                    navigation: {
+                        nextEl: '.swiper-button-next',
+                        prevEl: '.swiper-button-prev',
+                    },
+                    initialSlide: initial_slide,
+                });
+            } else {
+                item.removeAttribute('data-swiper');
+                item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper');
+                item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper');
     
-                    item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
-                        slide.removeAttribute('data-tabs-slide');
-                    });
-                }
+                item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
+                    slide.removeAttribute('data-tabs-slide');
+                });
             }
         }
         //swiper slider for long tabs items
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index 6b60b4c18..5813169f4 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -16,7 +16,7 @@
 
 <div data-swiper="{{ $slides }}" data-is-slider="{{ $is_slider }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
     <div data-tabs-swiper>
-        <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
+        <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'inline-flex overflow-x-scroll lg:overflow-visible']) : $attributes }}>
             {!! $navs !!}
         </ul>
     </div>