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 4f862a1e30..a3f31c2c84 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,15 +2,11 @@ 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 { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import type { UserGroupDetails } from '@umbraco-cms/models';
 import { UmbUserGroupStore } from 'src/backoffice/users/user-groups/user-group.store';
 
 @customElement('umb-picker-layout-user-group')
-export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(
-	UmbObserverMixin(UmbModalLayoutPickerBase)
-) {
+export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
index 78782e1322..4d5d44551f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
@@ -1,14 +1,13 @@
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { groupBy } from 'lodash';
 import type { UUIInputEvent } from '@umbraco-ui/uui';
 import type { UmbModalHandler } from '../../modal-handler';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 export interface UmbModalPropertyEditorUIPickerData {
 	selection?: Array<string>;
@@ -21,7 +20,7 @@ interface GroupedPropertyEditorUIs {
 
 // TODO: make use of UmbPickerLayoutBase
 @customElement('umb-modal-layout-property-editor-ui-picker')
-export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
+export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.mdx b/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.mdx
index 9556c3e4bc..1809a23ce2 100644
--- a/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.mdx
@@ -20,10 +20,10 @@ The UmbNotification service can be used to open notifications.
 
 ```ts
 import { html, LitElement } from 'lit';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 import type { UmbNotificationService } from './core/services/notification';
 
-class MyElement extends UmbContextConsumerMixin(LitElement) {
+class MyElement extends UmbLitElement {
 	private _notificationService?: UmbNotificationService;
 
 	constructor() {
@@ -44,10 +44,10 @@ A notification is opened by calling one of the helper methods on the UmbNotifica
 ```ts
 import { html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 import type { UmbNotificationService, UmbNotificationDefaultData } from './core/services/notification';
 
-class MyElement extends UmbContextConsumerMixin(LitElement) {
+class MyElement extends UmbLitElement {
 	private _notificationService?: UmbNotificationService;
 
 	constructor() {
diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.ts
index 2c4053718a..1af20d86bc 100644
--- a/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/notification.stories.ts
@@ -3,13 +3,13 @@ import '../context-api/provide/context-provider.element';
 import './layouts/default';
 
 import { Meta, Story } from '@storybook/web-components';
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { UmbContextConsumerMixin } from '../context-api';
-
+import { UmbLitElement } from '../element/lit-element.element';
 import type { UmbNotificationDefaultData } from './layouts/default';
 import { UmbNotificationColor, UmbNotificationOptions, UmbNotificationService } from '.';
+
 export default {
 	title: 'API/Notifications/Overview',
 	component: 'ucp-notification-layout-default',
@@ -22,7 +22,7 @@ export default {
 } as Meta;
 
 @customElement('story-notification-default-example')
-export class StoryNotificationDefaultExampleElement extends UmbContextConsumerMixin(LitElement) {
+export class StoryNotificationDefaultExampleElement extends UmbLitElement {
 	private _notificationService?: UmbNotificationService;
 
 	connectedCallback(): void {