diff --git a/media_server/static/index.html b/media_server/static/index.html
index 88e15fd..f26f526 100644
--- a/media_server/static/index.html
+++ b/media_server/static/index.html
@@ -45,6 +45,16 @@
             line-height: 1.6;
         }
 
+        /* Prevent flash of untranslated content */
+        body.loading-translations {
+            opacity: 0;
+            transition: opacity 0.1s ease-in;
+        }
+
+        body.translations-loaded {
+            opacity: 1;
+        }
+
         .container {
             max-width: 800px;
             margin: 0 auto;
@@ -598,6 +608,11 @@
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
         }
 
+        /* Ensure dialogs are hidden until explicitly opened */
+        dialog:not([open]) {
+            display: none;
+        }
+
         dialog::backdrop {
             background: rgba(0, 0, 0, 0.8);
         }
@@ -870,12 +885,12 @@
         }
     </style>
 </head>
-<body>
+<body class="loading-translations">
     <!-- Clear Token Button -->
     <button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
 
     <!-- Auth Modal -->
-    <div id="auth-overlay">
+    <div id="auth-overlay" class="hidden">
         <div class="auth-modal">
             <h2 data-i18n="app.title">Media Server</h2>
             <p data-i18n="auth.message">Enter your API token to connect to the media server.</p>
@@ -1266,6 +1281,10 @@
 
             // Update locale select dropdown (if visible)
             updateLocaleSelect();
+
+            // Remove loading class and show content
+            document.body.classList.remove('loading-translations');
+            document.body.classList.add('translations-loaded');
         }
 
         // Change locale from dropdown
