diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index cfd002d..e37ce30 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -398,3 +398,6 @@ export const DraggableWidget = ({
 };
 
 
+
+
+// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height
\ No newline at end of file
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index bd707f4..9c0b8da 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -510,7 +510,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log("zone.objects: ", zone.objects);
   return (
     <div
       onPointerMove={handlePointerMove}
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index fe9836d..f9a598f 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -246,7 +246,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Calculate capacities and dimensions
   const topWidth = getPanelStyle("top").width;
-  const bottomWidth = getPanelStyle("bottom").width;
+  const bottomWidth = getPanelStyle("bottom").height;
   const leftHeight = getPanelStyle("left").height;
   const rightHeight = getPanelStyle("right").height;
 
@@ -255,13 +255,15 @@ const Panel: React.FC<PanelProps> = ({
   const leftCapacity = calculatePanelCapacity("left");
   const rightCapacity = calculatePanelCapacity("right");
 
+  console.log('topCapacity: ', topCapacity);
+  console.log('bottomWidth: ', bottomWidth);
   return (
     <>
       <style>
         {`
           :root {
             --topWidth: ${topWidth};
-            --bottomWidth: ${bottomWidth};
+            --bottomWidth: ${bottomWidth} ;
             --leftHeight: ${leftHeight};
             --rightHeight: ${rightHeight};
 
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index cc3f791..2935391 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -68,7 +68,7 @@
     display: flex;
     background-color: var(--background-color);
     position: absolute;
-    // bottom: 10px;
+    bottom: 10px;
     left: 50%;
     gap: 6px;
 
@@ -77,7 +77,7 @@
     overflow: auto;
     max-width: calc(100% - 500px);
     z-index: 3;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -0%);
 
     &::-webkit-scrollbar {
       display: none;
@@ -124,7 +124,7 @@
   }
 
   .zone-wrapper.bottom {
-    top: var(--bottomWidth);
+    bottom: var(--bottomWidth);
     // bottom: 200px;
   }
 
@@ -370,7 +370,7 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    top: var(--bottomWidth);
+    bottom: var(--bottomWidth);
     // bottom: 210px;
   }
 }