diff --git a/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts
index 4b602520de..0f0eed532c 100644
--- a/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts
@@ -2,11 +2,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInputListBase } from '../../../backoffice/shared/components/input-list-base/input-list-base';
-import type { UserGroupEntity } from '@umbraco-cms/models';
 import {
 	UmbUserGroupStore,
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
-} from 'src/backoffice/users/user-groups/user-group.store';
+} from '../../../backoffice/users/user-groups/user-group.store';
+import type { UserGroupEntity } from '@umbraco-cms/models';
 
 @customElement('umb-input-user-group')
 export class UmbInputPickerUserGroupElement extends UmbInputListBase {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index a52f8f5d52..7bb106b9b8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -5,7 +5,7 @@ import { css, html } from 'lit';
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../core/modal';
 import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '../core/notification';
 import { UmbUserStore } from './users/users/user.store';
-import { UmbUserGroupStore, UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from './users/user-groups/user-group.store';
+import { UmbUserGroupStore } from './users/user-groups/user-group.store';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './users/current-user/current-user.store';
 import {
 	UmbCurrentUserHistoryStore,
@@ -84,8 +84,8 @@ export class UmbBackofficeElement extends UmbLitElement {
 		new UmbDocumentTypeTreeStore(this);
 		new UmbMemberTypeDetailStore(this);
 		new UmbMemberTypeTreeStore(this);
+		new UmbUserGroupStore(this);
 
-		this.provideContext(UMB_USER_GROUP_STORE_CONTEXT_TOKEN, new UmbUserGroupStore(this));
 		this.provideContext(UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN, new UmbMemberGroupStore(this));
 		this.provideContext(UMB_SECTION_STORE_CONTEXT_TOKEN, new UmbSectionStore());
 		this.provideContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, new UmbCurrentUserHistoryStore());
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/user-group.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/user-group.store.ts
index ebf7d6af87..1303dfc306 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/user-group.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/user-group.store.ts
@@ -1,67 +1,67 @@
-import { map, Observable } from 'rxjs';
-import { UmbDataStoreBase } from '../../../core/stores/store';
-import type { UserGroupDetails, UserGroupEntity } from '@umbraco-cms/models';
+import type { UserGroupDetails } from '@umbraco-cms/models';
 import { UmbContextToken } from '@umbraco-cms/context-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { createObservablePart, UniqueArrayBehaviorSubject } from '@umbraco-cms/observable-api';
+import { UmbStoreBase } from '@umbraco-cms/stores/store-base';
 
 // TODO: get rid of this type addition & { ... }:
 export type UmbUserGroupStoreItemType = UserGroupDetails & { users?: Array<string> };
 
-export const STORE_ALIAS = 'UmbUserGroupStore';
+export const UMB_USER_GROUP_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbUserStore>('UmbUserGroupStore');
 
 /**
  * @export
  * @class UmbUserGroupStore
- * @extends {UmbDataStoreBase<UserGroupEntity>}
- * @description - Data Store for Users
+ * @extends {UmbStoreBase}
+ * @description - Data Store for User Groups
  */
-export class UmbUserGroupStore extends UmbDataStoreBase<UmbUserGroupStoreItemType> {
-	public readonly storeAlias = STORE_ALIAS;
+export class UmbUserGroupStore extends UmbStoreBase {
 
-	getAll(): Observable<Array<UmbUserGroupStoreItemType>> {
+
+	#groups = new UniqueArrayBehaviorSubject<UmbUserGroupStoreItemType>([], x => x.key);
+	public groups = this.#groups.asObservable();
+
+
+	constructor(host: UmbControllerHostInterface) {
+		super(host, UMB_USER_GROUP_STORE_CONTEXT_TOKEN.toString());
+	}
+
+	getAll() {
 		// TODO: use Fetcher API.
 		// TODO: only fetch if the data type is not in the store?
 		fetch(`/umbraco/backoffice/user-groups/list/items`)
 			.then((res) => res.json())
 			.then((data) => {
-				this.updateItems(data.items);
+				this.#groups.append(data.items);
 			});
 
-		return this.items;
+		return this.groups;
 	}
 
-	getByKey(key: string): Observable<UmbUserGroupStoreItemType | null> {
+	getByKey(key: string) {
 		// TODO: use Fetcher API.
 		// TODO: only fetch if the data type is not in the store?
 		fetch(`/umbraco/backoffice/user-groups/details/${key}`)
 			.then((res) => res.json())
 			.then((data) => {
-				this.updateItems([data]);
+				this.#groups.append([data]);
 			});
 
-		return this.items.pipe(
-			map(
-				(userGroups: Array<UmbUserGroupStoreItemType>) =>
-					userGroups.find((userGroup: UmbUserGroupStoreItemType) => userGroup.key === key) || null
-			)
-		);
+		return createObservablePart(this.groups, (userGroups) => userGroups.find(userGroup => userGroup.key === key));
 	}
 
-	getByKeys(keys: Array<string>): Observable<Array<UserGroupEntity>> {
+	getByKeys(keys: Array<string>) {
 		const params = keys.map((key) => `key=${key}`).join('&');
 		fetch(`/umbraco/backoffice/user-groups/getByKeys?${params}`)
 			.then((res) => res.json())
 			.then((data) => {
-				this.updateItems(data);
+				this.#groups.append(data);
 			});
 
-		return this.items.pipe(
-			map((items: Array<UmbUserGroupStoreItemType>) =>
-				items.filter((node: UmbUserGroupStoreItemType) => keys.includes(node.key))
-			)
-		);
+			return createObservablePart(this.groups, (items) => items.filter(node => keys.includes(node.key)));
 	}
 
-	async save(userGroups: Array<UmbUserGroupStoreItemType>): Promise<void> {
+	async save(userGroups: Array<UmbUserGroupStoreItemType>) {
 		// TODO: use Fetcher API.
 
 		// TODO: implement so user group store updates the
@@ -80,11 +80,9 @@ export class UmbUserGroupStore extends UmbDataStoreBase<UmbUserGroupStoreItemTyp
 				},
 			});
 			const json = await res.json();
-			this.updateItems(json);
+			this.#groups.append(json);
 		} catch (error) {
 			console.error('Save Data Type error', error);
 		}
 	}
 }
-
-export const UMB_USER_GROUP_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbUserGroupStore>(STORE_ALIAS);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
index 1bfaf9fcbb..4ef941cf50 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
@@ -2,11 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
+import { UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from '../../../../backoffice/users/user-groups/user-group.store';
+import type { UmbUserGroupStore } from '../../../../backoffice/users/user-groups/user-group.store';
 import type { UserGroupDetails } from '@umbraco-cms/models';
-import {
-	UmbUserGroupStore,
-	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
-} from 'src/backoffice/users/user-groups/user-group.store';
 
 @customElement('umb-picker-layout-user-group')
 export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase {