diff --git a/src/App.vue b/src/App.vue
index 25bd39f..2f40c85 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <template>
-  <div id="app">
+	<div id="app">
 		<icon class="bg" name="canary"></icon>
-    <router-view/>
-  </div>
+		<router-view />
+	</div>
 </template>
 
 <style lang="scss">
-@import "./style/main";
-@import "./style/font";
+@import './style/main';
+@import './style/font';
 body,
 h1,
 h2,
@@ -33,15 +33,15 @@ input,
 textarea,
 th,
 td {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 }
 body,
 button,
 input,
 select,
 textarea {
-  font: 12px/1.5tahoma, arial, \5b8b\4f53;
+	font: 12px/1.5tahoma, arial, \5b8b\4f53;
 }
 h1,
 h2,
@@ -49,90 +49,92 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: 100%;
+	font-size: 100%;
 }
 address,
 cite,
 dfn,
 em,
 var {
-  font-style: normal;
+	font-style: normal;
 }
 code,
 kbd,
 pre,
 samp {
-  font-family: couriernew, courier, monospace;
+	font-family: couriernew, courier, monospace;
 }
 small {
-  font-size: 12px;
+	font-size: 12px;
 }
 ul,
 ol {
-  list-style: none;
+	list-style: none;
 }
 a {
-  text-decoration: none;
+	text-decoration: none;
 }
 a:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 sup {
-  vertical-align: text-top;
+	vertical-align: text-top;
 }
 sub {
-  vertical-align: text-bottom;
+	vertical-align: text-bottom;
 }
 legend {
-  color: #000;
+	color: #000;
 }
 fieldset,
 img {
-  border: 0;
+	border: 0;
 }
 button,
 input,
 select,
 textarea {
-  font-size: 100%;
+	font-size: 100%;
 }
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 button {
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  outline: none;
+	margin: 0;
+	padding: 0;
+	background: none;
+	border: none;
+	outline: none;
 }
 #app {
-  font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /* text-align: center; */
-  color: #2c3e50;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -khtml-user-select: none;
-  user-select: none;
+	font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	/* text-align: center; */
+	color: #2c3e50;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
 }
 .bg {
-  position: absolute;
+	position: absolute;
 	top: 50%;
 	left: 50%;
-  z-index: -100;
-  height: 5rem;
-  width: 5rem;
+	z-index: -100;
+	height: 5rem;
+	width: 5rem;
 	margin-top: -2.5rem;
 	margin-left: -2.5rem;
 }
+.md-menu-content-bottom-start {
+	left: 0.2rem !important;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 7d35183..706e7e6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,11 +9,6 @@ const routes = [
     name: 'Home',
     component: () => import(/* webpackChunkName: "home" */ '../views/Home/Home.vue')
   },
-  {
-    path: '/search',
-    name: 'Search',
-    component: () => import(/* webpackChunkName: "search" */ '../views/Search/Search.vue')
-  },
   {
     path: '/add',
     name: 'Add',
@@ -44,6 +39,17 @@ const routes = [
     name: 'Unlock',
     component: () => import(/* webpackChunkName: "unlock" */ '../views/Unlock/Unlock.vue')
   },
+	{
+	  path: '/detail',
+	  name: 'Detail',
+	  component: () => import(/* webpackChunkName: "detail" */ '../views/Detail/Detail.vue')
+	},
+	{
+		path: '*', // 页面不存在的情况下会跳到home
+		redirect: '/',
+		name: 'notFound',
+		hidden: true
+	}
 ]
 
 const router = new VueRouter({
diff --git a/src/svg/canary-white.svg b/src/svg/canary-white.svg
new file mode 100644
index 0000000..b12ffbd
--- /dev/null
+++ b/src/svg/canary-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" /></svg>
\ No newline at end of file
diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue
new file mode 100644
index 0000000..05fb06e
--- /dev/null
+++ b/src/views/Detail/Detail.vue
@@ -0,0 +1,246 @@
+<template>
+	<div class="add">
+		<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">{{id_cache?'Edit':'Add New Code'}}</h3>
+				</div>
+			</md-app-toolbar>
+
+			<md-app-content>
+				<md-field :class="title_verify? '':'md-invalid'">
+					<label>Code Title</label>
+					<md-input v-model="title" required></md-input>
+					<span class="md-error">Title can not be none.</span>
+				</md-field>
+
+				<md-field :class="user_name_verify? '':'md-invalid'">
+					<label>Username</label>
+					<md-input v-model="user_name" required></md-input>
+					<span class="md-error">Username can not be none.</span>
+				</md-field>
+
+				<md-field :class="password_verify? '':'md-invalid'">
+					<label>Password</label>
+					<md-input v-model="password" required></md-input>
+					<span class="md-error">Password can not be none.</span>
+				</md-field>
+
+				<md-field>
+					<label>Web address</label>
+					<md-input v-model="web_address"></md-input>
+				</md-field>
+
+				<md-field>
+					<label>Node</label>
+					<md-textarea v-model="node"></md-textarea>
+				</md-field>
+
+				<md-button class="md-raised md-primary expand" @click="judgeContent()">Enter</md-button>
+			</md-app-content>
+		</md-app>
+	</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from 'vuex';
+import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
+
+export default {
+	name: 'Add',
+	data() {
+		return {
+			title: '',
+			user_name: '',
+			password: '',
+			node: '',
+			web_address: '',
+			id_cache: '',
+			open_count_cache:'',
+			title_verify: true,
+			user_name_verify: true,
+			password_verify: true
+		};
+	},
+	computed: {
+		...mapState(['row_data', 'row_pwd'])
+	},
+	methods: {
+		...mapActions(['setRowData', 'setRowPwd']),
+		
+		// 初始化
+		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 < 1000 * 60 * 5) {
+					// 上次写入时间距离现在在五分钟之内
+					// 判断是否是更新
+					if (this.$route.params.modify_content) {
+						// 刷新重置数据
+						let content = this.$route.params.modify_content
+						this.title = content.title
+						this.user_name = content.user_name
+						this.password = content.password
+						this.node = content.node
+						this.web_address = content.web_address
+						this.id_cache = content.id
+						this.open_count_cache = content.open_count
+					}
+					return
+				} else {
+					// 密码超时
+					this.turnToHome('密码超时');
+				}
+			} else {
+				// 没有密码
+				this.turnToHome('无密码');
+			}
+		},
+		
+		// 对输入框里边的内容进行判断
+		judgeContent() {
+			// 设置flag
+			let can_continue = true
+			// 处理title
+			if(!(this.title = this.title.trim())) {
+				can_continue = false
+				this.title_verify = false
+			}
+			// 处理user_name
+			if(!(this.user_name = this.user_name.trim())) {
+				can_continue = false
+				this.user_name_verify = false
+			}
+			// 处理password
+			if(!(this.password = this.password.trim())) {
+				can_continue = false
+				this.password_verify = false
+			}
+			// 根据flag判断是否提交
+			if(can_continue) this.submit()
+		},
+
+		// 校验通过进行提交
+		submit() {
+			// 覆写拦截器
+			if(this.id_cache) {
+				console.log('覆写拦截器生效')
+				this.reWrite()
+				return
+			}
+			// 正常提交
+			let data_list
+			// 组织内容
+			let code = {
+				id: this.createId(),
+				open_count:0,
+				title:this.title,
+				user_name:this.user_name,
+				password:this.password,
+				node:this.node,
+				web_address: this.web_address
+			}
+			// 解密主密码
+			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+			// 判断是不是第一个
+			if(this.row_data) {
+				// 不是第一个需要进行加解密
+				// 解密密码本
+				let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+				// json化
+				data_list = JSON.parse(data_decrypt);
+				data_list.push(code)
+			} else {
+				// 是第一个
+				data_list = [code]
+			}
+			let data_list_aes = encrypt(main_code_decrpt, data_list)
+			this.setRowData([data_list_aes, this])
+			console.log('新加密信息保存成功,返回Home');
+			this.back()
+		},
+		
+		reWrite() {
+			let data_list
+			// 组织内容
+			let code = {
+				id: this.id_cache,
+				open_count:this.open_count_cache,
+				title:this.title,
+				user_name:this.user_name,
+				password:this.password,
+				node:this.node,
+				web_address: this.web_address
+			}
+			// 解密主密码
+			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+			// 解密密码本
+			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+			// json化
+			data_list = JSON.parse(data_decrypt);
+			// 遍历所有密码
+			for(let i in data_list) {
+				// 找到该密码
+				if(data_list[i].id == code.id) {
+					// 覆写
+					data_list[i] = code
+				}
+			}
+			let data_list_aes = encrypt(main_code_decrpt, data_list)
+			this.setRowData([data_list_aes, this])
+			console.log('新加密信息覆写成功,返回详情');
+			this.back()
+		},
+		//返回上一页
+		back() {
+			this.$router.go(-1)
+		},
+		
+		// 强制返回Home
+		turnToHome(msg) {
+			console.log(msg)
+			this.$router.replace('/')
+		},
+		
+		// 创建唯一失败码
+		createId() {
+			// 获取时间戳
+			let time = new Date().getTime()
+			// 获取随机数
+			let random = Math.floor(Math.random()*100);
+			// 小于10填0
+			random < 10 ? random = '0' + random.toString() : random = random.toString()
+			// 拼接
+			let id = time.toString() + random
+			return id
+		}
+	},
+	created() {
+		this.init()
+	},
+	mounted() {},
+	watch: {},
+	beforeDestroy() {},
+	components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import '../../style/main';
+.add {
+	width: 100%;
+	min-height: 100%;
+	background: #fff;
+	.expand {
+		width: 100%;
+		margin: 0 !important;
+		min-height: 1.2rem !important;
+	}
+}
+</style>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 89ddd97..9966fd8 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -17,7 +17,7 @@
 					</md-menu>
 				</div>
 				<div class="md-toolbar-row" v-if="search_start">
-					<md-autocomplete class="search" v-model="selectedEmployee" :md-options="employees" md-layout="box"><label>Search...</label></md-autocomplete>
+					<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box"><label>Search...</label></md-autocomplete>
 				</div>
 			</md-app-toolbar>
 			
@@ -102,12 +102,14 @@ export default {
 			clientHeight: '',
 			// 显示的密码列表
 			show_list: [],
+			// 搜索暂存list
+			cache_list: [],
 			unlock: false,
 			show_snackbar: false,
 			snakebar_msg: '',
 			web_addr: 'https://codebook.canary.moe',
-			employees: [],
-			selectedEmployee: null,
+			titles: [],
+			search_content: '',
 			search_start: false
 		};
 	},
@@ -144,7 +146,10 @@ export default {
 						// 解密密码本
 						let data_decrypt = decrypt(main_code_decrpt, this.row_data);
 						// 刷新显示内容
-						this.show_list = JSON.parse(data_decrypt);
+						let data_list = JSON.parse(data_decrypt);
+						this.show_list = data_list
+						// 抽离title
+						this.separateTitle(data_list)
 					} else {
 						// 空密码本
 						this.show_list = [];
@@ -236,15 +241,48 @@ export default {
 
 		// 复制成功
 		onCopyUrl(e) {
-			this.snakebar_msg = '复制成功';
+			this.snakebar_msg = 'Copy successful';
 			this.show_snackbar = true;
 		},
 
 		// 复制失败
 		onErrorUrl(e) {
-			this.snakebar_msg = '复制失败，夸克等浏览器复制成功仍会显示失败';
+			this.snakebar_msg = 'Failed to copy, but failed in some cases. Try to paste';
 			this.show_snackbar = true;
-		}
+		},
+		
+		// 分离数据title
+		separateTitle(data_list) {
+			let title_list = []
+			for(let i in data_list) {
+				title_list.push(data_list[i].title)
+			}
+			this.titles = title_list
+			console.log('数据头部分离完成')
+		},
+		
+		// 模糊搜索
+		fuzzySearch(cache_list) {
+			// 空内容拦截器，显示全部密码
+			if(!this.search_content.trim()) {
+			  this.show_list = cache_list
+				return
+			}
+			let data_list = []
+			for (let i in cache_list) {
+				if(this.generReg(this.search_content.trim()).test(cache_list[i].title)) {
+					data_list.push(cache_list[i])
+				}
+			}
+			this.show_list = data_list
+		},
+
+		generReg(val) {
+			let head = '(.*)('
+			let tail = ')(.*)'
+			let body = val.split('').join(')(.*)(')
+			return new RegExp(head + body + tail, 'i')
+		},
 	},
 	created() {
 		// 重置row_pwd
@@ -264,6 +302,21 @@ export default {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行
 		clientHeight: function() {
 			this.changeFixed(this.clientHeight);
+		},
+		// 如果 `search_start` 发生改变，这个函数就会运行
+		search_start: function() {
+			if(this.search_start) {
+				this.cache_list = JSON.parse(JSON.stringify(this.show_list))
+				console.log('搜索阵列展开，缓存设置完成')
+			} else {
+				this.show_list = JSON.parse(JSON.stringify(this.cache_list))
+				this.cache_list = []
+				console.log('搜索阵列关闭，缓存清空完成')
+			}
+		},
+		// 如果 `search_content` 发生改变，这个函数就会运行
+		search_content: function() {
+			this.fuzzySearch(this.cache_list)
 		}
 	},
 	beforeDestroy() {},
@@ -284,6 +337,7 @@ export default {
 		box-sizing: border-box;
 		background: $main-color;
 		color: #fff;
+		position: relative;
 		.default-avatar {
 			color: #fff;
 			margin-bottom: 0.3rem;
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
deleted file mode 100644
index 660278f..0000000
--- a/src/views/Search/Search.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<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>
-
-      <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-list>
-          <md-list-item>
-            <md-icon>person</md-icon>
-            <span class="md-list-item-text">Account</span>
-          </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>
-            <md-icon>question_answer</md-icon>
-            <span class="md-list-item-text">Provide Feedback</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-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>
-
-        <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-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>
-</template>
-
-<script>
-// @ is an alias to /src
-import { mapState, mapActions } from "vuex";
-
-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: {}
-};
-</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;
-  }
-}
-// Demo purposes only
-.md-drawer {
-  width: 240px;
-  max-width: calc(100vw - 125px);
-}
-</style>
\ No newline at end of file