diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 5a35ce460..3b5dc3b2c 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -290,4 +290,17 @@ function OnInput() {
   this.style.height = 'auto';
   this.style.height = (this.scrollHeight) + 'px';
 }
-//Auto Height for Textarea
\ No newline at end of file
+//Auto Height for Textarea
+
+//Loading scenario for href links
+document.querySelectorAll('[data-link-loading]').forEach((href) => {
+    let target_link_html = href.parentElement;
+
+    target_link_html.addEventListener('click', function () {
+        this.classList.add('disabled-link');
+        this.querySelector('[data-link-spin]').classList.remove('hidden');
+        this.querySelector('[data-link-text]').classList.add('opacity-0');
+        this.querySelector('[data-link-text]').classList.remove('opacity-1');
+    });
+});
+//Loading scenario for href links
\ No newline at end of file
diff --git a/public/css/app.css b/public/css/app.css
index 4f9508943..b5c2cab71 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -35749,6 +35749,12 @@ html[dir='rtl'] .el-input__suffix {
     text-overflow: unset;
 }
 
+.disabled-link{
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.5;
+}
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 450px;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index d73bf8188..78b227a94 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -499,6 +499,10 @@ html[dir='rtl'] .el-input__suffix {
     text-overflow: unset;
 }
 
+.disabled-link {
+    @apply cursor-default pointer-events-none opacity-50;
+}
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 450px;
diff --git a/resources/views/auth/users/index.blade.php b/resources/views/auth/users/index.blade.php
index 8eb001753..dc7b0e3c3 100644
--- a/resources/views/auth/users/index.blade.php
+++ b/resources/views/auth/users/index.blade.php
@@ -50,8 +50,8 @@
                                 <x-table.td class="ltr:pr-6 rtl:pl-6 hidden sm:table-cell" override="class">
                                     @if (user()->id != $item->id)
                                         <x-index.bulkaction.single
-                                            id="{{ $item->id }}" 
-                                            name="{{ $item->name }}" 
+                                            id="{{ $item->id }}"
+                                            name="{{ $item->name }}"
                                             :disabled="($item->hasPendingInvitation() || $item->multiplexed) ? true : false"
                                         />
                                     @else
@@ -59,24 +59,26 @@
                                     @endif
                                 </x-table.td>
 
-                                <x-table.td class="w-4/12 sm:w-5/12 flex items-center">
-                                    @if (setting('default.use_gravatar', '0') == '1')
-                                        <img src="{{ $item->picture }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" title="{{ $item->name }}" alt="{{ $item->name }}">
-                                    @elseif (is_object($item->picture))
-                                        <img src="{{ Storage::url($item->picture->id) }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}" title="{{ $item->name }}">
-                                    @else
-                                        <img src="{{ asset('public/img/user.svg') }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}"/>
-                                    @endif
+                                <x-table.td class="w-4/12 sm:w-5/12">
+                                    <div class="flex items-center space-x-2">
+                                        @if (setting('default.use_gravatar', '0') == '1')
+                                            <img src="{{ $item->picture }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" title="{{ $item->name }}" alt="{{ $item->name }}">
+                                        @elseif (is_object($item->picture))
+                                            <img src="{{ Storage::url($item->picture->id) }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}" title="{{ $item->name }}">
+                                        @else
+                                            <img src="{{ asset('public/img/user.svg') }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}"/>
+                                        @endif
 
-                                    {{ !empty($item->name) ? $item->name : trans('general.na') }}
+                                        {{ !empty($item->name) ? $item->name : trans('general.na') }}
 
-                                    @if ($item->hasPendingInvitation())
-                                        <x-index.status status="pending" background-color="bg-status-danger" text-color="text-black" />
-                                    @endif
+                                        @if ($item->hasPendingInvitation())
+                                            <x-index.status status="pending" background-color="bg-status-danger" text-color="text-black" />
+                                        @endif
 
-                                    @if (! $item->enabled)
-                                        <x-index.disable text="{{ trans_choice('general.users', 1) }}" />
-                                    @endif
+                                        @if (! $item->enabled)
+                                            <x-index.disable text="{{ trans_choice('general.users', 1) }}" />
+                                        @endif
+                                    </div>
                                 </x-table.td>
 
                                 <x-table.td class="w-4/12 hidden sm:table-cell">
diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php
index 529231d6e..d91887bde 100644
--- a/resources/views/components/layouts/admin/scripts.blade.php
+++ b/resources/views/components/layouts/admin/scripts.blade.php
@@ -68,6 +68,16 @@
             toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        function hiddenSidebar() {
+            sideBar.classList.add("menu-list-hidden");
+            toggleButton.classList.add("ltr:left-12", "rtl:right-12");
+        }
+
+        function unHiddenSidebar() {
+            toggleButton.classList.remove("ltr:left-12", "rtl:right-12");
+            sideBar.classList.remove("menu-list-hidden");
+        }
+
         //if there are notifications, remove count badge
         function notificationCount(action) {
             let notification_count = document.querySelector('[data-notification-count]');
@@ -83,15 +93,13 @@
                 mobileMenuHidden();
             } else {
                 if (sideBar.classList.contains("menu-list-hidden")) {
-                    toggleButton.classList.remove("ltr:left-12", "rtl:right-12");
-                    sideBar.classList.remove("menu-list-hidden");
+                    unHiddenSidebar();
 
                     if (document.body.clientWidth > "991") {
                         contentTransitionRight();
                     }
                 } else {
-                    sideBar.classList.add("menu-list-hidden");
-                    toggleButton.classList.add("ltr:left-12", "rtl:right-12");
+                    hiddenSidebar();
 
                     if (document.body.clientWidth > "991") {
                         contentTransitionLeft();
@@ -142,6 +150,9 @@
                     mainContent.classList.add("hidden");
                     toggleButton.classList.add("invisible");
                     menuClose.classList.remove("hidden");
+                    
+                    unHiddenSidebar();
+                    contentTransitionRight();
 
                     notificationCount("none");
 
diff --git a/resources/views/components/layouts/modules.blade.php b/resources/views/components/layouts/modules.blade.php
index 6aef81c94..ac228b1d2 100644
--- a/resources/views/components/layouts/modules.blade.php
+++ b/resources/views/components/layouts/modules.blade.php
@@ -16,6 +16,8 @@
 
         <x-layouts.admin.menu />
 
+        <x-loading.content />
+
         <div class="main-content xl:ltr:ml-64  xl:rtl:mr-64 transition-all ease-in-out" id="panel">
             <div id="main-body">
                 <div class="container">
diff --git a/resources/views/components/layouts/modules/show/buttons.blade.php b/resources/views/components/layouts/modules/show/buttons.blade.php
index 12c1c69f7..c8c5ac5a5 100644
--- a/resources/views/components/layouts/modules/show/buttons.blade.php
+++ b/resources/views/components/layouts/modules/show/buttons.blade.php
@@ -1,25 +1,33 @@
 @props(['module', 'installed', 'enable'])
 
 @if (! empty($module->plan))
-    <a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
-        {{ trans('modules.get_premium_cloud') }}
+    <a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
+        <x-link.loading>    
+            {{ trans('modules.get_premium_cloud') }}
+        </x-link.loading>
     </a>
 @elseif (in_array('onprime', $module->where_to_use))
     @if ($installed)
         @can('delete-modules-item')
-            <a href="{{ route('apps.app.uninstall', $module->slug) }}" class="bg-red text-white rounded-md text-sm text-center w-1/2 py-2 truncate">
-                {{ trans('modules.button.uninstall') }}
+            <a href="{{ route('apps.app.uninstall', $module->slug) }}" class="relative bg-red text-white rounded-md text-sm text-center w-1/2 py-2 truncate">
+                <x-link.loading>    
+                    {{ trans('modules.button.uninstall') }}
+                </x-link.loading>
             </a>
         @endcan
 
         @can('update-modules-item')
             @if ($enable)
-                <a href="{{ route('apps.app.disable', $module->slug) }}" class="bg-orange rounded-md text-white  w-1/2 text-center text-sm py-2 truncate">
-                    {{ trans('modules.button.disable') }}
+                <a href="{{ route('apps.app.disable', $module->slug) }}" class="relative bg-orange rounded-md text-white  w-1/2 text-center text-sm py-2 truncate">
+                    <x-link.loading>    
+                        {{ trans('modules.button.disable') }}
+                    </x-link.loading>
                 </a>
             @else
-                <a href="{{ route('apps.app.enable', $module->slug) }}" class="bg-green rounded-md text-white text-sm text-center w-1/2  py-2 truncate">
-                    {{ trans('modules.button.enable') }}
+                <a href="{{ route('apps.app.enable', $module->slug) }}" class="relative bg-green rounded-md text-white text-sm text-center w-1/2  py-2 truncate">
+                    <x-link.loading>    
+                        {{ trans('modules.button.enable') }}
+                    </x-link.loading>
                 </a>
             @endif
         @endcan
@@ -35,27 +43,36 @@
                 @else
                     <button type="button"
                         @click="onInstall('{{ $module->action_url }}', '{{ $module->slug }}', '{!! str_replace("'", "\'", $module->name) !!}', '{{ $module->version }}')"
-                        class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+                        class="bg-green hover:bg-green-700 disabled:bg-green-100 rounded-md text-white text-sm text-center w-full py-2 truncate"
                         id="install-module"
+                        :disabled="installation.show"
                     >
-                        {{ trans('modules.install') }}
+                        <x-button.loading action="installation.show">
+                            {{ trans('modules.install') }}
+                        </x-button.loading>
                     </button>
                 @endif
             @else
-                <a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
-                    {{ trans('modules.use_app') }}
+                <a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
+                    <x-link.loading>    
+                        {{ trans('modules.use_app') }}
+                    </x-link.loading>
                 </a>
             @endif
         @endcan
     @endif
 @else
     @if ($module->install)
-        <a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
-            {{ trans('modules.install_cloud') }}
+        <a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
+            <x-link.loading>
+                {{ trans('modules.install_cloud') }}
+            </x-link.loading>
         </a>
     @else
-        <a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
-            {{ trans('modules.get_cloud') }}
+        <a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
+            <x-link.loading>    
+                {{ trans('modules.get_cloud') }}
+            </x-link.loading>
         </a>
     @endif
 @endif
diff --git a/resources/views/components/layouts/modules/show/information.blade.php b/resources/views/components/layouts/modules/show/information.blade.php
index 4a7bfdc34..a917d1535 100644
--- a/resources/views/components/layouts/modules/show/information.blade.php
+++ b/resources/views/components/layouts/modules/show/information.blade.php
@@ -6,7 +6,7 @@
             {!! trans('modules.only_premium_plan') !!}
         </span>
     </div>
-@if (in_array('onprime', $module->where_to_use))
+@elseif (in_array('onprime', $module->where_to_use))
     <div x-show="price_type == true" class="text-center text-sm mt-3 mb--2">
         <span style="height: 21px;display: block;"></span>
     </div>
diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php
index d41a557b2..3a9f46a9e 100644
--- a/resources/views/components/layouts/portal/scripts.blade.php
+++ b/resources/views/components/layouts/portal/scripts.blade.php
@@ -64,21 +64,29 @@
             toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        function hiddenSidebar() {
+            sideBar.classList.add("menu-list-hidden");
+            toggleButton.classList.add("ltr:left-12", "rtl:right-12");
+        }
+
+        function unHiddenSidebar() {
+            toggleButton.classList.remove("ltr:left-12", "rtl:right-12");
+            sideBar.classList.remove("menu-list-hidden");
+        }
+
         //slide menu actions together responsive version
         function slideMenu() {
             if (document.body.clientWidth <= 1280) {
                 mobileMenuHidden();
             } else {
                 if (sideBar.classList.contains("menu-list-hidden")) {
-                    toggleButton.classList.remove("ltr:left-12", "rtl:right-12");
-                    sideBar.classList.remove("menu-list-hidden");
+                    unHiddenSidebar();
 
                     if (document.body.clientWidth > "991") {
                         contentTransitionRight();
                     }
                 } else {
-                    sideBar.classList.add("menu-list-hidden");
-                    toggleButton.classList.add("ltr:left-12", "rtl:right-12");
+                    hiddenSidebar();
 
                     if (document.body.clientWidth > "991") {
                         contentTransitionLeft();
@@ -129,6 +137,8 @@
                     mainContent.classList.add("hidden");
                     toggleButton.classList.add("invisible");
                     menuClose.classList.remove("hidden");
+                    unHiddenSidebar();
+                    contentTransitionRight();
 
                 //remove active (cancel text) class form target icon
                 } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") {
diff --git a/resources/views/components/link/loading.blade.php b/resources/views/components/link/loading.blade.php
new file mode 100644
index 000000000..06b698485
--- /dev/null
+++ b/resources/views/components/link/loading.blade.php
@@ -0,0 +1,11 @@
+<div data-link-loading>
+    <i
+        data-link-spin
+        class="hidden animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
+    >
+    </i>
+
+    <span data-link-text class="opacity-1">
+        {!! $slot !!}
+    </span>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/menu/notifications.blade.php b/resources/views/livewire/menu/notifications.blade.php
index 57af525d6..9759d9b73 100644
--- a/resources/views/livewire/menu/notifications.blade.php
+++ b/resources/views/livewire/menu/notifications.blade.php
@@ -11,7 +11,7 @@
         <div class="flex justify-end mt-1 mb-3">
             <x-tooltip id="notification-all" placement="top" message="{{ trans('notifications.mark_read_all') }}">
                 <button type="button" wire:click="markReadAll()">
-                    <span id="menu-notification-read-all" class="material-icons text-lg text-purple">done_all</span>
+                    <span id="menu-notification-read-all" class="material-icons text-lg text-purple hover:scale-125">done_all</span>
                 </button>
             </x-tooltip>
         </div>
@@ -35,7 +35,7 @@
                         @if ($notification->type != 'updates')
                             <x-tooltip id="notification-{{ $notification->id }}" placement="top" message="{{ trans('notifications.mark_read') }}">
                                 <button type="button" wire:click="markRead('{{ $notification->type }}', '{{ $notification->id }}')">
-                                    <span id="menu-notification-mark-read" class="material-icons text-lg text-purple">check_circle_outline</span>
+                                    <span id="menu-notification-mark-read" class="material-icons text-lg text-purple hover:scale-125">check_circle_outline</span>
                                 </button>
                             </x-tooltip>
                         @endif