diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
index 4d645e617a..12c9e88c90 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useMemo } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
 import cn from 'classnames'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
@@ -22,10 +23,18 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     params: { appId }, // get appId in path
   } = props
   const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
   const { isCurrentWorkspaceManager } = useAppContext()
   const detailParams = { url: '/apps', id: appId }
   const { data: response } = useSWR(detailParams, fetchAppDetail)
 
+  // redirection
+  if ((response?.mode === 'workflow' || response?.mode === 'advanced-chat') && (pathname).endsWith('configuration'))
+    router.replace(`/app/${appId}/workflow`)
+  if ((response?.mode !== 'workflow' && response?.mode !== 'advanced-chat') && (pathname).endsWith('workflow'))
+    router.replace(`/app/${appId}/configuration`)
+
   const appModeName = (() => {
     if (response?.mode === 'chat' || response?.mode === 'advanced-chat')
       return t('app.types.chatbot')
@@ -41,13 +50,38 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
 
   const navigation = useMemo(() => {
     const navs = [
-      ...(isCurrentWorkspaceManager ? [{ name: t('common.appMenus.promptEng'), href: `/app/${appId}/configuration`, icon: PromptEngineering, selectedIcon: PromptEngineeringSolid }] : []),
-      { name: t('common.appMenus.apiAccess'), href: `/app/${appId}/develop`, icon: TerminalSquare, selectedIcon: TerminalSquareSolid },
-      ...(appModeName !== 'workflow' ? [{ name: t('common.appMenus.logAndAnn'), href: `/app/${appId}/logs`, icon: FileHeart02, selectedIcon: FileHeart02Solid }] : [{ name: t('common.appMenus.logs'), href: `/app/${appId}/logs`, icon: FileHeart02, selectedIcon: FileHeart02Solid }]),
-      { name: t('common.appMenus.overview'), href: `/app/${appId}/overview`, icon: BarChartSquare02, selectedIcon: BarChartSquare02Solid },
+      ...(isCurrentWorkspaceManager
+        ? [{
+          name: t('common.appMenus.promptEng'),
+          href: `/app/${appId}/${(response?.mode === 'workflow' || response?.mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
+          icon: PromptEngineering,
+          selectedIcon: PromptEngineeringSolid,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.apiAccess'),
+        href: `/app/${appId}/develop`,
+        icon: TerminalSquare,
+        selectedIcon: TerminalSquareSolid,
+      },
+      {
+        name: response?.mode !== 'workflow'
+          ? t('common.appMenus.logAndAnn')
+          : t('common.appMenus.logs'),
+        href: `/app/${appId}/logs`,
+        icon: FileHeart02,
+        selectedIcon: FileHeart02Solid,
+      },
+      {
+        name: t('common.appMenus.overview'),
+        href: `/app/${appId}/overview`,
+        icon: BarChartSquare02,
+        selectedIcon: BarChartSquare02Solid,
+      },
     ]
     return navs
-  }, [appId, appModeName, isCurrentWorkspaceManager, t])
+  }, [appId, isCurrentWorkspaceManager, response?.mode, t])
 
   useEffect(() => {
     if (response?.name)
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
index b79f9fd446..5ee114c6d2 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
@@ -13,7 +13,7 @@ const Logs = async ({
   appMode,
 }: IProps) => {
   return (
-    <Main appMode={'workflow'} pageType={PageType.log} appId={appId} />
+    <Main appMode={appMode} pageType={PageType.log} appId={appId} />
   )
 }
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
new file mode 100644
index 0000000000..245e172940
--- /dev/null
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo } from 'react'
+import Workflow from '@/app/components/workflow'
+
+const initialNodes = [
+  {
+    id: '1',
+    type: 'custom',
+    position: { x: 180, y: 180 },
+    data: { type: 'start' },
+  },
+  // {
+  //   id: '2',
+  //   type: 'custom',
+  //   position: { x: 0, y: 0 },
+  //   data: {
+  //     type: 'if-else',
+  //     branches: [
+  //       {
+  //         id: 'if-true',
+  //         name: 'IS TRUE',
+  //       },
+  //       {
+  //         id: 'if-false',
+  //         name: 'IS FALSE',
+  //       },
+  //     ],
+  //   },
+  // },
+  // {
+  //   id: '3',
+  //   type: 'custom',
+  //   position: { x: 0, y: 0 },
+  //   data: { type: 'question-classifier', sortIndexInBranches: 0 },
+  // },
+  // {
+  //   id: '4',
+  //   type: 'custom',
+  //   position: { x: 0, y: 0 },
+  //   data: {
+  //     type: 'if-else',
+  //     sortIndexInBranches: 1,
+  //     branches: [
+  //       {
+  //         id: 'if-true',
+  //         name: 'IS TRUE',
+  //       },
+  //       {
+  //         id: 'if-false',
+  //         name: 'IS FALSE',
+  //       },
+  //     ],
+  //   },
+  // },
+]
+
+const initialEdges = [
+  // {
+  //   id: '0',
+  //   type: 'custom',
+  //   source: '1',
+  //   sourceHandle: 'source',
+  //   target: '2',
+  //   targetHandle: 'target',
+  // },
+  // {
+  //   id: '1',
+  //   type: 'custom',
+  //   source: '2',
+  //   sourceHandle: 'if-true',
+  //   target: '3',
+  //   targetHandle: 'target',
+  // },
+  // {
+  //   id: '2',
+  //   type: 'custom',
+  //   source: '2',
+  //   sourceHandle: 'if-false',
+  //   target: '4',
+  //   targetHandle: 'target',
+  // },
+]
+
+const Page: FC = () => {
+  return (
+    <div className='min-w-[720px] w-full h-full overflow-x-auto'>
+      <Workflow
+        nodes={initialNodes}
+        edges={initialEdges}
+      />
+    </div>
+  )
+}
+export default memo(Page)
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index b7c6fe6ce8..d7d632c9eb 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -218,7 +218,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           />}
         </div>
         <div className={style.listItemDescription}>
-          {app.model_config?.pre_prompt}
+          {app.description}
         </div>
         <div className={style.listItemFooter}>
           <AppModeLabel mode={app.mode} />
diff --git a/web/app/(commonLayout)/apps/NewAppCard.tsx b/web/app/(commonLayout)/apps/NewAppCard.tsx
index 43bdbdc6bf..2586eb0cd1 100644
--- a/web/app/(commonLayout)/apps/NewAppCard.tsx
+++ b/web/app/(commonLayout)/apps/NewAppCard.tsx
@@ -17,7 +17,7 @@ const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuc
   const { t } = useTranslation()
   const { onPlanInfoChanged } = useProviderContext()
 
-  const [showNewAppDialog, setShowNewAppDialog] = useState(true)
+  const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   return (
     <a