diff --git a/src/main/twirl/helper/diff.scala.html b/src/main/twirl/helper/diff.scala.html
index e1ab2d7..598841c 100644
--- a/src/main/twirl/helper/diff.scala.html
+++ b/src/main/twirl/helper/diff.scala.html
@@ -9,9 +9,12 @@
 @if(showIndex){
   <div>
     <div class="pull-right" style="margin-bottom: 10px;">
-      <input id="toggle-file-list" type="button" class="btn" value="Show file list"/>
+      <div class="btn-group" data-toggle="buttons-radio">
+        <input type="button" id="btn-unified" class="btn btn-default btn-small active" value="Unified">
+        <input type="button" id="btn-split" class="btn btn-default btn-small" value="Split">
+      </div>
     </div>
-    Showing @diffs.size changed @plural(diffs.size, "file")
+    Showing <a href="javascript:void(0);" id="toggle-file-list">@diffs.size changed @plural(diffs.size, "file")</a>
   </div>
   <ul id="commit-file-list" style="display: none;">
   @diffs.zipWithIndex.map { case (diff, i) =>
@@ -94,10 +97,25 @@
     });
   }
 
-  @diffs.zipWithIndex.map { case (diff, i) =>
-    @if(diff.newContent != None || diff.oldContent != None){
-      if($('#oldText-@i').length > 0){
-        diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i');
+  // Render diffs as unified mode initially
+  renderDiffs(1);
+
+  $('#btn-unified').click(function(){
+    $('.container-wide').removeClass('container-wide').addClass('container');
+    renderDiffs(1);
+  });
+
+  $('#btn-split').click(function(){
+    $('.container').removeClass('container').addClass('container-wide');
+    renderDiffs(0);
+  });
+
+  function renderDiffs(viewType){
+    @diffs.zipWithIndex.map { case (diff, i) =>
+      @if(diff.newContent != None || diff.oldContent != None){
+        if($('#oldText-@i').length > 0){
+          diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i', viewType);
+        }
       }
     }
   }
diff --git a/src/main/twirl/repo/delete.scala.html b/src/main/twirl/repo/delete.scala.html
index 2edb481..7d589f3 100644
--- a/src/main/twirl/repo/delete.scala.html
+++ b/src/main/twirl/repo/delete.scala.html
@@ -56,6 +56,6 @@
 <link href="@assets/vendors/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
 <script>
 $(function(){
-  diffUsingJS('oldText', 'newText', 'diffText');
+  diffUsingJS('oldText', 'newText', 'diffText', 1);
 });
 </script>
\ No newline at end of file
diff --git a/src/main/twirl/repo/editor.scala.html b/src/main/twirl/repo/editor.scala.html
index 9d8ce9a..c23eb76 100644
--- a/src/main/twirl/repo/editor.scala.html
+++ b/src/main/twirl/repo/editor.scala.html
@@ -139,7 +139,7 @@
         .append($('<div id="diffText">'))
         .append($('<textarea id="newText" style="display: none;">').html(editor.getValue()))
         .append($('<textarea id="oldText" style="display: none;">').html($('#initial').val()));
-      diffUsingJS('oldText', 'newText', 'diffText');
+      diffUsingJS('oldText', 'newText', 'diffText', 1);
     }
   });
 });
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index d284e57..fd00316 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -119,6 +119,11 @@
   width: 920px;
 }
 
+div.container-wide {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 div.pagination {
   margin-top: 0px;
   margin-bottom: 0px;
diff --git a/src/main/webapp/assets/common/js/gitbucket.js b/src/main/webapp/assets/common/js/gitbucket.js
index dc3f74d..e40f700 100644
--- a/src/main/webapp/assets/common/js/gitbucket.js
+++ b/src/main/webapp/assets/common/js/gitbucket.js
@@ -68,7 +68,15 @@
   };
 })(jQuery);
 
-function diffUsingJS(oldTextId, newTextId, outputId) {
+/**
+ * Render diff using jsdifflib.
+ *
+ * @param oldTextId {String} element id of old text
+ * @param newTextId {String} element id of new text
+ * @param outputId {String} element id of output element
+ * @param viewType {Number} 0: split, 1: unified
+ */
+function diffUsingJS(oldTextId, newTextId, outputId, viewType) {
   // get the baseText and newText values from the two textboxes, and split them into lines
   var oldText = document.getElementById(oldTextId).value;
   var oldLines = [];
@@ -98,7 +106,7 @@
     newTextLines: newLines,
     opcodes: opcodes,
     contextSize: 4,
-    viewType: 1
+    viewType: viewType
   }));
 }