diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.element.ts
index 7f6863c9f2..0a315d3c23 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.element.ts
@@ -1,5 +1,5 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../core/context';
@@ -175,23 +175,33 @@ export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextCons
 			<umb-editor-entity alias=${this.alias}>
 				<div slot="name">
 					<uui-input .value=${this._node?.name} @input="${this._handleInput}">
-						<div slot="append">
-							<uui-button id="trigger" @click=${this._toggleVariantSelector}>
-								English (United States)
-								<uui-caret></uui-caret>
-							</uui-button>
-						</div>
+						<!-- Implement Variant Selector -->
+						${this._node && this._node.variants.length > 0
+							? html`
+									<div slot="append">
+										<uui-button id="trigger" @click=${this._toggleVariantSelector}>
+											English (United States)
+											<uui-caret></uui-caret>
+										</uui-button>
+									</div>
+							  `
+							: nothing}
 					</uui-input>
+
 					<!-- Implement Variant Selector -->
-					<uui-popover id="popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
-						<div id="dropdown" slot="popover">
-							<uui-scroll-container id="scroll-container">
-								<ul>
-									<li>Implement variants</li>
-								</ul>
-							</uui-scroll-container>
-						</div>
-					</uui-popover>
+					${this._node && this._node.variants.length > 0
+						? html`
+								<uui-popover id="popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
+									<div id="dropdown" slot="popover">
+										<uui-scroll-container id="scroll-container">
+											<ul>
+												<li>Implement variants</li>
+											</ul>
+										</uui-scroll-container>
+									</div>
+								</uui-popover>
+						  `
+						: nothing}
 				</div>
 
 				<div slot="footer">Breadcrumbs</div>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/node.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/node.context.ts
index 4728f95661..ca831214da 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/node.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/node.context.ts
@@ -23,6 +23,11 @@ export class UmbNodeContext {
 				value: '',
 			},
 		],
+		variants: [
+			{
+				name: '',
+			},
+		],
 	});
 	public readonly data: Observable<NodeEntity> = this._data.asObservable();
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts
index 26441c77b2..171c1ec2a1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts
@@ -34,7 +34,6 @@ export class UmbEditorViewNodeEditElement extends UmbContextConsumerMixin(LitEle
 
 		this.consumeContext('umbNodeContext', (nodeContext) => {
 			this._nodeContext = nodeContext;
-			console.log('GOT CONTEXT', nodeContext);
 			this._useNode();
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
index e745e81340..a05542013f 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
@@ -8,6 +8,7 @@ export interface NodeEntity {
 	type: string;
 	properties: Array<NodeProperty>;
 	data: Array<NodePropertyData>;
+	variants: Array<any>; // TODO: define variant data
 	//layout?: any; // TODO: define layout type - make it non-optional
 }
 
@@ -61,6 +62,7 @@ export const data: Array<NodeEntity> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
+		variants: [{ name: 'fake data' }],
 		/*
     // Concept for node layout, separation of design from config and data.
     layout: [
@@ -131,6 +133,7 @@ export const data: Array<NodeEntity> = [
 				value: '',
 			},
 		],
+		variants: [{ name: 'Variant 1' }],
 	},
 	{
 		id: 3,
@@ -152,6 +155,7 @@ export const data: Array<NodeEntity> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
+		variants: [{ name: 'Variant 1' }],
 	},
 	{
 		id: 2001,
@@ -173,6 +177,7 @@ export const data: Array<NodeEntity> = [
 				value: 'The daily life at Umbraco HQ',
 			},
 		],
+		variants: [],
 	},
 	{
 		id: 2002,
@@ -194,6 +199,7 @@ export const data: Array<NodeEntity> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
+		variants: [],
 	},
 ];