diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
index 627a220bf4..467be649c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
@@ -1,33 +1,80 @@
-import { UmbUserGroupCollectionRepository } from '@umbraco-cms/backoffice/user-group';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbUserGroupRepository } from '@umbraco-cms/backoffice/user-group';
+import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UMB_ENTITY_USER_PERMISSION_MODAL,
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 	UMB_USER_GROUP_PICKER_MODAL,
 	UmbEntityUserPermissionSettingsModalData,
-	UmbEntityUserPermissionSettingsModalResult,
+	UmbEntityUserPermissionSettingsModalValue,
 	UmbModalContext,
 	UmbModalManagerContext,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UserGroupItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
+import { UmbId } from '@umbraco-cms/backoffice/id';
+import {
+	UMB_USER_PERMISSION_DOCUMENT_CREATE,
+	UMB_USER_PERMISSION_DOCUMENT_READ,
+} from '@umbraco-cms/backoffice/document';
+
+type UserPermissionModel<PermissionTargetType> = {
+	id: string;
+	target: PermissionTargetType;
+	permissions: Array<string>;
+};
+
+type DocumentGranularPermission = {
+	entityType: 'document';
+	documentId: string;
+	userGroupId: string;
+};
+
+type UmbUserGroupRefData = {
+	id: string;
+	name?: string;
+	icon?: string | null;
+	permissions: Array<string>;
+};
 
 @customElement('umb-permissions-modal')
 export class UmbPermissionsModalElement extends UmbLitElement {
 	@property({ attribute: false })
-	modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult>;
+	modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalValue>;
 
 	@property({ type: Object })
 	data?: UmbEntityUserPermissionSettingsModalData;
 
 	@state()
-	_userGroups: Array<UserGroupItemResponseModel> = [];
+	_userGroups: Array<UmbUserGroupRefData> = [];
 
-	#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
+	@state()
+	_permissions: Array<UserPermissionModel<DocumentGranularPermission>> = [
+		{
+			id: new UmbId().toString(),
+			target: {
+				entityType: 'document',
+				documentId: '1234-1234-1234',
+				userGroupId: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
+			},
+			permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE],
+		},
+		{
+			id: new UmbId().toString(),
+			target: {
+				entityType: 'document',
+				documentId: '1234-1234-1234',
+				userGroupId: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
+			},
+			permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
+		},
+	];
+
+	#userGroupRepository = new UmbUserGroupRepository(this);
 	#modalManagerContext?: UmbModalManagerContext;
 
+	#userGroupPickerModal?: UmbModalContext;
+
 	private _handleConfirm() {
 		this.modalContext?.submit();
 	}
@@ -44,20 +91,33 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 		});
 	}
 
+	async connectedCallback(): Promise<void> {
+		super.connectedCallback();
+
+		const userGroupIds = [...new Set(this._permissions.map((permission) => permission.target.userGroupId))];
+		const { data } = await this.#userGroupRepository.requestItems(userGroupIds);
+
+		const userGroups = data ?? [];
+
+		this._userGroups = this._permissions.map((entry) => {
+			const userGroup = userGroups.find((userGroup) => userGroup.id == entry.target.userGroupId);
+			return {
+				id: entry.target.userGroupId,
+				name: userGroup?.name,
+				icon: userGroup?.icon,
+				permissions: entry.permissions,
+			};
+		});
+	}
+
 	#openUserGroupPickerModal() {
 		if (!this.#modalManagerContext) return;
 
-		const modalContext = this.#modalManagerContext.open(UMB_USER_GROUP_PICKER_MODAL);
+		this.#userGroupPickerModal = this.#modalManagerContext.open(UMB_USER_GROUP_PICKER_MODAL);
 
-		modalContext.addEventListener(UmbSelectedEvent.TYPE, (event) => {
-			const selectedEvent = event as UmbSelectedEvent;
-			this.#openUserPermissionsModal(selectedEvent.unique);
-		});
-
-		modalContext?.onSubmit().then((result) => {
-			console.log(result);
-			debugger;
-		});
+		this.#userGroupPickerModal.addEventListener(UmbSelectedEvent.TYPE, (event) =>
+			this.#openUserPermissionsModal((event as UmbSelectedEvent).unique),
+		);
 	}
 
 	#openUserPermissionsModal(id: string) {
@@ -65,34 +125,32 @@ export class UmbPermissionsModalElement extends UmbLitElement {
 
 		const modalContext = this.#modalManagerContext?.open(UMB_ENTITY_USER_PERMISSION_MODAL, {
 			unique: id,
-			entityType: ['user-group'],
+			entityType: ['document'],
 		});
 
-		modalContext?.onSubmit().then((result) => {
-			console.log(result);
-			debugger;
+		modalContext?.onSubmit().then((value) => {
+			console.log(value);
 		});
 	}
 
-	async firstUpdated() {
-		const { data } = await this.#userGroupCollectionRepository.requestCollection();
-
-		if (data) {
-			this._userGroups = data.items;
-		}
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline="Permissions">
 				<uui-box>
-					<uui-button @click=${this.#openUserGroupPickerModal} look="placeholder">Open</uui-button>
+					<uui-ref-list>
+						${this._userGroups.map(
+							(userGroup) =>
+								html`<umb-user-group-ref
+									name=${ifDefined(userGroup.name)}
+									.userPermissionAliases=${userGroup.permissions}
+									border>
+									<uui-icon slot="icon" .icon=${userGroup.icon}></uui-icon>
+								</umb-user-group-ref>`,
+						)}
+					</uui-ref-list>
+					<uui-button style="width: 100%;" @click=${this.#openUserGroupPickerModal} look="placeholder">Open</uui-button>
 				</uui-box>
 
-				<ul>
-					${this._userGroups.map((group) => html`<li>${group}</li>`)}
-				</ul>
-
 				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
 				<uui-button
 					slot="actions"
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
index 3c0a2371cf..9001c994ef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
@@ -1,6 +1,8 @@
 import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
-import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { ManifestUserPermission, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { map } from '@umbraco-cms/backoffice/external/rxjs';
 
 /**
  *  @element umb-user-group-ref
@@ -9,6 +11,52 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
  */
 @customElement('umb-user-group-ref')
 export class UmbUserGroupRefElement extends UmbElementMixin(UUIRefNodeElement) {
+	@property({ type: Array, attribute: 'user-permission-aliases' })
+	public get userPermissionAliases(): Array<string> {
+		return [];
+	}
+	public set userPermissionAliases(value: Array<string>) {
+		this.#observeUserPermissions(value);
+	}
+
+	#userPermissionLabels: Array<string> = [];
+
+	async #observeUserPermissions(value: Array<string>) {
+		if (value) {
+			this.observe(
+				umbExtensionsRegistry.extensionsOfType('userPermission').pipe(
+					map((manifests) => {
+						return manifests.filter((manifest) => manifest.alias && value.includes(manifest.alias));
+					}),
+				),
+				(userPermissionManifests) => this.#setUserPermissionLabels(userPermissionManifests),
+				'userPermissionLabels',
+			);
+		} else {
+			this.removeControllerByAlias('userPermissionLabels');
+		}
+	}
+
+	#setUserPermissionLabels(manifests: Array<ManifestUserPermission>) {
+		this.#userPermissionLabels = manifests.map((manifest) =>
+			manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label ?? '',
+		);
+	}
+
+	protected renderDetail() {
+		const details: string[] = [];
+
+		if (this.#userPermissionLabels.length > 0) {
+			details.push(this.#userPermissionLabels.join(', '));
+		}
+
+		if (this.detail !== '') {
+			details.push(this.detail);
+		}
+
+		return html`<small id="detail">${details.join(' | ')}<slot name="detail"></slot></small>`;
+	}
+
 	static styles = [...UUIRefNodeElement.styles];
 }