diff --git a/app/soapbox/components/showable_password.js b/app/soapbox/components/showable_password.js
new file mode 100644
index 000000000..a6dbdad24
--- /dev/null
+++ b/app/soapbox/components/showable_password.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import IconButton from 'soapbox/components/icon_button';
+import { FormPropTypes, InputContainer, LabelInputContainer } from 'soapbox/features/forms';
+
+const messages = defineMessages({
+  showPassword: { id: 'forms.show_password', defaultMessage: 'Show password' },
+  hidePassword: { id: 'forms.hide_password', defaultMessage: 'Hide password' },
+});
+
+export default @injectIntl
+class ShowablePassword extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    label: FormPropTypes.label,
+    className: PropTypes.string,
+    hint: PropTypes.node,
+    error: PropTypes.bool,
+  }
+
+  state = {
+    revealed: false,
+  }
+
+  toggleReveal = () => {
+    if (this.props.onToggleVisibility) {
+      this.props.onToggleVisibility();
+    } else {
+      this.setState({ revealed: !this.state.revealed });
+    }
+  }
+
+  render() {
+    const { intl, hint, error, label, className, ...props } = this.props;
+    const { revealed } = this.state;
+
+    const revealButton = (
+      <IconButton
+        src={revealed ? require('@tabler/icons/icons/eye.svg') : require('@tabler/icons/icons/eye-off.svg')}
+        onClick={this.toggleReveal}
+        title={intl.formatMessage(revealed ? messages.hidePassword : messages.showPassword)}
+      />
+    );
+
+    return (
+      <InputContainer {...this.props} extraClass={classNames('showable-password', className)}>
+        {label ? (
+          <LabelInputContainer label={label}>
+            <input {...props} type={revealed ? 'text' : 'password'} />
+            {revealButton}
+          </LabelInputContainer>
+        ) : (<>
+          <input {...props} type={revealed ? 'text' : 'password'} />
+          {revealButton}
+        </>)}
+      </InputContainer>
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index 842e38832..fbfe4afb3 100644
--- a/app/soapbox/features/auth_login/components/login_form.js
+++ b/app/soapbox/features/auth_login/components/login_form.js
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { getFeatures } from 'soapbox/utils/features';
 import { getBaseURL } from 'soapbox/utils/state';
+import ShowablePassword from 'soapbox/components/showable_password';
 
 const messages = defineMessages({
   username: { id: 'login.fields.username_placeholder', defaultMessage: 'Username' },
@@ -45,19 +46,21 @@ class LoginForm extends ImmutablePureComponent {
                 required
               />
             </div>
-            <div className='input password user_password'>
+            <ShowablePassword
+              aria-label={intl.formatMessage(messages.password)}
+              className='password user_password'
+              placeholder={intl.formatMessage(messages.password)}
+              type='password'
+              name='password'
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              required
+            />
+            {/* <div className='input password user_password'>
               <input
-                aria-label={intl.formatMessage(messages.password)}
-                className='password'
-                placeholder={intl.formatMessage(messages.password)}
-                type='password'
-                name='password'
-                autoComplete='off'
-                autoCorrect='off'
-                autoCapitalize='off'
-                required
               />
-            </div>
+            </div> */}
             <p className='hint subtle-hint'>
               {hasResetPasswordAPI ? (
                 <Link to='/auth/reset_password'>
diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index a4c52ef62..ff8c987ae 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
   SimpleInput,
@@ -231,7 +232,7 @@ class RegistrationForm extends ImmutablePureComponent {
                   <FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
                 </div>
               )}
-              <SimpleInput
+              <ShowablePassword
                 placeholder={intl.formatMessage(messages.password)}
                 name='password'
                 type='password'
@@ -243,7 +244,7 @@ class RegistrationForm extends ImmutablePureComponent {
                 error={passwordMismatch === true}
                 required
               />
-              <SimpleInput
+              <ShowablePassword
                 placeholder={intl.formatMessage(messages.confirm)}
                 name='password_confirmation'
                 type='password'
diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index 2327f70a4..f54ed2a6b 100644
--- a/app/soapbox/features/security/index.js
+++ b/app/soapbox/features/security/index.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../ui/components/column';
 import Button from 'soapbox/components/button';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
-  SimpleInput,
   FieldsGroup,
   TextInput,
 } from 'soapbox/features/forms';
@@ -141,7 +141,7 @@ class ChangeEmailForm extends ImmutablePureComponent {
               onChange={this.handleInputChange}
               value={this.state.email}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
@@ -208,21 +208,21 @@ class ChangePasswordForm extends ImmutablePureComponent {
         <h2>{intl.formatMessage(messages.passwordHeader)}</h2>
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.oldPasswordFieldLabel)}
               name='oldPassword'
               onChange={this.handleInputChange}
               value={this.state.oldPassword}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.newPasswordFieldLabel)}
               name='newPassword'
               onChange={this.handleInputChange}
               value={this.state.newPassword}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.confirmationFieldLabel)}
               name='confirmation'
@@ -392,7 +392,7 @@ class DeactivateAccount extends ImmutablePureComponent {
         </p>
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 79c86551c..816abab8a 100644
--- a/app/soapbox/features/security/mfa_form.js
+++ b/app/soapbox/features/security/mfa_form.js
@@ -11,9 +11,9 @@ import LoadingIndicator from 'soapbox/components/loading_indicator';
 import Button from 'soapbox/components/button';
 import { changeSetting, getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
-  SimpleInput,
   FieldsGroup,
   TextInput,
 } from 'soapbox/features/forms';
@@ -144,7 +144,7 @@ class DisableOtpForm extends ImmutablePureComponent {
           </h1>
           <div><FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' /></div>
           <div><FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth:' /></div>
-          <SimpleInput
+          <ShowablePassword
             type='password'
             name='password'
             onChange={this.handleInputChange}
@@ -313,7 +313,7 @@ class OtpConfirmForm extends ImmutablePureComponent {
                 />
 
                 <div><FormattedMessage id='mfa.mfa_setup_enter_password' defaultMessage='Enter your current password to confirm your identity:' /></div>
-                <SimpleInput
+                <ShowablePassword
                   type='password'
                   name='password'
                   onChange={this.handleInputChange}
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 8aea88a1b..f240e4ab4 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -402,6 +402,8 @@
   "follow_request.authorize": "Autoryzuj",
   "follow_request.reject": "Odrzuć",
   "forms.copy": "Kopiuj",
+  "forms.hide_password": "Ukryj hasło",
+  "forms.show_password": "Pokaż hasło",
   "getting_started.open_source_notice": "{code_name} jest oprogramowaniem o otwartym źródle. Możesz pomóc w rozwoju lub zgłaszać błędy na GitLabie tutaj: {code_link} (v{code_version}).",
   "group.detail.archived_group": "Zarchiwizowana grupa",
   "group.members.empty": "Ta grupa nie ma żadnych członków.",
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 53a20ac9d..339151f62 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -97,6 +97,7 @@ $fluid-breakpoint: $maximum-width + 20px;
           }
 
           .input {
+            flex: 1;
             margin-bottom: 0;
             margin-right: 10px;
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index b28676a32..67ca9ce34 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -608,6 +608,31 @@ code {
     margin-bottom: 14px;
     font-weight: bold;
   }
+
+  .showable-password {
+    position: relative;
+
+    input {
+      padding-right: 36px;
+    }
+
+    .icon-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 41px;
+      width: 36px;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      color: var(--primary-text-color);
+
+      .svg-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
 }
 
 .block-icon {