diff --git a/app/View/Components/Link.php b/app/View/Components/Link.php
index 58ef80de2..d89551adf 100644
--- a/app/View/Components/Link.php
+++ b/app/View/Components/Link.php
@@ -34,7 +34,7 @@ class Link extends Component
      */
     public function render()
     {
-        return view('components.link');
+        return view('components.link.index');
     }
 
     protected function getOverride($override)
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 0725aa4bc..c5e11312e 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -299,6 +299,7 @@ document.querySelectorAll('[data-link-loading]').forEach((href) => {
 
     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');
diff --git a/public/css/app.css b/public/css/app.css
index 5fa6b504e..38f359f57 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -35773,7 +35773,7 @@ html[dir='rtl'] .el-input__suffix {
     text-overflow: unset;
 }
 
-.disabled-link{
+.disabled-link {
   pointer-events: none;
   cursor: default;
   opacity: 0.5;
diff --git a/resources/views/components/layouts/modules/show/buttons.blade.php b/resources/views/components/layouts/modules/show/buttons.blade.php
index c8c5ac5a5..4093c0286 100644
--- a/resources/views/components/layouts/modules/show/buttons.blade.php
+++ b/resources/views/components/layouts/modules/show/buttons.blade.php
@@ -1,34 +1,49 @@
 @props(['module', 'installed', 'enable'])
 
 @if (! empty($module->plan))
-    <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>
+    <x-link
+        href="{{ $module->action_url }}"
+        target="_blank"
+        class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+        override="class"
+    >
+        {{ trans('modules.get_premium_cloud') }}
+    </x-link>
 @elseif (in_array('onprime', $module->where_to_use))
     @if ($installed)
         @can('delete-modules-item')
-            <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>    
+            <x-link
+                href="{{ route('apps.app.uninstall', $module->slug) }}"
+                class="relative bg-red rounded-md text-white text-sm text-center w-1/2 py-2 truncate"
+                override="class"
+            >
+                <x-link.loading>
                     {{ trans('modules.button.uninstall') }}
                 </x-link.loading>
-            </a>
+            </x-link>
         @endcan
 
         @can('update-modules-item')
             @if ($enable)
-                <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>    
+                <x-link
+                    href="{{ route('apps.app.disable', $module->slug) }}"
+                    class="bg-orange rounded-md text-white text-sm text-center w-1/2 py-2 truncate"
+                    override="class"
+                >
+                    <x-link.loading>
                         {{ trans('modules.button.disable') }}
                     </x-link.loading>
-                </a>
+                </x-link>
             @else
-                <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>    
+                <x-link
+                    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"
+                    override="class"
+                >
+                    <x-link.loading>
                         {{ trans('modules.button.enable') }}
                     </x-link.loading>
-                </a>
+                </x-link>
             @endif
         @endcan
     @else
@@ -53,26 +68,35 @@
                     </button>
                 @endif
             @else
-                <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>
+                <x-link
+                    href="{{ $module->action_url }}"
+                    target="_blank"
+                    class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+                    override="class"
+                >
+                    {{ trans('modules.use_app') }}
+                </x-link>
             @endif
         @endcan
     @endif
 @else
     @if ($module->install)
-        <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>
+        <x-link
+            href="{{ $module->action_url }}"
+            target="_blank"
+            class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+            override="class"
+        >
+            {{ trans('modules.install_cloud') }}
+        </x-link>
     @else
-        <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>
+        <x-link
+            href="{{ $module->action_url }}"
+            target="_blank"
+            class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+            override="class"
+        >
+            {{ trans('modules.get_cloud') }}
+        </x-link>
     @endif
 @endif
diff --git a/resources/views/components/link.blade.php b/resources/views/components/link/index.blade.php
similarity index 98%
rename from resources/views/components/link.blade.php
rename to resources/views/components/link/index.blade.php
index e1d319005..ea05a9a5e 100644
--- a/resources/views/components/link.blade.php
+++ b/resources/views/components/link/index.blade.php
@@ -1,4 +1,3 @@
-
 <a class="{{ $class }}" {{ $attributes }}>
     {{ $slot }}
 </a>
diff --git a/resources/views/components/link/loading.blade.php b/resources/views/components/link/loading.blade.php
index 06b698485..96e28a845 100644
--- a/resources/views/components/link/loading.blade.php
+++ b/resources/views/components/link/loading.blade.php
@@ -8,4 +8,4 @@
     <span data-link-text class="opacity-1">
         {!! $slot !!}
     </span>
-</div>
\ No newline at end of file
+</div>