diff --git a/src/main/scala/app/PullRequestsController.scala b/src/main/scala/app/PullRequestsController.scala
index 4598669..d361d44 100644
--- a/src/main/scala/app/PullRequestsController.scala
+++ b/src/main/scala/app/PullRequestsController.scala
@@ -77,7 +77,7 @@
           issue, pullreq,
           getComments(owner, name, issueId.toInt),
           (getCollaborators(owner, name) :+ owner).sorted,
-          getMilestones(owner, name),
+          getMilestonesWithIssueCount(owner, name),
           commits,
           diffs,
           requestCommitId.getName,
diff --git a/src/main/twirl/issues/commentform.scala.html b/src/main/twirl/issues/commentform.scala.html
new file mode 100644
index 0000000..3c2f7ff
--- /dev/null
+++ b/src/main/twirl/issues/commentform.scala.html
@@ -0,0 +1,29 @@
+@(issue: model.Issue,
+  hasWritePermission: Boolean,
+  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+@import view.helpers._
+@if(loginAccount.isDefined){
+  <form method="POST" validate="true">
+    <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
+      <div class="box issue-comment-box">
+      <div class="box-content">
+        @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px;")
+      </div>
+    </div>
+    <div class="pull-right">
+      <input type="hidden" name="issueId" value="@issue.issueId"/>
+      <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
+      @if((!issue.isPullRequest || !issue.closed) && (hasWritePermission || issue.openedUserName == loginAccount.get.userName)){
+        <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
+      }
+    </div>
+  </form>
+}
+<script>
+$(function(){
+  $('#action').click(function(){
+    $('<input type="hidden">').attr('name', 'action').val($(this).val().toLowerCase()).appendTo('form');
+  });
+});
+</script>
\ No newline at end of file
diff --git a/src/main/twirl/issues/commentlist.scala.html b/src/main/twirl/issues/commentlist.scala.html
new file mode 100644
index 0000000..7957ee7
--- /dev/null
+++ b/src/main/twirl/issues/commentlist.scala.html
@@ -0,0 +1,61 @@
+@(comments: List[model.IssueComment],
+  hasWritePermission: Boolean,
+  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+@import view.helpers._
+@comments.map { comment =>
+  @if(comment.action != "close" && comment.action != "reopen" && comment.action != "merge"){
+    <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
+    <div class="box issue-comment-box" id="comment-@comment.commentId">
+      <div class="box-header-small">
+        <i class="icon-comment"></i>
+        <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> commented
+        <span class="pull-right">
+          @datetime(comment.registeredDate)
+          @if(comment.action != "commit" && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
+            <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>
+          }
+        </span>
+      </div>
+      <div class="box-content"class="issue-content" id="commentContent-@comment.commentId">
+        @markdown(comment.content, repository, false, true)
+      </div>
+    </div>
+  }
+  @if(comment.action == "merge"){
+    <div class="small" style="margin-top: 10px; margin-bottom: 10px;">
+      <span class="label label-info">Merged</span>
+      @avatar(comment.commentedUserName, 20)
+      <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> merged the pull request @datetime(comment.registeredDate)
+    </div>
+  }
+  @if(comment.action == "close" || comment.action == "close_comment"){
+    <div class="small issue-comment-action">
+      <span class="label label-important">Closed</span>
+      @avatar(comment.commentedUserName, 20)
+      <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
+    </div>
+  }
+  @if(comment.action == "reopen" || comment.action == "reopen_comment"){
+    <div class="small issue-comment-action">
+      <span class="label label-success">Reopened</span>
+      @avatar(comment.commentedUserName, 20)
+      <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
+    </div>
+  }
+}
+<script>
+$(function(){
+  $('i.icon-pencil').click(function(){
+    var id = $(this).closest('a').data('comment-id');
+    $.get('@url(repository)/issue_comments/_data/' + id,
+    {
+      dataType : 'html'
+    },
+    function(data){
+      $('#commentContent-' + id).empty().html(data);
+    });
+    return false;
+  });
+});
+</script>
\ No newline at end of file
diff --git a/src/main/twirl/issues/issue.scala.html b/src/main/twirl/issues/issue.scala.html
index b4038a8..5742215 100644
--- a/src/main/twirl/issues/issue.scala.html
+++ b/src/main/twirl/issues/issue.scala.html
@@ -17,134 +17,9 @@
   </ul>
   <div class="row-fluid">
     <div class="span10">
-      <div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
-      <div class="box issue-box">
-        <div class="box-content" style="padding: 0px;">
-          <div class="issue-header">
-            @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
-              <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
-            }
-            <div class="small muted">
-              <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> opened this issue @datetime(issue.registeredDate)
-            </div>
-            <h4 id="issueTitle">@issue.title</h4>
-          </div>
-          <div class="issue-info">
-            <span id="label-assigned">
-              @issue.assignedUserName.map { userName =>
-                @avatar(userName, 20) <a href="@url(userName)" class="username strong">@userName</a> is assigned
-              }.getOrElse("No one is assigned")
-            </span>
-            @if(hasWritePermission){
-              @helper.html.dropdown() {
-                <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-                @collaborators.map { collaborator =>
-                  <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
-                }
-              }
-            }
-            <div class="pull-right">
-              <span id="label-milestone">
-                @issue.milestoneId.map { milestoneId =>
-                  @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
-                    Milestone: <strong>@milestone.title</strong>
-                  }
-                }.getOrElse("No milestone")
-              </span>
-              <div id="milestone-progress-area">
-                @issue.milestoneId.map { milestoneId =>
-                  @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
-                    @issues.milestones.html.progress(openCount + closeCount, closeCount, false)
-                  }
-                }
-              </div>
-              @if(hasWritePermission){
-                @helper.html.dropdown() {
-                  <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
-                  @milestones.map { case (milestone, _, _) =>
-                    <li>
-                      <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
-                        <i class="icon-white"></i> @milestone.title
-                        <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)
-                            } else {
-                              <span class="muted">Due in @date(dueDate)</span>
-                            }
-                          }.getOrElse {
-                            <span class="muted">No due date</span>
-                          }
-                        </div>
-                      </a>
-                    </li>
-                  }
-                }
-              }
-            </div>
-          </div>
-          <div class="issue-content" id="issueContent">
-            @markdown(issue.content getOrElse "No description given.", repository, false, true)
-          </div>
-        </div>
-      </div>
-      <div class="issue-participants">
-        @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
-          <strong>@participants.size</strong> @plural(participants.size, "participant")
-          @participants.map { participant => <a href="@url(participant)">@avatar(participant, 20, tooltip = true)</a> }
-        }
-      </div>
-      @comments.map { comment =>
-        @if(comment.action != "close" && comment.action != "reopen"){
-        <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
-        <div class="box issue-comment-box" id="comment-@comment.commentId">
-          <div class="box-header-small">
-            <i class="icon-comment"></i>
-            <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> commented
-            <span class="pull-right">
-              @datetime(comment.registeredDate)
-              @if(comment.action != "commit" && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
-                <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>
-              }
-            </span>
-          </div>
-          <div class="box-content"class="issue-content" id="commentContent-@comment.commentId">
-            @markdown(comment.content, repository, false, true)
-          </div>
-        </div>
-        }
-        @if(comment.action == "close" || comment.action == "close_comment"){
-        <div class="small issue-comment-action">
-          <span class="label label-important">Closed</span>
-          @avatar(comment.commentedUserName, 20)
-          <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
-        </div>
-        }
-        @if(comment.action == "reopen" || comment.action == "reopen_comment"){
-        <div class="small issue-comment-action">
-          <span class="label label-success">Reopened</span>
-          @avatar(comment.commentedUserName, 20)
-          <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
-        </div>
-        }
-      }
-      @if(loginAccount.isDefined){
-        <form method="POST" validate="true">
-          <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
-          <div class="box issue-comment-box">
-            <div class="box-content">
-              @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px;")
-            </div>
-          </div>
-          <div class="pull-right">
-            <input type="hidden" name="issueId" value="@issue.issueId"/>
-            <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
-            @if(hasWritePermission || issue.openedUserName == loginAccount.get.userName){
-              <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
-            }
-          </div>
-        </form>
-      }
+      @issuedetail(issue, comments, collaborators, milestones, hasWritePermission, repository)
+      @commentlist(comments, hasWritePermission, repository)
+      @commentform(issue, hasWritePermission, repository)
     </div>
     <div class="span2">
       @if(issue.closed) {
@@ -184,82 +59,6 @@
 }
 <script>
 $(function(){
-  @if(issue.assignedUserName.isDefined){
-    $('a.assign[data-name=@issue.assignedUserName] i').attr('class', 'icon-ok');
-  }
-  @if(issue.milestoneId.isDefined){
-    $('a.milestone[data-id=@issue.milestoneId] i').attr('class', 'icon-ok');
-  }
-
-  $('#edit').click(function(){
-    $.get('@url(repository)/issues/_data/@issue.issueId',
-    {
-      dataType : 'html'
-    },
-    function(data){
-      $('#issueContent').empty().html(data);
-    });
-    return false;
-  });
-
-  $('a.assign').click(function(){
-    var $this = $(this);
-    var userName = $this.data('name');
-    $.post('@url(repository)/issues/@issue.issueId/assign',
-    {
-      assignedUserName: userName
-    },
-    function(){
-      $('a.assign i.icon-ok').attr('class', 'icon-white');
-      if(userName == ''){
-        $('#label-assigned').text('No one is assigned');
-      } else {
-        $('#label-assigned').empty()
-          .append($this.find('img.avatar').clone(false)).append(' ')
-          .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
-          .append(' is assigned');
-        $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
-      }
-    });
-  });
-
-  $('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').text('No milestone');
-        $('#milestone-progress-area').empty();
-      } else {
-        $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
-        $('#milestone-progress-area').html(data);
-        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
-      }
-    });
-  });
-
-  $('i.icon-pencil').click(function(){
-    var id = $(this).closest('a').data('comment-id');
-    $.get('@url(repository)/issue_comments/_data/' + id,
-    {
-      dataType : 'html'
-    },
-    function(data){
-      $('#commentContent-' + id).empty().html(data);
-    });
-    return false;
-  });
-
-  $('#action').click(function(){
-    $('<input type="hidden">').attr('name', 'action').val($(this).val().toLowerCase()).appendTo('form');
-  });
-
   $('a.toggle-label').click(function(){
     var path, icon;
     var i = $(this).children('i');
diff --git a/src/main/twirl/issues/issuedetail.scala.html b/src/main/twirl/issues/issuedetail.scala.html
new file mode 100644
index 0000000..28b557e
--- /dev/null
+++ b/src/main/twirl/issues/issuedetail.scala.html
@@ -0,0 +1,148 @@
+@(issue: model.Issue,
+  comments: List[model.IssueComment],
+  collaborators: List[String],
+  milestones: List[(model.Milestone, Int, Int)],
+  hasWritePermission: Boolean,
+  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+@import view.helpers._
+<div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
+<div class="box issue-box">
+  <div class="box-content" style="padding: 0px;">
+    <div class="issue-header">
+      @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
+        <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
+      }
+      <div class="small muted">
+        <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> opened this issue @datetime(issue.registeredDate)
+      </div>
+      <h4 id="issueTitle">@issue.title</h4>
+    </div>
+    <div class="issue-info">
+      <span id="label-assigned">
+        @issue.assignedUserName.map { userName =>
+          @avatar(userName, 20) <a href="@url(userName)" class="username strong">@userName</a> is assigned
+        }.getOrElse("No one is assigned")
+      </span>
+      @if(hasWritePermission){
+        @helper.html.dropdown() {
+          <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
+          @collaborators.map { collaborator =>
+            <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
+          }
+        }
+      }
+      <div class="pull-right">
+        <span id="label-milestone">
+          @issue.milestoneId.map { milestoneId =>
+            @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
+              Milestone: <strong>@milestone.title</strong>
+            }
+          }.getOrElse("No milestone")
+        </span>
+        <div id="milestone-progress-area">
+          @issue.milestoneId.map { milestoneId =>
+            @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
+              @issues.milestones.html.progress(openCount + closeCount, closeCount, false)
+            }
+          }
+        </div>
+        @if(hasWritePermission){
+          @helper.html.dropdown() {
+            <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
+            @milestones.map { case (milestone, _, _) =>
+              <li>
+                <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
+                  <i class="icon-white"></i> @milestone.title
+                  <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)
+                      } else {
+                        <span class="muted">Due in @date(dueDate)</span>
+                      }
+                    }.getOrElse {
+                      <span class="muted">No due date</span>
+                    }
+                  </div>
+                </a>
+              </li>
+            }
+          }
+        }
+      </div>
+    </div>
+    <div class="issue-content" id="issueContent">
+      @markdown(issue.content getOrElse "No description given.", repository, false, true)
+    </div>
+  </div>
+</div>
+<div class="issue-participants">
+  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
+    <strong>@participants.size</strong> @plural(participants.size, "participant")
+    @participants.map { participant => <a href="@url(participant)">@avatar(participant, 20, tooltip = true)</a> }
+  }
+</div>
+<script>
+$(function(){
+  @if(issue.assignedUserName.isDefined){
+    $('a.assign[data-name=@issue.assignedUserName] i').attr('class', 'icon-ok');
+  }
+  @if(issue.milestoneId.isDefined){
+    $('a.milestone[data-id=@issue.milestoneId] i').attr('class', 'icon-ok');
+  }
+
+  $('#edit').click(function(){
+    $.get('@url(repository)/issues/_data/@issue.issueId',
+    {
+      dataType : 'html'
+    },
+    function(data){
+      $('#issueContent').empty().html(data);
+    });
+    return false;
+  });
+
+  $('a.assign').click(function(){
+    var $this = $(this);
+    var userName = $this.data('name');
+    $.post('@url(repository)/issues/@issue.issueId/assign',
+    {
+      assignedUserName: userName
+    },
+    function(){
+      $('a.assign i.icon-ok').attr('class', 'icon-white');
+      if(userName == ''){
+        $('#label-assigned').text('No one is assigned');
+      } else {
+        $('#label-assigned').empty()
+          .append($this.find('img.avatar').clone(false)).append(' ')
+          .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
+          .append(' is assigned');
+        $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
+      }
+    });
+  });
+
+  $('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').text('No milestone');
+        $('#milestone-progress-area').empty();
+      } else {
+        $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
+        $('#milestone-progress-area').html(data);
+        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
+      }
+    });
+  });
+});
+</script>
\ No newline at end of file
diff --git a/src/main/twirl/pulls/discussion.scala.html b/src/main/twirl/pulls/discussion.scala.html
index 9932b1a..76bb332 100644
--- a/src/main/twirl/pulls/discussion.scala.html
+++ b/src/main/twirl/pulls/discussion.scala.html
@@ -2,7 +2,7 @@
   pullreq: model.PullRequest,
   comments: List[model.IssueComment],
   collaborators: List[String],
-  milestones: List[model.Milestone],
+  milestones: List[(model.Milestone, Int, Int)],
   hasConflict: Boolean,
   hasWritePermission: Boolean,
   repository: service.RepositoryService.RepositoryInfo,
@@ -11,96 +11,9 @@
 @import view.helpers._
 <div class="row-fluid">
   <div class="span10">
-    <div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
-    <div class="box issue-box">
-      <div class="box-content" style="padding: 0px;">
-        <div class="issue-header">
-          @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
-            <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
-          }
-          <div class="small muted">
-            <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> opened this issue @datetime(issue.registeredDate)
-          </div>
-          <h4 id="issueTitle">@issue.title</h4>
-        </div>
-        <div class="issue-info">
-          <span id="label-assigned">
-            @issue.assignedUserName.map { userName =>
-              @avatar(userName, 20) <a href="@url(userName)" class="username strong">@userName</a> is assigned
-            }.getOrElse("No one is assigned")
-          </span>
-          @if(hasWritePermission){
-            @helper.html.dropdown() {
-              <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-              @collaborators.map { collaborator =>
-                <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
-              }
-            }
-          }
-          <div class="pull-right">
-            <span id="label-milestone">
-              @issue.milestoneId.map { milestoneId =>
-                @milestones.find(_.milestoneId == milestoneId).map { milestone =>
-                  Milestone: <strong>@milestone.title</strong>
-                }
-              }.getOrElse("No milestone")
-            </span>
-            @if(hasWritePermission){
-              @helper.html.dropdown() {
-                <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
-                @milestones.map { milestone =>
-                  <li><a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId"><i class="icon-white"></i> @milestone.title</a></li>
-                }
-              }
-            }
-          </div>
-        </div>
-        <div class="issue-content" id="issueContent">
-          @markdown(issue.content getOrElse "No description given.", repository, false, true)
-        </div>
-      </div>
-    </div>
-    @comments.map { comment =>
-      @if(comment.action != "close" && comment.action != "reopen" && comment.action != "merge"){
-      <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
-      <div class="box issue-comment-box" id="comment-@comment.commentId">
-        <div class="box-header-small">
-          <i class="icon-comment"></i>
-          <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> commented
-          <span class="pull-right">
-            @datetime(comment.registeredDate)
-            @if(hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false)){
-              <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>
-            }
-          </span>
-        </div>
-        <div class="box-content"class="issue-content" id="commentContent-@comment.commentId">
-          @markdown(comment.content, repository, false, true)
-        </div>
-      </div>
-      }
-      @if(comment.action == "merge"){
-      <div class="small" style="margin-top: 10px; margin-bottom: 10px;">
-        <span class="label label-info">Merged</span>
-        @avatar(comment.commentedUserName, 20)
-        <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> merged the pull request @datetime(comment.registeredDate)
-      </div>
-      }
-      @if(comment.action == "close" || comment.action == "close_comment"){
-      <div class="small issue-comment-action">
-        <span class="label label-important">Closed</span>
-        @avatar(comment.commentedUserName, 20)
-        <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the pull request @datetime(comment.registeredDate)
-      </div>
-      }
-      @if(comment.action == "reopen" || comment.action == "reopen_comment"){
-      <div class="small issue-comment-action">
-        <span class="label label-success">Reopened</span>
-        @avatar(comment.commentedUserName, 20)
-        <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
-      </div>
-      }
-    }
+    @issues.html.issuedetail(issue, comments, collaborators, milestones, hasWritePermission, repository)
+    @issues.html.commentlist(comments, hasWritePermission, repository)
+
     @if(hasWritePermission && !issue.closed){
       <div class="box issue-comment-box" style="background-color: #d8f5cd;">
         <div class="box-content"class="issue-content" style="border: 1px solid #95c97e; padding: 10px;">
@@ -173,23 +86,7 @@
         </div>
       </div>
     }
-    @if(loginAccount.isDefined){
-      <form method="POST" validate="true">
-        <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
-        <div class="box issue-comment-box">
-          <div class="box-content">
-            @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px;")
-          </div>
-        </div>
-        <div class="pull-right">
-          <input type="hidden" name="issueId" value="@issue.issueId"/>
-          <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
-          @if(!issue.closed && (hasWritePermission || issue.openedUserName == loginAccount.get.userName)){
-            <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="Close" id="action"/>
-          }
-        </div>
-      </form>
-    }
+    @issues.html.commentform(issue, hasWritePermission, repository)
   </div>
   <div class="span2">
     @if(issue.closed) {
@@ -209,77 +106,6 @@
 </div>
 <script>
 $(function(){
-  @if(issue.assignedUserName.isDefined){
-    $('a.assign[data-name=@issue.assignedUserName] i').attr('class', 'icon-ok');
-  }
-  @if(issue.milestoneId.isDefined){
-    $('a.milestone[data-id=@issue.milestoneId] i').attr('class', 'icon-ok');
-  }
-
-  $('#edit').click(function(){
-    $.get('@url(repository)/issues/_data/@issue.issueId',
-    {
-      dataType : 'html'
-    },
-    function(data){
-      $('#issueContent').empty().html(data);
-    });
-    return false;
-  });
-
-  $('a.assign').click(function(){
-    var userName = $(this).data('name');
-    $.post('@url(repository)/issues/@issue.issueId/assign',
-    {
-      assignedUserName: userName
-    },
-    function(){
-      $('a.assign i.icon-ok').attr('class', 'icon-white');
-      if(userName == ''){
-        $('#label-assigned').text('No one is assigned');
-      } else {
-        $('#label-assigned').html($('<span>')
-          .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
-          .append(' is assigned'));
-        $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
-      }
-    });
-  });
-
-  $('a.milestone').click(function(){
-    var title = $(this).text();
-    var milestoneId = $(this).data('id');
-    $.post('@url(repository)/issues/@issue.issueId/milestone',
-    {
-      milestoneId: milestoneId
-    },
-    function(){
-      $('a.milestone i.icon-ok').attr('class', 'icon-white');
-      if(milestoneId == ''){
-        $('#label-milestone').text('No milestone');
-      } else {
-        $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
-        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
-      }
-    });
-  });
-
-  $('i.icon-pencil').click(function(){
-    var id = $(this).closest('a').data('comment-id');
-    $.get('@url(repository)/issue_comments/_data/' + id,
-    {
-      dataType : 'html'
-    },
-    function(data){
-      $('#commentContent-' + id).empty().html(data);
-    });
-    return false;
-  });
-
-  $('#action').click(function(){
-    $('<input type="hidden">').attr('name', 'action').val($(this).val().toLowerCase()).appendTo('form');
-  });
-
   $('#show-command-line').click(function(){
     $('#command-line').show();
     return false;
diff --git a/src/main/twirl/pulls/pullreq.scala.html b/src/main/twirl/pulls/pullreq.scala.html
index 57bee0e..caf78f1 100644
--- a/src/main/twirl/pulls/pullreq.scala.html
+++ b/src/main/twirl/pulls/pullreq.scala.html
@@ -2,7 +2,7 @@
   pullreq: model.PullRequest,
   comments: List[model.IssueComment],
   collaborators: List[String],
-  milestones: List[model.Milestone],
+  milestones: List[(model.Milestone, Int, Int)],
   commits: Seq[Seq[util.JGitUtil.CommitInfo]],
   diffs: Seq[util.JGitUtil.DiffInfo],
   commitId: String,