diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js
index 1e58097b..cf56d7b1 100644
--- a/client/src/scenes/statsheet.js
+++ b/client/src/scenes/statsheet.js
@@ -8,7 +8,34 @@ const WIDTH = MENU_MAIN.width();
 const HEIGHT = MENU_MAIN.height();
 const TEXT_MARGIN = 24;
 
-const SKILL_WIDTH = Math.floor(WIDTH / 20);
+const SKILL_WIDTH = Math.floor(WIDTH / 10);
+
+
+class DeleteHitBox extends Phaser.GameObjects.Rectangle {
+    constructor(scene, x, y) {
+        super(scene, x, y, SKILL_WIDTH, SKILL_WIDTH, 0x222222);
+        this.setOrigin(0);
+        this.itemSelect = () => this.setFillStyle(0xff0000);
+        this.itemDeselect = () => this.setFillStyle(0x222222);
+    }
+}
+
+const itemCheckHitbox = (scene, pointer) => {
+    const { list } = scene.scene.get('MenuCrypList').children;
+    const hitboxes = list.filter(c => c.cryp)
+        .concat(scene.children.list.filter(c => c instanceof DeleteHitBox));
+
+    let found;
+    for (let i = 0; i < hitboxes.length; i += 1) {
+        if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
+            found = hitboxes[i];
+        } else {
+            hitboxes[i].itemDeselect();
+        }
+    }
+
+    return found;
+};
 
 class StatSheet extends Phaser.Scene {
     constructor() {
@@ -26,6 +53,11 @@ class StatSheet extends Phaser.Scene {
     create(cryp) {
         this.registry.events.on('changedata', this.updateData, this);
         this.cryp = cryp;
+
+        const del = this.add.existing(new DeleteHitBox(this, X + WIDTH * 0.7, Y + HEIGHT * 0.6));
+        this.add.text(del.getCenter().x, del.getCenter().y, 'Unlearn', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+
         this.add.text(X, Y, cryp.name, TEXT.HEADER);
 
         const crypStat = (stat, i) => {
@@ -47,15 +79,34 @@ class StatSheet extends Phaser.Scene {
         CRYP_STATS.forEach(crypStat);
         this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);
         const knownSkill = (skill, i) => {
-            const SKILL_X = X + WIDTH * 0.2 + WIDTH * 0.06 * i;
+            const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i;
             const SKILL_Y = Y + HEIGHT * 0.15;
-            const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_WIDTH);
-            itemObj.on('pointerdown', () => {
-                console.log(skill.skill);
-            });
+            const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
+            // itemObj.on('pointerdown', () => );
+            this.input.setDraggable(itemObj);
             this.add.existing(itemObj);
         };
         cryp.skills.forEach(knownSkill);
+
+        this.input.on('drag', (pointer, item, dragX, dragY) => {
+            if (!(item instanceof Item)) return false;
+            item.setPosition(dragX, dragY);
+            const hitBox = itemCheckHitbox(this, pointer);
+            if (hitBox) hitBox.itemSelect();
+            return true;
+        });
+
+        this.input.on('dragend', (pointer, item) => {
+            if (!(item instanceof Item)) return false;
+            item.setPosition(item.origX, item.origY);
+            const hitBox = itemCheckHitbox(this, pointer);
+            if (hitBox) {
+                hitBox.itemDeselect();
+                // add socket function for unlearn here
+                console.log(`delete: ${item.item}`);
+            }
+            return true;
+        });
     }
 
     displaySkillText(x, y, description, pointer) {