diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
index cacdb22527..12ca57fae9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
@@ -40,6 +40,9 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
 		return html`
 			<umb-body-layout headline="Hello">
 				<uui-box>
+					<umb-entity-user-permission-settings
+						entity-type=${this.data?.entityType}></umb-entity-user-permission-settings>
+
 					Render user permissions for ${this.data?.entityType} ${this.data?.unique}
 					${this._userPermissionManifests.map((permission) => this.#renderPermission(permission))}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/index.ts b/src/Umbraco.Web.UI.Client/src/packages/users/index.ts
index 2f1673f76b..14c64c8860 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/index.ts
@@ -2,3 +2,4 @@ export * from './current-user/index.js';
 export * from './user-groups/index.js';
 export * from './users/index.js';
 export * from './manifests.js';
+export * from './user-permission/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/users/manifests.ts
index 74b7562a5d..17ba9f2252 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/manifests.ts
@@ -6,5 +6,6 @@ import { manifests as currentUserManifests } from './current-user/manifests.js';
 // We need to load any components that are not loaded by the user management bundle to register them in the browser.
 import './user-groups/components/index.js';
 import './users/components/index.js';
+import './user-permission/components/index.js';
 
 export const manifests = [...userGroupManifests, ...userManifests, ...userSectionManifests, ...currentUserManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts
index 84d7880f9e..159514af83 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts
@@ -1,20 +1,14 @@
 import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context.js';
-import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { ManifestUserPermission, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
-import { type UmbUserPermissionSettingElement } from '@umbraco-cms/backoffice/users';
-import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
 
 @customElement('umb-user-group-default-permission-list')
 export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 	@state()
-	private _userGroup?: UserGroupResponseModel;
-
-	@state()
-	private _manifests: Array<ManifestUserPermission> = [];
+	private _userGroupDefaultPermissions?: Array<string>;
 
 	@state()
 	private _entityTypes: Array<string> = [];
@@ -28,27 +22,23 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 
 		this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
 			this.#userGroupWorkspaceContext = instance;
-			this.observe(this.#userGroupWorkspaceContext.data, (userGroup) => (this._userGroup = userGroup));
+			this.observe(
+				this.#userGroupWorkspaceContext.data,
+				(userGroup) => (this._userGroupDefaultPermissions = userGroup?.permissions),
+			);
 		});
 	}
 
 	#observeUserPermissions() {
 		this.observe(umbExtensionsRegistry.extensionsOfType('userPermission'), (userPermissionManifests) => {
-			this._manifests = userPermissionManifests;
 			this._entityTypes = [...new Set(userPermissionManifests.map((manifest) => manifest.meta.entityType))];
 		});
 	}
 
-	#onChangeUserPermission(event: UmbChangeEvent, userPermissionManifest: ManifestUserPermission) {
-		const target = event.target as UmbUserPermissionSettingElement;
-
-		target.allowed
-			? this.#userGroupWorkspaceContext?.addPermission(userPermissionManifest.alias)
-			: this.#userGroupWorkspaceContext?.removePermission(userPermissionManifest.alias);
-	}
-
-	#isAllowed(permissionAlias: string) {
-		return this._userGroup?.permissions?.includes(permissionAlias);
+	#onSelectedUserPermission(event: UmbSelectedEvent) {
+		const target = event.target as any;
+		const selection = target.selectedPermissions;
+		this.#userGroupWorkspaceContext?.setDefaultPermissions(selection);
 	}
 
 	render() {
@@ -56,38 +46,15 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 	}
 
 	#renderPermissionsByEntityType(entityType: string) {
-		const permissionsForEntityType = this._manifests.filter((manifest) => manifest.meta.entityType === entityType);
 		return html`
 			<h4><umb-localize .key=${`user_permissionsEntityGroup_${entityType}`}>${entityType}</umb-localize></h4>
-			${this.#renderGroupedPermissions(permissionsForEntityType)}
+			<umb-entity-user-permission-settings-list
+				.entityType=${entityType}
+				.selectedPermissions=${this._userGroupDefaultPermissions || []}
+				@selected=${this.#onSelectedUserPermission}></umb-entity-user-permission-settings-list>
 		`;
 	}
 
-	#renderGroupedPermissions(permissions: Array<ManifestUserPermission>) {
-		const groupedPermissions = groupBy(permissions, (manifest) => manifest.meta.group);
-		return html`
-			${Object.entries(groupedPermissions).map(
-				([group, manifests]) => html`
-					${group !== 'undefined'
-						? html` <h5><umb-localize .key=${`actionCategories_${group}`}>${group}</umb-localize></h5> `
-						: nothing}
-					${manifests.map((manifest) => html` ${this.#renderPermission(manifest)} `)}
-				`,
-			)}
-		`;
-	}
-
-	#renderPermission(manifest: ManifestUserPermission) {
-		return html` <umb-user-permission-setting
-			label=${ifDefined(manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label)}
-			description=${ifDefined(
-				manifest.meta.descriptionKey ? this.localize.term(manifest.meta.descriptionKey) : manifest.meta.description,
-			)}
-			?allowed=${this.#isAllowed(manifest.alias)}
-			@change=${(event: UmbChangeEvent) =>
-				this.#onChangeUserPermission(event, manifest)}></umb-user-permission-setting>`;
-	}
-
 	static styles = [UmbTextStyles];
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/user-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/user-group-workspace.context.ts
index d750f28faf..4fa827c4ec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/user-group-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/user-group-workspace.context.ts
@@ -107,22 +107,39 @@ export class UmbUserGroupWorkspaceContext
 	}
 
 	/**
-	 * Adds a permission to the user group permission array.
+	 * Sets the user group default permissions.
+	 * @param {Array<string>} permissionAliases
+	 * @memberof UmbUserGroupWorkspaceContext
+	 */
+	setDefaultPermissions(permissionAliases: Array<string>) {
+		this.#data.update({ permissions: permissionAliases });
+	}
+
+	/**
+	 * Gets the user group default permissions.
+	 * @memberof UmbUserGroupWorkspaceContext
+	 */
+	getDefaultPermissions() {
+		return this.#data.getValue()?.permissions ?? [];
+	}
+
+	/**
+	 * Allows a default permission on the user group.
 	 * @param {string} permissionAlias
 	 * @memberof UmbUserGroupWorkspaceContext
 	 */
-	addPermission(permissionAlias: string) {
+	allowDefaultPermission(permissionAlias: string) {
 		const permissions = this.#data.getValue()?.permissions ?? [];
 		const newValue = [...permissions, permissionAlias];
 		this.#data.update({ permissions: newValue });
 	}
 
 	/**
-	 * Removes a permission from the user group permission array.
+	 * Disallows a default permission on the user group.
 	 * @param {string} permissionAlias
 	 * @memberof UmbUserGroupWorkspaceContext
 	 */
-	removePermission(permissionAlias: string) {
+	disallowDefaultPermission(permissionAlias: string) {
 		const permissions = this.#data.getValue()?.permissions ?? [];
 		const newValue = permissions.filter((alias) => alias !== permissionAlias);
 		this.#data.update({ permissions: newValue });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/entity-user-permission-settings-list/entity-user-permission-settings-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/entity-user-permission-settings-list/entity-user-permission-settings-list.element.ts
new file mode 100644
index 0000000000..bf86e94b36
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/entity-user-permission-settings-list/entity-user-permission-settings-list.element.ts
@@ -0,0 +1,108 @@
+import { UmbChangeEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
+import {
+	ManifestEntityAction,
+	ManifestUserPermission,
+	umbExtensionsRegistry,
+} from '@umbraco-cms/backoffice/extension-registry';
+import { css, html, customElement, property, state, nothing, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
+import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbUserPermissionSettingElement } from '@umbraco-cms/backoffice/users';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-entity-user-permission-settings-list')
+export class UmbEntityUserPermissionSettingsListElement extends UmbLitElement {
+	@property({ type: String, attribute: 'entity-type' })
+	public get entityType(): string {
+		return this._entityType;
+	}
+	public set entityType(value: string) {
+		if (value === this._entityType) return;
+		this._entityType = value;
+		this.#observeUserPermissions();
+	}
+	private _entityType: string = '';
+
+	@property({ attribute: false })
+	selectedPermissions: Array<string> = [];
+
+	@state()
+	private _manifests: Array<ManifestUserPermission> = [];
+
+	#manifestObserver?: UmbObserverController<Array<ManifestUserPermission>>;
+
+	#isAllowed(permissionAlias: string) {
+		return this.selectedPermissions?.includes(permissionAlias);
+	}
+
+	#observeUserPermissions() {
+		this.#manifestObserver?.destroy();
+
+		this.#manifestObserver = this.observe(
+			umbExtensionsRegistry.extensionsOfType('userPermission'),
+			(userPermissionManifests) => {
+				this._manifests = userPermissionManifests.filter((manifest) => manifest.meta.entityType === this.entityType);
+			},
+		);
+	}
+
+	#onChangeUserPermission(event: UmbChangeEvent, permissionAlias: string) {
+		event.stopPropagation();
+		const target = event.target as UmbUserPermissionSettingElement;
+		target.allowed ? this.#addUserPermission(permissionAlias) : this.#removeUserPermission(permissionAlias);
+	}
+
+	#addUserPermission(permissionAlias: string) {
+		this.selectedPermissions = [...this.selectedPermissions, permissionAlias];
+		this.dispatchEvent(new UmbSelectedEvent());
+	}
+
+	#removeUserPermission(permissionAlias: string) {
+		this.selectedPermissions = this.selectedPermissions.filter((alias) => alias !== permissionAlias);
+		this.dispatchEvent(new UmbSelectedEvent());
+	}
+
+	render() {
+		return html`${this.#renderGroupedPermissions(this._manifests)} `;
+	}
+
+	#renderGroupedPermissions(permissionManifests: Array<ManifestUserPermission>) {
+		const groupedPermissions = groupBy(permissionManifests, (manifest) => manifest.meta.group);
+		return html`
+			${Object.entries(groupedPermissions).map(
+				([group, manifests]) => html`
+					${group !== 'undefined'
+						? html` <h5><umb-localize .key=${`actionCategories_${group}`}>${group}</umb-localize></h5> `
+						: nothing}
+					${manifests.map((manifest) => html` ${this.#renderPermission(manifest)} `)}
+				`,
+			)}
+		`;
+	}
+
+	#renderPermission(manifest: ManifestUserPermission) {
+		return html` <umb-user-permission-setting
+			label=${ifDefined(manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label)}
+			description=${ifDefined(
+				manifest.meta.descriptionKey ? this.localize.term(manifest.meta.descriptionKey) : manifest.meta.description,
+			)}
+			?allowed=${this.#isAllowed(manifest.alias)}
+			@change=${(event: UmbChangeEvent) =>
+				this.#onChangeUserPermission(event, manifest.alias)}></umb-user-permission-setting>`;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#manifestObserver?.destroy();
+	}
+
+	static styles = [css``];
+}
+
+export default UmbEntityUserPermissionSettingsListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-entity-user-permission-settings-list': UmbEntityUserPermissionSettingsListElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/index.ts
new file mode 100644
index 0000000000..782bc56df3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/index.ts
@@ -0,0 +1,3 @@
+import './entity-user-permission-settings-list/entity-user-permission-settings-list.element.js';
+
+export * from './entity-user-permission-settings-list/entity-user-permission-settings-list.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/index.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/index.ts
new file mode 100644
index 0000000000..8a8c2711ca
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-permission/index.ts
@@ -0,0 +1 @@
+export * from './components/index.js';