diff --git a/README.md b/README.md
index f883d97..f0a4f3c 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,25 @@ With the integration of Tailwind CSS, you get access to utility-first CSS for ra
 -   Login Idp Link Email
 -   Login Oauth Grant
 -   Login Otp
+-   Login Page Expired
+-   Login Password
+-   Login Reset Otp
+-   Login Updatte Password
+-   Login Update Profile
+-   Login Username
+-   Login Verify Email
+-   Login x509 Info
+-   Logout Confirm
+-   Saml Post Form
+-   Select Authenticator
+-   Update Email
+-   Web Authn Authenticate
+-   Web Authn Error
+-   Web Authn Register
+-   Web Authn Error
+-   Login Oauth2 Device Verify User Code
+-   Login Recovery Authn Code Config
+-   Login Recovery Authn Code input
 
 Stay tuned as more pages are upgraded with Tailwind CSS and ShadCN UI components!
 
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
index 5b5f366..0da6fbf 100644
--- a/src/login/KcPage.tsx
+++ b/src/login/KcPage.tsx
@@ -32,6 +32,13 @@ import LoginX509Info from "./pages/LoginX509Info";
 import LogoutConfirm from "./pages/LogoutConfirm";
 import SamlPostForm from "./pages/SamlPostForm";
 import SelectAuthenticator from "./pages/SelectAuthenticator";
+import UpdateEmail from "./pages/UpdateEmail";
+import WebauthnAuthenticate from "./pages/WebauthnAuthenticate";
+import WebauthnError from "./pages/WebauthnError";
+import WebauthnRegister from "./pages/WebauthnRegister";
+import LoginOauth2DeviceVerifyUserCode from "./pages/LoginOauth2DeviceVerifyUserCode";
+import LoginRecoveryAuthnCodeConfig from "./pages/LoginRecoveryAuthnCodeConfig";
+import LoginRecoveryAuthnCodeInput from "./pages/LoginRecoveryAuthnCodeInput";
 const UserProfileFormFields = lazy(() => import("./UserProfileFormFields"));
 
 // Base component to render DefaultPage
@@ -67,6 +74,78 @@ export default function KcPage(props: { kcContext: KcContext }) {
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
+                    case "login-recovery-authn-code-input.ftl":
+                        return (
+                            <LoginRecoveryAuthnCodeInput
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "login-recovery-authn-code-config.ftl":
+                        return (
+                            <LoginRecoveryAuthnCodeConfig
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "login-oauth2-device-verify-user-code.ftl":
+                        return (
+                            <LoginOauth2DeviceVerifyUserCode
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "webauthn-register.ftl":
+                        return (
+                            <WebauthnRegister
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "webauthn-error.ftl":
+                        return (
+                            <WebauthnError
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "webauthn-authenticate.ftl":
+                        return (
+                            <WebauthnAuthenticate
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "update-email.ftl":
+                        return (
+                            <UpdateEmail
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                                UserProfileFormFields={UserProfileFormFields} // Pass the required UserProfileFormFields prop
+                                doMakeUserConfirmPassword={true} // or false, depending on your requirement
+                            />
+                        );
                     case "select-authenticator.ftl":
                         return (
                             <SelectAuthenticator
diff --git a/src/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx b/src/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
new file mode 100644
index 0000000..c042174
--- /dev/null
+++ b/src/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
+
+const meta = {
+    title: "login/login-oauth2-device-verify-user-code.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
diff --git a/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
new file mode 100644
index 0000000..4f9d6da
--- /dev/null
+++ b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
@@ -0,0 +1,73 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { PageProps } from "keycloakify/login/pages/PageProps";
+import { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { cn } from "../../lib/utils";
+export default function LoginOauth2DeviceVerifyUserCode(
+    props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>, I18n>
+) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+    const { url } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("oauth2DeviceVerificationTitle")}
+        >
+            <form
+                id="kc-user-verify-device-user-code-form"
+                className={kcClsx("kcFormClass")}
+                action={url.oauth2DeviceVerificationAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="device-user-code" className={kcClsx("kcLabelClass")}>
+                            {msg("verifyOAuth2DeviceUserCode")}
+                        </label>
+                    </div>
+
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <Input
+                            id="device-user-code"
+                            name="device_user_code"
+                            autoComplete="off"
+                            type="text"
+                            className={kcClsx("kcInputClass")}
+                            autoFocus
+                        />
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
+                            <input
+                                // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                className={cn(buttonVariants(), "w-full")}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
diff --git a/src/login/pages/LoginOauthGrant.tsx b/src/login/pages/LoginOauthGrant.tsx
index 71c3892..9f15e90 100644
--- a/src/login/pages/LoginOauthGrant.tsx
+++ b/src/login/pages/LoginOauthGrant.tsx
@@ -2,7 +2,7 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { PageProps } from "keycloakify/login/pages/PageProps";
 import { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "../../components/ui/button";
 export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth-grant.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
     const { url, oauth, client } = kcContext;
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
index 84e11fd..88e30cc 100644
--- a/src/login/pages/LoginPageExpired.tsx
+++ b/src/login/pages/LoginPageExpired.tsx
@@ -1,7 +1,7 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
 
 export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
index f84e9f3..ed73fc1 100644
--- a/src/login/pages/LoginPassword.tsx
+++ b/src/login/pages/LoginPassword.tsx
@@ -8,7 +8,7 @@ import type { I18n } from "../i18n";
 import { PasswordWrapper } from "../../components/ui/PasswordWrapper";
 import { buttonVariants } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
-import { Input } from "@/components/ui/input";
+import { Input } from "../../components/ui/input";
 export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
diff --git a/src/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx b/src/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
new file mode 100644
index 0000000..95ecec3
--- /dev/null
+++ b/src/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-config.ftl" });
+
+const meta = {
+    title: "login/login-recovery-authn-code-config.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+export const WithAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: true
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
new file mode 100644
index 0000000..f4ccce9
--- /dev/null
+++ b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
@@ -0,0 +1,281 @@
+import { useEffect } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { checkboxVariants } from "../../components/ui/checkbox";
+import { buttonVariants, Button } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+
+export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                textContent: `
+
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            "${msgStr("recovery-codes-download-file-header")}\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            "${msgStr("recovery-codes-download-file-description")}\\n\\n" +
+                            "${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>${msgStr("recovery-codes-download-file-header")}</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>${msgStr("recovery-codes-download-file-description")}</p>" +
+                            "<p>${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("recovery-code-config-header")}
+        >
+            <div className="space-y-3">
+                <div className={clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", kcClsx("kcRecoveryCodesWarning"))} aria-label="Warning alert">
+                    <div className="pf-c-alert__icon">
+                        <i className="pficon-warning-triangle-o" aria-hidden="true" />
+                    </div>
+                    <h4 className="pf-c-alert__title">
+                        <span className="pf-screen-reader">Warning alert:</span>
+                        {msg("recovery-code-config-warning-title")}
+                    </h4>
+                    <div className="pf-c-alert__description">
+                        <p>{msg("recovery-code-config-warning-message")}</p>
+                    </div>
+                </div>
+
+                <ol id="kc-recovery-codes-list" className="border rounded-md ">
+                    {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (
+                        <li key={index}>
+                            <span>{index + 1}:</span> {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}
+                        </li>
+                    ))}
+                </ol>
+
+                {/* actions */}
+                <div className="flex justify-between space-x-3">
+                    <Button id="printRecoveryCodes" variant="secondary" size="lg" type="button" className="flex-1 px-2">
+                        <i className="pficon-print" aria-hidden="true" /> <span className="mx-2">{msg("recovery-codes-print")}</span>
+                    </Button>
+                    <Button id="downloadRecoveryCodes" variant="secondary" size="lg" type="button" className="flex-1 px-2">
+                        <i className="pficon-save" aria-hidden="true" /> <span className="mx-2">{msg("recovery-codes-download")}</span>
+                    </Button>
+                    <Button id="copyRecoveryCodes" variant="secondary" size="lg" type="button" className="flex-1 px-2">
+                        <i className="pficon-blueprint" aria-hidden="true" /> <span className="mx-2">{msg("recovery-codes-copy")}</span>
+                    </Button>
+                </div>
+
+                {/* confirmation checkbox */}
+                <div className="flex space-x-2 items-center">
+                    <input
+                        // className={kcClsx("kcCheckInputClass")}
+                        className={cn(checkboxVariants({}), "!py-0")}
+                        type="checkbox"
+                        id="kcRecoveryCodesConfirmationCheck"
+                        name="kcRecoveryCodesConfirmationCheck"
+                        onChange={function () {
+                            //@ts-expect-error: This is code from the original theme, we trust it.
+                            document.getElementById("saveRecoveryAuthnCodesBtn").disabled = !this.checked;
+                        }}
+                    />
+                    <div>{msg("recovery-codes-confirmation-message")}</div>
+                </div>
+
+                <form action={kcContext.url.loginAction} className={kcClsx("kcFormGroupClass")} id="kc-recovery-codes-settings-form" method="post">
+                    <input
+                        type="hidden"
+                        name="generatedRecoveryAuthnCodes"
+                        value={recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}
+                    />
+                    <input type="hidden" name="generatedAt" value={recoveryAuthnCodesConfigBean.generatedAt} />
+                    <input type="hidden" id="userLabel" name="userLabel" value={msgStr("recovery-codes-label-default")} />
+
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+
+                    {isAppInitiatedAction ? (
+                        <div className="flex justify-between w-full space-x-2">
+                            <input
+                                type="submit"
+                                // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                className={cn(buttonVariants(), "w-full")}
+                                id="saveRecoveryAuthnCodesBtn"
+                                value={msgStr("recovery-codes-action-complete")}
+                                disabled
+                            />
+                            <Button
+                                type="submit"
+                                className="w-full"
+                                variant={"outline"}
+                                // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                                id="cancelRecoveryAuthnCodesBtn"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("recovery-codes-action-cancel")}
+                            </Button>
+                        </div>
+                    ) : (
+                        <input
+                            type="submit"
+                            // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                            className={cn(buttonVariants(), "w-full")}
+                            id="saveRecoveryAuthnCodesBtn"
+                            value={msgStr("recovery-codes-action-complete")}
+                            disabled
+                        />
+                    )}
+                </form>
+            </div>
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                <div className="checkbox">
+                    <div className="flex items-center flex-row">
+                        <input
+                            type="checkbox"
+                            id="logout-sessions"
+                            name="logout-sessions"
+                            value="on"
+                            defaultChecked={true}
+                            className={cn(checkboxVariants({}), "!py-0")}
+                        />
+                        <span className="mx-2">{msg("logoutOtherSessions")}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx b/src/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx
new file mode 100644
index 0000000..861e05d
--- /dev/null
+++ b/src/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-input.ftl" });
+
+const meta = {
+    title: "login/login-recovery-authn-code-input.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+// Error case where the user enters an incorrect recovery code
+export const WithError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                messagesPerField: {
+                    existsError: (fieldName: string) => fieldName === "recoveryCodeInput",
+                    get: (fieldName: string) => (fieldName === "recoveryCodeInput" ? "Invalid recovery code. Please try again." : undefined)
+                },
+                recoveryAuthnCodesInputBean: {
+                    codeNumber: 3
+                }
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
new file mode 100644
index 0000000..57cb9f3
--- /dev/null
+++ b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
@@ -0,0 +1,71 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { cn } from "../../lib/utils";
+export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-input.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("auth-recovery-code-header")}
+            displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
+        >
+            <form id="kc-recovery-code-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="recoveryCodeInput" className={kcClsx("kcLabelClass")}>
+                            {msg("auth-recovery-code-prompt", `${recoveryAuthnCodesInputBean.codeNumber}`)}
+                        </label>
+                    </div>
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <Input
+                            tabIndex={1}
+                            id="recoveryCodeInput"
+                            name="recoveryCodeInput"
+                            aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
+                            autoComplete="off"
+                            type="text"
+                            className={kcClsx("kcInputClass")}
+                            autoFocus
+                        />
+                        {messagesPerField.existsError("recoveryCodeInput") && (
+                            <span
+                                id="input-error"
+                                className={kcClsx("kcInputErrorMessageClass")}
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: messagesPerField.get("recoveryCodeInput")
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input className={cn(buttonVariants({}), "w-full")} name="login" id="kc-login" type="submit" value={msgStr("doLogIn")} />
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
diff --git a/src/login/pages/LoginResetOtp.tsx b/src/login/pages/LoginResetOtp.tsx
index 7eab25f..f2121cf 100644
--- a/src/login/pages/LoginResetOtp.tsx
+++ b/src/login/pages/LoginResetOtp.tsx
@@ -3,8 +3,8 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { buttonVariants } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
 export default function LoginResetOtp(props: PageProps<Extract<KcContext, { pageId: "login-reset-otp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
diff --git a/src/login/pages/LoginResetPassword.tsx b/src/login/pages/LoginResetPassword.tsx
index aefe763..9d7461a 100644
--- a/src/login/pages/LoginResetPassword.tsx
+++ b/src/login/pages/LoginResetPassword.tsx
@@ -4,7 +4,7 @@ import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 import { buttonVariants } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
-import { Input } from "@/components/ui/input";
+import { Input } from "../../components/ui/input";
 export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
diff --git a/src/login/pages/UpdateEmail.stories.tsx b/src/login/pages/UpdateEmail.stories.tsx
new file mode 100644
index 0000000..d3fcbc0
--- /dev/null
+++ b/src/login/pages/UpdateEmail.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "update-email.ftl" });
+
+const meta = {
+    title: "login/update-email.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+// 2. App-Initiated Action
+export const AppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: true
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
new file mode 100644
index 0000000..31b86c5
--- /dev/null
+++ b/src/login/pages/UpdateEmail.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants, Button } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+import { checkboxVariants } from "../../components/ui/checkbox";
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
+    UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
+};
+
+export default function UpdateEmail(props: UpdateEmailProps) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields
+            headerNode={msg("updateEmailTitle")}
+        >
+            <form id="kc-update-email-form" className="flex flex-col" action={url.loginAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    i18n={i18n}
+                    kcClsx={kcClsx}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
+
+                <div className="flex flex-col">
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+
+                    <div id="kc-form-buttons" className="flex space-x-2 justify-between items-center">
+                        <input
+                            disabled={!isFormSubmittable}
+                            className={cn(buttonVariants(), "w-full")}
+                            // className={kcClsx(
+                            //     "kcButtonClass",
+                            //     "kcButtonPrimaryClass",
+                            //     isAppInitiatedAction && "kcButtonBlockClass",
+                            //     "kcButtonLargeClass"
+                            // )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        />
+                        {isAppInitiatedAction && (
+                            <Button
+                                // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                                className="w-full"
+                                type="submit"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div>
+                <div>
+                    <div className="flex items-center space-x-2">
+                        <input
+                            type="checkbox"
+                            className={cn(checkboxVariants())}
+                            id="logout-sessions"
+                            name="logout-sessions"
+                            value="on"
+                            defaultChecked={true}
+                        />
+                        {msg("logoutOtherSessions")}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/login/pages/WebauthnAuthenticate.stories.tsx b/src/login/pages/WebauthnAuthenticate.stories.tsx
new file mode 100644
index 0000000..e2a89c1
--- /dev/null
+++ b/src/login/pages/WebauthnAuthenticate.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-authenticate.ftl" });
+
+const meta = {
+    title: "login/webauthn-authenticate.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+export const NoAuthenticators: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                authenticators: {
+                    authenticators: []
+                },
+                shouldDisplayAuthenticators: false
+            }}
+        />
+    )
+};
+export const MultipleAuthenticators: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "cred1",
+                            label: "Authenticator 1",
+                            createdAt: "2022-10-10",
+                            transports: {
+                                iconClass: "icon1",
+                                displayNameProperties: ["USB", "NFC"]
+                            }
+                        },
+                        {
+                            credentialId: "cred2",
+                            label: "Authenticator 2",
+                            createdAt: "2021-05-05",
+                            transports: {
+                                iconClass: "icon2",
+                                displayNameProperties: ["BLE", "USB"]
+                            }
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true
+            }}
+        />
+    )
+};
+export const SingleAuthenticator: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "cred1",
+                            label: "Authenticator 1",
+                            createdAt: "2022-10-10",
+                            transports: {
+                                iconClass: "icon1",
+                                displayNameProperties: ["USB", "NFC"]
+                            }
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
new file mode 100644
index 0000000..419210b
--- /dev/null
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@@ -0,0 +1,254 @@
+import { useEffect, Fragment } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { clsx } from "keycloakify/tools/clsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+    const {
+        url,
+        isUserIdentified,
+        challenge,
+        userVerification,
+        rpId,
+        createTimeout,
+        messagesPerField,
+        realm,
+        registrationDisabled,
+        authenticators,
+        shouldDisplayAuthenticators
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnAuthenticate",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+            },
+            {
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
+            },
+            {
+                type: "text/javascript",
+                textContent: `
+
+                    function webAuthnAuthenticate() {
+                        let isUserIdentified = ${isUserIdentified};
+                        if (!isUserIdentified) {
+                            doAuthenticate([]);
+                            return;
+                        }
+                        checkAllowCredentials();
+                    }
+
+                    function checkAllowCredentials() {
+                        let allowCredentials = [];
+                        let authn_use = document.forms['authn_select'].authn_use_chk;
+                    
+                        if (authn_use !== undefined) {
+                            if (authn_use.length === undefined) {
+                                allowCredentials.push({
+                                    id: base64url.decode(authn_use.value, {loose: true}),
+                                    type: 'public-key',
+                                });
+                            } else {
+                                for (let i = 0; i < authn_use.length; i++) {
+                                    allowCredentials.push({
+                                        id: base64url.decode(authn_use[i].value, {loose: true}),
+                                        type: 'public-key',
+                                    });
+                                }
+                            }
+                        }
+                        doAuthenticate(allowCredentials);
+                    }
+
+
+                    function doAuthenticate(allowCredentials) {
+                    
+                        // Check if WebAuthn is supported by this browser
+                        if (!window.PublicKeyCredential) {
+                            $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+                            $("#webauth").submit();
+                            return;
+                        }
+                    
+                        let challenge = "${challenge}";
+                        let userVerification = "${userVerification}";
+                        let rpId = "${rpId}";
+                        let publicKey = {
+                            rpId : rpId,
+                            challenge: base64url.decode(challenge, { loose: true })
+                        };
+                    
+                        let createTimeout = ${createTimeout};
+                        if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+                    
+                        if (allowCredentials.length) {
+                            publicKey.allowCredentials = allowCredentials;
+                        }
+                    
+                        if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
+                    
+                        navigator.credentials.get({publicKey})
+                            .then((result) => {
+                                window.result = result;
+                            
+                                let clientDataJSON = result.response.clientDataJSON;
+                                let authenticatorData = result.response.authenticatorData;
+                                let signature = result.response.signature;
+                            
+                                $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
+                                $("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
+                                $("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
+                                $("#credentialId").val(result.id);
+                                if(result.response.userHandle) {
+                                    $("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+                                }
+                                $("#webauth").submit();
+                            })
+                            .catch((err) => {
+                                $("#error").val(err);
+                                $("#webauth").submit();
+                            })
+                        ;
+                    }
+
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={!messagesPerField.existsError("username")}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+            infoNode={
+                <div id="kc-registration">
+                    <span>
+                        {msg("noAccount")}{" "}
+                        <a tabIndex={6} href={url.registrationUrl} className={cn(buttonVariants({ variant: "link" }), "underline py-0 px-2")}>
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
+            }
+            headerNode={msg("webauthn-login-title")}
+        >
+            <div id="kc-form-webauthn" className={kcClsx("kcFormClass")}>
+                <form id="webauth" action={url.loginAction} method="post">
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                    <input type="hidden" id="authenticatorData" name="authenticatorData" />
+                    <input type="hidden" id="signature" name="signature" />
+                    <input type="hidden" id="credentialId" name="credentialId" />
+                    <input type="hidden" id="userHandle" name="userHandle" />
+                    <input type="hidden" id="error" name="error" />
+                </form>
+                <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
+                    {authenticators && (
+                        <>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                {authenticators.authenticators.map(authenticator => (
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
+                                ))}
+                            </form>
+
+                            {shouldDisplayAuthenticators && (
+                                <>
+                                    {authenticators.authenticators.length > 1 && (
+                                        <p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                    )}
+                                    <div className={kcClsx("kcFormOptionsClass")}>
+                                        {authenticators.authenticators.map((authenticator, i) => (
+                                            <div key={i} id="kc-webauthn-authenticator" className={kcClsx("kcSelectAuthListItemClass")}>
+                                                <div className={kcClsx("kcSelectAuthListItemIconClass")}>
+                                                    <i
+                                                        className={clsx(
+                                                            (() => {
+                                                                const className = kcClsx(authenticator.transports.iconClass as any);
+                                                                if (className === authenticator.transports.iconClass) {
+                                                                    return kcClsx("kcWebAuthnDefaultIcon");
+                                                                }
+                                                                return className;
+                                                            })(),
+                                                            kcClsx("kcSelectAuthListItemIconPropertyClass")
+                                                        )}
+                                                    />
+                                                </div>
+                                                <div>
+                                                    <div id="kc-webauthn-authenticator-label" className={kcClsx("kcSelectAuthListItemHeadingClass")}>
+                                                        {advancedMsg(authenticator.label)}
+                                                    </div>
+                                                    {authenticator.transports.displayNameProperties?.length && (
+                                                        <div
+                                                            id="kc-webauthn-authenticator-transport"
+                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
+                                                        >
+                                                            {authenticator.transports.displayNameProperties
+                                                                .map((displayNameProperty, i, arr) => ({
+                                                                    displayNameProperty,
+                                                                    hasNext: i !== arr.length - 1
+                                                                }))
+                                                                .map(({ displayNameProperty, hasNext }) => (
+                                                                    <Fragment key={displayNameProperty}>
+                                                                        {advancedMsg(displayNameProperty)}
+                                                                        {hasNext && <span>, </span>}
+                                                                    </Fragment>
+                                                                ))}
+                                                        </div>
+                                                    )}
+                                                    <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
+                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
+                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
+                                                    </div>
+                                                    <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            id="authenticateWebAuthnButton"
+                            type="button"
+                            onClick={() => {
+                                assert("webAuthnAuthenticate" in window);
+                                assert(typeof window.webAuthnAuthenticate === "function");
+                                window.webAuthnAuthenticate();
+                            }}
+                            autoFocus
+                            value={msgStr("webauthn-doAuthenticate")}
+                            className={cn(buttonVariants({}), "w-full")}
+                            // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Template>
+    );
+}
diff --git a/src/login/pages/WebauthnError.stories.tsx b/src/login/pages/WebauthnError.stories.tsx
new file mode 100644
index 0000000..b3a874c
--- /dev/null
+++ b/src/login/pages/WebauthnError.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-error.ftl" });
+
+const meta = {
+    title: "login/webauthn-error.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+export const WithoutAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: false
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/WebauthnError.tsx b/src/login/pages/WebauthnError.tsx
new file mode 100644
index 0000000..14ad2e1
--- /dev/null
+++ b/src/login/pages/WebauthnError.tsx
@@ -0,0 +1,66 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { Button, buttonVariants } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage
+            headerNode={msg("webauthn-error-title")}
+        >
+            <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <input type="hidden" id="executionValue" name="authenticationExecution" />
+                <input type="hidden" id="isSetRetry" name="isSetRetry" />
+            </form>
+            <input
+                tabIndex={4}
+                onClick={() => {
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("isSetRetry").value = "retry";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("executionValue").value = "${execution}";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("kc-error-credential-form").submit();
+                }}
+                type="button"
+                // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                className={cn(buttonVariants(), "w-full")}
+                name="try-again"
+                id="kc-try-again"
+                value={msgStr("doTryAgain")}
+            />
+            {isAppInitiatedAction && (
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        variant="outline"
+                        id="cancelWebAuthnAIA"
+                        name="cancel-aia"
+                        value="true"
+                    >
+                        {msgStr("doCancel")}
+                    </Button>
+                </form>
+            )}
+        </Template>
+    );
+}
diff --git a/src/login/pages/WebauthnRegister.stories.tsx b/src/login/pages/WebauthnRegister.stories.tsx
new file mode 100644
index 0000000..9551e7d
--- /dev/null
+++ b/src/login/pages/WebauthnRegister.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-register.ftl" });
+
+const meta = {
+    title: "login/webauthn-register.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: true
+            }}
+        />
+    )
+};
+
+export const WithoutAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: false
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/WebauthnRegister.tsx b/src/login/pages/WebauthnRegister.tsx
new file mode 100644
index 0000000..82e2e73
--- /dev/null
+++ b/src/login/pages/WebauthnRegister.tsx
@@ -0,0 +1,291 @@
+import { useEffect } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants, Button } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+import { checkboxVariants } from "../../components/ui/checkbox";
+
+export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+    const {
+        url,
+        challenge,
+        userid,
+        username,
+        signatureAlgorithms,
+        rpEntityName,
+        rpId,
+        attestationConveyancePreference,
+        authenticatorAttachment,
+        requireResidentKey,
+        userVerificationRequirement,
+        createTimeout,
+        excludeCredentialIds,
+        isSetRetry,
+        isAppInitiatedAction
+    } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnRegister",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+            },
+            {
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
+            },
+            {
+                type: "text/javascript",
+                textContent: `
+                function registerSecurityKey() {
+
+                    // Check if WebAuthn is supported by this browser
+                    if (!window.PublicKeyCredential) {
+                        $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+                        $("#register").submit();
+                        return;
+                    }
+    
+                    // mandatory parameters
+                    let challenge = "${challenge}";
+                    let userid = "${userid}";
+                    let username = "${username}";
+    
+                    let signatureAlgorithms =${JSON.stringify(signatureAlgorithms)};
+                    let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
+    
+                    let rpEntityName = "${rpEntityName}";
+                    let rp = {name: rpEntityName};
+    
+                    let publicKey = {
+                        challenge: base64url.decode(challenge, {loose: true}),
+                        rp: rp,
+                        user: {
+                            id: base64url.decode(userid, {loose: true}),
+                            name: username,
+                            displayName: username
+                        },
+                        pubKeyCredParams: pubKeyCredParams,
+                    };
+    
+                    // optional parameters
+                    let rpId = "${rpId}";
+                    publicKey.rp.id = rpId;
+    
+                    let attestationConveyancePreference = "${attestationConveyancePreference}";
+                    if (attestationConveyancePreference !== 'not specified') publicKey.attestation = attestationConveyancePreference;
+    
+                    let authenticatorSelection = {};
+                    let isAuthenticatorSelectionSpecified = false;
+    
+                    let authenticatorAttachment = "${authenticatorAttachment}";
+                    if (authenticatorAttachment !== 'not specified') {
+                        authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    let requireResidentKey = "${requireResidentKey}";
+                    if (requireResidentKey !== 'not specified') {
+                        if (requireResidentKey === 'Yes')
+                            authenticatorSelection.requireResidentKey = true;
+                        else
+                            authenticatorSelection.requireResidentKey = false;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    let userVerificationRequirement = "${userVerificationRequirement}";
+                    if (userVerificationRequirement !== 'not specified') {
+                        authenticatorSelection.userVerification = userVerificationRequirement;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    if (isAuthenticatorSelectionSpecified) publicKey.authenticatorSelection = authenticatorSelection;
+    
+                    let createTimeout = ${createTimeout};
+                    if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+    
+                    let excludeCredentialIds = "${excludeCredentialIds}";
+                    let excludeCredentials = getExcludeCredentials(excludeCredentialIds);
+                    if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
+    
+                    navigator.credentials.create({publicKey})
+                        .then(function (result) {
+                            window.result = result;
+                            let clientDataJSON = result.response.clientDataJSON;
+                            let attestationObject = result.response.attestationObject;
+                            let publicKeyCredentialId = result.rawId;
+    
+                            $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
+                            $("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
+                            $("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
+    
+                            if (typeof result.response.getTransports === "function") {
+                                let transports = result.response.getTransports();
+                                if (transports) {
+                                    $("#transports").val(getTransportsAsString(transports));
+                                }
+                            } else {
+                                console.log("Your browser is not able to recognize supported transport media for the authenticator.");
+                            }
+    
+                            let initLabel = "WebAuthn Authenticator (Default Label)";
+                            let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
+                            if (labelResult === null) labelResult = initLabel;
+                            $("#authenticatorLabel").val(labelResult);
+    
+                            $("#register").submit();
+    
+                        })
+                        .catch(function (err) {
+                            $("#error").val(err);
+                            $("#register").submit();
+    
+                        });
+                }
+    
+                function getPubKeyCredParams(signatureAlgorithmsList) {
+                    let pubKeyCredParams = [];
+                    if (signatureAlgorithmsList.length === 0) {
+                        pubKeyCredParams.push({type: "public-key", alg: -7});
+                        return pubKeyCredParams;
+                    }
+    
+                    for (let i = 0; i < signatureAlgorithmsList.length; i++) {
+                        pubKeyCredParams.push({
+                            type: "public-key",
+                            alg: signatureAlgorithmsList[i]
+                        });
+                    }
+                    return pubKeyCredParams;
+                }
+    
+                function getExcludeCredentials(excludeCredentialIds) {
+                    let excludeCredentials = [];
+                    if (excludeCredentialIds === "") return excludeCredentials;
+    
+                    let excludeCredentialIdsList = excludeCredentialIds.split(',');
+    
+                    for (let i = 0; i < excludeCredentialIdsList.length; i++) {
+                        excludeCredentials.push({
+                            type: "public-key",
+                            id: base64url.decode(excludeCredentialIdsList[i],
+                            {loose: true})
+                        });
+                    }
+                    return excludeCredentials;
+                }
+    
+                function getTransportsAsString(transportsList) {
+                    if (transportsList === '' || Array.isArray(transportsList)) return "";
+    
+                    let transportsString = "";
+    
+                    for (let i = 0; i < transportsList.length; i++) {
+                        transportsString += transportsList[i] + ",";
+                    }
+    
+                    return transportsString.slice(0, -1);
+                }
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={
+                <>
+                    <span className={kcClsx("kcWebAuthnKeyIcon")} />
+                    {msg("webauthn-registration-title")}
+                </>
+            }
+        >
+            <form id="register" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                    <input type="hidden" id="attestationObject" name="attestationObject" />
+                    <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId" />
+                    <input type="hidden" id="authenticatorLabel" name="authenticatorLabel" />
+                    <input type="hidden" id="transports" name="transports" />
+                    <input type="hidden" id="error" name="error" />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+                </div>
+            </form>
+            <div className="flex space-x-2 items-center justify-between">
+                <input
+                    type="submit"
+                    // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                    className={cn(buttonVariants({}), "w-full")}
+                    id="registerWebAuthn"
+                    value={msgStr("doRegisterSecurityKey")}
+                    onClick={() => {
+                        assert("registerSecurityKey" in window);
+                        assert(typeof window.registerSecurityKey === "function");
+                        window.registerSecurityKey();
+                    }}
+                />
+
+                {!isSetRetry && isAppInitiatedAction && (
+                    <form action={url.loginAction} className="all-unset w-full !p-0 " id="kc-webauthn-settings-form" method="post">
+                        <Button
+                            type="submit"
+                            variant="outline"
+                            className="w-full"
+                            // className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                            id="cancelWebAuthnAIA"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msg("doCancel")}
+                        </Button>
+                    </form>
+                )}
+            </div>
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className="ml-6">
+            <div>
+                <div>
+                    <div className="flex items-center space-x-4">
+                        <input
+                            type="checkbox"
+                            id="logout-sessions"
+                            name="logout-sessions"
+                            value="on"
+                            defaultChecked={true}
+                            className={cn(checkboxVariants(), "bg-black")}
+                        />
+                        <span>{msg("logoutOtherSessions")}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/login/pages/legacy/LoginOauth2DeviceVerifyUserCodeLegacyy.tsx b/src/login/pages/legacy/LoginOauth2DeviceVerifyUserCodeLegacyy.tsx
new file mode 100644
index 0000000..a2ca0fc
--- /dev/null
+++ b/src/login/pages/legacy/LoginOauth2DeviceVerifyUserCodeLegacyy.tsx
@@ -0,0 +1,70 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { PageProps } from "keycloakify/login/pages/PageProps";
+import { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function LoginOauth2DeviceVerifyUserCode(
+    props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>, I18n>
+) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+    const { url } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("oauth2DeviceVerificationTitle")}
+        >
+            <form
+                id="kc-user-verify-device-user-code-form"
+                className={kcClsx("kcFormClass")}
+                action={url.oauth2DeviceVerificationAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="device-user-code" className={kcClsx("kcLabelClass")}>
+                            {msg("verifyOAuth2DeviceUserCode")}
+                        </label>
+                    </div>
+
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <input
+                            id="device-user-code"
+                            name="device_user_code"
+                            autoComplete="off"
+                            type="text"
+                            className={kcClsx("kcInputClass")}
+                            autoFocus
+                        />
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
+                            <input
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
diff --git a/src/login/pages/legacy/LoginPasswordLegacy.tsx b/src/login/pages/legacy/LoginPasswordLegacy.tsx
deleted file mode 100644
index 5fe8ad8..0000000
--- a/src/login/pages/legacy/LoginPasswordLegacy.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useState, useEffect, useReducer } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import { assert } from "keycloakify/tools/assert";
-import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
-import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { KcContext } from "../../KcContext";
-import type { I18n } from "../../i18n";
-import { PasswordWrapper } from "../../../components/ui/PasswordWrapper";
-import { buttonVariants } from "../../../components/ui/button";
-import { cn } from "../../../lib/utils";
-import { Input } from "@/components/ui/input";
-export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { kcClsx } = getKcClsx({
-        doUseDefaultCss,
-        classes
-    });
-
-    const { realm, url, messagesPerField } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
-
-    return (
-        <Template
-            kcContext={kcContext}
-            i18n={i18n}
-            doUseDefaultCss={doUseDefaultCss}
-            classes={classes}
-            headerNode={msg("doLogIn")}
-            displayMessage={!messagesPerField.existsError("password")}
-        >
-            <div id="kc-form">
-                <div id="kc-form-wrapper">
-                    <form
-                        id="kc-form-login"
-                        onSubmit={() => {
-                            setIsLoginButtonDisabled(true);
-                            return true;
-                        }}
-                        action={url.loginAction}
-                        method="post"
-                    >
-                        <div className={cn()}>
-                            {/* <hr /> */}
-                            <label htmlFor="password" className={cn()}>
-                                {msg("password")}
-                            </label>
-
-                            <PasswordWrapper kcClsx={kcClsx} i18n={i18n} passwordInputId="password">
-                                <Input
-                                    tabIndex={2}
-                                    id="password"
-                                    name="password"
-                                    type="password"
-                                    autoFocus
-                                    autoComplete="on"
-                                    aria-invalid={messagesPerField.existsError("username", "password")}
-                                />
-                            </PasswordWrapper>
-
-                            {messagesPerField.existsError("password") && (
-                                <span
-                                    id="input-error-password"
-                                    className={kcClsx("kcInputErrorMessageClass")}
-                                    aria-live="polite"
-                                    dangerouslySetInnerHTML={{
-                                        __html: messagesPerField.get("password")
-                                    }}
-                                />
-                            )}
-                        </div>
-                        <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
-                            <div id="kc-form-options" />
-                            <div className={kcClsx("kcFormOptionsWrapperClass")}>
-                                {realm.resetPasswordAllowed && (
-                                    <span>
-                                        <a
-                                            tabIndex={5}
-                                            href={url.loginResetCredentialsUrl}
-                                            className={cn(buttonVariants({ variant: "link" }), "underline px-0 mt-2")}
-                                        >
-                                            {msg("doForgotPassword")}
-                                        </a>
-                                    </span>
-                                )}
-                            </div>
-                        </div>
-                        <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
-                            <input
-                                tabIndex={4}
-                                // className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                                className={cn(buttonVariants(), "w-full")}
-                                name="login"
-                                id="kc-login"
-                                type="submit"
-                                value={msgStr("doLogIn")}
-                                disabled={isLoginButtonDisabled}
-                            />
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </Template>
-    );
-}
diff --git a/src/login/pages/legacy/LoginRecoveryAuthnCodeConfigLegacy.tsx b/src/login/pages/legacy/LoginRecoveryAuthnCodeConfigLegacy.tsx
new file mode 100644
index 0000000..91f9ce8
--- /dev/null
+++ b/src/login/pages/legacy/LoginRecoveryAuthnCodeConfigLegacy.tsx
@@ -0,0 +1,260 @@
+import { useEffect } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                textContent: `
+
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            "${msgStr("recovery-codes-download-file-header")}\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            "${msgStr("recovery-codes-download-file-description")}\\n\\n" +
+                            "${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>${msgStr("recovery-codes-download-file-header")}</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>${msgStr("recovery-codes-download-file-description")}</p>" +
+                            "<p>${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("recovery-code-config-header")}
+        >
+            <div className={clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", kcClsx("kcRecoveryCodesWarning"))} aria-label="Warning alert">
+                <div className="pf-c-alert__icon">
+                    <i className="pficon-warning-triangle-o" aria-hidden="true" />
+                </div>
+                <h4 className="pf-c-alert__title">
+                    <span className="pf-screen-reader">Warning alert:</span>
+                    {msg("recovery-code-config-warning-title")}
+                </h4>
+                <div className="pf-c-alert__description">
+                    <p>{msg("recovery-code-config-warning-message")}</p>
+                </div>
+            </div>
+
+            <ol id="kc-recovery-codes-list" className={kcClsx("kcRecoveryCodesList")}>
+                {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (
+                    <li key={index}>
+                        <span>{index + 1}:</span> {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}
+                    </li>
+                ))}
+            </ol>
+
+            {/* actions */}
+            <div className={kcClsx("kcRecoveryCodesActions")}>
+                <button id="printRecoveryCodes" className={clsx("pf-c-button", "pf-m-link")} type="button">
+                    <i className="pficon-print" aria-hidden="true" /> {msg("recovery-codes-print")}
+                </button>
+                <button id="downloadRecoveryCodes" className={clsx("pf-c-button", "pf-m-link")} type="button">
+                    <i className="pficon-save" aria-hidden="true" /> {msg("recovery-codes-download")}
+                </button>
+                <button id="copyRecoveryCodes" className={clsx("pf-c-button", "pf-m-link")} type="button">
+                    <i className="pficon-blueprint" aria-hidden="true" /> {msg("recovery-codes-copy")}
+                </button>
+            </div>
+
+            {/* confirmation checkbox */}
+            <div className={kcClsx("kcFormOptionsClass")}>
+                <input
+                    className={kcClsx("kcCheckInputClass")}
+                    type="checkbox"
+                    id="kcRecoveryCodesConfirmationCheck"
+                    name="kcRecoveryCodesConfirmationCheck"
+                    onChange={function () {
+                        //@ts-expect-error: This is code from the original theme, we trust it.
+                        document.getElementById("saveRecoveryAuthnCodesBtn").disabled = !this.checked;
+                    }}
+                />
+                <label htmlFor="kcRecoveryCodesConfirmationCheck">{msg("recovery-codes-confirmation-message")}</label>
+            </div>
+
+            <form action={kcContext.url.loginAction} className={kcClsx("kcFormGroupClass")} id="kc-recovery-codes-settings-form" method="post">
+                <input type="hidden" name="generatedRecoveryAuthnCodes" value={recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString} />
+                <input type="hidden" name="generatedAt" value={recoveryAuthnCodesConfigBean.generatedAt} />
+                <input type="hidden" id="userLabel" name="userLabel" value={msgStr("recovery-codes-label-default")} />
+
+                <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+
+                {isAppInitiatedAction ? (
+                    <>
+                        <input
+                            type="submit"
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                            id="saveRecoveryAuthnCodesBtn"
+                            value={msgStr("recovery-codes-action-complete")}
+                            disabled
+                        />
+                        <button
+                            type="submit"
+                            className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                            id="cancelRecoveryAuthnCodesBtn"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msg("recovery-codes-action-cancel")}
+                        </button>
+                    </>
+                ) : (
+                    <input
+                        type="submit"
+                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        id="saveRecoveryAuthnCodesBtn"
+                        value={msgStr("recovery-codes-action-complete")}
+                        disabled
+                    />
+                )}
+            </form>
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                <div className="checkbox">
+                    <label>
+                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />
+                        {msg("logoutOtherSessions")}
+                    </label>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/login/pages/legacy/LoginRecoveryAuthnCodeInputLegacy.tsx b/src/login/pages/legacy/LoginRecoveryAuthnCodeInputLegacy.tsx
new file mode 100644
index 0000000..3cf18b5
--- /dev/null
+++ b/src/login/pages/legacy/LoginRecoveryAuthnCodeInputLegacy.tsx
@@ -0,0 +1,75 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-input.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("auth-recovery-code-header")}
+            displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
+        >
+            <form id="kc-recovery-code-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="recoveryCodeInput" className={kcClsx("kcLabelClass")}>
+                            {msg("auth-recovery-code-prompt", `${recoveryAuthnCodesInputBean.codeNumber}`)}
+                        </label>
+                    </div>
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <input
+                            tabIndex={1}
+                            id="recoveryCodeInput"
+                            name="recoveryCodeInput"
+                            aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
+                            autoComplete="off"
+                            type="text"
+                            className={kcClsx("kcInputClass")}
+                            autoFocus
+                        />
+                        {messagesPerField.existsError("recoveryCodeInput") && (
+                            <span
+                                id="input-error"
+                                className={kcClsx("kcInputErrorMessageClass")}
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: messagesPerField.get("recoveryCodeInput")
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                            name="login"
+                            id="kc-login"
+                            type="submit"
+                            value={msgStr("doLogIn")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
diff --git a/src/login/pages/legacy/UpdateEmailLegacy.tsx b/src/login/pages/legacy/UpdateEmailLegacy.tsx
new file mode 100644
index 0000000..9c27905
--- /dev/null
+++ b/src/login/pages/legacy/UpdateEmailLegacy.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
+    UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
+};
+
+export default function UpdateEmail(props: UpdateEmailProps) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields
+            headerNode={msg("updateEmailTitle")}
+        >
+            <form id="kc-update-email-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    i18n={i18n}
+                    kcClsx={kcClsx}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            disabled={!isFormSubmittable}
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                isAppInitiatedAction && "kcButtonBlockClass",
+                                "kcButtonLargeClass"
+                            )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        />
+                        {isAppInitiatedAction && (
+                            <button
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                                type="submit"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                <div className="checkbox">
+                    <label>
+                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />
+                        {msg("logoutOtherSessions")}
+                    </label>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/login/pages/legacy/WebauthnAuthenticateLegacy.tsx b/src/login/pages/legacy/WebauthnAuthenticateLegacy.tsx
new file mode 100644
index 0000000..29190c3
--- /dev/null
+++ b/src/login/pages/legacy/WebauthnAuthenticateLegacy.tsx
@@ -0,0 +1,251 @@
+import { useEffect, Fragment } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { clsx } from "keycloakify/tools/clsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+    const {
+        url,
+        isUserIdentified,
+        challenge,
+        userVerification,
+        rpId,
+        createTimeout,
+        messagesPerField,
+        realm,
+        registrationDisabled,
+        authenticators,
+        shouldDisplayAuthenticators
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnAuthenticate",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+            },
+            {
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
+            },
+            {
+                type: "text/javascript",
+                textContent: `
+
+                    function webAuthnAuthenticate() {
+                        let isUserIdentified = ${isUserIdentified};
+                        if (!isUserIdentified) {
+                            doAuthenticate([]);
+                            return;
+                        }
+                        checkAllowCredentials();
+                    }
+
+                    function checkAllowCredentials() {
+                        let allowCredentials = [];
+                        let authn_use = document.forms['authn_select'].authn_use_chk;
+                    
+                        if (authn_use !== undefined) {
+                            if (authn_use.length === undefined) {
+                                allowCredentials.push({
+                                    id: base64url.decode(authn_use.value, {loose: true}),
+                                    type: 'public-key',
+                                });
+                            } else {
+                                for (let i = 0; i < authn_use.length; i++) {
+                                    allowCredentials.push({
+                                        id: base64url.decode(authn_use[i].value, {loose: true}),
+                                        type: 'public-key',
+                                    });
+                                }
+                            }
+                        }
+                        doAuthenticate(allowCredentials);
+                    }
+
+
+                    function doAuthenticate(allowCredentials) {
+                    
+                        // Check if WebAuthn is supported by this browser
+                        if (!window.PublicKeyCredential) {
+                            $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+                            $("#webauth").submit();
+                            return;
+                        }
+                    
+                        let challenge = "${challenge}";
+                        let userVerification = "${userVerification}";
+                        let rpId = "${rpId}";
+                        let publicKey = {
+                            rpId : rpId,
+                            challenge: base64url.decode(challenge, { loose: true })
+                        };
+                    
+                        let createTimeout = ${createTimeout};
+                        if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+                    
+                        if (allowCredentials.length) {
+                            publicKey.allowCredentials = allowCredentials;
+                        }
+                    
+                        if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
+                    
+                        navigator.credentials.get({publicKey})
+                            .then((result) => {
+                                window.result = result;
+                            
+                                let clientDataJSON = result.response.clientDataJSON;
+                                let authenticatorData = result.response.authenticatorData;
+                                let signature = result.response.signature;
+                            
+                                $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
+                                $("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
+                                $("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
+                                $("#credentialId").val(result.id);
+                                if(result.response.userHandle) {
+                                    $("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+                                }
+                                $("#webauth").submit();
+                            })
+                            .catch((err) => {
+                                $("#error").val(err);
+                                $("#webauth").submit();
+                            })
+                        ;
+                    }
+
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={!messagesPerField.existsError("username")}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+            infoNode={
+                <div id="kc-registration">
+                    <span>
+                        {msg("noAccount")}{" "}
+                        <a tabIndex={6} href={url.registrationUrl}>
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
+            }
+            headerNode={msg("webauthn-login-title")}
+        >
+            <div id="kc-form-webauthn" className={kcClsx("kcFormClass")}>
+                <form id="webauth" action={url.loginAction} method="post">
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                    <input type="hidden" id="authenticatorData" name="authenticatorData" />
+                    <input type="hidden" id="signature" name="signature" />
+                    <input type="hidden" id="credentialId" name="credentialId" />
+                    <input type="hidden" id="userHandle" name="userHandle" />
+                    <input type="hidden" id="error" name="error" />
+                </form>
+                <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
+                    {authenticators && (
+                        <>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                {authenticators.authenticators.map(authenticator => (
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
+                                ))}
+                            </form>
+
+                            {shouldDisplayAuthenticators && (
+                                <>
+                                    {authenticators.authenticators.length > 1 && (
+                                        <p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                    )}
+                                    <div className={kcClsx("kcFormOptionsClass")}>
+                                        {authenticators.authenticators.map((authenticator, i) => (
+                                            <div key={i} id="kc-webauthn-authenticator" className={kcClsx("kcSelectAuthListItemClass")}>
+                                                <div className={kcClsx("kcSelectAuthListItemIconClass")}>
+                                                    <i
+                                                        className={clsx(
+                                                            (() => {
+                                                                const className = kcClsx(authenticator.transports.iconClass as any);
+                                                                if (className === authenticator.transports.iconClass) {
+                                                                    return kcClsx("kcWebAuthnDefaultIcon");
+                                                                }
+                                                                return className;
+                                                            })(),
+                                                            kcClsx("kcSelectAuthListItemIconPropertyClass")
+                                                        )}
+                                                    />
+                                                </div>
+                                                <div className={kcClsx("kcSelectAuthListItemArrowIconClass")}>
+                                                    <div id="kc-webauthn-authenticator-label" className={kcClsx("kcSelectAuthListItemHeadingClass")}>
+                                                        {advancedMsg(authenticator.label)}
+                                                    </div>
+                                                    {authenticator.transports.displayNameProperties?.length && (
+                                                        <div
+                                                            id="kc-webauthn-authenticator-transport"
+                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
+                                                        >
+                                                            {authenticator.transports.displayNameProperties
+                                                                .map((displayNameProperty, i, arr) => ({
+                                                                    displayNameProperty,
+                                                                    hasNext: i !== arr.length - 1
+                                                                }))
+                                                                .map(({ displayNameProperty, hasNext }) => (
+                                                                    <Fragment key={displayNameProperty}>
+                                                                        {advancedMsg(displayNameProperty)}
+                                                                        {hasNext && <span>, </span>}
+                                                                    </Fragment>
+                                                                ))}
+                                                        </div>
+                                                    )}
+                                                    <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
+                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
+                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
+                                                    </div>
+                                                    <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            id="authenticateWebAuthnButton"
+                            type="button"
+                            onClick={() => {
+                                assert("webAuthnAuthenticate" in window);
+                                assert(typeof window.webAuthnAuthenticate === "function");
+                                window.webAuthnAuthenticate();
+                            }}
+                            autoFocus
+                            value={msgStr("webauthn-doAuthenticate")}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Template>
+    );
+}
diff --git a/src/login/pages/legacy/WebauthnErrorLegacy.tsx b/src/login/pages/legacy/WebauthnErrorLegacy.tsx
new file mode 100644
index 0000000..12d5a15
--- /dev/null
+++ b/src/login/pages/legacy/WebauthnErrorLegacy.tsx
@@ -0,0 +1,62 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage
+            headerNode={msg("webauthn-error-title")}
+        >
+            <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <input type="hidden" id="executionValue" name="authenticationExecution" />
+                <input type="hidden" id="isSetRetry" name="isSetRetry" />
+            </form>
+            <input
+                tabIndex={4}
+                onClick={() => {
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("isSetRetry").value = "retry";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("executionValue").value = "${execution}";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("kc-error-credential-form").submit();
+                }}
+                type="button"
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                name="try-again"
+                id="kc-try-again"
+                value={msgStr("doTryAgain")}
+            />
+            {isAppInitiatedAction && (
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                    <button
+                        type="submit"
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        id="cancelWebAuthnAIA"
+                        name="cancel-aia"
+                        value="true"
+                    >
+                        {msgStr("doCancel")}
+                    </button>
+                </form>
+            )}
+        </Template>
+    );
+}
diff --git a/src/login/pages/legacy/WebauthnRegisterLegacy.tsx b/src/login/pages/legacy/WebauthnRegisterLegacy.tsx
new file mode 100644
index 0000000..93ff1c1
--- /dev/null
+++ b/src/login/pages/legacy/WebauthnRegisterLegacy.tsx
@@ -0,0 +1,276 @@
+import { useEffect } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+    const {
+        url,
+        challenge,
+        userid,
+        username,
+        signatureAlgorithms,
+        rpEntityName,
+        rpId,
+        attestationConveyancePreference,
+        authenticatorAttachment,
+        requireResidentKey,
+        userVerificationRequirement,
+        createTimeout,
+        excludeCredentialIds,
+        isSetRetry,
+        isAppInitiatedAction
+    } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnRegister",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+            },
+            {
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
+            },
+            {
+                type: "text/javascript",
+                textContent: `
+                function registerSecurityKey() {
+
+                    // Check if WebAuthn is supported by this browser
+                    if (!window.PublicKeyCredential) {
+                        $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+                        $("#register").submit();
+                        return;
+                    }
+    
+                    // mandatory parameters
+                    let challenge = "${challenge}";
+                    let userid = "${userid}";
+                    let username = "${username}";
+    
+                    let signatureAlgorithms =${JSON.stringify(signatureAlgorithms)};
+                    let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
+    
+                    let rpEntityName = "${rpEntityName}";
+                    let rp = {name: rpEntityName};
+    
+                    let publicKey = {
+                        challenge: base64url.decode(challenge, {loose: true}),
+                        rp: rp,
+                        user: {
+                            id: base64url.decode(userid, {loose: true}),
+                            name: username,
+                            displayName: username
+                        },
+                        pubKeyCredParams: pubKeyCredParams,
+                    };
+    
+                    // optional parameters
+                    let rpId = "${rpId}";
+                    publicKey.rp.id = rpId;
+    
+                    let attestationConveyancePreference = "${attestationConveyancePreference}";
+                    if (attestationConveyancePreference !== 'not specified') publicKey.attestation = attestationConveyancePreference;
+    
+                    let authenticatorSelection = {};
+                    let isAuthenticatorSelectionSpecified = false;
+    
+                    let authenticatorAttachment = "${authenticatorAttachment}";
+                    if (authenticatorAttachment !== 'not specified') {
+                        authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    let requireResidentKey = "${requireResidentKey}";
+                    if (requireResidentKey !== 'not specified') {
+                        if (requireResidentKey === 'Yes')
+                            authenticatorSelection.requireResidentKey = true;
+                        else
+                            authenticatorSelection.requireResidentKey = false;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    let userVerificationRequirement = "${userVerificationRequirement}";
+                    if (userVerificationRequirement !== 'not specified') {
+                        authenticatorSelection.userVerification = userVerificationRequirement;
+                        isAuthenticatorSelectionSpecified = true;
+                    }
+    
+                    if (isAuthenticatorSelectionSpecified) publicKey.authenticatorSelection = authenticatorSelection;
+    
+                    let createTimeout = ${createTimeout};
+                    if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+    
+                    let excludeCredentialIds = "${excludeCredentialIds}";
+                    let excludeCredentials = getExcludeCredentials(excludeCredentialIds);
+                    if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
+    
+                    navigator.credentials.create({publicKey})
+                        .then(function (result) {
+                            window.result = result;
+                            let clientDataJSON = result.response.clientDataJSON;
+                            let attestationObject = result.response.attestationObject;
+                            let publicKeyCredentialId = result.rawId;
+    
+                            $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
+                            $("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
+                            $("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
+    
+                            if (typeof result.response.getTransports === "function") {
+                                let transports = result.response.getTransports();
+                                if (transports) {
+                                    $("#transports").val(getTransportsAsString(transports));
+                                }
+                            } else {
+                                console.log("Your browser is not able to recognize supported transport media for the authenticator.");
+                            }
+    
+                            let initLabel = "WebAuthn Authenticator (Default Label)";
+                            let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
+                            if (labelResult === null) labelResult = initLabel;
+                            $("#authenticatorLabel").val(labelResult);
+    
+                            $("#register").submit();
+    
+                        })
+                        .catch(function (err) {
+                            $("#error").val(err);
+                            $("#register").submit();
+    
+                        });
+                }
+    
+                function getPubKeyCredParams(signatureAlgorithmsList) {
+                    let pubKeyCredParams = [];
+                    if (signatureAlgorithmsList.length === 0) {
+                        pubKeyCredParams.push({type: "public-key", alg: -7});
+                        return pubKeyCredParams;
+                    }
+    
+                    for (let i = 0; i < signatureAlgorithmsList.length; i++) {
+                        pubKeyCredParams.push({
+                            type: "public-key",
+                            alg: signatureAlgorithmsList[i]
+                        });
+                    }
+                    return pubKeyCredParams;
+                }
+    
+                function getExcludeCredentials(excludeCredentialIds) {
+                    let excludeCredentials = [];
+                    if (excludeCredentialIds === "") return excludeCredentials;
+    
+                    let excludeCredentialIdsList = excludeCredentialIds.split(',');
+    
+                    for (let i = 0; i < excludeCredentialIdsList.length; i++) {
+                        excludeCredentials.push({
+                            type: "public-key",
+                            id: base64url.decode(excludeCredentialIdsList[i],
+                            {loose: true})
+                        });
+                    }
+                    return excludeCredentials;
+                }
+    
+                function getTransportsAsString(transportsList) {
+                    if (transportsList === '' || Array.isArray(transportsList)) return "";
+    
+                    let transportsString = "";
+    
+                    for (let i = 0; i < transportsList.length; i++) {
+                        transportsString += transportsList[i] + ",";
+                    }
+    
+                    return transportsString.slice(0, -1);
+                }
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={
+                <>
+                    <span className={kcClsx("kcWebAuthnKeyIcon")} />
+                    {msg("webauthn-registration-title")}
+                </>
+            }
+        >
+            <form id="register" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                    <input type="hidden" id="attestationObject" name="attestationObject" />
+                    <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId" />
+                    <input type="hidden" id="authenticatorLabel" name="authenticatorLabel" />
+                    <input type="hidden" id="transports" name="transports" />
+                    <input type="hidden" id="error" name="error" />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
+                </div>
+            </form>
+            <input
+                type="submit"
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                id="registerWebAuthn"
+                value={msgStr("doRegisterSecurityKey")}
+                onClick={() => {
+                    assert("registerSecurityKey" in window);
+                    assert(typeof window.registerSecurityKey === "function");
+                    window.registerSecurityKey();
+                }}
+            />
+
+            {!isSetRetry && isAppInitiatedAction && (
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                    <button
+                        type="submit"
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        id="cancelWebAuthnAIA"
+                        name="cancel-aia"
+                        value="true"
+                    >
+                        {msg("doCancel")}
+                    </button>
+                </form>
+            )}
+        </Template>
+    );
+}
+
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                <div className="checkbox">
+                    <label>
+                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />
+                        {msg("logoutOtherSessions")}
+                    </label>
+                </div>
+            </div>
+        </div>
+    );
+}