diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
index afe90228d1..36f96e5de2 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
@@ -20,6 +20,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		},
 		{
 			name: 'Banana',
+			children: [],
 		},
 		{
 			name: 'Pear',
@@ -57,8 +58,8 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
 					<h5>Notice this example still only support single group of Sorter.</h5>
-					<example-sorter-group .items=${this.groupOneItems}></example-sorter-group>
-					<example-sorter-group .items=${this.groupTwoItems}></example-sorter-group>
+					<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
+					<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
 				</div>
 			</uui-box>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
index 34fb05f6a4..85688f727d 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
@@ -13,15 +13,25 @@ export type ModelEntryType = {
 
 @customElement('example-sorter-group')
 export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
+	@property({ type: Array, attribute: false })
+	public get initialItems(): ModelEntryType[] {
+		return this.items;
+	}
+	public set initialItems(value: ModelEntryType[]) {
+		// Only want to set the model initially, cause any re-render should not set this again.
+		if (this._items !== undefined) return;
+		this.items = value;
+	}
+
 	@property({ type: Array, attribute: false })
 	public get items(): ModelEntryType[] {
 		return this._items ?? [];
 	}
 	public set items(value: ModelEntryType[]) {
-		// Only want to set the model initially, cause any re-render should not set this again.
-		if (this._items !== undefined) return;
+		const oldValue = this._items;
 		this._items = value;
 		this.#sorter.setModel(this._items);
+		this.requestUpdate('items', oldValue);
 	}
 	private _items?: ModelEntryType[];
 
@@ -43,7 +53,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 	});
 
 	removeItem = (item: ModelEntryType) => {
-		this.items = this._items!.filter((r) => r.name !== item.name);
+		this.items = this.items.filter((r) => r.name !== item.name);
 	};
 
 	render() {
@@ -55,9 +65,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
-							${item.children && item.children.length > 0
-								? html`<example-sorter-group .items=${item.children}></example-sorter-group>`
-								: ''}
+							${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
 						</example-sorter-item>`,
 				)}
 			</div>
@@ -76,12 +84,15 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 				opacity: 0.2;
 			}
 
+			.sorter-container {
+				min-height: 20px;
+			}
+
 			example-sorter-group {
 				display: block;
 				width: 100%;
-				min-height: 20px;
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-size-border-radius);
+				border: 1px dashed rgba(122, 122, 122, 0.25);
+				border-radius: calc(var(--uui-border-radius) * 2);
 				padding: var(--uui-size-space-1);
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 9689d9ac8f..6975854446 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -44,7 +44,8 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 	});
 
 	removeItem = (item: ModelEntryType) => {
-		this.items = this._items!.filter((r) => r.name !== item.name);
+		this._items = this._items!.filter((r) => r.name !== item.name);
+		this.#sorter.setModel(this._items);
 	};
 
 	render() {
@@ -74,13 +75,8 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 				opacity: 0.2;
 			}
 
-			example-sorter-group {
-				display: block;
-				width: 100%;
+			.sorter-container {
 				min-height: 20px;
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-size-border-radius);
-				padding: var(--uui-size-space-1);
 			}
 		`,
 	];
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 573e35b61b..1a11a3108c 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
@@ -570,14 +570,17 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 
 			return;
 		}
-		// We skipped the above part cause we are above or below container:
+		// We skipped the above part cause we are above or below container, or within an empty container:
 
 		// Indication if drop is good:
 		if (this.updateAllowIndication(UmbSorterController.activeItem) === false) {
 			return;
 		}
 
-		if (this.#dragY < currentContainerRect.top) {
+		if (this.#model.length === 0) {
+			// Here is no items, so we should just move into the top of the container.
+			this.#moveElementTo(0);
+		} else if (this.#dragY < currentContainerRect.top) {
 			this.#moveElementTo(0);
 		} else if (this.#dragY > currentContainerRect.bottom) {
 			this.#moveElementTo(-1);