diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index d3553a4d..db7391a4 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -299,8 +299,6 @@ CRYP DAMAGE
 .game .img {
     position: relative;
     height: 100%;
-    min-width: 200px;
-    /*animation: rotate 1s infinite ease-in-out alternate;*/
 }
 
 /*@keyframes rotate {
diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index be711d78..54e1e149 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.css
@@ -5,7 +5,7 @@
 .instance {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: min-content min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 1fr;
 
     grid-template-areas:
         "top    top     info"
@@ -148,13 +148,14 @@
 
 .cryp-list {
     grid-area: cryps;
-    display: flex;
-    flex: 1 1 auto;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .instance-cryp, .instance-cryp-active {
     display: grid;
-    grid-template-rows: min-content min-content min-content 250px min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name   "
         "skills "
@@ -184,15 +185,11 @@
 
 .cryp-list .avatar {
     grid-area: avatar;
-    display: flex;
-    flex: 1 1 auto;
-}
-
-.cryp-list img {
-    justify-self: center;
-    grid-area: avatar;
-    min-width: 150px;
-    max-width: 250px;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
 }
 
 .cryp-list .name {
diff --git a/client/package.json b/client/package.json
index 7f7d5730..a006be4f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,28 +13,22 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "anime": "^0.1.2",
     "animejs": "^3.0.1",
     "async": "^2.6.2",
     "borc": "^2.0.3",
-    "bulma-toast": "^1.2.0",
     "docco": "^0.7.0",
     "izitoast": "^1.4.0",
-    "jdenticon": "^2.1.0",
-    "key": "^0.1.11",
     "keymaster": "^1.6.2",
     "lodash": "^4.17.11",
     "node-sass": "^4.12.0",
     "parcel": "^1.12.3",
-    "particles.js": "^2.0.0",
-    "phaser": "^3.15.1",
-    "preact": "^8.3.1",
-    "preact-redux": "^2.0.3",
-    "redux": "^4.0.0",
-    "redux-diff-logger": "0.0.9"
+    "preact": "^10.0.0-beta.1",
+    "react-redux": "^7.0.3",
+    "redux": "^4.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
+    "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "eslint": "^5.6.0",
@@ -42,5 +36,9 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "jest": "^18.0.0"
+  },
+  "alias": {
+    "react": "preact/compat",
+    "react-dom": "preact/compat"
   }
 }
diff --git a/client/src/app.jsx b/client/src/app.jsx
index 0b41e115..a55e8647 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -1,7 +1,7 @@
 const preact = require('preact');
 // const logger = require('redux-diff-logger');
 
-const { Provider } = require('preact-redux');
+const { Provider } = require('react-redux');
 const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
diff --git a/client/src/components/cryp.spawn.container.js b/client/src/components/cryp.spawn.container.js
index 7dd8bfac..9b743b1b 100644
--- a/client/src/components/cryp.spawn.container.js
+++ b/client/src/components/cryp.spawn.container.js
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const CrypSpawnButton = require('./cryp.spawn.button');
 
diff --git a/client/src/components/game.container.jsx b/client/src/components/game.container.jsx
index 47b34f67..03c421dc 100644
--- a/client/src/components/game.container.jsx
+++ b/client/src/components/game.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const actions = require('../actions');
 
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index 7c6293aa..89bb2305 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
@@ -106,7 +106,7 @@ function GameCryp(props) {
             <figure
                 className="img"
                 onClick={() => selectSkillTarget(cryp.id)} >
-                {crypAvatar(cryp.name)}
+                {crypAvatar(cryp.name, cryp.id)}
                 {combatTextEl}
                 {anim}
             </figure>
diff --git a/client/src/components/header.container.jsx b/client/src/components/header.container.jsx
index a9a27313..93f24dcf 100644
--- a/client/src/components/header.container.jsx
+++ b/client/src/components/header.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const Header = require('./header.component');
 
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index 9d460ff9..a5c75f2c 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const actions = require('../actions');
 const Info = require('./info.component');
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 9a61b3ce..e8fb641b 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx
index a86e9c42..6eefda23 100644
--- a/client/src/components/instance.create.form.jsx
+++ b/client/src/components/instance.create.form.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const { Component } = require('preact');
 
 const addState = connect(
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 00b6a61a..4906520c 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -1,9 +1,9 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
-const { SPECS, STATS, crypAvatar } = require('../utils');
+const { SPECS, STATS, instanceCryp } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -205,7 +205,7 @@ function Cryp(props) {
 
     return (
         <div key={cryp.id} className={crypClass} onClick={onClick} >
-            {crypAvatar(cryp.name)}
+            {instanceCryp(cryp.name, cryp.id)}
             <h2 className="name" >{cryp.name}</h2>
             <div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
                 {skills}
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index 502a61d8..174d8fb4 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index 05bd1561..de57c909 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const preact = require('preact');
 
 const { NULL_UUID } = require('./../utils');
diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx
index 2d36e1d4..8d8a75e1 100644
--- a/client/src/components/login.container.jsx
+++ b/client/src/components/login.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const Login = require('./login.component');
 
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index 027b0e84..0e4c7b28 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const LoginContainer = require('./login.container');
 const GameContainer = require('./game.container');
diff --git a/client/src/components/menu.container.jsx b/client/src/components/menu.container.jsx
index 5e1da54f..bd2fecc1 100644
--- a/client/src/components/menu.container.jsx
+++ b/client/src/components/menu.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const Menu = require('./menu.component');
 const actions = require('./../actions');
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index a4b2fee9..b6bdfb03 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const preact = require('preact');
 const actions = require('../actions');
 
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx
index 5627e368..548a8cc1 100644
--- a/client/src/components/skill.btn.jsx
+++ b/client/src/components/skill.btn.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const actions = require('../actions');
 
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 37a5771e..b844e56e 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const addState = connect(
     ({ game, account, resolution }) => ({ game, account, resolution })
diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx
index 0af80d00..98110e81 100644
--- a/client/src/components/team.jsx
+++ b/client/src/components/team.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 const range = require('lodash/range');
 
 const actions = require('./../actions');
@@ -94,7 +94,7 @@ function Team(args) {
                     className="menu-cryp"
                     style={ { 'border-color': borderColour || 'whitesmoke' } }
                     onClick={() => selectCryp(cryp.id)} >
-                    {crypAvatar(cryp.name)}
+                    {crypAvatar(cryp.name, cryp.id)}
                     <h2>{cryp.name}</h2>
                 </div>
             </div>
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index df699660..555694ea 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -1,6 +1,6 @@
 const preact = require('preact');
 const range = require('lodash/range');
-const { connect } = require('preact-redux');
+const { connect } = require('react-redux');
 
 const shapes = require('./shapes');
 const { convertItem } = require('./../utils');
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 154ab042..57a45058 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -1,6 +1,5 @@
 const toast = require('izitoast');
 const eachSeries = require('async/eachSeries');
-const anime = require('animejs').default;
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -16,26 +15,6 @@ function registerEvents(store) {
         if (!instance) ws.clearInstanceStateTimeout();
     });
 
-
-    // // cryp animations
-    // function crypAnimations() {
-    //     const cryps = document.querySelectorAll('img');
-    //     if (!cryps.length) return window.requestAnimationFrame(crypAnimations);
-    //     return anime({
-    //         targets: 'img',
-    //         translateX: () => anime.random(-20, 20),
-    //         translateY: () => anime.random(0, -40),
-    //         rotate: () => anime.random(-15, 15),
-    //         duration: () => anime.random(5000, 6000),
-    //         delay: () => anime.random(0, 1000),
-    //         direction: 'alternate',
-    //         easing: 'linear',
-    //         loop: true,
-    //     });
-    // }
-    // setInterval(crypAnimations, 10000);
-    // crypAnimations();
-
     function setPing(ping) {
         store.dispatch(actions.setPing(ping));
     }
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 11be5c13..b280b134 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -1,5 +1,8 @@
 const preact = require('preact');
+const { useEffect } = require('preact/hooks');
+
 const get = require('lodash/get');
+const anime = require('animejs').default;
 
 const shapes = require('./components/shapes');
 
@@ -53,9 +56,12 @@ function requestAvatar(name) {
         .then(svg => svg);
 }
 
-function crypAvatar(name) {
+function crypAvatar(name, id) {
+    useEffect(() => animateCryp(id));
+
     return (
         <img
+            id={id}
             src={`/molecules/${genAvatar(name)}.svg`}
             height="500"
             onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
@@ -63,6 +69,18 @@ function crypAvatar(name) {
     );
 }
 
+function instanceCryp(name, id) {
+    useEffect(() => animateCryp(id));
+
+    return (
+        <div
+            className="avatar"
+            id={id}
+            style={{'background-image': `url(/molecules/${genAvatar(name)}.svg)`}}
+        />
+    );
+}
+
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
@@ -519,12 +537,29 @@ function convertItem(v) {
     // return;
 }
 
+function animateCryp(id) {
+    const target = document.getElementById(id);
+    return anime({
+        targets: target,
+        translateX: () => anime.random(-20, 20),
+        translateY: () => anime.random(0, -40),
+        rotate: () => anime.random(-15, 15),
+        duration: () => anime.random(2000, 5000),
+        delay: () => anime.random(0, 2000),
+        direction: 'alternate',
+        easing: 'linear',
+        loop: true,
+    });
+}
+
 module.exports = {
+    animateCryp,
     stringSort,
     convertItem,
     numSort,
     genAvatar,
     crypAvatar,
+    instanceCryp,
     requestAvatar,
     eventClasses,
     getCombatSequence,
diff --git a/ops/fix.molecule.holes.js b/ops/fix.molecule.holes.js
new file mode 100644
index 00000000..f3c07006
--- /dev/null
+++ b/ops/fix.molecule.holes.js
@@ -0,0 +1,12 @@
+const fs = require('fs');
+
+for (let i = 10000; i >= 0; i--) {
+    fs.access(`./../client/assets/molecules/${i}.svg`, (err) => {
+        if (err) {
+            fs.copyFileSync(`./../client/assets/molecules/726.svg`, `./../client/assets/molecules/${i}.svg`);
+            console.log('defaulted', i);
+        }
+        return true;
+    })
+}
+