diff --git a/frontend/src/features/upload/UploadPage.tsx b/frontend/src/features/upload/UploadPage.tsx
index aa208e4..791e53c 100644
--- a/frontend/src/features/upload/UploadPage.tsx
+++ b/frontend/src/features/upload/UploadPage.tsx
@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   CheckCircle2,
+  ImageOff,
   ListChecks,
   Trash2,
   UploadCloud,
@@ -310,6 +311,54 @@ function TempCard({
   );
 }
 
+/** Image with a spinner/broken-image placeholder instead of alt-text fallback. */
+function ThumbImage({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  // Derived from the current src: no effect needed when it changes.
+  const ready = Boolean(src) && loadedSrc === src;
+  const failed = !src || failedSrc === src;
+
+  return (
+    <span
+      className={cn(
+        "relative block overflow-hidden bg-ctp-surface0/60",
+        className,
+      )}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt=""
+          loading="lazy"
+          onLoad={() => setLoadedSrc(src)}
+          onError={() => setFailedSrc(src)}
+          className={cn(
+            "h-full w-full object-cover transition-opacity duration-200",
+            ready ? "opacity-100" : "opacity-0",
+          )}
+        />
+      ) : null}
+      {!ready && !failed ? (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <Spinner className="h-3.5 w-3.5 text-ctp-overlay0" />
+        </span>
+      ) : null}
+      {failed ? (
+        <span className="absolute inset-0 flex items-center justify-center text-ctp-overlay0">
+          <ImageOff className="h-4 w-4" />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
 /**
  * A "J-x uploaded" notification.
  *
@@ -378,7 +427,6 @@ function MetadataForm({
 }) {
   const queryClient = useQueryClient();
   const credentials = useE621((state) => state.credentials);
-  const [tab, setTab] = useState<"link" | "custom">("link");
   const [postId, setPostId] = useState("");
   const [selected, setSelected] = useState<E621IqdbCandidate | null>(null);
   const [rating, setRating] = useState<Rating>(temp.custom_rating);
@@ -485,8 +533,8 @@ function MetadataForm({
   }
 
   return (
-    <>
-      <div className="flex items-start justify-between gap-3">
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-start justify-between gap-3 border-b border-ctp-surface0 px-5 py-3">
         <div className="min-w-0">
           <h2 className="text-sm font-semibold text-ctp-subtext1">
             Set metadata
@@ -495,288 +543,279 @@ function MetadataForm({
             {temp.original_filename}
           </p>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          className="rounded-md p-1 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
-          title="Close"
-        >
-          <X className="h-4 w-4" />
-        </button>
+        <div className="flex items-center gap-2">
+          {temp.processing ? (
+            <span className="flex items-center gap-1.5 font-mono text-[10px] text-ctp-overlay0">
+              <Spinner className="h-3 w-3" /> working
+            </span>
+          ) : null}
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md p-1 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+            title="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
       </div>
 
-      <div className="mt-4 grid gap-4 sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
-        <div className="w-fit max-w-full overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
-          {mediaUrl ? (
-            isVideo ? (
-              <video
-                src={mediaUrl}
-                controls
-                muted
-                className="block h-auto max-h-[55vh] w-auto max-w-full"
-              />
+      <div className="grid min-h-0 flex-1 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_minmax(0,34rem)] lg:overflow-hidden">
+        <div className="flex min-w-0 flex-col gap-5 p-5 lg:overflow-y-auto">
+          <div className="w-fit max-w-full self-start overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
+            {mediaUrl ? (
+              isVideo ? (
+                <video
+                  src={mediaUrl}
+                  controls
+                  muted
+                  className="block h-auto max-h-[70vh] w-auto max-w-full"
+                />
+              ) : (
+                <img
+                  src={mediaUrl}
+                  alt={temp.original_filename}
+                  className="block h-auto max-h-[70vh] w-auto max-w-full"
+                />
+              )
             ) : (
-              <img
-                src={mediaUrl}
-                alt={temp.original_filename}
-                className="block h-auto max-h-[55vh] w-auto max-w-full"
-              />
-            )
-          ) : (
-            <div className="flex h-40 w-40 items-center justify-center text-xs text-ctp-overlay0">
-              No preview
-            </div>
-          )}
-        </div>
-
-        <div className="flex min-w-0 flex-col gap-3">
-          <div className="flex gap-1.5">
-            <button
-              type="button"
-              onClick={() => setTab("link")}
-              className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium transition",
-                tab === "link"
-                  ? "bg-ctp-surface0 text-ctp-text"
-                  : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
-              )}
-            >
-              Link to e621 post
-            </button>
-            <button
-              type="button"
-              onClick={() => setTab("custom")}
-              className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium transition",
-                tab === "custom"
-                  ? "bg-ctp-surface0 text-ctp-text"
-                  : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
-              )}
-            >
-              Custom metadata
-            </button>
+              <div className="flex h-40 w-40 items-center justify-center text-xs text-ctp-overlay0">
+                No preview
+              </div>
+            )}
           </div>
 
-          {tab === "link" ? (
-            <div className="flex flex-col gap-3">
-              {visualMatches.length > 0 ? (
-                <div>
-                  <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
-                    Already in your library
-                  </p>
-                  <div className="mt-2 flex flex-col gap-2">
-                    {visualMatches.map((match) => (
-                      <div
-                        key={match.j_id}
-                        className="flex items-center gap-3 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-2"
-                      >
-                        <img
-                          src={apiUrl(
-                            match.thumbnail_url ??
-                              `/api/files/${match.j_id}/thumbnail/`,
-                          )}
-                          alt={match.j_id}
-                          loading="lazy"
-                          className="h-12 w-12 shrink-0 rounded object-cover"
-                        />
-                        <span className="min-w-0 flex-1">
-                          <Link
-                            to={`/detail/${match.j_id}`}
-                            className="font-mono text-[11px] text-ctp-blue hover:underline"
-                          >
-                            {match.j_id}
-                          </Link>
-                          <span
-                            className="block truncate font-mono text-[11px] text-ctp-subtext0"
-                            title={match.filename}
-                          >
-                            {match.filename}
-                          </span>
-                        </span>
-                        <span className="shrink-0 font-mono text-[11px] text-ctp-peach">
-                          {match.similarity}%
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                  <p className="mt-2 text-[11px] text-ctp-overlay0">
-                    This upload looks like it is already in the library — you
-                    can discard it below.
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() => void discardUpload()}
-                    className="mt-2 rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-red transition hover:bg-ctp-red/15"
+          {visualMatches.length > 0 ? (
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+                Already in your library
+              </p>
+              <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3 2xl:grid-cols-4">
+                {visualMatches.map((match) => (
+                  <div
+                    key={match.j_id}
+                    className="overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-surface0/30"
                   >
-                    discard this upload
-                  </button>
-                </div>
-              ) : null}
-
-              <div>
-                <div className="flex items-center justify-between gap-2">
-                  <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
-                    IQDB candidates
-                  </p>
-                  {isVideo ? null : (
-                    <button
-                      type="button"
-                      onClick={() => void checkIqdb()}
-                      disabled={checking || busy || temp.processing}
-                      className="rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text disabled:opacity-50"
+                    <Link
+                      to={`/detail/${match.j_id}`}
+                      className="block"
+                      title={match.filename}
                     >
-                      {checking || temp.processing
-                        ? "checking…"
-                        : iqdbData
-                          ? "re-check"
-                          : "check now"}
+                      <ThumbImage
+                        src={apiUrl(
+                          match.thumbnail_url ??
+                            `/api/files/${match.j_id}/thumbnail/`,
+                        )}
+                        className="aspect-square w-full"
+                      />
+                    </Link>
+                    <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+                      <span className="min-w-0">
+                        <Link
+                          to={`/detail/${match.j_id}`}
+                          className="font-mono text-[11px] text-ctp-blue hover:underline"
+                        >
+                          {match.j_id}
+                        </Link>
+                        <span
+                          className="block truncate font-mono text-[10px] text-ctp-overlay0"
+                          title={match.filename}
+                        >
+                          {match.filename}
+                        </span>
+                      </span>
+                      <span className="shrink-0 font-mono text-[11px] text-ctp-peach">
+                        {match.similarity}%
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <p className="mt-2 text-[11px] text-ctp-overlay0">
+                This upload looks like it is already in the library — you can
+                discard it below.
+              </p>
+              <button
+                type="button"
+                onClick={() => void discardUpload()}
+                className="mt-2 rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-red transition hover:bg-ctp-red/15"
+              >
+                discard this upload
+              </button>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex min-w-0 flex-col gap-5 border-t border-ctp-surface0 p-5 lg:overflow-y-auto lg:border-l lg:border-t-0">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+                e621 IQDB candidates
+              </p>
+              {isVideo ? null : (
+                <button
+                  type="button"
+                  onClick={() => void checkIqdb()}
+                  disabled={checking || busy || temp.processing}
+                  className="rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text disabled:opacity-50"
+                >
+                  {checking || temp.processing
+                    ? "checking…"
+                    : iqdbData
+                      ? "re-check"
+                      : "check now"}
+                </button>
+              )}
+            </div>
+
+            {isVideo ? (
+              <p className="mt-2 text-xs text-ctp-overlay0">
+                IQDB works on images only.
+              </p>
+            ) : temp.processing && !(iqdbData?.length ?? 0) ? (
+              <p className="mt-2 flex items-center gap-1.5 text-xs text-ctp-overlay0">
+                <Spinner className="h-3.5 w-3.5" />
+                Querying e621 IQDB…
+              </p>
+            ) : iqdbData && iqdbData.length > 0 ? (
+              <>
+                <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
+                  {iqdbData.map((candidate) => (
+                    <button
+                      key={`${candidate.post_id}-${candidate.md5}`}
+                      type="button"
+                      disabled={busy || !candidate.post_id}
+                      onClick={() => setSelected(candidate)}
+                      className={cn(
+                        "overflow-hidden rounded-md border bg-ctp-mantle text-left transition disabled:opacity-50",
+                        selected?.post_id === candidate.post_id
+                          ? "border-ctp-mauve ring-2 ring-ctp-mauve/40"
+                          : "border-ctp-surface0 hover:border-ctp-surface2",
+                      )}
+                    >
+                      <span className="relative block aspect-square overflow-hidden">
+                        {candidate.preview_url ? (
+                          <ThumbImage
+                            src={candidate.preview_url}
+                            className="h-full w-full"
+                          />
+                        ) : (
+                          <span className="flex h-full w-full items-center justify-center text-[10px] text-ctp-overlay0">
+                            No preview
+                          </span>
+                        )}
+                        {candidate.rating ? (
+                          <span
+                            className={cn(
+                              "absolute left-1 top-1 rounded-full px-1 py-0.5 font-mono text-[9px] font-semibold uppercase",
+                              ratingPill[candidate.rating] ??
+                                "bg-ctp-surface1 text-ctp-text",
+                            )}
+                          >
+                            {candidate.rating}
+                          </span>
+                        ) : null}
+                      </span>
+                      <span className="block px-1.5 py-1 font-mono text-[10px] text-ctp-overlay0">
+                        #{candidate.post_id}
+                        {candidate.score !== null
+                          ? ` · ${Math.round(candidate.score)}%`
+                          : ""}
+                      </span>
                     </button>
-                  )}
+                  ))}
                 </div>
 
-                {isVideo ? (
-                  <p className="mt-2 text-xs text-ctp-overlay0">
-                    IQDB works on images only.
-                  </p>
-                ) : temp.processing && !(iqdbData?.length ?? 0) ? (
-                  <p className="mt-2 flex items-center gap-1.5 text-xs text-ctp-overlay0">
-                    <Spinner className="h-3.5 w-3.5" />
-                    Querying e621 IQDB…
-                  </p>
-                ) : iqdbData && iqdbData.length > 0 ? (
-                  <>
-                    <div className="mt-2 grid grid-cols-3 gap-2">
-                      {iqdbData.map((candidate) => (
-                        <button
-                          key={`${candidate.post_id}-${candidate.md5}`}
-                          type="button"
-                          disabled={busy || !candidate.post_id}
-                          onClick={() => setSelected(candidate)}
-                          className={cn(
-                            "overflow-hidden rounded-md border bg-ctp-mantle text-left transition disabled:opacity-50",
-                            selected?.post_id === candidate.post_id
-                              ? "border-ctp-mauve ring-2 ring-ctp-mauve/40"
-                              : "border-ctp-surface0 hover:border-ctp-surface2",
-                          )}
-                        >
-                          <span className="relative block aspect-square overflow-hidden">
-                            {candidate.preview_url ? (
-                              <img
-                                src={candidate.preview_url}
-                                alt={`Post #${candidate.post_id}`}
-                                loading="lazy"
-                                className="h-full w-full object-cover"
-                              />
-                            ) : (
-                              <span className="flex h-full w-full items-center justify-center text-[10px] text-ctp-overlay0">
-                                No preview
-                              </span>
-                            )}
-                            {candidate.rating ? (
-                              <span
-                                className={cn(
-                                  "absolute left-1 top-1 rounded-full px-1 py-0.5 font-mono text-[9px] font-semibold uppercase",
-                                  ratingPill[candidate.rating] ??
-                                    "bg-ctp-surface1 text-ctp-text",
-                                )}
-                              >
-                                {candidate.rating}
-                              </span>
-                            ) : null}
-                          </span>
-                          <span className="block px-1.5 py-1 font-mono text-[10px] text-ctp-overlay0">
-                            #{candidate.post_id}
-                            {candidate.score !== null
-                              ? ` · ${Math.round(candidate.score)}%`
-                              : ""}
-                          </span>
-                        </button>
-                      ))}
-                    </div>
-
-                    {selected ? (
-                      <div className="mt-2 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-3">
-                        <p className="font-mono text-xs text-ctp-subtext1">
-                          Post #{selected.post_id}
-                        </p>
-                        <p className="mt-1 text-xs text-ctp-overlay0">
-                          {selected.rating
-                            ? (RATING_LABELS[selected.rating] ??
-                              selected.rating)
-                            : "Unknown rating"}
-                          {selected.score_total !== null &&
-                          selected.score_total !== undefined
-                            ? ` · ▲ ${selected.score_total}`
-                            : ""}
-                          {selected.fav_count !== null &&
-                          selected.fav_count !== undefined
-                            ? ` · ${selected.fav_count} favs`
-                            : ""}
-                          {selected.width && selected.height
-                            ? ` · ${selected.width}×${selected.height}`
-                            : ""}
-                        </p>
-                        {selected.tags_preview &&
-                        selected.tags_preview.length > 0 ? (
-                          <div className="mt-2 flex flex-wrap gap-1">
-                            {selected.tags_preview.map((tag) => (
-                              <span
-                                key={tag}
-                                className="rounded border border-ctp-surface1 px-1 py-0.5 font-mono text-[10px] text-ctp-subtext0"
-                              >
-                                {tag}
-                              </span>
-                            ))}
-                          </div>
-                        ) : null}
-                        <div className="mt-3 flex items-center gap-3">
-                          <Button
-                            onClick={() => void linkCandidate(selected)}
-                            disabled={busy || !selected.post_id}
+                {selected ? (
+                  <div className="mt-3 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-3">
+                    <p className="font-mono text-xs text-ctp-subtext1">
+                      Post #{selected.post_id}
+                    </p>
+                    <p className="mt-1 text-xs text-ctp-overlay0">
+                      {selected.rating
+                        ? (RATING_LABELS[selected.rating] ?? selected.rating)
+                        : "Unknown rating"}
+                      {selected.score_total !== null &&
+                      selected.score_total !== undefined
+                        ? ` · ▲ ${selected.score_total}`
+                        : ""}
+                      {selected.fav_count !== null &&
+                      selected.fav_count !== undefined
+                        ? ` · ${selected.fav_count} favs`
+                        : ""}
+                      {selected.width && selected.height
+                        ? ` · ${selected.width}×${selected.height}`
+                        : ""}
+                    </p>
+                    {selected.tags_preview &&
+                    selected.tags_preview.length > 0 ? (
+                      <div className="mt-2 flex flex-wrap gap-1">
+                        {selected.tags_preview.map((tag) => (
+                          <span
+                            key={tag}
+                            className="rounded border border-ctp-surface1 px-1 py-0.5 font-mono text-[10px] text-ctp-subtext0"
                           >
-                            Link selected post
-                          </Button>
-                          <Link
-                            to={`/detail/${selected.post_id}`}
-                            target="_blank"
-                            className="text-xs text-ctp-blue hover:underline"
-                          >
-                            View post
-                          </Link>
-                        </div>
-                        <p className="mt-2 text-[11px] text-ctp-overlay0">
-                          Linking downloads the post's file into the library
-                          and drops this staged upload.
-                        </p>
+                            {tag}
+                          </span>
+                        ))}
                       </div>
                     ) : null}
-                  </>
-                ) : iqdbData ? (
-                  <p className="mt-2 text-xs text-ctp-overlay0">
-                    Checked against e621 IQDB — no match found.
-                  </p>
-                ) : (
-                  <p className="mt-2 text-xs text-ctp-overlay0">
-                    Not checked yet. The background pipeline checks uploads
-                    automatically.
-                  </p>
-                )}
-              </div>
+                    <div className="mt-3 flex items-center gap-3">
+                      <Button
+                        onClick={() => void linkCandidate(selected)}
+                        disabled={busy || !selected.post_id}
+                      >
+                        Link selected post
+                      </Button>
+                      <Link
+                        to={`/detail/${selected.post_id}`}
+                        target="_blank"
+                        className="text-xs text-ctp-blue hover:underline"
+                      >
+                        View post
+                      </Link>
+                    </div>
+                  </div>
+                ) : null}
+              </>
+            ) : iqdbData ? (
+              <p className="mt-2 text-xs text-ctp-overlay0">
+                Checked against e621 IQDB — no match found.
+              </p>
+            ) : (
+              <p className="mt-2 text-xs text-ctp-overlay0">
+                Not checked yet. The background pipeline checks uploads
+                automatically.
+              </p>
+            )}
+          </div>
 
-              <div className="flex gap-2">
-                <input
-                  className={cn(inputClass, "font-mono")}
-                  placeholder="e621 post ID"
-                  value={postId}
-                  onChange={(event) => setPostId(event.target.value)}
-                />
-                <Button onClick={() => void linkById()} disabled={busy}>
-                  Link
-                </Button>
-              </div>
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+              Link to an e621 post
+            </p>
+            <div className="mt-2 flex gap-2">
+              <input
+                className={cn(inputClass, "font-mono")}
+                placeholder="e621 post ID"
+                value={postId}
+                onChange={(event) => setPostId(event.target.value)}
+              />
+              <Button onClick={() => void linkById()} disabled={busy}>
+                Link
+              </Button>
             </div>
-          ) : (
-            <div className="flex flex-col gap-3">
+            <p className="mt-2 text-[11px] text-ctp-overlay0">
+              Linking downloads the post's file into the library and drops this
+              staged upload.
+            </p>
+          </div>
+
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+              Custom metadata
+            </p>
+            <div className="mt-2 flex flex-col gap-3">
               <div className="flex flex-wrap gap-1.5">
                 {ratingChoices.map((choice) => (
                   <button
@@ -810,7 +849,7 @@ function MetadataForm({
                 Save custom metadata
               </Button>
             </div>
-          )}
+          </div>
 
           {error ? <p className="text-xs text-ctp-red">{error}</p> : null}
           {temp.pipeline_error ? (
@@ -825,7 +864,7 @@ function MetadataForm({
           ) : null}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -845,11 +884,11 @@ function MetadataModal({
 
   return (
     <div
-      className="fixed inset-0 z-[70] flex items-start justify-center overflow-y-auto bg-ctp-crust/70 px-4 py-10 backdrop-blur-sm"
+      className="fixed inset-0 z-[70] flex items-start justify-center overflow-y-auto bg-ctp-crust/70 px-3 py-6 backdrop-blur-sm"
       onClick={onClose}
     >
       <div
-        className="w-full max-w-2xl rounded-lg border border-ctp-surface1 bg-ctp-base p-5"
+        className="flex max-h-[92vh] w-full max-w-[min(1400px,96vw)] flex-col overflow-hidden rounded-xl border border-ctp-surface1 bg-ctp-base"
         onClick={(event) => event.stopPropagation()}
       >
         {detailQuery.data ? (
@@ -859,11 +898,11 @@ function MetadataModal({
             onClose={onClose}
           />
         ) : detailQuery.isError ? (
-          <p className="text-sm text-ctp-red">
+          <p className="p-5 text-sm text-ctp-red">
             Could not load this upload's details.
           </p>
         ) : (
-          <p className="flex items-center gap-2 text-sm text-ctp-overlay0">
+          <p className="flex items-center gap-2 p-5 text-sm text-ctp-overlay0">
             <Spinner className="h-4 w-4" /> Loading…
           </p>
         )}