From 61890ae20bf1f4b9d8caed711965c905739844b3 Mon Sep 17 00:00:00 2001
From: Haelnorr <lockedonohoe@gmail.com>
Date: Sat, 14 Feb 2026 21:08:00 +1100
Subject: [PATCH] updated season league view page

---
 internal/db/getlist.go                        |   4 +
 internal/db/season.go                         |  56 +++++
 internal/embedfs/web/js/admin.js              |  41 +--
 internal/embedfs/web/js/tabs.js               |  50 ++++
 internal/handlers/season_league_add_team.go   |   2 +-
 internal/handlers/season_league_detail.go     |  21 +-
 internal/handlers/season_league_finals.go     |  49 ++++
 internal/handlers/season_league_fixtures.go   |  49 ++++
 internal/handlers/season_league_stats.go      |  49 ++++
 internal/handlers/season_league_table.go      |  49 ++++
 internal/handlers/season_league_teams.go      |  60 +++++
 internal/handlers/teams_new.go                |   4 +-
 internal/server/routes.go                     |  27 +-
 .../view/adminview/dashboard_layout.templ     |   3 +-
 .../view/seasonsview/leagues_section.templ    |   2 +-
 .../seasonsview/season_league_finals.templ    |  15 ++
 .../seasonsview/season_league_fixtures.templ  |  15 ++
 .../seasonsview/season_league_layout.templ    | 129 ++++++++++
 .../view/seasonsview/season_league_page.templ | 234 ------------------
 .../seasonsview/season_league_stats.templ     |  15 ++
 .../seasonsview/season_league_table.templ     |  15 ++
 .../seasonsview/season_league_teams.templ     | 151 +++++++++++
 internal/view/teamsview/new_form.templ        |  53 ++--
 23 files changed, 791 insertions(+), 302 deletions(-)
 create mode 100644 internal/embedfs/web/js/tabs.js
 create mode 100644 internal/handlers/season_league_finals.go
 create mode 100644 internal/handlers/season_league_fixtures.go
 create mode 100644 internal/handlers/season_league_stats.go
 create mode 100644 internal/handlers/season_league_table.go
 create mode 100644 internal/handlers/season_league_teams.go
 create mode 100644 internal/view/seasonsview/season_league_finals.templ
 create mode 100644 internal/view/seasonsview/season_league_fixtures.templ
 create mode 100644 internal/view/seasonsview/season_league_layout.templ
 delete mode 100644 internal/view/seasonsview/season_league_page.templ
 create mode 100644 internal/view/seasonsview/season_league_stats.templ
 create mode 100644 internal/view/seasonsview/season_league_table.templ
 create mode 100644 internal/view/seasonsview/season_league_teams.templ

diff --git a/internal/db/getlist.go b/internal/db/getlist.go
index 2b96b9a..d94007d 100644
--- a/internal/db/getlist.go
+++ b/internal/db/getlist.go
@@ -77,6 +77,10 @@ func GetList[T any](tx bun.Tx) *listgetter[T] {
 	return l
 }
 
+func (l *listgetter[T]) String() string {
+	return l.q.String()
+}
+
 func (l *listgetter[T]) Join(join string, args ...any) *listgetter[T] {
 	l.q = l.q.Join(join, args...)
 	return l
diff --git a/internal/db/season.go b/internal/db/season.go
index 3567bfe..7a2bf0e 100644
--- a/internal/db/season.go
+++ b/internal/db/season.go
@@ -9,6 +9,22 @@ import (
 	"github.com/uptrace/bun"
 )
 
+// SeasonStatus represents the current status of a season
+type SeasonStatus string
+
+const (
+	// StatusUpcoming means the season has not started yet
+	StatusUpcoming SeasonStatus = "upcoming"
+	// StatusInProgress means the regular season is active
+	StatusInProgress SeasonStatus = "in_progress"
+	// StatusFinalsSoon means regular season ended, finals upcoming
+	StatusFinalsSoon SeasonStatus = "finals_soon"
+	// StatusFinals means finals are in progress
+	StatusFinals SeasonStatus = "finals"
+	// StatusCompleted means the season has finished
+	StatusCompleted SeasonStatus = "completed"
+)
+
 type Season struct {
 	bun.BaseModel `bun:"table:seasons,alias:s"`
 
@@ -107,6 +123,46 @@ type LeagueWithTeams struct {
 	Teams  []*Team
 }
 
+// GetStatus returns the current status of the season based on dates
+func (s *Season) GetStatus() SeasonStatus {
+	now := time.Now()
+
+	if now.Before(s.StartDate) {
+		return StatusUpcoming
+	}
+
+	if !s.FinalsStartDate.IsZero() {
+		if !s.FinalsEndDate.IsZero() && now.After(s.FinalsEndDate.Time) {
+			return StatusCompleted
+		}
+		if now.After(s.FinalsStartDate.Time) {
+			return StatusFinals
+		}
+		if !s.EndDate.IsZero() && now.After(s.EndDate.Time) {
+			return StatusFinalsSoon
+		}
+		return StatusInProgress
+	}
+
+	if !s.EndDate.IsZero() && now.After(s.EndDate.Time) {
+		return StatusCompleted
+	}
+
+	return StatusInProgress
+}
+
+// GetDefaultTab returns the default tab to show based on the season status
+func (s *Season) GetDefaultTab() string {
+	switch s.GetStatus() {
+	case StatusInProgress:
+		return "table"
+	case StatusUpcoming:
+		return "teams"
+	default:
+		return "finals"
+	}
+}
+
 func (s *Season) HasLeague(leagueID int) bool {
 	for _, league := range s.Leagues {
 		if league.ID == leagueID {
diff --git a/internal/embedfs/web/js/admin.js b/internal/embedfs/web/js/admin.js
index 04a17cd..7b66770 100644
--- a/internal/embedfs/web/js/admin.js
+++ b/internal/embedfs/web/js/admin.js
@@ -236,45 +236,18 @@ function sortRolesColumn(field, currentOrder, currentOrderBy) {
 }
 
 // Handle HTMX navigation and initialization
+// Tab navigation active state is handled by tabs.js (generic).
+// This file only handles admin-specific concerns (flatpickr, multi-select).
 document.addEventListener("DOMContentLoaded", function () {
   // Initialize flatpickr on page load
   initFlatpickr();
 
-  // Update active nav item after HTMX navigation
   document.body.addEventListener("htmx:afterSwap", function (event) {
-    if (event.detail.target.id === "admin-content") {
-      // Get the current URL path
-      const path = window.location.pathname;
-      const section = path.split("/").pop() || "users";
-
-      // Update active state on nav items
-      document.querySelectorAll("nav a").forEach(function (link) {
-        const href = link.getAttribute("href");
-        if (href && href.includes("/" + section)) {
-          link.classList.remove(
-            "border-transparent",
-            "text-subtext0",
-            "hover:text-text",
-            "hover:border-surface2"
-          );
-          link.classList.add("border-blue", "text-blue", "font-semibold");
-        } else {
-          link.classList.remove("border-blue", "text-blue", "font-semibold");
-          link.classList.add(
-            "border-transparent",
-            "text-subtext0",
-            "hover:text-text",
-            "hover:border-surface2"
-          );
-        }
-      });
-
-      // Re-initialize flatpickr after content swap
-      initFlatpickr();
-    }
-
-    // Re-initialize flatpickr when audit results are updated
-    if (event.detail.target.id === "audit-results-container") {
+    // Re-initialize flatpickr after admin content swap
+    if (
+      event.detail.target.id === "admin-content" ||
+      event.detail.target.id === "audit-results-container"
+    ) {
       initFlatpickr();
     }
   });
diff --git a/internal/embedfs/web/js/tabs.js b/internal/embedfs/web/js/tabs.js
new file mode 100644
index 0000000..57309f7
--- /dev/null
+++ b/internal/embedfs/web/js/tabs.js
@@ -0,0 +1,50 @@
+// Generic tab navigation handler
+// Manages active tab styling after HTMX content swaps.
+//
+// Usage: Add data-tab-nav="<content-target-id>" to your <nav> element.
+// Tab links inside the nav should have href attributes ending with the section name.
+//
+// Example:
+//   <nav data-tab-nav="admin-content">
+//     <a href="/admin/users" hx-post="/admin/users" hx-target="#admin-content">Users</a>
+//   </nav>
+//   <main id="admin-content">...</main>
+
+(function () {
+  var activeClasses = ["border-blue", "text-blue", "font-semibold"];
+  var inactiveClasses = [
+    "border-transparent",
+    "text-subtext0",
+    "hover:text-text",
+    "hover:border-surface2",
+  ];
+
+  function updateActiveTab(targetId) {
+    var nav = document.querySelector('[data-tab-nav="' + targetId + '"]');
+    if (!nav) return;
+
+    var path = window.location.pathname;
+    var section = path.split("/").pop() || "";
+
+    nav.querySelectorAll("a").forEach(function (link) {
+      var href = link.getAttribute("href");
+      var isActive = href && href.endsWith("/" + section);
+
+      activeClasses.forEach(function (cls) {
+        isActive ? link.classList.add(cls) : link.classList.remove(cls);
+      });
+      inactiveClasses.forEach(function (cls) {
+        isActive ? link.classList.remove(cls) : link.classList.add(cls);
+      });
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.body.addEventListener("htmx:afterSwap", function (event) {
+      var targetId = event.detail.target.id;
+      if (targetId) {
+        updateActiveTab(targetId);
+      }
+    });
+  });
+})();
diff --git a/internal/handlers/season_league_add_team.go b/internal/handlers/season_league_add_team.go
index c6146c5..f3f516a 100644
--- a/internal/handlers/season_league_add_team.go
+++ b/internal/handlers/season_league_add_team.go
@@ -46,7 +46,7 @@ func SeasonLeagueAddTeam(
 		}
 
 		// Redirect to refresh the page
-		w.Header().Set("HX-Redirect", fmt.Sprintf("/seasons/%s/leagues/%s", season.ShortName, league.ShortName))
+		w.Header().Set("HX-Redirect", fmt.Sprintf("/seasons/%s/leagues/%s/teams", season.ShortName, league.ShortName))
 		w.WriteHeader(http.StatusOK)
 		notify.Success(s, w, r, "Team Added", fmt.Sprintf(
 			"Successfully added '%s' to the league.",
diff --git a/internal/handlers/season_league_detail.go b/internal/handlers/season_league_detail.go
index 2725a34..6e1f737 100644
--- a/internal/handlers/season_league_detail.go
+++ b/internal/handlers/season_league_detail.go
@@ -2,16 +2,17 @@ package handlers
 
 import (
 	"context"
+	"fmt"
 	"net/http"
 
 	"git.haelnorr.com/h/golib/hws"
 	"git.haelnorr.com/h/oslstats/internal/db"
 	"git.haelnorr.com/h/oslstats/internal/throw"
-	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
 	"github.com/pkg/errors"
 	"github.com/uptrace/bun"
 )
 
+// SeasonLeaguePage redirects to the appropriate default tab based on season status
 func SeasonLeaguePage(
 	s *hws.Server,
 	conn *db.DB,
@@ -22,22 +23,13 @@ func SeasonLeaguePage(
 
 		var season *db.Season
 		var league *db.League
-		var teams []*db.Team
-		var allTeams []*db.Team
 
 		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
 			var err error
-			season, league, teams, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			season, league, _, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
 			if err != nil {
 				return false, errors.Wrap(err, "db.GetSeasonLeague")
 			}
-
-			// Get all teams for the dropdown (to add teams)
-			allTeams, err = db.GetList[db.Team](tx).GetAll(ctx)
-			if err != nil {
-				return false, errors.Wrap(err, "db.GetList[Team]")
-			}
-
 			return true, nil
 		}); !ok {
 			return
@@ -48,6 +40,11 @@ func SeasonLeaguePage(
 			return
 		}
 
-		renderSafely(seasonsview.SeasonLeaguePage(season, league, teams, allTeams), s, r, w)
+		defaultTab := season.GetDefaultTab()
+		redirectURL := fmt.Sprintf(
+			"/seasons/%s/leagues/%s/%s",
+			seasonStr, leagueStr, defaultTab,
+		)
+		http.Redirect(w, r, redirectURL, http.StatusSeeOther)
 	})
 }
diff --git a/internal/handlers/season_league_finals.go b/internal/handlers/season_league_finals.go
new file mode 100644
index 0000000..2cd264c
--- /dev/null
+++ b/internal/handlers/season_league_finals.go
@@ -0,0 +1,49 @@
+package handlers
+
+import (
+	"context"
+	"net/http"
+
+	"git.haelnorr.com/h/golib/hws"
+	"git.haelnorr.com/h/oslstats/internal/db"
+	"git.haelnorr.com/h/oslstats/internal/throw"
+	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
+	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
+)
+
+// SeasonLeagueFinalsPage renders the finals tab of a season league page
+func SeasonLeagueFinalsPage(
+	s *hws.Server,
+	conn *db.DB,
+) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		seasonStr := r.PathValue("season_short_name")
+		leagueStr := r.PathValue("league_short_name")
+
+		var season *db.Season
+		var league *db.League
+
+		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
+			var err error
+			season, league, _, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetSeasonLeague")
+			}
+			return true, nil
+		}); !ok {
+			return
+		}
+
+		if season == nil || league == nil {
+			throw.NotFound(s, w, r, r.URL.Path)
+			return
+		}
+
+		if r.Method == "GET" {
+			renderSafely(seasonsview.SeasonLeagueFinalsPage(season, league), s, r, w)
+		} else {
+			renderSafely(seasonsview.SeasonLeagueFinals(), s, r, w)
+		}
+	})
+}
diff --git a/internal/handlers/season_league_fixtures.go b/internal/handlers/season_league_fixtures.go
new file mode 100644
index 0000000..bcd782c
--- /dev/null
+++ b/internal/handlers/season_league_fixtures.go
@@ -0,0 +1,49 @@
+package handlers
+
+import (
+	"context"
+	"net/http"
+
+	"git.haelnorr.com/h/golib/hws"
+	"git.haelnorr.com/h/oslstats/internal/db"
+	"git.haelnorr.com/h/oslstats/internal/throw"
+	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
+	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
+)
+
+// SeasonLeagueFixturesPage renders the fixtures tab of a season league page
+func SeasonLeagueFixturesPage(
+	s *hws.Server,
+	conn *db.DB,
+) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		seasonStr := r.PathValue("season_short_name")
+		leagueStr := r.PathValue("league_short_name")
+
+		var season *db.Season
+		var league *db.League
+
+		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
+			var err error
+			season, league, _, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetSeasonLeague")
+			}
+			return true, nil
+		}); !ok {
+			return
+		}
+
+		if season == nil || league == nil {
+			throw.NotFound(s, w, r, r.URL.Path)
+			return
+		}
+
+		if r.Method == "GET" {
+			renderSafely(seasonsview.SeasonLeagueFixturesPage(season, league), s, r, w)
+		} else {
+			renderSafely(seasonsview.SeasonLeagueFixtures(), s, r, w)
+		}
+	})
+}
diff --git a/internal/handlers/season_league_stats.go b/internal/handlers/season_league_stats.go
new file mode 100644
index 0000000..d3736a6
--- /dev/null
+++ b/internal/handlers/season_league_stats.go
@@ -0,0 +1,49 @@
+package handlers
+
+import (
+	"context"
+	"net/http"
+
+	"git.haelnorr.com/h/golib/hws"
+	"git.haelnorr.com/h/oslstats/internal/db"
+	"git.haelnorr.com/h/oslstats/internal/throw"
+	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
+	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
+)
+
+// SeasonLeagueStatsPage renders the stats tab of a season league page
+func SeasonLeagueStatsPage(
+	s *hws.Server,
+	conn *db.DB,
+) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		seasonStr := r.PathValue("season_short_name")
+		leagueStr := r.PathValue("league_short_name")
+
+		var season *db.Season
+		var league *db.League
+
+		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
+			var err error
+			season, league, _, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetSeasonLeague")
+			}
+			return true, nil
+		}); !ok {
+			return
+		}
+
+		if season == nil || league == nil {
+			throw.NotFound(s, w, r, r.URL.Path)
+			return
+		}
+
+		if r.Method == "GET" {
+			renderSafely(seasonsview.SeasonLeagueStatsPage(season, league), s, r, w)
+		} else {
+			renderSafely(seasonsview.SeasonLeagueStats(), s, r, w)
+		}
+	})
+}
diff --git a/internal/handlers/season_league_table.go b/internal/handlers/season_league_table.go
new file mode 100644
index 0000000..89aa803
--- /dev/null
+++ b/internal/handlers/season_league_table.go
@@ -0,0 +1,49 @@
+package handlers
+
+import (
+	"context"
+	"net/http"
+
+	"git.haelnorr.com/h/golib/hws"
+	"git.haelnorr.com/h/oslstats/internal/db"
+	"git.haelnorr.com/h/oslstats/internal/throw"
+	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
+	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
+)
+
+// SeasonLeagueTablePage renders the table tab of a season league page
+func SeasonLeagueTablePage(
+	s *hws.Server,
+	conn *db.DB,
+) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		seasonStr := r.PathValue("season_short_name")
+		leagueStr := r.PathValue("league_short_name")
+
+		var season *db.Season
+		var league *db.League
+
+		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
+			var err error
+			season, league, _, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetSeasonLeague")
+			}
+			return true, nil
+		}); !ok {
+			return
+		}
+
+		if season == nil || league == nil {
+			throw.NotFound(s, w, r, r.URL.Path)
+			return
+		}
+
+		if r.Method == "GET" {
+			renderSafely(seasonsview.SeasonLeagueTablePage(season, league), s, r, w)
+		} else {
+			renderSafely(seasonsview.SeasonLeagueTable(), s, r, w)
+		}
+	})
+}
diff --git a/internal/handlers/season_league_teams.go b/internal/handlers/season_league_teams.go
new file mode 100644
index 0000000..e2c75b7
--- /dev/null
+++ b/internal/handlers/season_league_teams.go
@@ -0,0 +1,60 @@
+package handlers
+
+import (
+	"context"
+	"net/http"
+
+	"git.haelnorr.com/h/golib/hws"
+	"git.haelnorr.com/h/oslstats/internal/db"
+	"git.haelnorr.com/h/oslstats/internal/throw"
+	seasonsview "git.haelnorr.com/h/oslstats/internal/view/seasonsview"
+	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
+)
+
+// SeasonLeagueTeamsPage renders the teams tab of a season league page
+func SeasonLeagueTeamsPage(
+	s *hws.Server,
+	conn *db.DB,
+) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		seasonStr := r.PathValue("season_short_name")
+		leagueStr := r.PathValue("league_short_name")
+
+		var season *db.Season
+		var league *db.League
+		var teams []*db.Team
+		var available []*db.Team
+
+		if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
+			var err error
+			season, league, teams, err = db.GetSeasonLeague(ctx, tx, seasonStr, leagueStr)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetSeasonLeague")
+			}
+
+			available, err = db.GetList[db.Team](tx).
+				Join("LEFT JOIN team_participations tp ON tp.team_id = t.id").
+				Where("NOT tp.season_id = ? OR tp.season_id IS NULL", season.ID).
+				GetAll(ctx)
+			if err != nil {
+				return false, errors.Wrap(err, "db.GetList[Team]")
+			}
+
+			return true, nil
+		}); !ok {
+			return
+		}
+
+		if season == nil || league == nil {
+			throw.NotFound(s, w, r, r.URL.Path)
+			return
+		}
+
+		if r.Method == "GET" {
+			renderSafely(seasonsview.SeasonLeagueTeamsPage(season, league, teams, available), s, r, w)
+		} else {
+			renderSafely(seasonsview.SeasonLeagueTeams(season, league, teams, available), s, r, w)
+		}
+	})
+}
diff --git a/internal/handlers/teams_new.go b/internal/handlers/teams_new.go
index 66c79a5..0423454 100644
--- a/internal/handlers/teams_new.go
+++ b/internal/handlers/teams_new.go
@@ -36,10 +36,10 @@ func NewTeamSubmit(
 			TrimSpace().Required().
 			MaxLength(25).MinLength(3).Value
 		shortName := getter.String("short_name").
-			TrimSpace().Required().
+			TrimSpace().Required().ToUpper().
 			MaxLength(3).MinLength(3).Value
 		altShortName := getter.String("alt_short_name").
-			TrimSpace().Required().
+			TrimSpace().Required().ToUpper().
 			MaxLength(3).MinLength(3).Value
 		color := getter.String("color").
 			TrimSpace().MaxLength(7).Value
diff --git a/internal/server/routes.go b/internal/server/routes.go
index 4dbf13c..9948375 100644
--- a/internal/server/routes.go
+++ b/internal/server/routes.go
@@ -101,7 +101,32 @@ func addRoutes(
 			Handler: handlers.SeasonLeaguePage(s, conn),
 		},
 		{
-			Path:    "/seasons/{season_short_name}/leagues/add/{league_short_name}",
+			Path:    "/seasons/{season_short_name}/leagues/{league_short_name}/table",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: handlers.SeasonLeagueTablePage(s, conn),
+		},
+		{
+			Path:    "/seasons/{season_short_name}/leagues/{league_short_name}/fixtures",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: handlers.SeasonLeagueFixturesPage(s, conn),
+		},
+		{
+			Path:    "/seasons/{season_short_name}/leagues/{league_short_name}/teams",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: handlers.SeasonLeagueTeamsPage(s, conn),
+		},
+		{
+			Path:    "/seasons/{season_short_name}/leagues/{league_short_name}/stats",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: handlers.SeasonLeagueStatsPage(s, conn),
+		},
+		{
+			Path:    "/seasons/{season_short_name}/leagues/{league_short_name}/finals",
+			Methods: []hws.Method{hws.MethodGET, hws.MethodPOST},
+			Handler: handlers.SeasonLeagueFinalsPage(s, conn),
+		},
+		{
+			Path:    "/seasons/{season_short_name}/add-league/{league_short_name}",
 			Method:  hws.MethodPOST,
 			Handler: perms.RequirePermission(s, permissions.SeasonsAddLeague)(handlers.SeasonAddLeague(s, conn)),
 		},
diff --git a/internal/view/adminview/dashboard_layout.templ b/internal/view/adminview/dashboard_layout.templ
index b9636c5..d501c6c 100644
--- a/internal/view/adminview/dashboard_layout.templ
+++ b/internal/view/adminview/dashboard_layout.templ
@@ -16,7 +16,7 @@ templ DashboardLayout(activeSection string) {
 		<!-- Single cohesive panel with tabs and content -->
 		<div class="border border-surface1 rounded-lg overflow-hidden">
 		<!-- Tab Navigation -->
-		<nav class="bg-surface0 border-b border-surface1">
+		<nav class="bg-surface0 border-b border-surface1" data-tab-nav="admin-content">
 			<ul class="flex flex-wrap">
 				@navItem("users", "Users", activeSection)
 				@navItem("roles", "Roles", activeSection)
@@ -30,6 +30,7 @@ templ DashboardLayout(activeSection string) {
 			</main>
 		</div>
 		</div>
+		<script src="/static/js/tabs.js" defer></script>
 		<script src="/static/js/admin.js" defer></script>
 	}
 }
diff --git a/internal/view/seasonsview/leagues_section.templ b/internal/view/seasonsview/leagues_section.templ
index 7e9c308..f15bc2f 100644
--- a/internal/view/seasonsview/leagues_section.templ
+++ b/internal/view/seasonsview/leagues_section.templ
@@ -66,7 +66,7 @@ templ LeaguesSection(season *db.Season, allLeagues []*db.League) {
 								for _, league := range availableLeagues {
 									<button
 										type="button"
-										hx-post={ "/seasons/" + season.ShortName + "/leagues/add/" + league.ShortName }
+										hx-post={ "/seasons/" + season.ShortName + "/add-league/" + league.ShortName }
 										hx-target="#leagues-section"
 										hx-swap="outerHTML"
 										class="flex items-center gap-2 bg-surface1 hover:bg-surface2 border border-overlay0 rounded-lg px-3 py-2 transition hover:cursor-pointer"
diff --git a/internal/view/seasonsview/season_league_finals.templ b/internal/view/seasonsview/season_league_finals.templ
new file mode 100644
index 0000000..2311ef4
--- /dev/null
+++ b/internal/view/seasonsview/season_league_finals.templ
@@ -0,0 +1,15 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+
+templ SeasonLeagueFinalsPage(season *db.Season, league *db.League) {
+	@SeasonLeagueLayout("finals", season, league) {
+		@SeasonLeagueFinals()
+	}
+}
+
+templ SeasonLeagueFinals() {
+	<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
+		<p class="text-subtext0 text-lg">Coming Soon...</p>
+	</div>
+}
diff --git a/internal/view/seasonsview/season_league_fixtures.templ b/internal/view/seasonsview/season_league_fixtures.templ
new file mode 100644
index 0000000..b3286d8
--- /dev/null
+++ b/internal/view/seasonsview/season_league_fixtures.templ
@@ -0,0 +1,15 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+
+templ SeasonLeagueFixturesPage(season *db.Season, league *db.League) {
+	@SeasonLeagueLayout("fixtures", season, league) {
+		@SeasonLeagueFixtures()
+	}
+}
+
+templ SeasonLeagueFixtures() {
+	<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
+		<p class="text-subtext0 text-lg">Coming Soon...</p>
+	</div>
+}
diff --git a/internal/view/seasonsview/season_league_layout.templ b/internal/view/seasonsview/season_league_layout.templ
new file mode 100644
index 0000000..e550ead
--- /dev/null
+++ b/internal/view/seasonsview/season_league_layout.templ
@@ -0,0 +1,129 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/view/baseview"
+import "git.haelnorr.com/h/oslstats/internal/db"
+import "fmt"
+
+templ SeasonLeagueLayout(activeSection string, season *db.Season, league *db.League) {
+	@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
+		<div class="max-w-screen-2xl mx-auto px-4 py-8">
+			<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
+				<!-- Header Section -->
+				<div class="bg-surface0 border-b border-surface1 px-6 py-8">
+					<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
+						<div>
+							<h1 class="text-4xl font-bold text-text mb-2">{ season.Name } - { league.Name }</h1>
+							<div class="flex items-center gap-2 flex-wrap">
+								<span class="inline-block bg-surface1 px-3 py-1 rounded text-sm text-subtext0 font-mono">
+									{ season.ShortName }
+								</span>
+								<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
+									{ league.ShortName }
+								</span>
+								@SlapVersionBadge(season.SlapVersion)
+								@StatusBadge(season, false, false)
+							</div>
+						</div>
+						<div class="flex gap-2">
+							<a
+								href={ templ.SafeURL("/seasons/" + season.ShortName) }
+								class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
+                       bg-surface1 hover:bg-surface2 text-text transition"
+							>
+								Back to Season
+							</a>
+						</div>
+					</div>
+					<!-- Season Dates -->
+					<div class="mt-4 pt-4 border-t border-surface1">
+						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<!-- Regular Season -->
+							<div class="bg-mantle border border-surface1 rounded-lg p-4">
+								<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
+									<span class="text-blue">&#9679;</span>
+									Regular Season
+								</h3>
+								<div class="grid grid-cols-2 gap-4">
+									<div class="text-center">
+										<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
+										<div class="text-sm text-text font-medium">{ formatDateLong(season.StartDate) }</div>
+									</div>
+									<div class="text-center">
+										<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
+										if !season.EndDate.IsZero() {
+											<div class="text-sm text-text font-medium">{ formatDateLong(season.EndDate.Time) }</div>
+										} else {
+											<div class="text-sm text-subtext1 italic">Not set</div>
+										}
+									</div>
+								</div>
+							</div>
+							<!-- Finals -->
+							<div class="bg-mantle border border-surface1 rounded-lg p-4">
+								<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
+									<span class="text-yellow">&#9733;</span>
+									Finals
+								</h3>
+								<div class="grid grid-cols-2 gap-4">
+									<div class="text-center">
+										<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
+										if !season.FinalsStartDate.IsZero() {
+											<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsStartDate.Time) }</div>
+										} else {
+											<div class="text-sm text-subtext1 italic">Not set</div>
+										}
+									</div>
+									<div class="text-center">
+										<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
+										if !season.FinalsEndDate.IsZero() {
+											<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsEndDate.Time) }</div>
+										} else {
+											<div class="text-sm text-subtext1 italic">Not set</div>
+										}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- Tab Navigation -->
+				<nav class="bg-surface0 border-b border-surface1" data-tab-nav="season-league-content">
+					<ul class="flex flex-wrap">
+						@leagueNavItem("table", "Table", activeSection, season, league)
+						@leagueNavItem("fixtures", "Fixtures", activeSection, season, league)
+						@leagueNavItem("teams", "Teams", activeSection, season, league)
+						@leagueNavItem("stats", "Stats", activeSection, season, league)
+						@leagueNavItem("finals", "Finals", activeSection, season, league)
+					</ul>
+				</nav>
+				<!-- Content Area -->
+				<main class="bg-crust p-6" id="season-league-content">
+					{ children... }
+				</main>
+			</div>
+		</div>
+		<script src="/static/js/tabs.js" defer></script>
+	}
+}
+
+templ leagueNavItem(section string, label string, activeSection string, season *db.Season, league *db.League) {
+	{{
+		isActive := section == activeSection
+		baseClasses := "inline-block px-6 py-3 transition-colors cursor-pointer border-b-2"
+		activeClasses := "border-blue text-blue font-semibold"
+		inactiveClasses := "border-transparent text-subtext0 hover:text-text hover:border-surface2"
+		url := fmt.Sprintf("/seasons/%s/leagues/%s/%s", season.ShortName, league.ShortName, section)
+	}}
+	<li class="inline-block">
+		<a
+			href={ templ.SafeURL(url) }
+			hx-post={ url }
+			hx-target="#season-league-content"
+			hx-swap="innerHTML"
+			hx-push-url={ url }
+			class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
+		>
+			{ label }
+		</a>
+	</li>
+}
diff --git a/internal/view/seasonsview/season_league_page.templ b/internal/view/seasonsview/season_league_page.templ
deleted file mode 100644
index fbacfb2..0000000
--- a/internal/view/seasonsview/season_league_page.templ
+++ /dev/null
@@ -1,234 +0,0 @@
-package seasonsview
-
-import "git.haelnorr.com/h/oslstats/internal/db"
-import "git.haelnorr.com/h/oslstats/internal/view/baseview"
-import "git.haelnorr.com/h/oslstats/internal/permissions"
-import "git.haelnorr.com/h/oslstats/internal/contexts"
-import "fmt"
-
-templ SeasonLeaguePage(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
-	@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
-		<div class="max-w-screen-2xl mx-auto px-4 py-8">
-			@SeasonLeagueDetails(season, league, teams, allTeams)
-		</div>
-	}
-}
-
-templ SeasonLeagueDetails(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
-	{{
-		permCache := contexts.Permissions(ctx)
-		canAddTeam := permCache.HasPermission(permissions.TeamsAddToLeague)
-	}}
-	<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden" x-data="{ showAddTeamModal: false, selectedTeamId: '' }">
-		<!-- Header Section -->
-		<div class="bg-surface0 border-b border-surface1 px-6 py-8">
-			<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
-				<div>
-					<h1 class="text-4xl font-bold text-text mb-2">{ season.Name } - { league.Name }</h1>
-					<div class="flex items-center gap-2 flex-wrap">
-						<span class="inline-block bg-surface1 px-3 py-1 rounded text-sm text-subtext0 font-mono">
-							{ season.ShortName }
-						</span>
-						<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
-							{ league.ShortName }
-						</span>
-						@SlapVersionBadge(season.SlapVersion)
-					</div>
-				</div>
-				<div class="flex gap-2">
-					<a
-						href={ templ.SafeURL("/seasons/" + season.ShortName) }
-						class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
-                       bg-surface1 hover:bg-surface2 text-text transition"
-					>
-						Back to Season
-					</a>
-				</div>
-			</div>
-			<!-- Season Dates -->
-			<div class="mt-4 pt-4 border-t border-surface1">
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<!-- Regular Season -->
-					<div class="bg-mantle border border-surface1 rounded-lg p-4">
-						<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
-							<span class="text-blue">●</span>
-							Regular Season
-						</h3>
-						<div class="grid grid-cols-2 gap-4">
-							<div class="text-center">
-								<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
-								<div class="text-sm text-text font-medium">{ formatDateLong(season.StartDate) }</div>
-							</div>
-							<div class="text-center">
-								<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
-								if !season.EndDate.IsZero() {
-									<div class="text-sm text-text font-medium">{ formatDateLong(season.EndDate.Time) }</div>
-								} else {
-									<div class="text-sm text-subtext1 italic">Not set</div>
-								}
-							</div>
-						</div>
-					</div>
-					<!-- Finals -->
-					<div class="bg-mantle border border-surface1 rounded-lg p-4">
-						<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
-							<span class="text-yellow">★</span>
-							Finals
-						</h3>
-						<div class="grid grid-cols-2 gap-4">
-							<div class="text-center">
-								<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
-								if !season.FinalsStartDate.IsZero() {
-									<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsStartDate.Time) }</div>
-								} else {
-									<div class="text-sm text-subtext1 italic">Not set</div>
-								}
-							</div>
-							<div class="text-center">
-								<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
-								if !season.FinalsEndDate.IsZero() {
-									<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsEndDate.Time) }</div>
-								} else {
-									<div class="text-sm text-subtext1 italic">Not set</div>
-								}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- Teams Section -->
-		<div class="p-6">
-			<div class="flex justify-between items-center mb-4">
-				<h2 class="text-2xl font-bold text-text">Teams ({ fmt.Sprint(len(teams)) })</h2>
-				if canAddTeam {
-					<button
-						@click="showAddTeamModal = true"
-						class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
-              bg-green hover:bg-green/75 text-mantle transition"
-					>
-						Add Team
-					</button>
-				}
-			</div>
-			if len(teams) == 0 {
-				<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
-					<p class="text-subtext0 text-lg">No teams in this league yet.</p>
-					if canAddTeam {
-						<p class="text-subtext1 text-sm mt-2">Click "Add Team" to get started.</p>
-					}
-				</div>
-			} else {
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					for _, team := range teams {
-						<div class="bg-surface0 border border-surface1 rounded-lg p-6 hover:bg-surface1 transition-colors">
-							<div class="flex justify-between items-start mb-3">
-								<h3 class="text-xl font-bold text-text">{ team.Name }</h3>
-								if team.Color != "" {
-									<div
-										class="w-6 h-6 rounded-full border-2 border-surface1"
-										style={ "background-color: " + templ.SafeCSS(team.Color) }
-									></div>
-								}
-							</div>
-							<div class="flex items-center gap-2 text-sm flex-wrap">
-								<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
-									{ team.ShortName }
-								</span>
-								<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
-									{ team.AltShortName }
-								</span>
-							</div>
-						</div>
-					}
-				</div>
-			}
-		</div>
-		if canAddTeam {
-			@AddTeamModal(season, league, teams, allTeams)
-		}
-	</div>
-}
-
-templ AddTeamModal(season *db.Season, league *db.League, existingTeams []*db.Team, allTeams []*db.Team) {
-	{{
-		// Filter out teams already in this league
-		existingTeamIDs := make(map[int]bool)
-		for _, t := range existingTeams {
-			existingTeamIDs[t.ID] = true
-		}
-		availableTeams := []*db.Team{}
-		for _, t := range allTeams {
-			if !existingTeamIDs[t.ID] {
-				availableTeams = append(availableTeams, t)
-			}
-		}
-	}}
-	<div
-		x-show="showAddTeamModal"
-		@keydown.escape.window="showAddTeamModal = false"
-		class="fixed inset-0 z-50 overflow-y-auto"
-		style="display: none;"
-	>
-		<!-- Backdrop -->
-		<div
-			class="fixed inset-0 bg-crust/80 transition-opacity"
-			@click="showAddTeamModal = false"
-		></div>
-		<!-- Modal -->
-		<div class="flex min-h-full items-center justify-center p-4">
-			<div
-				class="relative bg-mantle border-2 border-surface1 rounded-xl shadow-xl max-w-md w-full p-6"
-				@click.stop
-			>
-				<h3 class="text-2xl font-bold text-text mb-4">Add Team to League</h3>
-				<form
-					hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/teams/add", season.ShortName, league.ShortName) }
-					hx-swap="none"
-				>
-					if len(availableTeams) == 0 {
-						<p class="text-subtext0 mb-4">All teams are already in this league.</p>
-					} else {
-						<div class="mb-4">
-							<label for="team_id" class="block text-sm font-medium mb-2">Select Team</label>
-							<select
-								id="team_id"
-								name="team_id"
-								x-model="selectedTeamId"
-								required
-								class="w-full py-3 px-4 rounded-lg text-sm bg-base border-2 border-overlay0 
-                       focus:border-blue outline-none"
-							>
-								<option value="">Choose a team...</option>
-								for _, team := range availableTeams {
-									<option value={ fmt.Sprint(team.ID) }>
-										{ team.Name } ({ team.ShortName })
-									</option>
-								}
-							</select>
-						</div>
-					}
-					<div class="flex gap-3 justify-end">
-						<button
-							type="button"
-							@click="showAddTeamModal = false"
-							class="px-4 py-2 rounded-lg bg-surface0 hover:bg-surface1 text-text transition"
-						>
-							Cancel
-						</button>
-						if len(availableTeams) > 0 {
-							<button
-								type="submit"
-								:disabled="!selectedTeamId"
-								class="px-4 py-2 rounded-lg bg-green hover:bg-green/75 text-mantle transition
-                       disabled:bg-green/40 disabled:cursor-not-allowed"
-							>
-								Add Team
-							</button>
-						}
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-}
diff --git a/internal/view/seasonsview/season_league_stats.templ b/internal/view/seasonsview/season_league_stats.templ
new file mode 100644
index 0000000..b7622ff
--- /dev/null
+++ b/internal/view/seasonsview/season_league_stats.templ
@@ -0,0 +1,15 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+
+templ SeasonLeagueStatsPage(season *db.Season, league *db.League) {
+	@SeasonLeagueLayout("stats", season, league) {
+		@SeasonLeagueStats()
+	}
+}
+
+templ SeasonLeagueStats() {
+	<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
+		<p class="text-subtext0 text-lg">Coming Soon...</p>
+	</div>
+}
diff --git a/internal/view/seasonsview/season_league_table.templ b/internal/view/seasonsview/season_league_table.templ
new file mode 100644
index 0000000..0a4831c
--- /dev/null
+++ b/internal/view/seasonsview/season_league_table.templ
@@ -0,0 +1,15 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+
+templ SeasonLeagueTablePage(season *db.Season, league *db.League) {
+	@SeasonLeagueLayout("table", season, league) {
+		@SeasonLeagueTable()
+	}
+}
+
+templ SeasonLeagueTable() {
+	<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
+		<p class="text-subtext0 text-lg">Coming Soon...</p>
+	</div>
+}
diff --git a/internal/view/seasonsview/season_league_teams.templ b/internal/view/seasonsview/season_league_teams.templ
new file mode 100644
index 0000000..d05ccdf
--- /dev/null
+++ b/internal/view/seasonsview/season_league_teams.templ
@@ -0,0 +1,151 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+import "git.haelnorr.com/h/oslstats/internal/permissions"
+import "git.haelnorr.com/h/oslstats/internal/contexts"
+import "fmt"
+
+templ SeasonLeagueTeamsPage(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
+	@SeasonLeagueLayout("teams", season, league) {
+		@SeasonLeagueTeams(season, league, teams, allTeams)
+	}
+}
+
+templ addTeamModal(season *db.Season, league *db.League, existingTeams []*db.Team, allTeams []*db.Team) {
+	{{
+		// Filter out teams already in this league
+		existingTeamIDs := make(map[int]bool)
+		for _, t := range existingTeams {
+			existingTeamIDs[t.ID] = true
+		}
+		availableTeams := []*db.Team{}
+		for _, t := range allTeams {
+			if !existingTeamIDs[t.ID] {
+				availableTeams = append(availableTeams, t)
+			}
+		}
+	}}
+	<div
+		x-show="showAddTeamModal"
+		@keydown.escape.window="showAddTeamModal = false"
+		class="fixed inset-0 z-50 overflow-y-auto"
+		style="display: none;"
+	>
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 bg-crust/80 transition-opacity"
+			@click="showAddTeamModal = false"
+		></div>
+		<!-- Modal -->
+		<div class="flex min-h-full items-center justify-center p-4">
+			<div
+				class="relative bg-mantle border-2 border-surface1 rounded-xl shadow-xl max-w-md w-full p-6"
+				@click.stop
+			>
+				<h3 class="text-2xl font-bold text-text mb-4">Add Team to League</h3>
+				<form
+					hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/teams/add", season.ShortName, league.ShortName) }
+					hx-swap="none"
+				>
+					if len(availableTeams) == 0 {
+						<p class="text-subtext0 mb-4">No teams available to select</p>
+					} else {
+						<div class="mb-4">
+							<label for="team_id" class="block text-sm font-medium mb-2">Select Team</label>
+							<select
+								id="team_id"
+								name="team_id"
+								x-model="selectedTeamId"
+								required
+								class="w-full py-3 px-4 rounded-lg text-sm bg-base border-2 border-overlay0
+                       focus:border-blue outline-none"
+							>
+								<option value="">Choose a team...</option>
+								for _, team := range availableTeams {
+									<option value={ fmt.Sprint(team.ID) }>
+										{ team.Name } ({ team.ShortName })
+									</option>
+								}
+							</select>
+						</div>
+					}
+					<div class="flex gap-3 justify-end">
+						<button
+							type="button"
+							@click="showAddTeamModal = false"
+							class="px-4 py-2 rounded-lg bg-surface0 hover:bg-surface1 text-text transition hover:cursor-pointer"
+						>
+							Cancel
+						</button>
+						if len(availableTeams) > 0 {
+							<button
+								type="submit"
+								:disabled="!selectedTeamId"
+								class="px-4 py-2 rounded-lg bg-green hover:bg-green/75 text-mantle transition
+                       disabled:bg-green/40 disabled:cursor-not-allowed hover:cursor-pointer"
+							>
+								Add Team
+							</button>
+						}
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+}
+
+templ SeasonLeagueTeams(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
+	{{
+		permCache := contexts.Permissions(ctx)
+		canAddTeam := permCache.HasPermission(permissions.TeamsAddToLeague)
+	}}
+	<div x-data="{ showAddTeamModal: false, selectedTeamId: '' }">
+		<div class="flex justify-between items-center mb-4">
+			<h2 class="text-2xl font-bold text-text">Teams ({ fmt.Sprint(len(teams)) })</h2>
+			if canAddTeam {
+				<button
+					@click="showAddTeamModal = true"
+					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
+              bg-green hover:bg-green/75 text-mantle transition"
+				>
+					Add Team
+				</button>
+			}
+		</div>
+		if len(teams) == 0 {
+			<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
+				<p class="text-subtext0 text-lg">No teams in this league yet.</p>
+				if canAddTeam {
+					<p class="text-subtext1 text-sm mt-2">Click "Add Team" to get started.</p>
+				}
+			</div>
+		} else {
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				for _, team := range teams {
+					<div class="bg-surface0 border border-surface1 rounded-lg p-6 hover:bg-surface1 transition-colors">
+						<div class="flex justify-between items-start mb-3">
+							<h3 class="text-xl font-bold text-text">{ team.Name }</h3>
+							if team.Color != "" {
+								<div
+									class="w-6 h-6 rounded-full border-2 border-surface1"
+									style={ "background-color: " + templ.SafeCSS(team.Color) }
+								></div>
+							}
+						</div>
+						<div class="flex items-center gap-2 text-sm flex-wrap">
+							<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
+								{ team.ShortName }
+							</span>
+							<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
+								{ team.AltShortName }
+							</span>
+						</div>
+					</div>
+				}
+			</div>
+		}
+		if canAddTeam {
+			@addTeamModal(season, league, teams, allTeams)
+		}
+	</div>
+}
diff --git a/internal/view/teamsview/new_form.templ b/internal/view/teamsview/new_form.templ
index 9d3a690..628df46 100644
--- a/internal/view/teamsview/new_form.templ
+++ b/internal/view/teamsview/new_form.templ
@@ -22,12 +22,16 @@ templ NewForm() {
 					shortNamesError: "",
 					shortNamesIsChecking: false,
 					shortNamesAreUnique: false,
-					shortNameIsEmpty: true,
-					altShortNameIsEmpty: true,
+					shortNameIsValid: false,
+					altShortNameIsValid: false,
 					// Form state
 					isSubmitting: false,
 					generalError: "",
 					submitTimeout: null,
+					// Check if a short name value is valid (exactly 3 uppercase letters)
+					isValidShortName(val) {
+						return /^[A-Z]{3}$/.test(val);
+					},
 					// Reset name errors
 					resetNameErr() {
 						this.nameError = "";
@@ -42,23 +46,32 @@ templ NewForm() {
 					},
 					// Check if short names are the same
 					checkShortNamesSame() {
-						const shortName = document.getElementById('short_name').value.trim();
-						const altShortName = document.getElementById('alt_short_name').value.trim();
+						const shortName = document
+							.getElementById("short_name")
+							.value.trim();
+						const altShortName = document
+							.getElementById("alt_short_name")
+							.value.trim();
 						if (shortName && altShortName && shortName === altShortName) {
-							this.shortNamesError = 'Short name and alt short name must be different';
+							this.shortNamesError =
+								"Short name and alt short name must be different";
 							this.shortNamesAreUnique = false;
 							return true;
 						}
 						return false;
 					},
+					// Check if both short names are valid and ready for unique check
+					bothShortNamesReady() {
+						return this.shortNameIsValid && this.altShortNameIsValid;
+					},
 					// Check if form can be submitted
 					updateCanSubmit() {
 						this.canSubmit =
 							!this.nameIsEmpty &&
 							this.nameIsUnique &&
 							!this.nameIsChecking &&
-							!this.shortNameIsEmpty &&
-							!this.altShortNameIsEmpty &&
+							this.shortNameIsValid &&
+							this.altShortNameIsValid &&
 							this.shortNamesAreUnique &&
 							!this.shortNamesIsChecking;
 					},
@@ -119,7 +132,10 @@ templ NewForm() {
 						type="text"
 						id="short_name"
 						name="short_name"
-						maxlength="10"
+						minlength="3"
+						maxlength="3"
+						pattern="[A-Z]{3}"
+						class="uppercase"
 						x-bind:class="{
 							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
 							'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
@@ -127,20 +143,21 @@ templ NewForm() {
 							'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
 						}"
 						required
-						placeholder="e.g. BLUE"
+						placeholder="e.g. BLU"
 						@input="
+							$el.value = $el.value.toUpperCase().replace(/[^A-Z]/g, '');
 							resetShortNamesErr();
-							shortNameIsEmpty = $el.value.trim() === '';
+							shortNameIsValid = isValidShortName($el.value);
 							updateCanSubmit();
 						"
 						hx-post="/htmx/isteamshortnamesunique"
 						hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
 						hx-include="[name='alt_short_name']"
 						hx-swap="none"
-						@htmx:before-request="if($el.value.trim() === '' || document.getElementById('alt_short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
+						@htmx:before-request="if(!bothShortNamesReady()) { $event.preventDefault(); return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
 						@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
 					/>
-					<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
+					<p class="text-xs text-subtext1 mt-1">Exactly 3 uppercase letters</p>
 				</div>
 			</div>
 			<!-- Alternative Short Name Field -->
@@ -151,7 +168,10 @@ templ NewForm() {
 						type="text"
 						id="alt_short_name"
 						name="alt_short_name"
-						maxlength="10"
+						minlength="3"
+						maxlength="3"
+						pattern="[A-Z]{3}"
+						class="uppercase"
 						x-bind:class="{
 							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
 							'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
@@ -161,18 +181,19 @@ templ NewForm() {
 						required
 						placeholder="e.g. BFC"
 						@input="
+							$el.value = $el.value.toUpperCase().replace(/[^A-Z]/g, '');
 							resetShortNamesErr();
-							altShortNameIsEmpty = $el.value.trim() === '';
+							altShortNameIsValid = isValidShortName($el.value);
 							updateCanSubmit();
 						"
 						hx-post="/htmx/isteamshortnamesunique"
 						hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
 						hx-include="[name='short_name']"
 						hx-swap="none"
-						@htmx:before-request="if($el.value.trim() === '' || document.getElementById('short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
+						@htmx:before-request="if(!bothShortNamesReady()) { $event.preventDefault(); return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
 						@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
 					/>
-					<p class="text-xs text-subtext1 mt-1">Maximum 10 characters. Must be different from short name.</p>
+					<p class="text-xs text-subtext1 mt-1">Exactly 3 uppercase letters. Must be different from short name.</p>
 				</div>
 				<p
 					class="text-center text-xs text-red mt-2"