diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
index 7ced05652..63e589dce 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
@@ -11,7 +11,11 @@ import { IconAlertTriangle, IconX } from 'twenty-ui/display';
 
 const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
   background-color: ${({ theme, danger }) =>
-    danger ? theme.background.danger : theme.accent.quaternary};
+    danger ? theme.adaptiveColors.red1 : theme.adaptiveColors.blue1};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ theme, danger }) =>
+    danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
   border-radius: 4px;
   height: 20px;
   box-sizing: border-box;
@@ -61,7 +65,7 @@ const StyledDelete = styled.button<{ danger: boolean }>`
 
   &:hover {
     background-color: ${({ theme, danger }) =>
-      danger ? theme.color.red20 : theme.accent.secondary};
+      danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
index 9ce20772a..064349376 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
@@ -1,5 +1,7 @@
 import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
 import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
@@ -18,10 +20,52 @@ export const Default: Story = {
   args: {
     rawVariableName: `{{${MOCKED_STEP_ID}.address.street1}}`,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Street 1')).toBeVisible();
+  },
+};
+
+export const DefaultDeleteHovered: Story = {
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+  args: {
+    rawVariableName: `{{${MOCKED_STEP_ID}.address.street1}}`,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Street 1')).toBeVisible();
+  },
 };
 
 export const WithVariableNotFound: Story = {
   args: {
     rawVariableName: `{{${MOCKED_STEP_ID}.unknown.variable}}`,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Not Found')).toBeVisible();
+  },
+};
+
+export const WithVariableNotFoundDeleteHover: Story = {
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+  args: {
+    rawVariableName: `{{${MOCKED_STEP_ID}.unknown.variable}}`,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Not Found')).toBeVisible();
+  },
 };