diff --git a/sq2bs.css b/sq2bs.css
index 22c7f3c..80f5a59 100644
--- a/sq2bs.css
+++ b/sq2bs.css
@@ -182,7 +182,7 @@ li.search-item:hover {
 .float-tooltip {
     background-color: hsl(0, 0%, 16%);
     position: absolute;
-    transition: .5s;
+    transition: .3s;
     cursor: pointer;
 }
 
@@ -214,6 +214,10 @@ input.equipment-input {
     font-weight: bold;
 }
 
+.spell-expand {
+    cursor: pointer;
+}
+
 .scaled-font {
     font-size: 2.5rem;
 }
@@ -223,6 +227,11 @@ input.equipment-input {
     font-weight: bold;
 }
 
+.spellcost-tooltip b {
+    font-size: 2.1875rem !important;
+    font-weight: bold;
+}
+
 .warning {
     color: #ff8180;
     font-size: 1.875rem;
@@ -256,6 +265,10 @@ input.equipment-input {
         font-size: .625rem;
     }
 
+    .spellcost-tooltip b {
+        font-size: .625rem !important;
+    }
+
     .scaled-item-icon {
         width: 3.2rem;
     }
@@ -295,6 +308,10 @@ input.equipment-input {
         font-size: .78rem;
     }
 
+    .spellcost-tooltip b {
+        font-size: .78rem !important;
+    }
+
     .scaled-item-icon {
         width: 4rem;
     }
@@ -412,6 +429,10 @@ input.equipment-input {
     box-shadow: 0rem 0rem 1.25rem 0.1875rem black;
 }
   
-  .dark-shadow-sm {
+.dark-shadow-sm {
     box-shadow: 0rem 0rem 0.625rem 0.125rem black;
+}
+
+.border-dark-7 {
+    border-color:hsl(0, 0%, 14%) !important;
 }
\ No newline at end of file
diff --git a/sq2bs.html b/sq2bs.html
index b08dec5..99825e7 100644
--- a/sq2bs.html
+++ b/sq2bs.html
@@ -333,8 +333,8 @@
                                                 <div class="rounded dark-6 dark-shadow-sm px-2">
                                                     <label for="str-skp" class="eDam skp-tooltip">Strength</label>
                                                     <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                    <div id="str-skp-assign" class="skp-tooltip" style="display: none;">
-                                                        Manually Assigned: 0
+                                                    <div id="str-skp-assign" class="skp-tooltip">
+                                                        Assign: 0
                                                     </div>
                                                     <div id="str-skp-base" class="skp-tooltip">
                                                         Original: 0
@@ -347,8 +347,8 @@
                                                 <div class="rounded dark-6 dark-shadow-sm px-2">
                                                     <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label>
                                                     <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                    <div id="dex-skp-assign" class="skp-tooltip" style="display: none;">
-                                                        Manually Assigned: 0
+                                                    <div id="dex-skp-assign" class="skp-tooltip">
+                                                        Assign: 0
                                                     </div>
                                                     <div id="dex-skp-base" class="skp-tooltip">
                                                         Original: 0
@@ -361,8 +361,8 @@
                                                 <div class="rounded dark-6 dark-shadow-sm px-2">
                                                     <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label>
                                                     <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                    <div id="int-skp-assign" class="skp-tooltip" style="display: none;">
-                                                        Manually Assigned: 0
+                                                    <div id="int-skp-assign" class="skp-tooltip">
+                                                        Assign: 0
                                                     </div>
                                                     <div id="int-skp-base" class="skp-tooltip">
                                                         Original: 0
@@ -375,8 +375,8 @@
                                                 <div class="rounded dark-6 dark-shadow-sm px-2">
                                                     <label for="def-skp" class="fDam skp-tooltip">Defense</label>
                                                     <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                    <div id="def-skp-assign" class="skp-tooltip" style="display: none;">
-                                                        Manually Assigned: 0
+                                                    <div id="def-skp-assign" class="skp-tooltip">
+                                                        Assign: 0
                                                     </div>
                                                     <div id="def-skp-base" class="skp-tooltip">
                                                         Original: 0
@@ -389,8 +389,8 @@
                                                 <div class="rounded dark-6 dark-shadow-sm px-2">
                                                     <label for="agi-skp" class="aDam skp-tooltip">Agility</label>
                                                     <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                    <div id="agi-skp-assign" class="skp-tooltip" style="display: none;">
-                                                        Manually Assigned: 0
+                                                    <div id="agi-skp-assign" class="skp-tooltip">
+                                                        Assign: 0
                                                     </div>
                                                     <div id="agi-skp-base" class="skp-tooltip">
                                                         Original: 0
@@ -690,13 +690,13 @@
                         <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
                             <div class="col rounded-top">
                                 <div class="row">
-                                    <div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-offensive-stats')">
+                                    <div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-offensive-stats')">
                                         Offense
                                     </div>
-                                    <div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-defensive-stats')">
+                                    <div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-defensive-stats')">
                                         Defense
                                     </div>
-                                    <div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('all-stats')">
+                                    <div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('all-stats')">
                                         Overall
                                     </div>
                                 </div>
@@ -740,25 +740,27 @@
                 </div>
             </div>
             <div class="col" id="masonry-container">
-
-                <div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
-                <div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
+                <div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
                 </div>
+                <div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
+                </div>
+                <div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info">Set info</div>
             </div>
             <div class="col dark-5 scaled-font">
                 <footer class="text-center">
@@ -773,49 +775,7 @@
             </div>
         </div>
     </div>
-    
-    
-    <div id="drag-full-eqs" style="display: none;">
-        <div class = "build hide-container-grid" style="display: none;">
-            <div class = "center build-order" id = "build-order">
-            </div>
-            <div class = "center build-melee-stats" id = "build-melee-stats">
-            </div>
-            <div class = "center build-defense-stats" id = "build-defense-stats">
-            </div>
-        </div>
-    </div>
-    <div id="drag-full-spells" style="display: none;">
-        <div class = "spells hide-container-grid" style="display: none;">
-            <div class = "center spell-info" id = "spell0">
-                <!--div class = "center" id = "spell0-name">Spell 1</div-->
-                <div class = "center" id = "spell0-info">Spell 1</div>
-            </div>
-            <div class = "center spell-info" id = "spell1">
-                <!--div class = "center" id = "spell1-name">Spell 2</div-->
-                <div class = "center" id = "spell1-info">Spell 2</div>
-            </div>
-            <div class = "center spell-info" id = "spell2">
-                <!--div class = "center" id = "spell2-name">Spell 3</div-->
-                <div class = "center" id = "spell2-info">Spell 3</div>
-            </div>
-            <div class = "center spell-info" id = "spell3">
-                <!--div class = "center" id = "spell3-name">Spell 4</div-->
-                <div class = "center" id = "spell3-info">Spell 4</div>
-            </div>
-        </div>
-    </div>
-    <div id="drag-additional-info" style="display: none;">
-        <div class="misc">
-            <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
-                <div class = "center" id = "set-info">Set info</div>
-            </div>
-            <div class = "center int-info hide-container-block" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
-                <div class = "center" id = "int-info">Next Spell Costs</div> 
-            </div>
-        </div>
-    </div>
-    <div id="drag-edit-ids" style="display: none;">
+    <!--div id="drag-edit-ids" style="display: none;">
         <div class="id-box fade-in" id="id-edit" style="display: none">
             <div class="id-edit1">
                 <table>
@@ -1210,7 +1170,7 @@
                 </table>
             </div>
         </div>
-    </div>
+    </div-->
     <div style="display: none;">
         <div id="search-container" class="draggable full-border window-container" style="border-top: none;">
             <div id="search-container-header" class="window-header">
diff --git a/sq2bs.js b/sq2bs.js
index 54cfc6f..9eb1273 100644
--- a/sq2bs.js
+++ b/sq2bs.js
@@ -1,8 +1,9 @@
 let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
-let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
+let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear'];
 let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
 
-let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info']
+let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info'];
+let other_disp = ['build-order', 'set-info', 'int-info'];
 
 document.addEventListener('DOMContentLoaded', function() {
 
@@ -166,6 +167,26 @@ function toggle_boost_tab(tab) {
     document.querySelector("#"+tab+"-boost").style.display = "";
 }
 
+// toggle tab
+function toggle_tab(tab) {
+    if (document.querySelector("#"+tab).style.display == "none") {
+        document.querySelector("#"+tab).style.display = "";
+    } else {
+        document.querySelector("#"+tab).style.display = "none";
+    }
+}
+
+function toggle_edit(id) {
+    if (document.querySelector("#"+id).style.display == "none") {
+        document.querySelector("#"+id+"-val").style.display = "none";
+        document.querySelector("#"+id).style.display = "";
+    } else {
+        document.querySelector("#"+id+"-val").style.display = "";
+        document.querySelector("#"+id).style.display = "none";
+        updateStatSchedule();
+    }
+}
+
 function collapse_element(eq) {
     elem_list = document.querySelector("#"+eq+"-tooltip").children
     for (elem of elem_list) {
diff --git a/sq2builder.js b/sq2builder.js
index 3f6c24a..1dfbb71 100644
--- a/sq2builder.js
+++ b/sq2builder.js
@@ -13,13 +13,14 @@ let editable_item_fields = [ "sdPct", "sdRaw", "mdPct", "mdRaw", "poison", "fDam
 
 let editable_elems = [];
 
+/*
 for (let i of editable_item_fields) {
     let elem = document.getElementById(i);
     elem.addEventListener("change", (event) => {
         elem.classList.add("highlight");
     });
     editable_elems.push(elem);
-}
+}*/
 
 for (let i of skp_order) {
     let elem = document.getElementById(i+"-skp");
@@ -373,9 +374,7 @@ function calculateBuild(save_skp, skp){
         }
 
         console.log(player_build.toString());
-        displayEquipOrder(document.getElementById("build-order"),player_build.equip_order);
-
-        
+        displaysq2EquipOrder(document.getElementById("build-order"),player_build.equip_order);
 
         const assigned = player_build.base_skillpoints;
         const skillpoints = player_build.total_skillpoints;
@@ -383,11 +382,6 @@ function calculateBuild(save_skp, skp){
             setText(skp_order[i] + "-skp-base", "Original: " + skillpoints[i]);
         }
 
-        for (let id of editable_item_fields) {
-            setValue(id, player_build.statMap.get(id));
-            setText(id+"-base", "Original Value: " + player_build.statMap.get(id));
-        }
-        
         if (save_skp) {
             // TODO: reduce duplicated code, @updateStats
             let skillpoints = player_build.total_skillpoints;
@@ -509,9 +503,12 @@ function updateStats() {
         updatePowderSpecials("skip", false);
         updateBoosts("skip", false);
     }
+    /*
     for (let id of editable_item_fields) {
-        player_build.statMap.set(id, parseInt(getValue(id)));
-    }
+            player_build.statMap.set(id, parseInt(getValue(id)));
+            console.log(player_build.statMap.get(id));
+        }
+    }*/
     player_build.aggregateStats();
     console.log(player_build.statMap);
     calculateBuildStats();
@@ -653,7 +650,7 @@ function calculateBuildStats() {
     const skillpoints = player_build.total_skillpoints;
     let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."];
     for (let i in skp_order){ //big bren
-        setText(skp_order[i] + "-skp-assign", "Manually Assigned: " + assigned[i]);
+        setText(skp_order[i] + "-skp-assign", "Assign: " + assigned[i]);
         setValue(skp_order[i] + "-skp", skillpoints[i]);
         let linebreak = document.createElement("br");
         linebreak.classList.add("itemp");
@@ -754,7 +751,6 @@ function calculateBuildStats() {
     displaysq2BuildStats("all-stats", player_build, build_all_display_commands);
     displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands);
     displaySetBonuses("set-info",player_build);
-    displayNextCosts("int-info",player_build);
 
     let meleeStats = player_build.getMeleeStats();
     displaysq2MeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats);
diff --git a/sq2display.js b/sq2display.js
index 8275629..aa17b1c 100644
--- a/sq2display.js
+++ b/sq2display.js
@@ -483,7 +483,7 @@ function displaysq2RolledID(item, id, elemental_format) {
     desc_elem.classList.add('col', 'text-center', 'text-nowrap');
     //TODO elemental format jank
     if (elemental_format) {
-        apply_elemental_format(desc_elem, id);
+        apply_sq2_elemental_format(desc_elem, id);
     }
     else {
         desc_elem.textContent = idPrefixes[id];
@@ -541,7 +541,7 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
         desc_elem.classList.add('text-start');
 
         if (elemental_format) {
-            apply_elemental_format(desc_elem, id);
+            apply_sq2_elemental_format(desc_elem, id);
         }
         else {
             desc_elem.textContent = idPrefixes[id];
@@ -565,7 +565,7 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
         let p_elem = document.createElement('div');
         p_elem.classList.add('col');
         if (elemental_format) {
-            apply_elemental_format(p_elem, id, value);
+            apply_sq2_elemental_format(p_elem, id, value);
         }
         else {
             p_elem.textContent = idPrefixes[id].concat(value, idSuffixes[id]);
@@ -1200,6 +1200,9 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
     parent_elem.append(title_elem);
     overallparent_elem.append(title_elemavg);
 
+    overallparent_elem.append(displaysq2NextCosts(spell, build));
+
+
     let critChance = skillPointsToPercentage(build.total_skillpoints[1]);
 
     let save_damages = [];
@@ -1345,3 +1348,83 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
         }
     }
 }
+
+function displaysq2EquipOrder(parent_elem, buildOrder){
+    parent_elem.textContent = "";
+    const order = buildOrder.slice();
+    let title_elem = document.createElement("b");
+    title_elem.textContent = "Equip order ";
+    title_elem.classList.add("Normal", "text-center");
+    parent_elem.append(title_elem);
+    for (const item of order) {
+        let p_elem = document.createElement("b");
+        p_elem.textContent = item.get("displayName");
+        parent_elem.append(p_elem);
+    }
+}
+
+function displaysq2NextCosts(spell, build) { 
+    let int = build.total_skillpoints[2];
+    let spells = spell_table[build.weapon.get("type")];
+
+    let row = document.createElement("div");
+    row.classList.add("spellcost-tooltip");
+    let init_cost = document.createElement("b");
+    init_cost.textContent = build.getSpellCost(spells.indexOf(spell) + 1, spell.cost);
+    init_cost.classList.add("Mana");
+    let arrow = document.createElement("b");
+    arrow.textContent = "\u279C";
+    let next_cost = document.createElement("b");
+    next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) - 1);
+    next_cost.classList.add("Mana");
+    let int_needed = document.createElement("b");
+    if (init_cost.textContent === "1") {
+        int_needed.textContent = ": n/a (+0)";
+    }else { //do math
+        let target = build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) - 1;
+        let needed = int;
+        let noUpdate = false;
+        //forgive me... I couldn't inverse ceil, floor, and max.
+        while (build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) > target) {
+            if(needed > 150) {
+                noUpdate = true;
+                break;
+            }
+            needed++;
+            build.total_skillpoints[2] = needed;
+        }
+        let missing = needed - int;  
+        //in rare circumstances, the next spell cost can jump.
+        if (noUpdate) {
+            next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost)-1); 
+        }else {
+            next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost)); 
+        }
+        
+        
+        build.total_skillpoints[2] = int;//forgive me pt 2
+        int_needed.textContent = ": " + (needed > 150 ? ">150" : needed) + " int (+" + (needed > 150 ? "n/a" : missing) + ")"; 
+    }
+    
+    // row.appendChild(init_cost);
+    row.appendChild(arrow);
+    row.appendChild(next_cost);
+    row.appendChild(int_needed);
+    return row;
+}
+
+function apply_sq2_elemental_format(p_elem, id, suffix) {
+    suffix = (typeof suffix !== 'undefined') ?  suffix : "";
+    // THIS IS SO JANK BUT IM TOO LAZY TO FIX IT TODO
+    let parts = idPrefixes[id].split(/ (.*)/);
+    let element_prefix = parts[0];
+    let desc = parts[1];
+    let i_elem = document.createElement('span');
+    i_elem.classList.add(element_prefix);
+    i_elem.textContent = element_prefix;
+    p_elem.appendChild(i_elem);
+
+    let i_elem2 = document.createElement('span');
+    i_elem2.textContent = " " + desc + suffix;
+    p_elem.appendChild(i_elem2);
+}
\ No newline at end of file