diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d52cb1fc0111136c17b0c96cab3a78520334d4a3..829bece3776081634183ad3e843cff0739677366 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -407,21 +407,46 @@ p.time {
 }
 
 .votes {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 4px 0;
-  margin: 2px 0;
+  font-size: 13px;
+  line-height: 15px;
+  .progress {
+    height: 4px;
+    margin: 0;
+    .bar {
+      float: left;
+      height: 100%;
+    }
+    .bar-success {
+      background-color: #468847;
+      @include bg-gradient(#62C462, #51A351);
+    }
+    .bar-danger {
+      background-color: #B94A48;
+      @include bg-gradient(#EE5F5B, #BD362F);
+    }
+  }
   .upvotes {
     display: inline-block;
     color: #468847;
-    padding: 0 4px;
-    margin: 0 2px;
   }
   .downvotes {
     display: inline-block;
     color: #B94A48;
-    padding: 0 4px;
-    margin: 0 2px;
+  }
+}
+.votes-block {
+  margin: 14px 6px 6px 0;
+  .downvotes {
+    float: right;
+  }
+}
+.votes-inline {
+  display: inline-block;
+  margin: 0 8px;
+  .progress {
+    display: inline-block;
+    padding: 0 0 2px;
+    width: 45px;
   }
 }
 
diff --git a/app/views/issues/_show.html.haml b/app/views/issues/_show.html.haml
index e37ea3dfec38025e8b8b786a2e433d95a1551995..db3948734f0a2d3a4732304732462c7bc6d9d594 100644
--- a/app/views/issues/_show.html.haml
+++ b/app/views/issues/_show.html.haml
@@ -34,7 +34,12 @@
     - else
        
 
-    - if issue.upvotes > 0
-      %span.badge.badge-success= "+#{issue.upvotes}"
-    - if issue.downvotes > 0
-      %span.badge.badge-important= "-#{issue.downvotes}"
+    - if issue.votes_count > 0
+      .votes.votes-inline
+        .upvotes= issue.upvotes
+        .progress
+          - up_percent = 100.0/issue.votes_count*issue.upvotes
+          - down_percent = 100.0-up_percent
+          .bar.bar-success{style: "width: #{up_percent}%;"}
+          .bar.bar-danger{style: "width: #{down_percent}%;"}
+        .downvotes= issue.downvotes
diff --git a/app/views/issues/show.html.haml b/app/views/issues/show.html.haml
index 12394ac50777f1b290904567f435af579df3a05a..1ec0395173bb47726c8f33027240d314b3a40e78 100644
--- a/app/views/issues/show.html.haml
+++ b/app/views/issues/show.html.haml
@@ -16,16 +16,21 @@
         %i.icon-edit
         Edit
 
-    %br
-      .votes#votes
-        Votes:
-        .upvotes#upvotes= "#{@issue.upvotes} up"
-        .downvotes#downvotes= "#{@issue.downvotes} down"
+.right
+  .span3.votes.votes-block#votes
+    .progress
+      - up_percent = 100.0/@issue.votes_count*@issue.upvotes
+      - down_percent = 100.0-up_percent
+      .bar.bar-success{style: "width: #{up_percent}%;"}
+      .bar.bar-danger{style: "width: #{down_percent}%;"}
+    .upvotes= "#{@issue.upvotes} up"
+    .downvotes= "#{@issue.downvotes} down"
 
 .back_link
   = link_to project_issues_path(@project) do
     ← To issues list
 
+
 .main_box
   .top_box_content
     %h4
diff --git a/app/views/merge_requests/_merge_request.html.haml b/app/views/merge_requests/_merge_request.html.haml
index 8d0a6dcfddb72ebdb8e31422a700ff2cd77c9cde..08420fd2bf09b8196f75cda048095451e847fc02 100644
--- a/app/views/merge_requests/_merge_request.html.haml
+++ b/app/views/merge_requests/_merge_request.html.haml
@@ -23,7 +23,12 @@
     authored by #{merge_request.author_name}
     = time_ago_in_words(merge_request.created_at)
     ago
-    - if merge_request.upvotes > 0
-      %span.badge.badge-success= "+#{merge_request.upvotes}"
-    - if merge_request.downvotes > 0
-      %span.badge.badge-important= "-#{merge_request.downvotes}"
+    - if merge_request.votes_count > 0
+      .votes.votes-inline
+        .upvotes= merge_request.upvotes
+        .progress
+          - up_percent = 100.0/merge_request.votes_count*merge_request.upvotes
+          - down_percent = 100.0-up_percent
+          .bar.bar-success{style: "width: #{up_percent}%;"}
+          .bar.bar-danger{style: "width: #{down_percent}%;"}
+        .downvotes= merge_request.downvotes
diff --git a/app/views/merge_requests/show/_mr_title.html.haml b/app/views/merge_requests/show/_mr_title.html.haml
index f8ab6c1923a0672d071fb9f3710f0a4d053687a3..c0ad4be52bf1064fb969b1cfc31303e2ff3e3857 100644
--- a/app/views/merge_requests/show/_mr_title.html.haml
+++ b/app/views/merge_requests/show/_mr_title.html.haml
@@ -23,12 +23,15 @@
           %i.icon-edit
           Edit
 
-    %br
-      .votes#votes
-        Votes:
-        .upvotes#upvotes= "#{@merge_request.upvotes} up"
-        .downvotes#downvotes= "#{@merge_request.downvotes} down"
-
+.right
+  .span3.votes.votes-block#votes
+    .progress
+      - up_percent = 100.0/@merge_request.votes_count*@merge_request.upvotes
+      - down_percent = 100.0-up_percent
+      .bar.bar-success{style: "width: #{up_percent}%;"}
+      .bar.bar-danger{style: "width: #{down_percent}%;"}
+    .upvotes= "#{@merge_request.upvotes} up"
+    .downvotes= "#{@merge_request.downvotes} down"
 
 .back_link
   = link_to project_merge_requests_path(@project) do