diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js
index 427ea88b..2e39dc00 100644
--- a/client/src/scenes/combat.cryps.js
+++ b/client/src/scenes/combat.cryps.js
@@ -1,27 +1,19 @@
 const Phaser = require('phaser');
 const genAvatar = require('./avatar');
+const StatBar = require('./elements/statbar');
 
-const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
+const { DELAYS, TEXT, POSITIONS: { COMBAT } } = require('./constants');
 
 const CRYP_MARGIN = COMBAT.height() / 4.5;
 const TEXT_MARGIN = COMBAT.height() / 35;
 
-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 = COMBAT.width() * team;
     const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    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 };
+    return { statusX, statusY, nameX, nameY };
 };
 
 const crypEffects = (team, iter) => {
@@ -37,69 +29,6 @@ const crypPosition = (team, iter) => {
 };
 
 
-class StatBar extends Phaser.GameObjects.Graphics {
-    constructor(scene, cryp, crypStatText, type) {
-        super(scene);
-        this.crypObj = cryp;
-        this.type = type;
-        this.statText = crypStatText;
-
-        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();
-    }
-
-    drawStatBar() {
-        this.clear();
-        const {
-            healthBarX, healthBarY, healthBarWidth, healthBarHeight,
-        } = 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);
-        // White fill
-        this.fillStyle(COLOURS.WHITE);
-        this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
-        // Fill the health bar
-        const healthPercentage = this.val / this.max;
-        if (healthPercentage < 0.3) {
-            this.fillStyle(COLOURS.RED);
-        } else if (healthPercentage < 0.65) {
-            this.fillStyle(COLOURS.YELLOW);
-        } else {
-            this.fillStyle(0x00ff00); // str8 up green
-        }
-        const healthWidth = Math.floor(healthBarWidth * healthPercentage);
-        this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth - 4, healthBarHeight - 4);
-    }
-
-    takeDamage(value) {
-        if (value > 0) {
-            this.val = (value >= this.val) ? 0 : this.val -= value;
-        } else {
-            this.val = (this.val - value > this.max) ? this.max : this.val -= value;
-        }
-        if (this.val === 0) this.crypObj.setKo();
-        this.drawStatBar();
-    }
-}
-
 class Effects extends Phaser.GameObjects.Group {
     constructor(scene, team, iter) {
         super(scene);
@@ -138,9 +67,7 @@ class CrypImage extends Phaser.GameObjects.Image {
     constructor(scene, team, iter, cryp) {
         // Get coords
         const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
-        const {
-            statusX, statusY, nameX, nameY, healthX, healthY,
-        } = crypAvatarText(team, iter);
+        const { statusX, statusY, nameX, nameY } = crypAvatarText(team, iter);
 
         // Cryp display
         // const avatar = team ? 'magmar' : 'alk';
@@ -157,17 +84,11 @@ class CrypImage extends Phaser.GameObjects.Image {
         this.state = 'deselect';
         // Add cryp name
         scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
-        // Add cryp hp
-        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'));
-
-
+        // Add cryp stat bars
+        this.healthBar = scene.add.existing(new StatBar(scene, this, 'HP'));
+        this.armour = scene.add.existing(new StatBar(scene, this, 'Armour'));
+        this.evasion = scene.add.existing(new StatBar(scene, this, 'Evasion'));
+        this.spellShield = scene.add.existing(new StatBar(scene, this, 'Spell Shield'));
 
         this.effects = scene.add.existing(new Effects(scene, team, iter));
         this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
diff --git a/client/src/scenes/elements/combat.statbar.js b/client/src/scenes/elements/combat.statbar.js
new file mode 100644
index 00000000..25491172
--- /dev/null
+++ b/client/src/scenes/elements/combat.statbar.js
@@ -0,0 +1,86 @@
+const Phaser = require('phaser');
+const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('.././constants');
+
+const CRYP_MARGIN = COMBAT.height() / 4.5;
+const TEXT_MARGIN = COMBAT.height() / 35;
+
+const statBarDimensions = (team, iter, margin) => {
+    const statBarWidth = COMBAT.width() * 0.07;
+    const statBarHeight = TEXT_MARGIN / 1.5;
+    const statBarX = (COMBAT.width() - statBarWidth) * team;
+    const statBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
+    return { statBarX, statBarY, statBarWidth, statBarHeight };
+};
+
+const statTextCoord = (team, iter, margin) => {
+    const statTextX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
+    const statTextY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
+    return { statTextX, statTextY };
+};
+
+
+class StatBar extends Phaser.GameObjects.Graphics {
+    constructor(scene, cryp, type) {
+        super(scene);
+        this.crypObj = cryp;
+        this.type = type;
+
+        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;
+        }
+        const { statTextX, statTextY } = statTextCoord(cryp.team, cryp.iter, this.margin);
+        this.statText = scene.add.text(statTextX, statTextY, '', TEXT.NORMAL).setOrigin(cryp.team, 0);
+        this.drawStatBar();
+    }
+
+    drawStatBar() {
+        this.clear();
+        const {
+            statBarX, statBarY, statBarWidth, statBarHeight,
+        } = statBarDimensions(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(statBarX, statBarY, statBarWidth, statBarHeight);
+        // White fill
+        this.fillStyle(COLOURS.WHITE);
+        this.fillRect(statBarX + 2, statBarY + 2, statBarWidth - 4, statBarHeight - 4);
+        // Fill the health bar
+        const statPercentage = this.val / this.max;
+        if (statPercentage < 0.3) {
+            this.fillStyle(COLOURS.RED);
+        } else if (statPercentage < 0.65) {
+            this.fillStyle(COLOURS.YELLOW);
+        } else {
+            this.fillStyle(0x00ff00); // str8 up green
+        }
+        const statWidth = Math.floor(statBarWidth * statPercentage);
+        this.fillRect(statBarX + 2, statBarY + 2, statWidth, statBarHeight - 4);
+    }
+
+    takeDamage(value) {
+        if (value > 0) {
+            this.val = (value >= this.val) ? 0 : this.val -= value;
+        } else {
+            this.val = (this.val - value > this.max) ? this.max : this.val -= value;
+        }
+        if (this.val === 0) this.crypObj.setKo();
+        this.drawStatBar();
+    }
+}
+
+module.exports = StatBar;