diff --git a/__tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx b/__tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx
index 91d8ebaf05..3d6f8b3450 100644
--- a/__tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx
+++ b/__tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx
@@ -100,6 +100,22 @@ describe("MediaDisplay", () => {
     );
   });
 
+  it("renders preview image instead of iframe for html when preview is provided", () => {
+    render(
+      <MediaDisplay
+        media_mime_type="text/html"
+        media_url="ipfs://hash"
+        previewImageUrl="preview.png"
+      />
+    );
+
+    expect(screen.getByTestId("image")).toHaveAttribute(
+      "data-src",
+      "preview.png"
+    );
+    expect(screen.queryByTestId("iframe")).not.toBeInTheDocument();
+  });
+
   it("renders gated html iframe with normalized ipfs url after activation", () => {
     render(
       <MediaDisplay
@@ -121,6 +137,29 @@ describe("MediaDisplay", () => {
     );
   });
 
+  it("keeps gated html behavior when preview is provided", () => {
+    render(
+      <MediaDisplay
+        media_mime_type="text/html"
+        media_url="ipfs://hash"
+        previewImageUrl="preview.png"
+        requireInteractionToLoad
+      />
+    );
+
+    expect(screen.getByTestId("image")).toHaveAttribute(
+      "data-src",
+      "preview.png"
+    );
+
+    fireEvent.click(screen.getByTestId("load-gate"));
+
+    expect(screen.getByTestId("iframe")).toHaveAttribute(
+      "data-src",
+      "https://ipfs.io/ipfs/hash"
+    );
+  });
+
   it("renders empty fragment for unknown", () => {
     const { container } = render(
       <MediaDisplay media_mime_type="text/plain" media_url="file.txt" />
diff --git a/components/drops/view/item/content/media/MediaDisplay.tsx b/components/drops/view/item/content/media/MediaDisplay.tsx
index e200b4647d..810086074e 100644
--- a/components/drops/view/item/content/media/MediaDisplay.tsx
+++ b/components/drops/view/item/content/media/MediaDisplay.tsx
@@ -167,6 +167,12 @@ export default function MediaDisplay({
   const mediaType = getMediaType();
 
   if (mediaType === MediaType.HTML) {
+    if (previewImageUrl && !requireInteractionToLoad) {
+      return (
+        <MediaDisplayImage src={previewImageUrl} imageScale={imageScale} />
+      );
+    }
+
     return (
       <InteractiveHtmlMediaDisplay
         key={`${media_mime_type}:${media_url}`}