diff --git a/src/canvas/AddOverlay.js b/src/canvas/AddOverlay.js
new file mode 100644
index 0000000..9f3d1ee
--- /dev/null
+++ b/src/canvas/AddOverlay.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import config from './config';
+
+class AddOverlay extends React.Component {
+
+}
+
+export default AddOverlay;
\ No newline at end of file
diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 1880fa3..3bd0126 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -71,7 +71,9 @@ class Canvas extends React.Component {
     this.changePos = this.changePos.bind(this);
     this.getSVGCoords = this.getSVGCoords.bind(this);
     this.highlightCut = this.highlightCut.bind(this);
-    this.startSelection = this.startSelection.bind(this);
+    this.modifyCanvas = this.modifyCanvas.bind(this);
+
+    this.getSelection = this.getSelection.bind(this);
 
     let { premises, conclusion, steps, data } = this.props.proof;
     console.log(steps.length - 1)
@@ -91,58 +93,73 @@ class Canvas extends React.Component {
         var: 'none'
       },
       cbFunction: null,
+      finishCB: null,
       interaction: true,
       functions: {
-        insert: (id) => {
-          console.log("INSERTION")
-        },
-        erase: (id) => {
-          console.log("ERASURE")
-          return manipulate(this.state).erasure(id);
-        },
-        iterate: (id) => {
-          console.log("ITERATION")
-          return manipulate(this.state).iteration(id, this.state.steps[this.state.currentStep].data[0].id);
-        },
-        dcRemove: (id) => {
-          console.log("DOUBLE CUT Remove")
-          return manipulate(this.state).doubleCutRemove(id);
-        },
-        dcAdd: (id) => {
-          console.log("DOUBLE CUT Add")
-          return manipulate(this.state).doubleCutAdd(id);
-          
-        }
+        insertion: () => manipulate(this).insertion(),
+        erasure: () => manipulate(this).erasure(),
+        iteration: () => manipulate(this).iteration(),
+        doubleCutRemove: () => manipulate(this).doubleCutRemove(),
+        doubleCutAdd: () => manipulate(this).doubleCutAdd()
       }
     }
   }
 
-  startSelection(selectable, nameOfFunction) {
-    let { steps, currentStep, changeHistory } = this.state;
+  /**
+   * Function to enable selection of a cut or variable.
+   * @param  {Object} selectConfig  object that contains highlight selection params
+   *
+   * selectConfig object should look like { 'cut': 'all', 'var': 'all' }
+   * Omitted 'cut' or 'var' will result in either not allowing selection. Beyond 'all',
+   * 'even' or 'odd' level cuts can be specified.
+   */
+  getSelection(selectConfig) {
+    return new Promise((resolve, reject) => {
+      let { steps, currentStep } = this.state;
+      // only allow steps to be conducted at the end of a proof
+      if (currentStep+1 !== steps.length) {
+        return
+      }
+      this.setState({ 
+        highlights: selectConfig, 
+        interaction: false, 
+        cbFunction: (id) => {
+          if (this.state.finishCB) 
+            this.state.finishCB();
+          this.setState({  
+            highlights: {
+              cut: 'none', 
+              var: 'none'
+            },
+            interaction: true, 
+            cbFunction: null });
+          resolve(id);
+        }
+      });
+    });
+  }
+
+  modifyCanvas(nameOfFunction, finishedCb) {
+    // before we modify the canvas, let's save the current state
+    let { steps, changeHistory } = this.state;
     changeHistory = changeHistory.slice()
     changeHistory.push({ steps: Array.from(steps) });
-    // only allow steps to be conducted at the end of a proof
-    if (currentStep+1 !== steps.length) {
-      return
+    // okay, now we call the requested function from Toolbox
+    // 
+    // cancel any previous actions
+    if (this.state.cbFunction) {
+      this.state.cbFunction(null);
     }
-    this.setState({ 
-      highlights: selectable, 
-      interaction: false, 
-      cbFunction: (id) => {
-        let state = this.state.functions[nameOfFunction](id); 
-        if (state) 
-          this.setState({ 
-            changeHistory: changeHistory, 
-            redoHistory: [],
-            ...state });
-        this.setState({  
-          highlights: {
-            cut: 'none', 
-            var: 'none'
-          },
-          interaction: true, 
-          cbFunction: null });
+    this.setState({ finishCB: finishedCb }, () => {
+      this.state.functions[nameOfFunction]().then(state => {
+      if (state) {
+        // now we can apply the new changeHistory
+        this.setState({ 
+          changeHistory: changeHistory, 
+          redoHistory: [],
+          ...state });
       }
+      });
     });
   }
 
@@ -311,7 +328,7 @@ class Canvas extends React.Component {
           <Toolbox 
             hidden={currentStep+1 !== steps.length}
             functions={this.state.functions}
-            setSelection={this.startSelection}
+            modifyCanvas={this.modifyCanvas}
           />
           <svg 
             ref={this.canvasContainer}
diff --git a/src/canvas/Canvas.scss b/src/canvas/Canvas.scss
index 4f1cd08..f0dd441 100644
--- a/src/canvas/Canvas.scss
+++ b/src/canvas/Canvas.scss
@@ -61,7 +61,6 @@
 
 .step-text {
   height: 22px;
-  width: 89px;
   color: #848484;
   font-family: "Open Sans";
   font-size: 16px;
diff --git a/src/canvas/EGCut.js b/src/canvas/EGCut.js
index 51c9a51..3966632 100644
--- a/src/canvas/EGCut.js
+++ b/src/canvas/EGCut.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import config from './config';
-import EGVariable from './EGVariable';
 
 class EGCut extends React.Component {
   constructor(props) {
@@ -64,7 +63,6 @@ class EGCut extends React.Component {
   }
 
   render() {
-    let childEl = this.props.children;
     let highlight = this.state.highlight && this.props.enableHighlight;
     let { _x, _y, _w, _h } = this.state.bounding;
     return (
diff --git a/src/canvas/Toolbox.js b/src/canvas/Toolbox.js
index 05c5009..917d45e 100644
--- a/src/canvas/Toolbox.js
+++ b/src/canvas/Toolbox.js
@@ -7,28 +7,28 @@ class Toolbox extends React.Component {
       functions: [
         {
           str: "Iterate",
-          func: 'iterate',
-          highlight: { 'cut': 'all', 'var': 'all' }
+          func: 'iteration',
+          highlight: false
         },
         {
           str: "Remove Double Cut",
-          func: 'dcRemove',
-          highlight: { 'cut': 'all' }
+          func: 'doubleCutRemove',
+          highlight: false
         },
         {
           str: "Add Double Cut",
-          func: 'dcAdd',
-          highlight: { 'cut': 'all', 'var': 'all' }
+          func: 'doubleCutAdd',
+          highlight: false
+        },
+        {
+          str: "Insertion",
+          func: 'insertion',
+          highlight: false
         },
-        // {
-        //   str: "Insertion",
-        //   func: 'insert',
-        //   highlight: { 'cut': 'odd', 'var': 'odd' }
-        // },
         {
           str: "Erasure",
-          func: 'erase',
-          highlight: { 'cut': 'even', 'var': 'even' }
+          func: 'erasure',
+          highlight: false
         }
       ]
     };
@@ -38,12 +38,27 @@ class Toolbox extends React.Component {
   }
 
   render() {
-    if (this.props.hidden) return <React.Fragment />;
+    let { hidden, modifyCanvas } = this.props;
+    if (hidden) return <React.Fragment />;
     return (
       <div className="toolbox" ref={this.canvas}>
         <h3>Tools</h3>
-        {this.state.functions.map(el => (
-          <div className="tool" onClick={() => this.props.setSelection(el.highlight, el.func)}>{el.str}</div>
+        {this.state.functions.map((el, i) => (
+          <div 
+            className="tool"
+            style={el.highlight ? { backgroundColor: '#AFAFAA' } : {}} 
+            onClick={() => {
+              let new_func = this.state.functions;
+              new_func[i].highlight = true;
+              modifyCanvas(el.func, () => {
+                let new_func = this.state.functions;
+                new_func[i].highlight = false;
+                this.setState({ functions: new_func });
+              });
+              this.setState({ functions: new_func });
+            }
+          }
+          >{el.str}</div>
         ))}
       </div>
     );
diff --git a/src/canvas/manipulate.js b/src/canvas/manipulate.js
index 5735655..c0a746e 100644
--- a/src/canvas/manipulate.js
+++ b/src/canvas/manipulate.js
@@ -1,14 +1,11 @@
 const nanoid = require('nanoid').nanoid;
 
-module.exports = (state) => { 
+module.exports = ({ state, getSelection }) => { 
   return {
     state: state,
 
-    /*
-     * Adds an element with string "str"
-     */
-    createElement: function (cutID, str) {
-      console.log(cutID)
+    insertion: async function () {
+      await getSelection({ 'cut': 'odd', 'var': 'odd' });
       // let id = nanoid()
       // state.data[id] = { 
       //   type: "var",
@@ -19,11 +16,14 @@ module.exports = (state) => {
       // }
       return state;
     },
+
     /* Given a copyID and insertID, the iteration function creates a new step,
      * and adds a copy of the data represented by copyID at the location of insertID
      * only if the location of insertID is a child of copyID
      */
-    iteration: function (copyID, insertID) {
+    iteration: async function () {
+      let copyID = await getSelection({ 'cut': 'all', 'var': 'all' });
+      let insertID = await getSelection({ 'cut': 'all', 'var': 'all' });
       let { steps, currentStep, data } = this.state;
       let step = this.copyStep(steps[currentStep]);
       // If the insertID data is not in a subgraph of the copID data, return
@@ -54,7 +54,8 @@ module.exports = (state) => {
       return { steps: steps, currentStep: currentStep, data: data };
     },
 
-    erasure: function (id) {
+    erasure: async function () {
+      let id = await getSelection({ 'cut': 'even', 'var': 'even' });
       let { steps, currentStep, data } = this.state;
       // Create a new step
       let step = this.copyStep(steps[currentStep]);
@@ -84,13 +85,14 @@ module.exports = (state) => {
     /* Adds a double cut given the ID of the data that will be inside the cut.
     *  Will only run if the current step is the last step.
     */
-    doubleCutAdd: function (ID) {
+    doubleCutAdd: async function () {
+      var id = await getSelection({ 'cut': 'all', 'var': 'all' });
       let { steps, currentStep, data } = this.state;
       // create a new step
       let step = this.copyStep(steps[currentStep]);
       // use findID to find the data represented by the id
       // this is the data that will be inside the two new cuts
-      let inside = this.findID(step, ID);
+      let inside = this.findID(step, id);
       if (!inside) {
         return null;
       }
@@ -108,14 +110,14 @@ module.exports = (state) => {
         type: "cut"
       }
       // Set the levels of the two cuts
-      let level = data[ID].level
+      let level = data[id].level
       data[cut2_id] = { type: "cut", level: level + 1};
       data[cut1_id] = { type: "cut", level: level};
       // increase the level of the inside cut along with all cuts inside of it by 2
-      this.changeCutLevel(step, ID, 2)
+      this.changeCutLevel(step, id, 2)
 
       // get the parent of the selection
-      let parent = this.findParent(step, ID)
+      let parent = this.findParent(step, id)
       if (!parent) {
         return null;
       }
@@ -138,13 +140,14 @@ module.exports = (state) => {
     *  the given ID with the contents of the second cut, only if they exist.
     *  Then adds the edited copy of the current step to the end of the step array.
     */
-    doubleCutRemove: function (cutID) {
+    doubleCutRemove: async function () {
+      let id = await getSelection({ 'cut': 'all' });
       let { steps, currentStep, data } = this.state;
       // Create a new step
       let step = this.copyStep(steps[currentStep]);
 
       // use findID to find the cut with the given ID
-      let firstCut = this.findID(step, cutID);
+      let firstCut = this.findID(step, id);
       // If it is actually a cut and has another cut inside
       if (firstCut && firstCut.type === "cut") {
         let secondCut = firstCut.data;
@@ -152,7 +155,7 @@ module.exports = (state) => {
           // Get the data inside the second cut
           let newContents = secondCut[0].data;
           // Get the parent of the original cut being removed
-          let parent = this.findParent(step, cutID)
+          let parent = this.findParent(step, id)
           if (!parent) {
             return null;
           }
diff --git a/src/converters.js b/src/converters.js
index f0b7b2f..f8f659b 100644
--- a/src/converters.js
+++ b/src/converters.js
@@ -104,7 +104,7 @@ const convertToEG = (formula) => {
       let symConversion = operators.eg[binary[3]];
       return symConversion.replace(/\$1/g, left).replace(/\$2/g, right)
     } else if (parenthesis) {
-      if (countUnary(formula) != 0) {
+      if (countUnary(formula) !== 0) {
         return stripUnary(formula)
       }
       return convertToEG(parenthesis[1]);