diff --git a/resources/assets/js/components/AkauntingModal.vue b/resources/assets/js/components/AkauntingModal.vue
index a9b46550b..bcd5b1085 100644
--- a/resources/assets/js/components/AkauntingModal.vue
+++ b/resources/assets/js/components/AkauntingModal.vue
@@ -6,6 +6,7 @@
             v-show="show"
             tabindex="-1"
             role="dialog"
+            data-modal-handle
             :aria-hidden="!show">
             <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
                 <slot name="modal-content">
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index 62b942aa5..b87972a0a 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -6,6 +6,7 @@
             v-show="show"
             tabindex="-1"
             role="dialog"
+            data-modal-handle
             :aria-hidden="!show">
             <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
                 <slot name="modal-content">
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 5a2c62a2c..a75b2e2d0 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -27,7 +27,12 @@
 
 @stack('menu_start')
 
-<div data-real-menu class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
+<div
+    x-data="{ }"
+    x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
+    x-ref="realMenu"
+    class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
+>
     <div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
         <div
             data-tooltip-target="tooltip-profile"
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index a3affccf7..6d9978e23 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -11,7 +11,12 @@
 
 @stack('menu_start')
 
-<div data-real-menu class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
+<div
+    x-data="{ }"
+    x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
+    x-ref="realMenu"
+    class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
+>
     <div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
         <div 
             data-tooltip-target="tooltip-profile"
diff --git a/resources/views/components/loading/absolute.blade.php b/resources/views/components/loading/absolute.blade.php
index 9d473dcbb..51d438812 100644
--- a/resources/views/components/loading/absolute.blade.php
+++ b/resources/views/components/loading/absolute.blade.php
@@ -1,4 +1,9 @@
-<div data-absolute-loading-content class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50">
+<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-ref="loadingAbsoluteContent"
+  class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50"
+>
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" 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 0d290e0e2..104137af8 100644
--- a/resources/views/components/loading/content.blade.php
+++ b/resources/views/components/loading/content.blade.php
@@ -1,4 +1,9 @@
-<div data-loading-content 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">
+<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-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"
+>
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 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 0c834e593..ea99e6520 100644
--- a/resources/views/components/loading/menu.blade.php
+++ b/resources/views/components/loading/menu.blade.php
@@ -1,4 +1,9 @@
-<div data-loading-menu 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">
+<div
+    x-data="{ }"
+    x-init="setTimeout(() => $refs.loadingMenu.remove(), 1000)"
+    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"
+>
     <div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
         <div class="flex flex-col items-center justify-center mb-7 cursor-pointer">
             <span class="w-7 h-7 flex items-center justify-center text-2xl">
@@ -73,32 +78,3 @@
         </div>
     </nav>
 </div>
-
-@push('scripts_start')
-    <script type="text/javascript">
-        let loading_menu_html = document.querySelectorAll('[data-loading-menu]');
-        let loading_html = document.querySelectorAll('[data-loading-content]');
-        let loading_absolute_html = document.querySelectorAll('[data-absolute-loading-content]');
-        let menu_html = document.querySelector('[data-real-menu]');
-        let timer = 1000;
-
-        window.addEventListener('DOMContentLoaded', (event) => {
-            setTimeout(() => {
-                loading_menu_html[0].remove();
-                menu_html.classList.remove('hidden');
-            }, timer);
-
-            if (loading_html.length) {
-                setTimeout(() => {
-                    loading_html[0].remove();
-                }, timer);
-            }
-
-            if (loading_absolute_html.length) {
-                setTimeout(() => {
-                    loading_absolute_html[0].remove();
-                }, timer);
-            }
-        });
-    </script>
-@endpush