diff --git a/src/login-web-app/src/haapi-stepper/ui/index.ts b/src/login-web-app/src/haapi-stepper/ui/index.ts
index f70355bb..893c0a38 100644
--- a/src/login-web-app/src/haapi-stepper/ui/index.ts
+++ b/src/login-web-app/src/haapi-stepper/ui/index.ts
@@ -15,5 +15,6 @@ export * from './links/HaapiStepperLinkUI';
 export * from './links/HaapiStepperLinksUI';
 export * from './links/defaultHaapiStepperLinkElementFactory';
 export * from './links/HaapiStepperQrCodeLinkDialog';
+export * from './messages/HaapiStepperMessageUI';
 export * from './messages/HaapiStepperMessagesUI';
 export * from './messages/defaultHaapiStepperMessageElementFactory';
diff --git a/src/login-web-app/src/haapi-stepper/ui/messages/HaapiStepperMessageUI.tsx b/src/login-web-app/src/haapi-stepper/ui/messages/HaapiStepperMessageUI.tsx
new file mode 100644
index 00000000..684efe43
--- /dev/null
+++ b/src/login-web-app/src/haapi-stepper/ui/messages/HaapiStepperMessageUI.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2025 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ */
+
+import { HaapiStepperUserMessage } from '../../feature/stepper/haapi-stepper.types';
+
+export const HaapiStepperMessageUI = ({ message }: { message: HaapiStepperUserMessage }) => {
+  const className = message.classList?.join(' ');
+  const isHeading = message.classList?.includes('heading');
+  const isUserCode = message.classList?.includes('userCode');
+  const isUserName = message.classList?.includes('userName');
+
+  if (isHeading) {
+    return (
+      <h1 className={[className, 'haapi-stepper-heading'].filter(Boolean).join(' ')} data-testid="message">
+        {message.text}
+      </h1>
+    );
+  }
+
+  if (isUserCode) {
+    return (
+      <div className={[className, 'haapi-stepper-userCode'].filter(Boolean).join(' ')} data-testid="message">
+        <code>{message.text}</code>
+      </div>
+    );
+  }
+
+  if (isUserName) {
+    return (
+      <p className={[className, 'haapi-stepper-userName'].filter(Boolean).join(' ')} data-testid="message">
+        <strong>{message.text}</strong>
+      </p>
+    );
+  }
+
+  return (
+    <p className={[className].filter(Boolean).join(' ')} data-testid="message">
+      {message.text}
+    </p>
+  );
+};
diff --git a/src/login-web-app/src/haapi-stepper/ui/messages/defaultHaapiStepperMessageElementFactory.tsx b/src/login-web-app/src/haapi-stepper/ui/messages/defaultHaapiStepperMessageElementFactory.tsx
index 22d8dae8..31799103 100644
--- a/src/login-web-app/src/haapi-stepper/ui/messages/defaultHaapiStepperMessageElementFactory.tsx
+++ b/src/login-web-app/src/haapi-stepper/ui/messages/defaultHaapiStepperMessageElementFactory.tsx
@@ -1,38 +1,6 @@
 import { HaapiStepperUserMessage } from '../../feature/stepper/haapi-stepper.types';
+import { HaapiStepperMessageUI } from './HaapiStepperMessageUI';
 
-export const defaultHaapiStepperMessageElementFactory = (message: HaapiStepperUserMessage) => {
-  const className = message.classList?.join(' ');
-  const isHeading = message.classList?.includes('heading');
-  const isUserCode = message.classList?.includes('userCode');
-  const isUserName = message.classList?.includes('userName');
-
-  if (isHeading) {
-    return (
-      <h1 className={[className, 'haapi-stepper-heading'].filter(Boolean).join(' ')} data-testid="message">
-        {message.text}
-      </h1>
-    );
-  }
-
-  if (isUserCode) {
-    return (
-      <div className={[className, 'haapi-stepper-userCode'].filter(Boolean).join(' ')} data-testid="message">
-        <code>{message.text}</code>
-      </div>
-    );
-  }
-
-  if (isUserName) {
-    return (
-      <p className={[className, 'haapi-stepper-userName'].filter(Boolean).join(' ')} data-testid="message">
-        <strong>{message.text}</strong>
-      </p>
-    );
-  }
-
-  return (
-    <p className={[className].filter(Boolean).join(' ')} data-testid="message">
-      {message.text}
-    </p>
-  );
-};
+export const defaultHaapiStepperMessageElementFactory = (message: HaapiStepperUserMessage) => (
+  <HaapiStepperMessageUI message={message} />
+);