diff --git a/lookyloo/lookyloo.py b/lookyloo/lookyloo.py
index e9a29ec4..0946a323 100644
--- a/lookyloo/lookyloo.py
+++ b/lookyloo/lookyloo.py
@@ -1046,10 +1046,10 @@ class Lookyloo():
                    for domain, freq in self.indexing.get_cookie_domains(cookie_name)]
         return captures, domains
 
-    def get_favicon_investigator(self, favicon_sha512: str, /) -> tuple[list[tuple[str, str, str]], bytes | None]:
+    def get_favicon_investigator(self, favicon_sha512: str, /) -> tuple[list[tuple[str, str, str, datetime]], bytes | None]:
         '''Returns all the captures related to a cookie name entry, used in the web interface.'''
         cached_captures = self.sorted_capture_cache([uuid for uuid in self.indexing.get_captures_favicon(favicon_sha512)])
-        captures = [(cache.uuid, cache.title, cache.redirects[-1]) for cache in cached_captures]
+        captures = [(cache.uuid, cache.title, cache.redirects[-1], cache.timestamp) for cache in cached_captures]
         favicon = self.indexing.get_favicon(favicon_sha512)
         return captures, favicon
 
diff --git a/website/web/templates/body_hash.html b/website/web/templates/body_hash.html
index 6c5ed479..94a8550e 100644
--- a/website/web/templates/body_hash.html
+++ b/website/web/templates/body_hash.html
@@ -1,3 +1,4 @@
+{% if from_popup %}
 {% extends "main.html" %}
 
 {% from 'bootstrap5/utils.html' import render_messages %}
@@ -13,53 +14,59 @@
     });
 </script>
 
-{% if from_popup %}
 <script type="text/javascript">
     function openTreeInNewTab(treeUUID) {
         window.opener.openTreeInNewTab(treeUUID);
     };
 </script>
-{% endif %}
 
 {% endblock %}
+{%endif%}
 
 {% block content %}
-  <center>
-      <h4>{{ body_hash }}</h4>
-      {% if from_popup %}
-      <button onclick="window.history.back();" class="btn btn-primary" type="button">Go Back</button>
-      {% endif %}
-  </center>
-  <div class="table-responsive">
-  <table id="table" class="table" style="width:96%">
-    <thead>
-     <tr>
-       <th>Hostname</th>
-       <th>Frequency</th>
-     </tr>
-    </thead>
-    <tbody>
-      {% for domain, freq in domains %}
-      <tr>
-        <td>
-          {{ domain }}
-        </td>
-        <td>{{ freq }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-  </div>
-  <p>The same file was seen in these captures:</p>
-  <ul>
-  {% for capture_uuid, title in captures %}
-    <li>
-      {% if from_popup %}
-      <a href="#/" onclick="openTreeInNewTab('{{ capture_uuid }}')">{{ title }}</a>
-      {% else %}
-      <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}")">{{ title }}</a>
-      {% endif %}
-    </li>
-  {% endfor %}
-  </ul>
+
+{% if from_popup %}
+<button onclick="window.history.back();" class="btn btn-primary" type="button">Go Back</button>
+{%endif%}
+
+<script type="text/javascript">
+  new DataTable('#bodyHashDetailsTable', {
+    columnDefs: [{ width: '20%', targets: 0 },
+                 { width: '80%', targets: 1 }],
+  });
+</script>
+<center>
+    <h4>{{ body_hash }}</h4>
+</center>
+<table id="bodyHashDetailsTable" class="table table-striped" style="width:100%">
+  <thead>
+   <tr>
+     <th>Hostname</th>
+     <th>Frequency</th>
+   </tr>
+  </thead>
+  <tbody>
+    {% for domain, freq in domains %}
+    <tr>
+      <td>
+        {{ domain }}
+      </td>
+      <td>{{ freq }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+</div>
+<p>The same file was seen in these captures:</p>
+<ul>
+{% for capture_uuid, title in captures %}
+  <li>
+    {% if from_popup %}
+    <a href="#/" onclick="openTreeInNewTab('{{ capture_uuid }}')">{{ title }}</a>
+    {% else %}
+    <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}">{{ title }}</a>
+    {% endif %}
+  </li>
+{% endfor %}
+</ul>
 {% endblock %}
diff --git a/website/web/templates/favicon_details.html b/website/web/templates/favicon_details.html
index 9c5ed277..bcdd1cd4 100644
--- a/website/web/templates/favicon_details.html
+++ b/website/web/templates/favicon_details.html
@@ -1,39 +1,37 @@
-{% extends "main.html" %}
+<script type="text/javascript">
+  new DataTable('#faviconDetailsTable', {
+    columnDefs: [{ width: '40%', targets: 0 },
+                 { width: '40%', targets: 1 },
+                 { width: '20%', targets: 2 }],
+  });
+</script>
 
-{% from 'bootstrap5/utils.html' import render_messages %}
-
-{% block title %}Favicon: {{ favicon_sha512 }}{% endblock %}
-
-{% block content %}
-  <center>
-      <h2>{{ favicon_sha512 }}</h2>
-      <img src="data:image/ico;base64,{{ b64_favicon }}" style="width:32px;height:32px;"/>
-  </center>
-  <p>The same favicon was seen in these captures:</p>
-  <ul>
-  <div class="table-responsive">
-      <table id="table" class="table">
-          <thead>
-              <tr>
-                  <th>Capture Title</th>
-                  <th>Landing page</th>
-              </tr>
-          </thead>
-          <tbody>
-            {% for capture_uuid, title, landing_page in captures %}
-            <tr>
-                <td>
-                    <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}">
-                        {{ title }}
-                    </a>
-                </td>
-                <td>
-                    {{landing_page}}
-                </td>
-            </tr>
-            {% endfor %}
-          </tbody>
-      </table>
-  </div>
-  </ul>
-{% endblock %}
+<center>
+  <img src="data:image/ico;base64,{{ b64_favicon }}" style="width:64px;height:64px;"/>
+</center>
+<table id="faviconDetailsTable" class="table table-striped" style="width:100%">
+  <thead>
+    <tr>
+      <th>Capture Title</th>
+      <th>Landing page</th>
+      <th>Capture Time</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for capture_uuid, title, landing_page, capture_time in captures %}
+    <tr>
+      <td>
+        <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}">
+          {{ title }}
+        </a>
+      </td>
+      <td>
+        {{landing_page}}
+      </td>
+      <td>
+        {{capture_time}}
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
diff --git a/website/web/templates/historical_lookups.html b/website/web/templates/historical_lookups.html
index 005f8a1b..d4fddaee 100644
--- a/website/web/templates/historical_lookups.html
+++ b/website/web/templates/historical_lookups.html
@@ -4,68 +4,75 @@
 {% if not circl_pdns and not riskiq %}
   No historical data available
 {%else%}
-{% if circl_pdns %}
-  <center>
-    <h1 class="display-4">CIRCL Passive DNS
-     <div class="help-tip" title="Click for more details"
-          onclick="location.href='https://www.circl.lu/services/passive-dns/';"
-          style="cursor: pointer;">
-     </div>
-    </h1>
-  {% for query, responses in circl_pdns.items() if responses %}
-  <div>
-    <h3>{{query}}</h3>
-    <table class="table">
+  {% if circl_pdns %}
+    <script type="text/javascript">
+      new DataTable('#CIRCL_pdns_table');
+    </script>
+
+    <center>
+      <h1 class="display-4">CIRCL Passive DNS
+       <div class="help-tip" title="Click for more details"
+            onclick="location.href='https://www.circl.lu/services/passive-dns/';"
+            style="cursor: pointer;">
+       </div>
+      </h1>
+    {% for query, responses in circl_pdns.items() if responses %}
+    <div>
+      <h3>{{query}}</h3>
+      <table id= "CIRCL_pdns_table" class="table table-striped" style="width:100%">
+        <thead>
+          <tr>
+            <th class="col-sm-2" scope="col">First seen</th>
+            <th class="col-sm-2" scope="col">Last seen</th>
+            <th class="col-sm-1" scope="col">RR Type</th>
+            <th class="col-sm-2" scope="col">R Data</th>
+            <th scope="col">RR Name</th>
+        </thead>
+        <tbody>
+          {%for response in responses %}
+          <tr>
+            <td>{{response.time_first_datetime}}</td>
+            <td>{{response.time_last_datetime}}</td>
+            <td>{{response.rrtype}}</td>
+            <td>{{response.rdata}}</td>
+            <td>{{response.rrname}}</td>
+          </tr>
+          {% endfor %}
+      </table>
+    </div>
+    {%endfor%}
+    </center>
+  {% endif%}
+  {% if riskiq %}
+    <hr>
+    <script type="text/javascript">
+      new DataTable('#RiskIQ_pdns_table');
+    </script>
+    <center>
+      <h1 class="display-4">RiskIQ</h1>
+    <div>
+    <h3>{{riskiq['queryValue']}}</h3>
+    <h4>{{riskiq['firstSeen']}} - {{ riskiq['lastSeen']}}</h4>
+    <table id="RiskIQ_pdns_table" class="table table-striped" style="width:100%">
       <thead>
         <tr>
           <th class="col-sm-2" scope="col">First seen</th>
           <th class="col-sm-2" scope="col">Last seen</th>
-          <th class="col-sm-1" scope="col">RR Type</th>
-          <th class="col-sm-2" scope="col">R Data</th>
-          <th scope="col">RR Name</th>
+          <th class="col-sm-1" scope="col">Type</th>
+          <th scope="col">Resolve</th>
       </thead>
       <tbody>
-        {%for response in responses %}
+        {% for entry in riskiq['results'] %}
         <tr>
-          <td>{{response.time_first_datetime}}</td>
-          <td>{{response.time_last_datetime}}</td>
-          <td>{{response.rrtype}}</td>
-          <td>{{response.rdata}}</td>
-          <td>{{response.rrname}}</td>
+          <td>{{entry['firstSeen']}}</td>
+          <td>{{entry['lastSeen']}}</td>
+          <td>{{entry['recordType']}}</td>
+          <td>{{entry['resolve']}}</td>
         </tr>
         {% endfor %}
     </table>
-  </div>
-  {%endfor%}
-  </center>
-{% endif%}
-{% if riskiq %}
-  <hr>
-  <center>
-    <h1 class="display-4">RiskIQ</h1>
-  <div>
-  <h3>{{riskiq['queryValue']}}</h3>
-  <h4>{{riskiq['firstSeen']}} - {{ riskiq['lastSeen']}}</h4>
-  <table class="table">
-    <thead>
-      <tr>
-        <th class="col-sm-2" scope="col">First seen</th>
-        <th class="col-sm-2" scope="col">Last seen</th>
-        <th class="col-sm-1" scope="col">Type</th>
-        <th scope="col">Resolve</th>
-    </thead>
-    <tbody>
-      {% for entry in riskiq['results'] %}
-      <tr>
-        <td>{{entry['firstSeen']}}</td>
-        <td>{{entry['lastSeen']}}</td>
-        <td>{{entry['recordType']}}</td>
-        <td>{{entry['resolve']}}</td>
-      </tr>
-      {% endfor %}
-  </table>
-  </div>
-  </center>
-{% endif%}
+    </div>
+    </center>
+  {% endif%}
 {% endif%}
 </div>
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html
index 6fda14eb..955ee829 100644
--- a/website/web/templates/tree.html
+++ b/website/web/templates/tree.html
@@ -91,6 +91,13 @@
   });
   </script>
   <script>
+  $('#faviconDetailsModal').on('show.bs.modal', function(e) {
+      var button = $(e.relatedTarget);
+      var modal = $(this);
+      modal.find('.modal-body').load(button.data("remote"));
+  });
+  </script>
+  <script>
   $('#bodyHashesModal').on('show.bs.modal', function(e) {
       var button = $(e.relatedTarget);
       var modal = $(this);
@@ -98,6 +105,13 @@
   });
   </script>
   <script>
+  $('#bodyHashDetailsModal').on('show.bs.modal', function(e) {
+      var button = $(e.relatedTarget);
+      var modal = $(this);
+      modal.find('.modal-body').load(button.data("remote"));
+  });
+  </script>
+  <script>
   $('#mispPushModal').on('show.bs.modal', function(e) {
       var button = $(e.relatedTarget);
       var modal = $(this);
@@ -537,6 +551,26 @@
   </div>
 </div>
 
+<div class="modal fade" id="faviconDetailsModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-xl" role="document">
+      <div class="modal-content">
+          <div class="modal-header">
+              <h5 class="modal-title" id="faviconDetailsModalLabel">Other occurrences of the favicon</h5>
+              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+              ... loading favicon details ...
+          </div>
+          <div class="modal-footer">
+              <a class="btn btn-primary" href="#faviconsModal"
+                 data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
+                 data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button">Back to capture's favicons</a>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+      </div>
+  </div>
+</div>
+
 <div class="modal fade" id="bodyHashesModal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-xl" role="document">
       <div class="modal-content">
@@ -554,6 +588,26 @@
   </div>
 </div>
 
+<div class="modal fade" id="bodyHashDetailsModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-xl" role="document">
+      <div class="modal-content">
+          <div class="modal-header">
+              <h5 class="modal-title" id="bodyHashDetailsModalLabel">Other occurrences of the ressource</h5>
+              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+              ... loading ressource details ...
+          </div>
+          <div class="modal-footer">
+              <a class="btn btn-primary" href="#bodyHashesModal"
+                 data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}"
+                 data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button">Back to capture's ressources</a>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+      </div>
+  </div>
+</div>
+
 <div class="modal fade" id="mispPushModal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-xl" role="document">
       <div class="modal-content">
diff --git a/website/web/templates/tree_body_hashes.html b/website/web/templates/tree_body_hashes.html
index d13d1ad9..ea51a431 100644
--- a/website/web/templates/tree_body_hashes.html
+++ b/website/web/templates/tree_body_hashes.html
@@ -1,35 +1,13 @@
 <script type="text/javascript">
-    $('#bodyHashesTable')
-        .on('order.dt', () =>  {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .on('search.dt', () => {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .on('page.dt', () => {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .DataTable( {
-          "order": [[ 1, "desc" ]],
-          "pageLength": 50
-        });
+  new DataTable('#bodyHashesTable', {
+    columnDefs: [{ width: '10%', targets: 0 },
+                 { width: '10%', targets: 1 },
+                 { width: '60%', targets: 2 },
+                 { width: '20%', targets: 3 }],
+  });
 </script>
 
-{% if from_popup %}
-<script type="text/javascript">
-    function openTreeInNewTab(treeUUID) {
-        window.opener.openTreeInNewTab(treeUUID);
-    };
-</script>
-{% endif %}
-
-<table id="bodyHashesTable" class="table w-auto">
+<table id="bodyHashesTable" class="table table-striped" style="width:100%">
 <thead>
  <tr>
    <th>File type</th>
@@ -60,7 +38,10 @@
     <td><p class="text-break">{{ info['node'].name }}</p></td>
     <td>
       <span class="d-inline-block text-truncate" style="max-width: 200px;">
-        <a href="{{ url_for('body_hash_details', body_hash=body_hash) }}">{{body_hash}}</a>
+         <a href="#bodyHashDetailsModal" data-remote="{{ url_for('body_hash_details', body_hash=body_hash) }}"
+            data-bs-toggle="modal" data-bs-target="#bodyHashDetailsModal" role="button">
+            {{body_hash}}
+         </a>
       </span>
     </td>
   </tr>
diff --git a/website/web/templates/tree_favicons.html b/website/web/templates/tree_favicons.html
index b0342e56..c734b472 100644
--- a/website/web/templates/tree_favicons.html
+++ b/website/web/templates/tree_favicons.html
@@ -1,35 +1,12 @@
 <script type="text/javascript">
-    $('#faviconsTable')
-        .on('order.dt', () =>  {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .on('search.dt', () => {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .on('page.dt', () => {
-            $(function () {
-              $('[data-bs-toggle="tooltip"]').tooltip()
-            })
-        })
-        .DataTable( {
-          "order": [[ 1, "desc" ]],
-          "pageLength": 50
-        });
+  new DataTable('#faviconsTable', {
+    columnDefs: [{ width: '20%', targets: 0 },
+                 { width: '40%', targets: 1 },
+                 { width: '40%', targets: 2 }],
+  });
 </script>
 
-{% if from_popup %}
-<script type="text/javascript">
-    function openTreeInNewTab(treeUUID) {
-        window.opener.openTreeInNewTab(treeUUID);
-    };
-</script>
-{% endif %}
-
-<table id="faviconsTable" class="table w-auto">
+<table id="faviconsTable" class="table table-striped" style="width:100%">
 <thead>
  <tr>
    <th>Favicon</th>
@@ -41,7 +18,8 @@
   {% for favicon_sha512, freq, number_captures, b64_favicon in favicons %}
   <tr>
     <td>
-      <a href="{{ url_for('favicon_detail', favicon_sha512=favicon_sha512) }}">
+      <a href="#faviconDetailsModal" data-remote="{{ url_for('favicon_detail', favicon_sha512=favicon_sha512) }}"
+         data-bs-toggle="modal" data-bs-target="#faviconDetailsModal" role="button">
         <img src="data:image/ico;base64,{{ b64_favicon }}" style="width:32px;height:32px;"/>
       </a>
     </td>