diff --git a/src/components/problem/content.vue b/src/components/problem/content.vue
index e25331f7..531b5aff 100644
--- a/src/components/problem/content.vue
+++ b/src/components/problem/content.vue
@@ -229,7 +229,6 @@ export default {
 #pannel {
     background-color: #ffffff !important;
     margin-left: 20px;
-    width: calc(1140px - 850px - 20px);
 }
 
 #tools {
diff --git a/src/components/user/content.vue b/src/components/user/content.vue
index 88b6110f..e9a8ea88 100644
--- a/src/components/user/content.vue
+++ b/src/components/user/content.vue
@@ -6,7 +6,7 @@
       </el-card>
       <el-card class="item">
         <div slot="header" class="clearfix"><i class="el-icon-setting" /> Tool Bar</div>
-        <el-button v-if="ismine" type="primary">Edit</el-button>
+        <el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');">Edit</el-button>
         <el-button @click="$router.go(-1);">Back</el-button>
       </el-card>
     </div>
@@ -66,9 +66,15 @@
         </el-col>
       </el-row>
       <el-card shadow="never" class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introduction</div>
+        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introductions</div>
         <MarkdownContainer v-if="introduction" :content="introduction"/>
       </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Permissions</div>
+        <el-checkbox v-model="isStaff" disabled>Staff</el-checkbox>
+        <el-checkbox v-model="isRoot" disabled>Root</el-checkbox>
+        <el-checkbox v-model="isActive" disabled>Active</el-checkbox>
+      </el-card>
     </div>
   </div>
 </template>
@@ -82,6 +88,7 @@ export default {
   name: 'UserHomepage',
   data() {
     return {
+      staff: false,
       username: 'Unknown',
       userid: '-',
       email: 'Unknown',
@@ -92,7 +99,10 @@ export default {
       ismine: false,
       timeJoin: 'Unknown',
       lastLogin: 'Unknown',
-      userLoading: true
+      userLoading: true,
+      isRoot: false,
+      isStaff: false,
+      isActive: true
     };
   },
   methods: {
@@ -109,14 +119,17 @@ export default {
           this.submit = data.submit_time;
           this.timeJoin = timeFormat(data.date_joined);
           this.lastLogin = timeFormat(data.last_login);
+          this.isRoot = data.is_superuser;
+          this.isStaff = data.is_staff;
+          this.isActive = data.is_active;
           this.userLoading = false;
-          if (this.solved == 0) {
+          if (this.submit === 0) {
             this.rate = 100;
           } else {
             this.rate = (this.solved * 100.0) / this.submit;
             this.rate = this.rate.toFixed(2);
           }
-          if (this.userid == String(this.$store.state.user.userid)) {
+          if (this.$store.state.user.isStaff || this.userid == String(this.$store.state.user.userid)) {
             this.ismine = true;
           }
         })
diff --git a/src/components/user/edit.vue b/src/components/user/edit.vue
new file mode 100644
index 00000000..7288e29c
--- /dev/null
+++ b/src/components/user/edit.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="content">
+    <div id="tool-bar">
+      <el-card shadow="never">
+        <el-avatar shape="square" :size="400"><img src="./../../assets/icon/SOJ-thick-white-background.png" /></el-avatar>
+      </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-setting" /> Tool Bar</div>
+        <el-button v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot" type="primary" @click="submit()">Submit</el-button>
+        <el-button @click="$router.go(-1);">Back</el-button>
+      </el-card>
+    </div>
+    <div v-loading="!(isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot)" class="edit-content">
+      <el-card>
+        <div slot="header" class="clearfix"><i class="el-icon-user" /> User Name</div>
+        <el-input v-model="username"></el-input>
+      </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Permissions</div>
+        <el-checkbox v-model="isStaff" :disabled="!isStaffMe && !isRootMe">Staff</el-checkbox>
+        <el-checkbox v-model="isRoot" :disabled="!isStaffMe && !isRootMe">Root</el-checkbox>
+        <el-checkbox v-model="isActive" :disabled="(!isStaffMe && !isRootMe) || isMine">Active</el-checkbox>
+      </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introductions</div>
+        <MarkdownEditor v-model="introduction" />
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+import MarkdownEditor from './../lib/MarkdownEditor.vue';
+
+export default {
+  name: 'UserEdit',
+  data() {
+    return {
+      username: 'Unknown',
+      email: 'Unknown',
+      introduction: 'loading...',
+      isMine: false,
+      isStaff: false,
+      isRoot: false,
+      isActive: true,
+      isRootMe: false,
+      isStaffMe: false,
+      isActiveMe: true
+    };
+  },
+  methods: {
+    showEdit() {
+      this.$axios
+        .get(apiurl('/account/' + this.$route.params.id))
+        .then(res => {
+          let data = res.data.res;
+          this.isRootMe = this.$store.state.user.isRoot;
+          this.isStaffMe = this.$store.state.user.isStaff;
+          if (data.id == this.$store.state.user.userid) {
+            this.isMine = true;
+          }
+          if (this.isMine || this.isRootMe || this.isStaffMe) {
+            this.username = data.username;
+            this.email = data.email;
+            this.introduction = data.introduction;
+            this.isStaff = data.is_staff;
+            this.isRoot = data.is_superuser;
+            this.isActive = data.is_active;
+          }
+        });
+    },
+    submit() {
+      this.$axios
+        .patch(apiurl('/account/' + this.$route.params.id), {
+          username: this.username,
+          introduction: this.introduction,
+          is_staff: this.isStaff,
+          is_superuser: this.isRoot,
+          is_active: this.isActive
+        })
+        .then(() => {
+          this.$SegmentMessage.success(this, 'Submitted');
+          if (this.isMine) {
+            this.$store.commit('userStaffChange', {
+              isStaff: this.isStaff,
+              isRoot: this.isRoot
+            });
+          }
+        });
+    }
+  },
+  mounted() {
+    this.showEdit();
+  },
+  components: {
+    MarkdownEditor
+  }
+};
+</script>
+
+<style scoped>
+#tool-bar {
+    margin-right: 30px;
+}
+
+.edit-content {
+    width: 100%;
+}
+
+.content {
+    display: flex;
+}
+
+.item {
+    margin-top: 20px;
+}
+</style>
diff --git a/src/components/user/login.vue b/src/components/user/login.vue
index e90158ab..8486a5c3 100644
--- a/src/components/user/login.vue
+++ b/src/components/user/login.vue
@@ -71,6 +71,10 @@ export default {
               this.$store.commit('userLang', {
                 lang: detail.data.res.lang
               });
+              this.$store.commit('userStaff', {
+                is_staff: detail.data.res.is_staff,
+                is_superuser: detail.data.res.is_superuser
+              });
             });
           this.$store.commit('userLogin', {
             username: this.ldata.username,
diff --git a/src/router.js b/src/router.js
index 562e69b7..4f4af096 100644
--- a/src/router.js
+++ b/src/router.js
@@ -10,6 +10,9 @@ let router = new Router({
   }, {
     path: '/account/:id',
     component: () => import('./components/user/content.vue')
+  }, {
+    path: '/account/:id/edit',
+    component: () => import('./components/user/edit.vue')
   }, {
     path: '/problem/list',
     component: () => import('./components/problem/list.vue')
diff --git a/src/store/user.js b/src/store/user.js
index 921a8afa..01a19802 100644
--- a/src/store/user.js
+++ b/src/store/user.js
@@ -1,9 +1,11 @@
 const userstore = {
   state: {
-    authenticated: localStorage.getItem('user-authenticated') || false,
+    authenticated: localStorage.getItem('user-authenticated') === 'true' ? true : false || false,
     username: localStorage.getItem('user-username') || null,
     userid: localStorage.getItem('user-userid') || null,
     userlang: localStorage.getItem('user-userlang') || null,
+    isStaff: localStorage.getItem('user-is-staff') === 'true' ? true : false || false,
+    isRoot: localStorage.getItem('user-is-root') === 'true' ? true : false || false,
     showlogin: false,
     showregister: false,
     showlogout: false
@@ -13,11 +15,22 @@ const userstore = {
       state.authenticated = true;
       state.userid = data.userid;
       state.username = data.username;
-      
       localStorage.setItem('user-authenticated', true);
       localStorage.setItem('user-username', data.username);
       localStorage.setItem('user-userid', data.userid);
     },
+    userStaffChange(state, data) {
+      state.isStaff = data.isStaff;
+      state.isRoot = data.isRoot;
+      localStorage.setItem('user-is-root', data.isRoot);
+      localStorage.setItem('user-is-staff', data.isStaff);
+    },
+    userStaff(state, data) {
+      state.isStaff = data.is_staff;
+      state.isRoot = data.is_superuser;
+      localStorage.setItem('user-is-root', data.is_superuser);
+      localStorage.setItem('user-is-staff', data.is_staff);
+    },
     userLang(state, data) {
       state.userlang = data.lang;
 
@@ -28,7 +41,10 @@ const userstore = {
       state.userid = null;
       state.username = null;
       state.userlang = null;
-
+      state.isStaff = false;
+      state.isRoot = false;
+      localStorage.removeItem('user-is-root');
+      localStorage.removeItem('user-is-staff');
       localStorage.removeItem('user-userlang'); 
       localStorage.removeItem('user-authenticated');
       localStorage.removeItem('user-userid');