diff --git a/builder/index_full.html b/builder/index_full.html
index 600db3f..818961d 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -947,8 +947,8 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col mb-1">
-                                <div class="row row-cols-1 text-center scaled-font dark-5 rounded dark-shadow justify-content-center">
+                            <div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow">
+                                <div class="row row-cols-1 justify-content-center">
                                     <div class="col fw-bold dark-4 rounded-top">
                                         Active boosts
                                     </div>
@@ -972,6 +972,12 @@
                                             Fortitude (+60%)
                                         </button>
                                     </div>
+                                    <div class="col" id="boost-toggles">
+
+                                    </div>
+                                </div>
+                                <div class="row row-cols-1 justify-content-center" id="boost-sliders">
+
                                 </div>
                             </div>
                             <div class="col mb-1">
diff --git a/js/atree.js b/js/atree.js
index 540d679..13b66eb 100644
--- a/js/atree.js
+++ b/js/atree.js
@@ -644,6 +644,9 @@ const atree_make_interactives = new (class extends ComputeNode {
         const atree_order = input_map.get('atree-order');
         const atree_html = input_map.get('atree-elements');
 
+        document.getElementById("boost-sliders").innerHTML = "";
+        document.getElementById("boost-toggles").innerHTML = "";
+
         /**
          * slider_info 
          *   label_name: str,
@@ -658,7 +661,7 @@ const atree_make_interactives = new (class extends ComputeNode {
         const slider_map = new Map();
         const button_map = new Map();
 
-        // first, pull out all the sliders.
+        // first, pull out all the sliders and toggles.
         for (const [abil_id, ability] of merged_abils.entries()) {
             for (const effect of ability.effects) {
                 if (effect['type'] === "stat_scaling" && effect['slider'] === true) {
@@ -688,15 +691,15 @@ const atree_make_interactives = new (class extends ComputeNode {
                 }
             }
         }
-        // next, render the sliders onto the abilities.
+        // next, render the sliders and toggles onto the abilities.
         for (const [slider_name, slider_info] of slider_map.entries()) {
             let slider_container = gen_slider_labeled(slider_info);
-            atree_html.get(slider_info.abil.id).appendChild(slider_container);
+            document.getElementById("boost-sliders").appendChild(slider_container);
             slider_info.slider = document.getElementById(slider_info.id);
             slider_info.slider.addEventListener("change", (e) => atree_stats.mark_dirty().update());
         }
         for (const [button_name, button_info] of button_map.entries()) {
-            let button = make_elem('button', ["button-boost", "border-0", "text-white", "dark-8u", "dark-shadow-sm"], {
+            let button = make_elem('button', ["button-boost", "border-0", "text-white", "dark-8u", "dark-shadow-sm", "m-1"], {
                 id: button_info.abil.id,
                 textContent: button_name
             });
@@ -709,7 +712,7 @@ const atree_make_interactives = new (class extends ComputeNode {
                 atree_stats.mark_dirty().update()
             });
             button_info.button = button;
-            atree_html.get(button_info.abil.id).appendChild(button);
+            document.getElementById("boost-toggles").appendChild(button);
         }
         return [slider_map, button_map];
     }
diff --git a/js/utils.js b/js/utils.js
index 30cc395..c4651e3 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -788,12 +788,11 @@ function deepcopy(obj, refs=undefined) {
  */
 function gen_slider_labeled({label_name, label_classlist = [], min = 0, max = 100, step = 1, default_val = min, id = undefined, color = "#FFFFFF", classlist = []}) {
     let slider_container = document.createElement("div");
+    slider_container.classList.add("col");
 
     let buf_col = document.createElement("div");
-    buf_col.classList.add("col");
     
     let label = document.createElement("div");
-    label.classList.add("col");
     label.classList.add(...label_classlist);
     label.textContent = label_name + ": " + default_val;