diff --git a/src/file-list-printer.js b/src/file-list-printer.js
index c7a36fb..18ccbbe 100644
--- a/src/file-list-printer.js
+++ b/src/file-list-printer.js
@@ -9,34 +9,34 @@
 
   var printerUtils = require('./printer-utils.js').PrinterUtils;
 
+  var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
+  var baseTemplatesPath = 'file-summary';
+  var iconsBaseTemplatesPath = 'icon';
+
   function FileListPrinter() {
   }
 
   FileListPrinter.prototype.generateFileList = function(diffFiles) {
-    return '<div class="d2h-file-list-wrapper">\n' +
-      '     <div class="d2h-file-list-header">\n' +
-      '         <span class="d2h-file-list-title">Files changed (' + diffFiles.length + ')&nbsp&nbsp</span>\n' +
-      '         <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-      '         <a class="d2h-file-switch d2h-show">show</a>\n' +
-      '     </div>\n' +
-      '     <table class="d2h-file-list">\n' +
+    var lineTemplate = hoganUtils.template(baseTemplatesPath, 'line');
 
-      diffFiles.map(function(file) {
-        return '     <tr class="d2h-file-list-line">\n' +
-          '       <td class="d2h-lines-added">\n' +
-          '         <span>+' + file.addedLines + '</span>\n' +
-          '       </td>\n' +
-          '       <td class="d2h-lines-deleted">\n' +
-          '         <span>-' + file.deletedLines + '</span>\n' +
-          '       </td>\n' +
-          '       <td class="d2h-file-name-wrapper">\n' +
-          '         <a href="#' + printerUtils.getHtmlId(file) + '" class="d2h-file-name">' +
-          '&nbsp;' + printerUtils.getDiffName(file) +
-          '         </a>\n' +
-          '       </td>\n' +
-          '     </tr>\n';
-      }).join('\n') +
-      '</table></div>\n';
+    var files = diffFiles.map(function(file) {
+      var fileTypeName = printerUtils.getFileTypeIcon(file);
+      var iconTemplate = hoganUtils.template(iconsBaseTemplatesPath, fileTypeName);
+
+      return lineTemplate.render({
+        fileHtmlId: printerUtils.getHtmlId(file),
+        fileName: printerUtils.getDiffName(file),
+        deletedLines: '-' + file.deletedLines,
+        addedLines: '+' + file.addedLines
+      }, {
+        fileIcon: iconTemplate
+      });
+    }).join('\n');
+
+    return hoganUtils.render(baseTemplatesPath, 'wrapper', {
+      filesNumber: diffFiles.length,
+      files: files
+    });
   };
 
   module.exports.FileListPrinter = new FileListPrinter();
diff --git a/src/hoganjs-utils.js b/src/hoganjs-utils.js
index 0f050d7..70a5d12 100644
--- a/src/hoganjs-utils.js
+++ b/src/hoganjs-utils.js
@@ -20,10 +20,7 @@
   }
 
   HoganJsUtils.prototype.render = function(namespace, view, params, configuration) {
-    var config = configuration || {};
-    var templateKey = this._templateKey(namespace, view);
-
-    var template = this._getTemplate(templateKey, config);
+    var template = this.template(namespace, view, configuration);
     if (template) {
       return template.render(params);
     }
@@ -31,6 +28,13 @@
     return null;
   };
 
+  HoganJsUtils.prototype.template = function(namespace, view, configuration) {
+    var config = configuration || {};
+    var templateKey = this._templateKey(namespace, view);
+
+    return this._getTemplate(templateKey, config);
+  };
+
   HoganJsUtils.prototype._getTemplate = function(templateKey, config) {
     var template;
 
diff --git a/src/line-by-line-printer.js b/src/line-by-line-printer.js
index 401cb22..6e7e4e6 100644
--- a/src/line-by-line-printer.js
+++ b/src/line-by-line-printer.js
@@ -13,23 +13,36 @@
   var Rematch = require('./rematch.js').Rematch;
 
   var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
+  var genericTemplatesPath = 'generic';
   var baseTemplatesPath = 'line-by-line';
+  var iconsBaseTemplatesPath = 'icon';
+  var tagsBaseTemplatesPath = 'tag';
 
   function LineByLinePrinter(config) {
     this.config = config;
   }
 
   LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
-    return hoganUtils.render(baseTemplatesPath, 'file-diff', {
+    var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
+    var filePathTemplate = hoganUtils.template(genericTemplatesPath, 'file-path');
+    var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
+    var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
+
+    return fileDiffTemplate.render({
       file: file,
-      fileDiffName: printerUtils.getDiffName(file),
       fileHtmlId: printerUtils.getHtmlId(file),
-      diffs: diffs
+      diffs: diffs,
+      filePath: filePathTemplate.render({
+        fileDiffName: printerUtils.getDiffName(file)
+      }, {
+        fileIcon: fileIconTemplate,
+        fileTag: fileTagTemplate
+      })
     });
   };
 
   LineByLinePrinter.prototype.makeLineByLineHtmlWrapper = function(content) {
-    return hoganUtils.render(baseTemplatesPath, 'wrapper', {'content': content});
+    return hoganUtils.render(genericTemplatesPath, 'wrapper', {'content': content});
   };
 
   LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
@@ -55,9 +68,11 @@
   });
 
   LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
-    return hoganUtils.render(baseTemplatesPath, 'column-line-number', {
+    return hoganUtils.render(genericTemplatesPath, 'column-line-number', {
       diffParser: diffParser,
-      block: utils.escape(block.header)
+      blockHeader: block.header,
+      lineClass: 'd2h-code-linenumber',
+      contentClass: 'd2h-code-line'
     });
   };
 
@@ -170,18 +185,25 @@
   };
 
   LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
-    return hoganUtils.render(baseTemplatesPath, 'line',
+    var lineNumberTemplate = hoganUtils.render(baseTemplatesPath, 'numbers', {
+      oldNumber: utils.valueOrEmpty(oldNumber),
+      newNumber: utils.valueOrEmpty(newNumber)
+    });
+
+    return hoganUtils.render(genericTemplatesPath, 'line',
       {
         type: type,
-        oldNumber: utils.valueOrEmpty(oldNumber),
-        newNumber: utils.valueOrEmpty(newNumber),
+        lineClass: 'd2h-code-linenumber',
+        contentClass: 'd2h-code-line',
         prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
-        content: content && utils.convertWhiteSpaceToNonBreakingSpace(content)
+        content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
+        lineNumber: lineNumberTemplate
       });
   };
 
   LineByLinePrinter.prototype._generateEmptyDiff = function() {
-    return hoganUtils.render(baseTemplatesPath, 'empty-diff', {
+    return hoganUtils.render(genericTemplatesPath, 'empty-diff', {
+      contentClass: 'd2h-code-line',
       diffParser: diffParser
     });
   };
diff --git a/src/printer-utils.js b/src/printer-utils.js
index adf879e..1add31c 100644
--- a/src/printer-utils.js
+++ b/src/printer-utils.js
@@ -95,6 +95,25 @@
     return 'unknown/file/path';
   };
 
+  PrinterUtils.prototype.getFileTypeIcon = function(file) {
+    var templateName = 'file-changed';
+
+    if (file.isRename) {
+      templateName = 'file-renamed';
+    } else if (file.isCopy) {
+      templateName = 'file-renamed';
+    } else if (file.isNew) {
+      templateName = 'file-added';
+    } else if (file.isDeleted) {
+      templateName = 'file-deleted';
+    } else if (file.newName !== file.oldName) {
+      // If file is not Added, not Deleted and the names changed it must be a rename :)
+      templateName = 'file-renamed';
+    }
+
+    return templateName;
+  };
+
   PrinterUtils.prototype.diffHighlight = function(diffLine1, diffLine2, config) {
     var linePrefix1, linePrefix2, unprefixedLine1, unprefixedLine2;
 
diff --git a/src/side-by-side-printer.js b/src/side-by-side-printer.js
index fbf2360..c990842 100644
--- a/src/side-by-side-printer.js
+++ b/src/side-by-side-printer.js
@@ -12,6 +12,12 @@
   var utils = require('./utils.js').Utils;
   var Rematch = require('./rematch.js').Rematch;
 
+  var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
+  var genericTemplatesPath = 'generic';
+  var baseTemplatesPath = 'side-by-side';
+  var iconsBaseTemplatesPath = 'icon';
+  var tagsBaseTemplatesPath = 'tag';
+
   var matcher = Rematch.rematch(function(a, b) {
     var amod = a.content.substr(1);
     var bmod = b.content.substr(1);
@@ -24,67 +30,48 @@
   }
 
   SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
-    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
-      '     <div class="d2h-file-header">\n' +
-      '       <span class="d2h-file-stats">\n' +
-      '         <span class="d2h-lines-added">\n' +
-      '           <span>+' + file.addedLines + '</span>\n' +
-      '         </span>\n' +
-      '         <span class="d2h-lines-deleted">\n' +
-      '           <span>-' + file.deletedLines + '</span>\n' +
-      '         </span>\n' +
-      '       </span>\n' +
-      '       <span class="d2h-file-name-wrapper">\n' +
-      '         <span class="d2h-file-name">' + printerUtils.getDiffName(file) + '</span>\n' +
-      '       </span>\n' +
-      '     </div>\n' +
-      '     <div class="d2h-files-diff">\n' +
-      '       <div class="d2h-file-side-diff">\n' +
-      '         <div class="d2h-code-wrapper">\n' +
-      '           <table class="d2h-diff-table">\n' +
-      '             <tbody class="d2h-diff-tbody">\n' +
-      '           ' + diffs.left +
-      '             </tbody>\n' +
-      '           </table>\n' +
-      '         </div>\n' +
-      '       </div>\n' +
-      '       <div class="d2h-file-side-diff">\n' +
-      '         <div class="d2h-code-wrapper">\n' +
-      '           <table class="d2h-diff-table">\n' +
-      '             <tbody class="d2h-diff-tbody">\n' +
-      '           ' + diffs.right +
-      '             </tbody>\n' +
-      '           </table>\n' +
-      '         </div>\n' +
-      '       </div>\n' +
-      '     </div>\n' +
-      '   </div>\n';
+    var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
+    var filePathTemplate = hoganUtils.template(genericTemplatesPath, 'file-path');
+    var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
+    var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
+
+    return fileDiffTemplate.render({
+      file: file,
+      fileHtmlId: printerUtils.getHtmlId(file),
+      diffs: diffs,
+      filePath: filePathTemplate.render({
+        fileDiffName: printerUtils.getDiffName(file)
+      }, {
+        fileIcon: fileIconTemplate,
+        fileTag: fileTagTemplate
+      })
+    });
   };
 
   SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
     var that = this;
-    return '<div class="d2h-wrapper">\n' +
-      diffFiles.map(function(file) {
 
-        var diffs;
-        if (file.blocks.length) {
-          diffs = that.generateSideBySideFileHtml(file);
-        } else {
-          diffs = that.generateEmptyDiff();
-        }
+    var content = diffFiles.map(function(file) {
+      var diffs;
+      if (file.blocks.length) {
+        diffs = that.generateSideBySideFileHtml(file);
+      } else {
+        diffs = that.generateEmptyDiff();
+      }
 
-        return that.makeDiffHtml(file, diffs);
-      }).join('\n') +
-      '</div>\n';
+      return that.makeDiffHtml(file, diffs);
+    }).join('\n');
+
+    return hoganUtils.render(genericTemplatesPath, 'wrapper', {'content': content});
   };
 
   SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) {
-    return '<tr>\n' +
-      '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
-      '  <td class="' + diffParser.LINE_TYPE.INFO + '">\n' +
-      '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + blockHeader + '</div>\n' +
-      '  </td>\n' +
-      '</tr>\n';
+    return hoganUtils.render(genericTemplatesPath, 'column-line-number', {
+      diffParser: diffParser,
+      blockHeader: blockHeader,
+      lineClass: 'd2h-code-side-linenumber',
+      contentClass: 'd2h-code-side-line'
+    });
   };
 
   SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
@@ -95,7 +82,7 @@
 
     file.blocks.forEach(function(block) {
 
-      fileHtml.left += that.makeSideHtml(utils.escape(block.header));
+      fileHtml.left += that.makeSideHtml(block.header);
       fileHtml.right += that.makeSideHtml('');
 
       var oldLines = [];
@@ -109,7 +96,7 @@
         var comparisons = oldLines.length * newLines.length;
         var maxComparisons = that.config.matchingMaxComparisons || 2500;
         var doMatching = comparisons < maxComparisons && (that.config.matching === 'lines' ||
-            that.config.matching === 'words');
+          that.config.matching === 'words');
 
         if (doMatching) {
           matches = matcher(oldLines, newLines);
@@ -232,40 +219,26 @@
     return fileHtml;
   };
 
-  SideBySidePrinter.prototype.makeSingleLineHtml = function(type, number, htmlContent, htmlPrefix) {
-    return '<tr>\n' +
-      '    <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
-      '    <td class="' + type + '">' +
-      '      <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
-      '    </td>\n' +
-      '  </tr>\n';
-  };
-
   SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
-    var htmlPrefix = '';
-    if (prefix) {
-      htmlPrefix = '<span class="d2h-code-line-prefix">' + prefix + '</span>';
-    }
-
-    var htmlContent = '';
-    if (content) {
-      htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
-    }
-
-    return this.makeSingleLineHtml(type, number, htmlContent, htmlPrefix);
+    return hoganUtils.render(genericTemplatesPath, 'line',
+      {
+        type: type,
+        lineClass: 'd2h-code-side-linenumber',
+        contentClass: 'd2h-code-side-line',
+        prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
+        content: content && utils.convertWhiteSpaceToNonBreakingSpace(content),
+        lineNumber: number
+      });
   };
 
   SideBySidePrinter.prototype.generateEmptyDiff = function() {
     var fileHtml = {};
     fileHtml.right = '';
 
-    fileHtml.left = '<tr>\n' +
-      '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-      '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' +
-      'File without changes' +
-      '    </div>' +
-      '  </td>\n' +
-      '</tr>\n';
+    fileHtml.left = hoganUtils.render(genericTemplatesPath, 'empty-diff', {
+      contentClass: 'd2h-code-side-line',
+      diffParser: diffParser
+    });
 
     return fileHtml;
   };
diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js
index 02c0991..05d9ba8 100644
--- a/src/templates/diff2html-templates.js
+++ b/src/templates/diff2html-templates.js
@@ -1,9 +1,23 @@
 (function() {
 if (!!!global.browserTemplates) global.browserTemplates = {};
-var Hogan = require("hogan.js");global.browserTemplates["line-by-line-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"d2h-code-linenumber ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
-global.browserTemplates["line-by-line-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("            File without changes");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
-global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-header\">");t.b("\n" + i);t.b("    <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b("      <span class=\"d2h-lines-added\">");t.b("\n" + i);t.b("        <span>+");t.b(t.v(t.d("file.addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("      <span class=\"d2h-lines-deleted\">");t.b("\n" + i);t.b("        <span>-");t.b(t.v(t.d("file.deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("        <span class=\"d2h-file-name\">&nbsp;");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b("            <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b("                <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b("                ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b("                </tbody>");t.b("\n" + i);t.b("            </table>");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
-global.browserTemplates["line-by-line-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"d2h-code-linenumber ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("        <div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,253,329,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,361,435,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
-global.browserTemplates["line-by-line-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+var Hogan = require("hogan.js");global.browserTemplates["file-summary-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<li class=\"d2h-file-list-line\">");t.b("\n" + i);t.b("    <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("      <span>");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("      <a href=\"#");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-name\">");t.b(t.v(t.f("fileName",c,p,0)));t.b("</a>");t.b("\n" + i);t.b("      <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b("          <span class=\"d2h-lines-added\">");t.b(t.v(t.f("addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("          <span class=\"d2h-lines-deleted\">");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</li>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }}}, subs: {  }});
+global.browserTemplates["file-summary-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-file-list-wrapper\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-list-header\">");t.b("\n" + i);t.b("        <span class=\"d2h-file-list-title\">Files changed (");t.b(t.v(t.f("filesNumber",c,p,0)));t.b(")</span>");t.b("\n" + i);t.b("        <a class=\"d2h-file-switch d2h-hide\">hide</a>");t.b("\n" + i);t.b("        <a class=\"d2h-file-switch d2h-show\">show</a>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <ol class=\"d2h-file-list\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("files",c,p,0)));t.b("\n" + i);t.b("    </ol>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["generic-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["generic-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("            File without changes");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("    <span class=\"d2h-icon-wrapper\">");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-name\">");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(t.rp("<fileTag1",c,p,"    "));t.b("</span>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }},"<fileTag1":{name:"fileTag", partials: {}, subs: {  }}}, subs: {  }});
+global.browserTemplates["generic-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.f("lineNumber",c,p,0)));t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,171,247,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,279,353,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["generic-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-added\" height=\"16\" title=\"added\" version=\"1.1\" viewBox=\"0 0 14 16\"");t.b("\n" + i);t.b("     width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-changed\" height=\"16\" title=\"modified\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-deleted\" height=\"16\" title=\"removed\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-moved\" height=\"16\" title=\"renamed\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon\" height=\"16\" version=\"1.1\" viewBox=\"0 0 12 16\" width=\"12\">");t.b("\n" + i);t.b("    <path d=\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-header\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("filePath",c,p,0)));t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b("            <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b("                <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b("                ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b("                </tbody>");t.b("\n" + i);t.b("            </table>");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-numbers"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("<div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["side-by-side-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-header\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.f("filePath",c,p,0)));t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <div class=\"d2h-files-diff\">");t.b("\n" + i);t.b("        <div class=\"d2h-file-side-diff\">");t.b("\n" + i);t.b("            <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b("                <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b("                    <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b("                    ");t.b(t.t(t.d("diffs.left",c,p,0)));t.b("\n" + i);t.b("                    </tbody>");t.b("\n" + i);t.b("                </table>");t.b("\n" + i);t.b("            </div>");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("        <div class=\"d2h-file-side-diff\">");t.b("\n" + i);t.b("            <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b("                <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b("                    <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b("                    ");t.b(t.t(t.d("diffs.right",c,p,0)));t.b("\n" + i);t.b("                    </tbody>");t.b("\n" + i);t.b("                </table>");t.b("\n" + i);t.b("            </div>");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-added d2h-added-tag\">ADDED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-changed d2h-changed-tag\">CHANGED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-deleted d2h-deleted-tag\">DELETED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-moved d2h-moved-tag\">RENAMED</span>");return t.fl(); },partials: {}, subs: {  }});
 module.exports = global.browserTemplates;
 })();
diff --git a/src/templates/file-summary-line.mustache b/src/templates/file-summary-line.mustache
new file mode 100644
index 0000000..27d373b
--- /dev/null
+++ b/src/templates/file-summary-line.mustache
@@ -0,0 +1,10 @@
+<li class="d2h-file-list-line">
+    <span class="d2h-file-name-wrapper">
+      <span>{{>fileIcon}}</span>
+      <a href="#{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
+      <span class="d2h-file-stats">
+          <span class="d2h-lines-added">{{addedLines}}</span>
+          <span class="d2h-lines-deleted">{{deletedLines}}</span>
+      </span>
+    </span>
+</li>
diff --git a/src/templates/file-summary-wrapper.mustache b/src/templates/file-summary-wrapper.mustache
new file mode 100644
index 0000000..126854c
--- /dev/null
+++ b/src/templates/file-summary-wrapper.mustache
@@ -0,0 +1,10 @@
+<div class="d2h-file-list-wrapper">
+    <div class="d2h-file-list-header">
+        <span class="d2h-file-list-title">Files changed ({{filesNumber}})</span>
+        <a class="d2h-file-switch d2h-hide">hide</a>
+        <a class="d2h-file-switch d2h-show">show</a>
+    </div>
+    <ol class="d2h-file-list">
+    {{{files}}}
+    </ol>
+</div>
diff --git a/src/templates/generic-column-line-number.mustache b/src/templates/generic-column-line-number.mustache
new file mode 100644
index 0000000..181d651
--- /dev/null
+++ b/src/templates/generic-column-line-number.mustache
@@ -0,0 +1,6 @@
+<tr>
+    <td class="{{lineClass}} {{diffParser.LINE_TYPE.INFO}}"></td>
+    <td class="{{diffParser.LINE_TYPE.INFO}}">
+        <div class="{{contentClass}} {{diffParser.LINE_TYPE.INFO}}">{{{blockHeader}}}</div>
+    </td>
+</tr>
diff --git a/src/templates/line-by-line-empty-diff.mustache b/src/templates/generic-empty-diff.mustache
similarity index 62%
rename from src/templates/line-by-line-empty-diff.mustache
rename to src/templates/generic-empty-diff.mustache
index c9907a3..c6b1abd 100644
--- a/src/templates/line-by-line-empty-diff.mustache
+++ b/src/templates/generic-empty-diff.mustache
@@ -1,6 +1,6 @@
 <tr>
     <td class="{{diffParser.LINE_TYPE.INFO}}">
-        <div class="d2h-code-line {{diffParser.LINE_TYPE.INFO}}">
+        <div class="{{contentClass}} {{diffParser.LINE_TYPE.INFO}}">
             File without changes
         </div>
     </td>
diff --git a/src/templates/generic-file-path.mustache b/src/templates/generic-file-path.mustache
new file mode 100644
index 0000000..cc71b18
--- /dev/null
+++ b/src/templates/generic-file-path.mustache
@@ -0,0 +1,5 @@
+<span class="d2h-file-name-wrapper">
+    <span class="d2h-icon-wrapper">{{>fileIcon}}</span>
+    <span class="d2h-file-name">{{fileDiffName}}</span>
+    {{>fileTag}}
+</span>
diff --git a/src/templates/line-by-line-line.mustache b/src/templates/generic-line.mustache
similarity index 59%
rename from src/templates/line-by-line-line.mustache
rename to src/templates/generic-line.mustache
index 1893a24..901c655 100644
--- a/src/templates/line-by-line-line.mustache
+++ b/src/templates/generic-line.mustache
@@ -1,10 +1,9 @@
 <tr>
-    <td class="d2h-code-linenumber {{type}}">
-        <div class="line-num1">{{oldNumber}}</div>
-        <div class="line-num2">{{newNumber}}</div>
+    <td class="{{lineClass}} {{type}}">
+      {{{lineNumber}}}
     </td>
     <td class="{{type}}">
-        <div class="d2h-code-line {{type}}">
+        <div class="{{contentClass}} {{type}}">
         {{#prefix}}
             <span class="d2h-code-line-prefix">{{{prefix}}}</span>
         {{/prefix}}
diff --git a/src/templates/line-by-line-wrapper.mustache b/src/templates/generic-wrapper.mustache
similarity index 100%
rename from src/templates/line-by-line-wrapper.mustache
rename to src/templates/generic-wrapper.mustache
diff --git a/src/templates/icon-file-added.mustache b/src/templates/icon-file-added.mustache
new file mode 100644
index 0000000..cf855b9
--- /dev/null
+++ b/src/templates/icon-file-added.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"
+     width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>
+</svg>
diff --git a/src/templates/icon-file-changed.mustache b/src/templates/icon-file-changed.mustache
new file mode 100644
index 0000000..19a150e
--- /dev/null
+++ b/src/templates/icon-file-changed.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+</svg>
diff --git a/src/templates/icon-file-deleted.mustache b/src/templates/icon-file-deleted.mustache
new file mode 100644
index 0000000..fc3b8f4
--- /dev/null
+++ b/src/templates/icon-file-deleted.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>
+</svg>
diff --git a/src/templates/icon-file-renamed.mustache b/src/templates/icon-file-renamed.mustache
new file mode 100644
index 0000000..1bf266d
--- /dev/null
+++ b/src/templates/icon-file-renamed.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>
+</svg>
diff --git a/src/templates/icon-file.mustache b/src/templates/icon-file.mustache
new file mode 100644
index 0000000..514972c
--- /dev/null
+++ b/src/templates/icon-file.mustache
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+</svg>
diff --git a/src/templates/line-by-line-column-line-number.mustache b/src/templates/line-by-line-column-line-number.mustache
deleted file mode 100644
index 72825ed..0000000
--- a/src/templates/line-by-line-column-line-number.mustache
+++ /dev/null
@@ -1,6 +0,0 @@
-<tr>
-    <td class="d2h-code-linenumber {{diffParser.LINE_TYPE.INFO}}"></td>
-    <td class="{{diffParser.LINE_TYPE.INFO}}">
-        <div class="d2h-code-line {{diffParser.LINE_TYPE.INFO}}">{{{blockHeader}}}</div>
-    </td>
-</tr>
diff --git a/src/templates/line-by-line-file-diff.mustache b/src/templates/line-by-line-file-diff.mustache
index 7789fda..8af1ccd 100644
--- a/src/templates/line-by-line-file-diff.mustache
+++ b/src/templates/line-by-line-file-diff.mustache
@@ -1,16 +1,6 @@
 <div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
     <div class="d2h-file-header">
-    <span class="d2h-file-stats">
-      <span class="d2h-lines-added">
-        <span>+{{file.addedLines}}</span>
-      </span>
-      <span class="d2h-lines-deleted">
-        <span>-{{file.deletedLines}}</span>
-      </span>
-    </span>
-    <span class="d2h-file-name-wrapper">
-        <span class="d2h-file-name">&nbsp;{{fileDiffName}}</span>
-    </span>
+    {{{filePath}}}
     </div>
     <div class="d2h-file-diff">
         <div class="d2h-code-wrapper">
diff --git a/src/templates/line-by-line-numbers.mustache b/src/templates/line-by-line-numbers.mustache
new file mode 100644
index 0000000..c0ef8c6
--- /dev/null
+++ b/src/templates/line-by-line-numbers.mustache
@@ -0,0 +1,2 @@
+<div class="line-num1">{{oldNumber}}</div>
+<div class="line-num2">{{newNumber}}</div>
diff --git a/src/templates/side-by-side-file-diff.mustache b/src/templates/side-by-side-file-diff.mustache
new file mode 100644
index 0000000..3f3e5d3
--- /dev/null
+++ b/src/templates/side-by-side-file-diff.mustache
@@ -0,0 +1,25 @@
+<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+    <div class="d2h-file-header">
+      {{{filePath}}}
+    </div>
+    <div class="d2h-files-diff">
+        <div class="d2h-file-side-diff">
+            <div class="d2h-code-wrapper">
+                <table class="d2h-diff-table">
+                    <tbody class="d2h-diff-tbody">
+                    {{{diffs.left}}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="d2h-file-side-diff">
+            <div class="d2h-code-wrapper">
+                <table class="d2h-diff-table">
+                    <tbody class="d2h-diff-tbody">
+                    {{{diffs.right}}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/templates/tag-file-added.mustache b/src/templates/tag-file-added.mustache
new file mode 100644
index 0000000..3c32eb0
--- /dev/null
+++ b/src/templates/tag-file-added.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-added d2h-added-tag">ADDED</span>
diff --git a/src/templates/tag-file-changed.mustache b/src/templates/tag-file-changed.mustache
new file mode 100644
index 0000000..5e83001
--- /dev/null
+++ b/src/templates/tag-file-changed.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span>
diff --git a/src/templates/tag-file-deleted.mustache b/src/templates/tag-file-deleted.mustache
new file mode 100644
index 0000000..f1aed8b
--- /dev/null
+++ b/src/templates/tag-file-deleted.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span>
diff --git a/src/templates/tag-file-renamed.mustache b/src/templates/tag-file-renamed.mustache
new file mode 100644
index 0000000..9a67397
--- /dev/null
+++ b/src/templates/tag-file-renamed.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span>
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index a6a6bf4..9d4096d 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -16,39 +16,37 @@
 }
 
 .d2h-file-stats {
-  display: inline;
-  text-align: center;
+  display: flex;
+  margin-left: auto;
+  font-size: 14px;
 }
 
 .d2h-lines-added {
   text-align: right;
-}
-
-.d2h-lines-added > * {
-  background-color: #ceffce;
   border: 1px solid #b4e2b4;
-  color: #399839;
   border-radius: 5px 0 0 5px;
+  color: #399839;
   padding: 2px;
+  vertical-align: middle;
 }
 
 .d2h-lines-deleted {
   text-align: left;
-}
-
-.d2h-lines-deleted > * {
-  background-color: #f7c8c8;
   border: 1px solid #e9aeae;
-  color: #c33;
   border-radius: 0 5px 5px 0;
+  color: #c33;
   padding: 2px;
+  vertical-align: middle;
+  margin-left: 1px;
 }
 
 .d2h-file-name-wrapper {
-  display: inline-flex;
-  width: 90%;
+  display: flex;
+  align-items: center;
+  width: 100%;
   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 15px;
+  line-height: 15px;
 }
 
 .d2h-file-name {
@@ -102,16 +100,11 @@
 
 .d2h-code-side-line {
   display: block;
-  white-space: pre;
+  white-space: nowrap;
   padding: 0 10px;
   height: 18px;
   line-height: 18px;
   margin-left: 50px;
-  /* Override HighlightJS */
-  /*color: inherit;*/
-  /*overflow-x: inherit;*/
-  /*background: none;*/
-  /* ******************** */
 }
 
 .d2h-code-line del,
@@ -249,6 +242,7 @@
 }
 
 .d2h-file-list-line {
+  display: flex;
   text-align: left;
 }
 
@@ -258,6 +252,19 @@
 
 .d2h-file-list {
   display: block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.d2h-file-list > li {
+  border-bottom: #ddd solid 1px;
+  padding: 5px 10px;
+  margin: 0;
+}
+
+.d2h-file-list > li:last-child {
+  border-bottom: none;
 }
 
 .d2h-file-switch {
@@ -266,6 +273,56 @@
   cursor: pointer;
 }
 
+.d2h-icon-wrapper {
+  line-height: 31px;
+}
+
+.d2h-icon {
+  vertical-align: middle;
+  margin-right: 10px;
+  fill: currentColor;
+}
+
+.d2h-deleted {
+  color: #c33;
+}
+
+.d2h-added {
+  color: #399839;
+}
+
+.d2h-changed {
+  color: #d0b44c;
+}
+
+.d2h-moved {
+  color: #3572b0;
+}
+
+.d2h-tag {
+  display: flex;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 0 2px;
+  background-color: #fff;
+}
+
+.d2h-deleted-tag {
+  border: #c33 1px solid;
+}
+
+.d2h-added-tag {
+  border: #399839 1px solid;
+}
+
+.d2h-changed-tag {
+  border: #d0b44c 1px solid;
+}
+
+.d2h-moved-tag {
+  border: #3572b0 1px solid;
+}
+
 /*
  * Selection util.
  */
diff --git a/test/diff2html-tests.js b/test/diff2html-tests.js
index ef87ef5..99649d0 100644
--- a/test/diff2html-tests.js
+++ b/test/diff2html-tests.js
@@ -43,40 +43,39 @@ var jsonExample1 =
 
 var filesExample1 =
   '<div class="d2h-file-list-wrapper">\n' +
-  '     <div class="d2h-file-list-header">\n' +
-  '         <span class="d2h-file-list-title">Files changed (1)&nbsp&nbsp</span>\n' +
-  '         <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-  '         <a class="d2h-file-switch d2h-show">show</a>\n' +
-  '     </div>\n' +
-  '     <table class="d2h-file-list">\n' +
-  '     <tr class="d2h-file-list-line">\n' +
-  '       <td class="d2h-lines-added">\n' +
-  '         <span>+1</span>\n' +
-  '       </td>\n' +
-  '       <td class="d2h-lines-deleted">\n' +
-  '         <span>-1</span>\n' +
-  '       </td>\n' +
-  '       <td class="d2h-file-name-wrapper">\n' +
-  '         <a href="#d2h-675094" class="d2h-file-name">&nbsp;sample         </a>\n' +
-  '       </td>\n' +
-  '     </tr>\n' +
-  '</table></div>\n';
+  '    <div class="d2h-file-list-header">\n' +
+  '        <span class="d2h-file-list-title">Files changed (1)</span>\n' +
+  '        <a class="d2h-file-switch d2h-hide">hide</a>\n' +
+  '        <a class="d2h-file-switch d2h-show">show</a>\n' +
+  '    </div>\n' +
+  '    <ol class="d2h-file-list">\n' +
+  '    <li class="d2h-file-list-line">\n' +
+  '    <span class="d2h-file-name-wrapper">\n' +
+  '      <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
+  '     viewBox="0 0 14 16" width="14">\n' +
+  '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
+  '</svg></span>\n' +
+  '      <a href="#d2h-675094" class="d2h-file-name">sample</a>\n' +
+  '      <span class="d2h-file-stats">\n' +
+  '          <span class="d2h-lines-added">+1</span>\n' +
+  '          <span class="d2h-lines-deleted">-1</span>\n' +
+  '      </span>\n' +
+  '    </span>\n' +
+  '</li>\n' +
+  '    </ol>\n' +
+  '</div>';
+
 
 var htmlLineExample1 =
   '<div class="d2h-wrapper">\n' +
   '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
   '    <div class="d2h-file-header">\n' +
-  '    <span class="d2h-file-stats">\n' +
-  '      <span class="d2h-lines-added">\n' +
-  '        <span>+1</span>\n' +
-  '      </span>\n' +
-  '      <span class="d2h-lines-deleted">\n' +
-  '        <span>-1</span>\n' +
-  '      </span>\n' +
-  '    </span>\n' +
   '    <span class="d2h-file-name-wrapper">\n' +
-  '        <span class="d2h-file-name">&nbsp;sample</span>\n' +
-  '    </span>\n' +
+  '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+  '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+  '</svg></span>\n' +
+  '    <span class="d2h-file-name">sample</span>\n' +
+  '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
   '    </div>\n' +
   '    <div class="d2h-file-diff">\n' +
   '        <div class="d2h-code-wrapper">\n' +
@@ -85,12 +84,12 @@ var htmlLineExample1 =
   '                <tr>\n' +
   '    <td class="d2h-code-linenumber d2h-info"></td>\n' +
   '    <td class="d2h-info">\n' +
-  '        <div class="d2h-code-line d2h-info"></div>\n' +
+  '        <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
   '    </td>\n' +
   '</tr><tr>\n' +
   '    <td class="d2h-code-linenumber d2h-del">\n' +
-  '        <div class="line-num1">1</div>\n' +
-  '        <div class="line-num2"></div>\n' +
+  '      <div class="line-num1">1</div>\n' +
+  '<div class="line-num2"></div>\n' +
   '    </td>\n' +
   '    <td class="d2h-del">\n' +
   '        <div class="d2h-code-line d2h-del">\n' +
@@ -100,8 +99,8 @@ var htmlLineExample1 =
   '    </td>\n' +
   '</tr><tr>\n' +
   '    <td class="d2h-code-linenumber d2h-ins">\n' +
-  '        <div class="line-num1"></div>\n' +
-  '        <div class="line-num2">1</div>\n' +
+  '      <div class="line-num1"></div>\n' +
+  '<div class="line-num2">1</div>\n' +
   '    </td>\n' +
   '    <td class="d2h-ins">\n' +
   '        <div class="d2h-code-line d2h-ins">\n' +
@@ -121,60 +120,67 @@ var htmlLineExample1WithFilesSummary = filesExample1 + htmlLineExample1;
 
 var htmlSideExample1 =
   '<div class="d2h-wrapper">\n' +
-  '<div id="d2h-675094" class="d2h-file-wrapper" data-lang="undefined">\n' +
-  '     <div class="d2h-file-header">\n' +
-  '       <span class="d2h-file-stats">\n' +
-  '         <span class="d2h-lines-added">\n' +
-  '           <span>+1</span>\n' +
-  '         </span>\n' +
-  '         <span class="d2h-lines-deleted">\n' +
-  '           <span>-1</span>\n' +
-  '         </span>\n' +
-  '       </span>\n' +
-  '       <span class="d2h-file-name-wrapper">\n' +
-  '         <span class="d2h-file-name">sample</span>\n' +
-  '       </span>\n' +
-  '     </div>\n' +
-  '     <div class="d2h-files-diff">\n' +
-  '       <div class="d2h-file-side-diff">\n' +
-  '         <div class="d2h-code-wrapper">\n' +
-  '           <table class="d2h-diff-table">\n' +
-  '             <tbody class="d2h-diff-tbody">\n' +
-  '           <tr>\n' +
-  '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-  '  <td class="d2h-info">\n' +
-  '    <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
-  '  </td>\n' +
+  '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
+  '    <div class="d2h-file-header">\n' +
+  '      <span class="d2h-file-name-wrapper">\n' +
+  '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+  '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+  '</svg></span>\n' +
+  '    <span class="d2h-file-name">sample</span>\n' +
+  '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
+  '    </div>\n' +
+  '    <div class="d2h-files-diff">\n' +
+  '        <div class="d2h-file-side-diff">\n' +
+  '            <div class="d2h-code-wrapper">\n' +
+  '                <table class="d2h-diff-table">\n' +
+  '                    <tbody class="d2h-diff-tbody">\n' +
+  '                    <tr>\n' +
+  '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+  '    <td class="d2h-info">\n' +
+  '        <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
+  '    </td>\n' +
+  '</tr><tr>\n' +
+  '    <td class="d2h-code-side-linenumber d2h-del">\n' +
+  '      1\n' +
+  '    </td>\n' +
+  '    <td class="d2h-del">\n' +
+  '        <div class="d2h-code-side-line d2h-del">\n' +
+  '            <span class="d2h-code-line-prefix">-</span>\n' +
+  '            <span class="d2h-code-line-ctn"><del>test</del></span>\n' +
+  '        </div>\n' +
+  '    </td>\n' +
   '</tr>\n' +
-  '<tr>\n' +
-  '    <td class="d2h-code-side-linenumber d2h-del">1</td>\n' +
-  '    <td class="d2h-del">      <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>test</del></span></div>    </td>\n' +
-  '  </tr>\n' +
-  '             </tbody>\n' +
-  '           </table>\n' +
-  '         </div>\n' +
-  '       </div>\n' +
-  '       <div class="d2h-file-side-diff">\n' +
-  '         <div class="d2h-code-wrapper">\n' +
-  '           <table class="d2h-diff-table">\n' +
-  '             <tbody class="d2h-diff-tbody">\n' +
-  '           <tr>\n' +
-  '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-  '  <td class="d2h-info">\n' +
-  '    <div class="d2h-code-side-line d2h-info"></div>\n' +
-  '  </td>\n' +
+  '                    </tbody>\n' +
+  '                </table>\n' +
+  '            </div>\n' +
+  '        </div>\n' +
+  '        <div class="d2h-file-side-diff">\n' +
+  '            <div class="d2h-code-wrapper">\n' +
+  '                <table class="d2h-diff-table">\n' +
+  '                    <tbody class="d2h-diff-tbody">\n' +
+  '                    <tr>\n' +
+  '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+  '    <td class="d2h-info">\n' +
+  '        <div class="d2h-code-side-line d2h-info"></div>\n' +
+  '    </td>\n' +
+  '</tr><tr>\n' +
+  '    <td class="d2h-code-side-linenumber d2h-ins">\n' +
+  '      1\n' +
+  '    </td>\n' +
+  '    <td class="d2h-ins">\n' +
+  '        <div class="d2h-code-side-line d2h-ins">\n' +
+  '            <span class="d2h-code-line-prefix">+</span>\n' +
+  '            <span class="d2h-code-line-ctn"><ins>test1</ins></span>\n' +
+  '        </div>\n' +
+  '    </td>\n' +
   '</tr>\n' +
-  '<tr>\n' +
-  '    <td class="d2h-code-side-linenumber d2h-ins">1</td>\n' +
-  '    <td class="d2h-ins">      <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>test1</ins></span></div>    </td>\n' +
-  '  </tr>\n' +
-  '             </tbody>\n' +
-  '           </table>\n' +
-  '         </div>\n' +
-  '       </div>\n' +
-  '     </div>\n' +
-  '   </div>\n' +
-  '</div>\n';
+  '                    </tbody>\n' +
+  '                </table>\n' +
+  '            </div>\n' +
+  '        </div>\n' +
+  '    </div>\n' +
+  '</div>\n' +
+  '</div>';
 
 var htmlSideExample1WithFilesSummary = filesExample1 + htmlSideExample1;
 
diff --git a/test/file-list-printer-tests.js b/test/file-list-printer-tests.js
new file mode 100644
index 0000000..89e9dc1
--- /dev/null
+++ b/test/file-list-printer-tests.js
@@ -0,0 +1,105 @@
+var assert = require('assert');
+
+var fileListPrinter = require('../src/file-list-printer.js').FileListPrinter;
+
+describe('FileListPrinter', function() {
+  describe('generateFileList', function() {
+    it('should work for all kinds of files', function() {
+
+      var files = [{
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js'
+      }, {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name1.js',
+        newName: 'my/file/name2.js'
+      }, {
+        addedLines: 12,
+        deletedLines: 0,
+        language: 'js',
+        oldName: 'dev/null',
+        newName: 'my/file/name.js',
+        isNew: true
+      }, {
+        addedLines: 0,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'dev/null',
+        isDeleted: true
+      }];
+
+      var fileHtml = fileListPrinter.generateFileList(files);
+
+      var expected =
+        '<div class="d2h-file-list-wrapper">\n' +
+        '    <div class="d2h-file-list-header">\n' +
+        '        <span class="d2h-file-list-title">Files changed (4)</span>\n' +
+        '        <a class="d2h-file-switch d2h-hide">hide</a>\n' +
+        '        <a class="d2h-file-switch d2h-show">show</a>\n' +
+        '    </div>\n' +
+        '    <ol class="d2h-file-list">\n' +
+        '    <li class="d2h-file-list-line">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '      <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
+        '     viewBox="0 0 14 16" width="14">\n' +
+        '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
+        '</svg></span>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <span class="d2h-file-stats">\n' +
+        '          <span class="d2h-lines-added">+12</span>\n' +
+        '          <span class="d2h-lines-deleted">-41</span>\n' +
+        '      </span>\n' +
+        '    </span>\n' +
+        '</li>\n' +
+        '<li class="d2h-file-list-line">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '      <span><svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"\n' +
+        '     viewBox="0 0 14 16" width="14">\n' +
+        '    <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>\n' +
+        '</svg></span>\n' +
+        '      <a href="#d2h-662683" class="d2h-file-name">my/file/{name1.js → name2.js}</a>\n' +
+        '      <span class="d2h-file-stats">\n' +
+        '          <span class="d2h-lines-added">+12</span>\n' +
+        '          <span class="d2h-lines-deleted">-41</span>\n' +
+        '      </span>\n' +
+        '    </span>\n' +
+        '</li>\n' +
+        '<li class="d2h-file-list-line">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '      <span><svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"\n' +
+        '     width="14">\n' +
+        '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>\n' +
+        '</svg></span>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <span class="d2h-file-stats">\n' +
+        '          <span class="d2h-lines-added">+12</span>\n' +
+        '          <span class="d2h-lines-deleted">-0</span>\n' +
+        '      </span>\n' +
+        '    </span>\n' +
+        '</li>\n' +
+        '<li class="d2h-file-list-line">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '      <span><svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"\n' +
+        '     viewBox="0 0 14 16" width="14">\n' +
+        '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>\n' +
+        '</svg></span>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <span class="d2h-file-stats">\n' +
+        '          <span class="d2h-lines-added">+0</span>\n' +
+        '          <span class="d2h-lines-deleted">-41</span>\n' +
+        '      </span>\n' +
+        '    </span>\n' +
+        '</li>\n' +
+        '    </ol>\n' +
+        '</div>';
+
+      assert.equal(expected, fileHtml);
+    });
+  });
+});
diff --git a/test/hogan-cache-tests.js b/test/hogan-cache-tests.js
index c5f65ce..190bf6f 100644
--- a/test/hogan-cache-tests.js
+++ b/test/hogan-cache-tests.js
@@ -1,28 +1,35 @@
 var assert = require('assert');
 
 var HoganJsUtils = require('../src/hoganjs-utils.js').HoganJsUtils;
+var diffParser = require('../src/diff-parser.js').DiffParser;
 
 describe('HoganJsUtils', function() {
   describe('render', function() {
     var emptyDiffHtml =
       '<tr>\n' +
-      '    <td class="">\n' +
-      '        <div class="d2h-code-line ">\n' +
+      '    <td class="d2h-info">\n' +
+      '        <div class="d2h-code-line d2h-info">\n' +
       '            File without changes\n' +
       '        </div>\n' +
       '    </td>\n' +
       '</tr>';
 
     it('should render view', function() {
-      var result = HoganJsUtils.render('line-by-line', 'empty-diff', {});
+      var result = HoganJsUtils.render('generic', 'empty-diff', {
+        contentClass: 'd2h-code-line',
+        diffParser: diffParser
+      });
       assert.equal(emptyDiffHtml, result);
     });
     it('should render view without cache', function() {
-      var result = HoganJsUtils.render('line-by-line', 'empty-diff', {}, {noCache: true});
+      var result = HoganJsUtils.render('generic', 'empty-diff', {
+        contentClass: 'd2h-code-line',
+        diffParser: diffParser
+      }, {noCache: true});
       assert.equal(emptyDiffHtml + '\n', result);
     });
     it('should return null if template is missing', function() {
-      var result = HoganJsUtils.render('line-by-line', 'missing-template', {}, {noCache: true});
+      var result = HoganJsUtils.render('generic', 'missing-template', {}, {noCache: true});
       assert.equal(null, result);
     });
   });
diff --git a/test/line-by-line-tests.js b/test/line-by-line-tests.js
index 16dabbf..a0ba661 100644
--- a/test/line-by-line-tests.js
+++ b/test/line-by-line-tests.js
@@ -31,8 +31,8 @@ describe('LineByLinePrinter', function() {
       fileHtml = fileHtml.replace(/\n\n+/g, '\n');
       var expected = '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">30</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">30</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -53,8 +53,8 @@ describe('LineByLinePrinter', function() {
       fileHtml = fileHtml.replace(/\n\n+/g, '\n');
       var expected = '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-del">\n' +
-        '        <div class="line-num1">30</div>\n' +
-        '        <div class="line-num2"></div>\n' +
+        '      <div class="line-num1">30</div>\n' +
+        '<div class="line-num2"></div>\n' +
         '    </td>\n' +
         '    <td class="d2h-del">\n' +
         '        <div class="d2h-code-line d2h-del">\n' +
@@ -75,8 +75,8 @@ describe('LineByLinePrinter', function() {
       fileHtml = fileHtml.replace(/\n\n+/g, '\n');
       var expected = '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">30</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">30</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -97,8 +97,8 @@ describe('LineByLinePrinter', function() {
       fileHtml = fileHtml.replace(/\n\n+/g, '\n');
       var expected = '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">30</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">30</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -119,8 +119,9 @@ describe('LineByLinePrinter', function() {
       fileHtml = fileHtml.replace(/\n\n+/g, '\n');
       var expected = '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">30</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '' +
+        '<div class="line-num2">30</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -149,19 +150,129 @@ describe('LineByLinePrinter', function() {
 
       var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
 
-      var expected = '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
+      var expected =
+        '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-stats">\n' +
-        '      <span class="d2h-lines-added">\n' +
-        '        <span>+12</span>\n' +
-        '      </span>\n' +
-        '      <span class="d2h-lines-deleted">\n' +
-        '        <span>-41</span>\n' +
-        '      </span>\n' +
-        '    </span>\n' +
         '    <span class="d2h-file-name-wrapper">\n' +
-        '        <span class="d2h-file-name">&nbsp;my/file/name.js</span>\n' +
-        '    </span>\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
+        '    </div>\n' +
+        '    <div class="d2h-file-diff">\n' +
+        '        <div class="d2h-code-wrapper">\n' +
+        '            <table class="d2h-diff-table">\n' +
+        '                <tbody class="d2h-diff-tbody">\n' +
+        '                <span>Random Html</span>\n' +
+        '                </tbody>\n' +
+        '            </table>\n' +
+        '        </div>\n' +
+        '    </div>\n' +
+        '</div>';
+
+      assert.equal(expected, fileHtml);
+    });
+    it('should work for simple added file', function() {
+      var lineByLinePrinter = new LineByLinePrinter({});
+
+      var file = {
+        addedLines: 12,
+        deletedLines: 0,
+        language: 'js',
+        oldName: 'dev/null',
+        newName: 'my/file/name.js',
+        isNew: true
+      };
+      var diffs = '<span>Random Html</span>';
+
+      var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
+
+      var expected =
+        '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
+        '    <div class="d2h-file-header">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-tag d2h-added d2h-added-tag">ADDED</span></span>\n' +
+        '    </div>\n' +
+        '    <div class="d2h-file-diff">\n' +
+        '        <div class="d2h-code-wrapper">\n' +
+        '            <table class="d2h-diff-table">\n' +
+        '                <tbody class="d2h-diff-tbody">\n' +
+        '                <span>Random Html</span>\n' +
+        '                </tbody>\n' +
+        '            </table>\n' +
+        '        </div>\n' +
+        '    </div>\n' +
+        '</div>';
+
+      assert.equal(expected, fileHtml);
+    });
+    it('should work for simple deleted file', function() {
+      var lineByLinePrinter = new LineByLinePrinter({});
+
+      var file = {
+        addedLines: 0,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'dev/null',
+        isDeleted: true
+      };
+      var diffs = '<span>Random Html</span>';
+
+      var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
+
+      var expected =
+        '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
+        '    <div class="d2h-file-header">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span></span>\n' +
+        '    </div>\n' +
+        '    <div class="d2h-file-diff">\n' +
+        '        <div class="d2h-code-wrapper">\n' +
+        '            <table class="d2h-diff-table">\n' +
+        '                <tbody class="d2h-diff-tbody">\n' +
+        '                <span>Random Html</span>\n' +
+        '                </tbody>\n' +
+        '            </table>\n' +
+        '        </div>\n' +
+        '    </div>\n' +
+        '</div>';
+
+      assert.equal(expected, fileHtml);
+    });
+    it('should work for simple renamed file', function() {
+      var lineByLinePrinter = new LineByLinePrinter({});
+
+      var file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name1.js',
+        newName: 'my/file/name2.js',
+        isRename: true
+      };
+      var diffs = '<span>Random Html</span>';
+
+      var fileHtml = lineByLinePrinter.makeFileDiffHtml(file, diffs);
+
+      var expected =
+        '<div id="d2h-662683" class="d2h-file-wrapper" data-lang="js">\n' +
+        '    <div class="d2h-file-header">\n' +
+        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">my/file/{name1.js → name2.js}</span>\n' +
+        '    <span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
         '        <div class="d2h-code-wrapper">\n' +
@@ -229,17 +340,12 @@ describe('LineByLinePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-stats">\n' +
-        '      <span class="d2h-lines-added">\n' +
-        '        <span>+1</span>\n' +
-        '      </span>\n' +
-        '      <span class="d2h-lines-deleted">\n' +
-        '        <span>-1</span>\n' +
-        '      </span>\n' +
-        '    </span>\n' +
         '    <span class="d2h-file-name-wrapper">\n' +
-        '        <span class="d2h-file-name">&nbsp;sample</span>\n' +
-        '    </span>\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">sample</span>\n' +
+        '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
         '        <div class="d2h-code-wrapper">\n' +
@@ -248,12 +354,12 @@ describe('LineByLinePrinter', function() {
         '                <tr>\n' +
         '    <td class="d2h-code-linenumber d2h-info"></td>\n' +
         '    <td class="d2h-info">\n' +
-        '        <div class="d2h-code-line d2h-info"></div>\n' +
+        '        <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-del d2h-change">\n' +
-        '        <div class="line-num1">1</div>\n' +
-        '        <div class="line-num2"></div>\n' +
+        '      <div class="line-num1">1</div>\n' +
+        '<div class="line-num2"></div>\n' +
         '    </td>\n' +
         '    <td class="d2h-del d2h-change">\n' +
         '        <div class="d2h-code-line d2h-del d2h-change">\n' +
@@ -263,8 +369,8 @@ describe('LineByLinePrinter', function() {
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins d2h-change">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">1</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">1</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins d2h-change">\n' +
         '        <div class="d2h-code-line d2h-ins d2h-change">\n' +
@@ -300,17 +406,12 @@ describe('LineByLinePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-stats">\n' +
-        '      <span class="d2h-lines-added">\n' +
-        '        <span>+0</span>\n' +
-        '      </span>\n' +
-        '      <span class="d2h-lines-deleted">\n' +
-        '        <span>-0</span>\n' +
-        '      </span>\n' +
-        '    </span>\n' +
         '    <span class="d2h-file-name-wrapper">\n' +
-        '        <span class="d2h-file-name">&nbsp;sample</span>\n' +
-        '    </span>\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">sample</span>\n' +
+        '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
         '        <div class="d2h-code-wrapper">\n' +
@@ -356,8 +457,8 @@ describe('LineByLinePrinter', function() {
       var expected =
         '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-del">\n' +
-        '        <div class="line-num1">1</div>\n' +
-        '        <div class="line-num2"></div>\n' +
+        '      <div class="line-num1">1</div>\n' +
+        '<div class="line-num2"></div>\n' +
         '    </td>\n' +
         '    <td class="d2h-del">\n' +
         '        <div class="d2h-code-line d2h-del">\n' +
@@ -366,8 +467,8 @@ describe('LineByLinePrinter', function() {
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">1</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">1</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -430,12 +531,12 @@ describe('LineByLinePrinter', function() {
         '<tr>\n' +
         '    <td class="d2h-code-linenumber d2h-info"></td>\n' +
         '    <td class="d2h-info">\n' +
-        '        <div class="d2h-code-line d2h-info"></div>\n' +
+        '        <div class="d2h-code-line d2h-info">@@ -1 +1 @@</div>\n' +
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-cntx">\n' +
-        '        <div class="line-num1">1</div>\n' +
-        '        <div class="line-num2">1</div>\n' +
+        '      <div class="line-num1">1</div>\n' +
+        '<div class="line-num2">1</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-cntx">\n' +
         '        <div class="d2h-code-line d2h-cntx">\n' +
@@ -444,8 +545,8 @@ describe('LineByLinePrinter', function() {
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-del">\n' +
-        '        <div class="line-num1">2</div>\n' +
-        '        <div class="line-num2"></div>\n' +
+        '      <div class="line-num1">2</div>\n' +
+        '<div class="line-num2"></div>\n' +
         '    </td>\n' +
         '    <td class="d2h-del">\n' +
         '        <div class="d2h-code-line d2h-del">\n' +
@@ -455,8 +556,8 @@ describe('LineByLinePrinter', function() {
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">2</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">2</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
@@ -466,8 +567,8 @@ describe('LineByLinePrinter', function() {
         '    </td>\n' +
         '</tr><tr>\n' +
         '    <td class="d2h-code-linenumber d2h-ins">\n' +
-        '        <div class="line-num1"></div>\n' +
-        '        <div class="line-num2">3</div>\n' +
+        '      <div class="line-num1"></div>\n' +
+        '<div class="line-num2">3</div>\n' +
         '    </td>\n' +
         '    <td class="d2h-ins">\n' +
         '        <div class="d2h-code-line d2h-ins">\n' +
diff --git a/test/side-by-side-printer-tests.js b/test/side-by-side-printer-tests.js
index e2e2286..b90e2c2 100644
--- a/test/side-by-side-printer-tests.js
+++ b/test/side-by-side-printer-tests.js
@@ -10,11 +10,11 @@ describe('SideBySidePrinter', function() {
       var fileHtml = sideBySidePrinter.generateEmptyDiff();
       var expectedRight = '';
       var expectedLeft = '<tr>\n' +
-        '  <td class="d2h-info">' +
-        '    <div class="d2h-code-side-line d2h-info">' +
-        'File without changes' +
-        '    </div>' +
-        '  </td>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info">\n' +
+        '            File without changes\n' +
+        '        </div>\n' +
+        '    </td>\n' +
         '</tr>\n';
 
       assert.equal(expectedRight, fileHtml.right);
@@ -73,43 +73,78 @@ describe('SideBySidePrinter', function() {
 
       var expectedLeft =
         '<tr>\n' +
-        '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-        '  <td class="d2h-info">\n' +
-        '    <div class="d2h-code-side-line d2h-info">@@ -19,7 +19,7 @@</div>\n' +
-        '  </td>\n' +
-        '</tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-cntx">19</td>\n' +
-        '    <td class="d2h-cntx">      <div class="d2h-code-side-line d2h-cntx"><span class="d2h-code-line-prefix"> </span><span class="d2h-code-line-ctn">context</span></div>    </td>\n' +
-        '  </tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-del">20</td>\n' +
-        '    <td class="d2h-del">      <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>removed</del></span></div>    </td>\n' +
-        '  </tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-cntx"></td>\n' +
-        '    <td class="d2h-cntx">      <div class="d2h-code-side-line d2h-cntx"></div>    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info">@@ -19,7 +19,7 @@</div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-cntx">\n' +
+        '      19\n' +
+        '    </td>\n' +
+        '    <td class="d2h-cntx">\n' +
+        '        <div class="d2h-code-side-line d2h-cntx">\n' +
+        '            <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
+        '            <span class="d2h-code-line-ctn">context</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-del">\n' +
+        '      20\n' +
+        '    </td>\n' +
+        '    <td class="d2h-del">\n' +
+        '        <div class="d2h-code-side-line d2h-del">\n' +
+        '            <span class="d2h-code-line-prefix">-</span>\n' +
+        '            <span class="d2h-code-line-ctn"><del>removed</del></span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-cntx">\n' +
+        '      ' +
+        '\n' +
+        '    </td>\n' +
+        '    <td class="d2h-cntx">\n' +
+        '        <div class="d2h-code-side-line d2h-cntx">\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       var expectedRight =
         '<tr>\n' +
-        '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-        '  <td class="d2h-info">\n' +
-        '    <div class="d2h-code-side-line d2h-info"></div>\n' +
-        '  </td>\n' +
-        '</tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-cntx">19</td>\n' +
-        '    <td class="d2h-cntx">      <div class="d2h-code-side-line d2h-cntx"><span class="d2h-code-line-prefix"> </span><span class="d2h-code-line-ctn">context</span></div>    </td>\n' +
-        '  </tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-ins">20</td>\n' +
-        '    <td class="d2h-ins">      <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>added</ins></span></div>    </td>\n' +
-        '  </tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-ins">21</td>\n' +
-        '    <td class="d2h-ins">      <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn">another added</span></div>    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info"></div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-cntx">\n' +
+        '      19\n' +
+        '    </td>\n' +
+        '    <td class="d2h-cntx">\n' +
+        '        <div class="d2h-code-side-line d2h-cntx">\n' +
+        '            <span class="d2h-code-line-prefix">&nbsp;</span>\n' +
+        '            <span class="d2h-code-line-ctn">context</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-ins">\n' +
+        '      20\n' +
+        '    </td>\n' +
+        '    <td class="d2h-ins">\n' +
+        '        <div class="d2h-code-side-line d2h-ins">\n' +
+        '            <span class="d2h-code-line-prefix">+</span>\n' +
+        '            <span class="d2h-code-line-ctn"><ins>added</ins></span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-ins">\n' +
+        '      21\n' +
+        '    </td>\n' +
+        '    <td class="d2h-ins">\n' +
+        '        <div class="d2h-code-side-line d2h-ins">\n' +
+        '            <span class="d2h-code-line-prefix">+</span>\n' +
+        '            <span class="d2h-code-line-ctn">another&nbsp;added</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       assert.equal(expectedLeft, fileHtml.left);
       assert.equal(expectedRight, fileHtml.right);
@@ -124,11 +159,16 @@ describe('SideBySidePrinter', function() {
       var fileHtml = sideBySidePrinter.generateSingleLineHtml(
         diffParser.LINE_TYPE.INSERTS, 30, 'test', '+');
       var expected = '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-ins">30</td>\n' +
-        '    <td class="d2h-ins">' +
-        '      <div class="d2h-code-side-line d2h-ins"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn">test</span></div>' +
+        '    <td class="d2h-code-side-linenumber d2h-ins">\n' +
+        '      30\n' +
         '    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-ins">\n' +
+        '        <div class="d2h-code-side-line d2h-ins">\n' +
+        '            <span class="d2h-code-line-prefix">+</span>\n' +
+        '            <span class="d2h-code-line-ctn">test</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       assert.equal(expected, fileHtml);
     });
@@ -139,11 +179,16 @@ describe('SideBySidePrinter', function() {
       var fileHtml = sideBySidePrinter.generateSingleLineHtml(
         diffParser.LINE_TYPE.DELETES, 30, 'test', '-');
       var expected = '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-del">30</td>\n' +
-        '    <td class="d2h-del">' +
-        '      <div class="d2h-code-side-line d2h-del"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn">test</span></div>' +
+        '    <td class="d2h-code-side-linenumber d2h-del">\n' +
+        '      30\n' +
         '    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-del">\n' +
+        '        <div class="d2h-code-side-line d2h-del">\n' +
+        '            <span class="d2h-code-line-prefix">-</span>\n' +
+        '            <span class="d2h-code-line-ctn">test</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       assert.equal(expected, fileHtml);
     });
@@ -184,60 +229,67 @@ describe('SideBySidePrinter', function() {
       var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson);
       var expected =
         '<div class="d2h-wrapper">\n' +
-        '<div id="d2h-675094" class="d2h-file-wrapper" data-lang="undefined">\n' +
-        '     <div class="d2h-file-header">\n' +
-        '       <span class="d2h-file-stats">\n' +
-        '         <span class="d2h-lines-added">\n' +
-        '           <span>+1</span>\n' +
-        '         </span>\n' +
-        '         <span class="d2h-lines-deleted">\n' +
-        '           <span>-1</span>\n' +
-        '         </span>\n' +
-        '       </span>\n' +
-        '       <span class="d2h-file-name-wrapper">\n' +
-        '         <span class="d2h-file-name">sample</span>\n' +
-        '       </span>\n' +
-        '     </div>\n' +
-        '     <div class="d2h-files-diff">\n' +
-        '       <div class="d2h-file-side-diff">\n' +
-        '         <div class="d2h-code-wrapper">\n' +
-        '           <table class="d2h-diff-table">\n' +
-        '             <tbody class="d2h-diff-tbody">\n' +
-        '           <tr>\n' +
-        '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-        '  <td class="d2h-info">\n' +
-        '    <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
-        '  </td>\n' +
+        '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
+        '    <div class="d2h-file-header">\n' +
+        '      <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">sample</span>\n' +
+        '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
+        '    </div>\n' +
+        '    <div class="d2h-files-diff">\n' +
+        '        <div class="d2h-file-side-diff">\n' +
+        '            <div class="d2h-code-wrapper">\n' +
+        '                <table class="d2h-diff-table">\n' +
+        '                    <tbody class="d2h-diff-tbody">\n' +
+        '                    <tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info">@@ -1 +1 @@</div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-del d2h-change">\n' +
+        '      1\n' +
+        '    </td>\n' +
+        '    <td class="d2h-del d2h-change">\n' +
+        '        <div class="d2h-code-side-line d2h-del d2h-change">\n' +
+        '            <span class="d2h-code-line-prefix">-</span>\n' +
+        '            <span class="d2h-code-line-ctn"><del>test</del></span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
         '</tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-del d2h-change">1</td>\n' +
-        '    <td class="d2h-del d2h-change">      <div class="d2h-code-side-line d2h-del d2h-change"><span class="d2h-code-line-prefix">-</span><span class="d2h-code-line-ctn"><del>test</del></span></div>    </td>\n' +
-        '  </tr>\n' +
-        '             </tbody>\n' +
-        '           </table>\n' +
-        '         </div>\n' +
-        '       </div>\n' +
-        '       <div class="d2h-file-side-diff">\n' +
-        '         <div class="d2h-code-wrapper">\n' +
-        '           <table class="d2h-diff-table">\n' +
-        '             <tbody class="d2h-diff-tbody">\n' +
-        '           <tr>\n' +
-        '  <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
-        '  <td class="d2h-info">\n' +
-        '    <div class="d2h-code-side-line d2h-info"></div>\n' +
-        '  </td>\n' +
+        '                    </tbody>\n' +
+        '                </table>\n' +
+        '            </div>\n' +
+        '        </div>\n' +
+        '        <div class="d2h-file-side-diff">\n' +
+        '            <div class="d2h-code-wrapper">\n' +
+        '                <table class="d2h-diff-table">\n' +
+        '                    <tbody class="d2h-diff-tbody">\n' +
+        '                    <tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-info"></td>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info"></div>\n' +
+        '    </td>\n' +
+        '</tr><tr>\n' +
+        '    <td class="d2h-code-side-linenumber d2h-ins d2h-change">\n' +
+        '      1\n' +
+        '    </td>\n' +
+        '    <td class="d2h-ins d2h-change">\n' +
+        '        <div class="d2h-code-side-line d2h-ins d2h-change">\n' +
+        '            <span class="d2h-code-line-prefix">+</span>\n' +
+        '            <span class="d2h-code-line-ctn"><ins>test1r</ins></span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
         '</tr>\n' +
-        '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-ins d2h-change">1</td>\n' +
-        '    <td class="d2h-ins d2h-change">      <div class="d2h-code-side-line d2h-ins d2h-change"><span class="d2h-code-line-prefix">+</span><span class="d2h-code-line-ctn"><ins>test1r</ins></span></div>    </td>\n' +
-        '  </tr>\n' +
-        '             </tbody>\n' +
-        '           </table>\n' +
-        '         </div>\n' +
-        '       </div>\n' +
-        '     </div>\n' +
-        '   </div>\n' +
-        '</div>\n';
+        '                    </tbody>\n' +
+        '                </table>\n' +
+        '            </div>\n' +
+        '        </div>\n' +
+        '    </div>\n' +
+        '</div>\n' +
+        '</div>';
 
       assert.equal(expected, html);
     });
@@ -254,43 +306,44 @@ describe('SideBySidePrinter', function() {
       var html = sideBySidePrinter.generateSideBySideJsonHtml(exampleJson);
       var expected =
         '<div class="d2h-wrapper">\n' +
-        '<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
-        '     <div class="d2h-file-header">\n' +
-        '       <span class="d2h-file-stats">\n' +
-        '         <span class="d2h-lines-added">\n' +
-        '           <span>+undefined</span>\n' +
-        '         </span>\n' +
-        '         <span class="d2h-lines-deleted">\n' +
-        '           <span>-undefined</span>\n' +
-        '         </span>\n' +
-        '       </span>\n' +
-        '       <span class="d2h-file-name-wrapper">\n' +
-        '         <span class="d2h-file-name">sample</span>\n' +
-        '       </span>\n' +
-        '     </div>\n' +
-        '     <div class="d2h-files-diff">\n' +
-        '       <div class="d2h-file-side-diff">\n' +
-        '         <div class="d2h-code-wrapper">\n' +
-        '           <table class="d2h-diff-table">\n' +
-        '             <tbody class="d2h-diff-tbody">\n' +
-        '           <tr>\n' +
-        '  <td class="d2h-info">    <div class="d2h-code-side-line d2h-info">File without changes    </div>  </td>\n' +
+        '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
+        '    <div class="d2h-file-header">\n' +
+        '      <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '</svg></span>\n' +
+        '    <span class="d2h-file-name">sample</span>\n' +
+        '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
+        '    </div>\n' +
+        '    <div class="d2h-files-diff">\n' +
+        '        <div class="d2h-file-side-diff">\n' +
+        '            <div class="d2h-code-wrapper">\n' +
+        '                <table class="d2h-diff-table">\n' +
+        '                    <tbody class="d2h-diff-tbody">\n' +
+        '                    <tr>\n' +
+        '    <td class="d2h-info">\n' +
+        '        <div class="d2h-code-side-line d2h-info">\n' +
+        '            File without changes\n' +
+        '        </div>\n' +
+        '    </td>\n' +
         '</tr>\n' +
-        '             </tbody>\n' +
-        '           </table>\n' +
-        '         </div>\n' +
-        '       </div>\n' +
-        '       <div class="d2h-file-side-diff">\n' +
-        '         <div class="d2h-code-wrapper">\n' +
-        '           <table class="d2h-diff-table">\n' +
-        '             <tbody class="d2h-diff-tbody">\n' +
-        '                        </tbody>\n' +
-        '           </table>\n' +
-        '         </div>\n' +
-        '       </div>\n' +
-        '     </div>\n' +
-        '   </div>\n' +
-        '</div>\n';
+        '\n' +
+        '                    </tbody>\n' +
+        '                </table>\n' +
+        '            </div>\n' +
+        '        </div>\n' +
+        '        <div class="d2h-file-side-diff">\n' +
+        '            <div class="d2h-code-wrapper">\n' +
+        '                <table class="d2h-diff-table">\n' +
+        '                    <tbody class="d2h-diff-tbody">\n' +
+        '                    \n' +
+        '                    </tbody>\n' +
+        '                </table>\n' +
+        '            </div>\n' +
+        '        </div>\n' +
+        '    </div>\n' +
+        '</div>\n' +
+        '</div>';
 
       assert.equal(expected, html);
     });
@@ -316,24 +369,29 @@ describe('SideBySidePrinter', function() {
       var html = sideBySidePrinter.processLines(oldLines, newLines);
       var expectedLeft =
         '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-del">1</td>\n' +
-        '    <td class="d2h-del">' +
-        '      <div class="d2h-code-side-line d2h-del">' +
-        '<span class="d2h-code-line-prefix">-</span>' +
-        '<span class="d2h-code-line-ctn">test</span></div>' +
+        '    <td class="d2h-code-side-linenumber d2h-del">\n' +
+        '      1\n' +
         '    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-del">\n' +
+        '        <div class="d2h-code-side-line d2h-del">\n' +
+        '            <span class="d2h-code-line-prefix">-</span>\n' +
+        '            <span class="d2h-code-line-ctn">test</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       var expectedRight =
         '<tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-ins">1</td>\n' +
-        '    <td class="d2h-ins">' +
-        '      <div class="d2h-code-side-line d2h-ins">' +
-        '<span class="d2h-code-line-prefix">+</span>' +
-        '<span class="d2h-code-line-ctn">test1r</span>' +
-        '</div>' +
+        '    <td class="d2h-code-side-linenumber d2h-ins">\n' +
+        '      1\n' +
         '    </td>\n' +
-        '  </tr>\n';
+        '    <td class="d2h-ins">\n' +
+        '        <div class="d2h-code-side-line d2h-ins">\n' +
+        '            <span class="d2h-code-line-prefix">+</span>\n' +
+        '            <span class="d2h-code-line-ctn">test1r</span>\n' +
+        '        </div>\n' +
+        '    </td>\n' +
+        '</tr>';
 
       assert.equal(expectedLeft, html.left);
       assert.equal(expectedRight, html.right);