diff --git a/src/routes/data/season/+page.svelte b/src/routes/data/season/+page.svelte
index cd0be38..366ab62 100644
--- a/src/routes/data/season/+page.svelte
+++ b/src/routes/data/season/+page.svelte
@@ -8,6 +8,8 @@
   // TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
   import type { DropdownOption } from "$lib/components/Dropdown.svelte";
   import { get_by_value } from "$lib/database";
+  import TeamCard from "$lib/components/TeamCard.svelte";
+  import DriverCard from "$lib/components/DriverCard.svelte";
 
   let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -18,11 +20,11 @@
   }
 
   // Maps driver to team: <driver.id, team.id>
-  let create_driver_team_select_value: string = $state("");
   let update_driver_team_select_values: { [key: string]: string } = $state({});
   data.drivers.forEach((driver: Driver) => {
     update_driver_team_select_values[driver.id] = driver.team;
   });
+  update_driver_team_select_values["create"] = "";
 
   const driver_team_select_options: DropdownOption[] = data.teams.map((team: Team) => {
     return { label: team.name, value: team.id } as DropdownOption;
@@ -57,77 +59,15 @@
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
         <!-- List all teams inside the database -->
         {#each data.teams as team}
-          <Card imgsrc={team.logo_url} imgid="update_team_logo_preview_{team.id}">
-            <form method="POST" enctype="multipart/form-data">
-              {#if data.admin}
-                <input name="id" type="hidden" value={team.id} />
-              {/if}
-
-              <div class="flex flex-col gap-2">
-                <Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
-                  >Name</Input
-                >
-
-                <!-- Logo upload -->
-                <FileDropzone
-                  name="logo"
-                  id="team_logo_{team.id}"
-                  onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
-                  disabled={!data.admin}
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Logo</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button formaction="?/update_team" color="secondary" disabled={!data.admin} submit
-                    >Save Changes</Button
-                  >
-                  <Button color="primary" submit disabled={!data.admin} formaction="?/delete_team"
-                    >Delete</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
+          <TeamCard {team} disable_inputs={!data.admin} />
         {/each}
 
         <!-- Add a new team -->
         {#if data.admin}
-          <Card
-            imgsrc={get_by_value(data.graphics, "name", "team_template")?.file_url}
-            imgid="create_team_logo_preview"
-          >
-            <form method="POST" enctype="multipart/form-data">
-              <div class="flex flex-col gap-2">
-                <!-- Team name input -->
-                <Input id="team_name_create" name="name" required>Name</Input>
-
-                <!-- Logo upload -->
-                <FileDropzone
-                  name="logo"
-                  id="team_logo_create"
-                  onchange={get_image_preview_event_handler("create_team_logo_preview")}
-                  disabled={!data.admin}
-                  required
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Logo</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <!-- By specifying the formaction on the button (instead of action on the form), -->
-                  <!-- we can have multiple buttons with different actions in a single form. -->
-
-                  <Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
-                </div>
-              </div>
-            </form>
-          </Card>
+          <TeamCard
+            logo_template={get_by_value(data.graphics, "name", "team_template")?.file_url}
+            require_inputs
+          />
         {/if}
       </div>
     {:else if current_tab === 1}
@@ -138,130 +78,22 @@
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
         <!-- List all drivers inside the database -->
         {#each data.drivers as driver}
-          <Card imgsrc={driver.headshot_url} imgid="update_driver_headshot_preview_{driver.id}">
-            <form method="POST" enctype="multipart/form-data">
-              {#if data.admin}
-                <input name="id" type="hidden" value={driver.id} />
-              {/if}
-
-              <div class="flex flex-col gap-2">
-                <!-- Driver data input -->
-                <Input
-                  id="driver_first_name_{driver.id}"
-                  name="firstname"
-                  value={driver.firstname}
-                  labelwidth="120px"
-                  disabled={!data.admin}>First Name</Input
-                >
-                <Input
-                  id="driver_last_name_{driver.id}"
-                  name="lastname"
-                  value={driver.lastname}
-                  labelwidth="120px"
-                  disabled={!data.admin}>Last Name</Input
-                >
-                <Input
-                  id="driver_code_{driver.id}"
-                  name="code"
-                  value={driver.code}
-                  labelwidth="120px"
-                  disabled={!data.admin}>Driver Code</Input
-                >
-
-                <!-- Driver team input -->
-                <Dropdown
-                  name="team"
-                  input_variable={update_driver_team_select_values[driver.id]}
-                  labelwidth="120px"
-                  disabled={!data.admin}
-                  options={driver_team_select_options}>Team</Dropdown
-                >
-
-                <!-- Headshot upload -->
-                <FileDropzone
-                  name="headshot"
-                  id="driver_headshot_{driver.id}"
-                  onchange={get_image_preview_event_handler(
-                    `update_driver_headshot_preview_${driver.id}`,
-                  )}
-                  disabled={!data.admin}
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button
-                    formaction="?/update_driver"
-                    color="secondary"
-                    disabled={!data.admin}
-                    submit>Save Changes</Button
-                  >
-                  <Button formaction="?/delete_driver" color="primary" disabled={!data.admin} submit
-                    >Delete</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
+          <DriverCard
+            {driver}
+            disable_inputs={!data.admin}
+            team_select_values={update_driver_team_select_values}
+            team_select_options={driver_team_select_options}
+          />
         {/each}
 
         <!-- Add a new driver -->
         {#if data.admin}
-          <Card
-            imgsrc={get_by_value(data.graphics, "name", "driver_template")?.file_url}
-            imgid="create_driver_headshot_preview"
-          >
-            <form method="POST" enctype="multipart/form-data">
-              <div class="flex flex-col gap-2">
-                <!-- Driver data input -->
-                <Input id="driver_first_name_create" name="firstname" labelwidth="120px" required
-                  >First Name</Input
-                >
-                <Input id="driver_last_name_create" name="lastname" labelwidth="120px" required
-                  >Last Name</Input
-                >
-                <Input
-                  id="driver_code_create"
-                  name="code"
-                  labelwidth="120px"
-                  maxlength={3}
-                  minlength={3}
-                  required>Driver Code</Input
-                >
-
-                <!-- Driver team input -->
-                <Dropdown
-                  input_variable={create_driver_team_select_value}
-                  name="team"
-                  labelwidth="120px"
-                  options={driver_team_select_options}
-                  required>Team</Dropdown
-                >
-
-                <!-- Headshot upload -->
-                <FileDropzone
-                  name="headshot"
-                  id="driver_headshot_create"
-                  onchange={get_image_preview_event_handler("create_driver_headshot_preview")}
-                  required
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button formaction="?/create_driver" color="secondary" submit
-                    >Create Driver</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
+          <DriverCard
+            logo_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
+            team_select_values={update_driver_team_select_values}
+            team_select_options={driver_team_select_options}
+            require_inputs
+          />
         {/if}
       </div>
     {:else if current_tab === 2}