diff --git a/app/soapbox/components/showable_password.js b/app/soapbox/components/showable_password.js
new file mode 100644
index 0000000000..a6dbdad242
Binary files /dev/null and b/app/soapbox/components/showable_password.js differ
diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
index ad357af030..0588d8a02f 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
@@ -25,19 +25,48 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"
@@ -89,19 +118,48 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"
diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
index 949f715e2c..0084bc159d 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
@@ -28,19 +28,48 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"
diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index 842e38832e..8368cbb685 100644
Binary files a/app/soapbox/features/auth_login/components/login_form.js and b/app/soapbox/features/auth_login/components/login_form.js differ
diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index a4c52ef62e..f0d27c2976 100644
Binary files a/app/soapbox/features/auth_login/components/registration_form.js and b/app/soapbox/features/auth_login/components/registration_form.js differ
diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index 2327f70a42..e19b1f0b71 100644
Binary files a/app/soapbox/features/security/index.js and b/app/soapbox/features/security/index.js differ
diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 79c86551cd..78525af772 100644
Binary files a/app/soapbox/features/security/mfa_form.js and b/app/soapbox/features/security/mfa_form.js differ
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 0fb0bf97fe..a907d12198 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -424,6 +424,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 b4c4034e0f..af281ff00a 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 b28676a323..67ca9ce347 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 {