diff --git a/package.json b/package.json
index 0594db8d..21831c49 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "codemirror": "^5.56.0",
     "core-js": "^3.6.5",
     "dompurify": "^2.0.12",
     "element-ui": "^2.13.2",
diff --git a/src/assets/code_mirror/tomorrow.css b/src/assets/code_mirror/tomorrow.css
new file mode 100644
index 00000000..d1dfc07c
--- /dev/null
+++ b/src/assets/code_mirror/tomorrow.css
@@ -0,0 +1,160 @@
+.CodeMirror {
+    height: 600px !important;
+    background-color: #fcfcfc;
+    color: #4d4d4c;
+}
+
+.CodeMirror-cursor {
+    opacity: 0.7;
+    border-left: 2px solid #4d4d4c;
+}
+
+.cm-qualifier {
+    color: #c82829;
+}
+
+.cm-property {
+    color: #eab700;
+}
+
+.cm-meta,
+.cm-number,
+.cm-atom {
+    color: #f5871f;
+}
+
+.cm-comment {
+    color: #8e908c !important;
+}
+
+.cm-keyword,
+.cm-type,
+.cm-tag {
+    color: #8959a8;
+}
+
+.cm-def {
+    color: #4271ae;
+}
+
+.cm-string {
+    color: #718c00 !important;
+}
+
+.CodeMirror-linebackground,
+.CodeMirror-activeline-background {
+    background-color: #efefef !important;
+}
+
+.cm-operator {
+    color: #3e999f !important;
+}
+
+.CodeMirror-selected {
+    background-color: #d6d6d6 !important;
+}
+
+.CodeMirror-gutters {
+    background: #f9f9f9;
+    border-right: none;
+}
+
+.CodeMirror-linenumber {
+    color: #909399;
+    font-size: 15px;
+}
+
+.CodeMirror-matchingbracket {
+    color: #4d4d4c !important;
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-nonmatchingbracket {
+    color: #c82829 !important;
+    outline: 1px solid #c82829;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-foldmarker {
+    text-shadow: none !important;
+    color: #8e908c !important;
+    font-family: "Fira Sans" !important;
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror span[role="presentation"] {
+    font-size: 14px;
+}
+
+.CodeMirror-hints {
+    max-height: 200px !important;
+    box-shadow: none !important;
+    border-color: #dcdfe6 !important;
+    background-color: #fefefe !important;
+    font-family: "Fira Code" !important;
+    padding: 5px !important;
+}
+
+.CodeMirror-hint {
+    line-height: 20px;
+    color: #444444 !important;
+}
+
+li.CodeMirror-hint-active {
+    background-color: #efefef !important;
+    color: #444444 !important;
+    font-weight: 500;
+}
+
+.CodeMirror-dialog {
+    background-color: #fefefe !important;
+}
+
+.cm-searching {
+    background-color: #d6d6d6;
+}
+
+.CodeMirror-search-label {
+    line-height: 24px;
+    font-weight: 500;
+}
+
+.CodeMirror-search-field {
+    line-height: 20px;
+    border: 1px solid #dcdfe6 !important;
+    width: 50em !important;
+}
+
+.CodeMirror-search-hint {
+    line-height: 25px;
+    float: right;
+}
+
+.cm-matchhighlight {
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-selection-highlight-scrollbar {
+    margin-right: 2.5px;
+    width: 5px !important;
+    background-color: #8e908c;
+    opacity: 0.6;
+}
+
+.CodeMirror-simplescroll-horizontal div,
+.CodeMirror-simplescroll-vertical div {
+    background: #b3b3b3 !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+.CodeMirror-simplescroll-vertical {
+    width: 10px !important;
+}
+
+.CodeMirror-simplescroll-horizontal {
+    height: 10px !important;
+}
diff --git a/src/assets/css/basic.css b/src/assets/css/basic.css
index dc422ffd..f32b6d2f 100644
--- a/src/assets/css/basic.css
+++ b/src/assets/css/basic.css
@@ -1,11 +1,11 @@
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
-    background-color: #cccccc;
+    background-color: #eeeeee;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: #cccccc;
+    background-color: #eeeeee;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -13,10 +13,6 @@
     transition: all 0.5s;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background-color: #808080;
-}
-
 *::selection {
     background-color: #b9d7ff;
     opacity: 0.2;
@@ -45,6 +41,21 @@ h5 {
     color: #303133;
 }
 
+a {
+    text-decoration: none;
+}
+
+.markdown-container a {
+    color: #409eff;
+    text-decoration: none;
+    transition: 0.2s;
+}
+
+.markdown-container a:hover {
+    color: #66b1ff;
+    text-decoration: underline;
+}
+
 .markdown-container pre {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
@@ -148,10 +159,26 @@ h3::before {
     border: none;
 }
 
-.highzindex {
+.bottom-zindex {
+    z-index: 10 !important;
+}
+
+.low-zindex {
+    z-index: 100 !important;
+}
+
+.mid-zindex {
+    z-index: 1000 !important;
+}
+
+.high-zindex {
     z-index: 10000 !important;
 }
 
+.top-zindex {
+    z-index: 100000 !important;
+}
+
 .no-margin {
     margin: 0;
 }
diff --git a/src/assets/css/theme.css b/src/assets/css/theme.css
index 3b27416d..59700d72 100644
--- a/src/assets/css/theme.css
+++ b/src/assets/css/theme.css
@@ -54,16 +54,6 @@
     background-color: #409eff;
 }
 
-a {
-    color: #409eff;
-    text-decoration: none;
-    transition: 0.2s;
-}
-
-a:hover {
-    color: #66b1ff;
-}
-
 .CodeMirror .CodeMirror-code .cm-comment {
     background-color: #ffffff00 !important;
     font-family: "Fira Code";
diff --git a/src/assets/element/index.css b/src/assets/element/index.css
index 05738fe1..999e9804 100644
--- a/src/assets/element/index.css
+++ b/src/assets/element/index.css
@@ -2470,7 +2470,7 @@
     position: absolute;
     top: 1px;
     left: 1px;
-    border-radius: 100%;
+    border-radius: 0;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     width: 16px;
diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css
index 4d133194..63f9e225 100644
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@@ -1,6 +1,6 @@
 pre,
 code {
-    font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace;
+    font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace !important;
 }
 
 body {
diff --git a/src/components/404.vue b/src/components/404.vue
index 2e8c16b9..ee50d057 100644
--- a/src/components/404.vue
+++ b/src/components/404.vue
@@ -1,11 +1,20 @@
 <template>
-  <div class="box">
-    <div class="logo">
-      404
-    </div>
-    <div class="message">
-      Page Not Found
-    </div>
+  <div>
+    <el-card style="height: 700px;">
+      <div slot="header" class="clearfix">
+        <i class="el-icon-warning" />
+        Error
+      </div>
+      <div class="box">
+        <div class="logo">
+          404
+        </div>
+        <el-divider />
+        <div class="message">
+          Page Not Found
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -17,7 +26,7 @@ export default {
 
 <style scoped>
 .logo {
-    font-size: 5em;
+    font-size: 8em;
 }
 
 .message {
diff --git a/src/components/app/editor.vue b/src/components/app/editor.vue
new file mode 100644
index 00000000..1992c7ac
--- /dev/null
+++ b/src/components/app/editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <i class="el-icon-document" />
+        Code Editor
+      </div>
+      <codeMirror />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import codeMirror from './../lib/editor.vue';
+
+export default {
+  name: 'CodeEditorContainer',
+  data() {
+    return {
+      source: null
+    };
+  },
+  components: {
+    codeMirror
+  }
+};
+</script>
diff --git a/src/components/home/carousel.vue b/src/components/home/carousel.vue
index 53752bbc..0f5cc84f 100644
--- a/src/components/home/carousel.vue
+++ b/src/components/home/carousel.vue
@@ -1,7 +1,9 @@
 <template>
-  <el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
-    <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
-  </el-carousel>
+  <div>
+    <el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
+      <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/home/page.vue b/src/components/home/page.vue
index b40afda6..bebd52c9 100644
--- a/src/components/home/page.vue
+++ b/src/components/home/page.vue
@@ -1,14 +1,25 @@
 <template>
-  <carousel/>
+  <div>
+    <carousel/>
+    <JumpToProblem class="item" />
+  </div>
 </template>
 
 <script>
 import Carousel from './carousel.vue';
+import JumpToProblem from './../lib/jumpToProblem.vue';
 
 export default {
   name: 'Home',
   components: {
-    Carousel
+    Carousel,
+    JumpToProblem
   }
 };
 </script>
+
+<style scoped>
+.item {
+    margin-top: 20px;
+}
+</style>
diff --git a/src/components/lib/AjaxTable.vue b/src/components/lib/AjaxTable.vue
index 36dfed11..6f9d2fc6 100644
--- a/src/components/lib/AjaxTable.vue
+++ b/src/components/lib/AjaxTable.vue
@@ -1,15 +1,24 @@
 <template>
   <div class="ajax-table">
-    <el-table v-loading="loading" :data="tableData" stripe class="table">
-      <el-table-column v-for="item in columns" :key="item" :prop="item.name" :label="item.label"></el-table-column>
+    <el-table v-loading="loading" :data="tableData">
+      <el-table-column
+        v-for="item in columns"
+        :key="item"
+        :prop="item.name"
+        :label="item.label"
+        :width="item.width"
+        :align="item.align"
+        :header-align="item.headerAlign"
+      />
     </el-table>
     <el-pagination
       :page-size="this.limit"
       background
-      layout="prev, pager, next, jumper, total"
+      layout="prev, pager, next, jumper"
       @current-change="this.onPageChange"
       class="pagination"
-    ></el-pagination>
+      :total="this.total"
+    />
   </div>
 </template>
 
@@ -20,11 +29,18 @@ export default {
     return {
       loading: true,
       tableData: null,
-      offset: 0
+      offset: 0,
+      pageId: 1,
     };
   },
+  watch: {
+    limit() {
+      this.onPageChange(this.pageId);
+    }
+  },
   methods: {
     onPageChange(page_id) {
+      this.pageId = page_id;
       this.offset = (page_id - 1) * this.limit;
       this.load_data();
     },
@@ -72,7 +88,7 @@ export default {
       type: Function,
       default: x => x
     }
-  }
+  },
 };
 </script>
 
@@ -82,8 +98,4 @@ export default {
     margin-top: 20px;
     text-align: center;
 }
-
-.table {
-    min-height: calc(100vh - 80px - 60px - 41.05px);
-}
 </style>
\ No newline at end of file
diff --git a/src/components/lib/MarkdownContainer.vue b/src/components/lib/MarkdownContainer.vue
index a71df917..da76e20a 100644
--- a/src/components/lib/MarkdownContainer.vue
+++ b/src/components/lib/MarkdownContainer.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="markdown-container">
-        <div v-html="renderedContent" v-katex:auto></div>
-    </div>
+  <div class="markdown-container">
+    <div v-html="renderedContent" v-katex:auto></div>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/lib/confirmDelete.vue b/src/components/lib/confirmDelete.vue
new file mode 100644
index 00000000..da9d6ee9
--- /dev/null
+++ b/src/components/lib/confirmDelete.vue
@@ -0,0 +1,110 @@
+<template>
+  <span>
+    <el-popover
+      :placement="this.placement"
+      :width="this.width"
+      v-model="visible"
+    >
+      <div style="font-size: 16px;">
+        <strong>
+          <i class="el-icon-warning" />
+          Are you sure
+        </strong>
+      </div>
+      <p>Once you delete this {{this.name}}, <strong class="color-warning">THERE IS NO GOING BACK</strong>.</p>
+      <p>Please type <strong>{{this.confirmInput}}</strong> to confirm.</p>
+      <el-input :placeholder="'Type ' + this.confirmInput" v-model="confirmAnswer"></el-input>
+      <div style="text-align: right; margin: 10px;">
+        <el-button
+          size="mini"
+          type="text"
+          @click="visible = false;"
+        >
+          Cancel
+        </el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="confirmed"
+          :disabled="!confirmAnswerCorrect"
+        >
+          Confirm
+        </el-button>
+      </div>
+      <el-button
+        :icon="this.buttonIcon"
+        :type="this.buttonType"
+        slot="reference"
+        style="margin-left: 10px;"
+        :circle="this.buttonCircle"
+      >
+        {{buttonName}}
+      </el-button>
+    </el-popover>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmDelete',
+  data() {
+    return {
+      visible: false,
+      confirmAnswer: '',
+      confirmAnswerCorrect: false
+    };
+  },
+  props: {
+    buttonName: {
+      type: String,
+      required: true
+    },
+    buttonIcon: {
+      type: String,
+      default: ''
+    },
+    buttonCircle: {
+      type: Boolean,
+      default: false
+    },
+    buttonType: {
+      type: String,
+      default: 'primary'
+    },
+    buttonFunction: {
+      type: Function,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    confirmInput: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: Number,
+      default: 300
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
+  },
+  watch: {
+    confirmAnswer(val) {
+      this.confirmAnswerCorrect = false;
+      if (val == this.confirmInput) {
+        this.confirmAnswerCorrect = true;
+      }
+    }
+  },
+  methods: {
+    confirmed() {
+      this.visible = false;
+      this.buttonFunction();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
new file mode 100644
index 00000000..3935d16e
--- /dev/null
+++ b/src/components/lib/editor.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <textarea ref="editor" v-model="source" />
+  </div>
+</template>
+
+<script>
+import * as CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/lib/codemirror.css';
+import './../../assets/code_mirror/tomorrow.css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/hint/anyword-hint';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/comment-fold';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/comment/continuecomment';
+import 'codemirror/addon/comment/comment.js';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/dialog/dialog.css';
+import 'codemirror/addon/scroll/simplescrollbars';
+import 'codemirror/addon/scroll/annotatescrollbar';
+import 'codemirror/addon/scroll/simplescrollbars.css';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/search/match-highlighter';
+import 'codemirror/keymap/sublime';
+
+export default {
+  name: 'codeMirror',
+  data() {
+    return {
+      source: null
+    };
+  },
+  methods: {
+    loadEditor() {
+      let editor = CodeMirror.fromTextArea(this.$refs.editor, {
+        theme: '3024-day',
+        mode: 'text/x-c++src',
+        indentUnit: 4,
+        smartIndent: true,
+        indentWithTabs: false,
+        lineNumbers: true,
+        matchBrackets: true,
+        autoCloseBrackets: true,
+        styleActiveLine: true,
+        foldCode: true,      
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        continueComments: true,
+        continueLineComment: false,
+        autofocus: true,
+        keyMap: 'sublime',
+        scrollbarStyle: 'simple',
+        highlightSelectionMatches: {
+          showToken: /\w/, 
+          annotateScrollbar: true
+        },
+        undoDepth: 1000,
+        hintOptions: {
+          completeSingle: false
+        }
+      });
+      editor.on('keypress', function() {
+        editor.showHint();
+      });
+    }
+  },
+  mounted() {
+    this.loadEditor();
+  }
+};
+</script>
diff --git a/src/components/lib/jumpToProblem.vue b/src/components/lib/jumpToProblem.vue
new file mode 100644
index 00000000..ce8465c4
--- /dev/null
+++ b/src/components/lib/jumpToProblem.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <el-card>
+      <i class="el-icon-s-promotion" />
+      Jump to
+      <el-input
+        placeholder="PID"
+        v-model="jumpToProblem"
+        class="input-with-select" 
+        style="margin-top: 9px;"
+      >
+        <template slot="prepend">#.</template>
+        <el-button slot="append" icon="el-icon-top-right" @click="jump"></el-button>
+      </el-input>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JumpToProblem',
+  data() {
+    return {
+      jumpToProblem: null
+    };
+  },
+  methods: {
+    jump() {
+      this.$router.push('/problem/' + this.jumpToProblem);
+    }
+  }
+};
+</script>
diff --git a/src/components/lib/tag.vue b/src/components/lib/tag.vue
index 242e865f..c3604980 100644
--- a/src/components/lib/tag.vue
+++ b/src/components/lib/tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :v-if="showTag" class="seg-tag" :style="style">
+  <span class="segment-tag" :style="style">
     <i :v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
   </span>
 </template>
@@ -31,13 +31,16 @@ export default {
     },
     background_color: {
       type: String,
-      default: 'rgb (244, 255, 255)'
+      default: 'rgb(244, 255, 255)'
+    },
+    height: {
+      type: Number,
+      default: 32
     }
   },
   data() {
     return {
-      style: '',
-      showTag: false
+      style: ''
     };
   },
   mounted() {
@@ -45,23 +48,20 @@ export default {
     if(this.border) {
       this.style += 'border-color: '+ this.border_color + ';';
     }
-    this.showTag = true;
+    this.style += 'height: ' + this.height + 'px;';
+    this.style += 'line-height: ' + String(this.height - 2) + 'px;';
   }
 };
 </script>
 
 <style scoped>
-.seg-tag {
+.segment-tag {
     display: inline-block;
-    height: 32px;
     padding: 0 10px;
-    line-height: 30px;
     font-size: 12px;
-    font-weight: 500;
-    border-width: 1px;
-    border-style: solid;
+    border: 1px solid;
     box-sizing: border-box;
     white-space: nowrap;
     margin: 3px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/page/navbar.vue b/src/components/page/navbar.vue
index f3559b19..5f2c6e86 100644
--- a/src/components/page/navbar.vue
+++ b/src/components/page/navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="nav">
+  <div id="nav" class="high-zindex">
     <div id="nav-content">
       <el-menu
         id="menu"
@@ -22,6 +22,15 @@
           <i class="el-icon-s-order" /> 
           <div class="lable"> Problem List</div>
         </el-menu-item>
+        <el-submenu index="1">
+          <template slot="title">
+            <i class="el-icon-s-help" />
+            <span class="lable"> Apps</span>
+          </template>
+          <el-menu-item index="/app/editor">
+            Code Editor
+          </el-menu-item>
+        </el-submenu>
         <el-submenu index="2" id="user">
           <template slot="title">
               <el-avatar shape="square">
@@ -69,7 +78,6 @@ export default {
 }
 
 #nav {
-    z-index: 1000;
     background-color: #545c64;
     width: 100vw;
     position: fixed;
diff --git a/src/components/problem/content.vue b/src/components/problem/content.vue
index ce155f38..708af1e2 100644
--- a/src/components/problem/content.vue
+++ b/src/components/problem/content.vue
@@ -2,13 +2,15 @@
   <div id="problem-view">
     <div id="content">
       <div id="problem-content" v-loading="problemLoading">
-        <div v-if="!isWider" id="full-screen-button" @click="full_screen()">
-          Expand
-          <i class="el-icon-arrow-right"></i>
-        </div>
-        <div v-else id="full-screen-button" @click="full_screen()">
-          Fold
-          <i class="el-icon-arrow-left"></i>
+        <div v-if="!smallScreen">
+          <div v-if="!isWider" id="full-screen-button" @click="full_screen()">
+            Expand
+            <i class="el-icon-arrow-right"></i>
+          </div>
+          <div v-else id="full-screen-button" @click="full_screen()">
+            Fold
+            <i class="el-icon-arrow-left"></i>
+          </div>
         </div>
         <div class="flex-header">
           <el-tag v-if="hidden" type="warning" id="hidden-problem" effect="dark">Hidden</el-tag>
@@ -18,30 +20,29 @@
       </div>
       <div id="pannel" v-if="!isWider">
         <div id="tools">
-          <el-card>
+          <el-card v-if="showSmallToolBar || !smallScreen">
             <div><i class="el-icon-s-tools" /> Tool Bar</div>
-            <el-menu default-active="3">
-              <el-menu-item index="3" @click="$router.push('/problem/' + $route.params.id +'/submit');">
+            <el-menu default-active="0">
+              <el-menu-item index="0" @click="$router.push('/problem/' + $route.params.id +'/submit');">
                 <span slot="title" class="text-bold"><i class="el-icon-upload2" /> Submit</span>
               </el-menu-item>
-              <el-submenu index="0">
-                <template slot="title"><div class="text-bold"><i class="el-icon-pie-chart" /> Statistics</div></template>
-                <el-menu-item index="0-0">Submissions</el-menu-item>
-                <el-menu-item index="0-1">Statistics</el-menu-item>
-              </el-submenu>
               <el-submenu index="1">
-                <template slot="title"><div class="text-bold"><i class="el-icon-chat-line-round" /> Discuss</div></template>
-                <el-menu-item index="1-0">Discussions</el-menu-item>
-                <el-menu-item index="1-1">Solutions</el-menu-item>
+                <template slot="title"><div class="text-bold"><i class="el-icon-pie-chart" /> Statistics</div></template>
+                <el-menu-item index="1-0">Submissions</el-menu-item>
+                <el-menu-item index="1-1">Statistics</el-menu-item>
               </el-submenu>
               <el-submenu index="2">
-                <template slot="title"><div class="text-bold"><i class="el-icon-edit" /> Edit</div></template>
-                <el-menu-item index="2-0" @click="$router.push('/problem/' + $route.params.id +'/edit');">
-                  Edit
-                </el-menu-item>
-                <el-menu-item index="2-1">Delete</el-menu-item>
-                <el-menu-item index="2-2">Settings</el-menu-item>
+                <template slot="title"><div class="text-bold"><i class="el-icon-chat-line-round" /> Discuss</div></template>
+                <el-menu-item index="2-0">Discussions</el-menu-item>
+                <el-menu-item index="2-1">Solutions</el-menu-item>
               </el-submenu>
+              <el-menu-item
+                index="3"
+                v-if="this.$store.state.user.isStaff || this.$store.state.user.isRoot" 
+                @click="$router.push('/problem/' + $route.params.id +'/edit');"
+              >
+                <span slot="title" class="text-bold"><i class="el-icon-edit" /> Edit</span>
+              </el-menu-item>
             </el-menu>
             <el-button @click="$router.push('/problem/list');" class="margin-top-small">Back</el-button>
           </el-card>
@@ -67,14 +68,22 @@
             <div class="margin-bottom">
               <i class="el-icon-s-flag" />
               Tags
-              <div v-if="showTag" @click="showTag = false" id="tag-button"><i class="el-icon-arrow-up" /> Hide tags</div>
-              <div v-if="!showTag" @click="showTag = true" id="tag-button"><i class="el-icon-arrow-down" /> Show tags</div>
+              <div v-if="showTag" @click="showTag = false" id="tag-button">
+                <i class="el-icon-arrow-up" />
+                Hide
+              </div>
+              <div v-else @click="showTag = true" id="tag-button">
+                <i class="el-icon-arrow-down" />
+                Show
+              </div>
             </div>
             <div class="tags" v-if="showTag">
               <SegmentTag
                 v-for="item in rendertags"
                 :key="item.content"
+                color="#fff"
                 :border_color="item.color"
+                :background_color="item.color"
                 :content="item.content"
                 >
               </SegmentTag>
@@ -82,6 +91,7 @@
           </el-card>
         </div>
       </div>
+      <el-button v-if="smallScreen" class="float-bottom-right" icon="el-icon-more" @click="showSmallToolBar = !showSmallToolBar" type="info" circle />
     </div>
   </div>
 </template>
@@ -109,7 +119,9 @@ export default {
       tags: [],
       rendertags: [],
       problemLoading: true,
-      showTag: false
+      showTag: false,
+      smallScreen: screen.width < 700,
+      showSmallToolBar: false
     };
   },
   methods: {
@@ -123,9 +135,6 @@ export default {
               color: data.res.color,
               content: data.res.content
             });
-          })
-          .catch(() => {
-
           });
       } 
     },
@@ -188,13 +197,20 @@ export default {
     margin-bottom: 15px;
 }
 
+.float-bottom-right {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+}
+
 @media only screen and (max-width: 700px) {
     #pannel {
-        z-index: 1000;
-        opacity: 0.5;
         position: fixed;
-        transition: 0.5s;
+        bottom: 90px;
         right: 30px;
+        z-index: 1000;
+        transition: 0.5s;
     }
 
     #pannel:active {
@@ -202,6 +218,11 @@ export default {
         opacity: 1;
     }
 
+    #pannel:hover {
+        z-index: 1000;
+        opacity: 1;
+    }
+
     #info {
         display: none;
     }
diff --git a/src/components/problem/edit.vue b/src/components/problem/edit.vue
index 80fc7331..101a1316 100644
--- a/src/components/problem/edit.vue
+++ b/src/components/problem/edit.vue
@@ -1,49 +1,108 @@
 <template>
-  <el-row :gutter="30">
-    <el-col span="6">
-      <el-card>
-        <div slot="header" class="clearfix"><i class="el-icon-edit-outline" /> Name</div>
-        <el-input v-model="title" placeholder="Input problem title here"></el-input>
-        <el-checkbox v-model="enabled" label="Enabled" class="item"></el-checkbox>
-      </el-card>
-      <el-card class="item">
-        <i class="el-icon-menu" /> Limitation
-        <el-divider>Time</el-divider>
-        <el-row gutter="10">
-          <el-col span="20">
-            <el-input v-model="time" placeholder="Set time limitation"></el-input>
-          </el-col>
-          <el-col span="4" class="center-text">
-            MS
-          </el-col>
-        </el-row>
-        <el-divider>Memery</el-divider>
-        <el-row gutter="10">
-          <el-col span="20">
-            <el-input v-model="memery" placeholder="Set memery limitation"></el-input>
-          </el-col>
-          <el-col span="4" class="center-text">
-            MB
-          </el-col>
-        </el-row>
-      </el-card>
-      <el-card class="item">
-        <el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
-        <el-button @click="back();">Back</el-button>
-      </el-card>
-    </el-col>
-    <el-col span="18">
-      <el-card v-loading="contentLoading">
-        <div slot="header" class="clearfix"><i class="el-icon-document" /> Content</div>
-        <MarkdownEditor v-model="mdContent" />
-      </el-card>
-    </el-col>
-  </el-row>
+  <!-- Normal screen -->
+  <div v-if="!smallScreen">
+    <el-row :gutter="30">
+      <el-col :span="7">
+        <el-card>
+          <div slot="header" class="clearfix"><i class="el-icon-edit-outline" /> Name</div>
+          <el-input v-model="title" placeholder="Input problem title here"></el-input>
+          <el-checkbox v-model="disable" label="Disabled" class="item"></el-checkbox>
+          <el-checkbox v-model="html" label="Allow HTML" class="item"></el-checkbox>
+        </el-card>
+        <el-card class="item">
+          <i class="el-icon-menu" /> Limitation
+          <el-divider>Time</el-divider>
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-input v-model="time" placeholder="Set time limitation"></el-input>
+            </el-col>
+            <el-col :span="4" class="center-text">
+              MS
+            </el-col>
+          </el-row>
+          <el-divider>Memery</el-divider>
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-input v-model="memery" placeholder="Set memery limitation"></el-input>
+            </el-col>
+            <el-col :span="4" class="center-text">
+              MB
+            </el-col>
+          </el-row>
+        </el-card>
+        <el-card class="item">
+          <el-button type="primary" @click="submit" :loading="buttonLoading">Submit</el-button>
+          <el-button @click="back();">Back</el-button>
+          <ConfirmDelete
+            buttonName="Delete"
+            buttonType="danger"
+            :buttonFunction="this.delete"
+            name="problem"
+            :confirmInput="'#' + this.$route.params.id + '/' + this.title"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="17">
+        <el-card v-loading="contentLoading">
+          <div slot="header" class="clearfix"><i class="el-icon-document" /> Content</div>
+          <MarkdownEditor v-model="mdContent" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <!-- Mobile screen -->
+  <div v-else>
+    <el-card class="float">
+      <el-button type="primary" @click="submit();" icon="el-icon-check" circle />
+      <el-button @click="back();" icon="el-icon-back" circle />
+      <ConfirmDelete
+        :buttonName="null"
+        buttonType="danger"
+        buttonIcon="el-icon-delete"
+        buttonCircle="true"
+        :buttonFunction="this.delete"
+        name="problem"
+        :confirmInput="'#' + this.$route.params.id + '/' + this.title"
+      />
+    </el-card>
+    <el-card>
+      <div slot="header" class="clearfix"><i class="el-icon-edit-outline" /> Name</div>
+      <el-input v-model="title" placeholder="Input problem title here"></el-input>
+      <el-checkbox v-model="disable" label="Disabled" class="item"></el-checkbox>
+      <el-checkbox v-model="html" label="Allow HTML" class="item"></el-checkbox>
+    </el-card>
+    <el-card class="item">
+      <i class="el-icon-menu" /> Limitation
+      <el-divider>Time</el-divider>
+      <el-row :gutter="10">
+        <el-col :span="20">
+          <el-input v-model="time" placeholder="Set time limitation"></el-input>
+        </el-col>
+        <el-col :span="4" class="center-text">
+          MS
+        </el-col>
+      </el-row>
+      <el-divider>Memery</el-divider>
+      <el-row :gutter="10">
+        <el-col :span="20">
+          <el-input v-model="memery" placeholder="Set memery limitation"></el-input>
+        </el-col>
+        <el-col :span="4" class="center-text">
+          MB
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card v-loading="contentLoading" class="item">
+      <div slot="header" class="clearfix"><i class="el-icon-document" /> Content</div>
+      <MarkdownEditor v-model="mdContent" />
+    </el-card>
+  </div>
 </template>
 
 <script>
 import apiurl from './../../apiurl';
 import MarkdownEditor from './../lib/MarkdownEditor.vue';
+import ConfirmDelete from './../lib/confirmDelete.vue';
 
 export default {
   name: 'ProblemEdit',
@@ -55,7 +114,12 @@ export default {
       buttonLoading: false,
       time: 'Unknown',
       memery: 'Unknown',
-      enabled: true
+      disable: false,
+      html: false,
+      smallScreen: screen.width < 700,
+      visible: false,
+      confirmAnswer: '',
+      confirmAnswerCorrect: false
     };
   },
   methods: {
@@ -68,7 +132,8 @@ export default {
           this.mdContent = data.description;
           this.memery = data.memory_limit / 1000;
           this.time = data.time_limit;
-          this.enabled = data.enabled;
+          this.disable = !data.enabled;
+          this.html = data.allow_html;
           this.contentLoading = false;
         })
         .catch(err => {
@@ -77,7 +142,7 @@ export default {
         });
     },
     back() {
-      this.$router.push('/problem/'+this.$route.params.id);
+      this.$router.push('/problem/' + this.$route.params.id);
     },
     submit() {
       this.buttonLoading = true;
@@ -87,29 +152,47 @@ export default {
           description: this.mdContent,
           memory_limit: this.memery * 1000,
           time_limit: this.time,
-          enabled: this.enabled
+          allow_html: this.html,
+          enabled: !this.disable
         })
         .then(() => {
           this.buttonLoading = false;
           this.$SegmentMessage.success(this, 'Your changes have been submitted');
         })
         .catch(err => {
-          if(err.request.status === 404) {
+          if (err.request.status === 404) {
             this.$SegmentMessage.error(this, 'Problem not found');
-          } else if(err.request.status === 403) {
+          } else if (err.request.status === 403) {
             this.$SegmentMessage.error(this, 'Permission denied');
           } else {
             this.$SegmentMessage.error(this, 'Unkown error');
           }
           this.buttonLoading = false;
         });
+    },
+    delete() {
+      this.$axios
+        .delete(apiurl('/problem/' + this.$route.params.id))
+        .then(() => {
+          this.$SegmentMessage.success(this, 'Deleted problem #' + this.$route.params.id);
+        })
+        .catch(err => {
+          if (err.request.status === 404) {
+            this.$SegmentMessage.error(this, 'Problem not found');
+          } else if (err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Permission denied');
+          } else {
+            this.$SegmentMessage.error(this, 'Unkown error');
+          }
+        });
     }
   },
   mounted() {
     this.loadproblem();
   },
   components: {
-    MarkdownEditor
+    MarkdownEditor,
+    ConfirmDelete
   }
 };
 </script>
@@ -122,4 +205,25 @@ export default {
 .center-text {
     margin-top: 0.7rem;
 }
+
+@media only screen and (max-width: 700px) {
+    .float {
+        z-index: 1000;
+        opacity: 0.5;
+        position: fixed;
+        transition: 0.5s;
+        right: 30px;
+        top: 80px;
+    }
+
+    .float:active {
+        z-index: 1000;
+        opacity: 1;
+    }
+
+    .float:hover {
+        z-index: 1000;
+        opacity: 1;
+    }
+}
 </style>
diff --git a/src/components/problem/list.vue b/src/components/problem/list.vue
index 33c3cdd7..5dace142 100644
--- a/src/components/problem/list.vue
+++ b/src/components/problem/list.vue
@@ -1,37 +1,99 @@
 <template>
-  <div id="problem-list">
-    <AjaxTable
-      :ajax_url="ajax_url"
-      :columns="columns"
-      :limit=10
-      :total="data_count"
-      :process="process"
-    ></AjaxTable>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-card>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <JumpToProblem />
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <el-row :gutter="20">
+            <el-col :span="16">
+              <span>
+                <i class="el-icon-s-grid" />
+                Columns
+              </span>
+              <el-slider
+                v-model="limit"
+                :step="10"
+                :min="10"
+                @change="refresh"
+                style="margin-top: 10px;"
+              />
+            </el-col>
+            <el-col :span="8">
+              <div>
+                <i class="el-icon-collection-tag" />
+                Show Tags
+              </div>
+              <el-switch
+                v-model="showTags"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                style="margin-top: 17px;"
+              />
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-card class="item" v-if="alive">
+      <AjaxTable
+        :ajax_url="ajax_url"
+        :columns="columns"
+        :limit="limit"
+        :total="data_count"
+        :process="process"
+      />
+    </el-card>
   </div>
 </template>
 
 <script>
 import apiurl from './../../apiurl';
 import AjaxTable from './../lib/AjaxTable.vue';
+import JumpToProblem from './../lib/jumpToProblem.vue';
+import listTag from './listTag.vue';
 
 export default {
   name: 'ProblemList',
   data() {
     return {
+      alive: true,
       ajax_url: apiurl('/problem/list'),
+      limit: 50,
+      showTags: false,
       columns: [{
-        name: 'pid',
-        label: 'Problem ID'
-      }, {
         name: 'score',
-        label: 'Status'
+        label: 'Status',
+        width: '120',
+        align: 'center'
+      }, {
+        name: 'pid',
+        label: 'Problem ID',
+        width: '120',
+        align: 'center'
       }, {
         name: 'title',
         label: 'Title'
+      }, {
+        name: 'tag',
+        width: '400',
+        align: 'right',
       }],
       data_count: 10
     };
   },
+  watch: {
+    showTags(val) {
+      this.$store.commit('setDisplayTag', {
+        val: val
+      });
+    }
+  },
   methods: {
     process(x) {
       let color = '';
@@ -46,18 +108,28 @@ export default {
         x.title = (
           <div>
             <router-link to={'/problem/' + String(x.pid)} class={color + ' text-normal'}>{ x.title } </router-link>
-            <el-tag effect="dark" type="warning">Hidden</el-tag>
+            <el-tag effect="dark" type="warning" size="small">Hidden</el-tag>
           </div>
         );
       } else {
         x.title = (<router-link to={'/problem/' + String(x.pid)} class={color + ' text-normal'}>{ x.title }</router-link>);
       }
       x.score = (<div class={color + ' text-extra-bold'}>{x.score >= 0 ? x.score : '-'}</div>);
+      
+      x.tag = (<listTag tags={ x.tags }></listTag>);
+      
       return x;
+    },
+    refresh() {
+      // this.alive = false;
+      // this.$nextTick(() => {
+      //   this.alive = true;
+      // });
     }
   },
   components: {
-    AjaxTable
+    AjaxTable,
+    JumpToProblem
   },
   mounted() {
     this.$axios
@@ -72,4 +144,10 @@ export default {
       });
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.item {
+    margin-top: 20px;
+}
+</style>
diff --git a/src/components/problem/listTag.vue b/src/components/problem/listTag.vue
new file mode 100644
index 00000000..4aa13a6b
--- /dev/null
+++ b/src/components/problem/listTag.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div v-if="$store.state.tags.displayTags">
+      <SegmentTag
+        v-for="item in this.rendertags"
+        :key="item.content"
+        color="#fff"
+        height="22"
+        :border_color="item.color"
+        :background_color="item.color"
+        :content="item.content"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import SegmentTag from './../lib/tag.vue';
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'listTag',
+  data() {
+    return {
+      rendertags: []
+    };
+  },
+  props: {
+    tags: {
+      type: Array
+    },
+  },
+  watch: {
+    tags() {
+      this.loadTag();
+    }
+  },
+  methods: {
+    loadTag() {
+      this.rendertags = [];
+      for(let i = 0; i < this.tags.length; i += 1) {
+        this.$axios
+          .get(apiurl('/problem/tag/' + this.tags[i]))
+          .then(detail => {
+            let data = detail.data;
+            this.rendertags.push({
+              color: data.res.color,
+              content: data.res.content
+            });
+          });
+      }
+    }
+  },
+  mounted() {
+    this.loadTag();
+  },
+  components: {
+    SegmentTag
+  }
+};
+</script>
diff --git a/src/components/problem/submit.vue b/src/components/problem/submit.vue
index 36c4a5ee..1cdfc394 100644
--- a/src/components/problem/submit.vue
+++ b/src/components/problem/submit.vue
@@ -1,102 +1,121 @@
 <template>
   <div>
-    <h1>Submit problem #{{this.$route.params.id}}</h1>
-    <el-select v-model="lang_num" placeholder="Select language">
-      <el-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value">
-      </el-option>
-    </el-select>
-    <el-input
-      class="code-input"
-      type="textarea"
-      :rows="20"
-      placeholder="Paste your code"
-      required
-      v-model="code"
-    >
-    </el-input>
-    <br>
-    <el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
-    <el-button @click="back();">Back</el-button>
+    <!-- Normal screen -->
+    <el-row :gutter="20" v-if="!smallScreen">
+      <el-col :span="6">
+        <el-card>
+          <div slot="header" class="clearfix"><i class="el-icon-s-operation" /> Language</div>
+          <el-select v-model="lang_num" placeholder="Select language">
+            <el-option
+              v-for="item in langTable"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-card>
+        <el-card class="item">
+          <el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
+          <el-button @click="back();">Back</el-button>
+        </el-card>
+        <el-card class="item">
+          <i class="el-icon-info" /> Information
+          <el-divider>Problem</el-divider>
+          #{{pid}}. {{title}}
+          <el-divider>Limitation</el-divider>
+          {{time}} MS
+          <el-divider direction="vertical"></el-divider>
+          {{memery}} MB
+        </el-card>
+      </el-col>
+      <el-col :span="18">
+        <el-card>
+          <div slot="header" class="clearfix"><i class="el-icon-document" /> Code</div>
+          <el-input
+            class="code-input"
+            type="textarea"
+            :rows="20"
+            placeholder="Paste your code"
+            required
+            v-model="code"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- Mobile screen -->
+    <div v-else>
+      <el-card>
+        <div slot="header" class="clearfix"><i class="el-icon-s-operation" /> Language</div>
+        <el-select v-model="lang_num" placeholder="Select language">
+          <el-option
+            v-for="item in langTable"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-card>
+      <el-card class="float">
+        <el-button type="primary" @click="submit();" icon="el-icon-check" circle />
+        <el-button @click="back();" icon="el-icon-back" circle />
+      </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-document" /> Code</div>
+        <el-input
+          class="code-input"
+          type="textarea"
+          :rows="20"
+          placeholder="Paste your code"
+          required
+          v-model="code"
+        />
+      </el-card>
+    </div>
   </div>
 </template>
 
 <script>
 import apiurl from './../../apiurl';
+import sfconfig from './../../sfconfig';
 
 export default {
   name: 'ProblemSubmit',
   data() {
     return {
+      title: 'Unknown',
+      pid: this.$route.params.id,
+      time: '-',
+      memery: '-',
       code: '',
       lang_num: '-',
       buttonLoading: false,
-      options: [{
-        value: '0',
-        label: 'C++'
-      }, {
-        value: '1',
-        label: 'C++11'
-      }, {
-        value: '2',
-        label: 'C++14'
-      }, {
-        value: '3',
-        label: 'C++17'
-      }, {
-        value: '4',
-        label: 'C++20'
-      }, {
-        value: '5',
-        label: 'C'
-      }, {
-        value: '6',
-        label: 'C#'
-      }, {
-        value: '7',
-        label: 'Clang'
-      }, {
-        value: '8',
-        label: 'Clang11'
-      }, {
-        value: '9',
-        label: 'Clang14'
-      }, {
-        value: '10',
-        label: 'Clang17'
-      }, {
-        value: '11',
-        label: 'Clang20'
-      }, {
-        value: '12',
-        label: 'Rust'
-      }, {
-        value: '13',
-        label: 'Python2'
-      }, {
-        value: '14',
-        label: 'Python3'
-      }, {
-        value: '15',
-        label: 'Pascal'
-      }, {
-        value: '16',
-        label: 'Go'
-      }, {
-        value: '17',
-        label: 'Ruby'
-      }, {
-        value: '18',
-        label: 'Java'
-      }]
+      smallScreen: screen.width < 700,
+      langTable: sfconfig.langTable
     };
   },
   methods: {
+    loadInfo() {
+      this.$axios
+        .get(apiurl('/problem/' + String(this.$route.params.id)))
+        .then(res => {
+          let data = res.data.res;
+          this.title = data.title;
+          this.pid = data.pid;
+          this.memery = data.memory_limit / 1000;
+          this.time = data.time_limit;
+        })
+        .catch(err => {
+          if(err.request.status === 404) {
+            this.$SegmentMessage.error(this, 'Problem not found');
+          } else if(err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Permission denied');
+          } else {
+            this.$SegmentMessage.error(this, 'Unkown error');
+          }
+        });
+    },
     back() {
-      this.$router.push('/problem/'+this.$route.params.id);
+      this.$router.push('/problem/' + this.$route.params.id);
     },
     submit() {
       this.buttonLoading = true;
@@ -108,11 +127,13 @@ export default {
         })
         .then(() => {
           this.$SegmentMessage.success(this, 'Your code has been submited');
-          this.$router.push('/problem/'+this.$route.params.id);
+          this.buttonLoading = false;
         })
         .catch(err => {
           if(err.request.status === 401) {
             this.$SegmentMessage.error(this, 'Please login first');
+          } else if (err.request.status === 400) {
+            this.$SegmentMessage.error(this, 'Input your code');
           } else {
             this.$SegmentMessage.error(this, 'Unkown error');
           }
@@ -121,14 +142,35 @@ export default {
     },
   },
   mounted() {
+    this.loadInfo();
     this.lang_num = String(this.$store.state.user.userlang);
   }
 };
 </script>
 
 <style scoped>
-.code-input {
+.item {
     margin-top: 20px;
-    margin-bottom: 20px;
+}
+
+@media only screen and (max-width: 700px) {
+    .float {
+        z-index: 1000;
+        opacity: 0.5;
+        position: fixed;
+        transition: 0.5s;
+        right: 30px;
+        top: 80px;
+    }
+
+    .float:active {
+        z-index: 1000;
+        opacity: 1;
+    }
+
+    .float:hover {
+        z-index: 1000;
+        opacity: 1;
+    }
 }
 </style>
diff --git a/src/components/user/content.vue b/src/components/user/content.vue
index 5cf7221d..05b5236e 100644
--- a/src/components/user/content.vue
+++ b/src/components/user/content.vue
@@ -6,7 +6,13 @@
           <img src="./../../assets/icon/SOJ-thick-white-background.png" />
         </el-avatar>
       </el-card>
-      <el-card class="item">
+      <!-- Mobile screen -->
+      <el-card class="item float" v-if="!smallScreen">
+        <el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');" icon="el-icon-edit" circle />
+        <el-button @click="$router.go(-1);" icon="el-icon-back" circle />
+      </el-card>
+      <!-- Normal screen -->
+      <el-card class="item" v-else>
         <el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');">Edit</el-button>
         <el-button @click="$router.go(-1);">Back</el-button>
       </el-card>
@@ -17,7 +23,7 @@
           <el-card shadow="never">
             <div slot="header" class="clearfix">
               <i class="el-icon-user" />
-              <div class="lable"> User</div>
+              <span class="label"> User</span>
               Name
             </div>
             {{username}}
@@ -25,8 +31,9 @@
         </el-col>
         <el-col :span="6">
           <el-card shadow="never">
-            <div slot="header" class="clearfix"><i class="el-icon-warning-outline" />
-              <div class="lable"> User</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-warning-outline" />
+              <span class="label"> User</span>
               ID
             </div>
             {{userid}}
@@ -37,7 +44,7 @@
         <el-col :span="12">
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix">
-              <i class="el-icon-message" />Email
+              <i class="el-icon-message" /> Email
             </div>
             {{email}}
           </el-card>
@@ -46,7 +53,7 @@
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix">
               <i class="el-icon-date" />
-              <div class="lable"> Time Joined</div>
+              <span class="label"> Time Joined</span>
             </div>
             {{timeJoin}}
           </el-card>
@@ -55,35 +62,45 @@
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix">
               <i class="el-icon-time" />
-              <div class="lable"> Last Login</div>
+              <span class="label"> Last Login</span>
             </div>
             {{lastLogin}}
           </el-card>
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col :span="8">
+        <el-col :span="4">
+          <el-card class="item">
+            <div slot="header" class="clearfix">
+              <i class="el-icon-s-operation" />
+              <span class="label"> Lang</span>
+            </div>
+            {{langTable[lang].label}}
+          </el-card>
+        </el-col>
+        <el-col :span="6">
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix">
               <i class="el-icon-check" />
-              <div class="lable"> Sloved</div>
-              <div class="small-lable"> AC</div>
+              <span class="label"> Solved</span>
+              <div class="small-label"> AC</div>
             </div>
             <div class="clearfix">
               {{solved}}
-              <div class="lable"> Problems</div>
+              <span class="label"> Problems</span>
             </div>
           </el-card>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="6">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-upload2" />
-              <div class="lable"> Submited</div>
-              <div class="small-lable"> SU</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-upload2" />
+              <span class="label"> Submited</span>
+              <div class="small-label"> SU</div>
             </div>
             <div class="clearfix">
               {{submit}}
-              <div class="lable"> Times</div>
+              <span class="label"> Times</span>
             </div>
           </el-card>
         </el-col>
@@ -91,7 +108,7 @@
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix">
               <i class="el-icon-finished" />
-              <div class="lable"> AC</div>
+              <span class="label"> AC</span>
               Rate
             </div>
             <el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
@@ -99,7 +116,10 @@
         </el-col>
       </el-row>
       <el-card shadow="never" class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introductions</div>
+        <div slot="header" class="clearfix">
+          <i class="el-icon-chat-line-square" />
+          Introductions
+        </div>
         <MarkdownContainer v-if="introduction" :content="introduction"/>
       </el-card>
       <el-card class="item">
@@ -116,6 +136,7 @@
 import timeFormat from './../../methods/time';
 import apiurl from './../../apiurl';
 import MarkdownContainer from './../lib/MarkdownContainer.vue';
+import sfconfig from './../../sfconfig';
 
 export default {
   name: 'UserHomepage',
@@ -136,7 +157,10 @@ export default {
       isRoot: false,
       isStaff: false,
       isActive: true,
-      avatarWidth: 800 < screen.width ? 300 : screen.width - 40
+      avatarWidth: 800 < screen.width ? 300 : screen.width - 40,
+      smallScreen: 700 < screen.width,
+      langTable: sfconfig.langTable,
+      lang: 0
     };
   },
   methods: {
@@ -156,7 +180,7 @@ export default {
           this.isRoot = data.is_superuser;
           this.isStaff = data.is_staff;
           this.isActive = data.is_active;
-          this.userLoading = false;
+          this.lang = data.lang;
           if (this.submit === 0) {
             this.rate = 100;
           } else {
@@ -166,6 +190,7 @@ export default {
           if (this.$store.state.user.isStaff || this.userid == String(this.$store.state.user.userid)) {
             this.ismine = true;
           }
+          this.userLoading = false;
         })
         .catch(err => {
           if(err.request.status === 404) {
@@ -173,6 +198,7 @@ export default {
           } else {
             this.$SegmentMessage.error(this, 'Unkown error');
           }
+          this.userLoading = false;
         });
     },
     ACRateColorMode(percentage) {
@@ -196,7 +222,7 @@ export default {
 </script>
 
 <style scoped>
-.small-lable {
+.small-label {
     display: none;
 }
 
@@ -228,12 +254,33 @@ export default {
         max-width: 100vw;
     }
 
-    .lable {
+    .label {
         display: none;
     }
 
-    .small-lable {
+    .small-label {
         display: unset;
     }
 }
+
+@media only screen and (max-width: 700px) {
+    .float {
+        z-index: 1000;
+        opacity: 0.5;
+        position: fixed;
+        transition: 0.5s;
+        right: 30px;
+        top: 50px;
+    }
+
+    .float:active {
+        z-index: 1000;
+        opacity: 1;
+    }
+
+    .float:hover {
+        z-index: 1000;
+        opacity: 1;
+    }
+}
 </style>
diff --git a/src/components/user/edit.vue b/src/components/user/edit.vue
index b5ce0011..1451b72e 100644
--- a/src/components/user/edit.vue
+++ b/src/components/user/edit.vue
@@ -2,26 +2,81 @@
   <div class="content">
     <div id="tool-bar">
       <el-card shadow="never">
-        <el-avatar shape="square" :size="avatarWidth"><img src="./../../assets/icon/SOJ-thick-white-background.png" /></el-avatar>
+        <el-avatar shape="square" :size="avatarWidth">
+          <img src="./../../assets/icon/SOJ-thick-white-background.png" />
+        </el-avatar>
       </el-card>
-      <el-card class="item">
-        <el-button v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot" type="primary" @click="submit()" :loading="buttonLoading">Submit</el-button>
+      <!-- Mobile screen -->
+      <el-card class="item float" v-if="smallScreen">
+        <el-button
+          v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot"
+          type="primary"
+          @click="submit()"
+          icon="el-icon-check"
+          circle
+        />
+        <el-button
+          @click="$router.go(-1);"
+          icon="el-icon-back"
+          circle
+        />
+      </el-card>
+      <!-- Normal screen -->
+      <el-card class="item" v-else>
+        <el-button
+          v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot"
+          type="primary"
+          @click="submit()"
+          :loading="buttonLoading"
+        >
+          Submit
+        </el-button>
         <el-button @click="$router.go(-1);">Back</el-button>
       </el-card>
     </div>
     <div v-loading="!(isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot)" class="edit-content">
-      <el-card>
-        <div slot="header" class="clearfix"><i class="el-icon-user" /> User Name</div>
-        <el-input v-model="username"></el-input>
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="16">
+          <el-card>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-user" />
+              User Name
+            </div>
+            <el-input v-model="username"></el-input>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-s-operation" />
+              <div class="label">Default Language</div>
+              <div class="small-label">Lang</div>
+            </div>
+            <el-select v-model="lang" placeholder="Select language">
+              <el-option
+                v-for="item in langTable"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-card>
+        </el-col>
+      </el-row>
       <el-card class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Permissions</div>
+        <div slot="header" class="clearfix">
+          <i class="el-icon-chat-line-square" />
+          Permissions
+        </div>
         <el-checkbox v-model="isStaff" :disabled="!isStaffMe && !isRootMe">Staff</el-checkbox>
         <el-checkbox v-model="isRoot" :disabled="!isStaffMe && !isRootMe">Root</el-checkbox>
         <el-checkbox v-model="isActive" :disabled="(!isStaffMe && !isRootMe) || isMine">Active</el-checkbox>
       </el-card>
       <el-card class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introductions</div>
+        <div slot="header" class="clearfix">
+          <i class="el-icon-chat-line-square" />
+          Introductions
+        </div>
         <MarkdownEditor v-model="introduction" />
       </el-card>
     </div>
@@ -31,6 +86,7 @@
 <script>
 import apiurl from './../../apiurl';
 import MarkdownEditor from './../lib/MarkdownEditor.vue';
+import sfconfig from './../../sfconfig';
 
 export default {
   name: 'UserEdit',
@@ -47,7 +103,10 @@ export default {
       isStaffMe: false,
       isActiveMe: true,
       buttonLoading: false,
-      avatarWidth: 800 < screen.width ? 400 : screen.width - 40
+      lang: '-',
+      avatarWidth: 800 < screen.width ? 400 : screen.width - 40,
+      smallScreen: screen.width < 700,
+      langTable: sfconfig.langTable
     };
   },
   methods: {
@@ -68,6 +127,7 @@ export default {
             this.isStaff = data.is_staff;
             this.isRoot = data.is_superuser;
             this.isActive = data.is_active;
+            this.lang = String(data.lang);
           }
         });
     },
@@ -79,7 +139,8 @@ export default {
           introduction: this.introduction,
           is_staff: this.isStaff,
           is_superuser: this.isRoot,
-          is_active: this.isActive
+          is_active: this.isActive,
+          lang: this.lang
         })
         .then(() => {
           this.buttonLoading = false;
@@ -89,6 +150,9 @@ export default {
               isStaff: this.isStaff,
               isRoot: this.isRoot
             });
+            this.$store.commit('userLang', {
+              lang: this.lang
+            });
           }
         });
     }
@@ -119,7 +183,15 @@ export default {
     margin-top: 20px;
 }
 
-@media only screen and (max-width: 800px) {
+.small-label {
+    display: none;
+}
+
+.clearfix {
+    display: -webkit-box;
+}
+
+@media only screen and (max-width: 700px) {
     .content {
         display: inline;
     }
@@ -131,5 +203,32 @@ export default {
     .edit-content {
         margin-top: 20px;
     }
+
+    .label {
+        display: none;
+    }
+
+    .small-label {
+        display: unset;
+    }
+
+    .float {
+        z-index: 1000;
+        opacity: 0.5;
+        position: fixed;
+        transition: 0.5s;
+        right: 30px;
+        top: 50px;
+    }
+
+    .float:active {
+        z-index: 1000;
+        opacity: 1;
+    }
+
+    .float:hover {
+        z-index: 1000;
+        opacity: 1;
+    }
 }
 </style>
diff --git a/src/components/user/login.vue b/src/components/user/login.vue
index 36db0298..9e27b008 100644
--- a/src/components/user/login.vue
+++ b/src/components/user/login.vue
@@ -9,16 +9,28 @@
       class="max-screen"
       >
       <el-form :model="ldata" ref="loginForm" :rules="rules">
-        <div class="icon-lable"><i class="el-icon-user" /> Username</div>
+        <div class="icon-lable">
+          <i class="el-icon-user" />
+          Username
+        </div>
         <el-form-item prop="username">
           <el-input v-model="ldata.username"></el-input>
         </el-form-item>
-        <div class="icon-lable"><i class="el-icon-lock" /> Password</div>
+        <div class="icon-lable">
+          <i class="el-icon-lock" />
+          Password
+        </div>
         <el-form-item prop="password">
           <el-input type="password" v-model="ldata.password"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Login</el-button>
+          <el-button
+            type="primary"
+            v-on:click="onSubmit();"
+            :loading="buttonLoading"
+          >
+            Login
+          </el-button>
           <el-button v-on:click="$store.state.user.showlogin = false">Cancel</el-button>
           <el-button v-on:click="reset();">Reset</el-button>
         </el-form-item>
diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index 8de7ea20..01860066 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -1,27 +1,59 @@
 <template>
   <div>
-    <el-dialog title="Register" :visible.sync="$store.state.user.showregister" :destroy-on-close="true" :close-on-click-modal="false" width="500px">
-      <el-form :model="ldata" ref="registerForm" :rules="rules" :status-icon="true">
-        <div class="icon-lable form-required"><i class="el-icon-user" /> Username</div>
+    <el-dialog
+      title="Register"
+      :visible.sync="$store.state.user.showregister"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      width="500px"
+    >
+      <el-form
+        :model="ldata"
+        ref="registerForm"
+        :rules="rules"
+        :status-icon="true"
+      >
+        <div class="icon-lable form-required">
+          <i class="el-icon-user" />
+          Username
+        </div>
         <el-form-item prop="username">
           <el-input v-model="ldata.username"></el-input>
         </el-form-item>
-        <div class="icon-lable form-required"><i class="el-icon-lock" /> Password</div>
+        <div class="icon-lable form-required">
+          <i class="el-icon-lock" />
+          Password
+        </div>
         <el-form-item prop="password">
           <el-input type="password" v-model="ldata.password"></el-input>
         </el-form-item>
-        <div class="icon-lable form-required"><i class="el-icon-lock" /> Repeat password</div>
+        <div class="icon-lable form-required">
+          <i class="el-icon-lock" />
+          Repeat password
+        </div>
         <el-form-item prop="passwdrepeat">
           <el-input type="password" v-model="ldata.passwdrepeat"></el-input>
         </el-form-item>
-        <div class="icon-lable form-required"><i class="el-icon-message" /> Email</div>
+        <div class="icon-lable form-required">
+          <i class="el-icon-message" />
+          Email
+        </div>
         <el-form-item prop="email">
           <el-input type="email" v-model="ldata.email"></el-input>
         </el-form-item>
-        <div class="icon-lable form-required"><i class="el-icon-check" /> Captcha</div>
+        <div class="icon-lable form-required">
+          <i class="el-icon-check" />
+          Captcha
+        </div>
         <captcha ref="captchaElement" class="margin-bottom" />
         <el-form-item>
-          <el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Register</el-button>
+          <el-button
+            type="primary"
+            v-on:click="onSubmit();"
+            :loading="buttonLoading"
+          >
+            Register
+          </el-button>
           <el-button v-on:click="$store.state.user.showregister = false;">Cancel</el-button>
           <el-button v-on:click="reset();">Reset</el-button>
         </el-form-item>
diff --git a/src/main.js b/src/main.js
index 0f5b1930..333e6daa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,4 +43,4 @@ new Vue({
   router,
   store,
   render: h => h(App),
-}).$mount('#app');
\ No newline at end of file
+}).$mount('#app');
diff --git a/src/message.js b/src/message.js
index b754fa4d..7886c127 100644
--- a/src/message.js
+++ b/src/message.js
@@ -5,7 +5,7 @@ export default {
       showClose: true,
       message: content,
       type: 'success',
-      customClass: 'highzindex'
+      customClass: 'top-zindex'
     });
   },
   error: (element, content) => {
@@ -13,7 +13,7 @@ export default {
       showClose: true,
       message: content,
       type: 'error',
-      customClass: 'highzindex'
+      customClass: 'top-zindex'
     });
   }
 };
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 4f4af096..2c2c22c8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -25,6 +25,9 @@ let router = new Router({
   }, {
     path: '/problem/:id/submit',
     component: () => import('./components/problem/submit.vue')
+  }, {
+    path: '/app/editor',
+    component: () => import('./components/app/editor.vue')
   }, {
     path: '*',
     component: () => import('./components/404.vue')
diff --git a/src/sfconfig.js b/src/sfconfig.js
index 5594c02f..48248087 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -1,6 +1,6 @@
 export default {
   api: {
-    server: 'http://localhost:8000/api'
+    server: 'http://backend.soj.szdytom.tk/api'
   },
   markdown: {
     gfm: true,
@@ -10,5 +10,63 @@ export default {
     smartLists: true,
     smartypants: false,
   },
+  langTable: [{
+    value: '0',
+    label: 'C++'
+  }, {
+    value: '1',
+    label: 'C++11'
+  }, {
+    value: '2',
+    label: 'C++14'
+  }, {
+    value: '3',
+    label: 'C++17'
+  }, {
+    value: '4',
+    label: 'C++20'
+  }, {
+    value: '5',
+    label: 'C'
+  }, {
+    value: '6',
+    label: 'C#'
+  }, {
+    value: '7',
+    label: 'Clang'
+  }, {
+    value: '8',
+    label: 'Clang11'
+  }, {
+    value: '9',
+    label: 'Clang14'
+  }, {
+    value: '10',
+    label: 'Clang17'
+  }, {
+    value: '11',
+    label: 'Clang20'
+  }, {
+    value: '12',
+    label: 'Rust'
+  }, {
+    value: '13',
+    label: 'Python2'
+  }, {
+    value: '14',
+    label: 'Python3'
+  }, {
+    value: '15',
+    label: 'Pascal'
+  }, {
+    value: '16',
+    label: 'Go'
+  }, {
+    value: '17',
+    label: 'Ruby'
+  }, {
+    value: '18',
+    label: 'Java'
+  }],
   captchaKeyMax: 2000000000
-};
\ No newline at end of file
+};
diff --git a/src/store/store.js b/src/store/store.js
index 9d6f0e3d..1b5477d1 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -5,10 +5,12 @@ Vue.use(Vuex);
 
 import userstore from './user';
 import captchastore from './captcha';
+import tagsstore from './tags';
 
 export default new Vuex.Store({
   modules: {
     user: userstore,
-    captcha: captchastore
+    captcha: captchastore,
+    tags: tagsstore,
   }
 });
\ No newline at end of file
diff --git a/src/store/tags.js b/src/store/tags.js
new file mode 100644
index 00000000..5342f35d
--- /dev/null
+++ b/src/store/tags.js
@@ -0,0 +1,12 @@
+const tagsstore = {
+  state: {
+    displayTags: false
+  },
+  mutations: {
+    setDisplayTag(state, data) {
+      state.displayTags = data.val;
+    }
+  }
+};
+
+export default tagsstore;
\ No newline at end of file