just need to fix the map to clue function.

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>