diff --git a/src/app/accounts/apiKey.component.html b/src/app/accounts/apiKey.component.html
index 2d817a59..ad4272d8 100644
--- a/src/app/accounts/apiKey.component.html
+++ b/src/app/accounts/apiKey.component.html
@@ -20,7 +20,7 @@
                                     [(ngModel)]="clientSecret" class="form-control">
                                     <div class="input-group-append">
                                         <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleSecret()">
-                                            <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showSecret, 'fa-eye-slash': showSecret}"></i>
+                                            <i class="fa fa-lg" aria-hidden="true"[ngClass]="showSecret ? 'fa-eye-slash' : 'fa-eye'"></i>
                                         </button>
                                     </div>
                                 </div>
diff --git a/src/app/tabs/settings.component.html b/src/app/tabs/settings.component.html
index f3f4f5fd..09a73136 100644
--- a/src/app/tabs/settings.component.html
+++ b/src/app/tabs/settings.component.html
@@ -126,7 +126,7 @@
                                 [(ngModel)]="ldap.password">
                                 <div class="input-group-append">
                                     <button type="button" class="btn btn-outline-secondary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleLdapPassword()">
-                                        <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showLdapPassword, 'fa-eye-slash': showLdapPassword}"></i>
+                                        <i class="fa fa-lg" aria-hidden="true"[ngClass]="showLdapPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                                     </button>
                                 </div>
                             </div>
@@ -151,7 +151,7 @@
                             [(ngModel)]="azure.key">
                             <div class="input-group-append">
                                 <button type="button" class="btn btn-outline-secondary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleAzureKey()">
-                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showAzureKey, 'fa-eye-slash': showAzureKey}"></i>
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="showAzureKey ? 'fa-eye-slash' : 'fa-eye'"></i>
                                 </button>
                             </div>
                         </div>  
@@ -170,7 +170,7 @@
                             [(ngModel)]="okta.token">
                             <div class="input-group-append"> 
                                 <button type="button" class="btn btn-outline-secondary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOktaKey()">
-                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOktaKey, 'fa-eye-slash': showOktaKey}"></i>
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="showOktaKey ? 'fa-eye-slash' : 'fa-eye'"></i>
                                 </button>
                             </div>
                         </div>
@@ -189,7 +189,7 @@
                             [(ngModel)]="oneLogin.clientSecret">
                             <div class="input-group-append">
                                 <button type="button" class="btn btn-outline-secondary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOneLoginSecret()">
-                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOneLoginSecret, 'fa-eye-slash': showOneLoginSecret}"></i>
+                                    <i class="fa fa-lg" aria-hidden="true"[ngClass]="showOneLoginSecret ? 'fa-eye-slash' : 'fa-eye'"></i>
                                 </button>
                             </div>
                         </div>
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 01ceb2eb..3c8e9fec 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -118,3 +118,27 @@ ul.testing-list {
     }
 }
 
+.btn[class*="btn-outline-"] {
+    &:not(:hover) {
+        border-color: $secondary;
+        background-color: #fbfbfb;
+    }
+}
+
+.btn-outline-secondary {
+    color: $text-muted;
+
+    &:hover:not(:disabled) {
+        color: $body-color;
+    }
+
+    &:disabled {
+        opacity: 1;
+    }
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($primary), $primary, 15%), .5);
+    }
+}
+