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 07ee38b4c..5fa6b504e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -35773,6 +35773,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 610fd9e42..2a2590f19 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -495,6 +495,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/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/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