diff --git a/src/components/SetPasswordForm.tsx b/src/components/SetPasswordForm.tsx
index d37747e13..9b47bf1f5 100644
--- a/src/components/SetPasswordForm.tsx
+++ b/src/components/SetPasswordForm.tsx
@@ -7,6 +7,7 @@ import { PasswordStrengthHint } from './PasswordStrength';
 import { isWeakPassword } from 'utils/crypto';
 import { Trans } from 'react-i18next';
 import { t } from 'i18next';
+import ShowHidePassword from './Form/ShowHidePassword';
 
 export interface SetPasswordFormProps {
     userEmail: string;
@@ -26,6 +27,17 @@ export interface SetPasswordFormValues {
 }
 function SetPasswordForm(props: SetPasswordFormProps) {
     const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        event.preventDefault();
+    };
 
     const onSubmit = async (
         values: SetPasswordFormValues,
@@ -82,7 +94,7 @@ function SetPasswordForm(props: SetPasswordFormProps) {
                         name="password"
                         id="password"
                         autoComplete="new-password"
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         label={t('PASSPHRASE_HINT')}
                         value={values.passphrase}
                         onChange={handleChange('passphrase')}
@@ -90,6 +102,19 @@ function SetPasswordForm(props: SetPasswordFormProps) {
                         helperText={errors.passphrase}
                         autoFocus
                         disabled={loading}
+                        InputProps={{
+                            endAdornment: (
+                                <ShowHidePassword
+                                    showPassword={showPassword}
+                                    handleClickShowPassword={
+                                        handleClickShowPassword
+                                    }
+                                    handleMouseDownPassword={
+                                        handleMouseDownPassword
+                                    }
+                                />
+                            ),
+                        }}
                     />
                     <TextField
                         fullWidth
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index aa2a3c85c..c19461714 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -31,6 +31,7 @@ import VerticallyCentered from './Container';
 import { PasswordStrengthHint } from './PasswordStrength';
 import { Trans } from 'react-i18next';
 import { t } from 'i18next';
+import ShowHidePassword from './Form/ShowHidePassword';
 
 interface FormValues {
     email: string;
@@ -46,6 +47,17 @@ export default function SignUp(props: SignUpProps) {
     const router = useRouter();
     const [acceptTerms, setAcceptTerms] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        event.preventDefault();
+    };
 
     const registerUser = async (
         { email, passphrase, confirm }: FormValues,
@@ -137,13 +149,26 @@ export default function SignUp(props: SignUpProps) {
                                 id="password"
                                 name="password"
                                 autoComplete="new-password"
-                                type="password"
+                                type={showPassword ? 'text' : 'password'}
                                 label={t('PASSPHRASE_HINT')}
                                 value={values.passphrase}
                                 onChange={handleChange('passphrase')}
                                 error={Boolean(errors.passphrase)}
                                 helperText={errors.passphrase}
                                 disabled={loading}
+                                InputProps={{
+                                    endAdornment: (
+                                        <ShowHidePassword
+                                            showPassword={showPassword}
+                                            handleClickShowPassword={
+                                                handleClickShowPassword
+                                            }
+                                            handleMouseDownPassword={
+                                                handleMouseDownPassword
+                                            }
+                                        />
+                                    ),
+                                }}
                             />
 
                             <TextField