diff --git a/website/web/templates/identifier_details.html b/website/web/templates/identifier_details.html
new file mode 100644
index 00000000..f34b9b26
--- /dev/null
+++ b/website/web/templates/identifier_details.html
@@ -0,0 +1,49 @@
+{% from "macros.html" import shorten_string %}
+
+<script type="text/javascript">
+  new DataTable('#identifierDetailsTable_{{favicon_sha512}}', {
+    order: [[ 0, "desc" ]],
+    columnDefs: [{ width: '30%',
+                   targets: 0,
+                   render: (data) => {
+                    const date = new Date(data);
+                    return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
+                   }
+                 },
+                 { width: '30%', targets: 1 },
+                 { width: '50%', targets: 2 }],
+
+  });
+</script>
+
+<center>
+  <h5>{{identifier_type}}: {{identifier}}</h5>
+</center>
+<table id="identifierDetailsTable" class="table table-striped" style="width:100%">
+  <thead>
+    <tr>
+      <th>Capture Time</th>
+      <th>Capture Title</th>
+      <th>Landing page</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for capture_uuid, title, landing_page, capture_time in captures %}
+    <tr>
+      <td>
+        {{capture_time}}
+      </td>
+      <td>
+        <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}">
+          {{ title }}
+        </a>
+      </td>
+      <td>
+        <span class="d-inline-block text-break" style="max-width: 400px;">
+          {{ landing_page }}
+        </span>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
diff --git a/website/web/templates/tree_identifiers.html b/website/web/templates/tree_identifiers.html
new file mode 100644
index 00000000..c7fd6ab7
--- /dev/null
+++ b/website/web/templates/tree_identifiers.html
@@ -0,0 +1,34 @@
+<script type="text/javascript">
+  new DataTable('#faviconsTable', {
+    columnDefs: [{ width: '10%', targets: 0 },
+                 { width: '40%', targets: 1 },
+                 { width: '40%', targets: 2 },
+                 { width: '10%', targets: 3 }],
+  });
+</script>
+
+
+<h5 class="text-center">Click on the identifier to see the other captures it's been found in</h5>
+<table id="identifiersTable" class="table table-striped" style="width:100%">
+<thead>
+ <tr>
+   <th>Number of captures</th>
+   <th>Identifier</th>
+   <th>Identifier type</th>
+ </tr>
+</thead>
+<tbody>
+  {% for number_captures, identifier_type, identifier in identifiers %}
+  <tr>
+    <td>{{ number_captures }}</td>
+    <td>
+      <a href="#identifierDetailsModal" data-remote="{{ url_for('identifier_details', identifier_type=identifier_type, identifier=identifier) }}"
+         data-bs-toggle="modal" data-bs-target="#identifierDetailsModal" role="button">
+        {{ identifier }}
+      </a>
+    </td>
+    <td>{{identifier_type}}</td>
+  </tr>
+  {% endfor %}
+</tbody>
+</table>