diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 1ef4b8e..86acf5b 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -16,6 +16,9 @@
       <div class="navbar-item">
         <a href="/leaderboard">Leaderboard</a>
       </div>
+      <div class="navbar-item">
+        <a href="/docs">How to play</a>
+      </div>
     </div>
     <div class="navbar-right">
       <UserControls />
diff --git a/web/pw-server/src/routes/docs.svelte b/web/pw-server/src/routes/docs.svelte
new file mode 100644
index 0000000..c7357c0
--- /dev/null
+++ b/web/pw-server/src/routes/docs.svelte
@@ -0,0 +1,14 @@
+<script>
+  import RulesView from "$lib/components/RulesView.svelte";
+</script>
+
+<div class="container">
+  <RulesView />
+</div>
+
+<style scoped lang="scss">
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/web/pw-server/src/routes/editor.svelte b/web/pw-server/src/routes/editor.svelte
index e85f572..33217d5 100644
--- a/web/pw-server/src/routes/editor.svelte
+++ b/web/pw-server/src/routes/editor.svelte
@@ -18,7 +18,6 @@
   enum ViewMode {
     Editor,
     MatchVisualizer,
-    Rules,
   }
 
   let matches = [];
@@ -30,9 +29,6 @@
   let editSession: Ace.EditSession;
 
   onMount(() => {
-    if (!hasBotCode()) {
-      viewMode = ViewMode.Rules;
-    }
     init_editor();
   });
 
@@ -118,12 +114,6 @@
     viewMode = viewMode_;
   }
 
-  function selectRules() {
-    selectedMatchId = undefined;
-    selectedMatchLog = undefined;
-    viewMode = ViewMode.Rules;
-  }
-
   function formatMatchTimestamp(timestampString: string): string {
     let timestamp = DateTime.fromISO(timestampString, { zone: "utc" }).toLocal();
     if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) {
@@ -143,14 +133,7 @@
       class:selected={viewMode === ViewMode.Editor}
       on:click={() => setViewMode(ViewMode.Editor)}
     >
-      Editor
-    </div>
-    <div
-      class="rules-button sidebar-item"
-      class:selected={viewMode === ViewMode.Rules}
-      on:click={() => setViewMode(ViewMode.Rules)}
-    >
-      Rules
+      Code
     </div>
     <div class="sidebar-header">match history</div>
     <ul class="match-list">
@@ -174,8 +157,6 @@
       <Visualizer matchData={selectedMatch} matchLog={selectedMatchLog} />
     {:else if viewMode === ViewMode.Editor}
       <EditorView {editSession} />
-    {:else if viewMode === ViewMode.Rules}
-      <RulesView />
     {/if}
   </div>
   <div class="sidebar-right">