just need to fix the map to clue function.

app/(main)/create-team/page.js

@@ -4,13 +4,12 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 
-// Removed the styles object for navbar
-
 export default function CreateTeam() {
-  const { data: session, status } = useSession();
+  const { data: session, status, update: updateSession } = useSession();
   const [teamName, setTeamName] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(true);
+  const [success, setSuccess] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -31,6 +30,11 @@ export default function CreateTeam() {
     setError("");
 
     try {
+      // Validate team name
+      if (!teamName || teamName.trim() === "") {
+        throw new Error("Team name is required");
+      }
+
       // Check session status before proceeding
       if (status !== "authenticated") {
         throw new Error("You must be logged in to create a team");
@@ -42,7 +46,7 @@ export default function CreateTeam() {
           "Content-Type": "application/json",
         },
         credentials: "include", // Important: include credentials with the request
-        body: JSON.stringify({ name: teamName }),
+        body: JSON.stringify({ name: teamName.trim() }),
       });
 
       const data = await response.json();
@@ -52,23 +56,33 @@ export default function CreateTeam() {
       }
 
       console.log("Team created successfully with ID:", data.teamId);
+      setSuccess(true);
 
-      // Force a session refresh to update the session with the new teamId
-      await fetch("/api/auth/session", {
-        method: "GET",
-        credentials: "include",
-      });
+      // Try to update the session with the new team ID
+      try {
+        // Wait briefly to ensure DB changes are reflected
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        await updateSession(); // Update the NextAuth session if possible
+      } catch (sessionErr) {
+        console.warn(
+          "Session update failed, using redirect instead:",
+          sessionErr
+        );
+      }
 
       // Use window.location for a hard navigation to ensure session is fully updated
-      window.location.href = `/${data.teamId}`;
+      setTimeout(() => {
+        window.location.href = `/${data.teamId}`;
+      }, 1000);
     } catch (err) {
       console.error("Team creation error:", err);
       setError(err.message);
+    } finally {
       setIsLoading(false);
     }
   };
 
-  if (isLoading) {
+  if (isLoading && !success) {
     return <div className="loading">Loading...</div>;
   }
 
@@ -82,33 +96,48 @@ export default function CreateTeam() {
 
       <div className="auth-container">
         <div className="auth-card">
-          <h1>Create a New Team</h1>
-          <form onSubmit={handleCreateTeam}>
-            <div className="form-group">
-              <input
-                type="text"
-                placeholder="Team Name"
-                value={teamName}
-                onChange={(e) => setTeamName(e.target.value)}
-                required
-                className="auth-input"
-              />
+          {success ? (
+            <div className="success-message">
+              <div className="success-icon">✅</div>
+              <h2>Team Created Successfully!</h2>
+              <p>Redirecting to your new team page...</p>
             </div>
-            <button type="submit" className="auth-button" disabled={isLoading}>
-              {isLoading ? "Creating..." : "Create Team"}
-            </button>
-          </form>
-          {error && <p className="error-message">{error}</p>}
+          ) : (
+            <>
+              <h1>Create a New Team</h1>
+              <form onSubmit={handleCreateTeam}>
+                <div className="form-group">
+                  <input
+                    type="text"
+                    placeholder="Team Name"
+                    value={teamName}
+                    onChange={(e) => setTeamName(e.target.value)}
+                    required
+                    className="auth-input"
+                    maxLength={50}
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="auth-button"
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Creating..." : "Create Team"}
+                </button>
+              </form>
+              {error && <p className="error-message">{error}</p>}
+            </>
+          )}
           <div className="team-options">
             <Link href="/team-selection">
-              <button className="auth-button">Back to Team Selection</button>
+              <button className="auth-button secondary-button">
+                Back to Team Selection
+              </button>
             </Link>
           </div>
         </div>
       </div>
 
-      {/* Navbar removed from here */}
-
       <style jsx>{`
         .auth-page {
           display: flex;
@@ -159,7 +188,18 @@ export default function CreateTeam() {
           color: red;
           margin-top: 10px;
         }
-        /* Navbar styles removed from here */
+        .success-message {
+          text-align: center;
+          padding: 20px 0;
+        }
+        .success-icon {
+          font-size: 48px;
+          margin-bottom: 10px;
+          color: #4caf50;
+        }
+        .secondary-button {
+          background-color: #a98467;
+        }
       `}</style>
     </div>
   );

app/(main)/leaderboard/page.js

@@ -162,17 +162,24 @@ export default function LeaderboardPage() {
           <div className="nav-icon">🗺️</div>
           <div className="nav-label">Map</div>
         </Link>
-        <Link href="/leaderboard" className="nav-item active">
+        <Link href="/stats" className="nav-item">
           <div className="nav-icon">📊</div>
           <div className="nav-label">Stats</div>
         </Link>
-        <Link href="/team-selection" className="nav-item">
+        <Link
+          href={
+            teams.length > 0 && session?.user?.teamId
+              ? `/${session.user.teamId}`
+              : "/team-selection"
+          }
+          className="nav-item"
+        >
           <div className="nav-icon">👥</div>
           <div className="nav-label">Team</div>
         </Link>
-        <Link href="/profile" className="nav-item">
-          <div className="nav-icon">👤</div>
-          <div className="nav-label">Profile</div>
+        <Link href="/leaderboard" className="nav-item active">
+          <div className="nav-icon">🏆</div>
+          <div className="nav-label">Leaderboard</div>
         </Link>
       </div>
 

app/(main)/map/page.js

@@ -43,7 +43,7 @@ export default function MapPage() {
     window.location.href = url;
   }, []);
 
-  // Fetch team data for the current user
+  // Enhanced fetchTeamData function
   const fetchTeamData = useCallback(async () => {
     try {
       const response = await fetch("/api/user/team", {
@@ -71,6 +71,7 @@ export default function MapPage() {
       }
 
       const data = await response.json();
+      console.log("Team data loaded:", data);
       setTeamData(data);
       return data;
     } catch (err) {
@@ -573,6 +574,13 @@ export default function MapPage() {
     });
   }, [mapSvg, clues, enhanceSvgMap]);
 
+  // Add useEffect to load team data
+  useEffect(() => {
+    if (status === "authenticated") {
+      fetchTeamData();
+    }
+  }, [status, fetchTeamData]);
+
   if (status === "loading" || loading) {
     return (
       <div className={styles["loading-container"]}>
@@ -620,7 +628,7 @@ export default function MapPage() {
       {/* Map Banner with team info and timer */}
       <div className={styles["map-banner"]}>
         <div className={styles["team-name"]}>
-          {teamData?.team?.name || "Your Team"}
+          {teamData?.team?.name || "Loading..."}
         </div>
         <div className={styles["elapsed-time"]}>
           <span className={styles["time-value"]}>{elapsedTime}</span>
@@ -667,9 +675,9 @@ export default function MapPage() {
           <div className={styles["nav-icon"]}>👥</div>
           <div className={styles["nav-label"]}>Team</div>
         </Link>
-        <Link href="/team-selection" className={styles["nav-item"]}>
-          <div className={styles["nav-icon"]}>🔙</div>
-          <div className={styles["nav-label"]}>Back</div>
+        <Link href="/leaderboard" className={styles["nav-item"]}>
+          <div className={styles["nav-icon"]}>🏆</div>
+          <div className={styles["nav-label"]}>Leaderboard</div>
         </Link>
       </nav>
     </div>