diff --git a/src/main/scala/app/RepositoryViewerController.scala b/src/main/scala/app/RepositoryViewerController.scala
index 00f6755..e752916 100644
--- a/src/main/scala/app/RepositoryViewerController.scala
+++ b/src/main/scala/app/RepositoryViewerController.scala
@@ -323,14 +323,10 @@
    * Displays branches.
    */
   get("/:owner/:repository/branches")(referrersOnly { repository =>
-    using(Git.open(getRepositoryDir(repository.owner, repository.name))){ git =>
-      // retrieve latest update date of each branch
-      val branchInfo = repository.branchList.map { branchName =>
-        val revCommit = git.log.add(git.getRepository.resolve(branchName)).setMaxCount(1).call.iterator.next
-        (branchName, revCommit.getCommitterIdent.getWhen)
-      }
-      repo.html.branches(branchInfo, hasWritePermission(repository.owner, repository.name, context.loginAccount), repository)
-    }
+    val branches = JGitUtil.getBranches(repository.owner, repository.name, repository.repository.defaultBranch)
+      .sortBy(br => (br.mergeInfo.isEmpty, br.commitTime))
+      .reverse
+    repo.html.branches(branches, hasWritePermission(repository.owner, repository.name, context.loginAccount), repository)
   })
 
   /**
diff --git a/src/main/scala/util/JGitUtil.scala b/src/main/scala/util/JGitUtil.scala
index b5e2e3b..bd730b5 100644
--- a/src/main/scala/util/JGitUtil.scala
+++ b/src/main/scala/util/JGitUtil.scala
@@ -133,6 +133,10 @@
    */
   case class SubmoduleInfo(name: String, path: String, url: String)
 
+  case class BranchMergeInfo(ahead: Int, behind: Int, isMerged: Boolean)
+
+  case class BranchInfo(name: String, committerName: String, commitTime: Date, committerEmailAddress:String, mergeInfo: Option[BranchMergeInfo])
+
   /**
    * Returns RevCommit from the commit or tag id.
    * 
@@ -685,4 +689,43 @@
     return git.log.add(startCommit).addPath(path).setMaxCount(1).call.iterator.next
   }
 
+  def getBranches(owner: String, name: String, defaultBranch: String): Seq[BranchInfo] = {
+    using(Git.open(getRepositoryDir(owner, name))){ git =>
+      val repo = git.getRepository
+      val defaultObject = repo.resolve(defaultBranch)
+      git.branchList.call.asScala.map { ref =>
+        val walk = new RevWalk(repo)
+        try{
+          val defaultCommit = walk.parseCommit(defaultObject)
+          val branchName = ref.getName.stripPrefix("refs/heads/")
+          val branchCommit = if(branchName == defaultBranch){
+            defaultCommit
+          }else{
+            walk.parseCommit(ref.getObjectId)
+          }
+          val when = branchCommit.getCommitterIdent.getWhen
+          val committer = branchCommit.getCommitterIdent.getName
+          val committerEmail = branchCommit.getCommitterIdent.getEmailAddress
+          val mergeInfo = if(branchName==defaultBranch){
+            None
+          }else{
+            walk.reset()
+            walk.setRevFilter( RevFilter.MERGE_BASE )
+            walk.markStart(branchCommit)
+            walk.markStart(defaultCommit)
+            val mergeBase = walk.next()
+            walk.reset()
+            walk.setRevFilter(RevFilter.ALL)
+            Some(BranchMergeInfo(
+              ahead    = RevWalkUtils.count(walk, branchCommit, mergeBase),
+              behind   = RevWalkUtils.count(walk, defaultCommit, mergeBase),
+              isMerged = walk.isMergedInto(branchCommit, defaultCommit)))
+          }
+          BranchInfo(branchName, committer, when, committerEmail, mergeInfo)
+        } finally {
+          walk.dispose();
+        }
+      }
+    }
+  }
 }
diff --git a/src/main/twirl/repo/branches.scala.html b/src/main/twirl/repo/branches.scala.html
index 9857684..89ee98d 100644
--- a/src/main/twirl/repo/branches.scala.html
+++ b/src/main/twirl/repo/branches.scala.html
@@ -1,4 +1,4 @@
-@(branchInfo: Seq[(String, java.util.Date)],
+@(branchInfo: Seq[util.JGitUtil.BranchInfo],
   hasWritePermission: Boolean,
   repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import context._
@@ -6,35 +6,46 @@
 @html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
   @html.menu("code", repository){
     <h1>Branches</h1>
-    <table class="table table-bordered">
-      <tr>
-        <th width="40%">Branch</th>
-        <th width="20%">Last update</th>
-        <th width="20%">Compare</th>
-        <th width="20%">Download</th>
-      </tr>
-      @branchInfo.map { case (branchName, latestUpdateDate) =>
+    <table class="table table-bordered table-hover table-issues">
+      <thead>
         <tr>
-          <td>
-            <a href="@url(repository)/tree/@encodeRefName(branchName)">@branchName</a>
-            @if(hasWritePermission && repository.repository.defaultBranch != branchName){
-              <a href="@url(repository)/delete/@encodeRefName(branchName)" class="btn btn-danger btn-mini pull-right delete-branch" data-name="@branchName">Delete branch</a>
+          <th style="background: #f5f5f5;color: #666;">All branches</th>
+        </tr>
+      </thead>
+      <tbody>
+      @branchInfo.map { branch =>
+        <tr><td style="padding: 12px;">
+          <div class="branch-action">
+              @branch.mergeInfo.map{ info =>
+                <a href="@url(repository)/compare/@{encodeRefName(repository.repository.defaultBranch)}...@{encodeRefName(branch.name)}" class="btn btn-small">Compare</a>
+                @if(hasWritePermission){
+                  <a href="@url(repository)/delete/@encodeRefName(branch.name)" class="btn  @if(info.isMerged){ btn-warning }else{ btn-danger } delete-branch btn-mini" data-name="@branch.name" @if(info.isMerged){ title="merged branch" }><i class="icon icon-trash icon-white"></i></a>
+                }
+              }
+          </div>
+          <div class="branch-details">
+            <a href="@url(repository)/tree/@encodeRefName(branch.name)" class="branch-name">@branch.name</a>
+            <span class="branch-meta">
+              <span>Updated @helper.html.datetimeago(branch.commitTime, false)
+                by <span>@user(branch.committerName, branch.committerEmailAddress, "muted-link")</span>
+              </span>
+            </span>
+          </div>
+          <div class="branch-a-b-count">
+            @if(branch.mergeInfo.isEmpty){
+              <span class="label">Default</span>
+            }else{
+              @branch.mergeInfo.map{ info =>
+                <div data-toggle="tooltip" title="@info.ahead commits ahead, @info.behind commits behind @repository.repository.defaultBranch">
+                  <div class="a-b-count-widget">
+                    <div class="count-half"><div class="count-value">@info.ahead</div></div>
+                    <div class="count-half"><div class="count-value">@info.behind</div></div>
+                    </div>
+                  </div>
+                </div>
+              }
             }
-          </td>
-          <td>
-            @helper.html.datetimeago(latestUpdateDate, false)
-          </td>
-          <td>
-            @if(repository.repository.defaultBranch == branchName){
-              Base branch
-            } else {
-              <a href="@url(repository)/compare/@{encodeRefName(repository.repository.defaultBranch)}...@{encodeRefName(branchName)}">to @{repository.repository.defaultBranch}</a>
-            }
-          </td>
-          <td>
-            <a href="@url(repository)/archive/@{encodeRefName(branchName)}.zip">ZIP</a>
-            <a href="@url(repository)/archive/@{encodeRefName(branchName)}.tar.gz">TAR.GZ</a>
-          </td>
+          </div>
         </tr>
       }
     </table>
@@ -46,5 +57,63 @@
     var branchName = $(e.target).data('name');
     return confirm('Are you sure you want to remove the ' + branchName + ' branch?');
   });
+  $('*[data-toggle=tooltip]').tooltip();
 });
-</script>
\ No newline at end of file
+</script>
+<style>
+.muted-link{
+  color: #777;
+}
+.muted-link:hover{
+  color: #4183c4;
+}
+.branch-details{
+  display: inline-block;
+  width: 490px;
+  margin-right: 10px;
+}
+.branch-name{
+  color: #4183c4;
+  display: inline-block;
+  padding: 2px 6px;
+  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  background-color: rgba(209,227,237,0.5);
+  border-radius: 3px;
+}
+.branch-meta{
+  color: #aaa;
+  font-size: 12px;
+  line-height: 20px;
+}
+.branch-action{
+  display: inline-block;
+  float: right;
+  position: relative;
+  top: -3px;
+  height: 20px;
+}
+.branch-a-b-count{
+  display: inline-block;
+  vertical-align: middle;
+  width: 181px;
+  text-align: center;
+  color: rgba(0,0,0,0.5);
+}
+.a-b-count-widget{
+  font-size: 10px;
+}
+.a-b-count-widget .count-half{
+  width:90px;
+  position: relative;
+  text-align: right;
+  float: left;
+}
+.a-b-count-widget .count-half:last-child {
+  text-align: left;
+  border-left: 1px solid #bbb;
+}
+.a-b-count-widget .count-half .count-value{
+  padding: 0 3px;
+}
+
+</style>