diff --git a/client/demo.js b/client/demo.js
index 98bcd3af..03e08ef8 100644
--- a/client/demo.js
+++ b/client/demo.js
@@ -19,7 +19,20 @@ const DEMO_UNIT_DATA = {
         missionData:  {
             fuel: 50,
             flags: {human: false},
-            ammo: [],
+            ammo: [
+                {
+                    count: 4,
+                    desc: {
+                        displayName: "AIM-120"
+                    }
+                },
+                {
+                    count: 2,
+                    desc: {
+                        displayName: "AIM-7"
+                    }
+                }
+            ],
             targets: [],
             hasTask: true,
             coalition: "blue"
diff --git a/client/public/stylesheets/unitinfopanel.css b/client/public/stylesheets/unitinfopanel.css
index 3c9be34b..82a109d2 100644
--- a/client/public/stylesheets/unitinfopanel.css
+++ b/client/public/stylesheets/unitinfopanel.css
@@ -56,5 +56,5 @@
 }
 
 #unit-info-panel #loadout-container .loadout-item::before {
-	content: attr( data-loadout-item ) ' \d7  ' attr( data-loadout-qty );
+	content: attr( data-loadout-qty )'\d7  ' attr( data-loadout-item )  ;
 }
\ No newline at end of file
diff --git a/client/src/panels/unitinfopanel.ts b/client/src/panels/unitinfopanel.ts
index 1b95e60b..3080edca 100644
--- a/client/src/panels/unitinfopanel.ts
+++ b/client/src/panels/unitinfopanel.ts
@@ -58,26 +58,18 @@ export class UnitInfoPanel extends Panel {
             this.#task.classList.toggle("neutral", unit.getMissionData().coalition === "neutral");
             
             /* Add the loadout elements */
-            var els = this.getElement().getElementsByClassName("js-loadout-element");
-            while (els.length > 0)
-                this.#loadoutContainer.removeChild(els[0]);
-  
-            for (let index in unit.getMissionData().ammo) 
-                this.#addLoadoutElement(unit, index);
+            this.#loadoutContainer.replaceChildren(...unit.getMissionData().ammo.map(
+                (ammo: any) => {
+                    var el = document.createElement("div");
+                    el.classList.add("pill", "loadout-item");
+                    el.dataset.loadoutQty = ammo.count;
+                    el.dataset.loadoutItem = ammo.desc.displayName;
+                    return el;
+                }
+            ))
         }
     }
 
-    #addLoadoutElement(unit: Unit, index: string)
-    {
-        var ammo = unit.getMissionData().ammo[index];
-        var displayName = ammo.desc.displayName;
-        var amount = ammo.count;
-        var el = document.createElement("div")
-        el.classList.add("js-loadout-element", "ol-rectangular-container-dark")
-        el.innerText = amount + "x" + displayName;
-        this.#loadoutContainer.appendChild(el);
-    }
-
     #onUnitsSelection(units: Unit[]){
         if (units.length == 1)
             this.show();
diff --git a/client/views/unitinfopanel.ejs b/client/views/unitinfopanel.ejs
index 0e4dd390..e6ae79a6 100644
--- a/client/views/unitinfopanel.ejs
+++ b/client/views/unitinfopanel.ejs
@@ -22,10 +22,7 @@
             </dl>
 
             <div id="loadout-container" class="ol-group wrap">
-                <div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-120"></div>
-                <div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-54"></div>
-                <div class="pill loadout-item" data-loadout-qty="2" data-loadout-item="AIM-9P"></div>
-                <div class="pill loadout-item" data-loadout-qty="895" data-loadout-item="bullets"></div>
+                <!-- Here the loadout elements will be shown -->
             </div>
 
         </div>