diff --git a/src/common/storage.ts b/src/common/storage.ts
index e6f9f4e0..cd1f2bcd 100644
--- a/src/common/storage.ts
+++ b/src/common/storage.ts
@@ -58,6 +58,13 @@ export async function removeFromStorage<K extends keyof StorageKV>(key: K) {
 	await storage.removeItem(`local:${key}`)
 }
 
+export function watchStorage<K extends keyof StorageKV>(
+	key: K,
+	callback: (newValue: StorageKV[K] | null, oldValue: StorageKV[K] | null) => void
+) {
+	return storage.watch<StorageKV[K]>(`local:${key}`, callback)
+}
+
 export async function setWithExpiry<K extends keyof StorageKV>(
 	key: K,
 	value: StorageKV[K],
diff --git a/src/common/utils/call-event.ts b/src/common/utils/call-event.ts
index a9d933ee..8995c38b 100644
--- a/src/common/utils/call-event.ts
+++ b/src/common/utils/call-event.ts
@@ -83,6 +83,7 @@ export interface EventName {
 		| { instanceId?: string; widgetId?: string }
 		| null
 		| undefined
+	cancelWidgetDrag: null
 }
 
 export function callEvent<K extends keyof EventName>(eventName: K, data?: EventName[K]) {
diff --git a/src/context/free-widget.context.tsx b/src/context/free-widget.context.tsx
index e7160ced..183d0ee8 100644
--- a/src/context/free-widget.context.tsx
+++ b/src/context/free-widget.context.tsx
@@ -8,7 +8,7 @@ import {
 	useState,
 } from 'react'
 import Analytics from '@/analytics'
-import { setToStorage } from '@/common/storage'
+import { setToStorage, watchStorage } from '@/common/storage'
 import { playNativeToastSound, showToast } from '@/common/toast'
 import { translateError } from '@/common/utils/translate-error'
 import {
@@ -54,6 +54,12 @@ interface FreeWidgetContextType {
 	setSelectedInstanceId: (id: string | null) => void
 	resizeWidget: (instanceId: string, newSize: WidgetSize) => boolean
 	moveWidget: (instanceId: string, targetPosition: WidgetPosition) => boolean
+	startDragPreview: () => void
+	updateDragPreview: (instanceId: string, targetPosition: WidgetPosition) => void
+	endDragPreview: (
+		instanceId: string,
+		targetPosition: WidgetPosition | null
+	) => void
 	addWidget: (
 		id: string,
 		targetPosition?: WidgetPosition,
@@ -73,8 +79,22 @@ interface FreeWidgetContextType {
 
 export const FreeWidgetContext = createContext<FreeWidgetContextType | null>(null)
 
+function sanitizeLayout(layout: StoredWidget[], cols: number): StoredWidget[] {
+	if (validateLayout(layout, cols)) {
+		return layout
+	}
+
+	return (
+		resolveLayoutChange({
+			layout,
+			operation: 'responsive-reflow',
+			cols,
+		}) ?? layout
+	)
+}
+
 export function FreeWidgetProvider({ children }: { children: React.ReactNode }) {
-	const { isAuthenticated, isVip } = useAuth()
+	const { isAuthenticated, isVip, token } = useAuth()
 	const { canvasMode, setCanvasMode, selectedInstanceId, setSelectedInstanceId } =
 		useAppearance()
 
@@ -91,24 +111,37 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 	const containerWidthRef = useRef<number>(1200)
 	const syncTimerRef = useRef<NodeJS.Timeout | null>(null)
 	const hasFetchedServerRef = useRef<boolean>(false)
+	const hasLocalEditRef = useRef<boolean>(false)
+	const prevTokenRef = useRef<string | null | undefined>(undefined)
+	const lastPersistedSignatureRef = useRef<string | null>(null)
+	const runtimeLayoutRef = useRef<StoredWidget[]>([])
+	const dragBaseLayoutRef = useRef<StoredWidget[] | null>(null)
+
+	useEffect(() => {
+		runtimeLayoutRef.current = runtimeLayout
+	}, [runtimeLayout])
 
 	const persistLayout = useCallback((layoutToPersist: StoredWidget[]) => {
+		lastPersistedSignatureRef.current = JSON.stringify(layoutToPersist)
 		setToStorage('storedWidgets', layoutToPersist)
 	}, [])
 
 	const reflowForColumns = useCallback(
 		(baseLayout: StoredWidget[], targetCols: number) => {
+			const safeLayout = sanitizeLayout(baseLayout, targetCols)
+
 			if (targetCols >= DEFAULT_COLS) {
-				return baseLayout
+				return safeLayout
 			}
 
 			const reflowed = resolveLayoutChange({
-				layout: baseLayout,
+				layout: safeLayout,
 				operation: 'responsive-reflow',
 				cols: targetCols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
-			return reflowed || baseLayout
+			return reflowed || safeLayout
 		},
 		[]
 	)
@@ -156,31 +189,62 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 		[reflowForColumns]
 	)
 
-	useEffect(() => {
-		async function loadFromLocalStorage() {
-			try {
-				const localLayout = await migrateWidgetLayoutIfNeeded()
-				const finalLayout =
-					localLayout && localLayout.length > 0
-						? localLayout
-						: DEFAULT_WIDGET_LAYOUT
-				savedLayoutRef.current = finalLayout
-				setSavedLayout(finalLayout)
-				const reflowed = reflowForColumns(finalLayout, colsRef.current)
-				setRuntimeLayout(reflowed)
-			} catch (err) {
-				console.error('Failed to load local widget layout', err)
-				savedLayoutRef.current = DEFAULT_WIDGET_LAYOUT
-				setSavedLayout(DEFAULT_WIDGET_LAYOUT)
-				setRuntimeLayout(DEFAULT_WIDGET_LAYOUT)
-			} finally {
-				setIsLoaded(true)
-			}
+	const loadFromLocalStorage = useCallback(async () => {
+		try {
+			const localLayout = await migrateWidgetLayoutIfNeeded()
+			const finalLayout = sanitizeLayout(
+				localLayout && localLayout.length > 0
+					? localLayout
+					: DEFAULT_WIDGET_LAYOUT,
+				DEFAULT_COLS
+			)
+			savedLayoutRef.current = finalLayout
+			setSavedLayout(finalLayout)
+			const reflowed = reflowForColumns(finalLayout, colsRef.current)
+			setRuntimeLayout(reflowed)
+		} catch (err) {
+			console.error('Failed to load local widget layout', err)
+			savedLayoutRef.current = DEFAULT_WIDGET_LAYOUT
+			setSavedLayout(DEFAULT_WIDGET_LAYOUT)
+			setRuntimeLayout(DEFAULT_WIDGET_LAYOUT)
+		} finally {
+			setIsLoaded(true)
 		}
+	}, [reflowForColumns])
 
+	useEffect(() => {
 		loadFromLocalStorage()
+	}, [loadFromLocalStorage])
+
+	useEffect(() => {
+		const unwatch = watchStorage('storedWidgets', (newValue) => {
+			if (!newValue || newValue.length === 0) return
+			if (JSON.stringify(newValue) === lastPersistedSignatureRef.current) return
+
+			savedLayoutRef.current = newValue
+			setSavedLayout(newValue)
+			setRuntimeLayout(reflowForColumns(newValue, colsRef.current))
+		})
+		return () => unwatch()
 	}, [reflowForColumns])
 
+	useEffect(() => {
+		if (prevTokenRef.current === undefined) {
+			prevTokenRef.current = token
+			return
+		}
+		if (prevTokenRef.current === token) return
+		prevTokenRef.current = token
+
+		if (syncTimerRef.current) {
+			clearTimeout(syncTimerRef.current)
+			syncTimerRef.current = null
+		}
+		hasFetchedServerRef.current = false
+		hasLocalEditRef.current = false
+		loadFromLocalStorage()
+	}, [token, loadFromLocalStorage])
+
 	useEffect(() => {
 		if (!isAuthenticated || hasFetchedServerRef.current) return
 		hasFetchedServerRef.current = true
@@ -194,15 +258,22 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				}
 
 				if (serverWidgets.length > 0) {
-					const fromSrv: StoredWidget[] = serverWidgets.map((sw) => ({
-						id: sw.widgetKey as any,
-						instanceId: sw.instanceId,
-						widgetId: sw.instanceId,
-						position: { col: sw.col, row: sw.row },
-						size: { w: sw.width, h: sw.height },
-						meta: sw.meta,
-						disabled: sw.disabled,
-					}))
+					if (hasLocalEditRef.current) {
+						return
+					}
+
+					const fromSrv: StoredWidget[] = sanitizeLayout(
+						serverWidgets.map((sw) => ({
+							id: sw.widgetKey as any,
+							instanceId: sw.instanceId,
+							widgetId: sw.instanceId,
+							position: { col: sw.col, row: sw.row },
+							size: { w: sw.width, h: sw.height },
+							meta: sw.meta,
+							disabled: sw.disabled,
+						})),
+						DEFAULT_COLS
+					)
 
 					savedLayoutRef.current = fromSrv
 					setSavedLayout(fromSrv)
@@ -293,18 +364,57 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 						meta: w.meta,
 						disabled: w.disabled ?? false,
 					})),
-				}).catch(() => {})
+				})
+					.then((synced) => {
+						if (!synced || synced.length === 0) return
+
+						const idMap = new Map<string, string>()
+						currentLayout.forEach((w, index) => {
+							const isValidId =
+								typeof w.instanceId === 'string' &&
+								/^[0-9a-fA-F]{24}$/.test(w.instanceId)
+							if (isValidId) return
+							const matching =
+								synced.find((s) => s.widgetKey === w.id) || synced[index]
+							if (matching?.instanceId && matching.instanceId !== w.instanceId) {
+								idMap.set(w.instanceId, matching.instanceId)
+							}
+						})
+
+						if (idMap.size === 0) return
+
+						const applyIdMap = (list: StoredWidget[]) =>
+							list.map((w) =>
+								idMap.has(w.instanceId)
+									? {
+											...w,
+											instanceId: idMap.get(w.instanceId) as string,
+											widgetId: idMap.get(w.instanceId) as string,
+										}
+									: w
+							)
+
+						setSavedLayout((prev) => {
+							const updated = applyIdMap(prev)
+							savedLayoutRef.current = updated
+							persistLayout(updated)
+							return updated
+						})
+						setRuntimeLayout((prev) => applyIdMap(prev))
+					})
+					.catch(() => {})
 			}, 1000)
 		},
-		[isAuthenticated]
+		[isAuthenticated, persistLayout]
 	)
 
 	const commitMutation = useCallback(
 		(operation: string, nextRuntime: StoredWidget[], targetInstanceId?: string) => {
-			if (!validateLayout(nextRuntime, cols)) {
+			if (!validateLayout(nextRuntime, cols, WIDGET_DEFINITIONS)) {
 				return false
 			}
 
+			hasLocalEditRef.current = true
 			setRuntimeLayout(nextRuntime)
 
 			if (cols >= DEFAULT_COLS) {
@@ -354,6 +464,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				instanceId,
 				targetSize: newSize,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -400,6 +511,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				instanceId,
 				targetSize: newSize,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -425,6 +537,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				instanceId,
 				targetPosition,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -436,6 +549,71 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 		[runtimeLayout, cols, commitMutation]
 	)
 
+	const startDragPreview = useCallback(() => {
+		dragBaseLayoutRef.current = runtimeLayoutRef.current
+	}, [])
+
+	const updateDragPreview = useCallback(
+		(instanceId: string, targetPosition: WidgetPosition) => {
+			const base = dragBaseLayoutRef.current
+			if (!base) return
+
+			const result = resolveLayoutChange({
+				layout: base,
+				operation: 'move',
+				instanceId,
+				targetPosition,
+				cols: colsRef.current,
+				registry: WIDGET_DEFINITIONS,
+			})
+
+			if (result) {
+				setRuntimeLayout(result)
+			}
+		},
+		[]
+	)
+
+	const endDragPreview = useCallback(
+		(instanceId: string, targetPosition: WidgetPosition | null) => {
+			const base = dragBaseLayoutRef.current
+			dragBaseLayoutRef.current = null
+			if (!base) return
+
+			const restore = () => {
+				if (runtimeLayoutRef.current !== base) {
+					setRuntimeLayout(base)
+				}
+			}
+
+			const origin = base.find((w) => w.instanceId === instanceId)?.position
+			const isUnmoved =
+				origin &&
+				targetPosition &&
+				origin.col === targetPosition.col &&
+				origin.row === targetPosition.row
+
+			if (!targetPosition || isUnmoved) {
+				restore()
+				return
+			}
+
+			const result = resolveLayoutChange({
+				layout: base,
+				operation: 'move',
+				instanceId,
+				targetPosition,
+				cols: colsRef.current,
+				registry: WIDGET_DEFINITIONS,
+			})
+
+			if (!result || !commitMutation('move', result, instanceId)) {
+				restore()
+			}
+		},
+		[commitMutation]
+	)
+
 	const addWidget = useCallback(
 		async (
 			id: string,
@@ -491,6 +669,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				newWidget,
 				targetPosition,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -558,6 +737,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				instanceId,
 				newWidget,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -609,6 +789,7 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				operation: 'remove',
 				instanceId,
 				cols,
+				registry: WIDGET_DEFINITIONS,
 			})
 
 			if (!result) {
@@ -653,6 +834,9 @@ export function FreeWidgetProvider({ children }: { children: React.ReactNode })
 				setSelectedInstanceId,
 				resizeWidget,
 				moveWidget,
+				startDragPreview,
+				updateDragPreview,
+				endDragPreview,
 				addWidget,
 				duplicateWidget,
 				removeWidget,
diff --git a/src/index.css b/src/index.css
index ce0c0810..8c34bf13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -292,5 +292,5 @@ img {
 }
 
 .widget-canvas-item-transition {
-  transition: left 200ms ease-out, top 200ms ease-out, width 200ms ease-out, height 200ms ease-out;
+  transition: left 200ms ease-out, top 200ms ease-out, width 200ms ease-out, height 200ms ease-out, transform 200ms ease-out;
 }
\ No newline at end of file
diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx
index 71b4b64b..9dfd70f7 100644
--- a/src/layouts/navbar/navbar.layout.tsx
+++ b/src/layouts/navbar/navbar.layout.tsx
@@ -10,6 +10,7 @@ import { MarketButton } from './market/market-button'
 import Analytics from '@/analytics'
 import { Page, usePage } from '@/context/page.context'
 import { useAuth } from '@/context/auth.context'
+import { useAppearance } from '@/context/appearance.context'
 import { BlurModeButton } from '@/components/blur-mode/blur-mode.button'
 import type { UserProfile } from '@/services/hooks/user/user-service.hook'
 import { Tooltip } from '@/components/ui'
@@ -91,6 +92,9 @@ export function NavbarLayout(): JSX.Element {
 	const [showSettings, setShowSettings] = useState(false)
 	const [isVisible, setIsVisible] = useState(false)
 	const { user } = useAuth()
+	const { canvasMode } = useAppearance()
+	const isEditingCanvas = canvasMode === 'edit'
+	const showNavbar = isVisible && !isEditingCanvas
 	const [tab, setTab] = useState<string | null>(null)
 	const handleOpenSettings = useCallback((tabName: string | null) => {
 		setTab(tabName)
@@ -126,7 +130,7 @@ export function NavbarLayout(): JSX.Element {
 	useBirthdayConfetti(user?.isBirthdayToday || false)
 	return (
 		<>
-			{!isVisible && (
+			{!isVisible && !isEditingCanvas && (
 				<button
 					onClick={() => onToggleNavbar()}
 					className="fixed z-50 bottom-0 left-1/2 -translate-x-1/2 w-28 py-2.5 bg-content bg-glass border-t border-x border-white/10 rounded-t-3xl shadow-[0_-0px_30px_rgba(0,0,0,0.3)] transition-all hover:bg-white/[0.08] cursor-pointer group"
@@ -138,7 +142,7 @@ export function NavbarLayout(): JSX.Element {
 			<div
 				className={`fixed z-60  -translate-x-1/2 left-1/2 w-full px-2 md:px-8 lg:px-4 max-w-[1080px] transition-all ease-[cubic-bezier(0.23,1,0.32,1)] 
 					${
-						isVisible
+						showNavbar
 							? 'bottom-2 opacity-100 scale-100'
 							: '-bottom-32 opacity-0 scale-95 pointer-events-none'
 					}`}
diff --git a/src/layouts/search/browser-bookmark/browser-bookmark.tsx b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
index 8e43fa7e..604ef3ad 100644
--- a/src/layouts/search/browser-bookmark/browser-bookmark.tsx
+++ b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
@@ -62,8 +62,8 @@ export function BrowserBookmark() {
 	}
 
 	return (
-		<div className="relative flex flex-row items-center justify-start w-full gap-2 px-2 py-1">
-			<div className="flex flex-row items-center w-full gap-1 py-1 overflow-x-auto no-scrollbar scroll-smooth">
+		<div className="relative flex flex-row items-center justify-start w-full gap-2 px-2 py-0.5">
+			<div className="flex flex-row items-center w-full gap-1 py-0.5 overflow-x-auto no-scrollbar scroll-smooth">
 				<div className="flex items-center shrink-0">
 					<button
 						type="button"
diff --git a/src/layouts/search/variants/search-2x1.tsx b/src/layouts/search/variants/search-2x1.tsx
index c97c5791..0df02d5c 100644
--- a/src/layouts/search/variants/search-2x1.tsx
+++ b/src/layouts/search/variants/search-2x1.tsx
@@ -142,13 +142,13 @@ export function SearchCompactRow() {
 	}, [showHistoryPortal])
 
 	return (
-		<div className="flex items-center justify-center w-full h-full p-1 select-none">
+		<div className="flex items-center justify-center w-full h-full select-none">
 			<div
 				ref={searchRef}
-				className="relative w-full p-0.5 bg-content bg-glass rounded-2xl"
+				className="relative flex flex-col justify-center w-full h-full p-0.5 bg-content bg-glass rounded-widget"
 			>
 				<form onSubmit={handleSubmit}>
-					<div className="relative flex items-center py-1.5 px-2 overflow-hidden shadow-xs transition-all duration-300 bg-content rounded-2xl">
+					<div className="relative flex items-center py-1.5 px-2 overflow-hidden shadow-xs transition-all duration-300 bg-content rounded-widget">
 						<EngineSelector onSelected={onEngineChange} />
 
 						<input
diff --git a/src/layouts/widgets-manager/add-widget-modal/actions.tsx b/src/layouts/widgets-manager/add-widget-modal/actions.tsx
index 6fa54a36..c9a4bb63 100644
--- a/src/layouts/widgets-manager/add-widget-modal/actions.tsx
+++ b/src/layouts/widgets-manager/add-widget-modal/actions.tsx
@@ -13,6 +13,36 @@ interface AddWidgetActionsProps {
 	isDuplicateRestricted?: boolean
 	selectedSize: WidgetSize
 	onSave: () => void
+	onRemove: () => void
+}
+
+function ProUpgradeButton({ label }: { label: string }) {
+	return (
+		<Button
+			type="button"
+			onClick={() => callEvent('openSettings', 'vip')}
+			className="flex items-center justify-center w-full gap-2 font-bold border bg-warning/15 hover:bg-warning/25 text-warning border-warning/30"
+			rounded={'2xl'}
+			variant={'default'}
+		>
+			<Icon name="crown" size={14} />
+			<span>{label}</span>
+		</Button>
+	)
+}
+
+function RemoveFromPageButton({ onRemove }: { onRemove: () => void }) {
+	return (
+		<Button
+			type="button"
+			onClick={onRemove}
+			className="w-full text-error hover:bg-error/10 border-error/20"
+			rounded={'2xl'}
+			variant={'default'}
+		>
+			<span>حذف از صفحه</span>
+		</Button>
+	)
 }
 
 export function AddWidgetActions({
@@ -25,23 +55,17 @@ export function AddWidgetActions({
 	isDuplicateRestricted = false,
 	selectedSize,
 	onSave,
+	onRemove,
 }: AddWidgetActionsProps) {
 	if (isVipRequired && !isVip) {
 		return (
-			<Button
-				type="button"
-				onClick={() => callEvent('openSettings', 'vip')}
-				className="flex items-center justify-center w-full gap-2 font-bold border bg-warning/15 hover:bg-warning/25 text-warning border-warning/30"
-				rounded={'2xl'}
-				variant={'default'}
-			>
-				<Icon name="crown" size={14} />
-				<span>
-					{isEditMode
+			<ProUpgradeButton
+				label={
+					isEditMode
 						? 'ارتقا به پرو برای ذخیره این مدل'
-						: 'ارتقا به پرو برای فعال‌سازی'}
-				</span>
-			</Button>
+						: 'ارتقا به پرو برای فعال‌سازی'
+				}
+			/>
 		)
 	}
 
@@ -59,21 +83,25 @@ export function AddWidgetActions({
 		)
 	}
 
-	if (isLimitReached) {
+	if (isCurrentlyActive && (isLimitReached || isDuplicateRestricted)) {
 		return (
-			<Button
-				type="button"
-				onClick={() => callEvent('openSettings', 'vip')}
-				className="flex items-center justify-center w-full gap-2 font-bold border bg-warning/15 hover:bg-warning/25 text-warning border-warning/30"
-				rounded={'2xl'}
-				variant={'default'}
-			>
-				<Icon name="crown" size={14} />
-				<span>تکمیل ظرفیت ویجت‌ها (ارتقا برای نامحدود)</span>
-			</Button>
+			<div className="flex flex-col w-full gap-2">
+				<ProUpgradeButton
+					label={
+						isDuplicateRestricted
+							? 'تکرار ویجت مخصوص کاربران پرو'
+							: 'تکمیل ظرفیت ویجت‌ها (ارتقا برای نامحدود)'
+					}
+				/>
+				<RemoveFromPageButton onRemove={onRemove} />
+			</div>
 		)
 	}
 
+	if (isLimitReached) {
+		return <ProUpgradeButton label="تکمیل ظرفیت ویجت‌ها (ارتقا برای نامحدود)" />
+	}
+
 	if (canAddCustom) {
 		return (
 			<Button
@@ -91,48 +119,8 @@ export function AddWidgetActions({
 		)
 	}
 
-	if (!isVip && isCurrentlyActive && isDuplicateRestricted) {
-		return (
-			<Button
-				type="button"
-				onClick={() => callEvent('openSettings', 'vip')}
-				className="flex items-center justify-center w-full gap-2 font-bold border bg-warning/15 hover:bg-warning/25 text-warning border-warning/30"
-				rounded={'2xl'}
-				variant={'default'}
-			>
-				<Icon name="crown" size={14} />
-				<span>تکرار ویجت مخصوص کاربران پرو</span>
-			</Button>
-		)
-	}
-
 	if (isCurrentlyActive) {
-		return (
-			<Button
-				type="button"
-				onClick={onSave}
-				className="w-full text-error hover:bg-error/10 border-error/20"
-				rounded={'2xl'}
-				variant={'default'}
-			>
-				<span>حذف از صفحه</span>
-			</Button>
-		)
-	}
-
-	if (isLimitReached) {
-		return (
-			<Button
-				type="button"
-				onClick={() => callEvent('openSettings', 'vip')}
-				className="flex items-center justify-center w-full gap-2 font-bold border bg-warning/15 hover:bg-warning/25 text-warning border-warning/30"
-				rounded={'2xl'}
-				variant={'default'}
-			>
-				<Icon name="crown" size={14} />
-				<span>حداکثر ویجت‌های مجاز (ارتقا برای نامحدود)</span>
-			</Button>
-		)
+		return <RemoveFromPageButton onRemove={onRemove} />
 	}
 
 	return (
diff --git a/src/layouts/widgets-manager/add-widget-modal/index.tsx b/src/layouts/widgets-manager/add-widget-modal/index.tsx
index 24defd9e..a588e3b5 100644
--- a/src/layouts/widgets-manager/add-widget-modal/index.tsx
+++ b/src/layouts/widgets-manager/add-widget-modal/index.tsx
@@ -32,6 +32,7 @@ export function AddWidgetModal({ isOpen, editTarget, onClose }: AddWidgetModalPr
 	const runtimeLayout = freeWidgets?.runtimeLayout || []
 	const addWidget = freeWidgets?.addWidget
 	const updateWidgetVariant = freeWidgets?.updateWidgetVariant
+	const removeWidget = freeWidgets?.removeWidget
 
 	const allDefinitions = useMemo(() => {
 		return Object.values(WIDGET_DEFINITIONS)
@@ -154,6 +155,13 @@ export function AddWidgetModal({ isOpen, editTarget, onClose }: AddWidgetModalPr
 		? !isVip && runtimeLayout.length >= maxFreeWidgets
 		: !isVip && !isCurrentlyActive && visibility.length >= maxFreeWidgets
 
+	const handleRemove = () => {
+		if (!selectedDef || !removeWidget) return
+		const target = runtimeLayout.find((w) => w.id === selectedDef.id)
+		if (!target) return
+		removeWidget(target.instanceId)
+	}
+
 	const handleSave = async () => {
 		if (!selectedDef) return
 
@@ -243,7 +251,7 @@ export function AddWidgetModal({ isOpen, editTarget, onClose }: AddWidgetModalPr
 				closeOnBackdropClick
 				className="max-w-4xl md:max-w-5xl"
 			>
-				<div className="flex flex-col md:flex-row gap-4 h-137.5 select-none w-full">
+				<div className="flex flex-col md:flex-row gap-4 select-none w-full h-[calc(100dvh-11rem)] overflow-y-auto scrollbar-none md:h-[min(34.375rem,calc(100dvh-14rem))] md:overflow-visible">
 					<AddWidgetSidebar
 						activeCategory={activeCategory}
 						onSelectCategory={handleCategoryChange}
@@ -257,62 +265,64 @@ export function AddWidgetModal({ isOpen, editTarget, onClose }: AddWidgetModalPr
 						onOpenWidgetSettings={handleOpenWidgetSettings}
 					/>
 
-					<div className="flex flex-col justify-between w-full pr-0 md:w-7/12 md:pr-1">
+					<div className="flex flex-col w-full pr-0 md:min-h-0 md:w-7/12 md:pr-1">
 						{selectedDef ? (
-							<div className="flex flex-col justify-between flex-1 gap-3">
-								<div className="flex items-center justify-between pb-2 border-b border-base-content/10">
-									<div className="flex items-center gap-2">
-										<span className="text-2xl">
-											{selectedDef.emoji}
-										</span>
-										<div>
-											<h3 className="text-sm font-bold text-content">
-												{selectedDef.label}
-											</h3>
-											<p className="text-[11px] text-muted">
-												{isCustom
-													? selectedDef.canDuplicate
-														? 'امکان افزودن چندین نمونه از این ویجت وجود دارد'
-														: 'ویجت تکی صفحه اصلی'
-													: 'ویجت در چیدمان استاندارد صفحه'}
-											</p>
+							<div className="flex flex-col gap-3 md:flex-1 md:min-h-0">
+								<div className="flex flex-col gap-3 pr-0.5 scrollbar-none md:flex-1 md:min-h-0 md:overflow-y-auto">
+									<div className="flex items-center justify-between pb-2 border-b border-base-content/10">
+										<div className="flex items-center gap-2">
+											<span className="text-2xl">
+												{selectedDef.emoji}
+											</span>
+											<div>
+												<h3 className="text-sm font-bold text-content">
+													{selectedDef.label}
+												</h3>
+												<p className="text-[11px] text-muted">
+													{isCustom
+														? selectedDef.canDuplicate
+															? 'امکان افزودن چندین نمونه از این ویجت وجود دارد'
+															: 'ویجت تکی صفحه اصلی'
+														: 'ویجت در چیدمان استاندارد صفحه'}
+												</p>
+											</div>
 										</div>
+
+										{selectedDef.settingsTab && (
+											<Button
+												variant="default"
+												size="xs"
+												rounded="xl"
+												onClick={handleOpenSelectedSettings}
+												className="flex items-center gap-1.5 text-xs text-muted hover:text-primary px-3 py-1.5"
+											>
+												<Icon name="settings" size={12} />
+												<span>تنظیمات ویجت</span>
+											</Button>
+										)}
 									</div>
 
-									{selectedDef.settingsTab && (
-										<Button
-											variant="default"
-											size="xs"
-											rounded="xl"
-											onClick={handleOpenSelectedSettings}
-											className="flex items-center gap-1.5 text-xs text-muted hover:text-primary px-3 py-1.5"
-										>
-											<Icon name="settings" size={12} />
-											<span>تنظیمات ویجت</span>
-										</Button>
+									{isCustom && (
+										<AddWidgetOptions
+											definition={selectedDef}
+											selectedSize={selectedSize}
+											selectedVariant={selectedVariant}
+											isVip={isVip}
+											onSelectSize={handleSizeChange}
+											onSelectVariant={handleVariantChange}
+											isVariantVipOnly={isVariantVipOnly}
+											isSizeVipOnly={isSizeVipOnly}
+										/>
 									)}
-								</div>
 
-								{isCustom && (
-									<AddWidgetOptions
+									<AddWidgetPreview
 										definition={selectedDef}
-										selectedSize={selectedSize}
+										previewSize={previewSize}
 										selectedVariant={selectedVariant}
-										isVip={isVip}
-										onSelectSize={handleSizeChange}
-										onSelectVariant={handleVariantChange}
-										isVariantVipOnly={isVariantVipOnly}
-										isSizeVipOnly={isSizeVipOnly}
 									/>
-								)}
-
-								<AddWidgetPreview
-									definition={selectedDef}
-									previewSize={previewSize}
-									selectedVariant={selectedVariant}
-								/>
+								</div>
 
-								<div className="pt-2 border-t border-base-content/10">
+								<div className="pt-2 border-t border-base-content/10 shrink-0">
 									<AddWidgetActions
 										isVipRequired={isVipRequired}
 										isVip={isVip}
@@ -323,6 +333,7 @@ export function AddWidgetModal({ isOpen, editTarget, onClose }: AddWidgetModalPr
 										isDuplicateRestricted={isDuplicateRestricted}
 										selectedSize={selectedSize}
 										onSave={handleSave}
+										onRemove={handleRemove}
 									/>
 								</div>
 							</div>
diff --git a/src/layouts/widgets-manager/add-widget-modal/sidebar.tsx b/src/layouts/widgets-manager/add-widget-modal/sidebar.tsx
index 142282b6..478eb7ea 100644
--- a/src/layouts/widgets-manager/add-widget-modal/sidebar.tsx
+++ b/src/layouts/widgets-manager/add-widget-modal/sidebar.tsx
@@ -35,8 +35,8 @@ export function AddWidgetSidebar({
 	onOpenWidgetSettings,
 }: AddWidgetSidebarProps) {
 	return (
-		<div className="flex flex-col w-full pb-3 pl-0 border-b md:w-5/12 md:border-b-0 md:border-l border-base-content/10 md:pl-3 md:pb-0">
-			<div className="flex items-center gap-1 pb-2 mb-2 overflow-x-auto border-b scrollbar-none border-base-content/10">
+		<div className="flex flex-col w-full pb-3 pl-0 border-b md:min-h-0 md:w-5/12 md:border-b-0 md:border-l border-base-content/10 md:pl-3 md:pb-0">
+			<div className="flex items-center gap-1 pb-2 mb-2 overflow-x-auto border-b shrink-0 scrollbar-none border-base-content/10">
 				{CATEGORIES.map((cat) => (
 					<button
 						key={cat.id}
@@ -54,7 +54,7 @@ export function AddWidgetSidebar({
 				))}
 			</div>
 
-			<div className="flex-1 overflow-y-auto space-y-1.5 pr-0.5 scrollbar-none">
+			<div className="space-y-1.5 pr-0.5 scrollbar-none md:flex-1 md:overflow-y-auto">
 				{definitions.map((def) => {
 					const isSelected = def.id === selectedId
 					const count = runtimeLayout.filter((w) => w.id === def.id).length
diff --git a/src/layouts/widgets/canvas/canvas-edit-toolbar.tsx b/src/layouts/widgets/canvas/canvas-edit-toolbar.tsx
index c541c669..aa077266 100644
--- a/src/layouts/widgets/canvas/canvas-edit-toolbar.tsx
+++ b/src/layouts/widgets/canvas/canvas-edit-toolbar.tsx
@@ -10,7 +10,7 @@ export function CanvasEditToolbar({
 	onExitEditMode,
 }: CanvasEditToolbarProps) {
 	return createPortal(
-		<div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-70 flex items-center gap-3 px-4 py-2 rounded-2xl bg-base-200/90 backdrop-blur-xl border border-base-content/15 shadow-2xl animate-in slide-in-from-bottom-5 fade-in duration-200 select-none">
+		<div className="fixed bottom-2 left-1/2 -translate-x-1/2 z-70 flex items-center gap-3 px-4 py-2 rounded-2xl bg-base-200/90 backdrop-blur-xl border border-base-content/15 shadow-2xl animate-in slide-in-from-bottom-5 fade-in duration-200 select-none">
 			<div className="flex items-center gap-2 pl-2 border-l border-base-content/10">
 				<span className="relative flex h-2 w-2">
 					<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
diff --git a/src/layouts/widgets/canvas/canvas-widget-outer.tsx b/src/layouts/widgets/canvas/canvas-widget-outer.tsx
index 0039e6eb..3e8fd041 100644
--- a/src/layouts/widgets/canvas/canvas-widget-outer.tsx
+++ b/src/layouts/widgets/canvas/canvas-widget-outer.tsx
@@ -1,6 +1,6 @@
 import type React from 'react'
-import { useRef, useState } from 'react'
-import { callEvent } from '@/common/utils/call-event'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { useFreeWidgets } from '@/context/free-widget.context'
 import { getWidgetPixelRect } from '../grid-geometry'
 import {
@@ -24,6 +24,7 @@ interface CanvasWidgetOuterProps {
 	cellHeight: number
 	gap: number
 	cols: number
+	maxRows: number
 }
 
 export function CanvasWidgetOuter({
@@ -33,6 +34,7 @@ export function CanvasWidgetOuter({
 	cellHeight,
 	gap,
 	cols,
+	maxRows,
 }: CanvasWidgetOuterProps) {
 	const { isVip } = useAuth()
 	const { isWidgetVipOnly, isVariantVipOnly, isSizeVipOnly } = useWidgetVipResolver()
@@ -42,7 +44,9 @@ export function CanvasWidgetOuter({
 		selectedInstanceId,
 		setSelectedInstanceId,
 		resizeWidget,
-		moveWidget,
+		startDragPreview,
+		updateDragPreview,
+		endDragPreview,
 		duplicateWidget,
 		removeWidget,
 	} = useFreeWidgets()
@@ -62,23 +66,78 @@ export function CanvasWidgetOuter({
 		y: number
 	} | null>(null)
 
-	const isSelected = canvasMode === 'edit' && selectedInstanceId === widget.instanceId
 	const isWiggling = canvasMode === 'edit' && selectedInstanceId !== widget.instanceId
 
 	const pointerStartRef = useRef<{ x: number; y: number } | null>(null)
 	const dragStartPosRef = useRef<WidgetPosition>(widget.position)
 	const isDragActiveRef = useRef(false)
+	const activePointerIdRef = useRef<number | null>(null)
+	const rafRef = useRef<number | null>(null)
+	const pendingOffsetRef = useRef<{ x: number; y: number } | null>(null)
+	const previewPosRef = useRef<WidgetPosition | null>(null)
 
+	const anchorPosition = isDragging ? dragStartPosRef.current : widget.position
 	const pixelRect = getWidgetPixelRect(
-		widget.position,
+		anchorPosition,
 		widget.size,
 		cellWidth,
 		cellHeight,
 		gap
 	)
 
+	const resetDragState = useCallback(() => {
+		if (rafRef.current !== null) {
+			cancelAnimationFrame(rafRef.current)
+			rafRef.current = null
+		}
+		pointerStartRef.current = null
+		isDragActiveRef.current = false
+		activePointerIdRef.current = null
+		pendingOffsetRef.current = null
+		previewPosRef.current = null
+		setIsDragging(false)
+		setDragOffset({ x: 0, y: 0 })
+	}, [])
+
+	const finishDrag = useCallback(
+		(targetPosition: WidgetPosition | null) => {
+			try {
+				if (isDragActiveRef.current) {
+					endDragPreview(widget.instanceId, targetPosition)
+				}
+			} finally {
+				resetDragState()
+			}
+		},
+		[endDragPreview, widget.instanceId, resetDragState]
+	)
+
+	useEffect(() => {
+		const removeListener = listenEvent('cancelWidgetDrag', () => {
+			finishDrag(null)
+		})
+		return () => removeListener()
+	}, [finishDrag])
+
+	useEffect(() => {
+		if (!isDragging) return
+
+		const settle = (e: PointerEvent) => {
+			if (e.pointerId !== activePointerIdRef.current) return
+			finishDrag(null)
+		}
+
+		window.addEventListener('pointerup', settle)
+		window.addEventListener('pointercancel', settle)
+		return () => {
+			window.removeEventListener('pointerup', settle)
+			window.removeEventListener('pointercancel', settle)
+		}
+	}, [isDragging, finishDrag])
+
 	const handlePointerDown = (e: React.PointerEvent) => {
 		if (e.button !== 0 || canvasMode !== 'edit') return
+		if (isDragActiveRef.current) return
 
 		const target = e.target as HTMLElement
 		if (
@@ -97,10 +156,34 @@ export function CanvasWidgetOuter({
 		pointerStartRef.current = { x: e.clientX, y: e.clientY }
 		dragStartPosRef.current = { ...widget.position }
 		isDragActiveRef.current = false
+		activePointerIdRef.current = e.pointerId
+		setSelectedInstanceId(widget.instanceId)
+	}
+
+	const getTargetPosition = (offset: { x: number; y: number }): WidgetPosition => {
+		const unitW = cellWidth + gap
+		const unitH = cellHeight + gap
+
+		const deltaCol = unitW > 0 ? Math.round(offset.x / unitW) : 0
+		const deltaRow = unitH > 0 ? Math.round(offset.y / unitH) : 0
+
+		const rowLimit = Math.max(0, maxRows - widget.size.h)
+
+		return {
+			col: Math.max(
+				0,
+				Math.min(cols - widget.size.w, dragStartPosRef.current.col + deltaCol)
+			),
+			row: Math.max(
+				0,
+				Math.min(rowLimit, dragStartPosRef.current.row + deltaRow)
+			),
+		}
 	}
 
 	const handlePointerMove = (e: React.PointerEvent) => {
 		if (canvasMode !== 'edit' || !pointerStartRef.current) return
+		if (e.pointerId !== activePointerIdRef.current) return
 
 		const dx = e.clientX - pointerStartRef.current.x
 		const dy = e.clientY - pointerStartRef.current.y
@@ -111,42 +194,59 @@ export function CanvasWidgetOuter({
 		if (dist > dragThreshold) {
 			if (!isDragActiveRef.current) {
 				isDragActiveRef.current = true
+				previewPosRef.current = { ...dragStartPosRef.current }
+				startDragPreview()
 				setIsDragging(true)
 				try {
 					;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
 				} catch {}
 			}
-			setDragOffset({ x: dx, y: dy })
+			pendingOffsetRef.current = { x: dx, y: dy }
+			if (rafRef.current === null) {
+				rafRef.current = requestAnimationFrame(() => {
+					rafRef.current = null
+					const offset = pendingOffsetRef.current
+					if (!offset) return
+
+					setDragOffset(offset)
+
+					const target = getTargetPosition(offset)
+					const previous = previewPosRef.current
+					if (
+						!previous ||
+						target.col !== previous.col ||
+						target.row !== previous.row
+					) {
+						previewPosRef.current = target
+						updateDragPreview(widget.instanceId, target)
+					}
+				})
+			}
 		}
 	}
 
 	const handlePointerUp = (e: React.PointerEvent) => {
-		if (isDragActiveRef.current) {
-			const unitW = cellWidth + gap
-			const unitH = cellHeight + gap
+		if (e.pointerId !== activePointerIdRef.current) return
 
-			const deltaCol = unitW > 0 ? Math.round(dragOffset.x / unitW) : 0
-			const deltaRow = unitH > 0 ? Math.round(dragOffset.y / unitH) : 0
-
-			const targetCol = Math.max(
-				0,
-				Math.min(cols - widget.size.w, dragStartPosRef.current.col + deltaCol)
-			)
-			const targetRow = Math.max(0, dragStartPosRef.current.row + deltaRow)
-
-			if (targetCol !== widget.position.col || targetRow !== widget.position.row) {
-				moveWidget(widget.instanceId, { col: targetCol, row: targetRow })
-			}
-		}
-
-		pointerStartRef.current = null
-		isDragActiveRef.current = false
-		setIsDragging(false)
-		setDragOffset({ x: 0, y: 0 })
+		const dropTarget = isDragActiveRef.current
+			? getTargetPosition(pendingOffsetRef.current ?? dragOffset)
+			: null
 
 		try {
 			;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
 		} catch {}
+
+		finishDrag(dropTarget)
+	}
+
+	const handlePointerCancel = (e: React.PointerEvent) => {
+		if (e.pointerId !== activePointerIdRef.current) return
+		finishDrag(null)
+	}
+
+	const handleLostPointerCapture = (e: React.PointerEvent) => {
+		if (e.pointerId !== activePointerIdRef.current) return
+		finishDrag(null)
 	}
 
 	const handleContextMenu = (e: React.MouseEvent) => {
@@ -194,9 +294,6 @@ export function CanvasWidgetOuter({
 		removeWidget(widget.instanceId)
 	}
 
-	const currentLeft = isDragging ? pixelRect.left + dragOffset.x : pixelRect.left
-	const currentTop = isDragging ? pixelRect.top + dragOffset.y : pixelRect.top
-
 	return (
 		<>
 			<div
@@ -206,21 +303,23 @@ export function CanvasWidgetOuter({
 						? 'z-50 shadow-2xl cursor-grabbing scale-[1.03]'
 						: 'z-10 cursor-default',
 					!isDragging && 'widget-canvas-item-transition',
-					isWiggling && 'animate-widget-wiggle',
-					isSelected &&
-						'ring-2 ring-primary ring-offset-2 ring-offset-base-100 rounded-2xl'
+					isWiggling && 'animate-widget-wiggle'
 				)}
 				style={{
-					left: `${currentLeft}px`,
-					top: `${currentTop}px`,
+					left: `${pixelRect.left}px`,
+					top: `${pixelRect.top}px`,
 					width: `${pixelRect.width}px`,
-					height: `${pixelRect.height - 12}px`,
+					height: `${pixelRect.height}px`,
 					touchAction: 'none',
+					transform: isDragging
+						? `translate3d(${dragOffset.x}px, ${dragOffset.y}px, 0)`
+						: undefined,
 				}}
 				onPointerDown={handlePointerDown}
 				onPointerMove={handlePointerMove}
 				onPointerUp={handlePointerUp}
-				onPointerCancel={handlePointerUp}
+				onPointerCancel={handlePointerCancel}
+				onLostPointerCapture={handleLostPointerCapture}
 				onContextMenu={handleContextMenu}
 				onClickCapture={(e) => {
 					if (canvasMode === 'edit') {
diff --git a/src/layouts/widgets/canvas/free-widget-canvas.tsx b/src/layouts/widgets/canvas/free-widget-canvas.tsx
index 3cf8e255..be057405 100644
--- a/src/layouts/widgets/canvas/free-widget-canvas.tsx
+++ b/src/layouts/widgets/canvas/free-widget-canvas.tsx
@@ -39,6 +39,7 @@ export function FreeWidgetCanvas() {
 		x: number
 		y: number
 	} | null>(null)
+	const pressStartedOnBackgroundRef = useRef(false)
 
 	useEffect(() => {
 		if (containerSize.width > 0) {
@@ -64,24 +65,32 @@ export function FreeWidgetCanvas() {
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (e.key === 'Escape' && canvasMode === 'edit') {
-				setCanvasMode('normal')
+				callEvent('cancelWidgetDrag', null)
 				setSelectedInstanceId(null)
 			}
 		}
 
 		window.addEventListener('keydown', handleKeyDown)
 		return () => window.removeEventListener('keydown', handleKeyDown)
-	}, [canvasMode, setCanvasMode, setSelectedInstanceId])
+	}, [canvasMode, setSelectedInstanceId])
+
+	const isBackgroundTarget = (target: EventTarget | null) =>
+		target === containerRef.current ||
+		(target as HTMLElement)?.classList?.contains('canvas-background')
+
+	const handleCanvasPointerDown = (e: React.PointerEvent) => {
+		pressStartedOnBackgroundRef.current = isBackgroundTarget(e.target)
+	}
 
 	const handleCanvasClick = (e: React.MouseEvent) => {
-		if (
-			e.target === containerRef.current ||
-			(e.target as HTMLElement).classList.contains('canvas-background')
-		) {
-			if (canvasMode === 'edit') {
-				setCanvasMode('normal')
-				setSelectedInstanceId(null)
-			}
+		const startedOnBackground = pressStartedOnBackgroundRef.current
+		pressStartedOnBackgroundRef.current = false
+
+		if (!startedOnBackground || !isBackgroundTarget(e.target)) return
+
+		if (canvasMode === 'edit') {
+			setCanvasMode('normal')
+			setSelectedInstanceId(null)
 		}
 	}
 
@@ -157,6 +166,7 @@ export function FreeWidgetCanvas() {
 			ref={containerRef}
 			id="widgets-canvas"
 			className="relative w-full select-none"
+			onPointerDown={handleCanvasPointerDown}
 			onClick={handleCanvasClick}
 			onContextMenu={handleCanvasContextMenu}
 		>
@@ -202,7 +212,7 @@ export function FreeWidgetCanvas() {
 											width: `${cellWidth}px`,
 											height: `${cellHeight}px`,
 										}}
-										className="transition-all duration-200 border border-dashed rounded-2xl border-base-content/15 bg-base-300/10"
+										className="transition-all duration-200 border border-dashed rounded-widget border-base-content/15 bg-base-300/10"
 									/>
 								))}
 							</div>
@@ -223,6 +233,7 @@ export function FreeWidgetCanvas() {
 							cellHeight={cellHeight}
 							gap={gap}
 							cols={cols}
+							maxRows={totalGridRows}
 						/>
 					)
 				})}
diff --git a/src/layouts/widgets/layout-engine/layout-engine.ts b/src/layouts/widgets/layout-engine/layout-engine.ts
index dc8cfbdf..782af852 100644
--- a/src/layouts/widgets/layout-engine/layout-engine.ts
+++ b/src/layouts/widgets/layout-engine/layout-engine.ts
@@ -16,6 +16,7 @@ export function resolveLayoutChange(
 		newWidget,
 		cols,
 		allowedSizes,
+		registry,
 	} = options
 
 	const cloned: StoredWidget[] = layout.map((w) => ({
@@ -48,7 +49,7 @@ export function resolveLayoutChange(
 				return null
 			}
 
-			if (!validateLayout(resolved, cols)) {
+			if (!validateLayout(resolved, cols, registry)) {
 				return null
 			}
 
@@ -76,7 +77,7 @@ export function resolveLayoutChange(
 				return null
 			}
 
-			if (!validateLayout(resolved, cols)) {
+			if (!validateLayout(resolved, cols, registry)) {
 				return null
 			}
 
@@ -107,7 +108,7 @@ export function resolveLayoutChange(
 					new Set([toAdd.instanceId]),
 					cols
 				)
-				if (resolved && validateLayout(resolved, cols)) {
+				if (resolved && validateLayout(resolved, cols, registry)) {
 					return resolved
 				}
 				cloned.pop()
@@ -117,7 +118,7 @@ export function resolveLayoutChange(
 			toAdd.position = slot
 			cloned.push(toAdd)
 
-			if (!validateLayout(cloned, cols)) {
+			if (!validateLayout(cloned, cols, registry)) {
 				return null
 			}
 
@@ -141,7 +142,7 @@ export function resolveLayoutChange(
 			duplicated.position = slot
 			cloned.push(duplicated)
 
-			if (!validateLayout(cloned, cols)) {
+			if (!validateLayout(cloned, cols, registry)) {
 				return null
 			}
 
@@ -151,7 +152,7 @@ export function resolveLayoutChange(
 		case 'remove': {
 			if (!instanceId) return null
 			const filtered = cloned.filter((w) => w.instanceId !== instanceId)
-			if (!validateLayout(filtered, cols)) {
+			if (!validateLayout(filtered, cols, registry)) {
 				return null
 			}
 			return filtered
@@ -184,7 +185,7 @@ export function resolveLayoutChange(
 			}
 
 			const compacted = compactLayout(reflowed, cols)
-			if (!validateLayout(compacted, cols)) {
+			if (!validateLayout(compacted, cols, registry)) {
 				return null
 			}
 
diff --git a/src/layouts/widgets/layout-engine/push.ts b/src/layouts/widgets/layout-engine/push.ts
index 9d7f0d6d..d26a3031 100644
--- a/src/layouts/widgets/layout-engine/push.ts
+++ b/src/layouts/widgets/layout-engine/push.ts
@@ -28,6 +28,12 @@ export function generatePushCandidates(
 		if (seen.has(key)) return
 		seen.add(key)
 
+		if (
+			doRectanglesOverlap({ col, row }, widget.size, blocker.position, blocker.size)
+		) {
+			return
+		}
+
 		for (const other of layout) {
 			if (fixedIds.has(other.instanceId)) {
 				if (
diff --git a/src/layouts/widgets/layout-engine/types.ts b/src/layouts/widgets/layout-engine/types.ts
index beaf0f39..10fc1a01 100644
--- a/src/layouts/widgets/layout-engine/types.ts
+++ b/src/layouts/widgets/layout-engine/types.ts
@@ -108,4 +108,5 @@ export interface LayoutEngineOptions {
 	newWidget?: StoredWidget
 	cols: number
 	allowedSizes?: WidgetSize[]
+	registry?: Record<string, WidgetDefinition>
 }