diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index e35ca2324b..c3a56fd461 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -6,6 +6,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -57,6 +58,11 @@ const LoginPage = () => {
   const [email, setEmail] = usePersistedState('loginEmail', '');
   const [password, setPassword] = useState('');
 
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const registrationEnabled = useSelector((state) => state.session.server.registration);
   const languageEnabled = useSelector((state) => !state.session.server.attributes['ui.disableLoginLanguage']);
   const emailEnabled = useSelector((state) => state.session.server.emailEnabled);
@@ -160,11 +166,18 @@ const LoginPage = () => {
           label={t('userPassword')}
           name="password"
           value={password}
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           autoComplete="current-password"
           autoFocus={!!email}
           onChange={(e) => setPassword(e.target.value)}
           onKeyUp={handleSpecialKey}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           onClick={handlePasswordLogin}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 08ff3e8f59..0fc9b8aed1 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -5,6 +5,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import { useNavigate } from 'react-router-dom';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { snackBarDurationShortMs } from '../common/util/duration';
@@ -38,6 +39,11 @@ const RegisterPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const handleSubmit = useCatch(async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
@@ -88,6 +94,13 @@ const RegisterPage = () => {
           type="password"
           autoComplete="current-password"
           onChange={(event) => setPassword(event.target.value)}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           variant="contained"