diff --git a/html-client/cryps.css b/html-client/cryps.css
old mode 100755
new mode 100644
index 30bf22b3..28331fdc
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -218,6 +218,11 @@ button.left:hover, button.left:focus {
     margin-top: -2.5em;
 }
 
+.cryp-box .particle {
+    position: fixed;
+    z-index: -10;
+}
+
 .cryp-box figure {
     margin: 0;
     flex: 0 1 50%;
diff --git a/html-client/src/components/cryp.list.container.js b/html-client/src/components/cryp.list.container.js
deleted file mode 100644
index 6ae16e7a..00000000
--- a/html-client/src/components/cryp.list.container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypList = require('./cryp.list.component');
-const actions = require('./../actions');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, cryps, selectedCryps } = state;
-        return { cryps, selectedCryps };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setSelectedCryps(crypIds) {
-            dispatch(actions.setSelectedCryps(crypIds));
-        }
-        return { setSelectedCryps };
-    }
-);
-
-module.exports = addState(CrypList);
diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx
index 1bf0dab9..bf3a060d 100644
--- a/html-client/src/components/game.component.jsx
+++ b/html-client/src/components/game.component.jsx
@@ -103,6 +103,7 @@ function GamePanel(props) {
                     key={cryp.id}
                     style={ activeSkill ? { cursor: 'pointer' } : {}}
                     className="cryp-box" >
+                    <div id={`particles-${cryp.id}`} className="particle"> </div>
                     <figure
                         className="img"
                         onClick={() => selectSkillTarget(cryp.id)} >
diff --git a/html-client/src/components/game.container.js b/html-client/src/components/game.container.js
deleted file mode 100644
index 64149b37..00000000
--- a/html-client/src/components/game.container.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Game = require('./game.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, game, account, activeSkill, activeIncoming } = state;
-
-        function selectSkillTarget(targetCrypId) {
-            if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
-            }
-            return false;
-        }
-
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
-        }
-
-        function selectIncomingTarget(crypId) {
-            if (activeIncoming) {
-                return ws.sendGameTarget(game.id, crypId, activeIncoming);
-            }
-            return false;
-        }
-
-        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setActiveSkill(crypId, skill) {
-            dispatch(actions.setActiveSkill(crypId, skill));
-        }
-
-        function setActiveIncoming(skillId) {
-            dispatch(actions.setActiveIncoming(skillId));
-        }
-
-        function quit() {
-            dispatch(actions.setGame(null));
-        }
-
-        return { setActiveSkill, setActiveIncoming, quit };
-    }
-
-);
-
-module.exports = addState(Game);
diff --git a/html-client/src/components/game.container.jsx b/html-client/src/components/game.container.jsx
index 64149b37..2e083676 100644
--- a/html-client/src/components/game.container.jsx
+++ b/html-client/src/components/game.container.jsx
@@ -1,8 +1,13 @@
+import 'particles.js/particles';
+
 const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
 const Game = require('./game.component');
+const config = require('./particles.config');
+
+const particlesJS = window.particlesJS;
 
 const addState = connect(
     function receiveState(state) {
@@ -33,6 +38,7 @@ const addState = connect(
     function receiveDispatch(dispatch) {
         function setActiveSkill(crypId, skill) {
             dispatch(actions.setActiveSkill(crypId, skill));
+            particlesJS(`particles-${crypId}`, config);
         }
 
         function setActiveIncoming(skillId) {
diff --git a/html-client/src/components/header.component.jsx b/html-client/src/components/header.component.jsx
index e60ceb00..0dd5888a 100644
--- a/html-client/src/components/header.component.jsx
+++ b/html-client/src/components/header.component.jsx
@@ -1,7 +1,6 @@
 // eslint-disable-next-line
 const preact = require('preact');
 const LoginContainer = require('./login.container');
-const ParticleContainer = require('./particles.container');
 
 function renderHeader() {
     return (
@@ -10,7 +9,6 @@ function renderHeader() {
                 cryps.gg
             </h1>
             <LoginContainer />
-            <ParticleContainer />
         </header>
     );
 }
diff --git a/html-client/src/components/particles.config.js b/html-client/src/components/particles.config.js
index 74888a4a..651cae39 100644
--- a/html-client/src/components/particles.config.js
+++ b/html-client/src/components/particles.config.js
@@ -1,6 +1,6 @@
 const config = {
     particles: {
-        number: { value: 80, density: { enable: true, value_area: 800 } },
+        number: { value: 300, density: { enable: true, value_area: 800 } },
         color: { value: '#ffffff' },
         shape: {
             type: 'circle',
@@ -36,28 +36,6 @@ const config = {
             attract: { enable: false, rotateX: 600, rotateY: 1200 },
         },
     },
-    interactivity: {
-        detect_on: 'canvas',
-        events: {
-            onhover: { enable: true, mode: 'repulse' },
-            onclick: { enable: true, mode: 'push' },
-            resize: true,
-        },
-        modes: {
-            grab: { distance: 400, line_linked: { opacity: 1 } },
-            bubble: {
-                distance: 400,
-                size: 40,
-                duration: 2,
-                opacity: 8,
-                speed: 3,
-            },
-            repulse: { distance: 200, duration: 0.4 },
-            push: { particles_nb: 4 },
-            remove: { particles_nb: 2 },
-        },
-    },
-    retina_detect: true,
 };
 
 module.exports = config;
diff --git a/html-client/src/components/particles.container.jsx b/html-client/src/components/particles.container.jsx
deleted file mode 100644
index 3f187558..00000000
--- a/html-client/src/components/particles.container.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import 'particles.js/particles';
-
-const preact = require('preact');
-const config = require('./particles.config');
-
-const particlesJS = window.particlesJS;
-
-class ParticleContainer extends preact.Component {
-    componentDidMount() {
-        particlesJS('particles-js', config);
-    }
-
-    render() {
-        return (
-            <div id="particles-js"> </div>
-        );
-    }
-}
-module.exports = ParticleContainer;