diff --git a/src/Umbraco.Web.UI.Client/src/core/context-api/provide/context-provider.element.test.ts b/src/Umbraco.Web.UI.Client/src/core/context-api/provide/context-provider.element.test.ts
index 2eb5aabcc4..a200c4ebf5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/context-api/provide/context-provider.element.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/context-api/provide/context-provider.element.test.ts
@@ -1,12 +1,10 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-
-import { UmbContextConsumerMixin } from '../consume/context-consumer.mixin';
 import { UmbContextProviderElement } from './context-provider.element';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-context-test')
-export class ContextTestElement extends UmbContextConsumerMixin(LitElement) {
+export class ContextTestElement extends UmbLitElement {
 	public value: string | null = null;
 	constructor() {
 		super();
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts
index 1d64f950d5..927af7e900 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-change-password.element.ts
@@ -1,16 +1,15 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbModalHandler } from '..';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 export interface UmbModalChangePasswordData {
 	requireOldPassword: boolean;
 }
 
 @customElement('umb-modal-layout-change-password')
-export class UmbModalLayoutChangePasswordElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
+export class UmbModalLayoutChangePasswordElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.mdx
index 91b54b1883..f150e2be2a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.mdx
@@ -24,9 +24,9 @@ The UmbModal service can be used to open modals.
 
 ```ts
 import { html, LitElement } from 'lit';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 import type { UmbModalService } from './core/services/modal';
-class MyElement extends UmbContextConsumerMixin(LitElement) {
+class MyElement extends UmbLitElement {
 	private _modalService_?: UmbModalService;
 	constructor() {
 		super();
@@ -44,9 +44,9 @@ A modal is opened by calling one of the helper methods on the UmbModalService. T
 
 ```ts
 import { html, LitElement } from 'lit';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 import type { UmbModalService } from './core/services/modal';
-class MyElement extends UmbContextConsumerMixin(LitElement) {
+class MyElement extends UmbLitElement {
 	private _modalService?: UmbModalService;
 	constructor() {
 		super();