diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index 33932d69b6..375b55fdf3 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@@ -16,6 +16,7 @@ export type ButtonProps = {
   title?: string;
   fullWidth?: boolean;
   variant?: ButtonVariant;
+  inverted?: boolean;
   size?: ButtonSize;
   position?: ButtonPosition;
   accent?: ButtonAccent;
@@ -36,6 +37,7 @@ const StyledButton = styled('button', {
     ButtonProps,
     | 'fullWidth'
     | 'variant'
+    | 'inverted'
     | 'size'
     | 'position'
     | 'accent'
@@ -46,83 +48,112 @@ const StyledButton = styled('button', {
   >
 >`
   align-items: center;
-  ${({ theme, variant, accent, disabled, focus }) => {
+  ${({ theme, variant, inverted, accent, disabled, focus }) => {
     switch (variant) {
       case 'primary':
         switch (accent) {
           case 'default':
             return css`
-              background: ${theme.background.secondary};
-              border-color: ${!disabled
+              background: ${!inverted
+                ? theme.background.secondary
+                : theme.background.primary};
+              border-color: ${!inverted
                 ? focus
                   ? theme.color.blue
                   : theme.background.transparent.light
-                : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+                : theme.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
+              opacity: ${disabled ? 0.24 : 1};
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.accent.tertiary}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${!disabled
-                ? theme.font.color.secondary
-                : theme.font.color.extraLight};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.font.color.secondary
+                  : theme.font.color.extraLight
+                : theme.font.color.secondary};
               &:hover {
-                background: ${!disabled
+                background: ${!inverted
                   ? theme.background.tertiary
                   : theme.background.secondary};
               }
               &:active {
-                background: ${!disabled
+                background: ${!inverted
                   ? theme.background.quaternary
-                  : theme.background.secondary};
+                  : theme.background.tertiary};
               }
             `;
           case 'blue':
             return css`
-              background: ${theme.color.blue};
-              border-color: ${!disabled
+              background: ${!inverted
+                ? theme.color.blue
+                : theme.background.primary};
+              border-color: ${!inverted
                 ? focus
                   ? theme.color.blue
                   : theme.background.transparent.light
-                : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+                : theme.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.accent.tertiary}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
               opacity: ${disabled ? 0.24 : 1};
-
               ${disabled
                 ? ''
                 : css`
                     &:hover {
-                      background: ${theme.color.blue50};
+                      background: ${!inverted
+                        ? theme.color.blue50
+                        : theme.background.secondary};
                     }
                     &:active {
-                      background: ${theme.color.blue60};
+                      background: ${!inverted
+                        ? theme.color.blue60
+                        : theme.background.tertiary};
                     }
                   `}
             `;
           case 'danger':
             return css`
-              background: ${theme.color.red};
-              border-color: ${!disabled
+              background: ${!inverted
+                ? theme.color.red
+                : theme.background.primary};
+              border-color: ${!inverted
                 ? focus
                   ? theme.color.red
                   : theme.background.transparent.light
-                : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+                : theme.background.transparent.light};
+              border-width: 1px 1px !important;
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.color.red10
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${!inverted ? theme.background.primary : theme.color.red};
               opacity: ${disabled ? 0.24 : 1};
-
               ${disabled
                 ? ''
                 : css`
-                    &:hover,
+                    &:hover {
+                      background: ${!inverted
+                        ? theme.color.red40
+                        : theme.background.secondary};
+                    }
                     &:active {
-                      background: ${theme.color.red50};
+                      background: ${!inverted
+                        ? theme.color.red50
+                        : theme.background.tertiary};
                     }
                   `}
             `;
@@ -133,88 +164,143 @@ const StyledButton = styled('button', {
         switch (accent) {
           case 'default':
             return css`
-              background: ${focus
-                ? theme.background.transparent.primary
-                : 'transparent'};
-              border-color: ${variant === 'secondary'
-                ? !disabled && focus
-                  ? theme.color.blue
-                  : theme.background.transparent.medium
-                : focus
-                  ? theme.color.blue
-                  : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+              background: transparent;
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? !disabled && focus
+                    ? theme.color.blue
+                    : theme.background.transparent.medium
+                  : focus
+                    ? theme.color.blue
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.accent.tertiary}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${!disabled
-                ? theme.font.color.secondary
-                : theme.font.color.extraLight};
+              opacity: ${disabled ? 0.24 : 1};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.font.color.secondary
+                  : theme.font.color.extraLight
+                : theme.font.color.inverted};
               &:hover {
-                background: ${!disabled
-                  ? theme.background.transparent.light
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.transparent.light
+                    : 'transparent'
+                  : theme.background.transparent.light};
               }
               &:active {
-                background: ${!disabled
-                  ? theme.background.transparent.light
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.transparent.light
+                    : 'transparent'
+                  : theme.background.transparent.medium};
               }
             `;
           case 'blue':
             return css`
-              background: ${focus
-                ? theme.background.transparent.primary
-                : 'transparent'};
-              border-color: ${variant === 'secondary'
-                ? focus
-                  ? theme.color.blue
-                  : theme.accent.primary
-                : focus
-                  ? theme.color.blue
-                  : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+              background: transparent;
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? focus
+                    ? theme.color.blue
+                    : theme.accent.primary
+                  : focus
+                    ? theme.color.blue
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.accent.tertiary}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${!disabled ? theme.color.blue : theme.accent.accent4060};
+              opacity: ${disabled ? 0.24 : 1};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.color.blue
+                  : theme.accent.accent4060
+                : theme.font.color.inverted};
               &:hover {
-                background: ${!disabled
-                  ? theme.accent.tertiary
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.accent.tertiary
+                    : 'transparent'
+                  : theme.background.transparent.light};
               }
               &:active {
-                background: ${!disabled
-                  ? theme.accent.secondary
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.accent.secondary
+                    : 'transparent'
+                  : theme.background.transparent.medium};
               }
             `;
           case 'danger':
             return css`
               background: transparent;
-              border-color: ${variant === 'secondary'
-                ? focus
-                  ? theme.color.red
-                  : theme.border.color.danger
-                : focus
-                  ? theme.color.red
-                  : 'transparent'};
-              border-width: ${!disabled && focus ? '1px 1px !important' : 0};
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? focus
+                    ? theme.color.red
+                    : theme.border.color.danger
+                  : focus
+                    ? theme.color.red
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.color.red10
+                      : theme.background.transparent.medium
+                  }`
                 : 'none'};
-              color: ${!disabled
-                ? theme.font.color.danger
-                : theme.border.color.danger};
+              opacity: ${disabled ? 0.24 : 1};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.font.color.danger
+                  : theme.color.red20
+                : theme.font.color.inverted};
               &:hover {
-                background: ${!disabled
-                  ? theme.background.danger
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.danger
+                    : 'transparent'
+                  : theme.background.transparent.light};
               }
               &:active {
-                background: ${!disabled
-                  ? theme.background.danger
-                  : 'transparent'};
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.danger
+                    : 'transparent'
+                  : theme.background.transparent.medium};
               }
             `;
         }
@@ -277,6 +363,7 @@ export const Button = ({
   title,
   fullWidth = false,
   variant = 'primary',
+  inverted = false,
   size = 'medium',
   accent = 'default',
   position = 'standalone',
@@ -294,6 +381,7 @@ export const Button = ({
     <StyledButton
       fullWidth={fullWidth}
       variant={variant}
+      inverted={inverted}
       size={size}
       position={position}
       disabled={soon || disabled}
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx b/packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
index 112d4ee749..3165cc5ee8 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
@@ -30,6 +30,7 @@ export const Default: Story = {
     title: 'Button',
     size: 'small',
     variant: 'primary',
+    inverted: false,
     accent: 'danger',
     disabled: false,
     focus: false,
diff --git a/packages/twenty-ui/.storybook/preview-head.html b/packages/twenty-ui/.storybook/preview-head.html
index 732858d597..f6ee81b23d 100644
--- a/packages/twenty-ui/.storybook/preview-head.html
+++ b/packages/twenty-ui/.storybook/preview-head.html
@@ -19,16 +19,16 @@ html {
   padding: 0 !important;
 }
 *::-webkit-scrollbar {
-    height: 4px;
-    width: 4px;
-  }
+  height: 4px;
+  width: 4px;
+}
 
-  *::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
 
-  *::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 2px;
-  }
+*::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 2px;
+}
 </style>
\ No newline at end of file
diff --git a/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx b/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx
index 57fbe65540..fdb3818669 100644
--- a/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx
+++ b/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx
@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
 
-const StyledLayout = styled.div<{ width?: number }>`
-  background: ${({ theme }) => theme.background.primary};
+const StyledLayout = styled.div<{
+  width?: number;
+  backgroundColor?: string | undefined;
+}>`
+  background: ${({ theme, backgroundColor }) =>
+    backgroundColor ?? theme.background.primary};
   border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 5px;
 
@@ -17,12 +21,16 @@ const StyledLayout = styled.div<{ width?: number }>`
 
 type ComponentStorybookLayoutProps = {
   width?: number;
+  backgroundColor?: string | undefined;
   children: JSX.Element;
 };
 
 export const ComponentStorybookLayout = ({
   width,
+  backgroundColor,
   children,
 }: ComponentStorybookLayoutProps) => (
-  <StyledLayout width={width}>{children}</StyledLayout>
+  <StyledLayout width={width} backgroundColor={backgroundColor}>
+    {children}
+  </StyledLayout>
 );
diff --git a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
index 70fa9051a8..8e4fd86649 100644
--- a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
+++ b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
@@ -1,12 +1,35 @@
 import { Decorator } from '@storybook/react';
 
+import { GRAY_SCALE, MAIN_COLORS } from '@ui/theme';
+
 import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
 
+const getBackgroundColor = (inverted: boolean, accent: string) => {
+  if (!inverted) return undefined;
+
+  switch (accent) {
+    case 'default':
+      return GRAY_SCALE.gray50;
+    case 'danger':
+      return MAIN_COLORS.red;
+    case 'blue':
+      return MAIN_COLORS.blue;
+    default:
+      return undefined;
+  }
+};
+
 export const ComponentDecorator: Decorator = (Story, context) => {
   const { container } = context.parameters;
+  const inverted = context.args.inverted as boolean;
+  const accent = context.args.accent as string;
+  const backgroundColor = getBackgroundColor(inverted, accent);
 
   return (
-    <ComponentStorybookLayout width={container?.width}>
+    <ComponentStorybookLayout
+      width={container?.width}
+      backgroundColor={backgroundColor}
+    >
       <Story />
     </ComponentStorybookLayout>
   );