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 ca656f3b52..1ccf037161 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
@@ -4,7 +4,7 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { TimelineCalendarEvent } from '~/generated/graphql';
 
 type CalendarDayCardContentProps = {
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
index cb9548f8ba..5874898e00 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@@ -9,6 +9,8 @@ import {
   IconArrowRight,
   IconLock,
   isDefined,
+  Card,
+  CardContent,
 } from 'twenty-ui';
 
 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
@@ -18,8 +20,6 @@ import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendar
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import {
   CalendarChannelVisibility,
   TimelineCalendarEvent,
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
index f42f2e35f5..97ca1d0297 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
index b8b8b2f61d..0bb0e367e5 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
@@ -1,5 +1,5 @@
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
+import { Card } from 'twenty-ui';
 
 const StyledList = styled(Card)`
   & > :not(:last-child) {
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
index 00fdbb1a68..075758fc82 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
@@ -1,5 +1,5 @@
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import styled from '@emotion/styled';
+import { CardContent } from 'twenty-ui';
 import React from 'react';
 
 const StyledRowContent = styled(CardContent)<{
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 67e4f78cd7..52b8fa0de8 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,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type EventCardProps = {
   children: React.ReactNode;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
index 3152e98ba0..5d0fab05d6 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@@ -3,10 +3,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
index 981bbcb6d5..8500264c41 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
-import { Button, IconGoogle } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconGoogle } from 'twenty-ui';
 
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
index cfe203a15a..3d4c81d0ed 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -10,7 +10,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 
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 aaf856456f..81c8a66297 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { Radio } from '@/ui/input/components/Radio';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
index 972bac3d77..07c54e1c9a 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
@@ -1,9 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, Pill } from 'twenty-ui';
+import { IconChevronRight, Pill, Card, CardContent } from 'twenty-ui';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { ReactNode } from 'react';
 
 type SettingsCardProps = {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
index ad580b2e30..a07fd6b2ba 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
@@ -1,11 +1,9 @@
-import { ComponentType } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent, IconPlus } from 'twenty-ui';
+import { ComponentType } from 'react';
+import { IconComponent, IconPlus, Card, CardFooter } from 'twenty-ui';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
index b0292e1124..73885bc341 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { ReactNode } from 'react';
+import { IconComponent, CardContent } from 'twenty-ui';
 
 const StyledRow = styled(CardContent)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
index 1a4732fed4..a934b7e52e 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.background.secondary};
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
index 90b61b7c04..7384b1d582 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
 
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, CardContent } from 'twenty-ui';
 import { ReactNode } from 'react';
 
 type SettingsOptionCardContentProps = {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index 6a5c8c08f0..d224e73b00 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Radio } from '@/ui/input/components/Radio';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, CardContent } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
 
 const StyledRadioCardContent = styled(CardContent)`
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
index 6c7eeeed8d..24bc59d525 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsSummaryCardProps = {
   title: ReactNode;
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 bf02470ca6..29064d6e1a 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
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsDataModelPreviewFormCardProps = {
   className?: string;
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
index c737fab7db..106fbac9a4 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
@@ -1,12 +1,11 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { IconCheck, IconX } from 'twenty-ui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { IconCheck, IconX, CardContent } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { isDefined } from '~/utils/isDefined';
 
 export const settingsDataModelFieldBooleanFormSchema = z.object({
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
index 52b0a4d010..8c0c639476 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
@@ -6,7 +6,7 @@ import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/va
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 
 export const settingsDataModelFieldCurrencyFormSchema = z.object({
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 c7d029abe8..c90fba3129 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
@@ -5,8 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
 import { SettingsDataModelFieldToggle } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle';
 import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconClockShare } from 'twenty-ui';
+import { IconClockShare, CardContent } from 'twenty-ui';
 
 export const settingsDataModelFieldDateFormSchema = z.object({
   settings: z
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
index 3a80bf0e61..ec5686ff3e 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsDataModelFieldNumberDecimalsInput } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
 export const settingsDataModelFieldNumberFormSchema = z.object({
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 f78a23b45e..6796f34a28 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
@@ -1,7 +1,14 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { Controller, useFormContext } from 'react-hook-form';
-import { IconPlus, IconTool, LightButton, MAIN_COLORS } from 'twenty-ui';
+import {
+  CardContent,
+  CardFooter,
+  IconPlus,
+  IconTool,
+  LightButton,
+  MAIN_COLORS,
+} from 'twenty-ui';
 import { z } from 'zod';
 
 import {
@@ -14,8 +21,6 @@ import { selectFieldDefaultValueSchema } from '@/object-record/record-field/vali
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { generateNewSelectOption } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOption';
 import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
index c052e01ffb..ce3f80b644 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
 import {
-  SettingsDataModelFieldPreview,
+  // eslint-disable-next-line prettier/prettier
+    SettingsDataModelFieldPreview,
   SettingsDataModelFieldPreviewProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview';
 import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 export type SettingsDataModelFieldPreviewCardProps =
   SettingsDataModelFieldPreviewProps & {
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 d260936f34..2dcb375d93 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
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { FloatingButton, IconEye } from 'twenty-ui';
-
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, FloatingButton, IconEye } from 'twenty-ui';
 
 import { SettingsPath } from '@/types/SettingsPath';
 import DarkCoverImage from '../../assets/cover-dark.png';
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 4b2782b69d..228df4c447 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
@@ -11,8 +11,7 @@ import {
   SettingsDataModelObjectIdentifiersForm,
   SettingsDataModelObjectIdentifiersFormValues,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
index 4b66adedc0..3be1ee3972 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 import PreviewBackgroundImage from '../assets/preview-background.svg';
 import SyncImage from '../assets/sync.svg?react';
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
index f7bffb9188..7645a32130 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
@@ -2,11 +2,8 @@
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 import styled from '@emotion/styled';
-import { Button, IconKey } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconKey } from 'twenty-ui';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
index b2855d93b6..73c8aa42d2 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
@@ -2,10 +2,9 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { IconLink, Toggle } from 'twenty-ui';
+import { IconLink, Toggle, Card } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx b/packages/twenty-ui/src/layout/card/components/Card.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx
rename to packages/twenty-ui/src/layout/card/components/Card.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx b/packages/twenty-ui/src/layout/card/components/CardContent.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx
rename to packages/twenty-ui/src/layout/card/components/CardContent.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx b/packages/twenty-ui/src/layout/card/components/CardFooter.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
rename to packages/twenty-ui/src/layout/card/components/CardFooter.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx
rename to packages/twenty-ui/src/layout/card/components/CardHeader.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
rename to packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
index dd8e61973a..aaaa9e642d 100644
--- a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
+++ b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { Card } from '../Card';
 import { CardContent } from '../CardContent';
diff --git a/packages/twenty-ui/src/layout/index.ts b/packages/twenty-ui/src/layout/index.ts
index 8bd6c13dc5..f650ba537e 100644
--- a/packages/twenty-ui/src/layout/index.ts
+++ b/packages/twenty-ui/src/layout/index.ts
@@ -5,4 +5,8 @@ export * from './animated-placeholder/constants/Background';
 export * from './animated-placeholder/constants/DarkBackground';
 export * from './animated-placeholder/constants/DarkMovingImage';
 export * from './animated-placeholder/constants/MovingImage';
+export * from './card/components/Card';
+export * from './card/components/CardContent';
+export * from './card/components/CardFooter';
+export * from './card/components/CardHeader';
 export * from './expandableContainer/components/ExpandableContainer';