diff --git a/.version b/.version
index 9e29315acb..895eb8a3b2 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-2.50.0
+2.50.1
diff --git a/frontend/.version b/frontend/.version
index 9e29315acb..895eb8a3b2 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-2.50.0
+2.50.1
diff --git a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
index 507a15a550..85a06ab7ee 100644
--- a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
@@ -41,6 +41,7 @@ const MultiLineCodeEditor = (props) => {
     portalProps,
     showPreview,
     paramLabel = '',
+    delayOnChange = true, // Added this prop to immediately update the onBlurUpdate callback
   } = props;
 
   const [currentValue, setCurrentValue] = React.useState(() => initialValue);
@@ -63,6 +64,7 @@ const MultiLineCodeEditor = (props) => {
   }, []);
 
   const handleOnBlur = () => {
+    if (!delayOnChange) return onChange(currentValue);
     setTimeout(() => {
       onChange(currentValue);
     }, 100);
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index 37a7dbec17..b3321f2e09 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -467,6 +467,12 @@ export default function DragContainer({
           const box = boxes.find((box) => box.id === e.target.id);
           let isDragOnTable = false;
 
+          /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works. 
+          Also user dont need to drag an calender from using popup */
+          if (hasParentWithClass(e.inputEvent.target, 'react-datepicker-popper')) {
+            return false;
+          }
+
           /* Checking if the dragged elemenent is a table. If its a table drag is disabled since it will affect column resizing and reordering */
           if (box?.component?.component === 'Table') {
             const tableElem = e.target.querySelector('.jet-data-table');
@@ -842,3 +848,16 @@ function getOffset(childElement, grandparentElement) {
 
   return { x: offsetX, y: offsetY };
 }
+
+function hasParentWithClass(child, className) {
+  let currentElement = child;
+
+  while (currentElement !== null && currentElement !== document.documentElement) {
+    if (currentElement.classList.contains(className)) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  return false;
+}
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index efa476d1e6..ec46785fce 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1507,6 +1507,12 @@ const EditorComponent = (props) => {
         isUpdatingEditorStateInProcess: false,
         appDefinition: newAppDefinition,
       });
+    } else {
+      // Setting the canvas background to the editor store
+      setCanvasBackground({
+        backgroundFxQuery: globalSettings?.backgroundFxQuery,
+        canvasBackgroundColor: globalSettings?.canvasBackgroundColor,
+      });
     }
 
     if (Array.isArray(entityReferencesInComponentDefinitions) && entityReferencesInComponentDefinitions?.length > 0) {
diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index 4e22434773..88917301ca 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -425,21 +425,31 @@ class TableComponent extends React.Component {
     ...draggableStyle,
   });
 
-  removeColumn = (index, ref) => {
-    const columns = this.props.component.component.definition.properties.columns;
-    const newValue = columns.value;
-    const removedColumns = newValue.splice(index, 1);
-    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
+  removeColumn = async (index, ref) => {
+    try {
+      const columns = this.props.component.component.definition.properties.columns;
+      const newValue = columns.value;
+      const removedColumns = newValue.splice(index, 1);
+      await this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
 
-    const existingcolumnDeletionHistory =
-      this.props.component.component.definition.properties.columnDeletionHistory?.value ?? [];
-    const newcolumnDeletionHistory = [
-      ...existingcolumnDeletionHistory,
-      ...removedColumns.map((column) => column.key || column.name),
-    ];
-    this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties', true);
+      const existingColumnDeletionHistory =
+        this.props.component.component.definition.properties.columnDeletionHistory?.value ?? [];
+      const newColumnDeletionHistory = [
+        ...existingColumnDeletionHistory,
+        ...removedColumns.map((column) => column.key || column.name),
+      ];
+      await this.props.paramUpdated(
+        { name: 'columnDeletionHistory' },
+        'value',
+        newColumnDeletionHistory,
+        'properties',
+        true
+      );
 
-    this.deleteEvents(ref, 'table_column');
+      await this.deleteEvents(ref, 'table_column');
+    } catch (error) {
+      console.error('Error updating column:', error);
+    }
   };
 
   reorderColumns = (startIndex, endIndex) => {
diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
index b2872ec204..70113ef7fd 100644
--- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
@@ -218,6 +218,7 @@ return data.filter(row => row.amount > 1000);
               cyLabel={'transformation-input'}
               callgpt={noop}
               isCopilotEnabled={false}
+              delayOnChange={false}
             />
           </div>
         )}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
index 5eb8f7a6d5..da23214ce1 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
@@ -36,6 +36,7 @@ const Runjs = (props) => {
         }}
         componentName="Runjs"
         cyLabel={`runjs`}
+        delayOnChange={false}
       />
     </Card>
   );
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
index 563c1fe812..b3f8304b16 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
@@ -26,6 +26,7 @@ export class Runpy extends React.Component {
           onChange={(value) => changeOption(this, 'code', value)}
           componentName="Runpy"
           cyLabel={`runpy`}
+          delayOnChange={false}
         />
       </div>
     );
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
index 0c99b9291a..2a2bec4ec9 100644
--- a/frontend/src/Editor/SubContainer.jsx
+++ b/frontend/src/Editor/SubContainer.jsx
@@ -80,7 +80,7 @@ export const SubContainer = ({
       setContainerCanvasWidth(canvasWidth);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parentRef, getContainerCanvasWidth(), listmode]);
+  }, [parentRef, getContainerCanvasWidth(), listmode, parentComponent?.definition?.properties?.size?.value]); // Listen for changes to the modal size and update the subcontainer state with the new grid width.
 
   zoomLevel = zoomLevel || 1;
 
diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx
index e15715440b..fdba792bd0 100644
--- a/frontend/src/Editor/Viewer.jsx
+++ b/frontend/src/Editor/Viewer.jsx
@@ -165,6 +165,12 @@ class ViewerComponent extends React.Component {
         isUpdatingEditorStateInProcess: false,
         appDefinition: newAppDefinition,
       });
+    } else {
+      // Setting the canvas background to the editor store
+      useEditorStore.getState().actions.setCanvasBackground({
+        backgroundFxQuery: globalSettings?.backgroundFxQuery,
+        canvasBackgroundColor: globalSettings?.canvasBackgroundColor,
+      });
     }
 
     if (Array.isArray(entityReferencesInComponentDefinitions) && entityReferencesInComponentDefinitions?.length > 0) {
diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx
index 13971b9735..b8f6ef91f3 100644
--- a/frontend/src/_components/DynamicForm.jsx
+++ b/frontend/src/_components/DynamicForm.jsx
@@ -339,6 +339,7 @@ const DynamicForm = ({
           width,
           componentName: queryName ? `${queryName}::${key ?? ''}` : null,
           cyLabel: key ? `${String(key).toLocaleLowerCase().replace(/\s+/g, '-')}` : '',
+          delayOnChange: false,
         };
       case 'react-component-openapi-validator':
         return {
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 646570ad41..ba6df07e44 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -122,7 +122,7 @@ export function onComponentOptionsChanged(component, options, id) {
 
         const existingRef = lookUpTable.resolvedRefs?.get(lookUpTable.hints?.get(path));
 
-        if (typeof existingRef === 'function') return;
+        if (typeof existingRef === 'function') continue;
 
         const shouldUpdateRef = existingRef !== componentData[option[0]];
 
diff --git a/frontend/src/_helpers/editorHelpers.js b/frontend/src/_helpers/editorHelpers.js
index 6702d30f29..342f26b1fc 100644
--- a/frontend/src/_helpers/editorHelpers.js
+++ b/frontend/src/_helpers/editorHelpers.js
@@ -52,6 +52,7 @@ import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox';
 import { isPDFSupported } from '@/_helpers/appUtils';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
 import { useEditorStore } from '@/_stores/editorStore';
+import './requestIdleCallbackPolyfill';
 
 export function memoizeFunction(func) {
   const cache = new Map();
diff --git a/frontend/src/_helpers/requestIdleCallbackPolyfill.js b/frontend/src/_helpers/requestIdleCallbackPolyfill.js
new file mode 100644
index 0000000000..889223ace5
--- /dev/null
+++ b/frontend/src/_helpers/requestIdleCallbackPolyfill.js
@@ -0,0 +1,20 @@
+// Polyfill for window.requestIdleCallback to support Safari browser
+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function (cb) {
+    var start = Date.now();
+    return setTimeout(function () {
+      cb({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+  };
+
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function (id) {
+    clearTimeout(id);
+  };
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index 53aa4c0052..6239d752d8 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -264,7 +264,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => {
 
           if (doesActionsExist || doesColumnsExist) {
             const actions = _.toArray(metaDiff.definition[attribute]?.actions?.value) || [];
-            const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || [];
+            // const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || [];
 
             metaDiff.definition = {
               ...metaDiff.definition,
@@ -274,7 +274,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => {
                   value: actions,
                 },
                 columns: {
-                  value: columns,
+                  value: component.component?.definition?.properties?.columns?.value,
                 },
               },
             };
diff --git a/server/.version b/server/.version
index 9e29315acb..895eb8a3b2 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-2.50.0
+2.50.1