diff --git a/website/src/pages/team/index.css b/website/src/pages/team/index.css
index 58e457178..4467a013b 100644
--- a/website/src/pages/team/index.css
+++ b/website/src/pages/team/index.css
@@ -19,101 +19,101 @@
 
 /* Derived from https://github.com/apache/streampark-website/tree/dev/src/pages/team */
 .team_page {
-    margin-top: 50px !important;
+  margin-top: 50px !important;
 }
 
 .team_page h1:first-child {
-    font-size: 3rem;
+  font-size: 3rem;
 }
 
 .team_page a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .team_page .team_title {
-    margin-top: 40px;
+  margin-top: 40px;
 }
 
 .team_page .team_desc {
-    margin-bottom: 40px;
+  margin-bottom: 40px;
 }
 
 .team_page .team_indent {
-    line-height: 40px;
+  line-height: 40px;
 }
 
 .team_page .desc {
-    font-size: 1rem;
-    margin-left: .5rem;
+  font-size: 1rem;
+  margin-left: 0.5rem;
 }
 
 .team-row {
-    --bs-gutter-x: 1.5rem;
-    --bs-gutter-y: 0;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-top: calc(-1 * var(--bs-gutter-y));
-    margin-right: calc(-0.5 * var(--bs-gutter-x));
-    margin-left: calc(-0.5 * var(--bs-gutter-x));
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
 }
 
 .team-box {
-    width: 20% !important;
-    padding: 12px;
+  width: 20% !important;
+  padding: 12px;
 }
 
 .team-user-img {
-    width: 80px;
-    border-radius: 50%;
-    border: 2px solid #fff;
+  width: 80px;
+  border-radius: 50%;
+  border: 2px solid #fff;
 }
 
 .bg-team {
-    margin-top: -1.5rem !important;
-    padding: 2.5rem 1rem 0.5rem 1rem;
-    background-color: #ffffff !important;
-    border-radius: 0.75rem;
-    box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important;
+  margin-top: -1.5rem !important;
+  padding: 2.5rem 1rem 0.5rem 1rem;
+  background-color: #ffffff !important;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important;
 }
 
 .team-link {
-    background-color: #fff;
-    border-radius: 50%;
-    width: 1.5rem;
-    height: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    font-size: 75%;
-    line-height: normal;
-    margin-right: 0.25rem;
+  background-color: #fff;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 75%;
+  line-height: normal;
+  margin-right: 0.25rem;
 }
 
 .team-link .github-icon {
-    width: 20px;
-    height: 20px;
-    color: #fff;
+  width: 20px;
+  height: 20px;
+  color: #fff;
 }
 
 [data-theme="dark"] .team-link {
-    background-color: #95999c;
+  background-color: #95999c;
 }
 
 [data-theme="dark"] .bg-team {
-    background-color: #0e1114 !important;
+  background-color: #0e1114 !important;
 }
 
 .divider {
-    width: 100%;
-    height: 1px;
-    background-color: #dfdfdf;
+  width: 100%;
+  height: 1px;
+  background-color: #dfdfdf;
 }
 
-.block {
-    width: 1200px;
-    padding: 0 20px;
-    margin: 0 auto;
+@media (max-width: 768px) {
+  .team-box {
+    width: 50% !important;
+  }
 }
diff --git a/website/src/pages/team/index.jsx b/website/src/pages/team/index.jsx
index d00edeaf2..9069a0f6a 100644
--- a/website/src/pages/team/index.jsx
+++ b/website/src/pages/team/index.jsx
@@ -44,7 +44,7 @@ export default function () {
         <BrowserOnly>
             {() => {
                 return <Layout>
-                    <div className="block team_page" style={{padding: "10px 0 30px"}}>
+                    <div className="container team_page">
                         <h1><Translate>team.name</Translate></h1>
                         <p className="team_desc team_indent"><Translate>team.desc</Translate></p>
 
@@ -56,17 +56,17 @@ export default function () {
                             {
                                 dataSource.pmc.map((item, i) => (
                                     <div className='team-box' key={i} data-aos="fade-up" data-aos-delay={i * 100}>
-                                        <div style={{textAlign: "center"}}>
-                                            <div style={{overflow: "hidden", zIndex: 1}}>
+                                        <div style={{ textAlign: "center" }}>
+                                            <div style={{ overflow: "hidden", zIndex: 1 }}>
                                                 <img className="team-user-img" src={avatarUrl(item.githubId)} title=""
-                                                     alt=""/>
+                                                    alt="" />
                                             </div>
                                             <div className={item.isMentor ? 'team-mentor bg-team' : 'bg-team'}>
                                                 <h5 className="team-name">{item.name}</h5>
                                                 <small>{getGitName(item.gitUrl)}</small>
                                                 <div>
                                                     <a className="team-link" href={item.gitUrl}>
-                                                        <Github className="github-icon"/>
+                                                        <Github className="github-icon" />
                                                     </a>
                                                 </div>
                                             </div>
@@ -83,18 +83,18 @@ export default function () {
                             {
                                 dataSource.committer.map((item, i) => (
                                     <div className='team-box' key={i} data-aos="fade-up" data-aos-delay={i * 100}>
-                                        <div style={{textAlign: "center"}}>
-                                            <div style={{overflow: "hidden", zIndex: 1}}>
+                                        <div style={{ textAlign: "center" }}>
+                                            <div style={{ overflow: "hidden", zIndex: 1 }}>
                                                 <img className="team-user-img" src={avatarUrl(item.githubId)}
-                                                     title=""
-                                                     alt=""/>
+                                                    title=""
+                                                    alt="" />
                                             </div>
                                             <div className="bg-team">
                                                 <h5 className="team-name">{item.name}</h5>
                                                 <small>{getGitName(item.gitUrl)}</small>
                                                 <div>
                                                     <a className="team-link" href={item.gitUrl}>
-                                                        <Github className="github-icon"/>
+                                                        <Github className="github-icon" />
                                                     </a>
                                                 </div>
                                             </div>