diff --git a/src/components/Dialog/Secret.vue b/src/components/Dialog/Secret.vue
new file mode 100644
index 000000000..d3b30a396
--- /dev/null
+++ b/src/components/Dialog/Secret.vue
@@ -0,0 +1,96 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="700px"
+    @close="onClose"
+    @confirm="visible = false"
+  >
+    <el-alert type="warning" :closable="false">
+      {{ warningText }}
+      <div class="secret">
+        <div class="row">
+          <span class="col">ID:</span>
+          <span class="value">{{ keyInfo.id }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
+        </div>
+        <div class="row">
+          <span class="col">Secret:</span>
+          <span class="value">{{ keyInfo.secret }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
+        </div>
+      </div>
+    </el-alert>
+  </Dialog>
+</template>
+
+<script>
+import i18n from '@/i18n/i18n'
+import { copy } from '@/utils/common'
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  name: 'Secret',
+  components: {
+    Dialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => i18n.t('CreateAccessKey')
+    },
+    warningText: {
+      type: String,
+      default: () => i18n.t('ApiKeyWarning')
+    }
+  },
+  data() {
+    return {
+      keyInfo: { id: '', secret: '' },
+      visible: false
+    }
+  },
+  methods: {
+    show(data) {
+      this.keyInfo = data
+      this.visible = true
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    handleCopy(value) {
+      copy(value)
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+ .secret {
+  color: #2b2f3a;
+  margin-top: 20px;
+}
+
+.row {
+  margin-bottom: 10px;
+}
+
+.col {
+  width: 100px;
+  text-align: left;
+  display: inline-block;
+}
+
+.copy-icon {
+  margin-left: 5px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.value {
+  font-weight: 600;
+}
+</style>
diff --git a/src/components/Form/FormFields/UploadField.vue b/src/components/Form/FormFields/UploadField.vue
index 2feb09afd..26aaab3b4 100644
--- a/src/components/Form/FormFields/UploadField.vue
+++ b/src/components/Form/FormFields/UploadField.vue
@@ -8,7 +8,7 @@
     <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
     <input v-model="value" hidden type="text" v-on="$listeners">
     <div>
-      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
+      <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
     </div>
   </div>
 </template>
diff --git a/src/components/Table/CardTable/SmallCard.vue b/src/components/Table/CardTable/SmallCard.vue
new file mode 100644
index 000000000..ce4631589
--- /dev/null
+++ b/src/components/Table/CardTable/SmallCard.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <CardTable
+      ref="table"
+      :columns="3"
+      :sub-component="subComponent"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script type="text/jsx">
+import CardTable from '@/components/Table/CardTable'
+import CardPanel from './components/CardPanel.vue'
+
+export default {
+  name: 'SmallCard',
+  components: {
+    CardTable
+  },
+  data() {
+    return {
+      subComponent: CardPanel
+    }
+  },
+  methods: {
+    reloadTable() {
+      this.$refs.table.reloadTable()
+    }
+  }
+}
+</script>
diff --git a/src/components/Table/CardTable/components/CardPanel.vue b/src/components/Table/CardTable/components/CardPanel.vue
new file mode 100644
index 000000000..661a9cd74
--- /dev/null
+++ b/src/components/Table/CardTable/components/CardPanel.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="account-panel">
+    <el-row :gutter="20">
+      <el-col :span="21">
+        <div class="title">
+          <span>{{ object.name }}</span>
+        </div>
+      </el-col>
+      <el-col v-if="iActions.length !== 0" :span="3" @click.native="handleClick($event)">
+        <el-dropdown>
+          <el-link :underline="false" type="primary">
+            <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
+          </el-link>
+          <el-dropdown-menu default="dropdown">
+            <el-dropdown-item
+              v-for="action in iActions"
+              :key="action.name"
+              :disabled="action.disabled"
+              @click.native="action.callback(object)"
+            >
+              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <el-row :gutter="20" class="panel-content">
+      <el-col :span="6" class="panel-image">
+        <el-image :src="imageUrl" fit="contain" />
+      </el-col>
+      <el-col :span="18" class="panel-info">
+        <InfoPanel
+          v-for="(obj, index) in getInfos(object)"
+          :key="index"
+          :content="obj.content"
+          :title="obj.title"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import InfoPanel from './InfoPanel'
+
+export default {
+  name: 'CardPanel',
+  components: {
+    InfoPanel
+  },
+  props: {
+    tableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    object: {
+      type: Object,
+      required: true
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    infos: {
+      type: Array,
+      default: () => []
+    },
+    getImage: {
+      type: Function,
+      default: (obj) => ''
+    },
+    getInfos: {
+      type: Function,
+      default: (obj) => []
+    },
+    handleUpdate: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      defaultActions: [
+        {
+          id: 'update',
+          name: this.$tc('Update'),
+          icon: 'el-icon-edit',
+          callback: this.handleUpdate,
+          disabled: this.isDisabled('change')
+        },
+        {
+          id: 'delete',
+          name: this.$tc('Delete'),
+          icon: 'el-icon-delete',
+          callback: this.handleDelete,
+          disabled: this.isDisabled('delete')
+        }
+      ]
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.getImage(this.object)
+    },
+    iActions() {
+      const mergedActions = new Map()
+      this.defaultActions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      this.actions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      return Array.from(mergedActions.values())
+    }
+  },
+  methods: {
+    isDisabled(action) {
+      const app = this.tableConfig.permissions?.app
+      const resource = this.tableConfig.permissions?.resource
+      return !this.$hasPerm(`${app}.${action}_${resource}`)
+    },
+    handleClick(event) {
+      event.stopPropagation()
+    },
+    handleDelete() {
+      const url = this.tableConfig.url
+      this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
+        confirmButtonText: this.$tc('Confirm'),
+        cancelButtonText: this.$tc('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$axios.delete(`${url}${this.object.id}/`).then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$tc('DeleteSuccess')
+          })
+          this.$emit('refresh')
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.account-panel {
+  display: flex;
+  flex-direction: column;
+  //height: 100%;
+  cursor: pointer;
+
+  .title {
+    text-align: left;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-content {
+    display: flex;
+    height: 100px;
+    padding: 10px 0;
+
+    .panel-image {
+      margin: auto 5px;
+    }
+  }
+
+  .el-divider--horizontal {
+    margin: 5px 0;
+  }
+}
+</style>
diff --git a/src/views/assets/Cloud/Account/components/InfoPanel.vue b/src/components/Table/CardTable/components/InfoPanel.vue
similarity index 75%
rename from src/views/assets/Cloud/Account/components/InfoPanel.vue
rename to src/components/Table/CardTable/components/InfoPanel.vue
index 2d806f0ef..a86526c59 100644
--- a/src/views/assets/Cloud/Account/components/InfoPanel.vue
+++ b/src/components/Table/CardTable/components/InfoPanel.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="panel-item">
-    <span class="item-label">{{ title }} </span>
-    <el-link :underline="false" class="item-value">
-      <span class="content">{{ content }}</span>
-    </el-link>
+    <div class="item-label">{{ title }}</div>
+    <div class="text-info" :title="content">{{ content }}</div>
   </div>
 </template>
 
@@ -38,14 +36,18 @@ export default {
 
 .panel-item {
   text-align: left;
-  padding: 5px 0;
+  padding: 3px 0;
   line-height: 20px;
-  @include textOverflow;
 
   .item-label {
     text-align: left;
-    display: inline-block;
-    width: 100px;
+  }
+  .item-label::after {
+    content: ':';
+    margin-left: 1px;
+  }
+  .text-info {
+    @include textOverflow;
   }
 }
 
diff --git a/src/components/Table/CardTable/index.vue b/src/components/Table/CardTable/index.vue
index 9915141b7..5db80d112 100644
--- a/src/components/Table/CardTable/index.vue
+++ b/src/components/Table/CardTable/index.vue
@@ -10,7 +10,7 @@
       <IBox v-if="totalData.length === 0">
         <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
       </IBox>
-      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" style="min-width: 335px;">
+      <el-col v-for="(d, index) in totalData" :key="index" :lg="24 / columns" :md="12" :sm="24" style="min-width: 335px;">
         <el-card
           :body-style="{ 'text-align': 'center', 'padding': '15px' }"
           :class="{'is-disabled': isDisabled(d)}"
@@ -19,7 +19,14 @@
           @click.native="onView(d)"
         >
           <keep-alive>
-            <component :is="subComponent" v-if="subComponent" :object="d" @refresh="getList" />
+            <component
+              :is="subComponent"
+              v-if="subComponent"
+              :object="d"
+              :table-config="tableConfig"
+              v-bind="subComponentProps"
+              @refresh="getList"
+            />
             <slot v-else :index="index" :item="d">
               <span v-if="d.edition === 'enterprise'" class="enterprise">
                 {{ $t('Enterprise') }}
@@ -85,6 +92,10 @@ export default {
   },
   props: {
     // 定义 table 的配置
+    columns: {
+      type: Number,
+      default: 3
+    },
     tableConfig: {
       type: Object,
       default: () => ({})
@@ -100,6 +111,10 @@ export default {
     subComponent: {
       type: Object,
       default: () => null
+    },
+    subComponentProps: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
diff --git a/src/router/pam/service.js b/src/router/pam/service.js
index bf9411d5e..75e94769c 100644
--- a/src/router/pam/service.js
+++ b/src/router/pam/service.js
@@ -3,82 +3,57 @@ import i18n from '@/i18n/i18n'
 
 export default [
   {
-    path: 'service',
-    name: 'AccountService',
+    path: 'services',
+    name: 'ServiceIntegration',
     component: empty,
     redirect: {
-      name: 'AccountServiceList'
+      name: 'ServiceIntegrationList'
     },
     meta: {
       app: 'accounts',
-      name: 'AccountService',
+      name: 'ServiceIntegration',
       icon: 'service',
-      resource: 'pushaccountautomation'
+      resource: 'serviceintegration'
     },
     children: [
       {
         path: '',
-        component: () => import('@/views/accounts/AccountPush/index.vue'),
-        name: 'AccountServiceList',
+        component: () => import('@/views/pam/ServiceIntegration/index.vue'),
+        name: 'ServiceIntegrationList',
         meta: {
-          title: i18n.t('服务对接'),
-          menuTitle: i18n.t('服务对接'),
-          permissions: ['accounts.view_pushaccountautomation']
+          title: i18n.t('ServiceIntegration'),
+          menuTitle: i18n.t('ServiceIntegration'),
+          permissions: ['accounts.view_serviceintegration']
         }
       },
       {
         path: 'create',
-        component: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue'),
-        name: 'AccountPushCreate',
+        component: () => import('@/views/pam/ServiceIntegration/ServiceIntegrationCreateUpdate.vue'),
+        name: 'ServiceIntegrationCreate',
         hidden: true,
         meta: {
-          title: i18n.t('AccountPushCreate'),
-          // activeMenu: '/console/accounts/automations',
-          permissions: ['accounts.add_pushaccountautomation']
+          title: i18n.t('ServiceIntegrationCreate'),
+          permissions: ['accounts.add_serviceintegration']
         }
       },
       {
         path: ':id/update',
-        component: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue'),
-        name: 'AccountPushUpdate',
+        component: () => import('@/views/pam/ServiceIntegration/ServiceIntegrationCreateUpdate.vue'),
+        name: 'ServiceIntegrationUpdate',
         hidden: true,
         meta: {
-          title: i18n.t('AccountPushUpdate'),
-          // activeMenu: '/console/accounts/automations',
-          permissions: ['accounts.change_pushaccountautomation']
+          title: i18n.t('ServiceIntegrationUpdate'),
+          permissions: ['accounts.change_serviceintegration']
         }
       },
       {
         path: ':id',
-        component: () => import('@/views/accounts/AccountPush/AccountPushDetail/index.vue'),
-        name: 'AccountCheckDetail',
+        component: () => import('@/views/pam/ServiceIntegration/ServiceIntegrationDetail/index.vue'),
+        name: 'ServiceIntegrationDetail',
         hidden: true,
         meta: {
-          title: i18n.t('AccountPushList'),
-          // activeMenu: '/console/accounts/automations',
-          permissions: ['accounts.view_pushaccountautomation']
-        }
-      },
-      {
-        path: 'executions',
-        component: () => import('@/views/accounts/AccountPush/AccountPushExecutionList.vue'),
-        name: 'AccountPushExecutionList',
-        hidden: true,
-        meta: {
-          title: i18n.t('ExecutionList'),
-          // activeMenu: '/console/accounts/automations',
-          permissions: ['accounts.view_pushaccountexecution']
-        }
-      },
-      {
-        path: 'executions/:id',
-        component: () => import('@/views/accounts/AccountPush/AccountPushExecutionDetail/index.vue'),
-        name: 'AccountCheckExecutionDetail',
-        hidden: true,
-        meta: {
-          title: i18n.t('ExecutionDetail'),
-          // activeMenu: '/console/accounts/automations',
-          permissions: ['accounts.view_pushaccountexecution']
+          title: i18n.t('ServiceIntegrationDetail'),
+          permissions: ['accounts.view_serviceintegration']
         }
       }
     ]
diff --git a/src/views/assets/Cloud/Account/AccountList.vue b/src/views/assets/Cloud/Account/AccountList.vue
index dcb03f09d..d403d63d7 100644
--- a/src/views/assets/Cloud/Account/AccountList.vue
+++ b/src/views/assets/Cloud/Account/AccountList.vue
@@ -1,11 +1,35 @@
 <template>
   <div>
-    <CardTable ref="accountTable" :sub-component="subComponent" v-bind="$data" />
-    <CreateDialog
-      v-if="visible"
-      v-bind="providerConfig"
-      :visible.sync="visible"
-    />
+    <SmallCard ref="table" v-bind="$data" />
+    <CreateDialog v-if="visible" v-bind="providerConfig" :visible.sync="visible" />
+    <Dialog
+      v-if="updateVisible"
+      :destroy-on-close="true"
+      :show-buttons="false"
+      :title="$tc('CloudAccountUpdate')"
+      :visible.sync="updateVisible"
+      v-on="$listeners"
+    >
+      <AuthPanel
+        :object="object"
+        :provider="object.provider.value"
+        :visible.sync="updateVisible"
+        origin="update"
+        @submitSuccess="onSubmitSuccess"
+      />
+    </Dialog>
+    <Dialog
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :show-buttons="false"
+      :show-close="false"
+      :title="$tc('SyncOnline')"
+      :visible.sync="onlineSyncVisible"
+      v-on="$listeners"
+    >
+      <AssetPanel :object="object" :visible.sync="onlineSyncVisible" />
+    </Dialog>
   </div>
 </template>
 
@@ -15,23 +39,27 @@ import {
   baiducloud, state_private, fc, gcp, huaweicloud, huaweicloud_private, jdcloud, kingsoftcloud, lan, nutanix, openstack,
   qcloud, qcloud_lighthouse, qingcloud_private, scp, ucloud, vmware, volcengine, zstack
 } from '../const'
-import rules from '@/components/Form/DataForm/rules'
 import CreateDialog from './components/CreateDialog.vue'
-import CardTable from '@/components/Table/CardTable'
-import AccountPanel from './components/AccountPanel'
+import SmallCard from '@/components/Table/CardTable/SmallCard.vue'
 import { ACCOUNT_PROVIDER_ATTRS_MAP } from '@/views/assets/Cloud/const'
+import Dialog from '@/components/Dialog/index.vue'
+import AssetPanel from './components/AssetPanel.vue'
+import AuthPanel from './components/AuthPanel.vue'
+import { toSafeLocalDateStr } from '@/utils/time'
 
 export default {
   name: 'CloudAccountList',
   components: {
-    CardTable,
+    AuthPanel,
+    AssetPanel,
+    Dialog,
+    SmallCard,
     CreateDialog
   },
   data() {
     const vm = this
     return {
-      colWidth: 6,
-      subComponent: AccountPanel,
+      object: null,
       tableConfig: {
         url: '/api/v1/xpack/cloud/accounts/',
         permissions: {
@@ -103,21 +131,64 @@ export default {
       providerConfig: {
         providers: []
       },
-      account: {},
       visible: false,
-      testLoading: false,
-      select2: {
-        allowCreate: true,
-        multiple: false
-      },
-      regionRules: [rules.Required]
+      updateVisible: false,
+      onlineSyncVisible: false,
+      subComponentProps: {
+        handleUpdate: (obj) => {
+          this.object = obj
+          this.updateVisible = true
+        },
+        getImage: (obj) => {
+          return ACCOUNT_PROVIDER_ATTRS_MAP[obj.provider.value].image
+        },
+        getInfos: (obj) => {
+          return [
+            {
+              title: this.$tc('TotalSyncRegion'),
+              content: obj?.task.regions.length
+            },
+            {
+              title: this.$tc('TotalSyncAsset'),
+              content: obj?.task.instance_count
+            },
+            {
+              title: this.$tc('DateLastSync'),
+              content: toSafeLocalDateStr(obj?.task.date_last_sync)
+            }
+          ]
+        },
+        actions: [
+          {
+            id: 'online-sync',
+            name: this.$tc('SyncOnline'),
+            icon: 'el-icon-thumb',
+            callback: this.handleOnlineExecute,
+            disabled: !this.$hasPerm('xpack.change_syncinstancetask')
+          }
+        ]
+      }
     }
   },
   watch: {
     visible: {
       handler(val) {
         if (!val) {
-          this.$refs.accountTable.reloadTable()
+          this.$refs.table.reloadTable()
+        }
+      }
+    },
+    onlineSyncVisible: {
+      handler(newValue) {
+        if (newValue === false) {
+          this.$refs.table.reloadTable()
+        }
+      }
+    },
+    updateVisible: {
+      handler(newValue) {
+        if (newValue === false) {
+          this.$refs.table.reloadTable()
         }
       }
     }
@@ -129,6 +200,14 @@ export default {
         return 200
       }
       return status
+    },
+    handleOnlineExecute(obj) {
+      this.object = obj
+      this.onlineSyncVisible = true
+    },
+    onSubmitSuccess() {
+      this.$refs.table.reloadTable()
+      this.updateVisible = false
     }
   }
 }
diff --git a/src/views/assets/Cloud/Account/components/AccountPanel.vue b/src/views/assets/Cloud/Account/components/AccountPanel.vue
deleted file mode 100644
index 54f92ca6b..000000000
--- a/src/views/assets/Cloud/Account/components/AccountPanel.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-  <div class="account-panel">
-    <el-row :gutter="20">
-      <el-col :span="21">
-        <div class="title">
-          <span>{{ object.name }}</span>
-        </div>
-      </el-col>
-      <el-col :span="3" @click.native="handleClick($event)">
-        <el-dropdown>
-          <el-link :underline="false" type="primary">
-            <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
-          </el-link>
-          <el-dropdown-menu default="dropdown">
-            <el-dropdown-item
-              v-for="action in actions"
-              :key="action.name"
-              :disabled="action.disabled"
-              @click.native="action.callback"
-            >
-              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </el-col>
-    </el-row>
-    <el-divider />
-    <el-row :gutter="20" class="panel-content">
-      <el-col :span="6" class="panel-image">
-        <el-image :src="cloudImage" fit="contain" />
-      </el-col>
-      <el-col :span="18" class="panel-info">
-        <InfoPanel :content="iTask.regions.length" :title="$tc('TotalSyncRegion')" />
-        <InfoPanel :content="iTask.instance_count || 0" :title="$tc('TotalSyncAsset')" />
-        <InfoPanel :content="toSafeLocalDateStr(iTask.date_last_sync)" :title="$tc('DateLastSync')" />
-      </el-col>
-    </el-row>
-    <Dialog
-      v-if="updateVisible"
-      :destroy-on-close="true"
-      :show-buttons="false"
-      :title="$tc('CloudAccountUpdate')"
-      :visible.sync="updateVisible"
-      v-on="$listeners"
-    >
-      <AuthPanel
-        :object="object"
-        :provider="object.provider.value"
-        :visible.sync="updateVisible"
-        origin="update"
-        @submitSuccess="onSubmitSuccess"
-      />
-    </Dialog>
-    <Dialog
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :show-buttons="false"
-      :show-close="false"
-      :title="$tc('SyncOnline')"
-      :visible.sync="onlineSyncVisible"
-      v-on="$listeners"
-    >
-      <AssetPanel :object="object" :visible.sync="onlineSyncVisible" />
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog/index.vue'
-import AuthPanel from './AuthPanel'
-import InfoPanel from './InfoPanel'
-import AssetPanel from './AssetPanel'
-import { toSafeLocalDateStr } from '@/utils/time'
-import { ACCOUNT_PROVIDER_ATTRS_MAP } from '@/views/assets/Cloud/const'
-
-export default {
-  name: 'AccountPanel',
-  components: {
-    Dialog,
-    AuthPanel,
-    AssetPanel,
-    InfoPanel
-  },
-  props: {
-    object: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      updateVisible: false,
-      onlineSyncVisible: false,
-      actions: [
-        {
-          name: this.$tc('Update'),
-          icon: 'el-icon-edit',
-          callback: this.handleUpdate,
-          disabled: !this.$hasPerm('xpack.change_account')
-        },
-        {
-          name: this.$tc('Delete'),
-          icon: 'el-icon-delete',
-          callback: this.handleDelete,
-          disabled: !this.$hasPerm('xpack.delete_account')
-        },
-        {
-          name: this.$tc('SyncOnline'),
-          icon: 'el-icon-thumb',
-          callback: this.handleOnlineExecute,
-          disabled: !this.$hasPerm('xpack.change_syncinstancetask')
-        }
-      ]
-    }
-  },
-  computed: {
-    iTask() {
-      return { ...{ strategy: [] }, ...this.object?.task }
-    },
-    cloudImage() {
-      return ACCOUNT_PROVIDER_ATTRS_MAP[`${this.object.provider.value}`].image
-    }
-  },
-  watch: {
-    onlineSyncVisible: {
-      handler(newValue) {
-        if (newValue === false) {
-          this.$emit('refresh')
-        }
-      }
-    },
-    updateVisible: {
-      handler(newValue) {
-        if (newValue === false) {
-          this.$emit('refresh')
-        }
-      }
-    }
-  },
-  methods: {
-    toSafeLocalDateStr,
-    handleDelete() {
-      this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
-        confirmButtonText: this.$tc('Confirm'),
-        cancelButtonText: this.$tc('Cancel'),
-        type: 'warning'
-      }).then(() => {
-        this.$axios.delete(`/api/v1/xpack/cloud/accounts/${this.object.id}/`).then(() => {
-          this.$message({
-            type: 'success',
-            message: this.$tc('DeleteSuccess')
-          })
-          this.$emit('refresh')
-        })
-      })
-    },
-    handleUpdate() {
-      this.updateVisible = true
-    },
-    handleOnlineExecute() {
-      this.onlineSyncVisible = true
-    },
-    onSubmitSuccess() {
-      this.$emit('refresh')
-      this.updateVisible = false
-    },
-    handleClick(event) {
-      event.stopPropagation()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.account-panel {
-  display: flex;
-  flex-direction: column;
-  //height: 100%;
-  cursor: pointer;
-
-  .title {
-    text-align: left;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .panel-content {
-    display: flex;
-    height: 100px;
-    padding: 10px 0;
-
-    .panel-image {
-      margin: auto 5px;
-    }
-  }
-
-  .el-divider--horizontal {
-    margin: 5px 0;
-  }
-}
-</style>
diff --git a/src/views/pam/ServiceIntegration/SDKList.vue b/src/views/pam/ServiceIntegration/SDKList.vue
new file mode 100644
index 000000000..3d8b13918
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/SDKList.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <IBox class="radio-box">
+      <el-radio-group v-model="currentLanguage" @input="handleInput">
+        <el-radio label="python">Python</el-radio>
+        <el-radio label="go">Go</el-radio>
+      </el-radio-group>
+    </IBox>
+    <el-row :gutter="20">
+      <el-col :lg="16" :md="16" :sm="16">
+        <IBox title="README">
+          <vue-markdown v-if="readme" :source="readme" />
+          <span v-else>{{ $tc('NoData') }}</span>
+        </IBox>
+      </el-col>
+      <el-col :lg="8" :md="8" :sm="8">
+        <QuickActions :actions="quickActions" type="primary" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { IBox } from '@/components'
+import { download } from '@/utils/common'
+import QuickActions from '@/components/QuickActions/index.vue'
+import VueMarkdown from 'vue-markdown'
+import { highlightBlock } from 'highlight.js'
+
+export default {
+  name: 'SDKList',
+  components: {
+    QuickActions,
+    IBox,
+    VueMarkdown
+  },
+  data() {
+    return {
+      currentLanguage: 'python',
+      readme: '',
+      filenameMap: {
+        python: 'jms_pam-0.0.1-py3-none-any.whl',
+        go: 'jms_pam.go'
+      },
+      quickFilters: [
+        {
+          label: this.$t('Language'),
+          options: [
+            {
+              label: 'Python',
+              active: false,
+              filter: {
+                category: 'python'
+              }
+            },
+            {
+              label: 'GO',
+              filter: {
+                category: 'go'
+              }
+            }
+          ]
+        }
+      ],
+      quickActions: [
+        {
+          title: this.$t('Action'),
+          attrs: {
+            type: 'primary',
+            label: this.$tc('Download'),
+            model: this.currentLanguage
+          },
+          callbacks: {
+            click: () => {
+              const filename = this.filenameMap[this.currentLanguage]
+              download(`/download/public/sdks/${filename}/`)
+            }
+          }
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getSdkInfo()
+  },
+  methods: {
+    highlightCode() {
+      const codeBlocks = this.$el.querySelectorAll('pre code')
+      codeBlocks.forEach((block) => {
+        if (block?.dataset?.highlighted !== 'yes') {
+          highlightBlock(block)
+        }
+      })
+    },
+    getSdkInfo() {
+      const url = `/api/v1/accounts/service-integrations/sdks/?language=${this.currentLanguage}`
+      this.$axios.get(url).then(res => {
+        this.readme = res.readme
+        this.$nextTick(() => {
+          this.highlightCode()
+        })
+      })
+    },
+    handleInput() {
+      this.getSdkInfo()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.radio-box {
+  margin-bottom: 5px;
+}
+</style>
diff --git a/src/views/pam/ServiceIntegration/ServiceIntegrationCreateUpdate.vue b/src/views/pam/ServiceIntegration/ServiceIntegrationCreateUpdate.vue
new file mode 100644
index 000000000..a8200f7ff
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/ServiceIntegrationCreateUpdate.vue
@@ -0,0 +1,99 @@
+<template>
+  <GenericCreateUpdatePage v-bind="$data" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+import { UploadField } from '@/components'
+import { JSONManyToManySelect } from '@/components/Form/FormFields'
+
+export default {
+  name: 'ServiceIntegrationCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    const vm = this
+    return {
+      logo_file: null,
+      url: '/api/v1/accounts/service-integrations/',
+      fields: [
+        [this.$t('Basic'), ['name', 'logo_image']],
+        [this.$t('AccountPolicy'), ['accounts', 'ip_group']],
+        [this.$t('Other'), ['is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        accounts: {
+          component: JSONManyToManySelect,
+          el: {
+            value: [],
+            resource: vm.$t('Accounts'),
+            select2: {
+              url: '/api/v1/accounts/accounts/',
+              ajax: {
+                transformOption: (item) => {
+                  const assetInfo = `${item.asset.name}(${item.asset.address})`
+                  const accountInfo = `${item.name}(${item.username})`
+                  return { label: `${assetInfo} - ${accountInfo}`, value: item.id }
+                }
+              }
+            },
+            attrs: [
+              { name: 'name', label: vm.$t('Name'), inTable: true },
+              {
+                name: 'asset', label: vm.$t('Asset'), type: 'm2m', inTable: true,
+                el: {
+                  url: '/api/v1/assets/assets/?fields_size=mini'
+                },
+                formatter: (row, column, value) => `${value.name}(${value.address})`
+              }
+            ]
+          }
+        },
+        logo_image: {
+          component: UploadField,
+          el: {
+            width: '10%',
+            height: '10%',
+            accept: 'image/jpg, image/png, image/jpeg, image/svg+xml'
+          },
+          on: {
+            fileChange: ([value], updateForm) => {
+              this.logo_file = value
+            }
+          }
+        }
+      },
+      hasSaveContinue: false,
+      createSuccessNextRoute: {
+        name: 'ServiceIntegrationDetail'
+      },
+      performSubmit(values) {
+        const formData = new FormData()
+        delete values['logo_image']
+
+        if (!Array.isArray(values.ip_group)) {
+          values.ip_group = values.ip_group ? values.ip_group.split(',') : []
+        }
+
+        const ipGroups = values.ip_group
+        delete values['ip_group']
+        for (const ip in ipGroups) {
+          formData.append('ip_group', ipGroups[ip])
+        }
+
+        for (const key in values) {
+          const value = key === 'accounts' ? JSON.stringify(values[key]) : values[key]
+          formData.append(key, value)
+        }
+        if (vm.logo_file) {
+          formData.append('logo_image', vm.logo_file)
+        }
+        return this.$axios[this.method](this.iUrl, formData)
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/ServiceIntegrationInfo.vue b/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/ServiceIntegrationInfo.vue
new file mode 100644
index 000000000..61d99a72a
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/ServiceIntegrationInfo.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :md="15" :sm="24">
+        <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+      </el-col>
+      <el-col :md="9" :sm="24">
+        <QuickActions :actions="quickActions" type="primary" />
+      </el-col>
+    </el-row>
+    <SecretDialog ref="secretDialog" />
+  </div>
+</template>
+
+<script>
+import { QuickActions } from '@/components'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import SecretDialog from '@/components/Dialog/Secret.vue'
+
+export default {
+  name: 'ServiceIntegrationInfo',
+  components: {
+    SecretDialog,
+    AutoDetailCard,
+    QuickActions
+  },
+  props: {
+    object: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      warningText: this.$t('ApiKeyWarning'),
+      key: { id: '', secret: '' },
+      quickActions: [
+        {
+          title: this.$t('Secret'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('Generate'),
+            disabled: !this.$hasPerm('accounts.change_serviceintegration') || !this.object.is_active
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.get(
+                `/api/v1/accounts/service-integrations/${this.object.id}/secret/`,
+              ).then(res => {
+                this.$refs.secretDialog.show(res)
+              })
+            }.bind(this)
+          }
+        }
+      ],
+      url: `/api/v1/accounts/service-integrations/${this.object.id}`,
+      detailFields: [
+        'id', 'name', 'date_created', 'date_updated', 'comment', 'is_active'
+      ]
+    }
+  },
+  computed: {
+  }
+}
+</script>
diff --git a/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/index.vue b/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/index.vue
new file mode 100644
index 000000000..995b9a231
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/ServiceIntegrationDetail/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="object" v-bind="config">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="object" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import ServiceIntegrationInfo from './ServiceIntegrationInfo.vue'
+import ServiceCallRecords from '../components/CallRecords.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    ServiceCallRecords,
+    ServiceIntegrationInfo
+  },
+  data() {
+    return {
+      object: {},
+      config: {
+        titlePrefix: this.$t('ServiceIntegrationDetail'),
+        activeMenu: 'ServiceIntegrationInfo',
+        url: '/api/v1/accounts/service-integrations',
+        submenu: [
+          {
+            title: this.$t('Basic'),
+            name: 'ServiceIntegrationInfo',
+            hidden: () => !this.$hasPerm('accounts.view_serviceintegration')
+          },
+          {
+            name: 'ServiceCallRecords',
+            title: this.$t('CallRecords'),
+            hidden: () => !this.$hasPerm('audits.view_serviceaccesslog')
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/pam/ServiceIntegration/ServiceIntegrationList.vue b/src/views/pam/ServiceIntegration/ServiceIntegrationList.vue
new file mode 100644
index 000000000..08661dc38
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/ServiceIntegrationList.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <SmallCard ref="table" v-bind="$data" />
+  </div>
+</template>
+
+<script type="text/jsx">
+import SmallCard from '@/components/Table/CardTable/SmallCard.vue'
+import { toSafeLocalDateStr } from '@/utils/time'
+
+export default {
+  name: 'CloudAccountList',
+  components: {
+    SmallCard
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/accounts/service-integrations/',
+        permissions: { app: 'accounts', resource: 'serviceintegration' }
+      },
+      headerActions: {
+        hasImport: false,
+        hasExport: false,
+        hasColumnSetting: false,
+        hasMoreActions: false,
+        searchConfig: {
+          getUrlQuery: false
+        }
+      },
+      subComponentProps: {
+        getImage: (obj) => {
+          return obj.logo_image
+        },
+        getInfos: (obj) => {
+          return [
+            { title: `${this.$tc('RelevantApp')} ID`, content: obj.id },
+            { title: this.$tc('DataLastUsed'), content: toSafeLocalDateStr(obj.date_last_used) },
+            { title: this.$tc('AccountAmount'), content: obj.accounts_amount },
+            { title: this.$tc('Comment'), content: obj.comment || this.$tc('Nothing') }
+          ]
+        },
+        handleUpdate: (obj) => {
+          this.$router.push({ name: 'ServiceIntegrationUpdate', params: { id: obj.id }})
+        }
+      }
+    }
+  },
+  methods: {}
+}
+</script>
diff --git a/src/views/pam/ServiceIntegration/components/CallRecords.vue b/src/views/pam/ServiceIntegration/components/CallRecords.vue
new file mode 100644
index 000000000..1f7e785dc
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/components/CallRecords.vue
@@ -0,0 +1,60 @@
+<template>
+  <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+</template>
+
+<script>
+import GenericListTable from '@/layout/components/GenericListTable/index.vue'
+
+export default {
+  name: 'CallRecords',
+  components: {
+    GenericListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: this.getUrl(),
+        columns: [
+          'service', 'asset', 'account', 'remote_addr', 'datetime'
+        ],
+        extraQuery: {
+          order: '-datetime'
+        },
+        columnsMeta: {
+          service: {
+            label: this.$t('RelevantApp')
+          },
+          remote_addr: {
+            width: '180px'
+          },
+          actions: {
+            has: false
+          }
+        }
+      },
+      headerActions: {
+        hasSearch: true,
+        hasRefresh: true,
+        hasRightActions: true,
+        hasLeftActions: false,
+        hasMoreActions: false,
+        hasExport: false,
+        hasImport: false
+      }
+    }
+  },
+  methods: {
+    getUrl() {
+      const baseUrl = '/api/v1/audits/service-access-logs/'
+      return this.object.id ? `${baseUrl}?service_id=${this.object.id}` : baseUrl
+    }
+  }
+}
+</script>
diff --git a/src/views/pam/ServiceIntegration/index.vue b/src/views/pam/ServiceIntegration/index.vue
new file mode 100644
index 000000000..fe49d3b8c
--- /dev/null
+++ b/src/views/pam/ServiceIntegration/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <TabPage
+    :active-menu.sync="activeMenu"
+    :submenu="tab.submenu"
+  />
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+
+export default {
+  name: 'ServiceIntegrationList',
+  components: {
+    TabPage
+  },
+  data() {
+    return {
+      loading: true,
+      activeMenu: 'service',
+      tab: {
+        submenu: [
+          {
+            name: 'service',
+            title: this.$t('RelevantApp'),
+            hidden: !this.$hasPerm('accounts.view_serviceintegration'),
+            component: () => import('@/views/pam/ServiceIntegration/ServiceIntegrationList.vue')
+          },
+          {
+            name: 'call-records',
+            title: this.$t('CallRecords'),
+            hidden: !this.$hasPerm('audits.view_serviceaccesslog'),
+            component: () => import('@/views/pam/ServiceIntegration/components/CallRecords.vue')
+          },
+          {
+            name: 'sdk-doc',
+            title: this.$t('SDK'),
+            hidden: !this.$hasPerm('accounts.view_serviceintegration'),
+            component: () => import('@/views/pam/ServiceIntegration/SDKList.vue')
+          }
+        ]
+      }
+    }
+  },
+  watch: {},
+  async mounted() {
+  },
+  methods: {}
+}
+</script>
diff --git a/src/views/profile/AccessKey/index.vue b/src/views/profile/AccessKey/index.vue
index 835a74da0..2ad8f83f5 100644
--- a/src/views/profile/AccessKey/index.vue
+++ b/src/views/profile/AccessKey/index.vue
@@ -6,39 +6,18 @@
       :help-tip="helpMessage"
       :table-config="tableConfig"
     />
-    <Dialog
-      :show-cancel="false"
-      :title="$tc('CreateAccessKey')"
-      :visible.sync="visible"
-      width="700px"
-      @close="onClose"
-      @confirm="visible = false"
-    >
-      <el-alert type="warning">
-        {{ warningText }}
-        <div class="secret">
-          <div class="row">
-            <span class="col">ID:</span>
-            <span class="value">{{ key.id }}</span>
-          </div>
-          <div class="row">
-            <span class="col">Secret:</span>
-            <span class="value">{{ key.secret }}</span>
-          </div>
-        </div>
-      </el-alert>
-    </Dialog>
+    <SecretDialog ref="secretDialog" @close="onClose" />
   </div>
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
 import { ArrayFormatter, DateFormatter } from '@/components/Table/TableFormatters'
-import Dialog from '@/components/Dialog/index.vue'
+import SecretDialog from '@/components/Dialog/Secret.vue'
 
 export default {
   components: {
-    Dialog,
+    SecretDialog,
     GenericListPage
   },
   data() {
@@ -125,8 +104,7 @@ export default {
             can: () => this.$hasPerm('authentication.add_accesskey'),
             callback: function() {
               this.$axios.post(ajaxUrl).then(res => {
-                this.key = res
-                this.visible = true
+                this.$refs.secretDialog.show(res)
               })
             }.bind(this)
           }
@@ -146,22 +124,4 @@ export default {
 </script>
 
 <style scoped>
-.secret {
-  color: #2b2f3a;
-  margin-top: 20px;
-}
-
-.row {
-  margin-bottom: 10px;
-}
-
-.col {
-  width: 100px;
-  text-align: left;
-  display: inline-block;
-}
-
-.value {
-  font-weight: 600;
-}
 </style>