diff --git a/src/components/modal-footer/index.tsx b/src/components/modal-footer/index.tsx
index ad6e4622..050c2813 100644
--- a/src/components/modal-footer/index.tsx
+++ b/src/components/modal-footer/index.tsx
@@ -3,15 +3,22 @@ import { Button, Space } from 'antd';
 type ModalFooterProps = {
   onOk: () => void;
   onCancel: () => void;
+  cancelText?: string;
+  okText?: string;
 };
-const ModalFooter: React.FC<ModalFooterProps> = ({ onOk, onCancel }) => {
+const ModalFooter: React.FC<ModalFooterProps> = ({
+  onOk,
+  onCancel,
+  cancelText,
+  okText
+}) => {
   return (
     <Space size={20}>
       <Button onClick={onCancel} style={{ width: '88px' }}>
-        取消
+        {cancelText || '取消'}
       </Button>
       <Button type="primary" onClick={onOk} style={{ width: '88px' }}>
-        确定
+        {okText || '保存'}
       </Button>
     </Space>
   );
diff --git a/src/global.less b/src/global.less
index cba86e7d..6fb64b57 100644
--- a/src/global.less
+++ b/src/global.less
@@ -35,6 +35,7 @@ html {
     --ant-padding-sm: 14px;
     --ant-border-radius-lg: 20px;
     --ant-color-error: #ff4d4f;
+    --ant-color-bg-mask: rgba(0, 0, 0, 0.35);
 
     &.ant-popover {
       --ant-popover-inner-padding: 26px;
@@ -60,6 +61,7 @@ html {
     --ant-button-content-font-size-lg: 13px;
     --ant-button-content-font-size: 12px;
     --ant-button-content-font-size-sm: 12px;
+    --ant-modal-content-padding: 24px 30px;
   }
 
   .css-var-rf.ant-menu-css-var {
@@ -102,6 +104,9 @@ body {
     border-spacing: 0 20px;
     .ant-table-thead th.ant-table-column-sort {
       background-color: transparent;
+      &::before {
+        background-color: var(--ant-table-header-split-color) !important;
+      }
     }
     .ant-checkbox {
       .ant-checkbox-inner::after {
@@ -168,6 +173,13 @@ body {
   .ant-form-item-with-help .ant-form-item-explain {
     padding-left: 24px;
   }
+
+  // icon
+  .anticon {
+    &.size-16 {
+      font-size: 16px;
+    }
+  }
 }
 
 // ======== basic layout style start============
diff --git a/src/pages/models/index.tsx b/src/pages/models/index.tsx
index e9c397c7..0abcbe26 100644
--- a/src/pages/models/index.tsx
+++ b/src/pages/models/index.tsx
@@ -3,7 +3,12 @@ import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
-import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  PlusOutlined,
+  SyncOutlined,
+  WechatWorkOutlined
+} from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import {
   Button,
@@ -205,10 +210,21 @@ const Models: React.FC = () => {
             render={(text, record) => {
               return (
                 <Space>
-                  <Button size="middle">Open in PlayGround</Button>
-                  <Button size="middle" danger>
-                    Delete
-                  </Button>
+                  <Tooltip title="Open in PlayGround">
+                    <Button
+                      size="small"
+                      type="primary"
+                      icon={<WechatWorkOutlined />}
+                    ></Button>
+                  </Tooltip>
+                  <Tooltip title="Delete">
+                    <Button
+                      size="small"
+                      type="primary"
+                      danger
+                      icon={<DeleteOutlined></DeleteOutlined>}
+                    ></Button>
+                  </Tooltip>
                 </Space>
               );
             }}
diff --git a/src/pages/nodes/index.tsx b/src/pages/nodes/index.tsx
index c8c5a545..e2d40c06 100644
--- a/src/pages/nodes/index.tsx
+++ b/src/pages/nodes/index.tsx
@@ -95,10 +95,6 @@ const Models: React.FC = () => {
     });
   };
 
-  const handleClickMenu = (e: any) => {
-    console.log('click', e);
-  };
-
   const RenderProgress = memo(
     (props: { record: NodeItem; dataIndex: string }) => {
       const { record, dataIndex } = props;
diff --git a/src/pages/users/components/add-modal.tsx b/src/pages/users/components/add-modal.tsx
new file mode 100644
index 00000000..3b312eba
--- /dev/null
+++ b/src/pages/users/components/add-modal.tsx
@@ -0,0 +1,63 @@
+import ModalFooter from '@/components/modal-footer';
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
+import { PageActionType } from '@/config/types';
+import { SyncOutlined } from '@ant-design/icons';
+import { Form, Modal } from 'antd';
+
+type AddModalProps = {
+  title: string;
+  action: PageActionType;
+  open: boolean;
+  onOk: () => void;
+  onCancel: () => void;
+};
+const AddModal: React.FC<AddModalProps> = ({
+  title,
+  action,
+  open,
+  onOk,
+  onCancel
+}) => {
+  const [form] = Form.useForm();
+  const suffix = (
+    <SyncOutlined
+      style={{
+        fontSize: 16,
+        color: '#1677ff'
+      }}
+    />
+  );
+  return (
+    <Modal
+      title={title}
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{}}
+      footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
+    >
+      <Form name="addUserForm" form={form} onFinish={onOk}>
+        <Form.Item name="name" rules={[{ required: true }]}>
+          <SealInput.Input label="Name"></SealInput.Input>
+        </Form.Item>
+        <Form.Item name="role" rules={[{ required: true }]}>
+          <SealSelect label="Role"></SealSelect>
+        </Form.Item>
+        <Form.Item name="email" rules={[{ required: true }]}>
+          <SealInput.Input label="Email"></SealInput.Input>
+        </Form.Item>
+        <Form.Item name="password" rules={[{ required: true }]}>
+          <SealInput.Input label="Password"></SealInput.Input>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddModal;
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 6c082c30..495e4339 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -1,16 +1,239 @@
+import PageTools from '@/components/page-tools';
+import { PageAction } from '@/config';
+import type { PageActionType } from '@/config/types';
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import useTableSort from '@/hooks/use-table-sort';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+  SyncOutlined,
+  UserOutlined,
+  UserSwitchOutlined
+} from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
+import { useState } from 'react';
+import AddModal from './components/add-modal';
+const { Column } = Table;
 
-const Dashboard: React.FC = () => {
+const dataSource = [
+  {
+    key: '1',
+    name: 'sam',
+    role: 'admin',
+    createTime: '2021-09-01 12:00:00'
+  },
+  {
+    key: '2',
+    name: 'wang',
+    role: 'user',
+    createTime: '2021-09-01 12:00:00'
+  }
+];
+
+const Models: React.FC = () => {
+  const rowSelection = useTableRowSelection();
+  const { sortOrder, setSortOrder } = useTableSort({
+    defaultSortOrder: 'descend'
+  });
+  const [total, setTotal] = useState(100);
+  const [openAddModal, setOpenAddModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
+  const [title, setTitle] = useState<string>('');
+  const [queryParams, setQueryParams] = useState({
+    current: 1,
+    pageSize: 10,
+    name: ''
+  });
+  const handleShowSizeChange = (current: number, size: number) => {
+    console.log(current, size);
+  };
+
+  const handlePageChange = (page: number, pageSize: number | undefined) => {
+    console.log(page, pageSize);
+  };
+
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    console.log('handleTableChange=======', pagination, filters, sorter);
+    setSortOrder(sorter.order);
+  };
+
+  const fetchData = async () => {
+    console.log('fetchData');
+  };
+  const handleSearch = (e: any) => {
+    fetchData();
+  };
+
+  const handleNameChange = (e: any) => {
+    setQueryParams({
+      ...queryParams,
+      name: e.target.value
+    });
+  };
+
+  const handleAddUser = () => {
+    setOpenAddModal(true);
+    setAction(PageAction.CREATE);
+    setTitle('Add User');
+  };
+
+  const handleClickMenu = (e: any) => {
+    console.log('click', e);
+  };
+
+  const handleModalOk = () => {
+    console.log('handleModalOk');
+    setOpenAddModal(false);
+  };
+
+  const handleModalCancel = () => {
+    console.log('handleModalCancel');
+    setOpenAddModal(false);
+  };
+
+  const handleDelete = () => {
+    Modal.confirm({
+      title: '',
+      content: 'Are you sure you want to delete the selected users?',
+      onOk() {
+        console.log('OK');
+        message.success('successfully!');
+      },
+      onCancel() {
+        console.log('Cancel');
+      }
+    });
+  };
+
+  const handleEditUser = () => {
+    setOpenAddModal(true);
+    setAction(PageAction.EDIT);
+    setTitle('Edit User');
+  };
   return (
-    <PageContainer
-      ghost
-      header={{
-        title: 'Dashboard',
-      }}
-    >
-      <div>Users</div>
-    </PageContainer>
+    <>
+      <PageContainer
+        ghost
+        header={{
+          title: 'Users'
+        }}
+        extra={[]}
+      >
+        <PageTools
+          marginBottom={22}
+          left={
+            <Space>
+              <Input
+                placeholder="按名称查询"
+                style={{ width: 300 }}
+                onChange={handleNameChange}
+              ></Input>
+              <Button
+                type="text"
+                style={{ color: 'var(--ant-color-primary)' }}
+                onClick={handleSearch}
+                icon={<SyncOutlined></SyncOutlined>}
+              ></Button>
+            </Space>
+          }
+          right={
+            <Space size={20}>
+              <Button
+                icon={<PlusOutlined></PlusOutlined>}
+                type="primary"
+                onClick={handleAddUser}
+              >
+                Add User
+              </Button>
+              <Button
+                icon={<DeleteOutlined />}
+                danger
+                onClick={handleDelete}
+                disabled={!rowSelection.selectedRowKeys.length}
+              >
+                Delete
+              </Button>
+            </Space>
+          }
+        ></PageTools>
+        <Table
+          dataSource={dataSource}
+          rowSelection={rowSelection}
+          loading={loading}
+          onChange={handleTableChange}
+          pagination={{
+            showSizeChanger: true,
+            pageSize: 10,
+            current: 2,
+            total: total,
+            hideOnSinglePage: true,
+            onShowSizeChange: handleShowSizeChange,
+            onChange: handlePageChange
+          }}
+        >
+          <Column title="Name" dataIndex="name" key="name" width={400} />
+          <Column
+            title="Create Time"
+            dataIndex="createTime"
+            key="createTime"
+            defaultSortOrder="descend"
+            sortOrder={sortOrder}
+            showSorterTooltip={false}
+            sorter={true}
+          />
+          <Column
+            title="Role"
+            dataIndex="role"
+            key="role"
+            width={400}
+            render={(text, record) => {
+              return text === 'admin' ? (
+                <UserSwitchOutlined className="size-16" />
+              ) : (
+                <UserOutlined className="size-16" />
+              );
+            }}
+          />
+          <Column
+            title="Operation"
+            key="operation"
+            render={(text, record) => {
+              return (
+                <Space>
+                  <Tooltip title="编辑">
+                    <Button
+                      size="small"
+                      type="primary"
+                      onClick={handleEditUser}
+                      icon={<EditOutlined></EditOutlined>}
+                    ></Button>
+                  </Tooltip>
+                  <Tooltip title="删除">
+                    <Button
+                      size="small"
+                      type="primary"
+                      danger
+                      icon={<DeleteOutlined></DeleteOutlined>}
+                    ></Button>
+                  </Tooltip>
+                </Space>
+              );
+            }}
+          />
+        </Table>
+      </PageContainer>
+      <AddModal
+        open={openAddModal}
+        action={action}
+        title={title}
+        onCancel={handleModalCancel}
+        onOk={handleModalOk}
+      ></AddModal>
+    </>
   );
 };
 
-export default Dashboard;
\ No newline at end of file
+export default Models;