diff --git a/physionet-django/project/static/project/js/dynamic-files-panel.js b/physionet-django/project/static/project/js/dynamic-files-panel.js
new file mode 100644
index 0000000000..902f750f48
--- /dev/null
+++ b/physionet-django/project/static/project/js/dynamic-files-panel.js
@@ -0,0 +1,38 @@
+(function() {
+    'use strict';
+
+    var panel = $('#files-panel');
+    var cur_dir = panel.find('[data-dfp-cur-dir]').data('dfp-cur-dir');
+    var panel_url = panel.find('[data-dfp-panel-url]').data('dfp-panel-url');
+
+    function navigateDir(subdir, page_url, push_history) {
+        $.ajax({
+            type: 'GET',
+            url: panel_url,
+            data: {'subdir': subdir, 'v': '2'},
+            success: function(result) {
+                if (push_history)
+                    history.pushState(subdir, '', page_url);
+                else
+                    history.replaceState(subdir, '', page_url);
+                panel.html(result);
+                setClickHandlers();
+            },
+        });
+    }
+
+    function setClickHandlers() {
+        panel.find('a[data-dfp-dir]').click(function(event) {
+            navigateDir($(this).data('dfp-dir'), this.href, true);
+            event.preventDefault();
+        });
+    }
+    setClickHandlers();
+
+    window.onpopstate = function(event) {
+        if (event.state !== null) {
+            navigateDir(event.state, window.location, false);
+        }
+    };
+    history.replaceState(cur_dir, '');
+})();
diff --git a/physionet-django/project/templates/project/files_panel.html b/physionet-django/project/templates/project/files_panel.html
index f4875a9f29..5caff7f0dd 100644
--- a/physionet-django/project/templates/project/files_panel.html
+++ b/physionet-django/project/templates/project/files_panel.html
@@ -1,3 +1,4 @@
+{# Note: This template is obsolescent. Use files_panel_v2 instead. #}
 <div class="card-header">
   Folder Navigation:
   {% spaceless %}
diff --git a/physionet-django/project/templates/project/files_panel_v2.html b/physionet-django/project/templates/project/files_panel_v2.html
new file mode 100644
index 0000000000..be59e07d75
--- /dev/null
+++ b/physionet-django/project/templates/project/files_panel_v2.html
@@ -0,0 +1,75 @@
+{# Note: This template is used together with dynamic-files-panel.js. #}
+<div class="card-header"
+     data-dfp-panel-url="{{ files_panel_url }}"
+     data-dfp-cur-dir="{{ subdir }}">
+  Folder Navigation:
+  {% spaceless %}
+    <span class="dir-breadcrumbs">
+      {% for breadcrumb in dir_breadcrumbs %}
+        {% if forloop.counter == dir_breadcrumbs|length %}
+          <span class="dir-breadcrumb-self">{{ breadcrumb.name }}</span>
+        {% else %}
+          <a href="{{ breadcrumb.rel_path }}#files-panel"
+             data-dfp-dir="{{ breadcrumb.full_subdir }}"
+             class="dir-breadcrumb-up">{{ breadcrumb.name }}</a>
+          <span class="dir-breadcrumb-sep">/</span>
+        {% endif %}
+      {% endfor %}
+    </span>
+  {% endspaceless %}
+</div>
+{% if file_error %}
+<div class="card-body">
+  <div class="alert alert-danger" role="alert">
+    {{ file_error|safe }}
+  </div>
+</div>
+{% else %}
+  {% if file_warning %}
+    <div class="card-body">
+      <div class="alert alert-warning" role="alert">
+        {{ file_warning|safe }}
+      </div>
+    </div>
+  {% endif %}
+<table class="files-panel">
+  <col class="files-panel-name"></col>
+  <col class="files-panel-size"></col>
+  <col class="files-panel-date"></col>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Size</th>
+      <th>Modified</th>
+    </tr>
+  </thead>
+  <tbody>
+  {% if subdir %}
+    <tr class="parentdir">
+      <td><a href="../#files-panel" data-dfp-dir="{{ parent_dir }}">Parent Directory</a></td>
+      <td></td>
+      <td></td>
+    </tr>
+  {% endif %}
+  {% for dir in display_dirs %}
+    <tr class="subdir">
+      <td><a href="{{ dir.name }}/#files-panel" data-dfp-dir="{{ dir.full_subdir }}">{{ dir.name }}</a></td>
+      <td></td>
+      <td></td>
+    </tr>
+  {% endfor %}
+  {% for file in display_files %}
+    <tr>
+      <td><a href="{{ file.name }}">{{ file.name }}</a>
+        <a class="download" href="{{ file.download_url }}"
+           title="Download {{ file.name }}">
+          <span class="visually-hidden">(download)</span>
+        </a>
+      </td>
+      <td>{{ file.size }}</td>
+      <td>{{ file.last_modified }}</td>
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% endif %}
diff --git a/physionet-django/project/templates/project/project_preview.html b/physionet-django/project/templates/project/project_preview.html
index ee5a711345..7a65407beb 100644
--- a/physionet-django/project/templates/project/project_preview.html
+++ b/physionet-django/project/templates/project/project_preview.html
@@ -236,7 +236,7 @@ <h2>Files</h2>
     {% endif %}
   {% endif %}
   <div id="files-panel" class="card">
-    {% include "project/files_panel.html" %}
+    {% include "project/files_panel_v2.html" %}
   </div>
   <br>
 
@@ -244,6 +244,7 @@ <h2>Files</h2>
 {% endblock %}
 
 {% block local_js_bottom %}
+<script src="{% static 'project/js/dynamic-files-panel.js' %}"></script>
 <script src="{% static 'custom/js/enable-popover.js' %}"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}
diff --git a/physionet-django/project/templates/project/published_project.html b/physionet-django/project/templates/project/published_project.html
index cba490d00e..3ec8ddccd7 100644
--- a/physionet-django/project/templates/project/published_project.html
+++ b/physionet-django/project/templates/project/published_project.html
@@ -442,7 +442,7 @@ <h5>Access the files</h5>
         {% endif %}
 
         <div id="files-panel" class="card">
-          {% include "project/files_panel.html" %}
+          {% include "project/files_panel_v2.html" %}
         </div>
       {% else %}
         {% include "project/published_project_denied_downloads.html" %}
@@ -472,6 +472,7 @@ <h5>Access the files</h5>
 {% endblock %}
 
 {% block local_js_bottom %}
+  <script src="{% static 'project/js/dynamic-files-panel.js' %}"></script>
   <script src="{% static 'custom/js/enable-popover.js' %}"></script>
   <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}
diff --git a/physionet-django/project/views.py b/physionet-django/project/views.py
index 2d4688464a..a680ab43f5 100644
--- a/physionet-django/project/views.py
+++ b/physionet-django/project/views.py
@@ -1151,7 +1151,12 @@ def preview_files_panel(request, project_slug, **kwargs):
     file_warning = get_project_file_warning(display_files, display_dirs,
                                               subdir)
 
-    return render(request, 'project/files_panel.html',
+    if request.GET.get('v', '1') == '1':
+        template = 'project/files_panel.html'
+    else:
+        template = 'project/files_panel_v2.html'
+
+    return render(request, template,
         {'project':project, 'subdir':subdir, 'file_error':file_error,
          'dir_breadcrumbs':dir_breadcrumbs, 'parent_dir':parent_dir,
          'display_files':display_files, 'display_dirs':display_dirs,
@@ -1574,7 +1579,12 @@ def published_files_panel(request, project_slug, version):
         files_panel_url = reverse('published_files_panel',
             args=(project.slug, project.version))
 
-        return render(request, 'project/files_panel.html',
+        if request.GET.get('v', '1') == '1':
+            template = 'project/files_panel.html'
+        else:
+            template = 'project/files_panel_v2.html'
+
+        return render(request, template,
             {'project':project, 'subdir':subdir,
              'dir_breadcrumbs':dir_breadcrumbs, 'parent_dir':parent_dir,
              'display_files':display_files, 'display_dirs':display_dirs,