diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
index 36769ffe17..669c4ffa1d 100644
--- a/frontend/src/Editor/ConfigHandle.jsx
+++ b/frontend/src/Editor/ConfigHandle.jsx
@@ -56,7 +56,7 @@ export const ConfigHandle = function ConfigHandle({
               role="button"
               height="12"
               draggable="false"
-              onClick={() => removeComponent({ id })}
+              onClick={() => removeComponent(id)}
               data-cy={`${component.name.toLowerCase()}-delete-button`}
               className="delete-icon"
             />
diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index df2bd818dd..22b0aab833 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -768,7 +768,7 @@ const EditorComponent = (props) => {
         draft.homePageId = newDefinition.homePageId;
       }
 
-      if (opts?.generalAppDefinitionChanged || opts?.globalSettings) {
+      if (opts?.generalAppDefinitionChanged || opts?.globalSettings || isEmpty(opts)) {
         Object.assign(draft, newDefinition);
       }
     });
@@ -952,20 +952,20 @@ const EditorComponent = (props) => {
     // }
   };
 
-  const removeComponent = (component) => {
+  const removeComponent = (componentId) => {
     if (!props.isVersionReleased) {
       let newDefinition = cloneDeep(appDefinition);
       // Delete child components when parent is deleted
 
       let childComponents = [];
 
-      if (newDefinition.pages[currentPageId].components?.[component.id].component.component === 'Tabs') {
+      if (newDefinition.pages[currentPageId].components?.[componentId].component.component === 'Tabs') {
         childComponents = Object.keys(newDefinition.pages[currentPageId].components).filter((key) =>
-          newDefinition.pages[currentPageId].components[key].parent?.startsWith(component.id)
+          newDefinition.pages[currentPageId].components[key].parent?.startsWith(componentId)
         );
       } else {
         childComponents = Object.keys(newDefinition.pages[currentPageId].components).filter(
-          (key) => newDefinition.pages[currentPageId].components[key].parent === component.id
+          (key) => newDefinition.pages[currentPageId].components[key].parent === componentId
         );
       }
 
@@ -973,7 +973,7 @@ const EditorComponent = (props) => {
         delete newDefinition.pages[currentPageId].components[componentId];
       });
 
-      delete newDefinition.pages[currentPageId].components[component.id];
+      delete newDefinition.pages[currentPageId].components[componentId];
       const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
       if (platform.toLowerCase().indexOf('mac') > -1) {
         toast('Component deleted! (⌘ + Z to undo)', {
@@ -985,7 +985,7 @@ const EditorComponent = (props) => {
         });
       }
       appDefinitionChanged(newDefinition, {
-        skipAutoSave: props.isVersionReleased,
+        componentDefinitionChanged: true,
       });
       handleInspectorView();
     } else {
@@ -1049,10 +1049,10 @@ const EditorComponent = (props) => {
   };
 
   const removeComponents = () => {
-    if (!props.isVersionReleased && selectedComponents?.length > 1) {
+    if (!props.isVersionReleased && selectedComponents?.length >= 1) {
       let newDefinition = cloneDeep(appDefinition);
 
-      removeSelectedComponent(currentPageId, newDefinition, selectedComponents);
+      removeSelectedComponent(currentPageId, newDefinition, selectedComponents, appDefinitionChanged);
       const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
       if (platform.toLowerCase().indexOf('mac') > -1) {
         toast('Selected components deleted! (⌘ + Z to undo)', {
@@ -1063,9 +1063,7 @@ const EditorComponent = (props) => {
           icon: '🗑️',
         });
       }
-      appDefinitionChanged(newDefinition, {
-        skipAutoSave: props.isVersionReleased,
-      });
+      // appDefinitionChanged(newDefinition);
       handleInspectorView();
     } else if (props.isVersionReleased) {
       useAppVersionStore.getState().actions.enableReleasedVersionPopupState();
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 06fa159639..c3c21b7cd5 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1565,7 +1565,7 @@ export function snapToGrid(canvasWidth, x, y) {
   const snappedY = Math.round(y / 10) * 10;
   return [snappedX, snappedY];
 }
-export const removeSelectedComponent = (pageId, newDefinition, selectedComponents) => {
+export const removeSelectedComponent = (pageId, newDefinition, selectedComponents, updateAppDefinition) => {
   selectedComponents.forEach((component) => {
     let childComponents = [];
 
@@ -1585,6 +1585,8 @@ export const removeSelectedComponent = (pageId, newDefinition, selectedComponent
 
     delete newDefinition.pages[pageId].components[component.id];
   });
+
+  updateAppDefinition(newDefinition, { componentDefinitionChanged: true });
 };
 
 const getSelectedText = () => {