diff --git a/src/Umbraco.Web.UI.Client/libs/notification/notification.mdx b/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/notification/notification.mdx
rename to src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts b/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts
new file mode 100644
index 0000000000..ce0460727a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts
@@ -0,0 +1,38 @@
+import '../layouts/default';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { UmbNotificationService } from '..';
+
+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;
+
+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);
+`,
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/libs/notification/notification.stories.ts b/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts
similarity index 61%
rename from src/Umbraco.Web.UI.Client/libs/notification/notification.stories.ts
rename to src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts
index c890834387..b470aa71f7 100644
--- a/src/Umbraco.Web.UI.Client/libs/notification/notification.stories.ts
+++ b/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts
@@ -1,28 +1,14 @@
-import './layouts/default';
-
-import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-
-import type { UmbNotificationDefaultData } from './layouts/default';
+import { UmbNotificationDefaultData } from '../layouts/default';
 import {
 	UmbNotificationColor,
 	UmbNotificationOptions,
 	UmbNotificationService,
-	UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN,
-} from '.';
+	UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN
+} from '..';
 import { UmbLitElement } from '@umbraco-cms/element';
 
-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')
 export class StoryNotificationDefaultExampleElement extends UmbLitElement {
@@ -69,24 +55,3 @@ export class StoryNotificationDefaultExampleElement extends UmbLitElement {
 		`;
 	}
 }
-
-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);
-`,
-		},
-	},
-};
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/core/modal/modal.mdx
rename to src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts
new file mode 100644
index 0000000000..b0ab354948
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.stories.ts
@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+
+export default {
+	title: 'API/Modals',
+	id: 'umb-modal-service',
+	argTypes: {
+		modalLayout: {
+			control: 'select',
+			options: ['Confirm', 'Content Picker', 'Property Editor UI Picker', 'Icon Picker'],
+		},
+	},
+} as Meta;
+
+const Template: Story = (props) => {
+	return html` <story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example> `;
+};
+
+export const Overview = Template.bind({});
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
similarity index 71%
rename from src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.ts
rename to src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
index 0454bcf94e..c2f39bc7d6 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/story-modal-service-example.element.ts
@@ -1,20 +1,8 @@
-import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
-
-import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '.';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '..';
 import { UmbLitElement } from '@umbraco-cms/element';
 
-export default {
-	title: 'API/Modals',
-	id: 'umb-modal-service',
-	argTypes: {
-		modalLayout: {
-			control: 'select',
-			options: ['Confirm', 'Content Picker', 'Property Editor UI Picker', 'Icon Picker'],
-		},
-	},
-} as Meta;
 
 @customElement('story-modal-service-example')
 export class StoryModalServiceExampleElement extends UmbLitElement {
@@ -61,9 +49,3 @@ export class StoryModalServiceExampleElement extends UmbLitElement {
 		`;
 	}
 }
-
-const Template: Story = (props) => {
-	return html` <story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example> `;
-};
-
-export const Overview = Template.bind({});