diff --git a/web/src/pages/open-source-heroes/_components/Heading.tsx b/web/src/pages/open-source-heroes/_components/Heading.tsx
index ea994ee747..f2202467bc 100644
--- a/web/src/pages/open-source-heroes/_components/Heading.tsx
+++ b/web/src/pages/open-source-heroes/_components/Heading.tsx
@@ -2,7 +2,7 @@ import { css, styled } from '@mui/material';
 
 export const HeadingContainer = styled('div')`
   background-color: #212122;
-  padding: 40px 12px;
+  padding: 40px 12px 60px;
   ${({ theme }) => ({
     [theme.breakpoints.up('md')]: css`
       padding: 80px 0 120px;
@@ -13,11 +13,6 @@ export const HeadingContainer = styled('div')`
 export const Heading = styled('div')`
   max-width: 1442px;
   margin: 0 auto;
-
-  ${({ theme }) => ({
-    [theme.breakpoints.up('md')]: css`
-    `,
-  })}
 `;
 
 export const HeadingTitlePrefix = styled('span')`
diff --git a/web/src/pages/open-source-heroes/_sections/0-heading.tsx b/web/src/pages/open-source-heroes/_sections/0-heading.tsx
index 4f4a5b1a82..ca7116f6ab 100644
--- a/web/src/pages/open-source-heroes/_sections/0-heading.tsx
+++ b/web/src/pages/open-source-heroes/_sections/0-heading.tsx
@@ -3,7 +3,7 @@
 import { ArrowCircleRightOutlined } from '@mui/icons-material';
 import { Button } from '@mui/material';
 import { ClaimForm } from '@site/src/pages/open-source-heroes/_components/ClaimForm';
-import { Heading, HeadingContainer, HeadingDescription, HeadingLogos, HeadingPrompt, HeadingSpacing, HeadingTitle, HeadingTitlePrefix, MobileHeading } from '@site/src/pages/open-source-heroes/_components/Heading';
+import { Heading, HeadingContainer, HeadingDescription, HeadingLogos, HeadingPrompt, HeadingSpacing, HeadingTitle, HeadingTitlePrefix } from '@site/src/pages/open-source-heroes/_components/Heading';
 import { useResponsiveAuth0 } from '@site/src/theme/NavbarItem/useResponsiveAuth0';
 import { useGtag } from '@site/src/utils/ga';
 import React, { useState } from 'react';
@@ -90,29 +90,6 @@ function PrimaryHeading ({ loading, onClickAction }: { loading: boolean, onClick
           <GetCredits style={{ width: '100%' }} />
         </div>
       </Heading>
-      <MobileHeading>
-        <h1><span>Free Database Credits</span> for Open Source Heroes</h1>
-        <p>
-          TiDB loves open-source. We contribute code, sponsor projects, and appreciate developers who do so.
-          <br />
-          As a token of our appreciation, we&#39;re offering up to $2000 free TiDB Serverless credits to fuel open-source hero&#39;s next big idea.
-        </p>
-        <p className="action-prompt">
-          Log in with GitHub account to claim your credits.
-        </p>
-        <Button
-          id="start-claim-trigger-mobile"
-          disabled={loading}
-          color="primary"
-          variant="contained"
-          onClick={() => {
-            onClickAction();
-          }}
-        >
-          Claim Now
-          <ArrowCircleRightOutlined sx={{ ml: 0.5 }} />
-        </Button>
-      </MobileHeading>
     </HeadingContainer>
   );
 }
diff --git a/web/src/pages/open-source-heroes/_sections/1-how-it-works.tsx b/web/src/pages/open-source-heroes/_sections/1-how-it-works.tsx
index 95407b9d06..f55c98b21b 100644
--- a/web/src/pages/open-source-heroes/_sections/1-how-it-works.tsx
+++ b/web/src/pages/open-source-heroes/_sections/1-how-it-works.tsx
@@ -37,6 +37,14 @@ const ThisSectionContent = styled(SectionContent)`
   justify-content: center;
   width: max-content;
 
+  flex-direction: column;
+
+  ${({ theme }) => ({
+    [theme.breakpoints.up('md')]: css`
+      flex-direction: row;
+    `,
+  })}
+  
   h2 {
     font-size: 32px;
     line-height: 36px;
@@ -52,6 +60,13 @@ const Features = styled('div')`
   padding: 0;
   list-style: none;
   width: max-content;
+  flex-direction: column;
+
+  ${({ theme }) => ({
+    [theme.breakpoints.up('md')]: css`
+      flex-direction: row;
+    `,
+  })}
 `;
 
 const FeatureSplitter = styled('li')`