diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts
index 2688c49331..8314a667fe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts
@@ -2,7 +2,7 @@ import type { UmbContentTypeModel, UmbPropertyContainerTypes, UmbPropertyTypeCon
 import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbArrayState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  * This class is a helper class for managing the structure of containers in a content type.
@@ -28,8 +28,8 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 	// Owner containers are containers owned by the owner Content Type (The specific one up for editing)
 	#ownerChildContainers: UmbPropertyTypeContainerModel[] = [];
 
-	#hasProperties = new UmbBooleanState(false);
-	readonly hasProperties = this.#hasProperties.asObservable();
+	#hasProperties = new UmbArrayState<{ id: string | null; has: boolean }>([], (x) => x.id);
+	readonly hasProperties = this.#hasProperties.asObservablePart((x) => x.some((y) => y.has));
 
 	constructor(host: UmbControllerHost) {
 		super(host);
@@ -132,7 +132,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 						this.#containerName = undefined;
 						this.#containerType = undefined;
 						// TODO: reset has Properties.
-						this.#hasProperties.setValue(false);
+						this.#hasProperties.setValue([]);
 					}
 				},
 				'_observeMainContainer',
@@ -152,7 +152,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 			(containers) => {
 				// We want to remove hasProperties of groups that does not exist anymore.:
 				// this.#removeHasPropertiesOfGroup()
-				this.#hasProperties.setValue(false);
+				this.#hasProperties.setValue([]);
 				this.#childContainers.setValue([]);
 
 				containers.forEach((container) => {
@@ -203,8 +203,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 		this.observe(
 			this.#structure.hasPropertyStructuresOf(groupId),
 			(hasProperties) => {
-				// TODO: Make this an array/map/state, so we only change the groupId. then hasProperties should be a observablePart that checks the array for true. [NL]
-				this.#hasProperties.setValue(hasProperties);
+				this.#hasProperties.appendOne({ id: groupId, has: hasProperties });
 			},
 			'_observePropertyStructureOfGroup' + groupId,
 		);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
index 0a1fd0d2f8..7253d4f84f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
@@ -7,7 +7,7 @@ import type {
 import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, mergeObservables } from '@umbraco-cms/backoffice/observable-api';
 
 type UmbPropertyTypeId = UmbPropertyTypeModel['id'];
 
@@ -23,6 +23,7 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 
 	private _containerId?: string | null;
 
+	// State which holds all the properties of the current container, this is a composition of all properties from the containers that matches our target [NL]
 	#propertyStructure = new UmbArrayState<UmbPropertyTypeModel>([], (x) => x.id);
 	readonly propertyStructure = this.#propertyStructure.asObservable();
 
@@ -76,7 +77,13 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 		if (!this.#structure || this._containerId === undefined) return;
 
 		if (this._containerId === null) {
-			this.#observePropertyStructureOf(null);
+			this.observe(
+				this.#structure.propertyStructuresOf(null),
+				(properties) => {
+					this.#propertyStructure.setValue(properties);
+				},
+				'observePropertyStructures',
+			);
 			this.removeUmbControllerByAlias('_observeContainers');
 		} else {
 			this.observe(
@@ -86,7 +93,7 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 						this._containerName = container.name ?? '';
 						this._containerType = container.type;
 						if (container.parent) {
-							// We have a parent for our main container, so lets observe that one as well:
+							// We have a parent for our main container, so lets observe that one as well: [NL]
 							this.observe(
 								this.#structure!.containerById(container.parent.id),
 								(parent) => {
@@ -139,38 +146,24 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 					this.#propertyStructure.setValue(_propertyStructure);
 				}
 
-				groupContainers.forEach((group) => this.#observePropertyStructureOf(group.id));
+				this.observe(
+					mergeObservables(
+						groupContainers.map((group) => this.#structure!.propertyStructuresOf(group.id)),
+						(sources) => {
+							return sources.flatMap((x) => x);
+						},
+					),
+					(properties) => {
+						this.#propertyStructure.setValue(properties);
+					},
+					'observePropertyStructures',
+				);
 				this.#containers = groupContainers;
 			},
 			'_observeContainers',
 		);
 	}
 
-	#observePropertyStructureOf(groupId?: string | null) {
-		if (!this.#structure || groupId === undefined) return;
-
-		this.observe(
-			this.#structure.propertyStructuresOf(groupId),
-			(properties) => {
-				// Lets remove the properties that does not exists any longer:
-				const _propertyStructure = this.#propertyStructure
-					.getValue()
-					.filter((x) => !(x.container?.id === groupId && !properties.some((y) => y.id === x.id)));
-
-				// Lets append the properties that does not exists already:
-				properties?.forEach((property) => {
-					if (!_propertyStructure.find((x) => x.id === property.id)) {
-						_propertyStructure.push(property);
-					}
-				});
-
-				// Fire update to subscribers:
-				this.#propertyStructure.setValue(_propertyStructure);
-			},
-			'_observePropertyStructureOfGroup' + groupId,
-		);
-	}
-
 	async isOwnerProperty(propertyId: UmbPropertyTypeId) {
 		await this.#init;
 		if (!this.#structure) return;
@@ -188,7 +181,7 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 	// TODO: consider moving this to another class, to separate 'viewer' from 'manipulator':
 	/** Manipulate methods: */
 
-	async createPropertyScaffold(ownerId?: string) {
+	async createPropertyScaffold(ownerId?: string | null) {
 		await this.#init;
 		if (!this.#structure) return;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
index e22ef369a4..f8d140f75d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
@@ -159,7 +159,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 			: '';
 	}
 
-	// TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN
+	// TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN, but we need either a generic type or a way to get the path pattern.... [NL]
 	#renderContainerHeader() {
 		return html`<div slot="header">
 				<div>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
index 4f433510d9..cb8159c22f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
@@ -11,11 +11,7 @@ import {
 	UMB_PROPERTY_TYPE_SETTINGS_MODAL,
 } from '@umbraco-cms/backoffice/content-type';
 import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import {
-	type UmbModalRouteBuilder,
-	UmbModalRouteRegistrationController,
-	UMB_WORKSPACE_MODAL,
-} from '@umbraco-cms/backoffice/modal';
+import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
 const SORTER_CONFIG: UmbSorterConfig<UmbPropertyTypeModel, UmbContentTypeDesignEditorPropertyElement> = {
 	getUniqueOfElement: (element) => {
@@ -100,7 +96,6 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 	}
 
 	#addPropertyModal: UmbModalRouteRegistrationController;
-	#workspaceModal?: UmbModalRouteRegistrationController;
 
 	#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
 
@@ -160,8 +155,8 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 			.addUniquePaths(['container-id'])
 			.addAdditionalPath('add-property/:sortOrder')
 			.onSetup(async (params) => {
-				if (!this._ownerContentType || !this._containerId) return false;
-
+				// TODO: Make a onInit promise, that can be awaited here.
+				if (!this._ownerContentType || this._containerId === undefined) return false;
 				const propertyData = await this.#propertyStructureHelper.createPropertyScaffold(this._containerId);
 				if (propertyData === undefined) return false;
 				if (params.sortOrder !== undefined) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts
index 58d32eb3a2..021f63b22f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts
@@ -2,7 +2,7 @@ import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '../../content-type-workspace
 import type { UmbContentTypeWorkspaceViewEditGroupElement } from './content-type-design-editor-group.element.js';
 import { UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT } from './content-type-design-editor.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import {
 	UmbContentTypeContainerStructureHelper,
 	type UmbContentTypeModel,
@@ -160,16 +160,17 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement {
 
 	render() {
 		return html`
-		${
-			this._hasProperties
-				? html`
-						<uui-box>
-							<umb-content-type-design-editor-properties
-								container-id=${this.containerId!}></umb-content-type-design-editor-properties>
-						</uui-box>
-					`
-				: ''
-		}
+			${
+				this.#containerId
+					? html`
+							<uui-box class="${this._hasProperties ? '' : 'opaque'}">
+								<umb-content-type-design-editor-properties
+									.containerId=${this.containerId}></umb-content-type-design-editor-properties>
+							</uui-box>
+						`
+					: nothing
+			}
+
 				<div class="container-list" ?sort-mode-active=${this._sortModeActive}>
 					${repeat(
 						this._groups,
@@ -223,6 +224,10 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement {
 			umb-content-type-design-editor-group {
 				margin-bottom: var(--uui-size-layout-1);
 			}
+			uui-box.opaque {
+				background-color: transparent;
+				border-color: transparent;
+			}
 
 			.container-list {
 				display: grid;