diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-collection-header.element.ts
index c51e37fed4..51133fd80f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-collection-header.element.ts
@@ -21,7 +21,7 @@ export class UmbUserGroupCollectionHeaderElement extends UmbLitElement {
 	#onCreate() {
 		//TODO Navigate to create workspace
 
-		history.pushState(null, '', 'section/users/view/user-groups/create/');
+		history.pushState(null, '', 'section/users/view/user-groups/user-group/create/');
 	}
 
 	#onSearch(event: UUIInputEvent) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-table-name-column-layout.element.ts
index e16a5b309f..0ffb33a310 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-table-name-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/collection/user-group-table-name-column-layout.element.ts
@@ -11,7 +11,7 @@ export class UmbUserGroupTableNameColumnLayoutElement extends LitElement {
 	value!: any;
 
 	render() {
-		return html` <a style="font-weight: bold;" href="section/users/view/user-groups/edit/${this.item.id}">
+		return html` <a style="font-weight: bold;" href="section/users/view/user-groups/user-group/edit/${this.item.id}">
 			${this.value.name}
 		</a>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/sources/user-group.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/sources/user-group.server.data.ts
index a3c616633f..ce87afc7f5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/sources/user-group.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/sources/user-group.server.data.ts
@@ -5,6 +5,7 @@ import {
 	UserGroupResource,
 	UpdateUserGroupRequestModel,
 	SaveUserGroupRequestModel,
+	UserGroupBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
@@ -26,9 +27,12 @@ export class UmbUserGroupServerDataSource implements UmbUserGroupDetailDataSourc
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
-	createScaffold(parentId: string | null): Promise<DataSourceResponse<UserGroupPresentationModel>> {
-		throw new Error('Method not implemented.');
+
+	async createScaffold(parentId: string | null) {
+		const data: UserGroupBaseModel = {};
+		return { data };
 	}
+
 	get(id: string): Promise<DataSourceResponse<UserGroupPresentationModel>> {
 		if (!id) throw new Error('Id is missing');
 		return tryExecuteAndNotify(this.#host, UserGroupResource.getUserGroupById({ id }));
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
index eb9afe78f1..de78b3f7a1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
@@ -2,7 +2,12 @@ import { Observable } from 'rxjs';
 import { UmbUserGroupCollectionFilterModel, UmbUserGroupDetailDataSource } from '../types';
 import { UmbUserGroupServerDataSource } from './sources/user-group.server.data';
 import { UmbUserGroupCollectionServerDataSource } from './sources/user-group-collection.server.data';
-import { UserGroupPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	SaveUserGroupRequestModel,
+	UpdateUserGroupRequestModel,
+	UserGroupBaseModel,
+	UserGroupPresentationModel,
+} from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbCollectionDataSource,
@@ -14,7 +19,9 @@ import {
 
 // TODO: implement
 export class UmbUserGroupRepository
-	implements UmbDetailRepository<UserGroupPresentationModel>, UmbCollectionRepository
+	implements
+		UmbDetailRepository<SaveUserGroupRequestModel, any, UpdateUserGroupRequestModel, UserGroupPresentationModel>,
+		UmbCollectionRepository
 {
 	#host: UmbControllerHostElement;
 
@@ -26,6 +33,9 @@ export class UmbUserGroupRepository
 		this.#detailSource = new UmbUserGroupServerDataSource(this.#host);
 		this.#collectionSource = new UmbUserGroupCollectionServerDataSource(this.#host);
 	}
+	createScaffold(parentId: string | null): Promise<UmbRepositoryResponse<UserGroupBaseModel>> {
+		return this.#detailSource.createScaffold(parentId);
+	}
 
 	// COLLECTION
 	async requestCollection(filter: UmbUserGroupCollectionFilterModel = { skip: 0, take: 100 }) {
@@ -34,10 +44,6 @@ export class UmbUserGroupRepository
 	}
 
 	// DETAIL
-	createScaffold(parentId: string | null): Promise<UmbRepositoryResponse<any>> {
-		throw new Error('Method not implemented.');
-	}
-
 	async requestById(id: string) {
 		if (!id) throw new Error('Id is missing');
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/section-view/user-groups-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/section-view/user-groups-section-view.element.ts
index f766c182f4..ae5ea5a1bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/section-view/user-groups-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/section-view/user-groups-section-view.element.ts
@@ -13,7 +13,7 @@ export class UmbUserGroupsSectionViewElement extends UmbLitElement {
 			component: () => import('../collection/user-group-collection.element'),
 		},
 		{
-			path: 'edit',
+			path: 'user-group',
 			component: () => import('../workspace/user-group-workspace.element'),
 		},
 		{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/types.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/types.ts
index d1fbf9282a..88533e9886 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/types.ts
@@ -1,7 +1,6 @@
 import {
 	SaveUserGroupRequestModel,
 	UpdateUserGroupRequestModel,
-	UserGroupBaseModel,
 	UserGroupPresentationModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbEntityBase } from '@umbraco-cms/backoffice/models';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
index bd164aee5f..5e57e994c9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
@@ -177,7 +177,7 @@ export class UmbUserGroupWorkspaceEditElement extends UmbLitElement {
 	#renderHeader() {
 		return html`
 			<div id="header" slot="header">
-				<a href="/section/users/view/user-groups/">
+				<a href="/section/users/view/user-groups">
 					<uui-icon name="umb:arrow-left"></uui-icon>
 				</a>
 				<uui-input id="name" .value=${this._userGroup?.name ?? ''} @input="${this.#onNameChange}"></uui-input>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
index fd80bce461..4138832fa4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
@@ -15,6 +15,14 @@ export class UmbUserGroupWorkspaceContext
 		super(host, new UmbUserGroupRepository(host));
 	}
 
+	async createScaffold() {
+		const { data } = await this.repository.createScaffold(null);
+		this.setIsNew(true);
+		// TODO: Should the data be the base model or the presentation model?
+		this.#data.next(data as unknown as UserGroupPresentationModel);
+		return { data };
+	}
+
 	async load(id: string) {
 		console.log('load');
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
index fc5cf0d5eb..90ea50cd1a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
@@ -14,7 +14,14 @@ export class UmbUserGroupWorkspaceElement extends UmbLitElement {
 	@state()
 	_routes: UmbRoute[] = [
 		{
-			path: ':id',
+			path: 'create',
+			component: () => this.#element,
+			setup: (component, info) => {
+				this.#workspaceContext.createScaffold();
+			},
+		},
+		{
+			path: 'edit/:id',
 			component: () => this.#element,
 			setup: (component, info) => {
 				const id = info.match.params.id;