diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx
index 756ab2cbec..79dce7005d 100644
--- a/apps/v4/components/docs-sidebar.tsx
+++ b/apps/v4/components/docs-sidebar.tsx
@@ -51,12 +51,12 @@ export function DocsSidebar({
 
   return (
     <Sidebar
-      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-var(--footer-height)+2rem)] bg-transparent lg:flex"
+      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-var(--footer-height)-4rem)] overscroll-none bg-transparent lg:flex"
       collapsible="none"
       {...props}
     >
-      <SidebarContent className="no-scrollbar overflow-x-hidden px-2 pb-12">
-        <div className="h-(--top-spacing) shrink-0" />
+      <SidebarContent className="no-scrollbar overflow-x-hidden px-2">
+        <div className="from-background via-background/80 to-background/50 sticky -top-1 z-10 h-8 shrink-0 bg-gradient-to-b blur-xs" />
         <SidebarGroup>
           <SidebarGroupLabel className="text-muted-foreground font-medium">
             Sections
@@ -141,6 +141,7 @@ export function DocsSidebar({
             </SidebarGroup>
           )
         })}
+        <div className="from-background via-background/80 to-background/50 sticky -bottom-1 z-10 h-16 shrink-0 bg-gradient-to-t blur-xs" />
       </SidebarContent>
     </Sidebar>
   )
diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css
index 52559b3f7c..96c7d22090 100644
--- a/apps/v4/styles/globals.css
+++ b/apps/v4/styles/globals.css
@@ -150,11 +150,12 @@
     @apply bg-selection text-selection-foreground;
   }
   html {
-    @apply scroll-smooth;
+    @apply overscroll-none scroll-smooth;
   }
   body {
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
+    @apply 3xl:p-2 3xl:fixed:p-0 overscroll-none;
   }
 
   @supports (font: -apple-system-body) and (-webkit-appearance: none) {