diff --git a/Roll for Shoes/sheet.html b/Roll for Shoes/sheet.html
index 62d12e35bdcd..2c1e2ec12676 100644
--- a/Roll for Shoes/sheet.html	
+++ b/Roll for Shoes/sheet.html	
@@ -38,6 +38,12 @@ <h3>Statuses</h3>
         {{roll6}}
         {{roll7}}
         {{roll8}}
+        {{#rollLess() modifier 0}}
+          <span class="sheet-template-action-modifier-bad">{{modifier}}</span>
+        {{/rollLess() modifier 0}}
+        {{#rollGreater() modifier 0}}
+          <span class="sheet-template-action-modifier-good">{{modifier}}</span>
+        {{/rollGreater() modifier 0}}
       </span>
       <span class="sheet-template-result">{{computed::result}}</span>
     </div>
@@ -62,7 +68,7 @@ <h3>Statuses</h3>
       const rating = parseInt(ratingString)
       if (rating === 0) return
 
-      let rollQuery = `&{template:action} {{name=${skillName} ${rating}}} {{result=[[0+(?{Modifier|0})]]}}`
+      let rollQuery = `&{template:action} {{name=${skillName} ${rating}}} {{modifier=[[0+(?{Modifier|0})]]}} {{result=[[0]]}}`
       const numDice = Math.abs(rating)
       for (let i = 1; i <= numDice; i++) {
         rollQuery += ` {{roll${i}=[[1d6]]}}`
@@ -74,8 +80,8 @@ <h3>Statuses</h3>
           .map(([, { result }]) => result)
 
         const result = rating > 0
-          ? rollResults.reduce((total, x) => total + x, 0) + results.result.result
-          : rollResults.reduce((low, x) => low === null || x < low ? x : low, null) + results.result.result
+          ? rollResults.reduce((total, x) => total + x, 0) + results.modifier.result
+          : rollResults.reduce((low, x) => low === null || x < low ? x : low, null) + results.modifier.result
 
         finishRoll(rollId, { result })
       })
diff --git a/Roll for Shoes/styles.css b/Roll for Shoes/styles.css
index 8b193dc3d639..bca3eee512ed 100644
--- a/Roll for Shoes/styles.css	
+++ b/Roll for Shoes/styles.css	
@@ -40,7 +40,7 @@
         gap: 5px;
 
         span {
-          flex-basis: 25%;
+          flex-basis: 5rem;
         }
       }
 
@@ -69,26 +69,49 @@
 }
 
 .sheet-rolltemplate-action .sheet-template-container .sheet-template-results {
+  align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 15px 10px;
 }
 
-.sheet-rolltemplate-action .sheet-template-container .sheet-template-results .sheet-template-rolls .inlinerollresult {
-  background-color: #cccced;
-  border-color: #cccced;
+.sheet-rolltemplate-action .sheet-template-container .sheet-template-results .sheet-template-rolls {
+  background-color: #474787;
   border-radius: 2px;
+  column-gap: 3px;
+  display: flex;
+  padding: 3px;
 
-  &.fullcrit {
-    background-color: #99cbe0;
-    border-color: #99cbe0;
-  }
-
-  &.fullfail {
+  .inlinerollresult {
+    align-items: center;
+    background-color: #cccced;
     border-color: #cccced;
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    min-width: 10px;
+
+    &.fullcrit {
+      background-color: #99cbe0;
+      border-color: #99cbe0;
+    }
+
+    &.fullfail {
+      border-color: #cccced;
+    }
   }
 }
 
+.sheet-rolltemplate-action .sheet-template-container .sheet-template-results .sheet-template-rolls .sheet-template-action-modifier-bad .inlinerollresult {
+  background-color: #ff8888;
+  border-color: #ff8888;
+}
+
+.sheet-rolltemplate-action .sheet-template-container .sheet-template-results .sheet-template-rolls .sheet-template-action-modifier-good .inlinerollresult {
+  background-color: #aaddbb;
+  border-color: #aaddbb;
+}
+
 .sheet-rolltemplate-action .sheet-template-container .sheet-template-results .sheet-template-result {
   font-size: 1.5em;
 
@@ -100,3 +123,13 @@
     padding-right: 8px;
   }
 }
+
+.sheet-darkmode {
+  h3 {
+   color: #cccccc;
+  }
+
+  .sheetform {
+    background-color: transparent;
+  }
+}