diff --git a/src/pages/agent-office/components/TopBar.jsx b/src/pages/agent-office/components/TopBar.jsx
new file mode 100644
index 0000000..6d0514e
--- /dev/null
+++ b/src/pages/agent-office/components/TopBar.jsx
@@ -0,0 +1,33 @@
+// src/pages/agent-office/components/TopBar.jsx
+import { getThemeNames } from '../canvas/themes.js';
+
+export default function TopBar({ connected, theme, onThemeChange, zoom, onZoomChange }) {
+  const themes = getThemeNames();
+
+  return (
+    <div className="ao-topbar">
+      <div className="ao-topbar-left">
+        <span className="ao-topbar-title">Agent Office</span>
+        <span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
+          ● {connected ? 'Connected' : 'Disconnected'}
+        </span>
+      </div>
+      <div className="ao-topbar-right">
+        <select
+          className="ao-topbar-select"
+          value={theme}
+          onChange={(e) => onThemeChange(e.target.value)}
+        >
+          {themes.map(t => (
+            <option key={t.key} value={t.key}>{t.name}</option>
+          ))}
+        </select>
+        <div className="ao-topbar-zoom">
+          <button onClick={() => onZoomChange(Math.max(1, zoom - 0.5))} disabled={zoom <= 1}>-</button>
+          <span>{zoom}x</span>
+          <button onClick={() => onZoomChange(Math.min(4, zoom + 0.5))} disabled={zoom >= 4}>+</button>
+        </div>
+      </div>
+    </div>
+  );
+}