diff --git a/src/main/controllers/web.zig b/src/main/controllers/web.zig
index 993b773..d176239 100644
--- a/src/main/controllers/web.zig
+++ b/src/main/controllers/web.zig
@@ -233,6 +233,7 @@ const user_details = struct {
 
 const drive = struct {
     const dir_tmpl = @embedFile("./web/drive/directory.tmpl.html");
+    const file_tmpl = @embedFile("./web/drive/file.tmpl.html");
     fn servePage(req: anytype, res: anytype, srv: anytype) !void {
         const info = try srv.driveGet(req.args.path);
         defer util.deepFree(srv.allocator, info);
@@ -246,6 +247,14 @@ const drive = struct {
             try breadcrumbs.append(if (p.len != 0) p else continue);
         }
 
+        // TODO: put this into the db layer
+        const FileClass = enum {
+            image,
+            video,
+            audio,
+            other,
+        };
+
         switch (info) {
             .dir => |dir| try res.template(.ok, srv, dir_tmpl, .{
                 .dir = dir,
@@ -253,7 +262,16 @@ const drive = struct {
                 .mount_path = req.mount_path,
                 .base_drive_path = "drive",
             }),
-            else => unreachable,
+            .file => |file| try res.template(.ok, srv, file_tmpl, .{
+                .file = file,
+                .breadcrumbs = breadcrumbs.items,
+                .mount_path = req.mount_path,
+                .base_drive_path = "drive",
+                .class = if (std.mem.eql(u8, file.meta.content_type orelse "", "image/jpeg"))
+                    FileClass.image
+                else
+                    FileClass.other,
+            }),
         }
     }
 
diff --git a/src/main/controllers/web/drive/file.tmpl.html b/src/main/controllers/web/drive/file.tmpl.html
new file mode 100644
index 0000000..f3dd64d
--- /dev/null
+++ b/src/main/controllers/web/drive/file.tmpl.html
@@ -0,0 +1,67 @@
+<div class="drive">
+  <ol class="breadcrumbs">
+    <li>
+      <a href="{.mount_path}/{.base_drive_path}/">
+        <i class="fa-solid fa-cloud"></i>
+        <span class="directory">/</span>
+      </a>
+    </li>
+    {#for .breadcrumbs |$crumb, $i| =}
+      <i class="fa-solid fa-chevron-right"></i>
+      <li>
+        <a href="{.mount_path}/{.base_drive_path}
+          {= #for @slice(.breadcrumbs, 0, $i) |$c|}/{$c}{/for =}
+        /{$crumb}">
+          {$crumb}
+        </a>
+      </li>
+    {/for =}
+  </ol>
+
+  <div class="popup-buttons">
+    <div class="popup" id="delete-{.file.name.?}">
+      <a href="#delete-{.file.name.?}">
+        <i class="fa-solid fa-trash"></i>
+      </a>
+      <form class="popup-dialog" action="?action=delete" method="post">
+        <div>Are you sure you want to delete this file?</div>
+        <input type="hidden" name="action" value="delete" />
+        <button type="submit">Yes, Delete</button>
+        <a href="#">No, Cancel</a>
+      </form>
+    </div>
+  </div>
+
+  <div class="details">
+    <h2>{.file.name.?}</h2>
+    <div class="content">
+      {#if @isTag(.class, image) =}
+        <img src="/media/{.file.meta.id}" />
+      {#elif @isTag(.class, video) =}
+        <video src="/media/{.file.meta.id}" />
+      {#elif @isTag(.class, audio) =}
+        <audio src="/media/{.file.meta.id}" />
+      {#else =}
+        <a download href="/media/{.file.meta.id}"><i class="fa-solid fa-download"></i>{.file.name.?}</a>
+      {/if}
+    </div>
+    <div class="meta">
+      <h3>Metadata</h3>
+
+      <h4>Drive Path</h4>
+      <div>{.file.path}</div>
+
+      <h4>Filename</h4>
+      <div>{.file.meta.filename}</div>
+
+      <h4>Content Type</h4>
+      <div>{.file.meta.content_type}</div>
+
+      <h4>Sensitive?</h4>
+      <div>{.file.meta.sensitive}</div>
+
+      <h4>Description</h4>
+      <div>{.file.meta.description}</div>
+    </div>
+  </div>
+</div>