diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
index 8893d33acb..6abe87e64f 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts
@@ -6,8 +6,10 @@ import './installer-user.element';
 
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { rest } from 'msw';
 
 import { UmbInstallerUser } from '.';
+import { UmbracoInstaller } from '../core/models';
 import { UmbInstallerContext } from './installer-context';
 
 export default {
@@ -49,5 +51,43 @@ Step3Database.parameters = {
 	},
 };
 
+export const Step3DatabasePreconfigured: Story = () => html`<umb-installer-database></umb-installer-database>`;
+Step3DatabasePreconfigured.storyName = 'Step 3: Database (preconfigured)';
+Step3DatabasePreconfigured.parameters = {
+	actions: {
+		handles: ['previous', 'next'],
+	},
+	msw: {
+		handlers: {
+			global: null,
+			others: [
+				rest.get('/umbraco/backoffice/install/settings', (_req, res, ctx) => {
+					return res(
+						ctx.status(200),
+						ctx.json<UmbracoInstaller>({
+							user: { consentLevels: [], minCharLength: 2, minNonAlphaNumericLength: 2 },
+							databases: [
+								{
+									id: '1',
+									sortOrder: -1,
+									displayName: 'SQLite',
+									defaultDatabaseName: 'Umbraco',
+									providerName: 'Microsoft.Data.SQLite',
+									isConfigured: true,
+									requiresServer: false,
+									serverPlaceholder: null,
+									requiresCredentials: false,
+									supportsIntegratedAuthentication: false,
+									requiresConnectionTest: false,
+								},
+							],
+						})
+					);
+				}),
+			],
+		},
+	},
+};
+
 export const Step4Installing: Story = () => html`<umb-installer-installing></umb-installer-installing>`;
 Step4Installing.storyName = 'Step 4: Installing';