diff --git a/app/docs.css b/app/docs.css
index 10366297..a979b770 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -95,7 +95,5 @@ body::-webkit-scrollbar-thumb {
 }
 
 .docs-page {
-  position: relative;
-  border-radius: 16px;
-  background-image: linear-gradient(0deg, #f2f5ff 0%, #fff 100%);
+  @apply fixed left-0 right-0 top-40 -z-0 mx-auto hidden !h-3/4 rounded-2xl bg-gradient-to-t from-primary-25 to-white lg:block xl:max-w-[1560px] 4k:max-w-[2000px];
 }
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index 300eab06..ad6890c3 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -80,7 +80,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
   return (
     <section>
       <div className="sticky top-20 z-30 hidden h-20 w-full bg-white md:bg-primary-25 lg:block"></div>
-      <div className="docs-page fixed left-0 right-0 -z-0 mx-auto hidden h-2/3 lg:block xl:max-w-[1560px] 4k:max-w-[2000px]"></div>
+      <div className="docs-page"></div>
       <div className="container relative z-20 grid grid-cols-12 gap-5 md:pt-16">
         <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
           <aside