diff --git a/client/cryps.css b/client/cryps.css
index a9c65df9..c1a8772b 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -399,41 +399,50 @@ header {
     min-width: 300px;
 }
 
+/*
+    INFO
+*/
 .thresholds {
     display: flex;
     flex-direction: row;
     justify-content: left;
 }
 
-.info-skills {
+.info-cryp .skills {
     display: flex;
 }
 
-.info-skills .cryp-skill-btn {
+.info-cryp .skills .cryp-skill-btn {
     border: 1px solid whitesmoke;
 }
 
-.info-stats {
+.info-cryp .stats, .info-cryp .specs {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
 }
 
-.info-stats .speed {
+.info-cryp .stats .speed {
     flex: 1 0 100%;
 }
 
-.info-stats figure {
+.info-cryp .stats figure {
     flex: 0 0 30%;
     border: 0;
     margin: 1em 0;
     text-align: center;
 }
 
-.info-stats .stat-icon {
+.info-cryp .stats .stat-icon {
     height: 2.5em;
 }
 
+.info-cryp .specs figure {
+    border: 0;
+    margin: 1em 0;
+    text-align: center;
+}
+
 
 /* CRYP BOX */
 .cryp-box {
@@ -504,7 +513,7 @@ header {
     border-right-width: 0px;
 }
 
-.skills .cryp-skill-btn:first-child {
+.cryp-list .skills .cryp-skill-btn:first-child {
     border-top-width: 0;
 }
 
@@ -701,7 +710,7 @@ header {
         height: 1em;
     }
 
-    .stats figcaption {
+    .cryp-list .stats figcaption {
         display: none;
     }
 
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 82ebabd1..97098463 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -1,93 +1,92 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS, STATS } = require('../utils');
+const { ITEMS: { SKILLS, COLOURS } } = require('./constants');
+const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
 
 function Info(args) {
     const {
+        activeCryp,
         info,
         sendUnequip,
         instance,
     } = args;
-    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
-    let red = 0; let blue = 0; let green = 0;
-    instance.cryps.forEach(cryp => {
-        red += cryp.colours.red;
-        blue += cryp.colours.blue;
-        green += cryp.colours.green;
-    });
-    const teamColours = { red, blue, green };
-    const [type, value] = info;
-    if (type === 'item') {
-        let itemDetails;
-        if (SKILLS[value]) {
-            itemDetails = SKILLS[value];
-        } else if (SPECS[value]) {
-            itemDetails = SPECS[value];
-        } else if (COLOURS[value]) {
-            itemDetails = COLOURS[value];
-        }
-        return (
-            <div className="instance-info">
-                {value} - {itemDetails.description}
-            </div>
-        );
-    }
 
-    if (type === 'skill') {
-        return (
-            <div className="instance-info">
-                <div>
+    function infoVar(info) {
+        let red = 0; let blue = 0; let green = 0;
+        instance.cryps.forEach(cryp => {
+            red += cryp.colours.red;
+            blue += cryp.colours.blue;
+            green += cryp.colours.green;
+        });
+        const teamColours = { red, blue, green };
+        const [type, value] = info;
+        if (type === 'item') {
+            let itemDetails;
+            if (SKILLS[value]) {
+                itemDetails = SKILLS[value];
+            } else if (SPECS[value]) {
+                itemDetails = SPECS[value];
+            } else if (COLOURS[value]) {
+                itemDetails = COLOURS[value];
+            }
+            return (
+                <div className="info-var">
+                    {value} - {itemDetails.description}
+                </div>
+            );
+        }
+
+        if (type === 'skill') {
+            return (
+                <div className="info-skill">
                     <div> {value.skill} </div>
                     <div> {SKILLS[value.skill].description} </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                     unequip
                     </button>
                 </div>
-            </div>
-        );
-    }
+            );
+        }
 
-    function thresholds(t, spec) {
-        return (
-            SPECS[spec].colours.map((c, i) => (
-                <figure key={i} alt={c.colour}>
-                    {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
-                    <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
-                </figure>
-            ))
-        );
-    }
-
-
-    if (type === 'spec') {
-        const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
-            const threshold = thresholds(t, value.spec);
+        function thresholds(t, spec) {
             return (
-                <div className="thresholds" key={i} alt={t}>
-                    {threshold}
+                SPECS[spec].colours.map((c, i) => (
+                    <figure key={i} alt={c.colour}>
+                        {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
+                        <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
+                    </figure>
+                ))
+            );
+        }
+
+
+        if (type === 'spec') {
+            const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
+                const threshold = thresholds(t, value.spec);
+                return (
+                    <div className="thresholds" key={i} alt={t}>
+                        {threshold}
+                    </div>
+                );
+            }) : null;
+            return (
+                <div className="info-spec">
+                    <div>
+                        <div> {value.spec} </div>
+                        <div> {SPECS[value.spec].description} </div>
+                        {breaks}
+                    </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
+                        unequip
+                    </button>
                 </div>
             );
-        }) : null;
-        return (
-            <div className="instance-info">
-                <div>
-                    <div> {value.spec} </div>
-                    <div> {SPECS[value.spec].description} </div>
-                    {breaks}
-                </div>
-                <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
-                    unequip
-                </button>
-            </div>
-        );
+        }
     }
 
-    if (type === 'cryp') {
-        const cryp = value;
-
-// onClick={() => setInfo('skill', { skill: s, cryp })}
+    function infoCrypElement(cryp) {
+        // onClick={() => setInfo('skill', { skill: s, cryp })}
         const skills = range(0, 4).map(i => {
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
@@ -101,18 +100,45 @@ function Info(args) {
                 <figcaption>{cryp[s.stat].value}</figcaption>
             </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>
+        ));
+
+
         return (
-            <div className="instance-info">
+            <div className="info-cryp">
                 <h5>{cryp.name}</h5>
-                <div className="info-skills">
-                    {skills}
-                </div>
-                <div className="info-stats">
+                <div className="stats">
                     {stats}
                 </div>
+                <div className="specs">
+                    {specs}
+                </div>
+                <div className="skills">
+                    {skills}
+                </div>
             </div>
         );
     }
+
+    const infoCryp = activeCryp
+        ? infoCrypElement(activeCryp)
+        : null;
+
+    const otherInfo = info.length
+        ? infoVar(info)
+        : null;
+
+    return (
+        <div className="instance-info">
+            {infoCryp}
+            {otherInfo}
+        </div>
+    );
 }
 
 module.exports = Info;
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index 469061ff..1b098e82 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -6,12 +6,23 @@ const Info = require('./info.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { info, ws, instance } = state;
+        const {
+            activeCryp,
+            info,
+            ws,
+            instance,
+        } = state;
+
         function sendUnequip(crypId, item) {
             return ws.sendVboxUnequip(instance.instance, crypId, item);
         }
 
-        return { info, sendUnequip, instance };
+        return {
+            activeCryp,
+            info,
+            sendUnequip,
+            instance,
+        };
     }
 /*
     function receiveDispatch(dispatch) {
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 9826a901..f606262a 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -6,15 +6,28 @@ const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const molecule = require('./molecule');
 
-const shapes = require('./shapes');
-const { STATS, SPECS } = require('../utils');
+const { SPECS } = require('../utils');
+
+function Cryp(props) {
+    const {
+        cryp,
+        sendVboxApply,
+        setInfo,
+        activeVar,
+        setActiveCryp,
+    } = props;
 
-function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
     const skills = range(0, 4).map(i => {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
+
+        function skillClick() {
+            setInfo('skill', { skill: s, cryp });
+            setActiveCryp(cryp);
+        }
+
+        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -35,9 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
         e.preventDefault();
 
         if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        document.getElementsByClassName('instance-info')[0].scrollIntoView();
-
-        return setInfo('cryp', cryp);
+        return setActiveCryp(cryp);
     }
 
     const specs = cryp.specs.map((s, i) => (
@@ -75,19 +86,27 @@ function InstanceComponent(args) {
         // account,
         instance,
         quit,
+        // clearInfo,
         sendInstanceReady,
         sendVboxApply,
         setInfo,
         activeVar,
         setActiveVar,
+        setActiveCryp,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
+    const cryps = instance.cryps.map((c, i) => Cryp({
+        cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
+    }));
+
+    function onClick(e) {
+        setActiveVar(null);
+    }
 
     return (
-        <main className="instance" onClick={() => setActiveVar(null)} >
+        <main className="instance" onClick={onClick} >
             <div className="instance-hdr">
                 <button
                     className="instance-btn instance-ui-btn menu-btn left"
diff --git a/client/src/components/instance.container.jsx b/client/src/components/instance.container.jsx
index 8a549ca5..b301af50 100644
--- a/client/src/components/instance.container.jsx
+++ b/client/src/components/instance.container.jsx
@@ -19,7 +19,7 @@ const addState = connect(
         return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
     },
 
-    function receiveDispatch(dispatch, { instance, combiner }) {
+    function receiveDispatch(dispatch) {
         function quit() {
             dispatch(actions.setInstance(null));
         }
@@ -32,7 +32,15 @@ const addState = connect(
             dispatch(actions.setActiveVar(value));
         }
 
-        return { quit, setInfo, setActiveVar };
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
     }
 
 );
diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx
index c208b065..f6646ec3 100644
--- a/client/src/components/vbox.container.jsx
+++ b/client/src/components/vbox.container.jsx
@@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner, reclaiming, activeVar } = state;
+        const { ws, instance, combiner, reclaiming, activeVar, info } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -29,6 +29,7 @@ const addState = connect(
             combiner,
             reclaiming,
             activeVar,
+            info,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,