diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 796e5e358c..a216592721 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1200,6 +1200,7 @@ const EditorComponent = (props) => {
     for (const selectedComponent of selectedComponents) {
       let top = newComponents[selectedComponent.id].layouts[currentLayout].top;
       let left = newComponents[selectedComponent.id].layouts[currentLayout].left;
+      const width = newComponents[selectedComponent.id]?.layouts[currentLayout]?.width;
 
       switch (direction) {
         case 'ArrowLeft':
@@ -1216,6 +1217,10 @@ const EditorComponent = (props) => {
           break;
       }
 
+      if (left < 0 || top < 0 || left + width > noOfGrids) {
+        return;
+      }
+
       newComponents[selectedComponent.id].layouts[currentLayout].top = top;
       newComponents[selectedComponent.id].layouts[currentLayout].left = left;
     }