diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js
index 379f4775..9b1c86d8 100644
--- a/client/src/scenes/constants.js
+++ b/client/src/scenes/constants.js
@@ -8,7 +8,7 @@ const headerWidth = () => CANVAS_WIDTH();
 const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05);
 
 const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3);
-const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
+const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() - headerHeight());
 const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3);
 const menuCrypListY = () => headerHeight();
 
diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js
index 54d6b512..07e820b3 100644
--- a/client/src/scenes/elements/item.js
+++ b/client/src/scenes/elements/item.js
@@ -23,7 +23,6 @@ class Item extends Phaser.GameObjects.Container {
     constructor(scene, item, index, x, y, width, height) {
         super(scene, x, y);
 
-        this.state = 'deselect';
         this.scene = scene;
         this.item = item;
         this.index = index;
diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js
old mode 100755
new mode 100644
diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js
index 7a65a509..5a98367a 100644
--- a/client/src/scenes/menu.cryps.list.js
+++ b/client/src/scenes/menu.cryps.list.js
@@ -2,9 +2,10 @@ const Phaser = require('phaser');
 
 const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
 const genAvatar = require('./avatar');
+const Item = require('./elements/item');
 
-const BOX_WIDTH = Math.floor(CRYP_LIST.width() / 5);
-const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 5);
+const BOX_WIDTH = Math.floor(CRYP_LIST.width());
+const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.5);
 
 const TEXT_MARGIN = 24;
 
@@ -39,12 +40,10 @@ class MenuCrypList extends Phaser.Scene {
         this.crypGroup = this.add.group();
         const addCryp = (cryp, i) => {
             const ROW_X = CRYP_LIST.x();
-            const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 3;
+            const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 1.1;
 
 
-            const ACTIVE_FILL = cryp.active
-                ? 1
-                : 0.2;
+            const ACTIVE_FILL = 0.2;
 
             const FILL = Object.values(COLOURS)[i];
             // Selection of cryps
@@ -54,7 +53,7 @@ class MenuCrypList extends Phaser.Scene {
 
             // Cryp avatar and interaction box
             const crypInteract = this.add
-                .rectangle(ROW_X, ROW_Y + BOX_HEIGHT * 2, BOX_WIDTH * 4, BOX_HEIGHT * 0.5, FILL, ACTIVE_FILL)
+                .rectangle(ROW_X, ROW_Y, BOX_WIDTH, BOX_HEIGHT, FILL, ACTIVE_FILL)
                 .setInteractive()
                 .setOrigin(0)
                 .on('pointerdown', selectFn);
@@ -66,29 +65,22 @@ class MenuCrypList extends Phaser.Scene {
             };
             crypInteract.cryp = cryp;
 
-            // Cryp information box (names + skills)
-            const crypInfo = this.add
-                .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 4, BOX_HEIGHT * 2, FILL, ACTIVE_FILL)
-                .setOrigin(0)
-                .setInteractive()
-                .on('pointerdown', selectFn);
-
-            const crypInfoText = this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
+            const crypInfoText = this.add.text(crypInteract.x + crypInteract.width / 5, crypInteract.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
                 .setOrigin(0.5, 0.5);
 
             const crypImage = this.add.image(
-                crypInfo.getCenter().x + crypInfo.width / 4,
-                crypInfo.getCenter().y,
+                crypInteract.getCenter().x - crypInteract.width / 4,
+                crypInteract.getCenter().y,
                 'aztec',
                 genAvatar(cryp.name)
             );
 
-            this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]);
+            this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
 
             const crypGems = (stat, j) => {
                 // Placeholder for when gems are implemented
                 const gemText = this.add
-                    .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
+                    .text(crypInteract.getCenter().x, crypInteract.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
                     .setOrigin(0.5, 0.5);
                 this.crypGroup.add(gemText);
             };
@@ -101,10 +93,13 @@ class MenuCrypList extends Phaser.Scene {
             CRYP_GEMS.forEach(crypGems);
 */
             const crypSkill = (stat, j) => {
-                const skillText = this.add
-                    .text(crypInfo.getCenter().x - crypInfo.width / 4, crypInfo.y + TEXT_MARGIN * (3 + j), `${stat.skill}`, TEXT.NORMAL)
-                    .setOrigin(0.5, 0.5);
-                this.crypGroup.add(skillText);
+                const SKILL_WIDTH = Math.floor(BOX_WIDTH / 2);
+                const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 6);
+                const SKILL_X = crypInteract.getCenter().x + crypInteract.width / 4;
+                const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.1 * (j + 0.6);
+                const itemObj = new Item(this, stat.skill, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
+                this.add.existing(itemObj);
+                this.crypGroup.add(itemObj);
             };
             cryp.skills.forEach(crypSkill);
         };