diff --git a/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx b/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
index 0a510f9828..49edc6aa87 100644
--- a/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
+++ b/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
@@ -226,6 +226,11 @@ describe('node actions menu details', () => {
     const user = userEvent.setup()
     renderDropdownContent()
 
+    const deleteMenuItem = screen.getByText('common.operation.delete').closest('[role="menuitem"]')
+    expect(deleteMenuItem).toHaveAttribute('data-variant', 'default')
+    expect(deleteMenuItem).toHaveClass('text-text-secondary')
+    expect(deleteMenuItem).toHaveClass('data-highlighted:text-text-destructive')
+
     await user.click(screen.getByText('workflow.panel.runThisStep'))
     await user.click(screen.getByText('workflow.common.copy'))
     await user.click(screen.getByText('workflow.common.duplicate'))
diff --git a/web/app/components/workflow/node-actions-menu/context-menu-content.tsx b/web/app/components/workflow/node-actions-menu/context-menu-content.tsx
index 8548450d59..0cbb1bccaa 100644
--- a/web/app/components/workflow/node-actions-menu/context-menu-content.tsx
+++ b/web/app/components/workflow/node-actions-menu/context-menu-content.tsx
@@ -8,6 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { ChangeBlockMenuTrigger } from './change-block-menu-trigger'
 import {
+  NODE_ACTIONS_MENU_DELETE_ITEM_CLASS_NAME,
   NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME,
   NodeActionsMenuAbout,
   NodeActionsMenuItemContent,
@@ -64,8 +65,7 @@ export function NodeActionsContextMenuContent(props: NodeActionsMenuProps) {
       {hasDeleteGroup && (
         <ContextMenuGroup>
           <ContextMenuItem
-            variant="destructive"
-            className={NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME}
+            className={NODE_ACTIONS_MENU_DELETE_ITEM_CLASS_NAME}
             onClick={model.handleDelete}
           >
             <NodeActionsMenuItemContent shortcut="workflow.delete">
diff --git a/web/app/components/workflow/node-actions-menu/dropdown-content.tsx b/web/app/components/workflow/node-actions-menu/dropdown-content.tsx
index 25d793c5f3..8d79b706f7 100644
--- a/web/app/components/workflow/node-actions-menu/dropdown-content.tsx
+++ b/web/app/components/workflow/node-actions-menu/dropdown-content.tsx
@@ -8,6 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { ChangeBlockMenuTrigger } from './change-block-menu-trigger'
 import {
+  NODE_ACTIONS_MENU_DELETE_ITEM_CLASS_NAME,
   NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME,
   NodeActionsMenuAbout,
   NodeActionsMenuItemContent,
@@ -64,8 +65,7 @@ export function NodeActionsDropdownContent(props: NodeActionsMenuProps) {
       {hasDeleteGroup && (
         <DropdownMenuGroup>
           <DropdownMenuItem
-            variant="destructive"
-            className={NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME}
+            className={NODE_ACTIONS_MENU_DELETE_ITEM_CLASS_NAME}
             onClick={model.handleDelete}
           >
             <NodeActionsMenuItemContent shortcut="workflow.delete">
diff --git a/web/app/components/workflow/node-actions-menu/shared.tsx b/web/app/components/workflow/node-actions-menu/shared.tsx
index a150025575..502629396a 100644
--- a/web/app/components/workflow/node-actions-menu/shared.tsx
+++ b/web/app/components/workflow/node-actions-menu/shared.tsx
@@ -5,6 +5,7 @@ import { ShortcutKbd } from '@/app/components/workflow/shortcuts/shortcut-kbd'
 
 export const NODE_ACTIONS_MENU_WIDTH_CLASS_NAME = 'w-[240px] rounded-lg'
 export const NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME = 'w-auto justify-between gap-4'
+export const NODE_ACTIONS_MENU_DELETE_ITEM_CLASS_NAME = `${NODE_ACTIONS_MENU_ITEM_WITH_SHORTCUT_CLASS_NAME} text-text-secondary data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive`
 
 export function NodeActionsMenuItemContent({
   children,