diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index cf206da3b..daceee0c6 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -238,7 +238,7 @@ const History = observer(
               <button
                 ref={ref}
                 onClick={this.collapse.toggle}
-                className="input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
+                className="input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
                 type="button"
                 data-toggle="dropdown"
                 aria-haspopup="true"
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..6c4a5916c 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -2,9 +2,9 @@
 
 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\\">
+    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -45,7 +45,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
     </div>
   </div>
   <div class=\\"input-group-append bg-transparent\\">
-    <button class=\\"input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
+    <button class=\\"input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon\\"
             type=\\"button\\"
             data-toggle=\\"dropdown\\"
             aria-haspopup=\\"true\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index e93c79e21..ad4148090 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -157,12 +157,12 @@ 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"
               }`}
             >
               <div className="input-group-prepend">
-                <span className="input-group-text px-2 border-0 rounded-0 bg-transparent text-white">
+                <span className="input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon">
                   <FontAwesomeIcon icon={faSearch} />
                 </span>
               </div>
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/Components/NavBar.scss b/ui/src/Styles/Components/NavBar.scss
index f8640f6b1..4f5722017 100644
--- a/ui/src/Styles/Components/NavBar.scss
+++ b/ui/src/Styles/Components/NavBar.scss
@@ -1,12 +1,15 @@
 .navbar-brand {
   min-width: 2.5rem;
-
-  &:hover,
-  &:focus {
-    color: $green !important;
-  }
 }
 
 .components-navbar-button:hover {
   border-bottom: $border-width solid $info;
 }
+
+.components-navbar-icon {
+  color: $navbar-dark-color;
+
+  &.cursor-pointer:hover {
+    color: $navbar-dark-hover-color;
+  }
+}
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 42150504e..e5b8e8929 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -22,6 +22,11 @@ $light: $gray-800;
 // make links light gray by default instead of green
 $link-color: $gray-400;
 
+$navbar-dark-brand-color: $navbar-dark-color;
+$navbar-dark-brand-hover-color: $white;
+$navbar-dark-hover-color: $white;
+$navbar-dark-active-color: $white;
+
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: $gray-800;
 
@@ -64,6 +69,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..6ee18c1f8 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -20,6 +20,11 @@ $btn-active-box-shadow: 0;
 // make links light gray by default instead of green
 $link-color: $gray-700;
 
+$navbar-dark-brand-color: $navbar-dark-color;
+$navbar-dark-brand-hover-color: $gray-500;
+$navbar-dark-hover-color: $gray-500;
+$navbar-dark-active-color: $gray-500;
+
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: #fff;
 
@@ -55,6 +60,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;