diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 4bd2016bdcf..148c988f0a2 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -41,8 +41,6 @@ ul.notes {
 
   .discussion-header,
   .note-header {
-    @extend .cgray;
-
     a:hover {
       text-decoration: none;
     }
@@ -74,16 +72,6 @@ ul.notes {
         color: $gl-link-color;
       }
     }
-    .author-username {
-    }
-
-    .note-role {
-      float: right;
-      margin-top: 1px;
-      border: 1px solid #bbb;
-      background-color: transparent;
-      color: $gl-gray;
-    }
   }
 
   .discussion-body {
@@ -215,23 +203,41 @@ ul.notes {
   .note-actions {
     float: right;
     margin-left: 10px;
+  }
+}
 
-    a {
-      margin-left: 5px;
-      color: $gl-gray;
+.note-action-button {
+  display: inline-block;
+  margin-left: 5px;
+  color: #8F8F8F;
+  line-height: 24px;
 
-      i.fa {
-        font-size: 16px;
-        line-height: 16px;
-      }
+  .fa {
+    font-size: 16px;
+  }
 
-      &:hover {
-        @extend .cgray;
-        &.danger { @extend .cred; }
-      }
+  &:hover {
+    color: $gl-gray;
+
+    &.danger {
+      color: $gl-text-red;
     }
   }
 }
+
+.note-role {
+  position: relative;
+  top: -2px;
+  display: inline-block;
+  padding-left: 4px;
+  padding-right: 4px;
+  color: #8F8F8F;
+  font-size: 12px;
+  line-height: 20px;
+  border: 1px solid #bbb;
+  border-radius: $border-radius-base;
+}
+
 .diff-file .note .note-actions {
   right: 0;
   top: 0;
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 2cf32e6093d..0026c0a1621 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -7,18 +7,15 @@
       .note-header
         - if note_editable?(note)
           .note-actions
-            = link_to '#', title: 'Edit comment', class: 'js-note-edit' do
+            - access = note.project.team.human_max_access(note.author.id)
+            - if access
+              %span.note-role
+                = access
+            = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
               = icon('pencil-square-o')
-
-            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'js-note-delete danger' do
+            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
               = icon('trash-o')
 
-        - unless note.system
-          - access = note.project.team.human_max_access(note.author.id)
-          - if access
-            %span.note-role.label
-              = access
-
         = link_to_member(note.project, note.author, avatar: false)
 
         %span.author-username
diff --git a/app/views/projects/notes/discussions/_active.html.haml b/app/views/projects/notes/discussions/_active.html.haml
index 4f15a99d061..3e538a5a581 100644
--- a/app/views/projects/notes/discussions/_active.html.haml
+++ b/app/views/projects/notes/discussions/_active.html.haml
@@ -2,7 +2,7 @@
 .discussion.js-toggle-container{ class: note.discussion_id }
   .discussion-header
     .discussion-actions
-      = link_to "#", class: "js-toggle-button" do
+      = link_to "#", class: "note-action-button js-toggle-button" do
         %i.fa.fa-chevron-up
         Show/hide discussion
     %div
diff --git a/app/views/projects/notes/discussions/_commit.html.haml b/app/views/projects/notes/discussions/_commit.html.haml
index 8d0a1af787c..35b4b70241b 100644
--- a/app/views/projects/notes/discussions/_commit.html.haml
+++ b/app/views/projects/notes/discussions/_commit.html.haml
@@ -4,7 +4,7 @@
 .discussion.js-toggle-container{ class: note.discussion_id }
   .discussion-header
     .discussion-actions
-      = link_to "#", class: "js-toggle-button" do
+      = link_to "#", class: "note-action-button js-toggle-button" do
         %i.fa.fa-chevron-up
         Show/hide discussion
     %div
diff --git a/app/views/projects/notes/discussions/_outdated.html.haml b/app/views/projects/notes/discussions/_outdated.html.haml
index 218b0da3977..bee452207e1 100644
--- a/app/views/projects/notes/discussions/_outdated.html.haml
+++ b/app/views/projects/notes/discussions/_outdated.html.haml
@@ -2,7 +2,7 @@
 .discussion.js-toggle-container{ class: note.discussion_id }
   .discussion-header
     .discussion-actions
-      = link_to "#", class: "js-toggle-button" do
+      = link_to "#", class: "note-action-button js-toggle-button" do
         %i.fa.fa-chevron-down
         Show/hide discussion
     %div