diff --git a/index.js b/index.js
index 9ef1b2d..1b0d56c 100644
--- a/index.js
+++ b/index.js
@@ -79,9 +79,10 @@ app.get("/api/search", async (req, res) => {
         return res.status(400).json({ ok: false, error: "bad request" });
     }
     const [start, end] = [20 * page, 20 * (page + 1)];
-    const returnedVideos = videos
-        .map(video => ({dist: levenshtein(search, video.title), ...video}))
-        .toSorted((a, b) => a.dist - b.dist)
+    const withDistance = videos
+        .map(video => ({dist: levenshtein(search, video.title), ...video}));
+    withDistance.sort((a, b) => a.dist - b.dist);
+    const returnedVideos = withDistance
         .slice(start, end)
         .map(video => {
             const user = users.find(user => user.id === video.userId);
@@ -151,9 +152,7 @@ app.post("/api/upload_video", authorized(), fileUpload({ limits: { fileSize: 2 *
         })
     })
     if (exitCode !== 0) {
-        console.log(":/");
-        // throw new Error("handbrake failed");
-        return res.status(500).json({ ok: false, error: "server error" });
+        throw new Error("handbrake failed");
     }
 
     const video = {
diff --git a/public/search/script.js b/public/search/script.js
index 165e7b6..3051e50 100644
--- a/public/search/script.js
+++ b/public/search/script.js
@@ -22,7 +22,7 @@ function displayResponse(response) {
         + "<ul id='video-list'>"
         + videos
             .map(v => {
-                return `<li><p><a href="${v.path}">${v.title}</a> - ${v.author}</p></li>`
+                return `<li><p><a href="/watch?id=${v.id}">${v.title}</a> - ${v.author}</p></li>`
             })
             .join("") 
         + "</ul>";
diff --git a/public/style.css b/public/style.css
index a4d0111..c4e6f7b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -53,3 +53,7 @@ ul#video-list {
     padding: 0;
     list-style: none;
 }
+
+#video-player {
+    max-height: 80vh;
+}
diff --git a/public/watch/index.html b/public/watch/index.html
new file mode 100644
index 0000000..5ef78bb
--- /dev/null
+++ b/public/watch/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>MaoTube</title>
+        <link rel="stylesheet" href="/style.css">
+    </head>
+    <body>
+        <h1>MaoTube</h1>
+        <form method="GET" target="_self" action="/search">
+            <label for="query"><p>Search</p></label>
+            <input type="text" id="query" name="query" placeholder="...">
+            <input type="submit" value="Search">
+        </form>
+        <br>
+        <div id="result">
+            <noscript>
+                <div class="mao-error">
+                    <p>javascript not enabled</p>
+                    <p>bottom text</p>
+                </div>
+            </noscript>
+            <div id="mao-error" class="mao-error hidden">
+                <p id="mao-error-message"></p>
+                <p>bottom text</p>
+            </div>
+        </div>
+        <script src="script.js"></script>
+        <script src="/header.js"></script>
+    </body>
+</html>
+
diff --git a/public/watch/script.js b/public/watch/script.js
new file mode 100644
index 0000000..b9add8a
--- /dev/null
+++ b/public/watch/script.js
@@ -0,0 +1,31 @@
+
+function error(message) {
+    const errorContainer = document.getElementById("mao-error");
+    const errorElement = document.getElementById("mao-error-message");
+
+    errorElement.innerText = message;
+    errorContainer.classList.remove("hidden");
+}
+
+function main() {
+    const params = new URLSearchParams(window.location.search);
+    const id = params.get("id");
+    if (!id) {
+        error("invalid id parameter");
+        return;
+    }
+
+    const result = document.getElementById("result");
+
+    const video = document.createElement("video");
+    video.controls = true;
+    video.id = "video-player";
+    video.src = `/videos/${id}.mp4`;
+    result.appendChild(video);
+    video.onerror = () => {
+        video.remove();
+        error("invalid id parameter");
+    }
+}
+
+main();
