diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 48fe44b..6015a49 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -1,9 +1,15 @@
 import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import toast, { Toaster } from 'react-hot-toast'
 
-import DownloadBtn from '../DownloadBtn'
+import { getBaseUrl } from '../../utils/tools'
 
 export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const { asPath } = useRouter()
+
   return (
     <>
       <div className="bg-white rounded shadow p-3">
@@ -18,8 +24,57 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           />
         </div>
       </div>
-      <div className="mt-4">
-        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+
+      <div className="flex flex-wrap space-x-2 justify-center mt-4">
+        <Toaster />
+        <a
+          className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
+          href={file['@microsoft.graph.downloadUrl']}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FontAwesomeIcon icon="file-download" />
+          <span>Download</span>
+        </a>
+
+        <button
+          className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
+          onClick={() => {
+            navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+            toast.success('Copied direct link to clipboard.')
+          }}
+        >
+          <FontAwesomeIcon icon="copy" />
+          <span>Copy direct link</span>
+        </button>
+
+        <a
+          className="flex space-x-2 items-center justify-center bg-gray-700 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 mb-2"
+          href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src="/players/iina.png" alt="iina" width="28" height="28" />
+          <span>IINA</span>
+        </a>
+        <a
+          className="flex space-x-2 items-center justify-center bg-yellow-600 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 mb-2"
+          href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src="/players/vlc.png" alt="vlc" width="28" height="28" />
+          <span>VLC</span>
+        </a>
+        <a
+          className="flex space-x-2 items-center justify-center bg-yellow-400 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 mb-2"
+          href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src="/players/potplayer.png" alt="potplayer" width="28" height="28" />
+          <span>PotPlayer</span>
+        </a>
       </div>
     </>
   )
diff --git a/package-lock.json b/package-lock.json
index b985cc0..e98af59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
-        "@fortawesome/free-brands-svg-icons": "^5.15.3",
+        "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
diff --git a/package.json b/package.json
index eb0c7e4..dd852c1 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
diff --git a/public/players/iina.png b/public/players/iina.png
new file mode 100644
index 0000000..5d4f367
Binary files /dev/null and b/public/players/iina.png differ
diff --git a/public/players/potplayer.png b/public/players/potplayer.png
new file mode 100644
index 0000000..6581549
Binary files /dev/null and b/public/players/potplayer.png differ
diff --git a/public/players/vlc.png b/public/players/vlc.png
new file mode 100644
index 0000000..45d027d
Binary files /dev/null and b/public/players/vlc.png differ
diff --git a/utils/getPreviewType.ts b/utils/getPreviewType.ts
index 4f245fc..74d3e3c 100644
--- a/utils/getPreviewType.ts
+++ b/utils/getPreviewType.ts
@@ -51,6 +51,7 @@ const extensions = {
   webm: preview.video,
   m3u8: preview.video,
   mkv: preview.video,
+  avi: preview.video,  // won't work!
 
   mp3: preview.audio,
   m4a: preview.audio,