diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 2e03189..68b6ba3 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { convertToArray } from '../converters';
+import { convertToArray, convertToTeX, convertToEG } from '../converters';
 import Toolbox from './Toolbox';
 import StepMenu from './StepMenu';
 import EGVariable from './EGVariable';
@@ -10,6 +10,10 @@ import DropdownMenu from './DropdownMenu';
 import config from './config';
 import manipulate from './manipulate';
 import { CSSTransitionGroup } from 'react-transition-group';
+// KATEX
+import 'katex/dist/katex.min.css';
+import TeX from '@matejmazur/react-katex';
+
 const nanoid = require('nanoid').nanoid;
 
 /**
@@ -105,7 +109,9 @@ class Canvas extends React.Component {
         doubleCutRemove: () => manipulate(this).doubleCutRemove(),
         doubleCutEnclose: () => manipulate(this).doubleCutEnclose(),
         doubleCutAdd: () => manipulate(this).doubleCutAdd(),
-      }
+      },
+      formula: '',
+      fitchNotation: false
     }
   }
 
@@ -247,7 +253,7 @@ class Canvas extends React.Component {
     currentStep.push(id);
     this.setState({ data });
   }
-  
+
   removeElement(id) {
     let { steps } = this.state;
     steps[this.state.currentStep].push(id);
@@ -383,6 +389,8 @@ class Canvas extends React.Component {
     if (this.panzoom)
       zoomWithWheel = this.panzoom.zoomWithWheel
     // CSSTransitionGroup lets us have entry fade-in
+    let tex = convertToTeX(this.state.formula);
+    let eg = convertToEG(this.state.formula);
     return (
       <CSSTransitionGroup
         transitionName="fadein"
@@ -390,7 +398,43 @@ class Canvas extends React.Component {
         transitionAppearTimeout={500}
         transitionEnter={false}
         transitionLeaveTimeout={300}>
-        <div key={'main-div'} className="noselect">
+        <div className="insertOverlay">
+          <h1>Formula to Insert</h1>
+          <input 
+            name="notation" 
+            type="checkbox" 
+            className="check" 
+            onChange={ (e) => this.setState({ fitchNotation: !this.state.fitchNotation }) } />
+          <label for="notation">&nbsp;Use Fitch-style notation</label><br />
+          {this.state.fitchNotation ? (
+              <div>
+                <table>
+                  <tbody>
+                    <tr>
+                      <td style={{ width: '40%' }}>
+                        <input onChange={ (e) => this.setState({ formula: e.target.value }) } />
+                      </td>
+                      <td>
+                        {tex && <TeX math={tex} />}
+                      </td>
+                    </tr>
+                    <tr />
+                  </tbody>
+                </table>
+                To insert: {eg && <TeX math={eg} />}
+              </div>
+            ) : (
+              <div>
+                <input onChange={ (e) => this.setState({ formula: e.target.value }) } /><br />
+                To insert: <TeX math={this.state.formula} />
+              </div>
+            )}
+          <span className='buttons'>
+            <button>Insert</button>
+            <button>Cancel</button>
+          </span>
+        </div>
+        <div key={'main-div'} className="mainCanvas noselect">
           <DropdownMenu 
             menuItems={this.props.menuItems}/>
           <Toolbox 
diff --git a/src/canvas/Canvas.scss b/src/canvas/Canvas.scss
index f0dd441..cbc939b 100644
--- a/src/canvas/Canvas.scss
+++ b/src/canvas/Canvas.scss
@@ -183,4 +183,45 @@
 .fadein-appear.fadein-appear-active {
   opacity: 1;
   transition: 1.0s;
+}
+
+.insertOverlay {
+  border-radius: 25px;
+  padding: 15px;
+  background-color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0.5px 3px 0 rgba(0,0,0,0.35);
+  h1 {
+    font-size: 2.4rem;
+  }
+  .check {
+    width: inherit;
+    height: inherit;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .buttons {
+    margin-top: 20px;
+    float: right;
+    button {
+      border-radius: 15px;
+      margin-right: 4px;
+    }
+  }
+}
+
+.mainCanvas {
+  transition: 
+    0.5s filter ease-in-out, 
+    0.5s -webkit-filter ease-in-out !important;
+  background-color: rgb(255,255,255);
+}
+
+.mainCanvas.disabled {
+  pointer-events: none;
+  filter: brightness(0.5);
+  backdrop-filter: brightness(0.5);
 }
\ No newline at end of file
diff --git a/src/canvas/manipulate.js b/src/canvas/manipulate.js
index 71119d9..c648e2b 100644
--- a/src/canvas/manipulate.js
+++ b/src/canvas/manipulate.js
@@ -29,7 +29,8 @@ module.exports = ({ state, getSelection, getInsertionPoint }) => {
       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
-      if (!this.isInNestedGraph(step, insertID, copyID)) {
+      let parentID = this.findParent(step, copyID).id;
+      if (!this.isInNestedGraph(step, insertID, parentID)) {
         console.log("Insert selection is not in a subgraph of Copy selection");
         return null;
       }
@@ -44,6 +45,7 @@ module.exports = ({ state, getSelection, getInsertionPoint }) => {
         console.log("Insert ID could not be found in Iterate");
         return null;
       }
+      console.log(copy)
       insert.data = insert.data.concat(copy);
       let newCopyID = copy;
       if (typeof copy !== 'string')