diff --git a/frontend/admin/package.json b/frontend/admin/package.json
index b66b911..0589875 100644
--- a/frontend/admin/package.json
+++ b/frontend/admin/package.json
@@ -10,8 +10,8 @@
     "test": ""
   },
   "dependencies": {
-    "vue": "^1.0.21",
-    "babel-runtime": "^6.0.0"
+    "babel-runtime": "^6.0.0",
+    "vue": "^1.0.21"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -46,7 +46,6 @@
     "vue-resource": "^0.9.3",
     "vue-router": "^0.7.13",
     "vue-style-loader": "^1.0.0",
-    "vue-tagsinput": "^0.3.1",
     "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
diff --git a/frontend/admin/src/components/account/userList.vue b/frontend/admin/src/components/account/userList.vue
index 9fe90ff..b1c790a 100644
--- a/frontend/admin/src/components/account/userList.vue
+++ b/frontend/admin/src/components/account/userList.vue
@@ -48,8 +48,6 @@
     import Router from 'vue-router'
     import pager from '../utils/pager.vue'
 
-    //import editUser from './editUser.vue'
-
     export default {
         data: function () {
             return {
@@ -103,8 +101,6 @@
             search() {
                 sessionStorage.userListSearchKeyword = this.keyword;
                 this.$router.go({path: "/user/1", query: {_: (new Date()).getTime()}});
-                // pager goto page 1
-                // url -> /user/1
             },
             edit(userId) {
                 this.$router.go("/user/edit/" + userId)
diff --git a/frontend/admin/src/components/problem/createProblem.vue b/frontend/admin/src/components/problem/createProblem.vue
new file mode 100644
index 0000000..f629b7f
--- /dev/null
+++ b/frontend/admin/src/components/problem/createProblem.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="rows">
+        <back></back>
+        <h3>{{ $t("problem.createProblem") }}</h3>
+        <div class="form-group col-md-12">
+            <label>{{ $t("adminUtils.title") }}</label>
+            <input type="text" class="form-control" maxlength="50" required>
+        </div>
+
+        <div class="form-group col-md-12">
+            <label>{{ $t("adminUtils.description") }}</label>
+            <simditor></simditor>
+        </div>
+
+        <div class="col-md-3">
+            <div class="form-group">
+                <label>{{ $t("problem.timeLimit") }}</label>
+                <input type="number" class="form-control" required>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="form-group"><label>{{ $t("problem.memoryLimit") }}</label>
+                <input type="number" class="form-control" required>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="form-group">
+                <label>{{ $t("problem.difficulty") }}</label>
+                <select class="form-control" required>
+                    <option value="1" selected="selected">{{ $t("problem.easy") }}</option>
+                    <option value="2">{{ $t("problem.medium") }}</option>
+                    <option value="3">{{ $t("problem.hard") }}</option>
+                </select>
+            </div>
+        </div>
+        <div class="col-md-3 form-group">
+            <label>{{ $t("adminUtils.isVisible")}}</label><br>
+            <input type="checkbox">可见
+        </div>
+        <div class="col-md-12">
+            <label>{{ $t("problem.tag") }}</label>
+            <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>
+
+
+    </div>
+</template>
+
+<script>
+    import testCaseMgnt from "./testCaseMgnt.vue"
+    import problemSample from "./problemSample.vue"
+
+    import back from "../utils/back.vue"
+    import simditor from "../utils/simditor.vue"
+    import tagInput from "../utils/tagInput.vue"
+
+    export default({
+        data() {
+            return {
+                tagList: ["1234", "呵呵哒"]
+            }
+        },
+        components: {
+            testCaseMgnt,
+            problemSample,
+            back,
+            simditor,
+            tagInput
+        },
+        ready() {
+            this.$refs.testcase.setTestCase([{input_name: "1.in", output_name: "1.out"}], false);
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/problem/problem.vue b/frontend/admin/src/components/problem/problem.vue
deleted file mode 100644
index 27c2635..0000000
--- a/frontend/admin/src/components/problem/problem.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div>
-        <test-case-mgnt></test-case-mgnt>
-    </div>
-</template>
-
-<script>
-    import testCaseMgnt from "./testCaseMgnt.vue"
-
-    export default({
-        components: {
-            testCaseMgnt
-        }
-    })
-</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/problem/problemList.vue b/frontend/admin/src/components/problem/problemList.vue
new file mode 100644
index 0000000..13d02a7
--- /dev/null
+++ b/frontend/admin/src/components/problem/problemList.vue
@@ -0,0 +1,93 @@
+<template>
+    <h3>{{ $t("problem.problemList") }}</h3>
+    <div>
+            <form class="form-inline" onsubmit="return false;">
+                <div class="form-group-sm">
+                    <label>{{ $t("adminUtils.search") }}</label>
+                    <input name="keyword" class="form-control" placeholder='{{ $t("adminUtils.inputKeyword") }}'
+                           v-model="keyword">
+                    <button type="button" class="btn btn-primary" v-on:click="search">{{ $t("adminUtils.search") }}
+                    </button>
+                </div>
+            </form>
+            <br>
+        </div>
+    <table class="table table-striped">
+        <tr>
+            <th>ID</th>
+            <th>{{ $t("adminUtils.title") }}</th>
+            <th>{{ $t("adminUtils.createTime") }}</th>
+            <th>{{ $t("adminUtils.createdBy") }}</th>
+            <th>{{ $t("adminUtils.isVisible") }}</th>
+            <th>{{ $t("adminUtils.management") }}</th>
+        </tr>
+        <tr v-for="problem in problemList">
+            <td>{{ problem.id }}</td>
+            <td>{{ problem.title }}</td>
+            <td>{{ problem.create_time }}</td>
+            <td>{{ problem.created_by.username }}</td>
+            <td>{{ $t(problemStatus[problem.visible?1:0]) }}</td>
+            <td>
+                <button class="btn-sm btn-info" v-on:click="edit(problem.id)">{{ $t("adminUtils.edit") }}</button>
+            </td>
+        </tr>
+    </table>
+    <pager :pagination="pagination" :callback="loadData"></pager>
+
+</template>
+
+<script>
+    import pager from "../utils/pager.vue"
+
+    export default({
+        data() {
+            return {
+                keyword: "",
+                problemStatus: ["adminUtils.visible", "adminUtils.invisible"],
+                problemList: [],
+                pagination: {
+                    currentPage: 1,
+                    totalPages: 10
+                }
+            }
+        },
+        methods: {
+            loadData() {
+                var url = "/api/admin/problem/?paging=true&page_size=2&page=" + this.pagination.currentPage;
+                if (this.keyword) {
+                    url += ("&keyword=" + this.keyword)
+                }
+                this.request({
+                    url: url,
+                    method: "GET",
+                    success: (data)=> {
+                        this.problemList = data.data.results;
+                        this.pagination.totalPages = data.data.total_page;
+                    }
+                })
+            },
+            edit(problemId){
+                this.$router.go("/problem/edit/" + problemId)
+            },
+            search() {
+                sessionStorage.problemListSearchKeyword = this.keyword;
+                this.$router.go({path: "/problem/1", query: {_: (new Date()).getTime()}});
+            },
+        },
+        route: {
+            data(){
+                if (sessionStorage.problemListSearchKeyword) {
+                    this.keyword = sessionStorage.problemListSearchKeyword;
+                }
+                this.loadData();
+            }
+        },
+        components: {
+            pager
+        }
+    })
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/admin/src/locales.js b/frontend/admin/src/locales.js
index 07bbf19..6eb2d28 100644
--- a/frontend/admin/src/locales.js
+++ b/frontend/admin/src/locales.js
@@ -7,8 +7,11 @@ export default {
             cancel: "取消"
         },
         nav: {
+            general: "通用",
             userManagement: "用户管理",
-            announcementManagement: "公告管理"
+            announcementManagement: "公告管理",
+            problemManagement: "题目管理",
+            createProblem: "创建题目",
         },
         pagination: {
             firstPage: "首页",
@@ -53,6 +56,8 @@ export default {
             contentCanNotBeEmpty: "内容不能为空"
         },
         problem: {
+            problemList: "题目列表",
+            createProblem: "创建题目",
             sample: "样例",
             addSample: "添加样例",
             fold: "折叠",
@@ -61,8 +66,17 @@ export default {
             testCase: "测试用例",
             uploadProgress: "上传进度",
             OIMode: "OI模式",
-            score: "分数"
-
+            score: "分数",
+            timeLimit: "时间限制",
+            memoryLimit: "内存限制",
+            tag: "标签",
+            hard: "难",
+            medium: "中等",
+            easy: "简单",
+            difficulty: "难度"
+        },
+        tag: {
+            hint: "回车创建标签"
         },
         adminUtils: {
             search: "搜索",
@@ -71,6 +85,7 @@ export default {
             edit: "编辑",
 
             title: "标题",
+            description: "描述",
             createTime: "创建时间",
             lastUpdateTime: "最后更新",
             createdBy: "创建人",
diff --git a/frontend/admin/src/main.js b/frontend/admin/src/main.js
index f0c0675..7f03fc7 100644
--- a/frontend/admin/src/main.js
+++ b/frontend/admin/src/main.js
@@ -12,10 +12,13 @@ import getCookie from "./utils/cookie"
 
 import userList from "./components/account/userList.vue"
 import editUser from "./components/account/editUser.vue"
-import problem from "./components/problem/problem.vue"
+
 import announcementList from "./components/announcement/announcementList.vue"
 import editAnnouncement from "./components/announcement/editAnnouncement.vue"
 
+import createProblem from "./components/problem/createProblem.vue"
+import problemList from "./components/problem/problemList.vue"
+
 
 // i18n settings
 Vue.use(VueI18n);
@@ -87,33 +90,25 @@ var router = new VueRouter({linkActiveClass: "active"});
 
 router.map({
     "/user/:page": {
-        name: "userList",
         component: userList
     },
     "/user/edit/:userId": {
-        name: "editUser",
         component: editUser
     },
     "/problem/create": {
-        name: "createProblem",
-        component: problem
+        component: createProblem
+    },
+    "/problem/:page": {
+        component: problemList
     },
     "/announcement/:page": {
-        name: "announcementList",
         component: announcementList
     },
     "/announcement/edit/:announcementId": {
-        name: "editAnnouncement",
         component: editAnnouncement
-    },
-    "/problem": {
-        component: problem
     }
 });
 
-// hide loading
-document.getElementById("loading").style.display = "none";
-
 // override window.alert
 window.alert = function bootboxAlert(content) {
     bootbox.dialog({
@@ -157,6 +152,10 @@ window.confirm = function bootboxConfirm(content, okCallback, cancelCallback) {
 
 router.redirect({"/user": "/user/1"});
 router.redirect({"/announcement": "/announcement/1"});
+router.redirect({"/problem": "problem/1"});
 
+setTimeout(function(){
+// hide loading
+document.getElementById("loading").style.display = "none";
 router.start(App, '#app');
-
+}, 1500);