diff --git a/src/components/common/PinCodeInput.vue b/src/components/common/PinCodeInput.vue
index 3c92d81e..1eec814e 100644
--- a/src/components/common/PinCodeInput.vue
+++ b/src/components/common/PinCodeInput.vue
@@ -7,6 +7,7 @@
                    :ref="`pin-code-input-${index}`"
                    :value="codes[index].value"
                    :type="codes[index].inputType"
+                   :disabled="disabled ? 'disabled' : undefined"
                    :autofocus="autofocus && index === 0 ? 'autofocus' : undefined"
                    @focus="codes[index].focused = true"
                    @blur="codes[index].focused = false"
@@ -22,6 +23,7 @@
 export default {
     props: [
         'modelValue',
+        'disabled',
         'autofocus',
         'secure',
         'length'
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 4a640264..21158c72 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -34,7 +34,7 @@
                                         autocomplete="username"
                                         autofocus="autofocus"
                                         clearable
-                                        :disabled="show2faInput"
+                                        :disabled="show2faInput || logining || verifying"
                                         :label="$t('Username')"
                                         :placeholder="$t('Your username or email')"
                                         v-model="username"
@@ -49,7 +49,7 @@
                                         clearable
                                         ref="passwordInput"
                                         :type="isPasswordVisible ? 'text' : 'password'"
-                                        :disabled="show2faInput"
+                                        :disabled="show2faInput || logining || verifying"
                                         :label="$t('Password')"
                                         :placeholder="$t('Your password')"
                                         :append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
@@ -66,6 +66,7 @@
                                         autocomplete="one-time-code"
                                         clearable
                                         ref="passcodeInput"
+                                        :disabled="logining || verifying"
                                         :label="$t('Passcode')"
                                         :placeholder="$t('Passcode')"
                                         :append-inner-icon="icons.backupCode"
@@ -77,6 +78,7 @@
                                     <v-text-field
                                         type="text"
                                         clearable
+                                        :disabled="logining || verifying"
                                         :label="$t('Backup Code')"
                                         :placeholder="$t('Backup Code')"
                                         :append-inner-icon="icons.passcode"
@@ -88,13 +90,15 @@
                                 </v-col>
 
                                 <v-col cols="12">
-                                    <v-btn block :class="{ 'disabled': inputIsEmpty || logining }"
+                                    <v-btn block :disabled="inputIsEmpty || logining || verifying"
                                            @click="login" v-if="!show2faInput">
                                         {{ $t('Log In') }}
+                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="logining"></v-progress-circular>
                                     </v-btn>
-                                    <v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }"
+                                    <v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
                                            @click="verify" v-else-if="show2faInput">
                                         {{ $t('Continue') }}
+                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifying"></v-progress-circular>
                                     </v-btn>
                                 </v-col>
 
@@ -108,7 +112,9 @@
                                 <v-col cols="12" class="text-center">
                                     <v-menu location="bottom">
                                         <template #activator="{ props }">
-                                            <v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
+                                            <v-btn variant="text"
+                                                   :disabled="logining || verifying"
+                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
                                             <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
@@ -138,14 +144,6 @@
         </v-row>
 
         <snack-bar ref="snackbar" />
-
-        <v-overlay class="justify-center align-center" :persistent="true" v-model="logining">
-            <v-progress-circular indeterminate></v-progress-circular>
-        </v-overlay>
-
-        <v-overlay class="justify-center align-center" :persistent="true" v-model="verifying">
-            <v-progress-circular indeterminate></v-progress-circular>
-        </v-overlay>
     </div>
 </template>
 
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 324bb075..4bd8645e 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -153,13 +153,17 @@
 
                                 <v-row class="mb-5">
                                     <v-col cols="12" sm="6">
-                                        <v-switch inset :label="$t('Use Preset Transaction Categories')"
+                                        <v-switch inset
+                                                  :disabled="submitting"
+                                                  :label="$t('Use Preset Transaction Categories')"
                                                   v-model="usePresetCategories"/>
                                     </v-col>
                                     <v-col cols="12" sm="6" class="text-right-sm">
                                         <v-menu location="bottom">
                                             <template #activator="{ props }">
-                                                <v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
+                                                <v-btn variant="text"
+                                                       :disabled="submitting"
+                                                       v-bind="props">{{ currentLanguageName }}</v-btn>
                                             </template>
                                             <v-list>
                                                 <v-list-item v-for="lang in allLanguages" :key="lang.code">
@@ -174,7 +178,7 @@
                                     </v-col>
                                 </v-row>
 
-                                <div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories }" style="max-height: 323px">
+                                <div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories || submitting }" style="max-height: 323px">
                                     <v-row :key="categoryType" v-for="(categories, categoryType) in presetCategories">
                                         <v-col cols="12" md="12">
                                             <h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4>
@@ -210,29 +214,28 @@
 
                     <div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
                         <v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'"
-                               :disabled="currentStep === 'basicSetting'"
+                               :disabled="currentStep === 'basicSetting' || submitting"
                                :prepend-icon="icons.previous"
                                @click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
                         <v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'"
-                               :disabled="currentStep === 'presetCategories'"
+                               :disabled="currentStep === 'presetCategories' || submitting"
                                :append-icon="icons.next"
                                @click="switchToNextTab"
                                v-if="currentStep !== 'presetCategories'">{{ $t('Next') }}</v-btn>
                         <v-btn color="expense"
                                :disabled="submitting"
-                               :append-icon="icons.submit"
+                               :append-icon="!submitting ? icons.submit : null"
                                @click="submit"
-                               v-if="currentStep === 'presetCategories'">{{ $t('Submit') }}</v-btn>
+                               v-if="currentStep === 'presetCategories'">
+                            {{ $t('Submit') }}
+                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
+                        </v-btn>
                     </div>
                 </v-card>
             </v-col>
         </v-row>
 
         <snack-bar ref="snackbar" />
-
-        <v-overlay class="justify-center align-center" :persistent="true" v-model="submitting">
-            <v-progress-circular indeterminate></v-progress-circular>
-        </v-overlay>
     </div>
 </template>
 
@@ -381,6 +384,10 @@ export default {
     },
     methods: {
         switchToTab(tabName) {
+            if (this.submitting) {
+                return;
+            }
+
             if (tabName === 'basicSetting') {
                 this.currentStep = 'basicSetting';
             } else if (tabName === 'presetCategories') {
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 4c9cdfd1..7515d749 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -30,21 +30,23 @@
                         <v-form>
                             <v-row>
                                 <v-col cols="12">
-                                    <pin-code-input :autofocus="true" :secure="true" :length="6"
+                                    <pin-code-input :disabled="verifyingByWebAuthn" :autofocus="true"
+                                                    :secure="true" :length="6"
                                                     v-model="pinCode" @pincode:confirm="unlockByPin" />
                                 </v-col>
 
                                 <v-col cols="12">
-                                    <v-btn block :class="{ 'disabled': !isPinCodeValid(pinCode) }"
+                                    <v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
                                            @click="unlockByPin(pinCode)">
                                         {{ $t('Unlock By PIN Code') }}
                                     </v-btn>
                                 </v-col>
 
                                 <v-col cols="12" v-if="isWebAuthnAvailable">
-                                    <v-btn block variant="tonal"
+                                    <v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
                                            @click="unlockByWebAuthn">
                                         {{ $t('Unlock By WebAuthn') }}
+                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
                                     </v-btn>
                                 </v-col>
 
@@ -58,7 +60,9 @@
                                 <v-col cols="12" class="text-center">
                                     <v-menu location="bottom">
                                         <template #activator="{ props }">
-                                            <v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
+                                            <v-btn variant="text"
+                                                   :disabled="verifyingByWebAuthn"
+                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
                                             <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
@@ -89,10 +93,6 @@
 
         <confirm-dialog ref="confirmDialog"/>
         <snack-bar ref="snackbar" />
-
-        <v-overlay class="justify-center align-center" :persistent="true" v-model="verifying">
-            <v-progress-circular indeterminate></v-progress-circular>
-        </v-overlay>
     </div>
 </template>
 
@@ -113,7 +113,7 @@ export default {
     data() {
         return {
             pinCode: '',
-            verifying: false
+            verifyingByWebAuthn: false
         };
     },
     computed: {
@@ -166,13 +166,13 @@ export default {
                 return;
             }
 
-            this.verifying = true;
+            this.verifyingByWebAuthn = true;
 
             webauthn.verifyCredential(
                 self.userStore.currentUserInfo,
                 self.$user.getWebAuthnCredentialId()
             ).then(({ id, userName, userSecret }) => {
-                this.verifying = false;
+                this.verifyingByWebAuthn = false;
 
                 self.$user.unlockTokenByWebAuthn(id, userName, userSecret);
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
@@ -188,7 +188,7 @@ export default {
 
                 self.$router.replace('/');
             }).catch(error => {
-                this.verifying = false;
+                this.verifyingByWebAuthn = false;
                 logger.error('failed to use webauthn to verify', error);
 
                 if (error.notSupported) {