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 3177c7940b..3a7963868f 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
@@ -13,8 +13,8 @@ import '../shared/editor-entity/editor-entity.element';
 
 // Lazy load
 // TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.
-import './views/editor-view-node-edit.element';
-import './views/editor-view-node-info.element';
+import './views/edit/editor-view-node-edit.element';
+import './views/info/editor-view-node-info.element';
 
 @customElement('umb-editor-node')
 export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.stories.ts
new file mode 100644
index 0000000000..1bd1762a4e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.stories.ts
@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbEditorNodeElement } from './editor-node.element';
+import './editor-node.element';
+
+import { data } from '../../../mocks/data/content.data';
+
+export default {
+	title: 'Editors/Node',
+	component: 'umb-editor-node',
+	id: 'umb-editor-node',
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorNodeElement> = () =>
+	html` <umb-editor-node id="${data[0].id}"></umb-editor-node>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.element.ts
similarity index 74%
rename from src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-edit.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.element.ts
index 5c45369b44..474c08a9ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.element.ts
@@ -1,13 +1,15 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
-import { NodeProperty, NodePropertyData } from '../../../../mocks/data/content.data';
-import { UmbContextConsumerMixin } from '../../../../core/context';
-import { UmbNodeContext } from '../node.context';
+import { NodeProperty, NodePropertyData } from '../../../../../mocks/data/content.data';
+import { UmbContextConsumerMixin } from '../../../../../core/context';
+import { UmbNodeContext } from '../../node.context';
 import { Subscription, distinctUntilChanged } from 'rxjs';
 
+import '../../../../components/node-property.element';
+
 @customElement('umb-editor-view-node-edit')
-export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
+export class UmbEditorViewNodeEditElement extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -32,6 +34,7 @@ export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
 
 		this.consumeContext('umbNodeContext', (nodeContext) => {
 			this._nodeContext = nodeContext;
+			console.log('GOT CONTEXT', nodeContext);
 			this._useNode();
 		});
 	}
@@ -66,10 +69,10 @@ export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
 	}
 }
 
-export default UmbEditorViewNodeEdit;
+export default UmbEditorViewNodeEditElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-editor-view-node-edit': UmbEditorViewNodeEdit;
+		'umb-editor-view-node-edit': UmbEditorViewNodeEditElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.stories.ts
new file mode 100644
index 0000000000..1e2268e014
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.stories.ts
@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbNodeContext } from '../../node.context';
+import { UmbEditorViewNodeEditElement } from './editor-view-node-edit.element';
+import './editor-view-node-edit.element';
+import { data } from '../../../../../mocks/data/content.data';
+
+export default {
+	title: 'Editors/Node/Views/Edit',
+	component: 'umb-editor-view-node-edit',
+	id: 'umb-editor-view-node-edit',
+	decorators: [
+		(story) =>
+			html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
+				${story()}
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorViewNodeEditElement> = () =>
+	html` <umb-editor-view-node-edit></umb-editor-view-node-edit>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-info.element.ts
deleted file mode 100644
index 98d1eb594f..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-info.element.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement('umb-editor-view-node-info')
-export class UmbEditorViewNodeInfo extends LitElement {
-	static styles = [UUITextStyles, css``];
-
-	@property()
-	node: any;
-
-	render() {
-		return html`<div>Info Editor View</div>`;
-	}
-}
-
-export default UmbEditorViewNodeInfo;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-editor-view-node-info': UmbEditorViewNodeInfo;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.element.ts
new file mode 100644
index 0000000000..90b358a939
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.element.ts
@@ -0,0 +1,46 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../../../core/context';
+import { UmbNodeContext } from '../../node.context';
+import { Subscription, distinctUntilChanged } from 'rxjs';
+
+@customElement('umb-editor-view-node-info')
+export class UmbEditorViewNodeInfoElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles, css``];
+
+	private _nodeContext?: UmbNodeContext;
+	private _nodeContextSubscription?: Subscription;
+
+	@state()
+	private _nodeName = '';
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbNodeContext', (nodeContext) => {
+			this._nodeContext = nodeContext;
+			this._useNode();
+		});
+	}
+
+	private _useNode() {
+		this._nodeContextSubscription?.unsubscribe();
+
+		this._nodeContextSubscription = this._nodeContext?.data.pipe(distinctUntilChanged()).subscribe((node) => {
+			this._nodeName = node.name;
+		});
+	}
+
+	render() {
+		return html`<div>Info Editor View for ${this._nodeName}</div>`;
+	}
+}
+
+export default UmbEditorViewNodeInfoElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-editor-view-node-info': UmbEditorViewNodeInfoElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.stories.ts
new file mode 100644
index 0000000000..02f21b41a8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.stories.ts
@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbNodeContext } from '../../node.context';
+import { UmbEditorViewNodeInfoElement } from './editor-view-node-info.element';
+import './editor-view-node-info.element';
+import { data } from '../../../../../mocks/data/content.data';
+
+export default {
+	title: 'Editors/Node/Views/Info',
+	component: 'umb-editor-view-node-info',
+	id: 'umb-editor-view-node-info',
+	decorators: [
+		(story) =>
+			html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
+				${story()}
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorViewNodeInfoElement> = () =>
+	html` <umb-editor-view-node-info></umb-editor-view-node-info>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index c2457a429d..d3e424e999 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -95,7 +95,7 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
 		alias: 'Umb.EditorView.ContentEdit',
 		name: 'Content',
 		elementName: 'umb-editor-view-node-edit',
-		js: () => import('./backoffice/editors/node/views/editor-view-node-edit.element'),
+		js: () => import('./backoffice/editors/node/views/edit/editor-view-node-edit.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -110,7 +110,7 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
 		alias: 'Umb.EditorView.ContentInfo',
 		name: 'Info',
 		elementName: 'umb-editor-view-node-info',
-		js: () => import('./backoffice/editors/node/views/editor-view-node-info.element'),
+		js: () => import('./backoffice/editors/node/views/info/editor-view-node-info.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution