diff --git a/js/display_atree.js b/js/display_atree.js
index e21ce61..e419c75 100644
--- a/js/display_atree.js
+++ b/js/display_atree.js
@@ -10,7 +10,19 @@ function construct_AT(elem, tree) {
     // add in the "Active" title to atree
     let active_row = document.createElement("div");
     active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center");
-    active_row.textContent = "Active:";
+
+    let active_word = document.createElement("div");
+    active_word.classList.add("col");
+    active_word.textContent = "Active:";
+
+    let active_AP_container = document.createElement("div");
+    active_AP_container.classList.add("col");
+    active_AP_container.textContent = "(0/45 AP)";
+    
+    //I can't believe we can't pass in multiple children at once
+    active_row.appendChild(active_word);
+    active_row.appendChild(active_AP_container);
+
     document.getElementById("atree-active").appendChild(active_row);
 
     atree_map = new Map();
@@ -104,29 +116,18 @@ function construct_AT(elem, tree) {
         if (icon === undefined) {
             icon = "node";
         }
-        node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;";
-
-        // add tooltip
-        node_elem.addEventListener('mouseover', function(e) {
-            if (e.target !== this) {return;}
-            let tooltip = this.children[0];
-            tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px";
-            tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px";
-            tooltip.style.display = "block";
-        });
-
-        node_elem.addEventListener('mouseout', function(e) {
-            if (e.target !== this) {return;}
-            let tooltip = this.children[0];
-            tooltip.style.display = "none";
-        });
-
+        let node_img = document.createElement('img');
+        node_img.src = '../media/atree/' + icon + '.png';
+        node_img.style = 'width: 100%; height:100%';
+        // node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;";
+        node_elem.style = 'background-size: cover; width: 100%; height:100%; padding: 8%;'
+        node_elem.appendChild(node_img);
         node_elem.classList.add("fake-button");
 
         let active_tooltip = document.createElement('div');
         active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
         //was causing active element boxes to be 0 width 
-        // active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
+        active_tooltip.style.maxWidth = elem.getBoundingClientRect().width * .80 + "px";
         active_tooltip.style.display = "none";
 
         // tooltip text formatting
@@ -135,12 +136,17 @@ function construct_AT(elem, tree) {
         active_tooltip_title.classList.add("scaled-font");
         active_tooltip_title.innerHTML = node.display_name;
 
-        let active_tooltip_text = document.createElement('p');
-        active_tooltip_text.classList.add("scaled-font-sm");
-        active_tooltip_text.textContent = node.desc;
+        let active_tooltip_desc = document.createElement('p');
+        active_tooltip_desc.classList.add("scaled-font-sm", "my-0", "mx-1", "text-wrap");
+        active_tooltip_desc.textContent = node.desc;
+
+        let active_tooltip_cost = document.createElement('p');
+        active_tooltip_cost.classList.add("scaled-font-sm", "my-0", "mx-1", "text-start");
+        active_tooltip_cost.textContent = "Cost: " + node.cost + " AP";
 
         active_tooltip.appendChild(active_tooltip_title);
-        active_tooltip.appendChild(active_tooltip_text);
+        active_tooltip.appendChild(active_tooltip_desc);
+        active_tooltip.appendChild(active_tooltip_cost);
 
         node_tooltip = active_tooltip.cloneNode(true);
 
@@ -153,19 +159,36 @@ function construct_AT(elem, tree) {
         document.getElementById("atree-active").appendChild(active_tooltip);
 
         node_elem.addEventListener('click', function(e) {
-            if (e.target !== this) {return;}
+            if (e.target !== this && e.target!== this.children[0]) {return;}
             let tooltip = document.getElementById("atree-ab-" + node.display_name.replaceAll(" ", ""));
             if (tooltip.style.display == "block") {
                 tooltip.style.display = "none";
                 this.classList.remove("atree-selected");
-                this.style.backgroundImage = 'url("../media/atree/node.png")';
+                this.style.backgroundImage = '';
             } 
             else {
                 tooltip.style.display = "block";
                 this.classList.add("atree-selected");
-                this.style.backgroundImage = 'url("../media/atree/node-selected.png")';
+                this.style.backgroundImage = 'url("../media/atree/node_highlight.png")';
             }
         });
+
+        // add tooltip
+
+        node_elem.addEventListener('mouseover', function(e) {
+            if (e.target !== this && e.target!== this.children[0]) {return;}
+            let tooltip = this.children[this.children.length - 1];
+            tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px";
+            tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px";
+            tooltip.style.display = "block";
+        });
+
+        node_elem.addEventListener('mouseout', function(e) {
+            if (e.target !== this && e.target!== this.children[0]) {return;}
+            let tooltip = this.children[this.children.length - 1];
+            tooltip.style.display = "none";
+        });
+
         document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem);
     };
 
diff --git a/js/utils.js b/js/utils.js
index 5691ac9..70ec6dc 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -389,3 +389,4 @@ async function hardReload() {
 function capitalizeFirst(str) {
     return str[0].toUpperCase() + str.substring(1);
 }
+