diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
index add1ec69de..a4b1cd73d1 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
@@ -1,35 +1,30 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import { UmbModalRouteRegistrationController, UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
-import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token';
+import type {
+	UmbModalRouteRegistrationController,
+	UmbRoute,
+	UmbRouterSlotChangeEvent,
+	UmbRouterSlotInitEvent,
+} from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-dashboard')
 export class UmbDashboardElement extends UmbElementMixin(LitElement) {
-
-	#workspaceModal?: UmbModalRouteRegistrationController;
-
-  @state()
-  private _routes: UmbRoute[] = [
-      {
-          path: `/tab1`,
-          component: () => import('./tabs/tab1.element.js'),
-          setup: (component, info) => {
-          },
-      },
-      {
-          path: `/tab2`,
-          component: () => import('./tabs/tab2.element.js'),
-          setup: (component, info) => {
-          },
-      },
-      {
-        path: '',
-        redirectTo: 'tab1',
-      },
-  ];
+	@state()
+	private _routes: UmbRoute[] = [
+		{
+			path: `/tab1`,
+			component: () => import('./tabs/tab1.element.js'),
+		},
+		{
+			path: `/tab2`,
+			component: () => import('./tabs/tab2.element.js'),
+		},
+		{
+			path: '',
+			redirectTo: 'tab1',
+		},
+	];
 
 	/**
 	 *
@@ -47,15 +42,15 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 					<li><a href="section/content/dashboard/example/tab1">Tab 1</a></li>
 					<li><a href="section/content/dashboard/example/tab2">Tab 2 (with modal)</a></li>
 				</ul>
-				<hr/>
+				<hr />
 				<umb-router-slot
-          .routes=${this._routes}
-          @init=${(event: UmbRouterSlotInitEvent) => {
-            console.log('tab routes init');
-          }}
-          @change=${(event: UmbRouterSlotChangeEvent) => {
-            console.log('modal routes change');
-          }}></umb-router-slot>
+					.routes=${this._routes}
+					@init=${(event: UmbRouterSlotInitEvent) => {
+						console.log('tab routes init', event);
+					}}
+					@change=${(event: UmbRouterSlotChangeEvent) => {
+						console.log('modal routes change', event);
+					}}></umb-router-slot>
 			</div>
 		`;
 	}
@@ -63,7 +58,7 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 	static override styles = [UmbTextStyles, css``];
 }
 
-export default UmbDashboardElement
+export default UmbDashboardElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
index cd08bae781..aedf64759c 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
@@ -1,33 +1,33 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token';
 
 @customElement('umb-dashboard2')
 export class UmbDashboard2Element extends UmbElementMixin(LitElement) {
-
-  constructor() {
-    super();
+	constructor() {
+		super();
 	}
 
-  override render() {
-    return html`
-      <div>
-        <h2>Link to modal route</h2>
-				<p>This page only shows how to link to the routed modal that is placed on a tab on the "Modal Dashboard". Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking on tab 2 and opening the modal from there will work.</p>
-				<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/overview">Open Modal Route</a>
-      </div>
-    `
-
-  }
+	override render() {
+		return html`
+			<div>
+				<h2>Link to modal route</h2>
+				<p>
+					This page only shows how to link to the routed modal that is placed on a tab on the "Modal Dashboard".
+					Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking
+					on tab 2 and opening the modal from there will work.
+				</p>
+				<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/overview"
+					>Open Modal Route</a
+				>
+			</div>
+		`;
+	}
 
 	static override styles = [UmbTextStyles, css``];
 }
 
-export default UmbDashboard2Element
+export default UmbDashboard2Element;
 
 declare global {
 	interface HTMLElementTagNameMap {
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
index a36ba43bc5..a0d71b8ff4 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
@@ -1,18 +1,12 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
+import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-example-modal')
 export class UmbExampleModal extends UmbModalBaseElement {
-
 	@state()
-  private _routes: UmbRoute[] = [
-
-  ];
+	private _routes: UmbRoute[] = [];
 
 	/**
 	 *
@@ -24,47 +18,43 @@ export class UmbExampleModal extends UmbModalBaseElement {
 
 	override connectedCallback(): void {
 		super.connectedCallback();
-		this._routes = [{
-			path: `/overview`,
-			component: () => import('./steps/example-modal-step1.element.js'),
-			setup: (component, info) => {
+		this._routes = [
+			{
+				path: `/overview`,
+				component: () => import('./steps/example-modal-step1.element.js'),
 			},
-	},
-	{
-			path: `/details`,
-			component: () => import('./steps/example-modal-step2.element.js'),
-			setup: (component, info) => {
+			{
+				path: `/details`,
+				component: () => import('./steps/example-modal-step2.element.js'),
 			},
-	},
-	{
-		path: '',
-		redirectTo: 'overview',
-	},
-	{
-		path: '',
-		redirectTo: 'test',
-	}
-];
-
-	setTimeout(()=>{
-		//this._routes = [this._routes[0],this._routes[1],this._routes[2]]
-	},20);
+			{
+				path: '',
+				redirectTo: 'overview',
+			},
+			{
+				path: '',
+				redirectTo: 'test',
+			},
+		];
 
+		setTimeout(() => {
+			//this._routes = [this._routes[0],this._routes[1],this._routes[2]]
+		}, 20);
 	}
 
 	override render() {
 		return html`
 			<div>
 				umb-example modal
-				<hr/>
+				<hr />
 				<umb-router-slot
-          .routes=${this._routes}
-          @init=${(event: UmbRouterSlotInitEvent) => {
-            console.log('modal route init fired');
-          }}
-          @change=${(event: UmbRouterSlotChangeEvent) => {
-            console.log('modal routes change');
-          }}></umb-router-slot>
+					.routes=${this._routes}
+					@init=${(event: UmbRouterSlotInitEvent) => {
+						console.log('modal route init fired', event);
+					}}
+					@change=${(event: UmbRouterSlotChangeEvent) => {
+						console.log('modal routes change', event);
+					}}></umb-router-slot>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts
index 35f39147fd..9098546e6a 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts
@@ -1,22 +1,11 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-example-modal-step1')
 export class UmbExampleModalStep1 extends UmbModalBaseElement {
-
 	override render() {
-		return html`
-			<div>
-				example modal step1
-
-
-			</div>
-		`;
+		return html` <div>example modal step1</div> `;
 	}
 
 	static override styles = [UmbTextStyles, css``];
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts
index 32dadca5b8..c6a9f6a5d5 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts
@@ -1,25 +1,14 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-example-modal-step2')
 export class UmbExampleModalStep2 extends UmbModalBaseElement {
-
 	override render() {
-		return html`
-			<div>
-				example modal step1
-
-
-			</div>
-		`;
+		return html` <div>example modal step1</div> `;
 	}
 
-	static override styles = [UmbTextStyles, css``];
+	static override styles = [UmbTextStyles];
 }
 
 export default UmbExampleModalStep2;