diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-content.element.ts
similarity index 58%
rename from src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/backoffice-content.element.ts
index af915b7996..36f9e9b9ea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-content.element.ts
@@ -2,17 +2,13 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 
-@defineElement('umb-backoffice-main')
-export class UmbBackofficeMain extends LitElement {
+@defineElement('umb-backoffice-content')
+export class UmbBackofficeContent extends LitElement {
   static styles = [
     UUITextStyles,
     css`
       :host {
         flex: 1 1 auto;
-      }
-
-      // TODO: not call this editor, I would like to reserve that name for the view of editing data, like what goes in the router-outlet or in infinite editors (or inside Nested Content)
-      #editor {
         background-color: var(--uui-color-background);
         width: 100%;
         height: 100%;
@@ -20,7 +16,7 @@ export class UmbBackofficeMain extends LitElement {
         flex-direction: column;
       }
 
-      #editor-top {
+      #top-bar {
         background-color: var(--uui-color-surface);
         width: 100%;
         display: flex;
@@ -30,19 +26,19 @@ export class UmbBackofficeMain extends LitElement {
         border-bottom: 1px solid var(--uui-color-border);
       }
 
-      #editor-top uui-input {
+      #top-bar uui-input {
         width: 100%;
         margin-left: 16px;
       }
 
-      #editor-top uui-tab-group {
+      #top-bar uui-tab-group {
         --uui-tab-divider: var(--uui-color-border);
         border-left: 1px solid var(--uui-color-border);
         flex-wrap: nowrap;
         height: 60px;
       }
 
-      #editor-content {
+      #content-content {
         padding: var(--uui-size-6);
         display: flex;
         flex: 1;
@@ -54,7 +50,7 @@ export class UmbBackofficeMain extends LitElement {
         font-size: 0.8rem;
       }
 
-      #editor-bottom {
+      #bottom-bar {
         display: flex;
         flex: none;
         justify-content: end;
@@ -72,21 +68,19 @@ export class UmbBackofficeMain extends LitElement {
 
   render() {
     return html`
-      <div id="editor">
-        <div id="editor-top">
-          <uui-input value="Home"></uui-input>
-          <uui-tab-group>
-            <uui-tab active>Content</uui-tab>
-            <uui-tab>Info</uui-tab>
-            <uui-tab disabled>Actions</uui-tab>
-          </uui-tab-group>
-        </div>
-        <uui-scroll-container id="editor-content"></uui-scroll-container>
-        <div id="editor-bottom">
-          <uui-button>Save and preview</uui-button>
-          <uui-button look="secondary">Save</uui-button>
-          <uui-button look="primary" color="positive">Save and publish</uui-button>
-        </div>
+      <div id="top-bar">
+        <uui-input value="Home"></uui-input>
+        <uui-tab-group>
+          <uui-tab active>Content</uui-tab>
+          <uui-tab>Info</uui-tab>
+          <uui-tab disabled>Actions</uui-tab>
+        </uui-tab-group>
+      </div>
+      <uui-scroll-container id="content-content"></uui-scroll-container>
+      <div id="bottom-bar">
+        <uui-button>Save and preview</uui-button>
+        <uui-button look="secondary">Save</uui-button>
+        <uui-button look="primary" color="positive">Save and publish</uui-button>
       </div>
     `;
   }
@@ -94,6 +88,6 @@ export class UmbBackofficeMain extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'umb-backoffice-main': UmbBackofficeMain;
+    'umb-backoffice-content': UmbBackofficeContent;
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index 7cbf619ba2..e48230865b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -1,6 +1,6 @@
 import './backoffice-header.element';
 import './backoffice-sidebar.element';
-import './backoffice-main.element';
+import './backoffice-content.element';
 
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
@@ -29,7 +29,6 @@ export class UmbBackoffice extends LitElement {
     `,
   ];
 
-  // TODO: main div and then side and main again within? I propose the backoffice-main begin renamed to something less main-ish.
   // TODO: I would think umb-backoffice-header would be outside the router outlet? so its always present.
 
   render() {
@@ -37,7 +36,7 @@ export class UmbBackoffice extends LitElement {
       <umb-backoffice-header></umb-backoffice-header>
       <div id="main">
         <umb-backoffice-sidebar></umb-backoffice-sidebar>
-        <umb-backoffice-main></umb-backoffice-main>
+        <umb-backoffice-content></umb-backoffice-content>
       </div>
     `;
   }