diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
index f96ec1768e..b2de426f03 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
@@ -13,12 +13,14 @@ type CalendarDayCardContentProps = {
   divider?: boolean;
 };
 
-const StyledCardContent = styled(CardContent)`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: row;
-  gap: ${themeCssVariables.spacing[3]};
-  padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
+const StyledCardContentContainer = styled.div`
+  > * {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    gap: ${themeCssVariables.spacing[3]};
+    padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
+  }
 `;
 
 const StyledDayContainer = styled.div`
@@ -44,7 +46,7 @@ const StyledEvents = styled.div`
   gap: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledEventRow = styled(CalendarEventRow)`
+const StyledEventRowContainer = styled.div`
   flex: 1 0 auto;
 `;
 
@@ -67,28 +69,29 @@ export const CalendarDayCardContent = ({
   };
 
   return (
-    <StyledCardContent
-      divider={divider}
-      initial="upcoming"
-      animate="ended"
-      variants={upcomingDayCardContentVariants}
-      transition={{
-        delay: Math.max(0, dayEndsIn),
-        duration: theme.animation.duration.fast,
-      }}
-    >
-      <StyledDayContainer>
-        <StyledWeekDay>{weekDayLabel}</StyledWeekDay>
-        <StyledMonthDay>{monthDayLabel}</StyledMonthDay>
-      </StyledDayContainer>
-      <StyledEvents>
-        {calendarEvents.map((calendarEvent) => (
-          <StyledEventRow
-            key={calendarEvent.id}
-            calendarEvent={calendarEvent}
-          />
-        ))}
-      </StyledEvents>
-    </StyledCardContent>
+    <StyledCardContentContainer>
+      <CardContent
+        divider={divider}
+        initial="upcoming"
+        animate="ended"
+        variants={upcomingDayCardContentVariants}
+        transition={{
+          delay: Math.max(0, dayEndsIn),
+          duration: theme.animation.duration.fast,
+        }}
+      >
+        <StyledDayContainer>
+          <StyledWeekDay>{weekDayLabel}</StyledWeekDay>
+          <StyledMonthDay>{monthDayLabel}</StyledMonthDay>
+        </StyledDayContainer>
+        <StyledEvents>
+          {calendarEvents.map((calendarEvent) => (
+            <StyledEventRowContainer key={calendarEvent.id}>
+              <CalendarEventRow calendarEvent={calendarEvent} />
+            </StyledEventRowContainer>
+          ))}
+        </StyledEvents>
+      </CardContent>
+    </StyledCardContentContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
index 9b40593036..e867707f2b 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
@@ -85,7 +85,7 @@ const StyledFields = styled.div`
   width: 100%;
 `;
 
-const StyledPropertyBox = styled(PropertyBox)`
+const StyledPropertyBoxContainer = styled.div`
   height: ${themeCssVariables.spacing[6]};
   width: 100%;
 `;
@@ -165,35 +165,37 @@ export const CalendarEventDetails = ({
     });
 
     return (
-      <StyledPropertyBox key={fieldMetadataItem.id}>
-        <FieldContext.Provider
-          value={{
-            recordId: calendarEvent.id,
-            isLabelIdentifier: false,
-            fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
-              field: fieldMetadataItem,
-              objectMetadataItem,
-              showLabel: true,
-              labelWidth: 72,
-            }),
-            useUpdateRecord: useUpdateOneCalendarEventRecordMutation,
-            maxWidth: 300,
-            isRecordFieldReadOnly: isReadOnly,
-          }}
-        >
-          <RecordFieldComponentInstanceContext.Provider
+      <StyledPropertyBoxContainer key={fieldMetadataItem.id}>
+        <PropertyBox>
+          <FieldContext.Provider
             value={{
-              instanceId: getRecordFieldInputInstanceId({
-                recordId: calendarEvent.id,
-                fieldName: fieldMetadataItem.name,
-                prefix: INPUT_ID_PREFIX,
+              recordId: calendarEvent.id,
+              isLabelIdentifier: false,
+              fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
+                field: fieldMetadataItem,
+                objectMetadataItem,
+                showLabel: true,
+                labelWidth: 72,
               }),
+              useUpdateRecord: useUpdateOneCalendarEventRecordMutation,
+              maxWidth: 300,
+              isRecordFieldReadOnly: isReadOnly,
             }}
           >
-            <RecordInlineCell />
-          </RecordFieldComponentInstanceContext.Provider>
-        </FieldContext.Provider>
-      </StyledPropertyBox>
+            <RecordFieldComponentInstanceContext.Provider
+              value={{
+                instanceId: getRecordFieldInputInstanceId({
+                  recordId: calendarEvent.id,
+                  fieldName: fieldMetadataItem.name,
+                  prefix: INPUT_ID_PREFIX,
+                }),
+              }}
+            >
+              <RecordInlineCell />
+            </RecordFieldComponentInstanceContext.Provider>
+          </FieldContext.Provider>
+        </PropertyBox>
+      </StyledPropertyBoxContainer>
     );
   };
 
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
index 8dc32bf6f6..0892e523fd 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
@@ -5,15 +5,18 @@ import { IconLock } from 'twenty-ui/display';
 import { Card, CardContent } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledVisibilityCard = styled(Card)`
+const StyledVisibilityCardContainer = styled.div`
   color: ${themeCssVariables.font.color.light};
   flex: 1;
-  border-color: ${themeCssVariables.border.color.light};
   transition: color ${themeCssVariables.animation.duration.normal} ease;
   width: 100%;
+
+  > * {
+    border-color: ${themeCssVariables.border.color.light};
+  }
 `;
 
-const StyledVisibilityCardContent = styled(CardContent)`
+const StyledVisibilityCardContentContainer = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.lighter};
   box-sizing: border-box;
@@ -29,11 +32,15 @@ export const CalendarEventNotSharedContent = () => {
   const { theme } = useContext(ThemeContext);
 
   return (
-    <StyledVisibilityCard>
-      <StyledVisibilityCardContent>
-        <IconLock size={theme.icon.size.sm} />
-        <Trans>Not shared</Trans>
-      </StyledVisibilityCardContent>
-    </StyledVisibilityCard>
+    <StyledVisibilityCardContainer>
+      <Card>
+        <StyledVisibilityCardContentContainer>
+          <CardContent>
+            <IconLock size={theme.icon.size.sm} />
+            <Trans>Not shared</Trans>
+          </CardContent>
+        </StyledVisibilityCardContentContainer>
+      </Card>
+    </StyledVisibilityCardContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
index 424308772b..094c124771 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
@@ -21,7 +21,7 @@ const StyledInlineCellBaseContainer = styled.div`
   user-select: none;
 `;
 
-const StyledPropertyBox = styled(PropertyBox)`
+const StyledPropertyBoxContainer = styled.div`
   height: ${themeCssVariables.spacing[6]};
   width: 100%;
 `;
@@ -87,19 +87,21 @@ export const CalendarEventParticipantsResponseStatusField = ({
   ));
 
   return (
-    <StyledPropertyBox>
-      <StyledInlineCellBaseContainer>
-        <StyledLabelAndIconContainer>
-          <StyledIconContainer>{Icon}</StyledIconContainer>
+    <StyledPropertyBoxContainer>
+      <PropertyBox>
+        <StyledInlineCellBaseContainer>
+          <StyledLabelAndIconContainer>
+            <StyledIconContainer>{Icon}</StyledIconContainer>
 
-          <StyledLabelContainer width={72}>
-            <EllipsisDisplay>{responseStatus}</EllipsisDisplay>
-          </StyledLabelContainer>
-        </StyledLabelAndIconContainer>
-        <StyledDiv ref={participantsContainerRef}>
-          <ExpandableList isChipCountDisplayed>{styledChips}</ExpandableList>
-        </StyledDiv>
-      </StyledInlineCellBaseContainer>
-    </StyledPropertyBox>
+            <StyledLabelContainer width={72}>
+              <EllipsisDisplay>{responseStatus}</EllipsisDisplay>
+            </StyledLabelContainer>
+          </StyledLabelAndIconContainer>
+          <StyledDiv ref={participantsContainerRef}>
+            <ExpandableList isChipCountDisplayed>{styledChips}</ExpandableList>
+          </StyledDiv>
+        </StyledInlineCellBaseContainer>
+      </PropertyBox>
+    </StyledPropertyBoxContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
index ae5ad19134..a26c2e5e05 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
@@ -2,16 +2,20 @@ import { styled } from '@linaria/react';
 import { Card } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledList = styled(Card)`
-  & > :not(:last-child) {
-    border-bottom: 1px solid ${themeCssVariables.border.color.light};
+const StyledListContainer = styled.div`
+  > * {
+    & > :not(:last-child) {
+      border-bottom: 1px solid ${themeCssVariables.border.color.light};
+    }
+    overflow: auto;
+    width: calc(100% - 2px);
   }
-
-  width: calc(100% - 2px);
-
-  overflow: auto;
 `;
 
 export const ActivityList = ({ children }: React.PropsWithChildren) => {
-  return <StyledList>{children}</StyledList>;
+  return (
+    <StyledListContainer>
+      <Card>{children}</Card>
+    </StyledListContainer>
+  );
 };
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
index cfdbb59451..20494b5234 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
@@ -3,14 +3,14 @@ import React from 'react';
 import { CardContent } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledRowContent = styled(CardContent)`
+const StyledRowContentContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${themeCssVariables.spacing[2]};
   height: ${themeCssVariables.spacing[12]};
   padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]};
 
-  &[data-clickable='false'] {
+  > *[data-clickable='false'] {
     cursor: default;
   }
 `;
@@ -30,8 +30,10 @@ export const ActivityRow = ({
   };
 
   return (
-    <StyledRowContent onClick={handleClick} isClickable={disabled !== true}>
-      {children}
-    </StyledRowContent>
+    <StyledRowContentContainer>
+      <CardContent onClick={handleClick} isClickable={disabled !== true}>
+        {children}
+      </CardContent>
+    </StyledRowContentContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
index 2adf7fea50..dd4672d24d 100644
--- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
@@ -7,7 +7,7 @@ import { RecordChip } from '@/object-record/components/RecordChip';
 import { Avatar } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledAvatar = styled(Avatar)`
+const StyledAvatarContainer = styled.span`
   margin-right: ${themeCssVariables.spacing[1]};
 `;
 
@@ -67,12 +67,14 @@ export const ParticipantChip = ({
         />
       ) : (
         <StyledChip>
-          <StyledAvatar
-            avatarUrl={avatarUrl}
-            type="rounded"
-            placeholder={displayName}
-            size="sm"
-          />
+          <StyledAvatarContainer>
+            <Avatar
+              avatarUrl={avatarUrl}
+              type="rounded"
+              placeholder={displayName}
+              size="sm"
+            />
+          </StyledAvatarContainer>
           <StyledSenderName variant={variant}>{displayName}</StyledSenderName>
         </StyledChip>
       )}
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx
index d746889c84..e2ef6e2635 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailsCard.tsx
@@ -38,9 +38,11 @@ const StyledContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledH1Title = styled(H1Title)`
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
+const StyledH1TitleWrapper = styled.div`
+  > h2 {
+    display: flex;
+    gap: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 const StyledEmailCount = styled.span`
@@ -107,15 +109,17 @@ export const EmailsCard = () => {
   return (
     <StyledContainer>
       <Section>
-        <StyledH1Title
-          title={
-            <>
-              <Trans>Inbox</Trans>{' '}
-              <StyledEmailCount>{totalNumberOfThreads}</StyledEmailCount>
-            </>
-          }
-          fontColor={H1TitleFontColor.Primary}
-        />
+        <StyledH1TitleWrapper>
+          <H1Title
+            title={
+              <>
+                <Trans>Inbox</Trans>{' '}
+                <StyledEmailCount>{totalNumberOfThreads}</StyledEmailCount>
+              </>
+            }
+            fontColor={H1TitleFontColor.Primary}
+          />
+        </StyledH1TitleWrapper>
         {!firstQueryLoading && (
           <ActivityList>
             {timelineThreads?.map((thread: TimelineThread) => (
diff --git a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx
index 66065ac61f..eacfd31faf 100644
--- a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx
@@ -34,8 +34,9 @@ const StyledUploadDragSubTitle = styled.div`
   line-height: ${themeCssVariables.text.lineHeight.md};
 `;
 
-const StyledUploadIcon = styled(IconUpload)`
+const StyledUploadIconContainer = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
   margin-bottom: ${themeCssVariables.spacing[3]};
 `;
 
@@ -83,10 +84,12 @@ export const DropZone = ({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...getInputProps()}
           />
-          <StyledUploadIcon
-            stroke={theme.icon.stroke.sm}
-            size={theme.icon.size.lg}
-          />
+          <StyledUploadIconContainer>
+            <IconUpload
+              stroke={theme.icon.stroke.sm}
+              size={theme.icon.size.lg}
+            />
+          </StyledUploadIconContainer>
           <StyledUploadDragTitle>{t`Upload files`}</StyledUploadDragTitle>
           <StyledUploadDragSubTitle>
             {t`Drag and Drop Here`}
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx
index eef9404347..3825f23613 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCard.tsx
@@ -38,11 +38,11 @@ const StyledMainContainer = styled.div`
   }
 `;
 
-const StyledSidePanelAnimatedPlaceholderEmptyContainer = styled(
-  AnimatedPlaceholderEmptyContainer,
-)`
-  height: auto;
-  padding-top: ${themeCssVariables.spacing[8]};
+const StyledSidePanelPlaceholderWrapper = styled.div`
+  > * {
+    height: auto;
+    padding-top: ${themeCssVariables.spacing[8]};
+  }
 `;
 
 export const TimelineCard = () => {
@@ -59,12 +59,8 @@ export const TimelineCard = () => {
   }
 
   if (isTimelineActivitiesEmpty) {
-    const EmptyContainer = isInSidePanel
-      ? StyledSidePanelAnimatedPlaceholderEmptyContainer
-      : AnimatedPlaceholderEmptyContainer;
-
-    return (
-      <EmptyContainer
+    const placeholderContent = (
+      <AnimatedPlaceholderEmptyContainer
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
       >
@@ -77,7 +73,15 @@ export const TimelineCard = () => {
             {t`There is no activity associated with this record.`}
           </AnimatedPlaceholderEmptySubTitle>
         </AnimatedPlaceholderEmptyTextContainer>
-      </EmptyContainer>
+      </AnimatedPlaceholderEmptyContainer>
+    );
+
+    return isInSidePanel ? (
+      <StyledSidePanelPlaceholderWrapper>
+        {placeholderContent}
+      </StyledSidePanelPlaceholderWrapper>
+    ) : (
+      placeholderContent
     );
   }
 
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
index 715302b23c..e2d6c94260 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
@@ -1,5 +1,4 @@
 import { styled } from '@linaria/react';
-import { Card } from 'twenty-ui/layout';
 import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EventCardProps = {
@@ -22,7 +21,7 @@ const StyledCardContainer = styled.div`
   }
 `;
 
-const StyledCard = styled(Card)`
+const StyledCardInnerContainer = styled.div`
   background: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.md};
@@ -40,7 +39,7 @@ export const EventCard = ({ children, isOpen }: EventCardProps) => {
   return (
     isOpen && (
       <StyledCardContainer>
-        <StyledCard fullWidth>{children}</StyledCard>
+        <StyledCardInnerContainer>{children}</StyledCardInnerContainer>
       </StyledCardContainer>
     )
   );
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx
index 0e5b147802..c3ce1bbd47 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx
@@ -26,8 +26,12 @@ export const StyledEventRowItemColumn = styled.div`
   gap: ${themeCssVariables.spacing[1]};
 `;
 
-export const StyledEventRowItemAction = styled(StyledEventRowItemColumn)`
+export const StyledEventRowItemAction = styled.div`
+  align-items: center;
   color: ${themeCssVariables.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  gap: ${themeCssVariables.spacing[1]};
 `;
 
 export const EventRowDynamicComponent = ({
diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx
index 062bc3958a..acf2e9969e 100644
--- a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx
+++ b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx
@@ -13,7 +13,7 @@ type BubbleMenuIconButtonProps = {
   isActive?: boolean;
 };
 
-const StyledBubbleMenuIconButton = styled(FloatingIconButton)`
+const StyledBubbleMenuIconButtonContainer = styled.div`
   border: none;
   border-radius: ${themeCssVariables.spacing[1.5]};
   width: ${themeCssVariables.spacing[6]};
@@ -29,17 +29,18 @@ export const BubbleMenuIconButton = ({
   isActive,
 }: BubbleMenuIconButtonProps) => {
   return (
-    <StyledBubbleMenuIconButton
-      className={className}
-      Icon={Icon}
-      disabled={disabled}
-      focus={focus}
-      onClick={onClick}
-      isActive={isActive}
-      applyShadow={false}
-      applyBlur={false}
-      size="medium"
-      position="standalone"
-    />
+    <StyledBubbleMenuIconButtonContainer className={className}>
+      <FloatingIconButton
+        Icon={Icon}
+        disabled={disabled}
+        focus={focus}
+        onClick={onClick}
+        isActive={isActive}
+        applyShadow={false}
+        applyBlur={false}
+        size="medium"
+        position="standalone"
+      />
+    </StyledBubbleMenuIconButtonContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx b/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx
index b538346cc2..ebd44920cb 100644
--- a/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx
+++ b/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx
@@ -27,8 +27,9 @@ const StyledLoadingIconContainer = styled.div`
   padding-inline: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledLoadingIcon = styled(IconDotsVertical)`
+const StyledLoadingIconWrapper = styled.span`
   color: ${themeCssVariables.font.color.light};
+  display: flex;
   transform: rotate(90deg);
 `;
 
@@ -37,7 +38,9 @@ const InitialLoadingIndicator = () => {
 
   return (
     <StyledLoadingIconContainer>
-      <StyledLoadingIcon size={theme.icon.size.xl} />
+      <StyledLoadingIconWrapper>
+        <IconDotsVertical size={theme.icon.size.xl} />
+      </StyledLoadingIconWrapper>
     </StyledLoadingIconContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx
index d7b03a7328..7b149e614f 100644
--- a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx
+++ b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx
@@ -115,12 +115,14 @@ const StyledRightButtonsContainer = styled.div`
   gap: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledReadOnlyModelButton = styled(LightButton)`
-  cursor: default;
+const StyledReadOnlyModelButtonContainer = styled.div`
+  > * {
+    cursor: default;
 
-  &:hover,
-  &:active {
-    background: transparent;
+    &:hover,
+    &:active {
+      background: transparent;
+    }
   }
 `;
 
@@ -163,10 +165,9 @@ export const AIChatTab = () => {
                   <AIChatContextUsageButton />
                 </StyledLeftButtonsContainer>
                 <StyledRightButtonsContainer>
-                  <StyledReadOnlyModelButton
-                    accent="tertiary"
-                    title={smartModelLabel}
-                  />
+                  <StyledReadOnlyModelButtonContainer>
+                    <LightButton accent="tertiary" title={smartModelLabel} />
+                  </StyledReadOnlyModelButtonContainer>
                   <SendMessageButton onSend={handleSendAndClear} />
                 </StyledRightButtonsContainer>
               </StyledButtonsContainer>
diff --git a/packages/twenty-front/src/modules/ai/components/AIChatTabMessageList.tsx b/packages/twenty-front/src/modules/ai/components/AIChatTabMessageList.tsx
index 62dcf15592..e43e3c9b6d 100644
--- a/packages/twenty-front/src/modules/ai/components/AIChatTabMessageList.tsx
+++ b/packages/twenty-front/src/modules/ai/components/AIChatTabMessageList.tsx
@@ -8,7 +8,7 @@ import { styled } from '@linaria/react';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledScrollWrapper = styled(ScrollWrapper)`
+const StyledScrollWrapperContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -30,11 +30,13 @@ export const AIChatTabMessageList = () => {
   }
 
   return (
-    <StyledScrollWrapper componentInstanceId={AI_CHAT_SCROLL_WRAPPER_ID}>
-      {agentChatMessageIdsComponent.map((messageId) => {
-        return <AIChatMessage messageId={messageId} key={messageId} />;
-      })}
-      <AIChatErrorUnderMessageList />
-    </StyledScrollWrapper>
+    <StyledScrollWrapperContainer>
+      <ScrollWrapper componentInstanceId={AI_CHAT_SCROLL_WRAPPER_ID}>
+        {agentChatMessageIdsComponent.map((messageId) => {
+          return <AIChatMessage messageId={messageId} key={messageId} />;
+        })}
+        <AIChatErrorUnderMessageList />
+      </ScrollWrapper>
+    </StyledScrollWrapperContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx b/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx
index d126fca33f..afe19c0b49 100644
--- a/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx
+++ b/packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx
@@ -140,8 +140,9 @@ const StyledReasoningText = styled.p`
   white-space: pre-wrap;
 `;
 
-const StyledOrbitLoaderIcon = styled(ThinkingOrbitLoaderIcon)`
+const StyledOrbitLoaderIconContainer = styled.span`
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 const StyledIconContainer = styled.div`
@@ -214,7 +215,7 @@ const StyledToolDetailsContainer = styled.div`
   overflow: hidden;
 `;
 
-const StyledToolTabList = styled(TabList)`
+const StyledToolTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[1]};
 `;
@@ -334,11 +335,13 @@ const ThinkingToolStepRow = ({
               <StyledToolErrorText>{part.errorText}</StyledToolErrorText>
             ) : (
               <StyledToolDetailsContent>
-                <StyledToolTabList
-                  tabs={toolTabs}
-                  behaveAsLinks={false}
-                  componentInstanceId={toolTabListComponentInstanceId}
-                />
+                <StyledToolTabListContainer>
+                  <TabList
+                    tabs={toolTabs}
+                    behaveAsLinks={false}
+                    componentInstanceId={toolTabListComponentInstanceId}
+                  />
+                </StyledToolTabListContainer>
                 <StyledToolJsonContent>
                   <StyledJsonTreeContainer>
                     <JsonTree
@@ -388,7 +391,13 @@ const ThinkingStepRow = ({
   return (
     <StyledRow>
       <StyledIconContainer>
-        {isActive ? <StyledOrbitLoaderIcon /> : <IconCpu size={14} />}
+        {isActive ? (
+          <StyledOrbitLoaderIconContainer>
+            <ThinkingOrbitLoaderIcon />
+          </StyledOrbitLoaderIconContainer>
+        ) : (
+          <IconCpu size={14} />
+        )}
       </StyledIconContainer>
       <StyledRowLabelContainer>
         <StyledRowLabel>{isActive ? t`Thinking` : t`Thought`}</StyledRowLabel>
diff --git a/packages/twenty-front/src/modules/ai/components/suggested-prompts/AIChatSuggestedPrompts.tsx b/packages/twenty-front/src/modules/ai/components/suggested-prompts/AIChatSuggestedPrompts.tsx
index 5fd76d216a..413c783f8b 100644
--- a/packages/twenty-front/src/modules/ai/components/suggested-prompts/AIChatSuggestedPrompts.tsx
+++ b/packages/twenty-front/src/modules/ai/components/suggested-prompts/AIChatSuggestedPrompts.tsx
@@ -29,7 +29,7 @@ const StyledTitle = styled.div`
   padding: 0 ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSuggestedPromptButton = styled(LightButton)`
+const StyledSuggestedPromptButtonContainer = styled.div`
   align-self: flex-start;
 `;
 
@@ -62,13 +62,14 @@ export const AIChatSuggestedPrompts = ({
     <StyledContainer>
       <StyledTitle>{t`What can I help you with?`}</StyledTitle>
       {DEFAULT_SUGGESTED_PROMPTS.map((prompt) => (
-        <StyledSuggestedPromptButton
-          key={prompt.id}
-          Icon={prompt.Icon}
-          title={resolveMessage(prompt.label)}
-          accent="secondary"
-          onClick={() => handleClick(prompt)}
-        />
+        <StyledSuggestedPromptButtonContainer key={prompt.id}>
+          <LightButton
+            Icon={prompt.Icon}
+            title={resolveMessage(prompt.label)}
+            accent="secondary"
+            onClick={() => handleClick(prompt)}
+          />
+        </StyledSuggestedPromptButtonContainer>
       ))}
     </StyledContainer>
   );
diff --git a/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx b/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx
index 9eafc02adf..bdb73476e2 100644
--- a/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx
+++ b/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx
@@ -31,11 +31,11 @@ const StyledRow = styled.div`
   gap: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSelect = styled(Select<string>)`
+const StyledSelectContainer = styled.div`
   flex: 1 1;
 `;
 
-const StyledButton = styled(Button)`
+const StyledButtonContainer = styled.div`
   flex: 0 0 auto;
 `;
 
@@ -160,26 +160,30 @@ export const MeteredPriceSelector = ({
         description={t`Number of new credits allocated every ${recurringInterval}`}
       />
       <StyledRow>
-        <StyledSelect
-          dropdownId="settings_billing-metered-price"
-          options={options}
-          value={selectedPriceId ?? currentMeteredPrice.stripePriceId}
-          onChange={handleChange}
-          disabled={isUpdating || isTrialing}
-          description={
-            isTrialing ? t`Please start your subscription first` : undefined
-          }
-          fullWidth
-        />
-        {isChanged && (
-          <StyledButton
-            title={isUpgrade() ? t`Upgrade` : t`Downgrade`}
-            onClick={handleOpenConfirm}
-            variant="primary"
-            isLoading={isUpdating}
-            disabled={!isChanged}
-            accent={isUpgrade() ? 'blue' : 'danger'}
+        <StyledSelectContainer>
+          <Select
+            dropdownId="settings_billing-metered-price"
+            options={options}
+            value={selectedPriceId ?? currentMeteredPrice.stripePriceId}
+            onChange={handleChange}
+            disabled={isUpdating || isTrialing}
+            description={
+              isTrialing ? t`Please start your subscription first` : undefined
+            }
+            fullWidth
           />
+        </StyledSelectContainer>
+        {isChanged && (
+          <StyledButtonContainer>
+            <Button
+              title={isUpgrade() ? t`Upgrade` : t`Downgrade`}
+              onClick={handleOpenConfirm}
+              variant="primary"
+              isLoading={isUpdating}
+              disabled={!isChanged}
+              accent={isUpgrade() ? 'blue' : 'danger'}
+            />
+          </StyledButtonContainer>
         )}
       </StyledRow>
       <ConfirmationModal
diff --git a/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx b/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx
index 101a5851ea..95f62a9377 100644
--- a/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx
+++ b/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx
@@ -11,13 +11,15 @@ import { Chip, ChipVariant } from 'twenty-ui/components';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-const StyledRecordChip = styled(RecordChip)`
+const StyledRecordChipContainer = styled.div`
+  display: inline;
   height: auto;
   margin: 0;
   padding: 0 ${themeCssVariables.spacing[1]};
 `;
 
-const StyledInlineMentionRecordChip = styled(MentionRecordChip)`
+const StyledInlineMentionRecordChipContainer = styled.div`
+  display: inline;
   height: auto;
   margin: 0;
   padding: 0 ${themeCssVariables.spacing[1]};
@@ -69,11 +71,13 @@ const LegacyMentionRenderer = ({
   }
 
   return (
-    <StyledRecordChip
-      objectNameSingular={objectMetadataItem.nameSingular}
-      record={record}
-      forceDisableClick={false}
-    />
+    <StyledRecordChipContainer>
+      <RecordChip
+        objectNameSingular={objectMetadataItem.nameSingular}
+        record={record}
+        forceDisableClick={false}
+      />
+    </StyledRecordChipContainer>
   );
 };
 
@@ -112,12 +116,14 @@ export const MentionInlineContent = createReactInlineContentSpec(
       // New notes store objectNameSingular + label + imageUrl directly
       if (isNonEmptyString(objectNameSingular) && isNonEmptyString(label)) {
         return (
-          <StyledInlineMentionRecordChip
-            recordId={recordId}
-            objectNameSingular={objectNameSingular}
-            label={label}
-            imageUrl={imageUrl}
-          />
+          <StyledInlineMentionRecordChipContainer>
+            <MentionRecordChip
+              recordId={recordId}
+              objectNameSingular={objectNameSingular}
+              label={label}
+              imageUrl={imageUrl}
+            />
+          </StyledInlineMentionRecordChipContainer>
         );
       }
 
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
index d8db678b97..d25515b473 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
@@ -25,8 +25,8 @@ type CommandMenuItemNumberInputProps = {
   placeholder?: string;
 };
 
-const StyledRightAlignedTextInput = styled(TextInput)`
-  input {
+const StyledRightAlignedTextInputContainer = styled.div`
+  & input {
     text-align: right;
   }
 `;
@@ -132,18 +132,20 @@ export const CommandMenuItemNumberInput = ({
       Icon={Icon}
       onClick={focusInput}
       RightComponent={
-        <StyledRightAlignedTextInput
-          ref={inputRef}
-          value={draftValue}
-          sizeVariant="sm"
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={placeholder}
-          error={hasError ? ' ' : undefined}
-          noErrorHelper
-          textClickOutsideId={focusId}
-        />
+        <StyledRightAlignedTextInputContainer>
+          <TextInput
+            ref={inputRef}
+            value={draftValue}
+            sizeVariant="sm"
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            error={hasError ? ' ' : undefined}
+            noErrorHelper
+            textClickOutsideId={focusId}
+          />
+        </StyledRightAlignedTextInputContainer>
       }
     />
   );
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
index afdaf4345c..cd2210d65a 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
@@ -19,8 +19,8 @@ type CommandMenuItemTextInputProps = {
   placeholder?: string;
 };
 
-const StyledRightAlignedTextInput = styled(TextInput)`
-  input {
+const StyledRightAlignedTextInputContainer = styled.div`
+  & input {
     text-align: right;
   }
 `;
@@ -96,16 +96,18 @@ export const CommandMenuItemTextInput = ({
       Icon={Icon}
       onClick={focusInput}
       RightComponent={
-        <StyledRightAlignedTextInput
-          ref={inputRef}
-          value={draftValue}
-          sizeVariant="sm"
-          onChange={setDraftValue}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={placeholder}
-          textClickOutsideId={focusId}
-        />
+        <StyledRightAlignedTextInputContainer>
+          <TextInput
+            ref={inputRef}
+            value={draftValue}
+            sizeVariant="sm"
+            onChange={setDraftValue}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            textClickOutsideId={focusId}
+          />
+        </StyledRightAlignedTextInputContainer>
       }
     />
   );
diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx
index 7f3bb8ce83..314c41989f 100644
--- a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx
+++ b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx
@@ -18,7 +18,7 @@ const StyledText = styled.div`
   white-space: nowrap;
 `;
 
-const StyledCloseButton = styled(IconButton)`
+const StyledCloseButtonContainer = styled.div`
   color: ${themeCssVariables.grayScale.gray1};
   display: flex;
 `;
@@ -79,13 +79,15 @@ export const InformationBanner = ({
             )}
           </StyledContent>
           {onClose && (
-            <StyledCloseButton
-              Icon={IconX}
-              size="small"
-              variant="tertiary"
-              onClick={onClose}
-              ariaLabel={t`Close banner`}
-            />
+            <StyledCloseButtonContainer>
+              <IconButton
+                Icon={IconX}
+                size="small"
+                variant="tertiary"
+                onClick={onClose}
+                ariaLabel={t`Close banner`}
+              />
+            </StyledCloseButtonContainer>
           )}
         </Banner>
       )}
diff --git a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
index 69e8516c13..fa9a2ce06c 100644
--- a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
@@ -19,12 +19,15 @@ const StyledMainContainerLayoutForDesktop = styled.div`
   padding-right: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledPageBodyForDesktop = styled(PageBody)`
+const StyledPageBodyForDesktopContainer = styled.div`
   flex: 1 1 0;
   min-width: 0;
   width: 0;
-  padding-bottom: 0;
-  padding-right: 0;
+
+  > * {
+    padding-bottom: 0;
+    padding-right: 0;
+  }
 `;
 
 const StyledMainContainerLayoutForMobile = styled.div`
@@ -34,11 +37,12 @@ const StyledMainContainerLayoutForMobile = styled.div`
   padding: 0;
 `;
 
-const StyledPageBodyForMobile = styled(PageBody)`
-  padding-bottom: 0;
-  padding-left: ${themeCssVariables.spacing[1]};
-
-  padding-right: ${themeCssVariables.spacing['1.5']};
+const StyledPageBodyForMobileContainer = styled.div`
+  > * {
+    padding-bottom: 0;
+    padding-left: ${themeCssVariables.spacing[1]};
+    padding-right: ${themeCssVariables.spacing['1.5']};
+  }
 `;
 
 export const MainContainerLayoutWithSidePanel = ({
@@ -51,7 +55,9 @@ export const MainContainerLayoutWithSidePanel = ({
   if (isMobile) {
     return (
       <StyledMainContainerLayoutForMobile>
-        <StyledPageBodyForMobile>{children}</StyledPageBodyForMobile>
+        <StyledPageBodyForMobileContainer>
+          <PageBody>{children}</PageBody>
+        </StyledPageBodyForMobileContainer>
         <CommandMenuForMobile />
       </StyledMainContainerLayoutForMobile>
     );
@@ -59,7 +65,9 @@ export const MainContainerLayoutWithSidePanel = ({
 
   return (
     <StyledMainContainerLayoutForDesktop>
-      <StyledPageBodyForDesktop>{children}</StyledPageBodyForDesktop>
+      <StyledPageBodyForDesktopContainer>
+        <PageBody>{children}</PageBody>
+      </StyledPageBodyForDesktopContainer>
       <SidePanelForDesktop />
     </StyledMainContainerLayoutForDesktop>
   );
diff --git a/packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/__tests__/__snapshots__/generateDepthRecordGqlFieldsFromRecord.test.ts.snap b/packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/__tests__/__snapshots__/generateDepthRecordGqlFieldsFromRecord.test.ts.snap
index ba1ddc21b4..8962cb3cae 100644
--- a/packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/__tests__/__snapshots__/generateDepthRecordGqlFieldsFromRecord.test.ts.snap
+++ b/packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/__tests__/__snapshots__/generateDepthRecordGqlFieldsFromRecord.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`generateDepthRecordGqlFieldsFromRecord should generate depth one record gql fields from empty record 1`] = `
 {
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx
index 453a6a56ff..faf8746574 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx
@@ -3,7 +3,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { styled } from '@linaria/react';
 import { NotificationCounter } from 'twenty-ui/navigation';
 
-const StyledNotificationCounter = styled(NotificationCounter)`
+const StyledNotificationCounterContainer = styled.div`
   position: absolute;
   top: -7px;
   right: -7px;
@@ -23,5 +23,9 @@ export const RecordBoardCardMultiDragCounterChip = () => {
     return null;
   }
 
-  return <StyledNotificationCounter count={selectedCount} />;
+  return (
+    <StyledNotificationCounterContainer>
+      <NotificationCounter count={selectedCount} />
+    </StyledNotificationCounterContainer>
+  );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
index c7c6523371..944356f5e5 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
@@ -68,7 +68,7 @@ const StyledColumn = styled.div`
   position: relative;
 `;
 
-const StyledTag = styled(Tag)`
+const StyledTagContainer = styled.div`
   max-width: 100%;
   min-width: 0;
   overflow: hidden;
@@ -139,24 +139,29 @@ export const RecordBoardColumnHeader = () => {
                   y: 10,
                 }}
                 clickableComponent={
-                  <StyledTag
-                    variant={
-                      columnDefinition.type === RecordGroupDefinitionType.Value
-                        ? 'solid'
-                        : 'outline'
-                    }
-                    color={
-                      columnDefinition.type === RecordGroupDefinitionType.Value
-                        ? columnDefinition.color
-                        : 'transparent'
-                    }
-                    text={columnDefinition.title}
-                    weight={
-                      columnDefinition.type === RecordGroupDefinitionType.Value
-                        ? 'regular'
-                        : 'medium'
-                    }
-                  />
+                  <StyledTagContainer>
+                    <Tag
+                      variant={
+                        columnDefinition.type ===
+                        RecordGroupDefinitionType.Value
+                          ? 'solid'
+                          : 'outline'
+                      }
+                      color={
+                        columnDefinition.type ===
+                        RecordGroupDefinitionType.Value
+                          ? columnDefinition.color
+                          : 'transparent'
+                      }
+                      text={columnDefinition.title}
+                      weight={
+                        columnDefinition.type ===
+                        RecordGroupDefinitionType.Value
+                          ? 'regular'
+                          : 'medium'
+                      }
+                    />
+                  </StyledTagContainer>
                 }
                 dropdownComponents={<RecordBoardColumnDropdownMenu />}
               />
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
index 89ff4d75f7..826faf35e9 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
@@ -6,12 +6,14 @@ import { type Nullable } from 'twenty-shared/types';
 import { Tag } from 'twenty-ui/components';
 import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
 
-const StyledTag = styled(Tag)`
+const StyledTagContainer = styled.div`
   width: 100%;
 `;
 
-const StyledHeader = styled(StyledHeaderDropdownButton)`
-  padding: 0;
+const StyledHeaderContainer = styled.div`
+  > * {
+    padding: 0;
+  }
 `;
 
 export const RecordBoardColumnHeaderAggregateDropdownButton = ({
@@ -29,24 +31,28 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
   );
 
   return (
-    <StyledHeader id={dropdownId} isUnfolded={isDropdownOpen}>
-      <>
-        <StyledTag
-          text={value ? value.toString() : '-'}
-          color="transparent"
-          weight="regular"
-        />
-        {!isDropdownOpen && (
-          <AppTooltip
-            anchorSelect={`#${dropdownId}`}
-            content={tooltip ?? ''}
-            noArrow
-            place="right"
-            positionStrategy="fixed"
-            delay={TooltipDelay.mediumDelay}
-          />
-        )}
-      </>
-    </StyledHeader>
+    <StyledHeaderContainer>
+      <StyledHeaderDropdownButton id={dropdownId} isUnfolded={isDropdownOpen}>
+        <>
+          <StyledTagContainer>
+            <Tag
+              text={value ? value.toString() : '-'}
+              color="transparent"
+              weight="regular"
+            />
+          </StyledTagContainer>
+          {!isDropdownOpen && (
+            <AppTooltip
+              anchorSelect={`#${dropdownId}`}
+              content={tooltip ?? ''}
+              noArrow
+              place="right"
+              positionStrategy="fixed"
+              delay={TooltipDelay.mediumDelay}
+            />
+          )}
+        </>
+      </StyledHeaderDropdownButton>
+    </StyledHeaderContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
index 8a92a73ec8..6ef907099b 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
@@ -14,7 +14,7 @@ import { IconPlus } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledButton = styled(Button)`
+const StyledButtonContainer = styled.div`
   padding: ${themeCssVariables.spacing['0.5']};
   min-width: unset;
   height: auto;
@@ -69,17 +69,19 @@ export const RecordCalendarAddNew = ({
   }
 
   return (
-    <StyledButton
-      onClick={async () => {
-        await createNewIndexRecord({
-          [calendarFieldMetadataItem.name]: cardDate
-            .toZonedDateTime(userTimezone)
-            .toInstant()
-            .toString(),
-        });
-      }}
-      variant="tertiary"
-      Icon={() => <IconPlus size={theme.icon.size.sm} />}
-    />
+    <StyledButtonContainer>
+      <Button
+        onClick={async () => {
+          await createNewIndexRecord({
+            [calendarFieldMetadataItem.name]: cardDate
+              .toZonedDateTime(userTimezone)
+              .toInstant()
+              .toString(),
+          });
+        }}
+        variant="tertiary"
+        Icon={() => <IconPlus size={theme.icon.size.sm} />}
+      />
+    </StyledButtonContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
index ec5f2c8774..8366e060e2 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
@@ -30,7 +30,7 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-const StyledNavigationButton = styled(Button)`
+const StyledNavigationButtonContainer = styled.div`
   padding: ${themeCssVariables.spacing[1]};
 `;
 
@@ -120,24 +120,28 @@ export const RecordCalendarTopBar = () => {
       </StyledLeftSection>
 
       <StyledNavigationSection>
-        <StyledNavigationButton
-          size="small"
-          variant="tertiary"
-          Icon={IconChevronLeft}
-          onClick={handlePreviousMonth}
-        />
+        <StyledNavigationButtonContainer>
+          <Button
+            size="small"
+            variant="tertiary"
+            Icon={IconChevronLeft}
+            onClick={handlePreviousMonth}
+          />
+        </StyledNavigationButtonContainer>
         <Button
           size="small"
           variant="tertiary"
           title={t`Today`}
           onClick={handleTodayClick}
         />
-        <StyledNavigationButton
-          size="small"
-          variant="tertiary"
-          Icon={IconChevronRight}
-          onClick={handleNextMonth}
-        />
+        <StyledNavigationButtonContainer>
+          <Button
+            size="small"
+            variant="tertiary"
+            Icon={IconChevronRight}
+            onClick={handleNextMonth}
+          />
+        </StyledNavigationButtonContainer>
       </StyledNavigationSection>
     </StyledContainer>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
index 8e286c49a4..6a1eccd558 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
@@ -24,7 +24,7 @@ const StyledContainer = styled.div`
   display: flex;
 `;
 
-const StyledRecordCard = styled(RecordCard)`
+const StyledRecordCardContainer = styled.div`
   width: calc(100% - 2px);
 `;
 
@@ -84,18 +84,20 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
         value={{ scopeInstanceId: RECORD_CALENDAR_CARD_INPUT_ID_PREFIX }}
       >
         <StyledContainer onContextMenu={handleContextMenuOpen}>
-          <StyledRecordCard
-            data-selected={isRecordCalendarCardSelected}
-            data-click-outside-id={RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID}
-          >
-            <RecordCalendarCardHeader recordId={recordId} />
-            <AnimatedEaseInOut isOpen={!isCompactModeActive} initial={false}>
-              <RecordCalendarCardBody
-                recordId={recordId}
-                isRecordReadOnly={false}
-              />
-            </AnimatedEaseInOut>
-          </StyledRecordCard>
+          <StyledRecordCardContainer>
+            <RecordCard
+              data-selected={isRecordCalendarCardSelected}
+              data-click-outside-id={RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID}
+            >
+              <RecordCalendarCardHeader recordId={recordId} />
+              <AnimatedEaseInOut isOpen={!isCompactModeActive} initial={false}>
+                <RecordCalendarCardBody
+                  recordId={recordId}
+                  isRecordReadOnly={false}
+                />
+              </AnimatedEaseInOut>
+            </RecordCard>
+          </StyledRecordCardContainer>
           <RecordCalendarCardCellHoveredPortal recordId={recordId} />
           <RecordCalendarCardCellEditModePortal recordId={recordId} />
         </StyledContainer>
diff --git a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx
index a487303954..089795978f 100644
--- a/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledRecordDetailSectionContainer = styled(Section)`
+const StyledRecordDetailSectionWrapper = styled.div`
   border-top: 1px solid ${themeCssVariables.border.color.light};
   padding-top: ${themeCssVariables.spacing[3]};
   padding-bottom: ${themeCssVariables.spacing[3]};
@@ -36,13 +36,15 @@ const StyledTitleLabel = styled.div`
   font-weight: ${themeCssVariables.font.weight.medium};
 `;
 
-const StyledLink = styled(Link)`
-  color: ${themeCssVariables.font.color.light};
-  text-decoration: none;
-  font-size: ${themeCssVariables.font.size.sm};
+const StyledLinkContainer = styled.span`
+  & > a {
+    color: ${themeCssVariables.font.color.light};
+    font-size: ${themeCssVariables.font.size.sm};
+    text-decoration: none;
 
-  :hover {
-    color: ${themeCssVariables.font.color.secondary};
+    &:hover {
+      color: ${themeCssVariables.font.color.secondary};
+    }
   }
 `;
 
@@ -67,22 +69,28 @@ export const RecordDetailSectionContainer = ({
 }: RecordDetailSectionContainerProps) => {
   const [isHovered, setIsHovered] = useState(false);
   return (
-    <StyledRecordDetailSectionContainer>
-      <StyledHeader
-        areRecordsAvailable={areRecordsAvailable}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        data-testid={dataTestId}
-      >
-        <StyledTitle>
-          <StyledTitleLabel>{title}</StyledTitleLabel>
-          {link && <StyledLink to={link.to}>{link.label}</StyledLink>}
-        </StyledTitle>
-        {hideRightAdornmentOnMouseLeave && !isHovered && areRecordsAvailable
-          ? null
-          : rightAdornment}
-      </StyledHeader>
-      {children}
-    </StyledRecordDetailSectionContainer>
+    <StyledRecordDetailSectionWrapper>
+      <Section>
+        <StyledHeader
+          areRecordsAvailable={areRecordsAvailable}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          data-testid={dataTestId}
+        >
+          <StyledTitle>
+            <StyledTitleLabel>{title}</StyledTitleLabel>
+            {link && (
+              <StyledLinkContainer>
+                <Link to={link.to}>{link.label}</Link>
+              </StyledLinkContainer>
+            )}
+          </StyledTitle>
+          {hideRightAdornmentOnMouseLeave && !isHovered && areRecordsAvailable
+            ? null
+            : rightAdornment}
+        </StyledHeader>
+        {children}
+      </Section>
+    </StyledRecordDetailSectionWrapper>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx
index ce2b4a38b2..3a071783be 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx
@@ -22,7 +22,7 @@ import { IconMaximize } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useIsMobile } from 'twenty-ui/utilities';
 
-const StyledAdvancedTextFieldContainer = styled(FormFieldInputContainer)`
+const StyledAdvancedTextFieldContainerWrapper = styled.div`
   flex-grow: 1;
 `;
 
@@ -63,14 +63,16 @@ const StyledFullScreenEditorContainer = styled.div`
   overflow-y: auto;
 `;
 
-const StyledFullScreenButtonContainer = styled(StyledDropdownButtonContainer)`
-  background-color: transparent;
+const StyledFullScreenButtonContainerWrapper = styled.div`
+  > * {
+    background-color: transparent;
+    color: ${themeCssVariables.font.color.tertiary};
+    padding: ${themeCssVariables.spacing[2]};
 
-  color: ${themeCssVariables.font.color.tertiary};
-  padding: ${themeCssVariables.spacing[2]};
-  :hover {
-    cursor: pointer;
-    background-color: ${themeCssVariables.background.transparent.light};
+    :hover {
+      cursor: pointer;
+      background-color: ${themeCssVariables.background.transparent.light};
+    }
   }
 `;
 
@@ -209,46 +211,50 @@ export const FormAdvancedTextFieldInput = ({
 
   return (
     <>
-      <StyledAdvancedTextFieldContainer>
-        {label ? <InputLabel>{label}</InputLabel> : null}
+      <StyledAdvancedTextFieldContainerWrapper>
+        <FormFieldInputContainer>
+          {label ? <InputLabel>{label}</InputLabel> : null}
 
-        <StyledAdvancedTextFieldFieldContainer>
-          <StyledAdvancedTextFieldInnerContainer>
-            {!isFullScreen && (
-              <AdvancedTextEditor
-                editor={editor}
-                readonly={readonly}
-                minHeight={minHeight}
-                maxWidth={maxWidth}
-              />
-            )}
+          <StyledAdvancedTextFieldFieldContainer>
+            <StyledAdvancedTextFieldInnerContainer>
+              {!isFullScreen && (
+                <AdvancedTextEditor
+                  editor={editor}
+                  readonly={readonly}
+                  minHeight={minHeight}
+                  maxWidth={maxWidth}
+                />
+              )}
 
-            {enableFullScreen && (
-              <StyledEditorActionButtonContainer>
-                {!readonly && !isFullScreen && (
-                  <StyledFullScreenButtonContainer
-                    isUnfolded={false}
-                    transparentBackground
-                    onClick={handleEnterFullScreen}
-                  >
-                    <IconMaximize size={theme.icon.size.md} />
-                  </StyledFullScreenButtonContainer>
-                )}
-              </StyledEditorActionButtonContainer>
-            )}
+              {enableFullScreen && (
+                <StyledEditorActionButtonContainer>
+                  {!readonly && !isFullScreen && (
+                    <StyledFullScreenButtonContainerWrapper>
+                      <StyledDropdownButtonContainer
+                        isUnfolded={false}
+                        transparentBackground
+                        onClick={handleEnterFullScreen}
+                      >
+                        <IconMaximize size={theme.icon.size.md} />
+                      </StyledDropdownButtonContainer>
+                    </StyledFullScreenButtonContainerWrapper>
+                  )}
+                </StyledEditorActionButtonContainer>
+              )}
 
-            {VariablePicker && !readonly ? (
-              <VariablePicker
-                instanceId={instanceId}
-                multiline={true}
-                onVariableSelect={handleVariableTagInsert}
-              />
-            ) : null}
-          </StyledAdvancedTextFieldInnerContainer>
-        </StyledAdvancedTextFieldFieldContainer>
-        {hint && <InputHint>{hint}</InputHint>}
-        {error && <InputErrorHelper>{error}</InputErrorHelper>}
-      </StyledAdvancedTextFieldContainer>
+              {VariablePicker && !readonly ? (
+                <VariablePicker
+                  instanceId={instanceId}
+                  multiline={true}
+                  onVariableSelect={handleVariableTagInsert}
+                />
+              ) : null}
+            </StyledAdvancedTextFieldInnerContainer>
+          </StyledAdvancedTextFieldFieldContainer>
+          {hint && <InputHint>{hint}</InputHint>}
+          {error && <InputErrorHelper>{error}</InputErrorHelper>}
+        </FormFieldInputContainer>
+      </StyledAdvancedTextFieldContainerWrapper>
 
       {fullScreenOverlay}
     </>
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
index 4dfc5aa604..b6b3c7dfc2 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
@@ -52,7 +52,14 @@ const StyledDisplayModeReadonlyContainer = styled.div`
   width: 100%;
 `;
 
-const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
+const StyledDisplayModeContainer = styled.div`
+  align-items: center;
+  background: transparent;
+  border: none;
+  display: flex;
+  font-family: inherit;
+  padding-inline: ${themeCssVariables.spacing[2]};
+  width: 100%;
   height: 30px;
   cursor: pointer;
   box-sizing: border-box;
@@ -63,11 +70,11 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
   }
 `;
 
-const StyledInput = styled(TextInput)`
+const StyledInputContainer = styled.div`
   padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
 `;
 
-const StyledPlaceholder = styled(FormFieldPlaceholder)`
+const StyledPlaceholderContainer = styled.div`
   width: 100%;
 `;
 
@@ -303,19 +310,23 @@ export const FormArrayFieldInput = ({
                 {draftValue.value.length > 0 ? (
                   <ArrayDisplay value={draftValue.value} />
                 ) : (
-                  <StyledPlaceholder />
+                  <StyledPlaceholderContainer>
+                    <FormFieldPlaceholder />
+                  </StyledPlaceholderContainer>
                 )}
               </StyledDisplayModeReadonlyContainer>
             ) : draftValue.value.length === 0 ? (
-              <StyledInput
-                instanceId={formFieldInputInstanceId}
-                placeholder={t`Enter an item`}
-                value={newItemDraftValue}
-                copyButton={false}
-                onChange={handleFirstItemInputChange}
-                onEnter={handleFirstItemInputEnter}
-                shouldTrim={false}
-              />
+              <StyledInputContainer>
+                <TextInput
+                  instanceId={formFieldInputInstanceId}
+                  placeholder={t`Enter an item`}
+                  value={newItemDraftValue}
+                  copyButton={false}
+                  onChange={handleFirstItemInputChange}
+                  onEnter={handleFirstItemInputEnter}
+                  shouldTrim={false}
+                />
+              </StyledInputContainer>
             ) : (
               <Dropdown
                 dropdownId={dropdownId}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
index b118c45e38..0b147d33a5 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
@@ -33,7 +33,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Nullable } from 'twenty-ui/utilities';
 import { getDateFormatStringForDatePickerInputMask } from '~/utils/date-utils';
 
-const StyledInputContainer = styled(FormFieldInputInnerContainer)`
+const StyledInputContainerWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 0;
@@ -327,49 +327,50 @@ export const FormDateFieldInput = ({
       {label ? <InputLabel>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer>
-        <StyledInputContainer
-          formFieldInputInstanceId={instanceId}
-          ref={datePickerWrapperRef}
-          hasRightElement={isDefined(VariablePicker) && !readonly}
-        >
-          {draftValue.type === 'static' ? (
-            <>
-              <StyledDateInput
-                type="text"
-                placeholder={placeholderToDisplay}
-                value={inputDate}
-                onFocus={handleInputFocus}
-                onChange={handleInputChange}
-                onKeyDown={handleInputKeydown}
-                disabled={readonly}
-              />
+        <StyledInputContainerWrapper ref={datePickerWrapperRef}>
+          <FormFieldInputInnerContainer
+            formFieldInputInstanceId={instanceId}
+            hasRightElement={isDefined(VariablePicker) && !readonly}
+          >
+            {draftValue.type === 'static' ? (
+              <>
+                <StyledDateInput
+                  type="text"
+                  placeholder={placeholderToDisplay}
+                  value={inputDate}
+                  onFocus={handleInputFocus}
+                  onChange={handleInputChange}
+                  onKeyDown={handleInputKeydown}
+                  disabled={readonly}
+                />
 
-              {draftValue.mode === 'edit' ? (
-                <StyledDateInputContainer>
-                  <StyledDateInputAbsoluteContainer>
-                    <OverlayContainer>
-                      <DatePicker
-                        instanceId={instanceId}
-                        plainDateString={pickerDate}
-                        onChange={handlePickerChange}
-                        onClose={handlePickerMouseSelect}
-                        onEnter={handlePickerEnter}
-                        onEscape={handlePickerEscape}
-                        onClear={handlePickerClear}
-                        hideHeaderInput
-                      />
-                    </OverlayContainer>
-                  </StyledDateInputAbsoluteContainer>
-                </StyledDateInputContainer>
-              ) : null}
-            </>
-          ) : (
-            <VariableChipStandalone
-              rawVariableName={draftValue.value}
-              onRemove={readonly ? undefined : handleUnlinkVariable}
-            />
-          )}
-        </StyledInputContainer>
+                {draftValue.mode === 'edit' ? (
+                  <StyledDateInputContainer>
+                    <StyledDateInputAbsoluteContainer>
+                      <OverlayContainer>
+                        <DatePicker
+                          instanceId={instanceId}
+                          plainDateString={pickerDate}
+                          onChange={handlePickerChange}
+                          onClose={handlePickerMouseSelect}
+                          onEnter={handlePickerEnter}
+                          onEscape={handlePickerEscape}
+                          onClear={handlePickerClear}
+                          hideHeaderInput
+                        />
+                      </OverlayContainer>
+                    </StyledDateInputAbsoluteContainer>
+                  </StyledDateInputContainer>
+                ) : null}
+              </>
+            ) : (
+              <VariableChipStandalone
+                rawVariableName={draftValue.value}
+                onRemove={readonly ? undefined : handleUnlinkVariable}
+              />
+            )}
+          </FormFieldInputInnerContainer>
+        </StyledInputContainerWrapper>
 
         {VariablePicker && !readonly ? (
           <VariablePicker
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
index 0d54a4b07c..b42c432552 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
@@ -26,7 +26,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Nullable } from 'twenty-ui/utilities';
 
-const StyledInputContainer = styled(FormFieldInputInnerContainer)`
+const StyledInputContainerWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 0;
@@ -243,49 +243,50 @@ export const FormDateTimeFieldInput = ({
       {label ? <InputLabel>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer>
-        <StyledInputContainer
-          formFieldInputInstanceId={instanceId}
-          ref={datePickerWrapperRef}
-          hasRightElement={isDefined(VariablePicker) && !readonly}
-        >
-          {draftValue.type === 'static' ? (
-            <>
-              <StyledDateInputTextContainer>
-                <DateTimePickerInput
-                  date={dateValue}
-                  onChange={handleInputChange}
-                  onFocus={handleInputFocus}
-                  readonly={readonly}
-                  timeZone={timeZone}
-                />
-              </StyledDateInputTextContainer>
-              {draftValue.mode === 'edit' ? (
-                <StyledDateInputContainer>
-                  <StyledDateInputAbsoluteContainer>
-                    <OverlayContainer>
-                      <DateTimePicker
-                        instanceId={instanceId}
-                        date={dateValue}
-                        onChange={handlePickerChange}
-                        onClose={handlePickerMouseSelect}
-                        onEnter={handlePickerEnter}
-                        onEscape={handlePickerEscape}
-                        onClear={handlePickerClear}
-                        hideHeaderInput
-                        timeZone={timeZone}
-                      />
-                    </OverlayContainer>
-                  </StyledDateInputAbsoluteContainer>
-                </StyledDateInputContainer>
-              ) : null}
-            </>
-          ) : (
-            <VariableChipStandalone
-              rawVariableName={draftValue.value}
-              onRemove={readonly ? undefined : handleUnlinkVariable}
-            />
-          )}
-        </StyledInputContainer>
+        <StyledInputContainerWrapper ref={datePickerWrapperRef}>
+          <FormFieldInputInnerContainer
+            formFieldInputInstanceId={instanceId}
+            hasRightElement={isDefined(VariablePicker) && !readonly}
+          >
+            {draftValue.type === 'static' ? (
+              <>
+                <StyledDateInputTextContainer>
+                  <DateTimePickerInput
+                    date={dateValue}
+                    onChange={handleInputChange}
+                    onFocus={handleInputFocus}
+                    readonly={readonly}
+                    timeZone={timeZone}
+                  />
+                </StyledDateInputTextContainer>
+                {draftValue.mode === 'edit' ? (
+                  <StyledDateInputContainer>
+                    <StyledDateInputAbsoluteContainer>
+                      <OverlayContainer>
+                        <DateTimePicker
+                          instanceId={instanceId}
+                          date={dateValue}
+                          onChange={handlePickerChange}
+                          onClose={handlePickerMouseSelect}
+                          onEnter={handlePickerEnter}
+                          onEscape={handlePickerEscape}
+                          onClear={handlePickerClear}
+                          hideHeaderInput
+                          timeZone={timeZone}
+                        />
+                      </OverlayContainer>
+                    </StyledDateInputAbsoluteContainer>
+                  </StyledDateInputContainer>
+                ) : null}
+              </>
+            ) : (
+              <VariableChipStandalone
+                rawVariableName={draftValue.value}
+                onRemove={readonly ? undefined : handleUnlinkVariable}
+              />
+            )}
+          </FormFieldInputInnerContainer>
+        </StyledInputContainerWrapper>
         {VariablePicker && !readonly ? (
           <VariablePicker
             instanceId={instanceId}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx
index 1162fd64d8..b4bc148e05 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx
@@ -50,7 +50,14 @@ const StyledDisplayModeReadonlyContainer = styled.div`
   width: 100%;
 `;
 
-const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
+const StyledDisplayModeContainer = styled.div`
+  align-items: center;
+  background: transparent;
+  border: none;
+  display: flex;
+  font-family: inherit;
+  padding-inline: ${themeCssVariables.spacing[2]};
+  width: 100%;
   cursor: pointer;
 
   &:hover,
@@ -65,7 +72,7 @@ const StyledSelectInputContainer = styled.div`
   top: ${themeCssVariables.spacing[9]};
 `;
 
-const StyledPlaceholder = styled(FormFieldPlaceholder)`
+const StyledPlaceholderContainer = styled.div`
   width: 100%;
 `;
 
@@ -223,7 +230,9 @@ export const FormMultiSelectFieldInput = ({
                     options={selectedOptions}
                   />
                 ) : (
-                  <StyledPlaceholder />
+                  <StyledPlaceholderContainer>
+                    <FormFieldPlaceholder />
+                  </StyledPlaceholderContainer>
                 )}
                 <IconChevronDown
                   size={theme.icon.size.md}
@@ -243,7 +252,11 @@ export const FormMultiSelectFieldInput = ({
                     options={selectedOptions}
                   />
                 ) : (
-                  <StyledPlaceholder>{placeholderText}</StyledPlaceholder>
+                  <StyledPlaceholderContainer>
+                    <FormFieldPlaceholder>
+                      {placeholderText}
+                    </FormFieldPlaceholder>
+                  </StyledPlaceholderContainer>
                 )}
                 <IconChevronDown
                   size={theme.icon.size.md}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx
index 33bab80557..ae5bb18dd3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx
@@ -22,9 +22,7 @@ import { CustomError, isDefined, isValidUuid } from 'twenty-shared/utils';
 import { IconChevronDown, IconForbid } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledFormSelectContainer = styled(FormFieldInputInnerContainer)<{
-  readonly?: boolean;
-}>`
+const StyledFormSelectContainerWrapper = styled.div<{ readonly?: boolean }>`
   align-items: center;
   height: 32px;
   justify-content: space-between;
@@ -166,19 +164,20 @@ export const FormSingleRecordPicker = ({
       {label ? <InputLabel>{label}</InputLabel> : null}
       <FormFieldInputRowContainer>
         {disabled ? (
-          <StyledFormSelectContainer
-            formFieldInputInstanceId={componentId}
-            hasRightElement={false}
-            readonly
-          >
-            <FormSingleRecordFieldChip
-              draftValue={draftValue}
-              selectedRecord={selectedRecord}
-              objectNameSingular={objectNameSingulars[0]}
-              onRemove={handleUnlinkVariable}
-              disabled={disabled}
-            />
-          </StyledFormSelectContainer>
+          <StyledFormSelectContainerWrapper readonly>
+            <FormFieldInputInnerContainer
+              formFieldInputInstanceId={componentId}
+              hasRightElement={false}
+            >
+              <FormSingleRecordFieldChip
+                draftValue={draftValue}
+                selectedRecord={selectedRecord}
+                objectNameSingular={objectNameSingulars[0]}
+                onRemove={handleUnlinkVariable}
+                disabled={disabled}
+              />
+            </FormFieldInputInnerContainer>
+          </StyledFormSelectContainerWrapper>
         ) : (
           <Dropdown
             dropdownId={dropdownId}
@@ -190,25 +189,27 @@ export const FormSingleRecordPicker = ({
               y: parseInt(theme.spacing[1], 10),
             }}
             clickableComponent={
-              <StyledFormSelectContainer
-                formFieldInputInstanceId={componentId}
-                hasRightElement={isDefined(VariablePicker) && !disabled}
-                preventFocusStackUpdate={true}
-              >
-                <FormSingleRecordFieldChip
-                  draftValue={draftValue}
-                  selectedRecord={selectedRecord}
-                  objectNameSingular={objectNameSingulars[0]}
-                  onRemove={handleUnlinkVariable}
-                  disabled={disabled}
-                />
-                <StyledIconButton>
-                  <IconChevronDown
-                    size={theme.icon.size.md}
-                    color={theme.font.color.light}
+              <StyledFormSelectContainerWrapper>
+                <FormFieldInputInnerContainer
+                  formFieldInputInstanceId={componentId}
+                  hasRightElement={isDefined(VariablePicker) && !disabled}
+                  preventFocusStackUpdate={true}
+                >
+                  <FormSingleRecordFieldChip
+                    draftValue={draftValue}
+                    selectedRecord={selectedRecord}
+                    objectNameSingular={objectNameSingulars[0]}
+                    onRemove={handleUnlinkVariable}
+                    disabled={disabled}
                   />
-                </StyledIconButton>
-              </StyledFormSelectContainer>
+                  <StyledIconButton>
+                    <IconChevronDown
+                      size={theme.icon.size.md}
+                      color={theme.font.color.light}
+                    />
+                  </StyledIconButton>
+                </FormFieldInputInnerContainer>
+              </StyledFormSelectContainerWrapper>
             }
             dropdownComponents={
               <SingleRecordPicker
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/PhonesFieldInput.tsx
index e13daf536e..9a4f44513d 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/PhonesFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/PhonesFieldInput.tsx
@@ -43,23 +43,15 @@ const StyledCustomPhoneInputContainer = styled.div<{
   height: ${({ hasItem }) => (hasItem ? '30px' : 'auto')};
 `;
 
-const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
+const StyledCustomPhoneInputWrapper = styled.div`
   background-color: transparent;
   border: none;
   color: ${themeCssVariables.font.color.primary};
   font-family: ${themeCssVariables.font.family};
   font-size: inherit;
   font-weight: inherit;
-  outline: none;
-  padding: 0;
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${themeCssVariables.font.color.light};
-    font-family: ${themeCssVariables.font.family};
-    font-weight: ${themeCssVariables.font.weight.medium};
-  }
   height: 100%;
+  width: calc(100% - ${themeCssVariables.spacing[8]});
 
   .PhoneInputInput {
     background: none;
@@ -83,7 +75,6 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
     border-radius: ${themeCssVariables.border.radius.xs};
     height: 12px;
   }
-  width: calc(100% - ${themeCssVariables.spacing[8]});
 `;
 
 export const PhonesFieldInput = () => {
@@ -219,16 +210,18 @@ export const PhonesFieldInput = () => {
             hasItem={!!phones.length}
             hasError={hasError}
           >
-            <StyledCustomPhoneInput
-              autoFocus={autoFocus}
-              placeholder={placeholder}
-              value={value as E164Number}
-              onChange={onChange as unknown as (newValue: E164Number) => void}
-              international={true}
-              withCountryCallingCode={true}
-              countrySelectComponent={PhoneCountryPickerDropdownButton}
-              defaultCountry={defaultCountry}
-            />
+            <StyledCustomPhoneInputWrapper>
+              <ReactPhoneNumberInput
+                autoFocus={autoFocus}
+                placeholder={placeholder}
+                value={value as E164Number}
+                onChange={onChange as unknown as (newValue: E164Number) => void}
+                international={true}
+                withCountryCallingCode={true}
+                countrySelectComponent={PhoneCountryPickerDropdownButton}
+                defaultCountry={defaultCountry}
+              />
+            </StyledCustomPhoneInputWrapper>
           </StyledCustomPhoneInputContainer>
         );
       }}
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx
index ed5470b40a..4297cdf0b3 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx
@@ -6,7 +6,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { MenuItem } from 'twenty-ui/navigation';
 import { Tag } from 'twenty-ui/components';
 
-const StyledMenuItem = styled(MenuItem)`
+const StyledMenuItemContainer = styled.div`
   width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
@@ -29,28 +29,30 @@ export const RecordIndexPageKanbanAddMenuItem = ({
   }
 
   return (
-    <StyledMenuItem
-      text={
-        <Tag
-          variant={
-            recordGroupDefinition.type === RecordGroupDefinitionType.Value
-              ? 'solid'
-              : 'outline'
-          }
-          color={
-            recordGroupDefinition.type === RecordGroupDefinitionType.Value
-              ? recordGroupDefinition.color
-              : 'transparent'
-          }
-          text={recordGroupDefinition.title}
-          weight={
-            recordGroupDefinition.type === RecordGroupDefinitionType.Value
-              ? 'regular'
-              : 'medium'
-          }
-        />
-      }
-      onClick={() => onItemClick(recordGroupDefinition)}
-    />
+    <StyledMenuItemContainer>
+      <MenuItem
+        text={
+          <Tag
+            variant={
+              recordGroupDefinition.type === RecordGroupDefinitionType.Value
+                ? 'solid'
+                : 'outline'
+            }
+            color={
+              recordGroupDefinition.type === RecordGroupDefinitionType.Value
+                ? recordGroupDefinition.color
+                : 'transparent'
+            }
+            text={recordGroupDefinition.title}
+            weight={
+              recordGroupDefinition.type === RecordGroupDefinitionType.Value
+                ? 'regular'
+                : 'medium'
+            }
+          />
+        }
+        onClick={() => onItemClick(recordGroupDefinition)}
+      />
+    </StyledMenuItemContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx
index 018d94ee87..75ff275bba 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx
@@ -27,7 +27,7 @@ const StyledShowPageRightContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[2]};
 `;
@@ -65,11 +65,13 @@ export const MergeRecordsContainer = ({
           <TabListComponentInstanceContext.Provider
             value={{ instanceId: instanceId }}
           >
-            <StyledTabList
-              tabs={tabs}
-              behaveAsLinks={false}
-              componentInstanceId={instanceId}
-            />
+            <StyledTabListContainer>
+              <TabList
+                tabs={tabs}
+                behaveAsLinks={false}
+                componentInstanceId={instanceId}
+              />
+            </StyledTabListContainer>
           </TabListComponentInstanceContext.Provider>
           <StyledContentContainer>
             {activeTabId === MergeRecordsTabId.MERGE_PREVIEW && (
diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeSettingsTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeSettingsTab.tsx
index 323022cadb..ac9f271296 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeSettingsTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeSettingsTab.tsx
@@ -8,7 +8,7 @@ import { getPositionNumberIcon } from '@/object-record/record-merge/utils/getPos
 import { getPositionWordLabel } from '@/object-record/record-merge/utils/getPositionWordLabel';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   margin: ${themeCssVariables.spacing[4]};
   width: auto;
 `;
@@ -37,14 +37,16 @@ export const MergeSettingsTab = () => {
   }
 
   return (
-    <StyledSection>
-      <Select
-        dropdownId="merge-settings-priority-select"
-        options={priorityOptions}
-        value={mergeSettings.conflictPriorityIndex}
-        onChange={handleSelectionChange}
-        label={t`Fields conflicts`}
-      />
-    </StyledSection>
+    <StyledSectionContainer>
+      <Section>
+        <Select
+          dropdownId="merge-settings-priority-select"
+          options={priorityOptions}
+          value={mergeSettings.conflictPriorityIndex}
+          onChange={handleSelectionChange}
+          label={t`Fields conflicts`}
+        />
+      </Section>
+    </StyledSectionContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx
index b09a18116f..f9d114b840 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx
@@ -16,10 +16,10 @@ import {
   type AnimatedPlaceholderType,
 } from 'twenty-ui/layout';
 
-const StyledEmptyPlaceholderOuterContainer = styled(
-  AnimatedPlaceholderEmptyContainer,
-)`
-  align-items: flex-start;
+const StyledEmptyPlaceholderOuterContainer = styled.div`
+  > * {
+    align-items: flex-start;
+  }
 `;
 
 type RecordTableEmptyStateDisplayButtonComponentProps = {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
index 3735578c0e..6f311a5ea6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
@@ -22,8 +22,7 @@ const StyledContainer = styled.div`
   padding-right: ${themeCssVariables.spacing[1]};
 `;
 
-// TODO: refactor
-const StyledRecordTableTd = styled(RecordTableCellStyleWrapper)`
+const StyledRecordTableTdContainer = styled.div`
   border-left: 1px solid transparent;
 `;
 
@@ -43,14 +42,16 @@ export const RecordTableCellCheckbox = () => {
   );
 
   return (
-    <StyledRecordTableTd
-      isSelected={isSelected}
-      hasRightBorder={false}
-      widthClassName={RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME}
-    >
-      <StyledContainer onClick={handleClick} data-select-disable>
-        <Checkbox hoverable checked={isSelected} />
-      </StyledContainer>
-    </StyledRecordTableTd>
+    <StyledRecordTableTdContainer>
+      <RecordTableCellStyleWrapper
+        isSelected={isSelected}
+        hasRightBorder={false}
+        widthClassName={RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME}
+      >
+        <StyledContainer onClick={handleClick} data-select-disable>
+          <Checkbox hoverable checked={isSelected} />
+        </StyledContainer>
+      </RecordTableCellStyleWrapper>
+    </StyledRecordTableTdContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx
index 30ba1cdad7..6b7638a9eb 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx
@@ -19,8 +19,7 @@ const StyledContainer = styled.div`
   padding-right: ${themeCssVariables.spacing[1]};
 `;
 
-// TODO: refactor
-const StyledRecordTableTd = styled(RecordTableCellStyleWrapper)`
+const StyledRecordTableTdContainer = styled.div`
   border-left: 1px solid transparent;
 `;
 
@@ -28,14 +27,16 @@ export const RecordTableCellCheckboxPlaceholder = () => {
   const { hasUserSelectedAllRows } = useRecordTableBodyContextOrThrow();
 
   return (
-    <StyledRecordTableTd
-      isSelected={hasUserSelectedAllRows}
-      hasRightBorder={false}
-      widthClassName={RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME}
-    >
-      <StyledContainer data-select-disable>
-        <Checkbox hoverable checked={hasUserSelectedAllRows === true} />
-      </StyledContainer>
-    </StyledRecordTableTd>
+    <StyledRecordTableTdContainer>
+      <RecordTableCellStyleWrapper
+        isSelected={hasUserSelectedAllRows}
+        hasRightBorder={false}
+        widthClassName={RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME}
+      >
+        <StyledContainer data-select-disable>
+          <Checkbox hoverable checked={hasUserSelectedAllRows === true} />
+        </StyledContainer>
+      </RecordTableCellStyleWrapper>
+    </StyledRecordTableTdContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx
index 6299739c7c..bd23a8c041 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx
@@ -1,5 +1,4 @@
 import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
-import { StyledCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper';
 import { isRecordTableScrolledVerticallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledVerticallyComponentState';
 import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
 import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
@@ -12,7 +11,30 @@ import { cx } from '@linaria/core';
 import { useContext, type ReactNode } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 
-const StyledRecordTableTd = styled(StyledCell)<{ zIndex: number }>`
+const StyledRecordTableTd = styled.div<{
+  backgroundColor: string;
+  borderColor: string;
+  isDragging?: boolean;
+  fontColor: string;
+  hasRightBorder?: boolean;
+  hasBottomBorder?: boolean;
+  zIndex: number;
+}>`
+  border-bottom: 1px solid
+    ${({ borderColor, hasBottomBorder, isDragging }) =>
+      hasBottomBorder && !isDragging ? borderColor : 'transparent'};
+
+  color: ${({ fontColor }) => fontColor};
+  border-right: ${({ borderColor, hasRightBorder }) =>
+    hasRightBorder ? `1px solid ${borderColor}` : 'none'};
+
+  padding: 0;
+
+  text-align: left;
+
+  background: ${({ backgroundColor, isDragging }) =>
+    isDragging ? 'transparent' : backgroundColor};
+
   z-index: ${({ zIndex }) => zIndex};
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx
index 90a42ae2cc..30e3f839fc 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx
@@ -20,7 +20,7 @@ const StyledText = styled.span`
   z-index: 1;
 `;
 
-const StyledScrollableContainer = styled.div`
+const StyledValueContainer = styled.div`
   overflow-x: auto;
   white-space: nowrap;
   scrollbar-width: none;
@@ -29,9 +29,7 @@ const StyledScrollableContainer = styled.div`
   &::-webkit-scrollbar {
     display: none;
   }
-`;
 
-const StyledValueContainer = styled(StyledScrollableContainer)`
   align-items: center;
   display: flex;
   gap: 4px;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
index 9a200af74c..0113f29e6a 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
@@ -38,7 +38,7 @@ const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>`
       : '0'};
 `;
 
-const StyledIcon = styled(IconChevronDown)`
+const StyledIconContainer = styled.div`
   align-items: center;
   display: flex;
   height: 20px;
@@ -94,7 +94,9 @@ export const RecordTableColumnAggregateFooterValueCell = ({
               dropdownId={dropdownId}
             />
             {!hasAggregateOperationForViewField && (
-              <StyledIcon fontWeight="light" size={theme.icon.size.sm} />
+              <StyledIconContainer>
+                <IconChevronDown fontWeight="light" size={theme.icon.size.sm} />
+              </StyledIconContainer>
             )}
           </>
         ) : (
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
index 785a53f456..22730d3271 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
@@ -30,7 +30,7 @@ export type RecordTableColumnHeadDropdownMenuProps = {
   objectMetadataId: string;
 };
 
-const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+const StyledDropdownMenuItemsContainerWrapper = styled.div`
   z-index: ${themeCssVariables.lastLayerZIndex};
 `;
 
@@ -136,44 +136,46 @@ export const RecordTableColumnHeadDropdownMenu = ({
 
   return (
     <DropdownContent>
-      <StyledDropdownMenuItemsContainer>
-        {isFilterable && (
-          <MenuItem
-            LeftIcon={IconFilter}
-            onClick={handleFilterClick}
-            text={t`Filter`}
-          />
-        )}
-        {isSortable && (
-          <MenuItem
-            LeftIcon={IconSortDescending}
-            onClick={handleSortClick}
-            text={t`Sort`}
-          />
-        )}
-        {showSeparator && <DropdownMenuSeparator />}
-        {canMoveLeft && (
-          <MenuItem
-            LeftIcon={IconArrowLeft}
-            onClick={handleColumnMoveLeft}
-            text={t`Move left`}
-          />
-        )}
-        {canMoveRight && (
-          <MenuItem
-            LeftIcon={IconArrowRight}
-            onClick={handleColumnMoveRight}
-            text={t`Move right`}
-          />
-        )}
-        {canHide && (
-          <MenuItem
-            LeftIcon={IconEyeOff}
-            onClick={async () => await handleColumnVisibility()}
-            text={t`Hide`}
-          />
-        )}
-      </StyledDropdownMenuItemsContainer>
+      <StyledDropdownMenuItemsContainerWrapper>
+        <DropdownMenuItemsContainer>
+          {isFilterable && (
+            <MenuItem
+              LeftIcon={IconFilter}
+              onClick={handleFilterClick}
+              text={t`Filter`}
+            />
+          )}
+          {isSortable && (
+            <MenuItem
+              LeftIcon={IconSortDescending}
+              onClick={handleSortClick}
+              text={t`Sort`}
+            />
+          )}
+          {showSeparator && <DropdownMenuSeparator />}
+          {canMoveLeft && (
+            <MenuItem
+              LeftIcon={IconArrowLeft}
+              onClick={handleColumnMoveLeft}
+              text={t`Move left`}
+            />
+          )}
+          {canMoveRight && (
+            <MenuItem
+              LeftIcon={IconArrowRight}
+              onClick={handleColumnMoveRight}
+              text={t`Move right`}
+            />
+          )}
+          {canHide && (
+            <MenuItem
+              LeftIcon={IconEyeOff}
+              onClick={async () => await handleColumnVisibility()}
+              text={t`Hide`}
+            />
+          )}
+        </DropdownMenuItemsContainer>
+      </StyledDropdownMenuItemsContainerWrapper>
     </DropdownContent>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
index aa7068fd68..c37e338ed8 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
@@ -20,13 +20,6 @@ import {
 import { type IconComponent } from 'twenty-ui/display';
 import { useIsMobile } from 'twenty-ui/utilities';
 
-const StyledDragDropPlaceholderCell = styled(
-  RecordTableDragAndDropPlaceholderCell,
-)`
-  left: 0;
-  position: sticky;
-`;
-
 const StyledFieldPlaceholderCell = styled.div<{ widthOfFields: number }>`
   height: ${RECORD_TABLE_ROW_HEIGHT}px;
   min-width: ${({ widthOfFields }) => widthOfFields}px;
@@ -137,7 +130,7 @@ export const RecordTableActionRow = ({
 
   return (
     <StyledRecordTableDraggableTr onClick={onClick}>
-      <StyledDragDropPlaceholderCell />
+      <RecordTableDragAndDropPlaceholderCell />
       <StyledIconContainer>
         <LeftIcon
           stroke={theme.icon.stroke.sm}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx
index c3a7064c9d..c269045807 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx
@@ -3,7 +3,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { styled } from '@linaria/react';
 import { NotificationCounter } from 'twenty-ui/navigation';
 
-const StyledNotificationCounter = styled(NotificationCounter)`
+const StyledNotificationCounterContainer = styled.div`
   position: absolute;
   top: -7px;
   left: -7px;
@@ -23,5 +23,9 @@ export const RecordTableRowMultiDragCounterChip = () => {
     return null;
   }
 
-  return <StyledNotificationCounter count={selectedCount} />;
+  return (
+    <StyledNotificationCounterContainer>
+      <NotificationCounter count={selectedCount} />
+    </StyledNotificationCounterContainer>
+  );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
index 70356be4b9..da4b1f2054 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
@@ -64,7 +64,7 @@ const StyledChevronContainer = styled.div`
   z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
 `;
 
-const StyledAnimatedLightIconButton = styled(AnimatedLightIconButton)`
+const StyledAnimatedLightIconButtonContainer = styled.div`
   display: block;
   margin: auto;
 
@@ -88,7 +88,7 @@ const StyledRecordGroupSection = styled.div<{ width: number }>`
   z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
 `;
 
-const StyledTag = styled(Tag)`
+const StyledTagContainer = styled.div`
   flex-shrink: 0;
 `;
 
@@ -195,32 +195,36 @@ export const RecordTableRecordGroupSection = () => {
     <StyledTrContainer onClick={handleDropdownToggle}>
       <StyledRecordTableDragAndDropPlaceholderCell />
       <StyledChevronContainer>
-        <StyledAnimatedLightIconButton
-          Icon={IconChevronDown}
-          size="small"
-          accent="secondary"
-          animate={{ rotate: !isRecordGroupTableSectionToggled ? -90 : 0 }}
-          transition={{ duration: theme.animation.duration.normal }}
-        />
+        <StyledAnimatedLightIconButtonContainer>
+          <AnimatedLightIconButton
+            Icon={IconChevronDown}
+            size="small"
+            accent="secondary"
+            animate={{ rotate: !isRecordGroupTableSectionToggled ? -90 : 0 }}
+            transition={{ duration: theme.animation.duration.normal }}
+          />
+        </StyledAnimatedLightIconButtonContainer>
       </StyledChevronContainer>
       <StyledRecordGroupSection
         className="disable-shadow"
         width={widthOfLabelIdentifierRecordField}
       >
-        <StyledTag
-          variant={
-            recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue
-              ? 'solid'
-              : 'outline'
-          }
-          color={
-            recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue
-              ? recordGroupDefinition.color
-              : 'transparent'
-          }
-          text={recordGroupDefinition.title}
-          weight="medium"
-        />
+        <StyledTagContainer>
+          <Tag
+            variant={
+              recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue
+                ? 'solid'
+                : 'outline'
+            }
+            color={
+              recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue
+                ? recordGroupDefinition.color
+                : 'transparent'
+            }
+            text={recordGroupDefinition.title}
+            weight="medium"
+          />
+        </StyledTagContainer>
         <RecordBoardColumnHeaderAggregateDropdown
           aggregateValue={recordIndexAggregateDisplayValueForGroupValue}
           dropdownId={`record-group-section-aggregate-dropdown-${currentRecordGroupId}`}
diff --git a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx
index 03d3910614..06d2033561 100644
--- a/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx
@@ -10,12 +10,14 @@ import { FieldMetadataType } from 'twenty-shared/types';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledSection = styled(Section)`
-  display: flex;
-  flex-direction: column;
-  gap: ${themeCssVariables.spacing[6]};
-  padding: ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[3]};
-  width: auto;
+const StyledSectionContainer = styled.div`
+  > * {
+    display: flex;
+    flex-direction: column;
+    gap: ${themeCssVariables.spacing[6]};
+    padding: ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[3]};
+    width: auto;
+  }
 `;
 
 export type UpdateMultipleRecordsFormProps = {
@@ -50,35 +52,37 @@ export const UpdateMultipleRecordsForm = ({
   }));
 
   return (
-    <StyledSection>
-      {fieldsWithDefinitions.map(({ fieldMetadataItem, fieldDefinition }) => {
-        const fieldName = fieldDefinition.metadata.fieldName;
-        const isRelation = isFieldRelation(fieldDefinition);
-        const fieldNameOrRelationIdName =
-          isRelation && fieldMetadataItem.type === FieldMetadataType.RELATION
-            ? (fieldMetadataItem.settings?.joinColumnName as string)
-            : fieldName;
+    <StyledSectionContainer>
+      <Section>
+        {fieldsWithDefinitions.map(({ fieldMetadataItem, fieldDefinition }) => {
+          const fieldName = fieldDefinition.metadata.fieldName;
+          const isRelation = isFieldRelation(fieldDefinition);
+          const fieldNameOrRelationIdName =
+            isRelation && fieldMetadataItem.type === FieldMetadataType.RELATION
+              ? (fieldMetadataItem.settings?.joinColumnName as string)
+              : fieldName;
 
-        const value = values[fieldNameOrRelationIdName];
+          const value = values[fieldNameOrRelationIdName];
 
-        const handleValueChange = (newValue: any) => {
-          if (isUpdateRecordValueEmpty(newValue)) {
-            onChange(fieldNameOrRelationIdName, undefined);
-          } else {
-            onChange(fieldNameOrRelationIdName, newValue);
-          }
-        };
+          const handleValueChange = (newValue: any) => {
+            if (isUpdateRecordValueEmpty(newValue)) {
+              onChange(fieldNameOrRelationIdName, undefined);
+            } else {
+              onChange(fieldNameOrRelationIdName, newValue);
+            }
+          };
 
-        return (
-          <FormFieldInput
-            key={fieldDefinition.metadata.fieldName}
-            readonly={disabled}
-            field={fieldDefinition}
-            defaultValue={value}
-            onChange={handleValueChange}
-          />
-        );
-      })}
-    </StyledSection>
+          return (
+            <FormFieldInput
+              key={fieldDefinition.metadata.fieldName}
+              readonly={disabled}
+              field={fieldDefinition}
+              defaultValue={value}
+              onChange={handleValueChange}
+            />
+          );
+        })}
+      </Section>
+    </StyledSectionContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx
index 7c8f22b294..b124404da8 100644
--- a/packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx
@@ -10,7 +10,7 @@ type OnboardingSyncEmailsSettingsCardProps = {
   value?: MessageChannelVisibility;
 };
 
-const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)`
+const StyledCardMediaContainer = styled.div`
   width: ${themeCssVariables.spacing[10]};
 `;
 
@@ -21,11 +21,13 @@ export const OnboardingSyncEmailsSettingsCard = ({
   const optionsWithCardMedia = ONBOARDING_SYNC_EMAILS_OPTIONS.map((option) => ({
     ...option,
     cardMedia: (
-      <StyledCardMedia
-        metadata={option.cardMediaProps.metadata}
-        subject={option.cardMediaProps.subject}
-        body={option.cardMediaProps.body}
-      />
+      <StyledCardMediaContainer>
+        <SettingsAccountsVisibilityIcon
+          metadata={option.cardMediaProps.metadata}
+          subject={option.cardMediaProps.subject}
+          body={option.cardMediaProps.body}
+        />
+      </StyledCardMediaContainer>
     ),
   }));
 
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
index 78f2b2bac3..8127032df0 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
@@ -42,11 +42,11 @@ const StyledTabsAndDashboardContainer = styled.div`
   overflow: hidden;
 `;
 
-const StyledPageLayoutTabList = styled(PageLayoutTabList)`
+const StyledPageLayoutTabListContainer = styled.div`
   padding-left: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledScrollWrapper = styled(ScrollWrapper)`
+const StyledScrollWrapperContainer = styled.div`
   flex: 1;
 `;
 
@@ -130,27 +130,31 @@ export const PageLayoutRendererContent = () => {
           }
         />
         {(sortedTabs.length > 1 || isPageLayoutInEditMode) && (
-          <StyledPageLayoutTabList
-            tabs={sortedTabs}
-            behaveAsLinks={!isInSidePanel && !isPageLayoutInEditMode}
-            componentInstanceId={tabListInstanceId}
-            onAddTab={handleAddTab}
-            isReorderEnabled={canEnableTabEditing}
-            onReorder={canEnableTabEditing ? reorderTabs : undefined}
-            pageLayoutType={currentPageLayout.type}
-          />
+          <StyledPageLayoutTabListContainer>
+            <PageLayoutTabList
+              tabs={sortedTabs}
+              behaveAsLinks={!isInSidePanel && !isPageLayoutInEditMode}
+              componentInstanceId={tabListInstanceId}
+              onAddTab={handleAddTab}
+              isReorderEnabled={canEnableTabEditing}
+              onReorder={canEnableTabEditing ? reorderTabs : undefined}
+              pageLayoutType={currentPageLayout.type}
+            />
+          </StyledPageLayoutTabListContainer>
         )}
 
-        <StyledScrollWrapper
-          componentInstanceId={getScrollWrapperInstanceIdFromPageLayoutId(
-            currentPageLayout.id,
-          )}
-          defaultEnableXScroll={false}
-        >
-          {isDefined(activeTabId) && (
-            <PageLayoutMainContent tabId={activeTabId} />
-          )}
-        </StyledScrollWrapper>
+        <StyledScrollWrapperContainer>
+          <ScrollWrapper
+            componentInstanceId={getScrollWrapperInstanceIdFromPageLayoutId(
+              currentPageLayout.id,
+            )}
+            defaultEnableXScroll={false}
+          >
+            {isDefined(activeTabId) && (
+              <PageLayoutMainContent tabId={activeTabId} />
+            )}
+          </ScrollWrapper>
+        </StyledScrollWrapperContainer>
       </StyledTabsAndDashboardContainer>
     </StyledContainer>
   );
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
index 517dc9962a..84a2254055 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
@@ -26,9 +26,12 @@ import { LightIconButton } from 'twenty-ui/input';
 import { RelationType } from '~/generated-metadata/graphql';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledLink = styled(Link)`
+const StyledLinkContainer = styled.div`
   display: flex;
-  text-decoration: none;
+
+  > * {
+    text-decoration: none;
+  }
 `;
 
 const StyledSeeAllButtonWrapper = styled.div<{ isMobile: boolean }>`
@@ -131,11 +134,13 @@ export const WidgetActionFieldSeeAll = () => {
   return (
     <>
       <div id={tooltipId}>
-        <StyledLink to={filterLinkHref} data-testid="widget-see-all-link">
-          <StyledSeeAllButtonWrapper isMobile={isMobile}>
-            <LightIconButton Icon={IconArrowUpRight} accent="secondary" />
-          </StyledSeeAllButtonWrapper>
-        </StyledLink>
+        <StyledLinkContainer>
+          <Link to={filterLinkHref} data-testid="widget-see-all-link">
+            <StyledSeeAllButtonWrapper isMobile={isMobile}>
+              <LightIconButton Icon={IconArrowUpRight} accent="secondary" />
+            </StyledSeeAllButtonWrapper>
+          </Link>
+        </StyledLinkContainer>
       </div>
       <AppTooltip
         anchorSelect={`#${tooltipId}`}
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx
index 3d1926b1fc..b5578cdc69 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx
@@ -30,7 +30,8 @@ const StyledButton = styled.button`
   }
 `;
 
-const StyledIcon = styled(IconChevronDown)`
+const StyledIconContainer = styled.span`
+  display: flex;
   height: 16px;
   width: 16px;
 `;
@@ -41,7 +42,9 @@ export const FieldWidgetShowMoreButton = ({
 }: FieldWidgetShowMoreButtonProps) => {
   return (
     <StyledButton data-testid="field-widget-show-more-button" onClick={onClick}>
-      <StyledIcon />
+      <StyledIconContainer>
+        <IconChevronDown />
+      </StyledIconContainer>
       {t`More (${remainingCount})`}
     </StyledButton>
   );
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
index 1193244daa..8a09878d9c 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
@@ -40,9 +40,14 @@ const StyledPropertyBox = styled.div`
   padding-bottom: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledInlineFieldsPropertyBox = styled(StyledPropertyBox)`
-  padding-bottom: 0;
+const StyledInlineFieldsPropertyBox = styled.div`
+  align-self: stretch;
+  border-radius: ${themeCssVariables.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  gap: ${themeCssVariables.spacing[2]};
   padding-top: 0;
+  padding-bottom: 0;
 `;
 
 type FieldsWidgetProps = {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
index 23f471c53b..fa9a3ce94a 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
@@ -37,9 +37,11 @@ const StyledTrendIconContainer = styled.div`
   justify-content: center;
 `;
 
-const StyledH1Title = styled(H1Title)`
-  font-size: ${themeCssVariables.font.size.xxl};
-  margin: 0;
+const StyledH1TitleWrapper = styled.div`
+  > h2 {
+    font-size: ${themeCssVariables.font.size.xxl};
+    margin: 0;
+  }
 `;
 
 export const GraphWidgetAggregateChart = ({
@@ -58,10 +60,9 @@ export const GraphWidgetAggregateChart = ({
 
   return (
     <StyledContainer>
-      <StyledH1Title
-        title={displayValue}
-        fontColor={H1TitleFontColor.Primary}
-      />
+      <StyledH1TitleWrapper>
+        <H1Title title={displayValue} fontColor={H1TitleFontColor.Primary} />
+      </StyledH1TitleWrapper>
       {isDefined(trendPercentage) && (
         <StyledTrendIconContainer>
           <StyledTrendPercentageValue>
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx
index 53df5ac892..d13aea347a 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx
@@ -51,7 +51,7 @@ const StyledChartContainer = styled.div<{ $isClickable?: boolean }>`
       : ''}
 `;
 
-const StyledH1Title = styled(H1Title)`
+const StyledH1TitleWrapper = styled.div`
   left: 50%;
   position: absolute;
   top: 50%;
@@ -135,10 +135,12 @@ export const GraphWidgetGaugeChart = ({
           layers={['bars', renderValueEndLine]}
         />
         {showValue && (
-          <StyledH1Title
-            title={formattedValue}
-            fontColor={H1TitleFontColor.Primary}
-          />
+          <StyledH1TitleWrapper>
+            <H1Title
+              title={formattedValue}
+              fontColor={H1TitleFontColor.Primary}
+            />
+          </StyledH1TitleWrapper>
         )}
       </StyledChartContainer>
       <GraphWidgetLegend
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
index 0bc00b238d..f52ad6af89 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
@@ -13,11 +13,11 @@ type SettingsAccountsBlocklistTableProps = {
   handleBlockedEmailRemove: (id: string) => void;
 };
 
-const StyledTable = styled(Table)`
+const StyledTableContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[4]};
 `;
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -28,25 +28,29 @@ export const SettingsAccountsBlocklistTable = ({
   return (
     <>
       {blocklist.length > 0 && (
-        <StyledTable>
-          <TableRow
-            gridAutoColumns="200px 1fr 20px"
-            mobileGridAutoColumns="120px 1fr 20px"
-          >
-            <TableHeader>{t`Email/Domain`}</TableHeader>
-            <TableHeader>{t`Added to blocklist`}</TableHeader>
-            <TableHeader></TableHeader>
-          </TableRow>
-          <StyledTableBody>
-            {blocklist.map((blocklistItem) => (
-              <SettingsAccountsBlocklistTableRow
-                key={blocklistItem.id}
-                blocklistItem={blocklistItem}
-                onRemove={handleBlockedEmailRemove}
-              />
-            ))}
-          </StyledTableBody>
-        </StyledTable>
+        <StyledTableContainer>
+          <Table>
+            <TableRow
+              gridAutoColumns="200px 1fr 20px"
+              mobileGridAutoColumns="120px 1fr 20px"
+            >
+              <TableHeader>{t`Email/Domain`}</TableHeader>
+              <TableHeader>{t`Added to blocklist`}</TableHeader>
+              <TableHeader></TableHeader>
+            </TableRow>
+            <StyledTableBodyContainer>
+              <TableBody>
+                {blocklist.map((blocklistItem) => (
+                  <SettingsAccountsBlocklistTableRow
+                    key={blocklistItem.id}
+                    blocklistItem={blocklistItem}
+                    onRemove={handleBlockedEmailRemove}
+                  />
+                ))}
+              </TableBody>
+            </StyledTableBodyContainer>
+          </Table>
+        </StyledTableContainer>
       )}
     </>
   );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx
index 46f9195162..87558b6895 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx
@@ -11,8 +11,10 @@ type SettingsAccountsEventVisibilitySettingsCardProps = {
   value?: CalendarChannelVisibility;
 };
 
-const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)`
-  height: ${themeCssVariables.spacing[6]};
+const StyledCardMediaContainer = styled.div`
+  > * {
+    height: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 const eventSettingsVisibilityOptions = [
@@ -20,13 +22,21 @@ const eventSettingsVisibilityOptions = [
     title: msg`Everything`,
     description: msg`The whole event details will be shared with your team.`,
     value: CalendarChannelVisibility.SHARE_EVERYTHING,
-    cardMedia: <StyledCardMedia subject="active" body="active" />,
+    cardMedia: (
+      <StyledCardMediaContainer>
+        <SettingsAccountsVisibilityIcon subject="active" body="active" />
+      </StyledCardMediaContainer>
+    ),
   },
   {
     title: msg`Metadata`,
     description: msg`Only date & participants will be shared with your team.`,
     value: CalendarChannelVisibility.METADATA,
-    cardMedia: <StyledCardMedia subject="active" body="inactive" />,
+    cardMedia: (
+      <StyledCardMediaContainer>
+        <SettingsAccountsVisibilityIcon subject="active" body="inactive" />
+      </StyledCardMediaContainer>
+    ),
   },
 ];
 
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
index 4a1cd11b45..feea78b549 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@@ -19,11 +19,13 @@ const StyledTableRows = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledAddAccountSection = styled(Section)`
-  border-top: 1px solid ${themeCssVariables.border.color.light};
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${themeCssVariables.spacing[2]};
+const StyledAddAccountSectionContainer = styled.div`
+  > * {
+    border-top: 1px solid ${themeCssVariables.border.color.light};
+    display: flex;
+    justify-content: flex-end;
+    padding-top: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsAccountsConnectedAccountsListCard = ({
@@ -51,15 +53,17 @@ export const SettingsAccountsConnectedAccountsListCard = ({
           ))}
         </StyledTableRows>
       </Table>
-      <StyledAddAccountSection>
-        <Button
-          Icon={IconPlus}
-          title={t`Add account`}
-          variant="secondary"
-          size="small"
-          onClick={() => navigateSettings(SettingsPath.NewAccount)}
-        />
-      </StyledAddAccountSection>
+      <StyledAddAccountSectionContainer>
+        <Section>
+          <Button
+            Icon={IconPlus}
+            title={t`Add account`}
+            variant="secondary"
+            size="small"
+            onClick={() => navigateSettings(SettingsPath.NewAccount)}
+          />
+        </Section>
+      </StyledAddAccountSectionContainer>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx
index 8307e68e1f..11a37f567a 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx
@@ -1,6 +1,5 @@
 import { styled } from '@linaria/react';
 
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type SettingsAccountsMessageAutoCreationIconProps = {
@@ -9,8 +8,18 @@ type SettingsAccountsMessageAutoCreationIconProps = {
   isReceivedActive?: boolean;
 };
 
-const StyledIconContainer = styled(SettingsAccountsCardMedia)`
+const StyledIconContainer = styled.div`
   align-items: stretch;
+  border: 2px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.sm};
+  color: ${themeCssVariables.font.color.light};
+  display: flex;
+  flex-direction: column;
+  gap: ${themeCssVariables.spacing['0.5']};
+  height: ${themeCssVariables.spacing[8]};
+  justify-content: center;
+  padding: ${themeCssVariables.spacing['0.5']};
+  width: ${themeCssVariables.spacing[6]};
 `;
 
 const StyledDirectionSkeleton = styled.div<{ isActive?: boolean }>`
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx
index b78110137c..a32792377a 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx
@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 
 import { MessageFolderImportPolicy } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type SettingsAccountsMessageFolderIconProps = {
@@ -9,9 +8,18 @@ type SettingsAccountsMessageFolderIconProps = {
   value?: MessageFolderImportPolicy;
 };
 
-const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+const StyledCardMedia = styled.div`
   align-items: stretch;
+  border: 2px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.sm};
+  color: ${themeCssVariables.font.color.light};
+  display: flex;
   flex-direction: column;
+  gap: ${themeCssVariables.spacing['0.5']};
+  height: ${themeCssVariables.spacing[8]};
+  justify-content: center;
+  padding: ${themeCssVariables.spacing['0.5']};
+  width: ${themeCssVariables.spacing[6]};
 `;
 
 const StyledFolderRow = styled.div`
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
index 70b366cbe5..2fb9f59add 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
@@ -14,11 +14,13 @@ type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
     name: string;
   };
 
-const StyledCardContent = styled(CardContent)`
-  cursor: pointer;
+const StyledCardContentContainer = styled.div`
+  > * {
+    cursor: pointer;
 
-  &:hover {
-    background: ${themeCssVariables.background.transparent.lighter};
+    &:hover {
+      background: ${themeCssVariables.background.transparent.lighter};
+    }
   }
 `;
 
@@ -39,8 +41,10 @@ const StyledDescription = styled.div`
   font-size: ${themeCssVariables.font.size.sm};
 `;
 
-const StyledRadio = styled(Radio)`
+const StyledRadioContainer = styled.span`
   margin-left: auto;
+  display: flex;
+  align-items: center;
 `;
 
 const StyledExpandedContent = styled.div`
@@ -63,34 +67,37 @@ export const SettingsAccountsRadioSettingsCard = <
 }: SettingsAccountsRadioSettingsCardProps<Option>) => (
   <Card rounded>
     {options.map((option, index) => (
-      <StyledCardContent
-        key={option.value}
-        divider={index < options.length - 1}
-        onClick={() => onChange(option.value)}
-      >
-        <StyledOptionHeader>
-          {option.cardMedia}
-          <div>
-            <StyledTitle>
-              <Trans id={option.title.id} />
-            </StyledTitle>
-            <StyledDescription>
-              <Trans id={option.description.id} />
-            </StyledDescription>
-          </div>
-          <StyledRadio
-            name={name}
-            value={option.value}
-            onCheckedChange={() => onChange(option.value)}
-            checked={value === option.value}
-          />
-        </StyledOptionHeader>
-        {option.cardContentExpanded && value === option.value && (
-          <StyledExpandedContent>
-            {option.cardContentExpanded}
-          </StyledExpandedContent>
-        )}
-      </StyledCardContent>
+      <StyledCardContentContainer key={option.value}>
+        <CardContent
+          divider={index < options.length - 1}
+          onClick={() => onChange(option.value)}
+        >
+          <StyledOptionHeader>
+            {option.cardMedia}
+            <div>
+              <StyledTitle>
+                <Trans id={option.title.id} />
+              </StyledTitle>
+              <StyledDescription>
+                <Trans id={option.description.id} />
+              </StyledDescription>
+            </div>
+            <StyledRadioContainer>
+              <Radio
+                name={name}
+                value={option.value}
+                onCheckedChange={() => onChange(option.value)}
+                checked={value === option.value}
+              />
+            </StyledRadioContainer>
+          </StyledOptionHeader>
+          {option.cardContentExpanded && value === option.value && (
+            <StyledExpandedContent>
+              {option.cardContentExpanded}
+            </StyledExpandedContent>
+          )}
+        </CardContent>
+      </StyledCardContentContainer>
     ))}
   </Card>
 );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
index 661d98b595..306c3784fc 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
@@ -14,14 +14,16 @@ type SettingsAccountsToggleSettingCardProps = {
   parameters: Parameter[];
 };
 
-const StyledCardContent = styled(CardContent)`
-  align-items: center;
-  display: flex;
-  gap: ${themeCssVariables.spacing[4]};
-  cursor: pointer;
+const StyledCardContentContainer = styled.div`
+  > * {
+    align-items: center;
+    display: flex;
+    gap: ${themeCssVariables.spacing[4]};
+    cursor: pointer;
 
-  &:hover {
-    background: ${themeCssVariables.background.transparent.lighter};
+    &:hover {
+      background: ${themeCssVariables.background.transparent.lighter};
+    }
   }
 `;
 
@@ -36,8 +38,10 @@ const StyledDescription = styled.div`
   font-size: ${themeCssVariables.font.size.sm};
 `;
 
-const StyledToggle = styled(Toggle)`
+const StyledToggleContainer = styled.span`
   margin-left: auto;
+  display: flex;
+  align-items: center;
 `;
 
 export const SettingsAccountsToggleSettingCard = ({
@@ -45,17 +49,20 @@ export const SettingsAccountsToggleSettingCard = ({
 }: SettingsAccountsToggleSettingCardProps) => (
   <Card rounded>
     {parameters.map((parameter, index) => (
-      <StyledCardContent
-        key={index}
-        divider={index < parameters.length - 1}
-        onClick={() => parameter.onToggle(!parameter.value)}
-      >
-        <div>
-          <StyledTitle>{parameter.title}</StyledTitle>
-          <StyledDescription>{parameter.description}</StyledDescription>
-        </div>
-        <StyledToggle value={parameter.value} onChange={parameter.onToggle} />
-      </StyledCardContent>
+      <StyledCardContentContainer key={index}>
+        <CardContent
+          divider={index < parameters.length - 1}
+          onClick={() => parameter.onToggle(!parameter.value)}
+        >
+          <div>
+            <StyledTitle>{parameter.title}</StyledTitle>
+            <StyledDescription>{parameter.description}</StyledDescription>
+          </div>
+          <StyledToggleContainer>
+            <Toggle value={parameter.value} onChange={parameter.onToggle} />
+          </StyledToggleContainer>
+        </CardContent>
+      </StyledCardContentContainer>
     ))}
   </Card>
 );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx
index de9f7e676c..ca4c417caf 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx
@@ -1,6 +1,5 @@
 import { styled } from '@linaria/react';
 
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type VisibilityElementState = 'active' | 'inactive';
@@ -12,8 +11,18 @@ type SettingsAccountsVisibilityIconProps = {
   body?: VisibilityElementState;
 };
 
-const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+const StyledCardMedia = styled.div`
   align-items: stretch;
+  border: 2px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.sm};
+  color: ${themeCssVariables.font.color.light};
+  display: flex;
+  flex-direction: column;
+  gap: ${themeCssVariables.spacing['0.5']};
+  height: ${themeCssVariables.spacing[8]};
+  justify-content: center;
+  padding: ${themeCssVariables.spacing['0.5']};
+  width: ${themeCssVariables.spacing[6]};
 `;
 
 const StyledSubjectSkeleton = styled.div<{ isActive?: boolean }>`
@@ -25,13 +34,24 @@ const StyledSubjectSkeleton = styled.div<{ isActive?: boolean }>`
   height: 3px;
 `;
 
-const StyledMetadataSkeleton = styled(StyledSubjectSkeleton)`
+const StyledMetadataSkeleton = styled.div<{ isActive?: boolean }>`
+  background-color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.accent.accent4060
+      : themeCssVariables.background.quaternary};
+  border-radius: 1px;
+  height: 3px;
   margin-right: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledBodySkeleton = styled(StyledSubjectSkeleton)`
+const StyledBodySkeleton = styled.div<{ isActive?: boolean }>`
+  background-color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.accent.accent4060
+      : themeCssVariables.background.quaternary};
   border-radius: ${themeCssVariables.border.radius.xs};
   flex: 1 0 auto;
+  height: 3px;
 `;
 
 export const SettingsAccountsVisibilityIcon = ({
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountsTableHeader.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountsTableHeader.tsx
index 4a74608151..57caed7e6f 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountsTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountsTableHeader.tsx
@@ -1,24 +1,24 @@
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledTableHeader = styled(TableHeader)`
-  padding-right: ${themeCssVariables.spacing[14]};
-`;
-
 export const SettingsConnectedAccountsTableHeader = () => {
   return (
     <Table>
       <TableRow gridAutoColumns="332px 1fr">
-        <StyledTableHeader>
+        <TableHeader
+          padding={`0 ${themeCssVariables.spacing[14]} 0 ${themeCssVariables.spacing[2]}`}
+        >
           <Trans>Account</Trans>
-        </StyledTableHeader>
-        <StyledTableHeader align="right">
+        </TableHeader>
+        <TableHeader
+          align="right"
+          padding={`0 ${themeCssVariables.spacing[14]} 0 ${themeCssVariables.spacing[2]}`}
+        >
           <Trans>Status</Trans>
-        </StyledTableHeader>
+        </TableHeader>
       </TableRow>
     </Table>
   );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx
index 87872c5386..c49dc52e2c 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx
@@ -37,18 +37,11 @@ const StyledFoldersContainer = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
   width: 100%;
 `;
 
-const StyledCheckboxCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  padding-right: ${themeCssVariables.spacing[1]};
-  justify-content: flex-end;
-`;
-
 const StyledSectionHeader = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.lighter};
@@ -61,8 +54,10 @@ const StyledSectionHeader = styled.div`
   text-align: left;
 `;
 
-const StyledLabel = styled(Label)`
+const StyledLabelContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
   margin-bottom: ${themeCssVariables.spacing[2]};
   margin-top: ${themeCssVariables.spacing[2]};
 `;
@@ -165,23 +160,30 @@ export const SettingsAccountsMessageFoldersCard = () => {
   return (
     <Section>
       <Table>
-        <StyledSearchInput
-          placeholder={t`Search folders...`}
-          value={search}
-          onChange={setSearch}
-          instanceId={'message-folders-search'}
-        />
-        <StyledLabel>{t`Folders`}</StyledLabel>
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            placeholder={t`Search folders...`}
+            value={search}
+            onChange={setSearch}
+            instanceId={'message-folders-search'}
+          />
+        </StyledSearchInputContainer>
+        <StyledLabelContainer>
+          <Label>{t`Folders`}</Label>
+        </StyledLabelContainer>
 
         <StyledSectionHeader>
           <Label>{t`Toggle all folders`}</Label>
-          <StyledCheckboxCell>
+          <TableCell
+            align="right"
+            padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+          >
             <Checkbox
               checked={allFoldersToggled}
               onChange={() => handleToggleAllFolders(messageFolders)}
               size={CheckboxSize.Small}
             />
-          </StyledCheckboxCell>
+          </TableCell>
         </StyledSectionHeader>
 
         <StyledFoldersContainer>
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx b/packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx
index 2f88eeaa91..f17364b480 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx
@@ -37,7 +37,7 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
@@ -163,13 +163,15 @@ export const SettingsAdminAI = () => {
         />
 
         <StyledSearchAndFilterContainer>
-          <StyledSearchInput
-            instanceId="admin-model-search"
-            LeftIcon={IconSearch}
-            placeholder={t`Search a model...`}
-            value={searchQuery}
-            onChange={setSearchQuery}
-          />
+          <StyledSearchInputContainer>
+            <SettingsTextInput
+              instanceId="admin-model-search"
+              LeftIcon={IconSearch}
+              placeholder={t`Search a model...`}
+              value={searchQuery}
+              onChange={setSearchQuery}
+            />
+          </StyledSearchInputContainer>
           <Dropdown
             dropdownId="admin-ai-models-filter-dropdown"
             dropdownPlacement="bottom-end"
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
index 3df590bf52..89abbea65e 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconSearch } from 'twenty-ui/display';
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   width: 100%;
 `;
 
@@ -17,13 +17,15 @@ export const ConfigVariableSearchInput = ({
   onChange,
 }: ConfigVariableSearchInputProps) => {
   return (
-    <StyledSearchInput
-      instanceId="config-variable-search"
-      placeholder={t`Search config variables`}
-      value={value}
-      onChange={onChange}
-      autoFocus={false}
-      LeftIcon={IconSearch}
-    />
+    <StyledSearchInputContainer>
+      <SettingsTextInput
+        instanceId="config-variable-search"
+        placeholder={t`Search config variables`}
+        value={value}
+        onChange={onChange}
+        autoFocus={false}
+        LeftIcon={IconSearch}
+      />
+    </StyledSearchInputContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx
index cbfc9be78b..bd6081ef75 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx
@@ -12,16 +12,11 @@ type SettingsAdminConfigVariablesRowProps = {
   variable: ConfigVariable;
 };
 
-const StyledTruncatedCell = styled(TableCell)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-`;
-
-const StyledTableRow = styled(TableRow)`
-  &:hover {
-    background-color: ${themeCssVariables.background.transparent.light};
+const StyledTableRowContainer = styled.div`
+  > * {
+    &:hover {
+      background-color: ${themeCssVariables.background.transparent.light};
+    }
   }
 `;
 
@@ -48,24 +43,38 @@ export const SettingsAdminConfigVariablesRow = ({
           : variable.value;
 
   return (
-    <StyledTableRow
-      gridAutoColumns="5fr 3fr 1fr"
-      to={getSettingsPath(SettingsPath.AdminPanelConfigVariableDetails, {
-        variableName: variable.name,
-      })}
-    >
-      <StyledTruncatedCell color={theme.font.color.primary}>
-        <StyledEllipsisLabel>{variable.name}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
-      <StyledTruncatedCell align="right">
-        <StyledEllipsisLabel>{displayValue}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
-      <TableCell align="right">
-        <IconChevronRight
-          size={theme.icon.size.md}
-          color={theme.font.color.tertiary}
-        />
-      </TableCell>
-    </StyledTableRow>
+    <StyledTableRowContainer>
+      <TableRow
+        gridAutoColumns="5fr 3fr 1fr"
+        to={getSettingsPath(SettingsPath.AdminPanelConfigVariableDetails, {
+          variableName: variable.name,
+        })}
+      >
+        <TableCell
+          color={theme.font.color.primary}
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          clickable
+        >
+          <StyledEllipsisLabel>{variable.name}</StyledEllipsisLabel>
+        </TableCell>
+        <TableCell
+          align="right"
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          clickable
+        >
+          <StyledEllipsisLabel>{displayValue}</StyledEllipsisLabel>
+        </TableCell>
+        <TableCell align="right">
+          <IconChevronRight
+            size={theme.icon.size.md}
+            color={theme.font.color.tertiary}
+          />
+        </TableCell>
+      </TableRow>
+    </StyledTableRowContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx
index 8402c74cc3..bff3e09e00 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx
@@ -8,7 +8,7 @@ import { styled } from '@linaria/react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ConfigVariable } from '~/generated-metadata/graphql';
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -26,14 +26,16 @@ export const SettingsAdminConfigVariablesTable = ({
         <TableHeader align="right">{t`Value`}</TableHeader>
         <TableHeader align="right"></TableHeader>
       </TableRow>
-      <StyledTableBody>
-        {variables.map((variable) => (
-          <SettingsAdminConfigVariablesRow
-            key={variable.name}
-            variable={variable}
-          />
-        ))}
-      </StyledTableBody>
+      <StyledTableBodyContainer>
+        <TableBody>
+          {variables.map((variable) => (
+            <SettingsAdminConfigVariablesRow
+              key={variable.name}
+              variable={variable}
+            />
+          ))}
+        </TableBody>
+      </StyledTableBodyContainer>
     </Table>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
index 0de3d9bda3..dba2921fdd 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx
@@ -5,9 +5,11 @@ import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
-  padding-left: ${themeCssVariables.spacing[2]};
-  padding-right: ${themeCssVariables.spacing[2]};
+const StyledSettingsAdminTableCardContainer = styled.div`
+  > * {
+    padding-left: ${themeCssVariables.spacing[2]};
+    padding-right: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsAdminHealthAccountSyncCountersTable = ({
@@ -47,13 +49,15 @@ export const SettingsAdminHealthAccountSyncCountersTable = ({
   return (
     <Section>
       <H2Title title={title} description={description} />
-      <StyledSettingsAdminTableCard
-        items={items}
-        rounded
-        gridAutoColumns="1fr 1fr"
-        labelAlign="left"
-        valueAlign="right"
-      />
+      <StyledSettingsAdminTableCardContainer>
+        <SettingsAdminTableCard
+          items={items}
+          rounded
+          gridAutoColumns="1fr 1fr"
+          labelAlign="left"
+          valueAlign="right"
+        />
+      </StyledSettingsAdminTableCardContainer>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx
index ca2653c151..596c979b70 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx
@@ -29,9 +29,11 @@ const StyledNoDataMessage = styled.div`
   justify-content: center;
 `;
 
-const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
-  padding-left: ${themeCssVariables.spacing[2]};
-  padding-right: ${themeCssVariables.spacing[2]};
+const StyledSettingsAdminTableCardContainer = styled.div`
+  > * {
+    padding-left: ${themeCssVariables.spacing[2]};
+    padding-right: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 type SettingsAdminWorkerMetricsGraphProps = {
@@ -200,23 +202,25 @@ export const SettingsAdminWorkerMetricsGraph = ({
         )}
       </StyledGraphContainer>
       {metricsDetails && (
-        <StyledSettingsAdminTableCard
-          rounded
-          items={Object.entries(metricsDetails)
-            .filter(([key]) => key !== '__typename')
-            .map(([key, value]) => ({
-              label: key.charAt(0).toUpperCase() + key.slice(1),
-              value:
-                typeof value === 'number'
-                  ? value
-                  : Array.isArray(value)
-                    ? value.length
-                    : String(value),
-            }))}
-          gridAutoColumns="1fr 1fr"
-          labelAlign="left"
-          valueAlign="right"
-        />
+        <StyledSettingsAdminTableCardContainer>
+          <SettingsAdminTableCard
+            rounded
+            items={Object.entries(metricsDetails)
+              .filter(([key]) => key !== '__typename')
+              .map(([key, value]) => ({
+                label: key.charAt(0).toUpperCase() + key.slice(1),
+                value:
+                  typeof value === 'number'
+                    ? value
+                    : Array.isArray(value)
+                      ? value.length
+                      : String(value),
+              }))}
+            gridAutoColumns="1fr 1fr"
+            labelAlign="left"
+            valueAlign="right"
+          />
+        </StyledSettingsAdminTableCardContainer>
       )}
     </>
   );
diff --git a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx
index 6c3dc23007..b804c521eb 100644
--- a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx
+++ b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx
@@ -26,8 +26,10 @@ const StyledDotContainer = styled.div<{ dotPosition: DotPosition }>`
     dotPosition === 'top' ? 'stretch' : 'center'};
 `;
 
-const StyledIconPoint = styled(IconPoint)`
+const StyledIconPointContainer = styled.span`
   margin-right: 0;
+  display: flex;
+  align-items: center;
 `;
 
 export const AdvancedSettingsContentWrapperWithDot = ({
@@ -41,11 +43,13 @@ export const AdvancedSettingsContentWrapperWithDot = ({
     <StyledWrapper>
       {!hideDot && (
         <StyledDotContainer dotPosition={dotPosition}>
-          <StyledIconPoint
-            size={12}
-            color={theme.color.yellow}
-            fill={theme.color.yellow}
-          />
+          <StyledIconPointContainer>
+            <IconPoint
+              size={12}
+              color={theme.color.yellow}
+              fill={theme.color.yellow}
+            />
+          </StyledIconPointContainer>
         </StyledDotContainer>
       )}
       {children}
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
index 517fc2af42..f5176350f4 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
@@ -18,28 +18,34 @@ type SettingsCardProps = {
   Status?: ReactNode;
 };
 
-const StyledCard = styled(Card)<{
+const StyledCardWrapper = styled.div<{
   disabled?: boolean;
-  onClick?: () => void;
+  clickable?: boolean;
 }>`
   color: ${({ disabled }) =>
     disabled
       ? themeCssVariables.font.color.extraLight
       : themeCssVariables.font.color.tertiary};
-  cursor: ${({ disabled, onClick }) =>
-    disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
+  cursor: ${({ disabled, clickable }) =>
+    disabled ? 'not-allowed' : clickable ? 'pointer' : 'default'};
   width: 100%;
+
+  > * {
+    color: inherit;
+  }
 `;
 
-const StyledCardContent = styled(CardContent)`
-  display: flex;
-  flex-direction: column;
-  gap: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]};
+const StyledCardContentContainer = styled.div`
+  > * {
+    display: flex;
+    flex-direction: column;
+    gap: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]};
 
-  &:hover {
-    background-color: ${themeCssVariables.background.quaternary};
-    cursor: pointer;
+    &:hover {
+      background-color: ${themeCssVariables.background.quaternary};
+      cursor: pointer;
+    }
   }
 `;
 
@@ -61,8 +67,10 @@ const StyledTitle = styled.div<{ disabled?: boolean }>`
   justify-content: flex-start;
 `;
 
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.light};
+  display: flex;
 `;
 
 const StyledDescription = styled.div`
@@ -91,24 +99,31 @@ export const SettingsCard = ({
   const { theme } = useContext(ThemeContext);
 
   return (
-    <StyledCard
+    <StyledCardWrapper
       disabled={disabled}
-      onClick={disabled ? undefined : onClick}
+      clickable={!!onClick}
       className={className}
-      rounded={true}
     >
-      <StyledCardContent>
-        <StyledHeader>
-          <StyledIconContainer>{Icon}</StyledIconContainer>
-          <StyledTitle disabled={disabled}>
-            {title}
-            {soon && <Pill label={t`Soon`} />}
-          </StyledTitle>
-          {Status && Status}
-          <StyledIconChevronRight size={theme.icon.size.sm} />
-        </StyledHeader>
-        {description && <StyledDescription>{description}</StyledDescription>}
-      </StyledCardContent>
-    </StyledCard>
+      <Card onClick={disabled ? undefined : onClick} rounded={true} fullWidth>
+        <StyledCardContentContainer>
+          <CardContent>
+            <StyledHeader>
+              <StyledIconContainer>{Icon}</StyledIconContainer>
+              <StyledTitle disabled={disabled}>
+                {title}
+                {soon && <Pill label={t`Soon`} />}
+              </StyledTitle>
+              {Status && Status}
+              <StyledIconChevronRightContainer>
+                <IconChevronRight size={theme.icon.size.sm} />
+              </StyledIconChevronRightContainer>
+            </StyledHeader>
+            {description && (
+              <StyledDescription>{description}</StyledDescription>
+            )}
+          </CardContent>
+        </StyledCardContentContainer>
+      </Card>
+    </StyledCardWrapper>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx b/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx
index 8a684a9452..ed8c90a31e 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx
@@ -14,10 +14,12 @@ const StyledNameCell = styled.div`
   gap: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledTableRow = styled(TableRow)`
-  &:hover {
-    background: ${themeCssVariables.background.transparent.light};
-    cursor: pointer;
+const StyledTableRowContainer = styled.div`
+  > * {
+    &:hover {
+      background-color: ${themeCssVariables.background.transparent.light};
+      cursor: pointer;
+    }
   }
 `;
 
@@ -32,19 +34,23 @@ export const SettingsConnectedAccountsTableRow = ({
   const IconComponent = SettingsConnectedAccountIcon({ account });
 
   return (
-    <StyledTableRow key={account.id} gridAutoColumns="332px 1fr">
-      <TableCell>
-        <StyledNameCell>
-          <IconComponent
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
+    <StyledTableRowContainer>
+      <TableRow key={account.id} gridAutoColumns="332px 1fr">
+        <TableCell>
+          <StyledNameCell>
+            <IconComponent
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+            />
+            {account.handle}
+          </StyledNameCell>
+        </TableCell>
+        <TableCell align="right">
+          <SettingsAccountsConnectedAccountsRowRightContainer
+            account={account}
           />
-          {account.handle}
-        </StyledNameCell>
-      </TableCell>
-      <TableCell align="right">
-        <SettingsAccountsConnectedAccountsRowRightContainer account={account} />
-      </TableCell>
-    </StyledTableRow>
+        </TableCell>
+      </TableRow>
+    </StyledTableRowContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
index 23c4a62be7..bfa44671c3 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
@@ -25,9 +25,10 @@ const StyledCounterContainer = styled.div<{ showButtons: boolean }>`
       : themeCssVariables.spacing[16]};
 `;
 
-const StyledTextInput = styled(SettingsTextInput)`
+const StyledTextInputContainer = styled.div`
   width: ${themeCssVariables.spacing[16]};
-  input {
+
+  > * input {
     width: ${themeCssVariables.spacing[16]};
     height: ${themeCssVariables.spacing[6]};
     text-align: center;
@@ -84,14 +85,16 @@ export const SettingsCounter = ({
           disabled={disabled}
         />
       )}
-      <StyledTextInput
-        instanceId="settings-counter-input"
-        name="counter"
-        fullWidth
-        value={value.toString()}
-        onChange={handleTextInputChange}
-        disabled={disabled}
-      />
+      <StyledTextInputContainer>
+        <SettingsTextInput
+          instanceId="settings-counter-input"
+          name="counter"
+          fullWidth
+          value={value.toString()}
+          onChange={handleTextInputChange}
+          disabled={disabled}
+        />
+      </StyledTextInputContainer>
       {showButtons && (
         <IconButton
           size="small"
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
index ca0a777b1a..2ad5076f54 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
@@ -28,15 +28,16 @@ type SettingsDnsRecordsTableProps = {
   records: DnsRecord[];
 };
 
-const StyledTableRow = styled(TableRow)`
-  & > * {
+const StyledTableRowContainer = styled.div`
+  > * > * {
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
   }
 `;
 
-const StyledTableCell = styled(TableCell)`
+const StyledTableCellFontWrapper = styled.div`
+  display: contents;
   font-family: monospace;
 `;
 
@@ -69,53 +70,69 @@ export const SettingsDnsRecordsTable = ({
 
   return (
     <Table>
-      <StyledTableRow gridAutoColumns={gridAutoColumns}>
-        <TableHeader align="center">{t`Type`}</TableHeader>
-        <TableHeader align="center">{t`Key`}</TableHeader>
-        <TableHeader align="center">{t`Value`}</TableHeader>
-        {hasPriorityRecords && (
-          <TableHeader align="center">{t`Priority`}</TableHeader>
-        )}
-        {hasTtlRecords && <TableHeader align="center">{t`TTL`}</TableHeader>}
-        {hasStatusRecords && (
-          <TableHeader align="center">{t`Status`}</TableHeader>
-        )}
-      </StyledTableRow>
+      <StyledTableRowContainer>
+        <TableRow gridAutoColumns={gridAutoColumns}>
+          <TableHeader align="center">{t`Type`}</TableHeader>
+          <TableHeader align="center">{t`Key`}</TableHeader>
+          <TableHeader align="center">{t`Value`}</TableHeader>
+          {hasPriorityRecords && (
+            <TableHeader align="center">{t`Priority`}</TableHeader>
+          )}
+          {hasTtlRecords && <TableHeader align="center">{t`TTL`}</TableHeader>}
+          {hasStatusRecords && (
+            <TableHeader align="center">{t`Status`}</TableHeader>
+          )}
+        </TableRow>
+      </StyledTableRowContainer>
 
       {records.map((record) => (
-        <StyledTableRow key={record.value} gridAutoColumns={gridAutoColumns}>
-          <TableCell>{record.type}</TableCell>
-          <StyledTableCell
-            onClick={() => {
-              copyToClipboard(record.key || '');
-            }}
-          >
-            <OverflowingTextWithTooltip text={record.key} />
-          </StyledTableCell>
+        <StyledTableRowContainer key={record.value}>
+          <TableRow gridAutoColumns={gridAutoColumns}>
+            <TableCell>{record.type}</TableCell>
+            <StyledTableCellFontWrapper>
+              <TableCell
+                onClick={() => {
+                  copyToClipboard(record.key || '');
+                }}
+              >
+                <OverflowingTextWithTooltip text={record.key} />
+              </TableCell>
+            </StyledTableCellFontWrapper>
 
-          <StyledTableCell
-            onClick={() => {
-              copyToClipboard(record.value);
-            }}
-          >
-            <OverflowingTextWithTooltip text={record.value} />
-          </StyledTableCell>
+            <StyledTableCellFontWrapper>
+              <TableCell
+                onClick={() => {
+                  copyToClipboard(record.value);
+                }}
+              >
+                <OverflowingTextWithTooltip text={record.value} />
+              </TableCell>
+            </StyledTableCellFontWrapper>
 
-          {hasPriorityRecords && (
-            <StyledTableCell>{record.priority}</StyledTableCell>
-          )}
-          {hasTtlRecords && <StyledTableCell>{record.ttl}</StyledTableCell>}
-          {hasStatusRecords && (
-            <StyledTableCell>
-              {'status' in record ? (
-                <Status
-                  color={record.statusColor}
-                  text={capitalize(record.status)}
-                />
-              ) : null}
-            </StyledTableCell>
-          )}
-        </StyledTableRow>
+            {hasPriorityRecords && (
+              <StyledTableCellFontWrapper>
+                <TableCell>{record.priority}</TableCell>
+              </StyledTableCellFontWrapper>
+            )}
+            {hasTtlRecords && (
+              <StyledTableCellFontWrapper>
+                <TableCell>{record.ttl}</TableCell>
+              </StyledTableCellFontWrapper>
+            )}
+            {hasStatusRecords && (
+              <StyledTableCellFontWrapper>
+                <TableCell>
+                  {'status' in record ? (
+                    <Status
+                      color={record.statusColor}
+                      text={capitalize(record.status)}
+                    />
+                  ) : null}
+                </TableCell>
+              </StyledTableCellFontWrapper>
+            )}
+          </TableRow>
+        </StyledTableRowContainer>
       ))}
     </Table>
   );
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
index 9162748607..ecd692c8bc 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
@@ -8,10 +8,12 @@ import { Card, CardFooter } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 
-const StyledFooter = styled(CardFooter)`
-  align-items: center;
-  display: flex;
-  padding: ${themeCssVariables.spacing[1]};
+const StyledFooterContainer = styled.div`
+  > * {
+    align-items: center;
+    display: flex;
+    padding: ${themeCssVariables.spacing[1]};
+  }
 `;
 
 const StyledButton = styled.button`
@@ -91,12 +93,14 @@ export const SettingsListCard = <
         />
       ))}
       {hasFooter && (
-        <StyledFooter divider={!!items.length}>
-          <StyledButton onClick={onFooterButtonClick}>
-            <IconPlus size={theme.icon.size.md} />
-            {footerButtonLabel}
-          </StyledButton>
-        </StyledFooter>
+        <StyledFooterContainer>
+          <CardFooter divider={!!items.length}>
+            <StyledButton onClick={onFooterButtonClick}>
+              <IconPlus size={theme.icon.size.md} />
+              {footerButtonLabel}
+            </StyledButton>
+          </CardFooter>
+        </StyledFooterContainer>
       )}
     </Card>
   );
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
index 15bbf0d060..948d41f0e9 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
@@ -6,15 +6,17 @@ import { IconChevronRight, type IconComponent } from 'twenty-ui/display';
 import { CardContent } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledRow = styled(CardContent)`
-  align-items: center;
-  display: flex;
-  font-size: ${themeCssVariables.font.size.sm};
-  font-weight: ${themeCssVariables.font.weight.medium};
-  gap: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]};
-  padding-left: ${themeCssVariables.spacing[3]};
-  min-height: ${themeCssVariables.spacing[6]};
+const StyledRowContainer = styled.div`
+  > * {
+    align-items: center;
+    display: flex;
+    font-size: ${themeCssVariables.font.size.sm};
+    font-weight: ${themeCssVariables.font.weight.medium};
+    gap: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]};
+    padding-left: ${themeCssVariables.spacing[3]};
+    min-height: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 const StyledRightContainer = styled.div`
@@ -43,9 +45,11 @@ const StyledDescription = styled.span`
   padding-left: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledLink = styled(Link)`
-  color: ${themeCssVariables.font.color.secondary};
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    color: ${themeCssVariables.font.color.secondary};
+    text-decoration: none;
+  }
 `;
 
 type SettingsListItemCardContentProps = {
@@ -72,36 +76,44 @@ export const SettingsListItemCardContent = ({
   const { theme } = useContext(ThemeContext);
 
   const content = (
-    <StyledRow
-      onClick={onClick}
-      divider={divider}
-      isClickable={!!onClick || !!to}
-      hasHoverHighlight={!!to}
-    >
-      {!!LeftIcon && (
-        <LeftIcon
-          size={theme.icon.size.md}
-          color={LeftIconColor ?? 'currentColor'}
-        />
-      )}
-      <StyledContent>
-        <StyledLabel>{label}</StyledLabel>
-        {!!description && <StyledDescription>{description}</StyledDescription>}
-      </StyledContent>
-      <StyledRightContainer>
-        {rightComponent}
-        {!!to && (
-          <IconChevronRight
+    <StyledRowContainer>
+      <CardContent
+        onClick={onClick}
+        divider={divider}
+        isClickable={!!onClick || !!to}
+        hasHoverHighlight={!!to}
+      >
+        {!!LeftIcon && (
+          <LeftIcon
             size={theme.icon.size.md}
-            color={theme.font.color.tertiary}
+            color={LeftIconColor ?? 'currentColor'}
           />
         )}
-      </StyledRightContainer>
-    </StyledRow>
+        <StyledContent>
+          <StyledLabel>{label}</StyledLabel>
+          {!!description && (
+            <StyledDescription>{description}</StyledDescription>
+          )}
+        </StyledContent>
+        <StyledRightContainer>
+          {rightComponent}
+          {!!to && (
+            <IconChevronRight
+              size={theme.icon.size.md}
+              color={theme.font.color.tertiary}
+            />
+          )}
+        </StyledRightContainer>
+      </CardContent>
+    </StyledRowContainer>
   );
 
   if (isDefined(to)) {
-    return <StyledLink to={to}>{content}</StyledLink>;
+    return (
+      <StyledLinkContainer>
+        <Link to={to}>{content}</Link>
+      </StyledLinkContainer>
+    );
   }
 
   return content;
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
index b93b816a9b..f1a4c5ca4c 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
@@ -2,9 +2,17 @@ import { styled } from '@linaria/react';
 import { Card } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledCard = styled(Card)`
-  background-color: ${themeCssVariables.background.secondary};
+const StyledCardContainer = styled.div`
   height: 40px;
+
+  > * {
+    background-color: ${themeCssVariables.background.secondary};
+    height: 100%;
+  }
 `;
 
-export { StyledCard as SettingsListSkeletonCard };
+export const SettingsListSkeletonCard = () => (
+  <StyledCardContainer>
+    <Card />
+  </StyledCardContainer>
+);
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
index 6ccb3365cb..795be2e3a0 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
@@ -1,6 +1,5 @@
 import { Separator } from '@/settings/components/Separator';
 import {
-  StyledSettingsCardContent,
   StyledSettingsCardDescription,
   StyledSettingsCardIcon,
   StyledSettingsCardTextContainer,
@@ -16,7 +15,12 @@ import {
 import { Toggle } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledSettingsCardToggleContent = styled(StyledSettingsCardContent)`
+const StyledSettingsCardToggleContent = styled.div<{ disabled?: boolean }>`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[3]};
+  background-color: ${themeCssVariables.background.secondary};
+  padding: ${themeCssVariables.spacing[4]};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   position: relative;
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
@@ -26,7 +30,9 @@ const StyledSettingsCardToggleContent = styled(StyledSettingsCardContent)`
   }
 `;
 
-const StyledSettingsCardToggleButton = styled(Toggle)`
+const StyledSettingsCardToggleButtonContainer = styled.span`
+  align-items: center;
+  display: flex;
   flex-shrink: 0;
   margin-left: auto;
 `;
@@ -84,15 +90,17 @@ export const SettingsOptionCardContentToggle = ({
             </StyledSettingsCardDescription>
           )}
         </StyledSettingsCardTextContainer>
-        <StyledSettingsCardToggleButton
-          id={toggleId}
-          value={checked}
-          onChange={onChange}
-          disabled={disabled}
-          toggleSize="small"
-          color={advancedMode ? theme.color.yellow : theme.color.blue}
-          centered={toggleCentered}
-        />
+        <StyledSettingsCardToggleButtonContainer>
+          <Toggle
+            id={toggleId}
+            value={checked}
+            onChange={onChange}
+            disabled={disabled}
+            toggleSize="small"
+            color={advancedMode ? theme.color.yellow : theme.color.blue}
+            centered={toggleCentered}
+          />
+        </StyledSettingsCardToggleButtonContainer>
       </StyledSettingsCardToggleContent>
       {divider && <Separator />}
     </>
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index 0db376386a..deccf22129 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
@@ -5,22 +5,26 @@ import { type IconComponent } from 'twenty-ui/display';
 import { Radio } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledRadioCardContent = styled(CardContent)`
-  display: flex;
-  align-items: center;
-  padding: ${themeCssVariables.spacing[2]};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
-  flex-grow: 1;
-  gap: ${themeCssVariables.spacing[2]};
-  cursor: pointer;
+const StyledRadioCardContentContainer = styled.div`
+  > * {
+    display: flex;
+    align-items: center;
+    padding: ${themeCssVariables.spacing[2]};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    border-radius: ${themeCssVariables.border.radius.sm};
+    flex-grow: 1;
+    gap: ${themeCssVariables.spacing[2]};
+    cursor: pointer;
 
-  &:hover {
-    background: ${themeCssVariables.background.transparent.lighter};
+    &:hover {
+      background: ${themeCssVariables.background.transparent.lighter};
+    }
   }
 `;
 
-const StyledRadio = styled(Radio)`
+const StyledRadioContainer = styled.span`
+  align-items: center;
+  display: flex;
   margin-left: auto;
   padding: ${themeCssVariables.spacing[1]};
 `;
@@ -58,13 +62,17 @@ export const SettingsRadioCard = ({
   const onClick = () => handleSelect(value);
 
   return (
-    <StyledRadioCardContent tabIndex={0} onClick={onClick}>
-      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray10} />}
-      <span>
-        {title && <StyledTitle>{title}</StyledTitle>}
-        {description && <StyledDescription>{description}</StyledDescription>}
-      </span>
-      <StyledRadio value={value} checked={isSelected} />
-    </StyledRadioCardContent>
+    <StyledRadioCardContentContainer>
+      <CardContent tabIndex={0} onClick={onClick}>
+        {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray10} />}
+        <span>
+          {title && <StyledTitle>{title}</StyledTitle>}
+          {description && <StyledDescription>{description}</StyledDescription>}
+        </span>
+        <StyledRadioContainer>
+          <Radio value={value} checked={isSelected} />
+        </StyledRadioContainer>
+      </CardContent>
+    </StyledRadioCardContentContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
index 779b7468e9..e1fce173fe 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
@@ -8,12 +8,14 @@ type SettingsSummaryCardProps = {
   rightComponent: ReactNode;
 };
 
-const StyledCardContent = styled(CardContent)`
-  align-items: center;
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]};
-  min-height: ${themeCssVariables.spacing[6]};
+const StyledCardContentContainer = styled.div`
+  > * {
+    align-items: center;
+    display: flex;
+    gap: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]};
+    min-height: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 const StyledTitle = styled.div`
@@ -29,9 +31,11 @@ export const SettingsSummaryCard = ({
   rightComponent,
 }: SettingsSummaryCardProps) => (
   <Card>
-    <StyledCardContent>
-      <StyledTitle>{title}</StyledTitle>
-      {rightComponent}
-    </StyledCardContent>
+    <StyledCardContentContainer>
+      <CardContent>
+        <StyledTitle>{title}</StyledTitle>
+        {rightComponent}
+      </CardContent>
+    </StyledCardContentContainer>
   </Card>
 );
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
index 3644ba1a5c..f0d3346ff1 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@@ -28,8 +28,10 @@ const StyledButtonContainer = styled.div`
   width: 100%;
 `;
 
-const StyledDownChevron = styled(IconChevronDown)`
+const StyledDownChevronContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.primary};
+  display: flex;
   position: absolute;
   right: ${themeCssVariables.spacing['1.5']};
   top: 50%;
@@ -45,9 +47,11 @@ const StyledSpan = styled.span`
   margin-left: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledButton = styled(Button)`
-  color: ${themeCssVariables.font.color.primary};
-  padding-right: ${themeCssVariables.spacing[6]};
+const StyledButtonWrapper = styled.div`
+  > button {
+    color: ${themeCssVariables.font.color.primary};
+    padding-right: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
@@ -87,11 +91,17 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
         dropdownId={dropdownId}
         clickableComponent={
           <StyledButtonContainer>
-            <StyledDownChevron size={theme.icon.size.md} />
+            <StyledDownChevronContainer>
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledDownChevronContainer>
             {isConfigureStep ? (
-              <StyledButton variant="tertiary" title={t`2. Configure`} />
+              <StyledButtonWrapper>
+                <Button variant="tertiary" title={t`2. Configure`} />
+              </StyledButtonWrapper>
             ) : (
-              <StyledButton variant="tertiary" title={t`1. Type`} />
+              <StyledButtonWrapper>
+                <Button variant="tertiary" title={t`1. Type`} />
+              </StyledButtonWrapper>
             )}
           </StyledButtonContainer>
         }
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
index 1f288b3b79..3cec59acfe 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
@@ -13,12 +13,16 @@ type SettingsDataModelPreviewFormCardProps = {
   disabled?: boolean;
 };
 
-const StyledPreviewContainer = styled(CardContent)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
+const StyledPreviewContainerWrapper = styled.div`
+  > * {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+  }
 `;
 
-const StyledFormContainer = styled(CardContent)`
-  padding: 0;
+const StyledFormContainerWrapper = styled.div`
+  > * {
+    padding: 0;
+  }
 `;
 
 export const SettingsDataModelPreviewFormCard = ({
@@ -27,12 +31,18 @@ export const SettingsDataModelPreviewFormCard = ({
   form,
 }: SettingsDataModelPreviewFormCardProps) => (
   <Card className={className} fullWidth rounded>
-    <StyledPreviewContainer divider={!!form}>
-      <StyledFormCardTitle>
-        <Trans>Preview</Trans>
-      </StyledFormCardTitle>
-      {preview}
-    </StyledPreviewContainer>
-    {!!form && <StyledFormContainer>{form}</StyledFormContainer>}
+    <StyledPreviewContainerWrapper>
+      <CardContent divider={!!form}>
+        <StyledFormCardTitle>
+          <Trans>Preview</Trans>
+        </StyledFormCardTitle>
+        {preview}
+      </CardContent>
+    </StyledPreviewContainerWrapper>
+    {!!form && (
+      <StyledFormContainerWrapper>
+        <CardContent>{form}</CardContent>
+      </StyledFormContainerWrapper>
+    )}
   </Card>
 );
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
index 32ffe2796c..a6073125b8 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@@ -56,7 +56,7 @@ const StyledCardContainer = styled.div`
   width: calc(50% - ${themeCssVariables.spacing[1]});
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   width: 100%;
 `;
 
@@ -108,13 +108,15 @@ export const SettingsObjectNewFieldSelector = ({
     <>
       {' '}
       <Section>
-        <StyledSearchInput
-          instanceId="new-field-type-search"
-          LeftIcon={IconSearch}
-          placeholder={t`Search a type`}
-          value={searchQuery}
-          onChange={setSearchQuery}
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId="new-field-type-search"
+            LeftIcon={IconSearch}
+            placeholder={t`Search a type`}
+            value={searchQuery}
+            onChange={setSearchQuery}
+          />
+        </StyledSearchInputContainer>
       </Section>
       <Controller
         name="type"
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
index 885d2015a7..074679a6bc 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
@@ -33,7 +33,7 @@ export const settingsDataModelFieldDateFormSchema = z.object({
   settings: fieldDateSettings.optional(),
 });
 
-const StyledTextInput = styled(SettingsTextInput)`
+const StyledTextInputContainer = styled.div`
   padding: ${themeCssVariables.spacing[4]};
   padding-top: 0;
 `;
@@ -117,14 +117,16 @@ export const SettingsDataModelFieldDateForm = ({
           control={control}
           defaultValue={initialCustomUnicodeDateFormat}
           render={({ field: { onChange, value } }) => (
-            <StyledTextInput
-              instanceId="custom-date-format-input"
-              placeholder={t`Format e.g. d-MMM-y (qqq''yy)`}
-              value={value}
-              onChange={(value) => onChange(value)}
-              disabled={false}
-              fullWidth
-            />
+            <StyledTextInputContainer>
+              <SettingsTextInput
+                instanceId="custom-date-format-input"
+                placeholder={t`Format e.g. d-MMM-y (qqq''yy)`}
+                value={value}
+                onChange={(value) => onChange(value)}
+                disabled={false}
+                fullWidth
+              />
+            </StyledTextInputContainer>
           )}
         />
       </AnimatedExpandableContainer>
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
index c768535687..a7c1a77d4a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
@@ -67,8 +67,10 @@ type SettingsDataModelFieldSelectFormProps = {
   disabled?: boolean;
 };
 
-const StyledContainer = styled(CardContent)`
-  padding-bottom: 14px;
+const StyledContainerWrapper = styled.div`
+  > * {
+    padding-bottom: 14px;
+  }
 `;
 
 const StyledOptionsLabel = styled.div<{
@@ -119,18 +121,24 @@ const StyledIconContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledIconPoint = styled(IconPoint)`
+const StyledIconPointContainer = styled.span`
   margin-right: ${themeCssVariables.spacing['0.5']};
+  display: flex;
+  align-items: center;
 `;
 
-const StyledFooter = styled(CardFooter)`
-  background-color: ${themeCssVariables.background.secondary};
-  padding: ${themeCssVariables.spacing[1]};
+const StyledFooterContainer = styled.div`
+  > * {
+    background-color: ${themeCssVariables.background.secondary};
+    padding: ${themeCssVariables.spacing[1]};
+  }
 `;
 
-const StyledButton = styled(LightButton)`
-  justify-content: center;
-  width: 100%;
+const StyledButtonContainer = styled.div`
+  > button {
+    justify-content: center;
+    width: 100%;
+  }
 `;
 
 const StyledOptionsHeaderContainer = styled.div`
@@ -316,199 +324,212 @@ export const SettingsDataModelFieldSelectForm = ({
         defaultValue={initialOptions}
         render={({ field: { onChange, value: options } }) => (
           <>
-            <StyledContainer>
-              <StyledOptionsHeaderContainer>
-                <StyledLabelContainer>
-                  {!isBulkInputMode && (
-                    <AdvancedSettingsWrapper animationDimension="width" hideDot>
-                      <StyledApiKeyContainer>
-                        <StyledIconContainer>
-                          <StyledIconPoint
-                            size={12}
-                            color={theme.color.yellow}
-                            fill={theme.color.yellow}
-                          />
-                        </StyledIconContainer>
-                        <StyledApiKey>{t`API values`}</StyledApiKey>
-                      </StyledApiKeyContainer>
-                    </AdvancedSettingsWrapper>
-                  )}
-                  <StyledOptionsLabel
-                    isAdvancedModeEnabled={isAdvancedModeEnabled}
-                    isBulkInputMode={isBulkInputMode}
-                  >
-                    {t`Options`}
-                  </StyledOptionsLabel>
-                </StyledLabelContainer>
-                {!disabled && (
-                  <Dropdown
-                    dropdownId={OPTIONS_DROPDOWN_ID}
-                    clickableComponent={
-                      <LightIconButton
-                        Icon={IconDotsVertical}
-                        accent="tertiary"
-                      />
-                    }
-                    dropdownComponents={
-                      <DropdownContent
-                        widthInPixels={GenericDropdownContentWidth.Narrow}
+            <StyledContainerWrapper>
+              <CardContent>
+                <StyledOptionsHeaderContainer>
+                  <StyledLabelContainer>
+                    {!isBulkInputMode && (
+                      <AdvancedSettingsWrapper
+                        animationDimension="width"
+                        hideDot
                       >
-                        <DropdownMenuItemsContainer>
-                          <MenuItem
-                            text={
-                              isBulkInputMode ? t`Single edit` : t`Bulk edit`
-                            }
-                            LeftIcon={IconPencil}
-                            onClick={() => {
-                              if (!isBulkInputMode) {
-                                setBulkInputText(
-                                  convertOptionsToBulkText(options),
-                                );
-                              }
-                              setIsBulkInputMode(
-                                (currentInputMode) => !currentInputMode,
-                              );
-                              closeOptionsDropdown(OPTIONS_DROPDOWN_ID);
-                            }}
-                          />
-                          <MenuItem
-                            text={t`Remove all`}
-                            accent="danger"
-                            LeftIcon={IconTrash}
-                            onClick={() => {
-                              onChange([]);
-                              closeOptionsDropdown(OPTIONS_DROPDOWN_ID);
-                            }}
-                          />
-                        </DropdownMenuItemsContainer>
-                      </DropdownContent>
-                    }
-                  />
-                )}
-              </StyledOptionsHeaderContainer>
-
-              {isBulkInputMode ? (
-                <StyledTextAreaContainer>
-                  <TextArea
-                    textAreaId="bulk-options-input"
-                    placeholder={t`Enter one option per line`}
-                    value={bulkInputText}
-                    onChange={(nextOptionAsText) => {
-                      if (disabled) {
-                        return;
-                      }
-
-                      const nextOptions = convertBulkTextToOptions(
-                        nextOptionAsText,
-                        options,
-                      );
-
-                      onChange(nextOptions);
-                      setBulkInputText(nextOptionAsText);
-                    }}
-                    minRows={5}
-                    maxRows={15}
-                    disabled={disabled}
-                  />
-                  <StyledHelpText>
-                    {t`Enter one option per line. Each line will become a new option.`}
-                  </StyledHelpText>
-                </StyledTextAreaContainer>
-              ) : (
-                <>
-                  <DraggableList
-                    onDragEnd={(result) =>
-                      !disabled
-                        ? handleDragEnd(options, result, onChange)
-                        : undefined
-                    }
-                    draggableItems={
-                      <>
-                        {options.map((option, index) => (
-                          <DraggableItem
-                            isInsideScrollableContainer
-                            key={option.id}
-                            draggableId={option.id}
-                            index={index}
-                            isDragDisabled={options.length === 1}
-                            itemComponent={
-                              <SettingsDataModelFieldSelectFormOptionRow
-                                key={option.id}
-                                option={option}
-                                isNewRow={index === options.length - 1}
-                                onChange={(nextOption) => {
-                                  if (disabled) {
-                                    return;
-                                  }
-                                  const nextOptions = toSpliced(
-                                    options,
-                                    index,
-                                    1,
-                                    nextOption,
-                                  );
-                                  onChange(nextOptions);
-
-                                  // Update option value in defaultValue if value has changed
-                                  if (
-                                    nextOption.value !== option.value &&
-                                    isOptionDefaultValue(option.value)
-                                  ) {
-                                    handleRemoveOptionAsDefault(option.value);
-                                    handleSetOptionAsDefault(nextOption.value);
-                                  }
-                                }}
-                                onRemove={() => {
-                                  if (disabled) {
-                                    return;
-                                  }
-                                  const nextOptions = toSpliced(
-                                    options,
-                                    index,
-                                    1,
-                                  ).map((option, nextOptionIndex) => ({
-                                    ...option,
-                                    position: nextOptionIndex,
-                                  }));
-                                  onChange(nextOptions);
-                                }}
-                                isDefault={isOptionDefaultValue(option.value)}
-                                fieldIsNullable={!!isNullable}
-                                onSetAsDefault={() => {
-                                  if (disabled) {
-                                    return;
-                                  }
-                                  handleSetOptionAsDefault(option.value);
-                                }}
-                                onRemoveAsDefault={() => {
-                                  if (disabled) {
-                                    return;
-                                  }
-                                  handleRemoveOptionAsDefault(option.value);
-                                }}
-                                onInputEnter={() => {
-                                  if (disabled) {
-                                    return;
-                                  }
-                                  handleInputEnter();
-                                }}
+                        <StyledApiKeyContainer>
+                          <StyledIconContainer>
+                            <StyledIconPointContainer>
+                              <IconPoint
+                                size={12}
+                                color={theme.color.yellow}
+                                fill={theme.color.yellow}
                               />
-                            }
-                          />
-                        ))}
-                      </>
-                    }
-                  />
-                </>
-              )}
-            </StyledContainer>
+                            </StyledIconPointContainer>
+                          </StyledIconContainer>
+                          <StyledApiKey>{t`API values`}</StyledApiKey>
+                        </StyledApiKeyContainer>
+                      </AdvancedSettingsWrapper>
+                    )}
+                    <StyledOptionsLabel
+                      isAdvancedModeEnabled={isAdvancedModeEnabled}
+                      isBulkInputMode={isBulkInputMode}
+                    >
+                      {t`Options`}
+                    </StyledOptionsLabel>
+                  </StyledLabelContainer>
+                  {!disabled && (
+                    <Dropdown
+                      dropdownId={OPTIONS_DROPDOWN_ID}
+                      clickableComponent={
+                        <LightIconButton
+                          Icon={IconDotsVertical}
+                          accent="tertiary"
+                        />
+                      }
+                      dropdownComponents={
+                        <DropdownContent
+                          widthInPixels={GenericDropdownContentWidth.Narrow}
+                        >
+                          <DropdownMenuItemsContainer>
+                            <MenuItem
+                              text={
+                                isBulkInputMode ? t`Single edit` : t`Bulk edit`
+                              }
+                              LeftIcon={IconPencil}
+                              onClick={() => {
+                                if (!isBulkInputMode) {
+                                  setBulkInputText(
+                                    convertOptionsToBulkText(options),
+                                  );
+                                }
+                                setIsBulkInputMode(
+                                  (currentInputMode) => !currentInputMode,
+                                );
+                                closeOptionsDropdown(OPTIONS_DROPDOWN_ID);
+                              }}
+                            />
+                            <MenuItem
+                              text={t`Remove all`}
+                              accent="danger"
+                              LeftIcon={IconTrash}
+                              onClick={() => {
+                                onChange([]);
+                                closeOptionsDropdown(OPTIONS_DROPDOWN_ID);
+                              }}
+                            />
+                          </DropdownMenuItemsContainer>
+                        </DropdownContent>
+                      }
+                    />
+                  )}
+                </StyledOptionsHeaderContainer>
+
+                {isBulkInputMode ? (
+                  <StyledTextAreaContainer>
+                    <TextArea
+                      textAreaId="bulk-options-input"
+                      placeholder={t`Enter one option per line`}
+                      value={bulkInputText}
+                      onChange={(nextOptionAsText) => {
+                        if (disabled) {
+                          return;
+                        }
+
+                        const nextOptions = convertBulkTextToOptions(
+                          nextOptionAsText,
+                          options,
+                        );
+
+                        onChange(nextOptions);
+                        setBulkInputText(nextOptionAsText);
+                      }}
+                      minRows={5}
+                      maxRows={15}
+                      disabled={disabled}
+                    />
+                    <StyledHelpText>
+                      {t`Enter one option per line. Each line will become a new option.`}
+                    </StyledHelpText>
+                  </StyledTextAreaContainer>
+                ) : (
+                  <>
+                    <DraggableList
+                      onDragEnd={(result) =>
+                        !disabled
+                          ? handleDragEnd(options, result, onChange)
+                          : undefined
+                      }
+                      draggableItems={
+                        <>
+                          {options.map((option, index) => (
+                            <DraggableItem
+                              isInsideScrollableContainer
+                              key={option.id}
+                              draggableId={option.id}
+                              index={index}
+                              isDragDisabled={options.length === 1}
+                              itemComponent={
+                                <SettingsDataModelFieldSelectFormOptionRow
+                                  key={option.id}
+                                  option={option}
+                                  isNewRow={index === options.length - 1}
+                                  onChange={(nextOption) => {
+                                    if (disabled) {
+                                      return;
+                                    }
+                                    const nextOptions = toSpliced(
+                                      options,
+                                      index,
+                                      1,
+                                      nextOption,
+                                    );
+                                    onChange(nextOptions);
+
+                                    // Update option value in defaultValue if value has changed
+                                    if (
+                                      nextOption.value !== option.value &&
+                                      isOptionDefaultValue(option.value)
+                                    ) {
+                                      handleRemoveOptionAsDefault(option.value);
+                                      handleSetOptionAsDefault(
+                                        nextOption.value,
+                                      );
+                                    }
+                                  }}
+                                  onRemove={() => {
+                                    if (disabled) {
+                                      return;
+                                    }
+                                    const nextOptions = toSpliced(
+                                      options,
+                                      index,
+                                      1,
+                                    ).map((option, nextOptionIndex) => ({
+                                      ...option,
+                                      position: nextOptionIndex,
+                                    }));
+                                    onChange(nextOptions);
+                                  }}
+                                  isDefault={isOptionDefaultValue(option.value)}
+                                  fieldIsNullable={!!isNullable}
+                                  onSetAsDefault={() => {
+                                    if (disabled) {
+                                      return;
+                                    }
+                                    handleSetOptionAsDefault(option.value);
+                                  }}
+                                  onRemoveAsDefault={() => {
+                                    if (disabled) {
+                                      return;
+                                    }
+                                    handleRemoveOptionAsDefault(option.value);
+                                  }}
+                                  onInputEnter={() => {
+                                    if (disabled) {
+                                      return;
+                                    }
+                                    handleInputEnter();
+                                  }}
+                                />
+                              }
+                            />
+                          ))}
+                        </>
+                      }
+                    />
+                  </>
+                )}
+              </CardContent>
+            </StyledContainerWrapper>
             {!disabled && !isBulkInputMode && (
-              <StyledFooter>
-                <StyledButton
-                  title={t`Add option`}
-                  Icon={IconPlus}
-                  onClick={handleAddOption}
-                />
-              </StyledFooter>
+              <StyledFooterContainer>
+                <CardFooter>
+                  <StyledButtonContainer>
+                    <LightButton
+                      title={t`Add option`}
+                      Icon={IconPlus}
+                      onClick={handleAddOption}
+                    />
+                  </StyledButtonContainer>
+                </CardFooter>
+              </StyledFooterContainer>
             )}
           </>
         )}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
index ff737334fa..e63be1ea93 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
@@ -75,13 +75,14 @@ const StyledRow = styled.div`
   padding: ${themeCssVariables.spacing['1.5']} 0;
 `;
 
-const StyledColorSample = styled(ColorSample)`
+const StyledColorSampleContainer = styled.span`
   cursor: pointer;
   margin-top: ${themeCssVariables.spacing[1]};
   margin-bottom: ${themeCssVariables.spacing[1]};
-
   margin-right: 14px;
   margin-left: 14px;
+  display: flex;
+  align-items: center;
 `;
 
 const StyledOptionInputContainer = styled.div`
@@ -93,12 +94,16 @@ const StyledOptionInputContainer = styled.div`
   }
 `;
 
-const StyledIconGripVertical = styled(IconGripVertical)`
+const StyledIconGripVerticalContainer = styled.span`
   margin-right: 3px;
+  display: flex;
+  align-items: center;
 `;
 
-const StyledLightIconButton = styled(LightIconButton)`
+const StyledLightIconButtonContainer = styled.span`
   margin-left: ${themeCssVariables.spacing[2]};
+  display: flex;
+  align-items: center;
 `;
 
 export const SettingsDataModelFieldSelectFormOptionRow = ({
@@ -129,14 +134,16 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
 
   return (
     <StyledRow className={className}>
-      <StyledIconGripVertical
-        style={{
-          minWidth: theme.icon.size.md,
-        }}
-        size={theme.icon.size.md}
-        stroke={theme.icon.stroke.sm}
-        color={theme.font.color.extraLight}
-      />
+      <StyledIconGripVerticalContainer>
+        <IconGripVertical
+          style={{
+            minWidth: theme.icon.size.md,
+          }}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+          color={theme.font.color.extraLight}
+        />
+      </StyledIconGripVerticalContainer>
       <AdvancedSettingsWrapper animationDimension="width" hideDot>
         <StyledOptionInputContainer>
           <SettingsTextInput
@@ -156,7 +163,11 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
       <Dropdown
         dropdownId={SELECT_COLOR_DROPDOWN_ID}
         dropdownPlacement="bottom-start"
-        clickableComponent={<StyledColorSample colorName={option.color} />}
+        clickableComponent={
+          <StyledColorSampleContainer>
+            <ColorSample colorName={option.color} />
+          </StyledColorSampleContainer>
+        }
         dropdownComponents={
           <DropdownContent>
             <DropdownMenuItemsContainer>
@@ -203,11 +214,13 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
         dropdownId={SELECT_ACTIONS_DROPDOWN_ID}
         dropdownPlacement="right-start"
         clickableComponent={
-          <StyledLightIconButton
-            accent="tertiary"
-            Icon={IconDotsVertical}
-            disabled={shouldForbidRemoveAsDefault}
-          />
+          <StyledLightIconButtonContainer>
+            <LightIconButton
+              accent="tertiary"
+              Icon={IconDotsVertical}
+              disabled={shouldForbidRemoveAsDefault}
+            />
+          </StyledLightIconButtonContainer>
         }
         dropdownComponents={
           shouldForbidRemoveAsDefault ? null : (
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx
index a62169982e..2f40d9d031 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx
@@ -21,13 +21,17 @@ type SettingsDataModelFieldPreviewWidgetProps = {
   fullWidth?: boolean;
 };
 
-const StyledCard = styled(Card)`
-  border-radius: ${themeCssVariables.border.radius.md};
-  color: ${themeCssVariables.font.color.primary};
+const StyledCardContainer = styled.div`
+  > * {
+    border-radius: ${themeCssVariables.border.radius.md};
+    color: ${themeCssVariables.font.color.primary};
+  }
 `;
 
-const StyledCardContent = styled(CardContent)`
-  padding: ${themeCssVariables.spacing[2]};
+const StyledCardContentContainer = styled.div`
+  > * {
+    padding: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsDataModelFieldPreviewWidget = ({
@@ -43,27 +47,31 @@ export const SettingsDataModelFieldPreviewWidget = ({
   });
 
   return (
-    <StyledCard className={className} fullWidth>
-      <StyledCardContent>
-        <SettingsDataModelObjectPreview
-          objectMetadataItems={[objectMetadataItem]}
-          pluralizeLabel={pluralizeLabel}
-        />
-        <SettingsDataModelFieldPreview
-          objectNameSingular={objectNameSingular}
-          fieldMetadataItem={{
-            label: fieldMetadataItem.label,
-            icon: fieldMetadataItem.icon,
-            defaultValue: fieldMetadataItem.defaultValue,
-            options: fieldMetadataItem.options,
-            settings: fieldMetadataItem.settings,
-            type: fieldMetadataItem.type,
-            name: computeMetadataNameFromLabel(fieldMetadataItem.label),
-          }}
-          shrink={shrink}
-          withFieldLabel={withFieldLabel}
-        />
-      </StyledCardContent>
-    </StyledCard>
+    <StyledCardContainer className={className}>
+      <Card fullWidth>
+        <StyledCardContentContainer>
+          <CardContent>
+            <SettingsDataModelObjectPreview
+              objectMetadataItems={[objectMetadataItem]}
+              pluralizeLabel={pluralizeLabel}
+            />
+            <SettingsDataModelFieldPreview
+              objectNameSingular={objectNameSingular}
+              fieldMetadataItem={{
+                label: fieldMetadataItem.label,
+                icon: fieldMetadataItem.icon,
+                defaultValue: fieldMetadataItem.defaultValue,
+                options: fieldMetadataItem.options,
+                settings: fieldMetadataItem.settings,
+                type: fieldMetadataItem.type,
+                name: computeMetadataNameFromLabel(fieldMetadataItem.label),
+              }}
+              shrink={shrink}
+              withFieldLabel={withFieldLabel}
+            />
+          </CardContent>
+        </StyledCardContentContainer>
+      </Card>
+    </StyledCardContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
index 975d0bf012..080e397621 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
@@ -21,14 +21,19 @@ export type SettingsDataModelRelationFieldPreviewSubWidgetProps = {
   pluralizeLabel?: boolean;
 };
 
-const StyledCard = styled(Card)`
-  border-radius: ${themeCssVariables.border.radius.md};
-  color: ${themeCssVariables.font.color.primary};
+const StyledCardContainer = styled.div`
   margin: auto;
+
+  > * {
+    border-radius: ${themeCssVariables.border.radius.md};
+    color: ${themeCssVariables.font.color.primary};
+  }
 `;
 
-const StyledCardContent = styled(CardContent)`
-  padding: ${themeCssVariables.spacing[2]};
+const StyledCardContentContainer = styled.div`
+  > * {
+    padding: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsDataModelRelationFieldPreviewSubWidget = ({
@@ -49,21 +54,25 @@ export const SettingsDataModelRelationFieldPreviewSubWidget = ({
     .filter(isDefined);
 
   return (
-    <StyledCard className={className} fullWidth>
-      <StyledCardContent>
-        <SettingsDataModelObjectPreview
-          objectMetadataItems={targetObjectMetadataItems}
-          pluralizeLabel={pluralizeLabel}
-        />
-        <SettingsDataModelRelationFieldPreview
-          fieldMetadataItem={fieldMetadataItem}
-          relationTargetObjectNameSingular={
-            fieldPreviewTargetObjectNameSingular
-          }
-          shrink={shrink}
-          withFieldLabel={withFieldLabel}
-        />
-      </StyledCardContent>
-    </StyledCard>
+    <StyledCardContainer className={className}>
+      <Card fullWidth>
+        <StyledCardContentContainer>
+          <CardContent>
+            <SettingsDataModelObjectPreview
+              objectMetadataItems={targetObjectMetadataItems}
+              pluralizeLabel={pluralizeLabel}
+            />
+            <SettingsDataModelRelationFieldPreview
+              fieldMetadataItem={fieldMetadataItem}
+              relationTargetObjectNameSingular={
+                fieldPreviewTargetObjectNameSingular
+              }
+              shrink={shrink}
+              withFieldLabel={withFieldLabel}
+            />
+          </CardContent>
+        </StyledCardContentContainer>
+      </Card>
+    </StyledCardContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
index dbf2289287..1438885400 100644
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
@@ -86,15 +86,17 @@ const StyledObjectInstanceCount = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
 `;
 
-const StyledObjectLink = styled(Link)`
-  align-items: center;
-  display: flex;
-  gap: ${themeCssVariables.spacing[1]};
-  text-decoration: none;
-  color: ${themeCssVariables.font.color.primary};
+const StyledObjectLinkContainer = styled.div`
+  > a {
+    align-items: center;
+    display: flex;
+    gap: ${themeCssVariables.spacing[1]};
+    text-decoration: none;
+    color: ${themeCssVariables.font.color.primary};
 
-  &:hover {
-    color: ${themeCssVariables.font.color.secondary};
+    &:hover {
+      color: ${themeCssVariables.font.color.secondary};
+    }
   }
 `;
 
@@ -123,14 +125,16 @@ export const SettingsDataModelOverviewObject = ({
     <StyledNode>
       <StyledHeader>
         <StyledObjectName onMouseEnter={() => {}} onMouseLeave={() => {}}>
-          <StyledObjectLink
-            to={getSettingsPath(SettingsPath.Objects, {
-              objectNamePlural: objectMetadataItem.namePlural,
-            })}
-          >
-            {Icon && <Icon size={theme.icon.size.md} />}
-            {objectMetadataItem.labelPlural}
-          </StyledObjectLink>
+          <StyledObjectLinkContainer>
+            <Link
+              to={getSettingsPath(SettingsPath.Objects, {
+                objectNamePlural: objectMetadataItem.namePlural,
+              })}
+            >
+              {Icon && <Icon size={theme.icon.size.md} />}
+              {objectMetadataItem.labelPlural}
+            </Link>
+          </StyledObjectLinkContainer>
           <StyledObjectInstanceCount> · {totalCount}</StyledObjectInstanceCount>
         </StyledObjectName>
         <SettingsItemTypeTag item={objectMetadataItem} />
diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
index 1a55235794..d0058cc2b5 100644
--- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
@@ -1,34 +1,21 @@
-import { styled } from '@linaria/react';
-
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Checkbox } from 'twenty-ui/input';
 import { useIcons } from 'twenty-ui/display';
+import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
+export const AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS =
+  '28px 148px 256px 80px';
+
 type SettingsAvailableStandardObjectItemTableRowProps = {
   isSelected?: boolean;
   objectItem: ObjectMetadataItem;
   onClick?: () => void;
 };
 
-export const StyledAvailableStandardObjectTableRow = styled(TableRow)`
-  grid-template-columns: 28px 148px 256px 80px;
-`;
-
-const StyledCheckboxTableCell = styled(TableCell)`
-  justify-content: center;
-  padding: 0;
-  padding-left: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
 const StyledDescription = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -45,22 +32,29 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
   const Icon = getIcon(objectItem.icon);
 
   return (
-    <StyledAvailableStandardObjectTableRow
+    <TableRow
+      gridTemplateColumns={AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS}
       key={objectItem.namePlural}
       isSelected={isSelected}
       onClick={onClick}
     >
-      <StyledCheckboxTableCell>
+      <TableCell
+        align="center"
+        padding={`0 0 0 ${themeCssVariables.spacing[1]}`}
+      >
         <Checkbox checked={!!isSelected} />
-      </StyledCheckboxTableCell>
-      <StyledNameTableCell>
+      </TableCell>
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+      >
         {!!Icon && <Icon size={theme.icon.size.md} />}
         {objectItem.labelPlural}
-      </StyledNameTableCell>
+      </TableCell>
       <TableCell>
         <StyledDescription>{objectItem.description}</StyledDescription>
       </TableCell>
       <TableCell align="right">{objectItem.fields.length}</TableCell>
-    </StyledAvailableStandardObjectTableRow>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
index d435c185c3..a412700b66 100644
--- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
@@ -6,9 +6,10 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS,
   SettingsAvailableStandardObjectItemTableRow,
-  StyledAvailableStandardObjectTableRow,
 } from './SettingsAvailableStandardObjectItemTableRow';
 
 type SettingsAvailableStandardObjectsSectionProps = {
@@ -28,12 +29,14 @@ export const SettingsAvailableStandardObjectsSection = ({
       description={t`Select one or several standard objects to activate below`}
     />
     <Table>
-      <StyledAvailableStandardObjectTableRow>
+      <TableRow
+        gridTemplateColumns={AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS}
+      >
         <TableHeader></TableHeader>
         <TableHeader>{t`Name`}</TableHeader>
         <TableHeader>{t`Description`}</TableHeader>
         <TableHeader align="right">{t`Fields`}</TableHeader>
-      </StyledAvailableStandardObjectTableRow>
+      </TableRow>
       <TableBody>
         {objectItems.map((objectItem) => (
           <SettingsAvailableStandardObjectItemTableRow
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index 66db4cf5cb..ac41dc2cb3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -36,14 +36,8 @@ type SettingsObjectFieldItemTableRowProps = {
   mode: 'view' | 'new-field';
 };
 
-export const StyledObjectFieldTableRow = styled(TableRow)`
-  grid-template-columns: minmax(0, 1fr) 148px 148px 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
+export const OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
+  'minmax(0, 1fr) 148px 148px 36px';
 
 const StyledNameContainer = styled.div`
   display: flex;
@@ -74,13 +68,10 @@ const StyledInactiveLabel = styled.span`
   }
 `;
 
-const StyledIconTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 export const SettingsObjectFieldItemTableRow = ({
@@ -177,11 +168,15 @@ export const SettingsObjectFieldItemTableRow = ({
       : relationObjectMetadataItem?.labelPlural;
 
   return (
-    <StyledObjectFieldTableRow
+    <TableRow
+      gridTemplateColumns={OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
       onClick={mode === 'view' ? navigateToFieldEdit : undefined}
     >
       <UndecoratedLink to={linkToNavigate}>
-        <StyledNameTableCell>
+        <TableCell
+          color={themeCssVariables.font.color.primary}
+          gap={themeCssVariables.spacing[2]}
+        >
           {!!Icon && (
             <Icon
               style={{
@@ -199,7 +194,7 @@ export const SettingsObjectFieldItemTableRow = ({
               <StyledInactiveLabel>{t`Deactivated`}</StyledInactiveLabel>
             )}
           </StyledNameContainer>
-        </StyledNameTableCell>
+        </TableCell>
       </UndecoratedLink>
 
       <TableCell>
@@ -232,14 +227,19 @@ export const SettingsObjectFieldItemTableRow = ({
           }}
         />
       </TableCell>
-      <StyledIconTableCell>
+      <TableCell
+        align="center"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+      >
         {status === 'active' ? (
           mode === 'view' ? (
             <UndecoratedLink to={linkToNavigate}>
-              <StyledIconChevronRight
-                size={theme.icon.size.md}
-                stroke={theme.icon.stroke.sm}
-              />
+              <StyledIconChevronRightContainer>
+                <IconChevronRight
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.sm}
+                />
+              </StyledIconChevronRightContainer>
             </UndecoratedLink>
           ) : (
             canToggleField && (
@@ -273,7 +273,7 @@ export const SettingsObjectFieldItemTableRow = ({
             onClick={handleToggleField}
           />
         )}
-      </StyledIconTableCell>
-    </StyledObjectFieldTableRow>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
index 5d14a976f8..e20a1e7146 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
@@ -5,10 +5,11 @@ import { useLingui } from '@lingui/react/macro';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   StyledActionTableCell,
   StyledNameTableCell,
-  StyledObjectTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { useIcons } from 'twenty-ui/display';
@@ -63,7 +64,11 @@ export const SettingsObjectMetadataItemTableRow = ({
   const Icon = getIcon(objectMetadataItem.icon);
 
   return (
-    <StyledObjectTableRow key={objectMetadataItem.namePlural} to={link}>
+    <TableRow
+      gridTemplateColumns={SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      key={objectMetadataItem.namePlural}
+      to={link}
+    >
       <StyledNameTableCell>
         {!!Icon && (
           <Icon
@@ -95,6 +100,6 @@ export const SettingsObjectMetadataItemTableRow = ({
       </TableCell>
       <TableCell align="right">{totalObjectCount}</TableCell>
       <StyledActionTableCell>{action}</StyledActionTableCell>
-    </StyledObjectTableRow>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.ts b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.ts
deleted file mode 100644
index a5491d4fe2..0000000000
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { styled } from '@linaria/react';
-
-import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-export const SETTINGS_OBJECT_TABLE_COLUMN_WIDTH = '98.7px';
-
-export const StyledObjectTableRow = styled(TableRow)`
-  grid-template-columns: 180px ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} 36px;
-`;
-
-export const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-export const StyledActionTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx
new file mode 100644
index 0000000000..a46d6ba0f7
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx
@@ -0,0 +1,29 @@
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import React from 'react';
+
+export const SETTINGS_OBJECT_TABLE_COLUMN_WIDTH = '98.7px';
+
+export const SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS = `180px ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} 36px`;
+
+export const StyledNameTableCell = (
+  props: React.ComponentProps<typeof TableCell>,
+) => (
+  <TableCell
+    color={themeCssVariables.font.color.primary}
+    gap={themeCssVariables.spacing[2]}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
+);
+
+export const StyledActionTableCell = (
+  props: React.ComponentProps<typeof TableCell>,
+) => (
+  <TableCell
+    align="center"
+    padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
+);
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
index 67a214e630..c892b7af24 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
@@ -25,14 +25,8 @@ type SettingsObjectRelationItemTableRowProps = {
   objectMetadataItem: ObjectMetadataItem;
 };
 
-export const StyledObjectRelationTableRow = styled(TableRow)`
-  grid-template-columns: minmax(0, 1fr) 148px 148px 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
+export const OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
+  'minmax(0, 1fr) 148px 148px 36px';
 
 const StyledNameContainer = styled.div`
   display: flex;
@@ -63,13 +57,10 @@ const StyledInactiveLabel = styled.span`
   }
 `;
 
-const StyledIconTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 const StyledRelationType = styled.div`
@@ -79,18 +70,24 @@ const StyledRelationType = styled.div`
   gap: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledLink = styled(Link)`
-  color: ${themeCssVariables.font.color.primary};
-  text-decoration: underline;
-  text-decoration-color: ${themeCssVariables.border.color.strong};
-  text-underline-offset: 2px;
+const StyledLinkContainer = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:hover {
-    color: ${themeCssVariables.color.blue};
-    text-decoration-color: ${themeCssVariables.color.blue};
+  > a {
+    color: ${themeCssVariables.font.color.primary};
+    text-decoration: underline;
+    text-decoration-color: ${themeCssVariables.border.color.strong};
+    text-underline-offset: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+      color: ${themeCssVariables.color.blue};
+      text-decoration-color: ${themeCssVariables.color.blue};
+    }
   }
 `;
 
@@ -157,9 +154,14 @@ export const SettingsObjectRelationItemTableRow = ({
       : fieldMetadataItem.label;
 
   return (
-    // eslint-disable-next-line twenty/no-navigate-prefer-link
-    <StyledObjectRelationTableRow onClick={navigateToFieldEdit}>
-      <StyledNameTableCell>
+    <TableRow
+      gridTemplateColumns={OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      to={linkToNavigate}
+    >
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+      >
         {!!Icon && (
           <Icon
             style={{
@@ -171,15 +173,17 @@ export const SettingsObjectRelationItemTableRow = ({
         )}
         <StyledNameContainer>
           {isRelatedObjectLinkable ? (
-            <StyledLink
-              to={getSettingsPath(SettingsPath.ObjectDetail, {
-                objectNamePlural: relationObjectMetadataItem.namePlural,
-              })}
-              onClick={(event) => event.stopPropagation()}
-              title={targetObjectLabel}
-            >
-              {targetObjectLabel}
-            </StyledLink>
+            <StyledLinkContainer>
+              <Link
+                to={getSettingsPath(SettingsPath.ObjectDetail, {
+                  objectNamePlural: relationObjectMetadataItem.namePlural,
+                })}
+                onClick={(event) => event.stopPropagation()}
+                title={targetObjectLabel}
+              >
+                {targetObjectLabel}
+              </Link>
+            </StyledLinkContainer>
           ) : (
             <StyledNameLabel title={targetObjectLabel}>
               {targetObjectLabel}
@@ -189,7 +193,7 @@ export const SettingsObjectRelationItemTableRow = ({
             <StyledInactiveLabel>{t`Deactivated`}</StyledInactiveLabel>
           )}
         </StyledNameContainer>
-      </StyledNameTableCell>
+      </TableCell>
 
       <TableCell>
         <SettingsItemTypeTag
@@ -213,13 +217,18 @@ export const SettingsObjectRelationItemTableRow = ({
         </StyledRelationType>
       </TableCell>
 
-      <StyledIconTableCell>
+      <TableCell
+        align="center"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+      >
         {fieldMetadataItem.isActive ? (
           <UndecoratedLink to={linkToNavigate}>
-            <StyledIconChevronRight
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-            />
+            <StyledIconChevronRightContainer>
+              <IconChevronRight
+                size={theme.icon.size.md}
+                stroke={theme.icon.stroke.sm}
+              />
+            </StyledIconChevronRightContainer>
           </UndecoratedLink>
         ) : (
           <SettingsObjectFieldInactiveActionDropdown
@@ -238,7 +247,7 @@ export const SettingsObjectRelationItemTableRow = ({
             }
           />
         )}
-      </StyledIconTableCell>
-    </StyledObjectRelationTableRow>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationsTable.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationsTable.tsx
index 6604712348..df840f0b32 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationsTable.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationsTable.tsx
@@ -27,9 +27,10 @@ import { Button } from 'twenty-ui/input';
 import { MenuItemToggle } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsObjectRelationItemTableRow,
-  StyledObjectRelationTableRow,
 } from './SettingsObjectRelationItemTableRow';
 
 const StyledSearchAndFilterContainer = styled.div`
@@ -39,7 +40,7 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
@@ -118,13 +119,15 @@ export const SettingsObjectRelationsTable = ({
   return (
     <>
       <StyledSearchAndFilterContainer>
-        <StyledSearchInput
-          instanceId="object-relation-table-search"
-          LeftIcon={IconSearch}
-          placeholder={t`Search a field...`}
-          value={searchTerm}
-          onChange={setSearchTerm}
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId="object-relation-table-search"
+            LeftIcon={IconSearch}
+            placeholder={t`Search a field...`}
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+        </StyledSearchInputContainer>
         <Dropdown
           dropdownId="settings-relations-filter-dropdown"
           dropdownPlacement="bottom-end"
@@ -165,7 +168,9 @@ export const SettingsObjectRelationsTable = ({
         />
       </StyledSearchAndFilterContainer>
       <Table>
-        <StyledObjectRelationTableRow>
+        <TableRow
+          gridTemplateColumns={OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+        >
           {tableMetadata.fields.map((item) => (
             <SortableTableHeader
               key={item.fieldName}
@@ -176,7 +181,7 @@ export const SettingsObjectRelationsTable = ({
             />
           ))}
           <TableHeader></TableHeader>
-        </StyledObjectRelationTableRow>
+        </TableRow>
         {filteredRelationFields.map((fieldMetadataItem) => (
           <SettingsObjectRelationItemTableRow
             key={fieldMetadataItem.id}
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
index 6b808c90fe..cff1277718 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
@@ -29,8 +29,10 @@ const StyledContentContainer = styled.div`
   gap: ${themeCssVariables.spacing[8]};
 `;
 
-const StyledFormSection = styled(Section)`
-  padding-left: 0 !important;
+const StyledFormSectionContainer = styled.div`
+  > * {
+    padding-left: 0 !important;
+  }
 `;
 
 const StyledDangerButtonsContainer = styled.div`
@@ -90,16 +92,18 @@ export const ObjectSettings = ({
 
   return (
     <StyledContentContainer>
-      <StyledFormSection>
-        <H2Title
-          title={t`About`}
-          description={t`Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms.`}
-        />
-        <SettingsUpdateDataModelObjectAboutForm
-          objectMetadataItem={objectMetadataItem}
-        />
-      </StyledFormSection>
-      <StyledFormSection>
+      <StyledFormSectionContainer>
+        <Section>
+          <H2Title
+            title={t`About`}
+            description={t`Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms.`}
+          />
+          <SettingsUpdateDataModelObjectAboutForm
+            objectMetadataItem={objectMetadataItem}
+          />
+        </Section>
+      </StyledFormSectionContainer>
+      <StyledFormSectionContainer>
         <Section>
           <H2Title
             title={t`Options`}
@@ -109,9 +113,9 @@ export const ObjectSettings = ({
             objectMetadataItem={objectMetadataItem}
           />
         </Section>
-      </StyledFormSection>
+      </StyledFormSectionContainer>
       {!isReadOnly && (
-        <StyledFormSection>
+        <StyledFormSectionContainer>
           <Section>
             <H2Title
               title={t`Danger zone`}
@@ -136,7 +140,7 @@ export const ObjectSettings = ({
               )}
             </StyledDangerButtonsContainer>
           </Section>
-        </StyledFormSection>
+        </StyledFormSectionContainer>
       )}
       <ConfirmationModal
         modalInstanceId={DELETE_OBJECT_MODAL_ID}
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
index b850934d29..bde1c5d821 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
@@ -6,12 +6,12 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconEye } from 'twenty-ui/display';
 import { FloatingButton } from 'twenty-ui/input';
-import { Card } from 'twenty-ui/layout';
 
 import DarkCoverImage from '@/settings/data-model/assets/cover-dark.png';
 import LightCoverImage from '@/settings/data-model/assets/cover-light.png';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledCoverImageContainer = styled(Card)`
+
+const StyledCoverImageContainer = styled.div`
   align-items: center;
   background-size: cover;
   border-radius: ${themeCssVariables.border.radius.md};
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index 1d86b4d6b2..b60e31a478 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -95,14 +95,16 @@ const StyledBannerText = styled.span`
   flex: 1;
 `;
 
-const StyledConflictButton = styled(Button)`
-  border-color: ${themeCssVariables.color.blue};
-  color: ${themeCssVariables.color.blue};
-  &:hover {
-    background: ${themeCssVariables.accent.secondary};
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
+const StyledConflictButtonContainer = styled.div`
+  > button {
+    border-color: ${themeCssVariables.color.blue};
+    color: ${themeCssVariables.color.blue};
+    &:hover {
+      background: ${themeCssVariables.accent.secondary};
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
+    }
   }
 `;
 
@@ -281,18 +283,20 @@ export const SettingsDataModelObjectAboutForm = ({
                     {t`An object with this name already exists`}
                   </StyledBannerText>
                 </StyledBannerContent>
-                <StyledConflictButton
-                  size="small"
-                  variant="secondary"
-                  accent="blue"
-                  title={t`Open`}
-                  onClick={() =>
-                    navigateSettings(SettingsPath.ObjectDetail, {
-                      objectNamePlural:
-                        conflictingObjectMetadataItem.namePlural,
-                    })
-                  }
-                />
+                <StyledConflictButtonContainer>
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    accent="blue"
+                    title={t`Open`}
+                    onClick={() =>
+                      navigateSettings(SettingsPath.ObjectDetail, {
+                        objectNamePlural:
+                          conflictingObjectMetadataItem.namePlural,
+                      })
+                    }
+                  />
+                </StyledConflictButtonContainer>
               </StyledConflictBanner>
             )}
             {[
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
index de4dd920c3..e2c7eff5c6 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
@@ -15,18 +15,25 @@ type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;
 };
 
-const StyledTopCardContent = styled(CardContent)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
+const StyledTopCardContentContainer = styled.div`
+  > * {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+  }
 `;
 
-const StyledObjectSummaryCard = styled(Card)`
-  border-radius: ${themeCssVariables.border.radius.md};
-  color: ${themeCssVariables.font.color.primary};
+const StyledObjectSummaryCardContainer = styled.div`
   max-width: 480px;
+
+  > * {
+    border-radius: ${themeCssVariables.border.radius.md};
+    color: ${themeCssVariables.font.color.primary};
+  }
 `;
 
-const StyledObjectSummaryCardContent = styled(CardContent)`
-  padding: ${themeCssVariables.spacing[2]};
+const StyledObjectSummaryCardContentContainer = styled.div`
+  > * {
+    padding: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsDataModelObjectSettingsFormCard = ({
@@ -42,26 +49,32 @@ export const SettingsDataModelObjectSettingsFormCard = ({
 
   return (
     <Card fullWidth>
-      <StyledTopCardContent divider>
-        <SettingsDataModelCardTitle>
-          <Trans>Preview</Trans>
-        </SettingsDataModelCardTitle>
-        {labelIdentifierFieldMetadataItem ? (
-          <SettingsDataModelFieldPreviewWidget
-            objectNameSingular={objectMetadataItem.nameSingular}
-            fieldMetadataItem={labelIdentifierFieldMetadataItem}
-            withFieldLabel={false}
-          />
-        ) : (
-          <StyledObjectSummaryCard>
-            <StyledObjectSummaryCardContent>
-              <SettingsDataModelObjectPreview
-                objectMetadataItems={[objectMetadataItem]}
-              />
-            </StyledObjectSummaryCardContent>
-          </StyledObjectSummaryCard>
-        )}
-      </StyledTopCardContent>
+      <StyledTopCardContentContainer>
+        <CardContent divider>
+          <SettingsDataModelCardTitle>
+            <Trans>Preview</Trans>
+          </SettingsDataModelCardTitle>
+          {labelIdentifierFieldMetadataItem ? (
+            <SettingsDataModelFieldPreviewWidget
+              objectNameSingular={objectMetadataItem.nameSingular}
+              fieldMetadataItem={labelIdentifierFieldMetadataItem}
+              withFieldLabel={false}
+            />
+          ) : (
+            <StyledObjectSummaryCardContainer>
+              <Card>
+                <StyledObjectSummaryCardContentContainer>
+                  <CardContent>
+                    <SettingsDataModelObjectPreview
+                      objectMetadataItems={[objectMetadataItem]}
+                    />
+                  </CardContent>
+                </StyledObjectSummaryCardContentContainer>
+              </Card>
+            </StyledObjectSummaryCardContainer>
+          )}
+        </CardContent>
+      </StyledTopCardContentContainer>
       <CardContent>
         <SettingsDataModelObjectIdentifiersForm
           objectMetadataItem={objectMetadataItem}
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
index a0ca69059a..41d580404d 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@@ -1,5 +1,3 @@
-import { styled } from '@linaria/react';
-
 import {
   formatExpiration,
   isExpired,
@@ -7,23 +5,11 @@ import {
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { IconChevronRight } from 'twenty-ui/display';
+import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { type ApiKey } from '~/generated-metadata/graphql';
 
-export const StyledApisFieldTableRow = styled(TableRow)`
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-  }
-`;
-
-const StyledTruncatedCell = styled(TableCell)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-`;
-
 const StyledEllipsisLabel = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -49,24 +35,40 @@ export const SettingsApiKeysFieldItemTableRow = ({
   const gridColumns = '5fr 2fr 3fr 1fr';
 
   return (
-    <StyledApisFieldTableRow gridAutoColumns={gridColumns} to={to}>
-      <StyledTruncatedCell color={theme.font.color.primary}>
+    <TableRow gridAutoColumns={gridColumns} to={to}>
+      <TableCell
+        color={theme.font.color.primary}
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        clickable
+      >
         <StyledEllipsisLabel>{apiKey.name}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
+      </TableCell>
 
-      <StyledTruncatedCell color={theme.font.color.tertiary}>
+      <TableCell
+        color={theme.font.color.tertiary}
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        clickable
+      >
         <StyledEllipsisLabel>{apiKey.role?.label || '-'}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
+      </TableCell>
 
-      <StyledTruncatedCell
+      <TableCell
         color={
           isExpired(apiKey.expiresAt || null)
             ? theme.font.color.danger
             : theme.font.color.tertiary
         }
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        clickable
       >
         <StyledEllipsisLabel>{formattedExpiration}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
+      </TableCell>
 
       <TableCell align="right">
         <IconChevronRight
@@ -74,6 +76,6 @@ export const SettingsApiKeysFieldItemTableRow = ({
           color={theme.font.color.tertiary}
         />
       </TableCell>
-    </StyledApisFieldTableRow>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
index e10b0a18af..8c1c81d76f 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
@@ -10,7 +10,7 @@ import { getSettingsPath } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useGetApiKeysQuery } from '~/generated-metadata/graphql';
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -36,17 +36,19 @@ export const SettingsApiKeysTable = () => {
         <TableHeader></TableHeader>
       </TableRow>
       {!!apiKeys?.length && (
-        <StyledTableBody>
-          {apiKeys.map((apiKey) => (
-            <SettingsApiKeysFieldItemTableRow
-              key={apiKey.id}
-              apiKey={apiKey}
-              to={getSettingsPath(SettingsPath.ApiKeyDetail, {
-                apiKeyId: apiKey.id,
-              })}
-            />
-          ))}
-        </StyledTableBody>
+        <StyledTableBodyContainer>
+          <TableBody>
+            {apiKeys.map((apiKey) => (
+              <SettingsApiKeysFieldItemTableRow
+                key={apiKey.id}
+                apiKey={apiKey}
+                to={getSettingsPath(SettingsPath.ApiKeyDetail, {
+                  apiKeyId: apiKey.id,
+                })}
+              />
+            ))}
+          </TableBody>
+        </StyledTableBodyContainer>
       )}
     </Table>
   );
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
index a6da829f93..ad422f5320 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
@@ -11,23 +11,12 @@ import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Webhook } from '~/generated-metadata/graphql';
 
-export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 28px;
-`;
+const WEBHOOK_TABLE_ROW_GRID_TEMPLATE_COLUMNS = '1fr 28px';
 
-const StyledIconTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${themeCssVariables.spacing[1]};
-  padding-left: 0;
-`;
-
-const StyledUrlTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  overflow: hidden;
-`;
-
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 export const SettingsDevelopersWebhookTableRow = ({
@@ -42,8 +31,11 @@ export const SettingsDevelopersWebhookTableRow = ({
 }) => {
   const { theme } = useContext(ThemeContext);
   return (
-    <StyledApisFieldTableRow to={to}>
-      <StyledUrlTableCell>
+    <TableRow
+      gridTemplateColumns={WEBHOOK_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      to={to}
+    >
+      <TableCell color={themeCssVariables.font.color.primary} overflow="hidden">
         <OverflowingTextWithTooltip
           text={
             isValidUrl(webhook.targetUrl)
@@ -51,13 +43,18 @@ export const SettingsDevelopersWebhookTableRow = ({
               : webhook.targetUrl
           }
         />
-      </StyledUrlTableCell>
-      <StyledIconTableCell>
-        <StyledIconChevronRight
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
-      </StyledIconTableCell>
-    </StyledApisFieldTableRow>
+      </TableCell>
+      <TableCell
+        align="center"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 0`}
+      >
+        <StyledIconChevronRightContainer>
+          <IconChevronRight
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        </StyledIconChevronRightContainer>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
index 6d283fc7d1..b4d01e7856 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
@@ -10,16 +10,12 @@ import { getSettingsPath } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useGetWebhooksQuery } from '~/generated-metadata/graphql';
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
   max-height: 260px;
   overflow-y: auto;
 `;
 
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 444px 68px;
-`;
-
 export const SettingsWebhooksTable = () => {
   const { data: webhooksData } = useGetWebhooksQuery();
 
@@ -27,22 +23,24 @@ export const SettingsWebhooksTable = () => {
 
   return (
     <Table>
-      <StyledTableRow>
+      <TableRow gridTemplateColumns="444px 68px">
         <TableHeader>URL</TableHeader>
         <TableHeader></TableHeader>
-      </StyledTableRow>
+      </TableRow>
       {!!webhooks?.length && (
-        <StyledTableBody>
-          {webhooks.map((webhookFieldItem) => (
-            <SettingsDevelopersWebhookTableRow
-              key={webhookFieldItem.id}
-              webhook={webhookFieldItem}
-              to={getSettingsPath(SettingsPath.WebhookDetail, {
-                webhookId: webhookFieldItem.id,
-              })}
-            />
-          ))}
-        </StyledTableBody>
+        <StyledTableBodyContainer>
+          <TableBody>
+            {webhooks.map((webhookFieldItem) => (
+              <SettingsDevelopersWebhookTableRow
+                key={webhookFieldItem.id}
+                webhook={webhookFieldItem}
+                to={getSettingsPath(SettingsPath.WebhookDetail, {
+                  webhookId: webhookFieldItem.id,
+                })}
+              />
+            ))}
+          </TableBody>
+        </StyledTableBodyContainer>
       )}
     </Table>
   );
diff --git a/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx b/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx
index b2eabb08c2..8b09142d3e 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx
@@ -60,13 +60,15 @@ const StyledControlLabel = styled.span`
   white-space: nowrap;
 `;
 
-const StyledControlIconChevronDown = styled(IconChevronDown)<{
+const StyledControlIconChevronDownContainer = styled.span<{
   disabled?: boolean;
 }>`
+  align-items: center;
   color: ${({ disabled }) =>
     disabled
       ? themeCssVariables.font.color.extraLight
       : themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 type WebhookEntitySelectProps = {
@@ -166,10 +168,9 @@ export const WebhookEntitySelect = ({
       clickableComponent={
         <StyledControlContainer disabled={disabled}>
           <StyledControlLabel>{getSelectedLabel()}</StyledControlLabel>
-          <StyledControlIconChevronDown
-            disabled={disabled}
-            size={theme.icon.size.md}
-          />
+          <StyledControlIconChevronDownContainer disabled={disabled}>
+            <IconChevronDown size={theme.icon.size.md} />
+          </StyledControlIconChevronDownContainer>
         </StyledControlContainer>
       }
       dropdownComponents={
diff --git a/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomain.tsx b/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomain.tsx
index 2a8123043c..831a76808d 100644
--- a/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomain.tsx
+++ b/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomain.tsx
@@ -25,13 +25,13 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
 import { getDomainValidationSchema } from '@/settings/domains/utils/get-domain-validation-schema';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledButtonGroup = styled(ButtonGroup)`
-  & > :not(:first-of-type) > button {
+const StyledButtonGroupContainer = styled.div`
+  > * > :not(:first-of-type) > button {
     border-left: none;
   }
 `;
 
-const StyledButton = styled(Button)`
+const StyledButtonContainer = styled.div`
   align-self: flex-start;
 `;
 
@@ -171,23 +171,29 @@ export const SettingPublicDomain = () => {
               fullWidth
             />
             {isDefined(selectedPublicDomain) && (
-              <StyledButtonGroup>
-                <StyledButton
-                  isLoading={isLoading}
-                  Icon={IconReload}
-                  title={t`Reload`}
-                  variant="primary"
-                  onClick={() =>
-                    checkPublicDomainRecords(selectedPublicDomain.domain)
-                  }
-                  type="button"
-                />
-                <StyledButton
-                  Icon={IconTrash}
-                  variant="primary"
-                  onClick={onDelete}
-                />
-              </StyledButtonGroup>
+              <StyledButtonGroupContainer>
+                <ButtonGroup>
+                  <StyledButtonContainer>
+                    <Button
+                      isLoading={isLoading}
+                      Icon={IconReload}
+                      title={t`Reload`}
+                      variant="primary"
+                      onClick={() =>
+                        checkPublicDomainRecords(selectedPublicDomain.domain)
+                      }
+                      type="button"
+                    />
+                  </StyledButtonContainer>
+                  <StyledButtonContainer>
+                    <Button
+                      Icon={IconTrash}
+                      variant="primary"
+                      onClick={onDelete}
+                    />
+                  </StyledButtonContainer>
+                </ButtonGroup>
+              </StyledButtonGroupContainer>
             )}
           </StyledDomainFormWrapper>
           {isDefined(selectedPublicDomain) && publicDomainRecords?.domain && (
diff --git a/packages/twenty-front/src/modules/settings/domains/components/SettingsCustomDomain.tsx b/packages/twenty-front/src/modules/settings/domains/components/SettingsCustomDomain.tsx
index fd8438021d..e6dcf5cddf 100644
--- a/packages/twenty-front/src/modules/settings/domains/components/SettingsCustomDomain.tsx
+++ b/packages/twenty-front/src/modules/settings/domains/components/SettingsCustomDomain.tsx
@@ -19,13 +19,13 @@ const StyledDomainFormWrapper = styled.div`
   gap: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledButtonGroup = styled(ButtonGroup)`
-  & > :not(:first-of-type) > button {
+const StyledButtonGroupContainer = styled.div`
+  > * > :not(:first-of-type) > button {
     border-left: none;
   }
 `;
 
-const StyledButton = styled(Button)`
+const StyledButtonContainer = styled.div`
   align-self: flex-start;
 `;
 
@@ -80,21 +80,27 @@ export const SettingsCustomDomain = () => {
           )}
         />
         {currentWorkspace?.customDomain && (
-          <StyledButtonGroup>
-            <StyledButton
-              isLoading={isLoading}
-              Icon={IconReload}
-              title={t`Reload`}
-              variant="primary"
-              onClick={checkCustomDomainRecords}
-              type="button"
-            />
-            <StyledButton
-              Icon={IconTrash}
-              variant="primary"
-              onClick={deleteCustomDomain}
-            />
-          </StyledButtonGroup>
+          <StyledButtonGroupContainer>
+            <ButtonGroup>
+              <StyledButtonContainer>
+                <Button
+                  isLoading={isLoading}
+                  Icon={IconReload}
+                  title={t`Reload`}
+                  variant="primary"
+                  onClick={checkCustomDomainRecords}
+                  type="button"
+                />
+              </StyledButtonContainer>
+              <StyledButtonContainer>
+                <Button
+                  Icon={IconTrash}
+                  variant="primary"
+                  onClick={deleteCustomDomain}
+                />
+              </StyledButtonContainer>
+            </ButtonGroup>
+          </StyledButtonGroupContainer>
         )}
       </StyledDomainFormWrapper>
       {currentWorkspace?.customDomain && (
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx
index fbe210407c..eb195789aa 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx
@@ -6,23 +6,10 @@ import { StyledTableRow } from '@/settings/logic-functions/components/SettingsLo
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledRuntimeTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.secondary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledIconTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 export const SettingsLogicFunctionsFieldItemTableRow = ({
@@ -35,15 +22,33 @@ export const SettingsLogicFunctionsFieldItemTableRow = ({
   const { theme } = useContext(ThemeContext);
   return (
     <StyledTableRow to={to}>
-      <StyledNameTableCell>{logicFunction.name}</StyledNameTableCell>
-      <StyledNameTableCell></StyledNameTableCell>
-      <StyledRuntimeTableCell>{logicFunction.runtime}</StyledRuntimeTableCell>
-      <StyledIconTableCell>
-        <StyledIconChevronRight
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
-      </StyledIconTableCell>
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+      >
+        {logicFunction.name}
+      </TableCell>
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+      ></TableCell>
+      <TableCell
+        color={themeCssVariables.font.color.secondary}
+        gap={themeCssVariables.spacing[2]}
+      >
+        {logicFunction.runtime}
+      </TableCell>
+      <TableCell
+        align="center"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+      >
+        <StyledIconChevronRightContainer>
+          <IconChevronRight
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        </StyledIconChevronRightContainer>
+      </TableCell>
     </StyledTableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx
index 8136454693..3f3ab1a2b1 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx
@@ -8,14 +8,21 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { useLingui } from '@lingui/react/macro';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-export const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 164px 1fr 96px 32px;
-`;
+export const StyledTableRow = (
+  props: React.ComponentProps<typeof TableRow>,
+) => (
+  <TableRow
+    gridTemplateColumns="164px 1fr 96px 32px"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
+);
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -40,18 +47,20 @@ export const SettingsLogicFunctionsTable = ({
         <TableHeader>{t`Runtime`}</TableHeader>
         <TableHeader></TableHeader>
       </StyledTableRow>
-      <StyledTableBody>
-        {logicFunctions.map((logicFunction: LogicFunction) => (
-          <SettingsLogicFunctionsFieldItemTableRow
-            key={logicFunction.id}
-            logicFunction={logicFunction}
-            to={getSettingsPath(SettingsPath.ApplicationLogicFunctionDetail, {
-              applicationId,
-              logicFunctionId: logicFunction.id,
-            })}
-          />
-        ))}
-      </StyledTableBody>
+      <StyledTableBodyContainer>
+        <TableBody>
+          {logicFunctions.map((logicFunction: LogicFunction) => (
+            <SettingsLogicFunctionsFieldItemTableRow
+              key={logicFunction.id}
+              logicFunction={logicFunction}
+              to={getSettingsPath(SettingsPath.ApplicationLogicFunctionDetail, {
+                applicationId,
+                logicFunctionId: logicFunction.id,
+              })}
+            />
+          ))}
+        </TableBody>
+      </StyledTableBodyContainer>
     </Table>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx
index 9eaef9f5a0..9e1c7e12bf 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx
@@ -12,8 +12,10 @@ import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
 import { Button, CoreEditorHeader } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 
-const StyledTabList = styled(TabList)`
-  border-bottom: none;
+const StyledTabListContainer = styled.div`
+  > * {
+    border-bottom: none;
+  }
 `;
 
 export const SettingsLogicFunctionCodeEditorTab = ({
@@ -44,12 +46,14 @@ export const SettingsLogicFunctionCodeEditorTab = ({
   );
 
   const HeaderTabList = (
-    <StyledTabList
-      tabs={files.map((file) => {
-        return { id: file.path, title: file.path.split('/').at(-1) || '' };
-      })}
-      componentInstanceId={SETTINGS_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID}
-    />
+    <StyledTabListContainer>
+      <TabList
+        tabs={files.map((file) => {
+          return { id: file.path, title: file.path.split('/').at(-1) || '' };
+        })}
+        componentInstanceId={SETTINGS_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID}
+      />
+    </StyledTabListContainer>
   );
 
   return (
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTabEnvironmentVariableTableRow.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTabEnvironmentVariableTableRow.tsx
index f3a4f90327..5c419c5283 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTabEnvironmentVariableTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTabEnvironmentVariableTableRow.tsx
@@ -5,9 +5,8 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   IconCheck,
   IconDotsVertical,
@@ -20,13 +19,23 @@ import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import type { ApplicationVariable } from '~/generated-metadata/graphql';
 
-const StyledEditModeTableRow = styled(TableRow)`
-  grid-template-columns: 180px auto 56px;
-`;
+const StyledEditModeTableRow = (
+  props: React.ComponentProps<typeof TableRow>,
+) => (
+  <TableRow
+    gridTemplateColumns="180px auto 56px"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
+);
 
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 180px 300px 32px;
-`;
+const StyledTableRow = (props: React.ComponentProps<typeof TableRow>) => (
+  <TableRow
+    gridTemplateColumns="180px 300px 32px"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
+);
 
 export const SettingsLogicFunctionTabEnvironmentVariableTableRow = ({
   envVariable,
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTriggersTab.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTriggersTab.tsx
index ca1c2f5905..282cda223f 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTriggersTab.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTriggersTab.tsx
@@ -14,18 +14,9 @@ import { Tag } from 'twenty-ui/components';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-export const StyledRouteTriggerTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 120px 120px;
-`;
+const ROUTE_TRIGGER_GRID_TEMPLATE_COLUMNS = '1fr 120px 120px';
 
-const StyledTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-  overflow: hidden;
-`;
-
-const StyledRouteTriggerTableHeaderRow = styled(StyledRouteTriggerTableRow)`
+const StyledRouteTriggerTableHeaderRowWrapper = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
@@ -119,26 +110,44 @@ export const SettingsLogicFunctionTriggersTab = ({
             description={t`Triggers the function with Http request`}
           />
           <Table>
-            <StyledRouteTriggerTableHeaderRow>
-              <TableHeader>{t`Path`}</TableHeader>
-              <TableHeader>{t`Method`}</TableHeader>
-              <TableHeader>{t`Auth Required`}</TableHeader>
-            </StyledRouteTriggerTableHeaderRow>
-            <StyledRouteTriggerTableRow>
-              <StyledTableCell>
+            <StyledRouteTriggerTableHeaderRowWrapper>
+              <TableRow
+                gridTemplateColumns={ROUTE_TRIGGER_GRID_TEMPLATE_COLUMNS}
+              >
+                <TableHeader>{t`Path`}</TableHeader>
+                <TableHeader>{t`Method`}</TableHeader>
+                <TableHeader>{t`Auth Required`}</TableHeader>
+              </TableRow>
+            </StyledRouteTriggerTableHeaderRowWrapper>
+            <TableRow gridTemplateColumns={ROUTE_TRIGGER_GRID_TEMPLATE_COLUMNS}>
+              <TableCell
+                color={themeCssVariables.font.color.tertiary}
+                gap={themeCssVariables.spacing[2]}
+                overflow="hidden"
+              >
                 <OverflowingTextWithTooltip
                   text={`${REACT_APP_SERVER_BASE_URL}/s${routeTrigger.path}`}
                 />
-              </StyledTableCell>
-              <StyledTableCell>{routeTrigger.httpMethod}</StyledTableCell>
-              <StyledTableCell>
+              </TableCell>
+              <TableCell
+                color={themeCssVariables.font.color.tertiary}
+                gap={themeCssVariables.spacing[2]}
+                overflow="hidden"
+              >
+                {routeTrigger.httpMethod}
+              </TableCell>
+              <TableCell
+                color={themeCssVariables.font.color.tertiary}
+                gap={themeCssVariables.spacing[2]}
+                overflow="hidden"
+              >
                 <Tag
                   text={routeTrigger.isAuthRequired ? t`True` : t`False`}
                   color={routeTrigger.isAuthRequired ? 'green' : 'orange'}
                   weight="medium"
                 />
-              </StyledTableCell>
-            </StyledRouteTriggerTableRow>
+              </TableCell>
+            </TableRow>
           </Table>
         </Section>
       )}
diff --git a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx
index f15c3153b0..45b7b6d2dc 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx
@@ -3,9 +3,9 @@ import { type ReactNode, useContext } from 'react';
 
 import DarkCoverImage from '@/settings/playground/assets/cover-dark.png';
 import LightCoverImage from '@/settings/playground/assets/cover-light.png';
-import { Card } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledCard = styled(Card)`
+
+const StyledCoverContainer = styled.div`
   align-items: center;
   background-size: cover;
   border-radius: ${themeCssVariables.border.radius.md};
@@ -34,11 +34,11 @@ export const StyledSettingsApiPlaygroundCoverImage = ({
       ? LightCoverImage.toString()
       : DarkCoverImage.toString();
   return (
-    <StyledCard
+    <StyledCoverContainer
       className={className}
       style={{ backgroundImage: `url('${coverImage}')` }}
     >
       {children}
-    </StyledCard>
+    </StyledCoverContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
index c9aa6bcecb..b8343d09c6 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
@@ -31,7 +31,7 @@ const StyledActionWrapper = styled.div`
   }
 `;
 
-const StyledActionButton = styled(Button)`
+const StyledActionButtonContainer = styled.div`
   height: 100%;
   display: inline-flex;
   align-items: center;
@@ -96,34 +96,40 @@ export const EmailField = () => {
         />
         {isEditing ? (
           <StyledActionWrapper key="editing">
-            <StyledActionButton
-              Icon={IconCheck}
-              variant="secondary"
-              position="left"
-              size="small"
-              onClick={handleSave}
-              disabled={isSaveDisabled}
-              type="button"
-            />
-            <StyledActionButton
-              Icon={IconX}
-              variant="secondary"
-              position="right"
-              size="small"
-              onClick={handleCancelEditing}
-              type="button"
-            />
+            <StyledActionButtonContainer>
+              <Button
+                Icon={IconCheck}
+                variant="secondary"
+                position="left"
+                size="small"
+                onClick={handleSave}
+                disabled={isSaveDisabled}
+                type="button"
+              />
+            </StyledActionButtonContainer>
+            <StyledActionButtonContainer>
+              <Button
+                Icon={IconX}
+                variant="secondary"
+                position="right"
+                size="small"
+                onClick={handleCancelEditing}
+                type="button"
+              />
+            </StyledActionButtonContainer>
           </StyledActionWrapper>
         ) : (
           <StyledActionWrapper key="view">
-            <StyledActionButton
-              Icon={IconPencil}
-              variant="secondary"
-              size="small"
-              onClick={handleStartEditing}
-              disabled={!canEdit}
-              type="button"
-            />
+            <StyledActionButtonContainer>
+              <Button
+                Icon={IconPencil}
+                variant="secondary"
+                size="small"
+                onClick={handleStartEditing}
+                disabled={!canEdit}
+                type="button"
+              />
+            </StyledActionButtonContainer>
           </StyledActionWrapper>
         )}
       </StyledFieldRow>
diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx
index bfe66f0227..87f8364a1c 100644
--- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx
@@ -27,12 +27,14 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { sortByAscString } from '~/utils/array/sortByAscString';
 
-const StyledCreateRoleSection = styled(Section)`
-  border-top: 1px solid ${themeCssVariables.border.color.light};
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${themeCssVariables.spacing[2]};
-  padding-bottom: ${themeCssVariables.spacing[2]};
+const StyledCreateRoleSectionContainer = styled.div`
+  > * {
+    border-top: 1px solid ${themeCssVariables.border.color.light};
+    display: flex;
+    justify-content: flex-end;
+    padding-top: ${themeCssVariables.spacing[2]};
+    padding-bottom: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 const StyledTableRows = styled.div`
@@ -40,10 +42,6 @@ const StyledTableRows = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledNoRoles = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
 const StyledSearchAndFilterContainer = styled.div`
   display: flex;
   gap: ${themeCssVariables.spacing[2]};
@@ -51,7 +49,7 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
@@ -88,13 +86,15 @@ export const SettingsRolesList = () => {
       />
 
       <StyledSearchAndFilterContainer>
-        <StyledSearchInput
-          instanceId="settings-roles-search"
-          LeftIcon={IconSearch}
-          placeholder={t`Search a role...`}
-          value={searchTerm}
-          onChange={setSearchTerm}
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId="settings-roles-search"
+            LeftIcon={IconSearch}
+            placeholder={t`Search a role...`}
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+        </StyledSearchInputContainer>
         <Dropdown
           dropdownId="settings-roles-filter-dropdown"
           dropdownPlacement="bottom-end"
@@ -135,7 +135,9 @@ export const SettingsRolesList = () => {
         <SettingsRolesTableHeader />
         <StyledTableRows>
           {filteredRoles.length === 0 ? (
-            <StyledNoRoles>{t`No roles found`}</StyledNoRoles>
+            <TableCell color={themeCssVariables.font.color.tertiary}>
+              {t`No roles found`}
+            </TableCell>
           ) : (
             filteredRoles.map((role) => (
               <SettingsRolesTableRow key={role.id} role={role} />
@@ -143,15 +145,17 @@ export const SettingsRolesList = () => {
           )}
         </StyledTableRows>
       </Table>
-      <StyledCreateRoleSection>
-        <Button
-          Icon={IconPlus}
-          title={t`Create Role`}
-          variant="secondary"
-          size="small"
-          onClick={() => navigateSettings(SettingsPath.RoleCreate)}
-        />
-      </StyledCreateRoleSection>
+      <StyledCreateRoleSectionContainer>
+        <Section>
+          <Button
+            Icon={IconPlus}
+            title={t`Create Role`}
+            variant="secondary"
+            size="small"
+            onClick={() => navigateSettings(SettingsPath.RoleCreate)}
+          />
+        </Section>
+      </StyledCreateRoleSectionContainer>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx
index bdfa7448b1..2263cb3b96 100644
--- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx
@@ -48,10 +48,12 @@ const StyledIconLockContainer = styled.div`
   justify-content: flex-end;
 `;
 
-const StyledTableRow = styled(TableRow)`
-  &:hover {
-    background: ${themeCssVariables.background.transparent.light};
-    cursor: pointer;
+const StyledTableRowContainer = styled.div`
+  > * {
+    &:hover {
+      background: ${themeCssVariables.background.transparent.light};
+      cursor: pointer;
+    }
   }
 `;
 
@@ -77,57 +79,61 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
     .filter(isDefined);
 
   return (
-    <StyledTableRow
-      key={role.id}
-      gridAutoColumns="332px 3fr 2fr 1fr"
-      to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })}
-    >
-      <TableCell>
-        <StyledNameCell>
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
-          {role.label}
-          {!role.isEditable && (
-            <StyledIconLockContainer>
-              <IconLock
-                color={theme.font.color.light}
-                stroke={theme.icon.stroke.sm}
-                size={theme.icon.size.sm}
-              />
-            </StyledIconLockContainer>
-          )}
-        </StyledNameCell>
-      </TableCell>
-      <TableCell align="right">
-        <StyledAvatarGroup>
-          {enrichedWorkspaceMembers.slice(0, 5).map((workspaceMember) => (
-            <React.Fragment key={workspaceMember.id}>
-              <div id={`avatar-${workspaceMember.id}`}>
-                <Avatar
-                  avatarUrl={workspaceMember.avatarUrl}
-                  placeholderColorSeed={workspaceMember.id}
-                  placeholder={workspaceMember.name.firstName ?? ''}
-                  type="rounded"
-                  size="md"
+    <StyledTableRowContainer>
+      <TableRow
+        key={role.id}
+        gridAutoColumns="332px 3fr 2fr 1fr"
+        to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })}
+      >
+        <TableCell>
+          <StyledNameCell>
+            <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+            {role.label}
+            {!role.isEditable && (
+              <StyledIconLockContainer>
+                <IconLock
+                  color={theme.font.color.light}
+                  stroke={theme.icon.stroke.sm}
+                  size={theme.icon.size.sm}
                 />
-              </div>
-              <AppTooltip
-                anchorSelect={`#avatar-${workspaceMember.id}`}
-                content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
-                noArrow
-                place="top"
-                positionStrategy="fixed"
-                delay={TooltipDelay.shortDelay}
-              />
-            </React.Fragment>
-          ))}
-        </StyledAvatarGroup>
-      </TableCell>
-      <TableCell align="left">
-        <StyledAssignedText>{role.workspaceMembers.length}</StyledAssignedText>
-      </TableCell>
-      <TableCell align="right" color={theme.font.color.tertiary}>
-        <IconChevronRight size={theme.icon.size.md} />
-      </TableCell>
-    </StyledTableRow>
+              </StyledIconLockContainer>
+            )}
+          </StyledNameCell>
+        </TableCell>
+        <TableCell align="right">
+          <StyledAvatarGroup>
+            {enrichedWorkspaceMembers.slice(0, 5).map((workspaceMember) => (
+              <React.Fragment key={workspaceMember.id}>
+                <div id={`avatar-${workspaceMember.id}`}>
+                  <Avatar
+                    avatarUrl={workspaceMember.avatarUrl}
+                    placeholderColorSeed={workspaceMember.id}
+                    placeholder={workspaceMember.name.firstName ?? ''}
+                    type="rounded"
+                    size="md"
+                  />
+                </div>
+                <AppTooltip
+                  anchorSelect={`#avatar-${workspaceMember.id}`}
+                  content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
+                  noArrow
+                  place="top"
+                  positionStrategy="fixed"
+                  delay={TooltipDelay.shortDelay}
+                />
+              </React.Fragment>
+            ))}
+          </StyledAvatarGroup>
+        </TableCell>
+        <TableCell align="left">
+          <StyledAssignedText>
+            {role.workspaceMembers.length}
+          </StyledAssignedText>
+        </TableCell>
+        <TableCell align="right" color={theme.font.color.tertiary}>
+          <IconChevronRight size={theme.icon.size.md} />
+        </TableCell>
+      </TableRow>
+    </StyledTableRowContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTable.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTable.tsx
index 9f99d69074..e797692b7a 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTable.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTable.tsx
@@ -27,16 +27,12 @@ const StyledTableRows = styled.div`
   padding-block: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledEmptyState = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
 const StyledSearchContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
-  input {
+const StyledSearchInputContainer = styled.div`
+  > * input {
     background: ${themeCssVariables.background.transparent.lighter};
     border: 1px solid ${themeCssVariables.border.color.medium};
   }
@@ -148,15 +144,17 @@ export const SettingsRoleAssignmentTable = <T extends RoleTargetType>({
         description={t`This role is assigned to these ${roleTargetDisplayName}.`}
       />
       <StyledSearchContainer>
-        <StyledSearchInput
-          instanceId={`role-assignment-${roleTargetType}-search`}
-          value={searchFilter}
-          onChange={handleSearchChange}
-          placeholder={t`Search an assigned ${roleTargetDisplayName}...`}
-          fullWidth
-          LeftIcon={IconSearch}
-          sizeVariant="lg"
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId={`role-assignment-${roleTargetType}-search`}
+            value={searchFilter}
+            onChange={handleSearchChange}
+            placeholder={t`Search an assigned ${roleTargetDisplayName}...`}
+            fullWidth
+            LeftIcon={IconSearch}
+            sizeVariant="lg"
+          />
+        </StyledSearchInputContainer>
       </StyledSearchContainer>
       <StyledTable>
         <TableRow gridAutoColumns="2fr 4fr">
@@ -173,9 +171,9 @@ export const SettingsRoleAssignmentTable = <T extends RoleTargetType>({
           ))}
 
           {filteredRoleTargets.length === 0 && (
-            <StyledEmptyState>
+            <TableCell color={themeCssVariables.font.color.tertiary}>
               {tableConfig[roleTargetType].emptyStateText}
-            </StyledEmptyState>
+            </TableCell>
           )}
         </StyledTableRows>
       </StyledTable>
diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx
index 92de3c47b6..15caefc5c6 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx
@@ -38,10 +38,6 @@ const StyledNameContainer = styled.div`
   width: 100%;
 `;
 
-const StyledTableCell = styled(TableCell)`
-  overflow: hidden;
-`;
-
 export type RoleTarget =
   | { type: 'member'; data: PartialWorkspaceMember }
   | { type: 'agent'; data: Agent }
@@ -119,17 +115,17 @@ export const SettingsRoleAssignmentTableRow = ({
 
   return (
     <TableRow gridAutoColumns="2fr 4fr">
-      <StyledTableCell>
+      <TableCell overflow="hidden">
         <StyledNameContainer>
           <StyledIconWrapper>{renderIcon()}</StyledIconWrapper>
           <StyledNameCell>
             <OverflowingTextWithTooltip text={renderName()} />
           </StyledNameCell>
         </StyledNameContainer>
-      </StyledTableCell>
-      <StyledTableCell>
+      </TableCell>
+      <TableCell overflow="hidden">
         <OverflowingTextWithTooltip text={renderSecondaryInfo()} />
-      </StyledTableCell>
+      </TableCell>
     </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
index 6b7821f9e2..44f0fc1b8d 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
@@ -39,8 +39,8 @@ const StyledSearchContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
-  input {
+const StyledSearchInputContainer = styled.div`
+  > * input {
     background: ${themeCssVariables.background.transparent.lighter};
     border: 1px solid ${themeCssVariables.border.color.medium};
   }
@@ -104,15 +104,17 @@ export const SettingsRolePermissionsObjectLevelObjectPicker = ({
     <StyledTypeSelectContainer>
       <Section>
         <StyledSearchContainer>
-          <StyledSearchInput
-            instanceId="role-permissions-object-search"
-            value={searchFilter}
-            onChange={handleSearchChange}
-            placeholder={t`Search an object`}
-            fullWidth
-            LeftIcon={IconSearch}
-            sizeVariant="lg"
-          />
+          <StyledSearchInputContainer>
+            <SettingsTextInput
+              instanceId="role-permissions-object-search"
+              value={searchFilter}
+              onChange={handleSearchChange}
+              placeholder={t`Search an object`}
+              fullWidth
+              LeftIcon={IconSearch}
+              sizeVariant="lg"
+            />
+          </StyledSearchInputContainer>
         </StyledSearchContainer>
       </Section>
 
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx
index 71391fbb13..436eaac690 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx
@@ -18,12 +18,14 @@ import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
-const StyledCreateObjectOverrideSection = styled(Section)`
-  border-top: 1px solid ${themeCssVariables.border.color.light};
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${themeCssVariables.spacing[2]};
-  padding-bottom: ${themeCssVariables.spacing[2]};
+const StyledCreateObjectOverrideSectionContainer = styled.div`
+  > * {
+    border-top: 1px solid ${themeCssVariables.border.color.light};
+    display: flex;
+    justify-content: flex-end;
+    padding-top: ${themeCssVariables.spacing[2]};
+    padding-bottom: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 const StyledTableRows = styled.div`
@@ -38,10 +40,6 @@ type SettingsRolePermissionsObjectLevelSectionProps = {
   objectMetadataItemsFromMarketplaceApp?: ObjectMetadataItem[];
 };
 
-const StyledNoOverride = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
 export const SettingsRolePermissionsObjectLevelSection = ({
   roleId,
   fromAgentId,
@@ -130,25 +128,27 @@ export const SettingsRolePermissionsObjectLevelSection = ({
               ),
             )
           ) : (
-            <StyledNoOverride>
+            <TableCell color={themeCssVariables.font.color.tertiary}>
               {t`No permissions have been set for individual objects.`}
-            </StyledNoOverride>
+            </TableCell>
           )}
         </StyledTableRows>
       </Table>
       {isEditable && (
-        <StyledCreateObjectOverrideSection>
-          <Button
-            Icon={IconPlus}
-            title={t`Add rule`}
-            variant="secondary"
-            size="small"
-            disabled={
-              !settingsDraftRole.isEditable || allObjectsHaveSetPermission
-            }
-            onClick={handleAddRule}
-          />
-        </StyledCreateObjectOverrideSection>
+        <StyledCreateObjectOverrideSectionContainer>
+          <Section>
+            <Button
+              Icon={IconPlus}
+              title={t`Add rule`}
+              variant="secondary"
+              size="small"
+              disabled={
+                !settingsDraftRole.isEditable || allObjectsHaveSetPermission
+              }
+              onClick={handleAddRule}
+            />
+          </Section>
+        </StyledCreateObjectOverrideSectionContainer>
       )}
     </Section>
   );
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx
index d96f79fd04..784b733de5 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx
@@ -13,22 +13,12 @@ import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[1]};
-`;
-
 const StyledNameLabel = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 `;
 
-const StyledOptionsTableCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
 type SettingsRolePermissionsObjectLevelTableRowProps = {
   objectMetadataItem: ObjectMetadataItem;
   roleId: string;
@@ -62,7 +52,10 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
       to={isEditable ? navigationUrl : undefined}
       gridAutoColumns={OBJECT_LEVEL_PERMISSION_TABLE_GRID_AUTO_COLUMNS}
     >
-      <StyledNameTableCell>
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[1]}
+      >
         {!!Icon && (
           <Icon
             style={{
@@ -75,7 +68,7 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
         <StyledNameLabel title={objectLabelPlural}>
           <OverflowingTextWithTooltip text={objectLabelPlural} />
         </StyledNameLabel>
-      </StyledNameTableCell>
+      </TableCell>
       <TableCell>
         <SettingsRolePermissionsObjectLevelOverrideCellContainer
           objectMetadataItem={objectMetadataItem}
@@ -96,14 +89,17 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
         />
       </TableCell>
       <TableCell></TableCell>
-      <StyledOptionsTableCell>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+      >
         <SettingsRolePermissionsObjectLevelTableRowOptionsDropdown
           roleId={roleId}
           objectMetadataId={objectMetadataItem.id}
           objectPermissionDetailUrl={navigationUrl}
           isEditable={isEditable}
         />
-      </StyledOptionsTableCell>
+      </TableCell>
     </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
index 13f4d00355..c296f81fa1 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
@@ -1,9 +1,10 @@
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { filterUserFacingFieldMetadataItems } from '@/object-metadata/utils/filterUserFacingFieldMetadataItems';
 import { SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow,
-  StyledObjectFieldTableRow,
 } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow';
 import { useObjectPermissionDerivedStates } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/hooks/useObjectPermissionDerivedStates';
 import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
@@ -28,7 +29,7 @@ import { turnOrderByIntoSort } from '~/utils/turnOrderByIntoSort';
 export const SETTINGS_ROLE_PERMISSION_OBJECT_LEVEL_FIELD_PERMISSION_TABLE_ID =
   'settings-role-permissions-object-level-object-field-permission';
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
   width: 100%;
 `;
@@ -99,15 +100,19 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTable = ({
         title={t`Fields Permissions`}
         description={t`Ability to interact with this object's fields.`}
       />
-      <StyledSearchInput
-        instanceId="object-field-table-search"
-        LeftIcon={IconSearch}
-        placeholder={t`Search a field...`}
-        value={searchTerm}
-        onChange={setSearchTerm}
-      />
+      <StyledSearchInputContainer>
+        <SettingsTextInput
+          instanceId="object-field-table-search"
+          LeftIcon={IconSearch}
+          placeholder={t`Search a field...`}
+          value={searchTerm}
+          onChange={setSearchTerm}
+        />
+      </StyledSearchInputContainer>
       <Table>
-        <StyledObjectFieldTableRow>
+        <TableRow
+          gridTemplateColumns={FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+        >
           <SortableTableHeader
             fieldName="label"
             label={t`Name`}
@@ -132,7 +137,7 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTable = ({
               </TableHeader>
             )}
           </>
-        </StyledObjectFieldTableRow>
+        </TableRow>
         <SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow
           roleId={roleId}
           objectMetadataItem={objectMetadataItem}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
index c5a9253b8a..343e721e35 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
@@ -20,14 +20,8 @@ import {
   RelationType,
 } from '~/generated-metadata/graphql';
 
-export const StyledObjectFieldTableRow = styled(TableRow)`
-  grid-template-columns: 180px minmax(0, 1fr) 60px 60px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
+export const FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
+  '180px minmax(0, 1fr) 60px 60px';
 
 const StyledNameLabel = styled.div`
   white-space: nowrap;
@@ -156,8 +150,13 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
     const shouldShowEmptyTableHeader = cannotAllowFieldUpdateRestrict;
 
     return (
-      <StyledObjectFieldTableRow>
-        <StyledNameTableCell>
+      <TableRow
+        gridTemplateColumns={FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      >
+        <TableCell
+          color={themeCssVariables.font.color.primary}
+          gap={themeCssVariables.spacing[2]}
+        >
           {!!Icon && (
             <Icon
               style={{
@@ -170,7 +169,7 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
           <StyledNameLabel title={fieldMetadataItem.label}>
             {fieldMetadataItem.label}
           </StyledNameLabel>
-        </StyledNameTableCell>
+        </TableCell>
         <TableCell>
           <SettingsObjectFieldDataType
             Icon={RelationIcon}
@@ -212,6 +211,6 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
             </TableCell>
           )}
         </>
-      </StyledObjectFieldTableRow>
+      </TableRow>
     );
   };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
index 20ce9fb650..823df6387c 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
@@ -15,20 +15,6 @@ import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ObjectPermission, type Role } from '~/generated-metadata/graphql';
 
-const StyledTableRow = styled(TableRow)<{ isDisabled: boolean }>`
-  align-items: center;
-  display: flex;
-  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
-`;
-
-const StyledPermissionCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: ${themeCssVariables.spacing[1]};
-  padding-left: ${themeCssVariables.spacing[2]};
-`;
-
 const StyledPermissionContent = styled.div`
   align-items: center;
   display: flex;
@@ -46,13 +32,6 @@ const StyledOverrideInfo = styled.div`
   gap: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledCheckboxCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
 type OverridableCheckboxType = 'no_cta' | 'default' | 'override';
 
 type SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRowProps = {
@@ -146,8 +125,11 @@ export const SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow =
     );
 
     return (
-      <StyledTableRow onClick={handleCheckboxChange} isDisabled={!isEditable}>
-        <StyledPermissionCell>
+      <TableRow
+        onClick={handleCheckboxChange}
+        cursor={!isEditable ? 'default' : 'pointer'}
+      >
+        <TableCell gap={themeCssVariables.spacing[1]}>
           <StyledPermissionContent>
             <PermissionIcon
               permission={permission.key as SettingsRoleObjectPermissionKey}
@@ -173,15 +155,19 @@ export const SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow =
               </>
             ) : null}
           </StyledOverrideInfo>
-        </StyledPermissionCell>
-        <StyledCheckboxCell onClick={(e) => e.stopPropagation()}>
+        </TableCell>
+        <TableCell
+          align="right"
+          padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+          onClick={(e) => e.stopPropagation()}
+        >
           <OverridableCheckbox
             onChange={handleCheckboxChange}
             disabled={!isEditable}
             type={checkboxType}
             checked={isChecked}
           />
-        </StyledCheckboxCell>
-      </StyledTableRow>
+        </TableCell>
+      </TableRow>
     );
   };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelSection.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelSection.tsx
index 8c52db4bfd..258dacaf88 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelSection.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelSection.tsx
@@ -2,7 +2,6 @@
 
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { Pill } from 'twenty-ui/components';
 import { H2Title, IconArrowUp, IconLock } from 'twenty-ui/display';
 import { Card, Section } from 'twenty-ui/layout';
 
@@ -21,17 +20,20 @@ const StyledContent = styled.div`
   padding-top: ${themeCssVariables.spacing[4]};
 `;
 
-const StyledCard = styled(Card)`
+const StyledCardContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[4]};
   overflow: hidden;
 `;
 
-const StyledPill = styled(Pill)`
-  border-radius: 40px;
-  border: 1px solid ${themeCssVariables.border.color.light};
+const StyledPillContainer = styled.span`
+  align-items: center;
   background: ${themeCssVariables.background.secondary};
+  border: 1px solid ${themeCssVariables.border.color.light};
+  border-radius: 40px;
   color: ${themeCssVariables.font.color.tertiary};
+  display: inline-flex;
   font-weight: ${themeCssVariables.font.weight.medium};
+  gap: ${themeCssVariables.spacing[1]};
   padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
 `;
 
@@ -56,27 +58,34 @@ export const SettingsRolePermissionsObjectLevelRecordLevelSection = ({
         <H2Title
           title={t`Record-level`}
           description={t`Ability to filter the records a user can interact with`}
-          adornment={<StyledPill label={t`Organization`} Icon={IconLock} />}
+          adornment={
+            <StyledPillContainer>
+              <IconLock size={12} />
+              {t`Organization`}
+            </StyledPillContainer>
+          }
         />
-        <StyledCard rounded>
-          <SettingsOptionCardContentButton
-            Icon={IconLock}
-            title={t`Upgrade to access`}
-            description={t`This feature is part of the Organization Plan`}
-            Button={
-              isBillingEnabled && (
-                <Button
-                  title={t`Upgrade`}
-                  variant="primary"
-                  accent="blue"
-                  size="small"
-                  Icon={IconArrowUp}
-                  onClick={() => navigateSettings(SettingsPath.Billing)}
-                />
-              )
-            }
-          />
-        </StyledCard>
+        <StyledCardContainer>
+          <Card rounded>
+            <SettingsOptionCardContentButton
+              Icon={IconLock}
+              title={t`Upgrade to access`}
+              description={t`This feature is part of the Organization Plan`}
+              Button={
+                isBillingEnabled && (
+                  <Button
+                    title={t`Upgrade`}
+                    variant="primary"
+                    accent="blue"
+                    size="small"
+                    Icon={IconArrowUp}
+                    onClick={() => navigateSettings(SettingsPath.Billing)}
+                  />
+                )
+              }
+            />
+          </Card>
+        </StyledCardContainer>
       </Section>
     );
   }
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableHeader.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableHeader.tsx
index a60411af2f..1e871f2809 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableHeader.tsx
@@ -4,22 +4,10 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { Checkbox } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledNameHeader = styled(TableHeader)`
-  flex: 1;
-`;
-
-const StyledActionsHeader = styled(TableHeader)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
 type SettingsRolePermissionsObjectsTableHeaderProps = {
   roleId: string;
   objectPermissionsConfig: SettingsRolePermissionsObjectPermission[];
@@ -50,8 +38,12 @@ export const SettingsRolePermissionsObjectsTableHeader = ({
 
   return (
     <TableRow>
-      <StyledNameHeader>{t`All Objects`}</StyledNameHeader>
-      <StyledActionsHeader aria-label={t`Actions`}>
+      <TableHeader>{t`All Objects`}</TableHeader>
+      <TableHeader
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+        aria-label={t`Actions`}
+      >
         <Checkbox
           checked={allPermissionsEnabled}
           indeterminate={somePermissionsEnabled && !allPermissionsEnabled}
@@ -69,7 +61,7 @@ export const SettingsRolePermissionsObjectsTableHeader = ({
             });
           }}
         />
-      </StyledActionsHeader>
+      </TableHeader>
     </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableRow.tsx
index 79e3f518df..56824c1674 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableRow.tsx
@@ -8,14 +8,6 @@ import { plural } from '@lingui/core/macro';
 import { Checkbox, CheckboxAccent } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledPermissionCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: ${themeCssVariables.spacing[1]};
-  padding-left: ${themeCssVariables.spacing[2]};
-`;
-
 const StyledPermissionContent = styled.div`
   align-items: center;
   display: flex;
@@ -32,18 +24,6 @@ const StyledOverrideInfo = styled.div`
   display: flex;
   gap: ${themeCssVariables.spacing[1]};
 `;
-const StyledCheckboxCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledTableRow = styled(TableRow)<{ isDisabled: boolean }>`
-  align-items: center;
-  display: flex;
-  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
-`;
 
 type SettingsRolePermissionsObjectsTableRowProps = {
   permission: SettingsRolePermissionsObjectPermission;
@@ -68,8 +48,11 @@ export const SettingsRolePermissionsObjectsTableRow = ({
   };
 
   return (
-    <StyledTableRow onClick={handleRowClick} isDisabled={isDisabled}>
-      <StyledPermissionCell>
+    <TableRow
+      onClick={handleRowClick}
+      cursor={isDisabled ? 'default' : 'pointer'}
+    >
+      <TableCell gap={themeCssVariables.spacing[1]}>
         <StyledPermissionContent>
           <PermissionIcon
             permission={permission.key as SettingsRoleObjectPermissionKey}
@@ -96,15 +79,19 @@ export const SettingsRolePermissionsObjectsTableRow = ({
             </>
           ) : null}
         </StyledOverrideInfo>
-      </StyledPermissionCell>
-      <StyledCheckboxCell onClick={(e) => e.stopPropagation()}>
+      </TableCell>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+        onClick={(e) => e.stopPropagation()}
+      >
         <Checkbox
           checked={permission.value ?? false}
           onChange={() => permission.setValue(!permission.value)}
           disabled={isDisabled}
           accent={isRevoked ? CheckboxAccent.Orange : CheckboxAccent.Blue}
         />
-      </StyledCheckboxCell>
-    </StyledTableRow>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsSection.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsSection.tsx
index dc5ea36e6a..d52acbbd23 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsSection.tsx
@@ -20,7 +20,7 @@ const StyledTableRows = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledCard = styled(Card)`
+const StyledCardContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[4]};
 `;
 
@@ -58,21 +58,23 @@ export const SettingsRolePermissionsSettingsSection = ({
     <Section>
       <H2Title title={t`Settings`} description={t`Settings permissions`} />
       {shouldShowAllAccessToggle && (
-        <StyledCard rounded>
-          <SettingsOptionCardContentToggle
-            Icon={IconSettings}
-            title={t`Settings All Access`}
-            description={t`Ability to edit all settings`}
-            checked={settingsDraftRole.canUpdateAllSettings}
-            disabled={!isEditable}
-            onChange={() => {
-              setSettingsDraftRole({
-                ...settingsDraftRole,
-                canUpdateAllSettings: !settingsDraftRole.canUpdateAllSettings,
-              });
-            }}
-          />
-        </StyledCard>
+        <StyledCardContainer>
+          <Card rounded>
+            <SettingsOptionCardContentToggle
+              Icon={IconSettings}
+              title={t`Settings All Access`}
+              description={t`Ability to edit all settings`}
+              checked={settingsDraftRole.canUpdateAllSettings}
+              disabled={!isEditable}
+              onChange={() => {
+                setSettingsDraftRole({
+                  ...settingsDraftRole,
+                  canUpdateAllSettings: !settingsDraftRole.canUpdateAllSettings,
+                });
+              }}
+            />
+          </Card>
+        </StyledCardContainer>
       )}
       <AnimatedExpandableContainer
         isExpanded={
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableHeader.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableHeader.tsx
index e13310e706..b249618f37 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableHeader.tsx
@@ -1,6 +1,5 @@
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { Checkbox } from 'twenty-ui/input';
 
@@ -17,13 +16,6 @@ type SettingsRolePermissionsSettingsTableHeaderProps = {
   isEditable: boolean;
 };
 
-const StyledActionsHeader = styled(TableHeader)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
 export const SettingsRolePermissionsSettingsTableHeader = ({
   roleId,
   settingsPermissionsConfig,
@@ -55,7 +47,11 @@ export const SettingsRolePermissionsSettingsTableHeader = ({
     <TableRow gridAutoColumns="3fr 4fr 24px">
       <TableHeader>{t`Name`}</TableHeader>
       <TableHeader>{t`Description`}</TableHeader>
-      <StyledActionsHeader aria-label={t`Actions`}>
+      <TableHeader
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+        aria-label={t`Actions`}
+      >
         <Checkbox
           checked={allSettingsPermissionsEnabled}
           indeterminate={
@@ -78,7 +74,7 @@ export const SettingsRolePermissionsSettingsTableHeader = ({
             });
           }}
         />
-      </StyledActionsHeader>
+      </TableHeader>
     </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx
index 3a929d4607..dd19092874 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx
@@ -10,32 +10,14 @@ import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 } from 'uuid';
 
-const StyledTableRow = styled(TableRow)<{ isDisabled: boolean }>`
-  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
-`;
-
 const StyledName = styled.span`
   color: ${themeCssVariables.font.color.primary};
 `;
 
-const StyledDescription = styled(StyledName)`
+const StyledDescription = styled.span`
   color: ${themeCssVariables.font.color.secondary};
 `;
 
-const StyledPermissionCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledCheckboxCell = styled(TableCell)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[1]};
-`;
-
 const StyledIconContainer = styled.div`
   display: flex;
   align-items: center;
@@ -112,13 +94,13 @@ export const SettingsRolePermissionsSettingsTableRow = ({
   };
 
   return (
-    <StyledTableRow
+    <TableRow
       key={permission.key}
       gridAutoColumns="3fr 4fr 24px"
       onClick={handleRowClick}
-      isDisabled={isDisabled}
+      cursor={isDisabled ? 'default' : 'pointer'}
     >
-      <StyledPermissionCell>
+      <TableCell gap={themeCssVariables.spacing[2]}>
         <StyledIconContainer>
           <permission.Icon
             size={theme.icon.size.md}
@@ -127,17 +109,21 @@ export const SettingsRolePermissionsSettingsTableRow = ({
           />
         </StyledIconContainer>
         <StyledName>{permission.name}</StyledName>
-      </StyledPermissionCell>
-      <StyledPermissionCell>
+      </TableCell>
+      <TableCell gap={themeCssVariables.spacing[2]}>
         <StyledDescription>{permission.description}</StyledDescription>
-      </StyledPermissionCell>
-      <StyledCheckboxCell onClick={(e) => e.stopPropagation()}>
+      </TableCell>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
+        onClick={(e) => e.stopPropagation()}
+      >
         <Checkbox
           checked={isChecked}
           disabled={isDisabled}
           onChange={(event) => handleChange(event.target.checked)}
         />
-      </StyledCheckboxCell>
-    </StyledTableRow>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsToolSection.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsToolSection.tsx
index 68cd038794..bb95fbc2e3 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsToolSection.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsToolSection.tsx
@@ -21,7 +21,7 @@ const StyledTableRows = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledCard = styled(Card)`
+const StyledCardContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[4]};
 `;
 
@@ -59,21 +59,23 @@ export const SettingsRolePermissionsToolSection = ({
     <Section>
       <H2Title title={t`Actions`} description={t`Actions permissions`} />
       {shouldShowAllAccessToggle && (
-        <StyledCard rounded>
-          <SettingsOptionCardContentToggle
-            Icon={IconTool}
-            title={t`All Actions Access`}
-            description={t`Grants permission to perform all available actions without restriction`}
-            checked={settingsDraftRole.canAccessAllTools}
-            disabled={!isEditable}
-            onChange={() => {
-              setSettingsDraftRole({
-                ...settingsDraftRole,
-                canAccessAllTools: !settingsDraftRole.canAccessAllTools,
-              });
-            }}
-          />
-        </StyledCard>
+        <StyledCardContainer>
+          <Card rounded>
+            <SettingsOptionCardContentToggle
+              Icon={IconTool}
+              title={t`All Actions Access`}
+              description={t`Grants permission to perform all available actions without restriction`}
+              checked={settingsDraftRole.canAccessAllTools}
+              disabled={!isEditable}
+              onChange={() => {
+                setSettingsDraftRole({
+                  ...settingsDraftRole,
+                  canAccessAllTools: !settingsDraftRole.canAccessAllTools,
+                });
+              }}
+            />
+          </Card>
+        </StyledCardContainer>
       )}
       <AnimatedExpandableContainer
         isExpanded={
diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx
index 8b94188a37..1184dae227 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx
@@ -18,9 +18,12 @@ import { getSettingsPath } from 'twenty-shared/utils';
 import { IconKey } from 'twenty-ui/display';
 import { useGetSsoIdentityProvidersQuery } from '~/generated-metadata/graphql';
 
-const StyledLink = styled(Link)<{ isDisabled: boolean }>`
+const StyledLinkContainer = styled.div<{ isDisabled: boolean }>`
   pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
-  text-decoration: none;
+
+  > a {
+    text-decoration: none;
+  }
 `;
 
 export const SettingsSSOIdentitiesProvidersListCard = () => {
@@ -48,16 +51,17 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {
   });
 
   return loading || !SSOIdentitiesProviders.length ? (
-    <StyledLink
-      to={getSettingsPath(SettingsPath.NewSSOIdentityProvider)}
+    <StyledLinkContainer
       isDisabled={currentWorkspace?.hasValidEnterpriseKey !== true}
     >
-      <SettingsCard
-        title={t`Add SSO Identity Provider`}
-        disabled={currentWorkspace?.hasValidEnterpriseKey !== true}
-        Icon={<IconKey />}
-      />
-    </StyledLink>
+      <Link to={getSettingsPath(SettingsPath.NewSSOIdentityProvider)}>
+        <SettingsCard
+          title={t`Add SSO Identity Provider`}
+          disabled={currentWorkspace?.hasValidEnterpriseKey !== true}
+          Icon={<IconKey />}
+        />
+      </Link>
+    </StyledLinkContainer>
   ) : (
     <SettingsSSOIdentitiesProvidersListCardWrapper />
   );
diff --git a/packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx b/packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx
index cdfda80bdc..69ee154149 100644
--- a/packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx
@@ -19,8 +19,10 @@ import { useGetApprovedAccessDomainsQuery } from '~/generated-metadata/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    text-decoration: none;
+  }
 `;
 
 export const SettingsApprovedAccessDomainsListCard = () => {
@@ -54,12 +56,14 @@ export const SettingsApprovedAccessDomainsListCard = () => {
   };
 
   return loading || !approvedAccessDomains.length ? (
-    <StyledLink to={getSettingsPath(SettingsPath.NewApprovedAccessDomain)}>
-      <SettingsCard
-        title={t`Add Approved Access Domain`}
-        Icon={<IconMailCog />}
-      />
-    </StyledLink>
+    <StyledLinkContainer>
+      <Link to={getSettingsPath(SettingsPath.NewApprovedAccessDomain)}>
+        <SettingsCard
+          title={t`Add Approved Access Domain`}
+          Icon={<IconMailCog />}
+        />
+      </Link>
+    </StyledLinkContainer>
   ) : (
     <>
       <SettingsSecurityApprovedAccessDomainValidationEffect />
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
index 3e2d9ad1a1..66d2db7972 100644
--- a/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
@@ -14,15 +14,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledNavigationIcon = styled.div`
   align-items: center;
+  color: ${themeCssVariables.font.color.secondary};
   cursor: pointer;
   display: flex;
   justify-content: center;
 `;
 
-const StyledIconChevronLeft = styled(IconChevronLeft)`
-  color: ${themeCssVariables.font.color.secondary};
-`;
-
 export const SidePanelBackButton = () => {
   const { goBackFromSidePanel } = useSidePanelHistory();
 
@@ -53,7 +50,7 @@ export const SidePanelBackButton = () => {
       clickableComponent={
         <StyledNavigationIcon onContextMenu={handleBackButtonContextMenu}>
           <IconButton
-            Icon={StyledIconChevronLeft}
+            Icon={IconChevronLeft}
             size="small"
             variant="tertiary"
             onClick={goBackFromSidePanel}
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
index f29c6fbb4e..b38dd238be 100644
--- a/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Label } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledGroupHeading = styled(Label)`
+const StyledGroupHeadingContainer = styled.div`
   align-items: center;
   padding-bottom: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
@@ -29,7 +29,9 @@ export const SidePanelGroup = ({ heading, children }: SidePanelGroupProps) => {
   }
   return (
     <>
-      <StyledGroupHeading>{heading}</StyledGroupHeading>
+      <StyledGroupHeadingContainer>
+        <Label>{heading}</Label>
+      </StyledGroupHeadingContainer>
       <StyledGroup>{children}</StyledGroup>
     </>
   );
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
index 5d2695039c..846289656b 100644
--- a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
@@ -13,7 +13,7 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledIconButton = styled(IconButton)`
+const StyledIconButtonContainer = styled.div`
   color: ${themeCssVariables.font.color.secondary};
 `;
 
@@ -35,22 +35,26 @@ export const SidePanelTopBarRightCornerIcon = () => {
 
   if (!isOnAskAIPage) {
     return (
-      <StyledIconButton
-        onClick={() => openAskAIPage({ resetNavigationStack: false })}
-        Icon={IconSparkles}
-        variant="tertiary"
-        size="small"
-      />
+      <StyledIconButtonContainer>
+        <IconButton
+          onClick={() => openAskAIPage({ resetNavigationStack: false })}
+          Icon={IconSparkles}
+          variant="tertiary"
+          size="small"
+        />
+      </StyledIconButtonContainer>
     );
   }
 
   return (
-    <StyledIconButton
-      Icon={IconEdit}
-      size="small"
-      variant="tertiary"
-      onClick={() => createChatThread()}
-      ariaLabel={t`New conversation`}
-    />
+    <StyledIconButtonContainer>
+      <IconButton
+        Icon={IconEdit}
+        size="small"
+        variant="tertiary"
+        onClick={() => createChatThread()}
+        ariaLabel={t`New conversation`}
+      />
+    </StyledIconButtonContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
index 3bb407606a..59f3d2fd7a 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
@@ -35,7 +35,7 @@ const StyledContainer = styled.div`
   height: 100%;
 `;
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[2]};
 `;
@@ -131,11 +131,13 @@ export const SidePanelWorkflowRunViewStepContent = () => {
           />
         ) : (
           <>
-            <StyledTabList
-              tabs={tabs}
-              behaveAsLinks={false}
-              componentInstanceId={sidePanelPageComponentInstance.instanceId}
-            />
+            <StyledTabListContainer>
+              <TabList
+                tabs={tabs}
+                behaveAsLinks={false}
+                componentInstanceId={sidePanelPageComponentInstance.instanceId}
+              />
+            </StyledTabListContainer>
 
             {activeTabId === WorkflowRunTabId.OUTPUT ? (
               <WorkflowRunStepOutputDetail
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx
index eab8a45cc8..dd8acbace1 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { type ReadonlyDeep } from 'type-fest';
 
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@@ -26,11 +26,20 @@ interface MatchColumnToFieldSelectProps {
   placeholder?: string;
 }
 
-const StyledMenuItem = styled(MenuItem)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+const StyledMenuItemContainer = styled.div`
+  > div {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    border-radius: ${themeCssVariables.border.radius.sm};
+  }
 `;
+
+const StyledMenuItem = (props: React.ComponentProps<typeof MenuItem>) => (
+  <StyledMenuItemContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <MenuItem {...props} />
+  </StyledMenuItemContainer>
+);
 export const MatchColumnToFieldSelect = ({
   onChange,
   value,
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
index 802aaca35f..c89d2c6afd 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
@@ -5,7 +5,7 @@ import DataGrid, { type DataGridProps } from 'react-data-grid';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledDataGrid = styled(DataGrid)`
+const StyledDataGridContainer = styled.div<{ headerRowHeight?: number }>`
   --rdg-background-color: ${themeCssVariables.background.primary};
   --rdg-border-color: ${themeCssVariables.border.color.medium};
   --rdg-color: ${themeCssVariables.font.color.primary};
@@ -25,9 +25,11 @@ const StyledDataGrid = styled(DataGrid)`
   --row-selected-hover-background-color: ${themeCssVariables.background
     .secondary};
 
-  border: none;
-  block-size: 100%;
-  width: 100%;
+  > * {
+    border: none;
+    block-size: 100%;
+    width: 100%;
+  }
 
   .rdg-header-row .rdg-cell {
     box-shadow: none;
@@ -99,7 +101,7 @@ const StyledDataGrid = styled(DataGrid)`
     display: flex;
     line-height: none;
   }
-` as typeof DataGrid;
+`;
 
 type SpreadsheetImportTableProps<Data> = Pick<
   DataGridProps<Data>,
@@ -138,21 +140,23 @@ export const SpreadsheetImportTable = <Data,>({
   if (!rows?.length || !columns?.length) return null;
 
   return (
-    <StyledDataGrid
-      direction={rtl ? 'rtl' : 'ltr'}
-      rowHeight={40}
-      {...{
-        className: `${className || ''} ${themeClassName}`,
-        columns,
-        headerRowHeight,
-        rowKeyGetter,
-        onRowsChange,
-        rows,
-        components,
-        onRowClick,
-        onSelectedRowsChange,
-        selectedRows,
-      }}
-    />
+    <StyledDataGridContainer headerRowHeight={headerRowHeight}>
+      <DataGrid
+        direction={rtl ? 'rtl' : 'ltr'}
+        rowHeight={40}
+        {...{
+          className: `${className || ''} ${themeClassName}`,
+          columns,
+          headerRowHeight,
+          rowKeyGetter,
+          onRowsChange,
+          rows,
+          components,
+          onRowClick,
+          onSelectedRowsChange,
+          selectedRows,
+        }}
+      />
+    </StyledDataGridContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
index 332549dc60..24b77b6458 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx
@@ -7,10 +7,12 @@ import { MainButton } from 'twenty-ui/input';
 import { ModalFooter } from 'twenty-ui/layout';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
-const StyledFooter = styled(ModalFooter)`
-  border-top: 1px solid ${themeCssVariables.border.color.medium};
-  box-shadow: ${themeCssVariables.boxShadow.strong};
-  justify-content: space-between;
+const StyledFooterContainer = styled.div`
+  > div {
+    border-top: 1px solid ${themeCssVariables.border.color.medium};
+    box-shadow: ${themeCssVariables.boxShadow.strong};
+    justify-content: space-between;
+  }
 `;
 
 type StepNavigationButtonProps = {
@@ -31,24 +33,26 @@ export const StepNavigationButton = ({
   isContinueDisabled = false,
 }: StepNavigationButtonProps) => {
   return (
-    <StyledFooter autoHeight>
-      {!isUndefinedOrNull(onBack) && (
-        <MainButton
-          Icon={isLoading ? CircularProgressBar : undefined}
-          title={backTitle}
-          onClick={!isLoading ? onBack : undefined}
-          variant="secondary"
-        />
-      )}
-      {!isUndefinedOrNull(onContinue) && (
-        <MainButton
-          Icon={isLoading ? CircularProgressBar : undefined}
-          title={continueTitle}
-          onClick={!isLoading ? onContinue : undefined}
-          variant="primary"
-          disabled={isContinueDisabled}
-        />
-      )}
-    </StyledFooter>
+    <StyledFooterContainer>
+      <ModalFooter autoHeight>
+        {!isUndefinedOrNull(onBack) && (
+          <MainButton
+            Icon={isLoading ? CircularProgressBar : undefined}
+            title={backTitle}
+            onClick={!isLoading ? onBack : undefined}
+            variant="secondary"
+          />
+        )}
+        {!isUndefinedOrNull(onContinue) && (
+          <MainButton
+            Icon={isLoading ? CircularProgressBar : undefined}
+            title={continueTitle}
+            onClick={!isLoading ? onContinue : undefined}
+            variant="primary"
+            disabled={isContinueDisabled}
+          />
+        )}
+      </ModalFooter>
+    </StyledFooterContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx
index 748ee5ce0f..bef6a83521 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx
@@ -13,8 +13,9 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { Tag, type TagColor } from 'twenty-ui/components';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
-const StyledIconChevronDown = styled(IconChevronDown)`
+const StyledIconChevronDownContainer = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 export type SubMatchingSelectDropdownButtonProps = {
@@ -40,7 +41,9 @@ export const SubMatchingSelectDropdownButton = ({
         text={value?.label ?? placeholder}
         color={value?.color as TagColor}
       />
-      <StyledIconChevronDown size={theme.icon.size.md} />
+      <StyledIconChevronDownContainer>
+        <IconChevronDown size={theme.icon.size.md} />
+      </StyledIconChevronDownContainer>
     </SubMatchingSelectControlContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
index 72b362899a..9a25e9407c 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
@@ -4,13 +4,15 @@ import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledBanner = styled(Banner)<{ allMatched: boolean }>`
-  background: ${({ allMatched }) =>
-    allMatched
-      ? themeCssVariables.accent.secondary
-      : themeCssVariables.background.transparent.light};
-  border-radius: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]} 10px;
+const StyledBannerContainer = styled.div<{ allMatched: boolean }>`
+  > div {
+    background: ${({ allMatched }) =>
+      allMatched
+        ? themeCssVariables.accent.secondary
+        : themeCssVariables.background.transparent.light};
+    border-radius: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]} 10px;
+  }
 `;
 
 const StyledText = styled.div<{ allMatched: boolean }>`
@@ -65,24 +67,26 @@ export const UnmatchColumnBanner = ({
   const { theme } = useContext(ThemeContext);
 
   return (
-    <StyledBanner allMatched={allMatched}>
-      <IconInfoCircle
-        color={allMatched ? theme.color.blue : theme.font.color.secondary}
-        size={theme.icon.size.md}
-      />
-      {isDefined(buttonOnClick) ? (
-        <StyledClickableContainer onClick={buttonOnClick}>
+    <StyledBannerContainer allMatched={allMatched}>
+      <Banner>
+        <IconInfoCircle
+          color={allMatched ? theme.color.blue : theme.font.color.secondary}
+          size={theme.icon.size.md}
+        />
+        {isDefined(buttonOnClick) ? (
+          <StyledClickableContainer onClick={buttonOnClick}>
+            <StyledText allMatched={allMatched}>{message}</StyledText>
+            <StyledIconChevronDownWrapper
+              isExpanded={isExpanded}
+              allMatched={allMatched}
+            >
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledIconChevronDownWrapper>
+          </StyledClickableContainer>
+        ) : (
           <StyledText allMatched={allMatched}>{message}</StyledText>
-          <StyledIconChevronDownWrapper
-            isExpanded={isExpanded}
-            allMatched={allMatched}
-          >
-            <IconChevronDown size={theme.icon.size.md} />
-          </StyledIconChevronDownWrapper>
-        </StyledClickableContainer>
-      ) : (
-        <StyledText allMatched={allMatched}>{message}</StyledText>
-      )}
-    </StyledBanner>
+        )}
+      </Banner>
+    </StyledBannerContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
index ef409c29dd..70212aa6d1 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@@ -15,7 +15,7 @@ import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/Spre
 import { useLingui } from '@lingui/react/macro';
 import { SelectHeaderTable } from './components/SelectHeaderTable';
 
-const StyledHeading = styled(Heading)`
+const StyledHeadingContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[8]};
 `;
 
@@ -105,7 +105,9 @@ export const SelectHeaderStep = ({
   return (
     <>
       <ModalContent>
-        <StyledHeading title={t`Select header row`} />
+        <StyledHeadingContainer>
+          <Heading title={t`Select header row`} />
+        </StyledHeadingContainer>
         <StyledTableContainer>
           <SelectHeaderTable
             importedRows={importedRows}
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
index 05c62e84ab..768eccbf40 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -11,20 +11,16 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
 
 import { ModalContent } from 'twenty-ui/layout';
 import { useLingui } from '@lingui/react/macro';
-import { Radio, RadioGroup } from 'twenty-ui/input';
+import { Radio } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type WorkBook } from 'xlsx-ugnis';
 
-const StyledHeading = styled(Heading)`
-  display: flex;
-`;
-
 const StyledRadioContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
-const StyledRadio = styled(Radio)`
+const StyledRadioItemContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[6]};
 `;
 
@@ -104,17 +100,20 @@ export const SelectSheetStep = ({
   return (
     <>
       <ModalContent isVerticallyCentered isHorizontallyCentered gap={8}>
-        <StyledHeading title={t`Select the sheet to use`} />
+        <Heading title={t`Select the sheet to use`} />
         <StyledRadioContainer>
-          <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
-            {sheetNames.map((sheetName) => (
-              <StyledRadio
+          {sheetNames.map((sheetName) => (
+            <StyledRadioItemContainer key={sheetName}>
+              <Radio
                 value={sheetName}
-                key={sheetName}
                 label={sheetName}
+                checked={value === sheetName}
+                onCheckedChange={(checked) => {
+                  if (checked) setValue(sheetName);
+                }}
               />
-            ))}
-          </RadioGroup>
+            </StyledRadioItemContainer>
+          ))}
         </StyledRadioContainer>
       </ModalContent>
       <StepNavigationButton
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
index 5018501ad5..01bb7a3ed8 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@@ -56,8 +56,10 @@ const StyledToolbar = styled.div`
   box-shadow: ${themeCssVariables.boxShadow.strong};
 `;
 
-const StyledButton = styled(Button)`
-  height: 24px;
+const StyledButtonContainer = styled.div`
+  > button {
+    height: 24px;
+  }
 `;
 
 const StyledErrorToggle = styled.div`
@@ -323,13 +325,15 @@ export const ValidationStep = ({
                 <Trans>Show only rows with errors</Trans>
               </StyledErrorToggleDescription>
             </StyledErrorToggle>
-            <StyledButton
-              Icon={IconTrash}
-              title={t`Remove`}
-              accent="default"
-              onClick={deleteSelectedRows}
-              disabled={selectedRows.size === 0}
-            />
+            <StyledButtonContainer>
+              <Button
+                Icon={IconTrash}
+                title={t`Remove`}
+                accent="default"
+                onClick={deleteSelectedRows}
+                disabled={selectedRows.size === 0}
+              />
+            </StyledButtonContainer>
           </StyledToolbar>
         </StyledContentWrapper>
       </ModalContent>
diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
index b990e5f51b..38193535e1 100644
--- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
@@ -55,7 +55,8 @@ const StyledDialogMessage = styled.span`
   text-align: center;
 `;
 
-const StyledDialogButton = styled(Button)`
+const StyledDialogButtonContainer = styled.div`
+  display: flex;
   justify-content: center;
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
@@ -157,16 +158,18 @@ export const Dialog = ({
         {message && <StyledDialogMessage>{message}</StyledDialogMessage>}
         {children}
         {buttons.map(({ accent, onClick, role, title: key, variant }) => (
-          <StyledDialogButton
-            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-              onClose?.();
-              onClick?.(event);
-            }}
-            fullWidth={true}
-            variant={variant ?? 'secondary'}
-            title={key}
-            {...{ accent, key, role }}
-          />
+          <StyledDialogButtonContainer key={key}>
+            <Button
+              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                onClose?.();
+                onClick?.(event);
+              }}
+              fullWidth={true}
+              variant={variant ?? 'secondary'}
+              title={key}
+              {...{ accent, role }}
+            />
+          </StyledDialogButtonContainer>
         ))}
       </StyledDialogContainer>
     </StyledDialogOverlay>
diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
index f6035311d9..2b4c3f76a7 100644
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
@@ -68,7 +68,7 @@ const StyledContainer = styled.div`
   }
 `;
 
-const StyledProgressBar = styled(ProgressBar)`
+const StyledProgressBarContainer = styled.div`
   bottom: 0;
   height: auto;
   left: 0;
@@ -112,17 +112,19 @@ const StyledDescription = styled.div`
   width: 200px;
 `;
 
-const StyledLink = styled(Link)`
-  display: block;
-  color: ${themeCssVariables.font.color.tertiary};
-  font-size: ${themeCssVariables.font.size.sm};
-  padding-left: ${themeCssVariables.spacing[6]};
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 200px;
-  &:hover {
-    color: ${themeCssVariables.font.color.secondary};
+const StyledLinkContainer = styled.div`
+  > a {
+    display: block;
+    color: ${themeCssVariables.font.color.tertiary};
+    font-size: ${themeCssVariables.font.size.sm};
+    padding-left: ${themeCssVariables.spacing[6]};
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 200px;
+    &:hover {
+      color: ${themeCssVariables.font.color.secondary};
+    }
   }
 `;
 
@@ -229,10 +231,12 @@ export const SnackBar = ({
       role={role}
       data-globally-prevent-click-outside
     >
-      <StyledProgressBar
-        barColor={theme.snackBar[variant].backgroundColor}
-        value={progressValue}
-      />
+      <StyledProgressBarContainer>
+        <ProgressBar
+          barColor={theme.snackBar[variant].backgroundColor}
+          value={progressValue}
+        />
+      </StyledProgressBarContainer>
       <StyledHeader>
         <StyledIcon>{icon}</StyledIcon>
         <StyledMessage>{sanitizedMessage ?? ''}</StyledMessage>
@@ -248,7 +252,9 @@ export const SnackBar = ({
         <StyledDescription>{sanitizedDetailedMessage}</StyledDescription>
       )}
       {actionText && actionTo && (
-        <StyledLink to={actionTo}>{actionText}</StyledLink>
+        <StyledLinkContainer>
+          <Link to={actionTo}>{actionText}</Link>
+        </StyledLinkContainer>
       )}
       {actionText && actionOnClick && !actionTo && (
         <StyledActionButton>
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
index 000e09cdd7..8896027444 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -9,25 +9,27 @@ import { IMaskInput } from 'react-imask';
 import { type IconComponent } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-export const StyledIMaskInput = styled(IMaskInput)`
-  margin: 0;
-  background-color: transparent;
-  border: none;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: ${themeCssVariables.font.family};
-  font-size: inherit;
-  font-weight: inherit;
-  outline: none;
-  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${themeCssVariables.font.color.light};
+export const StyledIMaskInput = styled.div`
+  > input {
+    margin: 0;
+    background-color: transparent;
+    border: none;
+    color: ${themeCssVariables.font.color.primary};
     font-family: ${themeCssVariables.font.family};
-    font-weight: ${themeCssVariables.font.weight.medium};
-  }
+    font-size: inherit;
+    font-weight: inherit;
+    outline: none;
+    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
 
-  width: 100%;
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-family: ${themeCssVariables.font.family};
+      font-weight: ${themeCssVariables.font.weight.medium};
+    }
+
+    width: 100%;
+  }
 `;
 
 const StyledContainer = styled.div`
@@ -124,19 +126,21 @@ export const CurrencyInput = ({
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         )}
       </StyledIcon>
-      <StyledIMaskInput
-        mask={Number}
-        thousandsSeparator=","
-        radix="."
-        scale={decimals}
-        onAccept={(value: string) => handleChange(value)}
-        inputRef={wrapperRef}
-        autoComplete="off"
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-        value={value}
-        unmask
-      />
+      <StyledIMaskInput>
+        <IMaskInput
+          mask={Number}
+          thousandsSeparator=","
+          radix="."
+          scale={decimals}
+          onAccept={(value: string) => handleChange(value)}
+          inputRef={wrapperRef}
+          autoComplete="off"
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          value={value}
+          unmask
+        />
+      </StyledIMaskInput>
     </StyledContainer>
   );
 };
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 3e5b3aa54c..15357ab43c 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
@@ -25,31 +25,33 @@ export type TextAreaInputProps = {
   copyButton?: boolean;
 };
 
-const StyledTextArea = styled(TextareaAutosize)`
-  background-color: transparent;
-  border: none;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: ${themeCssVariables.font.family};
-  font-size: inherit;
-  font-weight: inherit;
-  outline: none;
-  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${themeCssVariables.font.color.light};
+const StyledTextAreaContainer = styled.div`
+  > textarea {
+    background-color: transparent;
+    border: none;
+    color: ${themeCssVariables.font.color.primary};
     font-family: ${themeCssVariables.font.family};
-    font-weight: ${themeCssVariables.font.weight.medium};
+    font-size: inherit;
+    font-weight: inherit;
+    outline: none;
+    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-family: ${themeCssVariables.font.family};
+      font-weight: ${themeCssVariables.font.weight.medium};
+    }
+
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    resize: none;
+    max-height: 400px;
+    width: calc(100% - ${themeCssVariables.spacing[7]});
+
+    line-height: 18px;
   }
-
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  resize: none;
-  max-height: 400px;
-  width: calc(100% - ${themeCssVariables.spacing[7]});
-
-  line-height: 18px;
 `;
 
 const StyledLightIconButtonContainer = styled.div`
@@ -111,16 +113,18 @@ export const TextAreaInput = ({
 
   return (
     <>
-      <StyledTextArea
-        placeholder={placeholder}
-        disabled={disabled}
-        className={className}
-        ref={wrapperRef}
-        onChange={handleChange}
-        autoFocus={autoFocus}
-        value={internalText}
-        maxRows={maxRows}
-      />
+      <StyledTextAreaContainer>
+        <TextareaAutosize
+          placeholder={placeholder}
+          disabled={disabled}
+          className={className}
+          ref={wrapperRef}
+          onChange={handleChange}
+          autoFocus={autoFocus}
+          value={internalText}
+          maxRows={maxRows}
+        />
+      </StyledTextAreaContainer>
       {copyButton && (
         <StyledLightIconButtonContainer ref={copyRef}>
           <LightCopyIconButton copyText={internalText} />
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
index c06432e59a..2e7853e719 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
@@ -40,34 +40,36 @@ const StyledLabel = styled.label`
   margin-bottom: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledTextArea = styled(TextareaAutosize)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
-  box-sizing: border-box;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: inherit;
-  font-size: ${themeCssVariables.font.size.md};
-  font-weight: ${themeCssVariables.font.weight.regular};
-  line-height: 16px;
-  overflow: auto;
-  padding: ${themeCssVariables.spacing[2]};
-  resize: none;
-  width: 100%;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
-    border-color: ${themeCssVariables.color.blue};
-  }
-
-  &::placeholder {
-    color: ${themeCssVariables.font.color.light};
+const StyledTextAreaContainer = styled.div`
+  > textarea {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    border-radius: ${themeCssVariables.border.radius.sm};
+    box-sizing: border-box;
+    color: ${themeCssVariables.font.color.primary};
+    font-family: inherit;
+    font-size: ${themeCssVariables.font.size.md};
     font-weight: ${themeCssVariables.font.weight.regular};
-  }
+    line-height: 16px;
+    overflow: auto;
+    padding: ${themeCssVariables.spacing[2]};
+    resize: none;
+    width: 100%;
 
-  &:disabled {
-    color: ${themeCssVariables.font.color.tertiary};
+    &:focus {
+      outline: none;
+      box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
+      border-color: ${themeCssVariables.color.blue};
+    }
+
+    &::placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-weight: ${themeCssVariables.font.weight.regular};
+    }
+
+    &:disabled {
+      color: ${themeCssVariables.font.color.tertiary};
+    }
   }
 `;
 
@@ -115,22 +117,24 @@ export const TextArea = ({
     <StyledContainer>
       {label && <StyledLabel htmlFor={instanceId}>{label}</StyledLabel>}
 
-      <StyledTextArea
-        id={instanceId}
-        placeholder={placeholder}
-        maxRows={maxRows}
-        minRows={computedMinRows}
-        value={value}
-        onChange={(event) =>
-          onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
-        }
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        disabled={disabled}
-        className={className}
-        readOnly={readOnly}
-        style={isDefined(height) ? { height } : undefined}
-      />
+      <StyledTextAreaContainer>
+        <TextareaAutosize
+          id={instanceId}
+          placeholder={placeholder}
+          maxRows={maxRows}
+          minRows={computedMinRows}
+          value={value}
+          onChange={(event) =>
+            onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
+          }
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          className={className}
+          readOnly={readOnly}
+          style={isDefined(height) ? { height } : undefined}
+        />
+      </StyledTextAreaContainer>
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx
index 2a43a262b5..16aaf68c12 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx
@@ -1,9 +1,20 @@
 import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
 import { Label } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-export const StyledDropdownMenuSubheader = styled(Label)`
+const StyledDropdownMenuSubheaderContainer = styled.div`
   background-color: ${themeCssVariables.background.transparent.lighter};
   padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
   width: 100%;
 `;
+
+export const StyledDropdownMenuSubheader = ({
+  children,
+}: {
+  children: ReactNode;
+}) => (
+  <StyledDropdownMenuSubheaderContainer>
+    <Label>{children}</Label>
+  </StyledDropdownMenuSubheaderContainer>
+);
diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
index e21c5aedd8..4816a3803e 100644
--- a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
@@ -29,7 +29,7 @@ const StyledMainContainer = styled.div`
     ${themeCssVariables.spacing[3]};
 `;
 
-const StyledPageHeader = styled(PageHeader)`
+const StyledPageHeaderContainer = styled.div`
   padding-left: ${themeCssVariables.spacing[3]};
 `;
 
@@ -42,11 +42,13 @@ export const FullScreenContainer = ({
 
   return (
     <StyledFullScreen>
-      <StyledPageHeader
-        title={<Breadcrumb links={links} />}
-        hasClosePageButton={!isMobile}
-        onClosePage={exitFullScreen}
-      />
+      <StyledPageHeaderContainer>
+        <PageHeader
+          title={<Breadcrumb links={links} />}
+          hasClosePageButton={!isMobile}
+          onClosePage={exitFullScreen}
+        />
+      </StyledPageHeaderContainer>
       <StyledMainContainer>{children}</StyledMainContainer>
     </StyledFullScreen>
   );
diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx
index 2253ace892..dd28d4cb06 100644
--- a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx
@@ -22,7 +22,7 @@ const StyledFullScreenOverlay = styled.div`
   z-index: ${RootStackingContextZIndices.RootModal};
 `;
 
-const StyledFullScreenHeader = styled(PageHeader)`
+const StyledFullScreenHeaderContainer = styled.div`
   padding-left: ${themeCssVariables.spacing[3]};
 `;
 
@@ -59,11 +59,13 @@ export const FullScreenModal = forwardRef<HTMLDivElement, FullScreenModalProps>(
         data-globally-prevent-click-outside="true"
         tabIndex={-1}
       >
-        <StyledFullScreenHeader
-          title={<Breadcrumb links={links} />}
-          hasClosePageButton={hasClosePageButton}
-          onClosePage={onClose}
-        />
+        <StyledFullScreenHeaderContainer>
+          <PageHeader
+            title={<Breadcrumb links={links} />}
+            hasClosePageButton={hasClosePageButton}
+            onClosePage={onClose}
+          />
+        </StyledFullScreenHeaderContainer>
         <StyledFullScreenContent>{children}</StyledFullScreenContent>
       </StyledFullScreenOverlay>
     );
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
index d533b09ff2..2ea90f2228 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -33,30 +33,52 @@ export type ConfirmationModalProps = {
   overlay?: ModalOverlay;
 };
 
-export const StyledCenteredButton = styled(Button)`
+const StyledCenteredButtonContainer = styled.div`
   box-sizing: border-box;
   margin-top: ${themeCssVariables.spacing[2]};
 `;
 
+export const StyledCenteredButton = (
+  props: React.ComponentProps<typeof Button>,
+) => (
+  <StyledCenteredButtonContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <Button {...props} />
+  </StyledCenteredButtonContainer>
+);
+
 const StyledCenteredTitle = styled.div`
   text-align: center;
 `;
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[6]};
 `;
 
-export const StyledConfirmationButton = styled(StyledCenteredButton)`
-  border-color: ${themeCssVariables.border.color.danger};
-  box-shadow: none;
-  color: ${themeCssVariables.color.red};
-  font-size: ${themeCssVariables.font.size.md};
-  line-height: ${themeCssVariables.text.lineHeight.lg};
-  :hover {
-    background-color: ${themeCssVariables.color.red3};
+const StyledConfirmationButtonContainer = styled.div`
+  box-sizing: border-box;
+  margin-top: ${themeCssVariables.spacing[2]};
+  > button {
+    border-color: ${themeCssVariables.border.color.danger};
+    box-shadow: none;
+    color: ${themeCssVariables.color.red};
+    font-size: ${themeCssVariables.font.size.md};
+    line-height: ${themeCssVariables.text.lineHeight.lg};
+    &:hover {
+      background-color: ${themeCssVariables.color.red3};
+    }
   }
 `;
 
+export const StyledConfirmationButton = (
+  props: React.ComponentProps<typeof Button>,
+) => (
+  <StyledConfirmationButtonContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <Button {...props} />
+  </StyledConfirmationButtonContainer>
+);
+
 const defaultConfirmButtonText = msg`Confirm`;
 
 export const ConfirmationModal = ({
@@ -129,12 +151,14 @@ export const ConfirmationModal = ({
       <StyledCenteredTitle>
         <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
       </StyledCenteredTitle>
-      <StyledSection
-        alignment={SectionAlignment.Center}
-        fontColor={SectionFontColor.Primary}
-      >
-        {subtitle}
-      </StyledSection>
+      <StyledSectionContainer>
+        <Section
+          alignment={SectionAlignment.Center}
+          fontColor={SectionFontColor.Primary}
+        >
+          {subtitle}
+        </Section>
+      </StyledSectionContainer>
       {confirmationValue && (
         <Section>
           <SettingsTextInput
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
index 7523eaac8b..150629500b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
@@ -19,9 +19,10 @@ const StyledInnerContainer = styled.div`
   height: 100%;
 `;
 
-const StyledScrollWrapper = styled(ScrollWrapper)`
+const StyledScrollWrapperContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   border-radius: ${themeCssVariables.border.radius.md};
+  overflow: hidden;
 `;
 
 export type ShowPageContainerProps = {
@@ -40,11 +41,13 @@ export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
 
   return isMobile ? (
     <StyledOuterContainer style={mobileStyle}>
-      <StyledScrollWrapper componentInstanceId="scroll-wrapper-show-page-container">
-        <StyledInnerContainer style={mobileStyle}>
-          {children}
-        </StyledInnerContainer>
-      </StyledScrollWrapper>
+      <StyledScrollWrapperContainer>
+        <ScrollWrapper componentInstanceId="scroll-wrapper-show-page-container">
+          <StyledInnerContainer style={mobileStyle}>
+            {children}
+          </StyledInnerContainer>
+        </ScrollWrapper>
+      </StyledScrollWrapperContainer>
     </StyledOuterContainer>
   ) : (
     <StyledOuterContainer>
diff --git a/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx
index 723eefe841..e91e6e172f 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx
@@ -4,8 +4,10 @@ import { IconChevronDown } from 'twenty-ui/display';
 import { TabButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledTabMoreButton = styled(TabButton)`
-  height: ${themeCssVariables.spacing[10]};
+const StyledTabMoreButtonContainer = styled.div`
+  > * {
+    height: ${themeCssVariables.spacing[10]};
+  }
 `;
 
 export const TabMoreButton = ({
@@ -18,12 +20,14 @@ export const TabMoreButton = ({
   className?: string;
 }) => {
   return (
-    <StyledTabMoreButton
-      id="tab-more-button"
-      active={active}
-      title={`+${hiddenTabsCount} ${t`More`}`}
-      RightIcon={IconChevronDown}
-      className={className}
-    />
+    <StyledTabMoreButtonContainer>
+      <TabButton
+        id="tab-more-button"
+        active={active}
+        title={`+${hiddenTabsCount} ${t`More`}`}
+        RightIcon={IconChevronDown}
+        className={className}
+      />
+    </StyledTabMoreButtonContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx
index 6fb0fda0bf..7786483925 100644
--- a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx
@@ -31,7 +31,7 @@ const StyledSection = styled.div<{ isExpanded: boolean }>`
     opacity calc(${themeCssVariables.animation.duration.normal} * 1s);
 `;
 
-const StyledSectionContent = styled(TableBody)`
+const StyledSectionContentContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -66,7 +66,9 @@ export const TableSection = ({
         )}
       </StyledSectionHeader>
       <StyledSection isExpanded={isExpanded}>
-        <StyledSectionContent>{children}</StyledSectionContent>
+        <StyledSectionContentContainer>
+          <TableBody>{children}</TableBody>
+        </StyledSectionContentContainer>
       </StyledSection>
     </>
   );
diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx
index 481d4a8081..64004b2822 100644
--- a/packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx
@@ -1,10 +1,19 @@
 import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
-const StyledTableSubRow = styled(TableRow)`
+const StyledTableSubRowContainer = styled.div`
   padding-left: ${themeCssVariables.spacing[4]};
 `;
 
-export const TableSubRow = StyledTableSubRow;
+export const TableSubRow = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof TableRow> & { children?: ReactNode }) => (
+  <StyledTableSubRowContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <TableRow {...props}>{children}</TableRow>
+  </StyledTableSubRowContainer>
+);
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
index 077ffa4e5e..c50455025d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
@@ -22,12 +22,14 @@ const StyledWrapper = styled.nav`
   height: ${themeCssVariables.spacing[8]};
 `;
 
-const StyledLink = styled(Link)`
-  color: inherit;
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const StyledLinkContainer = styled.div`
+  > a {
+    color: inherit;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 
 const StyledText = styled.span`
@@ -56,9 +58,11 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
         return (
           <Fragment key={index}>
             {link.href ? (
-              <StyledLink title={text} to={link.href}>
-                {link.children}
-              </StyledLink>
+              <StyledLinkContainer>
+                <Link title={text} to={link.href}>
+                  {link.children}
+                </Link>
+              </StyledLinkContainer>
             ) : (
               <StyledText title={text}>{link.children}</StyledText>
             )}
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
index b3586419ac..e05e37b98d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
@@ -24,12 +24,14 @@ const StyledWrapper = styled.nav`
   height: ${themeCssVariables.spacing[8]};
 `;
 
-const StyledLink = styled(Link)`
-  color: inherit;
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const StyledLinkContainer = styled.div`
+  > a {
+    color: inherit;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 
 const StyledText = styled.span`
@@ -71,9 +73,11 @@ export const MobileBreadcrumb = ({
       ) : previousLink?.href ? (
         <>
           <IconChevronLeft size={theme.icon.size.md} />
-          <StyledLink title={text} to={previousLink.href}>
-            {t`Back to ${linkText}`}
-          </StyledLink>
+          <StyledLinkContainer>
+            <Link title={text} to={previousLink.href}>
+              {t`Back to ${linkText}`}
+            </Link>
+          </StyledLinkContainer>
         </>
       ) : (
         <StyledText title={text}>{previousLink?.children}</StyledText>
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
index 4d33e550c8..ee7dc902d6 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
@@ -30,9 +30,7 @@ export const StyledLabel = styled.div`
   font-weight: ${themeCssVariables.font.weight.medium};
 `;
 
-export const StyledIconChevronDown = styled(IconChevronDown)<{
-  disabled?: boolean;
-}>`
+const StyledIconChevronDownContainer = styled.div<{ disabled?: boolean }>`
   align-items: center;
   color: ${({ disabled }) =>
     disabled
@@ -40,3 +38,13 @@ export const StyledIconChevronDown = styled(IconChevronDown)<{
       : themeCssVariables.font.color.tertiary};
   display: flex;
 `;
+
+export const StyledIconChevronDown = ({
+  disabled,
+  ...props
+}: { disabled?: boolean } & React.ComponentProps<typeof IconChevronDown>) => (
+  <StyledIconChevronDownContainer disabled={disabled}>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <IconChevronDown {...props} />
+  </StyledIconChevronDownContainer>
+);
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
index ca516e9156..3acb12927d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
@@ -33,12 +33,12 @@ const StyledRightActions = styled.div<{ isExpanded: boolean }>`
   transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
 `;
 
-const StyledNavigationDrawerCollapseButton = styled(
-  NavigationDrawerCollapseButton,
-)`
-  height: ${themeCssVariables.spacing[6]};
-  padding-right: ${themeCssVariables.spacing[1]};
-  width: ${themeCssVariables.spacing[6]};
+const StyledNavigationDrawerCollapseButtonContainer = styled.div`
+  > * {
+    height: ${themeCssVariables.spacing[6]};
+    padding-right: ${themeCssVariables.spacing[1]};
+    width: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 const StyledWorkspaceDropdownContainer = styled.div`
@@ -76,7 +76,9 @@ export const NavigationDrawerHeader = ({
             aria-label={t`Search`}
           />
           {isNavigationDrawerExpanded && showCollapseButton && (
-            <StyledNavigationDrawerCollapseButton direction="left" />
+            <StyledNavigationDrawerCollapseButtonContainer>
+              <NavigationDrawerCollapseButton direction="left" />
+            </StyledNavigationDrawerCollapseButtonContainer>
           )}
         </StyledRightActions>
       )}
diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
index 71cbd6b92f..c0e2462be2 100644
--- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
@@ -60,11 +60,12 @@ const StyledLargeGrid = styled.div`
   height: 600px;
 `;
 
-const StyledScrollableWrapper = styled(ScrollWrapper)`
+const StyledScrollableWrapperContainer = styled.div`
   border: 1px solid ${themeCssVariables.border.color.light};
   border-radius: ${themeCssVariables.border.radius.md};
   height: 300px;
   width: 600px;
+  overflow: hidden;
 `;
 
 type SelectableItemProps = {
@@ -146,27 +147,32 @@ const ScrollableDragSelectDemo = () => {
   };
 
   return (
-    <StyledScrollableWrapper componentInstanceId="scrollable-demo">
-      <div ref={containerRef} style={{ position: 'relative', padding: '16px' }}>
-        <StyledLargeGrid>
-          {Array.from({ length: 36 }, (_, index) => (
-            <SelectableItem
-              key={index}
-              id={`scroll-item-${index}`}
-              selected={selectedItems.has(`scroll-item-${index}`)}
-            >
-              Item {index + 1}
-            </SelectableItem>
-          ))}
-        </StyledLargeGrid>
+    <StyledScrollableWrapperContainer>
+      <ScrollWrapper componentInstanceId="scrollable-demo">
+        <div
+          ref={containerRef}
+          style={{ position: 'relative', padding: '16px' }}
+        >
+          <StyledLargeGrid>
+            {Array.from({ length: 36 }, (_, index) => (
+              <SelectableItem
+                key={index}
+                id={`scroll-item-${index}`}
+                selected={selectedItems.has(`scroll-item-${index}`)}
+              >
+                Item {index + 1}
+              </SelectableItem>
+            ))}
+          </StyledLargeGrid>
 
-        <DragSelect
-          selectableItemsContainerRef={containerRef}
-          onDragSelectionChange={handleSelectionChange}
-          scrollWrapperComponentInstanceId="scrollable-demo"
-        />
-      </div>
-    </StyledScrollableWrapper>
+          <DragSelect
+            selectableItemsContainerRef={containerRef}
+            onDragSelectionChange={handleSelectionChange}
+            scrollWrapperComponentInstanceId="scrollable-demo"
+          />
+        </div>
+      </ScrollWrapper>
+    </StyledScrollableWrapperContainer>
   );
 };
 
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
index 7011e4263f..3fc1c12d1b 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
@@ -26,9 +26,11 @@ import { MenuItem } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 } from 'uuid';
 
-const StyledPill = styled(Pill)`
-  background: ${themeCssVariables.color.blue3};
-  color: ${themeCssVariables.color.blue};
+const StyledPillContainer = styled.span`
+  & > * {
+    background: ${themeCssVariables.color.blue3};
+    color: ${themeCssVariables.color.blue};
+  }
 `;
 
 export const ViewBarFilterDropdownAdvancedFilterButton = () => {
@@ -134,7 +136,9 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
         focused={isSelectedItemId}
       />
       {advancedFilterQuerySubFilterCount > 0 && (
-        <StyledPill label={advancedFilterQuerySubFilterCount.toString()} />
+        <StyledPillContainer>
+          <Pill label={advancedFilterQuerySubFilterCount.toString()} />
+        </StyledPillContainer>
       )}
     </SelectableListItem>
   );
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index bb88f89df2..64d794d913 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -28,7 +28,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { ViewVisibility } from '~/generated-metadata/graphql';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 
-const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+const StyledBoldDropdownMenuItemsContainerWrapper = styled.div`
   font-weight: ${themeCssVariables.font.weight.regular};
 `;
 
@@ -198,13 +198,15 @@ export const ViewPickerListContent = () => {
         </>
       )}
       <DropdownMenuSeparator />
-      <StyledBoldDropdownMenuItemsContainer scrollable={false}>
-        <MenuItem
-          onClick={handleAddViewButtonClick}
-          LeftIcon={IconPlus}
-          text={t`Add view`}
-        />
-      </StyledBoldDropdownMenuItemsContainer>
+      <StyledBoldDropdownMenuItemsContainerWrapper>
+        <DropdownMenuItemsContainer scrollable={false}>
+          <MenuItem
+            onClick={handleAddViewButtonClick}
+            LeftIcon={IconPlus}
+            text={t`Add view`}
+          />
+        </DropdownMenuItemsContainer>
+      </StyledBoldDropdownMenuItemsContainerWrapper>
     </DropdownContent>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx
index 4e34b10b0d..8532f6dc01 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx
@@ -2,13 +2,14 @@ import { styled } from '@linaria/react';
 import { IconButtonGroup, type IconButtonGroupProps } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledIconButtonGroup = styled(IconButtonGroup)`
+const StyledIconButtonGroupContainer = styled.div`
   pointer-events: all;
 `;
 
-const StyledSelectedIconButtonGroup = styled(StyledIconButtonGroup)`
+const StyledSelectedIconButtonGroupContainer = styled.div`
   background-color: ${themeCssVariables.color.blue2};
   border-color: ${themeCssVariables.color.blue};
+  pointer-events: all;
 `;
 
 type WorkflowDiagramEdgeButtonGroupProps = IconButtonGroupProps & {
@@ -19,9 +20,13 @@ export const WorkflowDiagramEdgeButtonGroup = ({
   selected = false,
   iconButtons,
 }: WorkflowDiagramEdgeButtonGroupProps) => {
-  const ButtonGroup = selected
-    ? StyledSelectedIconButtonGroup
-    : StyledIconButtonGroup;
+  const Container = selected
+    ? StyledSelectedIconButtonGroupContainer
+    : StyledIconButtonGroupContainer;
 
-  return <ButtonGroup className="nodrag nopan" iconButtons={iconButtons} />;
+  return (
+    <Container>
+      <IconButtonGroup className="nodrag nopan" iconButtons={iconButtons} />
+    </Container>
+  );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx
index e9f0f58a19..6601c378de 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx
@@ -9,8 +9,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const HANDLE_SCALE_ON_HOVER = 1.5;
 
-const StyledHandle = styled(Handle)`
-  &.react-flow__handle {
+const StyledHandleContainer = styled.div`
+  & .react-flow__handle {
     height: ${NODE_HANDLE_HEIGHT_PX}px;
     width: ${NODE_HANDLE_WIDTH_PX}px;
     opacity: var(--handle-opacity, 1);
@@ -110,11 +110,8 @@ export const WorkflowDiagramHandleSource = ({
   }, [position, selected, hovered, disableHoverEffect, runStatus, type]);
 
   return (
-    <StyledHandle
-      id={id}
-      type={type}
-      position={position}
-      style={dynamicStyles}
-    />
+    <StyledHandleContainer>
+      <Handle id={id} type={type} position={position} style={dynamicStyles} />
+    </StyledHandleContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx
index d939f08dff..623aac170b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx
@@ -7,8 +7,8 @@ type WorkflowDiagramHandleTargetProps = {
   isConnectable?: boolean;
 };
 
-const StyledHandle = styled(Handle)`
-  &.react-flow__handle {
+const StyledHandleContainer = styled.div`
+  & .react-flow__handle {
     opacity: 0;
     z-index: 1;
     border-radius: ${themeCssVariables.border.radius.md};
@@ -28,12 +28,14 @@ export const WorkflowDiagramHandleTarget = ({
   isConnectable = false,
 }: WorkflowDiagramHandleTargetProps) => {
   return (
-    <StyledHandle
-      id={WORKFLOW_DIAGRAM_NODE_DEFAULT_TARGET_HANDLE_ID}
-      type="target"
-      position={Position.Top}
-      isConnectableEnd={isConnectable}
-      isConnectableStart={false}
-    />
+    <StyledHandleContainer>
+      <Handle
+        id={WORKFLOW_DIAGRAM_NODE_DEFAULT_TARGET_HANDLE_ID}
+        type="target"
+        position={Position.Top}
+        isConnectableEnd={isConnectable}
+        isConnectableStart={false}
+      />
+    </StyledHandleContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx
index 11b2bdd322..2384ac53e7 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx
@@ -18,7 +18,6 @@ import { WorkflowDiagramStepNodeIcon } from '@/workflow/workflow-diagram/workflo
 import { WorkflowNodeContainer } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer';
 import { WorkflowNodeIconContainer } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeIconContainer';
 import { WorkflowNodeLabel } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabel';
-import { WorkflowNodeLabelWithCounterPart } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabelWithCounterPart';
 import { WorkflowNodeRightPart } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart';
 import { WorkflowNodeTitle } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeTitle';
 import { WORKFLOW_DIAGRAM_NODE_DEFAULT_SOURCE_HANDLE_ID } from '@/workflow/workflow-diagram/workflow-nodes/constants/WorkflowDiagramNodeDefaultSourceHandleId';
@@ -33,7 +32,13 @@ import { IconCheck, IconX, useIcons } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledNodeLabelWithCounterPart = styled(WorkflowNodeLabelWithCounterPart)`
+const StyledNodeLabelWithCounterPart = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  height: 14px;
+  justify-content: space-between;
+  box-sizing: border-box;
   column-gap: ${themeCssVariables.spacing[2]};
 `;
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx
index 84f56b9e1f..9d348ba306 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx
@@ -7,7 +7,7 @@ import { IconFilter } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledButton = styled(Button)`
+const StyledButtonContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[2]};
 `;
 
@@ -17,15 +17,17 @@ export const WorkflowStepFilterAddRootStepFilterButton = () => {
   const { addRootStepFilter } = useAddRootStepFilter();
 
   return (
-    <StyledButton
-      Icon={IconFilter}
-      size="small"
-      variant="secondary"
-      accent="default"
-      onClick={addRootStepFilter}
-      ariaLabel={t`Add first filter`}
-      title={t`Add first filter`}
-      disabled={readonly}
-    />
+    <StyledButtonContainer>
+      <Button
+        Icon={IconFilter}
+        size="small"
+        variant="secondary"
+        accent="default"
+        onClick={addRootStepFilter}
+        ariaLabel={t`Add first filter`}
+        title={t`Add first filter`}
+        disabled={readonly}
+      />
+    </StyledButtonContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx
similarity index 76%
rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.ts
rename to packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx
index 8653bb73cd..fd57e083b3 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@linaria/react';
+import React from 'react';
 import { IconChevronRight, Label } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -6,11 +7,17 @@ export const StyledText = styled.div`
   color: ${themeCssVariables.font.color.secondary};
 `;
 
-export const StyledLabel = styled(Label)`
+const StyledLabelWrapper = styled.div`
   margin: ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
     ${themeCssVariables.spacing[0]};
 `;
 
+export const StyledLabel = ({ children }: { children: React.ReactNode }) => (
+  <StyledLabelWrapper>
+    <Label>{children}</Label>
+  </StyledLabelWrapper>
+);
+
 export const StyledRow = styled.div<{ isDisabled?: boolean }>`
   align-items: center;
   display: flex;
@@ -61,6 +68,18 @@ export const StyledIconContainer = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
 `;
 
-export const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightWrapper = styled.div`
+  align-items: center;
   color: ${themeCssVariables.font.color.tertiary};
+  display: inline-flex;
 `;
+
+export const StyledIconChevronRight = ({
+  size,
+  color,
+  stroke,
+}: React.ComponentProps<typeof IconChevronRight>) => (
+  <StyledIconChevronRightWrapper>
+    <IconChevronRight size={size} color={color} stroke={stroke} />
+  </StyledIconChevronRightWrapper>
+);
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx
index f700c525e9..7722d3b971 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx
@@ -26,11 +26,11 @@ import { WorkflowAiAgentPermissionsFlagList } from './WorkflowAiAgentPermissions
 import { WorkflowAiAgentPermissionsObjectsList } from './WorkflowAiAgentPermissionsObjectsList';
 import { getFilteredPermissions } from './workflowAiAgentPermissions.utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledSearchInput = styled(TextInput)`
+const StyledSearchInputContainer = styled.div`
   width: 100%;
   height: 40px;
   border-block: 1px solid ${themeCssVariables.border.color.medium};
-  input {
+  & input {
     height: 40px;
     line-height: 40px;
     border: none;
@@ -198,16 +198,18 @@ export const WorkflowAiAgentPermissionsTab = ({
         </StyledBackButton>
       )}
 
-      <StyledSearchInput
-        value={searchQuery}
-        onChange={(value: string) => setSearchQuery(value)}
-        placeholder={t`Type anything...`}
-        onKeyDown={(event) => {
-          if (isNonTextWritingKey(event.key)) {
-            event.stopPropagation();
-          }
-        }}
-      />
+      <StyledSearchInputContainer>
+        <TextInput
+          value={searchQuery}
+          onChange={(value: string) => setSearchQuery(value)}
+          placeholder={t`Type anything...`}
+          onKeyDown={(event) => {
+            if (isNonTextWritingKey(event.key)) {
+              event.stopPropagation();
+            }
+          }}
+        />
+      </StyledSearchInputContainer>
 
       {shouldShowCrudList && (
         <WorkflowAiAgentPermissionsCrudList
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx
index 0590fa7c59..5b45e8a71f 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx
@@ -50,7 +50,7 @@ type WorkflowEditActionAiAgentProps = {
       };
 };
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[2]};
 `;
@@ -270,11 +270,13 @@ export const WorkflowEditActionAiAgent = ({
     <SidePanelSkeletonLoader />
   ) : (
     <>
-      <StyledTabList
-        tabs={tabs}
-        componentInstanceId={componentInstanceId}
-        behaveAsLinks={false}
-      />
+      <StyledTabListContainer>
+        <TabList
+          tabs={tabs}
+          componentInstanceId={componentInstanceId}
+          behaveAsLinks={false}
+        />
+      </StyledTabListContainer>
       {currentTabId === WORKFLOW_AI_AGENT_TABS.PERMISSIONS ? (
         <WorkflowStepBody paddingBlock="0" paddingInline="0">
           <WorkflowAiAgentPermissionsTab
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
index 7cdc5f4f29..9e44744ab9 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
@@ -55,7 +55,7 @@ const StyledCodeEditorContainer = styled.div`
   position: relative;
 `;
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[2]};
 `;
@@ -370,11 +370,13 @@ export const WorkflowEditActionCode = ({
     !loading && (
       <>
         <LogicFunctionTestInputInitEffect logicFunctionId={logicFunctionId} />
-        <StyledTabList
-          tabs={tabs}
-          behaveAsLinks={false}
-          componentInstanceId={WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID}
-        />
+        <StyledTabListContainer>
+          <TabList
+            tabs={tabs}
+            behaveAsLinks={false}
+            componentInstanceId={WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID}
+          />
+        </StyledTabListContainer>
         <WorkflowStepBody>
           {activeTabId === WorkflowLogicFunctionTabId.CODE && (
             <>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
index c2f2d29740..a3856ac9e6 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
@@ -139,8 +139,11 @@ const StyledCalloutContainer = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledNotClosableCalloutContainer = styled(StyledCalloutContainer)`
+const StyledNotClosableCalloutContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[4]};
+  padding-left: ${themeCssVariables.spacing[7]};
+  padding-right: ${themeCssVariables.spacing[7]};
+  padding-top: ${themeCssVariables.spacing[2]};
 `;
 
 export const WorkflowEditActionFormBuilder = ({
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx
index 437037fec5..d2dcf78a66 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx
@@ -32,7 +32,7 @@ const StyledContainer = styled.div`
   gap: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSelectDropdown = styled(Select)`
+const StyledSelectDropdownContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 const StyledNoBodyMessage = styled.div`
@@ -163,23 +163,25 @@ export const BodyInput = ({
   return (
     <FormFieldInputContainer>
       <InputLabel>{t`Body Input`}</InputLabel>
-      <StyledSelectDropdown
-        options={[
-          { label: t`Key/Value`, value: BODY_TYPES.KEY_VALUE, Icon: IconKey },
-          {
-            label: t`Raw JSON`,
-            value: BODY_TYPES.RAW_JSON,
-            Icon: IconFileText,
-          },
-          { label: t`Form Data`, value: BODY_TYPES.FORM_DATA, Icon: IconKey },
-          { label: t`Text`, value: BODY_TYPES.TEXT, Icon: IconFileText },
-          { label: t`None`, value: BODY_TYPES.NONE, Icon: IconFileText },
-        ]}
-        dropdownId="body-input-mode"
-        value={getBodyTypeFromHeaders(headers) || BODY_TYPES.NONE}
-        onChange={(value) => handleModeChange(value as BodyType)}
-        disabled={readonly}
-      />
+      <StyledSelectDropdownContainer>
+        <Select
+          options={[
+            { label: t`Key/Value`, value: BODY_TYPES.KEY_VALUE, Icon: IconKey },
+            {
+              label: t`Raw JSON`,
+              value: BODY_TYPES.RAW_JSON,
+              Icon: IconFileText,
+            },
+            { label: t`Form Data`, value: BODY_TYPES.FORM_DATA, Icon: IconKey },
+            { label: t`Text`, value: BODY_TYPES.TEXT, Icon: IconFileText },
+            { label: t`None`, value: BODY_TYPES.NONE, Icon: IconFileText },
+          ]}
+          dropdownId="body-input-mode"
+          value={getBodyTypeFromHeaders(headers) || BODY_TYPES.NONE}
+          onChange={(value) => handleModeChange(value as BodyType)}
+          disabled={readonly}
+        />
+      </StyledSelectDropdownContainer>
 
       <StyledContainer>
         {isBodyTypeRawJson ? (
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
index 08e14d8343..b7876757ca 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
@@ -39,7 +39,7 @@ type WorkflowEditActionHttpRequestProps = {
   };
 };
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   padding-left: ${themeCssVariables.spacing[2]};
 `;
@@ -61,7 +61,7 @@ const StyledConfigurationTabContent = styled.div`
   flex: 1;
 `;
 
-const StyledFullHeightFormRawJsonFieldInput = styled(FormRawJsonFieldInput)`
+const StyledFullHeightFormRawJsonFieldInputContainer = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -128,11 +128,13 @@ export const WorkflowEditActionHttpRequest = ({
 
   return (
     <>
-      <StyledTabList
-        tabs={tabs}
-        behaveAsLinks={false}
-        componentInstanceId={WORKFLOW_HTTP_REQUEST_TAB_LIST_COMPONENT_ID}
-      />
+      <StyledTabListContainer>
+        <TabList
+          tabs={tabs}
+          behaveAsLinks={false}
+          componentInstanceId={WORKFLOW_HTTP_REQUEST_TAB_LIST_COMPONENT_ID}
+        />
+      </StyledTabListContainer>
       <WorkflowStepBody>
         {activeTabId === WorkflowHttpRequestTabId.CONFIGURATION && (
           <StyledConfigurationTabContent>
@@ -178,14 +180,16 @@ export const WorkflowEditActionHttpRequest = ({
               />
             )}
 
-            <StyledFullHeightFormRawJsonFieldInput
-              label={t`Expected Response Body`}
-              placeholder={JSON_RESPONSE_PLACEHOLDER}
-              defaultValue={outputSchema}
-              onChange={handleOutputSchemaChange}
-              readonly={actionOptions.readonly}
-              error={error}
-            />
+            <StyledFullHeightFormRawJsonFieldInputContainer>
+              <FormRawJsonFieldInput
+                label={t`Expected Response Body`}
+                placeholder={JSON_RESPONSE_PLACEHOLDER}
+                defaultValue={outputSchema}
+                onChange={handleOutputSchemaChange}
+                readonly={actionOptions.readonly}
+                error={error}
+              />
+            </StyledFullHeightFormRawJsonFieldInputContainer>
           </StyledConfigurationTabContent>
         )}
         {activeTabId === WorkflowHttpRequestTabId.TEST && (
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
index 084f113649..2a49bd80f4 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
@@ -1,5 +1,4 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -15,17 +14,29 @@ import { useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconVariablePlus } from 'twenty-ui/display';
 import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
-const StyledDropdownVariableButtonContainer = styled(
-  StyledDropdownButtonContainer,
-)<{ transparentBackground?: boolean; disabled?: boolean }>`
+const StyledDropdownVariableButtonContainer = styled.div<{
+  isUnfolded?: boolean;
+  transparentBackground?: boolean;
+  disabled?: boolean;
+}>`
+  align-items: center;
   background-color: ${({ transparentBackground }) =>
     transparentBackground
       ? 'transparent'
       : themeCssVariables.background.transparent.lighter};
-
+  border-radius: ${themeCssVariables.border.radius.sm};
   color: ${themeCssVariables.font.color.tertiary};
+  cursor: pointer;
+  display: flex;
   padding: ${themeCssVariables.spacing[2]};
-  :hover {
+  user-select: none;
+  &:hover {
+    background: ${({ isUnfolded, transparentBackground }) =>
+      transparentBackground
+        ? 'transparent'
+        : isUnfolded
+          ? themeCssVariables.background.transparent.medium
+          : themeCssVariables.background.transparent.light};
     cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   }
 `;
diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
index 773d584672..6ff87c9056 100644
--- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx
+++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
@@ -73,7 +73,7 @@ const StyledForm = styled.form`
   width: 100%;
 `;
 
-const StyledFullWidthMotionDiv = styled(motion.div)`
+const StyledFullWidthContainer = styled.div`
   width: 100%;
 `;
 
@@ -81,7 +81,7 @@ const StyledInputContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledMainButton = styled(MainButton)`
+const StyledMainButtonContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[2]};
 `;
 
@@ -234,64 +234,70 @@ export const PasswordReset = () => {
               </SkeletonTheme>
             ) : (
               <StyledForm onSubmit={handleSubmit(onSubmit)}>
-                <StyledFullWidthMotionDiv
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  transition={{
-                    type: 'spring',
-                    stiffness: 800,
-                    damping: 35,
-                  }}
-                >
-                  <StyledInputContainer>
-                    <TextInput
-                      autoFocus
-                      value={email}
-                      placeholder={t`Email`}
-                      fullWidth
-                      disabled
+                <StyledFullWidthContainer>
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    transition={{
+                      type: 'spring',
+                      stiffness: 800,
+                      damping: 35,
+                    }}
+                  >
+                    <StyledInputContainer>
+                      <TextInput
+                        autoFocus
+                        value={email}
+                        placeholder={t`Email`}
+                        fullWidth
+                        disabled
+                      />
+                    </StyledInputContainer>
+                  </motion.div>
+                </StyledFullWidthContainer>
+                <StyledFullWidthContainer>
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    transition={{
+                      type: 'spring',
+                      stiffness: 800,
+                      damping: 35,
+                    }}
+                  >
+                    <Controller
+                      name="newPassword"
+                      control={control}
+                      render={({
+                        field: { onChange, onBlur, value },
+                        fieldState: { error },
+                      }) => (
+                        <StyledInputContainer>
+                          <TextInput
+                            autoFocus
+                            value={value}
+                            type="password"
+                            placeholder={t`New Password`}
+                            onBlur={onBlur}
+                            onChange={onChange}
+                            error={error?.message}
+                            fullWidth
+                          />
+                        </StyledInputContainer>
+                      )}
                     />
-                  </StyledInputContainer>
-                </StyledFullWidthMotionDiv>
-                <StyledFullWidthMotionDiv
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  transition={{
-                    type: 'spring',
-                    stiffness: 800,
-                    damping: 35,
-                  }}
-                >
-                  <Controller
-                    name="newPassword"
-                    control={control}
-                    render={({
-                      field: { onChange, onBlur, value },
-                      fieldState: { error },
-                    }) => (
-                      <StyledInputContainer>
-                        <TextInput
-                          autoFocus
-                          value={value}
-                          type="password"
-                          placeholder={t`New Password`}
-                          onBlur={onBlur}
-                          onChange={onChange}
-                          error={error?.message}
-                          fullWidth
-                        />
-                      </StyledInputContainer>
-                    )}
-                  />
-                </StyledFullWidthMotionDiv>
+                  </motion.div>
+                </StyledFullWidthContainer>
 
-                <StyledMainButton
-                  variant="secondary"
-                  title={passwordActionLabel}
-                  type="submit"
-                  fullWidth
-                  disabled={isUpdatingPassword}
-                />
+                <StyledMainButtonContainer>
+                  <MainButton
+                    variant="secondary"
+                    title={passwordActionLabel}
+                    type="submit"
+                    fullWidth
+                    disabled={isUpdatingPassword}
+                  />
+                </StyledMainButtonContainer>
               </StyledForm>
             )}
           </StyledContentContainer>
diff --git a/packages/twenty-front/src/pages/onboarding/BookCallDecision.tsx b/packages/twenty-front/src/pages/onboarding/BookCallDecision.tsx
index 9d7e17c2d8..fe4ee4095e 100644
--- a/packages/twenty-front/src/pages/onboarding/BookCallDecision.tsx
+++ b/packages/twenty-front/src/pages/onboarding/BookCallDecision.tsx
@@ -32,8 +32,10 @@ const StyledButtonContainer = styled.div`
   width: 100%;
 `;
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    text-decoration: none;
+  }
 `;
 
 export const BookCallDecision = () => {
@@ -61,9 +63,11 @@ export const BookCallDecision = () => {
       </StyledTitleContainer>
       <StyledCoverImage src="/images/placeholders/onboarding-covers/onboarding-book-call-decision-cover.png" />
       <StyledButtonContainer>
-        <StyledLink to={AppPath.BookCall}>
-          <MainButton title={t`Book onboarding`} width={198} />
-        </StyledLink>
+        <StyledLinkContainer>
+          <Link to={AppPath.BookCall}>
+            <MainButton title={t`Book onboarding`} width={198} />
+          </Link>
+        </StyledLinkContainer>
         <LightButton title={t`Finish`} onClick={handleFinish} />
       </StyledButtonContainer>
     </ModalContent>
diff --git a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
index df5c47465a..3ac470db81 100644
--- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
+++ b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
@@ -19,7 +19,6 @@ import { useLoadCurrentUser } from '@/users/hooks/useLoadCurrentUser';
 import { ApolloError } from '@apollo/client';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
-import { motion } from 'framer-motion';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
@@ -57,7 +56,7 @@ enum PendingCreationLoaderStep {
   Step3 = 'step-3',
 }
 
-const StyledPendingCreationLoader = styled(motion.div)`
+const StyledPendingCreationLoader = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
diff --git a/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx b/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx
index 63f9ca060b..dc3add7c64 100644
--- a/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx
@@ -44,7 +44,7 @@ const StyledOTPContainer = styled.div`
   width: fit-content;
 `;
 
-const StyledQRCode = styled(QRCode)`
+const StyledQRCodeSizer = styled.div`
   height: 137px;
   width: 137px;
 `;
@@ -152,7 +152,9 @@ export const SettingsTwoFactorAuthenticationMethod = () => {
                 ) : (
                   <>
                     <StyledQRCodeWrapper>
-                      <StyledQRCode value={qrCode} />
+                      <StyledQRCodeSizer>
+                        <QRCode value={qrCode} />
+                      </StyledQRCodeSizer>
                     </StyledQRCodeWrapper>
                     <StyledCopySetupKeyText>
                       <Trans>Can't scan? Copy the</Trans>{' '}
diff --git a/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx b/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
index af037b5768..eb36bf028b 100644
--- a/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
+++ b/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
@@ -24,14 +24,16 @@ import {
   useGetDatabaseConfigVariableQuery,
 } from '~/generated-metadata/graphql';
 
-const StyledForm = styled(Form)`
-  display: flex;
-  flex-direction: column;
-  gap: ${themeCssVariables.spacing[4]};
-  width: 100%;
+const StyledFormContainer = styled.div`
+  > form {
+    display: flex;
+    flex-direction: column;
+    gap: ${themeCssVariables.spacing[4]};
+    width: 100%;
+  }
 `;
 
-const StyledH3Title = styled(H3Title)`
+const StyledH3TitleContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[2]};
 `;
 
@@ -143,54 +145,57 @@ export const SettingsAdminConfigVariableDetails = () => {
         ]}
       >
         <SettingsPageContainer>
-          <StyledH3Title
-            title={variable.name}
-            description={variable.description}
-          />
+          <StyledH3TitleContainer>
+            <H3Title title={variable.name} description={variable.description} />
+          </StyledH3TitleContainer>
 
-          <StyledForm onSubmit={handleSubmit(onSubmit)}>
-            <StyledRow>
-              <ConfigVariableValueInput
-                variable={variable}
-                value={watch('value')}
-                onChange={(value) => setValue('value', value)}
-                disabled={isEnvOnly || !isEditing}
-              />
-
-              {!isEditing ? (
-                <Button
-                  Icon={IconPencil}
-                  variant="primary"
-                  onClick={handleEditClick}
-                  type="button"
-                  disabled={isEnvOnly || !isConfigVariablesInDbEnabled}
+          <StyledFormContainer>
+            <Form onSubmit={handleSubmit(onSubmit)}>
+              <StyledRow>
+                <ConfigVariableValueInput
+                  variable={variable}
+                  value={watch('value')}
+                  onChange={(value) => setValue('value', value)}
+                  disabled={isEnvOnly || !isEditing}
                 />
-              ) : (
-                <StyledButtonContainer>
-                  <Button
-                    Icon={IconCheck}
-                    variant="secondary"
-                    position="left"
-                    type="submit"
-                    disabled={isSubmitting || !isValueValid || !hasValueChanged}
-                  />
-                  <Button
-                    Icon={IconX}
-                    variant="secondary"
-                    position="right"
-                    onClick={handleXButtonClick}
-                    type="button"
-                    disabled={isSubmitting}
-                  />
-                </StyledButtonContainer>
-              )}
-            </StyledRow>
 
-            <ConfigVariableHelpText
-              variable={variable}
-              hasValueChanged={hasValueChanged}
-            />
-          </StyledForm>
+                {!isEditing ? (
+                  <Button
+                    Icon={IconPencil}
+                    variant="primary"
+                    onClick={handleEditClick}
+                    type="button"
+                    disabled={isEnvOnly || !isConfigVariablesInDbEnabled}
+                  />
+                ) : (
+                  <StyledButtonContainer>
+                    <Button
+                      Icon={IconCheck}
+                      variant="secondary"
+                      position="left"
+                      type="submit"
+                      disabled={
+                        isSubmitting || !isValueValid || !hasValueChanged
+                      }
+                    />
+                    <Button
+                      Icon={IconX}
+                      variant="secondary"
+                      position="right"
+                      onClick={handleXButtonClick}
+                      type="button"
+                      disabled={isSubmitting}
+                    />
+                  </StyledButtonContainer>
+                )}
+              </StyledRow>
+
+              <ConfigVariableHelpText
+                variable={variable}
+                hasValueChanged={hasValueChanged}
+              />
+            </Form>
+          </StyledFormContainer>
         </SettingsPageContainer>
       </SubMenuTopBarContainer>
 
diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsAI.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsAI.tsx
index 216d9455bf..80aa6199e5 100644
--- a/packages/twenty-front/src/pages/settings/ai/SettingsAI.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/SettingsAI.tsx
@@ -27,8 +27,10 @@ import { SettingsSkillsTable } from './components/SettingsSkillsTable';
 import { SettingsToolsTable } from './components/SettingsToolsTable';
 import { SETTINGS_AI_TABS } from './constants/SettingsAiTabs';
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    text-decoration: none;
+  }
 `;
 
 export const SettingsAI = () => {
@@ -97,13 +99,15 @@ export const SettingsAI = () => {
                   title={t`System Prompt`}
                   description={t`View the AI system prompt and add custom instructions`}
                   Button={
-                    <StyledLink to={getSettingsPath(SettingsPath.AIPrompts)}>
-                      <Button
-                        title={t`Configure`}
-                        variant="secondary"
-                        size="small"
-                      />
-                    </StyledLink>
+                    <StyledLinkContainer>
+                      <Link to={getSettingsPath(SettingsPath.AIPrompts)}>
+                        <Button
+                          title={t`Configure`}
+                          variant="secondary"
+                          size="small"
+                        />
+                      </Link>
+                    </StyledLinkContainer>
                   }
                 />
               </Card>
diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsAgentForm.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsAgentForm.tsx
index 61a4b124da..bc29871c5c 100644
--- a/packages/twenty-front/src/pages/settings/ai/SettingsAgentForm.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/SettingsAgentForm.tsx
@@ -54,7 +54,7 @@ const StyledContentContainer = styled.div`
   width: 100%;
 `;
 
-const StyledTabList = styled(TabList)`
+const StyledTabListContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[8]};
 `;
 
@@ -417,11 +417,13 @@ export const SettingsAgentForm = ({ mode }: { mode: 'create' | 'edit' }) => {
               <SettingsAgentDetailSkeletonLoader />
             ) : (
               <>
-                <StyledTabList
-                  tabs={tabs}
-                  className="tab-list"
-                  componentInstanceId={tabListComponentId}
-                />
+                <StyledTabListContainer>
+                  <TabList
+                    tabs={tabs}
+                    className="tab-list"
+                    componentInstanceId={tabListComponentId}
+                  />
+                </StyledTabListContainer>
                 <StyledContentContainer>
                   {isRoleTab && (
                     <SettingsAgentRoleTab
diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsAgentTurnDetail.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsAgentTurnDetail.tsx
index 20ea8dd829..35607adb10 100644
--- a/packages/twenty-front/src/pages/settings/ai/SettingsAgentTurnDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/SettingsAgentTurnDetail.tsx
@@ -18,34 +18,14 @@ import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { GET_AGENT_TURNS } from '@/ai/graphql/queries/getAgentTurns';
 
-const StyledTable = styled(Table)`
+const StyledTableContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledTableHeaderRow = styled(TableRow)`
-  grid-template-columns: 140px 80px 1fr;
+const StyledTableHeaderRowContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 140px 80px 1fr;
-`;
-
-const StyledDateCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
-const StyledScoreCell = styled(TableCell)`
-  align-items: center;
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledCommentCell = styled(TableCell)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
 const StyledMessagesContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -205,43 +185,54 @@ export const SettingsAgentTurnDetail = () => {
         <Section>
           <H2Title title={t`Evaluations`} />
           {turn.evaluations && turn.evaluations.length > 0 ? (
-            <StyledTable>
-              <StyledTableHeaderRow>
-                <TableHeader>{t`Date`}</TableHeader>
-                <TableHeader>{t`Score`}</TableHeader>
-                <TableHeader>{t`Comment`}</TableHeader>
-              </StyledTableHeaderRow>
-              {[...turn.evaluations]
-                .sort(
-                  (a: any, b: any) =>
-                    new Date(b.createdAt).getTime() -
-                    new Date(a.createdAt).getTime(),
-                )
-                .map((evaluation: any) => (
-                  <StyledTableRow key={evaluation.id}>
-                    <StyledDateCell>
-                      {new Date(evaluation.createdAt).toLocaleDateString(
-                        'en-US',
-                        {
-                          month: 'short',
-                          day: 'numeric',
-                          hour: '2-digit',
-                          minute: '2-digit',
-                        },
-                      )}
-                    </StyledDateCell>
-                    <StyledScoreCell>
-                      <Status
-                        color={getScoreColor(evaluation.score)}
-                        text={`${evaluation.score}`}
-                      />
-                    </StyledScoreCell>
-                    <StyledCommentCell>
-                      {evaluation.comment || t`No comment`}
-                    </StyledCommentCell>
-                  </StyledTableRow>
-                ))}
-            </StyledTable>
+            <StyledTableContainer>
+              <Table>
+                <StyledTableHeaderRowContainer>
+                  <TableRow gridTemplateColumns="140px 80px 1fr">
+                    <TableHeader>{t`Date`}</TableHeader>
+                    <TableHeader>{t`Score`}</TableHeader>
+                    <TableHeader>{t`Comment`}</TableHeader>
+                  </TableRow>
+                </StyledTableHeaderRowContainer>
+                {[...turn.evaluations]
+                  .sort(
+                    (a: any, b: any) =>
+                      new Date(b.createdAt).getTime() -
+                      new Date(a.createdAt).getTime(),
+                  )
+                  .map((evaluation: any) => (
+                    <TableRow
+                      key={evaluation.id}
+                      gridTemplateColumns="140px 80px 1fr"
+                    >
+                      <TableCell color={themeCssVariables.font.color.tertiary}>
+                        {new Date(evaluation.createdAt).toLocaleDateString(
+                          'en-US',
+                          {
+                            month: 'short',
+                            day: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                          },
+                        )}
+                      </TableCell>
+                      <TableCell gap={themeCssVariables.spacing[2]}>
+                        <Status
+                          color={getScoreColor(evaluation.score)}
+                          text={`${evaluation.score}`}
+                        />
+                      </TableCell>
+                      <TableCell
+                        overflow="hidden"
+                        textOverflow="ellipsis"
+                        whiteSpace="nowrap"
+                      >
+                        {evaluation.comment || t`No comment`}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+              </Table>
+            </StyledTableContainer>
           ) : (
             <div>{t`No evaluations yet for this turn`}</div>
           )}
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx
index 907f117e7e..35bbdce83d 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx
@@ -14,21 +14,7 @@ export type SettingsAIAgentTableRowProps = {
   link?: string;
 };
 
-export const StyledAIAgentTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 120px 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-  overflow: hidden;
-`;
-
-const StyledActionTableCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[2]};
-`;
+export const AI_AGENT_TABLE_ROW_GRID_TEMPLATE_COLUMNS = '1fr 120px 36px';
 
 const StyledIconContainer = styled.div`
   flex-shrink: 0;
@@ -45,17 +31,31 @@ export const SettingsAIAgentTableRow = ({
   const Icon = getIcon(agent.icon || 'IconRobot');
 
   return (
-    <StyledAIAgentTableRow key={agent.id} to={link}>
-      <StyledNameTableCell>
+    <TableRow
+      gridTemplateColumns={AI_AGENT_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      key={agent.id}
+      to={link}
+    >
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+        minWidth="0"
+        overflow="hidden"
+      >
         <StyledIconContainer>
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         </StyledIconContainer>
         <OverflowingTextWithTooltip text={agent.label} />
-      </StyledNameTableCell>
+      </TableCell>
       <TableCell>
         <SettingsItemTypeTag item={agent} />
       </TableCell>
-      <StyledActionTableCell>{action}</StyledActionTableCell>
-    </StyledAIAgentTableRow>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[2]} 0 0`}
+      >
+        {action}
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
index afb256535a..07e6deeeab 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
@@ -26,9 +26,10 @@ import { normalizeSearchText } from '~/utils/normalizeSearchText';
 
 import Skeleton from 'react-loading-skeleton';
 import { useFindManyAgentsQuery } from '~/generated-metadata/graphql';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  AI_AGENT_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsAIAgentTableRow,
-  StyledAIAgentTableRow,
 } from './SettingsAIAgentTableRow';
 
 const StyledSearchAndFilterContainer = styled.div`
@@ -38,15 +39,15 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
-const StyledTable = styled(Table)`
+const StyledTableContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledTableHeaderRow = styled(StyledAIAgentTableRow)`
+const StyledTableHeaderRowContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
@@ -78,13 +79,15 @@ export const SettingsAIAgentsTable = () => {
   return (
     <>
       <StyledSearchAndFilterContainer>
-        <StyledSearchInput
-          instanceId="settings-ai-agents-search"
-          LeftIcon={IconSearch}
-          placeholder={t`Search an agent...`}
-          value={searchTerm}
-          onChange={setSearchTerm}
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId="settings-ai-agents-search"
+            LeftIcon={IconSearch}
+            placeholder={t`Search an agent...`}
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+        </StyledSearchInputContainer>
         <Dropdown
           dropdownId="settings-ai-agents-filter-dropdown"
           dropdownPlacement="bottom-end"
@@ -116,42 +119,48 @@ export const SettingsAIAgentsTable = () => {
         />
       </StyledSearchAndFilterContainer>
 
-      <StyledTable>
-        <StyledTableHeaderRow>
-          {SETTINGS_AI_AGENT_TABLE_METADATA.fields.map(
-            (settingsAIAgentTableMetadataField) => (
-              <SortableTableHeader
-                key={settingsAIAgentTableMetadataField.fieldName}
-                fieldName={settingsAIAgentTableMetadataField.fieldName}
-                label={t(settingsAIAgentTableMetadataField.fieldLabel)}
-                tableId={SETTINGS_AI_AGENT_TABLE_METADATA.tableId}
-                align={settingsAIAgentTableMetadataField.align}
-                initialSort={SETTINGS_AI_AGENT_TABLE_METADATA.initialSort}
-              />
-            ),
-          )}
-          <TableHeader />
-        </StyledTableHeaderRow>
-        {loading &&
-          Array.from({ length: 3 }).map((_, index) => (
-            <Skeleton height={32} borderRadius={4} key={index} />
+      <StyledTableContainer>
+        <Table>
+          <StyledTableHeaderRowContainer>
+            <TableRow
+              gridTemplateColumns={AI_AGENT_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+            >
+              {SETTINGS_AI_AGENT_TABLE_METADATA.fields.map(
+                (settingsAIAgentTableMetadataField) => (
+                  <SortableTableHeader
+                    key={settingsAIAgentTableMetadataField.fieldName}
+                    fieldName={settingsAIAgentTableMetadataField.fieldName}
+                    label={t(settingsAIAgentTableMetadataField.fieldLabel)}
+                    tableId={SETTINGS_AI_AGENT_TABLE_METADATA.tableId}
+                    align={settingsAIAgentTableMetadataField.align}
+                    initialSort={SETTINGS_AI_AGENT_TABLE_METADATA.initialSort}
+                  />
+                ),
+              )}
+              <TableHeader />
+            </TableRow>
+          </StyledTableHeaderRowContainer>
+          {loading &&
+            Array.from({ length: 3 }).map((_, index) => (
+              <Skeleton height={32} borderRadius={4} key={index} />
+            ))}
+          {filteredAgents.map((agent) => (
+            <SettingsAIAgentTableRow
+              key={agent.id}
+              agent={agent}
+              action={
+                <IconChevronRight
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.sm}
+                />
+              }
+              link={getSettingsPath(SettingsPath.AIAgentDetail, {
+                agentId: agent.id,
+              })}
+            />
           ))}
-        {filteredAgents.map((agent) => (
-          <SettingsAIAgentTableRow
-            key={agent.id}
-            agent={agent}
-            action={
-              <IconChevronRight
-                size={theme.icon.size.md}
-                stroke={theme.icon.stroke.sm}
-              />
-            }
-            link={getSettingsPath(SettingsPath.AIAgentDetail, {
-              agentId: agent.id,
-            })}
-          />
-        ))}
-      </StyledTable>
+        </Table>
+      </StyledTableContainer>
     </>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentLogsTab.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentLogsTab.tsx
index 78b76875fe..b0ce089115 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentLogsTab.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentLogsTab.tsx
@@ -25,39 +25,14 @@ import {
   useGetAgentTurnsQuery,
 } from '~/generated-metadata/graphql';
 
-const StyledTable = styled(Table)`
+const StyledTableContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledTableHeaderRow = styled(TableRow)`
-  grid-template-columns: 140px 80px 1fr 40px;
+const StyledTableHeaderRowContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 140px 80px 1fr 40px;
-`;
-
-const StyledScoreCell = styled(TableCell)`
-  align-items: center;
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledDateCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
-const StyledInputCell = styled(TableCell)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const StyledActionCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[2]};
-`;
-
 type SettingsAgentLogsTabProps = {
   agentId: string;
 };
@@ -164,17 +139,21 @@ export const SettingsAgentLogsTab = ({
 
   if (loading) {
     return (
-      <StyledTable>
-        <StyledTableHeaderRow>
-          <TableHeader>{t`Date`}</TableHeader>
-          <TableHeader>{t`Score`}</TableHeader>
-          <TableHeader>{t`Input`}</TableHeader>
-          <TableHeader />
-        </StyledTableHeaderRow>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <Skeleton height={48} borderRadius={4} key={index} />
-        ))}
-      </StyledTable>
+      <StyledTableContainer>
+        <Table>
+          <StyledTableHeaderRowContainer>
+            <TableRow gridTemplateColumns="140px 80px 1fr 40px">
+              <TableHeader>{t`Date`}</TableHeader>
+              <TableHeader>{t`Score`}</TableHeader>
+              <TableHeader>{t`Input`}</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </StyledTableHeaderRowContainer>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton height={48} borderRadius={4} key={index} />
+          ))}
+        </Table>
+      </StyledTableContainer>
     );
   }
 
@@ -195,65 +174,78 @@ export const SettingsAgentLogsTab = ({
   }
 
   return (
-    <StyledTable>
-      <StyledTableHeaderRow>
-        <TableHeader>{t`Date`}</TableHeader>
-        <TableHeader>{t`Score`}</TableHeader>
-        <TableHeader>{t`Input`}</TableHeader>
-        <TableHeader />
-      </StyledTableHeaderRow>
-      {turns.map((turn: any) => {
-        const latestEvaluation = getLatestEvaluation(turn.evaluations);
-        const userInput = getUserMessageInput(turn.messages);
+    <StyledTableContainer>
+      <Table>
+        <StyledTableHeaderRowContainer>
+          <TableRow gridTemplateColumns="140px 80px 1fr 40px">
+            <TableHeader>{t`Date`}</TableHeader>
+            <TableHeader>{t`Score`}</TableHeader>
+            <TableHeader>{t`Input`}</TableHeader>
+            <TableHeader />
+          </TableRow>
+        </StyledTableHeaderRowContainer>
+        {turns.map((turn: any) => {
+          const latestEvaluation = getLatestEvaluation(turn.evaluations);
+          const userInput = getUserMessageInput(turn.messages);
 
-        return (
-          <StyledTableRow key={turn.id}>
-            <StyledDateCell>
-              {new Date(turn.createdAt).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-              })}
-            </StyledDateCell>
-            <StyledScoreCell>
-              {latestEvaluation ? (
-                <Status
-                  color={getScoreColor(latestEvaluation.score)}
-                  text={`${latestEvaluation.score}`}
-                />
-              ) : evaluatingTurnIds.has(turn.id) ||
-                backgroundEvaluatingTurnIds.has(turn.id) ? (
-                <Status color="blue" text={t`Evaluating`} isLoaderVisible />
-              ) : (
-                <Button
-                  size="small"
-                  variant="secondary"
-                  onClick={() => handleEvaluateTurn(turn.id)}
-                  disabled={evaluating}
-                  title={t`Evaluate`}
-                />
-              )}
-            </StyledScoreCell>
-            <StyledInputCell>{userInput || t`No input`}</StyledInputCell>
-            <StyledActionCell>
-              {latestEvaluation && (
-                <UndecoratedLink
-                  to={getSettingsPath(SettingsPath.AIAgentTurnDetail)
-                    .replace(':agentId', agentId)
-                    .replace(':turnId', turn.id)}
-                >
-                  <LightIconButton
-                    Icon={IconChevronRight}
-                    title={t`View all evaluations`}
-                    accent="tertiary"
+          return (
+            <TableRow key={turn.id} gridTemplateColumns="140px 80px 1fr 40px">
+              <TableCell color={themeCssVariables.font.color.tertiary}>
+                {new Date(turn.createdAt).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </TableCell>
+              <TableCell gap={themeCssVariables.spacing[2]}>
+                {latestEvaluation ? (
+                  <Status
+                    color={getScoreColor(latestEvaluation.score)}
+                    text={`${latestEvaluation.score}`}
                   />
-                </UndecoratedLink>
-              )}
-            </StyledActionCell>
-          </StyledTableRow>
-        );
-      })}
-    </StyledTable>
+                ) : evaluatingTurnIds.has(turn.id) ||
+                  backgroundEvaluatingTurnIds.has(turn.id) ? (
+                  <Status color="blue" text={t`Evaluating`} isLoaderVisible />
+                ) : (
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    onClick={() => handleEvaluateTurn(turn.id)}
+                    disabled={evaluating}
+                    title={t`Evaluate`}
+                  />
+                )}
+              </TableCell>
+              <TableCell
+                overflow="hidden"
+                textOverflow="ellipsis"
+                whiteSpace="nowrap"
+              >
+                {userInput || t`No input`}
+              </TableCell>
+              <TableCell
+                align="right"
+                padding={`0 ${themeCssVariables.spacing[2]} 0 0`}
+              >
+                {latestEvaluation && (
+                  <UndecoratedLink
+                    to={getSettingsPath(SettingsPath.AIAgentTurnDetail)
+                      .replace(':agentId', agentId)
+                      .replace(':turnId', turn.id)}
+                  >
+                    <LightIconButton
+                      Icon={IconChevronRight}
+                      title={t`View all evaluations`}
+                      accent="tertiary"
+                    />
+                  </UndecoratedLink>
+                )}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </Table>
+    </StyledTableContainer>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsSystemToolTableRow.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsSystemToolTableRow.tsx
index db23666a39..e95d7f6c9c 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsSystemToolTableRow.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsSystemToolTableRow.tsx
@@ -41,21 +41,25 @@ export type SettingsSystemToolTableRowProps = {
   tool: SystemTool;
 };
 
-export const StyledSystemToolTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 100px 36px;
-  opacity: 0.7;
+const StyledSystemToolTableRowContainer = styled.div`
+  > div,
+  > a {
+    opacity: 0.7;
 
-  &[data-clickable='true']:hover {
-    opacity: 0.85;
+    &[data-clickable='true']:hover {
+      opacity: 0.85;
+    }
   }
 `;
 
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-  overflow: hidden;
-`;
+export const StyledSystemToolTableRow = (
+  props: React.ComponentProps<typeof TableRow>,
+) => (
+  <StyledSystemToolTableRowContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <TableRow gridTemplateColumns="1fr 100px 36px" {...props} />
+  </StyledSystemToolTableRowContainer>
+);
 
 const StyledIconContainer = styled.div`
   align-items: center;
@@ -63,11 +67,6 @@ const StyledIconContainer = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledActionTableCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[2]};
-`;
-
 const StyledExpandableContent = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   border-top: 1px solid ${themeCssVariables.border.color.light};
@@ -134,22 +133,30 @@ export const SettingsSystemToolTableRow = ({
         onClick={handleRowClick}
         isClickable
       >
-        <StyledNameTableCell>
+        <TableCell
+          color={themeCssVariables.font.color.primary}
+          gap={themeCssVariables.spacing[2]}
+          minWidth="0"
+          overflow="hidden"
+        >
           <StyledIconContainer>
             <Icon size={16} />
           </StyledIconContainer>
           <OverflowingTextWithTooltip text={tool.name} />
-        </StyledNameTableCell>
+        </TableCell>
         <TableCell>
           <SettingsItemTypeTag item={{ isCustom: false }} />
         </TableCell>
-        <StyledActionTableCell>
+        <TableCell
+          align="right"
+          padding={`0 ${themeCssVariables.spacing[2]} 0 0`}
+        >
           {isExpanded ? (
             <IconChevronDown size={16} />
           ) : (
             <IconChevronRight size={16} />
           )}
-        </StyledActionTableCell>
+        </TableCell>
       </StyledSystemToolTableRow>
 
       <AnimatedExpandableContainer isExpanded={isExpanded} mode="fit-content">
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolTableRow.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolTableRow.tsx
index 9e03ae886d..9b82149e22 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolTableRow.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolTableRow.tsx
@@ -19,16 +19,7 @@ export type SettingsToolTableRowProps = {
   link?: string;
 };
 
-export const StyledToolTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 100px 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-  overflow: hidden;
-`;
+export const TOOL_TABLE_ROW_GRID_TEMPLATE_COLUMNS = '1fr 100px 36px';
 
 const StyledIconContainer = styled.div`
   align-items: center;
@@ -36,30 +27,38 @@ const StyledIconContainer = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledActionTableCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[2]};
-`;
-
 export const SettingsToolTableRow = ({
   tool,
   action,
   link,
 }: SettingsToolTableRowProps) => {
   return (
-    <StyledToolTableRow to={link}>
-      <StyledNameTableCell>
+    <TableRow
+      gridTemplateColumns={TOOL_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      to={link}
+    >
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+        minWidth="0"
+        overflow="hidden"
+      >
         <StyledIconContainer>
           <IconCode size={16} />
         </StyledIconContainer>
         <OverflowingTextWithTooltip text={tool.name} />
-      </StyledNameTableCell>
+      </TableCell>
       <TableCell>
         <SettingsItemTypeTag
           item={{ isCustom: true, applicationId: tool.applicationId }}
         />
       </TableCell>
-      <StyledActionTableCell>{action}</StyledActionTableCell>
-    </StyledToolTableRow>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[2]} 0 0`}
+      >
+        {action}
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
index 5214c5e6d1..6467a5e5fb 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
@@ -26,9 +26,10 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 import { SettingsSystemToolTableRow } from './SettingsSystemToolTableRow';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  TOOL_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsToolTableRow,
-  StyledToolTableRow,
 } from './SettingsToolTableRow';
 
 const StyledSearchAndFilterContainer = styled.div`
@@ -38,12 +39,12 @@ const StyledSearchAndFilterContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
   width: 100%;
 `;
 
-const StyledTableHeaderRow = styled(StyledToolTableRow)`
+const StyledTableHeaderRowContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
@@ -171,20 +172,26 @@ export const SettingsToolsTable = () => {
           description={t`Custom tools created in your workspace`}
         />
         <StyledSearchAndFilterContainer>
-          <StyledSearchInput
-            instanceId="custom-tool-table-search"
-            LeftIcon={IconSearch}
-            placeholder={t`Search a custom tool...`}
-            value={customSearchTerm}
-            onChange={setCustomSearchTerm}
-          />
+          <StyledSearchInputContainer>
+            <SettingsTextInput
+              instanceId="custom-tool-table-search"
+              LeftIcon={IconSearch}
+              placeholder={t`Search a custom tool...`}
+              value={customSearchTerm}
+              onChange={setCustomSearchTerm}
+            />
+          </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>
         <Table>
-          <StyledTableHeaderRow>
-            <TableHeader>{t`Name`}</TableHeader>
-            <TableHeader align="right">{t`Type`}</TableHeader>
-            <TableHeader />
-          </StyledTableHeaderRow>
+          <StyledTableHeaderRowContainer>
+            <TableRow
+              gridTemplateColumns={TOOL_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+            >
+              <TableHeader>{t`Name`}</TableHeader>
+              <TableHeader align="right">{t`Type`}</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </StyledTableHeaderRowContainer>
           {showSkeleton
             ? Array.from({ length: 3 }).map((_, index) => (
                 <Skeleton height={32} borderRadius={4} key={index} />
@@ -222,20 +229,26 @@ export const SettingsToolsTable = () => {
           description={t`Standard tools available to AI agents`}
         />
         <StyledSearchAndFilterContainer>
-          <StyledSearchInput
-            instanceId="builtin-tool-table-search"
-            LeftIcon={IconSearch}
-            placeholder={t`Search a built-in tool...`}
-            value={builtInSearchTerm}
-            onChange={setBuiltInSearchTerm}
-          />
+          <StyledSearchInputContainer>
+            <SettingsTextInput
+              instanceId="builtin-tool-table-search"
+              LeftIcon={IconSearch}
+              placeholder={t`Search a built-in tool...`}
+              value={builtInSearchTerm}
+              onChange={setBuiltInSearchTerm}
+            />
+          </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>
         <Table>
-          <StyledTableHeaderRow>
-            <TableHeader>{t`Name`}</TableHeader>
-            <TableHeader align="right">{t`Type`}</TableHeader>
-            <TableHeader />
-          </StyledTableHeaderRow>
+          <StyledTableHeaderRowContainer>
+            <TableRow
+              gridTemplateColumns={TOOL_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+            >
+              <TableHeader>{t`Name`}</TableHeader>
+              <TableHeader align="right">{t`Type`}</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </StyledTableHeaderRowContainer>
           {filteredSystemTools.map((systemTool) => (
             <SettingsSystemToolTableRow
               key={systemTool.name}
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsAppModalLayout.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsAppModalLayout.tsx
index ada60e5c87..dba87f6715 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsAppModalLayout.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsAppModalLayout.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@linaria/react';
+import React from 'react';
 
 import { ModalStatefulWrapper } from '@/ui/layout/modal/components/ModalStatefulWrapper';
 import { Button } from 'twenty-ui/input';
@@ -79,16 +80,36 @@ export const StyledAppModal = (props: StyledAppModalProps) => (
   </ModalWrapper>
 );
 
-export const StyledAppModalButton = styled(Button)`
+const StyledAppModalButtonContainer = styled.div`
   box-sizing: border-box;
+  display: flex;
   justify-content: center;
   margin-top: ${themeCssVariables.spacing[2]};
 `;
 
+export const StyledAppModalButton = (
+  props: React.ComponentProps<typeof Button>,
+) => (
+  <StyledAppModalButtonContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <Button {...props} />
+  </StyledAppModalButtonContainer>
+);
+
 export const StyledAppModalTitle = styled.div`
   text-align: center;
 `;
 
-export const StyledAppModalSection = styled(Section)`
+const StyledAppModalSectionContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[6]};
 `;
+
+export const StyledAppModalSection = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof Section>) => (
+  <StyledAppModalSectionContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <Section {...props}>{children}</Section>
+  </StyledAppModalSectionContainer>
+);
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx
index a46c7247e1..9d5ded2950 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx
@@ -36,8 +36,10 @@ export type ApplicationDataTableRow = {
 
 const MAIN_ROW_GRID_COLUMNS = `180px 1fr ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} 36px`;
 
-const StyledEmptyHeader = styled(TableHeader)`
-  min-width: 0;
+const StyledEmptyHeaderContainer = styled.div`
+  > div {
+    min-width: 0;
+  }
 `;
 
 const StyledSearchInputContainer = styled.div`
@@ -129,7 +131,9 @@ export const SettingsApplicationDataTable = ({
             <TableHeader>{t`Name`}</TableHeader>
             <TableHeader>{t`App`}</TableHeader>
             <TableHeader align="right">{t`Fields`}</TableHeader>
-            <StyledEmptyHeader />
+            <StyledEmptyHeaderContainer>
+              <TableHeader />
+            </StyledEmptyHeaderContainer>
           </TableRow>
           {shouldDisplayObjects && (
             <TableSection title={t`Objects`}>
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx
index 26b5929fa6..136172a285 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx
@@ -11,9 +11,9 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { TableSubRow } from '@/ui/layout/table/components/TableSubRow';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display';
-import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { type ApplicationDataTableRow } from '~/pages/settings/applications/components/SettingsApplicationDataTable';
@@ -25,10 +25,6 @@ const StyledFieldDivider = styled.div`
   border-top: 1px solid ${themeCssVariables.border.color.light};
 `;
 
-const StyledFieldNameTableCell = styled(StyledNameTableCell)`
-  color: ${themeCssVariables.font.color.secondary};
-`;
-
 export const SettingsApplicationDataTableRow = ({
   row,
   isExpanded,
@@ -96,7 +92,10 @@ export const SettingsApplicationDataTableRow = ({
               key={field.key}
               gridAutoColumns={FIELD_SUB_ROW_GRID_COLUMNS}
             >
-              <StyledFieldNameTableCell>
+              <TableCell
+                color={themeCssVariables.font.color.secondary}
+                gap={themeCssVariables.spacing[2]}
+              >
                 {isDefined(FieldIcon) && (
                   <FieldIcon
                     size={theme.icon.size.md}
@@ -104,7 +103,7 @@ export const SettingsApplicationDataTableRow = ({
                   />
                 )}
                 {field.label}
-              </StyledFieldNameTableCell>
+              </TableCell>
               <TableCell>
                 <SettingsObjectFieldDataType
                   value={field.type as SettingsFieldType}
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationNameDescriptionTable.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationNameDescriptionTable.tsx
index 3bcc964a05..4e3d233e82 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationNameDescriptionTable.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationNameDescriptionTable.tsx
@@ -3,7 +3,6 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { Table } from '@/ui/layout/table/components/Table';
-import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
@@ -14,11 +13,6 @@ type SettingsApplicationNameDescriptionTableItem = {
   description?: string | null;
 };
 
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
 export const SettingsApplicationNameDescriptionTable = ({
   title,
   description,
@@ -45,7 +39,12 @@ export const SettingsApplicationNameDescriptionTable = ({
         <TableSection title={sectionTitle}>
           {items.map((item) => (
             <TableRow key={item.name} gridAutoColumns="180px 1fr">
-              <StyledNameTableCell>{item.name}</StyledNameTableCell>
+              <TableCell
+                color={themeCssVariables.font.color.primary}
+                gap={themeCssVariables.spacing[2]}
+              >
+                {item.name}
+              </TableCell>
               <TableCell>{item.description ?? ''}</TableCell>
             </TableRow>
           ))}
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationTableRow.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationTableRow.tsx
index 129de46833..fd297e8cbb 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationTableRow.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationTableRow.tsx
@@ -1,4 +1,3 @@
-import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 
 import { t } from '@lingui/core/macro';
@@ -16,28 +15,8 @@ export type SettingsApplicationTableRowProps = {
   link?: string;
 };
 
-export const StyledApplicationTableRow = styled(TableRow)`
-  grid-template-columns: 164px minmax(0, 1fr) 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.secondary};
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-  overflow: hidden;
-`;
-
-const StyledActionTableCell = styled(TableCell)`
-  justify-content: flex-end;
-  padding-right: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledDescriptionCell = styled(TableCell)`
-  display: flex;
-  align-items: center;
-  gap: ${themeCssVariables.spacing[2]};
-  min-width: 0;
-`;
+export const APPLICATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
+  '164px minmax(0, 1fr) 36px';
 
 export const SettingsApplicationTableRow = ({
   action,
@@ -46,17 +25,31 @@ export const SettingsApplicationTableRow = ({
   link,
 }: SettingsApplicationTableRowProps) => {
   return (
-    <StyledApplicationTableRow key={application.id} to={link}>
-      <StyledNameTableCell>
+    <TableRow
+      gridTemplateColumns={APPLICATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+      key={application.id}
+      to={link}
+    >
+      <TableCell
+        color={themeCssVariables.font.color.secondary}
+        gap={themeCssVariables.spacing[2]}
+        minWidth="0"
+        overflow="hidden"
+      >
         <OverflowingTextWithTooltip text={application.name} />
-      </StyledNameTableCell>
-      <StyledDescriptionCell>
+      </TableCell>
+      <TableCell gap={themeCssVariables.spacing[2]} minWidth="0">
         <OverflowingTextWithTooltip text={application.description} />
         {hasUpdate === true && (
           <Tag color="blue" text={t`Update`} weight="medium" />
         )}
-      </StyledDescriptionCell>
-      <StyledActionTableCell>{action}</StyledActionTableCell>
-    </StyledApplicationTableRow>
+      </TableCell>
+      <TableCell
+        align="right"
+        padding={`0 ${themeCssVariables.spacing[2]} 0 0`}
+      >
+        {action}
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationsTable.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationsTable.tsx
index 7669a2b3ef..a1356838ca 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationsTable.tsx
@@ -1,13 +1,14 @@
 import { H2Title, IconChevronRight, IconSearch } from 'twenty-ui/display';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { getSettingsPath, isDefined } from 'twenty-shared/utils';
 import { SettingsPath } from 'twenty-shared/types';
 import { useLingui } from '@lingui/react/macro';
 import { Table } from '@/ui/layout/table/components/Table';
 import { styled } from '@linaria/react';
 import {
+  APPLICATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsApplicationTableRow,
-  StyledApplicationTableRow,
 } from '~/pages/settings/applications/components/SettingsApplicationTableRow';
 import { useContext, useMemo, useState } from 'react';
 import { type ApplicationWithoutRelation } from '~/pages/settings/applications/types/applicationWithoutRelation';
@@ -17,15 +18,15 @@ import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { AppRegistrationSourceType } from '~/generated-metadata/graphql';
 
-const StyledTable = styled(Table)`
+const StyledTableContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledTableHeaderRow = styled(StyledApplicationTableRow)`
+const StyledTableHeaderRowContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
   width: 100%;
 `;
@@ -56,52 +57,60 @@ export const SettingsApplicationsTable = ({
         title={t`Installed applications`}
         description={t`List installed applications. Use filter to search for a specific application`}
       />
-      <StyledSearchInput
-        instanceId="env-var-search"
-        LeftIcon={IconSearch}
-        placeholder={t`Search an application`}
-        value={searchTerm}
-        onChange={setSearchTerm}
-      />
-      <StyledTable>
-        <StyledTableHeaderRow>
-          <TableHeader> {t`Name`}</TableHeader>
-          <TableHeader> {t`Description`}</TableHeader>
-          <TableHeader> {''}</TableHeader>
-          <TableHeader />
-        </StyledTableHeaderRow>
-        {filteredApplications.map((application) => {
-          const isNpmApp =
-            application.applicationRegistration?.sourceType ===
-            AppRegistrationSourceType.NPM;
+      <StyledSearchInputContainer>
+        <SettingsTextInput
+          instanceId="env-var-search"
+          LeftIcon={IconSearch}
+          placeholder={t`Search an application`}
+          value={searchTerm}
+          onChange={setSearchTerm}
+        />
+      </StyledSearchInputContainer>
+      <StyledTableContainer>
+        <Table>
+          <StyledTableHeaderRowContainer>
+            <TableRow
+              gridTemplateColumns={APPLICATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+            >
+              <TableHeader> {t`Name`}</TableHeader>
+              <TableHeader> {t`Description`}</TableHeader>
+              <TableHeader> {''}</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </StyledTableHeaderRowContainer>
+          {filteredApplications.map((application) => {
+            const isNpmApp =
+              application.applicationRegistration?.sourceType ===
+              AppRegistrationSourceType.NPM;
 
-          const latestVersion =
-            application.applicationRegistration?.latestAvailableVersion;
+            const latestVersion =
+              application.applicationRegistration?.latestAvailableVersion;
 
-          const hasUpdate =
-            isNpmApp &&
-            isDefined(latestVersion) &&
-            isDefined(application.version) &&
-            isNewerSemver(latestVersion, application.version);
+            const hasUpdate =
+              isNpmApp &&
+              isDefined(latestVersion) &&
+              isDefined(application.version) &&
+              isNewerSemver(latestVersion, application.version);
 
-          return (
-            <SettingsApplicationTableRow
-              key={application.id}
-              application={application}
-              hasUpdate={hasUpdate}
-              action={
-                <IconChevronRight
-                  size={theme.icon.size.md}
-                  stroke={theme.icon.stroke.sm}
-                />
-              }
-              link={getSettingsPath(SettingsPath.ApplicationDetail, {
-                applicationId: application.id,
-              })}
-            />
-          );
-        })}
-      </StyledTable>
+            return (
+              <SettingsApplicationTableRow
+                key={application.id}
+                application={application}
+                hasUpdate={hasUpdate}
+                action={
+                  <IconChevronRight
+                    size={theme.icon.size.md}
+                    stroke={theme.icon.stroke.sm}
+                  />
+                }
+                link={getSettingsPath(SettingsPath.ApplicationDetail, {
+                  applicationId: application.id,
+                })}
+              />
+            );
+          })}
+        </Table>
+      </StyledTableContainer>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsAvailableApplicationCard.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsAvailableApplicationCard.tsx
index 120882c517..767deda550 100644
--- a/packages/twenty-front/src/pages/settings/applications/components/SettingsAvailableApplicationCard.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsAvailableApplicationCard.tsx
@@ -1,6 +1,5 @@
 import {
   StyledSettingsCardContent,
-  StyledSettingsCardDescription,
   StyledSettingsCardThirdLine,
   StyledSettingsCardTitle,
 } from '@/settings/components/SettingsOptions/SettingsCardContentBase';
@@ -11,53 +10,69 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { Avatar } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type MarketplaceApp } from '~/generated-metadata/graphql';
 
 type SettingsAvailableApplicationCardProps = {
   application: MarketplaceApp;
 };
 
-const StyledLink = styled(Link)`
-  display: flex;
-  height: 100%;
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    display: flex;
+    height: 100%;
+    text-decoration: none;
+  }
 `;
 
-const StyledDescription = styled(StyledSettingsCardDescription)`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
+const StyledDescription = styled.div`
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: ${themeCssVariables.font.color.secondary};
+  display: -webkit-box;
+
+  a {
+    pointer-events: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  font-size: ${themeCssVariables.font.size.sm};
+  line-height: 1.5;
+  overflow: hidden;
 `;
 
 export const SettingsAvailableApplicationCard = ({
   application,
 }: SettingsAvailableApplicationCardProps) => {
   return (
-    <StyledLink
-      to={getSettingsPath(SettingsPath.AvailableApplicationDetail, {
-        availableApplicationId: application.id,
-      })}
-    >
-      <Card rounded fullWidth>
-        <StyledSettingsCardContent alignItems="flex-start" fullHeight>
-          <Avatar
-            avatarUrl={application.logo || null}
-            placeholder={application.name}
-            placeholderColorSeed={application.name}
-            size="lg"
-            type="squared"
-          />
-          <div>
-            <StyledSettingsCardTitle>
-              {application.name}
-            </StyledSettingsCardTitle>
-            <StyledDescription>{application.description}</StyledDescription>
-            <StyledSettingsCardThirdLine>
-              {t`by {author}`} {application.author}
-            </StyledSettingsCardThirdLine>
-          </div>
-        </StyledSettingsCardContent>
-      </Card>
-    </StyledLink>
+    <StyledLinkContainer>
+      <Link
+        to={getSettingsPath(SettingsPath.AvailableApplicationDetail, {
+          availableApplicationId: application.id,
+        })}
+      >
+        <Card rounded fullWidth>
+          <StyledSettingsCardContent alignItems="flex-start" fullHeight>
+            <Avatar
+              avatarUrl={application.logo || null}
+              placeholder={application.name}
+              placeholderColorSeed={application.name}
+              size="lg"
+              type="squared"
+            />
+            <div>
+              <StyledSettingsCardTitle>
+                {application.name}
+              </StyledSettingsCardTitle>
+              <StyledDescription>{application.description}</StyledDescription>
+              <StyledSettingsCardThirdLine>
+                {t`by {author}`} {application.author}
+              </StyledSettingsCardThirdLine>
+            </div>
+          </StyledSettingsCardContent>
+        </Card>
+      </Link>
+    </StyledLinkContainer>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
index 0930f58391..46e888740f 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
@@ -1,8 +1,9 @@
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
   SettingsObjectFieldItemTableRow,
-  StyledObjectFieldTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
@@ -43,7 +44,7 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
@@ -163,13 +164,15 @@ export const SettingsObjectFieldTable = ({
   return (
     <>
       <StyledSearchAndFilterContainer>
-        <StyledSearchInput
-          instanceId="object-field-table-search"
-          LeftIcon={IconSearch}
-          placeholder={t`Search a field...`}
-          value={searchTerm}
-          onChange={setSearchTerm}
-        />
+        <StyledSearchInputContainer>
+          <SettingsTextInput
+            instanceId="object-field-table-search"
+            LeftIcon={IconSearch}
+            placeholder={t`Search a field...`}
+            value={searchTerm}
+            onChange={setSearchTerm}
+          />
+        </StyledSearchInputContainer>
         <Dropdown
           dropdownId="settings-fields-filter-dropdown"
           dropdownPlacement="bottom-end"
@@ -210,7 +213,9 @@ export const SettingsObjectFieldTable = ({
         />
       </StyledSearchAndFilterContainer>
       <Table>
-        <StyledObjectFieldTableRow>
+        <TableRow
+          gridTemplateColumns={OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+        >
           {tableMetadata.fields.map((item) => (
             <SortableTableHeader
               key={item.fieldName}
@@ -221,7 +226,7 @@ export const SettingsObjectFieldTable = ({
             />
           ))}
           <TableHeader></TableHeader>
-        </StyledObjectFieldTableRow>
+        </TableRow>
         {filteredItems.map((objectSettingsDetailItem) => {
           const status = objectSettingsDetailItem.fieldMetadataItem.isActive
             ? 'active'
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
index e0b063119e..e636651864 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
@@ -20,11 +20,9 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type SettingsObjectIndexesTableItem } from '~/pages/settings/data-model/types/SettingsObjectIndexesTableItem';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 
-export const StyledObjectIndexTableRow = styled(TableRow)`
-  grid-template-columns: 350px 70px 80px;
-`;
+const OBJECT_INDEX_TABLE_ROW_GRID_TEMPLATE_COLUMNS = '350px 70px 80px';
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
   width: 100%;
 `;
@@ -120,15 +118,19 @@ export const SettingsObjectIndexTable = ({
 
   return (
     <>
-      <StyledSearchInput
-        instanceId="object-index-table-search"
-        LeftIcon={IconSearch}
-        placeholder={t`Search an index...`}
-        value={searchTerm}
-        onChange={setSearchTerm}
-      />
+      <StyledSearchInputContainer>
+        <SettingsTextInput
+          instanceId="object-index-table-search"
+          LeftIcon={IconSearch}
+          placeholder={t`Search an index...`}
+          value={searchTerm}
+          onChange={setSearchTerm}
+        />
+      </StyledSearchInputContainer>
       <Table>
-        <StyledObjectIndexTableRow>
+        <TableRow
+          gridTemplateColumns={OBJECT_INDEX_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+        >
           {tableMetadata.fields.map((item) => (
             <SortableTableHeader
               key={item.fieldName}
@@ -140,10 +142,13 @@ export const SettingsObjectIndexTable = ({
             />
           ))}
           <TableHeader></TableHeader>
-        </StyledObjectIndexTableRow>
+        </TableRow>
         {isNonEmptyArray(filteredActiveItems) &&
           filteredActiveItems.map((objectSettingsIndex) => (
-            <StyledObjectIndexTableRow key={objectSettingsIndex.name}>
+            <TableRow
+              gridTemplateColumns={OBJECT_INDEX_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+              key={objectSettingsIndex.name}
+            >
               <TableCell>{objectSettingsIndex.indexFields}</TableCell>
               <TableCell>
                 {objectSettingsIndex.isUnique ? (
@@ -153,7 +158,7 @@ export const SettingsObjectIndexTable = ({
                 )}
               </TableCell>
               <TableCell>{objectSettingsIndex.indexType}</TableCell>
-            </StyledObjectIndexTableRow>
+            </TableRow>
           ))}
       </Table>
     </>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx
index 42c3b4e555..4c32b65ce5 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx
@@ -5,7 +5,8 @@ import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataI
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
 import { useCombinedGetTotalCount } from '@/object-record/multiple-objects/hooks/useCombinedGetTotalCount';
 import { SettingsObjectMetadataItemTableRow } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRow';
-import { StyledObjectTableRow } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
 import { SettingsObjectInactiveMenuDropDown } from '@/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown';
 import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -30,7 +31,7 @@ import { GET_SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/
 import type { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 
-const StyledIconChevronRight = styled(IconChevronRight)`
+const StyledIconChevronRightContainer = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
 `;
 
@@ -170,7 +171,9 @@ export const SettingsObjectTable = ({
       )}
 
       <Table>
-        <StyledObjectTableRow>
+        <TableRow
+          gridTemplateColumns={SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+        >
           {GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map(
             (settingsObjectsTableMetadataField) => (
               <SortableTableHeader
@@ -184,7 +187,7 @@ export const SettingsObjectTable = ({
             ),
           )}
           <TableHeader></TableHeader>
-        </StyledObjectTableRow>
+        </TableRow>
         {filteredObjectSettingsItems.map((objectSettingsItem) => {
           const isActive = objectSettingsItem.objectMetadataItem.isActive;
 
@@ -195,10 +198,12 @@ export const SettingsObjectTable = ({
               totalObjectCount={objectSettingsItem.totalObjectCount}
               action={
                 isActive ? (
-                  <StyledIconChevronRight
-                    size={theme.icon.size.md}
-                    stroke={theme.icon.stroke.sm}
-                  />
+                  <StyledIconChevronRightContainer>
+                    <IconChevronRight
+                      size={theme.icon.size.md}
+                      stroke={theme.icon.stroke.sm}
+                    />
+                  </StyledIconChevronRightContainer>
                 ) : (
                   <SettingsObjectInactiveMenuDropDown
                     isCustomObject={
diff --git a/packages/twenty-front/src/pages/settings/domains/SettingsDomains.tsx b/packages/twenty-front/src/pages/settings/domains/SettingsDomains.tsx
index 80dd0a4818..713e0fa2c6 100644
--- a/packages/twenty-front/src/pages/settings/domains/SettingsDomains.tsx
+++ b/packages/twenty-front/src/pages/settings/domains/SettingsDomains.tsx
@@ -23,7 +23,7 @@ const StyledMainContent = styled.div`
   min-height: 200px;
 `;
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   flex-shrink: 0;
 `;
 
@@ -51,37 +51,45 @@ export const SettingsDomains = () => {
     >
       <SettingsPageContainer>
         <StyledMainContent>
-          <StyledSection>
-            <H2Title
-              title={t`Workspace Domain`}
-              description={t`Edit your subdomain name or set a custom domain.`}
-            />
-            <SettingsWorkspaceDomainCard />
-          </StyledSection>
-          <StyledSection>
-            <H2Title
-              title={t`Approved Domains`}
-              description={t`Anyone with an email address at these domains is allowed to sign up for this workspace.`}
-            />
-            <SettingsApprovedAccessDomainsListCard />
-          </StyledSection>
-          {isEmailingDomainsEnabled && (
-            <StyledSection>
+          <StyledSectionContainer>
+            <Section>
               <H2Title
-                title={t`Emailing Domains`}
-                description={t`Configure and verify domains for emailing from this workspace.`}
+                title={t`Workspace Domain`}
+                description={t`Edit your subdomain name or set a custom domain.`}
               />
-              <SettingsEmailingDomains />
-            </StyledSection>
+              <SettingsWorkspaceDomainCard />
+            </Section>
+          </StyledSectionContainer>
+          <StyledSectionContainer>
+            <Section>
+              <H2Title
+                title={t`Approved Domains`}
+                description={t`Anyone with an email address at these domains is allowed to sign up for this workspace.`}
+              />
+              <SettingsApprovedAccessDomainsListCard />
+            </Section>
+          </StyledSectionContainer>
+          {isEmailingDomainsEnabled && (
+            <StyledSectionContainer>
+              <Section>
+                <H2Title
+                  title={t`Emailing Domains`}
+                  description={t`Configure and verify domains for emailing from this workspace.`}
+                />
+                <SettingsEmailingDomains />
+              </Section>
+            </StyledSectionContainer>
           )}
           {isPublicDomainEnabled && (
-            <StyledSection>
-              <H2Title
-                title={t`Public Domains`}
-                description={t`Provision a complete and secure hosting environment on these domains.`}
-              />
-              <SettingsPublicDomainsListCard />
-            </StyledSection>
+            <StyledSectionContainer>
+              <Section>
+                <H2Title
+                  title={t`Public Domains`}
+                  description={t`Provision a complete and secure hosting environment on these domains.`}
+                />
+                <SettingsPublicDomainsListCard />
+              </Section>
+            </StyledSectionContainer>
           )}
         </StyledMainContent>
       </SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomains.tsx b/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomains.tsx
index e708fa8681..36f3ffba30 100644
--- a/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomains.tsx
+++ b/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomains.tsx
@@ -17,8 +17,10 @@ import { getColorByEmailingDomainStatus } from '~/pages/settings/emailing-domain
 import { getTextByEmailingDomainStatus } from '~/pages/settings/emailing-domains/utils/getEmailingDomainStatusText';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    text-decoration: none;
+  }
 `;
 
 export const SettingsEmailingDomains = () => {
@@ -38,9 +40,11 @@ export const SettingsEmailingDomains = () => {
   };
 
   return isLoading || !emailingDomains.length ? (
-    <StyledLink to={getSettingsPath(SettingsPath.NewEmailingDomain)}>
-      <SettingsCard title={t`Add Emailing Domain`} Icon={<IconMail />} />
-    </StyledLink>
+    <StyledLinkContainer>
+      <Link to={getSettingsPath(SettingsPath.NewEmailingDomain)}>
+        <SettingsCard title={t`Add Emailing Domain`} Icon={<IconMail />} />
+      </Link>
+    </StyledLinkContainer>
   ) : (
     <>
       <SettingsListCard
diff --git a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
index e928328d46..69ac0e811e 100644
--- a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
@@ -66,9 +66,13 @@ const StyledExpiresInHeader = styled.span`
   white-space: nowrap;
 `;
 
-const StyledTable = styled(Table)<{ hasMoreRows?: boolean }>`
-  border-bottom: ${({ hasMoreRows }) =>
-    hasMoreRows ? 'none' : `1px solid ${themeCssVariables.border.color.light}`};
+const StyledTableContainer = styled.div<{ hasMoreRows?: boolean }>`
+  > div {
+    border-bottom: ${({ hasMoreRows }) =>
+      hasMoreRows
+        ? 'none'
+        : `1px solid ${themeCssVariables.border.color.light}`};
+  }
 `;
 
 const StyledIconWrapper = styled.div`
@@ -83,16 +87,11 @@ const StyledTextContainerWithEllipsis = styled.div`
   white-space: nowrap;
 `;
 
-const StyledInvitationTableCell = styled(TableCell)`
-  min-width: 0;
-  overflow: hidden;
-`;
-
 const StyledSearchContainer = styled.div`
   padding-bottom: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   input {
     background: ${themeCssVariables.background.transparent.lighter};
     border: 1px solid ${themeCssVariables.border.color.medium};
@@ -104,10 +103,6 @@ const StyledTableRows = styled.div`
   padding-top: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledClickableTableRow = styled(TableRow)`
-  cursor: pointer;
-`;
-
 const StyledChevronWrapper = styled.div`
   align-items: center;
   color: ${themeCssVariables.font.color.secondary};
@@ -116,10 +111,6 @@ const StyledChevronWrapper = styled.div`
   width: 100%;
 `;
 
-const StyledNoMembers = styled(TableCell)`
-  color: ${themeCssVariables.font.color.tertiary};
-`;
-
 export const SettingsWorkspaceMembers = () => {
   const { theme } = useContext(ThemeContext);
   const { t } = useLingui();
@@ -294,92 +285,96 @@ export const SettingsWorkspaceMembers = () => {
             />
             <WorkspaceInviteTeam roles={roles} />
             {isNonEmptyArray(workspaceInvitations) && (
-              <StyledTable>
-                <TableRow
-                  gridAutoColumns="2fr 1fr 1fr 80px"
-                  mobileGridAutoColumns="2fr 1fr 1fr 72px"
-                >
-                  <TableHeader>
-                    <Trans>Email</Trans>
-                  </TableHeader>
-                  <TableHeader>
-                    <Trans>Role</Trans>
-                  </TableHeader>
-                  <TableHeader align="center">
-                    <StyledExpiresInHeader>
-                      <Trans>Expires in</Trans>
-                    </StyledExpiresInHeader>
-                  </TableHeader>
-                  <TableHeader></TableHeader>
-                </TableRow>
-                <StyledTableRows>
-                  {workspaceInvitations?.map((workspaceInvitation) => (
-                    <TableRow
-                      gridAutoColumns="2fr 1fr 1fr 80px"
-                      mobileGridAutoColumns="2fr 1fr 1fr 72px"
-                      key={workspaceInvitation.id}
-                    >
-                      <StyledInvitationTableCell>
-                        <StyledIconWrapper>
-                          <IconMail
-                            size={theme.icon.size.md}
-                            stroke={theme.icon.stroke.sm}
+              <StyledTableContainer>
+                <Table>
+                  <TableRow
+                    gridAutoColumns="2fr 1fr 1fr 80px"
+                    mobileGridAutoColumns="2fr 1fr 1fr 72px"
+                  >
+                    <TableHeader>
+                      <Trans>Email</Trans>
+                    </TableHeader>
+                    <TableHeader>
+                      <Trans>Role</Trans>
+                    </TableHeader>
+                    <TableHeader align="center">
+                      <StyledExpiresInHeader>
+                        <Trans>Expires in</Trans>
+                      </StyledExpiresInHeader>
+                    </TableHeader>
+                    <TableHeader></TableHeader>
+                  </TableRow>
+                  <StyledTableRows>
+                    {workspaceInvitations?.map((workspaceInvitation) => (
+                      <TableRow
+                        gridAutoColumns="2fr 1fr 1fr 80px"
+                        mobileGridAutoColumns="2fr 1fr 1fr 72px"
+                        key={workspaceInvitation.id}
+                      >
+                        <TableCell minWidth="0" overflow="hidden">
+                          <StyledIconWrapper>
+                            <IconMail
+                              size={theme.icon.size.md}
+                              stroke={theme.icon.stroke.sm}
+                            />
+                          </StyledIconWrapper>
+                          <StyledTextContainerWithEllipsis
+                            id={`invitation-email-${workspaceInvitation.id}`}
+                          >
+                            {workspaceInvitation.email}
+                          </StyledTextContainerWithEllipsis>
+                          <AppTooltip
+                            anchorSelect={`#invitation-email-${workspaceInvitation.id}`}
+                            content={workspaceInvitation.email}
+                            noArrow
+                            place="top"
+                            positionStrategy="fixed"
+                            delay={TooltipDelay.shortDelay}
                           />
-                        </StyledIconWrapper>
-                        <StyledTextContainerWithEllipsis
-                          id={`invitation-email-${workspaceInvitation.id}`}
-                        >
-                          {workspaceInvitation.email}
-                        </StyledTextContainerWithEllipsis>
-                        <AppTooltip
-                          anchorSelect={`#invitation-email-${workspaceInvitation.id}`}
-                          content={workspaceInvitation.email}
-                          noArrow
-                          place="top"
-                          positionStrategy="fixed"
-                          delay={TooltipDelay.shortDelay}
-                        />
-                      </StyledInvitationTableCell>
-                      <StyledInvitationTableCell>
-                        <StyledTextContainerWithEllipsis>
-                          {rolesById.get(workspaceInvitation.roleId ?? '')
-                            ?.label ?? t`Default role`}
-                        </StyledTextContainerWithEllipsis>
-                      </StyledInvitationTableCell>
-                      <TableCell align="center">
-                        <Status
-                          color="gray"
-                          text={getExpiresAtText(workspaceInvitation.expiresAt)}
-                        />
-                      </TableCell>
-                      <TableCell align="right">
-                        <StyledButtonContainer>
-                          <IconButton
-                            onClick={() => {
-                              handleResendWorkspaceInvitation(
-                                workspaceInvitation.id,
-                              );
-                            }}
-                            variant="tertiary"
-                            size="medium"
-                            Icon={IconReload}
+                        </TableCell>
+                        <TableCell minWidth="0" overflow="hidden">
+                          <StyledTextContainerWithEllipsis>
+                            {rolesById.get(workspaceInvitation.roleId ?? '')
+                              ?.label ?? t`Default role`}
+                          </StyledTextContainerWithEllipsis>
+                        </TableCell>
+                        <TableCell align="center">
+                          <Status
+                            color="gray"
+                            text={getExpiresAtText(
+                              workspaceInvitation.expiresAt,
+                            )}
                           />
-                          <IconButton
-                            onClick={() => {
-                              handleRemoveWorkspaceInvitation(
-                                workspaceInvitation.id,
-                              );
-                            }}
-                            variant="tertiary"
-                            size="medium"
-                            Icon={IconTrash}
-                          />
-                        </StyledButtonContainer>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </StyledTableRows>
-              </StyledTable>
+                        </TableCell>
+                        <TableCell align="right">
+                          <StyledButtonContainer>
+                            <IconButton
+                              onClick={() => {
+                                handleResendWorkspaceInvitation(
+                                  workspaceInvitation.id,
+                                );
+                              }}
+                              variant="tertiary"
+                              size="medium"
+                              Icon={IconReload}
+                            />
+                            <IconButton
+                              onClick={() => {
+                                handleRemoveWorkspaceInvitation(
+                                  workspaceInvitation.id,
+                                );
+                              }}
+                              variant="tertiary"
+                              size="medium"
+                              Icon={IconTrash}
+                            />
+                          </StyledButtonContainer>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </StyledTableRows>
+                </Table>
+              </StyledTableContainer>
             )}
           </Section>
           <Section>
@@ -388,107 +383,114 @@ export const SettingsWorkspaceMembers = () => {
               description={t`Manage the members of your workspace here`}
             />
             <StyledSearchContainer>
-              <StyledSearchInput
-                instanceId="workspace-members-search"
-                value={searchFilter}
-                onChange={handleSearchChange}
-                placeholder={t`Search a team member...`}
-                fullWidth
-                LeftIcon={IconSearch}
-                sizeVariant="lg"
-              />
+              <StyledSearchInputContainer>
+                <SettingsTextInput
+                  instanceId="workspace-members-search"
+                  value={searchFilter}
+                  onChange={handleSearchChange}
+                  placeholder={t`Search a team member...`}
+                  fullWidth
+                  LeftIcon={IconSearch}
+                  sizeVariant="lg"
+                />
+              </StyledSearchInputContainer>
             </StyledSearchContainer>
-            <StyledTable hasMoreRows={hasNextPage}>
-              <TableRow
-                gridAutoColumns="150px 1fr 40px"
-                mobileGridAutoColumns="100px 1fr 32px"
-              >
-                <TableHeader>
-                  <Trans>Name</Trans>
-                </TableHeader>
-                <TableHeader>
-                  <Trans>Email</Trans>
-                </TableHeader>
-                <TableHeader align="right"></TableHeader>
-              </TableRow>
-              <StyledTableRows>
-                {optimizedWorkspaceMembers.length > 0 ? (
-                  optimizedWorkspaceMembers.map((workspaceMember) => (
-                    <StyledClickableTableRow
-                      gridAutoColumns="150px 1fr 40px"
-                      mobileGridAutoColumns="100px 1fr 32px"
-                      key={workspaceMember.id}
-                      onClick={() => {
-                        if (currentWorkspaceMember?.id === workspaceMember.id) {
-                          return;
-                        }
-                        navigateSettings(SettingsPath.WorkspaceMemberPage, {
-                          workspaceMemberId: workspaceMember.id,
-                        });
-                      }}
-                    >
-                      <TableCell>
-                        <StyledIconWrapper>
-                          <Avatar
-                            avatarUrl={workspaceMember.avatarUrl}
-                            placeholderColorSeed={workspaceMember.id}
-                            placeholder={workspaceMember.name.firstName ?? ''}
-                            type="rounded"
-                            size="sm"
-                          />
-                        </StyledIconWrapper>
-                        <StyledTextContainerWithEllipsis
-                          id={`hover-text-${workspaceMember.id}`}
-                        >
-                          {workspaceMember.name.firstName +
-                            ' ' +
-                            workspaceMember.name.lastName}
-                        </StyledTextContainerWithEllipsis>
-                        <AppTooltip
-                          anchorSelect={`#hover-text-${workspaceMember.id}`}
-                          content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
-                          noArrow
-                          place="top"
-                          positionStrategy="fixed"
-                          delay={TooltipDelay.shortDelay}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <StyledTextContainerWithEllipsis>
-                          {workspaceMember.userEmail}
-                        </StyledTextContainerWithEllipsis>
-                      </TableCell>
-                      <TableCell align="right">
-                        <StyledChevronWrapper>
-                          {currentWorkspaceMember?.id !==
-                            workspaceMember.id && (
-                            <IconChevronRight size={theme.icon.size.sm} />
-                          )}
-                        </StyledChevronWrapper>
-                      </TableCell>
-                    </StyledClickableTableRow>
-                  ))
-                ) : (
-                  <StyledNoMembers>
-                    {!searchFilter
-                      ? t`No members`
-                      : t`No members match your search`}
-                  </StyledNoMembers>
-                )}
-              </StyledTableRows>
-              {hasNextPage && (
+            <StyledTableContainer hasMoreRows={hasNextPage}>
+              <Table>
                 <TableRow
-                  gridAutoColumns="250px 1fr 1fr"
-                  mobileGridAutoColumns="100px 1fr 1fr"
+                  gridAutoColumns="150px 1fr 40px"
+                  mobileGridAutoColumns="100px 1fr 32px"
                 >
-                  <TableCell>
-                    <div ref={fetchMoreRef} style={{ height: '1px' }} />
-                  </TableCell>
-                  <TableCell></TableCell>
-                  <TableCell></TableCell>
+                  <TableHeader>
+                    <Trans>Name</Trans>
+                  </TableHeader>
+                  <TableHeader>
+                    <Trans>Email</Trans>
+                  </TableHeader>
+                  <TableHeader align="right"></TableHeader>
                 </TableRow>
-              )}
-            </StyledTable>
+                <StyledTableRows>
+                  {optimizedWorkspaceMembers.length > 0 ? (
+                    optimizedWorkspaceMembers.map((workspaceMember) => (
+                      <TableRow
+                        gridAutoColumns="150px 1fr 40px"
+                        mobileGridAutoColumns="100px 1fr 32px"
+                        key={workspaceMember.id}
+                        cursor="pointer"
+                        onClick={() => {
+                          if (
+                            currentWorkspaceMember?.id === workspaceMember.id
+                          ) {
+                            return;
+                          }
+                          navigateSettings(SettingsPath.WorkspaceMemberPage, {
+                            workspaceMemberId: workspaceMember.id,
+                          });
+                        }}
+                      >
+                        <TableCell>
+                          <StyledIconWrapper>
+                            <Avatar
+                              avatarUrl={workspaceMember.avatarUrl}
+                              placeholderColorSeed={workspaceMember.id}
+                              placeholder={workspaceMember.name.firstName ?? ''}
+                              type="rounded"
+                              size="sm"
+                            />
+                          </StyledIconWrapper>
+                          <StyledTextContainerWithEllipsis
+                            id={`hover-text-${workspaceMember.id}`}
+                          >
+                            {workspaceMember.name.firstName +
+                              ' ' +
+                              workspaceMember.name.lastName}
+                          </StyledTextContainerWithEllipsis>
+                          <AppTooltip
+                            anchorSelect={`#hover-text-${workspaceMember.id}`}
+                            content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
+                            noArrow
+                            place="top"
+                            positionStrategy="fixed"
+                            delay={TooltipDelay.shortDelay}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <StyledTextContainerWithEllipsis>
+                            {workspaceMember.userEmail}
+                          </StyledTextContainerWithEllipsis>
+                        </TableCell>
+                        <TableCell align="right">
+                          <StyledChevronWrapper>
+                            {currentWorkspaceMember?.id !==
+                              workspaceMember.id && (
+                              <IconChevronRight size={theme.icon.size.sm} />
+                            )}
+                          </StyledChevronWrapper>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableCell color={themeCssVariables.font.color.tertiary}>
+                      {!searchFilter
+                        ? t`No members`
+                        : t`No members match your search`}
+                    </TableCell>
+                  )}
+                </StyledTableRows>
+                {hasNextPage && (
+                  <TableRow
+                    gridAutoColumns="250px 1fr 1fr"
+                    mobileGridAutoColumns="100px 1fr 1fr"
+                  >
+                    <TableCell>
+                      <div ref={fetchMoreRef} style={{ height: '1px' }} />
+                    </TableCell>
+                    <TableCell></TableCell>
+                    <TableCell></TableCell>
+                  </TableRow>
+                )}
+              </Table>
+            </StyledTableContainer>
           </Section>
         </SettingsPageContainer>
       </SubMenuTopBarContainer>
diff --git a/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx b/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
index dc8b05e156..7c648be9a0 100644
--- a/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
+++ b/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
@@ -51,15 +51,17 @@ const StyledMainContent = styled.div`
   min-height: 200px;
 `;
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
+const StyledLinkContainer = styled.div`
+  > a {
+    text-decoration: none;
 
-  &[data-disabled='true'] {
-    pointer-events: none;
+    &[data-disabled='true'] {
+      pointer-events: none;
+    }
   }
 `;
 
@@ -177,21 +179,23 @@ export const SettingsSecurity = () => {
       <SettingsPageContainer>
         <SettingsRolesQueryEffect />
         <StyledMainContent>
-          <StyledSection>
-            <H2Title
-              title={t`SSO`}
-              description={t`Configure an SSO connection`}
-              adornment={
-                <Tag
-                  text={t`Enterprise`}
-                  color="transparent"
-                  Icon={IconLock}
-                  variant="border"
-                />
-              }
-            />
-            <SettingsSSOIdentitiesProvidersListCard />
-          </StyledSection>
+          <StyledSectionContainer>
+            <Section>
+              <H2Title
+                title={t`SSO`}
+                description={t`Configure an SSO connection`}
+                adornment={
+                  <Tag
+                    text={t`Enterprise`}
+                    color="transparent"
+                    Icon={IconLock}
+                    variant="border"
+                  />
+                }
+              />
+              <SettingsSSOIdentitiesProvidersListCard />
+            </Section>
+          </StyledSectionContainer>
 
           <Section>
             <StyledContainer>
@@ -257,17 +261,19 @@ export const SettingsSecurity = () => {
                       : t`View and filter events, page views, object changes`
                 }
                 Button={
-                  <StyledLink
-                    to={getSettingsPath(SettingsPath.EventLogs)}
-                    data-disabled={!isEventLogsEnabled}
-                  >
-                    <Button
-                      title={t`View Logs`}
-                      variant="secondary"
-                      size="small"
-                      disabled={!isEventLogsEnabled}
-                    />
-                  </StyledLink>
+                  <StyledLinkContainer>
+                    <Link
+                      to={getSettingsPath(SettingsPath.EventLogs)}
+                      data-disabled={!isEventLogsEnabled}
+                    >
+                      <Button
+                        title={t`View Logs`}
+                        variant="secondary"
+                        size="small"
+                        disabled={!isEventLogsEnabled}
+                      />
+                    </Link>
+                  </StyledLinkContainer>
                 }
               />
               {isEventLogsEnabled && (
diff --git a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx
index 7c04cfd309..5395f47828 100644
--- a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx
@@ -79,25 +79,18 @@ const OBJECT_EVENT_COLUMNS: ColumnConfig[] = [
   },
 ];
 
-const StyledScrollWrapper = styled(ScrollWrapper)`
+const StyledScrollWrapperContainer = styled.div`
   height: 100%;
+  overflow: hidden;
 `;
 
-const StyledTable = styled(Table)`
-  border-collapse: collapse;
-  min-width: 100%;
-  table-layout: fixed;
+const StyledTableContainer = styled.div`
+  > div {
+    min-width: 100%;
+  }
 `;
 
-const StyledHeaderRow = styled(TableRow)`
-  display: grid;
-`;
-
-const StyledDataRow = styled(TableRow)`
-  display: grid;
-`;
-
-const StyledResizableHeader = styled(TableHeader)<{ isResizing?: boolean }>`
+const StyledResizableHeaderContainer = styled.div<{ isResizing?: boolean }>`
   position: relative;
   user-select: ${({ isResizing }) => (isResizing ? 'none' : 'auto')};
 `;
@@ -117,18 +110,6 @@ const StyledResizeHandle = styled.div<{ isResizing: boolean }>`
   }
 `;
 
-const StyledTableCell = styled(TableCell)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
 const StyledEmptyState = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
   padding: ${themeCssVariables.spacing[8]};
@@ -255,28 +236,32 @@ export const EventLogResultsTable = ({
 
   if (isInitialLoading) {
     return (
-      <StyledScrollWrapper
-        componentInstanceId={EVENT_LOG_SCROLL_WRAPPER_INSTANCE_ID}
-      >
-        <StyledTable>
-          <StyledHeaderRow gridTemplateColumns={gridTemplateColumns}>
-            {baseColumns.map((column) => (
-              <TableHeader key={column.id}>{t(column.label)}</TableHeader>
-            ))}
-          </StyledHeaderRow>
-        </StyledTable>
-        <SkeletonTheme
-          baseColor={theme.background.tertiary}
-          highlightColor={theme.background.transparent.lighter}
-          borderRadius={4}
+      <StyledScrollWrapperContainer>
+        <ScrollWrapper
+          componentInstanceId={EVENT_LOG_SCROLL_WRAPPER_INSTANCE_ID}
         >
-          <StyledSkeletonContainer>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
-              <Skeleton height={40} key={index} style={{ marginBottom: 4 }} />
-            ))}
-          </StyledSkeletonContainer>
-        </SkeletonTheme>
-      </StyledScrollWrapper>
+          <StyledTableContainer>
+            <Table>
+              <TableRow gridTemplateColumns={gridTemplateColumns}>
+                {baseColumns.map((column) => (
+                  <TableHeader key={column.id}>{t(column.label)}</TableHeader>
+                ))}
+              </TableRow>
+            </Table>
+          </StyledTableContainer>
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <StyledSkeletonContainer>
+              {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
+                <Skeleton height={40} key={index} style={{ marginBottom: 4 }} />
+              ))}
+            </StyledSkeletonContainer>
+          </SkeletonTheme>
+        </ScrollWrapper>
+      </StyledScrollWrapperContainer>
     );
   }
 
@@ -289,54 +274,88 @@ export const EventLogResultsTable = ({
   }
 
   return (
-    <StyledScrollWrapper
-      componentInstanceId={EVENT_LOG_SCROLL_WRAPPER_INSTANCE_ID}
-    >
-      <StyledTable>
-        <StyledHeaderRow gridTemplateColumns={gridTemplateColumns}>
-          {baseColumns.map((column) => (
-            <StyledResizableHeader
-              key={column.id}
-              isResizing={resizingColumn === column.id}
-            >
-              {t(column.label)}
-              <StyledResizeHandle
-                isResizing={resizingColumn === column.id}
-                onPointerDown={(event) => handleResizeStart(column.id, event)}
-              />
-            </StyledResizableHeader>
-          ))}
-        </StyledHeaderRow>
-        {records.map((record, index) => (
-          <StyledDataRow
-            key={`${record.timestamp}-${record.event}-${index}`}
-            gridTemplateColumns={gridTemplateColumns}
-          >
-            <StyledTableCell>{record.event}</StyledTableCell>
-            <StyledTableCell>
-              {beautifyPastDateRelativeToNow(record.timestamp)}
-            </StyledTableCell>
-            <StyledTableCell>{record.userId ?? '-'}</StyledTableCell>
-            {showObjectEventColumns && (
-              <>
-                <StyledTableCell>{record.recordId ?? '-'}</StyledTableCell>
-                <StyledTableCell>
-                  {record.objectMetadataId ?? '-'}
-                </StyledTableCell>
-              </>
-            )}
-            <StyledTableCell>
-              <EventLogJsonCell value={record.properties} />
-            </StyledTableCell>
-          </StyledDataRow>
-        ))}
-      </StyledTable>
-      <StyledIntersectionObserver ref={fetchMoreRef} />
-      {loading && records.length > 0 && (
-        <StyledLoadingMore>
-          <Trans>Loading more...</Trans>
-        </StyledLoadingMore>
-      )}
-    </StyledScrollWrapper>
+    <StyledScrollWrapperContainer>
+      <ScrollWrapper componentInstanceId={EVENT_LOG_SCROLL_WRAPPER_INSTANCE_ID}>
+        <StyledTableContainer>
+          <Table>
+            <TableRow gridTemplateColumns={gridTemplateColumns}>
+              {baseColumns.map((column) => (
+                <StyledResizableHeaderContainer
+                  key={column.id}
+                  isResizing={resizingColumn === column.id}
+                >
+                  <TableHeader>{t(column.label)}</TableHeader>
+                  <StyledResizeHandle
+                    isResizing={resizingColumn === column.id}
+                    onPointerDown={(event) =>
+                      handleResizeStart(column.id, event)
+                    }
+                  />
+                </StyledResizableHeaderContainer>
+              ))}
+            </TableRow>
+            {records.map((record, index) => (
+              <TableRow
+                key={`${record.timestamp}-${record.event}-${index}`}
+                gridTemplateColumns={gridTemplateColumns}
+              >
+                <TableCell
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
+                  {record.event}
+                </TableCell>
+                <TableCell
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
+                  {beautifyPastDateRelativeToNow(record.timestamp)}
+                </TableCell>
+                <TableCell
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
+                  {record.userId ?? '-'}
+                </TableCell>
+                {showObjectEventColumns && (
+                  <>
+                    <TableCell
+                      overflow="hidden"
+                      textOverflow="ellipsis"
+                      whiteSpace="nowrap"
+                    >
+                      {record.recordId ?? '-'}
+                    </TableCell>
+                    <TableCell
+                      overflow="hidden"
+                      textOverflow="ellipsis"
+                      whiteSpace="nowrap"
+                    >
+                      {record.objectMetadataId ?? '-'}
+                    </TableCell>
+                  </>
+                )}
+                <TableCell
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
+                  <EventLogJsonCell value={record.properties} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
+        </StyledTableContainer>
+        <StyledIntersectionObserver ref={fetchMoreRef} />
+        {loading && records.length > 0 && (
+          <StyledLoadingMore>
+            <Trans>Loading more...</Trans>
+          </StyledLoadingMore>
+        )}
+      </ScrollWrapper>
+    </StyledScrollWrapperContainer>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx b/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx
index 460bb5d331..fcdcf1e83b 100644
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsApiWebhooks.tsx
@@ -30,7 +30,7 @@ const StyledMainContent = styled.div`
   min-height: 200px;
 `;
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   flex-shrink: 0;
 `;
 
@@ -58,54 +58,60 @@ export const SettingsApiWebhooks = () => {
     >
       <SettingsPageContainer>
         <StyledMainContent>
-          <StyledSection>
-            <H2Title
-              title={t`Documentation`}
-              description={t`Try our REST or GraphQL API playgrounds.`}
-            />
-            <StyledContainer>
-              <StyledSettingsApiPlaygroundCoverImage />
-              <PlaygroundSetupForm />
-            </StyledContainer>
-          </StyledSection>
+          <StyledSectionContainer>
+            <Section>
+              <H2Title
+                title={t`Documentation`}
+                description={t`Try our REST or GraphQL API playgrounds.`}
+              />
+              <StyledContainer>
+                <StyledSettingsApiPlaygroundCoverImage />
+                <PlaygroundSetupForm />
+              </StyledContainer>
+            </Section>
+          </StyledSectionContainer>
 
-          <StyledSection>
-            <H2Title
-              title={t`API Keys`}
-              description={t`Active API keys created by you or your team.`}
-            />
-            <StyledContainer isMobile={isMobile}>
-              <SettingsApiKeysTable />
-              <StyledButtonContainer>
-                <Button
-                  Icon={IconPlus}
-                  title={t`Create API key`}
-                  size="small"
-                  variant="secondary"
-                  to={getSettingsPath(SettingsPath.NewApiKey)}
-                />
-              </StyledButtonContainer>
-            </StyledContainer>
-          </StyledSection>
+          <StyledSectionContainer>
+            <Section>
+              <H2Title
+                title={t`API Keys`}
+                description={t`Active API keys created by you or your team.`}
+              />
+              <StyledContainer isMobile={isMobile}>
+                <SettingsApiKeysTable />
+                <StyledButtonContainer>
+                  <Button
+                    Icon={IconPlus}
+                    title={t`Create API key`}
+                    size="small"
+                    variant="secondary"
+                    to={getSettingsPath(SettingsPath.NewApiKey)}
+                  />
+                </StyledButtonContainer>
+              </StyledContainer>
+            </Section>
+          </StyledSectionContainer>
 
-          <StyledSection>
-            <H2Title
-              title={t`Webhooks`}
-              description={t`Establish Webhook endpoints for notifications on asynchronous events.`}
-            />
-            <StyledContainer isMobile={isMobile}>
-              <SettingsWebhooksTable />
-              <StyledButtonContainer>
-                <Button
-                  Icon={IconPlus}
-                  title={t`Create webhook`}
-                  size="small"
-                  variant="secondary"
-                  to={getSettingsPath(SettingsPath.NewWebhook)}
-                />
-              </StyledButtonContainer>
-            </StyledContainer>
-          </StyledSection>
+          <StyledSectionContainer>
+            <Section>
+              <H2Title
+                title={t`Webhooks`}
+                description={t`Establish Webhook endpoints for notifications on asynchronous events.`}
+              />
+              <StyledContainer isMobile={isMobile}>
+                <SettingsWebhooksTable />
+                <StyledButtonContainer>
+                  <Button
+                    Icon={IconPlus}
+                    title={t`Create webhook`}
+                    size="small"
+                    variant="secondary"
+                    to={getSettingsPath(SettingsPath.NewWebhook)}
+                  />
+                </StyledButtonContainer>
+              </StyledContainer>
+            </Section>
+          </StyledSectionContainer>
         </StyledMainContent>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
diff --git a/packages/twenty-shared/eslint.config.mjs b/packages/twenty-shared/eslint.config.mjs
index 1d938f4b30..8446ecebc6 100644
--- a/packages/twenty-shared/eslint.config.mjs
+++ b/packages/twenty-shared/eslint.config.mjs
@@ -31,6 +31,8 @@ export default [
       'packages/twenty-shared/**/dist/**',
       'packages/twenty-shared/vite.config.ts',
       'packages/twenty-shared/scripts/**',
+      'src/individual-entry.ts',
+      '**/individual-entry.ts',
     ],
   },
 
diff --git a/packages/twenty-shared/src/metadata/constants/reserved-metadata-name-keywords.constant.ts b/packages/twenty-shared/src/metadata/constants/reserved-metadata-name-keywords.constant.ts
index 24ea5cff54..594a2ff242 100644
--- a/packages/twenty-shared/src/metadata/constants/reserved-metadata-name-keywords.constant.ts
+++ b/packages/twenty-shared/src/metadata/constants/reserved-metadata-name-keywords.constant.ts
@@ -1,4 +1,4 @@
-const CORE_OBJECT_NAMES = [
+export const RESERVED_METADATA_NAME_KEYWORDS = [
   'approvedAccessDomain',
   'approvedAccessDomains',
   'appToken',
@@ -41,10 +41,6 @@ const CORE_OBJECT_NAMES = [
   'roles',
   'userWorkspaceRole',
   'userWorkspaceRoles',
-];
-
-export const RESERVED_METADATA_NAME_KEYWORDS = [
-  ...CORE_OBJECT_NAMES,
   'plan',
   'plans',
   'event',
diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
index 2d1944e4b3..fa31ced567 100644
--- a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@linaria/react';
+import { css } from '@linaria/core';
 import { type PlacesType, type PositionStrategy, Tooltip } from 'react-tooltip';
 import { themeCssVariables } from '@ui/theme-constants';
 
@@ -16,24 +16,17 @@ export enum TooltipDelay {
   longDelay = '1000ms',
 }
 
-const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
+const appTooltipClass = css`
   backdrop-filter: ${themeCssVariables.blur.strong};
   background-color: ${themeCssVariables.color.transparent.gray11};
   border-radius: ${themeCssVariables.border.radius.sm};
-
   box-shadow: ${themeCssVariables.boxShadow.light};
   color: ${themeCssVariables.grayScale.gray1};
-
   font-size: ${themeCssVariables.font.size.sm};
   font-weight: ${themeCssVariables.font.weight.regular};
-
-  max-width: ${({ width }) => width || '40%'};
   overflow: visible;
-
   padding: ${themeCssVariables.spacing[2]};
-
   word-break: break-word;
-
   z-index: ${themeCssVariables.lastLayerZIndex};
 `;
 
@@ -82,23 +75,22 @@ export const AppTooltip = ({
   };
 
   return (
-    <StyledAppTooltip
-      {...{
-        anchorSelect,
-        className,
-        content,
-        delayShow: getDelayInMis(delay),
-        delayHide: 20,
-        hidden,
-        noArrow,
-        offset,
-        place,
-        positionStrategy,
-        children,
-        clickable,
-        width,
-        isOpen,
-      }}
-    />
+    <Tooltip
+      anchorSelect={anchorSelect}
+      className={`${appTooltipClass}${className ? ` ${className}` : ''}`}
+      content={content}
+      delayShow={getDelayInMis(delay)}
+      delayHide={20}
+      hidden={hidden}
+      noArrow={noArrow}
+      offset={offset}
+      place={place}
+      positionStrategy={positionStrategy}
+      clickable={clickable}
+      isOpen={isOpen}
+      style={{ maxWidth: width ?? '40%' }}
+    >
+      {children}
+    </Tooltip>
   );
 };
diff --git a/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx b/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx
index 30925a4d37..4481f5c33b 100644
--- a/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx
@@ -1,13 +1,16 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { JsonListItem } from '@ui/json-visualizer/components/internal/JsonListItem';
 import { JsonNodeLabel } from '@ui/json-visualizer/components/internal/JsonNodeLabel';
 import { JsonNodeValue } from '@ui/json-visualizer/components/internal/JsonNodeValue';
 import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
 import { themeCssVariables } from '@ui/theme-constants';
 
-const StyledListItem = styled(JsonListItem)`
+const StyledListItem = styled.li`
+  align-items: center;
   column-gap: ${themeCssVariables.spacing[2]};
+  display: flex;
+  list-style-type: none;
+  white-space: nowrap;
 `;
 
 type JsonValueNodeProps = {
diff --git a/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx
index 995d144f43..850ce280b4 100644
--- a/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx
+++ b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx
@@ -16,7 +16,7 @@ const StyledCenteredTitle = styled.div`
   text-align: center;
 `;
 
-const StyledSection = styled(Section)`
+const StyledSectionContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[6]};
 `;
 
@@ -103,13 +103,15 @@ export const Confirmation: Story = {
       <StyledCenteredTitle>
         <H1Title title="Delete record?" fontColor={H1TitleFontColor.Primary} />
       </StyledCenteredTitle>
-      <StyledSection
-        alignment={SectionAlignment.Center}
-        fontColor={SectionFontColor.Primary}
-      >
-        This action cannot be undone. The record and all of its data will be
-        permanently removed.
-      </StyledSection>
+      <StyledSectionContainer>
+        <Section
+          alignment={SectionAlignment.Center}
+          fontColor={SectionFontColor.Primary}
+        >
+          This action cannot be undone. The record and all of its data will be
+          permanently removed.
+        </Section>
+      </StyledSectionContainer>
       <Button title="Cancel" variant="secondary" fullWidth justify="center" />
       <Button
         title="Delete"
diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx
index 51d667b624..08ce106b50 100644
--- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx
+++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx
@@ -11,38 +11,50 @@ import { type ReactNode, useContext } from 'react';
 import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
-  StyledMenuItemBase,
   StyledMenuItemLabel,
   StyledMenuItemRightContent,
   StyledRightMenuItemContextualText,
 } from '../internals/components/StyledMenuItemBase';
 
-export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
+export const StyledMenuItemSelect = styled.div<{
   disabled?: boolean;
   focused?: boolean;
+  isKeySelected?: boolean;
 }>`
-  background: ${({ disabled, focused }) => {
+  --horizontal-padding: ${themeCssVariables.spacing[1]};
+  --vertical-padding: ${themeCssVariables.spacing[2]};
+  align-items: center;
+  border-radius: ${themeCssVariables.border.radius.sm};
+  display: flex;
+  flex-direction: row;
+  font-size: ${themeCssVariables.font.size.sm};
+  gap: ${themeCssVariables.spacing[2]};
+  height: calc(32px - 2 * var(--vertical-padding));
+  justify-content: space-between;
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  position: relative;
+  user-select: none;
+  width: calc(100% - 2 * var(--horizontal-padding));
+  transition: background 0.1s ease;
+  background: ${({ disabled, focused, isKeySelected }) => {
     if (disabled === true) {
       return 'inherit';
     }
-    if (focused === true) {
+    if (focused === true || isKeySelected === true) {
       return themeCssVariables.background.transparent.light;
     }
     return '';
   }};
-
   &:hover {
     background: ${({ disabled }) =>
       disabled === true
         ? 'inherit'
         : themeCssVariables.background.transparent.light};
   }
-
   color: ${({ disabled }) =>
     disabled === true
       ? themeCssVariables.font.color.tertiary
       : themeCssVariables.font.color.secondary};
-
   cursor: ${({ disabled }) => (disabled === true ? 'default' : 'pointer')};
 `;
 
diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx
index f500ab581f..83ae64afc8 100644
--- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -28,7 +28,13 @@ const StyledMainText = styled.div`
   max-width: 100%;
 `;
 
-const StyledMenuItemLabelRight = styled(StyledMenuItemLabel)`
+const StyledMenuItemLabelRight = styled.div`
+  display: flex;
+  flex-direction: row;
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.regular};
+  overflow: hidden;
+  white-space: nowrap;
   margin-left: auto;
 `;
 
diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx
index 13c51c77e9..5fa412f045 100644
--- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -93,8 +93,14 @@ export const StyledMenuItemLabel = styled.div`
   white-space: nowrap;
 `;
 
-export const StyledMenuItemLabelLight = styled(StyledMenuItemLabel)`
+export const StyledMenuItemLabelLight = styled.div`
   color: ${themeCssVariables.font.color.light};
+  display: flex;
+  flex-direction: row;
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.regular};
+  overflow: hidden;
+  white-space: nowrap;
 `;
 
 export const StyledNoIconFiller = styled.div`
@@ -139,21 +145,55 @@ type HoverableMenuItemBaseProps = {
   cursor?: 'drag' | 'default';
 } & MenuItemBaseProps;
 
-export const StyledHoverableMenuItemBase = styled(
-  StyledMenuItemBase,
-)<HoverableMenuItemBaseProps>`
-  & .hoverable-buttons {
-    opacity: ${({ isIconDisplayedOnHoverOnly }) =>
-      isIconDisplayedOnHoverOnly === true ? '0' : '1'};
-    right: ${({ isIconDisplayedOnHoverOnly }) =>
-      isIconDisplayedOnHoverOnly === true
-        ? themeCssVariables.spacing[2]
-        : 'auto'};
-    transition: opacity
-      calc(${themeCssVariables.animation.duration.instant} * 1s) ease;
-  }
-
+export const StyledHoverableMenuItemBase = styled.div<HoverableMenuItemBaseProps>`
+  --horizontal-padding: ${themeCssVariables.spacing[1]};
+  --vertical-padding: ${themeCssVariables.spacing[2]};
+  align-items: center;
+  border-radius: ${themeCssVariables.border.radius.sm};
+  display: flex;
+  flex-direction: row;
+  font-size: ${themeCssVariables.font.size.sm};
+  gap: ${themeCssVariables.spacing[2]};
+  height: calc(32px - 2 * var(--vertical-padding));
+  justify-content: space-between;
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  background: ${({ isKeySelected, focused }) =>
+    isKeySelected || focused
+      ? themeCssVariables.background.transparent.light
+      : 'transparent'};
+  transition: ${({ isHoverBackgroundDisabled, disabled }) =>
+    disabled || isHoverBackgroundDisabled ? 'none' : 'background 0.1s ease'};
+  color: ${({ accent, disabled }) => {
+    if (disabled !== undefined && disabled !== false) {
+      return themeCssVariables.font.color.tertiary;
+    }
+    switch (accent) {
+      case 'danger':
+        return themeCssVariables.font.color.danger;
+      case 'placeholder':
+        return themeCssVariables.font.color.tertiary;
+      case 'default':
+      default:
+        return themeCssVariables.font.color.secondary;
+    }
+  }};
   &:hover {
+    background: ${({
+      accent,
+      disabled,
+      isHoverBackgroundDisabled,
+      isKeySelected,
+      focused,
+    }) => {
+      if (disabled === true)
+        return isKeySelected || focused
+          ? themeCssVariables.background.transparent.light
+          : 'transparent';
+      if (accent === 'danger')
+        return themeCssVariables.background.transparent.danger;
+      if (isHoverBackgroundDisabled === true) return 'transparent';
+      return themeCssVariables.background.transparent.light;
+    }};
     & .hoverable-buttons {
       opacity: 1;
     }
@@ -164,12 +204,23 @@ export const StyledHoverableMenuItemBase = styled(
       opacity: 1;
     }
   }
-
+  position: relative;
+  user-select: none;
+  width: calc(100% - 2 * var(--horizontal-padding));
+  & .hoverable-buttons {
+    opacity: ${({ isIconDisplayedOnHoverOnly }) =>
+      isIconDisplayedOnHoverOnly === true ? '0' : '1'};
+    right: ${({ isIconDisplayedOnHoverOnly }) =>
+      isIconDisplayedOnHoverOnly === true
+        ? themeCssVariables.spacing[2]
+        : 'auto'};
+    transition: opacity
+      calc(${themeCssVariables.animation.duration.instant} * 1s) ease;
+  }
   cursor: ${({ cursor, disabled }) => {
     if (disabled !== undefined && disabled !== false) {
       return 'default';
     }
-
     switch (cursor) {
       case 'drag':
         return 'grab';
@@ -202,8 +253,13 @@ export const StyledMenuItemContextualText = styled.div`
   overflow: hidden;
 `;
 
-export const StyledRightMenuItemContextualText = styled(
-  StyledMenuItemContextualText,
-)`
+export const StyledRightMenuItemContextualText = styled.div`
+  color: ${themeCssVariables.font.color.light};
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  padding-left: ${themeCssVariables.spacing[1]};
+  flex-shrink: 1;
+  overflow: hidden;
   text-align: right;
 `;