diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
index dd383e3477..7f56cdf994 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@@ -20,6 +20,7 @@ import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmp
 
 const StyledDropdownMenu = styled(DropdownMenu)`
   margin-left: -1px;
+  position: relative;
   margin-top: -1px;
 `;
 
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index c4c5743034..ebd1e41684 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -26,6 +26,11 @@ const StyledAddressContainer = styled.div`
     margin-bottom: 6px;
   }
 
+  input {
+    background-color: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+  }
+
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: auto;
     min-width: 100px;
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
index c61ce4491e..c19c165d2b 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
@@ -12,7 +12,8 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 
 const StyledCalendarContainer = styled.div`
-  background: ${({ theme }) => theme.background.secondary};
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: ${({ theme }) => theme.border.radius.md};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
index f9778f17ba..af55300e59 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
@@ -33,18 +33,28 @@ const StyledTextArea = styled(TextareaAutosize)`
   resize: none;
   max-height: 400px;
   width: calc(100% - ${({ theme }) => theme.spacing(7)});
+  background: transparent;
 `;
 
 const StyledTextAreaContainer = styled.div`
+  background: ${({ theme }) => theme.background.primary};
   border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
   position: relative;
   width: 100%;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  background: ${({ theme }) => theme.background.primary};
+
+  @supports (
+    (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))
+  ) {
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+    -webkit-backdrop-filter: ${({ theme }) => theme.blur.medium};
+  }
 `;
 
 const StyledLightIconButtonContainer = styled.div`
+  background: transparent;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
index 3fac47943a..9d663dbc11 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
@@ -13,6 +13,8 @@ import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'
 
 const StyledInputContainer = styled.div`
   align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-top-left-radius: ${({ theme }) => theme.border.radius.md};
   border-top-right-radius: ${({ theme }) => theme.border.radius.md};
@@ -22,7 +24,7 @@ const StyledInputContainer = styled.div`
 `;
 
 const StyledInput = styled.input<{ hasError?: boolean }>`
-  background: ${({ theme }) => theme.background.secondary};
+  background: transparent;
   border: none;
   color: ${({ theme }) => theme.font.color.primary};
   outline: none;
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 03937c7fd3..2510c90c61 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
@@ -22,8 +22,6 @@ const StyledDropdownMenu = styled.div<{
 
   display: flex;
 
-  height: fit-content;
-
   flex-direction: column;
   z-index: 30;
   width: ${({ width = 200 }) =>
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
index 98b56e44d6..1378eb4603 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
@@ -15,6 +15,8 @@ const StyledInput = styled.input<{
 
   border: 1px solid ${({ theme, hasError }) =>
     hasError ? theme.border.color.danger : theme.border.color.medium};
+  background-color: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-sizing: border-box;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -30,6 +32,7 @@ const StyledInput = styled.input<{
 `;
 
 const StyledInputContainer = styled.div`
+  background-color: transparent;
   box-sizing: border-box;
   position: relative;
   width: 100%;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
index d2e9c11a6d..00edc11cea 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
@@ -8,6 +8,8 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
   display: flex;
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   flex-direction: row;
   height: calc(36px - 2 * var(--vertical-padding));
   padding: var(--vertical-padding) 0;
@@ -19,6 +21,7 @@ const StyledInput = styled.input`
   ${TEXT_INPUT_STYLE}
 
   font-size: ${({ theme }) => theme.font.size.sm};
+  background-color: transparent;
   width: 100%;
 
   &[type='number']::-webkit-outer-spin-button,