diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
index b1c04f18a8..3039e75b33 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
@@ -9,7 +9,7 @@ import { UmbDataTypeStore } from '../../../core/stores/data-type.store';
 import { DataTypeEntity } from '../../../mocks/data/data-type.data';
 import { UmbDataTypeContext } from './data-type.context';
 
-import '../shared/editor-entity.element';
+import '../shared/editor-entity/editor-entity.element';
 
 // Lazy load
 // TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
index 3e94638647..0c1bcc91d2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
@@ -9,7 +9,7 @@ import { UmbDocumentTypeStore } from '../../../core/stores/document-type.store';
 import { DocumentTypeEntity } from '../../../mocks/data/document-type.data';
 import { UmbDocumentTypeContext } from './document-type.context';
 
-import '../shared/editor-entity.element';
+import '../shared/editor-entity/editor-entity.element';
 
 // Lazy load
 // TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
index 69079eafb7..0be6a3b5b1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 import { UmbContextConsumerMixin } from '../../../core/context';
 import { UmbExtensionManifest, UmbExtensionRegistry } from '../../../core/extension';
 
-import '../shared/editor-entity.element';
+import '../shared/editor-entity/editor-entity.element';
 
 @customElement('umb-editor-extensions')
 export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(LitElement) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts
index ac803f9eec..3177c7940b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts
@@ -9,7 +9,7 @@ import { NodeEntity } from '../../../mocks/data/content.data';
 import { UmbNotificationService } from '../../../core/services/notification.service';
 import { UmbNodeContext } from './node.context';
 
-import '../shared/editor-entity.element';
+import '../shared/editor-entity/editor-entity.element';
 
 // Lazy load
 // TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
index 3adfa17c3f..364b9011ef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
@@ -1,14 +1,14 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UmbContextConsumerMixin } from '../../../core/context';
-import { UmbExtensionManifestEditorView, UmbExtensionRegistry } from '../../../core/extension';
+import { UmbContextConsumerMixin } from '../../../../core/context';
+import { UmbExtensionManifestEditorView, UmbExtensionRegistry } from '../../../../core/extension';
 import { map, Subscription } from 'rxjs';
 import { IRoute, IRoutingInfo, RouterSlot } from 'router-slot';
 
-import './editor-layout.element';
+import '../editor-layout/editor-layout.element';
 @customElement('umb-editor-entity')
-class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
+export class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.stories.ts
new file mode 100644
index 0000000000..c66266d79d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.stories.ts
@@ -0,0 +1,20 @@
+import { UmbEditorEntity } from './editor-entity.element';
+import './editor-entity.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+export default {
+	title: 'Editors/Shared/Editor Entity',
+	component: 'umb-editor-entity',
+	id: 'umb-editor-entity',
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorEntity> = () => html` <umb-editor-entity>
+	<div slot="icon"><uui-button color="" look="placeholder">Icon slot</uui-button></div>
+	<div slot="name"><uui-button color="" look="placeholder">Name slot</uui-button></div>
+	<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
+	<div slot="actions"><uui-button color="" look="placeholder">Actions slot</uui-button></div>
+	<uui-button color="" look="placeholder">Main slot</uui-button>
+</umb-editor-entity>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.element.ts
similarity index 96%
rename from src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.element.ts
index 00f8add784..32ac7d23f2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.element.ts
@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-editor-layout')
-class UmbEditorLayout extends LitElement {
+export class UmbEditorLayout extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.stories.ts
new file mode 100644
index 0000000000..86cb91589b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.stories.ts
@@ -0,0 +1,18 @@
+import { UmbEditorLayout } from './editor-layout.element';
+import './editor-layout.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+export default {
+	title: 'Editors/Shared/Editor Layout',
+	component: 'umb-editor-layout',
+	id: 'umb-editor-layout',
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorLayout> = () => html` <umb-editor-layout>
+	<div slot="header"><uui-button color="" look="placeholder">Header slot</uui-button></div>
+	<uui-button color="" look="placeholder">Main slot</uui-button>
+	<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
+</umb-editor-layout>`;
+AAAOverview.storyName = 'Overview';