diff --git a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
index 487ebfc32..cb4cd60e1 100644
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -149,6 +149,11 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
+  useEffect(() => {
+    // Reset the form when the Dialog open state changes
+    setupTwoFactorAuthenticationForm.reset();
+  }, [open, setupTwoFactorAuthenticationForm]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@@ -197,14 +202,7 @@ export const EnableAuthenticatorAppDialog = ({
                   />
 
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      onClick={() => {
-                        onOpenChange(false);
-                        setupTwoFactorAuthenticationForm.reset();
-                      }}
-                    >
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
 
diff --git a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
index 649cbd11c..2a83e6499 100644
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -92,6 +92,11 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     }
   };
 
+  useEffect(() => {
+    // Reset the form when the Dialog open state changes
+    viewRecoveryCodesForm.reset();
+  }, [open, viewRecoveryCodesForm]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@@ -138,14 +143,7 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                   />
 
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      onClick={() => {
-                        onOpenChange(false);
-                        viewRecoveryCodesForm.reset();
-                      }}
-                    >
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>