diff --git a/packages/twenty-docs/src/ui/generated/index.d.cts b/packages/twenty-docs/src/ui/generated/index.d.cts
index 71bc8eb4a..20627aabd 100644
--- a/packages/twenty-docs/src/ui/generated/index.d.cts
+++ b/packages/twenty-docs/src/ui/generated/index.d.cts
@@ -37,6 +37,8 @@ declare const lightTheme: {
         overlay: string;
         radialGradient: string;
         radialGradientHover: string;
+        primaryInverted: string;
+        primaryInvertedHover: string;
     };
     border: {
         radius: {
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
index ae7550a01..bacd927bd 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
@@ -24,7 +24,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.radialGradient;
+        return theme.background.primaryInverted;
       case 'secondary':
         return theme.background.primary;
       default:
@@ -39,7 +39,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.transparent.light;
+        return theme.background.transparent.strong;
       case 'secondary':
         return theme.border.color.medium;
       default:
@@ -61,7 +61,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.grayScale.gray0;
+        return theme.font.color.inverted;
       case 'secondary':
         return theme.font.color.primary;
       default:
@@ -90,7 +90,7 @@ const StyledButton = styled.button<
       default:
         return `
           &:hover {
-            background: ${theme.background.radialGradientHover}};
+            background: ${theme.background.primaryInvertedHover}};
           }
         `;
     }
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
index e91329882..27dbaaa73 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
@@ -25,4 +25,6 @@ export const BACKGROUND_DARK = {
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray20,
+  primaryInvertedHover: GRAY_SCALE.gray15,
 };
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
index e78f8e6bb..6db596b1d 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
@@ -25,4 +25,6 @@ export const BACKGROUND_LIGHT = {
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray60,
+  primaryInvertedHover: GRAY_SCALE.gray55,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
index 299edc7e7..37414ab4c 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
@@ -25,4 +25,6 @@ export const BACKGROUND_DARK = {
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray20,
+  primaryInvertedHover: GRAY_SCALE.gray15,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
index ff2475a49..30e93078c 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
@@ -25,4 +25,6 @@ export const BACKGROUND_LIGHT = {
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray60,
+  primaryInvertedHover: GRAY_SCALE.gray55,
 };