diff --git a/src/components/FigureThumbnail.tsx b/src/components/FigureThumbnail.tsx
new file mode 100644
index 0000000..c479f52
--- /dev/null
+++ b/src/components/FigureThumbnail.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import { GatsbyImage, IGatsbyImageData, getImage } from "gatsby-plugin-image";
+
+const { imgFill, scale } = require("../style/figure-thumbnail.module.css");
+
+interface FigureThumbnailProps {
+    figure: {
+        url?: string | null;
+        file?: {
+            childImageSharp?: {
+                gatsbyImageData: IGatsbyImageData;
+            } | null;
+        } | null;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+const FigureThumbnail: React.FC<FigureThumbnailProps> = ({
+    className,
+    figure,
+    style,
+}) => {
+    const gatsbyImage = figure.file?.childImageSharp
+        ? getImage(figure.file.childImageSharp)
+        : null;
+
+    if (gatsbyImage) {
+        return (
+            <GatsbyImage
+                image={gatsbyImage}
+                alt=""
+                className={className}
+                imgClassName={scale}
+                style={style}
+            />
+        );
+    }
+
+    if (figure.url) {
+        return (
+            <div className={className} style={style}>
+                <img src={figure.url} alt="" className={imgFill} />
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export default FigureThumbnail;
diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx
index 89fb3d3..324a6e9 100644
--- a/src/components/IdeaRoll.tsx
+++ b/src/components/IdeaRoll.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { Link, graphql, useStaticQuery } from "gatsby";
 
+import FigureThumbnail from "./FigureThumbnail";
 import { TagPopover } from "./TagPopover";
 
 const {
@@ -11,6 +12,8 @@ const {
     listItem,
     tagEyebrow,
     tagSeparator,
+    textBlock,
+    thumbnail,
     title,
 } = require("../style/idea-roll.module.css");
 
@@ -24,6 +27,8 @@ interface IdeaRollProps {
     count?: number;
 }
 
+const THUMBNAIL_SIZE = { width: 88, height: 56 };
+
 const IdeaRoll = ({ count }: IdeaRollProps) => {
     const queryData = useStaticQuery(graphql`
         query IdeaRoll {
@@ -40,6 +45,22 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
                         type
                         name
                     }
+                    preliminaryFindings {
+                        figures {
+                            type
+                            url
+                            file {
+                                childImageSharp {
+                                    gatsbyImageData(
+                                        width: 88
+                                        height: 56
+                                        layout: FIXED
+                                        quality: 80
+                                    )
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -55,40 +76,67 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
     return (
         <>
             <ul className={container}>
-                {ideas.map((item) => (
-                    <li key={item.id} className={listItem}>
-                        {item.tags.length > 0 && (
-                            <div className={tagEyebrow}>
-                                {item.tags.map((tag, i) => (
-                                    <React.Fragment key={tag}>
-                                        {i > 0 && (
-                                            <span
-                                                className={tagSeparator}
-                                                aria-hidden="true"
-                                            >
-                                                ·
-                                            </span>
-                                        )}
-                                        <TagPopover
-                                            tag={tag}
-                                            currentSlug={item.slug}
-                                            className={eyebrowTag}
-                                        />
-                                    </React.Fragment>
-                                ))}
+                {ideas.map((item) => {
+                    const firstFigure =
+                        item.preliminaryFindings?.figures?.[0] ?? null;
+
+                    return (
+                        <li key={item.id} className={listItem}>
+                            <div className={textBlock}>
+                                {item.tags.length > 0 && (
+                                    <div className={tagEyebrow}>
+                                        {item.tags.map((tag, i) => (
+                                            <React.Fragment key={tag}>
+                                                {i > 0 && (
+                                                    <span
+                                                        className={tagSeparator}
+                                                        aria-hidden="true"
+                                                    >
+                                                        ·
+                                                    </span>
+                                                )}
+                                                <TagPopover
+                                                    tag={tag}
+                                                    currentSlug={item.slug}
+                                                    className={eyebrowTag}
+                                                />
+                                            </React.Fragment>
+                                        ))}
+                                    </div>
+                                )}
+                                <Link to={item.slug} className={title}>
+                                    {item.title}
+                                </Link>
+                                <div className={byline}>
+                                    by{" "}
+                                    {item.authors
+                                        .map((a) => a.name)
+                                        .join(" · ")}
+                                    {item.dataset
+                                        ? ` — ${item.dataset}`
+                                        : " — No public dataset"}
+                                </div>
                             </div>
-                        )}
-                        <Link to={item.slug} className={title}>
-                            {item.title}
-                        </Link>
-                        <div className={byline}>
-                            by {item.authors.map((a) => a.name).join(" · ")}
-                            {item.dataset
-                                ? ` — ${item.dataset}`
-                                : " — No public dataset"}
-                        </div>
-                    </li>
-                ))}
+
+                            {firstFigure && (
+                                <Link
+                                    to={item.slug}
+                                    tabIndex={-1}
+                                    aria-hidden="true"
+                                >
+                                    <FigureThumbnail
+                                        style={{
+                                            width: THUMBNAIL_SIZE.width,
+                                            height: THUMBNAIL_SIZE.height,
+                                        }}
+                                        figure={firstFigure}
+                                        className={thumbnail}
+                                    />
+                                </Link>
+                            )}
+                        </li>
+                    );
+                })}
             </ul>
             {count !== undefined && (
                 <div>
diff --git a/src/style/colors.css b/src/style/colors.css
index 5d792ca..eb25b80 100644
--- a/src/style/colors.css
+++ b/src/style/colors.css
@@ -42,6 +42,7 @@
     --main-card-header-color: var(--primary-color);
     --callout-box-bg-color: var(--PAGE_2);
     --callout-box-border-color: var(--ALLEN_ORANGE);
+    --thumbnail-border-color: var(--ALLEN_ORANGE);
 
     /* Layout */
     --content-max-width: 1200px;
diff --git a/src/style/figure-thumbnail.module.css b/src/style/figure-thumbnail.module.css
new file mode 100644
index 0000000..9dbfae0
--- /dev/null
+++ b/src/style/figure-thumbnail.module.css
@@ -0,0 +1,14 @@
+.scale {
+    transform: scale(1.2);
+    transform-origin: center;
+}
+
+.imgFill {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+    transform: scale(1.2);
+    transform-origin: center;
+}
diff --git a/src/style/idea-roll.module.css b/src/style/idea-roll.module.css
index 5919b1e..6366f1a 100644
--- a/src/style/idea-roll.module.css
+++ b/src/style/idea-roll.module.css
@@ -8,12 +8,20 @@
 .listItem {
     padding: 22px 0;
     border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
 }
 
 .listItem:last-child {
     border-bottom: none;
 }
 
+.textBlock {
+    flex: 1;
+    min-width: 0;
+}
+
 .tagEyebrow {
     display: flex;
     align-items: center;
@@ -64,3 +72,19 @@
     font-weight: 400;
     color: var(--text-secondary-color);
 }
+
+.thumbnail {
+    width: 88px;
+    height: 56px;
+    border-radius: 28px;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: block;
+    box-sizing: border-box;
+    box-shadow:
+        0 0 0 1.5px
+            color-mix(in srgb, var(--thumbnail-border-color) 40%, transparent),
+        0 0 10px 2px
+            color-mix(in srgb, var(--thumbnail-border-color) 20%, transparent),
+        0 2px 8px rgba(0, 0, 0, 0.15);
+}