diff --git a/src/main/twirl/gitbucket/core/helper/commitcomment.scala.html b/src/main/twirl/gitbucket/core/helper/commitcomment.scala.html
index cd242f2..73ff789 100644
--- a/src/main/twirl/gitbucket/core/helper/commitcomment.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/commitcomment.scala.html
@@ -3,34 +3,47 @@
   repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
   latestCommitId: Option[String] = None)(implicit context: gitbucket.core.controller.Context)
 @import gitbucket.core.view.helpers
-<div class="@if(comment.fileName.isDefined && (!latestCommitId.isDefined || latestCommitId.get == comment.commitId)){inline-comment}"
-    id="discussion_r@comment.commentId"
-    @if(comment.fileName.isDefined){filename="@comment.fileName.get"}
-    @if(comment.newLine.isDefined){newline="@comment.newLine.get"}
-    @if(comment.oldLine.isDefined){oldline="@comment.oldLine.get"}>
-  <div class="panel panel-default commit-comment-box commit-comment-@comment.commentId">
+<div class="panel-body commit-comment-box @if((!latestCommitId.isDefined || latestCommitId.get == comment.commitId)){inline-comment}" id="discussion_r@comment.commentId"
+  @if(comment.fileName.isDefined){filename="@comment.fileName.get"}
+  @if(comment.newLine.isDefined){newline="@comment.newLine.get"}
+  @if(comment.oldLine.isDefined){oldline="@comment.oldLine.get"}>
+  <div class="commit-comment-@comment.commentId">
+    @*
     <div class="panel-heading">
       @helpers.avatar(comment.commentedUserName, 20)
       @helpers.user(comment.commentedUserName, styleClass="username strong")
-        <span class="muted">
-          commented on
-          @if(comment.issueId.isDefined){
-            <a href="@helpers.url(repository)/pull/@comment.issueId">#@comment.issueId</a>
-          }
-          @comment.fileName.map { fileName =>
-            @fileName in
-          }
-          <a href="@context.path/@repository.owner/@repository.name/commit/@comment.commitId">@comment.commitId.substring(0, 7)</a>
-          @gitbucket.core.helper.html.datetimeago(comment.registeredDate)
-        </span>
+      <span class="muted">
+        commented on
+        @if(comment.issueId.isDefined){
+          <a href="@helpers.url(repository)/pull/@comment.issueId">#@comment.issueId</a>
+        }
+        @comment.fileName.map { fileName =>
+          @fileName in
+        }
+        <a href="@context.path/@repository.owner/@repository.name/commit/@comment.commitId">@comment.commitId.substring(0, 7)</a>
+        @gitbucket.core.helper.html.datetimeago(comment.registeredDate)
+      </span>
       <span class="pull-right">
+      @if(hasWritePermission || context.loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false)){
+        <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil"></i></a>&nbsp;
+        <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x"></i></a>
+      }
+      </span>
+    </div>
+    *@
+    <div class="markdown-body">
+      <div>
+        @helpers.avatar(comment.commentedUserName, 20)
+        @helpers.user(comment.commentedUserName, styleClass="username strong")
+        <span class="muted">@gitbucket.core.helper.html.datetimeago(comment.registeredDate)</span>
+        <span class="pull-right">
         @if(hasWritePermission || context.loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false)){
           <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil"></i></a>&nbsp;
           <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x"></i></a>
         }
-      </span>
-    </div>
-    <div class="panel-body issue-content commit-commentContent-@comment.commentId markdown-body">
+        </span>
+      </div>
+      <div class="commit-commentContent-@comment.commentId">
       @helpers.markdown(
         markdown = comment.content,
         repository = repository,
@@ -40,6 +53,7 @@
         enableTaskList = false,
         hasWritePermission = hasWritePermission
       )
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/main/twirl/gitbucket/core/helper/commitcomments.scala.html b/src/main/twirl/gitbucket/core/helper/commitcomments.scala.html
index 6230803..e7f4c8c 100644
--- a/src/main/twirl/gitbucket/core/helper/commitcomments.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/commitcomments.scala.html
@@ -2,66 +2,11 @@
   hasWritePermission: Boolean,
   repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
   latestCommitId: Option[String] = None)(implicit context: gitbucket.core.controller.Context)
-@import gitbucket.core.view.helpers
-<div class="panel panel-default commit-comment-box">
+<div class="panel panel-default">
   <div class="panel-heading">
     @comments.fileName
   </div>
   @comments.comments.map { comment =>
-    <div class="panel-body @if((!latestCommitId.isDefined || latestCommitId.get == comment.commitId)){inline-comment}"
-    id="discussion_r@comment.commentId"
-      @if(comment.fileName.isDefined){filename="@comment.fileName.get"}
-      @if(comment.newLine.isDefined){newline="@comment.newLine.get"}
-      @if(comment.oldLine.isDefined){oldline="@comment.oldLine.get"}>
-      <div class="commit-comment-@comment.commentId">
-        @*
-        <div class="panel-heading">
-          @helpers.avatar(comment.commentedUserName, 20)
-          @helpers.user(comment.commentedUserName, styleClass="username strong")
-          <span class="muted">
-            commented on
-            @if(comment.issueId.isDefined){
-              <a href="@helpers.url(repository)/pull/@comment.issueId">#@comment.issueId</a>
-            }
-            @comment.fileName.map { fileName =>
-              @fileName in
-            }
-            <a href="@context.path/@repository.owner/@repository.name/commit/@comment.commitId">@comment.commitId.substring(0, 7)</a>
-            @gitbucket.core.helper.html.datetimeago(comment.registeredDate)
-          </span>
-          <span class="pull-right">
-          @if(hasWritePermission || context.loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false)){
-            <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil"></i></a>&nbsp;
-            <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x"></i></a>
-          }
-          </span>
-        </div>
-        *@
-        <div class="markdown-body">
-          <div>
-            @helpers.avatar(comment.commentedUserName, 20)
-            @helpers.user(comment.commentedUserName, styleClass="username strong")
-            <span class="muted">@gitbucket.core.helper.html.datetimeago(comment.registeredDate)</span>
-            <span class="pull-right">
-            @if(hasWritePermission || context.loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false)){
-              <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil"></i></a>&nbsp;
-              <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x"></i></a>
-            }
-            </span>
-          </div>
-          <div class="commit-commentContent-@comment.commentId" style="padding-left: 24px;">
-            @helpers.markdown(
-              markdown = comment.content,
-              repository = repository,
-              enableWikiLink = false,
-              enableRefsLink = true,
-              enableLineBreaks = true,
-              enableTaskList = false,
-              hasWritePermission = hasWritePermission
-            )
-          </div>
-        </div>
-      </div>
-    </div>
+    @gitbucket.core.helper.html.commitcomment(comment, hasWritePermission, repository, latestCommitId)
   }
 </div>
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index af71d81..8781d54 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -772,21 +772,25 @@
   margin-left: 50px;
 }
 
-div.issue-comment-box, div.commit-comment-box {
-  margin-bottom: 15px;
-}
-
-div.issue-comment-box > div.panel-body,
-div.commit-comment-box > div.panel-body {
-  padding: 8px;
-}
-
-
-div.issue-comment-box textarea {
+div.commit-comment-box textarea,
+div.issue-comment-box textarea{
   height: 100px;
   max-height: 300px;
 }
 
+div.commit-comment-box.panel-body {
+  padding-top: 8px;
+  padding-bottom: 0px;
+}
+
+div.commit-comment-box div.tabbable {
+  margin-top: 5px;
+}
+
+div.reply-comment-box {
+  margin-bottom: 5px;
+}
+
 div.issue-comment-action {
   padding-bottom: 10px;
   padding-top: 0px;