diff --git a/src/components/BackToTop.js b/src/components/BackToTop.js
index fe9bdf17..c327308f 100644
--- a/src/components/BackToTop.js
+++ b/src/components/BackToTop.js
@@ -25,7 +25,7 @@ function useScrollPosition() {
 export default function BackToTop() {
   const percent = useScrollPosition();
   return (
-    <a className="BackToTopLink" href="#top" title="Back To Top" percent={percent}>
+    <a className={`BackToTopLink ${percent > 0.25 ? 'Show' : ''}`} href="#top" title="Back To Top">
       &uarr;
     </a>
   );
diff --git a/src/styles.css b/src/styles.css
index 83bd1766..aeba56d6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -245,7 +245,6 @@ body::-webkit-scrollbar-thumb {
   position: fixed;
   bottom: 1%;
   right: 1%;
-  background: var(--pink);
   color: white;
   background: rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -255,11 +254,10 @@ body::-webkit-scrollbar-thumb {
   opacity: 0;
   text-decoration: none;
 
-  /* ${props =>
-    props.percent > 0.25 &&
-    `
+  &.Show {
     opacity: 1;
-  `} */
+  }
+
   @media screen and (max-width: 500px) {
     display: none;
   }