diff --git a/web/pw-server/package.json b/web/pw-server/package.json
index eafc63f..53a4492 100644
--- a/web/pw-server/package.json
+++ b/web/pw-server/package.json
@@ -31,10 +31,11 @@
     "vite-plugin-wasm-pack": "^0.1.9"
   },
   "dependencies": {
+    "ace-builds": "^1.4.14",
     "dayjs": "^1.10.7",
-    "svelte-select": "^4.4.7",
+    "planetwars-rs": "file:../planetwars-rs/pkg",
     "pw-visualizer": "file:../pw-visualizer",
-    "planetwars-rs": "file:../planetwars-rs/pkg"
+    "svelte-select": "^4.4.7"
   },
   "type": "module"
 }
diff --git a/web/pw-server/src/app.html b/web/pw-server/src/app.html
index 3193582..7460227 100644
--- a/web/pw-server/src/app.html
+++ b/web/pw-server/src/app.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <!-- polyfill global -->
+    <script>
+      const global = globalThis;
+    </script>
+    <!-- end polyfill -->
 
-<head>
-  <!-- polyfill global -->
-  <script>
-    const global = globalThis;
-  </script>
-  <!-- end polyfill -->
+    <meta charset="utf-8" />
+    <meta name="description" content="" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %svelte.head%
+  </head>
 
-  <meta charset="utf-8" />
-  <meta name="description" content="" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  %svelte.head%
-</head>
-
-<body>
-  <div id="svelte">%svelte.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="svelte">%svelte.body%</div>
+  </body>
+</html>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index a2a2e61..0db994c 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
 
-  let code = "";
+  let editor;
+
+  onMount(async () => {
+    const ace = await import("ace-builds");
+    editor = ace.edit("editor");
+  });
 
   async function submitCode() {
-    console.log("click");
+    if (editor === undefined) {
+      return;
+    }
+
     let response = await fetch("/api/submit_bot", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        code: code,
+        code: editor.getValue(),
       }),
     });
 
@@ -26,5 +35,13 @@
 </script>
 
 <h1>Planetwars</h1>
-<textarea bind:value={code} />
+<div id="editor" />
 <button on:click={submitCode}>Submit</button>
+
+<style scoped>
+  #editor {
+    width: 100%;
+    max-width: 800px;
+    height: 600px;
+  }
+</style>
