diff --git a/package-lock.json b/package-lock.json
index 6ae5320cf..42a81e9a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4378,6 +4378,40 @@
       "integrity": "sha512-fVcdyuKRr0EZ4fjWl3c+gp1BANFJD1+RaWa2UPYfMZ6jCtp5RG00kSaXnK/dE5sYzt4kaWJ9qdxqUfc0d9kX0w==",
       "dev": true
     },
+    "eslint-plugin-vue": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.6.0.tgz",
+      "integrity": "sha512-qYpKwAvpcQXyUXVcG8Zd+fxHDx9iSgTQuO7dql7Ug/2BCvNNDr6s3I9p8MoUo23JJdO7ZAjW3vSwY/EBf4uBcw==",
+      "requires": {
+        "eslint-utils": "^2.1.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.3.2",
+        "vue-eslint-parser": "^7.5.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
     "eslint-scope": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
@@ -4387,6 +4421,19 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+    },
     "espree": {
       "version": "3.5.4",
       "resolved": "http://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
@@ -7123,8 +7170,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
     "negotiator": {
       "version": "0.6.1",
@@ -12070,6 +12116,98 @@
         "lodash.debounce": "^4.0.8"
       }
     },
+    "vue-eslint-parser": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",
+      "integrity": "sha512-6EHzl00hIpy4yWZo3qSbtvtVw1A1cTKOv1w95QSuAqGgk4113XtRjvNIiEGo49r0YWOPYsrmI4Dl64axL5Agrw==",
+      "requires": {
+        "debug": "^4.1.1",
+        "eslint-scope": "^5.0.0",
+        "eslint-visitor-keys": "^1.1.0",
+        "espree": "^6.2.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.15"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
+        "acorn-jsx": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+          "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng=="
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "espree": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+          "requires": {
+            "acorn": "^7.1.1",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "esquery": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+          "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+          "requires": {
+            "estraverse": "^5.1.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+            }
+          }
+        },
+        "esrecurse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+          "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+          "requires": {
+            "estraverse": "^5.2.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+            }
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",
diff --git a/package.json b/package.json
index aafe0c56e..a6eb5f669 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "each-async": "^1.1.1",
     "echarts": "^3.8.5",
     "element-ui": "^2.3.7",
+    "eslint-plugin-vue": "^7.6.0",
     "font-awesome": "^4.7.0",
     "highlight.js": "^9.12.0",
     "iview": "^2.13.0",
diff --git a/src/pages/oj/views/general/Announcements.vue b/src/pages/oj/views/general/Announcements.vue
index e497532d5..119f21627 100644
--- a/src/pages/oj/views/general/Announcements.vue
+++ b/src/pages/oj/views/general/Announcements.vue
@@ -36,12 +36,40 @@
       </template>
     </transition-group>
   </Panel>
+  <Row v-if="!isContest" type="flex" :gutter="10" style="margin-top: 70px;">
+    <Col  :span="12">
+              <Panel shadow style="padding-top: 0px;padding-bottom: 10px;">
+                <div slot="title" style="margin-left: -10px;margin-bottom: -10px;">Bài tập mới up lên</div>
+                <ul style="margin-left: 40px;margin-bottom: 20px;">
+                  <li style="padding: 5px 0px;"  v-for="p in problemList" :key="p.id">
+                    <a class="link-style" :href="'/problem/' + p._id">{{p._id}} - {{p.title}}</a>
+                  </li>
+                </ul>
+              </Panel>
+            </Col>
+            <Col  :span="12">
+              <Panel shadow style="padding: 10px;padding-bottom: 10px;">
+                <div slot="title" style="margin-left: -10px;margin-bottom: -10px;">TOP 20 PRO</div>
+                <ol style="margin-left: 40px;margin-bottom: 20px;">
+                  <li style="padding: 6px 0px;" v-for="u in dataRank" :key="u.id">
+                    <a :style="'font-weight: 600;color: ' + u.color" :href="'/user-home?username=' + u.user.username"
+                      :title=" u.title + ' ' + u.user.username">
+                    {{u.user.username}}
+                    </a> - đã giải {{u.accepted_number}} bài
+                  </li>
+                </ol>
+              </Panel>
+            </Col>
+        </Row>
+    </Col>
+  </Row>
 </template>
 
 <script>
   import api from '@oj/api'
   import Pagination from '@oj/components/Pagination'
-
+  import { mapState } from 'vuex'
+  import { RULE_TYPE, USER_TYPE } from '@/utils/constants'
   export default {
     name: 'Announcement',
     components: {
@@ -51,6 +79,17 @@
       return {
         limit: 10,
         total: 10,
+        dataRank: [],
+        rankLimit: 20,
+        problemList: [],
+        problemLimit: 15,
+        query: {
+          keyword: '',
+          difficulty: '',
+          tag: '',
+          page: 1,
+          orderby: '-create_time'
+        },
         btnLoading: false,
         announcements: [],
         announcement: '',
@@ -59,6 +98,8 @@
     },
     mounted () {
       this.init()
+      this.getRankData()
+      this.getProblemList()
     },
     methods: {
       init () {
@@ -68,6 +109,23 @@
           this.getAnnouncementList()
         }
       },
+      getRankData () {
+        api.getUserRank(0, this.rankLimit, RULE_TYPE.ACM).then(res => {
+          this.dataRank = res.data.data.results
+          for (let i in this.dataRank) {
+            this.dataRank[i]['color'] = '#365899'
+            this.dataRank[i]['title'] = 'User'
+          }
+        }).catch(() => {
+        })
+      },
+      getProblemList () {
+        let offset = 0
+        api.getProblemList(offset, this.problemLimit, this.query).then(res => {
+          this.problemList = res.data.data.results
+          console.log(res.data.data.results)
+        })
+      },
       getAnnouncementList (page = 1) {
         this.btnLoading = true
         api.getAnnouncementList((page - 1) * this.limit, this.limit).then(res => {
diff --git a/src/pages/oj/views/problem/Problem.vue b/src/pages/oj/views/problem/Problem.vue
index 559740289..1c169b7f2 100644
--- a/src/pages/oj/views/problem/Problem.vue
+++ b/src/pages/oj/views/problem/Problem.vue
@@ -305,6 +305,9 @@
     },
     beforeRouteEnter (to, from, next) {
       let problemCode = storage.get(buildProblemCodeKey(to.params.problemID, to.params.contestID))
+      if (!problemCode) {
+        problemCode = storage.get(buildProblemCodeKey('prefer_ide'))
+      }
       if (problemCode) {
         next(vm => {
           vm.language = problemCode.language
@@ -318,6 +321,7 @@
     mounted () {
       this.$store.commit(types.CHANGE_CONTEST_ITEM_VISIBLE, {menu: false})
       this.init()
+      this.getProblemList()
     },
     methods: {
       ...mapActions(['changeDomTitle']),
diff --git a/src/pages/oj/views/submission/SubmissionList.vue b/src/pages/oj/views/submission/SubmissionList.vue
index e2a826acb..3a51ab064 100644
--- a/src/pages/oj/views/submission/SubmissionList.vue
+++ b/src/pages/oj/views/submission/SubmissionList.vue
@@ -56,7 +56,7 @@
 <script>
   import { mapGetters } from 'vuex'
   import api from '@oj/api'
-  import { JUDGE_STATUS, USER_TYPE, RULE_TYPE } from '@/utils/constants'
+  import { RULE_TYPE, JUDGE_STATUS, USER_TYPE } from '@/utils/constants'
   import utils from '@/utils/utils'
   import time from '@/utils/time'
   import Pagination from '@/pages/oj/components/Pagination'
@@ -197,6 +197,7 @@
     },
     mounted () {
       this.init()
+      this.getRankData()
       this.JUDGE_STATUS = Object.assign({}, JUDGE_STATUS)
       // 去除submitting的状态 和 两个
       delete this.JUDGE_STATUS['9']
@@ -222,7 +223,7 @@
           this.dataRank = res.data.data.result
           for (let i in this.dataRank) {
             this.dataRank[i]['color'] = '#365899'
-            this.dataRank[i]['title'] = 'User'
+            this.dataRank[i]['title'] = 'Xem trang cá nhân'
           }
         }).catch(() => {
         })