@@ -209,8 +209,7 @@ header {
 .menu-cryps {
    display: flex;
    flex-flow: row wrap;
-
-    flex: 1;
+    flex: 1 1 100%;
 }

 .menu-cryp-ctr {
@@ -228,14 +227,12 @@ header {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
-}
-
-.spawn-btn .menu-cryp h2 {
-    flex: 1;
+    justify-content: center;
 }

 .spawn-btn input {
    flex: 1 1 100%;
+    width: 100%;
    margin: 1em;
 }

@@ -267,7 +264,6 @@ header {

    display: flex;
    align-content: flex-start;
-    height: 100%;
 }

 .menu-instance-btn {
@@ -579,6 +575,7 @@ header {

    .cryp-box-top figure {
        flex: 1;
+        font-size: 60%;
    }

    .menu-instance-btn {
@@ -605,6 +602,12 @@ header {
        margin: 0.5em;
    }

+    .spawn-btn button {
+        margin: 1em;
+        padding: 0.2em;
+        width: 100%;
+    }
+
    .cryp-box .skills {
        display: none;
    }
@@ -2,9 +2,8 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');

-const InstanceListContainer = require('./instance.list.container');
 const LoginContainer = require('./login.container');
-const CrypListContainer = require('./cryp.list.container');
+const MenuContainer = require('./menu.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');

@@ -44,10 +43,7 @@ function renderBody(props) {
    }

    return (
-        <main>
-            <CrypListContainer />
-            <InstanceListContainer />
-        </main>
+        <MenuContainer />
    );
 }

@@ -18,6 +18,7 @@ function CrypList(args) {
        cryps,
        selectedCryps,
        setSelectedCryps,
+        sendPlayerMmCrypsSet,
        sendInstanceJoin,
        sendCrypSpawn
    } = args;
@@ -42,6 +43,15 @@ function CrypList(args) {
    }

    const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+    const mmSet = (
+        <button
+            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendPlayerMmCrypsSet()}>
+            Set Matchmaking Team
+        </button>
+    );
    const instanceJoin = (
        <button
            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
@@ -84,6 +94,7 @@ function CrypList(args) {

    return (
        <div className="menu-cryps">
+            {mmSet}
            {instanceJoin}
            {crypPanels}
            {spawnButtons}
@@ -5,7 +5,7 @@ const actions = require('./../actions');

 const addState = connect(
    function receiveState(state) {
-        const { ws, cryps, selectedCryps } = state;
+        const { ws, cryps, selectedCryps, instances } = state;

        function sendInstanceJoin() {
            if (selectedCryps.length) {
@@ -14,19 +14,52 @@ const addState = connect(
            return false;
        }

+        function sendPlayerMmCrypsSet() {
+            if (selectedCryps.length) {
+                return ws.sendPlayerMmCrypsSet(selectedCryps);
+            }
+            return false;
+        }
+
        function sendCrypSpawn(name) {
            return ws.sendCrypSpawn(name);
        }

-        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn };
+        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn, sendPlayerMmCrypsSet };
    },

    function receiveDispatch(dispatch) {
        function setSelectedCryps(crypIds) {
            dispatch(actions.setSelectedCryps(crypIds));
        }
-        return { setSelectedCryps };
+
+        function setActiveInstance(instance) {
+            dispatch(actions.setInstance(instance));
+        }
+
+        return {
+            setSelectedCryps,
+            setActiveInstance,
+        };
    }
 );

 module.exports = addState(CrypList);
+
+
+        function sendCrypsSet() {
+            console.log('set crypos');
+            // return ws.sendGamePvp(crypIds);
+        }
+
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+
+        return { instances, sendCrypsSet, sendInstanceJoin };
+    },
+
@@ -1,19 +1,110 @@
-// eslint-disable-next-line
 const preact = require('preact');
+const range = require('lodash/range');

-const { NULL_UUID } = require('./../utils');
+const { stringSort, NULL_UUID } = require('./../utils');
+const molecule = require('./molecule');
+const SpawnButton = require('./spawn.button');

-function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function CrypList(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        sendPlayerMmCrypsSet,
+        sendInstanceJoin,
+        sendCrypSpawn
+    } = args;
+
+    if (!cryps) return <div></div>;
+
+    // redux limitation + suggested workaround
+    // so much for dumb components
+    function selectCryp(id) {
+        // remove
+        const i = selectedCryps.findIndex(sid => sid === id);
+        if (i > -1) {
+            selectedCryps[i] = null;
+            return setSelectedCryps(selectedCryps);
+        }
+
+        // window insert
+        const insert = selectedCryps.findIndex(j => j === null);
+        if (insert === -1) return setSelectedCryps([id, null, null]);
+        selectedCryps[insert] = id;
+        return setSelectedCryps(selectedCryps);
+    }
+
+    const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+    const mmSet = (
+        <button
+            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendPlayerMmCrypsSet()}>
+            Set Matchmaking Team
+        </button>
+    );
+    const instanceJoin = (
+        <button
+            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendInstanceJoin()}>
+            Join New Instance
+        </button>
+    );
+
+
+    const crypPanels = cryps.sort(idSort).map(cryp => {
+        const colour = selectedCryps.indexOf(cryp.id);
+        const selected = colour > -1;
+
+        const borderColour = selected ? COLOURS[colour] : '#000000';
+
+        return (
+            <div
+                key={cryp.id}
+                className="menu-cryp-ctr">
+                <div
+                    className="menu-cryp"
+                    style={ { 'border-color': borderColour || 'whitesmoke' } }
+                    onClick={() => selectCryp(cryp.id)} >
+                    <figure className="img">
+                        {molecule}
+                    </figure>
+                    <h2>{cryp.name}</h2>
+                </div>
+            </div>
+        );
+    });
+
+    const spawnButtonsNum = cryps.length < 3
+        ? (3 - cryps.length)
+        : 1;
+
+    const spawnButtons = range(spawnButtonsNum)
+        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
+
+    return (
+        <div className="menu-cryps">
+            {mmSet}
+            {instanceJoin}
+            {crypPanels}
+            {spawnButtons}
+        </div>
+    );
+}
+
+function instanceList({ instances, setActiveInstance }) {
    if (!instances) return <div>...</div>;

-    // const instanceJoin = (
-    //     <button
-    //         className="menu-instance-btn full right"
-    //         onClick={() => sendInstanceJoin()}>
-    //         Join New Instance
-    //     </button>
-    // );
-
    const instancePanels = instances.map(instance => {
        const globalInstance = instance.instance === NULL_UUID;
        const name = globalInstance
@@ -0,0 +1,143 @@
+const preact = require('preact');
+const range = require('lodash/range');
+
+const { NULL_UUID } = require('./../utils');
+
+const { stringSort } = require('./../utils');
+const molecule = require('./molecule');
+const SpawnButton = require('./spawn.button');
+
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function Menu(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        setActiveInstance,
+        sendPlayerMmCrypsSet,
+        sendInstanceJoin,
+        sendCrypSpawn,
+        instances,
+    } = args;
+
+    function instanceList() {
+        if (!instances) return <div>...</div>;
+
+        const instancePanels = instances.map(instance => {
+            const globalInstance = instance.instance === NULL_UUID;
+            const name = globalInstance
+                ? 'Global Matchmaking'
+                : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
+
+            return (
+                <button
+                    className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
+                    key={instance.id}
+                    onClick={() => setActiveInstance(instance)}>
+                    {name}
+                </button>
+            );
+        });
+
+        const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+        const mmSet = (
+            <button
+                className={`menu-instance-btn left ${instanceJoinHidden ? 'hidden' : ''}`}
+                disabled={instanceJoinHidden}
+                onClick={() => sendPlayerMmCrypsSet()}>
+                Set Matchmaking Team
+            </button>
+        );
+        const instanceJoin = (
+            <button
+                className={`menu-instance-btn right ${instanceJoinHidden ? 'hidden' : ''}`}
+                disabled={instanceJoinHidden}
+                onClick={() => sendInstanceJoin()}>
+                Join New Instance
+            </button>
+        );
+
+        return (
+            <section className="menu-instance-list" >
+                {instancePanels}
+                {mmSet}
+                {instanceJoin}
+            </section>
+        );
+    }
+
+    function crypList() {
+        if (!cryps) return <div></div>;
+
+        // redux limitation + suggested workaround
+        // so much for dumb components
+        function selectCryp(id) {
+            // remove
+            const i = selectedCryps.findIndex(sid => sid === id);
+            if (i > -1) {
+                selectedCryps[i] = null;
+                return setSelectedCryps(selectedCryps);
+            }
+
+            // window insert
+            const insert = selectedCryps.findIndex(j => j === null);
+            if (insert === -1) return setSelectedCryps([id, null, null]);
+            selectedCryps[insert] = id;
+            return setSelectedCryps(selectedCryps);
+        }
+
+        const crypPanels = cryps.sort(idSort).map(cryp => {
+            const colour = selectedCryps.indexOf(cryp.id);
+            const selected = colour > -1;
+
+            const borderColour = selected ? COLOURS[colour] : '#000000';
+
+            return (
+                <div
+                    key={cryp.id}
+                    className="menu-cryp-ctr">
+                    <div
+                        className="menu-cryp"
+                        style={ { 'border-color': borderColour || 'whitesmoke' } }
+                        onClick={() => selectCryp(cryp.id)} >
+                        <figure className="img">
+                            {molecule}
+                        </figure>
+                        <h2>{cryp.name}</h2>
+                    </div>
+                </div>
+            );
+        });
+
+        const spawnButtonsNum = cryps.length < 3
+            ? (3 - cryps.length)
+            : 1;
+
+        const spawnButtons = range(spawnButtonsNum)
+            .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
+
+        return (
+            <div className="menu-cryps">
+                {crypPanels}
+                {spawnButtons}
+            </div>
+        );
+    }
+
+    return (
+        <main>
+            {instanceList()}
+            {crypList()}
+        </main>
+    );
+}
+
+module.exports = Menu;
@@ -0,0 +1,54 @@
+const { connect } = require('preact-redux');
+
+const Menu = require('./menu.component');
+const actions = require('./../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, cryps, selectedCryps, instances } = state;
+
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+        function sendPlayerMmCrypsSet() {
+            if (selectedCryps.length) {
+                return ws.sendPlayerMmCrypsSet(selectedCryps);
+            }
+            return false;
+        }
+
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        return {
+            cryps,
+            selectedCryps,
+            sendInstanceJoin,
+            sendCrypSpawn,
+            sendPlayerMmCrypsSet,
+            instances,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setSelectedCryps(crypIds) {
+            dispatch(actions.setSelectedCryps(crypIds));
+        }
+
+        function setActiveInstance(instance) {
+            dispatch(actions.setInstance(instance));
+        }
+
+        return {
+            setSelectedCryps,
+            setActiveInstance,
+        };
+    }
+);
+
+module.exports = addState(Menu);
@@ -77,8 +77,8 @@ function createSocket(events) {
        send({ method: 'cryp_unspec', params: { id, spec } });
    }

-    function sendPlayerCrypsSet(instanceId, crypIds) {
-        send({ method: 'player_cryps_set', params: { instance_id: instanceId, cryp_ids: crypIds } });
+    function sendPlayerMmCrypsSet(crypIds) {
+        send({ method: 'player_mm_cryps_set', params: { cryp_ids: crypIds } });
    }

    function sendPlayerState(instanceId) {
@@ -309,7 +309,7 @@ function createSocket(events) {
        sendInstanceJoin,
        sendInstanceReady,
        sendInstanceScores,
-        sendPlayerCrypsSet,
+        sendPlayerMmCrypsSet,
        sendPlayerState,
        sendVboxAccept,
        sendVboxApply,