diff --git a/src/collections.js b/src/collections.js
index 27443689..8d6014a8 100644
--- a/src/collections.js
+++ b/src/collections.js
@@ -6,6 +6,10 @@ var CommandCollection = Backbone.Collection.extend({
   model: Command,
 });
 
+var BranchCollection = Backbone.Collection.extend({
+  model: Branch
+});
+
 var CommandBuffer = Backbone.Model.extend({
   defaults: {
     collection: null,
diff --git a/src/git.js b/src/git.js
index 1dc37702..197e82b1 100644
--- a/src/git.js
+++ b/src/git.js
@@ -11,7 +11,7 @@ function GitEngine(options) {
   this.refs = {};
   this.HEAD = null;
   this.id_gen = 0;
-  this.branches = [];
+  this.branches = options.branches;
   this.collection = options.collection;
 
   // global variable to keep track of the options given
@@ -82,7 +82,7 @@ GitEngine.prototype.makeBranch = function(id, target) {
     target: target,
     id: id
   });
-  this.branches.push(branch);
+  this.branches.add(branch);
   this.refs[branch.get('id')] = branch;
   return branch;
 };
@@ -93,7 +93,7 @@ GitEngine.prototype.getHead = function() {
 
 GitEngine.prototype.getBranches = function() {
   var toReturn = [];
-  _.each(this.branches, function(branch) {
+  this.branches.each(function(branch) {
     toReturn.push({
       id: branch.get('id'),
       selected: this.HEAD.get('target') === branch,
@@ -669,6 +669,7 @@ GitEngine.prototype.deleteBranch = function(name) {
   target.delete();
   delete this.refs[id];
   // delete from array
+  // TODO
   var toDelete = -1;
   _.each(this.branches, function(branch, index) {
     console.log(branch);
@@ -799,7 +800,7 @@ var Ref = Backbone.Model.extend({
   }
 });
 
-var Branch  = Ref.extend({
+var Branch = Ref.extend({
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');
diff --git a/src/main.js b/src/main.js
index 2969b4eb..007dfa90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ $(document).ready(function(){
   // the two major collections that affect everything
   var commitCollection = new CommitCollection();  
   commandCollection = new CommandCollection();
+  var branchCollection = new BranchCollection();
 
   commandBuffer = new CommandBuffer({
     collection: commandCollection
@@ -30,11 +31,13 @@ $(document).ready(function(){
   });
 
   gitVisuals = new GitVisuals({
-    collection: commitCollection
+    commitCollection: commitCollection,
+    branchCollection: branchCollection
   });
 
   gitEngine = new GitEngine({
-    collection: commitCollection
+    collection: commitCollection,
+    branches: branchCollection
   });
 
   $('#commandTextField').focus();
diff --git a/src/tree.js b/src/tree.js
index 009de939..3abe8dcc 100644
--- a/src/tree.js
+++ b/src/tree.js
@@ -1,3 +1,60 @@
+var VisBranch = Backbone.Model.extend({
+  defaults: {
+    pos: null
+  },
+
+  validateAtInit: function() {
+    if (!this.get('branch')) {
+      throw new Error('need a branch!');
+    }
+  },
+
+  initialize: function() {
+    this.validateAtInit();
+  },
+
+  getPosition: function() {
+    var commit = this.get('branch').get('target');
+    var visNode = commit.get('visNode');
+    var pos = visNode.getScreenCoords();
+    return {
+      x: pos.x + 30,
+      y: pos.y
+    };
+  },
+
+  genGraphics: function(paper) {
+    var pos = this.getPosition();
+    if (!paper) {
+      console.log('no paper');
+      return;
+    }
+    var name = this.get('branch').get('id');
+    var circle = paper.text(pos.x, pos.y, String(name));
+    this.set('text', circle);
+  },
+
+  animateUpdatedPos: function(paper) {
+    var pos = this.getPosition();
+    var t = this.get('text');
+    if (!t) {
+      this.genGraphics(paper);
+      t = this.get('text');
+      // TODO HACKY
+    }
+    this.get('text').toFront().stop().animate({
+        x: pos.x,
+        y: pos.y
+      },
+      300,
+      'easeInOut'
+    );
+  }
+});
+
+
+
+
 var VisNode = Backbone.Model.extend({
   defaults: {
     depth: undefined,
@@ -163,3 +220,7 @@ var VisEdge = Backbone.Model.extend({
 var VisEdgeCollection = Backbone.Collection.extend({
   model: VisEdge
 });
+
+var VisBranchCollection = Backbone.Collection.extend({
+  model: VisBranch
+});
diff --git a/src/visuals.js b/src/visuals.js
index 5057f59e..f655787e 100644
--- a/src/visuals.js
+++ b/src/visuals.js
@@ -1,7 +1,10 @@
 function GitVisuals(options) {
-  this.commitCollection = options.collection;
+  this.commitCollection = options.commitCollection;
+  this.branchCollection = options.branchCollection;
   this.visNodeMap = {};
+
   this.edgeCollection = new VisEdgeCollection();
+  this.visBranchCollection = new VisBranchCollection();
 
   this.commitMap = {};
   this.rootCommit = null;
@@ -11,6 +14,9 @@ function GitVisuals(options) {
   this.paperHeight = null;
 
   this.commitCollection.on('change', this.collectionChanged, this);
+
+  this.branchCollection.on('add', this.addBranch, this);
+  this.branchCollection.on('remove', this.removeBranch, this);
   
   events.on('canvasResize', _.bind(
     this.canvasResize, this
@@ -70,6 +76,7 @@ GitVisuals.prototype.refreshTree = function() {
   this.calculateTreeCoords();
   this.animateNodePositions();
   this.animateEdges();
+  this.animateRefs();
 };
 
 GitVisuals.prototype.calculateTreeCoords = function() {
@@ -104,8 +111,6 @@ GitVisuals.prototype.assignBoundsRecursive = function(commit, min, max) {
   // I always center myself within my bounds
   var myWidthPos = (min + max) / 2.0;
   commit.get('visNode').get('pos').x = myWidthPos;
-  // TODO get rid of
-  // commit.get('visNode').get('pos').x = Math.random();
 
   if (commit.get('children').length == 0) {
     return;
@@ -167,6 +172,22 @@ GitVisuals.prototype.animateNodePositions = function() {
   }, this);
 };
 
+GitVisuals.prototype.addBranch = function(branch) {
+  var visBranch = new VisBranch({
+    branch: branch
+  });
+  this.visBranchCollection.add(visBranch);
+  if (this.paperReady) {
+    visBranch.genGraphics();
+  }
+};
+
+GitVisuals.prototype.animateRefs = function() {
+  this.visBranchCollection.each(function(visBranch) {
+    visBranch.animateUpdatedPos(paper);
+  }, this);
+};
+
 GitVisuals.prototype.animateEdges = function() {
   this.edgeCollection.each(function(edge) {
     edge.animateUpdatedPath();
@@ -254,6 +275,10 @@ GitVisuals.prototype.drawTreeFirstTime = function() {
   this.edgeCollection.each(function(edge) {
     edge.genGraphics(paper);
   }, this);
+
+  this.visBranchCollection.each(function(visBranch) {
+    visBranch.genGraphics(paper);
+  }, this);
 };