diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 4572a1b70d4e88b06e93d07fa158269abd86af4d..bc35949280da77cea8d8d9282bc62065f3c0b910 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -120,7 +120,7 @@ export function SettingsPageContainer({
   className?: string;
 }) {
   return (
-    <div className="scrollbar-gutter-both flex-1 overflow-y-auto px-4 py-7 sm:px-8 sm:py-10">
+    <div className="settings-page-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto px-4 pt-10 pb-7 sm:px-8 sm:pt-12 sm:pb-10">
       <div className={cn("mx-auto flex w-full max-w-4xl flex-col gap-12", className)}>
         {children}
       </div>
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 319d7fc7f425fa253d2a8721709489cdc02e9ab1..1d1a1b8231f3ba252bfaa501c183a12aeceb743d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -305,8 +305,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 
   /* Fade rows themselves as they pass beneath the top chrome. A mask remains
      visible even when the header and timeline share the same background. */
-  .chat-timeline-scroll-fade {
-    --timeline-top-fade-height: 2.5rem;
+  .chat-timeline-scroll-fade,
+  .settings-page-scroll-fade {
+    --topbar-scroll-fade-height: 2.5rem;
     -webkit-mask-image:
       linear-gradient(
         to bottom,
@@ -322,8 +323,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     -webkit-mask-position: top, bottom;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size:
-      100% var(--timeline-top-fade-height),
-      100% calc(100% - var(--timeline-top-fade-height));
+      100% var(--topbar-scroll-fade-height),
+      100% calc(100% - var(--topbar-scroll-fade-height));
     mask-image:
       linear-gradient(
         to bottom,
@@ -339,8 +340,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     mask-position: top, bottom;
     mask-repeat: no-repeat;
     mask-size:
-      100% var(--timeline-top-fade-height),
-      100% calc(100% - var(--timeline-top-fade-height));
+      100% var(--topbar-scroll-fade-height),
+      100% calc(100% - var(--topbar-scroll-fade-height));
   }
 
   .workspace-titlebar-controls {
@@ -593,8 +594,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 
   @media (min-width: 40rem) {
-    .chat-timeline-scroll-fade {
-      --timeline-top-fade-height: 3rem;
+    .chat-timeline-scroll-fade,
+    .settings-page-scroll-fade {
+      --topbar-scroll-fade-height: 3rem;
     }
 
     .chat-composer-horizontal-inset {