diff --git a/client/cryps.css b/client/cryps.css
index 275d7883..1fe6e278 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -457,7 +457,7 @@ header {
 
 .cryp-box-top {
     display: flex;
-    flex: 1 1 80%;
+    flex: 1 1 75%;
     width: 100%;
     justify-content: center;
     align-items: stretch;
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 0ebc6a82..d976fca5 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -137,7 +137,7 @@ function GamePanel(props) {
     function Cryp(cryp) {
         const ko = cryp.hp.value === 0 ? 'ko' : '';
 
-        const skills = range(0, 4).map(i => Skill(cryp, i));
+        const skills = range(0, 3).map(i => Skill(cryp, i));
 
         const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
             <figure key={j} alt={s.stat}>
@@ -226,7 +226,7 @@ function GamePanel(props) {
     const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
 
     const mobileSkills = activeCryp
-        ? range(0, 4).map(i => Skill(activeCryp, i, true))
+        ? range(0, 3).map(i => Skill(activeCryp, i, true))
         : (<div/>);
 
     return (
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index e76347c9..1219003e 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -10,6 +10,7 @@ function Info(args) {
         info,
         sendUnequip,
         instance,
+        setInfo,
     } = args;
 
     function infoVar([type, value]) {
@@ -86,11 +87,18 @@ function Info(args) {
 
     function infoCrypElement(cryp) {
         // onClick={() => setInfo('skill', { skill: s, cryp })}
-        const skills = range(0, 4).map(i => {
+        const skills = range(0, 3).map(i => {
+            const skill = cryp.skills[i];
+
+            function skillClick() {
+                if (!skill) return false;
+                return setInfo('skill', { skill: skill.skill, cryp });
+            }
+
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
                 : (<span>&nbsp;</span>);
-            return <button key={i} className="cryp-skill-btn right" >{s}</button>;
+            return <button key={i} className="cryp-skill-btn" onClick={skillClick} >{s}</button>;
         });
 
         const stats = Object.values(STATS).map((s, j) => (
@@ -100,12 +108,18 @@ function Info(args) {
             </figure>
         ));
 
-        const specs = cryp.specs.map((s, i) => (
-            <figure key={i}>
-                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-                <figcaption>{SPECS[s].caption}</figcaption>
-            </figure>
-        ));
+        const specs = cryp.specs.map((s, i) => {
+            function specClick() {
+                setInfo('spec', { spec: s, cryp });
+            }
+
+            return (
+                <figure key={i} onClick={specClick} >
+                    {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                    <figcaption>{SPECS[s].caption}</figcaption>
+                </figure>
+            );
+        });
 
 
         return (
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index 1b098e82..b4cd2779 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -1,7 +1,6 @@
 const { connect } = require('preact-redux');
 
-// const actions = require('../actions');
-
+const actions = require('../actions');
 const Info = require('./info.component');
 
 const addState = connect(
@@ -23,13 +22,24 @@ const addState = connect(
             sendUnequip,
             instance,
         };
-    }
-/*
-    function receiveDispatch(dispatch) {
+    },
 
-        return { };
+    function receiveDispatch(dispatch) {
+        function setInfo(item, value) {
+            dispatch(actions.setInfo([item, value]));
+        }
+
+        function setActiveVar(value) {
+            dispatch(actions.setActiveVar(value));
+        }
+
+
+        return {
+            setInfo,
+            setActiveVar,
+        };
     }
-*/
+
 );
 
 module.exports = addState(Info);
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index e87d715c..71b8c219 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -18,7 +18,7 @@ function Cryp(props) {
         setActiveCryp,
     } = props;
 
-    const skills = range(0, 4).map(i => {
+    const skills = range(0, 3).map(i => {
         const skill = cryp.skills[i];
         const s = skill
             ? skill.skill
@@ -26,7 +26,7 @@ function Cryp(props) {
 
         function skillClick() {
             if (!skill) return false;
-            setInfo('skill', { skill, cryp });
+            setInfo('skill', { skill: skill.skill, cryp });
             return setActiveCryp(cryp);
         }
 
diff --git a/server/src/vbox.rs b/server/src/vbox.rs
index 21a9de06..1b40c4f5 100644
--- a/server/src/vbox.rs
+++ b/server/src/vbox.rs
@@ -582,7 +582,7 @@ pub fn vbox_apply(params: VboxApplyParams, tx: &mut Transaction, account: &Accou
             let skill = var.into_skill().ok_or(format_err!("var {:?} has no associated skill", var))?;
             let cryp = player.cryp_get(params.cryp_id)?;
             // done here because i teach them a tonne of skills for tests
-            let max_skills = 4;
+            let max_skills = 3;
             if cryp.skills.len() >= max_skills {
                 return Err(format_err!("cryp at max skills ({:?})", max_skills));
             }