diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 8bb4b5db..87c96eeb 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -1,9 +1,9 @@
 const preact = require('preact');
-const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
+const specThresholds = require('./info.thresholds');
 const { INFO } = require('./../constants');
-const { convertItem, removeTier } = require('../utils');
+const { convertItem, removeTier, formatInfo } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
@@ -68,150 +68,54 @@ class InfoComponent extends preact.Component {
             const isSkill = fullInfo.skill;
             const isSpec = fullInfo.spec;
 
-            if (isSkill) {
+            const itemDescription = () => {
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
-                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
-                const itemSourceInfo = itemSource.length
-                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                    : false;
-                const itemRegEx = /(Red|Blue|Green)/;
-                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
-                const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
-                const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
-                return (
-                    <div class="info-skill">
-                        <h2>{fullInfo.item} {fullInfo.cost}b</h2>
-                        <h3> SKILL </h3>
-                        {itemSourceDescription}
-                        <div> {cooldown} </div>
-                        <div>{infoDescription}</div>
-                        {speed}
-                    </div>
-                );
-            }
+                const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
+                return <div>{reactStringReplace(infoDescription, '\n', () => <br />)}</div>;
+            };
 
-            if (isSpec) {
-                let red = 0;
-                let blue = 0;
-                let green = 0;
-                player.constructs.forEach(construct => {
-                    red += construct.colours.red;
-                    blue += construct.colours.blue;
-                    green += construct.colours.green;
-                });
-                const teamColours = { red, blue, green };
-
-                const colourReqs = fullInfo.values.bonuses || [];
-
-                const thresholds = colourReqs.map((bonus, i) => {
-                    const colours = ['red', 'green', 'blue'];
-                    const colourGoals = {
-                        red: [],
-                        green: [],
-                        blue: [],
-                    };
-                    const overFlow = [];
-
-                    colours.forEach(c => {
-                        const colourReq = bonus.req[c];
-                        if (colourReqs === 0) return false;
-
-                        const start = i === 0
-                            ? 0
-                            : colourReqs[i - 1].req[c];
-
-                        const dots = range(start, colourReq).map(j => {
-                            const unmet = teamColours[c] < j + 1;
-
-
-                            const reqClass = unmet
-                                ? 'unmet'
-                                : '';
-
-                            if (j - start > 4) {
-                                overFlow.push(
-                                    <figure key={j} alt={c.colour} class={reqClass} >
-                                        {shapes.vboxColour(c)}
-                                    </figure>
-                                );
-                            } else {
-                                colourGoals[c].push(
-                                    <figure key={j} alt={c.colour} class={reqClass} >
-                                        {shapes.vboxColour(c)}
-                                    </figure>
-                                );
-                            }
-
-                            return true;
-                        });
-
-                        return dots;
-                    });
-
-                    const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
-
-                    const reqClass = reqsMet
-                        ? ''
-                        : 'unmet';
-
-                    const goals = colours.map((c, j) => {
-                        if (colourGoals[c].length) {
-                            return (
-                                <div key={j}>{colourGoals[c]}</div>
-                            );
-                        }
-                        return false;
-                    });
-                    const bonusObj = info.includes('Life')
-                        ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
-                        : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
-                    const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
-                    return (
-                        <div key={i} class="spec-goal">
-                            {goals}
-                            {overFlowObj}
-                            {bonusObj}
-                        </div>
-                    );
-                });
-                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
-                const itemSource = itemInfo.combos.filter(c => c.item === info);
-                let itemSourceInfo = itemSource.length
-                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                    : false;
-                const itemRegEx = /(Red|Blue|Green)/;
-                if (itemSourceInfo) {
-                    while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
-                }
-                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+            if (isSkill || isSpec) {
                 let infoText = info;
                 while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
 
+                const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
+
+                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
+                let itemSourceInfo = itemSource.length
+                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                    : false;
+
+                if (itemSourceInfo) {
+                    while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
+                    const itemRegEx = /(Red|Blue|Green)/;
+                    itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+                }
+
+                const cooldown = isSkill && fullInfo.cooldown ? <div>{fullInfo.cooldown} Turn delay</div> : null;
+
+                const speed =  isSkill
+                    ? <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>
+                    : null;
+
+                const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
+
                 return (
-                    <div class="info-spec">
+                    <div class={isSkill ? 'info-skill' : 'info-spec'}>
                         <h2>{infoText} {fullInfo.cost}b</h2>
-                        <h3>SPEC</h3>
-                        {itemSourceDescription}
-                        <div>{infoDescription}</div>
-                        <div class="thresholds">
-                            {thresholds}
-                        </div>
+                        {header}
+                        {itemSourceInfo}
+                        {cooldown}
+                        {itemDescription()}
+                        {speed}
+                        {thresholds}
                     </div>
                 );
             }
             const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
-            
-            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|POWER|SPEED|LIFE)/;
-            let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-            infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
             return (
                 <div class="info-item">
                     <h2>{fullInfo.item} {cost}</h2>
-                    <div>{infoDescription}</div>
+                    {itemDescription()}
                 </div>
             );
         }
diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/info.thresholds.jsx
new file mode 100644
index 00000000..7136a855
--- /dev/null
+++ b/client/src/components/info.thresholds.jsx
@@ -0,0 +1,96 @@
+const preact = require('preact');
+const range = require('lodash/range');
+const shapes = require('./shapes');
+
+function specThresholds(player, fullInfo, info) {
+    let red = 0;
+    let blue = 0;
+    let green = 0;
+    player.constructs.forEach(construct => {
+        red += construct.colours.red;
+        blue += construct.colours.blue;
+        green += construct.colours.green;
+    });
+    const teamColours = { red, blue, green };
+
+    const colourReqs = fullInfo.values.bonuses || [];
+
+    const thresholds = colourReqs.map((bonus, i) => {
+        const colours = ['red', 'green', 'blue'];
+        const colourGoals = {
+            red: [],
+            green: [],
+            blue: [],
+        };
+        const overFlow = [];
+
+        colours.forEach(c => {
+            const colourReq = bonus.req[c];
+            if (colourReqs === 0) return false;
+
+            const start = i === 0
+                ? 0
+                : colourReqs[i - 1].req[c];
+
+            const dots = range(start, colourReq).map(j => {
+                const unmet = teamColours[c] < j + 1;
+
+
+                const reqClass = unmet
+                    ? 'unmet'
+                    : '';
+
+                if (j - start > 4) {
+                    overFlow.push(
+                        <figure key={j} alt={c.colour} class={reqClass} >
+                            {shapes.vboxColour(c)}
+                        </figure>
+                    );
+                } else {
+                    colourGoals[c].push(
+                        <figure key={j} alt={c.colour} class={reqClass} >
+                            {shapes.vboxColour(c)}
+                        </figure>
+                    );
+                }
+
+                return true;
+            });
+
+            return dots;
+        });
+
+        const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+        const reqClass = reqsMet
+            ? ''
+            : 'unmet';
+
+        const goals = colours.map((c, j) => {
+            if (colourGoals[c].length) {
+                return (
+                    <div key={j}>{colourGoals[c]}</div>
+                );
+            }
+            return false;
+        });
+        const bonusObj = info.includes('Life')
+            ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
+            : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
+        const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
+        return (
+            <div key={i} class="spec-goal">
+                {goals}
+                {overFlowObj}
+                {bonusObj}
+            </div>
+        );
+    });
+    return (
+        <div class="thresholds">
+            {thresholds}
+        </div>
+    );
+}
+
+module.exports = specThresholds;
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 42761a0a..ec49e659 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -240,8 +240,6 @@ function convertItem(v) {
 }
 
 function effectInfo(i) {
-    console.log(i);
-
     function multiplier(s) { // Update later to use server info in future
         if (s === 'CounterAttack') return 120;
         if (s === 'CounterAttack+') return 160;