diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
index 1295413273bf..3797ff3684e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
@@ -4,6 +4,7 @@ import { css, html, repeat, customElement, state, nothing, property } from '@umb
 import type { UmbModalManagerContext, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalElement } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUIModalSidebarElement } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-backoffice-modal-container')
 export class UmbBackofficeModalContainerElement extends UmbLitElement {
@@ -85,6 +86,22 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 	}
 
 	#onCloseEnd(key: string) {
+		//move notification container out of modal container
+		const parentNode = this.parentNode;
+		const uuiModalContainer = this.renderRoot.querySelector('uui-modal-container');
+		const modalSidebar = uuiModalContainer?.querySelector('uui-modal-sidebar') as UUIModalSidebarElement | null;
+
+		if (!modalSidebar) return;
+
+		const dialog = modalSidebar.shadowRoot?.querySelector('dialog');
+		if (!dialog) return;
+
+		const notificationContainer = dialog.querySelector('umb-backoffice-notification-container') as HTMLElement;
+
+		if (parentNode) {
+			parentNode.insertBefore(notificationContainer, this);
+		}
+
 		this._modalManager?.remove(key);
 	}
 
@@ -109,6 +126,30 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 		`;
 	}
 
+	async addNotificationContainer() {
+		const modalContainer = this.renderRoot.querySelector('uui-modal-container');
+		if (!modalContainer) return;
+
+		await modalContainer.updateComplete;
+
+		const modalSidebar = modalContainer.querySelector('uui-modal-sidebar') as UUIModalSidebarElement;
+		if (!modalSidebar) return;
+
+		const parentNode = this.parentNode as HTMLElement;
+		if (!parentNode) return;
+
+		const notificationContainer = parentNode.querySelector('umb-backoffice-notification-container') as HTMLElement;
+
+		const dialog = modalSidebar.shadowRoot?.querySelector('dialog');
+		if (!dialog) return;
+		//move notification container into modal container
+		dialog.insertBefore(notificationContainer, dialog.firstChild);
+	}
+
+	override async updated(){
+		await Promise.all([this.updateComplete, this.addNotificationContainer()]);
+	}
+
 	static override styles: CSSResultGroup = [
 		UmbTextStyles,
 		css`