diff --git a/resources/views/components/loading/absolute.blade.php b/resources/views/components/loading/absolute.blade.php
index 08f37e4e6..3a42b0459 100644
--- a/resources/views/components/loading/absolute.blade.php
+++ b/resources/views/components/loading/absolute.blade.php
@@ -1,10 +1,17 @@
 <div
-  x-data="{ }"
-  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-data="{ loaded: false }"
+  x-init="() => {
+    const loadEvent = 'onpagehide' in window ? 'pageshow' : 'load';
+    window.addEventListener(loadEvent, () => {
+      loaded = true;
+      $refs.loadingAbsoluteContent.remove();
+      document.querySelectorAll('[data-modal-handle]').forEach(item => item.classList.remove('invisible'));
+    });
+  }"
   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"
   style="z-index: 60;"
 >
-  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
+  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-40 h-40" alt="Akaunting" />
 </div>
 <!--data attr added because for none vue.js pages-->
\ No newline at end of file
diff --git a/resources/views/components/loading/content.blade.php b/resources/views/components/loading/content.blade.php
index f317e8b12..8eec0429e 100644
--- a/resources/views/components/loading/content.blade.php
+++ b/resources/views/components/loading/content.blade.php
@@ -1,10 +1,18 @@
 <div
-  x-data="{ }"
-  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-data="{ loaded: false }"
+  x-init="() => {
+    const loadEvent = 'onpagehide' in window ? 'pageshow' : 'load';
+    window.addEventListener(loadEvent, () => {
+      loaded = true;
+      $refs.loadingContent.remove();
+      document.querySelectorAll('[data-modal-handle]').forEach(item => item.classList.remove('invisible'));
+    });
+  }"
   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"
   style="z-index: 60;"
 >
-  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
+  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-40 h-40 lg:-mt-16" alt="Akaunting" />
 </div>
 <!--data attr added because for none vue.js pages-->
+
diff --git a/resources/views/components/loading/menu.blade.php b/resources/views/components/loading/menu.blade.php
index ea99e6520..cdf18ae25 100644
--- a/resources/views/components/loading/menu.blade.php
+++ b/resources/views/components/loading/menu.blade.php
@@ -1,6 +1,9 @@
 <div
-    x-data="{ }"
-    x-init="setTimeout(() => $refs.loadingMenu.remove(), 1000)"
+    x-data="{ loaded: false }"
+    x-init="window.addEventListener('load', () => { 
+        loaded = true; 
+        $refs.loadingMenu.remove();
+    })"
     x-ref="loadingMenu"
     class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
 >