Fiddled with the Back to the Top button a bit so it's better visible on the white background, also only on widescreen now.

src/UI/Content/theme.less

@@ -72,21 +72,24 @@
 }
 
 #scroll-up {
+
+  i {
     .clickable;
+    .opacity(0.3);
+    margin: 0px 20px;
 
     &:hover {
-    text-decoration : none;
-    .opacity         (0.4);
+      .opacity(0.4);
+    }
   }
 
-  .opacity   (0.2);
   position  : fixed;
   z-index   : 9999;
-  bottom    : 50px;
-  right     : 50px;
+  bottom    : 30px;
+  right     : 0px;
   display   : none;
   font-size : 56px;
-  color     : white;
+  color     : gray;
 }
 
 .control-panel-visible {

src/UI/index.html

@@ -55,9 +55,9 @@
             <div id="modal-region2"></div>
         </div>
     </div>
-    <a id="scroll-up" title="Back to the top!">
-        <i class="icon-sonarr-back-to-top"></i>
-    </a>
+    <div id="scroll-up">
+        <i class="icon-sonarr-back-to-top visible-lg-inline" title="Back to the top!"></i>
+    </div>
 </div>
 <div class="footer">
     <div class="container-fluid">

src/UI/jQuery/ToTheTop.js

@@ -3,13 +3,14 @@ var _ = require('underscore');
 
 $(document).ready(function() {
     var _window = $(window);
-    var _scrollButton = $('#scroll-up');
+    var _scrollContainer = $('#scroll-up');
+    var _scrollButton = $('#scroll-up i');
 
     var _scrollHandler = function() {
-        if (_window.scrollTop() > 100) {
-            _scrollButton.fadeIn();
+        if (_window.scrollTop() > 400) {
+            _scrollContainer.fadeIn();
         } else {
-            _scrollButton.fadeOut();
+            _scrollContainer.fadeOut();
         }
     };