diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index d3f857b..961bce0 100755
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -3,7 +3,7 @@
         <div class="social-wrapper">
           <% (config.social||[]).forEach(function(value){ %>
               <% if (value.url && value.icon) { %>
-                  <a href="<%= value.url %>" class="social <%- value.icon %> flat-box" target="_blank" rel="external"></a>
+                  <a href="<%= value.url %>" class="social <%- value.icon %> flat-btn" target="_blank" rel="external"></a>
               <%}%>
           <%})%>
         </div>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index fe8fc76..49c6bca 100755
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -37,9 +37,9 @@
 		<div class='nav-sub container container--flex'>
 			<a class="logo flat-box"></a>
 			<ul class='switcher h-list'>
-				<li class='s-comment'><a class="fas fa-comments fa-fw" href='javascript:void(0)'></a></li>
-				<li class='s-top'><a class="fas fa-arrow-up fa-fw" href='javascript:void(0)'></a></li>
-				<li class='s-toc'><a class="fas fa-list fa-fw" href='javascript:void(0)'></a></li>
+				<li class='s-comment'><a class="flat-btn fas fa-comments fa-fw" href='javascript:void(0)'></a></li>
+				<li class='s-top'><a class="flat-btn fas fa-arrow-up fa-fw" href='javascript:void(0)'></a></li>
+				<li class='s-toc'><a class="flat-btn fas fa-list fa-fw" href='javascript:void(0)'></a></li>
 			</ul>
 		</div>
 	</div>
@@ -51,7 +51,7 @@
           <% if (config.nav_menu) { %>
               <% (config.nav_menu || []).forEach(function(value){ %>
                   <li>
-										<a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>" class="nav flat-box" href="<%= url_for(value.url) %>">
+										<a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>" class="nav flat-btn" href="<%= url_for(value.url) %>">
 											<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
 										</a>
                   </li>
diff --git a/layout/_widget/author.ejs b/layout/_widget/author.ejs
index 55f50e7..a2f4d15 100755
--- a/layout/_widget/author.ejs
+++ b/layout/_widget/author.ejs
@@ -19,7 +19,7 @@
       <div class="social-wrapper">
         <% (config.social||[]).forEach(function(value){ %>
           <% if (value.url && value.icon) { %>
-            <a href="<%= value.url %>" class="social flat-box" target="_blank" rel="external"><i class="social <%= value.icon %>" aria-hidden="true"></i></a>
+            <a href="<%= value.url %>" class="social flat-btn" target="_blank" rel="external"><i class="social <%= value.icon %>" aria-hidden="true"></i></a>
           <%}%>
         <%})%>
       </div>
diff --git a/source/less/_main.less b/source/less/_main.less
index 167087b..bce0707 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -316,12 +316,14 @@
                   .fa-spinner{
                     color: @color_text_in_header;
                   }
+                  border-left-width: 30px;
+                  padding-right: 10px;
                 }
                 i{
-                  width: 24px;
+                  width: 28px;
                   line-height: 24px;
                   color: @color_text_in_header;
-                  margin-left: -26px;
+                  margin-left: -28px;
                 }
                 a{
                     color: fade(@color_text_main, 70%);
@@ -331,7 +333,7 @@
                         color: @color_text_in_header;
                     }
                     &:active {
-                        color: darken(@color_text_highlight, 25%);
+                        // color: darken(@color_text_highlight, 25%);
                     }
                 }
                 .categories {