diff --git a/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs
index d966a0432e7..d8fdc4078c3 100644
--- a/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs
@@ -17,21 +17,21 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Col, Row, Button } from 'reactstrap';
-import { Translate, translate, ValidatedField, ValidatedForm } from 'react-jhipster';
-import { useSearchParams } from 'react-router-dom';
+import { Col, Row, Button, Form } from 'reactstrap';
+import { Translate, translate, ValidatedTextInput } from 'react-jhipster';
 import { toast } from 'react-toastify';
-
+import { useSearchParams } from 'react-router-dom';
 import { handlePasswordResetFinish, reset } from '../password-reset.reducer';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
+import { useForm } from 'react-hook-form';
 
 export const PasswordResetFinishPage = () => {
   const dispatch = useAppDispatch();
 
   const [searchParams] = useSearchParams();
   const key = searchParams.get('key');
-
+  const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm();
   const [password, setPassword] = useState('');
 
   useEffect(
@@ -40,60 +40,67 @@ export const PasswordResetFinishPage = () => {
     },
     []
   );
+  const successMessage = useAppSelector(state => state.passwordReset.successMessage);
+
+  useEffect(() => {
+    if (successMessage) {
+      toast.success(translate(successMessage));
+    }
+  }, [successMessage]);
 
-  const handleValidSubmit = ({ newPassword }) => dispatch(handlePasswordResetFinish({ key, newPassword }));
+  const handleValidSubmit = data => {
+    dispatch(handlePasswordResetFinish({ key: data.key, newPassword: data.newPassword }));
+  }
 
-  const updatePassword = event => setPassword(event.target.value);
+  const updatePassword = event => {
+    setPassword(event.target.value);
+    setValue('newPassword', event.target.value, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+  }
 
   const getResetForm = () => {
     return (
-      <ValidatedForm onSubmit={handleValidSubmit}>
-        <ValidatedField
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      <Form onSubmit={ handleSubmit(handleValidSubmit) }>
+        <ValidatedTextInput
+          register={ register }
+          touchedFields={ touchedFields }
+          errors={ errors }
+          setValue={ setValue }
           name="newPassword"
-          label={translate('global.form.newpassword.label')}
-          placeholder={translate('global.form.newpassword.placeholder')}
-          type="password"
-          validate={{
-            required: { value: true, message: translate('global.messages.validate.newpassword.required') },
+          validation={ {
+            required: translate('global.messages.validate.newpassword.required') ,
             minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') },
             maxLength: { value: 50, message: translate('global.messages.validate.newpassword.maxlength') },
-          }}
-          onChange={updatePassword}
-          data-cy="resetPassword"
+          } }
+          labelPlaceholderKey="global.form.newpassword.label"
+          inputPlaceholderKey="global.form.newpassword.placeholder"
+          type="password"
+          updateValueOverrideMethod={ updatePassword }
         />
         <PasswordStrengthBar password={password} />
-        <ValidatedField
+        <ValidatedTextInput
+          register={ register }
+          touchedFields={ touchedFields }
+          errors={ errors }
+          setValue={ setValue }
           name="confirmPassword"
-          label={translate('global.form.confirmpassword.label')}
-          placeholder={translate('global.form.confirmpassword.placeholder')}
-          type="password"
-          validate={{
-            required: { value: true, message: translate('global.messages.validate.confirmpassword.required') },
+          validation={ {
+            required: translate('global.messages.validate.confirmpassword.required'),
             minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') },
             maxLength: { value: 50, message: translate('global.messages.validate.confirmpassword.maxlength') },
             validate: v => v === password || translate('global.messages.error.dontmatch'),
-          }}
-          data-cy="confirmResetPassword"
+          } }
+          labelPlaceholderKey="global.form.confirmpassword.label"
+          inputPlaceholderKey="global.form.confirmpassword.placeholder"
+          type="password"
         />
         <Button color="success" type="submit" data-cy="submit">
           <Translate contentKey="reset.finish.form.button">Validate new password</Translate>
         </Button>
-      </ValidatedForm>
+      </Form>
     );
   };
 
-  const successMessage = useAppSelector(state => state.passwordReset.successMessage);
-
-  useEffect(() => {
-    if (successMessage) {
-<%_ if (enableTranslation) { _%>
-      toast.success(translate(successMessage));
-<%_ } else { _%>
-      toast.success(successMessage);
-<%_ } _%>
-    }
-  }, [successMessage]);
-
   return (
     <div>
       <Row className="justify-content-center">
diff --git a/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs
index 892abfeccd6..d0e0e307f87 100644
--- a/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs
@@ -17,15 +17,17 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster';
-import { Button, Alert, Col, Row } from 'reactstrap';
+import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster';
+import { Button, Alert, Col, Row, Form } from 'reactstrap';
 import { toast } from 'react-toastify';
 
 import { handlePasswordResetInit, reset } from '../password-reset.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
+import { useForm } from 'react-hook-form';
 
 export const PasswordResetInit = () => {
   const dispatch = useAppDispatch();
+  const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm();
 
   useEffect(
     () => () => {
@@ -34,9 +36,9 @@ export const PasswordResetInit = () => {
     []
   );
 
-  const handleValidSubmit = ({ email }) => {
-    dispatch(handlePasswordResetInit(email));
-  };
+  const handleValidSubmit = data => {
+    dispatch(handlePasswordResetInit(data.email));
+  }
 
   const successMessage = useAppSelector(state => state.passwordReset.successMessage);
 
@@ -50,38 +52,44 @@ export const PasswordResetInit = () => {
     }
   }, [successMessage]);
 
-    return (
-      <div>
-        <Row className="justify-content-center">
-          <Col md="8">
-            <h1><Translate contentKey="reset.request.title">Reset your password</Translate></h1>
-            <Alert color="warning">
-              <p><Translate contentKey="reset.request.messages.info">Enter the email address you used to register</Translate></p>
-            </Alert>
-            <ValidatedForm onSubmit={handleValidSubmit}>
-              <ValidatedField
-                name="email"
-                label={translate('global.form.email.label')}
-                placeholder={translate('global.form.email.placeholder')}
-                type="email"
-                validate={{
-                  required: { value: true, message: translate('global.messages.validate.email.required') },
-                  minLength: { value: 5, message: translate('global.messages.validate.email.minlength') },
-                  maxLength: { value: 254, message: translate('global.messages.validate.email.maxlength') },
-                  validate: v => isEmail(v) || translate('global.messages.validate.email.invalid'),
-                }}
-                data-cy="emailResetPassword"
-              />
-              <Button color="primary" type="submit" data-cy="submit">
-                <Translate contentKey="reset.request.form.button">
-                  Reset password
-                </Translate>
-              </Button>
-            </ValidatedForm>
-          </Col>
-        </Row>
-      </div>
-    );
-}
+  return (
+    <div>
+      <Row className="justify-content-center">
+        <Col md="8">
+          <h1>
+            <Translate contentKey="reset.request.title">Reset your password</Translate>
+          </h1>
+          <Alert color="warning">
+            <p>
+              <Translate contentKey="reset.request.messages.info">Enter the email address you used to register</Translate>
+            </p>
+          </Alert>
+          {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+          <Form onSubmit={ handleSubmit(handleValidSubmit) }>
+            <ValidatedTextInput
+              register={ register }
+              touchedFields={ touchedFields }
+              errors={ errors }
+              setValue={ setValue }
+              name="email"
+              validation={ {
+                required: translate('global.messages.validate.email.required'),
+                minLength: { value: 5, message: translate('global.messages.validate.email.minlength') },
+                maxLength: { value: 254, message: translate('global.messages.validate.email.maxlength') },
+                validate: v => isEmail(v) || translate('global.messages.validate.email.invalid'),
+              }}
+              labelPlaceholderKey="global.form.email.label"
+              inputPlaceholderKey="global.form.email.placeholder"
+              type="email"
+            />
+            <Button color="primary" type="submit" data-cy="submit">
+              <Translate contentKey="reset.request.form.button">Reset password</Translate>
+            </Button>
+          </Form>
+        </Col>
+      </Row>
+    </div>
+  );
+};
 
 export default PasswordResetInit;
diff --git a/generators/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs
index d273ab6aadc..beafd5ef79d 100644
--- a/generators/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs
@@ -18,7 +18,7 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Translate, translate, ValidatedTextInput } from 'react-jhipster';
-import { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row } from 'reactstrap';
+import { Button, Col, Form, Row } from 'reactstrap';
 import { toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
diff --git a/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs b/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs
index defa12f181a..aec0dc7db9b 100644
--- a/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs
+++ b/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs
@@ -77,7 +77,7 @@ export const confirmPasswordSelector = '[data-cy="confirmPassword"]';
 export const submitPasswordSelector = '[data-cy="submit"]';
 
 // Reset Password
-export const emailResetPasswordSelector = '[data-cy="emailResetPassword"]';
+export const emailResetPasswordSelector = '[data-cy="email"]';
 export const submitInitResetPasswordSelector = '[data-cy="submit"]';
 <%_ } _%>