diff --git a/src/lib/components/DriverCard.svelte b/src/lib/components/DriverCard.svelte
index e7d80b1..89b22f3 100644
--- a/src/lib/components/DriverCard.svelte
+++ b/src/lib/components/DriverCard.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Driver } from "$lib/schema";
   import Input from "./Input.svelte";
-  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
   interface DriverCardProps {
@@ -42,7 +42,7 @@
   }: DriverCardProps = $props();
 </script>
 
-<Card
+<LazyCard
   imgsrc={driver?.headshot_url ?? headshot_template}
   imgwidth={DRIVER_HEADSHOT_WIDTH}
   imgheight={DRIVER_HEADSHOT_HEIGHT}
@@ -64,8 +64,9 @@
         autocomplete="off"
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>First Name</Input
-      >
+        required={require_inputs}
+        >First Name
+      </Input>
       <Input
         id="driver_last_name_{driver?.id ?? 'create'}"
         name="lastname"
@@ -73,8 +74,9 @@
         autocomplete="off"
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Last Name</Input
-      >
+        required={require_inputs}
+        >Last Name
+      </Input>
       <Input
         id="driver_code_{driver?.id ?? 'create'}"
         name="code"
@@ -84,18 +86,20 @@
         maxlength={3}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Driver Code</Input
-      >
+        required={require_inputs}
+        >Driver Code
+      </Input>
 
       <!-- Driver team input -->
-      <Dropdown
+      <LazyDropdown
         name="team"
         input_variable={team_select_value}
         options={team_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Team</Dropdown
-      >
+        required={require_inputs}
+        >Team
+      </LazyDropdown>
 
       <!-- Headshot upload -->
       <FileDropzone
@@ -133,4 +137,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/LazyCard.svelte
similarity index 55%
rename from src/lib/components/Card.svelte
rename to src/lib/components/LazyCard.svelte
index 1062415..1b4b71e 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/LazyCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import LazyImage from "./LazyImage.svelte";
+  import { lazyload } from "$lib/lazyload";
 
   interface CardProps {
     children: Snippet;
@@ -12,10 +13,10 @@
     imgid?: string | undefined;
 
     /** The aspect ratio width used to reserve image space (while its loading) */
-    imgwidth?: number;
+    imgwidth: number;
 
     /** The aspect ratio height used to reserve image space (while its loading) */
-    imgheight?: number;
+    imgheight: number;
 
     /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
     imghidden?: boolean;
@@ -28,29 +29,39 @@
     children,
     imgsrc = undefined,
     imgid = undefined,
-    imgwidth = undefined,
-    imgheight = undefined,
+    imgwidth,
+    imgheight,
     imghidden = false,
     fullwidth = false,
     ...restProps
   }: CardProps = $props();
+
+  let load: boolean = $state(false);
+
+  const lazy_visible_handler = () => {
+    load = true;
+  };
 </script>
 
-<div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
-  <!-- Allow empty strings for images that only appear after user action -->
-  {#if imgsrc !== undefined}
-    <div style="width: auto; aspect-ratio: {imgwidth} / {imgheight};">
-      <LazyImage
-        id={imgid}
-        src={imgsrc}
-        alt="Card header"
-        draggable="false"
-        class="select-none shadow"
-        hidden={imghidden}
-      />
+<div use:lazyload onLazyVisible={lazy_visible_handler}>
+  {#if load}
+    <div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
+      <!-- Allow empty strings for images that only appear after user action -->
+      {#if imgsrc !== undefined}
+        <LazyImage
+          id={imgid}
+          src={imgsrc}
+          {imgwidth}
+          {imgheight}
+          alt="Card header"
+          draggable="false"
+          class="select-none shadow"
+          hidden={imghidden}
+        />
+      {/if}
+      <div class="p-2" {...restProps}>
+        {@render children()}
+      </div>
     </div>
   {/if}
-  <div class="p-2" {...restProps}>
-    {@render children()}
-  </div>
 </div>
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/LazyDropdown.svelte
similarity index 70%
rename from src/lib/components/Dropdown.svelte
rename to src/lib/components/LazyDropdown.svelte
index 23a0b75..649099e 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/LazyDropdown.svelte
@@ -4,13 +4,26 @@
   import type { Action } from "svelte/action";
   import type { HTMLInputAttributes } from "svelte/elements";
   import { v4 as uuid } from "uuid";
+  import LazyImage from "./LazyImage.svelte";
 
-  export interface DropdownOption {
+  export interface LazyDropdownOption {
+    /** The label displayed in the list of options. */
     label: string;
+
+    /** The value assigned to the dropdown value variable */
     value: string;
+
+    /** An optional icon displayed left to the label */
+    icon_url?: string;
+
+    /** The aspect ratio width of the optional icon */
+    icon_width?: number;
+
+    /** The aspect ratio height of the optional icon */
+    icon_height?: number;
   }
 
-  interface SearchProps extends HTMLInputAttributes {
+  interface LazyDropdownProps extends HTMLInputAttributes {
     children: Snippet;
 
     /** Placeholder for the empty input element */
@@ -37,7 +50,7 @@
     /** The options this autocomplete component allows to choose from.
      * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
      */
-    options: DropdownOption[];
+    options: LazyDropdownOption[];
   }
 
   let {
@@ -56,7 +69,7 @@
     },
     options,
     ...restProps
-  }: SearchProps = $props();
+  }: LazyDropdownProps = $props();
 
   /** Find the "label" of an option by its "value" */
   const get_label = (value: string): string | undefined => {
@@ -78,6 +91,12 @@
 
     if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
   });
+
+  let load: boolean = $state(false);
+
+  const lazy_click_handler = () => {
+    load = true;
+  };
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -87,6 +106,7 @@
   >
     {@render children()}
   </div>
+  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
   {#if action}
     <input
       use:popup={popup_settings}
@@ -95,6 +115,7 @@
       style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
       use:obtain_input
       use:action
+      onmousedown={lazy_click_handler}
       onkeypress={(event: Event) => event.preventDefault()}
       value={get_label(input_variable) ?? placeholder}
       {...restProps}
@@ -106,6 +127,7 @@
       autocomplete="off"
       style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
       use:obtain_input
+      onmousedown={lazy_click_handler}
       onkeypress={(event: Event) => event.preventDefault()}
       value={get_label(input_variable) ?? placeholder}
       {...restProps}
@@ -118,21 +140,25 @@
   class="card z-10 w-auto overflow-y-scroll p-2 shadow"
   style="max-height: 350px;"
 >
-  <ListBox>
-    {#each options as option}
-      <ListBoxItem bind:group={input_variable} {name} value={option.value}>
-        <div class="flex flex-nowrap">
-          {#if option.icon_url}
-            <img
-              src={option.icon_url}
-              alt=""
-              class="mr-2 rounded"
-              style="height: 24px; max-width: 64px;"
-            />
-          {/if}
-          {option.label}
-        </div>
-      </ListBoxItem>
-    {/each}
-  </ListBox>
+  {#if load}
+    <ListBox>
+      {#each options as option}
+        <ListBoxItem bind:group={input_variable} {name} value={option.value}>
+          <div class="flex flex-nowrap">
+            {#if option.icon_url}
+              <LazyImage
+                src={option.icon_url}
+                alt=""
+                imgwidth={option.icon_width ?? 1}
+                imgheight={option.icon_height ?? 1}
+                class="mr-2 rounded"
+                style="height: 24px; max-width: 64px;"
+              />
+            {/if}
+            {option.label}
+          </div>
+        </ListBoxItem>
+      {/each}
+    </ListBox>
+  {/if}
 </div>
diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index dd96467..b3d46d4 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -6,19 +6,30 @@
   interface LazyImageProps extends HTMLImgAttributes {
     /** The URL to the image resource to lazyload */
     src: string;
+
+    /** The aspect ratio width used to reserve image space (while its loading) */
+    imgwidth: number;
+
+    /** The aspect ratio height used to reserve image space (while its loading) */
+    imgheight: number;
   }
 
-  let { src, ...restProps }: LazyImageProps = $props();
+  let { src, imgwidth, imgheight, ...restProps }: LazyImageProps = $props();
+
+  // Once the image is visible, this will be set to true, triggering the loading
+  let load: boolean = $state(false);
 
   const lazy_visible_handler = () => {
     load = true;
   };
-
-  // Once the image is visible, this will be set to true, triggering the loading
-  let load: boolean = $state(false);
 </script>
 
-<div use:lazyload onLazyVisible={lazy_visible_handler}>
+<!-- Show a correctly sized div so the layout doesn't jump. -->
+<div
+  use:lazyload
+  onLazyVisible={lazy_visible_handler}
+  style="width: 100%; aspect-ratio: {imgwidth} / {imgheight};"
+>
   {#if load}
     {#await fetch_image_base64(src) then data}
       <img src={data} style="width: 100%" {...restProps} />
diff --git a/src/lib/components/RaceCard.svelte b/src/lib/components/RaceCard.svelte
index fe55c7c..7dee71e 100644
--- a/src/lib/components/RaceCard.svelte
+++ b/src/lib/components/RaceCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Race } from "$lib/schema";
   import Input from "./Input.svelte";
@@ -55,7 +55,7 @@
   };
 </script>
 
-<Card
+<LazyCard
   imgsrc={race?.pictogram_url ?? pictogram_template}
   imgwidth={RACE_PICTOGRAM_WIDTH}
   imgheight={RACE_PICTOGRAM_HEIGHT}
@@ -175,4 +175,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>
diff --git a/src/lib/components/SubstitutionCard.svelte b/src/lib/components/SubstitutionCard.svelte
index d516c36..f587229 100644
--- a/src/lib/components/SubstitutionCard.svelte
+++ b/src/lib/components/SubstitutionCard.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Driver, Substitution } from "$lib/schema";
   import { get_by_value } from "$lib/database";
-  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
   import type { Action } from "svelte/action";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
@@ -76,7 +76,7 @@
   };
 </script>
 
-<Card
+<LazyCard
   imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
     headshot_template}
   imgwidth={DRIVER_HEADSHOT_WIDTH}
@@ -92,35 +92,39 @@
 
     <div class="flex flex-col gap-2">
       <!-- Substitute select -->
-      <Dropdown
+      <LazyDropdown
         name="substitute"
         input_variable={substitute_select_value}
         action={register_substitute_preview_handler}
         options={driver_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Substitute</Dropdown
+        required={require_inputs}
       >
+        Substitute
+      </LazyDropdown>
 
       <!-- Driver select -->
-      <Dropdown
+      <LazyDropdown
         name="for"
         input_variable={driver_select_value}
         options={driver_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>For</Dropdown
-      >
+        required={require_inputs}
+        >For
+      </LazyDropdown>
 
       <!-- Race select -->
-      <Dropdown
+      <LazyDropdown
         name="race"
         input_variable={race_select_value}
         options={race_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Race</Dropdown
-      >
+        required={require_inputs}
+        >Race
+      </LazyDropdown>
 
       <!-- Save/Delete buttons -->
       <div class="flex justify-end gap-2">
@@ -145,4 +149,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>
diff --git a/src/lib/components/TeamCard.svelte b/src/lib/components/TeamCard.svelte
index 4d67d35..b70cbbb 100644
--- a/src/lib/components/TeamCard.svelte
+++ b/src/lib/components/TeamCard.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
   import Button from "./Button.svelte";
   import type { Team } from "$lib/schema";
   import Input from "./Input.svelte";
   import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
+  import LazyCard from "./LazyCard.svelte";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -29,7 +29,7 @@
   }: TeamCardProps = $props();
 </script>
 
-<Card
+<LazyCard
   imgsrc={team?.logo_url ?? logo_template}
   imgwidth={TEAM_LOGO_WIDTH}
   imgheight={TEAM_LOGO_HEIGHT}
@@ -83,4 +83,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index fe12bc4..602da24 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,8 +1,8 @@
 import Button from "./Button.svelte";
-import Card from "./Card.svelte";
 import DriverCard from "./DriverCard.svelte";
-import Dropdown from "./Dropdown.svelte";
 import Input from "./Input.svelte";
+import LazyCard from "./LazyCard.svelte";
+import LazyDropdown from "./LazyDropdown.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import RaceCard from "./RaceCard.svelte";
@@ -17,10 +17,10 @@ import UserIcon from "./svg/UserIcon.svelte";
 export {
   // Components
   Button,
-  Card,
   DriverCard,
-  Dropdown,
   Input,
+  LazyCard,
+  LazyDropdown,
   LazyImage,
   LoadingIndicator,
   RaceCard,