diff --git a/src/admin/components/elements/ThumbnailCard/index.tsx b/src/admin/components/elements/ThumbnailCard/index.tsx
index 92e28769a9..a15ceb3465 100644
--- a/src/admin/components/elements/ThumbnailCard/index.tsx
+++ b/src/admin/components/elements/ThumbnailCard/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Props } from './types';
 import Thumbnail from '../Thumbnail';
@@ -13,6 +13,11 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
     onClick,
     doc,
     collection,
+    collection: {
+      admin: {
+        useAsTitle,
+      },
+    },
     thumbnail,
     label,
     alignLabel,
@@ -28,6 +33,8 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
     alignLabel && `${baseClass}--align-label-${alignLabel}`,
   ].filter(Boolean).join(' ');
 
+  const title: any = doc?.[useAsTitle] || doc?.filename || `[${t('untitled')}]`;
+
   return (
     <div
       className={classes}
@@ -45,12 +52,7 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
         )}
       </div>
       <div className={`${baseClass}__label`}>
-        {label && label}
-        {!label && doc && (
-          <Fragment>
-            {typeof doc?.filename === 'string' ? doc?.filename : `[${t('untitled')}]`}
-          </Fragment>
-        )}
+        {label || title}
       </div>
     </div>
   );