diff --git a/frontend/src/Editor/BoxDragPreview.jsx b/frontend/src/Editor/BoxDragPreview.jsx
index 81c88a447f..277cc84315 100644
--- a/frontend/src/Editor/BoxDragPreview.jsx
+++ b/frontend/src/Editor/BoxDragPreview.jsx
@@ -29,7 +29,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, canvasWidth }
   return (
     <div
       className="resizer-active draggable-box"
-      style={{ height, width: (width * canvasWidth) / 24, border: 'solid 1px rgb(70, 165, 253)', padding: '2px' }}
+      style={{ height, width: (width * canvasWidth) / 43, border: 'solid 1px rgb(70, 165, 253)', padding: '2px' }}
     >
       <div
         style={{
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 3a4f30fd85..187da98c32 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1634,9 +1634,7 @@ export const addNewWidgetToTheEditor = (
   const componentData = _.cloneDeep(componentMetaData);
   const noOfGrid = useGridStore.getState().noOfGrid;
 
-  const defaultWidth = isInSubContainer
-    ? (componentMetaData.defaultSize.width * 100) / noOfGrid
-    : componentMetaData.defaultSize.width;
+  const defaultWidth = componentMetaData.defaultSize.width;
   const defaultHeight = componentMetaData.defaultSize.height;
 
   componentData.name = computeComponentName(componentData.component, currentComponents);