diff --git a/css/form.css b/css/form.css
index 31fe6149..32be82c0 100644
--- a/css/form.css
+++ b/css/form.css
@@ -7,6 +7,13 @@
   opacity: 0.65;
 }
 
+.fl-form .fa-eye, .fl-form .fa-eye-slash {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+  display: inline-block;
+}
+
 .fl-form.form-offline .cover-form {
   position: absolute;
   top: 0;
diff --git a/js/build.templates.js b/js/build.templates.js
index 96d9903e..afb9e97f 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"isShowPassword ? 'fa-eye-slash' : 'fa-eye'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index 4a9baa58..0b18f85f 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -21,6 +21,10 @@ Fliplet.FormBuilder.field('password', {
       type: Boolean,
       default: false
     },
+    canShowPassword: {
+      type: Boolean,
+      default: false
+    },
     passwordConfirmation: {
       type: String,
       default: ''
@@ -56,6 +60,7 @@ Fliplet.FormBuilder.field('password', {
   data: function() {
     return {
       isFocused: false,
+      isShowPassword: false,
       passwordMinLength: 8,
       defaultClass: 'panel-default',
       invalidClass: 'panel-danger',
@@ -141,6 +146,10 @@ Fliplet.FormBuilder.field('password', {
         this.value = oldVal;
         this.updateValue();
       }
+
+      if (!newVal) {
+        this.isShowPassword = false;
+      }
     },
     '$v.passwordConfirmation.$invalid': function(value) {
       if (!value) {
diff --git a/js/interface.templates.js b/js/interface.templates.js
index 8a1d9ad6..85a73db1 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -60,7 +60,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.paragraph"] = H
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n";
+    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\" :disabled=\"canShowPassword\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong :class=\"{ 'text-muted': canShowPassword }\">Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\" :disabled=\"confirm\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\" :class=\"{ 'text-muted': confirm }\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 3251f402..04c53928 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -1,6 +1,6 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <input
-  type="password"
+  :type="isShowPassword ? 'text' : 'password'"
   class="form-control focus-outline"
   :readonly="autogenerate"
   autocomplete="new-password"
@@ -14,6 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
+<i v-if="canShowPassword && value" class="fa" :class="isShowPassword ? 'fa-eye-slash' : 'fa-eye'" v-on:click="isShowPassword = !isShowPassword"></i>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 
 <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.password">
diff --git a/templates/configurations/password.interface.hbs b/templates/configurations/password.interface.hbs
index 016e9422..abdcb7d6 100644
--- a/templates/configurations/password.interface.hbs
+++ b/templates/configurations/password.interface.hbs
@@ -48,9 +48,9 @@
 <div class="form-group" v-if="!autogenerate">
   <label>Ask users to confirm the password before submitting?</label>
   <div class="radio radio-icon">
-    <input type="radio" id="confirm-yes" name="confirm-option" v-bind:value="true" v-model="confirm">
+    <input type="radio" id="confirm-yes" name="confirm-option" v-bind:value="true" v-model="confirm" :disabled="canShowPassword">
     <label for="confirm-yes">
-      <span class="check"><i class="fa fa-circle"></i></span> <strong>Yes</strong> - Add a password confirmation field
+      <span class="check"><i class="fa fa-circle"></i></span> <strong :class="{ 'text-muted': canShowPassword }">Yes</strong> - Add a password confirmation field
     </label>
   </div>
   <div class="radio radio-icon">
@@ -60,3 +60,15 @@
     </label>
   </div>
 </div>
+
+<div class="form-group">
+  <label>Do you want to allow users to show/hide their password when typing?</label>
+  <p class="help-block"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>
+  <div class="checkbox checkbox-icon password-show-checkbox">
+    <input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox" :disabled="confirm">
+    <label for="password-show-checkbox">
+      <span class="check"><i class="fa fa-check"></i></span>
+      <span class="hide-field" :class="{ 'text-muted': confirm }">Yes, please.</span>
+    </label>
+  </div>
+</div>