diff --git a/Kids on Brooms Official/kobrooms.css b/Kids on Brooms Official/kobrooms.css
index 0cf090b713..448212b6c4 100644
--- a/Kids on Brooms Official/kobrooms.css	
+++ b/Kids on Brooms Official/kobrooms.css	
@@ -268,7 +268,7 @@
 .sheet-kob-wrapper .sheet-kob-stat:nth-child(even) {
   grid-template-columns: 2.5em 1fr;
 }
-.sheet-kob-wrapper .sheet-kob-stat:nth-child(even) button {
+.sheet-kob-wrapper .sheet-kob-stat:nth-child(even) button span {
   transform: rotate(180deg);
 }
 .sheet-kob-wrapper .sheet-kob-stat:nth-child(odd) {
@@ -305,6 +305,8 @@
   text-align: left;
 }
 .sheet-kob-wrapper .sheet-kob-stat__button {
+  display: flex;
+  flex-direction: column;
   line-height: 1em;
   border: 1px solid transparent;
   color: #611618;
@@ -313,9 +315,12 @@
   font-weight: normal;
   text-transform: uppercase;
   text-shadow: none;
+}
+.sheet-kob-wrapper .sheet-kob-stat__button span {
   writing-mode: vertical-lr;
 }
 .sheet-kob-wrapper .sheet-kob-stat__button:before {
+  transform: rotate(90deg);
   margin-bottom: 5px;
 }
 .sheet-kob-wrapper .sheet-kob-stat__button:hover {
diff --git a/Kids on Brooms Official/kobrooms.html b/Kids on Brooms Official/kobrooms.html
index 0f40314ce7..4b01b992bb 100644
--- a/Kids on Brooms Official/kobrooms.html	
+++ b/Kids on Brooms Official/kobrooms.html	
@@ -95,7 +95,7 @@
       <div class="kob-body__stats">
         <h2 data-i18n="Stats">Stats   </h2>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Fight" name="roll_fight" type="roll" value="&amp;{template:kobrooms} {{name=Fight}} {{character_name=@{character_name}}} {{roll=[[1@{fight}!+?{Bonus|Stat,@{fight_stat}|Magic,@{fight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Fight</button>
+          <button class="kob-stat__button" name="roll_fight" type="roll" value="&amp;{template:kobrooms} {{name=Fight}} {{character_name=@{character_name}}} {{roll=[[1@{fight}!+?{Bonus|Stat,@{fight_stat}|Magic,@{fight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Fight">Fight</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_fight">
               <option data-i18n="d4" value="d4">d4</option>
@@ -114,7 +114,7 @@
           </div>
         </div>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Flight" name="roll_flight" type="roll" value="&amp;{template:kobrooms} {{name=Flight}} {{character_name=@{character_name}}} {{roll=[[1@{flight}!+?{Bonus|Stat,@{flight_stat}|Magic,@{flight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Flight</button>
+          <button class="kob-stat__button" name="roll_flight" type="roll" value="&amp;{template:kobrooms} {{name=Flight}} {{character_name=@{character_name}}} {{roll=[[1@{flight}!+?{Bonus|Stat,@{flight_stat}|Magic,@{flight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Flight">Flight</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_flight">
               <option data-i18n="d4" value="d4">d4</option>
@@ -133,7 +133,7 @@
           </div>
         </div>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Brains" name="roll_brains" type="roll" value="&amp;{template:kobrooms} {{name=Brains}} {{character_name=@{character_name}}} {{roll=[[1@{brains}!+?{Bonus|Stat,@{brains_stat}|Magic,@{brains_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Brains</button>
+          <button class="kob-stat__button" name="roll_brains" type="roll" value="&amp;{template:kobrooms} {{name=Brains}} {{character_name=@{character_name}}} {{roll=[[1@{brains}!+?{Bonus|Stat,@{brains_stat}|Magic,@{brains_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Brains">Brains</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_brains">
               <option data-i18n="d4" value="d4">d4</option>
@@ -152,7 +152,7 @@
           </div>
         </div>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Brawn" name="roll_brawn" type="roll" value="&amp;{template:kobrooms} {{name=Brawn}} {{character_name=@{character_name}}} {{roll=[[1@{brawn}!+?{Bonus|Stat,@{brawn_stat}|Magic,@{brawn_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Brawn</button>
+          <button class="kob-stat__button" name="roll_brawn" type="roll" value="&amp;{template:kobrooms} {{name=Brawn}} {{character_name=@{character_name}}} {{roll=[[1@{brawn}!+?{Bonus|Stat,@{brawn_stat}|Magic,@{brawn_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Brawn">Brawn</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_brawn">
               <option data-i18n="d4" value="d4">d4</option>
@@ -171,7 +171,7 @@
           </div>
         </div>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Charm" name="roll_charm" type="roll" value="&amp;{template:kobrooms} {{name=Charm}} {{character_name=@{character_name}}} {{roll=[[1@{charm}!+?{Bonus|Stat,@{charm_stat}|Magic,@{charm_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Charm</button>
+          <button class="kob-stat__button" name="roll_charm" type="roll" value="&amp;{template:kobrooms} {{name=Charm}} {{character_name=@{character_name}}} {{roll=[[1@{charm}!+?{Bonus|Stat,@{charm_stat}|Magic,@{charm_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Charm">Charm</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_charm">
               <option data-i18n="d4" value="d4">d4</option>
@@ -190,7 +190,7 @@
           </div>
         </div>
         <div class="kob-stat">
-          <button class="kob-stat__button" data-i18n="Grit" name="roll_grit" type="roll" value="&amp;{template:kobrooms} {{name=Grit}} {{character_name=@{character_name}}} {{roll=[[1@{grit}!+?{Bonus|Stat,@{grit_stat}|Magic,@{grit_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Grit</button>
+          <button class="kob-stat__button" name="roll_grit" type="roll" value="&amp;{template:kobrooms} {{name=Grit}} {{character_name=@{character_name}}} {{roll=[[1@{grit}!+?{Bonus|Stat,@{grit_stat}|Magic,@{grit_magic}|None,0}+?{Bonuses / Penalties|0}]]}}"><span data-i18n="Grit">Grit</span></button>
           <div class="kob-stat__wrapper">
             <select class="kob-stat__select" name="attr_grit">
               <option data-i18n="d4" value="d4">d4</option>
diff --git a/Kids on Brooms Official/src/pug/mixins.pug b/Kids on Brooms Official/src/pug/mixins.pug
index 5e4143a837..be49154d4f 100644
--- a/Kids on Brooms Official/src/pug/mixins.pug	
+++ b/Kids on Brooms Official/src/pug/mixins.pug	
@@ -20,7 +20,8 @@ mixin stat-display(name, attr)
             `{{roll=[[1@{${attr}}!+?{Bonus|Stat,@{${attr}_stat}|Magic,@{${attr}_magic}|None,0}+?{Bonuses / Penalties|0}]]}}`,
         ].join(" ");
     .kob-stat
-        button.kob-stat__button(data-i18n=name, name=`roll_${attr}`, type="roll", value=roll)=name
+        button.kob-stat__button(name=`roll_${attr}`, type="roll", value=roll)
+            span(data-i18n=name)=name
         .kob-stat__wrapper
             select.kob-stat__select(name=`attr_${attr}`)
                 +dice-select()
diff --git a/Kids on Brooms Official/src/scss/kobrooms.scss b/Kids on Brooms Official/src/scss/kobrooms.scss
index 2307ef72f1..b5721df013 100644
--- a/Kids on Brooms Official/src/scss/kobrooms.scss	
+++ b/Kids on Brooms Official/src/scss/kobrooms.scss	
@@ -383,7 +383,7 @@
             &:nth-child(even) {
                 grid-template-columns: 2.5em 1fr;
 
-                button {
+                button span {
                     transform: rotate(180deg);
                 }
             }
@@ -431,6 +431,8 @@
             }
 
             &__button {
+                display: flex;
+                flex-direction: column;
                 line-height: 1em;
 
                 border: 1px solid transparent;
@@ -441,9 +443,13 @@
                 font-weight: normal;
                 text-transform: uppercase;
                 text-shadow: none;
-                writing-mode: vertical-lr;  
+
+                span {
+                    writing-mode: vertical-lr;  
+                }
 
                 &:before {
+                    transform: rotate(90deg);
                     margin-bottom: 5px; 
                 }