diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
index cc4678d2c6b2..4663b3989431 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
@@ -9,12 +9,17 @@ import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 const StyledInput = styled.input<{
   withRightComponent?: boolean;
   hasError?: boolean;
+  hasItem: boolean;
 }>`
   ${TEXT_INPUT_STYLE}
 
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  ${({ hasItem, theme }) =>
+    hasItem &&
+    css`
+      background-color: ${theme.background.transparent.lighter};
+      border-radius: 4px;
+      border: 1px solid ${theme.border.color.medium};
+    `}
 
   box-sizing: border-box;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -70,6 +75,7 @@ export type MultiItemBaseInputProps = HTMLInputProps & {
   }) => React.ReactNode;
   error?: string | null;
   hasError?: boolean;
+  hasItem: boolean;
 };
 
 export const MultiItemBaseInput = forwardRef<
@@ -93,6 +99,7 @@ export const MultiItemBaseInput = forwardRef<
       renderInput,
       error = '',
       hasError = false,
+      hasItem,
     },
     ref,
   ) => {
@@ -129,6 +136,7 @@ export const MultiItemBaseInput = forwardRef<
               onChange={onChange}
               ref={combinedRef}
               withRightComponent={!!rightComponent}
+              hasItem={hasItem}
             />
           )}
           {!!rightComponent && (
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 224936435346..e0848f415fd0 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
@@ -199,6 +199,7 @@ export const MultiItemFieldInput = <T,>({
             )
           }
           onEnter={handleSubmitInput}
+          hasItem={!!items.length}
           rightComponent={
             items.length ? (
               <LightIconButton
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
index d372b5edccd6..e5f08eea22b9 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
@@ -10,16 +10,23 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
 
 import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils';
 import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
+import { css } from '@emotion/react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
 
 export const DEFAULT_PHONE_CALLING_CODE = '1';
 
-const StyledCustomPhoneInputContainer = styled.div`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  height: 30px;
+const StyledCustomPhoneInputContainer = styled.div<{
+  hasItem: boolean;
+}>`
+  ${({ hasItem, theme }) =>
+    hasItem &&
+    css`
+      background-color: ${theme.background.transparent.lighter};
+      border-radius: 4px;
+      border: 1px solid ${theme.border.color.medium};
+      height: 30px;
+    `}
 `;
 
 const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
@@ -130,7 +137,7 @@ export const PhonesFieldInput = ({
       )}
       renderInput={({ value, onChange, autoFocus, placeholder }) => {
         return (
-          <StyledCustomPhoneInputContainer>
+          <StyledCustomPhoneInputContainer hasItem={!!phones.length}>
             <StyledCustomPhoneInput
               autoFocus={autoFocus}
               placeholder={placeholder}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
index 7a1c62681962..8d8aba0b45a6 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
@@ -27,7 +27,7 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   cursor: pointer;
   display: flex;
 
-  height: 30px;
+  height: 32px;
 
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(1)};