diff --git a/components/AssetsPreview.tsx b/components/AssetsPreview.tsx
index 5803db4..07011da 100644
--- a/components/AssetsPreview.tsx
+++ b/components/AssetsPreview.tsx
@@ -83,6 +83,17 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
               <span className="flex self-center ">{assetSource.name}</span>
             </div>
           )}
+          {getAssetType(assetSource.name) === 'document' && (
+            <div className="flex absolute flex-col items-center mt-4 ml-2">
+              <img
+                key={`document-${index}`}
+                alt="document_icon"
+                className={clsx('mb-2 ml-1 w-6 h-6 thumbnail')}
+                src="/pdf.png"
+              />
+              <span className="flex self-center ">{assetSource.name}</span>
+            </div>
+          )}
           {getAssetType(assetSource.name) === 'video' &&
             videoPreviewElements.filter((videoPreviewElement) => videoPreviewElement.key === assetSource.name)}
 
diff --git a/components/MetadataFormGroup.tsx b/components/MetadataFormGroup.tsx
index 1f4bee7..101bef5 100644
--- a/components/MetadataFormGroup.tsx
+++ b/components/MetadataFormGroup.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
+import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
@@ -41,6 +42,16 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
     [relatedAsset],
   )
 
+  const documentPreview = useMemo(
+    () => (
+      <div className="flex flex-col items-center mt-4 ml-2">
+        <img key="document-key" alt="document_icon" className={clsx('mb-2 ml-2 w-24 h-24 thumbnail')} src="/pdf.png" />
+        <span className="flex self-center ">{relatedAsset?.name}</span>
+      </div>
+    ),
+    [relatedAsset],
+  )
+
   useEffect(() => {
     if (getAssetType(relatedAsset?.name as string) !== 'html') return
     const reader = new FileReader()
@@ -60,9 +71,14 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
           {subtitle && <span className="text-sm text-white/50">{subtitle}</span>}
           <div>
             {relatedAsset && (
-              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+              <div
+                className={`flex flex-row items-center mt-2 mr-4 ${
+                  getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
+                }`}
+              >
                 {getAssetType(relatedAsset.name) === 'audio' && audioPreview}
                 {getAssetType(relatedAsset.name) === 'video' && videoPreview}
+                {getAssetType(relatedAsset.name) === 'document' && documentPreview}
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}
diff --git a/components/SingleAssetPreview.tsx b/components/SingleAssetPreview.tsx
index 578b7c4..f6ca039 100644
--- a/components/SingleAssetPreview.tsx
+++ b/components/SingleAssetPreview.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
+import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
@@ -41,6 +42,16 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
     [relatedAsset],
   )
 
+  const documentPreview = useMemo(
+    () => (
+      <div className="flex flex-col items-center mt-4 ml-2">
+        <img key="document-key" alt="document_icon" className={clsx('mb-2 ml-1 w-20 h-20 thumbnail')} src="/pdf.png" />
+        <span className="flex self-center ">{relatedAsset?.name}</span>
+      </div>
+    ),
+    [relatedAsset],
+  )
+
   useEffect(() => {
     if (getAssetType(relatedAsset?.name as string) !== 'html') return
     const reader = new FileReader()
@@ -59,9 +70,14 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
           <div>
             {/* {subtitle && <span className="text-sm text-white/50">{subtitle}</span>} */}
             {relatedAsset && (
-              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+              <div
+                className={`flex flex-row items-center mt-2 mr-4 ${
+                  getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
+                }`}
+              >
                 {getAssetType(relatedAsset.name) === 'audio' && audioPreview}
                 {getAssetType(relatedAsset.name) === 'video' && videoPreview}
+                {getAssetType(relatedAsset.name) === 'document' && documentPreview}
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}
diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx
index 1720e83..0bab296 100644
--- a/components/collections/creation/UploadDetails.tsx
+++ b/components/collections/creation/UploadDetails.tsx
@@ -117,7 +117,7 @@ export const UploadDetails = ({
     setThumbnailFilesArray([])
     setThumbnailCompatibleAssetFileNames([])
     if (event.target.files === null) return
-    const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
+    const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
     const thumbnailCompatibleFileNamesList: string[] = []
     if (minterType === 'vending') {
       //sort the files
@@ -655,7 +655,7 @@ export const UploadDetails = ({
                       )}
                     >
                       <input
-                        accept="image/*, audio/*, video/*, .html"
+                        accept="image/*, audio/*, video/*, .html, .pdf"
                         className={clsx(
                           'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                           'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
diff --git a/components/openEdition/ImageUploadDetails.tsx b/components/openEdition/ImageUploadDetails.tsx
index aa9509a..f0c59c2 100644
--- a/components/openEdition/ImageUploadDetails.tsx
+++ b/components/openEdition/ImageUploadDetails.tsx
@@ -371,7 +371,7 @@ export const ImageUploadDetails = ({ onChange, importedImageUploadDetails }: Ima
                         )}
                       >
                         <input
-                          accept="image/*, audio/*, video/*, .html"
+                          accept="image/*, audio/*, video/*, .html, .pdf"
                           className={clsx(
                             'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                             'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
diff --git a/components/openEdition/OffChainMetadataUploadDetails.tsx b/components/openEdition/OffChainMetadataUploadDetails.tsx
index 5d2782d..76d918e 100644
--- a/components/openEdition/OffChainMetadataUploadDetails.tsx
+++ b/components/openEdition/OffChainMetadataUploadDetails.tsx
@@ -65,7 +65,7 @@ export const OffChainMetadataUploadDetails = ({
   const [exportedMetadata, setExportedMetadata] = useState(undefined)
   const [openEditionMinterMetadataFile, setOpenEditionMinterMetadataFile] = useState<File | undefined>()
 
-  const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
+  const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
 
   const assetFilesRef = useRef<HTMLInputElement | null>(null)
   const metadataFilesRef = useRef<HTMLInputElement | null>(null)
@@ -454,7 +454,7 @@ export const OffChainMetadataUploadDetails = ({
                       )}
                     >
                       <input
-                        accept="image/*, audio/*, video/*, .html"
+                        accept="image/*, audio/*, video/*, .html, .pdf"
                         className={clsx(
                           'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                           'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx
index 709907f..15892d9 100644
--- a/pages/collections/create.tsx
+++ b/pages/collections/create.tsx
@@ -777,7 +777,8 @@ const CollectionCreationPage: NextPage = () => {
                 if (
                   getAssetType(uploadDetails.assetFiles[i].name) === 'audio' ||
                   getAssetType(uploadDetails.assetFiles[i].name) === 'video' ||
-                  getAssetType(uploadDetails.assetFiles[i].name) === 'html'
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'html' ||
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'document'
                 ) {
                   data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
                 }
@@ -845,7 +846,8 @@ const CollectionCreationPage: NextPage = () => {
               if (
                 getAssetType(uploadDetails.assetFiles[0].name) === 'audio' ||
                 getAssetType(uploadDetails.assetFiles[0].name) === 'video' ||
-                getAssetType(uploadDetails.assetFiles[0].name) === 'html'
+                getAssetType(uploadDetails.assetFiles[0].name) === 'html' ||
+                getAssetType(uploadDetails.assetFiles[0].name) === 'document'
               ) {
                 data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
               }
diff --git a/public/pdf.png b/public/pdf.png
new file mode 100644
index 0000000..e47094f
Binary files /dev/null and b/public/pdf.png differ
diff --git a/utils/getAssetType.ts b/utils/getAssetType.ts
index ac2a992..22c9f73 100644
--- a/utils/getAssetType.ts
+++ b/utils/getAssetType.ts
@@ -1,6 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-export type AssetType = 'image' | 'audio' | 'video' | 'html' | 'unknown'
+export type AssetType = 'image' | 'audio' | 'video' | 'html' | 'document' | 'unknown'
 
 export const getAssetType = (assetFileName: string): AssetType => {
   const assetType = assetFileName?.toLowerCase().split('.').pop() || 'unknown'
@@ -9,5 +9,6 @@ export const getAssetType = (assetFileName: string): AssetType => {
   if (assetType === 'mp3' || assetType === 'wav') return 'audio'
   if (assetType === 'mp4') return 'video'
   if (assetType === 'html') return 'html'
+  if (assetType === 'pdf') return 'document'
   return 'unknown'
 }