diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js
index 634d9aa..8cb9b9e 100644
--- a/src/components/forms/formGenerator.js
+++ b/src/components/forms/formGenerator.js
@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 
+import passwordVisibleImg from '../../images/password-visible.png'
+import passwordHiddenImg from '../../images/password-hidden.png'
+
 /**
  *
  * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
@@ -180,19 +183,29 @@ const TextInputGenerator = ({
 const PasswordInputGenerator = ({
     input, info
 }) => {
+
+    const [contentIsHidden, setContentIsHidden] = useState(true)
+
     return (
         <div className="form-field">
             <label>
-                {input.name}
+                { input.name }
             </label>
-            <input
-                id={input.name + info.action + info.endpoint + 'Input'}
-                autoComplete='off'
-                ref={input.ref}
-                type='password'
-                onChange={input.onChange}
-                className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
-            />
+            <div className="horizontal-container-input">
+                <input
+                    id={input.name + info.action + info.endpoint + 'Input'}
+                    autoComplete='off'
+                    ref={input.ref}
+                    type={ contentIsHidden ? 'password' : 'text' }
+                    onChange={input.onChange}
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
+                />
+                <img
+                    src={ contentIsHidden ? passwordHiddenImg : passwordVisibleImg }
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-visible-incorrect" }
+                    onClick={ () => { setContentIsHidden(!contentIsHidden) } }
+                />
+            </div>
             <div
                 className="popup"
                 style={ [ "Empty", "Success"].includes(input.validationInfo) ? {"display": "none", "height": "0px"} : {"display": "block"} }
@@ -200,6 +213,7 @@ const PasswordInputGenerator = ({
                 <div className="popup-content">
                     { input.validationInfo }
                 </div>
+
             </div>
         </div>
     )
diff --git a/src/images/password-hidden.png b/src/images/password-hidden.png
new file mode 100644
index 0000000..7d71841
Binary files /dev/null and b/src/images/password-hidden.png differ
diff --git a/src/images/password-visible.png b/src/images/password-visible.png
new file mode 100644
index 0000000..c97068e
Binary files /dev/null and b/src/images/password-visible.png differ
diff --git a/src/styles/general.scss b/src/styles/general.scss
index effd229..7fbc23b 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -161,6 +161,7 @@ body, html {
     position: relative; // Required for z-index to take effect
 
     .form-field {
+      width: 100%;
       margin-bottom: 15px;
 
       label {
@@ -197,6 +198,28 @@ body, html {
           background: rgba(120,8,0,1);
           border: 1px solid red;
       }
+
+      .horizontal-container-input {
+        display: block;
+
+        input {
+          width: 80%;
+        }
+
+        img {
+          float: right;
+          width: 20px;
+          height: 20px;
+          padding-top: 5%;
+          filter: invert(27%) sepia(97%) saturate(3498%) hue-rotate(97deg) brightness(98%) contrast(103%);
+        }
+
+        // convert hex to filter: https://codepen.io/sosuke/pen/Pjoqqp
+
+        .input-visible-incorrect {
+          filter: invert(8%) sepia(63%) saturate(4888%) hue-rotate(8deg) brightness(113%) contrast(112%);
+        }
+      }
     }
 
     .popup {
diff --git a/src/styles/landing.scss b/src/styles/landing.scss
deleted file mode 100644
index e69de29..0000000