diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index 988b724a4..69c13cbbd 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -19,9 +19,3 @@ input.components-filterinput-wrapper {
 input.components-filterinput-wrapper:focus {
   width: auto;
 }
-
-/* highlighted part of the suggestion - phrase in the input that matches it */
-mark.highlight {
-  padding: 0;
-  background-color: inherit;
-}
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index 430c8ab98..6f2dda1c2 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -102,7 +102,15 @@ const FilterInput = observer(
     };
 
     renderSuggestion = (suggestion, { query, isHighlighted }) => {
-      return <Highlight search={query}>{suggestion}</Highlight>;
+      return (
+        <Highlight
+          matchElement="span"
+          matchClass="font-weight-bold"
+          search={query}
+        >
+          {suggestion}
+        </Highlight>
+      );
     };
 
     renderInputComponent = inputProps => {