diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts
new file mode 100644
index 0000000000..2724d9519f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts
@@ -0,0 +1,19 @@
+import { ITreeService } from '../tree.service';
+
+export class UmbTreeMemberGroupsContext implements ITreeService {
+	public async getRoot() {
+		return {
+			id: -1,
+			key: 'd46d144e-33d8-41e3-bf7a-545287e16e3c',
+			name: 'Member Groups',
+			hasChildren: true,
+		};
+	}
+
+	public async getChildren(id: string) {
+		// TODO: figure out url structure
+		const res = await fetch(`/umbraco/backoffice/trees/member-groups/${id}`);
+		const json = await res.json();
+		return json;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.element.ts
new file mode 100644
index 0000000000..b72a52731e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.element.ts
@@ -0,0 +1,37 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+import '../shared/tree-navigator.element';
+
+import { UmbContextProviderMixin } from '../../../core/context';
+import { UmbExtensionManifestTree } from '../../../core/extension';
+import { UmbTreeMemberGroupsContext } from './tree-member-groups.context';
+
+@customElement('umb-tree-member-groups')
+export class UmbTreeMemberGroups extends UmbContextProviderMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	private _treeContext?: UmbTreeMemberGroupsContext;
+
+	@property({ attribute: false })
+	public tree?: UmbExtensionManifestTree;
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._treeContext = new UmbTreeMemberGroupsContext();
+		this.provideContext('umbTreeService', this._treeContext);
+	}
+
+	render() {
+		return html`<umb-tree-navigator></umb-tree-navigator>`;
+	}
+}
+
+export default UmbTreeMemberGroups;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-member-groups': UmbTreeMemberGroups;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts
index 3e1e4c0921..54d7910843 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts
@@ -23,4 +23,36 @@ export const handlers = [
 
 		return res(ctx.status(200), ctx.json(items));
 	}),
+
+	rest.get('/umbraco/backoffice/trees/member-groups/:id', (req, res, ctx) => {
+		console.warn('Please move to schema');
+		const id = req.params.id as string;
+		if (!id) return;
+
+		//const int = parseInt(id);
+		//const document = umbNodeData.getById(int);
+
+		const items = [
+			{
+				id: '1',
+				key: 'fcb3f468-97de-469d-8090-d14d068ad968',
+				name: 'Group 1',
+				hasChildren: false,
+			},
+			{
+				id: '2',
+				key: 'd99bfca4-551d-427d-a842-d47b756b8977',
+				name: 'Group 2',
+				hasChildren: false,
+			},
+			{
+				id: '3',
+				key: 'b7b7ec7c-1c4a-4a78-9a6a-0652e891972a',
+				name: 'Group 3',
+				hasChildren: false,
+			},
+		];
+
+		return res(ctx.status(200), ctx.json(items));
+	}),
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index 416ba8f0f8..3e90b454f8 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -289,4 +289,15 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
 			sections: ['Umb.Section.Members'],
 		},
 	},
+	{
+		type: 'tree',
+		alias: 'Umb.Tree.MemberGroups',
+		name: 'Members Groups Tree',
+		js: () => import('./backoffice/tree/member-groups/tree-member-groups.element'),
+		meta: {
+			label: 'Member Groups',
+			weight: -10,
+			sections: ['Umb.Section.Members'],
+		},
+	},
 ];