diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
index 61ef9cc5c8..3cc026603d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
@@ -1,13 +1,36 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import type { UmbCurrentUserMfaModalElement } from './current-user-mfa-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbServerExtensionRegistrator } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 import './current-user-mfa-modal.element.js';
 
+class UmbServerExtensionsHostElement extends UmbLitElement {
+	constructor() {
+		super();
+		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerAllExtensions();
+	}
+
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+if (window.customElements.get('umb-server-extensions-host') === undefined) {
+	customElements.define('umb-server-extensions-host', UmbServerExtensionsHostElement);
+}
+
 const meta: Meta<UmbCurrentUserMfaModalElement> = {
 	title: 'Current User/MFA/Configure MFA Providers',
 	component: 'umb-current-user-mfa-modal',
-	decorators: [(Story) => html`<div style="width: 500px; height: 500px;">${Story()}</div>`],
+	decorators: [
+		(Story) =>
+			html`<umb-server-extensions-host style="display: block; width: 500px; height: 500px;">
+				${Story()}
+			</umb-server-extensions-host>`,
+	],
 	parameters: {
 		layout: 'centered',
 		actions: {