diff --git a/src/components/ScrollDownArrow/index.tsx b/src/components/ScrollDownArrow/index.tsx
index 572f5dea..a6720b5c 100644
--- a/src/components/ScrollDownArrow/index.tsx
+++ b/src/components/ScrollDownArrow/index.tsx
@@ -11,10 +11,10 @@ const ScrollDownArrow = () => {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
-  return scrolled ? null : (
+  return (
     <img
-      className="arrow"
-      alt=""
+      className={`arrow ${scrolled ? 'hide' : 'show'}`}
+      alt="Scroll Arrow"
       onClick={() =>
         window.scrollBy({
           top: window.innerHeight - 78,
diff --git a/src/components/ScrollDownArrow/styles.scss b/src/components/ScrollDownArrow/styles.scss
index 331deb57..71d12c0e 100644
--- a/src/components/ScrollDownArrow/styles.scss
+++ b/src/components/ScrollDownArrow/styles.scss
@@ -1,32 +1,38 @@
 .arrow {
   cursor: pointer;
-  left: 50vw;
+  left: calc(50vw - 15px);
   bottom: 50px;
   height: 30px;
   margin: auto;
   position: absolute;
   width: 30px;
-  animation: ca3_fade_move_down 1.5s ease-in-out infinite;
-
-  @keyframes ca3_fade_move_down {
-    0% {
-      transform: translate(0, -10px);
-      opacity: 0;
-    }
-    35% {
-      opacity: 1;
-    }
-    70% {
-      transform: translate(0, 10px);
-      opacity: 0;
-    }
-    100% {
-      transform: translate(0, 10px);
-      opacity: 0;
-    }
-  }
-
   @media only screen and (max-width: 1050px) {
     display: none;
   }
-}
\ No newline at end of file
+}
+// ensures the scroll down button fades away as the user scrolls down
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.hide {
+  animation: hide 0.5s linear 0s 1 normal forwards;
+}
+
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.show {
+  animation: show 0.5s linear 0s 1 normal forwards;
+}