diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index d3a8eb49c..3b5a3a4aa 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -74,9 +74,11 @@
       width: 100%;
       height: 100%;
       z-index: 1;
+      // On mobile, extend the gradient up to the ThumbNavigation height
       background-image: linear-gradient(
         0deg,
         var(--background-color) 0%,
+        var(--background-color) var(--thumb-navigation-height),
         hsla(var(--foreground-color_hsl), 0) 50%,
         hsla(var(--foreground-color_hsl), 0) 100%
       );
@@ -84,6 +86,16 @@
       left: 0;
       right: 0;
       bottom: 0;
+
+      @media (min-width: 895px) {
+        // On desktop, fade into the bottom of the page
+        background-image: linear-gradient(
+          0deg,
+          var(--background-color) 0%,
+          hsla(var(--foreground-color_hsl), 0) 50%,
+          hsla(var(--foreground-color_hsl), 0) 100%
+        );
+      }
     }
   }
 }