diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
index 54ad3b675a..8283848981 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
@@ -12,9 +12,6 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 	@state()
 	_currentView?: ManifestCollectionView;
 
-	@state()
-	private _isOpen = false;
-
 	@state()
 	private _collectionRootPathname = '';
 
@@ -33,56 +30,65 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 	}
 
 	#observeCurrentView() {
-		this.observe(this.#collectionContext!.currentView, (view) => {
-			this._currentView = view;
-		}, 'umbCurrentCollectionViewObserver');
+		this.observe(
+			this.#collectionContext!.currentView,
+			(view) => {
+				//TODO: This is not called when the view is changed
+				this._currentView = view;
+			},
+			'umbCurrentCollectionViewObserver',
+		);
 	}
 
 	#observeViews() {
-		this.observe(this.#collectionContext!.views, (views) => {
-			this._views = views;
-		}, 'umbCollectionViewsObserver');
+		this.observe(
+			this.#collectionContext!.views,
+			(views) => {
+				this._views = views;
+			},
+			'umbCollectionViewsObserver',
+		);
 	}
-
-	#toggleDropdown() {
-		this._isOpen = !this._isOpen;
-	}
-
-	#closeDropdown() {
-		this._isOpen = false;
-	}
-
 	render() {
-		return html`${this.#renderLayoutButton()}`;
-	}
-
-	#renderLayoutButton() {
 		if (!this._currentView) return nothing;
 
-		return html` <umb-dropdown .open="${this._isOpen}" @close=${this.#closeDropdown}>
-			<uui-button slot="trigger" label="status" @click=${this.#toggleDropdown}
-				>${this.#renderItemDisplay(this._currentView)}</uui-button
-			>
-			<div slot="dropdown" class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
-		</umb-dropdown>`;
+		return html`
+			<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
+				${this.#renderItemDisplay(this._currentView)}
+			</uui-button>
+			<uui-popover-container id="collection-view-bundle-popover" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
 	}
 
 	#renderItem(view: ManifestCollectionView) {
-		return html`<a href="${this._collectionRootPathname}/${view.meta.pathName}">${this.#renderItemDisplay(view)}</a>`;
+		return html`
+			<uui-button compact href="${this._collectionRootPathname}/${view.meta.pathName}">
+				${this.#renderItemDisplay(view)} <span class="label">${view.meta.label}</span>
+			</uui-button>
+		`;
 	}
 
 	#renderItemDisplay(view: ManifestCollectionView) {
-		return html`<span class="item"><uui-icon name=${view.meta.icon}></uui-icon> ${view.meta.label}</span>`;
+		return html`<uui-icon name=${view.meta.icon}></uui-icon>`;
 	}
 
 	static styles = [
 		UmbTextStyles,
 		css`
-			.item {
+			:host {
+				--uui-button-content-align: left;
 			}
-
-			a {
-				display: block;
+			.label {
+				margin-left: var(--uui-size-space-1);
+			}
+			.filter-dropdown {
+				display: flex;
+				gap: var(--uui-size-space-3);
+				flex-direction: column;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index d212570fa6..99fe0873ce 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -33,3 +33,4 @@ export * from './ref-property-editor-ui/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
+export * from './popover-layout/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts
new file mode 100644
index 0000000000..8bea3415c4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts
@@ -0,0 +1,3 @@
+import './popover-layout.element.js';
+
+export * from './popover-layout.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts
new file mode 100644
index 0000000000..7b0994bbf4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts
@@ -0,0 +1,33 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+// TODO: maybe move this to UI Library.
+// TODO: add overwrites for customization.
+@customElement('umb-popover-layout')
+export class UmbPopoverLayoutElement extends UmbLitElement {
+	render() {
+		return html`<slot></slot>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				background-color: var(--uui-color-surface);
+				display: block;
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-3);
+				padding: var(--uui-size-space-3);
+				overflow: clip;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-popover-layout': UmbPopoverLayoutElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
index 29c7bcb878..0dc081232f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
@@ -69,15 +69,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 		}
 	}
 
-	#onDropdownClick(event: PointerEvent) {
-		const composedPath = event.composedPath();
-
-		const dropdown = composedPath.find((el) => el instanceof UmbDropdownElement) as UmbDropdownElement;
-		if (dropdown) {
-			dropdown.open = !dropdown.open;
-		}
-	}
-
 	private _updateSearch(event: InputEvent) {
 		const target = event.target as HTMLInputElement;
 		const filter = target.value || '';
@@ -118,8 +109,9 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 
 	render() {
 		return html`
-			${this.#renderCollectionActions()} ${this.#renderSearch()} ${this.#renderFilters()}
-			${this.#renderCollectionViews()}
+			<div style="display: flex; gap: var(--uui-size-space-4)">${this.#renderCollectionActions()}</div>
+			${this.#renderSearch()}
+			<div>${this.#renderFilters()} ${this.#renderCollectionViews()}</div>
 		`;
 	}
 
@@ -162,9 +154,27 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 	}
 
 	#getUserGroupFilterLabel() {
-		return this._userGroupFilterSelection.length === 0
+		const length = this._userGroupFilterSelection.length;
+		const max = 2;
+		//TODO: Temp solution to limit the amount of states shown
+		return length === 0
 			? this.localize.term('general_all')
-			: this._userGroupFilterSelection.map((group) => group.name).join(', ');
+			: this._userGroupFilterSelection
+					.slice(0, max)
+					.map((group) => group.name)
+					.join(', ') + (length > max ? ' + ' + (length - max) : '');
+	}
+
+	#getStatusFilterLabel() {
+		const length = this._stateFilterSelection.length;
+		const max = 2;
+		//TODO: Temp solution to limit the amount of states shown
+		return length === 0
+			? this.localize.term('general_all')
+			: this._stateFilterSelection
+					.slice(0, max)
+					.map((state) => this.localize.term('user_state' + state))
+					.join(', ') + (length > max ? ' + ' + (length - max) : '');
 	}
 
 	#renderFilters() {
@@ -173,45 +183,47 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 
 	#renderStatusFilter() {
 		return html`
-			<umb-dropdown class="filter">
-				<uui-button @click=${this.#onDropdownClick} slot="trigger" label="status">
-					<umb-localize key="general_status"></umb-localize>:
-					<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
-				</uui-button>
-
-				<div slot="dropdown" class="filter-dropdown">
-					${this._stateFilterOptions.map(
-						(option) =>
-							html`<uui-checkbox
-								label=${this.localize.term('user_state' + option)}
-								@change=${this.#onStateFilterChange}
-								name="state"
-								value=${option}></uui-checkbox>`,
-					)}
-				</div>
-			</umb-dropdown>
+			<uui-button popovertarget="popover-user-status-filter" label="status">
+				<umb-localize key="general_status"></umb-localize>: <b>${this.#getStatusFilterLabel()}</b>
+			</uui-button>
+			<uui-popover-container id="popover-user-status-filter" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">
+						${this._stateFilterOptions.map(
+							(option) =>
+								html`<uui-checkbox
+									label=${this.localize.term('user_state' + option)}
+									@change=${this.#onStateFilterChange}
+									name="state"
+									value=${option}></uui-checkbox>`,
+						)}
+					</div>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
 	}
 
 	#renderUserGroupFilter() {
 		return html`
-			<umb-dropdown class="filter">
-				<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_groups')}>
-					<umb-localize key="general_groups"></umb-localize>: ${this.#getUserGroupFilterLabel()}
-				</uui-button>
-				<div slot="dropdown" class="filter-dropdown">
-					${repeat(
-						this._userGroups,
-						(group) => group.id,
-						(group) => html`
-							<uui-checkbox
-								label=${ifDefined(group.name)}
-								value=${ifDefined(group.id)}
-								@change=${this.#onUserGroupFilterChange}></uui-checkbox>
-						`,
-					)}
-				</div>
-			</umb-dropdown>
+			<uui-button popovertarget="popover-user-group-filter" label=${this.localize.term('general_groups')}>
+				<umb-localize key="general_groups"></umb-localize>: <b>${this.#getUserGroupFilterLabel()}</b>
+			</uui-button>
+			<uui-popover-container id="popover-user-group-filter" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">
+						${repeat(
+							this._userGroups,
+							(group) => group.id,
+							(group) => html`
+								<uui-checkbox
+									label=${ifDefined(group.name)}
+									value=${ifDefined(group.id)}
+									@change=${this.#onUserGroupFilterChange}></uui-checkbox>
+							`,
+						)}
+					</div>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
 	}
 
@@ -243,7 +255,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 				display: flex;
 				gap: var(--uui-size-space-3);
 				flex-direction: column;
-				width: fit-content;
 			}
 		`,
 	];