diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 404d0a2e10..b79a9966bb 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -212,18 +212,26 @@
                         <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
                             <i class="fa fa-close fa-lg"></i>
                         </a>
+                        <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
+                        <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
                         <div class="row-main">
-                            <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
                             <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
                                    class="row-label" placeholder="{{'name' | i18n}}">
-                            <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
                             <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
                                    *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
-                            <input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
+                            <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
+                                   name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
                                    *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
                         </div>
                         <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
                                [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
+                        <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
+                               (click)="toggleFieldValue(f)">
+                                <i class="fa fa-lg"
+                                   [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
                 <div class="box-content-row">
diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts
index e8feab704d..51cb6c6ca7 100644
--- a/src/app/vault/add-edit.component.ts
+++ b/src/app/vault/add-edit.component.ts
@@ -188,4 +188,9 @@ export class AddEditComponent implements OnChanges {
         this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' });
         this.showPassword = !this.showPassword;
     }
+
+    toggleFieldValue(field: FieldView) {
+        const f = (field as any);
+        f.showValue = !f.showValue;
+    }
 }
diff --git a/src/scss/box.scss b/src/scss/box.scss
index 68a55d91fb..aaa4c7018f 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -72,21 +72,23 @@
                 margin-bottom: 5px;
             }
 
+            .row-main {
+                flex-grow: 1;
+            }
+
             &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
             &.box-content-row-slider, &.box-content-row-cf {
                 display: flex;
                 align-items: center;
             }
 
-            &.box-content-row-flex {
-                .row-main {
-                    flex-grow: 1;
-                }
-            }
-
             &.box-content-row-cf {
                 width: 100%;
 
+                input:not([type="checkbox"]) {
+                    width: 100%;
+                }
+
                 > a {
                     padding: 8px 10px 8px 5px;
                     color: $brand-danger;