diff --git a/src/commandViews.js b/src/commandViews.js
index 8dea1e40..4e8108c1 100644
--- a/src/commandViews.js
+++ b/src/commandViews.js
@@ -70,6 +70,7 @@ var CommandPromptView = Backbone.View.extend({
     _.each(value.split(';'), _.bind(function(command, index) {
       command = command.replace(/^(\s+)/, '');
       command = command.replace(/(\s+)$/, '');
+      command = _.escape(command);
 
       if (index > 0 && !command.length) {
         return;
diff --git a/src/git.js b/src/git.js
index 6ea23e78..a6e513fc 100644
--- a/src/git.js
+++ b/src/git.js
@@ -61,6 +61,13 @@ GitEngine.prototype.validateBranchName = function(name) {
       msg: 'branch name of "head" is ambiguous, dont name it that'
     });
   }
+  if (name.length > 9) {
+    name = name.slice(0, 9);
+    this.command.addWarning(
+      'Sorry, we need to keep branch names short for the visuals. Your branch ' +
+      'name was truncated to 9 characters, resulting in ' + name
+    );
+  }
   return name;
 };
 
@@ -91,7 +98,8 @@ GitEngine.prototype.getBranches = function() {
     toReturn.push({
       id: branch.get('id'),
       selected: this.HEAD.get('target') === branch,
-      target: branch.get('target')
+      target: branch.get('target'),
+      obj: branch
     });
   }, this);
   return toReturn;
@@ -568,8 +576,9 @@ GitEngine.prototype.checkoutStarter = function() {
     if (args.length == 1) {
       args.push('HEAD');
     }
-    this.branch(args[0], args[1]);
-    this.checkout(args[0]);
+    var validId = this.validateBranchName(args[0]);
+    this.branch(validId, args[1]);
+    this.checkout(validId);
     return;
   }
 
@@ -634,6 +643,7 @@ GitEngine.prototype.branchStarter = function() {
     // making a branch from where we are now
     this.generalArgs.push('HEAD');
   }
+
   this.branch(this.generalArgs[0], this.generalArgs[1]);
 };
 
@@ -715,6 +725,7 @@ GitEngine.prototype.dispatch = function(command, callback) {
       gitVisuals.refreshTree();
     }
   }));
+
   // TODO (get rid of)
   for (var i = 0; i < 1; i++) {
     this.animationQueue.add(new Animation({closure: function() { console.log(Math.random()); }}));
@@ -840,6 +851,10 @@ var Ref = Backbone.Model.extend({
 });
 
 var Branch = Ref.extend({
+  defaults: {
+    visBranch: null,
+  },
+
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');
@@ -853,7 +868,8 @@ var Commit = Backbone.Model.extend({
     parents: null,
     author: 'Peter Cottle',
     createTime: null,
-    commitMessage: null
+    commitMessage: null,
+    visNode: null
   },
 
  getLogEntry: function() {
diff --git a/src/tree.js b/src/tree.js
index ed17da05..d43fb09a 100644
--- a/src/tree.js
+++ b/src/tree.js
@@ -34,7 +34,13 @@ var VisBranch = Backbone.Model.extend({
 
   getBranchStackIndex: function() {
     var myArray = this.getBranchStackArray();
-    return myArray.indexOf(this.get('branch').get('id'));
+    var index = -1;
+    _.each(myArray, function(branch, i) {
+      if (branch.obj == this.get('branch')) {
+        index = i;
+      }
+    }, this);
+    return index;
   },
 
   getBranchStackLength: function() {
@@ -107,11 +113,25 @@ var VisBranch = Backbone.Model.extend({
   },
 
   getTextSize: function() {
+    var getTextWidth = function(visBranch) {
+      var textNode = visBranch.get('text').node;
+      return textNode.clientWidth;
+    };
+
     var textNode = this.get('text').node;
-    var w = textNode.clientWidth;
-    var h = textNode.clientHeight;
+
+    var maxWidth = 0;
+    _.each(this.getBranchStackArray(), function(branch) {
+      maxWidth = Math.max(maxWidth, getTextWidth(
+        branch.obj.get('visBranch')
+      ));
+      console.log('this branch', branch.id, 'is selected', branch.selected);
+      console.log('and i just calculated its width', getTextWidth(branch.obj.get('visBranch')));
+    });
+    console.log('I am ****', this.getName(), ' and got max width of', maxWidth);
+
     return {
-      w: textNode.clientWidth,
+      w: maxWidth,
       h: textNode.clientHeight
     };
   },
@@ -158,7 +178,8 @@ var VisBranch = Backbone.Model.extend({
     var name = this.getName();
     var text = paper.text(textPos.x, textPos.y, String(name));
     text.attr({
-      'font-size': 16
+      'font-size': 14,
+      'font-family': 'Monaco, Courier, font-monospace'
     });
     this.set('text', text);
 
@@ -193,6 +214,7 @@ var VisBranch = Backbone.Model.extend({
     this.get('text').attr({
       text: this.getName()
     });
+
     var textPos = this.getTextPosition();
     this.get('text').stop().animate({
       x: textPos.x,
diff --git a/src/visuals.js b/src/visuals.js
index 30dd7849..c8c7f962 100644
--- a/src/visuals.js
+++ b/src/visuals.js
@@ -107,8 +107,15 @@ GitVisuals.prototype.calcBranchStacks = function() {
     var thisId = branch.target.get('id');
 
     map[thisId] = map[thisId] || [];
-    map[thisId].push(branch.id);
-    map[thisId].sort();
+    map[thisId].push(branch);
+    map[thisId].sort(function(a, b) {
+      var aId = a.obj.get('id');
+      var bId = b.obj.get('id');
+      if (aId == 'master' || bId == 'master') {
+        return aId == 'master' ? -1 : 1;
+      }
+      return aId.localeCompare(bId);
+    });
   });
   this.branchStackMap = map;
 };
@@ -208,10 +215,11 @@ GitVisuals.prototype.addBranch = function(branch) {
   var visBranch = new VisBranch({
     branch: branch
   });
+  branch.set('visBranch', visBranch);
+
   this.visBranchCollection.add(visBranch);
   if (this.paperReady) {
     visBranch.genGraphics(paper);
-    this.zIndexReflow();
   }
 };