diff --git a/awx/ui/client/src/job-templates/labels/labelsList.block.less b/awx/ui/client/src/job-templates/labels/labelsList.block.less
index fe9a1b9efb..d851bd545e 100644
--- a/awx/ui/client/src/job-templates/labels/labelsList.block.less
+++ b/awx/ui/client/src/job-templates/labels/labelsList.block.less
@@ -18,8 +18,8 @@
     padding: 2px 10px;
     margin: 4px 0px;
     font-size: 12px;
-    color: @default-bg;
-    background-color: @default-link;
+    color: @default-interface-txt;
+    background-color: @default-list-header-bg;
     margin-right: 5px;
     max-width: 100%;
     white-space: nowrap;
@@ -42,6 +42,8 @@
 }
 
 .LabelList-tag--deletable {
+    color: @default-bg;
+    background-color: @default-link;
     margin-right: 0px;
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
diff --git a/awx/ui/client/src/job-templates/labels/labelsList.partial.html b/awx/ui/client/src/job-templates/labels/labelsList.partial.html
index 325567c656..0bcc5f795a 100644
--- a/awx/ui/client/src/job-templates/labels/labelsList.partial.html
+++ b/awx/ui/client/src/job-templates/labels/labelsList.partial.html
@@ -1,10 +1,10 @@
 <div class="LabelList-tagContainer" ng-repeat="label in labels">
     <div class="LabelList-deleteContainer"
         ng-click="deleteLabel(job_template.id, job_template.name, label.id, label.name)"
-        ng-show="showDelete">
+        ng-show="showDelete && job_template.summary_fields.can_edit">
         <i class="fa fa-times LabelList-tagDelete"></i>
     </div>
-    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : showDelete}">
+    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && job_template.summary_fields.can_edit)}">
         <span class="LabelList-name">{{ label.name }}</span>
     </div>
 </div>