diff --git a/team.html b/team.html
index 493e6a26..6c6a37a4 100644
--- a/team.html
+++ b/team.html
@@ -1,187 +1,113 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Team Contributors</title>
     <link rel="stylesheet" href="communityStyle.css">
     <link rel="icon" href="https://img.icons8.com/?size=100&id=23332&format=png&color=000000">
-    <!-- <link rel="stylesheet" href="style.css"> -->
-    <script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous" defer></script>
+    <style>
+        body {
+            background-color: #040b21;
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .home-btn {
+            height: 50px;
+            background-color: black;
+            color: white;
+            border-radius: 10px;
+            margin: 20px;
+        }
+
+        .team-top {
+            text-align: center;
+        }
+
+        .team-top h3 {
+            font-size: 36px;
+            margin-top: 20px;
+            border: 2.5px solid gray;
+        }
+
+        .team-members {
+            display: flex;
+            gap: 20px;
+            margin-top: 5rem;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .team-member {
+            text-align: center;
+            max-width: 150px;
+        }
+
+        .team-member img {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 10px;
+            transition: transform 0.3s ease;
+            border: 4px solid #fff;
+        }
+
+        .team-member img:hover {
+            transform: scale(1.1);
+            border: 0px;
+        }
+
+        .team-member p {
+            font-size: 13px;
+            font-weight: bold;
+            color: #f1e4e4;
+            overflow-wrap: break-word;
+        }
+
+        .box-panel {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        /* Responsive styling */
+        @media (max-width: 768px) {
+            .team-members {
+                flex-direction: column;
+                margin-top: 3rem;
+            }
+        }
+
+        /* Animation for the header */
+        .heading-contributors {
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+            font-size: 100px;
+            font-stretch: expanded;
+            padding-bottom: 1px;
+            line-height: 120px;
+            text-transform: uppercase;
+            color: transparent;
+            -webkit-text-stroke: 0.1px #140000;
+            background: url(img/background.jpeg);
+            -webkit-background-clip: text;
+            background-position: 0 0;
+            animation: back 10s linear infinite;
+        }
+
+        @keyframes back {
+            100% {
+                background-position: 200% 0;
+            }
+        }
+    </style>
 </head>
-<style>
-    
-body {
-    /* padding-top: 80px; */
-    background-color: #040b21;
-}
-.home-btn{
-    height: 50px;
-    background-color:black ;
-    color: white;
-    border-radius: 10px;
-}
-
-.team-top {
-    text-align: center;
-}
-
-.team-top h3 {
-    font-size: 36px;
-    margin-top: 20px;
-    border: 2.5px solid gray;
-}
-
-.team-members {
-    display: flex;
-    gap: 20px;
-    margin-top: 5rem;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-}
-
-.team-member {
-    text-align: center;
-}
-
-.team-member img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-bottom: 10px;
-    transition: transform 0.3s ease;
-    border: 4px solid #fff;
-}
-
-.team-member p {
-    font-size: 13px;
-    font-weight: bold;
-    color: rgb(241, 228, 228);
-}
-
-.team-member img:hover {
-    transform: scale(1.121);
-    border: 0px;
-    position: relative;
-}
-
-.team-member p:nth-child(1) {
-    z-index: 999;
-}
-
-.team-member p:nth-child(2) {
-    border: 2px solid #333;
-    background-color: #ffffff4a;
-    border-radius: 20px;
-    z-index: -1;
-}
-
-.box-panel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.widget-container {
-    transition: all 0.3s ease;
-}
-
-.common-flip-style {
-    width: 250px;
-    height: 250px;
-    cursor: pointer;
-}
-
-.common-box-style {
-    transform-style: preserve-3d;
-    backface-visibility: hidden;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transition: all 0.6s ease-in-out;
-    border-radius: 10px;
-}
-
-.flip-box {
-    position: relative;
-    perspective: 1000px;
-    transform-style: preserve-3d;
-}
-
-.box-front {
-    transform: none;
-    z-index: 1;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-.box-back {
-    width: calc(100% - 10px);
-    height: calc(100% - 10px);
-    transform: rotateX(0) rotateY(-180deg);
-    background: #fff;
-    color: red;
-    border: 5px solid orange;
-}
-
-.flip-box:hover .box-front {
-    transform: rotateX(0) rotateY(180deg);
-}
-
-.flip-box:hover .box-back {
-    border-radius: 50%;
-    color: red;
-    transform: none;
-}
 
-.box-content-wrapper {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    transform: translateZ(90px);
-    border-radius: 50%;
-}
-
-.box-content-wrapper img {
-    width: 90%;
-    height: 90%;
-    border-radius: 50%;
-    object-fit: cover;
-}
-/* text"meet our  awesome contributors" design for glowy animation  */
-.heading-contributors{
-    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-size: 100px;
-  font-stretch: expanded;
-  padding-bottom: 1px;
-  line-height: 120px;
-  text-transform: Uppercase;
-  color: transparent;
-  -webkit-text-stroke: 0.1px #140000;
-  background: url(img/Premium\ Photo\ _\ Vibrant\ mesh\ gradient\ with\ magenta\ and\ blue\ colors\ high\ quality\ image\ for\ backgrounds\ and\ web.jpeg);
-  -webkit-background-clip: text;
-  background-position: 0 0;
-  animation: back 10s linear infinite;
-  
-}
-@keyframes back{
-  100%{
-    
-    background-position: 200% 0;
-  }
-}
-
-
-
-
-</style>
 <body>
 
     <!-- Header Include -->
@@ -189,101 +115,72 @@
         <a href="index.html"><button class="home-btn">Back to Home</button></a>
     </header>
 
-    <!-- Sidebar Include -->
-    <aside>
-        <!-- Include your sidebar here -->
-    </aside>
-
-    <!-- Navbar Include -->
     <main>
         <section class="team">
             <div class="team-top" id="slide">
-                <div class="heading-contributors"><h2>Meet our awesome contributors 💙</h2></div>
-                <div class="team-members">
+                <div class="heading-contributors">
+                    <h2>Meet our awesome contributors 💙</h2>
+                </div>
+                <div class="team-members" id="team-members">
                     <!-- Team members' data will be dynamically populated here -->
                 </div>
+                <p id="error-message" style="color: red; display: none;">Failed to load contributors. Please try again later.</p>
             </div>
         </section>
     </main>
 
-    <!-- Footer Include -->
     <footer>
-        <!-- Include your footer here -->
+        <!-- Footer Content Here -->
     </footer>
 
     <script>
-        const ownerName = "PriyaGhosal";
-const repoName = "BuddyTrail";
-const apiURL = `https://api.github.com/repos/${ownerName}/${repoName}/contributors`;
-
-fetch(apiURL)
-    .then((response) => response.json())
-    .then((contributors) => {
-        const teamMembersDiv = document.querySelector(".team-members");
-        contributors.forEach((contributor) => {
-            const contributorDiv = document.createElement("div");
-            contributorDiv.classList.add("team-member");
-
-            const boxPanelSection = document.createElement("section");
-            boxPanelSection.classList.add("box-panel");
-            const widgetContainer = document.createElement("div");
-            widgetContainer.classList.add("widget-container");
-            const flipBox = document.createElement("div");
-            flipBox.classList.add("flip-box", "common-flip-style");
-            const boxFront = document.createElement("div");
-            boxFront.classList.add("box-front", "common-box-style");
-            const boxContentWrapperFront = document.createElement("div");
-            boxContentWrapperFront.classList.add("box-content-wrapper");
-            const contributorImageFront = document.createElement("img");
-            contributorImageFront.src = contributor.avatar_url;
-            contributorImageFront.alt = contributor.login;
-            boxContentWrapperFront.appendChild(contributorImageFront);
-            boxFront.appendChild(boxContentWrapperFront);
-
-            const boxBack = document.createElement("div");
-            boxBack.classList.add("box-back", "common-box-style", "box-bgi-effect");
-            const boxContentWrapperBack = document.createElement("div");
-            boxContentWrapperBack.classList.add("box-content-wrapper");
-            const boxContentBack = document.createElement("div");
-            boxContentBack.classList.add("box-content");
-            const contributorNameBack = document.createElement("h1");
-            contributorNameBack.textContent = "Hello there!";
-            const contributorRoleBack = document.createElement("h1");
-            contributorRoleBack.innerHTML = `I am the <strong>${contributor.login}</strong>.`;
-            const contributorCommitsBack = document.createElement("h1");
-            contributorCommitsBack.textContent = `Commits: ${contributor.contributions}`;
-            boxContentBack.appendChild(contributorNameBack);
-            boxContentBack.appendChild(contributorRoleBack);
-            boxContentBack.appendChild(contributorCommitsBack);
-            boxContentWrapperBack.appendChild(boxContentBack);
-            boxBack.appendChild(boxContentWrapperBack);
-
-            flipBox.appendChild(boxFront);
-            flipBox.appendChild(boxBack);
-            widgetContainer.appendChild(flipBox);
-            boxPanelSection.appendChild(widgetContainer);
-            contributorDiv.appendChild(boxPanelSection);
-
-            const contributorLink = document.createElement("a");
-            contributorLink.href = contributor.html_url;
-            contributorLink.target = "_blank";
-
-            const contributorName = document.createElement("p");
-            contributorName.textContent = contributor.login;
-
-            const contributorRole = document.createElement("p");
-            contributorRole.textContent = "Commits: " + contributor.contributions;
-
-            contributorDiv.appendChild(contributorLink);
-            teamMembersDiv.appendChild(contributorDiv);
-        });
-    })
-    .catch((error) => {
-        console.error("Error fetching contributors:", error);
-    });
-
-
-    
+        // Get owner and repo from query params (e.g., ?owner=PriyaGhosal&repo=BuddyTrail)
+        const urlParams = new URLSearchParams(window.location.search);
+        const ownerName = urlParams.get('owner') || "PriyaGhosal"; // Fallback to default owner
+        const repoName = urlParams.get('repo') || "BuddyTrail"; // Fallback to default repo
+        const apiURL = `https://api.github.com/repos/${ownerName}/${repoName}/contributors`;
+
+        fetch(apiURL)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error("Network response was not ok");
+                }
+                return response.json();
+            })
+            .then((contributors) => {
+                const teamMembersDiv = document.getElementById("team-members");
+                contributors.forEach((contributor) => {
+                    const contributorDiv = document.createElement("div");
+                    contributorDiv.classList.add("team-member");
+
+                    const contributorImage = document.createElement("img");
+                    contributorImage.src = contributor.avatar_url;
+                    contributorImage.alt = `${contributor.login}'s avatar`;
+
+                    const contributorName = document.createElement("p");
+                    contributorName.textContent = contributor.login;
+
+                    const contributorCommits = document.createElement("p");
+                    contributorCommits.textContent = `Commits: ${contributor.contributions}`;
+
+                    const contributorLink = document.createElement("a");
+                    contributorLink.href = contributor.html_url;
+                    contributorLink.target = "_blank";
+                    contributorLink.appendChild(contributorDiv);
+
+                    contributorDiv.appendChild(contributorImage);
+                    contributorDiv.appendChild(contributorName);
+                    contributorDiv.appendChild(contributorCommits);
+
+                    teamMembersDiv.appendChild(contributorDiv);
+                });
+            })
+            .catch((error) => {
+                document.getElementById("error-message").style.display = "block";
+                console.error("Error fetching contributors:", error);
+            });
     </script>
+
 </body>
+
 </html>