diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 34b6872f51..d12a6a842e 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -26,7 +26,7 @@ export type Theme = {
 export const theme: Theme = {
   radii: [0, 4, 8, 10, 20, 50],
   fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64],
-  spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
+  spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 30],
   fontWeights: [0, 400, 500, 700],
   colors: {
     primary: Colors.GREEN,
diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx
index 11892cfbfb..f299d01ac1 100644
--- a/app/client/src/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/editorComponents/DraggableComponent.tsx
@@ -51,8 +51,9 @@ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
 
 type DraggableComponentProps = WidgetProps & ContainerProps;
 
-export const ResizingContext: Context<{
+export const RnDContext: Context<{
   setIsResizing?: Function;
+  isDragging?: boolean;
 }> = createContext({});
 
 const DraggableComponent = (props: DraggableComponentProps) => {
@@ -70,13 +71,16 @@ const DraggableComponent = (props: DraggableComponentProps) => {
     collect: (monitor: DragSourceMonitor) => ({
       isDragging: monitor.isDragging(),
     }),
+    canDrag: () => {
+      return !isResizing && !!isFocused && isFocused === props.widgetId;
+    },
   });
 
   return (
-    <ResizingContext.Provider value={{ setIsResizing }}>
+    <RnDContext.Provider value={{ setIsResizing, isDragging }}>
       <DragPreviewImage src={blankImage} connect={preview} />
       <DraggableWrapper
-        ref={preview}
+        ref={drag}
         onClick={(e: any) => {
           if (setFocus) {
             setFocus(props.widgetId);
@@ -108,7 +112,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
         </DeleteControl>
         {props.children}
       </DraggableWrapper>
-    </ResizingContext.Provider>
+    </RnDContext.Provider>
   );
 };
 
diff --git a/app/client/src/editorComponents/ResizableComponent.tsx b/app/client/src/editorComponents/ResizableComponent.tsx
index 1ceaab6679..dbb9ff6e70 100644
--- a/app/client/src/editorComponents/ResizableComponent.tsx
+++ b/app/client/src/editorComponents/ResizableComponent.tsx
@@ -4,7 +4,7 @@ import { Rnd } from "react-rnd";
 import { XYCoord } from "react-dnd";
 import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
 import { ContainerProps, ParentBoundsContext } from "./ContainerComponent";
-import { ResizingContext } from "./DraggableComponent";
+import { RnDContext } from "./DraggableComponent";
 import { WidgetFunctionsContext } from "../pages/Editor";
 
 export type ResizableComponentProps = WidgetProps & ContainerProps;
@@ -37,7 +37,7 @@ const ResizableContainer = styled(Rnd)`
 `;
 
 export const ResizableComponent = (props: ResizableComponentProps) => {
-  const { setIsResizing } = useContext(ResizingContext);
+  const { setIsResizing, isDragging } = useContext(RnDContext);
   const { boundingParent } = useContext(ParentBoundsContext);
   const { updateWidget } = useContext(WidgetFunctionsContext);
   let bounds = "body";
@@ -89,13 +89,13 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
       resizeGrid={[props.parentColumnSpace, props.parentRowSpace]}
       bounds={bounds}
       enableResizing={{
-        top: true,
-        right: true,
-        bottom: true,
-        left: true,
+        top: true && !isDragging,
+        right: true && !isDragging,
+        bottom: true && !isDragging,
+        left: true && !isDragging,
         topRight: false,
         topLeft: false,
-        bottomRight: true,
+        bottomRight: true && !isDragging,
         bottomLeft: false,
       }}
     >