diff --git a/client/assets/alakazam-f.png b/client/assets/alakazam-f.png
new file mode 100644
index 00000000..f792d270
Binary files /dev/null and b/client/assets/alakazam-f.png differ
diff --git a/client/assets/aztec.jpg b/client/assets/aztec.jpg
new file mode 100644
index 00000000..e9700f56
Binary files /dev/null and b/client/assets/aztec.jpg differ
diff --git a/client/assets/magmar.png b/client/assets/magmar.png
new file mode 100644
index 00000000..c59cad7a
Binary files /dev/null and b/client/assets/magmar.png differ
diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js
new file mode 100644
index 00000000..4d3adea9
--- /dev/null
+++ b/client/src/scenes/cryp.list.js
@@ -0,0 +1,42 @@
+const Phaser = require('phaser');
+
+const crypRow = require('./cryp.row');
+
+class CrypList extends Phaser.Scene {
+    constructor() {
+        super({ key: 'CrypList', active: true });
+    }
+
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+
+        const cryps = this.registry.get('cryps');
+        this.graphics = this.add.graphics();
+        this.graphics.originX = 0;
+        this.graphics.originY = 0;
+        this.renderCryps(cryps);
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'cryps') {
+            return this.scene.restart();
+        }
+        return true;
+    }
+
+    renderCryps(cryps) {
+        if (!cryps) return true;
+
+        const crypRows = cryps.forEach((cryp, i) => {
+            crypRow(this, cryp, i);
+        });
+
+        // seal the boxes in and stop rerendering them
+        this.graphics.generateTexture();
+
+        return true;
+    }
+}
+
+module.exports = CrypList;
diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js
new file mode 100644
index 00000000..514c57dd
--- /dev/null
+++ b/client/src/scenes/cryp.row.js
@@ -0,0 +1,26 @@
+const Phaser = require('phaser');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+const xPos = i => 0;
+const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
+
+function crypRow(list, cryp, i) {
+    const X_ORIGIN = xPos(i);
+    const Y_ORIGIN = yPos(i);
+
+    list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
+    list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
+    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+
+    return true;
+}
+
+module.exports = crypRow;
diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js
new file mode 100644
index 00000000..79bddaf9
--- /dev/null
+++ b/client/src/scenes/cryps.js
@@ -0,0 +1,38 @@
+const Phaser = require('phaser');
+
+const CrypList = require('./cryp.list');
+const Menu = require('./menu');
+// const Passives = require('./passives');
+
+function renderCryps(store) {
+    const config = {
+        type: Phaser.AUTO,
+        // parent: 'cryps',
+        backgroundColor: '#181818',
+        resolution: window.devicePixelRatio,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        physics: {
+            default: 'arcade',
+            arcade: {
+                debug: false,
+                gravity: { y: 0 },
+            },
+        },
+        scene: [
+            Menu,
+            CrypList,
+        ],
+    };
+
+    const game = new Phaser.Game(config);
+
+    store.subscribe(() => {
+        const state = store.getState();
+        game.registry.set('cryps', state.cryps);
+    });
+
+    window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);
+}
+
+module.exports = renderCryps;
diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js
new file mode 100644
index 00000000..0012d59e
--- /dev/null
+++ b/client/src/scenes/menu.js
@@ -0,0 +1,13 @@
+const Phaser = require('phaser');
+
+class Menu extends Phaser.Scene {
+    constructor(props) {
+        super({ key: 'Menu', active: true });
+    }
+
+    create() {
+        this.add.text(0, 0, 'cryps.gg',  { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+    }
+}
+
+module.exports = Menu;
diff --git a/client/src/scenes/passive.data.edge.js b/client/src/scenes/passive.data.edge.js
new file mode 100755
index 00000000..fdbf2460
--- /dev/null
+++ b/client/src/scenes/passive.data.edge.js
@@ -0,0 +1,121 @@
+const passiveEdges = [
+    ['CMED1', 'CSTAT7'],
+    ['CSTAT7', 'CSTAT8'],
+    ['CSTAT8', 'CSTAT9'],
+    ['CSTAT9', 'CMED20'],
+    ['CMED20', 'CSTAT10'],
+    ['CSTAT10', 'CSTAT11'],
+    ['CSTAT11', 'CSTAT12'],
+    ['CSTAT12', 'CMED21'],
+    ['CMED21', 'CSTAT15'],
+    ['CSTAT15', 'CMED22'],
+    ['CMED21', 'CSTAT14'],
+    ['CSTAT14', 'CLRG4'],
+    ['CLRG4', 'CSTAT16'],
+    ['CSTAT16', 'CMED22'],
+    ['CMED22', 'CSTAT17'],
+    ['CMED23', 'CSTAT17'],
+    ['CMED23', 'CSTAT13'],
+    ['CSTAT13', 'CLRG4'],
+    ['CSTAT17', 'CSTAT18'],
+    ['CSTAT18', 'CSTAT19'],
+    ['CSTAT18', 'CSTAT20'],
+    ['CSTAT20', 'CSTAT21'],
+    ['CSTAT21', 'CSTAT22'],
+    ['CSTAT22', 'CMED9'],
+    ['CMED9', 'CSTAT23'],
+    ['CSTAT23', 'CSTAT24'],
+    ['CSTAT24', 'CLRG2'],
+    ['CLRG2', 'CSTAT25'],
+    ['CSTAT25', 'CMED8'],
+    ['CMED8', 'CSTAT26'],
+    ['CSTAT26', 'CLRG1'],
+    ['CLRG1', 'CSTAT27'],
+    ['CSTAT27', 'CSTAT28'],
+    ['CMED7', 'CSTAT28'],
+    ['CMED7', 'CSTAT29'],
+    ['CSTAT29', 'CSTAT30'],
+    ['CSTAT30', 'CSTAT31'],
+    ['CSTAT31', 'CSTAT32'],
+    ['CSTAT32', 'CSTAT33'],
+    ['CSTAT31', 'CSTAT34'],
+    ['CSTAT34', 'CSTAT35'],
+    ['CSTAT34', 'CSTAT36'],
+    ['CSTAT36', 'CSTAT37'],
+    ['CSTAT20', 'CSTAT36'],
+    ['CMED6', 'CSTAT33'],
+    ['CMED25', 'CSTAT18'],
+    ['CMED25', 'CMED24'],
+    ['CMED24', 'CLRG3'],
+    ['CSTAT6', 'CSTAT7'],
+    ['CSTAT6', 'CMED18'],
+    ['CMED2', 'CSDMG1'],
+    ['CSDMG1', 'CSDMG2'],
+    ['CSDMG2', 'CSDMG3'],
+    ['CMED18', 'CSDMG3'],
+    ['CMED2', 'CHEAL1'],
+    ['CHEAL1', 'CHEAL2'],
+    ['CHEAL2', 'CHEAL3'],
+    ['CHEAL3', 'CMED18'],
+    ['CMED18', 'CSDMG4'],
+    ['CSDMG4', 'CSDMG5'],
+    ['CSDMG5', 'CSDMG6'],
+    ['CSDMG5', 'CSTAT5'],
+    ['CSTAT5', 'CSTAT4'],
+    ['CSTAT4', 'CMED3'],
+    ['CMED3', 'CSTAT1'],
+    ['CSTAT1', 'CSTAT2'],
+    ['CSTAT1', 'CSTAT3'],
+    ['CSTAT2', 'CMED4'],
+    ['CMED4', 'CSDMG10'],
+    ['CSDMG10', 'CMED5'],
+    ['CMED5', 'CSDMG11'],
+    ['CSDMG11', 'CMED6'],
+    ['CMED4', 'CPHYS2'],
+    ['CPHYS2', 'CMED5'],
+    ['CMED5', 'CPHYS3'],
+    ['CPHYS3', 'CMED6'],
+    ['CSTAT3', 'CMED10'],
+    ['CMED10', 'CPHYS1'],
+    ['CPHYS1', 'CMED11'],
+    ['CMED10', 'CHEAL14'],
+    ['CHEAL14', 'CMED11'],
+    ['CMED11', 'CHEAL15'],
+    ['CHEAL15', 'CMED13'],
+    ['CMED13', 'CSDMG6'],
+    ['CPHYS4', 'CMED11'],
+    ['CPHYS4', 'CMED13'],
+    ['CPHYS4', 'CPHYS5'],
+    ['CPHYS5', 'CPHYS6'],
+    ['CPHYS6', 'CMED12'],
+    ['CPHYS6', 'CSTAT34'],
+    ['CMED12', 'CPHYS7'],
+    ['CPHYS7', 'CSTAT33'],
+    ['CMED13', 'CSDMG7'],
+    ['CSDMG7', 'CSDMG9'],
+    ['CSDMG7', 'CMED15'],
+    ['CSDMG9', 'CSTAT37'],
+    ['CSDMG9', 'CSTAT35'],
+    ['CMED18', 'CHEAL4'],
+    ['CHEAL4', 'CHEAL5'],
+    ['CHEAL5', 'CHEAL6'],
+    ['CHEAL6', 'CHEAL7'],
+    ['CHEAL7', 'CHEAL8'],
+    ['CHEAL7', 'CHEAL9'],
+    ['CHEAL8', 'CMED20'],
+    ['CHEAL9', 'CMED16'],
+    ['CHEAL5', 'CMED19'],
+    ['CMED16', 'CHEAL11'],
+    ['CHEAL11', 'CHEAL12'],
+    ['CHEAL12', 'CHEAL13'],
+    ['CHEAL13', 'CMED17'],
+    ['CHEAL13', 'CSTAT19'],
+    ['CMED15', 'CHEAL10'],
+    ['CHEAL10', 'CMED16'],
+    ['CMED15', 'CSDMG8'],
+    ['CSDMG8', 'CMED16'],
+    ['CMED14', 'CMED15'],
+    ['CMED8', 'CNOTE'],
+];
+
+module.exports = passiveEdges;
diff --git a/client/src/scenes/passive.data.node.js b/client/src/scenes/passive.data.node.js
new file mode 100755
index 00000000..f1da3ef7
--- /dev/null
+++ b/client/src/scenes/passive.data.node.js
@@ -0,0 +1,104 @@
+const passiveNodes = [
+    { x: 860, y: 1011, id: 'CMED1', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Slow Effect'},
+    { x: 905, y: 970, id: 'CSTAT7', alloc: false, text: '+2 Chaos Stat'},
+    { x: 940, y: 917.5, id: 'CSTAT8', alloc: false, text: '+2 Chaos Stat'},
+    { x: 950, y: 1172.5, id: 'CMED2', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
+    { x: 955, y: 1120, id: 'CSDMG1', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 970, y: 872.5, id: 'CSTAT9', alloc: false, text: '+2 Chaos Stat'},
+    { x: 975, y: 1012.5, id: 'CSTAT6', alloc: false, text: '+2 Chaos Stat'},
+    { x: 995, y: 1062.5, id: 'CSDMG3', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1000, y: 1150, id: 'CHEAL1', alloc: false, text: '+5% Increased Healing'},
+    { x: 1005, y: 812.5, id: 'CMED20', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
+    { x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false, text: '+5% Increased Healing'},
+    { x: 1036.5, y: 896.5, id: 'CMED19', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
+    { x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
+    { x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false, text: '+5% Increased Healing'},
+    { x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1055, y: 1327.5, id: 'CMED3', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Banish Skills'},
+    { x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false, text: '+5% Increased Healing'},
+    { x: 1067.5, y: 995, id: 'CHEAL4', alloc: false, text: '+5% Increased Healing'},
+    { x: 1070, y: 1250, id: 'CSTAT4', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false, text: '+5% Increased Healing'},
+    { x: 1087.5, y: 700, id: 'CSTAT11', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false, text: '+5% Increased Healing'},
+    { x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1115, y: 875, id: 'CHEAL7', alloc: false, text: '+5% Increased Healing'},
+    { x: 1130, y: 640, id: 'CSTAT12', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1180, y: 1247.5, id: 'CMED10', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
+    { x: 1180, y: 950, id: 'CMED14', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
+    { x: 1195, y: 875, id: 'CHEAL9', alloc: false, text: '+5% Increased Healing'},
+    { x: 1196.5, y: 635, id: 'CMED21', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
+    { x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false, text: '+5% Increased Healing'},
+    { x: 1231.5, y: 590, id: 'CSTAT14', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1235, y: 772.5, id: 'CHEAL12', alloc: false, text: '+5% Increased Healing'},
+    { x: 1240, y: 1225, id: 'CPHYS1', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1240, y: 1322.5, id: 'CMED4', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
+    { x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false, text: '+5% Increased Healing'},
+    { x: 1260, y: 917.5, id: 'CHEAL10', alloc: false, text: '+5% Increased Healing'},
+    { x: 1263, y: 520, id: 'CLRG4', alloc: false, text: 'Damaging spells have a 20% chance to inflict slow'},
+    { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Speed for Damaging Spells'},
+    { x: 1275, y: 1167.5, id: 'CMED11', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
+    { x: 1275, y: 947.5, id: 'CMED15', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Damaging Spells'},
+    { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
+    { x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false, text: '+5% Increased Healing'},
+    { x: 1280, y: 732.5, id: 'CHEAL13', alloc: false, text: '+5% Increased Healing'},
+    { x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1284, y: 640, id: 'CSTAT15', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1315, y: 762.5, id: 'CMED17', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
+    { x: 1326.5, y: 590, id: 'CSTAT16', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1346.5, y: 635, id: 'CMED22', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
+    { x: 1348.5, y: 535, id: 'CSTAT13', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1355, y: 1322.5, id: 'CMED5', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
+    { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1400, y: 807.5, id: 'CMED24', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
+    { x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false, text: '+5% Increased Spell Damage'},
+    { x: 1410, y: 532.5, id: 'CMED23', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Effect of Slow'},
+    { x: 1420, y: 732.5, id: 'CSTAT19', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1430, y: 1205, id: 'CPHYS7', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1447.5, y: 765, id: 'CMED25', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
+    { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
+    { x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1455, y: 1147.5, id: 'CMED12', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
+    { x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1457.5, y: 975, id: 'CSTAT37', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1462.5, y: 825, id: 'CLRG3', alloc: false, text: '20% critical strike chance for spells'},
+    { x: 1485, y: 640, id: 'CSTAT17', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1500, y: 1110, id: 'CPHYS6', alloc: false, text: '+2% Reduced Physical Damage Taken'},
+    { x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1555, y: 962.5, id: 'CSTAT36', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1555, y: 847.5, id: 'CSTAT20', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1555, y: 732.5, id: 'CSTAT18', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false, text: 'When you take physical damage there is a 20% chance to heal for 150% of physical damage taken'},
+    { x: 1612.5, y: 955, id: 'CLRG2', alloc: false, text: 'Your healing spells have a 20% chance to increase ally speed by 100%'},
+    { x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1705, y: 960, id: 'CSTAT24', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1712.5, y: 850, id: 'CMED9', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
+    { x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
+    { x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
+    { x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false, text: '+2 Chaos Stat'},
+    { x: 1830, y: 1032.5, id: 'CNOTE', alloc: false, text: 'Increases duration of banish skills by 1 turn. Your chaos skills gain 20% increased speed for each successful banish. '},
+];
+
+module.exports = passiveNodes;
diff --git a/client/src/scenes/passive.node.js b/client/src/scenes/passive.node.js
new file mode 100755
index 00000000..b44f0b63
--- /dev/null
+++ b/client/src/scenes/passive.node.js
@@ -0,0 +1,58 @@
+const Phaser = require('phaser');
+
+class PassiveNode extends Phaser.GameObjects.Sprite {
+    constructor(scene, x, y, id, alloc, text) {
+        super(scene, x, y);
+        this.setTexture('eye');
+        this.scene = scene;
+        this.alloc = alloc;
+        this.text = text;
+        this.id = id;
+        this.setPosition(x, y);
+
+        const nodeNoDigits = this.id.replace(/[0-9]/g, '');
+        switch (nodeNoDigits) {
+            case 'CNOTE':
+                this.setScale(0.25);
+                break;
+            case 'CLRG':
+                this.setScale(0.15);
+                break;
+            case 'CMED':
+                this.setScale(0.1);
+                break;
+            default:
+                this.setScale(0.05);
+        }
+        if (this.alloc) {
+            this.setTint(0xff0000);
+        }
+    }
+
+    allocate(alloc) {
+        if (alloc !== undefined) {
+            this.alloc = alloc;
+        } else {
+            this.alloc = !this.alloc;
+        }
+        this.updateNode();
+    }
+
+    updateNode() {
+        if (!this.alloc) {
+            this.clearTint();
+        } else {
+            this.setTint(0xff0000);
+        }
+
+        for (let i = 0; i < this.scene.passiveNodeData.length; i += 1) {
+            if (this.scene.passiveNodeData[i].id === this.id) {
+                this.scene.passiveNodeData[i].alloc = this.alloc;
+                break;
+            }
+        }
+        this.scene.drawPassiveEdges();
+    }
+}
+
+module.exports = PassiveNode;
diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js
new file mode 100644
index 00000000..1869d8c9
--- /dev/null
+++ b/client/src/scenes/passives.js
@@ -0,0 +1,126 @@
+const Phaser = require('phaser');
+const PassiveNode = require('./passive.node');
+const passiveDataNode = require('./passive.data.node');
+const passiveDataEdge = require('./passive.data.edge');
+
+// Passive tree generator - proof of concept visuals need work
+// Mouse click hold to move, Q + E to zoom in and out
+// Press 'A' to reset allocated passive nodes
+
+class Passives extends Phaser.Scene {
+    preload() {
+        this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
+        this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
+    }
+
+    create() {
+        this.background = this.add.image(0, 0, 'background');
+        this.background.setScale(5);
+        this.background.setInteractive();
+        this.graphics = this.add.graphics();
+        this.nodeText = this.add.text(10000, 10000, 'grep', {
+            fontSize: '32px',
+            fontFamily: 'Arial',
+            color: '#ffffff',
+            backgroundColor: '#000000',
+        }).setPadding(32);
+
+        this.passiveNodeData = passiveDataNode;
+        this.passiveEdgeData = passiveDataEdge;
+        this.addPassiveNodes();
+        this.drawPassiveEdges();
+        this.addCanmeraControl();
+    }
+
+    addPassiveNodes() {
+        this.passiveNodes = [];
+        this.passiveNodeData.forEach((n) => {
+            this.passiveNodes[n.id] = this.add.existing(
+                new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
+            ).setInteractive();
+        });
+
+        this.input.on('pointerover', (pointer, gameObjects) => {
+            if (gameObjects[0] instanceof PassiveNode) {
+                if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
+                this.nodeText.x = pointer.x + this.cameras.main.scrollX;
+                this.nodeText.y = pointer.y + this.cameras.main.scrollY;
+                this.nodeText.text = gameObjects[0].text;
+            } else {
+                this.nodeText.text = '';
+            }
+        });
+        this.input.on('pointerout', (pointer, gameObjects) => {
+            if (gameObjects[0] instanceof PassiveNode) {
+                if (!gameObjects[0].alloc) gameObjects[0].clearTint();
+            }
+        });
+        this.input.on('pointerup', (pointer, gameObjects) => {
+            if (Math.abs(pointer.upX - pointer.downX) < 5
+                    && Math.abs(pointer.upY - pointer.downY) < 5) {
+                // Check cursor hasn't significantly moved during point allocation
+                // If panning and mouse release is on node it won't allocate
+                if (gameObjects[0] instanceof PassiveNode) {
+                    gameObjects[0].allocate();
+                }
+            }
+        });
+
+        this.input.keyboard.on('keydown_A', () => {
+            this.updatePassives(); // Will update nodes from state
+        }, 0, this);
+    }
+
+    drawPassiveEdges() {
+        this.graphics.clear();
+        this.passiveEdgeData.forEach((e) => {
+            const drawEdge = this.passiveNodeData.filter(n => (
+                e[0] === n.id || e[1] === n.id
+            ));
+            if (drawEdge[0].alloc && drawEdge[1].alloc) {
+                this.graphics.lineStyle(10, 0xfff00f, 0.2);
+            } else {
+                this.graphics.lineStyle(2, 0xffffff, 0.2);
+            }
+            // console.log(drawEdge);
+            this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
+        });
+    }
+
+    addCanmeraControl() {
+        this.input.on('pointermove', (pointer) => {
+            if (this.pan) {
+                const points = pointer.getInterpolatedPosition(2);
+                this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
+                this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
+            }
+        }, this);
+        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
+            camera: this.cameras.main,
+            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
+            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
+            acceleration: 0.005,
+            drag: 0.0005,
+            maxSpeed: 0.001,
+        });
+    }
+
+    updatePassives() {
+        this.passiveNodeData.forEach((n) => {
+            this.passiveNodes[n.id].alloc = false;
+            this.passiveNodes[n.id].updateNode();
+        });
+        // This function will  be modified to just update from state
+        // State will update n.alloc instead of false
+    }
+
+    camPan(bool) {
+        this.pan = bool;
+    }
+
+    update(delta) {
+        this.controls.update(delta);
+    }
+}
+
+module.exports = Passives;