diff --git a/src/routes/data/season/+layout.server.ts b/src/routes/data/season/+layout.server.ts
new file mode 100644
index 0000000..95c83af
--- /dev/null
+++ b/src/routes/data/season/+layout.server.ts
@@ -0,0 +1,77 @@
+import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
+import type { LayoutServerLoad } from "./$types";
+
+// This "load" function runs serverside only, as it's located inside +layout.server.ts
+export const load: LayoutServerLoad = async ({ fetch, locals }) => {
+  const fetch_graphics = async (): Promise<Graphic[]> => {
+    const graphics: Graphic[] = await locals.pb
+      .collection("graphics")
+      .getFullList({ fetch: fetch });
+
+    graphics.map((graphic: Graphic) => {
+      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
+    });
+
+    return graphics;
+  };
+
+  const fetch_teams = async (): Promise<Team[]> => {
+    const teams: Team[] = await locals.pb.collection("teams").getFullList({
+      sort: "+name",
+      fetch: fetch,
+    });
+
+    teams.map((team: Team) => {
+      team.banner_url = locals.pb.files.getURL(team, team.banner);
+      team.logo_url = locals.pb.files.getURL(team, team.logo);
+    });
+
+    return teams;
+  };
+
+  const fetch_drivers = async (): Promise<Driver[]> => {
+    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
+      sort: "+code",
+      fetch: fetch,
+    });
+
+    drivers.map((driver: Driver) => {
+      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
+    });
+
+    return drivers;
+  };
+
+  const fetch_races = async (): Promise<Race[]> => {
+    const races: Race[] = await locals.pb.collection("races").getFullList({
+      sort: "+step",
+      fetch: fetch,
+    });
+
+    races.map((race: Race) => {
+      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
+    });
+
+    return races;
+  };
+
+  const fetch_substitutions = async (): Promise<Substitution[]> => {
+    // TODO: Sort by race step (does the race need to be expanded for this?)
+    const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
+      fetch: fetch,
+    });
+
+    return substitutions;
+  };
+
+  return {
+    // Graphics and teams are awaited, since those are visible on page load.
+    graphics: await fetch_graphics(),
+    teams: await fetch_teams(),
+
+    // The rest is streamed gradually, since the user has to switch tabs to need them.
+    drivers: fetch_drivers(),
+    races: fetch_races(),
+    substitutions: fetch_substitutions(),
+  };
+};
diff --git a/src/routes/data/season/+layout.svelte b/src/routes/data/season/+layout.svelte
new file mode 100644
index 0000000..0a660f9
--- /dev/null
+++ b/src/routes/data/season/+layout.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Button } from "$lib/components";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="fixed left-0 right-0 top-14 z-10 flex justify-center">
+  <div
+    class="mx-2 flex w-full justify-center gap-2 bg-primary-500 pb-2 pt-3 shadow rounded-bl-container-token rounded-br-container-token"
+  >
+    <Button href="teams" color="primary" activate_href>Teams</Button>
+    <Button href="drivers" color="primary" activate_href>Drivers</Button>
+    <Button href="races" color="primary" activate_href>Races</Button>
+    <Button href="substitutions" color="primary" activate_href>Substitutions</Button>
+  </div>
+</div>
+
+<!-- Each child's contents will be inserted here -->
+<div style="margin-top: 56px;">
+  {@render children()}
+</div>
diff --git a/src/routes/data/season/+page.server.ts b/src/routes/data/season/+page.server.ts
deleted file mode 100644
index 3ec6344..0000000
--- a/src/routes/data/season/+page.server.ts
+++ /dev/null
@@ -1,317 +0,0 @@
-import type { ActionData, Actions, PageServerLoad } from "./$types";
-import {
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_fix_dates,
-  form_data_get_and_remove_id,
-} from "$lib/form";
-import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
-import { image_to_avif } from "$lib/server/image";
-import {
-  DRIVER_HEADSHOT_HEIGHT,
-  DRIVER_HEADSHOT_WIDTH,
-  RACE_PICTOGRAM_HEIGHT,
-  RACE_PICTOGRAM_WIDTH,
-  TEAM_BANNER_HEIGHT,
-  TEAM_BANNER_WIDTH,
-  TEAM_LOGO_HEIGHT,
-  TEAM_LOGO_WIDTH,
-} from "$lib/config";
-
-// These "actions" run serverside only, as they're located inside +page.server.ts
-export const actions = {
-  create_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
-
-    // Compress banner
-    const banner_avif: Blob = await image_to_avif(
-      await (data.get("banner") as File).arrayBuffer(),
-      TEAM_BANNER_WIDTH,
-      TEAM_BANNER_HEIGHT,
-    );
-    data.set("banner", banner_avif);
-
-    // Compress logo
-    const logo_avif: Blob = await image_to_avif(
-      await (data.get("logo") as File).arrayBuffer(),
-      TEAM_LOGO_WIDTH,
-      TEAM_LOGO_HEIGHT,
-    );
-    data.set("logo", logo_avif);
-
-    await locals.pb.collection("teams").create(data);
-
-    return { tab: 0 };
-  },
-
-  update_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("banner")) {
-      // Compress banner
-      const banner_avif: Blob = await image_to_avif(
-        await (data.get("banner") as File).arrayBuffer(),
-        TEAM_BANNER_WIDTH,
-        TEAM_BANNER_HEIGHT,
-      );
-      data.set("banner", banner_avif);
-    }
-
-    if (data.has("logo")) {
-      // Compress logo
-      const logo_avif: Blob = await image_to_avif(
-        await (data.get("logo") as File).arrayBuffer(),
-        TEAM_LOGO_WIDTH,
-        TEAM_LOGO_HEIGHT,
-      );
-      data.set("logo", logo_avif);
-    }
-
-    await locals.pb.collection("teams").update(id, data);
-
-    return { tab: 0 };
-  },
-
-  delete_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("teams").delete(id);
-
-    return { tab: 0 };
-  },
-
-  create_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    // Compress headshot
-    const headshot_avif: Blob = await image_to_avif(
-      await (data.get("headshot") as File).arrayBuffer(),
-      DRIVER_HEADSHOT_WIDTH,
-      DRIVER_HEADSHOT_HEIGHT,
-    );
-
-    data.set("headshot", headshot_avif);
-
-    await locals.pb.collection("drivers").create(data);
-
-    return { tab: 1 };
-  },
-
-  update_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    if (data.has("headshot")) {
-      // Compress headshot
-      const headshot_avif: Blob = await image_to_avif(
-        await (data.get("headshot") as File).arrayBuffer(),
-        DRIVER_HEADSHOT_WIDTH,
-        DRIVER_HEADSHOT_HEIGHT,
-      );
-
-      data.set("headshot", headshot_avif);
-    }
-
-    await locals.pb.collection("drivers").update(id, data);
-
-    return { tab: 1 };
-  },
-
-  delete_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("drivers").delete(id);
-
-    return { tab: 1 };
-  },
-
-  create_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-
-    // Compress pictogram
-    const pictogram_avif: Blob = await image_to_avif(
-      await (data.get("pictogram") as File).arrayBuffer(),
-      RACE_PICTOGRAM_WIDTH,
-      RACE_PICTOGRAM_HEIGHT,
-    );
-
-    data.set("pictogram", pictogram_avif);
-
-    await locals.pb.collection("races").create(data);
-
-    return { tab: 2 };
-  },
-
-  update_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    // Do not remove empty sprint dates so they can be cleared by updating the record
-    const data: FormData = form_data_clean(await request.formData(), [
-      "sprintqualidate",
-      "sprintdate",
-    ]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("pictogram")) {
-      // Compress pictogram
-      const pictogram_avif: Blob = await image_to_avif(
-        await (data.get("pictogram") as File).arrayBuffer(),
-        RACE_PICTOGRAM_WIDTH,
-        RACE_PICTOGRAM_HEIGHT,
-      );
-
-      data.set("pictogram", pictogram_avif);
-    }
-
-    await locals.pb.collection("races").update(id, data);
-
-    return { tab: 2 };
-  },
-
-  delete_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("races").delete(id);
-
-    return { tab: 2 };
-  },
-
-  create_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["substitute", "for", "race"]);
-
-    await locals.pb.collection("substitutions").create(data);
-
-    return { tab: 3 };
-  },
-
-  update_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").update(id, data);
-
-    return { tab: 3 };
-  },
-
-  delete_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").delete(id);
-
-    return { tab: 3 };
-  },
-} satisfies Actions;
-
-// This "load" function runs serverside only, as it's located inside +page.server.ts
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_graphics = async (): Promise<Graphic[]> => {
-    const graphics: Graphic[] = await locals.pb
-      .collection("graphics")
-      .getFullList({ fetch: fetch });
-
-    graphics.map((graphic: Graphic) => {
-      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
-    });
-
-    return graphics;
-  };
-
-  const fetch_teams = async (): Promise<Team[]> => {
-    const teams: Team[] = await locals.pb.collection("teams").getFullList({
-      sort: "+name",
-      fetch: fetch,
-    });
-
-    teams.map((team: Team) => {
-      team.banner_url = locals.pb.files.getURL(team, team.banner);
-      team.logo_url = locals.pb.files.getURL(team, team.logo);
-    });
-
-    return teams;
-  };
-
-  const fetch_drivers = async (): Promise<Driver[]> => {
-    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
-      sort: "+code",
-      fetch: fetch,
-    });
-
-    drivers.map((driver: Driver) => {
-      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
-    });
-
-    return drivers;
-  };
-
-  const fetch_races = async (): Promise<Race[]> => {
-    const races: Race[] = await locals.pb.collection("races").getFullList({
-      sort: "+step",
-      fetch: fetch,
-    });
-
-    races.map((race: Race) => {
-      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
-    });
-
-    return races;
-  };
-
-  const fetch_substitutions = async (): Promise<Substitution[]> => {
-    // TODO: Sort by race step (does the race need to be expanded for this?)
-    const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
-      fetch: fetch,
-    });
-
-    return substitutions;
-  };
-
-  return {
-    // Graphics and teams are awaited, since those are visible on page load.
-    graphics: await fetch_graphics(),
-    teams: await fetch_teams(),
-
-    // The rest is streamed gradually, since the user has to switch tabs to need them.
-    drivers: fetch_drivers(),
-    races: fetch_races(),
-    substitutions: fetch_substitutions(),
-  };
-};
diff --git a/src/routes/data/season/+page.svelte b/src/routes/data/season/+page.svelte
deleted file mode 100644
index fb70779..0000000
--- a/src/routes/data/season/+page.svelte
+++ /dev/null
@@ -1,429 +0,0 @@
-<script lang="ts">
-  import type { Driver, Race, Substitution, Team } from "$lib/schema";
-  import { type PageData, type ActionData } from "./$types";
-  import {
-    getModalStore,
-    Tab,
-    TabGroup,
-    type ModalSettings,
-    type ModalStore,
-  } from "@skeletonlabs/skeleton";
-
-  import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
-  import { get_by_value } from "$lib/database";
-  import {
-    DRIVER_HEADSHOT_HEIGHT,
-    DRIVER_HEADSHOT_WIDTH,
-    RACE_PICTOGRAM_HEIGHT,
-    RACE_PICTOGRAM_WIDTH,
-    TEAM_LOGO_HEIGHT,
-    TEAM_LOGO_WIDTH,
-  } from "$lib/config";
-
-  let { data, form }: { data: PageData; form: ActionData } = $props();
-
-  // When being redirected from a form, the user should land on the same tab
-  let current_tab: number = $state(0);
-  if (form?.tab) {
-    current_tab = form.tab;
-  }
-
-  //
-  // Dropdown/Select value storages ===============================================================
-  //
-
-  // Values for driver cards
-  let update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
-  let update_driver_active_values: { [key: string]: boolean } = $state({});
-  data.drivers.then((drivers: Driver[]) =>
-    drivers.forEach((driver: Driver) => {
-      update_driver_team_select_values[driver.id] = driver.team;
-      update_driver_active_values[driver.id] = driver.active;
-    }),
-  );
-  update_driver_team_select_values["create"] = "";
-  update_driver_active_values["create"] = true;
-
-  // Values for substitution cards
-  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
-  const update_substitution_for_select_values: { [key: string]: string } = $state({});
-  const update_substitution_race_select_values: { [key: string]: string } = $state({});
-  data.substitutions.then((substitutions: Substitution[]) =>
-    substitutions.forEach((substitution: Substitution) => {
-      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
-      update_substitution_for_select_values[substitution.id] = substitution.for;
-      update_substitution_race_select_values[substitution.id] = substitution.race;
-    }),
-  );
-  update_substitution_substitute_select_values["create"] = "";
-  update_substitution_for_select_values["create"] = "";
-  update_substitution_race_select_values["create"] = "";
-
-  //
-  // Dropdown option lists ========================================================================
-  //
-
-  // All options to create a <Dropdown> component for the teams
-  const team_dropdown_options: DropdownOption[] = [];
-  data.teams.forEach((team: Team) => {
-    team_dropdown_options.push({
-      label: team.name,
-      value: team.id,
-      icon_url: team.logo_url,
-      icon_width: TEAM_LOGO_WIDTH,
-      icon_height: TEAM_LOGO_HEIGHT,
-    });
-  });
-
-  // All options to create a <Dropdown> component for the drivers
-  const driver_dropdown_options: DropdownOption[] = [];
-  data.drivers.then((drivers: Driver[]) =>
-    drivers.forEach((driver: Driver) => {
-      driver_dropdown_options.push({
-        label: driver.code,
-        value: driver.id,
-        icon_url: driver.headshot_url,
-        icon_width: DRIVER_HEADSHOT_WIDTH,
-        icon_height: DRIVER_HEADSHOT_HEIGHT,
-      });
-    }),
-  );
-
-  // All options to create a <Dropdown> component for the races
-  const race_dropdown_options: DropdownOption[] = [];
-  data.races.then((races: Race[]) =>
-    races.forEach((race: Race) => {
-      race_dropdown_options.push({
-        label: race.name,
-        value: race.id,
-        icon_url: race.pictogram_url,
-        icon_width: RACE_PICTOGRAM_WIDTH,
-        icon_height: RACE_PICTOGRAM_HEIGHT,
-      });
-    }),
-  );
-
-  //
-  // Data table row data ==========================================================================
-  //
-
-  const teams_columns: TableColumn[] = [
-    {
-      data_value_name: "name",
-      label: "Name",
-      valuefun: async (value: string): Promise<string> =>
-        `<span class='badge variant-filled-surface'>${value}</span>`,
-    },
-    {
-      data_value_name: "color",
-      label: "Color",
-      valuefun: async (value: string): Promise<string> =>
-        `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
-    },
-  ];
-
-  const drivers_columns: TableColumn[] = [
-    {
-      data_value_name: "code",
-      label: "Driver Code",
-      valuefun: async (value: string): Promise<string> =>
-        `<span class='badge variant-filled-surface'>${value}</span>`,
-    },
-    { data_value_name: "firstname", label: "First Name" },
-    { data_value_name: "lastname", label: "Last Name" },
-    {
-      data_value_name: "team",
-      label: "Team",
-      valuefun: async (value: string): Promise<string> => {
-        const team: Team | undefined = get_by_value(data.teams, "id", value);
-        return team
-          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
-          : "<span class='badge variant-filled-primary'>Invalid</span>";
-      },
-    },
-    {
-      data_value_name: "active",
-      label: "Active",
-      valuefun: async (value: boolean): Promise<string> =>
-        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
-    },
-  ];
-
-  const races_columns: TableColumn[] = [
-    {
-      data_value_name: "name",
-      label: "Name",
-      valuefun: async (value: string): Promise<string> =>
-        `<span class='badge variant-filled-surface'>${value}</span>`,
-    },
-    { data_value_name: "step", label: "Step" },
-    {
-      data_value_name: "sprintqualidate",
-      label: "Sprint Quali",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5), // Cutoff the "Z" from the ISO datetime
-    },
-    {
-      data_value_name: "sprintdate",
-      label: "Sprint Race",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
-    },
-    {
-      data_value_name: "qualidate",
-      label: "Quali",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
-    },
-    {
-      data_value_name: "racedate",
-      label: "Race",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
-    },
-  ];
-
-  const substitutions_columns: TableColumn[] = [
-    {
-      data_value_name: "substitute",
-      label: "Substitute",
-      valuefun: async (value: string): Promise<string> => {
-        const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
-        return `<span class='badge variant-filled-surface'>${substitute}</span>`;
-      },
-    },
-    {
-      data_value_name: "for",
-      label: "For",
-      valuefun: async (value: string): Promise<string> =>
-        get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
-    },
-    {
-      data_value_name: "race",
-      label: "Race",
-      valuefun: async (value: string): Promise<string> =>
-        get_by_value(await data.races, "id", value)?.name ?? "Invalid",
-    },
-  ];
-
-  //
-  // Card modal handlers ==========================================================================
-  //
-
-  const modalStore: ModalStore = getModalStore();
-
-  const teams_handler = async (event: Event, id: string) => {
-    const team: Team | undefined = get_by_value(data.teams, "id", id);
-    if (!team) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        team: team,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_team_handler = (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        banner_template:
-          get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
-        logo_template:
-          get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
-        require_inputs: true,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  /** Shows the DriverCard modal to edit the clicked driver */
-  const drivers_handler = async (event: Event, id: string) => {
-    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
-    if (!driver) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        driver: driver,
-        team_select_value: update_driver_team_select_values[driver.id],
-        team_select_options: team_dropdown_options,
-        active_value: update_driver_active_values[driver.id],
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_driver_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        team_select_value: update_driver_team_select_values["create"],
-        team_select_options: team_dropdown_options,
-        active_value: update_driver_active_values["create"],
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        headshot_template:
-          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const races_handler = async (event: Event, id: string) => {
-    const race: Race | undefined = get_by_value(await data.races, "id", id);
-    if (!race) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        race: race,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_race_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        pictogram_template:
-          get_by_value(data.graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const substitutions_handler = async (event: Event, id: string) => {
-    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
-    if (!substitution) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        substitution: substitution,
-        drivers: await data.drivers,
-        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
-        driver_select_value: update_substitution_for_select_values[substitution.id],
-        race_select_value: update_substitution_race_select_values[substitution.id],
-        driver_select_options: driver_dropdown_options,
-        race_select_options: race_dropdown_options,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_substitution_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        drivers: await data.drivers,
-        substitute_select_value: update_substitution_substitute_select_values["create"],
-        driver_select_value: update_substitution_for_select_values["create"],
-        disable_inputs: !data.admin,
-        race_select_value: update_substitution_race_select_values["create"],
-        driver_select_options: driver_dropdown_options,
-        race_select_options: race_dropdown_options,
-        require_inputs: true,
-        headshot_template:
-          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-</script>
-
-<svelte:head>
-  <title>F11 - Season Data</title>
-</svelte:head>
-
-<TabGroup
-  justify="justify-center"
-  active="variant-filled-primary"
-  hover="hover:variant-filled-primary"
-  regionList="gap-2 shadow rounded-bl-container-token rounded-br-container-token p-2 pt-3 bg-white fixed left-2 right-2 top-14 z-10"
-  regionPanel="!mt-14"
-  rounded="rounded-container-token"
-  border="border-none"
-  padding="p-2"
->
-  <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab>
-  <Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab>
-  <Tab bind:group={current_tab} name="races" value={2}>Races</Tab>
-  <Tab bind:group={current_tab} name="substitutions" value={3}>Substitutions</Tab>
-
-  <svelte:fragment slot="panel">
-    {#if current_tab === 0}
-      <!-- Teams Tab -->
-      <!-- Teams Tab -->
-      <!-- Teams Tab -->
-      <div class="pb-2">
-        <Button width="w-full" color="surface" onclick={create_team_handler}>
-          <b>Create New Team</b>
-        </Button>
-      </div>
-      <Table data={data.teams} columns={teams_columns} handler={teams_handler} />
-    {:else if current_tab === 1}
-      <!-- Drivers Tab -->
-      <!-- Drivers Tab -->
-      <!-- Drivers Tab -->
-      <div class="pb-2">
-        <Button width="w-full" color="surface" onclick={create_driver_handler}>
-          <b>Create New Driver</b>
-        </Button>
-      </div>
-      {#await data.drivers then drivers}
-        <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
-      {/await}
-    {:else if current_tab === 2}
-      <!-- Races Tab -->
-      <!-- Races Tab -->
-      <!-- Races Tab -->
-      <div class="pb-2">
-        <Button width="w-full" color="surface" onclick={create_race_handler}>
-          <b>Create New Race</b>
-        </Button>
-      </div>
-      {#await data.races then races}
-        <Table data={races} columns={races_columns} handler={races_handler} />
-      {/await}
-    {:else if current_tab === 3}
-      <!-- Substitutions Tab -->
-      <!-- Substitutions Tab -->
-      <!-- Substitutions Tab -->
-      <div class="pb-2">
-        <Button width="w-full" color="surface" onclick={create_substitution_handler}>
-          <b>Create New Substitution</b>
-        </Button>
-      </div>
-      {#await data.substitutions then substitutions}
-        <Table
-          data={substitutions}
-          columns={substitutions_columns}
-          handler={substitutions_handler}
-        />
-      {/await}
-    {/if}
-  </svelte:fragment>
-</TabGroup>
diff --git a/src/routes/data/season/drivers/+page.server.ts b/src/routes/data/season/drivers/+page.server.ts
new file mode 100644
index 0000000..1e5595c
--- /dev/null
+++ b/src/routes/data/season/drivers/+page.server.ts
@@ -0,0 +1,59 @@
+import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import { image_to_avif } from "$lib/server/image";
+import type { Actions } from "@sveltejs/kit";
+
+export const actions = {
+  create_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
+
+    // The toggle switch will report "on" or nothing
+    data.set("active", data.has("active") ? "true" : "false");
+
+    // Compress headshot
+    const headshot_avif: Blob = await image_to_avif(
+      await (data.get("headshot") as File).arrayBuffer(),
+      DRIVER_HEADSHOT_WIDTH,
+      DRIVER_HEADSHOT_HEIGHT,
+    );
+
+    data.set("headshot", headshot_avif);
+
+    await locals.pb.collection("drivers").create(data);
+  },
+
+  update_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    // The toggle switch will report "on" or nothing
+    data.set("active", data.has("active") ? "true" : "false");
+
+    if (data.has("headshot")) {
+      // Compress headshot
+      const headshot_avif: Blob = await image_to_avif(
+        await (data.get("headshot") as File).arrayBuffer(),
+        DRIVER_HEADSHOT_WIDTH,
+        DRIVER_HEADSHOT_HEIGHT,
+      );
+
+      data.set("headshot", headshot_avif);
+    }
+
+    await locals.pb.collection("drivers").update(id, data);
+  },
+
+  delete_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("drivers").delete(id);
+  },
+} satisfies Actions;
diff --git a/src/routes/data/season/drivers/+page.svelte b/src/routes/data/season/drivers/+page.svelte
new file mode 100644
index 0000000..8dd0483
--- /dev/null
+++ b/src/routes/data/season/drivers/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { Button, type DropdownOption, type TableColumn, Table } from "$lib/components";
+  import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
+  import { get_by_value } from "$lib/database";
+  import type { Driver, Team } from "$lib/schema";
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+
+  const update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
+  const update_driver_active_values: { [key: string]: boolean } = $state({});
+  data.drivers.then((drivers: Driver[]) =>
+    drivers.forEach((driver: Driver) => {
+      update_driver_team_select_values[driver.id] = driver.team;
+      update_driver_active_values[driver.id] = driver.active;
+    }),
+  );
+  update_driver_team_select_values["create"] = "";
+  update_driver_active_values["create"] = true;
+
+  // All options to create a <Dropdown> component for the teams
+  const team_dropdown_options: DropdownOption[] = [];
+  data.teams.forEach((team: Team) => {
+    team_dropdown_options.push({
+      label: team.name,
+      value: team.id,
+      icon_url: team.logo_url,
+      icon_width: TEAM_LOGO_WIDTH,
+      icon_height: TEAM_LOGO_HEIGHT,
+    });
+  });
+
+  const drivers_columns: TableColumn[] = [
+    {
+      data_value_name: "code",
+      label: "Driver Code",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "firstname", label: "First Name" },
+    { data_value_name: "lastname", label: "Last Name" },
+    {
+      data_value_name: "team",
+      label: "Team",
+      valuefun: async (value: string): Promise<string> => {
+        const team: Team | undefined = get_by_value(data.teams, "id", value);
+        return team
+          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
+          : "<span class='badge variant-filled-primary'>Invalid</span>";
+      },
+    },
+    {
+      data_value_name: "active",
+      label: "Active",
+      valuefun: async (value: boolean): Promise<string> =>
+        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
+    },
+  ];
+
+  const modalStore: ModalStore = getModalStore();
+
+  /** Shows the DriverCard modal to edit the clicked driver */
+  const drivers_handler = async (event: Event, id: string) => {
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
+    if (!driver) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        driver: driver,
+        team_select_value: update_driver_team_select_values[driver.id],
+        team_select_options: team_dropdown_options,
+        active_value: update_driver_active_values[driver.id],
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const create_driver_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        team_select_value: update_driver_team_select_values["create"],
+        team_select_options: team_dropdown_options,
+        active_value: update_driver_active_values["create"],
+        disable_inputs: !data.admin,
+        require_inputs: true,
+        headshot_template:
+          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="surface" onclick={create_driver_handler}>
+    <b>Create New Driver</b>
+  </Button>
+</div>
+{#await data.drivers then drivers}
+  <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
+{/await}
diff --git a/src/routes/data/season/races/+page.server.ts b/src/routes/data/season/races/+page.server.ts
new file mode 100644
index 0000000..d4acb43
--- /dev/null
+++ b/src/routes/data/season/races/+page.server.ts
@@ -0,0 +1,64 @@
+import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+import {
+  form_data_clean,
+  form_data_ensure_keys,
+  form_data_fix_dates,
+  form_data_get_and_remove_id,
+} from "$lib/form";
+import { image_to_avif } from "$lib/server/image";
+import type { Actions } from "@sveltejs/kit";
+
+export const actions = {
+  create_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
+    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
+
+    // Compress pictogram
+    const pictogram_avif: Blob = await image_to_avif(
+      await (data.get("pictogram") as File).arrayBuffer(),
+      RACE_PICTOGRAM_WIDTH,
+      RACE_PICTOGRAM_HEIGHT,
+    );
+
+    data.set("pictogram", pictogram_avif);
+
+    await locals.pb.collection("races").create(data);
+  },
+
+  update_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    // Do not remove empty sprint dates so they can be cleared by updating the record
+    const data: FormData = form_data_clean(await request.formData(), [
+      "sprintqualidate",
+      "sprintdate",
+    ]);
+    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (data.has("pictogram")) {
+      // Compress pictogram
+      const pictogram_avif: Blob = await image_to_avif(
+        await (data.get("pictogram") as File).arrayBuffer(),
+        RACE_PICTOGRAM_WIDTH,
+        RACE_PICTOGRAM_HEIGHT,
+      );
+
+      data.set("pictogram", pictogram_avif);
+    }
+
+    await locals.pb.collection("races").update(id, data);
+  },
+
+  delete_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("races").delete(id);
+  },
+} satisfies Actions;
diff --git a/src/routes/data/season/races/+page.svelte b/src/routes/data/season/races/+page.svelte
new file mode 100644
index 0000000..f6742d9
--- /dev/null
+++ b/src/routes/data/season/races/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { Button, Table, type TableColumn } from "$lib/components";
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import type { Race } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const races_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "step", label: "Step" },
+    {
+      data_value_name: "sprintqualidate",
+      label: "Sprint Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5), // Cutoff the "Z" from the ISO datetime
+    },
+    {
+      data_value_name: "sprintdate",
+      label: "Sprint Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "qualidate",
+      label: "Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "racedate",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+  ];
+
+  const modalStore: ModalStore = getModalStore();
+
+  const races_handler = async (event: Event, id: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id);
+    if (!race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        race: race,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const create_race_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        disable_inputs: !data.admin,
+        require_inputs: true,
+        pictogram_template:
+          get_by_value(data.graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid",
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="surface" onclick={create_race_handler}>
+    <b>Create New Race</b>
+  </Button>
+</div>
+{#await data.races then races}
+  <Table data={races} columns={races_columns} handler={races_handler} />
+{/await}
diff --git a/src/routes/data/season/substitutions/+page.server.ts b/src/routes/data/season/substitutions/+page.server.ts
new file mode 100644
index 0000000..37fef2c
--- /dev/null
+++ b/src/routes/data/season/substitutions/+page.server.ts
@@ -0,0 +1,31 @@
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import type { Actions } from "@sveltejs/kit";
+
+export const actions = {
+  create_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["substitute", "for", "race"]);
+
+    await locals.pb.collection("substitutions").create(data);
+  },
+
+  update_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").update(id, data);
+  },
+
+  delete_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").delete(id);
+  },
+} satisfies Actions;
diff --git a/src/routes/data/season/substitutions/+page.svelte b/src/routes/data/season/substitutions/+page.svelte
new file mode 100644
index 0000000..35a1e2a
--- /dev/null
+++ b/src/routes/data/season/substitutions/+page.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { get_by_value } from "$lib/database";
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import type { Driver, Race, Substitution } from "$lib/schema";
+  import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
+  import {
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    RACE_PICTOGRAM_HEIGHT,
+    RACE_PICTOGRAM_WIDTH,
+  } from "$lib/config";
+
+  let { data }: { data: PageData } = $props();
+
+  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  const update_substitution_for_select_values: { [key: string]: string } = $state({});
+  const update_substitution_race_select_values: { [key: string]: string } = $state({});
+  data.substitutions.then((substitutions: Substitution[]) =>
+    substitutions.forEach((substitution: Substitution) => {
+      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
+      update_substitution_for_select_values[substitution.id] = substitution.for;
+      update_substitution_race_select_values[substitution.id] = substitution.race;
+    }),
+  );
+  update_substitution_substitute_select_values["create"] = "";
+  update_substitution_for_select_values["create"] = "";
+  update_substitution_race_select_values["create"] = "";
+
+  const driver_dropdown_options: DropdownOption[] = [];
+  data.drivers.then((drivers: Driver[]) =>
+    drivers.forEach((driver: Driver) => {
+      driver_dropdown_options.push({
+        label: driver.code,
+        value: driver.id,
+        icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
+      });
+    }),
+  );
+
+  const race_dropdown_options: DropdownOption[] = [];
+  data.races.then((races: Race[]) =>
+    races.forEach((race: Race) => {
+      race_dropdown_options.push({
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      });
+    }),
+  );
+
+  const substitutions_columns: TableColumn[] = [
+    {
+      data_value_name: "substitute",
+      label: "Substitute",
+      valuefun: async (value: string): Promise<string> => {
+        const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${substitute}</span>`;
+      },
+    },
+    {
+      data_value_name: "for",
+      label: "For",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
+    },
+    {
+      data_value_name: "race",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.races, "id", value)?.name ?? "Invalid",
+    },
+  ];
+
+  const modalStore: ModalStore = getModalStore();
+
+  const substitutions_handler = async (event: Event, id: string) => {
+    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
+    if (!substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        substitution: substitution,
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
+        driver_select_value: update_substitution_for_select_values[substitution.id],
+        race_select_value: update_substitution_race_select_values[substitution.id],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const create_substitution_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values["create"],
+        driver_select_value: update_substitution_for_select_values["create"],
+        disable_inputs: !data.admin,
+        race_select_value: update_substitution_race_select_values["create"],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+        require_inputs: true,
+        headshot_template:
+          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="surface" onclick={create_substitution_handler}>
+    <b>Create New Substitution</b>
+  </Button>
+</div>
+{#await data.substitutions then substitutions}
+  <Table data={substitutions} columns={substitutions_columns} handler={substitutions_handler} />
+{/await}
diff --git a/src/routes/data/season/teams/+page.server.ts b/src/routes/data/season/teams/+page.server.ts
new file mode 100644
index 0000000..d3b8d4f
--- /dev/null
+++ b/src/routes/data/season/teams/+page.server.ts
@@ -0,0 +1,74 @@
+import type { Actions } from "./$types";
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import { image_to_avif } from "$lib/server/image";
+import {
+  TEAM_BANNER_HEIGHT,
+  TEAM_BANNER_WIDTH,
+  TEAM_LOGO_HEIGHT,
+  TEAM_LOGO_WIDTH,
+} from "$lib/config";
+
+export const actions = {
+  create_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
+
+    // Compress banner
+    const banner_avif: Blob = await image_to_avif(
+      await (data.get("banner") as File).arrayBuffer(),
+      TEAM_BANNER_WIDTH,
+      TEAM_BANNER_HEIGHT,
+    );
+    data.set("banner", banner_avif);
+
+    // Compress logo
+    const logo_avif: Blob = await image_to_avif(
+      await (data.get("logo") as File).arrayBuffer(),
+      TEAM_LOGO_WIDTH,
+      TEAM_LOGO_HEIGHT,
+    );
+    data.set("logo", logo_avif);
+
+    await locals.pb.collection("teams").create(data);
+  },
+
+  update_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (data.has("banner")) {
+      // Compress banner
+      const banner_avif: Blob = await image_to_avif(
+        await (data.get("banner") as File).arrayBuffer(),
+        TEAM_BANNER_WIDTH,
+        TEAM_BANNER_HEIGHT,
+      );
+      data.set("banner", banner_avif);
+    }
+
+    if (data.has("logo")) {
+      // Compress logo
+      const logo_avif: Blob = await image_to_avif(
+        await (data.get("logo") as File).arrayBuffer(),
+        TEAM_LOGO_WIDTH,
+        TEAM_LOGO_HEIGHT,
+      );
+      data.set("logo", logo_avif);
+    }
+
+    await locals.pb.collection("teams").update(id, data);
+  },
+
+  delete_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("teams").delete(id);
+  },
+} satisfies Actions;
diff --git a/src/routes/data/season/teams/+page.svelte b/src/routes/data/season/teams/+page.svelte
new file mode 100644
index 0000000..14e2147
--- /dev/null
+++ b/src/routes/data/season/teams/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { Button, Table, type TableColumn } from "$lib/components";
+  import type { Team } from "$lib/schema";
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+
+  let { data }: { data: PageData } = $props();
+
+  const teams_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "color",
+      label: "Color",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
+    },
+  ];
+
+  const modalStore: ModalStore = getModalStore();
+
+  const teams_handler = async (event: Event, id: string) => {
+    const team: Team | undefined = get_by_value(data.teams, "id", id);
+    if (!team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        team: team,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const create_team_handler = (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        banner_template:
+          get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
+        logo_template:
+          get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
+        require_inputs: true,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="surface" onclick={create_team_handler}>
+    <b>Create New Team</b>
+  </Button>
+</div>
+<Table data={data.teams} columns={teams_columns} handler={teams_handler} />