diff --git a/anatomy/static/js/anatomy.js b/anatomy/static/js/anatomy.js
index e7cb87c5..52f206c2 100644
--- a/anatomy/static/js/anatomy.js
+++ b/anatomy/static/js/anatomy.js
@@ -212,6 +212,12 @@ window.loadDicomViewerEvent = new Event('loadDicomViewerUrls');
 window.addEventListener('loadDicomViewerUrls', function (e) {
   console.log("LoadDicomViewer unls event", e.detail)
 
+  // Skip loading old viewer if using new dv3d viewer (set on new_uploads page)
+  if (window.skipLoadDicomViewer) {
+    console.log("Skipping old loadDicomViewer - using dv3d instead");
+    return;
+  }
+
   loadDicomViewer(e.detail.images, e.detail.annotations);
 }, false);
 
diff --git a/atlas/templates/atlas/base.html b/atlas/templates/atlas/base.html
index 37d7f547..046317ba 100755
--- a/atlas/templates/atlas/base.html
+++ b/atlas/templates/atlas/base.html
@@ -119,14 +119,26 @@
                             </ul>
                         </li>
 
-                        <li class="nav-item">
-                            <a class="nav-link" href="{% url 'atlas:user_uploads' %}" title="View unimported uploads"><i class="bi bi-upload me-1" aria-hidden="true"></i>Uploads</a>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link d-inline" href="{% url 'atlas:user_uploads' %}" title="View unimported uploads"><i class="bi bi-upload me-1" aria-hidden="true"></i>Uploads</a>
+                            <a class="nav-link d-inline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="visually-hidden">Toggle Uploads Menu</span>
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:user_uploads' %}"><i class="bi bi-hourglass-split me-1" aria-hidden="true"></i>Awaiting Import</a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:new_uploads' %}"><i class="bi bi-folder2-open me-1" aria-hidden="true"></i>Web Upload</a>
+                                </li>
+                                {% if request.user.is_staff %}
+                                    <li><hr class="dropdown-divider"></li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'atlas:uploads_hash_search' %}" title="Search uploads and imported images by hash, series UID or study UID"><i class="bi bi-fingerprint me-1" aria-hidden="true"></i>Upload Search</a>
+                                    </li>
+                                {% endif %}
+                            </ul>
                         </li>
-                        {% if request.user.is_staff %}
-                            <li class="nav-item">
-                                <a class="nav-link" href="{% url 'atlas:uploads_hash_search' %}" title="Search uploads and imported images by pixel hash"><i class="bi bi-fingerprint me-1" aria-hidden="true"></i>Hash Search</a>
-                            </li>
-                        {% endif %}
                         <li class="nav-item">
                             <a class="nav-link" href="{% url 'atlas:question_schema_overview' %}" title="View and edit question schemas"><i class="bi bi-journal-text me-1" aria-hidden="true"></i>Question Schemas</a>
                         </li>
diff --git a/atlas/templates/atlas/new_uploads.html b/atlas/templates/atlas/new_uploads.html
index 8eb3f732..d5acb145 100644
--- a/atlas/templates/atlas/new_uploads.html
+++ b/atlas/templates/atlas/new_uploads.html
@@ -1,44 +1,130 @@
 {% extends 'atlas/base.html' %}
-
-{% load static%}
+{% load static %}
 
 {% block content %}
-    <h2>Upload dicoms</h2>
-    User: {{user}}<br/>
-
-    <div role="alert" class="alert alert-warning">
-        Please note this form will not annonymise files, ensure that you have done so prior to using it. If files that do not appear to be annonymised are selected you will not be able to upload them.
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+        <div>
+            <h2 class="mb-1">Web DICOM Upload</h2>
+            <p class="text-muted mb-0">Select a folder, review grouped studies/series, run anonymisation checks, then upload.</p>
+        </div>
+        <a class="btn btn-outline-secondary" href="{% url 'atlas:user_uploads' %}">
+            <i class="bi bi-hourglass-split me-1"></i>Uploads Awaiting Import
+        </a>
     </div>
 
-    <div>
-        <p>This form allows you to quickly upload dicom files to the server. Select the folder containing the dicom files below. If you wish to upload files directly from Insight you may prefer to use the <a href='{% url "atlas:help" %}'>Uploader tool.</a></p>
-        <details class="help-text">
-            <summary><i class="bi bi-info-circle"></i> Help</summary>
-            <p>Only valid dicom files will be uploaded. </p>
-            <p>It is possible to upload multiple files by selecting the parent (containing) folder. Folders within will then be searched recursively for any valid dicom files.</p>
-            <p>Files to be uploaded will be displayed below. </p>
-            <p>DICOM tags will be checked to see if valid accession or hospital numbers are present but no annonymisation will be performed.</p>
-            <p>An attempt to detect duplicates will be made by calculating a hash of the pixel data in the DICOM files. If this check is not run and the files are uploaded they will be rejected.</p>
-            <p>If enabled a basic OCR will also be performed to check for burned in details on images, this is resource intensive and can be disabled if you know the content you are uploading does not feature any patient details.</p>
-        </details>
+    <div class="alert alert-warning" role="alert">
+        <strong>Important:</strong> this page does not anonymise files. It blocks uploads when anonymisation warnings are detected unless manually overridden.
+    </div>
+
+    <div class="card mb-3">
+        <div class="card-body">
+            <div class="row g-3 align-items-end">
+                <div class="col-lg-8">
+                    <label for="filepicker" class="form-label fw-semibold">Select folder containing DICOM files</label>
+                    <input type="file" class="form-control" name="dicom_files" id="filepicker" webkitdirectory multiple>
+                    <div class="form-text">Subfolders are scanned recursively. Non-DICOM files are ignored.</div>
+                </div>
+                <div class="col-lg-4">
+                    <button type="button" id="uploadButton" class="btn btn-primary w-100" disabled>
+                        <i class="bi bi-cloud-arrow-up me-1"></i>Upload Selected
+                    </button>
+                </div>
+            </div>
+
+            <details class="mt-3">
+                <summary class="fw-semibold">Upload Settings</summary>
+                <div class="row g-2 mt-1">
+                    <div class="col-md-6 col-xl-3">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="check-anonymisation-tags" checked>
+                            <label class="form-check-label" for="check-anonymisation-tags">Check tags anonymisation</label>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-xl-3">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="check-anonymisation-ocr">
+                            <label class="form-check-label" for="check-anonymisation-ocr">Check burned-in text (OCR)</label>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-xl-3">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="check-duplicates" checked>
+                            <label class="form-check-label" for="check-duplicates">Check duplicates before upload</label>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-xl-3">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="show-thumbnails">
+                            <label class="form-check-label" for="show-thumbnails">Show series thumbnails</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-text mt-2">
+                    OCR now runs sequentially on one sample image per series (capped) to reduce browser memory use.
+                </div>
+            </details>
+        </div>
+    </div>
+
+    <div id="selection-summary" class="alert alert-secondary py-2 mb-3 d-none"></div>
+    <div id="duplicate-progress" class="small text-muted mb-2"></div>
+
+    <div class="alert alert-warning d-none anon-alert" role="alert">
+        <p class="mb-2">Potential anonymisation issues were detected. Flagged series are highlighted below.</p>
         <details>
-            <summary>Settings</summary>
-            <input type="checkbox" id="check-annonymisation-ocr"><label for="check-annonymisation-ocr">Check for annonymisation (OCR)</label>
-            <input type="checkbox" id="show-thumbnails"><label for="Show thumbnails">Show thumbnails</label>
-            <input type="checkbox" id="show-viewer"><label for="Show Viewer">Show viewer</label>
-            <input type="checkbox" id="check-duplicates" checked><label for="check-duplicates">Check for duplicates before upload</label>
+            <summary>Override anonymisation check</summary>
+            <p class="mt-2 mb-2">Only override if you are certain the warnings are false positives.</p>
+            <button id="override-anon" class="btn btn-sm btn-outline-danger" type="button">Override and enable upload</button>
         </details>
     </div>
 
-    <form method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        <input type="file" name="dicom_files" id="filepicker" webkitdirectory multiple>
-        <button type="button" id="uploadButton">Upload</button>
+    <div id="preupload-grouped" class="mb-4">
+        <div class="alert alert-info">Choose a folder to preview studies and series before upload.</div>
+    </div>
 
-    </form>
+    <div class="card mb-3">
+        <div class="card-header d-flex justify-content-between align-items-center gap-2">
+            <span class="fw-semibold">Pre-upload Viewer</span>
+            <div class="ms-auto d-flex gap-2">
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="viewer-tags-btn" disabled>
+                    <i class="bi bi-tags me-1"></i>DICOM Tags
+                </button>
+                <small id="viewer-context" class="text-muted">No study/series selected</small>
+            </div>
+        </div>
+        <div class="card-body" style="position: relative; min-height: 450px;">
+            <div id="single-dicom-viewer" class="dicom-viewer-root" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;"></div>
+        </div>
+    </div>
 
-    <details id="upload-results"><summary>Upload results</summary>
-        <div id="upload-results-list">
+    <!-- DICOM Tags Modal -->
+    <div class="modal fade" id="dicomTagsModal" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">DICOM Tags</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-2">
+                        <input id="tags-filter" class="form-control form-control-sm" type="search" placeholder="Filter tags (key or value)...">
+                    </div>
+                    <div id="tags-warning" class="alert alert-warning small mb-2" style="display:none;">
+                        <strong>PHI Alert:</strong> <span id="tags-warning-text"></span>
+                    </div>
+                    <table class="table table-sm">
+                        <tbody id="tags-tbody">
+                            <tr><td colspan="2" class="text-muted">No tags loaded</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <details id="upload-results">
+        <summary class="fw-semibold">Upload Results</summary>
+        <div id="upload-results-list" class="pt-2">
             <h5>Uploaded</h5>
             <ul id="uploaded-files"></ul>
             <h5>Duplicates</h5>
@@ -52,220 +138,602 @@
         </div>
     </details>
 
-    <div class="alert alert-warning hide anon-alert" role="alert">
-        <p>The system has detected files that do not appear to be annonymised. These have been highlighted below.</p>
-
-        <p>If you believe this is a false positive please contact ross.kruger@nhs.net with details about the file that has been flagged.</p>
-
-        <details><summary>Override annonymisation check</summary>
-            <p>By clicking the button below you can override the annonymisation check and upload the files anyway. Only do this if you are sure this is a false positive.</p>
-            <button id="override-anon" _="on click remove @disabled from #uploadButton then alert('Upload enabled')">Override annonymisation check</button>
-        </div>
-
-        <h4>Selected files:</h4>
-        <div id="duplicate-progress"></div>
-        <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
-        <ol id="listing"></ol>
-
-
-        <div id="loading" class="fullscreen-overlay">
-            <div class="progress-block">
-                <div id="progress"></div>
-                <div class="sk-cube-grid full">
-                    <div class="sk-cube sk-cube1"></div>
-                    <div class="sk-cube sk-cube2"></div>
-                    <div class="sk-cube sk-cube3"></div>
-                    <div class="sk-cube sk-cube4"></div>
-                    <div class="sk-cube sk-cube5"></div>
-                    <div class="sk-cube sk-cube6"></div>
-                    <div class="sk-cube sk-cube7"></div>
-                    <div class="sk-cube sk-cube8"></div>
-                    <div class="sk-cube sk-cube9"></div>
-                </div>
-                <div id="progress-text">Uploading...</div>
+    <div id="loading" class="fullscreen-overlay" style="display:none;">
+        <div class="progress-block">
+            <div id="progress"></div>
+            <div class="sk-cube-grid full">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
             </div>
+            <div id="progress-text">Processing...</div>
         </div>
-
+    </div>
 {% endblock %}
 
-
 {% block js %}
     <script src="https://cdn.jsdelivr.net/npm/hash-wasm@4"></script>
-
     <script src="{% static 'js/upload_form_helpers.js' %}"></script>
+    <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
     <script>
-        window.to_upload = [];
-        window.upload_count = 1;
-        window.duplicate_series = new Set()
+        window.uploadPreview = {
+            records: [],
+            grouped: {},
+            selectedPaths: new Set(),
+            duplicateSeriesUrls: new Set(),
+            forceAnonymisationOverride: false,
+            ocrWorker: null,
+            currentTagsRecord: null,
+        };
+
+        const SITE_PREFIXES = ["ref", "rk9", "ra9", "rh8", "rbz", "rba"];
+        const OCR_MAX_SERIES_SAMPLES = 40;
+        const OCR_CANVAS_MAX = 768;
+
+        function setProgress(text) {
+            document.getElementById("progress-text").textContent = text;
+        }
+
+        function showLoading(show, text) {
+            const loading = document.getElementById("loading");
+            if (!loading) return;
+            loading.style.display = show ? "block" : "none";
+            if (text) setProgress(text);
+        }
+
+        function resetUploadResults() {
+            document.getElementById("uploaded-files").innerHTML = "";
+            document.getElementById("duplicate-files").innerHTML = "";
+            document.getElementById("duplicate-series").innerHTML = "";
+            document.getElementById("failed-files").innerHTML = "";
+            window.uploadPreview.duplicateSeriesUrls = new Set();
+        }
+
+        function normaliseTag(value) {
+            if (value === undefined || value === null) return "";
+            return String(value).trim();
+        }
+
+        async function parseDicomMetadata(file) {
+            try {
+                const buffer = await file.arrayBuffer();
+                const byteArray = new Uint8Array(buffer);
+                const dataSet = dicomParser.parseDicom(byteArray);
+
+                const studyUid = normaliseTag(dataSet.string("x0020000d")) || "unknown-study";
+                const studyDescription = normaliseTag(dataSet.string("x00081030")) || "(no study description)";
+                const studyDate = normaliseTag(dataSet.string("x00080020"));
+                const seriesUid = normaliseTag(dataSet.string("x0020000e"));
+                const seriesDescription = normaliseTag(dataSet.string("x0008103e")) || "(no series description)";
+                const seriesNumber = normaliseTag(dataSet.string("x00200011"));
+                const modality = normaliseTag(dataSet.string("x00080060"));
+                const accessionNumber = normaliseTag(dataSet.string("x00080050")).toLowerCase();
+                const patientId = normaliseTag(dataSet.string("x00100020")).toLowerCase();
+
+                if (!seriesUid) return null;
+
+                return {
+                    file,
+                    path: file.webkitRelativePath || file.name,
+                    studyUid,
+                    studyDescription,
+                    studyDate,
+                    seriesUid,
+                    seriesDescription,
+                    seriesNumber,
+                    modality,
+                    accessionNumber,
+                    patientId,
+                    include: true,
+                    tagWarnings: [],
+                    ocrWarning: false,
+                    duplicate: false,
+                    duplicateUrl: "",
+                    blake3Hash: "",
+                    objectUrl: URL.createObjectURL(file),
+                };
+            } catch (err) {
+                return null;
+            }
+        }
+
+        function evaluateTagWarnings(record) {
+            if (!document.getElementById("check-anonymisation-tags").checked) {
+                record.tagWarnings = [];
+                return;
+            }
+
+            const warnings = [];
+            for (const prefix of SITE_PREFIXES) {
+                if (record.accessionNumber && record.accessionNumber.startsWith(prefix)) {
+                    warnings.push(`Accession begins with ${prefix} (${record.accessionNumber})`);
+                }
+                if (record.patientId && record.patientId.startsWith(prefix)) {
+                    warnings.push(`Patient ID begins with ${prefix} (${record.patientId})`);
+                }
+            }
+            record.tagWarnings = warnings;
+        }
+
+        function buildGrouping(records) {
+            const grouped = {};
+            for (const record of records) {
+                if (!grouped[record.studyUid]) {
+                    grouped[record.studyUid] = {
+                        studyUid: record.studyUid,
+                        description: record.studyDescription,
+                        date: record.studyDate,
+                        seriesMap: {},
+                    };
+                }
+                const study = grouped[record.studyUid];
+                if (!study.seriesMap[record.seriesUid]) {
+                    study.seriesMap[record.seriesUid] = {
+                        uid: record.seriesUid,
+                        description: record.seriesDescription,
+                        number: record.seriesNumber,
+                        modality: record.modality,
+                        files: [],
+                    };
+                }
+                study.seriesMap[record.seriesUid].files.push(record);
+            }
+            return grouped;
+        }
+
+        function buildSelectionSummary() {
+            const selectedRecords = window.uploadPreview.records.filter(r => r.include);
+            const selectedSeries = new Set(selectedRecords.map(r => r.seriesUid));
+            const selectedStudies = new Set(selectedRecords.map(r => r.studyUid));
+            const summary = document.getElementById("selection-summary");
+            if (!selectedRecords.length) {
+                summary.classList.add("d-none");
+                summary.innerHTML = "";
+                return;
+            }
+            summary.classList.remove("d-none");
+            summary.innerHTML = `${selectedRecords.length} files selected across ${selectedSeries.size} series in ${selectedStudies.size} studies.`;
+        }
+
+        function hasAnonymisationWarnings() {
+            return window.uploadPreview.records.some((record) => {
+                if (!record.include) return false;
+                return record.tagWarnings.length > 0 || record.ocrWarning;
+            });
+        }
+
+        function updateUploadButtonState() {
+            const uploadButton = document.getElementById("uploadButton");
+            const anonAlert = document.querySelector(".anon-alert");
+            const hasSelected = window.uploadPreview.records.some(r => r.include);
+            const hasWarnings = hasAnonymisationWarnings();
+            const hasDuplicates = window.uploadPreview.records.some(r => r.include && r.duplicate);
+
+            if (!hasSelected) {
+                uploadButton.disabled = true;
+                anonAlert.classList.add("d-none");
+                return;
+            }
+
+            if (hasWarnings && !window.uploadPreview.forceAnonymisationOverride) {
+                uploadButton.disabled = true;
+                anonAlert.classList.remove("d-none");
+                return;
+            }
+
+            anonAlert.classList.add("d-none");
+            uploadButton.disabled = !!hasDuplicates;
+        }
+
+        function getSeriesStatusClass(series) {
+            const hasTagWarnings = series.files.some(f => f.tagWarnings.length > 0);
+            const hasOcrWarnings = series.files.some(f => f.ocrWarning);
+            const hasDuplicates = series.files.some(f => f.duplicate);
+            if (hasTagWarnings || hasOcrWarnings) return "series-card warning";
+            if (hasDuplicates) return "series-card duplicate";
+            return "series-card";
+        }
+
+        function renderGroupedPreview() {
+            const groupedRoot = document.getElementById("preupload-grouped");
+            const grouped = window.uploadPreview.grouped;
+            const studyKeys = Object.keys(grouped);
+
+            if (!studyKeys.length) {
+                groupedRoot.innerHTML = '<div class="alert alert-info">No valid DICOM files were found in the selected folder.</div>';
+                buildSelectionSummary();
+                updateUploadButtonState();
+                return;
+            }
+
+            const html = studyKeys.map((studyUid) => {
+                const study = grouped[studyUid];
+                const seriesList = Object.values(study.seriesMap);
+
+                const seriesHtml = seriesList.map((series) => {
+                    const includeCount = series.files.filter(f => f.include).length;
+                    const tagWarningCount = series.files.filter(f => f.tagWarnings.length > 0).length;
+                    const ocrWarningCount = series.files.filter(f => f.ocrWarning).length;
+                    const duplicateCount = series.files.filter(f => f.duplicate).length;
+
+                    return `
+                        <li class="${getSeriesStatusClass(series)}" data-series-uid="${series.uid}">
+                            <div class="series-header">
+                                <div>
+                                    <h6 class="mb-1">${series.description || "(no description)"}</h6>
+                                    <div class="small text-muted">
+                                        UID: ${series.uid}<br>
+                                        ${series.modality ? `Modality: ${series.modality} · ` : ""}
+                                        ${series.number ? `Series #: ${series.number} · ` : ""}
+                                        Files: ${series.files.length}
+                                    </div>
+                                </div>
+                                <div class="series-actions">
+                                    <div class="form-check form-switch mb-2">
+                                        <input class="form-check-input include-series" type="checkbox" data-series-uid="${series.uid}" ${includeCount ? "checked" : ""}>
+                                        <label class="form-check-label small">Include</label>
+                                    </div>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary view-series-btn" data-series-uid="${series.uid}">View series</button>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary view-study-btn" data-study-uid="${studyUid}">View study</button>
+                                </div>
+                            </div>
+                            <div class="series-flags mt-2 small">
+                                ${tagWarningCount ? `<span class="badge text-bg-warning">Tag warnings: ${tagWarningCount}</span>` : ""}
+                                ${ocrWarningCount ? `<span class="badge text-bg-warning">OCR warnings: ${ocrWarningCount}</span>` : ""}
+                                ${duplicateCount ? `<span class="badge text-bg-danger">Duplicates: ${duplicateCount}</span>` : ""}
+                            </div>
+                            <div class="series-thumbnail mt-2" data-series-thumb="${series.uid}"></div>
+                        </li>
+                    `;
+                }).join("");
+
+                return `
+                    <details class="study-block" open>
+                        <summary>
+                            <strong>${study.description || "(no study description)"}</strong>
+                            <small class="text-muted">(${studyUid}) — ${seriesList.length} series${study.date ? ` — ${study.date}` : ""}</small>
+                        </summary>
+                        <div class="study-controls d-flex flex-wrap gap-2 mt-2">
+                            <button type="button" class="btn btn-sm btn-outline-secondary include-study" data-study-uid="${studyUid}" data-value="1">Include all in study</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary include-study" data-study-uid="${studyUid}" data-value="0">Exclude all in study</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary view-study-btn" data-study-uid="${studyUid}">View study</button>
+                        </div>
+                        <ul class="study-series-list mt-2">${seriesHtml}</ul>
+                    </details>
+                `;
+            }).join("");
+
+            groupedRoot.innerHTML = html;
+
+            if (document.getElementById("show-thumbnails").checked) {
+                renderSeriesThumbnails();
+            }
+
+            buildSelectionSummary();
+            updateUploadButtonState();
+        }
+
+        async function renderSeriesThumbnails() {
+            const seriesMap = {};
+            for (const record of window.uploadPreview.records) {
+                if (!seriesMap[record.seriesUid]) seriesMap[record.seriesUid] = record;
+            }
+
+            for (const seriesUid of Object.keys(seriesMap)) {
+                const holder = document.querySelector(`[data-series-thumb="${seriesUid}"]`);
+                if (!holder) continue;
+                const record = seriesMap[seriesUid];
+
+                try {
+                    const imgDataUrl = await renderDicomToDataUrl(record.file, 160);
+                    holder.innerHTML = `<img src="${imgDataUrl}" alt="Series thumbnail" class="thumb-preview">`;
+                } catch (err) {
+                    holder.innerHTML = '<span class="text-muted small">Thumbnail unavailable</span>';
+                }
+            }
+        }
+
+        async function renderDicomToDataUrl(file, maxSize) {
+            const element = document.createElement("div");
+            element.style.width = `${maxSize}px`;
+            element.style.height = `${maxSize}px`;
+            element.style.position = "fixed";
+            element.style.left = "-10000px";
+            element.style.top = "-10000px";
+            document.body.appendChild(element);
+
+            const objectUrl = URL.createObjectURL(file);
+            const imageId = `wadouri:${objectUrl}`;
+
+            try {
+                cornerstone.enable(element);
+                const image = await cornerstone.loadAndCacheImage(imageId);
+                cornerstone.displayImage(element, image);
+                const canvas = element.querySelector("canvas");
+                if (!canvas) throw new Error("No canvas");
+
+                const outCanvas = document.createElement("canvas");
+                const scale = Math.min(maxSize / canvas.width, maxSize / canvas.height, 1);
+                outCanvas.width = Math.max(1, Math.round(canvas.width * scale));
+                outCanvas.height = Math.max(1, Math.round(canvas.height * scale));
+                const ctx = outCanvas.getContext("2d", { alpha: false });
+                ctx.drawImage(canvas, 0, 0, outCanvas.width, outCanvas.height);
+
+                return outCanvas.toDataURL("image/jpeg", 0.75);
+            } finally {
+                try { cornerstone.disable(element); } catch (err) {}
+                URL.revokeObjectURL(objectUrl);
+                element.remove();
+                try { cornerstone.imageCache.purgeCache(); } catch (err) {}
+            }
+        }
+
+        async function ensureOcrWorker() {
+            if (window.uploadPreview.ocrWorker) return window.uploadPreview.ocrWorker;
+            window.uploadPreview.ocrWorker = await Tesseract.createWorker("eng");
+            return window.uploadPreview.ocrWorker;
+        }
+
+        function detectOcrPhi(text) {
+            const value = (text || "").toLowerCase();
+            return value.includes("accession") || value.includes("patient") || /(ref|rk9|rh8|ra9|rbz|rba)\d+/i.test(value);
+        }
+
+        async function getDownscaledOcrBlob(file) {
+            const element = document.createElement("div");
+            element.style.width = "512px";
+            element.style.height = "512px";
+            element.style.position = "fixed";
+            element.style.left = "-10000px";
+            element.style.top = "-10000px";
+            document.body.appendChild(element);
+
+            const objectUrl = URL.createObjectURL(file);
+            const imageId = `wadouri:${objectUrl}`;
+
+            try {
+                cornerstone.enable(element);
+                const image = await cornerstone.loadAndCacheImage(imageId);
+                cornerstone.displayImage(element, image);
+
+                const sourceCanvas = element.querySelector("canvas");
+                if (!sourceCanvas) throw new Error("No canvas");
+
+                const outCanvas = document.createElement("canvas");
+                const scale = Math.min(OCR_CANVAS_MAX / sourceCanvas.width, OCR_CANVAS_MAX / sourceCanvas.height, 1);
+                outCanvas.width = Math.max(1, Math.round(sourceCanvas.width * scale));
+                outCanvas.height = Math.max(1, Math.round(sourceCanvas.height * scale));
+                const ctx = outCanvas.getContext("2d", { alpha: false });
+                ctx.drawImage(sourceCanvas, 0, 0, outCanvas.width, outCanvas.height);
+
+                return await new Promise((resolve, reject) => {
+                    outCanvas.toBlob((blob) => {
+                        if (!blob) reject(new Error("Failed to build OCR blob"));
+                        else resolve(blob);
+                    }, "image/jpeg", 0.75);
+                });
+            } finally {
+                try { cornerstone.disable(element); } catch (err) {}
+                URL.revokeObjectURL(objectUrl);
+                element.remove();
+                try { cornerstone.imageCache.purgeCache(); } catch (err) {}
+            }
+        }
+
+        async function runOcrChecks() {
+            if (!document.getElementById("check-anonymisation-ocr").checked) {
+                window.uploadPreview.records.forEach(r => { r.ocrWarning = false; });
+                return;
+            }
+
+            const sampleBySeries = {};
+            for (const record of window.uploadPreview.records) {
+                if (!sampleBySeries[record.seriesUid]) sampleBySeries[record.seriesUid] = record;
+            }
+
+            const samples = Object.values(sampleBySeries).slice(0, OCR_MAX_SERIES_SAMPLES);
+            if (!samples.length) return;
+
+            const worker = await ensureOcrWorker();
+            let index = 0;
+
+            for (const record of samples) {
+                index += 1;
+                setProgress(`OCR ${index} of ${samples.length}: ${record.path}`);
+                try {
+                    const blob = await getDownscaledOcrBlob(record.file);
+                    const result = await worker.recognize(blob);
+                    const text = result?.data?.text || "";
+                    record.ocrWarning = detectOcrPhi(text);
+                } catch (err) {
+                    record.ocrWarning = false;
+                }
+            }
+        }
 
         async function calculateBlake3Hash(file) {
-    // Read file as ArrayBuffer
             const buffer = await file.arrayBuffer();
-    // Parse as DICOM
-            let pixelDataElement;
             try {
                 const byteArray = new Uint8Array(buffer);
                 const dataSet = dicomParser.parseDicom(byteArray);
-                pixelDataElement = dataSet.elements.x7fe00010; // Pixel Data tag
-                if (!pixelDataElement) {
-                    throw new Error("No Pixel Data found in DICOM file.");
-                }
-        // Extract pixel data bytes
+                const pixelDataElement = dataSet.elements.x7fe00010;
+                if (!pixelDataElement) throw new Error("No Pixel Data");
                 const pixelData = byteArray.subarray(pixelDataElement.dataOffset, pixelDataElement.dataOffset + pixelDataElement.length);
-        // Hash just the pixel data
                 return await hashwasm.blake3(pixelData);
             } catch (err) {
-                console.error("DICOM parse/hash error:", err, file.name);
-        // Fallback: hash the whole file if pixel data is missing or parsing fails
                 return await hashwasm.blake3(new Uint8Array(buffer));
             }
         }
-        async function checkForDuplicates(files) {
-            const hashes = [];
-            for (const file of files) {
-                const hash = await calculateBlake3Hash(file);
-                hashes.push(hash);
-                file._blake3_hash = hash; // Store for later use if needed
+
+        async function processDuplicates() {
+            const dupProgress = document.getElementById("duplicate-progress");
+            dupProgress.innerHTML = "";
+            window.uploadPreview.records.forEach(r => {
+                r.duplicate = false;
+                r.duplicateUrl = "";
+            });
+
+            if (!document.getElementById("check-duplicates").checked) {
+                return;
             }
-    // Call the API
+
+            const selected = window.uploadPreview.records.filter(r => r.include);
+            if (!selected.length) return;
+
+            const hashes = [];
+            let idx = 0;
+            for (const record of selected) {
+                idx += 1;
+                if (!record.blake3Hash) {
+                    setProgress(`Hashing ${idx} of ${selected.length}: ${record.path}`);
+                    record.blake3Hash = await calculateBlake3Hash(record.file);
+                }
+                hashes.push(record.blake3Hash);
+            }
+
+            dupProgress.innerHTML = '<span class="text-info">Checking hashes with server...</span>';
+
+            let result = {};
             try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 30000);
                 const res = await fetch("{% url 'api-1:check_images_hashes' %}", {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
-                        "X-CSRFToken": "{{ csrf_token }}"
+                        "X-CSRFToken": "{{ csrf_token }}",
                     },
-                    body: JSON.stringify(hashes)
+                    body: JSON.stringify(hashes),
+                    signal: controller.signal,
                 });
-                if (!res.ok) {
-                    const text = await res.text();
-                    console.error('Hash check failed', res.status, text);
-                    return {};
-                }
-                try {
-                    return await res.json();
-                } catch (e) {
-                    const text = await res.text();
-                    console.error('Non-JSON response from hash check', text);
-                    return {};
-                }
-            } catch (e) {
-                console.error('Network error while checking hashes', e);
-                return {};
-            }
-        }
-
-
-        async function processFilesWithDuplicateCheck() {
-            const file_set = document.getElementById("filepicker").files;
-            let hasDuplicates = false;
-            const $dupProgress = $("#duplicate-progress");
-            $dupProgress.empty();
-
-            if ($("#check-duplicates").is(":checked")) {
-                $dupProgress.html('<span style="color:#0d6efd;">Calculating hashes...</span>');
-                $("#progress-text").text("Checking for duplicates...");
-
-        // Calculate hashes and update progress
-                const hashes = [];
-                let n = 0;
-                for (const file of file_set) {
-                    n += 1;
-                    $dupProgress.html(`<span style="color:#0d6efd;">Hashing: ${file.webkitRelativePath} (${n} of ${file_set.length})</span>`);
-                    const hash = await calculateBlake3Hash(file);
-                    hashes.push(hash);
-                    file._blake3_hash = hash;
-                }
-
-                $dupProgress.html('<span style="color:#0d6efd;">Checking hashes with server...</span>');
-                let result = {};
-                try {
-                    const res = await fetch("{% url 'api-1:check_images_hashes' %}", {
-                        method: "POST",
-                        headers: {
-                            "Content-Type": "application/json",
-                            "X-CSRFToken": "{{ csrf_token }}"
-                        },
-                        body: JSON.stringify(hashes)
-                    });
-                    if (!res.ok) {
-                        const text = await res.text();
-                        console.error('Hash check failed', res.status, text);
-                        toastr.error('Error checking duplicates with server');
-                        result = {};
-                    } else {
-                        try {
-                            result = await res.json();
-                        } catch (e) {
-                            const text = await res.text();
-                            console.error('Non-JSON response from hash check', text);
-                            result = {};
-                        }
-                    }
-                } catch (e) {
-                    console.error('Network error while checking hashes', e);
-                    toastr.error('Network error while checking duplicates');
-                    result = {};
-                }
-
-        // Build a map from hash to file for quick lookup
-                const hashToFile = {};
-                for (const file of file_set) {
-                    if (file._blake3_hash) {
-                        hashToFile[file._blake3_hash] = file;
-                    }
-                }
-
-                let duplicateCount = 0;
-        // Map of unique series url to {url, id}
-                const duplicateSeriesMap = {};
-                for (const hash in result) {
-                    if (result[hash].id) {
-                        hasDuplicates = true;
-                        duplicateCount += 1;
-                // Highlight the file in the listing
-                        const file = hashToFile[hash];
-                        if (file) {
-                            const selector = `.dicom-file[data-path='${file.webkitRelativePath}']`;
-                            const li = document.querySelector(selector);
-                            if (li) {
-                                li.classList.add("duplicate-file-highlight");
-                            }
-                        }
-                // Collect unique series by url
-                        if (result[hash].url) {
-                            duplicateSeriesMap[result[hash].url] = {
-                                url: result[hash].url,
-                                id: result[hash].id
-                            };
-                        }
-                    }
-                }
-
-                if (hasDuplicates) {
-                    $("#uploadButton").prop("disabled", true);
-            // Show summary in red and list duplicate series as links if any
-                    let html = `<div style="color:#dc3545;font-weight:bold;">Found ${duplicateCount} duplicate file(s). Please review before uploading.</div>`;
-                    const seriesUrls = Object.values(duplicateSeriesMap);
-                    if (seriesUrls.length > 0) {
-                        html += `<div style="margin-top:8px;">Duplicate series:</div><ul>`;
-                        seriesUrls.forEach(series => {
-                            html += `<li><a href="${series.url}" target="_blank" style="color:#dc3545;text-decoration:underline;">Series ${series.id}</a></li>`;
-                        });
-                        html += `</ul>`;
-                    }
-                    $dupProgress.html(html);
-                    toastr.error("Duplicates detected. Please review before uploading.");
+                clearTimeout(timeoutId);
+                if (res.ok) result = await res.json();
+                else throw new Error(`Server returned ${res.status}`);
+            } catch (err) {
+                if (err.name === "AbortError") {
+                    dupProgress.innerHTML = '<span class="text-warning">Duplicate check timed out. Proceeding without server verification.</span>';
                 } else {
-                    $("#uploadButton").prop("disabled", false);
-                    $dupProgress.html('<span style="color:#198754;">No duplicates detected.</span>');
+                    console.error(err);
+                    dupProgress.innerHTML = '<span class="text-warning">Could not verify duplicates. Proceeding.</span>';
                 }
+                return;
+            }
+
+            const duplicateSeriesMap = {};
+            for (const record of selected) {
+                const info = result[record.blake3Hash];
+                if (!info || !info.id) continue;
+                record.duplicate = true;
+                if (info.url) {
+                    record.duplicateUrl = info.url;
+                    duplicateSeriesMap[info.url] = info.id;
+                }
+            }
+
+            if (Object.keys(duplicateSeriesMap).length) {
+                dupProgress.innerHTML = `<span class="text-danger fw-semibold">Duplicates detected. Remove duplicates before upload.</span>`;
+                const duplicateSeries = document.getElementById("duplicate-series");
+                duplicateSeries.innerHTML = "";
+                Object.entries(duplicateSeriesMap).forEach(([url, id]) => {
+                    const item = document.createElement("li");
+                    item.innerHTML = `<a href="${url}" target="_blank">Series ${id}</a>`;
+                    duplicateSeries.appendChild(item);
+                });
             } else {
-                $("#uploadButton").prop("disabled", false);
-                $dupProgress.empty();
+                dupProgress.innerHTML = '<span class="text-success">No duplicates detected.</span>';
             }
         }
 
+        function collectSelectedRecords() {
+            return window.uploadPreview.records.filter(r => r.include);
+        }
+
+        function getSeriesRecords(seriesUid) {
+            return window.uploadPreview.records.filter(r => r.seriesUid === seriesUid && r.include);
+        }
+
+        function getStudyRecords(studyUid) {
+            return window.uploadPreview.records.filter(r => r.studyUid === studyUid && r.include);
+        }
+
+        async function showRecordsInViewer(records, label) {
+            if (!records.length) return;
+            console.log('showRecordsInViewer called with', records.length, 'records, label:', label);
+            console.log('First record:', records[0]);
+            // Try passing blob URLs directly (without wadouri: prefix) to dv3d
+            const images = records.map((record) => record.objectUrl);
+            console.log('Mapped images:', images);
+            window.uploadPreview.currentTagsRecord = records[0];
+            
+            document.getElementById("viewer-context").textContent = label;
+            document.getElementById("viewer-tags-btn").disabled = false;
+            
+            // Directly mount dv3d viewer without triggering old viewer via event
+            await loadDv3dViewer(images, undefined);
+            
+            // Focus the viewer card
+            const viewerCard = document.querySelector(".card-header:has(#viewer-context)").closest(".card");
+            if (viewerCard) {
+                viewerCard.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+        }
+
+        function applyIncludeToSeries(seriesUid, include) {
+            window.uploadPreview.records.forEach((record) => {
+                if (record.seriesUid === seriesUid) record.include = include;
+            });
+        }
+
+        function applyIncludeToStudy(studyUid, include) {
+            window.uploadPreview.records.forEach((record) => {
+                if (record.studyUid === studyUid) record.include = include;
+            });
+        }
+
+        async function onFilesChanged() {
+            const fileInput = document.getElementById("filepicker");
+            const files = Array.from(fileInput.files || []);
+
+            window.uploadPreview.forceAnonymisationOverride = false;
+            resetUploadResults();
+
+            window.uploadPreview.records.forEach((r) => {
+                if (r.objectUrl) URL.revokeObjectURL(r.objectUrl);
+            });
+            window.uploadPreview.records = [];
+            window.uploadPreview.grouped = {};
+
+            if (!files.length) {
+                renderGroupedPreview();
+                return;
+            }
+
+            showLoading(true, "Scanning DICOM files...");
+            let i = 0;
+            for (const file of files) {
+                i += 1;
+                setProgress(`Scanning ${i} of ${files.length}: ${file.webkitRelativePath || file.name}`);
+                const record = await parseDicomMetadata(file);
+                if (!record) continue;
+                evaluateTagWarnings(record);
+                window.uploadPreview.records.push(record);
+            }
+
+            window.uploadPreview.grouped = buildGrouping(window.uploadPreview.records);
+            renderGroupedPreview();
+
+            await runOcrChecks();
+            await processDuplicates();
+
+            renderGroupedPreview();
+            showLoading(false);
+        }
 
         function* chunks(arr, n) {
             for (let i = 0; i < arr.length; i += n) {
@@ -273,449 +741,450 @@
             }
         }
 
-        function onUploadButtonClicked(event) {
+        function uploadChunk(filesToUpload, currentChunk, totalChunks) {
+            return new Promise((resolve, reject) => {
+                const formData = new FormData();
+                filesToUpload.forEach((record) => formData.append("files", record.file));
+
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", "{% url 'api-1:upload_dicom' %}", true);
+                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
+
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState !== XMLHttpRequest.DONE) return;
+
+                    if (xhr.status !== 200) {
+                        reject(new Error("Upload failed"));
+                        return;
+                    }
+
+                    let res;
+                    try {
+                        res = JSON.parse(xhr.responseText || xhr.response);
+                    } catch (err) {
+                        reject(new Error("Invalid JSON response"));
+                        return;
+                    }
+
+                    if (res.uploaded && res.uploaded.length) {
+                        const uploadedFiles = document.getElementById("uploaded-files");
+                        res.uploaded.forEach((u) => {
+                            const li = document.createElement("li");
+                            li.innerHTML = `${u[0]}` + (u[1] ? ` <small class="text-muted">(${u[1]})</small>` : "");
+                            uploadedFiles.appendChild(li);
+                        });
+                    }
+
+                    if (res.duplicates && res.duplicates.length) {
+                        const duplicateFiles = document.getElementById("duplicate-files");
+                        res.duplicates.forEach((d) => {
+                            const li = document.createElement("li");
+                            li.innerHTML = `${d[0]}` + (d[1] ? ` <small class="text-muted">(${d[1]})</small>` : "");
+                            duplicateFiles.appendChild(li);
+                        });
+                    }
+
+                    if (res.failed && res.failed.length) {
+                        const failedFiles = document.getElementById("failed-files");
+                        res.failed.forEach((f) => {
+                            const li = document.createElement("li");
+                            li.textContent = f;
+                            failedFiles.appendChild(li);
+                        });
+                    }
+
+                    if (res.duplicate_series && res.duplicate_series.length) {
+                        const duplicateSeries = document.getElementById("duplicate-series");
+                        res.duplicate_series.forEach((url) => {
+                            if (window.uploadPreview.duplicateSeriesUrls.has(url)) return;
+                            window.uploadPreview.duplicateSeriesUrls.add(url);
+                            const li = document.createElement("li");
+                            li.innerHTML = `<a href="${url}" target="_blank">${url}</a>`;
+                            duplicateSeries.appendChild(li);
+                        });
+                    }
+
+                    resolve();
+                };
+
+                setProgress(`Uploading chunk ${currentChunk + 1} of ${totalChunks}`);
+                xhr.send(formData);
+            });
+        }
+
+        async function onUploadButtonClicked(event) {
             event.preventDefault();
-            const fileInput = document.getElementById("filepicker");
-            const selectedFiles = fileInput.files;
-    // Check if any files are selected
-            if (selectedFiles.length === 0) {
-                alert("Please select at least one file to upload.");
+            const selected = collectSelectedRecords();
+
+            if (!selected.length) {
+                alert("Please select at least one DICOM file to upload.");
                 return;
             }
-            //alert(`${window.to_upload.length} files selected. Uploading...`);
-
-            window.upload_results = {
-                "uploaded": [],
-                "duplicates": [],
-                "failed": [],
-                "duplicate_series": []
-            };
-
-            chunked_files = [...chunks(window.to_upload, 10)];
-
-
-            $("#loading").show();
-            $("#progress-text").text(`Uploading..`);
-            for (let i = 0; i < chunked_files.length; i++) {
-                uploadFiles(chunked_files[i], i, chunked_files.length);
 
+            if (hasAnonymisationWarnings() && !window.uploadPreview.forceAnonymisationOverride) {
+                alert("Anonymisation warnings must be resolved or overridden before uploading.");
+                return;
             }
-        }
 
-        function uploadFiles(files_to_upload, current_chunk, total_chunks){
-  // Create a FormData object to store the form data
-            const formData = new FormData();
-  // Append each selected file to the FormData object
-            for (let i = 0; i < files_to_upload.length; i++) {
-                formData.append("files", files_to_upload[i]);
-            }
-            const xhr = new XMLHttpRequest();
-            xhr.open("POST", "{% url 'api-1:upload_dicom' %}", true);
-            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
-            xhr.onreadystatechange = function () {
-                $("#progress-text").text(`Uploading ${window.upload_count} of ${total_chunks} chunks`);
-                if (xhr.readyState === XMLHttpRequest.DONE) {
-                    window.upload_count += 1;
-                    if (xhr.status === 200) {
-                    // Handle successful response from the server
-                        let res = null;
-                        try {
-                            res = JSON.parse(xhr.responseText || xhr.response);
-                        } catch (e) {
-                            const text = xhr.responseText || xhr.response;
-                            console.error('Upload response not JSON', text);
-                            alert('Upload failed: server returned non-JSON response');
-                            res = null;
-                        }
+            resetUploadResults();
+            showLoading(true, "Uploading...");
 
-                        if (res) {
-                            // Append arrays of tuples [filename, hash]
-                            if (res.uploaded && res.uploaded.length) {
-                                window.upload_results.uploaded.push(...res.uploaded);
-                                res.uploaded.forEach(u => {
-                                    const item = document.createElement('li');
-                                    if (Array.isArray(u) && u.length >= 1) {
-                                        const name = u[0];
-                                        const hash = u[1] || '';
-                                        item.innerHTML = `${name}` + (hash ? ` <small class="text-muted">(${hash})</small>` : '');
-                                    } else {
-                                        item.textContent = u;
-                                    }
-                                    $('#uploaded-files').append(item);
-                                });
-                            }
-
-                            if (res.duplicates && res.duplicates.length) {
-                                window.upload_results.duplicates.push(...res.duplicates);
-                                res.duplicates.forEach(d => {
-                                    const item = document.createElement('li');
-                                    if (Array.isArray(d) && d.length >= 1) {
-                                        const name = d[0];
-                                        const hash = d[1] || '';
-                                        item.innerHTML = `${name}` + (hash ? ` <small class="text-muted">(${hash})</small>` : '');
-                                    } else {
-                                        item.textContent = d;
-                                    }
-                                    $('#duplicate-files').append(item);
-                                });
-                            }
-
-                            if (res.failed && res.failed.length) {
-                                window.upload_results.failed.push(...res.failed);
-                                res.failed.forEach(f => {
-                                    const item = document.createElement('li');
-                                    item.textContent = f;
-                                    $('#failed-files').append(item);
-                                });
-                            }
-
-                            // duplicate_series may be an array of urls
-                            if (res.duplicate_series && res.duplicate_series.length) {
-                                res.duplicate_series.forEach(url => {
-                                    if (window.duplicate_series && typeof window.duplicate_series.add === 'function') {
-                                        window.duplicate_series.add(url);
-                                    } else {
-                                        window.upload_results.duplicate_series.push(url);
-                                    }
-                                });
-                            }
-                        }
-                    } else {
-                   // Handle error response from the server
-                        console.error('Failed to upload files.');
-                        alert("Error occurred during file upload. Please try again.");
-                    }
-                    if (current_chunk + 1 == total_chunks) {
-                        $("#loading").hide();
-
-                        // If there are duplicates, open the details and highlight the series
-                        if (window.duplicate_series.size > 0) {
-                            $("#upload-results").attr("open", true);
-                            $("#duplicate-series").closest("details").attr("open", true);
-                            // Show a global alert for duplicate files
-                            toastr.warning(
-                                "Some duplicate files have been detected and not re-imported.",
-                                "Duplicate Files Warning",
-                                {
-                                    "closeButton": true,
-                                    "progressBar": true,
-                                    "positionClass": "toast-top-full-width",
-                                    "timeOut": 7000
-                                }
-                            );
-                            window.duplicate_series.forEach((element) => {
-                                const wrapper = document.createElement("div");
-                                wrapper.className = "alert alert-warning duplicate-series-highlight";
-                                const link = document.createElement("a");
-                                link.href = element;
-                                link.textContent = `Series exists: ${element}`;
-                                link.target = "_blank";
-                                wrapper.appendChild(link);
-                                $("#duplicate-series").append(wrapper);
-                            });
-                        };
-                        //$("#duplicate-series").append([...window.duplicate_series].join("<br/>"));  
-                        alert("Uploading complete")
-                    }
-                }
-            };
-            xhr.send(formData);
-        }
-
-        function checkAnnonymisation(byteArray, file) {
-        // We need to setup a try/catch block because parseDicom will throw an exception
-        // if you attempt to parse a non dicom part 10 file (or one that is corrupted)
             try {
-            // parse byteArray into a DataSet object using the parseDicom library
-                var dataSet = dicomParser.parseDicom(byteArray);
-
-            // dataSet contains the parsed elements.  Each element is available via a property
-            // in the dataSet.elements object.  The property name is based on the elements group
-            // and element in the following format: xggggeeee where gggg is the group number
-            // and eeee is the element number with lowercase hex characters.
-
-            // To access the data for an element, we need to know its type and its tag.
-            // We will get the sopInstanceUid from the file which is a string and
-            // has the tag (0020,000D)
-                var study_description = dataSet.string('x00081030');
-                var accession_number = dataSet.string('x00080050').toLowerCase();
-                var patient_id = dataSet.string('x00100020').toLowerCase();
-
-                not_anon = false;
-
-                site_codes = ["ref", "rk9", "ra9", "rh8", "rbz", "rba"]
-
-                errors = []
-                for (let i = 0; i < site_codes.length; i++) {
-                    if ( accession_number.startsWith(site_codes[i]))
-                    {
-                        not_anon = true;
-                        errors.push(`Accession number starts with ${site_codes[i]} (${accession_number})`);
-                    }
-                    if ( patient_id.startsWith(site_codes[i]))
-                    {
-                        not_anon = true;
-                        errors.push(`Patient ID starts with ${site_codes[i]} (${patient_id})`);
-                    }
+                const chunked = [...chunks(selected, 10)];
+                for (let i = 0; i < chunked.length; i++) {
+                    await uploadChunk(chunked[i], i, chunked.length);
                 }
-
-                if (not_anon) {
-                    toastr.warning(`File does not appear to be annonymised<br/>Accession: ${accession_number} <br/>Patient ID: ${patient_id}<br/>`, 'Anonymisation warning', {
-                        "closeButton": false,
-                        "debug": false,
-                        "newestOnTop": false,
-                        "progressBar": false,
-                        "positionClass": "toast-top-full-width",
-                        "preventDuplicates": false,
-                        "onclick": null,
-                        "showDuration": "0",
-                        "hideDuration": "0",
-                        "timeOut": 0,
-                        "extendedTimeOut": 0,
-                        "showEasing": "swing",
-                        "hideEasing": "linear",
-                        "showMethod": "fadeIn",
-                        "hideMethod": "fadeOut",
-                    });
-                    $("#uploadButton").prop("disabled", true);
-                    $(".anon-alert").show();
-
-                    setTimeout(
-                        function(errors) {
-                            console.log(errors)
-                        // We delay this a few seconds otherwise it does not work
-                            $(`.dicom-file[data-path='${file.webkitRelativePath}']`).addClass("image-ident-warning").append($(`<div>${errors.join("<br/>")}</div>`));
-                        }, 2000, errors
-                    )
-                }
-
-            // TODO: fix
-            //$.ajax({
-            //    url: `{% url 'generic:examination-autocomplete' %}/${encodeURI(study_description)}`,
-            //    //context: document.body,
-            //    success: function(data){
-            //        console.log(data)
-            //    }
-            //});
-
-            //// try to match with a study description (if not already selected)
-            //if ($(`#id_examination_to option`).length < 1) {
-            //    option = $(`#id_examination_from option[title*='${study_description}' i]`);
-
-            //    if (option.length) {
-            //        option.appendTo($("#id_examination_to"));
-            //        toastr.success(`Examination set to ${option.attr('title')} from dicom data`);
-            //    } else {
-            //        toastr.warning(
-            //            `Unable to set examination ${study_description} from dicom data (it needs creating)`);
-
-            //    }
-            //}
-                return true;
-
+                document.getElementById("upload-results").open = true;
+                toastr.success("Upload complete");
             } catch (err) {
-                console.log(err);
-                return false;
+                console.error(err);
+                toastr.error("Upload failed. Please retry.");
+            } finally {
+                showLoading(false);
             }
         }
-        async function loadDicomViewerUploads(callback) {
-            $("#uploadButton").attr("disabled", false);
-            $("#single-dicom-viewer").hide();
-            console.log("load")
-            $("#single-dicom-viewer").empty()
-            //images = []
-            //Function that returns a promise to read the file
-            const reader = (file) => {
-                return new Promise((resolve, reject) => {
-                    const fileReader = new FileReader();
-                    fileReader.onload = () => resolve(fileReader);
-                    fileReader.readAsDataURL(file);
-                });
-            }
 
-            const readFile = (file, el) => {
-                reader(file).then(reader => {
-                    //if ($("#id_examination").find(":selected")[0].dataset.select2Id == "2") {
-                    //    var byteArray = new Uint8Array(reader.result);
-                    //    console.log("etrxact", reader)
-                    //    extractDicomStudyDescription(byteArray);
-                    //}
-                    var image = new Image();
-                    image.height = 100;
-                    image.title = file.name;
-                    image.src = reader.result;
-                    image.className = "temp-thumb";
-                    $(el).append(image);
-                    //images.push(reader.result);
-                    loadViewer(images);
+        function bindIfExists(id, eventName, handler) {
+            const element = document.getElementById(id);
+            if (element) element.addEventListener(eventName, handler);
+        }
 
-                });
-            }
-
-            const dicomReader = (file) => {
-                return new Promise((resolve, reject) => {
-                    const fileReader = new FileReader();
-                    fileReader.onload = () => resolve(fileReader);
-                    fileReader.readAsArrayBuffer(file);
-                });
-            }
-
-            const readDicomFile = (file) => {
-                return dicomReader(file).then(reader => {
-                    var byteArray = new Uint8Array(reader.result);
-                    return checkAnnonymisation(byteArray, file);
-                });
-            }
-
-
-
-            file_set = document.getElementById("filepicker").files;
-
-
-            let output = document.getElementById("listing");
-            images = [];
-            window.to_upload = [];
-            $("#loading").show();
-            $("#progress-text").text(`Processing..`);
-            n = 0;
-            for (const file of file_set) {
-                n += 1;
-                $("#progress-text").text(`Processing ${file.name} (${n} of ${file_set.length})`);
-                    //await readFile(file);
-                dicom = await readDicomFile(file);
-
-                if (dicom) {
-                    let item = document.createElement("li");
-                    item.className = "dicom-file";
-                    item.textContent = file.webkitRelativePath;
-                    item.dataset.path = file.webkitRelativePath;
-                    output.appendChild(item);
-                        //await readFile(file, item);
-
-
-                    let url = URL.createObjectURL(file)
-                    imageId = `wadouri:${url}`;
-                    if ($("#show-viewer").is(":checked")) {
-                        images.push(imageId);
-                    }
-                    window.to_upload.push(file);
-
-                    if (!$("#check-annonymisation-ocr").is(":checked") && !$("#show-thumbnails").is(":checked")) {
-
-                    } else {
-                        const element = $(`<div class='temp-thumb' src=${imageId}></div>`).get(0)
-                        item.appendChild(element);
-                        cornerstone.enable(element);
-                        cornerstone.loadAndCacheImage(imageId).then(function (image) {
-                            cornerstone.displayImage(element, image);
-
-                            if ($("#check-annonymisation-ocr").is(":checked")) {
-                                $(element).addClass("temp-thumb-large");
-                                cornerstone.resize(element)
-                                setTimeout(function () {
-                                    ocr($(element).find("canvas").get(0).toDataURL(), element);
-                                    $(element).removeClass("temp-thumb-large");
-                                    cornerstone.resize(element)
-
-
-                                    if (!$("#show-thumbnails").is(":checked")) {
-                                        cornerstone.disable(element);
-                                        element.remove();
-                                    }
-                                }, 500);
+        async function loadDv3dViewer(images, annotations) {
+            try {
+                console.log('loadDv3dViewer called with images:', images, 'length:', images ? images.length : 0);
+                
+                // Wait for dv3d bundle to mount
+                if (!window.mountDicomViewers) {
+                    await new Promise((resolve) => {
+                        const checkInterval = setInterval(() => {
+                            if (window.mountDicomViewers) {
+                                clearInterval(checkInterval);
+                                resolve();
                             }
-
-
-                        });
-                    }
+                        }, 100);
+                        setTimeout(() => clearInterval(checkInterval), 5000);
+                    });
                 }
-            }
 
-
-            const event = new CustomEvent('loadDicomViewerUrls', {
-                "detail": {"images": images, "annontations": undefined}
-            });
-
-            $("#loading").hide()
-            if ($("#show-viewer").is(":checked")) {
-                window.dispatchEvent(event);
-                $("#single-dicom-viewer").show();
-            }
-
-
-
-        }
-        function ocr(url, input) {
-            Tesseract.recognize(
-                url,
-                'eng',
-                //{ logger: m => console.log(m) }
-            ).then(({
-                data: {
-                    text
+                const viewerElement = document.getElementById('single-dicom-viewer');
+                if (!viewerElement || !window.mountDicomViewers) {
+                    console.warn('dv3d not ready or viewer element missing');
+                    return;
                 }
-            }) => {
-                l = text.toLowerCase();
-                uploading_el = $(`img[data-input-id='${input.id}'], div[data-input-id='${input.id}']`)
-                uploading_el.removeClass("image-ident-loading");
-                if (l.includes("accession") || l.includes("number") || l.search(
-                    /(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
-                        console.log("Match found ", input);
-                        $(input).addClass("image-ident-warning");
-                        uploading_el.addClass("image-ident-warning");
-                        $("uploadButton").prop("disabled", true);
-                        toastr.warning(`File does not appear to be annonymised<br/>Image data burned in<br/>${element}`, 'Anonymisation warning', {
-                            "closeButton": false,
-                            "debug": false,
-                            "newestOnTop": false,
-                            "progressBar": false,
-                            "positionClass": "toast-top-full-width",
-                            "preventDuplicates": false,
-                            "onclick": null,
-                            "showDuration": "0",
-                            "hideDuration": "0",
-                            "timeOut": 0,
-                            "extendedTimeOut": 0,
-                            "showEasing": "swing",
-                            "hideEasing": "linear",
-                            "showMethod": "fadeIn",
-                            "hideMethod": "fadeOut",
-                        });
-                    } else {
-                        $(input).addClass("image-ident-ok");
 
-                    }
-            })
+                console.log('Clearing viewer element and mounting with', images.length, 'images');
+                // Clear any old viewer content before mounting dv3d
+                viewerElement.innerHTML = '';
 
+                // Mount dv3d viewer with images
+                window.mountDicomViewers(viewerElement, {
+                    imageIds: images,
+                    annotations: annotations,
+                });
+                console.log('dv3d viewer mounted successfully');
+            } catch (err) {
+                console.error('Failed to load dv3d viewer:', err);
+            }
         }
 
-        $(document).ready(function () {
-            document.getElementById("filepicker").addEventListener("change", async () => {
-                await loadDicomViewerUploads();
-                await processFilesWithDuplicateCheck();
-            });
+        const PHI_TAGS = [
+            "x00080050",  // Accession Number
+            "x00080020",  // Study Date
+            "x00100010",  // Patient Name
+            "x00100020",  // Patient ID
+            "x00100030",  // Patient Birth Date
+            "x00100040",  // Patient Sex
+            "x0010101b",  // Patient Address
+            "x00101010",  // Patient Age
+            "x00101040",  // Patient Telephone Numbers
+        ];
 
+        async function showDicomTags() {
+            const record = window.uploadPreview.currentTagsRecord;
+            if (!record) {
+                toastr.warning("No record selected.");
+                return;
+            }
 
-        // Add event listener to the button element
-            const uploadButton = document.getElementById("uploadButton");
-            uploadButton.addEventListener("click", onUploadButtonClicked);
+            try {
+                const buffer = await record.file.arrayBuffer();
+                const byteArray = new Uint8Array(buffer);
+                const dataSet = dicomParser.parseDicom(byteArray);
+                const tags = {};
+                const phiTags = [];
+
+                for (const tag in dataSet.elements) {
+                    try {
+                        const value = dataSet.string(tag);
+                        if (value && value.trim()) {
+                            tags[tag] = value.trim();
+                            if (PHI_TAGS.includes(tag)) {
+                                phiTags.push(tag);
+                            }
+                        }
+                    } catch (e) {}
+                }
+
+                const tbody = document.getElementById("tags-tbody");
+                if (!tbody) {
+                    toastr.error("Tags modal not found.");
+                    return;
+                }
+                tbody.innerHTML = "";
+                
+                if (Object.keys(tags).length === 0) {
+                    const row = document.createElement("tr");
+                    row.innerHTML = "<td colspan='2' class='text-muted'>No tags found</td>";
+                    tbody.appendChild(row);
+                } else {
+                    for (const [tag, value] of Object.entries(tags).sort()) {
+                        const isPhi = PHI_TAGS.includes(tag);
+                        const row = document.createElement("tr");
+                        row.className = isPhi ? "table-warning" : "";
+                        row.innerHTML = `<th style="width:35%" class="${isPhi ? "fw-bold" : ""}">${tag}${isPhi ? " ⚠️" : ""}</th><td>${document.createTextNode(value).nodeValue}</td>`;
+                        tbody.appendChild(row);
+                    }
+                }
+
+                if (phiTags.length) {
+                    document.getElementById("tags-warning-text").textContent = `Found ${phiTags.length} tag(s) with potentially patient identifiable data (highlighted in yellow).`;
+                    document.getElementById("tags-warning").style.display = "";
+                } else {
+                    document.getElementById("tags-warning").style.display = "none";
+                }
+                
+                const modal = new bootstrap.Modal(document.getElementById("dicomTagsModal"));
+                modal.show();
+            } catch (err) {
+                console.error(err);
+                toastr.error("Failed to parse DICOM tags: " + err.message);
+            }
+        }
+
+        document.addEventListener("click", (e) => {
+            if (e.target.closest("#tags-filter")) {
+                const q = (e.target.value || "").trim().toLowerCase();
+                const rows = document.querySelectorAll("#tags-tbody tr");
+                rows.forEach((row) => {
+                    const th = row.querySelector("th")?.textContent || "";
+                    const td = row.querySelector("td")?.textContent || "";
+                    row.style.display =
+                        !q || th.toLowerCase().includes(q) || td.toLowerCase().includes(q)
+                            ? ""
+                            : "none";
+                });
+            }
         });
 
-    </script>
-    <script type="text/hyperscript">
+        document.addEventListener("input", (e) => {
+            if (e.target.id === "tags-filter") {
+                const q = (e.target.value || "").trim().toLowerCase();
+                const rows = document.querySelectorAll("#tags-tbody tr");
+                rows.forEach((row) => {
+                    const th = row.querySelector("th")?.textContent || "";
+                    const td = row.querySelector("td")?.textContent || "";
+                    row.style.display =
+                        !q || th.toLowerCase().includes(q) || td.toLowerCase().includes(q)
+                            ? ""
+                            : "none";
+                });
+            }
+        });
 
-        init
-        add @disabled to #uploadButton
-        end
+        function initUploadPage() {
+            if (!document.getElementById("filepicker")) {
+                return;
+            }
+
+            document.addEventListener("click", async function (e) {
+                const includeSeries = e.target.closest(".include-series");
+                if (includeSeries) {
+                    applyIncludeToSeries(includeSeries.dataset.seriesUid, includeSeries.checked);
+                    buildSelectionSummary();
+                    await processDuplicates();
+                    renderGroupedPreview();
+                    return;
+                }
+
+                const includeStudy = e.target.closest(".include-study");
+                if (includeStudy) {
+                    applyIncludeToStudy(includeStudy.dataset.studyUid, includeStudy.dataset.value === "1");
+                    await processDuplicates();
+                    renderGroupedPreview();
+                    return;
+                }
+
+                const viewSeriesBtn = e.target.closest(".view-series-btn");
+                if (viewSeriesBtn) {
+                    const records = getSeriesRecords(viewSeriesBtn.dataset.seriesUid);
+                    showRecordsInViewer(records, `Series ${viewSeriesBtn.dataset.seriesUid}`);
+                    return;
+                }
+
+                const viewStudyBtn = e.target.closest(".view-study-btn");
+                if (viewStudyBtn) {
+                    const records = getStudyRecords(viewStudyBtn.dataset.studyUid);
+                    showRecordsInViewer(records, `Study ${viewStudyBtn.dataset.studyUid}`);
+                    return;
+                }
+            });
+
+            bindIfExists("check-anonymisation-tags", "change", () => {
+                window.uploadPreview.records.forEach((record) => evaluateTagWarnings(record));
+                renderGroupedPreview();
+            });
+
+            bindIfExists("check-anonymisation-ocr", "change", async () => {
+                showLoading(true, "Updating OCR checks...");
+                await runOcrChecks();
+                renderGroupedPreview();
+                showLoading(false);
+            });
+
+            bindIfExists("check-duplicates", "change", async () => {
+                await processDuplicates();
+                renderGroupedPreview();
+            });
+
+            bindIfExists("show-thumbnails", "change", () => {
+                renderGroupedPreview();
+            });
+
+            bindIfExists("override-anon", "click", () => {
+                window.uploadPreview.forceAnonymisationOverride = true;
+                updateUploadButtonState();
+                toastr.info("Anonymisation override enabled for this selection.");
+            });
+
+            bindIfExists("filepicker", "change", onFilesChanged);
+            bindIfExists("uploadButton", "click", onUploadButtonClicked);
+            bindIfExists("viewer-tags-btn", "click", showDicomTags);
+
+            // Prevent old Cornerstone viewer from interfering with dv3d on this page
+            window.skipLoadDicomViewer = true;
+
+            window.addEventListener("beforeunload", async () => {
+                if (window.uploadPreview.ocrWorker) {
+                    try { await window.uploadPreview.ocrWorker.terminate(); } catch (err) {}
+                }
+                window.uploadPreview.records.forEach((record) => {
+                    if (record.objectUrl) URL.revokeObjectURL(record.objectUrl);
+                });
+            });
+        }
+
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", initUploadPage);
+        } else {
+            initUploadPage();
+        }
     </script>
 {% endblock %}
 
 {% block css %}
     <style>
-        .duplicate-file-highlight {
-            background: #fff3cd !important;
-            border-left: 5px solid #dc3545 !important;
-            color: #856404 !important;
+        .study-block {
+            margin: 8px 0;
+            padding: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        .study-series-list {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .series-card {
+            flex: 1 1 calc(33.333% - 8px);
+            min-width: 280px;
+            list-style: none;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 10px;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.01);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            z-index: 0;
+        }
+
+        .series-card.warning {
+            border-color: rgba(245, 158, 11, 0.7);
+            background: rgba(245, 158, 11, 0.08);
+        }
+
+        .series-card.duplicate {
+            border-color: rgba(220, 53, 69, 0.8);
+            background: rgba(220, 53, 69, 0.08);
+        }
+
+        .series-header {
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .series-actions {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 6px;
+            min-width: 130px;
+            flex-shrink: 0;
+        }
+
+        .thumb-preview {
+            width: 140px;
+            max-width: 100%;
+            border-radius: 6px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .dicom-viewer {
+            min-height: 420px;
+        }
+
+        @media (max-width: 991px) {
+            .series-card {
+                flex: 1 1 calc(50% - 8px);
+                min-width: 260px;
+            }
+        }
+
+        @media (max-width: 575px) {
+            .series-card {
+                flex: 1 1 100%;
+                min-width: auto;
+            }
+            .series-header {
+                flex-direction: column;
+            }
+            .series-actions {
+                align-items: flex-start;
+            }
+        }
+
+        .dicom-viewer-root {
+            background: #222;
+        }
+
+        #tags-filter {
+            margin-bottom: 1rem;
+        }
+
+        .table-warning {
+            background-color: rgba(245, 158, 11, 0.1) !important;
+        }
+
+        .table-warning th {
+            color: #ffc107;
         }
     </style>
-{% endblock %}
\ No newline at end of file
+{% endblock %}