diff --git a/src/components/ClarificationComment.vue b/src/components/ClarificationComment.vue
new file mode 100644
index 00000000..227dfef8
--- /dev/null
+++ b/src/components/ClarificationComment.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="ClarificationComment">
+    <div class="CommentHeader">
+      <a class="username">{{username}}</a> <p style="display: inline-block; margin-left: 5px">{{time}}</p>
+      <Dropdown placement="bottom-end" class="options" @on-click="selectMenu">
+        <a>...</a>
+        <DropdownMenu slot="list">
+          <DropdownItem name="QA" v-if="isAdmin || isPublic === CLARIFICATION_TYPE.UNPUBLIC">Quick Answer</DropdownItem>
+          <DropdownItem name="Edit" v-if="isAdmin">Edit</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+    <div class="markdown">
+      <div class="replyTarget" v-if="replyRoot && replyRoot.message">
+        <p style="margin-left: 5px; margin-bottom: 5px">Reply to:</p>
+        <div class="reply">
+          <div class="CommentHeader">
+            <a class="username">{{replyRoot.username}}</a> <p style="display: inline-block; margin-left: 5px">{{replyRoot.gmtCreate | fromnow}}</p>
+          </div>
+          <Markdown :value="replyRoot.message"  style="min-height: 50px;" />
+        </div>
+      </div>
+      <Markdown :value="ClarificationContent"  style="min-height: 100px; border-top: none" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Markdown from './editor/Markdown';
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+import { CLARIFICATION_TYPE } from '_u/constants';
+export default {
+  name: 'ClarificationComment',
+  components: { Markdown },
+  filters: {
+    fromnow: function(timestamp) {
+      if (typeof (timestamp) === 'string') {
+        timestamp = parseInt(timestamp);
+      }
+      return moment(new Date(timestamp)).format('YYYY-MM-DD hh:mm:ss');
+    }
+  },
+  props: [
+    'username',
+    'time',
+    'ClarificationContent',
+    'contestClarificationId',
+    'isPublic',
+    'replyRoot'
+  ],
+  methods: {
+    selectMenu(name) {
+      if (name === 'QA') {
+        this.$emit('on-reply')
+      }
+      if (name === 'Edit') {
+        this.$emit('on-edit', {
+          clarification: this.ClarificationContent,
+          id: this.contestClarificationId
+        })
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('user', ['isAdmin']),
+    CLARIFICATION_TYPE: () => CLARIFICATION_TYPE
+  }
+}
+</script>
+
+<style scoped>
+.ClarificationComment {
+  margin: 10px;
+  border: #e1e4e8 1px solid;
+}
+
+.CommentHeader {
+  background: #f6f8fa;
+  padding-left: 2%;
+  height: 40px;
+  line-height: 40px;
+  position: relative;
+  border-bottom: #e1e4e8 1px solid;
+  box-sizing: border-box;
+}
+
+.ClarificationComment {
+  background: #fff
+}
+
+.CommentHeader .options{
+  display: inline-block;
+  position: absolute;
+  right: 3%;
+  font-size: 150%;
+}
+
+.username {
+  border-bottom: 1px solid;
+}
+
+.replyTarget {
+  padding: 20px 20px;
+  border-bottom: none;
+}
+
+.reply {
+  border: #e1e4e8 1px solid;
+}
+
+/deep/ .v-note-wrapper {
+  z-index: 0 !important;
+}
+
+/deep/ .v-show-content {
+  background-color: #fff !important;
+}
+
+</style>
diff --git a/src/components/editor/MarkdownEditor.vue b/src/components/editor/MarkdownEditor.vue
new file mode 100644
index 00000000..b1252b72
--- /dev/null
+++ b/src/components/editor/MarkdownEditor.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <details style="margin-bottom: 5px" v-show="false">
+      <summary>Upload File Attachment</summary>
+      <Upload
+        multiple
+        paste
+        type="drag"
+        :max-size="102400"
+        :file-list.sync="fileList"
+        ref="upload">
+        <div style="padding: 20px 0">
+          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+          <p>Click or drag files here to upload</p>
+        </div>
+      </Upload>
+      <Button size="small" type="info" @click="attachAdd">Add</Button>
+    </details>
+    <mavon-editor
+      ref="md"
+      @imgAdd="$imgAdd"
+      v-model="markdown"
+      :externalLink="externalLink"
+      :toolbars="toolbars"
+      style="min-height: 600px;"/>
+  </div>
+</template>
+
+<script>
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
+import Upload from '_c/upload/upload';
+
+import api from '_u/api';
+import { SDUOJ_ENV } from '_u/env';
+
+// 替换 mavonEditor 的 $img2Url 方法
+// 占位符识别 <img src="fileIndex" ...
+function $img2Url(fileIndex, url) {
+  // <img src="1"
+  var reg_str = '/\\<img src=\\"' + fileIndex + '\\"/g';
+  /* eslint-disable */
+  var reg = eval(reg_str);
+  this.d_value = this.d_value.replace(reg, '<img src="' + url + '"');
+  this.$refs.toolbar_left.$changeUrl(fileIndex, url);
+  this.iRender();
+}
+
+// 替换 mavonEditor 的 $imgAdd 方法
+// 生产的 markdown 图片为 html 中的 img 标签，不再是 ![]()
+function $imgAdd(pos, $file, isinsert) {
+  if (isinsert === undefined) isinsert = true;
+  var $vm = this;
+  if (this.__rFilter == null) {
+    this.__rFilter = /^image\//i;
+  }
+  this.__oFReader = new FileReader();
+  this.__oFReader.onload = function (oFREvent) {
+    $vm.markdownIt.image_add(pos, oFREvent.target.result);
+    $file.miniurl = oFREvent.target.result;
+    if (isinsert === true) {
+      // 去除特殊字符
+      /* eslint-disable no-useless-escape */
+      $file._name = $file.name.replace(/[\[\]\(\)\+\{\}&\|\\\*^%$#@\-]/g, '');
+
+      $vm.insertText($vm.getTextareaDom(),
+        {
+          prefix: `<img src="${pos}" alt="${$file._name}" style="zoom:100%;" />`,
+          subfix: '',
+          str: ''
+        });
+      $vm.$nextTick(function () {
+        $vm.$emit('imgAdd', pos, $file);
+      })
+    }
+  }
+  if ($file) {
+    var oFile = $file;
+    if (this.__rFilter.test(oFile.type)) {
+      this.__oFReader.readAsDataURL(oFile);
+    }
+  }
+}
+
+export default {
+  name: 'MarkdownEditor',
+  components: { mavonEditor, Upload },
+  data: function() {
+    const externalLink = SDUOJ_ENV.PROD ? {
+      markdown_css: function () {
+        // 这是你的markdown css文件路径
+        return '/markdown/github-markdown.min.css';
+      },
+      hljs_js: function () {
+        // 这是你的hljs文件路径
+        return '/highlightjs/highlight.min.js';
+      },
+      hljs_css: function (css) {
+        // 这是你的代码高亮配色文件路径
+        return '/highlightjs/styles/' + css + '.min.css';
+      },
+      hljs_lang: function (lang) {
+        // 这是你的代码高亮语言解析路径
+        return '/highlightjs/languages/' + lang + '.min.js';
+      },
+      katex_css: function () {
+        // 这是你的katex配色方案路径路径
+        return '/katex/katex.min.css';
+      },
+      katex_js: function () {
+        // 这是你的katex.js路径
+        return '/katex/katex.min.js';
+      }
+    } : true;
+    return {
+      externalLink,
+      markdown: '',
+      fileList: [],
+      toolbars: {
+        bold: true, // 粗体
+        italic: true, // 斜体
+        superscript: true, // 上角标
+        subscript: true, // 下角标
+        code: true, // code
+        fullscreen: true, // 全屏编辑
+        /* 1.3.5 */
+        undo: true, // 上一步
+        redo: true, // 下一步
+        preview: true, // 预览
+      }
+    }
+  },
+  methods: {
+    $imgAdd: function(pos, file) {
+      const formdata = new FormData();
+      formdata.append('files', file);
+      api.multiUpload(formdata).then(ret => {
+        const $vm = this.$refs.md;
+        $vm.$img2Url(pos, `/api/filesys/download/${ret[0].id}/${ret[0].name}`);
+        $vm.$refs.toolbar_left.img_file = [[0, null]];
+        $vm.$refs.toolbar_left.num = 0;
+      }, err => {
+        this.$Message.error(err.message);
+      })
+    },
+    $attachAdd: function(files) {
+      return new Promise((resolve, reject) => {
+        const formdata = new FormData();
+        files.forEach(file => {
+          formdata.append('files', file.file)
+        });
+        api.multiUpload(formdata).then(ret => {
+          ret.forEach(o => {
+            const $vm = this.$refs.md;
+            // 去除特殊字符
+            /* eslint-disable no-useless-escape */
+            const _name = o.name.replace(/[\[\]\(\)\+\{\}&\|\\\*^%$#@\-]/g, '');
+            $vm.insertText($vm.getTextareaDom(),
+              {
+                prefix: '[' + _name + '](' + `/api/filesys/download/${o.id}/${o.name.replace(' ', '_')}` + ')',
+                subfix: '',
+                str: ''
+              }
+            );
+          });
+          resolve();
+        }, reject);
+      })
+    },
+    $clear: function() {
+      this.$refs.upload.clearFiles();
+      const $vm = this.$refs.md;
+      $vm.$refs.toolbar_left.img_file = [[0, null]];
+      $vm.$refs.toolbar_left.num = 0;
+    },
+    attachAdd: function () {
+      const removeLoading = this.$Message.loading({
+        content: 'Uploading',
+        duration: 0
+      });
+      this.$attachAdd(this.fileList).then(() => {
+        this.$refs.upload.clearFiles();
+      }).catch(err => {
+        this.$Message.error(err.message);
+      }).finally(() => {
+        removeLoading();
+      });
+    },
+    setMarkdown: function(markdown) {
+      this.markdown = markdown;
+    },
+    getMarkdown: function () {
+      return this.markdown;
+    }
+  },
+  mounted: function() {
+    const $vm = this.$refs.md;
+    $vm.$imgAdd = $imgAdd.bind($vm);
+    $vm.$img2Url = $img2Url.bind($vm);
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 3b1466e5..7a29c9dd 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -101,6 +101,12 @@ const routes = [
         path: 'rank',
         meta: { scrollToTop: true },
         component: () => import('@/views/contest/ContestRankView')
+      },
+      {
+        name: 'contest-clarification',
+        path: 'clarification',
+        meta: { scrollToTop: true },
+        component: () => import('@/views/contest/ContestClarificationView')
       }
     ]
   },
diff --git a/src/store/modules/contest.js b/src/store/modules/contest.js
index 6da8d624..607474ef 100644
--- a/src/store/modules/contest.js
+++ b/src/store/modules/contest.js
@@ -195,6 +195,10 @@ const getters = {
     }
   },
 
+  template: (state) => {
+    return state.contest.template
+  },
+
   submitUserNum: (state, getters) => {
     const sum = Array(state.problems.length);
     for (let j = 0; j < state.problems.length; j++) sum[j] = 0;
diff --git a/src/utils/api.js b/src/utils/api.js
index e0542871..3ef1e8a1 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -17,6 +17,7 @@ axios.defaults.withCredentials = true;
 
 function post(url, data) {
   data = data || {};
+
   return new Promise((resolve, reject) => {
     axios.post(url, data)
       .then(response => {
@@ -274,6 +275,28 @@ export default {
   singleUpload: function(data) {
     return post('/filesys/upload', data);
   },
+  /* QA part */
+  createQuestion: function(data) {
+    return post('/contest/createQuestion', data)
+  },
+  createReply: function (data) {
+    return post('/contest/reply', data)
+  },
+  getQuestion: function (data) {
+    return get('/contest/listQuestion', data)
+  },
+  getQuestionDetail: function (data) {
+    return get('/contest/questionDetail', data)
+  },
+  deleteQuestion: function (data) {
+    return get('/contest/delete', data)
+  },
+  editReply: function (data) {
+    return get('/manage/contest/edit', data)
+  },
+  setPublic: function (data) {
+    return post('/manage/contest/publicIt', data)
+  },
   /* third-party-login */
   thirdPartyLogin: function(params) {
     return get('/user/thirdPartyLogin', params);
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 41e43d3c..5327c06d 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -193,3 +193,8 @@ export const GROUP_STATUS_TYPE = {
   JOINED: 2,
   REJECTED: 3
 };
+
+export const CLARIFICATION_TYPE = {
+  UNPUBLIC: 'UNPUBLIC',
+  PUBLIC: 'PUBLIC'
+}
diff --git a/src/views/contest/ContestClarificationView.vue b/src/views/contest/ContestClarificationView.vue
new file mode 100644
index 00000000..01b29a2b
--- /dev/null
+++ b/src/views/contest/ContestClarificationView.vue
@@ -0,0 +1,391 @@
+<template>
+  <Layout style="min-height: 700px;">
+    <Sider width="" style="width: 25%; background: #fff; border-right: #797d7f solid 3px;">
+      <div class="request" @click="ChangeSubmitFormShow(true)">
+        <h5>
+        REQUEST
+        </h5>
+      </div>
+      <List item-layout="vertical" style="margin-left: 20px">
+        <ListItem
+          v-for="(item, index) in ClarificationToShow"
+          :key="item.contestClarificationId"
+          style="padding: 10px; margin-top: 10px; margin-right: 10px" class="listItem"
+          @click.native="getClarificationDetail(item.contestClarificationId, index)">
+          <div style=" position: relative">
+            <div :class="'dot smaller ' + item.isPublic"></div>
+            <h5 style="font-size: 120%; display: inline-block;">{{ item.title }}
+              <Icon type="ios-close" class="closeBtn"
+                    @click="DeleteQuestion(item, index)"
+                    v-if="isAdmin || item.username === username"/></h5>
+            <div class="contentOverView">
+              {{item.username}}
+            </div>
+          </div>
+        </ListItem>
+      </List>
+    </Sider>
+    <Content style="background: #fff; width: 75%">
+      <div style="padding: 20px 10px; margin-left: 10px" class="clarification detail" v-if="!submitFormVisible && getSelected">
+        <h1 style="font-size: 300%">{{ ClarificationToShow[getSelected - 1].title }}</h1>
+        <div class="clarification state" style="color: #f5a623">
+          <div :class=" 'dot bigger ' + ClarificationToShow[getSelected - 1].isPublic" style="margin-top: 30px"></div>
+          <div style="font-size: 100%; display: inline-block;">{{ ClarificationToShow[getSelected - 1].isPublic }}</div>
+          <checkbox v-model="isPublic" v-if="isAdmin" @on-change ="SetPublic(isPublic, ClarificationToShow[getSelected - 1].contestClarificationId)"
+                    style="display: inline-block; color: black; margin-left: 20px">
+            <p style="display: inline-block" class="publicState">{{ ClarificationToShow[getSelected - 1].isPublic }}</p>
+          </checkbox>
+        </div>
+        <ClarificationComment v-for="item in ClarificationReply"
+                              :clarification-content="item.message"
+                              :contest-clarification-id="item.contestClarificationId"
+                              :username="item.username"
+                              :time="item.gmtCreate | fromnow"
+                              :key="item.contestClarificationId"
+                              :reply-root="ClarificationReply[indexMp[item.parentId]]"
+                              :isPublic="ClarificationToShow[getSelected - 1].isPublic"
+                              @on-reply="handleReply(item)"
+                              @on-edit="handleEdit" />
+      </div>
+      <div  v-show="submitFormVisible">
+        <div class="createClaHeader" v-if="isCreate">
+          <div style="margin:20px 20px">
+            <h1>Title</h1>
+          </div>
+          <div style="padding-top: 20px">
+            <Select v-model="QuestionTitle" filterable style="margin: 0 3px 0 20px;width: 200px">
+              <Option v-for="item in nowOptions" :value="item.problemTitle" :key="item.problemCode">{{ item.problemTitle }}</Option>
+            </Select>
+            <input class="extraMsg" v-model="extraMsg">
+          </div>
+          <div style="margin: 20px 20px">
+            <h1>Question</h1>
+          </div>
+        </div>
+        <ClarificationComment :clarification-content="targetItem.message"
+                              :contest-clarification-id="targetItem.contestClarificationId"
+                              :username="targetItem.username"
+                              :time="targetItem.gmtCreate | fromnow"
+                              v-if="isAnswer"/>
+        <MarkdownEditor style="margin: 50px 20px;" ref="md" v-model="QuestionContent" />
+        <Button type="primary" class="btn" @click="SubmitForm">Submit</Button>
+        <Button type="success" class="btn" @click="ChangeSubmitFormShow(false);">Cancel</Button>
+      </div>
+    </Content>
+  </Layout>
+</template>
+
+<script>
+import { CLARIFICATION_TYPE } from '_u/constants';
+import ClarificationComment from '_c/ClarificationComment';
+import MarkdownEditor from '_c/editor/MarkdownEditor';
+import api from '_u/api';
+import { mapGetters, mapState } from 'vuex';
+import moment from 'moment';
+
+export default {
+  name: 'ContestClarification',
+  components: { MarkdownEditor, ClarificationComment },
+  filters: {
+    fromnow: function(timestamp) {
+      if (typeof (timestamp) === 'string') {
+        timestamp = parseInt(timestamp);
+      }
+      return moment(new Date(timestamp)).format('YYYY-MM-DD hh:mm:ss');
+    }
+  },
+  data: function () {
+    return {
+      submitFormVisible: false,
+      submitReply: '',
+      submitReplyVisible: false,
+      QuestionTitle: '',
+      QuestionContent: '',
+      extraMsg: '',
+      nowOptions: [],
+      ClarificationToShow: [],
+      ClarificationReply: [],
+      getSelected: Number,
+      isCreate: false,
+      eventType: {
+        Question: 0,
+        Reply: 1,
+        Edit: 2
+      },
+      event: Number,
+      targetItem: {},
+      isPublic: true,
+      indexMp: {},
+      isAnswer: false
+    }
+  },
+  methods: {
+    ChangeSubmitFormShow(e) {
+      this.isAnswer = false;
+      this.submitFormVisible = e;
+      this.isCreate = e;
+      this.event = this.eventType.Question
+      this.$refs.md.setMarkdown(this.$store.getters['contest/template'])
+    },
+    handleEdit(e) {
+      this.submitFormVisible = true;
+      this.isCreate = false;
+      this.$refs.md.markdown = e.clarification;
+      this.targetItem = e.id
+      this.event = this.eventType.Edit
+    },
+    handleReply(data) {
+      this.isAnswer = true;
+      this.submitFormVisible = true;
+      this.isCreate = false;
+      this.event = this.eventType.Reply;
+      this.targetItem = data
+      this.$refs.md.markdown = '';
+    },
+    SubmitForm() {
+      if (this.event === this.eventType.Question) this.SubmitQuestion()
+      else if (this.event === this.eventType.Reply) this.SubmitReply()
+      else this.EditReply()
+    },
+    SubmitQuestion() {
+      if (!this.QuestionTitle.length > 0) {
+        this.$Message.error({
+          title: 'Error',
+          content: '请选择一个问题'
+        })
+        return;
+      }
+      this.QuestionContent = this.$refs.md.getMarkdown()
+      this.QuestionTitle += ' ' + this.extraMsg
+      const that = this
+      api.createQuestion({
+        contestId: this.$store.getters['contest/contestId'],
+        title: this.QuestionTitle,
+        message: this.QuestionContent
+      }).then(ret => {
+        that.submitFormVisible = false
+        that.isCreate = false;
+        that.getClarification()
+      }).catch(err => {
+        that.$Message.error(err.message);
+      })
+    },
+    checkPublic() {
+      this.isPublic = (this.ClarificationToShow[this.getSelected - 1].isPublic === CLARIFICATION_TYPE.PUBLIC)
+    },
+    SubmitReply() {
+      this.QuestionContent = this.$refs.md.getMarkdown()
+      const Root = this.targetItem.rootId === '0' ? this.targetItem.contestClarificationId : this.targetItem.rootId
+      api.createReply({
+        contestId: this.$store.getters['contest/contestId'],
+        message: this.QuestionContent,
+        rootId: Root,
+        parentId: this.targetItem.contestClarificationId
+      }).then(ret => {
+        this.ChangeSubmitFormShow(false)
+        this.getClarificationDetail(this.ClarificationToShow[this.getSelected - 1].contestClarificationId)
+      }).catch(err => {
+        this.$Message.error(err.message);
+      })
+    },
+    getClarification() {
+      api.getQuestion({ contestId: this.$store.getters['contest/contestId'] }).then(ret => {
+        ret.forEach(item => {
+          if (item.isPublic) item.isPublic = CLARIFICATION_TYPE.PUBLIC
+          else item.isPublic = CLARIFICATION_TYPE.UNPUBLIC
+        });
+        this.ClarificationToShow = ret
+      }).catch(err => {
+        this.$Message.error(err.message);
+      })
+    },
+    getClarificationDetail(data, index) {
+      let flag = 0;
+      if (index >= 0) this.getSelected = index + 1;
+      this.ChangeSubmitFormShow(false)
+      this.checkPublic()
+      api.getQuestionDetail({ clarificationId: data }).then(ret => {
+        ret.forEach(item => {
+          if (item.isPublic) item.isPublic = CLARIFICATION_TYPE.PUBLIC
+          else item.isPublic = CLARIFICATION_TYPE.UNPUBLIC
+          this.indexMp[item.contestClarificationId] = flag;
+          flag++;
+        });
+        this.ClarificationReply = ret
+        this.ClarificationReply['000'] = {}
+        this.ClarificationReply['000'].message = 0
+        this.indexMp[0] = '000'
+      }).catch(err => {
+        this.$Message.error(err.message);
+      })
+    },
+    DeleteQuestion(e, index) {
+      this.$Modal.confirm({
+        title: 'Warning',
+        content: '<p>You are deleting the question.</p><p>Go on?</p>',
+        onOk: () => {
+          if (e.isPublic === 'Public') {
+            this.$Message.error('公开问题不予删除');
+          } else {
+            api.deleteQuestion({ clarificationId: e.contestClarificationId }).then(ret => {
+              this.$Message.success('删除成功')
+              this.ClarificationToShow.splice(index, 1)
+            }).catch(err => {
+              this.$Message.error(err.message)
+            })
+          }
+        }
+      });
+    },
+    EditReply(data) {
+      api.editReply({
+        clarificationId: this.targetItem,
+        content: this.$refs.md.getMarkdown()
+      }).then(ret => {
+        this.ChangeSubmitFormShow(false);
+        this.getClarificationDetail(this.ClarificationToShow[this.getSelected - 1].contestClarificationId)
+      }).catch(err => {
+        this.$Message.error(err.message)
+      })
+    },
+    SetPublic(data, id) {
+      data = (data ? 1 : 0);
+      api.setPublic({
+        clarificationId: id,
+        opt: data
+      }).then(ret => {
+        this.getClarification()
+      }).catch(err => {
+        this.$Message.error(err.message)
+      })
+    }
+  },
+  created() {
+    this.nowOptions = this.$store.getters['contest/problems'];
+    this.getClarification()
+    this.getSelected = 0
+  },
+  mounted: function () {
+    this.$nextTick(() => {
+      if (this.$store.getters['contest/template']) this.$refs.md.setMarkdown(this.$store.getters['contest/template'])
+    })
+  },
+  computed: {
+    ...mapGetters('user', ['isAdmin', 'username']),
+    ...mapState('contest', ['contest', 'problems']),
+    ...mapGetters('contest', [
+      'contestId',
+      'problems',
+      'template'
+    ]),
+    ...mapGetters('user', ['profile']),
+    CLARIFICATION_TYPE: () => CLARIFICATION_TYPE
+  }
+}
+</script>
+
+<style scoped>
+.request {
+  width: 37%;
+  padding: 10px;
+  margin: 20px auto 0;
+  border-radius: 15px;
+  border: #f5a623 solid 4px;
+  text-align: center;
+  font-size: 100%;
+}
+
+.request:hover {
+  background: #f5a623;
+}
+
+.dot {
+  border-radius: 50%;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.smaller {
+  width: 3%;
+  height: 0;
+  padding-bottom: 3%;
+}
+
+.bigger {
+  width: 1%;
+  height: 0;
+  padding-bottom: 1%;
+}
+
+.UNPUBLIC {
+  background: #f5a623;
+}
+
+.PUBLIC {
+  background: #60e760;
+}
+
+.contentOverView {
+  padding-left: 5%;
+  color: #9a9a9a;
+  font-size: 120%;
+}
+
+.contentDetailView {
+  padding-left: 7px;
+  font-size: 130%;
+  margin-top: 15px;
+}
+
+.listItem:hover {
+  background: #c4d8ff;
+}
+
+.clarification .answer {
+  margin-top: 10px;
+  padding-left: 15px;
+  padding-bottom: 70px;
+  padding-top: 10px;
+  font-size: 170%;
+  border-left: #BDC3C7 11px solid;
+  background: #f3f3f3;
+}
+
+.answer .btn {
+  position: absolute;
+  bottom: 10%;
+}
+
+.btn {
+  float: right;
+  margin-right: 20px;
+}
+
+.extraMsg {
+  background: #fff;
+  border: 1px solid;
+  display: inline-block;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  width: 700px;
+  padding-left: 3px;
+  padding-right: 20px;
+  border-radius: 5px;
+}
+
+.closeBtn {
+  display: inline-block;
+  position: absolute;
+  right: 1px;
+}
+
+.closeBtn:hover {
+  background: #ed4014;
+}
+
+/deep/ .v-note-wrapper {
+  z-index: 0;
+}
+
+</style>
diff --git a/src/views/contest/ContestDetailView.vue b/src/views/contest/ContestDetailView.vue
index 86829c49..32b17e71 100644
--- a/src/views/contest/ContestDetailView.vue
+++ b/src/views/contest/ContestDetailView.vue
@@ -74,6 +74,11 @@
           }">
             <span class="span__menu">Rank</span>
           </MenuItem>
+          <MenuItem name="clarification" :to="{
+            name: 'contest-clarification',
+          }">
+            <span class="span__menu">Clarification</span>
+          </MenuItem>
         </template>
         <div class="contest__countdown">
           <template v-if="contestStatus === CONTEST_STATUS.FINISHED">