diff --git a/src/login/lib/useGetClassName.ts b/src/login/lib/useGetClassName.ts
index 2692cfb5..25bb6572 100644
--- a/src/login/lib/useGetClassName.ts
+++ b/src/login/lib/useGetClassName.ts
@@ -94,7 +94,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
 
         //css classes for the OTP Login Form
-        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
+        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
         "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
         "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
         "kcSelectOTPItemHeadingClass": "card-pf-title text-center",
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index f4e99d34..3dc8419b 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/src/login/pages/LoginOtp.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-import { headInsert } from "keycloakify/tools/headInsert";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@@ -18,105 +16,77 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     const { msg, msgStr } = i18n;
 
-    useEffect(() => {
-        let isCleanedUp = false;
-
-        const { prLoaded, remove } = headInsert({
-            "type": "javascript",
-            "src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
-        });
-
-        (async () => {
-            await prLoaded;
-
-            if (isCleanedUp) {
-                return;
-            }
-
-            evaluateInlineScript();
-        })();
-
-        return () => {
-            isCleanedUp = true;
-            remove();
-        };
-    }, []);
-
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
-            <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                {otpLogin.userOtpCredentials.length > 1 && (
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            {otpLogin.userOtpCredentials.map(otpCredential => (
-                                <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
-                                    <input type="hidden" value="${otpCredential.id}" />
-                                    <div className={getClassName("kcSelectOTPListItemClass")}>
-                                        <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
-                                        <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+        <>
+            <style>
+                {`
+                input[type="radio"]:checked~label.kcSelectOTPListClass{
+                    border: 2px solid #39a5dc;
+                }`}
+            </style>
+            <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
+                <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                    {otpLogin.userOtpCredentials.length > 1 && (
+                        <div className={getClassName("kcFormGroupClass")}>
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                {otpLogin.userOtpCredentials.map((otpCredential, index) => (
+                                    <div key={otpCredential.id}>
+                                        <input
+                                            id={`kc-otp-credential-${index}`}
+                                            name="selectedCredentialId"
+                                            type="radio"
+                                            value={otpCredential.id}
+                                            style={{ display: "none" }}
+                                        />
+                                        <label
+                                            htmlFor={`kc-otp-credential-${index}`}
+                                            key={otpCredential.id}
+                                            className={getClassName("kcSelectOTPListClass")}
+                                        >
+                                            <div className={getClassName("kcSelectOTPListItemClass")}>
+                                                <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
+                                                <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+                                            </div>
+                                        </label>
                                     </div>
-                                </div>
-                            ))}
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="otp" className={getClassName("kcLabelClass")}>
+                                {msg("loginOtpOneTime")}
+                            </label>
+                        </div>
+
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
                         </div>
                     </div>
-                )}
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="otp" className={getClassName("kcLabelClass")}>
-                            {msg("loginOtpOneTime")}
-                        </label>
-                    </div>
 
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
-                    </div>
-                </div>
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")} />
+                        </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                            />
+                        </div>
                     </div>
-
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        <input
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="login"
-                            id="kc-login"
-                            type="submit"
-                            value={msgStr("doLogIn")}
-                        />
-                    </div>
-                </div>
-            </form>
-        </Template>
+                </form>
+            </Template>
+        </>
     );
 }
-
-declare const $: any;
-
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function (this: any) {
-            if ($(this).hasClass("active")) {
-                $(this).removeClass("active");
-                $(this).children().removeAttr("name");
-            } else {
-                $(".card-pf-view-single-select").removeClass("active");
-                $(".card-pf-view-single-select").children().removeAttr("name");
-                $(this).addClass("active");
-                $(this).children().attr("name", "selectedCredentialId");
-            }
-        });
-
-        var defaultCred = $(".card-pf-view-single-select")[0];
-        if (defaultCred) {
-            defaultCred.click();
-        }
-    });
-}