diff --git a/announcement/serializers.py b/announcement/serializers.py
index 75c395f..6a6e629 100644
--- a/announcement/serializers.py
+++ b/announcement/serializers.py
@@ -2,6 +2,8 @@
 from rest_framework import serializers
 
 from account.models import User
+from utils.serializers import DateTimeTZField
+
 from .models import Announcement
 
 
@@ -11,6 +13,8 @@ class CreateAnnouncementSerializer(serializers.Serializer):
 
 
 class AnnouncementSerializer(serializers.ModelSerializer):
+    create_time = DateTimeTZField()
+    last_update_time = DateTimeTZField
 
     class UserSerializer(serializers.ModelSerializer):
         class Meta:
diff --git a/frontend/admin/src/components/account/editUser.vue b/frontend/admin/src/components/account/editUser.vue
index 7c1a377..54be5ef 100644
--- a/frontend/admin/src/components/account/editUser.vue
+++ b/frontend/admin/src/components/account/editUser.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <back></back>
-        <h3>修改用户信息</h3>
+        <h3>{{ $t("user.editUser") }}</h3>
         <form v-on:submit="submit">
             <div class="row">
                 <div class="form-group col-md-4"><label>ID</label>
@@ -20,7 +20,7 @@
                 <div class="form-group col-md-4">
                     <label>{{ $t("user.newPassword") }}</label>
                     <input type="password" class="form-control"
-                           placeholder='{{ $t("user.leaveBlankIfDoNotChangePassword")}}' v-model="newPassword">
+                           placeholder='{{ $t("user.leaveBlankIfDoNotChangePassword")}}' v-model="newPassword" minlength="6">
                 </div>
                 <div class="form-group col-md-4">
                     <label>{{ $t("user.email") }}</label>
@@ -51,19 +51,19 @@
                 <h4>{{ $t("user.adminExtraPermission") }}</h4>
                 <div class="row">
                     <div class="form-group col-md-3">
-                        <label>{{ $t("adminUtils.createPublicContest") }}</label>
+                        <label>{{ $t("user.createPublicContest") }}</label>
                         <input type="checkbox" class="form-control" v-model="permission.createPublicContest">
                     </div>
                     <div class="form-group col-md-3">
-                        <label>{{ $t("adminUtils.manageAllContest") }}</label>
+                        <label>{{ $t("user.manageAllContest") }}</label>
                         <input type="checkbox" class="form-control" v-model="permission.manageAllContest">
                     </div>
                     <div class="form-group col-md-3">
-                        <label>{{ $t("adminUtils.manageOwnProblem") }}</label>
+                        <label>{{ $t("user.manageOwnProblem") }}</label>
                         <input type="checkbox" class="form-control" v-model="permission.manageOwnProblem">
                     </div>
                     <div class="form-group col-md-3">
-                        <label>{{ $t("adminUtils.manageAllProblem") }}</label>
+                        <label>{{ $t("user.manageAllProblem") }}</label>
                         <input type="checkbox" class="form-control" v-model="permission.manageAllProblem">
                     </div>
                 </div>
@@ -81,9 +81,9 @@
     export default {
         data() {
             return {
-                adminType: [{name: "adminUtils.regularUser", value: 0},
-                    {name: "adminUtils.admin", "value": 1},
-                    {name: "adminUtils.superAdmin", value: 2}],
+                adminType: [{name: "user.regularUser", value: 0},
+                    {name: "user.admin", "value": 1},
+                    {name: "user.superAdmin", value: 2}],
                 user: {},
                 permission: {
                     manageAllContest: false, createPublicContest: false,
diff --git a/frontend/admin/src/components/account/userList.vue b/frontend/admin/src/components/account/userList.vue
index b4d352e..2ab32a5 100644
--- a/frontend/admin/src/components/account/userList.vue
+++ b/frontend/admin/src/components/account/userList.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <div class="right">
+        <h3>{{ $t("user.userList") }}</h3>
+        <div>
             <form class="form-inline" onsubmit="return false;">
                 <div class="form-group-sm">
                     <label>{{ $t("adminUtils.search") }}</label>
@@ -54,7 +55,7 @@
             return {
                 keyword: "",
                 userList: [],
-                adminType: ["adminUtils.regularUser", "adminUtils.admin", "adminUtils.superAdmin"],
+                adminType: ["user.regularUser", "user.admin", "user.superAdmin"],
                 showAdminOnly: false,
 
                 pagination: {
diff --git a/frontend/admin/src/components/announcement/announcementList.vue b/frontend/admin/src/components/announcement/announcementList.vue
new file mode 100644
index 0000000..75a632f
--- /dev/null
+++ b/frontend/admin/src/components/announcement/announcementList.vue
@@ -0,0 +1,74 @@
+<template>
+    <h3>{{ $t("announcement.announcementList") }}</h3>
+    <table class="table table-striped">
+        <tr>
+            <th>ID</th>
+            <th>{{ $t("announcement.title") }}</th>
+            <th>{{ $t("announcement.createTime") }}</th>
+            <th>{{ $t("announcement.lastUpdateTime") }}</th>
+            <th>{{ $t("announcement.createdBy") }}</th>
+            <th>{{ $t("announcement.isVisible") }}</th>
+            <th>{{ $t("announcement.management") }}</th>
+        </tr>
+        <tr v-for="announcement in announcementList">
+            <td>{{ announcement.id }}</td>
+            <td>{{ announcement.title }}</td>
+            <td>{{ announcement.create_time }}</td>
+            <td>{{ announcement.last_update_time }}</td>
+            <td>{{ announcement.created_by.username }}</td>
+            <td>{{ $t(announcementStatus[announcement.visible?1:0]) }}</td>
+            <td>
+                <button class="btn-sm btn-info" v-on:click="edit(announcement.id)">{{ $t("announcement.edit") }}</button>
+            </td>
+        </tr>
+    </table>
+    <pager :pagination="pagination" :callback="loadData"></pager>
+
+    <create-announcement></create-announcement>
+</template>
+
+<script>
+    import pager from "../utils/pager.vue"
+    import createAnnouncement from "./createAnnouncement.vue"
+
+    export default({
+        data() {
+            return {
+                announcementStatus: ["announcement.visible", "announcement.invisible"],
+                announcementList: [],
+                pagination: {
+                    currentPage: 1,
+                    totalPages: 10
+                }
+            }
+        },
+        methods: {
+            loadData() {
+                this.request({
+                    url: "/api/admin/announcement/?paging=true&page_size=2&page=" + this.pagination.currentPage,
+                    method: "GET",
+                    success: (data)=> {
+                        this.announcementList = data.data.results;
+                        this.pagination.totalPages = data.data.total_page;
+                    }
+                })
+            },
+            edit(announcementId){
+                this.$router.go("/announcement/edit/" + announcementId)
+            },
+        },
+        route: {
+            data(){
+                this.loadData();
+            }
+        },
+        components: {
+            pager,
+            createAnnouncement
+        }
+    })
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/admin/src/components/announcement/createAnnouncement.vue b/frontend/admin/src/components/announcement/createAnnouncement.vue
new file mode 100644
index 0000000..741429c
--- /dev/null
+++ b/frontend/admin/src/components/announcement/createAnnouncement.vue
@@ -0,0 +1,37 @@
+<template>
+    <h3>
+        {{ $t("announcement.createAnnouncement") }}
+    </h3>
+    <form v-on:submit="submit">
+        <div class="row">
+            <div class="form-group col-md-12">
+                <label>{{ $t("announcement.title") }}</label>
+                <input type="text" class="form-control">
+            </div>
+            <div class="form-group col-md-12">
+                <simditor editorid="createAnnouncement"></simditor>
+            </div>
+        </div>
+        <div class="form-group">
+            <input type="submit" class="btn btn-primary" value='{{ $t("adminUtils.submit") }}'>
+        </div>
+    </form>
+</template>
+
+<script>
+    import simditor from "../utils/simditor.vue"
+
+    export default({
+        data() {
+            return {}
+        },
+        methods: {
+            submit() {
+
+            }
+        },
+        components: {
+            simditor
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/announcement/editAnnouncement.vue b/frontend/admin/src/components/announcement/editAnnouncement.vue
new file mode 100644
index 0000000..e497e72
--- /dev/null
+++ b/frontend/admin/src/components/announcement/editAnnouncement.vue
@@ -0,0 +1,40 @@
+<template>
+    <back></back>
+    <h3>
+        {{ $t("announcement.editAnnouncement") }}
+    </h3>
+    <form v-on:submit="submit">
+        <div class="row">
+            <div class="form-group col-md-12">
+                <label>{{ $t("announcement.title") }}</label>
+                <input type="text" class="form-control">
+            </div>
+            <div class="form-group col-md-12">
+                <simditor editorid="editAnnouncement"></simditor>
+            </div>
+        </div>
+        <div class="form-group">
+            <input type="submit" class="btn btn-success" value='{{ $t("adminUtils.saveChanges") }}'>
+        </div>
+    </form>
+</template>
+
+<script>
+    import simditor from "../utils/simditor.vue"
+    import back from "../utils/back.vue"
+
+    export default({
+        data() {
+            return {}
+        },
+        methods: {
+            submit() {
+
+            }
+        },
+        components: {
+            simditor,
+            back
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/frontend/admin/src/components/utils/leftNav.vue b/frontend/admin/src/components/utils/leftNav.vue
index 7bf5f11..e180cca 100644
--- a/frontend/admin/src/components/utils/leftNav.vue
+++ b/frontend/admin/src/components/utils/leftNav.vue
@@ -3,7 +3,8 @@
         <ul class="list-group">
             <li class="list-group-header">name</li>
             <li class="list-group-item">
-                <a v-link="{path: '/user'}">{{ $t("nav.UserManagement") }}</a>
+                <a v-link="{path: '/user'}">{{ $t("nav.userManagement") }}</a>
+                <a v-link="{path: '/announcement'}">{{ $t("nav.announcementManagement") }}</a>
             </li>
         </ul>
     </div>
diff --git a/frontend/admin/src/locales.js b/frontend/admin/src/locales.js
index acbdeac..b3d175b 100644
--- a/frontend/admin/src/locales.js
+++ b/frontend/admin/src/locales.js
@@ -5,7 +5,8 @@ export default {
             OK: "确定"
         },
         nav: {
-            UserManagement: "用户管理"
+            userManagement: "用户管理",
+            announcementManagement: "公告管理"
         },
         pagination: {
             first: "首页",
@@ -16,6 +17,8 @@ export default {
             succeeded: "操作成功"
         },
         user: {
+            userList: "用户列表",
+            editUser: "编辑用户信息",
             username: "用户名",
             email: "邮箱",
             realName: "真实姓名",
@@ -30,21 +33,39 @@ export default {
             tfaAuth: "两步验证",
             isDisabled: "禁用用户",
             adminExtraPermission: "普通管理员额外权限",
-            showAdminOnly: "只显示管理员"
-        },
-        adminUtils: {
-            search: "搜索",
-            inputKeyword: "输入关键词",
+            showAdminOnly: "只显示管理员",
+
             regularUser: "普通用户",
             admin: "普通管理员",
             superAdmin: "超级管理员",
             UserDoesNotExist: "用户不存在",
-            back: "返回",
-            saveChanges: "保存修改",
             createPublicContest: "创建公开比赛",
             manageAllContest: "管理所有比赛",
             manageAllProblem: "管理所有题目",
             manageOwnProblem: "管理自己创建的题目",
+        },
+        announcement: {
+            announcementList: "公告列表",
+            editAnnouncement: "编辑公告",
+            createAnnouncement: "创建公告",
+            title: "标题",
+            createTime: "创建时间",
+            lastUpdateTime: "最后更新",
+            createdBy: "创建人",
+            isVisible: "是否可见",
+            visible: "可见",
+            invisible: "隐藏",
+            management: "管理",
+            edit: "编辑",
+        },
+        adminUtils: {
+            search: "搜索",
+            inputKeyword: "输入关键词",
+            submit: "提交",
+
+            back: "返回",
+            saveChanges: "保存修改",
+
             unsupportedBrowserWarningMsg: "当前网页 <strong>不支持</strong> 你正在使用的浏览器, 为了正常的访问,请到 <a href=\"http://browsehappy.com/\"> 升级你的浏览器</a>"
         }
     }
diff --git a/frontend/admin/src/main.js b/frontend/admin/src/main.js
index 1e9354e..2ae89a8 100644
--- a/frontend/admin/src/main.js
+++ b/frontend/admin/src/main.js
@@ -3,14 +3,18 @@ import App from './App'
 import VueRouter from "vue-router"
 import VueI18n from "vue-i18n"
 
+import "expose?$!expose?jQuery!jquery"
+import "bootstrap"
+import bootbox from "bootbox"
+
 import locale from "./locales"
 
 import userList from "./components/account/userList.vue"
 import editUser from "./components/account/editUser.vue"
 import problem from "./components/problem/problem.vue"
-import "expose?$!expose?jQuery!jquery"
-import "bootstrap"
-import bootbox from "bootbox"
+import announcementList from "./components/announcement/announcementList.vue"
+import editAnnouncement from "./components/announcement/editAnnouncement.vue"
+
 
 // i18n settings
 Vue.use(VueI18n);
@@ -100,6 +104,14 @@ router.map({
     "/problem/create": {
         name: "createProblem",
         component: problem
+    },
+    "/announcement/:page": {
+        name: "announcementList",
+        component: announcementList
+    },
+    "/announcement/edit/:announcementId": {
+        name: "editAnnouncement",
+        component: editAnnouncement
     }
 });
 
@@ -122,5 +134,7 @@ function bootboxAlert(content) {
 window.alert = bootboxAlert;
 
 router.redirect({"/user": "/user/1"});
+router.redirect({"/announcement": "/announcement/1"});
+
 router.start(App, '#app');