diff --git a/components/top-comment.vue b/components/top-comment.vue
new file mode 100644
index 0000000..afadd36
--- /dev/null
+++ b/components/top-comment.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="top-comment">
+    <div class="comment-list">
+      <ul>
+        <li v-for="(item,index) in comments" :key="item.id">
+          <a :href="`https://github.com/${item.user.username}`">
+            <img :src="item.user.avatar" :alt="item.user.nickname" width="50px" height="50px">
+          </a>
+          <div class="list-box">
+            <a :href="`https://github.com/${item.user.username}`">{{item.user.nickname}}</a>
+            <span> 评论于 {{item.createdAt | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
+            <p>{{item.content}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div v-if="isGithubLogin" class="comment-login clearfix">
+      <div class="comment-box">
+        <a :href="userInfo.html_url">
+          <img :src="userInfo.avatar_url" :alt="userInfo.name" width="50px" height="50px">
+        </a>
+        <textarea v-model="commentContent" placeholder="留言" class="box-content" maxlength="300"></textarea>
+      </div>
+      <button @click="submitComment" :disabled="disabled">提交留言</button>
+    </div>
+    <div v-else class="comment-unlogin">
+      <button @click="githubLogin">Github 登录</button>
+      <p>{{ tipMessage }}</p>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+export default {
+  name: 'top-comment',
+  props: {
+    commentList: {
+      type: Array,
+      default: () => []
+    },
+    articleId: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      disabled: false,
+      isGithubLogin: this.$store.state.githubToken ? true : false,
+      tipMessage: '欢迎留言交流',
+      commentContent: '',
+      userInfo: {},
+      comments: this.commentList
+    }
+  },
+  mounted() {
+    if (this.isGithubLogin) {
+      let u = this.$store.state.githubApi.userInfo + this.$store.state.githubToken
+      axios.get(u).then(data => {
+        this.userInfo = data.data
+      })
+    }
+  },
+  methods: {
+    githubLogin() {
+      this.tipMessage = '请稍等...'
+      window.location.href = `${this.$store.getters.baseUrl}/oauth/github/${this.articleId}`
+    },
+    submitComment() {
+      this.disabled = true
+      if (!this.commentContent) { return false }
+      this.$store.dispatch('CREATE_COMMENT', {
+        id: this.articleId,
+        content: this.commentContent,
+        token: this.$store.state.githubToken
+      }).then((data) => {
+        if (data.success) {
+          this.disabled = false
+          this.commentContent = ''
+          this.$store.dispatch('COMMENTS').then((data) => {
+            this.comments.push( data.data[0])
+         })
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+@import '~/assets/css/var.scss';
+.top-comment {
+  img {
+    border-radius: 3px;
+    margin-right: 15px;
+  }
+  button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background-color: $link-color;
+    color: #fff;
+    padding: 8px 10px;
+    border-radius: 3px;
+    &:hover {
+      background-color: darken($link-color, 5%);
+    }
+  }
+  .comment-list {
+    ul {
+      list-style: none;
+      li {
+        display: flex;
+        margin-bottom: 20px;
+      }
+      .list-box {
+        position: relative;
+        width: 100%;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        padding: 10px;
+        span {
+          font-size: 14px;
+          color: #666;
+        }
+        &::after {
+          position: absolute;
+          top: 15px;
+          left: -6px;
+          content: '';
+          display: block;
+          width: 10px;
+          height: 10px;
+          background-color: #fff;
+          border-top: 1px solid #ddd;
+          border-left: 1px solid #ddd;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+  .comment-box {
+    display: flex;
+    .box-content {
+      width: 100%;
+      height: 100px;
+      border: none;
+      border: 1px solid #ddd;
+      padding: 10px;
+      resize: vertical;
+      border-radius: 3px;
+    }
+  }
+
+  .comment-login {
+    button {
+      margin-top: 15px;
+      float: right;
+    }
+  }
+  .comment-unlogin {
+    background-color: #eee;
+    text-align: center;
+    border-radius: 3px;
+    padding: 15px;
+    p {
+      font-size: 14px;
+      color: #999;
+      margin-top: 10px;
+    }
+  }
+}
+
+</style>
diff --git a/components/top-comments.vue b/components/top-comments.vue
deleted file mode 100644
index e8b606e..0000000
--- a/components/top-comments.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<!-- https://github.com/ktquez/vue-disqus -->
-<!-- <template>
-  <div id="disqus_thread"></div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'top-comments',
-  props: {
-    shortname: {
-      type: String,
-      required: true
-    },
-    identifier: {
-      type: String,
-      required: false
-    },
-    url: {
-      type: String,
-      required: false
-    },
-    title: {
-      type: String,
-      required: false
-    },
-    remote_auth_s3: {
-      type: String,
-      required: false
-    },
-    api_key: {
-      type: String,
-      required: false
-    },
-    sso_config: {
-      type: Object,
-      required: false
-    },
-    language: {
-      type: String,
-      required: false
-    }
-  },
-  mounted() {
-    if (window.DISQUS) {
-      this.reset(window.DISQUS)
-      return
-    }
-    this.init()
-  },
-  methods: {
-    reset(dsq) {
-      const self = this
-      dsq.reset({
-        reload: true,
-        config: function () {
-          self.setBaseConfig(this)
-        }
-      })
-    },
-    init() {
-      const self = this
-      window.disqus_config = function () {
-        self.setBaseConfig(this)
-      }
-      setTimeout(() => {
-        let d = document,
-          s = d.createElement('script')
-        s.setAttribute('id', 'embed-disqus')
-        s.setAttribute('data-timestamp', +new Date())
-        s.type = 'text/javascript'
-        s.async = true
-        s.src = `//${this.shortname}.disqus.com/embed.js`;
-        (d.head || d.body).appendChild(s)
-      }, 0)
-    },
-    setBaseConfig(disqusConfig) {
-      disqusConfig.page.identifier = (this.identifier || this.$route.path || window.location.pathname)
-      disqusConfig.page.url = (this.url || this.$el.baseURI)
-      if (this.title) {
-        disqusConfig.page.title = this.title;
-      }
-      if (this.remote_auth_s3) {
-        disqusConfig.page.remote_auth_s3 = this.remote_auth_s3;
-      }
-      if (this.api_key) {
-        disqusConfig.page.api_key = this.api_key;
-      }
-      if (this.sso_config) {
-        disqusConfig.sso = this.sso_config;
-      }
-      if (this.language) {
-        disqusConfig.language = this.language;
-      }
-      disqusConfig.callbacks.onReady = [() => {
-        this.$emit('ready')
-      }]
-    }
-  }
-}
-
-</script>
- -->
- <template>
-   <div class="comment">
-
-   </div>
- </template>
- <script>
-   export default {
-
-   }
- </script>
diff --git a/components/top-lists.vue b/components/top-list.vue
similarity index 97%
rename from components/top-lists.vue
rename to components/top-list.vue
index 87b10ba..5bb76a7 100644
--- a/components/top-lists.vue
+++ b/components/top-list.vue
@@ -12,7 +12,7 @@
 </template>
 <script>
 export default {
-  name: 'top-lists',
+  name: 'top-list',
   props: {
     articles: {
       type: Array,
diff --git a/layouts/default.vue b/layouts/default.vue
index 715a19e..093bd45 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -68,11 +68,17 @@ export default {
         }
       ],
 
-      adminNavs: [{
+      adminNavs: [
+        {
           path: '/admin/private',
           routerName: 'admin-private',
           name: '草稿'
         },
+        {
+          path: '/admin/comment',
+          routerName: 'admin-comment',
+          name: '评论'
+        },
         {
           path: '/admin/tags',
           routerName: 'admin-tags',
@@ -81,7 +87,7 @@ export default {
         {
           path: '/admin/update',
           routerName: 'admin-update',
-          name: '修改'
+          name: '设置'
         }
       ]
     }
diff --git a/pages/admin/comment.vue b/pages/admin/comment.vue
new file mode 100644
index 0000000..ae82dbb
--- /dev/null
+++ b/pages/admin/comment.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="admin-comments">
+    <!-- <div class="comments-input" v-if="isEdit">
+      <input type="text" @keyup.enter="edit" v-model="tag.name">
+      <button class="black-button" @click="edit">确认修改</button>
+    </div> -->
+    <ul class="comments-list">
+      <li class="list-item" v-for="(comment, index) in comments" :key="index">
+        <p class="item-title"><a href="javascript:;">{{comment.content}}</a></p>
+        <p class="item-date">{{comment.createdAt | formatDate('yyyy-MM-dd')}}</p>
+        <p class="item-del"><a @click="delComment(comment)">删除</a></p>
+      </li>
+    </ul>
+    <top-tip ref="tip"/>
+  </div>
+</template>
+<script>
+export default {
+  middleware: 'auth',
+  data() {
+    return {
+      comment:{},
+      comments: []
+    }
+  },
+  mounted() {
+    this.$store.dispatch('COMMENTS').then((data) => {
+      this.comments = data.data
+    })
+  },
+  head() {
+    return {
+      title: '评论列表 - ' + this.$store.state.user.nickname
+    }
+  },
+  methods: {
+    delComment(comment) {
+       this.$store.dispatch('DELETE_COMMENT', comment.id).then((data) => {
+        if(data.success) {
+         this.$refs.tip.openTip('评论已删除')
+         this.$store.dispatch('COMMENTS').then((data) => {
+           this.comments = data.data
+         })
+        }
+      })
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/css/var.scss';
+.admin-comments {
+  max-width: 960px;
+  margin: 60px auto;
+  .comments-input {
+    text-align: center;
+    input {
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    button {
+      line-height: 40px;
+      border: transparent;
+      display: inline-block;
+      vertical-align: top;
+      padding: 0 15px;
+      background-color: $font-color;
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+      color: #fff;
+    }
+  }
+  .list-item {
+    display: flex;
+    line-height: 45px;
+    border-top: 1px solid #eee;
+    .item-date {
+      flex:1;
+      text-align: center;
+    }
+    .item-edit,
+    .item-del {
+      width: 60px;
+      text-align: right;
+    }
+    .item-title {
+      flex: 1;
+    }
+    &:nth-child(1) {
+      border-top: none;
+    }
+  }
+}
+</style>
diff --git a/pages/detail/_id.vue b/pages/detail/_id.vue
index f465094..7d156f8 100644
--- a/pages/detail/_id.vue
+++ b/pages/detail/_id.vue
@@ -21,27 +21,12 @@
       <p class="admin-del"><a @click="del(article.id)">删除</a></p>
       <p class="admin-edit"><a @click="edit(article.id)">编辑</a></p>
     </div>
-    <div class="detail-comment">
-      <div v-if="isGithubLogin" class="comment-login clearfix">
-        <div class="comment-box">
-          <a :href="userInfo.html_url" class="box-avatar">
-            <img :src="userInfo.avatar_url" :alt="userInfo.name" width="50px" height="50px">
-          </a>
-          <textarea v-model="commentContent" placeholder="留言" class="box-content" maxlength="300"></textarea>
-        </div>
-        <button @click="submitComment(article.id)">提交留言</button>
-      </div>
-      <div v-else class="comment-unlogin">
-        <button @click="githubLogin(article.id)">Github 登录</button>
-        <p>{{ tipMessage }}</p>
-      </div>
-    </div>
+    <top-comment :comment-list="article.comments" :article-id="article.id" />
     <top-tip ref="tip" />
   </div>
 </template>
 <script>
 import { cutString } from '~/plugins/filters'
-import axios from 'axios'
 export default {
   async asyncData({ store, route, error }) {
     let id = route.params.id || ''
@@ -68,11 +53,7 @@ export default {
   data() {
     return {
       options: {},
-      isLogin: this.$store.state.token ? true : false,
-      isGithubLogin: this.$store.state.githubToken ? true : false,
-      commentContent: '',
-      tipMessage: '欢迎留言交流',
-      userInfo: {}
+      isLogin: this.$store.state.token ? true : false
     }
   },
 
@@ -90,13 +71,6 @@ export default {
         }
       }
     }
-    console.log(this.$store.state.githubToken)
-    if (this.isGithubLogin) {
-      axios.get('https://api.github.com/user?access_token=' + this.$store.state.githubToken).then(data => {
-        this.userInfo = data.data
-        console.log(data.data)
-      })
-    }
   },
 
   methods: {
@@ -110,20 +84,6 @@ export default {
     },
     edit(id) {
       this.$router.push(`/admin/publish/${id}`)
-    },
-    githubLogin(id) {
-      this.tipMessage = '请稍等...'
-      window.location.href = `${this.$store.getters.baseUrl}/oauth/github/${id}`
-    },
-    submitComment(id) {
-      if(!this.commentContent) {return false}
-      this.$store.dispatch('CREATE_COMMENT',{
-        id: id,
-        content: this.commentContent,
-        token: this.$store.state.githubToken
-      }).then((data)=>{
-         console.log(data)
-      })
     }
   }
 }
@@ -164,66 +124,11 @@ export default {
     margin-top: 30px;
     margin-bottom: 30px;
   }
-  .detail-comment {
-    .comment-box {
-      display: flex;
-      img {
-        border-radius: 3px;
-        margin-right: 15px;
-      }
-
-      .box-content {
-        width: 100%;
-        height: 100px;
-        border: none;
-        border: 1px solid #ddd;
-        padding: 10px;
-        resize: vertical;
-        border-radius: 3px;
-      }
-    }
-    button {
-      outline: none;
-      border: none;
-      // float: right;
-      cursor: pointer;
-      background-color: $link-color;
-      color: #fff;
-      padding: 8px 10px;
-      // margin-top: 15px;
-      border-radius: 3px;
-      &:hover {
-        background-color: darken($link-color, 5%);
-      }
-    }
-    .comment-login{
-      button {
-        margin-top: 15px;
-        float: right;
-      }
-    }
-    .comment-unlogin {
-      background-color: #eee;
-      text-align: center;
-      border-radius: 3px;
-      padding: 15px;
-      p{
-        font-size: 14px;
-        color: #999;
-        margin-top: 10px;
-      }
-    }
-  }
   .detail-admin {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    line-height: 50px;
     border-top: 1px dashed #ccc;
-    p {
-      margin-top: 20px;
-    }
-    .admin-del {
-      margin-right: 15px;
-    }
   }
 }
 
diff --git a/pages/index.vue b/pages/index.vue
index d4d1fba..96e18fe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index container">
-    <top-lists :articles="articles" />
+    <top-list :articles="articles" />
     <div class="page" v-if="maxPage > 1">
       <div class="page-prev">
         <a v-if="page > 1" @click="prevPage">« Prev </a>
diff --git a/pages/page/_id.vue b/pages/page/_id.vue
index 75564f9..9bdbf42 100644
--- a/pages/page/_id.vue
+++ b/pages/page/_id.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index container">
-    <top-lists :articles="articles"/>
+    <top-list :articles="articles"/>
     <div class="page" v-if="maxPage > 1">
       <div class="page-prev">
         <a v-if="page > 1" @click="prevPage">« Prev </a>
diff --git a/pages/search/_id.vue b/pages/search/_id.vue
index c054864..41b70ec 100644
--- a/pages/search/_id.vue
+++ b/pages/search/_id.vue
@@ -3,7 +3,7 @@
     <div v-if="$route.params.id">
       <div class="search-result">
         <p>找到{{ articles.length }}篇和 <span>{{ keyword }}</span> 相关的文章</p>
-        <top-lists :articles="articles" />
+        <top-list :articles="articles" />
       </div>
     </div>
     <div v-else>
diff --git a/plugins/components.js b/plugins/components.js
index 8e6b95d..42beb15 100644
--- a/plugins/components.js
+++ b/plugins/components.js
@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import TopTip from '../components/top-tip.vue'
-import TopLists from '../components/top-lists.vue'
-import TopComments from '../components/top-comments.vue'
+import TopList from '../components/top-list.vue'
+import TopComment from '../components/top-comment.vue'
 import TopPreview from 'top-editor/src/lib/TopPreview.vue'
 import TopEditor from 'top-editor/src/lib/TopEditor.vue'
 
-const components = { TopTip, TopLists, TopComments, TopPreview, TopEditor }
+const components = { TopTip, TopList, TopComment, TopPreview, TopEditor }
 
 Object.keys(components).forEach(key => {
   Vue.component(key, components[key])
diff --git a/server/controllers/article.js b/server/controllers/article.js
index 8ea664d..a4bc297 100644
--- a/server/controllers/article.js
+++ b/server/controllers/article.js
@@ -67,8 +67,8 @@ export const getArticle = async(ctx, next) => {
       })
       .populate({
         path: 'comments',
-        populate: { path: 'user' },
-        options: {sort:{createdAt: -1}}
+        populate: { path: 'user'}
+        // options: {sort:{createdAt: -1}}
       })
       .exec()
     await Article.findByIdAndUpdate(id, { views: article.views + 1 }).exec()
diff --git a/server/controllers/comment.js b/server/controllers/comment.js
index cac7d9d..57c3244 100644
--- a/server/controllers/comment.js
+++ b/server/controllers/comment.js
@@ -29,10 +29,14 @@ export const postComment = async(ctx, next) => {
       await Article.findByIdAndUpdate(id, { $push: { comments: comment } }, { safe: true, upsert: true })
       ctx.body = {
         success: true,
-        data: comment
+        data: {
+          content: comment.content,
+          createdAt: comment.createdAt,
+          id: comment.id
+        }
       }
     } catch (e) {
-      // console.log(e)
+      console.log(e)
       ctx.body = {
         success: false,
         err: e
@@ -46,7 +50,7 @@ export const postComment = async(ctx, next) => {
   }
 }
 
-export const getComment = async(ctx, next) => {
+export const getComments = async(ctx, next) => {
   let comments = await Comment.find({})
     .populate({
       path: 'user'
@@ -69,3 +73,27 @@ export const getComment = async(ctx, next) => {
     }
   }
 }
+
+export const deleteComment = async(ctx, next) => {
+  let { id } = ctx.params
+
+  if (!id) {
+    return (ctx.body = {
+      success: false,
+      err: 'id is required'
+    })
+  }
+
+  try {
+    let body = await Comment.findByIdAndRemove(id).exec()
+    ctx.body = {
+      success: true,
+      data: body
+    }
+  } catch (e) {
+    ctx.body = {
+      success: false,
+      err: e
+    }
+  }
+}
diff --git a/server/models/comment.js b/server/models/comment.js
index 21938ab..87defda 100644
--- a/server/models/comment.js
+++ b/server/models/comment.js
@@ -2,14 +2,14 @@ import mongoose from 'mongoose'
 const Schema = mongoose.Schema
 
 const CommentSchema = new Schema({
-  user: [{
+  user: {
     type: Schema.Types.ObjectId,
     ref: 'User',
-  }],
-  article:[{
+  },
+  article:{
     type: Schema.Types.ObjectId,
     ref: 'Article',
-  }],
+  },
   content: {
     type: String,
     default: ''
diff --git a/server/routes/index.js b/server/routes/index.js
index 7bbcbc7..bfb8b82 100644
--- a/server/routes/index.js
+++ b/server/routes/index.js
@@ -46,6 +46,7 @@ router
 
 router
   .post('/api/comment', comment.postComment)
-  .get('/api/comment', comment.getComment)
+  .get('/api/comments', comment.getComments)
+  .del('/api/comment/:id?',comment.deleteComment)
 
 export default router
diff --git a/store/actions.js b/store/actions.js
index 6d0d262..ffd2f93 100644
--- a/store/actions.js
+++ b/store/actions.js
@@ -3,7 +3,6 @@ import axios from 'axios'
 export default {
   async nuxtServerInit({ dispatch, commit, getters }, { req, res }) {
     if (req.headers.cookie) {
-      // eg: token='asdf';id='123'
       let cookie = req.headers.cookie, cookieObj = {}, cookieArr = [], key = '', value = '';
       cookie = cookie.split(';')
       for (let i = 0; i < cookie.length; i++) {
@@ -20,6 +19,7 @@ export default {
     commit('SET_USER', data)
   },
 
+  // 标签相关操作
   async CREATE_TAG({ commit, state, getters }, params) {
     // eg: {name: 'new tag'}
     const { data } = await axios.post(`${getters.baseUrl}/tag`, params, {
@@ -54,11 +54,8 @@ export default {
     return data
   },
 
-  async SEARCH({ commit, state, getters }, id = '') {
-    const { data } = await axios.get(`${getters.baseUrl}/search/${id}`)
-    return data
-  },
 
+  // 文章相关操作
   async ARTICLES({ commit, state, getters }, page = 1, limit = 15) {
     const { data } = await axios.get(`${getters.baseUrl}/articles/${page}/${limit}`)
     return data
@@ -100,25 +97,46 @@ export default {
     })
     return data
   },
+
+  async ARTICLE_DETAIL({ commit, state, getters }, id) {
+    const { data } = await axios.get(`${getters.baseUrl}/article/${id}`)
+    return data
+  },
+
+  // 评论相关操作
   async CREATE_COMMENT({ commit, state, getters }, params) {
     const { data } = await axios.post(`${getters.baseUrl}/comment`, params)
     return data
   },
-  async ARTICLE_DETAIL({ commit, state, getters }, id) {
-    const { data } = await axios.get(`${getters.baseUrl}/article/${id}`)
+
+  async COMMENTS({ commit, state, getters }, params) {
+    const { data } = await axios.get(`${getters.baseUrl}/comments`)
+    return data
+  },
+
+  async DELETE_COMMENT({ commit, state, getters }, id) {
+    const { data } = await axios.delete(`${getters.baseUrl}/comment/${id}`)
+    return data
+  },
+  // 搜索
+  async SEARCH({ commit, state, getters }, id = '') {
+    const { data } = await axios.get(`${getters.baseUrl}/search/${id}`)
     return data
   },
 
+  // 获取归档
   async ARCHIVES({ commit, state, getters }) {
     const { data } = await axios.get(`${getters.baseUrl}/archives`)
     return data
   },
 
+  // 获取管理员信息
   async ADMIN_INFO({ commit, state, getters }) {
     const { data } = await axios.get(`${getters.baseUrl}/user`)
     return data
   },
 
+  // 更新管理员信息
   async UPDATE_ADMIN({ commit, state, getters }, params) {
     const { data } = await axios.patch(`${getters.baseUrl}/user`, params, {
       headers: {
@@ -128,12 +146,14 @@ export default {
     return data
   },
 
+  // 管理员登录
   async LOGIN({ commit, state, getters }, user) {
     const { data } = await axios.post(`${getters.routerBaseApi}/login`, user)
     commit('SET_TOKEN', data.data.token)
     return data
   },
 
+  // 管理员退出
   async LOGOUT({ commit, state, getters }) {
     const { data } = await axios.post(`${getters.baseUrl}/logout`, {}, {
       headers: {
diff --git a/store/index.js b/store/index.js
index 1708e7c..f733b44 100644
--- a/store/index.js
+++ b/store/index.js
@@ -9,7 +9,10 @@ export default () => {
       token: '',
       githubToken: '',
       user: {},
-      articles: {}
+      articles: {},
+      githubApi:{
+        userInfo: 'https://api.github.com/user?access_token='
+      }
     },
     getters,
     mutations,