diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 377efb4..b9379be 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -1,6 +1,6 @@
 import Slider from 'react-slick';
 
-import { Homepage, Hero, Features, Feature, SectionHeader, NoSSR } from '@grapp/nextra-theme';
+import { Homepage, Hero, Features, Feature, Section, SectionHeader, NoSSR } from '@grapp/nextra-theme';
 import { Components } from '../components/Components';
 import { Example, getExamples } from '../components/Example'
 
@@ -33,8 +33,8 @@ export const getStaticProps = () => {
       </>
     }
   />
-
   <Features
+    className="mb-16"
     header={
       <SectionHeader 
         badge="Features" 
@@ -89,14 +89,13 @@ export const getStaticProps = () => {
       description="Stacks supports the responsive prop format. You can use responsive props to customize the spacing, number of columns, or alignments per screen size."
     />
   </Features>
-
-  <div className="mx-auto max-w-[90rem] mt-16 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">
-    <SectionHeader 
+  <Section className="pb-8">
+   <SectionHeader 
       badge="Components" 
       title="Component showcase."
       description="A collection of reusable layout components in your React Native projects."
     />
     <Components num={6} />
-  </div>
+  </Section>
 </Homepage>