diff --git a/public/css/gogs.css b/public/css/gogs.css
index d3da360f56..af787ebd0a 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1441,7 +1441,7 @@ html, body {
     margin-left: .8em;
 }
 
-#issue .assignee.dropdown-menu, #issue .assignee ul, #issue .milestone ul {
+#issue .assignee.dropdown-menu, #issue .assignee ul, #issue .milestone.dropdown-menu, #issue .milestone ul {
     padding: 0;
     margin: 0;
     min-width: 300px;
@@ -1514,8 +1514,14 @@ html, body {
     background-color: #77c64a;
 }
 
-#issue .issue-bar .milestone .nav-tabs a {
+#issue .milestone .nav-tabs a {
     padding: 4px 8px;
+    border-top: none;
+}
+
+#milestone {
+    margin-left: 24px;
+    margin-right: 12px;
 }
 
 /* wrapper and footer */
diff --git a/public/js/app.js b/public/js/app.js
index d7ef225049..d7514f795d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -571,7 +571,7 @@ function initIssue() {
 
     // milestone
 
-    $('.issue-bar .dropdown-menu a[data-toggle="tab"]').on("click", function (e) {
+    $('#issue .dropdown-menu a[data-toggle="tab"]').on("click", function (e) {
         e.stopPropagation();
         $(this).tab('show');
         return false;
@@ -580,6 +580,7 @@ function initIssue() {
     var $m = $('.milestone');
     if ($m.data("milestone") > 0) {
         $('.clear-milestone').toggleShow();
+        console.log("show");
     }
     $('.milestone', '#issue').on('click', 'li.milestone-item', function () {
         var id = $(this).data("id");
@@ -600,8 +601,16 @@ function initIssue() {
                     }
                 })
             }
+            return;
+        }
+        $('#milestone-id').val(id);
+        if (id > 0) {
+            $('.clear-milestone').toggleShow();
+            $('#milestone').text($(this).find("strong").text())
+        } else {
+            $('.clear-milestone').toggleHide();
+            $('#milestone').text($('#milestone').data("no-milestone"));
         }
-        return;
     });
 }
 
diff --git a/templates/issue/create.tmpl b/templates/issue/create.tmpl
index 6d08f69913..4b43116cca 100644
--- a/templates/issue/create.tmpl
+++ b/templates/issue/create.tmpl
@@ -31,6 +31,48 @@
                             </ul>
                         </div>
                     </div>
+                    <span><strong id="milestone" data-no-milestone="No milestone">No milestone</strong></span>
+                    <input type="hidden" name="milestoneid" value="0" id="milestone-id"/>
+                    <div style="display: inline-block;position: relative">
+                        <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
+                            <i class="fa fa-check-square-o"></i>
+                            <span class="caret"></span>
+                        </button>
+                        <div class="dropdown-menu milestone">
+                            <ul class="list-unstyled">
+                                <li data-id="0" class="clear-milestone milestone-item hidden"><i class="fa fa-times-circle-o"></i> Clear milestone </li>
+                                <li class="milestone-list">
+                                    <ul class="nav nav-tabs" data-init="tabs">
+                                        <li class="active"><a href="#milestone-open" data-toggle="tab">Open</a></li>
+                                        <li><a href="#milestone-close" data-toggle="tab">Closed</a></li>
+                                    </ul>
+                                    <div class="tab-content">
+                                        <div class="tab-pane active" id="milestone-open">
+                                            <p class="milestone-item">Nothing to show</p>
+                                            <ul class="list-unstyled">
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>due to 3 days later</p>
+                                                </li>
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>due to 3 days later</p>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="tab-pane" id="milestone-close">
+                                            <ul class="list-unstyled">
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>closed 3 days ago</p>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
                 <div class="form-group panel-body">
                     <div class="md-help pull-right"><!-- todo help link -->
diff --git a/templates/issue/view.tmpl b/templates/issue/view.tmpl
index 653f21088f..d252bd7f60 100644
--- a/templates/issue/view.tmpl
+++ b/templates/issue/view.tmpl
@@ -108,7 +108,7 @@
                         </button>
                         <div class="dropdown-menu dropdown-menu-right">
                             <ul class="list-unstyled">
-                                <li data-id="0" class="clear-milestone hidden"><i class="fa fa-times-circle-o"></i> Clear milestone </li>
+                                <li data-id="0" class="clear-milestone milestone-item hidden"><i class="fa fa-times-circle-o"></i> Clear milestone </li>
                                 <li class="milestone-list">
                                     <ul class="nav nav-tabs" data-init="tabs">
                                         <li class="active"><a href="#milestone-open" data-toggle="tab">Open</a></li>