diff --git a/.gitignore b/.gitignore
index d0316c9..9880168 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,4 @@ Thumbs.db
 .idea/
 .vscode/
 *.swp
+*.bak
diff --git a/frontend/index.html b/frontend/index.html
index 56591b7..f30ab98 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/ac-helper/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AC Tool — Oliver Agency</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5eb0734..e63bfae 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import ErrorBoundary from './components/ErrorBoundary'
 import { useMsal } from '@azure/msal-react'
 import { InteractionStatus } from '@azure/msal-browser'
 import { Toaster } from 'react-hot-toast'
@@ -64,6 +65,7 @@ function AdminRoute({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   return (
+    <ErrorBoundary>
     <BrowserRouter basename="/ac-helper/">
       <Toaster
         position="bottom-right"
@@ -85,5 +87,6 @@ export default function App() {
         </AppShell>
       </AuthGate>
     </BrowserRouter>
+    </ErrorBoundary>
   )
 }
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..26bb93c
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,36 @@
+import { Component, type ReactNode } from 'react'
+
+interface Props { children: ReactNode }
+interface State { error: Error | null }
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          height: '100vh', background: '#000', flexDirection: 'column', gap: 16,
+        }}>
+          <div style={{ fontSize: 32 }}>⚠️</div>
+          <div style={{ color: 'var(--text-primary)', fontWeight: 600 }}>Something went wrong</div>
+          <div style={{ color: 'var(--text-muted)', fontSize: 12, maxWidth: 400, textAlign: 'center' }}>
+            {this.state.error.message}
+          </div>
+          <button
+            onClick={() => window.location.reload()}
+            style={{ background: 'var(--accent)', color: '#000', border: 'none', borderRadius: 6, padding: '8px 20px', cursor: 'pointer', fontSize: 13 }}
+          >
+            Reload
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 610118e..08bbcdc 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,9 +2,13 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { MsalProvider } from '@azure/msal-react'
 import { PublicClientApplication } from '@azure/msal-browser'
+import { registerAllModules } from 'handsontable/registry'
 import './index.css'
 import App from './App'
 
+// Register all Handsontable modules (autocomplete, dropdown, context menu, etc.)
+registerAllModules()
+
 // MSAL is configured dynamically from /api/auth/config
 // We create a placeholder instance here; the real config is loaded in App.tsx
 const msalInstance = new PublicClientApplication({
diff --git a/frontend/src/pages/SheetPage.tsx b/frontend/src/pages/SheetPage.tsx
index 918ea83..c449a1a 100644
--- a/frontend/src/pages/SheetPage.tsx
+++ b/frontend/src/pages/SheetPage.tsx
@@ -26,14 +26,17 @@ export default function SheetPage() {
   const [yolo, setYolo] = useState(false)
   const [history, setHistory] = useState('')
   const [logs, setLogs] = useState<LogEntry[]>([])
+  const [sheetError, setSheetError] = useState(false)
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const sheetMeta = sheets.find(s => s.id === sheetId)
+  const { loading } = useSheetStore()
 
   useEffect(() => {
+    setSheetError(false)
     fetchCategories()
     if (sheetId && activeSheetId !== sheetId) {
-      loadSheet(sheetId)
+      loadSheet(sheetId).catch(() => setSheetError(true))
     }
   }, [sheetId])
 
@@ -142,6 +145,26 @@ export default function SheetPage() {
     toast.success('Sheet cleared')
   }
 
+  if (sheetError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <div style={{ fontSize: 32 }}>⚠️</div>
+        <div style={{ color: 'var(--text-primary)', fontWeight: 600 }}>Sheet not found</div>
+        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>
+          This sheet may have been deleted or you don't have access.
+        </div>
+      </div>
+    )
+  }
+
+  if (loading && deliverables.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>Loading…</div>
+      </div>
+    )
+  }
+
   return (
     <div className="flex flex-col h-full gap-3">
       {/* Header */}
@@ -195,6 +218,8 @@ export default function SheetPage() {
             licenseKey="non-commercial-and-evaluation"
             stretchH="last"
             themeName="ht-theme-main"
+            autoRowSize={false}
+            autoColumnSize={false}
           />
         )}
       </div>
