diff --git a/web/app/components/base/ui/context-menu/index.tsx b/web/app/components/base/ui/context-menu/index.tsx
index 4ff7241b23..2e18af249e 100644
--- a/web/app/components/base/ui/context-menu/index.tsx
+++ b/web/app/components/base/ui/context-menu/index.tsx
@@ -124,7 +124,7 @@ export function ContextMenuItem({
 }: ContextMenuItemProps) {
   return (
     <BaseContextMenu.Item
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       {...props}
     />
   )
@@ -142,7 +142,7 @@ export function ContextMenuLinkItem({
 }: ContextMenuLinkItemProps) {
   return (
     <BaseContextMenu.LinkItem
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       closeOnClick={closeOnClick}
       {...props}
     />
@@ -213,7 +213,7 @@ export function ContextMenuSubTrigger({
 }: ContextMenuSubTriggerProps) {
   return (
     <BaseContextMenu.SubmenuTrigger
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       {...props}
     >
       {children}
diff --git a/web/app/components/base/ui/dropdown-menu/index.tsx b/web/app/components/base/ui/dropdown-menu/index.tsx
index 9046e25ca2..b2b0b01c46 100644
--- a/web/app/components/base/ui/dropdown-menu/index.tsx
+++ b/web/app/components/base/ui/dropdown-menu/index.tsx
@@ -182,7 +182,7 @@ export function DropdownMenuSubTrigger({
 }: DropdownMenuSubTriggerProps) {
   return (
     <Menu.SubmenuTrigger
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       {...props}
     >
       {children}
@@ -235,7 +235,7 @@ export function DropdownMenuItem({
 }: DropdownMenuItemProps) {
   return (
     <Menu.Item
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       {...props}
     />
   )
@@ -253,7 +253,7 @@ export function DropdownMenuLinkItem({
 }: DropdownMenuLinkItemProps) {
   return (
     <Menu.LinkItem
-      className={cn(overlayRowClassName, destructive && 'text-text-destructive', className)}
+      className={cn(overlayRowClassName, destructive && 'text-text-destructive data-highlighted:bg-state-destructive-hover', className)}
       closeOnClick={closeOnClick}
       {...props}
     />
diff --git a/web/app/components/workflow/edge-contextmenu.tsx b/web/app/components/workflow/edge-contextmenu.tsx
index cf9e70ef81..be0a9caad4 100644
--- a/web/app/components/workflow/edge-contextmenu.tsx
+++ b/web/app/components/workflow/edge-contextmenu.tsx
@@ -48,7 +48,8 @@ const EdgeContextmenu = () => {
         popupClassName="rounded-lg"
       >
         <ContextMenuItem
-          className="justify-between gap-4 px-3 text-text-secondary data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
+          destructive
+          className="justify-between gap-4 px-3"
           onClick={() => handleEdgeDeleteById(edgeMenu.edgeId)}
         >
           <span>{t('common:operation.delete')}</span>