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..f6ef336c3 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;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index e4afcb3c3..3bcdbf210 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;
diff --git a/resources/views/banking/accounts/show.blade.php b/resources/views/banking/accounts/show.blade.php
index c52c61943..b4cd4799f 100644
--- a/resources/views/banking/accounts/show.blade.php
+++ b/resources/views/banking/accounts/show.blade.php
@@ -4,7 +4,9 @@
     </x-slot>
 
     <x-slot name="info">
-        <div class="mt-3">
+        <div class="mt-4">
+        <x-index.default text="{{ trans('accounts.default_account') }}" />
+
             @if (! $account->enabled)
                 <x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />
             @endif
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..9ac85a72e 100644
--- a/resources/views/components/layouts/portal/header.blade.php
+++ b/resources/views/components/layouts/portal/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/preview/header.blade.php b/resources/views/components/layouts/preview/header.blade.php
index 13be37276..9ac85a72e 100644
--- a/resources/views/components/layouts/preview/header.blade.php
+++ b/resources/views/components/layouts/preview/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/signed/header.blade.php b/resources/views/components/layouts/signed/header.blade.php
index 478d6a956..bc9cf3519 100644
--- a/resources/views/components/layouts/signed/header.blade.php
+++ b/resources/views/components/layouts/signed/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/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())