diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index a75e7bd180..3b47326644 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -14,10 +14,8 @@
 		"./localization-api": "./dist-cms/libs/localization-api/index.js",
 		"./observable-api": "./dist-cms/libs/observable-api/index.js",
 		"./auth": "./dist-cms/shared/auth/index.js",
-		"./events": "./dist-cms/shared/umb-events/index.js",
 		"./icon": "./dist-cms/shared/icon/index.js",
 		"./models": "./dist-cms/shared/models/index.js",
-		"./repository": "./dist-cms/shared/repository/index.js",
 		"./resources": "./dist-cms/shared/resources/index.js",
 		"./router": "./dist-cms/shared/router/index.js",
 		"./style": "./dist-cms/shared/style/index.js",
@@ -47,6 +45,8 @@
 		"./tree": "./dist-cms/packages/core/tree/index.js",
 		"./variant": "./dist-cms/packages/core/variant/index.js",
 		"./workspace": "./dist-cms/packages/core/workspace/index.js",
+		"./events": "./dist-cms/packages/core/umb-events/index.js",
+		"./repository": "./dist-cms/packages/core/repository/index.js",
 		"./dictionary": "./dist-cms/packages/dictionary/dictionary/index.js",
 		"./document": "./dist-cms/packages/documents/documents/index.js",
 		"./document-blueprint": "./dist-cms/packages/documents/document-blueprints/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 113799666c..8c1490effe 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -299,7 +299,20 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		parentId: null,
 		propertyEditorAlias: 'Umbraco.DropDown.Flexible',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
-		values: [],
+		values: [
+			{
+				alias: 'multiple',
+				value: false,
+			},
+			{
+				alias: 'items',
+				value: {
+					0: { sortOrder: 1, value: 'First Option' },
+					1: { sortOrder: 2, value: 'Second Option' },
+					2: { sortOrder: 3, value: 'I Am the third Option' },
+				},
+			},
+		],
 	},
 	{
 		type: 'data-type',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts
index ae694f4fe4..dd43060c0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts
@@ -1,10 +1,10 @@
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { map } from '@umbraco-cms/backoffice/external/rxjs';
 import { UMB_COLLECTION_CONTEXT_TOKEN, UmbCollectionContext } from '@umbraco-cms/backoffice/collection';
 import { ManifestEntityBulkAction, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 
 @customElement('umb-collection-selection-actions')
 export class UmbCollectionSelectionActionsElement extends UmbLitElement {
@@ -49,14 +49,22 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 		if (!this._collectionContext) return;
 
 		// TODO: Make sure it only updates on length change.
-		this.observe(this._collectionContext.items, (mediaItems) => {
-			this._nodesLength = mediaItems.length;
-		}, 'observeItem');
+		this.observe(
+			this._collectionContext.items,
+			(mediaItems) => {
+				this._nodesLength = mediaItems.length;
+			},
+			'observeItem',
+		);
 
-		this.observe(this._collectionContext.selection, (selection) => {
-			this._selectionLength = selection.length;
-			this._selection = selection;
-		}, 'observeSelection');
+		this.observe(
+			this._collectionContext.selection,
+			(selection) => {
+				this._selectionLength = selection.length;
+				this._selection = selection;
+			},
+			'observeSelection',
+		);
 	}
 
 	private _renderSelectionCount() {
@@ -69,12 +77,12 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 			umbExtensionsRegistry.extensionsOfType('entityBulkAction').pipe(
 				map((extensions) => {
 					return extensions.filter((extension) => extension.conditions.entityType === this.#entityType);
-				})
+				}),
 			),
 			(bulkActions) => {
 				this._entityBulkActions = bulkActions;
-			}
-			, 'observeEntityBulkActions'
+			},
+			'observeEntityBulkActions',
 		);
 	}
 
@@ -103,7 +111,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 							html`<umb-entity-bulk-action
 								@executed=${this.#onActionExecuted}
 								.selection=${this._selection}
-								.manifest=${manifest}></umb-entity-bulk-action>`
+								.manifest=${manifest}></umb-entity-bulk-action>`,
 					)}
 				</div>
 			</div>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index cc2a60b22b..d212570fa6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -6,6 +6,7 @@ export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown
 export * from './code-block/index.js';
 export * from './input-date/index.js';
+export * from './input-dropdown/index.js';
 export * from './dropdown/index.js';
 export * from './empty-state/index.js';
 export * from './entity-actions-bundle/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
index 3df8c085a9..56fd3a4184 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
@@ -1,4 +1,4 @@
-import { UmbConfigRepository } from '../../repositories/config/config.repository.js';
+import { UmbConfigRepository } from '../../repository/config/config.repository.js';
 import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -98,7 +98,7 @@ export class UmbInputDateElement extends FormControlMixin(UmbLitElement) {
 		if (this.type === 'time') {
 			const newDate = new Date(`${new Date().toJSON().slice(0, 10)} ${d}`);
 			const dateOffset = new Date(
-				newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000)
+				newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000),
 			);
 			const time = dateOffset
 				.toLocaleTimeString(undefined, {
@@ -109,7 +109,7 @@ export class UmbInputDateElement extends FormControlMixin(UmbLitElement) {
 		} else {
 			const newDate = new Date(d.replace('Z', ''));
 			const dateOffset = new Date(
-				newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000)
+				newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000),
 			);
 			return this.type === 'datetime-local'
 				? this.#dateToString(dateOffset)
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/index.ts
new file mode 100644
index 0000000000..6ba9298f35
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/index.ts
@@ -0,0 +1 @@
+export * from './input-dropdown-list.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
new file mode 100644
index 0000000000..9b06a87c0a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
@@ -0,0 +1,53 @@
+import { css, html, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-input-dropdown-list')
+export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement) {
+	@property({ type: Array })
+	public options?: Array<Option>;
+
+	@property({ type: String })
+	public placeholder?: string;
+
+	//TODO: show multiple lines when either a) uui-select has the option to do so or b) combobox has popover issue fixed and use this instead of uui-select.
+	@property({ type: Boolean })
+	public multiple?: boolean;
+
+	@query('uui-select')
+	private selectEle!: HTMLInputElement;
+
+	protected getFormElement() {
+		return this.selectEle;
+	}
+
+	#onChange(e: UUISelectEvent) {
+		e.stopPropagation();
+		if (e.target.value) this.value = e.target.value;
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	}
+
+	render() {
+		return html`<uui-select
+			label=${this.localize.term('formProviderFieldTypes_dropdownName')}
+			.placeholder=${this.placeholder ?? ''}
+			.options=${this.options ?? []}
+			@change=${this.#onChange}></uui-select>`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	];
+}
+
+export default UmbInputDropdownListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-dropdown-list': UmbInputDropdownListElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.stories.ts
new file mode 100644
index 0000000000..cabff86e72
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.stories.ts
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-dropdown-list.element.js';
+import type { UmbInputDropdownListElement } from './input-dropdown-list.element.js';
+
+const meta: Meta<UmbInputDropdownListElement> = {
+	title: 'Components/Inputs/Dropdown List',
+	component: 'umb-input-dropdown-list',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputDropdownListElement>;
+
+export const Overview: Story = {
+	args: {
+		options: [
+			{
+				name: 'One',
+				value: 'One',
+			},
+			{
+				name: 'Two',
+				value: 'Two',
+			},
+			{
+				name: 'Three',
+				value: 'Three',
+			},
+		],
+	},
+};
+
+export const WithSelectedValue: Story = {
+	args: {
+		options: [
+			{
+				name: 'One',
+				value: 'One',
+			},
+			{
+				name: 'Two',
+				value: 'Two',
+				selected: true,
+			},
+			{
+				name: 'Three',
+				value: 'Three',
+			},
+		],
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts
new file mode 100644
index 0000000000..32c6709b79
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.test.ts
@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputDropdownListElement } from './input-dropdown-list.element.js';
+import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputDateElement', () => {
+	let element: UmbInputDropdownListElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-dropdown-list></umb-input-dropdown-list> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputDropdownListElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
index e9202df63b..fadbefb533 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
@@ -1,8 +1,15 @@
-import { UmbCodeEditorElement, loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
-import { css, html, customElement, query, property } from '@umbraco-cms/backoffice/external/lit';
+import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
+import { UmbCodeEditorController, UmbCodeEditorElement, loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
+import { css, html, customElement, query, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import {
+	UMB_LINK_PICKER_MODAL,
+	UMB_MEDIA_TREE_PICKER_MODAL,
+	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
+	UmbModalManagerContext,
+} from '@umbraco-cms/backoffice/modal';
 
 /**
  * @element umb-input-markdown
@@ -12,40 +19,514 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-input-markdown')
 export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 	protected getFormElement() {
-		return undefined;
+		return this._codeEditor;
 	}
 
 	@property({ type: Boolean })
 	preview?: boolean;
 
 	#isCodeEditorReady = new UmbBooleanState(false);
-	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+	#editor?: UmbCodeEditorController;
 
 	@query('umb-code-editor')
 	_codeEditor?: UmbCodeEditorElement;
 
+	private _modalContext?: UmbModalManagerContext;
+
 	constructor() {
 		super();
 		this.#loadCodeEditor();
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+			this._modalContext = instance;
+		});
 	}
 
 	async #loadCodeEditor() {
 		try {
 			await loadCodeEditor();
-			this._codeEditor?.editor?.updateOptions({
+			this.#isCodeEditorReady.next(true);
+
+			this.#editor = this._codeEditor?.editor;
+
+			this.#editor?.updateOptions({
 				lineNumbers: false,
 				minimap: false,
 				folding: false,
 			});
-			this.#isCodeEditorReady.next(true);
+			this.#loadActions();
 		} catch (error) {
 			console.error(error);
 		}
 	}
 
+	async #loadActions() {
+		// TODO: Find a way to have "double" keybindings (ctrl+m+ctrl+c for `code`, rather than simple ctrl+c as its taken by OS to copy things)
+		// Going with the keybindings of a Markdown Shortcut plugin https://marketplace.visualstudio.com/items?itemName=robole.markdown-shortcuts#shortcuts or perhaps there are keybindings that would make more sense.
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H1',
+			id: 'h1',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit1],
+			run: () => this._insertAtCurrentLine('#'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H2',
+			id: 'h2',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit2],
+			run: () => this._insertAtCurrentLine('##'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H3',
+			id: 'h3',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit3],
+			run: () => this._insertAtCurrentLine('###'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H4',
+			id: 'h4',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit4],
+			run: () => this._insertAtCurrentLine('####'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H5',
+			id: 'h5',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit5],
+			run: () => this._insertAtCurrentLine('#####'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Heading H6',
+			id: 'h6',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit6],
+			run: () => this._insertAtCurrentLine('######'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Bold Text',
+			id: 'b',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB],
+			run: () => this._insertBetweenSelection('**', '**', 'Your Bold Text'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Italic Text',
+			id: 'i',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI],
+			run: () => this._insertBetweenSelection('*', '*', 'Your Italic Text'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Quote',
+			id: 'q',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyQ],
+			run: () => this._insertQuote(),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Ordered List',
+			id: 'ol',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyO],
+			run: () => this._insertAtCurrentLine('1. '),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Unordered List',
+			id: 'ul',
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU],
+			run: () => this._insertAtCurrentLine('- '),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Code',
+			id: 'code',
+			//keybindings: [KeyMod.CtrlCmd | KeyCode.KeyM | KeyMod.CtrlCmd | KeyCode.KeyC],
+			run: () => this._insertBetweenSelection('`', '`', 'Code'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Fenced Code',
+			id: 'fenced-code',
+			//keybindings: [KeyMod.CtrlCmd | KeyCode.KeyM | KeyMod.CtrlCmd | KeyCode.KeyF],
+			run: () => this._insertBetweenSelection('```', '```', 'Code'),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Line',
+			id: 'line',
+			//keybindings: [KeyMod.CtrlCmd | KeyCode.KeyM | KeyMod.CtrlCmd | KeyCode.KeyC],
+			run: () => this._insertLine(),
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Link',
+			id: 'link',
+			//keybindings: [KeyMod.CtrlCmd | KeyCode.KeyM | KeyMod.CtrlCmd | KeyCode.KeyC],
+			run: () => this._insertLink(),
+			// TODO: Open in modal
+		});
+		this.#editor?.monacoEditor?.addAction({
+			label: 'Add Image',
+			id: 'image',
+			//keybindings: [KeyMod.CtrlCmd | KeyCode.KeyM | KeyMod.CtrlCmd | KeyCode.KeyC],
+			run: () => this._insertMedia(),
+			// TODO: Open in modal
+		});
+	}
+
+	private _focusEditor(): void {
+		// If we press one of the action buttons manually (which is outside the editor), we need to focus the editor again.
+		this.#editor?.monacoEditor?.focus();
+	}
+
+	private _insertLink() {
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const selectedValue = this.#editor?.getValueInRange(selection);
+
+		this._focusEditor(); // Focus before opening modal
+		const modalContext = this._modalContext?.open(UMB_LINK_PICKER_MODAL, {
+			index: null,
+			link: { name: selectedValue },
+			config: {},
+		});
+
+		modalContext
+			?.onSubmit()
+			.then((data) => {
+				const name = this.localize.term('general_name');
+				const url = this.localize.term('general_url');
+
+				this.#editor?.monacoEditor?.executeEdits('', [
+					{ range: selection, text: `[${data.link.name || name}](${data.link.url || url})` },
+				]);
+
+				if (!data.link.name) {
+					this.#editor?.select({
+						startColumn: selection.startColumn + 1,
+						endColumn: selection.startColumn + 1 + name.length,
+						endLineNumber: selection.startLineNumber,
+						startLineNumber: selection.startLineNumber,
+					});
+				} else if (!data.link.url) {
+					this.#editor?.select({
+						startColumn: selection.startColumn + 3 + data.link.name.length,
+						endColumn: selection.startColumn + 3 + data.link.name.length + url.length,
+						endLineNumber: selection.startLineNumber,
+						startLineNumber: selection.startLineNumber,
+					});
+				}
+			})
+			.catch(() => undefined)
+			.finally(() => this._focusEditor());
+	}
+
+	private _insertMedia() {
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const alt = this.#editor?.getValueInRange(selection);
+
+		this._focusEditor(); // Focus before opening modal
+		const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {});
+
+		modalContext
+			?.onSubmit()
+			.then((data) => {
+				const imgUrl = data.selection[0];
+				this.#editor?.monacoEditor?.executeEdits('', [
+					//TODO: media url
+					{ range: selection, text: `[${alt || 'alt text'}](TODO: id-${imgUrl || this.localize.term('general_url')})` },
+				]);
+
+				if (!alt?.length) {
+					this.#editor?.select({
+						startColumn: selection.startColumn + 1,
+						endColumn: selection.startColumn + 9,
+						endLineNumber: selection.startLineNumber,
+						startLineNumber: selection.startLineNumber,
+					});
+				}
+			})
+			.catch(() => undefined)
+			.finally(() => this._focusEditor());
+	}
+
+	private _insertLine() {
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const endColumn = this.#editor?.monacoModel?.getLineMaxColumn(selection.endLineNumber) ?? 1;
+
+		if (endColumn === 1) {
+			this.#editor?.insertAtPosition('---\n', {
+				lineNumber: selection.endLineNumber,
+				column: 1,
+			});
+		} else {
+			this.#editor?.insertAtPosition('\n---\n', {
+				lineNumber: selection.endLineNumber,
+				column: endColumn,
+			});
+		}
+		this._focusEditor();
+	}
+
+	private _insertBetweenSelection(startValue: string, endValue: string, placeholder?: string) {
+		this._focusEditor();
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const selectedValue = this.#editor?.getValueInRange({
+			startLineNumber: selection.startLineNumber,
+			endLineNumber: selection.endLineNumber,
+			startColumn: selection.startColumn - startValue.length,
+			endColumn: selection.endColumn + endValue.length,
+		});
+
+		if (
+			selectedValue?.startsWith(startValue) &&
+			selectedValue.endsWith(endValue) &&
+			selectedValue.length > startValue.length + endValue.length
+		) {
+			//Cancel previous insert
+			this.#editor?.select({ ...selection, startColumn: selection.startColumn + startValue.length });
+			this.#editor?.monacoEditor?.executeEdits('', [
+				{
+					range: {
+						startColumn: selection.startColumn - startValue.length,
+						startLineNumber: selection.startLineNumber,
+						endColumn: selection.startColumn,
+						endLineNumber: selection.startLineNumber,
+					},
+					text: '',
+				},
+				{
+					range: {
+						startColumn: selection.endColumn + startValue.length,
+						startLineNumber: selection.startLineNumber,
+						endColumn: selection.endColumn,
+						endLineNumber: selection.startLineNumber,
+					},
+					text: '',
+				},
+			]);
+		} else {
+			// Insert
+			this.#editor?.insertAtPosition(startValue, {
+				lineNumber: selection.startLineNumber,
+				column: selection.startColumn,
+			});
+			this.#editor?.insertAtPosition(endValue, {
+				lineNumber: selection.endLineNumber,
+				column: selection.endColumn + startValue.length,
+			});
+
+			this.#editor?.select({
+				startLineNumber: selection.startLineNumber,
+				endLineNumber: selection.endLineNumber,
+				startColumn: selection.startColumn + startValue.length,
+				endColumn: selection.endColumn + startValue.length,
+			});
+		}
+
+		// if no text were selected when action fired
+		if (selection.startColumn === selection.endColumn && selection.startLineNumber === selection.endLineNumber) {
+			if (placeholder) {
+				this.#editor?.insertAtPosition(placeholder, {
+					lineNumber: selection.startLineNumber,
+					column: selection.startColumn + startValue.length,
+				});
+			}
+
+			this.#editor?.select({
+				startLineNumber: selection.startLineNumber,
+				endLineNumber: selection.endLineNumber,
+				startColumn: selection.startColumn + startValue.length,
+				endColumn: selection.startColumn + startValue.length + (placeholder?.length ?? 0),
+			});
+		}
+	}
+
+	private _insertAtCurrentLine(value: string) {
+		this._focusEditor();
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const previousLineValue = this.#editor?.getValueInRange({
+			...selection,
+			startLineNumber: selection.startLineNumber - 1,
+		});
+		const lineValue = this.#editor?.getValueInRange({ ...selection, startColumn: 1 });
+
+		// Regex: check if the line starts with a positive number followed by dot and a space
+		if (lineValue?.startsWith(value) || lineValue?.match(/^[1-9]\d*\.\s.*/)) {
+			// Cancel previous insert
+			this.#editor?.monacoEditor?.executeEdits('', [
+				{
+					range: {
+						startColumn: 1,
+						startLineNumber: selection.startLineNumber,
+						endColumn: 1 + value.length,
+						endLineNumber: selection.startLineNumber,
+					},
+					text: '',
+				},
+			]);
+		} else if (value.match(/^[1-9]\d*\.\s.*/) && previousLineValue?.match(/^[1-9]\d*\.\s.*/)) {
+			// Check if the PREVIOUS line starts with a positive number followed by dot and a space. If yes, get that number.
+			const previousNumber = parseInt(previousLineValue, 10);
+			this.#editor?.insertAtPosition(`${previousNumber + 1}. `, {
+				lineNumber: selection.startLineNumber,
+				column: 1,
+			});
+		} else {
+			// Insert
+			this.#editor?.insertAtPosition(value, {
+				lineNumber: selection.startLineNumber,
+				column: 1,
+			});
+		}
+	}
+
+	private _insertQuote() {
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		let index = selection.startLineNumber;
+		for (index; index <= selection.endLineNumber; index++) {
+			const line = this.#editor?.getValueInRange({
+				startLineNumber: index,
+				endLineNumber: index,
+				startColumn: 1,
+				endColumn: 3,
+			});
+			if (!line?.startsWith('> ')) {
+				this.#editor?.insertAtPosition('> ', {
+					lineNumber: index,
+					column: 1,
+				});
+			}
+		}
+		this._focusEditor();
+	}
+
+	private _renderBasicActions() {
+		return html`<div>
+				<uui-button
+					compact
+					look="secondary"
+					label="Heading"
+					title="Heading"
+					@click=${() => this.#editor?.monacoEditor?.getAction('h1')?.run()}>
+					H
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Bold"
+					title="Bold"
+					@click=${() => this.#editor?.monacoEditor?.getAction('b')?.run()}>
+					B
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Italic"
+					title="Italic"
+					@click=${() => this.#editor?.monacoEditor?.getAction('i')?.run()}>
+					I
+				</uui-button>
+			</div>
+			<div>
+				<uui-button
+					compact
+					look="secondary"
+					label="Quote"
+					title="Quote"
+					@click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}>
+					<uui-icon name="umb:quote"></uui-icon>
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Ordered List"
+					title="Ordered List"
+					@click=${() => this.#editor?.monacoEditor?.getAction('ol')?.run()}>
+					<uui-icon name="umb:ordered-list"></uui-icon>
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Unordered List"
+					title="Unordered List"
+					@click=${() => this.#editor?.monacoEditor?.getAction('ul')?.run()}>
+					<uui-icon name="umb:bulleted-list"></uui-icon>
+				</uui-button>
+			</div>
+			<div>
+				<uui-button
+					compact
+					look="secondary"
+					label="Fenced Code"
+					title="Fenced Code"
+					@click=${() => this.#editor?.monacoEditor?.getAction('fenced-code')?.run()}>
+					<uui-icon name="umb:code"></uui-icon>
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Line"
+					title="Line"
+					@click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}>
+					<uui-icon name="umb:width"></uui-icon>
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Link"
+					title="Link"
+					@click=${() => this.#editor?.monacoEditor?.getAction('link')?.run()}>
+					<uui-icon name="umb:link"></uui-icon>
+				</uui-button>
+				<uui-button
+					compact
+					look="secondary"
+					label="Image"
+					title="Image"
+					@click=${() => this.#editor?.monacoEditor?.getAction('image')?.run()}>
+					<uui-icon name="umb:picture"></uui-icon>
+				</uui-button>
+			</div>
+			<div>
+				<uui-button
+					compact
+					label="Press F1 for all actions"
+					title="Press F1 for all actions"
+					@click=${() => {
+						this._focusEditor();
+						this.#editor?.monacoEditor?.trigger('', 'editor.action.quickCommand', '');
+					}}>
+					<uui-key>F1</uui-key>
+				</uui-button>
+			</div>`;
+	}
+
+	onKeyPress(e: KeyboardEvent) {
+		if (e.key !== 'Enter') return;
+		//TODO: Tab does not seem to trigger keyboard events. We need to make some logic for ordered and unordered lists when tab is being used.
+
+		const selection = this.#editor?.getSelections()[0];
+		if (!selection) return;
+
+		const lineValue = this.#editor?.getValueInRange({ ...selection, startColumn: 1 }).trimStart();
+		if (!lineValue) return;
+
+		if (lineValue.startsWith('- ') && lineValue.length > 2) {
+			requestAnimationFrame(() => this.#editor?.insert('- '));
+		} else if (lineValue.match(/^[1-9]\d*\.\s.*/) && lineValue.length > 3) {
+			const previousNumber = parseInt(lineValue, 10);
+			requestAnimationFrame(() => this.#editor?.insert(`${previousNumber + 1}. `));
+		}
+	}
+
 	render() {
-		return html` <div id="actions"></div>
-			<umb-code-editor language="markdown" .code=${this.value as string}></umb-code-editor>
+		//TODO: Why is the theme dark in Backoffice, but light in Storybook?
+		return html` <div id="actions">${this._renderBasicActions()}</div>
+			<umb-code-editor
+				language="markdown"
+				.code=${this.value as string}
+				@keypress=${this.onKeyPress}
+				theme="umb-light"></umb-code-editor>
 			${this.renderPreview()}`;
 	}
 
@@ -63,6 +544,16 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 			#actions {
 				background-color: var(--uui-color-background-alt);
 				display: flex;
+				gap: var(--uui-size-6);
+			}
+
+			#actions div {
+				display: flex;
+				gap: var(--uui-size-1);
+			}
+
+			#actions div:last-child {
+				margin-left: auto;
 			}
 
 			umb-code-editor {
@@ -70,6 +561,10 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 				border-radius: var(--uui-border-radius);
 				border: 1px solid var(--uui-color-divider-emphasis);
 			}
+
+			uui-button {
+				width: 50px;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-container-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-container-structure-helper.class.ts
index 230b5b4f80..d6fa9d50d9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-container-structure-helper.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-container-structure-helper.class.ts
@@ -198,6 +198,16 @@ export class UmbContentTypeContainerStructureHelper {
 
 	/** Manipulate methods: */
 
+	async insertContainer(container: PropertyTypeContainerModelBaseModel, sortOrder = 0) {
+		await this.#init;
+		if (!this.#structure) return false;
+
+		const newContainer = { ...container, sortOrder };
+
+		await this.#structure.insertContainer(null, newContainer);
+		return true;
+	}
+
 	async addContainer(parentContainerId?: string | null, sortOrder?: number) {
 		if (!this.#structure) return;
 
@@ -206,9 +216,10 @@ export class UmbContentTypeContainerStructureHelper {
 
 	async removeContainer(groupId: string) {
 		await this.#init;
-		if (!this.#structure) return;
+		if (!this.#structure) return false;
 
-		return await this.#structure.removeContainer(null, groupId);
+		await this.#structure.removeContainer(null, groupId);
+		return true;
 	}
 
 	async partialUpdateContainer(containerId: string, partialUpdate: Partial<PropertyTypeContainerModelBaseModel>) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts
index f0be7b3295..add77202a9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts
@@ -186,6 +186,18 @@ export class UmbContentTypePropertyStructureManager<R extends UmbDetailRepositor
 		return container;
 	}
 
+	async insertContainer(contentTypeId: string | null, container: PropertyTypeContainerModelBaseModel) {
+		await this.#init;
+		contentTypeId = contentTypeId ?? this.#ownerContentTypeId!;
+
+		const frozenContainers = this.#contentTypes.getValue().find((x) => x.id === contentTypeId)?.containers ?? [];
+
+		const containers = appendToFrozenArray(frozenContainers, container, (x) => x.id === container.id);
+
+		console.log(frozenContainers, containers);
+		this.#contentTypes.updateOne(contentTypeId, { containers });
+	}
+
 	makeContainerNameUniqueForOwnerContentType(
 		newName: string,
 		containerType: PropertyContainerTypes = 'Tab',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
index 4e04199eb3..3c9f545096 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
@@ -1,7 +1,7 @@
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbCultureRepository } from '../../repository/culture.repository.js';
 import { html, repeat, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin, UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { CultureReponseModel } from '@umbraco-cms/backoffice/backend-api';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts
index d03f19fe2e..cd901e0044 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts
@@ -1,6 +1,6 @@
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { html, nothing, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
index b83fd56941..95648818e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
@@ -1,6 +1,6 @@
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbEntityBulkAction } from './entity-bulk-action.js';
 import { html, ifDefined, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 import { ManifestEntityBulkAction } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/change.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/change.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/change.event.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/change.event.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/delete.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/delete.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/delete.event.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/delete.event.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/executed.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/executed.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/executed.event.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/executed.event.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/input.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/input.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/input.event.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/input.event.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/umb-events/selected.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/event/selected.event.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/umb-events/selected.event.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/event/selected.event.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
index aece02e1a1..df38f1f184 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
@@ -153,6 +153,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		return html`<uui-label for="search-input">Link to page</uui-label>
 			<uui-input id="search-input" placeholder="Type to search" label="Type to search"></uui-input>
 			<umb-tree
+				?multiple=${false}
 				alias="Umb.Tree.Documents"
 				@selected=${(event: CustomEvent) => this._handleSelectionChange(event, 'document')}
 				.selection=${[this._selectedKey ?? '']}
@@ -163,6 +164,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 			<uui-label>Link to media</uui-label>
 
 			<umb-tree
+				?multiple=${false}
 				alias="Umb.Tree.Media"
 				@selected=${(event: CustomEvent) => this._handleSelectionChange(event, 'media')}
 				.selection=${[this._selectedKey ?? '']}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
index 0020d86e6f..05435c7095 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
@@ -1,8 +1,8 @@
+import { UmbInputEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { css, html, ifDefined, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbTemplateModalData, UmbTemplateModalResult } from '@umbraco-cms/backoffice/modal';
-import { UmbInputEvent } from '@umbraco-cms/backoffice/events';
 import { TemplateResource, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
@@ -41,7 +41,7 @@ export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModa
 	async #saveTemplate() {
 		const { error } = await tryExecuteAndNotify(
 			this,
-			TemplateResource.putTemplateById({ id: this._id, requestBody: this._template })
+			TemplateResource.putTemplateById({ id: this._id, requestBody: this._template }),
 		);
 		if (!error) {
 			console.log(`template (${this._id}) saved successfully`);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index 3ecae28a7d..3287abbb50 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -1,10 +1,10 @@
+import { UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbTreeElement } from '../../../tree/tree.element.js';
 import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreePickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
 
 @customElement('umb-tree-picker-modal')
 export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentationModel> extends UmbModalBaseElement<
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
index a77b907fee..bb0eac8fad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
@@ -1,3 +1,4 @@
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbItemRepository, UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import {
@@ -9,7 +10,6 @@ import {
 } from '@umbraco-cms/backoffice/modal';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 
 export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel> {
 	host: UmbControllerHostElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
index d9b22159e5..a748af85ec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -1,22 +1,64 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
  * @element umb-property-editor-ui-dropdown
  */
 @customElement('umb-property-editor-ui-dropdown')
 export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	value = '';
+	#value = '';
+	@property({ type: String })
+	public get value(): string {
+		return this.#value;
+	}
+	public set value(value: string | undefined) {
+		this.#value = value?.trim() || '';
+	}
+
+	@state()
+	_multiple?: boolean;
+
+	@state()
+	private _list: Array<Option> = [];
 
 	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
+		this._multiple = config?.getValueByAlias('multiple');
+
+		const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');
+		if (!listData) return;
+
+		// formatting the items in the dictionary into an array
+		const sortedItems = [];
+		const values = Object.values<{ value: string; sortOrder: number }>(listData);
+		const keys = Object.keys(listData);
+		for (let i = 0; i < values.length; i++) {
+			sortedItems.push({ key: keys[i], sortOrder: values[i].sortOrder, value: values[i].value });
+		}
+
+		// ensure the items are sorted by the provided sort order
+		sortedItems.sort((a, b) => {
+			return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0;
+		});
+
+		this._list = sortedItems.map((x) => ({ value: x.value, name: x.value, selected: x.value === this.value }));
+	}
+
+	#onChange(event: UUISelectEvent) {
+		this.value = event.target.value as string;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-dropdown</div>`;
+		return html`<umb-input-dropdown-list
+			@change="${this.#onChange}"
+			?multiple=${this._multiple}
+			.options="${this._list}"></umb-input-dropdown-list>`;
 	}
 
 	static styles = [UmbTextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index b56c82b7bb..48a69ec19b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -5,7 +5,7 @@ import {
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 	UMB_CONFIRM_MODAL,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
index cad33d5410..e099a27904 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
@@ -1,7 +1,7 @@
 import UmbInputMultipleTextStringItemElement from '../input-multiple-text-string-item/input-multiple-text-string-item.element.js';
 import { css, html, nothing, repeat, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/events';
+import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 export type MultipleTextStringValue = Array<MultipleTextStringValueItem>;
@@ -86,12 +86,12 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this._items.length < this.min
+			() => !!this.min && this._items.length < this.min,
 		);
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this._items.length > this.max
+			() => !!this.max && this._items.length > this.max,
 		);
 	}
 
@@ -138,7 +138,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 	async #focusNewItem() {
 		await this.updateComplete;
 		const items = this.shadowRoot?.querySelectorAll(
-			'umb-input-multiple-text-string-item'
+			'umb-input-multiple-text-string-item',
 		) as NodeListOf<UmbInputMultipleTextStringItemElement>;
 		const newItem = items[items.length - 1];
 		newItem.focus();
@@ -173,7 +173,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 						?disabled=${this.disabled}
 						?readonly=${this.readonly}
 						required
-						required-message="Item ${index + 1} is missing a value"></umb-input-multiple-text-string-item>`
+						required-message="Item ${index + 1} is missing a value"></umb-input-multiple-text-string-item>`,
 			)}
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 3a8cc5a502..93bcb6fe6b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -1,3 +1,4 @@
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbPropertyValueChangeEvent } from '../../index.js';
 import {
 	UmbInputMultipleTextStringElement,
@@ -6,17 +7,13 @@ import {
 import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
  * @element umb-property-editor-ui-multiple-text-string
  */
 @customElement('umb-property-editor-ui-multiple-text-string')
-export class UmbPropertyEditorUIMultipleTextStringElement
-	extends UmbLitElement
-	implements UmbPropertyEditorUiElement
-{
+export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Array })
 	public value: MultipleTextStringValue = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repositories/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repositories/index.ts
deleted file mode 100644
index a7d3719d54..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/repositories/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './repository.interface.js';
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/collection-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/collection-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/collection-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/collection-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repositories/config/config.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/config/config.repository.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/repositories/config/config.repository.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/config/config.repository.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/copy-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/copy-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/copy-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/copy-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/collection-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/collection-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/collection-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/collection-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/copy-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/copy-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/copy-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/copy-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/data-source-response.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/data-source-response.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/data-source-response.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/data-source-response.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/data-source.interface.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/data-source.interface.ts
index 23689c83d9..c029560648 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/data-source.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/data-source.interface.ts
@@ -5,11 +5,11 @@ export interface UmbDataSource<
 	CreateResponseType,
 	UpdateRequestType,
 	ResponseType,
-	CreateScaffoldPresetType = Partial<CreateRequestType>
+	CreateScaffoldPresetType = Partial<CreateRequestType>,
 > {
 	createScaffold(
 		parentId: string | null,
-		preset?: Partial<CreateRequestType> | CreateScaffoldPresetType
+		preset?: Partial<CreateRequestType> | CreateScaffoldPresetType,
 	): Promise<DataSourceResponse<CreateRequestType>>;
 	get(unique: string): Promise<DataSourceResponse<ResponseType>>;
 	insert(data: CreateRequestType): Promise<DataSourceResponse<CreateResponseType>>;
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-paged-response-data.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-paged-response-data.function.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-paged-response-data.function.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-paged-response-data.function.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-paged-response-data.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-paged-response-data.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-paged-response-data.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-paged-response-data.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-response-data.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-response-data.function.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-response-data.function.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-response-data.function.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-response-data.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-response-data.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/extend-data-source-response-data.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/extend-data-source-response-data.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/folder-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/folder-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/folder-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/folder-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/item-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/item-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/item-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/item-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/move-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/move-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/move-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/move-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/data-source/tree-data-source.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/tree-data-source.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/data-source/tree-data-source.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/data-source/tree-data-source.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/detail-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/detail-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/detail-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/detail-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/folder-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/folder-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/folder-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/folder-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/index.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/index.ts
index a11ca47da5..b63156a757 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/repository/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/index.ts
@@ -7,3 +7,4 @@ export * from './item-repository.interface.js';
 export * from './move-repository.interface.js';
 export * from './copy-repository.interface.js';
 export * from './repository-items.manager.js';
+export * from './repository.interface.js';
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/item-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/item-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/item-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/item-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/move-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/move-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/move-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/move-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/repository-items.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/repository-items.manager.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repositories/repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository.interface.ts
similarity index 99%
rename from src/Umbraco.Web.UI.Client/src/packages/core/repositories/repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/repository.interface.ts
index 1ea5957a38..9b2f588588 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/repositories/repository.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository.interface.ts
@@ -1,5 +1,4 @@
 export interface UmbRepository<EntityType = unknown> {
-
 	/**
 	 * Get the type of the entity
 	 *
@@ -8,5 +7,4 @@ export interface UmbRepository<EntityType = unknown> {
 	 * @returns   undefined
 	 */
 	readonly ENTITY_TYPE: EntityType;
-
 }
diff --git a/src/Umbraco.Web.UI.Client/src/shared/repository/tree-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/tree-repository.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/shared/repository/tree-repository.interface.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/repository/tree-repository.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
index 1e9c5fe3a6..da70add6b9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
@@ -6,7 +6,7 @@ import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backof
 import { createExtensionClass } from '@umbraco-cms/backoffice/extension-api';
 import { ProblemDetails, TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
-import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
+import { UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
 
 // TODO: update interface
 export interface UmbTreeContext<TreeItemType extends TreeItemPresentationModel> extends UmbBaseController {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action-menu/workspace-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action-menu/workspace-action-menu.element.ts
index 3f78226d8a..d4d7fd322c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action-menu/workspace-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action-menu/workspace-action-menu.element.ts
@@ -1,6 +1,6 @@
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 @customElement('umb-workspace-action-menu')
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action/workspace-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action/workspace-action.element.ts
index 1b21bf25bc..0e64bb260e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action/workspace-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-action/workspace-action.element.ts
@@ -1,8 +1,8 @@
 import { UmbWorkspaceAction } from './index.js';
-import { css, html, customElement, property, state, query } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
-import type { UUIButtonElement, UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
+import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extension-registry';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts
index 4ff5c395bb..0846447441 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts
@@ -15,5 +15,4 @@ export interface UmbWorkspaceContextInterface<DataType = unknown> {
 	isNew: Observable<boolean | undefined>;
 	getIsNew(): boolean | undefined;
 	setIsNew(value: boolean): void;
-
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts
index 790f96c653..d9ec50b0ad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts
@@ -25,7 +25,7 @@ export abstract class UmbWorkspaceContext<RepositoryType, EntityType extends Umb
 	isNew = this.#isNew.asObservable();
 
 	constructor(host: UmbControllerHostElement, workspaceAlias: string, repository: RepositoryType) {
-		super(host)
+		super(host);
 		this.host = host;
 		this.workspaceAlias = workspaceAlias;
 		this.repository = repository;
@@ -60,5 +60,4 @@ export abstract class UmbWorkspaceContext<RepositoryType, EntityType extends Umb
 	abstract getEntityType(): string; // TODO: consider of this should be on the repository because a repo is responsible for one entity type
 	abstract getData(): EntityType | undefined;
 	abstract save(): Promise<void>;
-
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
index 8314f0f48f..54841ad11f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
@@ -11,15 +11,6 @@ import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { generateAlias } from '@umbraco-cms/backoffice/utils';
 @customElement('umb-document-type-workspace-editor')
 export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
-	@state()
-	private _icon?: string;
-
-	@state()
-	private _iconColorAlias?: string;
-	// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
-
-	#workspaceContext?: UmbDocumentTypeWorkspaceContext;
-
 	@state()
 	private _name?: string;
 
@@ -29,6 +20,15 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _aliasLocked = true;
 
+	@state()
+	private _icon?: string;
+
+	@state()
+	private _iconColorAlias?: string;
+	// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
+
+	#workspaceContext?: UmbDocumentTypeWorkspaceContext;
+
 	private _modalContext?: UmbModalManagerContext;
 
 	constructor() {
@@ -59,7 +59,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 				}
 				this.removeControllerByAlias('_observeIsNew');
 			},
-			'_observeIsNew'
+			'_observeIsNew',
 		);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts
new file mode 100644
index 0000000000..bb0ace3e49
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts
@@ -0,0 +1,36 @@
+import {
+	DocumentTypePropertyTypeContainerResponseModel,
+	PropertyTypeContainerModelBaseModel,
+} from '@umbraco-cms/backoffice/backend-api';
+import { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
+
+const SORTER_CONFIG_HORIZONTAL: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+	compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => {
+		return element.getAttribute('data-umb-tabs-id') === model.id;
+	},
+	querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
+		return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`);
+	},
+	identifier: 'content-type-tabs-sorter',
+	itemSelector: '[data-umb-tabs-id]',
+	containerSelector: '#tabs-group',
+	disabledItemSelector: '[inherited]',
+	resolveVerticalDirection: () => {
+		return false;
+	},
+};
+
+const SORTER_CONFIG_VERTICAL: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+	compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => {
+		return element.getAttribute('data-umb-property-id') === model.id;
+	},
+	querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
+		return container.querySelector(`[data-umb-property-id='` + modelEntry.id + `']`);
+	},
+	identifier: 'content-type-property-sorter',
+	itemSelector: '[data-umb-property-id]',
+	containerSelector: '#property-list',
+	disabledItemSelector: '[inherited]',
+};
+
+export { SORTER_CONFIG_VERTICAL, SORTER_CONFIG_HORIZONTAL };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts
index 8abc8eb4f4..057260abaf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts
@@ -8,6 +8,7 @@ import type {
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = DocumentTypeResponseModel;
 export class UmbDocumentTypeWorkspaceContext
@@ -37,6 +38,9 @@ export class UmbDocumentTypeWorkspaceContext
 
 	readonly structure;
 
+	#isSorting = new UmbBooleanState(undefined);
+	isSorting = this.#isSorting.asObservable();
+
 	constructor(host: UmbControllerHostElement) {
 		super(host, 'Umb.Workspace.DocumentType', new UmbDocumentTypeRepository(host));
 
@@ -61,6 +65,14 @@ export class UmbDocumentTypeWorkspaceContext
 		this.cleanup = this.structure.ownerContentTypeObservablePart((data) => data?.defaultTemplateId);
 	}
 
+	getIsSorting() {
+		return this.#isSorting.getValue();
+	}
+
+	setIsSorting(isSorting: boolean) {
+		this.#isSorting.next(isSorting);
+	}
+
 	getData() {
 		return this.structure.getOwnerContentType() || {};
 	}
@@ -120,6 +132,7 @@ export class UmbDocumentTypeWorkspaceContext
 		if (!data) return undefined;
 
 		this.setIsNew(true);
+		this.setIsSorting(false);
 		//this.#draft.next(data);
 		return { data } || undefined;
 		// TODO: Is this wrong? should we return { data }??
@@ -130,6 +143,7 @@ export class UmbDocumentTypeWorkspaceContext
 		if (!data) return undefined;
 
 		this.setIsNew(false);
+		this.setIsSorting(false);
 		//this.#draft.next(data);
 		return { data } || undefined;
 		// TODO: Is this wrong? should we return { data }??
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
index 2d77e819c7..97f890bfd1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
@@ -1,7 +1,7 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
 import './document-type-workspace-view-edit-property.element.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbContentTypePropertyStructureHelper, PropertyContainerTypes } from '@umbraco-cms/backoffice/content-type';
 import { UmbSorterController, UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -12,18 +12,20 @@ import {
 } from '@umbraco-cms/backoffice/backend-api';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+
 const SORTER_CONFIG: UmbSorterConfig<DocumentTypePropertyTypeResponseModel> = {
 	compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeResponseModel) => {
 		return element.getAttribute('data-umb-property-id') === model.id;
 	},
 	querySelectModelToElement: (container: HTMLElement, modelEntry: DocumentTypePropertyTypeResponseModel) => {
-		return container.querySelector('data-umb-property-id[' + modelEntry.id + ']');
+		return container.querySelector('data-umb-property-id=[' + modelEntry.id + ']');
 	},
 	identifier: 'content-type-property-sorter',
 	itemSelector: '[data-umb-property-id]',
 	disabledItemSelector: '[inherited]',
 	containerSelector: '#property-list',
 };
+
 @customElement('umb-document-type-workspace-view-edit-properties')
 export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
 	#propertySorter = new UmbSorterController(this, {
@@ -32,12 +34,10 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 			let sortOrder = 0;
 			if (this._propertyStructure.length > 0) {
 				if (args.newIndex === 0) {
-					// TODO: Remove 'as any' when sortOrder is added to the model:
-					sortOrder = ((this._propertyStructure[0] as any).sortOrder ?? 0) - 1;
+					sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1;
 				} else {
 					sortOrder =
-						((this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)] as any).sortOrder ??
-							0) + 1;
+						(this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1;
 				}
 			}
 			return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
@@ -87,6 +87,9 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 	@state()
 	protected _modalRouteNewProperty?: string;
 
+	@state()
+	_sortModeActive?: boolean;
+
 	constructor() {
 		super();
 
@@ -94,24 +97,30 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 			this._propertyStructureHelper.setStructureManager(
 				(workspaceContext as UmbDocumentTypeWorkspaceContext).structure,
 			);
+			this.observe(
+				(workspaceContext as UmbDocumentTypeWorkspaceContext).isSorting,
+				(isSorting) => {
+					this._sortModeActive = isSorting;
+					this.#setModel(isSorting);
+				},
+				'_observeIsSorting',
+			);
 		});
 		this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => {
 			this._propertyStructure = propertyStructure;
-			this.#propertySorter.setModel(this._propertyStructure);
 		});
 
 		// Note: Route for adding a new property
 		new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
 			.addAdditionalPath('new-property')
 			.onSetup(async () => {
-
 				const documentTypeId = this._ownerDocumentTypes?.find(
 					(types) => types.containers?.find((containers) => containers.id === this.containerId),
 				)?.id;
-				if(documentTypeId === undefined) return false;
+				if (documentTypeId === undefined) return false;
 				const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId);
-				if(propertyData === undefined) return false;
-				return {propertyData, documentTypeId};
+				if (propertyData === undefined) return false;
+				return { propertyData, documentTypeId };
 			})
 			.onSubmit((result) => {
 				this.#addProperty(result);
@@ -121,6 +130,14 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 			});
 	}
 
+	#setModel(isSorting?: boolean) {
+		if (isSorting) {
+			this.#propertySorter.setModel(this._propertyStructure);
+		} else {
+			this.#propertySorter.setModel([]);
+		}
+	}
+
 	connectedCallback(): void {
 		super.connectedCallback();
 		const doctypes = this._propertyStructureHelper.ownerDocumentTypes;
@@ -145,7 +162,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 		return html`<div id="property-list">
 				${repeat(
 					this._propertyStructure,
-					(property) => property.id ?? '' + property.containerId ?? '' + (property as any).sortOrder ?? '',
+					(property) => property.id ?? '' + property.containerId ?? '' + property.sortOrder ?? '',
 					(property) => {
 						// Note: This piece might be moved into the property component
 						const inheritedFromDocument = this._ownerDocumentTypes?.find(
@@ -153,11 +170,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 						);
 
 						return html`<document-type-workspace-view-edit-property
-							class="property"
 							data-umb-property-id=${ifDefined(property.id)}
 							owner-document-type-id=${ifDefined(inheritedFromDocument?.id)}
 							owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
 							?inherited=${property.containerId !== this.containerId}
+							?sort-mode-active=${this._sortModeActive}
 							.property=${property}
 							@partial-property-update=${(event: CustomEvent) => {
 								this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
@@ -169,13 +186,15 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 					},
 				)}
 			</div>
-			<uui-button
-				label=${this.localize.term('contentTypeEditor_addProprety')}
-				id="add"
-				look="placeholder"
-				href=${ifDefined(this._modalRouteNewProperty)}>
-				<umb-localize key="contentTypeEditor_addProprety">Add property</umb-localize>
-			</uui-button> `;
+			${!this._sortModeActive
+				? html`<uui-button
+						label=${this.localize.term('contentTypeEditor_addProperty')}
+						id="add"
+						look="placeholder"
+						href=${ifDefined(this._modalRouteNewProperty)}>
+						<umb-localize key="contentTypeEditor_addProperty">Add property</umb-localize>
+				  </uui-button> `
+				: ''} `;
 	}
 
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
index a980b612f7..1ab110139f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
@@ -50,6 +50,9 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 	@property({ type: Boolean })
 	public inherited?: boolean;
 
+	@property({ type: Boolean, reflect: true, attribute: 'sort-mode-active' })
+	public sortModeActive = false;
+
 	#dataTypeRepository = new UmbDataTypeRepository(this);
 
 	#modalRegistration;
@@ -82,15 +85,14 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 
 	constructor() {
 		super();
-
 		this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
 			.addUniquePaths(['propertyId'])
 			.onSetup(() => {
 				const documentTypeId = this.ownerDocumentTypeId;
-				if(documentTypeId === undefined) return false;
+				if (documentTypeId === undefined) return false;
 				const propertyData = this.property;
-				if(propertyData === undefined) return false;
-				return {propertyData, documentTypeId};
+				if (propertyData === undefined) return false;
+				return { propertyData, documentTypeId };
 			})
 			.onSubmit((result) => {
 				this._partialUpdate(result);
@@ -181,68 +183,91 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 		}
 	}
 
+	renderSortableProperty() {
+		if (!this.property) return;
+		return html`
+			<div class="sortable">
+				<uui-icon name="${this.inherited ? 'umb:merge' : 'umb:navigation'}"></uui-icon>
+				${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
+			</div>
+			<uui-input
+				type="number"
+				?readonly=${this.inherited}
+				label="sort order"
+				.value=${this.property.sortOrder ?? 0}></uui-input>
+		`;
+	}
+
 	renderEditableProperty() {
-		return this.property
-			? html`
-					<div id="header">
-						<uui-input
-							name="label"
-							id="label-input"
-							placeholder=${this.localize.term('placeholders_label')}
-							label="label"
-							.value=${this.property.name}
-							@input=${this.#onNameChange}></uui-input>
-						${this.renderPropertyAlias()}
-						<slot name="property-action-menu"></slot>
-						<p>
-							<uui-textarea
-								label="description"
-								name="description"
-								id="description-input"
-								placeholder=${this.localize.term('placeholders_enterDescription')}
-								.value=${this.property.description}
-								@input=${(e: CustomEvent) => {
-									if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value);
-								}}></uui-textarea>
-						</p>
-					</div>
-					<uui-button
-						id="editor"
-						label=${this.localize.term('contentTypeEditor_editorSettings')}
-						href=${ifDefined(this._modalRoute)}>
-						${this.renderPropertyTags()}
-						<uui-action-bar>
-							<uui-button label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
-								<uui-icon name="delete"></uui-icon>
-							</uui-button>
-						</uui-action-bar>
-					</uui-button>
-			  `
-			: '';
+		if (!this.property) return;
+
+		if (this.sortModeActive) {
+			return this.renderSortableProperty();
+		} else {
+			return html`
+				<div id="header">
+					<uui-input
+						name="label"
+						id="label-input"
+						placeholder=${this.localize.term('placeholders_label')}
+						label="label"
+						.value=${this.property.name}
+						@input=${this.#onNameChange}></uui-input>
+					${this.renderPropertyAlias()}
+					<slot name="property-action-menu"></slot>
+					<p>
+						<uui-textarea
+							label="description"
+							name="description"
+							id="description-input"
+							placeholder=${this.localize.term('placeholders_enterDescription')}
+							.value=${this.property.description}
+							@input=${(e: CustomEvent) => {
+								if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value);
+							}}></uui-textarea>
+					</p>
+				</div>
+				<uui-button
+					id="editor"
+					label=${this.localize.term('contentTypeEditor_editorSettings')}
+					href=${ifDefined(this._modalRoute)}>
+					${this.renderPropertyTags()}
+					<uui-action-bar>
+						<uui-button label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
+							<uui-icon name="delete"></uui-icon>
+						</uui-button>
+					</uui-action-bar>
+				</uui-button>
+			`;
+		}
 	}
 
 	renderInheritedProperty() {
-		return this.property
-			? html`
-					<div id="header">
-						<b>${this.property.name}</b>
-						<i>${this.property.alias}</i>
-						<p>${this.property.description}</p>
-					</div>
-					<div id="editor">
-						${this.renderPropertyTags()}
-						<uui-tag look="default" class="inherited">
-							<uui-icon name="umb:merge"></uui-icon>
-							<span class="uui-text">
-								${this.localize.term('contentTypeEditor_inheritedFrom')}
-								<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
-									${this.ownerDocumentTypeName ?? '??'}
-								</a>
-							</span>
-						</uui-tag>
-					</div>
-			  `
-			: '';
+		if (!this.property) return;
+
+		if (this.sortModeActive) {
+			return this.renderSortableProperty();
+		} else {
+			return html`
+				<div id="header">
+					<b>${this.property.name}</b>
+					<i>${this.property.alias}</i>
+					<p>${this.property.description}</p>
+				</div>
+				<div id="editor">
+					${this.renderPropertyTags()}
+					<uui-tag look="default" class="inherited">
+						<uui-icon name="umb:merge"></uui-icon>
+						<span
+							>${this.localize.term('contentTypeEditor_inheritedFrom')}
+							<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
+								${this.ownerDocumentTypeName ?? '??'}
+							</a>
+						</span>
+					</uui-tag>
+				</div>
+			`;
+		}
 	}
 
 	renderPropertyAlias() {
@@ -292,7 +317,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 	static styles = [
 		UmbTextStyles,
 		css`
-			:host {
+			:host(:not([sort-mode-active])) {
 				display: grid;
 				grid-template-columns: 200px auto;
 				column-gap: var(--uui-size-layout-2);
@@ -311,32 +336,52 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 				}
 			}
 
+			:host(:first-of-type) {
+				padding-top: 0;
+			}
 			:host(:last-of-type) {
 				border-bottom: none;
 			}
 
-			:host(:first-of-type) {
-				padding-top: 0;
+			:host([sort-mode-active]) {
+				position: relative;
+				display: flex;
+				padding: 0;
+				margin-bottom: var(--uui-size-3);
 			}
-			:host([draggable='true']) {
+
+			:host([sort-mode-active]:last-of-type) {
+				margin-bottom: 0;
+			}
+
+			:host([sort-mode-active]:not([inherited])) {
 				cursor: grab;
 			}
 
+			:host([sort-mode-active]) .sortable {
+				flex: 1;
+				display: flex;
+				background-color: var(--uui-color-divider);
+				align-items: center;
+				padding: 0 var(--uui-size-3);
+				gap: var(--uui-size-3);
+			}
+
+			:host([sort-mode-active]) uui-input {
+				max-width: 75px;
+			}
+
 			/* Placeholder style, used when property is being dragged.*/
-			:host(.--umb-sorter-placeholder) {
-				height: 2px;
-			}
-			:host(.--umb-sorter-placeholder) > div,
-			:host(.--umb-sorter-placeholder) > uui-button {
-				display: none;
+			:host(.--umb-sorter-placeholder) > * {
+				visibility: hidden;
 			}
+
 			:host(.--umb-sorter-placeholder)::after {
 				content: '';
-				grid-column: span 2;
-				width: 100%;
-				border-top: 2px solid blue;
-				border-radius: 1px;
-				/* TODO: Make use of same highlight color as UUI and the same Animation. Consider making this a component/(available style) in UUI? */
+				inset: 0;
+				position: absolute;
+				border: 1px dashed var(--uui-color-divider-emphasis);
+				border-radius: var(--uui-border-radius);
 			}
 
 			p {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
index 444cffcf24..db905f1869 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
@@ -1,15 +1,56 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 import './document-type-workspace-view-edit-properties.element.js';
 
+const SORTER_CONFIG: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+	compareElementToModel: (element: HTMLElement, model: PropertyTypeContainerModelBaseModel) => {
+		return element.getAttribute('data-umb-group-id') === model.id;
+	},
+	querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
+		return container.querySelector('data-umb-group-id=[' + modelEntry.id + ']');
+	},
+	identifier: 'content-type-group-sorter',
+	itemSelector: '[data-umb-group-id]',
+	disabledItemSelector: '[inherited]',
+	containerSelector: '#group-list',
+};
+
 @customElement('umb-document-type-workspace-view-edit-tab')
 export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
+	public sorter?: UmbSorterController<PropertyTypeContainerModelBaseModel>;
+
+	config: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+		...SORTER_CONFIG,
+		performItemInsert: async (args) => {
+			if (!this._groups) return false;
+			const oldIndex = this._groups.findIndex((group) => group.id! === args.item.id);
+			if (args.newIndex === oldIndex) return true;
+
+			let sortOrder = 0;
+			//TODO the sortOrder set is not correct
+			if (this._groups.length > 0) {
+				if (args.newIndex === 0) {
+					sortOrder = (this._groups[0].sortOrder ?? 0) - 1;
+				} else {
+					sortOrder = (this._groups[Math.min(args.newIndex, this._groups.length - 1)].sortOrder ?? 0) + 1;
+				}
+
+				if (sortOrder !== args.item.sortOrder) {
+					await this._groupStructureHelper.partialUpdateContainer(args.item.id!, { sortOrder });
+				}
+			}
+
+			return true;
+		},
+	};
+
 	private _ownerTabId?: string | null;
 
 	// TODO: get rid of this:
@@ -59,11 +100,28 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 	@state()
 	_hasProperties = false;
 
+	@state()
+	_sortModeActive?: boolean;
+
 	constructor() {
 		super();
 
+		this.sorter = new UmbSorterController(this, this.config);
+
 		this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => {
 			this._groupStructureHelper.setStructureManager((context as UmbDocumentTypeWorkspaceContext).structure);
+			this.observe(
+				(context as UmbDocumentTypeWorkspaceContext).isSorting,
+				(isSorting) => {
+					this._sortModeActive = isSorting;
+					if (isSorting) {
+						this.sorter?.setModel(this._groups);
+					} else {
+						this.sorter?.setModel([]);
+					}
+				},
+				'_observeIsSorting',
+			);
 		});
 		this.observe(this._groupStructureHelper.containers, (groups) => {
 			this._groups = groups;
@@ -92,42 +150,62 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 						</uui-box>
 				  `
 				: ''}
-			${repeat(
-				this._groups,
-				(group) => group.id ?? '' + group.name,
-				(group) => html`
+			<div id="group-list">
+				${repeat(
+					this._groups,
+					(group) => group.id ?? '' + group.name,
+					(group) => html`<span data-umb-group-id=${ifDefined(group.id)}>
 					<uui-box>
 						${
 							this._groupStructureHelper.isOwnerChildContainer(group.id!)
 								? html`
 										<div slot="header">
-											<uui-input
-												label="Group name"
-												placeholder="Enter a group name"
-												value=${group.name ?? ''}
-												@change=${(e: InputEvent) => {
-													const newName = (e.target as HTMLInputElement).value;
-													this._groupStructureHelper.updateContainerName(group.id!, group.parentId ?? null, newName);
-												}}>
-											</uui-input>
+											<div>
+												${this._sortModeActive ? html`<uui-icon name="umb:navigation"></uui-icon>` : ''}
+
+												<uui-input
+													label="Group name"
+													placeholder="Enter a group name"
+													value=${group.name ?? ''}
+													@change=${(e: InputEvent) => {
+														const newName = (e.target as HTMLInputElement).value;
+														this._groupStructureHelper.updateContainerName(group.id!, group.parentId ?? null, newName);
+													}}>
+												</uui-input>
+											</div>
+											${this._sortModeActive
+												? html`<uui-input type="number" label="sort order" .value=${group.sortOrder ?? 0}></uui-input>`
+												: ''}
 										</div>
 								  `
-								: html`<div slot="header"><b>${group.name ?? ''}</b> (Inherited)</div>`
+								: html`<div slot="header">
+										<div><uui-icon name="umb:merge"></uui-icon><b>${group.name ?? ''}</b> (Inherited)</div>
+										${!this._sortModeActive
+											? html`<uui-input
+													readonly
+													type="number"
+													label="sort order"
+													.value=${group.sortOrder ?? 0}></uui-input>`
+											: ''}
+								  </div>`
 						}
 					</div>
 					<umb-document-type-workspace-view-edit-properties
 						container-id=${ifDefined(group.id)}
 						container-type="Group"
 						container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
-				</uui-box>`,
-			)}
-			<uui-button
-				label=${this.localize.term('contentTypeEditor_addGroup')}
-				id="add"
-				look="placeholder"
-				@click=${this.#onAddGroup}>
-				${this.localize.term('contentTypeEditor_addGroup')}
-			</uui-button>
+				</uui-box></span>`,
+				)}
+			</div>
+			${!this._sortModeActive
+				? html`<uui-button
+						label=${this.localize.term('contentTypeEditor_addGroup')}
+						id="add"
+						look="placeholder"
+						@click=${this.#onAddGroup}>
+						${this.localize.term('contentTypeEditor_addGroup')}
+				  </uui-button>`
+				: ''}
 		`;
 	}
 
@@ -138,12 +216,48 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 				width: 100%;
 			}
 
-			#add:not(:first-child) {
-				width: 100%;
+			#add:first-child {
 				margin-top: var(--uui-size-layout-1);
 			}
-			uui-box:not(:first-child) {
-				margin-top: var(--uui-size-layout-1);
+			uui-box {
+				margin-bottom: var(--uui-size-layout-1);
+			}
+
+			[data-umb-group-id] {
+				display: block;
+				position: relative;
+			}
+
+			div[slot='header'] {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			div[slot='header'] > div {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-3);
+			}
+
+			uui-input[type='number'] {
+				max-width: 75px;
+			}
+
+			.sorting {
+				cursor: grab;
+			}
+
+			.--umb-sorter-placeholder > uui-box {
+				visibility: hidden;
+			}
+
+			.--umb-sorter-placeholder::after {
+				content: '';
+				inset: 0;
+				position: absolute;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
index 0c367870cd..641e7f909e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
@@ -1,22 +1,69 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
 import type { UmbDocumentTypeWorkspaceViewEditTabElement } from './document-type-workspace-view-edit-tab.element.js';
-import { css, html, customElement, state, repeat, nothing, query } from '@umbraco-cms/backoffice/external/lit';
-import { UUIInputElement, UUIInputEvent, UUITabElement } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state, repeat, nothing, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { encodeFolderName, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	DocumentTypePropertyTypeContainerResponseModel,
+	PropertyTypeContainerModelBaseModel,
+} from '@umbraco-cms/backoffice/backend-api';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbConfirmModalData } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+
+const SORTER_CONFIG: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+	compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => {
+		return element.getAttribute('data-umb-tabs-id') === model.id;
+	},
+	querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
+		return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`);
+	},
+	identifier: 'content-type-tabs-sorter',
+	itemSelector: '[data-umb-tabs-id]',
+	containerSelector: '#tabs-group',
+	disabledItemSelector: '[inherited]',
+	resolveVerticalDirection: () => {
+		return false;
+	},
+};
 
 @customElement('umb-document-type-workspace-view-edit')
 export class UmbDocumentTypeWorkspaceViewEditElement
 	extends UmbLitElement
 	implements UmbWorkspaceEditorViewExtensionElement
 {
+	public sorter?: UmbSorterController<PropertyTypeContainerModelBaseModel>;
+
+	config: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
+		...SORTER_CONFIG,
+		performItemInsert: async (args) => {
+			if (!this._tabs) return false;
+			const oldIndex = this._tabs.findIndex((tab) => tab.id! === args.item.id);
+			if (args.newIndex === oldIndex) return true;
+
+			let sortOrder = 0;
+			//TODO the sortOrder set is not correct
+			if (this._tabs.length > 0) {
+				if (args.newIndex === 0) {
+					sortOrder = (this._tabs[0].sortOrder ?? 0) - 1;
+				} else {
+					sortOrder = (this._tabs[Math.min(args.newIndex, this._tabs.length - 1)].sortOrder ?? 0) + 1;
+				}
+
+				if (sortOrder !== args.item.sortOrder) {
+					await this._tabsStructureHelper.partialUpdateContainer(args.item.id!, { sortOrder });
+				}
+			}
+
+			return true;
+		},
+	};
+
 	//private _hasRootProperties = false;
 	private _hasRootGroups = false;
 
@@ -32,6 +79,9 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 	@state()
 	private _activePath = '';
 
+	@state()
+	private sortModeActive?: boolean;
+
 	@state()
 	private _buttonDisabled: boolean = false;
 
@@ -41,11 +91,9 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 
 	private _modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT_TOKEN.TYPE;
 
-	@query('uui-tab')
-	private _tabElements!: UUITabElement[];
-
 	constructor() {
 		super();
+		this.sorter = new UmbSorterController(this, this.config);
 
 		//TODO: We need to differentiate between local and composition tabs (and hybrids)
 
@@ -61,6 +109,11 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this._workspaceContext = workspaceContext as UmbDocumentTypeWorkspaceContext;
 			this._tabsStructureHelper.setStructureManager((workspaceContext as UmbDocumentTypeWorkspaceContext).structure);
+			this.observe(
+				this._workspaceContext.isSorting,
+				(isSorting) => (this.sortModeActive = isSorting),
+				'_observeIsSorting',
+			);
 			this._observeRootGroups();
 		});
 
@@ -82,6 +135,16 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		);
 	}
 
+	#changeMode() {
+		this._workspaceContext?.setIsSorting(!this.sortModeActive);
+
+		if (this.sortModeActive && this._tabs) {
+			this.sorter?.setModel(this._tabs);
+		} else {
+			this.sorter?.setModel([]);
+		}
+	}
+
 	private _createRoutes() {
 		if (!this._workspaceContext || !this._tabs) return;
 		const routes: UmbRoute[] = [];
@@ -128,13 +191,13 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 	#requestRemoveTab(tab: PropertyTypeContainerModelBaseModel | undefined) {
 		const Message: UmbConfirmModalData = {
 			headline: 'Delete tab',
-			content: html`<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}
-					>Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong></umb-localize
-				>
+			content: html`<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}>
+					Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong>
+				</umb-localize>
 				<div style="color:var(--uui-color-danger-emphasis)">
-					<umb-localize key="contentTypeEditor_confirmDeleteTabNotice"
-						>This will delete all items that doesn't belong to a composition.</umb-localize
-					>
+					<umb-localize key="contentTypeEditor_confirmDeleteTabNotice">
+						This will delete all items that doesn't belong to a composition.
+					</umb-localize>
 				</div>`,
 			confirmLabel: this.localize.term('actions_delete'),
 			color: 'danger',
@@ -207,93 +270,13 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		window.history.replaceState(null, '', this._routerPath + '/tab/' + encodeFolderName(newName));
 	}
 
-	renderTabsNavigation() {
-		if (!this._tabs) return;
-		const rootTabPath = this._routerPath + '/root';
-		const rootTabActive = rootTabPath === this._activePath;
-		return html`<uui-tab-group>
-				<uui-tab
-					class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
-					label="Content"
-					.active=${rootTabActive}
-					href=${rootTabPath}>
-					<umb-localize key="general_content">Content</umb-localize>
-				</uui-tab>
-				${repeat(
-					this._tabs,
-					(tab) => tab.id! + tab.name,
-					(tab) => {
-						const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
-						const tabActive = path === this._activePath;
-						return html`<uui-tab label=${tab.name ?? 'unnamed'} .active=${tabActive} href=${path}>
-							<div class="tab">
-								${!this._tabsStructureHelper.isOwnerContainer(tab.id!)
-									? html`<uui-icon class="external" name="umb:merge"></uui-icon> `
-									: nothing}
-								${tabActive && this._tabsStructureHelper.isOwnerContainer(tab.id!)
-									? html`<uui-input
-											id="input"
-											label="Tab name"
-											look="placeholder"
-											value="${tab.name!}"
-											placeholder="Unnamed"
-											@change=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
-											@blur=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
-											@input=${() => (this._buttonDisabled = true)}
-											@focus=${(e: UUIInputEvent) => (e.target.value ? nothing : (this._buttonDisabled = true))}
-											auto-width>
-											<uui-button
-												label="Remove tab"
-												class="trash"
-												slot="append"
-												?disabled=${this._buttonDisabled}
-												@click=${() => this.#requestRemoveTab(tab)}
-												compact>
-												<uui-icon name="umb:trash"></uui-icon>
-											</uui-button>
-									  </uui-input>`
-									: html`<div class="no-edit">
-											${tab.name!}
-											${this._tabsStructureHelper.isOwnerContainer(tab.id!)
-												? html`<uui-button
-														label="Remove tab"
-														class="trash"
-														slot="append"
-														@click=${() => this.#requestRemoveTab(tab)}
-														compact>
-														<uui-icon name="umb:trash"></uui-icon>
-												  </uui-button> `
-												: nothing}
-									  </div>`}
-							</div>
-						</uui-tab>`;
-					},
-				)}
-			</uui-tab-group>
-			<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab" compact>
-				<uui-icon name="umb:add"></uui-icon>
-				Add tab
-			</uui-button>`;
-	}
-
-	renderActions() {
-		return html`<div class="tab-actions">
-			<uui-button label="Compositions" compact>
-				<uui-icon name="umb:merge"></uui-icon>
-				Compositions
-			</uui-button>
-			<uui-button label=${this.localize.term('general_reorder')} compact>
-				<uui-icon name="umb:navigation"></uui-icon>
-				<umb-localize key="general_reorder">Reorder</umb-localize>
-			</uui-button>
-		</div>`;
-	}
-
 	render() {
 		return html`
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					<div id="tabs-wrapper">${this._routerPath ? this.renderTabsNavigation() : ''}</div>
+					<div id="tabs-wrapper" class="flex">
+						${this._routerPath ? this.renderTabsNavigation() : ''} ${this.renderAddButton()}
+					</div>
 					${this.renderActions()}
 				</div>
 				<umb-router-slot
@@ -309,9 +292,141 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		`;
 	}
 
+	renderAddButton() {
+		if (this.sortModeActive) return;
+		return html`<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab" compact>
+			<uui-icon name="umb:add"></uui-icon>
+			Add tab
+		</uui-button>`;
+	}
+
+	renderActions() {
+		const sortButtonText = this.sortModeActive
+			? this.localize.term('general_reorderDone')
+			: this.localize.term('general_reorder');
+
+		return html`<div class="tab-actions">
+			<uui-button look="outline" label=${this.localize.term('contentTypeEditor_compositions')} compact>
+				<uui-icon name="umb:merge"></uui-icon>
+				${this.localize.term('contentTypeEditor_compositions')}
+			</uui-button>
+			<uui-button look="outline" label=${sortButtonText} compact @click=${this.#changeMode}>
+				<uui-icon name="umb:navigation"></uui-icon>
+				${sortButtonText}
+			</uui-button>
+		</div>`;
+	}
+
+	renderTabsNavigation() {
+		if (!this._tabs) return;
+
+		return html`<div id="tabs-group" class="flex">
+			<uui-tab-group>
+				${this.renderRootTab()}
+				${repeat(
+					this._tabs,
+					(tab) => tab.id! + tab.name,
+					(tab) => this.renderTab(tab),
+				)}
+			</uui-tab-group>
+		</div>`;
+	}
+
+	renderRootTab() {
+		const rootTabPath = this._routerPath + '/root';
+		const rootTabActive = rootTabPath === this._activePath;
+		return html`<uui-tab
+			class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
+			label=${this.localize.term('general_content')}
+			.active=${rootTabActive}
+			href=${rootTabPath}>
+			${this.localize.term('general_content')}
+		</uui-tab>`;
+	}
+
+	renderTab(tab: PropertyTypeContainerModelBaseModel) {
+		const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
+		const tabActive = path === this._activePath;
+		const tabInherited = !this._tabsStructureHelper.isOwnerContainer(tab.id!);
+
+		return html`<uui-tab
+			label=${tab.name ?? 'unnamed'}
+			.active=${tabActive}
+			href=${path}
+			data-umb-tabs-id=${ifDefined(tab.id)}>
+			${this.renderTabInner(tab, tabActive, tabInherited)}
+		</uui-tab>`;
+	}
+
+	renderTabInner(tab: PropertyTypeContainerModelBaseModel, tabActive: boolean, tabInherited: boolean) {
+		if (this.sortModeActive) {
+			return html`<div class="no-edit">
+				${tabInherited
+					? html`<uui-icon class="external" name="umb:merge"></uui-icon>${tab.name!}`
+					: html`<uui-icon name="umb:navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
+							<uui-input
+								label="sort order"
+								type="number"
+								value=${ifDefined(tab.sortOrder)}
+								style="width:50px"
+								@keypress=${(e: UUIInputEvent) => this.#changeOrderNumber(tab, e)}></uui-input>`}
+			</div>`;
+		}
+
+		if (tabActive && !tabInherited) {
+			return html`<div class="tab">
+				<uui-input
+					id="input"
+					look="placeholder"
+					placeholder="Unnamed"
+					label=${tab.name!}
+					value="${tab.name!}"
+					auto-width
+					@change=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
+					@blur=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
+					@input=${() => (this._buttonDisabled = true)}
+					@focus=${(e: UUIInputEvent) => (e.target.value ? nothing : (this._buttonDisabled = true))}>
+					${this.renderDeleteFor(tab)}
+				</uui-input>
+			</div>`;
+		}
+
+		if (tabInherited) {
+			return html`<div class="no-edit"><uui-icon name="umb:merge"></uui-icon>${tab.name!}</div>`;
+		} else {
+			return html`<div class="no-edit">${tab.name!} ${this.renderDeleteFor(tab)}</div>`;
+		}
+	}
+
+	#changeOrderNumber(tab: PropertyTypeContainerModelBaseModel, e: UUIInputEvent) {
+		if (!e.target.value || !tab.id) return;
+		const sortOrder = Number(e.target.value);
+		this._tabsStructureHelper.partialUpdateContainer(tab.id, { sortOrder });
+	}
+
+	renderDeleteFor(tab: PropertyTypeContainerModelBaseModel) {
+		return html`<uui-button
+			label=${this.localize.term('actions_remove')}
+			class="trash"
+			slot="append"
+			?disabled=${this._buttonDisabled}
+			@click=${() => this.#requestRemoveTab(tab)}
+			compact>
+			<uui-icon name="umb:trash"></uui-icon>
+		</uui-button>`;
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`
+			#buttons-wrapper {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				align-items: stretch;
+			}
+
 			:host {
 				position: relative;
 				display: flex;
@@ -329,9 +444,12 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 				flex-wrap: nowrap;
 			}
 
-			#tabs-wrapper {
+			.flex {
 				display: flex;
 			}
+			uui-tab-group {
+				flex-wrap: nowrap;
+			}
 
 			.content-tab-is-empty {
 				align-self: center;
@@ -341,28 +459,17 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 			}
 
 			uui-tab {
-				border-left: 1px solid transparent;
+				position: relative;
+				border-left: 1px hidden transparent;
 				border-right: 1px solid var(--uui-color-border);
 			}
 
-			uui-tab:not(:hover, :focus) .trash {
-				opacity: 0;
-				transition: opacity 120ms;
-			}
-
-			.tab {
-				position: relative;
-			}
-
-			.external {
-				vertical-align: sub;
-			}
-
-			uui-input:not(:focus, :hover) {
-				border: 1px solid transparent;
+			.no-edit uui-input {
+				pointer-events: auto;
 			}
 
 			.no-edit {
+				pointer-events: none;
 				display: inline-flex;
 				padding-left: var(--uui-size-space-3);
 				border: 1px solid transparent;
@@ -374,6 +481,30 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 				opacity: 1;
 				transition: opacity 120ms;
 			}
+
+			uui-tab:not(:hover, :focus) .trash {
+				opacity: 0;
+				transition: opacity 120ms;
+			}
+
+			uui-input:not(:focus, :hover) {
+				border: 1px solid transparent;
+			}
+
+			.inherited {
+				vertical-align: sub;
+			}
+
+			.--umb-sorter-placeholder > * {
+				visibility: hidden;
+			}
+
+			.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 2px;
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
index 083ed5cb3e..fcf57577cc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
@@ -9,7 +9,7 @@ import {
 	state,
 } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbTableColumn, UmbTableItem } from '@umbraco-cms/backoffice/components';
-import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
+import { UmbExecutedEvent } from '@umbraco-cms/backoffice/event';
 
 // TODO: this could be done more generic, but for now we just need it for the document table
 @customElement('umb-document-table-actions-column-layout')
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
index 1ab33f7290..a157f93c73 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts
@@ -9,7 +9,7 @@ import {
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDocumentRepository } from '@umbraco-cms/backoffice/document';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-input-document-granular-permission')
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
index d408ed2f68..3faae4637a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
@@ -3,7 +3,7 @@ import type { UmbInputLanguagePickerElement } from '../../../../components/input
 import type { UmbInputCultureSelectElement } from '@umbraco-cms/backoffice/culture';
 import { UUIBooleanInputEvent, UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts
index 9aeb5e2a10..3ce2e64817 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts
@@ -11,7 +11,7 @@ import {
 } from './code-editor.model.js';
 import { themes } from './themes/index.js';
 import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
-import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
 
 //TODO - consider firing change event on blur
 
@@ -222,7 +222,7 @@ export class UmbCodeEditorController {
 		if (selections?.length > 0) {
 			this.#editor.executeEdits(
 				null,
-				selections.map((selection) => ({ range: selection, text }))
+				selections.map((selection) => ({ range: selection, text })),
 			);
 		}
 	}
@@ -236,7 +236,7 @@ export class UmbCodeEditorController {
 	 */
 	find(
 		searchString: string,
-		searchOptions: CodeEditorSearchOptions = <CodeEditorSearchOptions>{}
+		searchOptions: CodeEditorSearchOptions = <CodeEditorSearchOptions>{},
 	): UmbCodeEditorRange[] {
 		if (!this.#editor) throw new Error('Editor object not found');
 		const defaultOptions = {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/alias-input/alias-input.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/alias-input/alias-input.ts
index 5d17a74e02..10a09a53ca 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/alias-input/alias-input.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/alias-input/alias-input.ts
@@ -1,7 +1,7 @@
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-template-alias-input')
 export class UmbTemplateAliasInputElement extends UmbLitElement {
@@ -11,8 +11,8 @@ export class UmbTemplateAliasInputElement extends UmbLitElement {
             <uui-symbol-lock .open=${this.isOpen} ></uui-symbol-lock>
         </uui-button>
         <input placeholder="Enter alias..." .value=${this.value} ?disabled=${!this.isOpen} @input=${
-			this.#setValue
-		}></input>
+					this.#setValue
+				}></input>
 
         `;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/components/user-group-default-permission-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/components/user-group-default-permission-list.element.ts
index 4fc5187d0f..93adba485c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/components/user-group-default-permission-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/components/user-group-default-permission-list.element.ts
@@ -5,7 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { ManifestUserPermission, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
 
 @customElement('umb-user-group-default-permission-list')
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
index a6d0cccde6..d97be4ee23 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
@@ -8,7 +8,7 @@ import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import { UmbInputSectionElement } from '@umbraco-cms/backoffice/components';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 
 import './components/user-group-default-permission-list.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-permission-setting/user-permission-setting.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-permission-setting/user-permission-setting.element.ts
index 2231e11f10..ba504104d0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-permission-setting/user-permission-setting.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-permission-setting/user-permission-setting.element.ts
@@ -2,7 +2,7 @@ import { type UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui'
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-user-permission-setting')
 export class UmbUserPermissionSettingElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 32b08b6d58..02b06c0ab4 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -43,10 +43,10 @@
 
 			// SHARED
 			"@umbraco-cms/backoffice/auth": ["src/shared/auth"],
-			"@umbraco-cms/backoffice/events": ["src/shared/umb-events"],
+			"@umbraco-cms/backoffice/event": ["src/packages/core/event"],
 			"@umbraco-cms/backoffice/icon": ["src/shared/icon-registry"],
 			"@umbraco-cms/backoffice/models": ["src/shared/models"],
-			"@umbraco-cms/backoffice/repository": ["src/shared/repository"],
+			"@umbraco-cms/backoffice/repository": ["src/packages/core/repository"],
 			"@umbraco-cms/backoffice/resources": ["src/shared/resources"],
 			"@umbraco-cms/backoffice/router": ["src/shared/router"],
 			"@umbraco-cms/backoffice/style": ["src/shared/style"],
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index f0a95d12f4..518bea8f68 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -42,10 +42,8 @@ export default {
 						'@umbraco-cms/backoffice/observable-api': './src/libs/observable-api/index.ts',
 
 						'@umbraco-cms/backoffice/auth': './src/shared/auth/index.ts',
-						'@umbraco-cms/backoffice/events': './src/shared/umb-events/index.ts',
 						'@umbraco-cms/backoffice/icon': './src/shared/icon-registry/index.ts',
 						'@umbraco-cms/backoffice/models': './src/shared/models/index.ts',
-						'@umbraco-cms/backoffice/repository': './src/shared/repository/index.ts',
 						'@umbraco-cms/backoffice/resources': './src/shared/resources/index.ts',
 						'@umbraco-cms/backoffice/router': './src/shared/router/index.ts',
 						'@umbraco-cms/backoffice/style': './src/shared/style/index.ts',
@@ -79,6 +77,8 @@ export default {
 						'@umbraco-cms/backoffice/variant': './src/packages/core/variant/index.ts',
 						'@umbraco-cms/backoffice/workspace': './src/packages/core/workspace/index.ts',
 						'@umbraco-cms/backoffice/culture': './src/packages/core/culture/index.ts',
+						'@umbraco-cms/backoffice/event': './src/packages/core/event/index.ts',
+						'@umbraco-cms/backoffice/repository': './src/packages/core/repository/index.ts',
 
 						'@umbraco-cms/backoffice/dictionary': './src/packages/dictionary/dictionary/index.ts',