diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 4a55b41b..e1ad1d2f 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -21,15 +21,18 @@ var NoteList = {
       this.getContent();
 
       $("#notes-list, #new-notes-list").on("ajax:success", ".delete-note", function() {
-        $(this).closest('li').fadeOut();
+        $(this).closest('li').fadeOut(function() {
+          $(this).remove();
+          NoteList.updateVotes();
+        });
       });
 
       $(".note-form-holder").on("ajax:before", function(){
-        $(".submit_note").disable()
+        $(".submit_note").disable();
       })
 
       $(".note-form-holder").on("ajax:complete", function(){
-        $(".submit_note").enable()
+        $(".submit_note").enable();
       })
 
       disableButtonIfEmptyField(".note-text", ".submit_note");
@@ -159,6 +162,8 @@ var NoteList = {
       if (!this.reversed) {
         this.initRefreshNew();
       }
+      // make sure we are up to date
+      this.updateVotes();
     },
 
 
@@ -198,6 +203,7 @@ var NoteList = {
   replaceNewNotes:
     function(html) {
       $("#new-notes-list").html(html);
+      this.updateVotes();
     },
 
   /**
@@ -210,6 +216,37 @@ var NoteList = {
       } else {
         $("#new-notes-list").append(html);
       }
+      this.updateVotes();
+    },
+
+  /**
+   * Recalculates the votes and updates them (if they are displayed at all).
+   *
+   * Assumes all relevant notes are displayed (i.e. there are no more notes to
+   * load via getMore()).
+   * Might produce inaccurate results when not all notes have been loaded and a
+   * recalculation is triggered (e.g. when deleting a note).
+   */
+  updateVotes:
+    function() {
+      var votes = $("#votes .votes");
+      var notes = $("#notes-list, #new-notes-list").find(".note.vote");
+
+      // only update if there is a vote display
+      if (votes.size()) {
+        var upvotes = notes.filter(".upvote").size();
+        var downvotes = notes.filter(".downvote").size();
+        var votesCount = upvotes + downvotes;
+        var upvotesPercent = votesCount ? (100.0 / votesCount * upvotes) : 0;
+        var downvotesPercent = votesCount ? (100.0 - upvotesPercent) : 0;
+
+        // change vote bar lengths
+        votes.find(".bar-success").css("width", upvotesPercent+"%");
+        votes.find(".bar-danger").css("width", downvotesPercent+"%");
+        // replace vote numbers
+        votes.find(".upvotes").text(votes.find(".upvotes").text().replace(/\d+/, upvotes));
+        votes.find(".downvotes").text(votes.find(".downvotes").text().replace(/\d+/, downvotes));
+      }
     }
 };
 
diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss
index 5fc6c96e..e14a0828 100644
--- a/app/assets/stylesheets/sections/notes.scss
+++ b/app/assets/stylesheets/sections/notes.scss
@@ -71,6 +71,19 @@
   border-top: 1px solid #eee;
 }
 
+/* mark vote notes */
+.voting_notes .note {
+  padding: 8px 0 8px 12px;
+  &.upvote {
+    padding-left: 8px;
+    border-left: 4px solid #468847;
+  }
+  &.downvote {
+    padding-left: 8px;
+    border-left: 4px solid #B94A48;
+  }
+}
+
 .notes-status {
   margin: 18px;
 }
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 28701661..65389e38 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -6,4 +6,12 @@ module NotesHelper
   def loading_new_notes?
     params[:loading_new].present?
   end
+
+  def note_vote_class(note)
+    if note.upvote?
+      "vote upvote"
+    elsif note.downvote?
+      "vote downvote"
+    end
+  end
 end
diff --git a/app/views/issues/show.html.haml b/app/views/issues/show.html.haml
index 0b72a820..e7365e10 100644
--- a/app/views/issues/show.html.haml
+++ b/app/views/issues/show.html.haml
@@ -61,4 +61,4 @@
         = markdown @issue.description
 
 
-.issue_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"
+.issue_notes.voting_notes#notes= render "notes/notes_with_form", tid: @issue.id, tt: "issue"
diff --git a/app/views/merge_requests/_show.html.haml b/app/views/merge_requests/_show.html.haml
index 40b72190..f1d0c8aa 100644
--- a/app/views/merge_requests/_show.html.haml
+++ b/app/views/merge_requests/_show.html.haml
@@ -15,7 +15,7 @@
         %i.icon-list-alt
         Diff
 
-.merge_request_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
+.merge_request_notes.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
   = render("notes/notes_with_form", tid: @merge_request.id, tt: "merge_request")
 .merge-request-diffs
   = render "merge_requests/show/diffs" if @diffs
diff --git a/app/views/notes/_note.html.haml b/app/views/notes/_note.html.haml
index 3412e4eb..23145f12 100644
--- a/app/views/notes/_note.html.haml
+++ b/app/views/notes/_note.html.haml
@@ -1,4 +1,4 @@
-%li{id: dom_id(note), class: "note"}
+%li{id: dom_id(note), class: "note #{note_vote_class(note)}"}
   = image_tag gravatar_icon(note.author.email), class: "avatar s32"
   %div.note-author
     %strong= note.author_name