diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index e9ecf65fb2..2439f1306e 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -70,7 +70,7 @@ export const useWorkflow = () => {
   const nodesInitialData = useNodesInitialData()
   const featuresStore = useFeaturesStore()
 
-  const shouldDebouncedSyncWorkflowDraft = () => {
+  const shouldDebouncedSyncWorkflowDraft = useCallback(() => {
     const {
       getNodes,
       edges,
@@ -111,13 +111,20 @@ export const useWorkflow = () => {
         useStore.setState({ draftUpdatedAt: res.updated_at })
       })
     }
-  }
+  }, [store, reactFlow, featuresStore])
 
-  const { run: handleSyncWorkflowDraft } = useDebounceFn(shouldDebouncedSyncWorkflowDraft, {
+  const { run: debouncedSyncWorkflowDraft } = useDebounceFn(shouldDebouncedSyncWorkflowDraft, {
     wait: 2000,
     trailing: true,
   })
 
+  const handleSyncWorkflowDraft = useCallback((shouldDelay?: boolean) => {
+    if (shouldDelay)
+      debouncedSyncWorkflowDraft()
+    else
+      shouldDebouncedSyncWorkflowDraft()
+  }, [debouncedSyncWorkflowDraft, shouldDebouncedSyncWorkflowDraft])
+
   const handleLayout = useCallback(async () => {
     const {
       getNodes,
@@ -332,11 +339,11 @@ export const useWorkflow = () => {
     if (!cancelSelection && selectedNode?.id === nodeId)
       return
 
-    const newNodes = produce(getNodes(), (draft) => {
+    const newNodes = produce(nodes, (draft) => {
       draft.forEach(node => node.data.selected = false)
       const selectedNode = draft.find(node => node.id === nodeId)!
 
-      if (!cancelSelection)
+      if (!cancelSelection && selectedNode)
         selectedNode.data.selected = true
     })
     setNodes(newNodes)
@@ -433,7 +440,7 @@ export const useWorkflow = () => {
       currentNode.data = { ...currentNode.data, ...data }
     })
     setNodes(newNodes)
-    handleSyncWorkflowDraft()
+    handleSyncWorkflowDraft(true)
   }, [store, handleSyncWorkflowDraft])
 
   const handleNodeAddNext = useCallback((
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
index c892fb6a73..f34b5d8e60 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
 import {
   getConnectedEdges,
   getOutgoers,
@@ -10,10 +10,10 @@ import type {
   Branch,
   Node,
 } from '../../../../types'
+import { BlockEnum } from '../../../../types'
 import Add from './add'
 import Item from './item'
 import Line from './line'
-import { BlockEnum } from '@/app/components/workflow/types'
 
 type NextStepProps = {
   selectedNode: Node
@@ -22,15 +22,8 @@ const NextStep = ({
   selectedNode,
 }: NextStepProps) => {
   const store = useStoreApi()
-  const branches = useMemo(() => {
-    const nodeData = selectedNode.data
-
-    if (nodeData.type === BlockEnum.IfElse)
-      return nodeData._targetBranches
-
-    if (nodeData.type === BlockEnum.QuestionClassifier)
-      return (nodeData as any).classes
-  }, [selectedNode])
+  const branches = selectedNode.data._targetBranches
+  const nodeWithBranches = selectedNode.data.type === BlockEnum.IfElse || selectedNode.data.type === BlockEnum.QuestionClassifier
   const edges = useEdges()
   const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges)
   const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id)
@@ -46,7 +39,7 @@ const NextStep = ({
       <Line linesNumber={branches ? branches.length : 1} />
       <div className='grow'>
         {
-          !branches && !!outgoers.length && (
+          !nodeWithBranches && !!outgoers.length && (
             <Item
               nodeId={outgoers[0].id}
               data={outgoers[0].data}
@@ -55,7 +48,7 @@ const NextStep = ({
           )
         }
         {
-          !branches && !outgoers.length && (
+          !nodeWithBranches && !outgoers.length && (
             <Add
               nodeId={selectedNode!.id}
               sourceHandle='source'
@@ -63,7 +56,7 @@ const NextStep = ({
           )
         }
         {
-          branches?.length && (
+          !!branches?.length && nodeWithBranches && (
             branches.map((branch: Branch) => {
               const connected = connectedEdges.find(edge => edge.sourceHandle === branch.id)
               const target = outgoers.find(outgoer => outgoer.id === connected?.target)
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
index 0d7343caa4..bb5f22d595 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-config.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -35,6 +35,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
   const handleClassesChange = useCallback((newClasses: any) => {
     const newInputs = produce(inputs, (draft) => {
       draft.classes = newClasses
+      draft._targetBranches = newClasses
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 81e421a36e..da50c195b5 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -95,7 +95,7 @@ const ZoomInOut: FC = () => {
           <ChevronDown className='ml-1 w-4 h-4' />
         </div>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-10'>
         <div className='w-[168px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
           {
             ZOOM_IN_OUT_OPTIONS.map((options, i) => (
diff --git a/web/app/components/workflow/utils.ts b/web/app/components/workflow/utils.ts
index 551cb7c84e..f9749d0187 100644
--- a/web/app/components/workflow/utils.ts
+++ b/web/app/components/workflow/utils.ts
@@ -1,4 +1,3 @@
-import produce from 'immer'
 import {
   getConnectedEdges,
   getOutgoers,
@@ -82,42 +81,38 @@ export const nodesLevelOrderTraverse = (
 }
 
 export const initialNodes = (nodes: Node[]) => {
-  const newNodes = produce(nodes, (draft) => {
-    draft.forEach((node) => {
-      node.type = 'custom'
+  return nodes.map((node) => {
+    node.type = 'custom'
 
-      if (node.data.type === BlockEnum.IfElse) {
-        node.data._targetBranches = [
-          {
-            id: 'true',
-            name: 'IS TRUE',
-          },
-          {
-            id: 'false',
-            name: 'IS FALSE',
-          },
-        ]
-      }
+    if (node.data.type === BlockEnum.IfElse) {
+      node.data._targetBranches = [
+        {
+          id: 'true',
+          name: 'IS TRUE',
+        },
+        {
+          id: 'false',
+          name: 'IS FALSE',
+        },
+      ]
+    }
 
-      if (node.data.type === BlockEnum.QuestionClassifier) {
-        node.data._targetBranches = (node.data as QuestionClassifierNodeType).classes.map((topic) => {
-          return topic
-        })
-      }
-    })
+    if (node.data.type === BlockEnum.QuestionClassifier) {
+      node.data._targetBranches = (node.data as QuestionClassifierNodeType).classes.map((topic) => {
+        return topic
+      })
+    }
+
+    return node
   })
-
-  return newNodes
 }
 
 export const initialEdges = (edges: Edge[]) => {
-  const newEdges = produce(edges, (draft) => {
-    draft.forEach((edge) => {
-      edge.type = 'custom'
-    })
-  })
+  return edges.map((edge) => {
+    edge.type = 'custom'
 
-  return newEdges
+    return edge
+  })
 }
 
 export type PositionMap = {