diff --git a/public/css/gogs.css b/public/css/gogs.css
index ff1aaba7e..739ecad3a 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -724,6 +724,11 @@ img {
 }
 pre {
   font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	white-space: pre-wrap;       /* CSS 3 */
+	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+	white-space: -pre-wrap;      /* Opera 4-6 */
+	white-space: -o-pre-wrap;    /* Opera 7 */
+	word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
 pre.raw {
   padding: 7px 12px;
@@ -2343,6 +2348,13 @@ footer .container .links > *:first-child {
   border-right: 1px solid #d4d4d5;
   padding: 0 5px;
 }
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+	width: 50%;
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td.lines-num span.fold {
+	display: block;
+	text-align: center;
+}
 .repository .diff-file-box .code-diff tbody tr.tag-code td,
 .repository .diff-file-box .code-diff tbody tr.tag-code pre {
   background-color: #F0F0F0 !important;
@@ -2350,11 +2362,17 @@ footer .container .links > *:first-child {
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+	width: 50%;
+}
 .repository .diff-file-box .code-diff tbody tr.del-code td,
 .repository .diff-file-box .code-diff tbody tr.del-code pre {
   background-color: #ffecec !important;
   border-color: #f1c0c0 !important;
 }
+.repository .diff-file-box .code-diff tbody tr.add-code td {
+	width: 50%;
+}
 .repository .diff-file-box .code-diff tbody tr.add-code td,
 .repository .diff-file-box .code-diff tbody tr.add-code pre {
   background-color: #eaffea !important;
diff --git a/templates/repo/diff_box.tmpl b/templates/repo/diff_box.tmpl
index 036d4a649..bfcad4a1b 100644
--- a/templates/repo/diff_box.tmpl
+++ b/templates/repo/diff_box.tmpl
@@ -6,7 +6,11 @@
 			<i class="fa fa-retweet"></i>
 			{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			<div class="ui right">
-				<a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
+				<div class="ui buttons">
+					<button class="ui tiny basic toggle button" data-target="#inline">Inline</button>
+					<button class="ui tiny basic toggle button" data-target="#unified">Unified</button>
+				</div>
+				<button class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</button>
 			</div>
 		</div>
 		<ol class="detail-files hide" id="diff-files">
@@ -32,63 +36,10 @@
 		</ol>
 	</div>
 
-	{{range $i, $file := .Diff.Files}}
-		<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
-			<h4 class="ui top attached normal header">
-				<div class="diff-counter count ui left">
-					{{if $file.IsBin}}
-						{{$.i18n.Tr "repo.diff.bin"}}
-					{{else if not $file.IsRenamed}}
-						<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
-						<span class="bar">
-							<span class="pull-left add"></span>
-							<span class="pull-left del"></span>
-						</span>
-						<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
-					{{end}}
-				</div>
-				<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
-				<div class="ui right">
-					{{if $file.IsDeleted}}
-						<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-					{{else}}
-						<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-					{{end}}
-				</div>
-			</h4>
-			<div class="ui attached table segment">
-				{{if not $file.IsRenamed}}
-					{{$isImage := (call $.IsImageFile $file.Name)}}
-					{{if and $isImage}}
-						<div class="center">
-							<img src="{{$.RawPath}}/{{EscapePound .Name}}">
-						</div>
-					{{else}}
-						<div class="file-body file-code code-view code-diff">
-							<table>
-								<tbody>
-									{{range .Sections}}
-										{{range $k, $line := .Lines}}
-											<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
-												<td class="lines-num lines-num-old">
-													<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
-												</td>
-												<td class="lines-num lines-num-new">
-													<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
-												</td>
-												<td class="lines-code">
-													<pre>{{$line.Content}}</pre>
-												</td>
-											</tr>
-										{{end}}
-									{{end}}
-								</tbody>
-							</table>
-						</div>
-					{{end}}
-				{{end}}
-			</div>
-		</div>
-		<br>
-	{{end}}
+	<div id="unified" class="hide">
+		{{ template "repo/diff_box_unified.tmpl" . }}
+	</div>
+	<div if="inline" class="">
+		{{ template "repo/diff_box_inline.tmpl" . }}
+	</div>
 {{end}}
diff --git a/templates/repo/diff_box_inline.tmpl b/templates/repo/diff_box_inline.tmpl
new file mode 100644
index 000000000..2dea01383
--- /dev/null
+++ b/templates/repo/diff_box_inline.tmpl
@@ -0,0 +1,74 @@
+{{range $i, $file := .Diff.Files}}
+	<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
+		<h4 class="ui top attached normal header">
+			<div class="diff-counter count ui left">
+				{{if $file.IsBin}}
+					{{$.i18n.Tr "repo.diff.bin"}}
+				{{else if not $file.IsRenamed}}
+					<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+					<span class="bar">
+						<span class="pull-left add"></span>
+						<span class="pull-left del"></span>
+					</span>
+					<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
+				{{end}}
+			</div>
+			<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
+			<div class="ui right">
+				{{if $file.IsDeleted}}
+					<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+				{{else}}
+					<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+				{{end}}
+			</div>
+		</h4>
+		<div class="ui attached table segment">
+			{{if not $file.IsRenamed}}
+				{{$isImage := (call $.IsImageFile $file.Name)}}
+				{{if and $isImage}}
+					<div class="center">
+						<img src="{{$.RawPath}}/{{EscapePound .Name}}">
+					</div>
+				{{else}}
+					<div class="file-body file-code code-view code-diff">
+						<table>
+							<tbody>
+								{{range $j, $section := .Sections}}
+									{{range $k, $line := .Lines}}
+										<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
+											{{if eq .Type 4}}
+											<td colspan="2" class="lines-num">
+												{{if gt $j 0}}<span class="fold octicon octicon-fold"></span>{{end}}
+											</td>
+											{{else}}
+											<td class="lines-num lines-num-old">
+												<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
+											</td>
+											<td class="lines-num lines-num-new">
+												<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
+											</td>
+											{{end}}
+											<td class="lines-code">
+												<pre>{{$line.Content}}</pre>
+											</td>
+										</tr>
+									{{end}}
+								{{end}}
+							</tbody>
+						</table>
+					</div>
+					<script>
+					(function() {
+						$('tr.del-code').each(function() {
+							if($(this).next().hasClass('add-code')) {
+							//	$($(this).children()[3]).replaceWith($(this).next().children()[3]);
+							}
+						});
+					}());
+					</script>
+				{{end}}
+			{{end}}
+		</div>
+	</div>
+	<br>
+{{end}}
diff --git a/templates/repo/diff_box_unified.tmpl b/templates/repo/diff_box_unified.tmpl
new file mode 100644
index 000000000..386f530df
--- /dev/null
+++ b/templates/repo/diff_box_unified.tmpl
@@ -0,0 +1,97 @@
+{{range $i, $file := .Diff.Files}}
+	<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
+		<h4 class="ui top attached normal header">
+			<div class="diff-counter count ui left">
+				{{if $file.IsBin}}
+					{{$.i18n.Tr "repo.diff.bin"}}
+				{{else if not $file.IsRenamed}}
+					<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+					<span class="bar">
+						<span class="pull-left add"></span>
+						<span class="pull-left del"></span>
+					</span>
+					<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
+				{{end}}
+			</div>
+			<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
+			<div class="ui right">
+				{{if $file.IsDeleted}}
+					<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+				{{else}}
+					<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+				{{end}}
+			</div>
+		</h4>
+		<div class="ui attached table segment">
+			{{if not $file.IsRenamed}}
+				{{$isImage := (call $.IsImageFile $file.Name)}}
+				{{if and $isImage}}
+					<div class="center">
+						<img src="{{$.RawPath}}/{{EscapePound .Name}}">
+					</div>
+				{{else}}
+					<div class="file-body file-code code-view code-diff">
+						<table>
+							<tbody>
+								{{range $j, $section := .Sections}}
+									{{range $k, $line := .Lines}}
+										<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
+										{{if eq .Type 4}}
+											<td class="lines-num lines-num-old">
+												<span class="{{if gt $j 0}}fold octicon octicon-fold{{end}}"></span>
+											</td>
+											<td class="lines-code">
+												<pre>{{$line.Content}}</pre>
+											</td>
+											<td class="lines-num lines-num-old">
+												<span class="{{if gt $j 0}}fold octicon octicon-fold{{end}}"></span>
+											</td>
+											<td class="lines-code">
+												<pre>{{$line.Content}}</pre>
+											</td>
+										{{else}}
+											<td class="lines-num lines-num-old">
+												<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
+											</td>
+											<td class="lines-code">
+												<pre>{{if $line.LeftIdx}}{{$line.Content}}{{end}}</pre>
+											</td>
+											<td class="lines-num lines-num-new">
+												<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
+											</td>
+											<td class="lines-code">
+												<pre>{{if $line.RightIdx}}{{$line.Content}}{{end}}</pre>
+											</td>
+										{{end}}
+										</tr>
+									{{end}}
+								{{end}}
+							</tbody>
+						</table>
+					</div>
+					<script>
+					(function() {
+						$('.add-code').each(function() {
+							var prev = $(this).prev();
+							if(prev.is('.del-code')) {
+								while(prev.prev().is('.del-code') && prev.prev().text().trim() !== '') {
+									prev = prev.prev();
+								}
+								console.log("done");
+								prev.children().eq(3).html($(this).children().eq(3).html());
+								prev.children().eq(2).html($(this).children().eq(2).html());
+								prev.children().eq(2).attr('style', 'background-color: #eaffea !important');
+								prev.children().eq(2).children().eq(0).attr('style', 'background-color: #eaffea !important');
+								prev.children().eq(3).attr('style', 'background-color: #eaffea !important');
+								prev.children().eq(3).children().eq(0).attr('style', 'background-color: #eaffea !important');
+								$(this).remove();
+							}
+						});
+					}());
+					</script>
+				{{end}}
+			{{end}}
+		</div>
+	</div>
+<br>
+{{end}}