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>
   );