fixed a bit

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

@@ -0,0 +1,113 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function CreateTeam() {
+    const { data: session, status } = useSession();
+    const [teamName, setTeamName] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const router = useRouter();
+
+    // Redirect if not authenticated
+    if (status === 'unauthenticated') {
+        router.push('/login');
+        return null;
+    }
+
+    // Redirect if user is admin
+    if (status === 'authenticated' && session?.user?.role === 'admin') {
+        router.push('/admin');
+        return null;
+    }
+
+    const handleCreateTeam = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+
+        try {
+            const response = await fetch('/api/teams/create', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: teamName,
+                    userId: session.user.id
+                }),
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                router.push(`/team/${result.teamId}`);
+            } else {
+                setError(result.error || 'Failed to create team');
+            }
+        } catch (err) {
+            setError('An unexpected error occurred');
+            console.error(err);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (status === 'loading') {
+        return <div className="loading">Loading...</div>;
+    }
+
+    return (
+        <div className="team-selection-container">
+            <div className="page-header">
+                <Link href="/team-selection" className="back-button">←</Link>
+                <div className="page-title">Create Team</div>
+                <div className="placeholder"></div>
+            </div>
+
+            <div className="team-selection-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="team-input"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="team-button"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Creating...' : 'Create Team'}
+                    </button>
+                </form>
+                {error && <p className="error">{error}</p>}
+                <div className="team-options">
+                    <Link href="/team-selection" className="create-team-link">Back to Team Selection</Link>
+                </div>
+            </div>
+
+            <div className="nav-bar">
+                <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>
+        </div>
+    );
+}

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">