diff --git a/src/app/components/InternalSlot.jsx b/src/app/components/InternalSlot.jsx
index ec3c9aa9..c9b5186b 100644
--- a/src/app/components/InternalSlot.jsx
+++ b/src/app/components/InternalSlot.jsx
@@ -11,7 +11,6 @@ import { blueprintTooltip } from '../utils/BlueprintFunctions';
  * Internal Slot
  */
 export default class InternalSlot extends Slot {
-
   /**
    * Generate the slot contents
    * @param  {Object} m             Mounted Module
@@ -25,7 +24,6 @@ export default class InternalSlot extends Slot {
       let classRating = String(m.getSize()) + m.getRating();
       let { drag, drop, ship } = this.props;
       let { termtip, tooltip } = this.context;
-      let validMods = m.getApplicableBlueprints();
       let showModuleResistances = Persist.showModuleResistances();
 
       // Modifications tooltip shows blueprint and grade, if available
@@ -50,13 +48,34 @@ export default class InternalSlot extends Slot {
       const enabled = m.isEnabled();
 
       const className = cn('details', enabled ? '' : 'disabled');
-      return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
-        <div className={'cb'}>
-          <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : ''}</div>
-          <div className={'r'}>{formats.round(mass)}{u.T}</div>
-        </div>
-        <div className={'cb'}>
-          {/* { m.getOptMass() ? <div className={'l'}>{translate('optmass', 'sg')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
+      return (
+        <div
+          className={className}
+          draggable="true"
+          onDragStart={drag}
+          onDragEnd={drop}
+        >
+          <div className={'cb'}>
+            <div className={'l'}>
+              {classRating} {translate(m.readMeta('type'))}
+              {m.mods && Object.keys(m.mods).length > 0 ? (
+                <span
+                  onMouseOver={termtip.bind(null, modTT)}
+                  onMouseOut={tooltip.bind(null, null)}
+                >
+                  <Modified />
+                </span>
+              ) : (
+                ''
+              )}
+            </div>
+            <div className={'r'}>
+              {formats.round(mass)}
+              {u.T}
+            </div>
+          </div>
+          <div className={'cb'}>
+            {/* { m.getOptMass() ? <div className={'l'}>{translate('optmass', 'sg')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
           { m.getMaxMass() ? <div className={'l'}>{translate('maxmass', 'sg')}: {formats.int(m.getMaxMass())}{u.T}</div> : null }
           { m.bins ? <div className={'l'}>{m.bins} <u>{translate('bins')}</u></div> : null }
           { m.bays ? <div className={'l'}>{translate('bays')}: {m.bays}</div> : null }
@@ -90,10 +109,23 @@ export default class InternalSlot extends Slot {
           { showModuleResistances && m.getCausticResistance() ? <div className='l'>{translate('causres')}: {formats.pct(m.getCausticResistance())}</div> : null }
           { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
           { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
-          { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-          { m && validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null } */}
+          { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null } */}
+            {(m.getApplicableBlueprints() || []).length > 0 ? (
+              <div className="r"
+                ref={(modButton) => (this.modButton = modButton)}
+              >
+                <button onClick={this._toggleModifications.bind(this)}
+                  onContextMenu={stopCtxPropagation}
+                  onMouseOver={termtip.bind(null, 'modifications')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >
+                  <ListModifications />
+                </button>
+              </div>
+            ) : null}
+          </div>
         </div>
-      </div>;
+      );
     } else {
       return <div className={'empty'}>{translate('empty')}</div>;
     }
diff --git a/src/app/components/Modification.jsx b/src/app/components/Modification.jsx
index 28421a86..0c48beda 100644
--- a/src/app/components/Modification.jsx
+++ b/src/app/components/Modification.jsx
@@ -3,22 +3,17 @@ import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
 import NumberEditor from 'react-number-editor';
-import { isChangeValueBeneficial } from '../utils/BlueprintFunctions';
-import { Modifications } from 'coriolis-data/dist';
+import { Module } from 'ed-forge';
 
 /**
  * Modification
  */
 export default class Modification extends TranslatedComponent {
   static propTypes = {
-    ship: PropTypes.object.isRequired,
-    m: PropTypes.object.isRequired,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.number.isRequired,
+    m: PropTypes.instanceOf(Module).isRequired,
+    property: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-    onKeyDown: PropTypes.func.isRequired,
-    modItems: PropTypes.array.isRequired,
-    handleModChange: PropTypes.func.isRequired
+    highlight: PropTypes.bool,
   };
 
   /**
@@ -28,47 +23,22 @@ export default class Modification extends TranslatedComponent {
    */
   constructor(props, context) {
     super(props);
-    this.state = {};
-    this.state.value = props.value;
+    const { m, property } = props;
+    const originalValue = m.get(property);
+    this.state = { originalValue, value: String(originalValue) };
   }
 
   /**
-   * Update modification given a value.
-   * @param {Number} value The value to set.  This comes in as a string and must be stored in state as a string,
-   *                       because it needs to allow illegal 'numbers' ('-', '1.', etc) when the user is typing
-   *                       in a value by hand
-   */
-  _updateValue(value) {
-    this.setState({ value });
-    let reCast = String(Number(value));
-    if (reCast.endsWith(value) || reCast.startsWith(value)) {
-      let { m, name, ship } = this.props;
-      value = Math.max(Math.min(value, 50000), -50000);
-      ship.setModification(m, name, value, true, true);
-    }
-  }
-
-  /**
-   * Triggered when a key is pressed down with focus on the number editor.
-   * @param {SyntheticEvent} event Key down event
-   */
-  _keyDown(event) {
-    if (event.key == 'Enter') {
-      this._updateFinished();
-    }
-    this.props.onKeyDown(event);
-  }
-
-  /**
-   * Triggered when an update to slider value is finished i.e. when losing focus
-   *
-   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated
-   * with each onBlur event, even when no change has actually been made to the field.
+   * Notify listeners that a new value has been entered and commited.
    */
   _updateFinished() {
-    if (this.props.value != this.state.value) {
-      this.props.handleModChange(true);
+    const { m, property } = this.props;
+    const { value, originalValue } = this.state;
+    const numValue = Number(value);
+    if (!isNaN(numValue) && originalValue !== numValue) {
+      m.set(property, numValue);
       this.props.onChange();
+      this.setState({ originalValue: numValue });
     }
   }
 
@@ -77,53 +47,59 @@ export default class Modification extends TranslatedComponent {
    * @return {React.Component} modification
    */
   render() {
-    let { translate, formats, units } = this.context.language;
-    let { m, name } = this.props;
-    let modValue = m.getChange(name);
-    let isOverwrite = Modifications.modifications[name].method === 'overwrite';
+    const { translate, formats } = this.context.language;
+    const { m, property, highlight } = this.props;
+    const { originalValue, value } = this.state;
 
-    if (name === 'damagedist') {
-      // We don't show damage distribution
+    // Some features only apply to specific modules; these features will be
+    // undefined on items that do not belong to the same class. Filter these
+    // features here
+    if (originalValue === undefined) {
       return null;
     }
 
-    let inputClassNames = {
-      'cb': true,
-      'greyed-out': !this.props.highlight
-    };
-
     return (
-      <div onBlur={this._updateFinished.bind(this)} key={name}
-        className={cn('cb', 'modification-container')}
-        ref={ modItem => this.props.modItems[name] = modItem }>
-        <span className={'cb'}>{translate(name, m.grp)}</span>
-        <span className={'header-adjuster'}></span>
+      <div onBlur={this._updateFinished.bind(this)} key={property}
+        className="cb modification-container"
+      >
+        <span className="cb">{translate(property)}</span>
+        <span className="header-adjuster"></span>
         <table style={{ width: '100%' }}>
           <tbody>
             <tr>
-              <td className={'input-container'}>
+              <td className="input-container">
                 <span>
-                  {this.props.editable ?
-                    <NumberEditor className={cn(inputClassNames)} value={this.state.value}
-                      decimals={2} style={{ textAlign: 'right' }} step={0.01}
-                      stepModifier={1} onKeyDown={this._keyDown.bind(this)}
-                      onValueChange={this._updateValue.bind(this)} /> :
-                    <input type="text" value={formats.f2(this.state.value)}
-                      disabled className={cn('number-editor', 'greyed-out')}
-                      style={{ textAlign: 'right', cursor: 'inherit' }}/>
-                  }
-                  <span className={'unit-container'}>
-                    {units[m.getStoredUnitFor(name)]}
-                  </span>
+                  <NumberEditor value={value} stepModifier={1}
+                    decimals={2} step={0.01} style={{ textAlign: 'right' }}
+                    className={cn(
+                      'cb',
+                      { 'greyed-out': !highlight },
+                    )}
+                    onKeyDown={(event) => {
+                      if (event.key == 'Enter') {
+                        this._updateFinished();
+                        event.stopPropagation();
+                      }
+                    }}
+                    onValueChange={(value) => {
+                      if (value.length <= 15) {
+                        this.setState({ value });
+                      }
+                    }} />
+                  {/* TODO: support unit */}
+                  <span className="unit-container">{/* unit */}</span>
                 </span>
               </td>
-              <td style={{ textAlign: 'center' }} className={
-                modValue ?
-                  isChangeValueBeneficial(name, modValue) ? 'secondary' : 'warning' :
-                  ''
-              }>
-                {formats.f2(modValue / 100) || 0}{isOverwrite ? '' : '%'}
-              </td>
+              <td style={{ textAlign: 'center' }}
+                className={cn({
+                  // TODO:
+                  // secondary: isBeneficial,
+                  // Is beneficial might be undefined; in this case we have a 0%
+                  // modifier. Check this here.
+                  // warning: isBeneficial === false,
+                })}
+              // TODO: support absolute modifiers
+              >{formats.pct(m.getModifier(property))}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx
index 76a6c7ce..935b14b5 100644
--- a/src/app/components/ModificationsMenu.jsx
+++ b/src/app/components/ModificationsMenu.jsx
@@ -4,29 +4,22 @@ import * as _ from 'lodash';
 import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
-import { Modifications } from 'coriolis-data/dist';
 import Modification from './Modification';
 import {
-  getBlueprint,
   blueprintTooltip,
-  setPercent,
-  getPercent,
-  setRandom,
   specialToolTip
 } from '../utils/BlueprintFunctions';
-
-const MODIFICATIONS_COMPARATOR = (mod1, mod2) => {
-  return mod1.props.name.localeCompare(mod2.props.name);
-};
+import { getBlueprintInfo, getExperimentalInfo } from 'ed-forge/lib/data/blueprints';
+import { getModuleInfo } from 'ed-forge/lib/data/items';
 
 /**
  * Modifications menu
  */
 export default class ModificationsMenu extends TranslatedComponent {
   static propTypes = {
+    className: PropTypes.string,
     ship: PropTypes.object.isRequired,
     m: PropTypes.object.isRequired,
-    marker: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     modButton:PropTypes.object
   };
@@ -41,24 +34,13 @@ export default class ModificationsMenu extends TranslatedComponent {
 
     this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
     this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
-    this._rollFifty = this._rollFifty.bind(this);
-    this._rollRandom = this._rollRandom.bind(this);
-    this._rollBest = this._rollBest.bind(this);
-    this._rollWorst = this._rollWorst.bind(this);
-    this._reset = this._reset.bind(this);
-    this._keyDown = this._keyDown.bind(this);
-    this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
-    this.firstModId = null;
-    this.firstBPLabel = null;// First item in mod menu
-    this.lastModId = null;
-    this.selectedModId = null;
-    this.selectedSpecialId = null;
-    this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
-    this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
-    this._handleModChange = this._handleModChange.bind(this);
+    this.selectedModRef = null;
+    this.selectedSpecialRef = null;
 
+    const { m } = props;
     this.state = {
-      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
+      blueprintProgress: m.getBlueprintProgress(),
+      blueprintMenuOpened: !m.getBlueprint(),
       specialMenuOpened: false
     };
   }
@@ -72,92 +54,48 @@ export default class ModificationsMenu extends TranslatedComponent {
   _renderBlueprints(props, context) {
     const { m } = props;
     const { language, tooltip, termtip } = context;
-    const translate = language.translate;
+    const { translate } = language;
+
     const blueprints = [];
-    for (const blueprintName in Modifications.modules[m.grp].blueprints) {
-      const blueprint = getBlueprint(blueprintName, m);
+    for (const blueprint of m.getApplicableBlueprints()) {
+      const info = getBlueprintInfo(blueprint);
       let blueprintGrades = [];
-      for (let grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
+      for (let grade in info.features) {
         // Grade is a string in the JSON so make it a number
         grade = Number(grade);
-        const classes = cn('c', {
-          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
-        });
-        const close = this._blueprintSelected.bind(this, blueprintName, grade);
-        const key = blueprintName + ':' + grade;
-        const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade]);
-        if (classes.indexOf('active') >= 0) this.selectedModId = key;
-        blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
-      }
-      if (blueprintGrades) {
-        const thisLen = blueprintGrades.length;
-        if (this.firstModId == null) this.firstModId = blueprintGrades[0].key;
-        this.lastModId = blueprintGrades[thisLen - 1].key;
-        blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
-        blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
+        const active = m.getBlueprint() === blueprint && m.getBlueprintGrade() === grade;
+        const key = blueprint + ':' + grade;
+        // const tooltipContent = blueprintTooltip(translate, info.features[grade]);
+        blueprintGrades.unshift(
+          <li key={key} data-id={key} className={cn('c', { active })}
+            style={{ width: '2em' }}
+            // onMouseOver={termtip.bind(null, tooltipContent)}
+            // onMouseOut={tooltip.bind(null, null)}
+            onClick={this._change(() => {
+              m.setBlueprint(blueprint, grade);
+              this.setState({
+                blueprintMenuOpened: false,
+                specialMenuOpened: true,
+              });
+            })}
+            ref={active ? (ref) => { this.selectedModRef = ref; } : undefined}
+          >{grade}</li>
+        );
       }
+
+      blueprints.push(
+        [
+          <div key={'div' + blueprint} className={'select-group cap'}>
+            {translate(blueprint)}
+          </div>,
+          <ul key={'ul' + blueprint}>{blueprintGrades}</ul>
+        ],
+      );
     }
-    return blueprints;
+
+    return [].concat(...blueprints);
   }
 
-  /**
-   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
-   * @param  {SyntheticEvent} event Event
-   *
-   */
-  _keyDown(event) {
-    let className = null;
-    let elemId = null;
-    if (event.currentTarget.attributes['class']) className = event.currentTarget.attributes['class'].value;
-    if (event.currentTarget.attributes['data-id']) elemId = event.currentTarget.attributes['data-id'].value;
-
-    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
-      event.stopPropagation();
-      if (elemId != null) {
-        this.modItems[elemId].click();
-      } else {
-        event.currentTarget.click();
-      }
-      return;
-    }
-    if (event.key == 'Tab') {
-      // Shift-Tab
-      if(event.shiftKey) {
-        if (elemId == this.firstModId && elemId != null) {
-          // Initial modification menu
-          event.preventDefault();
-          this.modItems[this.lastModId].focus();
-          return;
-        } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
-          // shift-tab on first element in modifications menu. set focus to last number editor field if open
-          event.preventDefault();
-          this.modItems[this.lastNeId].lastChild.focus();
-          return;
-        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null) {
-          // shift-tab on button-inline-menu with no number editor
-          event.preventDefault();
-          event.currentTarget.parentElement.lastElementChild.focus();
-        }
-      } else {
-        if (elemId == this.lastModId && elemId != null) {
-          // Initial modification menu
-          event.preventDefault();
-          this.modItems[this.firstModId].focus();
-          return;
-        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.nextSibling == null && event.currentTarget.nodeName != 'TD') {
-          // Experimental menu
-          event.preventDefault();
-          event.currentTarget.parentElement.firstElementChild.focus();
-          return;
-        } else if (event.currentTarget.className == 'cb' && event.currentTarget.parentElement.nextSibling == null) {
-          event.preventDefault();
-          this.modItems[this.firstBPLabel].focus();
-        }
-      }
-    }
-  }
-
-
   /**
    * Render the specials
    * @param  {Object} props   React component properties
@@ -168,200 +106,116 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m } = props;
     const { language, tooltip, termtip } = context;
     const translate = language.translate;
-    const specials = [];
-    const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
-    if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
-      const close = this._specialSelected.bind(this, null);
-      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
-      for (const specialName of Modifications.modules[m.grp][specialsId]) {
-        if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
-          continue;
-        }
-        const classes = cn('button-inline-menu', {
-          active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
-        });
-        if (classes.indexOf('active') >= 0) this.selectedSpecialId = specialName;
-        const close = this._specialSelected.bind(this, specialName);
-        if (m.blueprint && m.blueprint.name) {
-          let tmp = {};
-          if (m.blueprint.special) {
-            tmp = m.blueprint.special;
-          } else {
-            tmp = undefined;
-          }
-          m.blueprint.special = Modifications.specials[specialName];
-          let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
-          m.blueprint.special = tmp;
-          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
-        } else {
-          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
-        }
-      }
+
+    const applied = m.getExperimental();
+    const experimentals = [];
+    for (const experimental of m.getApplicableExperimentals()) {
+      const active = experimental === applied;
+      // TODO:
+      // let specialTt = specialToolTip(
+      //   translate,
+      //   m.blueprint.grades[m.blueprint.grade],
+      //   m.grp, m,
+      //   experimental,
+      // );
+      experimentals.push(
+        <div key={experimental} data-id={experimental}
+          style={{ cursor: 'pointer' }}
+          className={cn('button-inline-menu', { active })}
+          onClick={this._specialSelected(experimental)}
+          ref={active ? (ref) => { this.selectedSpecialRef = ref; } : undefined}
+          // onMouseOver={termtip.bind(null, specialTt)}
+          // onMouseOut={tooltip.bind(null, null)}
+        >{translate(experimental)}</div>
+      );
     }
-    return specials;
+
+    if (experimentals.length) {
+      experimentals.unshift(
+        <div style={{ cursor: 'pointer', fontWeight: 'bold' }}
+          className="button-inline-menu warning" key="none" data-id="none"
+          // Setting the special effect to undefined clears it
+          onClick={this._specialSelected(undefined)}
+          ref={!applied ? (ref) => { this.selectedSpecialRef = ref; } : undefined}
+        >{translate('PHRASE_NO_SPECIAL')}</div>
+      );
+    }
+
+    return experimentals;
+  }
+
+  /**
+   * Create a modification component
+   */
+  _mkModification(property, highlight) {
+    const { m } = this.props;
+    return <Modification key={property} highlight={highlight} m={m}
+      property={property} onChange={this._change()}
+    />;
   }
 
   /**
    * Render the modifications
    * @param  {Object} props   React Component properties
-   * @return {Object}         list: Array of React Components
+   * @return {Array}          Array of React Components
    */
   _renderModifications(props) {
-    const { m, onChange, ship } = props;
-    const modifiableModifications = [];
-    const modifications = [];
-    for (const modName of Modifications.modules[m.grp].modifications) {
-      if (!Modifications.modifications[modName].hidden) {
-        const key = modName + (m.getModValue(modName) / 100 || 0);
-        const editable = modName !== 'fallofffromrange';
-        const highlight = m.blueprint.grades[m.blueprint.grade].features[modName];
-        this.lastNeId = modName;
-        (editable && highlight ? modifiableModifications : modifications).push(
-          <Modification key={ key } ship={ ship } m={ m } highlight={highlight}
-            value={m.getPretty(modName) || 0} modItems={this.modItems}
-            onChange={onChange} onKeyDown={this._keyDown} name={modName}
-            editable={editable} handleModChange = {this._handleModChange} />
-        );
-      }
-    }
+    const { m } = props;
 
-    modifiableModifications.sort(MODIFICATIONS_COMPARATOR);
-    modifications.sort(MODIFICATIONS_COMPARATOR);
-    return modifiableModifications.concat(modifications);
+    const blueprintFeatures = getBlueprintInfo(m.getBlueprint()).features[
+      m.getBlueprintGrade()
+    ];
+    const blueprintModifications = Object.keys(blueprintFeatures)
+      .map((feature) => this._mkModification(feature, true))
+      .filter(Boolean);
+    const moduleModifications = Object.keys(getModuleInfo(m.getItem()).props)
+      .filter((prop) => !blueprintFeatures[prop])
+      .map((prop) => this._mkModification(prop, false));
+
+    return blueprintModifications.concat(moduleModifications);
   }
 
   /**
    * Toggle the blueprints menu
    */
   _toggleBlueprintsMenu() {
-    const blueprintMenuOpened = !this.state.blueprintMenuOpened;
-    this.setState({ blueprintMenuOpened });
+    this.setState({ blueprintMenuOpened: !this.state.blueprintMenuOpened });
   }
 
   /**
-   * Activated when a blueprint is selected
-   * @param  {int} fdname     The Frontier name of the blueprint
-   * @param  {int} grade      The grade of the selected blueprint
+   * Returns a callback that performs an action in form of a callback given as
+   * arguments and notifiers listeners.
+   * @param {function} cb Action to perform
+   * @returns {function} Change callback
    */
-  _blueprintSelected(fdname, grade) {
-    this.context.tooltip(null);
-    const { m, ship } = this.props;
-    const blueprint = getBlueprint(fdname, m);
-    blueprint.grade = grade;
-    ship.setModuleBlueprint(m, blueprint);
-    setPercent(ship, m, 100);
-
-    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
-    this.props.onChange();
+  _change(cb) {
+    return (...args) => {
+      this.context.tooltip(null);
+      if (cb) {
+        cb(...args);
+      }
+      this.props.onChange();
+    };
   }
 
   /**
    * Toggle the specials menu
    */
   _toggleSpecialsMenu() {
-    const specialMenuOpened = !this.state.specialMenuOpened;
-    this.setState({ specialMenuOpened });
+    this.setState({ specialMenuOpened: !this.state.specialMenuOpened });
   }
 
   /**
-   * Activated when a special is selected
-   * @param  {int} special     The name of the selected special
+   * Creates a callback for when a special effect is being selected
+   * @param   {string} special The name of the selected special
+   * @returns {function} Callback
    */
   _specialSelected(special) {
-    this.context.tooltip(null);
-    const { m, ship } = this.props;
-
-    if (special === null) {
-      ship.clearModuleSpecial(m);
-    } else {
-      ship.setModuleSpecial(m, Modifications.specials[special]);
-    }
-
-    this.setState({ specialMenuOpened: false });
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a '50%' roll within the information we have
-   */
-  _rollFifty() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 50);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a random roll within the information we have
-   */
-  _rollRandom() {
-    const { m, ship } = this.props;
-    setRandom(ship, m);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a 'best' roll within the information we have
-   */
-  _rollBest() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 100);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a 'worst' roll within the information we have
-   */
-  _rollWorst() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 0);
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-    this.props.onChange();
-  }
-
-  /**
-   * Reset modification information
-   */
-  _reset() {
-    const { m, ship } = this.props;
-    ship.clearModifications(m);
-    ship.clearModuleBlueprint(m);
-    this.selectedModId = null;
-    this.selectedSpecialId = null;
-    this.props.onChange();
-  }
-
-  /**
-   * set mod did change boolean
-   * @param {boolean} b Boolean to determine if a change has been made to a module
-   */
-  _handleModChange(b) {
-    this.modValDidChange = b;
-  }
-
-  /**
-   * Set focus on first element in modifications menu
-   * after it first mounts
-   */
-  componentDidMount() {
-    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
-    if (firstEleCn.indexOf('select-group cap') >= 0) {
-      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
-    } else {
-      this.modItems['modMainDiv'].firstElementChild.focus();
-    }
+    return this._change(() => {
+      const { m } = this.props;
+      m.setExperimental(special);
+      this.setState({ specialMenuOpened: false });
+    });
   }
 
   /**
@@ -370,24 +224,12 @@ export default class ModificationsMenu extends TranslatedComponent {
    * in a modification
    */
   componentDidUpdate() {
-    if (!this.modValDidChange) {
-      if (this.modItems['modMainDiv'].children.length > 0) {
-        if (this.modItems[this.selectedModId]) {
-          this.modItems[this.selectedModId].focus();
-          return;
-        } else if (this.modItems[this.selectedSpecialId]) {
-          this.modItems[this.selectedSpecialId].focus();
-          return;
-        }
-        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
-        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
-          this.modItems['modMainDiv'].firstElementChild.focus();
-        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
-          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
-        }
-      }
-    } else {
-      this._handleModChange(false);// Need to reset if component update due to value change
+    if (this.selectedModRef) {
+      this.selectedModRef.focus();
+      return;
+    } else if (this.selectedSpecialRef) {
+      this.selectedSpecialRef.focus();
+      return;
     }
   }
   /**
@@ -407,90 +249,143 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { language, tooltip, termtip } = this.context;
     const translate = language.translate;
     const { m } = this.props;
-    const { blueprintMenuOpened, specialMenuOpened } = this.state;
+    const {
+      blueprintProgress, blueprintMenuOpened, specialMenuOpened,
+    } = this.state;
 
-    const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
-    const _toggleSpecialsMenu = this._toggleSpecialsMenu;
-    const _rollFull = this._rollBest;
-    const _rollWorst = this._rollWorst;
-    const _rollFifty = this._rollFifty;
-    const _rollRandom = this._rollRandom;
-    const _reset = this._reset;
+    const appliedBlueprint = m.getBlueprint();
+    const appliedExperimental = m.getExperimental();
 
-    let blueprintLabel;
-    let haveBlueprint = false;
-    let blueprintTt;
-    let blueprintCv;
-    // TODO: Fix this to actually find the correct blueprint.
-    if (!m.blueprint || !m.blueprint.name || !m.blueprint.fdname || !Modifications.modules[m.grp].blueprints || !Modifications.modules[m.grp].blueprints[m.blueprint.fdname]) {
-      this.props.ship.clearModuleBlueprint(m);
-      this.props.ship.clearModuleSpecial(m);
-    }
-    if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade]) {
-      blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
-      haveBlueprint = true;
-      blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade]);
-      blueprintCv = getPercent(m);
-    }
+    let renderComponents = [];
+    switch (true) {
+      case !appliedBlueprint || blueprintMenuOpened:
+        renderComponents = this._renderBlueprints(this.props, this.context);
+        break;
+      case specialMenuOpened:
+        renderComponents = this._renderSpecials(this.props, this.context);
+        break;
+      default:
+        // Since the first case didn't apply, there is a blueprint applied so
+        // we render the modifications
+        // let blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade]);
 
-    let specialLabel;
-    let specialTt;
-    if (m.blueprint && m.blueprint.special) {
-      specialLabel = m.blueprint.special.name;
-      specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
-    } else {
-      specialLabel = translate('PHRASE_SELECT_SPECIAL');
-    }
+        renderComponents.push(
+          <div style={{ cursor: 'pointer' }} key="blueprintsMenu"
+            className="section-menu button-inline-menu"
+            // onMouseOver={termtip.bind(null, blueprintTt)}
+            // onMouseOut={tooltip.bind(null, null)}
+            onClick={this._toggleBlueprintsMenu}
+          >
+            {translate(appliedBlueprint)} {translate('grade')} {m.getBlueprintGrade()}
+          </div>
+        );
 
-    const specials = this._renderSpecials(this.props, this.context);
-    /**
-     * pnellesen - 05/28/2018 - added additional checks for specials.length below to ensure menus
-     * display correctly in cases where there are no specials (ex: AFMUs.)
-     */
-    const showBlueprintsMenu = blueprintMenuOpened;
-    const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
-    const showSpecialsMenu = specialMenuOpened && specials.length;
-    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
-    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    const showMods = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    if (haveBlueprint) {
-      this.firstBPLabel = blueprintLabel;
-    } else {
-      this.firstBPLabel = 'selectBP';
-    }
-    return (
-      <div
-        className={cn('select', this.props.className)}
-        onClick={(e) => e.stopPropagation() }
-        onContextMenu={stopCtxPropagation}
-        ref={modItem => this.modItems['modMainDiv'] = modItem}
-      >
-        { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
-          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
-          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
-        { showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
-        { showSpecial & !showSpecialsMenu ? <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
-        { showSpecialsMenu ? specials : null }
-        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
-        { showRolls ?
+        if (m.getApplicableExperimentals().length) {
+          let specialLabel = translate('PHRASE_SELECT_SPECIAL');
+          let specialTt;
+          if (appliedExperimental) {
+            specialLabel = appliedExperimental;
+            // specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
+          }
+          renderComponents.push(
+            <div className="section-menu button-inline-menu"
+              style={{ cursor: 'pointer' }}
+              onMouseOver={specialTt ? termtip.bind(null, specialTt) : null}
+              onMouseOut={specialTt ? tooltip.bind(null, null) : null}
+              onClick={this._toggleSpecialsMenu}
+            >{specialLabel}</div>
+          );
+        }
 
+        renderComponents.push(
+          <div
+            className="section-menu button-inline-menu warning"
+            style={{ cursor: 'pointer' }}
+            onClick={this._change(() => {
+              m.resetEngineering();
+              this.selectedModRef = null;
+              this.selectedSpecialRef = null;
+            })}
+            onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')}
+            onMouseOut={tooltip.bind(null, null)}
+          >{translate('reset')}</div>,
           <table style={{ width: '100%', backgroundColor: 'transparent' }}>
             <tbody>
-              { showRolls ?
-                <tr>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false }) }> { translate('mroll') }: </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 }) } style={{ cursor: 'pointer' }} onClick={_rollWorst} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
-                </tr> : null }
+              <tr>
+                <td
+                  className={cn(
+                    'section-menu button-inline-menu',
+                    { active: false },
+                  )}
+                >{translate('mroll')}:</td>
+                <td
+                  className={cn(
+                    'section-menu button-inline-menu',
+                    { active: blueprintProgress === 0 },
+                  )} style={{ cursor: 'pointer' }}
+                  onClick={this._change(() => {
+                    m.setBlueprintProgress(0);
+                    this.setState({ blueprintProgress: 0 });
+                  })}
+                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >{translate('0%')}</td>
+                <td
+                  className={cn(
+                    'section-menu button-inline-menu',
+                    { active: blueprintProgress === 0.5 },
+                  )} style={{ cursor: 'pointer' }}
+                  onClick={this._change(() => {
+                    m.setBlueprintProgress(0.5);
+                    this.setState({ blueprintProgress: 0.5 });
+                  })}
+                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >{translate('50%')}</td>
+                <td
+                  className={cn(
+                    'section-menu button-inline-menu',
+                    { active: blueprintProgress === 1 },
+                  )}
+                  style={{ cursor: 'pointer' }}
+                  onClick={this._change(() => {
+                    m.setBlueprintProgress(1);
+                    this.setState({ blueprintProgress: 1 });
+                  })}
+                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >{translate('100%')}</td>
+                <td
+                  className={cn(
+                    'section-menu button-inline-menu',
+                    { active: blueprintProgress % 0.5 !== 0 },
+                  )}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    const blueprintProgress = Math.random();
+                    m.setBlueprintProgress(blueprintProgress);
+                    this.setState({ blueprintProgress });
+                  }}
+                  onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >{translate('random')}</td>
+              </tr>
             </tbody>
-          </table> : null }
-        { showMods ? <hr /> : null }
-        { showMods ?
-          <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
-            { this._renderModifications(this.props) }
-          </span> : null }
+          </table>,
+          <hr />,
+          <span
+            onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')}
+            onMouseOut={tooltip.bind(null, null)}
+          >{this._renderModifications(this.props)}</span>
+        );
+    }
+
+    return (
+      <div className={cn('select', this.props.className)}
+        onClick={(e) => e.stopPropagation()}
+        onContextMenu={stopCtxPropagation}
+      >
+        {renderComponents}
       </div>
     );
   }
diff --git a/src/app/components/Slot.jsx b/src/app/components/Slot.jsx
index a7acf9ce..62be06c9 100644
--- a/src/app/components/Slot.jsx
+++ b/src/app/components/Slot.jsx
@@ -113,32 +113,34 @@ export default class Slot extends TranslatedComponent {
     }
 
     if (selected) {
-      // if (this._modificationsSelected) {
-      //   menu = <ModificationsMenu
-      //     className={this._getClassNames()}
-      //     onChange={onChange}
-      //     ship={ship}
-      //     m={m}
-      //     marker={modificationsMarker}
-      //     modButton = {this.modButton}
-      //   />;
-      // } else {
-      menu = <AvailableModulesMenu
-        className={this._getClassNames()}
-        m={slot}
-        ship={ship}
-        onSelect={onSelect}
-        warning={warning}
-        diffDetails={diffDetails.bind(ship, this.context.language)}
-        slotDiv = {this.slotDiv}
-      />;
-      // }
+      if (this._modificationsSelected) {
+        menu = <ModificationsMenu
+          className={this._getClassNames()}
+          onChange={onChange}
+          ship={ship}
+          m={slot}
+          modButton = {this.modButton}
+        />;
+      } else {
+        menu = <AvailableModulesMenu
+          className={this._getClassNames()}
+          m={slot}
+          ship={ship}
+          onSelect={onSelect}
+          warning={warning}
+          diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
+        />;
+      }
     }
 
     // TODO: implement touch dragging
 
     return (
-      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
+      <div className={cn('slot', dropClass, { selected })} onClick={onOpen}
+        onKeyDown={this._keyDown} onContextMenu={this._contextMenu}
+        onDragOver={dragOver} tabIndex="0"
+        ref={slotDiv => this.slotDiv = slotDiv}>
         <div className='details-container'>
           <div className='sz'>{this._getMaxClassLabel(translate)}</div>
           {slotDetails}
diff --git a/src/app/components/StandardSlot.jsx b/src/app/components/StandardSlot.jsx
index 9120316b..7053d327 100644
--- a/src/app/components/StandardSlot.jsx
+++ b/src/app/components/StandardSlot.jsx
@@ -89,11 +89,11 @@ export default class StandardSlot extends TranslatedComponent {
     if (selected) {
       if (this._modificationsSelected) {
         menu = <ModificationsMenu
-          className='standard'
+          className="standard"
           onChange={onChange}
           ship={ship}
           m={slot}
-          modButton = {this.modButton}
+          modButton={this.modButton}
         />;
       } else {
         menu = <AvailableModulesMenu