diff --git a/mock/demo/system.ts b/mock/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc72d2b61702f0a13b9b8943da15407219ed7845
--- /dev/null
+++ b/mock/demo/system.ts
@@ -0,0 +1,30 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultPageSuccess } from '../_util';
+
+const list = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 20; index++) {
+    result.push({
+      id: `${index}`,
+      account: '@first',
+      email: '@email',
+      nickname: '@cname()',
+      role: '@first',
+      updateTime: '@datetime',
+      remark: '@cword(0,20)',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/api/system/getAccountList',
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, list);
+    },
+  },
+] as MockMethod[];
diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
index 17e802283af01ced41aa7a531e211129e599b491..fb04f29c67a4f117812ed20d6839412279ffde3c 100644
--- a/mock/demo/table-demo.ts
+++ b/mock/demo/table-demo.ts
@@ -28,7 +28,7 @@ const demoList = (() => {
 export default [
   {
     url: '/api/table/getDemoList',
-    timeout: 1000,
+    timeout: 100,
     method: 'get',
     response: ({ query }) => {
       const { page = 1, pageSize = 20 } = query;
diff --git a/src/api/demo/model/systemModel.ts b/src/api/demo/model/systemModel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb0fc8037430162aa501af6039a99daf57751d21
--- /dev/null
+++ b/src/api/demo/model/systemModel.ts
@@ -0,0 +1,21 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+
+export type Params = BasicPageParams & {
+  account?: string;
+  nickname?: string;
+};
+
+export interface DemoListItem {
+  id: string;
+  account: string;
+  email: string;
+  nickname: string;
+  role: number;
+  updateTime: string;
+  remark: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type DemoListGetResultModel = BasicFetchResult<DemoListItem>;
diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fe1ccf985e41b5e4108d315b6ff89addfc1962b
--- /dev/null
+++ b/src/api/demo/system.ts
@@ -0,0 +1,10 @@
+import { Params, DemoListGetResultModel } from './model/systemModel';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  // The address does not exist
+  AccountList = '/system/getAccountList',
+}
+
+export const getAccountList = (params: Params) =>
+  defHttp.get<DemoListGetResultModel>({ url: Api.AccountList, params });
diff --git a/src/components/Table/src/style/index.less b/src/components/Table/src/style/index.less
index 55b93a2d055cb404ef5a394f4251239c4f767831..0f348c9e98c172e809688d06093d272a50a2739d 100644
--- a/src/components/Table/src/style/index.less
+++ b/src/components/Table/src/style/index.less
@@ -4,6 +4,7 @@
 
 .@{prefix-cls} {
   &-form-container {
+    width: 100%;
     padding: 16px;
 
     .ant-form {
@@ -50,8 +51,8 @@
 
   //
   .ant-table {
-    // width: 100%;
-    // overflow-x: hidden;
+    width: 100%;
+    overflow-x: hidden;
     // border: none;
 
     &-title {
@@ -159,15 +160,15 @@
   //     overflow-y: hidden !important;
   //   }
 
-  //   .ant-table-fixed {
-  //     border-bottom: none;
-  //   }
+  // .ant-table-fixed {
+  //   border-bottom: none;
+  // }
   // }
 
   // .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
   // .ant-table-tbody > tr > td {
   //   word-break: break-word;
-  //   border-color: @border-color !important;
+  //   // border-color: @border-color !important;
   // }
 
   .ant-table-footer {
diff --git a/src/locales/lang/en/routes/demo/system.ts b/src/locales/lang/en/routes/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e6a24263e4e1e3f4c405e344ad587b33841e571e
--- /dev/null
+++ b/src/locales/lang/en/routes/demo/system.ts
@@ -0,0 +1,5 @@
+export default {
+  moduleName: 'System management',
+
+  account: 'Account management',
+};
diff --git a/src/locales/lang/zh_CN/routes/demo/system.ts b/src/locales/lang/zh_CN/routes/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f16ba493fa48bc152d8e8c2dbd010e47b9af5fc
--- /dev/null
+++ b/src/locales/lang/zh_CN/routes/demo/system.ts
@@ -0,0 +1,5 @@
+export default {
+  moduleName: '系统管理',
+
+  account: '账号管理',
+};
diff --git a/src/router/menus/modules/demo/system.ts b/src/router/menus/modules/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..200d54602777c7242067140afcfbe6f7cad689f9
--- /dev/null
+++ b/src/router/menus/modules/demo/system.ts
@@ -0,0 +1,17 @@
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const menu: MenuModule = {
+  orderNo: 2000,
+  menu: {
+    name: t('routes.demo.system.moduleName'),
+    path: '/system',
+    children: [
+      {
+        path: 'account',
+        name: t('routes.demo.system.account'),
+      },
+    ],
+  },
+};
+export default menu;
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
index 31b21f23a568e813e09014397e34f226aae875f8..cd93d8bd0f08819a3699d430795067b997a752c1 100644
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@@ -9,7 +9,7 @@ const dashboard: AppRouteModule = {
   component: LAYOUT,
   redirect: '/dashboard/workbench',
   meta: {
-    icon: 'bx:bx-home',
+    icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
   },
   children: [
diff --git a/src/router/routes/modules/demo/charts.ts b/src/router/routes/modules/demo/charts.ts
index 7be294d4d2b7a282553ee1d9b2761807633a5d68..5831ce9a6a96e606ad37f92b3b44aff19f39fe9d 100644
--- a/src/router/routes/modules/demo/charts.ts
+++ b/src/router/routes/modules/demo/charts.ts
@@ -9,7 +9,7 @@ const charts: AppRouteModule = {
   component: LAYOUT,
   redirect: '/charts/apexChart',
   meta: {
-    icon: 'vaadin:spline-area-chart',
+    icon: 'ion:bar-chart-outline',
     title: t('routes.demo.charts.charts'),
   },
   children: [
diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts
index 41b3f901b20777cfa1135d99edde30d11b8f22e9..bbc2f579bd70c564a2b6c08741f0f0e25afe4e5a 100644
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -9,7 +9,7 @@ const comp: AppRouteModule = {
   component: LAYOUT,
   redirect: '/comp/basic',
   meta: {
-    icon: 'ic:outline-settings-input-component',
+    icon: 'ion:layers-outline',
     title: t('routes.demo.comp.comp'),
   },
 
diff --git a/src/router/routes/modules/demo/feat.ts b/src/router/routes/modules/demo/feat.ts
index 757183ccd45d03a0799b276d322ba6f1c4342575..901782f0f7081307cbfbb4008f19e5521459d50a 100644
--- a/src/router/routes/modules/demo/feat.ts
+++ b/src/router/routes/modules/demo/feat.ts
@@ -9,7 +9,7 @@ const feat: AppRouteModule = {
   component: LAYOUT,
   redirect: '/feat/icon',
   meta: {
-    icon: 'ic:outline-featured-play-list',
+    icon: 'ion:git-compare-outline',
     title: t('routes.demo.feat.feat'),
   },
   children: [
diff --git a/src/router/routes/modules/demo/iframe.ts b/src/router/routes/modules/demo/iframe.ts
index ad50d387985b32636b6fe9b976eed5e825826ee3..0e8c479e9abe95649650d19f06a9394a36793441 100644
--- a/src/router/routes/modules/demo/iframe.ts
+++ b/src/router/routes/modules/demo/iframe.ts
@@ -10,7 +10,7 @@ const iframe: AppRouteModule = {
   component: LAYOUT,
   redirect: '/frame/doc',
   meta: {
-    icon: 'mdi:page-next-outline',
+    icon: 'ion:tv-outline',
     title: t('routes.demo.iframe.frame'),
   },
 
diff --git a/src/router/routes/modules/demo/level.ts b/src/router/routes/modules/demo/level.ts
index f019d795ad7f0f4f68cfc3e80169a6ee2a1403bb..f95e5c0a5ca6263e54a63d3d274b52ff8edad250 100644
--- a/src/router/routes/modules/demo/level.ts
+++ b/src/router/routes/modules/demo/level.ts
@@ -9,7 +9,7 @@ const permission: AppRouteModule = {
   component: LAYOUT,
   redirect: '/level/menu1/menu1-1/menu1-1-1',
   meta: {
-    icon: 'carbon:user-role',
+    icon: 'ion:menu-outline',
     title: t('routes.demo.level.level'),
   },
 
diff --git a/src/router/routes/modules/demo/page.ts b/src/router/routes/modules/demo/page.ts
index 66dc39d0971fbeb8dfed3a35d57ff1b727c63175..bede4e49d8fa6a2ebf3e48aa691c485f1d40dfca 100644
--- a/src/router/routes/modules/demo/page.ts
+++ b/src/router/routes/modules/demo/page.ts
@@ -12,7 +12,7 @@ const page: AppRouteModule = {
   component: LAYOUT,
   redirect: '/page-demo/exception',
   meta: {
-    icon: 'mdi:page-next-outline',
+    icon: 'ion:aperture-outline',
     title: t('routes.demo.page.page'),
   },
   children: [
diff --git a/src/router/routes/modules/demo/permission.ts b/src/router/routes/modules/demo/permission.ts
index b8793b192310b2ac21bf133694a7fbb0b7e2363e..d46f5208ce3fe6a33a227f1e37f6c7bb00950f74 100644
--- a/src/router/routes/modules/demo/permission.ts
+++ b/src/router/routes/modules/demo/permission.ts
@@ -10,7 +10,7 @@ const permission: AppRouteModule = {
   component: LAYOUT,
   redirect: '/permission/front/page',
   meta: {
-    icon: 'carbon:user-role',
+    icon: 'ion:key-outline',
     title: t('routes.demo.permission.permission'),
   },
 
diff --git a/src/router/routes/modules/demo/system.ts b/src/router/routes/modules/demo/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b55077977f48d46ef02af2f38d32fdb701e4c972
--- /dev/null
+++ b/src/router/routes/modules/demo/system.ts
@@ -0,0 +1,27 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const system: AppRouteModule = {
+  path: '/system',
+  name: 'System',
+  component: LAYOUT,
+  redirect: '/system/account',
+  meta: {
+    icon: 'ion:settings-outline',
+    title: t('routes.demo.system.moduleName'),
+  },
+  children: [
+    {
+      path: 'account',
+      name: 'Account',
+      meta: {
+        title: t('routes.demo.system.account'),
+      },
+      component: () => import('/@/views/demo/system/account/index.vue'),
+    },
+  ],
+};
+
+export default system;
diff --git a/src/router/routes/modules/home.ts b/src/router/routes/modules/home.ts
index b8a85fe4a79ee4c48a11e7b70ace36d44d07d61a..0fa8614192168420b6bb9f6b8ee74a92f0ce0882 100644
--- a/src/router/routes/modules/home.ts
+++ b/src/router/routes/modules/home.ts
@@ -9,7 +9,7 @@ const dashboard: AppRouteModule = {
   component: LAYOUT,
   redirect: '/home/welcome',
   meta: {
-    icon: 'bx:bx-home',
+    icon: 'ion:home-outline',
     title: t('routes.dashboard.welcome'),
   },
   children: [
diff --git a/src/views/biz/.gitkeep b/src/views/biz/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/views/demo/.gitkeep b/src/views/demo/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/views/demo/system/account/AccountModal.vue b/src/views/demo/system/account/AccountModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a57e4d09292ae1ab9bc0c108deb5563ffa4ed6aa
--- /dev/null
+++ b/src/views/demo/system/account/AccountModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { accountFormSchema } from './account.data';
+  export default defineComponent({
+    name: 'AccountModal',
+    components: { BasicModal, BasicForm },
+    setup() {
+      const isUpdate = ref(true);
+
+      const [registerForm, { setFieldsValue, validate }] = useForm({
+        labelWidth: 100,
+        schemas: accountFormSchema,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 23,
+        },
+      });
+
+      const [registerModal, { setModalProps }] = useModalInner((data) => {
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          setModalProps({ confirmLoading: true });
+          // TODO custom api
+          console.log(values);
+        } finally {
+          setModalProps({ confirmLoading: true });
+        }
+      }
+
+      return { registerModal, registerForm, getTitle, handleSubmit };
+    },
+  });
+</script>
diff --git a/src/views/demo/system/account/account.data.ts b/src/views/demo/system/account/account.data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5632fd43d8d38bd62a56b3f09c14e7216ec01f4f
--- /dev/null
+++ b/src/views/demo/system/account/account.data.ts
@@ -0,0 +1,88 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    width: 80,
+  },
+  {
+    title: '用户名',
+    dataIndex: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'nickname',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 200,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 180,
+  },
+  {
+    title: '角色',
+    dataIndex: 'role',
+    width: 200,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const accountFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '邮箱',
+    field: 'email',
+    component: 'Input',
+    required: true,
+  },
+  // TODO
+  {
+    label: '角色',
+    field: 'role',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+];
diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da6a0b6f5c6a253658808dac39d8aafc54e85f46
--- /dev/null
+++ b/src/views/demo/system/account/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div :class="[prefixCls]">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreateAccount"> 新增账号 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <AccountModal @register="registerModal" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { getAccountList } from '/@/api/demo/system';
+
+  import { useModal } from '/@/components/Modal';
+  import AccountModal from './AccountModal.vue';
+
+  import { columns, searchFormSchema } from './account.data';
+
+  export default defineComponent({
+    name: 'AccountManagement',
+    components: { BasicTable, AccountModal, TableAction },
+    setup() {
+      const { prefixCls } = useDesign('account-management');
+
+      const [registerModal, { openModal }] = useModal();
+      const [registerTable] = useTable({
+        title: '账号列表',
+        api: getAccountList,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      function handleCreateAccount() {
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openModal(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log(record);
+      }
+
+      return {
+        prefixCls,
+        registerTable,
+        registerModal,
+        handleCreateAccount,
+        handleEdit,
+        handleDelete,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-account-management';
+
+  .@{prefix-cls} {
+    display: flex;
+  }
+</style>