diff --git a/src/pages/agent-office/hooks/useOfficeCanvas.js b/src/pages/agent-office/hooks/useOfficeCanvas.js
index f6905c3..6876f73 100644
--- a/src/pages/agent-office/hooks/useOfficeCanvas.js
+++ b/src/pages/agent-office/hooks/useOfficeCanvas.js
@@ -1,74 +1,59 @@
+// src/pages/agent-office/hooks/useOfficeCanvas.js
 import { useRef, useEffect, useCallback } from 'react';
-import { OfficeRenderer } from '../canvas/OfficeRenderer';
-import officeMap from '../assets/office-map.json';
+import { OfficeRenderer } from '../canvas/OfficeRenderer.js';
 
-export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
+export function useOfficeCanvas() {
+  const canvasRef = useRef(null);
   const rendererRef = useRef(null);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!canvasRef.current) return;
 
-    const canvas = document.createElement('canvas');
-    canvas.style.display = 'block';
-    canvas.style.width = '100%';
-    canvas.style.height = '100%';
-    canvas.style.imageRendering = 'pixelated';
-    containerRef.current.appendChild(canvas);
-
-    const renderer = new OfficeRenderer(canvas, officeMap);
+    const renderer = new OfficeRenderer(canvasRef.current);
     rendererRef.current = renderer;
-
-    const resize = () => {
-      const rect = containerRef.current.getBoundingClientRect();
-      renderer.resize(rect.width, rect.height);
-    };
-
-    resize();
     renderer.start();
 
-    renderer.setOnClick((agentId) => {
-      if (onAgentClick) onAgentClick(agentId);
-    });
-
-    renderer.setOnCeoClick(() => {
-      if (onCeoClick) onCeoClick();
-    });
-
-    const handleClick = (e) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      renderer.handleClick(x, y);
-    };
-
-    canvas.addEventListener('click', handleClick);
-    window.addEventListener('resize', resize);
+    const handleResize = () => renderer.resize();
+    window.addEventListener('resize', handleResize);
 
     return () => {
-      renderer.stop();
-      canvas.removeEventListener('click', handleClick);
-      window.removeEventListener('resize', resize);
-      if (containerRef.current && canvas.parentNode === containerRef.current) {
-        containerRef.current.removeChild(canvas);
-      }
+      window.removeEventListener('resize', handleResize);
+      renderer.destroy();
+      rendererRef.current = null;
     };
-  }, [containerRef, onAgentClick, onCeoClick]);
+  }, []);
 
   const updateAgentState = useCallback((agentId, state, detail) => {
     rendererRef.current?.updateAgentState(agentId, state, detail);
   }, []);
 
-  const moveAgent = useCallback((agentId, target) => {
-    rendererRef.current?.moveAgent(agentId, target);
-  }, []);
-
   const setAgentNotification = useCallback((agentId, count) => {
     rendererRef.current?.setAgentNotification(agentId, count);
   }, []);
 
-  const setCeoDocBadge = useCallback((count) => {
-    rendererRef.current?.setCeoDocBadge(count);
+  const setTheme = useCallback((themeName) => {
+    rendererRef.current?.setTheme(themeName);
   }, []);
 
-  return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
+  const setZoom = useCallback((level) => {
+    rendererRef.current?.setZoom(level);
+  }, []);
+
+  const hitTest = useCallback((clientX, clientY) => {
+    return rendererRef.current?.hitTest(clientX, clientY) || { type: 'empty' };
+  }, []);
+
+  const getZoom = useCallback(() => {
+    return rendererRef.current?.zoom || 2;
+  }, []);
+
+  return {
+    canvasRef,
+    updateAgentState,
+    setAgentNotification,
+    setTheme,
+    setZoom,
+    hitTest,
+    getZoom
+  };
 }