diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js
index d1c24a6c..427ea88b 100644
--- a/client/src/scenes/combat.cryps.js
+++ b/client/src/scenes/combat.cryps.js
@@ -3,58 +3,73 @@ const genAvatar = require('./avatar');
 
 const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
 
-const CRYP_MARGIN = COMBAT.height() / 5;
+const CRYP_MARGIN = COMBAT.height() / 4.5;
 const TEXT_MARGIN = COMBAT.height() / 35;
-const TEAM_MARGIN = COMBAT.width() * 0.7;
 
-const healthBarDimensions = (team, iter) => {
-    const healthBarX = 1.25 * TEAM_MARGIN * team;
-    const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    const healthBarWidth = TEAM_MARGIN / 10;
+const healthBarDimensions = (team, iter, margin) => {
+    const healthBarWidth = COMBAT.width() * 0.07;
     const healthBarHeight = TEXT_MARGIN / 1.5;
+    const healthBarX = (COMBAT.width() - healthBarWidth) * team;
+    const healthBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
     return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
 };
 
 const crypAvatarText = (team, iter) => {
-    const nameX = 1.25 * TEAM_MARGIN * team;
+    const nameX = COMBAT.width() * team;
     const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    const healthX = 1.25 * TEAM_MARGIN * team;
-    const healthY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    const statusX = 1.25 * TEAM_MARGIN * team;
+    const healthX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
+    const healthY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
+    const statusX = COMBAT.width() * team;
     const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
     return { statusX, statusY, nameX, nameY, healthX, healthY };
 };
 
 const crypEffects = (team, iter) => {
-    const crypEffectsX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
+    const crypEffectsX = team ? COMBAT.width() - COMBAT.width() / 6.5 : COMBAT.width() / 6.5;
     const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter;
     return { crypEffectsX, crypEffectsY };
 };
 
 const crypPosition = (team, iter) => {
-    const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
+    const crypAvatarX = team ? COMBAT.width() - COMBAT.width() / 6 : COMBAT.width() / 6;
     const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
     return { crypAvatarX, crypAvatarY };
 };
 
 
-class HealthBar extends Phaser.GameObjects.Graphics {
-    constructor(scene, cryp, crypHpText) {
+class StatBar extends Phaser.GameObjects.Graphics {
+    constructor(scene, cryp, crypStatText, type) {
         super(scene);
         this.crypObj = cryp;
-        this.hpText = crypHpText;
+        this.type = type;
+        this.statText = crypStatText;
 
-        this.hp = this.crypObj.cryp.hp.base;
-        this.stam = this.crypObj.cryp.stamina.base;
-        this.drawHealthBar();
+        if (type === 'HP') {
+            this.val = this.crypObj.cryp.hp.base;
+            this.max = this.crypObj.cryp.stamina.base;
+            this.margin = 0;
+        } else if (type === 'Armour') {
+            this.val = this.crypObj.cryp.armour.base;
+            this.max = this.crypObj.cryp.armour.base;
+            this.margin = 1;
+        } else if (type === 'Evasion') {
+            this.val = this.crypObj.cryp.evasion.base;
+            this.max = this.crypObj.cryp.evasion.base;
+            this.margin = 2;
+        } else if (type === 'Spell Shield') {
+            this.val = this.crypObj.cryp.spell_shield.base;
+            this.max = this.crypObj.cryp.spell_shield.base;
+            this.margin = 3;
+        }
+        this.drawStatBar();
     }
 
-    drawHealthBar() {
+    drawStatBar() {
         this.clear();
         const {
             healthBarX, healthBarY, healthBarWidth, healthBarHeight,
-        } = healthBarDimensions(this.crypObj.team, this.crypObj.iter);
-        this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
+        } = healthBarDimensions(this.crypObj.team, this.crypObj.iter, this.margin);
+        this.statText.text = `${this.val.toString()} / ${this.max.toString()} ${this.type}`;
         // Draw Black Border
         this.fillStyle(COLOURS.BLACK);
         this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
@@ -62,7 +77,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
         this.fillStyle(COLOURS.WHITE);
         this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
         // Fill the health bar
-        const healthPercentage = this.hp / this.stam;
+        const healthPercentage = this.val / this.max;
         if (healthPercentage < 0.3) {
             this.fillStyle(COLOURS.RED);
         } else if (healthPercentage < 0.65) {
@@ -71,17 +86,17 @@ class HealthBar extends Phaser.GameObjects.Graphics {
             this.fillStyle(0x00ff00); // str8 up green
         }
         const healthWidth = Math.floor(healthBarWidth * healthPercentage);
-        this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4);
+        this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth - 4, healthBarHeight - 4);
     }
 
     takeDamage(value) {
         if (value > 0) {
-            this.hp = (value >= this.hp) ? 0 : this.hp -= value;
+            this.val = (value >= this.val) ? 0 : this.val -= value;
         } else {
-            this.hp = (this.hp - value > this.stam) ? this.stam : this.hp -= value;
+            this.val = (this.val - value > this.max) ? this.max : this.val -= value;
         }
-        if (this.hp === 0) this.crypObj.setKo();
-        this.drawHealthBar();
+        if (this.val === 0) this.crypObj.setKo();
+        this.drawStatBar();
     }
 }
 
@@ -140,12 +155,20 @@ class CrypImage extends Phaser.GameObjects.Image {
         this.team = team;
         this.cryp = cryp;
         this.state = 'deselect';
-
         // Add cryp name
-        scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL);
+        scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
         // Add cryp hp
-        const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
-        this.healthBar = scene.add.existing(new HealthBar(scene, this, healthText));
+        const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL).setOrigin(team, 0);
+        this.healthBar = scene.add.existing(new StatBar(scene, this, healthText, 'HP'));
+        const armourText = scene.add.text(healthX, healthY + TEXT_MARGIN, '', TEXT.NORMAL).setOrigin(team, 0);
+        this.armour = scene.add.existing(new StatBar(scene, this, armourText, 'Armour'));
+        const evasionText = scene.add.text(healthX, healthY + TEXT_MARGIN * 2, '', TEXT.NORMAL).setOrigin(team, 0);
+        this.evasion = scene.add.existing(new StatBar(scene, this, evasionText, 'Evasion'));
+        const ssText = scene.add.text(healthX, healthY + TEXT_MARGIN * 3, '', TEXT.NORMAL).setOrigin(team, 0);
+        this.spellShield = scene.add.existing(new StatBar(scene, this, ssText, 'Spell Shield'));
+
+
+
         this.effects = scene.add.existing(new Effects(scene, team, iter));
         this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
     }
@@ -229,7 +252,7 @@ class CombatCryps extends Phaser.Scene {
                 .find(c => c.cryp.id === cryp.id)
                 || renderCryp(cryp, iter, team);
             crypObj.healthBar.hp = cryp.hp.base;
-            crypObj.healthBar.drawHealthBar();
+            crypObj.healthBar.drawStatBar();
             crypObj.effects.update(cryp.effects);
         };
 
diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js
index b60736bd..71a309a8 100644
--- a/client/src/scenes/combat.hitbox.js
+++ b/client/src/scenes/combat.hitbox.js
@@ -1,15 +1,15 @@
 const Phaser = require('phaser');
 const { POSITIONS: { COMBAT } } = require('./constants');
 
-const CRYP_HEIGHT = COMBAT.height() / 7;
-const CRYP_WIDTH = COMBAT.width() * 0.2;
-const TEAM_MARGIN = COMBAT.width() * 0.775;
-const Y_PADDING = COMBAT.height() * 0.1;
+const CRYP_MARGIN = COMBAT.height() / 4.5;
+const BOX_HEIGHT = CRYP_MARGIN * 0.8;
+const BOX_WIDTH = COMBAT.width() * 0.2;
+
 
 class CrypHitBox extends Phaser.GameObjects.Rectangle {
     constructor(scene, iter, team, cback) {
-        const y = Y_PADDING + iter * (CRYP_HEIGHT + (Y_PADDING * 0.5));
-        super(scene, TEAM_MARGIN * team, y, CRYP_WIDTH, CRYP_HEIGHT, 0x222222);
+        const y = COMBAT.y() + COMBAT.height() * 0.05 + CRYP_MARGIN * iter;
+        super(scene, (COMBAT.width() - BOX_WIDTH) * team, y, BOX_WIDTH, BOX_HEIGHT, 0x222222);
         this.setOrigin(0);
         this.clickHandler = () => cback();
     }
diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js
index 593327e9..7cc402f6 100644
--- a/client/src/scenes/combat.js
+++ b/client/src/scenes/combat.js
@@ -100,7 +100,6 @@ class Combat extends Phaser.Scene {
     }
 
     addLeaveGame() {
-
         const leaveGame = () => this.cleanUp();
         this.input.keyboard.on('keydown_BACKSPACE', leaveGame, 0, this);
         const buttonProps = {
diff --git a/client/src/scenes/elements/box.js b/client/src/scenes/elements/box.js
index b18184a9..b95e6287 100644
--- a/client/src/scenes/elements/box.js
+++ b/client/src/scenes/elements/box.js
@@ -69,7 +69,7 @@ function rgbToHex(rgb) {
 
 class BoxEffect extends Phaser.GameObjects.Graphics {
     constructor(scene, x, y, width, height, colour, tag) {
-        super(scene, x, y, width, height);
+        super(scene);
         this.tag = tag;
         this.customPipeline = scene.game.renderer.addPipeline(tag, new CustomPipeline(scene.game));
         this.customPipeline.setFloat2('resolution', 1600, 1000);