diff --git a/libs/db.js b/libs/db.js
index 085dd1b..54cc632 100644
--- a/libs/db.js
+++ b/libs/db.js
@@ -33,9 +33,13 @@ const insertTimeRange = db.prepare(
 );
 const getTimeRanges = db.prepare(`SELECT * FROM time_ranges`);
 const deleteTimeRange = db.prepare(`DELETE FROM time_ranges WHERE id = ?`);
+const update = db.prepare(
+  `UPDATE time_ranges SET name = ?, range = ?, username = ? WHERE id = ?`
+);
 const updateUsername = db.prepare(
   `UPDATE time_ranges SET username = ? WHERE id = ?`
 );
+
 const countUser = db.prepare(
   `SELECT COUNT(*) as count FROM time_ranges WHERE username = ?`
 );
@@ -88,6 +92,7 @@ export {
   insertTimeRange,
   getTimeRanges,
   deleteTimeRange,
+  update,
   updateUsername,
   updateUsernameWithLimit,
   getLimit,
diff --git a/pages/api/time/ranges/[id].js b/pages/api/time/ranges/[id].js
index c03ee9d..0552cb6 100644
--- a/pages/api/time/ranges/[id].js
+++ b/pages/api/time/ranges/[id].js
@@ -2,6 +2,7 @@ import {
   deleteTimeRange,
   getLimit,
   authenticate,
+  update,
   updateUsername,
   updateUsernameWithLimit,
 } from "../../../../libs/db";
@@ -34,26 +35,28 @@ export default function handler(req, res) {
 
     // update username
   } else if (req.method === "PUT") {
-    // check if id is valid
-    // check if username is valid
     const { username } = req.body;
-    if (username === undefined) {
-      res.status(400).json({
-        error: `缺少参数 username`,
-      });
-      return;
-    }
 
     // admin update username
     const { token } = req.body;
     if (authenticate(token)) {
-      updateUsername.run(username, id);
+      const { name, username, id, range } = req.body;
+      const result = update.run(name, range, username, id);
       res.status(200).json({
         success: true,
       });
       return;
     }
 
+    // check if id is valid
+    // check if username is valid
+    if (username === undefined) {
+      res.status(400).json({
+        error: `缺少参数 username`,
+      });
+      return;
+    }
+
     try {
       const limit = getLimit();
       updateUsernameWithLimit(username, id, limit);
diff --git a/pages/time.js b/pages/time.js
index f4aa2db..edad8c3 100644
--- a/pages/time.js
+++ b/pages/time.js
@@ -5,6 +5,10 @@ import {
   Snackbar,
   Button,
   Stack,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   TextField,
   TableContainer,
@@ -32,18 +36,17 @@ export default function Time(props) {
   const [token, setToken] = useState("");
   const [stats, setStats] = useState({});
 
+  const [modifyTime, setModifyTime] = useState({});
+
   const router = useRouter();
 
-  const updateUsernameByAdmin = (id, username) => {
-    fetch(`${prefix}/api/time/ranges/${id}`, {
+  const modifyRange = () => {
+    fetch(`${prefix}/api/time/ranges/${modifyTime.id}`, {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        username,
-        token,
-      }),
+      body: JSON.stringify({ token, ...modifyTime }),
     })
       .then((res) => res.json())
       .then((res) => {
@@ -51,6 +54,7 @@ export default function Time(props) {
           setSnackbarError(true);
           setSnackbarErrorMessage(res.error);
         } else {
+          setModifyTime({});
           setSnackbarSuccess(true);
           refreshRanges();
         }
@@ -356,9 +360,10 @@ export default function Time(props) {
                     <>
                       <Button
                         variant="contained"
-                        onClick={() => updateUsernameByAdmin(range.id, "")}
+                        color="secondary"
+                        onClick={() => setModifyTime(range)}
                       >
-                        清空
+                        修改
                       </Button>
                       <Button
                         variant="contained"
@@ -401,6 +406,44 @@ export default function Time(props) {
           操作成功！
         </Alert>
       </Snackbar>
+      <Dialog open={modifyTime.id} onClose={() => setModifyTime({})}>
+        <DialogTitle>修改时间段 {modifyTime.id}</DialogTitle>
+        <DialogContent>
+          <Stack
+            sx={{
+              mt: 1,
+            }}
+            spacing={2}
+          >
+            <TextField
+              label="名称"
+              value={modifyTime.name}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, name: e.target.value })
+              }
+            />
+            <TextField
+              label="时间段"
+              value={modifyTime.range}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, range: e.target.value })
+              }
+              placeholder="2022-01-01 00:00:00"
+            />
+            <TextField
+              label="姓名"
+              value={modifyTime.username}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, username: e.target.value })
+              }
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setModifyTime({})}>取消</Button>
+          <Button onClick={modifyRange}>确定</Button>
+        </DialogActions>
+      </Dialog>
     </Container>
   );
 }