diff --git a/src/App.js b/src/App.js
index 3cc54f2..8d1f1a7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,7 @@ class App extends React.Component {
       initialCSS: 'initial',
       canvasOpen: true,
       popupOpen: false,
-      proof: {premises: ["(({Q}))(({P}){Q})"], conclusion: "{Q}", steps:[] }
+      proof: {premises: ["({Q})(({P}){Q})"], conclusion: "{Q}", steps:[] }
     };
   }
 
diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 16b749a..a25a4ed 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -426,6 +426,15 @@ class Canvas extends React.Component {
     return false;
   }
 
+  highlightVar(level) {
+    if (this.state.highlights.var === 'all') return true;
+    let odd = false;
+    if (level % 2 === 1) odd = true;
+    if (this.state.highlights.var === 'odd' && odd) return true;
+    else if (this.state.highlights.var === 'even' && !odd) return true;
+    return false;
+  }
+
   renderStep(stepIndex) {
     let { data } = this.state;
     let step = this.state.steps[stepIndex]
@@ -452,14 +461,17 @@ class Canvas extends React.Component {
             );
             jsx.push(groupElement);
           } else {
-            let el = this.state.data[step[s]]
+            let el = this.state.data[step[s]];
+            let level = data[step[s]].level;
             jsx.unshift(
               <EGVariable 
                 x={el.x} 
                 y={el.y} 
                 id={step[s]} 
+                enableHighlight={this.highlightVar(level)}
+                selectedCallback={this.state.cbFunction}
                 panzoom={this.panzoom}
-                interaction={this.state.interaction}
+                interaction={this.state.interaction || this.highlightVar(level)}
                 getCoords={this.getSVGCoords}
                 setCoords={(x,y) => setXY(step[s],x,y)}
                 key={step[s]}>
diff --git a/src/canvas/EGCut.js b/src/canvas/EGCut.js
index 085089e..c3f9680 100644
--- a/src/canvas/EGCut.js
+++ b/src/canvas/EGCut.js
@@ -11,7 +11,7 @@ class EGCut extends React.Component {
     this.update = this.update.bind(this);
     this.state = { highlight: false, bounding: {_x:0,_y:0,_w:0,_h:0} };
 
-    this.eventListener = window.addEventListener('click', this.handleClick)
+    window.addEventListener('click', this.handleClick)
   }
 
   handleClick() {
diff --git a/src/canvas/EGVariable.js b/src/canvas/EGVariable.js
index 725703e..4dde2de 100644
--- a/src/canvas/EGVariable.js
+++ b/src/canvas/EGVariable.js
@@ -6,6 +6,7 @@ class EGVariable extends React.Component {
     super(props);
     this.text = React.createRef()
     this.getCoords = this.props.getCoords
+    this.handleClick = this.handleClick.bind(this);
     this.state = {
       x: props.x,
       y: props.y,
@@ -18,6 +19,17 @@ class EGVariable extends React.Component {
     window.addEventListener('mousemove', this.onMouseMove.bind(this))
     window.addEventListener('mousedown', this.handleDragStart.bind(this))
     window.addEventListener('mouseup', this.handleDragEnd.bind(this))
+    window.addEventListener('click', this.handleClick)
+  }
+
+  handleClick() {
+    if (this.state.cursorOver 
+      && this.props.enableHighlight 
+      && this.props.selectedCallback) 
+    {
+      this.props.selectedCallback(this.props.id);
+      this.setState({ cursorOver: false });
+    }
   }
 
   componentDidMount() {  
@@ -48,7 +60,15 @@ class EGVariable extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('click', this.handleClick);
+    window.removeEventListener('mousemove', this.onMouseMove.bind(this))
+    window.removeEventListener('mousedown', this.handleDragStart.bind(this))
+    window.removeEventListener('mouseup', this.handleDragEnd.bind(this))
+  }
+
   render() {
+    let highlight = this.state.cursorOver && this.props.enableHighlight;
     return (
       <text 
         className="noselect"
@@ -56,6 +76,7 @@ class EGVariable extends React.Component {
         x={this.state.x} 
         y={this.state.y} 
         id={this.props.id}
+        fill={highlight ? "blue" : "black"}
         onMouseEnter={() => this.setState({ cursorOver: true })}
         onMouseLeave={() => this.setState({ cursorOver: false })}
         ref={this.text}>
diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 7349273..f825146 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -2,32 +2,40 @@ import React from 'react';
 import { ReactSVG } from 'react-svg';
 
 class StepMenu extends React.Component {
-  handleClick(event, step) {
+  handleClick(event, step, disabled) {
     event.preventDefault();
-    // Must update color before updating props to allow component to
-    // render with the proper current color rather than the state before
-    this.props.setStep(step);
+    if (!disabled) {
+      // Must update color before updating props to allow component to
+      // render with the proper current color rather than the state before
+      this.props.setStep(step);
+    }
+  }
+
+  getColor(disabled) {
+    return disabled ? "rgb(136, 136, 136)" : "rgb(68, 68, 68)";
   }
 
   render() {
     let { hide, currentStep, stepInfo } = this.props;
     if (hide) return (<React.Fragment />);
+    let backEnabled = currentStep === (stepInfo.length - 1);
+    let forwardEnabled = currentStep === 0;
     return (
       <React.Fragment>
         <div className="step-menu">
-        <div style={{ color: currentStep === 0 ? "rgb(136, 136, 136)" : "rgb(68, 68, 68)"}}>
-          <div onClick={(event) => this.handleClick(event, 0)}>
+        <div style={{ color: this.getColor(forwardEnabled)}}>
+          <div onClick={(event) => this.handleClick(event, 0, forwardEnabled)}>
             <ReactSVG src="/assets/step-first.svg"/>
           </div>
-          <div onClick={(event) => this.handleClick(event, currentStep - 1)}>
+          <div onClick={(event) => this.handleClick(event, currentStep - 1, forwardEnabled)}>
             <ReactSVG src="/assets/step-prev.svg" />
           </div>
         </div>
-        <div style={{ color: currentStep === (stepInfo.length - 1) ? "rgb(136, 136, 136)" : "rgb(68, 68, 68)" }}>
-          <div onClick={(event) => this.handleClick(event, currentStep + 1)}>
+        <div style={{ color: this.getColor(backEnabled)  }}>
+          <div onClick={(event) => this.handleClick(event, currentStep + 1, backEnabled)}>
             <ReactSVG src="/assets/step-next.svg" />
           </div>
-          <div onClick={(event) => this.handleClick(event, stepInfo.length - 1)}>
+          <div onClick={(event) => this.handleClick(event, stepInfo.length - 1, backEnabled)}>
             <ReactSVG src="/assets/step-last.svg" />
           </div>
         </div>
diff --git a/src/canvas/Toolbox.js b/src/canvas/Toolbox.js
index 2bc2766..a79fc25 100644
--- a/src/canvas/Toolbox.js
+++ b/src/canvas/Toolbox.js
@@ -18,7 +18,7 @@ class Toolbox extends React.Component {
         {
           str: "Add Double Cut",
           func: 'dcAdd',
-          highlight: { 'cut': 'all' }
+          highlight: { 'cut': 'all', 'var': 'all' }
         },
         {
           str: "Insertion",