diff --git a/frontend/src/components/fragments/Thumbnail.tsx b/frontend/src/components/fragments/Thumbnail.tsx
index d704f284f..6c5ae4254 100644
--- a/frontend/src/components/fragments/Thumbnail.tsx
+++ b/frontend/src/components/fragments/Thumbnail.tsx
@@ -1,17 +1,24 @@
 import { FC } from "react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import Icon from "./Icon";
 
 interface Props {
-  image: string;
+  image?: string;
   size?: number;
   alt?: string | null;
   className?: string;
 }
 
-export const Thumbnail: FC<Props> = ({ image, size, alt, className }) => (
-  <img
-    alt={alt ?? ""}
-    className={className}
-    src={image + (size ? `?size=${size}` : "")}
-    srcSet={size ? `${image}?size=${size * 2} ${size * 2}w` : ""}
-  />
-);
+export const Thumbnail: FC<Props> = ({ image, size, alt, className }) =>
+  image ? (
+    <img
+      alt={alt ?? ""}
+      className={className}
+      src={image + (size ? `?size=${size}` : "")}
+      srcSet={size ? `${image}?size=${size * 2} ${size * 2}w` : ""}
+    />
+  ) : (
+    <div className="Thumbnail-empty" style={{ aspectRatio: "16/9" }}>
+      <Icon icon={faXmark} />
+    </div>
+  );
diff --git a/frontend/src/components/fragments/styles.scss b/frontend/src/components/fragments/styles.scss
index fef7eac92..e5b79cde5 100644
--- a/frontend/src/components/fragments/styles.scss
+++ b/frontend/src/components/fragments/styles.scss
@@ -127,3 +127,20 @@
 .Tooltip {
   position: absolute !important;
 }
+
+.Thumbnail {
+  &-empty {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: var(--bs-gray-400);
+    background-color: #394b59;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+
+    .fa-icon {
+      height: 30px;
+    }
+  }
+}
diff --git a/frontend/src/components/image/Image.tsx b/frontend/src/components/image/Image.tsx
index c7d4999d1..5bd99213b 100644
--- a/frontend/src/components/image/Image.tsx
+++ b/frontend/src/components/image/Image.tsx
@@ -13,7 +13,7 @@ type Image = {
 };
 
 interface ImageProps {
-  image: Image;
+  image?: Image;
   emptyMessage?: string;
   size?: number | "full";
   alt?: string;
@@ -29,7 +29,7 @@ const ImageComponent: FC<ImageProps> = ({
     "loading",
   );
 
-  if (!image.url)
+  if (!image?.url)
     return (
       <div className={`${CLASSNAME}-missing`}>
         <Icon icon={faXmark} color="var(--bs-gray-400)" />
@@ -62,7 +62,7 @@ const ImageComponent: FC<ImageProps> = ({
 };
 
 interface ContainerProps {
-  images: Image[] | Image;
+  images: Image[] | Image | undefined;
   orientation?: "landscape" | "portrait";
   emptyMessage?: string;
   size?: number | "full";
@@ -80,11 +80,10 @@ const ImageContainer: FC<ContainerProps> = ({
     ? sortImageURLs(images, orientation)[0]
     : images;
 
+  const aspectRatio = image ? `${image.width}/${image.height}` : "16/6";
+
   return (
-    <div
-      className={cx(CLASSNAME, className)}
-      style={{ aspectRatio: `${image.width}/${image.height}` }}
-    >
+    <div className={cx(CLASSNAME, className)} style={{ aspectRatio }}>
       <ImageComponent {...props} image={image} />
     </div>
   );
diff --git a/frontend/src/utils/transforms.ts b/frontend/src/utils/transforms.ts
index a19d2db2f..ef133ab47 100644
--- a/frontend/src/utils/transforms.ts
+++ b/frontend/src/utils/transforms.ts
@@ -63,7 +63,7 @@ export const getImage = (
   orientation: "portrait" | "landscape",
 ) => {
   const images = sortImageURLs(urls, orientation);
-  return images?.[0]?.url ?? "";
+  return images?.[0]?.url;
 };
 
 export const imageType = (image?: Image) => {