diff --git a/src/main/resources/static/halo-backend/css/style.css b/src/main/resources/static/halo-backend/css/style.css
index 0f81e1a45..64bbd184c 100644
--- a/src/main/resources/static/halo-backend/css/style.css
+++ b/src/main/resources/static/halo-backend/css/style.css
@@ -173,3 +173,29 @@
 .editor-preview-active img,.editor-preview-active-side img{
     width: 100%!important;
 }
+
+/** subbutton */
+.subbutton{
+    list-style: none;
+    padding: 0;
+    font-size: 14px;
+    float: left;
+    color: #666;
+}
+
+.subbutton li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.subbutton a {
+    line-height: 2;
+    padding: .2em;
+    text-decoration: none;
+}
+
+.subbutton a.current {
+    color: #000;
+}
diff --git a/src/main/resources/static/halo-backend/css/style.min.css b/src/main/resources/static/halo-backend/css/style.min.css
index 0d6ab641d..b7278c7c6 100644
--- a/src/main/resources/static/halo-backend/css/style.min.css
+++ b/src/main/resources/static/halo-backend/css/style.min.css
@@ -1 +1 @@
-.skin-blue .box.box-primary{border-top-color:#fff}.skin-blue .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-blue-light .box.box-primary{border-top-color:#fff}.skin-blue-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-black .box.box-primary{border-top-color:#fff}.skin-black .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-black-light .box.box-primary{border-top-color:#fff}.skin-black-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-green .box.box-primary{border-top-color:#fff}.skin-green .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-green-light .box.box-primary{border-top-color:#fff}.skin-green-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-purple .box.box-primary{border-top-color:#fff}.skin-purple .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-purple-light .box.box-primary{border-top-color:#fff}.skin-purple-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-red .box.box-primary{border-top-color:#fff}.skin-red .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-red-light .box.box-primary{border-top-color:#fff}.skin-red-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-yellow .box.box-primary{border-top-color:#fff}.skin-yellow .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-yellow-light .box.box-primary{border-top-color:#fff}.skin-yellow-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.layout-boxed{background:url('../images/boxed-bg.jpg') repeat fixed}::-webkit-scrollbar{width:2px;height:2px;background-color:#eee}::-webkit-scrollbar-thumb{background-color:#d0afaf}::-webkit-scrollbar-track{background-color:#eee}.btn-header{margin-left:4px;padding:3px 6px;position:relative;top:-4px;border:1px solid #ccc;border-radius:2px;background:#fff;text-shadow:none;font-weight:600;font-size:12px;line-height:normal;color:#3c8dbc;cursor:pointer;transition:all .2s ease-in-out}.btn-header:hover{background:#3c8dbc;color:#fff}.table-responsive{border:none!important}.table-bordered{border:none!important}.box{border-top:none!important}.form-horizontal .control-label{text-align:left!important}.control-radio{padding-top:7px!important}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:none!important}.CodeMirror-fullscreen,.editor-toolbar.fullscreen{z-index:1030!important}.CodeMirror,.CodeMirror-scroll{min-height:480px!important}.editor-preview-active img,.editor-preview-active-side img{width:100%!important}
\ No newline at end of file
+.skin-blue .box.box-primary{border-top-color:#fff}.skin-blue .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-blue-light .box.box-primary{border-top-color:#fff}.skin-blue-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-black .box.box-primary{border-top-color:#fff}.skin-black .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-black-light .box.box-primary{border-top-color:#fff}.skin-black-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-green .box.box-primary{border-top-color:#fff}.skin-green .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-green-light .box.box-primary{border-top-color:#fff}.skin-green-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-purple .box.box-primary{border-top-color:#fff}.skin-purple .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-purple-light .box.box-primary{border-top-color:#fff}.skin-purple-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-red .box.box-primary{border-top-color:#fff}.skin-red .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-red-light .box.box-primary{border-top-color:#fff}.skin-red-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-yellow .box.box-primary{border-top-color:#fff}.skin-yellow .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.skin-yellow-light .box.box-primary{border-top-color:#fff}.skin-yellow-light .nav-tabs-custom>.nav-tabs>li.active{border-top-color:#fff}.layout-boxed{background:url('../images/boxed-bg.jpg') repeat fixed}::-webkit-scrollbar{width:2px;height:2px;background-color:#eee}::-webkit-scrollbar-thumb{background-color:#d0afaf}::-webkit-scrollbar-track{background-color:#eee}.btn-header{margin-left:4px;padding:3px 6px;position:relative;top:-4px;border:1px solid #ccc;border-radius:2px;background:#fff;text-shadow:none;font-weight:600;font-size:12px;line-height:normal;color:#3c8dbc;cursor:pointer;transition:all .2s ease-in-out}.btn-header:hover{background:#3c8dbc;color:#fff}.table-responsive{border:none!important}.table-bordered{border:none!important}.box{border-top:none!important}.form-horizontal .control-label{text-align:left!important}.control-radio{padding-top:7px!important}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:none!important}.CodeMirror-fullscreen,.editor-toolbar.fullscreen{z-index:1030!important}.CodeMirror,.CodeMirror-scroll{min-height:480px!important}.editor-preview-active img,.editor-preview-active-side img{width:100%!important}.subbutton{list-style:none;padding:0;font-size:14px;float:left;color:#666}.subbutton li{display:inline-block;margin:0;padding:0;white-space:nowrap}.subbutton a{line-height:2;padding:.2em;text-decoration:none}.subbutton a.current{color:#000}
\ No newline at end of file
diff --git a/src/main/resources/templates/admin/admin_backup.ftl b/src/main/resources/templates/admin/admin_backup.ftl
index d0697efe0..5b25dcca5 100644
--- a/src/main/resources/templates/admin/admin_backup.ftl
+++ b/src/main/resources/templates/admin/admin_backup.ftl
@@ -2,9 +2,6 @@
 <#include "module/_macro.ftl">
 <@head>${options.blog_title!} | <@spring.message code='admin.backup.title' /></@head>
 <div class="content-wrapper">
-    <style type="text/css" rel="stylesheet">
-        .resourceType,.databaseType,.postType{list-style:none;float:left;margin:0;padding-bottom:10px}
-    </style>
     <section class="content-header" id="animated-header">
         <h1 style="display: inline-block;"><@spring.message code='admin.backup.title' /></h1>
         <ol class="breadcrumb">
@@ -18,18 +15,26 @@
     <section class="content container-fluid" id="animated-content">
         <div class="row">
             <div class="col-xs-12">
-                <ul style="list-style: none;padding-left: 0">
-                    <li class="resourceType">
-                        <a data-pjax="true" href="/admin/backup?type=resources" <#if type=='resources'>style="color: #000" </#if>><@spring.message code='admin.backup.item.resources' /></a>&nbsp;|&nbsp;
+                <ul class="subbutton">
+                    <li class="resources">
+                        <a data-pjax="true" href="/admin/backup?type=resources" <#if type=='resources'>class="current"</#if>>
+                            <@spring.message code='admin.backup.item.resources' />
+                        </a> |
                     </li>
-                    <li class="databaseType">
-                        <a data-pjax="true" href="/admin/backup?type=databases" <#if type=='databases'>style="color: #000" </#if>><@spring.message code='admin.backup.item.database' /></a>&nbsp;|&nbsp;
+                    <li class="databases">
+                        <a data-pjax="true" href="/admin/backup?type=databases" <#if type=='databases'>class="current"</#if>>
+                            <@spring.message code='admin.backup.item.database' />
+                        </a> |
                     </li>
-                    <li class="postType">
-                        <a data-pjax="true" href="/admin/backup?type=posts" <#if type=='posts'>style="color: #000" </#if>><@spring.message code='admin.backup.item.posts' /></a>
+                    <li class="posts">
+                        <a data-pjax="true" href="/admin/backup?type=posts" <#if type=='posts'>class="current"</#if>>
+                            <@spring.message code='admin.backup.item.posts' />
+                        </a>
                     </li>
                 </ul>
             </div>
+        </div>
+        <div class="row">
             <div class="col-xs-12">
                 <div class="box box-primary">
                     <div class="box-body table-responsive no-padding">
diff --git a/src/main/resources/templates/admin/admin_comment.ftl b/src/main/resources/templates/admin/admin_comment.ftl
index b7a20d7b5..73126b5aa 100755
--- a/src/main/resources/templates/admin/admin_comment.ftl
+++ b/src/main/resources/templates/admin/admin_comment.ftl
@@ -3,9 +3,6 @@
 <@head>${options.blog_title!} | <@spring.message code='admin.comments.title' /></@head>
 <div class="content-wrapper">
     <link rel="stylesheet" href="/static/halo-common/OwO/OwO.min.css">
-    <style type="text/css" rel="stylesheet">
-        .draft,.publish,.trash{list-style:none;float:left;margin:0;padding-bottom:10px}s
-    </style>
     <section class="content-header" id="animated-header">
         <h1><@spring.message code='admin.comments.title' /><small></small></h1>
         <ol class="breadcrumb">
@@ -16,17 +13,27 @@
         </ol>
     </section>
     <section class="content container-fluid" id="animated-content">
-        <ul style="list-style: none;padding-left: 0">
-            <li class="publish">
-                <a data-pjax="true" href="/admin/comments" <#if status==0>style="color: #000" </#if>><@spring.message code='common.status.published' /><span class="count">(${publicCount})</span></a>&nbsp;|&nbsp;
-            </li>
-            <li class="draft">
-                <a data-pjax="true" href="/admin/comments?status=1" <#if status==1>style="color: #000" </#if>><@spring.message code='common.status.checking' /><span class="count">(${checkCount})</span></a>&nbsp;|&nbsp;
-            </li>
-            <li class="trash">
-                <a data-pjax="true" href="/admin/comments?status=2" <#if status==2>style="color: #000" </#if>><@spring.message code='common.status.recycle-bin' /><span class="count">(${trashCount})</span></a>
-            </li>
-        </ul>
+        <div class="row">
+            <div class="col-xs-12">
+                <ul class="subbutton">
+                    <li class="public">
+                        <a data-pjax="true" href="/admin/comments" <#if status==0>class="current"</#if>>
+                            <@spring.message code='common.status.published' /><span class="count">(${publicCount})</span>
+                        </a> |
+                    </li>
+                    <li class="checking">
+                        <a data-pjax="true" href="/admin/comments?status=1" <#if status==1>class="current"</#if>>
+                            <@spring.message code='common.status.checking' /><span class="count">(${checkCount})</span>
+                        </a> |
+                    </li>
+                    <li class="trash">
+                        <a data-pjax="true" href="/admin/comments?status=2" <#if status==2>class="current"</#if>>
+                            <@spring.message code='common.status.recycle-bin' /><span class="count">(${trashCount})</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
         <div class="row">
             <div class="col-xs-12">
                 <div class="box box-primary">
diff --git a/src/main/resources/templates/admin/admin_post.ftl b/src/main/resources/templates/admin/admin_post.ftl
index fd281c988..d6ae84fe4 100755
--- a/src/main/resources/templates/admin/admin_post.ftl
+++ b/src/main/resources/templates/admin/admin_post.ftl
@@ -2,10 +2,6 @@
 <#include "module/_macro.ftl">
 <@head>${options.blog_title!} | <@spring.message code='admin.posts.title' /></@head>
 <div class="content-wrapper">
-    <style type="text/css" rel="stylesheet">
-        .draft,.publish,.trash{list-style:none;float:left;margin:0;padding-bottom:10px}
-        .pretty{margin: 0;}
-    </style>
     <section class="content-header" id="animated-header">
         <h1 style="display: inline-block;"><@spring.message code='admin.posts.title' /></h1>
         <a data-pjax="true" class="btn-header" id="btnNewPost" href="/admin/posts/write">
@@ -24,15 +20,21 @@
     <section class="content container-fluid" id="animated-content">
         <div class="row">
             <div class="col-xs-12">
-                <ul style="list-style: none;padding-left: 0">
+                <ul class="subbutton">
                     <li class="publish">
-                        <a data-pjax="true" href="/admin/posts" <#if status==0>style="color: #000" </#if>><@spring.message code='common.status.published' /><span class="count">(${publishCount})</span></a>&nbsp;|&nbsp;
+                        <a data-pjax="true" href="/admin/posts" <#if status==0>class="current"</#if>>
+                            <@spring.message code='common.status.published' /><span class="count">(${publishCount})</span>
+                        </a> |
                     </li>
                     <li class="draft">
-                        <a data-pjax="true" href="/admin/posts?status=1" <#if status==1>style="color: #000" </#if>><@spring.message code='common.status.draft' /><span class="count">(${draftCount})</span></a>&nbsp;|&nbsp;
+                        <a data-pjax="true" href="/admin/posts?status=1" <#if status==1>class="current"</#if>>
+                            <@spring.message code='common.status.draft' /><span class="count">(${draftCount})</span>
+                        </a> |
                     </li>
                     <li class="trash">
-                        <a data-pjax="true" href="/admin/posts?status=2" <#if status==2>style="color: #000" </#if>><@spring.message code='common.status.recycle-bin' /><span class="count">(${trashCount})</span></a>
+                        <a data-pjax="true" href="/admin/posts?status=2" <#if status==2>class="current"</#if>>
+                            <@spring.message code='common.status.recycle-bin' /><span class="count">(${trashCount})</span>
+                        </a>
                     </li>
                 </ul>
             </div>