diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 12f48e9..7faf5d6 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
   let {
-    id = "",
-    name = "",
-    formaction = "",
-    label,
+    children,
     color,
-    disabled = false,
+    submit = false,
+    href = undefined,
+    fullwidth = false,
+    ...restProps
   } = $props();
 </script>
 
-<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
-<button
-  {id}
-  {name}
-  {formaction}
-  {disabled}
-  class="btn btn-{color}"
-  style="--tw-bg-opacity: 1">{label}</button
->
+{#if href}
+  <a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
+    {@render children()}
+  </a>
+{:else}
+  <button
+    type={submit ? "submit" : "button"}
+    class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
+    {...restProps}
+  >
+    {@render children()}
+  </button>
+{/if}
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
new file mode 100644
index 0000000..a0a9af5
--- /dev/null
+++ b/src/lib/components/Card.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children, fullwidth = false, ...restProps } = $props();
+</script>
+
+<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
+  {@render children()}
+</div>
diff --git a/src/lib/components/FileInput.svelte b/src/lib/components/FileInput.svelte
deleted file mode 100644
index e3f4249..0000000
--- a/src/lib/components/FileInput.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  let {
-    id,
-    name,
-    label,
-    accept = "*",
-    onchange = undefined,
-    disabled = false,
-    required = false,
-  } = $props();
-</script>
-
-{#if disabled}
-  <!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
-  <label
-    for={id}
-    class="btn btn-disabled mt-2 w-full"
-    style="--tw-bg-opacity: 1">{label}</label
-  >
-{:else}
-  <label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
-    >{label}</label
-  >
-{/if}
-<input
-  {id}
-  {name}
-  class="file-input file-input-bordered file-input-ghost"
-  type="file"
-  hidden
-  {disabled}
-  {required}
-  {onchange}
-  {accept}
-/>
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index e3c9953..01e4b6d 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -1,29 +1,10 @@
 <script lang="ts">
-  let {
-    id,
-    name,
-    label,
-    placeholder = "",
-    type = "text",
-    value = "",
-    disabled = false,
-    required = false,
-  } = $props();
+  let { children, type = "text", ...restProps } = $props();
 </script>
 
-<label
-  for={id}
-  class="input input-bordered mt-2 flex !cursor-default select-none items-center gap-2"
->
-  {label}
-  <input
-    {id}
-    {name}
-    {type}
-    class={disabled ? "pointer-events-none grow !cursor-default" : "grow"}
-    {disabled}
-    {required}
-    {placeholder}
-    {value}
-  />
-</label>
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div class="input-group-shim select-none text-neutral-900">
+    {@render children()}
+  </div>
+  <input {type} {...restProps} />
+</div>
diff --git a/src/lib/components/Password.svelte b/src/lib/components/Password.svelte
deleted file mode 100644
index 93ff5ad..0000000
--- a/src/lib/components/Password.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  let { id, name, disabled = false } = $props();
-</script>
-
-<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    class="h-4 w-4 opacity-70"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-      clip-rule="evenodd"
-    />
-  </svg>
-  <input
-    {id}
-    {name}
-    type="password"
-    class="grow"
-    {disabled}
-    required
-    placeholder="Password"
-  />
-</label>
diff --git a/src/lib/components/Username.svelte b/src/lib/components/Username.svelte
deleted file mode 100644
index 27321f3..0000000
--- a/src/lib/components/Username.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  let { id, name, value = "", disabled = false } = $props();
-</script>
-
-<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    class="h-4 w-4 opacity-70"
-  >
-    <path
-      d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
-    />
-  </svg>
-  <input
-    {id}
-    {name}
-    type="text"
-    class="grow"
-    {value}
-    {disabled}
-    required
-    placeholder="Username"
-  />
-</label>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 9aa9168..f968087 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,7 +1,9 @@
-import FileInput from "./FileInput.svelte";
 import Input from "./Input.svelte";
-import Password from "./Password.svelte";
-import Username from "./Username.svelte";
 import Button from "./Button.svelte";
+import Card from "./Card.svelte";
 
-export { FileInput, Input, Username, Password, Button };
+import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
+import UserIcon from "./svg/UserIcon.svelte";
+import PasswordIcon from "./svg/PasswordIcon.svelte";
+
+export { Input, Button, Card, MenuDrawerIcon, UserIcon, PasswordIcon };
diff --git a/src/lib/components/svg/MenuDrawerIcon.svelte b/src/lib/components/svg/MenuDrawerIcon.svelte
new file mode 100644
index 0000000..222df9d
--- /dev/null
+++ b/src/lib/components/svg/MenuDrawerIcon.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="mt-1 h-6 w-6"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 6h16M4 12h8m-8 6h16"
+  />
+</svg>
diff --git a/src/lib/components/svg/PasswordIcon.svelte b/src/lib/components/svg/PasswordIcon.svelte
new file mode 100644
index 0000000..6e8de4f
--- /dev/null
+++ b/src/lib/components/svg/PasswordIcon.svelte
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <path
+    fill-rule="evenodd"
+    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+    clip-rule="evenodd"
+  />
+</svg>
diff --git a/src/lib/components/svg/UserIcon.svelte b/src/lib/components/svg/UserIcon.svelte
new file mode 100644
index 0000000..ae1743a
--- /dev/null
+++ b/src/lib/components/svg/UserIcon.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <path
+    d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
+  />
+</svg>
diff --git a/src/lib/image.ts b/src/lib/image.ts
index 43f218c..c39926f 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -1,11 +1,37 @@
-export const get_image_preview_event_handler = (id: string) => {
-  const handler = (event) => {
-    const target = event.target;
-    const files = target.files;
+/**
+ * Use this on <Avatar> components.
+ */
+export const get_avatar_preview_event_handler = (id: string) => {
+  const handler = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+    const files: FileList | null = target.files;
 
-    if (files.length > 0) {
-      const src = URL.createObjectURL(files[0]);
-      const preview = document.getElementById(id) as HTMLImageElement;
+    if (files && files.length > 0) {
+      const src: string = URL.createObjectURL(files[0]);
+      const preview: HTMLImageElement = document.querySelector(
+        `#${id} > img:first-of-type`,
+      ) as HTMLImageElement;
+      if (preview) {
+        preview.src = src;
+        preview.hidden = false;
+      }
+    }
+  };
+
+  return handler;
+};
+
+/**
+ * Use this on raw <img> elements.
+ */
+export const get_image_preview_event_handler = (id: string) => {
+  const handler = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+    const files: FileList | null = target.files;
+
+    if (files && files.length > 0) {
+      const src: string = URL.createObjectURL(files[0]);
+      const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
       if (preview) {
         preview.src = src;
         preview.hidden = false;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 82f9543..4bb7d9d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,182 +2,221 @@
   import "../app.css";
   import type { Snippet } from "svelte";
   import type { LayoutData } from "./$types";
-  import { FileInput, Password, Username } from "$lib/components";
-  import { get_image_preview_event_handler } from "$lib/image";
+  import { Button, MenuDrawerIcon, UserIcon, Input, PasswordIcon, Card } from "$lib/components";
+  import { get_avatar_preview_event_handler, get_image_preview_event_handler } from "$lib/image";
+  import {
+    AppBar,
+    popup,
+    storePopup,
+    type PopupSettings,
+    initializeStores,
+    Drawer,
+    getDrawerStore,
+    type DrawerSettings,
+    Avatar,
+    FileDropzone,
+  } from "@skeletonlabs/skeleton";
+  import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+  // Drawer config
+  initializeStores();
+  const drawerStore = getDrawerStore();
+
+  const menu_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "menu_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const data_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "data_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const login_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "login_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const profile_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "profile_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const close_drawer = () => drawerStore.close();
+
+  // Popups config
+  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+  // Example: https://www.skeleton.dev/utilities/popups
+  // const data_popup_settings: PopupSettings = {
+  //   event: "click",
+  //   target: "data_popup",
+  //   placement: "bottom",
+  //   middleware: {
+  //     offset: { mainAxis: 22, crossAxis: 0 },
+  //     // shift: { mainAxis: true, crossAxis: false },
+  //   },
+  // };
 </script>
 
+<Drawer>
+  {#if $drawerStore.id === "menu_drawer"}
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <div class="p-2 pt-0 *:mt-2">
+      <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
+        >Season Picks
+      </Button>
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" fullwidth
+        >Leaderboard
+      </Button>
+      <Button href="/statistics" onclick={close_drawer} color="surface" fullwidth
+        >Statistics
+      </Button>
+      <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
+    </div>
+  {:else if $drawerStore.id === "data_drawer"}
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <div class="p-2 pt-0 *:mt-2">
+      <Button href="/data/seasondata/teams" onclick={close_drawer} color="surface" fullwidth
+        >Season</Button
+      >
+      <Button href="/data/userdata" onclick={close_drawer} color="surface" fullwidth>Users</Button>
+    </div>
+  {:else if $drawerStore.id === "login_drawer"}
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <div class="p-2">
+      <h4 class="h4 select-none">Enter Username and Password</h4>
+      <form method="POST" class="*:mt-2">
+        <Input name="username" placeholder="Username" required>
+          <UserIcon />
+        </Input>
+        <Input name="password" type="password" placeholder="Password" required
+          ><PasswordIcon />
+        </Input>
+        <div class="flex justify-end gap-2">
+          <Button formaction="/user?/login" onclick={close_drawer} color="tertiary" submit
+            >Login</Button
+          >
+          <Button formaction="/user?/create" onclick={close_drawer} color="tertiary" submit
+            >Register</Button
+          >
+        </div>
+      </form>
+    </div>
+  {:else if $drawerStore.id === "profile_drawer"}
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <div class="p-2">
+      <h4 class="h4 select-none">Edit Profile</h4>
+      <form method="POST" enctype="multipart/form-data" class="*:mt-2">
+        <input type="hidden" name="id" value={data.user.id} />
+        <Input name="username" value={data.user.username} placeholder="Username"><UserIcon /></Input
+        >
+        <FileDropzone
+          name="avatar"
+          onchange={get_avatar_preview_event_handler("user_avatar_preview")}
+        >
+          <svelte:fragment slot="message"><b>Upload Avatar</b> or Drag and Drop</svelte:fragment>
+        </FileDropzone>
+        <div class="flex justify-end gap-2">
+          <Button formaction="/user?/update" onclick={close_drawer} color="secondary" submit
+            >Save Changes</Button
+          >
+          <Button formaction="/user?/logout" onclick={close_drawer} color="primary" submit
+            >Logout</Button
+          >
+        </div>
+      </form>
+    </div>
+  {/if}
+</Drawer>
+
 <nav>
   <!-- TODO: Make this stick to the top somehow. -->
-  <!--       Fixed breaks the flexbox and sticky doesn't work. -->
-  <div class="navbar h-16 bg-primary shadow">
-    <div class="navbar-start">
-      <!-- Side menu be visible on low width devices -->
-      <div class="dropdown">
-        <!-- Side menu open/close icon -->
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
-          </svg>
-        </div>
-
-        <!-- Side menu navigation items -->
-        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <ul
-          tabindex="0"
-          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
-        >
-          <li><a draggable="false" href="/racepicks">Race Picks</a></li>
-          <li><a draggable="false" href="/seasonpicks">Season Picks</a></li>
-          <li><a draggable="false" href="/leaderboard">Leaderboard</a></li>
-          <li><a draggable="false" href="/statistics">Statistics</a></li>
-          <li><a draggable="false" href="/rules">Rules</a></li>
-        </ul>
-      </div>
+  <!--       Fixed breaks flexbox and sticky doesn't work. -->
+  <AppBar
+    slotDefault="place-self-center"
+    slotTrail="place-content-end"
+    background="bg-primary-500"
+    shadow="shadow"
+    padding="p-2"
+  >
+    <svelte:fragment slot="lead">
+      <!-- Navigation drawer -->
+      <button
+        class="variant-filled-primary btn p-2 lg:hidden"
+        style="height: 44px;"
+        onclick={menu_drawer}
+      >
+        <MenuDrawerIcon />
+      </button>
 
       <!-- Site logo -->
-      <a href="/" draggable="false" class="btn btn-ghost select-none text-xl"
-        >Formula 11</a
+      <a
+        href="/"
+        draggable="false"
+        class="variant-filled-primary btn ml-2 select-none p-2 text-xl lg:ml-0">Formula 11</a
       >
+    </svelte:fragment>
+
+    <!-- Large navigation -->
+    <div class="hidden lg:block">
+      <a href="/racepicks" class="variant-filled-primary btn p-2">Race Picks</a>
+      <a href="/seasonpicks" class="variant-filled-primary btn p-2">Season Picks</a>
+      <a href="/leaderboard" class="variant-filled-primary btn p-2">Leaderboard</a>
+      <a href="/statistics" class="variant-filled-primary btn p-2">Statistics</a>
+      <a href="/rules" class="variant-filled-primary btn p-2">Rules</a>
     </div>
 
-    <!-- Centered navigation -->
-    <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1">
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/racepicks"
-            >Race Picks</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/seasonpicks"
-            >Season Picks</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/leaderboard"
-            >Leaderboard</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/statistics"
-            >Statistics</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/rules"
-            >Rules</a
-          >
-        </li>
-      </ul>
-    </div>
+    <svelte:fragment slot="trail">
+      <!-- Data drawer -->
+      <Button color="primary" onclick={data_drawer}>Data</Button>
 
-    <div class="navbar-end">
-      <!-- Admin button -->
-      <div class="dropdown dropdown-end mr-2">
-        <div tabindex="0" role="button" class="btn btn-ghost">Data</div>
-        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <ul
-          tabindex="0"
-          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
-        >
-          <li>
-            <a draggable="false" href="/data/seasondata/teams">Season Data</a>
-          </li>
-          <li><a draggable="false" href="/data/userdata">User Data</a></li>
-        </ul>
-      </div>
-
-      <!-- Login/profile stuff -->
+      <!-- Login/Profile drawer -->
       {#if !data.user}
-        <!-- No user is logged in  -->
-        <div class="dropdown dropdown-end">
-          <div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            tabindex="0"
-            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
-          >
-            <h1 class="text-lg">Enter Username and Password</h1>
-            <form method="POST">
-              <Username id="signin_username" name="username" />
-              <Password id="signin_password" name="password" />
-              <div class="card-actions mt-2 justify-end">
-                <button
-                  formaction="/user?/create"
-                  type="button"
-                  class="btn btn-accent">Register</button
-                >
-                <button
-                  formaction="/user?/login"
-                  type="submit"
-                  class="btn btn-accent">Login</button
-                >
-              </div>
-            </form>
-          </div>
-        </div>
+        <Button color="primary" onclick={login_drawer}>Login</Button>
       {:else}
-        <!-- The user is logged in -->
-        <div class="dropdown dropdown-end">
-          <div tabindex="0" role="button" class="avatar ml-2 mr-2">
-            <div class="mask mask-squircle w-10">
-              <img
-                id="user_avatar_preview"
-                src={data.user.avatar_url}
-                alt="User avatar"
-                class="select-none"
-                draggable="false"
-              />
-            </div>
-          </div>
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            tabindex="0"
-            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
-          >
-            <h1 class="select-none text-lg">Edit Profile</h1>
-            <form method="POST" enctype="multipart/form-data">
-              <input type="hidden" name="id" value={data.user.id} />
-              <Username
-                id="update_username"
-                name="username"
-                value={data.user.username}
-              />
-              <FileInput
-                id="update_avatar"
-                name="avatar"
-                label="Upload Avatar"
-                onchange={get_image_preview_event_handler(
-                  "user_avatar_preview",
-                )}
-              />
-              <div class="card-actions mt-2 justify-end">
-                <button formaction="/user?/update" class="btn btn-secondary"
-                  >Save Changes</button
-                >
-                <button formaction="/user?/logout" class="btn btn-primary"
-                  >Logout</button
-                >
-              </div>
-            </form>
-          </div>
-        </div>
+        <Avatar
+          id="user_avatar_preview"
+          src={data.user.avatar_url}
+          rounded="rounded-full"
+          width="w-10"
+          onclick={profile_drawer}
+          cursor="cursor-pointer"
+        />
       {/if}
-    </div>
-  </div>
+    </svelte:fragment>
+  </AppBar>
 </nav>
 
 <!-- Each child's contents will be inserted here -->
diff --git a/src/routes/data/seasondata/+layout.svelte b/src/routes/data/seasondata/+layout.svelte
index 26dc395..472ed5f 100644
--- a/src/routes/data/seasondata/+layout.svelte
+++ b/src/routes/data/seasondata/+layout.svelte
@@ -1,34 +1,31 @@
 <script lang="ts">
-  import { page } from "$app/stores";
+  import { navigating, page } from "$app/stores";
+  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
   import type { Snippet } from "svelte";
 
   let { children }: { children: Snippet } = $props();
 
-  // This has to be a function, so $page access is deferred to route switches
-  const get_tab = () => {
-    return $page.url.pathname.split("/").at(-1);
+  let current_tab: number = $state(0);
+  const tabs: { [tab: string]: number } = {
+    teams: 0,
+    drivers: 1,
+    races: 2,
   };
+
+  navigating.subscribe((nav) => {
+    if (!nav?.to?.url) return;
+
+    current_tab = tabs[nav.to.url.toString().split("/").at(-1) || "teams"];
+  });
 </script>
 
 <h1>Season Data</h1>
 
-<div role="tablist" class="tabs-boxed tabs">
-  <a
-    href="teams"
-    role="tab"
-    class={get_tab() === "teams" ? "tab tab-active" : "tab"}>Teams</a
-  >
-  <a
-    href="drivers"
-    role="tab"
-    class={get_tab() === "drivers" ? "tab tab-active" : "tab"}>Drivers</a
-  >
-  <a
-    href="races"
-    role="tab"
-    class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
-  >
-</div>
+<TabGroup justify="justify-center">
+  <a href="teams"> <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab></a>
+  <a href="drivers"><Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab></a>
+  <a href="races"><Tab bind:group={current_tab} name="races" value={2}>Races</Tab></a>
+</TabGroup>
 
 <div>
   {@render children()}
diff --git a/src/routes/data/seasondata/teams/+page.server.ts b/src/routes/data/seasondata/teams/+page.server.ts
index 060b8cf..56838e3 100644
--- a/src/routes/data/seasondata/teams/+page.server.ts
+++ b/src/routes/data/seasondata/teams/+page.server.ts
@@ -1,9 +1,5 @@
 import type { Actions, PageServerLoad } from "./$types";
-import {
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_get_and_remove_id,
-} from "$lib/form";
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
 
 // These "actions" run serverside only, as they're located inside +page.server.ts
 export const actions = {
diff --git a/src/routes/data/seasondata/teams/+page.svelte b/src/routes/data/seasondata/teams/+page.svelte
index 31c812a..9d23153 100644
--- a/src/routes/data/seasondata/teams/+page.svelte
+++ b/src/routes/data/seasondata/teams/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { PageData } from "./$types";
-  import { Input, FileInput, Button } from "$lib/components";
+  import { Input, Button, Card } from "$lib/components";
   import { get_image_preview_event_handler } from "$lib/image";
+  import { FileDropzone } from "@skeletonlabs/skeleton";
 
   let { data }: { data: PageData } = $props();
 </script>
@@ -10,109 +11,90 @@
   <title>F11 - Teams</title>
 </svelte:head>
 
-<div
-  class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
->
+<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}
-    <div class="card card-bordered card-compact shadow">
+    <Card>
       <!-- Logo display -->
-      <figure>
-        <img
-          id="update_team_logo_preview_{team.id}"
-          src={team.logo_url}
-          alt="Logo of {team.name} F1 team."
-          draggable="false"
-          class="select-none"
-        />
-      </figure>
+      <img
+        id="update_team_logo_preview_{team.id}"
+        src={team.logo_url}
+        alt="Logo of {team.name} F1 team."
+        draggable="false"
+        class="select-none rounded-container-token"
+      />
 
       <form method="POST" enctype="multipart/form-data">
         <input name="id" type="hidden" value={team.id} />
 
-        <div class="card-body gap-0 !p-2 !pt-0">
-          <Input
-            id="team_name_{team.id}"
-            name="name"
-            value={team.name}
-            label="Name:"
-            disabled={!data.admin}
-          />
+        <div class="*:mt-2">
+          <Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
+            >Name</Input
+          >
 
           <!-- Logo upload -->
-          <FileInput
+          <FileDropzone
+            name="logo"
             id="team_logo_{team.id}"
-            name="logo"
-            label="Upload Logo"
-            onchange={get_image_preview_event_handler(
-              `update_team_logo_preview_${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="card-actions mt-2 justify-end">
-            <Button
-              formaction="?/update"
-              color="secondary"
-              label="Save Changes"
-              disabled={!data.admin}
-            />
-            <Button
-              formaction="?/delete"
-              color="primary"
-              label="Delete"
-              disabled={!data.admin}
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  {/each}
-
-  <!-- Add a new team -->
-  {#if data.admin}
-    <div class="card card-bordered card-compact shadow">
-      <!-- Logo preview -->
-      <figure>
-        <img
-          id="create_team_logo_preview"
-          src=""
-          alt="Logo preview"
-          class="select-none"
-          draggable="false"
-          hidden
-        />
-      </figure>
-      <form method="POST" enctype="multipart/form-data">
-        <div class="card-body">
-          <h2 class="card-title select-none">Add a New Team</h2>
-
-          <!-- Team name input -->
-          <Input id="team_name_create" name="name" label="Name:" required />
-
-          <!-- Logo upload -->
-          <FileInput
-            id="team_logo_create"
-            name="logo"
-            label="Upload Logo"
-            onchange={get_image_preview_event_handler(
-              "create_team_logo_preview",
-            )}
-            required
-          />
-
-          <!-- Buttons -->
-          <div class="card-actions justify-end">
-            <!-- 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" class="btn btn-secondary"
-              >Create</button
+          <div class="flex justify-end gap-2">
+            <Button formaction="?/update" color="secondary" disabled={!data.admin} submit
+              >Save Changes</Button
+            >
+            <Button formaction="?/delete" color="primary" disabled={!data.admin} submit
+              >Delete</Button
             >
           </div>
         </div>
       </form>
-    </div>
+    </Card>
+  {/each}
+
+  <!-- Add a new team -->
+  {#if data.admin}
+    <Card>
+      <!-- Logo preview -->
+      <img
+        id="create_team_logo_preview"
+        src=""
+        alt="Logo preview"
+        class="select-none"
+        draggable="false"
+        hidden
+      />
+      <form method="POST" enctype="multipart/form-data">
+        <div class="*:mt-2">
+          <h4 class="h4 select-none">Add a New Team</h4>
+
+          <!-- 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" color="secondary" submit>Create</Button>
+          </div>
+        </div>
+      </form>
+    </Card>
   {/if}
 </div>