diff --git a/awx/ui/client/features/credentials/legacy.credentials.js b/awx/ui/client/features/credentials/legacy.credentials.js
index 95cda7e94a..b6cb9ffa51 100644
--- a/awx/ui/client/features/credentials/legacy.credentials.js
+++ b/awx/ui/client/features/credentials/legacy.credentials.js
@@ -35,7 +35,10 @@ function LegacyCredentialsService (pathService) {
                     let path = GetBasePath(list.basePath) || GetBasePath(list.name);
                     return qs.search(path, $stateParams[`${list.iterator}_search`]);
                 }
-            ]
+            ],
+            credentialType: ['CredentialTypeModel', CredentialType => {
+                return new CredentialType('get');
+            }]
         }
     };
 
diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index 7ac1b4c392..087eaddfcb 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -47,12 +47,18 @@
     .at-mixin-InputButton();
 }
 
-.at-Input-button--fixed-sm {
+.at-Input-button--fixed-xs {
     .at-mixin-InputButton();
     min-width: @at-width-input-button-sm;
     height: @at-height-input;
 }
 
+.at-Input-button--fixed-sm {
+    .at-mixin-InputButton();
+    min-width: @at-width-input-button-md;
+    height: @at-height-input;
+}
+
 .at-Input-button--fixed-md {
     .at-mixin-InputButton();
     display: inherit;
diff --git a/awx/ui/client/lib/components/input/secret.directive.js b/awx/ui/client/lib/components/input/secret.directive.js
index 3a5f02df33..5a0a9876e2 100644
--- a/awx/ui/client/lib/components/input/secret.directive.js
+++ b/awx/ui/client/lib/components/input/secret.directive.js
@@ -20,11 +20,13 @@ function AtInputSecretController (baseInputController) {
         scope = _scope_;
 
         if (!scope.state._value || scope.state._promptOnLaunch) {
+            scope.mode = 'input';
             scope.state._buttonText = vm.strings.get('SHOW');
             scope.type = 'password';
 
             vm.toggle = vm.toggleShowHide;
         } else {
+            scope.mode = 'encrypted';
             scope.state._buttonText = vm.strings.get('REPLACE');
             scope.state._placeholder = vm.strings.get('ENCRYPTED');
             vm.toggle = vm.toggleRevertReplace;
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index b3d0026d40..2c1523e7e6 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -4,7 +4,11 @@
 
         <div class="input-group">
             <span class="input-group-btn at-InputGroup-button">
-                <button class="btn at-ButtonHollow--white at-Input-button--fixed-sm"
+                <button class="btn at-ButtonHollow--white"
+                        ng-class="{
+                            'at-Input-button--fixed-xs': mode === 'input',
+                            'at-Input-button--fixed-sm': mode === 'encrypted'
+                        }"
                         ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
                         ng-click="vm.toggle()">
                     {{ state._buttonText }}
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less
index 05190edff7..3669549531 100644
--- a/awx/ui/client/lib/theme/_mixins.less
+++ b/awx/ui/client/lib/theme/_mixins.less
@@ -28,9 +28,8 @@
 }
 
 .at-mixin-InputButton () {
-    display: block;
     height: @at-height-button;
-    line-height: 1;
+    padding: 0 @at-padding-button-horizontal;
 
     &, &:active, &:hover, &:focus {
         color: @at-color-button-text-default;
diff --git a/awx/ui/client/src/credentials/credentials.list.js b/awx/ui/client/src/credentials/credentials.list.js
index 74528404bd..2ca40d2840 100644
--- a/awx/ui/client/src/credentials/credentials.list.js
+++ b/awx/ui/client/src/credentials/credentials.list.js
@@ -9,7 +9,6 @@
 
 export default ['i18n', function(i18n) {
     return {
-
         name: 'credentials',
         iterator: 'credential',
         selectTitle: i18n._('Add Credentials'),
@@ -31,8 +30,8 @@ export default ['i18n', function(i18n) {
                 dataPlacement: 'top'
             },
             kind: {
-                label: i18n._('Type'),
-                ngBind: 'credential.kind_label',
+                label: i18n._('Kind'),
+                ngBind: 'credential.kind',
                 excludeModal: true,
                 nosort: true,
                 columnClass: 'col-md-2 hidden-sm hidden-xs'
diff --git a/awx/ui/client/src/credentials/list/credentials-list.controller.js b/awx/ui/client/src/credentials/list/credentials-list.controller.js
index 1fa0c3a352..244afe6cc5 100644
--- a/awx/ui/client/src/credentials/list/credentials-list.controller.js
+++ b/awx/ui/client/src/credentials/list/credentials-list.controller.js
@@ -4,11 +4,11 @@
  * All Rights Reserved
  *************************************************/
 
-export default ['$scope', 'Rest', 'CredentialList', 'Prompt',
-    'ProcessErrors', 'GetBasePath', 'Wait', '$state', '$filter', 'rbacUiControlService', 'Dataset', 'i18n',
+export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ProcessErrors', 'GetBasePath',
+        'Wait', '$state', '$filter', 'rbacUiControlService', 'Dataset', 'credentialType', 'i18n',
     function($scope, Rest, CredentialList, Prompt,
     ProcessErrors, GetBasePath, Wait, $state, $filter, rbacUiControlService, Dataset,
-    i18n) {
+    credentialType, i18n) {
 
         var list = CredentialList,
             defaultUrl = GetBasePath('credentials');
@@ -27,6 +27,10 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt',
             $scope[list.name] = $scope[`${list.iterator}_dataset`].results;
 
             $scope.selected = [];
+
+            $scope[list.name].forEach(credential => {
+                credential.kind = credentialType.getById(credential.credential_type).name;
+            });
         }
 
         $scope.$on(`${list.iterator}_options`, function(event, data){