diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
index 3717bd8a9145..ac6eb8cceb4d 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
@@ -20,7 +20,7 @@ const StyledStepNodeType = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm}
     ${({ theme }) => theme.border.radius.sm} 0 0;
 
-  color: ${({ theme }) => theme.color.gray50};
+  color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 
@@ -53,7 +53,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
   .selectable.selected &,
   .selectable:focus &,
   .selectable:focus-visible & {
-    background-color: ${({ theme }) => theme.color.blue10};
+    background-color: ${({ theme }) => theme.accent.quaternary};
     border-color: ${({ theme }) => theme.color.blue};
   }
 `;
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
index 2c98c1a30b10..576fa288c41b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@@ -13,6 +13,7 @@ import {
   WorkflowDiagramNodeType,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   applyEdgeChanges,
@@ -29,7 +30,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui';
+import { isDefined, THEME_COMMON } from 'twenty-ui';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;
@@ -87,6 +88,8 @@ export const WorkflowDiagramCanvasBase = ({
   >;
   children?: React.ReactNode;
 }) => {
+  const theme = useTheme();
+
   const reactflow = useReactFlow();
   const setWorkflowReactFlowRefState = useSetRecoilState(
     workflowReactFlowRefState,
@@ -219,7 +222,7 @@ export const WorkflowDiagramCanvasBase = ({
         nodesDraggable={false}
         paneClickDistance={10} // Fix small unwanted user dragging does not select node
       >
-        <Background color={GRAY_SCALE.gray25} size={2} />
+        <Background color={theme.border.color.medium} size={2} />
 
         {children}
       </ReactFlow>