diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index de3703f4..234e1b23 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -76,14 +76,21 @@ const Container = styled.div`
   @media (max-width: 960px) {
     flex-direction: column;
     gap: 16px;
-    margin: 0 1rem;
+    margin: 0 2rem;
   }
 
   @media (max-width: 640px) {
-    margin: 0;
+    margin: 0 1rem;
   }
 `
 
+const InnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 1100px;
+`
+
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -119,10 +126,8 @@ const RowCentered = styled.div`
 const Card = styled.div`
   display: flex;
   max-height: 250px;
-  min-width: 330px;
   padding: 1rem;
   flex-direction: column;
-  justify-content: center;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 20px;
@@ -162,6 +167,7 @@ const CenterCard = styled(Card)`
 const ShadowCard = styled(Card)`
   flex: 1 1 200px; /* Grow, shrink, min-width */
   box-sizing: border-box;
+  background: #ffffff10;
 `
 
 const IconWrapper = styled.div`
@@ -264,8 +270,7 @@ const DappsContainer = styled.div`
   flex-direction: column;
 
   @media (max-width: 640px) {
-    margin-top: 2rem;
-    padding: 0 1rem;
+    margin: 2rem 1rem 0 1rem;
   }
 `
 
@@ -275,8 +280,7 @@ const ExploreContainer = styled.div`
   flex-direction: column;
 
   @media (max-width: 640px) {
-    margin-top: 1rem;
-    padding: 0 1rem;
+    margin: 2rem 1rem 0 1rem;
   }
 `
 
@@ -298,216 +302,218 @@ export default function Home() {
         }}
       />
       <Container>
-        <DocsHeader>
-          <div
-            style={{
-              padding: '4rem 1rem 2rem 1rem',
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <div style={{ fontWeight: 600, fontSize: '2.5rem' }}> Welcome to t1 Docs</div>
-          </div>
-          <DescriptionSection>
-            <DescriptionText>
-              t1 is an EVM-based cross-chain application infrastructure that introduces Real-time proving (RTP) and
-              programmability to address fragmentation and composability challenges in scaling Ethereum:
-            </DescriptionText>
-
-            <DescriptionList>
-              <DescriptionListItem>
-                <strong>Real-time proving:</strong> Using Trusted Execution Environments (TEEs), t1 proves its execution
-                integrity to Ethereum and partner rollups in under 12 seconds. By running partner rollup nodes within
-                its infrastructure, t1 aggregates and proves their state to Ethereum in 1-2 L1 blocks—enabling instant
-                settlement between Ethereum and any partner rollup.
-              </DescriptionListItem>
-              <DescriptionListItem>
-                <strong>Programmability:</strong> t1 smart contracts are able to read from and write to Ethereum and
-                partner rollups. (coming soon)
-              </DescriptionListItem>
-            </DescriptionList>
-
-            <DescriptionText>
-              t1 provides the missing infrastructure for seamless cross-chain applications and liquidity movement—today.
-            </DescriptionText>
-          </DescriptionSection>
-
-          <Row>
-            {actions.map((action) => (
-              <TraceEvent
-                key={action.to}
-                element={action.to}
-                events={[BrowserEvent.onClick]}
-                name={SharedEventName.PAGE_CLICKED}
-                section={SectionName.WELCOME_LINKS}
-              >
-                <Link style={{ textDecoration: 'none' }} to={action.to}>
-                  <ShadowCard key={action.title}>
-                    <TopSection>
-                      <IconWrapper>
-                        <action.icon style={{ width: '24px' }} />
-                      </IconWrapper>
-                      <LinkIconWrapper>
-                        <LinkIcon />
-                      </LinkIconWrapper>
-                    </TopSection>
-                    <h3 style={{ marginBottom: '.75rem', fontWeight: 500 }}>{action.title}</h3>
-                    <p style={{ marginBottom: '0.5rem', fontWeight: 300 }}>{action.text}</p>
-                  </ShadowCard>
-                </Link>
-              </TraceEvent>
-            ))}
-          </Row>
-        </DocsHeader>
-        <>
-          {/* Smart Contracts Section */}
-          <ExploreContainer>
-            <div style={{ fontSize: '24px', fontWeight: 500, marginBottom: '0.5rem' }}>
-              Integrate Your Smart Contracts
-            </div>
-            <p style={{ marginBottom: '1rem' }}>Build with t1&apos;s cross-chain capabilities</p>
-
+        <InnerContainer>
+          <DocsHeader>
             <div
               style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
-                gap: '24px',
-                alignItems: 'stretch',
+                padding: '4rem 1rem 2rem 1rem',
+                textAlign: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
               }}
             >
-              {smartContractGuides.map((action) => (
+              <div style={{ fontWeight: 600, fontSize: '2.5rem' }}> Welcome to t1 Docs</div>
+            </div>
+            <DescriptionSection>
+              <DescriptionText>
+                t1 is an EVM-based cross-chain application infrastructure that introduces Real-time proving (RTP) and
+                programmability to address fragmentation and composability challenges in scaling Ethereum:
+              </DescriptionText>
+
+              <DescriptionList>
+                <DescriptionListItem>
+                  <strong>Real-time proving:</strong> Using Trusted Execution Environments (TEEs), t1 proves its
+                  execution integrity to Ethereum and partner rollups in under 12 seconds. By running partner rollup
+                  nodes within its infrastructure, t1 aggregates and proves their state to Ethereum in 1-2 L1
+                  blocks—enabling instant settlement between Ethereum and any partner rollup.
+                </DescriptionListItem>
+                <DescriptionListItem>
+                  <strong>Programmability:</strong> t1 smart contracts are able to read from and write to Ethereum and
+                  partner rollups. (coming soon)
+                </DescriptionListItem>
+              </DescriptionList>
+
+              <DescriptionText>
+                t1 provides the missing infrastructure for seamless cross-chain applications and liquidity
+                movement—today.
+              </DescriptionText>
+            </DescriptionSection>
+
+            <Row>
+              {actions.map((action) => (
                 <TraceEvent
                   key={action.to}
                   element={action.to}
                   events={[BrowserEvent.onClick]}
                   name={SharedEventName.PAGE_CLICKED}
-                  section={SectionName.SMART_CONTRACT_LINKS}
+                  section={SectionName.WELCOME_LINKS}
                 >
-                  <Link style={{ textDecoration: 'none', height: '100%' }} key={action.title} to={action.to}>
-                    <Card style={{ height: '100%' }}>
-                      <LinkRow>
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <h3 style={{ marginBottom: '0rem' }}>{action.title}</h3>
-                        </div>
+                  <Link style={{ textDecoration: 'none' }} to={action.to}>
+                    <ShadowCard key={action.title}>
+                      <TopSection>
+                        <IconWrapper>
+                          <action.icon style={{ width: '24px' }} />
+                        </IconWrapper>
                         <LinkIconWrapper>
                           <LinkIcon />
                         </LinkIconWrapper>
-                      </LinkRow>
-                      <p style={{ marginBottom: '0rem', fontWeight: 300 }}>{action.text}</p>
-                    </Card>
+                      </TopSection>
+                      <h3 style={{ marginBottom: '.75rem', fontWeight: 500 }}>{action.title}</h3>
+                      <p style={{ marginBottom: '0.5rem', fontWeight: 300 }}>{action.text}</p>
+                    </ShadowCard>
                   </Link>
                 </TraceEvent>
               ))}
-            </div>
-          </ExploreContainer>
-
-          {/* Explore dApps Section */}
-          <DappsContainer>
-            <div style={{ fontSize: '24px', fontWeight: 500, marginBottom: '0.5rem' }}>Explore dApps</div>
-            <p style={{ marginBottom: '1rem' }}>See what&apos;s possible with t1</p>
-
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
-                gap: '24px',
-                alignItems: 'stretch',
-              }}
-            >
-              {dAppGuides.map((action) => (
-                <TraceEvent
-                  key={action.title}
-                  element={action.to}
-                  events={[BrowserEvent.onClick]}
-                  name={SharedEventName.PAGE_CLICKED}
-                  section={SectionName.DAPP_LINKS}
-                >
-                  <Link style={{ textDecoration: 'none', height: '100%' }} key={action.title} to={action.to}>
-                    <Card
-                      style={{
-                        height: '100%',
-                        opacity: action.disabled ? 0.6 : 1,
-                        cursor: action.disabled ? 'not-allowed' : 'pointer',
-                        minWidth: 'auto',
-                      }}
-                    >
-                      <LinkRow>
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <h3 style={{ marginBottom: '0rem' }}>{action.title}</h3>
-                        </div>
-                        {!action.disabled && (
+            </Row>
+          </DocsHeader>
+          <>
+            {/* Smart Contracts Section */}
+            <ExploreContainer>
+              <div style={{ fontSize: '24px', fontWeight: 500, marginBottom: '0.5rem' }}>
+                Integrate Your Smart Contracts
+              </div>
+              <p style={{ marginBottom: '1rem' }}>Build with t1&apos;s cross-chain capabilities</p>
+
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                  gap: '24px',
+                  alignItems: 'stretch',
+                }}
+              >
+                {smartContractGuides.map((action) => (
+                  <TraceEvent
+                    key={action.to}
+                    element={action.to}
+                    events={[BrowserEvent.onClick]}
+                    name={SharedEventName.PAGE_CLICKED}
+                    section={SectionName.SMART_CONTRACT_LINKS}
+                  >
+                    <Link style={{ textDecoration: 'none', height: '100%' }} key={action.title} to={action.to}>
+                      <Card style={{ height: '100%' }}>
+                        <LinkRow>
+                          <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <h3 style={{ marginBottom: '0rem' }}>{action.title}</h3>
+                          </div>
                           <LinkIconWrapper>
                             <LinkIcon />
                           </LinkIconWrapper>
-                        )}
-                      </LinkRow>
-                      <p style={{ marginBottom: '0rem', fontWeight: 300 }}>{action.text}</p>
-                    </Card>
-                  </Link>
-                </TraceEvent>
-              ))}
-            </div>
-          </DappsContainer>
-        </>
-        <hr />
-        <LinksContainer>
-          <RowCentered>
-            <TraceEvent
-              events={[BrowserEvent.onClick]}
-              section={SectionName.BOTTOM_MENU_LINKS}
-              element={ElementName.X}
-              name={SharedEventName.PAGE_CLICKED}
-            >
-              <Link style={{ textDecoration: 'none' }} href={'https://x.com/t1protocol'}>
-                <CenterCard>
-                  <StyledIcon>
-                    <X style={{ width: '40px', height: '40px' }} />
-                  </StyledIcon>
-                  <div>
-                    <h3>X</h3>
-                    <p>Stay up to date on X.</p>
-                  </div>
-                </CenterCard>
-              </Link>
-            </TraceEvent>
-            <TraceEvent
-              events={[BrowserEvent.onClick]}
-              element={ElementName.DISCORD}
-              section={SectionName.BOTTOM_MENU_LINKS}
-              name={SharedEventName.PAGE_CLICKED}
-            >
-              <Link style={{ textDecoration: 'none' }} href={'https://discord.com/invite/nbvyXZHgke'}>
-                <CenterCard>
-                  <Discord style={{ width: '48px', height: '48px' }} />
-                  <div>
-                    <h3>Discord</h3>
-                    <p>Join our Developer Community.</p>
-                  </div>
-                </CenterCard>
-              </Link>
-            </TraceEvent>
-            <TraceEvent
-              events={[BrowserEvent.onClick]}
-              section={SectionName.BOTTOM_MENU_LINKS}
-              element={ElementName.GITHUB}
-              name={SharedEventName.PAGE_CLICKED}
-            >
-              <Link style={{ textDecoration: 'none' }} href={'https://github.com/t1protocol'}>
-                <CenterCard>
-                  <StyledIcon>
-                    <GitHub style={{ width: '40px', height: '40px' }} />
-                  </StyledIcon>
-                  <div>
-                    <h3>GitHub</h3>
-                    <p>View all t1 repositories.</p>
-                  </div>
-                </CenterCard>
-              </Link>
-            </TraceEvent>
-          </RowCentered>
-        </LinksContainer>
+                        </LinkRow>
+                        <p style={{ marginBottom: '0rem', fontWeight: 300 }}>{action.text}</p>
+                      </Card>
+                    </Link>
+                  </TraceEvent>
+                ))}
+              </div>
+            </ExploreContainer>
+
+            {/* Explore dApps Section */}
+            <DappsContainer>
+              <div style={{ fontSize: '24px', fontWeight: 500, marginBottom: '0.5rem' }}>Explore dApps</div>
+              <p style={{ marginBottom: '1rem' }}>See what&apos;s possible with t1</p>
+
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                  gap: '24px',
+                  alignItems: 'stretch',
+                }}
+              >
+                {dAppGuides.map((action) => (
+                  <TraceEvent
+                    key={action.title}
+                    element={action.to}
+                    events={[BrowserEvent.onClick]}
+                    name={SharedEventName.PAGE_CLICKED}
+                    section={SectionName.DAPP_LINKS}
+                  >
+                    <Link style={{ textDecoration: 'none', height: '100%' }} key={action.title} to={action.to}>
+                      <Card
+                        style={{
+                          height: '100%',
+                          opacity: action.disabled ? 0.6 : 1,
+                          cursor: action.disabled ? 'not-allowed' : 'pointer',
+                        }}
+                      >
+                        <LinkRow>
+                          <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <h3 style={{ marginBottom: '0rem' }}>{action.title}</h3>
+                          </div>
+                          {!action.disabled && (
+                            <LinkIconWrapper>
+                              <LinkIcon />
+                            </LinkIconWrapper>
+                          )}
+                        </LinkRow>
+                        <p style={{ marginBottom: '0rem', fontWeight: 300 }}>{action.text}</p>
+                      </Card>
+                    </Link>
+                  </TraceEvent>
+                ))}
+              </div>
+            </DappsContainer>
+          </>
+          <hr />
+          <LinksContainer>
+            <RowCentered>
+              <TraceEvent
+                events={[BrowserEvent.onClick]}
+                section={SectionName.BOTTOM_MENU_LINKS}
+                element={ElementName.X}
+                name={SharedEventName.PAGE_CLICKED}
+              >
+                <Link style={{ textDecoration: 'none' }} href={'https://x.com/t1protocol'}>
+                  <CenterCard>
+                    <StyledIcon>
+                      <X style={{ width: '40px', height: '40px' }} />
+                    </StyledIcon>
+                    <div>
+                      <h3>X</h3>
+                      <p>Stay up to date on X.</p>
+                    </div>
+                  </CenterCard>
+                </Link>
+              </TraceEvent>
+              <TraceEvent
+                events={[BrowserEvent.onClick]}
+                element={ElementName.DISCORD}
+                section={SectionName.BOTTOM_MENU_LINKS}
+                name={SharedEventName.PAGE_CLICKED}
+              >
+                <Link style={{ textDecoration: 'none' }} href={'https://discord.com/invite/nbvyXZHgke'}>
+                  <CenterCard>
+                    <Discord style={{ width: '48px', height: '48px' }} />
+                    <div>
+                      <h3>Discord</h3>
+                      <p>Join our Developer Community.</p>
+                    </div>
+                  </CenterCard>
+                </Link>
+              </TraceEvent>
+              <TraceEvent
+                events={[BrowserEvent.onClick]}
+                section={SectionName.BOTTOM_MENU_LINKS}
+                element={ElementName.GITHUB}
+                name={SharedEventName.PAGE_CLICKED}
+              >
+                <Link style={{ textDecoration: 'none' }} href={'https://github.com/t1protocol'}>
+                  <CenterCard>
+                    <StyledIcon>
+                      <GitHub style={{ width: '40px', height: '40px' }} />
+                    </StyledIcon>
+                    <div>
+                      <h3>GitHub</h3>
+                      <p>View all t1 repositories.</p>
+                    </div>
+                  </CenterCard>
+                </Link>
+              </TraceEvent>
+            </RowCentered>
+          </LinksContainer>
+        </InnerContainer>
       </Container>
     </Layout>
   )