diff --git a/custom/TwoFAModal.vue b/custom/TwoFAModal.vue
index bb5e4e3..9f8cd8f 100644
--- a/custom/TwoFAModal.vue
+++ b/custom/TwoFAModal.vue
@@ -1,45 +1,55 @@
 <template>
     <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
     v-show ="modelShow && (isLoading === false)">
-      <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp flex flex-col items-center relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
-        <div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
-          <p> {{ customDialogTitle }} </p>
-          <p>{{ $t('Please enter your authenticator code') }}</p>
-        </div>
-        
-        <div class="flex flex-col max-w-[calc(15rem_+_60px)]">
-          <div class="mb-4 w-full flex justify-center" ref="otpRoot">
-            <v-otp-input
-              ref="confirmationResult"
-              container-class="grid grid-cols-6 gap-3 w-full"
-              input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              :num-inputs="6"
-              inputType="number"
-              inputmode="numeric"
-              :should-auto-focus="true"
-              :should-focus-order="true"
-              v-model:value="bindValue"
-              @on-complete="handleOnComplete"
-            />
+      <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp flex flex-col gap-4 relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
+        <button
+          type="button"
+          class="af-2fa-close-btn text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+          @click="onCancel"
+        >
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+          </svg>
+          <span class="sr-only">{{$t('Close modal')}}</span>
+        </button>
+
+        <div class="af-2fa-totp-header flex flex-col items-center justify-center gap-3">
+          <div class="af-2fa-icon-wrap w-14 h-14 shrink-0 flex items-center justify-center rounded-full bg-lightPrimary dark:bg-darkPrimary">
+            <IconShieldOutline class="af-2fa-shield-icon w-7 h-7 text-white" />
           </div>
-    
-          <div class="flex items-center w-full" :class="doesUserHavePasskeys ? 'justify-between' : 'justify-center' ">
-            <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >{{$t('use passkey')}}</p>
-            <Button
-              class="px-4 py-2 rounded border"
-              @click="onCancel"
-              :disabled="inProgress"
-            >{{ $t('Cancel') }}</Button>
+          <div id="mfaCode-label" class="af-2fa-totp-title-wrap">
+            <p v-if="customDialogTitle" class="af-2fa-custom-title text-xl text-center font-medium text-gray-900 dark:text-white">{{ customDialogTitle }}</p>
+            <p class="af-2fa-totp-subtitle text-xs text-center text-gray-500 dark:text-gray-400 mt-1">{{ $t('Please enter your authenticator code') }}</p>
           </div>
         </div>
-      </div>
-
 
+        <div class="af-2fa-otp-root flex justify-center" ref="otpRoot">
+          <v-otp-input
+            ref="confirmationResult"
+            container-class="grid grid-cols-6 gap-3"
+            input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            :num-inputs="6"
+            inputType="number"
+            inputmode="numeric"
+            :should-auto-focus="true"
+            :should-focus-order="true"
+            v-model:value="bindValue"
+            @on-complete="handleOnComplete"
+          />
+        </div>
+        <p v-if="doesUserHavePasskeys" class="af-2fa-totp-footer text-center text-xs text-gray-500 dark:text-gray-400">
+          {{$t('Having trouble?')}}
+          <button type="button" class="af-2fa-switch-to-passkey text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="modalMode = 'passkey'">{{$t('Use passkey instead')}}</button>
+        </p>
+        <p class="af-2fa-multiple-actions text-center text-red-500 text-xs" v-if="sessionsIdsToResolve.length > 1">
+          {{ $t('You are confirming {count} action | You are confirming {count} actions', sessionsIdsToResolve.length) }}
+        </p>
+      </div>
 
-      <div v-else-if="modalMode === 'passkey'" class="af-two-factor-modal-passkeys flex flex-col items-center justify-center py-4 gap-6 relative bg-white dark:bg-gray-700 rounded-lg shadow p-6">
+      <div v-else-if="modalMode === 'passkey'" class="af-two-factor-modal-passkeys flex flex-col gap-4 relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
         <button
           type="button"
-          class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+          class="af-2fa-close-btn text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
           @click="onCancel"
         >
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -47,24 +57,43 @@
           </svg>
           <span class="sr-only">{{$t('Close modal')}}</span>
         </button>
-        <IconShieldOutline class="af-2fa-shield-icon w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
-        <p class="text-4xl font-semibold mb-4 text:gray-900 dark:text-gray-200 ">{{$t('Passkey')}}</p>
-        <div class="mb-2 max-w-[300px] text:gray-900 dark:text-gray-200">
-          <p class="mb-2">{{customDialogTitle}} </p>
-          <p>{{$t('Authenticate yourself using the button below')}}</p>
-        </div>
-        <Button @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="w-full mx-16">
-          {{$t('Use passkey')}}
-        </Button>
-        <div v-if="modalMode === 'passkey'" class="af-2fa-passkey-issues-card  max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
-          <div class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-            <p>{{$t('Have issues with passkey?')}}</p>
-            <p class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'totp'" >{{$t('use TOTP')}}</p>
+
+        <div class="af-2fa-passkey-header flex flex-col items-center justify-center gap-3">
+          <div class="af-2fa-icon-wrap w-14 h-14 shrink-0 flex items-center justify-center rounded-full bg-lightPrimary dark:bg-darkPrimary">
+            <IconShieldOutline class="af-2fa-shield-icon w-7 h-7 text-white" />
+          </div>
+          <div class="af-2fa-passkey-title-wrap">
+            <p class="af-2fa-passkey-title text-xl text-center font-medium text-gray-900 dark:text-white">{{$t('Verify to add passkey')}}</p>
+            <p class="af-2fa-passkey-subtitle text-xs text-center text-gray-500 dark:text-gray-400 mt-1">{{$t("Confirm it's you before registering a new passkey on this device.")}}</p>
           </div>
         </div>
 
+        <div class="af-2fa-passkey-steps flex flex-col gap-2 mt-2">
+          <div
+            v-for="(step, i) in [
+              $t('Click the button below to begin'),
+              $t('Authenticate with your device biometrics or PIN'),
+              $t('Your passkey will be saved automatically'),
+            ]"
+            :key="i"
+            class="af-2fa-passkey-step flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-600/50 text-xs text-gray-600 dark:text-gray-300"
+          >
+            <span class="af-2fa-step-number shrink-0 w-5 h-5 flex items-center justify-center rounded-full bg-lightPrimary dark:bg-darkPrimary text-white font-semibold text-xs">{{ i + 1 }}</span>
+            {{ step }}
+          </div>
+        </div>
 
-
+        <Button @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn w-full flex items-center justify-center gap-2 mt-2">
+          <IconShieldOutline class="w-4 h-4" />
+          {{$t('Use passkey to verify')}}
+        </Button>
+        <p class="af-2fa-passkey-footer text-center text-xs text-gray-500 dark:text-gray-400">
+          {{$t('Having trouble?')}}
+          <button type="button" class="af-2fa-switch-to-totp text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="modalMode = 'totp'">{{$t('Use TOTP instead')}}</button>
+        </p>
+        <p class="af-2fa-multiple-actions text-center text-red-500 text-xs" v-if="sessionsIdsToResolve.length > 1">
+          {{ $t('You are confirming {count} action | You are confirming {count} actions', sessionsIdsToResolve.length) }}
+        </p>
       </div>
     </div>
   </template>
@@ -83,13 +112,15 @@
   import websocket from '@/websocket';
   import type { AdminUser } from '@/types/Common';
 
+  type TwoFaConfirmationResult = { mode: 'totp'; result: string } | { mode: 'passkey'; result: Record<string, any> };
+
   declare global {
     interface Window {
       adminforthTwoFaModal: {
         get2FaConfirmationResult: (
           title?: string,
           verifyingCallback?: (confirmationResult: string) => Promise<boolean>
-        ) => Promise<any>;
+        ) => Promise<TwoFaConfirmationResult>;
       };
     }
   }
@@ -100,40 +131,65 @@
 
   const { alert } = useAdminforth();
 
-  let currentSessionId: string | null = null;
+  const isAwaiting2FAResult = ref(false);
+  let allowAddNewSessions = true;
+  const ALLOW_NEW_SESSIONS_PERIOD = 1000;
+  const sessionsIdsToResolve = ref<string[]>([]);
+
+  watch(isAwaiting2FAResult, (awaiting) => {
+    if (awaiting) {
+      allowAddNewSessions = true;
+      setTimeout(() => {
+        if (isAwaiting2FAResult.value) {
+          allowAddNewSessions = false;
+        }
+      }, ALLOW_NEW_SESSIONS_PERIOD);
+    }
+  });
+  
   watch( props, () => {
     if (props.adminUser) {
       websocket.unsubscribeByPrefix(`/user2fa/`);
       websocket.subscribe(`/user2fa/${props.adminUser.pk}`, async (data: {sessionId: string}) => {
-        currentSessionId = data.sessionId;
+        if (!allowAddNewSessions) {
+          alert({message: t('Some process or user tries to add new actions to confirm. Action was blocked'), variant: 'warning'});
+          return;
+        }
+        sessionsIdsToResolve.value.push(data.sessionId);
         let confirmationResult;
+        if (isAwaiting2FAResult.value) {
+          return;
+        }
         try {
+          isAwaiting2FAResult.value = true;
           confirmationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
         } catch (error) {
-          console.error('Error during 2FA confirmation:', error);
+          console.error(t('Error during 2FA confirmation:', error));
         }
+        isAwaiting2FAResult.value = false;
         try {
           const response = await callAdminForthApi({
             method: "POST",
             path: "/plugin/passkeys/resolveVerifyAuto",
-            body: { confirmationResult, sessionId: data.sessionId }
+            body: { confirmationResult, sessionsIds: sessionsIdsToResolve.value }
           });
           if (!response.ok && response.error === 'No session ID or confirmation result'){
-            alert({message: 'Verification session finished or cancelled.', variant: 'warning'});
+            alert({message: t('Verification session finished or cancelled.'), variant: 'warning'});
           } else if (!response.ok) {
-            alert({message: 'Verification failed', variant: 'danger'});
+            alert({message: response.error || t('Verification failed'), variant: 'danger'}); 
           } else if (response.ok) {
-            alert({message: 'Verification successful', variant: 'success'});
+            // alert({message: 'Verification successful', variant: 'success'});
           }
+          sessionsIdsToResolve.value = [];
         } catch (error) {
-          console.error('Error resolving automatic 2FA verification:', error);
+          console.error(t('Error resolving automatic 2FA verification:', error));
         }
-        currentSessionId = null;
+        allowAddNewSessions = true;
       });
       websocket.subscribe(`/user2fa/${props.adminUser.pk}-resolve`, async (data: {sessionId: string}) => {
-        if (currentSessionId === data.sessionId && rejectFn && modelShow.value) {
+        if (sessionsIdsToResolve.value.includes(data.sessionId) && rejectFn && modelShow.value) {
           onCancel();
-          currentSessionId = null;
+          sessionsIdsToResolve.value = sessionsIdsToResolve.value.filter(id => id !== data.sessionId);
         }
       });
     }
@@ -174,7 +230,7 @@
   window.adminforthTwoFaModal = {
     get2FaConfirmationResult: (title?: string, verifyingCallback?: (confirmationResult: string) => Promise<boolean>) =>
       new Promise(async (resolve, reject) => {
-      if (modelShow.value) throw new Error('Modal is already open');
+      if (modelShow.value) throw new Error(t('Modal is already open'));
       const skipAllowModal = await checkIfSkipAllowModal();
       if (skipAllowModal) {
         resolve({ code: "123456" }); // dummy code
@@ -251,12 +307,12 @@
   }
   
   async function sendConfirmationResult(value: string) {
-    if (!resolveFn) throw new Error('Modal is not initialized properly');
+    if (!resolveFn) throw new Error(t('Modal is not initialized properly'));
     if (verifyFn) {
       try {
         const ok = await verifyFn(value);
         if (!ok) {
-          rejectFn?.(new Error('Invalid code'));
+          rejectFn?.(new Error(t('Invalid code')));
           return;
         }
       } catch (err) {
@@ -341,7 +397,7 @@
         }
       }
     } catch (error) {
-      console.error('Error checking passkeys:', error);
+      console.error(t('Error checking passkeys:', error));
       // Fallback to TOTP if there's an error
       doesUserHavePasskeys.value = false;
       modalMode.value = "totp";
@@ -403,7 +459,7 @@
         return false;
       }
     } catch (error) {
-      console.error('Error checking skip allow modal:', error);
+      console.error(t('Error checking skip allow modal:', error));
       return false;
     }
   }
diff --git a/custom/TwoFactorsConfirmation.vue b/custom/TwoFactorsConfirmation.vue
index 1331b86..6ee075f 100644
--- a/custom/TwoFactorsConfirmation.vue
+++ b/custom/TwoFactorsConfirmation.vue
@@ -7,73 +7,83 @@
       'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
     }: {}"
   >
-
-  <div v-if="isLoading===false" id="authentication-modal" tabindex="-1" class="af-two-factors-confirmation overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
-    <div class="relative p-4 w-full max-w-md max-h-full">
-        <!-- Modal content -->
-        <div class="af-login-popup relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" :class="codeError ? 'rounded-b-none' : ''">
-            <div class="p-8 w-full max-w-md max-h-full custom-auth-wrapper" >
-              <div v-if="confirmationMode === 'code'" class="af-totp-confirmation">
-                <div id="mfaCode-label" class="mx-4">{{$t('Please enter your authenticator code')}} </div>
-                <div class="mt-4 w-full flex flex-col gap-4 justify-center" ref="otpRoot">
-                  <v-otp-input
-                    ref="code"
-                    container-class="grid grid-cols-6 gap-3 w-full"
-                    input-classes="bg-gray-50 text-center justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    :num-inputs="6"
-                    inputType="number"
-                    inputmode="numeric"
-                    :should-auto-focus="true"
-                    :should-focus-order="true"
-                    v-model:value="bindValue"
-                    @on-complete="handleOnComplete"
-                  />
-                  <div class="flex items-center justify-between w-full">
-                    <Link v-if="confirmationMode === 'code' && doesUserHavePasskeys" :to="{ hash: '#passkey' }" class="w-max underline hover:no-underline hover:cursor-pointer text-lightPrimary whitespace-nowrap">{{$t('Use passkey')}}</Link>
-                    <Link
-                      v-if="confirmationMode === 'code'"
-                      to="/login"
-                      class="w-max"
-                    >
-                      {{$t('Back to login')}}
-                    </Link>
-                  </div>
-                </div>
-              </div>
-              <div v-else class="af-passkey-confirmation flex flex-col items-center justify-center py-4 gap-6">
-                <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
-                <p class="text-4xl font-semibold mb-4">{{$t('Passkey')}}</p>
-                <p class="mb-2 max-w-[300px]">{{$t('When you are ready, authenticate using the button below')}}</p>
-                <Button @click="usePasskeyButton" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="w-full mx-16">
-                  {{$t('Use passkey')}}
-                </Button>
-                <div v-if="confirmationMode === 'passkey'" class="max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
-                  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-                    {{$t('Have issues with passkey?')}}
-                    <div v-if="doesUserHavePasskeys" class="flex justify-start cursor-pointer gap-2" >
-                      <Link v-if="confirmationMode === 'passkey'" :to="{ hash: '#code' }" class="underline hover:no-underline text-lightPrimary whitespace-nowrap">{{$t('use TOTP')}}</Link>
-                      <p> {{$t('or')}}</p>
-                      <Link
-                        to="/login"
-                        class="w-full"
-                      >
-                        {{$t('back to login')}}
-                      </Link> 
-                    </div>
-                  </p>
-                </div>
-              </div>
+    <div v-if="isLoading===false" id="authentication-modal" class="af-two-factors-confirmation flex items-center justify-center w-full p-4">
+      <div class="relative w-full max-w-md">
+        
+        <div class="af-login-popup relative bg-white dark:bg-gray-700 rounded-lg shadow p-6" :class="codeError ? 'rounded-b-none' : ''">
+          
+          <div class="af-2fa-header flex flex-col items-center justify-center gap-3 mb-6">
+            <div class="af-2fa-icon-wrap w-14 h-14 shrink-0 flex items-center justify-center rounded-full bg-lightPrimary dark:bg-darkPrimary">
+              <IconShieldOutline class="af-2fa-shield-icon w-7 h-7 text-white" />
+            </div>
+            <div class="af-2fa-title-wrap text-center">
+              <p class="text-xl font-medium text-gray-900 dark:text-white">
+                {{ confirmationMode === 'code' ? $t('Two-factor Auth') : $t('Passkey') }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                {{ confirmationMode === 'code' 
+                   ? $t('Please enter your authenticator code') 
+                   : $t('When you are ready, authenticate using the button below') 
+                }}
+              </p>
+            </div>
+          </div>
+
+          <div v-if="confirmationMode === 'code'" class="af-2fa-otp-root flex flex-col items-center gap-6" ref="otpRoot">
+            <v-otp-input
+              ref="code"
+              container-class="grid grid-cols-6 gap-3"
+              input-classes="bg-gray-50 text-center flex justify-center otp-input border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+              :num-inputs="6"
+              inputType="number"
+              inputmode="numeric"
+              :should-auto-focus="true"
+              v-model:value="bindValue"
+              @on-complete="handleOnComplete"
+            />
+
+            <div class="af-2fa-footer text-center text-xs text-gray-500 dark:text-gray-400">
+              <p>
+                {{$t('Having trouble?')}}
+                <button v-if="doesUserHavePasskeys" type="button" 
+                  class="hover-link bg-transparent text-[#16537E] border-none p-0 cursor-pointer ml-1" 
+                  @click="router.push({ hash: '#passkey' })">
+                  {{$t('Use passkey instead')}}
+                </button>
+                <span v-if="doesUserHavePasskeys" class="mx-1">{{$t('or')}}</span>
+                <Link to="/login" class="hover-link">
+                  {{$t('Back to login')}}
+                </Link>
+              </p>
             </div>
+          </div>
+
+          <div v-else class="af-2fa-passkey-root flex flex-col gap-6">
+            <Button @click="usePasskeyButton" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn w-full flex items-center justify-center gap-2">
+              <IconShieldOutline class="w-4 h-4" />
+              {{$t('Use passkey to verify')}}
+            </Button>
+
+            <div class="af-2fa-footer text-center text-xs text-gray-500 dark:text-gray-400">
+              <p>
+                {{$t('Having trouble?')}}
+                <button type="button" 
+                  class="hover-link bg-transparent text-[#16537E] border-none p-0 cursor-pointer ml-1" 
+                  @click="router.push({ hash: '#code' })">
+                  {{$t('Use TOTP instead')}}
+                </button>
+                <span class="mx-1">{{$t('or')}}</span>
+                <Link to="/login" class="hover-link">
+                  {{$t('Back to login')}}
+                </Link>
+              </p>
+            </div>
+          </div>
         </div>
-        <div
-          v-if="codeError"
-          class="af-two-factors-confirmation-error relative top-full left-0 bg-red-100 text-red-700 text-sm px-2 py-2 rounded-b-lg shadow"
-        >
-          <p class="pl-6">{{ codeError }} </p>
+
+        <div v-if="codeError" class="af-two-factors-confirmation-error relative bg-red-100 text-red-700 text-xs px-4 py-2 rounded-b-lg shadow border-t border-red-200 text-center">
+          {{ codeError }}
         </div>
-        <div v-else class="h-[36px] opacity-0">
-          
-        </div>   
       </div>
     </div>
     <div v-else>
@@ -299,7 +309,7 @@
         }
       });
     } catch (error) {
-      console.error('Error checking if user has passkeys:', error);
+      console.error(t('Error checking if user has passkeys:', error));
     }
   }
 
@@ -319,7 +329,7 @@
       options = PublicKeyCredential.parseRequestOptionsFromJSON(_options);
     } catch (e) {
       console.error('Error parsing request options:', e);
-      adminforth.alert({message: t('Error initiating passkey authentication.'), variant: 'warning'});
+      adminforth.alert({message: t('Error initiating passkey authentication.'), variant: 'danger'});
       return;
     }
     const credential = await authenticate(options);
@@ -345,13 +355,13 @@
         method: 'POST',
       });
     } catch (error) {
-      console.error('Error creating sign-in request:', error);
+      console.error(t('Error creating sign-in request:', error));
       return;
     }
     if (response.ok === true) {
       return { _options: response.data, challengeId: response.challengeId };
     } else {
-      adminforth.alert({message: t('Error creating sign-in request.'), variant: 'warning'});
+      adminforth.alert({message: t('Error creating sign-in request.'), variant: 'danger'});
       codeError.value = 'Error creating sign-in request.';
     }
   }
@@ -378,7 +388,7 @@
       });
       return credential;
     } catch (error) {
-      console.error('Error during authentication:', error);
+      console.error(t('Error during authentication:', error));
       // Handle specific concurrent/pending request error cases gracefully
       const name = (error && (error.name || error.constructor?.name)) || '';
       const message = (error && error.message) || '';
@@ -390,7 +400,7 @@
         codeError.value = t('A previous passkey attempt was still pending. Please try again.');
         return null;
       } else if (name === 'NotAllowedError') {
-        adminforth.alert({ message: t('The operation either timed out or was not allowed'), variant: 'warning' });
+        adminforth.alert({ message: t('The operation either timed out or was not allowed'), variant: 'danger' });
         codeError.value = t('The operation either timed out or was not allowed.');
         return null;
       } else {
@@ -477,5 +487,26 @@
                 @apply ml-4;
             }
         }
-    }  
+    } 
+
+    :deep(.otp-input-container) {
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    .hover-link {
+      text-decoration: none !important;
+      display: inline-block;
+      width: fit-content;
+      margin: 0 auto;
+
+      &:hover {
+        text-decoration: underline !important;
+      }
+    }
+
+    button.hover-link {
+      font-family: inherit;
+      font-size: inherit;
+    }
   </style>
diff --git a/custom/TwoFactorsPasskeysSettings.vue b/custom/TwoFactorsPasskeysSettings.vue
index 162a5de..13ad133 100644
--- a/custom/TwoFactorsPasskeysSettings.vue
+++ b/custom/TwoFactorsPasskeysSettings.vue
@@ -1,421 +1,342 @@
 <template>
-    <div class="text-3xl text-lightBreadcrumbsText dark:text-darkBreadcrumbsText font-semibold max-w-2xl mr-6 flex-col justify-center items-center">
-        <p class="flex items-start justify-start leading-none">{{$t('Passkeys')}}</p>
-        <div class="flex flex-col items-end">
-            <Table
-            class="mt-4 w-full"
-                :columns="[
-                    { label: 'Passkey name', fieldName: 'name' },
-                    { label: 'Last used', fieldName: 'last_used_at' },
-                    { label: 'Actions', fieldName: 'actions'}
-                ]"
-                :data="passkeys"
+    <div class="af-passkeys flex flex-col justify-center mr-6 md:mr-12">
+        <h2 class="af-passkeys-title flex items-start justify-start leading-none text-gray-800 dark:text-gray-50 text-3xl font-semibold">{{$t('Passkeys')}}</h2>
+        <p class="af-passkeys-subtitle text-sm mt-3"> {{$t('Manage your passwordless authentication methods')}} </p>
+
+        <div class="af-passkeys-grid mt-6 flex flex-wrap gap-4">
+            <div
+                v-for="item in passkeys"
+                :key="item.id"
+                class="af-passkey-card flex flex-col w-full h-42 lg:w-72 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 shadow-sm"
             >
-            <template #cell:name="{item}">
-                <div class="flex items-center justify-start space-x-2">
-                    <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
-                    <p>{{ item.name }}</p>
+                <div class="af-passkey-card-header flex items-center gap-3 mb-3">
+                    <div class="af-passkey-card-icon w-10 h-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-lg shrink-0">
+                        <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
+                    </div>
+                    <div class="af-passkey-card-info flex-1 min-w-0">
+                        <p class="af-passkey-card-name font-semibold text-gray-900 dark:text-white truncate" :title="item.name">{{ item.name }}</p>
+                        <p class="af-passkey-card-type text-xs text-gray-500 dark:text-gray-400">{{$t('Synced passkey')}}</p>
+                    </div>
+                    <span class="af-passkey-card-badge shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                        {{$t('Active')}}
+                    </span>
                 </div>
-            </template>
-            <template #cell:actions="{item}">
-                <div class="flex items-center justify-start space-x-2">
-                    <Dialog 
+
+                <div class="af-passkey-card-last-used text-xs text-gray-500 dark:text-gray-400 mb-4">
+                    <span class="af-passkey-card-last-used-label font-medium">{{$t('Last used')}}:</span>
+                    <span v-if="item.last_used_at" class="af-passkey-card-last-used-date ml-1">{{ formatDateTime(item.last_used_at) }}</span>
+                    <span v-else class="af-passkey-card-last-used-never ml-1 italic">{{$t('Never')}}</span>
+                </div>
+
+                <div class="af-passkey-card-actions grid grid-cols-2 gap-2 mt-auto">
+                    <Dialog
                         class="edit-passkey-confirmation-dialog w-96"
                         :buttons="[
-                            { label: 'Save', options: { class: 'dialog-save-button' }, onclick: (dialog) => { renamePasskey(item.id, passkeysNewName); dialog.hide(); } },
-                            { label: 'Cancel', options: { class: 'dialog-cancel-button' }, onclick: (dialog) => {passkeysNewName = ''; dialog.hide();} },
+                            { label: 'Cancel', options: { class: 'dialog-cancel-button w-full' }, onclick: (dialog) => { passkeysNewName = ''; dialog.hide(); } },
+                            { label: 'Save', options: { class: 'dialog-save-button w-full' }, onclick: (dialog) => { renamePasskey(item.id, passkeysNewName); dialog.hide(); } },
                         ]"
                         header="Edit Passkey"
                     >
                         <template #trigger>
-                            <Tooltip>
-                                <div 
-                                    @click="passkeysNewName = ''"
-                                    class="w-7 h-7 flex items-center justify-center rounded-md text-blue-500 hover:text-blue-700 cursor-pointer"
-                                >
-                                    <IconPenSolid class="w-5 h-5" />
-                                </div>
-
-                                <template #tooltip>
-                                    {{$t('Rename passkey')}}
-                                </template>
-                            </Tooltip>
+                            <button
+                                @click="passkeysNewName = ''"
+                                class="af-passkey-btn-rename w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                            >
+                                <IconPenSolid class="w-3.5 h-3.5" />
+                                {{$t('Rename')}}
+                            </button>
                         </template>
-                        <div>
-                            <p>{{$t('Enter new passkey name:')}}</p>
-                            <input 
-                                v-model="passkeysNewName" 
-                                type="text" 
-                                class="w-full mt-2 p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-gray-500 dark:bg-gray-800"
-                                placeholder="Enter new passkey name"
+                        <div class="flex flex-col gap-2">
+                            <label class="text-sm font-medium">{{$t('Current name:')}}</label>
+                            <p class="font-medium text-sm text-gray-900 dark:text-white pb-2 truncate" :title="item.name">{{ item.name }}</p>
+                            <label class="text-sm font-medium">{{$t('Enter new passkey name:')}}</label>
+                            <Input
+                                v-model="passkeysNewName"
+                                type="text"
+                                class="w-full"
+                                :placeholder="$t('New name')"
                             />
                         </div>
                     </Dialog>
-                    <Dialog 
-                        class="delete-passkey-confirmation-dialog w-96"
-                        :buttons="[
-                            { label: 'Delete', options: {class: 'dialog-delete-button'}, onclick: (dialog) => { deletePasskey(item.id); dialog.hide(); } },
-                            { label: 'Cancel', options: {class: 'dialog-cancel-button'}, onclick: (dialog) => dialog.hide() },
-                        ]"
-                        header="Delete Passkey"
-                    >
-                        <template #trigger>
-                            <Tooltip>
-                                <div class="w-7 h-7 flex items-center justify-center rounded-md text-red-500 hover:text-red-700 cursor-pointer">
-                                    <IconTrashBinSolid 
-                                        class="w-5 h-5" 
-                                    />
-                                </div>
-                                <template #tooltip>
-                                    {{$t('Delete passkey')}}
-                                </template>
-                            </Tooltip>
-                        </template>
-                        <div>
-                            <p>{{$t('Are you sure you want to delete this passkey?')}}</p>
-                        </div>
-                    </Dialog>
-                </div>  
-            </template>
-            <template #cell:last_used_at="{item}">
-                <span v-if="item.last_used_at">{{ formatDateTime(item.last_used_at) }}</span>
-                <span v-else class="text-gray-400">{{$t('Never')}}</span>
-            </template>
-            </Table>
-            <div class="flex space-x-4 mt-4" v-if="isInitialFinished">
-                <ButtonGroup :solidColor="true" v-if="isFetchingPasskey === false">
-                    <template #button:Profile>
-                        <div class="flex px-4 py-2" @click="addPasskeyStartAction()">
-                            <IconPlusOutline class="w-5 h-5 me-2"/>
-                            <p>{{ addPasskeyMode === 'platform' ? 'Add Local Passkey' : 'Add External Passkey' }}</p>
-                        </div>
-                    </template>
-                    <template #button:Dropdown v-if="authenticatorAttachment === 'both'">
-                        <div id="dropdown-button" class="flex px-2 py-2" @click="isCardsVisible = !isCardsVisible">
-                            <IconCaretDownSolid class="w-5 h-5"/>
-                        </div>
-                    </template>
-                </ButtonGroup>
-                <p v-else class="flex items-center justify-center gap-2 text-base">{{$t('Processing')}} <Spinner class="w-4 h-4 inline-block" /></p>
-            </div> 
-            <div v-if="isCardsVisible" id="cards-container" class="w-80 mt-2 border-gray-400 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col space-y-2">
-                <div v-if="isPasskeySupported" class="flex justify-between gap-4" :class="!isPasskeySupported ? 'opacity-50 pointer-events-none' : ''">
-                    <div class="shrink-0 mt-1 w-4 h-4 z-10"><IconCheckOutline v-if="addPasskeyMode === 'platform'"/></div>
-                    <Card
-                        @click="addPasskeyMode = 'platform'; isCardsVisible = false;"
-                        class="h-20"
-                        title="Use this device"
-                        size="sm"
-                        description="Create a passkey using the built-in authenticator on this device."
-                        hideBorder="true"
+
+                    <button
+                        @click="confirmAndDelete(item.id)"
+                        class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors cursor-pointer"
                     >
-                    </Card>
+                        <IconTrashBinSolid class="w-3.5 h-3.5" />
+                        {{$t('Remove')}}
+                    </button>
                 </div>
-                <Tooltip v-else >
-                    <div class="flex justify-between gap-4" :class="!isPasskeySupported ? 'opacity-50 pointer-events-none' : ''">
-                        <div class="shrink-0 mt-1 w-4 h-4 z-10"><IconCheckOutline v-if="addPasskeyMode === 'platform'"/></div>
-                        <Card
-                            @click="addPasskeyMode = 'platform'; isCardsVisible = false;"
-                            class="h-20"
-                            title="Use this device"
-                            size="sm"
-                            description="Create a passkey using the built-in authenticator on this device."
-                            hideBorder="true"
-                        >
-                        </Card>
-                    </div>
+            </div>
 
+            <template v-if="isInitialFinished">
+                <Tooltip v-if="!isPasskeySupported && (authenticatorAttachment === 'platform' || authenticatorAttachment === 'both')">
+                    <div class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 w-full lg:w-72 min-h-36 opacity-50 pointer-events-none">
+                        <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                            <IconPlusOutline class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                        </div>
+                        <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</p>
+                        <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Register this device')}}</p>
+                    </div>
                     <template #tooltip>
                         <p class="max-w-64">{{$t('This browser or device is reporting partial passkey support.')}}</p>
                         <p class="max-w-64">{{$t('To fix it try to install extention or change browser.')}}</p>
                     </template>
                 </Tooltip>
-                <div class="border-t border-gray-300"></div>
-                <div class="flex justify-between gap-4">
-                    <div class="shrink-0 mt-1 w-4 h-4 z-10"><IconCheckOutline v-if="addPasskeyMode === 'cross-platform'"/></div>
-                    <Card
-                        @click="addPasskeyMode = 'cross-platform'; isCardsVisible = false;"
-                        size="sm"
-                        class="h-20"
-                        title="Use an external device"
-                        description="Create a passkey using a phone, tablet or an external security key."
-                        hideBorder="true"
-                    >
-                    </Card>
+
+                <div
+                    v-else-if="authenticatorAttachment === 'platform' || authenticatorAttachment === 'both'"
+                    @click="addLocalPasskey"
+                    class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors w-full lg:w-72 min-h-36"
+                    :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
+                >
+                    <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                        <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'platform'" class="w-5 h-5" />
+                        <IconPlusOutline v-else class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                    </div>
+                    <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</p>
+                    <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Register this device')}}</p>
                 </div>
-            </div>
-        </div>
-        <Dialog 
-            ref="confirmDialog" 
-            class="add-passkey-confirmation-dialog w-96" 
-            :click-to-close-outside="false"   
-            :buttons="[]"
-            :closable="false"
-        >
-            <div class="flex flex-col">
-                <button
-                type="button"
-                class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
-                @click="{ isFetchingPasskey = false; fetchedOptions = null; closeDialog(); }"
+
+                <div
+                    v-if="authenticatorAttachment === 'cross-platform' || authenticatorAttachment === 'both'"
+                    @click="addCrossDevicePasskey"
+                    class="af-passkey-add-card af-passkey-add-cross flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 hover:bg-purple-50/50 dark:hover:bg-purple-900/10 transition-colors w-full lg:w-72 min-h-36"
+                    :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
                 >
-                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                    </svg>
-                    <span class="sr-only">{{$t('Close dialog')}}</span>
-                </button>
-                <div class="flex items-center justify-center space-y-4">
-                    {{$t('Now you can add a passkey.')}}
+                    <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                        <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'cross-platform'" class="w-5 h-5" />
+                        <IconPlusOutline v-else class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                    </div>
+                    <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add cross-device')}}</p>
+                    <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Use phone or security key')}}</p>
                 </div>
-                <Button class="mt-4" @click="addPasskeyFinishAction(fetchedOptions); closeDialog();">{{$t('Add Passkey')}}</Button>
-            </div>
-        </Dialog>
+            </template>
+        </div>
+
+        <div class="af-passkeys-info mt-6 flex items-center gap-2 px-4 py-3 bg-blue-50 w-full md:w-fit dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-xl text-sm text-blue-700 dark:text-blue-300">
+            <IconInfoCircleOutline class="af-passkeys-info-icon w-4 h-4 shrink-0" />
+            <span class="af-passkeys-info-text">{{$t('Passkeys are a more secure alternative to passwords. They use your device\'s biometrics or PIN and are resistant to phishing attacks.')}}</span>
+        </div>
+
     </div>
 </template>
 
-<script setup lang="ts"> 
-    import { Table } from '@/afcl'
+<script setup lang="ts">
     import { callAdminForthApi } from '@/utils';
-    import adminforth from '@/adminforth';
-    import { onMounted, ref, Ref, onBeforeUnmount } from 'vue';
-    import { Card, Dialog, ButtonGroup, Tooltip, Spinner, Button } from '@/afcl'
-    import { IconTrashBinSolid, IconPenSolid, IconPlusOutline, IconCaretDownSolid, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+    import adminforth, { useAdminforth } from '@/adminforth';
+    import { onMounted, ref, Ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { Dialog, Tooltip, Spinner, Input } from '@/afcl';
+    import { IconTrashBinSolid, IconPenSolid, IconPlusOutline, IconInfoCircleOutline } from '@iconify-prerendered/vue-flowbite';
     import dayjs from 'dayjs';
     import utc from 'dayjs/plugin/utc';
     import timezone from 'dayjs/plugin/timezone';
     import { useCoreStore } from '@/stores/core';
 
+    const { t } = useI18n();
     dayjs.extend(utc);
     dayjs.extend(timezone);
     const coreStore = useCoreStore();
-    const passkeys = ref([]);
+
+    interface Passkey {
+        id: string;
+        name: string;
+        light_icon: string;
+        dark_icon: string;
+        last_used_at: string | null;
+    }
+    const passkeys = ref<Passkey[]>([]);
     const isPasskeySupported = ref(false);
     const passkeysNewName = ref('');
-    const isCardsVisible = ref(false);
     const addPasskeyMode: Ref<'platform' | 'cross-platform'> = ref('platform');
     const authenticatorAttachment = ref<'platform' | 'cross-platform' | 'both'>('platform');
     const isInitialFinished = ref(false);
     const isFetchingPasskey = ref(false);
 
-    const confirmDialog = ref(null);
-
-    const openDialog = () => {
-        confirmDialog.value.open();
-    }
-
-    const closeDialog = () => {
-        confirmDialog.value.close();
-    }
-
-    const fetchedOptions = ref(null);
-
     onMounted(async () => {
         await getPasskeys();
-        await checkForCompatibility();
-        if (authenticatorAttachment.value === "cross-platform") {
+        await checkPlatformSupport();
+        if (authenticatorAttachment.value === 'cross-platform') {
             addPasskeyMode.value = 'cross-platform';
-        }   
+        }
         isInitialFinished.value = true;
     });
 
-    onMounted(() => {
-        document.addEventListener('click', handleClickOutside);
-    });
-
-    onBeforeUnmount(() => {
-        document.removeEventListener('click', handleClickOutside);
-    });
-
-    function handleClickOutside(event: MouseEvent) {
-        const cards = document.getElementById('cards-container');
-        const dropdownButton = document.getElementById('dropdown-button');
+    function addLocalPasskey() {
+        addPasskeyMode.value = 'platform';
+        startAddPasskey();
+    }
 
-        if (!cards?.contains(event.target as Node) && !dropdownButton?.contains(event.target as Node)) {
-            isCardsVisible.value = false;
-        }
+    function addCrossDevicePasskey() {
+        addPasskeyMode.value = 'cross-platform';
+        startAddPasskey();
     }
 
-    async function addPasskeyStartAction() {
+    async function startAddPasskey() {
         isFetchingPasskey.value = true;
-        let confirmationResult;
         try {
-            confirmationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult("To add passkey first verify yourself");
-        } catch (e) {
-            isFetchingPasskey.value = false;
-            return;
-        }
-        if (!confirmationResult) {
-            isFetchingPasskey.value = false;
-            return;
-        }
-        const { options } = await fetchInformationFromTheBackend(confirmationResult);
-        if (!options ) {
+            const confirmationResult = await window.adminforthTwoFaModal
+                .get2FaConfirmationResult(t('To add passkey first verify yourself'));
+
+            if (!confirmationResult) return;
+
+            const { options, error } = await requestPasskeyChallenge(confirmationResult);
+            if (!options) {
+                adminforth.alert({ message: error ?? t('Verification failed.'), variant: 'warning' });
+                return;
+            }
+
+            await finishAddPasskey(options);
+        } catch {
+            // user cancelled 2FA dialog
+        } finally {
             isFetchingPasskey.value = false;
-            adminforth.alert({message: 'Verification failed.', variant: 'warning'});
-            return;
         }
-        fetchedOptions.value = options;
-        openDialog();
     }
 
-    async function addPasskeyFinishAction(options) {
-        const creationResult = await callWebAuthn(options);
-        if (!creationResult) {
-            isFetchingPasskey.value = false;
-            fetchedOptions.value = null;
-            return;
-        }
-        fetchedOptions.value = null;
-        finishRegisteringPasskey(creationResult);
-        isFetchingPasskey.value = false;
+    async function finishAddPasskey(options: PublicKeyCredentialCreationOptions) {
+        const credential = await createWebAuthnCredential(options);
+        if (!credential) return;
+        await registerPasskey(credential);
     }
 
     async function getPasskeys() {
         try {
             const response = await callAdminForthApi({
-                path: `/plugin/passkeys/getPasskeys`,
+                path: '/plugin/passkeys/getPasskeys',
                 method: 'GET',
             });
             passkeys.value = response.data;
             authenticatorAttachment.value = response.authenticatorAttachment;
         } catch (error) {
-            console.error('Error fetching passkeys:', error);
-            if ( coreStore.adminUser.username ) {
-                adminforth.alert({message: 'Error fetching passkeys.', variant: 'warning'});
+            console.error(t('Error fetching passkeys:'), error);
+            if (coreStore.adminUser?.username) {
+                adminforth.alert({ message: t('Error fetching passkeys.'), variant: 'warning' });
             }
         }
     }
 
-    async function deletePasskey(passkeyId: string) {
-        let response;
+    type ConfirmationResult = { mode: 'totp'; result: string } | { mode: 'passkey'; result: Record<string, any> };
+
+    async function requestPasskeyChallenge(confirmationResult: ConfirmationResult) {
         try {
-            response = await callAdminForthApi({
-                path: `/plugin/passkeys/deletePasskey`,
-                method: 'DELETE',
-                body: {
-                    passkeyId: passkeyId
-                }
-            })
+            const response = await callAdminForthApi({
+                path: '/plugin/passkeys/registerPasskeyRequest',
+                method: 'POST',
+                body: { mode: addPasskeyMode.value, confirmationResult },
+            });
+            if (!response.ok) return { error: response.error ?? t('Verification failed') };
+            const options = PublicKeyCredential.parseCreationOptionsFromJSON(response.data);
+            return { options, challengeId: response.challengeId };
         } catch (error) {
-            console.error('Error deleting passkey:', error);
-            adminforth.alert({message: 'Error deleting passkey.', variant: 'warning'});
-        }
-        if (response.ok === true) {
-            adminforth.alert({message: 'Passkey deleted successfully!', variant: 'success'});
-            getPasskeys();
-        } else {
-            console.error('Error deleting passkey:', response?.error);
-            adminforth.alert({message: 'Error deleting passkey.', variant: 'warning'});
+            console.error(t('Error requesting passkey challenge:', error));
+            return { error: t('Failed to request passkey challenge' )};
         }
     }
 
-    async function renamePasskey(passkeyId: string, name: string) {
-        let response;
+    async function createWebAuthnCredential(options: PublicKeyCredentialCreationOptions) {
         try {
-            response = await callAdminForthApi({ 
-                path: `/plugin/passkeys/renamePasskey`,
-                method: 'POST',
-                body: {
-                    passkeyId: passkeyId,
-                    newName: name
-                }
-             })
+            const credential = await navigator.credentials.create({ publicKey: options });
+            return JSON.stringify((credential as PublicKeyCredential).toJSON());
         } catch (error) {
-            console.error('Error updating passkey:', error);
-            adminforth.alert({message: 'Error updating passkey.', variant: 'warning'});
-        }
-        if (response.ok === true) {
-            adminforth.alert({message: 'Passkey updated successfully!', variant: 'success'});
-            getPasskeys();
-        } else {
-            console.error('Error updating passkey:', response.error);
-            adminforth.alert({message: 'Error updating passkey.', variant: 'warning'});
+            console.error(t('Error creating WebAuthn credential:', error));
+            adminforth.alert({ message: t('Error creating passkey.'), variant: 'warning' });
+            return null;
         }
     }
 
-    function checkForCompatibility() {
-        if (window.PublicKeyCredential &&  
-            PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&  
-            PublicKeyCredential.isConditionalMediationAvailable) {  
-        Promise.all([  
-            PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),  
-            PublicKeyCredential.isConditionalMediationAvailable(),  
-        ]).then(results => {  
-            if (results.every(r => r === true)) {  
-                isPasskeySupported.value = true;
-            } else {  
-                isPasskeySupported.value = false;
-                addPasskeyMode.value = 'cross-platform';
-            }  
-        });  
-        }  
-    } 
-    
-    async function fetchInformationFromTheBackend(confirmationResult) {
-        let response;
+    async function registerPasskey(credential: string) {
         try {
-            response = await callAdminForthApi({
-                path: `/plugin/passkeys/registerPasskeyRequest`,
+            const res = await callAdminForthApi({
+                path: '/plugin/passkeys/finishRegisteringPasskey',
                 method: 'POST',
-                body: {
-                    mode: addPasskeyMode.value,
-                    confirmationResult: confirmationResult
-                },
+                body: { credential, origin: window.location.origin },
             });
+            if (res.ok) {
+                adminforth.alert({ message: t('Passkey registered successfully!'), variant: 'success' });
+                getPasskeys();
+            } else {
+                adminforth.alert({ message: t('Error registering passkey.'), variant: 'warning' });
+            }
         } catch (error) {
-            console.error('Error fetching passkeys info:', error);
-            return;
-        }
-        if (!response.ok) {
-            return {};
+            console.error(t('Error registering passkey:', error));
         }
-        const _options = response.data;
-        const challengeId = response.challengeId;
-        const options = PublicKeyCredential.parseCreationOptionsFromJSON(_options);
-        return { options, challengeId };
     }
 
-    async function callWebAuthn(options: any) {
-        let credential;
+    async function confirmAndDelete(passkeyId: string) {
+        const { confirm } = useAdminforth();
+        const confirmed = await confirm({
+            title: t('Remove passkey'),
+            message: t('Are you sure you want to remove this passkey?'),
+            yes: t('Remove'),
+            no: t('Cancel'),
+        });
+        if (confirmed) deletePasskey(passkeyId);
+    }
+
+    async function deletePasskey(passkeyId: string) {
         try {
-            credential = await navigator.credentials.create({
-                publicKey: options
+            const response = await callAdminForthApi({
+                path: '/plugin/passkeys/deletePasskey',
+                method: 'DELETE',
+                body: { passkeyId },
             });
+            if (response.ok) {
+                adminforth.alert({ message: t('Passkey deleted successfully!'), variant: 'success' });
+                getPasskeys();
+            } else {
+                console.error(t('Error deleting passkey:', response?.error));
+                adminforth.alert({ message: t('Error deleting passkey.'), variant: 'warning' });
+            }
         } catch (error) {
-            console.error('Error creating credential:', error);
-            adminforth.alert({message: 'Error creating passkey.', variant: 'warning'});
-            return;
+            console.error(t('Error deleting passkey:', error));
+            adminforth.alert({ message: t('Error deleting passkey.'), variant: 'warning' });
         }
-        const _result = (credential as PublicKeyCredential).toJSON();
-        const result = JSON.stringify(_result);
-        return result;
     }
 
-    async function finishRegisteringPasskey(credential: any) {
-        let res 
+    async function renamePasskey(passkeyId: string, name: string) {
         try {
-            res = await callAdminForthApi({
-                path: `/plugin/passkeys/finishRegisteringPasskey`,
+            const response = await callAdminForthApi({
+                path: '/plugin/passkeys/renamePasskey',
                 method: 'POST',
-                body: {
-                    credential: credential,
-                    origin: window.location.origin,
-                },
+                body: { passkeyId, newName: name },
             });
+            if (response.ok) {
+                adminforth.alert({ message: t('Passkey updated successfully!'), variant: 'success' });
+                getPasskeys();
+            } else {
+                console.error(t('Error updating passkey:', response.error));
+                adminforth.alert({ message: t('Error updating passkey.'), variant: 'warning' });
+            }
         } catch (error) {
-            console.error('Error finishing registering passkey:', error);
+            console.error(t('Error updating passkey:', error));
+            adminforth.alert({ message: t('Error updating passkey.'), variant: 'warning' });
+        }
+    }
+
+    async function checkPlatformSupport() {
+        if (!window.PublicKeyCredential
+            || !PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable
+            || !PublicKeyCredential.isConditionalMediationAvailable) {
+            isPasskeySupported.value = false;
+            addPasskeyMode.value = 'cross-platform';
             return;
         }
-        if (res.ok === true) {
-            adminforth.alert({message: 'Passkey registered successfully!', variant: 'success'});
-            getPasskeys();
-        } else {
-            adminforth.alert({message: 'Error registering passkey.', variant: 'warning'});
+        const [platformOk, conditionalOk] = await Promise.all([
+            PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
+            PublicKeyCredential.isConditionalMediationAvailable(),
+        ]);
+        isPasskeySupported.value = platformOk && conditionalOk;
+        if (!isPasskeySupported.value) {
+            addPasskeyMode.value = 'cross-platform';
         }
     }
 
     function formatDateTime(date: string) {
         if (!date) return '';
-        return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');
+        const fmt = `${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss';
+        return dayjs.utc(date).local().format(fmt);
     }
 </script>
 
@@ -426,27 +347,10 @@
     color: white;
     border: 1px solid rgb(153, 27, 27);
  }
+ .dialog-delete-button.dialog-delete-button:hover { background-color: rgb(153, 27, 27); }
+ .dialog-delete-button.dialog-delete-button:active { background-color: rgb(127, 20, 20); }
 
- .dialog-delete-button.dialog-delete-button:hover {
-    background-color: rgb(153, 27, 27);
- }
-
- .dialog-delete-button.dialog-delete-button:active {
-    background-color: rgb(127, 20, 20);
- }
-
- /* Dark theme styles for delete button */
- .dark .dialog-delete-button.dialog-delete-button {
-    background-color: rgb(220, 38, 38);
-    color: white;
- }
-
- .dark .dialog-delete-button.dialog-delete-button:hover {
-    background-color: rgb(185, 28, 28);
- }
-
- .dark .dialog-delete-button.dialog-delete-button:active {
-    background-color: rgb(153, 27, 27);
- }
-
+ .dark .dialog-delete-button.dialog-delete-button { background-color: rgb(220, 38, 38); color: white; }
+ .dark .dialog-delete-button.dialog-delete-button:hover { background-color: rgb(185, 28, 28); }
+ .dark .dialog-delete-button.dialog-delete-button:active { background-color: rgb(153, 27, 27); }
 </style>
diff --git a/index.ts b/index.ts
index 2dd0a5e..dda0d29 100644
--- a/index.ts
+++ b/index.ts
@@ -143,9 +143,21 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
 
   private pending = new Map<string, (value: any) => void>();
 
-  private waitForResponse(id: string): Promise<any> {
+  private waitForResponse(id: string, timeoutMs: number): Promise<any> {
     return new Promise((resolve) => {
-      this.pending.set(id, resolve);
+      let timeout: ReturnType<typeof setTimeout>;
+      const cleanup = () => {
+        clearTimeout(timeout);
+        this.pending.delete(id);
+      };
+      timeout = setTimeout(() => {
+        cleanup();
+        resolve({ ok: false, error: 'Verification timed out' });
+      }, timeoutMs);
+      this.pending.set(id, (value: any) => {
+        cleanup();
+        resolve(value);
+      });
     });
   }
 
@@ -153,15 +165,20 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
     const resolve = this.pending.get(id);
     if (resolve) {
       resolve(data);
-      this.pending.delete(id);
     }
   }
 
   public async verifyAuto(adminUser: AdminUser) {
     const sessionId = crypto.randomUUID();
-    this.adminforth.websocket.publish(`/user2fa/${adminUser.pk}`, { sessionId });
-    const result = await this.waitForResponse(sessionId);
-    this.adminforth.websocket.publish(`/user2fa/${adminUser.pk}-resolve`, { sessionId });
+    const jwt = this.adminforth.auth.issueJWT({sessionId, adminUserPk: adminUser.pk}, 'auto2FA', '5m');
+    const resultPromise = this.waitForResponse(jwt, 5 * 60 * 1000);
+
+    this.adminforth.websocket.publish(`/user2fa/${adminUser.pk}`, { sessionId: jwt });
+
+    const result = await resultPromise;
+
+    this.adminforth.websocket.publish(`/user2fa/${adminUser.pk}-resolve`, { sessionId: jwt });
+
     return result;
   }
 
@@ -790,8 +807,8 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             headers,
           } as HttpExtra
         });
-        if ( !verificationResult || !('ok' in verificationResult) ) {
-          return { ok: false, error: 'Verification failed' };
+        if (!verificationResult || !('ok' in verificationResult)) {
+          return { ok: false, error: 'error' in verificationResult ? verificationResult.error : 'Verification failed' };
         }
 
         const settingsOrigin = this.options.passkeys?.settings.expectedOrigin;
@@ -1080,12 +1097,31 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
       path: `/plugin/passkeys/resolveVerifyAuto`,
       noAuth: false,
       handler: async ({ body, adminUser, response, cookies, headers }) => {
-        const sessionId = body?.sessionId;
+        const sessionsIds = body?.sessionsIds;
         const confirmationResult = body?.confirmationResult;
-        if (!sessionId || !confirmationResult) {
-          this.resolveResponse(sessionId, { ok: false, error: 'No session ID or confirmation result' });
-          return { ok: false, error: 'No session ID or confirmation result' };
+        const idsToResolve = sessionsIds;
+
+        const resolveAllIdsAsFailed = (message) => {
+          for (const id of idsToResolve) {
+            this.resolveResponse(id, { ok: false, error: message });
+          }
+          return { ok: false, error: message };
         }
+
+        if (!(sessionsIds) || !confirmationResult) {
+          return(resolveAllIdsAsFailed('Confirmation window was closed or did not return required data'));
+        }
+
+        for (const id of idsToResolve) {
+          const validationResult = await this.adminforth.auth.verify(id, 'auto2FA', false);
+          if (!validationResult) {
+            return(resolveAllIdsAsFailed('Invalid session ID or confirmation result'));
+          }
+          if (validationResult.adminUserPk !== adminUser.pk) {
+            return(resolveAllIdsAsFailed('Session does not belong to the authenticated user'));
+          }
+        }
+
         const verificationResult = await this.verify(confirmationResult, {
           adminUser: adminUser,
           userPk: adminUser.pk, 
@@ -1096,12 +1132,15 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
           } as HttpExtra
         });
         if ( !verificationResult || !('ok' in verificationResult) ) {
-          this.resolveResponse(sessionId, { ok: false, error: 'Verification failed' });
-          return { ok: false, error: 'Verification failed' };
+          return(resolveAllIdsAsFailed('Verification failed'));
+        }
+        if ('ok' in verificationResult && verificationResult.ok){
+          for (const id of idsToResolve) {
+            this.resolveResponse(id, { ok: true, passkeyConfirmed: verificationResult });
+          }
+          return { ok: true };
         }
-        this.resolveResponse(sessionId, { ok: true, passkeyConfirmed: verificationResult });
-        return { ok: true };
       }
     });
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index c70a700..ffc6609 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,11 @@
     "node-2fa": "^2.0.3"
   },
   "peerDependencies": {
-    "adminforth": "^2.42.0"
+    "adminforth": "^2.50.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
+    "adminforth": "^2.50.1",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49d7008..8a270da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
       '@simplewebauthn/server':
         specifier: ^13.2.1
         version: 13.2.3
-      adminforth:
-        specifier: ^2.42.0
-        version: 2.48.0(@types/node@22.19.13)(typescript@5.9.3)
       node-2fa:
         specifier: ^2.0.3
         version: 2.0.3
@@ -21,6 +18,9 @@ importers:
       '@types/node':
         specifier: ^22.10.7
         version: 22.19.13
+      adminforth:
+        specifier: ^2.50.1
+        version: 2.50.1(@types/node@22.19.13)(typescript@5.9.3)
       semantic-release:
         specifier: ^24.2.1
         version: 24.2.9(typescript@5.9.3)
@@ -455,8 +455,8 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  adminforth@2.48.0:
-    resolution: {integrity: sha512-VesaleJWmenY/KN8gEMXxsmWdO6JyL4pcgm/KaDX1T9QoS7BdxG3OU4cI1Nud96eYVU23hjkZmojTXCzO7iHgA==}
+  adminforth@2.50.1:
+    resolution: {integrity: sha512-MHsLlmNLcnlxZhIZ57UIyUYjLPMczKVLa0/lnmASBiotQ0JFmJre9PFzKkHShsxHGXR8o8RjU71FdKwID6Vg7A==}
     hasBin: true
 
   agent-base@7.1.4:
@@ -3069,7 +3069,7 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  adminforth@2.48.0(@types/node@22.19.13)(typescript@5.9.3):
+  adminforth@2.50.1(@types/node@22.19.13)(typescript@5.9.3):
     dependencies:
       '@babel/parser': 7.29.0
       '@clickhouse/client': 1.18.1