diff --git a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
index d060e6e6a1..518ce42d89 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import AlarmGroupModal from './components/alarm-group-modal'
+import Card from '@/components/card'
 
 const alarmGroupManage = defineComponent({
   name: 'alarm-group-manage',
@@ -102,7 +102,7 @@ const alarmGroupManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton size='small' type='primary' onClick={handleModalChange}>
               {t('security.alarm_group.create_alarm_group')}
@@ -121,8 +121,8 @@ const alarmGroupManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.alarm_group_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -142,7 +142,7 @@ const alarmGroupManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <AlarmGroupModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
index 1a20d138fa..3a223541a3 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
@@ -22,10 +22,10 @@ import {
   NIcon,
   NDataTable,
   NPagination,
-  NSpace,
-  NCard
+  NSpace
 } from 'naive-ui'
 import DetailModal from './detail'
+import Card from '@/components/card'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useUserInfo } from './use-userinfo'
@@ -109,7 +109,7 @@ const AlarmInstanceManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           {{
             default: () => (
               <NSpace justify='space-between'>
@@ -138,8 +138,8 @@ const AlarmInstanceManage = defineComponent({
               </NSpace>
             )
           }}
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.alarm_instance_manage')}>
           <NSpace vertical>
             <NDataTable columns={columns} data={list} loading={loading} striped />
             <NSpace justify='center'>
@@ -153,7 +153,7 @@ const AlarmInstanceManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         {IS_ADMIN && (
           <DetailModal
             show={showDetailModal}
diff --git a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
index 0f6014194f..33d2c8d206 100644
--- a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import ClusterModal from './components/cluster-modal'
+import Card from '@/components/card'
 
 const clusterManage = defineComponent({
   name: 'cluster-manage',
@@ -102,7 +102,7 @@ const clusterManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               size='small'
@@ -126,8 +126,8 @@ const clusterManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.cluster_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -149,7 +149,7 @@ const clusterManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <ClusterModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
index e85694fd46..bcdb7bbfa9 100644
--- a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import EnvironmentModal from './components/environment-modal'
+import Card from '@/components/card'
 
 const environmentManage = defineComponent({
   name: 'environment-manage',
@@ -102,7 +102,7 @@ const environmentManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               size='small'
@@ -126,8 +126,8 @@ const environmentManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.environment_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -149,7 +149,7 @@ const environmentManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <EnvironmentModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
index fc2d5b8c8e..b8a09258b0 100644
--- a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import K8sNamespaceModal from './components/k8s-namespace-modal'
+import Card from '@/components/card'
 
 const k8sNamespaceManage = defineComponent({
   name: 'k8s-namespace-manage',
@@ -102,7 +102,7 @@ const k8sNamespaceManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton size='small' type='primary' onClick={handleModalChange}>
               {t('security.k8s_namespace.create_namespace')}
@@ -121,8 +121,8 @@ const k8sNamespaceManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.k8s_namespace_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -143,7 +143,7 @@ const k8sNamespaceManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <K8sNamespaceModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
index 75ca5fde9d..70c95c0864 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
@@ -22,13 +22,13 @@ import {
   NIcon,
   NDataTable,
   NPagination,
-  NCard,
   NSpace
 } from 'naive-ui'
 import { useTable } from './use-table'
 import { SearchOutlined } from '@vicons/antd'
-import TenantModal from './components/tenant-modal'
 import { useI18n } from 'vue-i18n'
+import TenantModal from './components/tenant-modal'
+import Card from '@/components/card'
 
 const tenementManage = defineComponent({
   name: 'tenement-manage',
@@ -92,7 +92,7 @@ const tenementManage = defineComponent({
     const { t, loadingRef } = this
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               size='small'
@@ -116,8 +116,8 @@ const tenementManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.tenant_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -139,7 +139,7 @@ const tenementManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <TenantModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index 0265742286..cc0b22f096 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import TokenModal from './components/token-modal'
+import Card from '@/components/card'
 
 const tokenManage = defineComponent({
   name: 'token-manage',
@@ -102,7 +102,7 @@ const tokenManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               class='btn-create-token'
@@ -126,8 +126,8 @@ const tokenManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.token_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -148,7 +148,7 @@ const tokenManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <TokenModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
index 7dd3720045..c0c628cf83 100644
--- a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
@@ -22,15 +22,15 @@ import {
   NIcon,
   NSpace,
   NDataTable,
-  NPagination,
-  NCard
+  NPagination
 } from 'naive-ui'
-import UserDetailModal from './components/user-detail-modal'
-import AuthorizeModal from './components/authorize-modal'
 import { useI18n } from 'vue-i18n'
 import { SearchOutlined } from '@vicons/antd'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
+import UserDetailModal from './components/user-detail-modal'
+import AuthorizeModal from './components/authorize-modal'
+import Card from '@/components/card'
 
 const UsersManage = defineComponent({
   name: 'user-manage',
@@ -66,7 +66,7 @@ const UsersManage = defineComponent({
   render() {
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               onClick={this.onAddUser}
@@ -85,8 +85,8 @@ const UsersManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={this.t('menu.user_manage')}>
           <NSpace vertical>
             <NDataTable
               row-class-name='items'
@@ -108,7 +108,7 @@ const UsersManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <UserDetailModal
           show={this.detailModalShow}
           currentRecord={this.currentRecord}
diff --git a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
index 230dacf390..b2ba14268e 100644
--- a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import WorkerGroupModal from './components/worker-group-modal'
+import Card from '@/components/card'
 
 const workerGroupManage = defineComponent({
   name: 'worker-group-manage',
@@ -102,7 +102,7 @@ const workerGroupManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               size='small'
@@ -126,8 +126,8 @@ const workerGroupManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.worker_group_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -148,7 +148,7 @@ const workerGroupManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <WorkerGroupModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
diff --git a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
index f5a5a23ddd..bc569fde39 100644
--- a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
@@ -18,7 +18,6 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -29,6 +28,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import YarnQueueModal from './components/yarn-queue-modal'
+import Card from '@/components/card'
 
 const yarnQueueManage = defineComponent({
   name: 'yarn-queue-manage',
@@ -102,7 +102,7 @@ const yarnQueueManage = defineComponent({
 
     return (
       <NSpace vertical>
-        <NCard size='small'>
+        <Card>
           <NSpace justify='space-between'>
             <NButton
               size='small'
@@ -126,8 +126,8 @@ const yarnQueueManage = defineComponent({
               </NButton>
             </NSpace>
           </NSpace>
-        </NCard>
-        <NCard size='small'>
+        </Card>
+        <Card title={t('menu.yarn_queue_manage')}>
           <NSpace vertical>
             <NDataTable
               loading={loadingRef}
@@ -148,7 +148,7 @@ const yarnQueueManage = defineComponent({
               />
             </NSpace>
           </NSpace>
-        </NCard>
+        </Card>
         <YarnQueueModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}