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 a1e24664b9..95fb9fefbb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -1,21 +1,19 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { Subscription } from 'rxjs';
 
 import { UmbContextProviderMixin } from '../core/context';
 import { UmbNotificationService } from '../core/service/notifications.store';
 import { UmbDataTypeStore } from '../core/stores/data-type.store';
 import { UmbNodeStore } from '../core/stores/node.store';
 
+import './components/backoffice-header.element';
+import './components/backoffice-main.element';
+import './components/backoffice-notification-container.element';
 import './components/editor-layout.element';
 import './components/editor-property-layout.element';
 import './components/node-property.element';
 import './components/section-sidebar.element';
-import './components/backoffice-header.element';
-import './components/backoffice-main.element';
 
 @defineElement('umb-backoffice')
 export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
@@ -31,64 +29,22 @@ export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
         font-size: 14px;
         box-sizing: border-box;
       }
-
-      #notifications {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 70px;
-        height: auto;
-        padding: var(--uui-size-layout-1);
-      }
     `,
   ];
 
-  private _notificationService: UmbNotificationService = new UmbNotificationService();
-  private _notificationSubscribtion?: Subscription;
-
-  @state()
-  private _notifications: any[] = [];
-
   constructor() {
     super();
 
     this.provideContext('umbNodeStore', new UmbNodeStore());
     this.provideContext('umbDataTypeStore', new UmbDataTypeStore());
-
-    this._notificationService = new UmbNotificationService();
-    this.provideContext('umbNotificationService', this._notificationService);
-  }
-
-  protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
-    super.firstUpdated(_changedProperties);
-
-    this._notificationSubscribtion = this._notificationService.notifications.subscribe((notifications: Array<any>) => {
-      this._notifications = notifications;
-    });
-
-    // TODO: listen to close event and remove notification from store.
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this._notificationSubscribtion?.unsubscribe();
+    this.provideContext('umbNotificationService', new UmbNotificationService());
   }
 
   render() {
     return html`
       <umb-backoffice-header></umb-backoffice-header>
       <umb-backoffice-main></umb-backoffice-main>
-      <uui-toast-notification-container auto-close="7000" bottom-up id="notifications">
-        ${repeat(
-          this._notifications,
-          (notification) => notification.key,
-          (notification) => html`<uui-toast-notification color="positive">
-            <uui-toast-notification-layout .headline=${notification.headline}> </uui-toast-notification-layout>
-          </uui-toast-notification>`
-        )}
-      </uui-toast-notification-container>
+      <umb-backoffice-notification-container></umb-backoffice-notification-container>
     `;
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts
new file mode 100644
index 0000000000..d89381ea92
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts
@@ -0,0 +1,78 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { Subscription } from 'rxjs';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbNotificationService } from '../../core/service/notifications.store';
+
+@customElement('umb-backoffice-notification-container')
+export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(LitElement) {
+  static styles: CSSResultGroup = [
+    UUITextStyles,
+    css`
+      #notifications {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 70px;
+        height: auto;
+        padding: var(--uui-size-layout-1);
+      }
+    `
+  ];
+
+  @state()
+  private _notifications: any[] = [];
+
+  private _notificationService?: UmbNotificationService;
+  private _notificationSubscription?: Subscription;
+
+  constructor () {
+    super();
+
+    this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => {
+      this._notificationService = notificationService;
+      this._useNotifications();
+    });
+  }
+
+  private _useNotifications() {
+    this._notificationSubscription?.unsubscribe();
+
+    this._notificationService?.notifications
+      .subscribe((notifications: Array<any>) => {
+        this._notifications = notifications;
+      });
+
+    // TODO: listen to close event and remove notification from store.
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._notificationSubscription?.unsubscribe();
+  }
+
+  render() {
+    return html`
+      <uui-toast-notification-container auto-close="7000" bottom-up id="notifications">
+        ${repeat(
+          this._notifications,
+          (notification) => notification.key,
+          (notification) => html`
+          <uui-toast-notification 
+            color="positive">
+            <uui-toast-notification-layout .headline=${notification.headline}> </uui-toast-notification-layout>
+          </uui-toast-notification>`
+        )}
+      </uui-toast-notification-container>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-backoffice-notification-container': UmbBackofficeNotificationContainer;
+  }
+}