diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index c6b29a79a..7784ca600 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -246,10 +246,10 @@ function runTooltip(tooltipToggleEl) {
 
     function show() {
         // Make the tooltip visible
-                tooltipEl.classList.remove("opacity-0");
-                tooltipEl.classList.add("opacity-100");
-                tooltipEl.classList.remove("invisible");
-                tooltipEl.classList.add("visible"); 
+        tooltipEl.classList.remove("opacity-0");
+        tooltipEl.classList.add("opacity-100");
+        tooltipEl.classList.remove("invisible");
+        tooltipEl.classList.add("visible"); 
          // Enable the event listeners
 
         popperInstance.setOptions((options) => ({
@@ -267,11 +267,11 @@ function runTooltip(tooltipToggleEl) {
     }
 
     function hide() {
+        tooltipEl.classList.remove("opacity-100");
+        tooltipEl.classList.add("opacity-0");
+        tooltipEl.classList.remove("visible");
+        tooltipEl.classList.add("invisible");
         // Hide the tooltip
-            tooltipEl.classList.remove("opacity-100");
-            tooltipEl.classList.add("opacity-0");
-            tooltipEl.classList.remove("visible");
-            tooltipEl.classList.add("invisible");
         // Disable the event listeners
 
         popperInstance.setOptions((options) => ({
diff --git a/public/css/app.css b/public/css/app.css
index 9d098a3be..10c97872c 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -57885,5 +57885,12 @@ body{
   .\32xl\:w-8{
     width: 2rem;
   }
+
+  .\32xl\:flex-row{
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
 }
 
diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue
index 7ba705ff1..fa2833500 100644
--- a/resources/assets/js/components/AkauntingSearch.vue
+++ b/resources/assets/js/components/AkauntingSearch.vue
@@ -645,12 +645,14 @@ export default {
         },
 
         closeIfClickedOutside(event) {
-            if (!document.getElementById('search-field-' + this._uid).contains(event.target) && event.target.getAttribute('data-btn') != 'btn btn-link') {
-                this.visible.options = false;
-                this.visible.operator = false;
-                this.visible.values = false;
+            if (document.getElementById('search-field-' + this._uid)) {
+                if (!document.getElementById('search-field-' + this._uid).contains(event.target) && event.target.getAttribute('data-btn') != 'btn btn-link') {
+                    this.visible.options = false;
+                    this.visible.operator = false;
+                    this.visible.values = false;
 
-                document.removeEventListener('click', this.closeIfClickedOutside);
+                    document.removeEventListener('click', this.closeIfClickedOutside);
+                }
             }
         },
     },
diff --git a/resources/assets/js/views/portal/apps.js b/resources/assets/js/views/portal/apps.js
index 547c56aa4..1cb97f284 100644
--- a/resources/assets/js/views/portal/apps.js
+++ b/resources/assets/js/views/portal/apps.js
@@ -147,6 +147,10 @@ const app = new Vue({
                           resolve({
                             template: '<div>' + response.data.html + '</div>',
 
+                            mixins: [
+                                Global
+                            ],
+
                             components: {
                                 CardForm
                             },
@@ -238,6 +242,10 @@ const app = new Vue({
                           resolve({
                             template: '<div>' + response.data.html + '</div>',
 
+                            mixins: [
+                                Global
+                            ],
+
                             components: {
                                 CardForm
                             },
diff --git a/resources/views/components/layouts/modules/show/buttons.blade.php b/resources/views/components/layouts/modules/show/buttons.blade.php
index 436dabc66..1efee00b4 100644
--- a/resources/views/components/layouts/modules/show/buttons.blade.php
+++ b/resources/views/components/layouts/modules/show/buttons.blade.php
@@ -1,6 +1,6 @@
 @props(['module', 'installed', 'enable'])
 
-<div x-show="price_type == 'monthly'" class="w-full">
+<div x-show="price_type == 'monthly'" class="w-full flex space-x-6">
     <x-tooltip message="{{ trans('modules.hosted_on_akaunting') }}" placement="top" width="w-full">
         <x-link
             href="{{ $module->action_url }}"
@@ -13,7 +13,7 @@
     </x-tooltip>
 </div>
 
-<div x-show="price_type == 'yearly'" class="w-full">
+<div x-show="price_type == 'yearly'" class="w-full flex space-x-6">
     @if (in_array('onprime', $module->where_to_use) || $module->isPurchase)
         @if ($installed)
             @can('delete-modules-item')
@@ -98,7 +98,7 @@
     @endif
 </div>
 
-<div x-show="price_type == 'lifetime'" class="w-full">
+<div x-show="price_type == 'lifetime'" class="w-full flex space-x-6">
     @if (empty($module->plan))
         @if ($installed)
             @can('delete-modules-item')
diff --git a/resources/views/components/layouts/modules/show/price.blade.php b/resources/views/components/layouts/modules/show/price.blade.php
index 100d2164d..95589660d 100644
--- a/resources/views/components/layouts/modules/show/price.blade.php
+++ b/resources/views/components/layouts/modules/show/price.blade.php
@@ -1,7 +1,7 @@
 @props(['module'])
 
 @if ($module->price != '0.0000')
-    <div class="flex gap-2 items-baseline cursor-default">
+    <div class="flex flex-col 2xl:flex-row gap-2 items-baseline cursor-default">
         {!! $module->price_prefix !!}
 
         <div x-show="price_type == 'monthly'">
diff --git a/resources/views/components/layouts/modules/show/toggle.blade.php b/resources/views/components/layouts/modules/show/toggle.blade.php
index 2b99cd7b4..bb2e06b1d 100644
--- a/resources/views/components/layouts/modules/show/toggle.blade.php
+++ b/resources/views/components/layouts/modules/show/toggle.blade.php
@@ -1,27 +1,27 @@
 <x-form>
-    <div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4">
+    <div>
         <div class="relative" x-model="price_type">
-            <div class="w-58 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
+            <div class="w-58 flex items-center">
                 <button type="button"
                     x-on:click="price_type = 'monthly'"
-                    class="w-18 flex justify-center px-2"
-                    x-bind:class="price_type == 'monthly' ? 'bg-white rounded-lg' : 'btn-outline-primary'"
+                    class="w-18 flex justify-center text-base px-2 py-1 rounded-tl-lg rounded-bl-lg"
+                    x-bind:class="price_type == 'monthly' ? 'bg-black-700 text-white' : 'bg-gray-200 btn-outline-primary'"
                 >
                     {{ trans('general.monthly') }}
                 </button>
 
                 <button type="button"
                     x-on:click="price_type = 'yearly'"
-                    class="w-18 flex justify-center px-2"
-                    x-bind:class="price_type == 'yearly' ? 'bg-white rounded-lg' : 'btn-outline-primary'"
+                    class="w-18 flex justify-center text-base px-2 py-1 border-r border-l border-gray-300"
+                    x-bind:class="price_type == 'yearly' ? 'bg-black-700 text-white' : 'bg-gray-200 btn-outline-primary'"
                 >
                     {{ trans('general.yearly') }}
                 </button>
 
                 <button type="button"
                     x-on:click="price_type = 'lifetime'"
-                    class="w-18 flex justify-center px-2"
-                    x-bind:class="price_type == 'lifetime' ? 'bg-white rounded-lg' : 'btn-outline-primary'"
+                    class="w-18 flex justify-center text-base px-2 py-1 rounded-tr-lg rounded-br-lg "
+                    x-bind:class="price_type == 'lifetime' ? 'bg-black-700 text-white' : 'bg-gray-200 btn-outline-primary'"
                 >
                     {{ trans('general.lifetime') }}
                 </button>
diff --git a/resources/views/modules/item/show.blade.php b/resources/views/modules/item/show.blade.php
index 48ed7cbcd..6a4dac4ab 100644
--- a/resources/views/modules/item/show.blade.php
+++ b/resources/views/modules/item/show.blade.php
@@ -14,6 +14,8 @@
     </x-slot>
 
     <x-slot name="content">
+        <x-loading.content />
+        
         <div class="flex flex-col space-y-16 py-4 cursor-default">
             <div class="flex flex-col lg:flex-row w-full lg:space-x-16 rtl:space-x-reverse space-y-0">
                 <div class="w-full lg:w-7/12 flex flex-col space-x-2 banner">
@@ -54,7 +56,7 @@
                     @endif
                 </div>
 
-                <div class="w-full lg:w-5/12" x-data="{ price_type : 'yearly' }">
+                <div class="relative w-full lg:w-5/12" x-data="{ price_type : 'yearly' }">
                     <div class="flex flex-col space-y-6">
                         <div class="flex flex-col cursor-default">
                             <div class="flex flex-col space-y-4">
@@ -101,10 +103,10 @@
                             {!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!}
                         </div>
 
-                        <div class="relative flex items-center space-x-4 justify-between">
+                        <div class="flex items-center space-x-4 justify-between">
                             <x-layouts.modules.show.price :module="$module" />
 
-                            <div class="flex w-1/2 lg:justify-center">
+                            <div class="flex lg:justify-center">
                                 @if ($module->price != '0.0000')
                                     <x-layouts.modules.show.toggle />
                                 @endif
@@ -114,7 +116,7 @@
                         <x-layouts.modules.show.information :module="$module" />
                     </div>
 
-                    <div class="flex justify-around space-x-12 mt-5">
+                    <div class="flex justify-around mt-5">
                         <x-layouts.modules.show.buttons :module="$module" :installed="$installed" :enable="$enable" />
                     </div>
                 </div>
diff --git a/safelist.txt b/safelist.txt
index 51df5748d..0d57c72b2 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -70,6 +70,7 @@ lg:overflow-x-hidden
 xl:grid-cols-4
 xl:w-8/12
 xl:pt-6
+2xl:flex-row
 ltr:-right-10
 rtl:-left-10
 ltr:rounded-tl-md