diff --git a/frontend/src/AppBuilder/AppCanvas/useCanvasDropHandler.js b/frontend/src/AppBuilder/AppCanvas/useCanvasDropHandler.js
index b17bfc3880..8dcb595f86 100644
--- a/frontend/src/AppBuilder/AppCanvas/useCanvasDropHandler.js
+++ b/frontend/src/AppBuilder/AppCanvas/useCanvasDropHandler.js
@@ -2,7 +2,11 @@ import useStore from '@/AppBuilder/_stores/store';
 import { useGridStore } from '@/_stores/gridStore';
 import { shallow } from 'zustand/shallow';
 import { noop } from 'lodash';
-import { addChildrenWidgetsToParent, addNewWidgetToTheEditor } from '../AppCanvas/appCanvasUtils';
+import {
+  addChildrenWidgetsToParent,
+  addNewWidgetToTheEditor,
+  addDefaultButtonIdToForm,
+} from '../AppCanvas/appCanvasUtils';
 import { WIDGETS_WITH_DEFAULT_CHILDREN } from '../AppCanvas/appCanvasConstants';
 import { RIGHT_SIDE_BAR_TAB } from '../RightSideBar/rightSidebarConstants';
 import { isPDFSupported } from '@/_helpers/appUtils';
@@ -21,7 +25,7 @@ export const useCanvasDropHandler = ({ appType }) => {
   const currentLayout = useStore((state) => state.currentLayout, shallow);
   const setCurrentDragCanvasId = useGridStore((state) => state.actions.setCurrentDragCanvasId);
   const { deactivateGhost } = useGhostMoveable();
-  const handleDrop = ({ componentType: draggedComponentType, component }, monitor, canvasId) => {
+  const handleDrop = async ({ componentType: draggedComponentType, component }, monitor, canvasId) => {
     const realCanvasRef =
       !canvasId || canvasId === 'canvas'
         ? document.getElementById(`real-canvas`)
@@ -61,8 +65,10 @@ export const useCanvasDropHandler = ({ appType }) => {
         }
       : undefined;
 
+    let addedComponent;
+
     if (WIDGETS_WITH_DEFAULT_CHILDREN.includes(draggedComponentType)) {
-      const parentComponent = addNewWidgetToTheEditor(
+      let parentComponent = addNewWidgetToTheEditor(
         draggedComponentType,
         monitor,
         currentLayout,
@@ -71,9 +77,11 @@ export const useCanvasDropHandler = ({ appType }) => {
         moduleInfo
       );
       const childComponents = addChildrenWidgetsToParent(draggedComponentType, parentComponent?.id, currentLayout);
-      const newComponents = [parentComponent, ...childComponents];
-      addComponentToCurrentPage(newComponents);
-      setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+      if (draggedComponentType === 'Form') {
+        parentComponent = addDefaultButtonIdToForm(parentComponent, childComponents);
+      }
+      addedComponent = [parentComponent, ...childComponents];
+      await addComponentToCurrentPage(addedComponent);
     } else {
       const newComponent = addNewWidgetToTheEditor(
         draggedComponentType,
@@ -83,8 +91,29 @@ export const useCanvasDropHandler = ({ appType }) => {
         canvasId,
         moduleInfo
       );
-      addComponentToCurrentPage([newComponent]);
-      setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+      addedComponent = [newComponent];
+      await addComponentToCurrentPage(addedComponent);
+    }
+
+    setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+
+    const canvas = document.querySelector('.canvas-container');
+    const sidebar = document.querySelector('.editor-sidebar');
+    const droppedElem = document.getElementById(addedComponent?.[0]?.id);
+
+    if (!canvas || !sidebar || !droppedElem) return;
+
+    const droppedRect = droppedElem.getBoundingClientRect();
+    const sidebarRect = sidebar.getBoundingClientRect();
+
+    const isOverlapping = droppedRect.right > sidebarRect.left && droppedRect.left < sidebarRect.right;
+
+    if (isOverlapping) {
+      const overlap = droppedRect.right - sidebarRect.left;
+      canvas.scrollTo({
+        left: canvas.scrollLeft + overlap,
+        behavior: 'smooth',
+      });
     }
     // Reset canvas ID when dropping
     setCurrentDragCanvasId(null);