diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
index ffa931e21a..b44d1f90c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
@@ -107,9 +107,6 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
  */
 @customElement('umb-block-grid-entries')
 export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
-	//
-	// TODO: Make sure Sorter callbacks handles columnSpan when retrieving a new entry.
-
 	//
 	#sorter = new UmbSorterController<UmbBlockGridLayoutModel, UmbBlockGridEntryElement>(this, {
 		...SORTER_CONFIG,
@@ -198,7 +195,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			},
 			null,
 		);
-
 		this.observe(
 			this.#context.amountOfAllowedBlockTypes,
 			(length) => {
@@ -253,6 +249,16 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 				'observeIsReadOnly',
 			);
 
+			this.observe(
+				manager.variantId,
+				(variantId) => {
+					if (variantId) {
+						this.#sorter.identifier = 'umb-block-grid-' + variantId.toString();
+					}
+				},
+				'observeVariantId',
+			);
+
 			if (this.areaKey) {
 				this.observe(
 					this.#context.areaTypeCreateLabel,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
index e291af4aeb..4658aa543c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
@@ -555,6 +555,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				display: block;
 				--umb-block-grid-entry-actions-opacity: 0;
 			}
+
 			:host([settings-invalid]),
 			:host([content-invalid]),
 			:host(:hover),
@@ -562,6 +563,23 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				--umb-block-grid-entry-actions-opacity: 1;
 			}
 
+			:host::after {
+				content: '';
+				position: absolute;
+				z-index: 1;
+				pointer-events: none;
+				inset: 0;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+
+			:host([settings-invalid])::after,
+			:host([content-invalid])::after {
+				border-color: var(--uui-color-danger);
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
@@ -591,17 +609,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				height: 100%;
 			}
 
-			:host::after {
-				content: '';
-				position: absolute;
-				z-index: 1;
-				pointer-events: none;
-				inset: 0;
-				border: 1px solid transparent;
-				border-radius: var(--uui-border-radius);
-
-				transition: border-color 240ms ease-in;
-			}
 			:host(:hover):not(:drop)::after {
 				display: block;
 				border-color: var(--uui-color-interactive-emphasis);
@@ -630,15 +637,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				opacity: 0;
 			}
 
-			:host([settings-invalid])::after,
-			:host([content-invalid])::after {
-				border-color: var(--uui-color-danger);
-			}
-			:host([settings-invalid])::before,
-			:host([content-invalid])::before {
-				background-color: var(--uui-color-danger);
-			}
-
 			uui-badge {
 				z-index: 2;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
index 5020698b4e..2d97c182fc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
@@ -31,6 +31,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 			}
 
 			#open-part {
+				display: flex;
 				min-height: var(
 					--uui-size-layout-2
 				); /* TODO: We should not do this, but it is a quick fix for now to ensure that the top part of a block gets a minimum height. */
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
index d3b58036f7..403f53d586 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
@@ -13,6 +13,7 @@ import type {
 	ManifestBlockEditorCustomView,
 	UmbBlockEditorCustomViewProperties,
 } from '@umbraco-cms/backoffice/block-custom-view';
+import { UUIBlinkAnimationValue } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-block-list-entry
@@ -302,20 +303,22 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	#renderBlock() {
 		return this.contentKey && this._contentTypeAlias
 			? html`
-					<umb-extension-slot
-						type="blockEditorCustomView"
-						default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
-						.props=${this._blockViewProps}
-						.filter=${this.#extensionSlotFilterMethod}
-						single
-						>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
-					>
-					<uui-action-bar>
-						${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
-					</uui-action-bar>
-					${!this._showContentEdit && this._contentInvalid
-						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
-						: nothing}
+					<div class="umb-block-list__block">
+						<umb-extension-slot
+							type="blockEditorCustomView"
+							default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
+							.props=${this._blockViewProps}
+							.filter=${this.#extensionSlotFilterMethod}
+							single
+							>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
+						>
+						<uui-action-bar>
+							${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
+						</uui-action-bar>
+						${!this._showContentEdit && this._contentInvalid
+							? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+							: nothing}
+					</div>
 				`
 			: nothing;
 	}
@@ -385,6 +388,23 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 				--umb-block-list-entry-actions-opacity: 1;
 			}
 
+			:host::after {
+				content: '';
+				position: absolute;
+				z-index: 1;
+				pointer-events: none;
+				inset: 0;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+
+			:host([settings-invalid])::after,
+			:host([content-invalid])::after {
+				border-color: var(--uui-color-danger);
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
@@ -393,24 +413,48 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 				transition: opacity 120ms;
 			}
 
-			:host([drag-placeholder]) {
-				opacity: 0.2;
-				--umb-block-list-entry-actions-opacity: 0;
-			}
-
-			:host([settings-invalid])::after,
-			:host([content-invalid])::after {
-				content: '';
-				position: absolute;
-				inset: 0;
-				pointer-events: none;
-				border: 1px solid var(--uui-color-danger);
-				border-radius: var(--uui-border-radius);
-			}
-
 			uui-badge {
 				z-index: 2;
 			}
+
+			:host::after {
+				content: '';
+				position: absolute;
+				z-index: 1;
+				pointer-events: none;
+				inset: 0;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+			:host(:hover):not(:drop)::after {
+				display: block;
+				border-color: var(--uui-color-interactive-emphasis);
+				box-shadow:
+					0 0 0 1px rgba(255, 255, 255, 0.7),
+					inset 0 0 0 1px rgba(255, 255, 255, 0.7);
+			}
+
+			:host([drag-placeholder])::after {
+				display: block;
+				border-width: 2px;
+				border-color: var(--uui-color-interactive-emphasis);
+				animation: ${UUIBlinkAnimationValue};
+			}
+			:host([drag-placeholder])::before {
+				content: '';
+				position: absolute;
+				pointer-events: none;
+				inset: 0;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-interactive-emphasis);
+				opacity: 0.12;
+			}
+			:host([drag-placeholder]) .umb-block-list__block {
+				transition: opacity 50ms 16ms;
+				opacity: 0;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
index 0f13d130ae..c8e22a1f75 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
@@ -203,7 +203,7 @@ export type UmbSorterConfig<T, ElementType extends HTMLElement = HTMLElement> =
 	Partial<Pick<INTERNAL_UmbSorterConfig<T, ElementType>, 'ignorerSelector' | 'containerSelector' | 'identifier'>>;
 
 /**
- 
+
  * @class UmbSorterController
  * @implements {UmbControllerInterface}
  * @description This controller can make user able to sort items.
@@ -265,6 +265,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 	public get identifier() {
 		return this.#config.identifier;
 	}
+	public set identifier(identifier: UniqueType) {
+		this.#config.identifier = identifier;
+	}
+	#isActiveIdentifier() {
+		return UmbSorterController.activeSorter?.identifier === this.identifier;
+	}
 
 	constructor(host: UmbControllerHostElement, config: UmbSorterConfig<T, ElementType>) {
 		super(host);
@@ -460,7 +466,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		}
 
 		// If we have a currentItem and the element matches, we should set the currentElement to this element.
-		if (UmbSorterController.activeItem) {
+		if (UmbSorterController.activeItem && this.#isActiveIdentifier()) {
 			const elUnique = this.#config.getUniqueOfElement(element);
 			const modelUnique = this.#config.getUniqueOfModel(UmbSorterController.activeItem);
 			if (elUnique === modelUnique && elUnique !== undefined) {
@@ -587,12 +593,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 	};
 
 	#handleDragEnd = async (event?: DragEvent) => {
-		// If not good drop, revert model?
-
 		if (!UmbSorterController.activeElement || !UmbSorterController.activeItem) {
 			return;
 		}
 
+		// If browser thinks this was a cancelled move, we should revert the move. (based on dropEffect === 'none') [NL]
+		// But notice, this also count when releasing the mouse outside the sorters element, this i'm not sure if I agree on, would be ideal only to revert if ESC was pressed. [NL]
 		if (UmbSorterController.originalSorter && event?.dataTransfer != null && event.dataTransfer.dropEffect === 'none') {
 			// Revert move, to start position.
 			UmbSorterController.originalSorter.moveItemInModel(