diff --git a/Gemfile b/Gemfile
index de0c86989..19b060a35 100644
--- a/Gemfile
+++ b/Gemfile
@@ -16,6 +16,7 @@ gem 'rails-i18n'
 gem 'configuration'
 gem 'rails-observers', '~> 0.1.2'
 gem 'jquery-ui-rails'
+gem 'font-awesome-rails'
 gem 'pg'
 
 group :production do
diff --git a/Gemfile.lock b/Gemfile.lock
index 85206f261..4e0813cee 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -73,6 +73,8 @@ GEM
       factory_girl (~> 4.4.0)
       railties (>= 3.0.0)
     ffi (1.9.3)
+    font-awesome-rails (4.1.0.0)
+      railties (>= 3.2, < 5.0)
     fssm (0.2.10)
     hike (1.2.3)
     i18n (0.6.11)
@@ -222,6 +224,7 @@ DEPENDENCIES
   devise (~> 3.2.4)
   ejs
   factory_girl_rails
+  font-awesome-rails
   jasmine (~> 1.3.2)
   jbuilder (~> 1.2)
   jquery-rails
diff --git a/app/assets/javascripts/templates/story.jst.ejs b/app/assets/javascripts/templates/story.jst.ejs
index bfb8754c3..6533665eb 100644
--- a/app/assets/javascripts/templates/story.jst.ejs
+++ b/app/assets/javascripts/templates/story.jst.ejs
@@ -1,8 +1,12 @@
 <% if (story.estimable()) { %>
-<div class="state-actions">
+<div class="state-actions estimates">
   <form>
     <% _.each(story.point_values(), function(value) { %>
-    <input type="button" class="estimate" value="<%= value %>"/>
+      <span class="estimate input" data-value="<%= value %>">
+        <% if (value == 0) { %>[]<% } else { %>
+          <% _.times(value, function() { %>|<% }) %>
+        <% } %>
+      </span>
     <% }); %>
   </form>
 </div>
@@ -20,16 +24,53 @@
   <a class="icon icons-throbber" title="<%= I18n.t('saving') %>"></a>
   <% } %>
   <span class="popover-activate">
-    <span class="icon icons-<%= story.get('story_type') %> story_type" title="<%= story.story_type %>: <%= story.id %>">
+
+
+    <% if (story.get('story_type') == 'feature') { %>
+      <span class="fa-icon-overlay">
+        <i class="fa fa-star"></i>
+        <i class="fa fa-star-o"></i>
+      </span>
+    <% } %>
+    <% if (story.get('story_type') == 'chore') { %>
+      <i class="fa fa-cog"></i>
+    <% } %>
+    <% if (story.get('story_type') == 'bug') { %>
+      <i class="fa fa-bug"></i>
+    <% } %>
+
+    <!-- TODO make it accessible
       <%= story.story_type %>
-    </span>
+
+      <% if (story.estimated()) { %>
+        <span class="estimate estimate_<%= story.get('estimate') %>">
+          <%= story.get('estimate') %>
+        </span>
+      <% } %>
+    -->
+
     <% if (story.estimated()) { %>
-    <span class="estimate estimate_<%= story.get('estimate') %>">
-      <%= story.get('estimate') %>
-    </span>
+      <span class="estimate estimate_<%= story.get('estimate') %>">
+        <% if (story.get("estimate") == 1) {  %> |  <% } %>
+        <% if (story.get("estimate") == 2) {  %> ||  <% } %>
+        <% if (story.get("estimate") == 3) {  %> |||  <% } %>
+        <% if (story.get("estimate") == 4) {  %> ||||  <% } %>
+        <% if (story.get("estimate") == 5) {  %> |||||  <% } %>
+        <% if (story.get("estimate") == 6) {  %> ||||||  <% } %>
+        <% if (story.get("estimate") == 7) {  %> |||||||  <% } %>
+        <% if (story.get("estimate") == 8) {  %> ||||||||  <% } %>
+        <% if (story.get("estimate") == 9) {  %> |||||||||  <% } %>
+        <% if (story.get("estimate") == 10) { %> ||||||||||  <% } %>
+        <% if (story.get("estimate") == 11) { %> |||||||||||  <% } %>
+        <% if (story.get("estimate") == 12) { %> ||||||||||||  <% } %>
+      </span>
     <% } %>
+
     <% if (story.hasDetails()) { %>
-    <span class="icon icons-details"></span>
+      <span class="fa-icon-overlay">
+        <i class="fa fa-comment"></i>
+        <i class="fa fa-comment-o"></i>
+      </span>
     <% } %>
   </span>
 </div>
diff --git a/app/assets/javascripts/views/column_visibility_button_view.js b/app/assets/javascripts/views/column_visibility_button_view.js
index 8e728bc1e..897ee3689 100644
--- a/app/assets/javascripts/views/column_visibility_button_view.js
+++ b/app/assets/javascripts/views/column_visibility_button_view.js
@@ -16,7 +16,7 @@ Fulcrum.ColumnVisibilityButtonView = Backbone.View.extend({
 
   initialize: function() {
     _.bindAll(this, 'setClassName');
-    this.$el.attr('class','hide_'+this.options.columnView.id);
+    this.$el.attr('class','hide_'+this.options.columnView.id+" btn btn-default");
     this.options.columnView.bind('visibilityChanged', this.setClassName);
   },
 
diff --git a/app/assets/javascripts/views/project_view.js b/app/assets/javascripts/views/project_view.js
index 026f47181..ec63634f0 100644
--- a/app/assets/javascripts/views/project_view.js
+++ b/app/assets/javascripts/views/project_view.js
@@ -78,7 +78,7 @@ Fulcrum.ProjectView = Backbone.View.extend({
   },
 
   scaleToViewport: function() {
-    var storyTableTop = $('table.stories tbody').offset().top;
+    var storyTableTop = $('table.stories tbody').offset().top + 20;
     // Extra for the bottom padding and the
     var extra = 100;
     var height = $(window).height() - (storyTableTop + extra);
diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js
index d12412bfa..2d74b8b15 100644
--- a/app/assets/javascripts/views/story_view.js
+++ b/app/assets/javascripts/views/story_view.js
@@ -55,7 +55,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
     "click #submit": "saveEdit",
     "click #cancel": "cancelEdit",
     "click .transition": "transition",
-    "click input.estimate": "estimate",
+    "click .estimate": "estimate",
     "click #destroy": "clear",
     "click #edit-description": "editDescription",
     "sortupdate": "sortUpdate"
@@ -148,7 +148,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
   estimate: function(ev) {
     this.saveInProgress = true;
     this.render();
-    this.model.set({estimate: ev.target.value});
+    this.model.set({estimate: ev.target.attributes['data-value'].value});
 
     var that = this;
     this.model.save(null, {
@@ -188,7 +188,9 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
       return false;
     }
     // Should expand if the click wasn't on one of the buttons.
-    return !$(e.target).is('input');
+    if ($(e.target).is('input')) return false
+    if ($(e.target).is('.input')) return false
+    return true;
   },
 
   cancelEdit: function() {
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 8a77db901..4db9e066d 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,4 +1,5 @@
 @import 'jquery_gritter';
 @import 'jquery_tagit';
+@import "font-awesome";
 @import 'popover';
 @import 'screen';
diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss
index e99965cb6..936bbfa59 100644
--- a/app/assets/stylesheets/screen.css.scss
+++ b/app/assets/stylesheets/screen.css.scss
@@ -48,11 +48,7 @@ a img {
 }
 
 #header {
-  background: $darkgrey;
-  @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
-  border-bottom: 1px solid $darkgrey*0.7;
-  @include box-shadow(0 1px 2px #aaaaaa);
-  text-shadow: black 0 1px 0;
+  background: #3E6A9E;
   position: relative;
   z-index: 900;
 }
@@ -107,11 +103,8 @@ ul#primary-nav li.secondary ul li {
 }
 
 #title_bar {
-  background: #efefef;
-  @include background(linear-gradient(top, #efefef, #dfe1e2));
-  @include box-shadow(0 1px 2px #aaaaaa);
-  text-shadow: white 0 1px 0;
-  border-bottom: 1px solid #ededed;
+  background: #E9E9E9;
+  border-bottom: 1px solid #d5d5d5;
   padding: 5px 10px 3px 10px;
   font-size: 1.0em;
   line-height: 140%;
@@ -122,7 +115,7 @@ ul#primary-nav li.secondary ul li {
   padding: 10px 1em;
 
   div.velocity {
-    font-size: 1.6em;
+    font-size: 1.2em;
     float: right;
     position: relative;
 
@@ -157,20 +150,31 @@ ul#primary-nav li.secondary ul li {
     font-style: italic;
   }
 
-  #add_story {
-    @include background(sprite($icons-sprites, feature, 2, 2),
-                        linear-gradient(top, $aluminium-3, $aluminium-3*0.75));
-    background-repeat: no-repeat;
-    margin: 0;
-    padding: 0.2em 0.4em 0.2em 18px;
-    @include border-radius(3px);
-    border: 1px solid $aluminium-5;
-    cursor: pointer;
-    font-size: small;
-    color: white;
-    text-shadow:  $aluminium-5 0 1px 0;
-    text-decoration: none;
+  h1 {
+    display: inline;
+  }
+  .project_nav {
+    display: inline;
+  }
+  .column-toggles-wrap {
+    float: right;
+    margin-right: 10px;
   }
+
+}
+
+.btn.btn-default {
+  background: #999;
+  margin: 0;
+  padding: 0.2em 0.4em;
+  @include border-radius(2px);
+  border: 1px solid #777;
+  cursor: pointer;
+  font-size: small;
+  color: white;
+  text-shadow: none;
+  text-decoration: none;
+  margin: 0 2px;
 }
 
 #title_bar h1 {
@@ -179,7 +183,7 @@ ul#primary-nav li.secondary ul li {
 }
 
 #main {
-  margin: 1em;
+  margin: 10px 5px;
   position: relative;
 }
 
@@ -191,19 +195,9 @@ html.stories, html.stories body, html.stories div#main {
   float: right;
 }
 
-#column-toggles a {
-  margin: 0 0.2em;
-  padding: 3px;
-  color: white;
-  background-color: $darkgrey;
-  @include border-radius(3px);
-  text-decoration: none;
-  text-shadow: none;
-}
-
 #column-toggles a.pressed {
-  color: $darkgrey;
-  background-color: #cecece;
+  color: #636363;
+  background-color: #E2E2E2;
 }
 
 /* stories table */
@@ -227,12 +221,11 @@ div.storycolumn {
 /* Story columns headers */
 .column_header {
   text-align: left;
-  background: $darkgrey;
-  @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
+  background: #444;
   color: #eee;
-  padding: 0.2em 0.2em 0.2em 1em;
-  text-transform:capitalize;
-  @include border-radius(5px 5px 0 0);
+  padding: 0.4em 0.2em 0.3em 0.7em;
+  text-transform: uppercase;
+  @include border-radius(2px 2px 0 0);
   a.toggle-column{
     color: #eee;
     text-decoration: none;
@@ -279,7 +272,6 @@ div.story textarea {
 
 div.story-icons {
   float: left;
-  font-size: 0;
 }
 div.story-controls {
   padding: 10px 0;
@@ -297,6 +289,38 @@ div.story-title abbr.initials {
   border: none;
 }
 
+.fa-star {
+  color: #FFE000;
+}
+.fa-star-o {
+  color: #726904;
+}
+.fa-icon-overlay {
+  position: relative;
+}
+.fa-icon-overlay .fa {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.fa-icon-overlay .fa:first-child {
+  position: initial;
+}
+.fa-comment {
+  color: white;
+}
+.fa-comment-o {
+  color: gray;
+}
+.fa-bug {
+  color: #C20B0B;
+}
+.fa-cog {
+  color: #5E5C5C;
+}
+
+
+
 #in_progress div.story,
 #backlog div.story,
 #chilly_bin div.story {
@@ -306,60 +330,45 @@ div.story-title abbr.initials {
   cursor: inherit;
 }
 
-span.estimate {
-  border: 1px solid #777;
-  padding: 0 0.2em;
-  margin: 0 2px 0 0;
-  @include border-radius(3px);
-  vertical-align: top;
-  font-size: x-small;
-  font-weight: bold;
-  font-style: italic;
-}
-
-span.estimate_1 {
-  @include background(linear-gradient(bottom,
-      $orange 12.5%,
-      white 12.5%));
-}
-span.estimate_2 {
-  @include background(linear-gradient(bottom,
-      $orange 25%,
-      white 25%));
-}
-span.estimate_3 {
-  @include background(linear-gradient(bottom,
-      $orange 37.5%,
-      white 37.5%));
-}
-span.estimate_4 {
-  @include background(linear-gradient(bottom,
-      $orange 50%,
-      white 50%));
-}
-span.estimate_5 {
-  @include background(linear-gradient(bottom,
-      $orange 62.5%,
-      white 62.5%));
-}
-span.estimate_6 {
-  @include background(linear-gradient(bottom,
-      $orange 75%,
-      white 75%));
+.estimate {
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 10px;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+  display: inline-block;
+  letter-spacing: -1px;
+  width: 20px;
+  margin-left: -2px;
+  margin-right: -6px;
+  text-align: right;
+  top: -7px;
+  position: relative;
+  color: #3556AA;
+  height: 17px;
+  -webkit-font-smoothing: none;
 }
-span.estimate_7 {
-  @include background(linear-gradient(bottom,
-      $orange 87.5%,
-      white 87.5%));
+.estimates {
+  padding-left: 10px;
+  padding-right: 2px;
 }
-span.estimate_8 {
-  @include background(linear-gradient(bottom,
-      $orange 100%,
-      white 100%));
+.estimates .estimate {
+  font-weight: normal;
+  border-radius: none;
+  margin-left: -3px;
+  border-right: 1px solid #858484;
+  padding-right: 2px;
+  top: -3px;
+  background: transparent;
+  line-height: 15px;
 }
 
 .story.release {
-  background-color: #333;
+  background-color: #444;
   color: white;
 }
 .story.release:hover {
@@ -378,10 +387,10 @@ span.estimate_8 {
 
 /* Iteration markers */
 .iteration {
-  @include icons-sprite(iteration, false, 2px, 3px);
-  background-color: #000;
-  color: #ddd;
-  padding: 0.2em 0.2em 0.2em 20px
+  background-color: #707C8B;
+  color: #f5f5f5;
+  padding: 0.2em 0.7em 0.2em 20px;
+  font-size: 12px;
 }
 .iteration .points {
   float: right;
@@ -389,46 +398,48 @@ span.estimate_8 {
 
 .state-actions input {
   margin: 0;
-  padding: .2em .5em;
-  @include border-radius(3px);
-  border: 1px solid #333;
+  padding: .3em .8em;
+  @include border-radius(2px);
+  text-transform: capitalize;
   cursor: pointer;
   font-size: x-small;
   color: white;
-  @include background(linear-gradient(top, $aluminium-3, $aluminium-3*0.75));
-  border-color: $aluminium-5;
-  text-shadow:  $aluminium-5 0 1px 0;
-  @include box-shadow(0 1px 2px #aaaaaa);
+  background: #999;
+  border: 1px solid #777;
+  position: relative;
+  top: -1px;
 }
 .story.release .state-actions input {
   @include box-shadow(0 1px 2px #000);
 }
+.story.release .tags {
+  color: #C1D4F1;
+}
 .state-actions input:active {
   @include box-shadow(none);
 }
 
 .state-actions input.finish {
-  @include background(linear-gradient(top, $sky-blue-1, $sky-blue-1*0.75));
-  border-color: $sky-blue-3;
+  background: $sky-blue-2;
+  border: 1px solid #1B3B64;
 }
 .state-actions input.deliver {
   @include background(linear-gradient(top, $butter-1, $butter-1*0.75));
-  border-color:     $butter-3;
+  background: #E4BB07;
+  border: 1px solid #A2960C;
+  text-shadow: 0px 0px 1px #550;
 }
 .state-actions input.accept {
-  @include background(linear-gradient(top, $chameleon-2, $chameleon-2*0.75));
-  border-color: $chameleon-3;
+  background: $chameleon-3;
+  border: 1px solid #19790B;
 }
 .state-actions input.reject {
-  @include background(linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75));
-  border-color:     $scarlet-red-3;
+  background:     $scarlet-red-2;
+  border: 1px solid #8F210D;
 }
 .state-actions input.restart {
-  @include background(sprite($icons-sprites,redo),
-                      linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75));
-  background-repeat: no-repeat;
-  border-color: $scarlet-red-3;
-  padding-left: 16px;
+  background:     $scarlet-red-2;
+  border: 1px solid #8F210D;
 }
 
 table#import tr.valid, .notice {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 742919b97..d1b2b0512 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,7 +15,13 @@
 
 <div id="header">
   <ul id="primary-nav">
-    <li class="root"><%= link_to t('fulcrum'), root_path %></li>
+    <li class="root">
+      <%= link_to t('fulcrum'), root_path %>
+      <% if @project %>
+        &raquo;
+        <%= @project.name %>
+      <% end %>
+    </li>
     <% if current_user %>
       <li<%= ' class="secondary"'.html_safe if current_user.projects.present? %>>
         <%= link_to Project.model_name.human(:count => 2), root_path %>
@@ -27,7 +33,7 @@
           </ul>
         <%- end %>
       </li>
-      <li><%= link_to current_user.email, edit_user_registration_path %></li>
+      <li><%= link_to current_user.name, edit_user_registration_path %></li>
       <li><%= link_to t('log out'), destroy_user_session_path,
                       :method => :delete %></li>
     <% else %>
diff --git a/app/views/projects/_nav.html.erb b/app/views/projects/_nav.html.erb
index 5ae1956f9..36e0591d1 100644
--- a/app/views/projects/_nav.html.erb
+++ b/app/views/projects/_nav.html.erb
@@ -1,9 +1,3 @@
-<h1><%= project.name %></h1>
-
-<%- if defined? show_column_toggles -%>
-<div id="column-toggles"></div>
-<%- end -%>
-
 <%= link_to_unless_current Story.model_name.human(:count => 2), project_path(project) %> |
 <%= link_to_unless_current User.model_name.human(:count => 2), project_users_path(project) %> |
 <%= link_to_unless_current t('edit'), edit_project_path(project) %> |
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index 8310495b4..c1341a8a3 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -50,6 +50,9 @@ $(function() {
   });
   window.projectView.scaleToViewport();
   $(window).resize(projectView.scaleToViewport);
+  // hack: has to be resized one more time to fit perfectly
+  setTimeout(projectView.scaleToViewport, 100);
+
 
   setInterval(function() {
    window.projectView.model.fetch();
@@ -73,9 +76,17 @@ $(function() {
 
 <% content_for :title_bar do %>
   <div id="velocity" class="velocity"></div>
-  <%= render :partial => 'projects/nav',
-             :locals => {:project => @project, :show_column_toggles => true} %>
-             | <a id="add_story" href="#"><%= t('add story') %></a>
+  <div class="project_nav">
+    <%= render :partial => 'projects/nav',
+               :locals => {:project => @project } %>
+               | <a id="add_story" class="btn btn-default" href="#">
+                  <i class="fa fa-plus"></i>
+                  <%= t('add story') %>
+                </a>
+    <div class="column-toggles-wrap">
+      <div id="column-toggles"></div>
+    </div>
+  </div>
 <% end %>
 
 <table class="stories" width="100%">