diff --git a/ui/component/fileThumbnail/thumb.jsx b/ui/component/fileThumbnail/thumb.jsx
index a531ecd27..64f11c138 100644
--- a/ui/component/fileThumbnail/thumb.jsx
+++ b/ui/component/fileThumbnail/thumb.jsx
@@ -7,15 +7,16 @@ import useLazyLoading from 'effects/use-lazy-loading';
 type Props = {
   thumb: string,
   children?: Node,
+  className?: string,
 };
 
 const Thumb = (props: Props) => {
-  const { thumb, children } = props;
+  const { thumb, children, className } = props;
   const thumbnailRef = React.useRef(null);
   useLazyLoading(thumbnailRef);
 
   return (
-    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb')}>
+    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb', className)}>
       {children}
     </div>
   );
diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index 94a34de4a..6da4e513c 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/ui/component/fileThumbnail/view.jsx
@@ -53,7 +53,11 @@ function FileThumbnail(props: Props) {
   const thumbnailUrl = url ? url.replace(/'/g, "\\'") : '';
 
   if (hasResolvedClaim || thumbnailUrl) {
-    return <Thumb thumb={thumbnailUrl}>{children}</Thumb>;
+    return (
+      <Thumb thumb={thumbnailUrl} className={className}>
+        {children}
+      </Thumb>
+    );
   }
   return (
     <div