diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
index bf7d91a548af..df5bd8c8dcd7 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
@@ -1705,16 +1705,6 @@ export default {
 		compositionUsageHeading: 'Where is this composition used?',
 		compositionUsageSpecification:
 			'This composition is currently used in the composition of the following\n      Content Types:\n    ',
-		variantsHeading: 'Allow variations',
-		cultureVariantHeading: 'Allow vary by culture',
-		segmentVariantHeading: 'Allow segmentation',
-		cultureVariantLabel: 'Vary by culture',
-		segmentVariantLabel: 'Vary by segments',
-		variantsDescription: 'Allow editors to create content of this type in different languages.',
-		cultureVariantDescription: 'Allow editors to create content of different languages.',
-		segmentVariantDescription: 'Allow editors to create segments of this content.',
-		allowVaryByCulture: 'Allow varying by culture',
-		allowVaryBySegment: 'Allow segmentation',
 		elementType: 'Element Type',
 		elementHeading: 'Is an Element Type',
 		elementDescription:
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
index 4f29dcb7f1fd..39f7edc0ac01 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -1735,11 +1735,11 @@ export default {
 		compositionUsageHeading: 'Where is this composition used?',
 		compositionUsageSpecification:
 			'This composition is currently used in the composition of the following\n      Content Types:\n    ',
-		variantsHeading: 'Allow variations',
+		variantsHeading: 'Variation',
 		cultureVariantHeading: 'Allow vary by culture',
 		segmentVariantHeading: 'Allow segmentation',
 		cultureVariantLabel: 'Vary by culture',
-		segmentVariantLabel: 'Vary by segments',
+		segmentVariantLabel: 'Vary by segment',
 		variantsDescription: 'Allow editors to create content of this type in different languages.',
 		cultureVariantDescription: 'Allow editors to create content of different languages.',
 		segmentVariantDescription: 'Allow editors to create segments of this content.',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
index 63ef5a556713..5b8cf052940b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
@@ -299,6 +299,11 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 								<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
 							</uui-tag>`
 						: nothing}
+					${this.property.variesBySegment
+						? html`<uui-tag look="default">
+								<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_segmentVariantLabel')}
+							</uui-tag>`
+						: nothing}
 					${this.property.appearance?.labelOnTop == true
 						? html`<uui-tag look="default">
 								<span>${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
index 56db8cbf598b..8c069f12d1e3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
@@ -203,9 +203,12 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 
 	#onVaryByCultureChange(event: UUIBooleanInputEvent) {
 		const variesByCulture = event.target.checked;
-		this.updateValue({
-			variesByCulture,
-		});
+		this.updateValue({ variesByCulture });
+	}
+
+	#onVaryBySegmentChange(event: UUIBooleanInputEvent) {
+		const variesBySegment = event.target.checked;
+		this.updateValue({ variesBySegment });
 	}
 
 	override render() {
@@ -267,14 +270,11 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 					</p>
 					${this.#renderCustomValidation()}
 				</div>
-				<hr />
 				${this.#renderVariationControls()}
-				<div class="container">
-					<b style="margin-bottom: var(--uui-size-space-3)">
-						<umb-localize key="contentTypeEditor_displaySettingsHeadline">Appearance</umb-localize>
-					</b>
-					<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
-				</div>
+				<umb-property-layout label="#contentTypeEditor_displaySettingsHeadline" orientation="vertical">
+					<div id="appearances" slot="editor">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
+				</umb-property-layout>
+
 				${this.#renderMemberTypeOptions()}
 			</uui-box>
 		`;
@@ -405,18 +405,35 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 
 	#renderVariationControls() {
 		return this._contentTypeVariesByCulture || this._contentTypeVariesBySegment
-			? html` <div class="container">
-						<b><umb-localize key="contentTypeEditor_variantsHeading">Allow variations</umb-localize></b>
-						${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : ''}
-					</div>
-					<hr />`
+			? html` <umb-property-layout label="#contentTypeEditor_variantsHeading" orientation="vertical">
+					<umb-stack slot="editor" look="compact">
+						${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : nothing}
+						${this._contentTypeVariesBySegment ? this.#renderVaryBySegment() : nothing}
+					</umb-stack>
+				</umb-property-layout>`
 			: '';
 	}
+
 	#renderVaryByCulture() {
-		return html`<uui-toggle
-			@change=${this.#onVaryByCultureChange}
-			.checked=${this._data?.variesByCulture ?? false}
-			label=${this.localize.term('contentTypeEditor_cultureVariantLabel')}></uui-toggle> `;
+		return html`
+			<div>
+				<uui-toggle
+					@change=${this.#onVaryByCultureChange}
+					.checked=${this._data?.variesByCulture ?? false}
+					label=${this.localize.term('contentTypeEditor_cultureVariantLabel')}></uui-toggle>
+			</div>
+		`;
+	}
+
+	#renderVaryBySegment() {
+		return html`
+			<div>
+				<uui-toggle
+					@change=${this.#onVaryBySegmentChange}
+					.checked=${this._data?.variesBySegment ?? false}
+					label=${this.localize.term('contentTypeEditor_segmentVariantLabel')}></uui-toggle>
+			</div>
+		`;
 	}
 
 	static override styles = [