diff --git a/builder/index.html b/builder/index.html
index 9fe56ed..634bc22 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -418,17 +418,22 @@
                                 <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
                                     <div class="col fw-bold dark-4 rounded-top">
                                         <div class = "row">
-                                            <div class = "col-4 py-2">
+                                            <div class = "col-3 py-2">
                                                 <button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-tomes" onclick = "toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')">
                                                     Show Tomes
                                                 </button>
                                             </div>
-                                            <div class = "col-4 py-2">
+                                            <div class = "col-3 py-2">
+                                                <button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-atree" onclick = "toggle_tab('atree-dropdown'); toggleButton('toggle-atree')">
+                                                    Show Ability Tree
+                                                </button>
+                                            </div>
+                                            <div class = "col-3 py-2">
                                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')">
                                                     Edit IDs
                                                 </button>
                                             </div>
-                                            <div class = "col-4 py-2">
+                                            <div class = "col-3 py-2">
                                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "resetEditableIDs(); updateStats();">
                                                     Reset Edited IDs
                                                 </button>
@@ -607,6 +612,16 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown">
+                                        <div class="row row-cols-1 row-cols-xl-2">
+                                            <div class="col dark-8 rounded" id="atree-ui">
+
+                                            </div>
+                                            <div class="col">
+                                                Active:
+                                            </div>
+                                        </div>
+                                    </div>
                                     <div class="col dark-6 rounded-bottom my-3 my-xl-1" id = "edit_id_tab" style = "display:none;">
                                         <div class = "row big-title justify-content-center">
                                             Damage Stats
@@ -1387,6 +1402,8 @@
     <script type="text/javascript" src="../js/skillpoints.js"></script>
     <script type="text/javascript" src="../js/damage_calc.js"></script>
 
+    <script type="text/javascript" src="../js/atree_constants.js"></script>
+
     <script type="text/javascript" src="../js/display_constants.js"></script>
     <script type="text/javascript" src="../js/sq2display_constants.js"></script>
 
diff --git a/css/sq2bs.css b/css/sq2bs.css
index e349002..7bad703 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -447,4 +447,29 @@ a:hover {
 
 .button {
     border-color: #fff;
-}
\ No newline at end of file
+}
+
+/* atree connector rotations */
+.rotate-90 {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.rotate-180 {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.rotate-270 {
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    transform: rotate(270deg);
+}
diff --git a/js/atree_constants.js b/js/atree_constants.js
new file mode 100644
index 0000000..6161f9e
--- /dev/null
+++ b/js/atree_constants.js
@@ -0,0 +1,70 @@
+const atree_example = [
+    {
+        "title": "skill",
+        "desc": "desc",
+        "image": "../media/atree/node.png",
+        "connector": false,
+        "row": 5,
+        "col": 3,
+    },
+    {
+        "image": "../media/atree/connect_angle.png",
+        "connector": true,
+        "rotate": "270",
+        "row": 4,
+        "col": 3,
+    },
+    {
+        "title": "skill2",
+        "desc": "desc",
+        "image": "../media/atree/node.png",
+        "connector": false,
+        "row": 0,
+        "col": 2            
+    },
+    {
+        "image": "../media/atree/connect_line.png",
+        "connector": true,
+        "rotate": 0,
+        "row": 1,
+        "col": 2
+    },
+    {
+        "title": "skill3",
+        "desc": "desc",
+        "image": "../media/atree/node.png",
+        "connector": false,
+        "row": 2,
+        "col": 2            
+    },
+    {
+        "image": "../media/atree/connect_line.png",
+        "connector": true,
+        "rotate": 90,
+        "row": 2,
+        "col": 3
+    },
+    {
+        "title": "skill4",
+        "desc": "desc",
+        "image": "../media/atree/node.png",
+        "connector": false,
+        "row": 2,
+        "col": 4
+    },
+    {
+        "image": "../media/atree/connect_line.png",
+        "connector": true,
+        "rotate": 0,
+        "row": 3,
+        "col": 2
+    },
+    {
+        "title": "skill5",
+        "desc": "desc",
+        "image": "../media/atree/node.png",
+        "connector": false,
+        "row": 4,
+        "col": 2
+    },
+];
diff --git a/js/sq2bs.js b/js/sq2bs.js
index dce7eba..5a8c677 100644
--- a/js/sq2bs.js
+++ b/js/sq2bs.js
@@ -73,6 +73,8 @@ document.addEventListener('DOMContentLoaded', function() {
         };
     });
 
+    construct_AT(document.getElementById("atree-ui"), atree_example);
+    document.getElementById("atree-dropdown").style.display = "none";
 });
 
 // phanta scheduler
@@ -530,3 +532,67 @@ function init_autocomplete() {
     }
 }
 
+// atree parsing
+function construct_AT(elem, tree) {
+    for (let i = 0; i < tree.length; i++) {
+        let node = tree[i];
+        
+        // create rows if not exist
+        if (document.getElementById("atree-row-" + node.row) == null) {
+            for (let j = 0; j <= node.row; j++) {
+                if (document.getElementById("atree-row-" + j) == null) {
+                    let row = document.createElement('div');
+                    row.classList.add("row");
+                    row.id = "atree-row-" + j;
+                    row.style.height = elem.getBoundingClientRect().width / 5 + "px";
+
+
+                    for (let k = 0; k < 5; k++) {
+                        col = document.createElement('div');
+                        col.classList.add('col', 'px-0');
+                        row.appendChild(col);
+                    };
+                    elem.appendChild(row);
+                };
+            };
+        };
+
+        // create node
+        let node_elem = document.createElement('div')
+        node_elem.className = "atree-node";
+        node_elem.style = "background-image: url('" + node.image + "'); background-size: cover; width: 100%; height: 100%;";
+
+        if (node.connector && node.rotate != 0) {
+            node_elem.classList.add("rotate-" + node.rotate);
+        };
+
+        // add tooltip
+        if (!node.connector) {
+            node_elem.addEventListener('mouseover', function(e) {
+                if (e.target !== this) {return;}
+                let tooltip = this.children[0];
+                tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY + "px";
+                tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + "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_tooltip = document.createElement('div');
+            node_tooltip.addEventListener('mouseover', function() {});
+            node_tooltip.style.backgroundColor = "#444444";
+            node_tooltip.style.color = "#ffffff";
+            node_tooltip.style.position = "absolute";
+            node_tooltip.style.width = elem.getBoundingClientRect().width + "px";
+            node_tooltip.style.display = "none";
+            node_tooltip.textContent = node.title;
+            node_elem.appendChild(node_tooltip);
+        };
+
+        document.getElementById("atree-row-" + node.row).children[node.col].appendChild(node_elem);
+    };
+};
diff --git a/media/atree/connect_angle.png b/media/atree/connect_angle.png
new file mode 100644
index 0000000..3ea2c16
Binary files /dev/null and b/media/atree/connect_angle.png differ
diff --git a/media/atree/connect_line.png b/media/atree/connect_line.png
new file mode 100644
index 0000000..d96094a
Binary files /dev/null and b/media/atree/connect_line.png differ
diff --git a/media/atree/node.png b/media/atree/node.png
new file mode 100644
index 0000000..e0da27e
Binary files /dev/null and b/media/atree/node.png differ