diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
index 3e119ccbf4a..586233e4fc0 100644
--- a/.github/workflows/preview.yaml
+++ b/.github/workflows/preview.yaml
@@ -54,6 +54,7 @@ jobs:
           SENTRY_DSN: https://ea6017f8ee534468b308a2a6c949895a@o226447.ingest.sentry.io/6588620
           AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
           AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
+          GIFT_APP_API_BASE: ${{ secrets.GIFT_APP_API_BASE }}
           OSSINSIGHT_PREVIEW: true
           TIDBCLOUD_HOST: staging.tidbcloud.com
         run: npm run build
diff --git a/web/src/pages/github-campaign/_components/Section.tsx b/web/src/pages/github-campaign/_components/Section.tsx
index f50c0ec3c64..b48029588dd 100644
--- a/web/src/pages/github-campaign/_components/Section.tsx
+++ b/web/src/pages/github-campaign/_components/Section.tsx
@@ -1,5 +1,14 @@
 import { styled } from '@mui/material';
 
+export const Section = styled('section')<{ dark?: boolean }>`
+  background-color: ${({ dark }) => dark ? '#141414' : '#212122'};
+  padding: 120px 12px;
+`;
+export const SectionContent = styled('div')`
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+
 export const SectionTitle = styled('h2')`
   font-weight: 700;
   font-size: 48px;
@@ -7,11 +16,16 @@ export const SectionTitle = styled('h2')`
   text-align: center;
 `;
 
-export const Section = styled('section')<{ dark?: boolean }>`
-  background-color: ${({ dark }) => dark ? '#141414' : '#212122'};
-  padding: 120px 12px;
-`;
-export const SectionContent = styled('div')`
-  max-width: 1400px;
+export const SectionDescription = styled('p')`
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 38px;
+  color: #B1B1B1;
+  text-align: center;
+  max-width: 1200px;
   margin: 0 auto;
+
+  strong {
+    color: #73D9B4;
+  }
 `;
diff --git a/web/src/pages/github-campaign/_sections/4-contributions.tsx b/web/src/pages/github-campaign/_sections/4-contributions.tsx
index e69de29bb2d..295b21833aa 100644
--- a/web/src/pages/github-campaign/_sections/4-contributions.tsx
+++ b/web/src/pages/github-campaign/_sections/4-contributions.tsx
@@ -0,0 +1,19 @@
+import { Section, SectionContent, SectionDescription, SectionTitle } from '@site/src/pages/github-campaign/_components/Section';
+import React from 'react';
+
+export function ContributionsSection () {
+  return (
+    <Section>
+      <SectionContent>
+        <SectionTitle>
+          TiDB ❤️ Open Source
+        </SectionTitle>
+        <SectionDescription>
+          We take pride in our <strong>open-source</strong> roots.
+          <br />
+          With the developer community, we align our product, to make sure it perfectly fits modern application developer&#39;s needs.
+        </SectionDescription>
+      </SectionContent>
+    </Section>
+  );
+}
diff --git a/web/src/pages/github-campaign/index.tsx b/web/src/pages/github-campaign/index.tsx
index 1f3601980e2..23ea3b63055 100644
--- a/web/src/pages/github-campaign/index.tsx
+++ b/web/src/pages/github-campaign/index.tsx
@@ -2,6 +2,7 @@ import { HeadingSection } from '@site/src/pages/github-campaign/_sections/0-head
 import { HowItWorks } from '@site/src/pages/github-campaign/_sections/1-how-it-works';
 import { IntroductionsSection } from '@site/src/pages/github-campaign/_sections/2-introduction';
 import { ReviewsSection } from '@site/src/pages/github-campaign/_sections/3-reviews';
+import { ContributionsSection } from '@site/src/pages/github-campaign/_sections/4-contributions';
 import { FaqSection } from '@site/src/pages/github-campaign/_sections/5-faq';
 import { LegalSection } from '@site/src/pages/github-campaign/_sections/6-legal';
 import CustomPage from '@site/src/theme/CustomPage';
@@ -18,6 +19,7 @@ export default function Page () {
       <HowItWorks />
       <IntroductionsSection />
       <ReviewsSection />
+      <ContributionsSection />
       <FaqSection />
       <LegalSection />
     </CustomPage>