diff --git a/app/Abstracts/Notification.php b/app/Abstracts/Notification.php
index 367af653f..196e2a917 100644
--- a/app/Abstracts/Notification.php
+++ b/app/Abstracts/Notification.php
@@ -91,7 +91,7 @@ abstract class Notification extends BaseNotification implements ShouldQueue
 
     public function getFooter()
     {
-        $url = 'https://akaunting.com/lp/accounting-software?utm_source=email&utm_medium=footer&utm_campaign=plg&utm_content=' . $this->template->alias;
+        $url = 'https://akaunting.com/accounting-software?utm_source=email&utm_medium=footer&utm_campaign=plg&utm_content=' . $this->template->alias;
 
         $get_started = '<a href="' . $url . '" style="color: #676ba2; text-decoration: none;">' . trans('footer.get_started') . '</a>';
 
diff --git a/app/Traits/Recurring.php b/app/Traits/Recurring.php
index ad347f6b2..73db91340 100644
--- a/app/Traits/Recurring.php
+++ b/app/Traits/Recurring.php
@@ -188,7 +188,11 @@ trait Recurring
             return false;
         }
 
-        return $schedule->current()->getStart();
+        if (! $current = $schedule->current()) {
+            return false;
+        }
+
+        return $current->getStart();
     }
 
     public function getNextRecurring()
@@ -210,7 +214,11 @@ trait Recurring
             return false;
         }
 
-        return $schedule->first()->getStart();
+        if (! $first = $schedule->first()) {
+            return false;
+        }
+
+        return $first->getStart();
     }
 
     public function getLastRecurring()
@@ -219,6 +227,10 @@ trait Recurring
             return false;
         }
 
-        return $schedule->last()->getStart();
+        if (! $last = $schedule->last()) {
+            return false;
+        }
+
+        return $last->getStart();
     }
 }
diff --git a/app/View/Components/DeleteLink.php b/app/View/Components/DeleteLink.php
index 52c9cdee7..f098768eb 100644
--- a/app/View/Components/DeleteLink.php
+++ b/app/View/Components/DeleteLink.php
@@ -282,7 +282,7 @@ class DeleteLink extends Component
 
     protected function getClass($class)
     {
-        $default_class = 'w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap';
+        $default_class = 'w-full flex items-center text-red sm:text-purple px-2 h-9 leading-9 whitespace-nowrap';
 
         $explode = explode(',', $this->override);
 
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index cbf0431bc..c863f94af 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -11,7 +11,7 @@ document.querySelectorAll("[data-table-list]").forEach((row) => {
 
 //redirect edit or show page for table row click
 document.querySelectorAll("[data-table-body]").forEach((table) => {
-    if (document.body.clientWidth >= 991) {
+    if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) {
         let rows = table.querySelectorAll("tr");
 
         rows.forEach((row) => {
@@ -27,7 +27,13 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             if (row_href) {
                 for (let i = first_selector; i < td.length - 1; i++) {
                     let td_item = td[i];
-                    td_item.addEventListener("click", () => {
+
+                    td_item.addEventListener("click", (event) => {
+                        // click disabled when preview dialog is open
+                        if (event.target.closest('[data-tooltip-target]')) {
+                            return;
+                        }
+                        // click disabled when preview dialog is open
                         window.location.href = row_href;
                     });
 
@@ -42,6 +48,20 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             }
         });
     }
+
+    if (document.body.clientWidth <= 768) {
+        table.querySelectorAll('[data-table-list]').forEach((actions) => {
+            actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
+      
+                this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
+                    this.classList.add('opacity-0', 'invisible');
+                    this.classList.remove('show');
+                });
+            });
+        });
+    }
 });
 //redirect edit or show page for table row click
 
@@ -368,7 +388,7 @@ function marqueeAnimation(truncate) {
     // offsetwidth = width of the text, clientWidth = width of parent text (div)
     // because some index page has icons, we use two time parent element
 
-    if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {   
+    if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
         truncate.addEventListener('mouseover', function () {
             truncate.parentElement.style.animationPlayState = 'running';
 
@@ -429,6 +449,7 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
     
     if (icon_parents_element.classList.contains('flex')) {
         icon_parents_element.appendChild(defaultText);
+        icon_parents_element.classList.remove('truncate');
     } else {
         if (icon_parents_element.classList.contains('overflow-x-hidden')) {
             icon_parents_element.parentElement.appendChild(defaultText);
@@ -440,3 +461,46 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
 //disable/enable icons ejected from data-truncate-marquee
 
 //margue animation for truncated text
+
+// set with for page header
+document.querySelectorAll('[data-page-title-first]').forEach((first) => {
+    document.querySelectorAll('[data-page-title-second]').forEach((second) => {
+        let title_truncate = first.querySelector('[data-title-truncate]');
+
+        if (title_truncate !== null) {
+            if (first.clientWidth < title_truncate.clientWidth && second.clientHeight > 0) {
+                // added specific width styling for truncate text
+                title_truncate.style.width = first.clientWidth + 'px';
+                let subtract = title_truncate.clientWidth - 40;
+                title_truncate.style.width = subtract + 'px';
+                title_truncate.classList.add('truncate');
+                // added specific width styling for truncate text
+    
+                // added specific width styling into the parent title element for truncate text
+                first.classList.add('w-full', 'sm:w-6/12');
+                // added specific width styling into the parent title element for truncate text
+    
+                title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
+        
+                // added truncate animation for truncated text
+                title_truncate.addEventListener('mouseover', function () {
+                    this.classList.add('animate-marquee');
+                    this.classList.remove('truncate');
+                    this.style.animationPlayState = 'running';
+                });
+        
+                title_truncate.addEventListener('mouseout', function () {
+                    this.style.animationPlayState = 'paused';
+                    this.classList.remove('animate-marquee');
+                    this.classList.add('truncate');
+                });
+                // added truncate animation for truncated text
+            }
+        }
+
+        // remove width class name for extend the right side
+        first.classList.remove('w-full', 'sm:w-6/12');
+        // remove width class name for extend the right side
+    });
+});
+// set with for page header
diff --git a/public/css/app.css b/public/css/app.css
index a2837b0a6..1d98bee48 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1399,7 +1399,7 @@ input[type=file]::file-selector-button:hover{
         background-color: #DCE2F9;
     }
 
-.menu-list a svg {
+.menu-list ul svg {
         width: 22px;
         height: 24px;
         fill: none;
@@ -53411,6 +53411,9 @@ button, input, optgroup, select, textarea{
   border-bottom-left-radius: 0.5rem;
   border-right-width: 0px;
 }
+.suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child{
+  margin-top: 0.5rem;
+}
 [data-dropdown-actions] {
         -webkit-transform: unset !important;
                 transform: unset !important;
@@ -53467,6 +53470,27 @@ table thead a:hover{
   visibility: visible;
   opacity: 1;
 }
+.notifications-menu ul li a {
+        border-bottom: 1px solid;
+    }
+.avatar-attachment{
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+        background-color: #adb5bd;
+        border-radius: .375rem;
+        font-size: 1rem;
+        height: 45px;
+        width: 45px;
+}
 /* index */
 
 
@@ -54059,6 +54083,14 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 }
 /* responsive for role mobile */
 
+/* full-width for mobile. Some component use inline styling for width */
+@media only screen and (max-width: 991px) {
+    .full-width-mobile {
+        width: 100% !important;
+    }
+ }
+ /* full-width for mobile. Some component use inline styling for width */
+
 [dir="ltr"] .ltr\:-right-57 {
     right: -14.5rem;
 }
@@ -54080,6 +54112,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* plans page accordion */
 
+  /* hidden scroll-bar */
+  .hide-scroll-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hide-scroll-bar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  /* hidden scroll-bar */
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 550px;
@@ -54493,16 +54536,16 @@ body{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-lilac-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(245 247 250 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -57019,6 +57062,12 @@ body{
     gap: 0px;
   }
 
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -57037,6 +57086,10 @@ body{
     border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
+  .sm\:p-7{
+    padding: 1.75rem;
+  }
+
   .sm\:px-0{
     padding-left: 0px;
     padding-right: 0px;
@@ -57052,6 +57105,11 @@ body{
     line-height: 2.75rem;
   }
 
+  .sm\:text-purple{
+    --tw-text-opacity: 1;
+    color: rgb(85 88 139 / var(--tw-text-opacity));
+  }
+
   [dir="ltr"] .sm\:ltr\:right-4{
     right: 1rem;
   }
diff --git a/public/css/print.css b/public/css/print.css
index c19970f17..335dbec07 100644
--- a/public/css/print.css
+++ b/public/css/print.css
@@ -767,69 +767,63 @@ html[dir='rtl'] .print-heading {
 .classic-invoice {
     margin-top: 10px;
 }
+/*--Print --*/
 
-.col-60
-{
+.col-60 {
     display: inline-block;
-    width: 100%;
+    width: 60%;
     vertical-align: top;
 }
 
-.col-50
-{
+.col-50 {
     display: inline-block;
-    width: 100%;
+    width: 50%;
     vertical-align: top;
 }
 
-.col-40
-{
+.col-40 {
     display: inline-block;
-    width: 100%;
+    width: 40%;
     vertical-align: top;
 }
-.col-58
-{
+
+.col-58{
     display: inline-block;
     width: 58%;
     vertical-align: top;
 }
-.col-42
-{
+
+.col-42 {
     display: inline-block;
     width: 42%;
     vertical-align: top;
 }
-.col-16
-{
+
+.col-16 {
     display: inline-block;
     max-width: 16%;
     vertical-align: top;
 }
-/*--Print --*/
 
-@media (min-width: 991px) {
-    .col-60
-    {
-        display: inline-block;
-        width: 60%;
-        vertical-align: top;
-    }
-    
-    .col-50
-    {
+@media (max-width: 480px) {
+    .col-60 {
         display: inline-block;
         width: 50%;
         vertical-align: top;
     }
-    
-    .col-40
-    {
+
+    .col-40 {
         display: inline-block;
-        width: 40%;
+        width: 50%;
         vertical-align: top;
     }
 
+    .mt-classic {
+        margin-top: -1px;
+    }
+}
+
+@media (min-width: 991px) {
     .classic-invoice {
         margin-top: unset;
     }
diff --git a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
index 27128d909..3c7d6b76f 100644
--- a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
+++ b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
@@ -20,7 +20,7 @@
 
                 <div class="gap-x-1 relative">
                     <button data-dz-remove="true" class="absolute group right-0">
-                        <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                        <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
                     </button>
                 </div>
             </div>
@@ -45,12 +45,12 @@
                         </div>
                     </div>
 
-                    <div class="gap-x-1">
+                    <div class="flex flex-col gap-x-1">
                         <button data-dz-remove="true" class="group">
-                            <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                            <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
                         </button>
                         <a href="#" type="button" class="group hidden" data-dz-download>
-                            <span class="material-icons-round text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
+                            <span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
                         </a>
                     </div>
                 </div>
diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index cee481cc3..595fd7943 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -73,7 +73,7 @@
                 :label="option.value"
                 :value="option.key">
                 <span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
-                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -88,7 +88,7 @@
                     :label="option.value"
                     :value="option.key">
                     <span class="float-left">{{ option.value }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                    <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -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]">{{ 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[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>
@@ -421,7 +421,8 @@ export default {
                             values.push({
                                 key: key.toString(),
                                 value: value,
-                                level: 0
+                                level: 0,
+                                mark_new: false,
                             });
                         }
 
@@ -437,14 +438,16 @@ export default {
                                 index: index,
                                 key: index.toString(),
                                 value: option,
-                                level: 0
+                                level: 0,
+                                mark_new: false,
                             });
                         } else {
                             this.sorted_options.push({
                                 index: index,
                                 key: option.id.toString(),
                                 value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
-                                level: (option.level) ? option.level : 0
+                                level: (option.level) ? option.level : 0,
+                                mark_new: (option.mark_new) ? option.mark_new : false,
                             });
                         }
                     }, this);
@@ -456,7 +459,8 @@ export default {
                         this.sorted_options.push({
                             key: key.toString(),
                             value: value,
-                            level: 0
+                            level: 0,
+                            mark_new: false,
                         });
                     }
                 } else {
@@ -466,14 +470,16 @@ export default {
                                 index: index,
                                 key: index.toString(),
                                 value: option,
-                                level: 0
+                                level: 0,
+                                mark_new: false,
                             });
                         } else {
                             this.sorted_options.push({
                                 index: index,
                                 key: option.id.toString(),
                                 value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
-                                level: (option.level) ? option.level : 0
+                                level: (option.level) ? option.level : 0,
+                                mark_new: (option.mark_new) ? option.mark_new : false,
                             });
                         }
                     }, this);
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index e6050b8b2..17d1a0d93 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -70,7 +70,7 @@
                 :label="option.value"
                 :value="option.key">
                 <span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
-                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -85,7 +85,7 @@
                     :label="option.value"
                     :value="option.key">
                     <span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                    <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -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]">{{ 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[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>
@@ -170,7 +170,7 @@
                 :label="option.value"
                 :value="option.key">
                 <span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
-                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -185,7 +185,7 @@
                     :label="option.value"
                     :value="option.key">
                     <span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
+                    <span class="new-badge absolute right-2 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[option.key] || (option.mark_new)">{{ addNew.new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -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]">{{ 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[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/mixins/global.js b/resources/assets/js/mixins/global.js
index d99630bae..52eac68f3 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -53,6 +53,8 @@ if (typeof exception_tracker != 'undefined') {
     }
 }
 
+var BreakException = {};
+
 export default {
     components: {
         AkauntingDropzoneFileUpload,
@@ -174,6 +176,78 @@ export default {
                 prevEl: ".swiper-button-prev",
             },
         });
+
+        //swiper slider for long tabs items
+        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
+            if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
+                let initial_slide = 0;
+                let hash_split = window.location.hash.split('#')[1];
+                let loop = 0;
+                let slides_view;
+
+                try {
+                    item.querySelectorAll('[data-tabs-slide]').forEach((slide, index, arr) => {
+                        loop += slide.clientWidth;
+    
+                        slide.classList.add('swiper-slide');
+        
+                        if (slide.getAttribute('data-tabs') == hash_split) {
+                            initial_slide = index;
+                        }
+    
+                        if (loop > item.clientWidth) {
+                            slides_view = index;
+                            throw BreakException;
+                        }
+                    });
+                } catch (e) {
+                    if (e !== BreakException) throw e;
+                }
+                
+                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-body 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-body 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;
+                slides_view = Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper'))  : slides_view;
+                item.setAttribute('data-swiper', slides_view);
+                                
+                new Swiper(item.querySelector('.swiper-tabs-container'), {
+                    loop: true,
+                    slidesPerView: slides_view,
+                    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/portal/apps.js b/resources/assets/js/views/portal/apps.js
index 308420c25..547c56aa4 100644
--- a/resources/assets/js/views/portal/apps.js
+++ b/resources/assets/js/views/portal/apps.js
@@ -66,33 +66,6 @@ const app = new Vue({
         if (typeof this.form.password !== 'undefined') {
             this.form.password = '';
         }
-        
-
-        if (document.querySelector('[data-tabs-swiper]').childElementCount > 2) {
-
-            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,
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index bab3e1785..e4afcb3c3 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -21,6 +21,11 @@
     .index-actions {
         @apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
     }
+
+    .suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child {
+        @apply mt-2;
+    }
+
     [data-dropdown-actions] {
         transform: unset !important;
     }
@@ -41,6 +46,19 @@
     .tabs-link:hover::before {
        @apply opacity-100 visible;
     }
+
+    .notifications-menu ul li a {
+        border-bottom: 1px solid;
+    }
+      
+    .avatar-attachment {
+        @apply text-white inline-flex items-center justify-center;
+        background-color: #adb5bd;
+        border-radius: .375rem;
+        font-size: 1rem;
+        height: 45px;
+        width: 45px;
+    }
      /* index */
 }
 
@@ -93,7 +111,7 @@
         background-color: #DCE2F9;
     }
 
-    .menu-list a svg {
+    .menu-list ul svg {
         width: 22px;
         height: 24px;
         fill: none;
@@ -572,6 +590,14 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 }
 /* responsive for role mobile */
 
+/* full-width for mobile. Some component use inline styling for width */
+@media only screen and (max-width: 991px) {
+    .full-width-mobile {
+        width: 100% !important;
+    }
+ }
+ /* full-width for mobile. Some component use inline styling for width */
+
 [dir="ltr"] .ltr\:-right-57 {
     right: -14.5rem;
 }
@@ -592,6 +618,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* plans page accordion */
 
+  /* hidden scroll-bar */
+  .hide-scroll-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hide-scroll-bar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  /* hidden scroll-bar */
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 550px;
diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php
index 104d7879e..87d043913 100644
--- a/resources/views/components/contacts/show/content.blade.php
+++ b/resources/views/components/contacts/show/content.blade.php
@@ -6,7 +6,17 @@
         <x-show.summary.left>
             @if (! $hideAvatar)
             <x-slot name="avatar">
-                {{ $contact->initials }}
+                @if ($contact->logo)
+                    @if (is_object($contact->logo))
+                        <img src="{{ Storage::url($contact->logo->id) }}" class="absolute w-12 h-12 rounded-full mr-2 hidden lg:block" alt="{{ $contact->name }}" title="{{ $contact->name }}">
+                    @else
+                        <img src="{{ asset('public/img/user.svg') }}" class="absolute w-12 h-12 rounded-full mr-2 hidden lg:block" alt="{{ $contact->name }}"/>
+                    @endif
+
+                    {{ $contact->initials }}
+                @else
+                    {{ $contact->initials }}
+                @endif
             </x-slot>
             @endif
 
@@ -150,7 +160,7 @@
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
-
+                    
                     @stack('transactions_nav_end')
                 </x-slot>
 
diff --git a/resources/views/components/delete-button.blade.php b/resources/views/components/delete-button.blade.php
index e7e3333b7..50d161f3b 100644
--- a/resources/views/components/delete-button.blade.php
+++ b/resources/views/components/delete-button.blade.php
@@ -1,10 +1,26 @@
-<x-button
+@mobile
+<button
+    type="button"
+    class="rw-full flex items-center text-red sm:text-purple px-2 h-9 leading-9"
+    @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+    override="class"
+    {{ $attributes }}
+>
+
+    @if ($slot->isNotEmpty())
+        {!! $slot !!}
+    @else
+        <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{!! $label !!}</span>
+    @endif
+@else
+<button
     type="button"
     class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
     @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
     override="class"
     {{ $attributes }}
 >
+
     @if ($slot->isNotEmpty())
         {!! $slot !!}
     @else
@@ -14,6 +30,7 @@
             <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
         </div>
     @endif
+@endmobile
 
     <x-form.input.hidden
         name="delete-{{ $modelTable }}-{{ $id }}"
@@ -25,4 +42,4 @@
         data-cancel="{!! $cancelText !!}"
         data-delete="{!! $deleteText !!}"
     />
-</x-button>
+</button>
diff --git a/resources/views/components/documents/show/template.blade.php b/resources/views/components/documents/show/template.blade.php
index dddf6c1e5..cfb0e17ba 100644
--- a/resources/views/components/documents/show/template.blade.php
+++ b/resources/views/components/documents/show/template.blade.php
@@ -1,4 +1,4 @@
-<div class="p-7 shadow-2xl rounded-2xl">
+<div class="p-3 sm:p-7 shadow-2xl rounded-2xl">
     @switch($documentTemplate)
         @case('classic')
             <x-documents.template.classic
diff --git a/resources/views/components/documents/template/classic.blade.php b/resources/views/components/documents/template/classic.blade.php
index 8db235238..a9ea76999 100644
--- a/resources/views/components/documents/template/classic.blade.php
+++ b/resources/views/components/documents/template/classic.blade.php
@@ -81,8 +81,8 @@
 
     <div class="row mt-2">
         <div class="col-33">
-            <div class="invoice-classic-line mb-1 mt-4" style="background-color:{{ $backgroundColor }};"></div>
-            <div class="invoice-classic-line" style="background-color:{{ $backgroundColor }};"></div>
+            <div class="invoice-classic-line mb-1 mt-4" style="background-color:{{ $backgroundColor }}; -webkit-print-color-adjust: exact;"></div>
+            <div class="invoice-classic-line" style="background-color:{{ $backgroundColor }}; -webkit-print-color-adjust: exact;"></div>
         </div>
 
         <div class="col-33">
@@ -106,8 +106,8 @@
         </div>
 
         <div class="col-33">
-            <div class="invoice-classic-line mb-1 mt-4" style="background-color:{{ $backgroundColor }};"></div>
-            <div class="invoice-classic-line" style="background-color:{{ $backgroundColor }};"></div>
+            <div class="invoice-classic-line mb-1 mt-4" style="background-color:{{ $backgroundColor }}; -webkit-print-color-adjust: exact;"></div>
+            <div class="invoice-classic-line" style="background-color:{{ $backgroundColor }}; -webkit-print-color-adjust: exact;"></div>
         </div>
     </div>
 
diff --git a/resources/views/components/layouts/admin/header.blade.php b/resources/views/components/layouts/admin/header.blade.php
index 86f67f256..19aeb37aa 100644
--- a/resources/views/components/layouts/admin/header.blade.php
+++ b/resources/views/components/layouts/admin/header.blade.php
@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <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">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,20 +24,18 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                <x-suggestions />
+            <x-suggestions />
 
-                @stack('header_suggestion_end')
+            @stack('header_suggestion_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/layouts/portal/finish/content.blade.php b/resources/views/components/layouts/portal/finish/content.blade.php
index a3fe90a2c..d7b299d12 100644
--- a/resources/views/components/layouts/portal/finish/content.blade.php
+++ b/resources/views/components/layouts/portal/finish/content.blade.php
@@ -7,7 +7,7 @@
         </div>
 
         <div class="my-10">
-            <x-link href="https://akaunting.com/lp/accounting-software?utm_source=software&utm_medium=invoice_payment&utm_campaign=plg" class="bg-purple text-white px-3 py-1.5 mb-3 sm:mb-0 rounded-xl text-sm font-medium leading-6 hover:bg-purple-700" override="class">
+            <x-link href="https://akaunting.com/accounting-software?utm_source=software&utm_medium=invoice_payment&utm_campaign=plg" class="bg-purple text-white px-3 py-1.5 mb-3 sm:mb-0 rounded-xl text-sm font-medium leading-6 hover:bg-purple-700" override="class">
                 {{ trans('portal.get_started') }}
             </x-link>
         </div>
diff --git a/resources/views/components/layouts/portal/header.blade.php b/resources/views/components/layouts/portal/header.blade.php
index c16665f54..13be37276 100644
--- a/resources/views/components/layouts/portal/header.blade.php
+++ b/resources/views/components/layouts/portal/header.blade.php
@@ -1,11 +1,13 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<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 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">
-                    {!! $title !!}
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
@@ -22,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/layouts/preview/header.blade.php b/resources/views/components/layouts/preview/header.blade.php
index a771c3136..13be37276 100644
--- a/resources/views/components/layouts/preview/header.blade.php
+++ b/resources/views/components/layouts/preview/header.blade.php
@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<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 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">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/layouts/signed/header.blade.php b/resources/views/components/layouts/signed/header.blade.php
index a771c3136..478d6a956 100644
--- a/resources/views/components/layouts/signed/header.blade.php
+++ b/resources/views/components/layouts/signed/header.blade.php
@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<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 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">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/media/file.blade.php b/resources/views/components/media/file.blade.php
index a6d9ddbde..1b66e36c9 100644
--- a/resources/views/components/media/file.blade.php
+++ b/resources/views/components/media/file.blade.php
@@ -1,37 +1,43 @@
-<div class="flex items-center justify-between border-b py-4">
-    <div class="flex items-center">
-        @if ($file->aggregate_type == 'image')
-            <span class="material-icons text-base">image</span>
-        @else
-            <span class="material-icons text-base">attach_file</span>
-        @endif  
-
-        <div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
-            <span class="w-64 text-sm truncate">
-                {{ $file->basename }}
-            </span>
-
-            <span class="text-xs mb-0">
-                {{ $file->readableSize() }}
-            </span>
-        </div>
-    </div>  
-
-    <div class="flex flex-row lg:flex-col gap-x-1">
-        @can('delete-common-uploads')
-            <x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
-                <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
-            </x-link>
-
-            @if ($options)
-                <input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
-                <input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
-                <input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
+<div class="divide-y">
+    <div class="flex items-center justify-between py-4 -mb-4">
+        <div class="flex items-center">
+            @if ($file->aggregate_type == 'image')
+                <div class="avatar-attachment">
+                    <img src="{{ route('uploads.get', $file->id) }}" alt="{{ $file->basename }}" class="avatar-img h-full rounded object-cover">
+                </div>
+            @else
+                <div class="avatar-attachment">
+                    <span class="material-icons text-base">attach_file</span>
+                </div>
             @endif  
-        @endcan
 
-        <x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
-            <span class="material-icons text-base text-purple px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
-        </x-link>
+            <div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
+                <span class="w-64 text-sm truncate">
+                    {{ $file->basename }}
+                </span>
+
+                <span class="text-xs mb-0">
+                    {{ $file->readableSize() }}
+                </span>
+            </div>
+        </div>  
+
+        <div class="flex flex-row lg:flex-col gap-x-1">
+            @can('delete-common-uploads')
+                <x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
+                    <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                </x-link>
+
+                @if ($options)
+                    <input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
+                    <input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
+                    <input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
+                @endif  
+            @endcan
+
+            <x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
+                <span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
+            </x-link>
+        </div>
     </div>
 </div>
diff --git a/resources/views/components/suggestions.blade.php b/resources/views/components/suggestions.blade.php
index f640ce8ed..4ab701889 100644
--- a/resources/views/components/suggestions.blade.php
+++ b/resources/views/components/suggestions.blade.php
@@ -8,4 +8,4 @@
     >
         {{ $suggestion->name }}
     </x-link>
-@endforeach
+@endforeach
\ No newline at end of file
diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
new file mode 100644
index 000000000..186103d6d
--- /dev/null
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -0,0 +1,150 @@
+@php
+    $count_buttons = 1;
+    $more_actions = [];
+@endphp
+
+<div
+    data-mobile-actions
+    class="absolute w-6 h-6 flex items-center justify-center ltr:right-0 rtl:left-0 -top-3 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
+>
+    <span class="material-icons-outlined text-lg">
+        more_horiz
+    </span>
+</div>
+
+<div
+    data-mobile-actions-modal
+    class="modal w-full h-full fixed flex top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 opacity-0 invisible modal-background transition-opacity"
+>
+    <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
+        <div class="p-2 bg-body rounded-lg">
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                @endif
+
+                @if ($count_buttons > 3 && $loop->count > 4)
+                    @break
+                @endif
+
+                @php
+                    $type = ! empty($action['type']) ? $action['type'] : 'link';
+                @endphp
+
+                @switch($type)
+                    @case('button')
+                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
+                                {{ $action['title'] }}
+                            </div>
+                        </button>
+                        @break
+
+                    @case('delete')
+                        @php
+                            $title = $action['title'] ?? null;
+                            $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                            $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                        @endphp
+
+                        <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                        @break
+
+                    @default
+                        <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
+                                {{ $action['title'] }}
+                            </div>
+                        </a>
+                @endswitch
+
+                @php
+                    array_shift($actions);
+
+                    $count_buttons++;
+                @endphp
+
+                @if (! empty($action['permission']))
+                    @endcan
+                @endif
+            @endforeach
+
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                    @php $more_actions[] = $action; @endphp
+                    @endcan
+                @else
+                    @php $more_actions[] = $action; @endphp
+                @endif
+            @endforeach
+
+            @if ($more_actions)
+                @php $divider = false; @endphp
+
+                @foreach ($more_actions as $action)
+                    @php
+                        $type = ! empty($action['type']) ? $action['type'] : 'link';
+                    @endphp
+
+                    @switch($type)
+                        @case('button')
+                            @php $divider = false; @endphp
+
+                            <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
+                                    {{ $action['title'] }}
+                                </div>
+                            </button>
+                            @break
+
+                        @case('delete')
+                            @php $divider = false; @endphp
+
+                            @php
+                                $title = $action['title'] ?? null;
+                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                            @endphp
+                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                            @break
+
+                        @case('divider')
+                            @if (! $divider)
+                                @php $divider = true; @endphp
+                                <div class="py-2 px-2">
+                                    <div class="w-full border-t border-gray-200"></div>
+                                </div>
+                            @endif
+                            @break
+
+                        @default
+                            @php $divider = false; @endphp
+
+                            <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
+                                    {{ $action['title'] }}
+                                </div>
+                            </a>
+                    @endswitch
+                @endforeach
+            @endif
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/table/actions.blade.php b/resources/views/components/table/actions.blade.php
index 8ce6cd0cf..639303fc4 100644
--- a/resources/views/components/table/actions.blade.php
+++ b/resources/views/components/table/actions.blade.php
@@ -3,132 +3,136 @@
     $more_actions = [];
 @endphp
 
-<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
-    @foreach ($actions as $action)
-        @if (! empty($action['permission']))
-            @can($action['permission'])
-        @endif
+@mobile
+    <x-table.actions-mobile :actions="$actions" :model="$model" />
+@else
+    <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
+        @foreach ($actions as $action)
+            @if (! empty($action['permission']))
+                @can($action['permission'])
+            @endif
 
-        @if ($count_buttons > 3 && $loop->count > 4)
-            @break
-        @endif
-
-        @php
-            $type = ! empty($action['type']) ? $action['type'] : 'link';
-        @endphp
-
-        @switch($type)
-            @case('button')
-                <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
-                    <span class="material-icons-outlined text-purple text-lg pointer-events-none">
-                        {{ $action['icon'] }}
-                    </span>
-
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-                        <span>{{ $action['title'] }}</span>
-                        <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-                    </div>
-                </button>
+            @if ($count_buttons > 3 && $loop->count > 4)
                 @break
+            @endif
 
-            @case('delete')
-                @php
-                    $title = $action['title'] ?? null;
-                    $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                    $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
-                @endphp
+            @php
+                $type = ! empty($action['type']) ? $action['type'] : 'link';
+            @endphp
 
-                <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                @break
+            @switch($type)
+                @case('button')
+                    <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
+                        <span class="material-icons-outlined text-purple text-lg pointer-events-none">
+                            {{ $action['icon'] }}
+                        </span>
 
-            @default
-                <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
-                    <span class="material-icons-outlined text-purple text-lg pointer-events-none">
-                        {{ $action['icon'] }}
-                    </span>
+                        <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+                            <span>{{ $action['title'] }}</span>
+                            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+                        </div>
+                    </button>
+                    @break
 
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-                        <span>{{ $action['title'] }}</span>
-                        <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-                    </div>
-                </a>
-        @endswitch
-
-        @php
-            array_shift($actions);
-
-            $count_buttons++;
-        @endphp
-
-        @if (! empty($action['permission']))
-            @endcan
-        @endif
-    @endforeach
-
-    @foreach ($actions as $action)
-        @if (! empty($action['permission']))
-            @can($action['permission'])
-            @php $more_actions[] = $action; @endphp
-            @endcan
-        @else
-            @php $more_actions[] = $action; @endphp
-        @endif
-    @endforeach
-
-    @if ($more_actions)
-        @php $divider = false; @endphp
-
-        <div class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions">
-            <button type="button" data-dropdown-toggle="dropdown-actions-{{ $loop->index }}" data-dropdown-placement="left" class="material-icons-outlined text-purple text-lg">more_horiz</button>
-
-            <div id="dropdown-actions-{{ $loop->index }}" data-dropdown-actions class="absolute py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 hidden !mt-[50px]" style="left:auto; min-width:10rem;">    
-                @foreach ($more_actions as $action)
+                @case('delete')
                     @php
-                        $type = ! empty($action['type']) ? $action['type'] : 'link';
+                        $title = $action['title'] ?? null;
+                        $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                        $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
                     @endphp
 
-                    @switch($type)
-                        @case('button')
-                            @php $divider = false; @endphp
+                    <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                    @break
 
-                            <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
-                                <button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </button>
-                            </div>
-                            @break
+                @default
+                    <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
+                        <span class="material-icons-outlined text-purple text-lg pointer-events-none">
+                            {{ $action['icon'] }}
+                        </span>
 
-                        @case('delete')
-                            @php $divider = false; @endphp
+                        <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+                            <span>{{ $action['title'] }}</span>
+                            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+                        </div>
+                    </a>
+            @endswitch
 
-                            @php
-                                $title = $action['title'] ?? null;
-                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
-                            @endphp
-                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                            @break
+            @php
+                array_shift($actions);
 
-                        @case('divider')
-                            @if (! $divider)
-                                @php $divider = true; @endphp
-                                <div class="py-2 px-2">
-                                    <div class="w-full border-t border-gray-200"></div>
+                $count_buttons++;
+            @endphp
+
+            @if (! empty($action['permission']))
+                @endcan
+            @endif
+        @endforeach
+
+        @foreach ($actions as $action)
+            @if (! empty($action['permission']))
+                @can($action['permission'])
+                @php $more_actions[] = $action; @endphp
+                @endcan
+            @else
+                @php $more_actions[] = $action; @endphp
+            @endif
+        @endforeach
+
+        @if ($more_actions)
+            @php $divider = false; @endphp
+
+            <div class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions">
+                <button type="button" data-dropdown-toggle="dropdown-actions-{{ $loop->index }}" data-dropdown-placement="left" class="material-icons-outlined text-purple text-lg">more_horiz</button>
+
+                <div id="dropdown-actions-{{ $loop->index }}" data-dropdown-actions class="absolute py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 hidden !mt-[50px]" style="left:auto; min-width:10rem;">    
+                    @foreach ($more_actions as $action)
+                        @php
+                            $type = ! empty($action['type']) ? $action['type'] : 'link';
+                        @endphp
+
+                        @switch($type)
+                            @case('button')
+                                @php $divider = false; @endphp
+
+                                <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
+                                    <button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                        {{ $action['title'] }}
+                                    </button>
                                 </div>
-                            @endif
-                            @break
+                                @break
 
-                        @default
-                            @php $divider = false; @endphp
+                            @case('delete')
+                                @php $divider = false; @endphp
 
-                            <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
-                                <a href="{{ $action['url'] }}" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </a>
-                            </div>
-                    @endswitch
-                @endforeach
+                                @php
+                                    $title = $action['title'] ?? null;
+                                    $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                    $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                                @endphp
+                                <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                                @break
+
+                            @case('divider')
+                                @if (! $divider)
+                                    @php $divider = true; @endphp
+                                    <div class="py-2 px-2">
+                                        <div class="w-full border-t border-gray-200"></div>
+                                    </div>
+                                @endif
+                                @break
+
+                            @default
+                                @php $divider = false; @endphp
+
+                                <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
+                                    <a href="{{ $action['url'] }}" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                        {{ $action['title'] }}
+                                    </a>
+                                </div>
+                        @endswitch
+                    @endforeach
+                </div>
             </div>
-        </div>
-    @endif
-</div>
+        @endif
+    </div>
+@endmobile
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index 6e317a89a..aaa39d25f 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -1,8 +1,16 @@
 @props(['active'])
 
-<div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
-    <div>
-        <ul {{ ((! $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 }}>
+@php
+    if (! empty($attributes['slides'])) {
+        $slides = $attributes['slides'];
+    } else {
+        $slides = null;
+    }
+@endphp
+
+<div data-swiper="{{ $slides }}" 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' => 'inline-flex']) : $attributes }}>
             {!! $navs !!}
         </ul>
     </div>
diff --git a/resources/views/components/tabs/nav-link.blade.php b/resources/views/components/tabs/nav-link.blade.php
index 4e363be7f..7452a7400 100644
--- a/resources/views/components/tabs/nav-link.blade.php
+++ b/resources/views/components/tabs/nav-link.blade.php
@@ -5,6 +5,7 @@
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-bind:class="active != '{{ $id }}' ? 'text-black' : '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'"
     {{ $attributes }}
 >
diff --git a/resources/views/components/tabs/nav.blade.php b/resources/views/components/tabs/nav.blade.php
index 47743f05f..4c5ec9d3d 100644
--- a/resources/views/components/tabs/nav.blade.php
+++ b/resources/views/components/tabs/nav.blade.php
@@ -5,6 +5,7 @@
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-on:click="active = '{{ $id }}'"
     x-bind:class="active != '{{ $id }}' ? 'text-black' : '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'"
     {{ $attributes }}
diff --git a/resources/views/components/title.blade.php b/resources/views/components/title.blade.php
index 13d910f79..14eb6cf45 100644
--- a/resources/views/components/title.blade.php
+++ b/resources/views/components/title.blade.php
@@ -4,12 +4,8 @@
     $slot_is_string = strval(strlen($slot));
 @endphp
 
-@if ($slot_is_string >= $textSize && ! $slot_isHtml)
-    <x-tooltip id="page-title" placement="bottom" message="{!! $slot !!}">
-        <div class="truncate" style="width: 22rem;">
-            {!! $slot !!}
-        </div>
-    </x-tooltip>
-@else 
-    {!! $slot !!}
-@endif
\ No newline at end of file
+<div>
+    <div data-title-truncate>
+        {!! $slot !!}
+    </div>
+</div>
diff --git a/resources/views/components/transactions/show/template.blade.php b/resources/views/components/transactions/show/template.blade.php
index 61c623878..72a6dd215 100644
--- a/resources/views/components/transactions/show/template.blade.php
+++ b/resources/views/components/transactions/show/template.blade.php
@@ -1,4 +1,4 @@
-<div class="p-7 shadow-2xl rounded-2xl">
+<div class="p-3 sm:p-7 shadow-2xl rounded-2xl">
     @switch($transactionTemplate)
         @case('classic')
             @break
diff --git a/resources/views/components/transfers/show/content.blade.php b/resources/views/components/transfers/show/content.blade.php
index 5db189ec4..6d7529531 100644
--- a/resources/views/components/transfers/show/content.blade.php
+++ b/resources/views/components/transfers/show/content.blade.php
@@ -8,7 +8,7 @@
     </div>
 
     <div class="w-full lg:w-7/12">
-        <div class="p-7 shadow-2xl rounded-2xl">
+        <div class="p-3 sm:p-7 shadow-2xl rounded-2xl">
             <x-transfers.show.template :model="$transfer" />
         </div>
     </div>
diff --git a/resources/views/livewire/menu/favorite.blade.php b/resources/views/livewire/menu/favorite.blade.php
index 3df621411..7a02147ea 100644
--- a/resources/views/livewire/menu/favorite.blade.php
+++ b/resources/views/livewire/menu/favorite.blade.php
@@ -3,7 +3,7 @@
         <span
             id="{{ $favorited ? 'remove-from-favorite' : 'add-to-favorite' }}"
             @class([
-                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-2 cursor-pointer',
+                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-4 cursor-pointer',
                 'material-icons-outlined transform transition-all hover:scale-125' => ($favorited) ? false : true,
                 'material-icons' => (! $favorited) ? false : true,
             ])
diff --git a/resources/views/portal/invoices/index.blade.php b/resources/views/portal/invoices/index.blade.php
index 4e179cd19..2193520c0 100644
--- a/resources/views/portal/invoices/index.blade.php
+++ b/resources/views/portal/invoices/index.blade.php
@@ -159,7 +159,7 @@
 
                     <div class="my-10">
                         <x-link
-                            href="https://akaunting.com/lp/accounting-software?utm_source=software&utm_medium=invoice_index&utm_campaign=plg"
+                            href="https://akaunting.com/accounting-software?utm_source=software&utm_medium=invoice_index&utm_campaign=plg"
                             class="bg-purple text-white px-3 py-1.5 mb-3 sm:mb-0 rounded-xl text-sm font-medium leading-6 hover:bg-purple-700"
                             override="class"
                         >
diff --git a/resources/views/portal/invoices/preview.blade.php b/resources/views/portal/invoices/preview.blade.php
index 86c14a20b..c65867582 100644
--- a/resources/views/portal/invoices/preview.blade.php
+++ b/resources/views/portal/invoices/preview.blade.php
@@ -28,23 +28,35 @@
                             @php $is_active = true; @endphp
 
                             <x-slot name="navs">
-                                <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>
-                                                        {{ $name }}
-                                                    </div>
-                                                </x-tabs.nav>
-                                            </div>
-                                        @stack('invoice_{{ $key }}_tab_end')
+                                <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')
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </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>
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index 33736c241..bb1ae6fe6 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -26,23 +26,35 @@
                             @php $is_active = true; @endphp
 
                             <x-slot name="navs">
-                                <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')
+                                <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')
 
-                                        @php $is_active = false; @endphp
-                                    @endforeach
+                                            @php $is_active = false; @endphp
+                                        @endforeach
+                                    </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>
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index c3e00e454..86bed3ae3 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -35,23 +35,35 @@
                                 @php $is_active = true; @endphp
 
                                 <x-slot name="navs">
-                                    <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>
-                                                            {{ $name }}
-                                                        </div>
-                                                    </x-tabs.nav>
-                                                </div>
-                                            @stack('invoice_{{ $key }}_tab_end')
+                                    <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')
 
-                                            @php $is_active = false; @endphp
-                                        @endforeach
+                                                @php $is_active = false; @endphp
+                                            @endforeach
+                                        </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>
diff --git a/resources/views/portal/payments/index.blade.php b/resources/views/portal/payments/index.blade.php
index 4671b7f02..6fe1a73ed 100644
--- a/resources/views/portal/payments/index.blade.php
+++ b/resources/views/portal/payments/index.blade.php
@@ -67,7 +67,7 @@
 
                     <div class="my-10">
                         <x-link
-                            href="https://akaunting.com/lp/accounting-software?utm_source=software&utm_medium=payment_index&utm_campaign=plg"
+                            href="https://akaunting.com/accounting-software?utm_source=software&utm_medium=payment_index&utm_campaign=plg"
                             class="bg-purple text-white px-3 py-1.5 mb-3 sm:mb-0 rounded-xl text-sm font-medium leading-6 hover:bg-purple-700"
                             override="class"
                         >
diff --git a/resources/views/purchases/vendors/show.blade.php b/resources/views/purchases/vendors/show.blade.php
index 23f5546c7..c1aa93a5b 100644
--- a/resources/views/purchases/vendors/show.blade.php
+++ b/resources/views/purchases/vendors/show.blade.php
@@ -24,7 +24,7 @@
     </x-slot>
 
     <x-slot name="content">
-        <x-contacts.show.content type="vendor" :model="$vendor" />
+        <x-contacts.show.content type="vendor" :model="$vendor" hide-user />
     </x-slot>
 
     <x-contacts.script type="vendor" />
diff --git a/safelist.txt b/safelist.txt
index af51a9e1a..596669fd3 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -16,8 +16,11 @@ sm:rtl:left-4
 sm:w-500
 sm:min-h-500
 sm:max-w-4xl
+sm:space-x-4
+sm:text-purple
 md:grid-cols-2
 lg:mt-2
+lg:mt-4
 lg:pl-24
 lg:my-12
 lg:mt-4