diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index cbeed6dd8..30cc4c5bb 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -159,6 +159,65 @@ export default {
                 prevEl: ".swiper-button-prev",
             },
         });
+
+        //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];
+    
+                    item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
+                        item.classList.add('swiper-slide');
+    
+                        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');
+    
+                    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>
+                        `; 
+    
+                    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');
+    
+                    item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
+                        slide.removeAttribute('data-tabs-slide');
+                    });
+                }
+            }
+        }
+        //swiper slider for long tabs items
     },
 
     methods: {
diff --git a/resources/assets/js/views/common/contacts.js b/resources/assets/js/views/common/contacts.js
index 5f0a6904c..ff1f53b25 100644
--- a/resources/assets/js/views/common/contacts.js
+++ b/resources/assets/js/views/common/contacts.js
@@ -37,51 +37,6 @@ const app = new Vue({
 
     mounted() {
         this.form.create_user = false;
-
-        //swiper slider for long tabs items
-        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
-            item.id = index;
-
-            if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
-                document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
-                    item.classList.add('swiper-slide');
-                });
-
-                document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
-                document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
-
-                let html = `
-                    <div class="swiper-tabs-container">
-                        ${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; 
-            }
-
-            // console.log(swiper.activeIndex);
-
-            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",
-                },
-            });
-        }
-        //swiper slider for long tabs items
     },
 
     methods:{
diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php
index 68dcd376f..fd13f7e0d 100644
--- a/resources/views/components/contacts/show/content.blade.php
+++ b/resources/views/components/contacts/show/content.blade.php
@@ -134,7 +134,7 @@
 
         @if (! $hideBottomRight)
         <x-show.content.right>
-            <x-tabs id="" slides="3" active="documents">
+            <x-tabs active="documents">
                 <x-slot name="navs">
                     @stack('documents_nav_start')
 
@@ -150,28 +150,7 @@
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
-                    <x-tabs.nav
-                        id="first"
-                    >
-                    First
-                    </x-tabs.nav>
-
-                    <x-tabs.nav
-                        id="transactions"
-                        name="{{ trans_choice('general.transactions', 2) }}"
-                    />
-                    <x-tabs.nav
-                        id="first"
-                    >
-                    First
-                    </x-tabs.nav>
-
-                    <x-tabs.nav
-                        id="second"
-                    >
-                    Second
-                    </x-tabs.nav>
-
+                    
                     @stack('transactions_nav_end')
                 </x-slot>
 
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index 492658323..6b60b4c18 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -1,16 +1,20 @@
-@props(['active', 'id'])
+@props(['active'])
 
 @php
     if (! empty($attributes['slides'])) {
         $slides = $attributes['slides'];
+    } else {
+        $slides = '3';
     }
 
-    if (empty($attributes['slides'])) {
-        $slides = '2';
+    if (! empty($attributes['is_slider'])) {
+        $is_slider = true;
+    } else {
+        $is_slider = false;
     }
 @endphp
 
-<div data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+<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 }}>
             {!! $navs !!}