diff --git a/swh/web/ui/static/css/style.css b/swh/web/ui/static/css/style.css
index 9d6eb051b..52924067e 100644
--- a/swh/web/ui/static/css/style.css
+++ b/swh/web/ui/static/css/style.css
@@ -1,178 +1,195 @@
 /*
 version:   0.1
 date:      21/09/15
 author:    swh
 email:     swh
 website:   softwareheritage.org
 version history: /style.css
 */
 
 @import url(https://fonts.googleapis.com/css?family=Alegreya:400,400italic,700,700italic);
 @import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400italic,500,500italic,700,700italic,100,300,100italic,300italic);
 
 body {
     font-family: 'Alegreya Sans', sans-serif;
     font-size: 1.6rem;
     line-height: 1.5;
     color: rgba(0, 0, 0, 0.55);
     padding-top: 65px;  /* avoid fixed bootstrap navbar covers content */
 }
 
 .heading {
     font-family: 'Alegreya', serif;
 }
 
 .shell, .text {
     font-size: 0.7em;
 }
 
 img.swh-logo {
     max-height: 40px;
 }
 
 .jumbotron {
     padding: 0;
     background-color: rgba(0, 0, 0, 0);
     position: fixed;
     top: 0;
     width: 100%;
 }
 
 #swh-navbar-collapse {
     border-top-style: none;
     border-bottom: 5px solid;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
 }
 
 .nav-horizontal {
     float: right;
 }
 
 h3[id] {  /* avoid in-page links covered by navbar */
     padding-top: 65px;
     margin-top: -65px;
     display: inline-block; /* webkit compatibility */
 }
 
 a               { color: #377ba8; }
 h1, h2, h3, h4  { margin: 0;
                   color: #e20026;
                 }
 h1              { font-size: 1.8em; }
 h2              { font-size: 1.2em; }
 
 a               {
                   color: rgba(0, 0, 0, 0.75);
                   border-bottom-style: dotted;
                   border-bottom-width: 1px;
                   border-bottom-color: rgb(91, 94, 111);
                 }
 
 a:hover         {
                   color: black;
                 }
 
 ul.dropdown-menu > li > a,
 ul.dropdown-menu > li > ul > li > a,
 .navbar-header > a,
 ul.navbar-nav > li > a { /* No decoration on links in dropdown menu */
                   border-bottom-style: none;
                 }
 
 .navbar-header > a,
 ul.navbar-nav > li > a {
     color: #323232;
     font-weight: 700;
 }
 
 .navbar-header > a:hover,
 ul.navbar-nav > li > a:hover {
     color: #8f8f8f;
 }
 
 .sitename .first-word, .sitename .second-word {
     font-weight: normal;
     font-size: 1.8rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 ul.dropdown-menu > li,
 ul.dropdown-menu > li > ul > li { /* No decoration on bullet points in dropdown menu */
                   list-style-type: none;
                 }
 
 .page           { margin: 2em auto; width: 35em; border: 5px solid #ccc;
                   padding: 0.8em; background: white; }
 .entries        { list-style: none; margin: 0; padding: 0; }
 .entries li     { margin: 0.8em 1.2em; }
 .entries li h2  { margin-left: -1em; }
 .add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
 .add-entry dl   { font-weight: bold; }
 .metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
                   margin-bottom: 1em; background: #fafafa; }
 .flash          { background: #cee5F5; padding: 0.5em;
                   border: 1px solid #aacbe2; }
 .error          { background: #f0d6d6; padding: 0.5em; }
 
 .file-found     { color: #23BA49; }
 .file-notfound  { color: #FF4747; }
 
 /* Bootstrap custom styling to correctly render multiple
  * form-controls in an input-group:
  *                github.com/twbs/bootstrap/issues/12732 */
 
 .input-group-field {
     display: table-cell;
     vertical-align: middle;
     border-radius:4px;
     min-width:1%;
     white-space: nowrap;
 }
 
 .input-group-field .form-control {
     border-radius: inherit !important;
 }
 
 .input-group-field:not(:first-child):not(:last-child) {
     border-radius:0;
 }
 
 .input-group-field:not(:first-child):not(:last-child) .form-control {
     border-left-width: 0;
     border-right-width: 0;
 }
 
 .input-group-field:last-child {
     border-top-left-radius:0;
     border-bottom-left-radius:0;
 }
 
 .input-group > span:not(:last-child) > button {
    border-radius: 0;
 }
 
 .multi-input-group > .input-group-btn {
   vertical-align: bottom;
   padding: 0;
 }
 
 .dataTables_filter input {
     width: 70%;
     float: right;
 }
 
 .api-doc-route-upcoming h4 {
     color: orange;
 }
 
 .api-doc-route-deprecated h4 {
     color: red;
 }
+
+#back-to-top {
+  display: initial;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 10;
+}
+
+#back-to-top a img {
+  display: block;
+  width: 32px;
+  height: 32px;
+  background-size: 32px 32px;
+  text-indent: -999px;
+  overflow: hidden;
+}
diff --git a/swh/web/ui/static/img/arrow-up-small.png b/swh/web/ui/static/img/arrow-up-small.png
new file mode 100644
index 000000000..8c90a4b39
Binary files /dev/null and b/swh/web/ui/static/img/arrow-up-small.png differ
diff --git a/swh/web/ui/templates/layout.html b/swh/web/ui/templates/layout.html
index 7e764c04d..8105703f6 100644
--- a/swh/web/ui/templates/layout.html
+++ b/swh/web/ui/templates/layout.html
@@ -1,76 +1,80 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock %} - The Software Heritage Archive</title>
     <!-- BEGIN: bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css') }}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
     <!-- END: bootstrap -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/pygment.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}">
     <script src="{{ url_for('static', filename='lib/jquery.dataTables.min.js') }}"></script>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
     <script>document.domain = "softwareheritage.org";</script>
 
   </head>
   <body>
+    <a id="top"></a>
     <div class="jumbotron">
       <nav class="navbar navbar-default" id="swh-navbar-collapse">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed"
                   data-toggle="collapse" data-target="#swh-navbar-collapse" aria-expanded="false"> <!-- screen-reader -->
 	    <span class="sr-only">Toggle navigation menu</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" style="padding:5px" href="{{ url_for('homepage') }}"> <!-- logo -->
             <img alt="SWH Archive" src="{{ url_for('static', filename='img/swh-logo.png') }}" class="swh-logo" />
           </a>
           <a class="navbar-brand sitename" href="https://www.softwareheritage.org">
             <span class="first-word">Software</span> <span class="second-word">Heritage</span>
           </a>
         </div>
 
         <nav class="nav nav-horizontal">
           <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
               <li role="separator" class="divider"></li>
               <li><a href="{{ url_for('browse') }}">Browse</a></li>
               <li role="separator" class="divider"></li>
               <li><a href="{{ url_for('browse_api_doc') }}" class="dropdown-toggle" data-toggle="dropdown"
                      role="button" aria-haspopup="true" aria-expanded="false">API <span class="caret"></span></a>
                 <ul class="dropdown-menu">
                   {% include 'includes/apidoc-header-toc.html' %}
                 </ul>
               </li>
               <li role="separator" class="divider"></li>
               <li><a href="{{ url_for('about') }}">About</a></li>
             </ul>
           </div>
         </nav>
       </nav>
     </div>
     <div class="container">
       <h1>{{ self.title() }}</h1>
       {% with messages = get_flashed_messages(with_categories=true) %}
       {% if messages %}
       <div class="container messages">
         {% for category, message in messages %}
         <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
         {% endfor %}
       </div>
       {% endif %}
       {% endwith %}
       <div class="container content">
         {% block content %}{% endblock %}
       </div>
-     </div>
+    </div>
+    <div id="back-to-top">
+      <a href="#top"><img alt="back to top" src="{{ url_for('static', filename='img/arrow-up-small.png') }}" /></a>
+    </div>
   </body>
 </html>