diff --git a/client/src/animations.jsx b/client/src/animations.jsx
index c94b47d0..b2e01552 100644
--- a/client/src/animations.jsx
+++ b/client/src/animations.jsx
@@ -2,8 +2,8 @@ const preact = require('preact');
 
 function animationDivs(classes) {
     switch (classes) {
-        case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-cast"></div>);
-        case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-hit"></div>);
+        case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-cast"></div>);
+        case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-hit"></div>);
         default: return <div>&nbsp;</div>;
     }
 }
diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 974b14b6..410c04d2 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -42,7 +42,7 @@ class ConstructAvatar extends Component {
     render() {
         return (
             <div
-                className="avatar"
+                class="avatar"
                 id={this.props.id}
                 style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
             />
@@ -62,7 +62,7 @@ class ConstructImg extends Component {
     render() {
         return (
             <img
-                className="avatar"
+                class="avatar"
                 id={this.props.id}
                 src={`/molecules/${genAvatar(this.props.name)}.svg`}
                 height="500"
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 06f0b0df..3e7d035b 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -62,8 +62,8 @@ function GameConstruct(props) {
     const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
         <div key={j} alt={STATS[s].stat}>
             {shapes[s]()}
-            <div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
-            <div className="value" >{construct[STATS[s].stat].value}</div>
+            <div class="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
+            <div class="value" >{construct[STATS[s].stat].value}</div>
         </div>
     ));
 
@@ -71,12 +71,12 @@ function GameConstruct(props) {
         .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
 
     let crypSkills = <div> &nbsp; </div>;
-    if (player) crypSkills = (<div className="skills"> {skills} </div>);
+    if (player) crypSkills = (<div class="skills"> {skills} </div>);
 
     const [combatText, combatClass] = getCombatText(construct, resolution);
     const combatTextClass = `combat-text ${combatClass}`;
     const combatTextEl = combatText
-        ? <div className={combatTextClass}>{combatText}</div>
+        ? <div class={combatTextClass}>{combatText}</div>
         : null;
 
     const effects = construct.effects.length
@@ -87,7 +87,7 @@ function GameConstruct(props) {
     const playerTeamIds = playerTeam.constructs.map(c => c.id);
 
     const anim = (
-        <div className="anim-container">
+        <div class="anim-container">
             {animationDivs(combatClass)}
         </div>
     );
@@ -96,13 +96,13 @@ function GameConstruct(props) {
         <div
             onClick={() => selectSkillTarget(construct.id)}
             style={ activeSkill ? { cursor: 'pointer' } : {}}
-            className={`game-construct ${ko} ${classes}`} >
-            <h3 className="name"> {construct.name} </h3>
+            class={`game-construct ${ko} ${classes}`} >
+            <h3 class="name"> {construct.name} </h3>
             {crypSkills}
-            <div className="stats"> {stats} </div>
+            <div class="stats"> {stats} </div>
             <ConstructAvatar name={construct.name} id={construct.id} />
             {combatTextEl}
-            <div className="effects"> {effects} </div>
+            <div class="effects"> {effects} </div>
         </div>
     );
 }
diff --git a/client/src/components/game.footer.jsx b/client/src/components/game.footer.jsx
index 287b0eab..69925fb8 100644
--- a/client/src/components/game.footer.jsx
+++ b/client/src/components/game.footer.jsx
@@ -98,7 +98,7 @@ function GameFooter(props) {
 
     const readyBtn = (
         <button
-            className={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
+            class={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
             onClick={sendGameReady}>
             Ready
         </button>
@@ -124,8 +124,8 @@ function GameFooter(props) {
     };
 
     const timer = (
-        <div className="timer-container">
-            <div className="timer" style={timerStyles} >&nbsp;</div>
+        <div class="timer-container">
+            <div class="timer" style={timerStyles} >&nbsp;</div>
         </div>
     );
 
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
index 0c681863..eddde654 100644
--- a/client/src/components/game.jsx
+++ b/client/src/components/game.jsx
@@ -72,7 +72,7 @@ function Game(props) {
         const constructs = team.constructs.map((c, i) =>
             <GameConstruct key={c.id} i={i} construct={c} player={true} />);
         return (
-            <div className="team player">
+            <div class="team player">
                 {constructs}
             </div>
         );
@@ -82,7 +82,7 @@ function Game(props) {
         const constructs = team.constructs.map((c, i) =>
             <GameConstruct key={c.id} i={i} construct={c} player={false} />);
         return (
-            <div className="team opponent">
+            <div class="team opponent">
                 {constructs}
             </div>
         );
@@ -96,7 +96,7 @@ function Game(props) {
     }
 
     return (
-        <main className={gameClasses} onClick={gameClick} >
+        <main class={gameClasses} onClick={gameClick} >
             {otherTeams.map(OpponentTeam)}
             <Targeting />
             {PlayerTeam(playerTeam, setActiveSkill)}
diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index d2ffdedc..5562502b 100644
--- a/client/src/components/header.jsx
+++ b/client/src/components/header.jsx
@@ -21,16 +21,16 @@ function renderHeader(args) {
     const { account, ping } = args;
 
     const accountStatus = account
-        ? (<div className="header-status">
-            <h1 className="header-username">{account.name}</h1>
+        ? (<div class="header-status">
+            <h1 class="header-username">{account.name}</h1>
             {saw(pingColour(ping))}
-            <div className="ping-text">{ping}ms</div>
+            <div class="ping-text">{ping}ms</div>
         </div>)
         : '';
 
     return (
         <header>
-            <h1 className="header-title">mnml.gg</h1>
+            <h1 class="header-title">mnml.gg</h1>
             {accountStatus}
         </header>
     );
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index d94b6597..ba9dadb7 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -23,7 +23,7 @@ function InfoComponent(args) {
 
         if (isSkill) {
             return (
-                <div className="info-skill">
+                <div class="info-skill">
                     <h2>{fullInfo.item}</h2>
                     <div>{fullInfo.description}</div>
                 </div>
@@ -61,7 +61,7 @@ function InfoComponent(args) {
                             : '';
 
                         return (
-                            <figure key={j} alt={c.colour} className={reqClass} >
+                            <figure key={j} alt={c.colour} class={reqClass} >
                                 {shapes.square([c])}
                             </figure>
                         );
@@ -81,11 +81,11 @@ function InfoComponent(args) {
                     : 'unmet';
 
                 return (
-                    <div key={i} className="spec-goal">
-                        <div className="colour-reqs">
+                    <div key={i} class="spec-goal">
+                        <div class="colour-reqs">
                             {colourGoals}
                         </div>
-                        <div className={reqClass}>
+                        <div class={reqClass}>
                             + {bonus.bonus}
                             <hr />
                         </div>
@@ -94,10 +94,10 @@ function InfoComponent(args) {
             });
 
             return (
-                <div className="info-spec">
+                <div class="info-spec">
                     <h2>{info}</h2>
                     <div>{fullInfo.description}</div>
-                    <div className="thresholds">
+                    <div class="thresholds">
                         {thresholds}
                     </div>
                 </div>
@@ -105,7 +105,7 @@ function InfoComponent(args) {
         }
 
         return (
-            <div className="info-item">
+            <div class="info-item">
                 <h2>{fullInfo.item}</h2>
                 <div>{fullInfo.description}</div>
             </div>
@@ -126,7 +126,7 @@ function InfoComponent(args) {
                     <tbody>
                         {filteredCombos.map((c, i) =>
                             <tr key={i} >
-                                <td className="highlight" >{convertItem(c.item)}</td>
+                                <td class="highlight" >{convertItem(c.item)}</td>
                                 {c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
                             </tr>
                         )}
@@ -139,11 +139,11 @@ function InfoComponent(args) {
         const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
         if (vboxCombos.length > 6) return false;
         return (
-            <table className="combos">
+            <table class="combos">
                 <tbody>
                     {vboxCombos.map((c, i) =>
                         <tr key={i} >
-                            <td className="highlight" >{convertItem(c.item)}</td>
+                            <td class="highlight" >{convertItem(c.item)}</td>
                             {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
                         </tr>
                     )}
@@ -157,7 +157,7 @@ function InfoComponent(args) {
     //     : null;
 
     return (
-        <div className='info' >
+        <div class='info' >
             <Info />
             <Combos />
         </div>
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index bb9aed6b..9b18ec0f 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -63,7 +63,7 @@ function Instance(args) {
             const pText = playerText(p);
             return (
                 <tr key={i}
-                    className={p.ready ? 'ready' : ''}>
+                    class={p.ready ? 'ready' : ''}>
                     <td>{p.name}</td>
                     <td>{p.wins} / {p.losses}</td>
                     <td>{pText}</td>
@@ -72,7 +72,7 @@ function Instance(args) {
         });
 
         return (
-            <table className="scoreboard" >
+            <table class="scoreboard" >
                 <tbody>
                     {players}
                 </tbody>
@@ -83,7 +83,7 @@ function Instance(args) {
     const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
 
     return (
-        <main className={instanceClasses} onMouseOver={() => setInfo(null)} >
+        <main class={instanceClasses} onMouseOver={() => setInfo(null)} >
             <ScoreBoard />
             <Vbox />
             <InfoContainer />
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index a26a256d..cc7c1dc7 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -104,7 +104,7 @@ function Construct(props) {
         const skill = construct.skills[i];
         const s = skill
             ? skill.skill
-            : (<span className="gray">+</span>);
+            : (<span class="gray">+</span>);
 
         function skillClick(e) {
             if (!skill) return false;
@@ -131,7 +131,7 @@ function Construct(props) {
             <button
                 key={i}
                 disabled={!skill && itemEquip === null}
-                className={classes}
+                class={classes}
                 onClick={skillClick}
                 onDblClick={skillDblClick}
                 onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
@@ -146,7 +146,7 @@ function Construct(props) {
         if (!s) {
             const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
             return (
-                <figure key={i} className={equip} >
+                <figure key={i} class={equip} >
                     {shapes.diamond(equip)}
                     <figcaption>&nbsp;</figcaption>
                 </figure>
@@ -192,7 +192,7 @@ function Construct(props) {
 
         return <div key={stat.stat}
             alt={stat.stat}
-            className={stat.stat}
+            class={stat.stat}
             onMouseOver={e => hoverInfo(e, info)} >
             {shapes[s]()}
             <div>{construct[stat.stat].value}</div>
@@ -202,14 +202,14 @@ function Construct(props) {
     return (
         <div key={construct.id} class="instance-construct" onClick={onClick} >
             <ConstructAvatar name={construct.name} id={construct.id} />
-            <h2 className="name" >{construct.name}</h2>
-            <div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
+            <h2 class="name" >{construct.name}</h2>
+            <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}
             </div>
-            <div className="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
+            <div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
                 {specs}
             </div>
-            <div className="stats">
+            <div class="stats">
                 {stats}
             </div>
         </div>
@@ -254,7 +254,7 @@ function InstanceConstructs(props) {
 
     const classes = `construct-list`;
     return (
-        <div className={classes} onClick={() => setActiveConstruct(null)}>
+        <div class={classes} onClick={() => setActiveConstruct(null)}>
             {constructs}
         </div>
     );
diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx
index fe0b3fa8..c82acbe7 100644
--- a/client/src/components/instance.create.form.jsx
+++ b/client/src/components/instance.create.form.jsx
@@ -54,11 +54,11 @@ class InstanceCreateForm extends Component {
 
         const classes = `create-form ${disabled ? 'disabled' : ''}`;
         return (
-            <div className={classes}>
+            <div class={classes}>
                 <form>
                     <label>instance name</label>
                     <input
-                        className="login-input"
+                        class="login-input"
                         type="text"
                         disabled={disabled}
                         value={this.state.name}
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index f0e9874f..6755c1c9 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -124,16 +124,16 @@ function Equipment(props) {
     }
 
     return (
-        <div className="equip" >
-            <div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
+        <div class="equip" >
+            <div class={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
                 <h3>Skills</h3>
-                <div className ="items">
+                <div class ="items">
                     {skills}
                 </div>
             </div>
-            <div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
+            <div class={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
                 <h3>Specs</h3>
-                <div className ="items">
+                <div class ="items">
                     {specs}
                 </div>
             </div>
diff --git a/client/src/components/instance.footer.jsx b/client/src/components/instance.footer.jsx
index 1ebe3c5a..c2d57512 100644
--- a/client/src/components/instance.footer.jsx
+++ b/client/src/components/instance.footer.jsx
@@ -69,7 +69,7 @@ function Instance(args) {
 
     const readyBtn = (
         <button
-            className={rdyClasses}
+            class={rdyClasses}
             onMouseOver={e => hoverInfo(e, readyInfo)}
             onClick={() => sendInstanceReady()}>
             Ready
@@ -108,8 +108,8 @@ function Instance(args) {
     };
 
     const timer = (
-        <div className="timer-container">
-            <div className="timer" style={timerStyles} >&nbsp;</div>
+        <div class="timer-container">
+            <div class="timer" style={timerStyles} >&nbsp;</div>
         </div>
     );
 
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index 7ea40aac..c5d62a4c 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -66,7 +66,7 @@ function List(args) {
 
             return (
                 <tr key={instance.id}
-                    className="right"
+                    class="right"
                     onClick={instanceClick} >
                     <td>{instance.name}</td>
                     <td>{instance.players.length} / {instance.max_players}</td>
@@ -76,7 +76,7 @@ function List(args) {
         });
 
         return (
-            <div className="menu-instance-list" >
+            <div class="menu-instance-list" >
                 <hr />
                 <table>
                     <thead>
@@ -88,7 +88,7 @@ function List(args) {
                     </thead>
                     <tbody>
                         {instancePanels}
-                        <tr className="right" onClick={() => sendInstanceList()}>
+                        <tr class="right" onClick={() => sendInstanceList()}>
                             <td colSpan={3} >↺</td>
                         </tr>
                     </tbody>
@@ -104,15 +104,15 @@ function List(args) {
         .map(construct =>
             <div
                 key={construct.id}
-                className="menu-construct" >
+                class="menu-construct" >
                 <ConstructAvatar name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );
 
     return (
-        <main className="menu-instances">
-            <div className="construct-list">
+        <main class="menu-instances">
+            <div class="construct-list">
                 {constructPanels}
             </div>
             {listElements()}
diff --git a/client/src/components/login.jsx b/client/src/components/login.jsx
index 18707013..f2f32bca 100644
--- a/client/src/components/login.jsx
+++ b/client/src/components/login.jsx
@@ -56,31 +56,31 @@ class Login extends Component {
     render() {
         return (
             <main>
-                <div className="login">
+                <div class="login">
                     <input
-                        className="login-input"
+                        class="login-input"
                         type="email"
                         placeholder="username"
                         onInput={this.nameInput}
                     />
                     <input
-                        className="login-input"
+                        class="login-input"
                         type="password"
                         placeholder="password"
                         onInput={this.passwordInput}
                     />
                     <button
-                        className="login-btn"
+                        class="login-btn"
                         onClick={this.loginSubmit}>
                         Login
                     </button>
                     <button
-                        className="login-btn"
+                        class="login-btn"
                         onClick={this.registerSubmit}>
                         Register
                     </button>
                     <button
-                        className="login-btn"
+                        class="login-btn"
                         onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
                         Discord + Invites
                     </button>
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
index bfa5adb6..1ed39d70 100644
--- a/client/src/components/mnml.jsx
+++ b/client/src/components/mnml.jsx
@@ -11,7 +11,7 @@ const addState = connect(
 );
 
 const Mnml = ({ showNav }) =>
-    <div id="mnml" className={showNav ? 'nav-visible' : ''}>
+    <div id="mnml" class={showNav ? 'nav-visible' : ''}>
         <Nav />
         <Main />
         <Footer />
diff --git a/client/src/components/molecule.jsx b/client/src/components/molecule.jsx
index 28d2ae8e..2be0cfc3 100644
--- a/client/src/components/molecule.jsx
+++ b/client/src/components/molecule.jsx
@@ -2,7 +2,7 @@ const preact = require('preact');
 
 module.exports = function molecule(combatText) {
     const text = combatText
-        ?   <text x="0" y="400" className="combat-text">
+        ?   <text x="0" y="400" class="combat-text">
                 {combatText}
                 <animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
                 <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index 7b65f110..9377349e 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -134,16 +134,16 @@ function Nav(args) {
     const canJoin = team.some(c => !c);
 
     const accountStatus = account
-        ? (<div className="header-status">
-            <h2 className="header-username">{account.name}</h2>
+        ? (<div class="header-status">
+            <h2 class="header-username">{account.name}</h2>
             {saw(pingColour(ping))}
-            <div className="ping-text">{ping}ms</div>
+            <div class="ping-text">{ping}ms</div>
         </div>)
         : false;
 
     return (
         <nav onClick={hideNav} >
-            <h1 className="header-title">mnml.gg</h1>
+            <h1 class="header-title">mnml.gg</h1>
             {accountStatus}
             <button onClick={() => navTo('team')}>1. Select Team</button>
             <button disabled={canJoin} onClick={() => navTo('list')}>2. Join</button>
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx
index ecb2a02d..95eeddb6 100644
--- a/client/src/components/skill.btn.jsx
+++ b/client/src/components/skill.btn.jsx
@@ -42,7 +42,7 @@ function Skill(props) {
         return (
             <button
                 disabled='true'
-                className='construct-skill-btn disabled'>
+                class='construct-skill-btn disabled'>
             </button>
         );
     }
@@ -70,7 +70,7 @@ function Skill(props) {
     return (
         <button
             disabled={cdText || s.disabled || ko}
-            className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
+            class={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
             type="submit"
             onClick={onClick}>
             {s.skill} {cdText}
diff --git a/client/src/components/spawn.button.jsx b/client/src/components/spawn.button.jsx
index fceeb1d0..e6518861 100644
--- a/client/src/components/spawn.button.jsx
+++ b/client/src/components/spawn.button.jsx
@@ -31,11 +31,11 @@ class SpawnButton extends Component {
         return (
             <div
                 key={this.props.i}
-                className="menu-construct spawn-btn"
+                class="menu-construct spawn-btn"
                 onClick={() => this.enable()} >
                 <h2>+</h2>
                 <input
-                    className="login-input"
+                    class="login-input"
                     type="text"
                     disabled={!this.state.enabled}
                     value={this.state.value}
@@ -43,7 +43,7 @@ class SpawnButton extends Component {
                     onInput={this.handleInput}
                 />
                 <button
-                    className="login-btn"
+                    class="login-btn"
                     disabled={!this.state.enabled}
                     onClick={this.handleSubmit}
                     type="submit">
diff --git a/client/src/components/svgs/colour.jsx b/client/src/components/svgs/colour.jsx
index b8130546..9609ea0f 100644
--- a/client/src/components/svgs/colour.jsx
+++ b/client/src/components/svgs/colour.jsx
@@ -2,7 +2,7 @@ const preact = require('preact');
 
 module.exports = function vboxColour(classes) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" className={classes} >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" class={classes} >
             <path id="Unnamed"
                   fill="none" strokeWidth="1px"
                   d="M 20,20
diff --git a/client/src/components/svgs/diamond.jsx b/client/src/components/svgs/diamond.jsx
index 62fdb803..8bdd4f39 100644
--- a/client/src/components/svgs/diamond.jsx
+++ b/client/src/components/svgs/diamond.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 module.exports = function triangle(classes) {
     return (
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-        	 viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" className={classes} >
+        	 viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" class={classes} >
         <g>
         	<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 	"/>
         	<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 	"/>
diff --git a/client/src/components/svgs/hexagon.jsx b/client/src/components/svgs/hexagon.jsx
index ad1c3364..2f0566ea 100644
--- a/client/src/components/svgs/hexagon.jsx
+++ b/client/src/components/svgs/hexagon.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 module.exports = function triangle(classes) {
 	return (
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-		 viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" className={classes} >
+		 viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" class={classes} >
     	<g>
     		<polygon class="st3" points="54.42,198.47 1.47,145.01 1.47,54.93 54.42,1.47 143.64,1.47 196.6,54.93 196.6,145.01 143.64,198.47
     				"/>
diff --git a/client/src/components/svgs/pentagon.jsx b/client/src/components/svgs/pentagon.jsx
index 8deec920..d814c8f0 100644
--- a/client/src/components/svgs/pentagon.jsx
+++ b/client/src/components/svgs/pentagon.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 module.exports = function triangle(classes) {
 	return (
 		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-			 viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" className={classes} >
+			 viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" class={classes} >
 		<g>
 			<polygon class="st4" points="106.11,1.82 1.74,76.95 41.61,198.52 170.61,198.52 210.47,76.95 	"/>
 			<polygon class="st4" points="54.38,181.1 22.41,83.61 106.11,23.36 189.8,83.61 157.83,181.1 	"/>
diff --git a/client/src/components/svgs/saw.jsx b/client/src/components/svgs/saw.jsx
index 3433c18e..e9e96192 100644
--- a/client/src/components/svgs/saw.jsx
+++ b/client/src/components/svgs/saw.jsx
@@ -3,8 +3,8 @@ const preact = require('preact');
 module.exports = function saw(colour) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
-            <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
-            <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+            <path d="M0,50l50,-50v100l50,-50" class="ping-path"/>
+            <path d="M0,50l50,-50v100l50,-50" class="ping-path"/>
         </svg>
     );
 };
diff --git a/client/src/components/svgs/squircle.jsx b/client/src/components/svgs/squircle.jsx
index 82bbabf3..71bcbafe 100644
--- a/client/src/components/svgs/squircle.jsx
+++ b/client/src/components/svgs/squircle.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 module.exports = function triangle(classes) {
     return (
 		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-			 viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" className={classes} >
+			 viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" class={classes} >
 		<g>
 			<g>
 				<path class="st1" d="M101.35,198.52h-0.9c-54.66,0-98.97-44.31-98.97-98.97V1.48h198.84v98.07
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 5ef94507..94175359 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -78,7 +78,7 @@ class TargetSvg extends Component {
             : outgoing.map(getPath);
 
         return (
-            <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className="targeting-arrows">
+            <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
                 {arrows}
             </svg>
         );
diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx
index 7f4b182d..afce6622 100644
--- a/client/src/components/team.jsx
+++ b/client/src/components/team.jsx
@@ -74,7 +74,7 @@ function Team(args) {
         return (
             <div
                 key={construct.id}
-                className="menu-construct"
+                class="menu-construct"
                 style={ { 'border-color': borderColour || 'whitesmoke' } }
                 onClick={() => selectConstruct(construct.id)} >
                 <ConstructAvatar name={construct.name} id={construct.id} />
@@ -89,7 +89,7 @@ function Team(args) {
         .map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
 
     return (
-        <main className="team">
+        <main class="team">
             {constructPanels}
             {spawnButtons}
         </main>
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index a512d94b..258d0b9b 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -167,7 +167,7 @@ function Vbox(args) {
 
             return <td
                 key={j}
-                className={`${highlighted ? 'highlight' : ''}`}
+                class={`${highlighted ? 'highlight' : ''}`}
                 onTouchStart={e => vboxTouchStart(e, i, j)}
                 onTouchEnd={e => vboxTouchEnd(e, i, j)}
                 onTouchMove={e => vboxTouchMove(e)}
@@ -218,7 +218,7 @@ function Vbox(args) {
         return (
             <td
                 key={i}
-                className={`${highlighted ? 'highlight' : ''}`}
+                class={`${highlighted ? 'highlight' : ''}`}
                 onMouseOver={(e) => vboxHover(e, value)}
                 onClick={e => boundClick(e, i, highlighted) }>
                 {convertItem(value)}
@@ -252,7 +252,7 @@ function Vbox(args) {
         return combinerChange(combiner);
     }
     const combinerElement = (
-        <table className="vbox-table">
+        <table class="vbox-table">
             <tbody>
                 <tr>
                     <td onClick={() => combinerRmv(0)}>
@@ -287,38 +287,38 @@ function Vbox(args) {
     const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
-        <div className={classes}>
-            <div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
-                <div className="vbox-hdr">
+        <div class={classes}>
+            <div class='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
+                <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
-                    <div className="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
+                    <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <button
                     onMouseOver={e => hoverInfo(e, 'reroll')}
                     onClick={() => sendVboxDiscard()}>
                     Reroll
                 </button>
-                <table className="vbox-table">
+                <table class="vbox-table">
                     <tbody>
                         {freeRows}
                     </tbody>
                 </table>
             </div>
-            <div className='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
+            <div class='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
                 <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                 <button
-                    className={reclaimClass}
+                    class={reclaimClass}
                     onMouseOver={e => hoverInfo(e, 'reclaim')}
                     onClick={reclaimClick}>
                     reclaim
                 </button>
-                <table className="vbox-table">
+                <table class="vbox-table">
                     <tbody>
                         {boundRows}
                     </tbody>
                 </table>
             </div>
-            <div className="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
+            <div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
                 <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
                 <button
                     onMouseOver={e => hoverInfo(e, 'refine')}