diff --git a/src/router/index.js b/src/router/index.js
index c745903..877f119 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,11 +29,11 @@ const routes = [
   //   name: 'Feedback',
   //   component: () => import(/* webpackChunkName: "feedback" */ '../views/Feedback/Feedback.vue')
   // },
-  // {
-  //   path: '/settings',
-  //   name: 'Settings',
-  //   component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
-  // },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
+  },
   {
     path: '/unlock',
     name: 'Unlock',
diff --git a/src/store/index.js b/src/store/index.js
index 6658d5e..7237d29 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,6 +11,8 @@ export default new Vuex.Store({
 		row_data: '',
 		// aes化的用户主密码
 		row_pwd: '',
+		// 配置信息
+		settings: '',
 	},
 	mutations: {
 		// 设置用户信息
@@ -25,6 +27,10 @@ export default new Vuex.Store({
 		SET_ROWPWD(state, row_pwd) {
 			state.row_pwd = row_pwd;
 		},
+		// 设置配置信息
+		SET_SETTINGS(state, settings) {
+			state.settings = settings;
+		},
 	},
 	actions: {
 		// 设置用户信息
@@ -48,6 +54,13 @@ export default new Vuex.Store({
 			commit('SET_ROWPWD', arg[0]);
 			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
 		},
+		// 设置配置信息
+		setSettings({
+			commit
+		}, arg) {
+			commit('SET_SETTINGS', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+		},
 	},
 	modules: {}
 })
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index 6b5372a..e565945 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -311,8 +311,9 @@ export default {
 			var second = date.getSeconds();
 			minute = minute < 10 ? "0" + minute : minute;
 			second = second < 10 ? "0" + second : second;
+			return y + "-" + m + "-" + d + " " + h + ":" + minute;
 			// return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
-			return y + "-" + m + "-" + d;
+			// return y + "-" + m + "-" + d;
 		},
 		
 		// 更新本地密码本
diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue
index 1547e06..653873f 100644
--- a/src/views/Add/Add.vue
+++ b/src/views/Add/Add.vue
@@ -65,7 +65,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(['row_data', 'row_pwd'])
+		...mapState(['row_data', 'row_pwd', 'settings'])
 	},
 	methods: {
 		...mapActions(['setRowData', 'setRowPwd']),
@@ -78,8 +78,8 @@ export default {
 			if (Object.keys(this.row_pwd).length != 0) {
 				// 有密码，已经输入过了
 				let now = new Date().getTime();
-				if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
-					// 上次写入时间距离现在在五分钟之内
+				if (now - this.row_pwd.create_time < this.settings.expired_time) {
+					// 上次写入时间距离现在在（默认五分钟）之内
 					// 判断是否是更新
 					if (this.$route.params.modify_content) {
 						// 刷新重置数据
diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue
index 320bb0a..642ba39 100644
--- a/src/views/Detail/Detail.vue
+++ b/src/views/Detail/Detail.vue
@@ -77,7 +77,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(['row_data', 'row_pwd']),
+		...mapState(['row_data', 'row_pwd', 'settings']),
 		doitPassword() {
 			if(this.content.password) {
 				let doit = ''
@@ -101,8 +101,8 @@ export default {
 				if (Object.keys(this.row_pwd).length != 0) {
 					// 有密码，已经输入过了
 					let now = new Date().getTime();
-					if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
-						// 上次写入时间距离现在在五分钟之内
+					if (now - this.row_pwd.create_time < this.settings.expired_time) {
+						// 上次写入时间距离现在在（默认五分钟）之内
 						// 刷新重置数据
 						this.content = this.$route.params.code_content
 						this.addCount()
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 2659bfc..9c0f08f 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -44,10 +44,10 @@
 						<span class="md-list-item-text">Provide Feedback</span>
 					</md-list-item> -->
 
-					<!-- <md-list-item @click="turnToPage('/settings')">
+					<md-list-item @click="turnToPage('/settings')">
 						<md-icon>settings</md-icon>
 						<span class="md-list-item-text">Settings</span>
-					</md-list-item> -->
+					</md-list-item>
 
 					<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
 						<md-icon>reply</md-icon>
@@ -78,7 +78,7 @@
 				</div>
 
 				<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
-					<md-speed-dial-target @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
+					<md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
 				</md-speed-dial>
 				<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
 					<span>{{ snakebar_msg }}</span>
@@ -114,10 +114,10 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(['user_infos', 'row_data', 'row_pwd'])
+		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
 	},
 	methods: {
-		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
+		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
 
 		// 修改md-app的最小高度
 		changeFixed(clientHeight) {
@@ -133,19 +133,29 @@ export default {
 			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
 			// 初始化
 			this.initUserInfo();
+			this.initSettings();
 			// 判断有无用户密码
 			if (Object.keys(this.row_pwd).length != 0) {
 				// 有密码，已经输入过了
 				let now = new Date().getTime();
-				if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
-					// 上次写入时间距离现在在五分钟之内
+				if (now - this.row_pwd.create_time < this.settings.expired_time) {
+					// 上次写入时间距离现在在（默认五分钟）之内
 					this.unlock = true;
 					// 判断有无密码本
 					if (this.row_data) {
 						// 解密主密码
 						let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+						let data_decrypt
 						// 解密密码本
-						let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+						try{
+							data_decrypt = decrypt(main_code_decrpt, this.row_data);
+						} catch(e) {
+							// 不正确
+							// 跳转到解锁界面
+							console.log(e)
+							this.turnToUnlock('密码错误');
+							return
+						}
 						// 判断密码是否正确
 						if(!data_decrypt) {
 							// 不正确
@@ -189,6 +199,19 @@ export default {
 			}
 			console.log('用户信息初始化完成');
 		},
+		
+		// 初始化配置信息
+		initSettings(){
+			if (Object.keys(this.settings).length == 0) {
+				// 初始化配置信息
+				let settings = {
+					expired_time: 1000 * 60 * 5, // 5分钟
+				};
+				this.setSettings([settings, this]);
+				console.log('配置信息覆写完成');
+			}
+			console.log('配置信息初始化完成');
+		},
 
 		// 修改排序
 		changeSortType(type) {
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index 660278f..c966a10 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -1,188 +1,320 @@
 <template>
-  <div class="home" ref="home">
-    <md-app md-waterfall md-mode="fixed">
-      <md-app-toolbar class="md-primary">
-        <div class="md-toolbar-section-start">
-          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
-            <md-icon>menu</md-icon>
-          </md-button>
-          <span class="md-title">Codebook</span>
-        </div>
-        <div class="md-toolbar-section-end">
-          <md-button class="md-icon-button">
-            <md-icon>search</md-icon>
-          </md-button>
-          <md-menu md-align-trigger>
-            <md-button md-menu-trigger class="md-icon-button">
-              <md-icon>more_vert</md-icon>
-            </md-button>
-            <md-menu-content>
-              <md-menu-item>Alphabetically</md-menu-item>
-              <md-menu-item>Recently Used</md-menu-item>
-            </md-menu-content>
-          </md-menu>
-        </div>
-      </md-app-toolbar>
+	<div class="account">
+		<md-app md-waterfall md-mode="fixed">
+			<md-app-toolbar class="md-primary toolbar">
+				<div class="md-toolbar-section-start">
+					<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
+					<h3 class="md-title" style="flex: 1">Settings</h3>
+				</div>
+			</md-app-toolbar>
 
-      <md-app-drawer :md-active.sync="menuVisible">
-        <div class="drawer-banner">
-          <md-icon class="default-avatar md-size-2x">face</md-icon>
-          <p class="md-title">Canary Codebook</p>
-          <p class="md-caption">zhaoyingbo@live.cn</p>
-        </div>
+			<md-app-content>
+				<md-list>
+					<md-subheader class="md-primary">Reset</md-subheader>
+					<md-list-item @click="resetAccount()">
+						<md-icon>person</md-icon>
+						<span class="md-list-item-text">Account</span>
+						<md-progress-spinner v-if="account_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
+					</md-list-item>
 
-        <md-list>
-          <md-list-item>
-            <md-icon>person</md-icon>
-            <span class="md-list-item-text">Account</span>
-          </md-list-item>
+					<md-list-item @click="resetCodebook()">
+						<md-icon>format_align_left</md-icon>
+						<span class="md-list-item-text">Codebook</span>
+						<md-progress-spinner v-if="codebook_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
+					</md-list-item>
 
-          <md-list-item>
-            <md-icon>help</md-icon>
-            <span class="md-list-item-text">FAQ</span>
-          </md-list-item>
+					<md-list-item @click="resetApplication()">
+						<md-icon>layers</md-icon>
+						<span class="md-list-item-text">Application</span>
+						<md-progress-spinner v-if="application_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
+					</md-list-item>
 
-          <md-list-item>
-            <md-icon>question_answer</md-icon>
-            <span class="md-list-item-text">Provide Feedback</span>
-          </md-list-item>
+					<md-list-item @click="open_dialog">
+						<md-icon>vpn_key</md-icon>
+						<span class="md-list-item-text">Main password</span>
+					</md-list-item>
 
-          <md-list-item>
-            <md-icon>settings</md-icon>
-            <span class="md-list-item-text">Settings</span>
-          </md-list-item>
-          <md-list-item>
-            <md-icon>reply</md-icon>
-            <span class="md-list-item-text">Share</span>
-          </md-list-item>
-        </md-list>
-      </md-app-drawer>
+					<md-divider></md-divider>
 
-      <md-app-content>
-        <md-empty-state
-          md-icon="devices_other"
-          md-label="Create your first code"
-          md-description="Creating code, you'll be able to upload your information to the server and save it."
-          v-if="test_data.length == 0"
-        >
-          <md-button class="md-primary md-raised">Create first code</md-button>
-        </md-empty-state>
+					<md-subheader class="md-primary">settings</md-subheader>
+					<md-list-item>
+						<md-icon>format_color_text</md-icon>
+						<span class="md-list-item-text">Language</span>
+						<md-switch v-model="is_chinese" class="md-primary" disabled></md-switch>
+					</md-list-item>
+					<md-list-item>
+						<md-icon>brightness_6</md-icon>
+						<span class="md-list-item-text">Dark mode</span>
+						<md-switch v-model="is_dark_mode" class="md-primary" disabled></md-switch>
+					</md-list-item>
 
-        <div class="code-card" v-for="(code, index) in test_data" :key="index">
-          <p class="md-title">{{code.title}}</p>
-          <p class="md-caption">{{code.user_name}}</p>
-        </div>
+					<md-list-item>
+						<md-icon>update</md-icon>
+						<md-field>
+							<label for="expired_time">Expired time</label>
+							<md-select v-model="expired_time" name="expired_time" id="expired_time">
+								<md-option value="300000">5 min</md-option>
+								<md-option value="600000">10 min</md-option>
+								<md-option value="900000">15 min</md-option>
+							</md-select>
+						</md-field>
+					</md-list-item>
+				</md-list>
 
-        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
-          <md-speed-dial-target>
-            <md-icon>add</md-icon>
-          </md-speed-dial-target>
-        </md-speed-dial>
-      </md-app-content>
-    </md-app>
-  </div>
+				<md-dialog-prompt
+					:md-active.sync="reset_main_pwd_active"
+					v-model="new_main_pwd"
+					md-title="Enter new password"
+					md-input-maxlength="30"
+					md-input-placeholder="Enter here..."
+					md-confirm-text="Done"
+					@md-confirm="resetPwd"
+				/>
+
+				<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
+					<span>{{ snakebar_msg }}</span>
+				</md-snackbar>
+			</md-app-content>
+		</md-app>
+	</div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex';
+import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
+import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
 
 export default {
-  name: "Home",
-  data() {
-    return {
-      menuVisible: false,
-      has_data: false,
-      clientHeight: "",
-      test_data: [
-        {
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'微信',
-          user_name:'15143211127',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },
-      ]
-    };
-  },
-  computed: {
-    ...mapState([])
-  },
-  methods: {
-    ...mapActions([]),
-    changeFixed(clientHeight) {
-      //动态修改样式
-      // console.log(clientHeight);
-      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
-    }
-  },
-  created() {},
-  mounted() {
-    // 获取浏览器可视区域高度
-    this.clientHeight = `${document.documentElement.clientHeight}`;
-    //document.body.clientWidth;
-    window.onresize = function temp() {
-      this.clientHeight = `${document.documentElement.clientHeight}`;
-    };
-  },
-  watch: {
-    // 如果 `clientHeight` 发生改变，这个函数就会运行
-    clientHeight: function() {
-      this.changeFixed(this.clientHeight);
-    }
-  },
-  beforeDestroy() {},
-  components: {}
+	name: 'Add',
+	data() {
+		return {
+			// 重置loading
+			account_loading: false,
+			codebook_loading: false,
+			application_loading: false,
+			reset_main_pwd_active: false,
+			new_main_pwd:'',
+			reset_active: false,
+			// 设置状态
+			is_chinese: false,
+			is_dark_mode: false,
+			// 过期时间 300000 5分钟
+			expired_time: 300000,
+			// snackbar
+			show_snackbar: false,
+			snakebar_msg: '',
+			// 初始化完成状态
+			has_init: false
+		};
+	},
+	computed: {
+		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
+	},
+	methods: {
+		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
+
+		// 初始化
+		init() {
+			// 刷新vuex
+			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
+			// 判断有无用户密码
+			if (Object.keys(this.row_pwd).length != 0) {
+				// 有密码，已经输入过了
+				let now = new Date().getTime();
+				if (now - this.row_pwd.create_time < this.settings.expired_time) {
+					// 上次写入时间距离现在在（默认五分钟）之内
+					// 初始化本页信息
+					this.is_chinese = this.settings.is_chinese;
+					this.is_dark_mode = this.settings.is_dark_mode;
+					this.expired_time = this.settings.expired_time;
+					// 设置flag
+					setTimeout(
+						function() {
+							this.has_init = true;
+							console.log('本页信息覆写完成');
+						}.bind(this),
+						10
+					);
+				} else {
+					// 密码超时
+					this.turnToHome('密码超时');
+				}
+			} else {
+				// 没有密码
+				this.turnToHome('无密码');
+			}
+		},
+
+		//返回上一页
+		back() {
+			// 重置处理拦截器
+			if (this.reset_active) {
+				return;
+			}
+			this.$router.go(-1);
+		},
+
+		// 强制返回Home
+		turnToHome(msg) {
+			console.log(msg);
+			this.$router.replace('/');
+		},
+
+		// 重置账户
+		resetAccount(need_loading = true) {
+			this.reset_active = true;
+			if (need_loading) {
+				this.account_loading = true;
+				setTimeout(
+					function() {
+						this.account_loading = false;
+						this.snakebar_msg = 'Congratulations! Reset account completed!';
+						this.show_snackbar = true;
+					}.bind(this),
+					1000
+				);
+			}
+			// 初始化用户信息
+			let user_infos = {
+				mail_addr: 'A Little Canary',
+				has_login: false,
+				activation: false,
+				update_time: '1582282494434'
+			};
+			this.setUserInfo([user_infos, this]);
+			console.log('用户信息覆写完成');
+			this.reset_active = false;
+		},
+
+		// 重置密码本
+		resetCodebook(need_loading = true) {
+			this.reset_active = true;
+			if (need_loading) {
+				this.codebook_loading = true;
+				setTimeout(
+					function() {
+						this.codebook_loading = false;
+						this.snakebar_msg = 'Congratulations! Reset codebook completed!';
+						this.show_snackbar = true;
+					}.bind(this),
+					1000
+				);
+			}
+			this.setRowData(['', this]);
+			console.log('密码本覆写完成');
+			this.reset_active = false;
+		},
+
+		// 重置整个项目
+		resetApplication() {
+			this.application_loading = true;
+			this.reset_active = true;
+			this.resetAccount(false);
+			this.resetCodebook(false);
+			this.setRowPwd(['', this]);
+			console.log('主密码覆写完成');
+			let settings = {
+				is_chinese: false,
+				is_dark_mode: false,
+				expired_time: 300000
+			};
+			this.setSettings([settings, this]);
+			console.log('个性化设置覆写完成');
+			this.reset_active = false;
+			this.application_loading = false;
+			this.turnToHome('项目重置完成');
+		},
+
+		//覆写个性化设置
+		resetSettings() {
+			let settings = {
+				is_chinese: this.is_chinese,
+				is_dark_mode: this.is_dark_mode,
+				expired_time: this.expired_time
+			};
+			this.setSettings([settings, this]);
+			console.log('个性化设置覆写完成');
+			this.snakebar_msg = 'Congratulations! Reset settings completed!';
+			this.show_snackbar = true;
+		},
+		
+		open_dialog() {
+			this.reset_main_pwd_active = true
+		},
+		
+		resetPwd(new_main_pwd) {
+			// 空内容拦截器
+			if(!new_main_pwd.trim()) {
+				this.snakebar_msg = 'Password can not be none.';
+				this.show_snackbar = true;
+			}
+			let main_code_aes = encryptMainCode(new_main_pwd);
+			let row_pwd = {
+				main_code: main_code_aes,
+				create_time: new Date().getTime()
+			};
+			this.setRowPwd([row_pwd, this]);
+			this.snakebar_msg = 'Congratulations! New password set up successfully!';
+			this.show_snackbar = true;
+		}
+	},
+	created() {
+		this.init();
+	},
+	mounted() {},
+	watch: {
+		// 如果 `is_chinese` 发生改变，就会执行设置函数
+		is_chinese: function() {
+			if (this.has_init) this.resetSettings();
+		},
+		// 如果 `is_dark_mode` 发生改变，就会执行设置函数
+		is_dark_mode: function() {
+			if (this.has_init) this.resetSettings();
+		},
+		// 如果 `expired_time` 发生改变，就会执行设置函数
+		expired_time: function() {
+			if (this.has_init) this.resetSettings();
+		}
+	},
+	beforeDestroy() {},
+	components: {}
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import "../../style/main";
-.home {
-  width: 100%;
-  // max-width: 500px;
-  min-height: 100%;
-  background: #fff;
-  // margin: 0 auto;
-  .drawer-banner {
-    padding: 1rem 0.3rem 0.3rem 0.3rem;
-    box-sizing: border-box;
-    background: $main-color;
-    color: #fff;
-    .default-avatar {
-      color: #fff;
-      margin-bottom: 0.3rem;
-    }
-    .md-caption {
-      color: #fbfbfb;
-    }
-  }
-  .code-card {
-    padding: .3rem 0;
-    border-bottom: 1px #eee solid;
-  }
+@import '../../style/main';
+.account {
+	width: 100%;
+	min-height: 100%;
+	background: #fff;
+	.expand {
+		width: 100%;
+		margin: 0 !important;
+		min-height: 1.2rem !important;
+		margin-top: 0.5rem !important;
+	}
+	.time-content {
+		text-align: right !important;
+	}
+	.loading-box {
+		position: absolute;
+		right: 50%;
+		top: 50%;
+		margin-right: -11px;
+		margin-top: -11px;
+	}
 }
-// Demo purposes only
-.md-drawer {
-  width: 240px;
-  max-width: calc(100vw - 125px);
-}
-</style>
\ No newline at end of file
+</style>
+<!-- 
+ 本页计划内容
+ 
+ 重置账户
+ 重置密码本
+ 重置应用
+ 修改密码本解密密码
+ -----------
+ 设置语言
+ 设置过期时间	
+ 黑暗模式（再议
+ -->