diff --git a/resources/views/components/loading/absolute.blade.php b/resources/views/components/loading/absolute.blade.php
index 51d438812..45715f726 100644
--- a/resources/views/components/loading/absolute.blade.php
+++ b/resources/views/components/loading/absolute.blade.php
@@ -1,8 +1,9 @@
 <div
   x-data="{ }"
-  x-init="document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.add('invisible'): null, setTimeout(() => $refs.loadingAbsoluteContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.remove('invisible') : null , 1010)"
+  x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingAbsoluteContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
   x-ref="loadingAbsoluteContent"
-  class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50"
+  class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0"
+  style="z-index: 60;"
 >
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
 </div>
diff --git a/resources/views/components/loading/content.blade.php b/resources/views/components/loading/content.blade.php
index 104137af8..5240e0956 100644
--- a/resources/views/components/loading/content.blade.php
+++ b/resources/views/components/loading/content.blade.php
@@ -1,8 +1,9 @@
 <div
   x-data="{ }"
-  x-init="document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.add('invisible'): null, setTimeout(() => $refs.loadingContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.remove('invisible') : null , 1010)"
+  x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
   x-ref="loadingContent"
-  class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50"
+  class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1"
+  style="z-index: 60;"
 >
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
 </div>