diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 53af9c45ff..362b56e0a4 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -37,6 +37,7 @@ export type ISelectProps = {
   bgClassName?: string
   placeholder?: string
   overlayClassName?: string
+  optionWrapClassName?: string
   optionClassName?: string
   renderOption?: ({
     item,
@@ -172,6 +173,7 @@ const SimpleSelect: FC<ISelectProps> = ({
   disabled = false,
   onSelect,
   placeholder,
+  optionWrapClassName,
   optionClassName,
   renderOption,
 }) => {
@@ -231,7 +233,7 @@ const SimpleSelect: FC<ISelectProps> = ({
             leaveTo="opacity-0"
           >
 
-            <Listbox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
+            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) => (
                 <Listbox.Option
                   key={item.value}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 508d21ec4b..35dae924be 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -11,8 +11,10 @@ import type {
   Condition,
   HandleAddSubVariableCondition,
   HandleRemoveCondition,
+  HandleToggleSubVariableConditionLogicalOperator,
   HandleUpdateCondition,
   HandleUpdateSubVariableCondition,
+  handleRemoveSubVariableCondition,
 } from '../../types'
 import {
   ComparisonOperator,
@@ -41,13 +43,15 @@ type ConditionItemProps = {
   file?: { key: string }
   isSubVariableKey?: boolean
   subVariableKeyCaseId?: string
-  onRemoveCondition: HandleRemoveCondition
-  onUpdateCondition: HandleUpdateCondition
+  onRemoveCondition?: HandleRemoveCondition
+  onUpdateCondition?: HandleUpdateCondition
+  onAddSubVariableCondition?: HandleAddSubVariableCondition
+  onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
   onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
+  onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
   nodesOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   numberVariables: NodeOutPutVar[]
-  onAddSubVariableCondition?: HandleAddSubVariableCondition
 }
 const ConditionItem = ({
   disabled,
@@ -58,11 +62,13 @@ const ConditionItem = ({
   isSubVariableKey,
   onRemoveCondition,
   onUpdateCondition,
+  onAddSubVariableCondition,
+  onRemoveSubVariableCondition,
   onUpdateSubVariableCondition,
+  onToggleSubVariableConditionLogicalOperator,
   nodesOutputVars,
   availableNodes,
   numberVariables,
-  onAddSubVariableCondition,
 }: ConditionItemProps) => {
   const { t } = useTranslation()
 
@@ -72,7 +78,7 @@ const ConditionItem = ({
     if (isSubVariableKey)
       onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
     else
-      onUpdateCondition(caseId, condition.id, newCondition)
+      onUpdateCondition?.(caseId, condition.id, newCondition)
   }, [caseId, condition, conditionId, isSubVariableKey, onUpdateCondition, onUpdateSubVariableCondition])
 
   const handleUpdateConditionOperator = useCallback((value: ComparisonOperator) => {
@@ -97,8 +103,8 @@ const ConditionItem = ({
       numberVarType,
       value: '',
     }
-    onUpdateCondition(caseId, condition.id, newCondition)
-  }, [caseId, condition, onUpdateCondition])
+    doUpdateCondition(newCondition)
+  }, [condition, doUpdateCondition])
 
   const isSelect = condition.comparison_operator && [ComparisonOperator.in, ComparisonOperator.notIn, ComparisonOperator.allOf].includes(condition.comparison_operator)
   const selectOptions = useMemo(() => {
@@ -136,6 +142,13 @@ const ConditionItem = ({
     onUpdateSubVariableCondition?.(caseId, conditionId, condition.id, newCondition)
   }, [caseId, condition, conditionId, onUpdateSubVariableCondition])
 
+  const doRemoveCondition = useCallback(() => {
+    if (isSubVariableKey)
+      onRemoveSubVariableCondition?.(caseId, conditionId, condition.id)
+    else
+      onRemoveCondition?.(caseId, condition.id)
+  }, [caseId, condition, conditionId, isSubVariableKey, onRemoveCondition, onRemoveSubVariableCondition])
+
   return (
     <div className='flex mb-1 last-of-type:mb-0'>
       <div className={cn(
@@ -149,6 +162,7 @@ const ConditionItem = ({
                 <Select
                   wrapperClassName='h-6'
                   className='pl-0 text-xs'
+                  optionWrapClassName='w-[165px] max-h-none'
                   defaultValue={condition.key}
                   items={subVarOptions}
                   onSelect={item => handleSubVarKeyChange(item.value as string)}
@@ -218,19 +232,11 @@ const ConditionItem = ({
                 caseId={caseId}
                 conditionId={conditionId}
                 readOnly={!!disabled}
-                nodeId=''
                 cases={condition.sub_variable_condition ? [condition.sub_variable_condition] : []}
                 handleAddSubVariableCondition={onAddSubVariableCondition}
-                handleRemoveCase={() => { }}
-                handleAddCondition={() => { }}
-                handleUpdateCondition={onUpdateCondition}
+                handleRemoveSubVariableCondition={onRemoveSubVariableCondition}
                 handleUpdateSubVariableCondition={onUpdateSubVariableCondition}
-                handleRemoveCondition={() => { }}
-                handleUpdateConditionLogicalOperator={() => { }}
-                nodesOutputVars={[]}
-                availableNodes={[]}
-                varsIsVarFileAttribute={{}}
-                filterVar={() => true}
+                handleToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
               />
             </div>
           )
@@ -240,7 +246,7 @@ const ConditionItem = ({
         className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        onClick={() => onRemoveCondition(caseId, condition.id)}
+        onClick={doRemoveCondition}
       >
         <RiDeleteBinLine className='w-4 h-4' />
       </div>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 2eb27883ed..4eb95e8749 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -1,18 +1,21 @@
 import { RiLoopLeftLine } from '@remixicon/react'
-import { LogicalOperator } from '../../types'
+import { useCallback } from 'react'
 import type {
   CaseItem,
   HandleAddSubVariableCondition,
   HandleRemoveCondition,
+  HandleToggleConditionLogicalOperator,
+  HandleToggleSubVariableConditionLogicalOperator,
   HandleUpdateCondition,
-  HandleUpdateConditionLogicalOperator,
   HandleUpdateSubVariableCondition,
+  handleRemoveSubVariableCondition,
 } from '../../types'
 import ConditionItem from './condition-item'
 import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
 
 type ConditionListProps = {
   isSubVariable?: boolean
@@ -20,15 +23,17 @@ type ConditionListProps = {
   caseId: string
   conditionId?: string
   caseItem: CaseItem
-  onUpdateCondition: HandleUpdateCondition
-  onUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
-  onRemoveCondition: HandleRemoveCondition
+  onRemoveCondition?: HandleRemoveCondition
+  onUpdateCondition?: HandleUpdateCondition
+  onToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
   nodesOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   numberVariables: NodeOutPutVar[]
   varsIsVarFileAttribute: Record<string, boolean>
   onAddSubVariableCondition?: HandleAddSubVariableCondition
+  onRemoveSubVariableCondition?: handleRemoveSubVariableCondition
   onUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
+  onToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
 }
 const ConditionList = ({
   isSubVariable,
@@ -37,19 +42,28 @@ const ConditionList = ({
   conditionId,
   caseItem,
   onUpdateCondition,
-  onUpdateConditionLogicalOperator,
   onRemoveCondition,
+  onToggleConditionLogicalOperator,
+  onAddSubVariableCondition,
+  onRemoveSubVariableCondition,
+  onUpdateSubVariableCondition,
+  onToggleSubVariableConditionLogicalOperator,
   nodesOutputVars,
   availableNodes,
   numberVariables,
   varsIsVarFileAttribute,
-  onAddSubVariableCondition,
-  onUpdateSubVariableCondition,
 }: ConditionListProps) => {
   const { conditions, logical_operator } = caseItem
 
+  const doToggleConditionLogicalOperator = useCallback(() => {
+    if (isSubVariable)
+      onToggleSubVariableConditionLogicalOperator?.(caseId!, conditionId!)
+    else
+      onToggleConditionLogicalOperator?.(caseId)
+  }, [caseId, conditionId, isSubVariable, onToggleConditionLogicalOperator, onToggleSubVariableConditionLogicalOperator])
+
   return (
-    <div className='relative pl-[60px]'>
+    <div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
       {
         conditions.length > 1 && (
           <div className='absolute top-0 bottom-0 left-0 w-[60px]'>
@@ -57,9 +71,7 @@ const ConditionList = ({
             <div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
             <div
               className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer'
-              onClick={() => {
-                onUpdateConditionLogicalOperator(caseItem.case_id, caseItem.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and)
-              }}
+              onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
               <RiLoopLeftLine className='ml-0.5 w-3 h-3' />
@@ -77,13 +89,15 @@ const ConditionList = ({
             condition={condition}
             onUpdateCondition={onUpdateCondition}
             onRemoveCondition={onRemoveCondition}
+            onAddSubVariableCondition={onAddSubVariableCondition}
+            onRemoveSubVariableCondition={onRemoveSubVariableCondition}
+            onUpdateSubVariableCondition={onUpdateSubVariableCondition}
+            onToggleSubVariableConditionLogicalOperator={onToggleSubVariableConditionLogicalOperator}
             nodesOutputVars={nodesOutputVars}
             availableNodes={availableNodes}
             numberVariables={numberVariables}
             file={varsIsVarFileAttribute[condition.id] ? { key: (condition.variable_selector || []).slice(-1)[0] } : undefined}
             isSubVariableKey={isSubVariable}
-            onAddSubVariableCondition={onAddSubVariableCondition}
-            onUpdateSubVariableCondition={onUpdateSubVariableCondition}
           />
         ))
       }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 1ce7ff5013..67a4f728d1 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -8,7 +8,7 @@ import {
   RiDeleteBinLine,
   RiDraggable,
 } from '@remixicon/react'
-import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleUpdateCondition, HandleUpdateConditionLogicalOperator, HandleUpdateSubVariableCondition } from '../types'
+import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, handleRemoveSubVariableCondition } from '../types'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
@@ -21,28 +21,30 @@ type Props = {
   isSubVariable?: boolean
   caseId?: string
   conditionId?: string
-  nodeId: string
   cases: CaseItem[]
   readOnly: boolean
   handleSortCase?: (sortedCases: (CaseItem & { id: string })[]) => void
-  handleRemoveCase: (caseId: string) => void
+  handleRemoveCase?: (caseId: string) => void
   handleAddCondition?: HandleAddCondition
+  handleRemoveCondition?: HandleRemoveCondition
+  handleUpdateCondition?: HandleUpdateCondition
+  handleToggleConditionLogicalOperator?: HandleToggleConditionLogicalOperator
   handleAddSubVariableCondition?: HandleAddSubVariableCondition
+  handleRemoveSubVariableCondition?: handleRemoveSubVariableCondition
   handleUpdateSubVariableCondition?: HandleUpdateSubVariableCondition
-  handleUpdateCondition: HandleUpdateCondition
-  handleRemoveCondition: HandleRemoveCondition
-  handleUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
-  nodesOutputVars: NodeOutPutVar[]
-  availableNodes: Node[]
-  varsIsVarFileAttribute: Record<string, boolean>
-  filterVar: (varPayload: Var) => boolean
+  handleToggleSubVariableConditionLogicalOperator?: HandleToggleSubVariableConditionLogicalOperator
+  nodeId?: string
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  varsIsVarFileAttribute?: Record<string, boolean>
+  filterVar?: (varPayload: Var) => boolean
 }
 
 const ConditionWrap: FC<Props> = ({
   isSubVariable,
   caseId,
   conditionId,
-  nodeId: id,
+  nodeId: id = '',
   cases = [],
   readOnly,
   handleSortCase = () => { },
@@ -50,13 +52,15 @@ const ConditionWrap: FC<Props> = ({
   handleUpdateCondition,
   handleAddCondition,
   handleRemoveCondition,
+  handleToggleConditionLogicalOperator,
   handleAddSubVariableCondition,
+  handleRemoveSubVariableCondition,
   handleUpdateSubVariableCondition,
-  handleUpdateConditionLogicalOperator,
-  nodesOutputVars,
-  availableNodes,
-  varsIsVarFileAttribute,
-  filterVar,
+  handleToggleSubVariableConditionLogicalOperator,
+  nodesOutputVars = [],
+  availableNodes = [],
+  varsIsVarFileAttribute = {},
+  filterVar = () => true,
 }) => {
   const { t } = useTranslation()
 
@@ -122,13 +126,15 @@ const ConditionWrap: FC<Props> = ({
                         conditionId={conditionId}
                         onUpdateCondition={handleUpdateCondition}
                         onRemoveCondition={handleRemoveCondition}
-                        onUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
+                        onToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
                         nodesOutputVars={nodesOutputVars}
                         availableNodes={availableNodes}
                         numberVariables={getAvailableVars(id, '', filterNumberVar)}
                         varsIsVarFileAttribute={varsIsVarFileAttribute}
                         onAddSubVariableCondition={handleAddSubVariableCondition}
+                        onRemoveSubVariableCondition={handleRemoveSubVariableCondition}
                         onUpdateSubVariableCondition={handleUpdateSubVariableCondition}
+                        onToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
                         isSubVariable={isSubVariable}
                       />
                     </div>
@@ -168,7 +174,7 @@ const ConditionWrap: FC<Props> = ({
                         size='small'
                         variant='ghost'
                         disabled={readOnly}
-                        onClick={() => handleRemoveCase(item.case_id)}
+                        onClick={() => handleRemoveCase?.(item.case_id)}
                         onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
                         onMouseLeave={() => setWillDeleteCaseId('')}
                       >
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index c83e66954d..9de6ff05f6 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -30,9 +30,11 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
     handleAddCondition,
     handleUpdateCondition,
     handleRemoveCondition,
+    handleToggleConditionLogicalOperator,
     handleAddSubVariableCondition,
+    handleRemoveSubVariableCondition,
     handleUpdateSubVariableCondition,
-    handleUpdateConditionLogicalOperator,
+    handleToggleSubVariableConditionLogicalOperator,
     nodesOutputVars,
     availableNodes,
     varsIsVarFileAttribute,
@@ -48,11 +50,13 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
         handleSortCase={handleSortCase}
         handleRemoveCase={handleRemoveCase}
         handleAddCondition={handleAddCondition}
-        handleUpdateCondition={handleUpdateCondition}
         handleRemoveCondition={handleRemoveCondition}
-        handleUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
+        handleUpdateCondition={handleUpdateCondition}
+        handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
         handleAddSubVariableCondition={handleAddSubVariableCondition}
+        handleRemoveSubVariableCondition={handleRemoveSubVariableCondition}
         handleUpdateSubVariableCondition={handleUpdateSubVariableCondition}
+        handleToggleSubVariableConditionLogicalOperator={handleToggleSubVariableConditionLogicalOperator}
         nodesOutputVars={nodesOutputVars}
         availableNodes={availableNodes}
         varsIsVarFileAttribute={varsIsVarFileAttribute}
diff --git a/web/app/components/workflow/nodes/if-else/types.ts b/web/app/components/workflow/nodes/if-else/types.ts
index 0530c32ed9..6fabe70d50 100644
--- a/web/app/components/workflow/nodes/if-else/types.ts
+++ b/web/app/components/workflow/nodes/if-else/types.ts
@@ -58,8 +58,11 @@ export type IfElseNodeType = CommonNodeType & {
 }
 
 export type HandleAddCondition = (caseId: string, valueSelector: ValueSelector, varItem: Var) => void
-export type HandleAddSubVariableCondition = (caseId: string, conditionId: string) => void
 export type HandleRemoveCondition = (caseId: string, conditionId: string) => void
 export type HandleUpdateCondition = (caseId: string, conditionId: string, newCondition: Condition) => void
+export type HandleToggleConditionLogicalOperator = (caseId: string) => void
+
+export type HandleAddSubVariableCondition = (caseId: string, conditionId: string) => void
+export type handleRemoveSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string) => void
 export type HandleUpdateSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string, newSubCondition: Condition) => void
-export type HandleUpdateConditionLogicalOperator = (caseId: string, value: LogicalOperator) => void
+export type HandleToggleSubVariableConditionLogicalOperator = (caseId: string, conditionId: string) => void
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index b01295bbf2..e475a9a2b9 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -11,8 +11,9 @@ import type {
   HandleAddCondition,
   HandleAddSubVariableCondition,
   HandleRemoveCondition,
+  HandleToggleConditionLogicalOperator,
+  HandleToggleSubVariableConditionLogicalOperator,
   HandleUpdateCondition,
-  HandleUpdateConditionLogicalOperator,
   HandleUpdateSubVariableCondition,
   IfElseNodeType,
 } from './types'
@@ -166,26 +167,18 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
-  // console.log(inputs.cases)
 
-  const handleUpdateSubVariableCondition = useCallback<HandleUpdateSubVariableCondition>((caseId, conditionId, subConditionId, newSubCondition) => {
+  const handleToggleConditionLogicalOperator = useCallback<HandleToggleConditionLogicalOperator>((caseId) => {
     const newInputs = produce(inputs, (draft) => {
       const targetCase = draft.cases?.find(item => item.case_id === caseId)
-      if (targetCase) {
-        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
-        if (targetCondition && targetCondition.sub_variable_condition) {
-          const targetSubCondition = targetCondition.sub_variable_condition.conditions.find(item => item.id === subConditionId)
-          if (targetSubCondition)
-            Object.assign(targetSubCondition, newSubCondition)
-        }
-      }
+      if (targetCase)
+        targetCase.logical_operator = targetCase.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
 
   const handleAddSubVariableCondition = useCallback<HandleAddSubVariableCondition>((caseId: string, conditionId: string) => {
     const newInputs = produce(inputs, (draft) => {
-      // debugger
       const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
       if (!condition)
         return
@@ -213,11 +206,43 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
-  const handleUpdateConditionLogicalOperator = useCallback<HandleUpdateConditionLogicalOperator>((caseId, value) => {
+  const handleRemoveSubVariableCondition = useCallback((caseId: string, conditionId: string, subConditionId: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
+      if (!condition)
+        return
+      if (!condition?.sub_variable_condition)
+        return
+      const subVarCondition = condition.sub_variable_condition
+      if (subVarCondition)
+        subVarCondition.conditions = subVarCondition.conditions.filter(item => item.id !== subConditionId)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleUpdateSubVariableCondition = useCallback<HandleUpdateSubVariableCondition>((caseId, conditionId, subConditionId, newSubCondition) => {
     const newInputs = produce(inputs, (draft) => {
       const targetCase = draft.cases?.find(item => item.case_id === caseId)
-      if (targetCase)
-        targetCase.logical_operator = value
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition && targetCondition.sub_variable_condition) {
+          const targetSubCondition = targetCondition.sub_variable_condition.conditions.find(item => item.id === subConditionId)
+          if (targetSubCondition)
+            Object.assign(targetSubCondition, newSubCondition)
+        }
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleToggleSubVariableConditionLogicalOperator = useCallback<HandleToggleSubVariableConditionLogicalOperator>((caseId, conditionId) => {
+    const newInputs = produce(inputs, (draft) => {
+      const targetCase = draft.cases?.find(item => item.case_id === caseId)
+      if (targetCase) {
+        const targetCondition = targetCase.conditions.find(item => item.id === conditionId)
+        if (targetCondition && targetCondition.sub_variable_condition)
+          targetCondition.sub_variable_condition.logical_operator = targetCondition.sub_variable_condition.logical_operator === LogicalOperator.and ? LogicalOperator.or : LogicalOperator.and
+      }
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
@@ -233,9 +258,11 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     handleAddCondition,
     handleRemoveCondition,
     handleUpdateCondition,
+    handleToggleConditionLogicalOperator,
     handleAddSubVariableCondition,
     handleUpdateSubVariableCondition,
-    handleUpdateConditionLogicalOperator,
+    handleRemoveSubVariableCondition,
+    handleToggleSubVariableConditionLogicalOperator,
     nodesOutputVars: availableVars,
     availableNodes: availableNodesWithParent,
     nodesOutputNumberVars: availableNumberVars,