diff --git a/Makefile b/Makefile
index 5a6cd06..d40660e 100644
--- a/Makefile
+++ b/Makefile
@@ -1,21 +1,29 @@
 VERSION=$(shell git rev-parse --short HEAD)
 
-release/trees/web:
-	cargo build --bin trees --release --target wasm32-unknown-unknown
+web/trees: dist/trees dist/trees/trees_bg.wasm dist/trees/index.html dist/trees/assets
 
-web/trees: release/trees/web
+# Create dist directory for trees
+dist/trees:
 	mkdir -p dist/trees
 
+# Build the web version
+release/trees/web:
+	cargo build --bin trees --release --target wasm32-unknown-unknown
+
+# Use wasm-bindgen to do some magic
+dist/trees/trees_bg.wasm: release/trees/web
 	wasm-bindgen --no-typescript --target web \
       --out-dir ./dist/trees \
       --out-name "trees" \
       ${CARGO_TARGET_DIR}/wasm32-unknown-unknown/release/trees.wasm
 
+# Copy html
+dist/trees/index.html: web/trees.html
 	cp ./web/trees.html ./dist/trees/index.html
-	cp ./web/trees.css ./dist/trees/trees.css
 
+# Copy assets
+dist/trees/assets:
 	rm -rf dist/trees/assets
-
 	rsync -av \
 		--include='*/' \
 		--include='*.png' \
@@ -25,6 +33,7 @@ web/trees: release/trees/web
 		assets/ \
 		dist/trees/assets
 
+# Helpful shorthand to serve files
 web/trees/serve: web/trees
 	cd dist/trees && simple-http-server
 
diff --git a/build.rs b/build.rs
index 828dc6d..c9c82fb 100644
--- a/build.rs
+++ b/build.rs
@@ -1,9 +1,9 @@
 fn main() {
     {
-        use std::process::Command;
         use chrono::prelude::*;
         use std::fs::File;
         use std::io::Write;
+        use std::process::Command;
 
         // Date of build
         let now = Utc::now().format("%Y%m%d%H%M%S");
@@ -16,8 +16,9 @@ fn main() {
                 .arg("HEAD")
                 .output()
                 .expect("Failed to get git sha")
-                .stdout
-        ).expect("Read stdout from git sha command");
+                .stdout,
+        )
+        .expect("Read stdout from git sha command");
 
         // If the workspace is dirty or clean
         let clean = Command::new("git")
@@ -32,7 +33,8 @@ fn main() {
         if clean {
             write!(file, "0.0.0-{now}+{}", git_sha.trim()).expect("Write version to VERSION file");
         } else {
-            write!(file, "0.0.0-{now}+{}-dirty", git_sha.trim()).expect("Write version to VERSION file");
+            write!(file, "0.0.0-{now}+{}-dirty", git_sha.trim())
+                .expect("Write version to VERSION file");
         }
     }
 }
diff --git a/src/base_game.rs b/src/base_game.rs
index 0e67dfb..685c878 100644
--- a/src/base_game.rs
+++ b/src/base_game.rs
@@ -8,6 +8,7 @@ impl Plugin for BaseGamePlugin {
         app.add_plugins(DefaultPlugins.set(WindowPlugin {
             primary_window: Some(Window {
                 fit_canvas_to_parent: true,
+                canvas: Some("game".into()),
                 ..default()
             }),
             ..default()
diff --git a/src/bin/trees/main.rs b/src/bin/trees/main.rs
index 5aaffde..0a4d9cd 100644
--- a/src/bin/trees/main.rs
+++ b/src/bin/trees/main.rs
@@ -61,77 +61,15 @@ fn main() {
 #[derive(Component)]
 struct Tree;
 
-#[derive(Component, PartialEq)]
+#[derive(Component, PartialEq, Clone)]
 struct TreeMonologue(Handle<Monologue>);
 
 /// Initialize the trees, currently placeholders
 /// Trees are 2d cards in a 3d world for flexibility
 /// Might move fully 2d if the art style allows it
-fn init_trees(
-    mut commands: Commands,
-    mut meshes: ResMut<Assets<Mesh>>,
-    mut materials: ResMut<Assets<StandardMaterial>>,
-    mut ambient_light: ResMut<AmbientLight>,
-    server: Res<AssetServer>,
-) {
+fn init_trees(mut ambient_light: ResMut<AmbientLight>) {
     // Global light
-    {
-        ambient_light.brightness = 500.0;
-    }
-
-    // Spawn placeholder tree (red)
-    {
-        commands
-            .spawn((
-                Tree,
-                TreeMonologue(server.load("trees/red.mono")),
-                Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(1.0)))),
-                MeshMaterial3d(materials.add(StandardMaterial {
-                    base_color_texture: Some(server.load("placeholder/tree.png")),
-                    base_color: WHITE.into(),
-                    alpha_mode: AlphaMode::Blend,
-                    ..default()
-                })),
-                Transform::from_xyz(-15.0, 0.0, 15.0).with_scale(Vec3::splat(10.0)),
-            ))
-            .observe(delete_tree);
-    }
-
-    // Spawn placeholder tree (green)
-    {
-        commands
-            .spawn((
-                Tree,
-                TreeMonologue(server.load("trees/green.mono")),
-                Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(1.0)))),
-                MeshMaterial3d(materials.add(StandardMaterial {
-                    base_color_texture: Some(server.load("placeholder/tree.png")),
-                    base_color: WHITE.into(),
-                    alpha_mode: AlphaMode::Blend,
-                    ..default()
-                })),
-                Transform::from_xyz(15.0, 0.0, 15.0).with_scale(Vec3::splat(10.0)),
-            ))
-            .observe(delete_tree);
-    }
-
-    // Spawn placeholder tree (blue)
-    {
-        commands
-            .spawn((
-                Tree,
-                TreeMonologue(server.load("trees/blue.mono")),
-                Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(1.0)))),
-                MeshMaterial3d(materials.add(StandardMaterial {
-                    base_color_texture: Some(server.load("placeholder/tree.png")),
-                    base_color: WHITE.into(),
-                    alpha_mode: AlphaMode::Blend,
-                    ..default()
-                })),
-                Transform::from_xyz(0.0, 0.0, -15.0).with_scale(Vec3::splat(10.0)),
-            ))
-            .observe(delete_tree);
-    }
+    ambient_light.brightness = 500.0;
 }
 
 /// Dialog box marker component
@@ -184,7 +122,6 @@ fn init_debug_ui(mut commands: Commands) {
                 justify_self: JustifySelf::Start,
                 ..default()
             },
-            BackgroundColor(GREEN.into()),
             MonologuesContainer,
             GlobalZIndex(i32::MAX - 1),
             DebuggingState::On,
@@ -197,7 +134,7 @@ fn init_debug_ui(mut commands: Commands) {
                     padding: UiRect::all(Val::Px(10.0)),
                     ..default()
                 },
-                BackgroundColor(PINK.into()),
+                BackgroundColor(PINK.with_alpha(0.5).into()),
                 MonologuesList,
             ));
             parent.spawn((
@@ -207,7 +144,7 @@ fn init_debug_ui(mut commands: Commands) {
                     padding: UiRect::all(Val::Px(10.0)),
                     ..default()
                 },
-                BackgroundColor(ORANGE.into()),
+                BackgroundColor(ORANGE.with_alpha(0.5).into()),
                 MonologuePreview,
             ));
         });
@@ -305,7 +242,7 @@ enum DialogState {
 fn start_dialog(
     mut click_events: EventReader<Pointer<Click>>,
     mut dialog_events: EventWriter<DialogEvent>,
-    query: Query<&TreeMonologue>,
+    query: Query<&TreeMonologue, With<Tree>>,
 ) {
     click_events.read().for_each(|event| {
         debug!("Click event detected");
@@ -348,7 +285,7 @@ fn dialog_engine(
     // Monologue assets for obvious reasons
     monologues: Res<Assets<Monologue>>,
     // Monologue trees so we can remove that component at end of monologue
-    monologue_trees: Query<(Entity, &TreeMonologue)>,
+    monologue_trees: Query<(Entity, &TreeMonologue), With<Tree>>,
     // Dialog lines to despawn them at the end/start of a dialog
     lines: Query<Entity, With<DialogLine>>,
 ) {
@@ -508,7 +445,7 @@ fn monologue_asset_tooltip(
     mut over_events: EventReader<Pointer<Over>>,
     mut out_events: EventReader<Pointer<Out>>,
     mut tooltip: ResMut<ToolTip>,
-    scripts: Query<&TreeMonologue>,
+    scripts: Query<&TreeMonologue, With<Button>>,
 ) {
     out_events
         .read()
@@ -684,8 +621,54 @@ fn preview_monologue(
     }
 }
 
-fn spawn_monologue_tree(trigger: Trigger<Pointer<Click>>, mut commands: Commands) {
-    // todo!("Spawn monologue tree when button is clicked")
+fn spawn_monologue_tree(
+    trigger: Trigger<Pointer<Click>>,
+    tree_monologues: Query<&TreeMonologue, With<Button>>,
+    trees: Query<Entity, With<Tree>>,
+    mut commands: Commands,
+    time: Res<Time>,
+    mut meshes: ResMut<Assets<Mesh>>,
+    mut materials: ResMut<Assets<StandardMaterial>>,
+    server: Res<AssetServer>,
+) {
+    let tree_monologue = tree_monologues.get(trigger.target()).unwrap();
+
+    {
+        // Generate "random" X and Y Coordinates for this tree
+        // 1. Take the top 2 bytes
+        // 2. Interpet as u8s
+        // 3. Re-interpret as i8s
+        // 4. Cast to f32
+        let transform = {
+            let [a, b, c, d] = time.elapsed().as_secs_f32().to_be_bytes();
+            info!("Time bits: {a} {b} {c} {d}");
+            let x = c as i8 / 4;
+            let y = d as i8 / 4;
+            // Avoid mesh clipping by offsetting each on the z axis
+            let z = trees.iter().len() as f32;
+            info!("Coordiantes: {x} {y}");
+            Transform::from_xyz(x.into(), z, y.into()).with_scale(Vec3::splat(10.0))
+        };
+
+        let material = MeshMaterial3d(materials.add(StandardMaterial {
+            base_color_texture: Some(server.load("placeholder/tree.png")),
+            base_color: WHITE.into(),
+            alpha_mode: AlphaMode::Blend,
+            ..default()
+        }));
+
+        let mesh = Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(1.0))));
+
+        commands
+            .spawn((
+                Tree,
+                mesh,
+                material,
+                tree_monologue.clone(),
+                transform
+            ))
+            .observe(delete_tree);
+    }
 }
 
 fn hide_monologue_preview(
diff --git a/src/debug.rs b/src/debug.rs
index 7b66439..7edb233 100644
--- a/src/debug.rs
+++ b/src/debug.rs
@@ -1,5 +1,8 @@
 use bevy::{
-    color::palettes::css::{GREY, MAGENTA}, gizmos::{aabb::AabbGizmoPlugin, light::LightGizmoPlugin}, pbr::wireframe::{WireframeConfig, WireframePlugin}, platform::collections::HashMap
+    color::palettes::css::{GREY, MAGENTA},
+    gizmos::{aabb::AabbGizmoPlugin, light::LightGizmoPlugin},
+    pbr::wireframe::{WireframeConfig, WireframePlugin},
+    platform::collections::HashMap,
 };
 
 use super::*;
@@ -22,10 +25,7 @@ impl Plugin for DebuggingPlugin {
                     (toggle_state_visibility::<DebuggingState>,)
                         .run_if(state_changed::<DebuggingState>),
                     toggle_debug_state.run_if(on_keyboard_press(KeyCode::F12)),
-                    (
-                        toggle_light_gizmo,
-                        toggle_aabb_gizmo,
-                    ).run_if(state_changed::<DebuggingState>),
+                    (toggle_light_gizmo, toggle_aabb_gizmo).run_if(state_changed::<DebuggingState>),
                     (
                         (hover_mesh, hover_ui)
                             .run_if(on_event::<Pointer<Over>>.or(on_event::<Pointer<Out>>)),
@@ -93,7 +93,7 @@ fn init_debug_ui(mut commands: Commands) {
             align_self: AlignSelf::End,
             justify_self: JustifySelf::End,
             ..default()
-        }
+        },
     ));
 
     // Tooltip
diff --git a/web/trees.css b/web/trees.css
deleted file mode 100644
index 547c492..0000000
--- a/web/trees.css
+++ /dev/null
@@ -1,4 +0,0 @@
-canvas {
-    width: 90%;
-    height: 90%;
-}
diff --git a/web/trees.html b/web/trees.html
index cce493e..cbda8f7 100644
--- a/web/trees.html
+++ b/web/trees.html
@@ -1,23 +1,14 @@
-<html>
-</html>
-
 <!doctype html>
 <html lang="en">
-<head>
-  <link rel="css" href="trees.css" />
-</head>
-
-<body style="margin: 0px;">
+<body>
   <script type="module">
-    import init from './trees.js'
+      import init from './trees.js'
 
-    init().catch((error) => {
-      if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-        throw error;
-      }
-    });
+      init().catch((error) => {
+        if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+          throw error;
+        }
+      });
   </script>
 </body>
-
 </html>
-