diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
index 20c4f0f70..c65335131 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
@@ -7,13 +7,13 @@ type StyledDropdownButtonProps = {
 
 export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   align-items: center;
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : 'none')};
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.color.blue : theme.font.color.secondary};
   cursor: pointer;
   display: flex;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
   padding: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -22,6 +22,9 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
   user-select: none;
 
   &:hover {
-    filter: brightness(0.95);
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
   }
 `;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
index 023060aad..ba6658ff5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
@@ -8,14 +8,14 @@ type StyledDropdownButtonProps = {
 export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>`
   font-family: inherit;
   align-items: center;
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : theme.font.color.secondary)};
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.color.blue : theme.font.color.secondary};
   cursor: pointer;
   display: flex;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
   padding: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -24,6 +24,9 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
   user-select: none;
 
   &:hover {
-    filter: brightness(0.95);
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
   }
 `;