diff --git a/public/assets/spoiler.png b/public/assets/spoiler.png
new file mode 100644
index 00000000..db8f4347
Binary files /dev/null and b/public/assets/spoiler.png differ
diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index 230de8c8..3b6da2a8 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -31,18 +31,6 @@
   display: inline-block;
 }
 
-.spoilerThumbnail {
-  width: var(--maxWidth);
-  height: var(--maxHeight);
-  display: inline-block;
-  background-color: black;
-  color: white !important;
-  display: flex;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-
 .mediaPaddingWrapper {
   padding-bottom: 5px;
   display: inline-flex;
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index bc0ea06c..15037c28 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -223,9 +223,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               >
                 {threadIcons}
                 {spoiler ? (
-                  <span className={styles.spoilerThumbnail}>
-                    <span className={styles.spoilerText}>{t('spoiler')}</span>
-                  </span>
+                  <img src='/assets/spoiler.png' alt='' />
                 ) : (
                   <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
                 )}
diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index 749db0a5..c5e8a92c 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -22,14 +22,7 @@
 }
 
 .spoiler {
-  display: inline-block;
   margin: 3px 20px 5px 20px;
-  background-color: black;
-  color: white;
-  display: flex;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
 }
 
 @media (max-width: 640px) {
@@ -39,6 +32,10 @@
     margin: 3px 10px 5px 5px;
     display: inline-block;
   }
+
+  .spoiler {
+    margin: 3px 10px 5px 5px;
+  }
 }
 
 .thumbnailSmall {
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 25cea054..ba6fd9b7 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -7,6 +7,7 @@ import { getHostname } from '../../lib/utils/url-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useIsMobile from '../../hooks/use-is-mobile';
 import Embed, { canEmbed } from '../embed';
+import _ from 'lodash';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
@@ -20,7 +21,6 @@ interface MediaProps {
 }
 
 const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
-  const { t } = useTranslation();
   const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
@@ -81,9 +81,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }
   return hasError || isDeleted ? (
     <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
   ) : spoiler ? (
-    <span className={styles.spoiler} style={{ width: maxThumbnailSize, height: maxThumbnailSize }} onClick={() => setShowThumbnail(false)}>
-      <span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
-    </span>
+    <img className={styles.spoiler} src='/assets/spoiler.png' alt='' onClick={() => setShowThumbnail(false)} />
   ) : isOutOfFeed ? (
     <span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
   ) : isMobile || isReply ? (
@@ -154,7 +152,7 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
         {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
-        {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
+        {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler && `${t('spoiler')} - `} ${getDisplayMediaInfoType(type, t)}`}</div>}
       </span>
       {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
     </span>
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 97c4fcc8..2d07539c 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -116,10 +116,11 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
 const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
+  const { link, spoiler } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
   const { type, url } = commentMediaInfo || {};
   const embedUrl = url && new URL(url);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, post?.link);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   return (
@@ -127,7 +128,7 @@ const PostMedia = ({ post }: PostProps) => {
       <div className={styles.fileText}>
         {t('link')}:{' '}
         <a href={url} target='_blank' rel='noopener noreferrer'>
-          {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
+          {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
         </a>{' '}
         ({type && _.lowerCase(getDisplayMediaInfoType(type, t))})
         {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
diff --git a/src/themes.css b/src/themes.css
index 54c95b97..6c1fd225 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -354,6 +354,7 @@
   --post-mobile-link-border-top: 1px solid #b7c5d9;
   --post-mobile-link-info-text-color: #34345c;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
@@ -530,6 +531,7 @@
   --post-mobile-link-border-top: 1px solid #d9bfb7;
   --post-mobile-link-info-text-color: #800;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
@@ -714,6 +716,7 @@
   --post-mobile-link-border-top: 1px solid #b7c5d9;
   --post-mobile-link-info-text-color: #34345c;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
@@ -910,6 +913,7 @@
   --post-mobile-link-border-bottom: 1px solid #2D2F33;
   --post-mobile-link-info-text-color: #707070;
   --post-mobile-abbr-text-color: #707070;
+  --post-mobile-file-info-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
@@ -1071,6 +1075,7 @@
   --post-mobile-link-border-bottom: 1px solid #ccc;
   --post-mobile-link-info-text-color: #333;
   --post-mobile-abbr-text-color: #333;
+  --post-mobile-file-info-text-color: #333;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;