diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 4553fb93..cb9bc886 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -3,6 +3,10 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 
+const { STATS } = require('../utils');
+
+console.log(STATS);
+
 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
 function GamePanel(props) {
@@ -82,12 +86,9 @@ function GamePanel(props) {
             );
         });
 
-        const stats = [
-            { stat: 'hp', colour: '#1FF01F' },
-            { stat: 'red_shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', colour: '#3498db' },
-        ].map((s, i) => (
+        const stats = Object.values(STATS).map((s, i) => (
             <figure key={i} alt={s.stat}>
+                {s.svg(`stat-icon ${s.colour}`)}
                 <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
             </figure>
         ));
@@ -127,12 +128,9 @@ function GamePanel(props) {
     }
 
     function OpponentCryp(cryp, i) {
-        const stats = [
-            { stat: 'hp', colour: '#1FF01F' },
-            { stat: 'red_shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', colour: '#3498db' },
-        ].map((s, j) => (
+        const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
             <figure key={j} alt={s.stat}>
+                {s.svg(`stat-icon ${s.colour}`)}
                 <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
             </figure>
         ));
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 6631ae01..93a1c683 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -30,7 +30,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         return sendVboxApply(cryp.id, item);
     }
 
-    const stats = STATS.map((s, i) => (
+    const stats = Object.values(STATS).map((s, i) => (
         <figure key={i} alt={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
             <figcaption>{cryp[s.stat].value}</figcaption>
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index ce861c41..2a4cf361 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -54,15 +54,15 @@ function requestAvatar(name) {
 
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
-const STATS = [
-    { stat: 'hp', colour: 'green', svg: shapes.square },
-    { stat: 'green_damage', colour: 'green', svg: shapes.diamond },
-    { stat: 'red_shield', colour: 'red', svg: shapes.hexagon },
-    { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
-    { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
-    { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
-    { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
-];
+const STATS = {
+    hp: { stat: 'hp', colour: 'green', svg: shapes.square },
+    greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.diamond },
+    redShield: { stat: 'red_shield', colour: 'red', svg: shapes.hexagon },
+    redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
+    blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
+    blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
+    speed: { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
+};
 
 module.exports = {
     stringSort,