diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts
index 41f03d48d4..7280ad5d95 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts
@@ -1,98 +1,22 @@
 import { Meta, Story } from '@storybook/web-components';
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { UmbNotificationService, UmbNotificationOptions, UmbNotificationColor } from '../..';
-import type { UmbNotificationDefaultData } from './'
-import { UmbContextConsumerMixin } from '../../../../context';
-
-import '../../../../../core/context/context-provider.element';
-import '../../../../../backoffice/components/backoffice-notification-container.element';
-import '../default'
+import { html } from 'lit';
+import { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from '.';
 
 export default {
-  title: 'API/Notifications/Default',
-  component: 'ucp-notification-layout-default',
-  decorators: [
-		(story) =>
-			html`<umb-context-provider
-				key="umbNotificationService"
-				.value=${new UmbNotificationService()}>
-				${story()}
-			</umb-context-provider>`,
-	],
+  title: 'API/Notifications/Layouts/Default',
+  component: 'umb-notification-layout-default',
+  id: 'notification-layout-default',
 } as Meta;
 
-@customElement('story-notification-default-example')
-class StoryNotificationDefaultExampleElement extends UmbContextConsumerMixin(LitElement) {
-
-  private _notificationService?: UmbNotificationService;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    this.consumeContext('umbNotificationService', (notificationService) => {
-      this._notificationService = notificationService;
-      console.log('notification service ready');
-    });
-  }
-
-  private _handleNotification = (color: UmbNotificationColor) => {
-    const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
-      data: {
-        headline: 'Headline',
-        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
-      }
-    };
-    this._notificationService?.peek(color, options);
-  }
-
-  render () {
-    return html`
-      <uui-button
-        @click="${() => this._handleNotification('default')}"
-        label="Default"
-        ></uui-button>
-      <uui-button
-        @click="${() => this._handleNotification('positive')}"
-        label="Positive"
-        look="primary"
-        color="positive"
-        ></uui-button>
-      <uui-button
-        @click="${() => this._handleNotification('warning')}"
-        label="Warning"
-        look="primary"
-        color="warning"
-        ></uui-button>
-      <uui-button
-        @click="${() => this._handleNotification('danger')}"
-        label="Danger"
-        look="primary"
-        color="danger"
-        ></uui-button>
-
-      <umb-backoffice-notification-container></umb-backoffice-notification-container>
-    `;
-  }
-}
-
-const Template: Story = () => html`<story-notification-default-example></story-notification-default-example>`;
-
-export const Default = Template.bind({});
-Default.parameters = {
-  docs: {
-    source: {
-      language: 'js',
-      code: `
-const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
-  data: {
-    headline: 'Headline',
-    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
-  }
+const data: UmbNotificationDefaultData = {
+  headline: 'Headline',
+  message: 'This is a default notification',
 };
 
-this._notificationService?.peek('positive', options);
-`,
-    },
-  },
-};
\ No newline at end of file
+const Template: Story<UmbNotificationLayoutDefaultElement> = () => html`
+  <uui-toast-notification .open=${true}>
+    <umb-notification-layout-default .data=${data}></umb-notification-layout-default>
+  </uui-toast-notification>
+`;
+
+export const Default = Template.bind({});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts
new file mode 100644
index 0000000000..b28ee175d3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.ts
@@ -0,0 +1,98 @@
+import { Meta, Story } from '@storybook/web-components';
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbNotificationService, UmbNotificationOptions, UmbNotificationColor } from '.';
+import type { UmbNotificationDefaultData } from './layouts/default'
+import { UmbContextConsumerMixin } from '../../context';
+
+import '../../context/context-provider.element';
+import '../../../backoffice/components/backoffice-notification-container.element';
+import './layouts/default'
+
+export default {
+  title: 'API/Notifications/Overview',
+  component: 'ucp-notification-layout-default',
+  decorators: [
+		(story) =>
+			html`<umb-context-provider
+				key="umbNotificationService"
+				.value=${new UmbNotificationService()}>
+				${story()}
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+@customElement('story-notification-default-example')
+class StoryNotificationDefaultExampleElement extends UmbContextConsumerMixin(LitElement) {
+
+  private _notificationService?: UmbNotificationService;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.consumeContext('umbNotificationService', (notificationService) => {
+      this._notificationService = notificationService;
+      console.log('notification service ready');
+    });
+  }
+
+  private _handleNotification = (color: UmbNotificationColor) => {
+    const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
+      data: {
+        headline: 'Headline',
+        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+      }
+    };
+    this._notificationService?.peek(color, options);
+  }
+
+  render () {
+    return html`
+      <uui-button
+        @click="${() => this._handleNotification('default')}"
+        label="Default"
+        ></uui-button>
+      <uui-button
+        @click="${() => this._handleNotification('positive')}"
+        label="Positive"
+        look="primary"
+        color="positive"
+        ></uui-button>
+      <uui-button
+        @click="${() => this._handleNotification('warning')}"
+        label="Warning"
+        look="primary"
+        color="warning"
+        ></uui-button>
+      <uui-button
+        @click="${() => this._handleNotification('danger')}"
+        label="Danger"
+        look="primary"
+        color="danger"
+        ></uui-button>
+
+      <umb-backoffice-notification-container></umb-backoffice-notification-container>
+    `;
+  }
+}
+
+const Template: Story = () => html`<story-notification-default-example></story-notification-default-example>`;
+
+export const Default = Template.bind({});
+Default.parameters = {
+  docs: {
+    source: {
+      language: 'js',
+      code: `
+const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
+  data: {
+    headline: 'Headline',
+    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+  }
+};
+
+this._notificationService?.peek('positive', options);
+`,
+    },
+  },
+};
\ No newline at end of file