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 ad357af03..0588d8a02 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 949f715e2..0084bc159 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"