diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
index 211b0b3677..126bf45842 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export type IAppDetail = {
   children: React.ReactNode
@@ -11,11 +13,13 @@ export type IAppDetail = {
 const AppDetail: FC<IAppDetail> = ({ children }) => {
   const router = useRouter()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.appDetail'))
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
       return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator])
+  }, [isCurrentWorkspaceDatasetOperator, router])
 
   return (
     <>
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index cba7188b22..b9063d887e 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -26,7 +26,6 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const getKey = (
   pageIndex: number,
@@ -56,7 +55,6 @@ const Apps = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const { systemFeatures } = useGlobalPublicStore()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'all',
@@ -87,16 +85,11 @@ const Apps = () => {
   ]
 
   useEffect(() => {
-    if (systemFeatures.branding.enabled)
-      document.title = `${t('common.menus.apps')} -  ${systemFeatures.branding.application_title}`
-    else
-      document.title = `${t('common.menus.apps')} -  Dify`
-
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       mutate()
     }
-  }, [mutate, t, systemFeatures])
+  }, [mutate, t])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
diff --git a/web/app/(commonLayout)/apps/page.tsx b/web/app/(commonLayout)/apps/page.tsx
index a9e844f6ee..0fe57e45ec 100644
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -4,17 +4,17 @@ import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import style from '../list.module.css'
 import Apps from './Apps'
-import { LicenseStatus } from '@/types/feature'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const AppList = () => {
   const { t } = useTranslation()
   const { systemFeatures } = useGlobalPublicStore()
-
+  useDocumentTitle(t('common.menus.apps'))
   return (
     <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
       <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
+      {!systemFeatures.branding.enabled && <footer className='px-12 py-6 grow-0 shrink-0'>
         <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
         <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
         <div className='flex items-center gap-2 mt-3'>
diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index f484d30a3d..9c5ecbecf9 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -29,9 +29,11 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Container = () => {
   const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
   const router = useRouter()
   const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@@ -123,7 +125,7 @@ const Container = () => {
       {activeTab === 'dataset' && (
         <>
           <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
-          <DatasetFooter />
+          {!systemFeatures.branding.enabled && <DatasetFooter />}
           {showTagManagementModal && (
             <TagManagementModal type='knowledge' show={showTagManagementModal} />
           )}
diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index ea918a2b17..f54ddfa259 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import { useTranslation } from 'react-i18next'
 import NewDatasetCard from './NewDatasetCard'
 import DatasetCard from './DatasetCard'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
@@ -57,11 +56,8 @@ const Datasets = ({
   const loadingStateRef = useRef(false)
   const anchorRef = useRef<HTMLAnchorElement>(null)
 
-  const { t } = useTranslation()
-
   useEffect(() => {
     loadingStateRef.current = isLoading
-    document.title = `${t('dataset.knowledge')} - Dify`
   }, [isLoading])
 
   useEffect(() => {
@@ -80,7 +76,7 @@ const Datasets = ({
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
-      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} />}
       {data?.map(({ data: datasets }) => datasets.map(dataset => (
         <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
       ))}
diff --git a/web/app/(commonLayout)/datasets/page.tsx b/web/app/(commonLayout)/datasets/page.tsx
index 096a1b8979..60a542f0a2 100644
--- a/web/app/(commonLayout)/datasets/page.tsx
+++ b/web/app/(commonLayout)/datasets/page.tsx
@@ -1,11 +1,12 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import Container from './Container'
+import useDocumentTitle from '@/hooks/use-document-title'
 
-const AppList = async () => {
+const AppList = () => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.datasets'))
   return <Container />
 }
 
-export const metadata = {
-  title: 'Datasets - Dify',
-}
-
 export default AppList
diff --git a/web/app/(commonLayout)/explore/layout.tsx b/web/app/(commonLayout)/explore/layout.tsx
index 3af7bb1e07..46bd41cb0c 100644
--- a/web/app/(commonLayout)/explore/layout.tsx
+++ b/web/app/(commonLayout)/explore/layout.tsx
@@ -1,11 +1,13 @@
-import type { FC } from 'react'
+'use client'
+import type { FC, PropsWithChildren } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import ExploreClient from '@/app/components/explore'
-export type IAppDetail = {
-  children: React.ReactNode
-}
+import useDocumentTitle from '@/hooks/use-document-title'
 
-const AppDetail: FC<IAppDetail> = ({ children }) => {
+const ExploreLayout: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.explore'))
   return (
     <ExploreClient>
       {children}
@@ -13,4 +15,4 @@ const AppDetail: FC<IAppDetail> = ({ children }) => {
   )
 }
 
-export default React.memo(AppDetail)
+export default React.memo(ExploreLayout)
diff --git a/web/app/(commonLayout)/tools/page.tsx b/web/app/(commonLayout)/tools/page.tsx
index 1b08d54ba3..dc7e189c43 100644
--- a/web/app/(commonLayout)/tools/page.tsx
+++ b/web/app/(commonLayout)/tools/page.tsx
@@ -1,22 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import ToolProviderList from '@/app/components/tools/provider-list'
 import { useAppContext } from '@/context/app-context'
-
-const Layout: FC = () => {
-  const { t } = useTranslation()
+import useDocumentTitle from '@/hooks/use-document-title'
+const ToolsList: FC = () => {
   const router = useRouter()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      document.title = `${t('tools.title')} - Dify`
-    if (isCurrentWorkspaceDatasetOperator)
-      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator, router, t])
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.tools'))
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
@@ -25,4 +19,4 @@ const Layout: FC = () => {
 
   return <ToolProviderList />
 }
-export default React.memo(Layout)
+export default React.memo(ToolsList)
diff --git a/web/app/account/layout.tsx b/web/app/account/layout.tsx
index 11a6abeab4..d64b72d1af 100644
--- a/web/app/account/layout.tsx
+++ b/web/app/account/layout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ReactNode } from 'react'
+import { t } from 'i18next'
 import Header from './header'
 import SwrInitor from '@/app/components/swr-initor'
 import { AppContextProvider } from '@/context/app-context'
@@ -34,7 +35,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 }
 
 export const metadata = {
-  title: 'Dify',
+  title: t('common.menus.account'),
 }
 
 export default Layout
diff --git a/web/app/components/explore/index.tsx b/web/app/components/explore/index.tsx
index cef6573bff..db24982361 100644
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
@@ -16,7 +15,6 @@ export type IExploreProps = {
 const Explore: FC<IExploreProps> = ({
   children,
 }) => {
-  const { t } = useTranslation()
   const router = useRouter()
   const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
   const { userProfile, isCurrentWorkspaceDatasetOperator } = useAppContext()
@@ -24,7 +22,6 @@ const Explore: FC<IExploreProps> = ({
   const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])
 
   useEffect(() => {
-    document.title = `${t('explore.title')} -  Dify`;
     (async () => {
       const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
       if (!accounts)
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index d9065f3141..f9d3952b2d 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -20,6 +20,7 @@ import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IAppSelector = {
   isMobile: boolean
@@ -32,6 +33,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
   `
   const router = useRouter()
   const [aboutVisible, setAboutVisible] = useState(false)
+  const { systemFeatures } = useGlobalPublicStore()
 
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
@@ -122,78 +124,80 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.settings')}</div>
                       </div>}
                     </Menu.Item>
-                    {canEmailSupport && <Menu.Item>
-                      {({ active }) => <a
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.emailSupport')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </a>}
-                    </Menu.Item>}
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.communityFeedback')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://discord.gg/5AEfbxcd9k'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.community')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={
-                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
-                        }
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.helpCenter')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://roadmap.dify.ai'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.roadmap')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    {
-                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
-                        <Menu.Item>
-                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                    {!systemFeatures.branding.enabled && <>
+                      {canEmailSupport && <Menu.Item>
+                        {({ active }) => <a
+                          className={classNames(itemClassName, 'group justify-between',
                             active && 'bg-state-base-hover',
-                          )} onClick={() => setAboutVisible(true)}>
-                            <div>{t('common.userProfile.about')}</div>
-                            <div className='flex items-center'>
-                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
-                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
-                            </div>
-                          </div>}
-                        </Menu.Item>
-                      )
-                    }
+                          )}
+                          href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.emailSupport')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </a>}
+                      </Menu.Item>}
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.communityFeedback')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://discord.gg/5AEfbxcd9k'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.community')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href={
+                            locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
+                          }
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.helpCenter')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://roadmap.dify.ai'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.roadmap')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      {
+                        document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                          <Menu.Item>
+                            {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                              active && 'bg-state-base-hover',
+                            )} onClick={() => setAboutVisible(true)}>
+                              <div>{t('common.userProfile.about')}</div>
+                              <div className='flex items-center'>
+                                <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
+                                <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                              </div>
+                            </div>}
+                          </Menu.Item>
+                        )
+                      }
+                    </>}
                   </div>
                   <Menu.Item>
                     {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 73c7363641..7a8b97f493 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -17,9 +17,11 @@ import ProviderCard from '@/app/components/tools/provider/card'
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { fetchCollectionList } from '@/service/tools'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const ProviderList = () => {
   const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
 
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'builtin',
@@ -98,7 +100,7 @@ const ProviderList = () => {
           'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
           currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
         )}>
-          {activeTab === 'builtin' && <ContributeCard />}
+          {activeTab === 'builtin' && !systemFeatures.branding.enabled && <ContributeCard />}
           {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
           {filteredCollectionList.map(collection => (
             <ProviderCard
diff --git a/web/app/components/tools/provider/contribute.tsx b/web/app/components/tools/provider/contribute.tsx
index 8b6705c175..4af668bdab 100644
--- a/web/app/components/tools/provider/contribute.tsx
+++ b/web/app/components/tools/provider/contribute.tsx
@@ -21,8 +21,8 @@ const Contribute: FC = () => {
     >
       <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
         <div className='relative shrink-0 flex items-center'>
-          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
-          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
+          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600' /></div>
+          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]' /></div>
         </div>
       </div>
       <div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index f0bee799b5..de579c8671 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -7,7 +7,9 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import './styles/globals.css'
 import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
-import { fetchSystemFeatures } from '@/service/share'
+import type { SystemFeatures } from '@/types/feature'
+import { defaultSystemFeatures } from '@/types/feature'
+import { API_PREFIX } from '@/config'
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -18,12 +20,19 @@ export const viewport: Viewport = {
 }
 
 export async function generateMetadata(): Promise<Metadata> {
-  const config = await fetchSystemFeatures()
-  if (config.branding.enabled)
-    return { title: config.branding.application_title ?? '-', icons: config.branding.favicon }
-
+  const ret = await fetch(`${API_PREFIX}/system-features`, { cache: 'no-cache' }).then(res => res.json())
+  const config: SystemFeatures = { ...defaultSystemFeatures, ...ret.data }
+  if (config.branding.enabled) {
+    return {
+      title: { template: `%s - ${config.branding.application_title}`, default: config.branding.application_title },
+      icons: config.branding.favicon,
+    }
+  }
   return {
-    title: 'Dify',
+    title: {
+      template: '%s - Dify',
+      default: 'Dify',
+    },
   }
 }
 
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index ac69ca49c1..d14ab7d8cb 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -1,3 +1,4 @@
+'use client'
 import Header from './_header'
 import style from './page.module.css'
 
diff --git a/web/context/global-public-context.tsx b/web/context/global-public-context.tsx
index 462f8ed97b..17a7441642 100644
--- a/web/context/global-public-context.tsx
+++ b/web/context/global-public-context.tsx
@@ -5,7 +5,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { useEffect } from 'react'
 import type { SystemFeatures } from '@/types/feature'
 import { defaultSystemFeatures } from '@/types/feature'
-import { fetchSystemFeatures } from '@/service/share'
+import { getSystemFeatures } from '@/service/common'
 
 type GlobalPublicStore = {
   systemFeatures: SystemFeatures
@@ -22,7 +22,7 @@ const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({
 }) => {
   const { data } = useQuery({
     queryKey: ['systemFeatures'],
-    queryFn: fetchSystemFeatures,
+    queryFn: getSystemFeatures,
   })
   const { setSystemFeatures } = useGlobalPublicStore()
   useEffect(() => {
diff --git a/web/hooks/use-document-title.ts b/web/hooks/use-document-title.ts
new file mode 100644
index 0000000000..e76303be34
--- /dev/null
+++ b/web/hooks/use-document-title.ts
@@ -0,0 +1,13 @@
+'use client'
+import { useLayoutEffect } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function useDocumentTitle(title: string) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useLayoutEffect(() => {
+    if (systemFeatures.branding.enabled)
+      document.title = `${title} - ${systemFeatures.branding.application_title}`
+    else
+      document.title = `${title} - Dify`
+  }, [systemFeatures, title])
+}
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index c116e080b4..6dbc3bf6e9 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -131,6 +131,7 @@ const translation = {
     status: 'beta',
     explore: 'Explore',
     apps: 'Studio',
+    appDetail: 'App Detail',
     plugins: 'Plugins',
     pluginsTips: 'Integrate third-party plugins or create ChatGPT-compatible AI-Plugins.',
     datasets: 'Knowledge',
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index e176f5d139..2215721467 100644
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@@ -131,6 +131,7 @@ const translation = {
     status: 'ベータ版',
     explore: '探索',
     apps: 'スタジオ',
+    appDetail: 'アプリの詳細',
     plugins: 'プラグイン',
     pluginsTips: 'サードパーティのプラグインを統合するか、ChatGPT互換のAIプラグインを作成します。',
     datasets: 'ナレッジ',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 53c5337cab..9e084b5609 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -131,6 +131,7 @@ const translation = {
     status: 'beta',
     explore: '探索',
     apps: '工作室',
+    appDetail: '应用详情',
     plugins: '插件',
     pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
     datasets: '知识库',
diff --git a/web/i18n/zh-Hant/common.ts b/web/i18n/zh-Hant/common.ts
index 735af54a89..21bd9c925a 100644
--- a/web/i18n/zh-Hant/common.ts
+++ b/web/i18n/zh-Hant/common.ts
@@ -127,6 +127,7 @@ const translation = {
     status: 'beta',
     explore: '探索',
     apps: '工作室',
+    appDetail: '應用詳情',
     plugins: '外掛',
     pluginsTips: '整合第三方外掛或建立與 ChatGPT 相容的 AI 外掛。',
     datasets: '知識庫',
diff --git a/web/service/common.ts b/web/service/common.ts
index fa2536cdc4..7ccc6eb5c3 100644
--- a/web/service/common.ts
+++ b/web/service/common.ts
@@ -36,6 +36,7 @@ import type {
   ModelTypeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import type { SystemFeatures } from '@/types/feature'
 
 type LoginSuccess = {
   result: 'success'
@@ -303,6 +304,10 @@ export const fetchSupportRetrievalMethods: Fetcher<RetrievalMethodsRes, string>
   return get<RetrievalMethodsRes>(url)
 }
 
+export const getSystemFeatures = () => {
+  return get<SystemFeatures>('/system-features')
+}
+
 export const enableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }) =>
   patch<CommonResponse>(url, { body })
 
diff --git a/web/types/feature.ts b/web/types/feature.ts
index ef20ce75cc..df7a134a04 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -61,6 +61,6 @@ export const defaultSystemFeatures: SystemFeatures = {
     login_page_logo: '',
     workspace_logo: '',
     favicon: '',
-    application_title: '',
+    application_title: 'test title',
   },
 }