diff --git a/frontend/src/components/SidePanel.tsx b/frontend/src/components/SidePanel.tsx
index 5950f2f..78a103e 100644
--- a/frontend/src/components/SidePanel.tsx
+++ b/frontend/src/components/SidePanel.tsx
@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './SidePanel.css';
+import LayerPanel from './LayerPanel';
 
 const SidePanel: React.FC = () => {
   const [activeTab, setActiveTab] = useState('blocks');
+  const [layers, setLayers] = useState([
+    { id: '1', name: 'Layer 1', visible: true, locked: false, color: '#000000', lineType: 'solid', transparency: 0, sortOrder: 0 }
+  ]);
+  const [activeLayer, setActiveLayer] = useState('1');
 
   const tabs = [
     { id: 'blocks', label: 'Blocks', icon: '🧱' },
@@ -11,12 +16,37 @@ const SidePanel: React.FC = () => {
     { id: 'copilot', label: 'KI Copilot', icon: '🤖' },
   ];
 
+  // Initialize with a default layer if none exist
+  useEffect(() => {
+    if (layers.length === 0) {
+      const defaultLayer = { 
+        id: '1', 
+        name: 'Layer 1', 
+        visible: true, 
+        locked: false, 
+        color: '#000000', 
+        lineType: 'solid', 
+        transparency: 0, 
+        sortOrder: 0 
+      };
+      setLayers([defaultLayer]);
+      setActiveLayer('1');
+    }
+  }, [layers.length]);
+
   const renderContent = () => {
     switch (activeTab) {
       case 'blocks':
         return <div className="panel-content">Blocks content goes here</div>;
       case 'layers':
-        return <div className="panel-content">Layers content goes here</div>;
+        return (
+          <LayerPanel 
+            layers={layers} 
+            setLayers={setLayers} 
+            activeLayer={activeLayer} 
+            setActiveLayer={setActiveLayer} 
+          />
+        );
       case 'properties':
         return <div className="panel-content">Properties content goes here</div>;
       case 'copilot':