diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
index ce094fbe31..d0f47ea891 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
@@ -1,8 +1,10 @@
 import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
+import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 
+import '../block-scale-handler/block-scale-handler.element.js';
+
 /**
  * @element umb-block-area-config-entry
  */
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
index 78e52ed147..34e767b5c0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
@@ -1,17 +1,21 @@
 import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET, type UmbBlockGridTypeAreaType } from '../../index.js';
 import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL } from '../../components/block-grid-area-config-entry/constants.js';
+import type { UmbBlockGridAreaConfigEntryElement } from '../../../block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
 import { UmbBlockGridAreaTypeEntriesContext } from './block-grid-area-type-entries.context.js';
+import { css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { incrementString } from '@umbraco-cms/backoffice/utils';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
+import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '@umbraco-cms/backoffice/sorter';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { incrementString } from '@umbraco-cms/backoffice/utils';
 
 import '../../components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
+
 @customElement('umb-property-editor-ui-block-grid-areas-config')
 export class UmbPropertyEditorUIBlockGridAreasConfigElement
 	extends UmbLitElement
@@ -23,9 +27,28 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 	#defaultAreaGridColumns: number = 12;
 	#valueOfAreaGridColumns?: number | null;
 
+	#sorter = new UmbSorterController<UmbBlockGridTypeAreaType, UmbBlockGridAreaConfigEntryElement>(this, {
+		itemSelector: 'umb-block-area-config-entry',
+		containerSelector: '.umb-block-grid__area-container',
+		resolvePlacement: UmbSorterResolvePlacementAsGrid,
+		getUniqueOfElement: (element) => {
+			return element.key;
+		},
+		getUniqueOfModel: (modelEntry) => {
+			return modelEntry.key;
+		},
+		onChange: ({ model }) => {
+			const oldValue = this._value;
+			this._value = model;
+			this.requestUpdate('_value', oldValue);
+			this.dispatchEvent(new UmbChangeEvent());
+		},
+	});
+
 	@property({ type: Array })
 	public set value(value: Array<UmbBlockGridTypeAreaType>) {
 		this._value = value ?? [];
+		this.#sorter.setModel(this._value);
 	}
 	public get value(): Array<UmbBlockGridTypeAreaType> {
 		return this._value;
@@ -133,6 +156,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 					<uui-button look="placeholder" label=${'Add area'} href=${this._workspacePath + 'create'}></uui-button>`
 			: '';
 	}
+
+	static override styles = [
+		css`
+			.umb-block-grid__area {
+				cursor: move;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIBlockGridAreasConfigElement;