diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
new file mode 100644
index 0000000..b82c4e2
--- /dev/null
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -0,0 +1,176 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/checkbox/primary.ftl" as checkboxPrimary>
+
+<@layout.registrationLayout; section>
+
+<#if section = "header">
+    ${kcSanitize(msg("recovery-code-config-header"))}
+<#elseif section = "form">
+
+    <!-- warning -->
+    <div class="bg-orange-100 text-orange-600 p-4 rounded-lg text-sm" role="alert">
+        <p class="font-bold my-2">${kcSanitize(msg("recovery-code-config-warning-title"))}</p>
+        <span>${kcSanitize(msg("recovery-code-config-warning-message"))}</span>
+    </div>
+
+    <ol class="font-mono kc-recovery-codes-list" id="kc-recovery-codes-list">
+        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+            <li><span class="font-bold">${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+        </#list>
+    </ol>
+
+    <!-- actions -->
+    <div class="flex items-stretch space-x-4 mb-4">
+        <button id="printRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-print"))}
+        </button>
+        <button id="downloadRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-download"))}
+        </button>
+        <button id="copyRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-copy"))}
+        </button>
+    </div>
+
+    <form action="${url.loginAction}" class="m-0 space-y-4m" method="post">
+        <input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
+        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
+        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
+
+        <!-- confirmation checkbox -->
+        <@checkboxPrimary.kw id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck" required="required">
+          ${kcSanitize(msg("recovery-codes-confirmation-message"))}
+        </@checkboxPrimary.kw>
+
+        <div class="flex flex-col space-y-2 mt-4">
+            <#if isAppInitiatedAction??>
+                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
+                  ${kcSanitize(msg("recovery-codes-action-complete"))}
+                </@buttonPrimary.kw>
+
+                <@buttonSecondary.kw type="submit" id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true" onclick="document.getElementById('kcRecoveryCodesConfirmationCheck').required=false;return true;">
+                  ${kcSanitize(msg("recovery-codes-action-cancel"))}
+                </@buttonSecondary.kw>
+            <#else>
+                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
+                  ${kcSanitize(msg("recovery-codes-action-complete"))}
+                </@buttonPrimary.kw>
+            </#if>
+        </div>
+    </form>
+
+    <script>
+        /* 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 =
+                "${msg("recovery-codes-download-file-header")}\n\n" +
+                recoveryCodeList + "\n" +
+                "${msg("recovery-codes-download-file-description")}\n\n" +
+                "${msg("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>${msg("recovery-codes-download-file-header")}</p>" +
+                "<div>" + recoveryCodeListHTML + "</div>" +
+                "<p>${msg("recovery-codes-download-file-description")}</p>" +
+                "<p>${msg("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);
+    </script>
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/login-recovery-authn-code-input.ftl b/theme/keywind/login/login-recovery-authn-code-input.ftl
new file mode 100644
index 0000000..3392a8b
--- /dev/null
+++ b/theme/keywind/login/login-recovery-authn-code-input.ftl
@@ -0,0 +1,26 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/input/primary.ftl" as inputPrimary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${kcSanitize(msg("auth-recovery-code-header"))}
+<#elseif section = "form">
+    <form class="m-0 space-y-4" action="${url.loginAction}" method="post">
+        <@inputPrimary.kw
+          autocomplete="off"
+          autofocus=true
+          invalid=["firstName"]
+          name="recoveryCodeInput"
+          type="text"
+          value=(register.formData.firstName)!''
+        >
+          ${msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c)}
+        </@inputPrimary.kw>
+
+        <@buttonPrimary.kw type="submit" name="login">
+          ${kcSanitize(msg("doLogIn"))}
+        </@buttonPrimary.kw>
+    </form>
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index c7c00cd..8126256 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-full{width:100%}.w-4{width:1rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-6{width:1.5rem}.w-4{width:1rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
diff --git a/theme/keywind/login/webauthn-authenticate.ftl b/theme/keywind/login/webauthn-authenticate.ftl
new file mode 100644
index 0000000..fdf4d91
--- /dev/null
+++ b/theme/keywind/login/webauthn-authenticate.ftl
@@ -0,0 +1,130 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${msg("webauthn-login-title")}
+
+<#elseif section = "form">
+    <div class="m-0">
+        <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>
+
+        <#if authenticators??>
+            <form id="authn_select" class="m-0">
+                <#list authenticators.authenticators as authenticator>
+                    <input type="hidden" name="authn_use_chk" value="${authenticator.credentialId}"/>
+                </#list>
+            </form>
+
+            <#if shouldDisplayAuthenticators?? && shouldDisplayAuthenticators>
+                <#if authenticators.authenticators?size gt 1>
+                    <p class="font-bold py-2 text-xl">${kcSanitize(msg("webauthn-available-authenticators"))?no_esc}</p>
+                </#if>
+
+                <#list authenticators.authenticators as authenticator>
+                    <div class="my-5">
+                        <p><span class="font-bold">${kcSanitize(msg('${authenticator.label}'))?no_esc}</span>
+                        <#--<#if authenticator.transports?? && authenticator.transports.displayNameProperties?has_content>
+                            (<#list authenticator.transports.displayNameProperties as nameProperty>
+                                ${kcSanitize(msg('${nameProperty!}'))?no_esc}
+                                <#if nameProperty?has_next>, </#if>
+                            </#list>)
+                        </#if>-->
+                        </p>
+
+                        <p>${kcSanitize(msg('webauthn-createdAt-label'))?no_esc}: <span class="font-bold">${kcSanitize(authenticator.createdAt)?no_esc}</span></p>
+                    </div>
+                </#list>
+            </#if>
+        </#if>
+
+        <@buttonPrimary.kw type="button" onclick="webAuthnAuthenticate()" autofocus="autofocus">
+          ${msg("webauthn-doAuthenticate")}
+        </@buttonPrimary.kw>
+    </div>
+
+<script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
+<script type="text/javascript">
+    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) {
+        jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
+        jQuery("#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;
+            jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
+            jQuery("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
+            jQuery("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
+            jQuery("#credentialId").val(result.id);
+            if(result.response.userHandle) {
+                jQuery("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+            }
+            jQuery("#webauth").submit();
+        })
+        .catch((err) => {
+            jQuery("#error").val(err);
+            jQuery("#webauth").submit();
+        })
+    ;
+}
+</script>
+<#elseif section = "info">
+
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/webauthn-error.ftl b/theme/keywind/login/webauthn-error.ftl
new file mode 100644
index 0000000..44dd00e
--- /dev/null
+++ b/theme/keywind/login/webauthn-error.ftl
@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout displayMessage=true; section>
+    <#if section = "header">
+        ${kcSanitize(msg("webauthn-error-title"))}
+    <#elseif section = "form">
+
+        <script type="text/javascript">
+            refreshPage = () => {
+                document.getElementById('isSetRetry').value = 'retry';
+                document.getElementById('executionValue').value = '${execution}';
+                document.getElementById('kc-error-credential-form').submit();
+            }
+        </script>
+
+        <form action="${url.loginAction}" method="post" class="m-0">
+            <input type="hidden" id="executionValue" name="authenticationExecution"/>
+            <input type="hidden" id="isSetRetry" name="isSetRetry"/>
+        </form>
+
+        <@buttonPrimary.kw type="button" tabindex="4" onclick="refreshPage()">
+          ${kcSanitize(msg("doTryAgain"))}
+        </@buttonPrimary.kw>
+
+        <#if isAppInitiatedAction??>
+            <form action="${url.loginAction}" method="post" class="m-0">
+                <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
+                  ${kcSanitize(msg("doCancel"))}
+                </@buttonSecondary.kw>
+            </form>
+        </#if>
+
+    </#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/webauthn-register.ftl b/theme/keywind/login/webauthn-register.ftl
new file mode 100644
index 0000000..25d0dd6
--- /dev/null
+++ b/theme/keywind/login/webauthn-register.ftl
@@ -0,0 +1,189 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${kcSanitize(msg("webauthn-registration-title"))}
+<#elseif section = "form">
+
+    <form id="register" action="${url.loginAction}" class="m-0 space-y-4" method="post">
+        <div class="${properties.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"/>
+        </div>
+    </form>
+
+    <script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
+    <script type="text/javascript">
+
+        function registerSecurityKey() {
+
+            // Check if WebAuthn is supported by this browser
+            if (!window.PublicKeyCredential) {
+                jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
+                jQuery("#register").submit();
+                return;
+            }
+
+            // mandatory parameters
+            let challenge = "${challenge}";
+            let userid = "${userid}";
+            let username = "${username}";
+
+            let signatureAlgorithms = "${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;
+
+                    jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
+                    jQuery("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
+                    jQuery("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
+
+                    if (typeof result.response.getTransports === "function") {
+                        let transports = result.response.getTransports();
+                        if (transports) {
+                            jQuery("#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;
+                    jQuery("#authenticatorLabel").val(labelResult);
+
+                    jQuery("#register").submit();
+
+                })
+                .catch(function (err) {
+                    jQuery("#error").val(err);
+                    jQuery("#register").submit();
+                });
+        }
+
+        function getPubKeyCredParams(signatureAlgorithms) {
+            let pubKeyCredParams = [];
+            if (signatureAlgorithms === "") {
+                pubKeyCredParams.push({type: "public-key", alg: -7});
+                return pubKeyCredParams;
+            }
+            let signatureAlgorithmsList = signatureAlgorithms.split(',');
+
+            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 === '' || transportsList.constructor !== Array) return "";
+
+            let transportsString = "";
+
+            for (let i = 0; i < transportsList.length; i++) {
+                transportsString += transportsList[i] + ",";
+            }
+
+            return transportsString.slice(0, -1);
+        }
+    </script>
+
+    <@buttonPrimary.kw type="submit" onclick="registerSecurityKey()">
+      ${kcSanitize(msg("doRegister"))}
+    </@buttonPrimary.kw>
+
+    <#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
+        <form action="${url.loginAction}" method="post" class="m-0">
+            <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
+              ${kcSanitize(msg("doCancel"))}
+            </@buttonSecondary.kw>
+        </form>
+    </#if>
+
+</#if>
+</@layout.registrationLayout>