diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
index b77170ec..0f7098af 100644
--- a/Official_Website/contributor-index.html
+++ b/Official_Website/contributor-index.html
@@ -90,7 +90,6 @@ <h1>HelpOps-Hub</h1>
 
         </nav>
     <div class="container">
-      <main class="main-content">
         <div class="intro">
           <h1>Our Team</h1>
           <p>
@@ -101,7 +100,6 @@ <h1>Our Team</h1>
         </div>
         <div id="team-grid">
           <div class="team-member">
-            <div class="card1">
               <div class="image-div">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
               </div>
@@ -110,7 +108,6 @@ <h1>Our Team</h1>
                 <h2>Azfar Alam</h2>
                 <p>DevOps Engineer</p>
               </div>
-            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/mdazfar2"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/mdazfar2"><i class="fab fa-github"></i> GitHub</a>
@@ -118,7 +115,6 @@ <h2>Azfar Alam</h2>
             </div>
           </div>
           <div class="team-member">
-            <div class="card2">
               <div class="image-div">
                 <img src="Screenshot (250).png" alt="Anurag Pandey" />
               </div>
@@ -127,7 +123,6 @@ <h2>Azfar Alam</h2>
                 <h2>Anurag Pandey</h2>
                 <p>Software Engineer</p>
               </div>
-            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/pandeyji711"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/pandeyji711"><i class="fab fa-github"></i> GitHub</a>
@@ -135,7 +130,6 @@ <h2>Anurag Pandey</h2>
             </div>
           </div>
         </div>
-      </main>
     </div>
     <button id="scrollToTopBtn" class="scrollToTopBtn">▲</button>
     <div id="team-grid1">
diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
index 13291a02..ca12e03d 100644
--- a/Official_Website/contributor-style.css
+++ b/Official_Website/contributor-style.css
@@ -214,15 +214,24 @@ width: 40px;
 .container {
   display: flex;
   width: 100%;
+  height: auto;
+  flex-direction: column;
 }
 
 .main-content {
   flex: 1;
   padding: 20px;
+  height: auto;
 }
 
 .intro {
-  margin:24px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  margin: 30px;
+  justify-content: center;
 }
 
 /* .intro h1 {
@@ -236,14 +245,33 @@ width: 40px;
 } */
 
 #team-grid {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  gap: 5rem;
-  height: 300px;
+  
+  display: flex;
+  flex-direction: row;
+justify-content: center;
+ min-height: 300px;
+ height: auto;
+  gap: 30px;
+}
+
+@media only screen and (max-width:944px) {
+    #team-grid{
+      flex-direction: column;
+
+    }
+    .intro{
+      align-items: center;
+    }
+}
+@media only screen and (max-width:520px) {
+  .team-member{
+    display: flex;
+    flex-direction: column !important;
+  }
+  .intro{
+    align-items: center;
+  }
 }
-
 .team-member {
   display: flex;
   justify-content: space-between;
@@ -254,6 +282,7 @@ width: 40px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding: 20px;
  /* background-color: gray; */
+ gap: 10px;
   margin-left: 20px;
   background-position: center center;
   background-size: cover;
diff --git a/Official_Website/style.css b/Official_Website/style.css
index 1b667153..3d9b3cb0 100644
--- a/Official_Website/style.css
+++ b/Official_Website/style.css
@@ -5,6 +5,20 @@ p {
   margin: 0;
   padding: 0;
 }
+.team-grid{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap !important;
+}
+.img-div{
+  width: 40%;
+
+}
+.team-member{
+  display: flex;
+  flex-direction: row;
+position: relative;
+}
 /* style search container */
 .search-container {
   display: flex;