diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts
index c31a4d98a7..57adf7f0a1 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts
@@ -35,7 +35,10 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
 	 */
 	sortBy(sortMethod?: (a: T, b: T) => number) {
 		this.#sortMethod = sortMethod;
-		super.setValue(this.getValue().sort(this.#sortMethod));
+		const value = this.getValue();
+		if(value) {
+			super.setValue([...value].sort(this.#sortMethod));
+		}
 		return this;
 	}
 
@@ -51,7 +54,7 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
 	 */
 	override setValue(value: T[]) {
 		if (this.#sortMethod) {
-			super.setValue(value.sort(this.#sortMethod));
+			super.setValue([...value].sort(this.#sortMethod));
 		} else {
 			super.setValue(value);
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
index c3d07105cc..bbb50aafbc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
@@ -1,5 +1,5 @@
-import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
 
 export const UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockList';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
index 3cfd61b9f0..b24ae93638 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
@@ -294,7 +294,7 @@ export class UmbSplitPanelElement extends LitElement {
 		#divider-touch-area {
 			position: absolute;
 			top: 0;
-			left: 0;
+			left: 5px;
 			height: 100%;
 			width: var(--umb-split-panel-divider-touch-area-width);
 			transform: translateX(-50%);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
index d400a230f9..279c064ffe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
@@ -1,5 +1,3 @@
-import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	css,
 	customElement,
@@ -11,6 +9,8 @@ import {
 	when,
 	LitElement,
 } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 // TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
 export interface UmbTableItem {
@@ -163,17 +163,19 @@ export class UmbTableElement extends LitElement {
 	}
 
 	override render() {
-		return html`<uui-table class="uui-text">
-			<uui-table-column
-				.style=${when(
-					!(this.config.allowSelection === false && this.config.hideIcon === true),
-					() => 'width: 60px',
-				)}></uui-table-column>
-			<uui-table-head>
-				${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
-			</uui-table-head>
-			${repeat(this.items, (item) => item.id, this._renderRow)}
-		</uui-table>`;
+		return html`
+			<uui-table class="uui-text">
+				<uui-table-column
+					.style=${when(
+						!(this.config.allowSelection === false && this.config.hideIcon === true),
+						() => 'width: 60px',
+					)}></uui-table-column>
+				<uui-table-head>
+					${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
+				</uui-table-head>
+				${repeat(this.items, (item) => item.id, this._renderRow)}
+			</uui-table>
+		`;
 	}
 
 	private _renderHeaderCell(column: UmbTableColumn) {
@@ -201,48 +203,54 @@ export class UmbTableElement extends LitElement {
 	private _renderHeaderCheckboxCell() {
 		if (this.config.hideIcon && !this.config.allowSelection) return;
 
-		return html` <uui-table-head-cell style="--uui-table-cell-padding: 0">
-			${when(
-				this.config.allowSelection,
-				() =>
-					html` <uui-checkbox
-						label="Select All"
-						style="padding: var(--uui-size-4) var(--uui-size-5);"
-						@change="${this._handleAllRowsCheckboxChange}"
-						?checked="${this.selection.length === this.items.length}">
-					</uui-checkbox>`,
-			)}
-		</uui-table-head-cell>`;
+		return html`
+			<uui-table-head-cell style="--uui-table-cell-padding: 0">
+				${when(
+					this.config.allowSelection,
+					() =>
+						html` <uui-checkbox
+							label="Select All"
+							style="padding: var(--uui-size-4) var(--uui-size-5);"
+							@change="${this._handleAllRowsCheckboxChange}"
+							?checked="${this.selection.length === this.items.length}">
+						</uui-checkbox>`,
+				)}
+			</uui-table-head-cell>
+		`;
 	}
 
 	private _renderRow = (item: UmbTableItem) => {
-		return html`<uui-table-row
-			?selectable="${this.config.allowSelection}"
-			?select-only=${this._selectionMode}
-			?selected=${this._isSelected(item.id)}
-			@selected=${() => this._selectRow(item.id)}
-			@deselected=${() => this._deselectRow(item.id)}>
-			${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
-		</uui-table-row>`;
+		return html`
+			<uui-table-row
+				?selectable="${this.config.allowSelection}"
+				?select-only=${this._selectionMode}
+				?selected=${this._isSelected(item.id)}
+				@selected=${() => this._selectRow(item.id)}
+				@deselected=${() => this._deselectRow(item.id)}>
+				${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
+			</uui-table-row>
+		`;
 	};
 
 	private _renderRowCheckboxCell(item: UmbTableItem) {
 		if (this.config.hideIcon && !this.config.allowSelection) return;
 
-		return html`<uui-table-cell>
-			${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
-			${when(
-				this.config.allowSelection,
-				() => html`
-					<uui-checkbox
-						label="Select Row"
-						@click=${(e: PointerEvent) => e.stopPropagation()}
-						@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
-						?checked="${this._isSelected(item.id)}">
-					</uui-checkbox>
-				`,
-			)}
-		</uui-table-cell>`;
+		return html`
+			<uui-table-cell>
+				${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
+				${when(
+					this.config.allowSelection,
+					() => html`
+						<uui-checkbox
+							label="Select Row"
+							@click=${(e: PointerEvent) => e.stopPropagation()}
+							@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
+							?checked="${this._isSelected(item.id)}">
+						</uui-checkbox>
+					`,
+				)}
+			</uui-table-cell>
+		`;
 	}
 
 	private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
@@ -251,7 +259,8 @@ export class UmbTableElement extends LitElement {
 				style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
 					${this._renderCellContent(column, item)}
 			</uui-table-cell>
-		</uui-table-cell>`;
+		</uui-table-cell>
+		`;
 	}
 
 	private _renderCellContent(column: UmbTableColumn, item: UmbTableItem) {
@@ -292,6 +301,7 @@ export class UmbTableElement extends LitElement {
 				position: sticky;
 				top: 0;
 				z-index: 1;
+				background-color: var(--uui-color-surface, #fff);
 			}
 
 			uui-table-row uui-checkbox {
@@ -331,6 +341,7 @@ export class UmbTableElement extends LitElement {
 				justify-content: space-between;
 				width: 100%;
 			}
+
 			uui-table-head-cell button > span {
 				flex: 1 0 auto;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
index f5fe1ad165..3fae384c2f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -1,9 +1,9 @@
-import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
 import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
 import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
+import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
@@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				${this.item?.documentType.icon
 					? html`
 							<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
-							${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing}
-							<!--
-							// TODO: implement correct status symbol
-							<span id="status-symbol"></span>
-							-->
+							${this.#renderStateIcon()}
 						`
 					: nothing}
 			</span>
@@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 		> `;
 	}
 
+	#renderStateIcon() {
+		if (this.item?.isProtected) {
+			return this.#renderIsProtectedIcon();
+		}
+
+		if (this.item?.documentType.collection) {
+			return this.#renderIsCollectionIcon();
+		}
+
+		return nothing;
+	}
+
+	#renderIsCollectionIcon() {
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
+	}
+
 	#renderIsProtectedIcon() {
-		return html`<umb-icon id="icon-lock" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
 	}
 
 	static override styles = [
@@ -106,19 +118,13 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				vertical-align: middle;
 			}
 
-			#status-symbol {
-				width: 5px;
-				height: 5px;
-				border: 1px solid white;
-				background-color: blue;
-				display: block;
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				border-radius: 100%;
+			#label {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
-			#icon-lock {
+			#state-icon {
 				position: absolute;
 				bottom: -5px;
 				right: -5px;
@@ -130,36 +136,30 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				line-height: 14px;
 			}
 
-			#label {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			:hover #icon-lock {
+			:hover #state-icon {
 				background: var(--uui-color-surface-emphasis);
 			}
 
 			/** Active */
-			[active] #icon-lock {
+			[active] #state-icon {
 				background: var(--uui-color-current);
 			}
 
-			[active]:hover #icon-lock {
+			[active]:hover #state-icon {
 				background: var(--uui-color-current-emphasis);
 			}
 
 			/** Selected */
-			[selected] #icon-lock {
+			[selected] #state-icon {
 				background-color: var(--uui-color-selected);
 			}
 
-			[selected]:hover #icon-lock {
+			[selected]:hover #state-icon {
 				background-color: var(--uui-color-selected-emphasis);
 			}
 
 			/** Disabled */
-			[disabled] #icon-lock {
+			[disabled] #state-icon {
 				background-color: var(--uui-color-disabled);
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
index 4c1e2e6cea..2245ca14ce 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
@@ -10,7 +10,10 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 		return html`
 			<span id="icon-container" slot="icon">
 				${this.item?.mediaType.icon
-					? html` <umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon> `
+					? html`
+							<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
+							${this.#renderStateIcon()}
+						`
 					: nothing}
 			</span>
 		`;
@@ -20,6 +23,18 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 		return html`<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
 	}
 
+	#renderStateIcon() {
+		if (this.item?.mediaType.collection) {
+			return this.#renderIsCollectionIcon();
+		}
+
+		return nothing;
+	}
+
+	#renderIsCollectionIcon() {
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
@@ -36,6 +51,45 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
+
+			#state-icon {
+				position: absolute;
+				bottom: -5px;
+				right: -5px;
+				font-size: 10px;
+				background: var(--uui-color-surface);
+				width: 14px;
+				height: 14px;
+				border-radius: 100%;
+				line-height: 14px;
+			}
+
+			:hover #state-icon {
+				background: var(--uui-color-surface-emphasis);
+			}
+
+			/** Active */
+			[active] #state-icon {
+				background: var(--uui-color-current);
+			}
+
+			[active]:hover #state-icon {
+				background: var(--uui-color-current-emphasis);
+			}
+
+			/** Selected */
+			[selected] #state-icon {
+				background-color: var(--uui-color-selected);
+			}
+
+			[selected]:hover #state-icon {
+				background-color: var(--uui-color-selected-emphasis);
+			}
+
+			/** Disabled */
+			[disabled] #state-icon {
+				background-color: var(--uui-color-disabled);
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts
index b3c0617e28..66ca80cdb4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts
@@ -84,6 +84,9 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 	static override styles: CSSResultGroup = [
 		UmbTextStyles,
 		css`
+			:host {
+				color: var(--uui-color-text);
+			}
 			#main {
 				display: flex;
 				flex-direction: column;