diff --git a/app/routes/leagues/$leagueId.tsx b/app/routes/leagues/$leagueId.tsx
index 86a69a4..fc497f8 100644
--- a/app/routes/leagues/$leagueId.tsx
+++ b/app/routes/leagues/$leagueId.tsx
@@ -183,134 +183,140 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
         )}
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {isUserCommissioner && season && availableTeamCount > 0 && (
-          <Card className="md:col-span-2 lg:col-span-3">
+      <div className="grid gap-6 md:grid-cols-3">
+        {/* Left Column - 2/3 width on desktop */}
+        <div className="md:col-span-2 space-y-6">
+          {isUserCommissioner && season && availableTeamCount > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Invite Link</CardTitle>
+                <CardDescription>
+                  Share this link to invite people to join your league (
+                  {availableTeamCount} spot{availableTeamCount !== 1 ? "s" : ""}{" "}
+                  available)
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    readOnly
+                    value={`${typeof window !== "undefined" ? window.location.origin : ""}/i/${season.inviteCode}`}
+                    className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted"
+                    onClick={(e) => e.currentTarget.select()}
+                  />
+                  <Button
+                    onClick={handleCopyInviteLink}
+                    variant={copied ? "default" : "outline"}
+                    size="sm"
+                  >
+                    {copied ? "Copied!" : "Copy"}
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Anyone with this link can join your league
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          <Card>
             <CardHeader>
-              <CardTitle>Invite Link</CardTitle>
+              <CardTitle>Teams</CardTitle>
               <CardDescription>
-                Share this link to invite people to join your league (
-                {availableTeamCount} spot{availableTeamCount !== 1 ? "s" : ""}{" "}
-                available)
+                {teams.length} team{teams.length !== 1 ? "s" : ""} in this league
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="flex items-center gap-2">
-                <input
-                  type="text"
-                  readOnly
-                  value={`${typeof window !== "undefined" ? window.location.origin : ""}/i/${season.inviteCode}`}
-                  className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted"
-                  onClick={(e) => e.currentTarget.select()}
-                />
-                <Button
-                  onClick={handleCopyInviteLink}
-                  variant={copied ? "default" : "outline"}
-                  size="sm"
-                >
-                  {copied ? "Copied!" : "Copy"}
-                </Button>
+            <CardContent>
+              <div className="space-y-3">
+                {teams.map((team) => {
+                  const isOwned = team.ownerId === currentUserId;
+                  const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
+                  return (
+                    <Card
+                      key={team.id}
+                      className={isOwned ? "border-primary" : ""}
+                    >
+                      <CardHeader>
+                        <CardTitle className="text-lg">{team.name}</CardTitle>
+                        <CardDescription>
+                          {team.ownerId ? (
+                            isOwned ? (
+                              <span className="text-primary font-medium">
+                                Your Team
+                              </span>
+                            ) : (
+                              <span>{ownerName || "Unknown Owner"}</span>
+                            )
+                          ) : (
+                            <span className="text-muted-foreground">
+                              Available
+                            </span>
+                          )}
+                        </CardDescription>
+                      </CardHeader>
+                    </Card>
+                  );
+                })}
               </div>
-              <p className="text-xs text-muted-foreground">
-                Anyone with this link can join your league
-              </p>
             </CardContent>
           </Card>
-        )}
+        </div>
 
-        <Card className="md:col-span-2 lg:col-span-3">
-          <CardHeader>
-            <CardTitle>Teams</CardTitle>
-            <CardDescription>
-              {teams.length} team{teams.length !== 1 ? "s" : ""} in this league
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {teams.map((team) => {
-                const isOwned = team.ownerId === currentUserId;
-                const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
-                return (
-                  <Card
-                    key={team.id}
-                    className={isOwned ? "border-primary" : ""}
-                  >
-                    <CardHeader>
-                      <CardTitle className="text-lg">{team.name}</CardTitle>
-                      <CardDescription>
-                        {team.ownerId ? (
-                          isOwned ? (
-                            <span className="text-primary font-medium">
-                              Your Team
-                            </span>
-                          ) : (
-                            <span>{ownerName || "Unknown Owner"}</span>
-                          )
-                        ) : (
-                          <span className="text-muted-foreground">
-                            Available
-                          </span>
-                        )}
-                      </CardDescription>
-                    </CardHeader>
-                  </Card>
-                );
-              })}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>League Info</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div>
-              <p className="text-sm text-muted-foreground">Created</p>
-              <p className="font-medium">
-                {new Date(league.createdAt).toLocaleDateString()}
-              </p>
-            </div>
-            {season && (
+        {/* Right Column - 1/3 width on desktop */}
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>League Info</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
               <div>
-                <p className="text-sm text-muted-foreground">Season Status</p>
-                <p className="font-medium capitalize">
-                  {season.status.replace("_", " ")}
+                <p className="text-sm text-muted-foreground">Created</p>
+                <p className="font-medium">
+                  {new Date(league.createdAt).toLocaleDateString()}
                 </p>
               </div>
-            )}
-          </CardContent>
-        </Card>
+              {season && (
+                <div>
+                  <p className="text-sm text-muted-foreground">Season Status</p>
+                  <p className="font-medium capitalize">
+                    {season.status.replace("_", " ")}
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Commissioners</CardTitle>
-            <CardDescription>
-              {commissioners.length} commissioner
-              {commissioners.length !== 1 ? "s" : ""}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {commissioners.map((commissioner) => {
-                const commissionerName = commissionerMap[commissioner.userId];
-                return (
-                  <div
-                    key={commissioner.id}
-                    className="py-2 border-b last:border-0"
-                  >
-                    <p className="font-medium">
-                      {commissionerName || "Unknown User"}
-                      {commissioner.userId === currentUserId && (
-                        <span className="ml-2 text-xs text-primary">(You)</span>
-                      )}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-          </CardContent>
-        </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Commissioners</CardTitle>
+              <CardDescription>
+                {commissioners.length} commissioner
+                {commissioners.length !== 1 ? "s" : ""}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {commissioners.map((commissioner) => {
+                  const commissionerName = commissionerMap[commissioner.userId];
+                  return (
+                    <div
+                      key={commissioner.id}
+                      className="py-2 border-b last:border-0"
+                    >
+                      <p className="font-medium">
+                        {commissionerName || "Unknown User"}
+                        {commissioner.userId === currentUserId && (
+                          <span className="ml-2 text-xs text-primary">(You)</span>
+                        )}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );