diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
index 3a31517778..5d38a2becc 100644
--- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
@@ -6,7 +6,9 @@ const StyledBoardCard = styled.div<{
   isSecondaryDragged?: boolean;
   isPrimaryMultiDrag?: boolean;
 }>`
-  background-color: ${themeCssVariables.background.secondary};
+  --record-card-background-color: ${themeCssVariables.background.secondary};
+
+  background-color: var(--record-card-background-color);
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.sm};
   color: ${themeCssVariables.font.color.primary};
@@ -16,15 +18,16 @@ const StyledBoardCard = styled.div<{
   width: 100%;
 
   &[data-selected='true'] {
-    background-color: ${themeCssVariables.accent.quaternary};
+    --record-card-background-color: ${themeCssVariables.accent.quaternary};
   }
 
   &[data-focused='true'] {
-    background-color: ${themeCssVariables.background.tertiary};
+    --record-card-background-color: ${themeCssVariables.background.tertiary};
   }
 
   &[data-active='true'] {
-    background-color: ${themeCssVariables.accent.quaternary};
+    --record-card-background-color: ${themeCssVariables.accent.quaternary};
+
     border: 1px solid ${themeCssVariables.color.blue7};
   }
 
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
index f2b687b8d9..a104f87fc2 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
@@ -17,7 +17,10 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{
 
 const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
   align-items: center;
-  background: ${themeCssVariables.background.primary};
+  background: var(
+    --record-card-background-color,
+    ${themeCssVariables.background.primary}
+  );
   box-sizing: border-box;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};