diff --git a/public/index.html b/public/index.html
index 929de155d..3ea4b79ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="0" http-equiv="Expires">
@@ -20,52 +20,71 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background-color: white;
+            background-color: rgba(255, 255, 255, 0.98);
             z-index: 9999;
         }
 
         .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(0, 0, 0, 0.1);
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: var(--color-primary);
             border-radius: 50%;
-            border-top-color: #3498db;
-            animation: spin 1s infinite linear;
+            animation: spin 1s linear infinite;
+        }
+
+        .spinner::after {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: rgba(64, 158, 255, 0.2);
+            border-radius: 50%;
+            animation: spin 2s linear infinite;
         }
 
         @keyframes spin {
-            to {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
                 transform: rotate(360deg);
             }
         }
     </style>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <script>
-      window.onload = function () {
-          if (location.pathname === '/') {
-              location.pathname = '/ui/'
-          }
-          const pathname = window.location.pathname
-          if (pathname.startsWith('/core')) {
-              return
-          }
-          if (pathname.indexOf('/ui') === -1) {
-              window.location.href = window.location.origin + '/ui/#' + pathname
-          }
-          if (pathname.startsWith('/ui/#/chat')) {
-              window.location.href = window.location.origin + pathname
-          }
-      }
-    </script>
-    <div id="app">
-    </div>
-    <div id="loading">
-      <div class="spinner"></div>
-    </div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<body>
+<noscript>
+    <strong>
+        We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+    </strong>
+</noscript>
+<script>
+    window.onload = function () {
+        if (location.pathname === '/') {
+            location.pathname = '/ui/'
+        }
+        const pathname = window.location.pathname
+        if (pathname.startsWith('/core')) {
+            return
+        }
+        if (pathname.indexOf('/ui') === -1) {
+            window.location.href = window.location.origin + '/ui/#' + pathname
+        }
+        if (pathname.startsWith('/ui/#/chat')) {
+            window.location.href = window.location.origin + pathname
+        }
+    }
+</script>
+<div id="app">
+</div>
+<div id="loading">
+    <div class="spinner"></div>
+</div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/src/components/Form/AutoDataForm/index.vue b/src/components/Form/AutoDataForm/index.vue
index 2f1778b91..d7daf4f1c 100644
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div>
     <DataForm
       v-if="!loading"
       ref="dataForm"
diff --git a/src/components/Table/AutoDataTable/index.vue b/src/components/Table/AutoDataTable/index.vue
index 64c5acd6d..5d7a90017 100644
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div>
     <DataTable
       v-if="!loading"
       ref="dataTable"
diff --git a/src/components/Table/CardTable/Panel.vue b/src/components/Table/CardTable/Panel.vue
new file mode 100644
index 000000000..b7a9e5a18
--- /dev/null
+++ b/src/components/Table/CardTable/Panel.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <span v-if="d.edition === 'enterprise'" class="enterprise">
+      {{ $t('Enterprise') }}
+    </span>
+    <el-row class="panel">
+      <el-col v-if="d.icon" :span="8" class="image">
+        <img
+          v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
+          :alt="d.display_name"
+          :src="d.icon"
+        >
+        <Icon v-else :icon="d.icon" />
+      </el-col>
+      <el-col :span="16" class="text-zone">
+        <div class="one-line">
+          <b>{{ d.display_name }}</b>
+          <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
+            {{ d.version }}
+          </el-tag>
+        </div>
+        <div :title="d.comment " class="comment">
+          {{ d.comment }}
+        </div>
+        <div class="tag-zone">
+          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+            {{ capitalize(tag) }}
+          </el-tag>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Icon from '@/components/Widgets/Icon/index.vue'
+
+export default {
+  name: 'Panel',
+  components: { Icon },
+  props: {
+    d: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: 0;
+  height: 100%;
+
+  .image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 60px;
+      height: 60px;
+      object-fit: contain;
+    }
+
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  .text-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .one-line {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding-top: 10px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+
+      b {
+        padding-right: 5px;
+      }
+
+      span {
+        margin-left: 0 !important;
+      }
+    }
+
+    .comment {
+      display: -webkit-box;
+      height: 120px;
+      font-size: 12px;
+      padding: 10px 0;
+      cursor: pointer;
+      overflow: hidden;
+      -webkit-line-clamp: 4;
+      -webkit-box-flex: 1;
+      -webkit-box-orient: vertical;
+      text-align: left;
+    }
+
+    .tag-zone {
+      display: flex;
+      height: 30%;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+
+.enterprise {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  background-color: var(--color-primary);
+  color: #fff;
+  padding: 3px 8px 4px 9px;
+  font-size: 13px;
+  border-radius: 3px 3px 3px 8px;
+}
+
+.tag-zone {
+  margin-top: 10px;
+
+  .el-tag {
+    margin-right: 3px;
+  }
+}
+
+.text-zone {
+  text-align: left;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Table/CardTable/index.vue b/src/components/Table/CardTable/index.vue
index f4c85d59e..e4c612ee3 100644
--- a/src/components/Table/CardTable/index.vue
+++ b/src/components/Table/CardTable/index.vue
@@ -6,8 +6,8 @@
       :table-url="tableUrl"
       v-bind="headerActions"
     />
-    <el-row :gutter="10" class="the-row">
-      <IBox v-if="totalData.length === 0">
+    <el-row v-loading="loading" class="the-row">
+      <IBox v-if="totalData.length === 0" class="empty-box">
         <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
       </IBox>
       <div class="card-container">
@@ -22,35 +22,7 @@
         >
           <keep-alive>
             <slot :index="index" :item="d">
-              <span v-if="d.edition === 'enterprise'" class="enterprise">
-                {{ $t('Enterprise') }}
-              </span>
-              <el-row>
-                <el-col v-if="d.icon" :span="8" class="image">
-                  <img
-                    v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
-                    :alt="d.display_name"
-                    :src="d.icon"
-                  >
-                  <Icon v-else :icon="d.icon" />
-                </el-col>
-                <el-col :span="16" class="text-zone">
-                  <div class="one-line">
-                    <b>{{ d.display_name }}</b>
-                    <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
-                      {{ d.version }}
-                    </el-tag>
-                  </div>
-                  <div :title="d.comment " class="comment">
-                    {{ d.comment }}
-                  </div>
-                  <div class="tag-zone">
-                    <el-tag v-for="tag of d.tags" :key="tag" size="mini">
-                      {{ capitalize(tag) }}
-                    </el-tag>
-                  </div>
-                </el-col>
-              </el-row>
+              <Panel :d="d" />
             </slot>
           </keep-alive>
         </el-card>
@@ -68,11 +40,11 @@
 </template>
 
 <script>
-import TableAction from '@/components/Table/ListTable/TableAction'
-import { Pagination } from '@/components'
-import Icon from '@/components/Widgets/Icon/index.vue'
 import { mapGetters } from 'vuex'
+import { Pagination } from '@/components'
+import TableAction from '@/components/Table/ListTable/TableAction'
 import IBox from '@/components/Common/IBox/index.vue'
+import Panel from './Panel'
 
 const defaultFirstPage = 1
 
@@ -80,9 +52,9 @@ export default {
   name: 'CardTable',
   components: {
     IBox,
+    Panel,
     TableAction,
-    Pagination,
-    Icon
+    Pagination
   },
   props: {
     // 定义 table 的配置
@@ -120,6 +92,7 @@ export default {
       paginationSize: 6,
       paginationLayout: 'total, sizes, prev, pager, next',
       paginationSizes: [6, 18, 27],
+      loading: true,
       axiosConfig: {
         raw: 1,
         params: {
@@ -135,16 +108,17 @@ export default {
       return this.tableConfig.url || ''
     }
   },
-  mounted() {
-    this.getList()
+  async mounted() {
+    try {
+      await this.getList()
+    } finally {
+      this.loading = false
+    }
   },
   methods: {
     isDisabled(item) {
       return item.edition?.value === 'enterprise' && !this.hasValidLicense
     },
-    capitalize(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    },
     getIcon(status) {
       let iconClass = 'fa-check-circle'
       if (status === false) {
@@ -155,7 +129,7 @@ export default {
     getPageQuery(currentPage, pageSize) {
       return this.$refs.pagination.getPageQuery(currentPage, pageSize)
     },
-    getList() {
+    async getList() {
       if (this.tableConfig.totalData) {
         this.totalData = this.tableConfig.totalData
         this.total = this.totalData.length
@@ -169,16 +143,10 @@ export default {
       const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
       const url = `${this.tableUrl}?${queryString}`
 
-      this.$axios
-        .get(url, this.axiosConfig)
-        .then(({ data: resp }) => {
-          this.total = resp?.count || 0
-          this.totalData = resp?.results || []
-        })
-        .catch(err => {
-          this.$log.error('Error occur: ', err)
-          this.total = 0
-        })
+      const resp = await this.$axios.get(url, this.axiosConfig)
+      const data = resp.data
+      this.total = data?.count || 0
+      this.totalData = data?.results || []
     },
     reloadTable() {
       this.getList()
@@ -240,6 +208,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.the-row .empty-box {
+  display: block;
+
+  ::v-deep {
+    .el-empty {
+      margin: 0 auto;
+
+      .el-empty__image {
+      }
+    }
+  }
+}
+
 .the-row {
   margin-top: 15px;
   max-width: 1600px;
@@ -258,74 +239,6 @@ export default {
 
       ::v-deep .el-card__body {
         height: 100%;
-
-        .el-row {
-          display: flex;
-          flex-wrap: nowrap;
-          margin-top: 0;
-          height: 100%;
-
-          .image {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              width: 60px;
-              height: 60px;
-              object-fit: contain;
-            }
-
-            svg {
-              width: 40px;
-              height: 40px;
-            }
-          }
-
-          .text-zone {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            .one-line {
-              display: flex;
-              flex-wrap: wrap;
-              align-items: center;
-              padding-top: 10px;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              cursor: pointer;
-
-              b {
-                padding-right: 5px;
-              }
-
-              span {
-                margin-left: 0 !important;
-              }
-            }
-
-            .comment {
-              display: -webkit-box;
-              height: 120px;
-              font-size: 12px;
-              padding: 10px 0;
-              cursor: pointer;
-              overflow: hidden;
-              -webkit-line-clamp: 4;
-              -webkit-box-flex: 1;
-              -webkit-box-orient: vertical;
-              text-align: left;
-            }
-
-            .tag-zone {
-              display: flex;
-              height: 30%;
-              align-items: center;
-              cursor: pointer;
-            }
-          }
-        }
       }
 
       &.is-disabled {
@@ -353,30 +266,6 @@ export default {
   }
 }
 
-.enterprise {
-  position: absolute;
-  right: -1px;
-  top: -1px;
-  background-color: var(--color-primary);
-  color: #fff;
-  padding: 3px 8px 4px 9px;
-  font-size: 13px;
-  border-radius: 3px 3px 3px 8px;
-}
-
-.tag-zone {
-  margin-top: 10px;
-
-  .el-tag {
-    margin-right: 3px;
-  }
-}
-
-.text-zone {
-  text-align: left;
-  height: 100%;
-}
-
 .pagination {
   padding-top: 10px;
   border-top: 1px solid #e7eaec;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b63d4f39..c6f638cd0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -696,5 +696,5 @@ li.rmenu i.fa {
 }
 
 div.el-loading-parent--relative {
-  min-height: 200px;
+  min-height: 150px;
 }
diff --git a/src/utils/common.js b/src/utils/common.js
index 3aa212de2..8d30652f3 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -143,6 +143,9 @@ function customizer(objValue, srcValue) {
 
 export function newURL(url) {
   let obj
+  if (!url) {
+    return ''
+  }
   if (url.indexOf('//') > -1) {
     obj = new URL(url)
   } else {
diff --git a/src/views/assets/Cloud/Account/AccountList.vue b/src/views/assets/Cloud/Account/AccountList.vue
index 4b90a14a3..3c47d6daa 100644
--- a/src/views/assets/Cloud/Account/AccountList.vue
+++ b/src/views/assets/Cloud/Account/AccountList.vue
@@ -1,23 +1,8 @@
 <template>
   <div>
-    <SmallCard ref="table" class="account-table" v-bind="$data" />
+    <SmallCard ref="table" class="account-table" v-bind="table" />
     <CreateDialog v-if="visible" :visible.sync="visible" v-bind="providerConfig" />
-    <Drawer
-      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"
-      />
-    </Drawer>
+    <UpdateDialog v-if="updateVisible" :object="object" :update-visible="updateVisible" />
     <Dialog
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -62,94 +47,128 @@ import {
   zstack
 } from '../const'
 import CreateDialog from './components/CreateDialog.vue'
+import UpdateDialog from './components/UpdateDialog.vue'
 import SmallCard from '@/components/Table/CardTable/DataCardTable/index.vue'
 import { ACCOUNT_PROVIDER_ATTRS_MAP } from '@/views/assets/Cloud/const'
 import Dialog from '@/components/Dialog/index.vue'
-import Drawer from '@/components/Drawer/index.vue'
 import AssetPanel from './components/AssetPanel.vue'
-import AuthPanel from './components/AuthPanel.vue'
 import { toSafeLocalDateStr } from '@/utils/time'
 
 export default {
   name: 'CloudAccountList',
   components: {
-    Drawer,
-    AuthPanel,
     AssetPanel,
     Dialog,
     SmallCard,
-    CreateDialog
+    CreateDialog,
+    UpdateDialog
   },
   data() {
     const vm = this
     return {
       object: null,
-      tableConfig: {
-        url: '/api/v1/xpack/cloud/accounts/',
-        permissions: {
-          app: 'xpack',
-          resource: 'account'
-        }
-      },
-      headerActions: {
-        hasImport: false,
-        hasExport: false,
-        hasColumnSetting: false,
-        hasMoreActions: false,
-        searchConfig: {
-          getUrlQuery: false
+      table: {
+        tableConfig: {
+          url: '/api/v1/xpack/cloud/accounts/',
+          permissions: {
+            app: 'xpack',
+            resource: 'account'
+          }
         },
-        moreCreates: {
-          loading: false,
-          callback: (option) => {
-            vm.$router.push({ name: 'AccountCreate', query: { provider: option.name }})
+        subComponentProps: {
+          handleUpdate: (obj) => {
+            this.object = obj
+            this.updateVisible = true
           },
-          dropdown: [
-            {
-              name: 'publicCloud',
-              title: this.$t('PublicCloud'),
-              icon: 'public-cloud',
-              callback: () => {
-                const providers = [
-                  aliyun, qcloud, qcloud_lighthouse, huaweicloud,
-                  baiducloud, jdcloud, kingsoftcloud, aws_china,
-                  aws_international, azure, azure_international,
-                  gcp, ucloud, volcengine
-                ]
-                this.providerConfig.providers = providers.map(
-                  (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
-                )
-                this.visible = 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: [
             {
-              name: 'privateCloud',
-              icon: 'private-cloud',
-              title: this.$t('PrivateCloud'),
-              callback: () => {
-                const providers = [
-                  vmware, qingcloud_private, huaweicloud_private, state_private,
-                  openstack, zstack, nutanix, fc, scp, apsara_stack
-                ]
-                this.providerConfig.providers = providers.map(
-                  (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
-                )
-                this.visible = true
-              }
-            },
-            {
-              name: 'LAN',
-              title: this.$t('LAN'),
-              icon: 'computer',
-              callback: () => {
-                const providers = [lan]
-                this.providerConfig.providers = providers.map(
-                  (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
-                )
-                this.visible = true
-              }
+              id: 'online-sync',
+              name: this.$tc('SyncOnline'),
+              icon: 'el-icon-thumb',
+              callback: this.handleOnlineExecute,
+              disabled: !this.$hasPerm('xpack.change_syncinstancetask')
             }
           ]
+        },
+        headerActions: {
+          hasImport: false,
+          hasExport: false,
+          hasColumnSetting: false,
+          hasMoreActions: false,
+          searchConfig: {
+            getUrlQuery: false
+          },
+          moreCreates: {
+            loading: false,
+            callback: (option) => {
+              vm.$router.push({ name: 'AccountCreate', query: { provider: option.name }})
+            },
+            dropdown: [
+              {
+                name: 'publicCloud',
+                title: this.$t('PublicCloud'),
+                icon: 'public-cloud',
+                callback: () => {
+                  const providers = [
+                    aliyun, qcloud, qcloud_lighthouse, huaweicloud,
+                    baiducloud, jdcloud, kingsoftcloud, aws_china,
+                    aws_international, azure, azure_international,
+                    gcp, ucloud, volcengine
+                  ]
+                  this.providerConfig.providers = providers.map(
+                    (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
+                  )
+                  this.visible = true
+                }
+              },
+              {
+                name: 'privateCloud',
+                icon: 'private-cloud',
+                title: this.$t('PrivateCloud'),
+                callback: () => {
+                  const providers = [
+                    vmware, qingcloud_private, huaweicloud_private, state_private,
+                    openstack, zstack, nutanix, fc, scp, apsara_stack
+                  ]
+                  this.providerConfig.providers = providers.map(
+                    (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
+                  )
+                  this.visible = true
+                }
+              },
+              {
+                name: 'LAN',
+                title: this.$t('LAN'),
+                icon: 'computer',
+                callback: () => {
+                  const providers = [lan]
+                  this.providerConfig.providers = providers.map(
+                    (item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
+                  )
+                  this.visible = true
+                }
+              }
+            ]
+          }
         }
       },
       providerConfig: {
@@ -157,41 +176,7 @@ export default {
       },
       visible: false,
       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')
-          }
-        ]
-      }
+      onlineSyncVisible: false
     }
   },
   watch: {
diff --git a/src/views/assets/Cloud/Account/components/AssetPanel.vue b/src/views/assets/Cloud/Account/components/AssetPanel.vue
index 1c24b0a5b..a9432b7f8 100644
--- a/src/views/assets/Cloud/Account/components/AssetPanel.vue
+++ b/src/views/assets/Cloud/Account/components/AssetPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="asset-panel">
     <el-alert
       :center="false"
       :closable="true"
@@ -9,8 +9,8 @@
     </el-alert>
     <ImportTable
       ref="importTable"
-      v-bind="settings"
       origin="cloudSync"
+      v-bind="settings"
       @cancel="closeDialog"
       @finish="showResult"
     />
@@ -162,3 +162,9 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.asset-panel {
+  display: block;
+
+}
+</style>
diff --git a/src/views/assets/Cloud/Account/components/CreateDialog.vue b/src/views/assets/Cloud/Account/components/CreateDialog.vue
index b189720b7..19f772190 100644
--- a/src/views/assets/Cloud/Account/components/CreateDialog.vue
+++ b/src/views/assets/Cloud/Account/components/CreateDialog.vue
@@ -22,15 +22,17 @@
         </el-steps>
       </el-col>
       <el-col :span="18">
-        <component
-          :is="activeMenu"
-          :active.sync="active"
-          :object.sync="account"
-          :provider="iSelected"
-          :providers="providers"
-          :selected.sync="iSelected"
-          :visible.sync="iVisible"
-        />
+        <div class="right-content">
+          <component
+            :is="activeMenu"
+            :active.sync="active"
+            :object.sync="account"
+            :provider="iSelected"
+            :providers="providers"
+            :selected.sync="iSelected"
+            :visible.sync="iVisible"
+          />
+        </div>
       </el-col>
     </el-row>
   </Drawer>
@@ -43,10 +45,12 @@ import AuthPanel from '@/views/assets/Cloud/Account/components/AuthPanel'
 import AssetPanel from '@/views/assets/Cloud/Account/components/AssetPanel'
 import ResultPanel from '@/views/assets/Cloud/Account/components/ResultPanel'
 import { ACCOUNT_PROVIDER_ATTRS_MAP } from '@/views/assets/Cloud/const'
+import IBox from '@/components/Common/IBox/index.vue'
 
 export default {
   name: 'CreateDialog',
   components: {
+    IBox,
     Drawer,
     AuthPanel,
     AssetPanel,
@@ -118,6 +122,11 @@ export default {
   }
 }
 
+.right-content {
+  background-color: #fff;
+  padding: 20px 10px;
+}
+
 ::v-deep .el-step {
   .el-step__head {
     &.is-process {
diff --git a/src/views/assets/Cloud/Account/components/ProviderPanel.vue b/src/views/assets/Cloud/Account/components/ProviderPanel.vue
index 0faca298d..ac5a9b47e 100644
--- a/src/views/assets/Cloud/Account/components/ProviderPanel.vue
+++ b/src/views/assets/Cloud/Account/components/ProviderPanel.vue
@@ -83,7 +83,7 @@ export default {
 }
 
 .cloud-select-wrap {
-  height: 300px;
+  background: #f3f3f3;
 
   .el-row {
     flex-direction: column;
diff --git a/src/views/assets/Cloud/Account/components/ResultPanel.vue b/src/views/assets/Cloud/Account/components/ResultPanel.vue
index 43b11e239..98bb9a324 100644
--- a/src/views/assets/Cloud/Account/components/ResultPanel.vue
+++ b/src/views/assets/Cloud/Account/components/ResultPanel.vue
@@ -1,23 +1,18 @@
 <template>
-  <div>
+  <div class="result-panel">
     <el-table
       :data="tableData"
       :show-header="false"
       size="medium"
     >
-      <el-table-column
-        prop="key"
-        width="120"
-      />
-      <el-table-column
-        prop="value"
-      >
+      <el-table-column prop="key" width="120" />
+      <el-table-column prop="value">
         <template v-slot="scope">
-          <el-link :underline="false" type="primary"> {{ scope.row.value }}</el-link>
+          <el-link :underline="false"> {{ scope.row.value }}</el-link>
         </template>
       </el-table-column>
     </el-table>
-    <div style="float: right; margin: 10px">
+    <div style="margin-top: 20px">
       <el-button size="small" type="primary" @click="handleClick">{{ $t('CloudAccountDetail') }}</el-button>
       <el-button size="small" @click="handleClose">{{ $t('Close') }}</el-button>
     </div>
@@ -25,7 +20,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ResultPanel',
   components: {},
@@ -67,6 +61,10 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.result-panel {
+  padding: 10px;
+}
+
 ::v-deep .el-alert__content {
   width: 100%;
 }
diff --git a/src/views/assets/Cloud/Account/components/UpdateDialog.vue b/src/views/assets/Cloud/Account/components/UpdateDialog.vue
new file mode 100644
index 000000000..4d1f1b44b
--- /dev/null
+++ b/src/views/assets/Cloud/Account/components/UpdateDialog.vue
@@ -0,0 +1,44 @@
+<template>
+  <Drawer
+    v-if="updateVisible"
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('CloudAccountUpdate')"
+    :visible.sync="updateVisible"
+    v-on="$listeners"
+  >
+    <div style="background: white">
+      <AuthPanel
+        :object="object"
+        :provider="object.provider.value"
+        :visible.sync="updateVisible"
+        origin="update"
+        @submitSuccess="onSubmitSuccess"
+      />
+    </div>
+  </Drawer>
+</template>
+
+<script>
+import AuthPanel from '@/views/assets/Cloud/Account/components/AuthPanel.vue'
+import Drawer from '@/components/Drawer/index.vue'
+
+export default {
+  name: 'UpdateDialog',
+  components: { Drawer, AuthPanel },
+  props: {
+    object: {
+      type: Object,
+      required: true
+    },
+    updateVisible: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
