diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less
index 54aa1629..0dbff123 100644
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@@ -232,3 +232,7 @@
   list-style-type: decimal;
   padding-left: 16px;
 }
+
+.gap-16 {
+  gap: 16px;
+}
diff --git a/src/components/seal-table/components/row-skeleton.tsx b/src/components/seal-table/components/row-skeleton.tsx
new file mode 100644
index 00000000..2940bbad
--- /dev/null
+++ b/src/components/seal-table/components/row-skeleton.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from 'antd';
+import '../styles/skeleton.less';
+
+const RowSkeleton = () => {
+  return (
+    <div className="row-skeleton">
+      <div className="holder"></div>
+      <Checkbox></Checkbox>
+    </div>
+  );
+};
+
+export default RowSkeleton;
diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx
index 45f1a055..0a9eccf5 100644
--- a/src/components/seal-table/index.tsx
+++ b/src/components/seal-table/index.tsx
@@ -118,7 +118,10 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
-          <Empty image={loadend ? Empty.PRESENTED_IMAGE_SIMPLE : null}></Empty>
+          <Empty
+            image={loadend ? Empty.PRESENTED_IMAGE_SIMPLE : null}
+            description={loadend ? undefined : null}
+          ></Empty>
         </div>
       );
     }
diff --git a/src/components/seal-table/styles/skeleton.less b/src/components/seal-table/styles/skeleton.less
new file mode 100644
index 00000000..ae8c0a58
--- /dev/null
+++ b/src/components/seal-table/styles/skeleton.less
@@ -0,0 +1,13 @@
+.row-skeleton {
+  display: flex;
+  justify-content: flex-start;
+  background-color: var(--color-fill-sider);
+  padding: 16px;
+  height: 68px;
+  border-radius: var(--border-radius-base);
+  align-items: center;
+
+  .holder {
+    width: 33px;
+  }
+}
diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx
index 011e058e..820e49c4 100644
--- a/src/pages/api-keys/index.tsx
+++ b/src/pages/api-keys/index.tsx
@@ -10,7 +10,15 @@ import { handleBatchRequest } from '@/utils';
 import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table, Tooltip } from 'antd';
+import {
+  Button,
+  ConfigProvider,
+  Empty,
+  Input,
+  Space,
+  Table,
+  Tooltip
+} from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
@@ -31,10 +39,12 @@ const APIKeys: React.FC = () => {
   const [dataSource, setDataSource] = useState<{
     dataList: ListItem[];
     loading: boolean;
+    loadend: boolean;
     total: number;
   }>({
     dataList: [],
     loading: false,
+    loadend: false,
     total: 0
   });
   const [openAddModal, setOpenAddModal] = useState(false);
@@ -71,6 +81,7 @@ const APIKeys: React.FC = () => {
       setDataSource({
         dataList: res.items || [],
         loading: false,
+        loadend: true,
         total: res.pagination.total
       });
     } catch (error) {
@@ -78,6 +89,7 @@ const APIKeys: React.FC = () => {
       setDataSource({
         dataList: [],
         loading: false,
+        loadend: true,
         total: dataSource.total
       });
     }
@@ -139,6 +151,18 @@ const APIKeys: React.FC = () => {
     });
   };
 
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
   useEffect(() => {
     fetchData();
   }, [queryParams]);
@@ -205,110 +229,112 @@ const APIKeys: React.FC = () => {
             </Space>
           }
         ></PageTools>
-        <Table
-          dataSource={dataSource.dataList}
-          rowSelection={rowSelection}
-          loading={dataSource.loading}
-          rowKey="id"
-          onChange={handleTableChange}
-          pagination={{
-            showSizeChanger: true,
-            pageSize: queryParams.perPage,
-            current: queryParams.page,
-            total: dataSource.total,
-            hideOnSinglePage: queryParams.perPage === 10,
-            onChange: handlePageChange
-          }}
-        >
-          <Column
-            title={intl.formatMessage({ id: 'common.table.name' })}
-            dataIndex="name"
-            key="name"
-            ellipsis={{
-              showTitle: false
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            dataSource={dataSource.dataList}
+            rowSelection={rowSelection}
+            loading={dataSource.loading}
+            rowKey="id"
+            onChange={handleTableChange}
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
             }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost style={{ maxWidth: 400 }}>
-                  {text}
-                </AutoTooltip>
-              );
-            }}
-          />
+          >
+            <Column
+              title={intl.formatMessage({ id: 'common.table.name' })}
+              dataIndex="name"
+              key="name"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost style={{ maxWidth: 400 }}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
 
-          <Column
-            title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
-            dataIndex="expires_at"
-            key="expiration"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost>
-                  {text
-                    ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
-                    : intl.formatMessage({
-                        id: 'apikeys.form.expiration.never'
-                      })}
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.description' })}
-            dataIndex="description"
-            key="description"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record) => {
-              return <AutoTooltip ghost>{text}</AutoTooltip>;
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.createTime' })}
-            dataIndex="created_at"
-            key="createTime"
-            defaultSortOrder="descend"
-            sortOrder={sortOrder}
-            showSorterTooltip={false}
-            sorter={false}
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost>
-                  {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.operation' })}
-            key="operation"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record: ListItem) => {
-              return (
-                <Space size={20}>
-                  <Tooltip
-                    title={intl.formatMessage({ id: 'common.button.delete' })}
-                  >
-                    <Button
-                      onClick={() => handleDelete(record)}
-                      size="small"
-                      danger
-                      icon={<DeleteOutlined></DeleteOutlined>}
-                    ></Button>
-                  </Tooltip>
-                </Space>
-              );
-            }}
-          />
-        </Table>
+            <Column
+              title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
+              dataIndex="expires_at"
+              key="expiration"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost>
+                    {text
+                      ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+                      : intl.formatMessage({
+                          id: 'apikeys.form.expiration.never'
+                        })}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.description' })}
+              dataIndex="description"
+              key="description"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return <AutoTooltip ghost>{text}</AutoTooltip>;
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.createTime' })}
+              dataIndex="created_at"
+              key="createTime"
+              defaultSortOrder="descend"
+              sortOrder={sortOrder}
+              showSorterTooltip={false}
+              sorter={false}
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost>
+                    {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.operation' })}
+              key="operation"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record: ListItem) => {
+                return (
+                  <Space size={20}>
+                    <Tooltip
+                      title={intl.formatMessage({ id: 'common.button.delete' })}
+                    >
+                      <Button
+                        onClick={() => handleDelete(record)}
+                        size="small"
+                        danger
+                        icon={<DeleteOutlined></DeleteOutlined>}
+                      ></Button>
+                    </Tooltip>
+                  </Space>
+                );
+              }}
+            />
+          </Table>
+        </ConfigProvider>
       </PageContainer>
       <AddAPIKeyModal
         open={openAddModal}
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
index 2002d486..ae948468 100644
--- a/src/pages/llmodels/index.tsx
+++ b/src/pages/llmodels/index.tsx
@@ -161,7 +161,6 @@ const Models: React.FC = () => {
   const updateInstanceHandler = (list: any) => {
     // filter the data
     _.each(list, (data: any) => {
-      console.log('updateInstanceHandler====', data);
       updateInstanceChunkedList(data);
     });
   };
diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx
index be7e7470..2eb3e417 100644
--- a/src/pages/resources/components/gpus.tsx
+++ b/src/pages/resources/components/gpus.tsx
@@ -5,7 +5,7 @@ import useTableSort from '@/hooks/use-table-sort';
 import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table } from 'antd';
+import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
 import _ from 'lodash';
 import { memo, useEffect, useState } from 'react';
 import { queryGpuDevicesList } from '../apis';
@@ -21,10 +21,12 @@ const GPUList: React.FC = () => {
   const [dataSource, setDataSource] = useState<{
     dataList: GPUDeviceItem[];
     loading: boolean;
+    loadend: boolean;
     total: number;
   }>({
     dataList: [],
     loading: false,
+    loadend: false,
     total: 0
   });
   const [queryParams, setQueryParams] = useState({
@@ -60,12 +62,14 @@ const GPUList: React.FC = () => {
       setDataSource({
         dataList: res.items || [],
         loading: false,
+        loadend: true,
         total: res.pagination.total
       });
     } catch (error) {
       setDataSource({
         dataList: [],
         loading: false,
+        loadend: true,
         total: dataSource.total
       });
       console.log('error', error);
@@ -83,6 +87,18 @@ const GPUList: React.FC = () => {
     });
   };
 
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
   useEffect(() => {
     fetchData();
   }, [queryParams]);
@@ -111,131 +127,127 @@ const GPUList: React.FC = () => {
           </Space>
         }
       ></PageTools>
-      <Table
-        dataSource={dataSource.dataList}
-        loading={dataSource.loading}
-        rowKey="id"
-        onChange={handleTableChange}
-        pagination={{
-          showSizeChanger: true,
-          pageSize: queryParams.perPage,
-          current: queryParams.page,
-          total: dataSource.total,
-          hideOnSinglePage: queryParams.perPage === 10,
-          onChange: handlePageChange
-        }}
-      >
-        <Column
-          title={intl.formatMessage({ id: 'common.table.name' })}
-          dataIndex="name"
-          key="name"
-          render={(text, record) => {
-            return (
-              <AutoTooltip ghost style={{ width: '100%' }}>
-                {text}
-              </AutoTooltip>
-            );
+      <ConfigProvider renderEmpty={renderEmpty}>
+        <Table
+          dataSource={dataSource.dataList}
+          loading={dataSource.loading}
+          rowKey="id"
+          onChange={handleTableChange}
+          pagination={{
+            showSizeChanger: true,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
+            total: dataSource.total,
+            hideOnSinglePage: queryParams.perPage === 10,
+            onChange: handlePageChange
           }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.index' })}
-          dataIndex="index"
-          key="index"
-          render={(text, record: GPUDeviceItem) => {
-            return <span>{record.index}</span>;
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.workername' })}
-          dataIndex="worker_name"
-          key="worker_name"
-          width={200}
-          render={(text, record: GPUDeviceItem) => {
-            return (
-              <span style={{ display: 'flex', width: '100%' }}>
-                <AutoTooltip ghost maxWidth={340}>
+        >
+          <Column
+            title={intl.formatMessage({ id: 'common.table.name' })}
+            dataIndex="name"
+            key="name"
+            render={(text, record) => {
+              return (
+                <AutoTooltip ghost style={{ width: '100%' }}>
                   {text}
                 </AutoTooltip>
-              </span>
-            );
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.vender' })}
-          dataIndex="vendor"
-          key="vendor"
-        />
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.index' })}
+            dataIndex="index"
+            key="index"
+            render={(text, record: GPUDeviceItem) => {
+              return <span>{record.index}</span>;
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.workername' })}
+            dataIndex="worker_name"
+            key="worker_name"
+            width={200}
+            render={(text, record: GPUDeviceItem) => {
+              return (
+                <span style={{ display: 'flex', width: '100%' }}>
+                  <AutoTooltip ghost maxWidth={340}>
+                    {text}
+                  </AutoTooltip>
+                </span>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.vender' })}
+            dataIndex="vendor"
+            key="vendor"
+          />
 
-        <Column
-          title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
-          dataIndex="temperature"
-          key="Temperature"
-          render={(text, record: GPUDeviceItem) => {
-            return <span>{text ? _.round(text, 1) : '-'}</span>;
-          }}
-        />
-        {/* <Column
-          title={intl.formatMessage({ id: 'resources.table.core' })}
-          dataIndex="core"
-          key="Core"
-          render={(text, record: GPUDeviceItem) => {
-            return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>;
-          }}
-        /> */}
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
-          dataIndex="gpuUtil"
-          key="gpuUtil"
-          render={(text, record: GPUDeviceItem) => {
-            return (
-              <>
-                {record.core ? (
-                  <ProgressBar
-                    percent={_.round(record.core?.utilization_rate, 2)}
-                  ></ProgressBar>
-                ) : (
-                  '-'
-                )}
-              </>
-            );
-          }}
-        />
+          <Column
+            title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
+            dataIndex="temperature"
+            key="Temperature"
+            render={(text, record: GPUDeviceItem) => {
+              return <span>{text ? _.round(text, 1) : '-'}</span>;
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
+            dataIndex="gpuUtil"
+            key="gpuUtil"
+            render={(text, record: GPUDeviceItem) => {
+              return (
+                <>
+                  {record.core ? (
+                    <ProgressBar
+                      percent={_.round(record.core?.utilization_rate, 2)}
+                    ></ProgressBar>
+                  ) : (
+                    '-'
+                  )}
+                </>
+              );
+            }}
+          />
 
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.vramutilization' })}
-          dataIndex="VRAM"
-          key="VRAM"
-          render={(text, record: GPUDeviceItem) => {
-            return (
-              <ProgressBar
-                percent={
-                  record.memory?.used
-                    ? _.round(record.memory?.utilization_rate, 0)
-                    : _.round(
-                        record.memory?.allocated / record.memory?.total,
-                        0
-                      ) * 100
-                }
-                label={
-                  <span className="flex-column">
-                    <span>
-                      {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
-                      {convertFileSize(record.memory?.total, 0)}
+          <Column
+            title={intl.formatMessage({
+              id: 'resources.table.vramutilization'
+            })}
+            dataIndex="VRAM"
+            key="VRAM"
+            render={(text, record: GPUDeviceItem) => {
+              return (
+                <ProgressBar
+                  percent={
+                    record.memory?.used
+                      ? _.round(record.memory?.utilization_rate, 0)
+                      : _.round(
+                          record.memory?.allocated / record.memory?.total,
+                          0
+                        ) * 100
+                  }
+                  label={
+                    <span className="flex-column">
+                      <span>
+                        {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
+                        {convertFileSize(record.memory?.total, 0)}
+                      </span>
+                      <span>
+                        {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
+                        {convertFileSize(
+                          record.memory?.used || record.memory?.allocated,
+                          0
+                        )}
+                      </span>
                     </span>
-                    <span>
-                      {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
-                      {convertFileSize(
-                        record.memory?.used || record.memory?.allocated,
-                        0
-                      )}
-                    </span>
-                  </span>
-                }
-              ></ProgressBar>
-            );
-          }}
-        />
-      </Table>
+                  }
+                ></ProgressBar>
+              );
+            }}
+          />
+        </Table>
+      </ConfigProvider>
     </>
   );
 };
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index 79e83488..be5ef37c 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -16,7 +16,16 @@ import {
   SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table, Tooltip, message } from 'antd';
+import {
+  Button,
+  ConfigProvider,
+  Empty,
+  Input,
+  Space,
+  Table,
+  Tooltip,
+  message
+} from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -55,10 +64,12 @@ const Resources: React.FC = () => {
   const [dataSource, setDataSource] = useState<{
     dataList: ListItem[];
     loading: boolean;
+    loadend: boolean;
     total: number;
   }>({
     dataList: [],
     loading: false,
+    loadend: false,
     total: 0
   });
   const [queryParams, setQueryParams] = useState({
@@ -88,12 +99,14 @@ const Resources: React.FC = () => {
       setDataSource({
         dataList: res.items,
         loading: false,
+        loadend: true,
         total: res.pagination.total
       });
     } catch (error) {
       setDataSource({
         dataList: [],
         loading: false,
+        loadend: true,
         total: dataSource.total
       });
       console.log('error', error);
@@ -239,6 +252,18 @@ const Resources: React.FC = () => {
     }
   };
 
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
   useEffect(() => {
     fetchData();
   }, [queryParams]);
@@ -295,256 +320,259 @@ const Resources: React.FC = () => {
           </Space>
         }
       ></PageTools>
-      <Table
-        style={{ width: '100%' }}
-        dataSource={dataSource.dataList}
-        loading={dataSource.loading}
-        rowKey="id"
-        onChange={handleTableChange}
-        rowSelection={rowSelection}
-        pagination={{
-          showSizeChanger: true,
-          pageSize: queryParams.perPage,
-          current: queryParams.page,
-          total: dataSource.total,
-          hideOnSinglePage: queryParams.perPage === 10,
-          onChange: handlePageChange
-        }}
-      >
-        <Column
-          title={intl.formatMessage({ id: 'common.table.name' })}
-          dataIndex="name"
-          key="name"
-          width={100}
-          render={(text, record: ListItem) => {
-            return (
-              <AutoTooltip ghost maxWidth={240}>
-                <span>{record.name}</span>
-              </AutoTooltip>
-            );
+      <ConfigProvider renderEmpty={renderEmpty}>
+        <Table
+          style={{ width: '100%' }}
+          dataSource={dataSource.dataList}
+          loading={dataSource.loading}
+          rowKey="id"
+          onChange={handleTableChange}
+          rowSelection={rowSelection}
+          pagination={{
+            showSizeChanger: true,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
+            total: dataSource.total,
+            hideOnSinglePage: queryParams.perPage === 10,
+            onChange: handlePageChange
           }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.labels' })}
-          dataIndex="labels"
-          key="labels"
-          width={200}
-          render={(text, record: ListItem) => {
-            return (
-              <div
-                style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 6,
-                  maxWidth: 200
-                }}
-              >
-                {_.map(record.labels, (item: any, index: string) => {
-                  return (
-                    <AutoTooltip
-                      key={index}
-                      className="m-r-0"
-                      maxWidth={120}
-                      style={{
-                        paddingInline: 8,
-                        borderRadius: 12
-                      }}
-                    >
-                      {index}:{item}
-                    </AutoTooltip>
-                  );
-                })}
-              </div>
-            );
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'common.table.status' })}
-          dataIndex="state"
-          key="state"
-          render={(text, record: ListItem) => {
-            return (
-              <StatusTag
-                statusValue={{
-                  status: status[record.state] as any,
-                  text: WorkerStatusMapValue[record.state],
-                  message: record.state_message
-                }}
-              ></StatusTag>
-            );
-          }}
-        />
-        <Column title="IP" dataIndex="ip" key="address" />
-        <Column
-          title="CPU"
-          dataIndex="CPU"
-          key="CPU"
-          render={(text, record: ListItem) => {
-            return (
-              <ProgressBar
-                percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
-              ></ProgressBar>
-            );
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.memory' })}
-          dataIndex="memory"
-          key="Memory"
-          render={(text, record: ListItem) => {
-            return (
-              <ProgressBar
-                percent={formateUtilazation(
-                  record?.status?.memory?.used,
-                  record?.status?.memory?.total
-                )}
-                label={
-                  <span className="flex-column">
-                    <span>
-                      {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
-                      {convertFileSize(record?.status?.memory?.total, 0)}
-                    </span>
-                    <span>
-                      {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
-                      {convertFileSize(record?.status?.memory?.used, 0)}
-                    </span>
-                  </span>
-                }
-              ></ProgressBar>
-            );
-          }}
-        />
-        <Column
-          title="GPU"
-          dataIndex="GPU"
-          key="GPU"
-          render={(text, record: ListItem) => {
-            return (
-              <span className="flex-column flex-gap-2">
-                {_.map(
-                  _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                  (item: GPUDeviceItem, index: string) => {
+        >
+          <Column
+            title={intl.formatMessage({ id: 'common.table.name' })}
+            dataIndex="name"
+            key="name"
+            width={100}
+            render={(text, record: ListItem) => {
+              return (
+                <AutoTooltip ghost maxWidth={240}>
+                  <span>{record.name}</span>
+                </AutoTooltip>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.labels' })}
+            dataIndex="labels"
+            key="labels"
+            width={200}
+            render={(text, record: ListItem) => {
+              return (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 6,
+                    maxWidth: 200
+                  }}
+                >
+                  {_.map(record.labels, (item: any, index: string) => {
                     return (
-                      <span className="flex-center" key={index}>
-                        <span
-                          className="m-r-5"
-                          style={{ display: 'flex', width: 25 }}
-                        >
-                          [{item.index}]
-                        </span>
-                        {item.core ? (
-                          <ProgressBar
-                            key={index}
-                            percent={_.round(item.core?.utilization_rate, 0)}
-                          ></ProgressBar>
-                        ) : (
-                          '-'
-                        )}
-                      </span>
+                      <AutoTooltip
+                        key={index}
+                        className="m-r-0"
+                        maxWidth={120}
+                        style={{
+                          paddingInline: 8,
+                          borderRadius: 12
+                        }}
+                      >
+                        {index}:{item}
+                      </AutoTooltip>
                     );
+                  })}
+                </div>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'common.table.status' })}
+            dataIndex="state"
+            key="state"
+            render={(text, record: ListItem) => {
+              return (
+                <StatusTag
+                  statusValue={{
+                    status: status[record.state] as any,
+                    text: WorkerStatusMapValue[record.state],
+                    message: record.state_message
+                  }}
+                ></StatusTag>
+              );
+            }}
+          />
+          <Column title="IP" dataIndex="ip" key="address" />
+          <Column
+            title="CPU"
+            dataIndex="CPU"
+            key="CPU"
+            render={(text, record: ListItem) => {
+              return (
+                <ProgressBar
+                  percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
+                ></ProgressBar>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.memory' })}
+            dataIndex="memory"
+            key="Memory"
+            render={(text, record: ListItem) => {
+              return (
+                <ProgressBar
+                  percent={formateUtilazation(
+                    record?.status?.memory?.used,
+                    record?.status?.memory?.total
+                  )}
+                  label={
+                    <span className="flex-column">
+                      <span>
+                        {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
+                        {convertFileSize(record?.status?.memory?.total, 0)}
+                      </span>
+                      <span>
+                        {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
+                        {convertFileSize(record?.status?.memory?.used, 0)}
+                      </span>
+                    </span>
                   }
-                )}
-              </span>
-            );
-          }}
-        />
-
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.vram' })}
-          dataIndex="VRAM"
-          key="VRAM"
-          render={(text, record: ListItem) => {
-            return (
-              <span className="flex-column flex-gap-2">
-                {_.map(
-                  _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                  (item: GPUDeviceItem, index: string) => {
-                    return (
-                      <span key={index}>
-                        <span className="flex-center">
+                ></ProgressBar>
+              );
+            }}
+          />
+          <Column
+            title="GPU"
+            dataIndex="GPU"
+            key="GPU"
+            render={(text, record: ListItem) => {
+              return (
+                <span className="flex-column flex-gap-2">
+                  {_.map(
+                    _.sortBy(record?.status?.gpu_devices || [], ['index']),
+                    (item: GPUDeviceItem, index: string) => {
+                      return (
+                        <span className="flex-center" key={index}>
                           <span
                             className="m-r-5"
                             style={{ display: 'flex', width: 25 }}
                           >
                             [{item.index}]
                           </span>
-                          <ProgressBar
-                            key={index}
-                            percent={
-                              item.memory?.used
-                                ? _.round(item.memory?.utilization_rate, 0)
-                                : _.round(
-                                    (item.memory?.allocated /
-                                      item.memory?.total) *
-                                      100,
-                                    0
-                                  )
-                            }
-                            label={
-                              <span className="flex-column">
-                                <span>
-                                  {intl.formatMessage({
-                                    id: 'resources.table.total'
-                                  })}
-                                  : {convertFileSize(item.memory?.total, 0)}
-                                </span>
-                                <span>
-                                  {intl.formatMessage({
-                                    id: 'resources.table.used'
-                                  })}
-                                  :{' '}
-                                  {convertFileSize(
-                                    item.memory?.used || item.memory?.allocated,
-                                    0
-                                  )}
-                                </span>
-                              </span>
-                            }
-                          ></ProgressBar>
-                          {item.memory.is_unified_memory && (
-                            <Tooltip
-                              title={intl.formatMessage({
-                                id: 'resources.table.unified'
-                              })}
-                            >
-                              <InfoCircleOutlined className="m-l-5" />
-                            </Tooltip>
+                          {item.core ? (
+                            <ProgressBar
+                              key={index}
+                              percent={_.round(item.core?.utilization_rate, 0)}
+                            ></ProgressBar>
+                          ) : (
+                            '-'
                           )}
                         </span>
-                      </span>
-                    );
-                  }
-                )}
-              </span>
-            );
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'resources.table.disk' })}
-          dataIndex="storage"
-          key="storage"
-          render={(text, record: ListItem) => {
-            return (
-              <ProgressBar
-                percent={calcStorage(record.status?.filesystem)}
-                label={renderStorageTooltip(record.status.filesystem)}
-              ></ProgressBar>
-            );
-          }}
-        />
-        <Column
-          title={intl.formatMessage({ id: 'common.table.operation' })}
-          key="operation"
-          render={(text, record: ListItem) => {
-            return (
-              <DropdownButtons
-                items={ActionList}
-                onSelect={(val) => handleSelect(val, record)}
-              ></DropdownButtons>
-            );
-          }}
-        />
-      </Table>
+                      );
+                    }
+                  )}
+                </span>
+              );
+            }}
+          />
+
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.vram' })}
+            dataIndex="VRAM"
+            key="VRAM"
+            render={(text, record: ListItem) => {
+              return (
+                <span className="flex-column flex-gap-2">
+                  {_.map(
+                    _.sortBy(record?.status?.gpu_devices || [], ['index']),
+                    (item: GPUDeviceItem, index: string) => {
+                      return (
+                        <span key={index}>
+                          <span className="flex-center">
+                            <span
+                              className="m-r-5"
+                              style={{ display: 'flex', width: 25 }}
+                            >
+                              [{item.index}]
+                            </span>
+                            <ProgressBar
+                              key={index}
+                              percent={
+                                item.memory?.used
+                                  ? _.round(item.memory?.utilization_rate, 0)
+                                  : _.round(
+                                      (item.memory?.allocated /
+                                        item.memory?.total) *
+                                        100,
+                                      0
+                                    )
+                              }
+                              label={
+                                <span className="flex-column">
+                                  <span>
+                                    {intl.formatMessage({
+                                      id: 'resources.table.total'
+                                    })}
+                                    : {convertFileSize(item.memory?.total, 0)}
+                                  </span>
+                                  <span>
+                                    {intl.formatMessage({
+                                      id: 'resources.table.used'
+                                    })}
+                                    :{' '}
+                                    {convertFileSize(
+                                      item.memory?.used ||
+                                        item.memory?.allocated,
+                                      0
+                                    )}
+                                  </span>
+                                </span>
+                              }
+                            ></ProgressBar>
+                            {item.memory.is_unified_memory && (
+                              <Tooltip
+                                title={intl.formatMessage({
+                                  id: 'resources.table.unified'
+                                })}
+                              >
+                                <InfoCircleOutlined className="m-l-5" />
+                              </Tooltip>
+                            )}
+                          </span>
+                        </span>
+                      );
+                    }
+                  )}
+                </span>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'resources.table.disk' })}
+            dataIndex="storage"
+            key="storage"
+            render={(text, record: ListItem) => {
+              return (
+                <ProgressBar
+                  percent={calcStorage(record.status?.filesystem)}
+                  label={renderStorageTooltip(record.status.filesystem)}
+                ></ProgressBar>
+              );
+            }}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'common.table.operation' })}
+            key="operation"
+            render={(text, record: ListItem) => {
+              return (
+                <DropdownButtons
+                  items={ActionList}
+                  onSelect={(val) => handleSelect(val, record)}
+                ></DropdownButtons>
+              );
+            }}
+          />
+        </Table>
+      </ConfigProvider>
       <DeleteModal ref={modalRef}></DeleteModal>
       <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
       <UpdateLabels
diff --git a/src/pages/users/config/types.ts b/src/pages/users/config/types.ts
index de712631..63ea11a7 100644
--- a/src/pages/users/config/types.ts
+++ b/src/pages/users/config/types.ts
@@ -10,7 +10,7 @@ export interface ListItem {
 export interface FormData {
   username: string;
   id?: number;
-  is_admin: boolean;
+  is_admin: boolean | string;
   full_name: string;
   password: string;
 }
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index c8013358..d9723306 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -18,7 +18,15 @@ import {
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table, message } from 'antd';
+import {
+  Button,
+  ConfigProvider,
+  Empty,
+  Input,
+  Space,
+  Table,
+  message
+} from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
@@ -40,10 +48,12 @@ const Users: React.FC = () => {
   const [dataSource, setDataSource] = useState<{
     dataList: ListItem[];
     loading: boolean;
+    loadend: boolean;
     total: number;
   }>({
     dataList: [],
     loading: false,
+    loadend: false,
     total: 0
   });
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -85,12 +95,14 @@ const Users: React.FC = () => {
       setDataSource({
         dataList: res.items || [],
         loading: false,
+        loadend: true,
         total: res.pagination.total
       });
     } catch (error) {
       setDataSource({
         dataList: [],
         loading: false,
+        loadend: true,
         total: dataSource.total
       });
       console.log('error', error);
@@ -199,6 +211,18 @@ const Users: React.FC = () => {
     }
   };
 
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
   useEffect(() => {
     fetchData();
   }, [queryParams]);
@@ -265,111 +289,113 @@ const Users: React.FC = () => {
             </Space>
           }
         ></PageTools>
-        <Table
-          dataSource={dataSource.dataList}
-          rowSelection={rowSelection}
-          loading={dataSource.loading}
-          rowKey="id"
-          onChange={handleTableChange}
-          pagination={{
-            showSizeChanger: true,
-            pageSize: queryParams.perPage,
-            current: queryParams.page,
-            total: dataSource.total,
-            hideOnSinglePage: queryParams.perPage === 10,
-            onChange: handlePageChange
-          }}
-        >
-          <Column
-            title={intl.formatMessage({ id: 'common.table.name' })}
-            dataIndex="username"
-            key="name"
-            ellipsis={{
-              showTitle: false
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            dataSource={dataSource.dataList}
+            rowSelection={rowSelection}
+            loading={dataSource.loading}
+            rowKey="id"
+            onChange={handleTableChange}
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
             }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost minWidth={20}>
-                  {text}
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'users.table.role' })}
-            dataIndex="role"
-            key="role"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record: ListItem) => {
-              return record.is_admin ? (
-                <AutoTooltip ghost minWidth={50}>
-                  <UserSwitchOutlined className="size-16" />
-                  <span className="m-l-5">
-                    {intl.formatMessage({ id: 'users.form.admin' })}
-                  </span>
-                </AutoTooltip>
-              ) : (
-                <AutoTooltip ghost minWidth={50}>
-                  <UserOutlined className="size-16" />
-                  <span className="m-l-5">
-                    {intl.formatMessage({ id: 'users.form.user' })}
-                  </span>
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'users.form.fullname' })}
-            dataIndex="full_name"
-            key="full_name"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost minWidth={20}>
-                  {text}
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.createTime' })}
-            dataIndex="created_at"
-            key="createTime"
-            defaultSortOrder="descend"
-            sortOrder={sortOrder}
-            showSorterTooltip={false}
-            sorter={false}
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record) => {
-              return (
-                <AutoTooltip ghost minWidth={20}>
-                  {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
-                </AutoTooltip>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.operation' })}
-            key="operation"
-            ellipsis={{
-              showTitle: false
-            }}
-            render={(text, record: ListItem) => {
-              return (
-                <DropdownButtons
-                  items={ActionList}
-                  onSelect={(val) => handleSelect(val, record)}
-                ></DropdownButtons>
-              );
-            }}
-          />
-        </Table>
+          >
+            <Column
+              title={intl.formatMessage({ id: 'common.table.name' })}
+              dataIndex="username"
+              key="name"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'users.table.role' })}
+              dataIndex="role"
+              key="role"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record: ListItem) => {
+                return record.is_admin ? (
+                  <AutoTooltip ghost minWidth={50}>
+                    <UserSwitchOutlined className="size-16" />
+                    <span className="m-l-5">
+                      {intl.formatMessage({ id: 'users.form.admin' })}
+                    </span>
+                  </AutoTooltip>
+                ) : (
+                  <AutoTooltip ghost minWidth={50}>
+                    <UserOutlined className="size-16" />
+                    <span className="m-l-5">
+                      {intl.formatMessage({ id: 'users.form.user' })}
+                    </span>
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'users.form.fullname' })}
+              dataIndex="full_name"
+              key="full_name"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.createTime' })}
+              dataIndex="created_at"
+              key="createTime"
+              defaultSortOrder="descend"
+              sortOrder={sortOrder}
+              showSorterTooltip={false}
+              sorter={false}
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.operation' })}
+              key="operation"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record: ListItem) => {
+                return (
+                  <DropdownButtons
+                    items={ActionList}
+                    onSelect={(val) => handleSelect(val, record)}
+                  ></DropdownButtons>
+                );
+              }}
+            />
+          </Table>
+        </ConfigProvider>
       </PageContainer>
       <AddModal
         open={openAddModal}