diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index c863f94af..0743d8107 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -29,6 +29,9 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
                     let td_item = td[i];
 
                     td_item.addEventListener("click", (event) => {
+                        if (document.body.clientWidth < 768 && event.target.closest('[overflow-x-hidden]')) {
+                            return;
+                        }
                         // click disabled when preview dialog is open
                         if (event.target.closest('[data-tooltip-target]')) {
                             return;
@@ -436,6 +439,7 @@ function marqueeAnimation(truncate) {
 
         //there is overflow class for the animation does not overflow the width
         truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
+        truncate.parentElement.parentElement.setAttribute('overflow-x-hidden', true);
     }
 }
 
diff --git a/public/css/app.css b/public/css/app.css
index 1d98bee48..e3419e4a3 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -53686,6 +53686,16 @@ table thead a:hover{
     padding-right: 8px !important;
 }
 
+.el-select-dropdown__item .new-badge {
+    width: 45px !important;
+    margin-left: 8px;
+    z-index: 99;
+}
+
+.el-select-dropdown__item .new-badge:hover {
+    background-color: #6ea152;
+}
+
 .el-select-dropdown__item .material-icons {
     padding-right: 0 !important;
     padding-left: 0 !important;
@@ -54088,6 +54098,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     .full-width-mobile {
         width: 100% !important;
     }
+
+    .full-height-mobile {
+        height: 100% !important;
+    }
  }
  /* full-width for mobile. Some component use inline styling for width */
 
@@ -55817,14 +55831,14 @@ body{
   padding-right: 0.75rem;
 }
 
-[dir="ltr"] .ltr\:pl-10{
-  padding-left: 2.5rem;
-}
-
 [dir="ltr"] .ltr\:pr-10{
   padding-right: 2.5rem;
 }
 
+[dir="ltr"] .ltr\:pl-10{
+  padding-left: 2.5rem;
+}
+
 [dir="ltr"] .ltr\:text-left{
   text-align: left;
 }
@@ -56826,14 +56840,14 @@ body{
   padding-left: 0.75rem;
 }
 
-[dir="rtl"] .rtl\:pr-10{
-  padding-right: 2.5rem;
-}
-
 [dir="rtl"] .rtl\:pl-10{
   padding-left: 2.5rem;
 }
 
+[dir="rtl"] .rtl\:pr-10{
+  padding-right: 2.5rem;
+}
+
 [dir="rtl"] .rtl\:text-left{
   text-align: left;
 }
@@ -56893,6 +56907,10 @@ body{
     float: right;
   }
 
+  .sm\:mt-6{
+    margin-top: 1.5rem;
+  }
+
   .sm\:mt-12{
     margin-top: 3rem;
   }
@@ -57086,10 +57104,19 @@ body{
     border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
+  .sm\:p-10{
+    padding: 2.5rem;
+  }
+
   .sm\:p-7{
     padding: 1.75rem;
   }
 
+  .sm\:py-10{
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .sm\:px-0{
     padding-left: 0px;
     padding-right: 0px;
@@ -57100,6 +57127,31 @@ body{
     padding-right: 0.5rem;
   }
 
+  .sm\:text-xs{
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .sm\:text-base{
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-lg{
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .sm\:text-xl{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .sm\:text-2xl{
+    font-size: 1.375rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:text-6xl{
     font-size: 2.5rem;
     line-height: 2.75rem;
@@ -57114,6 +57166,10 @@ body{
     right: 1rem;
   }
 
+  [dir="ltr"] .sm\:ltr\:pl-10{
+    padding-left: 2.5rem;
+  }
+
   [dir="rtl"] .sm\:rtl\:left-4{
     left: 1rem;
   }
@@ -57121,6 +57177,10 @@ body{
   [dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 1;
   }
+
+  [dir="rtl"] .sm\:rtl\:pr-10{
+    padding-right: 2.5rem;
+  }
 }
 
 @media (min-width: 768px){
diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 595fd7943..b190d91b7 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -105,7 +105,7 @@
 
         <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
 
-        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]  || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
+        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
 
         <select :name="name" :id="name" class="hidden">
             <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index 17d1a0d93..7d8c01f48 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -102,7 +102,7 @@
 
         <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
 
-        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
+        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
 
         <select :name="name"  :id="name" class="hidden">
             <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
@@ -202,7 +202,7 @@
 
         <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
 
-        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
+        <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
 
         <select :name="name"  :id="name" v-model="selected" class="d-none">
             <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
diff --git a/resources/assets/js/views/wizard/Company.vue b/resources/assets/js/views/wizard/Company.vue
index 42831b9b5..24b444861 100644
--- a/resources/assets/js/views/wizard/Company.vue
+++ b/resources/assets/js/views/wizard/Company.vue
@@ -1,15 +1,15 @@
 <template>
     <div>
-        <div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
+        <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
             <WizardSteps :active_state="active"></WizardSteps>
 
             <form ref="form" class="w-full">
                 <div class="relative">
                     <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
-                        <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
+                        <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
                     </div>
 
-                    <div class="flex flex-col justify-between">
+                    <div class="flex flex-col justify-between -mt-5 sm:mt-0">
                         <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
                             <div class="sm:col-span-6">
                                 <base-input
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
index 121c19f74..bdc4b0513 100644
--- a/resources/assets/js/views/wizard/Currencies.vue
+++ b/resources/assets/js/views/wizard/Currencies.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
+    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
         <WizardSteps :active_state="active"></WizardSteps>
 
-        <div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
+        <div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
             <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                 <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
             </div>
diff --git a/resources/assets/js/views/wizard/Finish.vue b/resources/assets/js/views/wizard/Finish.vue
index 7085e4565..25cda807e 100644
--- a/resources/assets/js/views/wizard/Finish.vue
+++ b/resources/assets/js/views/wizard/Finish.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
+    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
         <div class="pr-10">
             <WizardSteps :active_state="active"></WizardSteps>
         </div>
 
-        <div modal-container class="flex flex-col justify-between" style="height:565px;">
+        <div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
             <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                 <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
             </div>
diff --git a/resources/assets/js/views/wizard/Steps.vue b/resources/assets/js/views/wizard/Steps.vue
index b27e01376..ed5f17d8c 100644
--- a/resources/assets/js/views/wizard/Steps.vue
+++ b/resources/assets/js/views/wizard/Steps.vue
@@ -2,7 +2,7 @@
     <div>
         <nav aria-label="Progress">
         	<ol role="list" class="flex mb-10">
-                <li class="w-1/4">
+                <li class="w-1/3">
                 	<span class="pr-6 flex flex-col">
                         <span
                           	:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
@@ -15,7 +15,7 @@
                 	</span>
               	</li>
 
-                <li class="w-1/4">
+                <li class="w-1/3">
                     <span class="px-3 flex flex-col">
                         <span
                             :class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
@@ -28,7 +28,7 @@
                     </span>
                 </li>
 
-                <li class="w-1/4">
+                <li class="w-1/3">
                     <span class="pl-6 flex flex-col">
                         <span
                             :class="[{'bg-purple': active_state == 3}]"
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index e4afcb3c3..1f2e9d664 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -308,6 +308,16 @@
     padding-right: 8px !important;
 }
 
+.el-select-dropdown__item .new-badge {
+    width: 45px !important;
+    margin-left: 8px;
+    z-index: 99;
+}
+
+.el-select-dropdown__item .new-badge:hover {
+    background-color: #6ea152;
+}
+
 .el-select-dropdown__item .material-icons {
     padding-right: 0 !important;
     padding-left: 0 !important;
@@ -595,6 +605,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     .full-width-mobile {
         width: 100% !important;
     }
+
+    .full-height-mobile {
+        height: 100% !important;
+    }
  }
  /* full-width for mobile. Some component use inline styling for width */
 
diff --git a/resources/views/banking/accounts/show.blade.php b/resources/views/banking/accounts/show.blade.php
index c52c61943..ce15c52b1 100644
--- a/resources/views/banking/accounts/show.blade.php
+++ b/resources/views/banking/accounts/show.blade.php
@@ -4,7 +4,7 @@
     </x-slot>
 
     <x-slot name="info">
-        <div class="mt-3">
+        <div class="mt-4">
             @if (! $account->enabled)
                 <x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />
             @endif
diff --git a/resources/views/components/form/group/recurring.blade.php b/resources/views/components/form/group/recurring.blade.php
index f68a4e6a6..6c2b937b1 100644
--- a/resources/views/components/form/group/recurring.blade.php
+++ b/resources/views/components/form/group/recurring.blade.php
@@ -1,7 +1,7 @@
 <akaunting-recurring
     start-text="{!! trans('recurring.limit_date', ['type' => Str::replace('-recurring', '', $type)]) !!}"
     :date-range-text="{{ json_encode(trans('general.date_range')) }}"
-    middleText="{!! trans('recurring.limit_middle') !!}"
+    middle-text="{!! trans('recurring.limit_middle') !!}"
     end-text="{{ Str::plural(Str::replace('-recurring', '', $type)) }}"
 
     :frequencies="{{ json_encode($frequencies) }}"
@@ -64,4 +64,4 @@
 
     {{ $attributes }}
 >
-</akaunting-recurring>
+</akaunting-recurring>
\ No newline at end of file
diff --git a/resources/views/components/layouts/admin/header.blade.php b/resources/views/components/layouts/admin/header.blade.php
index 19aeb37aa..701623361 100644
--- a/resources/views/components/layouts/admin/header.blade.php
+++ b/resources/views/components/layouts/admin/header.blade.php
@@ -13,7 +13,7 @@
                 </h1>
 
                 @if (! empty($status))
-                <div class="ltr:ml-4 rtl:mr-4">
+                <div class="ltr:ml-4 rtl:mr-4 mt-2">
                     {!! $status !!}
                 </div>
                 @endif
diff --git a/resources/views/components/layouts/portal/header.blade.php b/resources/views/components/layouts/portal/header.blade.php
index 13be37276..7a7f02625 100644
--- a/resources/views/components/layouts/portal/header.blade.php
+++ b/resources/views/components/layouts/portal/header.blade.php
@@ -1,7 +1,7 @@
 @stack('header_start')
 
 <div id="header" class="xl:pt-6 -mt-2">
-    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+    <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
         <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
                 <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@@ -13,7 +13,7 @@
                 </h1>
 
                 @if (! empty($status))
-                <div class="ltr:ml-4 rtl:mr-4">
+                <div class="ltr:ml-4 rtl:mr-4 mt-2">
                     {!! $status !!}
                 </div>
                 @endif
diff --git a/resources/views/components/layouts/preview/header.blade.php b/resources/views/components/layouts/preview/header.blade.php
index 13be37276..7a7f02625 100644
--- a/resources/views/components/layouts/preview/header.blade.php
+++ b/resources/views/components/layouts/preview/header.blade.php
@@ -1,7 +1,7 @@
 @stack('header_start')
 
 <div id="header" class="xl:pt-6 -mt-2">
-    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+    <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
         <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
                 <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@@ -13,7 +13,7 @@
                 </h1>
 
                 @if (! empty($status))
-                <div class="ltr:ml-4 rtl:mr-4">
+                <div class="ltr:ml-4 rtl:mr-4 mt-2">
                     {!! $status !!}
                 </div>
                 @endif
diff --git a/resources/views/components/layouts/signed/header.blade.php b/resources/views/components/layouts/signed/header.blade.php
index 478d6a956..fa328751b 100644
--- a/resources/views/components/layouts/signed/header.blade.php
+++ b/resources/views/components/layouts/signed/header.blade.php
@@ -1,7 +1,7 @@
 @stack('header_start')
 
 <div id="header" class="xl:pt-6 -mt-2">
-    <div lass="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+    <div lass="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
         <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
                 <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@@ -13,7 +13,7 @@
                 </h1>
 
                 @if (! empty($status))
-                <div class="ltr:ml-4 rtl:mr-4">
+                <div class="ltr:ml-4 rtl:mr-4 mt-2">
                     {!! $status !!}
                 </div>
                 @endif
diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index c65867582..46fbf9f0c 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -23,72 +23,69 @@
         <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']))
-                    <x-tabs active="{{ reset($payment_methods) }}">
+                    <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
                         <div role="tablist" class="flex flex-wrap">
                             @php $is_active = true; @endphp
 
-                            <x-slot name="navs">
-                                <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')
+                            <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
+                                    @foreach ($payment_methods as $key => $name)
+                                        @stack('invoice_{{ $key }}_tab_start')
+                                            <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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
+                                            >
+                                                {{ $name }}
+                                            </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 bg-body text-white flex items-center justify-center right-0 top-3">
+                                        <span class="material-icons text-purple text-4xl">chevron_right</span>
                                     </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 class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
+                                        <span class="material-icons text-purple text-4xl">chevron_left</span>
+                                    </div>
+                                @endif
+                            </div>
                         </div>
                         @php $is_active = true; @endphp
 
-                        <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')
+                        @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')
 
-                                @php $is_active = false; @endphp
-                            @endforeach
+                            @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-slot>
-                    </x-tabs>
+                            <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
+                        </x-form>
+                    </div>
                 @endif
 
                 @if ($invoice->transactions->count())
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index bb1ae6fe6..b62a1b6ec 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -21,72 +21,69 @@
         <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']))
-                    <x-tabs active="{{ reset($payment_methods) }}">
+                    <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
                         <div role="tablist" class="flex flex-wrap">
                             @php $is_active = true; @endphp
 
-                            <x-slot name="navs">
-                                <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')
+                            <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
+                                    @foreach ($payment_methods as $key => $name)
+                                        @stack('invoice_{{ $key }}_tab_start')
+                                            <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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
+                                            >
+                                                {{ $name }}
+                                            </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 bg-body text-white flex items-center justify-center right-0 top-3">
+                                        <span class="material-icons text-purple text-4xl">chevron_right</span>
                                     </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 class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
+                                        <span class="material-icons text-purple text-4xl">chevron_left</span>
+                                    </div>
+                                @endif
+                            </div>
                         </div>
                         @php $is_active = true; @endphp
 
-                        <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')
+                        @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')
 
-                                @php $is_active = false; @endphp
-                            @endforeach
+                            @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="onChangePaymentMethod('{{ 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-slot>
-                    </x-tabs>
+                            <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
+                        </x-form>
+                    </div>
                 @endif
 
                 @if ($invoice->transactions->count())
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index 86bed3ae3..a3835c6fe 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -30,72 +30,69 @@
             <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']))
-                        <x-tabs active="{{ reset($payment_methods) }}">
+                        <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
                             <div role="tablist" class="flex flex-wrap">
                                 @php $is_active = true; @endphp
 
-                                <x-slot name="navs">
-                                    <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')
+                                <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
+                                    <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
+                                        @foreach ($payment_methods as $key => $name)
+                                            @stack('invoice_{{ $key }}_tab_start')
+                                                <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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
+                                                >
+                                                    {{ $name }}
+                                                </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 bg-body text-white flex items-center justify-center right-0 top-3">
+                                            <span class="material-icons text-purple text-4xl">chevron_right</span>
                                         </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 class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
+                                            <span class="material-icons text-purple text-4xl">chevron_left</span>
+                                        </div>
+                                    @endif
+                                </div>
                             </div>
                             @php $is_active = true; @endphp
 
-                            <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
+                            @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-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) }}')"
-                                    />
+                                @php $is_active = false; @endphp
+                            @endforeach
 
-                                    <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
-                                </x-form>
-                            </x-slot>
-                        </x-tabs>
+                            <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>
+                        </div>
                     @endif
 
                     @if ($invoice->transactions->count())
diff --git a/safelist.txt b/safelist.txt
index 596669fd3..51df5748d 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -18,6 +18,16 @@ sm:min-h-500
 sm:max-w-4xl
 sm:space-x-4
 sm:text-purple
+sm:text-xs
+sm:text-base
+sm:text-lg
+sm:text-xl
+sm:text-2xl
+sm:p-10
+sm:py-10
+sm:ltr:pl-10
+sm:rtl:pr-10
+sm:mt-6
 md:grid-cols-2
 lg:mt-2
 lg:mt-4