diff --git a/src/components/lib/MarkdownEditor.vue b/src/components/lib/MarkdownEditor.vue
index d628711d..6d565ac6 100644
--- a/src/components/lib/MarkdownEditor.vue
+++ b/src/components/lib/MarkdownEditor.vue
@@ -4,7 +4,7 @@
       <el-tab-pane label="Edit" name="first" />
       <el-tab-pane label="Preview" name="second" />
     </el-tabs>
-    <div :class="editorVisbleClassName">
+    <div :class="editorVisibleClassName">
       <textarea
         :value="value"
         @input="handleInput($event.target.value)"
@@ -89,9 +89,9 @@ export default {
   computed: {
     editorVisbleClassName() {
       if (this.activeName == 'first') {
-        return 'dispaly-visble';
+        return 'display-visible';
       }
-      return 'dispaly-invisble';
+      return 'display-invisible';
     }
   },
   props: {
@@ -114,11 +114,11 @@ export default {
 </script>
 
 <style scoped>
-.dispaly-visble {
+.display-visible {
     display: block;
 }
 
-.dispaly-invisble {
+.display-invisible {
     display: none;
 }
 
diff --git a/src/components/user/content.vue b/src/components/user/content.vue
index 81f9569b..19feab3c 100644
--- a/src/components/user/content.vue
+++ b/src/components/user/content.vue
@@ -6,161 +6,39 @@
           <img src="./../../assets/icon/SOJ-thick-white-background.png" />
         </el-avatar>
       </el-card>
-      <!-- Mobile screen -->
-      <el-card class="item float" v-if="!smallScreen">
-        <el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');" icon="el-icon-edit" circle />
-        <el-button @click="$router.go(-1);" icon="el-icon-back" circle />
-      </el-card>
-      <!-- Normal screen -->
-      <el-card class="item" v-else>
-        <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>
-    <div id="info" v-loading="userLoading">
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-card shadow="never">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-user" />
-              <span class="label"> User</span>
-              Name
-            </div>
-            {{username}}
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="never">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-warning-outline" />
-              <span class="label"> User</span>
-              ID
-            </div>
-            {{userid}}
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-message" /> Email
-            </div>
-            {{email}}
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-date" />
-              <span class="label"> Time Joined</span>
-            </div>
-            {{timeJoin}}
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-time" />
-              <span class="label"> Last Login</span>
-            </div>
-            {{lastLogin}}
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="4">
-          <el-card class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-s-operation" />
-              <span class="label"> Lang</span>
-            </div>
-            {{langTable[lang].label}}
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-check" />
-              <span class="label"> Solved</span>
-              <div class="small-label"> AC</div>
-            </div>
-            <div class="clearfix">
-              {{solved}}
-              <span class="label"> Problems</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-upload2" />
-              <span class="label"> Submited</span>
-              <div class="small-label"> SU</div>
-            </div>
-            <div class="clearfix">
-              {{submit}}
-              <span class="label"> Times</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="8">
-          <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix">
-              <i class="el-icon-finished" />
-              <span class="label"> AC</span>
-              Rate
-            </div>
-            <el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-card shadow="never" class="item">
-        <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-user" /> 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 id="info">
+      <el-tabs v-model="activetab" :tab-position="'right'">
+        <el-tab-pane label="Information" name="first">
+          <userinfo></userinfo>
+        </el-tab-pane>
+        <el-tab-pane v-if="canedit" label="Edit" name="second">
+          <useredit></useredit>
+        </el-tab-pane>
+        <el-tab-pane v-if="ismine" label="Security" name="third">
+          <usersucure></usersucure>
+        </el-tab-pane>
+      </el-tabs>
     </div>
-  </div>
+  </div>  
 </template>
 
 <script>
-import timeFormat from './../../methods/time';
 import apiurl from './../../apiurl';
-import MarkdownContainer from './../lib/MarkdownContainer.vue';
-import sfconfig from './../../sfconfig';
+import userinfo from './information.vue';
+import useredit from './edit.vue';
+import usersucure from './secure.vue';
 
 export default {
   name: 'UserHomepage',
   data() {
     return {
-      staff: false,
-      username: 'Unknown',
-      userid: '-',
-      email: 'Unknown',
-      introduction: null,
-      solved: '-',
-      submit: '-',
-      rate: 100,
+      activetab: 'first',
       ismine: false,
-      timeJoin: 'Unknown',
-      lastLogin: 'Unknown',
-      userLoading: true,
-      isRoot: false,
-      isStaff: false,
-      isActive: true,
+      canedit: false,
       avatarWidth: 800 < screen.width ? 300 : screen.width - 40,
       smallScreen: 700 < screen.width,
-      langTable: sfconfig.langTable,
-      lang: 0
     };
   },
   methods: {
@@ -169,43 +47,14 @@ export default {
         .get(apiurl('/account/' + this.$route.params.id))
         .then(res => {
           let data = res.data.res;
-          this.username = data.username;
           this.userid = data.id;
-          this.email = data.email;
-          this.solved = data.solved;
-          this.submit = data.submit_time;
-          this.timeJoin = timeFormat(data.date_joined);
-          if (data.last_login == null) {
-            this.lastLogin = 'Never';
-          } else {
-            this.lastLogin = timeFormat(data.last_login);
-          }
-          this.isRoot = data.is_superuser;
           this.isStaff = data.is_staff;
-          this.isActive = data.is_active;
-          this.lang = data.lang;
-          if (this.submit === 0) {
-            this.rate = 100;
-          } else {
-            this.rate = (this.solved * 100.0) / this.submit;
-            this.rate = this.rate.toFixed(2);
-          }
-          if (this.$store.state.user.isStaff || this.userid == String(this.$store.state.user.userid)) {
+          if (this.userid == String(this.$store.state.user.userid)) {
             this.ismine = true;
           }
-          this.$axios
-            .get(apiurl('/account/' + this.$route.params.id + '/introduction'))
-            .then(detail => {
-              this.introduction = detail.data.res.introduction;
-            })
-            .catch(err => {
-              if(err.request.status === 404) {
-                this.$SegmentMessage.error(this, 'User does not exist');
-              } else {
-                this.$SegmentMessage.error(this, 'Unknown error');
-              }
-            });
-          this.userLoading = false;
+          if (this.$store.state.user.isStaff || this.ismine) {
+            this.canedit = true;
+          }
         })
         .catch(err => {
           if(err.request.status === 404) {
@@ -216,35 +65,19 @@ export default {
           this.userLoading = false;
         });
     },
-    ACRateColorMode(percentage) {
-      if (percentage < 20) {
-        return '#F56C6C';
-      } else if (percentage < 30) {
-        return '#E6A23C';
-      } else if (percentage < 50) {
-        return '#67C23A';
-      }
-      return '#409EFF';
-    }
   },
   mounted() {
     this.showHomepage();
   },
   components: {
-    MarkdownContainer
+    userinfo,
+    useredit,
+    usersucure
   }
 };
 </script>
 
 <style scoped>
-.small-label {
-    display: none;
-}
-
-.clearfix {
-    display: block ruby;
-}
-
 .item {
     margin-top: 20px;
 }
@@ -262,20 +95,6 @@ export default {
     #user-content {
         display: inline;
     }
-
-    #info {
-        margin-left: 0;
-        margin-top: 20px;
-        max-width: 100vw;
-    }
-
-    .label {
-        display: none;
-    }
-
-    .small-label {
-        display: unset;
-    }
 }
 
 @media only screen and (max-width: 700px) {
@@ -297,5 +116,11 @@ export default {
         z-index: 1000;
         opacity: 1;
     }
+
+    #info {
+        margin-top: 20px;
+        margin-left: 0;
+        width: 800px;
+    }
 }
 </style>
diff --git a/src/components/user/edit.vue b/src/components/user/edit.vue
index 96012516..e5a3e770 100644
--- a/src/components/user/edit.vue
+++ b/src/components/user/edit.vue
@@ -1,84 +1,53 @@
 <template>
-  <div class="content">
-    <div id="tool-bar">
-      <el-card shadow="never">
-        <el-avatar shape="square" :size="avatarWidth">
-          <img src="./../../assets/icon/SOJ-thick-white-background.png" />
-        </el-avatar>
-      </el-card>
-      <!-- Mobile screen -->
-      <el-card class="item float" v-if="smallScreen">
-        <el-button
-          v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot"
-          type="primary"
-          @click="submit()"
-          icon="el-icon-check"
-          circle
-        />
-        <el-button
-          @click="$router.go(-1);"
-          icon="el-icon-back"
-          circle
-        />
-      </el-card>
-      <!-- Normal screen -->
-      <el-card class="item" v-else>
-        <el-button
-          v-if="isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot"
-          type="primary"
-          @click="submit()"
-          :loading="buttonLoading"
-        >
-          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-row :gutter="20">
-        <el-col :span="16">
-          <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-col>
-        <el-col :span="8">
-          <el-card>
-            <div slot="header" class="clearfix">
-              <i class="el-icon-s-operation" />
-              <div class="label">Default Language</div>
-              <div class="small-label">Lang</div>
-            </div>
-            <el-select v-model="lang" placeholder="Select language">
-              <el-option
-                v-for="item in langTable"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </el-card>
-        </el-col>
-      </el-row>
-      <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>
+    <el-button class="submit-button" @click="submit()">Submit</el-button>
+    <div class="item content">
+      <div v-loading="!(isMine || this.$store.state.user.isStaff || this.$store.state.user.isRoot)" class="edit-content">
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <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-col>
+          <el-col :span="8">
+            <el-card>
+              <div slot="header" class="clearfix">
+                <i class="el-icon-s-operation" />
+                <div class="label">Default Language</div>
+                <div class="small-label">Lang</div>
+              </div>
+              <el-select v-model="lang" placeholder="Select language">
+                <el-option
+                  v-for="item in langTable"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-card>
+          </el-col>
+        </el-row>
+        <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>
   </div>
 </template>
@@ -213,6 +182,10 @@ export default {
 </script>
 
 <style scoped>
+.submit-button {
+    width: 100%;
+}
+
 #tool-bar {
     margin-right: 30px;
 }
diff --git a/src/components/user/information.vue b/src/components/user/information.vue
new file mode 100644
index 00000000..b4b334f3
--- /dev/null
+++ b/src/components/user/information.vue
@@ -0,0 +1,240 @@
+<template>
+  <div v-loading="userLoading">
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-user" />
+            <span class="label"> User</span>
+            Name
+          </div>
+          {{username}}
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-warning-outline" />
+            <span class="label"> User</span>
+            ID
+          </div>
+          {{userid}}
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-message" /> Email
+          </div>
+          {{email}}
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-date" />
+            <span class="label"> Time Joined</span>
+          </div>
+          {{timeJoin}}
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-time" />
+            <span class="label"> Last Login</span>
+          </div>
+          {{lastLogin}}
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-s-operation" />
+            <span class="label"> Lang</span>
+          </div>
+          {{langTable[lang].label}}
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-check" />
+            <span class="label"> Solved</span>
+            <div class="small-label"> AC</div>
+          </div>
+          <div class="clearfix">
+            {{solved}}
+            <span class="label"> Problems</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-upload2" />
+            <span class="label"> Submited</span>
+            <div class="small-label"> SU</div>
+          </div>
+          <div class="clearfix">
+            {{submit}}
+            <span class="label"> Times</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never" class="item">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-finished" />
+            <span class="label"> AC</span>
+            Rate
+          </div>
+          <el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-card shadow="never" class="item">
+      <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-user" /> 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>
+</template>
+
+<script>
+import timeFormat from './../../methods/time';
+import apiurl from './../../apiurl';
+import MarkdownContainer from './../lib/MarkdownContainer.vue';
+import sfconfig from './../../sfconfig';
+
+export default {
+  name: 'UserHomepage',
+  data() {
+    return {
+      staff: false,
+      username: 'Unknown',
+      userid: '-',
+      email: 'Unknown',
+      introduction: null,
+      solved: '-',
+      submit: '-',
+      rate: 100,
+      ismine: false,
+      timeJoin: 'Unknown',
+      lastLogin: 'Unknown',
+      userLoading: true,
+      isRoot: false,
+      isStaff: false,
+      isActive: true,
+      langTable: sfconfig.langTable,
+      lang: 0
+    };
+  },
+  methods: {
+    showHomepage() {
+      this.$axios
+        .get(apiurl('/account/' + this.$route.params.id))
+        .then(res => {
+          let data = res.data.res;
+          this.username = data.username;
+          this.userid = data.id;
+          this.email = data.email;
+          this.solved = data.solved;
+          this.submit = data.submit_time;
+          this.timeJoin = timeFormat(data.date_joined);
+          if (data.last_login == null) {
+            this.lastLogin = 'Never';
+          } else {
+            this.lastLogin = timeFormat(data.last_login);
+          }
+          this.isRoot = data.is_superuser;
+          this.isStaff = data.is_staff;
+          this.isActive = data.is_active;
+          this.lang = data.lang;
+          if (this.submit === 0) {
+            this.rate = 100;
+          } else {
+            this.rate = (this.solved * 100.0) / this.submit;
+            this.rate = this.rate.toFixed(2);
+          }
+          if (this.$store.state.user.isStaff || this.userid == String(this.$store.state.user.userid)) {
+            this.ismine = true;
+          }
+          this.$axios
+            .get(apiurl('/account/' + this.$route.params.id + '/introduction'))
+            .then(detail => {
+              this.introduction = detail.data.res.introduction;
+            })
+            .catch(err => {
+              if(err.request.status === 404) {
+                this.$SegmentMessage.error(this, 'User does not exist');
+              } else {
+                this.$SegmentMessage.error(this, 'Unknown error');
+              }
+            });
+          this.userLoading = false;
+        })
+        .catch(err => {
+          if(err.request.status === 404) {
+            this.$SegmentMessage.error(this, 'User does not exist');
+          } else {
+            this.$SegmentMessage.error(this, 'Unknown error');
+          }
+          this.userLoading = false;
+        });
+    },
+    ACRateColorMode(percentage) {
+      if (percentage < 20) {
+        return '#F56C6C';
+      } else if (percentage < 30) {
+        return '#E6A23C';
+      } else if (percentage < 50) {
+        return '#67C23A';
+      }
+      return '#409EFF';
+    }
+  },
+  mounted() {
+    this.showHomepage();
+  },
+  components: {
+    MarkdownContainer
+  }
+};
+</script>
+
+<style scoped>
+.small-label {
+    display: none;
+}
+
+.clearfix {
+    display: block ruby;
+}
+
+.item {
+    margin-top: 20px;
+}
+
+@media only screen and (max-width: 800px) {
+    .label {
+        display: none;
+    }
+
+    .small-label {
+        display: unset;
+    }
+}
+</style>
diff --git a/src/components/user/secure.vue b/src/components/user/secure.vue
new file mode 100644
index 00000000..e3ffcfd5
--- /dev/null
+++ b/src/components/user/secure.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <i class="el-icon-s-tools" />
+        Change Password
+      </div>
+      <password></password>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import password from './changePassword';
+
+export default {
+  name: 'UserEdit',
+  data() {
+    return {
+    };
+  },
+  methods: {
+  },
+  mounted() {
+  },
+  components: {
+    password
+  }
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/router.js b/src/router.js
index ee0d52f3..79e836e4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,9 +7,6 @@ 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')