diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
index 998184c0ee..314b481699 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
@@ -6,11 +6,9 @@ export type IProps = {
   params: { appId: string }
 }
 
-const Logs = async ({
-  params: { appId },
-}: IProps) => {
+const Logs = async () => {
   return (
-    <Main pageType={PageType.annotation} appId={appId} />
+    <Main pageType={PageType.annotation} />
   )
 }
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
index 86996969d2..c47581df87 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@@ -80,10 +80,10 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
       const mode = isMobile ? 'collapse' : 'expand'
       setAppSiderbarExpand(isMobile ? mode : localeMode)
-      if (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')
+      if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
         setAppSiderbarExpand('collapse')
     }
-  }, [appDetail, isMobile, setAppSiderbarExpand])
+  }, [appDetail, isMobile])
 
   useEffect(() => {
     setAppDetail()
@@ -100,7 +100,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         setNavigation(getNavigations(appId, isCurrentWorkspaceManager, res.mode))
       }
     })
-  }, [appId, getNavigations, isCurrentWorkspaceManager, pathname, router, setAppDetail])
+  }, [appId, isCurrentWorkspaceManager])
 
   if (!appDetail) {
     return (
diff --git a/web/app/components/develop/index.tsx b/web/app/components/develop/index.tsx
index 5034a1db7d..9b9fec8fd5 100644
--- a/web/app/components/develop/index.tsx
+++ b/web/app/components/develop/index.tsx
@@ -1,35 +1,42 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import s from './secret-key/style.module.css'
 import Doc from '@/app/components/develop/doc'
+import Loading from '@/app/components/base/loading'
 import InputCopy from '@/app/components/develop/secret-key/input-copy'
 import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
-import { fetchAppDetail } from '@/service/apps'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 type IDevelopMainProps = {
   appId: string
 }
 
 const DevelopMain = ({ appId }: IDevelopMainProps) => {
-  const commonParams = { url: '/apps', id: appId }
-  const { data: appDetail } = useSWR(commonParams, fetchAppDetail)
+  const { appDetail } = useAppStore()
   const { t } = useTranslation()
 
+  if (!appDetail) {
+    return (
+      <div className='flex h-full items-center justify-center bg-white'>
+        <Loading />
+      </div>
+    )
+  }
+
   return (
     <div className='relative flex flex-col h-full overflow-hidden'>
       <div className='flex items-center justify-between flex-shrink-0 px-6 border-b border-solid py-2 border-b-gray-100'>
         <div className='text-lg font-medium text-gray-900'></div>
         <div className='flex items-center flex-wrap gap-y-1'>
-          <InputCopy className='flex-shrink-0 mr-1 w-52 sm:w-80' value={appDetail?.api_base_url}>
+          <InputCopy className='flex-shrink-0 mr-1 w-52 sm:w-80' value={appDetail.api_base_url}>
             <div className={`ml-2 border border-gray-200 border-solid flex-shrink-0 px-2 py-0.5 rounded-[6px] text-gray-500 text-[0.625rem] ${s.customApi}`}>
               {t('appApi.apiServer')}
             </div>
           </InputCopy>
           <div className={`flex items-center h-9 px-3 rounded-lg 
-                        text-[13px] font-normal  mr-2 ${appDetail?.enable_api ? 'text-green-500 bg-green-50' : 'text-yellow-500 bg-yellow-50'}`}>
+                        text-[13px] font-normal  mr-2 ${appDetail.enable_api ? 'text-green-500 bg-green-50' : 'text-yellow-500 bg-yellow-50'}`}>
             <div className='mr-1'>{t('appApi.status')}</div>
-            <div className='font-semibold'>{appDetail?.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
+            <div className='font-semibold'>{appDetail.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
           </div>
           <SecretKeyButton className='flex-shrink-0' appId={appId} />
         </div>