diff --git a/src/app/accounts/apiKey.component.html b/src/app/accounts/apiKey.component.html
index 7e497fa6..710bacb6 100644
--- a/src/app/accounts/apiKey.component.html
+++ b/src/app/accounts/apiKey.component.html
@@ -15,8 +15,15 @@
                         <div class="form-group">
                             <div class="row-main">
                                 <label for="client_secret">{{'clientSecret' | i18n}}</label>
-                                <input id="client_secret" name="ClientSecret"
+                                <div class="input-group">
+                                    <input type="{{showSecret ? 'text' : 'password'}}" id="client_secret" name="ClientSecret"
                                     [(ngModel)]="clientSecret" class="form-control">
+                                    <div class="input-group-append">
+                                        <button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleSecret()">
+                                            <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showSecret, 'fa-eye-slash': showSecret}"></i>
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="d-flex">
diff --git a/src/app/accounts/apiKey.component.ts b/src/app/accounts/apiKey.component.ts
index 0e46788d..0df06b09 100644
--- a/src/app/accounts/apiKey.component.ts
+++ b/src/app/accounts/apiKey.component.ts
@@ -29,6 +29,7 @@ export class ApiKeyComponent {
 
     formPromise: Promise<any>;
     successRoute = '/tabs/dashboard';
+    showSecret: boolean = false;
 
     constructor(private authService: AuthService, private apiKeyService: ApiKeyService, private router: Router,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
@@ -77,4 +78,8 @@ export class ApiKeyComponent {
             modal.close();
         });
     }
+    toggleSecret() {
+        this.showSecret = !this.showSecret;
+        document.getElementById('clientSecret').focus();
+    }
 }
diff --git a/src/app/tabs/settings.component.html b/src/app/tabs/settings.component.html
index 0131a4a2..bd67de09 100644
--- a/src/app/tabs/settings.component.html
+++ b/src/app/tabs/settings.component.html
@@ -121,8 +121,15 @@
                         </div>
                         <div class="form-group">
                             <label for="password">{{'password' | i18n}}</label>
-                            <input type="password" class="form-control" id="password" name="Password"
+                            <div class="input-group">                          
+                                <input type="{{showLdapPassword ? 'text' : 'password'}}" class="form-control" id="password" name="Password"
                                 [(ngModel)]="ldap.password">
+                                <div class="input-group-append">
+                                    <button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleLdapPassword()">
+                                        <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showLdapPassword, 'fa-eye-slash': showLdapPassword}"></i>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -139,7 +146,15 @@
                     </div>
                     <div class="form-group">
                         <label for="secretKey">{{'secretKey' | i18n}}</label>
-                        <input type="text" class="form-control" id="secretKey" name="SecretKey" [(ngModel)]="azure.key">
+                        <div class="input-group">
+                            <input type="{{showAzureKey ? 'text' : 'password'}}" class="form-control" id="secretKey" name="SecretKey"
+                            [(ngModel)]="azure.key">
+                            <div class="input-group-append">
+                                <button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleAzureKey()">
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showAzureKey, 'fa-eye-slash': showAzureKey}"></i>
+                                </button>
+                            </div>
+                        </div>  
                     </div>
                 </div>
                 <div [hidden]="directory != directoryType.Okta">
@@ -150,8 +165,15 @@
                     </div>
                     <div class="form-group">
                         <label for="oktaToken">{{'token' | i18n}}</label>
-                        <input type="text" class="form-control" id="oktaToken" name="OktaToken"
+                        <div class="input-group">
+                            <input type="{{showOktaKey ? 'text' : 'password'}}" class="form-control" id="oktaToken" name="OktaToken"
                             [(ngModel)]="okta.token">
+                            <div class="input-group-append"> 
+                                <button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOktaKey()">
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOktaKey, 'fa-eye-slash': showOktaKey}"></i>
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div [hidden]="directory != directoryType.OneLogin">
@@ -162,8 +184,15 @@
                     </div>
                     <div class="form-group">
                         <label for="oneLoginClientSecret">{{'clientSecret' | i18n}}</label>
-                        <input type="text" class="form-control" id="oneLoginClientSecret" name="OneLoginClientSecret"
+                        <div class="input-group">
+                            <input type="{{showOneLoginSecret ? 'text' : 'password'}}" class="form-control" id="oneLoginClientSecret" name="OneLoginClientSecret"
                             [(ngModel)]="oneLogin.clientSecret">
+                            <div class="input-group-append">
+                                <button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOneLoginSecret()">
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOneLoginSecret, 'fa-eye-slash': showOneLoginSecret}"></i>
+                                </button>
+                            </div>
+                        </div>
                     </div>
                     <div class="form-group">
                         <label for="oneLoginRegion">{{'region' | i18n}}</label>
diff --git a/src/app/tabs/settings.component.ts b/src/app/tabs/settings.component.ts
index 90e6337a..b58ac999 100644
--- a/src/app/tabs/settings.component.ts
+++ b/src/app/tabs/settings.component.ts
@@ -38,6 +38,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
     oneLogin = new OneLoginConfiguration();
     sync = new SyncConfiguration();
     directoryOptions: any[];
+    showLdapPassword: boolean = false;
+    showAzureKey: boolean = false;
+    showOktaKey: boolean = false;
+    showOneLoginSecret: boolean = false;
 
     constructor(private i18nService: I18nService, private configurationService: ConfigurationService,
         private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
@@ -126,4 +130,20 @@ export class SettingsComponent implements OnInit, OnDestroy {
         filePicker.type = 'file';
         filePicker.value = '';
     }
+    toggleLdapPassword() {
+        this.showLdapPassword = !this.showLdapPassword;
+        document.getElementById('masterPassword').focus();
+    }
+    toggleAzureKey() {
+        this.showAzureKey = !this.showAzureKey;
+        document.getElementById('masterPassword').focus();
+    }
+    toggleOktaKey() {
+        this.showOktaKey = !this.showOktaKey;
+        document.getElementById('masterPassword').focus();
+    }
+    toggleOneLoginSecret() {
+        this.showOneLoginSecret = !this.showOneLoginSecret;
+        document.getElementById('masterPassword').focus();
+    }
 }