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 ce094fbe31a0..6e1f9326b60c 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
@@ -2,7 +2,7 @@ import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-ent
 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 93d2fd7b05b4..d393572abee6 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
@@ -2,7 +2,7 @@ import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET, type UmbBlockGridTypeAreaType
 import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL } from '../../components/block-grid-area-config-entry/constants.js';
 import { UmbBlockGridAreaTypeEntriesContext } from './block-grid-area-type-entries.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
 import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
@@ -10,7 +10,9 @@ import type {
 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 { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { type UmbBlockGridAreaConfigEntryElement } from '../../../block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
 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
@@ -23,6 +25,20 @@ 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',
+		getUniqueOfElement: (element) => {
+			return element.key;
+		},
+		getUniqueOfModel: (modelEntry) => {
+			return modelEntry.key;
+		},
+		onChange: ({ model }) => {
+			this._value = model;
+		}
+	});
+
 	@property({ type: Array })
 	public set value(value: Array<UmbBlockGridTypeAreaType>) {
 		this._value = value ?? [];
@@ -99,6 +115,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 		});
 	}
 
+	override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.updated(changedProperties); 
+		
+		if (changedProperties.has('value')) {
+			this.#sorter.setModel(this.value ?? []);
+		}
+	}
+
 	#gotAreaColumns() {
 		if (!this.#defaultAreaGridColumns || this.#valueOfAreaGridColumns === undefined) return;
 		this._areaGridColumns = this.#valueOfAreaGridColumns ?? this.#defaultAreaGridColumns;
@@ -133,6 +157,15 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 					<uui-button look="placeholder" label=${'Add area'} href=${this._workspacePath + 'create'}></uui-button>`
 			: '';
 	}
+			
+	static override styles = [
+		UmbTextStyles,
+		css`
+			.umb-block-grid__area{
+				cursor: pointer;
+			}
+		`
+	]
 }
 
 export default UmbPropertyEditorUIBlockGridAreasConfigElement;