diff --git a/swh/web/browse/views/revision.py b/swh/web/browse/views/revision.py
index 117b5fe3..738e6ea1 100644
--- a/swh/web/browse/views/revision.py
+++ b/swh/web/browse/views/revision.py
@@ -1,219 +1,264 @@
 # Copyright (C) 2017-2018  The Software Heritage developers
 # See the AUTHORS file at the top-level directory of this distribution
 # License: GNU General Public License version 3, or any later version
 # See top-level LICENSE file for more information
 
 import json
 
 from django.shortcuts import render
 from django.utils.safestring import mark_safe
 
 from swh.web.common import service
-from swh.web.common.utils import reverse, format_utc_iso_date
+from swh.web.common.utils import reverse, format_utc_iso_date, gen_path_info
 from swh.web.common.exc import handle_view_exception
 from swh.web.browse.browseurls import browse_route
 from swh.web.browse.utils import (
     gen_link, gen_person_link, gen_revision_link,
     prepare_revision_log_for_display,
     get_origin_context, gen_origin_directory_link,
-    gen_revision_log_link,
-    gen_directory_link
+    gen_revision_log_link, get_directory_entries,
+    gen_directory_link, request_content, prepare_content_for_display
 )
 
 
 @browse_route(r'revision/(?P<sha1_git>[0-9a-f]+)/',
               view_name='browse-revision')
 def revision_browse(request, sha1_git):
     """
     Django view that produces an HTML display of a SWH revision
     identified by its id.
 
     The url that points to it is :http:get:`/browse/revision/(sha1_git)/`.
 
     Args:
         request: input django http request
         sha1_git: a SWH revision id
 
     Returns:
         The HMTL rendering for the metadata of the provided revision.
     """
     try:
         revision = service.lookup_revision(sha1_git)
         origin_info = None
         origin_context = None
         origin_type = request.GET.get('origin_type', None)
         origin_url = request.GET.get('origin_url', None)
         timestamp = request.GET.get('timestamp', None)
         visit_id = request.GET.get('visit_id', None)
+        path = request.GET.get('path', None)
+        dir_id = None
+        dirs, files = None, None
+        content_data = None
         if origin_type and origin_url:
             origin_context = get_origin_context(origin_type, origin_url,
                                                 timestamp, visit_id)
+        if path:
+            path_info = \
+                service.lookup_directory_with_path(revision['directory'], path)
+            if path_info['type'] == 'dir':
+                dir_id = path_info['target']
+            else:
+                query_string = 'sha1_git:' + path_info['target']
+                content_data = request_content(query_string)
+        else:
+            dir_id = revision['directory']
+
+        if dir_id:
+            path = '' if path is None else (path + '/')
+            dirs, files = get_directory_entries(dir_id)
     except Exception as exc:
         return handle_view_exception(request, exc)
 
     revision_data = {}
 
     revision_data['author'] = gen_person_link(
         revision['author']['id'], revision['author']['name'])
     revision_data['committer'] = gen_person_link(
         revision['committer']['id'], revision['committer']['name'])
     revision_data['committer date'] = format_utc_iso_date(
         revision['committer_date'])
     revision_data['date'] = format_utc_iso_date(revision['date'])
     if origin_context:
         revision_data['directory'] = \
             gen_origin_directory_link(origin_context, sha1_git,
                                       link_text='Browse')
         revision_data['history log'] = \
             gen_revision_log_link(sha1_git, origin_context,
                                   link_text='Browse')
     else:
         revision_data['directory'] = \
             gen_directory_link(revision['directory'], link_text='Browse')
         revision_data['history log'] = \
             gen_revision_log_link(sha1_git, link_text='Browse')
     revision_data['id'] = sha1_git
     revision_data['merge'] = revision['merge']
     revision_data['metadata'] = json.dumps(revision['metadata'],
                                            sort_keys=True,
                                            indent=4, separators=(',', ': '))
 
     if origin_info:
         browse_revision_url = reverse('browse-revision',
                                       kwargs={'sha1_git': sha1_git})
         revision_data['browse revision url'] = gen_link(browse_revision_url,
                                                         browse_revision_url)
         revision_data['origin id'] = origin_info['id']
         revision_data['origin type'] = origin_info['type']
         revision_data['origin url'] = gen_link(origin_info['url'],
                                                origin_info['url'])
 
     parents = ''
     for p in revision['parents']:
         parent_link = gen_revision_link(p, origin_context=origin_context)
         parents += parent_link + '<br/>'
 
     revision_data['parents'] = mark_safe(parents)
     revision_data['synthetic'] = revision['synthetic']
     revision_data['type'] = revision['type']
 
     message_lines = revision['message'].split('\n')
 
-    browse_link_text = '<i class="fa fa-folder-open fa-fw" '\
-                       'aria-hidden="true"></i>Browse files'
-
-    browse_files_link_attrs = {
-        'class': 'btn btn-md btn-swh pull-right',
-        'role': 'button'
-    }
-
-    if origin_context:
-        browse_files_button = \
-            gen_origin_directory_link(origin_context, sha1_git,
-                                      link_text=browse_link_text,
-                                      link_attrs=browse_files_link_attrs)
-    else:
-        browse_files_button = \
-            gen_directory_link(revision['directory'],
-                               link_text=browse_link_text,
-                               link_attrs=browse_files_link_attrs)
-
     parents_links = '<b>%s parent%s</b> ' %  \
         (len(revision['parents']),
          '' if len(revision['parents']) == 1 else 's')
     parents_links += '<i class="octicon octicon-git-commit fa-fw"></i> '
     for p in revision['parents']:
         parent_link = gen_revision_link(p, shorten_id=True,
                                         origin_context=origin_context)
         parents_links += parent_link
         if p != revision['parents'][-1]:
             parents_links += ' + '
 
+    path_info = gen_path_info(path)
+
+    query_params = {'origin_type': origin_type,
+                    'origin_url': origin_url,
+                    'timestamp': timestamp,
+                    'visit_id': visit_id}
+
+    breadcrumbs = []
+    breadcrumbs.append({'name': revision['directory'][:7],
+                        'url': reverse('browse-revision',
+                                       kwargs={'sha1_git': sha1_git},
+                                       query_params=query_params)})
+    for pi in path_info:
+        query_params['path'] = pi['path']
+        breadcrumbs.append({'name': pi['name'],
+                            'url': reverse('browse-revision',
+                                           kwargs={'sha1_git': sha1_git},
+                                           query_params=query_params)})
+
+    content = None
+    mimetype = None
+    language = None
+    if content_data:
+        breadcrumbs[-1]['url'] = None
+        content_display_data = prepare_content_for_display(
+            content_data['raw_data'], content_data['mimetype'], path)
+        content = content_display_data['content_data']
+        mimetype = content_data['mimetype']
+        language = content_display_data['language']
+    else:
+        for d in dirs:
+            query_params['path'] = path + d['name']
+            d['url'] = reverse('browse-revision',
+                               kwargs={'sha1_git': sha1_git},
+                               query_params=query_params)
+        for f in files:
+            query_params['path'] = path + f['name']
+            f['url'] = reverse('browse-revision',
+                               kwargs={'sha1_git': sha1_git},
+                               query_params=query_params)
+
     return render(request, 'revision.html',
                   {'empty_browse': False,
                    'heading': 'Revision information',
                    'top_panel_visible': True,
                    'top_panel_collapsible': True,
                    'top_panel_text': 'SWH object: Revision',
                    'swh_object_metadata': revision_data,
                    'message_header': message_lines[0],
                    'message_body': '\n'.join(message_lines[1:]),
-                   'browse_files_button': mark_safe(browse_files_button),
                    'parents_links': mark_safe(parents_links),
                    'main_panel_visible': True,
-                   'origin_context': origin_context})
+                   'origin_context': origin_context,
+                   'dirs': dirs,
+                   'files': files,
+                   'content': content,
+                   'mimetype': mimetype,
+                   'language': language,
+                   'breadcrumbs': breadcrumbs})
 
 
 NB_LOG_ENTRIES = 20
 
 
 @browse_route(r'revision/(?P<sha1_git>[0-9a-f]+)/log/',
               view_name='browse-revision-log')
 def revision_log_browse(request, sha1_git):
     """
     Django view that produces an HTML display of the history
     log for a SWH revision identified by its id.
 
     The url that points to it is :http:get:`/browse/revision/(sha1_git)/log/`.
 
     Args:
         request: input django http request
         sha1_git: a SWH revision id
 
     Returns:
         The HMTL rendering of the revision history log.
     """ # noqa
     try:
         per_page = int(request.GET.get('per_page', NB_LOG_ENTRIES))
         revision_log = service.lookup_revision_log(sha1_git,
                                                    limit=per_page+1)
         revision_log = list(revision_log)
     except Exception as exc:
         return handle_view_exception(request, exc)
 
     revs_breadcrumb = request.GET.get('revs_breadcrumb', None)
 
     revision_log_display_data = prepare_revision_log_for_display(
         revision_log, per_page, revs_breadcrumb)
 
     prev_rev = revision_log_display_data['prev_rev']
     prev_revs_breadcrumb = revision_log_display_data['prev_revs_breadcrumb']
     prev_log_url = None
     if prev_rev:
         prev_log_url = \
             reverse('browse-revision-log',
                     kwargs={'sha1_git': prev_rev},
                     query_params={'revs_breadcrumb': prev_revs_breadcrumb,
                                   'per_page': per_page})
 
     next_rev = revision_log_display_data['next_rev']
     next_revs_breadcrumb = revision_log_display_data['next_revs_breadcrumb']
     next_log_url = None
     if next_rev:
         next_log_url = \
             reverse('browse-revision-log',
                     kwargs={'sha1_git': next_rev},
                     query_params={'revs_breadcrumb': next_revs_breadcrumb,
                                   'per_page': per_page})
 
     revision_log_data = revision_log_display_data['revision_log_data']
 
     for log in revision_log_data:
         log['directory'] = gen_directory_link(log['directory'], 'Tree')
 
     return render(request, 'revision-log.html',
                   {'empty_browse': False,
                    'heading': 'Revision history information',
                    'top_panel_visible': False,
                    'top_panel_collapsible': False,
                    'top_panel_text': 'SWH object: Revision history',
                    'swh_object_metadata': None,
                    'main_panel_visible': True,
                    'revision_log': revision_log_data,
                    'next_log_url': next_log_url,
                    'prev_log_url': prev_log_url,
                    'breadcrumbs': None,
                    'top_right_link': None,
                    'top_right_link_text': None,
                    'include_top_navigation': False,
                    'origin_context': None})
diff --git a/swh/web/templates/content.html b/swh/web/templates/content.html
index 1eb4980d..265f20fe 100644
--- a/swh/web/templates/content.html
+++ b/swh/web/templates/content.html
@@ -1,150 +1,33 @@
 {% extends "browse.html" %}
-{% load static %}
 
 {% block header %}
-<script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
-<script src="{% static 'js/highlightjs-line-numbers/dist/highlightjs-line-numbers.min.js' %}"></script>
-<script>
-  // empty hljs language definition
-  function no_highlight(hljs) {
-    return {}
-  }
-  // just a trick to get line numbers working when no highlight
-  // has to be performed
-  hljs.registerLanguage('nohighlight-swh', no_highlight);
-
-  // keep track of the first highlighted line
-  var first_hl_line = null;
-  // highlighting color
-  var line_hl_color = 'rgb(193, 255, 193)';
-
-  // function to highlight a line
-  function highlight_line(i) {
-    var line_td = $('div[data-line-number="' + i + '"]').parent().parent();
-    line_td.css('background-color', line_hl_color);
-    return line_td;
-  }
+  {% include "includes/content-scripts.html" %}
+{% endblock %}
 
-  function remove_hash () {
-    history.replaceState("", document.title, window.location.pathname + window.location.search);
-  }
+{% block swh-browse-before-panels %}
+  {% if origin_context %}
+    {% include "includes/origin-visit-snapshot.html" %}
+  {% endif %}
+{% endblock %}
 
-  // function to reset highlighting
-  function reset_highlighted_lines() {
-    first_hl_line = null;
-    $('tr').css('background-color', 'inherit');
-  }
+{% block swh-browse-main-panel-content %}
 
-  function scroll_to_line(lineDomElt) {
-    $('html, body').animate({
-      scrollTop: $(lineDomElt).offset().top - 70
-    }, 500);
-  }
+{% include "includes/top-navigation.html" %}
 
-  // function to highlight lines based on a url fragment
-  // in the form '#Lx' or '#Lx-Ly'
-  function parse_url_fragment_for_lines_to_highlight() {
-    var lines = [];
-    var lines_regexp = new RegExp(/L(\d+)/g);
-    var line = lines_regexp.exec(window.location.hash);
-    while (line) {
-      lines.push(parseInt(line[1]));
-      line = lines_regexp.exec(window.location.hash);
-    }
-    reset_highlighted_lines();
-    if  (lines.length == 1) {
-      first_hl_line = parseInt(lines[0]);
-      scroll_to_line(highlight_line(lines[0]));
-    } else if (lines[0] < lines[lines.length - 1]) {
-      first_hl_line = parseInt(lines[0]);
-      scroll_to_line(highlight_line(lines[0]));
-      for (var i = lines[0]+1; i <= lines[lines.length - 1]; ++i) {
-        highlight_line(i);
-      }
-    }
-  }
+{% include "includes/content-display.html" %}
 
+<script>
   $(document).ready(function() {
-    // highlight code and add line numbers
-    $('code').each(function(i, block) {
-      hljs.highlightBlock(block);
-      hljs.lineNumbersBlock(block);
-    });
-    // click handler to dynamically highlight line(s)
-    // when the user clicks on a line number (lines range
-    // can also be highlighted while holding the shift key)
-    $('body').click(function(evt) {
-      if (evt.target.classList.contains('hljs-ln-n')) {
-        var line = parseInt($(evt.target).data('line-number'));
-        if (evt.shiftKey && first_hl_line && line > first_hl_line) {
-          var first_line = first_hl_line;
-          reset_highlighted_lines();
-          for (var i = first_line; i <= line; ++i) {
-            highlight_line(i);
-          }
-          first_hl_line = first_line;
-          window.location.hash = '#L' + first_line + "-L" + line;
-        } else {
-          reset_highlighted_lines();
-          highlight_line(line);
-          window.location.hash = '#L' + line;
-          scroll_to_line(evt.target);
-        }
-      } else {
-        reset_highlighted_lines();
-        remove_hash();
-      }
-    });
-
-    // update lines highlighting when the url fragment changes
-    $(window).on('hashchange', function() {
-      parse_url_fragment_for_lines_to_highlight();
-    });
-
-    // highlight lines specified by an url fragment
-    $('.navbar-nav.swh-browse-nav a[href="#browse"]').tab('show');
-    parse_url_fragment_for_lines_to_highlight();
-
     // load content metadata asynchronously
     $.ajax({
       url: '{{ content_metadata_url }}',
       dataType: 'json',
       success: function (data) {
         $('th:contains("language")').siblings().children().text(data.language);
         $('th:contains("licenses")').siblings().children().text(data.licenses);
       }
     });
-
   });
-
 </script>
-<link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">
-{% endblock %}
-
-{% block swh-browse-before-panels %}
-{% if origin_context %}
-  {% include "includes/origin-visit-snapshot.html" %}
-{% endif %}
-{% endblock %}
-
-{% block swh-browse-main-panel-content %}
-
-{% include "includes/top-navigation.html" %}
-
-<div class="well well-sm swh-content" style="margin-bottom: 0px">
-{% if "inode/x-empty" == mimetype %}
-<i>File is empty</i>
-{% elif "text/" in mimetype %}
-<div class="highlightjs">
-  <pre>
-    <code class="{{ language }}">{{ content }}</code>
-  </pre>
-</div>
-{% elif "image/" in mimetype and content %}
-  <img src="data:{{ mimetype }};base64,{{ content }}"/>
-{% else %}
-Content with mime type {{ mimetype }} can not be displayed
-{% endif %}
-</div>
 
 {% endblock %}
diff --git a/swh/web/templates/directory.html b/swh/web/templates/directory.html
index d837d7df..aecdbddc 100644
--- a/swh/web/templates/directory.html
+++ b/swh/web/templates/directory.html
@@ -1,82 +1,47 @@
 {% extends "browse.html" %}
 {% load static %}
 
 {% block header %}
 <script src="{% static 'js/showdown/showdown.min.js' %}"></script>
 {% endblock %}
 
 {% block swh-browse-before-panels %}
 {% if origin_context %}
   {% include "includes/origin-visit-snapshot.html" %}
 {% endif %}
 {% endblock %}
 
 {% block swh-browse-main-panel-content %}
 
 {% include "includes/top-navigation.html" %}
 
-<div class="table-responsive">
-  <table class="table">
-    <thead>
-      <tr>
-        <th>File</th>
-        <th>Mode</th>
-        <th>Size</th>
-        <th>Sha1 git</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for d in dirs %}
-      <tr>
-        <td class="swh-directory">
-          <i class="fa fa-folder fa-fw" aria-hidden="true"></i>
-          <a href="{{ d.url | safe }}">{{ d.name }}</a>
-        </td>
-        <td>{{ d.perms }}</td>
-        <td></td>
-        <td>{{ d.target }}</td>
-      </tr>
-      {% endfor %}
-      {% for f in files %}
-      <tr>
-        <td class="swh-content">
-          <i class="fa fa-file-text fa-fw" aria-hidden="true"></i>
-          <a href="{{ f.url | safe }}">{{ f.name }}</a>
-        </td>
-        <td>{{ f.perms }}</td>
-        <td>{{ f.length }}</td>
-        <td>{{ f.target }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+{% include "includes/directory-display.html" %}
 
 {% endblock %}
 
 {% block swh-browse-panels-group-end %}
 
 {% if readme_name %}
 
 <div class="panel panel-default" style="overflow-x: auto;">
   <div class="panel-heading">
     <h2>{{ readme_name }}</h2>
   </div>
   <div id='readme' class="swh-readme panel-body">
   </div>
 </div>
 
 <script>
   var converter = new showdown.Converter({tables: true});
   $.ajax({
     url: '{{ readme_url }}',
     dataType: 'text',
     success: function (data) {
       $('#readme').html(converter.makeHtml(data))
     }
   });
 </script>
 
 {% endif %}
 
 {% endblock %}
diff --git a/swh/web/templates/includes/breadcrumbs.html b/swh/web/templates/includes/breadcrumbs.html
new file mode 100644
index 00000000..798c5d82
--- /dev/null
+++ b/swh/web/templates/includes/breadcrumbs.html
@@ -0,0 +1,12 @@
+<nav class="bread-crumbs swh-browse-bread-crumbs">
+  <ul>
+    {% for bc in breadcrumbs %}
+      {% if bc.url %}
+        <li class="swh-path"><a href="{{ bc.url | safe }}">{{ bc.name }}</a></li>
+        <li>/</li>
+      {% else %}
+        <li>{{ bc.name }}</li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/swh/web/templates/includes/content-display.html b/swh/web/templates/includes/content-display.html
new file mode 100644
index 00000000..e4eeb103
--- /dev/null
+++ b/swh/web/templates/includes/content-display.html
@@ -0,0 +1,15 @@
+<div class="well well-sm swh-content" style="margin-bottom: 0px">
+  {% if "inode/x-empty" == mimetype %}
+    <i>File is empty</i>
+  {% elif "text/" in mimetype %}
+    <div class="highlightjs">
+      <pre>
+        <code class="{{ language }}">{{ content }}</code>
+      </pre>
+  </div>
+  {% elif "image/" in mimetype and content %}
+    <img src="data:{{ mimetype }};base64,{{ content }}"/>
+  {% else %}
+    Content with mime type {{ mimetype }} can not be displayed
+  {% endif %}
+</div>
diff --git a/swh/web/templates/content.html b/swh/web/templates/includes/content-scripts.html
similarity index 76%
copy from swh/web/templates/content.html
copy to swh/web/templates/includes/content-scripts.html
index 1eb4980d..c29aefef 100644
--- a/swh/web/templates/content.html
+++ b/swh/web/templates/includes/content-scripts.html
@@ -1,150 +1,108 @@
-{% extends "browse.html" %}
 {% load static %}
 
-{% block header %}
 <script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
 <script src="{% static 'js/highlightjs-line-numbers/dist/highlightjs-line-numbers.min.js' %}"></script>
 <script>
   // empty hljs language definition
   function no_highlight(hljs) {
     return {}
   }
   // just a trick to get line numbers working when no highlight
   // has to be performed
   hljs.registerLanguage('nohighlight-swh', no_highlight);
 
   // keep track of the first highlighted line
   var first_hl_line = null;
   // highlighting color
   var line_hl_color = 'rgb(193, 255, 193)';
 
   // function to highlight a line
   function highlight_line(i) {
     var line_td = $('div[data-line-number="' + i + '"]').parent().parent();
     line_td.css('background-color', line_hl_color);
     return line_td;
   }
 
   function remove_hash () {
     history.replaceState("", document.title, window.location.pathname + window.location.search);
   }
 
   // function to reset highlighting
   function reset_highlighted_lines() {
     first_hl_line = null;
     $('tr').css('background-color', 'inherit');
   }
 
   function scroll_to_line(lineDomElt) {
     $('html, body').animate({
       scrollTop: $(lineDomElt).offset().top - 70
     }, 500);
   }
 
   // function to highlight lines based on a url fragment
   // in the form '#Lx' or '#Lx-Ly'
   function parse_url_fragment_for_lines_to_highlight() {
     var lines = [];
     var lines_regexp = new RegExp(/L(\d+)/g);
     var line = lines_regexp.exec(window.location.hash);
     while (line) {
       lines.push(parseInt(line[1]));
       line = lines_regexp.exec(window.location.hash);
     }
     reset_highlighted_lines();
     if  (lines.length == 1) {
       first_hl_line = parseInt(lines[0]);
       scroll_to_line(highlight_line(lines[0]));
     } else if (lines[0] < lines[lines.length - 1]) {
       first_hl_line = parseInt(lines[0]);
       scroll_to_line(highlight_line(lines[0]));
       for (var i = lines[0]+1; i <= lines[lines.length - 1]; ++i) {
         highlight_line(i);
       }
     }
   }
 
   $(document).ready(function() {
     // highlight code and add line numbers
     $('code').each(function(i, block) {
       hljs.highlightBlock(block);
       hljs.lineNumbersBlock(block);
     });
     // click handler to dynamically highlight line(s)
     // when the user clicks on a line number (lines range
     // can also be highlighted while holding the shift key)
     $('body').click(function(evt) {
       if (evt.target.classList.contains('hljs-ln-n')) {
         var line = parseInt($(evt.target).data('line-number'));
         if (evt.shiftKey && first_hl_line && line > first_hl_line) {
           var first_line = first_hl_line;
           reset_highlighted_lines();
           for (var i = first_line; i <= line; ++i) {
             highlight_line(i);
           }
           first_hl_line = first_line;
           window.location.hash = '#L' + first_line + "-L" + line;
         } else {
           reset_highlighted_lines();
           highlight_line(line);
           window.location.hash = '#L' + line;
           scroll_to_line(evt.target);
         }
       } else {
         reset_highlighted_lines();
         remove_hash();
       }
     });
 
     // update lines highlighting when the url fragment changes
     $(window).on('hashchange', function() {
       parse_url_fragment_for_lines_to_highlight();
     });
 
     // highlight lines specified by an url fragment
     $('.navbar-nav.swh-browse-nav a[href="#browse"]').tab('show');
     parse_url_fragment_for_lines_to_highlight();
-
-    // load content metadata asynchronously
-    $.ajax({
-      url: '{{ content_metadata_url }}',
-      dataType: 'json',
-      success: function (data) {
-        $('th:contains("language")').siblings().children().text(data.language);
-        $('th:contains("licenses")').siblings().children().text(data.licenses);
-      }
-    });
-
   });
 
 </script>
-<link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">
-{% endblock %}
-
-{% block swh-browse-before-panels %}
-{% if origin_context %}
-  {% include "includes/origin-visit-snapshot.html" %}
-{% endif %}
-{% endblock %}
-
-{% block swh-browse-main-panel-content %}
-
-{% include "includes/top-navigation.html" %}
-
-<div class="well well-sm swh-content" style="margin-bottom: 0px">
-{% if "inode/x-empty" == mimetype %}
-<i>File is empty</i>
-{% elif "text/" in mimetype %}
-<div class="highlightjs">
-  <pre>
-    <code class="{{ language }}">{{ content }}</code>
-  </pre>
-</div>
-{% elif "image/" in mimetype and content %}
-  <img src="data:{{ mimetype }};base64,{{ content }}"/>
-{% else %}
-Content with mime type {{ mimetype }} can not be displayed
-{% endif %}
-</div>
-
-{% endblock %}
+<link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">
\ No newline at end of file
diff --git a/swh/web/templates/includes/directory-display.html b/swh/web/templates/includes/directory-display.html
new file mode 100644
index 00000000..ef35c7de
--- /dev/null
+++ b/swh/web/templates/includes/directory-display.html
@@ -0,0 +1,36 @@
+<div class="table-responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>File</th>
+        <th>Mode</th>
+        <th>Size</th>
+        <th>Sha1 git</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for d in dirs %}
+      <tr>
+        <td class="swh-directory">
+          <i class="fa fa-folder fa-fw" aria-hidden="true"></i>
+          <a href="{{ d.url | safe }}">{{ d.name }}</a>
+        </td>
+        <td>{{ d.perms }}</td>
+        <td></td>
+        <td>{{ d.target }}</td>
+      </tr>
+      {% endfor %}
+      {% for f in files %}
+      <tr>
+        <td class="swh-content">
+          <i class="fa fa-file-text fa-fw" aria-hidden="true"></i>
+          <a href="{{ f.url | safe }}">{{ f.name }}</a>
+        </td>
+        <td>{{ f.perms }}</td>
+        <td>{{ f.length }}</td>
+        <td>{{ f.target }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/swh/web/templates/includes/top-navigation.html b/swh/web/templates/includes/top-navigation.html
index fbb9e80d..47bf575e 100644
--- a/swh/web/templates/includes/top-navigation.html
+++ b/swh/web/templates/includes/top-navigation.html
@@ -1,129 +1,119 @@
 
 <div class="swh-browse-top-navigation">
   {% if origin_context %}
     <div class="dropdown" style="float: left;" id="swh-branches-releases-dd">
       <button class="btn btn-md btn-swh dropdown-toggle" type="button" data-toggle="dropdown">
         {% if origin_context.branch %}
           <i class="fa fa-code-fork fa-fw" aria-hidden="true"></i>
           Branch: <strong>{{ origin_context.branch }}</strong>
         {% else %}
           <i class="fa fa-tag fa-fw" aria-hidden="true"></i>
           Release: <strong>{{ origin_context.release }}</strong>
         {% endif %}
         <span class="caret"></span>
       </button>
       <ul class="scrollable-menu dropdown-menu swh-branches-releases">
         <div class="tabbable tabs-top">
           <ul class="nav nav-tabs">
             <li class="active"><a class="swh-branches-switch" data-toggle="tab">Branches</a></li>
             <li><a class="swh-releases-switch" data-toggle="tab">Releases</a></li>
           </ul>
           <div class="tab-content">
             <div class="tab-pane active" id="swh-tab-branches">
               {% for b in origin_context.branches %}
                 <li class="swh-branch">
                   <a href="{{ b.url | safe }}">
                     <i class="fa fa-code-fork fa-fw" aria-hidden="true"></i>
                     {% if b.name == origin_context.branch %}
                       <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                     {% else %}
                       <i class="fa fa-fw" aria-hidden="true"></i>
                     {% endif %}
                     {{ b.name }}
                   </a>
                 </li>
               {% endfor %}
             </div>
             <div class="tab-pane" id="swh-tab-releases">
               {% if origin_context.releases %}
                 {% for r in origin_context.releases %}
                   {% if r.target_type == 'revision' %}
                     <li class="swh-release">
                       <a href="{{ r.url | safe }}">
                         <i class="fa fa-tag fa-fw" aria-hidden="true"></i>
                         {% if r.name == origin_context.release %}
                           <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                         {% else %}
                           <i class="fa fa-fw" aria-hidden="true"></i>
                         {% endif %}
                         {{ r.name }}
                       </a>
                     </li>
                   {% endif %}
                 {% endfor %}
               {% else %}
                 <span>No releases to show</span>
               {% endif %}
             </div>
           </div>
         </div>
       </ul>
     </div>
   {% endif %}
 
   {% if top_right_link %}
     <a href="{{ top_right_link | safe }}" class="btn btn-md btn-swh pull-right" role="button">{{ top_right_link_text }}</a>
   {% endif %}
 
-  <nav class="bread-crumbs swh-browse-bread-crumbs">
-    <ul>
-      {% for bc in breadcrumbs %}
-        {% if bc.url %}
-          <li class="swh-path"><a href="{{ bc.url | safe }}">{{ bc.name }}</a></li>
-          <li>/</li>
-        {% else %}
-          <li>{{ bc.name }}</li>
-        {% endif %}
-      {% endfor %}
-    </ul>
-  </nav>
+  {% include "includes/breadcrumbs.html" %}
+
 </div>
 
 <script>
 
   function setBranchesTabActive() {
     $('.swh-releases-switch').parent().removeClass('active');
     $('.swh-branches-switch').parent().addClass('active');
     $('#swh-tab-releases').removeClass('active');
     $('#swh-tab-branches').addClass('active');
   }
 
   function setReleasesTabActive() {
     $('.swh-branches-switch').parent().removeClass('active');
     $('.swh-releases-switch').parent().addClass('active');
     $('#swh-tab-branches').removeClass('active');
     $('#swh-tab-releases').addClass('active');
   }
 
   $('.dropdown-menu a.swh-branches-switch').click(function(e) {
     setBranchesTabActive();
     e.stopPropagation();
   });
 
   $('.dropdown-menu a.swh-releases-switch').click(function(e) {
     setReleasesTabActive();
     e.stopPropagation();
   });
 
   var dd_resized = false;
 
   // hack to resize the branches/releases dropdown content,
   // taking icons into account, in order to make the whole names readable
   $('#swh-branches-releases-dd').on('show.bs.dropdown', function () {
     if (dd_resized) return;
     var dd_width = $('.swh-branches-releases').width();
     $('.swh-branches-releases').width(dd_width + 25);
     dd_resized = true;
   })
 
   $(document).ready(function() {
     {% if origin_context %}
       if ('{{ origin_context.branch }}' != 'None') {
         setBranchesTabActive();
       } else {
         setReleasesTabActive();
       }
     {% endif %}
   });
 
 </script>
diff --git a/swh/web/templates/revision.html b/swh/web/templates/revision.html
index 5ae72cbd..88e835fd 100644
--- a/swh/web/templates/revision.html
+++ b/swh/web/templates/revision.html
@@ -1,20 +1,40 @@
 {% extends "browse.html" %}
 
+{% if content %}
+{% block header %}
+  {% include "includes/content-scripts.html" %}
+{% endblock %}
+{% endif %}
+
 {% block swh-browse-before-panels %}
 {% if origin_context %}
   {% include "includes/origin-visit-snapshot.html" %}
 {% endif %}
 {% endblock %}
 
 {% block swh-browse-main-panel-content %}
 <div style="height: 35px;margin: 4px;">
 <i class="octicon octicon-git-commit fa-fw"></i>Revision <b>{{ swh_object_metadata.id }}</b> authored by {{ swh_object_metadata.author }} on <b>{{ swh_object_metadata.date }}</b>
-{{ browse_files_button }}
 </div>
 <pre style="white-space: pre-wrap">
 <h2>{{ message_header }}</h2>{{ message_body }}
 </pre>
-<div style="margin: 4px;">
+<div style="margin: 4px; padding-bottom: 5px;">
 {{ parents_links }}
 </div>
+
+<div style="padding-bottom:5px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;">
+{% include "includes/breadcrumbs.html" %}
+</div>
+
+{% if content %}
+
+{% include "includes/content-display.html" %}
+
+{% else %}
+
+{% include "includes/directory-display.html" %}
+
+{% endif %}
+
 {% endblock %}
\ No newline at end of file