diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js
index ee63c958..4d99d37e 100644
--- a/client/src/scenes/combat.hitbox.js
+++ b/client/src/scenes/combat.hitbox.js
@@ -12,17 +12,17 @@ const teamHitBox = (scene, size, team, cback) => {
         .rectangle(TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222)
         .setInteractive()
         .setOrigin(0)
-        .on('pointerdown', cback);
+        .on('pointerup', cback);
 };
 
-const crypHitBox = (scene, iter, team, cback) => {
-    const y = Y_PADDING + iter * (CRYP_HEIGHT + (Y_PADDING * 0.5));
-    scene.add
-        .rectangle(TEAM_MARGIN * team, y, CRYP_WIDTH, CRYP_HEIGHT, 0x222222)
-        .setInteractive()
-        .setOrigin(0)
-        .on('pointerdown', cback);
-};
+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);
+        this.setOrigin(0);
+        this.clickHandler = () => cback();
+    }
+}
 
 class CombatHitBox extends Phaser.Scene {
     constructor() {
@@ -39,11 +39,10 @@ class CombatHitBox extends Phaser.Scene {
     }
 
     updateData(parent, key, data) {
-        if (key === 'game' && data && !this.started && data.phase !== 'Start') {
-            this.started = true;
-            this.selectHitBox(data.phase);
+        if (key === 'game' && data) {
+            // In the case that we hit skill phase but teams change we restart
+            if (data.teams.length !== this.teams) this.scene.restart(data.phase);
         }
-
         if (key === 'gamePhase' && data) {
             const shouldUpdate = data !== this.phase;
             if (shouldUpdate) this.scene.restart(data);
@@ -53,8 +52,8 @@ class CombatHitBox extends Phaser.Scene {
     }
 
     selectHitBox(phase) {
-        this.phase = phase;
         const game = this.registry.get('game');
+        this.teams = game.teams.length;
         if (phase === 'Skill') return this.skillHitBox(game);
         if (phase === 'Target') return this.targetHitBox(game);
         return false;
@@ -84,7 +83,6 @@ class CombatHitBox extends Phaser.Scene {
         const account = this.registry.get('account');
         const group = this.scene.get('CombatCryps').cryps;
         const skillScene = this.scene.get('CombatSkills');
-        
         game.teams.forEach(t => t.cryps.forEach((c) => {
             const cback = () => {
                 const { activeTarget } = skillScene;
@@ -97,7 +95,7 @@ class CombatHitBox extends Phaser.Scene {
 
             const crypSpawn = group.children.entries.find(s => s.cryp.id === c.id);
             const team = c.account === account.id ? 0 : 1;
-            crypHitBox(this, crypSpawn.iter, team, cback);
+            this.add.existing(new CrypHitBox(this, crypSpawn.iter, team, cback));
         }));
         this.scene.sendToBack();
     }
diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js
index 129d5b4c..46b49fc3 100644
--- a/client/src/scenes/combat.skills.js
+++ b/client/src/scenes/combat.skills.js
@@ -41,13 +41,14 @@ class CrypSkill extends Phaser.GameObjects.Text {
         const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
         const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
         super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
+        this.origX = x;
+        this.origY = y;
+
         this.cryp = cryp;
         this.skill = skill;
         this.scene = scene;
-
         this.activeSkill = null;
         this.activeTarget = null;
-
         this.setInteractive();
     }
 
@@ -81,11 +82,23 @@ class CombatSkills extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.account = this.registry.get('account');
 
-        this.input.on('pointerup', (pointer, obj) => {
-            if (obj[0] instanceof CrypSkill) {
-                obj[0].clickHandler();
-            }
+        this.input.on('dragstart', (pointer, obj) => {
+            obj.clickHandler();
         });
+
+        this.input.on('drag', (pointer, obj, dragX, dragY) => {
+            obj.setPosition(dragX, dragY);
+        });
+
+        this.input.on('dragend', (pointer, obj) => {
+            const hitBoxScene = this.scene.get('CombatHitBox');
+            hitBoxScene.children.list.forEach((hitBox) => {
+                if (Phaser.Geom.Rectangle
+                    .ContainsPoint(hitBox.getBounds(), pointer.position)) hitBox.clickHandler();
+            });
+            obj.setPosition(obj.origX, obj.origY);
+        });
+
         if (phase === 'animating') return true;
         // can't set this.game cause of phaser class named the same
         const game = this.registry.get('game');
@@ -215,6 +228,7 @@ class CombatSkills extends Phaser.Scene {
             const skillPos = targetTextPosition(sourceCryp.iter, sourceCryp.team);
             const skillObj = new CrypSkill(this, skillPos[0], skillPos[1], skill, cryp);
             this.add.existing(skillObj);
+            this.input.setDraggable(skillObj);
 
             keyboard.on(
                 TARGET_KEY_MAP[i],