diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
index d2786fb7ea..3c6dde658c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
@@ -1,4 +1,5 @@
 import type {
+	ManifestModal,
 	ManifestWorkspace,
 	ManifestWorkspaceAction,
 	ManifestWorkspaceEditorView,
@@ -73,4 +74,16 @@ const workspaceActions: Array<ManifestWorkspaceAction> = [
 	},
 ];
 
-export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions];
+export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR =
+	'Umb.Modal.Templating.Stylesheet.RichTextEditorStyle.Sidebar';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
+		name: 'Rich text editor style modal',
+		loader: () => import('./views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.js'),
+	},
+];
+
+export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions, ...modals];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.ts
new file mode 100644
index 0000000000..768758b1f5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.ts
@@ -0,0 +1,74 @@
+import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
+
+export interface StylesheetRichTextEditorStyleModalData {
+	rule?: RichTextRuleModel;
+}
+
+export interface StylesheetRichTextEditorStyleModalResult {
+	rule: RichTextRuleModel;
+}
+
+@customElement('umb-stylesheet-rich-text-editor-style-modal')
+export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbModalBaseElement<
+	StylesheetRichTextEditorStyleModalData,
+	StylesheetRichTextEditorStyleModalResult
+> {
+	private _close() {
+		this.modalContext?.reject();
+	}
+
+	render() {
+		return html`
+			<umb-body-layout headline="Insert">
+				<div id="main">
+					<uui-box>
+						<h3>Rule</h3>
+						<p>${this.data?.rule?.name}</p>
+						<p>${this.data?.rule?.selector}</p>
+						<p>${this.data?.rule?.styles}</p>
+					</uui-box>
+				</div>
+				<div slot="actions">
+					<uui-button @click=${this._close} look="secondary" label="Close">Close</uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+	}
+
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
+			}
+
+			#main {
+				box-sizing: border-box;
+				height: calc(
+					100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
+				);
+			}
+
+			#main uui-button:not(:last-of-type) {
+				display: block;
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			h3,
+			p {
+				text-align: left;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-stylesheet-rich-text-editor-style-modal': UmbStylesheetRichTextEditorStyleModalElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index fcb366d0ac..c7d7883ac4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -1,16 +1,28 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
-import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
-import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
-import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
+import {
+	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
+	UmbModalContext,
+	UmbModalManagerContext,
+	UmbModalToken,
+} from '@umbraco-cms/backoffice/modal';
 import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
+import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR } from '../../manifests.js';
+import { StylesheetRichTextEditorStyleModalResult } from './stylesheet-workspace-view-rich-text-editor-style-sidebar.js';
 
+export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken<{ rule: RichTextRuleModel }>(
+	UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
+	{
+		type: 'sidebar',
+		size: 'small',
+	},
+);
 @customElement('umb-stylesheet-workspace-view-rich-text-editor')
 export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitElement {
-
 	@state()
 	private _content?: string | null = '';
 
@@ -23,26 +35,27 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 	@state()
 	private _rules?: RichTextRuleModel[] = [
 		{
-			"name": "bjjh",
-			"selector": "h1",
-			"styles": "color: blue;"
+			name: 'bjjh',
+			selector: 'h1',
+			styles: 'color: blue;',
 		},
 		{
-			"name": "comeone",
-			"selector": "h1",
-			"styles": "color: blue;"
+			name: 'comeone',
+			selector: 'h1',
+			styles: 'color: blue;',
 		},
 		{
-			"name": "lol",
-			"selector": "h1",
-			"styles": "color: blue;"
-		}
+			name: 'lol',
+			selector: 'h1',
+			styles: 'color: blue;',
+		},
 	];
 
 	#stylesheetWorkspaceContext?: UmbStylesheetWorkspaceContext;
 	private _modalContext?: UmbModalManagerContext;
 
 	#isNew = false;
+	#modal?: UmbModalContext;
 
 	constructor() {
 		super();
@@ -67,25 +80,40 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 				this._ready = isReady;
 			});
 		});
+
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+			this._modalContext = instance;
+		});
 	}
 
+	#openModal = (rule: RichTextRuleModel = {}) => {
+		if (!this._modalContext) throw new Error('Modal context not found');
+		const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
+			rule,
+		});
+		modal?.onSubmit().then((closedModal) => {
+			console.log(closedModal);
+		});
+	};
+
 	renderRule(rule: RichTextRuleModel) {
 		return html`<div class="rule">
-			<div class="rule-name"><uui-icon name="umb:move"></uui-icon>${rule.name}</div>
-			<div class="rule-actions"><uui-button label="Edit" look="secondary">Edit</uui-button><uui-button label="Remove" look="secondary" color="danger">Remove</uui-button></div>
+			<div class="rule-name"><uui-icon name="umb:navigation"></uui-icon>${rule.name}</div>
+			<div class="rule-actions">
+				<uui-button label="Edit" look="secondary" @click=${() => this.#openModal(rule)}>Edit</uui-button
+				><uui-button label="Remove" look="secondary" color="danger">Remove</uui-button>
+			</div>
 		</div>`;
 	}
 	render() {
 		return html` <uui-box headline="Rich text editor styles">
-
-		<div id="box-row">
-		
-		<div id="description"><p>Define the styles that should be available in the rich text editor for this stylesheet</p></div>
-		<div id="rules">
-			${this._rules?.map((rule) => this.renderRule(rule))}
-		</div>
-		</div>
-
+			<div id="box-row">
+				<p id="description">Define the styles that should be available in the rich text editor for this stylesheet.</p>
+				<div id="rules">
+					${this._rules?.map((rule) => this.renderRule(rule))}
+					<uui-button label="Add rule" look="primary" @click=${this.#openModal}>Add</uui-button>
+				</div>
+			</div>
 		</uui-box>`;
 	}
 
@@ -103,7 +131,8 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 			}
 
 			#description {
-				flex: 0 0 250px
+				margin-top: 0;
+				flex: 0 0 250px;
 			}
 
 			#rules {
@@ -111,24 +140,28 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 				max-width: 600px;
 			}
 
+			.rule-name {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-2);
+				padding-left: var(--uui-size-2);
+				font-weight: bold;
+			}
+
 			.rule {
 				display: flex;
 				width: 100%;
 				justify-content: space-between;
 				padding: var(--uui-size-2);
 				align-items: center;
-				border-radius: var(--uui-size-border-radius);
+				border-radius: var(--uui-border-radius);
 				background-color: var(--uui-color-surface-alt);
 				margin-bottom: var(--uui-size-space-4);
 			}
 
 			uui-box {
 				margin: var(--uui-size-layout-1);
-				/* remove header border bottom as code editor looks better in this box */
-				--uui-color-divider-standalone: transparent;
 			}
-
-
 		`,
 	];
 }