diff --git a/src/common/utilities.js b/src/common/utilities.js
index 55820ba..85df393 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -153,17 +153,24 @@ export function selectTypeFromPath (path) {
   return { type, path }
 }
 
-export function selectTypeFromPathWithPoster (path, poster) {
+export function typeForPath (path) {
   let type
+  path = path.trim()
   switch (true) {
-    case /\.(png|jpg)$/.test(path):
+    case /\.((png)|(jpg))$/.test(path):
       type = 'Image'; break
     case /\.(mp4)$/.test(path):
       type = 'Video'; break
     case /\.(md)$/.test(path):
       type = 'Text'; break
+    case /\.(pdf)$/.test(path):
+      type = 'Document'; break
     default:
       type = 'Unknown'; break
   }
-  return { type, path, poster }
+  return type
+}
+
+export function selectTypeFromPathWithPoster (path, poster) {
+  return { type: typeForPath(path), path, poster }
 }
diff --git a/src/components/Overlay/Content.js b/src/components/Overlay/Content.js
index 8c3d669..6dab3cf 100644
--- a/src/components/Overlay/Content.js
+++ b/src/components/Overlay/Content.js
@@ -10,7 +10,7 @@ export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
   const shiftW = el ? el.getBoundingClientRect().width : 0
 
   function renderMedia (media) {
-    const { path, type, poster } = media
+    let { path, type, poster } = media
     switch (type) {
       case 'Image':
         return (
@@ -53,6 +53,10 @@ export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
             />
           </div>
         )
+      case 'Document':
+        return (
+          <iframe className='source-document' src={path} />
+        )
       default:
         return (
           <NoSource failedUrls={[`Application does not support extension: ${path.split('.')[1]}`]} />
diff --git a/src/components/presentational/Card/Source.js b/src/components/presentational/Card/Source.js
index 6ebacde..c10d9ea 100644
--- a/src/components/presentational/Card/Source.js
+++ b/src/components/presentational/Card/Source.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Img from 'react-image'
-
 import Spinner from '../Spinner'
+import { typeForPath } from '../../../common/utilities'
 
 const CardSource = ({ source, isLoading, onClickHandler }) => {
   function renderIconText (type) {
@@ -21,6 +21,8 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
         return 'photo'
       case 'Photobook':
         return 'photo_album'
+      case 'Document':
+        return 'picture_as_pdf'
       default:
         return 'help'
     }
@@ -43,6 +45,9 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
     thumbnail = imgs.length > 0 ? imgs[0] : null
   }
 
+  if (source.type === '' && source.paths.length >= 1) {
+    source.type = typeForPath(source.paths[0])
+  }
   const fallbackIcon = (
     <i className='material-icons source-icon'>
       {renderIconText(source.type)}
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 4f939c9..8e53796 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -347,6 +347,11 @@ $overlay-bg: rgba(239,239,239,0.9);
   height: 400px;
 }
 
+.source-document {
+  width: 100%;
+  min-height: 80vh;
+}
+
 .video-react .video-react-progress-control {
   align-self: center;
 }