diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 37b6de654c5f73..6242105e85acff 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -19,6 +19,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { ssePost } from '@/service/base'
 import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import type { Annotation } from '@/models/log'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
 type GetAbortController = (abortController: AbortController) => void
 type SendCallback = {
@@ -429,6 +430,52 @@ export const useChat = (
           })
           handleUpdateChatList(newChatList)
         },
+        onWorkflowStarted: ({ workflow_run_id, task_id }) => {
+          taskIdRef.current = task_id
+          responseItem.workflow_run_id = workflow_run_id
+          responseItem.workflowProcess = {
+            status: WorkflowRunningStatus.Running,
+            tracing: [],
+          }
+          handleUpdateChatList(produce(chatListRef.current, (draft) => {
+            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+            draft[currentIndex] = {
+              ...draft[currentIndex],
+              ...responseItem,
+            }
+          }))
+        },
+        onWorkflowFinished: ({ data }) => {
+          responseItem.workflowProcess!.status = data.status as WorkflowRunningStatus
+          handleUpdateChatList(produce(chatListRef.current, (draft) => {
+            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+            draft[currentIndex] = {
+              ...draft[currentIndex],
+              ...responseItem,
+            }
+          }))
+        },
+        onNodeStarted: ({ data }) => {
+          responseItem.workflowProcess!.tracing!.push(data as any)
+          handleUpdateChatList(produce(chatListRef.current, (draft) => {
+            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+            draft[currentIndex] = {
+              ...draft[currentIndex],
+              ...responseItem,
+            }
+          }))
+        },
+        onNodeFinished: ({ data }) => {
+          const currentIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === data.node_id)
+          responseItem.workflowProcess!.tracing[currentIndex] = data as any
+          handleUpdateChatList(produce(chatListRef.current, (draft) => {
+            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+            draft[currentIndex] = {
+              ...draft[currentIndex],
+              ...responseItem,
+            }
+          }))
+        },
       })
     return true
   }, [
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 15da5885d99080..8afcbf66a0c15f 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useCallback } from 'react'
-import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
+import cn from 'classnames'
 import { Menu } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
@@ -8,6 +8,8 @@ import Indicator from '../../indicator'
 import AppIcon from '@/app/components/base/app-icon'
 import { useAppContext } from '@/context/app-context'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 
 export type NavItem = {
   id: string
@@ -24,11 +26,6 @@ export type INavSelectorProps = {
   onLoadmore?: () => void
 }
 
-const itemClassName = `
-  flex items-center w-full h-10 px-3 text-gray-700 text-[14px]
-  rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate
-`
-
 const NavSelector = ({ curNav, navs, createText, onCreate, onLoadmore }: INavSelectorProps) => {
   const router = useRouter()
   const { isCurrentWorkspaceManager } = useAppContext()
@@ -46,67 +43,58 @@ const NavSelector = ({ curNav, navs, createText, onCreate, onLoadmore }: INavSel
   return (
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button
-            className="
-              inline-flex items-center w-full h-7 justify-center
-              rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
-              text-[#1C64F2] hover:bg-[#EBF5FF]
-            "
-          >
-            <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
-            <ChevronDownIcon
-              className="shrink-0 w-3 h-3 ml-1"
-              aria-hidden="true"
-            />
-          </Menu.Button>
-        </div>
-        <Menu.Items
-          className="
-            absolute -left-11 right-0 mt-1.5 w-60 max-w-80
-            divide-y divide-gray-100 origin-top-right rounded-lg bg-white
-            shadow-lg
-          "
-        >
-          <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
-            {
-              navs.map(nav => (
-                <Menu.Item key={nav.id}>
-                  <div className={itemClassName} onClick={() => {
-                    setAppDetail()
-                    router.push(nav.link)
-                  }} title={nav.name}>
-                    <div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
-                      <AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
-                      <div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
-                        <Indicator />
+        {({ open }) => (
+          <>
+            <Menu.Button className={cn(
+              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-primary-600 hover:bg-primary-50',
+              open && 'bg-primary-50',
+            )}>
+              <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
+              <ChevronDown
+                className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
+                aria-hidden="true"
+              />
+            </Menu.Button>
+            <Menu.Items
+              className="
+                absolute -left-11 right-0 mt-1.5 w-60 max-w-80
+                divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                shadow-lg
+              "
+            >
+              <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
+                {
+                  navs.map(nav => (
+                    <Menu.Item key={nav.id}>
+                      <div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => {
+                        setAppDetail()
+                        router.push(nav.link)
+                      }} title={nav.name}>
+                        <div className='relative w-6 h-6 mr-2 rounded-md'>
+                          <AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
+                          <div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
+                            <Indicator />
+                          </div>
+                        </div>
+                        {nav.name}
                       </div>
+                    </Menu.Item>
+                  ))
+                }
+              </div>
+              {isCurrentWorkspaceManager && <Menu.Item>
+                <div className='p-1' onClick={onCreate}>
+                  <div className='flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100'>
+                    <div className='flex justify-center items-center mr-2 w-6 h-6 bg-gray-100 rounded-[6px] border-[0.5px] border-gray-200 border'>
+                      <Plus className='w-4 h-4 text-gray-500' />
                     </div>
-                    {nav.name}
+                    <div className='font-normal text-[14px] text-gray-700'>{createText}</div>
                   </div>
-                </Menu.Item>
-              ))
-            }
-          </div>
-          {isCurrentWorkspaceManager && <Menu.Item>
-            <div className='p-1' onClick={onCreate}>
-              <div
-                className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
-              >
-                <div
-                  className='
-                    flex justify-center items-center
-                    ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
-                    border-[0.5px] border-gray-200 border-dashed
-                  '
-                >
-                  <PlusIcon className='w-4 h-4 text-gray-500' />
                 </div>
-                <div className='font-normal text-[14px] text-gray-700'>{createText}</div>
-              </div>
-            </div>
-          </Menu.Item>}
-        </Menu.Items>
+              </Menu.Item>}
+            </Menu.Items>
+          </>
+        )}
       </Menu>
     </div>
   )
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index 32b99d7570ce0c..3eb1d0ddea3b50 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -262,7 +262,8 @@ export const useChat = (
           })
           handleUpdateChatList(newChatList)
         },
-        onWorkflowStarted: ({ workflow_run_id }) => {
+        onWorkflowStarted: ({ workflow_run_id, task_id }) => {
+          taskIdRef.current = task_id
           responseItem.workflow_run_id = workflow_run_id
           responseItem.workflowProcess = {
             status: WorkflowRunningStatus.Running,