diff --git a/src/api/openapi.ts b/src/api/openapi.ts
index 1ee4919db..01af4f976 100644
--- a/src/api/openapi.ts
+++ b/src/api/openapi.ts
@@ -3,14 +3,14 @@ import { UserOpenApiKey } from '@/types/openapi';
 /**
  * crete a api key
  */
-export const createAApiKey = () => POST('/openapi/postKey');
+export const createAOpenApiKey = () => POST<string>('/openapi/postKey');
 
 /**
  * get api keys
  */
-export const getApiKeys = () => GET<UserOpenApiKey[]>('/openapi/getKeys');
+export const getOpenApiKeys = () => GET<UserOpenApiKey[]>('/openapi/getKeys');
 
 /**
  * delete api by id
  */
-export const delApiById = (id: string) => DELETE(`/openapi/delKet?id=${id}`);
+export const delOpenApiById = (id: string) => DELETE(`/openapi/delKet?id=${id}`);
diff --git a/src/pages/api/openapi/getKeys.ts b/src/pages/api/openapi/getKeys.ts
index 3a293590c..1040f5351 100644
--- a/src/pages/api/openapi/getKeys.ts
+++ b/src/pages/api/openapi/getKeys.ts
@@ -17,16 +17,19 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     await connectToDatabase();
 
-    const findResponse = await OpenApi.find({ userId });
+    const findResponse = await OpenApi.find({ userId }).sort({ _id: -1 });
 
     // jus save four data
-    const apiKeys = findResponse.map<UserOpenApiKey>((item) => {
-      const key = item.apiKey;
-      return {
-        id: item._id,
-        apiKey: `${key.substring(0, 2)}******${key.substring(key.length - 2)}`
-      };
-    });
+    const apiKeys = findResponse.map<UserOpenApiKey>(
+      ({ _id, apiKey, createTime, lastUsedTime }) => {
+        return {
+          id: _id,
+          apiKey: `${apiKey.substring(0, 2)}******${apiKey.substring(apiKey.length - 2)}`,
+          createTime,
+          lastUsedTime
+        };
+      }
+    );
 
     jsonRes(res, {
       data: apiKeys
diff --git a/src/pages/api/openapi/postKey.ts b/src/pages/api/openapi/postKey.ts
index 4a199c508..ca3ebd95b 100644
--- a/src/pages/api/openapi/postKey.ts
+++ b/src/pages/api/openapi/postKey.ts
@@ -4,7 +4,7 @@ import { jsonRes } from '@/service/response';
 import { connectToDatabase, OpenApi } from '@/service/mongo';
 import { authToken } from '@/service/utils/tools';
 import { customAlphabet } from 'nanoid';
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890-', 20);
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890');
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
diff --git a/src/pages/openapi/index.tsx b/src/pages/openapi/index.tsx
index 3b0b5fef0..3319d01e5 100644
--- a/src/pages/openapi/index.tsx
+++ b/src/pages/openapi/index.tsx
@@ -1,11 +1,120 @@
-import React from 'react';
-import { Card, Box, Flex, Button, Input } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import {
+  Card,
+  Box,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  IconButton,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody
+} from '@chakra-ui/react';
+import { getOpenApiKeys, createAOpenApiKey, delOpenApiById } from '@/api/openapi';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { useLoading } from '@/hooks/useLoading';
+import dayjs from 'dayjs';
+import { DeleteIcon } from '@chakra-ui/icons';
+import { useCopyData } from '@/utils/tools';
 
 const OpenApi = () => {
+  const { Loading } = useLoading();
+  const {
+    data: apiKeys = [],
+    isLoading: isGetting,
+    refetch
+  } = useQuery([getOpenApiKeys], getOpenApiKeys);
+  const [apiKey, setApiKey] = useState('');
+  const { copyData } = useCopyData();
+
+  const { mutate: onclickCreateApiKey, isLoading: isCreating } = useMutation({
+    mutationFn: () => createAOpenApiKey(),
+    onSuccess(res) {
+      setApiKey(res);
+      refetch();
+    }
+  });
+
+  const { mutate: onclickRemove, isLoading: isDeleting } = useMutation({
+    mutationFn: async (id: string) => delOpenApiById(id),
+    onSuccess() {
+      refetch();
+    }
+  });
+
   return (
-    <Card px={6} py={4}>
-      ss
-    </Card>
+    <>
+      <Card px={6} py={4} position={'relative'}>
+        <Box fontSize={'xl'} fontWeight={'bold'}>
+          Open Api Key
+        </Box>
+        <Box fontSize={'sm'} mt={2}>
+          请注意保管你的 key，不要泄露！
+        </Box>
+        <TableContainer mt={2} position={'relative'}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>Api Key</Th>
+                <Th>创建时间</Th>
+                <Th>最后一次使用时间</Th>
+                <Th />
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {apiKeys.map(({ id, apiKey, createTime, lastUsedTime }) => (
+                <Tr key={id}>
+                  <Td>{apiKey}</Td>
+                  <Td>{dayjs(createTime).format('YYYY/MM/DD HH:mm:ss')}</Td>
+                  <Td>{dayjs(lastUsedTime).format('YYYY/MM/DD HH:mm:ss')}</Td>
+                  <Td>
+                    <IconButton
+                      icon={<DeleteIcon />}
+                      size={'xs'}
+                      aria-label={'delete'}
+                      variant={'outline'}
+                      colorScheme={'gray'}
+                      onClick={() => onclickRemove(id)}
+                    />
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          <Button
+            mt={5}
+            isLoading={isCreating}
+            isDisabled={apiKeys.length >= 5}
+            title={apiKeys.length >= 5 ? '最多五组 Api Key' : ''}
+            onClick={() => onclickCreateApiKey()}
+          >
+            添加新的 Api Key
+          </Button>
+        </TableContainer>
+        <Loading loading={isGetting || isDeleting} fixed={false} />
+      </Card>
+      <Modal isOpen={!!apiKey} onClose={() => setApiKey('')}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Api Key</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody mb={5}>
+            请保管好你的Api Key
+            <Box userSelect={'all'} onClick={() => copyData(apiKey)}>
+              {apiKey}
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/types/openapi.d.ts b/src/types/openapi.d.ts
index 6b7056d9b..484790a56 100644
--- a/src/types/openapi.d.ts
+++ b/src/types/openapi.d.ts
@@ -1,4 +1,6 @@
 export interface UserOpenApiKey {
   id: string;
   apiKey: string;
+  createTime: Date;
+  lastUsedTime: Date;
 }