diff --git a/frontend/src/components/SidePanel.tsx b/frontend/src/components/SidePanel.tsx
index 78a103e..df342e5 100644
--- a/frontend/src/components/SidePanel.tsx
+++ b/frontend/src/components/SidePanel.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './SidePanel.css';
 import LayerPanel from './LayerPanel';
+import BlockLibrary from './BlockLibrary';
 
 const SidePanel: React.FC = () => {
   const [activeTab, setActiveTab] = useState('blocks');
@@ -8,6 +9,8 @@ const SidePanel: React.FC = () => {
     { id: '1', name: 'Layer 1', visible: true, locked: false, color: '#000000', lineType: 'solid', transparency: 0, sortOrder: 0 }
   ]);
   const [activeLayer, setActiveLayer] = useState('1');
+  const canvasRef = useRef(null);
+  const yjsDocRef = useRef(null);
 
   const tabs = [
     { id: 'blocks', label: 'Blocks', icon: '🧱' },
@@ -37,7 +40,7 @@ const SidePanel: React.FC = () => {
   const renderContent = () => {
     switch (activeTab) {
       case 'blocks':
-        return <div className="panel-content">Blocks content goes here</div>;
+        return <BlockLibrary canvasRef={canvasRef} yjsDoc={yjsDocRef.current} />;
       case 'layers':
         return (
           <LayerPanel 
@@ -45,6 +48,7 @@ const SidePanel: React.FC = () => {
             setLayers={setLayers} 
             activeLayer={activeLayer} 
             setActiveLayer={setActiveLayer} 
+            yjsDoc={yjsDocRef.current}
           />
         );
       case 'properties':