diff --git a/apps/v-next/components/query/DeleteModal.tsx b/apps/v-next/components/query/DeleteModal.tsx
index a8e9d3f..5ffb0d0 100644
--- a/apps/v-next/components/query/DeleteModal.tsx
+++ b/apps/v-next/components/query/DeleteModal.tsx
@@ -103,7 +103,7 @@ export default function DeleteModal({ selectedRows, onSuccess, accessToken }: De
               ))}
             </List>
           </div>
-          <div className="mt-4 flex justify-end gap-4 items-center">
+          <div className="mt-4 flex justify-end gap-2 items-center">
             <a
               className='underline text-green-600 text-sm font-thin flex" items-center flex-wrap mr-auto'
               href="
@@ -111,7 +111,7 @@ export default function DeleteModal({ selectedRows, onSuccess, accessToken }: De
             >
               Restore tips
             </a>
-            <Button onClick={onClose}>
+            <Button size="sm" onClick={onClose}>
               {deletedIds.map((i) => i.toString()).join('-') ===
               selectedRows.map((i) => i.id.toString()).join('-')
                 ? 'Close'
@@ -119,6 +119,7 @@ export default function DeleteModal({ selectedRows, onSuccess, accessToken }: De
             </Button>
             <Button
               onClick={run}
+              size="sm"
               variant="outline"
               color="red"
               disabled={
diff --git a/apps/v-next/components/query/DescriptionModal.tsx b/apps/v-next/components/query/DescriptionModal.tsx
new file mode 100644
index 0000000..10c8293
--- /dev/null
+++ b/apps/v-next/components/query/DescriptionModal.tsx
@@ -0,0 +1,68 @@
+'use client';
+import { Button, Modal, Textarea } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { GithubAPI, IGithubRepository } from '@shared/github-api';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+interface DeleteModalProps {
+  accessToken: string;
+  description?: string;
+  repoItem: IGithubRepository;
+}
+
+export default function DescriptionModal({ description = '', accessToken, repoItem }: DeleteModalProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(description);
+  }, [description]);
+
+  const { run, loading, cancel } = useRequest(
+    async () => {
+      await GithubAPI.repo.patchRepo({
+        auth: accessToken,
+        repo: repoItem.name,
+        owner: repoItem.owner.login,
+        schema: {
+          description: value
+        }
+      });
+      toast.success('Change the repository description successfully');
+      setValue(value);
+    },
+    {
+      manual: true
+    }
+  );
+
+  const onClose = () => {
+    cancel();
+    close();
+  };
+
+  return (
+    <>
+      <Modal opened={opened} onClose={onClose} title="Modify the description:" centered>
+        {/* Modal content */}
+        <Textarea value={value} onChange={(e) => setValue(e.target.value)} className="pb-12" rows={4} />
+        <div>
+          <div className="mt-4 flex justify-end gap-2 items-center">
+            <Button variant="outline" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size="sm" onClick={run} disabled={loading} loading={loading}>
+              Confirm
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      <div className="cursor-pointer" onClick={open}>
+        {value}
+      </div>
+    </>
+  );
+}
diff --git a/apps/v-next/components/query/index.tsx b/apps/v-next/components/query/index.tsx
index e11e44f..7d9ed29 100644
--- a/apps/v-next/components/query/index.tsx
+++ b/apps/v-next/components/query/index.tsx
@@ -11,6 +11,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import DeleteModal from './DeleteModal';
+import DescriptionModal from './DescriptionModal';
 
 interface IQueryProps {
   accessToken: string;
@@ -206,8 +207,8 @@ export default function Query({ accessToken }: IQueryProps) {
             <Table.Tbody>
               {data
                 .filter((i) => i.full_name.toLowerCase().includes(name.toLowerCase().trim()))
-                .map(
-                  ({
+                .map((item) => {
+                  const {
                     name,
                     id,
                     private: isPrivate,
@@ -218,135 +219,112 @@ export default function Query({ accessToken }: IQueryProps) {
                     archived,
                     html_url,
                     owner
-                  }) => {
-                    return (
-                      <Table.Tr
-                        key={name}
-                        className={cn(
-                          'hover:from-white hover:to-indigo-100 bg-gradient-to-l group text-gray-800 hover:text-black',
-                          {
-                            'text-black to-indigo-50 from-white': selectedRows.includes(id)
+                  } = item;
+                  return (
+                    <Table.Tr
+                      key={name}
+                      className={cn(
+                        'hover:from-white hover:to-indigo-100 bg-gradient-to-l group text-gray-800 hover:text-black',
+                        {
+                          'text-black to-indigo-50 from-white': selectedRows.includes(id)
+                        }
+                      )}
+                    >
+                      <Table.Td>
+                        <Checkbox
+                          aria-label="Select row"
+                          checked={selectedRows.includes(id)}
+                          onChange={(event) =>
+                            setSelectedRows(
+                              event.currentTarget.checked
+                                ? [...selectedRows, id]
+                                : selectedRows.filter((_id) => _id !== id)
+                            )
                           }
-                        )}
-                      >
-                        <Table.Td>
-                          <Checkbox
-                            aria-label="Select row"
-                            checked={selectedRows.includes(id)}
-                            onChange={(event) =>
-                              setSelectedRows(
-                                event.currentTarget.checked
-                                  ? [...selectedRows, id]
-                                  : selectedRows.filter((_id) => _id !== id)
-                              )
+                        />
+                      </Table.Td>
+                      <Table.Td>
+                        <Link
+                          href={html_url}
+                          target="_blank"
+                          className="flex gap-1 min-w-[120px] items-center"
+                        >
+                          <span>{name}</span>
+                          {fork && (
+                            <span>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 512 512"
+                              >
+                                <path
+                                  fill="currentColor"
+                                  d="m297.278 511.735l-.394-58.29c0-46.911 55.674-29.88 47.228-102.872L328.399 77.95c-.517-12.215-15.196-12.442-14.746-.222l-2.39 233.44c-1.214 19.023-23.778 15.874-23.06-4.124l-2.9-229.578c0-13.7-14.26-10.933-14.393 1.012l-3.891 234.168c-.455 14.918-22.522 13.467-22.06-.7l-3.306-234.854c0-10.6-13.59-11.645-13.875-1.26l-3.973 237.137c-1.06 16.197-22.854 14.018-21.725-3.474L199.351 77.76c.175-13.084-13.245-12.399-13.864 0l-17.786 284.25c-.418 61.217 47.152 41.87 48.233 94.188l-.06 55.802c-173.6-26.828-273.41-226.037-180.238-385.311c99.738-170.498 346.484-168.508 443.076 3.572c89.219 158.944-10.914 353.883-181.434 381.474"
+                                />
+                              </svg>
+                            </span>
+                          )}
+                        </Link>
+                      </Table.Td>
+                      <Table.Td>
+                        <Switch
+                          onLabel="YES"
+                          defaultChecked={isPrivate}
+                          disabled={isPatching}
+                          onChange={(e) => {
+                            changeRepoIsPrivate(data.find((i) => i.id === id)!);
+                          }}
+                        />
+                      </Table.Td>
+                      <Table.Td>
+                        <Switch
+                          onLabel="YES"
+                          defaultChecked={archived}
+                          disabled={isPatching}
+                          onChange={(e) => {
+                            changeRepoArchived(data.find((i) => i.id === id)!);
+                          }}
+                        />
+                      </Table.Td>
+                      <Table.Td className="hidden md:table-cell">
+                        <DescriptionModal
+                          accessToken={accessToken}
+                          description={description}
+                          repoItem={item}
+                        />
+                      </Table.Td>
+                      <Table.Td className="hidden md:table-cell">{stargazers_count}</Table.Td>
+                      <Table.Td className="hidden md:table-cell">{forks_count}</Table.Td>
+                      <Table.Td className="hidden md:table-cell">
+                        <button
+                          className="opacity-0 group-hover:opacity-100 text-red-500 pt-1 flex gap-1 items-center"
+                          disabled={isPatching}
+                          onClick={async () => {
+                            try {
+                              setIsPatching(true);
+                              await GithubAPI.repo.removeRepo({
+                                auth: accessToken,
+                                repo: name,
+                                owner: owner.login
+                              });
+                              toast.success('Delete the repository successfully');
+                              refresh();
+                            } catch (error) {
+                              // error info
+                              console.error(error);
+                              toast.error('Failed to delete the repository');
+                            } finally {
+                              setIsPatching(false);
                             }
-                          />
-                        </Table.Td>
-                        <Table.Td>
-                          <Link
-                            href={html_url}
-                            target="_blank"
-                            className="flex gap-1 min-w-[120px] items-center"
-                          >
-                            <span>{name}</span>
-                            {fork && (
-                              <span>
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="16"
-                                  height="16"
-                                  viewBox="0 0 512 512"
-                                >
-                                  <path
-                                    fill="currentColor"
-                                    d="m297.278 511.735l-.394-58.29c0-46.911 55.674-29.88 47.228-102.872L328.399 77.95c-.517-12.215-15.196-12.442-14.746-.222l-2.39 233.44c-1.214 19.023-23.778 15.874-23.06-4.124l-2.9-229.578c0-13.7-14.26-10.933-14.393 1.012l-3.891 234.168c-.455 14.918-22.522 13.467-22.06-.7l-3.306-234.854c0-10.6-13.59-11.645-13.875-1.26l-3.973 237.137c-1.06 16.197-22.854 14.018-21.725-3.474L199.351 77.76c.175-13.084-13.245-12.399-13.864 0l-17.786 284.25c-.418 61.217 47.152 41.87 48.233 94.188l-.06 55.802c-173.6-26.828-273.41-226.037-180.238-385.311c99.738-170.498 346.484-168.508 443.076 3.572c89.219 158.944-10.914 353.883-181.434 381.474"
-                                  />
-                                </svg>
-                              </span>
-                            )}
-                          </Link>
-                        </Table.Td>
-                        <Table.Td>
-                          <Switch
-                            onLabel="YES"
-                            defaultChecked={isPrivate}
-                            disabled={isPatching}
-                            onChange={(e) => {
-                              changeRepoIsPrivate(data.find((i) => i.id === id)!);
-                            }}
-                          />
-                        </Table.Td>
-                        <Table.Td>
-                          <Switch
-                            onLabel="YES"
-                            defaultChecked={archived}
-                            disabled={isPatching}
-                            onChange={(e) => {
-                              changeRepoArchived(data.find((i) => i.id === id)!);
-                            }}
-                          />
-                        </Table.Td>
-                        <Table.Td className="hidden md:table-cell">
-                          <textarea
-                            className="block w-full border-none bg-transparent outline-none resize-none"
-                            defaultValue={description}
-                            onBlur={(e) => {
-                              const { value } = e.target;
-                              if (value !== description) {
-                                GithubAPI.repo
-                                  .patchRepo({
-                                    auth: accessToken,
-                                    repo: name,
-                                    owner: owner.login,
-                                    schema: {
-                                      description: value
-                                    }
-                                  })
-                                  .then(() => {
-                                    toast.success('Change the repository description successfully');
-                                    refresh();
-                                  })
-                                  .catch((error) => {
-                                    // error info
-                                    console.error(error);
-                                    toast.error('Failed to change the repository description');
-                                  });
-                              }
-                            }}
-                          />
-                        </Table.Td>
-                        <Table.Td className="hidden md:table-cell">{stargazers_count}</Table.Td>
-                        <Table.Td className="hidden md:table-cell">{forks_count}</Table.Td>
-                        <Table.Td className="hidden md:table-cell">
-                          <button
-                            className="opacity-0 group-hover:opacity-100 text-red-500 pt-1 flex gap-1 items-center"
-                            disabled={isPatching}
-                            onClick={async () => {
-                              try {
-                                setIsPatching(true);
-                                await GithubAPI.repo.removeRepo({
-                                  auth: accessToken,
-                                  repo: name,
-                                  owner: owner.login
-                                });
-                                toast.success('Delete the repository successfully');
-                                refresh();
-                              } catch (error) {
-                                // error info
-                                console.error(error);
-                                toast.error('Failed to delete the repository');
-                              } finally {
-                                setIsPatching(false);
-                              }
-                            }}
-                          >
-                            <Trash2 size={16} />
-                          </button>
-                        </Table.Td>
-                      </Table.Tr>
-                    );
-                  }
-                )}
+                          }}
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      </Table.Td>
+                    </Table.Tr>
+                  );
+                })}
             </Table.Tbody>
           </Table>
         ) : (