diff --git a/frontend/src/pages/InboxPage.tsx b/frontend/src/pages/InboxPage.tsx
index e42d960..3faeed2 100644
--- a/frontend/src/pages/InboxPage.tsx
+++ b/frontend/src/pages/InboxPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import { useNavigate } from "react-router"
 import { useFrappeGetDocList } from "frappe-react-sdk"
 import { HugeiconsIcon } from "@hugeicons/react"
@@ -18,6 +18,7 @@ import { UploadDialog } from "@/components/UploadDialog"
 import { MoveAssetDialog } from "@/components/MoveAssetDialog"
 import { DeleteAssetDialog } from "@/components/DeleteAssetDialog"
 import { RenameAssetDialog } from "@/components/RenameAssetDialog"
+import { MediaPlayerDialog } from "@/components/MediaPlayerDialog"
 import { useDownload } from "@/hooks/useDownload"
 import { UserAvatar } from "@/components/UserAvatar"
 import type { VMSAsset } from "@/types"
@@ -35,6 +36,7 @@ export function InboxPage() {
   const [moveOpen, setMoveOpen] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
   const [renameOpen, setRenameOpen] = useState(false)
+  const [previewAsset, setPreviewAsset] = useState<VMSAsset | null>(null)
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const [view, setView] = useState<"list" | "grid">("grid")
   const { downloadOne, downloadMany, isDownloading } = useDownload()
@@ -90,6 +92,18 @@ export function InboxPage() {
     mutate()
   }
 
+  const handleAssetClick = useCallback(
+    (asset: VMSAsset) => {
+      if (asset.status !== "Ready") return
+      if (asset.file_type?.startsWith("video/")) {
+        navigate(`/review/${asset.name}`)
+      } else {
+        setPreviewAsset(asset)
+      }
+    },
+    [navigate],
+  )
+
   const handleBulkDownload = () => {
     if (!assets) return
     const toDownload = assets.filter((a) => selected.has(a.name))
@@ -217,10 +231,7 @@ export function InboxPage() {
                   key={asset.name}
                   size="sm"
                   className="cursor-pointer transition-shadow hover:shadow-md"
-                  onClick={() => {
-                    if (asset.status === "Ready")
-                      navigate(`/review/${asset.name}`)
-                  }}
+                  onClick={() => handleAssetClick(asset)}
                 >
                   <CardHeader>
                     <div className="flex items-center gap-3">
@@ -297,10 +308,7 @@ export function InboxPage() {
                 <Card
                   key={asset.name}
                   className="flex cursor-pointer flex-col overflow-hidden pt-0 transition-shadow hover:shadow-md"
-                  onClick={() => {
-                    if (asset.status === "Ready")
-                      navigate(`/review/${asset.name}`)
-                  }}
+                  onClick={() => handleAssetClick(asset)}
                 >
                   <div className="aspect-video w-full bg-muted">
                     {asset.thumbnail_url ? (
@@ -407,6 +415,13 @@ export function InboxPage() {
         ) : null
       })()}
 
+      <MediaPlayerDialog
+        open={!!previewAsset}
+        onOpenChange={(open) => { if (!open) setPreviewAsset(null) }}
+        assetName={previewAsset?.name ?? null}
+        fileName={previewAsset?.file_name}
+        fileType={previewAsset?.file_type}
+      />
     </div>
   )
 }
diff --git a/frontend/src/pages/ProjectDetailPage.tsx b/frontend/src/pages/ProjectDetailPage.tsx
index fbe396a..8a1556c 100644
--- a/frontend/src/pages/ProjectDetailPage.tsx
+++ b/frontend/src/pages/ProjectDetailPage.tsx
@@ -33,6 +33,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { UploadDialog } from "@/components/UploadDialog"
 import { DeleteAssetDialog } from "@/components/DeleteAssetDialog"
 import { RenameAssetDialog } from "@/components/RenameAssetDialog"
+import { MediaPlayerDialog } from "@/components/MediaPlayerDialog"
 import { useDownload } from "@/hooks/useDownload"
 import { UserAvatar } from "@/components/UserAvatar"
 import { toast } from "sonner"
@@ -51,6 +52,7 @@ export function ProjectDetailPage() {
   const [uploadOpen, setUploadOpen] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
   const [renameOpen, setRenameOpen] = useState(false)
+  const [previewAsset, setPreviewAsset] = useState<VMSAsset | null>(null)
   const [view, setView] = useState<"list" | "grid">("grid")
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const { downloadOne, downloadMany, isDownloading } = useDownload()
@@ -134,6 +136,19 @@ export function ProjectDetailPage() {
     downloadMany(toDownload)
   }
 
+  const handleAssetClick = useCallback(
+    (assetName: string) => {
+      const asset = (assets ?? []).find((a) => a.name === assetName)
+      if (!asset || asset.status !== "Ready") return
+      if (asset.file_type?.startsWith("video/")) {
+        navigate(`/review/${assetName}`)
+      } else {
+        setPreviewAsset(asset)
+      }
+    },
+    [assets, navigate],
+  )
+
   const handleDeleteComplete = () => {
     setSelected(new Set())
     mutateAssets()
@@ -259,7 +274,7 @@ export function ProjectDetailPage() {
             toggleSelect={toggleSelect}
             toggleSelectAll={() => toggleSelectAll(assetItems)}
             downloadOne={downloadOne}
-            onPlay={(name) => navigate(`/review/${name}`)}
+            onPlay={handleAssetClick}
             onTogglePublicReview={handleTogglePublicReview}
             emptyMessage="No source or cut assets yet. Upload some files to get started."
           />
@@ -274,7 +289,7 @@ export function ProjectDetailPage() {
             toggleSelect={toggleSelect}
             toggleSelectAll={() => toggleSelectAll(exportItems)}
             downloadOne={downloadOne}
-            onPlay={(name) => navigate(`/review/${name}`)}
+            onPlay={handleAssetClick}
             onTogglePublicReview={handleTogglePublicReview}
             emptyMessage="No review or final exports yet. Upload exports to share with your team."
           />
@@ -307,6 +322,14 @@ export function ProjectDetailPage() {
           />
         ) : null
       })()}
+
+      <MediaPlayerDialog
+        open={!!previewAsset}
+        onOpenChange={(open) => { if (!open) setPreviewAsset(null) }}
+        assetName={previewAsset?.name ?? null}
+        fileName={previewAsset?.file_name}
+        fileType={previewAsset?.file_type}
+      />
     </div>
   )
 }
diff --git a/vms/public/frontend/index.html b/vms/public/frontend/index.html
index 266040b..b5e194d 100644
--- a/vms/public/frontend/index.html
+++ b/vms/public/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/assets/vms/frontend/vms-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BWH VMS</title>
-    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-Du5eT9YR.js"></script>
+    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-DHtWBIWK.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-VQ8vvVbA.css">
   </head>
   <body>
diff --git a/vms/www/vms.html b/vms/www/vms.html
index 266040b..b5e194d 100644
--- a/vms/www/vms.html
+++ b/vms/www/vms.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/assets/vms/frontend/vms-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BWH VMS</title>
-    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-Du5eT9YR.js"></script>
+    <script type="module" crossorigin src="/assets/vms/frontend/assets/index-DHtWBIWK.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/vms/frontend/assets/index-VQ8vvVbA.css">
   </head>
   <body>