diff --git a/app/routes/teams/$teamId.settings.tsx b/app/routes/teams/$teamId.settings.tsx
new file mode 100644
index 0000000..00f9c7f
--- /dev/null
+++ b/app/routes/teams/$teamId.settings.tsx
@@ -0,0 +1,213 @@
+import { Form, redirect, useNavigate } from "react-router";
+import { getAuth } from "@clerk/react-router/server";
+import type { Route } from "./+types/$teamId.settings";
+import {
+ findTeamById,
+ updateTeam,
+ removeTeamOwner,
+} from "~/models/team";
+import { findSeasonById } from "~/models/season";
+import { Button } from "~/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+
+export async function loader(args: Route.LoaderArgs) {
+ const { params } = args;
+ const { teamId } = params;
+ const { userId } = await getAuth(args);
+
+ if (!userId) {
+ throw new Response("You must be logged in", { status: 401 });
+ }
+
+ const team = await findTeamById(teamId);
+
+ if (!team) {
+ throw new Response("Team not found", { status: 404 });
+ }
+
+ // Only the team owner can access settings
+ if (team.ownerId !== userId) {
+ throw new Response("You do not have access to this team", { status: 403 });
+ }
+
+ const season = await findSeasonById(team.seasonId);
+
+ if (!season) {
+ throw new Response("Season not found", { status: 404 });
+ }
+
+ return { team, season };
+}
+
+export async function action(args: Route.ActionArgs) {
+ const { params, request } = args;
+ const { teamId } = params;
+ const { userId } = await getAuth(args);
+
+ if (!userId) {
+ throw new Response("You must be logged in", { status: 401 });
+ }
+
+ const team = await findTeamById(teamId);
+
+ if (!team) {
+ throw new Response("Team not found", { status: 404 });
+ }
+
+ // Only the team owner can modify settings
+ if (team.ownerId !== userId) {
+ throw new Response("You do not have access to this team", { status: 403 });
+ }
+
+ const formData = await request.formData();
+ const intent = formData.get("intent");
+
+ if (intent === "update") {
+ const name = formData.get("name");
+ const logoUrl = formData.get("logoUrl");
+
+ if (!name || typeof name !== "string") {
+ return { error: "Team name is required" };
+ }
+
+ await updateTeam(teamId, {
+ name: name.trim(),
+ logoUrl: logoUrl && typeof logoUrl === "string" ? logoUrl.trim() : undefined,
+ });
+
+ const season = await findSeasonById(team.seasonId);
+ return redirect(`/leagues/${season?.leagueId}?updated=true`);
+ }
+
+ if (intent === "leave") {
+ await removeTeamOwner(teamId);
+ const season = await findSeasonById(team.seasonId);
+ return redirect(`/leagues/${season?.leagueId}?left=true`);
+ }
+
+ return { error: "Invalid action" };
+}
+
+export default function TeamSettings({ loaderData }: Route.ComponentProps) {
+ const { team, season } = loaderData;
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
Team Settings
+
+
+
+ Manage your team settings and preferences
+
+
+
+
+
+
+ Team Information
+
+ Update your team name and logo
+
+
+
+
+
+
+
+
+
+ Danger Zone
+
+ Irreversible actions for your team
+
+
+
+
+
+
+
+
+
+ Are you sure?
+
+ This will remove you as the owner of "{team.name}" and make the team
+ available for others to claim. This action cannot be undone.
+
+
+
+ Cancel
+
+
+
+
+
+
+