diff --git a/apps/mission-control/frontend/src/App.tsx b/apps/mission-control/frontend/src/App.tsx
index 931b839..1a39c76 100644
--- a/apps/mission-control/frontend/src/App.tsx
+++ b/apps/mission-control/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import Ralph from './pages/Ralph'
 import Agents from './pages/Agents'
 import Tools from './pages/Tools'
 import Terminal from './pages/Terminal'
+import Hub from './pages/Hub'
 
 export default function App() {
   return (
@@ -21,6 +22,7 @@ export default function App() {
           <Route path="/ralph" element={<Ralph />} />
           <Route path="/agents" element={<Agents />} />
           <Route path="/tools" element={<Tools />} />
+          <Route path="/hub" element={<Hub />} />
         </Routes>
       </main>
     </div>
diff --git a/apps/mission-control/frontend/src/components/Sidebar.tsx b/apps/mission-control/frontend/src/components/Sidebar.tsx
index ec64eaa..e36ba90 100644
--- a/apps/mission-control/frontend/src/components/Sidebar.tsx
+++ b/apps/mission-control/frontend/src/components/Sidebar.tsx
@@ -7,7 +7,8 @@ import {
   Wrench,
   Play,
   Activity,
-  Terminal
+  Terminal,
+  Cpu
 } from 'lucide-react'
 import clsx from 'clsx'
 
@@ -19,6 +20,7 @@ const navItems = [
   { to: '/ralph', icon: Play, label: 'Ralph Loop' },
   { to: '/agents', icon: Bot, label: 'Agents' },
   { to: '/tools', icon: Wrench, label: 'Tools' },
+  { to: '/hub', icon: Cpu, label: 'Ladder Logic' },
 ]
 
 export default function Sidebar() {
diff --git a/apps/mission-control/frontend/src/pages/Hub.tsx b/apps/mission-control/frontend/src/pages/Hub.tsx
new file mode 100644
index 0000000..3847340
--- /dev/null
+++ b/apps/mission-control/frontend/src/pages/Hub.tsx
@@ -0,0 +1,18 @@
+export default function Hub() {
+  return (
+    <div className="h-full flex flex-col">
+      <div className="mb-4">
+        <h2 className="text-xl font-bold">Ladder Logic Editor</h2>
+        <p className="text-sm text-gray-400">Micro 820 — live reference view</p>
+      </div>
+      <div className="flex-1 rounded-lg overflow-hidden border border-gray-800">
+        <iframe
+          src="https://mikecranesync.github.io/ladder-logic-editor/"
+          className="w-full h-full"
+          style={{ border: "none" }}
+          title="Ladder Logic Editor"
+        />
+      </div>
+    </div>
+  )
+}