diff --git a/frontend/src/component/admin/users/change-password-component.jsx b/frontend/src/component/admin/users/change-password-component.jsx
index 6027c7aa16..baaf88d426 100644
--- a/frontend/src/component/admin/users/change-password-component.jsx
+++ b/frontend/src/component/admin/users/change-password-component.jsx
@@ -1,14 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-    TextField,
-    Typography,
-    Avatar,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Typography, Avatar } from '@material-ui/core';
 import { trim } from '../../common/util';
 import { modalStyles } from './util';
 import Dialogue from '../../common/Dialogue/Dialogue';
@@ -17,6 +10,7 @@ import { useCommonStyles } from '../../../common.styles';
 import PasswordMatcher from '../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { Alert } from '@material-ui/lab';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 function ChangePassword({
     showDialog,
@@ -27,17 +21,8 @@ function ChangePassword({
     const [data, setData] = useState({});
     const [error, setError] = useState({});
     const [validPassword, setValidPassword] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
     const commonStyles = useCommonStyles();
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = e => {
-        e.preventDefault();
-    };
-
     const updateField = e => {
         setError({});
         setData({
@@ -125,66 +110,20 @@ function ChangePassword({
                 />
 
                 <p style={{ color: 'red' }}>{error.general}</p>
-                <TextField
+                <PasswordField
                     label="New password"
                     name="password"
-                    type={showPassword ? 'text' : 'password'}
                     value={data.password}
                     helperText={error.password}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                 />
-                <TextField
+                <PasswordField
                     label="Confirm password"
                     name="confirm"
-                    type={showPassword ? 'text' : 'password'}
                     value={data.confirm}
                     error={error.confirm !== undefined}
                     helperText={error.confirm}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                 />
                 <PasswordMatcher
                     started={data.password && data.confirm}
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
new file mode 100644
index 0000000000..7b95a09625
--- /dev/null
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -0,0 +1,44 @@
+import { IconButton, InputAdornment, TextField } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { useState } from 'react';
+
+const PasswordField = ({ ...rest }) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        e: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        e.preventDefault();
+    };
+
+    return (
+        <TextField
+            variant="outlined"
+            size="small"
+            type={showPassword ? 'text' : 'password'}
+            InputProps={{
+                style: {
+                    paddingRight: '0px !important',
+                },
+                endAdornment: (
+                    <InputAdornment position="end">
+                        <IconButton
+                            aria-label="toggle password visibility"
+                            onClick={handleClickShowPassword}
+                            onMouseDown={handleMouseDownPassword}
+                        >
+                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            }}
+            {...rest}
+        />
+    );
+};
+
+export default PasswordField;
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
index 9b0d6cdcf5..b2e25ea70b 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
@@ -1,15 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import {
-    Button,
-    Grid,
-    TextField,
-    Typography,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, Grid, TextField, Typography } from '@material-ui/core';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
 import { useStyles } from './HostedAuth.styles';
@@ -18,6 +10,7 @@ import AuthOptions from '../common/AuthOptions/AuthOptions';
 import DividerText from '../../common/DividerText/DividerText';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const HostedAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -27,20 +20,11 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
     const params = useQueryParams();
     const [username, setUsername] = useState(params.get('email') || '');
     const [password, setPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     const [errors, setErrors] = useState({
         usernameError: '',
         passwordError: '',
     });
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = e => {
-        e.preventDefault();
-    };
-
     const handleSubmit = async evt => {
         evt.preventDefault();
 
@@ -126,40 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
                                 variant="outlined"
                                 size="small"
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type={showPassword ? 'text' : 'password'}
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
-                                size="small"
-                                InputProps={{
-                                    style:{
-                                        paddingRight: 0
-                                    },
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                aria-label="toggle password visibility"
-                                                onClick={
-                                                    handleClickShowPassword
-                                                }
-                                                onMouseDown={
-                                                    handleMouseDownPassword
-                                                }
-                                            >
-                                                {showPassword ? (
-                                                    <Visibility />
-                                                ) : (
-                                                    <VisibilityOff />
-                                                )}
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }}
                             />
                             <Grid container>
                                 <Button
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
index b6c29c41c6..98ed83b58c 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
@@ -1,13 +1,7 @@
 import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import {
-    Button,
-    TextField,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, TextField } from '@material-ui/core';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
@@ -22,6 +16,7 @@ import {
     LOGIN_EMAIL_ID,
 } from '../../../testIds';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const PasswordAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -31,20 +26,11 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
     const params = useQueryParams();
     const [username, setUsername] = useState(params.get('email') || '');
     const [password, setPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     const [errors, setErrors] = useState({
         usernameError: '',
         passwordError: '',
     });
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = e => {
-        e.preventDefault();
-    };
-
     const handleSubmit = async evt => {
         evt.preventDefault();
 
@@ -126,44 +112,17 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
                                 value={username}
                                 error={!!usernameError}
                                 helperText={usernameError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_EMAIL_ID}
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type={showPassword ? 'text' : 'password'}                                
                                 value={password}
-                                InputProps={{
-                                    style:{
-                                        paddingRight: 0
-                                    },
-                                    endAdornment: (
-                                        <InputAdornment position="end" className={commonStyles.adornedEnd}>
-                                        <IconButton
-                                            aria-label="toggle password visibility"
-                                            onClick={handleClickShowPassword}
-                                            onMouseDown={
-                                                handleMouseDownPassword
-                                            }
-                                        >
-                                            {showPassword ? (
-                                                <Visibility />
-                                            ) : (
-                                                <VisibilityOff />
-                                            )}
-                                        </IconButton>
-                                    </InputAdornment>
-                                    )
-                                  }}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_PASSWORD_ID}
                             />
                             <Button
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index d78a467904..f561344ac6 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -1,6 +1,5 @@
 import { SyntheticEvent, useState } from 'react';
-import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';
 import { useCommonStyles } from '../../../../common.styles';
@@ -17,6 +16,7 @@ import {
     UNAUTHORIZED,
 } from '../../../../constants/statusCodes';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IEditProfileProps {
     setEditingProfile: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,17 +34,8 @@ const EditProfile = ({
     const [error, setError] = useState('');
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     const ref = useLoading(loading);
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-    };
-
     const submit = async (e: SyntheticEvent) => {
         e.preventDefault();
 
@@ -122,64 +113,25 @@ const EditProfile = ({
                     callback={setValidPassword}
                     data-loading
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Password"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                     name="password"
                     value={password}
                     autoComplete="on"
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Confirm password"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                     name="confirmPassword"
                     value={confirmPassword}
                     autoComplete="on"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                 />
                 <PasswordMatcher
                     data-loading
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 8005fc51fd..c64cb9df30 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,10 +1,4 @@
-import {
-    Button,
-    TextField,
-    IconButton,
-    InputAdornment,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button } from '@material-ui/core';
 import classnames from 'classnames';
 import {
     SyntheticEvent,
@@ -23,6 +17,7 @@ import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
 import { useStyles } from './ResetPasswordForm.styles';
 import { useCallback } from 'react';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IResetPasswordProps {
     token: string;
@@ -38,7 +33,6 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
     const [confirmPassword, setConfirmPassword] = useState('');
     const [matchingPasswords, setMatchingPasswords] = useState(false);
     const [validOwaspPassword, setValidOwaspPassword] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
     const history = useHistory();
 
     const submittable = matchingPasswords && validOwaspPassword;
@@ -47,14 +41,6 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
         setValidOwaspPassword,
     ]);
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-    };
-
     useEffect(() => {
         if (!password) {
             setValidOwaspPassword(false);
@@ -122,64 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                     styles.container
                 )}
             >
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
+                <PasswordField
                     placeholder="Password"
                     value={password || ''}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                     onFocus={() => setShowPasswordChecker(true)}
                     autoComplete="password"
                     data-loading
                 />
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
+                <PasswordField
                     value={confirmPassword || ''}
                     placeholder="Confirm password"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                     autoComplete="confirm-password"
                     data-loading
                 />