diff --git a/components.d.ts b/components.d.ts
index 234caf5..193e614 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -42,5 +42,6 @@ declare module '@vue/runtime-core' {
     IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    UseNetwork: typeof import('@vueuse/components')['UseNetwork']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 63b8242..2e4351b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
         "@monaco-editor/loader": "^1.3.2",
+        "@vueuse/core": "^9.10.0",
         "axios": "^1.2.2",
         "element-plus": "^2.2.28",
         "normalize.css": "^8.0.1",
@@ -745,13 +746,13 @@
       "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
     "node_modules/@vueuse/core": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.9.0.tgz",
-      "integrity": "sha512-JdDb7TrE0imZnwBhMF4+0PCJqGD3AxzH8S2sfk54P0rqvklK+EAtAR/mPb1HwV/JPujQFQJhghQ190Yq03YpVw==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz",
+      "integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.9.0",
-        "@vueuse/shared": "9.9.0",
+        "@vueuse/metadata": "9.10.0",
+        "@vueuse/shared": "9.10.0",
         "vue-demi": "*"
       }
     },
@@ -778,14 +779,14 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.9.0.tgz",
-      "integrity": "sha512-pgxsUJv/d7IjKpLeB6TthggEsaBwM3ffc5jPrr5TmxAm/fup0mGR5VTzrdA/PSx85tpb+CIvP92D+55qBNc8ag=="
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz",
+      "integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw=="
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.9.0.tgz",
-      "integrity": "sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz",
+      "integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
       "dependencies": {
         "vue-demi": "*"
       }
@@ -2620,13 +2621,13 @@
       "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
     "@vueuse/core": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.9.0.tgz",
-      "integrity": "sha512-JdDb7TrE0imZnwBhMF4+0PCJqGD3AxzH8S2sfk54P0rqvklK+EAtAR/mPb1HwV/JPujQFQJhghQ190Yq03YpVw==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz",
+      "integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
       "requires": {
         "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.9.0",
-        "@vueuse/shared": "9.9.0",
+        "@vueuse/metadata": "9.10.0",
+        "@vueuse/shared": "9.10.0",
         "vue-demi": "*"
       },
       "dependencies": {
@@ -2639,14 +2640,14 @@
       }
     },
     "@vueuse/metadata": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.9.0.tgz",
-      "integrity": "sha512-pgxsUJv/d7IjKpLeB6TthggEsaBwM3ffc5jPrr5TmxAm/fup0mGR5VTzrdA/PSx85tpb+CIvP92D+55qBNc8ag=="
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz",
+      "integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw=="
     },
     "@vueuse/shared": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.9.0.tgz",
-      "integrity": "sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz",
+      "integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
       "requires": {
         "vue-demi": "*"
       },
diff --git a/package.json b/package.json
index 6377b2b..9ef762a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
     "@monaco-editor/loader": "^1.3.2",
+    "@vueuse/core": "^9.10.0",
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
     "normalize.css": "^8.0.1",
diff --git a/src/App.vue b/src/App.vue
index 1e743db..742bf3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import zhCn from "element-plus/dist/locale/zh-cn.mjs"
-
 const locale = zhCn
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index 8ad9ea6..a1c46e4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,6 @@ import { createApp } from "vue"
 import { createRouter, createWebHistory } from "vue-router"
 import { createPinia } from "pinia"
 import "normalize.css"
-import "element-plus/theme-chalk/display.css"
 import loader from "@monaco-editor/loader"
 
 import App from "./App.vue"
diff --git a/src/oj/problem/components/editor.vue b/src/oj/problem/components/editor.vue
index 75b3d37..2f760c1 100644
--- a/src/oj/problem/components/editor.vue
+++ b/src/oj/problem/components/editor.vue
@@ -7,6 +7,7 @@ import {
   LANGUAGE_VALUE,
   SOURCES,
 } from "../../../utils/constants"
+import { isDesktop } from "../../../utils/breakpoints"
 
 const { problem } = defineProps<{
   problem: {
@@ -61,11 +62,13 @@ async function init() {
   monaco.editor.create(monacoEditorRef.value, {
     value: state.values[state.language], // 编辑器初始显示文字
     language: LANGUAGE_VALUE[state.language],
-    automaticLayout: true, // 自适应布局
     theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
+    lineNumbersMinChars: 3,
+    automaticLayout: true, // 自适应布局
+    tabSize: 4,
     fontSize: 24, // 字体大小
     scrollBeyondLastLine: false, // 取消代码后面一大段空白
   })
@@ -92,7 +95,10 @@ async function init() {
       <el-button @click="reset">重置</el-button>
     </el-form-item>
   </el-form>
-  <div ref="monacoEditorRef" class="editor"></div>
+  <div
+    ref="monacoEditorRef"
+    :class="isDesktop ? 'editor' : 'editorMobile'"
+  ></div>
   <el-tabs type="border-card">
     <el-tab-pane label="测试用例"> 1 </el-tab-pane>
     <el-tab-pane label="执行结果"> 2 </el-tab-pane>
@@ -113,6 +119,11 @@ async function init() {
 .editor {
   height: 70%;
 }
+
+.editorMobile {
+  height: 500px;
+}
+
 .actions {
   margin-top: 16px;
   float: right;
diff --git a/src/oj/problem/components/problem-content.vue b/src/oj/problem/components/problem-content.vue
index 7e5fa81..518c158 100644
--- a/src/oj/problem/components/problem-content.vue
+++ b/src/oj/problem/components/problem-content.vue
@@ -3,41 +3,39 @@ const { problem } = defineProps(["problem"])
 </script>
 
 <template>
-  <el-scrollbar height="calc(100vh - 171px)" noresize>
-    <h1>{{ problem.title }}</h1>
-    <p class="title">描述</p>
-    <div class="content" v-html="problem.description"></div>
+  <h1>{{ problem.title }}</h1>
+  <p class="title">描述</p>
+  <div class="content" v-html="problem.description"></div>
 
-    <p class="title">输入</p>
-    <div class="content" v-html="problem.input_description"></div>
+  <p class="title">输入</p>
+  <div class="content" v-html="problem.input_description"></div>
 
-    <p class="title">输出</p>
-    <div class="content" v-html="problem.output_description"></div>
+  <p class="title">输出</p>
+  <div class="content" v-html="problem.output_description"></div>
 
-    <div v-if="problem.hint">
-      <p class="title">提示</p>
-      <el-card shadow="never">
-        <div class="content" v-html="problem.hint"></div>
-      </el-card>
-    </div>
+  <div v-if="problem.hint">
+    <p class="title">提示</p>
+    <el-card shadow="never">
+      <div class="content" v-html="problem.hint"></div>
+    </el-card>
+  </div>
 
-    <div v-for="(sample, index) of problem.samples" :key="index">
-      <p class="title">测试用例 {{ index + 1 }}</p>
-      <el-descriptions border direction="vertical">
-        <el-descriptions-item width="50%" label="输入">
-          <div class="testcase">{{ sample.input }}</div>
-        </el-descriptions-item>
-        <el-descriptions-item width="50%" label="输出">
-          <div class="testcase">{{ sample.output }}</div>
-        </el-descriptions-item>
-      </el-descriptions>
-    </div>
+  <div v-for="(sample, index) of problem.samples" :key="index">
+    <p class="title">测试用例 {{ index + 1 }}</p>
+    <el-descriptions border direction="vertical">
+      <el-descriptions-item width="50%" label="输入">
+        <div class="testcase">{{ sample.input }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item width="50%" label="输出">
+        <div class="testcase">{{ sample.output }}</div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
 
-    <div v-if="problem.source">
-      <p class="title">来源</p>
-      <div class="content" v-html="problem.source"></div>
-    </div>
-  </el-scrollbar>
+  <div v-if="problem.source">
+    <p class="title">来源</p>
+    <div class="content" v-html="problem.source"></div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/oj/problem/components/problem-info.vue b/src/oj/problem/components/problem-info.vue
index 599f663..2785283 100644
--- a/src/oj/problem/components/problem-info.vue
+++ b/src/oj/problem/components/problem-info.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { DIFFICULTY, getTagColor } from "../../../utils/constants"
-import { getACRate } from "../../../utils/functions"
+import { DIFFICULTY } from "../../../utils/constants"
+import { getACRate, getTagColor } from "../../../utils/functions"
+import { isDesktop } from "../../../utils/breakpoints"
 
 const { problem } = defineProps(["problem"])
 </script>
 
 <template>
-  <el-descriptions border>
+  <el-descriptions border :column="isDesktop ? 3 : 1">
     <el-descriptions-item label="编号">
       {{ problem._id }}
     </el-descriptions-item>
@@ -14,7 +15,7 @@ const { problem } = defineProps(["problem"])
       {{ problem.created_by.username }}
     </el-descriptions-item>
     <el-descriptions-item label="难度">
-      <el-tag :type="getTagColor(problem.difficulty)">
+      <el-tag disable-transitions :type="getTagColor(problem.difficulty)">
         {{ DIFFICULTY[<"Low" | "Mid" | "High">problem.difficulty] }}
       </el-tag>
     </el-descriptions-item>
@@ -40,7 +41,12 @@ const { problem } = defineProps(["problem"])
 
     <el-descriptions-item :span="3" label="标签">
       <el-space>
-        <el-tag type="info" v-for="tag in problem.tags" :key="tag">
+        <el-tag
+          disable-transitions
+          type="info"
+          v-for="tag in problem.tags"
+          :key="tag"
+        >
           {{ tag }}
         </el-tag>
       </el-space>
diff --git a/src/oj/problem/detail.vue b/src/oj/problem/detail.vue
index bc7096b..1dc8a60 100644
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -2,9 +2,10 @@
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
 import Editor from "./components/editor.vue"
-import { getProblem } from "../api"
 import ProblemContent from "./components/problem-content.vue"
 import ProblemInfo from "./components/problem-info.vue"
+import { getProblem } from "../api"
+import { isDesktop, isMobile } from "../../utils/breakpoints"
 
 const route = useRoute()
 const contestID = route.params.contestID as string
@@ -33,19 +34,25 @@ onMounted(() => {
 
 <template>
   <el-row v-if="problem._id">
-    <el-col :span="12">
+    <el-col :span="isDesktop ? 12 : 24">
       <el-tabs type="border-card">
-        <el-tab-pane label="题目描述">
-          <ProblemContent :problem="problem" />
+        <el-tab-pane label="题目描述" lazy>
+          <el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)" noresize>
+            <ProblemContent :problem="problem" />
+          </el-scrollbar>
+          <ProblemContent v-else :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="比赛信息" v-if="contestID"></el-tab-pane>
-        <el-tab-pane label="题目信息">
+        <el-tab-pane v-if="isMobile" label="代码编辑" lazy>
+          <Editor :problem="problem" />
+        </el-tab-pane>
+        <el-tab-pane label="比赛信息" v-if="contestID" lazy></el-tab-pane>
+        <el-tab-pane label="题目信息" lazy>
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
         <el-tab-pane label="提交情况">3</el-tab-pane>
       </el-tabs>
     </el-col>
-    <el-col :span="12">
+    <el-col v-if="isDesktop" :span="12">
       <Editor :problem="problem" />
     </el-col>
   </el-row>
diff --git a/src/oj/problem/list.vue b/src/oj/problem/list.vue
index d795cf0..5b37a21 100644
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -2,8 +2,8 @@
 import { onMounted, ref, reactive, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useUserStore } from "../../shared/stores/user"
-import { filterEmptyValue } from "../../utils/functions"
-import { getTagColor } from "../../utils/constants"
+import { filterEmptyValue, getTagColor } from "../../utils/functions"
+import { isDesktop } from "../../utils/breakpoints"
 import { getProblemList, getProblemTagList, getRandomProblemID } from "../api"
 
 const difficultyOptions = [
@@ -143,29 +143,8 @@ onMounted(() => {
       <el-button type="" @click="getRandom">随机一题</el-button>
     </el-form-item>
   </el-form>
-  <el-table
-    class="hidden-md-and-up"
-    :data="problems"
-    stripe
-    @row-click="goProblem"
-  >
-    <el-table-column prop="displayID" label="ID" width="80" />
-    <el-table-column prop="title" label="标题" />
-    <el-table-column label="难度" width="100">
-      <template #default="scope">
-        <el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
-          {{ scope.row.difficulty }}
-        </el-tag>
-      </template>
-    </el-table-column>
-  </el-table>
-  <el-table
-    class="hidden-sm-and-down pointer"
-    :data="problems"
-    stripe
-    @row-click="goProblem"
-  >
-    <el-table-column label="状态" width="80">
+  <el-table class="pointer" :data="problems" stripe @row-click="goProblem">
+    <el-table-column v-if="isDesktop" label="状态" :width="80">
       <template #default="scope">
         <el-icon
           v-if="scope.row.status === 'done'"
@@ -179,7 +158,11 @@ onMounted(() => {
         /></el-icon>
       </template>
     </el-table-column>
-    <el-table-column prop="displayID" label="编号" width="100" />
+    <el-table-column
+      prop="displayID"
+      label="编号"
+      :width="isDesktop ? 100 : 60"
+    />
     <el-table-column prop="title" label="标题" />
     <el-table-column label="难度" width="100">
       <template #default="scope">
@@ -188,7 +171,7 @@ onMounted(() => {
         </el-tag>
       </template>
     </el-table-column>
-    <el-table-column label="标签" width="200">
+    <el-table-column v-if="isDesktop" label="标签" :width="200">
       <template #default="scope">
         <el-space>
           <el-tag
@@ -201,21 +184,17 @@ onMounted(() => {
         </el-space>
       </template>
     </el-table-column>
-    <el-table-column prop="submission" label="提交数" width="100" />
-    <el-table-column prop="rate" label="通过率" width="100" />
+    <el-table-column
+      v-if="isDesktop"
+      prop="submission"
+      label="提交数"
+      width="100"
+    />
+    <el-table-column v-if="isDesktop" prop="rate" label="通过率" width="100" />
   </el-table>
   <el-pagination
-    class="right hidden-md-and-up margin"
-    layout="prev,next,sizes"
-    background
-    :total="total"
-    :page-sizes="[10, 20, 30]"
-    v-model:page-size="query.limit"
-    v-model:current-page="query.page"
-  />
-  <el-pagination
-    class="right margin hidden-sm-and-down"
-    layout="prev,pager,next,sizes"
+    class="right margin"
+    :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
     background
     :total="total"
     :page-sizes="[10, 20, 30]"
diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
new file mode 100644
index 0000000..fc570ce
--- /dev/null
+++ b/src/utils/breakpoints.ts
@@ -0,0 +1,6 @@
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+export const isMobile = breakpoints.smallerOrEqual("md")
+export const isDesktop = breakpoints.greater("md")
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 5656a96..de58896 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -116,7 +116,6 @@ export const PROBLEM_PERMISSION = {
 export const STORAGE_KEY = {
   AUTHED: "authed",
   PROBLEM_CODE: "problemCode",
-  USER: "user",
 }
 
 export const DIFFICULTY = {
@@ -125,24 +124,6 @@ export const DIFFICULTY = {
   High: "困难",
 }
 
-export function getTagColor(tag: string) {
-  return {
-    Low: "success",
-    Mid: "",
-    High: "danger",
-    简单: "success",
-    中等: "",
-    困难: "danger",
-  }[tag]
-}
-
-export function buildProblemCodeKey(problemID: string, contestID = "") {
-  if (contestID) {
-    return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
-  }
-  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
-}
-
 const cSource =
   '#include<stdio.h>\r\n\r\nint main()\r\n{\r\n    printf("黄岩一职");\r\n    return 0;\r\n}'
 const cppSource =
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index a9fb5f6..3c6001d 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -1,3 +1,5 @@
+import { STORAGE_KEY } from "./constants"
+
 export function getACRate(acCount: number, totalCount: number) {
   let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2)
   return `${rate}%`
@@ -12,3 +14,21 @@ export function filterEmptyValue(object: any) {
   })
   return query
 }
+
+export function buildProblemCodeKey(problemID: string, contestID = "") {
+  if (contestID) {
+    return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
+  }
+  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
+}
+
+export function getTagColor(tag: string) {
+  return {
+    Low: "success",
+    Mid: "",
+    High: "danger",
+    简单: "success",
+    中等: "",
+    困难: "danger",
+  }[tag]
+}