diff --git a/frontend/admin/src/App.vue b/frontend/admin/src/App.vue
index f21c58b..5325594 100644
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -24,6 +24,10 @@
     @import "../../static/css/bootstrap.css";
     @import "../../static/css/todc-bootstrap.css";
 
+    label {
+        font-size: 16px;
+    }
+
 </style>
 
 <script>
diff --git a/frontend/admin/src/components/problem/createProblem.vue b/frontend/admin/src/components/problem/createProblem.vue
index 347e02a..88365a3 100644
--- a/frontend/admin/src/components/problem/createProblem.vue
+++ b/frontend/admin/src/components/problem/createProblem.vue
@@ -9,7 +9,7 @@
 
         <div class="form-group col-md-12">
             <label>{{ $t("adminUtils.description") }}</label>
-            <simditor></simditor>
+            <simditor v-ref:problemdescription></simditor>
         </div>
 
         <div class="col-md-3">
@@ -45,32 +45,36 @@
             <tag-input :tag-list.sync="tagList"></tag-input>
         </div>
 
-        <problem-sample v-ref:sample></problem-sample>
-        <test-case-mgnt v-ref:testcase></test-case-mgnt>
+        <problem-sample :samples.sync="samples"></problem-sample>
+        <test-case-mgnt :mode="mode" :test-case-list="testCaseList"></test-case-mgnt>
 
         <div class="col-md-12">
-            <code-mirror></code-mirror>
+            <label>Special Judge</label>
+            <code-mirror :selected-language-name="selectedLanguageName" :language-list="languageList"></code-mirror>
         </div>
-
-
-
     </div>
 </template>
 
 <script>
-    import testCaseMgnt from "./testCaseMgnt.vue"
-    import problemSample from "./problemSample.vue"
+    import testCaseMgnt from "../utils/testCaseMgnt.vue"
+    import problemSample from "../utils/problemSample.vue"
 
     import back from "../utils/back.vue"
     import simditor from "../utils/simditor.vue"
     import tagInput from "../utils/tagInput.vue"
     import codeMirror from "../utils/codeMirror.vue"
     import help from "../utils/help.vue"
+    import helpLink from "../utils/helpLink.vue"
 
     export default({
         data() {
             return {
-                tagList: ["1234", "呵呵哒"]
+                tagList: ["1234", "呵呵哒"],
+                selectedLanguageName: "C",
+                languageList: [{name: "C", description: "xxxxxx"}],
+                samples: [{input: "", output: "", visible: true}],
+                mode: "ACM",
+                testCaseList: [{input_name: "1.in", output_name: "1.out"}]
             }
         },
         components: {
@@ -80,10 +84,8 @@
             simditor,
             tagInput,
             codeMirror,
-            help
-        },
-        ready() {
-            this.$refs.testcase.setTestCase([{input_name: "1.in", output_name: "1.out"}], false);
+            help,
+            helpLink
         }
     })
 </script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/problem/spj.vue b/frontend/admin/src/components/problem/spj.vue
new file mode 100644
index 0000000..8504d1f
--- /dev/null
+++ b/frontend/admin/src/components/problem/spj.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="col-md-12">
+        <code-mirror></code-mirror>
+    </div>
+</template>
+
+<script>
+    import codeMirror from "../utils/codeMirror.vue"
+</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/utils/codeMirror.vue b/frontend/admin/src/components/utils/codeMirror.vue
index 8fb6e24..109a3dc 100644
--- a/frontend/admin/src/components/utils/codeMirror.vue
+++ b/frontend/admin/src/components/utils/codeMirror.vue
@@ -1,27 +1,82 @@
 <template>
-    <textarea id="{{ editorId }}"></textarea>
+    <div>
+        <div>
+            <p>{{ $t("problem.chooseLanguage") }}</p>
+            <div id="language-radio">
+                <template v-for="language in languageList">
+                    <span class="radio-inline">
+                        <input type="radio" value="{{ language.name }}" name="language" v-model="selectedLanguageName">
+                        {{ language.name }} ({{ language.description }})
+                    </span>
+                </template>
+            </div>
+        </div>
+        <div>
+            <p>{{ $t("problem.submitCode") }}</p>
+            <textarea id="{{ editorId }}"></textarea>
+        </div>
+    </div>
 </template>
 
 <script>
     import CodeMirror from "codemirror"
     import "codemirror/mode/javascript/javascript"
     import "codemirror/mode/python/python"
+    import "codemirror/mode/clike/clike"
+    import "codemirror/mode/meta"
+
+    function getMime(languageName) {
+        for (let item of CodeMirror.modeInfo) {
+            if (item.name == languageName) {
+                return item.mime;
+            }
+        }
+        throw "Invalid language " + languageName;
+    }
 
     export default({
+        props: {
+            languageList: {
+                type: Array,
+                required: true,
+            },
+            selectedLanguageName: {
+                type: String,
+                required: true,
+            }
+        },
         data() {
             return {
                 editor: {},
                 editorId: Math.random().toString(36).substr(2),
-                language: "python"
+            }
+        },
+        watch: {
+            language(newVal, oldVal) {
+                this.editor.setOption("mode", getMime(newVal.name))
             }
         },
         attached() {
-            CodeMirror.fromTextArea(document.getElementById(this.editorId), {
+            this.editor = CodeMirror.fromTextArea(document.getElementById(this.editorId), {
                 lineNumbers: true,
-                mode: this.language,
+                mode: getMime(this.selectedLanguageName),
                 indentUnit: 4,
                 matchBrackets: true
             });
+        },
+        methods: {
+            setLanguage(languageName) {
+                this.selectedLanguageName = languageName;
+            },
+            setCode(code) {
+                this.editor.setValue(code);
+            },
+            getCode() {
+                return this.editor.getValue();
+            },
+            getLanguage() {
+                return this.selectedLanguageName;
+            }
         }
     })
 </script>
@@ -42,4 +97,8 @@
         position: relative;
         outline: none;
     }
+
+    #language-radio {
+        margin: 5px;
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/admin/src/components/utils/help.vue b/frontend/admin/src/components/utils/help.vue
index 8dea8c1..efa0520 100644
--- a/frontend/admin/src/components/utils/help.vue
+++ b/frontend/admin/src/components/utils/help.vue
@@ -12,7 +12,10 @@
 
     export default({
         props: {
-            name: ""
+            name: {
+                type: String,
+                required: true
+            }
         },
         methods: {
             translate() {
diff --git a/frontend/admin/src/components/utils/helpLink.vue b/frontend/admin/src/components/utils/helpLink.vue
new file mode 100644
index 0000000..c31f42e
--- /dev/null
+++ b/frontend/admin/src/components/utils/helpLink.vue
@@ -0,0 +1,14 @@
+<template>
+    <a href="{{ link }}" target="_blank"><span class="glyphicon glyphicon-link"></span></a>
+</template>
+
+<script>
+    export default ({
+        props: {
+            link: {
+                type: String,
+                required: true
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/problem/problemSample.vue b/frontend/admin/src/components/utils/problemSample.vue
similarity index 86%
rename from frontend/admin/src/components/problem/problemSample.vue
rename to frontend/admin/src/components/utils/problemSample.vue
index b445cea..600f842 100644
--- a/frontend/admin/src/components/problem/problemSample.vue
+++ b/frontend/admin/src/components/utils/problemSample.vue
@@ -18,13 +18,13 @@
                 <div class="panel-body row" v-show="sample.visible">
                     <div class="col-md-6">
                         <div class="form-group">
-                            <label>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</label>
+                            <p>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</p>
                             <textarea class="form-control" rows="5" required></textarea>
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="form-group">
-                            <label>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</label>
+                            <p>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</p>
                             <textarea class="form-control" rows="5" required></textarea>
                         </div>
                     </div>
@@ -36,9 +36,10 @@
 
 <script>
     export default({
-        data() {
-            return {
-                samples: [{input: "", output: "", visible: true}]
+        props: {
+            samples: {
+                type: Array,
+                required: true
             }
         },
         methods: {
@@ -70,8 +71,14 @@
     })
 </script>
 
-<style>
+<style scoped>
     .add-sample-btn {
         margin-bottom: 5px;
     }
+    .panel-heading {
+        padding-bottom: 8px;
+    }
+    .panel-body {
+        padding-top: 5px;
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/admin/src/components/utils/tagInput.vue b/frontend/admin/src/components/utils/tagInput.vue
index 8fed324..da7e646 100644
--- a/frontend/admin/src/components/utils/tagInput.vue
+++ b/frontend/admin/src/components/utils/tagInput.vue
@@ -19,12 +19,14 @@
         props: {
             tagList: {
                 type: Array,
+                required: false,
                 default: ()=>{
                     return []
                 }
             },
             tagAutoCompleteList: {
                 type: Array,
+                required: false,
                 default: ()=>{
                     return []
                 }
@@ -32,20 +34,20 @@
         },
         data () {
             return {
-                text: '',
+                text: "",
             }
         },
         methods: {
             addTag (text) {
-                if (text.trim() != '') {
+                if (text.trim() != "" && this.tagList.indexOf(text.trim()) == -1) {
                     var count = this.tagList.length;
                     this.tagList.$set(count, text);
-                    this.text = ''
                 }
+                this.text = ""
             },
             delTag (index, way) {
                 if (way) {
-                    if (index >= 0 && this.text == '') {
+                    if (index >= 0 && this.text == "") {
                         this.tagList.splice(index, 1)
                     }
                 } else {
@@ -110,4 +112,4 @@
     .tags-transition {
         transition: all .3s ease;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/admin/src/components/problem/testCaseMgnt.vue b/frontend/admin/src/components/utils/testCaseMgnt.vue
similarity index 52%
rename from frontend/admin/src/components/problem/testCaseMgnt.vue
rename to frontend/admin/src/components/utils/testCaseMgnt.vue
index dcaf74b..18fa4f3 100644
--- a/frontend/admin/src/components/problem/testCaseMgnt.vue
+++ b/frontend/admin/src/components/utils/testCaseMgnt.vue
@@ -2,21 +2,29 @@
     <div class="col-md-12">
         <label>
             {{ $t("problem.testCase") }}
-            <a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
-               target="_blank">{{ $t("adminUtils.help") }}
-            </a>
-            <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
+            <help-link :link="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"></help-link>
+            <a v-show="downloadURL" v-bind:href="downloadURL">{{ $t("adminUtils.download") }}</a>
         </label>
-        <br>
-        <input type="checkbox" v-model="OIMode"> {{ $t("problem.OIMode") }}
-        <br>
-        <label>{{ $t("problem.uploadProgress") }}</label>
-        <div class="progress">
-            <div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
-                 aria-valuemin="0"
-                 aria-valuemax="100"
-                 v-bind:style="{width: uploadProgress+'%'}">
-                {{ uploadProgress }} %
+
+        <div>
+            <div class="form-group">
+                <p>{{ $t("problem.mode") }}</p>
+                <div>
+                    <span class="radio-inline"><input type="radio" name="mode" value="ACM" checked>{{ $t("problem.ACMMode") }}</span>
+                    <span class="radio-inline"><input type="radio" name="mode" value="OI">{{ $t("problem.OIMode") }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div>
+            <p>{{ $t("problem.uploadProgress") }}</p>
+            <div class="progress">
+                <div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
+                     aria-valuemin="0"
+                     aria-valuemax="100"
+                     v-bind:style="{width: uploadProgress+'%'}">
+                    {{ uploadProgress }} %
+                </div>
             </div>
         </div>
 
@@ -31,7 +39,8 @@
                 <td>{{ $index + 1 }}</td>
                 <td>{{ testCase.input_name }}</td>
                 <td>{{ testCase.output_name }}</td>
-                <td v-if="OIMode"><input class="score" v-model="testCase.score" type="number" min="1" required></td>
+                <td v-if="mode == 'OI'"><input class="score" v-model="testCase.score" type="number" min="1" required>
+                </td>
             </tr>
         </table>
         <div class="form-group">
@@ -47,18 +56,34 @@
 
 <script>
     import uploader from "../utils/uploader.vue"
+    import helpLink from "../utils/helpLink.vue"
 
     export default({
+        props: {
+            downloadURL: {
+                type: String,
+                required: false,
+                default() {
+                    return ""
+                }
+            },
+            testCaseList: {
+                type: Array,
+                required: true
+            },
+            mode: {
+                type: String,
+                required: true
+            }
+        },
         data() {
             return {
-                downloadUrl: "",
                 uploadProgress: 0,
-                testCaseList: [],
-                OIMode: false
             }
         },
         components: {
-            uploader
+            uploader,
+            helpLink
         },
         methods: {
             uploadSuccess(f, response){
@@ -66,13 +91,12 @@
             },
             uploadError(f, reason){
                 this.uploadProgress = 0;
-                alert($t("request.error"));
+                alert(this.$t("request.error"));
             },
             setTestCase(mode, testCaseList) {
-                this.OIMode = mode == "OI";
                 // attr must be set firstly so vue can track it's changes
-                if (this.OIMode) {
-                    for(let item of testCaseList) {
+                if (this.mode == "OI") {
+                    for (let item of testCaseList) {
                         item.score = 0;
                     }
                 }
@@ -80,8 +104,8 @@
             },
             getTestCase() {
                 var testCaseList = this.testCaseList;
-                if (!this.OIMode) {
-                    for(let item of testCaseList) {
+                if (this.mode != "OI") {
+                    for (let item of testCaseList) {
                         delete item.score;
                     }
                 }
diff --git a/frontend/admin/src/locales.js b/frontend/admin/src/locales.js
index 3777f35..3a98dc7 100644
--- a/frontend/admin/src/locales.js
+++ b/frontend/admin/src/locales.js
@@ -65,7 +65,9 @@ export default {
             deleteThisSample: "删除这组样例?",
             testCase: "测试用例",
             uploadProgress: "上传进度",
+            mode: "模式",
             OIMode: "OI模式",
+            ACMMode: "ACM模式",
             score: "分数",
             timeLimit: "时间限制",
             memoryLimit: "内存限制",
@@ -73,7 +75,9 @@ export default {
             hard: "难",
             medium: "中等",
             easy: "简单",
-            difficulty: "难度"
+            difficulty: "难度",
+            chooseLanguage: "选择语言",
+            submitCode: "提交代码"
         },
         tag: {
             hint: "回车创建标签"