diff --git a/src/main/twirl/dashboard/issueslist.scala.html b/src/main/twirl/dashboard/issueslist.scala.html
index 6e8e0fb..4f27ea8 100644
--- a/src/main/twirl/dashboard/issueslist.scala.html
+++ b/src/main/twirl/dashboard/issueslist.scala.html
@@ -119,9 +119,9 @@
                     <div class="small" style="padding-left: 20px;">
                       @milestone.dueDate.map { dueDate =>
                         @if(isPast(dueDate)){
-                          <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                          <img src="@assets/common/images/alert.png"/><span class="milestone-alert">Due by @date(dueDate)</span>
                         } else {
-                          <span class="muted">Due in @date(dueDate)</span>
+                          <span class="muted">Due by @date(dueDate)</span>
                         }
                       }.getOrElse {
                         <span class="muted">No due date</span>
diff --git a/src/main/twirl/issues/create.scala.html b/src/main/twirl/issues/create.scala.html
index 279011b..cf91159 100644
--- a/src/main/twirl/issues/create.scala.html
+++ b/src/main/twirl/issues/create.scala.html
@@ -33,7 +33,7 @@
                 @if(hasWritePermission){
                   <input type="hidden" name="milestoneId" value=""/>
                   @helper.html.dropdown() {
-                    <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
+                    <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
                     @milestones.filter(_.closedDate.isEmpty).map { milestone =>
                       <li>
                         <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
@@ -41,9 +41,9 @@
                           <div class="small" style="padding-left: 20px;">
                             @milestone.dueDate.map { dueDate =>
                               @if(isPast(dueDate)){
-                                <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                                <img src="@assets/common/images/alert.png"/><span class="milestone-alert">Due by @date(dueDate)</span>
                               } else {
-                                <span class="muted">Due in @date(dueDate)</span>
+                                <span class="muted">Due by @date(dueDate)</span>
                               }
                             }.getOrElse {
                               <span class="muted">No due date</span>
@@ -113,7 +113,7 @@
     if(milestoneId == ''){
       $('#label-milestone').text('No milestone');
     } else {
-      $('#label-milestone').html($('<span>').append('Milestone: ').append($('<span class="strong">').text(title)));
+      $('#label-milestone').html($('<span class="strong">').text(title));
       $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
     }
     $('input[name=milestoneId]').val(milestoneId);
diff --git a/src/main/twirl/issues/issueinfo.scala.html b/src/main/twirl/issues/issueinfo.scala.html
index 47ceebc..3a9fa94 100644
--- a/src/main/twirl/issues/issueinfo.scala.html
+++ b/src/main/twirl/issues/issueinfo.scala.html
@@ -42,9 +42,9 @@
               <div class="small" style="padding-left: 20px;">
                 @milestone.dueDate.map { dueDate =>
                   @if(isPast(dueDate)){
-                    <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                    <img src="@assets/common/images/alert.png"/><span class="milestone-alert">Due by @date(dueDate)</span>
                   } else {
-                    <span class="muted">Due in @date(dueDate)</span>
+                    <span class="muted">Due by @date(dueDate)</span>
                   }
                 }.getOrElse {
                   <span class="muted">No due date</span>
@@ -67,7 +67,7 @@
 <span id="label-milestone">
   @issue.milestoneId.map { milestoneId =>
     @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
-      <span class="strong">@milestone.title</span>
+      <span class="strong small">@milestone.title</span>
     }
   }.getOrElse(<span class="muted small">No milestone</span>)
 </span>
@@ -123,5 +123,27 @@
     });
     return false;
   });
+
+  $('a.milestone').click(function(){
+    var title = $(this).data('title');
+    var milestoneId = $(this).data('id');
+    $.post('@url(repository)/issues/@issue.issueId/milestone',
+    {
+      milestoneId: milestoneId
+    },
+    function(data){
+      console.log(data);
+      $('a.milestone i.icon-ok').attr('class', 'icon-white');
+      if(milestoneId == ''){
+        $('#label-milestone').html($('<span class="muted small">').text('No milestone'));
+        $('#milestone-progress-area').empty();
+      } else {
+        $('#label-milestone').html($('<span class="strong small">').text(title));
+        $('#milestone-progress-area').html(data);
+        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
+      }
+    });
+  });
+
 });
 </script>
diff --git a/src/main/twirl/issues/milestones/list.scala.html b/src/main/twirl/issues/milestones/list.scala.html
index 0c3ae91..0a38538 100644
--- a/src/main/twirl/issues/milestones/list.scala.html
+++ b/src/main/twirl/issues/milestones/list.scala.html
@@ -37,9 +37,9 @@
                   } else {
                     @milestone.dueDate.map { dueDate =>
                       @if(isPast(dueDate)){
-                        <img src="@assets/common/images/alert.png"/><span class="muted milestone-alert">Due in @date(dueDate)</span>
+                        <img src="@assets/common/images/alert.png"/><span class="muted milestone-alert">Due by @date(dueDate)</span>
                       } else {
-                        <span class="muted">Due in @date(dueDate)</span>
+                        <span class="muted">Due by @date(dueDate)</span>
                       }
                     }.getOrElse {
                       <span class="muted">No due date</span>
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index af524ef..37d8108 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -766,13 +766,13 @@
 }
 
 div#milestone-progress-area div.milestone-progress {
-  width: 150px;
+  width: 130px;
   margin-bottom: -6px;
 }
 
 div.milestone-progress {
   position: relative;
-  height: 20px;
+  height: 10px;
   color: white;
   margin-bottom: 4px;
   font-weight: bold;
diff --git a/src/main/webapp/assets/common/images/alert_mono.png b/src/main/webapp/assets/common/images/alert_mono.png
deleted file mode 100644
index 2e4c137..0000000
--- a/src/main/webapp/assets/common/images/alert_mono.png
+++ /dev/null
Binary files differ