diff --git a/oj/.eslintrc.js b/oj/.eslintrc.js
index 8e6549e..2cf912d 100644
--- a/oj/.eslintrc.js
+++ b/oj/.eslintrc.js
@@ -17,6 +17,15 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    "space-before-function-paren": ["error", {
+      "anonymous": "always",
+      "named": "never",
+      "asyncArrow": "always"
+    }],
+    "no-irregular-whitespace": ["error", {
+      "skipComments": true,
+      "skipTemplates": true
+    }]
   }
 }
diff --git a/oj/src/App.vue b/oj/src/App.vue
index 9119e91..93ee596 100644
--- a/oj/src/App.vue
+++ b/oj/src/App.vue
@@ -1,80 +1,81 @@
 <template>
+<div>
   <div>
-    <div>
-      <SideMenu></SideMenu>
-    </div>
-    <div class="content-app">
-      <router-view></router-view>
-      <div class="footer">
-        Build Version: {{ version }}
-      </div>
+    <Navbar></Navbar>
+  </div>
+  <div class="content-app">
+    <router-view></router-view>
+    <div class="footer">
+      Build Version: {{ version }}
     </div>
   </div>
+</div>
 </template>
 
 <script>
-  import 'font-awesome/css/font-awesome.min.css'
-  import SideMenu from './components/SideMenu.vue'
-  import api from './api.js'
+import 'font-awesome/css/font-awesome.min.css'
+// import SideMenu from './components/SideMenu.vue'
+import Navbar from './components/Navbar.vue'
+// import api from './api.js'
 
-  export default {
-    name: 'app',
-    data () {
-      return {
-        version: process.env.VERSION
-      }
-    },
-    components: {
-      SideMenu
-    },
-    methods: {},
-    mounted () {
-      api.login('root', 'rootroot').then(res => {})
+export default {
+  name: 'app',
+  data() {
+    return {
+      version: process.env.VERSION
     }
-  }
+  },
+  components: {
+    Navbar
+  },
+  methods: {}
+  // mounted () {
+  //   api.login('root', 'rootroot').then(res => {})
+  // }
+}
 </script>
 
 <style lang="less">
-  body {
+body {
     margin: 0;
     background-color: rgb(236, 242, 247)!important;
-  }
+}
 
-  a {
+a {
     background-color: transparent;
-    -webkit-text-decoration-skip: objects
-  }
+    -webkit-text-decoration-skip: objects;
+}
+a:active,
+a:hover {
+    outline-width: 0;
+}
 
-  a:active, a:hover {
-    outline-width: 0
-  }
+img {
+    border-style: none;
+}
 
-  img {
-    border-style: none
-  }
-
-  body {
+body {
     font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
     overflow: auto;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
     background-color: #EDECEC;
     overflow-y: scroll;
-  }
+}
 
-  * {
+* {
     box-sizing: border-box;
-  }
+}
 
-  .content-app {
+.content-app {
     padding-top: 20px;
-    padding-right:10px;
-    padding-left: 210px;
-  }
+    padding-right: 10px;
+    padding-left: 10px;
+}
 
-  .footer {
+.footer {
     margin: 15px;
     text-align: center;
     font-size: small;
-  }
+}
 </style>
diff --git a/oj/src/api.js b/oj/src/api.js
index 76f397c..b4f6f17 100644
--- a/oj/src/api.js
+++ b/oj/src/api.js
@@ -5,7 +5,7 @@ Vue.use(VueResource)
 Vue.http.options.root = '/api'
 Vue.http.options.emulateJSON = false
 
-function getCookie (name) {
+function getCookie(name) {
   let allCookies = document.cookie.split('; ')
   for (let i = 0; i < allCookies.length; i++) {
     let cookie = allCookies[i].split('=')
@@ -24,8 +24,8 @@ Vue.http.interceptors.push((request, next) => {
 
 export default {
   // 登录
-  login (username, password) {
-    return ajax('login', 'get', {
+  login(username, password) {
+    return ajax('/api/login', 'post', {
       options: {
         params: {
           username,
@@ -35,7 +35,7 @@ export default {
     })
   },
   // 获取公告列表
-  getAnnouncementList (offset, limit) {
+  getAnnouncementList(offset, limit) {
     return ajax('admin/announcement', 'get', {
       options: {
         params: {
@@ -47,7 +47,7 @@ export default {
     })
   },
   // 删除公告
-  deleteAnnouncement (id) {
+  deleteAnnouncement(id) {
     return ajax('admin/announcement', 'delete', {
       options: {
         params: {
@@ -57,7 +57,7 @@ export default {
     })
   },
   // 修改公告
-  modifyAnnouncement (id, title, content, visible) {
+  modifyAnnouncement(id, title, content, visible) {
     return ajax('admin/announcement', 'put', {
       body: {
         id,
@@ -68,7 +68,7 @@ export default {
     })
   },
   // 添加公告
-  createAnnouncement (title, content, visible) {
+  createAnnouncement(title, content, visible) {
     return ajax('admin/announcement', 'post', {
       body: {
         title,
@@ -78,8 +78,12 @@ export default {
     })
   },
   // 获取用户列表
-  getUserList (offset, limit, keyword) {
-    let params = {paging: true, offset, limit}
+  getUserList(offset, limit, keyword) {
+    let params = {
+      paging: true,
+      offset,
+      limit
+    }
     if (keyword) {
       params.keyword = keyword
     }
@@ -90,7 +94,7 @@ export default {
     })
   },
   // 获取单个用户信息
-  getUser (id) {
+  getUser(id) {
     return ajax('admin/user', 'get', {
       options: {
         params: {
@@ -100,39 +104,39 @@ export default {
     })
   },
   // 编辑用户
-  editUser (body) {
+  editUser(body) {
     return ajax('admin/user', 'put', {
       body
     })
   },
-  getLanguages () {
+  getLanguages() {
     return ajax('languages', 'get')
   },
-  getSMTPConfig () {
+  getSMTPConfig() {
     return ajax('admin/smtp', 'get')
   },
-  createSMTPConfig (body) {
+  createSMTPConfig(body) {
     return ajax('admin/smtp', 'post', {
       body
     })
   },
-  editSMTPConfig (body) {
+  editSMTPConfig(body) {
     return ajax('admin/smtp', 'put', {
       body
     })
   },
-  getWebsiteConfig () {
+  getWebsiteConfig() {
     return ajax('admin/website', 'get')
   },
-  editWebsiteConfig (config) {
+  editWebsiteConfig(config) {
     return ajax('admin/website', 'post', {
       body: config
     })
   },
-  getJudgeServer () {
+  getJudgeServer() {
     return ajax('admin/judge_server', 'get')
   },
-  deleteJudgeServer (hostname) {
+  deleteJudgeServer(hostname) {
     return ajax('admin/judge_server', 'delete', {
       options: {
         params: {
@@ -141,12 +145,12 @@ export default {
       }
     })
   },
-  createContest (body) {
+  createContest(body) {
     return ajax('admin/contest', 'post', {
       body: body
     })
   },
-  getContest (id) {
+  getContest(id) {
     return ajax('admin/contest', 'get', {
       options: {
         params: {
@@ -155,13 +159,17 @@ export default {
       }
     })
   },
-  editContest (body) {
+  editContest(body) {
     return ajax('admin/contest', 'put', {
       body
     })
   },
-  getContestList (offset, limit, keyword) {
-    let params = {paging: true, offset, limit}
+  getContestList(offset, limit, keyword) {
+    let params = {
+      paging: true,
+      offset,
+      limit
+    }
     if (keyword) {
       params.keyword = keyword
     }
@@ -171,7 +179,7 @@ export default {
       }
     })
   },
-  getContestAnnouncementList (contestId) {
+  getContestAnnouncementList(contestId) {
     return ajax('admin/contest/announcement', 'get', {
       options: {
         params: {
@@ -180,12 +188,12 @@ export default {
       }
     })
   },
-  createContestAnnouncement (body) {
+  createContestAnnouncement(body) {
     return ajax('admin/contest/announcement', 'post', {
       body
     })
   },
-  deleteContestAnnouncement (id) {
+  deleteContestAnnouncement(id) {
     return ajax('admin/contest/announcement', 'delete', {
       options: {
         params: {
@@ -194,20 +202,20 @@ export default {
       }
     })
   },
-  getProblemTagList () {
+  getProblemTagList() {
     return ajax('problem/tags', 'get')
   },
-  createProblem (body) {
+  createProblem(body) {
     return ajax('admin/problem', 'post', {
       body
     })
   },
-  editProblem (body) {
+  editProblem(body) {
     return ajax('admin/problem', 'put', {
       body
     })
   },
-  getProblem (id) {
+  getProblem(id) {
     return ajax('admin/problem', 'get', {
       options: {
         params: {
@@ -216,8 +224,12 @@ export default {
       }
     })
   },
-  getProblemList (offset, limit, keyword) {
-    let params = {paging: true, offset, limit}
+  getProblemList(offset, limit, keyword) {
+    let params = {
+      paging: true,
+      offset,
+      limit
+    }
     if (keyword) {
       params.keyword = keyword
     }
@@ -227,8 +239,13 @@ export default {
       }
     })
   },
-  getContestProblemList (offset, limit, keyword, contestId) {
-    let params = {paging: true, offset, limit, contest_id: contestId}
+  getContestProblemList(offset, limit, keyword, contestId) {
+    let params = {
+      paging: true,
+      offset,
+      limit,
+      contest_id: contestId
+    }
     if (keyword) {
       params.keyword = keyword
     }
@@ -238,7 +255,7 @@ export default {
       }
     })
   },
-  getContestProblem (id) {
+  getContestProblem(id) {
     return ajax('admin/contest/problem', 'get', {
       options: {
         params: {
@@ -247,12 +264,12 @@ export default {
       }
     })
   },
-  createContestProblem (body) {
+  createContestProblem(body) {
     return ajax('admin/contest/problem', 'post', {
       body
     })
   },
-  editContestProblem (body) {
+  editContestProblem(body) {
     return ajax('admin/contest/problem', 'put', {
       body
     })
@@ -271,8 +288,8 @@ export default {
  @return Promise
  */
 
-function ajax (url, type, options) {
-  return new Promise(function (resolve, reject) {
+function ajax(url, type, options) {
+  return new Promise(function(resolve, reject) {
     options = options || {}
     if (options.body === undefined) {
       options.body = options.options
diff --git a/oj/src/components/Navbar.vue b/oj/src/components/Navbar.vue
new file mode 100644
index 0000000..26c853c
--- /dev/null
+++ b/oj/src/components/Navbar.vue
@@ -0,0 +1,38 @@
+<template>
+<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+  <el-row :gutter="10">
+    <el-col :xs="3" :sm="3" :lg="3">&nbsp;</el-col>
+    <el-col :xs="2" :sm="2" :lg="2">
+      <div style="color:#bfcbd9;margin-top:16px;font-size:20px;">QDUOJ</div>
+    </el-col>
+    <el-col :xs="16" :sm="16" :lg="16">
+      <el-menu-item index="1">题目</el-menu-item>
+      <el-menu-item index="2">提交</el-menu-item>
+      <el-menu-item index="3">比赛</el-menu-item>
+      <el-menu-item index="4">排名</el-menu-item>
+      <el-menu-item index="5">帮助</el-menu-item>
+    </el-col>
+    <el-col :xs="3" :sm="3" :lg="3">
+      <el-submenu index="2">
+        <template slot="title">Hieda no Chiaki
+</template>
+          <el-menu-item index="2-1">我的主页</el-menu-item>
+          <el-menu-item index="2-2">我的提交</el-menu-item>
+          <el-menu-item index="2-3">设置</el-menu-item>
+          <el-menu-item index="2-4">退出</el-menu-item>
+        </el-submenu>
+      </el-col>
+    </el-row>
+  </el-menu>
+</template>
+
+
+<script>
+export default {
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  }
+}
+</script>
diff --git a/oj/src/main.js b/oj/src/main.js
index a22975d..273b96b 100644
--- a/oj/src/main.js
+++ b/oj/src/main.js
@@ -27,12 +27,17 @@ Vue.component(Cancel.name, Cancel)
 
 // 引入 view 组件
 import { Announcement, User, Conf, JudgeServer, Problem, Contest, ContestList,
-  ContestAnnouncement, ProblemList } from './views'
+  ContestAnnouncement, ProblemList, Login } from './views'
 
 const router = new VueRouter({
   mode: 'history',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
     {
       path: '/announcement',
       name: 'announcement',
diff --git a/oj/src/views/index.js b/oj/src/views/index.js
index c4d8942..c404346 100644
--- a/oj/src/views/index.js
+++ b/oj/src/views/index.js
@@ -7,8 +7,9 @@ import ProblemList from './problem/ProblemList.vue'
 import ContestList from './contest/ContestList.vue'
 import Contest from './contest/Contest.vue'
 import ContestAnnouncement from './contest/Announcement.vue'
+import Login from './user/Login.vue'
 
 export {
   Announcement, User, Conf, JudgeServer, Problem, ProblemList, Contest,
-  ContestList, ContestAnnouncement
+  ContestList, ContestAnnouncement, Login
 }
diff --git a/oj/src/views/user/Login.vue b/oj/src/views/user/Login.vue
new file mode 100644
index 0000000..ad13460
--- /dev/null
+++ b/oj/src/views/user/Login.vue
@@ -0,0 +1,66 @@
+<template>
+<div class="center">
+  <el-card class="box-card" id="login-card">
+
+    <div slot="header" class="clearfix" id="login-title">
+      <span style="line-height: 36px;">用户登录</span>
+    </div>
+
+    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+      <el-form-item label="账号">
+        <el-input v-model="formLabelAlign.name"></el-input>
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="formLabelAlign.password" type="password"></el-input>
+      </el-form-item>
+      <el-form-item label="二次验证">
+        <el-input v-model="formLabelAlign.totp"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即登录</el-button>
+        <el-button>用户注册</el-button>
+      </el-form-item>
+    </el-form>
+
+  </el-card>
+</div>
+</template>
+
+<script>
+import api from '../../api.js'
+
+export default {
+  data() {
+    return {
+      labelPosition: 'top',
+      formLabelAlign: {
+        name: '',
+        region: '',
+        type: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!')
+      api.login(this.formLabelAlign.name, this.formLabelAlign.password).then(function (res) {
+        console.log(res)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.center{
+  margin-top: 50px;
+}
+#login-card{
+  max-width: 400px;
+  margin: auto;
+}
+#login-title{
+  text-align: center;
+  font-size: 20px;
+}
+</style>