diff --git a/packages/experience/src/Providers/LoadingLayerProvider/index.tsx b/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
index eccc54c9b..2c3601ee0 100644
--- a/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
+++ b/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
@@ -1,18 +1,16 @@
 import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import { useDebouncedLoader } from 'use-debounced-loader';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import LoadingLayer from '@/components/LoadingLayer';
+import LoadingMask from '@/components/LoadingMask';
 
 const LoadingLayerProvider = () => {
   const { loading } = useContext(PageContext);
-  const debouncedLoading = useDebouncedLoader(loading, 500);
 
   return (
     <>
       <Outlet />
-      {debouncedLoading && <LoadingLayer />}
+      {loading && <LoadingMask />}
     </>
   );
 };
diff --git a/packages/experience/src/assets/icons/ring.svg b/packages/experience/src/assets/icons/ring.svg
new file mode 100644
index 000000000..a2464b97c
--- /dev/null
+++ b/packages/experience/src/assets/icons/ring.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3357 16.8714C11.441 17.4135 11.0865 17.9451 10.5355 17.9821C9.4048 18.0579 8.2669 17.8929 7.19834 17.4934C5.81639 16.9767 4.60425 16.0879 3.69591 14.9253C2.78758 13.7627 2.21844 12.3715 2.05143 10.9056C1.88441 9.43973 2.12602 7.9562 2.74954 6.61905C3.37306 5.28191 4.35421 4.14323 5.5845 3.32891C6.8148 2.5146 8.24632 2.05636 9.7208 2.00487C11.1953 1.95338 12.6553 2.31064 13.9394 3.03715C14.9323 3.59891 15.7901 4.36452 16.4588 5.27942C16.7847 5.72531 16.6054 6.33858 16.1223 6.60633C15.6393 6.87408 15.0366 6.69278 14.6924 6.26086C14.2154 5.66218 13.6262 5.15785 12.9545 4.77787C11.9915 4.23298 10.8965 3.96504 9.7906 4.00366C8.68474 4.04227 7.6111 4.38595 6.68838 4.99669C5.76565 5.60742 5.02979 6.46143 4.56215 7.46429C4.09451 8.46715 3.91331 9.5798 4.03857 10.6792C4.16383 11.7786 4.59069 12.822 5.27194 13.694C5.95319 14.5659 6.8623 15.2325 7.89876 15.62C8.62154 15.8903 9.38663 16.0175 10.1519 15.9981C10.704 15.9841 11.2303 16.3293 11.3357 16.8714Z" fill="currentColor"/>
+</svg>
diff --git a/packages/experience/src/components/Button/index.module.scss b/packages/experience/src/components/Button/index.module.scss
index 67993f96c..fdd1cfe79 100644
--- a/packages/experience/src/components/Button/index.module.scss
+++ b/packages/experience/src/components/Button/index.module.scss
@@ -21,6 +21,11 @@
     line-height: normal;
     margin-right: _.unit(2);
   }
+
+  .loadingIcon {
+    color: var(--color-white);
+    animation: rotating 1s steps(60, end) infinite;
+  }
 }
 
 .large {
@@ -40,11 +45,16 @@
   &:disabled {
     background: var(--color-bg-state-disabled);
     color: var(--color-type-disable);
+    pointer-events: none;
   }
 
   &:active {
     background: var(--color-brand-pressed);
   }
+
+  &.loading {
+    background: var(--color-brand-70);
+  }
 }
 
 .secondary {
@@ -74,7 +84,7 @@
       outline: 3px solid var(--color-overlay-brand-focused);
     }
 
-    &:not(:disabled):not(:active):hover {
+    &:not(:disabled):not(:active):not(.loading):hover {
       background: var(--color-brand-hover);
     }
   }
@@ -84,8 +94,18 @@
       outline: 3px solid var(--color-overlay-neutral-focused);
     }
 
-    &:not(:disabled):not(:active):hover {
+    &:not(:disabled):not(:active):not(.loading):hover {
       background: var(--color-overlay-neutral-hover);
     }
   }
 }
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/experience/src/components/Button/index.tsx b/packages/experience/src/components/Button/index.tsx
index 544198975..578c7731d 100644
--- a/packages/experience/src/components/Button/index.tsx
+++ b/packages/experience/src/components/Button/index.tsx
@@ -2,6 +2,8 @@ import classNames from 'classnames';
 import type { TFuncKey } from 'i18next';
 import type { HTMLProps } from 'react';
 
+import Ring from '@/assets/icons/ring.svg';
+
 import DynamicT from '../DynamicT';
 
 import * as styles from './index.module.scss';
@@ -15,6 +17,7 @@ type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> &
   readonly isDisabled?: boolean;
   readonly className?: string;
   readonly onClick?: React.MouseEventHandler;
+  readonly isLoading?: boolean;
 };
 
 type Props = BaseProps & {
@@ -31,6 +34,7 @@ const Button = ({
   i18nProps,
   className,
   isDisabled = false,
+  isLoading = false,
   icon,
   onClick,
   ...rest
@@ -42,14 +46,20 @@ const Button = ({
         styles.button,
         styles[type],
         styles[size],
-        isDisabled && styles.isDisabled,
+        isDisabled && styles.disabled,
+        isLoading && styles.loading,
         className
       )}
       type={htmlType}
       onClick={onClick}
       {...rest}
     >
-      {icon && <span className={styles.icon}>{icon}</span>}
+      {icon && !isLoading && <span className={styles.icon}>{icon}</span>}
+      {isLoading && (
+        <span className={classNames(styles.icon, styles.loadingIcon)}>
+          <Ring />
+        </span>
+      )}
       <DynamicT forKey={title} interpolation={i18nProps} />
     </button>
   );
diff --git a/packages/experience/src/components/LoadingLayer/index.module.scss b/packages/experience/src/components/LoadingLayer/index.module.scss
index 4f24e5e8b..115c477e4 100644
--- a/packages/experience/src/components/LoadingLayer/index.module.scss
+++ b/packages/experience/src/components/LoadingLayer/index.module.scss
@@ -1,12 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  @include _.flex-column;
-  z-index: 300;
-}
-
 .loadingIcon {
   color: var(--color-type-primary);
   animation: rotating 1s steps(12, end) infinite;
diff --git a/packages/experience/src/components/LoadingLayer/index.tsx b/packages/experience/src/components/LoadingLayer/index.tsx
index 4db64f3a1..52b43e236 100644
--- a/packages/experience/src/components/LoadingLayer/index.tsx
+++ b/packages/experience/src/components/LoadingLayer/index.tsx
@@ -1,14 +1,16 @@
+import LoadingMask from '../LoadingMask';
+
 import LoadingIcon from './LoadingIcon';
 import * as styles from './index.module.scss';
 
 export { default as LoadingIcon } from './LoadingIcon';
 
 const LoadingLayer = () => (
-  <div className={styles.overlay}>
+  <LoadingMask>
     <div className={styles.container}>
       <LoadingIcon />
     </div>
-  </div>
+  </LoadingMask>
 );
 
 export default LoadingLayer;
diff --git a/packages/experience/src/components/LoadingMask/index.module.scss b/packages/experience/src/components/LoadingMask/index.module.scss
new file mode 100644
index 000000000..30e65e818
--- /dev/null
+++ b/packages/experience/src/components/LoadingMask/index.module.scss
@@ -0,0 +1,8 @@
+@use '@/scss/underscore' as _;
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  @include _.flex-column;
+  z-index: 300;
+}
diff --git a/packages/experience/src/components/LoadingMask/index.tsx b/packages/experience/src/components/LoadingMask/index.tsx
new file mode 100644
index 000000000..b77e44351
--- /dev/null
+++ b/packages/experience/src/components/LoadingMask/index.tsx
@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly children?: ReactNode;
+};
+
+const LoadingMask = ({ children }: Props) => {
+  return <div className={styles.overlay}>{children}</div>;
+};
+
+export default LoadingMask;
diff --git a/packages/experience/src/containers/SetPassword/Lite.tsx b/packages/experience/src/containers/SetPassword/Lite.tsx
index aa1abd3b8..762ce4446 100644
--- a/packages/experience/src/containers/SetPassword/Lite.tsx
+++ b/packages/experience/src/containers/SetPassword/Lite.tsx
@@ -14,7 +14,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -29,7 +29,7 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '' },
@@ -42,11 +42,11 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -70,7 +70,12 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/containers/SetPassword/SetPassword.tsx b/packages/experience/src/containers/SetPassword/SetPassword.tsx
index e2e7d6ff0..d67fbe212 100644
--- a/packages/experience/src/containers/SetPassword/SetPassword.tsx
+++ b/packages/experience/src/containers/SetPassword/SetPassword.tsx
@@ -17,7 +17,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -43,7 +43,7 @@ const SetPassword = ({
     watch,
     resetField,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '', confirmPassword: '' },
@@ -56,11 +56,11 @@ const SetPassword = ({
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -119,7 +119,12 @@ const SetPassword = ({
 
       <TogglePassword isChecked={showPassword} onChange={setShowPassword} />
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/containers/SetPassword/index.tsx b/packages/experience/src/containers/SetPassword/index.tsx
index 6d0c0b160..e75450ce1 100644
--- a/packages/experience/src/containers/SetPassword/index.tsx
+++ b/packages/experience/src/containers/SetPassword/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
   readonly maxLength?: number;
diff --git a/packages/experience/src/containers/TotpCodeVerification/index.module.scss b/packages/experience/src/containers/TotpCodeVerification/index.module.scss
index d49751776..5eada9f9f 100644
--- a/packages/experience/src/containers/TotpCodeVerification/index.module.scss
+++ b/packages/experience/src/containers/TotpCodeVerification/index.module.scss
@@ -3,3 +3,7 @@
 .totpCodeInput {
   margin-top: _.unit(4);
 }
+
+.continueButton {
+  margin-top: _.unit(6);
+}
diff --git a/packages/experience/src/containers/TotpCodeVerification/index.tsx b/packages/experience/src/containers/TotpCodeVerification/index.tsx
index 2216eb2ec..ddcb323f1 100644
--- a/packages/experience/src/containers/TotpCodeVerification/index.tsx
+++ b/packages/experience/src/containers/TotpCodeVerification/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import Button from '@/components/Button';
 import VerificationCodeInput from '@/components/VerificationCode';
 import { type UserMfaFlow } from '@/types';
 
@@ -8,32 +9,58 @@ import useTotpCodeVerification from './use-totp-code-verification';
 
 const totpCodeLength = 6;
 
+const isCodeReady = (code: string[]) => {
+  return code.length === totpCodeLength && code.every(Boolean);
+};
+
 type Props = {
   readonly flow: UserMfaFlow;
 };
 
 const TotpCodeVerification = ({ flow }: Props) => {
-  const [code, setCode] = useState<string[]>([]);
+  const [codeInput, setCodeInput] = useState<string[]>([]);
   const errorCallback = useCallback(() => {
-    setCode([]);
+    setCodeInput([]);
   }, []);
 
   const { errorMessage, onSubmit } = useTotpCodeVerification(flow, errorCallback);
 
-  return (
-    <VerificationCodeInput
-      name="totpCode"
-      value={code}
-      className={styles.totpCodeInput}
-      error={errorMessage}
-      onChange={(code) => {
-        setCode(code);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-        if (code.length === totpCodeLength && code.every(Boolean)) {
-          onSubmit(code.join(''));
-        }
-      }}
-    />
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+      await onSubmit(code.join(''));
+      setIsSubmitting(false);
+    },
+    [onSubmit]
+  );
+
+  return (
+    <>
+      <VerificationCodeInput
+        name="totpCode"
+        value={codeInput}
+        className={styles.totpCodeInput}
+        error={errorMessage}
+        onChange={async (code) => {
+          setCodeInput(code);
+          if (isCodeReady(code)) {
+            await handleSubmit(code);
+          }
+        }}
+      />
+      <Button
+        title="action.continue"
+        type="primary"
+        className={styles.continueButton}
+        isLoading={isSubmitting}
+        isDisabled={!isCodeReady(codeInput)}
+        onClick={async () => {
+          await handleSubmit(codeInput);
+        }}
+      />
+    </>
   );
 };
 
diff --git a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
index 313aff5fc..3c05c6e93 100644
--- a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
+++ b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
@@ -19,8 +19,8 @@ const useTotpCodeVerification = (flow: UserMfaFlow, errorCallback?: () => void)
   );
 
   const onSubmit = useCallback(
-    (code: string) => {
-      void sendMfaPayload(
+    async (code: string) => {
+      await sendMfaPayload(
         { flow, payload: { type: MfaFactor.TOTP, code } },
         invalidCodeErrorHandlers,
         errorCallback
diff --git a/packages/experience/src/containers/VerificationCode/index.module.scss b/packages/experience/src/containers/VerificationCode/index.module.scss
index 4876069e5..e7fce0f45 100644
--- a/packages/experience/src/containers/VerificationCode/index.module.scss
+++ b/packages/experience/src/containers/VerificationCode/index.module.scss
@@ -27,7 +27,8 @@
     align-self: start;
   }
 
-  .switch {
+  .switch,
+  .continueButton {
     margin-top: _.unit(6);
   }
 }
diff --git a/packages/experience/src/containers/VerificationCode/index.tsx b/packages/experience/src/containers/VerificationCode/index.tsx
index f086aea17..df1668487 100644
--- a/packages/experience/src/containers/VerificationCode/index.tsx
+++ b/packages/experience/src/containers/VerificationCode/index.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
+import Button from '@/components/Button';
 import TextLink from '@/components/TextLink';
 import VerificationCodeInput, { defaultLength } from '@/components/VerificationCode';
 import { UserFlow } from '@/types';
@@ -24,6 +25,8 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
   const [code, setCode] = useState<string[]>([]);
   const { t } = useTranslation();
 
+  const isCodeReady = code.length === defaultLength && code.every(Boolean);
+
   const useVerificationCode = getCodeVerificationHookByFlow(flow);
 
   const errorCallback = useCallback(() => {
@@ -42,15 +45,27 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
     target
   );
 
-  useEffect(() => {
-    if (code.length === defaultLength && code.every(Boolean)) {
-      const payload =
-        identifier === SignInIdentifier.Email
-          ? { email: target, verificationCode: code.join('') }
-          : { phone: target, verificationCode: code.join('') };
-      void onSubmit(payload);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    if (!isCodeReady) {
+      return;
     }
-  }, [code, identifier, onSubmit, target]);
+
+    setIsSubmitting(true);
+
+    await onSubmit(
+      identifier === SignInIdentifier.Email
+        ? { email: target, verificationCode: code.join('') }
+        : { phone: target, verificationCode: code.join('') }
+    );
+
+    setIsSubmitting(false);
+  }, [code, identifier, isCodeReady, onSubmit, target]);
+
+  useEffect(() => {
+    void handleSubmit();
+  }, [handleSubmit]);
 
   return (
     <form className={classNames(styles.form, className)}>
@@ -88,6 +103,14 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
       {flow === UserFlow.SignIn && hasPasswordButton && (
         <PasswordSignInLink className={styles.switch} />
       )}
+      <Button
+        title="action.continue"
+        type="primary"
+        isDisabled={!isCodeReady}
+        isLoading={isSubmitting}
+        className={styles.continueButton}
+        onClick={handleSubmit}
+      />
     </form>
   );
 };
diff --git a/packages/experience/src/pages/Consent/index.tsx b/packages/experience/src/pages/Consent/index.tsx
index 0f5c012c8..8052e11d8 100644
--- a/packages/experience/src/pages/Consent/index.tsx
+++ b/packages/experience/src/pages/Consent/index.tsx
@@ -27,10 +27,14 @@ const Consent = () => {
   const [consentData, setConsentData] = useState<ConsentInfoResponse>();
   const [selectedOrganization, setSelectedOrganization] = useState<Organization>();
 
+  const [isConsentLoading, setIsConsentLoading] = useState(false);
+
   const asyncGetConsentInfo = useApi(getConsentInfo);
 
   const consentHandler = useCallback(async () => {
+    setIsConsentLoading(true);
     const [error, result] = await asyncConsent(selectedOrganization?.id);
+    setIsConsentLoading(false);
 
     if (error) {
       await handleError(error);
@@ -113,7 +117,7 @@ const Consent = () => {
             window.location.replace(consentData.redirectUri);
           }}
         />
-        <Button title="action.authorize" onClick={consentHandler} />
+        <Button title="action.authorize" isLoading={isConsentLoading} onClick={consentHandler} />
       </div>
       {!showTerms && (
         <div className={styles.redirectUri}>
diff --git a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
index 19e3b9448..07f673570 100644
--- a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
+++ b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
@@ -43,7 +43,7 @@ const IdentifierProfileForm = ({
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -64,7 +64,7 @@ const IdentifierProfileForm = ({
     async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit(async ({ identifier: { type, value } }) => {
+      await handleSubmit(async ({ identifier: { type, value } }) => {
         if (!type) {
           return;
         }
@@ -115,7 +115,7 @@ const IdentifierProfileForm = ({
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button title="action.continue" htmlType="submit" />
+      <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
index 381bf12bd..e1db29743 100644
--- a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
+++ b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -42,12 +42,13 @@ const ForgotPasswordForm = ({
     UserFlow.ForgotPassword
   );
 
-  const { setForgotPasswordIdentifierInputValue } = useContext(UserInteractionContext);
+  const { setForgotPasswordIdentifierInputValue, setIdentifierInputValue } =
+    useContext(UserInteractionContext);
 
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -76,10 +77,19 @@ const ForgotPasswordForm = ({
         // Cache or update the forgot password identifier input value
         setForgotPasswordIdentifierInputValue({ type, value });
 
+        // Set current identifier input value for code verification
+        setIdentifierInputValue({ type, value });
+
         await onSubmit({ identifier: type, value });
       })(event);
     },
-    [clearErrorMessage, handleSubmit, onSubmit, setForgotPasswordIdentifierInputValue]
+    [
+      clearErrorMessage,
+      handleSubmit,
+      onSubmit,
+      setForgotPasswordIdentifierInputValue,
+      setIdentifierInputValue,
+    ]
   );
 
   return (
@@ -122,7 +132,7 @@ const ForgotPasswordForm = ({
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button title="action.continue" htmlType="submit" />
+      <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx b/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
index 3d113036c..63f65d6c2 100644
--- a/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
+++ b/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
@@ -1,5 +1,6 @@
 import { MfaFactor } from '@logto/schemas';
 import { t } from 'i18next';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -18,6 +19,7 @@ import * as styles from './index.module.scss';
 const BackupCodeBinding = () => {
   const { copyText, downloadText } = useTextHandler();
   const sendMfaPayload = useSendMfaPayload();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const { state } = useLocation();
   const [, backupCodeBindingState] = validate(state, backupCodeBindingStateGuard);
@@ -46,7 +48,7 @@ const BackupCodeBinding = () => {
             <Button
               title="action.download"
               type="secondary"
-              onClick={() => {
+              onClick={async () => {
                 downloadText(backupCodeTextContent, 'backup_code.txt');
               }}
             />
@@ -54,7 +56,7 @@ const BackupCodeBinding = () => {
           <Button
             title="action.copy"
             type="secondary"
-            onClick={() => {
+            onClick={async () => {
               void copyText(backupCodeTextContent, t('mfa.backup_code_copied'));
             }}
           />
@@ -64,11 +66,14 @@ const BackupCodeBinding = () => {
         </div>
         <Button
           title="action.continue"
-          onClick={() => {
-            void sendMfaPayload({
+          isLoading={isSubmitting}
+          onClick={async () => {
+            setIsSubmitting(true);
+            await sendMfaPayload({
               flow: UserMfaFlow.MfaBinding,
               payload: { type: MfaFactor.BackupCode },
             });
+            setIsSubmitting(false);
           }}
         />
       </div>
diff --git a/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx b/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
index 1678b42b8..9eca7bc98 100644
--- a/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
+++ b/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
@@ -1,4 +1,5 @@
 import { conditional } from '@silverhand/essentials';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -19,6 +20,7 @@ const WebAuthnBinding = () => {
   const [, webAuthnState] = validate(state, webAuthnStateGuard);
   const handleWebAuthn = useWebAuthnOperation();
   const skipMfa = useSkipMfa();
+  const [isCreatingPasskey, setIsCreatingPasskey] = useState(false);
 
   if (!webAuthnState) {
     return <ErrorPage title="error.invalid_session" />;
@@ -38,8 +40,11 @@ const WebAuthnBinding = () => {
     >
       <Button
         title="mfa.create_a_passkey"
-        onClick={() => {
-          void handleWebAuthn(options);
+        isLoading={isCreatingPasskey}
+        onClick={async () => {
+          setIsCreatingPasskey(true);
+          await handleWebAuthn(options);
+          setIsCreatingPasskey(false);
         }}
       />
       <SwitchMfaFactorsLink
diff --git a/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx b/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
index c5b142cbd..df86b094f 100644
--- a/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
+++ b/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
@@ -22,12 +22,16 @@ type FormState = {
 const BackupCodeVerification = () => {
   const flowState = useMfaFlowState();
   const sendMfaPayload = useSendMfaPayload();
-  const { register, handleSubmit } = useForm<FormState>({ defaultValues: { code: '' } });
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormState>({ defaultValues: { code: '' } });
 
   const onSubmitHandler = useCallback(
-    (event?: FormEvent<HTMLFormElement>) => {
-      void handleSubmit(async ({ code }) => {
-        void sendMfaPayload({
+    async (event?: FormEvent<HTMLFormElement>) => {
+      await handleSubmit(async ({ code }) => {
+        await sendMfaPayload({
           flow: UserMfaFlow.MfaVerification,
           payload: { type: MfaFactor.BackupCode, code },
         });
@@ -53,7 +57,7 @@ const BackupCodeVerification = () => {
             className={styles.backupCodeInput}
             {...register('code')}
           />
-          <Button title="action.continue" htmlType="submit" />
+          <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
         </form>
       </SectionLayout>
       <SwitchMfaFactorsLink
diff --git a/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx b/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
index 91bdf5af4..1f25f16f4 100644
--- a/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
+++ b/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -17,6 +18,7 @@ const WebAuthnVerification = () => {
   const { state } = useLocation();
   const [, webAuthnState] = validate(state, webAuthnStateGuard);
   const handleWebAuthn = useWebAuthnOperation();
+  const [isVerifying, setIsVerifying] = useState(false);
 
   if (!webAuthnState) {
     return <ErrorPage title="error.invalid_session" />;
@@ -37,8 +39,11 @@ const WebAuthnVerification = () => {
         <Button
           title="action.verify_via_passkey"
           className={styles.verifyButton}
-          onClick={() => {
-            void handleWebAuthn(options);
+          isLoading={isVerifying}
+          onClick={async () => {
+            setIsVerifying(true);
+            await handleWebAuthn(options);
+            setIsVerifying(false);
           }}
         />
       </SectionLayout>
diff --git a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
index cc198194b..3d03e1b18 100644
--- a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
+++ b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
@@ -40,7 +40,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
   const {
     watch,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
     control,
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
@@ -154,6 +154,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.create_account'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx b/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
index 39e2c2596..5049b7f17 100644
--- a/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
+++ b/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
@@ -44,7 +44,7 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
     watch,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
   });
@@ -153,6 +153,7 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.sign_in'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
index 3ce300d5e..47c91e213 100644
--- a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
+++ b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
@@ -45,7 +45,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
     register,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -174,6 +174,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.sign_in'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
index 2deb89de7..4b6951d43 100644
--- a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
+++ b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
@@ -47,7 +47,7 @@ const PasswordForm = ({
     register,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -69,7 +69,7 @@ const PasswordForm = ({
     async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage();
 
-      void handleSubmit(async ({ identifier: { type, value }, password }) => {
+      await handleSubmit(async ({ identifier: { type, value }, password }) => {
         if (!type) {
           return;
         }
@@ -114,7 +114,7 @@ const PasswordForm = ({
         <ForgotPasswordLink className={styles.link} identifier={identifier} value={value} />
       )}
 
-      <Button title="action.continue" name="submit" htmlType="submit" />
+      <Button title="action.continue" name="submit" htmlType="submit" isLoading={isSubmitting} />
 
       {identifier !== SignInIdentifier.Username && isVerificationCodeEnabled && (
         <VerificationCodeLink className={styles.switch} identifier={identifier} value={value} />
diff --git a/packages/experience/src/pages/SingleSignOnEmail/index.tsx b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
index 86437fe4d..3abe821ff 100644
--- a/packages/experience/src/pages/SingleSignOnEmail/index.tsx
+++ b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
@@ -26,7 +26,7 @@ const SingleSignOnEmail = () => {
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
   });
@@ -82,7 +82,12 @@ const SingleSignOnEmail = () => {
 
         {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-        <Button title="action.single_sign_on" htmlType="submit" icon={<LockIcon />} />
+        <Button
+          title="action.single_sign_on"
+          htmlType="submit"
+          icon={<LockIcon />}
+          isLoading={isSubmitting}
+        />
 
         <input hidden type="submit" />
       </form>
diff --git a/packages/experience/src/scss/_colors.scss b/packages/experience/src/scss/_colors.scss
index b1d1e4b00..2952cb391 100644
--- a/packages/experience/src/scss/_colors.scss
+++ b/packages/experience/src/scss/_colors.scss
@@ -38,6 +38,7 @@
   --color-brand-30: #4300da;
   --color-brand-40: #5d34f2;
   --color-brand-50: #7958ff;
+  --color-brand-70: #af9eff;
 
   --color-alert-60: #ca8000;
   --color-alert-70: #eb9918;