diff --git a/app/client/src/components/editorComponents/Dropzone.tsx b/app/client/src/components/editorComponents/Dropzone.tsx
index 8f19f2f569..2843ceacf7 100644
--- a/app/client/src/components/editorComponents/Dropzone.tsx
+++ b/app/client/src/components/editorComponents/Dropzone.tsx
@@ -11,14 +11,26 @@ const SPRING_CONFIG = {
   friction: 0,
   tension: 999,
 };
-const DropZoneWrapper = styled.div<{ width: number; height: number }>`
+const DropZoneWrapper = styled.div<{
+  width: number;
+  height: number;
+  candrop: boolean;
+}>`
   width: ${props => props.width}px;
   height: ${[props => props.height]}px;
   position: absolute;
-  background: ${IntentColors.success};
+  background: ${props => (props.candrop ? IntentColors.success : "#333")};
+  ${props =>
+    !props.candrop
+      ? `
+  background-image: linear-gradient(45deg, #EB2121 8.33%, #33322A 8.33%, #33322A 50%, #EB2121 50%, #EB2121 58.33%, #33322A 58.33%, #33322A 100%);
+  background-size: 16.97px 16.97px;
+  `
+      : ""}
   border: 1px dashed ${props => props.theme.colors.textAnchor};
   will-change: transform;
   opacity: 0.6;
+  transition: visibility 0s 2s, opacity 2s linear;
   z-index: 1;
 `;
 
@@ -105,6 +117,7 @@ export const DropZone = forwardRef(
           ref={ref}
           width={props.width * props.parentColumnWidth}
           height={props.height * props.parentRowHeight}
+          candrop={props.canDrop}
           style={{
             transform: interpolate(
               [X, Y],