diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index c2dc37dd14..1478267b43 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -24,6 +24,7 @@ import { getLayoutByDagre } from './utils'
 import { useStore } from './store'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 export const useNodesInitialData = () => {
   const { t } = useTranslation()
@@ -46,17 +47,20 @@ export const useWorkflow = () => {
       getNodes,
       edges,
     } = store.getState()
+    const appId = useAppStore.getState().appDetail?.id
 
-    syncWorkflowDraft({
-      url: `/apps/${''}/workflows/draft`,
-      params: {
-        graph: {
-          nodes: getNodes(),
-          edges,
+    if (appId) {
+      syncWorkflowDraft({
+        url: `/apps/${appId}/workflows/draft`,
+        params: {
+          graph: {
+            nodes: getNodes(),
+            edges,
+          },
+          features: {},
         },
-        features: {},
-      },
-    })
+      })
+    }
   }, [store])
 
   const handleLayout = useCallback(async () => {
@@ -136,7 +140,8 @@ export const useWorkflow = () => {
     } = useStore.getState()
     setIsDragging(false)
     setHelpLine()
-  }, [])
+    handleSyncWorkflowDraft()
+  }, [handleSyncWorkflowDraft])
 
   const handleNodeEnter = useCallback<NodeMouseHandler>((_, node) => {
     const {
@@ -198,7 +203,8 @@ export const useWorkflow = () => {
         selectedNode.data._selected = true
     })
     setNodes(newNodes)
-  }, [store])
+    handleSyncWorkflowDraft()
+  }, [store, handleSyncWorkflowDraft])
 
   const handleNodeClick = useCallback<NodeMouseHandler>((_, node) => {
     if (useStore.getState().isDragging)
@@ -233,7 +239,8 @@ export const useWorkflow = () => {
       return filtered
     })
     setEdges(newEdges)
-  }, [store])
+    handleSyncWorkflowDraft()
+  }, [store, handleSyncWorkflowDraft])
 
   const handleNodeDelete = useCallback((nodeId: string) => {
     const {
@@ -255,7 +262,8 @@ export const useWorkflow = () => {
       return draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
     })
     setEdges(newEdges)
-  }, [store])
+    handleSyncWorkflowDraft()
+  }, [store, handleSyncWorkflowDraft])
 
   const handleNodeDataUpdate = useCallback(({ id, data }: { id: string; data: Record<string, any> }) => {
     const {
@@ -310,7 +318,8 @@ export const useWorkflow = () => {
       draft.push(newEdge)
     })
     setEdges(newEdges)
-  }, [store, nodesInitialData])
+    handleSyncWorkflowDraft()
+  }, [store, nodesInitialData, handleSyncWorkflowDraft])
 
   const handleNodeChange = useCallback((currentNodeId: string, nodeType: BlockEnum, sourceHandle?: string) => {
     const {
@@ -360,8 +369,9 @@ export const useWorkflow = () => {
         return filtered
       })
       setEdges(newEdges)
+      handleSyncWorkflowDraft()
     }
-  }, [store, nodesInitialData])
+  }, [store, nodesInitialData, handleSyncWorkflowDraft])
 
   const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
     const {
@@ -401,7 +411,8 @@ export const useWorkflow = () => {
         draft.splice(index, 1)
     })
     setEdges(newEdges)
-  }, [store])
+    handleSyncWorkflowDraft()
+  }, [store, handleSyncWorkflowDraft])
 
   const handleEdgesChange = useCallback<OnEdgesChange>((changes) => {
     const {
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 0f7cf5be13..ec61bcf495 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -3,7 +3,6 @@ import {
   memo,
   useMemo,
 } from 'react'
-import { useParams } from 'next/navigation'
 import useSWR from 'swr'
 import { useKeyPress } from 'ahooks'
 import ReactFlow, {
@@ -120,10 +119,7 @@ const WorkflowWrap: FC<WorkflowProps> = ({
   edges,
 }) => {
   const appDetail = useAppStore(state => state.appDetail)
-  console.log(appDetail?.name)
-  console.log(appDetail?.description)
-  const appId = useParams().appId
-  const { data, isLoading, error } = useSWR(`/apps/${appId}/workflows/draft`, fetchWorkflowDraft)
+  const { data, isLoading, error } = useSWR(appDetail?.id ? `/apps/${appDetail.id}/workflows/draft` : null, fetchWorkflowDraft)
   const nodesInitialData = useNodesInitialData()
 
   const startNode = {
@@ -155,9 +151,9 @@ const WorkflowWrap: FC<WorkflowProps> = ({
     return []
   }, [data, nodes])
 
-  if (error) {
+  if (error && appDetail) {
     syncWorkflowDraft({
-      url: `/apps/${appId}/workflows/draft`,
+      url: `/apps/${appDetail.id}/workflows/draft`,
       params: {
         graph: {
           nodes: [startNode],
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 65da955ab7..3e482388b2 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -31,7 +31,7 @@ const NodeControl: FC<NodeControlProps> = ({
         )
       }
       <div
-        className='flex items-center justify-center w-5 h-5 cursor-pointer'
+        className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'
         onClick={() => {
           handleNodeDataUpdate({
             id: nodeId,
@@ -45,7 +45,7 @@ const NodeControl: FC<NodeControlProps> = ({
             : <Play className='w-3 h-3' />
         }
       </div>
-      <div className='flex items-center justify-center w-5 h-5 cursor-pointer'>
+      <div className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'>
         <DotsHorizontal className='w-3 h-3' />
       </div>
     </div>