diff --git a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
index 1061521a66..8fdf36d54e 100644
--- a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 export const DragGhostWidget = ({ isDragging }) => {
+  console.log('frog');
   if (!isDragging) return '';
   return (
     <div
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 44f148a000..a133a74d3c 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -646,10 +646,12 @@ export default function Grid({ gridWidth, currentLayout }) {
               return id === e.target.id;
             });
             hideGridLines();
+            if (!e.lastEvent) {
+              return;
+            }
             let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
             let width = Math.round(e?.lastEvent?.width / _gridWidth) * _gridWidth;
             const height = Math.round(e?.lastEvent?.height / GRID_HEIGHT) * GRID_HEIGHT;
-
             const currentWidth = currentWidget.width * _gridWidth;
             const diffWidth = e.lastEvent?.width - currentWidth;
             const diffHeight = e.lastEvent?.height - currentWidget?.height;
@@ -872,7 +874,6 @@ export default function Grid({ gridWidth, currentLayout }) {
 
               left = dragged.left * sourcegridWidth;
               top = dragged.top;
-
               !isModalToCanvas ??
                 toast.error(`${dragged.widgetType} is not compatible as a child component of ${target.widgetType}`);
             }
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index 42343a9711..3c072e9d43 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -40,8 +40,16 @@ export const addNewWidgetToTheEditor = (componentType, eventMonitorObject, curre
   left = Math.round(left / gridWidth);
   // Adjust widget width based on the dropping canvas width
   const mainCanvasWidth = useGridStore.getState().subContainerWidths['canvas'];
-  const width = Math.round((defaultWidth * mainCanvasWidth) / gridWidth);
+  let width = Math.round((defaultWidth * mainCanvasWidth) / gridWidth);
+  console.log(width, gridWidth, 'width');
+  // Ensure minimum width
+  width = Math.max(width, 1);
 
+  // Adjust position and width if exceeding grid bounds
+  if (width + left > NO_OF_GRIDS) {
+    left = Math.max(0, NO_OF_GRIDS - width);
+    width = Math.min(width, NO_OF_GRIDS);
+  }
   if (currentLayout === 'mobile') {
     componentData.definition.others.showOnDesktop.value = `{{false}}`;
     componentData.definition.others.showOnMobile.value = `{{true}}`;
@@ -550,12 +558,21 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
     componentData.definition.others.showOnMobile.value = currentLayout === 'mobile' ? `{{true}}` : `{{false}}`;
 
     // Adjust width if parent changed
-    let width = component.layouts.desktop.width;
+    let width = component.layouts[currentLayout].width;
 
     if (targetParentId !== component.component?.parent) {
       const containerWidth = useGridStore.getState().subContainerWidths[targetParentId || 'canvas'];
       const oldContainerWidth = useGridStore.getState().subContainerWidths[component?.component?.parent || 'canvas'];
       width = Math.round((width * oldContainerWidth) / containerWidth);
+
+      // Ensure minimum width
+      width = Math.max(width, 1);
+
+      // Adjust position and width if exceeding grid bounds
+      if (width + component.layouts[currentLayout].left > NO_OF_GRIDS) {
+        component.layouts[currentLayout].left = Math.max(0, NO_OF_GRIDS - width);
+        width = Math.min(width, NO_OF_GRIDS);
+      }
     }
 
     component.layouts[currentLayout].width = width;
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
index 77274cd658..158d87787d 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
@@ -42,8 +42,9 @@ const CustomDragLayer = ({ size }) => {
   const canvasBounds = item?.canvasRef?.getBoundingClientRect();
   const height = size.height;
 
-  const width = (canvasWidth * size.width) / NO_OF_GRIDS;
+  const mainCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
 
+  const width = (mainCanvasWidth * size.width) / NO_OF_GRIDS;
   // Calculate position relative to the current canvas (parent or child)
   const left = currentOffset.x - (canvasBounds?.left || 0);
   const top = currentOffset.y - (canvasBounds?.top || 0);