diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-header.element.ts
index acafe9148e..33e1639deb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-header.element.ts
@@ -1,6 +1,6 @@
 import { UmbUserGroupCollectionContext } from './user-group-collection.context.js';
-import { UUITextStyles , UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html , customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UUITextStyles, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/collection';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -26,31 +26,17 @@ export class UmbUserGroupCollectionHeaderElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<div id="sticky-top">
-				<div id="collection-top-bar">
-					<uui-button @click=${this.#onCreate} label="Create group" look="outline"></uui-button>
-					<uui-input @input=${this.#onSearch} label="search" id="input-search"></uui-input>
-				</div>
-			</div>
+			<uui-button @click=${this.#onCreate} label="Create group" look="outline"></uui-button>
+			<uui-input @input=${this.#onSearch} label="search" id="input-search"></uui-input>
 		`;
 	}
 	static styles = [
 		UUITextStyles,
 		css`
-			#sticky-top {
-				position: sticky;
-				top: 0px;
-				z-index: 1;
-				box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
-				transition: 250ms box-shadow ease-in-out;
-			}
-
-			#sticky-top.header-shadow {
-				box-shadow: var(--uui-shadow-depth-2);
-			}
-
-			#collection-top-bar {
-				padding: var(--uui-size-space-4) var(--uui-size-layout-1);
+			:host {
+				height: 100%;
+				width: 100%;
+				padding: 0 var(--uui-size-layout-1);
 				background-color: var(--uui-color-background);
 				display: flex;
 				justify-content: space-between;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-view.element.ts
index 5ba97446ae..e4f89c6820 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection-view.element.ts
@@ -1,6 +1,6 @@
 import { UmbUserGroupCollectionContext } from './user-group-collection.context.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html , customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/collection';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -127,13 +127,6 @@ export class UmbUserGroupCollectionViewElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			:host {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				margin: var(--uui-size-layout-1);
-			}
-
 			umb-table {
 				padding: 0;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection.element.ts
index e71ae5d934..5ace942c1b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/collection/user-group-collection.element.ts
@@ -18,11 +18,11 @@ export class UmbUserCollectionElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-scroll-container>
-				<umb-user-group-collection-header></umb-user-group-collection-header>
+			<umb-body-layout header-clear header-shadow>
+				<umb-user-group-collection-header slot="header"></umb-user-group-collection-header>
 				<umb-user-group-collection-view></umb-user-group-collection-view>
-			</uui-scroll-container>
-			<umb-collection-selection-actions></umb-collection-selection-actions>
+				<umb-collection-selection-actions slot="footer"></umb-collection-selection-actions>
+			</umb-body-layout>
 		`;
 	}