diff --git a/src/leaflet/icon/PlayerIcon.ts b/src/leaflet/icon/PlayerIcon.ts
index af720af..c054d3b 100644
--- a/src/leaflet/icon/PlayerIcon.ts
+++ b/src/leaflet/icon/PlayerIcon.ts
@@ -125,15 +125,17 @@ export class PlayerIcon extends DivIcon {
 			this._playerArmor = document.createElement('div');
 			this._playerArmor.className = 'player__armor';
 
-			this._playerInfo.appendChild(this._playerHealth);
-			this._playerInfo.appendChild(this._playerArmor);
-
 			this._playerHealthBar = document.createElement('div');
 			this._playerHealthBar.className = 'player__health-bar';
 
 			this._playerArmorBar = document.createElement('div');
 			this._playerArmorBar.className = 'player__armor-bar';
 
+			this._playerHealth.appendChild(this._playerHealthBar);
+			this._playerArmor.appendChild(this._playerArmorBar);
+			this._playerInfo.appendChild(this._playerHealth);
+			this._playerInfo.appendChild(this._playerArmor);
+
 			this._playerHealth.hidden = this._playerArmor.hidden = true;
 		} else {
 			this._playerName.classList.add('playerNameNoHealth');
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 98d28b4..c1e5955 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -293,26 +293,26 @@ input {
 
 		.player__health,
 		.player__armor,
-		.player__health-bg,
-		.player__armor-bg {
+		.player__health-bar,
+		.player__armor-bar {
 			height: 7px;
 		}
 
 		.player__health {
-			background: url(../assets/images/heart.png) repeat-x left center;
-		}
-
-		.player__health-bg {
 			background: url(../assets/images/heart_depleted.png) repeat-x left center;
 		}
 
-		.player__armor {
-			background: url(../assets/images/armor.png) repeat-x left center;
+		.player__health-bar {
+			background: url(../assets/images/heart.png) repeat-x left center;
 		}
 
-		.player__armor-bg {
+		.player__armor {
 			background: url(../assets/images/armor_depleted.png) repeat-x left center;
 		}
+
+		.player__armor-bar {
+			background: url(../assets/images/armor.png) repeat-x left center;
+		}
 	}
 
 	.marker__label {