diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.ts
index 4e63c45894..c75b88d3ad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.ts
@@ -17,6 +17,8 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 
 	private _modalContext?: UmbModalManagerContext;
 
+	#isNew = false;
+
 	constructor() {
 		super();
 
@@ -32,8 +34,15 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 
 	#observeNameAndPath() {
 		if (!this.#workspaceContext) return;
-		this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeName');
-		this.observe(this.#workspaceContext.path, (path) => (this._path = path), '_observePath');
+		this.observe(this.#workspaceContext.name, (name) => (this._name = name ?? ''), '_observeName');
+		this.observe(this.#workspaceContext.path, (path) => (this._path = path ?? ''), '_observePath');
+		this.observe(
+			this.#workspaceContext.isNew,
+			(isNew) => {
+				this.#isNew = !!isNew;
+			},
+			'_observeIsNew',
+		);
 	}
 
 	#onNameChange(event: UUIInputEvent) {
@@ -50,8 +59,14 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.StyleSheet">
 				<div id="header" slot="header">
-					<uui-input label="stylesheet name" id="name" .value=${this._name} @input="${this.#onNameChange}"> </uui-input>
-					<small>${this._path}</small>
+					<uui-input
+						placeholder="Enter stylesheet name..."
+						label="stylesheet name"
+						id="name"
+						.value=${this._name}
+						@input="${this.#onNameChange}">
+					</uui-input>
+					<small>/css/${this._path}</small>
 				</div>
 
 				<div slot="footer-info">
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 05079cc74c..a469f4f5e7 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
@@ -52,7 +52,10 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 	}
 
 	async load(path: string) {
-		const [ {data}, rules ] = await Promise.all([this.repository.requestById(path), this.repository.getStylesheetRules(path)]);
+		const [{ data }, rules] = await Promise.all([
+			this.repository.requestById(path),
+			this.repository.getStylesheetRules(path),
+		]);
 
 		if (data) {
 			this.setIsNew(false);
@@ -93,17 +96,13 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 	}
 
 	async create(parentKey: string | null) {
-		const { data } = await this.repository.createScaffold(parentKey);
 		const newStylesheet = {
-			...data,
 			name: '',
 			path: parentKey ?? '',
+			content: '',
 		};
-		if (!data) return;
 		this.setIsNew(true);
 		this.#data.next(newStylesheet);
-
-		throw new Error('Create method not implemented.');
 	}
 
 	public destroy(): void {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.element.ts
index efc839f082..436ff5068b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.element.ts
@@ -18,10 +18,10 @@ export class UmbStylesheetWorkspaceElement extends UmbLitElement {
 			path: 'create/:parentId',
 			component: () => this.#element,
 			setup: async (_component, info) => {
-				const path = info.match.params.path;
+				const path = info.match.params.parentId;
 				const serverPath = serverFilePathFromUrlFriendlyPath(path);
 				this.#workspaceContext.setIsNew(true);
-				await this.#workspaceContext.load(serverPath);
+				await this.#workspaceContext.create(serverPath);
 
 				new UmbWorkspaceIsNewRedirectController(
 					this,