diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bf6e942..4092dad 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import './App.css';
 import './styles/theme.css';
 import { ThemeProvider, useTheme } from './contexts/ThemeContext';
@@ -11,6 +11,8 @@ import CanvasArea from './components/CanvasArea';
 function AppContent() {
   const { theme, toggleTheme } = useTheme();
   const [activeRibbonTab, setActiveRibbonTab] = useState('draw');
+  const canvasRef = useRef(null);
+  const yjsDocRef = useRef(null);
 
   const handleRibbonTabChange = (tab: string) => {
     setActiveRibbonTab(tab);
@@ -20,8 +22,8 @@ function AppContent() {
     <div className={`app-container ${theme}`} data-theme={theme}>
       <RibbonBar onTabChange={handleRibbonTabChange} />
       <div className="main-content">
-        <CanvasArea />
-        <SidePanel />
+        <CanvasArea ref={canvasRef} />
+        <SidePanel canvasRef={canvasRef} yjsDoc={yjsDocRef} />
       </div>
       <CommandLine />
       <StatusBar />