diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
index 3676251..0b4f7c8 100644
--- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
+++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
@@ -38,11 +38,6 @@ export const DraggableWidget = ({
   setOpenKebabId,
   selectedZone,
   setSelectedZone,
-  draggingIndex,
-  setDraggingIndex,
-  hoverIndex,
-  setHoverIndex,
-  side,
 }: {
   selectedZone: {
     zoneName: string;
@@ -79,12 +74,6 @@ export const DraggableWidget = ({
   onReorder: (fromIndex: number, toIndex: number) => void;
   openKebabId: string | null;
   setOpenKebabId: (id: string | null) => void;
-
-  draggingIndex: number | null;
-  setDraggingIndex: React.Dispatch<React.SetStateAction<number | null>>;
-  hoverIndex: number | null;
-  setHoverIndex: React.Dispatch<React.SetStateAction<number | null>>;
-  side: any;
 }) => {
   const { visualizationSocket } = useSocketStore();
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
@@ -109,6 +98,8 @@ export const DraggableWidget = ({
 
   const deleteSelectedChart = async () => {
     try {
+      console.log("delete");
+
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteWidget = {
@@ -120,6 +111,7 @@ export const DraggableWidget = ({
       if (visualizationSocket) {
         setSelectedChartId(null);
         visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
+        console.log("delete widget", selectedChartId);
       }
       const updatedWidgets = selectedZone.widgets.filter(
         (w: Widget) => w.id !== widget.id
@@ -141,7 +133,7 @@ export const DraggableWidget = ({
       //   }));
       // }
     } catch (error) {
-      echo.error("Failed to delete selected chart");
+      echo.error("Failued to dublicate widgeet");
     } finally {
       setOpenKebabId(null);
     }
@@ -206,8 +198,17 @@ export const DraggableWidget = ({
         ...prevZone,
         widgets: [...prevZone.widgets, duplicatedWidget],
       }));
+
+      // const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
+
+      // if (response?.message === "Widget created successfully") {
+      //   setSelectedZone((prevZone: any) => ({
+      //     ...prevZone,
+      //     widgets: [...prevZone.widgets, duplicatedWidget],
+      //   }));
+      // }
     } catch (error) {
-      echo.error("Failed to dublicate widget");
+      echo.error("Failued to dublicate widgeet");
     } finally {
       setOpenKebabId(null);
     }
@@ -242,15 +243,10 @@ export const DraggableWidget = ({
   }, [setOpenKebabId]);
 
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    event.dataTransfer.setData("text/plain", index.toString());
-    // selectedZone.zoneId
-
-    setDraggingIndex(index);
+    event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
   };
-
   const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setHoverIndex(index); // Set where the placeholder should show
+    event.preventDefault(); // Allow drop
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -259,20 +255,11 @@ export const DraggableWidget = ({
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10);
-    const toIndex = index;
-
+    const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
+    const toIndex = index; // The index of the widget where the drop occurred
     if (fromIndex !== toIndex) {
-      onReorder(fromIndex, toIndex);
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
     }
-
-    setDraggingIndex(null);
-    setHoverIndex(null);
-  };
-
-  const handleDragEnd = () => {
-    setDraggingIndex(null);
-    setHoverIndex(null);
   };
 
   // useClickOutside(chartWidget, () => {
@@ -284,7 +271,7 @@ export const DraggableWidget = ({
   // Current: Two identical useEffect hooks for canvas dimensions
   // Remove the duplicate and keep only one
   useEffect(() => {
-    const canvas = document.getElementById("work-space-three-d-canvas");
+    const canvas = document.getElementById("real-time-vis-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {
@@ -304,22 +291,6 @@ export const DraggableWidget = ({
 
   return (
     <>
-      {draggingIndex !== null && hoverIndex === index && (
-        <div
-          className="widget-placeholder"
-          style={{
-            width: ["top", "bottom"].includes(widget.panel)
-              ? `calc(${canvasDimensions.width}px / 6)`
-              : undefined,
-            height: ["left", "right"].includes(widget.panel)
-              ? `calc(${canvasDimensions.height - 15}px / 4)`
-              : undefined,
-          }}
-        >
-          Drop Here
-        </div>
-      )}
-
       <div
         draggable
         key={widget.id}
@@ -331,7 +302,6 @@ export const DraggableWidget = ({
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
-        onDragEnd={handleDragEnd}
         style={{
           width: ["top", "bottom"].includes(widget.panel)
             ? `calc(${canvasDimensions.width}px / 6)`
@@ -343,6 +313,7 @@ export const DraggableWidget = ({
         ref={chartWidget}
         onClick={() => {
           setSelectedChartId(widget);
+          console.log("click");
         }}
       >
         {/* Kebab Icon */}
diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx
index c95ce13..c1eeefc 100644
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -56,6 +56,7 @@ const Panel: React.FC<PanelProps> = ({
   setZonesData,
   waitingPanels,
 }) => {
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
@@ -68,12 +69,9 @@ const Panel: React.FC<PanelProps> = ({
     height: 0,
   });
 
-  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
-  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
-
   // Track canvas dimensions
   useEffect(() => {
-    const canvas = document.getElementById("work-space-three-d-canvas");
+    const canvas = document.getElementById("real-time-vis-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {
@@ -185,7 +183,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Add widget to panel
   const addWidgetToPanel = async (asset: any, panel: Side) => {
-    const email = localStorage.getItem("email") ?? "";
+    const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     const newWidget = {
@@ -304,14 +302,13 @@ const Panel: React.FC<PanelProps> = ({
         >
           <div
             className={`panel-content
-            ${waitingPanels === side ? `${side}-closing` : ""}
-            ${
-              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
-              waitingPanels !== side
-                ? `${side}-opening`
-                : ""
-            }
-          ${isPlaying ? "fullScreen" : ""}`}
+  ${waitingPanels === side ? `${side}-closing` : ""}
+  ${
+    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+      ? `${side}-opening`
+      : ""
+  }
+  ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
@@ -322,7 +319,7 @@ const Panel: React.FC<PanelProps> = ({
             }}
           >
             {selectedZone.widgets
-              .filter((w) => w.panel === "top")
+              .filter((w) => w.panel === side)
               .map((widget, index) => (
                 <DraggableWidget
                   hiddenPanels={hiddenPanels}
@@ -332,15 +329,10 @@ const Panel: React.FC<PanelProps> = ({
                   onReorder={(fromIndex, toIndex) =>
                     handleReorder(fromIndex, toIndex, side)
                   }
-                  side={side}
                   openKebabId={openKebabId}
                   setOpenKebabId={setOpenKebabId}
                   selectedZone={selectedZone}
                   setSelectedZone={setSelectedZone}
-                  draggingIndex={draggingIndex}
-                  setDraggingIndex={setDraggingIndex}
-                  hoverIndex={hoverIndex}
-                  setHoverIndex={setHoverIndex}
                 />
               ))}
           </div>
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
index 73a2445..b4237f2 100644
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -46,7 +46,7 @@
 
 
         width: calc(25% - 14px) !important;
-        height: auto !important;
+        height: 100%;
         border-radius: #{$border-radius-xlarge};
         padding: 12px;
         box-shadow: 0px 2px 10.5px 0px #0000000d;
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 5e7563a..6e1889e 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -42,18 +42,22 @@
       min-width: 32px;
       border-radius: #{$border-radius-large};
       position: relative;
+
       .tooltip {
         top: 6px;
         right: -168px;
+
         &::after {
           left: 0px;
           bottom: 50%;
         }
       }
+
       &:hover {
         outline: 1px solid var(--border-color);
         outline-offset: -1px;
         background: var(--background-color-solid);
+
         .tooltip {
           opacity: 1;
           transform: translateX(2px);
@@ -81,6 +85,7 @@
 
   .sidebar-left-container {
     min-height: 50vh;
+    max-width: 100%;
     padding-bottom: 4px;
     position: relative;
     display: flex;
@@ -391,6 +396,7 @@
     .tooltip {
       top: 6px;
       right: calc(100% + 6px);
+
       &::after {
         left: 100%;
         bottom: 50%;
@@ -411,10 +417,12 @@
 
       &:hover {
         outline-color: var(--border-color-accent);
+
         svg {
           transition: all 0.2s;
           scale: 1.1;
         }
+
         .tooltip {
           opacity: 1;
           transform: translateX(-2px);
@@ -425,10 +433,12 @@
     .active {
       background: var(--background-color-accent);
       outline: none;
+
       &:hover {
         svg {
           scale: 1;
         }
+
         background: var(--background-color-accent);
       }
     }
@@ -1297,10 +1307,12 @@
 
         &:hover {
           outline: 1px solid var(--border-color-accent);
+
           img {
             transition: all 0.2s;
             scale: 1.3;
           }
+
           &::after {
             top: 80px;
             right: 0;
@@ -1411,6 +1423,7 @@
           .asset-name {
             opacity: 1;
           }
+
           .asset-image {
             scale: 1.2;
           }
@@ -1424,11 +1437,9 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(
-            0deg,
-            rgba(37, 24, 51, 0) 0%,
-            rgba(52, 41, 61, 0.5) 100%
-          );
+          background: linear-gradient(0deg,
+              rgba(37, 24, 51, 0) 0%,
+              rgba(52, 41, 61, 0.5) 100%);
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -1455,10 +1466,12 @@
 
 .skeleton-wrapper {
   display: flex;
+
   .asset-name {
     width: 40%;
     height: 10px;
   }
+
   .asset {
     width: 100%;
     height: 100%;
@@ -1467,11 +1480,26 @@
 
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
-  height: calc(50vh + 150px);
+  height: calc(54vh + 150px);
   transition: height 0.2s ease-in-out;
+  .sidebar-left-container {
+    height: 100%;
+    .sidebar-left-content-container{
+      max-height: 80%;
+      .widget-left-sideBar{
+        height: 80%;
+        .widget2D.widgets-wrapper{
+
+          min-height: 50vh;
+          height: 60%;
+
+        }
+      }
+    }
+  }
 }
 
 .sidebar-left-wrapper.closed,
 .sidebar-right-wrapper.closed {
   height: 52px;
-}
+}
\ No newline at end of file