diff --git a/frontend/src/routes/recover-password.tsx b/frontend/src/routes/recover-password.tsx
index 7be649c861..6ea24bf37d 100644
--- a/frontend/src/routes/recover-password.tsx
+++ b/frontend/src/routes/recover-password.tsx
@@ -7,10 +7,11 @@ import {
   Input,
   Text,
 } from "@chakra-ui/react"
+import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
 
-import { LoginService } from "../client"
+import { type ApiError, LoginService } from "../client"
 import { isLoggedIn } from "../hooks/useAuth"
 import useCustomToast from "../hooks/useCustomToast"
 import { emailPattern } from "../utils"
@@ -34,19 +35,35 @@ function RecoverPassword() {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors, isSubmitting },
   } = useForm<FormData>()
   const showToast = useCustomToast()
 
-  const onSubmit: SubmitHandler<FormData> = async (data) => {
+  const recoverPassword = async (data: FormData) => {
     await LoginService.recoverPassword({
       email: data.email,
     })
-    showToast(
-      "Email sent.",
-      "We sent an email with a link to get back into your account.",
-      "success",
-    )
+  }
+
+  const mutation = useMutation({
+    mutationFn: recoverPassword,
+    onSuccess: () => {
+      showToast(
+        "Email sent.",
+        "We sent an email with a link to get back into your account.",
+        "success",
+      )
+      reset()
+    },
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+  })
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    mutation.mutate(data)
   }
 
   return (