diff --git a/htrace-core/src/web/app/setup.js b/htrace-core/src/web/app/setup.js
index 3c32118..adb100c 100644
--- a/htrace-core/src/web/app/setup.js
+++ b/htrace-core/src/web/app/setup.js
@@ -45,76 +45,77 @@
   },
 
   "search": function(query) {
-    var top = new app.SearchView();
-    app.root.app.show(top);
-
-    top.controls.show(new app.SearchControlsView({
-      "collection": this.spansCollection
-    }));
-    top.main.show(new Backgrid.Grid({
-      "collection": this.spansCollection,
-      "columns": [{
-        "label": "Begin",
-        "cell": Backgrid.Cell.extend({
-          className: "begin-cell",
-          formatter: {
-            fromRaw: function(rawData, model) {
-              var beginMs = model.get("beginTime")
-              return moment(beginMs).format('YYYY/MM/DD HH:mm:ss,SSS');
-            },
-            toRaw: function(formattedData, model) {
-              return formattedData // data entry not supported for this cell
+    app.root.app.show(new app.SearchView());
+    app.root.app.currentView.controls.show(
+      new app.SearchControlsView({
+        "collection": this.spansCollection
+      }));
+    app.root.app.currentView.main.show(
+      new Backgrid.Grid({
+        "collection": this.spansCollection,
+        "columns": [{
+          "label": "Begin",
+          "cell": Backgrid.Cell.extend({
+            className: "begin-cell",
+            formatter: {
+              fromRaw: function(rawData, model) {
+                var beginMs = model.get("beginTime")
+                return moment(beginMs).format('YYYY/MM/DD HH:mm:ss,SSS');
+              },
+              toRaw: function(formattedData, model) {
+                return formattedData // data entry not supported for this cell
+              }
             }
-          }
-        }),
-        "editable": false,
-        "sortable": false
-      }, {
-        "name": "spanId",
-        "label": "ID",
-        "cell": "string",
-        "editable": false,
-        "sortable": false
-      }, {
-        "name": "processId",
-        "label": "processId",
-        "cell": "string",
-        "editable": false,
-        "sortable": false
-      }, {
-        "label": "Duration",
-        "cell": Backgrid.Cell.extend({
-          className: "duration-cell",
-          formatter: {
-            fromRaw: function(rawData, model) {
-              return model.duration() + " ms"
-            },
-            toRaw: function(formattedData, model) {
-              return formattedData // data entry not supported for this cell
+          }),
+          "editable": false,
+          "sortable": false
+        }, {
+          "name": "spanId",
+          "label": "ID",
+          "cell": "string",
+          "editable": false,
+          "sortable": false
+        }, {
+          "name": "processId",
+          "label": "processId",
+          "cell": "string",
+          "editable": false,
+          "sortable": false
+        }, {
+          "label": "Duration",
+          "cell": Backgrid.Cell.extend({
+            className: "duration-cell",
+            formatter: {
+              fromRaw: function(rawData, model) {
+                return model.duration() + " ms"
+              },
+              toRaw: function(formattedData, model) {
+                return formattedData // data entry not supported for this cell
+              }
             }
+          }),
+          "editable": false,
+          "sortable": false
+        }, {
+          "name": "description",
+          "label": "Description",
+          "cell": "string",
+          "editable": false,
+          "sortable": false
+        }],
+        "row": Backgrid.Row.extend({
+          "events": {
+            "click": "details"
+          },
+          "details": function() {
+            Backbone.history.navigate("!/spans/" + this.model.get("spanId"), {"trigger": true});
           }
-        }),
-        "editable": false,
-        "sortable": false
-      }, {
-        "name": "description",
-        "label": "Description",
-        "cell": "string",
-        "editable": false,
-        "sortable": false
-      }],
-      "row": Backgrid.Row.extend({
-        "events": {
-          "click": "details"
-        },
-        "details": function() {
-          Backbone.history.navigate("!/spans/" + this.model.get("spanId"), {"trigger": true});
-        }
-      })
-    }));
-    top.pagination.show(new Backgrid.Extension.Paginator({
-      collection: this.spansCollection,
-    }));
+        })
+      }));
+    app.root.app.currentView.pagination.show(
+      new Backgrid.Extension.Paginator({
+        collection: this.spansCollection,
+      }));
   },
 
   "span": function(id) {
@@ -127,17 +128,21 @@
       return;
     }
 
-    var top = new app.DetailsView();
-    app.root.app.show(top);
-    top.span.show(new app.SpanDetailsView({
-      "model": span
-    }));
-    top.content.show(new app.GraphView({
+    var graphView = new app.GraphView({
       "collection": this.spansCollection,
-      "spanId": id,
-      "el": top.content.$el[0],
-      "id": "span-" + id
-    }));
+      "id": "span-graph"
+    });
+
+    graphView.on("update:span", function(d) {
+      app.root.app.currentView.span.show(
+        new app.SpanDetailsView({
+          "model": d.span
+        }));
+    });
+
+    app.root.app.show(new app.DetailsView());
+    app.root.app.currentView.content.show(graphView);
+    app.root.app.currentView.content.currentView.setSpanId(id);
   },
 
   "swimlane": function(id, lim) {
diff --git a/htrace-core/src/web/app/views/graph/graph.js b/htrace-core/src/web/app/views/graph/graph.js
index def16d3..7b4f89e 100644
--- a/htrace-core/src/web/app/views/graph/graph.js
+++ b/htrace-core/src/web/app/views/graph/graph.js
@@ -18,42 +18,43 @@
  */
 
 app.GraphView = Backbone.View.extend({
-  "MAX_NODE_SIZE": 100,
-  "MIN_NODE_SIZE": 30,
-
   initialize: function(options) {
     options = options || {};
-    _.bindAll(this, "render");
-    this.collection.bind('change', this.render);
 
     if (!options.id) {
       console.error("GraphView requires argument 'id' to uniquely identify this graph.");
       return;
     }
-    if (!options.el) {
-      console.error("GraphView requires argument 'el' to bind the graph to.");
-      return;
-    }
-    if (!options.spanId) {
-      console.error("GraphView requires argument 'spanId' as a start point.");
-      return;
-    }
 
-    this.spanId = options.spanId;
+    _.bindAll(this, "render");
+    this.collection.bind('change', this.render);
 
-    window.force = this.force
-        = d3.layout.force().size([1000, 1000])
-                           .alpha(0.1)
-                           .linkDistance(this.MAX_NODE_SIZE*2)
-                           .charge(-600)
-                           .linkDistance(150)
-                           .linkStrength(1)
-                           .friction(0.2)
-                           // .gravity(0.1)
+    var links = this.links = [];
+    var linkTable = this.linkTable = {};
+    var nodes = this.nodes = [];
+    var nodeTable = this.nodeTable = {};
+    var force = this.force
+        = d3.layout.force().size([$(window).width(), $(window).height() * 3/4])
+                           .linkDistance($(window).height() / 5)
+                           .charge(-120)
+                           .gravity(0)
                            ;
+    force.nodes(nodes)
+         .links(links);
 
     force.on("tick", function(e) {
       var root = d3.select("#" + options.id);
+      
+      if (!root.node()) {
+        return;
+      }
+
+      var selectedDatum = root.select(".selected").datum();
+
+      // center selected node
+      root.select("svg").attr("width", $(root.node()).width());
+      selectedDatum.x = root.select("svg").attr("width") / 2;
+      selectedDatum.y = root.select("svg").attr("height") / 2;
 
       // Push sources up and targets down to form a weak tree.
       var k = 10 * e.alpha;
@@ -62,142 +63,200 @@
         d.target.y += k;
       });
 
-      // set selected node in the middle.
-      // var selectedNode = force.nodes()[0];
-      // selectedNode.x = 500;
-      // selectedNode.y = 500;
-
       var nodes = root.selectAll(".node").data(force.nodes());
       nodes.select("circle")
         .attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });
       nodes.select("text")
-        .attr("x", function(d) { return d.x; })
+        .attr("x", function(d) { return d.x - this.getComputedTextLength() / 2; })
         .attr("y", function(d) { return d.y; });
       root.selectAll(".link").data(force.links())
-        .attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
+        .attr("d", function(d) {
+          var start = {},
+              end = {},
+              angle = Math.atan2((d.target.x - d.source.x), (d.target.y - d.source.y));
+          start.x = d.source.x + d.source.r * Math.sin(angle);
+          end.x = d.target.x - d.source.r * Math.sin(angle);
+          start.y = d.source.y + d.source.r * Math.cos(angle);
+          end.y = d.target.y - d.source.r * Math.cos(angle);
+          return "M" + start.x + " " + start.y
+              + " L" + end.x + " " + end.y;
+        });
     });
   },
 
-  parents: function(span) {
-    var collection = this.collection;
-    return _(span.get("parents")).map(function(parentSpanId) {
-      collection.findWhere({
-        "spanId": parentSpanId
-      });
-    });
-  },
+  updateLinksAndNodes: function() {
+    if (!this.spanId) {
+      return;
+    }
 
-  children: function(span) {
-    var spanId = span.get("spanId");
-    return this.collection.filter(function(model) {
-      return _(model.get("parents")).contains(spanId);
-    });
-  },
+    var $this = this, collection = this.collection;
 
-  linksAndNodes: function() {
-    var links = [],
-        nodes = [];
     var selectedSpan = this.collection.findWhere({
       "spanId": this.spanId
     });
-    var parents = this.parents(selectedSpan);
-    var children = this.children(selectedSpan);
 
-    var group = 0;
-    var spanToNode = (function() {
-      var xmap = {};
-      return function(span, level) {
-        return {
-          "name": span.get("description"),
-          "span": span
+    var findChildren = function(span) {
+      var spanId = span.get("spanId");
+      var spans = collection.filter(function(model) {
+        return _(model.get("parents")).contains(spanId);
+      });
+      return _(spans).reject(function(span) {
+        return span == null;
+      });
+    };
+    var findParents = function(span) {
+      var spans = _(span.get("parents")).map(function(parentSpanId) {
+        return collection.findWhere({
+          "spanId": parentSpanId
+        });
+      });
+      return _(spans).reject(function(span) {
+        return span == null;
+      });
+    };
+    var spanToNode = function(span, level) {
+      var table = $this.nodeTable;
+      if (!(span.get("spanId") in table)) {
+        table[span.get("spanId")] = {
+          "name": span.get("spanId"),
+          "span": span,
+          "level": level,
+          "group": 0,
+          "x": parseInt($this.svg.attr('width')) / 2,
+          "y": 250 + level * 50
         };
+        $this.nodes.push(table[span.get("spanId")]);
       }
-    })();
+
+      return table[span.get("spanId")];
+    };
     var createLink = function(source, target) {
-      return {
-        "source": source,
-        "target": target
-      };
+      var table = $this.linkTable;
+      var name = source.span.get("spanId") + "-" + target.span.get("spanId");
+      if (!(name in table)) {
+        table[name] = {
+          "source": source,
+          "target": target
+        };
+        $this.links.push(table[name]);
+      }
+
+      return table[name];
     };
 
+    var parents = [], children = [];
     var selectedSpanNode = spanToNode(selectedSpan, 1);
-    nodes.push(selectedSpanNode);
 
+    Array.prototype.push.apply(parents, findParents(selectedSpan));
     _(parents).each(function(span) {
-      var node = spanToNode(span, 0);
-      nodes.push(node);
-      links.push(createLink(node, selectedSpanNode));
+      Array.prototype.push.apply(parents, findParents(span));
+      createLink(spanToNode(span, 0), selectedSpanNode)
     });
 
+    Array.prototype.push.apply(children, findChildren(selectedSpan));
     _(children).each(function(span) {
-      var node = spanToNode(span, 2);
-      nodes.push(node);
-      links.push(createLink(selectedSpanNode, node));
+      Array.prototype.push.apply(children, findChildren(span));
+      createLink(selectedSpanNode, spanToNode(span, 2))
     });
-
-    return {
-      "links": links,
-      "nodes": nodes
-    };
   },
 
   renderLinks: function(selection) {
-    selection.append("line")
-        .attr("class", "link");
+    var path = selection.enter().append("path")
+        .classed("link", true)
+        .style("marker-end",  "url(#suit)");
+    selection.exit().remove();
     return selection;
   },
 
   renderNodes: function(selection) {
-    var MAX_NODE_SIZE = this.MAX_NODE_SIZE,
-        MIN_NODE_SIZE = this.MIN_NODE_SIZE;
-    var g = selection.append("g").attr("class", "node");
-    g.append("circle")
+    var $this = this;
+    var g = selection.enter().append("g").attr("class", "node");
+    var circle = g.append("circle")
       .attr("r", function(d) {
-        var reduced = Math.log(d.span.duration());
+        if (!d.radius) {
+          d.r = Math.log(d.span.duration());
          
-        if (reduced > MAX_NODE_SIZE) {
-          return MAX_NODE_SIZE;
+          if (d.r > app.GraphView.MAX_NODE_SIZE) {
+            d.r = app.GraphView.MAX_NODE_SIZE;
+          }
+
+          if (d.r < app.GraphView.MIN_NODE_SIZE) {
+            d.r = app.GraphView.MIN_NODE_SIZE;
+          }
         }
 
-        if (reduced < MIN_NODE_SIZE) {
-          return MIN_NODE_SIZE;
-        }
-
-        return reduced;
+        return d.r;
       });
     var text = g.append("text").text(function(d) {
-      return d.name;
+      return d.span.get("description");
     });
+
+    selection.exit().remove();
+
+    circle.on("click", function(d) {
+      $this.setSpanId(d.name);
+    });
+
+    selection.classed("selected", null);
+    selection.filter(function(d) {
+      return d.span.get("spanId") == $this.spanId;
+    }).classed("selected", true);
     
     return selection;
   },
 
+  setSpanId: function(spanId) {
+    var $this = this;
+    this.spanId = spanId;
+
+    this.updateLinksAndNodes();
+
+    this.renderNodes(
+      this.svg.selectAll(".node")
+        .data(this.force.nodes(), function(d) {
+          return d.name;
+        }));
+
+    this.renderLinks(
+      this.svg.selectAll(".link")
+        .data(this.force.links(), function(d) {
+          return d.source.name + "-" + d.target.name;
+        }));
+
+    this.force.start();
+
+    Backbone.history.navigate("!/spans/" + spanId);
+    this.trigger("update:span", {"span": this.collection.findWhere({
+      "spanId": spanId
+    })});
+  },
+
   render: function() {
-    var svg = d3.select(this.$el[0]).append("svg")
-      .attr("height", 1000)
-      .attr("width", 1000)
-      .attr("id", this.id);
-    var data = this.linksAndNodes();
+    this.svg = d3.select(this.$el[0]).append("svg");
+    this.svg.attr("height", 500)
+       .attr("width", $(window).width())
+       .attr("id", this.id);
 
-    this.force
-      .nodes(data.nodes)
-      .links(data.links)
-      .start();
-
-    var link = this.renderLinks(
-      svg.selectAll(".link")
-        .data(this.force.links())
-        .enter());
-
-    var node = this.renderNodes(
-      svg.selectAll(".node")
-        .data(this.force.nodes())
-        .enter());
+    // Arrows
+    this.svg.append("defs").selectAll("marker")
+      .data(["suit", "licensing", "resolved"])
+    .enter().append("marker")
+      .attr("id", function(d) { return d; })
+      .attr("viewBox", "0 -5 10 10")
+      .attr("refX", 25)
+      .attr("refY", 0)
+      .attr("markerWidth", 6)
+      .attr("markerHeight", 6)
+      .attr("orient", "auto")
+    .append("path")
+      .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
+      .style("stroke", "#4679BD")
+      .style("opacity", "0.6");
 
     return this;
   }
 });
+
+app.GraphView.MAX_NODE_SIZE = 150;
+app.GraphView.MIN_NODE_SIZE = 50;
diff --git a/htrace-core/src/web/lib/css/main.css b/htrace-core/src/web/lib/css/main.css
index c0a8f3e..1875b60 100644
--- a/htrace-core/src/web/lib/css/main.css
+++ b/htrace-core/src/web/lib/css/main.css
@@ -29,12 +29,17 @@
 
 /* Graph */
 svg .node circle {
-  stroke: #006600;
+  stroke: #000000;
   stroke-width: 3;
-  fill: #00CC00;
+  fill: #D8BFD8;
+}
+
+svg .selected circle {
+  stroke-width: 3;
+  fill: #DA70D6;
 }
 
 svg .link {
   stroke: black;
   stroke-width: 3;
-}
\ No newline at end of file
+}