diff --git a/app/index.html b/app/index.html
index f85e53ba..6802d6ee 100644
--- a/app/index.html
+++ b/app/index.html
@@ -2,28 +2,27 @@
 <html ng-app="app" ng-strict-di="true">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-  <base href="/">
   <title ng-bind="title">Coriolis</title>
-  <link rel="stylesheet" href="app.css">
-  <link rel="apple-touch-icon" sizes="76x76" href="images/logo/apple-touch-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="images/logo/apple-touch-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="images/logo/apple-touch-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="images/logo/apple-touch-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="images/logo/apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="images/logo/apple-touch-icon-180x180.png">
-  <link rel="icon" sizes="96x96" type="image/png" href="images/logo/favicon-96x96.png">
-  <link rel="icon" sizes="194x194" type="image/png" href="images/logo/favicon-194x194.png">
-  <link rel="icon" sizes="192x192" type="image/png" href="images/logo/android-chrome-192x192.png">
-  <link rel="manifest" href="images/logo/manifest.json">
-  <link rel="shortcut icon" href="images/logo/favicon.ico">
+  <link rel="stylesheet" href="/app.css">
+  <link rel="apple-touch-icon" sizes="76x76" href="/images/logo/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/images/logo/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/images/logo/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/images/logo/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/images/logo/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/logo/apple-touch-icon-180x180.png">
+  <link rel="icon" sizes="96x96" type="image/png" href="/images/logo/favicon-96x96.png">
+  <link rel="icon" sizes="194x194" type="image/png" href="/images/logo/favicon-194x194.png">
+  <link rel="icon" sizes="192x192" type="image/png" href="/images/logo/android-chrome-192x192.png">
+  <link rel="manifest" href="/images/logo/manifest.json">
+  <link rel="shortcut icon" href="/images/logo/favicon.ico">
   <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="msapplication-TileImage" content="images/logo/mstile-144x144.png">
-  <meta name="msapplication-config" content="images/logo/browserconfig.xml">
+  <meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png">
+  <meta name="msapplication-config" content="/images/logo/browserconfig.xml">
   <meta name="theme-color" content="#000000">
   <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 </head>
 <body ng-class="bodyClass" ng-click="bgClicked($event)">
-  <div style="height: 0; width: 0; position: absolute; visibility: hidden"><%= svgContent %></div>
+  <div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>
   <shipyard-header></shipyard-header>
   <div id="main" ui-view></div>
 
@@ -33,13 +32,13 @@
     <div class="right">
       <a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">Version <%= version %> - <%= date %></a>
     </div>
-    <div class="l">
+    <div style="max-width:50%" class="l">
       Coriolis Shipyard was created for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments.
     </div>
   </footer>
 
-  <script src="lib.js" type="text/javascript"></script>
-  <script src="app.js" type="text/javascript"></script>
+  <script src="/lib.js" type="text/javascript"></script>
+  <script src="/app.js" type="text/javascript"></script>
   <% if (uaTracking) { %>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/app/js/config.js b/app/js/config.js
index c776effa..b3bd79fa 100644
--- a/app/js/config.js
+++ b/app/js/config.js
@@ -3,7 +3,7 @@
  */
 angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider', '$locationProvider', 'ShipsDB', function ($provide, $stateProvider, $urlRouterProvider, $locationProvider, ships) {
   // Use HTML5 push and replace state if possible
-  $locationProvider.html5Mode(true);
+  $locationProvider.html5Mode({enabled: true, requireBase: false});
   /**
    * Set up all states and their routes.
    */
diff --git a/app/js/controllers/controller-comparison.js b/app/js/controllers/controller-comparison.js
index 3fc28d03..0db65cde 100644
--- a/app/js/controllers/controller-comparison.js
+++ b/app/js/controllers/controller-comparison.js
@@ -1,34 +1,66 @@
-angular.module('app').controller('ComparisonController', ['$rootScope', '$scope', 'ShipsDB', 'Ship', 'Persist', 'Serializer', function ($rootScope, $scope, Ships, Ship, Persist, Serializer) {
+angular.module('app').controller('ComparisonController', ['$rootScope', '$filter', '$scope', 'ShipFacets', 'ShipsDB', 'Ship', 'Persist', 'Serializer', function ($rootScope, $filter, $scope, ShipFacets, Ships, Ship, Persist, Serializer) {
   $rootScope.title = 'Coriolis - Comparison';
-  $rootScope.bodyClass = 'docking-bay';
+  $rootScope.bodyClass = null;
+  $scope.facets = ShipFacets;
+  $scope.subFacets = [];
+
+  for (var i = 0, l = $scope.facets.length; i < l; i++) {
+    var facet = $scope.facets[i];
+    if(facet.prop) {
+      $scope.subFacets.push({
+          prop: facet.prop,
+          fmt: $rootScope[facet.fmt],
+          unit: facet.unit
+        });
+    } else {
+      for (var j = 0, pl = facet.props.length; j < pl; j++) {
+        $scope.subFacets.push({
+          sub: true,
+          start: j == 0,
+          prop: facet.props[j],
+          label: facet.lbls[j],
+          fmt: $rootScope[facet.fmt],
+          unit: facet.unit
+        });
+      }
+    }
+  }
 
   var comparison = $scope.comparison = [];
+  var orderBy = $filter('orderBy');
+  var buildCount = 0;
 
   for (var shipId in Persist.builds) {
     var data = Ships[shipId];
     for (var buildName in Persist.builds[shipId]) {
       var code = Persist.builds[shipId][buildName];
-      var ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
-      Serializer.toShip(ship, code);  // Populate components from 'code' URL param
-
-      comparison.push({
-        shipId: shipId,
-        buildName: buildName,
-        ship: ship,
-        code: code,
-        pctRetracted: ship.powerRetracted / ship.powerAvailable,
-        pctDeployed: ship.powerDeployed / ship.powerAvailable,
-      });
+      var b = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
+      Serializer.toShip(b, code);  // Populate components from 'code' URL param
+      // Extend ship instance and add properties below
+      b.buildName = buildName;
+      b.code = code;
+      b.pctRetracted = b.powerRetracted / b.powerAvailable;
+      b.pctDeployed = b.powerDeployed / b.powerAvailable;
+      comparison.push(b); // Add ship build to comparison
     }
   }
 
+  $scope.chartHeight = 45 + (25 * comparison.length);
   $scope.predicate = 'ship.name';
-  $scope.desc = false;
+  $scope.desc = true;
+
+  $scope.sortProperty = function (e) {
+    var prop = angular.element(e.target).attr('prop');  // Get component ID
+    if(prop) {
+      $scope.sort(prop);
+    }
+  };
 
   $scope.sort = function (key) {
     $scope.desc =  ($scope.predicate == key)? !$scope.desc : $scope.desc;
     $scope.predicate = key;
-  }
-
+    $scope.comparison = orderBy($scope.comparison, $scope.predicate, $scope.desc);
+  };
 
+  $scope.sort('name');
 }]);
\ No newline at end of file
diff --git a/app/js/directives/directive-bar-chart.js b/app/js/directives/directive-bar-chart.js
new file mode 100644
index 00000000..dd27c3d1
--- /dev/null
+++ b/app/js/directives/directive-bar-chart.js
@@ -0,0 +1,122 @@
+angular.module('app').directive('barChart', ['$rootScope', function ($rootScope) {
+
+  function bName (build) {
+    return build.buildName + '\n' + build.name;
+  }
+
+  var insertLinebreaks = function (d) {
+    var el = d3.select(this);
+    var words = d.split('\n');
+    el.text('').attr('y', -5);
+    for (var i = 0; i < words.length; i++) {
+      var tspan = el.append('tspan').text(words[i]);
+      if (i > 0) {
+        tspan.attr('x', -9).attr('dy', 10);
+      }
+    }
+  };
+
+  return {
+    restrict: 'A',
+    scope:{
+      data: '=',
+      facet: '=',
+      height: '=',
+      width: '='
+    },
+    link: function(scope, element) {
+      var color = d3.scale.ordinal().range([ "#7b6888", "#6b486b", "#3182bd", "#a05d56", "#d0743c"]),
+          width = scope.width,
+          height = scope.height,
+          labels = scope.facet.lbls,
+          fmt = $rootScope[scope.facet.fmt],
+          properties = scope.facet.prop? [scope.facet.prop] : scope.facet.props,
+          unit = scope.facet.unit,
+          margin = {top: 10, right: 20, bottom: 35, left: 150},
+          w = width - margin.left - margin.right,
+          h = height - margin.top - margin.bottom;
+
+      // Create chart
+      var svg = d3.select(element[0]).append("svg")
+          .attr("width", width)
+          .attr("height", height)
+          .append("g")
+            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+      // Create and Add tooltip
+      var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .html(function(property, propertyIndex, buildIndex) {
+          return (labels? (labels[propertyIndex] + ": ") : '') + fmt(property.value) + ' ' + unit;
+        });
+      svg.call(tip);
+
+      // Create Y Axis SVG Elements
+      svg.append("g").attr("class", "y axis");
+      svg.selectAll('g.y.axis g text').each(insertLinebreaks);
+      // Create X Axis SVG Elements
+      svg.append("g")
+          .attr("class", "x axis")
+          .attr("transform", "translate(0," + h + ")")
+        .append("text")
+          .attr("y", 30)
+          .attr("x", w/2)
+          .attr("dy", ".1em")
+          .style("text-anchor", "middle")
+          .text(scope.facet.title + (unit? (' (' + unit + ')') : ''));
+
+
+      /**
+       * Watch for changes in the comparison array (ships added/removed, sorting)
+       */
+      scope.$watch('data', function() {
+        var data = scope.data;
+        var maxVal = d3.max(data, function(d) { return d3.max(properties, function(prop) {return d[prop]; }); });
+        var y0 = d3.scale.ordinal().domain(data.map(bName)).rangeRoundBands([0, h],0.3);
+        var y1 = d3.scale.ordinal().domain(properties).rangeRoundBands([0, y0.rangeBand()]);
+        var x = d3.scale.linear().range([0, w]).domain([0, maxVal]);
+        var yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient("left");
+        var xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient("bottom").tickFormat(d3.format('.2s'));
+
+        // Remove existing elements
+        svg.selectAll('.ship').remove();
+        svg.selectAll('rect').remove();
+
+        // Update X & Y Axis
+        svg.selectAll(".y.axis").call(yAxis);
+        svg.selectAll(".x.axis").call(xAxis);
+        // Update Y-Axis labels
+        svg.selectAll('g.y.axis g text').each(insertLinebreaks);
+
+        var group = svg.selectAll(".ship")
+          .data(scope.data, bName)
+          .enter().append("g")
+            .attr("class", "g")
+            .attr("transform", function(build) { return "translate(0," + y0(bName(build)) + ")"; });
+
+        group.selectAll("rect")
+          .data(function(build) {
+            var o = [];
+            for (var i = 0; i < properties.length; i++) {
+              o.push({name: properties[i], value:build[properties[i]]});
+            }
+            return o;
+          })
+        .enter().append("rect")
+          .attr("height", y1.rangeBand())
+          .attr("x",0)
+          .attr("y", function(d) {return y1(d.name); })
+          .attr("width", function(d) { return x(d.value); })
+          .on('mouseover', tip.show)
+          .on('mouseout', tip.hide)
+          .style("fill", function(d) { return color(d.name); });
+
+      });
+
+      scope.$on('$destroy', function() {
+        tip.destroy(); // Remove the tooltip from the DOM
+      })
+
+    }
+  };
+}]);
\ No newline at end of file
diff --git a/app/js/service-persist.js b/app/js/service-persist.js
index cba5cb47..4ff04312 100644
--- a/app/js/service-persist.js
+++ b/app/js/service-persist.js
@@ -13,8 +13,11 @@ angular.module('app').service('Persist', ['lodash', function (_) {
     this.builds = {};
   }
 
+  var buildCount = Object.keys(this.builds).length;
+
   this.state = {
-    hasBuilds: Object.keys(this.builds).length > 0
+    buildCount: buildCount,
+    hasBuilds: buildCount > 0
   }
   /**
    * Persist a ship build in local storage.
@@ -28,8 +31,12 @@ angular.module('app').service('Persist', ['lodash', function (_) {
       this.builds[shipId] = {};
     }
 
+    if(!this.builds[shipId][name]) {
+      this.state.buildCount++;
+      this.state.hasBuilds = true;
+    }
+
     this.builds[shipId][name] = code;
-    this.state.hasBuilds = true;
     // Persist updated build collection to localStorage
     localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds));
   }
@@ -61,7 +68,8 @@ angular.module('app').service('Persist', ['lodash', function (_) {
       delete this.builds[shipId][name];
       if (Object.keys(this.builds[shipId]).length == 0) {
         delete this.builds[shipId];
-        this.state.hasBuilds = Object.keys(this.builds).length > 0;
+        this.state.buildCount--;
+        this.state.hasBuilds = this.state.buildCount > 0;
       }
       // Persist updated build collection to localStorage
       localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds));
diff --git a/app/js/shipyard/module-shipyard.js b/app/js/shipyard/module-shipyard.js
index 9031e9dc..6256aa7d 100644
--- a/app/js/shipyard/module-shipyard.js
+++ b/app/js/shipyard/module-shipyard.js
@@ -4,7 +4,7 @@
  *
  * This file contains values and functions that can be reused across the app.
  *
- * @requires ngLodash is a dependency of this module.
+ * @requires ngLodash
  */
 angular.module('shipyard', ['ngLodash'])
   // Create 'angularized' references to DB.This will aid testing
@@ -72,6 +72,78 @@ angular.module('shipyard', ['ngLodash'])
     'Large',
     'Huge'
   ])
+  /**
+   * Array of all Ship properties (facets) organized into groups
+   * used for ship comparisons.
+   *
+   * @type {Array}
+   */
+  .value('ShipFacets', [
+    {
+      title: 'Agility',
+      prop: 'agility',
+      unit: '',
+      fmt: 'fCrd'
+    },
+    {
+      title: 'Speed',
+      props: ['speed', 'boost'],
+      lbls: ['Thrusters', 'Boost'],
+      unit: 'M/s',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Armour',
+      prop: 'armour',
+      unit: '',
+      fmt: 'fCrd'
+    },
+    {
+      title: 'Shields',
+      prop: 'shieldStrength',
+      unit: 'Mj',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Jump Range',
+      props: ['unladenJumpRange', 'ladenJumpRange'],
+      lbls: ['Unladen', 'Laden'],
+      unit: 'LY',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Mass',
+      props: ['unladenMass', 'ladenMass'],
+      lbls: ['Unladen', 'Laden'],
+      unit: 'T',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Cargo',
+      prop: 'cargoCapacity',
+      unit: 'T',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Fuel',
+      prop: 'fuelCapacity',
+      unit: 'T',
+      fmt: 'fRound'
+    },
+    {
+      title: 'Power',
+      props: ['powerRetracted','powerDeployed','powerAvailable'],
+      lbls: ['Retracted', 'Deployed', 'Available'],
+      unit: 'MW',
+      fmt: 'fPwr'
+    },
+    {
+      title: 'Cost',
+      prop: 'totalCost',
+      unit: 'CR',
+      fmt: 'fCrd'
+    }
+  ])
   /**
    * Calculate the maximum single jump range based on mass and a specific FSD
    *
diff --git a/app/less/app.less b/app/less/app.less
index e1af79c6..78fed026 100644
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -8,16 +8,19 @@
 @import 'list';
 @import 'slot';
 @import 'outfit';
+@import 'comparison';
 @import 'table';
 @import 'select';
 @import 'modal';
 @import 'charts';
+@import 'chart-tooltip';
 @import 'buttons';
 @import 'error';
 
 
 html, body {
   min-height: 100%;
+  text-rendering: optimizeLegibility;
 }
 
 body {
@@ -64,11 +67,21 @@ body {
 h1 {
   font-family: @fTitle;
   color: @primary;
+  font-size: 1.6em;
 }
 
 h2 {
   text-transform: uppercase;
   font-family: @fTitle;
+  font-size: 1.2em;
+}
+
+h3 {
+  text-transform: uppercase;
+  font-family: @fTitle;
+  font-size: 1em;
+  margin: 0.2em 0;
+  color: @primary;
 }
 
 u { // Unit (Mj, Km, etc)
diff --git a/app/less/buttons.less b/app/less/buttons.less
index 0ab5daf1..175d40cb 100644
--- a/app/less/buttons.less
+++ b/app/less/buttons.less
@@ -1,7 +1,9 @@
 button {
   .border-radius(0);
   color: @primary;
-  fill: @primary;
+  svg {
+    fill: @primary;
+  }
   border: 1px solid @primary;
   font-family: @fStandard;
   border: 1px solid;
@@ -12,14 +14,18 @@ button {
 
   &.danger {
     color: red;
-    fill: red;
+    svg {
+      fill: red;
+    }
     border: 1px solid red;
   }
 
   &:disabled {
     cursor: not-allowed;
     color: @disabled;
-    fill: @disabled;
+    svg {
+      fill: @disabled;
+    }
     border: 1px solid @disabled;
   }
 }
\ No newline at end of file
diff --git a/app/less/chart-tooltip.less b/app/less/chart-tooltip.less
new file mode 100644
index 00000000..3e397e30
--- /dev/null
+++ b/app/less/chart-tooltip.less
@@ -0,0 +1,63 @@
+.d3-tip {
+  font-size: 0.8em;
+  padding: 0.25em 0.5em;
+  background: @primary-disabled;
+
+  color: @primary-bg;
+  pointer-events: none;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: @primary-disabled;
+  position: absolute;
+  pointer-events: none;
+}
+
+/* Northward tooltips */
+.d3-tip.n {
+  margin-top: -7px;
+  &:after {
+    content: "\25BC";
+    margin: -1px 0 0 0;
+    top: 100%;
+    left: 0;
+    text-align: center;
+  }
+}
+
+/* Eastward tooltips */
+.d3-tip.e {
+  margin-left: 8px;
+  &:after {
+    content: "\25C0";
+    margin: -4px 0 0 0;
+    top: 50%;
+    left: -8px;
+  }
+}
+
+/* Southward tooltips */
+.d3-tip.s {
+  margin-top: 8px;
+  &:after {
+    content: "\25B2";
+    margin: 0 0 1px 0;
+    top: -7px;
+    left: 0;
+    text-align: center;
+  }
+}
+
+/* Westward tooltips */
+.d3-tip.w:after {
+  content: "\25B6";
+  margin: -4px 0 0 -1px;
+  top: 50%;
+  left: 100%;
+}
\ No newline at end of file
diff --git a/app/less/charts.less b/app/less/charts.less
index fad71c2d..26d6aa01 100644
--- a/app/less/charts.less
+++ b/app/less/charts.less
@@ -1,8 +1,40 @@
 
-svg.chart {
+.chart {
   .user-select-none();
-  display: block;
-  width:100%;
-  height:100%;
+  display: inline-block;
+  margin: 1em;
+  //width:100%;
+  //height:100%;
+  cursor: default;
+
+  h3 {
+    text-align: center;
+
+    &[ng-click] {
+      cursor: pointer;
+    }
+  }
+
+  svg {
+    .axis {
+
+      line, path {
+        fill: none;
+        stroke: @primary-disabled;
+      }
+
+      text {
+        font-size: 0.75em;
+        fill: @primary-disabled;
+      }
+
+      &.y {
+        text tspan:first-child {
+          fill: @primary;
+        }
+      }
+
+    }
+  }
 }
 
diff --git a/app/less/colors.less b/app/less/colors.less
index 557bcdf2..49ca3ecd 100644
--- a/app/less/colors.less
+++ b/app/less/colors.less
@@ -16,7 +16,7 @@
 // Background colors
 @bg: rgba(70,70,70,0.95);
 @bgBlack: rgba(0,0,0,0.9);
-@primary-bg: fadeout(darken(@primary, 45%), 20%);
+@primary-bg: fadeout(darken(@primary, 47%), 15%);
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
 
diff --git a/app/less/comparison.less b/app/less/comparison.less
new file mode 100644
index 00000000..db9e6153
--- /dev/null
+++ b/app/less/comparison.less
@@ -0,0 +1,4 @@
+
+#comparison {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/app/less/header.less b/app/less/header.less
index 6431028e..1144b1c0 100644
--- a/app/less/header.less
+++ b/app/less/header.less
@@ -28,6 +28,8 @@ header {
     padding : 0 1em;
     cursor: pointer;
     color: @warning;
+    // Less than 600px screen width: hide text
+
 
     &.disabled {
       color: @warning-disabled;
diff --git a/app/less/select.less b/app/less/select.less
index 09f7fd0a..527aacdd 100644
--- a/app/less/select.less
+++ b/app/less/select.less
@@ -6,7 +6,7 @@
   width: 100%;
   margin: 0;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
   background-color: @bg;
   border: 1px solid @primary;
   white-space: nowrap;
@@ -78,7 +78,7 @@
 
   ul {
     margin: 0;
-    margin-left: 20px;
+    margin-left: 1.5em;
     padding: 0;
     list-style: none;
     overflow: hidden;
@@ -90,7 +90,7 @@
       padding: 0.1em 0.5em;
     }
     ul {
-      margin-left: 1em;
+      margin-left: 0.5em;
     }
   }
 
diff --git a/app/less/shipyard.less b/app/less/shipyard.less
index 03de31f2..9e08e16b 100644
--- a/app/less/shipyard.less
+++ b/app/less/shipyard.less
@@ -1,14 +1,15 @@
 
 #shipyard {
   vertical-align: top;
+  text-align: center;
 }
 
 a.ship {
   display: inline-block;
-  width: 22%;
-  margin: 1%;
+  width: 18em;
+  margin: 0.5em;
   background-color: @bg;
-  padding: 0.5%;
+  padding: 0.5em;
   text-decoration: none;
   color: @fg;
   font-family: @fStandard;
@@ -30,6 +31,7 @@ a.ship {
     font-family: @fTitle;
     float: left;
     font-size: 0.8em;
+    margin-right: 2em;
   }
 
   .subtitle {
diff --git a/app/less/table.less b/app/less/table.less
index 019869ed..baa7a3d5 100644
--- a/app/less/table.less
+++ b/app/less/table.less
@@ -3,7 +3,7 @@ table {
   margin: 0 auto;
   background-color: @primary-bg;
   border-spacing: 0;
-  font-size: 0.8em;
+  font-size: 0.9em;
   cursor: default;
 
   a, a:visited {
@@ -16,6 +16,7 @@ thead {
   color: @bgBlack;
   background-color: @primary-disabled;
   .user-select-none();
+  font-size: 0.8em;
 
   .main th {
     border-left: 1px solid @primary-bg;
@@ -26,10 +27,10 @@ thead {
   }
 
   th {
-    
+    font-weight: normal;
     padding: 0 0.75em;
 
-    &[ng-click] {
+    &.prop {
       cursor: pointer;
       &:hover {
         color: @primary;
diff --git a/app/views/_header.html b/app/views/_header.html
index 0efe5007..a85ae2e6 100644
--- a/app/views/_header.html
+++ b/app/views/_header.html
@@ -1,9 +1,9 @@
 <header>
-  <a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xlink:href="#coriolis"></use></svg></a>
+  <a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#coriolis"></use></svg></a>
 
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
-      <svg class="icon warning"><use xlink:href="#rocket"></use></svg> Ships
+      <svg class="icon warning"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rocket"></use></svg> Ships
     </div>
     <div class="menu-list" ng-if="openedMenu=='s'">
       <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
@@ -30,7 +30,7 @@
     </div>
     <div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
       <ul>
-      <li>Custom Comarisons</li>
+      <li>Custom Comparisons</li>
       <li>Coming soon!</li>
        <!-- TODO: comparison links /-->
       </ul>
@@ -60,6 +60,6 @@
     </div>
   </div>
 
-  <a href="#" class="r" target="_blank" title="Reddit Thread"><svg class="icon xl"><use xlink:href="#reddit"></use></svg></a>
+  <!-- <a href="#" class="r" target="_blank" title="Reddit Thread"><svg class="icon xl"><use xlink:href="#reddit"></use></svg></a> -->
 
 </header>
\ No newline at end of file
diff --git a/app/views/page-comparison.html b/app/views/page-comparison.html
index 4fdcb97d..5cfbe34e 100644
--- a/app/views/page-comparison.html
+++ b/app/views/page-comparison.html
@@ -1,63 +1,33 @@
 <div id="comparison">
 
+<!-- TODO: Select builds -->
+<!-- TODO: Save Comparison -->
+<!-- TODO: Permalink for comparison -->
+<!-- TODO: Select faceset -->
 
   <table>
-    <thead>
+    <thead  ng-click="sortProperty($event)">
       <tr class="main">
-        <th rowspan="2" ng-click="sort('ship.name')">Ship</th>
-        <th rowspan="2" ng-click="sort('buildName')">Build</th>
-        <!-- <th rowspan="2" ng-click="sort('ship.agility')">Agility</th> /-->
-        <!-- <th rowspan="2" ng-click="sort('ship.speed')">Speed</th> /-->
-        <!-- <th rowspan="2" ng-click="sort('ship.boost')">Boost</th> -->
-        <th rowspan="2" ng-click="sort('ship.shieldStrength')">Shields</th>
-        <th rowspan="2" ng-click="sort('ship.armour')">Armour</th>
-        <th colspan="2">Mass</th>
-        <th colspan="3">Power</th>
-        <!-- <th rowspan="2" ng-click="sort('ship.fuelCapacity')">Fuel</th> -->
-        <th rowspan="2" ng-click="sort('ship.cargoCapacity')">Cargo</th>
-        <th colspan="2">Jump Range</th>
-        <th rowspan="2" ng-click="sort('ship.totalCost')">Cost</th>
+        <th rowspan="2" class="prop" prop="name">Ship</th>
+        <th rowspan="2" class="prop" prop="buildName">Build</th>
+        <th ng-repeat="f in facets" rowspan="{{f.prop? 2 : 1}}" colspan="{{f.prop? 1: f.props.length}}" prop="{{f.prop}}" ng-class="{prop: f.prop}" ng-bind="f.title"></th>
       </tr>
       <tr>
-        <!-- Mass /-->
-        <th class="lft" ng-click="sort('ship.unladenMass')">Unladen</th>
-        <th class="rgt"  ng-click="sort('ship.ladenMass')">Laden</th>
-        <!-- Power /-->
-        <th class="lft" ng-click="sort('ship.powerRetracted')">Retracted</th>
-        <!-- <th ng-click="sort('pctRetracted')">%</th> -->
-        <th ng-click="sort('ship.powerDeployed')">Deployed</th>
-        <!-- <th ng-click="sort('pctDeployed')">%</th> -->
-        <th class="rgt" ng-click="sort('ship.powerAvailable')">Available</th>
-        <!-- Jump Range /-->
-        <th class="lft" ng-click="sort('ship.unladenJumpRange')">Unladen</th>
-        <th class="rgt" ng-click="sort('ship.ladenJumpRange')">Laden</th>
+        <th ng-repeat="f in subFacets | filter:{sub:true}" class="prop" prop="{{f.prop}}" ng-class="{lft: f.start}" test="{{f.start}}" ng-bind="f.label"></th>
       </tr>
     </thead>
     <tbody>
-      <tr  class="tr" ng-repeat="b in comparison | orderBy:predicate:desc">
-        <td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td>
-        <td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
-        <!-- <td class="tc" ng-bind="b.ship.agility"></td> -->
-        <!-- <td>{{b.ship.speed}} <u>M/s</u></td> -->
-        <!-- <td>{{b.ship.boost}} <u>M/s</u></td> -->
-        <td>{{fRound(b.ship.shieldStrength)}} <u>Mj</u></td>
-        <td ng-bind="b.ship.armourTotal"></td>
-        <td>{{fRound(b.ship.unladenMass)}} <u>T</u></td>
-        <td>{{fRound(b.ship.ladenMass)}} <u>T</u></td>
-        <td>{{fPwr(b.ship.powerRetracted)}} <u>MW</u></td>
-        <!-- <td>{{fPct(b.pctRetracted)}}</td> -->
-        <td>{{fPwr(b.ship.powerDeployed)}} <u>MW</u></td>
-        <!-- <td>{{fPct(b.pctDeployed)}}</td> -->
-        <td>{{fPwr(b.ship.powerAvailable)}} <u>MW</u></td>
-        <!-- <td>{{fRound(b.ship.fuelCapacity)}} <u>T</u></td> -->
-        <td>{{fRound(b.ship.cargoCapacity)}} <u>T</u></td>
-        <td>{{fRound(b.ship.unladenJumpRange)}} <u>LY</u></td>
-        <td>{{fRound(b.ship.ladenJumpRange)}} <u>LY</u></td>
-        <td>{{b.ship.totalCost}} <u>CR</u></td>
+      <tr  class="tr" ng-repeat="b in comparison">
+        <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.name"></a></td>
+        <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
+        <td ng-repeat="f in subFacets">{{f.fmt(b[f.prop])}} <u>{{f.unit}}</u></td>
+
       </tr>
       </tbody>
   </table>
-</div>
 
+  <div ng-repeat="f in facets" class="chart" bar-chart width="500" height="chartHeight" facet="f" data="comparison">
+    <h3 ng-click="sort(f.prop || f.props[0])" >{{f.title}}</h3>
+  </div>
 
 </div>
\ No newline at end of file
diff --git a/app/views/page-shipyard.html b/app/views/page-shipyard.html
index e3638afa..4817373e 100644
--- a/app/views/page-shipyard.html
+++ b/app/views/page-shipyard.html
@@ -1,10 +1,10 @@
 <div id="shipyard">
-<a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
-  <h2 ng-bind="s.properties.name"></h2>
-  <small ng-bind="s.properties.manufacturer"></small>
-  <div class="subtitle">
-    <div class="purpose" ng-bind="SP[s.properties.grp]"></div>
-  </div>
-  {{fCrd(s.properties.cost)}} <u>CR</u></span>
-</a>
+  <a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
+    <h2 ng-bind="s.properties.name"></h2>
+    <div class="subtitle">
+      <small ng-bind="s.properties.manufacturer"></small>
+      <div class="purpose" ng-bind="SP[s.properties.grp]"></div>
+    </div>
+    {{fCrd(s.properties.cost)}} <u>CR</u></span>
+  </a>
 </div>
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 8de23128..c942869a 100644
--- a/bower.json
+++ b/bower.json
@@ -22,7 +22,8 @@
     "d3": "~3.5.5",
     "ng-lodash": "~0.2.0",
     "ui-router-extras": "~0.0.13",
-    "angular-ui-router": "^0.2.14"
+    "angular-ui-router": "^0.2.14",
+    "d3-tip": "~0.6.7"
   },
   "overrides": {
     "ui-router-extras": {
diff --git a/gulpfile.js b/gulpfile.js
index 16d2ad42..6779cd90 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -90,7 +90,7 @@ gulp.task('js', function() {
       'app/js/**/*.js'
     ])
     .pipe(sourcemaps.init())
-    .pipe(uglify({mangle: false}).on('error',function(e){
+    .pipe(uglify({mangle: true}).on('error',function(e){
       console.log('File:', e.fileName);
       console.log('Line:', e.lineNumber);
       console.log('Message:', e.message);
diff --git a/package.json b/package.json
index 7e71c9f8..27d726c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coriolis_shipyard",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/cmmcleod/coriolis"
