diff --git a/components/ScrollTopArrow/ScrollTopArrow.tsx b/components/ScrollTopArrow/ScrollTopArrow.tsx
index 4cbe33b13..2fd73c56c 100644
--- a/components/ScrollTopArrow/ScrollTopArrow.tsx
+++ b/components/ScrollTopArrow/ScrollTopArrow.tsx
@@ -19,10 +19,17 @@ const ScrollTopArrow: React.FC = () => {
     <button
       aria-label="Scroll to top"
       title="Scroll to top"
-      className={`${styles['arrow']} border-0 p-0 bg-transparent`}
+      className={`${styles.arrow} d-grid justify-content-center align-content-center rounded-pill border-0 p-4`}
       onClick={() => window.scrollTo(0, 0)}
     >
-      <Image src="/assets/mdx/topArrow.svg" layout="fill" aria-hidden="true" />
+      <Image
+        src="/assets/mdx/topArrow.svg"
+        layout="fixed"
+        height={28}
+        width={28}
+        aria-hidden="true"
+        className="opacity-75"
+      />
     </button>
   )
 }
diff --git a/components/ScrollTopArrow/scrollTopArrow.module.scss b/components/ScrollTopArrow/scrollTopArrow.module.scss
index 13961dd0c..ec217b3ff 100644
--- a/components/ScrollTopArrow/scrollTopArrow.module.scss
+++ b/components/ScrollTopArrow/scrollTopArrow.module.scss
@@ -1,4 +1,7 @@
+@use '../../scss/colors.module.scss';
+
 .arrow {
+  background-color: colors.$bg-light-purple;
   position: fixed;
   height: 3em;
   width: 3em;
@@ -9,4 +12,5 @@
   z-index: 1;
   top: 90%;
   left: 90%;
+  box-shadow: 0 8px 20px 0 rgba(colors.$darkGray, 0.3);
 }