diff --git a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
index 57cfa5faa3..5b65c1b975 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
@@ -41,9 +41,12 @@
       </BlockSlot>
       <BlockSlot @name="options">
 {{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Option class="value-allow" @value="allow" @selected={{contains 'allow' @filter.accesses}}>Allow</Option>
-        <Option class="value-deny" @value="deny" @selected={{contains 'deny' @filter.accesses}}>Deny</Option>
-        <Option class="value-" @value="app-aware" @selected={{contains 'app-aware' @filter.accesses}}>App aware</Option>
+        <Option class="value-allow" @value="allow" @selected={{contains 'allow'
+        @filter.accesses}}><span>Allow</span></Option>
+        <Option class="value-deny" @value="deny" @selected={{contains 'deny'
+        @filter.accesses}}><span>Deny</span></Option>
+        <Option class="value-" @value="app-aware" @selected={{contains
+        'app-aware' @filter.accesses}}><span>App aware</span></Option>
 {{/let}}
       </BlockSlot>
     </PopoverSelect>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss
index a823657d47..684861f4f7 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss
@@ -1,12 +1,14 @@
 .consul-intention-search-bar {
-  .value-allow button::before {
-    @extend %with-arrow-right-mask, %as-pseudo;
-    color: $green-500;
+  li button span {
+    @extend %pill-700;
   }
-  .value-deny button::before {
-    @extend %with-deny-color-icon, %as-pseudo;
+  .value-allow span {
+    @extend %pill-allow;
   }
-  .value- button::before {
-    @extend %with-layers-mask, %as-pseudo;
+  .value-deny span {
+    @extend %pill-deny;
+  }
+  .value- span {
+    @extend %pill-l7;
   }
 }