diff --git a/builder/index.html b/builder/index.html
index c49ccb4..03bdedd 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -1240,31 +1240,31 @@
                 </div>
                 <div class="col-xl-3 mb-3">
                     <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
+                        <div class = "col">
+                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
                             <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
+                        <div class = "col">
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell0-infoAvg">spell1</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell1-infoAvg">spell2</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell2-infoAvg">spell3</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
+                        <div class = "col">
+                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
                         </div>
                         
                     </div>
diff --git a/js/sq2display.js b/js/sq2display.js
index b6b588b..7043e8e 100644
--- a/js/sq2display.js
+++ b/js/sq2display.js
@@ -1411,6 +1411,43 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
             part_divavg.append(overallaverageLabel);
         }
     }
+
+    //up and down arrow - done ugly
+
+
+
+    let down_arrow = document.createElement("img");
+    down_arrow.id = "down_arrow_" + overallparent_elem.id;
+    down_arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
+    down_arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
+    overallparent_elem.appendChild(down_arrow);
+
+    let up_arrow = document.createElement("img");
+    up_arrow.id = "up_arrow_" + overallparent_elem.id;
+    up_arrow.style.maxWidth =  document.body.clientWidth > 900 ? "3rem" : "10rem";
+    up_arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_up.png";
+    up_arrow.style.display = "none";
+    overallparent_elem.appendChild(up_arrow);
+
+    overallparent_elem.setAttribute("onclick", overallparent_elem.getAttribute("onclick") + `;toggleUpDownArrow("${overallparent_elem.id}")`);
+}
+
+function toggleUpDownArrow(parent_id) {
+    parent_elem = document.getElementById(parent_id);
+    if (parent_elem) {
+        let down_arrow = document.getElementById("down_arrow_" + parent_id);
+        if (down_arrow.style.display === "none") {
+            down_arrow.style.display = "";
+        } else {
+            down_arrow.style.display = "none";
+        }
+        let up_arrow = document.getElementById("up_arrow_" + parent_id);
+        if (up_arrow.style.display === "none") {
+            up_arrow.style.display = "";
+        } else {
+            up_arrow.style.display = "none";
+        }
+    }
 }
 
 function displaysq2EquipOrder(parent_elem, buildOrder){
diff --git a/media/icons/new/toggle_down.png b/media/icons/new/toggle_down.png
new file mode 100644
index 0000000..4154d3d
Binary files /dev/null and b/media/icons/new/toggle_down.png differ
diff --git a/media/icons/new/toggle_up.png b/media/icons/new/toggle_up.png
new file mode 100644
index 0000000..1fd8186
Binary files /dev/null and b/media/icons/new/toggle_up.png differ
diff --git a/media/icons/old/toggle_down.png b/media/icons/old/toggle_down.png
new file mode 100644
index 0000000..4154d3d
Binary files /dev/null and b/media/icons/old/toggle_down.png differ
diff --git a/media/icons/old/toggle_up.png b/media/icons/old/toggle_up.png
new file mode 100644
index 0000000..1fd8186
Binary files /dev/null and b/media/icons/old/toggle_up.png differ