diff --git a/app/docs.css b/app/docs.css
index a979b770..cfb20d20 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -95,5 +95,5 @@ body::-webkit-scrollbar-thumb {
 }
 
 .docs-page {
-  @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];
+  @apply fixed left-0 right-0 top-24 -z-0 mx-auto max-w-[1240px] rounded-2xl bg-gradient-to-t from-primary-25 to-white xl:!h-2/4  2xl:top-40 2xl:!h-3/4 2xl:max-w-[1560px] 4k:max-w-[2000px];
 }
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index ad6890c3..5ca14211 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -79,13 +79,13 @@ 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="sticky top-20 z-30 hidden h-4 w-full bg-primary-25 lg:block 2xl:h-20"></div>
       <div className="docs-page"></div>
-      <div className="container relative z-20 grid grid-cols-12 gap-5 md:pt-16">
+      <div className="container relative z-20 grid grid-cols-12 gap-5 pt-10 2xl:pt-16">
         <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
           <aside
             id="componentListSidebar"
-            className="keep-shadow sticky top-56 h-[80vh] space-y-5 overflow-auto py-6 pl-8">
+            className="sticky top-28 h-[80vh] space-y-5 overflow-auto 2xl:top-56 2xl:py-6 2xl:pl-8">
             <Accordion flush openFirstPanel className="border-none bg-transparent">
               <Accordion.Panel>
                 <Accordion.Container className="p-0">
@@ -94,12 +94,14 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
                   </Accordion.Title>
                 </Accordion.Container>
                 <Accordion.Content className="p-0">
-                  <Typography variant="ul" className="-ml-px mt-3 space-y-1.5 border-l border-l-metal-100">
+                  <Typography variant="ul" className="mt-3 space-y-1.5 border-l border-l-metal-100">
                     {gettingStartedRoutes.map((route) => (
                       <Typography variant="li" key={route.id}>
                         <Link
-                          className={`duration-150' -ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 transition-colors hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
-                            IsActive(route.href) ? 'border-l !border-primary-500 text-primary-500' : ''
+                          className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                            IsActive(route.href)
+                              ? 'border-l !border-primary-500 text-primary-500 transition-colors duration-150'
+                              : ''
                           }`}
                           href={route.href}>
                           {route.name}
@@ -136,14 +138,14 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
             </Accordion>
           </aside>
         </div>
-        <div className="col-span-12 p-4 md:p-4 lg:col-span-9 xl:col-span-8">
+        <div className="col-span-12 py-6 lg:col-span-9 xl:col-span-8 2xl:py-4">
           <div id="linkPage" className="overflow-y-auto">
             {children}
           </div>
         </div>
         <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
-          <aside id="linkPage" className="sticky top-56 h-[80vh]">
-            <div className="pl-5">
+          <aside id="linkPage" className="sticky top-28 h-[80vh] 2xl:top-60">
+            <div className="2xl:pl-5">
               <div className="flex flex-col justify-between overflow-y-auto">
                 <h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
                 <nav id="visible-table-of-contents">
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 7316427d..75294aa9 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -5,7 +5,7 @@ export const useMDXComponents: (components: MDXComponents) => MDXComponents = (c
   return {
     h2: (props) => (
       <h2
-        className="section-title group z-10 before:invisible before:block before:content-[''] sm:before:-mt-36 sm:before:h-[224px]"
+        className="section-title group z-10 before:invisible before:block before:content-[''] xl:before:-mt-24 xl:before:h-32 2xl:before:-mt-48 2xl:before:h-[244px]"
         {...props}>
         {props.children}
         <a