diff --git a/src/character/templates/character/snippets/character_details/health_bar.html b/src/character/templates/character/snippets/character_details/health_bar.html
index ed1b7e9..f9b644b 100644
--- a/src/character/templates/character/snippets/character_details/health_bar.html
+++ b/src/character/templates/character/snippets/character_details/health_bar.html
@@ -5,7 +5,7 @@
         hx-trigger="refresh_health_bar from:body"
         hx-swap="outerHTML"
     {% endif %}>
-    <div class="progress-bar bg-success" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
+    <div class="progress-bar {% if character.health_remaining_percent > 60 %}bg-success{% elif character.health_remaining_percent > 30 %}bg-warning{% else %}bg-danger{% endif %}" style="width: {{ character.health_remaining_percent|floatformat:"0" }}%">
         PV : {{ character.health_remaining }}/{{ character.health_max }}
     </div>
 </div>
diff --git a/src/character/templates/character/snippets/character_details/mana_bar.html b/src/character/templates/character/snippets/character_details/mana_bar.html
index 64d32d5..3d7d131 100644
--- a/src/character/templates/character/snippets/character_details/mana_bar.html
+++ b/src/character/templates/character/snippets/character_details/mana_bar.html
@@ -5,7 +5,7 @@
         hx-trigger="refresh_mana_bar from:body"
         hx-swap="outerHTML"
     {% endif %}>
-    <div class="progress-bar bg-primary" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
+    <div class="progress-bar {% if character.mana_remaining_percent > 60 %}bg-primary{% elif character.mana_remaining_percent > 30 %}bg-warning{% else %}bg-danger{% endif %}" style="width: {{ character.mana_remaining_percent|floatformat:"0" }}%">
         PM : {{ character.mana_remaining }}/{{ character.mana_max }}
     </div>
 </div>