diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx
index e509032..e8af183 100644
--- a/services/web-ui/public/app.jsx
+++ b/services/web-ui/public/app.jsx
@@ -8,6 +8,7 @@ function App() {
   const [openProject, setOpenProject] = React.useState(null);
   const [showNewRecorder, setShowNewRecorder] = React.useState(false);
   const [dataReady, setDataReady] = React.useState(false);
+  const [loadError, setLoadError] = React.useState(null);
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--accent', ACCENT);
@@ -20,7 +21,7 @@ function App() {
   React.useEffect(() => {
     window.ZAMPP_API.loadData()
       .then(() => setDataReady(true))
-      .catch(err => { console.error('[Dragonflight] load failed:', err); setDataReady(true); });
+      .catch(err => { console.error('[Dragonflight] load failed:', err); setLoadError(err.message || 'Failed to load'); setDataReady(true); });
   }, []);
 
   const navigate = (id) => { setOpenAsset(null); setRoute(id); };
@@ -63,6 +64,16 @@ function App() {
     );
   }
 
+  if (loadError) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column', gap: 12, background: 'var(--bg-0)' }}>
+        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--danger)' }}>Failed to load</div>
+        <div style={{ fontSize: 12, color: 'var(--text-3)', maxWidth: 360, textAlign: 'center' }}>{loadError}</div>
+        <button className="btn primary sm" onClick={() => window.location.reload()}>Retry</button>
+      </div>
+    );
+  }
+
   let content;
   if (openAsset) {
     content = <AssetDetail asset={openAsset} onClose={() => setOpenAsset(null)} />;