diff --git a/web/public/hidden_audiobook_or_podcast.png b/web/public/hidden_audiobook_or_podcast.png
new file mode 100644
index 0000000..1ffec22
Binary files /dev/null and b/web/public/hidden_audiobook_or_podcast.png differ
diff --git a/web/public/hiddenalbum.png b/web/public/hiddenalbum.png
new file mode 100644
index 0000000..a600ec9
Binary files /dev/null and b/web/public/hiddenalbum.png differ
diff --git a/web/src/components/Cover.tsx b/web/src/components/Cover.tsx
index ffc996b..da98946 100644
--- a/web/src/components/Cover.tsx
+++ b/web/src/components/Cover.tsx
@@ -26,8 +26,8 @@ interface Props {
   style?: CSSProperties;
   /** Print the title over generated art. Off for thumbnails, where it would not fit. */
   label?: boolean;
-  /** A reward-gated album/track not yet earned - shows a question mark instead of the
-   * real art or title, regardless of `has_cover`. */
+  /** A reward-gated album/track not yet earned - shows a placeholder cover instead of
+   * the real art or title, regardless of `has_cover`. */
   locked?: boolean;
 }
 
@@ -53,20 +53,18 @@ export function Cover({ album, size, fit = "width", radius, className, style, la
       }}
     >
       {locked ? (
-        <div
+        <img
+          src={book ? "/hidden_audiobook_or_podcast.png" : "/hiddenalbum.png"}
+          alt=""
           style={{
             position: "absolute",
             inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: Math.max(22, Math.round(size / 2.2)),
-            color: "oklch(99% 0 0 / .85)",
-            textShadow: "0 2px 8px oklch(15% 0.05 210 / .6)",
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            clipPath: book ? "inset(0 5% 0 0)" : undefined,
           }}
-        >
-          ❓
-        </div>
+        />
       ) : (
         <>
           {!album.has_cover && label && (