diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
index 2ba029736..5b6f05b22 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -88,8 +88,7 @@ export function DatasetTable() {
             >
               <KeyPhoto
                 title={dataset.title}
-                // TODO use dataset keyphoto
-                src="https://loremflickr.com/400/400/cat"
+                src={dataset.key_photo_thumbnail_url ?? undefined}
                 loading={isLoadingDebounced}
               />
 
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
index ae985ebfb..e38a1b8f9 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -46,7 +46,7 @@ export function DatasetHeader() {
         <div className="flex-1 w-full max-w-[465px]">
           <KeyPhoto
             title={dataset.title}
-            src="https://loremflickr.com/400/400/cat"
+            src={dataset.key_photo_url ?? undefined}
           />
         </div>
       </div>
diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
index deda2ecc2..03a6ffc23 100644
--- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -51,8 +51,10 @@ export function RunsTable() {
             >
               <KeyPhoto
                 title={run.name}
-                // TODO use dataset keyphoto
-                src="https://loremflickr.com/400/400/cat"
+                src={
+                  run.tomogram_voxel_spacings[0]?.tomograms[0]
+                    ?.key_photo_thumbnail_url ?? undefined
+                }
                 loading={isLoadingDebounced}
               />
 
diff --git a/frontend/packages/data-portal/app/components/KeyPhoto.tsx b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
index a59bea569..2358182cd 100644
--- a/frontend/packages/data-portal/app/components/KeyPhoto.tsx
+++ b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
@@ -1,7 +1,7 @@
 import Skeleton from '@mui/material/Skeleton'
 import { match, P } from 'ts-pattern'
 
-import { i18n } from 'app/i18n'
+import { KeyPhotoFallbackIcon } from 'app/components/icons'
 import { cns } from 'app/utils/cns'
 
 export function KeyPhoto({
@@ -17,7 +17,7 @@ export function KeyPhoto({
     <div
       className={cns(
         'flex-shrink-0 basis-[134px] aspect-[4/3]',
-        'flex items-center justify-center bg-[#d9d9d9]',
+        'flex items-center justify-center bg-sds-gray-100',
         'rounded-sds-m',
 
         // crop image to container dimensions
@@ -27,10 +27,14 @@ export function KeyPhoto({
       {match([src, loading])
         .with([P._, true], () => <Skeleton variant="rounded" />)
         .with([P.string, false], () => (
-          <img alt={`key visualization for ${title}`} src={src} />
+          <img
+            alt={`key visualization for ${title}`}
+            src={src}
+            className="w-full"
+          />
         ))
         .otherwise(() => (
-          <p className="text-sds-gray-400 text-sm">{i18n.keyPhoto}</p>
+          <KeyPhotoFallbackIcon className="text-sds-gray-200 aspect-square w-1/5" />
         ))}
     </div>
   )
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
index 98666ef33..c7299d6f2 100644
--- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -18,7 +18,8 @@ export function RunHeader() {
   const { t } = useI18n()
 
   const tiltSeries = run.tiltseries[0]
-  const keyPhotoURL = 'https://loremflickr.com/400/400/cat'
+  const keyPhotoURL =
+    run.tomogram_voxel_spacings[0]?.tomograms[0]?.key_photo_url
 
   const { openTomogramDownloadModal } = useDownloadModalQueryParamState()
 
@@ -83,10 +84,14 @@ export function RunHeader() {
       title={run.name}
     >
       <div className="flex gap-sds-xxl p-sds-xl border-t-[3px] border-sds-gray-200">
-        <div className="max-w-[300px] max-h-[212px] flex-shrink-0">
-          <Link to={keyPhotoURL}>
-            <KeyPhoto title={run.name} src={keyPhotoURL} />
-          </Link>
+        <div className="max-w-[300px] h-full aspect-[4/3] flex-shrink-0">
+          {keyPhotoURL ? (
+            <Link to={keyPhotoURL}>
+              <KeyPhoto title={run.name} src={keyPhotoURL} />
+            </Link>
+          ) : (
+            <KeyPhoto title={run.name} />
+          )}
         </div>
 
         <div className="flex gap-sds-xxl flex-col lg:flex-row">
diff --git a/frontend/packages/data-portal/app/components/icons/KeyPhotoFallbackIcon.tsx b/frontend/packages/data-portal/app/components/icons/KeyPhotoFallbackIcon.tsx
new file mode 100644
index 000000000..5658d7e02
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/icons/KeyPhotoFallbackIcon.tsx
@@ -0,0 +1,21 @@
+import { IconProps } from './icon.types'
+
+export function KeyPhotoFallbackIcon(props: IconProps) {
+  return (
+    <svg
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.382 0H84.7619C92.7179 0 99.4499 6.41667 99.7559 14.6667V84.9444C99.7559 93.1944 93.0239 99.6111 85.0679 99.6111H14.688C6.42599 99.6111 0 92.8889 0 84.9444V14.6667C0 6.41667 6.42599 0 14.382 0ZM84.7619 94.4167C90.2699 94.4167 94.5539 90.1389 94.5539 84.6389H94.8599V77.9167L81.3959 62.6389C80.1719 61.4167 78.3359 60.5 76.4999 60.5C74.9699 60.5 73.7459 60.8056 72.5219 61.7222L57.8339 73.0278C56.9159 73.6389 55.6919 73.9445 54.7739 73.9445H54.1619C52.9379 73.9445 51.7139 73.0278 51.1019 72.1111L35.496 50.1111C34.272 48.5833 32.436 47.3611 30.294 47.3611H29.988C28.152 47.3611 26.316 48.2778 25.092 49.8056L4.59 73.6389V84.6389C4.59 90.1389 8.87399 94.4167 14.382 94.4167H84.7619ZM84.7619 59.2778L94.5539 70.5833H94.8599V14.6667C94.8599 9.16667 90.5759 4.88889 85.0679 4.88889H14.688C9.17999 4.88889 4.896 9.16667 4.896 14.3611V66.3056L21.726 46.75C23.868 44.3056 26.928 42.7778 30.294 42.7778H30.906C34.272 42.7778 37.332 44.6111 39.474 47.3611L55.0799 69.3611L69.7679 58.0556C71.6039 56.5278 74.0519 55.6111 76.4999 55.6111C79.5599 55.6111 82.6199 57.1389 84.7619 59.2778ZM54.7739 29.3335C54.7739 21.0835 61.5059 14.6668 69.4619 14.6668C77.7239 14.6668 84.1499 21.0835 84.1499 29.3335C84.1499 37.5835 77.4179 44.0001 69.4619 44.0001C61.1999 44.0001 54.7739 37.5835 54.7739 29.3335ZM59.3639 29.3335C59.3639 34.8335 63.9539 39.4168 69.4619 39.4168C75.2759 39.4168 79.5599 34.8335 79.5599 29.3335C79.5599 23.8335 74.9699 19.2501 69.4619 19.2501C63.9539 19.2501 59.3639 23.8335 59.3639 29.3335Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/icons/index.ts b/frontend/packages/data-portal/app/components/icons/index.ts
index b843e02ef..c8ac10c64 100644
--- a/frontend/packages/data-portal/app/components/icons/index.ts
+++ b/frontend/packages/data-portal/app/components/icons/index.ts
@@ -3,3 +3,4 @@ export * from './CZIIcon'
 export * from './EnvelopeIcon'
 export * from './icon.types'
 export * from './ImageInstituteIcon'
+export * from './KeyPhotoFallbackIcon'
diff --git a/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx b/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx
index e2355014d..7cbc215b1 100644
--- a/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx
+++ b/frontend/packages/data-portal/app/routes/browse-data.datasets.tsx
@@ -40,6 +40,7 @@ const GET_DATASETS_DATA_QUERY = gql(`
       title
       organism_name
       dataset_publications
+      key_photo_thumbnail_url
 
       authors {
         name
diff --git a/frontend/packages/data-portal/app/routes/datasets.$id.tsx b/frontend/packages/data-portal/app/routes/datasets.$id.tsx
index f98401d2c..111f03a8a 100644
--- a/frontend/packages/data-portal/app/routes/datasets.$id.tsx
+++ b/frontend/packages/data-portal/app/routes/datasets.$id.tsx
@@ -17,6 +17,9 @@ const GET_DATASET_BY_ID = gql(`
     datasets(where: { id: { _eq: $id } }) {
       s3_prefix
 
+      # key photo
+      key_photo_url
+
       # Dataset dates
       last_modified_date
       release_date
@@ -88,6 +91,12 @@ const GET_DATASET_BY_ID = gql(`
             }
           }
         }
+
+        tomogram_voxel_spacings(limit: 1) {
+          tomograms(limit: 1) {
+            key_photo_thumbnail_url
+          }
+        }
       }
 
       runs_aggregate {
diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
index 30043e219..81f7ef541 100644
--- a/frontend/packages/data-portal/app/routes/runs.$id.tsx
+++ b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -94,6 +94,7 @@ const GET_RUN_BY_ID_QUERY = gql(`
         tomograms(limit: 1) {
           ctf_corrected
           fiducial_alignment_status
+          key_photo_url
           name
           processing
           processing_software