diff --git a/src/oj/contest/components/ContestInfo.vue b/src/oj/contest/components/ContestInfo.vue
index 3fe627a..446754e 100644
--- a/src/oj/contest/components/ContestInfo.vue
+++ b/src/oj/contest/components/ContestInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { parseTime } from "utils/functions"
 import { useContestStore } from "oj/store/contest"
-import ContestTypeVue from "~/shared/ContestType.vue"
+import ContestType from "~/shared/ContestType.vue"
 
 const contestStore = useContestStore()
 </script>
@@ -27,7 +27,7 @@ const contestStore = useContestStore()
         {{ parseTime(contestStore.contest.end_time, "YYYY年M月D日 hh:mm:ss") }}
       </n-descriptions-item>
       <n-descriptions-item label="比赛类型">
-        <ContestTypeVue :contest="contestStore.contest" />
+        <ContestType :contest="contestStore.contest" />
       </n-descriptions-item>
       <n-descriptions-item label="发起人">
         {{ contestStore.contest.created_by.username }}
diff --git a/src/oj/contest/detail.vue b/src/oj/contest/detail.vue
index 0ae4f02..9839941 100644
--- a/src/oj/contest/detail.vue
+++ b/src/oj/contest/detail.vue
@@ -29,14 +29,17 @@ const passwordFormVisible = computed(
 </script>
 
 <template>
-  <div v-if="contestStore.contest">
-    <n-space class="title" align="center" justify="space-between">
+  <n-space vertical v-if="contestStore.contest">
+    <n-space align="center" justify="space-between">
       <n-space align="center">
         <h2 class="contestTitle">{{ contestStore.contest.title }}</h2>
         <n-icon size="large" v-if="contestStore.isPrivate" class="lockIcon">
           <i-ep-lock />
         </n-icon>
-        <n-tag :type="CONTEST_STATUS[contestStore.contestStatus]['type']">
+        <n-tag
+          size="small"
+          :type="CONTEST_STATUS[contestStore.contestStatus]['type']"
+        >
           {{ contestStore.countdown }}
         </n-tag>
       </n-space>
@@ -67,14 +70,10 @@ const passwordFormVisible = computed(
       </n-form-item>
     </n-form>
     <router-view></router-view>
-  </div>
+  </n-space>
 </template>
 
 <style scoped>
-.title {
-  margin-bottom: 16px;
-}
-
 .contestTitle {
   font-weight: 500;
   margin: 0;
diff --git a/src/oj/contest/list.vue b/src/oj/contest/list.vue
index bc27a87..d930958 100644
--- a/src/oj/contest/list.vue
+++ b/src/oj/contest/list.vue
@@ -119,31 +119,29 @@ function rowProps(row: Contest) {
 }
 </script>
 <template>
-  <n-form label-placement="left" :inline="isDesktop">
-    <n-form-item label="状态">
-      <n-select
-        class="select"
-        :options="options"
-        v-model:value="query.status"
-      />
-    </n-form-item>
-    <n-form-item label="搜索比赛标题">
-      <n-input placeholder="输入后回车或点击搜索" clearable @change="search" />
-    </n-form-item>
-    <n-form-item>
-      <n-space>
-        <n-button @click="search(query.keyword)">搜索</n-button>
-        <n-button @click="clear">重置</n-button>
-      </n-space>
-    </n-form-item>
-  </n-form>
-  <n-data-table
-    size="small"
-    striped
-    :columns="columns"
-    :data="data"
-    :row-props="rowProps"
-  />
+  <n-space>
+    <n-form :show-feedback="false" label-placement="left" inline>
+      <n-form-item label="比赛状态">
+        <n-select
+          class="select"
+          :options="options"
+          v-model:value="query.status"
+        />
+      </n-form-item>
+      <n-form-item label="搜索">
+        <n-input clearable @change="search" />
+      </n-form-item>
+    </n-form>
+    <n-form label-placement="left" inline>
+      <n-form-item>
+        <n-space>
+          <n-button @click="search(query.keyword)">搜索</n-button>
+          <n-button @click="clear">重置</n-button>
+        </n-space>
+      </n-form-item>
+    </n-form>
+  </n-space>
+  <n-data-table striped :columns="columns" :data="data" :row-props="rowProps" />
   <Pagination
     v-model:limit="query.limit"
     v-model:page="query.page"
diff --git a/src/oj/contest/pages/problems.vue b/src/oj/contest/pages/problems.vue
index 9fadc94..35b01a1 100644
--- a/src/oj/contest/pages/problems.vue
+++ b/src/oj/contest/pages/problems.vue
@@ -34,7 +34,6 @@ function rowProps(row: ProblemFiltered) {
 <template>
   <n-data-table
     striped
-    size="small"
     :data="contestStore.problems"
     :columns="problemsColumns"
     :row-props="rowProps"
diff --git a/src/oj/contest/pages/rank.vue b/src/oj/contest/pages/rank.vue
index e285df1..00a22bf 100644
--- a/src/oj/contest/pages/rank.vue
+++ b/src/oj/contest/pages/rank.vue
@@ -165,7 +165,6 @@ onMounted(() => {
     striped
     :single-line="false"
     :scroll-x="1200"
-    size="small"
     :columns="columns"
     :data="data"
   />
diff --git a/src/oj/problem/components/ProblemContent.vue b/src/oj/problem/components/ProblemContent.vue
index 6898cac..472e92f 100644
--- a/src/oj/problem/components/ProblemContent.vue
+++ b/src/oj/problem/components/ProblemContent.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Promotion, CloseBold, Select } from "@element-plus/icons-vue"
 import Copy from "~/shared/Copy.vue"
 import { code } from "oj/composables/code"
 import { SOURCES } from "utils/constants"
@@ -78,18 +77,22 @@ async function test(sample: Sample, index: number) {
   })
 }
 
-const icon = (status: ProblemStatus) =>
-  ({
-    not_test: Promotion,
-    failed: CloseBold,
-    passed: Select,
-  }[status])
-const type = (status: ProblemStatus) =>
-  ({
+function label(status: ProblemStatus, loading: boolean) {
+  if (loading) return "测试中"
+  return {
+    not_test: "测试",
+    failed: "不通过",
+    passed: "通过",
+  }[status]
+}
+
+function type(status: ProblemStatus) {
+  return {
     not_test: "",
     failed: "error",
     passed: "success",
-  }[status] as "warning" | "error" | "success")
+  }[status] as "warning" | "error" | "success"
+}
 </script>
 
 <template>
@@ -120,15 +123,12 @@ const type = (status: ProblemStatus) =>
       <n-tooltip trigger="hover">
         <template #trigger>
           <n-button
+            size="small"
             :type="type(sample.status)"
             :disabled="disabled"
-            :loading="sample.loading"
-            circle
             @click="test(sample, index)"
           >
-            <template #icon>
-              <component :is="icon(sample.status)"></component>
-            </template>
+            {{ label(sample.status, sample.loading) }}
           </n-button>
         </template>
         点击测试
diff --git a/src/oj/problem/components/ProblemInfo.vue b/src/oj/problem/components/ProblemInfo.vue
index aac8b1f..8ae9d62 100644
--- a/src/oj/problem/components/ProblemInfo.vue
+++ b/src/oj/problem/components/ProblemInfo.vue
@@ -65,7 +65,7 @@ const options = {
     </n-descriptions-item>
     <n-descriptions-item :span="3" label="标签">
       <n-space>
-        <n-tag type="info" v-for="tag in problem.tags" :key="tag">
+        <n-tag size="small" type="info" v-for="tag in problem.tags" :key="tag">
           {{ tag }}
         </n-tag>
       </n-space>
diff --git a/src/oj/problem/components/Submit.vue b/src/oj/problem/components/Submit.vue
index 3e95dda..0deaa5c 100644
--- a/src/oj/problem/components/Submit.vue
+++ b/src/oj/problem/components/Submit.vue
@@ -227,7 +227,6 @@ watch(
       <n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
       <n-data-table
         v-if="infoTable.length"
-        size="small"
         striped
         :data="infoTable"
         :columns="columns"
diff --git a/src/oj/problem/list.vue b/src/oj/problem/list.vue
index 6e24c9a..87356a3 100644
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -2,7 +2,6 @@
 import { useUserStore } from "~/shared/store/user"
 import { filterEmptyValue, getTagColor } from "utils/functions"
 import { ProblemFiltered } from "utils/types"
-import { isMobile } from "~/shared/composables/breakpoints"
 import { getProblemList, getRandomProblemID } from "oj/api"
 import Pagination from "~/shared/Pagination.vue"
 import { DataTableColumn, NSpace, NTag } from "naive-ui"
@@ -169,8 +168,8 @@ function rowProps(row: ProblemFiltered) {
 </script>
 
 <template>
-  <n-space :vertical="isMobile">
-    <n-form inline label-placement="left">
+  <n-space>
+    <n-form :show-feedback="false" inline label-placement="left">
       <n-form-item label="难度">
         <n-select
           class="select"
@@ -178,12 +177,8 @@ function rowProps(row: ProblemFiltered) {
           :options="difficultyOptions"
         />
       </n-form-item>
-      <n-form-item>
-        <n-input
-          placeholder="输入编号或标题后回车"
-          clearable
-          @change="search"
-        />
+      <n-form-item label="搜索">
+        <n-input clearable @change="search" />
       </n-form-item>
     </n-form>
     <n-form inline label-placement="left">
@@ -212,7 +207,6 @@ function rowProps(row: ProblemFiltered) {
   <n-data-table
     class="table"
     striped
-    size="small"
     :data="problems"
     :columns="columns"
     :row-props="rowProps"
diff --git a/src/oj/rank/components/Chart.vue b/src/oj/rank/components/Chart.vue
index ce3caab..b66dc37 100644
--- a/src/oj/rank/components/Chart.vue
+++ b/src/oj/rank/components/Chart.vue
@@ -69,6 +69,7 @@ const data = computed(() => ({
 }))
 
 const options = {
+  maintainAspectRatio: false,
   plugins: {
     title: {
       text: "全校前十名的用户（不包括超管）",
@@ -79,10 +80,13 @@ const options = {
 }
 </script>
 <template>
-  <Bar class="chart" :data="data" :options="options" />
+  <div class="chart">
+    <Bar :data="data" :options="options" />
+  </div>
 </template>
 <style scoped>
 .chart {
-  margin-bottom: 24px;
+  height: 400px;
+  margin-bottom: 20px;
 }
 </style>
diff --git a/src/oj/rank/list.vue b/src/oj/rank/list.vue
index 9832481..5b8fe10 100644
--- a/src/oj/rank/list.vue
+++ b/src/oj/rank/list.vue
@@ -73,7 +73,7 @@ onMounted(listRanks)
 
 <template>
   <Chart v-if="!!chart.length" :rankData="chart" />
-  <n-data-table striped size="small" :data="data" :columns="columns" />
+  <n-data-table striped :data="data" :columns="columns" />
   <Pagination
     :total="total"
     v-model:page="query.page"
diff --git a/src/oj/submission/detail.vue b/src/oj/submission/detail.vue
index 40aeb60..7097dd0 100644
--- a/src/oj/submission/detail.vue
+++ b/src/oj/submission/detail.vue
@@ -67,7 +67,12 @@ onMounted(init)
     </n-alert>
     <n-card embedded>
       <n-space justify="end">
-        <n-button type="primary" @click="handleCopy(submission!.code)">
+        <n-button
+          quaternary
+          class="copyBtn"
+          type="primary"
+          @click="handleCopy(submission!.code)"
+        >
           {{ copied ? "已复制" : "复制代码" }}
         </n-button>
       </n-space>
@@ -90,4 +95,8 @@ onMounted(init)
 .code {
   font-size: 20px;
 }
+
+.copyBtn {
+  margin-bottom: 16px;
+}
 </style>
diff --git a/src/oj/submission/list.vue b/src/oj/submission/list.vue
index a8a71fc..a55d25b 100644
--- a/src/oj/submission/list.vue
+++ b/src/oj/submission/list.vue
@@ -128,6 +128,7 @@ const columns = computed(() => {
     {
       title: "编号",
       key: "id",
+      minWidth: 160,
       render: (row) => {
         if (row.show_link) {
           return h(
@@ -215,6 +216,7 @@ const columns = computed(() => {
         h(
           NButton,
           {
+            quaternary: true,
             size: "small",
             type: "primary",
             onClick: () => rejudge(row.id),
@@ -227,28 +229,32 @@ const columns = computed(() => {
 })
 </script>
 <template>
-  <n-form :inline="isDesktop" label-placement="left">
-    <n-form-item label="提交状态">
-      <n-select
-        class="select"
-        v-model:value="query.result"
-        :options="options"
-      />
-    </n-form-item>
-    <n-form-item label="只看自己">
-      <n-switch v-model:value="query.myself" />
-    </n-form-item>
-    <n-form-item label="搜索用户">
-      <n-input @change="search" clearable placeholder="输入后回车或点击搜索" />
-    </n-form-item>
-    <n-form-item>
-      <n-space>
-        <n-button @click="search(query.username)">搜索</n-button>
-        <n-button @click="clear">重置</n-button>
-      </n-space>
-    </n-form-item>
-  </n-form>
-  <n-data-table striped size="small" :columns="columns" :data="submissions" />
+  <n-space>
+    <n-form :show-feedback="false" inline label-placement="left">
+      <n-form-item label="提交状态">
+        <n-select
+          class="select"
+          v-model:value="query.result"
+          :options="options"
+        />
+      </n-form-item>
+      <n-form-item label="只看自己">
+        <n-switch v-model:value="query.myself" />
+      </n-form-item>
+    </n-form>
+    <n-form inline label-placement="left">
+      <n-form-item label="搜索用户">
+        <n-input clearable @change="search" />
+      </n-form-item>
+      <n-form-item>
+        <n-space>
+          <n-button @click="search(query.username)">搜索</n-button>
+          <n-button @click="clear">重置</n-button>
+        </n-space>
+      </n-form-item>
+    </n-form>
+  </n-space>
+  <n-data-table striped :columns="columns" :data="submissions" />
   <Pagination
     :total="total"
     v-model:limit="query.limit"
diff --git a/src/shared/Login.vue b/src/shared/Login.vue
index 0fd6f80..8119902 100644
--- a/src/shared/Login.vue
+++ b/src/shared/Login.vue
@@ -6,7 +6,7 @@ import type { FormRules } from "naive-ui"
 
 const userStore = useUserStore()
 const loginRef = ref()
-const [isLoading] = useToggle()
+const [isLoading, toggleLoading] = useToggle()
 const msg = ref("")
 const form = reactive({
   username: "",
@@ -21,11 +21,11 @@ const rules: FormRules = {
 }
 
 async function submit() {
-  loginRef.value?.validate(async (errors: FormRules | undefined) => {
+  loginRef.value!.validate(async (errors: FormRules | undefined) => {
     if (!errors) {
       try {
         msg.value = ""
-        isLoading.value = true
+        toggleLoading(true)
         await login(form)
       } catch (err: any) {
         if (err.data === "Your account has been disabled") {
@@ -36,7 +36,7 @@ async function submit() {
           msg.value = "无法登录"
         }
       } finally {
-        isLoading.value = false
+        toggleLoading(false)
       }
       if (!msg.value) {
         toggleLogin(false)
@@ -85,7 +85,7 @@ function goSignup() {
           <n-button type="primary" :loading="isLoading" @click="submit">
             登录
           </n-button>
-          <n-button @click="goSignup">没有账号，立即注册</n-button>
+          <n-button @click="goSignup">没有账号？立即注册</n-button>
         </n-space>
       </n-form-item>
     </n-form>
diff --git a/src/shared/Pagination.vue b/src/shared/Pagination.vue
index 7cf9e3e..9536704 100644
--- a/src/shared/Pagination.vue
+++ b/src/shared/Pagination.vue
@@ -41,7 +41,7 @@ watch(page, () => emit("update:page", page))
 </template>
 <style scoped>
 .margin {
-  margin-top: 24px;
+  margin: 20px 0;
 }
 .right {
   float: right;
diff --git a/src/shared/Signup.vue b/src/shared/Signup.vue
index 7e95f77..4125f9d 100644
--- a/src/shared/Signup.vue
+++ b/src/shared/Signup.vue
@@ -1,16 +1,43 @@
 <script setup lang="ts">
-import type { FormRules } from "naive-ui"
+import { getCaptcha, signup, login } from "./api"
 import { signupModal, toggleLogin, toggleSignup } from "./composables/modal"
+import { useUserStore } from "./store/user"
+import type { FormItemRule, FormRules } from "naive-ui"
+
+const userStore = useUserStore()
+const signupRef = ref()
+const captchaSrc = ref("")
 
 const form = reactive({
   username: "",
+  email: "",
   password: "",
   passwordAgain: "",
-  email: "",
+  captcha: "",
 })
-const rules: FormRules = {}
 
-const [isLoading] = useToggle()
+const rules: FormRules = {
+  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
+  email: [{ required: true, message: "邮箱必填", trigger: "blur" }],
+  password: [
+    { required: true, message: "密码必填", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
+  ],
+  passwordAgain: [
+    { required: true, message: "密码必填", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
+    {
+      validator: (_: FormItemRule, value: string) => value === form.password,
+      message: "两次密码输入不一致",
+      trigger: "blur",
+    },
+  ],
+  captcha: [
+    { required: true, message: "验证码必填", trigger: "blur", min: 1, max: 10 },
+  ],
+}
+
+const [isLoading, toggleLoading] = useToggle()
 const msg = ref("")
 
 function goLogin() {
@@ -18,7 +45,50 @@ function goLogin() {
   toggleSignup(false)
 }
 
-function submit() {}
+function submit() {
+  signupRef.value!.validate(async (errors: FormRules | undefined) => {
+    if (!errors) {
+      try {
+        msg.value = ""
+        toggleLoading(true)
+        await signup({
+          username: form.username,
+          email: form.email,
+          password: form.password,
+          captcha: form.captcha,
+        })
+      } catch (err: any) {
+        if (err.data === "Invalid captcha") {
+          msg.value = "验证码不正确"
+        } else if (err.data === "Username already exists") {
+          msg.value = "用户名已存在"
+        } else if (err.data === "Email already exists") {
+          msg.value = "邮箱已存在"
+        } else {
+          msg.value = "无法注册"
+        }
+        getCaptchaSrc()
+        form.captcha = ""
+      } finally {
+        toggleLoading(false)
+      }
+      if (!msg.value) {
+        toggleSignup(false)
+        await login({ username: form.username, password: form.password })
+        userStore.getMyProfile()
+      }
+    }
+  })
+}
+
+async function getCaptchaSrc() {
+  const res = await getCaptcha()
+  captchaSrc.value = res.data
+}
+
+watch(signupModal, (v) => {
+  if (v) getCaptchaSrc()
+})
 </script>
 
 <template>
@@ -55,7 +125,7 @@ function submit() {}
           name="signup password"
         />
       </n-form-item>
-      <n-form-item label="确认密码" path="password">
+      <n-form-item label="确认密码" path="passwordAgain">
         <n-input
           v-model:value="form.passwordAgain"
           clearable
@@ -63,11 +133,21 @@ function submit() {}
           name="signup password again"
         />
       </n-form-item>
+      <n-form-item label="验证码" path="captcha">
+        <n-space>
+          <n-input
+            v-model:value="form.captcha"
+            clearable
+            name="signup captcha"
+          />
+          <img class="captcha" :src="captchaSrc" @click="getCaptchaSrc" />
+        </n-space>
+      </n-form-item>
       <n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
       <n-form-item>
         <n-space>
           <n-button type="primary" :loading="isLoading" @click="submit">
-            登录
+            注册
           </n-button>
           <n-button @click="goLogin">已经注册？现在登录</n-button>
         </n-space>
@@ -76,4 +156,9 @@ function submit() {}
   </n-modal>
 </template>
 
-<style scoped></style>
+<style scoped>
+.captcha {
+  height: 34px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 4fd6863..b175dd3 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -5,6 +5,15 @@ export function login(data: { username: string; password: string }) {
   return http.post("login", data)
 }
 
+export function signup(data: {
+  username: string
+  email: string
+  password: string
+  captcha: string
+}) {
+  return http.post("register", data)
+}
+
 export function logout() {
   return http.get("logout")
 }
@@ -16,3 +25,7 @@ export function getProfile(username: string = "") {
 export function getProblemTagList() {
   return http.get<Tag[]>("problem/tags")
 }
+
+export function getCaptcha() {
+  return http.get("captcha")
+}
diff --git a/src/shared/layout/default.vue b/src/shared/layout/default.vue
index fb55864..3119b6d 100644
--- a/src/shared/layout/default.vue
+++ b/src/shared/layout/default.vue
@@ -5,7 +5,7 @@ import Header from "../Header.vue"
 </script>
 
 <template>
-  <n-layout>
+  <n-layout position="absolute">
     <n-layout-header bordered class="header">
       <Header />
     </n-layout-header>