diff --git a/src/ui/layout/ScrollUpButton.scss b/src/ui/layout/ScrollUpButton.scss
index 54c185a0..15ea0209 100644
--- a/src/ui/layout/ScrollUpButton.scss
+++ b/src/ui/layout/ScrollUpButton.scss
@@ -1,16 +1,20 @@
 @use "../../styles/colors" as colors;
 @use "../../styles/shadows" as shadows;
 
+// Mirrors Angular `scroll-up-button`: a 40×40 circular button pinned
+// at right: 30px / bottom: 80px, filled with $extra-blue and a thin
+// blue-extra-light ring. Original React values (48×48, right/bottom:
+// 40px, $blue-light) diverged enough to fail visual-parity checks.
 .scroll-up-button {
   position: fixed;
-  bottom: 40px;
-  right: 40px;
-  z-index: 1100;
-  width: 48px;
-  height: 48px;
+  bottom: 80px;
+  right: 30px;
+  z-index: 2000;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  border: none;
-  background-color: colors.$blue-light;
+  border: 1px solid colors.$blue-extra-light;
+  background-color: colors.$extra-blue;
   color: colors.$white;
   cursor: pointer;
   display: flex;
@@ -19,12 +23,8 @@
   @include shadows.box-shadow-small;
   transition: background-color 0.2s, opacity 0.2s;
 
-  &:hover {
-    background-color: colors.$blue-light--hover;
-  }
-
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
 }