diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index 99d27bd48f..221ab9546f 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -257,7 +257,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                   </div>
                 </>
               )}
-              {(appDetail.mode === 'completion' || appDetail.model_config?.prompt_type === 'advanced') && (
+              {(appDetail.mode === 'completion' || appDetail.mode === 'chat') && (
                 <>
                   <Divider className="!my-1" />
                   <div
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 6e3e81610a..ba0de0ae17 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
 import AppBasic from './basic'
@@ -32,13 +32,9 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
   const [modeState, setModeState] = useState(appSidebarExpand)
   const expand = modeState === 'expand'
 
-  const handleToggle = useCallback(() => {
-    setModeState((prev) => {
-      const next = prev === 'expand' ? 'collapse' : 'expand'
-      setAppSiderbarExpand(next)
-      return next
-    })
-  }, [setAppSiderbarExpand])
+  const handleToggle = (state: string) => {
+    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
+  }
 
   useEffect(() => {
     if (appSidebarExpand) {
@@ -100,7 +96,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
           >
             <div
               className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
-              onClick={handleToggle}
+              onClick={() => handleToggle(modeState)}
             >
               {
                 expand
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index a4a594718a..bdecb9ebe3 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -9,7 +9,7 @@ import s from './style.module.css'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast'
-import { importApp } from '@/service/apps'
+import { deleteApp, switchApp } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
@@ -29,7 +29,7 @@ type SwitchAppModalProps = {
 }
 
 const SwitchAppModal = ({ show, appDetail, onSuccess, onClose }: SwitchAppModalProps) => {
-  const { push } = useRouter()
+  const { push, replace } = useRouter()
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
 
@@ -43,18 +43,21 @@ const SwitchAppModal = ({ show, appDetail, onSuccess, onClose }: SwitchAppModalP
   const [removeOriginal, setRemoveOriginal] = useState<boolean>(false)
 
   const goStart = async () => {
-    // ###TODO### SWITCH
     try {
-      const app = await importApp({
-        data: '',
-      })
+      const { new_app_id: newAppID } = await switchApp(appDetail.id)
       if (onSuccess)
         onSuccess()
       if (onClose)
         onClose()
       notify({ type: 'success', message: t('app.newApp.appCreated') })
+      if (removeOriginal)
+        await deleteApp(appDetail.id)
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
-      getRedirection(isCurrentWorkspaceManager, app, push)
+      getRedirection(
+        isCurrentWorkspaceManager,
+        { id: newAppID },
+        removeOriginal ? replace : push,
+      )
     }
     catch (e) {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index 448c02b399..9478a51b75 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -18,7 +18,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
         <XClose className='w-4 h-4 text-gray-500' />
       </span>
       <h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.workflowTitle')}</h1>
-      <Run activeTab='RESULT' runID={runID}/>
+      <Run activeTab='TRACING' runID={runID}/>
     </div>
   )
 }
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index e63e05f2ad..4f3d9318a6 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -38,7 +38,7 @@ const RunPanel: FC<RunProps> = ({ activeTab, runID }) => {
       {/* panel detal */}
       <div className={cn('grow bg-white h-0 overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
         {currentTab === 'RESULT' && <Result runID={runID} />}
-        {currentTab === 'TRACING' && <Tracing />}
+        {currentTab === 'TRACING' && <Tracing runID={runID} />}
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx
index 4fba6d69f3..cb4dbe8aa6 100644
--- a/web/app/components/workflow/run/tracing.tsx
+++ b/web/app/components/workflow/run/tracing.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+// import { useTranslation } from 'react-i18next'
 // import cn from 'classnames'
 import { BlockEnum } from '../types'
 import NodePanel from './node'
 
 type TracingProps = {
-  // appId: string
+  runID: string
 }
 
 const nodeInfoFake = {
@@ -18,8 +18,8 @@ const nodeInfoFake = {
   status: 'succeeded',
 }
 
-const Tracing: FC<TracingProps> = () => {
-  const { t } = useTranslation()
+const Tracing: FC<TracingProps> = ({ runID }) => {
+  // const { t } = useTranslation()
   const [nodeCollapsed, setCurrentTab] = useState<boolean>(false)
 
   const collapseStateChange = () => {
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 573bfd4b4e..07c0fe7f9a 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -36,6 +36,10 @@ export const importApp: Fetcher<AppDetailResponse, { data: string; name?: string
   return post<AppDetailResponse>('apps/import', { body: { name, description, icon, icon_background } })
 }
 
+export const switchApp: Fetcher<{ new_app_id: string }, string> = (appID) => {
+  return post<{ new_app_id: string }>(`apps/${appID}/convert-to-workflow`)
+}
+
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
   return del<CommonResponse>(`apps/${appID}`)
 }