diff --git a/web/app/(commonLayout)/apps/page.tsx b/web/app/(commonLayout)/apps/page.tsx
index 76985de34f..ab9852e462 100644
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -1,23 +1,27 @@
+'use client'
+import { useContextSelector } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
 import style from '../list.module.css'
 import Apps from './Apps'
 import classNames from '@/utils/classnames'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
+import AppContext from '@/context/app-context'
+import { LicenseStatus } from '@/types/feature'
 
-const AppList = async () => {
-  const locale = getLocaleOnServer()
-  const { t } = await translate(locale, 'app')
+const AppList = () => {
+  const { t } = useTranslation()
+  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
 
   return (
     <div className='relative flex flex-col overflow-y-auto bg-gray-100 shrink-0 h-0 grow'>
       <Apps />
-      <footer className='px-12 py-6 grow-0 shrink-0'>
-        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('join')}</h3>
-        <p className='mt-1 text-sm font-normal leading-tight text-gray-700'>{t('communityIntro')}</p>
+      {systemFeatures.license.status === LicenseStatus.NONE && <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 text-sm font-normal leading-tight text-gray-700'>{t('app.communityIntro')}</p>
         <div className='flex items-center gap-2 mt-3'>
           <a className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'><span className={classNames(style.socialMediaIcon, style.githubIcon)} /></a>
           <a className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'><span className={classNames(style.socialMediaIcon, style.discordIcon)} /></a>
         </div>
-      </footer>
+      </footer>}
     </div >
   )
 }
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 3757d552df..1d7349ccd0 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useBoolean } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import { Bars3Icon } from '@heroicons/react/20/solid'
+import { useContextSelector } from 'use-context-selector'
 import HeaderBillingBtn from '../billing/header-billing-btn'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
@@ -14,11 +15,12 @@ import ToolsNav from './tools-nav'
 import GithubStar from './github-star'
 import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
-import { useAppContext } from '@/context/app-context'
+import AppContext, { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
+import { LicenseStatus } from '@/types/feature'
 
 const navClassName = `
   flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -28,7 +30,7 @@ const navClassName = `
 
 const Header = () => {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-
+  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
   const selectedSegment = useSelectedLayoutSegment()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -60,7 +62,7 @@ const Header = () => {
           <Link href="/apps" className='flex items-center mr-4'>
             <LogoSite className='object-contain' />
           </Link>
-          <GithubStar />
+          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
         </>}
       </div>
       {isMobile && (
@@ -68,7 +70,7 @@ const Header = () => {
           <Link href="/apps" className='flex items-center mr-4'>
             <LogoSite />
           </Link>
-          <GithubStar />
+          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
         </div>
       )}
       {!isMobile && (