diff --git a/src/Router.tsx b/src/Router.tsx
index c3cc5b18a..56d1bebe4 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense, lazy } from "react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Layout from "@/layouts/Layout";
-import RankList from "./pages/RankList";
 
 const Problem = lazy(() => import("@/pages/problem/Problem"));
 const AdminProblemList = lazy(() => import("@/pages/admin/ProblemList"));
@@ -10,6 +9,7 @@ const AdminUserList = lazy(() => import("@/pages/admin/UserList"));
 const ProblemList = lazy(() => import("@/pages/problem/ProblemList"));
 const JudgeList = lazy(() => import("@/pages//judge/JudgeList"));
 const Judge = lazy(() => import("@/pages/judge/Judge"));
+const RankList = lazy(() => import("@/pages/RankList"));
 const Login = lazy(() => import("@/pages/Login"));
 
 const Router: React.FC = () => {
@@ -24,11 +24,11 @@ const Router: React.FC = () => {
               <Route path="" element={<ProblemList />} />
               <Route path=":slug" element={<Problem />} />
             </Route>
+            <Route path="rank" element={<RankList />} />
             <Route path="judges">
               <Route path="" element={<JudgeList />} />
               <Route path=":uid" element={<Judge />} />
             </Route>
-            <Route path="rank" element={<RankList />} />
             <Route path="login" element={<Login />} />
             {/* Admin */}
             <Route path="admin">
diff --git a/src/apis/judge.ts b/src/apis/judge.ts
index f64a8e468..b0ce31b2a 100644
--- a/src/apis/judge.ts
+++ b/src/apis/judge.ts
@@ -19,9 +19,14 @@ export async function postJudge(slug: string, code: string, language: string) {
   return res.data;
 }
 
-export async function getJudgeList(limit?: number, offset?: number) {
+export async function getJudgeList(
+  limit?: number,
+  offset?: number,
+  selfOnly?: boolean,
+) {
   limit = limit || 10;
   offset = offset || 0;
+  selfOnly = selfOnly || false;
 
   let res = await axiosClient.get<{
     total: number;
@@ -30,6 +35,7 @@ export async function getJudgeList(limit?: number, offset?: number) {
     params: {
       limit,
       offset,
+      self_only: selfOnly,
     },
   });
   if (res.status !== 200) {
diff --git a/src/apis/user.ts b/src/apis/user.ts
index e32512407..127f28ec3 100644
--- a/src/apis/user.ts
+++ b/src/apis/user.ts
@@ -25,3 +25,50 @@ export async function getUserInfoList(
   }
   return res.data;
 }
+
+export async function deleteUser(account: string) {
+  let res = await axiosClient.delete(`/api/v1/user/${account}`);
+  if (res.status !== 200) {
+    throw Error("failed to delete user");
+  }
+}
+
+export async function grantUserRole(
+  account: string,
+  role: string,
+  domain?: string,
+) {
+  if (!domain) domain = "system";
+
+  let body = {
+    role,
+    domain,
+  };
+  let data = JSON.stringify(body);
+
+  let res = await axiosClient.post(`/api/v1/user/${account}/role`, data);
+  if (res.status !== 200) {
+    throw Error("failed to grant user role");
+  }
+}
+
+export async function revokeUserRole(
+  account: string,
+  role: string,
+  domain?: string,
+) {
+  if (!domain) domain = "system";
+
+  let body = {
+    role,
+    domain,
+  };
+  let data = JSON.stringify(body);
+
+  let res = await axiosClient.delete(`/api/v1/user/${account}/role`, {
+    data,
+  });
+  if (res.status !== 200) {
+    throw Error("failed to revoke user role");
+  }
+}
diff --git a/src/components/display/JudgeTable.tsx b/src/components/display/JudgeTable.tsx
index 45131fa54..80232164f 100644
--- a/src/components/display/JudgeTable.tsx
+++ b/src/components/display/JudgeTable.tsx
@@ -7,6 +7,8 @@ import BrandCPPIcon from "@/components/display/icons/tabler/BrandCPPIcon";
 import BrandPythonIcon from "@/components/display/icons/tabler/BrandPythonIcon";
 import { shortenString } from "@/utils/string";
 import UserAvatar from "./UserAvatar";
+import { useSelector } from "react-redux";
+import { userInfoSelector } from "@/store/selectors";
 
 export interface JudgeTableProps {
   data: JudgeServiceModel.JudgeInfo[];
@@ -17,6 +19,7 @@ export interface JudgeTableProps {
 const JudgeTable: React.FC<JudgeTableProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const userInfo = useSelector(userInfoSelector);
 
   return (
     <div className={props.className}>
@@ -37,10 +40,19 @@ const JudgeTable: React.FC<JudgeTableProps> = (props) => {
               key={idx}
               className={joinClasses(
                 props.data.length > 1 ? "border-base-content/10" : "border-0",
-                props.enableRouting && "hover cursor-pointer",
+                ((props.enableRouting && userInfo?.roles?.includes("admin")) ||
+                  userInfo?.roles?.includes("super") ||
+                  userInfo?.account === judge.user?.account) &&
+                  "hover cursor-pointer",
               )}
               onClick={() => {
-                if (props.enableRouting) navigate(judge.UID);
+                if (
+                  (props.enableRouting && userInfo?.roles?.includes("admin")) ||
+                  userInfo?.roles?.includes("super") ||
+                  userInfo?.account === judge.user?.account
+                ) {
+                  navigate(`/judges/${judge.UID}`);
+                }
               }}
             >
               <th>{shortenString(judge.UID, 8, false)}</th>
diff --git a/src/components/display/ProblemTable.tsx b/src/components/display/ProblemTable.tsx
index 39480dd49..dbe76b5d7 100644
--- a/src/components/display/ProblemTable.tsx
+++ b/src/components/display/ProblemTable.tsx
@@ -101,11 +101,11 @@ const ProblemTable: React.FC<ProblemTableProps> = (props) => {
 
 const ProblemTags: React.FC<{ tags: { name: string }[] }> = (props) => {
   return (
-    <div className="space-x-2">
+    <div>
       {props.tags.map((tag) => (
         <div
           key={tag.name}
-          className="badge border-0 bg-base-300 font-semibold text-base-content/80"
+          className="badge m-1 border-0 bg-base-300 font-semibold text-base-content/80"
         >
           {tag.name}
         </div>
diff --git a/src/components/display/UserTable.tsx b/src/components/display/UserTable.tsx
index d7ae626a9..fac434198 100644
--- a/src/components/display/UserTable.tsx
+++ b/src/components/display/UserTable.tsx
@@ -6,6 +6,9 @@ import ConfirmDialog from "../control/ConfirmDialog";
 import TrashIcon from "./icons/tabler/TrashIcon";
 import { joinClasses } from "@/utils/common";
 import UserCogIcon from "./icons/tabler/UserCogIcon";
+import * as UserService from "@/apis/user";
+import { useSelector } from "react-redux";
+import { userInfoSelector } from "@/store/selectors";
 
 export interface UserTableProps {
   data: UserServiceModel.UserInfo[];
@@ -15,6 +18,9 @@ export interface UserTableProps {
 
 const UserTable: React.FC<UserTableProps> = (props) => {
   const { t } = useTranslation();
+  const [deletingAccount, setDeletingAccount] = React.useState<string | null>(
+    null,
+  );
 
   return (
     <>
@@ -47,7 +53,12 @@ const UserTable: React.FC<UserTableProps> = (props) => {
                 </td>
                 {props.showActions && (
                   <td className="p-2">
-                    <UserActions userInfo={userInfo} onClickDelete={() => {}} />
+                    <UserActions
+                      userInfo={userInfo}
+                      onClickDelete={() => {
+                        setDeletingAccount(userInfo.account);
+                      }}
+                    />
                   </td>
                 )}
               </tr>
@@ -60,7 +71,15 @@ const UserTable: React.FC<UserTableProps> = (props) => {
         title="Confirm"
         message="Are you sure to delete this user?"
         onClickConfirm={() => {
-          window.location.reload();
+          if (deletingAccount) {
+            UserService.deleteUser(deletingAccount)
+              .then(() => {
+                window.location.reload();
+              })
+              .catch((err) => {
+                console.error(err);
+              });
+          }
         }}
       />
     </>
@@ -92,24 +111,50 @@ interface ActionsProps {
 }
 
 const UserActions: React.FC<ActionsProps> = (props) => {
+  const userInfo = useSelector(userInfoSelector);
+
   const onClickDelete = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
     props.onClickDelete();
     const modal = document.getElementById(
-      "delete_confirm_modal",
+      "user_delete_confirm_modal",
     ) as HTMLDialogElement;
     modal?.showModal();
   };
 
   return (
     <div className="flex space-x-1">
-      <button className="btn btn-square btn-ghost btn-sm rounded">
+      <button
+        className={joinClasses(
+          "btn btn-square btn-ghost btn-sm rounded",
+          (props.userInfo.roles?.includes("super") ||
+            props.userInfo.account === userInfo?.account) &&
+            "btn-disabled",
+        )}
+        onClick={() => {
+          if (props.userInfo.roles?.includes("admin")) {
+            UserService.revokeUserRole(props.userInfo.account, "admin").catch(
+              (err) => {
+                console.error(err);
+              },
+            );
+          } else if (!props.userInfo.roles?.includes("super")) {
+            UserService.grantUserRole(props.userInfo.account, "admin").catch(
+              (err) => {
+                console.error(err);
+              },
+            );
+          }
+          window.location.reload();
+        }}
+      >
         <UserCogIcon
           className={joinClasses(
             "h-5 w-5",
-            props.userInfo.roles?.includes("admin")
+            props.userInfo.roles?.includes("admin") ||
+              props.userInfo.roles?.includes("super")
               ? "text-success"
               : "text-base-content",
           )}
diff --git a/src/hooks/judge.ts b/src/hooks/judge.ts
index 9e7528a54..541f730fc 100644
--- a/src/hooks/judge.ts
+++ b/src/hooks/judge.ts
@@ -64,10 +64,11 @@ export const useJudgeList = () => {
   const [total, setTotal] = useState<number>(0);
   const [limit, setLimit] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);
+  const [selfOnly, setSelfOnly] = useState<boolean>(false);
   const [judgeList, setJudgeList] = useState<JudgeServiceModel.JudgeInfo[]>([]);
 
   const getJudgeListFromServer = () => {
-    JudgeService.getJudgeList()
+    JudgeService.getJudgeList(limit, offset, selfOnly)
       .then((res) => {
         setJudgeList(res.list);
         setTotal(res.total);
@@ -86,7 +87,7 @@ export const useJudgeList = () => {
       });
   };
 
-  useEffect(getJudgeListFromServer, [dispatch, limit, offset, t]);
+  useEffect(getJudgeListFromServer, [dispatch, limit, offset, t, selfOnly]);
 
   function getJudgeList() {
     return judgeList;
@@ -105,5 +106,16 @@ export const useJudgeList = () => {
     setOffset(offset);
   }
 
-  return { getJudgeList, refreshJudgeList, getPageCount, setPagenation };
+  function getSelfOnly() {
+    return selfOnly;
+  }
+
+  return {
+    getJudgeList,
+    refreshJudgeList,
+    getPageCount,
+    setPagenation,
+    getSelfOnly,
+    setSelfOnly,
+  };
 };
diff --git a/src/hooks/user.ts b/src/hooks/user.ts
index bf034ad4d..c0dc528d4 100644
--- a/src/hooks/user.ts
+++ b/src/hooks/user.ts
@@ -18,8 +18,8 @@ export const useUserInfoList = () => {
   useEffect(() => {
     UserService.getUserInfoList(limit, offset)
       .then((res) => {
-        setUserInfoList(res.list);
-        setTotal(res.total);
+        if (res.list) setUserInfoList(res.list);
+        if (res.total) setTotal(res.total);
       })
       .catch((err) => {
         dispatch({
diff --git a/src/i18n/resources/zh_CN.ts b/src/i18n/resources/zh_CN.ts
index d50e328ea..d6e920ecd 100644
--- a/src/i18n/resources/zh_CN.ts
+++ b/src/i18n/resources/zh_CN.ts
@@ -23,19 +23,33 @@ const ZH_CN_TRANSLATIONS: Resource = {
     Theme: "主题",
     Create: "创建",
     Cancel: "取消",
+    Confirm: "确认",
+    Internal: "内部",
+    Actions: "操作",
+    Avatar: "头像",
+    Name: "名称",
+    Account: "账号",
+    Roles: "角色",
 
     "or Register": "或注册",
     "Welcome!": "欢迎！",
+    "Welcome to OJ LAB!": "欢迎来到 OJ LAB！",
     "input title": "输入标题",
     "Problem Title": "题目标题",
     "Submit Count": "提交数",
     "Submit Time": "提交时间",
     "Accept Count": "通过数",
     "Accept Rate": "通过率",
+    "Problem Management": "题目管理",
+    "User Management": "用户管理",
     "Your solution": "你的解答",
     "Just look at yourself": "只看自己",
     "Click and confirm submission": "点击并确认提交",
     "Please login first": "请先登录",
+    "OAuth Login": "OAuth 登录",
+    "Password Login": "密码登录",
+    "Sign In with GitHub": "使用 GitHub 登录",
+    "Give us idea & feedback": "欢迎给我们想法和反馈",
 
     "Failed to fetch rank list": "获取排名列表失败",
     "Failed to fetch user list": "获取用户列表失败",
diff --git a/src/layouts/Drawer.tsx b/src/layouts/Drawer.tsx
index fd52642e7..9e88872f9 100644
--- a/src/layouts/Drawer.tsx
+++ b/src/layouts/Drawer.tsx
@@ -36,7 +36,7 @@ const APPNavigation: PageMenuItem[] = [
 
 const AdminNavigation: PageMenuItem[] = [
   {
-    name: "Problem Packages",
+    name: "Problem Management",
     href: "/admin/problems",
     icon: <PackageIcon className="h-6 w-6 shrink-0" />,
   },
@@ -72,12 +72,14 @@ export const Drawer: React.FC<DrawerProps> = (props) => {
   const dispatch = useDispatch();
   const [open, setOpen] = React.useState<boolean>(true);
   const userInfo = useSelector(userInfoSelector);
-  const isAdmin = userInfo?.roles?.includes("admin") ?? false;
+  const isAdmin =
+    (userInfo?.roles?.includes("admin") ||
+      userInfo?.roles?.includes("super")) ??
+    false;
 
   useEffect(() => {
     dispatch(setIsDrawerOpen(open));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [dispatch, open]);
 
   return (
     <div
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index 3940c0620..2d6a0d782 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -1,4 +1,8 @@
+import { useTranslation } from "react-i18next";
+
 const Footer: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="footer flex w-full flex-col justify-center gap-1 text-xs text-base-content/80">
       <p>©2024 OJ Lab</p>
@@ -6,6 +10,12 @@ const Footer: React.FC = () => {
         Github:
         <a href="https://github.com/oj-lab">https://github.com/oj-lab</a>
       </p>
+      <p className="flex flex-row">
+        {t("Give us idea & feedback")}:
+        <a href="https://github.com/oj-lab/roadmap/discussions">
+          https://github.com/oj-lab/roadmap/discussions
+        </a>
+      </p>
     </div>
   );
 };
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index aa429bbd8..2913e4939 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -30,13 +30,13 @@ const Layout: React.FC<LayoutProps> = (props) => {
       <Drawer>
         <div className="flex flex-auto flex-col items-center overflow-auto bg-[--content-background]">
           <Header />
-          <main className="flex h-full w-full flex-col items-stretch gap-2 overflow-auto px-12 pb-6 pt-6">
+          <main className="flex h-full w-full flex-col items-stretch gap-2 overflow-auto px-4 pb-6 pt-6 sm:px-12">
             <PageBreadcrumbs />
             {props.children}
             {!props.children && <Outlet />}
             <Footer />
           </main>
-          <div className="toast toast-center toast-top w-1/3 gap-1">
+          <div className="toast toast-center toast-top w-2/3 gap-1 sm:w-1/3">
             {Object.keys(messageMap).map((key, idx) => {
               if (idx >= 3) return null;
               let message = messageMap[key];
diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
index d0ad3475a..dc729c77f 100644
--- a/src/layouts/Navbar.tsx
+++ b/src/layouts/Navbar.tsx
@@ -11,7 +11,7 @@ const Navbar: React.FC = () => {
 
   return (
     <div className="navbar border-b border-base-content/10 bg-base-100 lg:px-8">
-      <div className="ml-80 flex flex-1 justify-end">
+      <div className="flex flex-1 justify-end">
         <div className="flex flex-row items-center justify-center gap-2">
           <LanguageMenu />
           <DarkLightToggle />
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 14f827ba8..a210b0be3 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -6,8 +6,10 @@ import EyeClosedIcon from "@/components/display/icons/tabler/EyeClosedIcon";
 import OJLabIcon from "@/components/display/icons/OJLabIcon";
 import PasswordIcon from "@/components/display/icons/tabler/PasswordIcon";
 import OAuthIcon from "@/components/display/icons/tabler/OauthIcon";
+import { useTranslation } from "react-i18next";
 
 const Login: React.FC = () => {
+  const { t } = useTranslation();
   const [showPassaword, setShowPassword] = React.useState<boolean>(false);
   const [account, setAccount] = React.useState<string>("");
   const [password, setPassword] = React.useState<string>("");
@@ -20,11 +22,11 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center gap-4 bg-base-100 p-12">
+    <div className="flex flex-auto flex-col items-center justify-center gap-4 bg-base-100 p-12">
       <div className="flex flex-col">
         <OJLabIcon className="h-48 w-auto" />
         <h1 className="mb-4 mt-[-24px] self-center text-2xl font-bold">
-          Welcome to OJ LAB!
+          {t("Welcome to OJ LAB!")}
         </h1>
       </div>
 
@@ -32,7 +34,7 @@ const Login: React.FC = () => {
         {loginMode === "oauth" ? (
           <button className="btn btn-outline" onClick={redirectToOAuthGitHub}>
             <GitHubIcon className="w-8 fill-current" />
-            Sign in with GitHub
+            {t("Sign in with GitHub")}
           </button>
         ) : (
           <>
@@ -95,11 +97,10 @@ const Login: React.FC = () => {
                 <PasswordIcon className="h-4 w-auto text-base-content/80" />
                 <div>
                   <span className="!text-xs !font-normal text-base-content/80">
-                    Password Login
-                  </span>
+                    {t("Password Login")}
+                  </span>{" "}
                   <span className="!text-xs !font-normal text-base-content/60">
-                    {" "}
-                    (Internal)
+                    {`(${t("Internal")})`}
                   </span>
                 </div>
               </>
@@ -107,7 +108,7 @@ const Login: React.FC = () => {
               <>
                 <OAuthIcon className="h-4 w-auto text-slate-500" />
                 <span className="text-start !text-xs !font-normal text-slate-500">
-                  OAuth Login
+                  {t("OAuth Login")}
                 </span>
               </>
             )}
diff --git a/src/pages/RankList.tsx b/src/pages/RankList.tsx
index 8bab78303..bcb95a950 100644
--- a/src/pages/RankList.tsx
+++ b/src/pages/RankList.tsx
@@ -7,8 +7,8 @@ const RankList: React.FC = () => {
 
   return (
     <div className="flex w-full flex-auto flex-col gap-8 sm:flex-row">
-      <div className="flex w-full flex-col gap-2">
-        <div className="h-fit w-full rounded border border-base-content/10 bg-base-100">
+      <div className="h-fit w-full overflow-auto rounded border border-base-content/10 bg-base-100">
+        <div className="flex w-full flex-col gap-2">
           <RankTable data={rankList} />
         </div>
       </div>
diff --git a/src/pages/admin/ProblemList.tsx b/src/pages/admin/ProblemList.tsx
index f14e410bd..b1016d2e2 100644
--- a/src/pages/admin/ProblemList.tsx
+++ b/src/pages/admin/ProblemList.tsx
@@ -29,7 +29,7 @@ const ProblemList: React.FC = () => {
 
   return (
     <div className="card card-bordered flex w-full flex-col rounded border-base-content/10 bg-base-100">
-      <div className="flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between ">
         <ProblemSearch
           onChangeTitle={(t) => {
             setSearchingTitle(t);
diff --git a/src/pages/admin/UserList.tsx b/src/pages/admin/UserList.tsx
index 99cd75bcb..bbf598133 100644
--- a/src/pages/admin/UserList.tsx
+++ b/src/pages/admin/UserList.tsx
@@ -14,8 +14,7 @@ const UserList: React.FC = () => {
 
   useEffect(() => {
     setPagenation(countPerPage, page * countPerPage);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [countPerPage, page]);
+  }, [countPerPage, page, setPagenation]);
 
   return (
     <div className="card card-bordered flex w-full flex-col rounded border-base-content/10 bg-base-100">
diff --git a/src/pages/judge/JudgeList.tsx b/src/pages/judge/JudgeList.tsx
index 018dc8361..2228a893d 100644
--- a/src/pages/judge/JudgeList.tsx
+++ b/src/pages/judge/JudgeList.tsx
@@ -7,8 +7,14 @@ import React, { useEffect } from "react";
 const countPerPageSelections = [10, 25, 50];
 
 const JudgeList: React.FC = () => {
-  const { getJudgeList, refreshJudgeList, getPageCount, setPagenation } =
-    useJudgeList();
+  const {
+    getJudgeList,
+    refreshJudgeList,
+    getPageCount,
+    setPagenation,
+    getSelfOnly,
+    setSelfOnly,
+  } = useJudgeList();
   const { t } = useTranslation();
   // useEvent();
   const refreshSeconds = 5;
@@ -33,15 +39,19 @@ const JudgeList: React.FC = () => {
 
   useEffect(() => {
     setPagenation(countPerPage, page * countPerPage);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [countPerPage, page]);
+  }, [countPerPage, page, setPagenation]);
 
   return (
     <div className="flex w-full flex-auto flex-col gap-8 sm:flex-row">
       <div className="h-fit w-full overflow-auto rounded border border-base-content/10 bg-base-100">
         <div className="flex items-center justify-between gap-2 px-4 pb-2 pt-4">
           <label className="label cursor-pointer p-0">
-            <input type="checkbox" className="toggle toggle-sm" />
+            <input
+              type="checkbox"
+              className="toggle toggle-sm"
+              checked={getSelfOnly()}
+              onChange={(e) => setSelfOnly(e.target.checked)}
+            />
             <span className="label-text ml-2">
               {t("Just look at yourself")}
             </span>
diff --git a/src/pages/problem/ProblemList.tsx b/src/pages/problem/ProblemList.tsx
index a3f79d81e..ac0d992c1 100644
--- a/src/pages/problem/ProblemList.tsx
+++ b/src/pages/problem/ProblemList.tsx
@@ -30,8 +30,8 @@ const ProblemList: React.FC = () => {
 
   return (
     <div className="flex w-full flex-auto flex-col gap-8 sm:flex-row">
-      <div className="flex w-full flex-col gap-2">
-        <div className="h-fit w-full rounded border border-base-content/10 bg-base-100">
+      <div className="h-fit w-full overflow-auto rounded border border-base-content/10 bg-base-100">
+        <div className="flex w-full flex-col gap-2">
           <ProblemSearch
             onChangeTitle={(t) => {
               setSearchingTitle(t);