diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html b/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html
index ce72863b9f..54399e5c44 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/public/index.html
@@ -140,7 +140,7 @@
             showViewMoreMetrics: false
           }
         },
-        appsDisabled: ['monitoring', 'search_logs']
+        appsDisabled: ['monitoring', 'search_logs', 'system_report']
       })
     </script>
   </body>
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/context-impl.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/context-impl.ts
new file mode 100644
index 0000000000..ba868c43ce
--- /dev/null
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/context-impl.ts
@@ -0,0 +1,63 @@
+import {
+  IResourceManagerDataSource,
+  IResourceManagerContext,
+  ReqConfig
+} from '@pingcap/tidb-dashboard-lib'
+import { AxiosPromise } from 'axios'
+
+import client, {
+  ResourcemanagerCalibrateResponse,
+  ResourcemanagerGetConfigResponse,
+  ResourcemanagerResourceInfoRowDef
+} from '~/client'
+
+class DataSource implements IResourceManagerDataSource {
+  getConfig(
+    options?: ReqConfig
+  ): AxiosPromise<ResourcemanagerGetConfigResponse> {
+    return client.getInstance().resourceManagerConfigGet(options)
+  }
+  getInformation(
+    options?: ReqConfig
+  ): AxiosPromise<ResourcemanagerResourceInfoRowDef[]> {
+    return client.getInstance().resourceManagerInformationGet(options)
+  }
+
+  getCalibrateByHardware(
+    params: { workload: string },
+    options?: ReqConfig | undefined
+  ): AxiosPromise<ResourcemanagerCalibrateResponse> {
+    return client
+      .getInstance()
+      .resourceManagerCalibrateHardwareGet(params, options)
+  }
+  getCalibrateByActual(
+    params: { startTime: number; endTime: number },
+    options?: ReqConfig | undefined
+  ): AxiosPromise<ResourcemanagerCalibrateResponse> {
+    return client
+      .getInstance()
+      .resourceManagerCalibrateActualGet(params, options)
+  }
+
+  metricsQueryGet(params: {
+    endTimeSec?: number
+    query?: string
+    startTimeSec?: number
+    stepSec?: number
+  }) {
+    return client
+      .getInstance()
+      .metricsQueryGet(params, {
+        handleError: 'custom'
+      } as ReqConfig)
+      .then((res) => res.data)
+  }
+}
+
+export const getResourceManagerContext: () => IResourceManagerContext = () => {
+  return {
+    ds: new DataSource(),
+    cfg: {}
+  }
+}
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/index.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/index.tsx
new file mode 100644
index 0000000000..549ae7fd5a
--- /dev/null
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import {
+  ResourceManagerApp,
+  ResourceManagerProvider
+} from '@pingcap/tidb-dashboard-lib'
+import { getResourceManagerContext } from './context-impl'
+
+export default function () {
+  return (
+    <ResourceManagerProvider value={getResourceManagerContext()}>
+      <ResourceManagerApp />
+    </ResourceManagerProvider>
+  )
+}
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/meta.ts b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/meta.ts
new file mode 100644
index 0000000000..0bb929ac3c
--- /dev/null
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/ResourceManager/meta.ts
@@ -0,0 +1,8 @@
+import { HddOutlined } from '@ant-design/icons'
+
+export default {
+  id: 'resource_manager',
+  routerPrefix: '/resource_manager',
+  icon: HddOutlined,
+  reactRoot: () => import('.')
+}
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/layout/main/Sider/index.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/layout/main/Sider/index.tsx
index febf6dd874..35c6e30c69 100644
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/layout/main/Sider/index.tsx
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/layout/main/Sider/index.tsx
@@ -15,10 +15,16 @@ import styles from './index.module.less'
 
 import { store, useIsFeatureSupport } from '@pingcap/tidb-dashboard-lib'
 
-function useAppMenuItem(registry, appId, title?: string, hideIcon?: boolean) {
+function useAppMenuItem(
+  registry,
+  appId,
+  enable: boolean = true,
+  title?: string,
+  hideIcon?: boolean
+) {
   const { t } = useTranslation()
   const app = registry.apps[appId]
-  if (!app) {
+  if (!enable || !app) {
     return null
   }
   return (
@@ -63,17 +69,11 @@ function Sider({
   const whoAmI = store.useState((s) => s.whoAmI)
   const appInfo = store.useState((s) => s.appInfo)
 
-  const instanceProfilingMenuItem = useAppMenuItem(
-    registry,
-    'instance_profiling',
-    '',
-    true
-  )
-  const conprofMenuItem = useAppMenuItem(registry, 'conprof', '', true)
-  const profilingSubMenuItems = [instanceProfilingMenuItem]
-  if (useIsFeatureSupport('conprof')) {
-    profilingSubMenuItems.push(conprofMenuItem)
-  }
+  const supportConProf = useIsFeatureSupport('conprof')
+  const profilingSubMenuItems = [
+    useAppMenuItem(registry, 'instance_profiling', true, '', true),
+    useAppMenuItem(registry, 'conprof', supportConProf, '', true)
+  ]
 
   const profilingSubMenu = (
     <Menu.SubMenu
@@ -142,29 +142,27 @@ function Sider({
     </Menu.SubMenu>
   )
 
-  const topSQLSupport = useIsFeatureSupport('topsql')
-  const topSQLMenu = useAppMenuItem(registry, 'topsql')
-
+  const supportTopSQL = useIsFeatureSupport('topsql')
+  const supportResourceManager = useIsFeatureSupport('resource_manager')
   const menuItems = [
     useAppMenuItem(registry, 'overview'),
     useAppMenuItem(registry, 'cluster_info'),
     // topSQL
+    useAppMenuItem(registry, 'topsql', supportTopSQL),
     useAppMenuItem(registry, 'statement'),
     useAppMenuItem(registry, 'slow_query'),
     useAppMenuItem(registry, 'keyviz'),
-    // useAppMenuItem(registry, 'system_report'),
+    useAppMenuItem(registry, 'system_report'),
     // warning: "diagnose" app doesn't release yet
     // useAppMenuItem(registry, 'diagnose'),
     useAppMenuItem(registry, 'monitoring'),
     useAppMenuItem(registry, 'search_logs'),
+    useAppMenuItem(registry, 'resource_manager', supportResourceManager),
     // useAppMenuItem(registry, '__APP_NAME__'),
     // NOTE: Don't remove above comment line, it is a placeholder for code generator
     debugSubMenu
     // conflictSubMenu
   ]
-  if (topSQLSupport) {
-    menuItems.splice(2, 0, topSQLMenu)
-  }
 
   if (appInfo?.enable_experimental) {
     menuItems.push(experimentalSubMenu)
@@ -174,7 +172,7 @@ function Sider({
 
   const extraMenuItems = [
     useAppMenuItem(registry, 'dashboard_settings'),
-    useAppMenuItem(registry, 'user_profile', displayName)
+    useAppMenuItem(registry, 'user_profile', true, displayName)
   ]
 
   const transSider = useSpring({
diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx b/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx
index 5cf55f60e4..321cded678 100755
--- a/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx
+++ b/ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx
@@ -46,6 +46,7 @@ import AppUserProfile from '~/apps/UserProfile/meta'
 import AppDiagnose from '~/apps/Diagnose/meta'
 import AppOptimizerTrace from '~/apps/OptimizerTrace/meta'
 import AppDeadlock from '~/apps/Deadlock/meta'
+import AppResourceManager from '~/apps/ResourceManager/meta'
 
 import LayoutMain from './layout/main'
 
@@ -169,6 +170,7 @@ async function webPageStart(appOptions: AppOptions) {
     .register(AppDebugAPI)
     .register(AppOptimizerTrace)
     .register(AppDeadlock)
+    .register(AppResourceManager)
 
   if (!appOptions.skipReloadWhoAmI) {
     try {