diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index d0ef0b0b67c..25afde801a9 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -383,6 +383,7 @@ describe('MainNav', () => {
     expect(screen.getByRole('link', { name: /common.mainNav.home/ })).toHaveAttribute('href', '/')
     expect(screen.getByRole('link', { name: /common.menus.apps/ })).toHaveAttribute('href', '/apps')
     expect(screen.getByRole('link', { name: /common.menus.roster/ })).toHaveAttribute('href', '/roster')
+    expect(screen.getByRole('link', { name: /common.menus.roster common.menus.status/ })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /common.menus.datasets/ })).toHaveAttribute('href', '/datasets')
     expect(screen.getByRole('link', { name: /common.mainNav.integrations/ })).toHaveAttribute('href', '/integrations/model-provider')
     expect(screen.getByRole('link', { name: /common.mainNav.marketplace/ })).toHaveAttribute('href', '/marketplace')
diff --git a/web/app/components/main-nav/components/nav-link.tsx b/web/app/components/main-nav/components/nav-link.tsx
index 10865c94d18..659f39277ff 100644
--- a/web/app/components/main-nav/components/nav-link.tsx
+++ b/web/app/components/main-nav/components/nav-link.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import type { MainNavItem } from '../types'
 import { cn } from '@langgenius/dify-ui/cn'
 import Link from '@/next/link'
@@ -32,11 +33,13 @@ const NavIcon = ({
 type MainNavLinkProps = {
   item: MainNavItem
   pathname: string
+  children?: ReactNode
 }
 
 const MainNavLink = ({
   item,
   pathname,
+  children,
 }: MainNavLinkProps) => {
   const activated = item.active(pathname)
 
@@ -51,7 +54,8 @@ const MainNavLink = ({
       )}
     >
       <NavIcon icon={activated ? item.activeIcon : item.icon} />
-      <span className={cn('truncate', activated && 'text-shadow-[0px_0px_8px_var(--color-components-main-nav-glass-text-glow)]')}>{item.label}</span>
+      <span className={cn('min-w-0 truncate', activated && 'text-shadow-[0px_0px_8px_var(--color-components-main-nav-glass-text-glow)]')}>{item.label}</span>
+      {children}
     </Link>
   )
 }
diff --git a/web/app/components/main-nav/index.tsx b/web/app/components/main-nav/index.tsx
index 209f6bb91e8..64b243dac27 100644
--- a/web/app/components/main-nav/index.tsx
+++ b/web/app/components/main-nav/index.tsx
@@ -12,6 +12,7 @@ import AppDetailTop from '@/app/components/app-sidebar/app-detail-top'
 import DatasetDetailSection from '@/app/components/app-sidebar/dataset-detail-section'
 import DatasetDetailTop from '@/app/components/app-sidebar/dataset-detail-top'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import Badge from '@/app/components/base/badge'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import EnvNav from '@/app/components/header/env-nav'
 import { useAppContext } from '@/context/app-context'
@@ -299,7 +300,16 @@ const MainNav = ({
                   <>
                     <nav className="flex flex-col gap-px p-2">
                       {navItems.map(item => (
-                        <MainNavLink key={item.href} item={item} pathname={pathname} />
+                        <MainNavLink key={item.href} item={item} pathname={pathname}>
+                          {item.href === '/roster' && (
+                            <Badge
+                              size="xs"
+                              variant="dimm"
+                              text={t('menus.status', { ns: 'common' })}
+                              className="ml-auto shrink-0"
+                            />
+                          )}
+                        </MainNavLink>
                       ))}
                     </nav>
                     {!isCurrentWorkspaceDatasetOperator && <WebAppsSection />}