diff --git a/src/layout/components/NavHeader/AccountDropdown.vue b/src/layout/components/NavHeader/AccountDropdown.vue
index 10a21b991..27f1e913e 100644
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -12,19 +12,14 @@
         <el-dropdown-item divided command="logout"><svg-icon icon-class="logout" style="margin-right: 4px" />{{ $t('common.nav.Logout') }}</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-    <ApiKey ref="api" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import ApiKey from './ApiKey'
 
 export default {
   name: 'AccountDropdown',
-  components: {
-    ApiKey
-  },
   data() {
     return {
       avatarUrl: require('@/assets/img/admin.png'),
@@ -53,7 +48,7 @@ export default {
           window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
           break
         case 'apiKey':
-          this.$refs.api.showApi()
+          this.$router.push('/profile/key')
           break
       }
     },
diff --git a/src/router/profile/index.js b/src/router/profile/index.js
index 653a7af8c..123b7f1ef 100644
--- a/src/router/profile/index.js
+++ b/src/router/profile/index.js
@@ -29,7 +29,7 @@ export default {
       name: 'ProfileSetting',
       component: () => import('@/views/profile/ProfileUpdate/index'),
       meta: {
-        title: i18n.t('users.PersonalSetting'),
+        title: i18n.t('users.Profile'),
         icon: 'user-circle',
         permissions: []
       }
@@ -40,6 +40,16 @@ export default {
       name: 'ProfileImprovement',
       hidden: true,
       meta: { title: i18n.t('route.PersonalInformationImprovement'), permissions: [] }
+    },
+    {
+      path: '/profile/key',
+      component: () => import('@/views/profile/ApiKey'),
+      name: 'ApiKey',
+      meta: {
+        title: i18n.t('common.nav.APIKey'),
+        icon: 'key',
+        permissions: []
+      }
     }
   ]
 }
diff --git a/src/layout/components/NavHeader/ApiKey.vue b/src/views/profile/ApiKey.vue
similarity index 78%
rename from src/layout/components/NavHeader/ApiKey.vue
rename to src/views/profile/ApiKey.vue
index 5a6b2c37c..f73c03c1e 100644
--- a/src/layout/components/NavHeader/ApiKey.vue
+++ b/src/views/profile/ApiKey.vue
@@ -1,30 +1,22 @@
 <template>
-  <div>
-    <Dialog :destroy-on-close="true" width="60%" :visible.sync="showDialog" :title="this.$t('setting.ApiKeyList')" :show-cancel="false" :show-confirm="false">
-      <div>
-        <el-alert type="success"> {{ helpMessage }} </el-alert>
-        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-      </div>
-    </Dialog>
-  </div>
+  <GenericListPage
+    ref="ListTable"
+    :table-config="tableConfig"
+    :header-actions="headerActions"
+    :help-message="helpMessage"
+  />
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import ListTable from '@/components/ListTable'
+import { GenericListPage } from '@/layout/components'
 import { DateFormatter, ShowKeyFormatter } from '@/components/TableFormatters'
-export default {
-  name: 'ApiKey',
-  components: {
-    Dialog,
-    ListTable
-  },
-  props: {
 
+export default {
+  components: {
+    GenericListPage
   },
   data() {
     return {
-      showDialog: false,
       helpMessage: this.$t('setting.helpText.ApiKeyList'),
       tableConfig: {
         hasSelection: true,
@@ -34,16 +26,13 @@ export default {
         ],
         columnsMeta: {
           id: {
-            label: 'AccessKeyID',
-            width: '315px'
+            label: 'AccessKeyID'
           },
           secret: {
             label: 'AccessKeySecret',
-            width: '315px',
             formatter: ShowKeyFormatter
           },
           is_active: {
-            width: '80px'
           },
           date_created: {
             label: this.$t('common.dateCreated'),
@@ -114,17 +103,9 @@ export default {
         ]
       }
     }
-  },
-  methods: {
-    showApi() {
-      this.showDialog = !this.showDialog
-    }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-.api-key-dialog >>> .el-dialog__body {
-  padding-top: 0;
-}
+<style scoped>
 </style>