diff --git a/bootstyle/article-list.ftl b/bootstyle/article-list.ftl
index 6bca0f2..5ba5c57 100644
--- a/bootstyle/article-list.ftl
+++ b/bootstyle/article-list.ftl
@@ -1,57 +1,46 @@
-<ul>
-    <#list articles as article>
-    <li class="article<#if !article_has_next> article-last</#if>">
-        <div class="article-title">
-            <h2>
-                <a rel="bookmark" class="ft-gray" href="${servePath}${article.articlePermalink}">
-                    ${article.articleTitle}
-                </a>
-                <#if article.hasUpdated>
-                <sup>
-                    ${updatedLabel}
-                </sup>
-                </#if>
-                <#if article.articlePutTop>
-                <sup>
-                    ${topArticleLabel}
-                </sup>
-                </#if>
-            </h2>
-            <div class="right">
-                <a rel="nofollow" class="ft-gray" href="${servePath}${article.articlePermalink}#comments">
-                    ${article.articleCommentCount}&nbsp;&nbsp;${commentLabel}
-                </a>&nbsp;&nbsp;
-                <a rel="nofollow" class="ft-gray" href="${servePath}${article.articlePermalink}">
-                    ${article.articleViewCount}&nbsp;&nbsp;${viewLabel}
-                </a>
-            </div>
-            <div class="clear"></div>
-        </div>
-        <div class="article-body">
-            <div id="abstract${article.oId}">
-                ${article.articleAbstract}
-            </div>
-            <div id="content${article.oId}" class="none"></div>
-        </div>
-        <div class="right ft-gray">
-            <#if article.hasUpdated>
-            ${article.articleUpdateDate?string("yy-MM-dd HH:mm")}
-            <#else>
-            ${article.articleCreateDate?string("yy-MM-dd HH:mm")}
-            </#if>
-            <a rel="nofollow" href="${servePath}/authors/${article.authorId}">${article.authorName}</a>
-        </div>
-        <div class="left ft-gray">
-            ${tag1Label}
-            <#list article.articleTags?split(",") as articleTag>
-            <a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
-                ${articleTag}</a><#if articleTag_has_next>, </#if>
-            </#list>
-        </div>
-        <div class="clear"></div>
-    </li>
+<#list articles as article>
+<div class="page-header page-header-m">
+    <h3><a href="${article.articlePermalink}">${article.articleTitle}</a></h3>
+</div>
+<div class="page-header-bottom">
+    <span>
+        <li class="icon-time"></li>
+        <#if article.hasUpdated>
+        ${article.articleUpdateDate?string("yyyy-MM-dd HH:mm")}
+        <#else>
+        ${article.articleCreateDate?string("yyyy-MM-dd HH:mm")}
+        </#if>
+    </span>
+    <span>
+        <li class="icon-user"></li>
+        <a href="/authors/${article.authorId}" title="${authorLabel}: ${article.authorName}">
+            ${article.authorName}
+        </a>
+    </span>
+    <div class="pull-right">
+        <span>
+            <li class="icon-eye-open"></li>
+            <a href="${article.articlePermalink}">${article.articleViewCount} ${viewLabel}</a>
+        </span>
+        <span>
+            <li class="icon-comment"></li>
+            <a href="${article.articlePermalink}#comments">${article.articleCommentCount} ${commentLabel}</a>
+        </span>
+    </div>
+</div>
+${article.articleAbstract}
+<div class="article-tags">
+    <li class="icon-tags"></li>${tag1Label}
+    <#list article.articleTags?split(",") as articleTag>
+        <span>
+            <a href="${servePath}/tags/${articleTag?url('UTF-8')}">
+            ${articleTag}
+            </a>
+            <#if articleTag_has_next>,</#if>
+        </span>
     </#list>
-</ul>
+</div>
+</#list>
 <#if paginationCurrentPageNum != paginationPageCount && 0 != paginationPageCount>
-<div class="article-next ft-gray" onclick="getNextPage()" data-page="${paginationCurrentPageNum}">${moreLabel}</div>
+<div class="btn btn-block pagination-btn" onclick="getNextPage()" data-page="${paginationCurrentPageNum}">${moreLabel}</div>
 </#if>
\ No newline at end of file
diff --git a/bootstyle/author-articles.ftl b/bootstyle/author-articles.ftl
index dd62eea..2d08170 100644
--- a/bootstyle/author-articles.ftl
+++ b/bootstyle/author-articles.ftl
@@ -1,21 +1,24 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${authorName} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${authorName}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
-        </@head>
-    </head>
-    <body>
-        ${topBarReplacement}
-        <#include "header.ftl">
-        <div class="main">
-            <div class="wrapper">
-                <h2>${author1Label}${authorName}</h2>
-                <#include "article-list.ftl">
-            </div>
+<head>
+<@head title="${blogTitle}">
+    <meta name="keywords" content="${metaKeywords}"/>
+    <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body class="home page top-navbar">
+<#include "header.ftl">
+<div id="wrap" class="container" role="document">
+    <div id="content" class="row">
+        <div id="main" class="span8" role="main">
+        <#include "article-list.ftl">
         </div>
-        <#include "footer.ftl">
-    </body>
+        <aside id="sidebar" class="span4">
+        <#include "side.ftl">
+        </aside>
+    </div>
+</div>
+<#include "footer.ftl">
+</body>
 </html>
diff --git a/bootstyle/css/bootstyle.css b/bootstyle/css/bootstyle.css
index c93785e..32e6801 100644
--- a/bootstyle/css/bootstyle.css
+++ b/bootstyle/css/bootstyle.css
@@ -2,8 +2,16 @@ body.top-navbar {
     padding-top: 60px;
 }
 
-#sidebar a:hover{
+a:hover{
     text-decoration:none;
+    color: #00B;
+}
+
+.page-header a{
+    color: #000000;
+}
+.page-header a:hover{
+    color: #9A9A9A;
 }
 
 .page-header-m{
@@ -16,10 +24,6 @@ body.top-navbar {
     color: #585858;
 }
 
-.page-header-bottom a:hover{
-    text-decoration: none;
-}
-
 .article-tags{
     color: #676767;
     font-size: 12px;
@@ -29,6 +33,13 @@ body.top-navbar {
     text-decoration: none;
 }
 
+#footer{
+    margin-top: 20px;
+}
 #footer .container{
     padding: 10px 15px 10px;
+}
+
+.pagination-btn{
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/bootstyle/footer.ftl b/bootstyle/footer.ftl
index de10228..386c1bf 100644
--- a/bootstyle/footer.ftl
+++ b/bootstyle/footer.ftl
@@ -1,4 +1,4 @@
-<footer id="footer" role="banner">
+<footer id="footer">
     <div class="navbar-inner">
         <div class="container">
             <div class="pull-left">
diff --git a/bootstyle/index.ftl b/bootstyle/index.ftl
index e4c51a8..83b5a86 100644
--- a/bootstyle/index.ftl
+++ b/bootstyle/index.ftl
@@ -12,13 +12,9 @@
         <div id="wrap" class="container" role="document">
             <div id="content" class="row">
                 <div id="main" class="span8" role="main">
-                    <div class="page-header">
-                        <h1>
-                            Home  </h1>
-                    </div>  <div class="alert alert-info"><a href="http://www.rootstheme.com/">Back to Roots</a></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, orci ac laoreet cursus, dolor sem luctus lorem, eget consequat magna felis a magna. Aliquam scelerisque condimentum ante, eget facilisis tortor lobortis in. In interdum venenatis justo eget consequat. Morbi commodo rhoncus mi nec pharetra. Aliquam erat volutpat. Mauris non lorem eu dolor hendrerit dapibus. Mauris mollis nisl quis sapien posuere consectetur. Nullam in sapien at nisi ornare bibendum at ut lectus. Pellentesque ut magna mauris. Nam viverra suscipit ligula, sed accumsan enim placerat nec. Cras vitae metus vel dolor ultrices sagittis. Duis venenatis augue sed risus laoreet congue ac ac leo. Donec fermentum accumsan libero sit amet iaculis. Duis tristique dictum enim, ac fringilla risus bibendum in. Nunc ornare, quam sit amet ultricies gravida, tortor mi malesuada urna, quis commodo dui nibh in lacus. Nunc vel tortor mi. Pellentesque vel urna a arcu adipiscing imperdiet vitae sit amet neque. Integer eu lectus et nunc dictum sagittis. Curabitur commodo vulputate fringilla. Sed eleifend, arcu convallis adipiscing congue, dui turpis commodo magna, et vehicula sapien turpis sit amet nisi.</p>
+                    <#include "article-list.ftl">
                 </div>
-                <aside id="sidebar" class="span4" role="complementary">
+                <aside id="sidebar" class="span4">
                     <#include "side.ftl">
                 </aside>
             </div>
diff --git a/bootstyle/js/bootstyle.js b/bootstyle/js/bootstyle.js
index 025d4a3..189441d 100644
--- a/bootstyle/js/bootstyle.js
+++ b/bootstyle/js/bootstyle.js
@@ -1,9 +1,15 @@
 var bootstyle = {
-    setNavCurrent: function(){
+    getCurrentPage: function () {
+        var $next = $(".pagination-btn");
+        if ($next.length > 0) {
+            window.currentPage = $next.data("page");
+        }
+    },
+    setNavCurrent: function () {
         $(".nav li a").each(function () {
             var $this = $(this);
             var path1 = latkeConfig.servePath + location.pathname,
-                path2 = latkeConfig.servePath + location.pathname.substr(0,location.pathname.length-1);
+                path2 = latkeConfig.servePath + location.pathname.substr(0, location.pathname.length - 1);
             if ($this.attr("href") === path1 || $this.attr("href") === path2) {
                 $this.parent().addClass("active");
             } else if (/\/[0-9]+$/.test(location.pathname)) {
@@ -11,17 +17,94 @@ var bootstyle = {
             }
         });
     },
-    setCommentEmotions:function(){
+    setCommentEmotions: function () {
         // comments emotions
-        $(".comments").each(function(){
+        $(".comments").each(function () {
             $(this).html(Util.replaceEmString($(this).html()));
         });
     },
-    init:function(){
+    init: function () {
+        this.getCurrentPage();
         this.setNavCurrent();
         this.setCommentEmotions();
     }
 };
-$(function(){
+$(function () {
     bootstyle.init();
-})
\ No newline at end of file
+})
+
+var getNextPage = function () {
+    var $more = $(".pagination-btn");
+    currentPage += 1;
+    var path = "/articles/";
+    if (location.pathname.indexOf("tags") > -1) {
+        var tagsPathnaem = location.pathname.split("/tags/");
+        var tags = tagsPathnaem[1].split("/");
+        path = "/articles/tags/" + tags[0] + "/";
+    } else if (location.pathname.indexOf("archives") > -1) {
+        var archivesPathname = location.pathname.split("/archives/");
+        var archives = archivesPathname[1].split("/");
+        path = "/articles/archives/" + archives[0] + "/" + archives[1] + "/";
+    }
+
+    var nextLabel = '',btn_background = '';
+    $.ajax({
+        url: latkeConfig.servePath + path + currentPage,
+        type: "GET",
+        beforeSend: function () {
+            nextLabel = $more.text();
+            btn_background = $more.css('background');
+            $more.text('　').css("background",
+                "url(" + latkeConfig.staticServePath + "/skins/ease/images/ajax-loader.gif) no-repeat scroll center center #fefefe");
+        },
+        success: function (result, textStatus) {
+            var pagination = result.rslts.pagination;
+
+            for (var i = 0; i < result.rslts.articles.length; i++) {
+                var article = result.rslts.articles[i];
+                var articleHTML = new Array();
+                articleHTML.push('<div class="page-header page-header-m">');
+                articleHTML.push('<h3><a href="'+article.articlePermalink+'">'+article.articleTitle+'</a></h3>');
+                articleHTML.push('</div>');
+                articleHTML.push('<div class="page-header-bottom"><span>');
+                articleHTML.push('<li class="icon-time"></li>');
+                if (article.hasUpdated) {
+                    articleHTML.push(Util.toDate(article.articleUpdateDate, ' yyyy-MM-dd HH:mm '));
+                }else{
+                    articleHTML.push(Util.toDate(article.articleCreateDate, ' yyyy-MM-dd HH:mm '));
+                }
+                articleHTML.push('</span><span><li class="icon-user"></li>');
+                articleHTML.push('<a href="/authors/'+article.authorId+'" title="'+Label.authorLabel+': '+article.authorName+'"> ');
+                articleHTML.push(article.authorName);
+                articleHTML.push(' </a>');
+                articleHTML.push('</span><div class="pull-right"><span>');
+                articleHTML.push('<li class="icon-eye-open"></li>');
+                articleHTML.push('<a href="'+article.articlePermalink+'"> ');
+                articleHTML.push(article.articleViewCount+' '+Label.viewLabel);
+                articleHTML.push(' </a>');
+                articleHTML.push('</span><span><li class="icon-comment"></li>');
+                articleHTML.push('<a href="'+article.articlePermalink+'#comments"> '+article.articleCommentCount+' '+Label.commentLabel+' </a>');
+                articleHTML.push('</span></div></div>');
+                articleHTML.push(article.articleAbstract);
+                articleHTML.push('<div class="article-tags">');
+                articleHTML.push('<li class="icon-tags"></li>'+Label.tag1Label);
+                var articleTags = article.articleTags.split(',');
+                for(var j = 0;j < articleTags.length;j++){
+                    var articleTag = articleTags[j];
+                    articleHTML.push('<span>');
+                    articleHTML.push('<a href="'+latkeConfig.servePath+'/tags/'+articleTag+'">');
+                    articleHTML.push(articleTag);
+                    articleHTML.push('</a></span>');
+                }
+                articleHTML.push('</div>');
+                $more.before(articleHTML.join(''));
+            }
+
+            if (pagination.paginationPageCount === currentPage) {
+                $more.remove();
+            } else {
+                $more.text(nextLabel).css("background", '');
+            }
+        }
+    });
+};
\ No newline at end of file