diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts
index 5a7802dfb287..d4687782b729 100644
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts
@@ -19,6 +19,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts
index a096887d16ba..e72ff80f98f7 100644
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts
@@ -19,6 +19,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts
index 50fe3a0ef8db..e23e08f33d79 100644
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts
+++ b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
-  backdrop-filter: blur(8px);
-  background: ${props.theme.background.transparent.secondary};
+  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  background: ${props.theme.background.transparent.forBackdropFilter};
   box-shadow: ${props.theme.boxShadow.strong};
 `;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
index 8dc52fabee06..d7b910460f08 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
@@ -4,8 +4,13 @@ const StyledDropdownMenu = styled.div<{
   disableBlur?: boolean;
   width?: `${string}px` | `${number}%` | 'auto' | number;
 }>`
-  backdrop-filter: ${({ disableBlur }) => (disableBlur ? 'none' : 'blur(8px)')};
-  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ disableBlur }) =>
+    disableBlur
+      ? 'none'
+      : 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'};
+
+  background: ${({ theme }) => theme.background.transparent.forBackdropFilter};
+
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index 5bcf5bd0d9c7..a3e91a8807cb 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -16,10 +16,6 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
 
   align-items: center;
 
-  background: ${({ isKeySelected, theme }) =>
-    isKeySelected
-      ? theme.background.transparent.light
-      : theme.background.secondary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   cursor: pointer;
 
@@ -108,7 +104,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   isMenuOpen: boolean;
 }>`
   & .hoverable-buttons {
-    opacity: 0;
     pointer-events: none;
     position: fixed;
     right: ${({ theme }) => theme.spacing(2)};
@@ -117,7 +112,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
 
   &:hover {
     & .hoverable-buttons {
-      opacity: 0;
       pointer-events: auto;
       position: static;
     }
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
index c5204dbbaf33..e91329882d07 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
@@ -20,6 +20,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
index 3247f5f9fbf5..e78f8e6bb5cc 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
@@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts
index 083133298ebd..25bcbe4493fe 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts
@@ -4,6 +4,6 @@ import { ThemeType } from './ThemeLight';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
   backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${props.theme.background.transparent.secondary};
+  background: ${props.theme.background.transparent.forBackdropFilter};
   box-shadow: ${props.theme.boxShadow.strong};
 `;
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
index c9aa752aa99d..299edc7e7501 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
@@ -20,6 +20,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
index e36c08281270..ff2475a49cbc 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
@@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
diff --git a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts b/packages/twenty-ui/src/theme/constants/OverlayBackground.ts
index 379d66ae76e9..a61aa50fe57c 100644
--- a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts
+++ b/packages/twenty-ui/src/theme/constants/OverlayBackground.ts
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { ThemeType } from '..';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
-  backdrop-filter: blur(8px);
-  background: ${props.theme.background.transparent.secondary};
+  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  background: ${props.theme.background.transparent.forBackdropFilter};
   box-shadow: ${props.theme.boxShadow.strong};
 `;