diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index 45231f25..7dad8646 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -48,11 +48,19 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
             props.accent
                 ? css`
                       color: var(--accent-contrast);
-                      background: var(--accent);
+                      background-color: rgba(
+                          var(--accent-rgb),
+                          max(var(--min-opacity), 0.9)
+                      );
+                      backdrop-filter: blur(20px);
                   `
                 : css`
                       color: var(--secondary-foreground);
-                      background: var(--secondary-background);
+                      background-color: rgba(
+                          var(--secondary-background-rgb),
+                          max(var(--min-opacity), 0.9)
+                      );
+                      backdrop-filter: blur(20px);
                   `}
 
         ${(props) =>
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 511e17ac..8892afea 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -54,7 +54,7 @@ const Header = styled.div<Props>`
                       var(--primary-header-rgb),
                       max(var(--min-opacity), 0.75)
                   );
-                  backdrop-filter: blur(10px);
+                  backdrop-filter: blur(20px);
                   z-index: 20;
                   position: absolute;
                   width: 100%;