diff --git a/assets/js/components/BottomTabs/Bar.vue b/assets/js/components/BottomTabs/Bar.vue
index c4ccd2ed0..2c4bdb468 100644
--- a/assets/js/components/BottomTabs/Bar.vue
+++ b/assets/js/components/BottomTabs/Bar.vue
@@ -98,13 +98,19 @@ export default defineComponent({
 <style scoped>
 .bottom-tab-bar {
 	z-index: 1030;
-	background: color-mix(in srgb, var(--tab-bar-background) 60%, transparent);
-	backdrop-filter: var(--evcc-backdrop-blur);
+	background: var(--tab-bar-background);
 	border-top: 1px solid var(--evcc-gray-25);
 	box-shadow: 0 -1px 6px var(--evcc-gray-25);
 	transition: transform var(--evcc-transition-fast) ease-in;
 }
 
+@supports (backdrop-filter: blur(1px)) {
+	.bottom-tab-bar {
+		background: color-mix(in srgb, var(--tab-bar-background) 60%, transparent);
+		backdrop-filter: var(--evcc-backdrop-blur);
+	}
+}
+
 .bottom-tab-bar--hidden {
 	transform: translateY(100%);
 }
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 16f8a3774..93e8440e9 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -748,11 +748,17 @@ export default defineComponent({
 	right: 0;
 	top: max(0rem, env(safe-area-inset-top)) !important;
 	margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
-	backdrop-filter: var(--evcc-backdrop-blur);
-	background-color: #0000;
+	background-color: var(--evcc-background);
 	box-shadow: 0 1px 8px 0px var(--evcc-background);
 }
 
+@supports (backdrop-filter: blur(1px)) {
+	.header-outer {
+		background-color: #0000;
+		backdrop-filter: var(--evcc-backdrop-blur);
+	}
+}
+
 @media (--sm-and-up) {
 	.header-outer {
 		--vertical-shift: calc((100vw - 560px) / 2);