diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
index f9da87833..2e6fd634a 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<FilterInput /> matches snapshot on default render 1`] = `
 "
-<div class=\\"input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light bg-transparent\\">
+<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"input-group-prepend\\">
     <span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent text-white\\">
       <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index e93c79e21..20438e119 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -157,7 +157,7 @@ const FilterInput = onClickOutside(
             data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
           >
             <div
-              className={`input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light ${
+              className={`input-group w-100 mr-2 components-filterinput-outer ${
                 this.inputStore.focused ? "bg-focused" : "bg-transparent"
               }`}
             >
diff --git a/ui/src/Styles/Components/FilterInput.scss b/ui/src/Styles/Components/FilterInput.scss
index 65a7e542e..0a95d919e 100644
--- a/ui/src/Styles/Components/FilterInput.scss
+++ b/ui/src/Styles/Components/FilterInput.scss
@@ -1,3 +1,10 @@
+.input-group.components-filterinput-outer {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: $border-width solid $filterinput-border;
+}
+
 .form-control.components-filterinput {
   cursor: text;
   height: auto;
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 42150504e..77bcfcfa5 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -64,6 +64,7 @@ $accordion-active-bg: $gray-700;
 $filter-input-hoover-bg: $gray-700;
 $filter-input-hoover-color: $white;
 $placeholder-color: $gray-600;
+$filterinput-border: $navbar-dark-color;
 
 $datepicker__background-color: $gray-700;
 $datepicker__border-color: $gray-800;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 54073aa51..0bc003d90 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -55,6 +55,7 @@ $accordion-active-bg: $gray-200;
 $filter-input-hoover-bg: $white;
 $filter-input-hoover-color: $black;
 $placeholder-color: $secondary;
+$filterinput-border: $navbar-dark-color;
 
 $datepicker__background-color: $white;
 $datepicker__border-color: $gray-300;