fixed a bit

app/(main)/team/[teamId]/page.js

@@ -25,7 +25,7 @@ export default function TeamPage({ params }) {
           headers: {
             "Content-Type": "application/json",
           },
-          credentials: "include", // Important for auth
+          credentials: "include",
         });
 
         if (!response.ok) {
@@ -74,78 +74,155 @@ export default function TeamPage({ params }) {
   }
 
   return (
-    <div className="team-page-container">
-      <div className="navbar">
-        <div className="team-info">
-          <div className="team-name">Team Name: {team.name}</div>
-          <div className="team-code">Team Join Code: {team.code}</div>
+    <div className="team-page">
+      <div className="header">
+        <Link href="/team-selection" className="back-button">
+          ←
+        </Link>
+        <div className="team-name">{team.name}</div>
+        <div className="team-code">{team.code}</div>
+        <div className="timer">00:00</div>
+      </div>
+
+      <div className="content-container">
+        <div className="add-users-button">Add Users</div>
+
+        <div className="users-container">
+          {teamMembers.map((member, index) => (
+            <div key={member.id} className="user-card">
+              User #{index + 1}
+            </div>
+          ))}
+
+          <div className="add-user-icon">
+            <div className="plus-icon">+</div>
+          </div>
         </div>
       </div>
 
-      <div className="team-members">
-        {teamMembers.map((member) => (
-          <div
-            key={member.id}
-            className={`member-card ${
-              member.id === session?.user?.id ? "current-user" : ""
-            }`}
-          >
-            {member.username}
-          </div>
-        ))}
+      <div className="navbar">
+        <div className="nav-item">
+          <div className="nav-icon">🏠</div>
+        </div>
+        <div className="nav-item">
+          <div className="nav-icon">📊</div>
+        </div>
+        <div className="nav-item">
+          <div className="nav-icon">🏆</div>
+        </div>
+        <div className="nav-item">
+          <div className="nav-icon">👤</div>
+        </div>
       </div>
 
       <style jsx>{`
-        .team-page-container {
+        .team-page {
           display: flex;
           flex-direction: column;
-          align-items: center;
-          padding: 20px;
+          height: 100vh;
+          overflow: hidden;
+          font-family: Arial, sans-serif;
         }
-        .navbar {
-          position: sticky;
-          top: 0;
-          width: 100%;
-          background-color: #fff;
-          border-bottom: 1px solid #ccc;
-          padding: 10px 0;
-          text-align: center;
-          z-index: 1000;
-        }
-        .team-info {
-          display: flex;
-          justify-content: space-between;
-          width: 100%;
-          max-width: 600px;
-          padding: 0 20px;
-        }
-        .team-name {
-          font-size: 24px;
+
+        .header {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          padding: 15px 10px;
+          background-color: #c8b6a6;
+          color: white;
           font-weight: bold;
+          position: relative;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
+
+        .back-button {
+          font-size: 24px;
+          color: black;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+        }
+
+        .team-name,
         .team-code {
-          font-size: 18px;
-          color: #555;
+          text-align: center;
+          font-weight: 600;
+          color: black;
         }
-        .team-members {
+
+        .timer {
+          text-align: right;
+          color: black;
+        }
+
+        .content-container {
+          flex: 1;
+          background-color: #8ecae6;
           display: flex;
           flex-direction: column;
-          align-items: center;
-          width: 100%;
-          max-width: 600px;
-          margin-top: 20px;
-        }
-        .member-card {
-          width: 100%;
           padding: 10px;
-          margin: 5px 0;
-          border: 1px solid #ccc;
-          border-radius: 4px;
-          background-color: #f9f9f9;
-          text-align: center;
+          overflow-y: auto;
         }
-        .member-card.current-user {
-          background-color: #d3d3d3;
+
+        .add-users-button {
+          background-color: #e9c46a;
+          color: black;
+          text-align: center;
+          padding: 15px;
+          margin: 10px 0;
+          border-radius: 15px;
+          font-weight: bold;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .users-container {
+          flex: 1;
+          background-color: #f6bd60;
+          border-radius: 10px;
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          overflow-y: auto;
+        }
+
+        .user-card {
+          background-color: #c8b6a6;
+          color: black;
+          padding: 15px;
+          border-radius: 8px;
+          text-align: center;
+          font-weight: bold;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .add-user-icon {
+          display: flex;
+          justify-content: center;
+          margin-top: 10px;
+        }
+
+        .plus-icon {
+          width: 30px;
+          height: 30px;
+          background-color: #c8b6a6;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+          color: black;
+        }
+
+        .navbar {
+          display: flex;
+          justify-content: space-around;
+          padding: 15px 0;
+          background-color: #c8b6a6;
+        }
+
+        .nav-icon {
+          font-size: 24px;
         }
       `}</style>
     </div>