diff --git a/src/components/HostInfoCard/HostInfoTable.tsx b/src/components/HostInfoCard/HostInfoTable.tsx
index 7bffbb4..e39a49a 100644
--- a/src/components/HostInfoCard/HostInfoTable.tsx
+++ b/src/components/HostInfoCard/HostInfoTable.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import OmsTable from '../OmsTable/index';
 import Card from '@material-ui/core/Card';
 import { GroupInfo, HostInfo, IState, PrivateKeyInfo, TagInfo } from '../../store/interface';
@@ -163,6 +163,7 @@ type tOP = {};
 type tSP = tOP & {
   hostList: HostInfo[];
   groupList: GroupInfo[];
+  hostTotal: number;
   tagList: TagInfo[];
   privateKeyList: PrivateKeyInfo[];
 };
@@ -170,6 +171,7 @@ type tSP = tOP & {
 const mapStateToProps = (state: IState, props: tOP): tSP => ({
   ...props,
   hostList: state.hostList,
+  hostTotal: state.hostTotal,
   groupList: state.groupList,
   tagList: state.tagList,
   privateKeyList: state.privateKeyList
@@ -190,14 +192,24 @@ type tProps = tSP &
   };
 
 function HostInfoTable(props: tProps) {
-  const { hostList, upHostList, tipDispatch, formDispatch, setHostId, setHostInfo, setTlc, tagList } = props;
+  const { hostList, hostTotal, upHostList, tipDispatch, formDispatch, setHostId, setHostInfo, setTlc, tagList } = props;
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
 
+  const [pageSize, setPageSize] = useState(25);
+
   useEffect(() => {
-    upHostList();
+    upHostList({ pageSize, pageNo: 1 });
   }, []);
 
+  const onPageSizeChange = (pageSize: number) => {
+    setPageSize(pageSize);
+    upHostList({ pageSize, pageNo: 1 });
+  };
+
+  const onPageChange = (pageNo: number) => {
+    upHostList({ pageSize, pageNo: pageNo + 1 }); // 组件库是以0开始的所以要加一
+  };
   const getHostList = (hostList: HostInfo[]) => {
     return hostList?.map((h) => {
       return {
@@ -232,7 +244,17 @@ function HostInfoTable(props: tProps) {
 
   return (
     <Card style={{ width: '98%', height: '80vh', margin: '0 auto', marginTop: '20px' }}>
-      <OmsTable columns={columns} rows={getHostList(hostList)} />
+      <OmsTable
+        columns={columns}
+        rows={getHostList(hostList)}
+        rowCount={hostTotal}
+        pagination
+        pageSize={pageSize}
+        rowsPerPageOptions={[25, 50, 100]}
+        paginationMode={'server'}
+        onPageSizeChange={onPageSizeChange}
+        onPageChange={onPageChange}
+      />
     </Card>
   );
 }
diff --git a/src/components/OmsTable/index.tsx b/src/components/OmsTable/index.tsx
index d55ae3e..b1afd94 100644
--- a/src/components/OmsTable/index.tsx
+++ b/src/components/OmsTable/index.tsx
@@ -8,6 +8,7 @@ type tProps = DataGridProps & React.RefAttributes<HTMLDivElement>;
 
 export default function OmsTable(props: tProps) {
   const { columns, rows } = props;
+
   return (
     <Box sx={{ height: '100%', width: '100%' }}>
       {rows.length < 1 ? (
@@ -16,6 +17,7 @@ export default function OmsTable(props: tProps) {
         </div>
       ) : (
         <DataGrid
+          {...props}
           rows={rows}
           columns={columns}
           components={{
diff --git a/src/sagas/hostInfoSaga.ts b/src/sagas/hostInfoSaga.ts
index c4a3f1f..9a7107b 100644
--- a/src/sagas/hostInfoSaga.ts
+++ b/src/sagas/hostInfoSaga.ts
@@ -11,10 +11,11 @@ export default function* hostInfoSaga() {
         init: take(actionType.WILL_INIT_HOST)
       });
       if (getList) {
-        const res = yield call(getHostsApi);
+        const res = yield call(getHostsApi, getList?.value?.pageSize || 1000, getList?.value?.pageNo || 1);
         if (res.code !== '200') {
           return;
         }
+        yield put({ type: hostActions.UPDATE_HOST_TOTAL, value: res?.data?.total });
         yield put({ type: hostActions.INIT, value: res?.data?.data });
       }
       if (init) {
diff --git a/src/store/action-types.ts b/src/store/action-types.ts
index 7b3be83..df037de 100644
--- a/src/store/action-types.ts
+++ b/src/store/action-types.ts
@@ -37,7 +37,8 @@ export enum hostActions {
   INIT = 'INIT_HOST_INFO',
   DELETE_HOST_INFO = 'DELETE_HOST_INFO',
   ADD_HOST_INFO = 'ADD_HOST_INFO',
-  EDIT_HOST_INFO = 'EDIT_HOST_INFO'
+  EDIT_HOST_INFO = 'EDIT_HOST_INFO',
+  UPDATE_HOST_TOTAL = 'UPDATE_HOST_TOTAL'
 }
 
 export enum groupActions {
diff --git a/src/store/action.ts b/src/store/action.ts
index 0f7340d..de267e7 100644
--- a/src/store/action.ts
+++ b/src/store/action.ts
@@ -3,8 +3,8 @@ import { GroupInfo, HostInfo, JobInfo, PrivateKeyInfo, TagInfo, TunnelInfo } fro
 import { WILL_INIT_APP_VERSION, WILL_INIT_QUICK_COMMAND } from './action-types';
 
 const actions = {
-  getHostList() {
-    return { type: actionType.WILL_GET_HOST_LIST };
+  getHostList(value?: { pageSize: number; pageNo: number }) {
+    return { type: actionType.WILL_GET_HOST_LIST, value };
   },
   initHostInfo(value: HostInfo[]) {
     return { type: actionType.WILL_INIT_HOST, value };
diff --git a/src/store/interface.ts b/src/store/interface.ts
index fe119e2..bb82e98 100644
--- a/src/store/interface.ts
+++ b/src/store/interface.ts
@@ -8,6 +8,7 @@ export interface HostAction {
 export interface IState {
   appVersion: string;
   hostList: HostInfo[];
+  hostTotal: number;
   groupList: GroupInfo[];
   tagList: TagInfo[];
   tunnelList: TunnelInfo[];
diff --git a/src/store/reducer.ts b/src/store/reducer.ts
index 4050d96..885e911 100644
--- a/src/store/reducer.ts
+++ b/src/store/reducer.ts
@@ -157,6 +157,7 @@ import {
 const initialState: IState = {
   appVersion: 'v0.0',
   hostList: [],
+  hostTotal: 0,
   groupList: [],
   tagList: [],
   tunnelList: [],
@@ -179,6 +180,12 @@ const reducer = (state = initialState, action: HostAction) => {
         hostList: action.value
       };
     }
+    case hostActions.UPDATE_HOST_TOTAL: {
+      return {
+        ...state,
+        hostTotal: action.value
+      };
+    }
     case groupActions.INIT: {
       return {
         ...state,