diff --git a/index.html b/index.html
index b991401..839b34f 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,19 @@
     <link rel="manifest" href="/manifest.json" />
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <!-- Loading spinner shown while JS bundles load, replaced by React -->
+      <div id="app-loader" style="display:flex;align-items:center;justify-content:center;height:100vh;background:#18181b;flex-direction:column;gap:16px;">
+        <div style="width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:#06b6d4;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
+        <span style="color:rgba(255,255,255,0.4);font-family:system-ui,sans-serif;font-size:13px;">Loading PinchChat…</span>
+      </div>
+      <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
+    </div>
+    <noscript>
+      <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#18181b;color:#a1a1aa;font-family:system-ui,sans-serif;text-align:center;padding:2rem;">
+        <p>PinchChat requires JavaScript to run. Please enable JavaScript in your browser settings.</p>
+      </div>
+    </noscript>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
