diff --git a/frontend/src/Editor/BoxDragPreview.jsx b/frontend/src/Editor/BoxDragPreview.jsx
index 4a765fada3..276741ffa0 100644
--- a/frontend/src/Editor/BoxDragPreview.jsx
+++ b/frontend/src/Editor/BoxDragPreview.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, memo } from 'react';
 
-export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout }) {
+export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout, styles }) {
   const [tickTock, setTickTock] = useState(false);
 
   useEffect(
@@ -26,7 +26,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout
     >
       <div
         style={{
-          background: '#438fd7',
+          background: styles?.backgroundColor,
           opacity: '0.7',
           height: '100%',
           width: '100%',
diff --git a/frontend/src/Editor/CustomDragLayer.jsx b/frontend/src/Editor/CustomDragLayer.jsx
index 5bb94bb01e..6bb662e82f 100644
--- a/frontend/src/Editor/CustomDragLayer.jsx
+++ b/frontend/src/Editor/CustomDragLayer.jsx
@@ -49,8 +49,14 @@ function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout)
 
   const transform = `translate(${x}px, ${y}px)`;
   return {
-    transform,
-    WebkitTransform: transform,
+    parent: {
+      transform,
+      WebkitTransform: transform,
+    },
+    item: {
+      backgroundColor:
+        x < realCanvasDelta || x + item.layouts[currentLayout].width > realCanvasBoundingRect.right ? 'red' : '#438fd7',
+    },
   };
 }
 export const CustomDragLayer = ({ currentLayout }) => {
@@ -62,10 +68,10 @@ export const CustomDragLayer = ({ currentLayout }) => {
     isDragging: monitor.isDragging(),
     delta: monitor.getDifferenceFromInitialOffset(),
   }));
-  function renderItem() {
+  function renderItem(styles) {
     switch (itemType) {
       case ItemTypes.BOX:
-        return <BoxDragPreview item={item} currentLayout={currentLayout} />;
+        return <BoxDragPreview item={item} currentLayout={currentLayout} styles={styles} />;
       default:
         return null;
     }
@@ -75,9 +81,11 @@ export const CustomDragLayer = ({ currentLayout }) => {
     return null;
   }
 
+  const boxStyles = getItemStyles(delta, item, initialOffset, currentOffset, currentLayout);
+
   return (
     <div style={layerStyles}>
-      <div style={getItemStyles(delta, item, initialOffset, currentOffset, currentLayout)}>{renderItem()}</div>
+      <div style={boxStyles['parent']}>{renderItem(boxStyles['item'])}</div>
     </div>
   );
 };