diff --git a/module/applications/sheets/actors/character.mjs b/module/applications/sheets/actors/character.mjs
index e035cc85..b291a4f0 100644
--- a/module/applications/sheets/actors/character.mjs
+++ b/module/applications/sheets/actors/character.mjs
@@ -21,6 +21,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
             rollAttribute: CharacterSheet.#rollAttribute,
             toggleHitPoints: CharacterSheet.#toggleHitPoints,
             toggleStress: CharacterSheet.#toggleStress,
+            toggleArmor: CharacterSheet.#toggleArmor,
             toggleHope: CharacterSheet.#toggleHope,
             toggleLoadoutView: CharacterSheet.#toggleLoadoutView,
             openPack: CharacterSheet.#openPack,
@@ -749,6 +750,16 @@ export default class CharacterSheet extends DHBaseActorSheet {
         await this.document.update({ 'system.resources.stress.value': newValue });
     }
 
+    /**
+     * Toggles ArmorScore resource value.
+     * @type {ApplicationClickAction}
+     */
+    static async #toggleArmor(_, button,element) {
+        const ArmorValue = Number.parseInt(button.dataset.value);
+        const newValue = this.document.system.armor.system.marks.value >= ArmorValue ? ArmorValue - 1 : ArmorValue;
+        await this.document.system.armor.update({ 'system.marks.value': newValue });
+    }
+
     /**
      * Toggles a hope resource value.
      * @type {ApplicationClickAction}
diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs
index 0cd11d15..7ef39a8a 100644
--- a/templates/sheets/actors/character/sidebar.hbs
+++ b/templates/sheets/actors/character/sidebar.hbs
@@ -62,19 +62,23 @@
             </div>
 
             {{#if document.system.armor.system.marks}}
-                <div class="status-bar armor-slots">
+                <div class="status-bar">
                     <div class='status-value'>
-                        <p><input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number"></p>
-                        <p>/</p>
-                        <p class="bar-label">{{document.system.armorScore}}</p>
+                        <div class="slot-bar">
+                        {{#times document.system.armorScore}}
+                            <a class='armor-slot' data-action='toggleArmor'  data-value="{{add this 1}}">
+                                {{#if (gte ../document.system.armor.system.marks.value (add this 1))}}
+                                    <i class="fa-solid fa-shield"></i>
+                                {{else}}
+                                    <i class="fa-solid fa-shield-halved"></i>
+                                {{/if}}
+                            </a>
+                        {{/times}}
+                        </div>
                     </div>
-                    <progress
-                        class='progress-bar stress-color'
-                        value='{{document.system.armor.system.marks.value}}'
-                        max='{{document.system.armorScore}}'
-                    ></progress>
+                    <div class="progress-bar"></div>
                     <div class="status-label">
-                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
+                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}|<span>{{document.system.armor.system.marks.value}} / {{document.system.armorScore}}</span></h4>
                     </div>
                 </div>
             {{else}}