diff --git a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
index 6d1e760..258bd9b 100644
--- a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
+++ b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
@@ -40,8 +40,8 @@
     @await RenderSectionAsync("Head", required: false)
 </head>
 <body>
-    <!-- PWA Loading Screen -->
-    <div id="pwa-loading-screen" class="pwa-loading-screen">
+    <!-- PWA Loading Screen - Only on first load -->
+    <div id="pwa-loading-screen" class="pwa-loading-screen" style="display: none;">
         <div class="pwa-loading-content">
             <div class="pwa-loading-logo">
                 <i class="fas fa-store"></i>
@@ -56,6 +56,21 @@
         </div>
     </div>
 
+    <script>
+        // Show loading screen only on initial app load, not on navigation
+        (function() {
+            const isFirstLoad = !sessionStorage.getItem('appLoaded');
+
+            if (isFirstLoad) {
+                const loadingScreen = document.getElementById('pwa-loading-screen');
+                if (loadingScreen) {
+                    loadingScreen.style.display = 'flex';
+                }
+                sessionStorage.setItem('appLoaded', 'true');
+            }
+        })();
+    </script>
+
     <header>
         <nav class="navbar navbar-expand-sm navbar-light bg-white">
             <div class="container-fluid">
diff --git a/LittleShop/wwwroot/js/pwa.js b/LittleShop/wwwroot/js/pwa.js
index 9ed7993..40327f5 100644
--- a/LittleShop/wwwroot/js/pwa.js
+++ b/LittleShop/wwwroot/js/pwa.js
@@ -45,14 +45,14 @@ class PWAManager {
 
     hideLoadingScreen() {
         const loadingScreen = document.getElementById('pwa-loading-screen');
-        if (loadingScreen) {
+        if (loadingScreen && loadingScreen.style.display !== 'none') {
             // Add fade-out class
             loadingScreen.classList.add('fade-out');
 
-            // Remove from DOM after animation completes
+            // Hide after animation completes (don't remove from DOM to avoid layout issues)
             setTimeout(() => {
-                loadingScreen.remove();
-                console.log('PWA: Loading screen removed');
+                loadingScreen.style.display = 'none';
+                console.log('PWA: Loading screen hidden');
             }, 500);
         }
     }
@@ -701,15 +701,15 @@ window.addEventListener('load', () => {
     }
 });
 
-// Fallback: Ensure loading screen is removed after maximum timeout
+// Fallback: Ensure loading screen is hidden after maximum timeout
 // This guarantees the loading screen won't stay visible indefinitely
 setTimeout(() => {
     const loadingScreen = document.getElementById('pwa-loading-screen');
-    if (loadingScreen) {
-        console.log('PWA: Removing loading screen via fallback timeout');
+    if (loadingScreen && loadingScreen.style.display !== 'none') {
+        console.log('PWA: Hiding loading screen via fallback timeout');
         loadingScreen.classList.add('fade-out');
         setTimeout(() => {
-            loadingScreen.remove();
+            loadingScreen.style.display = 'none';
         }, 500);
     }
 }, 5000); // 5 second maximum
\ No newline at end of file
