diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
index a22f67b1ab..5703f64665 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
@@ -1,33 +1,134 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
+type BlockGridColumn = {
+	columnSpan: number;
+};
+
 @customElement('umb-property-editor-ui-block-grid-column-span')
 export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	private _value: Array<string> = [];
-
 	@property({ type: Array })
-	public get value(): Array<string> {
-		return this._value;
-	}
-	public set value(value: Array<string>) {
-		this._value = value || [];
-	}
+	value: Array<BlockGridColumn> = [];
+
+	@state()
+	private _maxColumns = 12;
 
 	@property({ attribute: false })
-	public set config(config: UmbPropertyEditorConfigCollection | undefined) {}
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		const maxColumns = config?.getValueByAlias('gridColumns');
+		if (typeof maxColumns === 'number') {
+			this._maxColumns = maxColumns;
+		}
+	}
+
+	#pickColumn(index: number) {
+		const value = this.value ?? [];
+		const exists = value.find((column) => column.columnSpan === index);
+
+		if (exists) {
+			this.value = value.filter((column) => column.columnSpan !== index);
+		} else {
+			this.value = [...value, { columnSpan: index }];
+		}
 
-	private _onChange(event: CustomEvent) {
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
-		return html`Column span TODO `;
+		const template = Array.from({ length: this._maxColumns }, (_, index) => {
+			const number = index + 1;
+			let classes = 'default';
+
+			if (this.value && this.value.length > 0) {
+				const applied = this.value.find((column) => column.columnSpan >= index);
+				const picked = this.value.find((column) => column.columnSpan === index);
+				classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
+			}
+
+			return html`<div class="${classes}" data-index=${index}>
+				<span>${number}</span>
+				<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
+			</div>`;
+		});
+
+		return html`<div id="wrapper">${template}</div>`;
 	}
 
-	static styles = [UmbTextStyles];
+	static styles = [
+		UmbTextStyles,
+		css`
+			#wrapper {
+				box-sizing: border-box;
+				display: flex;
+				flex-wrap: nowrap;
+				border: 1px solid var(--uui-color-divider-emphasis);
+			}
+
+			#wrapper div {
+				color: var(--uui-color-divider-emphasis);
+				position: relative;
+				flex-grow: 1;
+				min-height: 35px;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: flex-end;
+				padding-left: 5px;
+				border-right: 1px solid transparent;
+			}
+
+			#wrapper div:not(.picked) {
+				border-right: 1px solid var(--uui-color-divider-standalone);
+			}
+
+			#wrapper div.picked,
+			#wrapper div:has(button:hover) {
+				color: var(--uui-color-interactive);
+			}
+
+			#wrapper div:last-child {
+				border-right: 1px solid transparent;
+			}
+
+			#wrapper:has(button:hover) div:not(:has(button:hover) ~ div) {
+				background-color: var(--uui-color-interactive-emphasis);
+			}
+
+			#wrapper div span {
+				user-select: none;
+				position: absolute;
+				padding: var(--uui-size-6);
+				transform: translate(50%, -75%);
+			}
+
+			#wrapper div button {
+				border: none;
+				position: absolute;
+				z-index: 1;
+				transform: translateX(50%);
+				inset: -1px;
+				opacity: 0;
+			}
+
+			#wrapper .picked::after {
+				content: '';
+				position: absolute;
+				transform: translateX(50%);
+				width: 4px;
+				border-right: 1px solid var(--uui-color-interactive);
+				background-color: var(--uui-color-surface);
+				top: 0;
+				right: 0;
+				bottom: 0;
+			}
+
+			#wrapper .applied {
+				background-color: var(--uui-color-interactive);
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIBlockGridColumnSpanElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
index c3ac612a4b..ed8897e43e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
@@ -50,13 +50,12 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement
 		UmbTextStyles,
 		css`
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
-			uui-box {
-				margin-top: var(--uui-size-layout-1);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
index a12b413e30..91c9f24c74 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
@@ -24,13 +24,12 @@ export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement imp
 		UmbTextStyles,
 		css`
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
-			uui-box {
-				margin-top: var(--uui-size-layout-1);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
index 20d2407cff..c771d967f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
@@ -2,6 +2,8 @@ import { css, html, customElement, state } from '@umbraco-cms/backoffice/externa
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-block-grid-type-workspace-view')
 export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -122,15 +124,13 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 		UmbTextStyles,
 		css`
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
 
-			uui-box {
-				margin-top: var(--uui-size-layout-1);
-			}
-
 			#showOptions {
 				display: flex;
 				height: 100px;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
index 154d5be48f..622c77ed6a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
@@ -34,7 +34,7 @@ export class UmbInputBlockTypeElement<BlockType extends UmbBlockTypeBase = UmbBl
 			this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 				.addAdditionalPath(entityType)
 				.onSetup(() => {
-					return { data: { entityType: entityType, preset: {} } };
+					return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } };
 				})
 				.observeRouteBuilder((routeBuilder) => {
 					const newpath = routeBuilder({});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
index 40c2adcf95..cb84340176 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
@@ -13,7 +13,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	 * @attr
 	 * @default false
 	 */
-	@property({ type: Boolean, attribute: 'element-types-only' })
+	@property({ type: Boolean })
 	elementTypesOnly: boolean = false;
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
index dbe96d6a8b..c12cacd3c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
@@ -56,7 +56,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 							: []}
 						.min=${this._limitMin ?? 0}
 						.max=${this._limitMax ?? Infinity}
-						.element-types-only=${this._onlyElementTypes}
+						.elementTypesOnly=${this._onlyElementTypes ?? false}
 						>Add</umb-input-document-type
 					>
 			  `