diff --git a/docs/text40.png b/docs/text40.png
new file mode 100644
index 0000000..b0bcc0b
Binary files /dev/null and b/docs/text40.png differ
diff --git a/packages/studio-panel/src/components/Studio.tsx b/packages/studio-panel/src/components/Studio.tsx
index ae7ba3d..b33247c 100644
--- a/packages/studio-panel/src/components/Studio.tsx
+++ b/packages/studio-panel/src/components/Studio.tsx
@@ -167,15 +167,21 @@ function Studio() {
     >
       <SceneProvider>
         <div className="flex flex-col h-screen bg-gray-900 overflow-hidden">
-          <div className="flex-none">
+          {/* Header */}
+          <div className="flex-none z-40">
             <StudioHeader roomName={roomName} userName={userName} />
           </div>
+          
+          {/* Contenedor principal entre header y footer */}
           <div className="flex-1 overflow-hidden relative min-h-0">
+            {/* Panel izquierdo */}
             <div
               className={`absolute left-0 top-0 bottom-0 z-20 transition-transform duration-300 ${showLeftPanel ? "translate-x-0" : "-translate-x-full"}`}
             >
               <StudioLeftSidebar />
             </div>
+            
+            {/* Botón toggle panel izquierdo */}
             <button
               onClick={() => setShowLeftPanel(!showLeftPanel)}
               className="absolute top-1/2 -translate-y-1/2 z-30 transition-all duration-300"
@@ -211,12 +217,12 @@ function Studio() {
                 />
               </svg>
             </button>
+            {/* Contenedor del estudio (StreamView + ControlPanel) */}
             <div
-              className="absolute top-0 transition-all duration-300 flex flex-col overflow-hidden"
+              className="absolute top-0 bottom-0 transition-all duration-300 flex flex-col overflow-hidden"
               style={{
                 left: showLeftPanel ? "256px" : "0px",
-                right: showRightPanel ? "480px" : "80px", // 480px = panel (384px) + tabs (80px + 16px gap)
-                bottom: "80px", // Espacio para el ControlBar
+                right: showRightPanel ? "480px" : "80px",
               }}
             >
               <div className="flex-1 flex items-center justify-center px-4 pt-4 overflow-hidden min-h-0">
@@ -268,31 +274,32 @@ function Studio() {
                 isCollapsed={!showRightPanel}
               />
             </div>
-            {/* ControlBar de LiveKit centrado en el footer */}
-            <div
-              className="absolute bottom-0 h-20 z-20 transition-all duration-300 bg-gray-900/95 backdrop-blur-sm border-t border-gray-800"
-              style={{
-                left: showLeftPanel ? "256px" : "0px",
-                right: showRightPanel ? "480px" : "80px",
+          </div>
+          
+          {/* ControlBar como footer fijo */}
+          <div
+            className="flex-none h-20 z-40 transition-all duration-300 bg-gray-900/95 backdrop-blur-sm border-t border-gray-800"
+            style={{
+              marginLeft: showLeftPanel ? "256px" : "0px",
+              marginRight: showRightPanel ? "480px" : "80px",
+            }}
+          >
+            <ControlBar 
+              variation="verbose"
+              controls={{
+                microphone: true,
+                camera: true,
+                screenShare: true,
+                leave: true,
               }}
-            >
-              <ControlBar 
-                variation="verbose"
-                controls={{
-                  microphone: true,
-                  camera: true,
-                  screenShare: true,
-                  leave: true,
-                }}
-                style={{
-                  height: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  padding: '0 1rem',
-                }}
-              />
-            </div>
+              style={{
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0 1rem',
+              }}
+            />
           </div>
         </div>
       </SceneProvider>