diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 9243e8f..4a77345 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -16,31 +16,31 @@ const TEXT_H = 22;
 
 function initXY(step, level) {
   let data = {}
-  let prevLevel = 0
   let currentX = 0
   let currentY = 0
   let maxX = 0
   let maxY = 0
 
-  function initXYRecurse(step, level) {
+  // gapSize should be equal to the number of level changes
+  // in between two variables, so that we can evenly place 
+  // them initially across the screen
+  function initXYRecurse(step, level, gapSize) {
     for (let s in step) {
-      if (step[s] instanceof Array) {
-        prevLevel = level
+      if (step[s] instanceof Array && step[s].length > 0) {
         step[s] = initXYRecurse(step[s], level + 1)
       } else {
-        let X = currentX + Math.abs(prevLevel - level) * 25;
+        let X = currentX;
         let Y = currentY;
         let id = nanoid()
         data[id] = { 
           var: step[s], 
           x: Math.round(X/config.gridSize)*config.gridSize, 
-          y: Math.round(Y/config.gridSize)*config.gridSize
+          y: Math.round(Y/config.gridSize)*config.gridSize,
         }
         step[s] = id
         maxY = Y > maxY ? Y : maxY;
         maxX = X > maxX ? X : maxX;
-        prevLevel = level
-        currentX += 50
+        currentX += config.initialSeparation
       }
     }
     return step
@@ -130,6 +130,7 @@ class Canvas extends React.Component {
       let { premises, conclusion } = this.state.proof;
       let { stepZero, data } = initXY(convertToArray(premises.join('')), 0);
       steps.push(stepZero);
+      console.log(data)
       this.setState({ steps: steps, currentStep: 0, data: data });
     }
     let step = this.state.steps[this.state.currentStep];
diff --git a/src/canvas/Cut.js b/src/canvas/Cut.js
index c525d0e..1ebc747 100644
--- a/src/canvas/Cut.js
+++ b/src/canvas/Cut.js
@@ -13,10 +13,10 @@ class DraggableText extends React.Component {
   getBBoxData() {
     if (this.cut.current) {
       let { x, y, width, height } = this.cut.current.getBBox();
-      let _x = x - config.cutPadding;
-      let _y = y - config.cutPadding;
-      let _w = width + config.cutPadding * 2;
-      let _h = height + config.cutPadding * 2;
+      let _x = x - config.cutPadding.horizontal;
+      let _y = y - config.cutPadding.vertical;
+      let _w = width + config.cutPadding.horizontal * 2;
+      let _h = height + config.cutPadding.vertical * 2;
       return { _x, _y, _w, _h };
     }
     return {};
@@ -37,29 +37,31 @@ class DraggableText extends React.Component {
 
   render() {
     let b = this.getBBoxData();
-    if (this.props.children.length > 0)
-      return (
-        <React.Fragment>
-          <rect
-            x={b._x}
-            y={b._y}
-            width={b._w}
-            height={b._h}
-            ref={this.BB}
-            fillOpacity="0.7" 
-            strokeOpacity="1"
-            stroke="black"
-            fill="white"
-            pointerEvents="none"
-            rx={config.cutCornerRadius.toString()} 
-            ry={config.cutCornerRadius.toString()} 
-          />
-          <g ref={this.cut}>
-            {this.props.children}
-          </g>
-        </React.Fragment>
-      );
-    else return <React.Fragment />
+    let childEl = this.props.children;
+    if (childEl.length < 1) {
+      childEl = <DraggableText>{" "}</DraggableText>
+    }
+    return (
+      <React.Fragment>
+        <rect
+          x={b._x}
+          y={b._y}
+          width={b._w}
+          height={b._h}
+          ref={this.BB}
+          fillOpacity="0.7" 
+          strokeOpacity="1"
+          stroke="black"
+          fill="white"
+          pointerEvents="none"
+          rx={config.cutCornerRadius.toString()} 
+          ry={config.cutCornerRadius.toString()} 
+        />
+        <g ref={this.cut}>
+          {this.props.children}
+        </g>
+      </React.Fragment>
+    );
   }
 }
 
diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 7c6c083..b3c186f 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -13,9 +13,9 @@ class StepMenu extends React.Component {
     };
     // changes the color of the prev or next buttons to be grayed out
     // if the current step is the first or last step
-    if(this.props.currentStep == 0){
+    // if(this.props.currentStep == 0){
       this.state.backColor = "rgb(136, 136, 136)";
-    }
+    // }
     if(this.props.currentStep == this.props.stepInfo.length){
       this.state.nextColor = "rgb(136, 136, 136)";
     }
diff --git a/src/canvas/config.js b/src/canvas/config.js
index 47b2db9..6aba5ba 100644
--- a/src/canvas/config.js
+++ b/src/canvas/config.js
@@ -1,5 +1,9 @@
 export default {
-  gridSize: 1,
-  cutPadding: 5,
-  cutCornerRadius: 7
+  gridSize: 5,
+  cutPadding: {
+    horizontal: 10,
+    vertical: 5
+  },
+  cutCornerRadius: 7,
+  initialSeparation: 80,
 }
\ No newline at end of file
diff --git a/src/converters.js b/src/converters.js
index 3f25daf..ba67ba9 100644
--- a/src/converters.js
+++ b/src/converters.js
@@ -117,8 +117,6 @@ const convertToArray = (formula, i = 0) => {
     let arr = []
     // loop through the string
     while (i < formula.length) {
-      console.log(i,formula)
-      console.log(arr)
       // if closing parenthesis, return the array for this subexpression
       if (formula[i] === '(') {
         // find the matching pair of parentheses of the subexpression
@@ -131,7 +129,9 @@ const convertToArray = (formula, i = 0) => {
       }
       // if a variable is found, push it to the array
       else if (formula[i] === '{') {
-        arr.push(formula[++i])
+        let text = formula[++i];
+        if (text === '}') arr.push('\u00A0')
+        else arr.push(text)
         i++
       }
       i++