diff --git a/layout/common/sidebar.ejs b/layout/common/sidebar.ejs
index eaf232e..ba38c79 100644
--- a/layout/common/sidebar.ejs
+++ b/layout/common/sidebar.ejs
@@ -1,6 +1,6 @@
 <aside id="sidebar">
-    <% theme.widgets.forEach(function(widget) { %>
+   <% theme.widgets.forEach(function(widget) { %>
         <%- partial('widget/' + widget) %>
     <% }) %>
-    <div id="toTop" class="fa fa-chevron-up"></div>
+    <div id="toTop" class="fa fa-angle-up"></div>
 </aside>
\ No newline at end of file
diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
index 31afce0..bd5181f 100644
--- a/source/css/_partial/sidebar.styl
+++ b/source/css/_partial/sidebar.styl
@@ -84,28 +84,30 @@
 
 #toTop
     @extend $block
+    display: none
     cursor: pointer
     text-align: center
-    width: 64px
-    height: 64px
+    width: 60px
+    height: 60px
     color: white
-    font-size: 32px
-    line-height: 64px
+    font-size: 50px
+    line-height: 55px
     background: color-default
+    opacity: 0.8
     border-radius: 4px
+    bottom: 20px
+    position: fixed
     @media mq-mobile
-        width: 54px
-        height: 54px
-        font-size: 28px
-        line-height: 54px
+        width: 52px
+        height: 52px
+        font-size: 34px
+        line-height: 52px
     @media mq-mini
-        width: 54px
-        height: 54px
-        font-size: 28px
-        line-height: 54px
-    &.fix
-        bottom: 20px
-        position: fixed
+        width: 48px
+        height: 48px
+        font-size: 32px
+        line-height: 48px
+   
 
 #recent-post
     li
diff --git a/source/js/main.js b/source/js/main.js
index bb38c99..04a338b 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,6 +1,5 @@
 (function($){
-    var toTop = $('#toTop').length ? $('#toTop').offset().top - $(window).height() + 20 : 0;
-
+    var toTop = ($('#sidebar').height() - $(window).height()) + 60;
     // Caption
     $('.article-entry').each(function(i){
         $(this).find('img').each(function(){
@@ -36,14 +35,14 @@
     // To Top
     $(document).on('scroll', function () {
         if ($(document).width() >= 800) {
-            if($(this).scrollTop() > toTop) {
-                $('#toTop').addClass('fix');
+            if(($(this).scrollTop() > toTop) && ($(this).scrollTop() > 0)) {    
+                $('#toTop').fadeIn();
                 $('#toTop').css('left', $('#sidebar').offset().left);
             } else {
-                $('#toTop').removeClass('fix');
+                $('#toTop').fadeOut();
             }
         } else {
-            $('#toTop').addClass('fix');
+            $('#toTop').fadeIn();
             $('#toTop').css('right', 20);
         }
     }).on('click', '#toTop', function () {