diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index 89afd485e2..6e9d6a3ffe 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -7,7 +7,7 @@ import '../../src/backoffice/users/current-user/modals/current-user/current-user
 import '../../src/backoffice/shared/modals/icon-picker/icon-picker-modal.element';
 import '../../src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element';
 import '../../src/backoffice/shared/modals/link-picker/link-picker-modal.element';
-import '../../src/backoffice/shared/modals/basic/modal-layout-basic.element';
+import '../../src/backoffice/shared/modals/basic/basic-modal.element';
 import './layouts/search/modal-layout-search.element.ts';
 
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
@@ -21,7 +21,7 @@ import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-edit
 import { UmbMediaPickerModalData } from '../../src/backoffice/media/media/modals/media-picker';
 import type { UmbLinkPickerModalData } from '../../src/backoffice/shared/modals/link-picker/link-picker-modal.element';
 import { UmbModalHandler } from './modal-handler';
-import type { UmbBasicModalData } from '../../src/backoffice/shared/modals/basic/modal-layout-basic.element';
+import type { UmbBasicModalData } from '../../src/backoffice/shared/modals/basic/basic-modal.element';
 import { UmbPickerModalData } from './layouts/modal-layout-picker-base';
 import { UmbModalToken } from './token/modal-token';
 import { UmbContextToken } from '@umbraco-cms/context-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/modal-layout-basic.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/modal-layout-basic.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.stories.ts
new file mode 100644
index 0000000000..81dc5af7bf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.stories.ts
@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import { UmbModalLayoutBasicElement, UmbBasicModalData } from './basic-modal.element';
+
+export default {
+	title: 'API/Modals/Layouts/Basic',
+	component: 'umb-modal-layout-basic',
+	id: 'modal-layout-basic',
+} as Meta;
+
+const htmlContent = html` <uui-table aria-label="Example table" aria-describedby="#some-element-id">
+	<!-- Apply styles to the uui-table-column to style the columns. You must have the same number of this elements as you have columns -->
+	<uui-table-column style="width: 20%;"></uui-table-column>
+	<uui-table-column style="width: 80%;"></uui-table-column>
+
+	<uui-table-head>
+		<uui-table-head-cell>Title 1</uui-table-head-cell>
+		<uui-table-head-cell>Title 2</uui-table-head-cell>
+	</uui-table-head>
+
+	<uui-table-row>
+		<uui-table-cell>Cell 1</uui-table-cell>
+		<uui-table-cell>Cell 2</uui-table-cell>
+	</uui-table-row>
+
+	<uui-table-row>
+		<uui-table-cell>Cell 3</uui-table-cell>
+		<uui-table-cell>Cell 4</uui-table-cell>
+	</uui-table-row>
+</uui-table>`;
+
+const data: UmbBasicModalData = {
+	header: html`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
+	content: htmlContent,
+	overlaySize: 'small',
+};
+
+export const Overview: Story<UmbModalLayoutBasicElement> = () => html`
+	<!-- TODO: figure out if generics are allowed for properties:
+	https://github.com/runem/lit-analyzer/issues/149
+	https://github.com/runem/lit-analyzer/issues/163 -->
+	<umb-modal-layout-basic .data=${data as any}></umb-modal-layout-basic>
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/modal-layout-basic.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/modal-layout-basic.stories.ts
deleted file mode 100644
index 7f04471515..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/modal-layout-basic.stories.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-import { UmbModalLayoutBasicElement, UmbBasicModalData } from './modal-layout-basic.element';
-
-export default {
-	title: 'API/Modals/Layouts/Basic',
-	component: 'umb-modal-layout-basic',
-	id: 'modal-layout-basic',
-} as Meta;
-
-
-const htmlContent = html`
-	<uui-table aria-label="Example table" aria-describedby="#some-element-id">
-		<!-- Apply styles to the uui-table-column to style the columns. You must have the same number of this elements as you have columns -->
-		<uui-table-column style="width: 20%;"></uui-table-column>
-		<uui-table-column style="width: 80%;"></uui-table-column>
-
-		<uui-table-head>
-			<uui-table-head-cell>Title 1</uui-table-head-cell>
-			<uui-table-head-cell>Title 2</uui-table-head-cell>
-		</uui-table-head>
-
-		<uui-table-row>
-			<uui-table-cell>Cell 1</uui-table-cell>
-			<uui-table-cell>Cell 2</uui-table-cell>
-		</uui-table-row>
-
-		<uui-table-row>
-			<uui-table-cell>Cell 3</uui-table-cell>
-			<uui-table-cell>Cell 4</uui-table-cell>
-		</uui-table-row>
-	</uui-table>`;
-
-
-const data: UmbBasicModalData = {
-	header: html`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
-	content: htmlContent,
-	overlaySize: 'small'
-};
-
-
-export const Overview: Story<UmbModalLayoutBasicElement> = () => html`
-	<!-- TODO: figure out if generics are allowed for properties:
-	https://github.com/runem/lit-analyzer/issues/149
-	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-modal-layout-basic .data=${data as any}></umb-modal-layout-basic>
-`;
\ No newline at end of file