diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index d188f7c1..44ff7444 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -15,12 +15,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         showAnotherWayIfPresent = true,
         headerNode,
         showUsernameNode = null,
-        formNode,
         infoNode = null,
         kcContext,
         i18n,
         doUseDefaultCss,
-        classes
+        classes,
+        children
     } = props;
 
     const { getClassName } = useGetClassName({
@@ -153,7 +153,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 />
                             </div>
                         )}
-                        {formNode}
+                        {children}
                         {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
                             <form
                                 id="kc-select-try-another-way-form"
diff --git a/src/login/TemplateProps.ts b/src/login/TemplateProps.ts
index c89c6f58..5782dc97 100644
--- a/src/login/TemplateProps.ts
+++ b/src/login/TemplateProps.ts
@@ -8,7 +8,6 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     doUseDefaultCss: boolean;
     classes?: Partial<Record<TemplateClassKey, string>>;
 
-    formNode: ReactNode;
     displayInfo?: boolean;
     displayMessage?: boolean;
     displayRequiredFields?: boolean;
@@ -17,6 +16,8 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     headerNode: ReactNode;
     showUsernameNode?: ReactNode;
     infoNode?: ReactNode;
+
+    children: ReactNode;
 };
 
 export type TemplateClassKey =
diff --git a/src/login/pages/Error.tsx b/src/login/pages/Error.tsx
index 38004b35..9e3e83ef 100644
--- a/src/login/pages/Error.tsx
+++ b/src/login/pages/Error.tsx
@@ -10,22 +10,17 @@ export default function Error(props: PageProps<Extract<KcContext, { pageId: "err
     const { msg } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("errorTitle")}
-            formNode={
-                <div id="kc-error-message">
-                    <p className="instruction">{message.summary}</p>
-                    {client !== undefined && client.baseUrl !== undefined && (
-                        <p>
-                            <a id="backToApplication" href={client.baseUrl}>
-                                {msg("backToApplication")}
-                            </a>
-                        </p>
-                    )}
-                </div>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("errorTitle")}>
+            <div id="kc-error-message">
+                <p className="instruction">{message.summary}</p>
+                {client !== undefined && client.baseUrl !== undefined && (
+                    <p>
+                        <a id="backToApplication" href={client.baseUrl}>
+                            {msg("backToApplication")}
+                        </a>
+                    </p>
+                )}
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
index ec7b9725..80c5f870 100644
--- a/src/login/pages/IdpReviewUserProfile.tsx
+++ b/src/login/pages/IdpReviewUserProfile.tsx
@@ -21,37 +21,33 @@ export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext,
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginIdpReviewProfileTitle")}
-            formNode={
-                <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    <UserProfileFormFields
-                        kcContext={kcContext}
-                        onIsFormSubmittableValueChange={setIsFomSubmittable}
-                        i18n={i18n}
-                        getClassName={getClassName}
-                    />
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")} />
-                        </div>
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                type="submit"
-                                value={msgStr("doSubmit")}
-                                disabled={!isFomSubmittable}
-                            />
-                        </div>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginIdpReviewProfileTitle")}>
+            <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    i18n={i18n}
+                    getClassName={getClassName}
+                />
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")} />
                     </div>
-                </form>
-            }
-        />
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                            disabled={!isFomSubmittable}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx
index 4e283bc8..84fb6c5b 100644
--- a/src/login/pages/Info.tsx
+++ b/src/login/pages/Info.tsx
@@ -17,32 +17,31 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={false}
             headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
-            formNode={
-                <div id="kc-info-message">
-                    <p className="instruction">
-                        {message.summary}
+        >
+            <div id="kc-info-message">
+                <p className="instruction">
+                    {message.summary}
 
-                        {requiredActions !== undefined && (
-                            <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
-                        )}
-                    </p>
-                    {!skipLink && pageRedirectUri !== undefined ? (
-                        <p>
-                            <a href={pageRedirectUri}>{msg("backToApplication")}</a>
-                        </p>
-                    ) : actionUri !== undefined ? (
-                        <p>
-                            <a href={actionUri}>{msg("proceedWithAction")}</a>
-                        </p>
-                    ) : (
-                        client.baseUrl !== undefined && (
-                            <p>
-                                <a href={client.baseUrl}>{msg("backToApplication")}</a>
-                            </p>
-                        )
+                    {requiredActions !== undefined && (
+                        <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
                     )}
-                </div>
-            }
-        />
+                </p>
+                {!skipLink && pageRedirectUri !== undefined ? (
+                    <p>
+                        <a href={pageRedirectUri}>{msg("backToApplication")}</a>
+                    </p>
+                ) : actionUri !== undefined ? (
+                    <p>
+                        <a href={actionUri}>{msg("proceedWithAction")}</a>
+                    </p>
+                ) : (
+                    client.baseUrl !== undefined && (
+                        <p>
+                            <a href={client.baseUrl}>{msg("backToApplication")}</a>
+                        </p>
+                    )
+                )}
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index 4f6497ce..f89c2597 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -40,149 +40,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
-            formNode={
-                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
-                    <div
-                        id="kc-form-wrapper"
-                        className={clsx(
-                            realm.password &&
-                                social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
-                        )}
-                    >
-                        {realm.password && (
-                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    {(() => {
-                                        const label = !realm.loginWithEmailAllowed
-                                            ? "username"
-                                            : realm.registrationEmailAsUsername
-                                            ? "email"
-                                            : "usernameOrEmail";
-
-                                        const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
-
-                                        return (
-                                            <>
-                                                <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
-                                                    {msg(label)}
-                                                </label>
-                                                <input
-                                                    tabIndex={1}
-                                                    id={autoCompleteHelper}
-                                                    className={getClassName("kcInputClass")}
-                                                    //NOTE: This is used by Google Chrome auto fill so we use it to tell
-                                                    //the browser how to pre fill the form but before submit we put it back
-                                                    //to username because it is what keycloak expects.
-                                                    name={autoCompleteHelper}
-                                                    defaultValue={login.username ?? ""}
-                                                    type="text"
-                                                    {...(usernameEditDisabled
-                                                        ? { "disabled": true }
-                                                        : {
-                                                              "autoFocus": true,
-                                                              "autoComplete": "off"
-                                                          })}
-                                                />
-                                            </>
-                                        );
-                                    })()}
-                                </div>
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                        {msg("password")}
-                                    </label>
-                                    <input
-                                        tabIndex={2}
-                                        id="password"
-                                        className={getClassName("kcInputClass")}
-                                        name="password"
-                                        type="password"
-                                        autoComplete="off"
-                                    />
-                                </div>
-                                <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                                    <div id="kc-form-options">
-                                        {realm.rememberMe && !usernameEditDisabled && (
-                                            <div className="checkbox">
-                                                <label>
-                                                    <input
-                                                        tabIndex={3}
-                                                        id="rememberMe"
-                                                        name="rememberMe"
-                                                        type="checkbox"
-                                                        {...(login.rememberMe
-                                                            ? {
-                                                                  "checked": true
-                                                              }
-                                                            : {})}
-                                                    />
-                                                    {msg("rememberMe")}
-                                                </label>
-                                            </div>
-                                        )}
-                                    </div>
-                                    <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                        {realm.resetPasswordAllowed && (
-                                            <span>
-                                                <a tabIndex={5} href={url.loginResetCredentialsUrl}>
-                                                    {msg("doForgotPassword")}
-                                                </a>
-                                            </span>
-                                        )}
-                                    </div>
-                                </div>
-                                <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
-                                    <input
-                                        type="hidden"
-                                        id="id-hidden-input"
-                                        name="credentialId"
-                                        {...(auth?.selectedCredential !== undefined
-                                            ? {
-                                                  "value": auth.selectedCredential
-                                              }
-                                            : {})}
-                                    />
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonBlockClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        name="login"
-                                        id="kc-login"
-                                        type="submit"
-                                        value={msgStr("doLogIn")}
-                                        disabled={isLoginButtonDisabled}
-                                    />
-                                </div>
-                            </form>
-                        )}
-                    </div>
-                    {realm.password && social.providers !== undefined && (
-                        <div
-                            id="kc-social-providers"
-                            className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
-                        >
-                            <ul
-                                className={clsx(
-                                    getClassName("kcFormSocialAccountListClass"),
-                                    social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
-                                )}
-                            >
-                                {social.providers.map(p => (
-                                    <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
-                                            <span>{p.displayName}</span>
-                                        </a>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    )}
-                </div>
-            }
             infoNode={
                 realm.password &&
                 realm.registrationAllowed &&
@@ -197,6 +54,148 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                     </div>
                 )
             }
-        />
+        >
+            <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
+                <div
+                    id="kc-form-wrapper"
+                    className={clsx(
+                        realm.password &&
+                            social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
+                    )}
+                >
+                    {realm.password && (
+                        <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                            <div className={getClassName("kcFormGroupClass")}>
+                                {(() => {
+                                    const label = !realm.loginWithEmailAllowed
+                                        ? "username"
+                                        : realm.registrationEmailAsUsername
+                                        ? "email"
+                                        : "usernameOrEmail";
+
+                                    const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+
+                                    return (
+                                        <>
+                                            <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
+                                                {msg(label)}
+                                            </label>
+                                            <input
+                                                tabIndex={1}
+                                                id={autoCompleteHelper}
+                                                className={getClassName("kcInputClass")}
+                                                //NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                //the browser how to pre fill the form but before submit we put it back
+                                                //to username because it is what keycloak expects.
+                                                name={autoCompleteHelper}
+                                                defaultValue={login.username ?? ""}
+                                                type="text"
+                                                {...(usernameEditDisabled
+                                                    ? { "disabled": true }
+                                                    : {
+                                                          "autoFocus": true,
+                                                          "autoComplete": "off"
+                                                      })}
+                                            />
+                                        </>
+                                    );
+                                })()}
+                            </div>
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                                    {msg("password")}
+                                </label>
+                                <input
+                                    tabIndex={2}
+                                    id="password"
+                                    className={getClassName("kcInputClass")}
+                                    name="password"
+                                    type="password"
+                                    autoComplete="off"
+                                />
+                            </div>
+                            <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                                <div id="kc-form-options">
+                                    {realm.rememberMe && !usernameEditDisabled && (
+                                        <div className="checkbox">
+                                            <label>
+                                                <input
+                                                    tabIndex={3}
+                                                    id="rememberMe"
+                                                    name="rememberMe"
+                                                    type="checkbox"
+                                                    {...(login.rememberMe
+                                                        ? {
+                                                              "checked": true
+                                                          }
+                                                        : {})}
+                                                />
+                                                {msg("rememberMe")}
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
+                                <div className={getClassName("kcFormOptionsWrapperClass")}>
+                                    {realm.resetPasswordAllowed && (
+                                        <span>
+                                            <a tabIndex={5} href={url.loginResetCredentialsUrl}>
+                                                {msg("doForgotPassword")}
+                                            </a>
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                            <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                                <input
+                                    type="hidden"
+                                    id="id-hidden-input"
+                                    name="credentialId"
+                                    {...(auth?.selectedCredential !== undefined
+                                        ? {
+                                              "value": auth.selectedCredential
+                                          }
+                                        : {})}
+                                />
+                                <input
+                                    tabIndex={4}
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonPrimaryClass"),
+                                        getClassName("kcButtonBlockClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    name="login"
+                                    id="kc-login"
+                                    type="submit"
+                                    value={msgStr("doLogIn")}
+                                    disabled={isLoginButtonDisabled}
+                                />
+                            </div>
+                        </form>
+                    )}
+                </div>
+                {realm.password && social.providers !== undefined && (
+                    <div
+                        id="kc-social-providers"
+                        className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
+                    >
+                        <ul
+                            className={clsx(
+                                getClassName("kcFormSocialAccountListClass"),
+                                social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
+                            )}
+                        >
+                            {social.providers.map(p => (
+                                <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
+                                    <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
+                                        <span>{p.displayName}</span>
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
index c51fc452..5f1a5f31 100644
--- a/src/login/pages/LoginConfigTotp.tsx
+++ b/src/login/pages/LoginConfigTotp.tsx
@@ -23,159 +23,130 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
     };
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginTotpTitle")}
-            formNode={
-                <>
-                    <ol id="kc-totp-settings">
-                        <li>
-                            <p>{msg("loginTotpStep1")}</p>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
+            <>
+                <ol id="kc-totp-settings">
+                    <li>
+                        <p>{msg("loginTotpStep1")}</p>
 
-                            <ul id="kc-totp-supported-apps">
-                                {totp.policy.supportedApplications.map(app => (
-                                    <li>{app}</li>
-                                ))}
-                            </ul>
-                        </li>
+                        <ul id="kc-totp-supported-apps">
+                            {totp.policy.supportedApplications.map(app => (
+                                <li>{app}</li>
+                            ))}
+                        </ul>
+                    </li>
 
-                        {mode && mode == "manual" ? (
-                            <>
-                                <li>
-                                    <p>{msg("loginTotpManualStep2")}</p>
-                                    <p>
-                                        <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
-                                    </p>
-                                    <p>
-                                        <a href={totp.qrUrl} id="mode-barcode">
-                                            {msg("loginTotpScanBarcode")}
-                                        </a>
-                                    </p>
-                                </li>
-                                <li>
-                                    <p>{msg("loginTotpManualStep3")}</p>
-                                    <p>
-                                        <ul>
-                                            <li id="kc-totp-type">
-                                                {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
-                                            </li>
-                                            <li id="kc-totp-algorithm">
-                                                {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
-                                            </li>
-                                            <li id="kc-totp-digits">
-                                                {msg("loginTotpDigits")}: {totp.policy.digits}
-                                            </li>
-                                            {totp.policy.type === "totp" ? (
-                                                <li id="kc-totp-period">
-                                                    {msg("loginTotpInterval")}: {totp.policy.period}
-                                                </li>
-                                            ) : (
-                                                <li id="kc-totp-counter">
-                                                    {msg("loginTotpCounter")}: {totp.policy.initialCounter}
-                                                </li>
-                                            )}
-                                        </ul>
-                                    </p>
-                                </li>
-                            </>
-                        ) : (
+                    {mode && mode == "manual" ? (
+                        <>
                             <li>
-                                <p>{msg("loginTotpStep2")}</p>
-                                <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
-                                <br />
+                                <p>{msg("loginTotpManualStep2")}</p>
                                 <p>
-                                    <a href={totp.manualUrl} id="mode-manual">
-                                        {msg("loginTotpUnableToScan")}
+                                    <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                </p>
+                                <p>
+                                    <a href={totp.qrUrl} id="mode-barcode">
+                                        {msg("loginTotpScanBarcode")}
                                     </a>
                                 </p>
                             </li>
-                        )}
+                            <li>
+                                <p>{msg("loginTotpManualStep3")}</p>
+                                <p>
+                                    <ul>
+                                        <li id="kc-totp-type">
+                                            {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
+                                        </li>
+                                        <li id="kc-totp-algorithm">
+                                            {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                        </li>
+                                        <li id="kc-totp-digits">
+                                            {msg("loginTotpDigits")}: {totp.policy.digits}
+                                        </li>
+                                        {totp.policy.type === "totp" ? (
+                                            <li id="kc-totp-period">
+                                                {msg("loginTotpInterval")}: {totp.policy.period}
+                                            </li>
+                                        ) : (
+                                            <li id="kc-totp-counter">
+                                                {msg("loginTotpCounter")}: {totp.policy.initialCounter}
+                                            </li>
+                                        )}
+                                    </ul>
+                                </p>
+                            </li>
+                        </>
+                    ) : (
                         <li>
-                            <p>{msg("loginTotpStep3")}</p>
-                            <p>{msg("loginTotpStep3DeviceName")}</p>
+                            <p>{msg("loginTotpStep2")}</p>
+                            <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
+                            <br />
+                            <p>
+                                <a href={totp.manualUrl} id="mode-manual">
+                                    {msg("loginTotpUnableToScan")}
+                                </a>
+                            </p>
                         </li>
-                    </ol>
+                    )}
+                    <li>
+                        <p>{msg("loginTotpStep3")}</p>
+                        <p>{msg("loginTotpStep3DeviceName")}</p>
+                    </li>
+                </ol>
 
-                    <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
-                        <div className={getClassName("kcFormGroupClass")}>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <label htmlFor="totp" className={getClassName("kcLabelClass")}>
-                                    {msg("authenticatorCode")}
-                                </label>{" "}
-                                <span className="required">*</span>
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <input
-                                    type="text"
-                                    id="totp"
-                                    name="totp"
-                                    autoComplete="off"
-                                    className={getClassName("kcInputClass")}
-                                    aria-invalid={messagesPerField.existsError("totp")}
-                                />
-
-                                {messagesPerField.existsError("totp") && (
-                                    <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                        {messagesPerField.get("totp")}
-                                    </span>
-                                )}
-                            </div>
-                            <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
-                            {mode && <input type="hidden" id="mode" value={mode} />}
+                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <label htmlFor="totp" className={getClassName("kcLabelClass")}>
+                                {msg("authenticatorCode")}
+                            </label>{" "}
+                            <span className="required">*</span>
                         </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="totp"
+                                name="totp"
+                                autoComplete="off"
+                                className={getClassName("kcInputClass")}
+                                aria-invalid={messagesPerField.existsError("totp")}
+                            />
 
-                        <div className={getClassName("kcFormGroupClass")}>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
-                                    {msg("loginTotpDeviceName")}
-                                </label>{" "}
-                                {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <input
-                                    type="text"
-                                    id="userLabel"
-                                    name="userLabel"
-                                    autoComplete="off"
-                                    className={getClassName("kcInputClass")}
-                                    aria-invalid={messagesPerField.existsError("userLabel")}
-                                />
-                                {messagesPerField.existsError("userLabel") && (
-                                    <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                        {messagesPerField.get("userLabel")}
-                                    </span>
-                                )}
-                            </div>
+                            {messagesPerField.existsError("totp") && (
+                                <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                    {messagesPerField.get("totp")}
+                                </span>
+                            )}
                         </div>
+                        <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                        {mode && <input type="hidden" id="mode" value={mode} />}
+                    </div>
 
-                        {isAppInitiatedAction ? (
-                            <>
-                                <input
-                                    type="submit"
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    id="saveTOTPBtn"
-                                    value={msgStr("doSubmit")}
-                                />
-                                <button
-                                    type="submit"
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonDefaultClass"),
-                                        getClassName("kcButtonLargeClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    id="cancelTOTPBtn"
-                                    name="cancel-aia"
-                                    value="true"
-                                >
-                                    ${msg("doCancel")}
-                                </button>
-                            </>
-                        ) : (
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                {msg("loginTotpDeviceName")}
+                            </label>{" "}
+                            {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="userLabel"
+                                name="userLabel"
+                                autoComplete="off"
+                                className={getClassName("kcInputClass")}
+                                aria-invalid={messagesPerField.existsError("userLabel")}
+                            />
+                            {messagesPerField.existsError("userLabel") && (
+                                <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                    {messagesPerField.get("userLabel")}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+
+                    {isAppInitiatedAction ? (
+                        <>
                             <input
                                 type="submit"
                                 className={clsx(
@@ -186,10 +157,31 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                                 id="saveTOTPBtn"
                                 value={msgStr("doSubmit")}
                             />
-                        )}
-                    </form>
-                </>
-            }
-        />
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonDefaultClass"),
+                                    getClassName("kcButtonLargeClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                id="cancelTOTPBtn"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                ${msg("doCancel")}
+                            </button>
+                        </>
+                    ) : (
+                        <input
+                            type="submit"
+                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                            id="saveTOTPBtn"
+                            value={msgStr("doSubmit")}
+                        />
+                    )}
+                </form>
+            </>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx
index a5f3af4a..1cd1de13 100644
--- a/src/login/pages/LoginIdpLinkConfirm.tsx
+++ b/src/login/pages/LoginIdpLinkConfirm.tsx
@@ -17,43 +17,39 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
     const { msg } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("confirmLinkIdpTitle")}
-            formNode={
-                <form id="kc-register-form" action={url.loginAction} method="post">
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <button
-                            type="submit"
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonDefaultClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="submitAction"
-                            id="updateProfile"
-                            value="updateProfile"
-                        >
-                            {msg("confirmLinkIdpReviewProfile")}
-                        </button>
-                        <button
-                            type="submit"
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonDefaultClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="submitAction"
-                            id="linkAccount"
-                            value="linkAccount"
-                        >
-                            {msg("confirmLinkIdpContinue", idpAlias)}
-                        </button>
-                    </div>
-                </form>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
+            <form id="kc-register-form" action={url.loginAction} method="post">
+                <div className={getClassName("kcFormGroupClass")}>
+                    <button
+                        type="submit"
+                        className={clsx(
+                            getClassName("kcButtonClass"),
+                            getClassName("kcButtonDefaultClass"),
+                            getClassName("kcButtonBlockClass"),
+                            getClassName("kcButtonLargeClass")
+                        )}
+                        name="submitAction"
+                        id="updateProfile"
+                        value="updateProfile"
+                    >
+                        {msg("confirmLinkIdpReviewProfile")}
+                    </button>
+                    <button
+                        type="submit"
+                        className={clsx(
+                            getClassName("kcButtonClass"),
+                            getClassName("kcButtonDefaultClass"),
+                            getClassName("kcButtonBlockClass"),
+                            getClassName("kcButtonLargeClass")
+                        )}
+                        name="submitAction"
+                        id="linkAccount"
+                        value="linkAccount"
+                    >
+                        {msg("confirmLinkIdpContinue", idpAlias)}
+                    </button>
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx
index ac60f5aa..b2b2b11a 100644
--- a/src/login/pages/LoginIdpLinkEmail.tsx
+++ b/src/login/pages/LoginIdpLinkEmail.tsx
@@ -10,22 +10,16 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
     const { msg } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("emailLinkIdpTitle", idpAlias)}
-            formNode={
-                <>
-                    <p id="instruction1" className="instruction">
-                        {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
-                    </p>
-                    <p id="instruction2" className="instruction">
-                        {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
-                    </p>
-                    <p id="instruction3" className="instruction">
-                        {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
-                    </p>
-                </>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
+            <p id="instruction1" className="instruction">
+                {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
+            </p>
+            <p id="instruction2" className="instruction">
+                {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
+            </p>
+            <p id="instruction3" className="instruction">
+                {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
+            </p>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index 315a3d30..0701bdfa 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/src/login/pages/LoginOtp.tsx
@@ -37,61 +37,57 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
     }, []);
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    {otpLogin.userOtpCredentials.length > 1 && (
-                        <div className={getClassName("kcFormGroupClass")}>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                {otpLogin.userOtpCredentials.map(otpCredential => (
-                                    <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
-                                        <input type="hidden" value="${otpCredential.id}" />
-                                        <div className={getClassName("kcSelectOTPListItemClass")}>
-                                            <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
-                                            <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
+            <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                {otpLogin.userOtpCredentials.length > 1 && (
                     <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="otp" className={getClassName("kcLabelClass")}>
-                                {msg("loginOtpOneTime")}
-                            </label>
-                        </div>
-
                         <div className={getClassName("kcInputWrapperClass")}>
-                            <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
+                            {otpLogin.userOtpCredentials.map(otpCredential => (
+                                <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
+                                    <input type="hidden" value="${otpCredential.id}" />
+                                    <div className={getClassName("kcSelectOTPListItemClass")}>
+                                        <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
+                                        <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+                                    </div>
+                                </div>
+                            ))}
                         </div>
                     </div>
-
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")} />
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                name="login"
-                                id="kc-login"
-                                type="submit"
-                                value={msgStr("doLogIn")}
-                            />
-                        </div>
+                )}
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="otp" className={getClassName("kcLabelClass")}>
+                            {msg("loginOtpOneTime")}
+                        </label>
                     </div>
-                </form>
-            }
-        />
+
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
+                    </div>
+                </div>
+
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            name="login"
+                            id="kc-login"
+                            type="submit"
+                            value={msgStr("doLogIn")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
     );
 }
 
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
index 2ba5492d..b8eadfd6 100644
--- a/src/login/pages/LoginPageExpired.tsx
+++ b/src/login/pages/LoginPageExpired.tsx
@@ -10,26 +10,19 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
     const { msg } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("pageExpiredTitle")}
-            formNode={
-                <>
-                    <p id="instruction1" className="instruction">
-                        {msg("pageExpiredMsg1")}
-                        <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .<br />
-                        {msg("pageExpiredMsg2")}{" "}
-                        <a id="loginContinueLink" href={url.loginAction}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .
-                    </p>
-                </>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("pageExpiredTitle")}>
+            <p id="instruction1" className="instruction">
+                {msg("pageExpiredMsg1")}
+                <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
+                    {msg("doClickHere")}
+                </a>{" "}
+                .<br />
+                {msg("pageExpiredMsg2")}{" "}
+                <a id="loginContinueLink" href={url.loginAction}>
+                    {msg("doClickHere")}
+                </a>{" "}
+                .
+            </p>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
index e6784946..186e24b4 100644
--- a/src/login/pages/LoginPassword.tsx
+++ b/src/login/pages/LoginPassword.tsx
@@ -32,61 +32,57 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
     });
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <div id="kc-form">
-                    <div id="kc-form-wrapper">
-                        <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                            <div className={getClassName("kcFormGroupClass")}>
-                                <hr />
-                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                    {msg("password")}
-                                </label>
-                                <input
-                                    tabIndex={2}
-                                    id="password"
-                                    className={getClassName("kcInputClass")}
-                                    name="password"
-                                    type="password"
-                                    autoFocus={true}
-                                    autoComplete="on"
-                                    defaultValue={login.password ?? ""}
-                                />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
+            <div id="kc-form">
+                <div id="kc-form-wrapper">
+                    <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                        <div className={getClassName("kcFormGroupClass")}>
+                            <hr />
+                            <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                                {msg("password")}
+                            </label>
+                            <input
+                                tabIndex={2}
+                                id="password"
+                                className={getClassName("kcInputClass")}
+                                name="password"
+                                type="password"
+                                autoFocus={true}
+                                autoComplete="on"
+                                defaultValue={login.password ?? ""}
+                            />
+                        </div>
+                        <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                            <div id="kc-form-options" />
+                            <div className={getClassName("kcFormOptionsWrapperClass")}>
+                                {realm.resetPasswordAllowed && (
+                                    <span>
+                                        <a tabIndex={5} href={url.loginResetCredentialsUrl}>
+                                            {msg("doForgotPassword")}
+                                        </a>
+                                    </span>
+                                )}
                             </div>
-                            <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                                <div id="kc-form-options" />
-                                <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                    {realm.resetPasswordAllowed && (
-                                        <span>
-                                            <a tabIndex={5} href={url.loginResetCredentialsUrl}>
-                                                {msg("doForgotPassword")}
-                                            </a>
-                                        </span>
-                                    )}
-                                </div>
-                            </div>
-                            <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
-                                <input
-                                    tabIndex={4}
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    name="login"
-                                    id="kc-login"
-                                    type="submit"
-                                    value={msgStr("doLogIn")}
-                                    disabled={isLoginButtonDisabled}
-                                />
-                            </div>
-                        </form>
-                    </div>
+                        </div>
+                        <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                                disabled={isLoginButtonDisabled}
+                            />
+                        </div>
+                    </form>
                 </div>
-            }
-        />
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginResetPassword.tsx b/src/login/pages/LoginResetPassword.tsx
index 15ab17d6..36ebc248 100644
--- a/src/login/pages/LoginResetPassword.tsx
+++ b/src/login/pages/LoginResetPassword.tsx
@@ -21,54 +21,53 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={false}
             headerNode={msg("emailForgotTitle")}
-            formNode={
-                <form id="kc-reset-password-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="username" className={getClassName("kcLabelClass")}>
-                                {!realm.loginWithEmailAllowed
-                                    ? msg("username")
-                                    : !realm.registrationEmailAsUsername
-                                    ? msg("usernameOrEmail")
-                                    : msg("email")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="username"
-                                name="username"
-                                className={getClassName("kcInputClass")}
-                                autoFocus
-                                defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
-                            />
-                        </div>
-                    </div>
-                    <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                type="submit"
-                                value={msgStr("doSubmit")}
-                            />
-                        </div>
-                    </div>
-                </form>
-            }
             infoNode={msg("emailInstruction")}
-        />
+        >
+            <form id="kc-reset-password-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                            {!realm.loginWithEmailAllowed
+                                ? msg("username")
+                                : !realm.registrationEmailAsUsername
+                                ? msg("usernameOrEmail")
+                                : msg("email")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            className={getClassName("kcInputClass")}
+                            autoFocus
+                            defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
+                        />
+                    </div>
+                </div>
+                <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <span>
+                                <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx
index fcd35f5e..52b091fa 100644
--- a/src/login/pages/LoginUpdatePassword.tsx
+++ b/src/login/pages/LoginUpdatePassword.tsx
@@ -17,122 +17,118 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
     const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("updatePasswordTitle")}
-            formNode={
-                <form id="kc-passwd-update-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    <input
-                        type="text"
-                        id="username"
-                        name="username"
-                        value={username}
-                        readOnly={true}
-                        autoComplete="username"
-                        style={{ display: "none" }}
-                    />
-                    <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("updatePasswordTitle")}>
+            <form id="kc-passwd-update-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={username}
+                    readOnly={true}
+                    autoComplete="username"
+                    style={{ display: "none" }}
+                />
+                <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
 
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="password-new" className={getClassName("kcLabelClass")}>
-                                {msg("passwordNew")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="password"
-                                id="password-new"
-                                name="password-new"
-                                autoFocus
-                                autoComplete="new-password"
-                                className={getClassName("kcInputClass")}
-                            />
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="password-new" className={getClassName("kcLabelClass")}>
+                            {msg("passwordNew")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="password"
+                            id="password-new"
+                            name="password-new"
+                            autoFocus
+                            autoComplete="new-password"
+                            className={getClassName("kcInputClass")}
+                        />
+                    </div>
+                </div>
+
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
+                            {msg("passwordConfirm")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="password"
+                            id="password-confirm"
+                            name="password-confirm"
+                            autoComplete="new-password"
+                            className={getClassName("kcInputClass")}
+                        />
+                    </div>
+                </div>
+
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            {isAppInitiatedAction && (
+                                <div className="checkbox">
+                                    <label>
+                                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
+                                        {msgStr("logoutOtherSessions")}
+                                    </label>
+                                </div>
+                            )}
                         </div>
                     </div>
 
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
-                                {msg("passwordConfirm")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="password"
-                                id="password-confirm"
-                                name="password-confirm"
-                                autoComplete="new-password"
-                                className={getClassName("kcInputClass")}
-                            />
-                        </div>
-                    </div>
-
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                {isAppInitiatedAction && (
-                                    <div className="checkbox">
-                                        <label>
-                                            <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
-                                            {msgStr("logoutOtherSessions")}
-                                        </label>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        defaultValue={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonDefaultClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        {isAppInitiatedAction ? (
+                            <>
                                 <input
                                     className={clsx(
                                         getClassName("kcButtonClass"),
                                         getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
                                         getClassName("kcButtonLargeClass")
                                     )}
                                     type="submit"
                                     defaultValue={msgStr("doSubmit")}
                                 />
-                            )}
-                        </div>
+                                <button
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonDefaultClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    name="cancel-aia"
+                                    value="true"
+                                >
+                                    {msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                defaultValue={msgStr("doSubmit")}
+                            />
+                        )}
                     </div>
-                </form>
-            }
-        />
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
index 4f8c51bc..3c487bd8 100644
--- a/src/login/pages/LoginUpdateProfile.tsx
+++ b/src/login/pages/LoginUpdateProfile.tsx
@@ -17,141 +17,134 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
     const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginProfileTitle")}
-            formNode={
-                <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    {user.editUsernameAllowed && (
-                        <div
-                            className={clsx(
-                                getClassName("kcFormGroupClass"),
-                                messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
-                            )}
-                        >
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor="username" className={getClassName("kcLabelClass")}>
-                                    {msg("username")}
-                                </label>
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <input
-                                    type="text"
-                                    id="username"
-                                    name="username"
-                                    defaultValue={user.username ?? ""}
-                                    className={getClassName("kcInputClass")}
-                                />
-                            </div>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
+            <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                {user.editUsernameAllowed && (
+                    <div
+                        className={clsx(
+                            getClassName("kcFormGroupClass"),
+                            messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
+                        )}
+                    >
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                {msg("username")}
+                            </label>
                         </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="username"
+                                name="username"
+                                defaultValue={user.username ?? ""}
+                                className={getClassName("kcInputClass")}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div
+                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
+                            {msg("email")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={getClassName("kcInputClass")} />
+                    </div>
+                </div>
+
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
                     )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
+                            {msg("firstName")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="firstName"
+                            name="firstName"
+                            defaultValue={user.firstName ?? ""}
+                            className={getClassName("kcInputClass")}
+                        />
+                    </div>
+                </div>
 
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="email" className={getClassName("kcLabelClass")}>
-                                {msg("email")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={getClassName("kcInputClass")} />
-                        </div>
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
+                            {msg("lastName")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="lastName"
+                            name="lastName"
+                            defaultValue={user.lastName ?? ""}
+                            className={getClassName("kcInputClass")}
+                        />
+                    </div>
+                </div>
+
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")} />
                     </div>
 
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
-                                {msg("firstName")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="firstName"
-                                name="firstName"
-                                defaultValue={user.firstName ?? ""}
-                                className={getClassName("kcInputClass")}
-                            />
-                        </div>
-                    </div>
-
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
-                                {msg("lastName")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="lastName"
-                                name="lastName"
-                                defaultValue={user.lastName ?? ""}
-                                className={getClassName("kcInputClass")}
-                            />
-                        </div>
-                    </div>
-
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")} />
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        defaultValue={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonDefaultClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        {isAppInitiatedAction ? (
+                            <>
                                 <input
                                     className={clsx(
                                         getClassName("kcButtonClass"),
                                         getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
                                         getClassName("kcButtonLargeClass")
                                     )}
                                     type="submit"
                                     defaultValue={msgStr("doSubmit")}
                                 />
-                            )}
-                        </div>
+                                <button
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonDefaultClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    name="cancel-aia"
+                                    value="true"
+                                >
+                                    {msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                defaultValue={msgStr("doSubmit")}
+                            />
+                        )}
                     </div>
-                </form>
-            }
-        />
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
index ec192d13..858c68dc 100644
--- a/src/login/pages/LoginUsername.tsx
+++ b/src/login/pages/LoginUsername.tsx
@@ -41,114 +41,6 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
-            formNode={
-                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
-                    <div
-                        id="kc-form-wrapper"
-                        className={clsx(
-                            realm.password &&
-                                social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
-                        )}
-                    >
-                        {realm.password && (
-                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    {!usernameHidden &&
-                                        (() => {
-                                            const label = !realm.loginWithEmailAllowed
-                                                ? "username"
-                                                : realm.registrationEmailAsUsername
-                                                ? "email"
-                                                : "usernameOrEmail";
-
-                                            const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
-
-                                            return (
-                                                <>
-                                                    <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
-                                                        {msg(label)}
-                                                    </label>
-                                                    <input
-                                                        tabIndex={1}
-                                                        id={autoCompleteHelper}
-                                                        className={getClassName("kcInputClass")}
-                                                        //NOTE: This is used by Google Chrome auto fill so we use it to tell
-                                                        //the browser how to pre fill the form but before submit we put it back
-                                                        //to username because it is what keycloak expects.
-                                                        name={autoCompleteHelper}
-                                                        defaultValue={login.username ?? ""}
-                                                        type="text"
-                                                        autoFocus={true}
-                                                        autoComplete="off"
-                                                    />
-                                                </>
-                                            );
-                                        })()}
-                                </div>
-                                <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                                    <div id="kc-form-options">
-                                        {realm.rememberMe && !usernameHidden && (
-                                            <div className="checkbox">
-                                                <label>
-                                                    <input
-                                                        tabIndex={3}
-                                                        id="rememberMe"
-                                                        name="rememberMe"
-                                                        type="checkbox"
-                                                        {...(login.rememberMe
-                                                            ? {
-                                                                  "checked": true
-                                                              }
-                                                            : {})}
-                                                    />
-                                                    {msg("rememberMe")}
-                                                </label>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                                <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonBlockClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        name="login"
-                                        id="kc-login"
-                                        type="submit"
-                                        value={msgStr("doLogIn")}
-                                        disabled={isLoginButtonDisabled}
-                                    />
-                                </div>
-                            </form>
-                        )}
-                    </div>
-                    {realm.password && social.providers !== undefined && (
-                        <div
-                            id="kc-social-providers"
-                            className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
-                        >
-                            <ul
-                                className={clsx(
-                                    getClassName("kcFormSocialAccountListClass"),
-                                    social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
-                                )}
-                            >
-                                {social.providers.map(p => (
-                                    <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
-                                            <span>{p.displayName}</span>
-                                        </a>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    )}
-                </div>
-            }
             infoNode={
                 realm.password &&
                 realm.registrationAllowed &&
@@ -163,6 +55,113 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                     </div>
                 )
             }
-        />
+        >
+            <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
+                <div
+                    id="kc-form-wrapper"
+                    className={clsx(
+                        realm.password &&
+                            social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
+                    )}
+                >
+                    {realm.password && (
+                        <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                            <div className={getClassName("kcFormGroupClass")}>
+                                {!usernameHidden &&
+                                    (() => {
+                                        const label = !realm.loginWithEmailAllowed
+                                            ? "username"
+                                            : realm.registrationEmailAsUsername
+                                            ? "email"
+                                            : "usernameOrEmail";
+
+                                        const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+
+                                        return (
+                                            <>
+                                                <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
+                                                    {msg(label)}
+                                                </label>
+                                                <input
+                                                    tabIndex={1}
+                                                    id={autoCompleteHelper}
+                                                    className={getClassName("kcInputClass")}
+                                                    //NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                    //the browser how to pre fill the form but before submit we put it back
+                                                    //to username because it is what keycloak expects.
+                                                    name={autoCompleteHelper}
+                                                    defaultValue={login.username ?? ""}
+                                                    type="text"
+                                                    autoFocus={true}
+                                                    autoComplete="off"
+                                                />
+                                            </>
+                                        );
+                                    })()}
+                            </div>
+                            <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                                <div id="kc-form-options">
+                                    {realm.rememberMe && !usernameHidden && (
+                                        <div className="checkbox">
+                                            <label>
+                                                <input
+                                                    tabIndex={3}
+                                                    id="rememberMe"
+                                                    name="rememberMe"
+                                                    type="checkbox"
+                                                    {...(login.rememberMe
+                                                        ? {
+                                                              "checked": true
+                                                          }
+                                                        : {})}
+                                                />
+                                                {msg("rememberMe")}
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                                <input
+                                    tabIndex={4}
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonPrimaryClass"),
+                                        getClassName("kcButtonBlockClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    name="login"
+                                    id="kc-login"
+                                    type="submit"
+                                    value={msgStr("doLogIn")}
+                                    disabled={isLoginButtonDisabled}
+                                />
+                            </div>
+                        </form>
+                    )}
+                </div>
+                {realm.password && social.providers !== undefined && (
+                    <div
+                        id="kc-social-providers"
+                        className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
+                    >
+                        <ul
+                            className={clsx(
+                                getClassName("kcFormSocialAccountListClass"),
+                                social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
+                            )}
+                        >
+                            {social.providers.map(p => (
+                                <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
+                                    <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
+                                        <span>{p.displayName}</span>
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx
index ef68df06..5dc7ba28 100644
--- a/src/login/pages/LoginVerifyEmail.tsx
+++ b/src/login/pages/LoginVerifyEmail.tsx
@@ -10,22 +10,15 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
     const { url, user } = kcContext;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("emailVerifyTitle")}
-            formNode={
-                <>
-                    <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
-                    <p className="instruction">
-                        {msg("emailVerifyInstruction2")}
-                        <br />
-                        <a href={url.loginAction}>{msg("doClickHere")}</a>
-                        &nbsp;
-                        {msg("emailVerifyInstruction3")}
-                    </p>
-                </>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("emailVerifyTitle")}>
+            <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
+            <p className="instruction">
+                {msg("emailVerifyInstruction2")}
+                <br />
+                <a href={url.loginAction}>{msg("doClickHere")}</a>
+                &nbsp;
+                {msg("emailVerifyInstruction3")}
+            </p>
+        </Template>
     );
 }
diff --git a/src/login/pages/LogoutConfirm.tsx b/src/login/pages/LogoutConfirm.tsx
index b03c7b09..818b588a 100644
--- a/src/login/pages/LogoutConfirm.tsx
+++ b/src/login/pages/LogoutConfirm.tsx
@@ -17,47 +17,40 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { msg, msgStr } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("logoutConfirmTitle")}
-            formNode={
-                <>
-                    <div id="kc-logout-confirm" className="content-area">
-                        <p className="instruction">{msg("logoutConfirmHeader")}</p>
-                        <form className="form-actions" action={url.logoutConfirmAction} method="POST">
-                            <input type="hidden" name="session_code" value={logoutConfirm.code} />
-                            <div className={getClassName("kcFormGroupClass")}>
-                                <div id="kc-form-options">
-                                    <div className={getClassName("kcFormOptionsWrapperClass")}></div>
-                                </div>
-                                <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonBlockClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        name="confirmLogout"
-                                        id="kc-logout"
-                                        type="submit"
-                                        value={msgStr("doLogout")}
-                                    />
-                                </div>
-                            </div>
-                        </form>
-                        <div id="kc-info-message">
-                            {!logoutConfirm.skipLink && client.baseUrl && (
-                                <p>
-                                    <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
-                                </p>
-                            )}
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("logoutConfirmTitle")}>
+            <div id="kc-logout-confirm" className="content-area">
+                <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options">
+                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                        </div>
+                        <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="confirmLogout"
+                                id="kc-logout"
+                                type="submit"
+                                value={msgStr("doLogout")}
+                            />
                         </div>
                     </div>
-                </>
-            }
-        />
+                </form>
+                <div id="kc-info-message">
+                    {!logoutConfirm.skipLink && client.baseUrl && (
+                        <p>
+                            <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                        </p>
+                    )}
+                </div>
+            </div>
+        </Template>
     );
 }
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
index 8ae5edc3..20fbed0b 100644
--- a/src/login/pages/Register.tsx
+++ b/src/login/pages/Register.tsx
@@ -17,173 +17,166 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
     const { msg, msgStr } = i18n;
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("registerTitle")}
-            formNode={
-                <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
-                                {msg("firstName")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="firstName"
-                                className={getClassName("kcInputClass")}
-                                name="firstName"
-                                defaultValue={register.formData.firstName ?? ""}
-                            />
-                        </div>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
+            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
+                            {msg("firstName")}
+                        </label>
                     </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="firstName"
+                            className={getClassName("kcInputClass")}
+                            name="firstName"
+                            defaultValue={register.formData.firstName ?? ""}
+                        />
+                    </div>
+                </div>
 
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
-                                {msg("lastName")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="lastName"
-                                className={getClassName("kcInputClass")}
-                                name="lastName"
-                                defaultValue={register.formData.lastName ?? ""}
-                            />
-                        </div>
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
+                            {msg("lastName")}
+                        </label>
                     </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="lastName"
+                            className={getClassName("kcInputClass")}
+                            name="lastName"
+                            defaultValue={register.formData.lastName ?? ""}
+                        />
+                    </div>
+                </div>
 
+                <div
+                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
+                            {msg("email")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="email"
+                            className={getClassName("kcInputClass")}
+                            name="email"
+                            defaultValue={register.formData.email ?? ""}
+                            autoComplete="email"
+                        />
+                    </div>
+                </div>
+                {!realm.registrationEmailAsUsername && (
                     <div
                         className={clsx(
                             getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
+                            messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
                         )}
                     >
                         <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="email" className={getClassName("kcLabelClass")}>
-                                {msg("email")}
+                            <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                {msg("username")}
                             </label>
                         </div>
                         <div className={getClassName("kcInputWrapperClass")}>
                             <input
                                 type="text"
-                                id="email"
+                                id="username"
                                 className={getClassName("kcInputClass")}
-                                name="email"
-                                defaultValue={register.formData.email ?? ""}
-                                autoComplete="email"
+                                name="username"
+                                defaultValue={register.formData.username ?? ""}
+                                autoComplete="username"
                             />
                         </div>
                     </div>
-                    {!realm.registrationEmailAsUsername && (
+                )}
+                {passwordRequired && (
+                    <>
                         <div
                             className={clsx(
                                 getClassName("kcFormGroupClass"),
-                                messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
+                                messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
                             )}
                         >
                             <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor="username" className={getClassName("kcLabelClass")}>
-                                    {msg("username")}
+                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                                    {msg("password")}
                                 </label>
                             </div>
                             <div className={getClassName("kcInputWrapperClass")}>
                                 <input
-                                    type="text"
-                                    id="username"
+                                    type="password"
+                                    id="password"
                                     className={getClassName("kcInputClass")}
-                                    name="username"
-                                    defaultValue={register.formData.username ?? ""}
-                                    autoComplete="username"
+                                    name="password"
+                                    autoComplete="new-password"
                                 />
                             </div>
                         </div>
-                    )}
-                    {passwordRequired && (
-                        <>
-                            <div
-                                className={clsx(
-                                    getClassName("kcFormGroupClass"),
-                                    messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
-                                )}
-                            >
-                                <div className={getClassName("kcLabelWrapperClass")}>
-                                    <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                        {msg("password")}
-                                    </label>
-                                </div>
-                                <div className={getClassName("kcInputWrapperClass")}>
-                                    <input
-                                        type="password"
-                                        id="password"
-                                        className={getClassName("kcInputClass")}
-                                        name="password"
-                                        autoComplete="new-password"
-                                    />
-                                </div>
-                            </div>
 
-                            <div
-                                className={clsx(
-                                    getClassName("kcFormGroupClass"),
-                                    messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
-                                )}
-                            >
-                                <div className={getClassName("kcLabelWrapperClass")}>
-                                    <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
-                                        {msg("passwordConfirm")}
-                                    </label>
-                                </div>
-                                <div className={getClassName("kcInputWrapperClass")}>
-                                    <input type="password" id="password-confirm" className={getClassName("kcInputClass")} name="password-confirm" />
-                                </div>
+                        <div
+                            className={clsx(
+                                getClassName("kcFormGroupClass"),
+                                messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
+                            )}
+                        >
+                            <div className={getClassName("kcLabelWrapperClass")}>
+                                <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
+                                    {msg("passwordConfirm")}
+                                </label>
                             </div>
-                        </>
-                    )}
-                    {recaptchaRequired && (
-                        <div className="form-group">
                             <div className={getClassName("kcInputWrapperClass")}>
-                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
+                                <input type="password" id="password-confirm" className={getClassName("kcInputClass")} name="password-confirm" />
                             </div>
                         </div>
-                    )}
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                type="submit"
-                                value={msgStr("doRegister")}
-                            />
+                    </>
+                )}
+                {recaptchaRequired && (
+                    <div className="form-group">
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                         </div>
                     </div>
-                </form>
-            }
-        />
+                )}
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <span>
+                                <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doRegister")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/RegisterUserProfile.tsx b/src/login/pages/RegisterUserProfile.tsx
index f873208c..1955845e 100644
--- a/src/login/pages/RegisterUserProfile.tsx
+++ b/src/login/pages/RegisterUserProfile.tsx
@@ -26,46 +26,45 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
             displayMessage={messagesPerField.exists("global")}
             displayRequiredFields={true}
             headerNode={msg("registerTitle")}
-            formNode={
-                <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
-                    <UserProfileFormFields
-                        kcContext={kcContext}
-                        onIsFormSubmittableValueChange={setIsFomSubmittable}
-                        i18n={i18n}
-                        getClassName={getClassName}
-                    />
-                    {recaptchaRequired && (
-                        <div className="form-group">
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
-                            </div>
-                        </div>
-                    )}
-                    <div className={getClassName("kcFormGroupClass")} style={{ "marginBottom": 30 }}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                type="submit"
-                                value={msgStr("doRegister")}
-                                disabled={!isFomSubmittable}
-                            />
+        >
+            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    i18n={i18n}
+                    getClassName={getClassName}
+                />
+                {recaptchaRequired && (
+                    <div className="form-group">
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
                         </div>
                     </div>
-                </form>
-            }
-        />
+                )}
+                <div className={getClassName("kcFormGroupClass")} style={{ "marginBottom": 30 }}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <span>
+                                <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doRegister")}
+                            disabled={!isFomSubmittable}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx
index dff76ab9..819db533 100644
--- a/src/login/pages/Terms.tsx
+++ b/src/login/pages/Terms.tsx
@@ -26,38 +26,31 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
     }
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("termsTitle")}
-            formNode={
-                <>
-                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
-                    <form className="form-actions" action={url.loginAction} method="POST">
-                        <input
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="accept"
-                            id="kc-accept"
-                            type="submit"
-                            value={msgStr("doAccept")}
-                        />
-                        <input
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
-                            name="cancel"
-                            id="kc-decline"
-                            type="submit"
-                            value={msgStr("doDecline")}
-                        />
-                    </form>
-                    <div className="clearfix" />
-                </>
-            }
-        />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
+            <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
+            <form className="form-actions" action={url.loginAction} method="POST">
+                <input
+                    className={clsx(
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonPrimaryClass"),
+                        getClassName("kcButtonLargeClass")
+                    )}
+                    name="accept"
+                    id="kc-accept"
+                    type="submit"
+                    value={msgStr("doAccept")}
+                />
+                <input
+                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                    name="cancel"
+                    id="kc-decline"
+                    type="submit"
+                    value={msgStr("doDecline")}
+                />
+            </form>
+            <div className="clearfix" />
+        </Template>
     );
 }
diff --git a/src/login/pages/UpdateUserProfile.tsx b/src/login/pages/UpdateUserProfile.tsx
index 1f28a3b7..ee567027 100644
--- a/src/login/pages/UpdateUserProfile.tsx
+++ b/src/login/pages/UpdateUserProfile.tsx
@@ -21,66 +21,62 @@ export default function UpdateUserProfile(props: PageProps<Extract<KcContext, {
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginProfileTitle")}
-            formNode={
-                <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    <UserProfileFormFields
-                        kcContext={kcContext}
-                        onIsFormSubmittableValueChange={setIsFomSubmittable}
-                        i18n={i18n}
-                        getClassName={getClassName}
-                    />
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
+            <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    i18n={i18n}
+                    getClassName={getClassName}
+                />
 
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
-                        </div>
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                    </div>
 
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        value={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonDefaultClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                        formNoValidate
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        {isAppInitiatedAction ? (
+                            <>
                                 <input
                                     className={clsx(
                                         getClassName("kcButtonClass"),
                                         getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
                                         getClassName("kcButtonLargeClass")
                                     )}
                                     type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                    disabled={!isFomSubmittable}
+                                    value={msgStr("doSubmit")}
                                 />
-                            )}
-                        </div>
+                                <button
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonDefaultClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    name="cancel-aia"
+                                    value="true"
+                                    formNoValidate
+                                >
+                                    {msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                defaultValue={msgStr("doSubmit")}
+                                disabled={!isFomSubmittable}
+                            />
+                        )}
                     </div>
-                </form>
-            }
-        />
+                </div>
+            </form>
+        </Template>
     );
 }
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
index 92ff3e33..eb0591cd 100644
--- a/src/login/pages/WebauthnAuthenticate.tsx
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@@ -94,111 +94,102 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     const [error, setError] = useState("");
 
     return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("webauthn-login-title")}
-            formNode={
-                <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
-                    <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
-                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
-                        <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
-                        <input type="hidden" id="signature" name="signature" value={signature} />
-                        <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
-                        <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
-                        <input type="hidden" id="error" name="error" value={error} />
-                    </form>
-                    <div className={getClassName("kcFormGroupClass")}>
-                        {authenticators &&
-                            (() => (
-                                <form id="authn_select" className={getClassName("kcFormClass")}>
-                                    {authenticators.authenticators.map(authenticator => (
-                                        <input
-                                            type="hidden"
-                                            name="authn_use_chk"
-                                            value={authenticator.credentialId}
-                                            key={authenticator.credentialId}
-                                        />
-                                    ))}
-                                </form>
-                            ))()}
-                        {authenticators &&
-                            shouldDisplayAuthenticators &&
-                            (() => (
-                                <>
-                                    {authenticators.authenticators.length > 1 && (
-                                        <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
-                                    )}
-                                    <div className={getClassName("kcFormClass")}>
-                                        {authenticators.authenticators.map(authenticator => (
-                                            <div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
-                                                <div className={getClassName("kcSelectAuthListItemIconClass")}>
-                                                    <i
-                                                        className={clsx(
-                                                            (() => {
-                                                                const className = getClassName(authenticator.transports.iconClass as any);
-                                                                return className.includes(" ")
-                                                                    ? className
-                                                                    : [className, getClassName("kcWebAuthnDefaultIcon")];
-                                                            })(),
-                                                            getClassName("kcSelectAuthListItemIconPropertyClass")
-                                                        )}
-                                                    />
-                                                </div>
-                                                <div className={getClassName("kcSelectAuthListItemBodyClass")}>
-                                                    <div
-                                                        id="kc-webauthn-authenticator-label"
-                                                        className={getClassName("kcSelectAuthListItemHeadingClass")}
-                                                    >
-                                                        {authenticator.label}
-                                                    </div>
-
-                                                    {authenticator.transports && authenticator.transports.displayNameProperties.length && (
-                                                        <div
-                                                            id="kc-webauthn-authenticator-transport"
-                                                            className={getClassName("kcSelectAuthListItemDescriptionClass")}
-                                                        >
-                                                            {authenticator.transports.displayNameProperties.map(
-                                                                (transport: MessageKey, index: number) => (
-                                                                    <>
-                                                                        <span>{msg(transport)}</span>
-                                                                        {index < authenticator.transports.displayNameProperties.length - 1 && (
-                                                                            <span>{", "}</span>
-                                                                        )}
-                                                                    </>
-                                                                )
-                                                            )}
-                                                        </div>
-                                                    )}
-
-                                                    <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
-                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
-                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
-                                                    </div>
-                                                </div>
-                                                <div className={getClassName("kcSelectAuthListItemFillClass")} />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </>
-                            ))()}
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                id="authenticateWebAuthnButton"
-                                type="button"
-                                onClick={webAuthnAuthenticate}
-                                autoFocus={true}
-                                value={msgStr("webauthn-doAuthenticate")}
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
+            <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
+                <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
+                    <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
+                    <input type="hidden" id="signature" name="signature" value={signature} />
+                    <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
+                    <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
+                    <input type="hidden" id="error" name="error" value={error} />
+                </form>
+                <div className={getClassName("kcFormGroupClass")}>
+                    {authenticators &&
+                        (() => (
+                            <form id="authn_select" className={getClassName("kcFormClass")}>
+                                {authenticators.authenticators.map(authenticator => (
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} key={authenticator.credentialId} />
+                                ))}
+                            </form>
+                        ))()}
+                    {authenticators &&
+                        shouldDisplayAuthenticators &&
+                        (() => (
+                            <>
+                                {authenticators.authenticators.length > 1 && (
+                                    <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
                                 )}
-                            />
-                        </div>
+                                <div className={getClassName("kcFormClass")}>
+                                    {authenticators.authenticators.map(authenticator => (
+                                        <div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
+                                            <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                                <i
+                                                    className={clsx(
+                                                        (() => {
+                                                            const className = getClassName(authenticator.transports.iconClass as any);
+                                                            return className.includes(" ")
+                                                                ? className
+                                                                : [className, getClassName("kcWebAuthnDefaultIcon")];
+                                                        })(),
+                                                        getClassName("kcSelectAuthListItemIconPropertyClass")
+                                                    )}
+                                                />
+                                            </div>
+                                            <div className={getClassName("kcSelectAuthListItemBodyClass")}>
+                                                <div
+                                                    id="kc-webauthn-authenticator-label"
+                                                    className={getClassName("kcSelectAuthListItemHeadingClass")}
+                                                >
+                                                    {authenticator.label}
+                                                </div>
+
+                                                {authenticator.transports && authenticator.transports.displayNameProperties.length && (
+                                                    <div
+                                                        id="kc-webauthn-authenticator-transport"
+                                                        className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                    >
+                                                        {authenticator.transports.displayNameProperties.map(
+                                                            (transport: MessageKey, index: number) => (
+                                                                <>
+                                                                    <span>{msg(transport)}</span>
+                                                                    {index < authenticator.transports.displayNameProperties.length - 1 && (
+                                                                        <span>{", "}</span>
+                                                                    )}
+                                                                </>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                )}
+
+                                                <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
+                                                    <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
+                                                    <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
+                                                </div>
+                                            </div>
+                                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </>
+                        ))()}
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            id="authenticateWebAuthnButton"
+                            type="button"
+                            onClick={webAuthnAuthenticate}
+                            autoFocus={true}
+                            value={msgStr("webauthn-doAuthenticate")}
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                        />
                     </div>
                 </div>
-            }
-        />
+            </div>
+        </Template>
     );
 }