diff --git a/src/api/resource/Dto.ts b/src/api/resource/Dto.ts
index 7faaa799..5fb698bb 100644
--- a/src/api/resource/Dto.ts
+++ b/src/api/resource/Dto.ts
@@ -14,6 +14,8 @@ export interface ResourceFileDto {
     path: string,
 
     ext: string,
+
+    media_type: string,
 }
 
 export interface ResourceResDto {
diff --git a/src/assets/icons/not-supported-icon.png b/src/assets/icons/not-supported-icon.png
new file mode 100644
index 00000000..b56f12ab
Binary files /dev/null and b/src/assets/icons/not-supported-icon.png differ
diff --git a/src/components/display/ResourceThumbnailDisplayer.tsx b/src/components/display/ResourceThumbnailDisplayer.tsx
deleted file mode 100644
index 3e7cdbe4..00000000
--- a/src/components/display/ResourceThumbnailDisplayer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { convertFileSrc } from '@tauri-apps/api/tauri';
-
-import { YoutubeThumbnail } from './YoutubeThunbnail';
-import { ResponsiveImage, ResponsiveImageProps } from './ResponsiveImage';
-
-interface ResourceThumbnailDisplayerProps extends ResponsiveImageProps {
-    url?: string | undefined | null;
-
-    filePath?: string | undefined | null;
-}
-
-export function ResourceThumbnailDisplayer(props: ResourceThumbnailDisplayerProps) {
-    const { url, filePath, ...imgProps } = props;
-
-    return (
-        url
-            ? <YoutubeThumbnail url={url!} {...imgProps} />
-            : <ResponsiveImage src={convertFileSrc(filePath!)} {...imgProps} />
-    );
-}
diff --git a/src/components/display/index.ts b/src/components/display/index.ts
index f7922b87..98742cc6 100644
--- a/src/components/display/index.ts
+++ b/src/components/display/index.ts
@@ -1,8 +1,7 @@
 export * from './icons';
+export * from './thumbnail';
 export * from './ResponsiveImage';
-export * from './YoutubeThunbnail';
 export * from './EditableText';
-export * from './ResourceThumbnailDisplayer';
 export * from './DateTimeDisplayer';
 export * from './TagTypography';
 export * from './SubTitle';
diff --git a/src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx b/src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx
new file mode 100644
index 00000000..9f6e11e8
--- /dev/null
+++ b/src/components/display/thumbnail/LocalFileThumbnailDisplayer.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { LocalImageThumbnail, LocalUnsupportThumbnail } from './file';
+import { LocalThumbnailProps } from './file/types';
+
+const LOCAL_MEDIA_TYPE = new Map<string, typeof LocalImageThumbnail>();
+
+LOCAL_MEDIA_TYPE.set('image/jpeg', LocalImageThumbnail);
+LOCAL_MEDIA_TYPE.set('image/png', LocalImageThumbnail);
+LOCAL_MEDIA_TYPE.set('image/gif', LocalImageThumbnail);
+
+interface LocalFileThumbnailDisplayerProps extends LocalThumbnailProps {
+    mediaType: string;
+}
+
+export function LocalFileThumbnailDisplayer(props: LocalFileThumbnailDisplayerProps) {
+    const { filePath, mediaType, ...imgProps } = props;
+
+    if (LOCAL_MEDIA_TYPE.has(mediaType) === false) {
+        return <LocalUnsupportThumbnail mediaType={mediaType} {...imgProps} />;
+    }
+
+    const Thumbnail = LOCAL_MEDIA_TYPE.get(mediaType)!;
+
+    return <Thumbnail filePath={filePath} {...imgProps} />;
+}
diff --git a/src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx b/src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx
new file mode 100644
index 00000000..11f30757
--- /dev/null
+++ b/src/components/display/thumbnail/ResourceThumbnailDisplayer.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { ResponsiveImageProps } from '@components/display';
+
+import { YoutubeThumbnail } from './url';
+import { LocalFileThumbnailDisplayer } from './LocalFileThumbnailDisplayer';
+
+export interface ResourceThumbnailDisplayerProps extends ResponsiveImageProps {
+    url?: string | undefined | null;
+
+    filePath?: string | undefined | null;
+
+    mediaType?: string;
+}
+
+export function ResourceThumbnailDisplayer(props: ResourceThumbnailDisplayerProps) {
+    const { url, filePath, mediaType, ...imgProps } = props;
+
+    return (
+        url
+            ? <YoutubeThumbnail url={url!} {...imgProps} />
+            : (
+                <LocalFileThumbnailDisplayer
+                    mediaType={mediaType!}
+                    filePath={filePath!}
+                    {...imgProps}
+                />
+            )
+    );
+}
diff --git a/src/components/display/thumbnail/file/LocalImageThumbnail.tsx b/src/components/display/thumbnail/file/LocalImageThumbnail.tsx
new file mode 100644
index 00000000..b3b1d6de
--- /dev/null
+++ b/src/components/display/thumbnail/file/LocalImageThumbnail.tsx
@@ -0,0 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { convertFileSrc } from '@tauri-apps/api/tauri';
+import { ResponsiveImage } from '@components/display';
+import { LocalThumbnailProps } from './types';
+
+export function LocalImageThumbnail(props: LocalThumbnailProps) {
+    const { filePath, ...imgProps } = props;
+    return <ResponsiveImage src={convertFileSrc(filePath)} {...imgProps} />;
+}
diff --git a/src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx b/src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx
new file mode 100644
index 00000000..d8e96b6d
--- /dev/null
+++ b/src/components/display/thumbnail/file/LocalUnsupportThumbnail.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { ResponsiveImage, ResponsiveImageProps } from '@components/display/ResponsiveImage';
+import UnsupportImage from '@assets/icons/not-supported-icon.png';
+
+export interface LocalUnsupportThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
+    mediaType: string;
+}
+
+export function LocalUnsupportThumbnail(props: LocalUnsupportThumbnailProps) {
+    const { mediaType, ...imgProps } = props;
+
+    return (<ResponsiveImage src={UnsupportImage} {...imgProps} alt={mediaType} />);
+}
diff --git a/src/components/display/thumbnail/file/index.ts b/src/components/display/thumbnail/file/index.ts
new file mode 100644
index 00000000..aadbac03
--- /dev/null
+++ b/src/components/display/thumbnail/file/index.ts
@@ -0,0 +1,2 @@
+export * from './LocalUnsupportThumbnail';
+export * from './LocalImageThumbnail';
diff --git a/src/components/display/thumbnail/file/types.ts b/src/components/display/thumbnail/file/types.ts
new file mode 100644
index 00000000..b2369ec5
--- /dev/null
+++ b/src/components/display/thumbnail/file/types.ts
@@ -0,0 +1,5 @@
+import { ResponsiveImageProps } from '@components/display/ResponsiveImage';
+
+export interface LocalThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
+    filePath: string;
+}
diff --git a/src/components/display/thumbnail/index.ts b/src/components/display/thumbnail/index.ts
new file mode 100644
index 00000000..7c856b8b
--- /dev/null
+++ b/src/components/display/thumbnail/index.ts
@@ -0,0 +1,3 @@
+export * from './file';
+export * from './url';
+export * from './ResourceThumbnailDisplayer';
diff --git a/src/components/display/YoutubeThunbnail.tsx b/src/components/display/thumbnail/url/YoutubeThunbnail.tsx
similarity index 97%
rename from src/components/display/YoutubeThunbnail.tsx
rename to src/components/display/thumbnail/url/YoutubeThunbnail.tsx
index 4f54ba37..0c4b213d 100644
--- a/src/components/display/YoutubeThunbnail.tsx
+++ b/src/components/display/thumbnail/url/YoutubeThunbnail.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { useMemo, useRef, useState } from 'react';
 import { CiImageOff } from 'react-icons/ci';
 import { Center, Image } from '@mantine/core';
 import { getYoutubeVideoId } from '@utils/urlParser';
 import { useBackGroundImage } from '@hooks/ui-hooks';
-
-import { useMemo, useRef, useState } from 'react';
-import { ResponsiveImageProps } from './ResponsiveImage';
+import { ResponsiveImageProps } from '@components/display';
 
 export interface YoutubeThumbnailProps extends Omit<ResponsiveImageProps, 'src' | 'ref'> {
     url: string;
diff --git a/src/components/display/thumbnail/url/index.ts b/src/components/display/thumbnail/url/index.ts
new file mode 100644
index 00000000..2c4edaf0
--- /dev/null
+++ b/src/components/display/thumbnail/url/index.ts
@@ -0,0 +1 @@
+export * from './YoutubeThunbnail';
diff --git a/src/pages/category-list/components/CategoryCard.tsx b/src/pages/category-list/components/CategoryCard.tsx
index 8d713859..7b3b057e 100644
--- a/src/pages/category-list/components/CategoryCard.tsx
+++ b/src/pages/category-list/components/CategoryCard.tsx
@@ -55,6 +55,7 @@ export function CategoryCard(props: CategoryCardProps) {
                                 key={data.id}
                                 url={data.url?.full}
                                 filePath={`${data.root_path}${data.file?.path}`}
+                                mediaType={data.file?.media_type}
                                 alt={data.name}
                                 useBackgoundImg
                             />
diff --git a/src/pages/resource-list/components/ResourceCard.tsx b/src/pages/resource-list/components/ResourceCard.tsx
index 2c0c297b..f0457986 100644
--- a/src/pages/resource-list/components/ResourceCard.tsx
+++ b/src/pages/resource-list/components/ResourceCard.tsx
@@ -49,7 +49,12 @@ export function ResourceCard(props: ResourceCardProps) {
                             </>
                         )}
                         <UnstyledButton>
-                            <ResourceThumbnailDisplayer url={data.url?.full} filePath={`${data.root_path}${data.file?.path}`} alt={data.name} />
+                            <ResourceThumbnailDisplayer
+                                url={data.url?.full}
+                                filePath={`${data.root_path}${data.file?.path}`}
+                                alt={data.name}
+                                mediaType={data.file?.media_type}
+                            />
                         </UnstyledButton>
                     </Box>
                 </Card.Section>