diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 0cf7b97c66..93f74e221b 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -289,7 +289,7 @@ export const Container = ({
     () => ({
       accept: [ItemTypes.BOX, ItemTypes.COMMENT],
       async drop(item, monitor) {
-        if (item.currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
+        if (item.currentLayout === 'mobile' && item.autoComputeLayout) {
           turnOffAutoLayout();
           return false;
         }
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index a364923fb3..87d63fa406 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -110,6 +110,7 @@ export const DraggableBox = React.memo(
       selectionInProgress,
       isSelectedComponent,
       isMultipleComponentsSelected,
+      autoComputeLayout,
     } = useEditorStore(
       (state) => ({
         currentLayout: state?.currentLayout,
@@ -119,6 +120,7 @@ export const DraggableBox = React.memo(
         isSelectedComponent:
           mode === 'edit' ? state?.selectedComponents?.some((component) => component?.id === id) : false,
         isMultipleComponentsSelected: state?.selectedComponents?.length > 1 ? true : false,
+        autoComputeLayout: state?.appDefinition?.pages?.[state?.currentPageId]?.autoComputeLayout,
       }),
       shallow
     );
@@ -136,12 +138,13 @@ export const DraggableBox = React.memo(
           layouts,
           canvasWidth,
           currentLayout,
+          autoComputeLayout,
         },
         collect: (monitor) => ({
           isDragging: monitor.isDragging(),
         }),
       }),
-      [id, title, component, index, currentLayout, zoomLevel, parent, layouts, canvasWidth]
+      [id, title, component, index, currentLayout, zoomLevel, parent, layouts, canvasWidth, autoComputeLayout]
     );
 
     useEffect(() => {
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 5d59636231..be336c6b53 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1695,7 +1695,10 @@ const EditorComponent = (props) => {
   };
 
   async function turnOffAutoLayout() {
-    const result = await confirm('Turn off Auto Layout ?', 'Turn off Auto Layout');
+    const result = await confirm(
+      'You have to disable auto alignment to manually adjust mobile components. Once disabled, the mobile layout won’t automatically align with desktop changes',
+      'Turn off Auto Layout'
+    );
     if (result) {
       turnOffAutoComputeLayout({ pageId: currentPageId, autoComputeLayout: false });
     }
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
index a5602975bc..68ee9b3b19 100644
--- a/frontend/src/Editor/SubContainer.jsx
+++ b/frontend/src/Editor/SubContainer.jsx
@@ -324,7 +324,7 @@ export const SubContainer = ({
     () => ({
       accept: ItemTypes.BOX,
       drop(item, monitor) {
-        if (item.currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
+        if (item.currentLayout === 'mobile' && item.autoComputeLayout) {
           turnOffAutoLayout();
           return false;
         }