diff --git a/app/views/Lea/index.html b/app/views/Lea/index.html
index 9be9a22..dd37a1a 100644
--- a/app/views/Lea/index.html
+++ b/app/views/Lea/index.html
@@ -56,13 +56,40 @@
 	</ul>
 	
 	<div id="pagination" class="clearfix">
-		{{if eq .nav "recommend"}}
-			{{set . "url" (urlConcat "/lea/index" "keywords" .keywords)}}
-		{{else}}
-			{{set . "url" (urlConcat "/lea/latest" "keywords" .keywords)}}
-		{{end}}
-		{{template "lea/page.html" .}}
+		<ul class="pagination pagination-sm m-t-none m-b-none">
+		{{set . "url" (urlConcat .baseUrl "keywords" .keywords)}}
+		</ul>
 	</div>
 </div>
 
+<script src="/js/jquery-1.9.0.min.js"></script>
+<script src="/js/bootstrap-min.js"></script>
+<script src="/js/jquery.pagination.js"></script>
+<script>
+$(function() {
+	var totalPage = {{.pageInfo.TotalPage}};
+	if(totalPage > 1) {
+		var baseUrl = "{{.url}}";
+		var count = {{.pageInfo.Count}};
+		var curPage = {{.pageInfo.CurPage}}-1;
+		$(".pagination").pagination(count, {
+			items_per_page: 10,
+			prev_text:"&lt;",
+			next_text:"&gt;",
+			current_page: curPage,
+			callback: function(pageNum) {
+				pageNum++;
+				var url = baseUrl;
+				if(baseUrl.indexOf("?") > 0) {
+					url += "&page=" + pageNum;
+				} else {
+					url += "?page=" + pageNum;
+				}
+				location.href = url;
+			}
+	    });
+    }
+});
+</script>
+
 {{template "lea/footer.html" .}}
\ No newline at end of file
diff --git a/public/css/blog/basic.less b/public/css/blog/basic.less
new file mode 100644
index 0000000..e997721
--- /dev/null
+++ b/public/css/blog/basic.less
@@ -0,0 +1,3 @@
+#posts img {
+	max-width: 100%;
+}
\ No newline at end of file
diff --git a/public/css/blog/blog_daqi.css b/public/css/blog/blog_daqi.css
index c7f6e97..6be612b 100644
--- a/public/css/blog/blog_daqi.css
+++ b/public/css/blog/blog_daqi.css
@@ -1,3 +1,6 @@
+#posts img {
+  max-width: 100%;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -171,6 +174,3 @@ a:hover {
   margin-bottom: 10px ;
   padding-left: 20px;
 }
-#posts img {
-  max-width: 700px;
-}
diff --git a/public/css/blog/blog_daqi.less b/public/css/blog/blog_daqi.less
index 7960315..e1aa496 100644
--- a/public/css/blog/blog_daqi.less
+++ b/public/css/blog/blog_daqi.less
@@ -1,3 +1,5 @@
+@import "basic.less";
+
 @bgColor: #fff;
 @headerBgColor: #fff;
 @fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
@@ -201,8 +203,4 @@ a:hover {
 			padding-left:20px;
 		}
 	}
-}
-
-#posts img {
-	max-width: 700px;
 }
\ No newline at end of file
diff --git a/public/css/blog/blog_default.css b/public/css/blog/blog_default.css
index fd65310..048e713 100644
--- a/public/css/blog/blog_default.css
+++ b/public/css/blog/blog_default.css
@@ -1,3 +1,6 @@
+#posts img {
+  max-width: 100%;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -157,6 +160,3 @@ a:hover {
   margin: 0;
   padding-left: 20px;
 }
-#posts img {
-  max-width: 700px;
-}
diff --git a/public/css/blog/blog_default.less b/public/css/blog/blog_default.less
index 72d1fb7..2f1623e 100644
--- a/public/css/blog/blog_default.less
+++ b/public/css/blog/blog_default.less
@@ -1,3 +1,4 @@
+@import "basic.less";
 
 @bgColor: #fff;
 @headerBgColor: #fff;
@@ -181,8 +182,4 @@ a:hover {
 			padding-left:20px;
 		}
 	}
-}
-
-#posts img {
-	max-width: 700px;
-}
+}
\ No newline at end of file
diff --git a/public/css/blog/blog_left_fixed.css b/public/css/blog/blog_left_fixed.css
index 709f84d..cc11f61 100644
--- a/public/css/blog/blog_left_fixed.css
+++ b/public/css/blog/blog_left_fixed.css
@@ -1,3 +1,6 @@
+#posts img {
+  max-width: 100%;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -208,6 +211,3 @@ a:hover {
 .mce-btn {
   background: none !important;
 }
-#posts img {
-  max-width: 700px;
-}
diff --git a/public/css/blog/blog_left_fixed.less b/public/css/blog/blog_left_fixed.less
index 999671e..8bc9c27 100644
--- a/public/css/blog/blog_left_fixed.less
+++ b/public/css/blog/blog_left_fixed.less
@@ -1,3 +1,5 @@
+@import "basic.less";
+
 @bgColor: #fff;
 @headerBgColor: #fff;
 @fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
@@ -230,8 +232,4 @@ a:hover {
 }
 .mce-btn {
 	background: none !important;
-}
-
-#posts img {
-	max-width: 700px;
 }
\ No newline at end of file
diff --git a/public/js/jquery.pagination.js b/public/js/jquery.pagination.js
new file mode 100644
index 0000000..3fc6cd7
--- /dev/null
+++ b/public/js/jquery.pagination.js
@@ -0,0 +1,172 @@
+/**
+ * This jQuery plugin displays pagination links inside the selected elements.
+ *
+ * @author Gabriel Birke (birke *at* d-scribe *dot* de)
+ * @version 1.2
+ * @param {int} maxentries Number of entries to paginate
+ * @param {Object} opts Several options (see README for documentation)
+ * @return {Object} jQuery Object
+ */
+jQuery.fn.pagination = function(maxentries, opts){
+	opts = jQuery.extend({
+		items_per_page:10,
+		num_display_entries:10,
+		current_page:0,
+		num_edge_entries:2,
+		link_to:"#",
+		prev_text:"Prev",
+		next_text:"Next",
+		ellipse_text:"...",
+		prev_show_always:true,
+		next_show_always:true,
+		callback:function(){return false;}
+	},opts||{});
+	
+	return this.each(function() {
+		/**
+		 * Calculate the maximum number of pages
+		 */
+		function numPages() {
+			return Math.ceil(maxentries/opts.items_per_page);
+		}
+		
+		/**
+		 * Calculate start and end point of pagination links depending on 
+		 * current_page and num_display_entries.
+		 * @return {Array}
+		 */
+		function getInterval()  {
+			var ne_half = Math.ceil(opts.num_display_entries/2);
+			var np = numPages();
+			var upper_limit = np-opts.num_display_entries;
+			var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
+			var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
+			return [start,end];
+		}
+		
+		/**
+		 * This is the event handling function for the pagination links. 
+		 * @param {int} page_id The new page number
+		 */
+		function pageSelected(page_id, evt){
+			evt.preventDefault();
+			current_page = page_id;
+			drawLinks();
+			var continuePropagation = opts.callback(page_id, panel);
+			if (!continuePropagation) {
+				if (evt.stopPropagation) {
+					evt.stopPropagation();
+				}
+				else {
+					evt.cancelBubble = true;
+				}
+			}
+			return continuePropagation;
+		}
+		
+		/**
+		 * This function inserts the pagination links into the container element
+		 */
+		function drawLinks() {
+			panel.empty();
+			var interval = getInterval();
+			var np = numPages();
+			// This helper function returns a handler function that calls pageSelected with the right page_id
+			var getClickHandler = function(page_id) {
+				return function(evt){ return pageSelected(page_id,evt); }
+			}
+			// Helper function for generating a single link (or a span tag if it's the current page)
+			var appendItem = function(page_id, appendopts){
+				page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
+				appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
+				var classes = "";
+				if(page_id == current_page){
+					var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
+					if(appendopts.text != opts.prev_text && appendopts.text != opts.next_text) {
+						classes='class="active"';
+					}
+				}
+				else
+				{
+					var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
+						.bind("click", getClickHandler(page_id))
+						.attr('href', opts.link_to.replace(/__id__/,page_id));
+				}
+				if(appendopts.classes){lnk.addClass(appendopts.classes);}
+				var l = $("<li " + classes + "></li>").append(lnk);
+				panel.append(l);
+			}
+			// Generate "Previous"-Link
+			if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
+				appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
+			}
+			// Generate starting points
+			if (interval[0] > 0 && opts.num_edge_entries > 0)
+			{
+				var end = Math.min(opts.num_edge_entries, interval[0]);
+				for(var i=0; i<end; i++) {
+					appendItem(i);
+				}
+				if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
+				{
+					jQuery("<li><span>"+opts.ellipse_text+"</span></li>").appendTo(panel);
+				}
+			}
+			// Generate interval links
+			for(var i=interval[0]; i<interval[1]; i++) {
+				appendItem(i);
+			}
+			// Generate ending points
+			if (interval[1] < np && opts.num_edge_entries > 0)
+			{
+				if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
+				{
+					jQuery("<li><span>"+opts.ellipse_text+"</span></li>").appendTo(panel);
+				}
+				var begin = Math.max(np-opts.num_edge_entries, interval[1]);
+				for(var i=begin; i<np; i++) {
+					appendItem(i);
+				}
+				
+			}
+			// Generate "Next"-Link
+			if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
+				appendItem(current_page+1,{text:opts.next_text, classes:"next"});
+			}
+		}
+		
+		// Extract current_page from options
+		var current_page = opts.current_page;
+		// Create a sane value for maxentries and items_per_page
+		maxentries = (!maxentries || maxentries < 0)?1:maxentries;
+		opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
+		// Store DOM element for easy access from all inner functions
+		var panel = jQuery(this);
+		// Attach control functions to the DOM element 
+		this.selectPage = function(page_id){ pageSelected(page_id);}
+		this.prevPage = function(){ 
+			if (current_page > 0) {
+				pageSelected(current_page - 1);
+				return true;
+			}
+			else {
+				return false;
+			}
+		}
+		this.nextPage = function(){ 
+			if(current_page < numPages()-1) {
+				pageSelected(current_page+1);
+				return true;
+			}
+			else {
+				return false;
+			}
+		}
+		// When all initialisation is done, draw the links
+		drawLinks();
+        // call callback function
+        // opts.callback(current_page, this);
+	});
+}
+
+