1 files changed, 23 insertions, 5 deletions
diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index 61b3bc8d..0cb75b3f 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -2,6 +2,8 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { FileText } from "lucide-react";
 
 import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
 import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
@@ -32,12 +34,28 @@ function AssetImage({
       );
     }
     case "pdf": {
+      const screenshotAssetId = bookmark.assets.find(
+        (r) => r.assetType === "assetScreenshot",
+      )?.id;
+      if (!screenshotAssetId) {
+        return (
+          <div
+            className={cn(className, "flex items-center justify-center")}
+            title="PDF screenshot not available. Run asset preprocessing job to generate one screenshot"
+          >
+            <FileText size={80} />
+          </div>
+        );
+      }
       return (
-        <iframe
-          title={bookmarkedAsset.assetId}
-          className={className}
-          src={getAssetUrl(bookmarkedAsset.assetId)}
-        />
+        <Link href={`/dashboard/preview/${bookmark.id}`}>
+          <Image
+            alt="asset"
+            src={getAssetUrl(screenshotAssetId)}
+            fill={true}
+            className={className}
+          />
+        </Link>
       );
     }
     default: {