diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7e5cca6257..6107132097 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -188,11 +188,3 @@
 .merge-request-form .select2-container {
   width: 250px !important;
 }
-
-.approve-btn {
-  margin-right: 10px;
-}
-
-.approved-by-users {
-  padding: 5px 0;
-}
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
index eb2c830de6..83fe0a2616 100644
--- a/app/views/projects/merge_requests/widget/_open.html.haml
+++ b/app/views/projects/merge_requests/widget/_open.html.haml
@@ -29,3 +29,9 @@
         Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
         = succeed '.' do
           != gfm(issues_sentence(@closes_issues))
+
+  - if @merge_request.approvals.any?
+    .mr-widget-footer.approved-by-users
+      Approved by
+      - @merge_request.approved_by_users.each do |user|
+        = link_to_member(@project, user, name: false, size: 24)
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
index 1604a7f6c0..41aa66dd76 100644
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -24,12 +24,6 @@
     %strong
       = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
-  - if @merge_request.approvals.any?
-    .approved-by-users
-      Approved by
-      - @merge_request.approved_by_users.each do |user|
-        = link_to_member(@project, user, name: false, size: 24)
-
   :coffeescript
     disableButtonIfEmptyField '#commit_message', '.accept_merge_request'
 
diff --git a/app/views/projects/merge_requests/widget/open/_approve.html.haml b/app/views/projects/merge_requests/widget/open/_approve.html.haml
index 2b374e6282..cb2d76d2ee 100644
--- a/app/views/projects/merge_requests/widget/open/_approve.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_approve.html.haml
@@ -1,13 +1,8 @@
-%div
-  - unless @merge_request.approved_by?(current_user)
-    .append-bottom-10
-      = form_for [:approve, @project.namespace.becomes(Namespace), @project, @merge_request], method: :post do |f|
-        = f.submit "Approve Merge Request", class: "btn btn-reopen approve-btn"
-
-  %p This merge request must be approved by #{pluralize(@merge_request.approvals_required, 'user')} before it can be merged
-
-  - if @merge_request.approvals.any?
-    .approved-by-users
-      Approved by
-      - @merge_request.approved_by_users.each do |user|
-        = link_to_member(@project, user, name: false, size: 24)
+%div
+  %h4
+    Requires #{pluralize(@merge_request.approvals_left, 'more approval')}
+  %p Each merge request in this project must be approved by #{pluralize(@merge_request.approvals_required, 'person')} before it can be accepted.
+  - unless @merge_request.approved_by?(current_user)
+    .append-bottom-10
+      = form_for [:approve, @project.namespace.becomes(Namespace), @project, @merge_request], method: :post do |f|
+        = f.submit "Approve Merge Request", class: "btn btn-primary approve-btn"
\ No newline at end of file
diff --git a/doc/workflow/approval_for_merge_requests/mr.png b/doc/workflow/approval_for_merge_requests/mr.png
index 29cc1300ec..59addfd7f9 100644
Binary files a/doc/workflow/approval_for_merge_requests/mr.png and b/doc/workflow/approval_for_merge_requests/mr.png differ