diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 67b9b9b..b5d9ac8 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
+import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
 
 import useSWR from 'swr'
 import { useRouter } from 'next/router'
@@ -10,7 +11,8 @@ import dynamic from 'next/dynamic'
 
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
-import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
+import { VideoPreview } from './previews/VideoPreview'
+import { AudioPreview } from './previews/AudioPreview'
 
 // View images as gallery
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -30,6 +32,12 @@ const humanFileSize = (size: number) => {
   return `${formatted} ${'KMGTPEZY'[i - 1]}B`
 }
 
+/**
+ * Convert url query into path string
+ *
+ * @param query Url query property
+ * @returns Path string
+ */
 const queryToPath = (query?: ParsedUrlQuery) => {
   if (query) {
     const { path } = query
@@ -183,6 +191,23 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
             </div>
           )
 
+        case preview.text:
+          return <div>text</div>
+
+        case preview.code:
+          return <div>code</div>
+
+        case preview.markdown:
+          return <div>markdown</div>
+
+        case preview.video:
+          return <VideoPreview file={resp} />
+        case preview.audio:
+          return <AudioPreview file={resp} />
+
+        case preview.pdf:
+          return <div>pdf</div>
+
         default:
           return <div className="bg-white shadow rounded">{fileName}</div>
       }
diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
new file mode 100644
index 0000000..e07deab
--- /dev/null
+++ b/components/previews/AudioPreview.tsx
@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react'
+import ReactPlayer from 'react-player'
+
+export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  return (
+    <div className="bg-white rounded shadow p-3 w-full">
+      <div className="text-center mb-6">{file.name}</div>
+      <ReactPlayer
+        url={file['@microsoft.graph.downloadUrl']}
+        controls
+        width="100%"
+        height="48px"
+        config={{ file: { forceAudio: true } }}
+      />
+    </div>
+  )
+}
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
new file mode 100644
index 0000000..7c10f23
--- /dev/null
+++ b/components/previews/VideoPreview.tsx
@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react'
+import ReactPlayer from 'react-player'
+
+export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  return (
+    <div className="bg-white rounded shadow p-3">
+      <div className="relative" style={{ paddingTop: '56.25%' }}>
+        <ReactPlayer
+          className="absolute top-0 left-0 w-full h-full"
+          url={file['@microsoft.graph.downloadUrl']}
+          controls
+          width="100%"
+          height="100%"
+          config={{ file: { forceVideo: true } }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index 7b62d29..418fef2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "next": "11.0.0",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-player": "^2.9.0",
         "react-viewer": "^3.2.2",
         "swr": "^0.5.6"
       },
@@ -1448,6 +1449,14 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -3360,6 +3369,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "node_modules/loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@@ -3471,6 +3485,11 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4635,11 +4654,31 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -7061,6 +7100,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -8480,6 +8524,11 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@@ -8573,6 +8622,11 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9471,11 +9525,28 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/package.json b/package.json
index f7c9394..14facbb 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "next": "11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-player": "^2.9.0",
     "react-viewer": "^3.2.2",
     "swr": "^0.5.6"
   },
diff --git a/utils/getFileIcon.ts b/utils/getFileIcon.ts
index e181366..1f9ac66 100644
--- a/utils/getFileIcon.ts
+++ b/utils/getFileIcon.ts
@@ -37,14 +37,22 @@ const extensions = {
   aac: icons.audio,
   mp3: icons.audio,
   ogg: icons.audio,
+  flac: icons.audio,
+  oga: icons.audio,
+  opus: icons.audio,
 
   avi: icons.video,
   flv: icons.video,
   mkv: icons.video,
   mp4: icons.video,
 
+  '7z': icons.archive,
+  bz2: icons.archive,
+  xz: icons.archive,
+  wim: icons.archive,
   gz: icons.archive,
   rar: icons.archive,
+  tar: icons.archive,
   zip: icons.archive,
 
   css: icons.code,