diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
index 27ff1ecedb..1d26e6525a 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
@@ -1,11 +1,11 @@
+'use client'
+
 import Workflow from '@/app/components/workflow'
 
-const Page = async ({
-  params: { appId },
-}: any) => {
+const Page = () => {
   return (
     <div className='w-full h-full overflow-x-auto'>
-      <Workflow appId={appId} />
+      <Workflow />
     </div>
   )
 }
diff --git a/web/app/components/workflow/context.tsx b/web/app/components/workflow/context.tsx
index 0fa2331f0d..77c8291389 100644
--- a/web/app/components/workflow/context.tsx
+++ b/web/app/components/workflow/context.tsx
@@ -8,14 +8,13 @@ type WorkflowStore = ReturnType<typeof createWorkflowStore>
 export const WorkflowContext = createContext<WorkflowStore | null>(null)
 
 type WorkflowProviderProps = {
-  appId: string
   children: React.ReactNode
 }
-export const WorkflowContextProvider = ({ appId, children }: WorkflowProviderProps) => {
+export const WorkflowContextProvider = ({ children }: WorkflowProviderProps) => {
   const storeRef = useRef<WorkflowStore>()
 
   if (!storeRef.current)
-    storeRef.current = createWorkflowStore(appId)
+    storeRef.current = createWorkflowStore()
 
   return (
     <WorkflowContext.Provider value={storeRef.current}>
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index 328f7ae514..6e38c7d2eb 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -351,6 +351,7 @@ export const useWorkflowInit = () => {
   const { handleFetchAllTools } = useFetchToolsData()
   const appDetail = useAppStore(state => state.appDetail)!
   const { data, isLoading, error, mutate } = useSWR(`/apps/${appDetail.id}/workflows/draft`, fetchWorkflowDraft)
+  workflowStore.setState({ appId: appDetail.id })
 
   const handleFetchPreloadData = useCallback(async () => {
     try {
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 8bb1c32d6c..80fff8e075 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -84,11 +84,11 @@ const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [])
 
-  // useEffect(() => {
-  //   return () => {
-  //     handleSyncWorkflowDraft(true)
-  //   }
-  // }, [])
+  useEffect(() => {
+    return () => {
+      handleSyncWorkflowDraft(true)
+    }
+  }, [])
 
   const handleSyncWorkflowDraftWhenPageClose = useCallback(() => {
     if (document.visibilityState === 'hidden')
@@ -250,9 +250,9 @@ const WorkflowWrap = memo(() => {
 })
 WorkflowWrap.displayName = 'WorkflowWrap'
 
-const WorkflowContainer = ({ appId }: any) => {
+const WorkflowContainer = () => {
   return (
-    <WorkflowContextProvider appId={appId}>
+    <WorkflowContextProvider>
       <WorkflowWrap />
     </WorkflowContextProvider>
   )
diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts
index 6316db1980..55b11ec506 100644
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@@ -64,9 +64,9 @@ type Shape = {
   setCustomTools: (tools: ToolWithProvider[]) => void
 }
 
-export const createWorkflowStore = (appId: string) => {
+export const createWorkflowStore = () => {
   return create<Shape>(set => ({
-    appId,
+    appId: '',
     workflowData: undefined,
     setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })),
     historyWorkflowData: undefined,