diff --git a/.changeset/shy-dolls-serve.md b/.changeset/shy-dolls-serve.md
new file mode 100644
index 00000000000..9c8c070daca
--- /dev/null
+++ b/.changeset/shy-dolls-serve.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Correctly set idle card state when an error occurs during the MFA set up phase.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
index dd001a0a663..2481ff00bf2 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
@@ -75,21 +75,22 @@ const AddMfa = (props: AddMfaProps) => {
   const user = useCoreUser();
   const availableMethods = user.phoneNumbers.filter(p => !p.reservedForSecondFactor);
 
-  const enableMfa = (phone: PhoneNumberResource) => {
+  const enableMfa = async (phone: PhoneNumberResource) => {
     if (phone.verification.status !== 'verified') {
       return onUnverifiedPhoneClick(phone);
     }
 
     card.setLoading(phone.id);
-    phone
-      .setReservedForSecondFactor({ reserved: true })
-      .then(() => {
-        card.setIdle();
+    try {
+      await phone.setReservedForSecondFactor({ reserved: true }).then(() => {
+        resourceRef.current = phone;
         onSuccess();
-      })
-      .catch(err => handleError(err, [], card.setError));
-
-    resourceRef.current = phone;
+      });
+    } catch (err) {
+      handleError(err, [], card.setError);
+    } finally {
+      card.setIdle();
+    }
   };
 
   return (