diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 3fe98f8..2c0a3fa 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -1,21 +1,31 @@
 <script lang="ts" context="module">
-  export async function load({ page }) {
-    const res = await fetch(`/api/matches/${page.params["match_id"]}`, {
+  function fetchJson(url: string): Promise<Response> {
+    return fetch(url, {
       headers: {
         "Content-Type": "application/json",
       },
     });
+  }
 
-    if (res.ok) {
+  export async function load({ params }) {
+    // TODO: handle failure cases better
+    const matchId = params["match_id"];
+    const matchDataResponse = await fetchJson(`/api/matches/${matchId}`);
+    if (!matchDataResponse.ok) {
+    }
+    const matchLogResponse = await fetchJson(`/api/matches/${matchId}/log`);
+
+    if (matchDataResponse.ok && matchLogResponse.ok) {
       return {
         props: {
-          matchLog: await res.text(),
+          matchData: await matchDataResponse.json(),
+          matchLog: await matchLogResponse.text(),
         },
       };
     }
 
     return {
-      status: res.status,
+      status: matchDataResponse.status,
       error: new Error("failed to load match"),
     };
   }
@@ -24,8 +34,19 @@
 <script lang="ts">
   import Visualizer from "$lib/components/Visualizer.svelte";
   export let matchLog: string;
+  export let matchData: object;
 </script>
 
-<div>
-  <Visualizer {matchLog} />
+<div class="container">
+  <Visualizer {matchLog} {matchData} />
 </div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    // these are needed for making the visualizer fill the screen.
+    min-height: 0;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+</style>