diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create-rtf.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create-rtf.action.ts
index 9bc1e2ec28..23f1dfbbc6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create-rtf.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create-rtf.action.ts
@@ -7,6 +7,10 @@ export class UmbCreateRTFStylesheetAction<T extends { copy(): Promise<void> }> e
 	}
 
 	async execute() {
+		if (this.unique !== null) {
+			this.unique = this.unique.replace(/\//g, '%2f');
+		}
+
 		history.pushState(
 			null,
 			'',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create.action.ts
index b5b4e71368..b41970b683 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create.action.ts
@@ -7,6 +7,10 @@ export class UmbCreateStylesheetAction<T extends { copy(): Promise<void> }> exte
 	}
 
 	async execute() {
+		if (this.unique !== null) {
+			this.unique = this.unique.replace(/\//g, '%2f');
+		}
+
 		history.pushState(null, '', `section/settings/workspace/stylesheet/create/${this.unique ?? 'null'}/view/code`);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
index ca05d25fe0..23aa022152 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
@@ -2,11 +2,7 @@ import { UmbStylesheetRepository } from '../repository/stylesheet.repository.js'
 import { StylesheetDetails } from '../index.js';
 import { UmbSaveableWorkspaceContextInterface, UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import {
-	UmbArrayState,
-	UmbBooleanState,
-	UmbObjectState
-} from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { RichTextRuleModel, UpdateStylesheetRequestModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
@@ -48,7 +44,7 @@ export class UmbStylesheetWorkspaceContext
 	}
 
 	getEntityId() {
-		const path = this.getData()?.path;
+		const path = this.getData()?.path?.replace(/\//g, '%2f');
 		const name = this.getData()?.name;
 
 		// TODO: %2F is a slash (/). Should we make it an actual slash in the URL? (%2F for now so that the server can find the correct stylesheet via URL)