diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace-editor.element.ts
index 8398a4d27c..7973028bda 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace-editor.element.ts
@@ -19,6 +19,9 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _ready?: boolean = false;
 
+	@state()
+	private _isNew?: boolean = false;
+
 	#scriptsWorkspaceContext?: UmbScriptWorkspaceContext;
 
 	constructor() {
@@ -42,6 +45,10 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 			this.observe(this.#scriptsWorkspaceContext.isCodeEditorReady, (isReady) => {
 				this._ready = isReady;
 			});
+
+			this.observe(this.#scriptsWorkspaceContext.isNew, (isNew) => {
+				this._isNew = isNew;
+			});
 		});
 	}
 
@@ -72,7 +79,8 @@ export class UmbScriptWorkspaceEditorElement extends UmbLitElement {
 					placeholder="Enter name..."
 					.value=${this._name}
 					@input=${this.#onNameInput}
-					label="Script name"></uui-input>
+					label="Script name"
+					?readonly=${this._isNew === false}></uui-input>
 				<small>/scripts/${this._path}</small>
 			</div>
 			<uui-box>
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 3f60945b37..b24c4982a8 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
@@ -14,12 +14,14 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 	private get _name() {
 		return this.#name;
 	}
-
 	private set _name(value) {
 		this.#name = value?.replace('.css', '');
 		this.requestUpdate();
 	}
 
+	@state()
+	private _isNew?: boolean = false;
+
 	@state()
 	private _path?: string;
 
@@ -36,6 +38,10 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 			this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue: string) => {
 				this.#workspaceContext?.setName(`${nameInputValue}.css`);
 			});
+
+			this.observe(this.#workspaceContext.isNew, (isNew) => {
+				this._isNew = isNew;
+			});
 		});
 	}
 
@@ -64,7 +70,8 @@ export class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
 						label="stylesheet name"
 						id="name"
 						.value=${this._name}
-						@input="${this.#onNameChange}">
+						@input="${this.#onNameChange}"
+						?readonly=${this._isNew === false}>
 					</uui-input>
 					<small>/css/${this._path}</small>
 				</div>