diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 0e811b3..a2a2e61 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+
   let code = "";
 
   async function submitCode() {
@@ -9,7 +11,7 @@
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        "code": code,
+        code: code,
       }),
     });
 
@@ -17,11 +19,12 @@
       throw Error(response.statusText);
     }
 
-    let responseData = await response.json()
-    console.log(responseData);
+    let responseData = await response.json();
+    let matchId = responseData["match_id"];
+    goto(`/submission_matches/${matchId}`);
   }
 </script>
 
 <h1>Planetwars</h1>
 <textarea bind:value={code} />
-<button on:click={submitCode}>Submit</button>
\ No newline at end of file
+<button on:click={submitCode}>Submit</button>
diff --git a/web/pw-server/src/routes/submission_matches/[match_id].svelte b/web/pw-server/src/routes/submission_matches/[match_id].svelte
new file mode 100644
index 0000000..586b2c2
--- /dev/null
+++ b/web/pw-server/src/routes/submission_matches/[match_id].svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+  export async function load({ page }) {
+    const res = await fetch(`/api/submission_match_log/${page.params["match_id"]}`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (res.ok) {
+      return {
+        props: {
+          matchLog: await res.text(),
+        },
+      };
+    }
+
+    return {
+      status: res.status,
+      error: new Error("failed to load match"),
+    };
+  }
+</script>
+
+<script lang="ts">
+  import Visualizer from "$lib/components/Visualizer.svelte";
+  export let matchLog: string;
+</script>
+
+<div>
+  <Visualizer {matchLog} />
+</div>