diff --git a/styles/chat.less b/styles/chat.less
index 1494966c..928016e1 100644
--- a/styles/chat.less
+++ b/styles/chat.less
@@ -110,6 +110,19 @@
         }
 
         .dice-total {
+            &.duality {
+                &.hope {
+                    background: rgba(0, 128, 128, 0.5);
+                    border-color: #008080;
+                    border-width: 3px;
+                }
+                &.fear {
+                    border-color: #430070;
+                    border-width: 3px;
+                    background: rgba(67, 0, 112, 0.5);
+                }
+            }
+
             .dice-total-value {
                 .hope {
                     color: @hope;
diff --git a/styles/daggerheart.css b/styles/daggerheart.css
index e982c973..7aea9f4a 100644
--- a/styles/daggerheart.css
+++ b/styles/daggerheart.css
@@ -1431,6 +1431,16 @@
   text-align: end;
   font-weight: bold;
 }
+.daggerheart.chat.roll .dice-total.duality.hope {
+  background: rgba(0, 128, 128, 0.5);
+  border-color: #008080;
+  border-width: 3px;
+}
+.daggerheart.chat.roll .dice-total.duality.fear {
+  border-color: #430070;
+  border-width: 3px;
+  background: rgba(67, 0, 112, 0.5);
+}
 .daggerheart.chat.roll .dice-total .dice-total-value .hope {
   color: #008080;
 }
diff --git a/templates/chat/duality-roll.hbs b/templates/chat/duality-roll.hbs
index 19b45c45..fc2d04c9 100644
--- a/templates/chat/duality-roll.hbs
+++ b/templates/chat/duality-roll.hbs
@@ -54,7 +54,7 @@
                 </section>
             </div>
         </div>
-        <div class="dice-total">
+        <div class="dice-total duality {{#if fear.discarded}}hope{{/if}}{{#if hope.discarded}}fear{{/if}}">
             <div class="dice-total-label">{{totalLabel}}</div>
             <div class="dice-total-value">
                 {{total}}