diff --git a/app/(main)/team/[teamId]/page.js b/app/(main)/team/[teamId]/page.js
index 50fa4b0..a313431 100644
--- a/app/(main)/team/[teamId]/page.js
+++ b/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>
diff --git a/app/(main)/team/[teamId]/route.js b/app/(main)/team/[teamId]/route.js
index bc57b7c..956fae0 100644
--- a/app/(main)/team/[teamId]/route.js
+++ b/app/(main)/team/[teamId]/route.js
@@ -1,105 +1,30 @@
-// app/api/teams/[teamId]/route.js
+// app/(main)/team/[teamId]/route.js
 import { queryOne, query } from "../../../../lib/db";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../../api/auth/[...nextauth]/route";
+import { redirect } from "next/navigation";
 
 export async function GET(request, context) {
   const session = await getServerSession(authOptions);
 
   if (!session) {
-    return new Response(JSON.stringify({ error: "Unauthorised" }), {
-      status: 401,
-    });
+    // Redirect to login page instead of returning JSON
+    return redirect("/login");
   }
 
   try {
-    const { teamId } = await context.params; // Await the params
+    const { teamId } = context.params;
 
-    // Convert teamId to number for proper comparison
-    const requestedTeamId = parseInt(teamId, 10);
-    const userTeamId = parseInt(session.user.teamId, 10);
+    // Instead of returning JSON, we should let the page component handle rendering
+    // This route.js file should only be used for API endpoints, not page rendering
 
-    // Log for debugging
-    console.log("Requested team:", requestedTeamId);
-    console.log("User team:", userTeamId);
-    console.log("User role:", session.user.role);
-
-    // Ensure the user is requesting their own team or is an admin
-    if (userTeamId !== requestedTeamId && session.user.role !== "admin") {
-      return new Response(
-        JSON.stringify({ error: "Not authorized to view this team" }),
-        { status: 403 }
-      );
-    }
-
-    const team = await queryOne(
-      "SELECT id, name, code FROM teams WHERE id = ?",
-      [requestedTeamId]
-    );
-
-    if (!team) {
-      return new Response(JSON.stringify({ error: "Team not found" }), {
-        status: 404,
-      });
-    }
-
-    const members = await query(
-      "SELECT id, username FROM users WHERE team_id = ?",
-      [requestedTeamId]
-    );
-
-    return new Response(JSON.stringify({ team, members }), { status: 200 });
+    // Redirect to the page component
+    return redirect(`/team/${teamId}`);
   } catch (error) {
+    console.error("Team fetch error:", error);
     return new Response(
       JSON.stringify({ error: "Failed to fetch team details" }),
       { status: 500 }
     );
   }
 }
-
-export async function PATCH(request, context) {
-  const session = await getServerSession(authOptions);
-
-  if (!session) {
-    return new Response(JSON.stringify({ error: "Unauthorised" }), {
-      status: 401,
-    });
-  }
-
-  try {
-    const { teamId } = await context.params; // Await the params
-    const requestedTeamId = parseInt(teamId, 10);
-    const { userId } = await request.json(); // Parse the request body
-
-    // Log for debugging
-    console.log("Requested team:", requestedTeamId);
-    console.log("User role:", session.user.role);
-
-    // Ensure the user is an admin or the user themselves
-    if (session.user.role !== "admin" && session.user.id !== userId) {
-      return new Response(
-        JSON.stringify({ error: "Not authorized to change this team" }),
-        { status: 403 }
-      );
-    }
-
-    // Update the user's team
-    await queryOne("UPDATE users SET teamId = ? WHERE id = ?", [
-      requestedTeamId,
-      userId,
-    ]);
-
-    // Update the session with the new teamId
-    session.user.teamId = requestedTeamId;
-
-    return new Response(
-      JSON.stringify({ success: "Team updated successfully" }),
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error("Team update error:", error);
-    return new Response(JSON.stringify({ error: "Failed to update team" }), {
-      status: 500,
-    });
-  }
-}
diff --git a/app/api/teams/[teamId]/route.js b/app/api/teams/[teamId]/route.js
index d317871..e26b6a5 100644
--- a/app/api/teams/[teamId]/route.js
+++ b/app/api/teams/[teamId]/route.js
@@ -1,3 +1,4 @@
+// app/api/teams/[teamId]/route.js
 import { queryOne, query } from "../../../../lib/db";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../auth/[...nextauth]/route";
@@ -35,7 +36,12 @@ export async function GET(request, { params }) {
       [teamId]
     );
 
-    return new Response(JSON.stringify({ team, members }), { status: 200 });
+    return new Response(JSON.stringify({ team, members }), {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
   } catch (error) {
     console.error("Team fetch error:", error);
     return new Response(