diff --git a/bootstyle/article.ftl b/bootstyle/article.ftl
index 5a01b07..473c1c2 100644
--- a/bootstyle/article.ftl
+++ b/bootstyle/article.ftl
@@ -1,4 +1,5 @@
 <#include "macro-head.ftl">
+<#include "macro-comments.ftl">
 <!DOCTYPE html>
 <html>
     <head>
@@ -71,6 +72,7 @@
                 </div>
             </#if>
             </div>
+            <@comments commentList=articleComments article=article></@comments>
         </div>
         <aside id="sidebar" class="span4" role="complementary">
         <#include "side.ftl">
@@ -78,5 +80,17 @@
     </div>
 </div>
 <#include "footer.ftl">
+<@comment_script oId=article.oId>
+page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
+    <#if 0 != randomArticlesDisplayCount>
+    page.loadRandomArticles('<h4 class="ft-gray">${randomArticlesLabel}</h4>');
+    </#if>
+    <#if 0 != relevantArticlesDisplayCount>
+    page.loadRelevantArticles('${article.oId}', '<h4 class="ft-gray">${relevantArticlesLabel}</h4>');
+    </#if>
+    <#if 0 != externalRelevantArticlesDisplayCount>
+    page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>");
+    </#if>
+</@comment_script>
 </body>
 </html>
diff --git a/bootstyle/css/bootstyle.css b/bootstyle/css/bootstyle.css
index 32e6801..5b25f04 100644
--- a/bootstyle/css/bootstyle.css
+++ b/bootstyle/css/bootstyle.css
@@ -2,44 +2,156 @@ body.top-navbar {
     padding-top: 60px;
 }
 
-a:hover{
-    text-decoration:none;
+a:hover {
+    text-decoration: none;
     color: #00B;
 }
 
-.page-header a{
+.page-header a {
     color: #000000;
 }
-.page-header a:hover{
+
+.page-header a:hover {
     color: #9A9A9A;
 }
 
-.page-header-m{
+.page-header-m {
     margin: 20px 0px 5px;
 }
 
-.page-header-bottom{
+.page-header-bottom {
     margin: 0px 0px 5px;
     font-size: 12px;
     color: #585858;
 }
 
-.article-tags{
+.article-tags {
     color: #676767;
     font-size: 12px;
 }
 
-.article-tags a{
+.article-tags a {
     text-decoration: none;
 }
 
-#footer{
+#footer {
     margin-top: 20px;
 }
-#footer .container{
+
+#footer .container {
     padding: 10px 15px 10px;
 }
 
-.pagination-btn{
+.pagination-btn {
     margin-top: 20px;
+}
+
+/* emotions */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../images/emotions/emotions-ease.png");
+    float: left;
+    height: 24px;
+    margin-right: 5px;
+    width: 24px;
+    transition: all .2s ease-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+}
+
+#emotions span:hover {
+    transform: scale(1.2) rotate(360deg);
+    -webkit-transform: scale(1.2) rotate(360deg);
+    -moz-transform: scale(1.2) rotate(360deg);
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+.em02 {
+    background-position: -48px 0;
+}
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 1px;
+}
+.em05 {
+    background-position: 0 -24px;
+}
+.em06 {
+    background-position: -24px -24px;
+}
+.em07 {
+    background-position: -48px -24px;
+}
+.em08 {
+    background-position: -72px -24px;
+}
+.em09 {
+    background-position: -96px -24px;
+}
+.em10 {
+    background-position: 0 -48px;
+}
+.em11 {
+    background-position: -24px -48px ;
+}
+.em12 {
+    background-position: -48px -48px;
+}
+.em13 {
+    background-position: -72px -48px;
+}
+.em14 {
+    background-position: -96px -48px;
+}
+/* emotions */
+
+.form-actions-m{
+    padding-left: 0px !important;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+}
+
+.article-relative {
+    background-color: #FCFCFC;
+    box-shadow: 0 0 2px #D5D5D5;
+    padding: 5px 0 5px 20px;
+}
+.article-relative:hover {
+    background-color: #fff;
+    box-shadow: 0 0 4px #D5D5D5;
+}
+
+.article-relative ul {
+    list-style: none;
+}
+
+.article-comments{
+    margin-bottom: 20px;
+}
+
+.bs-docs-example {
+    position: relative;
+    padding: 20px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.bs-docs-example-child {
+    position: relative;
+    padding: 5px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
 }
\ No newline at end of file
diff --git a/bootstyle/footer.ftl b/bootstyle/footer.ftl
index 386c1bf..e0f898b 100644
--- a/bootstyle/footer.ftl
+++ b/bootstyle/footer.ftl
@@ -2,28 +2,28 @@
     <div class="navbar-inner">
         <div class="container">
             <div class="pull-left">
-                <span class="ft-gray">&copy; ${year}</span> - <a href="${servePath}">${blogTitle}</a>
+                <span>&copy; ${year}</span> - <a href="${servePath}">${blogTitle}</a>
                 Powered by
                 <a href="http://b3log.org" target="_blank" class="logo">
                 ${b3logLabel}&nbsp;
                     <span style="color: orangered; font-weight: bold;">Solo</span></a>,
                 ver ${version}&nbsp;&nbsp;
-                Theme by <a rel="friend" rel="friend" href="http://vanessa.b3log.org" target="_blank">Vanessa</a>.
+                Theme by <a rel="friend" rel="friend" href="http://www.oncereply.me" target="_blank">oncereply</a>.
             </div>
             <div class="pull-right">
                 <div class="pull-left">
                 ${viewCount1Label}
-                    <span class="ft-gray">
+                    <span>
                     ${statistic.statisticBlogViewCount}
                     </span>
                     &nbsp;&nbsp;
                 ${articleCount1Label}
-                    <span class="ft-gray">
+                    <span>
                     ${statistic.statisticPublishedBlogArticleCount}
                     </span>
                     &nbsp;&nbsp;
                 ${commentCount1Label}
-                    <span class="ft-gray">
+                    <span>
                     ${statistic.statisticPublishedBlogCommentCount}
                     </span>
                 </div>
diff --git a/bootstyle/header.ftl b/bootstyle/header.ftl
index 5f6cc71..a5cfcde 100644
--- a/bootstyle/header.ftl
+++ b/bootstyle/header.ftl
@@ -13,18 +13,12 @@
                     <#list pageNavigations as page>
                     <li><a href="${page.pagePermalink}" target="${page.pageOpenTarget}">${page.pageTitle}</a></li>
                     </#list>
-                    <li>
-                        <a href="${servePath}/dynamic.html">${dynamicLabel}</a>
-                    </li>
                     <li>
                         <a href="${servePath}/tags.html">${allTagsLabel}</a>
                     </li>
                     <li>
                         <a href="${servePath}/archives.html">${archiveLabel}</a>
                     </li>
-                    <li>
-                        <a href="${servePath}/links.html">${linkLabel}</a>
-                    </li>
                     <li>
                         <a rel="alternate" href="${servePath}/blog-articles-feed.do">Atom<img src="${staticServePath}/images/feed.png" alt="Atom"/></a>
                     </li>
diff --git a/bootstyle/macro-comments.ftl b/bootstyle/macro-comments.ftl
index 18e506c..2d89516 100644
--- a/bootstyle/macro-comments.ftl
+++ b/bootstyle/macro-comments.ftl
@@ -1,103 +1,126 @@
 <#macro comments commentList article>
-<div id="comments">
+<!-- comments -->
+<div id="comments" class="comments article-comments">
     <#list commentList as comment>
-    <div id="${comment.oId}">
-        <img class="comment-header" title="${comment.commentName}"
-             alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
-        <div class="comment-panel">
-            <div class="left">
-                <#if "http://" == comment.commentURL>
-                <a>${comment.commentName}</a>
-                <#else>
-                <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
-                </#if>
-                <#if comment.isReply>@
-                <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
-                   onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
-                   onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
-                </#if>
-            </div>
-            <#if article.commentable>
-            <div class="right  ft-gray">
-                ${comment.commentDate?string("yy-MM-dd HH:mm")}
-                <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">${replyLabel}</a>
-            </div>
+        <div class="media bs-docs-example-child" id="${comment.oId}">
+            <#if "http://" == comment.commentURL>
+                <a class="pull-left" title="${comment.commentName}"><img class="media-object img-polaroid" data-src="holder.js/64x64" style="width: 64px; height: 64px;" src="${comment.commentThumbnailURL}"></a>
+            <#else>
+                <a class="pull-left" href="${comment.commentURL}" target="_blank"><img class="media-object img-polaroid" data-src="holder.js/64x64" style="width: 64px; height: 64px;" src="${comment.commentThumbnailURL}"></a>
             </#if>
-            <span class="clear"></span>
-            <div class="article-body">${comment.commentContent}</div>
+            <div class="media-body">
+                <h4 class="media-heading">
+                    <#if "http://" == comment.commentURL>
+                        <a>${comment.commentName}</a>
+                    <#else>
+                        <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                    </#if>
+                </h4>
+                ${comment.commentContent}
+                <!-- Nested media object -->
+                <#if comment.isReply>
+                <div class="media">
+                    <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                       onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+                       onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+                </div>
+                </#if>
+            </div>
         </div>
-        <span class="clear"></span>
-    </div>
     </#list>
 </div>
+
+<!-- Leave a comment -->
 <#if article.commentable>
-<div class="form">
-    <table id="commentForm">
-        <tbody>
-            <tr>
-                <td colspan="2">
-                    <input type="text" class="normalInput" id="commentName"/>
-                    <label for="commentName">${commentNameLabel}</label>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <input type="text" class="normalInput" id="commentEmail"/>
-                    <label for="commentEmail">${commentEmailLabel}</label>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <input type="text" id="commentURL"/>
-                    <label for="commentURL">${commentURLLabel}</label>
-                </td>
-            </tr>
-            <tr>
-                <td id="emotions" colspan="2">
-                    <span class="em00" title="${em00Label}"></span>
-                    <span class="em01" title="${em01Label}"></span>
-                    <span class="em02" title="${em02Label}"></span>
-                    <span class="em03" title="${em03Label}"></span>
-                    <span class="em04" title="${em04Label}"></span>
-                    <span class="em05" title="${em05Label}"></span>
-                    <span class="em06" title="${em06Label}"></span>
-                    <span class="em07" title="${em07Label}"></span>
-                    <span class="em08" title="${em08Label}"></span>
-                    <span class="em09" title="${em09Label}"></span>
-                    <span class="em10" title="${em10Label}"></span>
-                    <span class="em11" title="${em11Label}"></span>
-                    <span class="em12" title="${em12Label}"></span>
-                    <span class="em13" title="${em13Label}"></span>
-                    <span class="em14" title="${em14Label}"></span>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <textarea rows="10" cols="96" id="comment"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <input type="text" class="normalInput" id="commentValidate"/>
-                    <img id="captcha" alt="validate" src="${servePath}/captcha.do" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="ft-gray" id="commentErrorTip"></span>
-                </td>
-                <td align="right">
-                    <button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>
+<form class="well form-horizontal">
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-user"></i></span>
+            <input type="text" id="commentName" placeholder="${commentNameLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-envelope"></i></span>
+            <input type="text" id="commentEmail" placeholder="${commentEmailLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-globe"></i></span>
+            <input type="text" id="commentURL" placeholder="${commentURLLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <span id="emotions">
+            <span class="em00" title="${em00Label}"></span>
+            <span class="em01" title="${em01Label}"></span>
+            <span class="em02" title="${em02Label}"></span>
+            <span class="em03" title="${em03Label}"></span>
+            <span class="em04" title="${em04Label}"></span>
+            <span class="em05" title="${em05Label}"></span>
+            <span class="em06" title="${em06Label}"></span>
+            <span class="em07" title="${em07Label}"></span>
+            <span class="em08" title="${em08Label}"></span>
+            <span class="em09" title="${em09Label}"></span>
+            <span class="em10" title="${em10Label}"></span>
+            <span class="em11" title="${em11Label}"></span>
+            <span class="em12" title="${em12Label}"></span>
+            <span class="em13" title="${em13Label}"></span>
+            <span class="em14" title="${em14Label}"></span>
+        </span>
+        <div>
+            <textarea rows="7" cols="96" id="comment" class="input-block-level"></textarea>
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-check"></i></span>
+            <input type="text" id="commentValidate"/>
+            <img id="captcha" alt="validate" src="${servePath}/captcha.do" class="img-polaroid" style="margin-left: 5px;" />
+        </div>
+    </div>
+    <div class="form-actions form-actions-m pagination-right">
+        <span class="pull-left text-error" id="commentErrorTip"></span>
+        <button id="submitCommentButton" type="button" onclick="page.submitComment();" class="btn btn-primary">${submmitCommentLabel}</button>
+    </div>
+</form>
 <#if externalRelevantArticlesDisplayCount?? && 0 != externalRelevantArticlesDisplayCount>
 <div id="externalRelevantArticles" class="article-relative"></div>
 </#if>
-<span class="clear"></span>
 </#if>
+
+<div id="comments">
+    <#list commentList as comment>
+        <div id="${comment.oId}">
+            <img class="comment-header" title="${comment.commentName}"
+                 alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
+            <div class="comment-panel">
+                <div class="left">
+                    <#if "http://" == comment.commentURL>
+                        <a>${comment.commentName}</a>
+                    <#else>
+                        <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                    </#if>
+                    <#if comment.isReply>@
+                        <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                           onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+                           onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+                    </#if>
+                </div>
+                <#if article.commentable>
+                    <div class="right  ft-gray">
+                    ${comment.commentDate?string("yy-MM-dd HH:mm")}
+                        <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">${replyLabel}</a>
+                    </div>
+                </#if>
+                <span class="clear"></span>
+                <div class="article-body">${comment.commentContent}</div>
+            </div>
+            <span class="clear"></span>
+        </div>
+    </#list>
+</div>
 </#macro>
 
 <#macro comment_script oId>
@@ -120,7 +143,7 @@
 
     var addComment = function (result, state) {
         var commentHTML = '<div id="' + result.oId + '"><img class="comment-header" \
-            title="' + $("#commentName" + state).val() + '" alt="' + $("#commentName" + state).val() + 
+            title="' + $("#commentName" + state).val() + '" alt="' + $("#commentName" + state).val() +
             '" src="' + result.commentThumbnailURL + '"/><div class="comment-panel"><div class="left">' + result.replyNameHTML;
 
         if (state !== "") {
@@ -129,10 +152,10 @@
                 + 'onmouseover="page.showComment(this, \'' + page.currentCommentId + '\', 20);"'
                 + 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>';
         }
-            
+
         commentHTML += '</div><div class="right ft-gray">' +  result.commentDate.substring(2, 16)
-            + '&nbsp;<a rel="nofollow" href="javascript:replyTo(\'' + result.oId 
-            + '\');">${replyLabel}</a></div><span class="clear"></span><div class="article-body">' + 
+            + '&nbsp;<a rel="nofollow" href="javascript:replyTo(\'' + result.oId
+            + '\');">${replyLabel}</a></div><span class="clear"></span><div class="article-body">' +
             Util.replaceEmString($("#comment" + state).val().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g,"<br/>"))
             + '</div></div><span class="clear"></span></div>';
 
