diff --git a/awx/ui/client/features/jobs/jobsList.controller.js b/awx/ui/client/features/jobs/jobsList.controller.js
index 6284bae7bd..d8f9e4343c 100644
--- a/awx/ui/client/features/jobs/jobsList.controller.js
+++ b/awx/ui/client/features/jobs/jobsList.controller.js
@@ -66,6 +66,15 @@ function ListJobsController (
 
     vm.jobTypes = mapChoices(unifiedJob.options('actions.GET.type.choices'));
 
+    vm.buildCredentialTags = (credentials) =>
+        credentials.map(credential => {
+            const icon = `${credential.kind}`;
+            const link = `/#/credentials/${credential.id}`;
+            const value = $filter('sanitize')(credential.name);
+
+            return { icon, link, value };
+        });
+
     vm.getSref = ({ type, id }) => {
         let sref;
 
diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html
index 67103ea2da..69831c2dc4 100644
--- a/awx/ui/client/features/jobs/jobsList.view.html
+++ b/awx/ui/client/features/jobs/jobsList.view.html
@@ -66,6 +66,7 @@
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                     tag-values="job.summary_fields.credentials"
                     tags-are-creds="true">
+                    <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(job.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
                 </at-row-item>
                 <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                 </labels-list>
diff --git a/awx/ui/client/features/output/details.component.js b/awx/ui/client/features/output/details.component.js
index 0fad725040..35a59d128e 100644
--- a/awx/ui/client/features/output/details.component.js
+++ b/awx/ui/client/features/output/details.component.js
@@ -417,7 +417,7 @@ function buildCredentialDetails (credential) {
     const icon = `${credential.kind}`;
     const link = `/#/credentials/${credential.id}`;
     const tooltip = strings.get('tooltips.CREDENTIAL');
-    const value = credential.name;
+    const value = $filter('sanitize')(credential.name);
 
     return { icon, link, tooltip, value };
 }
diff --git a/awx/ui/client/features/templates/templatesList.controller.js b/awx/ui/client/features/templates/templatesList.controller.js
index 87cb639350..e5ae108b1a 100644
--- a/awx/ui/client/features/templates/templatesList.controller.js
+++ b/awx/ui/client/features/templates/templatesList.controller.js
@@ -174,7 +174,7 @@ function ListTemplatesController(
             const icon = `${credential.kind}`;
             const link = `/#/credentials/${credential.id}`;
             const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL');
-            const value = credential.name;
+            const value = $filter('sanitize')(credential.name);
 
             return { icon, link, tooltip, value };
         });