diff --git a/src/node_modules/note.js b/src/node_modules/note.js
index 3f1a9be2..6573cdc7 100644
--- a/src/node_modules/note.js
+++ b/src/node_modules/note.js
@@ -197,8 +197,8 @@ var Note = {
 				// 更新之
 				else {
 					var histories = history.Histories;
-					histories.push(content);
-					db.noteHistories.update({_id: noteId}, {$set: {Histories: histories, "UpdatedTime": new Date()}});
+					histories.push({Content: content, UpdatedTime: new Date()});
+					db.noteHistories.update({_id: noteId}, {$set: {Histories: histories}});
 				}
 			});
 		});
@@ -214,7 +214,17 @@ var Note = {
 				else {
 					var histories = [];
 					for(var i = doc.Histories.length - 1; i >= 0; --i) {
-						histories.push({Content: doc.Histories[i], UpdatedTime: doc.UpdatedTime || new Date()});
+						var history = doc.Histories[i];
+						var content, updatedTime;
+						if (typeof history == 'object') {
+							content = history.Content;
+							updatedTime = history.UpdatedTime;
+						}
+						else {
+							content = history;
+							updatedTime = doc.UpdatedTime || new Date();
+						}
+						histories.push({Content: content, UpdatedTime: updatedTime});
 					}
 					callback(histories);
 				}
diff --git a/src/note.html b/src/note.html
index 489603ec..128ce023 100755
--- a/src/note.html
+++ b/src/note.html
@@ -7,7 +7,7 @@
 <meta name="apple-touch-fullscreen" content="yes">
 <meta name=”apple-mobile-web-app-capable” content=”yes” />
 <meta name="keywords" content="leanote,leanote.com">
-<meta name="description" content="leanote, Not Just A Notepad">
+<meta name="description" content="leanote, Not Just A Notepad!">
 <title class="lang">Leanote, Not Just A Notepad</title>
 
 <link href="public/css/bootstrap.css" rel="stylesheet" />
@@ -672,14 +672,12 @@ window.require = undefined;
 
 <!-- 使用require js -->
 <script src="public/js/require.js"></script>
-
+<!-- 导入插件 执行 -->
 <script src="public/js/main.js"></script>
-
-<script src="public/tinymce/plugins/leaui_image/public/js/jquery.ui.widget.js"></script>
-<script src="public/tinymce/plugins/leaui_image/public/js/jquery.fileupload.js"></script>
-<script src="public/tinymce/plugins/leaui_image/public/js/jquery.iframe-transport.js"></script>
-
+<!-- markdown editor -->
 <script src="public/md/main.js"></script>
+<!-- extra额外 -->
+<script src="public/js/dec/main.js"></script>
 
 <script>
 window.require = window.requireNode;
diff --git a/src/public/js/app/note.js b/src/public/js/app/note.js
index a2176420..b89f7395 100644
--- a/src/public/js/app/note.js
+++ b/src/public/js/app/note.js
@@ -1410,73 +1410,6 @@ Note.shareNote = function(target) {
 	shareNoteOrNotebook(noteId, true);
 }
 
-// 历史记录
-Note.listNoteContentHistories = function() {
-	// 弹框
-	$("#leanoteDialog #modalTitle").html(getMsg("history"));
-	$content = $("#leanoteDialog .modal-body");
-	$content.html("");
-	$("#leanoteDialog .modal-footer").html('<button type="button" class="btn btn-default" data-dismiss="modal">' + getMsg("close") + '</button>');
-	options = {}
-	options.show = true;
-	$("#leanoteDialog").modal(options);
-
-	NoteService.getNoteHistories(Note.curNoteId, function(re) {
-		// console.log("histories.....");
-		// console.log(re);
-	// });
-	// ajaxGet("/noteContentHistory/listHistories", {noteId: Note.curNoteId}, function(re) {
-		if(!isArray(re)) {
-			$content.html(getMsg("noHistories")); return;
-		}
-		// 组装成一个tab
-		var str = /*"<p>" + getMsg("historiesNum") + '</p>' + */'<div id="historyList"><table class="table table-hover">';
-		note = Note.cache[Note.curNoteId];
-		var s = "div"
-		if(note.IsMarkdown) {
-			s = "pre";
-		}
-		for (i in re) {
-			var content = re[i]
-			content.Ab = Note.genAbstract(content.Content, 200);
-			// 为什么不用tt(), 因为content可能含??
-			str += '<tr><td seq="' +  i + '">#' + (i+1) +'<' + s + ' class="each-content">' + content.Ab + '</' + s + '> <div class="btns">' + getMsg("datetime") + ': <span class="label label-default">' + goNowToDatetime(content.UpdatedTime) + '</span> <button class="btn btn-default all">' + getMsg("unfold") + '</button> <button class="btn btn-primary back">' + getMsg('restoreFromThisVersion') + '</button></div></td></tr>';
-		}
-		str += "</table></div>";
-		$content.html(str);
-		$("#historyList .all").click(function() {
-			$p = $(this).parent().parent();
-			var seq = $p.attr("seq");
-			var $c = $p.find(".each-content");
-			var info = re[seq];
-			if(!info.unfold) { // 默认是折叠的
-				$(this).text(getMsg("fold")); // 折叠
-				$c.html(info.Content);
-				info.unfold = true;
-			} else {
-				$(this).text(getMsg("unfold")); // 展开
-				$c.html(info.Ab);
-				info.unfold = false
-			}
-		});
-
-		// 还原
-		$("#historyList .back").click(function() {
-			$p = $(this).parent().parent();
-			var seq = $p.attr("seq");
-			if(confirm(getMsg("confirmBackup"))) {
-				// 保存当前版本
-				Note.curChangedSaveIt();
-				// 设置之
-				note = Note.cache[Note.curNoteId];
-				setEditorContent(re[seq].Content, note.IsMarkdown);
-				//
-				hideDialog();
-			}
-		});
-	});
-};
-
 //-----------------
 // read only, 已过时
 
@@ -2715,9 +2648,9 @@ $(function() {
 
 	//------------
 	// 文档历史
-	$("#contentHistory").click(function() {
-		Note.listNoteContentHistories()
-	});
+	// $("#contentHistory").click(function() {
+	// 	Note.listNoteContentHistories()
+	// });
 
 	$("#saveBtn").click(function() {
 		Note.curChangedSaveIt(true);
diff --git a/src/public/js/dec/history.js b/src/public/js/dec/history.js
new file mode 100644
index 00000000..bc2652f8
--- /dev/null
+++ b/src/public/js/dec/history.js
@@ -0,0 +1,162 @@
+/**
+ * @file 历史记录
+ * @author  life
+ * 
+ */
+define(function() {
+
+    var tpl = ['<div class="modal fade history-modal" tabindex="-1" role="dialog" aria-hidden="true">',
+            '<div class="modal-dialog modal-lg ">',
+                '<div class="modal-content">',
+                    '<div class="modal-header">',
+                        '<h4 class="modal-title" class="modalTitle">' + + '</h4>',
+                    '</div>',
+                    '<div class="modal-body clearfix">',
+                        '<div class="history-list-wrap pull-left">',
+                            '<div class="history-list-header">' + getMsg('history') +' (<span class="history-num"></span>)</div>',
+                            '<div class="history-list list-group"></div>',
+                        '</div>',
+                        '<div class="history-content-wrap pull-left">',
+                            '<div class="history-content-header">',
+                                '<a class="btn btn-primary back">' + getMsg('restoreFromThisVersion') + '</a>',
+                                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>',
+                            '</div>',
+                            '<div class="history-content"></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="modal-footer hide">',
+                        '<button type="button" class="btn btn-default" data-dismiss="modal">' + getMsg('close') + '</button>',
+                    '</div>',
+                '</div>',
+            '</div>',
+       '</div>'].join('');
+    var $tpl = $(tpl);
+
+    var $historyContent = $tpl.find('.history-content');
+    var $historyList = $tpl.find('.history-list');
+    var $historyNum = $tpl.find('.history-num');
+    var view = {
+        note: null,
+        list: [],
+        curIndex: 0,
+
+        renderContent: function (i) {
+            var content = this.list[i].Content;
+            this.curIndex = i;
+
+            var wrap = '<div>';
+            var wrapEnd = '</div>';
+            if (this.note.IsMarkdown) {
+                wrap = '<pre>';
+                wrapEnd = '</pre>';
+            }
+            $historyContent.html(wrap + content + wrapEnd);
+
+            var as = $historyList.find('a');
+            as.removeClass('active');
+            as.eq(i).addClass('active');
+        },
+        render: function (list) {
+            var navs = '';
+            this.list = list;
+            // console.log(list);
+            if (list) {
+                for(var i = 0; i < list.length; ++i) {
+                    var content = list[i];
+                    navs += '<a class="list-group-item" data-index="' + i + '"><span class="badge">#' + (i+1)+ '</span>' + goNowToDatetime(content.UpdatedTime) + '</a>';
+                }
+            }
+            $historyList.html(navs);
+
+            this.renderContent(0);
+            $historyNum.html(list.length);
+            // show
+            $tpl.modal({show: true});
+        },
+
+        bind: function () {
+            var me = this;
+            $("#contentHistory").click(function() {
+                me.getHistories();
+            });
+
+            $historyList.on('click', 'a', function () {
+                var index = $(this).data('index');
+                me.renderContent(index);
+            });
+
+            // 还原
+            $tpl.find('.back').click(function() {
+                if(confirm(getMsg("confirmBackup"))) {
+                    // 保存当前版本
+                    Note.curChangedSaveIt(true);
+
+                    // 设置之
+                    note = Note.cache[Note.curNoteId];
+                    setEditorContent(me.list[me.curIndex].Content, note.IsMarkdown);
+
+                    $tpl.modal('hide');
+                    // 保存
+                    Note.curChangedSaveIt(true);
+                }
+            });
+        },
+
+        getHistories: function () {
+            var me = this;
+            var note = Note.getCurNote();
+            me.note = note;
+            NoteService.getNoteHistories(Note.curNoteId, function(re) {
+                if(!isArray(re)) {
+                    alert(getMsg('noHistories'));
+                    return;
+                }
+
+                me.render(re);
+
+                return;
+
+                // 组装成一个tab
+                var str = "<p>" + getMsg("historiesNum") + '</p><div id="historyList"><table class="table table-hover">';
+                note = Note.cache[Note.curNoteId];
+                var s = "div"
+                if(note.IsMarkdown) {
+                    s = "pre";
+                }
+                for (i in re) {
+                    var content = re[i]
+                    content.Ab = Note.genAbstract(content.Content, 200);
+                    // 为什么不用tt(), 因为content可能含??
+                    str += '<tr><td seq="' +  i + '">#' + (i+1) +'<' + s + ' class="each-content">' + content.Ab + '</' + s + '> <div class="btns">' + getMsg("datetime") + ': <span class="label label-default">' + goNowToDatetime(content.UpdatedTime) + '</span> <button class="btn btn-default all">' + getMsg("unfold") + '</button> <button class="btn btn-primary back">' + getMsg('restoreFromThisVersion') + '</button></div></td></tr>';
+                }
+                str += "</table></div>";
+                $content.html(str);
+                $("#historyList .all").click(function() {
+                    $p = $(this).parent().parent();
+                    var seq = $p.attr("seq");
+                    var $c = $p.find(".each-content");
+                    var info = re[seq]; 
+                    if(!info.unfold) { // 默认是折叠的
+                        $(this).text(getMsg("fold")); // 折叠
+                        $c.html(info.Content);
+                        info.unfold = true;
+                    } else {
+                        $(this).text(getMsg("unfold")); // 展开
+                        $c.html(info.Ab);
+                        info.unfold = false
+                    }
+                });
+
+               
+            });
+        },
+
+        init: function () {
+            var me = this;
+            this.bind();
+
+        }
+    };
+
+    view.init();
+});
\ No newline at end of file
diff --git a/src/public/js/dec/main.js b/src/public/js/dec/main.js
new file mode 100644
index 00000000..f53560c8
--- /dev/null
+++ b/src/public/js/dec/main.js
@@ -0,0 +1,16 @@
+// 装饰, 不是立刻就需要的功能
+// 1. 历史记录
+// todo
+// 2. history
+// 3. note info
+// requirejs.config({
+//     paths: {
+//         'history': 'public/js/dec/history',
+//     }
+// });
+
+// 异步加载
+var requireWeb = require;
+setTimeout(function () {
+    requireWeb(['public/js/dec/history']);
+});
diff --git a/src/public/themes/default.css b/src/public/themes/default.css
index fae5ee26..bcce1733 100644
--- a/src/public/themes/default.css
+++ b/src/public/themes/default.css
@@ -2541,3 +2541,96 @@ body,
 .local #syncProgress {
   display: none;
 }
+.history-modal .modal-dialog {
+  width: auto !important;
+  position: absolute;
+  /* width: 100%; */
+  /* height: 100%; */
+  left: 5px;
+  right: 5px;
+  top: 20px;
+  bottom: 20px;
+}
+.history-modal .modal-dialog .modal-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  overflow: scroll;
+}
+.history-modal .modal-dialog .modal-content .modal-body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  width: 200px;
+  border-right: 1px solid #ccc;
+  box-shadow: 1px 1px 10px #ddd;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap .history-list-header {
+  line-height: 50px;
+  font-size: 16px;
+  font-weight: bold;
+  padding-left: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #ccc;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap .history-list {
+  position: absolute;
+  top: 51px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  margin-bottom: 0;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap .list-group-item {
+  border-top: none;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap .list-group-item.active,
+.history-modal .modal-dialog .modal-content .modal-body .history-list-wrap .list-group-item:hover {
+  color: #000;
+  background-color: #eee;
+  border-color: #eee;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-content-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 200px;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-content-wrap .close {
+  padding: 10px 15px;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-content-wrap .back {
+  margin-left: 10px;
+  margin-top: 5px;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-content-wrap .history-content-header {
+  height: 51px;
+  border-bottom: 1px solid #eee;
+  box-shadow: 5px 0px 5px #ccc;
+}
+.history-modal .modal-dialog .modal-content .modal-body .history-content-wrap .history-content {
+  position: absolute;
+  top: 51px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-left: 10px;
+  overflow-y: auto;
+}
diff --git a/src/public/themes/default.less b/src/public/themes/default.less
index 59eea9b6..266a3a42 100644
--- a/src/public/themes/default.less
+++ b/src/public/themes/default.less
@@ -801,3 +801,109 @@ html, body, #page, #pageInner, #noteList, #notebook, #leftNotebook {
 .local #syncRefresh, .local #syncProgress {
   display: none;
 }
+
+
+//===========
+// history
+.history-modal .modal-dialog {
+    width: auto !important;
+    position: absolute;
+    /* width: 100%; */
+    /* height: 100%; */
+    left: 5px;
+    right: 5px;
+    top: 20px;
+    bottom: 20px;
+
+    .modal-content {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+        overflow: scroll;
+
+        .modal-body {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 0;
+            .history-list-wrap {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                overflow-y: auto;
+                width: 200px;
+                border-right: 1px solid #ccc;
+                box-shadow: 1px 1px 10px #ddd;
+
+                .history-list-header {
+                    line-height: 50px;
+                    font-size: 16px;
+                    font-weight: bold;
+                    padding-left: 15px;
+                    border-bottom: 1px solid #eee;
+                    background-color: #ccc;
+                }
+
+                .history-list {
+                    position: absolute;
+                    top: 51px;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    overflow-y: auto;
+                    margin-bottom: 0;
+                }
+
+                .list-group-item {
+                    border-top: none;
+                    &.active, &:hover {
+                        color: #000;
+                        background-color: #eee;
+                        border-color: #eee;
+                    }
+                }
+            }
+            .history-content-wrap {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                left: 200px;
+
+                .close {
+                    padding: 10px 15px;
+                }
+                
+                .back {
+                    margin-left: 10px;
+                    margin-top: 5px;
+                }
+
+                .history-content-header {
+                    // background-color: #eee;
+                    height: 51px;
+                    border-bottom: 1px solid #eee;
+                    box-shadow: 5px 0px 5px #ccc;
+                }
+
+                .history-content {
+                    position: absolute;
+                    top: 51px;
+                    bottom: 0;
+                    right: 0;
+                    left: 0;
+                    padding-top: 5px;
+                    padding-right: 5px;
+                    padding-left: 10px;
+                    overflow-y: auto;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file