diff --git a/oj/package.json b/oj/package.json
index b824544..a145bd1 100644
--- a/oj/package.json
+++ b/oj/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "oj",
-  "version": "1.0.0",
+  "name": "onlinejudge",
+  "version": "2.0.0",
   "description": "A Vue.js project",
   "author": "zemal <rawidn@163.com>",
   "private": true,
diff --git a/oj/src/components/App.vue b/oj/src/components/App.vue
index 24c5616..4b83749 100644
--- a/oj/src/components/App.vue
+++ b/oj/src/components/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <Navbar></Navbar>
+    <breadcrumb></breadcrumb>
     <div class="content-app">
       <router-view></router-view>
       <div class="footer">
@@ -12,7 +13,7 @@
 
 <script>
   import Navbar from './NavBar.vue'
-  // import api from './api.js'
+  import breadcrumb from './Breadcrumb.vue'
 
   export default {
     name: 'app',
@@ -22,7 +23,8 @@
       }
     },
     components: {
-      Navbar
+      Navbar,
+      breadcrumb
     },
     methods: {}
   }
@@ -36,19 +38,18 @@
     box-sizing: border-box;
   }
 
-
   a {
     text-decoration: none;
     background-color: transparent;
-    &:active, &:hover{
-      outline-width:0 ;
+    &:active, &:hover {
+      outline-width: 0;
     }
   }
 
   body {
     margin: 0;
     padding: 0;
-    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
     overflow: auto;
     -webkit-font-smoothing: antialiased;
     background-color: #edf0f2;;
diff --git a/oj/src/components/Breadcrumb.vue b/oj/src/components/Breadcrumb.vue
new file mode 100644
index 0000000..ce1af7a
--- /dev/null
+++ b/oj/src/components/Breadcrumb.vue
@@ -0,0 +1,58 @@
+<template>
+  <div id="breadcrumb">
+    <Breadcrumb>
+      <Breadcrumb-item >Home</Breadcrumb-item>
+      <Breadcrumb-item :key="b" v-for="b in breads">{{b}}</Breadcrumb-item>
+    </Breadcrumb>
+  </div>
+</template>
+
+<script>
+  import bus from '../utils/eventBus'
+  export default {
+    name: 'bread',
+    data() {
+      return {
+        breads: []
+      }
+    },
+    methods: {
+      // 根据路由生成breadcrumb
+      generateBread(route) {
+        // 去重空导航
+        this.breads = route.path.split('/').filter((element) => {
+          return !!element
+        })
+      }
+    },
+    mounted() {
+      this.generateBread(this.$route)
+      // 可以通过eventbus传一个字符串，该字符串会替换掉最后一个breadcrumb项，如：Problem.vue
+      bus.$on('changeBread', (res) => {
+        let i = this.breads.length - 1
+        this.breads.splice(i, 1)
+        this.breads.push(res)
+      })
+    },
+    watch: {
+      '$route'(to, from) {
+        this.generateBread(to)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  #breadcrumb {
+    background: #f8f8f9;
+    padding: 20px 30px;
+    .ivu-breadcrumb{
+      text-transform: capitalize;
+      &>span:last-child{
+        font-size: 20px;
+        font-weight:300;
+      }
+    }
+  }
+
+</style>
diff --git a/oj/src/components/CodeMirror.vue b/oj/src/components/CodeMirror.vue
index 3f2f372..3cc300c 100644
--- a/oj/src/components/CodeMirror.vue
+++ b/oj/src/components/CodeMirror.vue
@@ -1,25 +1,25 @@
 <template>
   <div style="margin: 25px 0px">
-    <el-row class="header">
-      <el-col :span=12>
+    <Row class="header">
+      <Col :span=12>
         <span>
           Language:
-          <el-select v-model="lang" @change="onLangChange">
-            <el-option v-for="item in languages" :label="item" :value="item">
-            </el-option>
-          </el-select>
+          <Select v-model="lang" @change="onLangChange">
+            <Option v-for="item in languages" :key="item" :value="item">{{item}}
+            </Option>
+          </Select>
         </span>
-      </el-col>
-      <el-col :span=12>
+      </Col>
+      <Col :span=12>
         <span style="float: right">
           Theme:
-          <el-select v-model="options.theme">
-            <el-option v-for="item in themes" :label="item.label" :value="item.value">
-            </el-option>
-          </el-select>
+          <Select v-model="options.theme">
+            <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
+            </Option>
+          </Select>
         </span>
-      </el-col>
-    </el-row>
+      </Col>
+    </Row>
     <codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor">
     </codemirror>
   </div>
diff --git a/oj/src/components/NavBar.vue b/oj/src/components/NavBar.vue
index 1c9660b..86dc4f2 100644
--- a/oj/src/components/NavBar.vue
+++ b/oj/src/components/NavBar.vue
@@ -110,6 +110,6 @@
 
   .btn-menu {
     font-size: 16px;
-    margin-top: 12px;
+    margin-top: 13px;
   }
 </style>
diff --git a/oj/src/routers/routes.js b/oj/src/routers/routes.js
index 4a886d2..511bc6c 100644
--- a/oj/src/routers/routes.js
+++ b/oj/src/routers/routes.js
@@ -15,6 +15,11 @@ export default [
     //   }
     // }
   },
+  {
+    name: 'problem-details',
+    path: '/problem/:id',
+    component: () => import('@/views/problem/Problem.vue')
+  },
   {
     name: 'logout',
     path: '/logout',
@@ -25,11 +30,6 @@ export default [
     path: '/problems',
     component: ProblemList
   },
-  {
-    name: 'problem-details',
-    path: '/problem/:id',
-    component: Test
-  },
   {
     path: '/test',
     name: 'Test',
diff --git a/oj/src/utils/eventBus.js b/oj/src/utils/eventBus.js
index ce1fe48..703bfca 100644
--- a/oj/src/utils/eventBus.js
+++ b/oj/src/utils/eventBus.js
@@ -1,4 +1,4 @@
-// 这个文件用来做同级组件间的数据传递,见Login.vue
+// 这个文件用来做同级组件间的数据传递,例如Login.vue和navbar直接之间的传递
 
 import Vue from 'vue'
 
diff --git a/oj/src/views/problem/Problem.vue b/oj/src/views/problem/Problem.vue
index bbbae49..be4d589 100644
--- a/oj/src/views/problem/Problem.vue
+++ b/oj/src/views/problem/Problem.vue
@@ -1,92 +1,86 @@
 <template>
-  <el-row type="flex" justify="space-around">
+  <Row type="flex" justify="space-around">
 
     <!--problem main-->
-    <el-col :span=16>
-      <panel :title="problem.title">
-        <template slot="header">
-          <el-button type="warning" icon="edit" @click="openDialog">Submit</el-button>
-        </template>
-        <h4>Description</h4>
-        <p v-html=problem.description></p>
+    <Col :span=16>
+      <Card :padding="20" class="problem-main">
+      <p class="title" style="margin-top: 0">Description</p>
+      <p class="content" v-html=problem.description></p>
 
-        <h4>Input</h4>
-        <p v-html=problem.input_description></p>
+      <p class="title">Input</p>
+      <p class="content" v-html=problem.input_description></p>
 
-        <h4>Output</h4>
-        <p v-html=problem.output_description></p>
+      <p class="title">Output</p>
+      <p class="content" v-html=problem.output_description></p>
 
-        <div v-if="problem.hint">
-          <h4>Hint</h4>
-          <el-card :body-style=cardStyle>
-            <div v-html=problem.hint></div>
-          </el-card>
-        </div>
+      <div v-if="problem.hint">
+        <p class="title">Hint</p>
+        <Card dis-hover>
+          <div class="content" v-html=problem.hint></div>
+        </Card>
+      </div>
 
-        <div v-for="sample, index in problem.samples">
-          <el-row>
-            <el-col :span=9>
-              <h4>Sample Input {{index + 1}}</h4>
-              <el-card :body-style=cardStyle>
-                <div>{{sample.input}}</div>
-              </el-card>
-            </el-col>
-            <el-col :span=10 :offset=2>
-              <h4>Sample Output {{index + 1}}</h4>
-              <el-card :body-style=cardStyle>
-                <div>{{sample.output}}</div>
-              </el-card>
-            </el-col>
-          </el-row>
-        </div>
-      </panel>
-    </el-col>
+      <div v-for="sample, index in problem.samples">
+        <Row type="flex" justify="space-between">
+          <Col :span=11>
+          <p class="title">Sample Input {{index + 1}}</p>
+          <Card dis-hover :padding="10">
+            <div>{{sample.input}}</div>
+          </Card>
+          </Col>
+          <Col :span=11>
+          <p class="title">Sample Output {{index + 1}}</p>
+          <Card dis-hover :padding="10">
+            <div>{{sample.output}}</div>
+          </Card>
+          </Col>
+        </Row>
+      </div>
+      </Card>
+    </Col>
     <!--problem main end-->
 
-    <el-col :span=6>
-      <Card>
-        <div class="header">
-          Problem Info
-        </div>
-        <dl>
-          <dt>Time Limit</dt>
-          <dd>{{problem.time_limit}}ms</dd>
+    <Col :span=6>
+    <Card style="overflow: hidden;">
+      <div slot="title">
+        Information
+      </div>
+      <dl>
+        <dt>Time Limit</dt>
+        <dd>{{problem.time_limit}}ms</dd>
 
-          <dt>Memory Limit</dt>
-          <dd>{{problem.memory_limit}}MB</dd>
+        <dt>Memory Limit</dt>
+        <dd>{{problem.memory_limit}}MB</dd>
 
-          <dt>Created By</dt>
-          <dd>{{problem.created_by.username}}</dd>
+        <dt>Created By</dt>
+        <dd>{{problem.created_by.username}}</dd>
 
-          <dt>Source</dt>
-          <dd>{{problem.source}}</dd>
-        </dl>
-      </Card>
-    </el-col>
+        <dt>Source</dt>
+        <dd>{{problem.source}}</dd>
+      </dl>
+    </Card>
+    </Col>
 
-    <el-dialog title="Submit Code" :visible.sync="dialogVisible">
-      Baidu INC.
-      <!--<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>-->
-      <!--<span v-show="submissionId">Status: {{sumissionStatus}}</span>-->
-      <!--<el-button type="warning" class="fl-right" @click="submitCode"> Submit </el-button>-->
-    </el-dialog>
-  </el-row>
+    <!--<el-dialog title="Submit Code" :visible.sync="dialogVisible">-->
+    <!--Baidu INC.-->
+    <!--&lt;!&ndash;<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>&ndash;&gt;-->
+    <!--&lt;!&ndash;<span v-show="submissionId">Status: {{sumissionStatus}}</span>&ndash;&gt;-->
+    <!--&lt;!&ndash;<Button type="warning" class="fl-right" @click="submitCode"> Submit </Button>&ndash;&gt;-->
+    <!--</el-dialog>-->
+  </Row>
 
 </template>
 
 <script>
   import CodeMirror from '../../components/CodeMirror'
-  import Card from '../../components/Card'
   import api from '../../api'
   import {STATUS} from '../../utils/utils'
-  import Panel from '../../components/Panel'
+  import bus from '@/utils/eventBus'
 
   export default {
     name: 'Problem',
     components: {
-      Panel,
-      CodeMirror,
-      Card
+      CodeMirror
     },
     data() {
       return {
@@ -104,15 +98,13 @@
           created_by: {
             username: ''
           }
-        },
-        cardStyle: {
-          padding: '5px 10px'
         }
       }
     },
     mounted() {
       api.getProblem(this.$route.params.id).then(res => {
         this.problem = res.data.data
+        bus.$emit('changeBread', this.problem.title)
       })
     },
     methods: {
@@ -123,7 +115,6 @@
         this.language = newLang
       },
       openDialog() {
-        console.log(this.dialogVisible)
         this.dialogVisible = true
       },
       submitCode() {
@@ -156,39 +147,49 @@
 </script>
 
 <style lang="less" scoped>
-
-  .el-card {
-    box-shadow: none;
-    background-color: #F9FAFC;
+  .problem-main {
+    .title {
+      font-size: 19px;
+      font-weight:500;
+      margin: 25px 0 8px 0;
+    }
+    .content {
+      text-indent: 1.3em;
+      font-size: 15px
+    }
   }
+  /*.Card {*/
+    /*box-shadow: none;*/
+    /*background-color: #F9FAFC;*/
+  /*}*/
 
-  h4 {
-    color: #324057;
-    font-weight: 500;
-  }
+  /*h4 {*/
+    /*color: #324057;*/
+    /*font-weight: 500;*/
+  /*}*/
 
-  p {
-    font-weight: 400;
-    margin: 10px 10px;
-    color: #475669;
-  }
+  /*p {*/
+    /*font-weight: 400;*/
+    /*margin: 10px 10px;*/
+    /*color: #475669;*/
+  /*}*/
 
-  hr {
-    margin: 20px 5px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
+  /*hr {*/
+    /*margin: 20px 5px;*/
+    /*border: 0;*/
+    /*border-top: 1px solid #eee;*/
+  /*}*/
 
   .fl-right {
     float: right;
   }
 
-  .header {
-    line-height: 40px;
-    font-size: 18px;
-    margin-bottom: 10px;
+  /*.header {*/
+    /*line-height: 40px;*/
+    /*font-size: 18px;*/
+    /*margin-bottom: 10px;*/
 
-  }
+  /*}*/
 
   dl {
     margin: 0;
diff --git a/oj/src/views/problem/ProblemList.vue b/oj/src/views/problem/ProblemList.vue
index b1ba88a..7736f14 100644
--- a/oj/src/views/problem/ProblemList.vue
+++ b/oj/src/views/problem/ProblemList.vue
@@ -1,7 +1,7 @@
 <template>
   <Row type="flex" justify="space-around">
     <Col :span=18>
-    <Card dis-hover :padding="0">
+    <Card :bordered="false" dis-hover :padding="0">
       <div slot="title">
         <Form id="filterForm" ref="filterForm" :model="filterForm">
           <Row type="flex" justify="space-between">
@@ -107,7 +107,7 @@
 
         ],
         problemList: [],
-        pageSize: 1,
+        pageSize: 2,
         total: 0,
         problemLoading: false,
         tagLoading: false,
@@ -173,7 +173,7 @@
   #filterForm {
     .ivu-form-item {
       margin-bottom: 0;
-      margin-right: 30px;
+      margin-right: 10px;
     }
   }
 
diff --git a/oj/src/views/test.vue b/oj/src/views/test.vue
index 9e0d20c..d4c2ce6 100644
--- a/oj/src/views/test.vue
+++ b/oj/src/views/test.vue
@@ -1,20 +1,46 @@
 <template>
   <div>
-    Hello world
+    <div id="breadcrumb">
+      <Breadcrumb>
+        <Breadcrumb-item>Home</Breadcrumb-item>
+        <Breadcrumb-item>Test</Breadcrumb-item>
+      </Breadcrumb>
+    </div>
+    <CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>
   </div>
 </template>
 
 <script>
-//  import api from '@/api'
+  //  import api from '@/api'
+  import CodeMirror from '../components/CodeMirror.vue'
   export default {
+    name: 'test',
+    components: {
+      CodeMirror
+    },
+    data() {
+      return {
+        code: ''
+      }
+    },
     mounted() {
 //      api.getProblem('1').then((res) => {
 //        console.log(res.data)
 //      })
+    },
+    methods: {
+      onChangeCode(newCode) {
+        this.code = newCode
+      },
+      onChangeLang(newLang) {
+        this.language = newLang
+      }
     }
   }
 </script>
 
-<style>
-
+<style scoped lang="less">
+  #breadcrumb {
+    outline: 1px;
+  }
 </style>