diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -26,6 +26,7 @@
 import { useSelector } from '../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../selectors/account-selectors';
 import css from './log-in-form.css';
+import PasswordInput from './password-input.react';
 
 const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
 function LoginForm(): React.Node {
@@ -139,9 +140,7 @@
         <div>
           <div className={css['form-title']}>Password</div>
           <div className={css['form-content']}>
-            <Input
-              type="password"
-              placeholder="Password"
+            <PasswordInput
               value={password}
               onChange={onPasswordChange}
               disabled={inputDisabled}
diff --git a/web/account/password-input.css b/web/account/password-input.css
new file mode 100644
--- /dev/null
+++ b/web/account/password-input.css
@@ -0,0 +1,26 @@
+.input {
+  padding-right: 50px;
+}
+
+.wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.wrapper :hover {
+  background-color: var(--show-password-bg-hover);
+}
+
+.button {
+  margin: 7px;
+  padding: 6px;
+  border: 0;
+  border-radius: 50%;
+  color: var(--fg);
+}
+
+.fieldset {
+  all: unset;
+  position: relative;
+}
diff --git a/web/account/password-input.react.js b/web/account/password-input.react.js
new file mode 100644
--- /dev/null
+++ b/web/account/password-input.react.js
@@ -0,0 +1,47 @@
+// @flow
+
+import * as React from 'react';
+
+import Button from '../components/button.react';
+import Input, { type BaseInputProps } from '../modals/input.react';
+import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
+import css from './password-input.css';
+
+type PasswordInputProps = BaseInputProps;
+
+function PasswordInput(props: PasswordInputProps, ref): React.Node {
+  const [htmlInputType, setHtmlInputType] = React.useState('password');
+
+  const onToggleShowPassword = React.useCallback(() => {
+    setHtmlInputType(oldType => (oldType === 'password' ? 'text' : 'password'));
+  }, [setHtmlInputType]);
+
+  const icon: Icon = React.useMemo(
+    () => (htmlInputType === 'password' ? 'eye-open' : 'eye-closed'),
+    [htmlInputType],
+  );
+
+  return (
+    <fieldset className={css.fieldset}>
+      <Input
+        className={css.input}
+        {...props}
+        placeholder="Password"
+        type={htmlInputType}
+        ref={ref}
+      />
+      <div className={css.wrapper}>
+        <Button className={css.button} onClick={onToggleShowPassword}>
+          <SWMansionIcon size={24} icon={icon} />
+        </Button>
+      </div>
+    </fieldset>
+  );
+}
+
+const ForwardedPasswordInput: React.AbstractComponent<
+  PasswordInputProps,
+  HTMLInputElement,
+> = React.forwardRef<PasswordInputProps, HTMLInputElement>(PasswordInput);
+
+export default ForwardedPasswordInput;
diff --git a/web/modals/input.react.js b/web/modals/input.react.js
--- a/web/modals/input.react.js
+++ b/web/modals/input.react.js
@@ -4,19 +4,30 @@
 
 import css from './input.css';
 
-type Props = {
-  +type: string,
-  +placeholder: string,
+export type BaseInputProps = {
   +value: string,
   +onChange: (value: SyntheticEvent<HTMLInputElement>) => mixed,
   +onBlur?: (value: SyntheticEvent<HTMLInputElement>) => mixed,
   +disabled?: boolean,
   +label?: string,
   +id?: string,
+  +className?: string,
+};
+
+export type InputProps = {
+  ...BaseInputProps,
+  +type: string,
+  +placeholder: string,
 };
 
-function Input(props: Props, ref): React.Node {
-  const { label: labelProp, disabled = false, id, ...rest } = props;
+function Input(props: InputProps, ref): React.Node {
+  const {
+    label: labelProp,
+    disabled = false,
+    className = '',
+    id,
+    ...rest
+  } = props;
 
   let label;
   if (labelProp) {
@@ -31,7 +42,7 @@
     <>
       {label}
       <input
-        className={css.input}
+        className={`${css.input} ${className}`}
         id={id}
         disabled={disabled}
         {...rest}
@@ -42,8 +53,8 @@
 }
 
 const ForwardedInput: React.AbstractComponent<
-  Props,
+  InputProps,
   HTMLInputElement,
-> = React.forwardRef<Props, HTMLInputElement>(Input);
+> = React.forwardRef<InputProps, HTMLInputElement>(Input);
 
 export default ForwardedInput;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -180,4 +180,5 @@
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
+  --show-password-bg-hover: var(--shades-black-70);
 }