diff --git a/ui/src/Styles/Components/FilterInput.scss b/ui/src/Styles/Components/FilterInput.scss
index 998373712..7b25842d3 100644
--- a/ui/src/Styles/Components/FilterInput.scss
+++ b/ui/src/Styles/Components/FilterInput.scss
@@ -38,7 +38,12 @@ input.components-filterinput-wrapper {
 }
 
 .bg-focused {
-  background-color: $bg-focused;
+  @supports (backdrop-filter: blur(1px)) {
+    background-color: rgba($bg-focused, 0.5);
+  }
+  @supports not (backdrop-filter: blur(1px)) {
+    background-color: $bg-focused;
+  }
 }
 
 .input-group.components-filterinput-outer {
diff --git a/ui/src/Styles/Components/Modal.scss b/ui/src/Styles/Components/Modal.scss
index 87d30e124..7453a3225 100644
--- a/ui/src/Styles/Components/Modal.scss
+++ b/ui/src/Styles/Components/Modal.scss
@@ -12,7 +12,7 @@
 }
 
 .modal-content-blur {
-  filter: blur(2px);
+  filter: saturate(50%) blur(6px);
 }
 
 @include media-breakpoint-up(lg) {
@@ -26,7 +26,3 @@
     max-width: $modal-xl + 10;
   }
 }
-
-.modal-backdrop {
-  backdrop-filter: blur(2px);
-}
diff --git a/ui/src/Styles/Components/MountModal.scss b/ui/src/Styles/Components/MountModal.scss
index 2b4d613a8..e51d19be0 100644
--- a/ui/src/Styles/Components/MountModal.scss
+++ b/ui/src/Styles/Components/MountModal.scss
@@ -3,7 +3,6 @@ $move: -50px;
 $opacity-modal: 0;
 
 $duration-bg: 0.2s;
-$opacity-bg: 0.8;
 
 $easing-enter: ease-out;
 $easing-exit: ease-in;
@@ -34,24 +33,26 @@ $easing-exit: ease-in;
 }
 
 .components-animation-backdrop {
-  will-change: opacity;
+  will-change: background-color;
   transform: translateZ(0);
 }
 .components-animation-backdrop-enter {
-  opacity: 0.01;
+  background-color: rgba(30, 30, 30, 0.01);
 }
 .components-animation-backdrop-enter-active {
-  opacity: $opacity-bg;
+  background-color: rgba(30, 30, 30, 0.8);
   transition: opacity $duration-bg $easing-exit;
+  backdrop-filter: saturate(50%) blur(6px);
 }
 .components-animation-backdrop-enter-done {
-  opacity: $opacity-bg;
+  background-color: rgba(30, 30, 30, 0.8);
   transition: opacity $duration-bg $easing-exit;
+  backdrop-filter: saturate(50%) blur(6px);
 }
 .components-animation-backdrop-exit {
-  opacity: $opacity-bg;
+  background-color: rgba(30, 30, 30, 0.8);
 }
 .components-animation-backdrop-exit-active {
-  opacity: 0.01;
+  background-color: rgba(30, 30, 30, 0.01);
   transition: opacity $duration-bg $easing-exit;
 }
diff --git a/ui/src/Styles/Components/NavBar.scss b/ui/src/Styles/Components/NavBar.scss
index df525d6e9..d65c4058e 100644
--- a/ui/src/Styles/Components/NavBar.scss
+++ b/ui/src/Styles/Components/NavBar.scss
@@ -1,4 +1,12 @@
 .navbar {
+  @supports (backdrop-filter: blur(1px)) {
+    background-color: rgba($primary, 0.85);
+    backdrop-filter: saturate(50%) blur(6px);
+  }
+  @supports not (backdrop-filter: blur(1px)) {
+    background-color: rgba($primary, 0.95);
+  }
+
   & .navbar-brand,
   & .nav-link,
   & .form-control.components-filterinput {
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index ef4a35569..1a7416b35 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -66,15 +66,6 @@ $with-click-light: $dark;
 @import "Styles/RebootlessBootstrap";
 @import "~bootswatch/dist/darkly/bootswatch";
 
-// this is used for navbar, to make it transparent
-.bg-primary-transparent {
-  background-color: rgba($primary, 0.95);
-}
-// version for modals
-.bg-primary-transparent-80 {
-  background-color: rgba($dark, 0.8);
-}
-
 $alert-bg: $list-group-bg;
 $alertgroup-body-bg: lighten($gray-700, 5%);
 $alertgroup-footer-bg: lighten($gray-700, 2%);
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 3d22327d0..89420f52c 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -48,15 +48,6 @@ $with-click-light: $black;
 @import "Styles/RebootlessBootstrap";
 @import "~bootswatch/dist/flatly/bootswatch";
 
-// this is used for navbar, to make it transparent
-.bg-primary-transparent {
-  background-color: rgba($primary, 0.95);
-}
-// version for modals
-.bg-primary-transparent-80 {
-  background-color: rgba($dark, 0.8);
-}
-
 $alert-bg: $white;
 $alertgroup-body-bg: $white;
 $alertgroup-footer-bg: $gray-100;