diff --git a/src/components/lib/problemTag.vue b/src/components/lib/problemTag.vue
index d6acc6c0..74d51631 100644
--- a/src/components/lib/problemTag.vue
+++ b/src/components/lib/problemTag.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="tag" :style="style">
-    <i :v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
+    <i v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
   </span>
 </template>
 
diff --git a/src/components/user/changePassword.vue b/src/components/user/changePassword.vue
new file mode 100644
index 00000000..7642ef69
--- /dev/null
+++ b/src/components/user/changePassword.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <el-form :model="ldata" ref="ChangePasswordForm" :rules="rules">
+      <div class="icon-lable">
+        <i class="el-icon-lock" />
+        New Password
+      </div>
+      <el-form-item prop="newpassword">
+        <el-input type="password" v-model="ldata.newpassword"></el-input>
+      </el-form-item>
+      <div class="icon-lable">
+        <i class="el-icon-lock" />
+        Repeat New Password
+      </div>
+      <el-form-item prop="newpasswdrepeat">
+        <el-input type="password" v-model="ldata.newpasswdrepeat"></el-input>
+      </el-form-item>
+      <div v-if="old_password_required">
+        <div class="icon-lable">
+          <i class="el-icon-lock" />
+          Old Password
+        </div>
+        <el-form-item prop="oldpassword">
+          <el-input type="password" v-model="ldata.oldpassword"></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item>
+        <el-button
+          type="primary"
+          v-on:click="onSubmit();"
+          :loading="buttonLoading"
+        >
+          Change
+        </el-button>
+        <el-button v-on:click="reset();">Reset</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'UserChangePassword',
+  data() {
+    let validatePasswd = (rule, value, callback) => {
+      if (value === '' || value === this.ldata.newpassword) {
+        callback();
+      } else {
+        callback(new Error('Password mismatch'));
+      }
+    };
+    let validateOldPasswd = (rule, value, callback) => {
+      this.$axios
+        .post(apiurl('/account/password'), {
+          password: this.ldata.oldpassword
+        })
+        .then(() => {
+          callback();
+        })
+        .catch(err => {
+          if(err.request.status === 403) {
+            callback(new Error('Old Password Wrong'));
+          } else {
+            callback(new Error('Unkown Error'));
+          }
+        });
+    };
+    return {
+      ldata: {
+        oldpassword: '',
+        newpassword: '',
+        newpasswdrepeat: ''
+      },
+      rules: {
+        newpassword: [
+          { required: true, message: 'Input your password', trigger: 'blur' },
+          { min: 6, message: 'No less than 6 characters', trigger: 'blur' }
+        ],
+        newpasswdrepeat: [
+          { required: true, message: 'Repeat your password', trigger: 'blur' },
+          { validator: validatePasswd, trigger: 'blur' }
+        ],
+        oldpassword: [
+          { validator: validateOldPasswd, trigger: 'blur' }
+        ]
+      },
+      old_password_required: false,
+      buttonLoading: false
+    };
+  },
+  methods: {
+    submit() {
+      this.buttonLoading = true;
+      this.$axios
+        .patch(apiurl('/account/password'), {
+          password: this.ldata.newpassword
+        })
+        .then(() => {
+          this.buttonLoading = false;
+          this.$SegmentMessage.success(this, 'Changed successfully');
+        })
+        .catch(err => {
+          if (err.request.status === 401) {
+            this.$SegmentMessage.error(this, 'Please login first');
+            this.$store.state.user.showlogin = true;
+          }
+          if (err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Please enter your old password');
+            this.old_password_required = true;
+          }
+          this.buttonLoading = false;
+        });
+    },
+    onSubmit() {
+      this.$refs['ChangePasswordForm'].validate((valid) => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    reset() {
+      this.$refs['ChangePasswordForm'].resetFields();
+      this.old_password_required = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.icon-lable {
+    margin-bottom: 5px;
+}
+</style>
diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index 01860066..4423ba7b 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -85,6 +85,9 @@ export default {
       }
     };
     let validateUsername = (rule, value, callback) => {
+      if(value === '') {
+        callback();
+      }
       this.$axios
         .get(apiurl('account/username/accessibility/' + value))
         .then(() => {
@@ -94,7 +97,7 @@ export default {
           if (err.request.status === 409) {
             callback(new Error('The user name is already in use'));
           } else {
-            callback();
+            callback(new Error('Unkown Error'));
           }
         });
     };
diff --git a/src/router.js b/src/router.js
index 2c2c22c8..3b9d61d9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,9 @@ let router = new Router({
   routes: [{
     path: '/',
     component: () => import('./components/home/page.vue')
+  }, {
+    path: '/account/password',
+    component: () => import('./components/user/changePassword.vue')
   }, {
     path: '/account/:id',
     component: () => import('./components/user/content.vue')