diff --git a/docs/index.html b/docs/index.html
index 1047cd0..71b1400 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -66,7 +66,7 @@
 
       <div class="container">
         <main class="main-content">
-          <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" rel="noopener" @mouseover="startAnimate" @mouseout="stopAnimate">
+          <a class="github-link" :class="{ active:  scrollPos < 200 }" href="https://github.com/nostalgic-css/NES.css" target="_blank" rel="noopener" @mouseover="startAnimate" @mouseout="stopAnimate">
             <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
             <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
           </a>
@@ -199,7 +199,7 @@
         </div>
 
         <!-- FAB Button -->
-        <button type="button" class="nes-btn is-error scroll-btn" v-show="scrollPos > 500" @click="toTop"><span>&lt;</span></button>
+        <button type="button" class="nes-btn is-error scroll-btn" :class="{ active: scrollPos > 500 }" @click="toTop"><span>&lt;</span></button>
       </div>
     </div>
   </body>
diff --git a/docs/style.css b/docs/style.css
index 1204e98..589487e 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -96,13 +96,17 @@ h2 > a {
 /* github link */
 .github-link {
   position: fixed;
-  top: 10px;
-  right: 10px;
+  top: 100px;
+  right: -240px;
   z-index: 999;
   display: flex;
   height: 100px;
   color: #333;
   text-decoration: none;
+  transition: all 0.3s ease;
+}
+.github-link.active {
+  right: 10px;
 }
 .github-link:hover {
   text-decoration: none;
@@ -269,9 +273,13 @@ h3.topic-title > i {
 /* Scroll back to top */
 .scroll-btn {
   position: fixed;
-  bottom: 2rem;
+  bottom: -60px;
   right: 2rem;
   box-shadow: 0 5px 20px rgba(0,0,0,.6);
+  transition: all 0.3s ease;
+}
+.scroll-btn.active {
+  bottom: 25px;
 }
 .scroll-btn > span {
   display: block;