fixed a bit

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

@@ -1,5 +1,5 @@
 'use client'; // Mark as a Client Component
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { joinTeam } from '../../actions/auth';
@@ -11,17 +11,18 @@ export default function TeamSelection() {
     const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
 
-    // Redirect if not authenticated
-    if (status === 'unauthenticated') {
-        router.push('/login');
-        return null;
-    }
+    // Use useEffect for navigation instead of doing it in render
+    useEffect(() => {
+        // Redirect if not authenticated
+        if (status === 'unauthenticated') {
+            router.push('/login');
+        }
 
-    // Redirect if user is admin
-    if (status === 'authenticated' && session?.user?.role === 'admin') {
-        router.push('/admin');
-        return null;
-    }
+        // Redirect if user is admin
+        if (status === 'authenticated' && session?.user?.role === 'admin') {
+            router.push('/admin');
+        }
+    }, [status, session, router]);
 
     const handleJoinTeam = async (e) => {
         e.preventDefault();
@@ -48,6 +49,11 @@ export default function TeamSelection() {
         return <div className="loading">Loading...</div>;
     }
 
+    // Don't render anything if redirecting
+    if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) {
+        return null;
+    }
+
     return (
         <div className="team-selection-container">
             <div className="team-selection-card">