diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 8f05c5ff07..943845e252 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -25,8 +25,9 @@ import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '../src/core/modal';
 
 import { umbExtensionsRegistry } from '../libs/extensions-api';
 
+import '../src/core/context-provider/context-provider.element';
+import '../src/core/controller-host/controller-host-test.element';
 import '../src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element';
-import '../libs/element/context-provider.element';
 import '../src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element';
 import '../src/backoffice/shared/components/code-block/code-block.element';
 import '../src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element';
@@ -68,7 +69,7 @@ const documentTypeStoreProvider = (story) => html`
 const modalContextProvider = (story) => html`
 	<umb-context-provider
 		style="display: block; padding: 32px;"
-		key="${UMB_MODAL_CONTEXT_TOKEN}"
+		.key="${UMB_MODAL_CONTEXT_TOKEN}"
 		.value=${new UmbModalContext()}>
 		${story()}
 		<umb-backoffice-modal-container></umb-backoffice-modal-container>
@@ -118,9 +119,9 @@ export const parameters = {
 			{
 				name: 'White',
 				value: '#ffffff',
-			},		  
+			},
 		],
-	  },
+	},
 };
 
 setCustomElements(customElementManifests);
diff --git a/src/Umbraco.Web.UI.Client/libs/element/index.out.ts b/src/Umbraco.Web.UI.Client/libs/element/index.out.ts
deleted file mode 100644
index 18d6126ccc..0000000000
--- a/src/Umbraco.Web.UI.Client/libs/element/index.out.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './element.mixin';
diff --git a/src/Umbraco.Web.UI.Client/libs/element/index.ts b/src/Umbraco.Web.UI.Client/libs/element/index.ts
index 411fa84341..4048b79c02 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/element/index.ts
@@ -1,4 +1,2 @@
 export * from './element.mixin';
 export * from './lit-element.element';
-export * from './context-provider.element';
-export * from './controller-host.element';
diff --git a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.test.ts b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.test.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/libs/element/context-provider.element.test.ts
rename to src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.test.ts
index b9f622014a..b2f6c44311 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.test.ts
@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
 import { UmbContextProviderElement } from './context-provider.element';
-import { UmbLitElement } from './lit-element.element';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-context-test')
 export class ContextTestElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
similarity index 81%
rename from src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
index 9d04a92ab2..5ffda8935e 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
@@ -1,17 +1,16 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbLitElement } from './lit-element.element';
+import { UmbLitElement } from '@umbraco-cms/element';
 import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 @customElement('umb-context-provider')
 export class UmbContextProviderElement extends UmbLitElement {
-
 	/**
 	 * The value to provide to the context.
 	 * @required
 	 */
 	@property({ type: Object, attribute: false })
-	create?: (host:UmbControllerHostInterface) => unknown;
+	create?: (host: UmbControllerHostInterface) => unknown;
 
 	/**
 	 * The value to provide to the context.
@@ -44,3 +43,9 @@ export class UmbContextProviderElement extends UmbLitElement {
 		return html`<slot></slot>`;
 	}
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-context-provider': UmbContextProviderElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
similarity index 79%
rename from src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
index 85dbc727fa..2b628489ce 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
@@ -1,7 +1,7 @@
-import { html } from 'lit';
+import { html } from 'lit-html';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbLitElement } from './lit-element.element';
-import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-controller-host-test')
 export class UmbControllerHostTestElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
similarity index 86%
rename from src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts
rename to src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
index 8cc3e58aaf..5409840806 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/controller-host.element.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
@@ -1,9 +1,9 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
-import { UmbControllerHostTestElement } from './controller-host.element';
-import { UmbLitElement } from './lit-element.element';
+import { UmbControllerHostTestElement } from './controller-host-test.element';
+import { UmbLitElement } from '@umbraco-cms/element';
 import { UmbContextProviderController } from '@umbraco-cms/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 @customElement('umb-controller-host-test-consumer')
 export class ControllerHostTestConsumerElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
index bc0852f15f..7b03df75c4 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import { UmbInstallerContext } from '../installer.context';
-import '../../../libs/element/context-provider.element';
+import '../../core/context-provider/context-provider.element';
 
 export const installerContextProvider = (story: any, installerContext = new UmbInstallerContext()) => html`
 	<umb-context-provider