diff --git a/packages/frontend/admin/src/modules/nav/nav.tsx b/packages/frontend/admin/src/modules/nav/nav.tsx
index 028f4a9285..b854fbec9f 100644
--- a/packages/frontend/admin/src/modules/nav/nav.tsx
+++ b/packages/frontend/admin/src/modules/nav/nav.tsx
@@ -4,6 +4,7 @@ import { AccountIcon, AiOutlineIcon, SelfhostIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { NavLink } from 'react-router-dom';
 
+import { ServerVersion } from './server-version';
 import { SettingsItem } from './settings-item';
 import { UserDropdown } from './user-dropdown';
 
@@ -112,11 +113,12 @@ export function Nav({ isCollapsed = false }: NavProps) {
       </nav>
       <div
         className={cn(
-          'flex gap-1 px-2 flex-col overflow-hidden',
+          'flex gap-2 px-2 flex-col overflow-hidden',
           isCollapsed && 'items-center px-0 gap-1'
         )}
       >
         <UserDropdown isCollapsed={isCollapsed} />
+        {isCollapsed ? null : <ServerVersion />}
       </div>
     </div>
   );
diff --git a/packages/frontend/admin/src/modules/nav/server-version.tsx b/packages/frontend/admin/src/modules/nav/server-version.tsx
new file mode 100644
index 0000000000..2125c09cf9
--- /dev/null
+++ b/packages/frontend/admin/src/modules/nav/server-version.tsx
@@ -0,0 +1,37 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { useCallback } from 'react';
+
+import { Button } from '../../components/ui/button';
+import { useServerConfig } from '../common';
+
+export const ServerVersion = () => {
+  const serverConfig = useServerConfig();
+  const availableUpgrade = serverConfig?.availableUpgrade;
+  const version = serverConfig?.version;
+
+  const handleClick = useCallback(() => {
+    window.open(availableUpgrade.url, '_blank');
+  }, [availableUpgrade]);
+
+  if (availableUpgrade) {
+    return (
+      <Button
+        variant="outline"
+        className="flex items-center justify-center gap-1 text-xs p-2 font-medium"
+        onClick={handleClick}
+      >
+        New Version <span>{availableUpgrade.version}</span>Available
+      </Button>
+    );
+  }
+  return (
+    <div
+      className="flex items-center justify-between pt-2 border-t px-2 text-xs"
+      style={{
+        color: cssVarV2('text/tertiary'),
+      }}
+    >
+      ServerVersion<span>v{version}</span>
+    </div>
+  );
+};
diff --git a/packages/frontend/graphql/src/graphql/admin-server-config.gql b/packages/frontend/graphql/src/graphql/admin-server-config.gql
index 82c6a39077..cde62f1ed1 100644
--- a/packages/frontend/graphql/src/graphql/admin-server-config.gql
+++ b/packages/frontend/graphql/src/graphql/admin-server-config.gql
@@ -12,6 +12,12 @@ query adminServerConfig {
     credentialsRequirement {
       ...CredentialsRequirements
     }
+    availableUpgrade {
+      changelog
+      version
+      publishedAt
+      url
+    }
     availableUserFeatures
   }
 }
diff --git a/packages/frontend/graphql/src/graphql/index.ts b/packages/frontend/graphql/src/graphql/index.ts
index ec6ac50aed..8fa3dc5618 100644
--- a/packages/frontend/graphql/src/graphql/index.ts
+++ b/packages/frontend/graphql/src/graphql/index.ts
@@ -40,6 +40,12 @@ export const adminServerConfigQuery = {
     credentialsRequirement {
       ...CredentialsRequirements
     }
+    availableUpgrade {
+      changelog
+      version
+      publishedAt
+      url
+    }
     availableUserFeatures
   }
 }
diff --git a/packages/frontend/graphql/src/schema.ts b/packages/frontend/graphql/src/schema.ts
index 111702c098..dcfef380b6 100644
--- a/packages/frontend/graphql/src/schema.ts
+++ b/packages/frontend/graphql/src/schema.ts
@@ -2143,6 +2143,13 @@ export type AdminServerConfigQuery = {
         maxLength: number;
       };
     };
+    availableUpgrade: {
+      __typename?: 'ReleaseVersionType';
+      changelog: string;
+      version: string;
+      publishedAt: string;
+      url: string;
+    };
   };
 };