diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts
new file mode 100644
index 0000000000..bd3543e676
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts
@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-property-editor-ui-tiny-mce-dimensions-configuration
+ */
+@customElement('umb-property-editor-ui-tiny-mce-dimensions-configuration')
+export class UmbPropertyEditorUITinyMceDimensionsConfigurationElement extends UmbLitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value: { width?: number; height?: number } = {};
+
+	render() {
+		return html`<uui-input type="number" placeholder="Width" .value=${this.value.width}></uui-input> x
+			<uui-input type="number" placeholder="Height" .value=${this.value.height}></uui-input> pixels`;
+	}
+}
+
+export default UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tiny-mce-dimensions-configuration': UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts
new file mode 100644
index 0000000000..819760fe65
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
+import './property-editor-ui-tiny-mce-dimensions-configuration.element';
+
+export default {
+	title: 'Property Editor UIs/Tiny Mce Dimensions Configuration',
+	component: 'umb-property-eDitor-ui-tiny-mce-dimensions-configuration',
+	id: 'umb-property-editor-ui-tiny-mce-dimensions-configuration',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITinyMceDimensionsConfigurationElement> = () =>
+	html`<umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts
new file mode 100644
index 0000000000..9ffd813eca
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITinyMceDimensionsConfigurationElement', () => {
+  let element: UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceDimensionsConfigurationElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts
index 853af4e856..558284efca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts
@@ -1,14 +1,66 @@
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
-export const manifest: ManifestPropertyEditorUI = {
-	type: 'propertyEditorUI',
-	alias: 'Umb.PropertyEditorUI.TinyMCE',
-	name: 'TinyMCE Property Editor UI',
-	loader: () => import('./property-editor-ui-tiny-mce-configuration.element'),
-	meta: {
-		label: 'Rich Text Editor Configuration',
-		propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
-		icon: 'umb:autofill',
-		group: 'common',
+const configurationManifests: Array<ManifestPropertyEditorUI> = [
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TinyMCE.ToolbarConfiguration',
+		name: 'TinyMCE Toolbar Property Editor UI',
+		loader: () => import('./toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element'),
+		meta: {
+			label: 'TinyMCE Toolbar Configuration',
+			propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
+			icon: 'umb:autofill',
+			group: 'common',
+		},
 	},
-};
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TinyMCE.StylesheetsConfiguration',
+		name: 'TinyMCE Stylesheets Property Editor UI',
+		loader: () => import('./stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element'),
+		meta: {
+			label: 'TinyMCE Stylesheets Configuration',
+			propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
+			icon: 'umb:autofill',
+			group: 'common',
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TinyMCE.DimensionsConfiguration',
+		name: 'TinyMCE Dimensions Property Editor UI',
+		loader: () => import('./dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element'),
+		meta: {
+			label: 'TinyMCE Dimensions Configuration',
+			propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
+			icon: 'umb:autofill',
+			group: 'common',
+		},
+	},	
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TinyMCE.MaxImageSizeConfiguration',
+		name: 'TinyMCE Max Image Size Property Editor UI',
+		loader: () => import('./max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element'),
+		meta: {
+			label: 'TinyMCE Max Image Size Configuration',
+			propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
+			icon: 'umb:autofill',
+			group: 'common',
+		},
+	},	
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TinyMCE.ModeConfiguration',
+		name: 'TinyMCE Mode Property Editor UI',
+		loader: () => import('./mode/property-editor-ui-tiny-mce-mode-configuration.element'),
+		meta: {
+			label: 'TinyMCE Mode Configuration',
+			propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
+			icon: 'umb:autofill',
+			group: 'common',
+		},
+	},	
+];
+
+export const manifests = [...configurationManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts
new file mode 100644
index 0000000000..d2591afd73
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts
@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-property-editor-ui-tiny-mce-maximagesize-configuration
+ */
+@customElement('umb-property-editor-ui-tiny-mce-maximagesize-configuration')
+export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement extends UmbLitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value?: number;
+
+	render() {
+		return html`<uui-input type="number" placeholder="Max size" .value=${this.value}></uui-input>`;
+	}
+}
+
+export default UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tiny-mce-maximagesize-configuration': UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts
new file mode 100644
index 0000000000..422b738d92
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
+import './property-editor-ui-tiny-mce-maximagesize-configuration.element';
+
+export default {
+	title: 'Property Editor UIs/Tiny Mce Max Image Size Configuration',
+	component: 'umb-property-eDitor-ui-tiny-mce-maximagesize-configuration',
+	id: 'umb-property-editor-ui-tiny-mce-maximagesize-configuration',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement> = () =>
+	html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts
new file mode 100644
index 0000000000..0e8bf30a3e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITinyMceMaxImSizeConfigurationElement', () => {
+  let element: UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts
new file mode 100644
index 0000000000..b89099e5bc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts
@@ -0,0 +1,72 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UUISelectEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-property-editor-ui-tiny-mce-mode-configuration
+ */
+@customElement('umb-property-editor-ui-tiny-mce-mode-configuration')
+export class UmbPropertyEditorUITinyMceModeConfigurationElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display:block;
+				width:220px;
+			}
+			
+			ul {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+			}
+
+			uui-select {
+				max-width:220px;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	options: Array<Option> = [
+		{
+			value: 'classic',
+			name: 'Classic',
+		},
+		{
+			value: 'inline',
+			name: 'Inline',
+		},
+	];
+
+	connectedCallback(): void {
+		super.connectedCallback();
+
+		this.options.forEach((o) => {
+			o.selected = this.value === o.value;
+		});
+	}
+
+	#onChange(event: UUISelectEvent) {
+		this.value = event.target.value.toString();
+	}
+
+	render() {
+		return html`<uui-select .options=${this.options} @change=${this.#onChange}></uui-select>`;
+	}
+}
+
+export default UmbPropertyEditorUITinyMceModeConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tiny-mce-mode-configuration': UmbPropertyEditorUITinyMceModeConfigurationElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts
new file mode 100644
index 0000000000..444ef10324
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
+import './property-editor-ui-tiny-mce-mode-configuration.element';
+
+export default {
+	title: 'Property Editor UIs/Tiny Mce Mode Configuration',
+	component: 'umb-property-editor-ui-tiny-mce-mode-configuration',
+	id: 'umb-property-editor-ui-tiny-mce-mode-configuration',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITinyMceModeConfigurationElement> = () =>
+	html`<umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.test.ts
new file mode 100644
index 0000000000..00299e155e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITinyMceModeConfigurationElement', () => {
+  let element: UmbPropertyEditorUITinyMceModeConfigurationElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceModeConfigurationElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts
deleted file mode 100644
index 82fa2edbd1..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { html } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/element';
-
-/**
- * @element umb-property-editor-ui-tiny-mce-configuration
- */
-@customElement('umb-property-editor-ui-tiny-mce-configuration')
-export class UmbPropertyEditorUITinyMceConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
-
-	@property()
-	value = '';
-
-	@property({ type: Array, attribute: false })
-	public config = [];
-
-	render() {
-		return html`<div>umb-property-editor-ui-tiny-mce-configuration</div>`;
-	}
-}
-
-export default UmbPropertyEditorUITinyMceConfigurationElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-property-editor-ui-tiny-mce-configuration': UmbPropertyEditorUITinyMceConfigurationElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts
deleted file mode 100644
index 447be2a933..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element';
-import './property-editor-ui-tiny-mce-configuration.element';
-
-export default {
-	title: 'Property Editor UIs/Tiny Mce Configuration',
-	component: 'umb-property-editor-ui-tiny-mce-configuration',
-	id: 'umb-property-editor-ui-tiny-mce-configuration',
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-configuration></umb-property-editor-ui-tiny-mce-configuration>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts
deleted file mode 100644
index 142ce9b535..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element';
-import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-
-describe('UmbPropertyEditorUITinyMceConfigurationElement', () => {
-  let element: UmbPropertyEditorUITinyMceConfigurationElement;
-
-  beforeEach(async () => {
-    element = await fixture(
-      html` <umb-property-editor-ui-tiny-mce-configuration></umb-property-editor-ui-tiny-mce-configuration> `
-    );
-  });
-
-  it('is defined with its own instance', () => {
-    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceConfigurationElement);
-  });
-
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-  });
-});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts
new file mode 100644
index 0000000000..f0e30aa12f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts
@@ -0,0 +1,40 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-property-editor-ui-tiny-mce-stylesheets-configuration
+ */
+@customElement('umb-property-editor-ui-tiny-mce-stylesheets-configuration')
+export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			ul {
+				list-style: none;
+				padding: 0;
+				margin:0;
+			}
+		`,
+	];
+	@property()
+	value: string[] = [];
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<ul>
+			${this.value.map((v) => html`<li><uui-checkbox value=${v}>${v}</uui-checkbox></li>`)}
+		</ul>`;
+	}
+}
+
+export default UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tiny-mce-stylesheets-configuration': UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts
new file mode 100644
index 0000000000..d9831f6db9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
+import './property-editor-ui-tiny-mce-stylesheets-configuration.element';
+
+export default {
+	title: 'Property Editor UIs/Tiny Mce Stylesheets Configuration',
+	component: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
+	id: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITinyMceStylesheetsConfigurationElement> = () =>
+	html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts
new file mode 100644
index 0000000000..2fa525b653
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITinyMceStylesheetsConfigurationElement', () => {
+  let element: UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceStylesheetsConfigurationElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts
new file mode 100644
index 0000000000..803135aebf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts
@@ -0,0 +1,41 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-property-editor-ui-tiny-mce-toolbar-configuration
+ */
+@customElement('umb-property-editor-ui-tiny-mce-toolbar-configuration')
+export class UmbPropertyEditorUITinyMceToolbarConfigurationElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			ul {
+				list-style: none;
+				padding: 0;
+				margin:0;
+			}
+		`,
+	];
+
+	@property()
+	value: string[] = [];
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`TODO => get config options from backend per Umbraco.Cms.Web.BackOffice.PropertyEditors.RichTextPreValueController<ul>
+			${this.value.map((v) => html`<li><uui-checkbox value=${v} checked>${v}</uui-checkbox></li>`)}
+		</ul>`;
+	}
+}
+
+export default UmbPropertyEditorUITinyMceToolbarConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tiny-mce-toolbar-configuration': UmbPropertyEditorUITinyMceToolbarConfigurationElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts
new file mode 100644
index 0000000000..3948d585ab
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
+import './property-editor-ui-tiny-mce-toolbar-configuration.element';
+
+export default {
+	title: 'Property Editor UIs/Tiny Mce Toolbar Configuration',
+	component: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
+	id: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITinyMceToolbarConfigurationElement> = () =>
+	html`<umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts
new file mode 100644
index 0000000000..d33bda5569
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITinyMceToolbarConfigurationElement', () => {
+  let element: UmbPropertyEditorUITinyMceToolbarConfigurationElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceToolbarConfigurationElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts
index d5ab888170..3133976a03 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts
@@ -1,4 +1,4 @@
-import { manifest as toolbar } from './config/configuration/manifests';
+import { manifests as configuration } from './config/configuration/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 const manifest: ManifestPropertyEditorUI = {
@@ -13,11 +13,6 @@ const manifest: ManifestPropertyEditorUI = {
 		group: 'richText',
 		config: {
 			properties: [
-				{
-					alias: 'editor',
-					label: 'Editor',
-					propertyEditorUI: 'Umb.PropertyEditorUI.TinyMCE.Configuration',
-				},
 				{
 					alias: 'overlaySize',
 					label: 'Overlay Size',
@@ -34,6 +29,4 @@ const manifest: ManifestPropertyEditorUI = {
 	},
 };
 
-const config = [toolbar];
-
-export const manifests = [manifest, ...config];
+export const manifests = [manifest, ...configuration];