diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
index ba96d2597b..1287d5a0e8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
@@ -2,25 +2,18 @@ import { css, html, LitElement, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../../core/context';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
 import './editor-view-users-table.element';
 import './editor-view-users-grid.element';
 import './editor-view-users-selection.element';
 import { IRoute } from 'router-slot';
+import UmbEditorViewUsersElement from './editor-view-users.element';
 
 export type UsersViewType = 'list' | 'grid';
 
-export interface UserItem {
-	key: string;
-	name: string;
-	userGroup: string;
-	lastLogin: string;
-	status?: string;
-}
-
 @customElement('umb-editor-view-users-list')
-export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitElement) {
+export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -55,167 +48,40 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
 		`,
 	];
 
-	private tempData = [
-		{
-			key: 'a9b18a00-58f2-420e-bf60-48d33ab156db',
-			name: 'Cecílie Bryon',
-			userGroup: 'Translators',
-			lastLogin: 'Fri, 23 April 2021',
-			status: 'Invited',
-		},
-		{
-			key: '3179d0b2-eec2-4045-b86a-149e13b93e14',
-			name: 'Kathleen G. Smith',
-			userGroup: 'Editors',
-			lastLogin: 'Tue, 6 June 2021',
-			status: 'Disabled',
-		},
-		{
-			key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72',
-			name: 'Adrian Andresen',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0207',
-			name: 'Lorenza Trentino',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0202',
-			name: 'John Doe',
-			userGroup: 'Translators',
-			lastLogin: 'Tue, 11 December 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0203',
-			name: 'Jane Doe',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0204',
-			name: 'John Smith',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0205',
-			name: 'Jane Smith',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0206',
-			name: 'Oliver Twist',
-			userGroup: 'Translators',
-			lastLogin: 'Tue, 11 December 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-2330-b66c336d0207',
-			name: 'Olivia Doe',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b66c336d0208',
-			name: 'Hans Hansen',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-		{
-			key: 'a9b18a00-58f2-sjh2-bf60-48d33ab156db',
-			name: 'Brian Adams',
-			userGroup: 'Translators',
-			lastLogin: 'Fri, 23 April 2021',
-			status: 'Invited',
-		},
-		{
-			key: '3179d0b2-eec2-4432-b86a-149e13b93e14',
-			name: 'Smith John',
-			userGroup: 'Editors',
-			lastLogin: 'Tue, 6 June 2021',
-			status: 'Disabled',
-		},
-		{
-			key: '1b1c9723-b845-4d9a-9ed2-b2f46c05fd72',
-			name: 'Reese Witherspoon',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-		{
-			key: 'b75af81a-2f94-4e65-9330-b66c336d0207',
-			name: 'Denzel Washington',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e23-9330-b66c336d0202',
-			name: 'Leonardo DiCaprio',
-			userGroup: 'Translators',
-			lastLogin: 'Tue, 11 December 2021',
-		},
-		{
-			key: 'b75af81a-2394-4e65-9330-b66c336d0203',
-			name: 'Idris Elba',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9330-b6u7336d0204',
-			name: 'Quentin Tarantino',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-2330-c66c336d0205',
-			name: 'Tom Hanks',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af82a-b994-4b65-9330-b66c336d0206',
-			name: 'Oprah Winfrey',
-			userGroup: 'Translators',
-			lastLogin: 'Tue, 11 December 2021',
-		},
-		{
-			key: 'b75af81a-b994-4e65-2s30-b66b336d0207',
-			name: 'Pamela Anderson',
-			userGroup: 'Editors',
-			lastLogin: 'Fri, 13 April 2022',
-		},
-		{
-			key: 'b75af81a-b994-4e65-9930-b66c336d0l33t',
-			name: 'Keanu Reeves',
-			userGroup: 'Administrators',
-			lastLogin: 'Mon, 15 November 2021',
-		},
-	];
-
 	@state()
 	private _viewType: UsersViewType = 'grid';
 
-	private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(this.tempData);
-	public readonly users: Observable<Array<UserItem>> = this._users.asObservable();
+	@state()
+	private _selection: Array<string> = [];
 
-	private _selection: BehaviorSubject<Array<string>> = new BehaviorSubject(<Array<string>>[]);
-	public readonly selection: Observable<Array<string>> = this._selection.asObservable();
-
-	private _IntersectionObserverOptions = {
-		root: this,
-		rootMargin: '0px',
-		threshold: 1.0,
-	};
+	private _usersContext?: UmbEditorViewUsersElement;
+	private _selectionSubscription?: Subscription;
 
 	constructor() {
 		super();
 
-		this.provideContext('umbUsersContext', this);
 		this.setupHeaderIntersectionObserver();
 	}
 
+	connectedCallback(): void {
+		super.connectedCallback();
+
+		this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
+			this._usersContext = usersContext;
+
+			this._selectionSubscription?.unsubscribe();
+			this._selectionSubscription = this._usersContext?.selection.subscribe((selection: Array<string>) => {
+				this._selection = selection;
+			});
+		});
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+
+		this._selectionSubscription?.unsubscribe();
+	}
+
 	public setupHeaderIntersectionObserver() {
 		requestAnimationFrame(() => {
 			const el = this.shadowRoot?.querySelector('#sticky-top');
@@ -231,38 +97,6 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
 		});
 	}
 
-	public setSelection(value: Array<string>) {
-		if (!value) return;
-		this._selection.next(value);
-		this.requestUpdate('selection');
-	}
-
-	public select(key: string) {
-		const selection = this._selection.getValue();
-		this._selection.next([...selection, key]);
-		this.requestUpdate('selection');
-	}
-
-	public deselect(key: string) {
-		const selection = this._selection.getValue();
-		this._selection.next(selection.filter((k) => k !== key));
-		this.requestUpdate('selection');
-	}
-
-	public getTagLookAndColor(status: string): { color: InterfaceColor; look: InterfaceLook } {
-		switch (status.toLowerCase()) {
-			case 'invited':
-			case 'inactive':
-				return { look: 'primary', color: 'warning' };
-			case 'active':
-				return { look: 'primary', color: 'positive' };
-			case 'disabled':
-				return { look: 'primary', color: 'danger' };
-			default:
-				return { look: 'secondary', color: 'default' };
-		}
-	}
-
 	private _toggleViewType() {
 		this._viewType = this._viewType === 'list' ? 'grid' : 'list';
 	}
@@ -279,7 +113,7 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
 	}
 
 	private _renderSelection() {
-		if (this._selection.getValue().length === 0) return nothing;
+		if (this._selection.length === 0) return nothing;
 
 		return html`<umb-editor-view-users-selection></umb-editor-view-users-selection>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-selection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-selection.element.ts
index 9fc07a1fc3..0b70e41c8a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-selection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-selection.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../../../../core/context';
 import { repeat } from 'lit/directives/repeat.js';
 import { Subscription } from 'rxjs';
-import UmbEditorViewUsersListElement, { UserItem } from './editor-view-users-list.element';
+import UmbEditorViewUsersElement, { UserItem } from './editor-view-users.element';
 
 @customElement('umb-editor-view-users-selection')
 export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(LitElement) {
@@ -30,14 +30,14 @@ export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(
 	@state()
 	private _selection: Array<string> = [];
 
-	protected _usersContext?: UmbEditorViewUsersListElement;
-	protected _usersSubscription?: Subscription;
-	protected _selectionSubscription?: Subscription;
+	private _usersContext?: UmbEditorViewUsersElement;
+	private _usersSubscription?: Subscription;
+	private _selectionSubscription?: Subscription;
 
 	connectedCallback(): void {
 		super.connectedCallback();
 
-		this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersListElement) => {
+		this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
 			this._usersContext = usersContext;
 
 			this._usersSubscription?.unsubscribe();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
index f47c4a3dac..711798f375 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../../../../core/context';
 import { repeat } from 'lit/directives/repeat.js';
 import { Subscription } from 'rxjs';
-import UmbEditorViewUsersListElement, { UserItem } from './editor-view-users-list.element';
+import UmbEditorViewUsersElement, { UserItem } from './editor-view-users.element';
 
 interface TableColumn {
 	name: string;
@@ -67,14 +67,14 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
 	@state()
 	private _users: Array<UserItem> = [];
 
-	protected _usersContext?: UmbEditorViewUsersListElement;
-	protected _usersSubscription?: Subscription;
-	protected _selectionSubscription?: Subscription;
+	private _usersContext?: UmbEditorViewUsersElement;
+	private _usersSubscription?: Subscription;
+	private _selectionSubscription?: Subscription;
 
 	connectedCallback(): void {
 		super.connectedCallback();
 
-		this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersListElement) => {
+		this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
 			this._usersContext = usersContext;
 
 			this._usersSubscription?.unsubscribe();
@@ -177,8 +177,8 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
 			selectable
 			?select-only=${this._selectionMode}
 			?selected=${this._isSelected(user.key)}
-			@selected=${() => this._usersContext?.select(user.key)}
-			@unselected=${() => this._usersContext?.deselect(user.key)}>
+			@selected=${() => this._selectRowHandler(user)}
+			@unselected=${() => this._deselectRowHandler(user)}>
 			<uui-table-cell>
 				<div style="display: flex; align-items: center;">
 					<uui-avatar name="${user.name}"></uui-avatar>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts
index 7a889e5bdf..96cdae7573 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts
@@ -1,14 +1,22 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property, state } from 'lit/decorators.js';
-import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../../core/context';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbContextProviderMixin } from '../../../../../core/context';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
+import { IRoute } from 'router-slot';
 import './editor-view-users-table.element';
 import './editor-view-users-grid.element';
 import './editor-view-users-selection.element';
 import './editor-view-users-user-details.element';
-import { IRoute } from 'router-slot';
+
+export interface UserItem {
+	key: string;
+	name: string;
+	userGroup: string;
+	lastLogin: string;
+	status?: string;
+}
 
 @customElement('umb-editor-view-users')
 export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElement) {
@@ -17,15 +25,198 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen
 	@state()
 	private _routes: IRoute[] = [
 		{
-			path: 'list',
+			path: '/',
 			component: () => import('./editor-view-users-list.element'),
 		},
 		{
-			path: 'details/:key',
+			path: '/:key',
 			component: () => import('./editor-view-users-user-details.element'),
 		},
 	];
 
+	private tempData = [
+		{
+			key: 'a9b18a00-58f2-420e-bf60-48d33ab156db',
+			name: 'Cecílie Bryon',
+			userGroup: 'Translators',
+			lastLogin: 'Fri, 23 April 2021',
+			status: 'Invited',
+		},
+		{
+			key: '3179d0b2-eec2-4045-b86a-149e13b93e14',
+			name: 'Kathleen G. Smith',
+			userGroup: 'Editors',
+			lastLogin: 'Tue, 6 June 2021',
+			status: 'Disabled',
+		},
+		{
+			key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72',
+			name: 'Adrian Andresen',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0207',
+			name: 'Lorenza Trentino',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0202',
+			name: 'John Doe',
+			userGroup: 'Translators',
+			lastLogin: 'Tue, 11 December 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0203',
+			name: 'Jane Doe',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0204',
+			name: 'John Smith',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0205',
+			name: 'Jane Smith',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0206',
+			name: 'Oliver Twist',
+			userGroup: 'Translators',
+			lastLogin: 'Tue, 11 December 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-2330-b66c336d0207',
+			name: 'Olivia Doe',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b66c336d0208',
+			name: 'Hans Hansen',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+		{
+			key: 'a9b18a00-58f2-sjh2-bf60-48d33ab156db',
+			name: 'Brian Adams',
+			userGroup: 'Translators',
+			lastLogin: 'Fri, 23 April 2021',
+			status: 'Invited',
+		},
+		{
+			key: '3179d0b2-eec2-4432-b86a-149e13b93e14',
+			name: 'Smith John',
+			userGroup: 'Editors',
+			lastLogin: 'Tue, 6 June 2021',
+			status: 'Disabled',
+		},
+		{
+			key: '1b1c9723-b845-4d9a-9ed2-b2f46c05fd72',
+			name: 'Reese Witherspoon',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+		{
+			key: 'b75af81a-2f94-4e65-9330-b66c336d0207',
+			name: 'Denzel Washington',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e23-9330-b66c336d0202',
+			name: 'Leonardo DiCaprio',
+			userGroup: 'Translators',
+			lastLogin: 'Tue, 11 December 2021',
+		},
+		{
+			key: 'b75af81a-2394-4e65-9330-b66c336d0203',
+			name: 'Idris Elba',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9330-b6u7336d0204',
+			name: 'Quentin Tarantino',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-2330-c66c336d0205',
+			name: 'Tom Hanks',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af82a-b994-4b65-9330-b66c336d0206',
+			name: 'Oprah Winfrey',
+			userGroup: 'Translators',
+			lastLogin: 'Tue, 11 December 2021',
+		},
+		{
+			key: 'b75af81a-b994-4e65-2s30-b66b336d0207',
+			name: 'Pamela Anderson',
+			userGroup: 'Editors',
+			lastLogin: 'Fri, 13 April 2022',
+		},
+		{
+			key: 'b75af81a-b994-4e65-9930-b66c336d0l33t',
+			name: 'Keanu Reeves',
+			userGroup: 'Administrators',
+			lastLogin: 'Mon, 15 November 2021',
+		},
+	];
+
+	private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(this.tempData);
+	public readonly users: Observable<Array<UserItem>> = this._users.asObservable();
+
+	private _selection: BehaviorSubject<Array<string>> = new BehaviorSubject(<Array<string>>[]);
+	public readonly selection: Observable<Array<string>> = this._selection.asObservable();
+
+	constructor() {
+		super();
+
+		this.provideContext('umbUsersContext', this);
+	}
+
+	public setSelection(value: Array<string>) {
+		if (!value) return;
+		this._selection.next(value);
+		this.requestUpdate('selection');
+	}
+
+	public select(key: string) {
+		const selection = this._selection.getValue();
+		this._selection.next([...selection, key]);
+		this.requestUpdate('selection');
+	}
+
+	public deselect(key: string) {
+		const selection = this._selection.getValue();
+		this._selection.next(selection.filter((k) => k !== key));
+		this.requestUpdate('selection');
+	}
+
+	public getTagLookAndColor(status: string): { color: InterfaceColor; look: InterfaceLook } {
+		switch (status.toLowerCase()) {
+			case 'invited':
+			case 'inactive':
+				return { look: 'primary', color: 'warning' };
+			case 'active':
+				return { look: 'primary', color: 'positive' };
+			case 'disabled':
+				return { look: 'primary', color: 'danger' };
+			default:
+				return { look: 'secondary', color: 'default' };
+		}
+	}
+
 	render() {
 		return html` <router-slot .routes=${this._routes}></router-slot> `;
 	}