diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss
index 289490712b66059149781bdef9ed2c6d6ef9ce7e..cf6d5ba933649a646efc9cf7ca3fc1b75522aec2 100644
--- a/app/assets/stylesheets/main/mixins.scss
+++ b/app/assets/stylesheets/main/mixins.scss
@@ -124,7 +124,7 @@
   margin-bottom: 10px;
 }
 
-@mixin str-truncated($max_width: "82%") {
+@mixin str-truncated($max_width: 82%) {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/app/assets/stylesheets/sections/milestone.scss b/app/assets/stylesheets/sections/milestone.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d20391e38fd0cbb627b8514627a4b3ca41081f4e
--- /dev/null
+++ b/app/assets/stylesheets/sections/milestone.scss
@@ -0,0 +1,3 @@
+.issues-sortable-list .str-truncated {
+  max-width: 70%;
+}
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 6eec2094f86bb2af55062ff78b1eaf2e4d721bfb..6c6fc7e0779ef92b79053be885ddb83a8cd80225 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -87,6 +87,11 @@ class Projects::IssuesController < Projects::ApplicationController
           render :edit
         end
       end
+      format.json do
+        render json: {
+          saved: @issue.valid?,
+        }
+      end
     end
   end
 
diff --git a/app/views/projects/milestones/_issue.html.haml b/app/views/projects/milestones/_issue.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..5fba8cd53640a7e279a8e98efefd8fa1d3895d8b
--- /dev/null
+++ b/app/views/projects/milestones/_issue.html.haml
@@ -0,0 +1,9 @@
+%li{ 'data-iid' => issue.iid, 'data-url' => project_issue_path(@project, issue) }
+  %span.str-truncated
+    = link_to [@project, issue] do
+      %span.cgray ##{issue.iid}
+    = link_to_gfm issue.title, [@project, issue]
+  - if issue.assignee
+    .pull-right
+      = image_tag avatar_icon(issue.assignee.email, 16), class: "avatar s16"
+
diff --git a/app/views/projects/milestones/_issues.html.haml b/app/views/projects/milestones/_issues.html.haml
index 83eb327975b406a7d32d55993c82048ec47f5339..9dbcab19a2a52d5dd4edc35e6fc6b82bea97dc38 100644
--- a/app/views/projects/milestones/_issues.html.haml
+++ b/app/views/projects/milestones/_issues.html.haml
@@ -1,11 +1,6 @@
 .panel.panel-default
   .panel-heading= title
-  %ul.well-list
+  %ul{ class: "well-list issues-sortable-list", id: "issues-list-#{id}", "data-state" => id }
     - issues.each do |issue|
-      %li
-        = link_to [@project, issue] do
-          %span.label{class: issue.closed? ? 'label-danger' : 'label-info'} ##{issue.iid}
-        = link_to_gfm truncate(issue.title, length: 40), [@project, issue]
-        - if issue.assignee
-          .pull-right
-            = image_tag avatar_icon(issue.assignee.email, 16), class: "avatar s16"
+      = render 'issue', issue: issue
+    %li.light Drag and drop available
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index d355f25882757ea0ca3586be03af511ce84ea802..594b6a0c72fd5bb5f958d129583ce4c02888435a 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -35,6 +35,12 @@
   %h4.title
     = gfm escape_once(@milestone.title)
 
+  - if @milestone.description.present?
+    .description
+      .wiki
+        = preserve do
+          = markdown @milestone.description
+
   .context
     %p
       Progress:
@@ -45,11 +51,6 @@
     .progress.progress-info
       .progress-bar{style: "width: #{@milestone.percent_complete}%;"}
 
-  - if @milestone.description.present?
-    .description
-      .wiki
-        = preserve do
-          = markdown @milestone.description
 
 %ul.nav.nav-tabs
   %li.active
@@ -74,12 +75,14 @@
 .tab-content
   .tab-pane.active#tab-issues
     .row
-      .col-md-4
-        = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.opened.unassigned)
-      .col-md-4
-        = render('issues', title: 'Ongoing Issues (open and assigned)', issues: @issues.opened.assigned)
-      .col-md-4
-        = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed)
+      .col-md-3
+        = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.only_opened.unassigned, id: 'unassigned')
+      .col-md-3
+        = render('issues', title: 'Ongoing Issues (open and assigned)', issues: @issues.only_opened.assigned, id: 'ongoing')
+      .col-md-3
+        = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed, id: 'closed')
+      .col-md-3
+        = render('issues', title: 'Reopened Issues (reopened)', issues: @issues.only_reopened, id: 'reopened')
 
   .tab-pane#tab-merge-requests
     .row