diff --git a/frontend/src/components/CanvasArea.tsx b/frontend/src/components/CanvasArea.tsx
index f1646df..e482b5e 100644
--- a/frontend/src/components/CanvasArea.tsx
+++ b/frontend/src/components/CanvasArea.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import './CanvasArea.css';
+import CADCanvas from './CADCanvas';
 
-const CanvasArea: React.FC = () => {
+const CanvasArea = forwardRef((_, ref) => {
   return (
     <div className="canvas-area" role="main" aria-label="Drawing Canvas">
-      <div className="canvas-placeholder">
-        <p>Canvas Area</p>
-        <p className="placeholder-subtext">Drawing canvas will be rendered here</p>
-      </div>
+      <CADCanvas ref={ref} />
     </div>
   );
-};
+});
 
 export default CanvasArea;
\ No newline at end of file