diff --git a/.cursor/rules/django_javascript_implementation.mdc b/.cursor/rules/django_javascript_implementation.mdc
index 03dd4a6d8..d4a0db04c 100644
--- a/.cursor/rules/django_javascript_implementation.mdc
+++ b/.cursor/rules/django_javascript_implementation.mdc
@@ -13,6 +13,10 @@ alwaysApply: true
 - Classes should follow DRY principles and avoid duplicating the functionality of existing classes.
 - Javascript added to existing templates should ONLY call existing classes to initialize them so their functions are available to run in the template.
 - Ignore and NEVER update files in the `deprecated/` folder.
+- Differentiation of code use by asset type should be configuration-driven, NOT by the method logic-driven.
+- Prefer more generic method implementations over specific, per-case basis implementations which lead to bloat.
+- If you notice multiple uses of the same block of code, consider adding a utils or manager method/class to handle that instead of repeating the same code everywhere.
+- When creating/naming a method, check if a method by the same name/function/use already exists. If so, point it out and suggest refactoring original method to be more generic.
 
 ## Django Template Structure
 
diff --git a/.cursor/skills/gateway-static-js-refactor/SKILL.md b/.cursor/skills/gateway-static-js-refactor/SKILL.md
new file mode 100644
index 000000000..842de697d
--- /dev/null
+++ b/.cursor/skills/gateway-static-js-refactor/SKILL.md
@@ -0,0 +1,142 @@
+---
+name: gateway-static-js-refactor
+description: Plans and executes refactors of SDS gateway browser JavaScript (gateway/sds_gateway/static/js) for brevity, lower complexity, parity, and reviewability. Uses Fallow metrics, Django template/RenderHTMLFragment rendering, DRY reuse, and django_javascript_implementation rules. Use for large JS refactors, reducing duplication, moving HTML out of JS, or when the user asks for refactor scenarios or fallow checks.
+---
+
+# Gateway static JS refactor
+
+## When to apply
+
+- Refactors under `gateway/sds_gateway/static/js/` (especially managers/handlers in `actions/`, `core/`, `dataset/`, `search/`, `share/`, `upload/`, `visualizations/`)
+- User wants **scenarios**, a **phased plan**, or **metrics before/after**
+- Removing inline HTML strings, cross-file duplication, or high-complexity hotspots
+- Aligning new behavior with existing classes instead of one-off helpers
+
+**Out of scope:** `deprecated/` (never edit). For tests after refactor, use [jest-test-writing](../jest-test-writing/SKILL.md).
+
+## Optimization goals (in order)
+
+1. **Functionality parity** — same user-visible behavior, API contracts, and error handling intent
+2. **Human reviewability** — small, ordered commits or phases; each diff explainable in one paragraph
+3. **Low method complexity** — shallow nesting, early returns, single responsibility
+4. **Brevity** — fewer lines only when clarity is preserved (not golf)
+
+## Mandatory conventions
+
+Follow `.cursor/rules/django_javascript_implementation.mdc` in full. Non-negotiables for refactors:
+
+| Area | Rule |
+|------|------|
+| JS location | Logic in `.js` files under `static/js/` subfolders; templates only **initialize** classes |
+| New files | Ask before new templates; ask before new `.js` files (purpose + function list) |
+| New classes | Own file in a subfolder (`actions/`, `core/`, …), not base `js/` |
+| HTML | Dynamic markup → `templates/.../components/*.html` + `POST /users/render-html/` via `APIClient` / `DOMUtils`; **never** build HTML fragments in JS |
+| Asset types | Configuration-driven (`constants/`, config objects), not `if (type === 'capture')` sprawl |
+| Reuse | Grep for existing method/class names; **extend or generalize** before adding parallel APIs |
+
+## Workflow
+
+Copy and track:
+
+```
+Refactor progress:
+- [ ] Baseline (fallow + identify targets)
+- [ ] Propose 2–4 scenarios (user picks or hybrid)
+- [ ] Implement phase 1 (smallest parity-preserving slice)
+- [ ] Tests + fallow + cross-file dupes
+- [ ] Implement remaining phases
+- [ ] Final metrics + review notes
+```
+
+### 1. Baseline (always run from `gateway/`)
+
+```bash
+npm run fallow
+npx fallow health --format human
+npx fallow dupes --format human
+npm run fallow:static-js
+bash scripts/fallow-cross-file-dupes.sh
+```
+
+For work on a branch, scope noise:
+
+```bash
+npx fallow audit --changed-since main --format human
+```
+
+Record: worst complexity hotspots, clone groups touching your files, new dead exports.
+
+Details: [fallow-gateway.md](fallow-gateway.md).
+
+### 2. Discover reuse (before writing code)
+
+- Search `static/js` for the same DOM ids, `render-html` templates, `ListRefreshManager`, `DOMUtils` helpers, and action manager patterns
+- Check `constants/` (`detailsModalConfig`, `FileListConfig`, permission levels)
+- Prefer widening an existing util/manager over a feature-specific function
+
+### 3. Propose refactor scenarios
+
+Present **2–4 options** with tradeoffs. Typical scenario types:
+
+| Scenario | Best when | Risk |
+|----------|-----------|------|
+| **Extract + name** | One 200+ line method or deep nesting | Low if tests exist |
+| **Consolidate duplicates** | Fallow `dupes` or copy-pasted blocks across files | Medium — watch cross-file pre-commit |
+| **Config extraction** | Repeated asset-type branches | Low if config matches existing constants style |
+| **Template migration** | Large `` `...html...` `` or string concatenation in JS | Medium — needs component template + view context |
+| **Delegate to existing API** | Reinventing list refresh, modals, permissions | Low |
+| **Split class by concern** | God-class with unrelated responsibilities | Higher — update imports/webpack if needed |
+
+Each scenario must state: **files touched**, **parity checks**, **fallow metrics expected to improve**, and **review story** (what reviewer should skim first).
+
+### 4. Implement (small phases)
+
+- One logical change per phase; run tests after each phase
+- After moving HTML to Django: JS only builds **context objects** and assigns `innerHTML` / `insertAdjacentHTML` from response
+- When generalizing a method, keep old call sites working or update all call sites in the same phase
+- Do not expand scope into unrelated templates/backend unless required for parity
+
+### 5. Verify
+
+From `gateway/`:
+
+```bash
+npm test
+npm run fallow
+npx fallow health --format human
+bash scripts/fallow-cross-file-dupes.sh
+```
+
+If behavior is UI-heavy, run through affected pages (modals, lists, upload, visualizations) per team practice.
+
+### 6. Deliverable for the user
+
+Short summary:
+
+- Chosen scenario and why
+- Before/after notes on complexity/dupes (from fallow)
+- Files changed
+- Manual test checklist (bullet list)
+- Any follow-ups (e.g. remove HTML fallbacks left for error paths)
+
+## Refactor heuristics
+
+- **Inline HTML in JS** → identify existing `users/components/*.html`; if none fits, propose **one** new component template (justify why partials/pages are wrong)
+- **Duplicate API calls** → shared method on manager or thin wrapper in `core/`
+- **Long switch on asset type** → move labels/URLs/permissions into config next to `detailsModalConfig` / `FileListConfig` patterns
+- **Complex async chains** → extract steps with clear names; keep orchestration in one place
+- **Fallback HTML in `catch`** → prefer a minimal error component template; avoid duplicating full happy-path markup
+
+## Review checklist (for PR description)
+
+- [ ] No new logic in Django templates except initialization
+- [ ] No new files under `static/js/` root; new classes in subfolders only
+- [ ] No edits under `deprecated/`
+- [ ] Cross-file dupes script passes
+- [ ] Jest updated or added for changed public behavior
+- [ ] Parity: lists, modals, permissions, and error states manually noted
+
+## Additional resources
+
+- Fallow commands and CI hooks: [fallow-gateway.md](fallow-gateway.md)
+- Project frontend rules: `.cursor/rules/django_javascript_implementation.mdc`
diff --git a/.cursor/skills/gateway-static-js-refactor/fallow-gateway.md b/.cursor/skills/gateway-static-js-refactor/fallow-gateway.md
new file mode 100644
index 000000000..8dc4214ce
--- /dev/null
+++ b/.cursor/skills/gateway-static-js-refactor/fallow-gateway.md
@@ -0,0 +1,64 @@
+# Fallow (gateway)
+
+Run all commands from `gateway/` (config: `.fallowrc.json`). Ignores `sds_gateway/static/js/deprecated/**`.
+
+## npm scripts
+
+| Script | Purpose |
+|--------|---------|
+| `npm run fallow` | `fallow --summary` (overview) |
+| `npm run fallow:static-js` | Dead-code per file under `static/js/` (full graph, scoped reporting) |
+
+## Commands to use in refactors
+
+```bash
+# Summary / combined view
+npm run fallow
+
+# Cyclomatic + cognitive hotspots (prioritize splits)
+npx fallow health --format human
+npx fallow health --format json -q   # machine-readable
+
+# Clone groups (in-file and cross-file)
+npx fallow dupes --format human
+npx fallow dupes --format json -q
+
+# Unused exports / cycles (static/js scoped via script)
+npm run fallow:static-js
+npx fallow dead-code --format human
+
+# Changed-files gate (PR-sized work)
+npx fallow audit --changed-since main --format human
+```
+
+## CI / pre-commit (must stay green)
+
+```bash
+bash scripts/fallow-cross-file-dupes.sh
+```
+
+Fails if any clone group spans **more than one file**. Fixing usually means shared helper or single canonical implementation.
+
+## Interpreting results
+
+| Signal | Typical refactor move |
+|--------|------------------------|
+| High cognitive/cyclomatic on one function | Extract helpers; early return; reduce branches |
+| Dupes across files | Shared util or generalize existing manager method |
+| Dead export after refactor | Remove export or wire usage; re-run `fallow:static-js` |
+| `audit --changed-since` only on touched files | Use while iterating; run full dupes/health before merge |
+
+## Config notes
+
+- `ignoreExportsUsedInFile: true` — same-file-only usage may not count as “used” for export pruning; prefer explicit exports only where needed.
+- Do not add `deprecated/` paths to analysis scope for fixes.
+
+## Optional
+
+```bash
+npx fallow config    # resolved config path
+npx fallow list      # entry points / discovered files
+npx fallow explain <issue-type>
+```
+
+For agent tooling: `npx fallow schema` (CLI JSON).
diff --git a/.cursor/skills/jest-test-writing/SKILL.md b/.cursor/skills/jest-test-writing/SKILL.md
new file mode 100644
index 000000000..e8a3ac68e
--- /dev/null
+++ b/.cursor/skills/jest-test-writing/SKILL.md
@@ -0,0 +1,126 @@
+---
+name: jest-test-writing
+description: Writes and refactors Jest unit tests for browser JS (jsdom), emphasizing behavior-focused tests, shared mocks, and repo conventions. Use when adding or updating tests under gateway/sds_gateway/static/js, fixing failing Jest runs, or when the user asks for Jest test best practices.
+---
+
+# Jest test writing (SDS gateway static JS)
+
+## When to apply
+
+- New or changed code under `gateway/sds_gateway/static/js/`
+- User asks for Jest patterns, test structure, or coverage for frontend managers/handlers
+- CI/local failure from `npm test` in `gateway/`
+
+## Run tests
+
+From `gateway/`:
+
+```bash
+npm test
+npm run test:watch
+npm run test:coverage
+```
+
+Config: `sds_gateway/static/js/tests-config/jest.config.js` (jsdom, `clearMocks` + `restoreMocks`).
+
+## File placement
+
+| Rule | Detail |
+|------|--------|
+| Co-locate | `SomeManager.js` → `__tests__/SomeManager.test.js` in the same folder |
+| Naming | `*.test.js` or `*.spec.js` (see `testMatch` in jest config) |
+| Skip | Never add tests for `deprecated/` |
+
+## What to test (and what not to)
+
+**Do**
+
+- Public methods and user-visible outcomes (DOM updates, calls to `DOMUtils`, `APIClient`, Bootstrap modal show/hide)
+- Branches that encode product rules (permissions denied, missing modal, API error responses)
+- Async flows: `await` the method under test, then assert mocks/callbacks
+
+**Avoid**
+
+- Asserting private helpers or internal call order unless order is the contract
+- Tests that only `expect(x).toBeDefined()` or mirror the implementation line-for-line
+- Copy-pasting 50-line mock trees—extend shared helpers instead
+
+## Shared infrastructure (use first)
+
+Read and reuse before inventing mocks:
+
+| Resource | Path |
+|----------|------|
+| DOM/API/permissions helpers | `sds_gateway/static/js/tests-config/testHelpers.js` |
+| Action-manager setups | `sds_gateway/static/js/__tests__/helpers/actionTestMocks.js` |
+| Global env | `sds_gateway/static/js/tests-config/jest.setup.js` |
+
+Common helpers:
+
+- `setupStandardUnitTest({ useModalDomUtils, apiClientOverrides, window, getElementByIdMap })` — resets mocks, stubs `document`, sets `window.DOMUtils`
+- `createMockDOMUtils` / `createMockDOMUtilsWithModals`
+- `createMockAPIClient`, `createMockPermissionsManager`
+- `flushMicrotasks()` — after fire-and-forget promises tied to `setTimeout(0)`
+- `installDocumentGetByIdMap({ id: element })` when code uses `getElementById`
+
+For Download/Share/Versioning action tests, prefer `setupDownloadActionTestEnvironment` / patterns in `actionTestMocks.js`.
+
+## Structure template
+
+```javascript
+/**
+ * Jest tests for TargetClass
+ */
+
+import { TargetClass } from "../TargetClass.js";
+import { setupStandardUnitTest, flushMicrotasks } from "../../tests-config/testHelpers.js";
+
+describe("TargetClass", () => {
+	beforeEach(() => {
+		setupStandardUnitTest({ /* opts */ });
+		// Extra per-suite: bootstrap, document.body, window globals
+	});
+
+	test("describes behavior in plain language", async () => {
+		// arrange → act → assert
+	});
+});
+```
+
+Use `require()` for helpers if the file already uses CommonJS; stay consistent within a file.
+
+## Mocking conventions (this repo)
+
+1. **Bootstrap modals** — set `global.bootstrap.Modal` and `Modal.getInstance` in `beforeEach` (see `ModalManager.test.js`, `actionTestMocks.installBootstrapModalMocks`).
+2. **`window.DOMUtils`** — via `setupStandardUnitTest` or explicit assign; use `.mockResolvedValue()` for async UI helpers.
+3. **`document`** — prefer `installDocumentGetByIdMap` or minimal stubs from testHelpers; use real `document.createElement` / `body.innerHTML` only when testing DOM wiring.
+4. **Module mocks** — `jest.mock("../Dependency.js")` at top level; factory returns minimal surface the unit needs.
+5. **Fetch / API** — mock `APIClient` methods or `window.fetch` with `createMockFetchResponse` / resolved shapes `{ success: true }` matching production handlers.
+
+## Async
+
+- Prefer `async/await` in tests over bare `.then()`.
+- If code schedules work on microtasks/macrotasks without returning a promise, `await flushMicrotasks()` before assertions.
+- Fake timers: use `jest.useFakeTimers()` only when testing timer logic; restore in `afterEach`.
+
+## Assertions
+
+- One logical behavior per test name (readable as a spec sentence).
+- Assert on **arguments** to mocks when the contract is “calls X with Y” (`toHaveBeenCalledWith`).
+- For errors: assert rejected promise or that `showError` / `showModalError` was invoked with expected message.
+
+## Coverage
+
+Global thresholds (70%) in jest config. New code should not drop coverage on touched files; add tests for new branches rather than excluding files.
+
+## Checklist before finishing
+
+- [ ] Test file lives in `__tests__/` next to source
+- [ ] Reused `testHelpers` / `actionTestMocks` where applicable
+- [ ] `beforeEach` resets DOM/globals needed for isolation
+- [ ] Tests describe behavior, not implementation trivia
+- [ ] `npm test` passes from `gateway/`
+
+## More detail
+
+See [reference.md](reference.md) for helper exports and example patterns.
diff --git a/.cursor/skills/jest-test-writing/reference.md b/.cursor/skills/jest-test-writing/reference.md
new file mode 100644
index 000000000..7ed9851a7
--- /dev/null
+++ b/.cursor/skills/jest-test-writing/reference.md
@@ -0,0 +1,70 @@
+# Jest helpers reference (gateway static JS)
+
+## testHelpers.js (primary exports)
+
+| Export | Use when |
+|--------|----------|
+| `setupStandardUnitTest` | Default start of unit test `beforeEach` |
+| `createMockDOMUtils` | Class uses `window.DOMUtils` without modals |
+| `createMockDOMUtilsWithModals` | Modal loading/error/open/close |
+| `createMockAPIClient` | Inject or assign API client mock |
+| `createMockPermissionsManager` | Permission-gated actions |
+| `installDocumentGetByIdMap` | Code looks up specific element IDs |
+| `installMinimalDocumentMocks` / `installDocumentQueryStubs` | Low-level DOM stubs |
+| `mergeWindowMocks` | Attach globals (`downloadActionManager`, etc.) |
+| `flushMicrotasks` | Settle `setTimeout(0)` chains |
+| `createMockFetchResponse` / `mockFetchResolved` | Raw `fetch` tests |
+| `installCsrfMetaToken` | `APIClient` / CSRF paths |
+| `createPublishingSubmitDomFixture` | Publish flow DOM |
+| `createDefaultAssetSearchConfig` | Search handler tests |
+
+`setupStandardUnitTest` always calls `jest.clearAllMocks()` and installs document stubs; pass `useModalDomUtils: true` for action/modal suites.
+
+## actionTestMocks.js
+
+| Export | Use when |
+|--------|----------|
+| `setupDownloadActionTestEnvironment` | Download action manager tests |
+| `installBootstrapModalMocks` | Any Bootstrap 5 modal interaction |
+| `createMockDownloadPermissions` | Download permission checks |
+| `createDefaultShareActionConfig` | Share action defaults |
+
+## Example: permission denied
+
+```javascript
+setupStandardUnitTest({
+	apiClientOverrides: { post: jest.fn().mockResolvedValue({ success: false, message: "Forbidden" }) },
+});
+const manager = new SomeActionManager({ permissions: { canShare: false } });
+await manager.submit();
+expect(window.DOMUtils.showError).toHaveBeenCalled();
+```
+
+## Example: DOM id map
+
+```javascript
+const form = createMockFormElement();
+setupStandardUnitTest({
+	getElementByIdMap: { "share-form": form },
+});
+```
+
+## jest.setup.js
+
+Provides baseline `document`, `window`, `fetch`, storage, and timers. Do not duplicate full window mocks in every file—override only what the test needs in `beforeEach`.
+
+## Import paths
+
+From `actions/__tests__/Foo.test.js`:
+
+```javascript
+const { setupStandardUnitTest } = require("../../tests-config/testHelpers.js");
+```
+
+From `actions/details/__tests__/Bar.test.js`:
+
+```javascript
+const { setupStandardUnitTest } = require("../../../tests-config/testHelpers.js");
+```
+
+Adjust `../` depth to reach `tests-config/`.
diff --git a/.github/workflows/gwy-code-quality.yaml b/.github/workflows/gwy-code-quality.yaml
index 00c8eb2bf..aa40f62bf 100644
--- a/.github/workflows/gwy-code-quality.yaml
+++ b/.github/workflows/gwy-code-quality.yaml
@@ -58,6 +58,10 @@ jobs:
                   key: prek-gateway-${{ hashFiles('gateway/.pre-commit-config.yaml') }}
                   path: ~/.cache/prek/
 
+            - name: Install gateway frontend dependencies
+              working-directory: ./gateway
+              run: npm ci
+
             - name: Install hooks
               working-directory: ./gateway
               run: uv run --extra local prek install --install-hooks
diff --git a/.github/workflows/sdk-code-quality.yaml b/.github/workflows/sdk-code-quality.yaml
index 21d5443f4..d33a2bc44 100644
--- a/.github/workflows/sdk-code-quality.yaml
+++ b/.github/workflows/sdk-code-quality.yaml
@@ -54,6 +54,10 @@ jobs:
                   key: prek-${{ hashFiles('.pre-commit-config.yaml') }}
                   path: ~/.cache/prek/
 
+            - name: Install gateway frontend dependencies
+              working-directory: ./gateway
+              run: npm ci
+
             - name: Install hooks
               working-directory: ./sdk
               run: uv run --dev prek install --install-hooks
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index c8c6962b2..58e8f055a 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -107,6 +107,12 @@ repos:
             language: system
             pass_filenames: false # run once per commit, not per file
             types: [ python ]
+          - id: fallow-cross-file-dupes
+            name: fallow cross-file dupes (gateway static js)
+            entry: bash gateway/scripts/fallow-cross-file-dupes.sh
+            language: system
+            pass_filenames: false
+            files: ^gateway/sds_gateway/static/js/.*\.js$
 
 # sets up .pre-commit-ci.yaml to ensure pre-commit dependencies stay up to date
 ci:
diff --git a/gateway/.fallowrc.json b/gateway/.fallowrc.json
new file mode 100644
index 000000000..ff1e56d05
--- /dev/null
+++ b/gateway/.fallowrc.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
+	"ignorePatterns": [
+		"sds_gateway/static/js/deprecated/**",
+		"compose/**",
+		"sds_gateway/static/css/**"
+	],
+	"ignoreExportsUsedInFile": true
+}
diff --git a/gateway/.gitignore b/gateway/.gitignore
index 76db6d0a6..c310d5cbb 100644
--- a/gateway/.gitignore
+++ b/gateway/.gitignore
@@ -278,6 +278,8 @@ tags
 dump.rdb
 
 ### Project template
+.fallow/
+
 sds_gateway/media/
 
 .pytest_cache/
diff --git a/gateway/package-lock.json b/gateway/package-lock.json
index 33067a8af..59873bc45 100644
--- a/gateway/package-lock.json
+++ b/gateway/package-lock.json
@@ -21,6 +21,7 @@
 				"babel-loader": "^9.2.1",
 				"bootstrap": "^5.3.3",
 				"css-loader": "^6.5.1",
+				"fallow": "^2.74.0",
 				"jest": "^29.7.0",
 				"jest-environment-jsdom": "^29.7.0",
 				"mini-css-extract-plugin": "^2.9.1",
@@ -3092,6 +3093,118 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/@fallow-cli/darwin-arm64": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/darwin-arm64/-/darwin-arm64-2.74.0.tgz",
+			"integrity": "sha512-zpxOjs8YdVgq82JSQbjph2Zzp8dlNBLC3vWcyAsmoUlnQxUTfmQbCM6PMugrs+7iMpp1IgTIjVXfZsnbua+L1Q==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@fallow-cli/darwin-x64": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/darwin-x64/-/darwin-x64-2.74.0.tgz",
+			"integrity": "sha512-0QCR3fsnbhmaHLLIMdhEMeoyvNAP6oxNAyVA3Te3eGjVum7yVy9P7FzN44D1pPerb1qriG4MsJOOfT8Hix/9jg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@fallow-cli/linux-arm64-gnu": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/linux-arm64-gnu/-/linux-arm64-gnu-2.74.0.tgz",
+			"integrity": "sha512-iGsRcR9+fd5WpybXFTBjw1mJigePJgdqp8T6NAqwgz0DgBUB1s8PpAnOUQRLtshfNAhsJdxZTakFuNdV8R7VTQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@fallow-cli/linux-arm64-musl": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/linux-arm64-musl/-/linux-arm64-musl-2.74.0.tgz",
+			"integrity": "sha512-9uqyXjhp5kRwJxucRxChN4/YmuDyuoPx2iKzqW73JgU08BGIJyY5Olq4B594MmqRrjwmsFm7jFKT8x9BbSvWlA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@fallow-cli/linux-x64-gnu": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/linux-x64-gnu/-/linux-x64-gnu-2.74.0.tgz",
+			"integrity": "sha512-K2ghYaXH8kmeos9bAKG7+HQLU7Y/hbm/+p9ZyTD28U/S/PdHtiny8KmuCCC7uisy9nUmTnyy59YX///3lkIqxA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@fallow-cli/linux-x64-musl": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/linux-x64-musl/-/linux-x64-musl-2.74.0.tgz",
+			"integrity": "sha512-3YSBIZLEXs47HX8HI2wr+C0QAuqF3eeB+3uDIijXgF0guE58iUrzFLOoFAqEv4cuv5WTvD/PtMllWyCPWkiIaQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@fallow-cli/win32-arm64-msvc": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/win32-arm64-msvc/-/win32-arm64-msvc-2.74.0.tgz",
+			"integrity": "sha512-wjCHg6iKjTwRg2AJ2wl2ryil5XAtxNwI1JbxC7I32uD4mZUnBqDNkijecC61ZGg18JpE3vsumwzqcZbQgPtwdw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@fallow-cli/win32-x64-msvc": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/@fallow-cli/win32-x64-msvc/-/win32-x64-msvc-2.74.0.tgz",
+			"integrity": "sha512-y5AsMPWWlI3gTrsFA+7ggeAMUbQjBQE15i+wu9LLlQs43RQdfY9DylYcMVw8gcQmxx0d+PcL/1WyJYdr8CeqSw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
 		"node_modules/@istanbuljs/load-nyc-config": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -6577,7 +6690,6 @@
 			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
 			"dev": true,
 			"license": "Apache-2.0",
-			"optional": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -7072,6 +7184,35 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/fallow": {
+			"version": "2.74.0",
+			"resolved": "https://registry.npmjs.org/fallow/-/fallow-2.74.0.tgz",
+			"integrity": "sha512-Ym1hY5E/5hex0THEfjMrJ0tDPRc0Ax4q+rS8EeVprpG/etpkOa6hSeWktyuG+Bhj7E+PotHg8vrATEGQpNo6qw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"dependencies": {
+				"detect-libc": "2.1.2"
+			},
+			"bin": {
+				"fallow": "bin/fallow",
+				"fallow-lsp": "bin/fallow-lsp",
+				"fallow-mcp": "bin/fallow-mcp"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"optionalDependencies": {
+				"@fallow-cli/darwin-arm64": "2.74.0",
+				"@fallow-cli/darwin-x64": "2.74.0",
+				"@fallow-cli/linux-arm64-gnu": "2.74.0",
+				"@fallow-cli/linux-arm64-musl": "2.74.0",
+				"@fallow-cli/linux-x64-gnu": "2.74.0",
+				"@fallow-cli/linux-x64-musl": "2.74.0",
+				"@fallow-cli/win32-arm64-msvc": "2.74.0",
+				"@fallow-cli/win32-x64-msvc": "2.74.0"
+			}
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
diff --git a/gateway/package.json b/gateway/package.json
index 45ab09302..180a4c490 100644
--- a/gateway/package.json
+++ b/gateway/package.json
@@ -2,6 +2,7 @@
 	"name": "sds_gateway",
 	"version": "0.0.1",
 	"devDependencies": {
+		"fallow": "^2.74.0",
 		"@babel/core": "^7.25.2",
 		"@babel/plugin-transform-runtime": "^7.25.4",
 		"@babel/preset-env": "^7.25.4",
@@ -50,6 +51,8 @@
 		"test": "jest --config sds_gateway/static/js/tests-config/jest.config.js",
 		"test:watch": "jest --config sds_gateway/static/js/tests-config/jest.config.js --watch",
 		"test:coverage": "jest --config sds_gateway/static/js/tests-config/jest.config.js --coverage",
-		"test:ci": "jest --config sds_gateway/static/js/tests-config/jest.config.js --ci --coverage --watchAll=false"
+		"test:ci": "jest --config sds_gateway/static/js/tests-config/jest.config.js --ci --coverage --watchAll=false",
+		"fallow": "fallow --summary",
+		"fallow:static-js": "node scripts/fallow-static-js-dead-code.cjs"
 	}
 }
diff --git a/gateway/scripts/fallow-cross-file-dupes.sh b/gateway/scripts/fallow-cross-file-dupes.sh
new file mode 100755
index 000000000..6ac01cf41
--- /dev/null
+++ b/gateway/scripts/fallow-cross-file-dupes.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+npx fallow dupes --format json -q | jq -e '
+  [ (.clone_groups // .dupes.clone_groups // [])[]
+    | select((.instances | map(.file) | unique | length) > 1)
+  ] | length == 0
+' >/dev/null
+
+echo "No cross-file clone groups detected."
\ No newline at end of file
diff --git a/gateway/scripts/fallow-static-js-dead-code.cjs b/gateway/scripts/fallow-static-js-dead-code.cjs
new file mode 100644
index 000000000..b39538b53
--- /dev/null
+++ b/gateway/scripts/fallow-static-js-dead-code.cjs
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+/**
+ * Runs `fallow dead-code` with `--file` for each non-deprecated `.js` under
+ * `sds_gateway/static/js/` so reported issues are limited to that tree while
+ * the full project graph (webpack + templates) still resolves usage.
+ */
+const { spawnSync } = require("node:child_process");
+const fs = require("node:fs");
+const path = require("node:path");
+
+const root = path.join(__dirname, "..");
+const base = path.join(root, "sds_gateway/static/js");
+const deprecated = path.join(base, "deprecated") + path.sep;
+
+function walk(dir, out) {
+	for (const ent of fs.readdirSync(dir, { withFileTypes: true })) {
+		const p = path.join(dir, ent.name);
+		if (p.startsWith(deprecated)) continue;
+		if (ent.isDirectory()) walk(p, out);
+		else if (p.endsWith(".js")) out.push(path.relative(root, p));
+	}
+}
+
+const files = [];
+walk(base, files);
+const args = ["dead-code"];
+for (const f of files) {
+	args.push("--file", f);
+}
+const bin = path.join(root, "node_modules", ".bin", "fallow");
+const r = spawnSync(bin, args, { cwd: root, stdio: "inherit" });
+process.exit(r.status === null ? 1 : r.status);
diff --git a/gateway/sds_gateway/api_methods/models.py b/gateway/sds_gateway/api_methods/models.py
index f2cdd446c..608ca39c4 100644
--- a/gateway/sds_gateway/api_methods/models.py
+++ b/gateway/sds_gateway/api_methods/models.py
@@ -15,6 +15,7 @@
 from django.db import models
 from django.db.models import Count
 from django.db.models import ProtectedError
+from django.db.models import Q
 from django.db.models import QuerySet
 from django.db.models import Sum
 from django.db.models.signals import post_save
@@ -498,6 +499,66 @@ def get_drf_data_files_stats(self) -> dict[str, int]:
         }
         return self._drf_data_files_stats_cache
 
+    def get_capture_files_stats(self) -> dict[str, int]:
+        """
+        Count + total size for all files linked to this capture (any type).
+
+        Cached per instance.
+        """
+        if hasattr(self, "_capture_files_stats_cache"):
+            return self._capture_files_stats_cache
+
+        from sds_gateway.api_methods.utils.relationship_utils import (  # noqa: PLC0415
+            get_capture_files,
+        )
+
+        qs = get_capture_files(self, include_deleted=False)
+        agg = qs.aggregate(total_count=Count("pk"), total_size=Sum("size"))
+        self._capture_files_stats_cache = {
+            "total_count": agg["total_count"] or 0,
+            "total_size": int(agg["total_size"] or 0),
+        }
+        return self._capture_files_stats_cache
+
+    def get_files_summary(self) -> dict[str, Any]:
+        """
+        Unified file summary for API/UI (all capture types).
+
+        Cached per instance. DRF captures include a ``data_files`` subset.
+        """
+        if hasattr(self, "_files_summary_cache"):
+            return self._files_summary_cache
+
+        all_stats = self.get_capture_files_stats()
+        summary: dict[str, Any] = {
+            "total_count": all_stats["total_count"],
+            "total_size": all_stats["total_size"],
+        }
+
+        if self.capture_type == CaptureType.DigitalRF:
+            drf = self.get_drf_data_files_stats()
+            count = drf["total_count"]
+            size = drf["total_size"]
+            summary["data_files"] = {
+                "count": count,
+                "total_size": size,
+                "per_data_file_size": (float(size) / count) if count else None,
+            }
+            if summary["total_size"] < size:
+                log.warning(
+                    (
+                        "Capture %s: total_size (%s) < data_files total_size (%s); "
+                        "using data total."
+                    ),
+                    str(self.uuid),
+                    summary["total_size"],
+                    size,
+                )
+                summary["total_size"] = size
+
+        self._files_summary_cache = summary
+        return self._files_summary_cache
+
     def get_opensearch_metadata(self) -> dict[str, Any]:
         """
         Query OpenSearch for frequency metadata for this specific capture.
@@ -912,6 +973,53 @@ def from_db(cls, db, field_names, values):
                 setattr(instance, field, json.loads(getattr(instance, field)))
         return instance
 
+    def get_dataset_file_statistics(self) -> dict[str, int]:
+        """
+        Aggregate file counts/sizes for this dataset (artifacts + capture files).
+
+        Cached per instance. One queryset pass for totals; separate filters for
+        capture-linked vs artifact-only files.
+        """
+        if hasattr(self, "_dataset_file_statistics_cache"):
+            return self._dataset_file_statistics_cache
+
+        from sds_gateway.api_methods.utils.relationship_utils import (  # noqa: PLC0415
+            get_dataset_files_including_captures,
+        )
+
+        files_qs = get_dataset_files_including_captures(self, include_deleted=False)
+        total_files = files_qs.count()
+        total_size = int(
+            files_qs.aggregate(total=Sum("size"))["total"] or 0,
+        )
+        captures_count = (
+            files_qs.filter(Q(capture__isnull=False) | Q(captures__isnull=False))
+            .distinct()
+            .count()
+        )
+        artifacts_count = files_qs.filter(
+            capture__isnull=True,
+            captures__isnull=True,
+        ).count()
+
+        self._dataset_file_statistics_cache = {
+            "total_files": total_files,
+            "captures": captures_count,
+            "artifacts": artifacts_count,
+            "total_size": total_size,
+        }
+        return self._dataset_file_statistics_cache
+
+    def get_files_summary(self) -> dict[str, Any]:
+        """Alias for dataset file statistics in API serializers."""
+        stats = self.get_dataset_file_statistics()
+        return {
+            "total_count": stats["total_files"],
+            "total_size": stats["total_size"],
+            "capture_linked_files": stats["captures"],
+            "artifact_files": stats["artifacts"],
+        }
+
     def get_authors_display(self):
         """Get the authors as a list for display purposes."""
         if not self.authors:
diff --git a/gateway/sds_gateway/api_methods/serializers/capture_serializers.py b/gateway/sds_gateway/api_methods/serializers/capture_serializers.py
index ff0e9129e..d3f3dd8ff 100644
--- a/gateway/sds_gateway/api_methods/serializers/capture_serializers.py
+++ b/gateway/sds_gateway/api_methods/serializers/capture_serializers.py
@@ -15,6 +15,7 @@
 from sds_gateway.api_methods.helpers.index_handling import retrieve_indexed_metadata
 from sds_gateway.api_methods.models import Capture
 from sds_gateway.api_methods.models import CaptureType
+from sds_gateway.api_methods.models import PermissionLevel
 from sds_gateway.api_methods.models import DEPRECATEDPostProcessedData
 from sds_gateway.api_methods.models import File
 from sds_gateway.api_methods.models import ItemType
@@ -115,8 +116,10 @@ class CaptureGetSerializer(serializers.ModelSerializer[Capture]):
     share_permissions = serializers.SerializerMethodField()
     is_shared = serializers.SerializerMethodField()
     is_shared_with_me = serializers.SerializerMethodField()
+    permission_level = serializers.SerializerMethodField()
     capture_props = serializers.SerializerMethodField()
     files = serializers.SerializerMethodField()
+    total_file_count = serializers.SerializerMethodField()
     total_file_size = serializers.SerializerMethodField()
     data_files_info = serializers.SerializerMethodField()
     datasets = serializers.SerializerMethodField()
@@ -136,7 +139,7 @@ class CaptureGetSerializer(serializers.ModelSerializer[Capture]):
     def get_datasets(self, capture: Capture) -> list[dict[str, Any]]:
         """Datasets linked to this capture (summary rows only; avoids nested graphs)."""
         qs = get_capture_datasets(capture, include_deleted=False)
-        return DatasetSummarySerializer(qs, many=True, context=self.context).data
+        return DatasetSummarySerializer(qs, many=True, context=self.context or {}).data
 
     def get_share_permissions(self, capture: Capture) -> list[UserSharePermission]:
         """Get the share permissions for the capture."""
@@ -158,7 +161,7 @@ def get_is_shared_with_me(self, capture: Capture) -> bool:
                 item_uuid=capture.uuid,
                 is_enabled=True,
                 is_deleted=False,
-            ).exists()
+            ).exclude(owner=request.user).exists()
         return False
 
     def get_is_shared(self, capture: Capture) -> bool:
@@ -169,56 +172,68 @@ def get_is_shared(self, capture: Capture) -> bool:
         """
         return check_if_shared(capture.uuid, ItemType.CAPTURE)
 
+    def get_permission_level(self, capture: Capture) -> PermissionLevel | None:
+        """Get the current user's permission level for this capture."""
+        request = (self.context or {}).get("request")
+        if not request or not hasattr(request, "user"):
+            return None
+
+        # Check if user is the owner
+        if capture.owner == request.user:
+            return PermissionLevel.OWNER
+
+        # Check for shared permissions
+        permission = UserSharePermission.objects.filter(
+            shared_with=request.user,
+            item_type=ItemType.CAPTURE,
+            item_uuid=capture.uuid,
+            is_enabled=True,
+            is_deleted=False,
+        ).first()
+
+        return permission.permission_level if permission else None
+
     def get_files(self, capture: Capture) -> ReturnList[File]:
         """Get the files for the capture.
 
         Returns:
             A list of serialized file objects with uuid, name, and directory fields.
         """
+        exclude_files = (self.context or {}).get("exclude_files", False)
+        if exclude_files:
+            return []
+
         non_deleted_files = get_capture_files(capture, include_deleted=False)
         return FileSummarySerializer(
-            non_deleted_files, many=True, context=self.context
+            non_deleted_files, many=True, context=self.context or {}
         ).data
 
     @extend_schema_field(serializers.IntegerField(allow_null=True))
-    def get_total_file_size(self, capture: Capture) -> int | None:
-        """Get the total file size of all files associated with this capture."""
-
-        if capture.capture_type != CaptureType.DigitalRF:
-            return None
-
-        all_files = get_capture_files(capture, include_deleted=False)
-        result = all_files.aggregate(total_size=Sum("size"))
-        total = result["total_size"] or 0
-        data_total = self.get_data_files_info(capture).get("total_size", 0)
-        if total < data_total:
-            logging.getLogger(__name__).warning(
-                (
-                    "Capture %s: total_file_size (%s) < data_files_total_size (%s); "
-                    "using data total."
-                ),
-                str(capture.uuid),
-                total,
-                data_total,
-            )
-            total = data_total
+    def get_total_file_count(self, capture: Capture) -> int:
+        """Get the total file count for the capture."""
+        return capture.get_files_summary()["total_count"]
 
-        return total
+    @extend_schema_field(serializers.IntegerField(allow_null=True))
+    def get_total_file_size(self, capture: Capture) -> int:
+        """Get the total file size of all files associated with this capture."""
+        return capture.get_files_summary()["total_size"]
 
     @extend_schema_field(serializers.DictField(allow_null=True))
     def get_data_files_info(self, capture: Capture) -> dict[str, Any]:
-        """Get the data files info for the capture."""
-        if capture.capture_type != CaptureType.DigitalRF:
-            return {}
-
-        stats = capture.get_drf_data_files_stats()
-        total_size = stats["total_size"]
-        count = stats["total_count"]
-        return {
-            "count": count,
-            "total_size": total_size,
-            "per_data_file_size": (float(total_size) / count) if count else None,
+        """Get the file summary for the capture (all types; DRF includes data_files)."""
+        summary = capture.get_files_summary()
+        data_files = summary.get("data_files")
+        result: dict[str, Any] = {
+            "total_count": summary["total_count"],
+            "total_size": summary["total_size"],
         }
+        if data_files:
+            result["count"] = data_files["count"]
+            result["data_files_total_size"] = data_files["total_size"]
+            result["per_data_file_size"] = data_files.get("per_data_file_size")
+        else:
+            result["count"] = summary["total_count"]
+        return result
 
     @extend_schema_field(serializers.FloatField)
     def get_center_frequency_ghz(self, capture: Capture) -> float | None:
@@ -487,6 +502,7 @@ class CompositeCaptureSerializer(serializers.Serializer):
     # Computed fields
     share_permissions = serializers.SerializerMethodField()
     files = serializers.SerializerMethodField()
+    total_file_count = serializers.SerializerMethodField()
     total_file_size = serializers.SerializerMethodField()
     data_files_info = serializers.SerializerMethodField()
     formatted_created_at = serializers.SerializerMethodField()
@@ -619,7 +635,12 @@ def get_is_shared(self, obj: dict[str, Any]) -> bool:
 
     def get_files(self, obj: dict[str, Any]) -> ReturnList[File]:
         """Get all files from all channels in the composite capture."""
-        all_files = []
+        all_files: list[File] = []
+        
+        exclude_files = (self.context or {}).get("exclude_files", False)
+        if exclude_files:
+            return all_files
+
         for channel_data in obj.get("channels") or []:
             capture = self._capture_for_channel(obj, channel_data)
             if capture is None:
@@ -628,61 +649,61 @@ def get_files(self, obj: dict[str, Any]) -> ReturnList[File]:
             serializer = FileSummarySerializer(
                 non_deleted_files,
                 many=True,
-                context=self.context,
+                context=self.context or {},
             )
             all_files.extend(serializer.data)
         return cast("ReturnList[File]", all_files)
 
-    def get_total_file_size(self, obj: dict[str, Any]) -> int | None:
-        """Get the total file size across all channels."""
-        if obj["capture_type"] != CaptureType.DigitalRF:
-            return None
+    @extend_schema_field(serializers.IntegerField())
+    def get_total_file_count(self, obj: dict[str, Any]) -> int:
+        """Total file count across all channels."""
+        total = 0
+        for channel_data in obj.get("channels") or []:
+            capture = self._capture_for_channel(obj, channel_data)
+            if capture is None:
+                continue
+            total += capture.get_files_summary()["total_count"]
+        return total
 
+    @extend_schema_field(serializers.IntegerField())
+    def get_total_file_size(self, obj: dict[str, Any]) -> int:
+        """Total file size across all channels."""
         total_size = 0
         for channel_data in obj.get("channels") or []:
             capture = self._capture_for_channel(obj, channel_data)
             if capture is None:
                 continue
-            all_files = get_capture_files(capture, include_deleted=False)
-            result = all_files.aggregate(total_size=Sum("size"))
-            total_size += result["total_size"] or 0
-
-        data_total = self.get_data_files_info(obj).get("total_size", 0)
-
-        if total_size < data_total:
-            logging.getLogger(__name__).warning(
-                (
-                    "Composite capture: total_file_size (%s) < "
-                    "data_files_total_size (%s); using data total."
-                ),
-                total_size,
-                data_total,
-            )
-            total_size = data_total
+            total_size += capture.get_files_summary()["total_size"]
         return total_size
 
     def get_data_files_info(self, obj: dict[str, Any]) -> dict[str, Any]:
-        """Get the data files info for the composite capture."""
-        if obj["capture_type"] != CaptureType.DigitalRF:
-            return {}
-
+        """File summary aggregated across composite channels."""
         total_count = 0
         total_size = 0
+        drf_count = 0
+        drf_size = 0
         for channel_data in obj.get("channels") or []:
             capture = self._capture_for_channel(obj, channel_data)
             if capture is None:
                 continue
-            stats = capture.get_drf_data_files_stats()
-            total_count += stats["total_count"]
-            total_size += stats["total_size"]
-
-        return {
-            "count": total_count,
+            summary = capture.get_files_summary()
+            total_count += summary["total_count"]
+            total_size += summary["total_size"]
+            data_files = summary.get("data_files")
+            if data_files:
+                drf_count += data_files["count"]
+                drf_size += data_files["total_size"]
+
+        result: dict[str, Any] = {
+            "count": drf_count if drf_count else total_count,
             "total_size": total_size,
-            "per_data_file_size": (float(total_size) / total_count)
-            if total_count
-            else None,
+            "total_count": total_count,
         }
+        if drf_count:
+            result["per_data_file_size"] = (
+                float(drf_size) / drf_count if drf_count else None
+            )
+        return result
 
     @extend_schema_field(serializers.CharField)
     def get_formatted_created_at(self, obj: dict[str, Any]) -> str:
diff --git a/gateway/sds_gateway/api_methods/serializers/dataset_serializers.py b/gateway/sds_gateway/api_methods/serializers/dataset_serializers.py
index 72dd9b657..d99eb826e 100644
--- a/gateway/sds_gateway/api_methods/serializers/dataset_serializers.py
+++ b/gateway/sds_gateway/api_methods/serializers/dataset_serializers.py
@@ -1,5 +1,7 @@
 """Dataset serializers for the API methods."""
 
+from typing import Any
+
 from rest_framework import serializers
 
 from sds_gateway.api_methods.models import Dataset
@@ -37,6 +39,7 @@ class DatasetGetSerializer(serializers.ModelSerializer[Dataset]):
     share_permissions = serializers.SerializerMethodField()
     captures = serializers.SerializerMethodField()
     files = serializers.SerializerMethodField()
+    data_files_info = serializers.SerializerMethodField()
     owner_name = serializers.SerializerMethodField()
     owner_email = serializers.SerializerMethodField()
     permission_level = serializers.SerializerMethodField()
@@ -62,7 +65,7 @@ def get_is_shared_with_me(self, obj):
                 item_uuid=obj.uuid,
                 is_enabled=True,
                 is_deleted=False,
-            ).exists()
+            ).exclude(owner=request.user).exists()
         return False
 
     def get_is_owner(self, obj):
@@ -148,6 +151,10 @@ def get_files(self, obj: Dataset) -> list[dict]:
         Returns:
             A list of serialized file objects
         """
+        exclude_files = (self.context or {}).get("exclude_files", False)
+        if exclude_files:
+            return []
+
         non_deleted_files = get_dataset_artifact_files(
             obj,
             include_deleted=False,
@@ -155,17 +162,21 @@ def get_files(self, obj: Dataset) -> list[dict]:
         serializer = FileSummarySerializer(
             non_deleted_files,
             many=True,
-            context=self.context,
+            context=self.context or {},
         )
         return serializer.data
 
+    def get_data_files_info(self, obj: Dataset) -> dict[str, Any]:
+        """File summary for the dataset (counts and sizes, no file listing)."""
+        return obj.get_files_summary()
+
     def get_captures(self, obj: Dataset) -> list[dict]:
         """Captures for the dataset (one summary row per logical capture).
 
         Multi-channel uploads share ``top_level_dir`` and are merged into one summary
         row (see :func:`summary_serializers.composite_capture_summary`).
         """
-        return serialize_captures_for_detail(obj, context=self.context)
+        return serialize_captures_for_detail(obj, context=self.context or {})
 
     def get_is_shared(self, obj):
         """Check if the dataset is shared."""
@@ -319,7 +330,12 @@ class Meta:
         ]
 
 
-def get_dataset_serializer(dataset: Dataset, *, has_user_access: bool) -> dict:  # pyright: ignore[reportMissingTypeArgument]
+def get_dataset_serializer(
+    dataset: Dataset,
+    *,
+    has_user_access: bool,
+    context: dict[str, Any] | None = None,
+) -> dict:  # pyright: ignore[reportMissingTypeArgument]
     """
     Get serialized dataset data using the appropriate serializer.
 
@@ -337,5 +353,5 @@ def get_dataset_serializer(dataset: Dataset, *, has_user_access: bool) -> dict:
           (excludes sensitive fields like shared_with user IDs)
     """
     if has_user_access:
-        return DatasetGetSerializer(dataset).data
+        return DatasetGetSerializer(dataset, context=context or {}).data
     return DatasetPublicSerializer(dataset).data
diff --git a/gateway/sds_gateway/static/css/components.css b/gateway/sds_gateway/static/css/components.css
index 13f53494d..d9510c9fa 100644
--- a/gateway/sds_gateway/static/css/components.css
+++ b/gateway/sds_gateway/static/css/components.css
@@ -1345,6 +1345,11 @@ body {
 	color: var(--red-text);
 }
 
+/* Share groups list: action dropdowns are not clipped by table scroll */
+.share-groups-table-responsive.table-responsive {
+	overflow: visible;
+}
+
 /* Remove member button sizing for share groups */
 .remove-member-btn.btn-danger,
 .remove-member-btn.btn-outline-danger {
diff --git a/gateway/sds_gateway/static/css/file-list.css b/gateway/sds_gateway/static/css/file-list.css
index 193b27adb..1caa7366e 100644
--- a/gateway/sds_gateway/static/css/file-list.css
+++ b/gateway/sds_gateway/static/css/file-list.css
@@ -344,11 +344,40 @@ body {
 	transform: scale(1.15);
 }
 
+/* Capture list table column widths (matches capture_list_table_row.html) */
+.capture-list-table {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.capture-list-table .capture-col-select {
+	width: 3rem;
+}
+
+.capture-list-table .capture-col-name {
+	width: 34%;
+}
+
+.capture-list-table .capture-col-directory {
+	width: 22%;
+}
+
+.capture-list-table .capture-col-type {
+	width: 14%;
+}
+
+.capture-list-table .capture-col-created {
+	width: 20%;
+}
+
+.capture-list-table .capture-col-actions {
+	width: 7rem;
+}
+
 /* ================================
    Modal Styling
    ================================ */
 .modal-dialog {
-	max-width: 600px;
 	margin: 1.75rem auto;
 }
 
diff --git a/gateway/sds_gateway/static/js/__tests__/file-list.test.js b/gateway/sds_gateway/static/js/__tests__/file-list.test.js
deleted file mode 100644
index 62582e290..000000000
--- a/gateway/sds_gateway/static/js/__tests__/file-list.test.js
+++ /dev/null
@@ -1,784 +0,0 @@
-/**
- * Jest tests for file-list.js
- * Tests FileListController and FileListCapturesTableManager functionality
- */
-
-// Mock components.js classes that file-list.js depends on
-// These MUST be set up BEFORE importing file-list.js
-class MockTableManager {
-	constructor(options) {
-		this.options = options;
-		this.showLoading = jest.fn();
-		this.hideLoading = jest.fn();
-		this.showError = jest.fn();
-		this.attachRowClickHandlers = jest.fn();
-	}
-}
-
-class MockCapturesTableManager extends MockTableManager {
-	constructor(options) {
-		super(options);
-		this.resultsCountElement = null;
-	}
-	updateTable() {}
-	updateResultsCount() {}
-	renderRow() {}
-}
-
-class MockSearchManager {
-	constructor(options) {
-		this.options = options;
-	}
-}
-
-class MockModalManager {
-	constructor(options) {
-		this.options = options;
-	}
-}
-
-class MockPaginationManager {
-	constructor(options) {
-		this.options = options;
-	}
-}
-
-// Make these available globally (as they would be from components.js)
-global.TableManager = MockTableManager;
-global.CapturesTableManager = MockCapturesTableManager;
-global.SearchManager = MockSearchManager;
-global.ModalManager = MockModalManager;
-global.PaginationManager = MockPaginationManager;
-
-// Also make them available on window (file-list.js uses them without global prefix)
-global.window.ModalManager = MockModalManager;
-global.window.SearchManager = MockSearchManager;
-global.window.PaginationManager = MockPaginationManager;
-
-// Mock CONFIG constant (file-list.js uses it)
-global.CONFIG = {
-	DEBOUNCE_DELAY: 300,
-	DEFAULT_SORT_BY: "created_at",
-	DEFAULT_SORT_ORDER: "desc",
-	ELEMENT_IDS: {
-		SEARCH_INPUT: "search-input",
-		START_DATE: "start_date",
-		END_DATE: "end_date",
-		CENTER_FREQ_MIN: "centerFreqMinInput",
-		CENTER_FREQ_MAX: "centerFreqMaxInput",
-		APPLY_FILTERS: "apply-filters-btn",
-		CLEAR_FILTERS: "clear-filters-btn",
-		ITEMS_PER_PAGE: "items-per-page",
-	},
-};
-
-// Mock ComponentUtils
-global.window.ComponentUtils = {
-	escapeHtml: jest.fn((str) => {
-		if (!str) return "";
-		return String(str)
-			.replace(/&/g, "&amp;")
-			.replace(/</g, "&lt;")
-			.replace(/>/g, "&gt;")
-			.replace(/"/g, "&quot;")
-			.replace(/'/g, "&#x27;");
-	}),
-	formatDateForModal: jest.fn((date) => {
-		if (!date) return "-";
-		const d = new Date(date);
-		return d.toISOString().split("T")[0];
-	}),
-};
-
-// Mock Bootstrap Dropdown
-global.bootstrap.Dropdown = jest
-	.fn()
-	.mockImplementation((element, options) => ({
-		show: jest.fn(),
-		hide: jest.fn(),
-		element: element,
-		options: options,
-	}));
-
-// NOW import the actual classes from file-list.js
-// (after all dependencies are mocked)
-// Use require() instead of import so it executes after mocks are set up
-const { FileListController } = require("../file-list.js");
-
-describe("FileListController", () => {
-	let fileListController;
-	let mockElements;
-	let mockTableManager;
-	let mockSearchManager;
-	let mockModalManager;
-	let mockPaginationManager;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Mock DOM elements
-		mockElements = {
-			searchInput: {
-				value: "",
-				addEventListener: jest.fn(),
-			},
-			startDate: { value: "", addEventListener: jest.fn() },
-			endDate: { value: "", addEventListener: jest.fn() },
-			centerFreqMin: { value: "", addEventListener: jest.fn() },
-			centerFreqMax: { value: "", addEventListener: jest.fn() },
-			applyFilters: { addEventListener: jest.fn() },
-			clearFilters: { addEventListener: jest.fn() },
-			itemsPerPage: { value: "25", addEventListener: jest.fn() },
-			sortableHeaders: [],
-			frequencyButton: { addEventListener: jest.fn() },
-			frequencyCollapse: {},
-			dateButton: { addEventListener: jest.fn() },
-			dateCollapse: {},
-		};
-
-		// Mock document methods
-		document.getElementById = jest.fn((id) => {
-			const idMap = {
-				"search-input": mockElements.searchInput,
-				start_date: mockElements.startDate,
-				end_date: mockElements.endDate,
-				centerFreqMinInput: mockElements.centerFreqMin,
-				centerFreqMaxInput: mockElements.centerFreqMax,
-				"apply-filters-btn": mockElements.applyFilters,
-				"clear-filters-btn": mockElements.clearFilters,
-				"items-per-page": mockElements.itemsPerPage,
-				collapseFrequency: mockElements.frequencyCollapse,
-				collapseDate: mockElements.dateCollapse,
-			};
-			return idMap[id] || null;
-		});
-
-		document.querySelector = jest.fn((selector) => {
-			if (selector === '[data-bs-target="#collapseFrequency"]') {
-				return mockElements.frequencyButton;
-			}
-			if (selector === '[data-bs-target="#collapseDate"]') {
-				return mockElements.dateButton;
-			}
-			if (selector === "th.sortable") {
-				return [];
-			}
-			return null;
-		});
-
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Mock window.location
-		window.location = {
-			pathname: "/captures/",
-			search: "",
-		};
-		window.history = {
-			pushState: jest.fn(),
-		};
-
-		// Mock URLSearchParams
-		window.URLSearchParams = class URLSearchParams {
-			constructor(search) {
-				this.params = new Map();
-				if (search) {
-					const pairs = search.replace("?", "").split("&");
-					for (const pair of pairs) {
-						const [key, value] = pair.split("=");
-						if (key) this.params.set(key, value || "");
-					}
-				}
-			}
-			get(name) {
-				return this.params.get(name) || null;
-			}
-			set(name, value) {
-				this.params.set(name, value);
-			}
-			toString() {
-				return Array.from(this.params.entries())
-					.map(([k, v]) => `${k}=${v}`)
-					.join("&");
-			}
-		};
-
-		// Create mock managers
-		mockTableManager = new MockCapturesTableManager({
-			tableId: "captures-table",
-			loadingIndicatorId: "loading-indicator",
-			tableContainerSelector: ".table-responsive",
-			resultsCountId: "results-count",
-		});
-
-		mockSearchManager = new MockSearchManager({
-			searchInputId: "search-input",
-			searchButtonId: "search-btn",
-			clearButtonId: "reset-search-btn",
-		});
-
-		mockModalManager = new MockModalManager({
-			modalId: "capture-modal",
-			modalBodyId: "capture-modal-body",
-		});
-
-		mockPaginationManager = new MockPaginationManager({
-			containerId: "captures-pagination",
-		});
-
-		// Mock global classes (they would be imported from components.js)
-		global.ModalManager = jest.fn(() => mockModalManager);
-		global.SearchManager = jest.fn(() => mockSearchManager);
-		global.PaginationManager = jest.fn(() => mockPaginationManager);
-		global.CapturesTableManager = jest.fn(() => mockTableManager);
-
-		// Also make them available on window (file-list.js uses them without global prefix)
-		global.window.ModalManager = global.ModalManager;
-		global.window.SearchManager = global.SearchManager;
-		global.window.PaginationManager = global.PaginationManager;
-		global.window.CapturesTableManager = global.CapturesTableManager;
-	});
-
-	describe("Initialization", () => {
-		test("should initialize with default sort values", () => {
-			window.location.search = "";
-			fileListController = new FileListController();
-
-			expect(fileListController.currentSortBy).toBe("created_at");
-			expect(fileListController.currentSortOrder).toBe("desc");
-		});
-
-		test("should initialize with URL params", () => {
-			// Mock URLSearchParams to return the values we want
-			const originalURLSearchParams = window.URLSearchParams;
-			window.URLSearchParams = class URLSearchParams {
-				constructor(search) {
-					this.params = new Map();
-					if (search) {
-						const pairs = search.replace("?", "").split("&");
-						for (const pair of pairs) {
-							const [key, value] = pair.split("=");
-							if (key) this.params.set(key, value || "");
-						}
-					}
-				}
-				get(name) {
-					return this.params.get(name) || null;
-				}
-			};
-
-			// Create a mock location that will be used by URLSearchParams
-			Object.defineProperty(window, "location", {
-				value: {
-					search: "?sort_by=name&sort_order=asc",
-					pathname: "/captures/",
-				},
-				writable: true,
-			});
-
-			fileListController = new FileListController();
-
-			expect(fileListController.currentSortBy).toBe("name");
-			expect(fileListController.currentSortOrder).toBe("asc");
-
-			// Restore
-			window.URLSearchParams = originalURLSearchParams;
-		});
-
-		test("should cache DOM elements", () => {
-			fileListController = new FileListController();
-
-			expect(fileListController.elements).toBeDefined();
-			expect(fileListController.elements.searchInput).toBe(
-				mockElements.searchInput,
-			);
-			expect(fileListController.elements.startDate).toBe(
-				mockElements.startDate,
-			);
-		});
-
-		test("should initialize component managers", () => {
-			fileListController = new FileListController();
-
-			expect(global.ModalManager).toHaveBeenCalled();
-			expect(global.SearchManager).toHaveBeenCalled();
-			expect(global.PaginationManager).toHaveBeenCalled();
-			expect(fileListController.modalManager).toBe(mockModalManager);
-			expect(fileListController.searchManager).toBe(mockSearchManager);
-		});
-	});
-
-	describe("Search functionality", () => {
-		beforeEach(() => {
-			fileListController = new FileListController();
-		});
-
-		test("buildSearchParams should include all filter values", () => {
-			mockElements.searchInput.value = "test search";
-			mockElements.startDate.value = "2024-01-01";
-			mockElements.endDate.value = "2024-12-31";
-			mockElements.centerFreqMin.value = "1.0";
-			mockElements.centerFreqMax.value = "5.0";
-
-			// Set userInteractedWithFrequency to true to include frequency params
-			fileListController.userInteractedWithFrequency = true;
-
-			const params = fileListController.buildSearchParams();
-
-			expect(params.get("search")).toBe("test search");
-			expect(params.get("date_start")).toBe("2024-01-01");
-			expect(params.get("date_end")).toBe("2024-12-31T23:59:59");
-			expect(params.get("min_freq")).toBe("1.0");
-			expect(params.get("max_freq")).toBe("5.0");
-			expect(params.get("sort_by")).toBe("created_at");
-			expect(params.get("sort_order")).toBe("desc");
-		});
-
-		test("buildSearchParams should handle empty values", () => {
-			mockElements.searchInput.value = "";
-			mockElements.startDate.value = "";
-
-			const params = fileListController.buildSearchParams();
-
-			// Empty values should not be set in params
-			expect(params.get("search")).toBeNull();
-			expect(params.get("date_start")).toBeNull();
-			// But sort params should always be set
-			expect(params.get("sort_by")).toBe("created_at");
-			expect(params.get("sort_order")).toBe("desc");
-		});
-	});
-});
-
-describe("FileListCapturesTableManager", () => {
-	let tableManager;
-	let mockTbody;
-	let mockResultsCount;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Mock tbody element
-		mockTbody = {
-			innerHTML: "",
-			querySelector: jest.fn(),
-			querySelectorAll: jest.fn(() => []),
-		};
-
-		// Mock results count element
-		mockResultsCount = {
-			textContent: "",
-		};
-
-		document.querySelector = jest.fn((selector) => {
-			if (selector === "tbody") {
-				return mockTbody;
-			}
-			return null;
-		});
-
-		document.querySelectorAll = jest.fn(() => []);
-
-		document.getElementById = jest.fn((id) => {
-			if (id === "results-count") {
-				return mockResultsCount;
-			}
-			return null;
-		});
-
-		// Mock ComponentUtils
-		global.window.ComponentUtils = {
-			escapeHtml: jest.fn((str) => {
-				if (!str) return "";
-				return String(str)
-					.replace(/&/g, "&amp;")
-					.replace(/</g, "&lt;")
-					.replace(/>/g, "&gt;")
-					.replace(/"/g, "&quot;")
-					.replace(/'/g, "&#x27;");
-			}),
-			formatDateForModal: jest.fn((date) => {
-				if (!date) return "-";
-				const d = new Date(date);
-				return d.toISOString().split("T")[0];
-			}),
-		};
-
-		// Mock Bootstrap Dropdown
-		global.bootstrap.Dropdown = jest.fn().mockImplementation((element) => ({
-			show: jest.fn(),
-			hide: jest.fn(),
-			element: element,
-		}));
-
-		// Create table manager instance
-		// We need to import or define the class - for now, we'll test it directly
-		// In a real scenario, we'd import from file-list.js
-		tableManager = {
-			resultsCountElement: mockResultsCount,
-			renderRow: (capture) => {
-				// This would be the actual renderRow implementation
-				const safeData = {
-					uuid: window.ComponentUtils.escapeHtml(capture.uuid || ""),
-					name: window.ComponentUtils.escapeHtml(capture.name || ""),
-					channel: window.ComponentUtils.escapeHtml(capture.channel || ""),
-					scanGroup: window.ComponentUtils.escapeHtml(capture.scan_group || ""),
-					captureType: window.ComponentUtils.escapeHtml(
-						capture.capture_type || "",
-					),
-					captureTypeDisplay: window.ComponentUtils.escapeHtml(
-						capture.capture_type_display || "",
-					),
-					topLevelDir: window.ComponentUtils.escapeHtml(
-						capture.top_level_dir || "",
-					),
-					owner: window.ComponentUtils.escapeHtml(capture.owner || ""),
-				};
-
-				const nameDisplay = safeData.name || "Unnamed Capture";
-				const typeDisplay =
-					safeData.captureTypeDisplay || safeData.captureType || "-";
-
-				return `
-					<tr class="capture-row" data-uuid="${safeData.uuid}">
-						<td headers="name-header">
-							<a href="#" class="capture-link" data-uuid="${safeData.uuid}">
-								${nameDisplay}
-							</a>
-						</td>
-						<td headers="top-level-dir-header">${safeData.topLevelDir || "-"}</td>
-						<td headers="type-header">${typeDisplay}</td>
-						<td headers="created-header">-</td>
-						<td headers="actions-header" class="text-center">
-							<div class="dropdown">
-								<button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown"
-										type="button"
-										data-bs-toggle="dropdown">
-									<i class="bi bi-three-dots-vertical"></i>
-								</button>
-								<ul class="dropdown-menu"></ul>
-							</div>
-						</td>
-					</tr>
-				`;
-			},
-			updateTable: function (captures, hasResults) {
-				if (!mockTbody) return;
-
-				if (!hasResults || captures.length === 0) {
-					mockTbody.innerHTML = `
-						<tr>
-							<td colspan="5" class="text-center text-muted py-4">
-								<em>No captures found matching your search criteria.</em>
-							</td>
-						</tr>
-					`;
-					return;
-				}
-
-				const tableHTML = captures
-					.map((capture, index) => this.renderRow(capture, index))
-					.join("");
-				mockTbody.innerHTML = tableHTML;
-
-				// Initialize dropdowns
-				this.initializeDropdowns();
-			},
-			updateResultsCount: function (captures, hasResults) {
-				if (this.resultsCountElement) {
-					const count = hasResults && captures ? captures.length : 0;
-					const pluralSuffix = count === 1 ? "" : "s";
-					this.resultsCountElement.textContent = `${count} capture${pluralSuffix} found`;
-				}
-			},
-			initializeDropdowns: () => {
-				const dropdownButtons = document.querySelectorAll(".btn-icon-dropdown");
-
-				if (dropdownButtons.length === 0) {
-					return;
-				}
-
-				for (const toggle of dropdownButtons) {
-					if (toggle._dropdown) {
-						continue;
-					}
-
-					const dropdownMenu = toggle.nextElementSibling;
-					if (
-						!dropdownMenu ||
-						!dropdownMenu.classList.contains("dropdown-menu")
-					) {
-						continue;
-					}
-
-					const dropdown = new bootstrap.Dropdown(toggle, {
-						container: "body",
-						boundary: "viewport",
-						popperConfig: {
-							modifiers: [
-								{
-									name: "preventOverflow",
-									options: {
-										boundary: "viewport",
-									},
-								},
-							],
-						},
-					});
-
-					toggle.addEventListener("show.bs.dropdown", () => {
-						if (dropdownMenu?.classList.contains("dropdown-menu")) {
-							document.body.appendChild(dropdownMenu);
-						}
-					});
-
-					toggle._dropdown = dropdown;
-				}
-			},
-		};
-	});
-
-	describe("updateTable", () => {
-		test("should render empty state when no results", () => {
-			tableManager.updateTable([], false);
-
-			expect(mockTbody.innerHTML).toContain("No captures found");
-			expect(mockTbody.innerHTML).toContain('colspan="5"');
-		});
-
-		test("should render captures when results exist", () => {
-			const captures = [
-				{
-					uuid: "test-uuid-1",
-					name: "Test Capture 1",
-					capture_type: "drf",
-					capture_type_display: "DRF",
-					top_level_dir: "/test/dir",
-					channel: "1",
-					owner: "test@example.com",
-					created_at: "2024-01-01T00:00:00Z",
-				},
-				{
-					uuid: "test-uuid-2",
-					name: "Test Capture 2",
-					capture_type: "rh",
-					capture_type_display: "RH",
-					top_level_dir: "/test/dir2",
-					channel: "2",
-					owner: "test2@example.com",
-					created_at: "2024-01-02T00:00:00Z",
-				},
-			];
-
-			tableManager.updateTable(captures, true);
-
-			expect(mockTbody.innerHTML).toContain("Test Capture 1");
-			expect(mockTbody.innerHTML).toContain("Test Capture 2");
-			expect(mockTbody.innerHTML).toContain("test-uuid-1");
-			expect(mockTbody.innerHTML).toContain("test-uuid-2");
-		});
-
-		test("should call initializeDropdowns after rendering", () => {
-			const spy = jest.spyOn(tableManager, "initializeDropdowns");
-			const captures = [
-				{
-					uuid: "test-uuid-1",
-					name: "Test Capture",
-					capture_type: "drf",
-					top_level_dir: "/test",
-					channel: "1",
-					owner: "test@example.com",
-				},
-			];
-
-			tableManager.updateTable(captures, true);
-
-			expect(spy).toHaveBeenCalled();
-		});
-	});
-
-	describe("updateResultsCount", () => {
-		test("should update results count with correct pluralization", () => {
-			const captures = [{ uuid: "1" }];
-			tableManager.updateResultsCount(captures, true);
-
-			expect(mockResultsCount.textContent).toBe("1 capture found");
-		});
-
-		test("should handle plural form", () => {
-			const captures = [{ uuid: "1" }, { uuid: "2" }];
-			tableManager.updateResultsCount(captures, true);
-
-			expect(mockResultsCount.textContent).toBe("2 captures found");
-		});
-
-		test("should handle no results", () => {
-			tableManager.updateResultsCount([], false);
-
-			expect(mockResultsCount.textContent).toBe("0 captures found");
-		});
-	});
-
-	describe("initializeDropdowns", () => {
-		test("should initialize Bootstrap dropdowns", () => {
-			const mockDropdownMenu = {
-				classList: {
-					contains: jest.fn(() => true),
-				},
-			};
-			const mockToggle = {
-				_dropdown: null,
-				nextElementSibling: mockDropdownMenu,
-				addEventListener: jest.fn(),
-			};
-
-			document.querySelectorAll = jest.fn(() => [mockToggle]);
-
-			// Mock document.body properly
-			if (!document.body) {
-				document.body = document.createElement("body");
-			}
-			document.body.appendChild = jest.fn();
-
-			tableManager.initializeDropdowns();
-
-			expect(global.bootstrap.Dropdown).toHaveBeenCalled();
-			expect(mockToggle._dropdown).toBeDefined();
-			expect(mockToggle.addEventListener).toHaveBeenCalledWith(
-				"show.bs.dropdown",
-				expect.any(Function),
-			);
-		});
-
-		test("should skip already initialized dropdowns", () => {
-			const mockToggle = {
-				_dropdown: { show: jest.fn() },
-				nextElementSibling: null,
-				addEventListener: jest.fn(),
-			};
-
-			document.querySelectorAll = jest.fn(() => [mockToggle]);
-
-			tableManager.initializeDropdowns();
-
-			expect(global.bootstrap.Dropdown).not.toHaveBeenCalled();
-		});
-
-		test("should handle missing dropdown menu", () => {
-			const mockToggle = {
-				_dropdown: null,
-				nextElementSibling: null,
-				addEventListener: jest.fn(),
-			};
-
-			document.querySelectorAll = jest.fn(() => [mockToggle]);
-
-			tableManager.initializeDropdowns();
-
-			// Should not initialize dropdown if nextElementSibling is null
-			expect(global.bootstrap.Dropdown).not.toHaveBeenCalled();
-		});
-	});
-
-	describe("renderRow", () => {
-		test("should render row with all required columns", () => {
-			const capture = {
-				uuid: "test-uuid",
-				name: "Test Capture",
-				capture_type: "drf",
-				capture_type_display: "DRF",
-				top_level_dir: "/test/dir",
-				channel: "1",
-				owner: "test@example.com",
-				created_at: "2024-01-01T00:00:00Z",
-			};
-
-			const html = tableManager.renderRow(capture, 0);
-
-			expect(html).toContain("test-uuid");
-			expect(html).toContain("Test Capture");
-			expect(html).toContain("/test/dir");
-			expect(html).toContain('headers="name-header"');
-			expect(html).toContain('headers="top-level-dir-header"');
-			expect(html).toContain('headers="type-header"');
-			expect(html).toContain('headers="created-header"');
-			expect(html).toContain('headers="actions-header"');
-		});
-
-		test("should escape HTML in capture data", () => {
-			const capture = {
-				uuid: "test-uuid",
-				name: "<script>alert('xss')</script>",
-				capture_type: "drf",
-				top_level_dir: "/test/dir",
-				channel: "1",
-				owner: "test@example.com",
-			};
-
-			const html = tableManager.renderRow(capture, 0);
-
-			expect(html).not.toContain("<script>");
-			expect(html).toContain("&lt;script&gt;");
-		});
-
-		test("should handle missing name with fallback", () => {
-			const capture = {
-				uuid: "test-uuid",
-				name: "",
-				capture_type: "drf",
-				top_level_dir: "/test",
-				channel: "1",
-				owner: "test@example.com",
-			};
-
-			const html = tableManager.renderRow(capture, 0);
-
-			expect(html).toContain("Unnamed Capture");
-		});
-
-		test("should handle multi-channel captures", () => {
-			const capture = {
-				uuid: "test-uuid",
-				name: "Multi Channel",
-				capture_type: "drf",
-				is_multi_channel: true,
-				channels: [{ channel: "1" }, { channel: "2" }, { channel: "3" }],
-				top_level_dir: "/test",
-				owner: "test@example.com",
-			};
-
-			const html = tableManager.renderRow(capture, 0);
-
-			expect(html).toContain("test-uuid");
-			expect(html).toContain("Multi Channel");
-		});
-
-		test("should not throw ReferenceError for authorDisplay or channelDisplay", () => {
-			// Regression: these variables were previously assigned without declaration,
-			// causing "assignment to undeclared variable" errors in strict-mode browsers.
-			const capture = {
-				uuid: "abc-123",
-				name: "Regression Capture",
-				capture_type: "drf",
-				top_level_dir: "/data",
-				channel: "2",
-				owner: "user@example.com",
-			};
-
-			expect(() => tableManager.renderRow(capture, 0)).not.toThrow();
-		});
-
-		test("should not throw for multi-channel captures that previously triggered undeclared channelDisplay", () => {
-			const capture = {
-				uuid: "abc-456",
-				name: "Multi Regression",
-				capture_type: "drf",
-				is_multi_channel: true,
-				channels: [{ channel: "A" }, { channel: "B" }],
-				top_level_dir: "/data",
-				owner: "user@example.com",
-			};
-
-			expect(() => tableManager.renderRow(capture, 0)).not.toThrow();
-		});
-	});
-});
diff --git a/gateway/sds_gateway/static/js/__tests__/helpers/actionTestMocks.js b/gateway/sds_gateway/static/js/__tests__/helpers/actionTestMocks.js
new file mode 100644
index 000000000..bf3a94fbb
--- /dev/null
+++ b/gateway/sds_gateway/static/js/__tests__/helpers/actionTestMocks.js
@@ -0,0 +1,225 @@
+/**
+ * Shared mocks for action manager tests (Download, Share, Versioning).
+ */
+
+const {
+	setupStandardUnitTest,
+	createMockWebDownloadButton,
+	createMockWebDownloadModal,
+	installWebDownloadDomMocks,
+} = require("../../tests-config/testHelpers.js");
+
+function installBootstrapModalMocks() {
+	global.bootstrap = {
+		Modal: jest.fn().mockImplementation(() => ({
+			show: jest.fn(),
+			hide: jest.fn(),
+		})),
+	};
+	global.bootstrap.Modal.getInstance = jest.fn(() => ({
+		hide: jest.fn(),
+	}));
+}
+
+function createMockDownloadPermissions(overrides = {}) {
+	return {
+		canDownload: jest.fn(() => true),
+		...overrides,
+	};
+}
+
+/**
+ * @param {object} [opts]
+ * @param {object} [opts.apiClientOverrides]
+ * @param {Record<string, string|null>} [opts.buttonAttributes]
+ */
+function setupDownloadActionTestEnvironment(opts = {}) {
+	const mockPermissions = createMockDownloadPermissions(opts.permissions);
+	setupStandardUnitTest({
+		useModalDomUtils: true,
+		apiClientOverrides: {
+			post: jest.fn().mockResolvedValue({
+				success: true,
+				message: "Download request submitted successfully!",
+			}),
+			...opts.apiClientOverrides,
+		},
+		window: {
+			fetch: jest.fn(() =>
+				Promise.resolve({
+					ok: true,
+					json: () =>
+						Promise.resolve({
+							success: true,
+							message: "Download requested",
+						}),
+				}),
+			),
+			showMessage: jest.fn().mockResolvedValue(true),
+			...opts.window,
+		},
+	});
+	const mockButton = createMockWebDownloadButton({
+		"data-item-uuid": "test-dataset-uuid",
+		"data-item-type": "dataset",
+		...opts.buttonAttributes,
+	});
+	const mockModal = createMockWebDownloadModal();
+	installWebDownloadDomMocks(mockButton, mockModal);
+	installBootstrapModalMocks();
+	return { mockPermissions, mockButton, mockModal };
+}
+
+function createDefaultShareActionConfig(overrides = {}) {
+	return {
+		itemUuid: "test-uuid",
+		itemType: "dataset",
+		permissions: {
+			canShare: true,
+		},
+		...overrides,
+	};
+}
+
+function setupShareActionStandardTest(apiClientOverrides = {}) {
+	setupStandardUnitTest({
+		useModalDomUtils: true,
+		apiClientOverrides: {
+			get: jest.fn().mockResolvedValue([]),
+			...apiClientOverrides,
+		},
+	});
+}
+
+function createShareSearchTestContext(ShareActionManager, overrides = {}) {
+	const mockAPIClient = {
+		get: jest.fn(),
+		post: jest.fn(),
+		...overrides.apiClient,
+	};
+	global.window.APIClient = mockAPIClient;
+	const mockDropdown = {
+		querySelector: jest.fn(() => ({
+			innerHTML: "",
+		})),
+	};
+	const shareManager = new ShareActionManager({
+		itemUuid: "test-uuid",
+		itemType: "dataset",
+		permissions: {},
+		...overrides.managerConfig,
+	});
+	shareManager.displayResults = jest.fn();
+	shareManager.displayError = jest.fn();
+	shareManager.showDropdown = jest.fn();
+	return { mockAPIClient, mockDropdown, shareManager };
+}
+
+function createMockVersionCreateButton(datasetUuid = "test-dataset-uuid", extra = {}) {
+	return {
+		id: `createVersionBtn-${datasetUuid}`,
+		dataset: { versionSetup: "false", processing: "false" },
+		addEventListener: jest.fn(),
+		disabled: false,
+		click: jest.fn(),
+		...extra,
+	};
+}
+
+function createVersioningActionConfig(overrides = {}) {
+	const datasetUuid = overrides.datasetUuid ?? "test-dataset-uuid";
+	const mockPermissions = {
+		canEditMetadata: jest.fn(() => true),
+		canShare: jest.fn(() => true),
+		...(overrides.permissions || {}),
+	};
+	return {
+		config: {
+			datasetUuid,
+			permissions: mockPermissions,
+			...overrides.config,
+		},
+		mockPermissions,
+		datasetUuid,
+	};
+}
+
+function setupVersioningActionTestEnvironment(overrides = {}) {
+	jest.clearAllMocks();
+	const { config, mockPermissions, datasetUuid } =
+		createVersioningActionConfig(overrides);
+	const mockButton = createMockVersionCreateButton(datasetUuid, overrides.button);
+	setupStandardUnitTest({
+		useModalDomUtils: true,
+		getElementByIdMap: {
+			[`createVersionBtn-${datasetUuid}`]: mockButton,
+		},
+		apiClientOverrides: {
+			post: jest.fn().mockResolvedValue({
+				success: true,
+				version: 2,
+			}),
+			...overrides.apiClientOverrides,
+		},
+		window: {
+			listRefreshManager: {
+				loadTable: jest.fn().mockResolvedValue(true),
+			},
+			location: {
+				reload: jest.fn(),
+			},
+			...overrides.window,
+		},
+	});
+	return { mockConfig: config, mockPermissions, mockButton, datasetUuid };
+}
+
+function createVersionCreationClickEvent() {
+	return {
+		preventDefault: jest.fn(),
+		stopPropagation: jest.fn(),
+	};
+}
+
+const LIST_REFRESH_SEP = "<!-- LIST_REFRESH_SEP -->";
+
+/**
+ * @param {{ tableHtml?: string, modalsHtml?: string }} parts
+ */
+function createListRefreshResponseHtml(parts = {}) {
+	const tableHtml = parts.tableHtml ?? "<table><tbody></tbody></table>";
+	const modalsHtml = parts.modalsHtml ?? "";
+	if (!modalsHtml) return tableHtml;
+	return `${tableHtml}${LIST_REFRESH_SEP}${modalsHtml}`;
+}
+
+/**
+ * @param {{ tableId?: string, modalsId?: string }} ids
+ */
+function installListRefreshDomContainers(ids = {}) {
+	const tableId = ids.tableId ?? "dataset-list-ajax-wrapper";
+	const modalsId = ids.modalsId ?? "dataset-modals-container";
+	document.body.innerHTML = "";
+	const table = document.createElement("div");
+	table.id = tableId.replace(/^#/, "");
+	const modals = document.createElement("div");
+	modals.id = modalsId.replace(/^#/, "");
+	document.body.append(table, modals);
+	return { table, modals, tableSelector: `#${table.id}`, modalsSelector: `#${modals.id}` };
+}
+
+module.exports = {
+	installBootstrapModalMocks,
+	createMockDownloadPermissions,
+	setupDownloadActionTestEnvironment,
+	createDefaultShareActionConfig,
+	setupShareActionStandardTest,
+	createShareSearchTestContext,
+	createMockVersionCreateButton,
+	createVersioningActionConfig,
+	setupVersioningActionTestEnvironment,
+	createVersionCreationClickEvent,
+	LIST_REFRESH_SEP,
+	createListRefreshResponseHtml,
+	installListRefreshDomContainers,
+};
diff --git a/gateway/sds_gateway/static/js/actions/CaptureListSelectionManager.js b/gateway/sds_gateway/static/js/actions/CaptureListSelectionManager.js
new file mode 100644
index 000000000..969c3c00a
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/CaptureListSelectionManager.js
@@ -0,0 +1,72 @@
+/**
+ * Bulk capture selection on the captures list page (quick-add to dataset).
+ */
+class CaptureListSelectionManager {
+	/**
+	 * @param {import("./QuickAddToDatasetManager.js").QuickAddToDatasetManager} quickAddManager
+	 */
+	constructor(quickAddManager) {
+		this.quickAdd = quickAddManager;
+		this.bulkBtn = document.getElementById("capture-list-add-to-dataset-btn");
+		this.countEl = document.getElementById("capture-list-selected-count");
+
+		document.addEventListener("change", (e) => {
+			if (!e.target.matches(".capture-select-checkbox")) return;
+			e.stopPropagation();
+			this.updateToolbar();
+		});
+
+		document.addEventListener("click", (e) => {
+			if (e.target.matches(".capture-select-checkbox")) {
+				e.stopPropagation();
+			}
+		});
+
+		this.bulkBtn?.addEventListener("click", (e) => {
+			e.preventDefault();
+			this.openBulkModal();
+		});
+
+		this.updateToolbar();
+	}
+
+	getSelectedUuids() {
+		return [
+			...document.querySelectorAll(".capture-select-checkbox:checked"),
+		]
+			.map((cb) => cb.getAttribute("data-capture-uuid"))
+			.filter(Boolean);
+	}
+
+	updateToolbar() {
+		const count = this.getSelectedUuids().length;
+		if (this.countEl) {
+			this.countEl.textContent =
+				count === 1 ? "1 capture selected" : `${count} captures selected`;
+		}
+		if (this.bulkBtn) {
+			this.bulkBtn.disabled = count === 0;
+		}
+	}
+
+	clearSelection() {
+		for (const cb of document.querySelectorAll(
+			".capture-select-checkbox:checked",
+		)) {
+			cb.checked = false;
+		}
+		this.updateToolbar();
+	}
+
+	openBulkModal() {
+		const uuids = this.getSelectedUuids();
+		if (!uuids.length || !this.quickAdd?.openForCaptureUuids) return;
+		this.quickAdd.openForCaptureUuids(uuids);
+	}
+}
+
+window.CaptureListSelectionManager = CaptureListSelectionManager;
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { CaptureListSelectionManager };
+}
diff --git a/gateway/sds_gateway/static/js/actions/DetailsActionManager.js b/gateway/sds_gateway/static/js/actions/DetailsActionManager.js
index a3ef58cf1..75ecff35c 100644
--- a/gateway/sds_gateway/static/js/actions/DetailsActionManager.js
+++ b/gateway/sds_gateway/static/js/actions/DetailsActionManager.js
@@ -1,843 +1,85 @@
 /**
  * Details Action Manager
- * Handles all details-related actions and modal management
+ * Thin helpers for details UI (e.g. dataset UUID copy after server-rendered modal HTML).
  */
 class DetailsActionManager {
 	/**
-	 * Initialize details action manager
-	 * @param {Object} config - Configuration object
+	 * Wire UUID copy on a dataset details modal after HTML injection.
+	 * @param {Element} modal
+	 * @param {string} uuid
 	 */
-	constructor(config) {
-		this.permissions = config.permissions;
-		this.itemUuid = config.itemUuid;
-		this.itemType = config.itemType;
-		this.modalId = `${this.itemType}DetailsModal-${this.itemUuid}`;
-		this.initializeEventListeners();
-	}
-
-	/**
-	 * Initialize event listeners
-	 */
-	initializeEventListeners() {
-		// Initialize details buttons for captures
-		this.initializeCaptureDetailsButtons();
-
-		// Initialize modal event handlers for datasets
-		this.initializeDatasetModalEventHandlers();
-	}
-
-	/**
-	 * Initialize capture details buttons
-	 */
-	initializeCaptureDetailsButtons() {
-		const detailsButtons = document.querySelectorAll(".capture-details-btn");
-
-		for (const button of detailsButtons) {
-			// Prevent duplicate event listener attachment
-			if (button.dataset.detailsSetup === "true") {
-				continue;
-			}
-			button.dataset.detailsSetup = "true";
-
-			button.addEventListener("click", (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-
-				const captureUuid =
-					button.getAttribute("data-capture-uuid") ||
-					button.getAttribute("data-uuid");
-
-				// Skip if no valid UUID
-				if (
-					!captureUuid ||
-					captureUuid === "null" ||
-					captureUuid === "undefined"
-				) {
-					console.warn(
-						"No valid capture UUID found for details button:",
-						button,
-					);
-					return;
-				}
-
-				this.handleCaptureDetails(captureUuid);
-			});
-		}
-	}
-
-	/**
-	 * Initialize modal event handlers
-	 */
-	initializeDatasetModalEventHandlers() {
-		// Handle modal show events
-		document.addEventListener("show.bs.modal", (e) => {
-			const modal = e.target;
-			if (modal.id === this.modalId) {
-				this.handleDatasetDetailsModalShow(modal, e);
-			}
-		});
-	}
-
-	/**
-	 * Handle capture details
-	 * @param {string} captureUuid - Capture UUID
-	 */
-	async handleCaptureDetails(captureUuid) {
-		try {
-			// Show loading state
-			window.DOMUtils.showModalLoading(this.modalId);
-
-			// Fetch capture details
-			const captureData = await window.APIClient.get(
-				`/users/capture-details/?capture_uuid=${captureUuid}`,
-			);
-
-			// Populate modal with data
-			this.populateCaptureDetailsModal(captureData);
-
-			// Show modal
-			window.DOMUtils.openModal(this.modalId);
-		} catch (error) {
-			console.error("Error loading capture details:", error);
-			window.DOMUtils.showModalError(
-				this.modalId,
-				"Failed to load capture details",
-			);
-		}
-	}
-
-	/**
-	 * Populate dataset details modal
-	 * @param {Object} datasetData - Dataset data
-	 * @param {Object} statistics - Dataset statistics
-	 * @param {Object} tree - File tree data
-	 */
-	async populateDatasetDetailsModal(datasetData, statistics, tree) {
-		const modal = document.getElementById(this.modalId);
-		if (!modal) return;
-
-		// Clear loading state and restore original modal content
-		window.DOMUtils.clearModalLoading(this.modalId);
-
-		// Update basic information using the correct selectors from the template
-		this.updateElementText(
-			modal,
-			".dataset-details-name",
-			`${datasetData.name} (v${datasetData.version})` || "Untitled Dataset",
-		);
-		this.updateElementText(
-			modal,
-			".dataset-details-description",
-			datasetData.description || "No description provided",
-		);
-		// Update status as badge
-		this.updateStatusBadge(modal, datasetData.status);
-
-		this.updateElementText(
-			modal,
-			".dataset-details-created",
-			this.formatDate(datasetData.created_at),
-		);
-		this.updateElementText(
-			modal,
-			".dataset-details-updated",
-			this.formatDate(datasetData.updated_at),
-		);
-
-		// Set up UUID copy functionality
-		this.setupUuidCopyButton(modal, datasetData.uuid);
-
-		// Update authors
-		this.updateAuthors(modal, datasetData.authors || []);
-
-		// Update keywords
-		this.updateKeywords(modal, datasetData.keywords || []);
-
-		// Update statistics
-		if (statistics) {
-			this.updateElementText(
-				modal,
-				"#total-files-count",
-				statistics.total_files || 0,
-			);
-			this.updateElementText(
-				modal,
-				"#captures-count",
-				statistics.captures || 0,
-			);
-			this.updateElementText(
-				modal,
-				"#artifacts-count",
-				statistics.artifacts || 0,
-			);
-			this.updateElementText(
-				modal,
-				"#total-size",
-				window.DOMUtils.formatFileSize(statistics.total_size || 0),
-			);
-		}
-
-		// Update file tree (if tree container exists)
-		await this.updateFileTree(modal, tree);
-	}
-
-	/**
-	 * Populate capture details modal
-	 * @param {Object} captureData - Capture data
-	 */
-	populateCaptureDetailsModal(captureData) {
-		const modal = document.getElementById(this.modalId);
-		if (!modal) return;
-
-		// Update basic information
-		this.updateElementText(
-			modal,
-			"#capture-name",
-			captureData.name || "Untitled Capture",
-		);
-		this.updateElementText(
-			modal,
-			"#capture-type",
-			captureData.type || "Unknown",
-		);
-		this.updateElementText(
-			modal,
-			"#capture-directory",
-			captureData.directory || "Unknown",
-		);
-		this.updateElementText(
-			modal,
-			"#capture-channel",
-			captureData.channel || "-",
-		);
-		this.updateElementText(
-			modal,
-			"#capture-scan-group",
-			captureData.scan_group || "-",
-		);
-		this.updateElementText(
-			modal,
-			"#capture-created-at",
-			this.formatDate(captureData.created_at),
-		);
-		this.updateElementText(
-			modal,
-			"#capture-updated-at",
-			this.formatDate(captureData.updated_at),
-		);
-
-		// Update owner information
-		this.updateElementText(
-			modal,
-			"#capture-owner",
-			captureData.owner?.name || captureData.owner?.email || "Unknown",
-		);
-
-		// Update technical details
-		this.updateTechnicalDetails(modal, captureData);
-
-		// Update action buttons based on permissions
-		this.updateCaptureActionButtons(modal, captureData);
-	}
-
-	/**
-	 * Update element text content
-	 * @param {Element} container - Container element
-	 * @param {string} selector - Element selector
-	 * @param {string} text - Text content
-	 */
-	updateElementText(container, selector, text) {
-		const element = container.querySelector(selector);
-		if (element) {
-			element.textContent = text;
-		}
-	}
-
-	/**
-	 * Update status badge
-	 * @param {Element} modal - Modal element
-	 * @param {string} status - Status value ('draft' or 'final')
-	 */
-	updateStatusBadge(modal, status) {
-		const statusContainer = modal.querySelector(".dataset-details-status");
-		if (!status || typeof status !== "string") {
-			if (statusContainer) {
-				statusContainer.innerHTML = `<span class="badge bg-secondary">Unknown</span>`;
-			}
-			return;
-		}
-
-		const statusText = status[0].toUpperCase() + status.slice(1);
-		const statusClass = status === "final" ? "success" : "secondary";
-		if (statusContainer) {
-			statusContainer.innerHTML = `<span class="badge bg-${statusClass}">${statusText}</span>`;
-		}
-	}
-
-	/**
-	 * Set up UUID copy button functionality
-	 * @param {Element} modal - Modal element
-	 * @param {string} uuid - Dataset UUID
-	 */
-	setupUuidCopyButton(modal, uuid) {
-		const copyButton = modal.querySelector(".copy-uuid-btn");
+	static attachUuidCopyButton(modal, uuid) {
+		const copyButton = modal?.querySelector?.(".copy-uuid-btn");
 		if (!copyButton || !uuid) return;
 
-		// Store UUID in button data attribute
 		copyButton.dataset.uuid = uuid;
+		copyButton.replaceWith(copyButton.cloneNode(true));
+		const btn = modal.querySelector(".copy-uuid-btn");
+		if (!btn) return;
 
-		// Remove any existing event listeners to prevent duplicates
-		copyButton.removeEventListener("click", this.handleUuidCopy);
+		btn.addEventListener("click", (e) => {
+			void DetailsActionManager.handleUuidCopy(e, uuid);
+		});
 
-		// Add click event listener
-		copyButton.addEventListener("click", (e) => this.handleUuidCopy(e, uuid));
+		if (window.bootstrap?.Tooltip) {
+			const bs = window.bootstrap;
+			const existing = bs.Tooltip.getInstance(btn);
+			if (existing) existing.dispose();
+			new bs.Tooltip(btn);
+		}
 	}
 
-	/**
-	 * Handle UUID copy to clipboard
-	 * @param {Event} event - Click event
-	 * @param {string} uuid - UUID to copy
-	 */
-	async handleUuidCopy(event, uuid) {
+	static async handleUuidCopy(event, uuid) {
 		event.preventDefault();
 		event.stopPropagation();
 
 		try {
-			// Copy to clipboard using the modern Clipboard API
 			await navigator.clipboard.writeText(uuid);
-
-			// Show success feedback
-			this.showCopyFeedback(event.target, "Copied!");
+			await DetailsActionManager.showCopyFeedback(event.target, "Copied!");
 		} catch (error) {
 			console.warn("Clipboard API failed, trying fallback method:", error);
-
-			// Fallback for older browsers
 			try {
-				this.fallbackCopyToClipboard(uuid);
-				this.showCopyFeedback(event.target, "Copied!");
+				window.UserInputController.execCommandCopyFallback(uuid);
+				await DetailsActionManager.showCopyFeedback(event.target, "Copied!");
 			} catch (fallbackError) {
 				console.error("Failed to copy UUID:", fallbackError);
-				this.showCopyFeedback(event.target, "Copy failed", "error");
+				await DetailsActionManager.showCopyFeedback(
+					event.target,
+					"Copy failed",
+					"error",
+				);
 			}
 		}
 	}
 
-	/**
-	 * Fallback copy method for older browsers
-	 * @param {string} text - Text to copy
-	 */
-	fallbackCopyToClipboard(text) {
-		const textArea = document.createElement("textarea");
-		textArea.value = text;
-		textArea.style.position = "fixed";
-		textArea.style.left = "-999999px";
-		textArea.style.top = "-999999px";
-		document.body.appendChild(textArea);
-		textArea.focus();
-		textArea.select();
-
-		try {
-			document.execCommand("copy");
-		} finally {
-			document.body.removeChild(textArea);
-		}
-	}
-
-	/**
-	 * Show copy feedback to user
-	 * @param {Element} button - Button element
-	 * @param {string} message - Feedback message
-	 * @param {string} type - Feedback type ('success' or 'error')
-	 */
-	async showCopyFeedback(button, message, type = "success") {
-		// Find the button element (might be the icon inside)
+	static async showCopyFeedback(button, message, type = "success") {
 		const copyButton = button.closest(".copy-uuid-btn") || button;
-
-		// Store original tooltip
 		const originalTitle = copyButton.getAttribute("title");
 		const originalIcon = copyButton.innerHTML;
 
-		// Update button appearance temporarily
 		const icon = type === "success" ? "check" : "x";
 		const color = type === "success" ? "success" : "danger";
 
 		await window.DOMUtils.renderContent(copyButton, { icon, color });
 		copyButton.setAttribute("title", message);
 
-		// Reset after 2 seconds
 		setTimeout(() => {
 			copyButton.innerHTML = originalIcon;
 			copyButton.setAttribute("title", originalTitle);
-
-			// Re-initialize tooltip if using Bootstrap tooltips
-			if (window.bootstrap && bootstrap.Tooltip) {
-				const tooltip = bootstrap.Tooltip.getInstance(copyButton);
+			if (window.bootstrap?.Tooltip) {
+				const bs = window.bootstrap;
+				const tooltip = bs.Tooltip.getInstance(copyButton);
 				if (tooltip) {
 					tooltip.dispose();
 				}
-				new bootstrap.Tooltip(copyButton);
+				new bs.Tooltip(copyButton);
 			}
 		}, 2000);
 	}
-
-	/**
-	 * Update authors section
-	 * @param {Element} modal - Modal element
-	 * @param {Array} authors - Authors array
-	 */
-	async updateAuthors(modal, authors) {
-		const authorsContainer = modal.querySelector(".dataset-details-author");
-		if (!authorsContainer) return;
-
-		if (!authors || authors.length === 0) {
-			await window.DOMUtils.renderError(
-				authorsContainer,
-				"No authors specified",
-				{ format: "inline" },
-			);
-			return;
-		}
-
-		const authorsText = authors
-			.map((author) => {
-				if (typeof author === "string") {
-					return author;
-				}
-				return author.name || author.email || "Unknown Author";
-			})
-			.join(", ");
-
-		authorsContainer.textContent = authorsText;
-	}
-
-	/**
-	 * Update keywords section
-	 * @param {Element} modal - Modal element
-	 * @param {Array} keywords - Keywords array
-	 */
-	updateKeywords(modal, keywords) {
-		const keywordsContainer = modal.querySelector(".dataset-details-keywords");
-		if (!keywordsContainer) return;
-
-		// Clear existing content
-		keywordsContainer.innerHTML = "";
-
-		if (!keywords || keywords.length === 0) {
-			keywordsContainer.innerHTML =
-				'<span class="text-muted">No keywords</span>';
-			return;
-		}
-
-		// Create badges for each keyword
-		for (const keyword of keywords) {
-			const badge = document.createElement("span");
-			badge.className = "badge bg-secondary me-2 mb-2";
-			badge.textContent = keyword;
-			keywordsContainer.appendChild(badge);
-		}
-	}
-
-	/**
-	 * Update captures table
-	 * @param {Element} modal - Modal element
-	 * @param {Array} captures - Captures array
-	 */
-	async updateCapturesTable(modal, captures) {
-		const tableBody = modal.querySelector("#dataset-captures-table tbody");
-		if (!tableBody) return;
-
-		// Transform captures into rows format for generalized table template
-		const rows = captures.map((capture) => ({
-			cells: [
-				{ kind: "text", value: capture.type },
-				{ kind: "text", value: capture.directory },
-				{ kind: "text", value: capture.channel },
-				{ kind: "text", value: capture.scan_group },
-				{ kind: "text", value: capture.created_at },
-			],
-		}));
-
-		const success = await window.DOMUtils.renderTable(tableBody, rows, {
-			empty_colspan: 5,
-			empty_message: "No captures in dataset",
-		});
-
-		if (!success) {
-			await window.DOMUtils.renderError(tableBody, "Error loading captures", {
-				format: "table",
-				colspan: 5,
-			});
-		}
-	}
-
-	/**
-	 * Update files table
-	 * @param {Element} modal - Modal element
-	 * @param {Array} files - Files array
-	 */
-	async updateFilesTable(modal, files) {
-		const tableBody = modal.querySelector("#dataset-files-table tbody");
-		if (!tableBody) return;
-
-		// Transform files into rows format for generalized table template
-		const rows = files.map((file) => ({
-			cells: [
-				{ kind: "text", value: file.name },
-				{ kind: "text", value: file.media_type },
-				{ kind: "text", value: file.relative_path },
-				{ kind: "text", value: file.size },
-			],
-		}));
-
-		const success = await window.DOMUtils.renderTable(tableBody, rows, {
-			empty_colspan: 4,
-			empty_message: "No files in dataset",
-		});
-
-		if (!success) {
-			await window.DOMUtils.renderError(tableBody, "Error loading files", {
-				format: "table",
-				colspan: 4,
-			});
-		}
-	}
-
-	/**
-	 * Update permissions section
-	 * @param {Element} modal - Modal element
-	 * @param {Array} permissions - Permissions array
-	 */
-	async updatePermissionsSection(modal, permissions) {
-		const permissionsContainer = modal.querySelector("#dataset-permissions");
-		if (!permissionsContainer) return;
-
-		try {
-			// Normalize permissions with badge class and display name
-			const normalizedPermissions = permissions.map((permission) => ({
-				...permission,
-				badge_class: this.permissions.getPermissionBadgeClass(
-					permission.permission_level,
-				),
-				display_name: this.permissions.getPermissionDisplayName(
-					permission.permission_level,
-				),
-			}));
-
-			const response = await window.APIClient.post(
-				"/users/render-html/",
-				{
-					template: "users/components/modal_permissions.html",
-					context: { permissions: normalizedPermissions },
-				},
-				null,
-				true,
-			); // true = send as JSON
-
-			if (response.html) {
-				permissionsContainer.innerHTML = response.html;
-			}
-		} catch (error) {
-			console.error("Error rendering permissions:", error);
-			await window.DOMUtils.renderError(
-				permissionsContainer,
-				"Error loading permissions",
-				{ format: "inline" },
-			);
-		}
-	}
-
-	/**
-	 * Update technical details for capture
-	 * @param {Element} modal - Modal element
-	 * @param {Object} captureData - Capture data
-	 */
-	async updateTechnicalDetails(modal, captureData) {
-		const technicalDetails = modal.querySelector("#capture-technical-details");
-		if (!technicalDetails) return;
-
-		const details = [];
-
-		if (captureData.center_frequency_ghz) {
-			details.push(`Center Frequency: ${captureData.center_frequency_ghz} GHz`);
-		}
-
-		if (captureData.bandwidth_mhz) {
-			details.push(`Bandwidth: ${captureData.bandwidth_mhz} MHz`);
-		}
-
-		if (captureData.sample_rate_hz) {
-			details.push(`Sample Rate: ${captureData.sample_rate_hz} Hz`);
-		}
-
-		if (captureData.duration_seconds) {
-			details.push(`Duration: ${captureData.duration_seconds} seconds`);
-		}
-
-		try {
-			const response = await window.APIClient.post(
-				"/users/render-html/",
-				{
-					template: "users/components/modal_technical_details.html",
-					context: { details: details },
-				},
-				null,
-				true,
-			); // true = send as JSON
-
-			if (response.html) {
-				technicalDetails.innerHTML = response.html;
-			}
-		} catch (error) {
-			console.error("Error rendering technical details:", error);
-			await window.DOMUtils.renderError(
-				technicalDetails,
-				"Error loading details",
-				{ format: "inline" },
-			);
-		}
-	}
-
-	/**
-	 * Update action buttons for capture
-	 * @param {Element} modal - Modal element
-	 * @param {Object} captureData - Capture data
-	 */
-	updateCaptureActionButtons(modal, captureData) {
-		// Download button
-		const downloadButton = modal.querySelector("#download-capture-btn");
-		if (!downloadButton) {
-			// Continue to next button
-		} else if (!this.permissions.canDownload()) {
-			window.DOMUtils.hide(downloadButton, "display-inline-block");
-		} else {
-			window.DOMUtils.show(downloadButton, "display-inline-block");
-			downloadButton.setAttribute("data-capture-uuid", captureData.uuid);
-			downloadButton.setAttribute("data-capture-name", captureData.name);
-		}
-
-		// Visualize button
-		const visualizeButton = modal.querySelector("#visualize-capture-btn");
-		if (!visualizeButton) return;
-
-		if (!this.permissions.canView()) {
-			window.DOMUtils.hide(visualizeButton, "display-inline-block");
-		} else {
-			window.DOMUtils.show(visualizeButton, "display-inline-block");
-			visualizeButton.setAttribute("data-capture-uuid", captureData.uuid);
-		}
-	}
-
-	/**
-	 * Show modal loading state
-	 * @param {string} modalId - Modal ID
-	 */
-	async showModalLoading(modalId) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
-
-		const modalBody = modal.querySelector(".modal-body");
-		if (modalBody) {
-			// Store original content before showing loading
-			if (!modalBody.dataset.originalContent) {
-				modalBody.dataset.originalContent = modalBody.innerHTML;
-			}
-
-			await window.DOMUtils.renderLoading(modalBody, "Loading details...", {
-				format: "modal",
-			});
-		}
-	}
-
-	/**
-	 * Handle dataset details modal show
-	 * @param {Element} modal - Modal element
-	 * @param {Event} event - Bootstrap modal event
-	 */
-	handleDatasetDetailsModalShow(modal, event) {
-		// Get the triggering element (the element that opened the modal)
-		const triggerElement = event.relatedTarget;
-
-		if (!triggerElement) {
-			console.warn("No trigger element found for dataset details modal");
-			window.DOMUtils.showModalError(
-				this.modalId,
-				"Unable to load dataset details",
-			);
-			return;
-		}
-
-		// Extract dataset UUID from the triggering element
-		const datasetUuid = triggerElement.getAttribute("data-dataset-uuid");
-
-		if (!datasetUuid) {
-			console.warn("No dataset UUID found on trigger element:", triggerElement);
-			window.DOMUtils.showModalError(this.modalId, "Dataset UUID not found");
-			return;
-		}
-
-		// Load dataset details
-		this.loadDatasetDetailsForModal(datasetUuid);
-	}
-
-	/**
-	 * Load dataset details for modal
-	 * @param {string} datasetUuid - Dataset UUID
-	 */
-	async loadDatasetDetailsForModal(datasetUuid) {
-		try {
-			// Show loading state
-			window.DOMUtils.showModalLoading(this.modalId);
-
-			// Fetch dataset details
-			const response = await window.APIClient.get(
-				`/users/dataset-details/?dataset_uuid=${datasetUuid}`,
-			);
-
-			// Extract dataset data from the response
-			const datasetData = response.dataset;
-			const statistics = response.statistics;
-			const tree = response.tree;
-
-			// Populate modal with data
-			await this.populateDatasetDetailsModal(datasetData, statistics, tree);
-		} catch (error) {
-			console.error("Error loading dataset details:", error);
-			window.DOMUtils.showModalError(
-				this.modalId,
-				"Failed to load dataset details",
-			);
-		}
-	}
-
-	/**
-	 * Update file tree
-	 * @param {Element} modal - Modal element
-	 * @param {Object} tree - File tree data
-	 */
-	async updateFileTree(modal, tree) {
-		const tableBody = modal.querySelector("#dataset-file-tree-table tbody");
-		if (!tableBody || !tree) return;
-
-		// Build normalized rows for server-side rendering
-		const rows = this.buildTreeRows(tree, 0);
-
-		try {
-			const response = await window.APIClient.post(
-				"/users/render-html/",
-				{
-					template: "users/components/modal_file_tree.html",
-					context: { rows: rows },
-				},
-				null,
-				true,
-			); // true = send as JSON
-
-			if (response.html) {
-				tableBody.innerHTML = response.html;
-			}
-		} catch (error) {
-			console.error("Error rendering file tree:", error);
-			await window.DOMUtils.renderError(tableBody, "Error loading file tree", {
-				format: "table",
-				colspan: 5,
-			});
-		}
-	}
-
-	/**
-	 * Build tree rows for server-side rendering
-	 * @param {Object} node - Tree node
-	 * @param {number} depth - Current depth for indentation
-	 * @returns {Array<Object>} Array of row objects for template
-	 */
-	buildTreeRows(node, depth = 0) {
-		const rows = [];
-
-		// Add files in this directory first
-		if (node.files && Array.isArray(node.files)) {
-			for (const file of node.files) {
-				rows.push({
-					indent_level: depth,
-					indent_range: [...Array(depth).keys()], // For template loop
-					icon: "bi-file-earmark",
-					icon_color: "text-primary",
-					name: file.name,
-					type: file.media_type || file.type || "File",
-					size: window.DOMUtils.formatFileSize(file.size || 0),
-					created_at: this.formatDate(file.created_at),
-					has_chevron: false,
-				});
-			}
-		}
-
-		// Add child directories
-		if (node.children && typeof node.children === "object") {
-			for (const childNode of Object.values(node.children)) {
-				if (childNode.type === "directory") {
-					// Add directory row
-					rows.push({
-						indent_level: depth,
-						indent_range: [...Array(depth).keys()], // For template loop
-						icon: "bi-folder",
-						icon_color: "text-warning",
-						name: `${childNode.name}/`,
-						type: "Directory",
-						size: window.DOMUtils.formatFileSize(childNode.size || 0),
-						created_at: this.formatDate(childNode.created_at),
-						has_chevron: true,
-					});
-
-					// Recursively add children
-					const childRows = this.buildTreeRows(childNode, depth + 1);
-					rows.push(...childRows);
-				}
-			}
-		}
-
-		return rows;
-	}
-
-	/**
-	 * Format date for display
-	 * @param {string} dateString - Date string
-	 * @returns {string} Formatted date
-	 */
-	formatDate(dateString) {
-		if (!dateString) return "Unknown";
-
-		try {
-			const date = new Date(dateString);
-			return date.toLocaleDateString("en-US", {
-				year: "numeric",
-				month: "short",
-				day: "numeric",
-				hour: "2-digit",
-				minute: "2-digit",
-			});
-		} catch (error) {
-			return "Invalid date";
-		}
-	}
-
-	/**
-	 * Cleanup resources
-	 */
-	cleanup() {
-		// Remove event listeners and clean up any resources
-		const detailsButtons = document.querySelectorAll(
-			".dataset-details-btn, .capture-details-btn",
-		);
-		for (const button of detailsButtons) {
-			button.removeEventListener("click", this.handleDatasetDetails);
-			button.removeEventListener("click", this.handleCaptureDetails);
-		}
-	}
 }
 
-// Make class available globally
 window.DetailsActionManager = DetailsActionManager;
 
-// Export for ES6 modules (Jest testing) - only if in module context
 if (typeof module !== "undefined" && module.exports) {
 	module.exports = { DetailsActionManager };
 }
diff --git a/gateway/sds_gateway/static/js/actions/DownloadActionManager.js b/gateway/sds_gateway/static/js/actions/DownloadActionManager.js
index d7b692a9c..e557789de 100644
--- a/gateway/sds_gateway/static/js/actions/DownloadActionManager.js
+++ b/gateway/sds_gateway/static/js/actions/DownloadActionManager.js
@@ -1,52 +1,16 @@
 /**
  * Download Action Manager
  * Handles all download-related actions
+ * Temporal slider: {@link initializeCaptureDownloadSlider} in download/captureDownloadSlider.js
  */
 
-function msToHms(ms) {
-	const n = Number(ms);
-	if (!Number.isFinite(n) || n < 0) return "0:00:00.000";
-	const totalSec = Math.floor(n / 1000);
-	const h = Math.floor(totalSec / 3600);
-	const m = Math.floor((totalSec % 3600) / 60);
-	const s = totalSec % 60;
-	const decimalMs = n % 1000;
-	const hms = [h, m, s].map((v) => String(v).padStart(2, "0")).join(":");
-	return `${hms}.${String(decimalMs).padStart(3, "0")}`;
-}
-
-function formatUtcRange(startEpochSec, startMs, endMs) {
-	if (!Number.isFinite(startEpochSec)) return "—";
-	const startDate = new Date(startEpochSec * 1000 + startMs);
-	const endDate = new Date(startEpochSec * 1000 + endMs);
-	const pad2 = (x) => String(x).padStart(2, "0");
-	const fmt = (d) =>
-		`${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())} ${pad2(d.getUTCMonth() + 1)}/${pad2(d.getUTCDate())}/${d.getUTCFullYear()}`;
-	return `${fmt(startDate)} - ${fmt(endDate)} (UTC)`;
-}
-
-/** Format ms from capture start as UTC string for display (Y-m-d H:i:s). */
-function msToUtcString(captureStartEpochSec, ms) {
-	if (!Number.isFinite(captureStartEpochSec) || !Number.isFinite(ms)) return "";
-	const d = new Date(captureStartEpochSec * 1000 + ms);
-	const pad2 = (x) => String(x).padStart(2, "0");
-	return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())} ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())}`;
-}
-
-/** Parse UTC date string (Y-m-d H:i:s or Y-m-d H:i) to epoch ms. */
-function parseUtcStringToEpochMs(str) {
-	if (!str || !str.trim()) return Number.NaN;
-	const s = str.trim();
-	const d = new Date(s.endsWith("Z") ? s : `${s.replace(" ", "T")}Z`);
-	return Number.isFinite(d.getTime()) ? d.getTime() : Number.NaN;
-}
-
-class DownloadActionManager {
+class DownloadActionManager extends ModalManager {
 	/**
 	 * Initialize download action manager
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
 		this.permissions = config.permissions;
 		this.initializeEventListeners();
 	}
@@ -62,6 +26,51 @@ class DownloadActionManager {
 		this.initializeSDKDownloadButtons();
 	}
 
+	/**
+	 * List dropdown download (wired by ModalManager._wireWebDownloadModalTriggers).
+	 * @param {HTMLElement} toggle
+	 */
+	openWebDownloadFromToggle(toggle) {
+		const target =
+			toggle.getAttribute("data-bs-target") ||
+			toggle.getAttribute("href") ||
+			"";
+		const modalId = target.startsWith("#") ? target.slice(1) : target;
+		if (!modalId.startsWith("webDownloadModal-")) {
+			return;
+		}
+		const itemUuid = modalId.replace("webDownloadModal-", "");
+		const modal = document.getElementById(modalId);
+		const itemType = modal?.getAttribute("data-item-type") || "dataset";
+
+		if (!this.permissions.canDownload()) {
+			this.showToast(
+				`You don't have permission to download this ${itemType}`,
+				"warning",
+			);
+			return;
+		}
+
+		this.openModal(modalId, {
+			trigger: toggle,
+			downloadActionManager: this,
+		});
+	}
+
+	/**
+	 * After ModalManager opens a web download modal (shown.bs.modal).
+	 * @param {HTMLElement} modal
+	 * @param {HTMLElement|null} triggerButton
+	 */
+	prepareWebDownloadModal(modal, triggerButton) {
+		const itemUuid = modal.id.replace("webDownloadModal-", "");
+		const itemType = modal.getAttribute("data-item-type") || "dataset";
+		if (itemType === "capture") {
+			this.setTemporalSliderAttrs(modal.id, modal, itemUuid);
+		}
+		this.wireWebDownloadConfirm(modal.id, itemUuid, itemType, triggerButton);
+	}
+
 	/**
 	 * Initialize web download buttons on the table rows
 	 */
@@ -103,325 +112,47 @@ class DownloadActionManager {
 	 * @param {Object} opts - Optional: { perDataFileSize, totalSize, dataFilesCount, totalFilesCount, dataFilesTotalSize, captureUuid, captureStartEpochSec }
 	 */
 	initializeCaptureDownloadSlider(modalId, durationMs, fileCadenceMs, opts) {
-		const webDownloadModal = document.getElementById(modalId);
-		if (!webDownloadModal) return;
-
-		const resolvedOpts = opts ?? {};
-		const q = (id) => webDownloadModal.querySelector(`#${id}`);
-		const sliderEl = q("temporalFilterSlider");
-		const rangeLabel = q("temporalFilterRangeLabel");
-		const totalFilesLabel = q("totalFilesLabel");
-		const metadataFilesLabel = q("metadataFilesLabel");
-		const totalSizeLabel = q("totalSizeLabel");
-		const dateTimeLabel = q("dateTimeLabel");
-		const startTimeInput = q("startTime");
-		const endTimeInput = q("endTime");
-		const startTimeEntry = q("startTimeEntry");
-		const endTimeEntry = q("endTimeEntry");
-		const startDateTimeEntry = q("startDateTimeEntry");
-		const endDateTimeEntry = q("endDateTimeEntry");
-		const rangeHintEl = q("temporalRangeHint");
-		const sizeWarningEl = q("temporalFilterSizeWarning");
-		if (!sliderEl || typeof noUiSlider === "undefined") return;
-		const resolvedDurationMs = (() => {
-			const n = Number(durationMs);
-			return !Number.isFinite(n) || n < 0 ? 0 : n;
-		})();
-		const resolvedFileCadenceMs = (() => {
-			const n = Number(fileCadenceMs);
-			return !Number.isFinite(n) || n < 1 ? 1000 : n;
-		})();
-		const perDataFileSize = Number(resolvedOpts.perDataFileSize) || 0;
-		const totalSize = Number(resolvedOpts.totalSize) || 0;
-		const dataFilesCount = Number(resolvedOpts.dataFilesCount) || 0;
-		const totalFilesCount = Number(resolvedOpts.totalFilesCount) || 0;
-		let dataFilesTotalSize = Number(resolvedOpts.dataFilesTotalSize);
-		if (!Number.isFinite(dataFilesTotalSize) || dataFilesTotalSize < 0) {
-			dataFilesTotalSize = perDataFileSize * dataFilesCount;
-		}
-		let metadataFilesTotalSize = totalSize - dataFilesTotalSize;
-		if (metadataFilesTotalSize < 0) metadataFilesTotalSize = 0;
-		const metadataFilesCount = Math.max(0, totalFilesCount - dataFilesCount);
-		const captureUuid =
-			resolvedOpts.captureUuid != null ? String(resolvedOpts.captureUuid) : "";
-		const captureStartEpochSec = Number(resolvedOpts.captureStartEpochSec);
-		if (totalSize > 0 && dataFilesTotalSize > totalSize) {
-			console.warn(
-				"[DownloadActionManager] data files total size exceeds total size (backend/query inconsistency).",
-				{
-					captureUuid: captureUuid || "(unknown)",
-					totalSize,
-					dataFilesTotalSize,
-					perDataFileSize,
-					dataFilesCount,
-				},
-			);
-			if (sizeWarningEl) {
-				sizeWarningEl.classList.remove("d-none");
-			}
-			dataFilesTotalSize = totalSize;
-			metadataFilesTotalSize = 0;
-		} else if (sizeWarningEl) {
-			sizeWarningEl.classList.add("d-none");
-		}
-		if (webDownloadModal) {
-			webDownloadModal.dataset.durationMs = String(
-				Math.round(resolvedDurationMs),
-			);
-			webDownloadModal.dataset.fileCadenceMs = String(resolvedFileCadenceMs);
-			webDownloadModal.dataset.captureStartEpochSec = Number.isFinite(
-				captureStartEpochSec,
-			)
-				? String(captureStartEpochSec)
-				: "";
-		}
-		if (rangeHintEl)
-			rangeHintEl.textContent = `0 – ${Math.round(resolvedDurationMs)} ms`;
-		if (sliderEl.noUiSlider) {
-			sliderEl.noUiSlider.destroy();
-		}
-		if (rangeLabel) rangeLabel.textContent = "—";
-		if (totalFilesLabel) totalFilesLabel.textContent = "0 files";
-		if (totalSizeLabel)
-			totalSizeLabel.textContent = window.DOMUtils.formatFileSize(totalSize);
-		if (dateTimeLabel) dateTimeLabel.textContent = "—";
-		if (startTimeInput) startTimeInput.value = "";
-		if (endTimeInput) endTimeInput.value = "";
-		if (startTimeEntry) startTimeEntry.value = "";
-		if (endTimeEntry) endTimeEntry.value = "";
-		const hasEpoch = Number.isFinite(captureStartEpochSec);
-		if (startDateTimeEntry) {
-			startDateTimeEntry.value = "";
-			startDateTimeEntry.disabled = !hasEpoch;
-		}
-		if (endDateTimeEntry) {
-			endDateTimeEntry.value = "";
-			endDateTimeEntry.disabled = !hasEpoch;
-		}
-		if (resolvedDurationMs <= 0) return;
-		let fpStart = null;
-		let fpEnd = null;
-		const epochStart = captureStartEpochSec * 1000;
-		const epochEnd = epochStart + resolvedDurationMs;
-		if (
-			hasEpoch &&
-			typeof flatpickr !== "undefined" &&
-			startDateTimeEntry &&
-			endDateTimeEntry
-		) {
-			const fpOpts = {
-				enableTime: true,
-				enableSeconds: true,
-				utc: true,
-				dateFormat: "Y-m-d H:i:S",
-				time_24hr: true,
-				minDate: epochStart,
-				maxDate: epochEnd,
-				allowInput: true,
-				static: true,
-				appendTo: webDownloadModal || undefined,
-			};
-			flatpickr(
-				startDateTimeEntry,
-				Object.assign({}, fpOpts, {
-					onChange: () => {
-						syncFromDateTimeEntries();
-					},
-				}),
+		const init = window.initializeCaptureDownloadSlider;
+		if (typeof init !== "function") {
+			console.error(
+				"initializeCaptureDownloadSlider not loaded; include captureDownloadSlider.js",
 			);
-			flatpickr(
-				endDateTimeEntry,
-				Object.assign({}, fpOpts, {
-					onChange: () => {
-						syncFromDateTimeEntries();
-					},
-				}),
-			);
-			fpStart = startDateTimeEntry._flatpickr;
-			fpEnd = endDateTimeEntry._flatpickr;
-			startDateTimeEntry.disabled = false;
-			endDateTimeEntry.disabled = false;
-		}
-		noUiSlider.create(sliderEl, {
-			start: [0, resolvedDurationMs],
-			connect: true,
-			step: resolvedFileCadenceMs,
-			range: { min: 0, max: resolvedDurationMs },
-		});
-		sliderEl.noUiSlider.on("update", (values) => {
-			const startMs = Number(values[0]);
-			const endMs = Number(values[1]);
-			// the + 1 is to include the first file in the selection
-			// as file cadence is the time between files, not the time of the file
-			const filesInSelection =
-				Math.round((endMs - startMs) / resolvedFileCadenceMs) + 1;
-			if (rangeLabel) {
-				rangeLabel.textContent = `${msToHms(startMs)} - ${msToHms(endMs)}`;
-			}
-			if (totalFilesLabel) {
-				totalFilesLabel.textContent =
-					dataFilesCount > 0
-						? `${filesInSelection} of ${dataFilesCount} files`
-						: `${filesInSelection} files`;
-			}
-			if (totalSizeLabel) {
-				totalSizeLabel.textContent = window.DOMUtils.formatFileSize(
-					perDataFileSize * filesInSelection + metadataFilesTotalSize,
-				);
-			}
-			if (dateTimeLabel && Number.isFinite(captureStartEpochSec)) {
-				dateTimeLabel.textContent = formatUtcRange(
-					captureStartEpochSec,
-					startMs,
-					endMs,
-				);
-			}
-			if (startTimeInput) startTimeInput.value = String(Math.round(startMs));
-			if (endTimeInput) endTimeInput.value = String(Math.round(endMs));
-			if (startTimeEntry) startTimeEntry.value = String(Math.round(startMs));
-			if (endTimeEntry) endTimeEntry.value = String(Math.round(endMs));
-			if (hasEpoch) {
-				if (fpStart && typeof fpStart.setDate === "function")
-					fpStart.setDate(epochStart + startMs);
-				else if (startDateTimeEntry)
-					startDateTimeEntry.value = msToUtcString(
-						captureStartEpochSec,
-						startMs,
-					);
-				if (fpEnd && typeof fpEnd.setDate === "function")
-					fpEnd.setDate(epochStart + endMs);
-				else if (endDateTimeEntry)
-					endDateTimeEntry.value = msToUtcString(captureStartEpochSec, endMs);
-			}
-		});
-		if (rangeLabel) {
-			rangeLabel.textContent = `0:00:00.000 - ${msToHms(resolvedDurationMs)}`;
-		}
-		if (totalFilesLabel) {
-			totalFilesLabel.textContent =
-				dataFilesCount > 0 ? `${dataFilesCount} files` : "0 files";
-		}
-		if (metadataFilesLabel) {
-			metadataFilesLabel.textContent =
-				metadataFilesCount > 0 ? `${metadataFilesCount} files` : "0 files";
-		}
-		if (dateTimeLabel && Number.isFinite(captureStartEpochSec)) {
-			dateTimeLabel.textContent = formatUtcRange(
-				captureStartEpochSec,
-				0,
-				resolvedDurationMs,
-			);
-		}
-		const startVal = "0";
-		const endVal = String(resolvedDurationMs);
-		if (startTimeInput) startTimeInput.value = startVal;
-		if (endTimeInput) endTimeInput.value = endVal;
-		if (startTimeEntry) startTimeEntry.value = startVal;
-		if (endTimeEntry) endTimeEntry.value = endVal;
-		if (hasEpoch && startDateTimeEntry && endDateTimeEntry) {
-			if (fpStart && typeof fpStart.setDate === "function")
-				fpStart.setDate(epochStart);
-			else startDateTimeEntry.value = msToUtcString(captureStartEpochSec, 0);
-			if (fpEnd && typeof fpEnd.setDate === "function") fpEnd.setDate(epochEnd);
-			else
-				endDateTimeEntry.value = msToUtcString(
-					captureStartEpochSec,
-					resolvedDurationMs,
-				);
-			if (!fpStart) {
-				startDateTimeEntry.disabled = false;
-				endDateTimeEntry.disabled = false;
-			}
-		}
-
-		function syncSliderFromEntries() {
-			if (!sliderEl.noUiSlider || !startTimeEntry || !endTimeEntry) return;
-			const s = startTimeEntry.value.trim();
-			const e = endTimeEntry.value.trim();
-			let startMs = s === "" ? 0 : Number.parseInt(s, 10);
-			let endMs = e === "" ? resolvedDurationMs : Number.parseInt(e, 10);
-			if (!Number.isFinite(startMs)) startMs = 0;
-			if (!Number.isFinite(endMs)) endMs = resolvedDurationMs;
-			startMs = Math.max(0, Math.min(startMs, resolvedDurationMs));
-			endMs = Math.max(0, Math.min(endMs, resolvedDurationMs));
-			if (startMs >= endMs)
-				endMs = Math.min(startMs + resolvedFileCadenceMs, resolvedDurationMs);
-			sliderEl.noUiSlider.set([startMs, endMs]);
-		}
-		function syncFromDateTimeEntries() {
-			if (
-				!hasEpoch ||
-				!sliderEl.noUiSlider ||
-				!startDateTimeEntry ||
-				!endDateTimeEntry
-			)
-				return;
-			let startMs;
-			let endMs;
-			if (startDateTimeEntry._flatpickr && endDateTimeEntry._flatpickr) {
-				const dStart = startDateTimeEntry._flatpickr.selectedDates[0];
-				const dEnd = endDateTimeEntry._flatpickr.selectedDates[0];
-				startMs = dStart ? dStart.getTime() - epochStart : 0;
-				endMs = dEnd ? dEnd.getTime() - epochStart : resolvedDurationMs;
-			} else {
-				startMs =
-					parseUtcStringToEpochMs(startDateTimeEntry.value) - epochStart;
-				endMs = parseUtcStringToEpochMs(endDateTimeEntry.value) - epochStart;
-			}
-			if (Number.isNaN(startMs) || Number.isNaN(endMs)) return;
-			startMs = Math.max(0, Math.min(startMs, resolvedDurationMs));
-			endMs = Math.max(0, Math.min(endMs, resolvedDurationMs));
-			if (startMs >= endMs)
-				endMs = Math.min(startMs + resolvedFileCadenceMs, resolvedDurationMs);
-			const cur = sliderEl.noUiSlider.get();
-			if (
-				Math.round(Number(cur[0])) === Math.round(startMs) &&
-				Math.round(Number(cur[1])) === Math.round(endMs)
-			)
-				return;
-			sliderEl.noUiSlider.set([startMs, endMs]);
+			return;
 		}
-		if (startTimeEntry)
-			startTimeEntry.addEventListener("change", syncSliderFromEntries);
-		if (endTimeEntry)
-			endTimeEntry.addEventListener("change", syncSliderFromEntries);
-		if (startDateTimeEntry && !startDateTimeEntry._flatpickr)
-			startDateTimeEntry.addEventListener("change", syncFromDateTimeEntries);
-		if (endDateTimeEntry && !endDateTimeEntry._flatpickr)
-			endDateTimeEntry.addEventListener("change", syncFromDateTimeEntries);
+		init(modalId, durationMs, fileCadenceMs, opts);
 	}
 
-	setTemporalSliderAttrs(modalId, button, itemUuid) {
-		// Initialize temporal slider from button data attributes (clears or builds slider)
+	setTemporalSliderAttrs(modalId, sourceEl, itemUuid) {
+		// Initialize temporal slider from data attributes on trigger button or modal
 		const durationMs = Number.parseInt(
-			button.getAttribute("data-length-of-capture-ms"),
+			sourceEl.getAttribute("data-length-of-capture-ms"),
 			10,
 		);
 		const fileCadenceMs = Number.parseInt(
-			button.getAttribute("data-file-cadence-ms"),
+			sourceEl.getAttribute("data-file-cadence-ms"),
 			10,
 		);
 		const perDataFileSize = Number.parseFloat(
-			button.getAttribute("data-per-data-file-size"),
+			sourceEl.getAttribute("data-per-data-file-size"),
 		);
 		const dataFilesCount = Number.parseInt(
-			button.getAttribute("data-data-files-count"),
+			sourceEl.getAttribute("data-data-files-count"),
 			10,
 		);
 		const dataFilesTotalSize = Number.parseInt(
-			button.getAttribute("data-total-data-file-size"),
+			sourceEl.getAttribute("data-total-data-file-size"),
 			10,
 		);
 		const totalSize = Number.parseInt(
-			button.getAttribute("data-total-size"),
+			sourceEl.getAttribute("data-total-size"),
 			10,
 		);
 		const totalFilesCount = Number.parseInt(
-			button.getAttribute("data-total-files-count"),
+			sourceEl.getAttribute("data-total-files-count"),
 			10,
 		);
 		const captureStartEpochSec = Number.parseInt(
-			button.getAttribute("data-capture-start-epoch-sec"),
+			sourceEl.getAttribute("data-capture-start-epoch-sec"),
 			10,
 		);
 		this.initializeCaptureDownloadSlider(
@@ -502,40 +233,49 @@ class DownloadActionManager {
 	 */
 	async initializeWebDownloadModal(itemUuid, itemType, button) {
 		const modalId = `webDownloadModal-${itemUuid}`;
-		// Show the modal
-		window.DOMUtils.openModal(modalId);
-
-		if (itemType === "capture") {
-			this.setTemporalSliderAttrs(modalId, button, itemUuid);
-		}
+		this.openModal(modalId, {
+			trigger: button,
+			downloadActionManager: this,
+		});
+	}
 
-		// Handle confirm download
+	/**
+	 * @param {string} modalId
+	 * @param {string} itemUuid
+	 * @param {string} itemType
+	 * @param {HTMLElement|null} triggerButton - row/menu button; null when opened via data-bs-toggle
+	 */
+	wireWebDownloadConfirm(modalId, itemUuid, itemType, triggerButton) {
 		const confirmBtn = document.getElementById(
 			`confirmWebDownloadBtn-${itemUuid}`,
 		);
 		if (!confirmBtn) return;
 
-		// Remove any existing event listeners
 		const newConfirmBtn = confirmBtn.cloneNode(true);
 		confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
 
+		const statusEl = triggerButton ?? newConfirmBtn;
+
 		newConfirmBtn.onclick = async () => {
-			// Show loading state
-			const originalContent = button.innerHTML;
-			await window.DOMUtils.renderLoading(button, "Processing...", {
+			const originalContent = statusEl.innerHTML;
+			await window.DOMUtils.renderLoading(statusEl, "Processing...", {
 				format: "spinner",
 				size: "sm",
 			});
-			button.disabled = true;
+			statusEl.disabled = true;
 
-			// Close modal
-			window.DOMUtils.closeModal(modalId);
+			this.closeModal(modalId);
 
 			let body = {};
 			let isJson = false;
 			try {
 				if (itemType === "capture") {
 					const result = this.addTimeFilteringToFetchRequest(modalId);
+					if (!result) {
+						statusEl.innerHTML = originalContent;
+						statusEl.disabled = false;
+						return;
+					}
 					body = result.body;
 					isJson = result.isJson;
 				}
@@ -547,7 +287,7 @@ class DownloadActionManager {
 				);
 
 				if (response.success === true) {
-					await window.DOMUtils.renderContent(button, {
+					await window.DOMUtils.renderContent(statusEl, {
 						icon: "check-circle",
 						color: "success",
 						text: "Download Requested",
@@ -558,7 +298,7 @@ class DownloadActionManager {
 						"success",
 					);
 				} else {
-					await window.DOMUtils.renderContent(button, {
+					await window.DOMUtils.renderContent(statusEl, {
 						icon: "exclamation-triangle",
 						color: "danger",
 						text: "Request Failed",
@@ -570,7 +310,7 @@ class DownloadActionManager {
 				}
 			} catch (error) {
 				console.error("Download error:", error);
-				await window.DOMUtils.renderContent(button, {
+				await window.DOMUtils.renderContent(statusEl, {
 					icon: "exclamation-triangle",
 					color: "danger",
 					text: "Request Failed",
@@ -580,10 +320,9 @@ class DownloadActionManager {
 					"danger",
 				);
 			} finally {
-				// Reset button after 3 seconds
 				setTimeout(() => {
-					button.innerHTML = originalContent;
-					button.disabled = false;
+					statusEl.innerHTML = originalContent;
+					statusEl.disabled = false;
 				}, 3000);
 			}
 		};
@@ -646,24 +385,7 @@ class DownloadActionManager {
 		);
 
 		// Use centralized openModal method
-		window.DOMUtils.openModal(modalId);
-	}
-
-	/**
-	 * Show toast notification - Wrapper for global showAlert
-	 * @param {string} message - Toast message
-	 * @param {string} type - Toast type (success, danger, warning, info)
-	 */
-	showToast(message, type = "success") {
-		// Map DownloadActionManager types to DOMUtils.showAlert types
-		const mappedType = type === "danger" ? "error" : type;
-
-		// Use DOMUtils.showAlert for toast notifications
-		if (window.DOMUtils) {
-			window.DOMUtils.showAlert(message, mappedType);
-		} else {
-			console.error("DOMUtils not available");
-		}
+		this.openModal(modalId);
 	}
 
 	/**
@@ -683,16 +405,6 @@ class DownloadActionManager {
 		return true;
 	}
 
-	/**
-	 * Close a modal by id (delegates to DOMUtils.closeModal)
-	 * @param {string} modalId - Modal element id
-	 */
-	closeCustomModal(modalId) {
-		if (window.DOMUtils?.closeModal) {
-			window.DOMUtils.closeModal(modalId);
-		}
-	}
-
 	/**
 	 * Cleanup resources
 	 */
diff --git a/gateway/sds_gateway/static/js/actions/DownloadInstructionsManager.js b/gateway/sds_gateway/static/js/actions/DownloadInstructionsManager.js
index a035b3015..0bd4475b2 100644
--- a/gateway/sds_gateway/static/js/actions/DownloadInstructionsManager.js
+++ b/gateway/sds_gateway/static/js/actions/DownloadInstructionsManager.js
@@ -59,23 +59,12 @@ class DownloadInstructionsManager {
 	}
 
 	fallbackCopyTextToClipboard(text, button) {
-		const textArea = document.createElement("textarea");
-		textArea.value = text;
-		textArea.style.position = "fixed";
-		textArea.style.left = "-999999px";
-		textArea.style.top = "-999999px";
-		document.body.appendChild(textArea);
-		textArea.focus();
-		textArea.select();
-
 		try {
-			document.execCommand("copy");
+			window.UserInputController.execCommandCopyFallback(text);
 			this.showCopySuccess(button);
 		} catch (err) {
 			console.error("Fallback: Oops, unable to copy", err);
 		}
-
-		document.body.removeChild(textArea);
 	}
 }
 
diff --git a/gateway/sds_gateway/static/js/actions/PublishActionManager.js b/gateway/sds_gateway/static/js/actions/PublishActionManager.js
index 80a880c83..111b5fcfc 100644
--- a/gateway/sds_gateway/static/js/actions/PublishActionManager.js
+++ b/gateway/sds_gateway/static/js/actions/PublishActionManager.js
@@ -2,21 +2,54 @@
  * Publish Action Manager
  * Handles all publish-related actions
  */
-class PublishActionManager {
+class PublishActionManager extends ModalManager {
 	/**
 	 * Initialize publish action manager
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
 		this.config = config || {};
 		this.initializeEventListeners();
 	}
 
+	/**
+	 * Cached DOM refs for a publish modal by dataset UUID.
+	 * @param {string} datasetUuid
+	 * @returns {{
+	 *   publishToggle: HTMLElement | null,
+	 *   visibilitySection: HTMLElement | null,
+	 *   privateOption: HTMLElement | null,
+	 *   publicOption: HTMLElement | null,
+	 *   publicWarning: HTMLElement | null,
+	 *   publishBtn: HTMLElement | null,
+	 *   statusBadge: HTMLElement | null,
+	 * }}
+	 */
+	_getPublishModalElements(datasetUuid) {
+		return {
+			publishToggle: document.getElementById(
+				`publish-dataset-toggle-${datasetUuid}`,
+			),
+			visibilitySection: document.getElementById(
+				`visibility-toggle-section-${datasetUuid}`,
+			),
+			privateOption: document.getElementById(`private-option-${datasetUuid}`),
+			publicOption: document.getElementById(`public-option-${datasetUuid}`),
+			publicWarning: document.getElementById(
+				`public-warning-message-${datasetUuid}`,
+			),
+			publishBtn: document.getElementById(`publishDatasetBtn-${datasetUuid}`),
+			statusBadge: document.getElementById(
+				`current-status-badge-${datasetUuid}`,
+			),
+		};
+	}
+
 	/**
 	 * Initialize event listeners for all publish modals on the page
 	 */
 	initializeEventListeners() {
-		// Find all publish modals
 		const publishModals = document.querySelectorAll(
 			'[id^="publish-dataset-modal-"]',
 		);
@@ -25,48 +58,23 @@ class PublishActionManager {
 			const datasetUuid = modal.getAttribute("data-dataset-uuid");
 			if (!datasetUuid) continue;
 
-			// Explicitly initialize Bootstrap modal to avoid auto-initialization issues
-			if (window.bootstrap && !bootstrap.Modal.getInstance(modal)) {
-				new bootstrap.Modal(modal, {
-					backdrop: true,
-					keyboard: true,
-					focus: true,
-				});
-			}
+			const {
+				publishToggle,
+				visibilitySection,
+				privateOption,
+				publicOption,
+				publicWarning,
+				publishBtn,
+				statusBadge,
+			} = this._getPublishModalElements(datasetUuid);
 
-			// Get elements for this specific modal
-			const publishToggle = document.getElementById(
-				`publish-dataset-toggle-${datasetUuid}`,
-			);
-			const visibilitySection = document.getElementById(
-				`visibility-toggle-section-${datasetUuid}`,
-			);
-			const privateOption = document.getElementById(
-				`private-option-${datasetUuid}`,
-			);
-			const publicOption = document.getElementById(
-				`public-option-${datasetUuid}`,
-			);
-			const publicWarning = document.getElementById(
-				`public-warning-message-${datasetUuid}`,
-			);
-			const publishBtn = document.getElementById(
-				`publishDatasetBtn-${datasetUuid}`,
-			);
-			const statusBadge = document.getElementById(
-				`current-status-badge-${datasetUuid}`,
-			);
-
-			// Store initial status badge text (only once)
 			if (statusBadge && !statusBadge.hasAttribute("data-initial-text")) {
 				statusBadge.setAttribute("data-initial-text", statusBadge.textContent);
 				statusBadge.setAttribute("data-initial-class", statusBadge.className);
 			}
 
-			// Setup reset on modal close
 			this.setupModalReset(modal, datasetUuid);
 
-			// Handle publish toggle change
 			if (publishToggle) {
 				publishToggle.addEventListener("change", () => {
 					this.handlePublishToggleChange(
@@ -77,7 +85,6 @@ class PublishActionManager {
 				});
 			}
 
-			// Handle visibility toggle changes
 			if (publicOption) {
 				publicOption.addEventListener("change", () => {
 					if (publicOption.checked && publicWarning) {
@@ -94,7 +101,6 @@ class PublishActionManager {
 				});
 			}
 
-			// Handle publish button click
 			if (publishBtn) {
 				publishBtn.addEventListener("click", () => {
 					this.handlePublish(
@@ -108,12 +114,10 @@ class PublishActionManager {
 			}
 		}
 
-		// Handle publish button clicks in dropdown (open modal)
 		for (const btn of document.querySelectorAll(".publish-dataset-btn")) {
 			const datasetUuid = btn.getAttribute("data-dataset-uuid");
 			if (!datasetUuid) continue;
 
-			// Only attach handler if modal exists
 			const modalId = `publish-dataset-modal-${datasetUuid}`;
 			const modal = document.getElementById(modalId);
 			if (!modal) {
@@ -133,10 +137,6 @@ class PublishActionManager {
 		}
 	}
 
-	/**
-	 * Open publish modal for a specific dataset
-	 * @param {string} datasetUuid - Dataset UUID
-	 */
 	openPublishModal(datasetUuid) {
 		const modalId = `publish-dataset-modal-${datasetUuid}`;
 		const modal = document.getElementById(modalId);
@@ -144,41 +144,18 @@ class PublishActionManager {
 			console.warn(
 				`Publish modal not found for dataset ${datasetUuid}. The modal may not be available for this dataset.`,
 			);
-			// Show a user-friendly message
-			this.showNotification(
+			this.showToast(
 				"Publish functionality is not available for this dataset.",
 				"error",
 			);
 			return;
 		}
 
-		// Get or create Bootstrap modal instance
-		if (!window.bootstrap) {
-			console.error("Bootstrap is not available");
-			return;
-		}
-
-		let bootstrapModal = bootstrap.Modal.getInstance(modal);
-		if (!bootstrapModal) {
-			bootstrapModal = new bootstrap.Modal(modal, {
-				backdrop: true,
-				keyboard: true,
-				focus: true,
-			});
-		}
-
-		bootstrapModal.show();
+		this.openModal(modalId);
 	}
 
-	/**
-	 * Handle publish toggle change
-	 * @param {HTMLElement} publishToggle - The publish toggle checkbox
-	 * @param {HTMLElement} visibilitySection - The visibility section element
-	 * @param {HTMLElement} statusBadge - The status badge element
-	 */
 	handlePublishToggleChange(publishToggle, visibilitySection, statusBadge) {
 		if (publishToggle.checked) {
-			// Publishing - set status to final and show visibility options
 			if (statusBadge) {
 				statusBadge.textContent = "Final";
 				statusBadge.className = "badge bg-success";
@@ -187,7 +164,6 @@ class PublishActionManager {
 				visibilitySection.classList.remove("d-none");
 			}
 		} else {
-			// Not publishing - set status to draft and hide visibility options
 			if (statusBadge) {
 				statusBadge.textContent = "Draft";
 				statusBadge.className = "badge bg-secondary";
@@ -198,14 +174,6 @@ class PublishActionManager {
 		}
 	}
 
-	/**
-	 * Handle publish button click
-	 * @param {string} datasetUuid - Dataset UUID
-	 * @param {HTMLElement} statusBadge - The status badge element
-	 * @param {HTMLElement} publishToggle - The publish toggle checkbox
-	 * @param {HTMLElement} privateOption - The private option radio button
-	 * @param {HTMLElement} publicOption - The public option radio button
-	 */
 	async handlePublish(
 		datasetUuid,
 		statusBadge,
@@ -228,56 +196,39 @@ class PublishActionManager {
 					? "false"
 					: "false";
 
-			// Prepare data
 			const data = {
 				status: status,
 				is_public: isPublic,
 			};
 
-			// Show loading state
-			const publishBtn = document.getElementById(
-				`publishDatasetBtn-${datasetUuid}`,
-			);
+			const { publishBtn } = this._getPublishModalElements(datasetUuid);
 			if (publishBtn) {
 				publishBtn.disabled = true;
 				publishBtn.innerHTML =
 					'<span class="spinner-border spinner-border-sm me-2"></span>Publishing...';
 			}
 
-			// Make API call
 			const url = `/users/publish-dataset/${datasetUuid}/`;
 			const response = await window.APIClient.post(url, data);
 
 			if (response.success) {
-				// Show success message
-				this.showNotification(
+				this.showToast(
 					response.message || "Dataset published successfully.",
 					"success",
 				);
 
-				// Close modal
-				const modal = document.getElementById(
-					`publish-dataset-modal-${datasetUuid}`,
-				);
-				if (modal) {
-					const bsModal = bootstrap.Modal.getInstance(modal);
-					if (bsModal) {
-						bsModal.hide();
-					}
-				}
+				const modalId = `publish-dataset-modal-${datasetUuid}`;
+				this.closeModal(modalId);
 
-				// Reload page after a short delay to show updated status
 				setTimeout(() => {
 					window.location.reload();
 				}, 1000);
 			} else {
-				// Show error message
-				this.showNotification(
+				this.showToast(
 					response.error || "An error occurred while publishing the dataset.",
 					"error",
 				);
 
-				// Restore button
 				if (publishBtn) {
 					publishBtn.disabled = false;
 					publishBtn.innerHTML = "Publish";
@@ -285,64 +236,37 @@ class PublishActionManager {
 			}
 		} catch (error) {
 			console.error("Error publishing dataset:", error);
-			this.showNotification(
+			this.showToast(
 				error.message || "An error occurred while publishing the dataset.",
 				"error",
 			);
 
-			// Restore button
-			const publishBtn = document.getElementById(
-				`publishDatasetBtn-${datasetUuid}`,
-			);
-			if (publishBtn) {
-				publishBtn.disabled = false;
-				publishBtn.innerHTML = "Publish";
+			const { publishBtn: pb } = this._getPublishModalElements(datasetUuid);
+			if (pb) {
+				pb.disabled = false;
+				pb.innerHTML = "Publish";
 			}
 		}
 	}
 
-	/**
-	 * Setup modal reset functionality
-	 * @param {HTMLElement} modal - The modal element
-	 * @param {string} datasetUuid - Dataset UUID
-	 */
 	setupModalReset(modal, datasetUuid) {
-		// Reset form elements when modal is hidden
 		modal.addEventListener("hidden.bs.modal", () => {
 			this.resetModalState(datasetUuid);
 		});
 	}
 
-	/**
-	 * Reset modal state by resetting form elements to their default state
-	 * @param {string} datasetUuid - Dataset UUID
-	 */
 	resetModalState(datasetUuid) {
-		const publishToggle = document.getElementById(
-			`publish-dataset-toggle-${datasetUuid}`,
-		);
-		const visibilitySection = document.getElementById(
-			`visibility-toggle-section-${datasetUuid}`,
-		);
-		const privateOption = document.getElementById(
-			`private-option-${datasetUuid}`,
-		);
-		const publicOption = document.getElementById(
-			`public-option-${datasetUuid}`,
-		);
-		const publicWarning = document.getElementById(
-			`public-warning-message-${datasetUuid}`,
-		);
-		const statusBadge = document.getElementById(
-			`current-status-badge-${datasetUuid}`,
-		);
-		const publishBtn = document.getElementById(
-			`publishDatasetBtn-${datasetUuid}`,
-		);
+		const {
+			publishToggle,
+			visibilitySection,
+			privateOption,
+			publicOption,
+			publicWarning,
+			statusBadge,
+			publishBtn,
+		} = this._getPublishModalElements(datasetUuid);
 
-		// Reset form elements to their default state (as rendered in template)
 		if (publishToggle) {
-			// Reset to default checked state from template
 			publishToggle.checked = publishToggle.defaultChecked;
 		}
 
@@ -354,7 +278,6 @@ class PublishActionManager {
 			publicOption.checked = publicOption.defaultChecked;
 		}
 
-		// Reset visibility section based on default publish toggle state
 		if (visibilitySection && publishToggle) {
 			if (publishToggle.defaultChecked) {
 				visibilitySection.classList.remove("d-none");
@@ -363,7 +286,6 @@ class PublishActionManager {
 			}
 		}
 
-		// Reset public warning based on default public option state
 		if (publicWarning && publicOption) {
 			if (publicOption.defaultChecked) {
 				publicWarning.classList.remove("d-none");
@@ -372,7 +294,6 @@ class PublishActionManager {
 			}
 		}
 
-		// Reset status badge to initial text from template
 		if (statusBadge) {
 			const initialText = statusBadge.getAttribute("data-initial-text");
 			const initialClass = statusBadge.getAttribute("data-initial-class");
@@ -384,31 +305,15 @@ class PublishActionManager {
 			}
 		}
 
-		// Reset publish button
 		if (publishBtn) {
 			publishBtn.disabled = false;
 			publishBtn.innerHTML = "Publish";
 		}
 	}
-
-	/**
-	 * Show notification toast
-	 * @param {string} message - Message to display
-	 * @param {string} type - Type of notification (success, error, info)
-	 */
-	showNotification(message, type = "info") {
-		if (window.DOMUtils?.showAlert) {
-			window.DOMUtils.showAlert(message, type);
-		} else {
-			console.error("DOMUtils not available");
-		}
-	}
 }
 
-// Make class available globally
 window.PublishActionManager = PublishActionManager;
 
-// Export for CommonJS environments (e.g. Jest/Babel interop) - only
 if (typeof module !== "undefined" && module.exports) {
 	module.exports = { PublishActionManager };
 }
diff --git a/gateway/sds_gateway/static/js/actions/QuickAddToDatasetManager.js b/gateway/sds_gateway/static/js/actions/QuickAddToDatasetManager.js
index c6362212c..0e75b3fae 100644
--- a/gateway/sds_gateway/static/js/actions/QuickAddToDatasetManager.js
+++ b/gateway/sds_gateway/static/js/actions/QuickAddToDatasetManager.js
@@ -2,9 +2,11 @@
  * Quick Add to Dataset Manager
  * Handles opening the quick-add modal, loading datasets, and adding a capture to a dataset.
  */
-class QuickAddToDatasetManager {
+class QuickAddToDatasetManager extends ModalManager {
 	constructor() {
-		this.modalEl = document.getElementById("quickAddToDatasetModal");
+		super();
+		this.modalId = "quickAddToDatasetModal";
+		this.modalEl = document.getElementById(this.modalId);
 		this.currentCaptureUuid = null;
 		this.currentCaptureName = null;
 		/** @type {string[]|null} When set, call quick-add API once per UUID (e.g. from file list "Add" button) */
@@ -26,10 +28,12 @@ class QuickAddToDatasetManager {
 			if (!btn) return;
 			e.preventDefault();
 			e.stopPropagation();
-			this.currentCaptureUuid = btn.getAttribute("data-capture-uuid");
-			this.currentCaptureName =
-				btn.getAttribute("data-capture-name") || "This capture";
-			this.openModal();
+			const uuid = btn.getAttribute("data-capture-uuid");
+			if (!uuid) return;
+			this.openForSingleCapture(
+				uuid,
+				btn.getAttribute("data-capture-name") || "This capture",
+			);
 		});
 
 		if (!this.modalEl) return;
@@ -77,24 +81,35 @@ class QuickAddToDatasetManager {
 		}
 	}
 
-	openModal() {
+	/** Open modal for one capture (row actions menu). */
+	openForSingleCapture(captureUuid, captureName) {
 		if (!this.modalEl) return;
-		const Modal = window.bootstrap?.Modal;
-		if (Modal) {
-			const modal = Modal.getOrCreateInstance(this.modalEl);
-			modal.show();
-		}
+		delete this.modalEl.dataset.captureUuids;
+		this.currentCaptureUuids = null;
+		this.currentCaptureUuid = captureUuid;
+		this.currentCaptureName = captureName || "This capture";
+		this.openModal(this.modalId);
+	}
+
+	/** Open modal for multiple selected captures (list bulk action). */
+	openForCaptureUuids(captureUuids) {
+		if (!this.modalEl || !captureUuids?.length) return;
+		this.currentCaptureUuid = null;
+		this.currentCaptureName = null;
+		this.currentCaptureUuids = captureUuids;
+		this.modalEl.dataset.captureUuids = JSON.stringify(captureUuids);
+		this.openModal(this.modalId);
 	}
 
 	resetMessage() {
 		if (this.messageEl) {
+			this.messageEl.innerHTML = "";
 			this.messageEl.classList.add("d-none");
 			this.messageEl.classList.remove(
 				"alert-success",
 				"alert-danger",
 				"alert-warning",
 			);
-			this.messageEl.textContent = "";
 		}
 		if (this.confirmBtn) {
 			this.confirmBtn.disabled = true;
@@ -104,16 +119,25 @@ class QuickAddToDatasetManager {
 		}
 	}
 
-	showMessage(text, type) {
+	/** Inline alert in the quick-add modal via {@link DOMUtils.showMessage}. */
+	showInlineMessage(text, type) {
 		if (!this.messageEl) return;
-		this.messageEl.textContent = text;
-		this.messageEl.classList.remove(
-			"d-none",
-			"alert-success",
-			"alert-danger",
-			"alert-warning",
-		);
-		this.messageEl.classList.add(`alert-${type}`);
+		this.messageEl.classList.remove("d-none");
+		window.DOMUtils?.show?.(this.messageEl);
+		const variant =
+			type === "danger" || type === "error"
+				? "danger"
+				: type === "success" || type === "warning" || type === "info"
+					? type
+					: "danger";
+		void this.showMessageInTarget(text, this.messageEl, {
+			variant,
+			presentation: "alert",
+			templateContext: {
+				icon:
+					variant === "warning" ? "exclamation-triangle" : "exclamation-circle",
+			},
+		});
 	}
 
 	async loadDatasets() {
@@ -131,7 +155,7 @@ class QuickAddToDatasetManager {
 				this.selectEl.appendChild(opt);
 			}
 			if (datasets.length === 0) {
-				this.showMessage(
+				this.showInlineMessage(
 					"You have no datasets you can add captures to.",
 					"warning",
 				);
@@ -139,7 +163,7 @@ class QuickAddToDatasetManager {
 		} catch (err) {
 			this.selectEl.innerHTML = '<option value="">Failed to load</option>';
 			const reason = err?.data?.error || err?.message || "Try again.";
-			this.showMessage(`Failed to load datasets. ${reason}`, "danger");
+			this.showInlineMessage(`Failed to load datasets. ${reason}`, "danger");
 		}
 	}
 
@@ -151,7 +175,7 @@ class QuickAddToDatasetManager {
 			this.currentCaptureUuids.length > 0;
 		const isSingle = this.currentCaptureUuid && this.quickAddUrl;
 		if (!isMulti && !isSingle) {
-			this.showMessage(
+			this.showInlineMessage(
 				"Select at least one capture, or use “Add to dataset” from a row’s actions menu.",
 				"warning",
 			);
@@ -166,84 +190,57 @@ class QuickAddToDatasetManager {
 		}
 	}
 
-	/**
-	 * Build a concise summary from quick-add counts (added, skipped, failed count).
-	 * API returns detailed JSON; we show one short line.
-	 * Failed = request threw (non-2xx HTTP or network) or response.success false or per-capture errors in 200 body.
-	 */
 	formatQuickAddSummary(added, skipped, failedCount, firstErrorMessage) {
-		const parts = [];
-		if (added > 0) parts.push(`${added} added`);
-		if (skipped > 0) parts.push(`${skipped} already in dataset`);
-		if (failedCount > 0) {
-			parts.push(`${failedCount} failed`);
-			if (firstErrorMessage != null) {
-				const text = String(firstErrorMessage);
-				if (text) parts.push(`: ${text}`);
-			}
-		}
-		return parts.length ? `${parts.join(", ")}.` : "Done.";
+		return (
+			window.QuickAddApi?.formatQuickAddSummary?.(
+				added,
+				skipped,
+				failedCount,
+				firstErrorMessage,
+			) ?? "Done."
+		);
+	}
+
+	_notifyGlobalToast(msg, alertType) {
+		this.showToast(msg, alertType);
 	}
 
-	/**
-	 * Call quick-add API once per selected capture UUID (loop). Backend handles
-	 * multi-channel grouping per UUID. We aggregate counts and show one concise message.
-	 */
 	/**
 	 * Close the modal and fire a toast notification after it finishes hiding.
 	 * This avoids showing the same message twice (once inside the closing modal
 	 * and once as a toast outside it).
 	 */
 	_closeWithToast(msg, alertType) {
-		const modal = window.bootstrap?.Modal?.getInstance(this.modalEl);
-		if (modal) {
-			const onHidden = () => {
-				this.modalEl.removeEventListener("hidden.bs.modal", onHidden);
-				window.fileListController?.exitSelectionMode?.();
-				if (window.showAlert) window.showAlert(msg, alertType);
-			};
-			this.modalEl.addEventListener("hidden.bs.modal", onHidden);
-			modal.hide();
+		const afterClose = () => {
+			this.modalEl.removeEventListener("hidden.bs.modal", afterClose);
+			window.captureListSelectionManager?.clearSelection?.();
+			this._notifyGlobalToast(msg, alertType);
+		};
+		if (this.modalEl) {
+			this.modalEl.addEventListener("hidden.bs.modal", afterClose);
+			this.closeModal(this.modalEl);
 		} else {
-			window.fileListController?.exitSelectionMode?.();
-			if (window.showAlert) window.showAlert(msg, alertType);
+			window.captureListSelectionManager?.clearSelection?.();
+			this._notifyGlobalToast(msg, alertType);
 		}
 	}
 
+	/**
+	 * Call quick-add API once per selected capture UUID. Backend handles
+	 * multi-channel grouping per UUID; we aggregate counts and show one message.
+	 */
 	async handleMultiAdd(datasetUuid) {
 		if (!this.quickAddUrl) {
-			this.showMessage("Quick-add URL not configured.", "danger");
+			this.showInlineMessage("Quick-add URL not configured.", "danger");
 			if (this.confirmBtn) this.confirmBtn.disabled = false;
 			return;
 		}
-		let totalAdded = 0;
-		let totalSkipped = 0;
-		const errorMessages = [];
-		for (const captureUuid of this.currentCaptureUuids) {
-			try {
-				const response = await window.APIClient.post(
-					this.quickAddUrl,
-					{
-						dataset_uuid: datasetUuid,
-						capture_uuid: captureUuid,
-					},
-					null,
-					true,
-				);
-				if (response.success) {
-					totalAdded += response.added?.length ?? 0;
-					totalSkipped += response.skipped?.length ?? 0;
-					if (response.errors?.length) {
-						errorMessages.push(...(response.errors || []));
-					}
-				} else {
-					errorMessages.push(response.error || "Request failed");
-				}
-			} catch (err) {
-				// APIClient throws on non-2xx (and on network errors), so failed = exception or 4xx/5xx
-				errorMessages.push(err?.data?.error || err?.message || String(err));
-			}
-		}
+		const { totalAdded, totalSkipped, errorMessages } =
+			await window.QuickAddApi.postQuickAddCaptures(
+				this.quickAddUrl,
+				datasetUuid,
+				this.currentCaptureUuids,
+			);
 		const errorCount = errorMessages.length;
 		const hasErrors = errorCount > 0;
 		const hasSuccess = totalAdded > 0 || totalSkipped > 0;
@@ -257,45 +254,47 @@ class QuickAddToDatasetManager {
 			this._closeWithToast(msg, hasErrors ? "warning" : "success");
 		} else {
 			// All requests failed — keep modal open so the user can try again
-			this.showMessage(msg, "warning");
+			this.showInlineMessage(msg, "warning");
 			if (this.confirmBtn) this.confirmBtn.disabled = false;
 		}
 	}
 
 	async handleSingleAdd(datasetUuid) {
 		try {
-			const response = await window.APIClient.post(
+			const result = await window.QuickAddApi.postQuickAddCapture(
 				this.quickAddUrl,
-				{
-					dataset_uuid: datasetUuid,
-					capture_uuid: this.currentCaptureUuid,
-				},
-				null,
-				true,
+				datasetUuid,
+				this.currentCaptureUuid,
 			);
-			if (response.success) {
-				const added = response.added?.length ?? 0;
-				const skipped = response.skipped?.length ?? 0;
-				const errorCount = response.errors?.length ?? 0;
-				const firstError = response.errors?.[0];
+			if (result.success) {
 				const msg = this.formatQuickAddSummary(
-					added,
-					skipped,
-					errorCount,
-					firstError,
+					result.added,
+					result.skipped,
+					result.errors.length,
+					result.errors[0],
+				);
+				this._closeWithToast(
+					msg,
+					result.errors.length > 0 ? "warning" : "success",
 				);
-				this._closeWithToast(msg, errorCount > 0 ? "warning" : "success");
 			} else {
-				this.showMessage(response.error || "Request failed.", "danger");
+				this.showInlineMessage(
+					result.errors[0] || "Request failed.",
+					"danger",
+				);
 				if (this.confirmBtn) this.confirmBtn.disabled = false;
 			}
 		} catch (err) {
 			const msg =
 				err?.data?.error || err?.message || "Failed to add capture to dataset.";
-			this.showMessage(msg, "danger");
+			this.showInlineMessage(msg, "danger");
 			if (this.confirmBtn) this.confirmBtn.disabled = false;
 		}
 	}
 }
 
 window.QuickAddToDatasetManager = QuickAddToDatasetManager;
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { QuickAddToDatasetManager };
+}
diff --git a/gateway/sds_gateway/static/js/actions/ShareActionManager.js b/gateway/sds_gateway/static/js/actions/ShareActionManager.js
index f8f872eab..2ab66de30 100644
--- a/gateway/sds_gateway/static/js/actions/ShareActionManager.js
+++ b/gateway/sds_gateway/static/js/actions/ShareActionManager.js
@@ -4,12 +4,13 @@
  * Share Action Manager
  * Handles all sharing-related actions and user management
  */
-window.ShareActionManager = class ShareActionManager {
+class ShareActionManager extends ModalManager {
 	/**
 	 * Initialize share action manager
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
 		this.itemUuid = config.itemUuid;
 		this.itemType = config.itemType;
 		this.permissions = config.permissions;
@@ -78,90 +79,40 @@ window.ShareActionManager = class ShareActionManager {
 	 * @param {Element} input - Search input element
 	 */
 	setupSearchInput(input) {
-		// Prevent duplicate event listener attachment
-		if (input.dataset.searchSetup === "true") {
-			return;
-		}
-		input.dataset.searchSetup = "true";
-
-		const dropdown = this.getDropdownForInput(input);
-		const form = input.closest("form");
-		const inputId = input.id;
-		if (!this.selectedUsersMap[inputId]) this.selectedUsersMap[inputId] = [];
-
-		// Debounced search on input
-		input.addEventListener("input", (e) => {
-			clearTimeout(this.searchTimeout);
-			const query = e.target.value.trim();
-
-			if (query.length < 2) {
-				this.hideDropdown(dropdown);
-				return;
-			}
-
-			this.searchTimeout = setTimeout(() => {
-				this.searchUsers(query, dropdown);
-			}, 300);
-		});
-
-		// Handle keyboard navigation
-		input.addEventListener("keydown", (e) => {
-			const visibleItems = dropdown.querySelectorAll(
-				".list-group-item:not(.no-results)",
-			);
-			const currentIndex = Array.from(visibleItems).findIndex((item) =>
-				item.classList.contains("selected"),
-			);
-
-			switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, 1);
-					break;
-				case "ArrowUp":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, -1);
-					break;
-				case "Enter": {
-					e.preventDefault();
-					const selectedItem = dropdown.querySelector(
-						".list-group-item.selected",
-					);
-					if (selectedItem) {
-						this.selectUser(selectedItem, input);
-					}
-					break;
-				}
-				case "Escape":
-					this.hideDropdown(dropdown);
-					input.blur();
-					break;
-			}
-		});
-
-		// Handle clicks outside to close dropdown
-		document.addEventListener("click", (e) => {
-			if (!input.contains(e.target) && !dropdown.contains(e.target)) {
-				this.hideDropdown(dropdown);
-			}
-		});
-
-		// Handle dropdown item clicks
-		dropdown.addEventListener("click", (e) => {
-			const item = e.target.closest(".list-group-item");
-			if (item && !item.classList.contains("no-results")) {
-				e.preventDefault();
-				e.stopPropagation();
-				this.selectUser(item, input);
-			}
+		window.UserInputController.bindUserSearchInput(input, {
+			selectedUsersMap: this.selectedUsersMap,
+			getSearchTimeout: () => this.searchTimeout,
+			setSearchTimeout: (id) => {
+				this.searchTimeout = id;
+			},
+			getDropdownForInput: (inp) => this.getDropdownForInput(inp),
+			hideDropdown: (d) => this.hideDropdown(d),
+			navigateDropdown: (items, idx, dir) =>
+				this.navigateDropdown(items, idx, dir),
+			searchUsers: (query, d) => this.searchUsers(query, d),
+			selectUser: (item, inp) => this.selectUser(item, inp),
 		});
+	}
 
-		// On form submit, set input value to comma-separated emails
-		form.addEventListener("submit", (e) => {
-			input.value = this.selectedUsersMap[inputId]
-				.map((u) => u.email)
-				.join(",");
-		});
+	/**
+	 * Push a default viewer user if missing, refresh chips, clear input, close dropdown.
+	 * @param {HTMLInputElement} input
+	 * @param {string} userEmail
+	 * @param {string} userName
+	 */
+	_commitViewerSelection(input, userEmail, userName) {
+		if (!this.selectedUsersMap[input.id].some((u) => u.email === userEmail)) {
+			this.selectedUsersMap[input.id].push({
+				name: userName,
+				email: userEmail,
+				type: "user",
+				permission_level: window.PermissionLevels.VIEWER,
+			});
+			this.renderChips(input);
+		}
+		input.value = "";
+		this.hideDropdown(input.closest(".user-search-dropdown"));
+		input.focus();
 	}
 
 	/**
@@ -245,14 +196,21 @@ window.ShareActionManager = class ShareActionManager {
 				);
 
 				// Close modal
-				this.closeModal();
+				this.closeModal(`shareModal-${this.itemUuid}`);
 
-				// Refresh dataset list
+				// Refresh dataset list (await so modal/list re-init completes before user continues)
 				if (
 					window.listRefreshManager &&
 					typeof window.listRefreshManager.loadTable === "function"
 				) {
-					window.listRefreshManager.loadTable();
+					try {
+						await window.listRefreshManager.loadTable();
+					} catch (refreshErr) {
+						console.error(
+							"ShareActionManager: list refresh failed after share",
+							refreshErr,
+						);
+					}
 				} else {
 					// Fallback: reload the page if listRefreshManager is not available
 					console.warn("listRefreshManager not available, reloading page");
@@ -320,7 +278,7 @@ window.ShareActionManager = class ShareActionManager {
 				return;
 			}
 			console.error("Error searching users:", error);
-			this.displayError(dropdown);
+			await this.displayError(dropdown);
 		} finally {
 			this.currentRequest = null;
 		}
@@ -354,10 +312,14 @@ window.ShareActionManager = class ShareActionManager {
 	 * Display error in dropdown
 	 * @param {Element} dropdown - Dropdown element
 	 */
-	displayError(dropdown) {
+	async displayError(dropdown) {
 		const listGroup = dropdown.querySelector(".list-group");
-		listGroup.innerHTML =
-			'<div class="list-group-item no-results">Error loading users</div>';
+		if (!listGroup) return;
+		await this.showMessageInTarget("Error loading users", listGroup, {
+			variant: "danger",
+			presentation: "alert",
+			templateContext: { dismissible: false },
+		});
 		this.showDropdown(dropdown);
 	}
 
@@ -368,34 +330,7 @@ window.ShareActionManager = class ShareActionManager {
 	 * @param {number} direction - Direction to navigate
 	 */
 	navigateDropdown(items, currentIndex, direction) {
-		// Remove current selection
-		for (const item of items) {
-			item.classList.remove("selected");
-		}
-
-		// Calculate new index
-		let newIndex;
-		if (currentIndex === -1) {
-			// No item is currently selected
-			if (direction > 0) {
-				// ArrowDown: start from first item
-				newIndex = 0;
-			} else {
-				// ArrowUp: start from last item
-				newIndex = items.length - 1;
-			}
-		} else {
-			// An item is currently selected
-			newIndex = currentIndex + direction;
-			if (newIndex < 0) newIndex = items.length - 1;
-			if (newIndex >= items.length) newIndex = 0;
-		}
-
-		// Add selection to new item
-		if (items[newIndex]) {
-			items[newIndex].classList.add("selected");
-			items[newIndex].scrollIntoView({ block: "nearest" });
-		}
+		window.UserSearchDropdown.navigateDropdown(items, currentIndex, direction);
 	}
 
 	/**
@@ -487,35 +422,11 @@ window.ShareActionManager = class ShareActionManager {
 			}
 
 			// If we get here, user is not in the group, so add them normally
-			if (!this.selectedUsersMap[input.id].some((u) => u.email === userEmail)) {
-				this.selectedUsersMap[input.id].push({
-					name: userName,
-					email: userEmail,
-					type: "user",
-					permission_level: window.PermissionLevels.VIEWER, // Default permission level
-				});
-				this.renderChips(input);
-			}
-
-			input.value = "";
-			this.hideDropdown(input.closest(".user-search-dropdown"));
-			input.focus();
+			this._commitViewerSelection(input, userEmail, userName);
 		} catch (error) {
 			console.error("Error checking if user is in group:", error);
 			// If there's an error, just add the user normally
-			if (!this.selectedUsersMap[input.id].some((u) => u.email === userEmail)) {
-				this.selectedUsersMap[input.id].push({
-					name: userName,
-					email: userEmail,
-					type: "user",
-					permission_level: window.PermissionLevels.VIEWER, // Default permission level
-				});
-				this.renderChips(input);
-			}
-
-			input.value = "";
-			this.hideDropdown(input.closest(".user-search-dropdown"));
-			input.focus();
+			this._commitViewerSelection(input, userEmail, userName);
 		}
 	}
 
@@ -560,7 +471,7 @@ window.ShareActionManager = class ShareActionManager {
 		try {
 			// Filter permission levels based on item type
 			// For captures, only allow viewer permission
-			let allowedPermissionLevels = window.PERMISSION_OPTIONS;
+			let allowedPermissionLevels = window.SHARE_PERMISSION_OPTIONS;
 			if (this.itemType === "capture") {
 				allowedPermissionLevels = [window.PermissionLevels.VIEWER];
 			}
@@ -590,10 +501,11 @@ window.ShareActionManager = class ShareActionManager {
 				this.attachChipEventHandlers(chipContainer, inputId, input);
 			}
 		} catch (error) {
-			console.error("Error rendering user chips:", error);
-			// Fallback: show error message
-			chipContainer.innerHTML =
-				'<div class="text-danger">Error loading users</div>';
+			this.logError?.(error, chipContainer);
+			await this.showMessageInTarget("Error loading users", chipContainer, {
+				variant: "danger",
+				presentation: "inline",
+			});
 		}
 
 		// Toggle notify/message and users-with-access sections
@@ -934,41 +846,9 @@ window.ShareActionManager = class ShareActionManager {
 	 * @returns {Element|null} Dropdown element
 	 */
 	getDropdownForInput(input) {
-		// First try the original pattern: user-search-dropdown-{uuid}
-		let dropdown = document.getElementById(
-			`user-search-dropdown-${input.id.replace("user-search-", "")}`,
-		);
-
-		if (dropdown) {
-			return dropdown;
-		}
-
-		// Try alternative patterns
-		const alternativeIds = [
-			`user-search-dropdown-${this.itemUuid}`,
-			"user-search-dropdown",
-			`${input.id.replace("user-search-", "user-search-dropdown-")}`,
-			`${input.id}-dropdown`,
-		];
-
-		for (const id of alternativeIds) {
-			dropdown = document.getElementById(id);
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		// If still not found, look for any dropdown in the same container
-		const container = input.closest(".user-search-input-container");
-		if (container) {
-			dropdown = container.querySelector(".user-search-dropdown");
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		console.error(`Could not find dropdown for input: ${input.id}`);
-		return null;
+		return window.UserSearchDropdown.getDropdownForInput(input, {
+			itemUuid: this.itemUuid,
+		});
 	}
 
 	/**
@@ -976,7 +856,7 @@ window.ShareActionManager = class ShareActionManager {
 	 * @param {Element} dropdown - Dropdown element
 	 */
 	showDropdown(dropdown) {
-		dropdown.classList.remove("d-none");
+		window.UserSearchDropdown.showDropdown(dropdown);
 	}
 
 	/**
@@ -984,33 +864,7 @@ window.ShareActionManager = class ShareActionManager {
 	 * @param {Element} dropdown - Dropdown element
 	 */
 	hideDropdown(dropdown) {
-		dropdown.classList.add("d-none");
-		// Clear any selections
-		for (const item of dropdown.querySelectorAll(".list-group-item")) {
-			item.classList.remove("selected");
-		}
-	}
-
-	/**
-	 * Close modal
-	 */
-	closeModal() {
-		const modal = document.getElementById(`shareModal-${this.itemUuid}`);
-		const bootstrapModal = bootstrap.Modal.getInstance(modal);
-		if (bootstrapModal) {
-			bootstrapModal.hide();
-		}
-
-		// Manually remove backdrop if it remains
-		const backdrop = document.querySelector(".modal-backdrop");
-		if (backdrop) {
-			backdrop.remove();
-		}
-
-		// Remove modal-open class from body
-		document.body.classList.remove("modal-open");
-		document.body.style.overflow = "";
-		document.body.style.paddingRight = "";
+		window.UserSearchDropdown.hideDropdown(dropdown);
 	}
 
 	/**
@@ -1153,23 +1007,6 @@ window.ShareActionManager = class ShareActionManager {
 		// Call toggleTextarea immediately to set initial state
 		toggleTextarea();
 	}
-
-	/**
-	 * Show toast notification - Wrapper for global showAlert
-	 * @param {string} message - Toast message
-	 * @param {string} type - Toast type (success, danger, warning, info)
-	 */
-	showToast(message, type = "success") {
-		// Map ShareActionManager types to showAlert types
-		const mappedType = type === "danger" ? "error" : type;
-
-		// Use DOMUtils.showAlert for toast notifications
-		if (window.DOMUtils) {
-			window.DOMUtils.showAlert(message, mappedType);
-		} else {
-			console.error("DOMUtils not available");
-		}
-	}
 };
 
 // Make class available globally
diff --git a/gateway/sds_gateway/static/js/actions/VersioningActionManager.js b/gateway/sds_gateway/static/js/actions/VersioningActionManager.js
index bd2cc07e3..234109269 100644
--- a/gateway/sds_gateway/static/js/actions/VersioningActionManager.js
+++ b/gateway/sds_gateway/static/js/actions/VersioningActionManager.js
@@ -2,12 +2,13 @@
  * Versioning Action Manager
  * Handles version creation and managing dataset versions
  */
-class VersioningActionManager {
+class VersioningActionManager extends ModalManager {
 	/**
 	 * Initialize versioning action manager
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
 		this.permissions = config.permissions;
 		this.datasetUuid = config.datasetUuid;
 		this.initializeEventListeners();
@@ -60,7 +61,7 @@ class VersioningActionManager {
 		versionCreationButton.dataset.processing = "true";
 
 		// show loading state
-		window.DOMUtils.showModalLoading(this.modalId);
+		void ModalManager.showModalLoading(this.modalId);
 
 		// disable button
 		versionCreationButton.disabled = true;
@@ -73,19 +74,30 @@ class VersioningActionManager {
 			.then((response) => {
 				if (response.success) {
 					const modalEl = document.getElementById(this.modalId);
-					const onHidden = () => {
+					const onHidden = async () => {
 						if (modalEl) {
 							modalEl.removeEventListener("hidden.bs.modal", onHidden);
 						}
-						window.DOMUtils.showAlert(
+						void window.DOMUtils?.showMessage?.(
 							`Dataset version updated to v${response.version} successfully`,
-							"success",
+							{
+								variant: "success",
+								placement: "toast",
+								presentation: "toast",
+							},
 						);
 						if (
 							window.listRefreshManager &&
 							typeof window.listRefreshManager.loadTable === "function"
 						) {
-							window.listRefreshManager.loadTable();
+							try {
+								await window.listRefreshManager.loadTable();
+							} catch (refreshErr) {
+								console.error(
+									"VersioningActionManager: list refresh failed after version create",
+									refreshErr,
+								);
+							}
 						} else {
 							console.warn("listRefreshManager not available, reloading page");
 							window.location.reload();
@@ -94,23 +106,31 @@ class VersioningActionManager {
 					if (modalEl) {
 						modalEl.addEventListener("hidden.bs.modal", onHidden);
 					}
-					window.DOMUtils.closeModal(this.modalId);
+					this.closeModal(this.modalId);
 					if (!modalEl) {
 						onHidden();
 					}
 				} else {
 					// show error message and error message from response
-					window.DOMUtils.showAlert(
+					void window.DOMUtils?.showMessage?.(
 						response.error || "Failed to create dataset version",
-						"error",
+						{
+							variant: "danger",
+							placement: "toast",
+							presentation: "toast",
+						},
 					);
 				}
 			})
 			.catch((error) => {
 				// show error message and error message from error
-				window.DOMUtils.showAlert(
+				void window.DOMUtils?.showMessage?.(
 					error.message || "Failed to create dataset version",
-					"error",
+					{
+						variant: "danger",
+						placement: "toast",
+						presentation: "toast",
+					},
 				);
 			})
 			.finally(() => {
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/DetailsActionManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/DetailsActionManager.test.js
index acbd47b4e..87087fac0 100644
--- a/gateway/sds_gateway/static/js/actions/__tests__/DetailsActionManager.test.js
+++ b/gateway/sds_gateway/static/js/actions/__tests__/DetailsActionManager.test.js
@@ -1,571 +1,35 @@
 /**
  * Jest tests for DetailsActionManager
- * Tests details functionality for captures and datasets
  */
 
-// Import PermissionLevels to set up window.PermissionLevels
-import "../../constants/PermissionLevels.js";
-import { PermissionsManager } from "../../core/PermissionsManager.js";
-// Import the DetailsActionManager class
 import { DetailsActionManager } from "../DetailsActionManager.js";
 
 describe("DetailsActionManager", () => {
-	let detailsManager;
-	let mockModal;
-	let mockButton;
-	let mockInput;
-
 	beforeEach(() => {
-		// Reset mocks
 		jest.clearAllMocks();
-
-		// Create real PermissionsManager instance
-		const permissions = new PermissionsManager({
-			userPermissionLevel: "owner",
-			isOwner: true,
-			datasetPermissions: {
-				canEditMetadata: true,
-				canAddAssets: true,
-				canRemoveOwnAssets: true,
-				canRemoveAnyAssets: true,
-				canShare: true,
-				canDownload: true,
-			},
-		});
-
-		// Mock DOM elements
-		mockModal = {
-			id: "capture-modal",
-			addEventListener: jest.fn(),
-			querySelector: jest.fn((selector) => {
-				if (selector === ".modal-title") return { textContent: "" };
-				if (selector === ".modal-body")
-					return {
-						innerHTML: "",
-						dataset: {},
-					};
-				return null;
-			}),
-			querySelectorAll: jest.fn(() => []),
-			getAttribute: jest.fn(),
-			setAttribute: jest.fn(),
-		};
-
-		mockButton = {
-			dataset: { detailsSetup: "false" },
-			addEventListener: jest.fn(),
-			getAttribute: jest.fn((attr) => {
-				if (attr === "data-uuid") return "test-uuid";
-				if (attr === "data-name") return "Test Capture";
-				return null;
-			}),
-			click: jest.fn(),
-			disabled: false,
-		};
-
-		mockInput = {
-			value: "Test Capture",
-			addEventListener: jest.fn(),
-			focus: jest.fn(),
-			select: jest.fn(),
-		};
-
-		// Mock document methods
-		document.getElementById = jest.fn((id) => {
-			if (
-				id === "capture-modal" ||
-				id === "test-modal" ||
-				id === "captureDetailsModal"
-			)
-				return mockModal;
-			if (id === "capture-name-input") return mockInput;
-			return null;
-		});
-
-		document.querySelector = jest.fn(() => mockButton);
-		document.querySelectorAll = jest.fn((selector) => {
-			if (selector === ".capture-details-btn") return [mockButton];
-			if (selector === ".dataset-details-btn") return [mockButton];
-			return [];
-		});
-		document.addEventListener = jest.fn();
-
-		// Mock window.bootstrap and global bootstrap
-		global.window = {
-			bootstrap: {
-				Modal: jest.fn(() => ({
-					show: jest.fn(),
-					hide: jest.fn(),
-				})),
-			},
-		};
-
-		// Also mock global bootstrap for the actual implementation
-		global.bootstrap = {
-			Modal: jest.fn(() => ({
-				show: jest.fn(),
-				hide: jest.fn(),
-			})),
-		};
-
-		// Set up global instances - DOMUtils is now used instead of HTMLInjectionManager
 		global.window.DOMUtils = {
-			show: jest.fn(),
-			hide: jest.fn(),
-			showAlert: jest.fn(),
-			renderError: jest.fn().mockResolvedValue(true),
-			renderLoading: jest.fn().mockResolvedValue(true),
 			renderContent: jest.fn().mockResolvedValue(true),
-			showModalLoading: jest.fn().mockResolvedValue(true),
-			clearModalLoading: jest.fn(),
-			showModalError: jest.fn().mockResolvedValue(true),
-			openModal: jest.fn(),
-			closeModal: jest.fn(),
-			formatFileSize: jest.fn((size) => (size != null ? `${size} B` : "0 B")),
 		};
-
-		// Mock window.APIClient (what the actual code uses)
-		global.window.APIClient = {
-			get: jest.fn().mockResolvedValue({
-				success: true,
-				data: {
-					name: "Test Capture",
-					type: "drf",
-					channel: "Channel 1",
-				},
+		global.window.bootstrap = {
+			Tooltip: jest.fn(function MockTooltip() {
+				this.dispose = jest.fn();
 			}),
-			post: jest.fn().mockResolvedValue({ html: "<div>Test HTML</div>" }),
 		};
-
-		// Mock browser APIs
-		global.fetch = jest.fn();
-		global.fetch.mockResolvedValue({
-			ok: true,
-			json: () =>
-				Promise.resolve({
-					success: true,
-					data: {
-						name: "Test Capture",
-						type: "drf",
-						channel: "Channel 1",
-					},
-				}),
-		});
+		global.window.bootstrap.Tooltip.getInstance = jest.fn(() => null);
+		global.navigator.clipboard = { writeText: jest.fn().mockResolvedValue(undefined) };
 	});
 
-	describe("Initialization", () => {
-		test("should initialize with permissions", () => {
-			const permissions = new PermissionsManager({
-				userPermissionLevel: "owner",
-				isOwner: true,
-				datasetPermissions: { canEditMetadata: true },
-			});
-
-			detailsManager = new DetailsActionManager({ permissions });
-
-			expect(detailsManager.permissions).toBeDefined();
-			expect(detailsManager.permissions.canEditMetadata()).toBe(true);
-		});
-
-		test("should setup event listeners on initialization", () => {
-			const permissions = new PermissionsManager({
-				userPermissionLevel: "owner",
-				isOwner: true,
-				datasetPermissions: { canEditMetadata: true },
-			});
-
-			detailsManager = new DetailsActionManager({ permissions });
-
-			expect(mockButton.addEventListener).toHaveBeenCalled();
-		});
-	});
-
-	describe("Capture Details Functionality", () => {
-		beforeEach(() => {
-			const permissions = new PermissionsManager({
-				capturePermissions: { canEditMetadata: true },
-			});
-			detailsManager = new DetailsActionManager({
-				permissions,
-				itemType: "capture",
-				itemUuid: "test-uuid",
-			});
-			document.getElementById = jest.fn((id) => {
-				if (
-					id === "capture-modal" ||
-					id === "test-modal" ||
-					id === "captureDetailsModal" ||
-					id === "captureDetailsModal-test-uuid"
-				)
-					return mockModal;
-				if (id === "capture-name-input") return mockInput;
-				return null;
-			});
-		});
-
-		test("should initialize capture details buttons", () => {
-			detailsManager.initializeCaptureDetailsButtons();
-
-			expect(document.querySelectorAll).toHaveBeenCalledWith(
-				".capture-details-btn",
-			);
-			expect(mockButton.addEventListener).toHaveBeenCalledWith(
-				"click",
-				expect.any(Function),
-			);
-		});
-
-		test("should handle capture details click", () => {
-			const captureUuid = "test-capture-uuid";
-
-			detailsManager.handleCaptureDetails(captureUuid);
-
-			expect(global.window.APIClient.get).toHaveBeenCalledWith(
-				`/users/capture-details/?capture_uuid=${captureUuid}`,
-			);
-		});
-
-		test("should show modal with capture data", async () => {
-			const captureData = {
-				name: "Test Capture",
-				type: "drf",
-				channel: "Channel 1",
-			};
-
-			// Mock APIClient response
-			global.window.APIClient.get.mockResolvedValueOnce({
-				success: true,
-				data: captureData,
-			});
-
-			await detailsManager.handleCaptureDetails("test-uuid");
-
-			expect(global.window.DOMUtils.openModal).toHaveBeenCalledWith(
-				detailsManager.modalId,
-			);
-			expect(mockModal.querySelector).toHaveBeenCalled();
-		});
-	});
-
-	describe("Modal Management", () => {
-		beforeEach(() => {
-			const permissions = new PermissionsManager({
-				capturePermissions: { canEditMetadata: true },
-			});
-			detailsManager = new DetailsActionManager({ permissions });
-		});
-
-		test("should show modal loading state using DOMUtils", async () => {
-			const mockModalBody = { dataset: {}, innerHTML: "" };
-			document.getElementById = jest.fn((id) =>
-				id === "test-modal"
-					? { querySelector: jest.fn(() => mockModalBody) }
-					: null,
-			);
-			await detailsManager.showModalLoading("test-modal");
-
-			expect(global.window.DOMUtils.renderLoading).toHaveBeenCalledWith(
-				mockModalBody,
-				"Loading details...",
-				expect.any(Object),
-			);
-		});
-	});
-
-	describe("Permission Handling", () => {
-		test("should respect edit permissions", () => {
-			// Create a real PermissionsManager instance with limited permissions
-			const permissions = new PermissionsManager({
-				userPermissionLevel: "viewer",
-				isOwner: false,
-				datasetPermissions: {
-					canEditMetadata: false,
-					canAddAssets: false,
-					canRemoveOwnAssets: false,
-					canRemoveAnyAssets: false,
-					canShare: false,
-					canDownload: false,
-				},
-			});
-			detailsManager = new DetailsActionManager({ permissions });
-
-			expect(detailsManager.permissions.canEditMetadata()).toBe(false);
-		});
-
-		test("should allow view permissions", () => {
-			const permissions = new PermissionsManager({
-				capturePermissions: { canView: true },
-			});
-			detailsManager = new DetailsActionManager({ permissions });
-
-			expect(detailsManager.permissions.canView()).toBe(true);
-		});
-	});
-
-	describe("Error Handling", () => {
-		beforeEach(() => {
-			const permissions = new PermissionsManager({
-				capturePermissions: { canEditMetadata: true },
-			});
-			detailsManager = new DetailsActionManager({ permissions });
-		});
-
-		test("should handle API errors gracefully", async () => {
-			// Mock APIClient to reject with an error
-			global.window.APIClient.get.mockRejectedValueOnce(new Error("API Error"));
-
-			// The method catches errors and doesn't re-throw them, so it should resolve
-			await expect(
-				detailsManager.handleCaptureDetails("test-uuid"),
-			).resolves.toBeUndefined();
-		});
-
-		test("should handle missing modal elements", () => {
-			document.getElementById.mockReturnValue(null);
-
-			expect(() => {
-				detailsManager.showModalLoading();
-			}).not.toThrow();
-		});
-
-		test("should handle missing button elements", () => {
-			document.querySelectorAll.mockReturnValue([]);
-
-			expect(() => {
-				detailsManager.initializeCaptureDetailsButtons();
-			}).not.toThrow();
-		});
-	});
-
-	describe("Dataset Modal Loading", () => {
-		let detailsManager;
-		let mockDatasetData;
-		let mockStatistics;
-		let mockTree;
-		let mockNameElement;
-		let mockDescriptionElement;
-		let mockStatusElement;
-		let mockAuthorElement;
-		let mockKeywordsElement;
-		let mockCopyButton;
-		let mockTotalFilesElement;
-		let mockCapturesElement;
-		let mockArtifactsElement;
-		let mockTotalSizeElement;
-		let mockTreeBody;
-		let mockModalBody;
-		let mockDatasetModal;
-		let appendedChildren;
-		let mockCreatedElement;
-		let mockUpdatedElement;
-
-		beforeEach(() => {
-			mockDatasetData = {
-				uuid: "test-uuid",
-				name: "Test Dataset",
-				description: "A shared dataset",
-				status: "Final",
-				version: 1,
-				created_at: "2024-01-01T00:00:00Z",
-				updated_at: "2024-01-15T00:00:00Z",
-				authors: ["John Doe", "Jane Smith"],
-				keywords: ["test", "shared"],
-			};
-
-			mockStatistics = {
-				total_files: 2,
-				captures: 0,
-				artifacts: 2,
-				total_size: 3072,
-			};
-
-			mockTree = {
-				type: "directory",
-				name: "root",
-				files: [
-					{
-						name: "test-file.txt",
-						size: 1024,
-						created_at: "2024-01-01T00:00:00Z",
-						updated_at: "2024-01-01T00:00:00Z",
-						media_type: "text/plain",
-						type: "file",
-					},
-					{
-						name: "test-file2.txt",
-						size: 2048,
-						created_at: "2024-01-01T00:00:00Z",
-						updated_at: "2024-01-01T00:00:00Z",
-						media_type: "text/plain",
-						type: "file",
-					},
-				],
-				children: {},
-			};
-
-			global.window.APIClient.get.mockResolvedValueOnce({
-				success: true,
-				dataset: mockDatasetData,
-				statistics: mockStatistics,
-				tree: mockTree,
-			});
-
-			// Create persistent mock elements (same object returned each time)
-			mockNameElement = { textContent: "" };
-			mockDescriptionElement = { textContent: "" };
-			mockStatusElement = { innerHTML: "" };
-			mockCreatedElement = { textContent: "" };
-			mockUpdatedElement = { textContent: "" };
-			mockAuthorElement = { textContent: "" };
-			appendedChildren = [];
-			mockKeywordsElement = {
-				innerHTML: "",
-				appendChild: jest.fn((child) => {
-					appendedChildren.push(child);
-					return child;
-				}),
-			};
-			mockCopyButton = {
-				dataset: {},
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-			};
-			mockTotalFilesElement = { textContent: "" };
-			mockCapturesElement = { textContent: "" };
-			mockArtifactsElement = { textContent: "" };
-			mockTotalSizeElement = { textContent: "" };
-			mockTreeBody = { innerHTML: "" };
-			mockModalBody = {
-				innerHTML: "",
-				dataset: {},
-			};
-
-			// Mock modal element with proper querySelector responses
-			const datasetModalId = "datasetDetailsModal-test-uuid";
-			mockDatasetModal = {
-				id: datasetModalId,
-				querySelector: jest.fn((selector) => {
-					const selectors = {
-						".dataset-details-name": mockNameElement,
-						".dataset-details-description": mockDescriptionElement,
-						".dataset-details-status": mockStatusElement,
-						".dataset-details-created": mockCreatedElement,
-						".dataset-details-updated": mockUpdatedElement,
-						".dataset-details-author": mockAuthorElement,
-						".dataset-details-keywords": mockKeywordsElement,
-						".copy-uuid-btn": mockCopyButton,
-						"#total-files-count": mockTotalFilesElement,
-						"#captures-count": mockCapturesElement,
-						"#artifacts-count": mockArtifactsElement,
-						"#total-size": mockTotalSizeElement,
-						"#dataset-file-tree-table tbody": mockTreeBody,
-						".modal-body": mockModalBody,
-					};
-					return selectors[selector] || null;
-				}),
-				querySelectorAll: jest.fn(() => []),
-			};
-
-			document.getElementById.mockImplementation((id) => {
-				if (
-					id === "datasetDetailsModal" ||
-					id === "datasetDetailsModal-test-uuid"
-				)
-					return mockDatasetModal;
-				return null;
-			});
-		});
-
-		test.each([
-			[
-				"owner",
-				{
-					userPermissionLevel: "owner",
-					isOwner: true,
-					datasetPermissions: { canView: true, canDownload: true },
-				},
-			],
-			[
-				"shared to non-owners",
-				{
-					userPermissionLevel: "viewer",
-					isOwner: false,
-					datasetPermissions: { canView: true, canDownload: true },
-				},
-			],
-		])(
-			"should show details for %s dataset",
-			async (_label, permissionsConfig) => {
-				const permissions = new PermissionsManager(permissionsConfig);
-				detailsManager = new DetailsActionManager({
-					permissions,
-					itemType: "dataset",
-					itemUuid: "test-uuid",
-				});
-
-				// spies to verify the methods are called
-				const populateSpy = jest.spyOn(
-					detailsManager,
-					"populateDatasetDetailsModal",
-				);
-				const updateFileTreeSpy = jest.spyOn(detailsManager, "updateFileTree");
-
-				await detailsManager.loadDatasetDetailsForModal("test-uuid");
-
-				expect(global.window.APIClient.get).toHaveBeenCalledWith(
-					"/users/dataset-details/?dataset_uuid=test-uuid",
-				);
-
-				// verify the populateDatasetDetailsModal method is called with the correct arguments
-				expect(populateSpy).toHaveBeenCalledWith(
-					mockDatasetData,
-					mockStatistics,
-					mockTree,
-				);
-
-				// verify the updateFileTree method is called with the correct arguments
-				expect(updateFileTreeSpy).toHaveBeenCalledWith(
-					mockDatasetModal,
-					mockTree,
-				);
-
-				// verify the render-html API call is made to render the file tree
-				expect(global.window.APIClient.post).toHaveBeenCalledWith(
-					"/users/render-html/",
-					expect.objectContaining({
-						template: "users/components/modal_file_tree.html",
-						context: expect.objectContaining({
-							rows: expect.arrayContaining([
-								expect.objectContaining({ name: "test-file.txt" }),
-								expect.objectContaining({ name: "test-file2.txt" }),
-							]),
-						}),
-					}),
-					null,
-					true,
-				);
-
-				// Verify modal was populated (name includes version: "Name (v1)")
-				expect(mockNameElement.textContent).toBe(
-					`${mockDatasetData.name} (v${mockDatasetData.version})`,
-				);
-				expect(mockDescriptionElement.textContent).toBe(
-					mockDatasetData.description,
-				);
-				expect(mockStatusElement.innerHTML).toContain(mockDatasetData.status);
-				expect(mockAuthorElement.textContent).toBe(
-					mockDatasetData.authors.join(", "),
-				);
-				expect(mockKeywordsElement.appendChild).toHaveBeenCalledTimes(2);
+	test("attachUuidCopyButton wires click handler", () => {
+		const btn = document.createElement("button");
+		btn.className = "copy-uuid-btn";
+		const modal = document.createElement("div");
+		modal.appendChild(btn);
+		document.body.appendChild(modal);
 
-				// Verify statistics
-				expect(mockTotalFilesElement.textContent).toBe(2);
-				expect(mockCapturesElement.textContent).toBe(0);
-				expect(mockArtifactsElement.textContent).toBe(2);
+		DetailsActionManager.attachUuidCopyButton(modal, "u1");
+		modal.querySelector(".copy-uuid-btn").click();
+		expect(global.navigator.clipboard.writeText).toHaveBeenCalledWith("u1");
 
-				// Verify UUID was set on copy button
-				expect(mockCopyButton.dataset.uuid).toBe(mockDatasetData.uuid);
-			},
-		);
+		document.body.removeChild(modal);
 	});
 });
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/DownloadActionManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/DownloadActionManager.test.js
index 7f3369262..360f1de62 100644
--- a/gateway/sds_gateway/static/js/actions/__tests__/DownloadActionManager.test.js
+++ b/gateway/sds_gateway/static/js/actions/__tests__/DownloadActionManager.test.js
@@ -4,8 +4,13 @@
  */
 
 // Import the DownloadActionManager class
+import { ModalManager } from "../../core/ModalManager.js";
 import { DownloadActionManager } from "../DownloadActionManager.js";
 
+const {
+	setupDownloadActionTestEnvironment,
+} = require("../../__tests__/helpers/actionTestMocks.js");
+
 describe("DownloadActionManager", () => {
 	let downloadManager;
 	let mockButton;
@@ -13,103 +18,8 @@ describe("DownloadActionManager", () => {
 	let mockPermissions;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Create mock permissions manager
-		mockPermissions = {
-			canDownload: jest.fn(() => true),
-		};
-
-		// Mock DOM elements
-		mockButton = {
-			dataset: { downloadSetup: "false" },
-			addEventListener: jest.fn(),
-			removeEventListener: jest.fn(),
-			getAttribute: jest.fn((attr) => {
-				if (attr === "data-dataset-uuid") return "test-dataset-uuid";
-				if (attr === "data-dataset-name") return "Test Dataset";
-				if (attr === "data-capture-uuid") return "test-capture-uuid";
-				if (attr === "data-capture-name") return "Test Capture";
-				return null;
-			}),
-			click: jest.fn(),
-			disabled: false,
-			textContent: "Download",
-			innerHTML: "Download",
-			parentNode: {
-				replaceChild: jest.fn(),
-			},
-			cloneNode: jest.fn(() => mockButton),
-		};
-
-		mockModal = {
-			addEventListener: jest.fn(),
-			querySelector: jest.fn(),
-			querySelectorAll: jest.fn(() => []),
-			getAttribute: jest.fn(),
-			setAttribute: jest.fn(),
-			removeEventListener: jest.fn(),
-		};
-
-		// Mock document methods
-		document.querySelector = jest.fn(() => mockButton);
-		document.querySelectorAll = jest.fn((selector) => {
-			if (selector === ".web-download-btn") return [mockButton];
-			return [];
-		});
-
-		document.getElementById = jest.fn((id) => {
-			if (id.startsWith("webDownloadModal-")) return mockModal;
-			if (id.startsWith("webDownloadModalLabel-")) return { innerHTML: "" };
-			if (id.startsWith("webDownloadDatasetName-")) return { textContent: "" };
-			if (id.startsWith("confirmWebDownloadBtn-")) return mockButton;
-			return null;
-		});
-
-		// Mock window objects (augment global window so code under test sees DOMUtils)
-		const domUtils = {
-			show: jest.fn(),
-			hide: jest.fn(),
-			showAlert: jest.fn(),
-			renderError: jest.fn().mockResolvedValue(true),
-			renderLoading: jest.fn().mockResolvedValue(true),
-			renderContent: jest.fn().mockResolvedValue(true),
-			renderTable: jest.fn().mockResolvedValue(true),
-			showModalLoading: jest.fn().mockResolvedValue(true),
-			clearModalLoading: jest.fn(),
-			showModalError: jest.fn().mockResolvedValue(true),
-			openModal: jest.fn(),
-			closeModal: jest.fn(),
-		};
-		global.window.DOMUtils = domUtils;
-		global.window.APIClient = {
-			post: jest.fn().mockResolvedValue({
-				success: true,
-				message: "Download request submitted successfully!",
-			}),
-		};
-		global.window.fetch = jest.fn(() =>
-			Promise.resolve({
-				ok: true,
-				json: () =>
-					Promise.resolve({ success: true, message: "Download requested" }),
-			}),
-		);
-		global.window.showAlert = jest.fn();
-
-		// Mock bootstrap globally
-		global.bootstrap = {
-			Modal: jest.fn().mockImplementation(() => ({
-				show: jest.fn(),
-				hide: jest.fn(),
-			})),
-		};
-
-		// Mock bootstrap.Modal.getInstance
-		global.bootstrap.Modal.getInstance = jest.fn(() => ({
-			hide: jest.fn(),
-		}));
+		({ mockPermissions, mockButton, mockModal } =
+			setupDownloadActionTestEnvironment());
 	});
 
 	describe("Initialization", () => {
@@ -148,7 +58,7 @@ describe("DownloadActionManager", () => {
 				closeModal: jest.fn(),
 				renderLoading: jest.fn().mockResolvedValue(true),
 				renderContent: jest.fn().mockResolvedValue(true),
-				showAlert: jest.fn(),
+				showMessage: jest.fn(),
 			};
 
 			mockButton = {
@@ -217,6 +127,15 @@ describe("DownloadActionManager", () => {
 				mockButton,
 			);
 
+			downloadManager.prepareWebDownloadModal(
+				{
+					id: "webDownloadModal-test-item-uuid",
+					getAttribute: (attr) =>
+						attr === "data-item-type" ? "dataset" : null,
+				},
+				mockButton,
+			);
+
 			// Simulate confirm button click using the same clone the code assigned onclick to
 			if (clonedConfirmBtn && typeof clonedConfirmBtn.onclick === "function") {
 				await clonedConfirmBtn.onclick();
@@ -278,10 +197,14 @@ describe("DownloadActionManager", () => {
 				"warning",
 			);
 
-			// showToast calls DOMUtils.showAlert, not window.showAlert directly
-			expect(window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			// showToast calls DOMUtils.showMessage
+			expect(window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"You don't have permission to download this dataset",
-				"warning",
+				expect.objectContaining({
+					variant: "warning",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 	});
@@ -294,17 +217,20 @@ describe("DownloadActionManager", () => {
 				closeModal: jest.fn(),
 				renderLoading: jest.fn().mockResolvedValue(true),
 				renderContent: jest.fn().mockResolvedValue(true),
-				showAlert: jest.fn(),
+				showMessage: jest.fn(),
 			};
 			downloadManager = new DownloadActionManager({
 				permissions: mockPermissions,
 			});
 		});
 
-		test("should configure temporal slider when opening web download for capture", async () => {
+		test("should configure temporal slider when web download modal is shown for capture", () => {
 			const spy = jest
 				.spyOn(downloadManager, "setTemporalSliderAttrs")
 				.mockImplementation(() => {});
+			jest
+				.spyOn(downloadManager, "wireWebDownloadConfirm")
+				.mockImplementation(() => {});
 
 			document.getElementById = jest.fn((id) => {
 				if (id.startsWith("confirmWebDownloadBtn-")) {
@@ -330,15 +256,17 @@ describe("DownloadActionManager", () => {
 				}),
 			};
 
-			await downloadManager.initializeWebDownloadModal(
-				"test-capture-uuid",
-				"capture",
-				captureBtn,
-			);
+			const modal = {
+				id: "webDownloadModal-test-capture-uuid",
+				getAttribute: (attr) =>
+					attr === "data-item-type" ? "capture" : null,
+			};
+
+			downloadManager.prepareWebDownloadModal(modal, captureBtn);
 
 			expect(spy).toHaveBeenCalledWith(
 				"webDownloadModal-test-capture-uuid",
-				captureBtn,
+				modal,
 				"test-capture-uuid",
 			);
 			spy.mockRestore();
@@ -360,10 +288,14 @@ describe("DownloadActionManager", () => {
 				"warning",
 			);
 
-			// showToast calls DOMUtils.showAlert, not window.showAlert directly
-			expect(window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			// showToast calls DOMUtils.showMessage
+			expect(window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"You don't have permission to download this capture",
-				"warning",
+				expect.objectContaining({
+					variant: "warning",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 	});
@@ -529,19 +461,29 @@ describe("DownloadActionManager", () => {
 			});
 		});
 
-		test("should have initializeWebDownloadModal method", () => {
-			expect(downloadManager.initializeWebDownloadModal).toBeDefined();
-			expect(typeof downloadManager.initializeWebDownloadModal).toBe(
-				"function",
-			);
-		});
+		test("openSDKDownloadModal calls openModal when modal element exists", () => {
+			const modalId = "sdkDownloadModal-ds-1";
+			const modal = { id: modalId, addEventListener: jest.fn() };
+			document.getElementById = jest.fn((id) => (id === modalId ? modal : null));
+			const openSpy = jest
+				.spyOn(ModalManager.prototype, "openModal")
+				.mockImplementation(() => {});
+
+			downloadManager.openSDKDownloadModal("ds-1");
 
-		test("should have openSDKDownloadModal method", () => {
-			expect(downloadManager.openSDKDownloadModal).toBeDefined();
-			expect(typeof downloadManager.openSDKDownloadModal).toBe("function");
+			expect(openSpy).toHaveBeenCalledWith(modalId);
+			expect(modal.addEventListener).toHaveBeenCalledWith(
+				"shown.bs.modal",
+				expect.any(Function),
+				{ once: true },
+			);
+			openSpy.mockRestore();
 		});
 
-		test("should use DOMUtils.openModal for opening modals", async () => {
+		test("should use ModalManager.openModal for opening modals", async () => {
+			const openSpy = jest
+				.spyOn(ModalManager.prototype, "openModal")
+				.mockImplementation(() => {});
 			const modalId = "webDownloadModal-test-uuid";
 			const confirmBtn = {
 				dataset: {},
@@ -581,22 +523,14 @@ describe("DownloadActionManager", () => {
 				btn,
 			);
 
-			expect(global.window.DOMUtils.openModal).toHaveBeenCalledWith(modalId);
-		});
-	});
-
-	describe("Download Request Processing", () => {
-		beforeEach(() => {
-			downloadManager = new DownloadActionManager({
-				permissions: mockPermissions,
-			});
-		});
-
-		test("should have initializeWebDownloadModal method", () => {
-			expect(downloadManager.initializeWebDownloadModal).toBeDefined();
-			expect(typeof downloadManager.initializeWebDownloadModal).toBe(
-				"function",
+			expect(openSpy).toHaveBeenCalledWith(
+				modalId,
+				expect.objectContaining({
+					trigger: btn,
+					downloadActionManager: downloadManager,
+				}),
 			);
+			openSpy.mockRestore();
 		});
 	});
 
@@ -646,24 +580,11 @@ describe("DownloadActionManager", () => {
 
 		test("should handle missing modal elements", () => {
 			expect(() => {
-				downloadManager.closeCustomModal("test-modal");
+				downloadManager.closeModal("test-modal");
 			}).not.toThrow();
 		});
 	});
 
-	describe("Event Handling", () => {
-		beforeEach(() => {
-			downloadManager = new DownloadActionManager({
-				permissions: mockPermissions,
-			});
-		});
-
-		test("should have initializeEventListeners method", () => {
-			expect(downloadManager.initializeEventListeners).toBeDefined();
-			expect(typeof downloadManager.initializeEventListeners).toBe("function");
-		});
-	});
-
 	describe("Cleanup", () => {
 		beforeEach(() => {
 			downloadManager = new DownloadActionManager({
@@ -671,17 +592,18 @@ describe("DownloadActionManager", () => {
 			});
 		});
 
-		test("should cleanup event listeners", () => {
-			// Test that the cleanup method exists and can be called
-			expect(() => {
-				downloadManager.cleanup();
-			}).not.toThrow();
-		});
+		test("cleanup removes click listeners from web download buttons", () => {
+			const button = {
+				removeEventListener: jest.fn(),
+			};
+			document.querySelectorAll = jest.fn(() => [button]);
 
-		test("should handle cleanup gracefully when no listeners", () => {
-			expect(() => {
-				downloadManager.cleanup();
-			}).not.toThrow();
+			downloadManager.cleanup();
+
+			expect(button.removeEventListener).toHaveBeenCalledWith(
+				"click",
+				downloadManager.initializeWebDownloadButtons,
+			);
 		});
 	});
 });
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/DownloadInstructionsManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/DownloadInstructionsManager.test.js
new file mode 100644
index 000000000..84426aa70
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/__tests__/DownloadInstructionsManager.test.js
@@ -0,0 +1,66 @@
+/**
+ * Jest tests for DownloadInstructionsManager
+ */
+
+import { DownloadInstructionsManager } from "../DownloadInstructionsManager.js";
+
+describe("DownloadInstructionsManager", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.useFakeTimers();
+		global.window.UserInputController = {
+			execCommandCopyFallback: jest.fn(),
+		};
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	test("copy button uses clipboard API and shows success state", async () => {
+		document.body.innerHTML = `
+			<button class="copy-btn" data-clipboard-target="#code-block"></button>
+			<pre id="code-block">curl example</pre>
+		`;
+		const btn = document.querySelector(".copy-btn");
+		Object.assign(navigator, {
+			clipboard: { writeText: jest.fn().mockResolvedValue(undefined) },
+		});
+		Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+
+		new DownloadInstructionsManager();
+		btn.click();
+
+		await Promise.resolve();
+
+		expect(navigator.clipboard.writeText).toHaveBeenCalledWith("curl example");
+		expect(btn.classList.contains("copied")).toBe(true);
+		expect(btn.innerHTML).toContain("Copied");
+
+		jest.advanceTimersByTime(2000);
+		expect(btn.classList.contains("copied")).toBe(false);
+	});
+
+	test("falls back when clipboard write fails", async () => {
+		document.body.innerHTML = `
+			<button class="copy-btn" data-clipboard-target="#code-block"></button>
+			<pre id="code-block">text</pre>
+		`;
+		const btn = document.querySelector(".copy-btn");
+		Object.assign(navigator, {
+			clipboard: {
+				writeText: jest.fn().mockRejectedValue(new Error("denied")),
+			},
+		});
+		Object.defineProperty(window, "isSecureContext", { value: true, configurable: true });
+
+		new DownloadInstructionsManager();
+		btn.click();
+		await Promise.resolve();
+		await Promise.resolve();
+
+		expect(window.UserInputController.execCommandCopyFallback).toHaveBeenCalledWith(
+			"text",
+		);
+	});
+});
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/PublishActionManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/PublishActionManager.test.js
index 366b8dc78..31fae0a39 100644
--- a/gateway/sds_gateway/static/js/actions/__tests__/PublishActionManager.test.js
+++ b/gateway/sds_gateway/static/js/actions/__tests__/PublishActionManager.test.js
@@ -51,7 +51,7 @@ describe("PublishActionManager", () => {
 		};
 
 		window.DOMUtils = {
-			showAlert: jest.fn(),
+			showMessage: jest.fn(),
 		};
 
 		window.location = { reload: jest.fn() };
@@ -80,9 +80,13 @@ describe("PublishActionManager", () => {
 				is_public: "true",
 			},
 		);
-		expect(window.DOMUtils.showAlert).toHaveBeenCalledWith(
+		expect(window.DOMUtils.showMessage).toHaveBeenCalledWith(
 			"Dataset published successfully",
-			"success",
+			expect.objectContaining({
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			}),
 		);
 	});
 
@@ -128,11 +132,47 @@ describe("PublishActionManager", () => {
 			mockPublicOption,
 		);
 
-		expect(window.DOMUtils.showAlert).toHaveBeenCalledWith(
+		expect(window.DOMUtils.showMessage).toHaveBeenCalledWith(
 			"Validation failed",
-			"error",
+			expect.objectContaining({
+				variant: "danger",
+				placement: "toast",
+				presentation: "toast",
+			}),
 		);
 		expect(publishBtn.disabled).toBe(false);
 		expect(publishBtn.innerHTML).toBe("Publish");
 	});
+
+	test("should reload page after successful publish", async () => {
+		jest.useFakeTimers();
+		const reloadMock = jest.fn();
+		Object.defineProperty(window, "location", {
+			value: { reload: reloadMock },
+			writable: true,
+			configurable: true,
+		});
+		mockAPIClient.post.mockResolvedValue({
+			success: true,
+			message: "Published",
+		});
+		publishManager.closeModal = jest.fn();
+
+		await publishManager.handlePublish(
+			"test-uuid",
+			mockStatusBadge,
+			mockPublishToggle,
+			mockPrivateOption,
+			mockPublicOption,
+		);
+
+		expect(publishManager.closeModal).toHaveBeenCalledWith(
+			"publish-dataset-modal-test-uuid",
+		);
+		expect(reloadMock).not.toHaveBeenCalled();
+
+		jest.advanceTimersByTime(1000);
+		expect(reloadMock).toHaveBeenCalledTimes(1);
+		jest.useRealTimers();
+	});
 });
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/QuickAddToDatasetManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/QuickAddToDatasetManager.test.js
new file mode 100644
index 000000000..3bcaa11f6
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/__tests__/QuickAddToDatasetManager.test.js
@@ -0,0 +1,96 @@
+/**
+ * Jest tests for QuickAddToDatasetManager
+ */
+
+import { QuickAddToDatasetManager } from "../QuickAddToDatasetManager.js";
+
+function installQuickAddModalDom() {
+	document.body.innerHTML = `
+		<div id="quickAddToDatasetModal"
+			data-quick-add-url="/users/quick-add/"
+			data-datasets-url="/users/datasets-for-quick-add/">
+			<select id="quick-add-dataset-select"></select>
+			<button id="quick-add-confirm-btn"></button>
+			<div id="quick-add-message" class="d-none"></div>
+			<span id="quick-add-capture-name"></span>
+		</div>
+	`;
+}
+
+describe("QuickAddToDatasetManager", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		installQuickAddModalDom();
+		window.DOMUtils = {
+			show: jest.fn(),
+			showMessage: jest.fn().mockResolvedValue(true),
+		};
+		window.APIClient = {
+			get: jest.fn(),
+			post: jest.fn(),
+		};
+		window.QuickAddApi = {
+			formatQuickAddSummary: jest.fn(() => "2 added."),
+			postQuickAddCapture: jest.fn(),
+			postQuickAddCaptures: jest.fn(),
+		};
+	});
+
+	test("loadDatasets populates select from API", async () => {
+		window.APIClient.get.mockResolvedValue({
+			datasets: [
+				{ uuid: "ds-1", name: "Dataset One" },
+				{ uuid: "ds-2", name: "Dataset Two" },
+			],
+		});
+
+		const mgr = new QuickAddToDatasetManager();
+		await mgr.loadDatasets();
+
+		const select = document.getElementById("quick-add-dataset-select");
+		expect(select.options.length).toBe(3);
+		expect(select.options[1].value).toBe("ds-1");
+		expect(mgr.confirmBtn.disabled).toBe(true);
+	});
+
+	test("handleSingleAdd closes with toast on success", async () => {
+		window.QuickAddApi.postQuickAddCapture.mockResolvedValue({
+			success: true,
+			added: 1,
+			skipped: 0,
+			errors: [],
+		});
+
+		const mgr = new QuickAddToDatasetManager();
+		mgr.currentCaptureUuid = "cap-1";
+		mgr.selectEl.value = "ds-1";
+		mgr.showToast = jest.fn();
+		mgr.closeModal = jest.fn();
+		mgr.modalEl = document.getElementById("quickAddToDatasetModal");
+
+		await mgr.handleSingleAdd("ds-1");
+
+		expect(window.QuickAddApi.postQuickAddCapture).toHaveBeenCalledWith(
+			"/users/quick-add/",
+			"ds-1",
+			"cap-1",
+		);
+		expect(mgr.closeModal).toHaveBeenCalled();
+	});
+
+	test("handleAdd shows warning when no capture selected", async () => {
+		const mgr = new QuickAddToDatasetManager();
+		const opt = document.createElement("option");
+		opt.value = "ds-1";
+		mgr.selectEl.appendChild(opt);
+		mgr.selectEl.value = "ds-1";
+		mgr.showInlineMessage = jest.fn();
+
+		await mgr.handleAdd();
+
+		expect(mgr.showInlineMessage).toHaveBeenCalledWith(
+			expect.stringContaining("Select at least one capture"),
+			"warning",
+		);
+	});
+});
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/ShareActionManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/ShareActionManager.test.js
index b3d8334ff..bbdab497c 100644
--- a/gateway/sds_gateway/static/js/actions/__tests__/ShareActionManager.test.js
+++ b/gateway/sds_gateway/static/js/actions/__tests__/ShareActionManager.test.js
@@ -6,53 +6,19 @@
 // Import the ShareActionManager class
 import { ShareActionManager } from "../ShareActionManager.js";
 
+const {
+	createDefaultShareActionConfig,
+	setupShareActionStandardTest,
+	createShareSearchTestContext,
+} = require("../../__tests__/helpers/actionTestMocks.js");
+
 describe("ShareActionManager", () => {
 	let shareManager;
 	let mockConfig;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Mock config
-		mockConfig = {
-			itemUuid: "test-uuid",
-			itemType: "dataset",
-			permissions: {
-				canShare: true,
-			},
-		};
-
-		// Minimal DOM mocks
-		document.getElementById = jest.fn(() => null);
-		document.querySelector = jest.fn(() => null);
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Minimal API mocks
-		global.APIClient = {
-			post: jest.fn().mockResolvedValue({ success: true }),
-			get: jest.fn().mockResolvedValue([]),
-		};
-
-		// Mock DOMUtils (replaces HTMLInjectionManager)
-		global.window.DOMUtils = {
-			show: jest.fn(),
-			hide: jest.fn(),
-			showAlert: jest.fn(),
-			renderError: jest.fn().mockResolvedValue(true),
-			renderLoading: jest.fn().mockResolvedValue(true),
-			renderContent: jest.fn().mockResolvedValue(true),
-			renderTable: jest.fn().mockResolvedValue(true),
-			showModalLoading: jest.fn().mockResolvedValue(true),
-			clearModalLoading: jest.fn(),
-			showModalError: jest.fn().mockResolvedValue(true),
-			openModal: jest.fn(),
-			closeModal: jest.fn(),
-		};
-
-		// Mock window.showAlert
-		global.window.showAlert = jest.fn();
-		global.window.APIClient = global.APIClient;
+		mockConfig = createDefaultShareActionConfig();
+		setupShareActionStandardTest();
 	});
 
 	describe("Initialization", () => {
@@ -74,31 +40,12 @@ describe("ShareActionManager", () => {
 	});
 
 	describe("Searching Users", () => {
-		let shareManager;
 		let mockAPIClient;
 		let mockDropdown;
 
 		beforeEach(() => {
-			mockAPIClient = {
-				get: jest.fn(),
-				post: jest.fn(),
-			};
-			window.APIClient = mockAPIClient;
-
-			mockDropdown = {
-				querySelector: jest.fn(() => ({
-					innerHTML: "",
-				})),
-			};
-
-			shareManager = new ShareActionManager({
-				itemUuid: "test-uuid",
-				itemType: "dataset",
-				permissions: {},
-			});
-			shareManager.displayResults = jest.fn();
-			shareManager.displayError = jest.fn();
-			shareManager.showDropdown = jest.fn();
+			({ mockAPIClient, mockDropdown, shareManager } =
+				createShareSearchTestContext(ShareActionManager));
 		});
 
 		test("should cancel previous request when new search starts", async () => {
@@ -301,8 +248,7 @@ describe("ShareActionManager", () => {
 			});
 
 			window.DOMUtils = {
-				showToast: jest.fn(),
-				showAlert: jest.fn(),
+				showMessage: jest.fn(),
 			};
 
 			window.location = { reload: jest.fn() };
@@ -344,9 +290,13 @@ describe("ShareActionManager", () => {
 					]),
 				}),
 			);
-			expect(window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"Dataset shared successfully",
-				"success",
+				expect.objectContaining({
+					variant: "success",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 
@@ -369,32 +319,106 @@ describe("ShareActionManager", () => {
 		});
 	});
 
-	describe("Utility methods", () => {
+	describe("List refresh after share", () => {
+		let shareManager;
+		let mockAPIClient;
+		let reloadMock;
+
 		beforeEach(() => {
-			shareManager = new ShareActionManager(mockConfig);
+			mockAPIClient = { post: jest.fn() };
+			window.APIClient = mockAPIClient;
+			window.PermissionLevels = { VIEWER: "viewer" };
+			document.getElementById = jest.fn((id) => {
+				if (id === "notify-users-checkbox-test-uuid") {
+					return { checked: false, value: "" };
+				}
+				return null;
+			});
+			window.DOMUtils = { showMessage: jest.fn() };
+			reloadMock = jest.fn();
+			Object.defineProperty(window, "location", {
+				value: { reload: reloadMock },
+				writable: true,
+				configurable: true,
+			});
+			window.listRefreshManager = {
+				loadTable: jest.fn().mockResolvedValue("<table></table>"),
+			};
+
+			shareManager = new ShareActionManager({
+				itemUuid: "test-uuid",
+				itemType: "dataset",
+				permissions: {},
+			});
+			shareManager.selectedUsersMap = {
+				"user-search-test-uuid": [
+					{ email: "user1@example.com", permission_level: "viewer" },
+				],
+			};
+			shareManager.pendingRemovals = new Set();
+			shareManager.pendingPermissionChanges = new Map();
+			shareManager.closeModal = jest.fn();
+			shareManager.showToast = jest.fn();
 		});
 
-		test("should highlight search matches", () => {
-			// The highlightMatch method doesn't exist in current implementation
-			// Text highlighting is now handled by Django templates or not used
-			expect(true).toBe(true);
+		test("should await listRefreshManager.loadTable after successful share", async () => {
+			mockAPIClient.post.mockResolvedValue({ success: true });
+
+			await shareManager.handleShareItem();
+
+			expect(shareManager.closeModal).toHaveBeenCalledWith(
+				"shareModal-test-uuid",
+			);
+			expect(window.listRefreshManager.loadTable).toHaveBeenCalled();
+			expect(reloadMock).not.toHaveBeenCalled();
+		});
+
+		test("should reload page when listRefreshManager is unavailable", async () => {
+			window.listRefreshManager = undefined;
+			console.warn = jest.fn();
+			mockAPIClient.post.mockResolvedValue({ success: true });
+
+			await shareManager.handleShareItem();
+
+			expect(console.warn).toHaveBeenCalledWith(
+				"listRefreshManager not available, reloading page",
+			);
+			expect(reloadMock).toHaveBeenCalled();
 		});
+	});
 
-		test("should get permission button text", () => {
-			// Mock permissions with getPermissionIcon method
+	describe("Utility methods", () => {
+		beforeEach(() => {
+			window.DOMUtils.showMessage = jest.fn();
+			shareManager = new ShareActionManager(mockConfig);
+		});
+
+		test("getPermissionButtonText includes icon class and capitalized label", () => {
 			shareManager.permissions = {
 				getPermissionIcon: jest.fn(() => "bi-eye"),
 			};
 
-			const text = shareManager.getPermissionButtonText("read");
+			const text = shareManager.getPermissionButtonText("viewer");
 
-			expect(typeof text).toBe("string");
+			expect(text).toContain('class="bi bi-eye me-1"');
+			expect(text).toContain("Viewer");
+			expect(shareManager.permissions.getPermissionIcon).toHaveBeenCalledWith(
+				"viewer",
+			);
 		});
 
-		test("should show toast messages", () => {
-			expect(() => {
-				shareManager.showToast("Test message", "success");
-			}).not.toThrow();
+		test("showToast routes success and danger through showMessage", () => {
+			shareManager.showToast("Saved", "success");
+			shareManager.showToast("Failed", "danger");
+
+			expect(shareManager.showMessage).toHaveBeenCalledWith(
+				"Saved",
+				expect.objectContaining({ variant: "success", presentation: "toast" }),
+			);
+			expect(shareManager.showMessage).toHaveBeenCalledWith(
+				"Failed",
+				expect.objectContaining({ variant: "danger", presentation: "toast" }),
+			);
 		});
 	});
 
@@ -416,13 +440,15 @@ describe("ShareActionManager", () => {
 			}).not.toThrow();
 		});
 
-		test("should handle API failures gracefully", async () => {
-			global.APIClient.post.mockRejectedValue(new Error("API Error"));
+		test("searchUsers surfaces non-abort errors via displayError", async () => {
+			const mockDropdown = { innerHTML: "" };
+			shareManager.displayError = jest.fn();
 			global.APIClient.get.mockRejectedValue(new Error("API Error"));
 
-			// Test that methods exist and can be called
-			expect(typeof shareManager.setupSearchInput).toBe("function");
-			expect(typeof shareManager.setupShareItem).toBe("function");
+			await shareManager.searchUsers("x", mockDropdown);
+
+			expect(shareManager.displayError).toHaveBeenCalledWith(mockDropdown);
+			expect(shareManager.currentRequest).toBeNull();
 		});
 
 		test("should handle invalid data gracefully", () => {
@@ -437,26 +463,49 @@ describe("ShareActionManager", () => {
 	});
 
 	describe("State management", () => {
+		const itemUuid = "test-uuid";
+
 		beforeEach(() => {
 			shareManager = new ShareActionManager(mockConfig);
 		});
 
-		test("should clear selections", () => {
-			expect(() => {
-				shareManager.clearSelections();
-			}).not.toThrow();
+		test("clearSelections resets maps and pending change sets", () => {
+			shareManager.selectedUsersMap = {
+				[`user-search-${itemUuid}`]: [{ email: "a@b.com" }],
+			};
+			shareManager.pendingRemovals.add("a@b.com");
+			shareManager.pendingPermissionChanges.set("a@b.com", "viewer");
+
+			shareManager.clearSelections();
+
+			expect(shareManager.selectedUsersMap).toEqual({});
+			expect(shareManager.pendingRemovals.size).toBe(0);
+			expect(shareManager.pendingPermissionChanges.size).toBe(0);
 		});
 
-		test("should toggle modal sections", () => {
-			expect(() => {
-				shareManager.toggleModalSections("test-input");
-			}).not.toThrow();
+		test("updateSaveButtonState disables save when no pending work", () => {
+			const saveBtn = { disabled: false };
+			document.getElementById = jest.fn((id) =>
+				id === `share-item-btn-${itemUuid}` ? saveBtn : null,
+			);
+
+			shareManager.updateSaveButtonState(itemUuid);
+
+			expect(saveBtn.disabled).toBe(true);
 		});
 
-		test("should update save button state", () => {
-			expect(() => {
-				shareManager.updateSaveButtonState("test-uuid");
-			}).not.toThrow();
+		test("updateSaveButtonState enables save when users are selected", () => {
+			const saveBtn = { disabled: true };
+			document.getElementById = jest.fn((id) =>
+				id === `share-item-btn-${itemUuid}` ? saveBtn : null,
+			);
+			shareManager.selectedUsersMap[`user-search-${itemUuid}`] = [
+				{ email: "user@example.com" },
+			];
+
+			shareManager.updateSaveButtonState(itemUuid);
+
+			expect(saveBtn.disabled).toBe(false);
 		});
 	});
 });
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/VersioningActionManager.test.js b/gateway/sds_gateway/static/js/actions/__tests__/VersioningActionManager.test.js
index 31303e6f0..47c85ae64 100644
--- a/gateway/sds_gateway/static/js/actions/__tests__/VersioningActionManager.test.js
+++ b/gateway/sds_gateway/static/js/actions/__tests__/VersioningActionManager.test.js
@@ -4,7 +4,13 @@
  */
 
 // Import the VersioningActionManager class
+import { ModalManager } from "../../core/ModalManager.js";
 import { VersioningActionManager } from "../VersioningActionManager.js";
+import { flushMicrotasks } from "../../tests-config/testHelpers.js";
+const {
+	setupVersioningActionTestEnvironment,
+	createVersionCreationClickEvent,
+} = require("../../__tests__/helpers/actionTestMocks.js");
 
 describe("VersioningActionManager", () => {
 	let versioningManager;
@@ -13,61 +19,8 @@ describe("VersioningActionManager", () => {
 	let mockPermissions;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Create mock permissions
-		mockPermissions = {
-			canEditMetadata: jest.fn(() => true),
-			canShare: jest.fn(() => true),
-		};
-
-		// Mock config
-		mockConfig = {
-			datasetUuid: "test-dataset-uuid",
-			permissions: mockPermissions,
-		};
-
-		// Mock button element
-		mockButton = {
-			id: "createVersionBtn-test-dataset-uuid",
-			dataset: { versionSetup: "false", processing: "false" },
-			addEventListener: jest.fn(),
-			disabled: false,
-			click: jest.fn(),
-		};
-
-		// Mock document methods
-		document.getElementById = jest.fn((id) => {
-			if (id === `createVersionBtn-${mockConfig.datasetUuid}`)
-				return mockButton;
-			return null;
-		});
-
-		// Mock DOMUtils
-		global.window.DOMUtils = {
-			showModalLoading: jest.fn().mockResolvedValue(true),
-			closeModal: jest.fn(),
-			showAlert: jest.fn(),
-		};
-
-		// Mock APIClient
-		global.window.APIClient = {
-			post: jest.fn().mockResolvedValue({
-				success: true,
-				version: 2,
-			}),
-		};
-
-		// Mock listRefreshManager
-		global.window.listRefreshManager = {
-			loadTable: jest.fn().mockResolvedValue(true),
-		};
-
-		// Mock window.location
-		global.window.location = {
-			reload: jest.fn(),
-		};
+		({ mockConfig, mockPermissions, mockButton } =
+			setupVersioningActionTestEnvironment());
 	});
 
 	describe("Initialization", () => {
@@ -111,13 +64,12 @@ describe("VersioningActionManager", () => {
 	describe("Version Creation", () => {
 		beforeEach(() => {
 			versioningManager = new VersioningActionManager(mockConfig);
+			jest.spyOn(ModalManager, "showModalLoading").mockResolvedValue(undefined);
+			jest.spyOn(versioningManager, "closeModal").mockImplementation(() => {});
 		});
 
 		test("should handle version creation click", () => {
-			const event = {
-				preventDefault: jest.fn(),
-				stopPropagation: jest.fn(),
-			};
+			const event = createVersionCreationClickEvent();
 
 			// Get the click handler from addEventListener
 			const clickHandler = mockButton.addEventListener.mock.calls.find(
@@ -136,7 +88,7 @@ describe("VersioningActionManager", () => {
 			mockButton.dataset.processing = "true";
 
 			versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
@@ -145,18 +97,18 @@ describe("VersioningActionManager", () => {
 
 		test("should show modal loading state", async () => {
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
-			expect(global.window.DOMUtils.showModalLoading).toHaveBeenCalledWith(
+			expect(ModalManager.showModalLoading).toHaveBeenCalledWith(
 				"versioningModal-test-dataset-uuid",
 			);
 		});
 
 		test("should disable button during processing", async () => {
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
@@ -166,7 +118,7 @@ describe("VersioningActionManager", () => {
 
 		test("should make API call to dataset-versioning endpoint", async () => {
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
@@ -186,19 +138,23 @@ describe("VersioningActionManager", () => {
 			});
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
-			expect(global.window.DOMUtils.closeModal).toHaveBeenCalledWith(
+			expect(versioningManager.closeModal).toHaveBeenCalledWith(
 				"versioningModal-test-dataset-uuid",
 			);
-			expect(global.window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"Dataset version updated to v3 successfully",
-				"success",
+				expect.objectContaining({
+					variant: "success",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 
@@ -209,12 +165,12 @@ describe("VersioningActionManager", () => {
 			});
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
 			expect(global.window.listRefreshManager.loadTable).toHaveBeenCalled();
 		});
@@ -234,12 +190,12 @@ describe("VersioningActionManager", () => {
 			console.warn = jest.fn();
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
 			expect(console.warn).toHaveBeenCalledWith(
 				"listRefreshManager not available, reloading page",
@@ -254,18 +210,22 @@ describe("VersioningActionManager", () => {
 			});
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
-			expect(global.window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"Version creation failed",
-				"error",
+				expect.objectContaining({
+					variant: "danger",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
-			expect(global.window.DOMUtils.closeModal).not.toHaveBeenCalled();
+			expect(versioningManager.closeModal).not.toHaveBeenCalled();
 		});
 
 		test("should handle API exception", async () => {
@@ -274,27 +234,31 @@ describe("VersioningActionManager", () => {
 			);
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
-			expect(global.window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				"Network error",
-				"error",
+				expect.objectContaining({
+					variant: "danger",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 
 		test("should re-enable button after processing", async () => {
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
 			expect(mockButton.disabled).toBe(false);
 			expect(mockButton.dataset.processing).toBe("false");
@@ -306,12 +270,12 @@ describe("VersioningActionManager", () => {
 			);
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
 			expect(mockButton.disabled).toBe(false);
 			expect(mockButton.dataset.processing).toBe("false");
@@ -337,16 +301,20 @@ describe("VersioningActionManager", () => {
 			);
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
-			expect(global.window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				expect.stringMatching(/Failed to create dataset version|Network error/),
-				"error",
+				expect.objectContaining({
+					variant: "danger",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 
@@ -358,16 +326,20 @@ describe("VersioningActionManager", () => {
 			document.getElementById = jest.fn(() => null);
 
 			await versioningManager.handleVersionCreation(
-				{ preventDefault: jest.fn(), stopPropagation: jest.fn() },
+				createVersionCreationClickEvent(),
 				mockButton,
 			);
 
 			// Wait for promises to resolve
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await flushMicrotasks();
 
-			expect(global.window.DOMUtils.showAlert).toHaveBeenCalledWith(
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
 				expect.stringContaining("successfully"),
-				"success",
+				expect.objectContaining({
+					variant: "success",
+					placement: "toast",
+					presentation: "toast",
+				}),
 			);
 		});
 	});
diff --git a/gateway/sds_gateway/static/js/actions/__tests__/quickAddApi.test.js b/gateway/sds_gateway/static/js/actions/__tests__/quickAddApi.test.js
new file mode 100644
index 000000000..e23510022
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/__tests__/quickAddApi.test.js
@@ -0,0 +1,29 @@
+const {
+	formatQuickAddSummary,
+	postQuickAddCapture,
+} = require("../quickAdd/quickAddApi.js");
+
+describe("quickAddApi", () => {
+	test("formatQuickAddSummary builds message parts", () => {
+		expect(formatQuickAddSummary(2, 1, 0, null)).toBe(
+			"2 added, 1 already in dataset.",
+		);
+		expect(formatQuickAddSummary(0, 0, 1, "Network error")).toBe(
+			"1 failed, : Network error.",
+		);
+	});
+
+	test("postQuickAddCapture maps APIClient response", async () => {
+		global.APIClient = {
+			post: jest.fn().mockResolvedValue({
+				success: true,
+				added: [{ id: 1 }],
+				skipped: [],
+				errors: [],
+			}),
+		};
+		const result = await postQuickAddCapture("/quick-add/", "ds-1", "cap-1");
+		expect(result.success).toBe(true);
+		expect(result.added).toBe(1);
+	});
+});
diff --git a/gateway/sds_gateway/static/js/actions/details/AssetDetailsModalLoader.js b/gateway/sds_gateway/static/js/actions/details/AssetDetailsModalLoader.js
new file mode 100644
index 000000000..bfa165283
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/details/AssetDetailsModalLoader.js
@@ -0,0 +1,168 @@
+/**
+ * Registry-driven asset details modal (fetch HTML + inject).
+ */
+class AssetDetailsModalLoader {
+	/**
+	 * @param {HTMLElement} startEl
+	 * @param {string[]} selectors
+	 * @returns {HTMLElement | null}
+	 */
+	static findDelegateTarget(startEl, selectors) {
+		if (!startEl || !selectors?.length) return null;
+		for (const sel of selectors) {
+			if (startEl.matches?.(sel)) return startEl;
+			const closest = startEl.closest?.(sel);
+			if (closest) return closest;
+		}
+		return null;
+	}
+
+	/**
+	 * @param {HTMLElement} startEl
+	 * @returns {{ cfg: object, target: HTMLElement } | null}
+	 */
+	static resolveDetailsModalFromTrigger(startEl) {
+		const registry = window.DetailsModalAssetRegistry;
+		if (!registry || !startEl) return null;
+		for (const key of Object.keys(registry)) {
+			const cfg = registry[key];
+			const selectors = cfg.delegateClickSelectors || [];
+			const target = AssetDetailsModalLoader.findDelegateTarget(
+				startEl,
+				selectors,
+			);
+			if (target) return { cfg, target };
+		}
+		return null;
+	}
+
+	/**
+	 * @param {HTMLElement} startEl
+	 */
+	static async openDetailsFromTrigger(startEl) {
+		const resolved = AssetDetailsModalLoader.resolveDetailsModalFromTrigger(
+			startEl,
+		);
+		if (!resolved) return;
+
+		const { cfg, target } = resolved;
+		const uuid = cfg.resolveUuidFromTrigger(target);
+		if (!uuid || uuid === "null" || uuid === "undefined") {
+			console.warn("No valid UUID for details modal:", target);
+			return;
+		}
+
+		const shell =
+			typeof cfg.resolveShell === "function" ? cfg.resolveShell() : null;
+		if (!shell?.modal || !shell.bodyEl) {
+			console.warn("Details modal shell not found:", cfg.assetType, uuid);
+			return;
+		}
+
+		const { modal, titleEl, bodyEl } = shell;
+
+		if (cfg.assetType === "capture") {
+			const visualizeBtn = document.getElementById("visualize-btn");
+			visualizeBtn?.classList.add("d-none");
+		}
+
+		const loadingTitle = cfg.loadingTitle || "Loading...";
+		if (titleEl) {
+			titleEl.textContent = loadingTitle;
+		}
+		bodyEl.innerHTML = `
+				<div class="d-flex justify-content-center py-4">
+					<div class="spinner-border text-primary" role="status">
+						<span class="visually-hidden">${loadingTitle}</span>
+					</div>
+				</div>`;
+
+		const bsModal = window.ModalManager?.getOrCreateBootstrapModal?.(modal);
+		if (bsModal) {
+			bsModal.show();
+		}
+
+		try {
+			const response = await fetch(cfg.buildDetailsUrl(uuid), {
+				credentials: "same-origin",
+				headers: { Accept: "application/json" },
+			});
+			if (!response.ok) {
+				throw new Error(`HTTP error ${response.status}`);
+			}
+			const data = await response.json();
+
+			if (titleEl) {
+				titleEl.textContent = data.title || loadingTitle;
+			}
+			bodyEl.innerHTML = data.html || "";
+
+			const meta = data.meta || {};
+
+			if (typeof cfg.afterInject === "function") {
+				cfg.afterInject({ modal, meta, uuid, cfg });
+			}
+		} catch (error) {
+			console.error("Error opening details modal:", error);
+			const errTitle = "Error";
+			const errBody =
+				cfg.assetType === "capture"
+					? "Error displaying capture details"
+					: "Error displaying dataset details";
+			if (titleEl) {
+				titleEl.textContent = errTitle;
+			}
+			bodyEl.innerHTML = `<p class="text-danger mb-0">${errBody}</p>`;
+		}
+	}
+
+	/**
+	 * @returns {() => void} cleanup
+	 */
+	static attachDocumentDetailsClickDelegation() {
+		const handler = (e) => {
+			if (
+				e.target.matches('[data-bs-toggle="dropdown"]') ||
+				e.target.closest('[data-bs-toggle="dropdown"]')
+			) {
+				return;
+			}
+			const resolved = AssetDetailsModalLoader.resolveDetailsModalFromTrigger(
+				e.target,
+			);
+			if (!resolved) return;
+			e.preventDefault();
+			const { target } = resolved;
+			void AssetDetailsModalLoader.openDetailsFromTrigger(target);
+		};
+		document.addEventListener("click", handler);
+		return () => {
+			document.removeEventListener("click", handler);
+			if (typeof document !== "undefined" && document.body) {
+				document.body.dataset.detailsAssetClickWired = "";
+			}
+		};
+	}
+
+	/**
+	 * Idempotent global details click delegation.
+	 * @returns {() => void} cleanup
+	 */
+	static ensureDetailsClickDelegation() {
+		if (
+			typeof document === "undefined" ||
+			document.body?.dataset?.detailsAssetClickWired === "1"
+		) {
+			return () => {};
+		}
+		document.body.dataset.detailsAssetClickWired = "1";
+		return AssetDetailsModalLoader.attachDocumentDetailsClickDelegation();
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.AssetDetailsModalLoader = AssetDetailsModalLoader;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { AssetDetailsModalLoader };
+}
diff --git a/gateway/sds_gateway/static/js/actions/details/CaptureDetailsModalBehavior.js b/gateway/sds_gateway/static/js/actions/details/CaptureDetailsModalBehavior.js
new file mode 100644
index 000000000..524c37782
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/details/CaptureDetailsModalBehavior.js
@@ -0,0 +1,250 @@
+/**
+ * Capture-specific asset details modal behavior (name edit, visualize button).
+ */
+class CaptureDetailsModalBehavior {
+	/**
+	 * @param {{ modal: HTMLElement, meta: object, uuid: string }} ctx
+	 */
+	static afterInject(ctx) {
+		const { modal, meta } = ctx;
+		const visualizeBtn = document.getElementById("visualize-btn");
+		visualizeBtn?.classList.add("d-none");
+
+		CaptureDetailsModalBehavior.setupVisualizeFromMeta(meta);
+		CaptureDetailsModalBehavior.ensureDelegatedCaptureNameEditing(modal);
+	}
+
+	/**
+	 * @param {{ visualize_enabled?: boolean, uuid?: string, capture_type?: string }} meta
+	 */
+	static setupVisualizeFromMeta(meta) {
+		const visualizeBtn = document.getElementById("visualize-btn");
+		if (!visualizeBtn || !meta) return;
+
+		if (meta.visualize_enabled) {
+			visualizeBtn.classList.remove("d-none");
+			visualizeBtn.dataset.captureUuid = meta.uuid || "";
+			visualizeBtn.dataset.captureType = meta.capture_type || "";
+			visualizeBtn.onclick = (e) => {
+				e?.preventDefault?.();
+				if (
+					!window.visualizationModalInstance &&
+					window.VisualizationModal
+				) {
+					window.visualizationModalInstance = new window.VisualizationModal();
+				}
+				if (window.visualizationModalInstance) {
+					window.visualizationModalInstance.openWithCaptureData(
+						meta.uuid,
+						meta.capture_type,
+					);
+				}
+			};
+		} else {
+			visualizeBtn.classList.add("d-none");
+		}
+	}
+
+	/**
+	 * @param {HTMLElement} modalEl
+	 */
+	static ensureDelegatedCaptureNameEditing(modalEl) {
+		const modal = modalEl;
+		if (!modal) return;
+
+		if (
+			modal.dataset.nameDelegationWired === "1" &&
+			!modal.querySelector("#capture-name-input")
+		) {
+			delete modal.dataset.nameDelegationWired;
+		}
+		if (modal.dataset.nameDelegationWired === "1") {
+			return;
+		}
+		modal.dataset.nameDelegationWired = "1";
+
+		const state = { original: "", isEditing: false };
+
+		const getControls = () => ({
+			nameInput: modal.querySelector("#capture-name-input"),
+			editBtn: modal.querySelector("#edit-name-btn"),
+			saveBtn: modal.querySelector("#save-name-btn"),
+			cancelBtn: modal.querySelector("#cancel-name-btn"),
+		});
+
+		const stopEditing = (controls) => {
+			if (!controls.nameInput) return;
+			controls.nameInput.disabled = true;
+			controls.editBtn?.classList.remove("d-none");
+			controls.saveBtn?.classList.add("d-none");
+			controls.cancelBtn?.classList.add("d-none");
+		};
+
+		const startEditing = (controls) => {
+			if (!controls.nameInput) return;
+			controls.nameInput.disabled = false;
+			controls.nameInput.focus();
+			controls.nameInput.select();
+			controls.editBtn?.classList.add("d-none");
+			controls.saveBtn?.classList.remove("d-none");
+			controls.cancelBtn?.classList.remove("d-none");
+		};
+
+		const titleEl =
+			document.getElementById("asset-details-modal-label") ||
+			modal.querySelector(".modal-title");
+
+		modal.addEventListener("click", async (e) => {
+			const controls = getControls();
+			if (!controls.nameInput || !controls.editBtn) return;
+
+			const t = e.target;
+
+			if (t.closest("#edit-name-btn")) {
+				e.preventDefault();
+				if (!state.isEditing) {
+					state.original = controls.nameInput.value;
+					startEditing(controls);
+					state.isEditing = true;
+				}
+				return;
+			}
+
+			if (t.closest("#cancel-name-btn")) {
+				e.preventDefault();
+				controls.nameInput.value = state.original;
+				stopEditing(controls);
+				state.isEditing = false;
+				return;
+			}
+
+			if (t.closest("#save-name-btn")) {
+				e.preventDefault();
+				const newName = controls.nameInput.value.trim();
+				const uuid = controls.nameInput.getAttribute("data-uuid");
+				if (!uuid) return;
+
+				controls.editBtn.disabled = true;
+				controls.saveBtn.disabled = true;
+				controls.cancelBtn.disabled = true;
+				controls.saveBtn.innerHTML =
+					'<span class="spinner-border spinner-border-sm"></span>';
+
+				try {
+					await CaptureDetailsModalBehavior.updateCaptureName(uuid, newName);
+					state.original = newName;
+					stopEditing(controls);
+					state.isEditing = false;
+					CaptureDetailsModalBehavior.updateTableNameDisplay(uuid, newName);
+					if (titleEl) {
+						titleEl.textContent = newName || "Unnamed Capture";
+					}
+					const modalBody = document.getElementById("asset-details-modal-body");
+					if (modalBody && window.DOMUtils?.showMessage) {
+						window.DOMUtils.clearAlerts?.(modalBody);
+						await window.DOMUtils.showMessage(
+							"Capture name updated successfully!",
+							{
+								variant: "success",
+								placement: "append",
+								target: modalBody,
+								presentation: "alert",
+								templateContext: {
+									alert_type: "success",
+									icon: "check-circle",
+									dismissible: true,
+								},
+								autoRemove: true,
+								autoRemoveMs: 3000,
+							},
+						);
+					}
+				} catch (err) {
+					console.error("Error updating capture name:", err);
+					const modalBody = document.getElementById("asset-details-modal-body");
+					if (modalBody && window.DOMUtils?.showMessage) {
+						window.DOMUtils.clearAlerts?.(modalBody);
+						await window.DOMUtils.showMessage(
+							"Failed to update capture name. Please try again.",
+							{
+								variant: "danger",
+								placement: "append",
+								target: modalBody,
+								presentation: "alert",
+								templateContext: {
+									alert_type: "danger",
+									icon: "exclamation-triangle",
+									dismissible: true,
+								},
+								autoRemove: true,
+								autoRemoveMs: 5000,
+							},
+						);
+					}
+					controls.nameInput.value = state.original;
+				} finally {
+					controls.editBtn.disabled = false;
+					controls.saveBtn.disabled = false;
+					controls.cancelBtn.disabled = false;
+					controls.saveBtn.innerHTML = '<i class="bi bi-check-lg"></i>';
+				}
+			}
+		});
+
+		modal.addEventListener("keypress", (e) => {
+			if (e.target.id !== "capture-name-input") return;
+			if (e.key === "Enter" && !e.target.disabled) {
+				modal.querySelector("#save-name-btn")?.click();
+			}
+		});
+
+		modal.addEventListener("keydown", (e) => {
+			if (e.target.id !== "capture-name-input") return;
+			if (e.key === "Escape" && !e.target.disabled) {
+				const controls = getControls();
+				controls.nameInput.value = state.original;
+				stopEditing(controls);
+				state.isEditing = false;
+			}
+		});
+	}
+
+	static async updateCaptureName(uuid, newName) {
+		const response = await fetch(`/api/v1/assets/captures/${uuid}/`, {
+			method: "PATCH",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken": new window.APIClient().getCSRFToken(),
+			},
+			body: JSON.stringify({ name: newName }),
+		});
+
+		if (!response.ok) {
+			const errorData = await response.json();
+			throw new Error(errorData.detail || "Failed to update capture name");
+		}
+
+		return response.json();
+	}
+
+	static updateTableNameDisplay(uuid, newName) {
+		for (const link of document.querySelectorAll(`[data-uuid="${uuid}"]`)) {
+			link.dataset.name = newName;
+			if (link.classList.contains("capture-link")) {
+				link.textContent = newName || "Unnamed Capture";
+				link.setAttribute(
+					"aria-label",
+					`View details for capture ${newName || uuid}`,
+				);
+				link.setAttribute("title", `View capture details: ${newName || uuid}`);
+			}
+		}
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.CaptureDetailsModalBehavior = CaptureDetailsModalBehavior;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { CaptureDetailsModalBehavior };
+}
diff --git a/gateway/sds_gateway/static/js/actions/details/__tests__/AssetDetailsModalLoader.test.js b/gateway/sds_gateway/static/js/actions/details/__tests__/AssetDetailsModalLoader.test.js
new file mode 100644
index 000000000..cfc45127c
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/details/__tests__/AssetDetailsModalLoader.test.js
@@ -0,0 +1,290 @@
+/**
+ * Jest tests for AssetDetailsModalLoader
+ */
+
+import { AssetDetailsModalLoader } from "../AssetDetailsModalLoader.js";
+const { createMockFetchResponse } = require("../../../tests-config/testHelpers.js");
+
+describe("AssetDetailsModalLoader", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		document.body.innerHTML = "";
+		delete window.DetailsModalAssetRegistry;
+	});
+
+	describe("findDelegateTarget", () => {
+		test("returns element when it matches selector", () => {
+			const el = document.createElement("button");
+			el.className = "details-trigger";
+			expect(
+				AssetDetailsModalLoader.findDelegateTarget(el, [".details-trigger"]),
+			).toBe(el);
+		});
+
+		test("returns closest ancestor match", () => {
+			const parent = document.createElement("a");
+			parent.className = "capture-link";
+			const child = document.createElement("span");
+			parent.appendChild(child);
+			expect(
+				AssetDetailsModalLoader.findDelegateTarget(child, [".capture-link"]),
+			).toBe(parent);
+		});
+
+		test("returns null when no match", () => {
+			const el = document.createElement("div");
+			expect(
+				AssetDetailsModalLoader.findDelegateTarget(el, [".missing"]),
+			).toBeNull();
+		});
+	});
+
+	describe("resolveDetailsModalFromTrigger", () => {
+		test("returns cfg and target from registry", () => {
+			const trigger = document.createElement("button");
+			trigger.dataset.uuid = "cap-1";
+			trigger.className = "open-capture-details";
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					delegateClickSelectors: [".open-capture-details"],
+					resolveUuidFromTrigger: (t) => t.dataset.uuid,
+				},
+			};
+
+			const resolved =
+				AssetDetailsModalLoader.resolveDetailsModalFromTrigger(trigger);
+
+			expect(resolved?.target).toBe(trigger);
+			expect(resolved?.cfg.delegateClickSelectors).toContain(
+				".open-capture-details",
+			);
+		});
+	});
+
+	describe("openDetailsFromTrigger", () => {
+		test("fetches details and calls afterInject on success", async () => {
+			const modal = document.createElement("div");
+			const bodyEl = document.createElement("div");
+			const titleEl = document.createElement("h5");
+			const trigger = document.createElement("button");
+			trigger.dataset.uuid = "cap-1";
+			trigger.className = "open-details";
+
+			const afterInject = jest.fn();
+			const show = jest.fn();
+			window.ModalManager = {
+				getOrCreateBootstrapModal: () => ({ show }),
+			};
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					assetType: "capture",
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: (t) => t.dataset.uuid,
+					resolveShell: () => ({ modal, bodyEl, titleEl }),
+					buildDetailsUrl: (uuid) => `/details/${uuid}/`,
+					afterInject,
+				},
+			};
+
+			global.fetch = jest
+				.fn()
+				.mockResolvedValue(
+					createMockFetchResponse({
+						jsonData: {
+							title: "Capture A",
+							html: "<p>body</p>",
+							meta: { uuid: "cap-1" },
+						},
+					}),
+				);
+
+			await AssetDetailsModalLoader.openDetailsFromTrigger(trigger);
+
+			expect(fetch).toHaveBeenCalledWith(
+				"/details/cap-1/",
+				expect.objectContaining({
+					credentials: "same-origin",
+					headers: { Accept: "application/json" },
+				}),
+			);
+			expect(titleEl.textContent).toBe("Capture A");
+			expect(bodyEl.innerHTML).toBe("<p>body</p>");
+			expect(show).toHaveBeenCalled();
+			expect(afterInject).toHaveBeenCalledWith(
+				expect.objectContaining({ uuid: "cap-1" }),
+			);
+		});
+
+		test("shows error body when fetch fails", async () => {
+			const modal = document.createElement("div");
+			const bodyEl = document.createElement("div");
+			const titleEl = document.createElement("h5");
+			const trigger = document.createElement("button");
+			trigger.dataset.uuid = "ds-1";
+			trigger.className = "open-details";
+
+			window.ModalManager = {
+				getOrCreateBootstrapModal: () => ({ show: jest.fn() }),
+			};
+			window.DetailsModalAssetRegistry = {
+				dataset: {
+					assetType: "dataset",
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: (t) => t.dataset.uuid,
+					resolveShell: () => ({ modal, bodyEl, titleEl }),
+					buildDetailsUrl: () => "/details/",
+				},
+			};
+
+			global.fetch = jest.fn().mockResolvedValue({ ok: false, status: 500 });
+
+			await AssetDetailsModalLoader.openDetailsFromTrigger(trigger);
+
+			expect(bodyEl.innerHTML).toContain("dataset details");
+			expect(titleEl.textContent).toBe("Error");
+		});
+	});
+
+	describe("ensureDetailsClickDelegation", () => {
+		test("wires click once and cleanup removes listener", () => {
+			document.body.innerHTML = "<div></div>";
+			const cleanup = AssetDetailsModalLoader.ensureDetailsClickDelegation();
+			expect(document.body.dataset.detailsAssetClickWired).toBe("1");
+
+			const cleanup2 = AssetDetailsModalLoader.ensureDetailsClickDelegation();
+			expect(cleanup2).toEqual(expect.any(Function));
+
+			cleanup();
+			expect(document.body.dataset.detailsAssetClickWired).toBe("");
+		});
+
+		test("ignores clicks inside dropdown toggles", () => {
+			document.body.innerHTML = `
+				<button class="open-details" data-uuid="x" data-bs-toggle="dropdown"></button>
+			`;
+			const openSpy = jest
+				.spyOn(AssetDetailsModalLoader, "openDetailsFromTrigger")
+				.mockResolvedValue(undefined);
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: () => "x",
+				},
+			};
+			const cleanup =
+				AssetDetailsModalLoader.attachDocumentDetailsClickDelegation();
+			document.querySelector(".open-details").click();
+			expect(openSpy).not.toHaveBeenCalled();
+			cleanup();
+			openSpy.mockRestore();
+		});
+
+		test("delegated capture click prevents default and opens details", async () => {
+			const link = document.createElement("a");
+			link.className = "capture-link open-details";
+			link.setAttribute("data-item-uuid", "cap-delegated");
+			link.textContent = "Link";
+			document.body.appendChild(link);
+			const openSpy = jest
+				.spyOn(AssetDetailsModalLoader, "openDetailsFromTrigger")
+				.mockResolvedValue(undefined);
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					delegateClickSelectors: [".capture-link", ".open-details"],
+					resolveUuidFromTrigger: (el) => el.getAttribute("data-item-uuid"),
+				},
+			};
+			const cleanup =
+				AssetDetailsModalLoader.attachDocumentDetailsClickDelegation();
+			const event = new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+			});
+			link.dispatchEvent(event);
+			expect(event.defaultPrevented).toBe(true);
+			expect(openSpy).toHaveBeenCalledWith(link);
+			cleanup();
+			openSpy.mockRestore();
+		});
+	});
+
+	describe("openDetailsFromTrigger edge cases", () => {
+		test("skips fetch when uuid is invalid", async () => {
+			global.fetch = jest.fn();
+			const trigger = document.createElement("button");
+			trigger.className = "open-details";
+			trigger.dataset.uuid = "null";
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					assetType: "capture",
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: (t) => t.dataset.uuid,
+					resolveShell: () => ({
+						modal: document.createElement("div"),
+						bodyEl: document.createElement("div"),
+						titleEl: document.createElement("h5"),
+					}),
+					buildDetailsUrl: () => "/x/",
+				},
+			};
+			await AssetDetailsModalLoader.openDetailsFromTrigger(trigger);
+			expect(fetch).not.toHaveBeenCalled();
+		});
+
+		test("skips fetch when shell is missing", async () => {
+			global.fetch = jest.fn();
+			const trigger = document.createElement("button");
+			trigger.className = "open-details";
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					assetType: "capture",
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: () => "valid-uuid",
+					resolveShell: () => null,
+					buildDetailsUrl: () => "/x/",
+				},
+			};
+			await AssetDetailsModalLoader.openDetailsFromTrigger(trigger);
+			expect(fetch).not.toHaveBeenCalled();
+		});
+
+		test("hides visualize button while loading capture", async () => {
+			document.body.innerHTML = '<button id="visualize-btn"></button>';
+			const visualizeBtn = document.getElementById("visualize-btn");
+			const modal = document.createElement("div");
+			const bodyEl = document.createElement("div");
+			const titleEl = document.createElement("h5");
+			const trigger = document.createElement("button");
+			trigger.className = "open-details";
+			window.ModalManager = {
+				getOrCreateBootstrapModal: () => ({ show: jest.fn() }),
+			};
+			window.DetailsModalAssetRegistry = {
+				capture: {
+					assetType: "capture",
+					delegateClickSelectors: [".open-details"],
+					resolveUuidFromTrigger: () => "cap-1",
+					resolveShell: () => ({ modal, bodyEl, titleEl }),
+					buildDetailsUrl: () => "/details/",
+				},
+			};
+			let resolveFetch;
+			global.fetch = jest.fn(
+				() =>
+					new Promise((resolve) => {
+						resolveFetch = () =>
+							resolve({
+								ok: true,
+								json: () =>
+									Promise.resolve({ title: "T", html: "", meta: {} }),
+							});
+					}),
+			);
+			const pending =
+				AssetDetailsModalLoader.openDetailsFromTrigger(trigger);
+			expect(visualizeBtn.classList.contains("d-none")).toBe(true);
+			resolveFetch();
+			await pending;
+		});
+	});
+});
diff --git a/gateway/sds_gateway/static/js/actions/details/__tests__/CaptureDetailsModalBehavior.test.js b/gateway/sds_gateway/static/js/actions/details/__tests__/CaptureDetailsModalBehavior.test.js
new file mode 100644
index 000000000..8c0a2c5a3
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/details/__tests__/CaptureDetailsModalBehavior.test.js
@@ -0,0 +1,104 @@
+/**
+ * Jest tests for CaptureDetailsModalBehavior (capture name edit propagation)
+ */
+
+import { CaptureDetailsModalBehavior } from "../CaptureDetailsModalBehavior.js";
+const { createMockDOMUtils } = require("../../../tests-config/testHelpers.js");
+
+describe("CaptureDetailsModalBehavior", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		document.body.innerHTML = "";
+		window.DOMUtils = createMockDOMUtils();
+		global.APIClient = jest.fn().mockImplementation(() => ({
+			getCSRFToken: () => "csrf-test",
+		}));
+		global.fetch = jest.fn();
+	});
+
+	test("updateCaptureName PATCHes capture with CSRF", async () => {
+		global.fetch.mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve({ name: "Renamed" }),
+		});
+
+		const result = await CaptureDetailsModalBehavior.updateCaptureName(
+			"cap-uuid-1",
+			"Renamed",
+		);
+
+		expect(global.fetch).toHaveBeenCalledWith(
+			"/api/v1/assets/captures/cap-uuid-1/",
+			expect.objectContaining({
+				method: "PATCH",
+				headers: expect.objectContaining({
+					"X-CSRFToken": "csrf-test",
+				}),
+				body: JSON.stringify({ name: "Renamed" }),
+			}),
+		);
+		expect(result.name).toBe("Renamed");
+	});
+
+	test("updateTableNameDisplay updates capture-link row text", () => {
+		document.body.innerHTML = `
+			<a class="capture-link" data-uuid="cap-uuid-1" data-name="Old">Old</a>
+		`;
+
+		CaptureDetailsModalBehavior.updateTableNameDisplay("cap-uuid-1", "New Name");
+
+		const link = document.querySelector(".capture-link[data-uuid='cap-uuid-1']");
+		expect(link.textContent).toBe("New Name");
+		expect(link.dataset.name).toBe("New Name");
+		expect(link.getAttribute("aria-label")).toContain("New Name");
+	});
+
+	test("setupVisualizeFromMeta wires visualize button when enabled", () => {
+		document.body.innerHTML =
+			'<button id="visualize-btn" class="d-none"></button>';
+		const openWithCaptureData = jest.fn();
+		window.visualizationModalInstance = { openWithCaptureData };
+
+		CaptureDetailsModalBehavior.setupVisualizeFromMeta({
+			visualize_enabled: true,
+			uuid: "cap-2",
+			capture_type: "drf",
+		});
+
+		const btn = document.getElementById("visualize-btn");
+		expect(btn.classList.contains("d-none")).toBe(false);
+		expect(btn.dataset.captureUuid).toBe("cap-2");
+		btn.onclick();
+		expect(openWithCaptureData).toHaveBeenCalledWith("cap-2", "drf");
+	});
+
+	test("afterInject enables visualize button when meta allows DRF", () => {
+		document.body.innerHTML = `
+			<div id="asset-details-modal"><input id="capture-name-input" /></div>
+			<button id="visualize-btn" class="d-none"></button>
+		`;
+		window.visualizationModalInstance = {
+			openWithCaptureData: jest.fn(),
+		};
+
+		CaptureDetailsModalBehavior.afterInject({
+			modal: document.getElementById("asset-details-modal"),
+			meta: { visualize_enabled: true, uuid: "c1", capture_type: "drf" },
+		});
+
+		const btn = document.getElementById("visualize-btn");
+		expect(btn.classList.contains("d-none")).toBe(false);
+		expect(btn.dataset.captureUuid).toBe("c1");
+	});
+
+	test("updateCaptureName throws when response not ok", async () => {
+		global.fetch.mockResolvedValue({
+			ok: false,
+			json: () => Promise.resolve({ detail: "Forbidden" }),
+		});
+
+		await expect(
+			CaptureDetailsModalBehavior.updateCaptureName("cap-uuid-1", "X"),
+		).rejects.toThrow("Forbidden");
+	});
+});
diff --git a/gateway/sds_gateway/static/js/actions/download/captureDownloadSlider.js b/gateway/sds_gateway/static/js/actions/download/captureDownloadSlider.js
new file mode 100644
index 000000000..7bb316fb8
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/download/captureDownloadSlider.js
@@ -0,0 +1,334 @@
+/** Capture download temporal slider (extracted from DownloadActionManager). */
+function msToHms(ms) {
+	const n = Number(ms);
+	if (!Number.isFinite(n) || n < 0) return "0:00:00.000";
+	const totalSec = Math.floor(n / 1000);
+	const h = Math.floor(totalSec / 3600);
+	const m = Math.floor((totalSec % 3600) / 60);
+	const s = totalSec % 60;
+	const decimalMs = n % 1000;
+	const hms = [h, m, s].map((v) => String(v).padStart(2, "0")).join(":");
+	return `${hms}.${String(decimalMs).padStart(3, "0")}`;
+}
+
+function formatUtcRange(startEpochSec, startMs, endMs) {
+	if (!Number.isFinite(startEpochSec)) return "—";
+	const startDate = new Date(startEpochSec * 1000 + startMs);
+	const endDate = new Date(startEpochSec * 1000 + endMs);
+	const pad2 = (x) => String(x).padStart(2, "0");
+	const fmt = (d) =>
+		`${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())} ${pad2(d.getUTCMonth() + 1)}/${pad2(d.getUTCDate())}/${d.getUTCFullYear()}`;
+	return `${fmt(startDate)} - ${fmt(endDate)} (UTC)`;
+}
+
+/** Format ms from capture start as UTC string for display (Y-m-d H:i:s). */
+function msToUtcString(captureStartEpochSec, ms) {
+	if (!Number.isFinite(captureStartEpochSec) || !Number.isFinite(ms)) return "";
+	const d = new Date(captureStartEpochSec * 1000 + ms);
+	const pad2 = (x) => String(x).padStart(2, "0");
+	return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())} ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())}`;
+}
+
+/** Parse UTC date string (Y-m-d H:i:s or Y-m-d H:i) to epoch ms. */
+function parseUtcStringToEpochMs(str) {
+	if (!str || !str.trim()) return Number.NaN;
+	const s = str.trim();
+	const d = new Date(s.endsWith("Z") ? s : `${s.replace(" ", "T")}Z`);
+	return Number.isFinite(d.getTime()) ? d.getTime() : Number.NaN;
+}
+
+function initializeCaptureDownloadSlider(modalId, durationMs, fileCadenceMs, opts) {
+	const webDownloadModal = document.getElementById(modalId);
+	if (!webDownloadModal) return;
+
+	const resolvedOpts = opts ?? {};
+	const q = (id) => webDownloadModal.querySelector(`#${id}`);
+	const sliderEl = q("temporalFilterSlider");
+	const rangeLabel = q("temporalFilterRangeLabel");
+	const totalFilesLabel = q("totalFilesLabel");
+	const metadataFilesLabel = q("metadataFilesLabel");
+	const totalSizeLabel = q("totalSizeLabel");
+	const dateTimeLabel = q("dateTimeLabel");
+	const startTimeInput = q("startTime");
+	const endTimeInput = q("endTime");
+	const startTimeEntry = q("startTimeEntry");
+	const endTimeEntry = q("endTimeEntry");
+	const startDateTimeEntry = q("startDateTimeEntry");
+	const endDateTimeEntry = q("endDateTimeEntry");
+	const rangeHintEl = q("temporalRangeHint");
+	const sizeWarningEl = q("temporalFilterSizeWarning");
+	if (!sliderEl || typeof noUiSlider === "undefined") return;
+	const resolvedDurationMs = (() => {
+		const n = Number(durationMs);
+		return !Number.isFinite(n) || n < 0 ? 0 : n;
+	})();
+	const resolvedFileCadenceMs = (() => {
+		const n = Number(fileCadenceMs);
+		return !Number.isFinite(n) || n < 1 ? 1000 : n;
+	})();
+	const perDataFileSize = Number(resolvedOpts.perDataFileSize) || 0;
+	const totalSize = Number(resolvedOpts.totalSize) || 0;
+	const dataFilesCount = Number(resolvedOpts.dataFilesCount) || 0;
+	const totalFilesCount = Number(resolvedOpts.totalFilesCount) || 0;
+	let dataFilesTotalSize = Number(resolvedOpts.dataFilesTotalSize);
+	if (!Number.isFinite(dataFilesTotalSize) || dataFilesTotalSize < 0) {
+		dataFilesTotalSize = perDataFileSize * dataFilesCount;
+	}
+	let metadataFilesTotalSize = totalSize - dataFilesTotalSize;
+	if (metadataFilesTotalSize < 0) metadataFilesTotalSize = 0;
+	const metadataFilesCount = Math.max(0, totalFilesCount - dataFilesCount);
+	const captureUuid =
+		resolvedOpts.captureUuid != null ? String(resolvedOpts.captureUuid) : "";
+	const captureStartEpochSec = Number(resolvedOpts.captureStartEpochSec);
+	if (totalSize > 0 && dataFilesTotalSize > totalSize) {
+		console.warn(
+			"[DownloadActionManager] data files total size exceeds total size (backend/query inconsistency).",
+			{
+				captureUuid: captureUuid || "(unknown)",
+				totalSize,
+				dataFilesTotalSize,
+				perDataFileSize,
+				dataFilesCount,
+			},
+		);
+		if (sizeWarningEl) {
+			sizeWarningEl.classList.remove("d-none");
+		}
+		dataFilesTotalSize = totalSize;
+		metadataFilesTotalSize = 0;
+	} else if (sizeWarningEl) {
+		sizeWarningEl.classList.add("d-none");
+	}
+	if (webDownloadModal) {
+		webDownloadModal.dataset.durationMs = String(
+			Math.round(resolvedDurationMs),
+		);
+		webDownloadModal.dataset.fileCadenceMs = String(resolvedFileCadenceMs);
+		webDownloadModal.dataset.captureStartEpochSec = Number.isFinite(
+			captureStartEpochSec,
+		)
+			? String(captureStartEpochSec)
+			: "";
+	}
+	if (rangeHintEl)
+		rangeHintEl.textContent = `0 – ${Math.round(resolvedDurationMs)} ms`;
+	if (sliderEl.noUiSlider) {
+		sliderEl.noUiSlider.destroy();
+	}
+	if (rangeLabel) rangeLabel.textContent = "—";
+	if (totalFilesLabel) totalFilesLabel.textContent = "0 files";
+	if (totalSizeLabel)
+		totalSizeLabel.textContent = window.DOMUtils.formatFileSize(totalSize);
+	if (dateTimeLabel) dateTimeLabel.textContent = "—";
+	if (startTimeInput) startTimeInput.value = "";
+	if (endTimeInput) endTimeInput.value = "";
+	if (startTimeEntry) startTimeEntry.value = "";
+	if (endTimeEntry) endTimeEntry.value = "";
+	const hasEpoch = Number.isFinite(captureStartEpochSec);
+	if (startDateTimeEntry) {
+		startDateTimeEntry.value = "";
+		startDateTimeEntry.disabled = !hasEpoch;
+	}
+	if (endDateTimeEntry) {
+		endDateTimeEntry.value = "";
+		endDateTimeEntry.disabled = !hasEpoch;
+	}
+	if (resolvedDurationMs <= 0) return;
+	let fpStart = null;
+	let fpEnd = null;
+	const epochStart = captureStartEpochSec * 1000;
+	const epochEnd = epochStart + resolvedDurationMs;
+	if (
+		hasEpoch &&
+		typeof flatpickr !== "undefined" &&
+		startDateTimeEntry &&
+		endDateTimeEntry
+	) {
+		const fpOpts = {
+			enableTime: true,
+			enableSeconds: true,
+			utc: true,
+			dateFormat: "Y-m-d H:i:S",
+			time_24hr: true,
+			minDate: epochStart,
+			maxDate: epochEnd,
+			allowInput: true,
+			static: true,
+			appendTo: webDownloadModal || undefined,
+		};
+		flatpickr(
+			startDateTimeEntry,
+			Object.assign({}, fpOpts, {
+				onChange: () => {
+					syncFromDateTimeEntries();
+				},
+			}),
+		);
+		flatpickr(
+			endDateTimeEntry,
+			Object.assign({}, fpOpts, {
+				onChange: () => {
+					syncFromDateTimeEntries();
+				},
+			}),
+		);
+		fpStart = startDateTimeEntry._flatpickr;
+		fpEnd = endDateTimeEntry._flatpickr;
+		startDateTimeEntry.disabled = false;
+		endDateTimeEntry.disabled = false;
+	}
+	noUiSlider.create(sliderEl, {
+		start: [0, resolvedDurationMs],
+		connect: true,
+		step: resolvedFileCadenceMs,
+		range: { min: 0, max: resolvedDurationMs },
+	});
+	sliderEl.noUiSlider.on("update", (values) => {
+		const startMs = Number(values[0]);
+		const endMs = Number(values[1]);
+		// the + 1 is to include the first file in the selection
+		// as file cadence is the time between files, not the time of the file
+		const filesInSelection =
+			Math.round((endMs - startMs) / resolvedFileCadenceMs) + 1;
+		if (rangeLabel) {
+			rangeLabel.textContent = `${msToHms(startMs)} - ${msToHms(endMs)}`;
+		}
+		if (totalFilesLabel) {
+			totalFilesLabel.textContent =
+				dataFilesCount > 0
+					? `${filesInSelection} of ${dataFilesCount} files`
+					: `${filesInSelection} files`;
+		}
+		if (totalSizeLabel) {
+			totalSizeLabel.textContent = window.DOMUtils.formatFileSize(
+				perDataFileSize * filesInSelection + metadataFilesTotalSize,
+			);
+		}
+		if (dateTimeLabel && Number.isFinite(captureStartEpochSec)) {
+			dateTimeLabel.textContent = formatUtcRange(
+				captureStartEpochSec,
+				startMs,
+				endMs,
+			);
+		}
+		if (startTimeInput) startTimeInput.value = String(Math.round(startMs));
+		if (endTimeInput) endTimeInput.value = String(Math.round(endMs));
+		if (startTimeEntry) startTimeEntry.value = String(Math.round(startMs));
+		if (endTimeEntry) endTimeEntry.value = String(Math.round(endMs));
+		if (hasEpoch) {
+			if (fpStart && typeof fpStart.setDate === "function")
+				fpStart.setDate(epochStart + startMs);
+			else if (startDateTimeEntry)
+				startDateTimeEntry.value = msToUtcString(
+					captureStartEpochSec,
+					startMs,
+				);
+			if (fpEnd && typeof fpEnd.setDate === "function")
+				fpEnd.setDate(epochStart + endMs);
+			else if (endDateTimeEntry)
+				endDateTimeEntry.value = msToUtcString(captureStartEpochSec, endMs);
+		}
+	});
+	if (rangeLabel) {
+		rangeLabel.textContent = `0:00:00.000 - ${msToHms(resolvedDurationMs)}`;
+	}
+	if (totalFilesLabel) {
+		totalFilesLabel.textContent =
+			dataFilesCount > 0 ? `${dataFilesCount} files` : "0 files";
+	}
+	if (metadataFilesLabel) {
+		metadataFilesLabel.textContent =
+			metadataFilesCount > 0 ? `${metadataFilesCount} files` : "0 files";
+	}
+	if (dateTimeLabel && Number.isFinite(captureStartEpochSec)) {
+		dateTimeLabel.textContent = formatUtcRange(
+			captureStartEpochSec,
+			0,
+			resolvedDurationMs,
+		);
+	}
+	const startVal = "0";
+	const endVal = String(resolvedDurationMs);
+	if (startTimeInput) startTimeInput.value = startVal;
+	if (endTimeInput) endTimeInput.value = endVal;
+	if (startTimeEntry) startTimeEntry.value = startVal;
+	if (endTimeEntry) endTimeEntry.value = endVal;
+	if (hasEpoch && startDateTimeEntry && endDateTimeEntry) {
+		if (fpStart && typeof fpStart.setDate === "function")
+			fpStart.setDate(epochStart);
+		else startDateTimeEntry.value = msToUtcString(captureStartEpochSec, 0);
+		if (fpEnd && typeof fpEnd.setDate === "function") fpEnd.setDate(epochEnd);
+		else
+			endDateTimeEntry.value = msToUtcString(
+				captureStartEpochSec,
+				resolvedDurationMs,
+			);
+		if (!fpStart) {
+			startDateTimeEntry.disabled = false;
+			endDateTimeEntry.disabled = false;
+		}
+	}
+
+	function syncSliderFromEntries() {
+		if (!sliderEl.noUiSlider || !startTimeEntry || !endTimeEntry) return;
+		const s = startTimeEntry.value.trim();
+		const e = endTimeEntry.value.trim();
+		let startMs = s === "" ? 0 : Number.parseInt(s, 10);
+		let endMs = e === "" ? resolvedDurationMs : Number.parseInt(e, 10);
+		if (!Number.isFinite(startMs)) startMs = 0;
+		if (!Number.isFinite(endMs)) endMs = resolvedDurationMs;
+		startMs = Math.max(0, Math.min(startMs, resolvedDurationMs));
+		endMs = Math.max(0, Math.min(endMs, resolvedDurationMs));
+		if (startMs >= endMs)
+			endMs = Math.min(startMs + resolvedFileCadenceMs, resolvedDurationMs);
+		sliderEl.noUiSlider.set([startMs, endMs]);
+	}
+	function syncFromDateTimeEntries() {
+		if (
+			!hasEpoch ||
+			!sliderEl.noUiSlider ||
+			!startDateTimeEntry ||
+			!endDateTimeEntry
+		)
+			return;
+		let startMs;
+		let endMs;
+		if (startDateTimeEntry._flatpickr && endDateTimeEntry._flatpickr) {
+			const dStart = startDateTimeEntry._flatpickr.selectedDates[0];
+			const dEnd = endDateTimeEntry._flatpickr.selectedDates[0];
+			startMs = dStart ? dStart.getTime() - epochStart : 0;
+			endMs = dEnd ? dEnd.getTime() - epochStart : resolvedDurationMs;
+		} else {
+			startMs =
+				parseUtcStringToEpochMs(startDateTimeEntry.value) - epochStart;
+			endMs = parseUtcStringToEpochMs(endDateTimeEntry.value) - epochStart;
+		}
+		if (Number.isNaN(startMs) || Number.isNaN(endMs)) return;
+		startMs = Math.max(0, Math.min(startMs, resolvedDurationMs));
+		endMs = Math.max(0, Math.min(endMs, resolvedDurationMs));
+		if (startMs >= endMs)
+			endMs = Math.min(startMs + resolvedFileCadenceMs, resolvedDurationMs);
+		const cur = sliderEl.noUiSlider.get();
+		if (
+			Math.round(Number(cur[0])) === Math.round(startMs) &&
+			Math.round(Number(cur[1])) === Math.round(endMs)
+		)
+			return;
+		sliderEl.noUiSlider.set([startMs, endMs]);
+	}
+	if (startTimeEntry)
+		startTimeEntry.addEventListener("change", syncSliderFromEntries);
+	if (endTimeEntry)
+		endTimeEntry.addEventListener("change", syncSliderFromEntries);
+	if (startDateTimeEntry && !startDateTimeEntry._flatpickr)
+		startDateTimeEntry.addEventListener("change", syncFromDateTimeEntries);
+	if (endDateTimeEntry && !endDateTimeEntry._flatpickr)
+		endDateTimeEntry.addEventListener("change", syncFromDateTimeEntries);
+}
+
+if (typeof window !== "undefined") {
+	window.initializeCaptureDownloadSlider = initializeCaptureDownloadSlider;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { initializeCaptureDownloadSlider, msToHms, formatUtcRange, msToUtcString, parseUtcStringToEpochMs };
+}
diff --git a/gateway/sds_gateway/static/js/actions/quickAdd/quickAddApi.js b/gateway/sds_gateway/static/js/actions/quickAdd/quickAddApi.js
new file mode 100644
index 000000000..d2ec019d8
--- /dev/null
+++ b/gateway/sds_gateway/static/js/actions/quickAdd/quickAddApi.js
@@ -0,0 +1,100 @@
+/**
+ * Quick-add capture(s) to dataset API helpers (shared by QuickAddToDatasetManager).
+ */
+
+/**
+ * @param {string} quickAddUrl
+ * @param {string} datasetUuid
+ * @param {string} captureUuid
+ * @returns {Promise<{ added: number, skipped: number, errors: string[], success: boolean }>}
+ */
+async function postQuickAddCapture(quickAddUrl, datasetUuid, captureUuid) {
+	const response = await window.APIClient.post(
+		quickAddUrl,
+		{
+			dataset_uuid: datasetUuid,
+			capture_uuid: captureUuid,
+		},
+		null,
+		true,
+	);
+	if (!response.success) {
+		return {
+			added: 0,
+			skipped: 0,
+			errors: [response.error || "Request failed"],
+			success: false,
+		};
+	}
+	return {
+		added: response.added?.length ?? 0,
+		skipped: response.skipped?.length ?? 0,
+		errors: [...(response.errors || [])],
+		success: true,
+	};
+}
+
+/**
+ * @param {string} quickAddUrl
+ * @param {string} datasetUuid
+ * @param {string[]} captureUuids
+ */
+async function postQuickAddCaptures(quickAddUrl, datasetUuid, captureUuids) {
+	let totalAdded = 0;
+	let totalSkipped = 0;
+	const errorMessages = [];
+	for (const captureUuid of captureUuids) {
+		try {
+			const result = await postQuickAddCapture(
+				quickAddUrl,
+				datasetUuid,
+				captureUuid,
+			);
+			if (result.success) {
+				totalAdded += result.added;
+				totalSkipped += result.skipped;
+				if (result.errors.length) {
+					errorMessages.push(...result.errors);
+				}
+			} else {
+				errorMessages.push(...result.errors);
+			}
+		} catch (err) {
+			errorMessages.push(err?.data?.error || err?.message || String(err));
+		}
+	}
+	return { totalAdded, totalSkipped, errorMessages };
+}
+
+/**
+ * Build a concise summary from quick-add counts.
+ */
+function formatQuickAddSummary(added, skipped, failedCount, firstErrorMessage) {
+	const parts = [];
+	if (added > 0) parts.push(`${added} added`);
+	if (skipped > 0) parts.push(`${skipped} already in dataset`);
+	if (failedCount > 0) {
+		parts.push(`${failedCount} failed`);
+		if (firstErrorMessage != null) {
+			const text = String(firstErrorMessage);
+			if (text) parts.push(`: ${text}`);
+		}
+	}
+	return parts.length ? `${parts.join(", ")}.` : "Done.";
+}
+
+if (typeof window !== "undefined") {
+	window.QuickAddApi = {
+		postQuickAddCapture,
+		postQuickAddCaptures,
+		formatQuickAddSummary,
+	};
+}
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = {
+		postQuickAddCapture,
+		postQuickAddCaptures,
+		formatQuickAddSummary,
+	};
+}
diff --git a/gateway/sds_gateway/static/js/components.js b/gateway/sds_gateway/static/js/components.js
deleted file mode 100644
index edc931686..000000000
--- a/gateway/sds_gateway/static/js/components.js
+++ /dev/null
@@ -1,1855 +0,0 @@
-/* Reusable Components for SDS Gateway
-
-* NOTE: This file is here because the functions have NOT
-* been refactored to be placed in the new JS structure.
-
-* TODO: Refactor the rest of the methods to be placed in the new JS structure.
-* And deprecate this file.
-*/
-
-/**
- * Utility functions for security and common operations
- */
-const ComponentUtils = {
-	/**
-	 * Escapes HTML to prevent XSS attacks
-	 * @param {string} text - Text to escape
-	 * @returns {string} Escaped HTML
-	 */
-	escapeHtml(text) {
-		if (!text) return "";
-		const div = document.createElement("div");
-		div.textContent = text;
-		return div.innerHTML;
-	},
-
-	/**
-	 * Formats date for display with date and time on separate lines
-	 * @param {string} dateString - ISO date string or formatted date string
-	 * @returns {string} Formatted date with HTML structure
-	 */
-	formatDate(dateString) {
-		if (!dateString) return "<div>-</div>";
-
-		let date;
-
-		// Try to parse the date string
-		if (typeof dateString === "string") {
-			// Handle different date formats
-			if (dateString.includes("T")) {
-				// ISO format: 2023-12-25T14:30:45.123Z
-				date = new Date(dateString);
-			} else if (dateString.includes("/") && dateString.includes(":")) {
-				// Already formatted: 12/25/2023 2:30:45 PM
-				date = new Date(dateString);
-			} else {
-				// Try to parse as-is
-				date = new Date(dateString);
-			}
-		} else {
-			date = new Date(dateString);
-		}
-
-		if (!date || Number.isNaN(date.getTime())) {
-			return "<div>-</div>";
-		}
-
-		const month = String(date.getMonth() + 1).padStart(2, "0");
-		const day = String(date.getDate()).padStart(2, "0");
-		const year = date.getFullYear();
-		const hours = date.getHours();
-		const minutes = String(date.getMinutes()).padStart(2, "0");
-		const seconds = String(date.getSeconds()).padStart(2, "0");
-		const ampm = hours >= 12 ? "PM" : "AM";
-		const displayHours = hours % 12 || 12;
-
-		return `<div>${month}/${day}/${year}</div><small class="text-muted">${displayHours}:${minutes}:${seconds} ${ampm}</small>`;
-	},
-
-	/**
-	 * Format date for modal display in the same style as dataset table
-	 * @param {string} dateString - ISO date string
-	 * @returns {string} Formatted date HTML
-	 */
-	formatDateForModal(dateString) {
-		if (!dateString || dateString === "None") {
-			return "N/A";
-		}
-
-		try {
-			const date = new Date(dateString);
-			if (Number.isNaN(date.getTime())) {
-				return "N/A";
-			}
-
-			// Format date as YYYY-MM-DD
-			const year = date.getFullYear();
-			const month = String(date.getMonth() + 1).padStart(2, "0");
-			const day = String(date.getDate()).padStart(2, "0");
-			const dateFormatted = `${year}-${month}-${day}`;
-
-			// Format time as HH:MM:SS T
-			const hours = String(date.getHours()).padStart(2, "0");
-			const minutes = String(date.getMinutes()).padStart(2, "0");
-			const seconds = String(date.getSeconds()).padStart(2, "0");
-			const timezone = date
-				.toLocaleTimeString("en-US", { timeZoneName: "short" })
-				.split(" ")[1];
-			const timeFormatted = `${hours}:${minutes}:${seconds} ${timezone}`;
-
-			return `<span class="bg-transparent pe-2">${dateFormatted}</span><span class="text-muted bg-transparent">${timeFormatted}</span>`;
-		} catch (error) {
-			console.error("Error formatting capture date:", error);
-			return "N/A";
-		}
-	},
-
-	/**
-	 * Formats date for display (simple version)
-	 * @param {string} dateString - ISO date string
-	 * @returns {string} Formatted date
-	 */
-	formatDateSimple(dateString) {
-		try {
-			const date = new Date(dateString);
-			return date.toString() !== "Invalid Date"
-				? date.toLocaleDateString("en-US", {
-						month: "2-digit",
-						day: "2-digit",
-						year: "numeric",
-					})
-				: "";
-		} catch (e) {
-			return "";
-		}
-	},
-};
-
-/**
- * TableManager - Handles table operations like sorting, pagination, and updates
- */
-class TableManager {
-	constructor(config) {
-		this.tableId = config.tableId;
-		this.table = document.getElementById(this.tableId);
-		this.tbody = this.table?.querySelector("tbody");
-		this.loadingIndicator = document.getElementById(config.loadingIndicatorId);
-		this.paginationContainer = document.getElementById(
-			config.paginationContainerId,
-		);
-		this.currentSort = { by: "created_at", order: "desc" };
-		this.onRowClick = config.onRowClick;
-
-		this.initializeSorting();
-	}
-
-	initializeSorting() {
-		if (!this.table) return;
-
-		const sortableHeaders = this.table.querySelectorAll("th.sortable");
-		for (const header of sortableHeaders) {
-			header.style.cursor = "pointer";
-			header.addEventListener("click", () => {
-				this.handleSort(header);
-			});
-		}
-
-		this.updateSortIcons();
-	}
-
-	handleSort(header) {
-		const field = header.getAttribute("data-sort");
-		const currentSort = new URLSearchParams(window.location.search).get(
-			"sort_by",
-		);
-		const currentOrder =
-			new URLSearchParams(window.location.search).get("sort_order") || "desc";
-
-		let newOrder = "asc";
-		if (currentSort === field && currentOrder === "asc") {
-			newOrder = "desc";
-		}
-
-		this.currentSort = { by: field, order: newOrder };
-		this.updateURL({ sort_by: field, sort_order: newOrder, page: "1" });
-	}
-
-	updateSortIcons() {
-		const urlParams = new URLSearchParams(window.location.search);
-		const currentSort = urlParams.get("sort_by") || "created_at";
-		const currentOrder = urlParams.get("sort_order") || "desc";
-
-		const sortableHeaders = this.table?.querySelectorAll("th.sortable");
-		for (const header of sortableHeaders || []) {
-			const icon = header.querySelector(".sort-icon");
-			const field = header.getAttribute("data-sort");
-
-			if (icon) {
-				// Reset classes
-				icon.className = "bi sort-icon";
-
-				if (field === currentSort) {
-					// Add active class and appropriate direction icon
-					icon.classList.add("active");
-					icon.classList.add(
-						currentOrder === "asc" ? "bi-caret-up-fill" : "bi-caret-down-fill",
-					);
-				} else {
-					// Inactive columns get default down arrow
-					icon.classList.add("bi-caret-down-fill");
-				}
-			}
-		}
-	}
-
-	showLoading() {
-		if (this.loadingIndicator) {
-			this.loadingIndicator.classList.remove("d-none");
-		}
-	}
-
-	hideLoading() {
-		if (this.loadingIndicator) {
-			this.loadingIndicator.classList.add("d-none");
-		}
-	}
-
-	showError(message) {
-		const tbody = document.querySelector("tbody");
-		if (tbody) {
-			tbody.innerHTML = `
-				<tr>
-					<td colspan="8" class="text-center text-danger py-4">
-						<i class="fas fa-exclamation-triangle"></i> ${ComponentUtils.escapeHtml(message)}
-						<br><small class="text-muted">Try refreshing the page or contact support if the problem persists.</small>
-					</td>
-				</tr>
-			`;
-		}
-	}
-
-	updateTable(data, hasResults) {
-		if (!this.tbody) return;
-
-		if (!hasResults || !data || data.length === 0) {
-			this.tbody.innerHTML = `
-                <tr>
-                    <td colspan="8" class="text-center text-muted py-4">No results found.</td>
-                </tr>
-            `;
-			return;
-		}
-
-		this.tbody.innerHTML = data
-			.map((item, index) => this.renderRow(item, index))
-			.join("");
-		this.attachRowClickHandlers();
-	}
-
-	renderRow(item, index) {
-		// This should be overridden by specific implementations
-		return `<tr><td colspan="9">Override renderRow method</td></tr>`;
-	}
-
-	attachRowClickHandlers() {
-		if (!this.onRowClick) return;
-
-		const rows = this.tbody?.querySelectorAll('tr[data-clickable="true"]');
-		for (const row of rows || []) {
-			row.addEventListener("click", (e) => {
-				if (
-					e.target.closest(
-						"button, a, .capture-select-checkbox, .capture-select-column",
-					)
-				)
-					return; // Don't trigger on buttons/links/selection
-				this.onRowClick(row);
-			});
-		}
-	}
-
-	updateURL(params) {
-		const urlParams = new URLSearchParams(window.location.search);
-		for (const [key, value] of Object.entries(params)) {
-			if (value) {
-				urlParams.set(key, value);
-			} else {
-				urlParams.delete(key);
-			}
-		}
-
-		const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-		window.history.pushState({}, "", newUrl);
-	}
-}
-
-/**
- * CapturesTableManager - Specific implementation for captures table
- */
-class CapturesTableManager extends TableManager {
-	constructor(config) {
-		super(config);
-		this.modalHandler = config.modalHandler;
-		this.tableContainerSelector = config.tableContainerSelector;
-		this.eventDelegationHandler = null;
-		this.initializeEventDelegation();
-	}
-
-	/**
-	 * Initialize event delegation for better performance and memory management
-	 */
-	initializeEventDelegation() {
-		// Remove existing handler if it exists
-		if (this.eventDelegationHandler) {
-			document.removeEventListener("click", this.eventDelegationHandler);
-		}
-
-		// Create single persistent event handler using delegation
-		this.eventDelegationHandler = (e) => {
-			// Ignore Bootstrap dropdown toggles
-			if (
-				e.target.matches('[data-bs-toggle="dropdown"]') ||
-				e.target.closest('[data-bs-toggle="dropdown"]')
-			) {
-				return;
-			}
-
-			// Handle capture details button clicks from actions dropdown
-			if (
-				e.target.matches(".capture-details-btn") ||
-				e.target.closest(".capture-details-btn")
-			) {
-				e.preventDefault();
-				const button = e.target.matches(".capture-details-btn")
-					? e.target
-					: e.target.closest(".capture-details-btn");
-				this.openCaptureModal(button);
-				return;
-			}
-
-			// Handle capture link clicks
-			if (
-				e.target.matches(".capture-link") ||
-				e.target.closest(".capture-link")
-			) {
-				e.preventDefault();
-				const link = e.target.matches(".capture-link")
-					? e.target
-					: e.target.closest(".capture-link");
-				this.openCaptureModal(link);
-				return;
-			}
-
-			// Handle view button clicks
-			if (
-				e.target.matches(".view-capture-btn") ||
-				e.target.closest(".view-capture-btn")
-			) {
-				e.preventDefault();
-				const button = e.target.matches(".view-capture-btn")
-					? e.target
-					: e.target.closest(".view-capture-btn");
-				this.openCaptureModal(button);
-				return;
-			}
-		};
-
-		// Add the persistent event listener
-		document.addEventListener("click", this.eventDelegationHandler);
-	}
-
-	renderRow(capture, index) {
-		// Sanitize all data before rendering
-		const safeData = {
-			uuid: ComponentUtils.escapeHtml(capture.uuid || ""),
-			channel: ComponentUtils.escapeHtml(capture.channel || ""),
-			scanGroup: ComponentUtils.escapeHtml(capture.scan_group || ""),
-			captureType: ComponentUtils.escapeHtml(capture.capture_type || ""),
-			captureTypeDisplay: ComponentUtils.escapeHtml(
-				capture.capture_type_display || "",
-			),
-			topLevelDir: ComponentUtils.escapeHtml(capture.top_level_dir || ""),
-			indexName: ComponentUtils.escapeHtml(capture.index_name || ""),
-			owner: ComponentUtils.escapeHtml(capture.owner || ""),
-			origin: ComponentUtils.escapeHtml(capture.origin || ""),
-			dataset: ComponentUtils.escapeHtml(capture.dataset || ""),
-			createdAt: ComponentUtils.escapeHtml(capture.created_at || ""),
-			updatedAt: ComponentUtils.escapeHtml(capture.updated_at || ""),
-			isPublic: ComponentUtils.escapeHtml(capture.is_public || ""),
-			isDeleted: ComponentUtils.escapeHtml(capture.is_deleted || ""),
-			centerFrequencyGhz: ComponentUtils.escapeHtml(
-				capture.center_frequency_ghz || "",
-			),
-		};
-
-		// Handle composite vs single capture display
-		let channelDisplay = safeData.channel;
-		let typeDisplay = safeData.captureTypeDisplay || safeData.captureType;
-
-		if (capture.is_multi_channel) {
-			// For composite captures, show all channels
-			if (capture.channels && Array.isArray(capture.channels)) {
-				channelDisplay = capture.channels
-					.map((ch) => ComponentUtils.escapeHtml(ch.channel || ch))
-					.join(", ");
-			}
-			// Use capture_type_display if available, otherwise fall back to captureType
-			typeDisplay = capture.capture_type_display || safeData.captureType;
-		}
-
-		return `
-            <tr class="capture-row" data-clickable="true" data-uuid="${safeData.uuid}">
-                <td>
-                    <a href="#" class="capture-link"
-                       data-uuid="${safeData.uuid}"
-                       data-channel="${safeData.channel}"
-                       data-scan-group="${safeData.scanGroup}"
-                       data-capture-type="${safeData.captureType}"
-                       data-top-level-dir="${safeData.topLevelDir}"
-                       data-index-name="${safeData.indexName}"
-                       data-owner="${safeData.owner}"
-                       data-origin="${safeData.origin}"
-                       data-dataset="${safeData.dataset}"
-                       data-created-at="${safeData.createdAt}"
-                       data-updated-at="${safeData.updatedAt}"
-                       data-is-public="${safeData.isPublic}"
-                       data-is-deleted="${safeData.isDeleted}"
-                       data-center-frequency-ghz="${safeData.centerFrequencyGhz}"
-                       data-is-multi-channel="${capture.is_multi_channel || false}"
-                       data-channels="${capture.channels ? JSON.stringify(capture.channels) : ""}"
-                       aria-label="View details for ${safeData.uuid || "unknown capture"}">
-                        ${safeData.uuid}
-                    </a>
-                </td>
-                <td>${channelDisplay}</td>
-                <td class="text-nowrap">
-                    ${ComponentUtils.formatDateForModal(capture.capture?.created_at || capture.created_at)}
-                </td>
-                <td>${typeDisplay}</td>
-                <td>${capture.files_count || "0"}</td>
-                <td>${capture.center_frequency_ghz ? `${capture.center_frequency_ghz.toFixed(3)} GHz` : "-"}</td>
-                <td>${capture.sample_rate_mhz ? `${capture.sample_rate_mhz.toFixed(1)} MHz` : "-"}</td>
-            </tr>
-        `;
-	}
-
-	/**
-	 * Attach row click handlers - now uses event delegation
-	 */
-	attachRowClickHandlers() {
-		// Event delegation is handled in initializeEventDelegation()
-		// This method is kept for compatibility but doesn't need to do anything
-	}
-
-	/**
-	 * Open capture modal with XSS protection
-	 */
-	openCaptureModal(linkElement) {
-		if (this.modalHandler) {
-			this.modalHandler.openCaptureModal(linkElement);
-		}
-	}
-
-	/**
-	 * Get CSRF token for API requests
-	 */
-	getCSRFToken() {
-		const token = document.querySelector("[name=csrfmiddlewaretoken]");
-		return token ? token.value : "";
-	}
-
-	/**
-	 * Open a custom modal
-	 */
-	openCustomModal(modalId) {
-		const modal = document.getElementById(modalId);
-		if (modal) {
-			modal.style.display = "block";
-			document.body.style.overflow = "hidden";
-		}
-	}
-
-	/**
-	 * Close a custom modal
-	 */
-	closeCustomModal(modalId) {
-		const modal = document.getElementById(modalId);
-		if (modal) {
-			modal.style.display = "none";
-			document.body.style.overflow = "auto";
-		}
-	}
-
-	/**
-	 * Cleanup method for proper resource management
-	 */
-	destroy() {
-		if (this.eventDelegationHandler) {
-			document.removeEventListener("click", this.eventDelegationHandler);
-			this.eventDelegationHandler = null;
-		}
-	}
-}
-
-/**
- * FilterManager - Handles form-based filtering with URL state management
- */
-class FilterManager {
-	constructor(config) {
-		this.formId = config.formId;
-		this.form = document.getElementById(this.formId);
-		this.applyButton = document.getElementById(config.applyButtonId);
-		this.clearButton = document.getElementById(config.clearButtonId);
-		this.onFilterChange = config.onFilterChange;
-		this.searchInputId = config.searchInputId || "search-input";
-
-		this.initializeEventListeners();
-		this.loadFromURL();
-	}
-
-	initializeEventListeners() {
-		if (this.applyButton) {
-			this.applyButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.applyFilters();
-			});
-		}
-
-		if (this.clearButton) {
-			this.clearButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.clearFilters();
-			});
-		}
-
-		// Auto-apply on form submission
-		if (this.form) {
-			this.form.addEventListener("submit", (e) => {
-				e.preventDefault();
-				this.applyFilters();
-			});
-		}
-	}
-
-	getFilterValues() {
-		if (!this.form) return {};
-
-		const formData = new FormData(this.form);
-		const filters = {};
-
-		for (const [key, value] of formData.entries()) {
-			if (value && value.trim() !== "") {
-				filters[key] = value.trim();
-			}
-		}
-
-		return filters;
-	}
-
-	applyFilters() {
-		const filters = this.getFilterValues();
-		this.updateURL(filters);
-
-		if (this.onFilterChange) {
-			this.onFilterChange(filters);
-		}
-	}
-
-	clearFilters() {
-		if (!this.form) return;
-
-		// Get all form inputs except the search input
-		const inputs = this.form.querySelectorAll("input, select, textarea");
-		for (const input of inputs) {
-			// Skip the search input
-			if (input.id === this.searchInputId) {
-				continue;
-			}
-
-			// Clear other inputs
-			if (input.type === "checkbox" || input.type === "radio") {
-				input.checked = false;
-			} else {
-				input.value = "";
-			}
-		}
-
-		// Get current URL parameters
-		const urlParams = new URLSearchParams(window.location.search);
-		const searchValue = urlParams.get("search");
-		const sortBy = urlParams.get("sort_by") || "created_at";
-		const sortOrder = urlParams.get("sort_order") || "desc";
-
-		// Clear all parameters except search and sort
-		urlParams.forEach((_, key) => {
-			if (key !== "search" && key !== "sort_by" && key !== "sort_order") {
-				urlParams.delete(key);
-			}
-		});
-
-		// Ensure sort parameters are set
-		urlParams.set("sort_by", sortBy);
-		urlParams.set("sort_order", sortOrder);
-		urlParams.set("page", "1");
-
-		// Update URL
-		const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-		window.history.pushState({}, "", newUrl);
-
-		// Trigger filter change callback
-		if (this.onFilterChange) {
-			const filters = {
-				sort_by: sortBy,
-				sort_order: sortOrder,
-			};
-			if (searchValue) {
-				filters.search = searchValue;
-			}
-			this.onFilterChange(filters);
-		}
-	}
-
-	loadFromURL() {
-		if (!this.form) return;
-
-		const urlParams = new URLSearchParams(window.location.search);
-		const inputs = this.form.querySelectorAll("input, select, textarea");
-
-		for (const input of inputs) {
-			const value = urlParams.get(input.name);
-			if (value !== null) {
-				if (input.type === "checkbox" || input.type === "radio") {
-					input.checked = value === "true" || value === input.value;
-				} else {
-					input.value = value;
-				}
-			}
-		}
-	}
-
-	updateURL(filters) {
-		const urlParams = new URLSearchParams(window.location.search);
-
-		// Preserve search parameter if it exists
-		const searchValue = urlParams.get("search");
-
-		// Remove old filter parameters
-		const formData = new FormData(this.form || document.createElement("form"));
-		for (const key of formData.keys()) {
-			urlParams.delete(key);
-		}
-
-		// Add new filter parameters
-		for (const [key, value] of Object.entries(filters)) {
-			if (value) {
-				urlParams.set(key, value);
-			}
-		}
-
-		// Restore search parameter if it existed
-		if (searchValue) {
-			urlParams.set("search", searchValue);
-		}
-
-		// Reset to first page when filters change
-		urlParams.set("page", "1");
-
-		const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-		window.history.pushState({}, "", newUrl);
-	}
-}
-
-/**
- * SearchManager - Handles search functionality with debouncing and request cancellation
- */
-class SearchManager {
-	constructor(config) {
-		this.searchInput = document.getElementById(config.searchInputId);
-		this.searchButton = document.getElementById(config.searchButtonId);
-		this.clearButton = document.getElementById("clear-search-btn");
-		this.onSearch = config.onSearch;
-		this.onSearchStart = config.onSearchStart;
-		this.debounceDelay = config.debounceDelay || 500;
-		this.debounceTimer = null;
-		this.abortController = new AbortController();
-
-		this.initializeEventListeners();
-		this.updateClearButtonVisibility();
-	}
-
-	initializeEventListeners() {
-		if (this.searchInput) {
-			this.searchInput.addEventListener("input", () => {
-				this.debounceSearch();
-				this.updateClearButtonVisibility();
-			});
-
-			this.searchInput.addEventListener("keypress", (e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					this.debounceSearch();
-				}
-			});
-		}
-
-		if (this.searchButton) {
-			this.searchButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.debounceSearch();
-			});
-		}
-
-		if (this.clearButton) {
-			this.clearButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.clearSearch();
-			});
-		}
-	}
-
-	updateClearButtonVisibility() {
-		if (this.clearButton) {
-			this.clearButton.style.display = this.searchInput?.value
-				? "block"
-				: "none";
-		}
-	}
-
-	debounceSearch() {
-		// Show loading indicator immediately for visual confirmation
-		if (this.onSearchStart) {
-			this.onSearchStart();
-		}
-
-		if (this.debounceTimer) {
-			clearTimeout(this.debounceTimer);
-		}
-
-		this.debounceTimer = setTimeout(() => {
-			this.performSearch();
-		}, this.debounceDelay);
-	}
-
-	performSearch() {
-		// Cancel any previous request and create a new abort controller
-		this.abortController.abort();
-		this.abortController = new AbortController();
-
-		const query = this.searchInput?.value || "";
-
-		if (this.onSearch) {
-			this.onSearch(query, this.abortController.signal);
-		}
-	}
-
-	clearSearch() {
-		if (this.searchInput) {
-			this.searchInput.value = "";
-			this.updateClearButtonVisibility();
-		}
-
-		this.debounceSearch();
-	}
-
-	/**
-	 * Get the current abort signal for fetch requests
-	 */
-	getAbortSignal() {
-		return this.abortController.signal;
-	}
-}
-
-/**
- * ModalManager - Handles modal operations
- */
-class ModalManager {
-	constructor(config) {
-		this.modalId = config.modalId;
-		this.modal = document.getElementById(this.modalId);
-		this.modalTitle = this.modal?.querySelector(".modal-title");
-		this.modalBody = this.modal?.querySelector(".modal-body");
-
-		if (this.modal && window.bootstrap) {
-			this.bootstrapModal = new bootstrap.Modal(this.modal);
-		}
-	}
-
-	show(title, content) {
-		if (!this.modal) return;
-
-		if (this.modalTitle) {
-			this.modalTitle.textContent = title;
-		}
-
-		if (this.modalBody) {
-			this.modalBody.innerHTML = content;
-		}
-
-		if (this.bootstrapModal) {
-			this.bootstrapModal.show();
-		}
-	}
-
-	hide() {
-		if (this.bootstrapModal) {
-			this.bootstrapModal.hide();
-		}
-	}
-
-	openCaptureModal(linkElement) {
-		if (!linkElement) return;
-
-		try {
-			// Reset visualize button to hidden state
-			const visualizeBtn = document.getElementById("visualize-btn");
-			if (visualizeBtn) {
-				visualizeBtn.classList.add("d-none");
-			}
-
-			// Get all data attributes from the link with sanitization
-			const data = {
-				uuid: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-uuid") || "",
-				),
-				name: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-name") || "",
-				),
-				channel: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-channel") || "",
-				),
-				scanGroup: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-scan-group") || "",
-				),
-				captureType: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-capture-type") || "",
-				),
-				topLevelDir: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-top-level-dir") || "",
-				),
-				owner: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-owner") || "",
-				),
-				origin: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-origin") || "",
-				),
-				dataset: ComponentUtils.escapeHtml(
-					linkElement.getAttribute("data-dataset") || "",
-				),
-				createdAt: linkElement.getAttribute("data-created-at") || "",
-				updatedAt: linkElement.getAttribute("data-updated-at") || "",
-				isPublic: linkElement.getAttribute("data-is-public") || "",
-				centerFrequencyGhz:
-					linkElement.getAttribute("data-center-frequency-ghz") || "",
-				isMultiChannel: linkElement.getAttribute("data-is-multi-channel") || "",
-				channels: linkElement.getAttribute("data-channels") || "",
-			};
-
-			// Parse owner field safely
-			const ownerDisplay = data.owner
-				? data.owner.split("'").find((part) => part.includes("@")) || "N/A"
-				: "N/A";
-
-			// Check if this is a composite capture
-			const isComposite =
-				data.isMultiChannel === "True" || data.isMultiChannel === "true";
-
-			let modalContent = `
-				<div class="mb-4">
-					<div class="d-flex align-items-center mb-3">
-						<h6 class="mb-0 fw-bold">
-							<i class="bi bi-info-circle me-2"></i>Basic Information
-						</h6>
-					</div>
-					<div class="mb-3">
-						<label for="capture-name-input" class="form-label fw-medium">
-							<strong>Name:</strong>
-						</label>
-						<div class="input-group">
-							<input type="text"
-								   class="form-control"
-								   id="capture-name-input"
-								   value="${data.name || ""}"
-								   placeholder="Enter capture name"
-								   maxlength="255"
-								   data-uuid="${data.uuid}">
-							<button class="btn btn-outline-secondary edit-name-btn"
-									type="button"
-									id="edit-name-btn"
-									title="Edit capture name">
-								<i class="bi bi-pencil"></i>
-							</button>
-							<button class="btn btn-outline-danger d-none"
-									type="button"
-									id="cancel-name-btn"
-									title="Cancel editing">
-								<i class="bi bi-x-lg"></i>
-							</button>
-							<button class="btn btn-outline-primary save-name-btn d-none"
-									type="button"
-									id="save-name-btn"
-									title="Save changes">
-								<i class="bi bi-check-lg"></i>
-							</button>
-						</div>
-						<div class="form-text">Click the edit button to modify the capture name</div>
-					</div>
-					<div class="row">
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Capture Type:</span>
-								<span class="ms-2">${data.captureType || "N/A"}</span>
-							</p>
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Origin:</span>
-								<span class="ms-2">${data.origin || "N/A"}</span>
-							</p>
-						</div>
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Owner:</span>
-								<span class="ms-2">${ownerDisplay}</span>
-							</p>
-						</div>
-					</div>
-			`;
-
-			// Handle composite vs single capture display
-			if (isComposite) {
-				modalContent += `
-					<div class="mb-2">
-						<span class="fw-medium text-muted">Channels:</span>
-						<span class="ms-2">${data.channel || "N/A"}</span>
-					</div>
-				`;
-			} else {
-				modalContent += `
-					<div class="mb-2">
-						<span class="fw-medium text-muted">Channel:</span>
-						<span class="ms-2">${data.channel || "N/A"}</span>
-					</div>
-				`;
-			}
-
-			modalContent += `
-				</div>
-				<div class="mb-4">
-					<div class="d-flex align-items-center mb-3">
-						<h6 class="mb-0 fw-bold">
-							<i class="bi bi-gear me-2"></i>Technical Details
-						</h6>
-					</div>
-					<div class="row">
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Scan Group:</span>
-								<span class="ms-2">${data.scanGroup || "N/A"}</span>
-							</p>
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Dataset:</span>
-								<span class="ms-2">${data.dataset || "N/A"}</span>
-							</p>
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Is Public:</span>
-								<span class="ms-2">${data.isPublic === "True" ? "Yes" : "No"}</span>
-							</p>
-						</div>
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Top Level Directory:</span>
-								<span class="ms-2 text-break">${data.topLevelDir || "N/A"}</span>
-							</p>
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Center Frequency:</span>
-								<span class="ms-2">
-									${data.centerFrequencyGhz && data.centerFrequencyGhz !== "None" ? `${Number.parseFloat(data.centerFrequencyGhz).toFixed(3)} GHz` : "N/A"}
-								</span>
-							</p>
-						</div>
-					</div>
-				</div>
-				<div class="mb-4">
-					<div class="d-flex align-items-center mb-3">
-						<h6 class="mb-0 fw-bold">
-							<i class="bi bi-clock me-2"></i>Timestamps
-						</h6>
-					</div>
-					<div class="row">
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Created At:</span>
-								<br>
-								<small class="text-muted">
-									${ComponentUtils.formatDateForModal(data.createdAt)}
-								</small>
-							</p>
-						</div>
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Updated At:</span>
-								<br>
-								<small class="text-muted">
-									${ComponentUtils.formatDateForModal(data.updatedAt)}
-								</small>
-							</p>
-						</div>
-					</div>
-				</div>
-				<!-- Files section placeholder -->
-				<div id="files-section-placeholder" class="mt-4">
-					<div class="d-flex justify-content-center py-3">
-						<div class="spinner-border spinner-border-sm me-2" role="status" style="color: #005a9c;">
-							<span class="visually-hidden">Loading files...</span>
-						</div>
-						<span class="text-muted">Loading files...</span>
-					</div>
-				</div>
-			`;
-
-			// Add composite-specific information if available
-			if (isComposite && data.channels) {
-				try {
-					// Convert Python dict syntax to valid JSON
-					let channelsData;
-					if (typeof data.channels === "string") {
-						// Handle Python dict syntax: {'key': 'value'} -> {"key": "value"}
-						const pythonDict = data.channels
-							.replace(/'/g, '"') // Replace single quotes with double quotes
-							.replace(/True/g, "true") // Replace Python True with JSON true
-							.replace(/False/g, "false") // Replace Python False with JSON false
-							.replace(/None/g, "null"); // Replace Python None with JSON null
-
-						channelsData = JSON.parse(pythonDict);
-					} else {
-						channelsData = data.channels;
-					}
-
-					if (Array.isArray(channelsData) && channelsData.length > 0) {
-						modalContent += `
-							<div class="mt-4">
-								<h6>Channel Details</h6>
-								<div class="accordion" id="channelsAccordion">
-						`;
-
-						for (let i = 0; i < channelsData.length; i++) {
-							const channel = channelsData[i];
-							const channelId = `channel-${i}`;
-
-							// Format channel metadata as key-value pairs
-							let metadataDisplay = "N/A";
-							if (
-								channel.channel_metadata &&
-								typeof channel.channel_metadata === "object"
-							) {
-								const metadata = channel.channel_metadata;
-								const metadataItems = [];
-
-								// Helper function to format values dynamically
-								const formatValue = (value, fieldName = "") => {
-									if (value === null || value === undefined) {
-										return "N/A";
-									}
-
-									if (typeof value === "boolean") {
-										return value ? "Yes" : "No";
-									}
-
-									// Handle string representations of booleans
-									if (typeof value === "string") {
-										if (value.toLowerCase() === "true") {
-											return "Yes";
-										}
-										if (value.toLowerCase() === "false") {
-											return "No";
-										}
-									}
-
-									if (typeof value === "number") {
-										const absValue = Math.abs(value);
-										const valueStr = value.toString();
-										const timeIndicators = [
-											"computer_time",
-											"start_bound",
-											"end_bound",
-											"init_utc_timestamp",
-										];
-										// Only format as timestamp if the field name contains "time"
-										if (
-											timeIndicators.includes(fieldName.toLowerCase()) &&
-											valueStr.length >= 10 &&
-											valueStr.length <= 13
-										) {
-											// Convert to milliseconds if it's in seconds
-											const timestamp =
-												valueStr.length === 10 ? value * 1000 : value;
-											return new Date(timestamp).toLocaleString();
-										}
-
-										// Only format for Giga (1e9) and Mega (1e6) ranges
-										if (absValue >= 1e9) {
-											return `${(value / 1e9).toFixed(3)} GHz`;
-										}
-										if (absValue >= 1e6) {
-											return `${(value / 1e6).toFixed(1)} MHz`;
-										}
-										return value.toString();
-									}
-
-									if (Array.isArray(value)) {
-										return value
-											.map((item) => formatValue(item, fieldName))
-											.join(", ");
-									}
-
-									if (typeof value === "object") {
-										return JSON.stringify(value);
-									}
-
-									return String(value);
-								};
-
-								// Helper function to format field names
-								const formatFieldName = (fieldName) => {
-									return fieldName
-										.replace(/_/g, " ")
-										.replace(/\b\w/g, (l) => l.toUpperCase());
-								};
-
-								// Loop through all metadata fields
-								if (Object.keys(metadata).length > 0) {
-									for (const [key, value] of Object.entries(metadata)) {
-										if (value !== undefined && value !== null) {
-											const formattedValue = formatValue(value, key);
-											const formattedKey = formatFieldName(key);
-											metadataItems.push(
-												`<strong>${formattedKey}:</strong> ${formattedValue}`,
-											);
-										}
-									}
-								} else {
-									metadataItems.push("<em>No metadata available</em>");
-								}
-
-								if (metadataItems.length > 0) {
-									metadataDisplay = metadataItems.join("<br>");
-								}
-							}
-
-							modalContent += `
-								<div class="accordion-item">
-									<h2 class="accordion-header" id="heading-${channelId}">
-										<button class="accordion-button ${i === 0 ? "" : "collapsed"}" type="button"
-												data-bs-toggle="collapse"
-												data-bs-target="#collapse-${channelId}"
-												aria-expanded="${i === 0 ? "true" : "false"}"
-												aria-controls="collapse-${channelId}">
-											<strong>${ComponentUtils.escapeHtml(channel.channel || "N/A")}</strong>
-											<small class="text-muted ms-2">(Click to expand metadata)</small>
-										</button>
-									</h2>
-									<div id="collapse-${channelId}"
-										 class="accordion-collapse collapse ${i === 0 ? "show" : ""}"
-										 aria-labelledby="heading-${channelId}"
-										 data-bs-parent="#channelsAccordion">
-										<div class="accordion-body">
-											<div style="max-width: 100%; word-wrap: break-word;">
-												${metadataDisplay}
-											</div>
-										</div>
-									</div>
-								</div>
-							`;
-						}
-
-						modalContent += `
-								</div>
-							</div>
-						`;
-					}
-				} catch (e) {
-					console.error("Could not parse channels data for modal:", e);
-					console.error(
-						"Raw channels data that failed to parse:",
-						data.channels,
-					);
-
-					// Show a fallback message in the modal
-					modalContent += `
-						<div class="mt-4">
-							<h6>Channel Details</h6>
-							<div class="alert alert-warning">
-								<i class="fas fa-exclamation-triangle"></i>
-								Unable to display channel details due to data format issues.
-								<br><small>Raw data: ${ComponentUtils.escapeHtml(String(data.channels).substring(0, 100))}...</small>
-							</div>
-						</div>
-					`;
-				}
-			}
-
-			const title = data.name
-				? data.name
-				: data.topLevelDir || "Unnamed Capture";
-			this.show(title, modalContent);
-
-			// Store capture data for later use
-			this.currentCaptureData = data;
-
-			// Setup name editing handlers after modal content is loaded
-			this.setupNameEditingHandlers();
-
-			// Setup visualize button for Digital RF captures
-			this.setupVisualizeButton(data);
-
-			// Load and display files for this capture
-			this.loadCaptureFiles(data.uuid);
-		} catch (error) {
-			console.error("Error opening capture modal:", error);
-			this.show("Error", "Error displaying capture details");
-		}
-	}
-
-	/**
-	 * Setup visualize button for Digital RF captures
-	 */
-	setupVisualizeButton(captureData) {
-		const visualizeBtn = document.getElementById("visualize-btn");
-		if (!visualizeBtn) return;
-
-		// Show button only for Digital RF captures
-		if (captureData.captureType === "drf") {
-			visualizeBtn.classList.remove("d-none");
-
-			// Set up click handler to open visualization modal
-			visualizeBtn.onclick = () => {
-				// Use the VisualizationModal instance to open with capture data
-				if (window.visualizationModalInstance) {
-					window.visualizationModalInstance.openWithCaptureData(
-						captureData.uuid,
-						captureData.captureType,
-					);
-				}
-			};
-		} else {
-			visualizeBtn.classList.add("d-none");
-		}
-	}
-
-	/**
-	 * Setup handlers for name editing functionality
-	 */
-	setupNameEditingHandlers() {
-		const nameInput = document.getElementById("capture-name-input");
-		const editBtn = document.getElementById("edit-name-btn");
-		const saveBtn = document.getElementById("save-name-btn");
-		const cancelBtn = document.getElementById("cancel-name-btn");
-
-		if (!nameInput || !editBtn || !saveBtn || !cancelBtn) return;
-
-		// Initially disable the input
-		nameInput.disabled = true;
-		let originalName = nameInput.value;
-		let isEditing = false;
-
-		const startEditing = () => {
-			nameInput.disabled = false;
-			nameInput.focus();
-			nameInput.select();
-			editBtn.classList.add("d-none");
-			saveBtn.classList.remove("d-none");
-			cancelBtn.classList.remove("d-none");
-			isEditing = true;
-		};
-
-		const stopEditing = () => {
-			nameInput.disabled = true;
-			editBtn.classList.remove("d-none");
-			saveBtn.classList.add("d-none");
-			cancelBtn.classList.add("d-none");
-			isEditing = false;
-		};
-
-		const cancelEditing = () => {
-			nameInput.value = originalName;
-			stopEditing();
-		};
-
-		// Edit button handler
-		editBtn.addEventListener("click", () => {
-			if (!isEditing) {
-				startEditing();
-			}
-		});
-
-		// Cancel button handler
-		cancelBtn.addEventListener("click", cancelEditing);
-
-		// Save button handler
-		saveBtn.addEventListener("click", async () => {
-			const newName = nameInput.value.trim();
-			const uuid = nameInput.getAttribute("data-uuid");
-
-			if (!uuid) {
-				console.error("No UUID found for capture");
-				return;
-			}
-
-			// Disable buttons during save
-			editBtn.disabled = true;
-			saveBtn.disabled = true;
-			cancelBtn.disabled = true;
-			saveBtn.innerHTML =
-				'<span class="spinner-border spinner-border-sm"></span>';
-
-			try {
-				await this.updateCaptureName(uuid, newName);
-
-				// Success - update UI
-				originalName = newName;
-				stopEditing();
-
-				// Update the table display
-				this.updateTableNameDisplay(uuid, newName);
-
-				// Update modal title using stored capture data
-				if (this.modalTitle && this.currentCaptureData) {
-					this.currentCaptureData.name = newName;
-					this.modalTitle.textContent =
-						newName || this.currentCaptureData.topLevelDir || "Unnamed Capture";
-				}
-
-				// Show success message
-				this.showSuccessMessage("Capture name updated successfully!");
-			} catch (error) {
-				console.error("Error updating capture name:", error);
-				this.showErrorMessage(
-					"Failed to update capture name. Please try again.",
-				);
-				// Revert to original name
-				nameInput.value = originalName;
-			} finally {
-				// Re-enable buttons and restore icons
-				editBtn.disabled = false;
-				saveBtn.disabled = false;
-				cancelBtn.disabled = false;
-				saveBtn.innerHTML = '<i class="bi bi-check-lg"></i>';
-			}
-		});
-
-		// Handle Enter key to save
-		nameInput.addEventListener("keypress", (e) => {
-			if (e.key === "Enter" && !nameInput.disabled) {
-				saveBtn.click();
-			}
-		});
-
-		// Handle Escape key to cancel
-		nameInput.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && !nameInput.disabled) {
-				cancelEditing();
-			}
-		});
-	}
-
-	/**
-	 * Update capture name via API
-	 */
-	async updateCaptureName(uuid, newName) {
-		const response = await fetch(`/api/v1/assets/captures/${uuid}/`, {
-			method: "PATCH",
-			headers: {
-				"Content-Type": "application/json",
-				"X-CSRFToken": this.getCSRFToken(),
-			},
-			body: JSON.stringify({ name: newName }),
-		});
-
-		if (!response.ok) {
-			const errorData = await response.json();
-			throw new Error(errorData.detail || "Failed to update capture name");
-		}
-
-		return response.json();
-	}
-
-	/**
-	 * Update the table display with the new name
-	 */
-	updateTableNameDisplay(uuid, newName) {
-		// Find all elements with this UUID and update their display
-		const captureLinks = document.querySelectorAll(`[data-uuid="${uuid}"]`);
-
-		for (const link of captureLinks) {
-			// Update data attribute
-			link.dataset.name = newName;
-
-			// Update display text if it's a capture link
-			if (link.classList.contains("capture-link")) {
-				link.textContent = newName || "Unnamed Capture";
-				link.setAttribute(
-					"aria-label",
-					`View details for capture ${newName || uuid}`,
-				);
-				link.setAttribute("title", `View capture details: ${newName || uuid}`);
-			}
-		}
-	}
-
-	/**
-	 * Clear existing alert messages from the modal
-	 */
-	clearAlerts() {
-		const modalBody = document.getElementById("capture-modal-body");
-		if (modalBody) {
-			const existingAlerts = modalBody.querySelectorAll(".alert");
-			for (const alert of existingAlerts) {
-				alert.remove();
-			}
-		}
-	}
-
-	/**
-	 * Show success message
-	 */
-	showSuccessMessage(message) {
-		// Clear existing alerts first
-		this.clearAlerts();
-
-		// Create a temporary alert
-		const alert = document.createElement("div");
-		alert.className = "alert alert-success alert-dismissible fade show";
-		alert.innerHTML = `
-			${message}
-			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-		`;
-
-		// Insert at the top of the modal body
-		const modalBody = document.getElementById("capture-modal-body");
-		if (modalBody) {
-			modalBody.insertBefore(alert, modalBody.firstChild);
-
-			// Auto-dismiss after 3 seconds
-			setTimeout(() => {
-				if (alert.parentNode) {
-					alert.remove();
-				}
-			}, 3000);
-		}
-	}
-
-	/**
-	 * Show error message
-	 */
-	showErrorMessage(message) {
-		// Clear existing alerts first
-		this.clearAlerts();
-
-		// Create a temporary alert
-		const alert = document.createElement("div");
-		alert.className = "alert alert-danger alert-dismissible fade show";
-		alert.innerHTML = `
-			${message}
-			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-		`;
-
-		// Insert at the top of the modal body
-		const modalBody = document.getElementById("capture-modal-body");
-		if (modalBody) {
-			modalBody.insertBefore(alert, modalBody.firstChild);
-
-			// Auto-dismiss after 5 seconds
-			setTimeout(() => {
-				if (alert.parentNode) {
-					alert.remove();
-				}
-			}, 5000);
-		}
-	}
-
-	/**
-	 * Load and display files associated with the capture
-	 */
-	async loadCaptureFiles(captureUuid) {
-		try {
-			const response = await fetch(`/api/v1/assets/captures/${captureUuid}/`, {
-				method: "GET",
-				headers: {
-					"Content-Type": "application/json",
-					"X-CSRFToken": this.getCSRFToken(),
-				},
-			});
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			const captureData = await response.json();
-			console.log("Raw capture data:", captureData);
-
-			const files = captureData.files || [];
-			const filesCount = captureData.files_count || 0;
-			const totalSize = captureData.total_file_size || 0;
-
-			console.log("Files info:", {
-				filesCount,
-				totalSize,
-				numFiles: files.length,
-			});
-
-			// Update files section with simple summary
-			const filesSection = document.getElementById("files-section-placeholder");
-			if (filesSection) {
-				filesSection.innerHTML = `
-					<div class="row">
-						<div class="col-12">
-							<h6 class="mb-3">
-								<i class="bi bi-files me-2"></i>Files Summary
-							</h6>
-						</div>
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Number of Files:</span>
-								<span class="ms-2">${filesCount}</span>
-							</p>
-						</div>
-						<div class="col-md-6">
-							<p class="mb-2">
-								<span class="fw-medium text-muted">Total Size:</span>
-								<span class="ms-2">${window.DOMUtils.formatFileSize(totalSize)}</span>
-							</p>
-						</div>
-					</div>
-				`;
-			}
-		} catch (error) {
-			console.error("Error loading capture files:", error);
-			const filesSection = document.getElementById("files-section-placeholder");
-			if (filesSection) {
-				filesSection.innerHTML = `
-					<div class="alert alert-warning">
-						<i class="bi bi-exclamation-triangle me-2"></i>
-						Error loading files information
-					</div>
-				`;
-			}
-		}
-	}
-
-	/**
-	 * Format file metadata for display
-	 */
-	formatFileMetadata(file) {
-		const metadata = [];
-
-		// Primary file information - most useful for users
-		if (file.size) {
-			metadata.push(
-				`<strong>Size:</strong> ${window.DOMUtils.formatFileSize(file.size)} (${file.size.toLocaleString()} bytes)`,
-			);
-		}
-
-		if (file.media_type) {
-			metadata.push(
-				`<strong>Media Type:</strong> ${ComponentUtils.escapeHtml(file.media_type)}`,
-			);
-		}
-
-		if (file.created_at) {
-			metadata.push(`<strong>Created:</strong> ${file.created_at}`);
-		}
-
-		if (file.updated_at) {
-			metadata.push(`<strong>Updated:</strong> ${file.updated_at}`);
-		}
-
-		// File properties and attributes
-		if (file.name) {
-			metadata.push(
-				`<strong>Name:</strong> ${ComponentUtils.escapeHtml(file.name)}`,
-			);
-		}
-
-		if (file.directory || file.relative_path) {
-			metadata.push(
-				`<strong>Directory:</strong> ${ComponentUtils.escapeHtml(file.directory || file.relative_path)}`,
-			);
-		}
-
-		// Removed permissions display
-		// if (file.permissions) {
-		// 	metadata.push(`<strong>Permissions:</strong> <span style="color: #005a9c; font-family: monospace;">${ComponentUtils.escapeHtml(file.permissions)}</span>`);
-		// }
-
-		if (file.owner?.username) {
-			metadata.push(
-				`<strong>Owner:</strong> ${ComponentUtils.escapeHtml(file.owner.username)}`,
-			);
-		}
-
-		if (file.expiration_date) {
-			metadata.push(
-				`<strong>Expires:</strong> ${new Date(file.expiration_date).toLocaleDateString()}`,
-			);
-		}
-
-		if (file.bucket_name) {
-			metadata.push(
-				`<strong>Storage Bucket:</strong> ${ComponentUtils.escapeHtml(file.bucket_name)}`,
-			);
-		}
-
-		// Removed checksum display
-		// if (file.sum_blake3) {
-		// 	metadata.push(`<strong>Checksum:</strong> <span style="color: #005a9c; font-family: monospace;">${ComponentUtils.escapeHtml(file.sum_blake3)}</span>`);
-		// }
-
-		// Associated resources
-		// TODO: Refactor this to handle multiple associations
-		if (file.capture?.name) {
-			metadata.push(
-				`<strong>Associated Capture:</strong> ${ComponentUtils.escapeHtml(file.capture.name)}`,
-			);
-		}
-
-		if (file.dataset?.name) {
-			metadata.push(
-				`<strong>Associated Dataset:</strong> ${ComponentUtils.escapeHtml(file.dataset.name)}`,
-			);
-		}
-
-		// Additional metadata if available
-		if (file.metadata && typeof file.metadata === "object") {
-			for (const [key, value] of Object.entries(file.metadata)) {
-				if (value !== null && value !== undefined) {
-					const formattedKey = key
-						.replace(/_/g, " ")
-						.replace(/\b\w/g, (l) => l.toUpperCase());
-					let formattedValue;
-
-					// Format different types of values
-					if (typeof value === "boolean") {
-						formattedValue = value ? "Yes" : "No";
-					} else if (typeof value === "number") {
-						formattedValue = value.toLocaleString();
-					} else if (typeof value === "object") {
-						formattedValue = `<span style="color: #005a9c; font-family: monospace;">${JSON.stringify(value, null, 2)}</span>`;
-					} else {
-						formattedValue = ComponentUtils.escapeHtml(String(value));
-					}
-
-					metadata.push(`<strong>${formattedKey}:</strong> ${formattedValue}`);
-				}
-			}
-		}
-
-		if (metadata.length === 0) {
-			return '<p class="text-muted mb-0">No metadata available for this file.</p>';
-		}
-
-		return `<div class="metadata-list">${metadata.join("<br>")}</div>`;
-	}
-
-	/**
-	 * Get CSRF token for API requests
-	 */
-	getCSRFToken() {
-		const token = document.querySelector("[name=csrfmiddlewaretoken]");
-		return token ? token.value : "";
-	}
-
-	/**
-	 * Load and display file metadata for a specific file in the modal
-	 */
-	async loadFileMetadata(fileUuid, fileName) {
-		const fileMetadataSection = document.getElementById(
-			`file-metadata-${fileUuid}`,
-		);
-		const metadataContent =
-			fileMetadataSection?.querySelector(".metadata-content");
-
-		if (!fileMetadataSection || !metadataContent) return;
-
-		// Toggle visibility
-		if (fileMetadataSection.style.display === "none") {
-			fileMetadataSection.style.display = "block";
-
-			// Check if metadata is already loaded
-			if (metadataContent.innerHTML.includes("Click to load metadata...")) {
-				// Show loading state
-				metadataContent.innerHTML = `
-					<div class="d-flex justify-content-center py-2">
-						<div class="spinner-border spinner-border-sm me-2" role="status">
-							<span class="visually-hidden">Loading...</span>
-						</div>
-						<span class="text-muted">Loading metadata...</span>
-					</div>
-				`;
-
-				try {
-					const response = await fetch(`/api/v1/assets/files/${fileUuid}/`, {
-						method: "GET",
-						headers: {
-							"Content-Type": "application/json",
-							"X-CSRFToken": this.getCSRFToken(),
-						},
-					});
-
-					if (!response.ok) {
-						throw new Error(`HTTP error! status: ${response.status}`);
-					}
-
-					const fileData = await response.json();
-
-					// Format and display the metadata
-					const formattedMetadata = this.formatFileMetadata(fileData);
-					metadataContent.innerHTML = formattedMetadata;
-				} catch (error) {
-					console.error("Error loading file metadata:", error);
-					metadataContent.innerHTML = `
-						<div class="alert alert-warning mb-0">
-							<i class="bi bi-exclamation-triangle me-2"></i>
-							Failed to load metadata for ${ComponentUtils.escapeHtml(fileName)}.
-							<br><small>Error: ${ComponentUtils.escapeHtml(error.message)}</small>
-						</div>
-					`;
-				}
-			}
-		} else {
-			fileMetadataSection.style.display = "none";
-		}
-	}
-}
-
-/**
- * PaginationManager - Handles pagination controls
- */
-class PaginationManager {
-	constructor(config) {
-		this.containerId = config.containerId;
-		this.container = document.getElementById(this.containerId);
-		this.onPageChange = config.onPageChange;
-	}
-
-	update(pagination) {
-		if (!this.container || !pagination) return;
-
-		this.container.innerHTML = "";
-
-		if (pagination.num_pages <= 1) return;
-
-		const ul = document.createElement("ul");
-		ul.className = "pagination justify-content-center";
-
-		// Previous button
-		if (pagination.has_previous) {
-			ul.innerHTML += `
-                <li class="page-item">
-                    <a class="page-link" href="#" data-page="${pagination.number - 1}" aria-label="Previous">
-                        <span aria-hidden="true">&laquo;</span>
-                    </a>
-                </li>
-            `;
-		}
-
-		// Page numbers
-		const startPage = Math.max(1, pagination.number - 2);
-		const endPage = Math.min(pagination.num_pages, pagination.number + 2);
-
-		for (let i = startPage; i <= endPage; i++) {
-			ul.innerHTML += `
-                <li class="page-item ${i === pagination.number ? "active" : ""}">
-                    <a class="page-link" href="#" data-page="${i}">${i}</a>
-                </li>
-            `;
-		}
-
-		// Next button
-		if (pagination.has_next) {
-			ul.innerHTML += `
-                <li class="page-item">
-                    <a class="page-link" href="#" data-page="${pagination.number + 1}" aria-label="Next">
-                        <span aria-hidden="true">&raquo;</span>
-                    </a>
-                </li>
-            `;
-		}
-
-		this.container.appendChild(ul);
-
-		// Add click handlers
-		const links = ul.querySelectorAll("a.page-link");
-		for (const link of links) {
-			link.addEventListener("click", (e) => {
-				e.preventDefault();
-				const page = Number.parseInt(e.target.dataset.page);
-				if (page && this.onPageChange) {
-					this.onPageChange(page);
-				}
-			});
-		}
-	}
-}
-
-// Make classes available globally
-window.ComponentUtils = ComponentUtils;
-window.TableManager = TableManager;
-window.CapturesTableManager = CapturesTableManager;
-window.FilterManager = FilterManager;
-window.SearchManager = SearchManager;
-window.ModalManager = ModalManager;
-window.PaginationManager = PaginationManager;
-
-// Export classes for module use
-if (typeof module !== "undefined" && module.exports) {
-	module.exports = {
-		ComponentUtils,
-		TableManager,
-		CapturesTableManager,
-		FilterManager,
-		SearchManager,
-		ModalManager,
-		PaginationManager,
-	};
-}
-
-// Add custom styles
-const style = document.createElement("style");
-style.textContent = `
-  .edit-name-btn:hover i,
-  .save-name-btn:hover i {
-    color: white !important;
-  }
-
-  /* Hide native clear button in Chrome */
-  input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-`;
-document.head.appendChild(style);
-
-// Global event listener for visualization trigger buttons
-document.addEventListener("DOMContentLoaded", () => {
-	// Initialize VisualizationModal instance if available
-	if (window.VisualizationModal) {
-		window.visualizationModalInstance = new window.VisualizationModal();
-	}
-
-	// Handle clicks on visualization trigger buttons
-	document.addEventListener("click", (e) => {
-		if (e.target.closest(".visualization-trigger-btn")) {
-			const button = e.target.closest(".visualization-trigger-btn");
-			const captureUuid = button.getAttribute("data-capture-uuid");
-			const captureType = button.getAttribute("data-capture-type");
-
-			if (captureUuid && captureType) {
-				// Use the VisualizationModal instance to open with capture data
-				if (window.visualizationModalInstance) {
-					window.visualizationModalInstance.openWithCaptureData(
-						captureUuid,
-						captureType,
-					);
-				}
-			}
-		}
-	});
-});
diff --git a/gateway/sds_gateway/static/js/constants/FileListConfig.js b/gateway/sds_gateway/static/js/constants/FileListConfig.js
new file mode 100644
index 000000000..9dd669c04
--- /dev/null
+++ b/gateway/sds_gateway/static/js/constants/FileListConfig.js
@@ -0,0 +1,21 @@
+/**
+ * File / capture list page constants.
+ * Migrated from deprecated/file-list.js (CONFIG).
+ */
+/** Query params for capture list (ListCapturesView GET). */
+const CAPTURE_LIST_PARAM_SPECS = [
+	{ param: "search", elementId: "search-input" },
+	{ param: "date_start", elementId: "start_date" },
+	{ param: "date_end", elementId: "end_date" },
+	{ param: "min_freq", elementId: "centerFreqMinInput" },
+	{ param: "max_freq", elementId: "centerFreqMaxInput" },
+];
+
+window.FileListConfig = {CAPTURE_LIST_PARAM_SPECS};
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = {
+		FileListConfig: window.FileListConfig,
+		CAPTURE_LIST_PARAM_SPECS,
+	};
+}
diff --git a/gateway/sds_gateway/static/js/constants/PermissionLevels.js b/gateway/sds_gateway/static/js/constants/PermissionLevels.js
index 656a5a338..4fda6ab70 100644
--- a/gateway/sds_gateway/static/js/constants/PermissionLevels.js
+++ b/gateway/sds_gateway/static/js/constants/PermissionLevels.js
@@ -19,6 +19,11 @@ window.PERMISSION_OPTIONS = [
 	window.PermissionLevels.VIEWER,
 ];
 
+/** Levels that can be assigned when sharing with new users (owner is implicit). */
+window.SHARE_PERMISSION_OPTIONS = window.PERMISSION_OPTIONS.filter(
+	(level) => level !== window.PermissionLevels.OWNER,
+);
+
 /**
  * Check if a permission level is valid
  * @param {string} level - The permission level to validate
diff --git a/gateway/sds_gateway/static/js/constants/__tests__/detailsModalConfig.test.js b/gateway/sds_gateway/static/js/constants/__tests__/detailsModalConfig.test.js
new file mode 100644
index 000000000..f78f7ec04
--- /dev/null
+++ b/gateway/sds_gateway/static/js/constants/__tests__/detailsModalConfig.test.js
@@ -0,0 +1,80 @@
+/**
+ * Jest tests for detailsModalConfig registry
+ */
+
+require("../detailsModalConfig.js");
+
+describe("detailsModalConfig", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		document.body.innerHTML = `
+			<div id="asset-details-modal">
+				<h5 id="asset-details-modal-label"></h5>
+				<div id="asset-details-modal-body"></div>
+			</div>
+		`;
+	});
+
+	const registry = () => window.DetailsModalAssetRegistry;
+
+	test("capture buildDetailsUrl uses users details-modal path", () => {
+		expect(registry().capture.buildDetailsUrl("abc-def")).toBe(
+			"/users/details-modal/capture/abc-def/",
+		);
+	});
+
+	test("dataset buildDetailsUrl uses users details-modal path", () => {
+		expect(registry().dataset.buildDetailsUrl("ds-1")).toBe(
+			"/users/details-modal/dataset/ds-1/",
+		);
+	});
+
+	test("capture resolveUuidFromTrigger prefers data-item-uuid", () => {
+		const el = document.createElement("button");
+		el.setAttribute("data-item-uuid", "item");
+		el.setAttribute("data-capture-uuid", "cap");
+		el.setAttribute("data-uuid", "plain");
+		expect(registry().capture.resolveUuidFromTrigger(el)).toBe("item");
+	});
+
+	test("dataset resolveUuidFromTrigger reads row data-dataset-uuid", () => {
+		document.body.innerHTML = `
+			<div id="asset-details-modal">
+				<div id="asset-details-modal-body"></div>
+			</div>
+			<div class="dataset-details-open" data-dataset-uuid="row-uuid">
+				<button class="inner"></button>
+			</div>
+		`;
+		const btn = document.querySelector(".inner");
+		expect(registry().dataset.resolveUuidFromTrigger(btn)).toBe("row-uuid");
+	});
+
+	test("capture resolveShell returns modal body and title elements", () => {
+		const shell = registry().capture.resolveShell();
+		expect(shell.modal.id).toBe("asset-details-modal");
+		expect(shell.bodyEl.id).toBe("asset-details-modal-body");
+		expect(shell.titleEl.id).toBe("asset-details-modal-label");
+	});
+
+	test("capture afterInject calls CaptureDetailsModalBehavior when present", () => {
+		const afterInject = jest.fn();
+		window.CaptureDetailsModalBehavior = { afterInject };
+		const modal = document.getElementById("asset-details-modal");
+		registry().capture.afterInject({ modal, meta: { uuid: "c1" } });
+		expect(afterInject).toHaveBeenCalledWith(
+			expect.objectContaining({ modal, meta: { uuid: "c1" } }),
+		);
+	});
+
+	test("dataset afterInject wires uuid copy on modal", () => {
+		const attachUuidCopyButton = jest.fn();
+		window.DetailsActionManager = { attachUuidCopyButton };
+		const modal = document.getElementById("asset-details-modal");
+		registry().dataset.afterInject({
+			modal,
+			meta: { uuid: "d-99" },
+		});
+		expect(attachUuidCopyButton).toHaveBeenCalledWith(modal, "d-99");
+	});
+});
diff --git a/gateway/sds_gateway/static/js/constants/detailsModalConfig.js b/gateway/sds_gateway/static/js/constants/detailsModalConfig.js
new file mode 100644
index 000000000..75b4d0f5e
--- /dev/null
+++ b/gateway/sds_gateway/static/js/constants/detailsModalConfig.js
@@ -0,0 +1,84 @@
+/**
+ * Registry for details modal loading (asset type → URLs + trigger resolution).
+ * ModalManager reads window.DetailsModalAssetRegistry — no branching on asset type there.
+ */
+(function attachDetailsModalAssetRegistry(global) {
+	function resolveAssetDetailsShell() {
+		const modal = document.getElementById("asset-details-modal");
+		if (!modal) return null;
+		return {
+			modal,
+			titleEl:
+				document.getElementById("asset-details-modal-label") ||
+				modal.querySelector(".modal-title"),
+			bodyEl:
+				document.getElementById("asset-details-modal-body") ||
+				modal.querySelector(".modal-body"),
+		};
+	}
+
+	const capture = {
+		assetType: "capture",
+		delegateClickSelectors: [
+			".capture-details-btn",
+			".capture-link",
+			".view-capture-btn",
+		],
+		buildDetailsUrl(uuid) {
+			return `/users/details-modal/capture/${encodeURIComponent(uuid)}/`;
+		},
+		resolveUuidFromTrigger(el) {
+			if (!el) return "";
+			return (
+				el.getAttribute("data-item-uuid") ||
+				el.getAttribute("data-capture-uuid") ||
+				el.getAttribute("data-uuid") ||
+				""
+			);
+		},
+		resolveShell() {
+			return resolveAssetDetailsShell();
+		},
+		afterInject(ctx) {
+			if (window.CaptureDetailsModalBehavior?.afterInject) {
+				window.CaptureDetailsModalBehavior.afterInject(ctx);
+			}
+		},
+		loadingTitle: "Loading capture details...",
+	};
+
+	const dataset = {
+		assetType: "dataset",
+		delegateClickSelectors: [".dataset-details-open"],
+		buildDetailsUrl(uuid) {
+			return `/users/details-modal/dataset/${encodeURIComponent(uuid)}/`;
+		},
+		resolveUuidFromTrigger(el) {
+			if (!el) return "";
+			const row = el.closest?.(".dataset-details-open");
+			const src = row || el;
+			return (
+				src.getAttribute("data-dataset-uuid") ||
+				src.getAttribute("data-item-uuid") ||
+				""
+			);
+		},
+		resolveShell() {
+			return resolveAssetDetailsShell();
+		},
+		afterInject(ctx) {
+			if (window.DetailsActionManager?.attachUuidCopyButton) {
+				window.DetailsActionManager.attachUuidCopyButton(
+					ctx.modal,
+					ctx.meta?.uuid,
+				);
+			}
+		},
+		loadingTitle: "Loading dataset details...",
+	};
+
+	global.DetailsModalAssetRegistry = {
+		capture,
+		dataset,
+	};
+})(typeof window !== "undefined" ? window : globalThis);
diff --git a/gateway/sds_gateway/static/js/core/APIClient.js b/gateway/sds_gateway/static/js/core/APIClient.js
index bb20678da..aa2bceafa 100644
--- a/gateway/sds_gateway/static/js/core/APIClient.js
+++ b/gateway/sds_gateway/static/js/core/APIClient.js
@@ -130,6 +130,20 @@ class APIClient {
 		return this.request(urlObj.toString(), { method: "GET" }, loadingState);
 	}
 
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @returns {FormData}
+	 */
+	_formDataFromObject(data) {
+		const formData = new FormData();
+		for (const [key, value] of Object.entries(data)) {
+			if (value !== null && value !== undefined) {
+				formData.append(key, value);
+			}
+		}
+		return formData;
+	}
+
 	/**
 	 * Make POST request
 	 * @param {string} url - Request URL
@@ -153,12 +167,7 @@ class APIClient {
 			);
 		}
 
-		const formData = new FormData();
-		for (const [key, value] of Object.entries(data)) {
-			if (value !== null && value !== undefined) {
-				formData.append(key, value);
-			}
-		}
+		const formData = this._formDataFromObject(data);
 
 		return this.request(
 			url,
@@ -178,12 +187,7 @@ class APIClient {
 	 * @returns {Promise<Object>} Response data
 	 */
 	async patch(url, data = {}, loadingState = null) {
-		const formData = new FormData();
-		for (const [key, value] of Object.entries(data)) {
-			if (value !== null && value !== undefined) {
-				formData.append(key, value);
-			}
-		}
+		const formData = this._formDataFromObject(data);
 
 		return this.request(
 			url,
@@ -203,12 +207,7 @@ class APIClient {
 	 * @returns {Promise<Object>} Response data
 	 */
 	async put(url, data = {}, loadingState = null) {
-		const formData = new FormData();
-		for (const [key, value] of Object.entries(data)) {
-			if (value !== null && value !== undefined) {
-				formData.append(key, value);
-			}
-		}
+		const formData = this._formDataFromObject(data);
 
 		return this.request(
 			url,
@@ -299,9 +298,19 @@ class ListRefreshManager {
 	 * @returns {Promise<string>} HTML content of the table
 	 */
 	async loadTable(params = {}, options = {}) {
-		const { page = 1, sort_by = "created_at", sort_order = "desc" } = params;
-
-		const { showLoading = true, onSuccess = null, onError = null } = options;
+		const {
+			showLoading = true,
+			onSuccess = null,
+			onError = null,
+			loadingMessage = null,
+		} = options;
+
+		const queryParams = {
+			page: 1,
+			sort_by: "created_at",
+			sort_order: "desc",
+			...params,
+		};
 
 		// Validate container exists
 		if (!this.container) {
@@ -315,24 +324,18 @@ class ListRefreshManager {
 
 		// Show loading state if requested
 		if (showLoading) {
-			await window.DOMUtils?.renderLoading(
-				this.container,
-				"Loading datasets...",
-				{ format: "spinner", size: "sm" },
-			).catch(() => {
-				// Fallback if DOMUtils is not available
-				this.container.innerHTML =
-					'<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>Loading...</div>';
+			const msg =
+				loadingMessage ||
+				`Loading ${this.itemType ? `${this.itemType} ` : ""}list...`;
+			await window.DOMUtils.renderLoading(this.container, msg, {
+				format: "spinner",
+				size: "sm",
 			});
 		}
 
 		try {
 			// Make GET request with query parameters
-			const html = await window.APIClient.get(this.url, {
-				page: page,
-				sort_by: sort_by,
-				sort_order: sort_order,
-			});
+			const html = await window.APIClient.get(this.url, queryParams);
 
 			// Update container(s) with HTML response
 			if (typeof html === "string") {
@@ -348,8 +351,7 @@ class ListRefreshManager {
 
 				this.container.innerHTML = tableHtml;
 
-				// Re-initialize any necessary event listeners after update
-				this._reinitializeEventListeners();
+				await this._reinitializeEventListeners();
 
 				// Call success callback if provided
 				if (onSuccess) {
@@ -363,14 +365,15 @@ class ListRefreshManager {
 			console.error(`Error loading ${this.itemType} list table:`, error);
 
 			// Show error state
-			await window.DOMUtils?.renderError(
-				this.container,
+			await window.DOMUtils.showMessage(
 				`Failed to load ${this.itemType} list. Please try again.`,
-				{ format: "alert" },
-			).catch(() => {
-				// Fallback if DOMUtils is not available
-				this.container.innerHTML = `<div class="alert alert-danger">Failed to load ${this.itemType} list. Please refresh the page.</div>`;
-			});
+				{
+					variant: "danger",
+					placement: "replace",
+					target: this.container,
+					presentation: "alert",
+				},
+			);
 
 			// Call error callback if provided
 			if (onError) {
@@ -385,12 +388,15 @@ class ListRefreshManager {
 	 * Re-initialize event listeners after table update
 	 * This ensures modals, dropdowns, and other interactive elements work after AJAX updates
 	 */
-	_reinitializeEventListeners() {
+	async _reinitializeEventListeners() {
 		// Re-initialize Bootstrap dropdowns
 		if (typeof bootstrap !== "undefined" && bootstrap.Dropdown) {
-			window.DOMUtils.initializeListDropdowns();
+			window.DOMUtils.initIconDropdowns(this.container ?? document);
 		}
 
+		// Bootstrap modal instances on replaced markup (share/version/download shells)
+		window.ModalManager?.initializeModal?.({ bootstrap: true, root: document });
+
 		// Re-initialize tooltips if Bootstrap tooltips are available
 		if (typeof bootstrap !== "undefined" && bootstrap.Tooltip) {
 			for (const element of document.querySelectorAll(
@@ -407,12 +413,12 @@ class ListRefreshManager {
 			}
 		}
 
-		// Trigger page lifecycle manager re-initialization if available
-		if (window.pageLifecycleManager) {
-			// The PageLifecycleManager should handle modal re-initialization
-			// You may need to call a refresh method if it exists
-			if (typeof window.pageLifecycleManager.refresh === "function") {
-				window.pageLifecycleManager.refresh();
+		// Page lifecycle: full re-init so ShareActionManager / VersioningActionManager re-bind
+		if (window.pageLifecycleManager?.refresh) {
+			try {
+				await window.pageLifecycleManager.refresh();
+			} catch (error) {
+				console.error("PageLifecycleManager.refresh failed after list update:", error);
 			}
 		}
 	}
@@ -431,5 +437,7 @@ if (typeof module !== "undefined" && module.exports) {
 		APIClient,
 		APIError,
 		LoadingStateManager,
+		ListRefreshManager,
+		LIST_REFRESH_SEP,
 	};
 }
diff --git a/gateway/sds_gateway/static/js/core/BaseManager.js b/gateway/sds_gateway/static/js/core/BaseManager.js
new file mode 100644
index 000000000..a2f3b5fcb
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/BaseManager.js
@@ -0,0 +1,191 @@
+/**
+ * Base class for UI managers: shared services, toast helpers, lifecycle hooks.
+ */
+BaseManager = class {
+	constructor() {
+		this.showMessage = window.DOMUtils?.showMessage;
+		this.getCSRFToken = window.APIClient?.getCSRFToken;
+		this.logError = window.DOMUtils?.logError;
+		this.getUserFriendlyErrorMessage =
+			window.DOMUtils?.getUserFriendlyErrorMessage;
+
+		this.successMessage = (message) =>
+			this.showMessage?.(message, {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
+
+		this.errorMessage = (message) =>
+			this.showMessage?.(message, {
+				variant: "danger",
+				placement: "toast",
+				presentation: "toast",
+			});
+
+		this.warningMessage = (message) =>
+			this.showMessage?.(message, {
+				variant: "warning",
+				placement: "toast",
+				presentation: "toast",
+			});
+
+		this.infoMessage = (message) =>
+			this.showMessage?.(message, {
+				variant: "info",
+				placement: "toast",
+				presentation: "toast",
+			});
+
+		if (!this.checkBrowserSupport()) {
+			void window.DOMUtils?.showMessage(
+				"Your browser doesn't support required features. Please use a modern browser.",
+				{
+					variant: "danger",
+					placement: "toast",
+					log: true,
+					error: new Error("Browser compatibility check failed"),
+					triggeredBy: document.body,
+				},
+			);
+			return;
+		}
+	}
+
+	/**
+	 * Override in subclasses that require feature detection (e.g. uploads).
+	 * @returns {boolean}
+	 */
+	checkBrowserSupport() {
+		return true;
+	}
+
+	/**
+	 * Normalize semantic type and show a toast via {@link DOMUtils.showMessage}.
+	 * @param {string} message
+	 * @param {string} [type]
+	 */
+	showToast(message, type = "success") {
+		const variant =
+			type === "danger" || type === "error"
+				? "danger"
+				: type === "warning" || type === "success" || type === "info"
+					? type
+					: "info";
+		if (this.showMessage) {
+			void this.showMessage(message, {
+				variant,
+				placement: "toast",
+				presentation: "toast",
+			});
+		} else if (window.DOMUtils?.showMessage) {
+			void window.DOMUtils.showMessage(message, {
+				variant,
+				placement: "toast",
+				presentation: "toast",
+			});
+		} else {
+			console.error("DOMUtils.showMessage not available");
+		}
+	}
+
+	/**
+	 * Danger toast with optional error logging (uses {@link DOMUtils.showMessage} options).
+	 * @param {string} message
+	 * @param {Element|string|null} [contextOrTrigger] - element for log context
+	 * @param {Error|null} [error]
+	 */
+	showErrorToast(message, contextOrTrigger = null, error = null) {
+		const triggeredBy =
+			contextOrTrigger instanceof Element ? contextOrTrigger : null;
+		const opts = {
+			variant: "danger",
+			placement: "toast",
+			presentation: "toast",
+			log: Boolean(error),
+			error: error || null,
+			triggeredBy,
+		};
+		if (this.showMessage) {
+			void this.showMessage(message, opts);
+		} else if (window.DOMUtils?.showMessage) {
+			void window.DOMUtils.showMessage(message, opts);
+		}
+	}
+
+	/**
+	 * Server-rendered message inside a container ({@link DOMUtils.showMessage} replace).
+	 * @param {string} message
+	 * @param {Element|string|null} target
+	 * @param {object} [opts]
+	 * @param {string} [opts.variant='danger']
+	 * @param {string} [opts.presentation='alert']
+	 * @param {object} [opts.templateContext]
+	 * @returns {Promise<boolean|void>}
+	 */
+	showMessageInTarget(message, target, opts = {}) {
+		const {
+			variant = "danger",
+			presentation = "alert",
+			templateContext = {},
+		} = opts;
+		const el =
+			typeof target === "string" ? document.querySelector(target) : target;
+		if (!el) {
+			return Promise.resolve(false);
+		}
+		const alertType =
+			variant === "error" || variant === "danger"
+				? "danger"
+				: variant === "success" ||
+					  variant === "warning" ||
+					  variant === "info"
+					? variant
+					: "danger";
+		const show = this.showMessage || window.DOMUtils?.showMessage;
+		if (!show) {
+			return Promise.resolve(false);
+		}
+		const fn =
+			show === window.DOMUtils?.showMessage
+				? window.DOMUtils.showMessage.bind(window.DOMUtils)
+				: show.bind(this);
+		return fn(message, {
+			variant: alertType === "danger" ? "danger" : variant,
+			placement: "replace",
+			target: el,
+			presentation,
+			templateContext: {
+				...(presentation === "alert" ? { alert_type: alertType } : {}),
+				...templateContext,
+			},
+		});
+	}
+
+	initialize() {
+		this.initializeEventListeners();
+	}
+
+	initializeEventListeners() {
+		// Subclasses override
+	}
+
+	addEventListener(element, event, handler) {
+		element.addEventListener(event, handler);
+	}
+
+	removeEventListener(element, event, handler) {
+		element.removeEventListener(event, handler);
+	}
+
+	cleanup() {
+		// Subclasses override
+	}
+};
+
+if (typeof window !== "undefined") {
+	window.BaseManager = BaseManager;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { BaseManager };
+}
diff --git a/gateway/sds_gateway/static/js/core/DOMUtils.js b/gateway/sds_gateway/static/js/core/DOMUtils.js
index 8597e64c1..ea6be4e41 100644
--- a/gateway/sds_gateway/static/js/core/DOMUtils.js
+++ b/gateway/sds_gateway/static/js/core/DOMUtils.js
@@ -1,6 +1,6 @@
 /**
  * DOM Utility Functions
- * Provides basic DOM manipulation utilities (show, hide, showAlert)
+ * Provides basic DOM manipulation utilities
  *
  * NOTE: This class does NOT generate HTML from user data.
  * All HTML containing server data should be rendered server-side using Django templates.
@@ -9,7 +9,17 @@
  * - formatFileSize(bytes) - Format file size
  * - show(element, displayClass) - Show element with CSS class
  * - hide(element, displayClass) - Hide element with CSS class
- * - showAlert(message, type) - Show Bootstrap toast notification
+ * - showMessage(message, opts) - User-visible messages (toast / inline) via Django template
+ * - showVisualizationPanel(message, detailLine, opts) - Spectrogram/waterfall status panel
+ * - hideVisualizationPanel(target) - Hide visualization status/error panel
+ * - logError(error, triggeredBy) - Log error to console
+ * - getUserFriendlyErrorMessage(error) - Get user-friendly error message
+ * - initIconDropdowns(root) - Initialize icon dropdowns
+ * - renderContent(container, options) - Render content using Django template
+ * - renderTable(container, rows, options) - Render table rows using Django template
+ * - renderSelectOptions(selectElement, choices, currentValue) - Render select options using Django template
+ * - renderPagination(container, pagination) - Render pagination using Django template
+ * - renderDropdown(options) - Render dropdown menu using Django template
  */
 class DOMUtils {
 	/**
@@ -66,194 +76,334 @@ class DOMUtils {
 	}
 
 	/**
-	 * Show global toast notification
-	 * Renders toast using Django template toast.html
-	 * @param {string} message - Toast message
-	 * @param {string} type - Toast type (success, error, warning, info)
+	 * Remove alert elements inside a container (e.g. modal body).
+	 * @param {Element|string} target
 	 */
-	async showAlert(message, type = "success") {
-		const toastContainer = document.getElementById("toast-container");
-		if (!toastContainer) {
-			console.warn("Toast container not found");
-			return;
+	clearAlerts(target) {
+		const el =
+			typeof target === "string" ? document.querySelector(target) : target;
+		if (!el) return;
+		for (const alert of el.querySelectorAll(".alert")) {
+			alert.remove();
 		}
+	}
+
+	formatDate(dateString) {
+		if (!dateString) return "<div>-</div>";
+
+		let date;
+		if (typeof dateString === "string") {
+			date = new Date(dateString);
+		} else {
+			date = new Date(dateString);
+		}
+
+		if (!date || Number.isNaN(date.getTime())) {
+			return "<div>-</div>";
+		}
+
+		const month = String(date.getMonth() + 1).padStart(2, "0");
+		const day = String(date.getDate()).padStart(2, "0");
+		const year = date.getFullYear();
+		const hours = date.getHours();
+		const minutes = String(date.getMinutes()).padStart(2, "0");
+		const seconds = String(date.getSeconds()).padStart(2, "0");
+		const ampm = hours >= 12 ? "PM" : "AM";
+		const displayHours = hours % 12 || 12;
 
-		const toastId = `toast-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+		return `<div>${month}/${day}/${year}</div><small class="text-muted">${displayHours}:${minutes}:${seconds} ${ampm}</small>`;
+	}
+
+	formatDateForModal(dateString) {
+		if (!dateString || dateString === "None") {
+			return "N/A";
+		}
 
 		try {
-			// Render toast using Django template
+			const date = new Date(dateString);
+			if (Number.isNaN(date.getTime())) {
+				return "N/A";
+			}
+
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, "0");
+			const day = String(date.getDate()).padStart(2, "0");
+			const dateFormatted = `${year}-${month}-${day}`;
+
+			const hours = String(date.getHours()).padStart(2, "0");
+			const minutes = String(date.getMinutes()).padStart(2, "0");
+			const seconds = String(date.getSeconds()).padStart(2, "0");
+			const timezone = date
+				.toLocaleTimeString("en-US", { timeZoneName: "short" })
+				.split(" ")[1];
+			const timeFormatted = `${hours}:${minutes}:${seconds} ${timezone}`;
+
+			return `<span class="bg-transparent pe-2">${dateFormatted}</span><span class="text-muted bg-transparent">${timeFormatted}</span>`;
+		} catch (error) {
+			console.error("Error formatting capture date:", error);
+			return "N/A";
+		}
+	}
+
+	formatDateSimple(dateString) {
+		try {
+			const date = new Date(dateString);
+			return date.toString() !== "Invalid Date"
+				? date.toLocaleDateString("en-US", {
+						month: "2-digit",
+						day: "2-digit",
+						year: "numeric",
+					})
+				: "";
+		} catch (_e) {
+			return "";
+		}
+	}
+
+	/**
+	 * Unified user-visible messaging (server-rendered HTML).
+	 * @param {string} message
+	 * @param {object} [opts]
+	 * @param {'success'|'error'|'warning'|'info'|'danger'} [opts.variant='info'] - danger maps like Bootstrap
+	 * @param {'toast'|'replace'|'append'} [opts.placement='toast']
+	 * @param {Element|string|null} [opts.target] - for replace/append (selector or element)
+	 * @param {'toast'|'inline'|'alert'|'list'|'table'|'visualization_panel'} [opts.presentation='toast'] - must match template branches
+	 * @param {object} [opts.templateContext] - extra keys passed to Django (error_list, colspan, icon, …)
+	 * @param {Error|null} [opts.error] - error object to log
+	 * @param {Element|string|null} [opts.triggeredBy] - element to log error for
+	 * @param {boolean} [opts.log] - log error to console
+	 * @param {boolean} [opts.autoRemove] - for ephemeral modal alerts (timeout ms in opts.autoRemoveMs)
+	 * @param {number} [opts.autoRemoveMs] - timeout ms for auto removal of ephemeral modal alerts
+	 */
+	async showMessage(message, opts = {}) {
+		try {
+			const {
+				variant = "info",
+				placement = "toast",
+				target = null,
+				presentation = placement === "toast" ? "toast" : "alert",
+				templateContext = {},
+				error = null,
+				triggeredBy = null,
+				log = false,
+				autoRemove = false,
+				autoRemoveMs = 4000,
+			} = opts;
+
+			const type =
+				variant === "danger" || variant === "error" ? "error" : variant;
+
+			if (log && error) {
+				this.logError(error, triggeredBy);
+			}
+
+			const context = {
+				message: message ?? "",
+				type,
+				presentation, // toast | inline | alert | list | table
+				...templateContext,
+			};
+
 			const response = await window.APIClient.post(
 				"/users/render-html/",
 				{
-					template: "users/components/toast.html",
-					context: {
-						message: message,
-						type: type,
-					},
+					template: "users/components/message.html",
+					context,
 				},
 				null,
 				true,
-			); // true = send as JSON
+			);
 
-			if (!response.html) {
-				console.error("No HTML returned from toast template");
-				return;
+			if (!response?.html) {
+				console.error("showMessage: no HTML from render-html");
+				return false;
 			}
 
-			// Create a temporary container to parse the HTML
-			const tempDiv = document.createElement("div");
-			tempDiv.innerHTML = response.html;
-			const toastDiv = tempDiv.firstElementChild;
-
-			if (!toastDiv) {
-				console.error("Failed to parse toast HTML");
-				return;
+			const wrap = document.createElement("div");
+			wrap.innerHTML = response.html;
+			const node = wrap.firstElementChild;
+			if (!node) {
+				console.error("showMessage: failed to parse message HTML");
+				return false;
 			}
 
-			// Set unique ID for the toast
-			toastDiv.id = toastId;
+			if (placement === "toast") {
+				const toastHost = document.getElementById("toast-container");
+				const BS = window.bootstrap;
+				if (!toastHost || !BS?.Toast) {
+					console.error(
+						"showMessage: toast container or Bootstrap Toast not available",
+					);
+					return false;
+				}
+				node.id =
+					node.id ||
+					`toast-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+				toastHost.appendChild(node);
+				const t = new BS.Toast(node);
+				t.show();
+				node.addEventListener("hidden.bs.toast", () => node.remove());
+				return true;
+			}
 
-			// Append to toast container
-			toastContainer.appendChild(toastDiv);
+			const el =
+				typeof target === "string" ? document.querySelector(target) : target;
+			if (!el) {
+				console.warn("showMessage: target not found:", target);
+				return false;
+			}
 
-			// Initialize and show Bootstrap toast
-			if (!window.bootstrap || !bootstrap.Toast) {
-				console.error("Bootstrap not available");
-				return;
+			if (placement === "append") {
+				el.insertBefore(node, el.firstChild);
+			} else if (placement === "replace") {
+				el.innerHTML = "";
+				el.appendChild(node);
 			}
 
-			const toast = new bootstrap.Toast(toastDiv);
-			toast.show();
-			toastDiv.addEventListener("hidden.bs.toast", () => toastDiv.remove());
-		} catch (error) {
-			console.error("Error rendering toast template:", error);
+			if (autoRemove && presentation === "alert") {
+				setTimeout(() => node.remove(), autoRemoveMs);
+			}
+			return true;
+		} catch (err) {
+			console.error("showMessage failed:", err);
+			return false;
 		}
 	}
 
 	/**
-	 * Show modal loading state
-	 * @param {string} modalId - Modal ID
+	 * Server-rendered message in #visualizationErrorDisplay (or custom target).
+	 * @param {string} message
+	 * @param {string|null} [detailLine]
+	 * @param {object} [opts]
+	 * @param {Element|string} [opts.target='#visualizationErrorDisplay']
+	 * @param {'success'|'error'|'warning'|'info'|'danger'} [opts.variant='info']
+	 * @param {() => void} [opts.beforeShow]
 	 */
-	async showModalLoading(modalId) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
-
-		const modalBody = modal.querySelector(".modal-body");
-		if (modalBody) {
-			// Store original content before showing loading
-			if (!modalBody.dataset.originalContent) {
-				modalBody.dataset.originalContent = modalBody.innerHTML;
-			}
+	async showVisualizationPanel(message, detailLine = null, opts = {}) {
+		const {
+			target = "#visualizationErrorDisplay",
+			variant = "info",
+			beforeShow,
+		} = opts;
 
-			await this.renderLoading(modalBody, "Loading modal...", {
-				format: "modal",
-			});
+		const el =
+			typeof target === "string" ? document.querySelector(target) : target;
+		if (!el) {
+			console.warn("showVisualizationPanel: target not found:", target);
+			return false;
 		}
-	}
 
-	/**
-	 * Clear modal loading state and restore original content
-	 * @param {string} modalId - Modal ID
-	 */
-	clearModalLoading(modalId) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
+		beforeShow?.();
+
+		const ok = await this.showMessage(message ?? "", {
+			variant,
+			placement: "replace",
+			target: el,
+			presentation: "visualization_panel",
+			templateContext: { detail_line: detailLine || "" },
+		});
 
-		const modalBody = modal.querySelector(".modal-body");
-		if (modalBody?.dataset.originalContent) {
-			// Restore original content
-			modalBody.innerHTML = modalBody.dataset.originalContent;
-			// Clean up the stored content
-			delete modalBody.dataset.originalContent;
+		if (ok) {
+			el.classList.remove("d-none");
 		}
+		return ok;
 	}
 
 	/**
-	 * Show modal error
-	 * @param {string} modalId - Modal ID
-	 * @param {string} message - Error message
+	 * @param {Element|string} [target='#visualizationErrorDisplay']
 	 */
-	async showModalError(modalId, message) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
-
-		const modalBody = modal.querySelector(".modal-body");
-		if (modalBody) {
-			await this.renderError(modalBody, message, {
-				format: "alert",
-				alert_type: "danger",
-				icon: "exclamation-triangle",
-			});
+	hideVisualizationPanel(target = "#visualizationErrorDisplay") {
+		const el =
+			typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			el.classList.add("d-none");
 		}
-
-		// Show modal even with error
-		this.openModal(modalId);
 	}
 
-	/**
-	 * Open modal
-	 * @param {string} modalId - Modal ID
-	 */
-	openModal(modalId) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
+	logError(error, triggeredBy = null) {
+		console.error(
+			triggeredBy ? triggeredBy : "",
+			this.getUserFriendlyErrorMessage(error),
+		);
+	}
 
-		// Check if modal instance already exists
-		let bootstrapModal = bootstrap.Modal.getInstance(modal);
+	getUserFriendlyErrorMessage(error, context = "") {
+		if (!error) return "An unexpected error occurred";
 
-		// If instance exists but is in a bad state (no _config), dispose and recreate
+		if (error.name === "TypeError" && error.message.includes("Cannot read")) {
+			return "Configuration error: Some components are not properly loaded";
+		}
+		if (error.name === "TypeError" && error.message.includes("JSON")) {
+			return "Invalid response format: Please try again or contact support";
+		}
+		if (error.name === "ReferenceError") {
+			return "Component error: Required functionality is not available";
+		}
+		if (error.name === "NetworkError" || error.message.includes("fetch")) {
+			return "Network error: Please check your connection and try again";
+		}
+		if (error.message.includes("403") || error.message.includes("Forbidden")) {
+			return "Access denied: You don't have permission to perform this action";
+		}
+		if (error.message.includes("404") || error.message.includes("Not Found")) {
+			const fileContext =
+				context === "upload-handler" ||
+				context === "file-preview" ||
+				String(context).includes("upload");
+			return fileContext
+				? "Resource not found: The requested file or directory may have been moved or deleted"
+				: "Resource not found: The requested asset may have been moved or deleted";
+		}
 		if (
-			bootstrapModal &&
-			(!bootstrapModal._config || !bootstrapModal._config.backdrop)
+			error.message.includes("500") ||
+			error.message.includes("Internal Server Error")
 		) {
-			try {
-				bootstrapModal.dispose();
-				bootstrapModal = null;
-			} catch (_e) {
-				// If disposal fails, force remove the instance
-				bootstrapModal = null;
-			}
-		}
-
-		// If no instance exists, create one with default config
-		if (!bootstrapModal) {
-			bootstrapModal = new bootstrap.Modal(modal, {
-				backdrop: true,
-				keyboard: true,
-				focus: true,
-			});
+			return "Server error: Please try again later or contact support";
 		}
 
-		bootstrapModal.show();
+		return error.message || "An unexpected error occurred";
 	}
 
 	/**
-	 * Close modal
-	 * @param {string} modalId - Modal ID
+	 * Bootstrap icon action menus: dispose/recreate instances; global listeners once.
+	 * @param {ParentNode} [root]
 	 */
-	closeModal(modalId) {
-		const modal = document.getElementById(modalId);
-		if (!modal) return;
+	initIconDropdowns(root = document) {
+		if (typeof bootstrap === "undefined" || !bootstrap.Dropdown) {
+			return;
+		}
 
-		const bootstrapModal = bootstrap.Modal.getInstance(modal);
-		if (!bootstrapModal) return;
+		if (!this._iconDropdownShowDelegated) {
+			this._iconDropdownShowDelegated = true;
+			document.addEventListener("show.bs.dropdown", (e) => {
+				const toggle = e.target?.closest?.(".btn-icon-dropdown");
+				if (!toggle) return;
+				const dropdownMenu = toggle.nextElementSibling;
+				if (dropdownMenu?.classList.contains("dropdown-menu")) {
+					document.body.appendChild(dropdownMenu);
+				}
+			});
+		}
 
-		bootstrapModal.hide();
-	}
+		if (!this._dropdownStopRowClickBound) {
+			this._dropdownStopRowClickBound = true;
+			document.addEventListener("click", (event) => {
+				if (
+					event.target.closest(".dropdown") ||
+					event.target.closest(".btn-icon-dropdown") ||
+					event.target.closest(".dropdown-toggle") ||
+					event.target.closest(".dropdown-menu")
+				) {
+					event.stopPropagation();
+				}
+			});
+		}
 
-	/**
-	 * Refresh list
-	 * @param {string} itemType - Item type (dataset, file, capture)
-	 */
-	initializeListDropdowns() {
-		for (const toggle of document.querySelectorAll(".btn-icon-dropdown")) {
-			// Dispose existing dropdown if any
+		for (const toggle of root.querySelectorAll(".btn-icon-dropdown")) {
 			const existing = bootstrap.Dropdown.getInstance(toggle);
 			if (existing) {
 				existing.dispose();
 			}
-
-			// Create new dropdown instance
 			new bootstrap.Dropdown(toggle, {
 				container: "body",
 				boundary: "viewport",
@@ -268,83 +418,6 @@ class DOMUtils {
 					],
 				},
 			});
-
-			// Manually move dropdown to body when shown
-			toggle.addEventListener("show.bs.dropdown", () => {
-				const dropdownMenu = toggle.nextElementSibling;
-				if (dropdownMenu?.classList.contains("dropdown-menu")) {
-					document.body.appendChild(dropdownMenu);
-				}
-			});
-		}
-
-		// Prevent row click when clicking on dropdown elements
-		document.addEventListener("click", (event) => {
-			if (
-				event.target.closest(".dropdown") ||
-				event.target.closest(".btn-icon-dropdown") ||
-				event.target.closest(".dropdown-toggle") ||
-				event.target.closest(".dropdown-menu")
-			) {
-				event.stopPropagation();
-			}
-		});
-	}
-
-	/**
-	 * Render error using Django template
-	 * @param {Element|string} container - Container element or selector
-	 * @param {string} message - Error message
-	 * @param {Object} options - Additional options (format, colspan, error_list, etc.)
-	 * @returns {Promise<boolean>} Success status
-	 */
-	async renderError(container, message, options = {}) {
-		const el =
-			typeof container === "string"
-				? document.querySelector(container)
-				: container;
-		if (!el) {
-			console.warn("Container not found for renderError:", container);
-			return false;
-		}
-
-		const context = {
-			message: message,
-			format: options.format || "inline",
-			...options,
-		};
-
-		try {
-			const response = await window.APIClient.post(
-				"/users/render-html/",
-				{
-					template: "users/components/error.html",
-					context: context,
-				},
-				null,
-				true,
-			); // true = send as JSON
-
-			if (response.html) {
-				el.innerHTML = response.html;
-				return true;
-			}
-			return false;
-		} catch (error) {
-			console.error("Error rendering error template:", error);
-			// Fallback based on format
-			if (context.format === "table") {
-				el.innerHTML = `<tr><td colspan="${context.colspan || 5}" class="text-center text-danger">${message}</td></tr>`;
-			} else if (context.format === "alert") {
-				// For alert format, use showAlert instead of creating alert directly
-				this.showAlert(message, "error");
-				return true;
-			} else if (context.format === "list") {
-				el.innerHTML = `<ul class="mb-0 list-unstyled"><li class="text-danger">${message}</li></ul>`;
-			} else {
-				el.innerHTML = `<span class="text-danger">${message}</span>`;
-			}
-			return false;
 		}
 	}
 
@@ -391,9 +464,6 @@ class DOMUtils {
 			return false;
 		} catch (error) {
 			console.error("Error rendering loading template:", error);
-			// Fallback
-			const sizeClass = context.size === "sm" ? "spinner-border-sm" : "";
-			el.innerHTML = `<span class="spinner-border ${sizeClass} text-${context.color}" role="status"><span class="visually-hidden">${text}</span></span> ${text}`;
 			return false;
 		}
 	}
@@ -432,17 +502,6 @@ class DOMUtils {
 			return false;
 		} catch (error) {
 			console.error("Error rendering content template:", error);
-			// Fallback
-			const iconHtml = options.icon
-				? `<i class="bi bi-${options.icon}${options.color ? ` text-${options.color}` : ""}"></i>`
-				: "";
-			const textHtml = options.text || "";
-			const spacing =
-				options.spacing !== false && iconHtml && textHtml ? " " : "";
-			el.innerHTML =
-				options.icon_position === "right"
-					? `${textHtml}${spacing}${iconHtml}`
-					: `${iconHtml}${spacing}${textHtml}`;
 			return false;
 		}
 	}
@@ -464,19 +523,27 @@ class DOMUtils {
 			return false;
 		}
 
+		const {
+			template = "users/components/table_rows.html",
+			empty_message = "No items found",
+			colspan,
+			empty_colspan,
+			...rest
+		} = options;
+
 		const context = {
 			rows: rows,
-			empty_message: options.empty_message || "No items found",
-			empty_colspan: options.colspan || options.empty_colspan || 5,
-			...options,
+			empty_message,
+			empty_colspan: colspan || empty_colspan || 5,
+			...rest,
 		};
 
 		try {
 			const response = await window.APIClient.post(
 				"/users/render-html/",
 				{
-					template: "users/components/table_rows.html",
-					context: context,
+					template,
+					context,
 				},
 				null,
 				true,
@@ -489,8 +556,6 @@ class DOMUtils {
 			return false;
 		} catch (error) {
 			console.error("Error rendering table template:", error);
-			// Fallback
-			el.innerHTML = `<tr><td colspan="${context.empty_colspan}" class="text-center text-muted">${context.empty_message}</td></tr>`;
 			return false;
 		}
 	}
@@ -550,13 +615,6 @@ class DOMUtils {
 			return false;
 		} catch (error) {
 			console.error("Error rendering select options template:", error);
-			// Fallback
-			el.innerHTML = formattedChoices
-				.map(
-					(choice) =>
-						`<option value="${choice.value}"${choice.selected ? " selected" : ""}>${choice.label}</option>`,
-				)
-				.join("");
 			return false;
 		}
 	}
@@ -622,8 +680,6 @@ class DOMUtils {
 			return false;
 		} catch (error) {
 			console.error("Error rendering pagination template:", error);
-			// Fallback: show nothing rather than broken pagination
-			el.innerHTML = "";
 			return false;
 		}
 	}
@@ -658,16 +714,7 @@ class DOMUtils {
 			return null;
 		} catch (error) {
 			console.error("Error rendering dropdown template:", error);
-			// Fallback to basic dropdown
-			const items = context.items
-				.map((item) => {
-					const icon = item.icon
-						? `<i class="bi bi-${item.icon} me-1"></i>`
-						: "";
-					return `<li><button type="button" class="dropdown-item">${icon}${item.label}</button></li>`;
-				})
-				.join("");
-			return `<div class="dropdown"><button class="btn ${context.button_class} dropdown-toggle" type="button" data-bs-toggle="dropdown"><i class="bi bi-${context.button_icon}"></i></button><ul class="dropdown-menu">${items}</ul></div>`;
+			return null;
 		}
 	}
 }
@@ -675,8 +722,7 @@ class DOMUtils {
 // Create global instance
 window.DOMUtils = new DOMUtils();
 
-// Also expose showAlert as global function for convenience
-window.showAlert = window.DOMUtils.showAlert.bind(window.DOMUtils);
+window.showMessage = window.DOMUtils.showMessage.bind(window.DOMUtils);
 
 // Export for ES6 modules (Jest testing) - only if in module context
 if (typeof module !== "undefined" && module.exports) {
diff --git a/gateway/sds_gateway/static/js/core/ModalManager.js b/gateway/sds_gateway/static/js/core/ModalManager.js
new file mode 100644
index 000000000..6f5452e19
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/ModalManager.js
@@ -0,0 +1,323 @@
+/**
+ * Bootstrap modal lifecycle: init, open/close, list-modal wiring.
+ *
+ * Available methods:
+ * - constructor(config) - Optional shell ids for legacy coordinator
+ * - openModal(idOrElement) - Show modal
+ * - closeModal(idOrElement) - Hide modal
+ * - static initializeModal(config) - Page-level modal setup; returns cleanup
+ * - static getOrCreateBootstrapModal(element, options)
+ * - static showModalLoading(modalId, text) - Spinner in modal body
+ * - static prepareBootstrapModalInstances(root) - Used by initializeModal
+ */
+
+class ModalManager extends BaseManager {
+	constructor(config = {}) {
+		super();
+		this.modalId = config.modalId;
+		if (config.modalId) {
+			this.modal = document.getElementById(this.modalId);
+			this.modalTitle = config.modalTitleId
+				? document.getElementById(config.modalTitleId)
+				: this.modal?.querySelector(".modal-title");
+			this.modalBody = config.modalBodyId
+				? document.getElementById(config.modalBodyId)
+				: this.modal?.querySelector(".modal-body");
+		}
+	}
+
+	/**
+	 * @param {string | HTMLElement} idOrElement
+	 */
+	/**
+	 * @param {string} modalId
+	 * @param {{ trigger?: HTMLElement|null }} [options]
+	 */
+	openModal(modalId, options = {}) {
+		const element = document.getElementById(modalId);
+		if (!element) return null;
+		const onShown = () => {
+			ModalManager._onModalShown(element, options);
+		};
+		element.addEventListener("shown.bs.modal", onShown, { once: true });
+		const inst = ModalManager.getOrCreateBootstrapModal(element, {
+			backdrop: true,
+			keyboard: true,
+			focus: true,
+		});
+		if (inst) inst.show();
+		return inst;
+	}
+
+	/**
+	 * @param {HTMLElement} modal
+	 * @param {{ trigger?: HTMLElement|null }} [options]
+	 */
+	static _onModalShown(modal, options = {}) {
+		const downloadManager =
+			options.downloadActionManager ?? window.downloadActionManager;
+		if (
+			modal?.id?.startsWith("webDownloadModal-") &&
+			downloadManager?.prepareWebDownloadModal
+		) {
+			downloadManager.prepareWebDownloadModal(modal, options.trigger ?? null);
+		}
+	}
+
+	/**
+	 * @param {string | HTMLElement} idOrElement
+	 */
+	closeModal(modalId) {
+		const element = document.getElementById(modalId);
+		if (!element || !window.bootstrap?.Modal) return;
+		const inst = bootstrap.Modal.getInstance(element);
+		if (inst) inst.hide();
+	}
+
+	/**
+	 * @param {object} config
+	 * @param {ParentNode} [config.root]
+	 * @param {boolean} [config.bootstrap=true]
+	 * @param {'dataset'|'capture'|'both'} [config.wireListModals]
+	 * @param {object} [config.permissions] - raw perm config for PermissionsManager
+	 * @param {unknown[]} [config.managersOut]
+	 * @param {boolean} [config.detailsClickDelegation]
+	 * @param {boolean} [config.wireAllDataItemModalsShare]
+	 * @param {boolean} [config.registerFilesCaptureCoordinator]
+	 * @param {object} [config.downloadActionManager]
+	 * @returns {() => void} cleanup
+	 */
+	static initializeModal(config = {}) {
+		const cleanups = [];
+		const root = config.root ?? document;
+
+		if (config.bootstrap !== false) {
+			ModalManager.prepareBootstrapModalInstances(root);
+		}
+
+		if (config.registerFilesCaptureCoordinator) {
+			window.filesCaptureModalManager = new ModalManager({
+				modalId: "asset-details-modal",
+				modalBodyId: "asset-details-modal-body",
+				modalTitleId: "asset-details-modal-label",
+			});
+		}
+
+		if (config.detailsClickDelegation) {
+			const detach =
+				window.AssetDetailsModalLoader?.ensureDetailsClickDelegation?.() ??
+				(() => {});
+			cleanups.push(detach);
+		}
+
+		const managersOut = config.managersOut;
+		const permissions = config.permissions;
+		if (permissions && managersOut && window.PermissionsManager) {
+			const permMgr =
+				permissions instanceof window.PermissionsManager
+					? permissions
+					: new window.PermissionsManager(permissions);
+			const wire = config.wireListModals;
+			if (wire === "dataset" || wire === "both") {
+				ModalManager._wireDatasetListModalsInternal(permMgr, managersOut);
+			}
+			if (wire === "capture" || wire === "both") {
+				ModalManager._wireCaptureListModalsInternal(permMgr, managersOut);
+			}
+		}
+
+		if (
+			config.wireAllDataItemModalsShare &&
+			permissions &&
+			window.PermissionsManager &&
+			window.ShareActionManager
+		) {
+			const permissionsManager = new window.PermissionsManager(permissions);
+			const uuidRegex =
+				/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+			const validTypes = new Set(["capture", "dataset", "file"]);
+			const bound = [];
+
+			for (const modal of document.querySelectorAll(".modal[data-item-uuid]")) {
+				const itemUuid = modal.getAttribute("data-item-uuid");
+				const itemType = modal.getAttribute("data-item-type");
+				if (
+					!itemUuid ||
+					!itemType ||
+					!uuidRegex.test(itemUuid) ||
+					!validTypes.has(itemType)
+				) {
+					continue;
+				}
+
+				const shareManager = new window.ShareActionManager({
+					itemUuid,
+					itemType,
+					permissions: permissionsManager,
+				});
+				modal.shareActionManager = shareManager;
+
+				const onHidden = () => {
+					modal.shareActionManager?.clearSelections?.();
+				};
+				modal.addEventListener("hidden.bs.modal", onHidden);
+				bound.push({ modal, onHidden });
+			}
+
+			cleanups.push(() => {
+				for (const { modal, onHidden } of bound) {
+					modal.removeEventListener("hidden.bs.modal", onHidden);
+				}
+			});
+		}
+
+		if (config.downloadActionManager) {
+			cleanups.push(
+				ModalManager._wireWebDownloadModalTriggers(
+					root,
+					config.downloadActionManager,
+				),
+			);
+		}
+
+		return () => {
+			for (const fn of cleanups) {
+				fn?.();
+			}
+		};
+	}
+
+	/**
+	 * @param {string} modalId
+	 * @param {string} [text]
+	 */
+	static async showModalLoading(modalId, text = "Loading...") {
+		const modal = document.getElementById(modalId);
+		if (!modal) return;
+		const modalBody = modal.querySelector(".modal-body");
+		if (modalBody && window.DOMUtils?.renderLoading) {
+			await window.DOMUtils.renderLoading(modalBody, text, {
+				format: "modal",
+			});
+		}
+	}
+
+	static prepareBootstrapModalInstances(root = document) {
+		if (!window.bootstrap) return;
+		for (const modal of root.querySelectorAll(".modal")) {
+			const existingInstance = bootstrap.Modal.getInstance(modal);
+			if (existingInstance) {
+				try {
+					existingInstance.dispose();
+				} catch (e) {
+					console.warn("Failed to dispose modal instance:", e);
+				}
+			}
+			new bootstrap.Modal(modal, {
+				backdrop: true,
+				keyboard: true,
+				focus: true,
+			});
+		}
+	}
+
+	static getOrCreateBootstrapModal(element, options = {}) {
+		if (!element || !window.bootstrap?.Modal) return null;
+		let inst = bootstrap.Modal.getInstance(element);
+		if (!inst) inst = new bootstrap.Modal(element, options);
+		return inst;
+	}
+
+	static _wireShareManagerForListModal(modal, permissions, managersOut, contextLabel) {
+		const itemUuid = modal.getAttribute("data-item-uuid");
+		const itemType = modal.getAttribute("data-item-type");
+
+		if (!itemUuid || !permissions) {
+			console.warn(
+				`No item UUID or permissions found for ${contextLabel}: ${modal}`,
+			);
+			return null;
+		}
+
+		if (window.ShareActionManager) {
+			const shareManager = new window.ShareActionManager({
+				permissions,
+				itemUuid: itemUuid,
+				itemType: itemType,
+			});
+			managersOut.push(shareManager);
+			modal.shareActionManager = shareManager;
+		}
+		return itemUuid;
+	}
+
+	static _wireDatasetListModalsInternal(permissions, managersOut) {
+		const datasetModals = document.querySelectorAll(
+			".modal[data-item-type='dataset']",
+		);
+
+		for (const modal of datasetModals) {
+			const itemUuid = ModalManager._wireShareManagerForListModal(
+				modal,
+				permissions,
+				managersOut,
+				"dataset modal",
+			);
+			if (!itemUuid) continue;
+
+			if (window.VersioningActionManager && !modal.versioningActionManager) {
+				const versioningManager = new window.VersioningActionManager({
+					permissions,
+					datasetUuid: itemUuid,
+				});
+				managersOut.push(versioningManager);
+				modal.versioningActionManager = versioningManager;
+			}
+		}
+	}
+
+	static _wireCaptureListModalsInternal(permissions, managersOut) {
+		const captureModals = document.querySelectorAll(
+			".modal[data-item-type='capture']",
+		);
+
+		for (const modal of captureModals) {
+			ModalManager._wireShareManagerForListModal(
+				modal,
+				permissions,
+				managersOut,
+				"capture modal",
+			);
+		}
+	}
+
+	/**
+	 * Route list-page download menu items through openModal (not raw data-bs-toggle).
+	 * @param {ParentNode} root
+	 * @param {object} downloadActionManager
+	 * @returns {() => void}
+	 */
+	static _wireWebDownloadModalTriggers(root, downloadActionManager) {
+		const handler = (event) => {
+			const toggle = event.target.closest(
+				'[data-bs-toggle="modal"][data-bs-target^="#webDownloadModal"],' +
+					'[data-bs-toggle="modal"][href^="#webDownloadModal"]',
+			);
+			if (!toggle || !root.contains(toggle)) {
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			downloadActionManager.openWebDownloadFromToggle(toggle);
+		};
+		root.addEventListener("click", handler, true);
+		return () => root.removeEventListener("click", handler, true);
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.ModalManager = ModalManager;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { ModalManager };
+}
diff --git a/gateway/sds_gateway/static/js/core/PageController.js b/gateway/sds_gateway/static/js/core/PageController.js
new file mode 100644
index 000000000..8b7dc676f
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/PageController.js
@@ -0,0 +1,102 @@
+/**
+ * Base page controller: consistent lifecycle + cleanup.
+ * Intended for per-page controllers (captures/files/datasets) to extend.
+ */
+class PageController {
+	constructor() {
+		this._bindings = [];
+		this._initialized = false;
+	}
+
+	/**
+	 * Bind an event listener and track it for cleanup.
+	 * @param {EventTarget|null} target
+	 * @param {string} eventName
+	 * @param {Function} handler
+	 * @param {boolean|AddEventListenerOptions} [options]
+	 */
+	bind(target, eventName, handler, options) {
+		if (!target?.addEventListener) return;
+		target.addEventListener(eventName, handler, options);
+		this._bindings.push({ target, eventName, handler, options });
+	}
+
+	/**
+	 * Remove all tracked listeners.
+	 */
+	unbindAll() {
+		for (const b of this._bindings) {
+			try {
+				b.target?.removeEventListener?.(b.eventName, b.handler, b.options);
+			} catch (_) {}
+		}
+		this._bindings = [];
+	}
+
+	/**
+	 * Initialize controller once. Subclasses should override the individual hooks.
+	 */
+	init() {
+		if (this._initialized) return;
+		this._initialized = true;
+
+		this.cacheElements();
+		this.initializeComponents();
+		this.initializeEventHandlers();
+		this.initializeFromURL();
+	}
+
+	/**
+	 * Shared list-page bootstrap (dataset list, capture list, etc.).
+	 * @param {{ pageLifecycleConfig?: object, listRefreshConfig?: object }} opts
+	 */
+	static initListPage(opts = {}) {
+		if (typeof window === "undefined") return;
+		const { pageLifecycleConfig, listRefreshConfig } = opts;
+		if (pageLifecycleConfig && window.PageLifecycleManager) {
+			window.pageLifecycleManager = new window.PageLifecycleManager(
+				pageLifecycleConfig,
+			);
+		}
+		if (listRefreshConfig && window.ListRefreshManager) {
+			window.listRefreshManager = new window.ListRefreshManager(
+				listRefreshConfig,
+			);
+		}
+		PageController._initListIconDropdowns(listRefreshConfig);
+	}
+
+	/**
+	 * Bootstrap icon dropdowns in list table markup (SSR + after AJAX refresh).
+	 * @param {{ containerSelector?: string }|undefined} listRefreshConfig
+	 */
+	static _initListIconDropdowns(listRefreshConfig) {
+		if (!window.DOMUtils?.initIconDropdowns) return;
+		const root = listRefreshConfig?.containerSelector
+			? document.querySelector(listRefreshConfig.containerSelector) ||
+				document
+			: document;
+		window.DOMUtils.initIconDropdowns(root);
+	}
+
+	// Hooks (override in subclasses)
+	cacheElements() {}
+	initializeComponents() {}
+	initializeEventHandlers() {}
+	initializeFromURL() {}
+
+	/**
+	 * Cleanup hook (override). Must call super.destroy().
+	 */
+	destroy() {
+		this.unbindAll();
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.PageController = PageController;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { PageController };
+}
+
diff --git a/gateway/sds_gateway/static/js/core/PageGate.js b/gateway/sds_gateway/static/js/core/PageGate.js
new file mode 100644
index 000000000..984d34bd7
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/PageGate.js
@@ -0,0 +1,157 @@
+/**
+ * Single entry for environment checks, shared chrome styles, and visualization wiring.
+ */
+(function pageGateModule() {
+	if (typeof window === "undefined") return;
+
+	function checkRequiredFeatures() {
+		const requiredFeatures = {
+			"DOM API": "document" in window && "addEventListener" in document,
+			"Console API": "console" in window && "log" in console,
+			Map: "Map" in window,
+			Set: "Set" in window,
+			"Template Literals": (() => {
+				try {
+					const test = `test${1}`;
+					return test === "test1";
+				} catch {
+					return false;
+				}
+			})(),
+		};
+
+		const missingFeatures = Object.entries(requiredFeatures)
+			.filter(([, supported]) => !supported)
+			.map(([name]) => name);
+
+		if (missingFeatures.length > 0) {
+			console.warn("Missing browser features:", missingFeatures);
+			return false;
+		}
+		return true;
+	}
+
+	function checkBootstrapPresent() {
+		return (
+			"bootstrap" in window ||
+			typeof bootstrap !== "undefined" ||
+			document.querySelector("[data-bs-toggle]") !== null
+		);
+	}
+
+	function checkUploadFeatures() {
+		const requiredFeatures = {
+			"File API": "File" in window,
+			FileReader: "FileReader" in window,
+			FormData: "FormData" in window,
+			"Fetch API": "fetch" in window,
+			Promise: "Promise" in window,
+			Map: "Map" in window,
+			Set: "Set" in window,
+		};
+
+		const missingFeatures = Object.entries(requiredFeatures)
+			.filter(([, supported]) => !supported)
+			.map(([name]) => name);
+
+		if (missingFeatures.length > 0) {
+			console.warn("Missing browser features:", missingFeatures);
+			return false;
+		}
+		return true;
+	}
+
+	function injectGatewayChromeStyles() {
+		if (document.getElementById("gateway-chrome-styles")) return;
+		const style = document.createElement("style");
+		style.id = "gateway-chrome-styles";
+		style.textContent = `
+  .edit-name-btn:hover i,
+  .save-name-btn:hover i {
+    color: white !important;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+`;
+		document.head.appendChild(style);
+	}
+
+	function wireVisualizationTriggers() {
+		if (window.VisualizationModal && !window.visualizationModalInstance) {
+			window.visualizationModalInstance = new window.VisualizationModal();
+		}
+
+		if (window.__visualizationTriggerBound) return;
+		window.__visualizationTriggerBound = true;
+
+		document.addEventListener("click", (e) => {
+			const button = e.target.closest?.(".visualization-trigger-btn");
+			if (!button) return;
+			const captureUuid = button.getAttribute("data-capture-uuid");
+			const captureType = button.getAttribute("data-capture-type");
+
+			if (
+				captureUuid &&
+				captureType &&
+				window.visualizationModalInstance &&
+				typeof window.visualizationModalInstance.openWithCaptureData ===
+					"function"
+			) {
+				window.visualizationModalInstance.openWithCaptureData(
+					captureUuid,
+					captureType,
+				);
+			}
+		});
+	}
+
+	function onReady(fn) {
+		if (document.readyState === "loading") {
+			document.addEventListener("DOMContentLoaded", fn, { once: true });
+		} else {
+			fn();
+		}
+	}
+
+	function runOnce() {
+		if (window.__pageGateRan) return;
+		window.__pageGateRan = true;
+
+		if (!checkRequiredFeatures()) {
+			void window.DOMUtils?.showError?.(
+				"Your browser doesn't support required features. Please use a modern browser.",
+				"browser-compatibility",
+			);
+			return;
+		}
+
+		injectGatewayChromeStyles();
+
+		onReady(() => {
+			if (!checkBootstrapPresent()) {
+				console.warn(
+					"Bootstrap not detected. Some UI features may not work properly.",
+				);
+			}
+			wireVisualizationTriggers();
+		});
+	}
+
+	window.PageGate = {
+		runOnce,
+		checkRequiredFeatures,
+		checkBootstrapPresent,
+		checkUploadFeatures,
+		injectGatewayChromeStyles,
+		wireVisualizationTriggers,
+	};
+
+	runOnce();
+})();
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = {};
+}
diff --git a/gateway/sds_gateway/static/js/core/PageLifecycleManager.js b/gateway/sds_gateway/static/js/core/PageLifecycleManager.js
index b8f9d8846..1b09a33a7 100644
--- a/gateway/sds_gateway/static/js/core/PageLifecycleManager.js
+++ b/gateway/sds_gateway/static/js/core/PageLifecycleManager.js
@@ -12,6 +12,7 @@ class PageLifecycleManager {
 		this.managers = [];
 		this.initialized = false;
 		this.config = config;
+		this._captureDetailsModalCleanup = null;
 
 		// Core managers
 		this.permissions = null;
@@ -93,8 +94,7 @@ class PageLifecycleManager {
 	/**
 	 * Initialize dataset create page
 	 */
-	initializeDatasetCreatePage() {
-		// Initialize dataset mode manager for creation
+	_initDatasetModeAndSearch(afterInit) {
 		if (window.DatasetModeManager) {
 			this.datasetModeManager = new window.DatasetModeManager({
 				...this.config.dataset,
@@ -105,39 +105,28 @@ class PageLifecycleManager {
 			});
 		}
 		this.managers.push(this.datasetModeManager);
-
-		// Initialize search handlers
 		this.initializeSearchHandlers();
+		afterInit?.();
+	}
+
+	initializeDatasetCreatePage() {
+		this._initDatasetModeAndSearch();
 	}
 
 	/**
 	 * Initialize dataset edit page
 	 */
 	initializeDatasetEditPage() {
-		// Initialize dataset mode manager for editing
-		if (window.DatasetModeManager) {
-			this.datasetModeManager = new window.DatasetModeManager({
-				...this.config.dataset,
-				userPermissionLevel: this.config.permissions?.userPermissionLevel,
-				currentUserId: this.config.permissions?.currentUserId,
-				isOwner: this.config.permissions?.isOwner,
-				datasetPermissions: this.config.permissions?.datasetPermissions,
-			});
-		}
-		this.managers.push(this.datasetModeManager);
-
-		// Initialize search handlers
-		this.initializeSearchHandlers();
-
-		// Initialize share action manager for the dataset
-		if (this.config.dataset?.datasetUuid && window.ShareActionManager) {
-			this.shareActionManager = new window.ShareActionManager({
-				itemUuid: this.config.dataset.datasetUuid,
-				itemType: "dataset",
-				permissions: this.permissions,
-			});
-			this.managers.push(this.shareActionManager);
-		}
+		this._initDatasetModeAndSearch(() => {
+			if (this.config.dataset?.datasetUuid && window.ShareActionManager) {
+				this.shareActionManager = new window.ShareActionManager({
+					itemUuid: this.config.dataset.datasetUuid,
+					itemType: "dataset",
+					permissions: this.permissions,
+				});
+				this.managers.push(this.shareActionManager);
+			}
+		});
 	}
 
 	/**
@@ -166,6 +155,32 @@ class PageLifecycleManager {
 
 		// Initialize modals for each capture
 		this.initializeCaptureModals();
+
+		this.ensureCaptureDetailsModal();
+	}
+
+	/**
+	 * Global asset details modal (#asset-details-modal) + delegated clicks.
+	 */
+	ensureCaptureDetailsModal() {
+		if (this._captureDetailsModalCleanup || !window.ModalManager?.initializeModal) {
+			return;
+		}
+		if (!this.config.permissions) {
+			return;
+		}
+		this._captureDetailsModalCleanup = window.ModalManager.initializeModal({
+			registerFilesCaptureCoordinator: true,
+			detailsClickDelegation: true,
+			wireAllDataItemModalsShare: true,
+			permissions: this.config.permissions,
+		});
+		this.managers.push({
+			cleanup: () => {
+				this._captureDetailsModalCleanup?.();
+				this._captureDetailsModalCleanup = null;
+			},
+		});
 	}
 
 	/**
@@ -270,26 +285,22 @@ class PageLifecycleManager {
 	 * Initialize pagination
 	 */
 	initializePagination() {
-		const paginationLinks = document.querySelectorAll(
-			".pagination a.page-link",
-		);
-
-		for (const link of paginationLinks) {
-			// Prevent duplicate event listener attachment
-			if (link.dataset.paginationSetup === "true") {
-				continue;
-			}
-			link.dataset.paginationSetup = "true";
+		const containerIds = [
+			"captures-pagination",
+			"datasets-pagination",
+			"files-pagination",
+		];
+		const onPageChange = (page) => {
+			const urlParams = new URLSearchParams(window.location.search);
+			urlParams.set("page", String(page));
+			window.location.search = urlParams.toString();
+		};
 
-			link.addEventListener("click", (e) => {
-				e.preventDefault();
-				const page = link.getAttribute("data-page");
-				if (page) {
-					const urlParams = new URLSearchParams(window.location.search);
-					urlParams.set("page", page);
-					window.location.search = urlParams.toString();
-				}
-			});
+		for (const containerId of containerIds) {
+			PageLifecycleManager.wireServerRenderedPagination(
+				containerId,
+				onPageChange,
+			);
 		}
 	}
 
@@ -297,123 +308,32 @@ class PageLifecycleManager {
 	 * Initialize dataset modals
 	 */
 	initializeDatasetModals() {
-		// TODO: Refactor this to align all modal initialization
-		// with a single manager instance per modal type.
-		// Plan to do this on a future PR.
-
-		// Pre-initialize all modals on the page with proper config to prevent Bootstrap auto-initialization errors
-		const allModals = document.querySelectorAll(".modal");
-		for (const modal of allModals) {
-			if (window.bootstrap) {
-				// Dispose any existing instance that might be in a bad state
-				const existingInstance = bootstrap.Modal.getInstance(modal);
-				if (existingInstance) {
-					try {
-						existingInstance.dispose();
-					} catch (e) {
-						// If disposal fails, the instance is already broken - continue
-						console.warn("Failed to dispose modal instance:", e);
-					}
-				}
-
-				// Create a new instance with proper config
-				new bootstrap.Modal(modal, {
-					backdrop: true,
-					keyboard: true,
-					focus: true,
-				});
-			}
-		}
-
-		const datasetModals = document.querySelectorAll(
-			".modal[data-item-type='dataset']",
-		);
-
-		for (const modal of datasetModals) {
-			const itemUuid = modal.getAttribute("data-item-uuid");
-			const itemType = modal.getAttribute("data-item-type");
-
-			if (!itemUuid || !this.permissions) {
-				console.warn(
-					`No item UUID or permissions found for dataset modal: ${modal}`,
-				);
-				continue;
-			}
-
-			if (window.ShareActionManager) {
-				const shareManager = new window.ShareActionManager({
-					permissions: this.permissions,
-					itemUuid: itemUuid,
-					itemType: itemType,
-				});
-				this.managers.push(shareManager);
-
-				// Store reference on modal
-				modal.shareActionManager = shareManager;
-			}
-
-			if (window.VersioningActionManager && !modal.versioningActionManager) {
-				const versioningManager = new window.VersioningActionManager({
-					permissions: this.permissions,
-					datasetUuid: itemUuid,
-				});
-				this.managers.push(versioningManager);
-				modal.versioningActionManager = versioningManager;
-			}
-
-			if (window.DetailsActionManager) {
-				const detailsManager = new window.DetailsActionManager({
-					permissions: this.permissions,
-					itemUuid: itemUuid,
-					itemType: itemType,
-				});
-				this.managers.push(detailsManager);
-
-				// Store reference on modal
-				modal.detailsActionManager = detailsManager;
-			}
-		}
-
 		this.ensureDownloadActionManager();
+		const detach = window.ModalManager?.initializeModal?.({
+			bootstrap: true,
+			wireListModals: "dataset",
+			permissions: this.permissions ?? this.config?.permissions,
+			managersOut: this.managers,
+			detailsClickDelegation: true,
+			downloadActionManager: this.downloadActionManager,
+		});
+		if (detach) {
+			this.managers.push({ cleanup: detach });
+		}
 	}
 
 	/**
 	 * Initialize capture modals
 	 */
 	initializeCaptureModals() {
-		// TODO: Refactor this to align all modal initialization
-		// with a single manager instance per modal type.
-		// Plan to do this on a future PR.
-
-		const captureModals = document.querySelectorAll(
-			".modal[data-item-type='capture']",
-		);
-
-		for (const modal of captureModals) {
-			const itemUuid = modal.getAttribute("data-item-uuid");
-			const itemType = modal.getAttribute("data-item-type");
-
-			if (!itemUuid || !this.permissions) {
-				console.warn(
-					`No item UUID or permissions found for capture modal: ${modal}`,
-				);
-				continue;
-			}
-
-			if (window.ShareActionManager) {
-				const shareManager = new window.ShareActionManager({
-					permissions: this.permissions,
-					itemUuid: itemUuid,
-					itemType: itemType,
-				});
-				this.managers.push(shareManager);
-
-				// Store reference on modal
-				modal.shareActionManager = shareManager;
-			}
-		}
-
 		this.ensureDownloadActionManager();
+		window.ModalManager?.initializeModal?.({
+			bootstrap: true,
+			wireListModals: "capture",
+			permissions: this.permissions ?? this.config?.permissions,
+			managersOut: this.managers,
+			downloadActionManager: this.downloadActionManager,
+		});
 	}
 
 	/**
@@ -617,6 +537,27 @@ class PageLifecycleManager {
 			checkManager();
 		});
 	}
+
+	/**
+	 * Wire server-rendered Bootstrap pagination links (data-page + .page-link).
+	 * @param {string} containerId
+	 * @param {(page: number) => void} onPageChange
+	 */
+	static wireServerRenderedPagination(containerId, onPageChange) {
+		const el = document.getElementById(containerId);
+		if (!el || typeof onPageChange !== "function") return;
+
+		const links = el.querySelectorAll(".pagination a.page-link");
+		for (const link of links) {
+			if (link.dataset.paginationSetup === "true") continue;
+			link.dataset.paginationSetup = "true";
+			link.addEventListener("click", (e) => {
+				e.preventDefault();
+				const p = Number.parseInt(link.getAttribute("data-page") || "", 10);
+				if (p) onPageChange(p);
+			});
+		}
+	}
 }
 
 // Make class available globally
diff --git a/gateway/sds_gateway/static/js/core/UserInputController.js b/gateway/sds_gateway/static/js/core/UserInputController.js
new file mode 100644
index 000000000..11cdf244f
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/UserInputController.js
@@ -0,0 +1,161 @@
+/**
+ * Shared user-input behaviors (clipboard fallbacks, debounced search wiring).
+ * DOM rendering stays in DOMUtils; this module handles input/copy patterns.
+ */
+class UserInputController {
+	/**
+	 * Copy text using the hidden-textarea + execCommand fallback (no Clipboard API).
+	 * @param {string} text
+	 */
+	static execCommandCopyFallback(text) {
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+		textArea.style.position = "fixed";
+		textArea.style.left = "-999999px";
+		textArea.style.top = "-999999px";
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+		try {
+			document.execCommand("copy");
+		} finally {
+			document.body.removeChild(textArea);
+		}
+	}
+
+	/**
+	 * Try navigator.clipboard, then {@link execCommandCopyFallback}.
+	 * @param {string} text
+	 * @returns {Promise<void>}
+	 */
+	static async copyTextToClipboard(text) {
+		if (navigator.clipboard && window.isSecureContext) {
+			await navigator.clipboard.writeText(text);
+			return;
+		}
+		UserInputController.execCommandCopyFallback(text);
+	}
+
+	/**
+	 * Wire debounced user search, keyboard navigation, and dropdown dismissal.
+	 * @param {HTMLInputElement} input
+	 * @param {{
+	 *   selectedUsersMap: Record<string, Array<unknown>>,
+	 *   getSearchTimeout: () => number | null | undefined,
+	 *   setSearchTimeout: (id: number | null) => void,
+	 *   getDropdownForInput: (input: HTMLElement) => HTMLElement | null,
+	 *   hideDropdown: (dropdown: HTMLElement) => void,
+	 *   navigateDropdown: (
+	 *     items: NodeListOf<Element> | NodeList,
+	 *     currentIndex: number,
+	 *     direction: number,
+	 *   ) => void,
+	 *   searchUsers: (query: string, dropdown: HTMLElement) => void,
+	 *   selectUser: (item: HTMLElement, input: HTMLInputElement) => void,
+	 * }} adapter
+	 */
+	static bindUserSearchInput(input, adapter) {
+		if (input.dataset.searchSetup === "true") {
+			return;
+		}
+		input.dataset.searchSetup = "true";
+
+		const dropdown = adapter.getDropdownForInput(input);
+		if (!dropdown) {
+			return;
+		}
+
+		const form = input.closest("form");
+		const inputId = input.id;
+		if (!adapter.selectedUsersMap[inputId]) {
+			adapter.selectedUsersMap[inputId] = [];
+		}
+
+		input.addEventListener("input", (e) => {
+			const prev = adapter.getSearchTimeout();
+			if (prev) {
+				clearTimeout(prev);
+			}
+			const query = /** @type {HTMLInputElement} */ (e.target).value.trim();
+
+			if (query.length < 2) {
+				adapter.hideDropdown(dropdown);
+				adapter.setSearchTimeout(null);
+				return;
+			}
+
+			const id = window.setTimeout(() => {
+				adapter.searchUsers(query, dropdown);
+			}, 300);
+			adapter.setSearchTimeout(id);
+		});
+
+		input.addEventListener("keydown", (e) => {
+			const visibleItems = dropdown.querySelectorAll(
+				".list-group-item:not(.no-results)",
+			);
+			const currentIndex = Array.from(visibleItems).findIndex((item) =>
+				item.classList.contains("selected"),
+			);
+
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					adapter.navigateDropdown(visibleItems, currentIndex, 1);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					adapter.navigateDropdown(visibleItems, currentIndex, -1);
+					break;
+				case "Enter": {
+					e.preventDefault();
+					const selectedItem = dropdown.querySelector(
+						".list-group-item.selected",
+					);
+					if (selectedItem) {
+						adapter.selectUser(selectedItem, input);
+					}
+					break;
+				}
+				case "Escape":
+					adapter.hideDropdown(dropdown);
+					input.blur();
+					break;
+				default:
+					break;
+			}
+		});
+
+		document.addEventListener("click", (e) => {
+			const t = /** @type {Node} */ (e.target);
+			if (!input.contains(t) && !dropdown.contains(t)) {
+				adapter.hideDropdown(dropdown);
+			}
+		});
+
+		dropdown.addEventListener("click", (e) => {
+			const item = /** @type {HTMLElement} */ (e.target).closest(
+				".list-group-item",
+			);
+			if (item && !item.classList.contains("no-results")) {
+				e.preventDefault();
+				e.stopPropagation();
+				adapter.selectUser(item, input);
+			}
+		});
+
+		if (form) {
+			form.addEventListener("submit", () => {
+				input.value = adapter.selectedUsersMap[inputId]
+					.map((u) => /** @type {{ email: string }} */ (u).email)
+					.join(",");
+			});
+		}
+	}
+}
+
+window.UserInputController = UserInputController;
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { UserInputController };
+}
diff --git a/gateway/sds_gateway/static/js/core/__tests__/APIClient.test.js b/gateway/sds_gateway/static/js/core/__tests__/APIClient.test.js
index 98d079412..c4f1dbb36 100644
--- a/gateway/sds_gateway/static/js/core/__tests__/APIClient.test.js
+++ b/gateway/sds_gateway/static/js/core/__tests__/APIClient.test.js
@@ -18,25 +18,23 @@ class APIError extends Error {
 
 global.APIError = APIError;
 
+const {
+	installMockWindowOrigin,
+	mockFetchResolved,
+	installMinimalDocumentForApiClient,
+	installCsrfMetaToken,
+	createMockFetchResponse,
+} = require("../../tests-config/testHelpers.js");
+
 describe("APIClient", () => {
 	let apiClient;
 	let mockFetch;
 
 	beforeEach(() => {
-		// Reset mocks
 		jest.clearAllMocks();
-
-		// Mock fetch
 		mockFetch = jest.fn();
 		global.fetch = mockFetch;
-
-		// Minimal document mock
-		global.document = {
-			querySelector: jest.fn(() => null),
-			cookie: "",
-		};
-
-		// Create APIClient instance
+		installMinimalDocumentForApiClient();
 		apiClient = new APIClient();
 	});
 
@@ -132,15 +130,7 @@ describe("APIClient", () => {
 
 	describe("API Requests", () => {
 		test("should make successful GET request", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			const result = await apiClient.request("/api/test");
 
@@ -152,24 +142,8 @@ describe("APIClient", () => {
 		});
 
 		test("should make POST request with CSRF token", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
-
-			// Mock CSRF token
-			const mockMetaToken = {
-				getAttribute: jest.fn(() => "test-csrf-token"),
-			};
-			global.document.querySelector = jest.fn((selector) => {
-				if (selector === 'meta[name="csrf-token"]') return mockMetaToken;
-				return null;
-			});
+			mockFetchResolved(mockFetch);
+			installCsrfMetaToken();
 
 			await apiClient.request("/api/test", {
 				method: "POST",
@@ -187,15 +161,7 @@ describe("APIClient", () => {
 		});
 
 		test("should handle loading state", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			// Create a loading state manager to track loading
 			const mockLoadingState = {
@@ -210,32 +176,25 @@ describe("APIClient", () => {
 		});
 
 		test("should handle non-JSON response", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "text/plain"),
-				},
-				text: jest.fn().mockResolvedValue("plain text response"),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetch.mockResolvedValue(
+				createMockFetchResponse({
+					contentType: "text/plain",
+				}),
+			);
 
 			const result = await apiClient.request("/api/test");
 
-			expect(result).toBe("plain text response");
+			expect(result).toBe("plain text");
 		});
 
 		test("should handle HTTP error responses", async () => {
-			const mockResponse = {
-				ok: false,
-				status: 404,
-				statusText: "Not Found",
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ error: "Resource not found" }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetch.mockResolvedValue(
+				createMockFetchResponse({
+					ok: false,
+					status: 404,
+					jsonData: { error: "Resource not found" },
+				}),
+			);
 
 			await expect(apiClient.request("/api/test")).rejects.toThrow();
 		});
@@ -249,15 +208,11 @@ describe("APIClient", () => {
 		});
 
 		test("should handle JSON parse errors", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockRejectedValue(new Error("Invalid JSON")),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetch.mockResolvedValue(
+				createMockFetchResponse({
+					jsonReject: new Error("Invalid JSON"),
+				}),
+			);
 
 			await expect(apiClient.request("/api/test")).rejects.toThrow(
 				"Invalid JSON",
@@ -267,41 +222,11 @@ describe("APIClient", () => {
 
 	describe("Convenience Methods", () => {
 		beforeEach(() => {
-			// Mock window.location.origin for URL construction
-			// jsdom's location.origin is read-only, so we replace the entire location object
-			if (!global.window) {
-				global.window = {};
-			}
-			// Replace location with a simple object that has origin
-			Object.defineProperty(global.window, "location", {
-				value: {
-					origin: "http://localhost:8000",
-				},
-				writable: true,
-				configurable: true,
-			});
-			// Ensure window is also accessible as window (not just global.window)
-			if (typeof window !== "undefined") {
-				Object.defineProperty(window, "location", {
-					value: {
-						origin: "http://localhost:8000",
-					},
-					writable: true,
-					configurable: true,
-				});
-			}
+			installMockWindowOrigin();
 		});
 
 		test("should make GET request", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test");
 
@@ -318,15 +243,7 @@ describe("APIClient", () => {
 		});
 
 		test("should make GET request with query parameters", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test", { param1: "value1", param2: "value2" });
 
@@ -345,24 +262,8 @@ describe("APIClient", () => {
 		])(
 			"should make %s request with FormData and CSRF token",
 			async (method, methodName) => {
-				const mockResponse = {
-					ok: true,
-					status: 200,
-					headers: {
-						get: jest.fn(() => "application/json"),
-					},
-					json: jest.fn().mockResolvedValue({ success: true }),
-				};
-				mockFetch.mockResolvedValue(mockResponse);
-
-				// Mock CSRF token
-				const mockMetaToken = {
-					getAttribute: jest.fn(() => "test-csrf-token"),
-				};
-				global.document.querySelector = jest.fn((selector) => {
-					if (selector === 'meta[name="csrf-token"]') return mockMetaToken;
-					return null;
-				});
+				mockFetchResolved(mockFetch);
+				installCsrfMetaToken();
 
 				await apiClient[methodName]("/api/test", { data: "test" });
 
@@ -379,16 +280,13 @@ describe("APIClient", () => {
 
 	describe("Error Handling", () => {
 		test("should create APIError with correct properties", async () => {
-			const mockResponse = {
-				ok: false,
-				status: 404,
-				statusText: "Not Found",
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ error: "Resource not found" }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetch.mockResolvedValue(
+				createMockFetchResponse({
+					ok: false,
+					status: 404,
+					jsonData: { error: "Resource not found" },
+				}),
+			);
 
 			try {
 				await apiClient.request("/api/test");
@@ -422,31 +320,11 @@ describe("APIClient", () => {
 
 	describe("URL Parameter Handling", () => {
 		beforeEach(() => {
-			// Mock window.location.origin for URL construction
-			// jsdom's location.origin is read-only, so we replace the entire location object
-			if (!global.window) {
-				global.window = {};
-			}
-			// Replace location with a simple object that has origin
-			Object.defineProperty(global.window, "location", {
-				value: {
-					origin: "http://localhost:8000",
-				},
-				writable: true,
-				configurable: true,
-			});
+			installMockWindowOrigin();
 		});
 
 		test("should handle empty parameters", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test", {});
 
@@ -457,15 +335,7 @@ describe("APIClient", () => {
 		});
 
 		test("should handle multiple parameters", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test", {
 				param1: "value1",
@@ -480,15 +350,7 @@ describe("APIClient", () => {
 		});
 
 		test("should encode special characters in parameters", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test", { query: "test value & special=chars" });
 
@@ -499,15 +361,7 @@ describe("APIClient", () => {
 		});
 
 		test("should filter out null and undefined parameters", async () => {
-			const mockResponse = {
-				ok: true,
-				status: 200,
-				headers: {
-					get: jest.fn(() => "application/json"),
-				},
-				json: jest.fn().mockResolvedValue({ success: true }),
-			};
-			mockFetch.mockResolvedValue(mockResponse);
+			mockFetchResolved(mockFetch);
 
 			await apiClient.get("/api/test", {
 				valid: "value",
@@ -531,16 +385,9 @@ describe("APIClient", () => {
 		])(
 			"should handle content-type '%s' correctly",
 			async (contentType, expectedResult) => {
-				const mockResponse = {
-					ok: true,
-					status: 200,
-					headers: {
-						get: jest.fn(() => contentType),
-					},
-					json: jest.fn().mockResolvedValue({ success: true }),
-					text: jest.fn().mockResolvedValue("plain text"),
-				};
-				mockFetch.mockResolvedValue(mockResponse);
+				mockFetch.mockResolvedValue(
+					createMockFetchResponse({ contentType }),
+				);
 
 				const result = await apiClient.request("/api/test");
 
diff --git a/gateway/sds_gateway/static/js/core/__tests__/DOMUtils.test.js b/gateway/sds_gateway/static/js/core/__tests__/DOMUtils.test.js
index c97eeca79..82cb7f137 100644
--- a/gateway/sds_gateway/static/js/core/__tests__/DOMUtils.test.js
+++ b/gateway/sds_gateway/static/js/core/__tests__/DOMUtils.test.js
@@ -29,6 +29,7 @@ describe("DOMUtils", () => {
 		mockContainer = {
 			id: "test-container",
 			innerHTML: "",
+			appendChild: jest.fn(),
 			classList: {
 				add: jest.fn(),
 				remove: jest.fn(),
@@ -68,7 +69,12 @@ describe("DOMUtils", () => {
 		});
 		global.document.createElement = jest.fn((tag) => {
 			if (tag === "div") {
-				return {
+				const child = {
+					id: "",
+					remove: jest.fn(),
+					addEventListener: jest.fn(),
+				};
+				const el = {
 					tagName: "div",
 					id: "",
 					className: "",
@@ -82,7 +88,12 @@ describe("DOMUtils", () => {
 					getAttribute: jest.fn(),
 					appendChild: jest.fn(),
 					addEventListener: jest.fn(),
+					get firstElementChild() {
+						const html = String(this.innerHTML || "").trim();
+						return html ? child : null;
+					},
 				};
+				return el;
 			}
 			if (tag === "button") {
 				return {
@@ -198,24 +209,21 @@ describe("DOMUtils", () => {
 		});
 	});
 
-	describe("showAlert()", () => {
+	describe("showMessage() toasts", () => {
 		let mockToastDiv;
 		let mockTempDiv;
 
 		beforeEach(() => {
-			// Create mock toast element that will be appended
 			mockToastDiv = {
 				id: "",
 				addEventListener: jest.fn(),
 			};
 
-			// Create mock temp div for parsing HTML
 			mockTempDiv = {
 				innerHTML: "",
 				firstElementChild: mockToastDiv,
 			};
 
-			// Update createElement mock to return temp div for toast parsing
 			global.document.createElement = jest.fn((tag) => {
 				if (tag === "div") {
 					return mockTempDiv;
@@ -237,22 +245,26 @@ describe("DOMUtils", () => {
 				};
 			});
 
-			// Mock API response with toast HTML
 			mockAPIClient.post.mockResolvedValue({
 				html: '<div class="toast">Toast content</div>',
 			});
 		});
 
-		test("should show toast notification with default success type", async () => {
-			await domUtils.showAlert("Test message");
+		test("showMessage posts message.html and shows toast", async () => {
+			await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
 			expect(mockAPIClient.post).toHaveBeenCalledWith(
 				"/users/render-html/",
 				{
-					template: "users/components/toast.html",
+					template: "users/components/message.html",
 					context: {
 						message: "Test message",
 						type: "success",
+						presentation: "toast",
 					},
 				},
 				null,
@@ -262,48 +274,71 @@ describe("DOMUtils", () => {
 			expect(global.bootstrap.Toast).toHaveBeenCalledWith(mockToastDiv);
 		});
 
-		test("should show toast notification with different types", async () => {
-			const types = ["success", "error", "warning", "info"];
+		test("showMessage maps variants to template type", async () => {
+			const cases = [
+				["success", "success"],
+				["danger", "error"],
+				["warning", "warning"],
+				["info", "info"],
+			];
 
-			for (const type of types) {
+			for (const [variant, expectedType] of cases) {
 				jest.clearAllMocks();
-				await domUtils.showAlert("Test message", type);
+				await domUtils.showMessage("Hello", {
+					variant,
+					placement: "toast",
+					presentation: "toast",
+				});
 
 				expect(mockAPIClient.post).toHaveBeenCalledWith(
 					"/users/render-html/",
 					{
-						template: "users/components/toast.html",
+						template: "users/components/message.html",
 						context: {
-							message: "Test message",
-							type: type,
+							message: "Hello",
+							type: expectedType,
+							presentation: "toast",
 						},
 					},
 					null,
 					true,
 				);
-				expect(mockToastContainer.appendChild).toHaveBeenCalled();
-				expect(global.bootstrap.Toast).toHaveBeenCalled();
 			}
 		});
 
-		test("should handle missing toast container gracefully", async () => {
-			document.getElementById = jest.fn(() => null);
-			console.warn = jest.fn();
+		test("should handle missing toast container after render", async () => {
+			document.getElementById = jest.fn((id) => {
+				if (id === "toast-container") return null;
+				if (id === "test-container") return mockContainer;
+				return null;
+			});
+			console.error = jest.fn();
 
-			await domUtils.showAlert("Test message");
+			const ok = await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
-			expect(console.warn).toHaveBeenCalledWith("Toast container not found");
-			expect(mockAPIClient.post).not.toHaveBeenCalled();
+			expect(ok).toBe(false);
+			expect(mockAPIClient.post).toHaveBeenCalled();
+			expect(console.error).toHaveBeenCalled();
+			expect(mockToastContainer.appendChild).not.toHaveBeenCalled();
 		});
 
 		test("should handle missing HTML in API response", async () => {
 			mockAPIClient.post.mockResolvedValue({});
 			console.error = jest.fn();
 
-			await domUtils.showAlert("Test message");
+			const ok = await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
+			expect(ok).toBe(false);
 			expect(console.error).toHaveBeenCalledWith(
-				"No HTML returned from toast template",
+				"showMessage: no HTML from render-html",
 			);
 			expect(mockToastContainer.appendChild).not.toHaveBeenCalled();
 		});
@@ -312,31 +347,48 @@ describe("DOMUtils", () => {
 			mockTempDiv.firstElementChild = null;
 			console.error = jest.fn();
 
-			await domUtils.showAlert("Test message");
+			const ok = await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
-			expect(console.error).toHaveBeenCalledWith("Failed to parse toast HTML");
+			expect(ok).toBe(false);
+			expect(console.error).toHaveBeenCalledWith(
+				"showMessage: failed to parse message HTML",
+			);
 			expect(mockToastContainer.appendChild).not.toHaveBeenCalled();
 		});
 
-		test("should handle missing Bootstrap gracefully", async () => {
+		test("should handle missing Bootstrap Toast", async () => {
 			global.bootstrap = null;
 			window.bootstrap = null;
 			console.error = jest.fn();
 
-			await domUtils.showAlert("Test message");
+			const ok = await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
-			expect(console.error).toHaveBeenCalledWith("Bootstrap not available");
-			expect(mockToastContainer.appendChild).toHaveBeenCalled();
+			expect(ok).toBe(false);
+			expect(console.error).toHaveBeenCalled();
+			expect(mockToastContainer.appendChild).not.toHaveBeenCalled();
 		});
 
 		test("should handle API errors gracefully", async () => {
 			mockAPIClient.post.mockRejectedValue(new Error("API error"));
 			console.error = jest.fn();
 
-			await domUtils.showAlert("Test message");
+			const ok = await domUtils.showMessage("Test message", {
+				variant: "success",
+				placement: "toast",
+				presentation: "toast",
+			});
 
+			expect(ok).toBe(false);
 			expect(console.error).toHaveBeenCalledWith(
-				"Error rendering toast template:",
+				"showMessage failed:",
 				expect.any(Error),
 			);
 			expect(mockToastContainer.appendChild).not.toHaveBeenCalled();
@@ -344,59 +396,97 @@ describe("DOMUtils", () => {
 	});
 
 	describe("API-Based Rendering Methods", () => {
-		describe("renderError()", () => {
-			test("should render error using Django template", async () => {
+		describe("showMessage() replace placement", () => {
+			let mockResultNode;
+			let mockWrapDiv;
+
+			beforeEach(() => {
+				mockResultNode = {
+					id: "",
+					remove: jest.fn(),
+					addEventListener: jest.fn(),
+				};
+				mockWrapDiv = {
+					innerHTML: "",
+					get firstElementChild() {
+						return mockResultNode;
+					},
+				};
+				global.document.createElement = jest.fn((tag) => {
+					if (tag === "div") return mockWrapDiv;
+					return null;
+				});
+			});
+
+			test("posts message.html and replaces target content", async () => {
 				mockAPIClient.post.mockResolvedValue({
 					html: '<span class="text-danger">Error message</span>',
 				});
 
-				const result = await domUtils.renderError(
-					mockContainer,
-					"Error message",
-				);
+				const result = await domUtils.showMessage("Error message", {
+					variant: "danger",
+					placement: "replace",
+					target: mockContainer,
+					presentation: "inline",
+				});
 
 				expect(mockAPIClient.post).toHaveBeenCalledWith(
 					"/users/render-html/",
 					{
-						template: "users/components/error.html",
+						template: "users/components/message.html",
 						context: {
 							message: "Error message",
-							format: "inline",
+							type: "error",
+							presentation: "inline",
 						},
 					},
 					null,
 					true,
 				);
-				expect(mockContainer.innerHTML).toBe(
-					'<span class="text-danger">Error message</span>',
-				);
+				expect(mockContainer.appendChild).toHaveBeenCalledWith(mockResultNode);
 				expect(result).toBe(true);
 			});
 
 			test.each([
 				[
 					"table",
-					{ format: "table", colspan: 5 },
-					'<tr><td colspan="5" class="text-danger">Error</td></tr>',
-					{ message: "Error message", format: "table", colspan: 5 },
+					"table",
+					'<tr><td colspan="5" class="text-center text-danger">Error</td></tr>',
+					{
+						message: "Error message",
+						type: "error",
+						presentation: "table",
+						colspan: 5,
+					},
 				],
 				[
 					"alert",
-					{ format: "alert" },
+					"alert",
 					'<div class="alert alert-danger">Error message</div>',
-					{ message: "Error message", format: "alert" },
+					{
+						message: "Error message",
+						type: "error",
+						presentation: "alert",
+					},
 				],
 			])(
-				"should render error with %s format",
-				async (formatName, options, html, expectedContext) => {
+				"posts message.html with presentation %s",
+				async (_label, presentation, html, expectedContext) => {
 					mockAPIClient.post.mockResolvedValue({ html });
 
-					await domUtils.renderError(mockContainer, "Error message", options);
+					await domUtils.showMessage("Error message", {
+						variant: "danger",
+						placement: "replace",
+						target: mockContainer,
+						presentation,
+						templateContext:
+							presentation === "table" ? { colspan: 5 } : {},
+					});
 
 					expect(mockAPIClient.post).toHaveBeenCalledWith(
 						"/users/render-html/",
 						{
-							template: "users/components/error.html",
+							template: "users/components/message.html",
 							context: expectedContext,
 						},
 						null,
@@ -405,32 +495,34 @@ describe("DOMUtils", () => {
 				},
 			);
 
-			test.each([
-				["inline", {}, '<span class="text-danger">Error message</span>'],
-				[
-					"table",
-					{ format: "table", colspan: 5 },
-					'<tr><td colspan="5" class="text-center text-danger">Error message</td></tr>',
-				],
-			])(
-				"should fallback to %s HTML on API error",
-				async (formatName, options, expectedHtml) => {
-					mockAPIClient.post.mockRejectedValue(new Error("API error"));
-					console.error = jest.fn();
+			test("returns false on API error without mutating container", async () => {
+				mockContainer.innerHTML = "<p>prior</p>";
+				mockAPIClient.post.mockRejectedValue(new Error("API error"));
+				console.error = jest.fn();
+
+				const result = await domUtils.showMessage("Error message", {
+					variant: "danger",
+					placement: "replace",
+					target: mockContainer,
+					presentation: "table",
+					templateContext: { colspan: 5 },
+				});
 
-					const result = await domUtils.renderError(
-						mockContainer,
-						"Error message",
-						options,
-					);
+				expect(mockContainer.innerHTML).toBe("<p>prior</p>");
+				expect(result).toBe(false);
+			});
 
-					expect(mockContainer.innerHTML).toBe(expectedHtml);
-					expect(result).toBe(false);
-				},
-			);
+			test("resolves target via selector string", async () => {
+				mockAPIClient.post.mockResolvedValue({
+					html: '<span class="text-danger">x</span>',
+				});
 
-			test("should work with selector string", async () => {
-				await domUtils.renderError("#test-container", "Error message");
+				await domUtils.showMessage("Error message", {
+					variant: "danger",
+					placement: "replace",
+					target: "#test-container",
+					presentation: "inline",
+				});
 
 				expect(document.querySelector).toHaveBeenCalledWith("#test-container");
 				expect(mockAPIClient.post).toHaveBeenCalled();
@@ -710,13 +802,27 @@ describe("DOMUtils", () => {
 							rows: [],
 							empty_message: "No data",
 							empty_colspan: 3,
-							colspan: 3,
 						},
 					},
 					null,
 					true,
 				);
 			});
+
+			test("should honor options.template", async () => {
+				mockAPIClient.post.mockResolvedValue({ html: "<tr></tr>" });
+				await domUtils.renderTable(mockContainer, [], {
+					template: "users/components/other_rows.html",
+				});
+				expect(mockAPIClient.post).toHaveBeenCalledWith(
+					"/users/render-html/",
+					expect.objectContaining({
+						template: "users/components/other_rows.html",
+					}),
+					null,
+					true,
+				);
+			});
 		});
 
 		describe("renderSelectOptions()", () => {
@@ -903,10 +1009,15 @@ describe("DOMUtils", () => {
 		describe("Common Error Handling", () => {
 			test.each([
 				[
-					"renderError",
+					"showMessage (replace)",
 					async (container) =>
-						await domUtils.renderError(container, "Error message"),
-					"Container not found for renderError:",
+						await domUtils.showMessage("Error message", {
+							variant: "danger",
+							placement: "replace",
+							target: container,
+							presentation: "inline",
+						}),
+					"showMessage: target not found:",
 				],
 				[
 					"renderLoading",
@@ -959,17 +1070,18 @@ describe("DOMUtils", () => {
 
 			test.each([
 				[
-					"renderError",
+					"showMessage",
 					async (container) =>
-						await domUtils.renderError(container, "Error message"),
-					'<span class="text-danger">Error message</span>',
-					true, // use toBe
+						await domUtils.showMessage("Error message", {
+							variant: "danger",
+							placement: "replace",
+							target: container,
+							presentation: "inline",
+						}),
 				],
 				[
 					"renderLoading",
 					async (container) => await domUtils.renderLoading(container),
-					"spinner-border",
-					false, // use toContain
 				],
 				[
 					"renderContent",
@@ -978,14 +1090,10 @@ describe("DOMUtils", () => {
 							icon: "check",
 							text: "Success",
 						}),
-					"bi-check",
-					false, // use toContain
 				],
 				[
 					"renderTable",
 					async (container) => await domUtils.renderTable(container, []),
-					"No items found",
-					false, // use toContain
 				],
 				[
 					"renderSelectOptions",
@@ -993,8 +1101,6 @@ describe("DOMUtils", () => {
 						await domUtils.renderSelectOptions(container, [
 							["value1", "Label 1"],
 						]),
-					"value1",
-					false, // use toContain
 				],
 				[
 					"renderPagination",
@@ -1005,409 +1111,145 @@ describe("DOMUtils", () => {
 							has_previous: false,
 							has_next: true,
 						}),
-					"",
-					true, // use toBe
 				],
 			])(
-				"should fallback on API error for %s",
-				async (methodName, renderFn, expectedContent, useExactMatch) => {
+				"returns false on API error for %s without mutating container",
+				async (methodName, renderFn) => {
+					mockContainer.innerHTML = "<p>prior</p>";
 					mockAPIClient.post.mockRejectedValue(new Error("API error"));
 					console.error = jest.fn();
 
 					const result = await renderFn(mockContainer);
 
-					if (useExactMatch) {
-						expect(mockContainer.innerHTML).toBe(expectedContent);
-					} else {
-						expect(mockContainer.innerHTML).toContain(expectedContent);
-					}
+					expect(mockContainer.innerHTML).toBe("<p>prior</p>");
 					expect(result).toBe(false);
 				},
 			);
 		});
 	});
 
-	describe("Modal Management Methods", () => {
-		let mockModal;
-		let mockModalBody;
-		let mockBootstrapModal;
+	describe("initIconDropdowns()", () => {
+		let mockToggle;
+		let mockDropdownMenu;
 
 		beforeEach(() => {
-			// Create mock modal body
-			mockModalBody = {
-				innerHTML: "<div>Original content</div>",
-				dataset: {},
-				querySelector: jest.fn(),
+			mockDropdownMenu = {
+				classList: { contains: jest.fn((cls) => cls === "dropdown-menu") },
 			};
 
-			// Create mock modal
-			mockModal = {
-				id: "test-modal",
-				querySelector: jest.fn((selector) => {
-					if (selector === ".modal-body") return mockModalBody;
-					return null;
-				}),
+			mockToggle = {
+				nextElementSibling: mockDropdownMenu,
+				dataset: {},
+				closest: jest.fn((sel) =>
+					sel === ".btn-icon-dropdown" ? mockToggle : null,
+				),
 			};
 
-			// Create mock Bootstrap Modal instance
-			mockBootstrapModal = {
-				show: jest.fn(),
-				hide: jest.fn(),
-				dispose: jest.fn(),
-				_config: {
-					backdrop: true,
-					keyboard: true,
-					focus: true,
-				},
-			};
+			global.document.querySelectorAll = jest.fn((selector) => {
+				if (selector === ".btn-icon-dropdown") return [mockToggle];
+				return [];
+			});
+
+			global.document.bodyAppendChildSpy = jest
+				.spyOn(global.document.body, "appendChild")
+				.mockImplementation(() => {});
 
-			// Mock Bootstrap Modal
 			global.bootstrap = {
-				Modal: jest.fn().mockImplementation(() => mockBootstrapModal),
+				...global.bootstrap,
+				Toast: global.bootstrap?.Toast,
+				Modal: global.bootstrap?.Modal,
+				Dropdown: jest.fn().mockImplementation(() => ({
+					dispose: jest.fn(),
+				})),
 			};
-			global.bootstrap.Modal.getInstance = jest.fn(() => null);
+			global.bootstrap.Dropdown.getInstance = jest.fn(() => null);
 			window.bootstrap = global.bootstrap;
-
-			// Mock document.getElementById for modal
-			global.document.getElementById = jest.fn((id) => {
-				if (id === "test-modal") return mockModal;
-				if (id === "toast-container") return mockToastContainer;
-				if (id === "test-container") return mockContainer;
-				return null;
-			});
+			global.document.addEventListener = jest.fn();
 		});
 
-		describe("showModalLoading()", () => {
-			test("should store original content and render loading", async () => {
-				mockAPIClient.post.mockResolvedValue({
-					html: '<div class="spinner">Loading...</div>',
-				});
-
-				await domUtils.showModalLoading("test-modal");
-
-				expect(mockModalBody.dataset.originalContent).toBe(
-					"<div>Original content</div>",
-				);
-				expect(mockAPIClient.post).toHaveBeenCalledWith(
-					"/users/render-html/",
-					{
-						template: "users/components/loading.html",
-						context: expect.objectContaining({
-							text: "Loading modal...",
-							format: "modal",
-						}),
-					},
-					null,
-					true,
-				);
-			});
-
-			test("should not overwrite existing original content", async () => {
-				mockModalBody.dataset.originalContent = "<div>Existing content</div>";
-				mockAPIClient.post.mockResolvedValue({
-					html: '<div class="spinner">Loading...</div>',
-				});
-
-				await domUtils.showModalLoading("test-modal");
-
-				expect(mockModalBody.dataset.originalContent).toBe(
-					"<div>Existing content</div>",
-				);
-			});
-
-			test("should handle missing modal gracefully", async () => {
-				document.getElementById = jest.fn(() => null);
-
-				await domUtils.showModalLoading("nonexistent-modal");
-
-				expect(mockAPIClient.post).not.toHaveBeenCalled();
-			});
-
-			test("should handle missing modal body gracefully", async () => {
-				mockModal.querySelector = jest.fn(() => null);
-
-				await domUtils.showModalLoading("test-modal");
-
-				expect(mockAPIClient.post).not.toHaveBeenCalled();
-			});
+		afterEach(() => {
+			if (global.document.bodyAppendChildSpy?.mockRestore) {
+				global.document.bodyAppendChildSpy.mockRestore();
+			}
 		});
 
-		describe("clearModalLoading()", () => {
-			test("should restore original content", () => {
-				mockModalBody.dataset.originalContent = "<div>Original content</div>";
+		test("should initialize dropdowns for all toggle buttons", () => {
+			domUtils.initIconDropdowns();
 
-				domUtils.clearModalLoading("test-modal");
-
-				expect(mockModalBody.innerHTML).toBe("<div>Original content</div>");
-				expect(mockModalBody.dataset.originalContent).toBeUndefined();
+			expect(document.querySelectorAll).toHaveBeenCalledWith(
+				".btn-icon-dropdown",
+			);
+			expect(global.bootstrap.Dropdown).toHaveBeenCalledWith(mockToggle, {
+				container: "body",
+				boundary: "viewport",
+				popperConfig: {
+					modifiers: [
+						{
+							name: "preventOverflow",
+							options: {
+								boundary: "viewport",
+							},
+						},
+					],
+				},
 			});
+		});
 
-			test("should handle missing original content gracefully", () => {
-				delete mockModalBody.dataset.originalContent;
-
-				domUtils.clearModalLoading("test-modal");
-
-				expect(mockModalBody.innerHTML).toBe("<div>Original content</div>");
-			});
+		test("should dispose existing dropdown instances", () => {
+			const existingInstance = {
+				dispose: jest.fn(),
+			};
+			global.bootstrap.Dropdown.getInstance = jest.fn(() => existingInstance);
 
-			test("should handle missing modal gracefully", () => {
-				document.getElementById = jest.fn(() => null);
+			domUtils.initIconDropdowns();
 
-				expect(() => {
-					domUtils.clearModalLoading("nonexistent-modal");
-				}).not.toThrow();
-			});
+			expect(existingInstance.dispose).toHaveBeenCalled();
 		});
 
-		describe("showModalError()", () => {
-			test("should render error and open modal", async () => {
-				mockAPIClient.post.mockResolvedValue({
-					html: '<div class="alert alert-danger">Error message</div>',
-				});
-				global.bootstrap.Modal.getInstance = jest.fn(() => mockBootstrapModal);
+		test("should move dropdown menu to body on show", () => {
+			domUtils.initIconDropdowns();
 
-				await domUtils.showModalError("test-modal", "Test error");
+			const showHandler = global.document.addEventListener.mock.calls.find(
+				(call) => call[0] === "show.bs.dropdown",
+			)?.[1];
 
-				expect(mockAPIClient.post).toHaveBeenCalledWith(
-					"/users/render-html/",
-					{
-						template: "users/components/error.html",
-						context: expect.objectContaining({
-							message: "Test error",
-							format: "alert",
-							alert_type: "danger",
-							icon: "exclamation-triangle",
-						}),
-					},
-					null,
-					true,
+			if (showHandler) {
+				showHandler({ target: mockToggle });
+				expect(global.document.bodyAppendChildSpy).toHaveBeenCalledWith(
+					mockDropdownMenu,
 				);
-				expect(mockBootstrapModal.show).toHaveBeenCalled();
-			});
-
-			test("should handle missing modal gracefully", async () => {
-				document.getElementById = jest.fn(() => null);
-
-				await domUtils.showModalError("nonexistent-modal", "Test error");
-
-				expect(mockAPIClient.post).not.toHaveBeenCalled();
-			});
+			}
 		});
 
-		describe("openModal()", () => {
-			test("should create new modal instance when none exists", () => {
-				global.bootstrap.Modal.getInstance = jest.fn(() => null);
-
-				domUtils.openModal("test-modal");
-
-				expect(global.bootstrap.Modal).toHaveBeenCalledWith(mockModal, {
-					backdrop: true,
-					keyboard: true,
-					focus: true,
-				});
-				expect(mockBootstrapModal.show).toHaveBeenCalled();
-			});
-
-			test("should reuse existing valid modal instance", () => {
-				global.bootstrap.Modal.getInstance = jest.fn(() => mockBootstrapModal);
-
-				domUtils.openModal("test-modal");
-
-				expect(global.bootstrap.Modal).not.toHaveBeenCalled();
-				expect(mockBootstrapModal.show).toHaveBeenCalled();
-			});
-
-			test("should dispose and recreate modal instance in bad state", () => {
-				const badInstance = {
-					show: jest.fn(),
-					dispose: jest.fn(),
-					// Missing _config or _config.backdrop
-				};
-				global.bootstrap.Modal.getInstance = jest.fn(() => badInstance);
-
-				domUtils.openModal("test-modal");
-
-				expect(badInstance.dispose).toHaveBeenCalled();
-				expect(global.bootstrap.Modal).toHaveBeenCalledWith(mockModal, {
-					backdrop: true,
-					keyboard: true,
-					focus: true,
-				});
-				expect(mockBootstrapModal.show).toHaveBeenCalled();
-			});
-
-			test("should handle disposal failure gracefully", () => {
-				const badInstance = {
-					show: jest.fn(),
-					dispose: jest.fn(() => {
-						throw new Error("Disposal failed");
+		test("should prevent row click when clicking dropdown elements", () => {
+			const mockEvent = {
+				target: {
+					closest: jest.fn((selector) => {
+						if (selector === ".dropdown") return { classList: {} };
+						return null;
 					}),
-				};
-				global.bootstrap.Modal.getInstance = jest.fn(() => badInstance);
-				console.warn = jest.fn();
-
-				domUtils.openModal("test-modal");
-
-				expect(global.bootstrap.Modal).toHaveBeenCalled();
-				expect(mockBootstrapModal.show).toHaveBeenCalled();
-			});
-
-			test("should handle missing modal gracefully", () => {
-				document.getElementById = jest.fn(() => null);
-
-				expect(() => {
-					domUtils.openModal("nonexistent-modal");
-				}).not.toThrow();
-			});
-		});
-
-		describe("closeModal()", () => {
-			test("should get instance and call hide", () => {
-				global.bootstrap.Modal.getInstance = jest.fn(() => mockBootstrapModal);
-
-				domUtils.closeModal("test-modal");
-
-				expect(global.bootstrap.Modal.getInstance).toHaveBeenCalledWith(
-					mockModal,
-				);
-				expect(mockBootstrapModal.hide).toHaveBeenCalled();
-			});
+				},
+				stopPropagation: jest.fn(),
+			};
 
-			test("should handle missing instance gracefully", () => {
-				global.bootstrap.Modal.getInstance = jest.fn(() => null);
+			domUtils.initIconDropdowns();
 
-				expect(() => {
-					domUtils.closeModal("test-modal");
-				}).not.toThrow();
-			});
+			const clickHandler = global.document.addEventListener.mock.calls.find(
+				(call) => call[0] === "click",
+			)?.[1];
 
-			test("should handle missing modal gracefully", () => {
-				document.getElementById = jest.fn(() => null);
-
-				expect(() => {
-					domUtils.closeModal("nonexistent-modal");
-				}).not.toThrow();
-			});
+			if (clickHandler) {
+				clickHandler(mockEvent);
+				expect(mockEvent.stopPropagation).toHaveBeenCalled();
+			}
 		});
 
-		describe("initializeListDropdowns()", () => {
-			let mockToggle;
-			let mockDropdownMenu;
-
-			beforeEach(() => {
-				mockDropdownMenu = {
-					classList: { contains: jest.fn((cls) => cls === "dropdown-menu") },
-				};
-
-				mockToggle = {
-					nextElementSibling: mockDropdownMenu,
-					dataset: {},
-					addEventListener: jest.fn(),
-				};
-
-				global.document.querySelectorAll = jest.fn((selector) => {
-					if (selector === ".btn-icon-dropdown") return [mockToggle];
-					return [];
-				});
-
-				// Mock appendChild so DOMUtils can call it with mock dropdown (not a real Node)
-				global.document.bodyAppendChildSpy = jest
-					.spyOn(global.document.body, "appendChild")
-					.mockImplementation(() => {});
-
-				global.bootstrap.Dropdown = jest.fn().mockImplementation(() => ({
-					dispose: jest.fn(),
-				}));
-				global.bootstrap.Dropdown.getInstance = jest.fn(() => null);
-				global.document.addEventListener = jest.fn();
-			});
-
-			afterEach(() => {
-				if (global.document.bodyAppendChildSpy?.mockRestore) {
-					global.document.bodyAppendChildSpy.mockRestore();
-				}
-			});
-
-			test("should initialize dropdowns for all toggle buttons", () => {
-				domUtils.initializeListDropdowns();
-
-				expect(document.querySelectorAll).toHaveBeenCalledWith(
-					".btn-icon-dropdown",
-				);
-				expect(global.bootstrap.Dropdown).toHaveBeenCalledWith(mockToggle, {
-					container: "body",
-					boundary: "viewport",
-					popperConfig: {
-						modifiers: [
-							{
-								name: "preventOverflow",
-								options: {
-									boundary: "viewport",
-								},
-							},
-						],
-					},
-				});
-			});
-
-			test("should dispose existing dropdown instances", () => {
-				const existingInstance = {
-					dispose: jest.fn(),
-				};
-				global.bootstrap.Dropdown.getInstance = jest.fn(() => existingInstance);
-
-				domUtils.initializeListDropdowns();
-
-				expect(existingInstance.dispose).toHaveBeenCalled();
-			});
+		test("should handle missing dropdown menu gracefully", () => {
+			mockToggle.nextElementSibling = null;
 
-			test("should move dropdown menu to body on show", () => {
-				domUtils.initializeListDropdowns();
-
-				// Simulate show.bs.dropdown event
-				const showHandler = mockToggle.addEventListener.mock.calls.find(
-					(call) => call[0] === "show.bs.dropdown",
-				)?.[1];
-
-				if (showHandler) {
-					showHandler();
-					expect(global.document.bodyAppendChildSpy).toHaveBeenCalledWith(
-						mockDropdownMenu,
-					);
-				}
-			});
-
-			test("should prevent row click when clicking dropdown elements", () => {
-				const mockEvent = {
-					target: {
-						closest: jest.fn((selector) => {
-							if (selector === ".dropdown") return { classList: {} };
-							return null;
-						}),
-					},
-					stopPropagation: jest.fn(),
-				};
-
-				domUtils.initializeListDropdowns();
-
-				// Simulate click event (use global.document.addEventListener set in beforeEach)
-				const clickHandler = global.document.addEventListener.mock.calls.find(
-					(call) => call[0] === "click",
-				)?.[1];
-
-				if (clickHandler) {
-					clickHandler(mockEvent);
-					expect(mockEvent.stopPropagation).toHaveBeenCalled();
-				}
-			});
-
-			test("should handle missing dropdown menu gracefully", () => {
-				mockToggle.nextElementSibling = null;
-
-				expect(() => {
-					domUtils.initializeListDropdowns();
-				}).not.toThrow();
-			});
+			expect(() => {
+				domUtils.initIconDropdowns();
+			}).not.toThrow();
 		});
 	});
 });
diff --git a/gateway/sds_gateway/static/js/core/__tests__/ListRefreshManager.test.js b/gateway/sds_gateway/static/js/core/__tests__/ListRefreshManager.test.js
new file mode 100644
index 000000000..7559d97d7
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/__tests__/ListRefreshManager.test.js
@@ -0,0 +1,98 @@
+/**
+ * Jest tests for ListRefreshManager (AJAX list + modals refresh)
+ */
+
+import { ListRefreshManager } from "../APIClient.js";
+const {
+	createListRefreshResponseHtml,
+	installListRefreshDomContainers,
+	LIST_REFRESH_SEP,
+} = require("../../__tests__/helpers/actionTestMocks.js");
+
+describe("ListRefreshManager", () => {
+	let tableEl;
+	let modalsEl;
+	let loadTable;
+	let refreshMock;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		const dom = installListRefreshDomContainers();
+		tableEl = dom.table;
+		modalsEl = dom.modals;
+
+		global.window.APIClient = {
+			get: jest.fn(),
+		};
+		global.window.DOMUtils = {
+			renderLoading: jest.fn().mockResolvedValue(undefined),
+			showMessage: jest.fn().mockResolvedValue(true),
+			initIconDropdowns: jest.fn(),
+		};
+		global.window.ModalManager = {
+			initializeModal: jest.fn(),
+		};
+		refreshMock = jest.fn().mockResolvedValue(undefined);
+		global.window.pageLifecycleManager = { refresh: refreshMock };
+
+		global.bootstrap = {
+			Dropdown: {},
+			Tooltip: jest.fn(),
+		};
+		global.bootstrap.Tooltip.getInstance = jest.fn(() => null);
+
+		loadTable = new ListRefreshManager({
+			containerSelector: dom.tableSelector,
+			modalsContainerSelector: dom.modalsSelector,
+			url: "/users/dataset-list/",
+			itemType: "dataset",
+		});
+	});
+
+	test("loadTable splits response and updates table and modals containers", async () => {
+		const sharedEmail = "newshare@example.com";
+		const modalsHtml = `<div id="shareModal-ds-1" data-item-uuid="ds-1">
+			<div id="users-with-access-section-ds-1">
+				<table><tbody><tr><td><small class="text-muted">${sharedEmail}</small></td></tr></tbody></table>
+			</div>
+			<div id="versioningModal-new-version-uuid"></div>
+			<div id="publish-dataset-modal-new-version-uuid"></div>
+		</div>`;
+		const tableHtml =
+			'<div data-dataset-uuid="new-version-uuid"><i class="bi bi-people-fill text-success"></i></div>';
+		global.window.APIClient.get.mockResolvedValue(
+			createListRefreshResponseHtml({ tableHtml, modalsHtml }),
+		);
+
+		await loadTable.loadTable({}, { showLoading: false });
+
+		expect(tableEl.innerHTML).toBe(tableHtml);
+		expect(modalsEl.innerHTML).toBe(modalsHtml);
+		expect(modalsEl.innerHTML).toContain(sharedEmail);
+		expect(modalsEl.querySelector("#versioningModal-new-version-uuid")).not.toBeNull();
+		expect(
+			modalsEl.querySelector("#publish-dataset-modal-new-version-uuid"),
+		).not.toBeNull();
+		expect(refreshMock).toHaveBeenCalled();
+		expect(global.window.ModalManager.initializeModal).toHaveBeenCalledWith(
+			expect.objectContaining({ bootstrap: true, root: document }),
+		);
+	});
+
+	test("loadTable calls pageLifecycleManager.refresh after DOM update", async () => {
+		global.window.APIClient.get.mockResolvedValue(
+			createListRefreshResponseHtml({
+				tableHtml: "<div>rows</div>",
+				modalsHtml: "<div id='shareModal-x'></div>",
+			}),
+		);
+
+		await loadTable.loadTable({}, { showLoading: false });
+
+		expect(refreshMock).toHaveBeenCalledTimes(1);
+	});
+
+	test("uses LIST_REFRESH_SEP constant in split logic", () => {
+		expect(LIST_REFRESH_SEP).toBe("<!-- LIST_REFRESH_SEP -->");
+	});
+});
diff --git a/gateway/sds_gateway/static/js/core/__tests__/ModalManager.test.js b/gateway/sds_gateway/static/js/core/__tests__/ModalManager.test.js
new file mode 100644
index 000000000..d6d8e8137
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/__tests__/ModalManager.test.js
@@ -0,0 +1,142 @@
+/**
+ * Jest tests for ModalManager
+ */
+
+import { ModalManager } from "../ModalManager.js";
+const { createMockDOMUtils } = require("../../tests-config/testHelpers.js");
+const {
+	installBootstrapModalMocks,
+} = require("../../__tests__/helpers/actionTestMocks.js");
+
+describe("ModalManager", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		document.body.innerHTML = "";
+		installBootstrapModalMocks();
+		window.DOMUtils = createMockDOMUtils({
+			renderLoading: jest.fn().mockResolvedValue(undefined),
+		});
+	});
+
+	test("getOrCreateBootstrapModal creates instance when missing", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		global.bootstrap.Modal.getInstance = jest.fn(() => null);
+
+		const inst = ModalManager.getOrCreateBootstrapModal(el);
+
+		expect(global.bootstrap.Modal).toHaveBeenCalledWith(el, {});
+		expect(inst.show).toEqual(expect.any(Function));
+	});
+
+	test("showModalLoading renders loading into modal body", async () => {
+		document.body.innerHTML = `
+			<div id="test-modal"><div class="modal-body"></div></div>
+		`;
+
+		await ModalManager.showModalLoading("test-modal", "Please wait");
+
+		expect(window.DOMUtils.renderLoading).toHaveBeenCalledWith(
+			document.querySelector("#test-modal .modal-body"),
+			"Please wait",
+			{ format: "modal" },
+		);
+	});
+
+	test("closeModal hides bootstrap instance", () => {
+		const hide = jest.fn();
+		const el = document.createElement("div");
+		el.id = "m1";
+		document.body.appendChild(el);
+		global.bootstrap.Modal.getInstance = jest.fn(() => ({ hide }));
+
+		new ModalManager().closeModal("m1");
+
+		expect(global.bootstrap.Modal.getInstance).toHaveBeenCalledWith(el);
+		expect(hide).toHaveBeenCalled();
+	});
+
+	test("openModal shows bootstrap modal and runs download prepare on shown", () => {
+		const prepareWebDownloadModal = jest.fn();
+		window.downloadActionManager = { prepareWebDownloadModal };
+		const modal = document.createElement("div");
+		modal.id = "webDownloadModal-abc";
+		document.body.appendChild(modal);
+		const trigger = document.createElement("button");
+		const show = jest.fn();
+		global.bootstrap.Modal.getInstance = jest.fn(() => ({ show }));
+
+		new ModalManager().openModal("webDownloadModal-abc", { trigger });
+
+		expect(show).toHaveBeenCalled();
+		modal.dispatchEvent(new Event("shown.bs.modal"));
+		expect(prepareWebDownloadModal).toHaveBeenCalledWith(modal, trigger);
+	});
+
+	test("showModalLoading no-ops when modal missing", async () => {
+		await ModalManager.showModalLoading("missing-modal");
+		expect(window.DOMUtils.renderLoading).not.toHaveBeenCalled();
+	});
+
+	test("initializeModal registers details click delegation cleanup", () => {
+		const detach = jest.fn();
+		window.AssetDetailsModalLoader = {
+			ensureDetailsClickDelegation: jest.fn(() => detach),
+		};
+		const cleanup = ModalManager.initializeModal({
+			bootstrap: false,
+			detailsClickDelegation: true,
+		});
+		cleanup();
+		expect(detach).toHaveBeenCalled();
+	});
+
+	test("initializeModal attaches share and versioning managers to dataset list modals", () => {
+		const managersOut = [];
+		const datasetUuid = "11111111-1111-4111-8111-111111111111";
+		document.body.innerHTML = `
+			<div class="modal" data-item-type="dataset" data-item-uuid="${datasetUuid}"></div>
+		`;
+		const modalEl = document.querySelector(".modal");
+		window.PermissionsManager = jest.fn().mockImplementation(() => ({}));
+		const shareInstance = { itemUuid: datasetUuid };
+		const versionInstance = { datasetUuid };
+		window.ShareActionManager = jest.fn(() => shareInstance);
+		window.VersioningActionManager = jest.fn(() => versionInstance);
+
+		ModalManager.initializeModal({
+			bootstrap: false,
+			wireListModals: "dataset",
+			permissions: {},
+			managersOut,
+		});
+
+		expect(modalEl.shareActionManager).toBe(shareInstance);
+		expect(modalEl.versioningActionManager).toBe(versionInstance);
+		expect(window.ShareActionManager).toHaveBeenCalledWith({
+			itemUuid: datasetUuid,
+			itemType: "dataset",
+			permissions: expect.any(Object),
+		});
+	});
+
+	test("_wireWebDownloadModalTriggers prevents default on matching toggle", () => {
+		const openWebDownloadFromToggle = jest.fn();
+		const root = document.createElement("div");
+		const toggle = document.createElement("a");
+		toggle.setAttribute("data-bs-toggle", "modal");
+		toggle.setAttribute("data-bs-target", "#webDownloadModal-x");
+		root.appendChild(toggle);
+		document.body.appendChild(root);
+
+		const cleanup = ModalManager._wireWebDownloadModalTriggers(root, {
+			openWebDownloadFromToggle,
+		});
+		const event = new MouseEvent("click", { bubbles: true, cancelable: true });
+		toggle.dispatchEvent(event);
+
+		expect(event.defaultPrevented).toBe(true);
+		expect(openWebDownloadFromToggle).toHaveBeenCalledWith(toggle);
+		cleanup();
+	});
+});
diff --git a/gateway/sds_gateway/static/js/core/__tests__/PageController.test.js b/gateway/sds_gateway/static/js/core/__tests__/PageController.test.js
new file mode 100644
index 000000000..a82a060ac
--- /dev/null
+++ b/gateway/sds_gateway/static/js/core/__tests__/PageController.test.js
@@ -0,0 +1,54 @@
+/**
+ * Jest tests for PageController
+ */
+
+import { PageController } from "../PageController.js";
+
+describe("PageController", () => {
+	test("bind tracks listeners and unbindAll removes them", () => {
+		const ctrl = new PageController();
+		const target = document.createElement("button");
+		const handler = jest.fn();
+
+		ctrl.bind(target, "click", handler);
+		target.click();
+		expect(handler).toHaveBeenCalledTimes(1);
+
+		ctrl.unbindAll();
+		target.click();
+		expect(handler).toHaveBeenCalledTimes(1);
+	});
+
+	test("init runs hooks only once", () => {
+		class TestController extends PageController {
+			cacheElements() {
+				this.cached = true;
+			}
+		}
+		const ctrl = new TestController();
+		const spy = jest.spyOn(ctrl, "cacheElements");
+
+		ctrl.init();
+		ctrl.init();
+
+		expect(spy).toHaveBeenCalledTimes(1);
+		expect(ctrl.cached).toBe(true);
+	});
+
+	test("initListPage creates lifecycle and list refresh managers", () => {
+		window.PageLifecycleManager = jest.fn();
+		window.ListRefreshManager = jest.fn();
+		window.DOMUtils = { initIconDropdowns: jest.fn() };
+
+		PageController.initListPage({
+			pageLifecycleConfig: { itemType: "dataset" },
+			listRefreshConfig: { url: "/list/" },
+		});
+
+		expect(window.PageLifecycleManager).toHaveBeenCalledWith({
+			itemType: "dataset",
+		});
+		expect(window.ListRefreshManager).toHaveBeenCalledWith({ url: "/list/" });
+		expect(window.DOMUtils.initIconDropdowns).toHaveBeenCalled();
+	});
+});
diff --git a/gateway/sds_gateway/static/js/core/__tests__/PageLifecycleManager.test.js b/gateway/sds_gateway/static/js/core/__tests__/PageLifecycleManager.test.js
index cfe94a45c..825d7f61c 100644
--- a/gateway/sds_gateway/static/js/core/__tests__/PageLifecycleManager.test.js
+++ b/gateway/sds_gateway/static/js/core/__tests__/PageLifecycleManager.test.js
@@ -5,6 +5,7 @@
 
 // Import the PageLifecycleManager class
 import { PageLifecycleManager } from "../PageLifecycleManager.js";
+import { ModalManager } from "../ModalManager.js";
 
 describe("PageLifecycleManager", () => {
 	let lifecycleManager;
@@ -239,6 +240,8 @@ describe("PageLifecycleManager", () => {
 		let mockBootstrapModal;
 
 		beforeEach(() => {
+			global.window.ModalManager = ModalManager;
+
 			// Mock Bootstrap
 			mockBootstrapModal = {
 				dispose: jest.fn(),
@@ -289,9 +292,7 @@ describe("PageLifecycleManager", () => {
 			global.window.DownloadActionManager = jest
 				.fn()
 				.mockImplementation(() => ({}));
-			global.window.DetailsActionManager = jest
-				.fn()
-				.mockImplementation(() => ({}));
+			jest.spyOn(ModalManager, "initializeModal");
 		});
 
 		test("should pre-initialize all modals with proper Bootstrap config", () => {
@@ -409,7 +410,7 @@ describe("PageLifecycleManager", () => {
 			});
 		});
 
-		test("should initialize DetailsActionManager for dataset modals", () => {
+		test("should register details modal click delegation", () => {
 			lifecycleManager = new PageLifecycleManager({
 				...mockConfig,
 				pageType: "dataset-list",
@@ -417,11 +418,12 @@ describe("PageLifecycleManager", () => {
 
 			lifecycleManager.initializeDatasetModals();
 
-			expect(global.window.DetailsActionManager).toHaveBeenCalledWith({
-				permissions: lifecycleManager.permissions,
-				itemUuid: "test-dataset-uuid",
-				itemType: "dataset",
-			});
+			expect(ModalManager.initializeModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					detailsClickDelegation: true,
+					wireListModals: "dataset",
+				}),
+			);
 		});
 
 		test("should initialize capture modals", () => {
diff --git a/gateway/sds_gateway/static/js/dataset/AuthorsManager.js b/gateway/sds_gateway/static/js/dataset/AuthorsManager.js
new file mode 100644
index 000000000..8a8d9236e
--- /dev/null
+++ b/gateway/sds_gateway/static/js/dataset/AuthorsManager.js
@@ -0,0 +1,261 @@
+/**
+ * Shared author list formatting and DOM readback for dataset flows.
+ */
+class AuthorsManager {
+	/**
+	 * @param {unknown[]} authors
+	 * @returns {string}
+	 */
+	static formatAuthors(authors) {
+		if (!Array.isArray(authors) || authors.length === 0) {
+			return "No authors specified.";
+		}
+
+		return authors
+			.map((author) =>
+				typeof author === "string" ? author : author.name || "Unknown",
+			)
+			.join(", ");
+	}
+
+	/**
+	 * @returns {{ name: string, orcid_id: string, _stableId: string }[]}
+	 */
+	static parseAuthorsFromHiddenField(value) {
+		if (!value || String(value).trim() === "") {
+			return [];
+		}
+		try {
+			return JSON.parse(value);
+		} catch (e) {
+			console.error("Error parsing initial authors:", e);
+			return [];
+		}
+	}
+
+	static normalizeAuthorEntries(authors) {
+		return authors.map((author) => {
+			if (typeof author === "string") {
+				return { name: author, orcid_id: "" };
+			}
+			return author;
+		});
+	}
+
+	static ensureDefaultAuthorIfEmpty(authors) {
+		if (authors.length > 0) {
+			return authors;
+		}
+		const currentUserName =
+			document.body.dataset.currentUserName || "Current User";
+		const currentUserOrcid = document.body.dataset.currentUserOrcid || "";
+		return [
+			{
+				name: currentUserName,
+				orcid_id: currentUserOrcid,
+			},
+		];
+	}
+
+	static ensureAuthorRecord(authors, index) {
+		if (!authors[index] || typeof authors[index] === "string") {
+			authors[index] = {
+				name: typeof authors[index] === "string" ? authors[index] : "",
+				orcid_id: "",
+			};
+		}
+		return authors[index];
+	}
+
+	static buildAuthorRenderContext(authors, opts = {}) {
+		const removed = new Set(opts.removedIndices || []);
+		return authors.map((author, index) => {
+			const authorName =
+				typeof author === "string" ? author : author.name || "";
+			const authorOrcid =
+				typeof author === "string" ? "" : author.orcid_id || "";
+			const stableId = author._stableId || `author-${index}-${Date.now()}`;
+			if (!author._stableId) {
+				author._stableId = stableId;
+			}
+			return {
+				index,
+				name: authorName,
+				orcid_id: authorOrcid,
+				stable_id: stableId,
+				is_primary: index === 0,
+				is_marked_for_removal: removed.has(index),
+			};
+		});
+	}
+
+	static removeTrailingEmptyAuthor(authors, index) {
+		if (
+			index > 0 &&
+			!authors[index].name.trim() &&
+			!authors[index].orcid_id.trim()
+		) {
+			authors.splice(index, 1);
+			return true;
+		}
+		return false;
+	}
+
+	static notifyReviewDisplay() {
+		if (window.updateReviewDatasetDisplay) {
+			window.updateReviewDatasetDisplay();
+		}
+	}
+
+	static focusAuthorNameInput(authorsList, index) {
+		const newInput = authorsList.querySelector(
+			`input[data-index="${index}"][data-field="name"]`,
+		);
+		if (newInput) {
+			newInput.focus();
+		}
+	}
+
+	/** @param {object} handler - Dataset create/edit handler (BaseManager) */
+	static async refreshAuthorsList(
+		handler,
+		{
+			authorsList,
+			authorsHiddenField,
+			authors,
+			addAuthorBtn,
+			removedIndices = [],
+			addButtonMode = "always",
+		},
+	) {
+		try {
+			const normalizedAuthors = this.buildAuthorRenderContext(authors, {
+				removedIndices,
+			});
+			const response = await window.APIClient.post(
+				"/users/render-html/",
+				{
+					template: "users/components/author_list_items.html",
+					context: { authors: normalizedAuthors },
+				},
+				null,
+				true,
+			);
+			if (response.html) {
+				authorsList.innerHTML = response.html;
+			}
+		} catch (error) {
+			handler.logError?.(error, authorsList);
+			await handler.showMessageInTarget("Error loading authors", authorsList, {
+				variant: "danger",
+				presentation: "alert",
+				templateContext: { icon: "exclamation-triangle" },
+			});
+		}
+
+		authorsHiddenField.value = JSON.stringify(authors);
+
+		if (addAuthorBtn) {
+			if (addButtonMode === "permission") {
+				if (handler.permissions?.canEditMetadata) {
+					window.DOMUtils.show(addAuthorBtn);
+				} else {
+					window.DOMUtils.hide(addAuthorBtn);
+				}
+			} else {
+				window.DOMUtils.show(addAuthorBtn);
+			}
+		}
+	}
+
+	static detectInitialAuthorChanges(authors, originalAuthors) {
+		const authorChanges = { added: [], removed: [], modified: {} };
+		if (originalAuthors.length === 0) {
+			return authorChanges;
+		}
+
+		for (const [index, author] of authors.entries()) {
+			const authorName = typeof author === "string" ? author : author.name;
+			const authorOrcid = typeof author === "string" ? "" : author.orcid_id;
+			const existsInOriginal = originalAuthors.some((origAuthor) => {
+				const origName =
+					typeof origAuthor === "string" ? origAuthor : origAuthor.name;
+				const origOrcid =
+					typeof origAuthor === "string" ? "" : origAuthor.orcid_id;
+				return origName === authorName && origOrcid === authorOrcid;
+			});
+			if (!existsInOriginal) {
+				authorChanges.added.push(index);
+			}
+		}
+
+		for (const [, origAuthor] of originalAuthors.entries()) {
+			const origName =
+				typeof origAuthor === "string" ? origAuthor : origAuthor.name;
+			const existsInCurrent = authors.some((author) => {
+				const authorName = typeof author === "string" ? author : author.name;
+				return authorName === origName;
+			});
+			if (!existsInCurrent) {
+				const currentIndex = authors.findIndex((author) => {
+					const authorName =
+						typeof author === "string" ? author : author.name;
+					return authorName === origName;
+				});
+				if (currentIndex >= 0) {
+					authorChanges.removed.push(currentIndex);
+				}
+			}
+		}
+
+		return authorChanges;
+	}
+
+	static bindFileTreeModalHandlers(handler) {
+		const modal = document.getElementById("fileTreeModal");
+		if (!modal) return;
+		modal.addEventListener("show.bs.modal", () => {
+			handler.onFileModalShow();
+		});
+		modal.addEventListener("hidden.bs.modal", () => {
+			handler.onFileModalHide();
+		});
+	}
+
+	static getCurrentAuthorsWithDOMIds() {
+		const authorsList = document.querySelector(".authors-list");
+		const currentAuthors = [];
+
+		if (authorsList) {
+			const authorItems = authorsList.querySelectorAll(
+				".author-item:not(.marked-for-removal)",
+			);
+
+			for (const authorItem of authorItems) {
+				const authorId = authorItem.id;
+				if (!authorId) {
+					console.error("❌ Author item missing ID");
+					return;
+				}
+
+				const nameInput = authorItem.querySelector(".author-name-input");
+				const orcidInput = authorItem.querySelector(".author-orcid-input");
+
+				currentAuthors.push({
+					name: nameInput?.value || "",
+					orcid_id: orcidInput?.value || "",
+					_stableId: authorId,
+				});
+			}
+		}
+
+		return currentAuthors;
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.AuthorsManager = AuthorsManager;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { AuthorsManager };
+}
diff --git a/gateway/sds_gateway/static/js/dataset/DatasetAuthorsUI.js b/gateway/sds_gateway/static/js/dataset/DatasetAuthorsUI.js
new file mode 100644
index 000000000..243323c82
--- /dev/null
+++ b/gateway/sds_gateway/static/js/dataset/DatasetAuthorsUI.js
@@ -0,0 +1,321 @@
+/**
+ * Binds create/edit dataset author list UI (shared DOM + server render).
+ */
+class DatasetAuthorsUI {
+	static PRIMARY_AUTHOR_WARNING =
+		"The primary author cannot be removed. This is the dataset creator.";
+
+	/**
+	 * @param {DatasetCreationHandler|DatasetEditingHandler} handler
+	 * @param {{ mode: 'create'|'edit', initialAuthors?: unknown[] }} options
+	 */
+	static mount(handler, options) {
+		if (options.mode === "edit") {
+			this._mountEdit(handler, options);
+		} else {
+			this._mountCreate(handler);
+		}
+	}
+
+	static _getDom() {
+		const authorsContainer = document.getElementById("authors-container");
+		const authorsList = authorsContainer?.querySelector(".authors-list");
+		const addAuthorBtn = document.getElementById("add-author-btn");
+		const authorsHiddenField = document.getElementById("id_authors");
+		if (!authorsContainer || !authorsList || !authorsHiddenField) {
+			return null;
+		}
+		return { authorsList, addAuthorBtn, authorsHiddenField };
+	}
+
+	static _mountCreate(handler) {
+		const dom = this._getDom();
+		if (!dom) return;
+
+		const utils = window.AuthorsManager;
+		const { authorsList, addAuthorBtn, authorsHiddenField } = dom;
+
+		let authors = utils.parseAuthorsFromHiddenField(authorsHiddenField.value);
+		authors = utils.normalizeAuthorEntries(authors);
+		authors = utils.ensureDefaultAuthorIfEmpty(authors);
+
+		const updateAuthorsDisplay = async () => {
+			await utils.refreshAuthorsList(handler, {
+				authorsList,
+				authorsHiddenField,
+				authors,
+				addAuthorBtn,
+				addButtonMode: "always",
+			});
+		};
+
+		const addAuthor = () => {
+			authors.push({ name: "", orcid_id: "" });
+			updateAuthorsDisplay();
+			utils.focusAuthorNameInput(authorsList, authors.length - 1);
+			handler.validateCurrentStep?.();
+			utils.notifyReviewDisplay();
+		};
+
+		const removeAuthor = (index) => {
+			if (index > 0) {
+				authors.splice(index, 1);
+				updateAuthorsDisplay();
+				handler.validateCurrentStep?.();
+				utils.notifyReviewDisplay();
+			} else {
+				handler.showToast(this.PRIMARY_AUTHOR_WARNING, "warning");
+			}
+		};
+
+		if (addAuthorBtn) {
+			addAuthorBtn.addEventListener("click", addAuthor);
+		}
+
+		authorsList.addEventListener("input", (e) => {
+			if (
+				!e.target.classList.contains("author-name-input") &&
+				!e.target.classList.contains("author-orcid-input")
+			) {
+				return;
+			}
+			const index = Number.parseInt(e.target.dataset.index);
+			const field = e.target.dataset.field;
+			utils.ensureAuthorRecord(authors, index);
+			authors[index][field] = e.target.value;
+			const needsUpdate = utils.removeTrailingEmptyAuthor(authors, index);
+			authorsHiddenField.value = JSON.stringify(authors);
+			if (needsUpdate) {
+				updateAuthorsDisplay();
+			}
+			handler.validateCurrentStep?.();
+			utils.notifyReviewDisplay();
+		});
+
+		authorsList.addEventListener("click", (e) => {
+			const removeButton = e.target.closest(".remove-author");
+			if (!removeButton) return;
+			e.preventDefault();
+			e.stopPropagation();
+			removeAuthor(Number.parseInt(removeButton.dataset.index));
+		});
+
+		updateAuthorsDisplay();
+		handler.authors = authors;
+		handler.updateAuthorsDisplay = updateAuthorsDisplay;
+
+		window.updateDatasetAuthors = (authorsField) =>
+			handler.updateDatasetAuthors(authorsField);
+		window.formatAuthors = (authors) => handler.formatAuthors(authors);
+	}
+
+	static _mountEdit(handler, options) {
+		window.updateDatasetAuthors = (authorsField) =>
+			handler.updateDatasetAuthors(authorsField);
+		window.formatAuthors = (authors) => handler.formatAuthors(authors);
+
+		const dom = this._getDom();
+		if (!dom) return;
+
+		const utils = window.AuthorsManager;
+		const { authorsList, addAuthorBtn, authorsHiddenField } = dom;
+
+		let authors = utils.parseAuthorsFromHiddenField(authorsHiddenField.value);
+		authors = utils.normalizeAuthorEntries(authors);
+
+		const datasetAuthors = options.initialAuthors || [];
+		let originalAuthors = Array.isArray(datasetAuthors) ? datasetAuthors : [];
+		originalAuthors = utils.normalizeAuthorEntries(originalAuthors);
+
+		const authorChanges = utils.detectInitialAuthorChanges(
+			authors,
+			originalAuthors,
+		);
+
+		const updateAuthorsDisplay = async () => {
+			await utils.refreshAuthorsList(handler, {
+				authorsList,
+				authorsHiddenField,
+				authors,
+				addAuthorBtn,
+				removedIndices: authorChanges.removed,
+				addButtonMode: "permission",
+			});
+		};
+
+		const addAuthor = () => {
+			const newIndex = authors.length;
+			authors.push({ name: "", orcid_id: "" });
+			if (!authorChanges.added.includes(newIndex)) {
+				authorChanges.added.push(newIndex);
+			}
+			updateAuthorsDisplay();
+			utils.focusAuthorNameInput(authorsList, newIndex);
+			utils.notifyReviewDisplay();
+		};
+
+		const removeAuthor = (index) => {
+			if (index <= 0) {
+				handler.showToast(this.PRIMARY_AUTHOR_WARNING, "warning");
+				return;
+			}
+			const isNewlyAdded = authorChanges.added.includes(index);
+			if (isNewlyAdded) {
+				authors.splice(index, 1);
+				const addIndex = authorChanges.added.indexOf(index);
+				if (addIndex > -1) {
+					authorChanges.added.splice(addIndex, 1);
+				}
+				authorChanges.added = authorChanges.added.map((i) =>
+					i > index ? i - 1 : i,
+				);
+				authorChanges.removed = authorChanges.removed.map((i) =>
+					i > index ? i - 1 : i,
+				);
+				const newModified = {};
+				for (const [modifiedIndex, changes] of Object.entries(
+					authorChanges.modified,
+				)) {
+					const numIndex = Number.parseInt(modifiedIndex);
+					if (numIndex > index) {
+						newModified[numIndex - 1] = changes;
+					} else if (numIndex < index) {
+						newModified[numIndex] = changes;
+					}
+				}
+				authorChanges.modified = newModified;
+			} else if (!authorChanges.removed.includes(index)) {
+				authorChanges.removed.push(index);
+			}
+			updateAuthorsDisplay();
+			utils.notifyReviewDisplay();
+		};
+
+		const cancelAuthorRemoval = (index) => {
+			if (!authorChanges.removed.includes(index)) return;
+			const removeIndex = authorChanges.removed.indexOf(index);
+			if (removeIndex > -1) {
+				authorChanges.removed.splice(removeIndex, 1);
+			}
+			updateAuthorsDisplay();
+			utils.notifyReviewDisplay();
+		};
+
+		if (addAuthorBtn) {
+			addAuthorBtn.addEventListener("click", addAuthor);
+		}
+
+		authorsList.addEventListener("input", (e) => {
+			if (
+				!e.target.classList.contains("author-name-input") &&
+				!e.target.classList.contains("author-orcid-input")
+			) {
+				return;
+			}
+			const index = Number.parseInt(e.target.dataset.index);
+			const field = e.target.dataset.field;
+			utils.ensureAuthorRecord(authors, index);
+			authors[index][field] = e.target.value;
+
+			if (index < originalAuthors.length) {
+				const originalAuthor = originalAuthors[index];
+				const originalValue =
+					typeof originalAuthor === "string"
+						? field === "name"
+							? originalAuthor
+							: ""
+						: originalAuthor[field] || "";
+
+				if (e.target.value !== originalValue) {
+					if (!authorChanges.modified[index]) {
+						authorChanges.modified[index] = {};
+					}
+					authorChanges.modified[index][field] = {
+						old: originalValue,
+						new: e.target.value,
+					};
+				} else if (authorChanges.modified[index]) {
+					delete authorChanges.modified[index][field];
+					if (Object.keys(authorChanges.modified[index]).length === 0) {
+						delete authorChanges.modified[index];
+					}
+				}
+			}
+
+			const needsUpdate = utils.removeTrailingEmptyAuthor(authors, index);
+			authorsHiddenField.value = JSON.stringify(authors);
+			if (needsUpdate) {
+				updateAuthorsDisplay();
+			}
+			utils.notifyReviewDisplay();
+		});
+
+		authorsList.addEventListener("click", (e) => {
+			const removeButton = e.target.closest(".remove-author");
+			const cancelButton = e.target.closest(".cancel-remove-author");
+			if (removeButton) {
+				e.preventDefault();
+				e.stopPropagation();
+				removeAuthor(Number.parseInt(removeButton.dataset.index));
+			} else if (cancelButton) {
+				e.preventDefault();
+				e.stopPropagation();
+				cancelAuthorRemoval(Number.parseInt(cancelButton.dataset.index));
+			}
+		});
+
+		updateAuthorsDisplay();
+		handler.authors = authors;
+		handler.originalAuthors = originalAuthors;
+		handler.authorChanges = authorChanges;
+		handler.updateAuthorsDisplay = updateAuthorsDisplay;
+
+		window.getAuthorChanges = () => authorChanges;
+		window.calculateAuthorChanges = (orig, current) =>
+			handler.calculateAuthorChanges(orig, current);
+		window.getCurrentAuthorsWithDOMIds = () =>
+			handler.getCurrentAuthorsWithDOMIds();
+		window.captureAuthorsWithDOMIds = (a) => handler.captureAuthorsWithDOMIds(a);
+
+		window.cancelAuthorAddition = (index) => {
+			if (!authorChanges.added.includes(index)) return;
+			const removeIndex = authorChanges.added.indexOf(index);
+			if (removeIndex > -1) {
+				authorChanges.added.splice(removeIndex, 1);
+			}
+			authors.splice(index, 1);
+			updateAuthorsDisplay();
+			utils.notifyReviewDisplay();
+		};
+
+		window.cancelAuthorRemoval = (index) => {
+			cancelAuthorRemoval(index);
+		};
+
+		window.cancelAuthorModification = (index, field) => {
+			if (!authorChanges.modified[index]?.[field]) return;
+			delete authorChanges.modified[index][field];
+			if (Object.keys(authorChanges.modified[index]).length === 0) {
+				delete authorChanges.modified[index];
+			}
+			if (originalAuthors[index]) {
+				const originalAuthor = originalAuthors[index];
+				const originalValue =
+					typeof originalAuthor === "string"
+						? field === "name"
+							? originalAuthor
+							: ""
+						: originalAuthor[field] || "";
+				authors[index][field] = originalValue;
+			}
+			updateAuthorsDisplay();
+			utils.notifyReviewDisplay();
+		};
+	}
+}
+
+window.DatasetAuthorsUI = DatasetAuthorsUI;
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { DatasetAuthorsUI };
+}
diff --git a/gateway/sds_gateway/static/js/dataset/DatasetCreationHandler.js b/gateway/sds_gateway/static/js/dataset/DatasetCreationHandler.js
index 171f72017..736fcd856 100644
--- a/gateway/sds_gateway/static/js/dataset/DatasetCreationHandler.js
+++ b/gateway/sds_gateway/static/js/dataset/DatasetCreationHandler.js
@@ -2,12 +2,14 @@
  * Dataset Creation Handler
  * Handles dataset creation workflow and form management
  */
-class DatasetCreationHandler {
+class DatasetCreationHandler extends BaseManager {
 	/**
 	 * Initialize dataset creation handler
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
+		this.currentUserId = config.currentUserId;
 		this.form = document.getElementById(config.formId);
 		this.steps = config.steps || [];
 		this.currentStep = 0;
@@ -238,17 +240,7 @@ class DatasetCreationHandler {
 			});
 		}
 
-		// Modal show/hide handlers
-		const modal = document.getElementById("fileTreeModal");
-		if (modal) {
-			modal.addEventListener("show.bs.modal", () => {
-				this.onFileModalShow();
-			});
-
-			modal.addEventListener("hidden.bs.modal", () => {
-				this.onFileModalHide();
-			});
-		}
+		window.AuthorsManager?.bindFileTreeModalHandlers(this);
 
 		// Remove all files button
 		const removeAllButton = document.getElementById(
@@ -660,7 +652,6 @@ class DatasetCreationHandler {
 	validateDatasetInfo() {
 		const nameValue = this.nameField?.value.trim() || "";
 		const authorsValue = this.authorsField?.value.trim() || "";
-		const statusValue = this.statusField?.value || "";
 
 		// Validate authors JSON and first author name
 		if (authorsValue) {
@@ -686,7 +677,7 @@ class DatasetCreationHandler {
 			return false; // Authors field is required
 		}
 
-		return nameValue !== "" && statusValue !== "";
+		return nameValue !== "";
 	}
 
 	/**
@@ -772,22 +763,29 @@ class DatasetCreationHandler {
 				context.message = "An unexpected error occurred. Please try again.";
 			}
 
-			context.format = "alert";
-			context.alert_type = "danger";
-			context.icon = "exclamation-triangle-fill";
+			const messageText = context.message ?? "";
+			const templateContext = {
+				alert_type: "danger",
+				icon: "exclamation-triangle-fill",
+			};
+			if (context.error_list) {
+				templateContext.error_list = context.error_list;
+				templateContext.show_field_names = context.show_field_names;
+			}
 
-			// Use DOMUtils to render error
-			const success = await window.DOMUtils.renderError(
-				errorContainer,
-				context.message,
-				context,
-			);
+			const success = await window.DOMUtils.showMessage(messageText, {
+				variant: "danger",
+				placement: "replace",
+				target: errorContainer,
+				presentation: "alert",
+				templateContext,
+			});
 			if (success) {
 				window.DOMUtils.show(errorContainer);
 				errorContainer.scrollIntoView({ behavior: "smooth", block: "nearest" });
 			}
-		} catch (renderError) {
-			console.error("Error rendering error message:", renderError);
+		} catch (err) {
+			console.error("Error rendering error message:", err);
 			// Fallback to simple text
 			errorContainer.textContent = "An error occurred. Please try again.";
 			window.DOMUtils.show(errorContainer);
@@ -896,11 +894,13 @@ class DatasetCreationHandler {
 				}
 			} catch (error) {
 				console.error("Error rendering captures table:", error);
-				await window.DOMUtils.renderError(
-					capturesTableBody,
-					"Error loading captures",
-					{ format: "table", colspan: 6 },
-				);
+				await window.DOMUtils.showMessage("Error loading captures", {
+					variant: "danger",
+					placement: "replace",
+					target: capturesTableBody,
+					presentation: "table",
+					templateContext: { colspan: 6 },
+				});
 			}
 		} else {
 			capturesTableBody.innerHTML =
@@ -976,11 +976,13 @@ class DatasetCreationHandler {
 				}
 			} catch (error) {
 				console.error("Error rendering captures panel:", error);
-				await window.DOMUtils.renderError(
-					selectedCapturesBody,
-					"Error loading captures",
-					{ format: "table", colspan: 3 },
-				);
+				await window.DOMUtils.showMessage("Error loading captures", {
+					variant: "danger",
+					placement: "replace",
+					target: selectedCapturesBody,
+					presentation: "table",
+					templateContext: { colspan: 3 },
+				});
 			}
 		} else {
 			selectedCapturesBody.innerHTML =
@@ -1037,11 +1039,13 @@ class DatasetCreationHandler {
 				}
 			} catch (error) {
 				console.error("Error rendering files table:", error);
-				await window.DOMUtils.renderError(
-					filesTableBody,
-					"Error loading files",
-					{ format: "table", colspan: 5 },
-				);
+				await window.DOMUtils.showMessage("Error loading files", {
+					variant: "danger",
+					placement: "replace",
+					target: filesTableBody,
+					presentation: "table",
+					templateContext: { colspan: 5 },
+				});
 			}
 		} else {
 			filesTableBody.innerHTML =
@@ -1198,297 +1202,7 @@ class DatasetCreationHandler {
 	 * Initialize authors management for creation mode
 	 */
 	initializeAuthorsManagement() {
-		const authorsContainer = document.getElementById("authors-container");
-		const authorsList = authorsContainer?.querySelector(".authors-list");
-		const addAuthorBtn = document.getElementById("add-author-btn");
-		const authorsHiddenField = document.getElementById("id_authors");
-
-		if (!authorsContainer || !authorsList || !authorsHiddenField) return;
-
-		// Get initial authors from the hidden field
-		let authors = [];
-		try {
-			const initialAuthors = authorsHiddenField.value;
-			if (initialAuthors && initialAuthors.trim() !== "") {
-				authors = JSON.parse(initialAuthors);
-			}
-		} catch (e) {
-			console.error("Error parsing initial authors:", e);
-		}
-
-		// Convert legacy string authors to new format if needed
-		authors = authors.map((author) => {
-			if (typeof author === "string") {
-				return {
-					name: author,
-					orcid_id: "",
-				};
-			}
-			return author;
-		});
-
-		// If no authors, add the current user as the first author
-		if (authors.length === 0) {
-			const currentUserName =
-				document.body.dataset.currentUserName || "Current User";
-			const currentUserOrcid = document.body.dataset.currentUserOrcid || "";
-			authors = [
-				{
-					name: currentUserName,
-					orcid_id: currentUserOrcid,
-				},
-			];
-		}
-
-		/**
-		 * Update authors display
-		 */
-		const updateAuthorsDisplay = async () => {
-			try {
-				// Normalize authors for server-side rendering
-				const normalizedAuthors = authors.map((author, index) => {
-					const authorName =
-						typeof author === "string" ? author : author.name || "";
-					const authorOrcid =
-						typeof author === "string" ? "" : author.orcid_id || "";
-
-					// Generate stable ID for each author
-					const stableId = `author-${index}-${Date.now()}`;
-
-					return {
-						index: index,
-						name: authorName,
-						orcid_id: authorOrcid,
-						stable_id: stableId,
-						is_primary: index === 0,
-						is_marked_for_removal: false,
-					};
-				});
-
-				// Render using server-side template
-				const response = await window.APIClient.post(
-					"/users/render-html/",
-					{
-						template: "users/components/author_list_items.html",
-						context: { authors: normalizedAuthors },
-					},
-					null,
-					true,
-				); // true = send as JSON
-
-				if (response.html) {
-					authorsList.innerHTML = response.html;
-				}
-			} catch (error) {
-				console.error("Error rendering authors:", error);
-				// Fallback: show error message
-				authorsList.innerHTML =
-					'<div class="alert alert-danger">Error loading authors</div>';
-			}
-
-			// Update hidden field
-			authorsHiddenField.value = JSON.stringify(authors);
-
-			// Show add button in create mode (always available)
-			if (addAuthorBtn) {
-				window.DOMUtils.show(addAuthorBtn);
-			}
-		};
-
-		/**
-		 * Add new author
-		 */
-		const addAuthor = () => {
-			authors.push({
-				name: "",
-				orcid_id: "",
-			});
-
-			updateAuthorsDisplay();
-
-			// Focus on the new name input
-			const newInput = authorsList.querySelector(
-				`input[data-index="${authors.length - 1}"][data-field="name"]`,
-			);
-			if (newInput) {
-				newInput.focus();
-			}
-
-			// Validate current step to update button states
-			this.validateCurrentStep();
-
-			// Update review display
-			if (window.updateReviewDatasetDisplay) {
-				window.updateReviewDatasetDisplay();
-			}
-		};
-
-		/**
-		 * Remove author
-		 */
-		const removeAuthor = (index) => {
-			if (index > 0) {
-				// Don't remove the primary author
-				authors.splice(index, 1);
-				updateAuthorsDisplay();
-
-				// Validate current step to update button states
-				this.validateCurrentStep();
-
-				// Update review display
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			} else {
-				// Show warning that primary author cannot be removed
-				this.showNotification(
-					"The primary author cannot be removed. This is the dataset creator.",
-					"warning",
-				);
-			}
-		};
-
-		/**
-		 * Show notification using alert system
-		 */
-		this.showNotification = async (message, type = "info") => {
-			const errorContainer = document.getElementById("formErrors");
-			if (!errorContainer) return;
-
-			try {
-				// Map type to Bootstrap alert class
-				const alertType =
-					type === "danger"
-						? "danger"
-						: type === "success"
-							? "success"
-							: type === "warning"
-								? "warning"
-								: "info";
-				const icon =
-					type === "danger"
-						? "exclamation-triangle"
-						: type === "success"
-							? "check-circle"
-							: type === "warning"
-								? "exclamation-circle"
-								: "info-circle";
-
-				const response = await window.APIClient.post(
-					"/users/render-html/",
-					{
-						template: "users/components/notification.html",
-						context: {
-							message: message,
-							alert_type: alertType,
-							icon: icon,
-							dismissible: true,
-						},
-					},
-					null,
-					true,
-				); // true = send as JSON
-
-				if (response.html) {
-					errorContainer.innerHTML = response.html;
-					window.DOMUtils.show(errorContainer);
-					errorContainer.scrollIntoView({
-						behavior: "smooth",
-						block: "nearest",
-					});
-
-					// Auto-hide after 5 seconds
-					setTimeout(() => {
-						const alert = errorContainer.querySelector(".alert");
-						if (alert) {
-							const bsAlert = new bootstrap.Alert(alert);
-							bsAlert.close();
-						}
-					}, 5000);
-				}
-			} catch (error) {
-				console.error("Error rendering notification:", error);
-				// Fallback: show simple text
-				errorContainer.textContent = message;
-				window.DOMUtils.show(errorContainer);
-			}
-		};
-
-		// Event listeners
-		if (addAuthorBtn) {
-			addAuthorBtn.addEventListener("click", addAuthor);
-		}
-
-		// Handle input changes
-		authorsList.addEventListener("input", (e) => {
-			if (
-				e.target.classList.contains("author-name-input") ||
-				e.target.classList.contains("author-orcid-input")
-			) {
-				const index = Number.parseInt(e.target.dataset.index);
-				const field = e.target.dataset.field;
-
-				// Ensure author object exists
-				if (!authors[index] || typeof authors[index] === "string") {
-					authors[index] = {
-						name: typeof authors[index] === "string" ? authors[index] : "",
-						orcid_id: "",
-					};
-				}
-
-				authors[index][field] = e.target.value;
-
-				// Only update display if we need to remove empty authors
-				let needsUpdate = false;
-				if (
-					index > 0 &&
-					!authors[index].name.trim() &&
-					!authors[index].orcid_id.trim()
-				) {
-					authors.splice(index, 1);
-					needsUpdate = true;
-				}
-
-				authorsHiddenField.value = JSON.stringify(authors);
-
-				// Only call updateAuthorsDisplay if we actually removed an author
-				if (needsUpdate) {
-					updateAuthorsDisplay();
-				}
-
-				// Validate current step to update button states
-				this.validateCurrentStep();
-
-				// Update review display if we're on the review step
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
-		});
-
-		// Handle remove buttons
-		authorsList.addEventListener("click", (e) => {
-			const removeButton = e.target.closest(".remove-author");
-
-			if (removeButton) {
-				e.preventDefault();
-				e.stopPropagation();
-				const index = Number.parseInt(removeButton.dataset.index);
-				removeAuthor(index);
-			}
-		});
-
-		// Initial display
-		updateAuthorsDisplay();
-
-		// Store authors for external access
-		this.authors = authors;
-		this.updateAuthorsDisplay = updateAuthorsDisplay;
-
-		// Make author display functions available for review (simple version for creation mode)
-		window.updateDatasetAuthors = (authorsField) =>
-			this.updateDatasetAuthors(authorsField);
-		window.formatAuthors = (authors) => this.formatAuthors(authors);
+		window.DatasetAuthorsUI?.mount(this, { mode: "create" });
 	}
 
 	/**
@@ -1513,15 +1227,7 @@ class DatasetCreationHandler {
 	 * Format authors array into display string
 	 */
 	formatAuthors(authors) {
-		if (!Array.isArray(authors) || authors.length === 0) {
-			return "No authors specified.";
-		}
-
-		return authors
-			.map((author) =>
-				typeof author === "string" ? author : author.name || "Unknown",
-			)
-			.join(", ");
+		return window.AuthorsManager.formatAuthors(authors);
 	}
 }
 
diff --git a/gateway/sds_gateway/static/js/dataset/DatasetEditingHandler.js b/gateway/sds_gateway/static/js/dataset/DatasetEditingHandler.js
index 2fe5c87cc..be51e7a1a 100644
--- a/gateway/sds_gateway/static/js/dataset/DatasetEditingHandler.js
+++ b/gateway/sds_gateway/static/js/dataset/DatasetEditingHandler.js
@@ -2,12 +2,13 @@
  * Dataset Editing Handler
  * Handles dataset editing workflow with pending changes management
  */
-class DatasetEditingHandler {
+class DatasetEditingHandler extends BaseManager {
 	/**
 	 * Initialize dataset editing handler
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
+		super();
 		this.datasetUuid = config.datasetUuid;
 		this.permissions = config.permissions; // PermissionsManager instance
 		this.currentUserId = config.currentUserId;
@@ -196,17 +197,7 @@ class DatasetEditingHandler {
 	 * Initialize file browser modal handlers
 	 */
 	initializeFileBrowserModal() {
-		// Modal show/hide handlers
-		const modal = document.getElementById("fileTreeModal");
-		if (modal) {
-			modal.addEventListener("show.bs.modal", () => {
-				this.onFileModalShow();
-			});
-
-			modal.addEventListener("hidden.bs.modal", () => {
-				this.onFileModalHide();
-			});
-		}
+		window.AuthorsManager?.bindFileTreeModalHandlers(this);
 	}
 
 	/**
@@ -288,11 +279,13 @@ class DatasetEditingHandler {
 			);
 
 			if (!success) {
-				await window.DOMUtils.renderError(
-					currentCapturesList,
-					"Error loading captures",
-					{ format: "table", colspan: 4 },
-				);
+				await window.DOMUtils.showMessage("Error loading captures", {
+					variant: "danger",
+					placement: "replace",
+					target: currentCapturesList,
+					presentation: "table",
+					templateContext: { colspan: 4 },
+				});
 			}
 
 			if (currentCapturesCount) {
@@ -375,11 +368,13 @@ class DatasetEditingHandler {
 			);
 
 			if (!success) {
-				await window.DOMUtils.renderError(
-					selectedFilesBody,
-					"Error loading files",
-					{ format: "table", colspan: 6 },
-				);
+				await window.DOMUtils.showMessage("Error loading files", {
+					variant: "danger",
+					placement: "replace",
+					target: selectedFilesBody,
+					presentation: "table",
+					templateContext: { colspan: 6 },
+				});
 			}
 
 			// Update the display input
@@ -433,6 +428,37 @@ class DatasetEditingHandler {
 		}
 	}
 
+	/**
+	 * Sync strikethrough / checkbox on the capture search results row (step 2).
+	 * @param {string} captureId
+	 * @param {boolean} markedForRemoval
+	 */
+	syncCaptureSearchRowRemovalStyle(captureId, markedForRemoval) {
+		const searchRow = document.querySelector(
+			`#captures-table-body tr[data-capture-id="${captureId}"]`,
+		);
+		if (!searchRow) return;
+
+		if (markedForRemoval) {
+			searchRow.classList.add("marked-for-removal");
+			const checkbox = searchRow.querySelector('input[type="checkbox"]');
+			if (checkbox) {
+				checkbox.checked = true;
+			}
+			return;
+		}
+
+		searchRow.classList.remove("marked-for-removal");
+		const checkbox = searchRow.querySelector('input[type="checkbox"]');
+		if (checkbox) {
+			const idStr = captureId.toString();
+			checkbox.checked =
+				this.currentCaptures.has(captureId) ||
+				this.currentCaptures.has(idStr) ||
+				this.selectedCaptures.has(idStr);
+		}
+	}
+
 	/**
 	 * Mark capture for removal
 	 * @param {string} captureId - Capture ID to mark for removal
@@ -465,17 +491,7 @@ class DatasetEditingHandler {
 		// Update visual state of current captures list
 		this.updateCurrentCapturesList();
 
-		// Also mark in the search results table if visible
-		const searchRow = document.querySelector(
-			`#captures-table-body tr[data-capture-id="${captureId}"]`,
-		);
-		if (searchRow) {
-			searchRow.classList.add("marked-for-removal");
-			const checkbox = searchRow.querySelector('input[type="checkbox"]');
-			if (checkbox) {
-				checkbox.checked = true;
-			}
-		}
+		this.syncCaptureSearchRowRemovalStyle(captureId, true);
 
 		this.updatePendingCapturesList();
 
@@ -612,62 +628,16 @@ class DatasetEditingHandler {
 	async updatePendingCapturesList() {
 		const pendingList = document.getElementById("pending-captures-list");
 		const pendingCount = document.querySelector(".pending-changes-count");
-
-		const allChanges = Array.from(this.pendingCaptures.entries());
-
-		if (allChanges.length === 0) {
-			pendingList.innerHTML =
-				'<tr><td colspan="3" class="text-center text-muted">No pending capture changes</td></tr>';
-			if (pendingCount) {
-				pendingCount.textContent = "0";
-			}
-			return;
-		}
-
-		// Normalize for generic table_rows template
-		const rows = allChanges.map(([id, change]) => ({
-			data_attrs: { "change-id": id },
-			cells: [
-				{
-					kind: "html",
-					tag: "span",
-					class: `badge bg-${change.action === "add" ? "success" : "danger"}`,
-					text: change.action === "add" ? "Add" : "Remove",
-				},
-				{ kind: "text", value: change.data.type },
-			],
-			actions: [
-				{
-					label: "Cancel",
-					css_class: "btn-secondary",
-					extra_class: "cancel-change",
-					data_attrs: {
-						"capture-id": id,
-						"change-type": "capture",
-					},
-				},
-			],
-		}));
-
-		// Render using DOMUtils
-		const success = await window.DOMUtils.renderTable(pendingList, rows, {
-			empty_message: "No pending capture changes",
-			empty_colspan: 3,
+		if (!pendingList) return;
+
+		await window.DatasetPendingChanges.renderPendingTable(this, {
+			listElement: pendingList,
+			countElement: pendingCount,
+			entries: Array.from(this.pendingCaptures.entries()),
+			valueKey: "type",
+			entityAttr: "capture",
+			emptyMessage: "No pending capture changes",
 		});
-
-		if (!success) {
-			await window.DOMUtils.renderError(pendingList, "Error loading changes", {
-				format: "table",
-				colspan: 3,
-			});
-		}
-
-		if (pendingCount) {
-			pendingCount.textContent = allChanges.length;
-		}
-
-		// Add event listeners for cancel buttons
-		this.addCancelButtonListeners();
 	}
 
 	/**
@@ -676,62 +646,16 @@ class DatasetEditingHandler {
 	async updatePendingFilesList() {
 		const pendingList = document.getElementById("pending-files-list");
 		const pendingCount = document.querySelector(".pending-files-changes-count");
-
-		const allChanges = Array.from(this.pendingFiles.entries());
-
-		if (allChanges.length === 0) {
-			pendingList.innerHTML =
-				'<tr><td colspan="3" class="text-center text-muted">No pending file changes</td></tr>';
-			if (pendingCount) {
-				pendingCount.textContent = "0";
-			}
-			return;
-		}
-
-		// Normalize for generic table_rows template
-		const rows = allChanges.map(([id, change]) => ({
-			data_attrs: { "change-id": id },
-			cells: [
-				{
-					kind: "html",
-					tag: "span",
-					class: `badge bg-${change.action === "add" ? "success" : "danger"}`,
-					text: change.action === "add" ? "Add" : "Remove",
-				},
-				{ kind: "text", value: change.data.name },
-			],
-			actions: [
-				{
-					label: "Cancel",
-					css_class: "btn-secondary",
-					extra_class: "cancel-change",
-					data_attrs: {
-						"file-id": id,
-						"change-type": "file",
-					},
-				},
-			],
-		}));
-
-		// Render using DOMUtils
-		const success = await window.DOMUtils.renderTable(pendingList, rows, {
-			empty_message: "No pending file changes",
-			empty_colspan: 3,
+		if (!pendingList) return;
+
+		await window.DatasetPendingChanges.renderPendingTable(this, {
+			listElement: pendingList,
+			countElement: pendingCount,
+			entries: Array.from(this.pendingFiles.entries()),
+			valueKey: "name",
+			entityAttr: "file",
+			emptyMessage: "No pending file changes",
 		});
-
-		if (!success) {
-			await window.DOMUtils.renderError(pendingList, "Error loading changes", {
-				format: "table",
-				colspan: 3,
-			});
-		}
-
-		if (pendingCount) {
-			pendingCount.textContent = allChanges.length;
-		}
-
-		// Add event listeners for cancel buttons
-		this.addCancelButtonListeners();
 	}
 
 	/**
@@ -766,11 +690,11 @@ class DatasetEditingHandler {
 		this.pendingCaptures.delete(captureId);
 
 		if (change.action === "remove") {
-			// Update visual state of current captures list
 			this.updateCurrentCapturesList();
+			this.syncCaptureSearchRowRemovalStyle(captureId, false);
 		} else if (change.action === "add") {
-			// Remove from selectedCaptures set so it shows as unchecked in search results
 			this.selectedCaptures.delete(captureId.toString());
+			this.syncCaptureSearchRowRemovalStyle(captureId, false);
 		}
 
 		this.updatePendingCapturesList();
@@ -1053,21 +977,21 @@ class DatasetEditingHandler {
 					window.location.href = result.redirect_url || "/users/dataset-list/";
 				} else {
 					// Show error message
-					this.showNotification(
+					this.showToast(
 						result.message || "An error occurred while updating the dataset.",
 						"error",
 					);
 				}
 			} else {
 				// Handle error response
-				this.showNotification(
+				this.showToast(
 					"An error occurred while updating the dataset.",
 					"error",
 				);
 			}
 		} catch (error) {
 			console.error("Error submitting form:", error);
-			this.showNotification(
+			this.showToast(
 				"An error occurred while updating the dataset.",
 				"error",
 			);
@@ -1085,461 +1009,10 @@ class DatasetEditingHandler {
 	 * Initialize authors management for edit mode
 	 */
 	initializeAuthorsManagement() {
-		// Always set up global functions for review display, regardless of edit permissions
-		window.updateDatasetAuthors = (authorsField) =>
-			this.updateDatasetAuthors(authorsField);
-		window.formatAuthors = (authors) => this.formatAuthors(authors);
-
-		const authorsContainer = document.getElementById("authors-container");
-		const authorsList = authorsContainer?.querySelector(".authors-list");
-		const addAuthorBtn = document.getElementById("add-author-btn");
-		const authorsHiddenField = document.getElementById("id_authors");
-
-		if (!authorsContainer || !authorsList || !authorsHiddenField) return;
-
-		// Get initial authors from the hidden field
-		let authors = [];
-		let originalAuthors = []; // Store original authors for edit mode
-		try {
-			const initialAuthors = authorsHiddenField.value;
-			if (initialAuthors && initialAuthors.trim() !== "") {
-				authors = JSON.parse(initialAuthors);
-			}
-		} catch (e) {
-			console.error("Error parsing initial authors:", e);
-		}
-
-		// Get original authors from dataset context
-		const datasetAuthors = this.initialAuthors || [];
-		originalAuthors = Array.isArray(datasetAuthors) ? datasetAuthors : [];
-
-		// Convert to consistent format
-		originalAuthors = originalAuthors.map((author) => {
-			if (typeof author === "string") {
-				return { name: author, orcid_id: "" };
-			}
-			return author;
-		});
-
-		// Convert legacy string authors to new format if needed
-		authors = authors.map((author) => {
-			if (typeof author === "string") {
-				return {
-					name: author,
-					orcid_id: "",
-				};
-			}
-			return author;
-		});
-
-		// Track author changes for edit mode
-		const authorChanges = {
-			added: [],
-			removed: [],
-			modified: {}, // index -> {old: string, new: string}
-		};
-
-		// Detect initial changes by comparing current authors with original authors
-		if (originalAuthors.length > 0) {
-			// Find new authors (authors in current list but not in original list)
-			for (const [index, author] of authors.entries()) {
-				const authorName = typeof author === "string" ? author : author.name;
-				const authorOrcid = typeof author === "string" ? "" : author.orcid_id;
-
-				// Check if this author exists in the original authors
-				const existsInOriginal = originalAuthors.some((origAuthor) => {
-					const origName =
-						typeof origAuthor === "string" ? origAuthor : origAuthor.name;
-					const origOrcid =
-						typeof origAuthor === "string" ? "" : origAuthor.orcid_id;
-					return origName === authorName && origOrcid === authorOrcid;
-				});
-
-				if (!existsInOriginal) {
-					authorChanges.added.push(index);
-				}
-			}
-
-			// Find removed authors (authors in original list but not in current list)
-			for (const [origIndex, origAuthor] of originalAuthors.entries()) {
-				const origName =
-					typeof origAuthor === "string" ? origAuthor : origAuthor.name;
-				const origOrcid =
-					typeof origAuthor === "string" ? "" : origAuthor.orcid_id;
-
-				// Check if this author exists in the current authors
-				const existsInCurrent = authors.some((author) => {
-					const authorName = typeof author === "string" ? author : author.name;
-					const authorOrcid = typeof author === "string" ? "" : author.orcid_id;
-					return authorName === origName && authorOrcid === origOrcid;
-				});
-
-				if (!existsInCurrent) {
-					// Find the index in the current authors array
-					const currentIndex = authors.findIndex((author) => {
-						const authorName =
-							typeof author === "string" ? author : author.name;
-						return authorName === origName;
-					});
-					if (currentIndex >= 0) {
-						authorChanges.removed.push(currentIndex);
-					}
-				}
-			}
-		}
-
-		/**
-		 * Update authors display
-		 */
-		const updateAuthorsDisplay = async () => {
-			try {
-				// Normalize authors for server-side rendering
-				const normalizedAuthors = authors.map((author, index) => {
-					const authorName =
-						typeof author === "string" ? author : author.name || "";
-					const authorOrcid =
-						typeof author === "string" ? "" : author.orcid_id || "";
-					const isMarkedForRemoval = authorChanges.removed.includes(index);
-
-					// Use existing stable ID or generate one
-					const stableId = author._stableId || `author-${index}-${Date.now()}`;
-
-					// Store stable ID back to author object
-					if (!author._stableId) {
-						author._stableId = stableId;
-					}
-
-					return {
-						index: index,
-						name: authorName,
-						orcid_id: authorOrcid,
-						stable_id: stableId,
-						is_primary: index === 0,
-						is_marked_for_removal: isMarkedForRemoval,
-					};
-				});
-
-				// Render using server-side template
-				const response = await window.APIClient.post(
-					"/users/render-html/",
-					{
-						template: "users/components/author_list_items.html",
-						context: { authors: normalizedAuthors },
-					},
-					null,
-					true,
-				); // true = send as JSON
-
-				if (response.html) {
-					authorsList.innerHTML = response.html;
-				}
-			} catch (error) {
-				console.error("Error rendering authors:", error);
-				// Fallback: show error message
-				authorsList.innerHTML =
-					'<div class="alert alert-danger">Error loading authors</div>';
-			}
-
-			// Update hidden field
-			authorsHiddenField.value = JSON.stringify(authors);
-
-			// Show/hide add button based on permissions
-			if (addAuthorBtn) {
-				if (this.permissions?.canEditMetadata) {
-					window.DOMUtils.show(addAuthorBtn);
-				} else {
-					window.DOMUtils.hide(addAuthorBtn);
-				}
-			}
-		};
-
-		/**
-		 * Add new author
-		 */
-		const addAuthor = () => {
-			const newIndex = authors.length;
-			authors.push({
-				name: "",
-				orcid_id: "",
-			});
-
-			// Track as added for change management
-			if (!authorChanges.added.includes(newIndex)) {
-				authorChanges.added.push(newIndex);
-			}
-
-			updateAuthorsDisplay();
-
-			// Focus on the new name input
-			const newInput = authorsList.querySelector(
-				`input[data-index="${newIndex}"][data-field="name"]`,
-			);
-			if (newInput) {
-				newInput.focus();
-			}
-
-			// Update review display
-			if (window.updateReviewDatasetDisplay) {
-				window.updateReviewDatasetDisplay();
-			}
-		};
-
-		/**
-		 * Remove author
-		 */
-		const removeAuthor = (index) => {
-			if (index > 0) {
-				// Don't remove the primary author
-				// Check if this is a newly added author
-				const isNewlyAdded = authorChanges.added.includes(index);
-
-				if (isNewlyAdded) {
-					// If it's a newly added author, completely remove it
-					authors.splice(index, 1);
-
-					// Remove from the added list
-					const addIndex = authorChanges.added.indexOf(index);
-					if (addIndex > -1) {
-						authorChanges.added.splice(addIndex, 1);
-					}
-
-					// Adjust indices in the added list for authors that come after this one
-					authorChanges.added = authorChanges.added.map((addedIndex) =>
-						addedIndex > index ? addedIndex - 1 : addedIndex,
-					);
-
-					// Adjust indices in the removed list for authors that come after this one
-					authorChanges.removed = authorChanges.removed.map((removedIndex) =>
-						removedIndex > index ? removedIndex - 1 : removedIndex,
-					);
-
-					// Adjust indices in the modified list for authors that come after this one
-					const newModified = {};
-					for (const [modifiedIndex, changes] of Object.entries(
-						authorChanges.modified,
-					)) {
-						const numIndex = Number.parseInt(modifiedIndex);
-						if (numIndex > index) {
-							newModified[numIndex - 1] = changes;
-						} else if (numIndex < index) {
-							newModified[numIndex] = changes;
-						}
-					}
-					authorChanges.modified = newModified;
-				} else {
-					// For existing authors, mark for removal instead of actually removing
-					if (!authorChanges.removed.includes(index)) {
-						authorChanges.removed.push(index);
-					}
-				}
-
-				updateAuthorsDisplay();
-
-				// Update review display
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			} else {
-				// Show warning that primary author cannot be removed
-				this.showNotification(
-					"The primary author cannot be removed. This is the dataset creator.",
-					"warning",
-				);
-			}
-		};
-
-		/**
-		 * Cancel author removal
-		 */
-		const cancelAuthorRemoval = (index) => {
-			if (authorChanges.removed.includes(index)) {
-				const removeIndex = authorChanges.removed.indexOf(index);
-				if (removeIndex > -1) {
-					authorChanges.removed.splice(removeIndex, 1);
-				}
-				updateAuthorsDisplay();
-
-				// Update review display
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
-		};
-
-		/**
-		 * Show notification using DOMUtils
-		 */
-		this.showNotification = (message, type = "info") => {
-			if (window.DOMUtils) {
-				window.DOMUtils.showAlert(message, type);
-			} else {
-				console.error("DOMUtils not available");
-			}
-		};
-
-		// Event listeners
-		if (addAuthorBtn) {
-			addAuthorBtn.addEventListener("click", addAuthor);
-		}
-
-		// Handle input changes
-		authorsList.addEventListener("input", (e) => {
-			if (
-				e.target.classList.contains("author-name-input") ||
-				e.target.classList.contains("author-orcid-input")
-			) {
-				const index = Number.parseInt(e.target.dataset.index);
-				const field = e.target.dataset.field;
-
-				// Ensure author object exists
-				if (!authors[index] || typeof authors[index] === "string") {
-					authors[index] = {
-						name: typeof authors[index] === "string" ? authors[index] : "",
-						orcid_id: "",
-					};
-				}
-
-				const oldValue = authors[index][field];
-				authors[index][field] = e.target.value;
-
-				// Track modifications in edit mode
-				if (index < originalAuthors.length) {
-					const originalAuthor = originalAuthors[index];
-					const originalValue =
-						typeof originalAuthor === "string"
-							? field === "name"
-								? originalAuthor
-								: ""
-							: originalAuthor[field] || "";
-
-					if (e.target.value !== originalValue) {
-						if (!authorChanges.modified[index]) {
-							authorChanges.modified[index] = {};
-						}
-						authorChanges.modified[index][field] = {
-							old: originalValue,
-							new: e.target.value,
-						};
-					} else {
-						if (authorChanges.modified[index]) {
-							delete authorChanges.modified[index][field];
-							if (Object.keys(authorChanges.modified[index]).length === 0) {
-								delete authorChanges.modified[index];
-							}
-						}
-					}
-				}
-
-				// Only update display if we need to remove empty authors
-				let needsUpdate = false;
-				if (
-					index > 0 &&
-					!authors[index].name.trim() &&
-					!authors[index].orcid_id.trim()
-				) {
-					authors.splice(index, 1);
-					needsUpdate = true;
-				}
-
-				authorsHiddenField.value = JSON.stringify(authors);
-
-				// Only call updateAuthorsDisplay if we actually removed an author
-				if (needsUpdate) {
-					updateAuthorsDisplay();
-				}
-
-				// Update review display if we're on the review step
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
+		window.DatasetAuthorsUI?.mount(this, {
+			mode: "edit",
+			initialAuthors: this.initialAuthors,
 		});
-
-		// Handle remove and cancel buttons
-		authorsList.addEventListener("click", (e) => {
-			const removeButton = e.target.closest(".remove-author");
-			const cancelButton = e.target.closest(".cancel-remove-author");
-
-			if (removeButton) {
-				e.preventDefault();
-				e.stopPropagation();
-				const index = Number.parseInt(removeButton.dataset.index);
-				removeAuthor(index);
-			} else if (cancelButton) {
-				e.preventDefault();
-				e.stopPropagation();
-				const index = Number.parseInt(cancelButton.dataset.index);
-				cancelAuthorRemoval(index);
-			}
-		});
-
-		// Initial display
-		updateAuthorsDisplay();
-
-		// Store authors and changes for external access
-		this.authors = authors;
-		this.originalAuthors = originalAuthors;
-		this.authorChanges = authorChanges;
-		this.updateAuthorsDisplay = updateAuthorsDisplay;
-
-		// Make functions available globally for review display
-		window.getAuthorChanges = () => authorChanges;
-		window.calculateAuthorChanges = (originalAuthors, currentAuthors) =>
-			this.calculateAuthorChanges(originalAuthors, currentAuthors);
-		window.getCurrentAuthorsWithDOMIds = () =>
-			this.getCurrentAuthorsWithDOMIds();
-		window.captureAuthorsWithDOMIds = (authors) =>
-			this.captureAuthorsWithDOMIds(authors);
-		window.cancelAuthorAddition = (index) => {
-			if (authorChanges.added.includes(index)) {
-				const removeIndex = authorChanges.added.indexOf(index);
-				if (removeIndex > -1) {
-					authorChanges.added.splice(removeIndex, 1);
-				}
-				authors.splice(index, 1);
-				updateAuthorsDisplay();
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
-		};
-
-		window.cancelAuthorRemoval = (index) => {
-			if (authorChanges.removed.includes(index)) {
-				const removeIndex = authorChanges.removed.indexOf(index);
-				if (removeIndex > -1) {
-					authorChanges.removed.splice(removeIndex, 1);
-				}
-				updateAuthorsDisplay();
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
-		};
-
-		window.cancelAuthorModification = (index, field) => {
-			if (authorChanges.modified[index]?.[field]) {
-				delete authorChanges.modified[index][field];
-				if (Object.keys(authorChanges.modified[index]).length === 0) {
-					delete authorChanges.modified[index];
-				}
-				// Restore original value
-				if (originalAuthors[index]) {
-					const originalAuthor = originalAuthors[index];
-					const originalValue =
-						typeof originalAuthor === "string"
-							? field === "name"
-								? originalAuthor
-								: ""
-							: originalAuthor[field] || "";
-					authors[index][field] = originalValue;
-				}
-				updateAuthorsDisplay();
-				if (window.updateReviewDatasetDisplay) {
-					window.updateReviewDatasetDisplay();
-				}
-			}
-		};
 	}
 
 	/**
@@ -1672,38 +1145,7 @@ class DatasetEditingHandler {
 	 * Get current authors with DOM-based stable IDs
 	 */
 	getCurrentAuthorsWithDOMIds() {
-		const authorsList = document.querySelector(".authors-list");
-		const currentAuthors = [];
-
-		if (authorsList) {
-			// Get all visible author items (not marked for removal)
-			const authorItems = authorsList.querySelectorAll(
-				".author-item:not(.marked-for-removal)",
-			);
-
-			for (const [index, authorItem] of authorItems.entries()) {
-				// Get the stable ID from the DOM element
-				const authorId = authorItem.id;
-				if (!authorId) {
-					console.error("❌ Author item missing ID");
-					return;
-				}
-
-				// Get current values from the inputs
-				const nameInput = authorItem.querySelector(".author-name-input");
-				const orcidInput = authorItem.querySelector(".author-orcid-input");
-
-				const authorData = {
-					name: nameInput?.value || "",
-					orcid_id: orcidInput?.value || "",
-					_stableId: authorId,
-				};
-
-				currentAuthors.push(authorData);
-			}
-		}
-
-		return currentAuthors;
+		return window.AuthorsManager.getCurrentAuthorsWithDOMIds();
 	}
 
 	/**
@@ -1755,15 +1197,7 @@ class DatasetEditingHandler {
 	 * Format authors array into display string
 	 */
 	formatAuthors(authors) {
-		if (!Array.isArray(authors) || authors.length === 0) {
-			return "No authors specified.";
-		}
-
-		return authors
-			.map((author) =>
-				typeof author === "string" ? author : author.name || "Unknown",
-			)
-			.join(", ");
+		return window.AuthorsManager.formatAuthors(authors);
 	}
 
 	/**
diff --git a/gateway/sds_gateway/static/js/dataset/DatasetModeManager.js b/gateway/sds_gateway/static/js/dataset/DatasetModeManager.js
index 81c1d5916..af6ed8aef 100644
--- a/gateway/sds_gateway/static/js/dataset/DatasetModeManager.js
+++ b/gateway/sds_gateway/static/js/dataset/DatasetModeManager.js
@@ -81,89 +81,16 @@ class DatasetModeManager {
 	 * Capture original dataset data for change tracking
 	 */
 	captureOriginalDatasetData() {
-		const nameField = document.getElementById("id_name");
-		const statusField = document.getElementById("id_status");
-		const descriptionField = document.getElementById("id_description");
-		const authorsField = document.getElementById("id_authors");
-
-		const originalData = {};
-
-		// In edit mode, try to get data from form fields first, then fall back to config
-		if (this.isEditMode) {
-			// Try to get from form fields (when user can edit metadata)
-			if (nameField) {
-				originalData.name = nameField.value || "Untitled Dataset";
-			} else {
-				// Fall back to readonly field or config data
-				const readonlyNameField = document.querySelector(
-					"input[readonly][value]",
-				);
-				originalData.name =
-					readonlyNameField?.value ||
-					this.config.existingDatasetName ||
-					"Untitled Dataset";
-			}
-
-			if (statusField) {
-				// Status field is a hidden input, use the value directly
-				const statusValue = statusField.value || "draft";
-				// Convert value to display text
-				originalData.status = statusValue === "final" ? "Final" : "Draft";
-			} else {
-				// Fall back to readonly field or config data
-				const readonlyStatusField = document.querySelector("input[readonly]");
-				originalData.status =
-					readonlyStatusField?.value ||
-					this.config.existingDatasetStatus ||
-					"Unknown";
-			}
-
-			if (descriptionField) {
-				originalData.description =
-					descriptionField.value || "No description provided.";
-			} else {
-				// Fall back to readonly field or config data
-				const readonlyDescField = document.querySelector("textarea[readonly]");
-				originalData.description =
-					readonlyDescField?.value ||
-					this.config.existingDatasetDescription ||
-					"No description provided.";
-			}
-
-			if (authorsField) {
-				try {
-					const authors = JSON.parse(authorsField.value || "[]");
-					originalData.authors = authors;
-				} catch (e) {
-					originalData.authors = [];
-				}
-			} else {
-				// Fall back to config data for authors
-				originalData.authors = this.config.initialAuthors || [];
-			}
-		} else {
-			// Creation mode - get from form fields
-			originalData.name = nameField?.value || "Untitled Dataset";
-			if (statusField) {
-				// Status field is a hidden input, use the value directly
-				const statusValue = statusField.value || "draft";
-				// Convert value to display text
-				originalData.status = statusValue === "final" ? "Final" : "Draft";
-			}
-			originalData.description =
-				descriptionField?.value || "No description provided.";
-
-			if (authorsField) {
-				try {
-					const authors = JSON.parse(authorsField.value || "[]");
-					originalData.authors = authors;
-				} catch (e) {
-					originalData.authors = [];
-				}
-			}
+		const capture = window.captureDatasetFormSnapshot;
+		if (typeof capture === "function") {
+			return capture(this.isEditMode, this.config);
 		}
-
-		return originalData;
+		return {
+			name: "Untitled Dataset",
+			status: "Draft",
+			description: "No description provided.",
+			authors: [],
+		};
 	}
 
 	/**
@@ -811,9 +738,12 @@ class DatasetModeManager {
 		});
 
 		if (!success) {
-			await window.DOMUtils.renderError(pendingTable, "Error loading changes", {
-				format: "table",
-				colspan: 5,
+			await window.DOMUtils.showMessage("Error loading changes", {
+				variant: "danger",
+				placement: "replace",
+				target: pendingTable,
+				presentation: "table",
+				templateContext: { colspan: 5 },
 			});
 		}
 
diff --git a/gateway/sds_gateway/static/js/dataset/DatasetPendingChanges.js b/gateway/sds_gateway/static/js/dataset/DatasetPendingChanges.js
new file mode 100644
index 000000000..220832343
--- /dev/null
+++ b/gateway/sds_gateway/static/js/dataset/DatasetPendingChanges.js
@@ -0,0 +1,81 @@
+/**
+ * Shared pending capture/file change tables for dataset edit review.
+ */
+class DatasetPendingChanges {
+	static buildRow(id, change, valueKey, entityAttr) {
+		return {
+			data_attrs: { "change-id": id },
+			cells: [
+				{
+					kind: "html",
+					tag: "span",
+					class: `badge bg-${change.action === "add" ? "success" : "danger"}`,
+					text: change.action === "add" ? "Add" : "Remove",
+				},
+				{ kind: "text", value: change.data[valueKey] },
+			],
+			actions: [
+				{
+					label: "Cancel",
+					css_class: "btn-secondary",
+					extra_class: "cancel-change",
+					data_attrs: {
+						[`${entityAttr}-id`]: id,
+						"change-type": entityAttr,
+					},
+				},
+			],
+		};
+	}
+
+	static async renderPendingTable(
+		handler,
+		{
+			listElement,
+			countElement,
+			entries,
+			valueKey,
+			entityAttr,
+			emptyMessage,
+		},
+	) {
+		if (entries.length === 0) {
+			listElement.innerHTML = `<tr><td colspan="3" class="text-center text-muted">${emptyMessage}</td></tr>`;
+			if (countElement) {
+				countElement.textContent = "0";
+			}
+			return;
+		}
+
+		const rows = entries.map(([id, change]) =>
+			this.buildRow(id, change, valueKey, entityAttr),
+		);
+
+		const success = await window.DOMUtils.renderTable(listElement, rows, {
+			empty_message: emptyMessage,
+			empty_colspan: 3,
+		});
+
+		if (!success) {
+			await window.DOMUtils.showMessage("Error loading changes", {
+				variant: "danger",
+				placement: "replace",
+				target: listElement,
+				presentation: "table",
+				templateContext: { colspan: 3 },
+			});
+		}
+
+		if (countElement) {
+			countElement.textContent = String(entries.length);
+		}
+
+		handler.addCancelButtonListeners();
+	}
+}
+
+window.DatasetPendingChanges = DatasetPendingChanges;
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { DatasetPendingChanges };
+}
diff --git a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetCreationHandler.test.js b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetCreationHandler.test.js
index c2ef1960e..bdaae2244 100644
--- a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetCreationHandler.test.js
+++ b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetCreationHandler.test.js
@@ -7,6 +7,8 @@ import { APIError } from "../../core/APIClient.js";
 // Import the DatasetCreationHandler class
 import { DatasetCreationHandler } from "../DatasetCreationHandler.js";
 
+const { createMockDOMUtils } = require("../../tests-config/testHelpers.js");
+
 describe("DatasetCreationHandler", () => {
 	let creationHandler;
 	let mockForm;
@@ -182,16 +184,7 @@ describe("DatasetCreationHandler", () => {
 		// Make classes available globally (as the actual code expects them)
 		global.APIError = APIError;
 
-		// Mock DOMUtils (replaces HTMLInjectionManager)
-		global.window.DOMUtils = {
-			show: jest.fn(),
-			hide: jest.fn(),
-			showAlert: jest.fn(),
-			renderError: jest.fn().mockResolvedValue(true),
-			renderLoading: jest.fn().mockResolvedValue(true),
-			renderContent: jest.fn().mockResolvedValue(true),
-			renderTable: jest.fn().mockResolvedValue(true),
-		};
+		global.window.DOMUtils = createMockDOMUtils();
 
 		// Mock window.APIClient (what the actual code uses)
 		global.window.APIClient = {
diff --git a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetEditingHandler.test.js b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetEditingHandler.test.js
index 78dd0bd2e..725366aed 100644
--- a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetEditingHandler.test.js
+++ b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetEditingHandler.test.js
@@ -6,75 +6,33 @@
 // Import the DatasetEditingHandler class
 import { DatasetEditingHandler } from "../DatasetEditingHandler.js";
 
+const {
+	setupStandardUnitTest,
+	mockDatasetEditingHandlerConfig,
+	createMockPermissionsManager,
+	mergeWindowMocks,
+} = require("../../tests-config/testHelpers.js");
+
 describe("DatasetEditingHandler", () => {
 	let editingHandler;
 	let mockConfig;
 	let mockPermissions;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Create simple mock permissions
-		mockPermissions = {
-			userPermissionLevel: "owner",
-			isOwner: true,
-			currentUserId: 1,
-			datasetPermissions: { canEditMetadata: true },
-			canEditMetadata: jest.fn(() => true),
-			canAddAssets: jest.fn(() => true),
-			canRemoveOwnAssets: jest.fn(() => true),
-			canRemoveAnyAssets: jest.fn(() => true),
-			canShare: jest.fn(() => true),
-			canDownload: jest.fn(() => true),
-			canView: jest.fn(() => true),
-			canAddAsset: jest.fn(() => true),
-			canRemoveAsset: jest.fn(() => true),
-		};
-
-		// Mock config
-		mockConfig = {
-			datasetUuid: "test-dataset-uuid",
-			permissions: mockPermissions,
-			currentUserId: 1,
-			initialCaptures: [
-				{ id: 1, name: "Capture 1", type: "drf", owner_id: 1 },
-				{ id: 2, name: "Capture 2", type: "drf", owner_id: 2 },
-			],
-			initialFiles: [
-				{ id: 1, name: "file1.h5", size: "1.2 MB", owner_id: 1 },
-				{ id: 2, name: "file2.h5", size: "2.5 MB", owner_id: 2 },
-			],
-		};
-
-		// Minimal DOM mocks
-		document.getElementById = jest.fn(() => null);
-		document.querySelector = jest.fn(() => null);
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Minimal window mocks
-		global.window = {
+		mockPermissions = createMockPermissionsManager();
+		mockConfig = mockDatasetEditingHandlerConfig({ permissions: mockPermissions });
+
+		setupStandardUnitTest();
+		mergeWindowMocks({
 			AssetSearchHandler: jest.fn().mockImplementation(() => ({
 				selectedCaptures: new Set(),
-				selectedFiles: new Set(),
+				selectedFiles: new Map(),
 				selectedCaptureDetails: new Map(),
+				initializeCapturesSearch: jest.fn(),
+				initializeEventListeners: jest.fn(),
+				updateSelectedFilesList: jest.fn(),
 			})),
-			DOMUtils: {
-				show: jest.fn(),
-				hide: jest.fn(),
-				showAlert: jest.fn(),
-				renderError: jest.fn().mockResolvedValue(true),
-				renderLoading: jest.fn().mockResolvedValue(true),
-				renderContent: jest.fn().mockResolvedValue(true),
-				renderTable: jest.fn().mockResolvedValue(true),
-			},
-		};
-
-		// Minimal API mocks
-		global.APIClient = {
-			get: jest.fn().mockResolvedValue({ success: true, data: {} }),
-			post: jest.fn().mockResolvedValue({ success: true }),
-		};
+		});
 	});
 
 	describe("Initialization", () => {
@@ -165,21 +123,14 @@ describe("DatasetEditingHandler", () => {
 		});
 
 		test("should handle contributor permissions correctly", () => {
-			const contributorPermissions = {
+			const contributorPermissions = createMockPermissionsManager({
 				userPermissionLevel: "contributor",
 				isOwner: false,
-				currentUserId: 1,
-				datasetPermissions: { canEditMetadata: true },
-				canEditMetadata: jest.fn(() => true),
-				canAddAssets: jest.fn(() => true),
-				canRemoveOwnAssets: jest.fn(() => true),
 				canRemoveAnyAssets: jest.fn(() => false),
 				canShare: jest.fn(() => false),
-				canDownload: jest.fn(() => true),
-				canView: jest.fn(() => true),
 				canAddAsset: jest.fn((asset) => asset.owner_id === 1),
 				canRemoveAsset: jest.fn((asset) => asset.owner_id === 1),
-			};
+			});
 
 			const contributorHandler = new DatasetEditingHandler({
 				...mockConfig,
diff --git a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetModeManager.test.js b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetModeManager.test.js
index d1ca3ce79..0c38ddcff 100644
--- a/gateway/sds_gateway/static/js/dataset/__tests__/DatasetModeManager.test.js
+++ b/gateway/sds_gateway/static/js/dataset/__tests__/DatasetModeManager.test.js
@@ -16,62 +16,27 @@ import { DatasetEditingHandler } from "../DatasetEditingHandler.js";
 // Import the DatasetModeManager class
 import { DatasetModeManager } from "../DatasetModeManager.js";
 
+const {
+	createPermissionsManagerMockInstance,
+	installDatasetModeHandlerMocks,
+	createPublishingSubmitDomFixture,
+	createDatasetModeManagerMockConfig,
+} = require("../../tests-config/testHelpers.js");
+
 describe("DatasetModeManager", () => {
 	let modeManager;
 	let mockConfig;
 
 	beforeEach(() => {
-		// Reset mocks
 		jest.clearAllMocks();
-
-		// Mock config for edit mode
-		mockConfig = {
-			datasetUuid: "test-dataset-uuid",
-			userPermissionLevel: "owner",
-			currentUserId: 1,
-			isOwner: true,
-			datasetPermissions: {
-				canEditMetadata: true,
-				canAddAssets: true,
-			},
-		};
-
-		// Mock PermissionsManager instance
-		const mockPermissions = {
-			canEditMetadata: jest.fn(() => true),
-			canAddAssets: jest.fn(() => true),
-			canRemoveAnyAssets: jest.fn(() => true),
-			canRemoveOwnAssets: jest.fn(() => true),
-			canShare: jest.fn(() => true),
-			canDownload: jest.fn(() => true),
-			canView: jest.fn(() => true),
-		};
-
-		// Mock the constructor
-		PermissionsManager.mockImplementation(() => mockPermissions);
-
-		// Mock handler instances
-		const mockEditingHandler = {
-			initialize: jest.fn(),
-			setupEventListeners: jest.fn(),
-			loadDatasetData: jest.fn(),
-			filesSearchHandler: {
-				initialize: jest.fn(),
-				search: jest.fn(),
-			},
-		};
-
-		const mockCreationHandler = {
-			initialize: jest.fn(),
-			setupEventListeners: jest.fn(),
-			filesSearchHandler: {
-				initialize: jest.fn(),
-				search: jest.fn(),
-			},
-		};
-
-		DatasetEditingHandler.mockImplementation(() => mockEditingHandler);
-		DatasetCreationHandler.mockImplementation(() => mockCreationHandler);
+		mockConfig = createDatasetModeManagerMockConfig();
+		PermissionsManager.mockImplementation(() =>
+			createPermissionsManagerMockInstance(),
+		);
+		installDatasetModeHandlerMocks(
+			DatasetEditingHandler,
+			DatasetCreationHandler,
+		);
 	});
 
 	describe("Edit Mode Initialization", () => {
@@ -362,120 +327,36 @@ describe("DatasetModeManager", () => {
 		});
 
 		test("should update submit button for publishing public dataset", () => {
-			const submitBtn = document.createElement("button");
-			submitBtn.id = "submitForm";
-			submitBtn.classList = {
-				contains: jest.fn(() => false),
-			};
-			// Mock offsetParent as read-only property
-			Object.defineProperty(submitBtn, "offsetParent", {
-				get: () => submitBtn,
-				configurable: true,
+			const { submitBtn, install } = createPublishingSubmitDomFixture({
+				publicChecked: true,
+				statusValue: "final",
+				publishToggleChecked: true,
 			});
-
-			const publishToggle = document.createElement("input");
-			publishToggle.id = "publish-dataset-toggle";
-			publishToggle.checked = true;
-
-			const statusField = document.createElement("input");
-			statusField.id = "id_status";
-			statusField.value = "final";
-
-			const publicOption = document.createElement("input");
-			publicOption.id = "public-option";
-			publicOption.checked = true;
-
-			document.getElementById = jest.fn((id) => {
-				const elements = {
-					submitForm: submitBtn,
-					"publish-dataset-toggle": publishToggle,
-					id_status: statusField,
-					"public-option": publicOption,
-				};
-				return elements[id] || null;
-			});
-
-			// Mock getComputedStyle
-			window.getComputedStyle = jest.fn(() => ({
-				display: "block",
-			}));
-
+			install();
 			modeManager.updateSubmitButton();
 			expect(submitBtn.className).toBe("btn btn-danger");
 			expect(submitBtn.textContent).toBe("Publish Dataset");
 		});
 
 		test("should update submit button for publishing private dataset", () => {
-			const submitBtn = document.createElement("button");
-			submitBtn.id = "submitForm";
-			submitBtn.classList = {
-				contains: jest.fn(() => false),
-			};
-			// Mock offsetParent as read-only property
-			Object.defineProperty(submitBtn, "offsetParent", {
-				get: () => submitBtn,
-				configurable: true,
+			const { submitBtn, install } = createPublishingSubmitDomFixture({
+				publicChecked: false,
+				statusValue: "final",
+				publishToggleChecked: true,
 			});
-
-			const publishToggle = document.createElement("input");
-			publishToggle.id = "publish-dataset-toggle";
-			publishToggle.checked = true;
-
-			const statusField = document.createElement("input");
-			statusField.id = "id_status";
-			statusField.value = "final";
-
-			const publicOption = document.createElement("input");
-			publicOption.id = "public-option";
-			publicOption.checked = false;
-
-			document.getElementById = jest.fn((id) => {
-				const elements = {
-					submitForm: submitBtn,
-					"publish-dataset-toggle": publishToggle,
-					id_status: statusField,
-					"public-option": publicOption,
-				};
-				return elements[id] || null;
-			});
-
-			window.getComputedStyle = jest.fn(() => ({
-				display: "block",
-			}));
-
+			install();
 			modeManager.updateSubmitButton();
 			expect(submitBtn.className).toBe("btn btn-warning");
 			expect(submitBtn.textContent).toBe("Publish Dataset");
 		});
 
 		test("should update submit button for draft dataset", () => {
-			const submitBtn = document.createElement("button");
-			submitBtn.id = "submitForm";
-			submitBtn.classList = {
-				contains: jest.fn(() => false),
-			};
-			// Mock offsetParent as read-only property
-			Object.defineProperty(submitBtn, "offsetParent", {
-				get: () => submitBtn,
-				configurable: true,
-			});
-
-			const publishToggle = document.createElement("input");
-			publishToggle.id = "publish-dataset-toggle";
-			publishToggle.checked = false;
-
-			document.getElementById = jest.fn((id) => {
-				const elements = {
-					submitForm: submitBtn,
-					"publish-dataset-toggle": publishToggle,
-				};
-				return elements[id] || null;
+			const { submitBtn, install } = createPublishingSubmitDomFixture({
+				publishToggleChecked: false,
+				includeStatus: false,
+				includePublicOption: false,
 			});
-
-			window.getComputedStyle = jest.fn(() => ({
-				display: "block",
-			}));
-
+			install();
 			modeManager.updateSubmitButton();
 			expect(submitBtn.className).toBe("btn btn-success");
 			expect(submitBtn.textContent).toBe("Update Dataset");
diff --git a/gateway/sds_gateway/static/js/dataset/datasetFormSnapshot.js b/gateway/sds_gateway/static/js/dataset/datasetFormSnapshot.js
new file mode 100644
index 000000000..ac43f39d7
--- /dev/null
+++ b/gateway/sds_gateway/static/js/dataset/datasetFormSnapshot.js
@@ -0,0 +1,90 @@
+/**
+ * Read dataset metadata fields from the create/edit form for change tracking.
+ */
+
+function readDatasetNameField(isEditMode, config) {
+	const nameField = document.getElementById("id_name");
+	if (nameField) {
+		return nameField.value || "Untitled Dataset";
+	}
+	if (!isEditMode) {
+		return "Untitled Dataset";
+	}
+	const readonlyNameField = document.querySelector("input[readonly][value]");
+	return (
+		readonlyNameField?.value ||
+		config.existingDatasetName ||
+		"Untitled Dataset"
+	);
+}
+
+function readDatasetStatusField(isEditMode, config) {
+	const statusField = document.getElementById("id_status");
+	if (statusField) {
+		const statusValue = statusField.value || "draft";
+		return statusValue === "final" ? "Final" : "Draft";
+	}
+	if (!isEditMode) {
+		return "Draft";
+	}
+	const statusBadge = document.getElementById("current-status-badge");
+	if (statusBadge?.textContent) {
+		return statusBadge.textContent.trim();
+	}
+	return config.existingDatasetStatus || "Unknown";
+}
+
+function readDatasetDescriptionField(isEditMode, config) {
+	const descriptionField = document.getElementById("id_description");
+	if (descriptionField) {
+		return descriptionField.value || "No description provided.";
+	}
+	if (!isEditMode) {
+		return "No description provided.";
+	}
+	const readonlyDescField = document.querySelector("textarea[readonly]");
+	return (
+		readonlyDescField?.value ||
+		config.existingDatasetDescription ||
+		"No description provided."
+	);
+}
+
+function readDatasetAuthorsField(isEditMode, config) {
+	const authorsField = document.getElementById("id_authors");
+	if (!authorsField) {
+		return isEditMode ? config.initialAuthors || [] : [];
+	}
+	try {
+		return JSON.parse(authorsField.value || "[]");
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * @param {boolean} isEditMode
+ * @param {object} config - DatasetModeManager config
+ */
+function captureDatasetFormSnapshot(isEditMode, config) {
+	return {
+		name: readDatasetNameField(isEditMode, config),
+		status: readDatasetStatusField(isEditMode, config),
+		description: readDatasetDescriptionField(isEditMode, config),
+		authors: readDatasetAuthorsField(isEditMode, config),
+	};
+}
+
+if (typeof window !== "undefined") {
+	window.captureDatasetFormSnapshot = captureDatasetFormSnapshot;
+}
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = {
+		captureDatasetFormSnapshot,
+		readDatasetNameField,
+		readDatasetStatusField,
+		readDatasetDescriptionField,
+		readDatasetAuthorsField,
+	};
+}
diff --git a/gateway/sds_gateway/static/js/deprecated/captureGroupingComponents.js b/gateway/sds_gateway/static/js/deprecated/captureGroupingComponents.js
deleted file mode 100644
index 17a6535a5..000000000
--- a/gateway/sds_gateway/static/js/deprecated/captureGroupingComponents.js
+++ /dev/null
@@ -1,1544 +0,0 @@
-/* js functions for group_captures.html */
-
-class FormHandler {
-	constructor(config) {
-		this.form = document.getElementById(config.formId);
-		this.steps = config.steps;
-		this.currentStep = 0;
-		this.onStepChange = config.onStepChange;
-		this.isEditMode = config.isEditMode || false; // Whether this is an edit form
-		this.capturesSearchHandler = null; // Reference to captures SearchHandler instance
-		this.filesSearchHandler = null; // Reference to files SearchHandler instance
-		this.searchHandler = null; // Current active SearchHandler
-
-		// Store references to navigation elements
-		this.prevBtn = document.getElementById("prevStep");
-		this.nextBtn = document.getElementById("nextStep");
-		this.submitBtn = document.getElementById("submitForm");
-		this.stepTabs = document.querySelectorAll("#stepTabs .btn");
-
-		// Store references to hidden fields
-		this.selectedCapturesField = document.getElementById("selected_captures");
-		this.selectedFilesField = document.getElementById("selected_files");
-
-		// Initialize selections with initial values if provided
-		this.selectedCaptures = config.initialCaptures || new Set();
-		this.selectedFiles = config.initialFiles || new Set();
-		this.selectedCaptureDetails = new Map(
-			Object.entries(config.initialCaptureDetails || {}),
-		);
-
-		// Update hidden fields with initial values
-		this.updateHiddenFields();
-
-		// Store references to required fields
-		this.nameField = document.getElementById("id_name");
-		this.authorField = document.getElementById("id_author");
-		this.statusField = document.getElementById("id_status");
-
-		this.initializeEventListeners();
-		this.initializeErrorContainer();
-		this.validateCurrentStep(); // Initial validation
-		this.updateNavigation(); // Initial navigation button display
-
-		// Hide the submit button at the start unless on the last step
-		if (this.submitBtn && this.currentStep !== this.steps.length - 1) {
-			this.hide(this.submitBtn);
-		}
-	}
-
-	// Add method to set SearchHandler reference
-	setSearchHandler(searchHandler, type) {
-		if (type === "captures") {
-			this.capturesSearchHandler = searchHandler;
-		} else if (type === "files") {
-			this.filesSearchHandler = searchHandler;
-			this.filesSearchHandler.updateSelectedFilesList();
-		}
-		this.searchHandler = searchHandler;
-	}
-
-	initializeEventListeners() {
-		// Prevent form submission on enter key
-		if (this.form) {
-			this.form.addEventListener("keypress", (e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-				}
-			});
-		}
-
-		// Navigation buttons
-		if (this.prevBtn) {
-			this.prevBtn.addEventListener("click", () => this.navigateStep(-1));
-		}
-		if (this.nextBtn) {
-			this.nextBtn.addEventListener("click", () => this.navigateStep(1));
-		}
-		if (this.submitBtn) {
-			this.submitBtn.addEventListener("click", (e) => this.handleSubmit(e));
-		}
-
-		// Step tab handlers
-		this.stepTabs.forEach((tab, index) => {
-			tab.addEventListener("click", () => {
-				if (index <= this.currentStep) {
-					this.currentStep = index;
-					this.updateNavigation();
-				}
-			});
-		});
-
-		// Dataset info validation
-		if (this.nameField) {
-			this.nameField.addEventListener("input", () =>
-				this.validateCurrentStep(),
-			);
-		}
-		if (this.authorField) {
-			this.authorField.addEventListener("input", () =>
-				this.validateCurrentStep(),
-			);
-		}
-		if (this.statusField) {
-			this.statusField.addEventListener("change", () =>
-				this.validateCurrentStep(),
-			);
-		}
-
-		// Capture selection handler
-		document.addEventListener("change", (e) => {
-			if (e.target.matches('input[name="captures"]')) {
-				if (e.target.checked) {
-					this.selectedCaptures.add(e.target.value);
-				} else {
-					this.selectedCaptures.delete(e.target.value);
-				}
-				this.updateHiddenFields();
-			}
-		});
-	}
-
-	initializeErrorContainer() {
-		const errorContainer = document.getElementById("formErrors");
-		if (errorContainer) {
-			this.hide(errorContainer);
-		}
-	}
-
-	show(container, showClass = "display-block") {
-		container.classList.remove("display-none");
-		container.classList.remove("d-none"); // ensure Bootstrap's d-none is removed
-		container.classList.add(showClass);
-	}
-
-	hide(container, showClass = "display-block") {
-		container.classList.remove(showClass);
-		container.classList.add("display-none");
-	}
-
-	updateHiddenFields() {
-		// Update hidden fields with current selections
-		if (this.selectedCapturesField) {
-			this.selectedCapturesField.value = Array.from(this.selectedCaptures).join(
-				",",
-			);
-		}
-		if (this.selectedFilesField) {
-			this.selectedFilesField.value = Array.from(this.selectedFiles)
-				.map((file) => file.id)
-				.join(",");
-		}
-	}
-
-	dataSetNameDisplay() {
-		const nameDisplays = document.getElementsByClassName(
-			"dataset-name-display",
-		);
-		const nameInput = document.getElementById("id_name");
-		if (nameInput && nameDisplays.length > 0) {
-			for (const nameDisplay of Array.from(nameDisplays)) {
-				nameDisplay.textContent = nameInput.value || "Untitled Dataset";
-			}
-		}
-	}
-
-	async navigateStep(direction) {
-		if (direction < 0 || this.validateCurrentStep()) {
-			const nextStep = this.currentStep + direction;
-
-			// If moving to review step (step 4), update the review content
-			if (nextStep === 3) {
-				// Update form values in review step
-				document.querySelector("#step4 .dataset-name").textContent =
-					this.nameField.value;
-				document.querySelector("#step4 .dataset-author").textContent =
-					this.authorField.value;
-				document.querySelector("#step4 .dataset-status").textContent =
-					this.statusField.options[this.statusField.selectedIndex].text;
-				document.querySelector("#step4 .dataset-description").textContent =
-					document.getElementById("id_description").value ||
-					"No description provided.";
-				const keywordsInput = document.getElementById("id_keywords");
-				document.querySelector("#step4 .dataset-keywords").textContent =
-					keywordsInput?.value.trim() || "No keywords";
-
-				// Update captures table
-				const capturesTableBody = document.querySelector(
-					"#step4 .captures-table tbody",
-				);
-
-				if (
-					capturesTableBody &&
-					this.selectedCaptures.size > 0 &&
-					this.capturesSearchHandler
-				) {
-					capturesTableBody.innerHTML = Array.from(this.selectedCaptures)
-						.map((captureId) => {
-							const data =
-								this.capturesSearchHandler.selectedCaptureDetails.get(
-									captureId,
-								) || {
-									type: "Unknown",
-									directory: "Unknown",
-									channel: "-",
-									scan_group: "-",
-									created_at: new Date().toISOString(),
-								};
-							return `
-							<tr>
-								<td>${data.type}</td>
-								<td>${data.directory}</td>
-								<td>${data.channel}</td>
-								<td>${data.scan_group}</td>
-								<td>${new Date(data.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })}</td>
-								<td>
-									<button class="btn btn-sm btn-danger remove-capture" data-id="${captureId}">
-										Remove
-									</button>
-								</td>
-							</tr>
-						`;
-						})
-						.join("");
-
-					// Add event listeners for capture removal
-					const removeButtons =
-						capturesTableBody.querySelectorAll(".remove-capture");
-					for (const button of removeButtons) {
-						button.addEventListener("click", () => {
-							const captureId = button.dataset.id;
-							// Remove from selected captures
-							this.selectedCaptures.delete(captureId);
-							// Remove from capture details
-							if (this.capturesSearchHandler) {
-								this.capturesSearchHandler.selectedCaptureDetails.delete(
-									captureId,
-								);
-							}
-							// Update hidden field
-							this.updateHiddenFields();
-							// Update checkbox and row styling in captures table if visible
-							const checkbox = document.querySelector(
-								`input[name="captures"][value="${captureId}"]`,
-							);
-							if (checkbox) {
-								checkbox.checked = false;
-								const row = checkbox.closest("tr");
-								if (row) {
-									row.classList.remove("table-warning");
-								}
-							}
-							// Remove the row
-							button.closest("tr").remove();
-							// Update count
-							const capturesCount = this.selectedCaptures.size;
-							document.querySelector("#step4 .captures-count").textContent =
-								`${capturesCount} selected`;
-							// Show "No captures selected" if none left
-							if (capturesCount === 0) {
-								capturesTableBody.innerHTML =
-									"<tr><td colspan='6' class='text-center'>No captures selected</td></tr>";
-							}
-							// Update the selected captures pane in step 2 if it exists
-							if (this.capturesSearchHandler) {
-								this.capturesSearchHandler.updateSelectedCapturesPane();
-							}
-						});
-					}
-				} else {
-					capturesTableBody.innerHTML =
-						"<tr><td colspan='6' class='text-center'>No captures selected</td></tr>";
-				}
-
-				// Update files table
-				const filesTableBody = document.querySelector(
-					"#step4 .files-table tbody",
-				);
-				if (filesTableBody && this.selectedFiles.size > 0) {
-					filesTableBody.innerHTML = Array.from(this.selectedFiles)
-						.map(
-							(file) => `
-						<tr>
-							<td>${file.name}</td>
-							<td>${file.media_type || "Unknown"}</td>
-							<td>${file.relative_path}</td>
-							<td>${this.formatFileSize(file.size)}</td>
-							<td>
-								<button class="btn btn-sm btn-danger remove-file" data-id="${file.id}">
-									Remove
-								</button>
-							</td>
-						</tr>
-					`,
-						)
-						.join("");
-
-					// Add event listeners for file removal
-					const removeFileButtons =
-						filesTableBody.querySelectorAll(".remove-file");
-					for (const button of removeFileButtons) {
-						button.addEventListener("click", () => {
-							const fileId = button.dataset.id;
-							const fileToRemove = Array.from(this.selectedFiles).find(
-								(f) => f.id === fileId,
-							);
-							if (fileToRemove) {
-								// Remove from selected files
-								this.selectedFiles.delete(fileToRemove);
-								// Update SearchHandler's selectedFiles Map
-								if (this.filesSearchHandler) {
-									this.filesSearchHandler.selectedFiles.delete(fileId);
-									// Update the selected files list in SearchHandler
-									this.filesSearchHandler.updateSelectedFilesList();
-								}
-								// Update hidden field
-								this.updateHiddenFields();
-								// Update checkbox in file tree if visible
-								const checkbox = document.querySelector(
-									`input[name="files"][value="${fileId}"]`,
-								);
-								if (checkbox) {
-									checkbox.checked = false;
-								}
-								// Remove the row
-								button.closest("tr").remove();
-								// Update count
-								const filesCount = this.selectedFiles.size;
-								document.querySelector("#step4 .files-count").textContent =
-									`${filesCount} selected`;
-								// Show "No files selected" if none left
-								if (filesCount === 0) {
-									filesTableBody.innerHTML =
-										"<tr><td colspan='5' class='text-center'>No files selected</td></tr>";
-								}
-							}
-						});
-					}
-				} else {
-					filesTableBody.innerHTML =
-						"<tr><td colspan='5' class='text-center'>No files selected</td></tr>";
-				}
-
-				// Update selection counts
-				const capturesCount = this.selectedCaptures.size;
-				const filesCount = this.selectedFiles.size;
-				document.querySelector("#step4 .captures-count").textContent =
-					`${capturesCount} selected`;
-				document.querySelector("#step4 .files-count").textContent =
-					`${filesCount} selected`;
-			}
-
-			this.currentStep = nextStep;
-			this.updateNavigation();
-			this.dataSetNameDisplay();
-			if (this.onStepChange) {
-				this.onStepChange(this.currentStep);
-			}
-		}
-	}
-
-	updateNavigation() {
-		// Update step tabs
-		this.stepTabs.forEach((tab, index) => {
-			tab.classList.remove(
-				"btn-outline-primary",
-				"btn-primary",
-				"active-tab",
-				"inactive-tab",
-			);
-			if (index === this.currentStep) {
-				tab.classList.add("btn-primary", "active-tab");
-			} else if (index > this.currentStep) {
-				tab.classList.add("btn-outline-primary", "inactive-tab");
-			} else {
-				// Previous tabs get a light blue color and are disabled
-				tab.classList.add("btn-primary", "inactive-tab");
-			}
-		});
-
-		// Update content panes
-		document.querySelectorAll(".tab-pane").forEach((pane, index) => {
-			pane.classList.remove("show", "active");
-			if (index === this.currentStep) {
-				pane.classList.add("show", "active");
-			}
-		});
-
-		// Update navigation buttons
-		if (this.prevBtn) {
-			this.currentStep > 0 ? this.show(this.prevBtn) : this.hide(this.prevBtn);
-		}
-
-		// Update next/submit buttons and validate current step
-		const isValid = this.validateCurrentStep();
-		if (this.nextBtn) {
-			const isLastStep = this.currentStep === this.steps.length - 1;
-			isLastStep ? this.hide(this.nextBtn) : this.show(this.nextBtn);
-			this.nextBtn.disabled = !isValid;
-		}
-		if (this.submitBtn) {
-			const isLastStep = this.currentStep === this.steps.length - 1;
-			isLastStep ? this.show(this.submitBtn) : this.hide(this.submitBtn);
-			this.submitBtn.disabled = !isValid;
-		}
-	}
-
-	validateCurrentStep() {
-		let isValid = true;
-		switch (this.currentStep) {
-			case 0:
-				isValid = this.validateDatasetInfo();
-				break;
-			case 1:
-				isValid = this.validateCapturesSelection();
-				break;
-			case 2:
-				isValid = this.validateFilesSelection();
-				break;
-			default:
-				isValid = true;
-		}
-
-		// Update button states based on validation
-		if (this.nextBtn) {
-			this.nextBtn.disabled = !isValid;
-		}
-		if (this.submitBtn && this.currentStep === this.steps.length - 1) {
-			this.submitBtn.disabled = !isValid;
-		}
-
-		return isValid;
-	}
-
-	validateDatasetInfo() {
-		// Check if all required fields have non-empty values
-		const nameValue = this.nameField?.value.trim() || "";
-		const authorValue = this.authorField?.value.trim() || "";
-		const statusValue = this.statusField?.value || "";
-		return nameValue !== "" && authorValue !== "" && statusValue !== "";
-	}
-
-	validateCapturesSelection() {
-		return true; // Keep as is per requirements
-	}
-
-	validateFilesSelection() {
-		return true; // Keep as is per requirements
-	}
-
-	async handleSubmit(e) {
-		e.preventDefault();
-		if (this.validateCurrentStep()) {
-			// Set loading state
-			this.setSubmitButtonLoading(true);
-
-			// Update hidden fields one last time before submission
-			this.updateHiddenFields();
-
-			// Clear any existing errors
-			const errorContainer = document.getElementById("formErrors");
-			const errorContent = errorContainer?.querySelector(".error-content");
-			if (errorContainer && errorContent) {
-				this.hide(errorContainer);
-				errorContent.innerHTML = "";
-			}
-
-			const formData = new FormData(this.form);
-			try {
-				const response = await fetch(this.form.action, {
-					method: "POST",
-					body: formData,
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-						"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]")
-							.value,
-					},
-				});
-
-				const data = await response.json();
-
-				if (!response.ok) {
-					if (response.status === 400 && data.errors) {
-						// Show errors in the error container
-						let errorHtml = '<ul class="mb-0 list-unstyled">';
-						for (const [field, messages] of Object.entries(data.errors)) {
-							if (Array.isArray(messages)) {
-								for (const message of messages) {
-									errorHtml += `<li>${field === "non_field_errors" ? "" : `<strong>${field}:</strong> `}${message}</li>`;
-								}
-							} else if (typeof messages === "string") {
-								errorHtml += `<li>${field === "non_field_errors" ? "" : `<strong>${field}:</strong> `}${messages}</li>`;
-							}
-						}
-						errorHtml += "</ul>";
-
-						if (errorContainer && errorContent) {
-							errorContent.innerHTML = errorHtml;
-							this.show(errorContainer);
-							errorContainer.scrollIntoView({
-								behavior: "smooth",
-								block: "start",
-							});
-						}
-						// Reset loading state on error
-						this.setSubmitButtonLoading(false);
-						return;
-					}
-					throw new Error("Server error");
-				}
-
-				if (data.success) {
-					window.location.href = data.redirect_url;
-				} else if (data.errors) {
-					throw new Error(data.errors.join(", "));
-				}
-			} catch (error) {
-				console.error("Error submitting form:", error);
-				if (errorContainer && errorContent) {
-					errorContent.innerHTML =
-						'<ul class="mb-0 list-unstyled"><li>An unexpected error occurred. Please try again.</li></ul>';
-					this.show(errorContainer);
-					errorContainer.scrollIntoView({ behavior: "smooth", block: "start" });
-				}
-				// Reset loading state on error
-				this.setSubmitButtonLoading(false);
-			}
-		}
-	}
-
-	// Helper function to format file size
-	formatFileSize(bytes) {
-		if (bytes === 0) return "0 Bytes";
-		const k = 1024;
-		const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-	}
-
-	// Set loading state for submit button
-	setSubmitButtonLoading(isLoading) {
-		if (!this.submitBtn) return;
-
-		if (isLoading) {
-			// Store original text
-			this.submitBtn.dataset.originalText = this.submitBtn.textContent;
-			// Set loading state
-			this.submitBtn.disabled = true;
-			const busyText = this.isEditMode ? "Updating..." : "Creating...";
-			this.submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>${busyText}`;
-		} else {
-			// Restore original state
-			this.submitBtn.disabled = false;
-			if (this.submitBtn.dataset.originalText) {
-				this.submitBtn.textContent = this.submitBtn.dataset.originalText;
-			}
-		}
-	}
-}
-
-class SearchHandler {
-	constructor(config) {
-		this.searchForm = document.getElementById(config.searchFormId);
-		this.searchButton = document.getElementById(config.searchButtonId);
-		this.clearButton = document.getElementById(config.clearButtonId);
-		this.tableBody = document.getElementById(config.tableBodyId);
-		this.paginationContainer = document.getElementById(
-			config.paginationContainerId,
-		);
-		this.type = config.type;
-		this.selectedFiles = new Map(
-			Object.entries(config.initialFileDetails || {}),
-		);
-		this.confirmFileSelection = document.getElementById(
-			config.confirmFileSelectionId,
-		);
-		this.currentTree = null;
-		this.formHandler = config.formHandler;
-		this.currentFilters = {}; // Store current capture filters
-		this.selectedCaptureDetails = new Map(
-			Object.entries(config.initialCaptureDetails || {}),
-		);
-
-		// Set the form handler's reference to this SearchHandler instance
-		if (config.formHandler) {
-			config.formHandler.setSearchHandler(this, config.type);
-		}
-
-		this.initializeEventListeners();
-	}
-
-	async fetchCaptures(params = {}) {
-		try {
-			const searchParams = new URLSearchParams();
-
-			// Add all params to the search parameters
-			for (const [key, value] of Object.entries(params)) {
-				if (value) {
-					searchParams.append(key, value);
-				}
-			}
-
-			// Always add the search_captures parameter
-			searchParams.append("search_captures", "true");
-
-			const response = await fetch(
-				`${window.location.pathname}?${searchParams.toString()}`,
-				{
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			return await response.json();
-		} catch (error) {
-			console.error("Error fetching captures:", error);
-			return { results: [], pagination: {} };
-		}
-	}
-
-	async fetchFiles(params = {}) {
-		try {
-			const searchParams = new URLSearchParams(params);
-			const response = await fetch(
-				`${window.location.pathname}?${searchParams.toString()}&search_files=true`,
-				{
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			return await response.json();
-		} catch (error) {
-			console.error("Error fetching files:", error);
-			return { tree: {}, pagination: {} };
-		}
-	}
-
-	initializeEventListeners() {
-		// Search form handlers
-		if (this.searchButton) {
-			this.searchButton.addEventListener("click", () => this.handleSearch());
-		}
-		if (this.clearButton) {
-			this.clearButton.addEventListener("click", () => this.handleClear());
-		}
-		if (this.confirmFileSelection) {
-			this.confirmFileSelection.addEventListener("click", () => {
-				this.updateSelectedFilesList();
-				this.handleClear();
-			});
-		}
-		this.initializeEnterKeyListener();
-	}
-
-	initializeEnterKeyListener() {
-		// Allow pressing enter when focused on a search input to trigger the search
-		const searchInputs = this.searchForm.querySelectorAll("input[type='text']");
-		for (const input of searchInputs) {
-			input.addEventListener("keypress", (e) => {
-				if (e.key === "Enter") {
-					this.handleSearch();
-				}
-			});
-		}
-	}
-
-	initializeSelectAllCheckbox() {
-		const selectAllCheckbox = document.getElementById(
-			"select-all-files-checkbox",
-		);
-		if (selectAllCheckbox) {
-			selectAllCheckbox.addEventListener("change", () => {
-				const isChecked = selectAllCheckbox.checked;
-				const fileCheckboxes = document.querySelectorAll(
-					'#file-tree-table tbody input[type="checkbox"]',
-				);
-
-				for (const checkbox of fileCheckboxes) {
-					if (checkbox.checked !== isChecked) {
-						checkbox.checked = isChecked;
-						checkbox.dispatchEvent(new Event("change"));
-					}
-				}
-			});
-		}
-	}
-
-	initializeRemoveAllButton() {
-		const removeAllButton = document.getElementById(
-			"remove-all-selected-files-button",
-		);
-		if (removeAllButton) {
-			removeAllButton.addEventListener("click", () => {
-				//deselect all files
-				const fileCheckboxes = document.querySelectorAll(
-					'#file-tree-table tbody input[type="checkbox"]',
-				);
-				for (const checkbox of fileCheckboxes) {
-					checkbox.checked = false;
-					checkbox.dispatchEvent(new Event("change"));
-				}
-
-				this.selectedFiles.clear();
-				this.updateSelectedFilesList();
-			});
-		}
-	}
-
-	initializeCapturesSearch() {
-		// Initialize event listeners for captures search
-		const searchButton = document.getElementById("search-captures");
-		const clearButton = document.getElementById("clear-captures-search");
-
-		if (searchButton && clearButton) {
-			// Add click handler for search button
-			searchButton.addEventListener("click", () => {
-				this.currentFilters = {
-					directory: document.getElementById("search_directory_captures").value,
-					capture_type: document.getElementById("search_capture_type").value,
-					scan_group: document.getElementById("search_scan_group").value,
-					channel: document.getElementById("search_channel").value,
-				};
-				this.fetchCaptures(this.currentFilters).then((data) =>
-					this.updateCapturesTable(data),
-				);
-			});
-
-			// Add click handler for clear button
-			clearButton.addEventListener("click", () => {
-				document.getElementById("search_directory_captures").value = "";
-				document.getElementById("search_capture_type").value = "";
-				document.getElementById("search_scan_group").value = "";
-				document.getElementById("search_channel").value = "";
-				this.currentFilters = {};
-				this.fetchCaptures().then((data) => this.updateCapturesTable(data));
-			});
-
-			// Check if the selected captures pane exists
-			if (!document.getElementById("selected-captures-pane")) {
-				// Create selected captures pane
-				this.createSelectedCapturesPane();
-			}
-
-			// Load initial data
-			this.fetchCaptures().then((data) => this.updateCapturesTable(data));
-		}
-	}
-
-	createSelectedCapturesPane() {
-		// Create the selected captures pane next to the captures table
-		const capturesContainer = document.querySelector("#step2 .row");
-		if (!capturesContainer) return;
-
-		// Create the selected captures pane
-		const selectedPane = document.createElement("div");
-		selectedPane.className = "col-md-4";
-		selectedPane.innerHTML = `
-			<div class="card" id="selected-captures-pane">
-				<div class="card-header bg-light d-flex justify-content-between align-items-center">
-					<h5 class="mb-0">Selected Captures</h5>
-					<span class="badge bg-primary selected-captures-count">0 selected</span>
-				</div>
-				<div class="card-body p-0">
-					<div class="table-responsive">
-						<table class="table table-sm table-hover mb-0">
-							<thead>
-								<tr>
-									<th>Type</th>
-									<th>Directory</th>
-									<th>Actions</th>
-								</tr>
-							</thead>
-							<tbody id="selected-captures-list">
-								<tr><td colspan="3" class="text-center">No captures selected</td></tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		`;
-
-		// Add the selected pane
-		capturesContainer.appendChild(selectedPane);
-	}
-
-	updateSelectedCapturesPane() {
-		const selectedList = document.getElementById("selected-captures-list");
-		const countBadge = document.querySelector(".selected-captures-count");
-		if (!selectedList || !countBadge || !this.formHandler) return;
-
-		const selectedCaptures = this.formHandler.selectedCaptures;
-		countBadge.textContent = `${selectedCaptures.size} selected`;
-
-		if (selectedCaptures.size === 0) {
-			selectedList.innerHTML =
-				'<tr><td colspan="3" class="text-center">No captures selected</td></tr>';
-			return;
-		}
-
-		selectedList.innerHTML = Array.from(selectedCaptures)
-			.map((captureId) => {
-				const data = this.selectedCaptureDetails.get(captureId) || {
-					type: "Unknown",
-					directory: "Unknown",
-				};
-				return `
-				<tr>
-					<td>${data.type}</td>
-					<td>${data.directory}</td>
-					<td>
-						<button class="btn btn-sm btn-danger remove-selected-capture" data-id="${captureId}">
-							Remove
-						</button>
-					</td>
-				</tr>
-			`;
-			})
-			.join("");
-
-		// Add remove handlers
-		const removeSelectedButtons = selectedList.querySelectorAll(
-			".remove-selected-capture",
-		);
-		for (const button of removeSelectedButtons) {
-			button.addEventListener("click", () => {
-				const captureId = button.dataset.id;
-				this.formHandler.selectedCaptures.delete(captureId);
-				this.selectedCaptureDetails.delete(captureId);
-
-				// Update checkbox if visible
-				const checkbox = document.querySelector(
-					`input[name="captures"][value="${captureId}"]`,
-				);
-				if (checkbox) {
-					checkbox.checked = false;
-					checkbox.closest("tr").classList.remove("table-warning");
-				}
-
-				this.updateSelectedCapturesPane();
-				this.formHandler.updateHiddenFields();
-			});
-		}
-	}
-
-	updateCapturesTable(data) {
-		const tbody = document.querySelector("#captures-table tbody");
-		tbody.innerHTML = "";
-
-		// Update the results count
-		this.updateResultsCount(data.results.length);
-
-		if (data.results.length === 0) {
-			tbody.innerHTML =
-				'<tr><td colspan="6" class="text-center">No captures found</td></tr>';
-			return;
-		}
-
-		for (const capture of data.results) {
-			const row = document.createElement("tr");
-			const isSelected = this.formHandler?.selectedCaptures.has(
-				capture.id.toString(),
-			);
-
-			// Add hover class and selected class if applicable
-			row.classList.add("capture-row");
-			if (isSelected) {
-				row.classList.add("table-warning");
-			}
-
-			row.innerHTML = `
-				<td>
-					<input type="checkbox" class="form-check-input" name="captures" value="${capture.id}" ${isSelected ? "checked" : ""} />
-				</td>
-				<td>${capture.type}</td>
-				<td>${capture.directory}</td>
-				<td>${capture.channel}</td>
-				<td>${capture.scan_group}</td>
-				<td>${new Date(capture.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })}</td>
-			`;
-
-			const handleSelection = (e) => {
-				const checkbox = row.querySelector('input[type="checkbox"]');
-				if (e.target.type !== "checkbox") {
-					checkbox.checked = !checkbox.checked;
-				}
-
-				const captureId = capture.id.toString();
-				if (checkbox.checked) {
-					this.formHandler.selectedCaptures.add(captureId);
-					row.classList.add("table-warning");
-					// Store capture details when selected, using the serialized data directly
-					this.selectedCaptureDetails.set(captureId, {
-						type: capture.type,
-						directory: capture.directory,
-						channel: capture.channel,
-						scan_group: capture.scan_group,
-						created_at: capture.created_at,
-					});
-				} else {
-					this.formHandler.selectedCaptures.delete(captureId);
-					row.classList.remove("table-warning");
-					this.selectedCaptureDetails.delete(captureId);
-				}
-
-				this.formHandler.updateHiddenFields();
-				this.updateSelectedCapturesPane();
-			};
-
-			// Add click handler for the row
-			row.addEventListener("click", handleSelection);
-
-			// Add specific handler for checkbox to prevent double-triggering
-			const checkbox = row.querySelector('input[type="checkbox"]');
-			checkbox.addEventListener("change", (e) => {
-				e.stopPropagation();
-				handleSelection(e);
-			});
-
-			tbody.appendChild(row);
-		}
-
-		// Update pagination with current filters
-		this.updatePagination("captures", data.pagination);
-
-		// Update selected captures pane
-		this.updateSelectedCapturesPane();
-	}
-
-	updatePagination(type, pagination) {
-		const paginationContainer = document.querySelector(`#${type}-pagination`);
-		if (!paginationContainer) return;
-
-		paginationContainer.innerHTML = "";
-		if (pagination.num_pages <= 1) return;
-
-		const ul = document.createElement("ul");
-		ul.className = "pagination justify-content-center";
-
-		// Add Previous button with arrow
-		if (pagination.has_previous) {
-			ul.innerHTML += `
-				<li class="page-item">
-					<a class="page-link" href="#" data-page="${pagination.number - 1}" aria-label="Previous">
-						<span aria-hidden="true">&laquo;</span>
-					</a>
-				</li>
-			`;
-		}
-
-		// Add page numbers
-		const startPage = Math.max(1, pagination.number - 2);
-		const endPage = Math.min(pagination.num_pages, pagination.number + 2);
-
-		for (let i = startPage; i <= endPage; i++) {
-			ul.innerHTML += `
-				<li class="page-item ${i === pagination.number ? "active" : ""}">
-					<a class="page-link" href="#" data-page="${i}">${i}</a>
-				</li>
-			`;
-		}
-
-		// Add Next button with arrow
-		if (pagination.has_next) {
-			ul.innerHTML += `
-				<li class="page-item">
-					<a class="page-link" href="#" data-page="${pagination.number + 1}" aria-label="Next">
-						<span aria-hidden="true">&raquo;</span>
-					</a>
-				</li>
-			`;
-		}
-
-		paginationContainer.appendChild(ul);
-
-		// Add click handlers for pagination
-		const links = paginationContainer.querySelectorAll("a.page-link");
-		for (const link of links) {
-			link.addEventListener("click", async (e) => {
-				e.preventDefault();
-				const target = e.target.closest("a.page-link");
-				const page = target?.dataset.page;
-
-				if (type === "captures") {
-					const params = {
-						...this.currentFilters,
-						page: page,
-					};
-					const data = await this.fetchCaptures(params);
-					this.updateCapturesTable(data);
-				} else {
-					// Get current search values for files
-					const fileNameInput = document.getElementById("file-name");
-					const directoryInput = document.getElementById("file-directory");
-					const extensionSelect = document.getElementById("file-extension");
-
-					const params = {
-						file_name: fileNameInput?.value || "",
-						directory: directoryInput?.value || "",
-						file_extension: extensionSelect?.value || "",
-						page: page,
-					};
-
-					const data = await this.fetchFiles(params);
-					this.updateFilesTable(data);
-				}
-			});
-		}
-	}
-
-	async handleSearch() {
-		try {
-			// Get all input elements within the search container
-			const searchContainer = this.searchForm;
-			if (!searchContainer) {
-				console.error("Search container not found:", this.searchForm);
-				return;
-			}
-			const params = new URLSearchParams();
-
-			// Get all form inputs within the container
-			const inputs = searchContainer.querySelectorAll(
-				"input, select, textarea",
-			);
-			for (const input of inputs) {
-				if (input.value) {
-					params.append(input.name, input.value);
-				}
-			}
-
-			// Add the search type parameter
-			params.append(
-				this.type === "captures" ? "search_captures" : "search_files",
-				"true",
-			);
-
-			const response = await fetch(
-				`${window.location.pathname}?${params.toString()}`,
-				{
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			const data = await response.json();
-
-			if (this.type === "captures") {
-				this.updateCapturesTable(data);
-			} else {
-				// Reset select all checkbox
-				const selectAllCheckbox = document.getElementById(
-					"select-all-files-checkbox",
-				);
-				if (selectAllCheckbox) {
-					selectAllCheckbox.checked = false;
-				}
-				if (data.tree) {
-					// Update file extension select options while preserving current selection
-					const extensionSelect = document.getElementById("file-extension");
-					if (extensionSelect && data.extension_choices) {
-						const currentValue = extensionSelect.value;
-						extensionSelect.innerHTML = data.extension_choices
-							.map(
-								([value, label]) =>
-									`<option value="${value}" ${value === currentValue ? "selected" : ""}>${label}</option>`,
-							)
-							.join("");
-					}
-
-					// Restore search values if they exist
-					if (data.search_values) {
-						const fileNameInput = document.getElementById("file-name");
-						const directoryInput = document.getElementById("file-directory");
-
-						if (fileNameInput) {
-							fileNameInput.value = data.search_values.file_name || "";
-						}
-						if (extensionSelect) {
-							extensionSelect.value = data.search_values.file_extension || "";
-						}
-						if (directoryInput) {
-							directoryInput.value = data.search_values.directory || "";
-						}
-					}
-
-					const searchTermEntered =
-						data.search_values.file_name ||
-						data.search_values.directory ||
-						data.search_values.file_extension;
-					this.renderFileTree(data.tree, null, 0, "", searchTermEntered);
-
-					// Initialize select all checkbox handler for the current file tree
-					this.initializeSelectAllCheckbox();
-
-					// Initialize remove all button handler for the current file tree
-					this.initializeRemoveAllButton();
-				}
-			}
-
-			if (data.pagination) {
-				this.updatePagination(this.type, data.pagination);
-			}
-		} catch (error) {
-			console.error("Error during search:", error);
-			this.showError("An error occurred during the search. Please try again.");
-		}
-	}
-
-	handleClear() {
-		// Clear all form inputs
-		const searchContainer = this.searchForm;
-		if (!searchContainer) {
-			console.error("Search container not found:", this.searchForm);
-			return;
-		}
-
-		const inputs = searchContainer.querySelectorAll("input, select, textarea");
-		for (const input of inputs) {
-			input.value = "";
-		}
-
-		// Trigger a new search with empty parameters
-		this.handleSearch();
-	}
-
-	updateSelectedFilesList() {
-		// Update form handler's selectedFiles with current selection
-		if (this.formHandler) {
-			// Convert Map entries to array of file objects with IDs
-			const fileList = Array.from(this.selectedFiles.entries()).map(
-				([id, file]) => ({ ...file, id: id }),
-			);
-			this.formHandler.selectedFiles = new Set(fileList);
-		}
-
-		// Update selected files display input
-		const selectedFilesDisplay = document.getElementById(
-			"selected-files-display",
-		);
-		if (selectedFilesDisplay) {
-			selectedFilesDisplay.value = `${this.selectedFiles.size} file(s) selected`;
-		}
-
-		// Update Remove All button state
-		const removeAllButton = document.getElementById(
-			"remove-all-selected-files-button",
-		);
-		if (removeAllButton) {
-			removeAllButton.disabled = this.selectedFiles.size === 0;
-		}
-
-		// Update selected files table if it exists
-		const selectedFilesTable = document.getElementById("selected-files-table");
-		const selectedFilesBody = selectedFilesTable?.querySelector("tbody");
-		if (selectedFilesBody) {
-			if (this.selectedFiles.size === 0) {
-				selectedFilesBody.innerHTML =
-					'<tr><td colspan="5" class="text-center">No files selected</td></tr>';
-			} else {
-				selectedFilesBody.innerHTML = Array.from(this.selectedFiles.entries())
-					.map(
-						([id, file]) => `
-					<tr>
-						<td>${file.name}</td>
-						<td>${file.media_type}</td>
-						<td>${file.relative_path}</td>
-						<td>${this.formHandler.formatFileSize(file.size)}</td>
-						<td>
-							<button class="btn btn-sm btn-danger remove-selected-file" data-id="${id}">
-								Remove
-							</button>
-						</td>
-					</tr>
-				`,
-					)
-					.join("");
-
-				// Add event listeners for file removal
-				const removeSelectedFileButtons = selectedFilesBody.querySelectorAll(
-					".remove-selected-file",
-				);
-				for (const button of removeSelectedFileButtons) {
-					button.addEventListener("click", () => {
-						const fileId = button.dataset.id;
-						// Remove from selected files
-						this.selectedFiles.delete(fileId);
-						// Update checkbox in file tree if visible
-						const checkbox = document.querySelector(
-							`input[name="files"][value="${fileId}"]`,
-						);
-						if (checkbox) {
-							checkbox.checked = false;
-						}
-						// Update the selected files list
-						this.updateSelectedFilesList();
-						// Update form handler's hidden fields
-						if (this.formHandler) {
-							this.formHandler.updateHiddenFields();
-						}
-					});
-				}
-			}
-		}
-
-		// Update count badge
-		const countBadge = document.querySelector(".selected-files-count");
-		if (countBadge) {
-			countBadge.textContent = `${this.selectedFiles.size} selected`;
-		}
-	}
-
-	async loadFileTree() {
-		try {
-			// Get current values from form fields
-			const fileNameInput = document.getElementById("file-name");
-			const directoryInput = document.getElementById("file-directory");
-			const extensionSelect = document.getElementById("file-extension");
-
-			const params = {
-				file_name: fileNameInput?.value || "",
-				directory: directoryInput?.value || "",
-				file_extension: extensionSelect?.value || "",
-			};
-
-			const data = await this.fetchFiles(params);
-			if (!data.tree) {
-				console.error("No tree data received:", data);
-				return;
-			}
-
-			// Update file extension select options
-			if (extensionSelect && data.extension_choices) {
-				extensionSelect.innerHTML = data.extension_choices
-					.map(([value, label]) => `<option value="${value}">${label}</option>`)
-					.join("");
-			}
-
-			// Pass the search parameters to renderFileTree
-			const searchTermEntered =
-				params.file_name || params.directory || params.file_extension;
-
-			this.renderFileTree(data.tree, null, 0, "", searchTermEntered);
-
-			// Initialize search handler after tree is loaded
-			this.initializeEventListeners();
-
-			// Initialize select all checkbox handler for the current file tree
-			this.initializeSelectAllCheckbox();
-
-			// Initialize remove all button handler for the current file tree
-			this.initializeRemoveAllButton();
-		} catch (error) {
-			console.error("Error loading file tree:", error);
-		}
-	}
-
-	// Helper function to get relative path
-	getRelativePath(file, currentPath = "") {
-		if (!currentPath) {
-			return "";
-		}
-		return `/${currentPath}`;
-	}
-
-	renderFileTree(
-		tree,
-		parentElement = null,
-		level = 0,
-		currentPath = "",
-		searchTermEntered = false,
-	) {
-		this.currentTree = tree;
-		const targetElement =
-			parentElement || document.querySelector("#file-tree-table tbody");
-		if (!targetElement) {
-			console.error("File tree table body not found");
-			return;
-		}
-
-		if (!parentElement) {
-			targetElement.innerHTML = "";
-		}
-
-		// Early return if no tree or if tree is empty
-		if (
-			!tree ||
-			((!tree.files || tree.files.length === 0) &&
-				(!tree.children || Object.keys(tree.children).length === 0))
-		) {
-			targetElement.innerHTML =
-				'<tr><td colspan="5" class="text-center">No files or directories found</td></tr>';
-			return;
-		}
-
-		// Show/hide select all checkbox based on search term
-		const selectAllContainer = document.getElementById("select-all-container");
-		const hasFiles = tree.files && tree.files.length > 0;
-		if (selectAllContainer) {
-			if (searchTermEntered && hasFiles) {
-				this.formHandler.show(selectAllContainer);
-			} else {
-				this.formHandler.hide(selectAllContainer);
-			}
-		}
-
-		// Render directories
-		const directories = tree.children || {};
-		for (const [name, content] of Object.entries(directories)) {
-			if (
-				name === "files" ||
-				!content ||
-				typeof content !== "object" ||
-				!content.type ||
-				content.type !== "directory"
-			) {
-				continue;
-			}
-
-			const row = document.createElement("tr");
-			row.className = "folder-row";
-
-			// Set initial toggle state based on search term
-			const initiallyExpanded = searchTermEntered;
-			const toggleSymbol = initiallyExpanded ? "▼" : "▶";
-
-			// Construct the path for this directory
-			const dirPath = currentPath
-				? `${currentPath}/${content.name || name}`
-				: content.name || name;
-
-			row.innerHTML = `
-				<td>
-					<span class="folder-toggle">${toggleSymbol}</span>
-				</td>
-				<td class="${level > 0 ? `ps-${level * 3}` : ""}">
-					<i class="bi bi-folder me-2"></i>
-					${content.name || name}
-				</td>
-				<td>Directory</td>
-				<td>${this.formHandler.formatFileSize(content.size || 0)}</td>
-				<td>${content.created_at ? new Date(content.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" }) : "-"}</td>
-			`;
-			targetElement.appendChild(row);
-
-			// Create container for nested content
-			const nestedContainer = document.createElement("tr");
-			nestedContainer.className = "nested-row";
-			if (!initiallyExpanded) {
-				this.formHandler.hide(nestedContainer);
-			} else {
-				this.formHandler.show(nestedContainer, "display-table-row");
-			}
-			nestedContainer.innerHTML = `
-				<td colspan="5">
-					<div class="nested-content">
-						<table class="table table-striped">
-							<tbody></tbody>
-						</table>
-					</div>
-				</td>
-			`;
-			targetElement.appendChild(nestedContainer);
-
-			// Add click handler for folder
-			row.addEventListener("click", () => {
-				const hasChildren = Object.keys(content.children || {}).length > 0;
-				const hasFiles = content.files && content.files.length > 0;
-				const expandable = hasChildren || hasFiles;
-
-				const toggle = row.querySelector(".folder-toggle");
-				const isExpanded = toggle.textContent === "▼";
-
-				if (expandable) {
-					toggle.textContent = isExpanded ? "▶" : "▼";
-					isExpanded
-						? this.formHandler.hide(nestedContainer, "display-table-row")
-						: this.formHandler.show(nestedContainer, "display-table-row");
-				} else {
-					toggle.textContent = "▶";
-					this.formHandler.hide(nestedContainer, "display-table-row");
-				}
-
-				// Load nested content if not already loaded
-				if (expandable && !isExpanded && !nestedContainer.dataset.loaded) {
-					this.renderFileTree(
-						content,
-						nestedContainer.querySelector("tbody"),
-						level + 1,
-						dirPath,
-						searchTermEntered,
-					);
-					nestedContainer.dataset.loaded = "true";
-				}
-			});
-
-			// If there's a search term, automatically load and expand the content
-			if (searchTermEntered && !nestedContainer.dataset.loaded) {
-				this.renderFileTree(
-					content,
-					nestedContainer.querySelector("tbody"),
-					level + 1,
-					dirPath,
-					searchTermEntered,
-				);
-				nestedContainer.dataset.loaded = "true";
-			}
-		}
-
-		// Render files
-		if (tree.files && tree.files.length > 0) {
-			for (const file of tree.files) {
-				const row = document.createElement("tr");
-				const filePath = this.getRelativePath(file, currentPath);
-				const isSelected = this.selectedFiles.has(file.id);
-				row.innerHTML = `
-					<td>
-						<input type="checkbox" class="form-check-input" name="files" value="${file.id}"
-							${isSelected ? "checked" : ""}>
-					</td>
-					<td class="${level > 0 ? `ps-${level * 3}` : ""}">
-						<i class="bi bi-file-earmark me-2"></i>
-						${file.name}
-					</td>
-					<td>${file.media_type || "Unknown"}</td>
-					<td>${this.formHandler.formatFileSize(file.size)}</td>
-					<td>${new Date(file.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })}</td>
-				`;
-
-				const checkbox = row.querySelector('input[type="checkbox"]');
-
-				// Add click handler for the checkbox
-				checkbox.addEventListener("change", (e) => {
-					e.stopPropagation(); // Prevent row click from firing
-					if (checkbox.checked) {
-						this.selectedFiles.set(file.id, {
-							...file,
-							relative_path: filePath,
-						});
-					} else {
-						this.selectedFiles.delete(file.id);
-					}
-					this.updateSelectAllCheckboxState();
-				});
-
-				// Add click handler for the row
-				row.addEventListener("click", (e) => {
-					// Don't toggle if clicking the checkbox directly
-					if (e.target.type === "checkbox") return;
-
-					checkbox.checked = !checkbox.checked;
-					// Trigger the change event to ensure the selectedFiles is updated
-					checkbox.dispatchEvent(new Event("change"));
-				});
-
-				// Add hover effect class
-				row.classList.add("clickable-row");
-
-				targetElement.appendChild(row);
-			}
-		}
-
-		// Update select all checkbox state when rendering new tree
-		this.updateSelectAllCheckboxState();
-	}
-
-	// Function to update files table
-	updateFilesTable(data) {
-		const tbody = document.querySelector("#file-tree-table tbody");
-		if (!tbody) {
-			console.error("File tree table body not found");
-			return;
-		}
-		tbody.innerHTML = "";
-
-		if (!data.tree) {
-			tbody.innerHTML =
-				'<tr><td colspan="5" class="text-center">No files or directories found</td></tr>';
-			return;
-		}
-
-		this.renderFileTree(data.tree);
-	}
-
-	showError(message) {
-		const errorContainer = document.getElementById("formErrors");
-		const errorContent = errorContainer?.querySelector(".error-content");
-		if (errorContainer && errorContent) {
-			errorContent.innerHTML = `<ul class="mb-0 list-unstyled"><li>${message}</li></ul>`;
-			this.formHandler.show(errorContainer);
-			errorContainer.scrollIntoView({ behavior: "smooth", block: "start" });
-		}
-	}
-
-	// Helper function to update select all checkbox state
-	updateSelectAllCheckboxState() {
-		const selectAllCheckbox = document.getElementById(
-			"select-all-files-checkbox",
-		);
-		if (!selectAllCheckbox) return;
-
-		// Only count visible file checkboxes (not in hidden rows)
-		const fileCheckboxes = document.querySelectorAll(
-			'#file-tree-table tbody tr:not(.nested-row):not([style*="display: none"]) input[type="checkbox"]',
-		);
-		const checkedBoxes = document.querySelectorAll(
-			'#file-tree-table tbody tr:not(.nested-row):not([style*="display: none"]) input[type="checkbox"]:checked',
-		);
-
-		if (checkedBoxes.length === fileCheckboxes.length) {
-			selectAllCheckbox.checked = true;
-		} else {
-			selectAllCheckbox.checked = false;
-		}
-	}
-
-	updateResultsCount(count) {
-		const resultsCountElement = document.getElementById("results-count");
-		if (resultsCountElement) {
-			const captureText = count === 1 ? "capture" : "captures";
-			resultsCountElement.textContent = `${count} ${captureText} found`;
-		}
-	}
-}
-
-// Make classes available globally
-window.SearchHandler = SearchHandler;
-window.FormHandler = FormHandler;
-
-// Export the classes (commented out to avoid syntax error in non-module context)
-// export { FormHandler, SearchHandler };
diff --git a/gateway/sds_gateway/static/js/deprecated/dataset-list.js b/gateway/sds_gateway/static/js/deprecated/dataset-list.js
deleted file mode 100644
index 444232215..000000000
--- a/gateway/sds_gateway/static/js/deprecated/dataset-list.js
+++ /dev/null
@@ -1,206 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-	// Initialize sorting
-	const sortableHeaders = document.querySelectorAll("th.sortable");
-	const urlParams = new URLSearchParams(window.location.search);
-	const currentSort = urlParams.get("sort_by") || "created_at";
-	const currentOrder = urlParams.get("sort_order") || "desc";
-
-	// Initialize sort icons
-	function updateSortIcons() {
-		for (const header of sortableHeaders) {
-			const sortField = header.getAttribute("data-sort");
-			const icon = header.querySelector(".sort-icon");
-
-			// Reset all icons
-			header.setAttribute("aria-sort", "none");
-			icon.classList.remove("bi-caret-up-fill", "bi-caret-down-fill");
-			icon.classList.add("bi-caret-down-fill");
-
-			// Update current sort column
-			if (sortField === currentSort) {
-				if (currentOrder === "asc") {
-					header.setAttribute("aria-sort", "ascending");
-					icon.classList.remove("bi-caret-down-fill");
-					icon.classList.add("bi-caret-up-fill");
-				} else {
-					header.setAttribute("aria-sort", "descending");
-				}
-			}
-		}
-	}
-
-	// Handle sort clicks
-	function handleSort(header) {
-		const sortField = header.getAttribute("data-sort");
-		let newOrder = "desc";
-
-		// If already sorting by this field, toggle order
-		if (currentSort === sortField && currentOrder === "asc") {
-			newOrder = "desc";
-		}
-
-		// Update URL with new sort parameters
-		urlParams.set("sort_by", sortField);
-		urlParams.set("sort_order", newOrder);
-		urlParams.set("page", "1"); // Reset to first page when sorting
-
-		// Navigate to sorted results
-		window.location.search = urlParams.toString();
-	}
-
-	// Add click handlers to sortable headers
-	for (const header of sortableHeaders) {
-		header.style.cursor = "pointer";
-		header.addEventListener("click", () => handleSort(header));
-	}
-
-	// Initialize sort icons
-	updateSortIcons();
-
-	// Bootstrap handles dropdowns natively with data-bs-toggle="dropdown" - no custom handling needed
-
-	// Check for dataset download alert messages only
-	const downloadAlert = sessionStorage.getItem("datasetDownloadAlert");
-	if (downloadAlert) {
-		const alertData = JSON.parse(downloadAlert);
-		showAlert(alertData.message, alertData.type);
-		sessionStorage.removeItem("datasetDownloadAlert");
-	}
-
-	// Handle download button clicks
-	for (const button of document.querySelectorAll(".download-dataset-btn")) {
-		button.addEventListener("click", function (e) {
-			e.preventDefault();
-			e.stopPropagation();
-
-			const datasetUuid = this.getAttribute("data-dataset-uuid");
-			const datasetName = this.getAttribute("data-dataset-name");
-
-			// Update modal content
-			document.getElementById("downloadDatasetName").textContent = datasetName;
-
-			// Show the modal
-			openCustomModal("downloadModal");
-
-			// Handle confirm download
-			document.getElementById("confirmDownloadBtn").onclick = () => {
-				// Close modal first
-				closeCustomModal("downloadModal");
-
-				// Show loading state
-				button.innerHTML =
-					'<i class="bi bi-hourglass-split"></i> Processing...';
-				button.disabled = true;
-
-				// Make API request
-				fetch(`/users/download-item/dataset/${datasetUuid}/`, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-						"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]")
-							.value,
-					},
-				})
-					.then((response) => {
-						// Check if response is JSON
-						const contentType = response.headers.get("content-type");
-						if (contentType?.includes("application/json")) {
-							return response.json();
-						}
-						// If not JSON, throw an error with the response text
-						return response.text().then((text) => {
-							throw new Error(`Server returned non-JSON response: ${text}`);
-						});
-					})
-					.then((data) => {
-						if (data.success === true) {
-							button.innerHTML =
-								'<i class="bi bi-check-circle text-success"></i> Download Requested';
-							showAlert(
-								data.message ||
-									"Download request submitted successfully! You will receive an email when ready.",
-								"success",
-							);
-						} else {
-							button.innerHTML =
-								'<i class="bi bi-exclamation-triangle text-danger"></i> Request Failed';
-							showAlert(
-								data.message || "Download request failed. Please try again.",
-								"error",
-							);
-						}
-					})
-					.catch((error) => {
-						console.error("Download error:", error);
-						button.innerHTML =
-							'<i class="bi bi-exclamation-triangle text-danger"></i> Request Failed';
-						showAlert(
-							error.message ||
-								"An error occurred while processing your request.",
-							"error",
-						);
-					})
-					.finally(() => {
-						// Reset button after 3 seconds
-						setTimeout(() => {
-							button.innerHTML = "Download";
-							button.disabled = false;
-						}, 3000);
-					});
-			};
-		});
-	}
-});
-
-function openCustomModal(modalId) {
-	const modal = document.getElementById(modalId);
-	if (modal) {
-		modal.style.display = "block";
-		document.body.style.overflow = "hidden";
-	}
-}
-
-function closeCustomModal(modalId) {
-	const modal = document.getElementById(modalId);
-	if (modal) {
-		modal.style.display = "none";
-		document.body.style.overflow = "auto";
-	}
-}
-
-// Make functions available globally
-window.openCustomModal = openCustomModal;
-window.closeCustomModal = closeCustomModal;
-
-// Function to show alerts
-function showAlert(message, type) {
-	const alertClass = type === "success" ? "alert-success" : "alert-danger";
-	const alertHtml = `
-		<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-			${message}
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-		</div>
-	`;
-
-	const alertContainer = document.querySelector(
-		".main-content-area .container",
-	);
-	if (alertContainer) {
-		alertContainer.insertAdjacentHTML("afterbegin", alertHtml);
-	}
-}
-
-// Make function available globally
-window.showAlert = showAlert;
-
-// Close modal when clicking backdrop
-document.addEventListener("click", (event) => {
-	if (event.target.classList.contains("custom-modal-backdrop")) {
-		const modal = event.target.closest(".custom-modal");
-		if (modal) {
-			closeCustomModal(modal.id);
-		}
-	}
-});
-
-// Bootstrap handles dropdowns natively with data-bs-toggle="dropdown" - no custom handling needed
diff --git a/gateway/sds_gateway/static/js/deprecated/datasetDetailsModal.js b/gateway/sds_gateway/static/js/deprecated/datasetDetailsModal.js
deleted file mode 100644
index cb07c774d..000000000
--- a/gateway/sds_gateway/static/js/deprecated/datasetDetailsModal.js
+++ /dev/null
@@ -1,582 +0,0 @@
-/**
- * Dataset Details Modal Handler
- * Manages the dataset details modal with file tree display using file browser logic
- */
-class DatasetDetailsModal {
-	constructor() {
-		this.currentDatasetUuid = null;
-		this.currentTree = null;
-		this.formHandler = {
-			show: (container, showClass = "display-block") => {
-				container.classList.remove("display-none");
-				container.classList.add(showClass);
-			},
-			hide: (container, showClass = "display-block") => {
-				container.classList.remove(showClass);
-				container.classList.add("display-none");
-			},
-			formatFileSize: (bytes) => {
-				if (bytes === 0) return "0 Bytes";
-				const k = 1024;
-				const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-				const i = Math.floor(Math.log(bytes) / Math.log(k));
-				return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-			},
-		};
-
-		this.initializeEventListeners();
-	}
-
-	/**
-	 * Initialize event listeners
-	 */
-	initializeEventListeners() {
-		// Modal show event
-		document.addEventListener("show.bs.modal", (event) => {
-			if (event.target.id === "datasetDetailsModal") {
-				const button = event.relatedTarget;
-				const datasetUuid = button.getAttribute("data-dataset-uuid");
-				if (datasetUuid) {
-					this.openDatasetDetails(datasetUuid);
-				}
-			}
-		});
-
-		// Reset modal when it's hidden
-		document
-			.getElementById("datasetDetailsModal")
-			.addEventListener("hidden.bs.modal", (event) => {
-				if (event.target.id === "datasetDetailsModal") {
-					this.resetModal();
-				}
-			});
-
-		// Copy UUID button functionality
-		document.addEventListener("click", (event) => {
-			if (event.target.closest(".copy-uuid-btn")) {
-				this.copyDatasetUuid();
-			}
-		});
-	}
-
-	/**
-	 * Open dataset details modal with dataset information
-	 */
-	async openDatasetDetails(datasetUuid) {
-		this.currentDatasetUuid = datasetUuid;
-
-		try {
-			// Show loading state
-			this.showLoadingState();
-
-			// Load dataset information
-			await this.loadDatasetInfo(datasetUuid);
-
-			// Load file tree
-			await this.loadFileTree();
-		} catch (error) {
-			console.error("Error opening dataset details:", error);
-			this.showError("Failed to load dataset details");
-		}
-	}
-
-	/**
-	 * Load dataset information from view
-	 */
-	async loadDatasetInfo(datasetUuid) {
-		try {
-			const response = await fetch(
-				`/users/dataset-details/?dataset_uuid=${datasetUuid}`,
-				{
-					method: "GET",
-					headers: {
-						"Content-Type": "application/json",
-						"X-CSRFToken": this.getCSRFToken(),
-					},
-				},
-			);
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			const data = await response.json();
-			this.populateDatasetInfo(data.dataset);
-		} catch (error) {
-			console.error("Error loading dataset info:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Populate dataset information in the modal
-	 */
-	populateDatasetInfo(dataset) {
-		// Store dataset UUID for copy functionality
-		this.currentDatasetUuid = dataset.uuid;
-
-		// Dataset basic info
-		document.querySelector(".dataset-details-name").textContent =
-			dataset.name || "N/A";
-		document.querySelector(".dataset-details-author").textContent =
-			dataset.authors || "N/A";
-		document.querySelector(".dataset-details-description").textContent =
-			dataset.description || "No description available";
-
-		// Populate keywords
-		const keywordsContainer = document.querySelector(
-			".dataset-details-keywords",
-		);
-		if (dataset.keywords && dataset.keywords.length > 0) {
-			keywordsContainer.innerHTML = dataset.keywords
-				.map(
-					(keyword) =>
-						`<span class="badge bg-secondary me-1 mb-1">${this.escapeHtml(keyword)}</span>`,
-				)
-				.join("");
-		} else {
-			keywordsContainer.innerHTML =
-				'<span class="text-muted">No keywords</span>';
-		}
-
-		// Format status with badge using database values
-		const statusElement = document.querySelector(".dataset-details-status");
-		if (dataset.status === "draft") {
-			statusElement.innerHTML = `<span class="badge bg-secondary">${dataset.status_display || "Draft"}</span>`;
-		} else if (dataset.status === "final") {
-			statusElement.innerHTML = `<span class="badge bg-success">${dataset.status_display || "Final"}</span>`;
-		} else {
-			statusElement.textContent =
-				dataset.status_display || dataset.status || "N/A";
-		}
-
-		// Format dates in the same style as the table
-		const createdDate = window.ComponentUtils.formatDateForModal(
-			dataset.created_at,
-		);
-		const updatedDate = window.ComponentUtils.formatDateForModal(
-			dataset.updated_at,
-		);
-
-		document.querySelector(".dataset-details-created").innerHTML = createdDate;
-		document.querySelector(".dataset-details-updated").innerHTML = updatedDate;
-	}
-
-	/**
-	 * Copy dataset UUID to clipboard
-	 */
-	async copyDatasetUuid() {
-		if (!this.currentDatasetUuid) {
-			this.showAlert("No dataset UUID available to copy", "warning");
-			return;
-		}
-
-		try {
-			await navigator.clipboard.writeText(this.currentDatasetUuid);
-
-			// Update button to show success state
-			const copyBtn = document.querySelector(".copy-uuid-btn");
-			const icon = copyBtn.querySelector("i");
-			const originalIcon = icon.className;
-			const originalTitle = copyBtn.getAttribute("title");
-			const originalClasses = copyBtn.className;
-
-			// Change icon, title, and button styling to show success
-			icon.className = "bi bi-check-circle-fill";
-			copyBtn.className = "btn btn-sm btn-success copy-uuid-btn";
-			copyBtn.setAttribute("title", "UUID copied!");
-
-			// Show success message to user
-			this.showAlert(
-				"Dataset UUID copied to clipboard successfully",
-				"success",
-			);
-
-			// Reset after 2 seconds
-			setTimeout(() => {
-				icon.className = originalIcon;
-				copyBtn.className = originalClasses;
-				copyBtn.setAttribute("title", originalTitle);
-			}, 2000);
-		} catch (error) {
-			console.error("Failed to copy UUID:", error);
-
-			// Show error state briefly
-			const copyBtn = document.querySelector(".copy-uuid-btn");
-			const icon = copyBtn.querySelector("i");
-			const originalIcon = icon.className;
-			const originalTitle = copyBtn.getAttribute("title");
-			const originalClasses = copyBtn.className;
-
-			// Change to error state
-			icon.className = "bi bi-x-circle-fill";
-			copyBtn.className = "btn btn-sm btn-danger copy-uuid-btn";
-			copyBtn.setAttribute("title", "Failed to copy");
-
-			// Show user-visible error message
-			let errorMessage = "Failed to copy UUID to clipboard";
-			if (error.name === "NotAllowedError") {
-				errorMessage =
-					"Clipboard access denied. Please copy the UUID manually.";
-			} else if (error.name === "NotSupportedError") {
-				errorMessage =
-					"Clipboard API not supported. Please copy the UUID manually.";
-			} else if (error.name === "SecurityError") {
-				errorMessage =
-					"Clipboard access blocked by security policy. Please copy the UUID manually.";
-			}
-			this.showAlert(errorMessage, "error");
-
-			// Reset after 2 seconds
-			setTimeout(() => {
-				icon.className = originalIcon;
-				copyBtn.className = originalClasses;
-				copyBtn.setAttribute("title", originalTitle);
-			}, 2000);
-		}
-	}
-
-	/**
-	 * Load file tree for the dataset
-	 */
-	async loadFileTree() {
-		if (!this.currentDatasetUuid) return;
-
-		try {
-			const params = {
-				dataset_uuid: this.currentDatasetUuid,
-			};
-
-			const data = await this.fetchDatasetFiles(params);
-			if (!data.tree) {
-				console.error("No tree data received:", data);
-				return;
-			}
-
-			// Render the file tree
-			this.renderFileTree(data.tree, null, 0, "", false);
-
-			// Update statistics
-			this.updateFileStatistics(data);
-		} catch (error) {
-			console.error("Error loading file tree:", error);
-			this.showError("Failed to load file tree");
-		}
-	}
-
-	/**
-	 * Fetch dataset files from view
-	 */
-	async fetchDatasetFiles(params) {
-		const response = await fetch(
-			`/users/dataset-details/?dataset_uuid=${this.currentDatasetUuid}`,
-			{
-				method: "GET",
-				headers: {
-					"Content-Type": "application/json",
-					"X-CSRFToken": this.getCSRFToken(),
-				},
-			},
-		);
-
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-
-		return await response.json();
-	}
-
-	/**
-	 * Helper function to get relative path
-	 */
-	getRelativePath(file, currentPath = "") {
-		if (!currentPath) {
-			return "";
-		}
-		return `/${currentPath}`;
-	}
-
-	/**
-	 * Render file tree using the same logic as file browser
-	 */
-	renderFileTree(
-		tree,
-		parentElement = null,
-		level = 0,
-		currentPath = "",
-		searchTermEntered = false,
-	) {
-		this.currentTree = tree;
-		const targetElement =
-			parentElement || document.querySelector("#dataset-file-tree-table tbody");
-		if (!targetElement) {
-			console.error("File tree table body not found");
-			return;
-		}
-
-		if (!parentElement) {
-			targetElement.innerHTML = "";
-		}
-
-		// Early return if no tree or if tree is empty
-		if (
-			!tree ||
-			((!tree.files || tree.files.length === 0) &&
-				(!tree.children || Object.keys(tree.children).length === 0))
-		) {
-			targetElement.innerHTML =
-				'<tr><td colspan="5" class="text-center">No files or directories found</td></tr>';
-			return;
-		}
-
-		// Render directories
-		const directories = tree.children || {};
-		for (const [name, content] of Object.entries(directories)) {
-			if (
-				name === "files" ||
-				!content ||
-				typeof content !== "object" ||
-				!content.type ||
-				content.type !== "directory"
-			) {
-				continue;
-			}
-
-			const row = document.createElement("tr");
-			row.className = "folder-row";
-
-			// Set initial toggle state based on search term
-			const initiallyExpanded = searchTermEntered;
-			const toggleSymbol = initiallyExpanded ? "▼" : "▶";
-
-			// Construct the path for this directory
-			const dirPath = currentPath
-				? `${currentPath}/${content.name || name}`
-				: content.name || name;
-
-			row.innerHTML = `
-                <td>
-                    <span class="folder-toggle">${toggleSymbol}</span>
-                </td>
-                <td class="${level > 0 ? `ps-${level * 3}` : ""}">
-                    <i class="bi bi-folder me-2"></i>
-                    ${content.name || name}
-                </td>
-                <td>Directory</td>
-                <td>${this.formHandler.formatFileSize(content.size || 0)}</td>
-                <td>${content.created_at ? new Date(content.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" }) : "-"}</td>
-            `;
-			targetElement.appendChild(row);
-
-			// Create container for nested content
-			const nestedContainer = document.createElement("tr");
-			nestedContainer.className = "nested-row";
-			if (!initiallyExpanded) {
-				this.formHandler.hide(nestedContainer);
-			} else {
-				this.formHandler.show(nestedContainer, "display-table-row");
-			}
-			nestedContainer.innerHTML = `
-                <td colspan="5">
-                    <div class="nested-content">
-                        <table class="table table-striped">
-                            <tbody></tbody>
-                        </table>
-                    </div>
-                </td>
-            `;
-			targetElement.appendChild(nestedContainer);
-
-			// Add click handler for folder
-			row.addEventListener("click", () => {
-				const hasChildren = Object.keys(content.children || {}).length > 0;
-				const hasFiles = content.files && content.files.length > 0;
-				const expandable = hasChildren || hasFiles;
-
-				const toggle = row.querySelector(".folder-toggle");
-				const isExpanded = toggle.textContent === "▼";
-
-				if (expandable) {
-					toggle.textContent = isExpanded ? "▶" : "▼";
-					isExpanded
-						? this.formHandler.hide(nestedContainer, "display-table-row")
-						: this.formHandler.show(nestedContainer, "display-table-row");
-				} else {
-					toggle.textContent = "▶";
-					this.formHandler.hide(nestedContainer, "display-table-row");
-				}
-
-				// Load nested content if not already loaded
-				if (expandable && !isExpanded && !nestedContainer.dataset.loaded) {
-					this.renderFileTree(
-						content,
-						nestedContainer.querySelector("tbody"),
-						level + 1,
-						dirPath,
-						searchTermEntered,
-					);
-					nestedContainer.dataset.loaded = "true";
-				}
-			});
-
-			// If there's a search term, automatically load and expand the content
-			if (searchTermEntered && !nestedContainer.dataset.loaded) {
-				this.renderFileTree(
-					content,
-					nestedContainer.querySelector("tbody"),
-					level + 1,
-					dirPath,
-					searchTermEntered,
-				);
-				nestedContainer.dataset.loaded = "true";
-			}
-		}
-
-		// Render files
-		if (tree.files && tree.files.length > 0) {
-			for (const file of tree.files) {
-				const row = document.createElement("tr");
-
-				row.innerHTML = `
-                    <td></td>
-                    <td class="${level > 0 ? `ps-${level * 3}` : ""}">
-                        <i class="bi bi-file-earmark me-2"></i>
-                        ${file.name}
-                    </td>
-                    <td>${file.media_type || "Unknown"}</td>
-                    <td>${this.formHandler.formatFileSize(file.size)}</td>
-                    <td>${new Date(file.created_at).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })}</td>
-                `;
-
-				targetElement.appendChild(row);
-			}
-		}
-	}
-
-	/**
-	 * Update file statistics
-	 */
-	updateFileStatistics(data) {
-		const stats = data.statistics || {};
-
-		document.getElementById("total-files-count").textContent =
-			stats.total_files || 0;
-		document.getElementById("captures-count").textContent = stats.captures || 0;
-		document.getElementById("artifacts-count").textContent =
-			stats.artifacts || 0;
-		document.getElementById("total-size").textContent =
-			this.formHandler.formatFileSize(stats.total_size || 0);
-	}
-
-	/**
-	 * Handle download
-	 */
-	async handleDownload() {
-		this.showAlert(
-			"Download functionality not available in view-only mode",
-			"info",
-		);
-	}
-
-	/**
-	 * Show loading state
-	 */
-	showLoadingState() {
-		const tbody = document.querySelector("#dataset-file-tree-table tbody");
-		if (tbody) {
-			tbody.innerHTML = `
-                <tr>
-                    <td colspan="5" class="text-center py-4">
-                        <div class="spinner-border text-primary" role="status">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                        <p class="mt-2 mb-0">Loading dataset files...</p>
-                    </td>
-                </tr>
-            `;
-		}
-	}
-
-	/**
-	 * Show error message
-	 */
-	showError(message) {
-		const tbody = document.querySelector("#dataset-file-tree-table tbody");
-		if (tbody) {
-			tbody.innerHTML = `
-                <tr>
-                    <td colspan="5" class="text-center text-danger py-4">
-                        <i class="bi bi-exclamation-triangle me-2"></i>
-                        ${this.escapeHtml(message)}
-                    </td>
-                </tr>
-            `;
-		}
-	}
-
-	/**
-	 * Show alert message
-	 */
-	showAlert(message, type = "info") {
-		if (window.showAlert) {
-			window.showAlert(message, type);
-		} else {
-			console.log(`${type.toUpperCase()}: ${message}`);
-		}
-	}
-
-	/**
-	 * Reset modal state
-	 */
-	resetModal() {
-		this.currentDatasetUuid = null;
-		this.currentTree = null;
-
-		// Clear form inputs
-		const searchContainer = document.getElementById(
-			"dataset-files-search-form",
-		);
-		if (searchContainer) {
-			const inputs = searchContainer.querySelectorAll(
-				"input, select, textarea",
-			);
-			for (const input of inputs) {
-				input.value = "";
-			}
-		}
-
-		// Clear table
-		const tbody = document.querySelector("#dataset-file-tree-table tbody");
-		if (tbody) {
-			tbody.innerHTML = "";
-		}
-
-		// Reset statistics
-		document.getElementById("total-files-count").textContent = "0";
-		document.getElementById("captures-count").textContent = "0";
-		document.getElementById("artifacts-count").textContent = "0";
-		document.getElementById("total-size").textContent = "0 B";
-	}
-
-	/**
-	 * Escape HTML to prevent XSS
-	 */
-	escapeHtml(text) {
-		const div = document.createElement("div");
-		div.textContent = text;
-		return div.innerHTML;
-	}
-
-	/**
-	 * Get CSRF token
-	 */
-	getCSRFToken() {
-		const token = document.querySelector("[name=csrfmiddlewaretoken]");
-		return token ? token.value : "";
-	}
-}
-
-// Initialize the modal handler when DOM is loaded
-document.addEventListener("DOMContentLoaded", () => {
-	window.datasetDetailsModal = new DatasetDetailsModal();
-});
diff --git a/gateway/sds_gateway/static/js/deprecated/permission-levels.js b/gateway/sds_gateway/static/js/deprecated/permission-levels.js
deleted file mode 100644
index 6386baa74..000000000
--- a/gateway/sds_gateway/static/js/deprecated/permission-levels.js
+++ /dev/null
@@ -1,532 +0,0 @@
-/**
- * Permission Levels JavaScript
- * Handles permission level selection and display functionality
- */
-
-document.addEventListener("DOMContentLoaded", () => {
-	initializePermissionLevels();
-});
-
-function initializePermissionLevels() {
-	// Initialize permission level selectors
-	const permissionSelects = document.querySelectorAll(
-		'[id^="permission-level-"]',
-	);
-
-	for (const select of permissionSelects) {
-		// Add change event listener
-		select.addEventListener("change", handlePermissionLevelChange);
-
-		// Add visual feedback on selection
-		select.addEventListener("focus", function () {
-			this.parentElement.classList.add("focused");
-		});
-
-		select.addEventListener("blur", function () {
-			this.parentElement.classList.remove("focused");
-		});
-	}
-
-	// Initialize permission level selectors for existing users
-	initializeExistingUserPermissionSelectors();
-
-	// Initialize permission badges with tooltips
-	initializePermissionBadges();
-
-	// Initialize group permission management
-	initializeGroupPermissionManagement();
-
-	// Initialize toggle buttons for member permissions
-	initializeMemberPermissionToggles();
-}
-
-function initializeExistingUserPermissionSelectors() {
-	// Handle permission level changes for existing users
-	const existingUserSelectors = document.querySelectorAll(
-		".permission-level-selector",
-	);
-
-	for (const select of existingUserSelectors) {
-		select.addEventListener("change", handleExistingUserPermissionChange);
-
-		// Add visual feedback
-		select.addEventListener("focus", function () {
-			this.classList.add("focused");
-		});
-
-		select.addEventListener("blur", function () {
-			this.classList.remove("focused");
-		});
-	}
-}
-
-function handleExistingUserPermissionChange(event) {
-	const select = event.target;
-	const userEmail = select.getAttribute("data-user-email");
-	const userName = select.getAttribute("data-user-name");
-	const itemUuid = select.getAttribute("data-item-uuid");
-	const itemType = select.getAttribute("data-item-type");
-	const newPermissionLevel = select.value;
-
-	// Show loading state
-	select.disabled = true;
-	select.classList.add("updating");
-
-	// Prepare form data
-	const formData = new FormData();
-	formData.append("user_email", userEmail);
-	formData.append("permission_level", newPermissionLevel);
-	formData.append("csrfmiddlewaretoken", getCSRFToken());
-
-	// Send PATCH request to update permission
-	fetch(`/users/share/${itemType}/${itemUuid}/`, {
-		method: "PATCH",
-		body: formData,
-		headers: {
-			"X-Requested-With": "XMLHttpRequest",
-		},
-	})
-		.then((response) => response.json())
-		.then((data) => {
-			if (data.success) {
-				// Show success message
-				showAlert(data.message, "success");
-
-				// Update visual appearance
-				updatePermissionSelectorAppearance(select, newPermissionLevel);
-
-				// Trigger authors update if this is a dataset
-				if (itemType === "dataset") {
-					triggerDatasetAuthorsUpdate(itemUuid);
-				}
-			} else {
-				// Show error message
-				showAlert(data.error || "Failed to update permission level", "error");
-
-				// Revert to previous value
-				select.value = select.getAttribute("data-original-value") || "viewer";
-			}
-		})
-		.catch((error) => {
-			console.error("Error updating permission level:", error);
-			showAlert("Failed to update permission level", "error");
-
-			// Revert to previous value
-			select.value = select.getAttribute("data-original-value") || "viewer";
-		})
-		.finally(() => {
-			// Remove loading state
-			select.disabled = false;
-			select.classList.remove("updating");
-		});
-}
-
-function updatePermissionSelectorAppearance(select, permissionLevel) {
-	// Remove existing permission classes
-	select.classList.remove(
-		"permission-viewer",
-		"permission-contributor",
-		"permission-co-owner",
-	);
-
-	// Add new permission class
-	select.classList.add(`permission-${permissionLevel}`);
-
-	// Store the new value as original
-	select.setAttribute("data-original-value", permissionLevel);
-}
-
-function triggerDatasetAuthorsUpdate(datasetUuid) {
-	// Trigger a custom event to notify other components that authors have changed
-	const event = new CustomEvent("datasetAuthorsUpdated", {
-		detail: { datasetUuid: datasetUuid },
-	});
-	document.dispatchEvent(event);
-}
-
-function handlePermissionLevelChange(event) {
-	const select = event.target;
-	const selectedValue = select.value;
-	const form = select.closest("form");
-	const saveButton = form.querySelector('[id^="share-item-btn-"]');
-	const pendingMessage = form.querySelector('[id^="pending-changes-message-"]');
-
-	// Update visual feedback
-	updatePermissionLevelVisualFeedback(select, selectedValue);
-
-	// Update form data
-	updateFormPermissionLevel(form, selectedValue);
-
-	// Show pending changes message
-	if (pendingMessage) {
-		pendingMessage.classList.remove("d-none");
-	}
-
-	// Enable save button if there are selected users
-	const selectedChips = form.querySelectorAll(".selected-user-chip");
-	if (selectedChips.length > 0 && saveButton) {
-		saveButton.disabled = false;
-	}
-
-	// Show permission level description
-	showPermissionLevelDescription(select, selectedValue);
-}
-
-function updatePermissionLevelVisualFeedback(select, permissionLevel) {
-	const section = select.closest(".permission-level-section");
-
-	// Remove existing visual classes
-	section.classList.remove(
-		"viewer-selected",
-		"contributor-selected",
-		"co-owner-selected",
-	);
-
-	// Add new visual class
-	section.classList.add(`${permissionLevel}-selected`);
-
-	// Update select styling
-	select.className = `form-select permission-${permissionLevel}`;
-}
-
-function updateFormPermissionLevel(form, permissionLevel) {
-	// Remove existing hidden input
-	const existingInput = form.querySelector('input[name="permission_level"]');
-	if (existingInput) {
-		existingInput.remove();
-	}
-
-	// Create new hidden input
-	const hiddenInput = document.createElement("input");
-	hiddenInput.type = "hidden";
-	hiddenInput.name = "permission_level";
-	hiddenInput.value = permissionLevel;
-	form.appendChild(hiddenInput);
-}
-
-function showPermissionLevelDescription(select, permissionLevel) {
-	const descriptions = {
-		viewer: "Can view dataset information and download files",
-		contributor: "Can add their own assets to the dataset",
-		"co-owner": "Can add/remove assets and edit dataset metadata",
-	};
-
-	const description = descriptions[permissionLevel];
-	if (description) {
-		// Create or update description tooltip
-		let tooltip = select.parentElement.querySelector(
-			".permission-description-tooltip",
-		);
-		if (!tooltip) {
-			tooltip = document.createElement("div");
-			tooltip.className =
-				"permission-description-tooltip alert alert-info mt-2";
-			tooltip.style.fontSize = "0.875rem";
-			select.parentElement.appendChild(tooltip);
-		}
-
-		tooltip.innerHTML = `<i class="bi bi-info-circle me-1"></i>${description}`;
-
-		// Auto-hide after 3 seconds
-		setTimeout(() => {
-			if (tooltip?.parentElement) {
-				tooltip.remove();
-			}
-		}, 3000);
-	}
-}
-
-function initializePermissionBadges() {
-	const permissionBadges = document.querySelectorAll(".permission-badge");
-
-	for (const badge of permissionBadges) {
-		// Add hover tooltip
-		const permissionLevel = badge.textContent
-			.trim()
-			.toLowerCase()
-			.replace(/\s+/g, "-");
-		const tooltips = {
-			"co-owner":
-				"Full access: Can add/remove assets and edit dataset metadata",
-			contributor: "Can add assets: Can add their own assets to the dataset",
-			viewer: "Read-only: Can view dataset information and download files",
-			owner: "Dataset owner: Full control over the dataset",
-		};
-
-		const tooltip = tooltips[permissionLevel];
-		if (tooltip) {
-			badge.setAttribute("data-bs-toggle", "tooltip");
-			badge.setAttribute("data-bs-placement", "top");
-			badge.setAttribute("title", tooltip);
-		}
-
-		// Add click animation
-		badge.addEventListener("click", function () {
-			this.style.transform = "scale(1.1)";
-			setTimeout(() => {
-				this.style.transform = "";
-			}, 200);
-		});
-	}
-
-	// Initialize Bootstrap tooltips
-	if (typeof bootstrap !== "undefined" && bootstrap.Tooltip) {
-		const tooltipTriggerList = [].slice.call(
-			document.querySelectorAll('[data-bs-toggle="tooltip"]'),
-		);
-		tooltipTriggerList.map(
-			(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
-		);
-	}
-}
-
-// Group permission management functions
-function initializeGroupPermissionManagement() {
-	// Handle group permission level changes
-	const groupPermissionSelectors = document.querySelectorAll(
-		".group-permission-selector",
-	);
-
-	for (const select of groupPermissionSelectors) {
-		select.addEventListener("change", handleGroupPermissionChange);
-	}
-
-	// Handle individual member permission changes within groups
-	const memberPermissionSelectors = document.querySelectorAll(
-		".member-permission-selector",
-	);
-
-	for (const select of memberPermissionSelectors) {
-		select.addEventListener("change", handleMemberPermissionChange);
-	}
-}
-
-function initializeMemberPermissionToggles() {
-	// Handle toggle buttons for member permissions
-	const toggleButtons = document.querySelectorAll(".toggle-member-permissions");
-
-	for (const button of toggleButtons) {
-		button.addEventListener("click", function () {
-			const memberPermissions = this.parentElement.querySelector(
-				".member-permissions",
-			);
-			const icon = this.querySelector("i");
-
-			if (memberPermissions.style.display === "none") {
-				memberPermissions.style.display = "block";
-				icon.className = "bi bi-chevron-up";
-				this.innerHTML =
-					'<i class="bi bi-chevron-up"></i> Hide Individual Permissions';
-			} else {
-				memberPermissions.style.display = "none";
-				icon.className = "bi bi-chevron-down";
-				this.innerHTML =
-					'<i class="bi bi-chevron-down"></i> Manage Individual Permissions';
-			}
-		});
-	}
-}
-
-function handleGroupPermissionChange(event) {
-	const select = event.target;
-	const groupUuid = select.getAttribute("data-group-uuid");
-	const itemUuid = select.getAttribute("data-item-uuid");
-	const itemType = select.getAttribute("data-item-type");
-	const newPermissionLevel = select.value;
-
-	// Don't send request for "multiple" selection
-	if (newPermissionLevel === "multiple") {
-		return;
-	}
-
-	// Show loading state
-	select.disabled = true;
-	select.classList.add("updating");
-
-	// Prepare form data
-	const formData = new FormData();
-	formData.append("group_uuid", groupUuid);
-	formData.append("permission_level", newPermissionLevel);
-	formData.append("csrfmiddlewaretoken", getCSRFToken());
-
-	// Send PUT request to update group permissions
-	fetch(`/users/share/${itemType}/${itemUuid}/`, {
-		method: "PUT",
-		body: formData,
-		headers: {
-			"X-Requested-With": "XMLHttpRequest",
-		},
-	})
-		.then((response) => response.json())
-		.then((data) => {
-			if (data.success) {
-				// Show success message
-				showAlert(data.message, "success");
-
-				// Update all member permissions to match group permission
-				const memberSelectors = document.querySelectorAll(
-					`[data-group-uuid="${groupUuid}"].member-permission-selector`,
-				);
-
-				for (const memberSelect of memberSelectors) {
-					memberSelect.value = newPermissionLevel;
-					memberSelect.classList.remove(
-						"permission-viewer",
-						"permission-contributor",
-						"permission-co-owner",
-					);
-					memberSelect.classList.add(`permission-${newPermissionLevel}`);
-				}
-
-				// Update group selector appearance
-				updatePermissionSelectorAppearance(select, newPermissionLevel);
-
-				// Trigger authors update if this is a dataset
-				if (itemType === "dataset") {
-					triggerDatasetAuthorsUpdate(itemUuid);
-				}
-			} else {
-				// Show error message
-				showAlert(
-					data.error || "Failed to update group permission level",
-					"error",
-				);
-
-				// Revert to previous value
-				select.value = select.getAttribute("data-original-value") || "viewer";
-			}
-		})
-		.catch((error) => {
-			console.error("Error updating group permission level:", error);
-			showAlert("Failed to update group permission level", "error");
-
-			// Revert to previous value
-			select.value = select.getAttribute("data-original-value") || "viewer";
-		})
-		.finally(() => {
-			// Remove loading state
-			select.disabled = false;
-			select.classList.remove("updating");
-		});
-}
-
-function handleMemberPermissionChange(event) {
-	const select = event.target;
-	const groupUuid = select.getAttribute("data-group-uuid");
-	const memberEmail = select.getAttribute("data-member-email");
-	const itemUuid = select.getAttribute("data-item-uuid");
-	const itemType = select.getAttribute("data-item-type");
-	const newPermissionLevel = select.value;
-
-	// Show loading state
-	select.disabled = true;
-	select.classList.add("updating");
-
-	// Prepare form data
-	const formData = new FormData();
-	formData.append("user_email", memberEmail);
-	formData.append("permission_level", newPermissionLevel);
-	formData.append("csrfmiddlewaretoken", getCSRFToken());
-
-	// Send PATCH request to update individual member permission
-	fetch(`/users/share/${itemType}/${itemUuid}/`, {
-		method: "PATCH",
-		body: formData,
-		headers: {
-			"X-Requested-With": "XMLHttpRequest",
-		},
-	})
-		.then((response) => response.json())
-		.then((data) => {
-			if (data.success) {
-				// Show success message
-				showAlert(
-					`Updated ${memberEmail} to ${newPermissionLevel} permission`,
-					"success",
-				);
-
-				// Check if all members have the same permission level
-				const memberSelectors = document.querySelectorAll(
-					`[data-group-uuid="${groupUuid}"].member-permission-selector`,
-				);
-				const allSame = Array.from(memberSelectors).every(
-					(memberSelect) => memberSelect.value === newPermissionLevel,
-				);
-
-				// Update group selector
-				const groupSelector = document.querySelector(
-					`[data-group-uuid="${groupUuid}"].group-permission-selector`,
-				);
-				if (groupSelector) {
-					if (allSame) {
-						groupSelector.value = newPermissionLevel;
-						updatePermissionSelectorAppearance(
-							groupSelector,
-							newPermissionLevel,
-						);
-					} else {
-						groupSelector.value = "multiple";
-						groupSelector.classList.add("permission-multiple");
-					}
-				}
-
-				// Update member selector appearance
-				updatePermissionSelectorAppearance(select, newPermissionLevel);
-
-				// Trigger authors update if this is a dataset
-				if (itemType === "dataset") {
-					triggerDatasetAuthorsUpdate(itemUuid);
-				}
-			} else {
-				// Show error message
-				showAlert(
-					data.error || "Failed to update member permission level",
-					"error",
-				);
-
-				// Revert to previous value
-				select.value = select.getAttribute("data-original-value") || "viewer";
-			}
-		})
-		.catch((error) => {
-			console.error("Error updating member permission level:", error);
-			showAlert("Failed to update member permission level", "error");
-
-			// Revert to previous value
-			select.value = select.getAttribute("data-original-value") || "viewer";
-		})
-		.finally(() => {
-			// Remove loading state
-			select.disabled = false;
-			select.classList.remove("updating");
-		});
-}
-
-// Utility functions
-function getCSRFToken() {
-	const tokenElement = document.querySelector("[name=csrfmiddlewaretoken]");
-	return tokenElement ? tokenElement.value : "";
-}
-
-function showAlert(message, type = "info") {
-	// Use existing alert system if available
-	if (window.showAlert) {
-		window.showAlert(message, type);
-	} else {
-		// Fallback alert
-		alert(`${type.toUpperCase()}: ${message}`);
-	}
-}
-
-// Export functions for use in other modules
-window.PermissionLevels = {
-	initialize: initializePermissionLevels,
-	handleChange: handlePermissionLevelChange,
-	updateVisualFeedback: updatePermissionLevelVisualFeedback,
-	showDescription: showPermissionLevelDescription,
-	initializeBadges: initializePermissionBadges,
-	initializeGroupManagement: initializeGroupPermissionManagement,
-	handleExistingUserChange: handleExistingUserPermissionChange,
-	handleGroupChange: handleGroupPermissionChange,
-	handleMemberChange: handleMemberPermissionChange,
-};
diff --git a/gateway/sds_gateway/static/js/deprecated/project.js b/gateway/sds_gateway/static/js/deprecated/project.js
deleted file mode 100644
index e22190bfc..000000000
--- a/gateway/sds_gateway/static/js/deprecated/project.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// import "../css/project.css";
-
-/* Project specific Javascript goes here. */
-import "./captureGroupingComponents.js";
-import "./userSearchComponent.js";
diff --git a/gateway/sds_gateway/static/js/deprecated/shareGroupManager.js b/gateway/sds_gateway/static/js/deprecated/shareGroupManager.js
deleted file mode 100644
index 2e7e068e8..000000000
--- a/gateway/sds_gateway/static/js/deprecated/shareGroupManager.js
+++ /dev/null
@@ -1,1131 +0,0 @@
-// Share Group Manager JavaScript
-// Handles all share group operations including creating, managing members, and deleting groups
-
-// Global variables
-let currentGroupUuid = null;
-let currentGroupName = null;
-let pendingDeleteGroupUuid = null;
-let pendingDeleteGroupName = null;
-const pendingRemovals = new Set();
-let shareGroupUserSearchHandler = null;
-
-// Create Group Form Handler
-function initializeCreateGroupForm() {
-	const createGroupForm = document.getElementById("createGroupForm");
-	if (createGroupForm) {
-		createGroupForm.addEventListener("submit", (e) => {
-			e.preventDefault();
-
-			const groupName = document.getElementById("groupName").value;
-
-			if (!groupName.trim()) {
-				showAlert("Group name is required", "error");
-				return;
-			}
-
-			const formData = new FormData();
-			formData.append("action", "create");
-			formData.append("name", groupName);
-
-			const csrfToken = document.querySelector(
-				"[name=csrfmiddlewaretoken]",
-			).value;
-
-			fetch(window.location.href, {
-				method: "POST",
-				headers: {
-					"X-CSRFToken": csrfToken,
-				},
-				body: formData,
-			})
-				.then((response) => {
-					return response.json();
-				})
-				.then((data) => {
-					if (data.success) {
-						// Show success message
-						showAlert(data.message, "success");
-
-						// Close the create modal
-						const createModal = bootstrap.Modal.getInstance(
-							document.getElementById("createGroupModal"),
-						);
-						createModal.hide();
-
-						// Clear the form
-						document.getElementById("groupName").value = "";
-
-						// Add the new group to the table dynamically
-						addNewGroupToTable(data.group);
-
-						// Automatically open the manage modal for the new group
-						setTimeout(() => {
-							openManageModalForGroup(data.group.uuid, data.group.name);
-						}, 500);
-					} else {
-						showAlert(data.error, "error");
-					}
-				})
-				.catch((error) => {
-					console.error("Error:", error);
-					showAlert("An error occurred while creating the group.", "error");
-				});
-		});
-	} else {
-		console.error("Create group form not found");
-	}
-}
-
-// Add Members Form Handler
-function initializeAddMembersForm() {
-	const addMembersForm = document.getElementById("addMembersForm");
-	if (addMembersForm) {
-		addMembersForm.addEventListener("submit", (e) => {
-			e.preventDefault();
-
-			const inputId = "user-search-sharegroup";
-			const selectedUsers = shareGroupUserSearchHandler
-				? shareGroupUserSearchHandler.selectedUsersMap[inputId] || []
-				: [];
-
-			if (selectedUsers.length === 0) {
-				showAlert("Please select at least one user to add.", "error");
-				return;
-			}
-
-			const userEmails = selectedUsers.map((user) => user.email).join(",");
-
-			const formData = new FormData();
-			formData.append("action", "add_members");
-			formData.append("group_uuid", currentGroupUuid);
-			formData.append("user_emails", userEmails);
-
-			fetch(window.location.href, {
-				method: "POST",
-				headers: {
-					"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]")
-						.value,
-				},
-				body: formData,
-			})
-				.then((response) => response.json())
-				.then((data) => {
-					if (data.success) {
-						// Show success message in toast
-						showAlert(data.message, "success");
-
-						// Show any errors as warnings
-						if (data.errors && data.errors.length > 0) {
-							for (const error of data.errors) {
-								showAlert(error, "warning");
-							}
-						}
-
-						if (shareGroupUserSearchHandler) {
-							shareGroupUserSearchHandler.resetShareGroup();
-						}
-						// Clear pending removals when members are added
-						pendingRemovals.clear();
-						loadCurrentMembers();
-						updateSaveButtonState();
-
-						// Update table member info by adding the new members
-						if (data.added_users && data.added_users.length > 0) {
-							updateTableMemberEmails(
-								currentGroupUuid,
-								data.added_users,
-								"add",
-							);
-						}
-					} else {
-						showAlert(data.error, "error");
-					}
-				})
-				.catch((error) => {
-					console.error("Error:", error);
-					showAlert("An error occurred while adding members.", "error");
-				});
-		});
-	}
-}
-
-// Manage Members Modal Event Handler
-function initializeManageMembersModal() {
-	const manageMembersModal = document.getElementById("share-modal-sharegroup");
-	if (manageMembersModal) {
-		manageMembersModal.addEventListener("show.bs.modal", (event) => {
-			const button = event.relatedTarget;
-			// Only proceed if the button exists and has the required data attributes
-			if (!button || !button.hasAttribute("data-group-uuid")) {
-				return;
-			}
-			currentGroupUuid = button.getAttribute("data-group-uuid");
-			currentGroupName = button.getAttribute("data-group-name");
-
-			document.getElementById("addGroupUuid").value = currentGroupUuid;
-
-			// Update modal title
-			document.getElementById("manageMembersModalLabel").innerHTML =
-				`<i class="bi bi-person-plus me-2"></i>Manage Members: ${currentGroupName}`;
-
-			// Clear pending removals when opening modal
-			pendingRemovals.clear();
-
-			// Reset user search handler state
-			if (shareGroupUserSearchHandler) {
-				shareGroupUserSearchHandler.resetShareGroup();
-			}
-
-			// Load current members
-			loadCurrentMembers();
-
-			// Load and display shared assets information
-			loadSharedAssetsInfo();
-		});
-
-		// Also handle modal hidden event to reset state
-		manageMembersModal.addEventListener("hidden.bs.modal", () => {
-			// Reset user search handler state (but don't destroy it)
-			if (shareGroupUserSearchHandler) {
-				shareGroupUserSearchHandler.resetShareGroup();
-			}
-			// Clear current group info
-			currentGroupUuid = null;
-			currentGroupName = null;
-			// Clear pending removals
-			pendingRemovals.clear();
-			// Reset save button state
-			updateSaveButtonState();
-			// Hide shared assets section
-			const sharedAssetsSection = document.getElementById(
-				"sharedAssetsSection",
-			);
-			if (sharedAssetsSection) {
-				sharedAssetsSection.style.display = "none";
-			}
-		});
-	}
-}
-
-// Save Button Handler
-function initializeSaveButton() {
-	const saveBtn = document.getElementById("save-sharegroup-btn");
-	if (saveBtn) {
-		saveBtn.addEventListener("click", function () {
-			const originalText = this.innerHTML;
-			this.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
-			this.disabled = true;
-			// Handle pending removals
-			if (pendingRemovals.size > 0) {
-				const formData = new FormData();
-				formData.append("action", "remove_members");
-				formData.append("group_uuid", currentGroupUuid);
-				formData.append("user_emails", Array.from(pendingRemovals).join(","));
-
-				fetch(window.location.href, {
-					method: "POST",
-					headers: {
-						"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]")
-							.value,
-					},
-					body: formData,
-				})
-					.then((response) => response.json())
-					.then((data) => {
-						if (data.success) {
-							// Show success message in toast
-							showAlert(data.message, "success");
-
-							// Show any errors as warnings
-							if (data.errors && data.errors.length > 0) {
-								for (const error of data.errors) {
-									showAlert(error, "warning");
-								}
-							}
-
-							// Clear pending removals
-							pendingRemovals.clear();
-							// Reset all remove buttons
-							resetRemoveButtons();
-							// Reload members
-							loadCurrentMembers();
-
-							// Update table member info by removing the members
-							if (data.removed_users && data.removed_users.length > 0) {
-								updateTableMemberEmails(
-									currentGroupUuid,
-									data.removed_users,
-									"remove",
-								);
-							}
-						} else {
-							showAlert(data.error, "error");
-						}
-					})
-					.catch((error) => {
-						console.error("Error:", error);
-						showAlert("An error occurred while removing members.", "error");
-					})
-					.finally(() => {
-						this.innerHTML = originalText;
-						this.disabled = false;
-						updateSaveButtonState();
-					});
-			}
-		});
-	}
-}
-
-// Delete Group Confirmation Handler
-function initializeDeleteGroupConfirmation() {
-	const confirmDeleteBtn = document.getElementById("confirmDeleteGroup");
-	if (confirmDeleteBtn) {
-		confirmDeleteBtn.addEventListener("click", function () {
-			if (!pendingDeleteGroupUuid) {
-				return;
-			}
-			const originalText = this.innerHTML;
-			this.innerHTML = '<i class="bi bi-hourglass-split"></i> Deleting...';
-			this.disabled = true;
-
-			const formData = new FormData();
-			formData.append("action", "delete_group");
-			formData.append("group_uuid", pendingDeleteGroupUuid);
-
-			fetch(window.location.href, {
-				method: "POST",
-				headers: {
-					"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]")
-						.value,
-				},
-				body: formData,
-			})
-				.then((response) => response.json())
-				.then((data) => {
-					// Hide the confirmation modal
-					const deleteModal = bootstrap.Modal.getInstance(
-						document.getElementById("deleteGroupModal"),
-					);
-					deleteModal.hide();
-
-					if (data.success) {
-						// Store success message for after page reload
-						localStorage.setItem("shareGroupSuccessMessage", data.message);
-						setTimeout(() => window.location.reload(), 1000);
-					} else {
-						showAlert(data.error, "error");
-					}
-				})
-				.catch((error) => {
-					console.error("Error:", error);
-					showAlert("An error occurred while deleting the group.", "error");
-				})
-				.finally(() => {
-					// Reset button state
-					this.innerHTML = originalText;
-					this.disabled = false;
-
-					// Clear pending deletion data
-					pendingDeleteGroupUuid = null;
-					pendingDeleteGroupName = null;
-				});
-		});
-	}
-}
-
-// Load current members for a group
-function loadCurrentMembers() {
-	if (!currentGroupUuid) return;
-
-	const membersList = document.getElementById("currentMembers");
-
-	// Clear member count and show loading state
-	const memberCountElement = document.getElementById("memberCount");
-	if (memberCountElement) {
-		memberCountElement.textContent = "";
-	}
-
-	membersList.innerHTML = `
-        <tr>
-            <td class="p-2 shadow-sm">
-                <div class="text-center text-muted">
-                    <i class="bi bi-people"></i>
-                    <p class="mb-0">Loading members...</p>
-                </div>
-            </td>
-        </tr>
-    `;
-
-	fetch(`${window.location.href}?group_uuid=${currentGroupUuid}`, {
-		headers: {
-			"X-Requested-With": "XMLHttpRequest",
-		},
-	})
-		.then((response) => response.json())
-		.then((data) => {
-			if (data.success) {
-				if (data.members.length === 0) {
-					// Clear member count for empty group
-					const memberCountElement = document.getElementById("memberCount");
-					if (memberCountElement) {
-						memberCountElement.textContent = "";
-					}
-
-					membersList.innerHTML = `
-                    <tr>
-                        <td class="p-2 shadow-sm">
-                            <div class="text-center text-muted mb-1 mt-1">
-                                <i class="bi bi-people"></i>
-                                <p>No members in this group</p>
-                            </div>
-                        </td>
-                    </tr>
-                `;
-				} else {
-					// Update the display list with table structure like share modal
-					const memberHtml = data.members
-						.map(
-							(member) => `
-                    <tr>
-                        <td class="p-2 shadow-sm">
-                            <div class="row">
-                                <div class="col-md-10">
-                                    <div>
-                                        <h5 class="mb-1">${member.name || "No name"}</h5>
-                                        <p class="mb-0">
-                                            <small class="text-muted">${member.email}</small>
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="col-md-2 d-flex justify-content-end align-items-center">
-                                    <button type="button"
-                                            class="btn btn-sm btn-outline-danger remove-member-btn"
-                                            data-user-email="${member.email}"
-                                            data-user-name="${member.name || "No name"}"
-                                            onclick="removeMemberFromGroup(event, '${member.email}', '${member.name || "No name"}')">
-                                        <i class="bi bi-person-slash me-1"></i>Remove
-                                    </button>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-                `,
-						)
-						.join("");
-
-					// Update member count above the title
-					const memberCountElement = document.getElementById("memberCount");
-					if (memberCountElement) {
-						memberCountElement.textContent = `${data.count} member${data.count !== 1 ? "s" : ""}`;
-					}
-
-					membersList.innerHTML = memberHtml;
-
-					// Update table member info
-					updateTableMemberInfo(currentGroupUuid, data.members);
-
-					// Update save button state after loading members
-					updateSaveButtonState();
-				}
-			} else {
-				const errorHtml = `
-                <div class="text-center text-danger">
-                    <i class="bi bi-exclamation-triangle"></i>
-                    <p class="mb-0">Error loading members</p>
-                </div>
-            `;
-				membersList.innerHTML = errorHtml;
-			}
-		})
-		.catch((error) => {
-			console.error("Error:", error);
-			const errorHtml = `
-            <div class="text-center text-danger">
-                <i class="bi bi-exclamation-triangle"></i>
-                <p class="mb-0">Error loading members</p>
-            </div>
-        `;
-			membersList.innerHTML = errorHtml;
-		});
-}
-
-function loadSharedAssetsInfo() {
-	if (!currentGroupUuid) {
-		return;
-	}
-
-	// Create a temporary request to get shared assets info
-	const formData = new FormData();
-	formData.append("action", "get_shared_assets");
-	formData.append("group_uuid", currentGroupUuid);
-
-	fetch(window.location.href, {
-		method: "POST",
-		headers: {
-			"X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value,
-		},
-		body: formData,
-	})
-		.then((response) => response.json())
-		.then((data) => {
-			if (data.success) {
-				displaySharedAssetsInfo(data.shared_assets);
-			} else {
-				console.error("Error loading shared assets:", data.error);
-			}
-		})
-		.catch((error) => {
-			console.error("Error:", error);
-		});
-}
-
-function displaySharedAssetsInfo(sharedAssets) {
-	// Find the shared assets section in the modal
-	const sharedAssetsSection = document.getElementById("sharedAssetsSection");
-
-	if (sharedAssetsSection) {
-		if (sharedAssets && sharedAssets.length > 0) {
-			// Separate assets by type
-			const datasets = sharedAssets
-				.filter((asset) => asset.type === "dataset")
-				.sort((a, b) => a.name.localeCompare(b.name));
-			const captures = sharedAssets
-				.filter((asset) => asset.type === "capture")
-				.sort((a, b) => a.name.localeCompare(b.name));
-
-			const totalDatasets = datasets.length;
-			const totalCaptures = captures.length;
-
-			// Show first 3 of each type
-			const displayDatasets = datasets.slice(0, 3);
-			const displayCaptures = captures.slice(0, 3);
-
-			const hasMoreDatasets = totalDatasets > 3;
-			const hasMoreCaptures = totalCaptures > 3;
-
-			// Build datasets column
-			let datasetsHtml = "";
-			if (displayDatasets.length > 0) {
-				const datasetsList = displayDatasets
-					.map(
-						(asset) => `
-                    <div class="d-flex align-items-center mb-2">
-                        <i class="bi bi-collection me-2"></i>
-                        <div class="flex-grow-1">
-                            <div class="fw-bold">${asset.name}</div>
-                            <div class="text-muted small">Dataset • Shared by ${asset.owner_name}</div>
-                        </div>
-                    </div>
-                `,
-					)
-					.join("");
-
-				let moreDatasetsText = "";
-				if (hasMoreDatasets) {
-					const remainingDatasets = totalDatasets - 3;
-					moreDatasetsText = `
-                        <div class="text-muted small mt-2">
-                            <i class="bi bi-three-dots me-1"></i>
-                            and ${remainingDatasets} more dataset${remainingDatasets !== 1 ? "s" : ""}
-                        </div>
-                    `;
-				}
-
-				datasetsHtml = `
-                    <div class="col-md-6">
-                        <h6>
-                            <i class="bi bi-collection me-2"></i>Datasets (${totalDatasets})
-                        </h6>
-                        <div class="shared-datasets-list">
-                            ${datasetsList}
-                            ${moreDatasetsText}
-                        </div>
-                    </div>
-                `;
-			}
-
-			// Build captures column
-			let capturesHtml = "";
-			if (displayCaptures.length > 0) {
-				const capturesList = displayCaptures
-					.map(
-						(asset) => `
-                    <div class="d-flex align-items-center mb-2">
-                        <i class="bi bi-folder me-2"></i>
-                        <div class="flex-grow-1">
-                            <div class="fw-bold">${asset.name}</div>
-                            <div class="text-muted small">Capture • Shared by ${asset.owner_name}</div>
-                        </div>
-                    </div>
-                `,
-					)
-					.join("");
-
-				let moreCapturesText = "";
-				if (hasMoreCaptures) {
-					const remainingCaptures = totalCaptures - 3;
-					moreCapturesText = `
-                        <div class="text-muted small mt-2">
-                            <i class="bi bi-three-dots me-1"></i>
-                            and ${remainingCaptures} more capture${remainingCaptures !== 1 ? "s" : ""}
-                        </div>
-                    `;
-				}
-
-				capturesHtml = `
-                    <div class="col-md-6">
-                        <h6>
-                            <i class="bi bi-folder me-2"></i>Captures (${totalCaptures})
-                        </h6>
-                        <div class="shared-captures-list">
-                            ${capturesList}
-                            ${moreCapturesText}
-                        </div>
-                    </div>
-                `;
-			}
-
-			sharedAssetsSection.innerHTML = `
-                <h6>
-                    <i class="bi bi-share me-2"></i>Shared Assets (${totalDatasets + totalCaptures})
-                </h6>
-                <div class="alert alert-info">
-                    <div class="mb-2">
-                        <strong>New members will automatically have access to these shared assets:</strong>
-                    </div>
-                    <div class="row">
-                        ${datasetsHtml}
-                        ${capturesHtml}
-                    </div>
-                </div>
-            `;
-			sharedAssetsSection.style.display = "block";
-		} else {
-			sharedAssetsSection.innerHTML = `
-                <h6 class="text-muted">
-                    <i class="bi bi-share me-2"></i>Shared Assets
-                </h6>
-                <div class="alert alert-light">
-                    <div class="text-muted">
-                        <i class="bi bi-info-circle me-1"></i>
-                        No assets are currently shared with this group. New members will not have access to any shared assets.
-                    </div>
-                </div>
-            `;
-			sharedAssetsSection.style.display = "block";
-		}
-	}
-}
-
-// Delete Group Function - shows confirmation modal
-function deleteGroup(groupUuid, groupName) {
-	// Store the group info for confirmation
-	pendingDeleteGroupUuid = groupUuid;
-	pendingDeleteGroupName = groupName;
-
-	// Update the confirmation modal content
-	document.getElementById("deleteGroupName").textContent = groupName;
-
-	// Hide any other open modals first
-	const openModals = document.querySelectorAll(".modal.show");
-	for (const modal of openModals) {
-		const modalInstance = bootstrap.Modal.getInstance(modal);
-		if (modalInstance) {
-			modalInstance.hide();
-		}
-	}
-
-	// Show the confirmation modal
-	const deleteModalElement = document.getElementById("deleteGroupModal");
-	if (!deleteModalElement) {
-		console.error("Delete modal element not found");
-		return;
-	}
-
-	// Check if modal instance already exists
-	let deleteModal = bootstrap.Modal.getInstance(deleteModalElement);
-	if (!deleteModal) {
-		deleteModal = new bootstrap.Modal(deleteModalElement, {
-			backdrop: true,
-			keyboard: true,
-			focus: true,
-		});
-	}
-
-	// Add event listeners for debugging
-	deleteModalElement.addEventListener("shown.bs.modal", () => {});
-
-	deleteModalElement.addEventListener("hidden.bs.modal", () => {});
-
-	deleteModalElement.addEventListener("show.bs.modal", () => {});
-
-	deleteModal.show();
-
-	// Additional debugging after a short delay
-	setTimeout(() => {}, 100);
-}
-
-// User Search Handler for ShareGroup
-function initializeShareGroupUserSearch() {
-	// Create a UserSearchHandler instance for ShareGroup
-	shareGroupUserSearchHandler = new UserSearchHandler();
-	shareGroupUserSearchHandler.setItemInfo("sharegroup", "sharegroup");
-
-	// Override the searchUsers method to use ShareGroup endpoint
-	shareGroupUserSearchHandler.searchUsers = async function (query, dropdown) {
-		if (query.length < 2) {
-			this.hideDropdown(dropdown);
-			return;
-		}
-
-		try {
-			const response = await fetch(
-				`${window.location.href}?q=${encodeURIComponent(query)}&group_uuid=${currentGroupUuid}`,
-				{
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-
-			if (!response.ok) {
-				throw new Error("Search request failed");
-			}
-
-			const data = await response.json();
-
-			if (Array.isArray(data)) {
-				this.displayResults(data, dropdown, query);
-			} else {
-				this.hideDropdown(dropdown);
-			}
-		} catch (error) {
-			console.error("Search error:", error);
-			this.hideDropdown(dropdown);
-		}
-	};
-
-	// Override the selectUser method to properly handle share group context
-	const originalSelectUser = shareGroupUserSearchHandler.selectUser;
-	shareGroupUserSearchHandler.selectUser = function (item, input) {
-		const userName = item.dataset.userName;
-		const userEmail = item.dataset.userEmail;
-		const inputId = input.id;
-
-		if (!this.selectedUsersMap[inputId]) {
-			this.selectedUsersMap[inputId] = [];
-		}
-
-		// Check if user is already selected
-		if (!this.selectedUsersMap[inputId].some((u) => u.email === userEmail)) {
-			this.selectedUsersMap[inputId].push({ name: userName, email: userEmail });
-			this.renderChips(input);
-		}
-
-		// Clear the input field
-		input.value = "";
-		this.hideDropdown(item.closest(".user-search-dropdown"));
-		input.focus();
-
-		// Update save button state for share group
-		updateSaveButtonState();
-	};
-
-	// Override the renderChips method to handle share group context
-	shareGroupUserSearchHandler.renderChips = function (input) {
-		const inputId = input.id;
-		const chipContainer = input
-			.closest(".user-search-input-container")
-			.querySelector(".selected-users-chips");
-
-		if (!chipContainer) {
-			console.warn("Chip container not found for input:", inputId);
-			return;
-		}
-
-		chipContainer.innerHTML = "";
-		for (const user of this.selectedUsersMap[inputId]) {
-			const chip = document.createElement("span");
-			chip.className = "user-chip";
-			chip.textContent = user.email;
-			const remove = document.createElement("span");
-			remove.className = "remove-chip";
-			remove.innerHTML = "&times;";
-			remove.onclick = () => {
-				this.selectedUsersMap[inputId] = this.selectedUsersMap[inputId].filter(
-					(u) => u.email !== user.email,
-				);
-				this.renderChips(input);
-				// Update save button state when removing chips
-				updateSaveButtonState();
-			};
-			chip.appendChild(remove);
-			chipContainer.appendChild(chip);
-		}
-	};
-
-	// Initialize the handler
-	shareGroupUserSearchHandler.init();
-
-	// Add a custom reset method for share groups
-	shareGroupUserSearchHandler.resetShareGroup = function () {
-		// Clear selected users
-		this.selectedUsersMap = {};
-
-		// Clear input and chips
-		const input = document.getElementById("user-search-sharegroup");
-		if (input) {
-			input.value = "";
-			const chipContainer = input
-				.closest(".user-search-input-container")
-				.querySelector(".selected-users-chips");
-			if (chipContainer) {
-				chipContainer.innerHTML = "";
-			}
-		}
-
-		// Update save button state
-		updateSaveButtonState();
-	};
-}
-
-// Remove member from group (inline) - marks for pending removal
-function removeMemberFromGroup(event, email, name) {
-	const button = event.target.closest(".remove-member-btn");
-	if (!button) return;
-
-	// Toggle removal state
-	if (pendingRemovals.has(email)) {
-		// Remove from pending removals
-		pendingRemovals.delete(email);
-
-		// Change button back to outline style
-		button.innerHTML = '<i class="bi bi-person-slash me-1"></i>Remove';
-		button.classList.remove("btn-danger");
-		button.classList.add("btn-outline-danger");
-	} else {
-		// Add to pending removals
-		pendingRemovals.add(email);
-
-		// Change button to solid red style
-		button.innerHTML = '<i class="bi bi-person-slash me-1"></i>Remove';
-		button.classList.remove("btn-outline-danger");
-		button.classList.add("btn-danger");
-	}
-
-	// Update save button state
-	updateSaveButtonState();
-}
-
-// Update save button state based on pending changes
-function updateSaveButtonState() {
-	const saveBtn = document.getElementById("save-sharegroup-btn");
-	const pendingMessage = document.getElementById(
-		"pending-changes-message-sharegroup",
-	);
-	const pendingMessageFooter = document.getElementById(
-		"pending-changes-message-sharegroup-footer",
-	);
-
-	const hasSelectedUsers =
-		shareGroupUserSearchHandler?.selectedUsersMap["user-search-sharegroup"] &&
-		shareGroupUserSearchHandler.selectedUsersMap["user-search-sharegroup"]
-			.length > 0;
-	const hasPendingRemovals = pendingRemovals.size > 0;
-
-	if (saveBtn) {
-		// Save button should only be enabled when there are pending removals
-		// Adding members is handled by the "Add Members" button, not the save button
-		if (hasPendingRemovals) {
-			saveBtn.disabled = false;
-		} else {
-			saveBtn.disabled = true;
-		}
-	}
-
-	if (pendingMessage) {
-		if (hasPendingRemovals) {
-			pendingMessage.classList.remove("d-none");
-		} else {
-			pendingMessage.classList.add("d-none");
-		}
-	}
-
-	if (pendingMessageFooter) {
-		if (hasPendingRemovals) {
-			pendingMessageFooter.classList.remove("d-none");
-		} else {
-			pendingMessageFooter.classList.add("d-none");
-		}
-	}
-}
-
-// Reset all remove buttons to their original state
-function resetRemoveButtons() {
-	const buttons = document.querySelectorAll(".remove-member-btn");
-	for (const button of buttons) {
-		button.innerHTML = '<i class="bi bi-person-slash me-1"></i>Remove';
-		button.classList.remove("btn-danger");
-		button.classList.add("btn-outline-danger");
-	}
-}
-
-// Update member count and emails in the table
-function updateTableMemberInfo(groupUuid, members) {
-	const memberCountElement = document.querySelector(
-		`.member-count[data-group-uuid="${groupUuid}"]`,
-	);
-	const memberEmailsElement = document.querySelector(
-		`.member-emails[data-group-uuid="${groupUuid}"]`,
-	);
-
-	if (memberCountElement) {
-		const count = members.length;
-		memberCountElement.textContent = `${count} member${count !== 1 ? "s" : ""}`;
-	}
-
-	if (memberEmailsElement) {
-		if (members.length === 0) {
-			memberEmailsElement.style.display = "none";
-			memberEmailsElement.innerHTML = "";
-		} else {
-			memberEmailsElement.style.display = "block";
-			const emails = members.slice(0, 3).map((member) => member.email);
-			let emailsHtml = emails.join(", ");
-			if (members.length > 3) {
-				emailsHtml += `<span class="text-muted"> and ${members.length - 3} more</span>`;
-			}
-			memberEmailsElement.innerHTML = emailsHtml;
-		}
-	}
-}
-
-// Update member emails list by adding or removing specific emails
-function updateTableMemberEmails(groupUuid, emails, action) {
-	const memberCountElement = document.querySelector(
-		`.member-count[data-group-uuid="${groupUuid}"]`,
-	);
-	const memberEmailsElement = document.querySelector(
-		`.member-emails[data-group-uuid="${groupUuid}"]`,
-	);
-
-	if (!memberCountElement || !memberEmailsElement) {
-		return;
-	}
-
-	// Get current member count
-	const currentCountText = memberCountElement.textContent;
-	const currentCount = Number.parseInt(currentCountText.match(/(\d+)/)[1]);
-
-	// Get current emails from the display
-	let currentEmails = [];
-	if (memberEmailsElement.style.display !== "none") {
-		const emailsText = memberEmailsElement.textContent;
-		// Extract emails from the text (remove "and X more" part)
-		const emailsMatch = emailsText.match(
-			/([^,]+(?:,[^,]+)*?)(?:\s+and\s+\d+\s+more)?$/,
-		);
-		if (emailsMatch) {
-			currentEmails = emailsMatch[1].split(",").map((email) => email.trim());
-		}
-	}
-
-	const newEmails = [...currentEmails];
-	let newCount = currentCount;
-
-	if (action === "add") {
-		// Add new emails to the list
-		for (const email of emails) {
-			if (!newEmails.includes(email)) {
-				newEmails.push(email);
-				newCount++;
-			}
-		}
-	} else if (action === "remove") {
-		// Remove emails from the list
-		for (const email of emails) {
-			const index = newEmails.indexOf(email);
-			if (index > -1) {
-				newEmails.splice(index, 1);
-				newCount--;
-			}
-		}
-	}
-
-	// Update the count
-	memberCountElement.textContent = `${newCount} member${newCount !== 1 ? "s" : ""}`;
-
-	// Update the emails display
-	if (newCount === 0) {
-		memberEmailsElement.style.display = "none";
-		memberEmailsElement.innerHTML = "";
-	} else {
-		memberEmailsElement.style.display = "block";
-		const displayEmails = newEmails.slice(0, 3);
-		let emailsHtml = displayEmails.join(", ");
-		if (newEmails.length > 3) {
-			emailsHtml += `<span class="text-muted"> and ${newEmails.length - 3} more</span>`;
-		}
-		memberEmailsElement.innerHTML = emailsHtml;
-	}
-}
-
-// Show Alert Function - Toast notifications
-function showAlert(message, type = "info") {
-	const toastContainer = document.getElementById("toast-container");
-	if (!toastContainer) return;
-
-	const toastId = `toast-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
-
-	// Map type to Bootstrap toast classes
-	const bgClass =
-		type === "error"
-			? "bg-danger text-white"
-			: type === "success"
-				? "bg-success text-white"
-				: type === "warning"
-					? "bg-warning text-dark"
-					: "bg-info text-white";
-
-	const toastHtml = `
-        <div id="${toastId}" class="toast align-items-center ${bgClass}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3500">
-            <div class="d-flex">
-                <div class="toast-body">${message}</div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-        </div>
-    `;
-
-	toastContainer.insertAdjacentHTML("beforeend", toastHtml);
-
-	const toastElem = document.getElementById(toastId);
-	const toast = new bootstrap.Toast(toastElem);
-	toast.show();
-
-	// Remove element after toast is hidden
-	toastElem.addEventListener("hidden.bs.toast", () => toastElem.remove());
-}
-
-// Initialize all event handlers when DOM is loaded
-function initializeShareGroupManager() {
-	initializeCreateGroupForm();
-	initializeAddMembersForm();
-	initializeManageMembersModal();
-	initializeSaveButton();
-	initializeDeleteGroupConfirmation();
-
-	// Initialize user search handler once
-	initializeShareGroupUserSearch();
-}
-
-// Add new group to the table dynamically
-function addNewGroupToTable(groupData) {
-	const tableBody = document.querySelector(".table-responsive .table tbody");
-	if (!tableBody) {
-		console.error("Table body not found");
-		return;
-	}
-
-	// Create the new row HTML
-	const newRow = document.createElement("tr");
-	newRow.setAttribute("data-group-uuid", groupData.uuid);
-
-	const createdDate = new Date(groupData.created_at).toLocaleDateString(
-		"en-US",
-		{
-			year: "numeric",
-			month: "short",
-			day: "numeric",
-		},
-	);
-
-	newRow.innerHTML = `
-        <td>
-            <strong>${groupData.name}</strong>
-        </td>
-        <td>
-            <span class="badge bg-secondary member-count" data-group-uuid="${groupData.uuid}">0 members</span>
-            <div class="small text-muted mt-1 member-emails" data-group-uuid="${groupData.uuid}" style="display: none;"></div>
-        </td>
-        <td>${createdDate}</td>
-        <td>
-            <div class="dropdown">
-                <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown"
-                        type="button"
-                        data-bs-toggle="dropdown"
-                        data-bs-popper="static"
-                        aria-expanded="false"
-                        aria-label="Actions for ${groupData.name}">
-                    <i class="bi bi-three-dots-vertical"></i>
-                </button>
-                <ul class="dropdown-menu">
-                    <li>
-                        <button type="button"
-                                class="dropdown-item"
-                                data-bs-toggle="modal"
-                                data-bs-target="#share-modal-sharegroup"
-                                data-group-uuid="${groupData.uuid}"
-                                data-group-name="${groupData.name}">
-                            <i class="bi bi-person-plus me-1"></i>Manage
-                        </button>
-                    </li>
-                    <li>
-                        <button type="button"
-                                class="dropdown-item"
-                                onclick="deleteGroup('${groupData.uuid}', '${groupData.name}')">
-                            <i class="bi bi-trash me-1"></i>Delete
-                        </button>
-                    </li>
-                </ul>
-            </div>
-        </td>
-    `;
-
-	// Add the new row to the table
-	tableBody.appendChild(newRow);
-
-	// Hide the "no groups" message if it exists
-	const noGroupsMessage = document.querySelector(".text-center.py-5");
-	if (noGroupsMessage) {
-		noGroupsMessage.style.display = "none";
-	}
-}
-
-// Open manage modal for a specific group
-function openManageModalForGroup(groupUuid, groupName) {
-	// Set the current group info
-	currentGroupUuid = groupUuid;
-	currentGroupName = groupName;
-
-	// Set the hidden input value
-	document.getElementById("addGroupUuid").value = groupUuid;
-
-	// Update modal title
-	document.getElementById("manageMembersModalLabel").innerHTML =
-		`<i class="bi bi-person-plus me-2"></i>Manage Members: ${groupName}`;
-
-	// Clear pending removals
-	pendingRemovals.clear();
-
-	// Reset user search handler state
-	if (shareGroupUserSearchHandler) {
-		shareGroupUserSearchHandler.resetShareGroup();
-	}
-
-	// Load current members
-	loadCurrentMembers();
-
-	// Load and display shared assets information
-	loadSharedAssetsInfo();
-
-	// Show the modal
-	const manageModal = new bootstrap.Modal(
-		document.getElementById("share-modal-sharegroup"),
-	);
-	manageModal.show();
-}
-
-// Export functions for global access
-window.deleteGroup = deleteGroup;
-window.removeMemberFromGroup = removeMemberFromGroup;
-window.initializeShareGroupManager = initializeShareGroupManager;
diff --git a/gateway/sds_gateway/static/js/deprecated/userSearchComponent.js b/gateway/sds_gateway/static/js/deprecated/userSearchComponent.js
deleted file mode 100644
index 3832439ad..000000000
--- a/gateway/sds_gateway/static/js/deprecated/userSearchComponent.js
+++ /dev/null
@@ -1,1343 +0,0 @@
-// User search functionality for item sharing (datasets, captures, etc.)
-class UserSearchHandler {
-	constructor() {
-		this.itemUuid = null;
-		this.itemType = null;
-		this.searchTimeout = null;
-		this.currentRequest = null;
-		this.selectedUsersMap = {}; // key: input id, value: array of {name, email}
-		this.pendingRemovals = new Set(); // Track users marked for removal
-		this.pendingPermissionChanges = new Map(); // Track permission level changes
-	}
-
-	getCSRFToken() {
-		// Try to get CSRF token from meta tag first
-		const metaToken = document.querySelector('meta[name="csrf-token"]');
-		if (metaToken) {
-			return metaToken.getAttribute("content");
-		}
-
-		// Fallback to input field
-		const inputToken = document.querySelector('[name="csrfmiddlewaretoken"]');
-		if (inputToken) {
-			return inputToken.value;
-		}
-
-		// If still not found, try to get from cookie
-		const cookieToken = this.getCookie("csrftoken");
-		if (cookieToken) {
-			return cookieToken;
-		}
-
-		console.error("CSRF token not found");
-		return "";
-	}
-
-	getCookie(name) {
-		let cookieValue = null;
-		if (document.cookie && document.cookie !== "") {
-			const cookies = document.cookie.split(";");
-			for (let i = 0; i < cookies.length; i++) {
-				const cookie = cookies[i].trim();
-				if (cookie.substring(0, name.length + 1) === `${name}=`) {
-					cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-					break;
-				}
-			}
-		}
-		return cookieValue;
-	}
-
-	setItemInfo(uuid, type) {
-		this.itemUuid = uuid;
-		this.itemType = type;
-	}
-
-	getDropdownForInput(input) {
-		// First try the original pattern: user-search-dropdown-{uuid}
-		let dropdown = document.getElementById(
-			`user-search-dropdown-${input.id.replace("user-search-", "")}`,
-		);
-
-		if (dropdown) {
-			return dropdown;
-		}
-
-		// Try alternative patterns
-		const alternativeIds = [
-			`user-search-dropdown-${this.itemUuid}`,
-			"user-search-dropdown",
-			`${input.id.replace("user-search-", "user-search-dropdown-")}`,
-			`${input.id}-dropdown`,
-		];
-
-		for (const id of alternativeIds) {
-			dropdown = document.getElementById(id);
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		// If still not found, look for any dropdown in the same container
-		const container = input.closest(".user-search-input-container");
-		if (container) {
-			dropdown = container.querySelector(".user-search-dropdown");
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		console.error(`Could not find dropdown for input: ${input.id}`);
-		return null;
-	}
-
-	getInputForDropdown(dropdown) {
-		// First try to find input in the same container
-		const container = dropdown.closest(".user-search-input-container");
-		if (container) {
-			const input = container.querySelector(".user-search-input");
-			if (input) {
-				return input;
-			}
-		}
-
-		// Try to find input by ID patterns
-		const alternativeInputIds = [
-			`user-search-${this.itemUuid}`,
-			"user-search-input",
-			`user-search-${dropdown.id.replace("user-search-dropdown-", "")}`,
-			`user-search-${dropdown.id.replace("user-search-dropdown", "")}`,
-		];
-
-		for (const id of alternativeInputIds) {
-			const input = document.getElementById(id);
-			if (input) {
-				return input;
-			}
-		}
-
-		console.error(`Could not find input for dropdown: ${dropdown.id}`);
-		return null;
-	}
-
-	init() {
-		if (!this.itemUuid || !this.itemType) {
-			console.error(
-				"Cannot initialize UserSearchHandler: item UUID and type not set",
-			);
-			return;
-		}
-
-		this.setupRemoveUserButtons();
-
-		// Clear any existing search results when initializing
-		this.clearSearchResults();
-
-		// Setup modal-specific event handlers
-		this.setupModalEventHandlers();
-	}
-
-	setupModalEventHandlers() {
-		// Find the specific modal for this item - try multiple patterns
-		let modal = document.getElementById(`share-modal-${this.itemUuid}`);
-		if (!modal) {
-			// Try alternative modal IDs
-			const alternativeModalIds = [
-				"manageMembersModal",
-				`modal-${this.itemUuid}`,
-				`${this.itemType}-modal`,
-			];
-
-			for (const id of alternativeModalIds) {
-				modal = document.getElementById(id);
-				if (modal) break;
-			}
-		}
-
-		if (!modal) {
-			console.error(`Modal not found for ${this.itemType}: ${this.itemUuid}`);
-			return;
-		}
-
-		// Setup search input for this specific modal
-		const searchInput = modal.querySelector(".user-search-input");
-		if (searchInput) {
-			this.setupSearchInput(searchInput);
-		}
-
-		// Setup share button for this specific modal (if it exists)
-		const shareButton = document.getElementById(
-			`share-item-btn-${this.itemUuid}`,
-		);
-		if (shareButton) {
-			this.setupShareItem(shareButton);
-		}
-
-		// Setup notify checkbox functionality (if it exists and elements are present)
-		if (typeof setupNotifyCheckbox === "function") {
-			const notifyCheckbox = document.getElementById(
-				`notify-users-checkbox-${this.itemUuid}`,
-			);
-			const textareaContainer = document.getElementById(
-				`notify-message-textarea-container-${this.itemUuid}`,
-			);
-
-			// Only setup notify checkbox if the required elements exist
-			if (notifyCheckbox && textareaContainer) {
-				setupNotifyCheckbox(this.itemUuid);
-			}
-		}
-	}
-
-	clearSearchResults() {
-		// Clear all search dropdowns
-		for (const dropdown of document.querySelectorAll(".user-search-dropdown")) {
-			dropdown.classList.add("d-none");
-			const listGroup = dropdown.querySelector(".list-group");
-			if (listGroup) {
-				listGroup.innerHTML = "";
-			}
-		}
-
-		// Clear search inputs
-		for (const input of document.querySelectorAll(".user-search-input")) {
-			input.value = "";
-		}
-	}
-
-	setupSearchInput(input) {
-		// Prevent duplicate event listener attachment
-		if (input.dataset.searchSetup === "true") {
-			return;
-		}
-		input.dataset.searchSetup = "true";
-
-		// Get dropdown using flexible ID resolution
-		const dropdown = this.getDropdownForInput(input);
-		const form = input.closest("form");
-		const inputId = input.id;
-		if (!this.selectedUsersMap[inputId]) this.selectedUsersMap[inputId] = [];
-
-		// Debounced search on input
-		input.addEventListener("input", (e) => {
-			clearTimeout(this.searchTimeout);
-			const query = e.target.value.trim();
-
-			if (query.length < 2) {
-				this.hideDropdown(dropdown);
-				return;
-			}
-
-			this.searchTimeout = setTimeout(() => {
-				this.searchUsers(query, dropdown);
-			}, 300);
-		});
-
-		// Handle keyboard navigation
-		input.addEventListener("keydown", (e) => {
-			const visibleItems = dropdown.querySelectorAll(
-				".list-group-item:not(.no-results)",
-			);
-			const currentIndex = Array.from(visibleItems).findIndex((item) =>
-				item.classList.contains("selected"),
-			);
-
-			switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, 1);
-					break;
-				case "ArrowUp":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, -1);
-					break;
-				case "Enter": {
-					e.preventDefault();
-					const selectedItem = dropdown.querySelector(
-						".list-group-item.selected",
-					);
-					if (selectedItem) {
-						this.selectUser(selectedItem, input);
-					}
-					break;
-				}
-				case "Escape":
-					this.hideDropdown(dropdown);
-					input.blur();
-					break;
-			}
-		});
-
-		// Handle clicks outside to close dropdown
-		document.addEventListener("click", (e) => {
-			if (!input.contains(e.target) && !dropdown.contains(e.target)) {
-				this.hideDropdown(dropdown);
-			}
-		});
-
-		// Handle dropdown item clicks
-		dropdown.addEventListener("click", (e) => {
-			const item = e.target.closest(".list-group-item");
-			if (item && !item.classList.contains("no-results")) {
-				e.preventDefault();
-				e.stopPropagation();
-				this.selectUser(item, input);
-			}
-		});
-
-		// On form submit, set input value to comma-separated emails
-		form.addEventListener("submit", (e) => {
-			input.value = this.selectedUsersMap[inputId]
-				.map((u) => u.email)
-				.join(",");
-		});
-	}
-
-	setupShareItem(shareButton) {
-		// Prevent duplicate event listener attachment
-		if (shareButton.dataset.shareSetup === "true") {
-			return;
-		}
-		shareButton.dataset.shareSetup = "true";
-
-		shareButton.addEventListener("click", async () => {
-			// Get the user emails from the selected users map
-			const inputId = `user-search-${this.itemUuid}`;
-			const selectedUsers = this.selectedUsersMap[inputId] || [];
-
-			// Create a map of user emails to their permission levels
-			const userPermissions = {};
-			for (const user of selectedUsers) {
-				userPermissions[user.email] = user.permission_level || "viewer";
-			}
-
-			const userEmails = selectedUsers.map((u) => u.email).join(",");
-
-			// Get CSRF token
-			const csrfToken = this.getCSRFToken();
-
-			const formData = new FormData();
-			formData.append("user-search", userEmails);
-			formData.append("user_permissions", JSON.stringify(userPermissions));
-
-			// Add notify_users and notify_message if present
-			const notifyCheckbox = document.getElementById(
-				`notify-users-checkbox-${this.itemUuid}`,
-			);
-			if (notifyCheckbox?.checked) {
-				formData.append("notify_users", "1");
-				const messageTextarea = document.getElementById(
-					`notify-message-textarea-${this.itemUuid}`,
-				);
-				if (messageTextarea?.value.trim()) {
-					formData.append("notify_message", messageTextarea.value.trim());
-				}
-			}
-
-			// Handle pending removals
-			if (this.pendingRemovals.size > 0) {
-				formData.append(
-					"remove_users",
-					JSON.stringify(Array.from(this.pendingRemovals)),
-				);
-			}
-
-			// Handle pending permission changes
-			if (
-				this.pendingPermissionChanges &&
-				this.pendingPermissionChanges.size > 0
-			) {
-				formData.append(
-					"permission_changes",
-					JSON.stringify(Array.from(this.pendingPermissionChanges.entries())),
-				);
-			}
-
-			try {
-				const response = await fetch(
-					`/users/share-item/${this.itemType}/${this.itemUuid}/`,
-					{
-						method: "POST",
-						body: formData,
-						headers: {
-							"X-CSRFToken": csrfToken,
-						},
-					},
-				);
-
-				const result = await response.json();
-
-				if (response.ok && result.success) {
-					// Show success message
-					showToast(
-						result.message || `${this.itemType} shared successfully!`,
-						"success",
-					);
-
-					// Close modal
-					const modal = document.getElementById(`share-modal-${this.itemUuid}`);
-					const bootstrapModal = bootstrap.Modal.getInstance(modal);
-					if (bootstrapModal) {
-						bootstrapModal.hide();
-					}
-
-					// Manually remove backdrop if it remains
-					const backdrop = document.querySelector(".modal-backdrop");
-					if (backdrop) {
-						backdrop.remove();
-					}
-
-					// Remove modal-open class from body
-					document.body.classList.remove("modal-open");
-					document.body.style.overflow = "";
-					document.body.style.paddingRight = "";
-
-					// Clear selected users and pending changes
-					this.selectedUsersMap = {};
-					this.pendingRemovals.clear();
-					if (this.pendingPermissionChanges) {
-						this.pendingPermissionChanges.clear();
-					}
-
-					// Refresh the appropriate list based on item type
-					await this.refreshItemList();
-				} else {
-					// Show error message
-					const errorMessage =
-						result.error || result.message || `Error sharing ${this.itemType}`;
-					showToast(errorMessage, "danger");
-				}
-			} catch (error) {
-				console.error(`Error sharing ${this.itemType}:`, error);
-				showToast(
-					`Error sharing ${this.itemType}. Please try again.`,
-					"danger",
-				);
-			}
-		});
-	}
-
-	async searchUsers(query, dropdown) {
-		if (!this.itemUuid || !this.itemType) {
-			console.error("Item UUID and type not set on UserSearchHandler");
-			return;
-		}
-
-		// Cancel previous request if still pending
-		if (this.currentRequest) {
-			this.currentRequest.abort();
-		}
-		try {
-			this.currentRequest = new AbortController();
-			const response = await fetch(
-				`/users/share-item/${this.itemType}/${this.itemUuid}/?q=${encodeURIComponent(query)}&limit=10`,
-				{
-					signal: this.currentRequest.signal,
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-			const users = await response.json();
-			this.displayResults(users, dropdown, query);
-		} catch (error) {
-			if (error.name === "AbortError") {
-				return;
-			}
-			console.error("Error searching users:", error);
-			this.displayError(dropdown);
-		} finally {
-			this.currentRequest = null;
-		}
-	}
-
-	displayResults(users, dropdown, query) {
-		const listGroup = dropdown.querySelector(".list-group");
-
-		if (users.length === 0) {
-			listGroup.innerHTML =
-				'<div class="list-group-item no-results">No users or groups found</div>';
-		} else {
-			listGroup.innerHTML = users
-				.map((user) => {
-					const isGroup = user.type === "group";
-					const icon = isGroup
-						? "bi-people-fill text-info"
-						: "bi-person-fill text-primary";
-					const subtitle = isGroup
-						? `<div class="user-email">Group • ${user.member_count} members</div>`
-						: `<div class="user-email">${this.highlightMatch(user.email, query)}</div>`;
-
-					return `
-                <div class="list-group-item" data-user-id="${user.url || ""}" data-user-name="${user.name}" data-user-email="${user.email}" data-user-type="${user.type || "user"}" data-member-count="${user.member_count || 0}">
-                    <div class="user-search-item">
-                        <div class="user-name">
-                            <i class="bi ${icon} me-2"></i>
-                            ${this.highlightMatch(user.name, query)}
-                        </div>
-                        ${subtitle}
-                    </div>
-                </div>
-            `;
-				})
-				.join("");
-
-			// Event delegation is already handled in setupSearchInput, so we don't need to add listeners here
-		}
-
-		this.showDropdown(dropdown);
-	}
-
-	displayError(dropdown) {
-		const listGroup = dropdown.querySelector(".list-group");
-		listGroup.innerHTML =
-			'<div class="list-group-item no-results">Error loading users</div>';
-		this.showDropdown(dropdown);
-	}
-
-	highlightMatch(text, query) {
-		if (!query) return text;
-		const regex = new RegExp(`(${query})`, "gi");
-		return text.replace(regex, "<mark>$1</mark>");
-	}
-
-	navigateDropdown(items, currentIndex, direction) {
-		// Remove current selection
-		for (const item of items) {
-			item.classList.remove("selected");
-		}
-
-		// Calculate new index
-		let newIndex;
-		if (currentIndex === -1) {
-			// No item is currently selected
-			if (direction > 0) {
-				// ArrowDown: start from first item
-				newIndex = 0;
-			} else {
-				// ArrowUp: start from last item
-				newIndex = items.length - 1;
-			}
-		} else {
-			// An item is currently selected
-			newIndex = currentIndex + direction;
-			if (newIndex < 0) newIndex = items.length - 1;
-			if (newIndex >= items.length) newIndex = 0;
-		}
-
-		// Add selection to new item
-		if (items[newIndex]) {
-			items[newIndex].classList.add("selected");
-			items[newIndex].scrollIntoView({ block: "nearest" });
-		}
-	}
-
-	selectUser(item, input) {
-		const userName = item.dataset.userName;
-		const userEmail = item.dataset.userEmail;
-		const userType = item.dataset.userType || "user";
-		const inputId = input.id;
-
-		if (!this.selectedUsersMap[inputId]) {
-			this.selectedUsersMap[inputId] = [];
-		}
-
-		// Check if this user is already part of a selected group
-		if (userType === "user") {
-			const selectedGroups = this.selectedUsersMap[inputId].filter(
-				(u) => u.type === "group",
-			);
-			for (const group of selectedGroups) {
-				// Check if this user is in the group by making an API call
-				this.checkUserInGroup(userEmail, group, input, userName);
-				return; // Exit early, we'll handle the result in the callback
-			}
-		}
-
-		if (!this.selectedUsersMap[inputId].some((u) => u.email === userEmail)) {
-			// Create user object with all available data
-			const userData = {
-				name: userName,
-				email: userEmail,
-				type: userType,
-				permission_level: "viewer", // Default permission level
-			};
-
-			// For groups, get member count from dataset attribute
-			if (userType === "group") {
-				const memberCount = item.dataset.memberCount;
-				if (memberCount) {
-					userData.member_count = Number.parseInt(memberCount, 10);
-				}
-			}
-
-			this.selectedUsersMap[inputId].push(userData);
-			this.renderChips(input);
-		}
-
-		input.value = "";
-		this.hideDropdown(item.closest(".user-search-dropdown"));
-		input.focus();
-	}
-
-	async checkUserInGroup(userEmail, group, input, userName) {
-		try {
-			// Extract group UUID from group.email (format: "group:uuid")
-			const groupUuid = group.email.replace("group:", "");
-
-			// Make API call to check if user is in the group
-			const response = await fetch(
-				`/users/share-groups/?group_uuid=${groupUuid}`,
-				{
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-				},
-			);
-
-			if (response.ok) {
-				const data = await response.json();
-				if (data.success && data.members) {
-					const isUserInGroup = data.members.some(
-						(member) => member.email === userEmail,
-					);
-
-					if (isUserInGroup) {
-						// User is already in the group, show notification and don't add
-						showToast(
-							`${userName} is already part of the group "${group.name}"`,
-							"warning",
-						);
-						input.value = "";
-						this.hideDropdown(input.closest(".user-search-dropdown"));
-						input.focus();
-						return;
-					}
-				}
-			}
-
-			// If we get here, user is not in the group, so add them normally
-			if (!this.selectedUsersMap[input.id].some((u) => u.email === userEmail)) {
-				this.selectedUsersMap[input.id].push({
-					name: userName,
-					email: userEmail,
-					type: "user",
-					permission_level: "viewer", // Default permission level
-				});
-				this.renderChips(input);
-			}
-
-			input.value = "";
-			this.hideDropdown(input.closest(".user-search-dropdown"));
-			input.focus();
-		} catch (error) {
-			console.error("Error checking if user is in group:", error);
-			// If there's an error, just add the user normally
-			if (!this.selectedUsersMap[input.id].some((u) => u.email === userEmail)) {
-				this.selectedUsersMap[input.id].push({
-					name: userName,
-					email: userEmail,
-					type: "user",
-					permission_level: "viewer", // Default permission level
-				});
-				this.renderChips(input);
-			}
-
-			input.value = "";
-			this.hideDropdown(input.closest(".user-search-dropdown"));
-			input.focus();
-		}
-	}
-
-	renderChips(input) {
-		const inputId = input.id;
-
-		// Try to find the chip container in the new location
-		let chipContainer = input
-			.closest(".user-search-input-container")
-			.querySelector(".selected-users-chips");
-
-		// If not found, try to find it in the permissions section
-		if (!chipContainer) {
-			chipContainer = input
-				.closest("form")
-				.querySelector(
-					".selected-users-permissions-section .selected-users-chips",
-				);
-		}
-
-		if (!chipContainer) {
-			console.warn("Chip container not found for input:", inputId);
-			return;
-		}
-
-		chipContainer.innerHTML = "";
-		for (const user of this.selectedUsersMap[inputId]) {
-			const chip = document.createElement("div");
-			chip.className = "user-chip";
-
-			// Check if this is a group
-			const isGroup = user.email?.startsWith("group:");
-			const displayName = isGroup ? user.name : user.name || user.email;
-			const displayEmail = isGroup
-				? `Group • ${user.member_count || 0} members`
-				: user.email;
-
-			// Create chip content with user info and permission selection
-			const icon = isGroup ? "bi-people-fill" : "bi-person-fill";
-			chip.innerHTML = `
-				<div class="user-info">
-					<i class="bi ${icon}"></i>
-					<div>
-						<div class="user-name">${displayName}</div>
-						<div class="user-email">${displayEmail}</div>
-					</div>
-				</div>
-				<select class="form-select permission-select" data-user-email="${user.email}">
-					<option value="viewer" ${user.permission_level === "viewer" ? "selected" : ""}>Viewer</option>
-					<!-- Disable contributor and co-owner options (TODO: Enable this when the access controls are implemented) -->
-					<!--
-					<option value="contributor" ${user.permission_level === "contributor" ? "selected" : ""}>Contributor</option>
-					<option value="co-owner" ${user.permission_level === "co-owner" ? "selected" : ""}>Co-Owner</option>
-					-->
-				</select>
-				<span class="remove-chip">&times;</span>
-			`;
-
-			// Add click handler for removal
-			const removeBtn = chip.querySelector(".remove-chip");
-			removeBtn.onclick = () => {
-				this.selectedUsersMap[inputId] = this.selectedUsersMap[inputId].filter(
-					(u) => u.email !== user.email,
-				);
-				this.renderChips(input);
-			};
-
-			// Add change handler for permission level
-			const permissionSelect = chip.querySelector(".permission-select");
-			permissionSelect.onchange = (e) => {
-				// Update the user's permission level in the selectedUsersMap
-				const userIndex = this.selectedUsersMap[inputId].findIndex(
-					(u) => u.email === user.email,
-				);
-				if (userIndex !== -1) {
-					this.selectedUsersMap[inputId][userIndex].permission_level =
-						e.target.value;
-				}
-			};
-
-			chipContainer.appendChild(chip);
-		}
-
-		// Toggle notify/message and users-with-access sections (only if they exist)
-		const itemUuid = inputId.replace("user-search-", "");
-		const notifySection = document.getElementById(
-			`notify-message-section-${itemUuid}`,
-		);
-		const usersWithAccessSection = document.getElementById(
-			`users-with-access-section-${itemUuid}`,
-		);
-		const saveBtn = document.getElementById(`share-item-btn-${itemUuid}`);
-		const modalDivider = document.querySelector(
-			`#share-modal-${itemUuid} .modal-divider`,
-		);
-
-		if (
-			this.selectedUsersMap[inputId] &&
-			this.selectedUsersMap[inputId].length > 0
-		) {
-			// Only toggle sections if they exist
-			if (notifySection) {
-				notifySection.classList.remove("d-none");
-			}
-			if (usersWithAccessSection) {
-				usersWithAccessSection.classList.add("d-none");
-			}
-
-			// Hide the modal divider when chips are present
-			if (modalDivider) {
-				modalDivider.classList.add("d-none");
-			}
-
-			// Clear pending removals when adding new users
-			this.pendingRemovals.clear();
-
-			// Reset all dropdown buttons to their original state (only if modal exists)
-			const modal = document.getElementById(`share-modal-${itemUuid}`);
-			if (modal) {
-				for (const button of modal.querySelectorAll(".btn-icon-dropdown")) {
-					button.innerHTML =
-						'<i class="bi bi-three-dots-vertical" aria-hidden="true"></i>';
-					button.classList.remove("btn-outline-danger");
-					button.classList.add("btn-light");
-					button.disabled = false;
-				}
-			}
-
-			// Change button text to "Share" (only if button exists)
-			if (saveBtn) {
-				saveBtn.textContent = "Share";
-			}
-
-			// Setup notify checkbox functionality with a small delay to ensure DOM is updated
-			if (typeof setupNotifyCheckbox === "function") {
-				setTimeout(() => {
-					setupNotifyCheckbox(itemUuid);
-				}, 10);
-			}
-		} else {
-			// Only toggle sections if they exist
-			if (notifySection) {
-				notifySection.classList.add("d-none");
-			}
-			if (usersWithAccessSection) {
-				usersWithAccessSection.classList.remove("d-none");
-			}
-
-			// Show the modal divider when no chips are present
-			if (modalDivider) {
-				modalDivider.classList.remove("d-none");
-			}
-
-			// Change button text back to "Save" (only if button exists)
-			if (saveBtn) {
-				saveBtn.textContent = "Save";
-			}
-		}
-
-		// Update save button state (only if function exists)
-		if (typeof this.updateSaveButtonState === "function") {
-			this.updateSaveButtonState(itemUuid);
-		}
-	}
-
-	updateSaveButtonState(itemUuid) {
-		const inputId = `user-search-${itemUuid}`;
-		const selectedUsers = this.selectedUsersMap[inputId] || [];
-		const hasSelectedUsers = selectedUsers.length > 0;
-		const hasPendingRemovals = this.pendingRemovals.size > 0;
-		const hasPendingPermissionChanges =
-			this.pendingPermissionChanges && this.pendingPermissionChanges.size > 0;
-
-		const saveBtn = document.getElementById(`share-item-btn-${itemUuid}`);
-		const pendingMessage = document.getElementById(
-			`pending-changes-message-${itemUuid}`,
-		);
-
-		// Only update save button if it exists
-		if (saveBtn) {
-			if (
-				hasSelectedUsers ||
-				hasPendingRemovals ||
-				hasPendingPermissionChanges
-			) {
-				saveBtn.disabled = false;
-			} else {
-				saveBtn.disabled = true;
-			}
-		}
-
-		// Only update pending message if it exists
-		if (pendingMessage) {
-			if (hasPendingRemovals || hasPendingPermissionChanges) {
-				pendingMessage.classList.remove("d-none");
-			} else {
-				pendingMessage.classList.add("d-none");
-			}
-		}
-	}
-
-	showDropdown(dropdown) {
-		dropdown.classList.remove("d-none");
-	}
-
-	hideDropdown(dropdown) {
-		dropdown.classList.add("d-none");
-		// Clear any selections
-		for (const item of dropdown.querySelectorAll(".list-group-item")) {
-			item.classList.remove("selected");
-		}
-	}
-
-	resetAll() {
-		// Clear selected users
-		this.selectedUsersMap = {};
-
-		// Clear pending removals
-		this.pendingRemovals.clear();
-
-		// Clear pending permission changes
-		if (this.pendingPermissionChanges) {
-			this.pendingPermissionChanges.clear();
-		}
-
-		// Reset all dropdown buttons to their original state
-		for (const button of document.querySelectorAll(".btn-icon-dropdown")) {
-			button.innerHTML =
-				'<i class="bi bi-three-dots-vertical" aria-hidden="true"></i>';
-			button.classList.remove("btn-outline-danger");
-			button.classList.add("btn-light");
-			button.disabled = false;
-		}
-
-		// Reset save button state for all modals
-		for (const btn of document.querySelectorAll('[id^="share-item-btn-"]')) {
-			btn.disabled = true;
-			btn.textContent = "Save";
-		}
-
-		// Hide pending changes messages
-		for (const msg of document.querySelectorAll(
-			'[id^="pending-changes-message-"]',
-		)) {
-			msg.classList.add("d-none");
-		}
-
-		// Clear chips
-		for (const container of document.querySelectorAll(
-			".selected-users-chips",
-		)) {
-			container.innerHTML = "";
-		}
-
-		// Hide notify sections and show users-with-access sections
-		for (const section of document.querySelectorAll(
-			'[id^="notify-message-section-"]',
-		)) {
-			section.classList.add("d-none");
-		}
-		for (const section of document.querySelectorAll(
-			'[id^="users-with-access-section-"]',
-		)) {
-			section.classList.remove("d-none");
-		}
-
-		// Show modal dividers
-		for (const divider of document.querySelectorAll(".modal-divider")) {
-			divider.classList.remove("d-none");
-		}
-
-		// Clear search inputs
-		for (const input of document.querySelectorAll(".user-search-input")) {
-			input.value = "";
-		}
-
-		// Hide dropdowns and clear their content
-		for (const dropdown of document.querySelectorAll(".user-search-dropdown")) {
-			dropdown.classList.add("d-none");
-			const listGroup = dropdown.querySelector(".list-group");
-			if (listGroup) {
-				listGroup.innerHTML = "";
-			}
-		}
-
-		// Reset notify checkboxes and textareas
-		for (const checkbox of document.querySelectorAll(
-			'[id^="notify-users-checkbox-"]',
-		)) {
-			checkbox.checked = true;
-			// Get the item UUID from the checkbox ID and setup the notify functionality
-			const itemUuid = checkbox.id.replace("notify-users-checkbox-", "");
-			setupNotifyCheckbox(itemUuid);
-		}
-		for (const textarea of document.querySelectorAll(
-			'[id^="notify-message-textarea-"]',
-		)) {
-			textarea.value = "";
-		}
-	}
-
-	setupRemoveUserButtons() {
-		// Find the specific modal for this item
-		const modal = document.getElementById(`share-modal-${this.itemUuid}`);
-		if (!modal) {
-			console.error(`Modal not found for ${this.itemType}: ${this.itemUuid}`);
-			return;
-		}
-
-		// Prevent duplicate event listener attachment
-		if (modal.dataset.removeButtonsSetup === "true") {
-			return;
-		}
-		modal.dataset.removeButtonsSetup = "true";
-
-		// Setup permission change buttons for this specific modal only
-		modal.addEventListener("click", async (e) => {
-			if (e.target.closest(".permission-change-btn")) {
-				const button = e.target.closest(".permission-change-btn");
-				const userEmail = button.dataset.userEmail;
-				const userName = button.dataset.userName;
-				const itemUuid = button.dataset.itemUuid;
-				const itemType = button.dataset.itemType;
-				const permissionLevel = button.dataset.permissionLevel;
-
-				if (!userEmail || !itemUuid || !itemType || !permissionLevel) {
-					console.error(
-						"Missing user email, item UUID, item type, or permission level",
-					);
-					return;
-				}
-
-				// Update the dropdown button text and icon to reflect the change
-				const dropdown = button.closest(".dropdown");
-				const dropdownButton = dropdown.querySelector(".access-level-dropdown");
-				const currentPermission = dropdownButton.getAttribute(
-					"data-current-permission",
-				);
-
-				// Don't do anything if selecting the same permission
-				if (permissionLevel === currentPermission) {
-					return;
-				}
-
-				// Update the dropdown button text and icon
-				const iconClass =
-					permissionLevel === "viewer"
-						? "bi-eye"
-						: permissionLevel === "contributor"
-							? "bi-plus-circle"
-							: permissionLevel === "co-owner"
-								? "bi-gear"
-								: permissionLevel === "remove"
-									? "bi-person-slash"
-									: "bi-question-circle";
-
-				dropdownButton.innerHTML = `<i class="bi ${iconClass} me-1"></i>${permissionLevel.charAt(0).toUpperCase() + permissionLevel.slice(1)}`;
-				dropdownButton.setAttribute("data-current-permission", permissionLevel);
-
-				// Update checkmarks in dropdown menu
-				const dropdownMenu = dropdown.querySelector(".access-level-menu");
-				const allPermissionBtns = dropdownMenu.querySelectorAll(
-					".permission-change-btn",
-				);
-
-				// Remove selected class and checkmarks from all buttons
-				for (const btn of allPermissionBtns) {
-					btn.classList.remove("selected");
-					const checkmark = btn.querySelector(".bi-check");
-					if (checkmark) {
-						checkmark.remove();
-					}
-				}
-
-				// Add selected class and checkmark to the clicked button
-				button.classList.add("selected");
-				const checkmark = document.createElement("i");
-				checkmark.className = "bi bi-check ms-auto";
-				button.appendChild(checkmark);
-
-				// Update user text for removal case
-				if (permissionLevel === "remove") {
-					const userRow = button.closest("tr");
-					const userNameElement = userRow.querySelector("h5");
-					if (userNameElement) {
-						userNameElement.style.textDecoration = "line-through";
-						userNameElement.style.opacity = "0.6";
-					}
-				} else {
-					// Clear any existing text decoration or opacity
-					const userRow = button.closest("tr");
-					const userNameElement = userRow.querySelector("h5");
-					if (userNameElement) {
-						userNameElement.style.textDecoration = "none";
-						userNameElement.style.opacity = "1";
-					}
-				}
-
-				// Handle removal
-				if (permissionLevel === "remove") {
-					this.pendingRemovals.add(userEmail);
-					// Remove from permission changes if it was there
-					if (this.pendingPermissionChanges?.has(userEmail)) {
-						this.pendingPermissionChanges.delete(userEmail);
-					}
-				} else {
-					// Handle permission level change
-					this.pendingRemovals.delete(userEmail); // Remove from removals if it was there
-
-					// Store the permission change
-					if (!this.pendingPermissionChanges) {
-						this.pendingPermissionChanges = new Map();
-					}
-					this.pendingPermissionChanges.set(userEmail, {
-						userName: userName,
-						itemUuid: itemUuid,
-						itemType: itemType,
-						permissionLevel: permissionLevel,
-					});
-				}
-
-				// Update save button state
-				this.updateSaveButtonState(itemUuid);
-
-				// Close the dropdown
-				const bsDropdown = bootstrap.Dropdown.getInstance(dropdownButton);
-				if (bsDropdown) {
-					bsDropdown.hide();
-				}
-			}
-		});
-	}
-
-	async refreshItemList() {
-		try {
-			// Get current URL parameters
-			const urlParams = new URLSearchParams(window.location.search);
-			const currentPage = urlParams.get("page") || "1";
-			const sortBy = urlParams.get("sort_by") || "created_at";
-			const sortOrder = urlParams.get("sort_order") || "desc";
-
-			// Determine the appropriate URL based on item type
-			let refreshUrl;
-			if (this.itemType === "dataset") {
-				refreshUrl = `/users/dataset-list/?page=${currentPage}&sort_by=${sortBy}&sort_order=${sortOrder}`;
-			} else if (this.itemType === "capture") {
-				refreshUrl = `/users/capture-list/?page=${currentPage}&sort_by=${sortBy}&sort_order=${sortOrder}`;
-			} else {
-				console.error(`Unknown item type: ${this.itemType}`);
-				return;
-			}
-
-			// Fetch updated list
-			const response = await fetch(refreshUrl, {
-				headers: {
-					"X-Requested-With": "XMLHttpRequest",
-				},
-			});
-
-			if (response.ok) {
-				const html = await response.text();
-
-				// Create a temporary div to parse the HTML
-				const tempDiv = document.createElement("div");
-				tempDiv.innerHTML = html;
-
-				// Update the main content area
-				const mainContent = document.querySelector("main");
-				const newMainContent = tempDiv.querySelector("main");
-
-				if (mainContent && newMainContent) {
-					// Update the main content
-					mainContent.innerHTML = newMainContent.innerHTML;
-
-					// Re-initialize any necessary event listeners
-					this.initializeItemListEventListeners();
-
-					// Re-initialize modals and their handlers
-					this.initializeModals();
-				}
-			}
-		} catch (error) {
-			console.error(`Error refreshing ${this.itemType} list:`, error);
-			// Fallback to page reload if refresh fails
-			location.reload();
-		}
-	}
-
-	initializeModals() {
-		// Re-create UserSearchHandler for each share modal
-		for (const modal of document.querySelectorAll(".modal[data-item-uuid]")) {
-			const itemUuid = modal.getAttribute("data-item-uuid");
-			const itemType = modal.getAttribute("data-item-type");
-			if (window.UserSearchHandler) {
-				const handler = new window.UserSearchHandler();
-				// Store the handler on the modal element
-				modal.userSearchHandler = handler;
-			}
-
-			// On modal show, set the item info and call init()
-			modal.addEventListener("show.bs.modal", () => {
-				if (modal.userSearchHandler) {
-					modal.userSearchHandler.setItemInfo(itemUuid, itemType);
-					modal.userSearchHandler.init();
-				}
-			});
-
-			// On modal hide, reset all selections and entered data
-			modal.addEventListener("hidden.bs.modal", () => {
-				if (modal.userSearchHandler) {
-					modal.userSearchHandler.resetAll();
-				}
-			});
-		}
-	}
-
-	initializeItemListEventListeners() {
-		// Re-attach event listeners for the updated item list
-		// This ensures the share buttons and other interactions still work
-
-		// Re-initialize sort functionality
-		const sortableHeaders = document.querySelectorAll("th.sortable");
-		for (const header of sortableHeaders) {
-			header.style.cursor = "pointer";
-			header.addEventListener("click", () => {
-				const sortField = header.getAttribute("data-sort");
-				const urlParams = new URLSearchParams(window.location.search);
-				let newOrder = "desc";
-
-				// If already sorting by this field, toggle order
-				if (
-					urlParams.get("sort_by") === sortField &&
-					urlParams.get("sort_order") === "asc"
-				) {
-					newOrder = "desc";
-				}
-
-				// Update URL with new sort parameters
-				urlParams.set("sort_by", sortField);
-				urlParams.set("sort_order", newOrder);
-				urlParams.set("page", "1"); // Reset to first page when sorting
-
-				// Navigate to sorted results
-				window.location.search = urlParams.toString();
-			});
-		}
-
-		// Re-initialize download buttons (only for datasets)
-		if (this.itemType === "dataset") {
-			const downloadButtons = document.querySelectorAll(
-				".download-dataset-btn",
-			);
-			for (const button of downloadButtons) {
-				button.addEventListener("click", (e) => {
-					e.preventDefault();
-					e.stopPropagation();
-
-					const datasetUuid = button.getAttribute("data-dataset-uuid");
-					const datasetName = button.getAttribute("data-dataset-name");
-
-					// Update modal content
-					document.getElementById("downloadDatasetName").textContent =
-						datasetName;
-
-					// Show the modal
-					openCustomModal("downloadModal");
-
-					// Handle confirm download
-					document.getElementById("confirmDownloadBtn").onclick = () => {
-						// Close modal first
-						closeCustomModal("downloadModal");
-
-						// Show loading state
-						button.innerHTML =
-							'<i class="bi bi-hourglass-split"></i> Processing...';
-						button.disabled = true;
-
-						// Make API request
-						fetch(`/users/download-item/dataset/${datasetUuid}/`, {
-							method: "POST",
-							headers: {
-								"Content-Type": "application/json",
-								"X-CSRFToken": this.getCSRFToken(),
-							},
-						})
-							.then((response) => {
-								// Check if response is JSON
-								const contentType = response.headers.get("content-type");
-								if (contentType?.includes("application/json")) {
-									return response.json();
-								}
-								// If not JSON, throw an error with the response text
-								return response.text().then((text) => {
-									throw new Error(`Server returned non-JSON response: ${text}`);
-								});
-							})
-							.then((data) => {
-								if (data.success === true) {
-									button.innerHTML =
-										'<i class="bi bi-check-circle text-success"></i> Download Requested';
-									showAlert(
-										data.message ||
-											"Download request submitted successfully! You will receive an email when ready.",
-										"success",
-									);
-								} else {
-									button.innerHTML =
-										'<i class="bi bi-exclamation-triangle text-danger"></i> Request Failed';
-									showAlert(
-										data.message ||
-											"Download request failed. Please try again.",
-										"error",
-									);
-								}
-							})
-							.catch((error) => {
-								console.error("Download error:", error);
-								button.innerHTML =
-									'<i class="bi bi-exclamation-triangle text-danger"></i> Request Failed';
-								showAlert(
-									error.message ||
-										"An error occurred while processing your request.",
-									"error",
-								);
-							})
-							.finally(() => {
-								// Reset button after 3 seconds
-								setTimeout(() => {
-									button.innerHTML = "Download";
-									button.disabled = false;
-								}, 3000);
-							});
-					};
-				});
-			}
-		}
-	}
-}
-
-window.UserSearchHandler = UserSearchHandler;
-
-// Toast utility for notifications
-function showToast(message, type = "success") {
-	const toastContainer = document.getElementById("toast-container");
-	if (!toastContainer) return;
-	const toastId = `toast-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
-	const bgClass =
-		type === "success" ? "bg-success text-white" : "bg-danger text-white";
-	const toastHtml = `
-        <div id="${toastId}" class="toast align-items-center ${bgClass}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3500">
-            <div class="d-flex">
-                <div class="toast-body">${message}</div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-        </div>
-    `;
-	toastContainer.insertAdjacentHTML("beforeend", toastHtml);
-	const toastElem = document.getElementById(toastId);
-	const toast = new bootstrap.Toast(toastElem);
-	toast.show();
-	toastElem.addEventListener("hidden.bs.toast", () => toastElem.remove());
-}
-
-// Add logic to show/hide textarea based on notify checkbox
-function setupNotifyCheckbox(itemUuid) {
-	const notifyCheckbox = document.getElementById(
-		`notify-users-checkbox-${itemUuid}`,
-	);
-	const textareaContainer = document.getElementById(
-		`notify-message-textarea-container-${itemUuid}`,
-	);
-
-	if (!notifyCheckbox || !textareaContainer) {
-		// Don't log error - this is expected for modals without notify functionality
-		return;
-	}
-
-	function toggleTextarea() {
-		if (notifyCheckbox.checked) {
-			textareaContainer.classList.add("show");
-		} else {
-			textareaContainer.classList.remove("show");
-		}
-	}
-
-	// Remove any existing event listeners to prevent duplicates
-	notifyCheckbox.removeEventListener("change", toggleTextarea);
-	notifyCheckbox.addEventListener("change", toggleTextarea);
-
-	// Call toggleTextarea immediately to set initial state
-	toggleTextarea();
-}
diff --git a/gateway/sds_gateway/static/js/file-list.js b/gateway/sds_gateway/static/js/file-list.js
deleted file mode 100644
index 9a99a0140..000000000
--- a/gateway/sds_gateway/static/js/file-list.js
+++ /dev/null
@@ -1,1117 +0,0 @@
-/**
- * TODO: This file has a lot of redundancy with manager files
- * And needs to be deprecated. and have its functionality migrated
- * to the new JS structure.
- */
-
-/* File List Page JavaScript - Refactored to use Components */
-
-/**
- * Configuration constants
- */
-const CONFIG = {
-	DEBOUNCE_DELAY: 500,
-	DEFAULT_SORT_BY: "created_at",
-	DEFAULT_SORT_ORDER: "desc",
-	MIN_LOADING_TIME: 500, // Minimum milliseconds to display loading indicator
-	ELEMENT_IDS: {
-		SEARCH_INPUT: "search-input",
-		START_DATE: "start_date",
-		END_DATE: "end_date",
-		CENTER_FREQ_MIN: "centerFreqMinInput",
-		CENTER_FREQ_MAX: "centerFreqMaxInput",
-		APPLY_FILTERS: "apply-filters-btn",
-		CLEAR_FILTERS: "clear-filters-btn",
-		ITEMS_PER_PAGE: "items-per-page",
-	},
-};
-
-/**
- * Main controller class for the file list page
- */
-class FileListController {
-	constructor() {
-		this.userInteractedWithFrequency = false;
-		this.urlParams = new URLSearchParams(window.location.search);
-		this.currentSortBy =
-			this.urlParams.get("sort_by") || CONFIG.DEFAULT_SORT_BY;
-		this.currentSortOrder =
-			this.urlParams.get("sort_order") || CONFIG.DEFAULT_SORT_ORDER;
-
-		// Cache DOM elements
-		this.cacheElements();
-
-		// Initialize components
-		this.initializeComponents();
-
-		// Initialize functionality
-		this.initializeEventHandlers();
-		this.initializeFromURL();
-
-		// Initial setup
-		this.updateSortIcons();
-		this.tableManager.attachRowClickHandlers();
-
-		// Initialize dropdowns for any existing static dropdowns
-		this.initializeDropdowns();
-	}
-
-	/**
-	 * Cache frequently accessed DOM elements
-	 */
-	cacheElements() {
-		this.elements = {
-			searchInput: document.getElementById(CONFIG.ELEMENT_IDS.SEARCH_INPUT),
-			startDate: document.getElementById(CONFIG.ELEMENT_IDS.START_DATE),
-			endDate: document.getElementById(CONFIG.ELEMENT_IDS.END_DATE),
-			centerFreqMin: document.getElementById(
-				CONFIG.ELEMENT_IDS.CENTER_FREQ_MIN,
-			),
-			centerFreqMax: document.getElementById(
-				CONFIG.ELEMENT_IDS.CENTER_FREQ_MAX,
-			),
-			applyFilters: document.getElementById(CONFIG.ELEMENT_IDS.APPLY_FILTERS),
-			clearFilters: document.getElementById(CONFIG.ELEMENT_IDS.CLEAR_FILTERS),
-			itemsPerPage: document.getElementById(CONFIG.ELEMENT_IDS.ITEMS_PER_PAGE),
-			sortableHeaders: document.querySelectorAll("th.sortable"),
-			frequencyButton: document.querySelector(
-				'[data-bs-target="#collapseFrequency"]',
-			),
-			frequencyCollapse: document.getElementById("collapseFrequency"),
-			dateButton: document.querySelector('[data-bs-target="#collapseDate"]'),
-			dateCollapse: document.getElementById("collapseDate"),
-		};
-	}
-
-	/**
-	 * Initialize component managers
-	 */
-	initializeComponents() {
-		this.modalManager = new ModalManager({
-			modalId: "capture-modal",
-			modalBodyId: "capture-modal-body",
-			modalTitleId: "capture-modal-label",
-		});
-
-		this.tableManager = new FileListCapturesTableManager({
-			tableId: "captures-table",
-			tableContainerSelector: ".table-responsive",
-			resultsCountId: "results-count",
-			modalHandler: this.modalManager,
-			onSelectionChange: () => this.syncBulkAddToDatasetButton(),
-		});
-
-		this.searchManager = new SearchManager({
-			searchInputId: CONFIG.ELEMENT_IDS.SEARCH_INPUT,
-			searchButtonId: "search-btn",
-			clearButtonId: "reset-search-btn",
-			searchFormId: "search-form",
-			onSearchStart: () => this.tableManager.showLoading(),
-			onSearch: (query, signal) => this.performSearch(signal),
-			debounceDelay: CONFIG.DEBOUNCE_DELAY,
-		});
-
-		this.paginationManager = new PaginationManager({
-			containerId: "captures-pagination",
-			onPageChange: (page) => this.handlePageChange(page),
-		});
-	}
-
-	/**
-	 * Initialize all event handlers
-	 */
-	initializeEventHandlers() {
-		this.initializeTableSorting();
-		this.initializeAccordions();
-		this.initializeFrequencyHandling();
-		this.initializeItemsPerPageHandler();
-		this.initializeAddToDatasetButton();
-	}
-
-	/**
-	 * Selection mode: one button to enter; when on, show Cancel and Add
-	 */
-	initializeAddToDatasetButton() {
-		const mainBtn = document.getElementById("add-captures-to-dataset-btn");
-		const table = document.getElementById("captures-table");
-		const modeButtonsWrap = document.getElementById(
-			"add-to-dataset-mode-buttons",
-		);
-		const cancelBtn = document.getElementById("add-to-dataset-cancel-btn");
-		const addBtn = document.getElementById("add-to-dataset-add-btn");
-		if (!mainBtn || !table) return;
-
-		const enterSelectionMode = () => {
-			table.classList.add("selection-mode-active");
-			mainBtn.classList.add("d-none");
-			mainBtn.setAttribute("aria-pressed", "true");
-			if (modeButtonsWrap) modeButtonsWrap.classList.remove("d-none");
-			this.syncBulkAddToDatasetButton();
-		};
-
-		mainBtn.addEventListener("click", enterSelectionMode);
-
-		if (cancelBtn) {
-			cancelBtn.addEventListener("click", () => this.exitSelectionMode());
-		}
-
-		if (addBtn) {
-			addBtn.addEventListener("click", () => {
-				const ids = Array.from(this.tableManager?.selectedCaptureIds ?? []);
-				if (ids.length === 0) {
-					if (window.showAlert) {
-						window.showAlert(
-							"Select at least one capture before adding to a dataset.",
-							"warning",
-						);
-					}
-					return;
-				}
-				const modal = document.getElementById("quickAddToDatasetModal");
-				if (modal) {
-					modal.dataset.captureUuids = JSON.stringify(ids);
-					const bsModal = bootstrap.Modal.getOrCreateInstance(modal);
-					bsModal.show();
-				}
-			});
-		}
-	}
-
-	/**
-	 * Exit bulk-add selection mode: hide the mode controls, uncheck all selected
-	 * captures, and clear the selection set.
-	 */
-	exitSelectionMode() {
-		const mainBtn = document.getElementById("add-captures-to-dataset-btn");
-		const table = document.getElementById("captures-table");
-		const modeButtonsWrap = document.getElementById(
-			"add-to-dataset-mode-buttons",
-		);
-		table?.classList.remove("selection-mode-active");
-		mainBtn?.classList.remove("d-none");
-		mainBtn?.setAttribute("aria-pressed", "false");
-		modeButtonsWrap?.classList.add("d-none");
-
-		// Uncheck all visible checkboxes and clear the tracked set
-		if (this.tableManager) {
-			for (const uuid of this.tableManager.selectedCaptureIds) {
-				const cb = document.querySelector(
-					`.capture-select-checkbox[data-capture-uuid="${uuid}"]`,
-				);
-				if (cb) cb.checked = false;
-			}
-			this.tableManager.selectedCaptureIds.clear();
-			this.syncBulkAddToDatasetButton();
-		}
-	}
-
-	/**
-	 * While selection mode is active, disable bulk "Add" until at least one capture is selected.
-	 */
-	syncBulkAddToDatasetButton() {
-		const addBtn = document.getElementById("add-to-dataset-add-btn");
-		const table = document.getElementById("captures-table");
-		if (!addBtn || !table?.classList.contains("selection-mode-active")) {
-			return;
-		}
-		const n = this.tableManager?.selectedCaptureIds?.size ?? 0;
-		addBtn.disabled = n === 0;
-		addBtn.title =
-			n === 0
-				? "Select at least one capture to add to a dataset"
-				: "Add selected captures to a dataset";
-		addBtn.setAttribute(
-			"aria-label",
-			n === 0
-				? "Add to dataset — select at least one capture first"
-				: `Add ${n} selected capture${n === 1 ? "" : "s"} to a dataset`,
-		);
-	}
-
-	/**
-	 * Initialize values from URL parameters
-	 */
-	initializeFromURL() {
-		// Set initial date values from URL
-		if (this.urlParams.get("date_start") && this.elements.startDate) {
-			this.elements.startDate.value = this.urlParams.get("date_start");
-		}
-		if (this.urlParams.get("date_end") && this.elements.endDate) {
-			this.elements.endDate.value = this.urlParams.get("date_end");
-		}
-
-		// Set frequency values if they exist in URL
-		this.initializeFrequencyFromURL();
-	}
-
-	/**
-	 * Handle page change events
-	 */
-	handlePageChange(page) {
-		const urlParams = new URLSearchParams(window.location.search);
-		urlParams.set("page", page.toString());
-		window.location.search = urlParams.toString();
-	}
-
-	/**
-	 * Build search parameters from form inputs
-	 */
-	buildSearchParams() {
-		const searchParams = new URLSearchParams();
-
-		const searchQuery = this.elements.searchInput?.value.trim() || "";
-		const startDate = this.elements.startDate?.value || "";
-		let endDate = this.elements.endDate?.value || "";
-
-		// If end date is set, include the full day
-		if (endDate) {
-			endDate = `${endDate}T23:59:59`;
-		}
-
-		// Add search parameters
-		if (searchQuery) searchParams.set("search", searchQuery);
-		if (startDate) searchParams.set("date_start", startDate);
-		if (endDate) searchParams.set("date_end", endDate);
-
-		// Only add frequency parameters if user has explicitly interacted
-		if (this.userInteractedWithFrequency) {
-			if (this.elements.centerFreqMin?.value) {
-				searchParams.set("min_freq", this.elements.centerFreqMin.value);
-			}
-			if (this.elements.centerFreqMax?.value) {
-				searchParams.set("max_freq", this.elements.centerFreqMax.value);
-			}
-		}
-
-		searchParams.set("sort_by", this.currentSortBy);
-		searchParams.set("sort_order", this.currentSortOrder);
-
-		return searchParams;
-	}
-
-	/**
-	 * Execute search API call
-	 */
-	async executeSearch(searchParams, signal) {
-		const apiUrl = `${window.location.pathname.replace(/\/$/, "")}/api/?${searchParams.toString()}`;
-
-		const response = await fetch(apiUrl, {
-			method: "GET",
-			headers: {
-				Accept: "application/json",
-			},
-			credentials: "same-origin",
-			signal: signal,
-		});
-
-		if (!response.ok) {
-			throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-		}
-
-		const text = await response.text();
-		try {
-			return JSON.parse(text);
-		} catch {
-			throw new Error("Invalid JSON response from server");
-		}
-	}
-
-	/**
-	 * Update UI with search results
-	 */
-	updateUI(data) {
-		if (data.error) {
-			throw new Error(`Server error: ${data.error}`);
-		}
-
-		this.tableManager.updateTable(data.captures || [], data.has_results);
-	}
-
-	/**
-	 * Update browser history without page refresh
-	 */
-	updateBrowserHistory(searchParams) {
-		const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
-		window.history.pushState({}, "", newUrl);
-	}
-
-	/**
-	 * Main search function - now broken down into smaller methods
-	 */
-	async performSearch(signal) {
-		try {
-			const startTime = Date.now();
-			this.tableManager.showLoading();
-
-			const searchParams = this.buildSearchParams();
-			const data = await this.executeSearch(searchParams, signal);
-
-			// Ensure minimum loading time is displayed
-			const elapsedTime = Date.now() - startTime;
-			if (elapsedTime < CONFIG.MIN_LOADING_TIME) {
-				await new Promise((resolve) =>
-					setTimeout(resolve, CONFIG.MIN_LOADING_TIME - elapsedTime),
-				);
-			}
-
-			this.updateUI(data);
-			this.updateBrowserHistory(searchParams);
-		} catch (error) {
-			// Don't show error if request was aborted (user issued a new search)
-			if (error.name === "AbortError") {
-				console.log("Previous search request was cancelled");
-				return;
-			}
-
-			console.error("Search error:", error);
-			this.tableManager.showError(`Search failed: ${error.message}`);
-		} finally {
-			this.tableManager.hideLoading();
-		}
-	}
-
-	/**
-	 * Initialize table sorting functionality
-	 */
-	initializeTableSorting() {
-		if (!this.elements.sortableHeaders) return;
-
-		for (const header of this.elements.sortableHeaders) {
-			header.style.cursor = "pointer";
-			header.addEventListener("click", () => this.handleSort(header));
-		}
-	}
-
-	/**
-	 * Handle sort click events
-	 */
-	handleSort(header) {
-		try {
-			const sortField = header.getAttribute("data-sort");
-			const currentSort = this.urlParams.get("sort_by");
-			const currentOrder = this.urlParams.get("sort_order") || "desc";
-
-			// Determine new sort order
-			let newOrder = "asc";
-			if (currentSort === sortField && currentOrder === "asc") {
-				newOrder = "desc";
-			}
-
-			// Build new URL with sort parameters
-			const urlParams = new URLSearchParams(window.location.search);
-			urlParams.set("sort_by", sortField);
-			urlParams.set("sort_order", newOrder);
-			urlParams.set("page", "1");
-
-			// Navigate to sorted results
-			window.location.search = urlParams.toString();
-		} catch (error) {
-			console.error("Error handling sort:", error);
-		}
-	}
-
-	/**
-	 * Update sort icons to show current sort state
-	 */
-	updateSortIcons() {
-		if (!this.elements.sortableHeaders) return;
-
-		const currentSort = this.urlParams.get("sort_by") || CONFIG.DEFAULT_SORT_BY;
-		const currentOrder = this.urlParams.get("sort_order") || "desc";
-
-		for (const header of this.elements.sortableHeaders) {
-			const sortField = header.getAttribute("data-sort");
-			const icon = header.querySelector(".sort-icon");
-
-			if (icon) {
-				// Reset classes
-				icon.className = "bi sort-icon";
-
-				if (currentSort === sortField) {
-					// Add active class and appropriate direction icon
-					icon.classList.add("active");
-					if (currentOrder === "desc") {
-						icon.classList.add("bi-caret-down-fill");
-					} else {
-						icon.classList.add("bi-caret-up-fill");
-					}
-				} else {
-					// Inactive columns get default down arrow
-					icon.classList.add("bi-caret-down-fill");
-				}
-			}
-		}
-	}
-
-	/**
-	 * Initialize accordion behavior
-	 */
-	initializeAccordions() {
-		// Frequency filter accordion
-		if (this.elements.frequencyButton && this.elements.frequencyCollapse) {
-			this.elements.frequencyButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.toggleAccordion(
-					this.elements.frequencyButton,
-					this.elements.frequencyCollapse,
-				);
-			});
-		}
-
-		// Date filter accordion
-		if (this.elements.dateButton && this.elements.dateCollapse) {
-			this.elements.dateButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.toggleAccordion(
-					this.elements.dateButton,
-					this.elements.dateCollapse,
-				);
-			});
-		}
-	}
-
-	/**
-	 * Helper function to toggle accordion state
-	 */
-	toggleAccordion(button, collapse) {
-		const isCollapsed = button.classList.contains("collapsed");
-
-		if (isCollapsed) {
-			button.classList.remove("collapsed");
-			button.setAttribute("aria-expanded", "true");
-			collapse.classList.add("show");
-		} else {
-			button.classList.add("collapsed");
-			button.setAttribute("aria-expanded", "false");
-			collapse.classList.remove("show");
-		}
-	}
-
-	/**
-	 * Initialize frequency handling
-	 */
-	initializeFrequencyHandling() {
-		// Add event listeners to track user interaction with frequency inputs
-		if (this.elements.centerFreqMin) {
-			this.elements.centerFreqMin.addEventListener("change", () => {
-				this.userInteractedWithFrequency = true;
-			});
-		}
-
-		if (this.elements.centerFreqMax) {
-			this.elements.centerFreqMax.addEventListener("change", () => {
-				this.userInteractedWithFrequency = true;
-			});
-		}
-
-		// Apply filters button
-		if (this.elements.applyFilters) {
-			this.elements.applyFilters.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.performSearch();
-			});
-		}
-
-		// Clear filters button
-		if (this.elements.clearFilters) {
-			this.elements.clearFilters.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.clearAllFilters();
-			});
-		}
-	}
-
-	/**
-	 * Clear all filter inputs
-	 */
-	clearAllFilters() {
-		// Get current URL parameters
-		const urlParams = new URLSearchParams(window.location.search);
-		const currentSearch = urlParams.get("search");
-
-		// Reset all filter inputs except search
-		if (this.elements.startDate) this.elements.startDate.value = "";
-		if (this.elements.endDate) this.elements.endDate.value = "";
-		if (this.elements.centerFreqMin) this.elements.centerFreqMin.value = "";
-		if (this.elements.centerFreqMax) this.elements.centerFreqMax.value = "";
-
-		// Reset interaction tracking
-		this.userInteractedWithFrequency = false;
-
-		// Reset frequency slider if it exists
-		const frequencyRangeSlider = document.getElementById(
-			"frequency-range-slider",
-		);
-		if (frequencyRangeSlider?.noUiSlider) {
-			frequencyRangeSlider.noUiSlider.set([0, 10]);
-		}
-
-		// Also reset the display values
-		const lowerValue = document.getElementById("frequency-range-lower");
-		const upperValue = document.getElementById("frequency-range-upper");
-		if (lowerValue) lowerValue.textContent = "0 GHz";
-		if (upperValue) upperValue.textContent = "10 GHz";
-
-		// Create new URL parameters with only search and sort parameters preserved
-		const newParams = new URLSearchParams();
-		if (currentSearch) {
-			newParams.set("search", currentSearch);
-		}
-		newParams.set("sort_by", this.currentSortBy);
-		newParams.set("sort_order", this.currentSortOrder);
-
-		// Update URL and trigger search
-		window.history.pushState(
-			{},
-			"",
-			`${window.location.pathname}?${newParams.toString()}`,
-		);
-		this.performSearch();
-	}
-
-	/**
-	 * Initialize items per page handler
-	 */
-	initializeItemsPerPageHandler() {
-		if (this.elements.itemsPerPage) {
-			this.elements.itemsPerPage.addEventListener("change", (e) => {
-				const urlParams = new URLSearchParams(window.location.search);
-				urlParams.set("items_per_page", e.target.value);
-				urlParams.set("page", "1");
-				window.location.search = urlParams.toString();
-			});
-		}
-	}
-
-	/**
-	 * Initialize frequency range from URL parameters
-	 */
-	initializeFrequencyFromURL() {
-		if (!this.elements.centerFreqMin || !this.elements.centerFreqMax) return;
-
-		const minFreq = Number.parseFloat(this.urlParams.get("min_freq"));
-		const maxFreq = Number.parseFloat(this.urlParams.get("max_freq"));
-
-		if (!Number.isNaN(minFreq)) {
-			this.elements.centerFreqMin.value = minFreq;
-			this.userInteractedWithFrequency = true;
-		}
-		if (!Number.isNaN(maxFreq)) {
-			this.elements.centerFreqMax.value = maxFreq;
-			this.userInteractedWithFrequency = true;
-		}
-
-		// Update noUiSlider if it exists
-		if (this.userInteractedWithFrequency) {
-			this.initializeFrequencySlider();
-		}
-	}
-
-	initializeFrequencySlider() {
-		try {
-			const frequencyRangeSlider = document.getElementById(
-				"frequency-range-slider",
-			);
-			if (frequencyRangeSlider?.noUiSlider) {
-				const currentValues = frequencyRangeSlider.noUiSlider.get();
-				const newMin = !Number.isNaN(minFreq)
-					? minFreq
-					: Number.parseFloat(currentValues[0]);
-				const newMax = !Number.isNaN(maxFreq)
-					? maxFreq
-					: Number.parseFloat(currentValues[1]);
-
-				frequencyRangeSlider.noUiSlider.set([newMin, newMax]);
-			}
-		} catch (error) {
-			console.error("Error initializing frequency slider:", error);
-		}
-	}
-
-	/**
-	 * Initialize dropdowns with body container for proper positioning
-	 */
-	initializeDropdowns() {
-		const dropdownButtons = document.querySelectorAll(".btn-icon-dropdown");
-
-		if (dropdownButtons.length === 0) {
-			return;
-		}
-
-		for (const toggle of dropdownButtons) {
-			// Check if dropdown is already initialized
-			if (toggle._dropdown) {
-				continue;
-			}
-
-			const _dropdown = new bootstrap.Dropdown(toggle, {
-				container: "body",
-				boundary: "viewport",
-				popperConfig: {
-					modifiers: [
-						{
-							name: "preventOverflow",
-							options: {
-								boundary: "viewport",
-							},
-						},
-					],
-				},
-			});
-
-			// Manually move dropdown to body when shown
-			toggle.addEventListener("show.bs.dropdown", () => {
-				const dropdownMenu = toggle.nextElementSibling;
-				if (dropdownMenu?.classList.contains("dropdown-menu")) {
-					document.body.appendChild(dropdownMenu);
-				}
-			});
-		}
-	}
-}
-
-/**
- * Enhanced CapturesTableManager for file list specific functionality
- * Extends the base CapturesTableManager from components.js
- */
-class FileListCapturesTableManager extends CapturesTableManager {
-	/**
-	 * UUIDs selected for quick-add / bulk actions. Class field initializes as soon as
-	 * the instance exists (after super()), so renderRow never runs before this exists.
-	 */
-	selectedCaptureIds = new Set();
-
-	constructor(options) {
-		super(options);
-		this.resultsCountElement = document.getElementById(options.resultsCountId);
-		this.searchButton = document.getElementById("search-btn");
-		this.searchButtonContent = document.getElementById("search-btn-content");
-		this.searchButtonLoading = document.getElementById("search-btn-loading");
-		this.onSelectionChange = options.onSelectionChange ?? null;
-		this.setupSelectionCheckboxHandler();
-		this.setupRowClickSelection();
-	}
-
-	_notifySelectionChange() {
-		if (typeof this.onSelectionChange === "function") {
-			this.onSelectionChange();
-		}
-	}
-
-	/**
-	 * Override showLoading to toggle button contents instead of showing separate indicator
-	 */
-	showLoading() {
-		if (this.searchButton) {
-			this.searchButton.disabled = true;
-			if (this.searchButtonContent)
-				this.searchButtonContent.classList.add("d-none");
-			if (this.searchButtonLoading)
-				this.searchButtonLoading.classList.remove("d-none");
-		}
-	}
-
-	/**
-	 * Override hideLoading to restore button contents
-	 */
-	hideLoading() {
-		if (this.searchButton) {
-			this.searchButton.disabled = false;
-			if (this.searchButtonContent)
-				this.searchButtonContent.classList.remove("d-none");
-			if (this.searchButtonLoading)
-				this.searchButtonLoading.classList.add("d-none");
-		}
-	}
-
-	/**
-	 * Delegated handler for selection checkboxes: keep selectedCaptureIds in sync
-	 */
-	setupSelectionCheckboxHandler() {
-		this._checkboxChangeHandler = (e) => {
-			if (!e.target.matches(".capture-select-checkbox")) return;
-			const uuid = e.target.getAttribute("data-capture-uuid");
-			if (!uuid) return;
-			if (e.target.checked) {
-				this.selectedCaptureIds.add(uuid);
-			} else {
-				this.selectedCaptureIds.delete(uuid);
-			}
-			this._notifySelectionChange();
-		};
-		document.addEventListener("change", this._checkboxChangeHandler);
-	}
-
-	/**
-	 * When selection mode is active, clicking a row toggles its selection (instead of opening the modal).
-	 * Uses capture phase so we run before the row's click handler.
-	 */
-	setupRowClickSelection() {
-		const table = document.getElementById(this.tableId);
-		if (!table) return;
-		this._rowClickTable = table;
-
-		this._rowClickHandler = (e) => {
-			if (!table.classList.contains("selection-mode-active")) return;
-			if (
-				e.target.closest(
-					"button, a, [data-bs-toggle='dropdown'], .capture-select-checkbox",
-				)
-			)
-				return;
-			const row = e.target.closest("tr");
-			if (!row) return;
-			const checkbox = row.querySelector(".capture-select-checkbox");
-			if (!checkbox) return;
-			const uuid = checkbox.getAttribute("data-capture-uuid");
-			if (!uuid) return;
-
-			if (this.selectedCaptureIds.has(uuid)) {
-				this.selectedCaptureIds.delete(uuid);
-				checkbox.checked = false;
-			} else {
-				this.selectedCaptureIds.add(uuid);
-				checkbox.checked = true;
-			}
-			this._notifySelectionChange();
-			e.preventDefault();
-			e.stopPropagation();
-		};
-
-		table.addEventListener("click", this._rowClickHandler, true);
-	}
-
-	destroy() {
-		if (this._checkboxChangeHandler) {
-			document.removeEventListener("change", this._checkboxChangeHandler);
-			this._checkboxChangeHandler = null;
-		}
-		if (this._rowClickHandler && this._rowClickTable) {
-			this._rowClickTable.removeEventListener(
-				"click",
-				this._rowClickHandler,
-				true,
-			);
-			this._rowClickHandler = null;
-			this._rowClickTable = null;
-		}
-		super.destroy();
-	}
-
-	/**
-	 * Initialize dropdowns with body container for proper positioning
-	 */
-	initializeDropdowns() {
-		const dropdownButtons = document.querySelectorAll(".btn-icon-dropdown");
-
-		if (dropdownButtons.length === 0) {
-			return;
-		}
-
-		for (const toggle of dropdownButtons) {
-			// Check if dropdown is already initialized
-			if (toggle._dropdown) {
-				continue;
-			}
-
-			const _dropdown = new bootstrap.Dropdown(toggle, {
-				container: "body",
-				boundary: "viewport",
-				popperConfig: {
-					modifiers: [
-						{
-							name: "preventOverflow",
-							options: {
-								boundary: "viewport",
-							},
-						},
-					],
-				},
-			});
-
-			// Manually move dropdown to body when shown
-			toggle.addEventListener("show.bs.dropdown", () => {
-				const dropdownMenu = toggle.nextElementSibling;
-				if (dropdownMenu?.classList.contains("dropdown-menu")) {
-					document.body.appendChild(dropdownMenu);
-				}
-			});
-		}
-	}
-
-	/**
-	 * Update table with new data
-	 */
-	updateTable(captures, hasResults) {
-		this.selectedCaptureIds ??= new Set();
-		const tbody = this.tbody ?? this.table?.querySelector("tbody");
-		if (!tbody) return;
-
-		// Update results count
-		this.updateResultsCount(captures, hasResults);
-
-		if (!hasResults || captures.length === 0) {
-			tbody.innerHTML = `
-				<tr>
-					<td colspan="6" class="text-center text-muted py-4">
-						<em>No captures found matching your search criteria.</em>
-					</td>
-				</tr>
-			`;
-			this._notifySelectionChange();
-			return;
-		}
-
-		// Build table HTML efficiently
-		const tableHTML = captures
-			.map((capture, index) => this.renderRow(capture, index))
-			.join("");
-		tbody.innerHTML = tableHTML;
-
-		// Initialize dropdowns after table is updated
-		this.initializeDropdowns();
-		this._notifySelectionChange();
-	}
-
-	/**
-	 * Update results count display
-	 */
-	updateResultsCount(captures, hasResults) {
-		if (this.resultsCountElement) {
-			const count = hasResults && captures ? captures.length : 0;
-			const pluralSuffix = count === 1 ? "" : "s";
-			this.resultsCountElement.textContent = `${count} capture${pluralSuffix} found`;
-		}
-	}
-
-	/**
-	 * Render individual table row with XSS protection
-	 * Overrides the base class method to include file-specific columns
-	 */
-	renderRow(capture) {
-		this.selectedCaptureIds ??= new Set();
-		// Sanitize all data before rendering
-		const safeData = {
-			uuid: ComponentUtils.escapeHtml(capture.uuid || ""),
-			name: ComponentUtils.escapeHtml(capture.name || ""),
-			channel: ComponentUtils.escapeHtml(capture.channel || ""),
-			scanGroup: ComponentUtils.escapeHtml(capture.scan_group || ""),
-			captureType: ComponentUtils.escapeHtml(capture.capture_type || ""),
-			captureTypeDisplay: ComponentUtils.escapeHtml(
-				capture.capture_type_display || "",
-			),
-			topLevelDir: ComponentUtils.escapeHtml(capture.top_level_dir || ""),
-			indexName: ComponentUtils.escapeHtml(capture.index_name || ""),
-			owner: ComponentUtils.escapeHtml(capture.owner || ""),
-			origin: ComponentUtils.escapeHtml(capture.origin || ""),
-			dataset: ComponentUtils.escapeHtml(capture.dataset || ""),
-			createdAt: ComponentUtils.escapeHtml(capture.created_at || ""),
-			updatedAt: ComponentUtils.escapeHtml(capture.updated_at || ""),
-			isPublic: ComponentUtils.escapeHtml(capture.is_public || ""),
-			isDeleted: ComponentUtils.escapeHtml(capture.is_deleted || ""),
-			centerFrequencyGhz: ComponentUtils.escapeHtml(
-				capture.center_frequency_ghz || "",
-			),
-			lengthOfCaptureMs: capture.length_of_capture_ms ?? 0,
-			fileCadenceMs: capture.file_cadence_ms ?? 1000,
-			perDataFileSize: capture.per_data_file_size ?? 0,
-			totalSize: capture.total_file_size ?? 0,
-			dataFilesCount: capture.data_files_count ?? 0,
-			dataFilesTotalSize: capture.data_files_total_size ?? 0,
-			totalFilesCount: capture.files.length ?? 0,
-			captureStartEpochSec: capture.capture_start_epoch_sec ?? 0,
-		};
-
-		let typeDisplay = safeData.captureTypeDisplay || safeData.captureType;
-
-		if (capture.is_multi_channel) {
-			typeDisplay = capture.capture_type_display || safeData.captureType;
-		}
-
-		// Display name with fallback to "Unnamed Capture"
-		const nameDisplay = safeData.name || "Unnamed Capture";
-
-		// Format created date to match template format
-		let createdDate = "-";
-		if (capture.created_at) {
-			const date = new Date(capture.created_at);
-			if (!Number.isNaN(date.getTime())) {
-				const dateStr = date.toISOString().split("T")[0]; // YYYY-MM-DD
-				const timeStr = date.toLocaleTimeString("en-US", {
-					hour12: false,
-					timeZoneName: "short",
-				}); // HH:mm:ss TZ
-				createdDate = `
-					<div class="d-flex align-items-center gap-2">
-						<span class="bg-transparent pe-2">${dateStr}</span>
-						<span class="text-muted bg-transparent">${timeStr}</span>
-					</div>
-				`;
-			}
-		}
-
-		// Check if shared (for shared icon)
-		const isShared = capture.is_shared_with_me || false;
-		const sharedIcon = isShared
-			? `<span class="ms-2 align-middle" data-bs-toggle="tooltip" title="Shared with you">
-					<i class="bi bi-people-fill text-success"></i>
-				</span>`
-			: "";
-
-		// Check if owner (for conditional actions and selection — only owned captures are selectable)
-		const isOwner = capture.is_owner === true;
-
-		const checked = this.selectedCaptureIds.has(capture.uuid) ? " checked" : "";
-		const selectCell = isOwner
-			? `<input type="checkbox"
-						   class="capture-select-checkbox form-check-input"
-						   data-capture-uuid="${safeData.uuid}"
-						   aria-label="Select capture ${nameDisplay}"${checked}>`
-			: '<span class="text-muted" aria-hidden="true">—</span>';
-		return `
-			<tr class="capture-row" data-clickable="true" data-uuid="${safeData.uuid}" data-capture-uuid="${safeData.uuid}">
-				<td class="capture-select-column" headers="select-header">${selectCell}</td>
-				<td headers="name-header">
-					<a href="#" class="capture-link"
-					   data-uuid="${safeData.uuid}"
-					   data-name="${safeData.name}"
-					   data-channel="${safeData.channel}"
-					   data-scan-group="${safeData.scanGroup}"
-					   data-capture-type="${safeData.captureType}"
-					   data-top-level-dir="${safeData.topLevelDir}"
-					   data-index-name="${safeData.indexName}"
-					   data-owner="${safeData.owner}"
-					   data-origin="${safeData.origin}"
-					   data-dataset="${safeData.dataset}"
-					   data-created-at="${safeData.createdAt}"
-					   data-updated-at="${safeData.updatedAt}"
-					   data-is-public="${safeData.isPublic}"
-					   data-is-deleted="${safeData.isDeleted}"
-					   data-center-frequency-ghz="${safeData.centerFrequencyGhz}"
-					   data-is-multi-channel="${capture.is_multi_channel || false}"
-					   data-channels="${capture.channels ? JSON.stringify(capture.channels) : ""}"
-					   aria-label="View details for ${nameDisplay}"
-					   title="View capture details: ${nameDisplay}">
-						${nameDisplay}
-					</a>
-					${sharedIcon}
-				</td>
-				<td headers="top-level-dir-header">${safeData.topLevelDir || "-"}</td>
-				<td headers="type-header">${typeDisplay}</td>
-				<td headers="created-header" class="text-nowrap">${createdDate}</td>
-				<td headers="actions-header" class="text-center">
-					<div class="dropdown">
-						<button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown d-flex align-items-center justify-content-center mx-auto"
-								type="button"
-								data-bs-toggle="dropdown"
-								data-bs-boundary="viewport"
-								aria-expanded="false"
-								aria-label="Actions for capture ${nameDisplay}"
-								style="width: 32px; height: 32px; padding: 0;">
-							<i class="bi bi-three-dots-vertical"></i>
-						</button>
-						<ul class="dropdown-menu">
-							${
-								isOwner
-									? `
-								<li>
-									<button class="dropdown-item capture-details-btn"
-											type="button"
-											data-uuid="${safeData.uuid}"
-											data-name="${safeData.name}"
-											data-channel="${safeData.channel}"
-											data-scan-group="${safeData.scanGroup}"
-											data-capture-type="${safeData.captureType}"
-											data-top-level-dir="${safeData.topLevelDir}"
-											data-index-name="${safeData.indexName}"
-											data-owner="${safeData.owner}"
-											data-origin="${safeData.origin}"
-											data-dataset="${safeData.dataset}"
-											data-created-at="${safeData.createdAt}"
-											data-updated-at="${safeData.updatedAt}"
-											data-is-public="${safeData.isPublic}"
-											data-is-deleted="${safeData.isDeleted}"
-											data-center-frequency-ghz="${safeData.centerFrequencyGhz}"
-											data-is-multi-channel="${capture.is_multi_channel || false}"
-											data-channels="${capture.channels ? JSON.stringify(capture.channels) : ""}">
-										Edit
-									</button>
-								</li>
-								<li>
-									<button class="dropdown-item"
-											type="button"
-											data-bs-toggle="modal"
-											data-bs-target="#shareModal-${safeData.uuid}">
-										Share
-									</button>
-								</li>
-								<li>
-									<button class="dropdown-item add-to-dataset-btn"
-											type="button"
-											data-capture-uuid="${safeData.uuid}"
-											data-capture-name="${safeData.name}">
-										Add to dataset
-									</button>
-								</li>
-							`
-									: ""
-							}
-							<li>
-								<button class="dropdown-item download-capture-btn"
-										type="button"
-										data-capture-uuid="${safeData.uuid}"
-										data-capture-name="${safeData.name}"
-										data-length-of-capture-ms="${safeData.lengthOfCaptureMs}"
-										data-file-cadence-ms="${safeData.fileCadenceMs}"
-										data-per-data-file-size="${safeData.perDataFileSize}"
-										data-total-size="${safeData.totalSize}"
-										data-data-files-count="${safeData.dataFilesCount}"
-										data-data-files-total-size="${safeData.dataFilesTotalSize}"
-										data-total-files-count="${safeData.totalFilesCount}"
-										data-capture-start-epoch-sec="${safeData.captureStartEpochSec}">
-									Download
-								</button>
-							</li>
-							${
-								safeData.captureType === "drf"
-									? `
-								<li>
-									<button class="dropdown-item visualization-trigger-btn"
-											type="button"
-											data-capture-uuid="${safeData.uuid}"
-											data-capture-type="${safeData.captureType}">
-										Visualize
-									</button>
-								</li>
-							`
-									: ""
-							}
-						</ul>
-					</div>
-				</td>
-			</tr>
-		`;
-	}
-}
-
-// Expose frequency slider initialization function globally for backward compatibility
-window.initializeFrequencySlider = () => {
-	// This function is called from the template
-	if (window.fileListController) {
-		window.fileListController.initializeFrequencyFromURL();
-	}
-};
-
-// Initialize the application when DOM is loaded
-document.addEventListener("DOMContentLoaded", () => {
-	try {
-		window.fileListController = new FileListController();
-	} catch (error) {
-		console.error("Error initializing file list controller:", error);
-	}
-});
-
-// Export for ES6 modules (Jest testing) - only if in module context
-if (typeof module !== "undefined" && module.exports) {
-	module.exports = { FileListController, FileListCapturesTableManager };
-}
diff --git a/gateway/sds_gateway/static/js/file_list_upload_capture_modal.js b/gateway/sds_gateway/static/js/file_list_upload_capture_modal.js
deleted file mode 100644
index f8120cbbe..000000000
--- a/gateway/sds_gateway/static/js/file_list_upload_capture_modal.js
+++ /dev/null
@@ -1,1075 +0,0 @@
-/* Upload Capture Modal JavaScript */
-
-document.addEventListener("DOMContentLoaded", () => {
-	// Upload Capture Modal JS
-	let isProcessing = false; // Flag to track if processing is active
-	// Reset cancellation state on page load
-	// Add page refresh/close confirmation
-	let uploadInProgress = false;
-
-	// Clear any existing result modals on page load
-	const existingResultModal = document.getElementById("uploadResultModal");
-	if (existingResultModal) {
-		const modalInstance = bootstrap.Modal.getInstance(existingResultModal);
-		if (modalInstance) {
-			modalInstance.hide();
-		}
-	}
-
-	// Clear any upload-related session storage
-	if (sessionStorage.getItem("uploadInProgress")) {
-		sessionStorage.removeItem("uploadInProgress");
-	}
-
-	// Handle beforeunload event (page refresh/close)
-	window.addEventListener("beforeunload", (e) => {
-		if (
-			isProcessing ||
-			uploadInProgress ||
-			sessionStorage.getItem("uploadInProgress")
-		) {
-			e.preventDefault();
-			e.returnValue =
-				"Upload in progress will be aborted. Are you sure you want to leave?";
-			return e.returnValue;
-		}
-	});
-
-	// Handle visibility change (tab close/minimize)
-	document.addEventListener("visibilitychange", () => {
-		if (document.visibilityState === "hidden" && uploadInProgress) {
-			// Page hidden during upload
-		}
-	});
-
-	// Get button references
-	const uploadModal = document.getElementById("uploadCaptureModal");
-	if (!uploadModal) {
-		console.warn("uploadCaptureModal not found");
-		return;
-	}
-
-	const cancelButton = uploadModal.querySelector(".btn-secondary");
-	const closeButton = uploadModal.querySelector(".btn-close");
-	const submitButton = document.getElementById("uploadSubmitBtn");
-
-	if (!cancelButton || !closeButton || !submitButton) {
-		console.warn("Required buttons not found in upload modal");
-		return;
-	}
-
-	// Store abort controller reference for cancellation
-	let currentAbortController = null;
-
-	// Reset cancellation state when modal is opened
-	uploadModal.addEventListener("show.bs.modal", () => {
-		isProcessing = false;
-		currentAbortController = null;
-	});
-
-	// Reset cancellation state when files are selected
-	const fileInput = document.getElementById("captureFileInput");
-	if (fileInput) {
-		fileInput.addEventListener("change", () => {
-			isProcessing = false;
-			currentAbortController = null;
-		});
-	}
-
-	// Reset cancellation state when modal is hidden
-	uploadModal.addEventListener("hidden.bs.modal", () => {
-		isProcessing = false;
-		currentAbortController = null;
-	});
-
-	// Handle cancel button click
-	let cancelRequested = false;
-
-	// Helper function to handle cancellation logic
-	function handleCancellation(buttonType) {
-		if (isProcessing) {
-			// Cancel processing
-			cancelRequested = true;
-			// Abort current upload if controller exists
-			if (currentAbortController) {
-				currentAbortController.abort();
-			}
-			// Update UI immediately based on button type
-			if (buttonType === "cancel") {
-				cancelButton.textContent = "Cancelling...";
-				cancelButton.disabled = true;
-			} else if (buttonType === "close") {
-				closeButton.disabled = true;
-				closeButton.style.opacity = "0.5";
-			}
-			// Update progress message
-			const progressMessage = document.getElementById("progressMessage");
-			if (progressMessage) {
-				progressMessage.textContent = "Cancelling upload...";
-			}
-			// Force UI reset after a short delay to ensure it happens
-			setTimeout(() => {
-				if (cancelRequested) {
-					resetUIState();
-				}
-			}, 500);
-		}
-		// If not processing, let the normal button behavior handle it
-	}
-
-	cancelButton.addEventListener("click", () => {
-		handleCancellation("cancel");
-	});
-
-	// Handle close button (X) click - same logic as cancel button
-	closeButton.addEventListener("click", () => {
-		handleCancellation("close");
-	});
-
-	// Helper function to check for large files
-	function checkForLargeFiles(files, cancelButton, submitButton) {
-		const progressSection = document.getElementById("checkingProgressSection");
-		const LARGE_FILE_THRESHOLD = 512 * 1024 * 1024; // 512MB in bytes
-		const largeFiles = files.filter((file) => file.size > LARGE_FILE_THRESHOLD);
-
-		if (largeFiles.length > 0) {
-			// Reset UI state
-			progressSection.style.display = "none";
-			cancelButton.textContent = "Cancel";
-			cancelButton.classList.remove("btn-warning");
-			submitButton.disabled = false;
-
-			// Create alert message
-			const largeFileNames = largeFiles.map((file) => file.name).join(", ");
-			const alertMessage = `Large files detected (over 512MB): ${largeFileNames}\n\nPlease:\n1. Skip these large files and upload the remaining files, or\n2. Use the SpectrumX SDK (https://pypi.org/project/spectrumx/) to upload large files and add them to your capture.\n\nLarge files may cause issues with the web interface.`;
-
-			alert(alertMessage);
-			return true; // Indicates large files were found
-		}
-		return false; // No large files found
-	}
-
-	// Helper function to check files for duplicates
-	async function checkFilesForDuplicates(files, cancelButton, submitButton) {
-		// Local progress bar variables
-		const progressSection = document.getElementById("checkingProgressSection");
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-
-		// Show progress section
-		progressSection.style.display = "block";
-		progressMessage.textContent = "Processing files for upload...";
-
-		// Update UI to show processing state
-		cancelButton.textContent = "Cancel Processing";
-		submitButton.disabled = true;
-
-		// Initialize variables for file checking
-		window.filesToSkip = new Set();
-		window.fileCheckResults = new Map();
-
-		const totalFiles = files.length;
-
-		// Get CSRF token
-		const getCSRFToken = () => {
-			const metaToken = document.querySelector('meta[name="csrf-token"]');
-			if (metaToken) return metaToken.getAttribute("content");
-			const inputToken = document.querySelector('[name="csrfmiddlewaretoken"]');
-			if (inputToken) return inputToken.value;
-			const cookies = document.cookie.split(";");
-			for (let i = 0; i < cookies.length; i++) {
-				const cookie = cookies[i].trim();
-				if (cookie.startsWith("csrftoken=")) {
-					return cookie.substring("csrftoken=".length);
-				}
-			}
-			return "";
-		};
-
-		const csrfToken = getCSRFToken();
-		if (!csrfToken) {
-			throw new Error("CSRF token not found");
-		}
-
-		// Check each file for duplicates with progress
-		for (let i = 0; i < files.length; i++) {
-			const file = files[i];
-
-			// Update progress
-			const progress = Math.round(((i + 1) / totalFiles) * 100);
-			progressBar.style.width = `${progress}%`;
-			progressText.textContent = `${progress}%`;
-
-			// Calculate BLAKE3 hash
-			const buffer = await file.arrayBuffer();
-			const hasher = await hashwasm.createBLAKE3();
-			hasher.init();
-			hasher.update(new Uint8Array(buffer));
-			const hashHex = hasher.digest("hex");
-
-			// Calculate directory path
-			let directory = "/";
-			if (file.webkitRelativePath) {
-				const pathParts = file.webkitRelativePath.split("/");
-				if (pathParts.length > 1) {
-					pathParts.pop();
-					directory = `/${pathParts.join("/")}`;
-				}
-			}
-
-			// Check if file exists
-			const checkData = {
-				directory: directory,
-				filename: file.name,
-				checksum: hashHex,
-			};
-
-			try {
-				const checkFileUrl =
-					document.querySelector("[data-check-file-url]")?.dataset
-						.checkFileUrl || "/users/check-file-exists/";
-				const response = await fetch(checkFileUrl, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-						"X-CSRFToken": csrfToken,
-					},
-					body: JSON.stringify(checkData),
-				});
-
-				const data = await response.json();
-
-				// Store the result
-				const fileKey = `${directory}/${file.name}`;
-				window.fileCheckResults.set(fileKey, {
-					file: file,
-					directory: directory,
-					filename: file.name,
-					checksum: hashHex,
-					data: data.data,
-				});
-
-				// Mark for skipping if file exists in tree
-				if (data.data && data.data.file_exists_in_tree === true) {
-					window.filesToSkip.add(fileKey);
-				}
-			} catch (error) {
-				// Error checking file
-				console.error("Error checking file:", error);
-			}
-
-			// Check for cancellation after each file check
-			if (cancelRequested) {
-				break;
-			}
-		}
-
-		progressSection.style.display = "none";
-
-		// Check if cancellation was requested during file checking
-		if (cancelRequested) {
-			// Small delay to ensure UI updates are visible
-			progressSection.style.display = "none";
-			await new Promise((resolve) => setTimeout(resolve, 100));
-			// Show alert for duplicate checking cancellation
-			alert("Processing cancelled. No files were uploaded.");
-			throw new Error("Upload cancelled by user");
-		}
-	}
-
-	// Helper function to handle skipped files upload
-	async function handleSkippedFilesUpload(allRelativePaths, abortController) {
-		// Create form data for skipped files case
-		const skippedFormData = new FormData();
-
-		// Always add all relative paths for capture creation
-		for (const path of allRelativePaths) {
-			skippedFormData.append("all_relative_paths", path);
-		}
-
-		// Add other form fields
-		const captureType = document.getElementById("captureTypeSelect").value;
-		skippedFormData.append("capture_type", captureType);
-
-		if (captureType === "drf") {
-			const channels = document.getElementById("captureChannelsInput").value;
-			skippedFormData.append("channels", channels);
-		} else if (captureType === "rh") {
-			const scanGroup = document.getElementById("captureScanGroupInput").value;
-			skippedFormData.append("scan_group", scanGroup);
-		}
-
-		// Don't send chunk information for skipped files
-		// This ensures capture creation happens
-
-		const uploadUrl =
-			document.querySelector("[data-upload-url]")?.dataset.uploadUrl ||
-			"/users/upload-capture/";
-		const getCSRFToken = () => {
-			const metaToken = document.querySelector('meta[name="csrf-token"]');
-			if (metaToken) return metaToken.getAttribute("content");
-			const inputToken = document.querySelector('[name="csrfmiddlewaretoken"]');
-			if (inputToken) return inputToken.value;
-			const cookies = document.cookie.split(";");
-			for (let i = 0; i < cookies.length; i++) {
-				const cookie = cookies[i].trim();
-				if (cookie.startsWith("csrftoken=")) {
-					return cookie.substring("csrftoken=".length);
-				}
-			}
-			return "";
-		};
-
-		const response = await fetch(uploadUrl, {
-			method: "POST",
-			headers: {
-				"X-CSRFToken": getCSRFToken(),
-			},
-			body: skippedFormData,
-			signal: abortController.signal,
-		});
-
-		const result = await response.json();
-		return result;
-	}
-
-	// Helper function to calculate total chunks
-	function calculateTotalChunks(filesToUpload, chunkSizeBytes) {
-		let totalChunks = 0;
-		let tempChunkSize = 0;
-		let tempChunkFiles = 0; // Track number of files in current chunk (mirrors currentChunk.length)
-
-		for (let i = 0; i < filesToUpload.length; i++) {
-			const file = filesToUpload[i];
-
-			// Check if this file would exceed the chunk limit (mirrors upload logic exactly)
-			if (tempChunkSize + file.size > chunkSizeBytes && tempChunkFiles > 0) {
-				// Current chunk would exceed size limit, start new chunk
-				totalChunks++;
-				tempChunkSize = 0;
-				tempChunkFiles = 0;
-			}
-
-			// Now add the file to the current chunk
-			if (file.size > chunkSizeBytes) {
-				// Large file gets its own chunk
-				totalChunks++;
-				tempChunkSize = 0;
-				tempChunkFiles = 0;
-			} else {
-				// Add to current chunk
-				tempChunkSize += file.size;
-				tempChunkFiles++;
-			}
-		}
-
-		// Add final chunk if there are remaining files
-		if (tempChunkSize > 0) {
-			totalChunks++;
-		}
-
-		return totalChunks;
-	}
-
-	// Function to upload files in chunks
-	async function uploadFilesInChunks(
-		filesToUpload,
-		relativePathsToUpload,
-		allRelativePaths,
-		totalFiles,
-	) {
-		// Get progress elements locally
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-		const progressSection = document.getElementById("checkingProgressSection");
-
-		// Show upload progress if there are files to upload
-		if (filesToUpload.length > 0) {
-			progressSection.style.display = "block";
-			progressMessage.textContent = "Uploading files and creating captures...";
-			progressBar.style.width = "0%";
-			progressText.textContent = "0%";
-		}
-
-		// Create AbortController for upload
-		const abortController = new AbortController();
-		currentAbortController = abortController;
-
-		// Chunk size for file uploads (50 MB per chunk)
-		const CHUNK_SIZE_BYTES = 50 * 1024 * 1024; // 50 MB in bytes
-
-		let allResults = {
-			file_upload_status: "success",
-			saved_files_count: 0,
-			captures: [],
-			errors: [],
-			message: "",
-		};
-
-		// Special case: if all files are skipped, send a single request without chunking
-		if (filesToUpload.length === 0) {
-			allResults = await handleSkippedFilesUpload(
-				allRelativePaths,
-				abortController,
-			);
-		} else {
-			// Upload files in chunks based on size (50MB per chunk)
-			let currentChunk = [];
-			let currentChunkPaths = [];
-			let currentChunkSize = 0;
-			let chunkNumber = 1;
-			let filesProcessed = 0;
-
-			// Calculate total chunks first
-			const totalChunks = calculateTotalChunks(filesToUpload, CHUNK_SIZE_BYTES);
-
-			// Now upload files in chunks
-			for (let i = 0; i < filesToUpload.length; i++) {
-				const file = filesToUpload[i];
-				const filePath = relativePathsToUpload[i];
-
-				// Check if this file would exceed the 50MB limit
-				if (
-					currentChunkSize + file.size > CHUNK_SIZE_BYTES &&
-					currentChunk.length > 0
-				) {
-					// Upload current chunk before adding this file
-					await uploadChunk(
-						currentChunk,
-						currentChunkPaths,
-						chunkNumber,
-						totalChunks,
-						filesProcessed,
-						false,
-						allResults,
-						allRelativePaths,
-						totalFiles,
-						CHUNK_SIZE_BYTES,
-					);
-					// Reset for next chunk
-					currentChunk = [];
-					currentChunkPaths = [];
-					currentChunkSize = 0;
-					chunkNumber++;
-				}
-
-				// Add file to current chunk
-				currentChunk.push(file);
-				currentChunkPaths.push(filePath);
-				currentChunkSize += file.size;
-				filesProcessed++;
-
-				// Check if this is the last file
-				if (i === filesToUpload.length - 1) {
-					// Upload final chunk
-					await uploadChunk(
-						currentChunk,
-						currentChunkPaths,
-						chunkNumber,
-						totalChunks,
-						filesProcessed,
-						true,
-						allResults,
-						allRelativePaths,
-						totalFiles,
-						CHUNK_SIZE_BYTES,
-					);
-				}
-
-				// Check if cancel was requested
-				if (cancelRequested) {
-					break;
-				}
-			}
-		}
-
-		// Check if cancellation was requested during chunk upload
-		if (cancelRequested) {
-			// Small delay to ensure UI updates are visible
-			await new Promise((resolve) => setTimeout(resolve, 100));
-			throw new Error("Upload cancelled by user");
-		}
-
-		// Check if upload was aborted due to errors
-		if (allResults.file_upload_status === "error") {
-			// Clear the reference since upload was aborted
-			currentAbortController = null;
-			// Show error results
-			showUploadResults(allResults, allResults.saved_files_count, totalFiles);
-			return allResults; // Exit early, don't continue with normal flow
-		}
-
-		// Clear the reference since upload completed
-		currentAbortController = null;
-		return allResults;
-	}
-
-	// Helper function to upload a chunk
-	async function uploadChunk(
-		chunk,
-		chunkPaths,
-		chunkNum,
-		totalChunks,
-		filesProcessed,
-		isFinalChunk,
-		allResults,
-		allRelativePaths,
-		totalFiles,
-		CHUNK_SIZE_BYTES,
-	) {
-		// Get progress elements locally
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-
-		// Update progress
-		const progress = Math.round((filesProcessed / totalFiles) * 100);
-		progressBar.style.width = `${progress}%`;
-		progressText.textContent = `${progress}%`;
-
-		if (chunk.length === 1 && chunk[0].size > CHUNK_SIZE_BYTES) {
-			// Large file upload
-			const file = chunk[0];
-			progressMessage.textContent = `Uploading large file: ${file.name} (${(file.size / (1024 * 1024)).toFixed(1)} MB)...`;
-		} else {
-			// Normal chunk upload
-			progressMessage.textContent = `Uploading chunk ${chunkNum}/${totalChunks} (${filesProcessed} files processed)...`;
-		}
-
-		// Create form data for this chunk
-		const chunkFormData = new FormData();
-
-		// Add files for this chunk
-		for (const file of chunk) {
-			chunkFormData.append("files", file);
-		}
-
-		for (const path of chunkPaths) {
-			chunkFormData.append("relative_paths", path);
-		}
-
-		// Always add all relative paths for capture creation
-		for (const path of allRelativePaths) {
-			chunkFormData.append("all_relative_paths", path);
-		}
-
-		// Add other form fields
-		const captureType = document.getElementById("captureTypeSelect").value;
-		chunkFormData.append("capture_type", captureType);
-
-		if (captureType === "drf") {
-			const channels = document.getElementById("captureChannelsInput").value;
-			chunkFormData.append("channels", channels);
-		} else if (captureType === "rh") {
-			const scanGroup = document.getElementById("captureScanGroupInput").value;
-			chunkFormData.append("scan_group", scanGroup);
-		}
-
-		// Add chunk information
-		chunkFormData.append("is_chunk", "true");
-		chunkFormData.append("chunk_number", chunkNum.toString());
-		chunkFormData.append("total_chunks", totalChunks.toString());
-
-		// Check for cancellation before starting this chunk
-		if (cancelRequested) {
-			throw new Error("Upload cancelled by user");
-		}
-
-		// Upload this chunk with timeout (longer timeout for large files)
-		const controller = new AbortController();
-		currentAbortController = controller;
-
-		const MIN_AVG_UPLOAD_RATE = 100 * 1024; // 100 KB/s minimum upload rate
-		const MIN_TIMEOUT_MS = 30000; // Minimum 30 seconds timeout
-		const total_chunk_size_bytes = chunk.reduce(
-			(total, file) => total + file.size,
-			0,
-		);
-		const calculated_timeout =
-			(total_chunk_size_bytes / MIN_AVG_UPLOAD_RATE) * 1000;
-		const timeout = Math.max(calculated_timeout, MIN_TIMEOUT_MS); // Use at least 30 seconds
-
-		const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-		let response;
-		let chunkResult;
-
-		const getCSRFToken = () => {
-			const metaToken = document.querySelector('meta[name="csrf-token"]');
-			if (metaToken) return metaToken.getAttribute("content");
-			const inputToken = document.querySelector('[name="csrfmiddlewaretoken"]');
-			if (inputToken) return inputToken.value;
-			const cookies = document.cookie.split(";");
-			for (let i = 0; i < cookies.length; i++) {
-				const cookie = cookies[i].trim();
-				if (cookie.startsWith("csrftoken=")) {
-					return cookie.substring("csrftoken=".length);
-				}
-			}
-			return "";
-		};
-
-		const uploadUrl =
-			document.querySelector("[data-upload-url]")?.dataset.uploadUrl ||
-			"/users/upload-capture/";
-
-		try {
-			response = await fetch(uploadUrl, {
-				method: "POST",
-				headers: {
-					"X-CSRFToken": getCSRFToken(),
-				},
-				body: chunkFormData,
-				signal: controller.signal,
-			});
-
-			clearTimeout(timeoutId);
-
-			if (!response.ok) {
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			chunkResult = await response.json();
-		} catch (error) {
-			clearTimeout(timeoutId);
-			if (error.name === "AbortError") {
-				throw new Error("Upload timeout - connection may be lost");
-			}
-			throw error;
-		}
-
-		// Merge results
-		if (chunkResult.saved_files_count !== undefined) {
-			allResults.saved_files_count += chunkResult.saved_files_count;
-		}
-
-		// Collect captures from the final chunk
-		if (chunkResult.captures && isFinalChunk) {
-			allResults.captures = allResults.captures.concat(chunkResult.captures);
-		}
-
-		// Also collect any message from the final chunk
-		if (chunkResult.message && isFinalChunk) {
-			allResults.message = chunkResult.message;
-		}
-
-		if (chunkResult.errors) {
-			allResults.errors = allResults.errors.concat(chunkResult.errors);
-		}
-
-		// Check if any chunk failed
-		if (chunkResult.file_upload_status === "error") {
-			allResults.file_upload_status = "error";
-			allResults.message = chunkResult.message || "Upload failed";
-			const progressMessage = document.getElementById("progressMessage");
-			if (progressMessage) {
-				progressMessage.textContent =
-					"Upload aborted due to errors. Please check the results.";
-			}
-			throw new Error(`Upload failed: ${chunkResult.message}`);
-		}
-		if (chunkResult.file_upload_status === "success") {
-			// Only update to success if this is the final chunk
-			if (isFinalChunk) {
-				allResults.file_upload_status = "success";
-			}
-		}
-	}
-
-	const uploadForm = document.getElementById("uploadCaptureForm");
-	if (uploadForm) {
-		uploadForm.addEventListener("submit", async (e) => {
-			e.preventDefault();
-
-			// Set processing state
-			isProcessing = true;
-			uploadInProgress = true;
-			cancelRequested = false; // Reset cancel flag for new upload
-			sessionStorage.setItem("uploadInProgress", "true");
-
-			// Check if files are selected
-			if (!window.selectedFiles || window.selectedFiles.length === 0) {
-				alert("Please select files to upload.");
-				return;
-			}
-
-			const files = window.selectedFiles;
-
-			// Check for large files before duplicate checking
-			if (checkForLargeFiles(files, cancelButton, submitButton)) {
-				return;
-			}
-
-			// Check files for duplicates
-			await checkFilesForDuplicates(files, cancelButton, submitButton);
-
-			// Prepare files for upload (only non-skipped files)
-			const filesToUpload = [];
-			const relativePathsToUpload = [];
-			// Always collect all relative paths for capture creation, even for skipped files
-			const allRelativePaths = [];
-			let skippedFilesCount = 0;
-
-			for (const file of files) {
-				let directory = "/";
-				if (file.webkitRelativePath) {
-					const pathParts = file.webkitRelativePath.split("/");
-					if (pathParts.length > 1) {
-						pathParts.pop();
-						directory = `/${pathParts.join("/")}`;
-					}
-				}
-
-				const fileKey = `${directory}/${file.name}`;
-				const relativePath = file.webkitRelativePath || file.name;
-
-				// Add to all paths for capture creation
-				allRelativePaths.push(relativePath);
-
-				// Only add to upload list if not skipped
-				if (!window.filesToSkip.has(fileKey)) {
-					filesToUpload.push(file);
-					relativePathsToUpload.push(relativePath);
-				} else {
-					skippedFilesCount++;
-				}
-			}
-
-			// Upload files in chunks
-			try {
-				const uploadResults = await uploadFilesInChunks(
-					filesToUpload,
-					relativePathsToUpload,
-					allRelativePaths,
-					filesToUpload.length,
-				);
-
-				// Clear the reference since upload completed
-				currentAbortController = null;
-
-				// Show results
-				showUploadResults(
-					uploadResults,
-					uploadResults.saved_files_count,
-					files.length,
-					skippedFilesCount,
-				);
-
-				// Don't auto-reload for successful uploads - let user close modal first
-			} catch (error) {
-				if (cancelRequested) {
-					// Check if this was cancelled during duplicate checking (no files uploaded yet)
-					if (!uploadInProgress) {
-						// Already showed alert in checkFilesForDuplicates function
-						// No need to reload since no files were uploaded
-					} else {
-						alert(
-							"Upload cancelled. Any files uploaded before cancellation have been saved.",
-						);
-						// Reload page after cancellation
-						setTimeout(() => {
-							window.location.reload();
-						}, 1000);
-					}
-				} else if (error.name === "AbortError") {
-					alert(
-						"Upload was interrupted. Any files uploaded before the interruption have been saved.",
-					);
-					// Reload page after interruption
-					setTimeout(() => {
-						window.location.reload();
-					}, 1000);
-				} else if (
-					error.name === "TypeError" &&
-					error.message.includes("fetch")
-				) {
-					// Don't show alert for network errors after page refresh
-					if (uploadInProgress || sessionStorage.getItem("uploadInProgress")) {
-						// Suppressing network error alert during active upload
-					} else {
-						alert(
-							"Network error during upload. Please check your connection and try again.",
-						);
-					}
-				} else {
-					alert(`Upload failed: ${error.message}`);
-					// Reload page after other errors
-					setTimeout(() => {
-						window.location.reload();
-					}, 1000);
-				}
-			} finally {
-				// Clean up UI state - ensure this always runs
-				resetUIState();
-			}
-		});
-	}
-
-	// Function to reset UI state
-	function resetUIState() {
-		// Reset submit button
-		if (submitButton) {
-			submitButton.disabled = false;
-		}
-
-		// Hide progress section
-		const progressSection = document.getElementById("checkingProgressSection");
-		if (progressSection) {
-			progressSection.style.display = "none";
-		}
-
-		// Reset cancel button
-		if (cancelButton) {
-			cancelButton.textContent = "Cancel";
-			cancelButton.classList.remove("btn-warning");
-			cancelButton.disabled = false;
-		}
-
-		// Reset close button
-		if (closeButton) {
-			closeButton.disabled = false;
-			closeButton.style.opacity = "1";
-		}
-
-		// Reset progress elements
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-
-		if (progressBar) progressBar.style.width = "0%";
-		if (progressText) progressText.textContent = "0%";
-		if (progressMessage) progressMessage.textContent = "";
-
-		// Reset state flags
-		isProcessing = false;
-		uploadInProgress = false;
-		cancelRequested = false;
-
-		// Clear session storage
-		sessionStorage.removeItem("uploadInProgress");
-
-		// Clear abort controller
-		currentAbortController = null;
-	}
-
-	// Function to show upload results
-	function showUploadResults(
-		result,
-		uploadedCount,
-		totalCount,
-		skippedCount = 0,
-	) {
-		// Check if page was refreshed during upload
-		if (!uploadInProgress && result.file_upload_status === "error") {
-			resetUIState(); // Ensure UI is reset even if modal is not shown
-			return;
-		}
-
-		const modalBody = document.getElementById("uploadResultModalBody");
-		const resultModalEl = document.getElementById("uploadResultModal");
-		const modal = new bootstrap.Modal(resultModalEl);
-
-		// Close the upload modal before showing result modal
-		const uploadModal = bootstrap.Modal.getInstance(
-			document.getElementById("uploadCaptureModal"),
-		);
-		if (uploadModal) {
-			uploadModal.hide();
-		}
-
-		let msg = "";
-
-		if (result.file_upload_status === "success") {
-			// Use frontend accumulated count for accuracy, but include backend message for additional info
-			if (uploadedCount === 0 && totalCount > 0) {
-				// All files were skipped
-				msg = `<b>Upload complete!</b><br />All ${totalCount} files already existed on the server.`;
-			} else if (skippedCount > 0) {
-				// Some files were uploaded, some were skipped
-				msg = `<b>Upload complete!</b><br />Files uploaded: <strong>${uploadedCount}</strong> / ${totalCount}`;
-				msg += `<br />Files already exist: <strong>${skippedCount}</strong>`;
-			} else {
-				// All files were uploaded (no skipped files)
-				msg = `<b>Upload complete!</b><br />Files uploaded: <strong>${uploadedCount}</strong> / ${totalCount}`;
-			}
-
-			if (result.captures && result.captures.length > 0) {
-				const uuids = result.captures
-					.map((uuid) => `<li>${uuid}</li>`)
-					.join("");
-				msg += `<br />Created capture UUID(s):<ul>${uuids}</ul>`;
-			}
-
-			if (result.errors && result.errors.length > 0) {
-				const errs = result.errors.map((e) => `<li>${e}</li>`).join("");
-				msg += `<br /><b>Errors:</b><ul>${errs}</ul>`;
-				msg += "<br /><b>Please check details and upload again.</b>";
-			}
-		} else {
-			// Upload failed - show error message and prompt to remove error files
-			msg = "<b>Upload Failed</b><br />";
-			if (result.message) {
-				msg += `${result.message}<br /><br />`;
-			}
-			msg += "<b>Please check file validity and try again.</b>";
-			if (result.errors && result.errors.length > 0) {
-				const errs = result.errors.map((e) => `<li>${e}</li>`).join("");
-				msg += `<br /><br /><b>Error Details:</b><ul>${errs}</ul>`;
-			}
-		}
-
-		modalBody.innerHTML = msg;
-		modal.show();
-
-		// Add event listener to reload page when result modal is closed (only for successful uploads)
-		if (result.file_upload_status === "success") {
-			resultModalEl.addEventListener(
-				"hidden.bs.modal",
-				() => {
-					window.location.reload();
-				},
-				{ once: true },
-			); // Only trigger once per modal instance
-		}
-	}
-});
-
-// Capture Type Selection JavaScript
-document.addEventListener("DOMContentLoaded", () => {
-	const captureTypeSelect = document.getElementById("captureTypeSelect");
-	const channelInputGroup = document.getElementById("channelInputGroup");
-	const scanGroupInputGroup = document.getElementById("scanGroupInputGroup");
-	const captureChannelsInput = document.getElementById("captureChannelsInput");
-	const captureScanGroupInput = document.getElementById(
-		"captureScanGroupInput",
-	);
-
-	if (captureTypeSelect) {
-		captureTypeSelect.addEventListener("change", function () {
-			const selectedType = this.value;
-
-			// Hide both input groups initially
-			if (channelInputGroup)
-				channelInputGroup.classList.add("hidden-input-group");
-			if (scanGroupInputGroup)
-				scanGroupInputGroup.classList.add("hidden-input-group");
-
-			// Clear required attributes
-			if (captureChannelsInput)
-				captureChannelsInput.removeAttribute("required");
-			if (captureScanGroupInput)
-				captureScanGroupInput.removeAttribute("required");
-
-			// Show appropriate input group based on selection
-			if (selectedType === "drf") {
-				if (channelInputGroup)
-					channelInputGroup.classList.remove("hidden-input-group");
-				if (captureChannelsInput)
-					captureChannelsInput.setAttribute("required", "required");
-			} else if (selectedType === "rh") {
-				if (scanGroupInputGroup)
-					scanGroupInputGroup.classList.remove("hidden-input-group");
-				// scan_group is optional for RadioHound captures
-			}
-		});
-	}
-
-	// Reset form when modal is hidden
-	const uploadModal = document.getElementById("uploadCaptureModal");
-	if (uploadModal) {
-		uploadModal.addEventListener("hidden.bs.modal", () => {
-			// Reset the form
-			const form = document.getElementById("uploadCaptureForm");
-			if (form) {
-				form.reset();
-			}
-
-			// Hide input groups
-			if (channelInputGroup)
-				channelInputGroup.classList.add("hidden-input-group");
-			if (scanGroupInputGroup)
-				scanGroupInputGroup.classList.add("hidden-input-group");
-
-			// Clear required attributes
-			if (captureChannelsInput)
-				captureChannelsInput.removeAttribute("required");
-			if (captureScanGroupInput)
-				captureScanGroupInput.removeAttribute("required");
-
-			// Clear file check status
-			const checkStatusDiv = document.getElementById("fileCheckStatus");
-			if (checkStatusDiv) {
-				checkStatusDiv.style.display = "none";
-			}
-
-			// Clear status alerts and file details button
-			const uploadModalBody = document.querySelector(
-				"#uploadCaptureModal .modal-body",
-			);
-			if (uploadModalBody) {
-				const existingAlerts = uploadModalBody.querySelectorAll(
-					".alert.alert-warning, .alert.alert-success",
-				);
-				for (const alert of existingAlerts) {
-					if (
-						alert.textContent.includes("will be skipped") ||
-						alert.textContent.includes("will be uploaded")
-					) {
-						alert.remove();
-					}
-				}
-
-				// Remove file details button
-				const detailsLink = uploadModalBody.querySelector(
-					"#viewFileDetailsLink",
-				);
-				if (detailsLink) {
-					detailsLink.parentNode.remove();
-				}
-			}
-
-			// Clear global variables
-			if (window.filesToSkip) window.filesToSkip.clear();
-			if (window.fileCheckResults) window.fileCheckResults.clear();
-		});
-	}
-});
-
-// BLAKE3 hash calculation for file deduplication
-// Global variable to track files that should be skipped
-window.filesToSkip = new Set();
-window.fileCheckResults = new Map(); // Store detailed results for each file
-
-document.addEventListener("DOMContentLoaded", () => {
-	const modal = document.getElementById("uploadCaptureModal");
-	if (!modal) {
-		console.warn("uploadCaptureModal not found");
-		return;
-	}
-
-	modal.addEventListener("shown.bs.modal", () => {
-		const fileInput = document.getElementById("captureFileInput");
-		if (!fileInput) {
-			console.warn("captureFileInput not found");
-			return;
-		}
-
-		// Remove any previous handler to avoid duplicates
-		fileInput.removeEventListener("change", window._blake3CaptureHandler);
-
-		// Simple file handler that just stores the selected files
-		window._blake3CaptureHandler = async (event) => {
-			const files = event.target.files;
-			if (!files || files.length === 0) {
-				return;
-			}
-
-			// Store the selected files for later processing
-			window.selectedFiles = Array.from(files);
-		};
-
-		fileInput.addEventListener("change", window._blake3CaptureHandler);
-	});
-});
diff --git a/gateway/sds_gateway/static/js/files-ui.js b/gateway/sds_gateway/static/js/files-ui.js
deleted file mode 100644
index c29548110..000000000
--- a/gateway/sds_gateway/static/js/files-ui.js
+++ /dev/null
@@ -1,857 +0,0 @@
-/**
- * Files UI Components
- * Manages capture type selection and page initialization
- */
-
-// Error handling utilities
-const ErrorHandler = {
-	shownMessages: new Set(), // Track shown messages to prevent duplicates
-
-	showError(message, context = "", error = null) {
-		// Create a key for deduplication based on message and context
-		const messageKey = `${context}:${message}`;
-
-		// Check if this exact message has already been shown
-		if (this.shownMessages.has(messageKey)) {
-			// Still log to console for debugging, but don't show UI message
-			if (error) {
-				console.error(`FilesUI Error [${context}]:`, {
-					message: error.message,
-					stack: error.stack,
-					userMessage: message,
-					timestamp: new Date().toISOString(),
-					userAgent: navigator.userAgent,
-				});
-			} else {
-				console.warn(`FilesUI Warning [${context}]:`, message);
-			}
-			return;
-		}
-
-		// Mark this message as shown
-		this.shownMessages.add(messageKey);
-
-		// Log error details for debugging
-		if (error) {
-			console.error(`FilesUI Error [${context}]:`, {
-				message: error.message,
-				stack: error.stack,
-				userMessage: message,
-				timestamp: new Date().toISOString(),
-				userAgent: navigator.userAgent,
-			});
-		} else {
-			console.warn(`FilesUI Warning [${context}]:`, message);
-		}
-
-		// Show user-friendly error message
-		if (window.components?.showError) {
-			window.components.showError(message);
-		} else {
-			// Fallback: show in console and try to display on page
-			this.showFallbackError(message);
-		}
-	},
-
-	showFallbackError(message) {
-		// Try to find an error display area
-		const errorContainer = document.querySelector(
-			".error-container, .alert-container, .files-container",
-		);
-		if (errorContainer) {
-			const errorDiv = document.createElement("div");
-			errorDiv.className = "alert alert-danger alert-dismissible fade show";
-			errorDiv.innerHTML = `
-				${message}
-				<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-			`;
-			errorContainer.insertBefore(errorDiv, errorContainer.firstChild);
-		}
-	},
-
-	getUserFriendlyErrorMessage(error, context = "") {
-		if (!error) return "An unexpected error occurred";
-
-		// Handle common error types
-		if (error.name === "TypeError" && error.message.includes("Cannot read")) {
-			return "Configuration error: Some components are not properly loaded";
-		}
-		if (error.name === "ReferenceError") {
-			return "Component error: Required functionality is not available";
-		}
-
-		// Default user-friendly message
-		return error.message || "An unexpected error occurred";
-	},
-};
-
-// Browser compatibility checker
-const BrowserCompatibility = {
-	checkRequiredFeatures() {
-		const requiredFeatures = {
-			"DOM API": "document" in window && "addEventListener" in document,
-			"Console API": "console" in window && "log" in console,
-			Map: "Map" in window,
-			Set: "Set" in window,
-			"Template Literals": (() => {
-				try {
-					// Test template literal support without eval
-					const test = `test${1}`;
-					return test === "test1";
-				} catch {
-					return false;
-				}
-			})(),
-		};
-
-		const missingFeatures = Object.entries(requiredFeatures)
-			.filter(([name, supported]) => !supported)
-			.map(([name]) => name);
-
-		if (missingFeatures.length > 0) {
-			console.warn("Missing browser features:", missingFeatures);
-			return false;
-		}
-
-		return true;
-	},
-
-	checkBootstrapSupport() {
-		return (
-			"bootstrap" in window ||
-			typeof bootstrap !== "undefined" ||
-			document.querySelector("[data-bs-toggle]") !== null
-		);
-	},
-};
-
-/**
- * Capture Type Selection Handler
- * Manages capture type dropdown and conditional form fields
- */
-class CaptureTypeSelector {
-	constructor() {
-		this.boundHandlers = new Map(); // Track event handlers for cleanup
-		this.initializeElements();
-		this.setupEventListeners();
-	}
-
-	initializeElements() {
-		this.captureTypeSelect = document.getElementById("captureTypeSelect");
-		this.channelInputGroup = document.getElementById("channelInputGroup");
-		this.scanGroupInputGroup = document.getElementById("scanGroupInputGroup");
-		this.captureChannelsInput = document.getElementById("captureChannelsInput");
-		this.captureScanGroupInput = document.getElementById(
-			"captureScanGroupInput",
-		);
-		this.uploadModal = document.getElementById("uploadCaptureModal");
-
-		// Log which elements were found for debugging
-		console.log("CaptureTypeSelector elements found:", {
-			captureTypeSelect: !!this.captureTypeSelect,
-			channelInputGroup: !!this.channelInputGroup,
-			scanGroupInputGroup: !!this.scanGroupInputGroup,
-			captureChannelsInput: !!this.captureChannelsInput,
-			captureScanGroupInput: !!this.captureScanGroupInput,
-			uploadModal: !!this.uploadModal,
-		});
-	}
-
-	setupEventListeners() {
-		// Ensure boundHandlers is initialized
-		if (!this.boundHandlers) {
-			this.boundHandlers = new Map();
-		}
-
-		if (this.captureTypeSelect) {
-			const changeHandler = (e) => this.handleTypeChange(e);
-			this.boundHandlers.set(this.captureTypeSelect, changeHandler);
-			this.captureTypeSelect.addEventListener("change", changeHandler);
-		}
-
-		if (this.uploadModal) {
-			const hiddenHandler = () => this.resetForm();
-			this.boundHandlers.set(this.uploadModal, hiddenHandler);
-			this.uploadModal.addEventListener("hidden.bs.modal", hiddenHandler);
-		}
-	}
-
-	handleTypeChange(event) {
-		const selectedType = event.target.value;
-
-		// Validate capture type
-		if (!this.validateCaptureType(selectedType)) {
-			ErrorHandler.showError(
-				"Invalid capture type selected",
-				"capture-type-validation",
-			);
-			return;
-		}
-
-		// Hide both input groups initially
-		this.hideInputGroups();
-
-		// Clear required attributes
-		this.clearRequiredAttributes();
-
-		// Show appropriate input group based on selection
-		if (selectedType === "drf") {
-			this.showChannelInput();
-		} else if (selectedType === "rh") {
-			this.showScanGroupInput();
-		}
-	}
-
-	hideInputGroups() {
-		if (this.channelInputGroup) {
-			this.channelInputGroup.classList.add("hidden-input-group");
-		}
-		if (this.scanGroupInputGroup) {
-			this.scanGroupInputGroup.classList.add("hidden-input-group");
-		}
-	}
-
-	clearRequiredAttributes() {
-		if (this.captureChannelsInput) {
-			this.captureChannelsInput.removeAttribute("required");
-		}
-		if (this.captureScanGroupInput) {
-			this.captureScanGroupInput.removeAttribute("required");
-		}
-	}
-
-	showChannelInput() {
-		if (this.channelInputGroup) {
-			this.channelInputGroup.classList.remove("hidden-input-group");
-		}
-		if (this.captureChannelsInput) {
-			this.captureChannelsInput.setAttribute("required", "required");
-		}
-	}
-
-	showScanGroupInput() {
-		if (this.scanGroupInputGroup) {
-			this.scanGroupInputGroup.classList.remove("hidden-input-group");
-		}
-		// scan_group is optional for RadioHound captures, so no required attribute
-	}
-
-	// Input validation methods
-	validateCaptureType(type) {
-		const validTypes = ["drf", "rh"];
-		return validTypes.includes(type);
-	}
-
-	validateChannelInput(channels) {
-		if (!channels || typeof channels !== "string") return false;
-		// Basic validation for channel input (can be enhanced based on requirements)
-		return channels.trim().length > 0 && channels.length <= 1000;
-	}
-
-	validateScanGroupInput(scanGroup) {
-		if (!scanGroup || typeof scanGroup !== "string") return false;
-		// Basic validation for scan group input
-		return scanGroup.trim().length > 0 && scanGroup.length <= 255;
-	}
-
-	sanitizeInput(input) {
-		if (!input || typeof input !== "string") return "";
-		// Remove potentially dangerous characters
-		return input.replace(/[<>:"/\\|?*]/g, "_").trim();
-	}
-
-	// Memory management and cleanup
-	cleanup() {
-		// Remove all bound event handlers
-		for (const [element, handler] of this.boundHandlers) {
-			if (element?.removeEventListener) {
-				element.removeEventListener("change", handler);
-				element.removeEventListener("hidden.bs.modal", handler);
-			}
-		}
-		this.boundHandlers.clear();
-		console.log("CaptureTypeSelector cleanup completed");
-	}
-
-	resetForm() {
-		// Reset the form
-		const form = document.getElementById("uploadCaptureForm");
-		if (form) {
-			form.reset();
-		}
-
-		// Hide input groups
-		this.hideInputGroups();
-
-		// Clear required attributes
-		this.clearRequiredAttributes();
-
-		// Clear global variables if they exist
-		this.cleanupGlobalState();
-	}
-
-	// Better global state management
-	cleanupGlobalState() {
-		const globalVars = ["filesToSkip", "fileCheckResults", "selectedFiles"];
-
-		for (const varName of globalVars) {
-			if (window[varName]) {
-				if (typeof window[varName].clear === "function") {
-					window[varName].clear();
-				} else if (Array.isArray(window[varName])) {
-					window[varName].length = 0;
-				} else {
-					window[varName] = null;
-				}
-				console.log(`Cleaned up global variable: ${varName}`);
-			}
-		}
-	}
-}
-
-/**
- * Files Page Initialization
- * Initializes modal managers, capture handlers, and user search components
- */
-class FilesPageInitializer {
-	constructor() {
-		this.boundHandlers = new Map(); // Track event handlers for cleanup
-		this.activeHandlers = new Set(); // Track active component handlers
-		this.initializeComponents();
-	}
-
-	initializeComponents() {
-		try {
-			this.initializeModalManager();
-			this.initializeCapturesTableManager();
-			this.initializeUserSearchHandlers();
-		} catch (error) {
-			ErrorHandler.showError(
-				"Failed to initialize page components",
-				"component-initialization",
-				error,
-			);
-		}
-	}
-
-	initializeModalManager() {
-		// Initialize ModalManager for capture modal
-		let modalManager = null;
-		try {
-			if (window.ModalManager) {
-				modalManager = new window.ModalManager({
-					modalId: "capture-modal",
-					modalBodyId: "capture-modal-body",
-					modalTitleId: "capture-modal-label",
-				});
-
-				this.modalManager = modalManager;
-				console.log("ModalManager initialized successfully");
-			} else {
-				ErrorHandler.showError(
-					"Modal functionality is not available. Some features may be limited.",
-					"modal-initialization",
-				);
-			}
-		} catch (error) {
-			ErrorHandler.showError(
-				"Failed to initialize modal functionality",
-				"modal-initialization",
-				error,
-			);
-		}
-	}
-
-	initializeCapturesTableManager() {
-		// Initialize CapturesTableManager for capture edit/download functionality
-		try {
-			if (window.CapturesTableManager) {
-				window.capturesTableManager = new window.CapturesTableManager({
-					modalHandler: this.modalManager,
-				});
-				console.log("CapturesTableManager initialized successfully");
-			} else {
-				ErrorHandler.showError(
-					"Table management functionality is not available. Some features may be limited.",
-					"table-initialization",
-				);
-			}
-		} catch (error) {
-			ErrorHandler.showError(
-				"Failed to initialize table management functionality",
-				"table-initialization",
-				error,
-			);
-		}
-	}
-
-	initializeUserSearchHandlers() {
-		// Create a UserSearchHandler for each share modal
-		const shareModals = document.querySelectorAll(".modal[data-item-uuid]");
-
-		// Skip initialization if no share modals exist on this page
-		if (shareModals.length === 0) {
-			return;
-		}
-
-		// Check if UserSearchHandler is available before trying to initialize
-		if (!window.UserSearchHandler) {
-			console.warn(
-				"UserSearchHandler not available. Share functionality will not work.",
-			);
-			return;
-		}
-
-		for (const modal of shareModals) {
-			this.setupUserSearchHandler(modal);
-		}
-	}
-
-	setupUserSearchHandler(modal) {
-		try {
-			// Ensure boundHandlers and activeHandlers are initialized
-			if (!this.boundHandlers) {
-				this.boundHandlers = new Map();
-			}
-			if (!this.activeHandlers) {
-				this.activeHandlers = new Set();
-			}
-
-			// Validate modal attributes
-			const itemUuid = modal.getAttribute("data-item-uuid");
-			const itemType = modal.getAttribute("data-item-type");
-
-			if (!this.validateModalAttributes(itemUuid, itemType)) {
-				ErrorHandler.showError(
-					"Invalid modal configuration",
-					"user-search-setup",
-				);
-				return;
-			}
-
-			const handler = new window.UserSearchHandler();
-			// Store the handler on the modal element
-			modal.userSearchHandler = handler;
-			this.activeHandlers.add(handler);
-
-			// Create bound event handlers for cleanup
-			const showHandler = () => {
-				if (modal.userSearchHandler) {
-					modal.userSearchHandler.setItemInfo(itemUuid, itemType);
-					modal.userSearchHandler.init();
-				}
-			};
-
-			const hideHandler = () => {
-				if (modal.userSearchHandler) {
-					modal.userSearchHandler.resetAll();
-				}
-			};
-
-			// Store handlers for cleanup
-			this.boundHandlers.set(modal, {
-				show: showHandler,
-				hide: hideHandler,
-			});
-
-			// On modal show, set the item info and call init()
-			modal.addEventListener("show.bs.modal", showHandler);
-
-			// On modal hide, reset all selections and entered data
-			modal.addEventListener("hidden.bs.modal", hideHandler);
-
-			console.log(`UserSearchHandler initialized for ${itemType}: ${itemUuid}`);
-		} catch (error) {
-			ErrorHandler.showError(
-				"Failed to setup user search functionality",
-				"user-search-setup",
-				error,
-			);
-		}
-	}
-
-	/**
-	 * Get initialized modal manager
-	 * @returns {Object|null} - The modal manager instance
-	 */
-	getModalManager() {
-		return this.modalManager;
-	}
-
-	/**
-	 * Get captures table manager
-	 * @returns {Object|null} - The captures table manager instance
-	 */
-	getCapturesTableManager() {
-		return window.capturesTableManager;
-	}
-
-	// Validation methods
-	validateModalAttributes(uuid, type) {
-		if (!uuid || typeof uuid !== "string") {
-			console.warn("Invalid UUID in modal attributes:", uuid);
-			return false;
-		}
-
-		if (!type || typeof type !== "string") {
-			console.warn("Invalid type in modal attributes:", type);
-			return false;
-		}
-
-		// Validate UUID format (basic check)
-		const uuidRegex =
-			/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-		if (!uuidRegex.test(uuid)) {
-			console.warn("Invalid UUID format in modal attributes:", uuid);
-			return false;
-		}
-
-		// Validate type
-		const validTypes = ["capture", "dataset", "file"];
-		if (!validTypes.includes(type)) {
-			console.warn("Invalid type in modal attributes:", type);
-			return false;
-		}
-
-		return true;
-	}
-
-	// Memory management and cleanup
-	cleanup() {
-		// Remove all bound event handlers
-		for (const [element, handlers] of this.boundHandlers) {
-			if (element?.removeEventListener) {
-				if (handlers.show) {
-					element.removeEventListener("show.bs.modal", handlers.show);
-				}
-				if (handlers.hide) {
-					element.removeEventListener("hidden.bs.modal", handlers.hide);
-				}
-			}
-		}
-		this.boundHandlers.clear();
-
-		// Cleanup active handlers
-		for (const handler of this.activeHandlers) {
-			if (handler && typeof handler.cleanup === "function") {
-				try {
-					handler.cleanup();
-				} catch (error) {
-					console.warn("Error during handler cleanup:", error);
-				}
-			}
-		}
-		this.activeHandlers.clear();
-
-		console.log("FilesPageInitializer cleanup completed");
-	}
-}
-
-// Initialize when DOM is loaded
-/**
- * FileUploadHandler
- * Handles individual file uploads (not capture uploads)
- */
-class FileUploadHandler {
-	constructor() {
-		this.uploadForm = document.getElementById("uploadFileForm");
-		this.fileInput = document.getElementById("fileInput");
-		this.folderInput = document.getElementById("folderInput");
-		this.submitBtn = document.getElementById("uploadFileSubmitBtn");
-		this.clearBtn = document.getElementById("clearUploadBtn");
-		this.uploadText = this.submitBtn?.querySelector(".upload-text");
-		this.uploadSpinner = this.submitBtn?.querySelector(".upload-spinner");
-		this.validationFeedback = document.getElementById(
-			"uploadValidationFeedback",
-		);
-
-		// Enable submit button when files or folders are selected
-		if (this.fileInput) {
-			this.fileInput.addEventListener("change", () =>
-				this.updateSubmitButton(),
-			);
-		}
-		if (this.folderInput) {
-			this.folderInput.addEventListener("change", () =>
-				this.updateSubmitButton(),
-			);
-		}
-
-		// Clear button handler
-		if (this.clearBtn) {
-			this.clearBtn.addEventListener("click", () => this.clearModal());
-		}
-
-		if (this.uploadForm) {
-			this.uploadForm.addEventListener("submit", (e) => this.handleSubmit(e));
-		}
-	}
-
-	updateSubmitButton() {
-		if (this.submitBtn) {
-			const hasFiles = this.fileInput?.files.length > 0;
-			const hasFolders = this.folderInput?.files.length > 0;
-			this.submitBtn.disabled = !hasFiles && !hasFolders;
-
-			// Hide validation feedback when files are selected
-			if (hasFiles || hasFolders) {
-				this.hideValidationFeedback();
-			}
-		}
-	}
-
-	showValidationFeedback() {
-		if (this.validationFeedback) {
-			this.validationFeedback.classList.add("d-block");
-		}
-		// Add invalid styling to inputs
-		this.fileInput?.classList.add("is-invalid");
-		this.folderInput?.classList.add("is-invalid");
-	}
-
-	hideValidationFeedback() {
-		if (this.validationFeedback) {
-			this.validationFeedback.classList.remove("d-block");
-		}
-		// Remove invalid styling from inputs
-		this.fileInput?.classList.remove("is-invalid");
-		this.folderInput?.classList.remove("is-invalid");
-	}
-
-	clearModal() {
-		// Reset form
-		if (this.uploadForm) {
-			this.uploadForm.reset();
-		}
-		// Explicitly clear file inputs (form.reset() doesn't always clear file inputs)
-		if (this.fileInput) {
-			this.fileInput.value = "";
-		}
-		if (this.folderInput) {
-			this.folderInput.value = "";
-		}
-		// Hide validation feedback
-		this.hideValidationFeedback();
-		// Update submit button state
-		this.updateSubmitButton();
-	}
-
-	async handleSubmit(event) {
-		event.preventDefault();
-
-		const files = Array.from(this.fileInput?.files || []);
-		const folderFiles = Array.from(this.folderInput?.files || []);
-
-		if (files.length === 0 && folderFiles.length === 0) {
-			this.showValidationFeedback();
-			return;
-		}
-
-		this.setUploadingState(true);
-
-		try {
-			// Debug: Check CSRF token availability
-			console.log("CSRF Token:", window.csrfToken);
-			console.log("Upload URL:", window.uploadFilesUrl);
-
-			// Try multiple ways to get CSRF token
-			let csrfToken = window.csrfToken;
-			if (!csrfToken) {
-				// Fallback to DOM query
-				const csrfInput = document.querySelector("[name=csrfmiddlewaretoken]");
-				csrfToken = csrfInput ? csrfInput.value : null;
-			}
-
-			if (!csrfToken) {
-				throw new Error("CSRF token not found");
-			}
-
-			const formData = new FormData();
-			const allFiles = [...files, ...folderFiles];
-			const allRelativePaths = [];
-
-			// Add all files to formData
-			for (const file of allFiles) {
-				formData.append("files", file);
-				// Use webkitRelativePath for folder files, filename for individual files
-				const relativePath = file.webkitRelativePath || file.name;
-				allRelativePaths.push(relativePath);
-			}
-
-			// Add relative paths
-			for (const relativePath of allRelativePaths) {
-				formData.append("relative_paths", relativePath);
-			}
-			for (const relativePath of allRelativePaths) {
-				formData.append("all_relative_paths", relativePath);
-			}
-
-			// Prevent capture creation when uploading files only
-			formData.append("capture_type", "");
-			formData.append("channels", "");
-			formData.append("scan_group", "");
-			formData.append("csrfmiddlewaretoken", csrfToken);
-
-			const response = await fetch(window.uploadFilesUrl, {
-				method: "POST",
-				body: formData,
-				headers: {
-					"X-CSRFToken": csrfToken,
-				},
-			});
-
-			const result = await response.json();
-
-			if (response.ok) {
-				// Show success message
-				const fileCount = allFiles.length;
-				const successMsg =
-					fileCount === 1
-						? "1 file uploaded successfully!"
-						: `${fileCount} files uploaded successfully!`;
-				this.showResult("success", successMsg);
-				// Clear file inputs
-				this.clearModal();
-				// Close modal
-				const modal = bootstrap.Modal.getInstance(
-					document.getElementById("uploadFileModal"),
-				);
-				if (modal) modal.hide();
-				// Refresh the file list
-				if (window.fileManager) {
-					window.fileManager.loadFiles();
-				}
-			} else {
-				this.showResult(
-					"error",
-					result.error || "Upload failed. Please try again.",
-				);
-			}
-		} catch (error) {
-			console.error("Upload error:", error);
-			this.showResult(
-				"error",
-				"Upload failed. Please check your connection and try again.",
-			);
-		} finally {
-			this.setUploadingState(false);
-		}
-	}
-
-	setUploadingState(uploading) {
-		if (this.submitBtn) {
-			this.submitBtn.disabled = uploading;
-		}
-		if (this.uploadText && this.uploadSpinner) {
-			this.uploadText.classList.toggle("d-none", uploading);
-			this.uploadSpinner.classList.toggle("d-none", !uploading);
-		}
-	}
-
-	showResult(type, message) {
-		// Show result in the upload result modal
-		const resultModal = document.getElementById("uploadResultModal");
-		const resultBody = document.getElementById("uploadResultModalBody");
-
-		if (resultModal && resultBody) {
-			resultBody.innerHTML = `
-				<div class="alert alert-${type === "success" ? "success" : "danger"}">
-					${message}
-				</div>
-			`;
-			const modal = new bootstrap.Modal(resultModal);
-			modal.show();
-		} else {
-			// Fallback to alert
-			alert(message);
-		}
-	}
-
-	cleanup() {
-		if (this.uploadForm) {
-			this.uploadForm.removeEventListener("submit", this.handleSubmit);
-		}
-	}
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-	// Check browser compatibility before proceeding
-	if (!BrowserCompatibility.checkRequiredFeatures()) {
-		ErrorHandler.showError(
-			"Your browser doesn't support required features. Please use a modern browser.",
-			"browser-compatibility",
-		);
-		return;
-	}
-
-	// Check Bootstrap support
-	if (!BrowserCompatibility.checkBootstrapSupport()) {
-		console.warn(
-			"Bootstrap not detected. Some UI features may not work properly.",
-		);
-	}
-
-	try {
-		// Check if we're on a page that needs these components
-		const needsCaptureSelector =
-			document.getElementById("captureTypeSelect") ||
-			document.getElementById("uploadCaptureModal");
-		const needsPageInitializer =
-			document.querySelector(".modal[data-item-uuid]") ||
-			document.getElementById("capture-modal");
-		const needsFileUploadHandler =
-			document.getElementById("uploadFileModal") ||
-			document.getElementById("uploadFileForm");
-
-		// Initialize capture type selector only if needed
-		let captureSelector = null;
-		if (needsCaptureSelector) {
-			captureSelector = new CaptureTypeSelector();
-		}
-
-		// Initialize page components only if needed
-		let filesPageInitializer = null;
-		if (needsPageInitializer) {
-			filesPageInitializer = new FilesPageInitializer();
-			window.filesPageInitializer = filesPageInitializer;
-		}
-
-		// Initialize file upload handler only if needed
-		let fileUploadHandler = null;
-		if (needsFileUploadHandler) {
-			fileUploadHandler = new FileUploadHandler();
-			window.fileUploadHandler = fileUploadHandler;
-		}
-
-		// Store references for cleanup
-		window.filesUICleanup = () => {
-			if (captureSelector && typeof captureSelector.cleanup === "function") {
-				captureSelector.cleanup();
-			}
-			if (
-				filesPageInitializer &&
-				typeof filesPageInitializer.cleanup === "function"
-			) {
-				filesPageInitializer.cleanup();
-			}
-			if (
-				fileUploadHandler &&
-				typeof fileUploadHandler.cleanup === "function"
-			) {
-				fileUploadHandler.cleanup();
-			}
-		};
-
-		console.log("Files UI initialized successfully", {
-			captureSelector: !!captureSelector,
-			pageInitializer: !!filesPageInitializer,
-			fileUploadHandler: !!fileUploadHandler,
-		});
-	} catch (error) {
-		ErrorHandler.showError(
-			"Failed to initialize Files UI components",
-			"initialization",
-			error,
-		);
-	}
-});
diff --git a/gateway/sds_gateway/static/js/files-upload.js b/gateway/sds_gateway/static/js/files-upload.js
deleted file mode 100644
index 43329c4e0..000000000
--- a/gateway/sds_gateway/static/js/files-upload.js
+++ /dev/null
@@ -1,763 +0,0 @@
-/**
- * Files Upload Handler
- * Manages file upload functionality, BLAKE3 hashing, and progress tracking
- */
-
-/**
- * BLAKE3 File Handler
- * Manages file selection and BLAKE3 hash calculation for deduplication
- */
-class Blake3FileHandler {
-	constructor() {
-		// Initialize global variables for file tracking
-		this.initializeGlobalVariables();
-		this.setupEventListeners();
-	}
-
-	initializeGlobalVariables() {
-		// Global variables to track files that should be skipped
-		window.filesToSkip = new Set();
-		window.fileCheckResults = new Map(); // Store detailed results for each file
-	}
-
-	setupEventListeners() {
-		const modal = document.getElementById("uploadCaptureModal");
-		if (!modal) {
-			console.warn("uploadCaptureModal not found");
-			return;
-		}
-
-		modal.addEventListener("shown.bs.modal", () => {
-			this.setupFileInputHandler();
-		});
-	}
-
-	setupFileInputHandler() {
-		const fileInput = document.getElementById("captureFileInput");
-		if (!fileInput) {
-			console.warn("captureFileInput not found");
-			return;
-		}
-
-		// Remove any previous handler to avoid duplicates
-		if (window._blake3CaptureHandler) {
-			fileInput.removeEventListener("change", window._blake3CaptureHandler);
-		}
-
-		// Create file handler that stores selected files
-		window._blake3CaptureHandler = async (event) => {
-			await this.handleFileSelection(event);
-		};
-
-		fileInput.addEventListener("change", window._blake3CaptureHandler);
-	}
-
-	async handleFileSelection(event) {
-		const files = event.target.files;
-		if (!files || files.length === 0) {
-			return;
-		}
-
-		// Store the selected files for later processing
-		window.selectedFiles = Array.from(files);
-
-		console.log(`Selected ${files.length} files for upload`);
-	}
-
-	/**
-	 * Calculate BLAKE3 hash for a file
-	 * @param {File} file - The file to hash
-	 * @returns {Promise<string>} - The BLAKE3 hash in hex format
-	 */
-	async calculateBlake3Hash(file) {
-		try {
-			const buffer = await file.arrayBuffer();
-			const hasher = await hashwasm.createBLAKE3();
-			hasher.init();
-			hasher.update(new Uint8Array(buffer));
-			return hasher.digest("hex");
-		} catch (error) {
-			console.error("Error calculating BLAKE3 hash:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Get directory path from webkitRelativePath
-	 * @param {File} file - The file to get directory for
-	 * @returns {string} - The directory path
-	 */
-	getDirectoryPath(file) {
-		if (!file.webkitRelativePath) {
-			return "/";
-		}
-
-		const pathParts = file.webkitRelativePath.split("/");
-		if (pathParts.length > 1) {
-			pathParts.pop(); // Remove filename
-			return `/${pathParts.join("/")}`;
-		}
-
-		return "/";
-	}
-
-	/**
-	 * Check if a file exists on the server
-	 * @param {File} file - The file to check
-	 * @param {string} hash - The BLAKE3 hash of the file
-	 * @returns {Promise<Object>} - The server response
-	 */
-	async checkFileExists(file, hash) {
-		const directory = this.getDirectoryPath(file);
-
-		const checkData = {
-			directory: directory,
-			filename: file.name,
-			checksum: hash,
-		};
-
-		try {
-			const response = await fetch(window.checkFileExistsUrl, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"X-CSRFToken": window.csrfToken,
-				},
-				body: JSON.stringify(checkData),
-			});
-
-			if (!response.ok) {
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			return await response.json();
-		} catch (error) {
-			console.error("Error checking file existence:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Process a single file for duplicate checking
-	 * @param {File} file - The file to process
-	 * @returns {Promise<Object>} - Processing result
-	 */
-	async processFileForDuplicateCheck(file) {
-		try {
-			// Calculate hash
-			const hash = await this.calculateBlake3Hash(file);
-
-			// Check if file exists
-			const checkResult = await this.checkFileExists(file, hash);
-
-			// Store results
-			const directory = this.getDirectoryPath(file);
-			const fileKey = `${directory}/${file.name}`;
-
-			const result = {
-				file: file,
-				directory: directory,
-				filename: file.name,
-				checksum: hash,
-				data: checkResult.data,
-			};
-
-			window.fileCheckResults.set(fileKey, result);
-
-			// Mark for skipping if file exists
-			if (checkResult.data && checkResult.data.file_exists_in_tree === true) {
-				window.filesToSkip.add(fileKey);
-			}
-
-			return result;
-		} catch (error) {
-			console.error("Error processing file for duplicate check:", error);
-			return null;
-		}
-	}
-}
-
-/**
- * Files Upload Modal Handler
- * Manages file upload functionality, progress tracking, and chunked uploads
- */
-class FilesUploadModal {
-	constructor() {
-		this.isProcessing = false;
-		this.uploadInProgress = false;
-		this.cancelRequested = false;
-		this.currentAbortController = null;
-
-		this.initializeElements();
-		this.setupEventListeners();
-		this.clearExistingModals();
-	}
-
-	initializeElements() {
-		this.cancelButton = document.querySelector(
-			"#uploadCaptureModal .btn-secondary",
-		);
-		this.submitButton = document.getElementById("uploadSubmitBtn");
-		this.uploadModal = document.getElementById("uploadCaptureModal");
-		this.fileInput = document.getElementById("captureFileInput");
-		this.uploadForm = document.getElementById("uploadCaptureForm");
-	}
-
-	setupEventListeners() {
-		// Modal event listeners
-		if (this.uploadModal) {
-			this.uploadModal.addEventListener("show.bs.modal", () =>
-				this.resetState(),
-			);
-			this.uploadModal.addEventListener("hidden.bs.modal", () =>
-				this.resetState(),
-			);
-		}
-
-		// File input change listener
-		if (this.fileInput) {
-			this.fileInput.addEventListener("change", () => this.resetState());
-		}
-
-		// Cancel button listener
-		if (this.cancelButton) {
-			this.cancelButton.addEventListener("click", () => this.handleCancel());
-		}
-
-		// Form submit listener
-		if (this.uploadForm) {
-			this.uploadForm.addEventListener("submit", (e) => this.handleSubmit(e));
-		}
-	}
-
-	clearExistingModals() {
-		const existingResultModal = document.getElementById("uploadResultModal");
-		if (existingResultModal) {
-			const modalInstance = bootstrap.Modal.getInstance(existingResultModal);
-			if (modalInstance) {
-				modalInstance.hide();
-			}
-		}
-	}
-
-	resetState() {
-		this.isProcessing = false;
-		this.currentAbortController = null;
-		this.cancelRequested = false;
-	}
-
-	handleCancel() {
-		if (this.isProcessing) {
-			this.cancelRequested = true;
-
-			if (this.currentAbortController) {
-				this.currentAbortController.abort();
-			}
-
-			this.cancelButton.textContent = "Cancelling...";
-			this.cancelButton.disabled = true;
-
-			const progressMessage = document.getElementById("progressMessage");
-			if (progressMessage) {
-				progressMessage.textContent = "Cancelling upload...";
-			}
-
-			setTimeout(() => {
-				if (this.cancelRequested) {
-					this.resetUIState();
-				}
-			}, 500);
-		}
-	}
-
-	async handleSubmit(e) {
-		e.preventDefault();
-
-		this.isProcessing = true;
-		this.uploadInProgress = true;
-		this.cancelRequested = false;
-
-		// Check if files are selected
-		if (!window.selectedFiles || window.selectedFiles.length === 0) {
-			alert("Please select files to upload.");
-			return;
-		}
-
-		try {
-			this.showProgressSection();
-			await this.checkFilesForDuplicates();
-
-			if (this.cancelRequested) {
-				throw new Error("Upload cancelled by user");
-			}
-
-			await this.uploadFiles();
-		} catch (error) {
-			this.handleError(error);
-		} finally {
-			this.resetUIState();
-		}
-	}
-
-	showProgressSection() {
-		const progressSection = document.getElementById("checkingProgressSection");
-		const progressMessage = document.getElementById("progressMessage");
-
-		if (progressSection) {
-			progressSection.style.display = "block";
-		}
-		if (progressMessage) {
-			progressMessage.textContent = "Checking files for duplicates...";
-		}
-
-		this.cancelButton.textContent = "Cancel Processing";
-		this.cancelButton.classList.add("btn-warning");
-		this.submitButton.disabled = true;
-	}
-
-	async checkFilesForDuplicates() {
-		window.filesToSkip = new Set();
-		window.fileCheckResults = new Map();
-		const files = window.selectedFiles;
-		const totalFiles = files.length;
-
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-
-		for (let i = 0; i < files.length; i++) {
-			if (this.cancelRequested) break;
-
-			const file = files[i];
-			const progress = Math.round(((i + 1) / totalFiles) * 100);
-
-			if (progressBar) progressBar.style.width = `${progress}%`;
-			if (progressText) progressText.textContent = `${progress}%`;
-
-			await this.processFile(file);
-		}
-
-		if (this.cancelRequested) {
-			throw new Error("Upload cancelled by user");
-		}
-	}
-
-	async processFile(file) {
-		// Calculate BLAKE3 hash
-		const buffer = await file.arrayBuffer();
-		const hasher = await hashwasm.createBLAKE3();
-		hasher.init();
-		hasher.update(new Uint8Array(buffer));
-		const hashHex = hasher.digest("hex");
-
-		// Calculate directory path
-		let directory = "/";
-		if (file.webkitRelativePath) {
-			const pathParts = file.webkitRelativePath.split("/");
-			if (pathParts.length > 1) {
-				pathParts.pop();
-				directory = `/${pathParts.join("/")}`;
-			}
-		}
-
-		// Check if file exists
-		const checkData = {
-			directory: directory,
-			filename: file.name,
-			checksum: hashHex,
-		};
-
-		try {
-			const response = await fetch(window.checkFileExistsUrl, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"X-CSRFToken": window.csrfToken,
-				},
-				body: JSON.stringify(checkData),
-			});
-			const data = await response.json();
-
-			const fileKey = `${directory}/${file.name}`;
-			window.fileCheckResults.set(fileKey, {
-				file: file,
-				directory: directory,
-				filename: file.name,
-				checksum: hashHex,
-				data: data.data,
-			});
-
-			if (data.data && data.data.file_exists_in_tree === true) {
-				window.filesToSkip.add(fileKey);
-			}
-		} catch (error) {
-			console.error("Error checking file:", error);
-		}
-	}
-
-	async uploadFiles() {
-		const progressMessage = document.getElementById("progressMessage");
-		const progressSection = document.getElementById("checkingProgressSection");
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-
-		if (progressMessage) {
-			progressMessage.textContent = "Uploading files and creating captures...";
-		}
-		if (progressBar) progressBar.style.width = "0%";
-		if (progressText) progressText.textContent = "0%";
-
-		const files = window.selectedFiles;
-		const filesToUpload = [];
-		const relativePathsToUpload = [];
-		const allRelativePaths = [];
-
-		// Process files for upload
-		for (const file of files) {
-			let directory = "/";
-			if (file.webkitRelativePath) {
-				const pathParts = file.webkitRelativePath.split("/");
-				if (pathParts.length > 1) {
-					pathParts.pop();
-					directory = `/${pathParts.join("/")}`;
-				}
-			}
-			const fileKey = `${directory}/${file.name}`;
-			const relativePath = file.webkitRelativePath || file.name;
-
-			console.debug(
-				`Processing file: ${file.name}, webkitRelativePath: '${file.webkitRelativePath}', relativePath: '${relativePath}', directory: '${directory}'`,
-			);
-			allRelativePaths.push(relativePath);
-
-			if (!window.filesToSkip.has(fileKey)) {
-				filesToUpload.push(file);
-				relativePathsToUpload.push(relativePath);
-			}
-		}
-
-		console.debug(
-			"All relative paths being sent:",
-			allRelativePaths.slice(0, 5),
-		);
-		console.debug(
-			"Relative paths to upload:",
-			relativePathsToUpload.slice(0, 5),
-		);
-
-		if (filesToUpload.length > 0 && progressSection) {
-			progressSection.style.display = "block";
-		}
-
-		this.currentAbortController = new AbortController();
-
-		let result;
-		if (filesToUpload.length === 0) {
-			result = await this.uploadSkippedFiles(allRelativePaths);
-		} else {
-			result = await this.uploadFilesInChunks(
-				filesToUpload,
-				relativePathsToUpload,
-				allRelativePaths,
-			);
-		}
-
-		this.currentAbortController = null;
-		this.showUploadResults(result, result.saved_files_count, files.length);
-	}
-
-	async uploadSkippedFiles(allRelativePaths) {
-		const formData = new FormData();
-
-		console.debug(
-			"uploadSkippedFiles - allRelativePaths:",
-			allRelativePaths.slice(0, 5),
-		);
-		for (const path of allRelativePaths) {
-			formData.append("all_relative_paths", path);
-		}
-
-		this.addCaptureTypeData(formData);
-		formData.append("csrfmiddlewaretoken", window.csrfToken);
-
-		const response = await fetch(window.uploadFilesUrl, {
-			method: "POST",
-			body: formData,
-			headers: {
-				"X-CSRFToken": window.csrfToken,
-			},
-			signal: this.currentAbortController.signal,
-		});
-
-		return await response.json();
-	}
-
-	async uploadFilesInChunks(
-		filesToUpload,
-		relativePathsToUpload,
-		allRelativePaths,
-	) {
-		const CHUNK_SIZE = 5;
-		const totalFiles = filesToUpload.length;
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-
-		const allResults = {
-			file_upload_status: "success",
-			saved_files_count: 0,
-			captures: [],
-			errors: [],
-			message: "",
-		};
-
-		for (let i = 0; i < filesToUpload.length; i += CHUNK_SIZE) {
-			if (this.cancelRequested) break;
-
-			const chunk = filesToUpload.slice(i, i + CHUNK_SIZE);
-			const chunkPaths = relativePathsToUpload.slice(i, i + CHUNK_SIZE);
-
-			const totalChunks = Math.ceil(filesToUpload.length / CHUNK_SIZE);
-			const currentChunk = Math.floor(i / CHUNK_SIZE) + 1;
-			const isFinalChunk = currentChunk === totalChunks;
-
-			// Update progress
-			const progress = Math.round(((i + chunk.length) / totalFiles) * 100);
-			if (progressBar) progressBar.style.width = `${progress}%`;
-			if (progressText) progressText.textContent = `${progress}%`;
-			if (progressMessage) {
-				progressMessage.textContent = `Uploading files ${i + 1}-${Math.min(i + CHUNK_SIZE, totalFiles)} of ${totalFiles} (chunk ${currentChunk}/${totalChunks})...`;
-			}
-
-			const chunkResult = await this.uploadChunk(
-				chunk,
-				chunkPaths,
-				allRelativePaths,
-				currentChunk,
-				totalChunks,
-			);
-
-			// Merge results
-			if (chunkResult.saved_files_count !== undefined) {
-				allResults.saved_files_count += chunkResult.saved_files_count;
-			}
-			if (chunkResult.captures && isFinalChunk) {
-				allResults.captures = allResults.captures.concat(chunkResult.captures);
-			}
-			if (chunkResult.errors) {
-				allResults.errors = allResults.errors.concat(chunkResult.errors);
-			}
-
-			if (chunkResult.file_upload_status === "error") {
-				allResults.file_upload_status = "error";
-				allResults.message = chunkResult.message || "Upload failed";
-				break;
-			}
-
-			if (chunkResult.file_upload_status === "success" && isFinalChunk) {
-				allResults.file_upload_status = "success";
-			}
-		}
-
-		if (this.cancelRequested) {
-			throw new Error("Upload cancelled by user");
-		}
-
-		return allResults;
-	}
-
-	async uploadChunk(
-		chunk,
-		chunkPaths,
-		allRelativePaths,
-		currentChunk,
-		totalChunks,
-	) {
-		const formData = new FormData();
-
-		console.debug(
-			`uploadChunk ${currentChunk}/${totalChunks} - chunkPaths:`,
-			chunkPaths,
-		);
-		console.debug(
-			`uploadChunk ${currentChunk}/${totalChunks} - allRelativePaths (first 5):`,
-			allRelativePaths.slice(0, 5),
-		);
-
-		for (const file of chunk) {
-			formData.append("files", file);
-		}
-		for (const path of chunkPaths) {
-			formData.append("relative_paths", path);
-		}
-		for (const path of allRelativePaths) {
-			formData.append("all_relative_paths", path);
-		}
-
-		this.addCaptureTypeData(formData);
-		formData.append("csrfmiddlewaretoken", window.csrfToken);
-
-		formData.append("is_chunk", "true");
-		formData.append("chunk_number", currentChunk.toString());
-		formData.append("total_chunks", totalChunks.toString());
-
-		const controller = new AbortController();
-		this.currentAbortController = controller;
-		const timeoutId = setTimeout(() => controller.abort(), 300000);
-
-		try {
-			const response = await fetch(window.uploadFilesUrl, {
-				method: "POST",
-				body: formData,
-				headers: {
-					"X-CSRFToken": window.csrfToken,
-				},
-				signal: controller.signal,
-			});
-
-			clearTimeout(timeoutId);
-
-			if (!response.ok) {
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			return await response.json();
-		} catch (error) {
-			clearTimeout(timeoutId);
-			if (error.name === "AbortError") {
-				throw new Error("Upload timeout - connection may be lost");
-			}
-			throw error;
-		}
-	}
-
-	addCaptureTypeData(formData) {
-		const captureType = document.getElementById("captureTypeSelect").value;
-		formData.append("capture_type", captureType);
-
-		if (captureType === "drf") {
-			const channels = document.getElementById("captureChannelsInput").value;
-			formData.append("channels", channels);
-		} else if (captureType === "rh") {
-			const scanGroup = document.getElementById("captureScanGroupInput").value;
-			formData.append("scan_group", scanGroup);
-		}
-	}
-
-	handleError(error) {
-		if (this.cancelRequested) {
-			alert(
-				"Upload cancelled. Any files uploaded before cancellation have been saved.",
-			);
-			setTimeout(() => window.location.reload(), 1000);
-		} else if (error.name === "AbortError") {
-			alert(
-				"Upload was interrupted. Any files uploaded before the interruption have been saved.",
-			);
-			setTimeout(() => window.location.reload(), 1000);
-		} else if (error.name === "TypeError" && error.message.includes("fetch")) {
-			alert(
-				"Network error during upload. Please check your connection and try again.",
-			);
-		} else {
-			alert(`Upload failed: ${error.message}`);
-			setTimeout(() => window.location.reload(), 1000);
-		}
-	}
-
-	resetUIState() {
-		this.submitButton.disabled = false;
-
-		const progressSection = document.getElementById("checkingProgressSection");
-		if (progressSection) {
-			progressSection.style.display = "none";
-		}
-
-		this.cancelButton.textContent = "Cancel";
-		this.cancelButton.classList.remove("btn-warning");
-		this.cancelButton.disabled = false;
-
-		const progressBar = document.getElementById("checkingProgressBar");
-		const progressText = document.getElementById("checkingProgressText");
-		const progressMessage = document.getElementById("progressMessage");
-
-		if (progressBar) progressBar.style.width = "0%";
-		if (progressText) progressText.textContent = "0%";
-		if (progressMessage) progressMessage.textContent = "";
-
-		this.isProcessing = false;
-		this.uploadInProgress = false;
-		this.cancelRequested = false;
-		this.currentAbortController = null;
-	}
-
-	showUploadResults(result, uploadedCount, totalCount) {
-		const uploadModal = bootstrap.Modal.getInstance(this.uploadModal);
-		if (uploadModal) {
-			uploadModal.hide();
-		}
-
-		if (result.file_upload_status === "success") {
-			const uploaded = uploadedCount ?? 0;
-			const message = `Upload complete: ${uploaded} / ${totalCount} file${totalCount === 1 ? "" : "s"} uploaded.`;
-			try {
-				sessionStorage.setItem(
-					"filesAlert",
-					JSON.stringify({ message: message, type: "success" }),
-				);
-			} catch (_) {}
-			setTimeout(() => window.location.reload(), 500);
-		} else {
-			this.showErrorModal(result);
-		}
-	}
-
-	showErrorModal(result) {
-		const modalBody = document.getElementById("uploadResultModalBody");
-		const resultModalEl = document.getElementById("uploadResultModal");
-		const modal = new bootstrap.Modal(resultModalEl);
-
-		let msg = "<b>Upload Failed</b><br />";
-		if (result.message) {
-			msg += `${result.message}<br /><br />`;
-		}
-		msg += "<b>Please remove the problematic files and try again.</b>";
-
-		if (result.errors && result.errors.length > 0) {
-			const errs = result.errors.map((e) => `<li>${e}</li>`).join("");
-			msg += `<br /><br /><b>Error Details:</b><ul>${errs}</ul>`;
-		}
-
-		modalBody.innerHTML = msg;
-		modal.show();
-	}
-}
-
-// Initialize when DOM is loaded
-document.addEventListener("DOMContentLoaded", () => {
-	// Set up session storage alert handling
-	const key = "filesAlert";
-	const stored = sessionStorage.getItem(key);
-	if (stored) {
-		try {
-			const data = JSON.parse(stored);
-			if (
-				window.components &&
-				typeof window.components.showError === "function" &&
-				data?.type === "error"
-			) {
-				window.components.showError(data.message || "An error occurred.");
-			} else if (
-				window.components &&
-				typeof window.components.showSuccess === "function" &&
-				data?.type === "success"
-			) {
-				window.components.showSuccess(data.message || "Success");
-			}
-		} catch (e) {}
-		sessionStorage.removeItem(key);
-	}
-
-	// Initialize BLAKE3 handler first, then upload modal
-	new Blake3FileHandler();
-	new FilesUploadModal();
-});
diff --git a/gateway/sds_gateway/static/js/search/AssetSearchHandler.js b/gateway/sds_gateway/static/js/search/AssetSearchHandler.js
index 87233d78b..4df0471a2 100644
--- a/gateway/sds_gateway/static/js/search/AssetSearchHandler.js
+++ b/gateway/sds_gateway/static/js/search/AssetSearchHandler.js
@@ -1,17 +1,262 @@
 /**
  * Asset Search Handler
- * Handles search functionality for captures and files in dataset creation/editing
- * Refactored from SearchHandler to use core components and centralized management
+ * Handles search functionality for captures and files in dataset creation/editing,
+ * plus shared list-page search (full navigation via query params).
  */
+
+/**
+ * @param {Object} config
+ * @returns {{ searchForm: HTMLElement|null, searchButton: HTMLElement|null, clearButton: HTMLElement|null }}
+ */
+function getConfiguredSearchElements(config) {
+	return {
+		searchForm: document.getElementById(config.searchFormId),
+		searchButton: document.getElementById(config.searchButtonId),
+		clearButton: document.getElementById(config.clearButtonId),
+	};
+}
+
 class AssetSearchHandler {
+	/**
+	 * @param {object} target
+	 * @param {object} config
+	 */
+	static applySearchCoreElements(target, config) {
+		const searchEls = getConfiguredSearchElements(config);
+		target.searchForm = searchEls.searchForm;
+		target.searchButton = searchEls.searchButton;
+		target.clearButton = searchEls.clearButton;
+	}
+
+	/**
+	 * Build URLSearchParams from config specs ({ param, elementId } or { param, el, get }).
+	 * @param {Array<{ param: string, elementId?: string, el?: () => HTMLElement|null, get?: () => string }>} paramSpecs
+	 * @returns {URLSearchParams}
+	 */
+	static buildParamsFromConfig(paramSpecs) {
+		const params = new URLSearchParams();
+		if (!paramSpecs?.length) return params;
+
+		for (const spec of paramSpecs) {
+			const node = spec.elementId
+				? document.getElementById(spec.elementId)
+				: spec.el?.();
+			let value = spec.get?.();
+			if (value === undefined || value === null) {
+				value = node?.value ?? "";
+			}
+			const trimmed = String(value).trim();
+			if (trimmed) {
+				params.set(spec.param, trimmed);
+			}
+		}
+		return params;
+	}
+
+	/**
+	 * @param {HTMLFormElement} form
+	 * @returns {URLSearchParams}
+	 */
+	static buildParamsFromForm(form) {
+		const params = new URLSearchParams();
+		const formData = new FormData(form);
+		for (const [key, value] of formData.entries()) {
+			const trimmed = String(value).trim();
+			if (trimmed) {
+				params.append(key, trimmed);
+			}
+		}
+		return params;
+	}
+
+	/**
+	 * Full-page list search (datasets publish search, capture list, etc.).
+	 */
+	static ListPageSearchController = class {
+		/**
+		 * @param {Object} config
+		 * @param {string} config.searchFormId
+		 * @param {string} [config.searchButtonId]
+		 * @param {string} [config.clearButtonId]
+		 * @param {Array} [config.paramSpecs] - named query params; if omitted, uses FormData from searchForm
+		 * @param {string} [config.basePath]
+		 * @param {string[]} [config.preserveUrlParams] - keys to keep from current URL (e.g. sort_by)
+		 * @param {string} [config.resetPageParam]
+		 * @param {string} [config.resetPageTo]
+		 * @param {string} [config.applyFiltersButtonId]
+		 * @param {string} [config.clearFiltersButtonId]
+		 */
+		constructor(config) {
+			AssetSearchHandler.applySearchCoreElements(this, config);
+			this.config = config;
+			this.paramSpecs = config.paramSpecs || null;
+			this.basePath = config.basePath || window.location.pathname;
+			this.preserveUrlParams = config.preserveUrlParams || [];
+			this.resetPageParam = config.resetPageParam || "page";
+			this.resetPageTo = config.resetPageTo || "1";
+			this.applyFiltersButton = config.applyFiltersButtonId
+				? document.getElementById(config.applyFiltersButtonId)
+				: null;
+			this.clearFiltersButton = config.clearFiltersButtonId
+				? document.getElementById(config.clearFiltersButtonId)
+				: null;
+
+			this.initializeEventListeners();
+			this.updateClearButtonVisibility();
+		}
+
+		initializeEventListeners() {
+			if (this.searchForm) {
+				this.searchForm.addEventListener("submit", (e) => {
+					e.preventDefault();
+					this.handleSearch();
+				});
+			}
+			if (this.searchButton) {
+				this.searchButton.addEventListener("click", (e) => {
+					e.preventDefault();
+					this.handleSearch();
+				});
+			}
+			if (this.clearButton) {
+				this.clearButton.addEventListener("click", (e) => {
+					e.preventDefault();
+					this.handleClear();
+				});
+			}
+			if (this.applyFiltersButton) {
+				this.applyFiltersButton.addEventListener("click", (e) => {
+					e.preventDefault();
+					this.handleSearch();
+				});
+			}
+			if (this.clearFiltersButton) {
+				this.clearFiltersButton.addEventListener("click", (e) => {
+					e.preventDefault();
+					this.handleClearFilters();
+				});
+			}
+			this.initializeEnterKeyListener();
+			const searchInput = document.getElementById("search-input");
+			if (searchInput) {
+				searchInput.addEventListener("input", () =>
+					this.updateClearButtonVisibility(),
+				);
+			}
+		}
+
+		initializeEnterKeyListener() {
+			if (!this.searchForm) return;
+
+			const searchInputs = this.searchForm.querySelectorAll(
+				"input[type='text'], input[type='search'], input[type='number']",
+			);
+			for (const input of searchInputs) {
+				input.addEventListener("keypress", (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						this.handleSearch();
+					}
+				});
+			}
+		}
+
+		updateClearButtonVisibility() {
+			if (!this.clearButton?.classList?.toggle) return;
+			const searchInput = document.getElementById("search-input");
+			const hasValue = Boolean(searchInput?.value?.trim());
+			this.clearButton.classList.toggle("clear-search-hidden", !hasValue);
+		}
+
+		buildSearchParams() {
+			let params;
+			if (this.paramSpecs?.length) {
+				params = AssetSearchHandler.buildParamsFromConfig(this.paramSpecs);
+			} else if (this.searchForm) {
+				params = AssetSearchHandler.buildParamsFromForm(this.searchForm);
+			} else {
+				params = new URLSearchParams();
+			}
+
+			const current = new URLSearchParams(window.location.search);
+			for (const key of this.preserveUrlParams) {
+				const value = current.get(key);
+				if (value !== null && value !== "") {
+					params.set(key, value);
+				}
+			}
+
+			params.set(this.resetPageParam, this.resetPageTo);
+			return params;
+		}
+
+		handleSearch() {
+			const params = this.buildSearchParams();
+			this.config.onBeforeNavigate?.(params);
+			window.location.href = `${this.basePath}?${params.toString()}`;
+		}
+
+		handleClear() {
+			if (this.searchForm) {
+				const inputs = this.searchForm.querySelectorAll(
+					"input, select, textarea",
+				);
+				for (const input of inputs) {
+					if (input.type === "checkbox" || input.type === "radio") {
+						input.checked = false;
+					} else {
+						input.value = "";
+					}
+				}
+			}
+			this.updateClearButtonVisibility();
+			if (this.preserveUrlParams?.length || this.paramSpecs?.length) {
+				window.location.href = this.buildUrlWithoutSearchTerm();
+			} else {
+				window.location.href = this.basePath;
+			}
+		}
+
+		/** Navigate keeping sort/pagination keys but dropping filter paramSpecs. */
+		buildUrlWithoutSearchTerm() {
+			const params = new URLSearchParams();
+			const current = new URLSearchParams(window.location.search);
+			for (const key of this.preserveUrlParams) {
+				const value = current.get(key);
+				if (value !== null && value !== "") {
+					params.set(key, value);
+				}
+			}
+			params.set(this.resetPageParam, this.resetPageTo);
+			const qs = params.toString();
+			return qs ? `${this.basePath}?${qs}` : this.basePath;
+		}
+
+		handleClearFilters() {
+			if (this.paramSpecs?.length) {
+				for (const spec of this.paramSpecs) {
+					if (spec.param === "search") continue;
+					const node = spec.elementId
+						? document.getElementById(spec.elementId)
+						: spec.el?.();
+					if (!node) continue;
+					if (node.type === "checkbox" || node.type === "radio") {
+						node.checked = false;
+					} else {
+						node.value = "";
+					}
+				}
+			}
+			this.handleSearch();
+		}
+	};
+
 	/**
 	 * Initialize asset search handler
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config) {
-		this.searchForm = document.getElementById(config.searchFormId);
-		this.searchButton = document.getElementById(config.searchButtonId);
-		this.clearButton = document.getElementById(config.clearButtonId);
+		AssetSearchHandler.applySearchCoreElements(this, config);
 		this.tableBody = document.getElementById(config.tableBodyId);
 		this.paginationContainer = document.getElementById(
 			config.paginationContainerId,
@@ -45,6 +290,21 @@ class AssetSearchHandler {
 		this.initializeEventListeners();
 	}
 
+	/**
+	 * @param {{ page?: string }} [extra]
+	 */
+	getFileSearchParams(extra = {}) {
+		const fileNameInput = document.getElementById("file-name");
+		const directoryInput = document.getElementById("file-directory");
+		const extensionSelect = document.getElementById("file-extension");
+		return {
+			file_name: fileNameInput?.value || "",
+			directory: directoryInput?.value || "",
+			file_extension: extensionSelect?.value || "",
+			...extra,
+		};
+	}
+
 	/**
 	 * Initialize event listeners
 	 */
@@ -397,12 +657,21 @@ class AssetSearchHandler {
 
 		// Transform captures data for table_rows.html template
 		const rows = data.results.map((capture) => {
-			const isSelected = this.formHandler?.selectedCaptures.has(
-				capture.id.toString(),
-			);
+			const captureIdStr = capture.id.toString();
+			const inExistingDataset =
+				this.isEditMode &&
+				this.formHandler?.currentCaptures &&
+				(this.formHandler.currentCaptures.has(capture.id) ||
+					this.formHandler.currentCaptures.has(captureIdStr));
+			const isSelected =
+				inExistingDataset ||
+				this.formHandler?.selectedCaptures?.has(captureIdStr);
 			const isOwnedByCurrentUser =
 				capture.owner_id === this.formHandler?.currentUserId;
 			const canSelect = isOwnedByCurrentUser;
+			// Edit only: captures already in the dataset stay checked and locked
+			const checkboxDisabled =
+				!canSelect || (this.isEditMode && inExistingDataset);
 			const ownerName = capture.owner
 				? capture.owner.name || capture.owner.email || "-"
 				: "-";
@@ -417,7 +686,7 @@ class AssetSearchHandler {
 
 			return {
 				id: capture.id,
-				css_class: `capture-row${isSelected ? " table-warning" : ""}${!canSelect ? " readonly-row" : ""}`,
+				css_class: `capture-row${isSelected ? " table-warning" : ""}${checkboxDisabled ? " readonly-row" : ""}${inExistingDataset ? " capture-in-dataset" : ""}`,
 				data_attrs: {
 					"capture-id": capture.id,
 				},
@@ -430,7 +699,7 @@ class AssetSearchHandler {
 						tag_attrs: {
 							type: "checkbox",
 							checked: isSelected,
-							disabled: !canSelect,
+							disabled: checkboxDisabled,
 							value: capture.id,
 						},
 						data_attrs: {
@@ -463,9 +732,12 @@ class AssetSearchHandler {
 			// Attach event handlers to rendered rows
 			this.attachCaptureRowHandlers(tbody);
 		} else {
-			await window.DOMUtils.renderError(tbody, "Error loading captures", {
-				format: "table",
-				colspan: 7,
+			await window.DOMUtils.showMessage("Error loading captures", {
+				variant: "danger",
+				placement: "replace",
+				target: tbody,
+				presentation: "table",
+				templateContext: { colspan: 7 },
 			});
 		}
 
@@ -499,6 +771,12 @@ class AssetSearchHandler {
 			};
 
 			const handleSelection = (e) => {
+				if (checkbox.disabled) {
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+
 				if (e.target.type !== "checkbox") {
 					checkbox.checked = !checkbox.checked;
 				}
@@ -588,19 +866,9 @@ class AssetSearchHandler {
 					const data = await this.fetchCaptures(params);
 					this.updateCapturesTable(data);
 				} else {
-					// Get current search values for files
-					const fileNameInput = document.getElementById("file-name");
-					const directoryInput = document.getElementById("file-directory");
-					const extensionSelect = document.getElementById("file-extension");
-
-					const params = {
-						file_name: fileNameInput?.value || "",
-						directory: directoryInput?.value || "",
-						file_extension: extensionSelect?.value || "",
-						page: page,
-					};
-
-					const data = await this.fetchFiles(params);
+					const data = await this.fetchFiles(
+						this.getFileSearchParams({ page }),
+					);
 					this.updateFilesTable(data);
 				}
 			});
@@ -781,17 +1049,8 @@ class AssetSearchHandler {
 	 */
 	async loadFileTree() {
 		try {
-			// Get current values from form fields
-			const fileNameInput = document.getElementById("file-name");
-			const directoryInput = document.getElementById("file-directory");
+			const params = this.getFileSearchParams();
 			const extensionSelect = document.getElementById("file-extension");
-
-			const params = {
-				file_name: fileNameInput?.value || "",
-				directory: directoryInput?.value || "",
-				file_extension: extensionSelect?.value || "",
-			};
-
 			const data = await this.fetchFiles(params);
 			if (!data.tree) {
 				console.error("No tree data received:", data);
@@ -1125,8 +1384,11 @@ class AssetSearchHandler {
 		const errorContainer = document.getElementById("formErrors");
 		const errorContent = errorContainer?.querySelector(".error-content");
 		if (errorContainer && errorContent) {
-			await window.DOMUtils.renderError(errorContent, message, {
-				format: "list",
+			await window.DOMUtils.showMessage(message, {
+				variant: "danger",
+				placement: "replace",
+				target: errorContent,
+				presentation: "list",
 			});
 			window.DOMUtils.show(errorContainer);
 			errorContainer.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -1184,9 +1446,12 @@ class AssetSearchHandler {
 			// Attach event handlers to remove buttons
 			this.attachFileRemovalHandlers(tbody);
 		} else {
-			await window.DOMUtils.renderError(tbody, "Error loading files", {
-				format: "table",
-				colspan: 6,
+			await window.DOMUtils.showMessage("Error loading files", {
+				variant: "danger",
+				placement: "replace",
+				target: tbody,
+				presentation: "table",
+				templateContext: { colspan: 6 },
 			});
 		}
 	}
@@ -1266,8 +1531,15 @@ class AssetSearchHandler {
 
 // Make class available globally
 window.AssetSearchHandler = AssetSearchHandler;
+window.applySearchCoreElements = AssetSearchHandler.applySearchCoreElements;
+window.getConfiguredSearchElements = getConfiguredSearchElements;
+window.ListPageSearchController = AssetSearchHandler.ListPageSearchController;
 
 // Export for ES6 modules (Jest testing) - only if in module context
 if (typeof module !== "undefined" && module.exports) {
-	module.exports = { AssetSearchHandler };
+	module.exports = {
+		AssetSearchHandler,
+		ListPageSearchController: AssetSearchHandler.ListPageSearchController,
+		getConfiguredSearchElements,
+	};
 }
diff --git a/gateway/sds_gateway/static/js/search/DatasetSearchHandler.js b/gateway/sds_gateway/static/js/search/DatasetSearchHandler.js
deleted file mode 100644
index 6808495d0..000000000
--- a/gateway/sds_gateway/static/js/search/DatasetSearchHandler.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Dataset Search Handler
- * Handles search functionality for published datasets
- */
-class DatasetSearchHandler {
-	/**
-	 * Initialize dataset search handler
-	 * @param {Object} config - Configuration object
-	 */
-	constructor(config) {
-		this.searchForm = document.getElementById(config.searchFormId);
-		this.searchButton = document.getElementById(config.searchButtonId);
-		this.clearButton = document.getElementById(config.clearButtonId);
-		this.resultsContainer = document.getElementById(config.resultsContainerId);
-		this.resultsTbody = document.getElementById(config.resultsTbodyId);
-		this.resultsCount = document.getElementById(config.resultsCountId);
-
-		this.initializeEventListeners();
-	}
-
-	/**
-	 * Initialize event listeners
-	 */
-	initializeEventListeners() {
-		// Search form submission
-		if (this.searchForm) {
-			this.searchForm.addEventListener("submit", (e) => {
-				e.preventDefault();
-				this.handleSearch();
-			});
-		}
-
-		// Clear button
-		if (this.clearButton) {
-			this.clearButton.addEventListener("click", (e) => {
-				e.preventDefault();
-				this.handleClear();
-			});
-		}
-
-		// Enter key listener for search inputs
-		this.initializeEnterKeyListener();
-	}
-
-	/**
-	 * Initialize enter key listener for search inputs
-	 */
-	initializeEnterKeyListener() {
-		if (!this.searchForm) {
-			return;
-		}
-
-		const searchInputs = this.searchForm.querySelectorAll(
-			"input[type='text'], input[type='number']",
-		);
-		for (const input of searchInputs) {
-			input.addEventListener("keypress", (e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					this.handleSearch();
-				}
-			});
-		}
-	}
-
-	/**
-	 * Handle search form submission
-	 */
-	handleSearch() {
-		if (!this.searchForm) {
-			return;
-		}
-
-		// Get form data
-		const formData = new FormData(this.searchForm);
-		const params = new URLSearchParams();
-
-		// Add non-empty form values to params
-		for (const [key, value] of formData.entries()) {
-			if (value && value.trim() !== "") {
-				params.append(key, value.trim());
-			}
-		}
-
-		// Build URL with search parameters
-		const searchUrl = `${window.location.pathname}?${params.toString()}`;
-
-		// Navigate to search URL (this will trigger a page reload with results)
-		window.location.href = searchUrl;
-	}
-
-	/**
-	 * Handle clear button click
-	 */
-	handleClear() {
-		if (!this.searchForm) {
-			return;
-		}
-
-		// Clear all form inputs
-		const inputs = this.searchForm.querySelectorAll("input, select, textarea");
-		for (const input of inputs) {
-			if (input.type === "checkbox" || input.type === "radio") {
-				input.checked = false;
-			} else {
-				input.value = "";
-			}
-		}
-
-		// Navigate to base search URL (no parameters)
-		window.location.href = window.location.pathname;
-	}
-}
-
-// Make class available globally
-if (typeof window !== "undefined") {
-	window.DatasetSearchHandler = DatasetSearchHandler;
-}
-
-// Export for ES6 modules (Jest testing) - only if in module context
-if (typeof module !== "undefined" && module.exports) {
-	module.exports = { DatasetSearchHandler };
-}
diff --git a/gateway/sds_gateway/static/js/search/__tests__/AssetSearchHandler.test.js b/gateway/sds_gateway/static/js/search/__tests__/AssetSearchHandler.test.js
index b8834a44a..c2fc7e36a 100644
--- a/gateway/sds_gateway/static/js/search/__tests__/AssetSearchHandler.test.js
+++ b/gateway/sds_gateway/static/js/search/__tests__/AssetSearchHandler.test.js
@@ -6,21 +6,14 @@
 // Import the AssetSearchHandler class
 import { AssetSearchHandler } from "../AssetSearchHandler.js";
 
-// Mock APIClient
-global.APIClient = {
-	get: jest.fn(),
-};
-
-// Mock DOMUtils (replaces HTMLInjectionManager)
-global.window.DOMUtils = {
-	show: jest.fn(),
-	hide: jest.fn(),
-	showAlert: jest.fn(),
-	renderError: jest.fn().mockResolvedValue(true),
-	renderLoading: jest.fn().mockResolvedValue(true),
-	renderContent: jest.fn().mockResolvedValue(true),
-	renderTable: jest.fn().mockResolvedValue(true),
-};
+const {
+	setupStandardUnitTest,
+	createMockFormElement,
+	createMockButtonElement,
+	createDefaultAssetSearchConfig,
+	createAssetSearchGetElementByIdMap,
+	mergeWindowMocks,
+} = require("../../tests-config/testHelpers.js");
 
 describe("AssetSearchHandler", () => {
 	let searchHandler;
@@ -30,61 +23,14 @@ describe("AssetSearchHandler", () => {
 	let mockTableBody;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Mock DOM elements
-		mockForm = {
-			addEventListener: jest.fn(),
-			querySelectorAll: jest.fn(() => []),
-		};
-
-		mockButton = {
-			addEventListener: jest.fn(),
-			disabled: false,
-		};
-
+		mockForm = createMockFormElement();
+		mockButton = createMockButtonElement();
 		mockTableBody = {
 			innerHTML: "",
 			querySelectorAll: jest.fn(() => []),
 		};
 
-		// Mock document methods
-		document.getElementById = jest.fn((id) => {
-			const elements = {
-				"search-form": mockForm,
-				"search-button": mockButton,
-				"clear-button": mockButton,
-				"table-body": mockTableBody,
-				"pagination-container": { innerHTML: "" },
-				"confirm-file-selection": mockButton,
-			};
-			return elements[id] || null;
-		});
-
-		document.querySelector = jest.fn(() => null);
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Mock config
-		mockConfig = {
-			searchFormId: "search-form",
-			searchButtonId: "search-button",
-			clearButtonId: "clear-button",
-			tableBodyId: "table-body",
-			paginationContainerId: "pagination-container",
-			confirmFileSelectionId: "confirm-file-selection",
-			type: "captures",
-			apiEndpoint: "/api/search/",
-			formHandler: {
-				setSearchHandler: jest.fn(),
-			},
-			isEditMode: false,
-			initialFileDetails: {},
-			initialCaptureDetails: {},
-		};
-
-		// Mock API responses
-		global.APIClient.get.mockResolvedValue({
+		const defaultSearchResponse = {
 			success: true,
 			results: [
 				{ id: 1, name: "Test Capture 1", type: "rh" },
@@ -96,14 +42,33 @@ describe("AssetSearchHandler", () => {
 				has_next: false,
 				has_previous: false,
 			},
+		};
+
+		setupStandardUnitTest({
+			getElementByIdMap: createAssetSearchGetElementByIdMap({
+				mockForm,
+				mockButton,
+				mockTableBody,
+			}),
+			apiClientOverrides: {
+				request: jest.fn().mockResolvedValue(defaultSearchResponse),
+			},
 		});
 
-		// Mock window.datasetEditingHandler
-		global.window = {
+		mockConfig = createDefaultAssetSearchConfig();
+
+		document.querySelector = jest.fn((selector) => {
+			if (selector === "#captures-table tbody") {
+				return mockTableBody;
+			}
+			return null;
+		});
+
+		mergeWindowMocks({
 			datasetEditingHandler: {
 				addFileToPending: jest.fn(),
 			},
-		};
+		});
 	});
 
 	describe("Initialization", () => {
diff --git a/gateway/sds_gateway/static/js/search/__tests__/DatasetSearchHandler.test.js b/gateway/sds_gateway/static/js/search/__tests__/DatasetSearchHandler.test.js
index 6c665646a..3b79395c7 100644
--- a/gateway/sds_gateway/static/js/search/__tests__/DatasetSearchHandler.test.js
+++ b/gateway/sds_gateway/static/js/search/__tests__/DatasetSearchHandler.test.js
@@ -1,12 +1,19 @@
 /**
- * Jest tests for DatasetSearchHandler
- * Tests search functionality for published datasets
+ * Jest tests for ListPageSearchController (list-page GET search)
  */
 
-// Import the DatasetSearchHandler class
-import { DatasetSearchHandler } from "../DatasetSearchHandler.js";
+import { ListPageSearchController } from "../AssetSearchHandler.js";
 
-describe("DatasetSearchHandler", () => {
+const {
+	setupStandardUnitTest,
+	createMockFormElement,
+	createMockButtonElement,
+	createDefaultDatasetSearchConfig,
+	createDatasetSearchGetElementByIdMap,
+	installMockDatasetListLocation,
+} = require("../../tests-config/testHelpers.js");
+
+describe("ListPageSearchController", () => {
 	let searchHandler;
 	let mockConfig;
 	let mockForm;
@@ -17,86 +24,40 @@ describe("DatasetSearchHandler", () => {
 	let mockResultsCount;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Mock DOM elements
-		mockForm = {
-			addEventListener: jest.fn(),
-			querySelectorAll: jest.fn(() => []),
-		};
-
-		mockSearchButton = {
-			addEventListener: jest.fn(),
-		};
-
-		mockClearButton = {
-			addEventListener: jest.fn(),
-		};
-
-		mockResultsContainer = {
-			innerHTML: "",
-		};
-
-		mockResultsTbody = {
-			innerHTML: "",
-		};
-
-		mockResultsCount = {
-			textContent: "",
-		};
-
-		// Mock document methods
-		document.getElementById = jest.fn((id) => {
-			const elements = {
-				"search-form": mockForm,
-				"search-button": mockSearchButton,
-				"clear-button": mockClearButton,
-				"results-container": mockResultsContainer,
-				"results-tbody": mockResultsTbody,
-				"results-count": mockResultsCount,
-			};
-			return elements[id] || null;
+		mockForm = createMockFormElement();
+		mockSearchButton = createMockButtonElement();
+		mockClearButton = createMockButtonElement();
+		mockResultsContainer = { innerHTML: "" };
+		mockResultsTbody = { innerHTML: "" };
+		mockResultsCount = { textContent: "" };
+
+		setupStandardUnitTest({
+			getElementByIdMap: createDatasetSearchGetElementByIdMap({
+				mockForm,
+				mockSearchButton,
+				mockClearButton,
+				mockResultsContainer,
+				mockResultsTbody,
+				mockResultsCount,
+			}),
+			apiClient: false,
 		});
 
-		document.querySelector = jest.fn(() => null);
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Mock config
-		mockConfig = {
-			searchFormId: "search-form",
-			searchButtonId: "search-button",
-			clearButtonId: "clear-button",
-			resultsContainerId: "results-container",
-			resultsTbodyId: "results-tbody",
-			resultsCountId: "results-count",
-		};
-
-		// Mock window.location
-		Object.defineProperty(window, "location", {
-			value: {
-				href: "http://localhost:8000/datasets/",
-				pathname: "/datasets/",
-				search: "",
-			},
-			writable: true,
-		});
+		mockConfig = createDefaultDatasetSearchConfig();
+		installMockDatasetListLocation();
 	});
 
 	describe("Initialization", () => {
 		test("should initialize with correct configuration", () => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 
 			expect(searchHandler.searchForm).toBe(mockForm);
 			expect(searchHandler.searchButton).toBe(mockSearchButton);
 			expect(searchHandler.clearButton).toBe(mockClearButton);
-			expect(searchHandler.resultsContainer).toBe(mockResultsContainer);
-			expect(searchHandler.resultsTbody).toBe(mockResultsTbody);
-			expect(searchHandler.resultsCount).toBe(mockResultsCount);
 		});
 
 		test("should initialize event listeners on construction", () => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 
 			// Form should have submit listener
 			expect(mockForm.addEventListener).toHaveBeenCalledWith(
@@ -124,7 +85,7 @@ describe("DatasetSearchHandler", () => {
 			});
 
 			expect(() => {
-				searchHandler = new DatasetSearchHandler(mockConfig);
+				searchHandler = new ListPageSearchController(mockConfig);
 			}).not.toThrow();
 
 			expect(searchHandler.searchForm).toBeNull();
@@ -133,7 +94,7 @@ describe("DatasetSearchHandler", () => {
 
 	describe("Event Listeners", () => {
 		beforeEach(() => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 		});
 
 		test("should setup form submit event listener", () => {
@@ -160,7 +121,7 @@ describe("DatasetSearchHandler", () => {
 			searchHandler.initializeEnterKeyListener();
 
 			expect(mockForm.querySelectorAll).toHaveBeenCalledWith(
-				"input[type='text'], input[type='number']",
+				"input[type='text'], input[type='search'], input[type='number']",
 			);
 			expect(mockInput.addEventListener).toHaveBeenCalledWith(
 				"keypress",
@@ -193,7 +154,7 @@ describe("DatasetSearchHandler", () => {
 				};
 				return elements[id] || null;
 			});
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 			const mockInputListener = { addEventListener: jest.fn(), type: "text" };
 			realForm.querySelectorAll = jest.fn(() => [mockInputListener]);
 			searchHandler.initializeEnterKeyListener();
@@ -247,7 +208,7 @@ describe("DatasetSearchHandler", () => {
 
 	describe("Search Functionality", () => {
 		beforeEach(() => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 		});
 
 		test("should handle search form submission", () => {
@@ -263,7 +224,8 @@ describe("DatasetSearchHandler", () => {
 			// Mock URLSearchParams
 			global.URLSearchParams = jest.fn(() => ({
 				append: jest.fn(),
-				toString: () => "query=test+query&type=spectrum",
+				set: jest.fn(),
+				toString: () => "query=test+query&type=spectrum&page=1",
 			}));
 
 			// Mock window.location.href setter
@@ -300,6 +262,7 @@ describe("DatasetSearchHandler", () => {
 			const toStringSpy = jest.fn(() => "query=test&type=spectrum");
 			global.URLSearchParams = jest.fn(() => ({
 				append: appendSpy,
+				set: jest.fn(),
 				toString: toStringSpy,
 			}));
 
@@ -309,6 +272,7 @@ describe("DatasetSearchHandler", () => {
 				get: () => ({
 					href: locationHref,
 					pathname: "/datasets/",
+					search: "",
 				}),
 				set: (value) => {
 					locationHref = value;
@@ -338,7 +302,8 @@ describe("DatasetSearchHandler", () => {
 			const appendSpy = jest.fn();
 			global.URLSearchParams = jest.fn(() => ({
 				append: appendSpy,
-				toString: () => "query=test",
+				set: jest.fn(),
+				toString: () => "query=test&page=1",
 			}));
 
 			searchHandler.handleSearch();
@@ -360,7 +325,8 @@ describe("DatasetSearchHandler", () => {
 			const appendSpy = jest.fn();
 			global.URLSearchParams = jest.fn(() => ({
 				append: appendSpy,
-				toString: () => "query=test+query",
+				set: jest.fn(),
+				toString: () => "query=test+query&page=1",
 			}));
 
 			searchHandler.handleSearch();
@@ -394,7 +360,7 @@ describe("DatasetSearchHandler", () => {
 
 	describe("Clear Functionality", () => {
 		beforeEach(() => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 		});
 
 		test("should clear all form inputs", () => {
@@ -492,7 +458,7 @@ describe("DatasetSearchHandler", () => {
 			document.getElementById.mockReturnValue(null);
 
 			expect(() => {
-				searchHandler = new DatasetSearchHandler(mockConfig);
+				searchHandler = new ListPageSearchController(mockConfig);
 			}).not.toThrow();
 
 			expect(searchHandler.searchForm).toBeNull();
@@ -500,7 +466,7 @@ describe("DatasetSearchHandler", () => {
 		});
 
 		test("should handle form with no inputs", () => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 			mockForm.querySelectorAll.mockReturnValue([]);
 
 			expect(() => {
@@ -509,7 +475,7 @@ describe("DatasetSearchHandler", () => {
 		});
 
 		test("should handle search with no form values", () => {
-			searchHandler = new DatasetSearchHandler(mockConfig);
+			searchHandler = new ListPageSearchController(mockConfig);
 
 			// Mock FormData with no entries
 			global.FormData = jest.fn(() => ({
@@ -519,7 +485,8 @@ describe("DatasetSearchHandler", () => {
 			// Mock URLSearchParams
 			global.URLSearchParams = jest.fn(() => ({
 				append: jest.fn(),
-				toString: () => "",
+				set: jest.fn(),
+				toString: () => "page=1",
 			}));
 
 			// Track location changes
diff --git a/gateway/sds_gateway/static/js/share/ShareGroupManager.js b/gateway/sds_gateway/static/js/share/ShareGroupManager.js
index 250887361..c8272c2bf 100644
--- a/gateway/sds_gateway/static/js/share/ShareGroupManager.js
+++ b/gateway/sds_gateway/static/js/share/ShareGroupManager.js
@@ -3,12 +3,13 @@
  * Handles all share group operations including creating, managing members, and deleting groups
  * Refactored to use core components and centralized management
  */
-class ShareGroupManager {
+class ShareGroupManager extends ModalManager {
 	/**
 	 * Initialize share group manager
 	 * @param {Object} config - Configuration object
 	 */
 	constructor(config = {}) {
+		super();
 		this.currentGroupUuid = null;
 		this.currentGroupName = null;
 		this.pendingDeleteGroupUuid = null;
@@ -25,6 +26,42 @@ class ShareGroupManager {
 		this.initializeEventListeners();
 	}
 
+	/**
+	 * @param {Record<string, string>} fields
+	 */
+	/**
+	 * @param {object} response
+	 * @param {{ defaultError?: string }} [opts]
+	 * @returns {boolean}
+	 */
+	handleShareGroupResponse(response, opts = {}) {
+		if (response.success) {
+			this.successMessage(response.message);
+			if (response.errors?.length) {
+				for (const error of response.errors) {
+					this.warningMessage(error);
+				}
+			}
+			return true;
+		}
+		this.errorMessage(response.error || opts.defaultError || "Request failed.");
+		return false;
+	}
+
+	async postShareGroupAction(fields) {
+		const formData = new URLSearchParams();
+		for (const [key, value] of Object.entries(fields)) {
+			formData.append(key, value);
+		}
+		return window.APIClient.request(this.config.apiEndpoint, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			body: formData,
+		});
+	}
+
 	/**
 	 * Initialize all event listeners
 	 */
@@ -61,29 +98,22 @@ class ShareGroupManager {
 		const groupName = document.getElementById("groupName").value;
 
 		if (!groupName.trim()) {
-			this.showAlert("Group name is required", "error");
+			this.errorMessage("Group name is required");
 			return;
 		}
 
-		const formData = new URLSearchParams();
-		formData.append("action", "create");
-		formData.append("name", groupName);
-
 		try {
-			const response = await window.APIClient.request(this.config.apiEndpoint, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/x-www-form-urlencoded",
-				},
-				body: formData,
+			const response = await this.postShareGroupAction({
+				action: "create",
+				name: groupName,
 			});
 
 			if (response.success) {
 				// Show success message
-				this.showAlert(response.message, "success");
+				this.successMessage(response.message);
 
 				// Close the create modal
-				window.DOMUtils.closeModal("createGroupModal");
+				this.closeModal("createGroupModal");
 
 				// Clear the form
 				document.getElementById("groupName").value = "";
@@ -99,7 +129,7 @@ class ShareGroupManager {
 					);
 				}, 500);
 			} else {
-				this.showAlert(response.error, "error");
+				this.errorMessage(response.error);
 			}
 		} catch (error) {
 			// Extract specific error message from the response
@@ -111,7 +141,7 @@ class ShareGroupManager {
 					"Bad request - please check the form data and try again.";
 			}
 
-			this.showAlert(errorMessage, "error");
+			this.errorMessage(errorMessage);
 		}
 	}
 
@@ -139,55 +169,38 @@ class ShareGroupManager {
 			: [];
 
 		if (selectedUsers.length === 0) {
-			this.showAlert("Please select at least one user to add.", "error");
+			this.errorMessage("Please select at least one user to add.");
 			return;
 		}
 
 		const userEmails = selectedUsers.map((user) => user.email).join(",");
 
-		const formData = new URLSearchParams();
-		formData.append("action", "add_members");
-		formData.append("group_uuid", this.currentGroupUuid);
-		formData.append("user_emails", userEmails);
-
 		try {
-			const response = await window.APIClient.request(this.config.apiEndpoint, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/x-www-form-urlencoded",
-				},
-				body: formData,
+			const response = await this.postShareGroupAction({
+				action: "add_members",
+				group_uuid: this.currentGroupUuid,
+				user_emails: userEmails,
 			});
 
-			if (response.success) {
-				// Show success message in toast
-				this.showAlert(response.message, "success");
-
-				// Show any errors as warnings
-				if (response.errors && response.errors.length > 0) {
-					for (const error of response.errors) {
-						this.showAlert(error, "warning");
-					}
-				}
-
+			if (
+				this.handleShareGroupResponse(response, {
+					defaultError: "An error occurred while adding members.",
+				})
+			) {
 				if (this.shareGroupUserSearchHandler) {
 					this.shareGroupUserSearchHandler.resetShareGroup();
 				}
-				// Clear pending removals when members are added
 				this.pendingRemovals.clear();
 				this.loadCurrentMembers();
 				this.updateSaveButtonState();
 
-				// Update table member info by adding the new members
-				if (response.added_users && response.added_users.length > 0) {
+				if (response.added_users?.length) {
 					this.updateTableMemberEmails(
 						this.currentGroupUuid,
 						response.added_users,
 						"add",
 					);
 				}
-			} else {
-				this.showAlert(response.error, "error");
 			}
 		} catch (error) {
 			// Extract specific error message from the response
@@ -196,7 +209,7 @@ class ShareGroupManager {
 				errorMessage = error.data.error;
 			}
 
-			this.showAlert(errorMessage, "error");
+			this.errorMessage(errorMessage);
 		}
 	}
 
@@ -283,38 +296,18 @@ class ShareGroupManager {
 
 		// Handle pending removals
 		if (this.pendingRemovals.size > 0) {
-			const formData = new URLSearchParams();
-			formData.append("action", "remove_members");
-			formData.append("group_uuid", this.currentGroupUuid);
-			formData.append(
-				"user_emails",
-				Array.from(this.pendingRemovals).join(","),
-			);
-
 			try {
-				const response = await window.APIClient.request(
-					this.config.apiEndpoint,
-					{
-						method: "POST",
-						headers: {
-							"Content-Type": "application/x-www-form-urlencoded",
-						},
-						body: formData,
-					},
-				);
-
-				if (response.success) {
-					// Show success message in toast
-					this.showAlert(response.message, "success");
-
-					// Show any errors as warnings
-					if (response.errors && response.errors.length > 0) {
-						for (const error of response.errors) {
-							this.showAlert(error, "warning");
-						}
-					}
+				const response = await this.postShareGroupAction({
+					action: "remove_members",
+					group_uuid: this.currentGroupUuid,
+					user_emails: Array.from(this.pendingRemovals).join(","),
+				});
 
-					// Clear pending removals
+				if (
+					this.handleShareGroupResponse(response, {
+						defaultError: "An error occurred while removing members.",
+					})
+				) {
 					this.pendingRemovals.clear();
 					// Reset all remove buttons
 					this.resetRemoveButtons();
@@ -329,17 +322,14 @@ class ShareGroupManager {
 							"remove",
 						);
 					}
-				} else {
-					this.showAlert(response.error, "error");
 				}
 			} catch (error) {
-				// Extract specific error message from the response
 				let errorMessage = "An error occurred while removing members.";
 				if (error.data?.error) {
 					errorMessage = error.data.error;
 				}
 
-				this.showAlert(errorMessage, "error");
+				this.errorMessage(errorMessage);
 			} finally {
 				button.innerHTML = originalText;
 				button.disabled = false;
@@ -386,14 +376,14 @@ class ShareGroupManager {
 			});
 
 			// Hide the confirmation modal
-			window.DOMUtils.closeModal("deleteGroupModal");
+			this.closeModal("deleteGroupModal");
 
 			if (response.success) {
 				// Store success message for after page reload
 				localStorage.setItem("shareGroupSuccessMessage", response.message);
 				setTimeout(() => window.location.reload(), 1000);
 			} else {
-				this.showAlert(response.error, "error");
+				this.errorMessage(response.error);
 			}
 		} catch (error) {
 			// Extract specific error message from the response
@@ -402,7 +392,7 @@ class ShareGroupManager {
 				errorMessage = error.data.error;
 			}
 
-			this.showAlert(errorMessage, "error");
+			this.errorMessage(errorMessage);
 		} finally {
 			// Reset button state
 			button.innerHTML = originalText;
@@ -421,6 +411,7 @@ class ShareGroupManager {
 		if (!this.currentGroupUuid) return;
 
 		const membersList = document.getElementById("currentMembers");
+		if (!membersList) return;
 
 		// Clear member count and show loading state
 		const memberCountElement = document.getElementById("memberCount");
@@ -436,10 +427,11 @@ class ShareGroupManager {
 					cells: [
 						{
 							kind: "html",
+							tag: "div",
 							class: "text-center text-muted",
 							nested: [
 								{
-									tag: "icon",
+									tag: "i",
 									class: "bi bi-people",
 								},
 								{
@@ -476,38 +468,28 @@ class ShareGroupManager {
 						cells: [
 							{
 								kind: "html",
-								class: "row",
+								tag: "div",
 								nested: [
 									{
-										tag: "div",
-										class: "col-md-10",
+										tag: "h5",
+										class: "mb-1",
+										text: member.name || "No name",
+									},
+									{
+										tag: "p",
+										class: "mb-0",
 										nested: [
 											{
-												tag: "div",
-												nested: [
-													{
-														tag: "h5",
-														class: "mb-1",
-														text: member.name || "No name",
-													},
-													{
-														tag: "p",
-														class: "mb-0",
-														nested: [
-															{
-																tag: "small",
-																class: "text-muted",
-																text: member.email,
-															},
-														],
-													},
-												],
+												tag: "small",
+												class: "text-muted",
+												text: member.email,
 											},
 										],
 									},
 								],
 							},
 						],
+						actions_td_class: "text-end",
 						actions: [
 							{
 								label: "Remove",
@@ -529,8 +511,15 @@ class ShareGroupManager {
 					});
 				} catch (renderError) {
 					console.error("Error rendering members:", renderError);
-					membersList.innerHTML =
-						'<tr><td class="p-2 shadow-sm"><div class="text-center text-danger">Error loading members</div></td></tr>';
+					await this.showMessageInTarget(
+						"Error loading members",
+						membersList,
+						{
+							variant: "danger",
+							presentation: "table",
+							templateContext: { colspan: 1 },
+						},
+					);
 				}
 
 				// Update member count
@@ -551,24 +540,23 @@ class ShareGroupManager {
 				// Update save button state after loading members
 				this.updateSaveButtonState();
 			} else {
-				// Show error state using centralized renderError
-				const errorDiv = document.createElement("div");
-				await window.DOMUtils.renderError(errorDiv, "Error loading members", {
-					format: "alert",
-					alert_type: "danger",
-					icon: "exclamation-triangle",
-				});
-				membersList.innerHTML = `<tr><td class="p-2 shadow-sm">${errorDiv.innerHTML}</td></tr>`;
+				await this.showMessageInTarget(
+					response.error || "Error loading members",
+					membersList,
+					{
+						variant: "danger",
+						presentation: "table",
+						templateContext: { colspan: 1 },
+					},
+				);
 			}
 		} catch (error) {
-			// Show error state using centralized renderError
-			const errorDiv = document.createElement("div");
-			await window.DOMUtils.renderError(errorDiv, "Error loading members", {
-				format: "alert",
-				alert_type: "danger",
-				icon: "exclamation-triangle",
+			console.error("Error loading members:", error);
+			await this.showMessageInTarget("Error loading members", membersList, {
+				variant: "danger",
+				presentation: "table",
+				templateContext: { colspan: 1 },
 			});
-			membersList.innerHTML = `<tr><td class="p-2 shadow-sm">${errorDiv.innerHTML}</td></tr>`;
 		}
 	}
 
@@ -703,10 +691,10 @@ class ShareGroupManager {
 		// Hide any other open modals first
 		const openModals = document.querySelectorAll(".modal.show");
 		for (const modal of openModals) {
-			window.DOMUtils.closeModal(modal.id);
+			this.closeModal(modal.id);
 		}
 
-		window.DOMUtils.openModal("deleteGroupModal");
+		this.openModal("deleteGroupModal");
 	}
 
 	/**
@@ -930,94 +918,20 @@ class ShareGroupManager {
 	 * @param {Element} input - Search input element
 	 */
 	setupSearchInput(input) {
-		// Prevent duplicate event listener attachment
-		if (input.dataset.searchSetup === "true") {
-			return;
-		}
-		input.dataset.searchSetup = "true";
-
-		const dropdown = this.getDropdownForInput(input);
-		const form = input.closest("form");
-		const inputId = input.id;
-		if (!this.shareGroupUserSearchHandler.selectedUsersMap[inputId]) {
-			this.shareGroupUserSearchHandler.selectedUsersMap[inputId] = [];
-		}
-
-		// Debounced search on input
-		input.addEventListener("input", (e) => {
-			clearTimeout(this.shareGroupUserSearchHandler.searchTimeout);
-			const query = e.target.value.trim();
-
-			if (query.length < 2) {
-				this.hideDropdown(dropdown);
-				return;
-			}
-
-			this.shareGroupUserSearchHandler.searchTimeout = setTimeout(() => {
-				this.shareGroupUserSearchHandler.searchUsers(query, dropdown);
-			}, 300);
-		});
-
-		// Handle keyboard navigation
-		input.addEventListener("keydown", (e) => {
-			const visibleItems = dropdown.querySelectorAll(
-				".list-group-item:not(.no-results)",
-			);
-			const currentIndex = Array.from(visibleItems).findIndex((item) =>
-				item.classList.contains("selected"),
-			);
-
-			switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, 1);
-					break;
-				case "ArrowUp":
-					e.preventDefault();
-					this.navigateDropdown(visibleItems, currentIndex, -1);
-					break;
-				case "Enter": {
-					e.preventDefault();
-					const selectedItem = dropdown.querySelector(
-						".list-group-item.selected",
-					);
-					if (selectedItem) {
-						this.shareGroupUserSearchHandler.selectUser(selectedItem, input);
-					}
-					break;
-				}
-				case "Escape":
-					this.hideDropdown(dropdown);
-					input.blur();
-					break;
-			}
-		});
-
-		// Handle clicks outside to close dropdown
-		document.addEventListener("click", (e) => {
-			if (!input.contains(e.target) && !dropdown.contains(e.target)) {
-				this.hideDropdown(dropdown);
-			}
-		});
-
-		// Handle dropdown item clicks
-		dropdown.addEventListener("click", (e) => {
-			const item = e.target.closest(".list-group-item");
-			if (item && !item.classList.contains("no-results")) {
-				e.preventDefault();
-				e.stopPropagation();
-				this.shareGroupUserSearchHandler.selectUser(item, input);
-			}
+		const handler = this.shareGroupUserSearchHandler;
+		window.UserInputController.bindUserSearchInput(input, {
+			selectedUsersMap: handler.selectedUsersMap,
+			getSearchTimeout: () => handler.searchTimeout,
+			setSearchTimeout: (id) => {
+				handler.searchTimeout = id;
+			},
+			getDropdownForInput: (inp) => this.getDropdownForInput(inp),
+			hideDropdown: (d) => this.hideDropdown(d),
+			navigateDropdown: (items, idx, dir) =>
+				this.navigateDropdown(items, idx, dir),
+			searchUsers: (query, d) => handler.searchUsers(query, d),
+			selectUser: (item, inp) => handler.selectUser(item, inp),
 		});
-
-		// On form submit, set input value to comma-separated emails
-		if (form) {
-			form.addEventListener("submit", (e) => {
-				input.value = this.shareGroupUserSearchHandler.selectedUsersMap[inputId]
-					.map((u) => u.email)
-					.join(",");
-			});
-		}
 	}
 
 	/**
@@ -1026,40 +940,7 @@ class ShareGroupManager {
 	 * @returns {Element|null} Dropdown element
 	 */
 	getDropdownForInput(input) {
-		// First try the original pattern: user-search-dropdown-{uuid}
-		let dropdown = document.getElementById(
-			`user-search-dropdown-${input.id.replace("user-search-", "")}`,
-		);
-
-		if (dropdown) {
-			return dropdown;
-		}
-
-		// Try alternative patterns
-		const alternativeIds = [
-			"user-search-dropdown-sharegroup",
-			"user-search-dropdown",
-			`${input.id}-dropdown`,
-		];
-
-		for (const id of alternativeIds) {
-			dropdown = document.getElementById(id);
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		// If still not found, look for any dropdown in the same container
-		const container = input.closest(".user-search-input-container");
-		if (container) {
-			dropdown = container.querySelector(".user-search-dropdown");
-			if (dropdown) {
-				return dropdown;
-			}
-		}
-
-		console.error(`Could not find dropdown for input: ${input.id}`);
-		return null;
+		return window.UserSearchDropdown.getDropdownForInput(input, {});
 	}
 
 	/**
@@ -1069,34 +950,7 @@ class ShareGroupManager {
 	 * @param {number} direction - Direction to navigate
 	 */
 	navigateDropdown(items, currentIndex, direction) {
-		// Remove current selection
-		for (const item of items) {
-			item.classList.remove("selected");
-		}
-
-		// Calculate new index
-		let newIndex;
-		if (currentIndex === -1) {
-			// No item is currently selected
-			if (direction > 0) {
-				// ArrowDown: start from first item
-				newIndex = 0;
-			} else {
-				// ArrowUp: start from last item
-				newIndex = items.length - 1;
-			}
-		} else {
-			// An item is currently selected
-			newIndex = currentIndex + direction;
-			if (newIndex < 0) newIndex = items.length - 1;
-			if (newIndex >= items.length) newIndex = 0;
-		}
-
-		// Add selection to new item
-		if (items[newIndex]) {
-			items[newIndex].classList.add("selected");
-			items[newIndex].scrollIntoView({ block: "nearest" });
-		}
+		window.UserSearchDropdown.navigateDropdown(items, currentIndex, direction);
 	}
 
 	/**
@@ -1104,9 +958,7 @@ class ShareGroupManager {
 	 * @param {Element} dropdown - Dropdown element
 	 */
 	showDropdown(dropdown) {
-		if (dropdown) {
-			dropdown.classList.remove("d-none");
-		}
+		window.UserSearchDropdown.showDropdown(dropdown);
 	}
 
 	/**
@@ -1114,13 +966,7 @@ class ShareGroupManager {
 	 * @param {Element} dropdown - Dropdown element
 	 */
 	hideDropdown(dropdown) {
-		if (dropdown) {
-			dropdown.classList.add("d-none");
-			// Clear any selections
-			for (const item of dropdown.querySelectorAll(".list-group-item")) {
-				item.classList.remove("selected");
-			}
-		}
+		window.UserSearchDropdown.hideDropdown(dropdown);
 	}
 
 	/**
@@ -1332,20 +1178,6 @@ class ShareGroupManager {
 		}
 	}
 
-	/**
-	 * Show Alert Function - Wrapper for global showAlert
-	 * @param {string} message - Alert message
-	 * @param {string} type - Alert type (info, success, warning, error)
-	 */
-	showAlert(message, type = "info") {
-		// Use DOMUtils.showAlert for toast notifications
-		if (window.DOMUtils) {
-			window.DOMUtils.showAlert(message, type);
-		} else {
-			console.error("DOMUtils not available");
-		}
-	}
-
 	/**
 	 * Add new group to the table dynamically
 	 * @param {Object} groupData - Group data object
@@ -1422,7 +1254,7 @@ class ShareGroupManager {
 		this.loadSharedAssetsInfo();
 
 		// Show the modal
-		window.DOMUtils.openModal("share-modal-sharegroup");
+		this.openModal("share-modal-sharegroup");
 	}
 }
 
diff --git a/gateway/sds_gateway/static/js/share/UserSearchDropdown.js b/gateway/sds_gateway/static/js/share/UserSearchDropdown.js
new file mode 100644
index 000000000..5c9593db7
--- /dev/null
+++ b/gateway/sds_gateway/static/js/share/UserSearchDropdown.js
@@ -0,0 +1,98 @@
+/**
+ * Shared DOM helpers for user-search dropdowns in share modals.
+ * Used by ShareActionManager and ShareGroupManager.
+ */
+class UserSearchDropdown {
+	/**
+	 * @param {HTMLInputElement} input
+	 * @param {{ itemUuid?: string }} [options]
+	 * @returns {Element|null}
+	 */
+	static getDropdownForInput(input, options = {}) {
+		if (!input) return null;
+
+		const suffix = input.id.replace("user-search-", "");
+		let dropdown = document.getElementById(`user-search-dropdown-${suffix}`);
+		if (dropdown) {
+			return dropdown;
+		}
+
+		const altIds = [];
+		if (options.itemUuid) {
+			altIds.push(`user-search-dropdown-${options.itemUuid}`);
+		}
+		altIds.push(
+			"user-search-dropdown-sharegroup",
+			"user-search-dropdown",
+			input.id.replace("user-search-", "user-search-dropdown-"),
+			`${input.id}-dropdown`,
+		);
+
+		for (const id of altIds) {
+			dropdown = document.getElementById(id);
+			if (dropdown) {
+				return dropdown;
+			}
+		}
+
+		const container = input.closest(".user-search-input-container");
+		if (container) {
+			dropdown = container.querySelector(".user-search-dropdown");
+			if (dropdown) {
+				return dropdown;
+			}
+		}
+
+		console.error(`Could not find dropdown for input: ${input.id}`);
+		return null;
+	}
+
+	/**
+	 * @param {NodeListOf<Element>|Element[]} items
+	 * @param {number} currentIndex
+	 * @param {number} direction
+	 */
+	static navigateDropdown(items, currentIndex, direction) {
+		for (const item of items) {
+			item.classList.remove("selected");
+		}
+
+		let newIndex;
+		if (currentIndex === -1) {
+			newIndex = direction > 0 ? 0 : items.length - 1;
+		} else {
+			newIndex = currentIndex + direction;
+			if (newIndex < 0) newIndex = items.length - 1;
+			if (newIndex >= items.length) newIndex = 0;
+		}
+
+		if (items[newIndex]) {
+			items[newIndex].classList.add("selected");
+			items[newIndex].scrollIntoView({ block: "nearest" });
+		}
+	}
+
+	/** @param {Element|null|undefined} dropdown */
+	static showDropdown(dropdown) {
+		if (dropdown) {
+			dropdown.classList.remove("d-none");
+		}
+	}
+
+	/** @param {Element|null|undefined} dropdown */
+	static hideDropdown(dropdown) {
+		if (dropdown) {
+			dropdown.classList.add("d-none");
+			for (const item of dropdown.querySelectorAll(".list-group-item")) {
+				item.classList.remove("selected");
+			}
+		}
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.UserSearchDropdown = UserSearchDropdown;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { UserSearchDropdown };
+}
diff --git a/gateway/sds_gateway/static/js/share/__tests__/ShareGroupManager.test.js b/gateway/sds_gateway/static/js/share/__tests__/ShareGroupManager.test.js
index 4257f3671..7cfbec9d3 100644
--- a/gateway/sds_gateway/static/js/share/__tests__/ShareGroupManager.test.js
+++ b/gateway/sds_gateway/static/js/share/__tests__/ShareGroupManager.test.js
@@ -6,44 +6,26 @@
 // Import the ShareGroupManager class
 import { ShareGroupManager } from "../ShareGroupManager.js";
 
+const { setupStandardUnitTest } = require("../../tests-config/testHelpers.js");
+
 describe("ShareGroupManager", () => {
 	let shareGroupManager;
 	let mockConfig;
 
 	beforeEach(() => {
-		// Reset mocks
-		jest.clearAllMocks();
-
-		// Mock configuration
 		mockConfig = {
 			apiEndpoint: "/users/share-groups/",
 		};
 
-		// Minimal DOM mocks
-		document.getElementById = jest.fn(() => null);
-		document.querySelector = jest.fn(() => null);
-		document.querySelectorAll = jest.fn(() => []);
-
-		// Minimal API mocks
-		global.window = {
-			APIClient: {
+		setupStandardUnitTest({
+			useModalDomUtils: true,
+			apiClientOverrides: {
 				request: jest.fn().mockResolvedValue({ success: true }),
 				get: jest.fn().mockResolvedValue({ success: true }),
 				post: jest.fn().mockResolvedValue({ html: "<div>Test HTML</div>" }),
 			},
-			DOMUtils: {
-				show: jest.fn(),
-				hide: jest.fn(),
-				showAlert: jest.fn(),
-				renderError: jest.fn().mockResolvedValue(true),
-				renderLoading: jest.fn().mockResolvedValue(true),
-				renderContent: jest.fn().mockResolvedValue(true),
-				renderTable: jest.fn().mockResolvedValue(true),
-			},
-			showAlert: jest.fn(),
-		};
+		});
 
-		// Minimal Bootstrap mock
 		global.bootstrap = {
 			Modal: jest.fn().mockImplementation(() => ({
 				show: jest.fn(),
@@ -75,98 +57,34 @@ describe("ShareGroupManager", () => {
 			expect(manager.config.customProperty).toBe("value");
 		});
 
-		test("should initialize event listeners", () => {
-			shareGroupManager = new ShareGroupManager(mockConfig);
-
-			expect(typeof shareGroupManager.initializeEventListeners).toBe(
-				"function",
-			);
-		});
 	});
 
-	describe("Group Creation", () => {
+	describe("Member Removal", () => {
 		beforeEach(() => {
 			shareGroupManager = new ShareGroupManager(mockConfig);
-		});
-
-		test("should handle create group form submission successfully", async () => {
-			const mockForm = {
-				addEventListener: jest.fn(),
-				querySelector: jest.fn(() => ({ value: "Test Group" })),
-			};
-
-			const mockSearchInput = {
-				dataset: {},
-				addEventListener: jest.fn(),
-			};
-
 			document.getElementById = jest.fn((id) => {
-				if (id === "share-group-create-form") return mockForm;
-				if (id === "share-group-user-search-input") return mockSearchInput;
-				return null;
-			});
-
-			document.querySelector = jest.fn((selector) => {
-				if (selector === "#share-group-user-search-input")
-					return mockSearchInput;
+				if (id === "save-sharegroup-btn") {
+					return { disabled: true };
+				}
+				if (id === "add-members-btn") {
+					return { disabled: true };
+				}
 				return null;
 			});
-
-			expect(() => {
-				shareGroupManager.initializeEventListeners();
-			}).not.toThrow();
 		});
-	});
-
-	describe("Member Management", () => {
-		beforeEach(() => {
-			shareGroupManager = new ShareGroupManager(mockConfig);
-		});
-
-		test("should handle add members successfully", async () => {
-			const mockForm = {
-				addEventListener: jest.fn(),
-				querySelector: jest.fn(() => null),
-			};
-			document.getElementById = jest.fn(() => mockForm);
 
-			expect(() => {
-				shareGroupManager.initializeEventListeners();
-			}).not.toThrow();
-		});
-	});
-
-	describe("Member Removal", () => {
-		beforeEach(() => {
-			shareGroupManager = new ShareGroupManager(mockConfig);
-		});
-
-		test.each([
-			[true, "when there are pending removals"],
-			[false, "when no pending removals"],
-		])("should handle save button %s", (hasRemovals, description) => {
-			if (hasRemovals) {
-				shareGroupManager.pendingRemovals.add("test@example.com");
-			}
-
-			expect(() => {
-				shareGroupManager.updateSaveButtonState();
-			}).not.toThrow();
-		});
-	});
-
-	describe("Group Deletion", () => {
-		beforeEach(() => {
-			shareGroupManager = new ShareGroupManager(mockConfig);
-		});
+		test("updateSaveButtonState enables save only when removals are pending", () => {
+			const saveBtn = { disabled: true };
+			document.getElementById = jest.fn((id) =>
+				id === "save-sharegroup-btn" ? saveBtn : null,
+			);
 
-		test("should show delete confirmation modal", () => {
-			const mockModal = { show: jest.fn() };
-			global.bootstrap.Modal.mockImplementation(() => mockModal);
+			shareGroupManager.updateSaveButtonState();
+			expect(saveBtn.disabled).toBe(true);
 
-			expect(() => {
-				new ShareGroupManager(mockConfig);
-			}).not.toThrow();
+			shareGroupManager.pendingRemovals.add("member@example.com");
+			shareGroupManager.updateSaveButtonState();
+			expect(saveBtn.disabled).toBe(false);
 		});
 	});
 
@@ -175,28 +93,36 @@ describe("ShareGroupManager", () => {
 			shareGroupManager = new ShareGroupManager(mockConfig);
 		});
 
-		test("should update table member info", () => {
-			const mockTableBody = {
-				querySelector: jest.fn(() => ({
-					style: { display: "block" },
-					innerHTML: "",
-				})),
-			};
-			document.querySelector = jest.fn(() => mockTableBody);
-
-			// Mock DOMUtils methods
+		test("updateTableMemberInfo sets count and first three emails", () => {
+			const memberCountElement = { textContent: "" };
+			const memberEmailsElement = { innerHTML: "" };
+			document.querySelector = jest.fn((selector) => {
+				if (selector.includes("member-count")) {
+					return memberCountElement;
+				}
+				if (selector.includes("member-emails")) {
+					return memberEmailsElement;
+				}
+				return null;
+			});
 			global.window.DOMUtils.show = jest.fn();
 			global.window.DOMUtils.hide = jest.fn();
 
-			// updateTableMemberInfo expects (groupUuid, members array)
 			const members = [
-				{ email: "test@example.com", name: "Test User" },
-				{ email: "test2@example.com", name: "Test User 2" },
+				{ email: "a@example.com" },
+				{ email: "b@example.com" },
+				{ email: "c@example.com" },
+				{ email: "d@example.com" },
 			];
 
-			expect(() => {
-				shareGroupManager.updateTableMemberInfo("test-uuid", members);
-			}).not.toThrow();
+			shareGroupManager.updateTableMemberInfo("group-1", members);
+
+			expect(memberCountElement.textContent).toBe("4 members");
+			expect(memberEmailsElement.innerHTML).toContain("a@example.com");
+			expect(memberEmailsElement.innerHTML).toContain("and 1 more");
+			expect(global.window.DOMUtils.show).toHaveBeenCalledWith(
+				memberEmailsElement,
+			);
 		});
 	});
 
@@ -205,17 +131,23 @@ describe("ShareGroupManager", () => {
 			shareGroupManager = new ShareGroupManager(mockConfig);
 		});
 
-		test.each([
-			["with global showAlert available", true],
-			["with missing global showAlert", false],
-		])("should show alert %s", (description, hasShowAlert) => {
-			if (!hasShowAlert) {
-				global.window.showAlert = undefined;
-			}
-
-			expect(() => {
-				shareGroupManager.showAlert("Test message", "success");
-			}).not.toThrow();
+		test("domToast path uses showMessage when group name missing", async () => {
+			document.getElementById = jest.fn((id) => {
+				if (id === "groupName") return { value: "" };
+				return null;
+			});
+			global.window.DOMUtils.showMessage = jest.fn();
+			const mgr = new ShareGroupManager(mockConfig);
+			await mgr.handleCreateGroup({});
+
+			expect(global.window.DOMUtils.showMessage).toHaveBeenCalledWith(
+				"Group name is required",
+				expect.objectContaining({
+					variant: "danger",
+					placement: "toast",
+					presentation: "toast",
+				}),
+			);
 		});
 	});
 
@@ -313,18 +245,4 @@ describe("ShareGroupManager", () => {
 		});
 	});
 
-	describe("Error Handling", () => {
-		beforeEach(() => {
-			shareGroupManager = new ShareGroupManager(mockConfig);
-		});
-
-		test.each([["API errors"], ["network errors"]])(
-			"should handle %s gracefully",
-			(errorType) => {
-				expect(() => {
-					new ShareGroupManager(mockConfig);
-				}).not.toThrow();
-			},
-		);
-	});
 });
diff --git a/gateway/sds_gateway/static/js/share/__tests__/UserSearchDropdown.test.js b/gateway/sds_gateway/static/js/share/__tests__/UserSearchDropdown.test.js
new file mode 100644
index 000000000..ef9dc0941
--- /dev/null
+++ b/gateway/sds_gateway/static/js/share/__tests__/UserSearchDropdown.test.js
@@ -0,0 +1,64 @@
+/**
+ * Jest tests for UserSearchDropdown
+ */
+
+import { UserSearchDropdown } from "../UserSearchDropdown.js";
+
+describe("UserSearchDropdown", () => {
+	beforeEach(() => {
+		document.body.innerHTML = "";
+	});
+
+	test("getDropdownForInput finds primary id from input suffix", () => {
+		document.body.innerHTML = `
+			<input id="user-search-item-1" />
+			<div id="user-search-dropdown-item-1" class="user-search-dropdown"></div>
+		`;
+		const input = document.getElementById("user-search-item-1");
+
+		expect(UserSearchDropdown.getDropdownForInput(input)).toBe(
+			document.getElementById("user-search-dropdown-item-1"),
+		);
+	});
+
+	test("getDropdownForInput falls back to container query", () => {
+		document.body.innerHTML = `
+			<div class="user-search-input-container">
+				<input id="user-search-custom" />
+				<div class="user-search-dropdown"></div>
+			</div>
+		`;
+		const input = document.getElementById("user-search-custom");
+
+		expect(
+			UserSearchDropdown.getDropdownForInput(input)?.classList.contains(
+				"user-search-dropdown",
+			),
+		).toBe(true);
+	});
+
+	test("navigateDropdown wraps and selects item", () => {
+		const items = [
+			{ classList: { add: jest.fn(), remove: jest.fn() }, scrollIntoView: jest.fn() },
+			{ classList: { add: jest.fn(), remove: jest.fn() }, scrollIntoView: jest.fn() },
+		];
+
+		UserSearchDropdown.navigateDropdown(items, -1, 1);
+
+		expect(items[0].classList.add).toHaveBeenCalledWith("selected");
+		expect(items[0].scrollIntoView).toHaveBeenCalled();
+	});
+
+	test("hideDropdown clears selected state", () => {
+		document.body.innerHTML = `
+			<div class="user-search-dropdown">
+				<div class="list-group-item selected"></div>
+			</div>
+		`;
+		const dropdown = document.querySelector(".user-search-dropdown");
+		UserSearchDropdown.hideDropdown(dropdown);
+
+		expect(dropdown.classList.contains("d-none")).toBe(true);
+		expect(dropdown.querySelector(".selected")).toBeNull();
+	});
+});
diff --git a/gateway/sds_gateway/static/js/tests-config/jest.config.js b/gateway/sds_gateway/static/js/tests-config/jest.config.js
index bd22ca40d..a56c2f1d1 100644
--- a/gateway/sds_gateway/static/js/tests-config/jest.config.js
+++ b/gateway/sds_gateway/static/js/tests-config/jest.config.js
@@ -24,11 +24,9 @@ module.exports = {
 		// Exclude specific legacy files
 		"!sds_gateway/static/js/components.js",
 		"!sds_gateway/static/js/file_list_upload_capture_modal.js",
-		"!sds_gateway/static/js/file-list.js",
-		"!sds_gateway/static/js/file-manager.js",
-		"!sds_gateway/static/js/files-ui.js",
+		"!sds_gateway/static/js/file-list.js", // legacy path (not shipped at this URL)
+		"!sds_gateway/static/js/upload/uploadBootstrap.js",
 		"!sds_gateway/static/js/vendors.js",
-		"!sds_gateway/static/js/files-upload.js",
 		"!sds_gateway/static/js/theme.js",
 	],
 
diff --git a/gateway/sds_gateway/static/js/tests-config/jest.setup.js b/gateway/sds_gateway/static/js/tests-config/jest.setup.js
index 2affad24b..858ce1738 100644
--- a/gateway/sds_gateway/static/js/tests-config/jest.setup.js
+++ b/gateway/sds_gateway/static/js/tests-config/jest.setup.js
@@ -1,5 +1,13 @@
 // Jest setup file for global test configuration
 
+const { TextDecoder, TextEncoder } = require("node:util");
+if (typeof globalThis.TextEncoder === "undefined") {
+	globalThis.TextEncoder = TextEncoder;
+}
+if (typeof globalThis.TextDecoder === "undefined") {
+	globalThis.TextDecoder = TextDecoder;
+}
+
 // Mock DOM environment
 const mockDOM = {
 	createElement: (tag) => ({
@@ -27,6 +35,7 @@ const mockDOM = {
 	querySelector: jest.fn(() => null),
 	querySelectorAll: jest.fn(() => []),
 	getElementById: jest.fn(() => null),
+	head: { appendChild: jest.fn() },
 	createTextNode: jest.fn((text) => ({ textContent: text })),
 	addEventListener: jest.fn(),
 	removeEventListener: jest.fn(),
@@ -86,6 +95,25 @@ Object.defineProperty(mockWindow.location, "href", {
 global.document = mockDOM;
 global.window = mockWindow;
 
+require("../search/AssetSearchHandler.js");
+require("../actions/quickAdd/quickAddApi.js");
+require("../actions/download/captureDownloadSlider.js");
+require("../dataset/datasetFormSnapshot.js");
+// Classes referenced by `extends` / static calls in browser bundles
+const { BaseManager } = require("../core/BaseManager.js");
+global.BaseManager = BaseManager;
+const { ModalManager } = require("../core/ModalManager.js");
+global.ModalManager = ModalManager;
+global.window.ModalManager = ModalManager;
+
+require("../upload/UploadUtils.js");
+require("../upload/CaptureTypeSelector.js");
+require("../upload/CaptureUploadController.js");
+require("../upload/FileUploadHandler.js");
+require("../upload/FilesBrowserManager.js");
+const { UserInputController } = require("../core/UserInputController.js");
+global.UserInputController = UserInputController;
+
 // Mock console methods to reduce noise in tests
 global.console = {
 	...console,
@@ -222,33 +250,50 @@ global.bootstrap = {
 // Mock window.bootstrap (some code uses window.bootstrap)
 global.window.bootstrap = global.bootstrap;
 
-// Mock APIClient for template rendering
-global.window.APIClient = {
-	get: jest.fn().mockResolvedValue({ success: true }),
-	post: jest.fn().mockResolvedValue({ html: "<div>Mock HTML</div>" }),
-	put: jest.fn().mockResolvedValue({ success: true }),
-	patch: jest.fn().mockResolvedValue({ success: true }),
-	delete: jest.fn().mockResolvedValue({ success: true }),
-	request: jest.fn().mockResolvedValue({ success: true }),
-	getCSRFToken: jest.fn().mockReturnValue("mock-csrf-token"),
-	getCookie: jest.fn().mockReturnValue(null),
+// Mock APIClient as a real class (production uses `new window.APIClient()`; jest.fn is not a reliable constructor)
+global.window.APIClient = class MockAPIClient {
+	get() {
+		return Promise.resolve({ success: true });
+	}
+	post() {
+		return Promise.resolve({ html: "<div>Mock HTML</div>" });
+	}
+	put() {
+		return Promise.resolve({ success: true });
+	}
+	patch() {
+		return Promise.resolve({ success: true });
+	}
+	delete() {
+		return Promise.resolve({ success: true });
+	}
+	request() {
+		return Promise.resolve({ success: true });
+	}
+	getCSRFToken() {
+		return "mock-csrf-token";
+	}
+	getCookie() {
+		return null;
+	}
 };
 
-// Mock DOMUtils
-global.window.DOMUtils = {
-	show: jest.fn(),
-	hide: jest.fn(),
-	showAlert: jest.fn(),
-	renderError: jest.fn().mockResolvedValue(true),
-	renderLoading: jest.fn().mockResolvedValue(true),
-	renderContent: jest.fn().mockResolvedValue(true),
-	renderTable: jest.fn().mockResolvedValue(true),
-	renderSelectOptions: jest.fn().mockResolvedValue(true),
-	renderPagination: jest.fn().mockResolvedValue(true),
-	renderDropdown: jest.fn().mockResolvedValue("<div>Mock Dropdown</div>"),
-};
+// Mock DOMUtils (shared shape; tests may override fields)
+const { createMockDOMUtils } = require("./testHelpers.js");
+global.window.DOMUtils = createMockDOMUtils();
 
-// Mock global showAlert function
-global.window.showAlert = jest.fn();
+global.window.showMessage = jest.fn().mockResolvedValue(true);
 global.window.showToast = jest.fn();
 global.window.hideToast = jest.fn();
+
+const { AuthorsManager } = require("../dataset/AuthorsManager.js");
+const { DatasetAuthorsUI } = require("../dataset/DatasetAuthorsUI.js");
+const { DatasetPendingChanges } = require("../dataset/DatasetPendingChanges.js");
+const { UserSearchDropdown } = require("../share/UserSearchDropdown.js");
+const { UploadUtils } = require("../upload/UploadUtils.js");
+global.window.AuthorsManager = AuthorsManager;
+global.window.DatasetAuthorsUI = DatasetAuthorsUI;
+global.window.DatasetPendingChanges = DatasetPendingChanges;
+global.window.UserSearchDropdown = UserSearchDropdown;
+global.window.UploadUtils = UploadUtils;
+global.window.ChunkUploadPipeline = UploadUtils;
diff --git a/gateway/sds_gateway/static/js/tests-config/testHelpers.js b/gateway/sds_gateway/static/js/tests-config/testHelpers.js
new file mode 100644
index 000000000..1e49822e2
--- /dev/null
+++ b/gateway/sds_gateway/static/js/tests-config/testHelpers.js
@@ -0,0 +1,497 @@
+/**
+ * Shared Jest helpers for static/js tests (DOMUtils mocks, microtask flush).
+ */
+
+/** @returns {Record<string, jest.Mock>} */
+function createMockDOMUtils(overrides = {}) {
+	return {
+		show: jest.fn(),
+		hide: jest.fn(),
+		showMessage: jest.fn().mockResolvedValue(true),
+		showVisualizationPanel: jest.fn().mockResolvedValue(true),
+		hideVisualizationPanel: jest.fn(),
+		showError: jest.fn().mockResolvedValue(true),
+		renderLoading: jest.fn().mockResolvedValue(true),
+		renderContent: jest.fn().mockResolvedValue(true),
+		renderTable: jest.fn().mockResolvedValue(true),
+		renderSelectOptions: jest.fn().mockResolvedValue(true),
+		renderPagination: jest.fn().mockResolvedValue(true),
+		renderDropdown: jest.fn().mockResolvedValue("<div>Mock Dropdown</div>"),
+		...overrides,
+	};
+}
+
+/** DOMUtils shape used by Share/Download action tests. */
+function createMockDOMUtilsWithModals(overrides = {}) {
+	return createMockDOMUtils({
+		showModalLoading: jest.fn().mockResolvedValue(true),
+		clearModalLoading: jest.fn(),
+		showModalError: jest.fn().mockResolvedValue(true),
+		openModal: jest.fn(),
+		closeModal: jest.fn(),
+		...overrides,
+	});
+}
+
+function installMinimalDocumentMocks() {
+	document.getElementById = jest.fn(() => null);
+	document.querySelector = jest.fn(() => null);
+	document.querySelectorAll = jest.fn(() => []);
+}
+
+function installDocumentQueryStubs() {
+	document.querySelector = jest.fn(() => null);
+	document.querySelectorAll = jest.fn(() => []);
+}
+
+/**
+ * @param {Record<string, unknown>} idToElement
+ */
+function installDocumentGetByIdMap(idToElement) {
+	document.getElementById = jest.fn((id) => idToElement[id] ?? null);
+}
+
+function mergeWindowMocks(overrides = {}) {
+	if (typeof global.window === "undefined") {
+		global.window = {};
+	}
+	Object.assign(global.window, overrides);
+	return global.window;
+}
+
+function createMockAPIClient(overrides = {}) {
+	return {
+		get: jest.fn().mockResolvedValue({ success: true }),
+		post: jest.fn().mockResolvedValue({ success: true }),
+		request: jest.fn().mockResolvedValue({ success: true }),
+		...overrides,
+	};
+}
+
+function createMockPermissionsManager(overrides = {}) {
+	return {
+		userPermissionLevel: "owner",
+		isOwner: true,
+		currentUserId: 1,
+		datasetPermissions: { canEditMetadata: true },
+		canEditMetadata: jest.fn(() => true),
+		canAddAssets: jest.fn(() => true),
+		canRemoveOwnAssets: jest.fn(() => true),
+		canRemoveAnyAssets: jest.fn(() => true),
+		canShare: jest.fn(() => true),
+		canDownload: jest.fn(() => true),
+		canView: jest.fn(() => true),
+		canAddAsset: jest.fn(() => true),
+		canRemoveAsset: jest.fn(() => true),
+		...overrides,
+	};
+}
+
+function createMockFormElement(extra = {}) {
+	return {
+		addEventListener: jest.fn(),
+		querySelectorAll: jest.fn(() => []),
+		...extra,
+	};
+}
+
+function createMockButtonElement(extra = {}) {
+	return {
+		addEventListener: jest.fn(),
+		disabled: false,
+		...extra,
+	};
+}
+
+function createDefaultAssetSearchConfig(overrides = {}) {
+	return {
+		searchFormId: "search-form",
+		searchButtonId: "search-button",
+		clearButtonId: "clear-button",
+		tableBodyId: "table-body",
+		paginationContainerId: "pagination-container",
+		confirmFileSelectionId: "confirm-file-selection",
+		type: "captures",
+		apiEndpoint: "/api/search/",
+		formHandler: {
+			setSearchHandler: jest.fn(),
+			selectedCaptures: new Set(),
+			selectedFiles: new Set(),
+		},
+		isEditMode: false,
+		initialFileDetails: {},
+		initialCaptureDetails: {},
+		...overrides,
+	};
+}
+
+function createAssetSearchGetElementByIdMap({
+	mockForm,
+	mockButton,
+	mockTableBody,
+}) {
+	return {
+		"search-form": mockForm,
+		"search-button": mockButton,
+		"clear-button": mockButton,
+		"table-body": mockTableBody,
+		"pagination-container": { innerHTML: "" },
+		"confirm-file-selection": mockButton,
+	};
+}
+
+function createDatasetSearchGetElementByIdMap({
+	mockForm,
+	mockSearchButton,
+	mockClearButton,
+	mockResultsContainer,
+	mockResultsTbody,
+	mockResultsCount,
+}) {
+	return {
+		"search-form": mockForm,
+		"search-button": mockSearchButton,
+		"clear-button": mockClearButton,
+		"results-container": mockResultsContainer,
+		"results-tbody": mockResultsTbody,
+		"results-count": mockResultsCount,
+	};
+}
+
+function createDefaultDatasetSearchConfig(overrides = {}) {
+	return {
+		searchFormId: "search-form",
+		searchButtonId: "search-button",
+		clearButtonId: "clear-button",
+		resultsContainerId: "results-container",
+		resultsTbodyId: "results-tbody",
+		resultsCountId: "results-count",
+		...overrides,
+	};
+}
+
+/**
+ * @param {Record<string, string|null>} getAttributeMap
+ */
+function createMockWebDownloadButton(getAttributeMap = {}) {
+	const mockButton = {
+		dataset: { downloadSetup: "false" },
+		addEventListener: jest.fn(),
+		removeEventListener: jest.fn(),
+		getAttribute: jest.fn((attr) => getAttributeMap[attr] ?? null),
+		click: jest.fn(),
+		disabled: false,
+		textContent: "Download",
+		innerHTML: "Download",
+		parentNode: { replaceChild: jest.fn() },
+		cloneNode: jest.fn(),
+	};
+	mockButton.cloneNode.mockImplementation(() => mockButton);
+	return mockButton;
+}
+
+function createMockWebDownloadModal() {
+	return {
+		addEventListener: jest.fn(),
+		querySelector: jest.fn(),
+		querySelectorAll: jest.fn(() => []),
+		getAttribute: jest.fn(),
+		setAttribute: jest.fn(),
+		removeEventListener: jest.fn(),
+	};
+}
+
+function installWebDownloadDomMocks(mockButton, mockModal) {
+	document.querySelector = jest.fn(() => mockButton);
+	document.querySelectorAll = jest.fn((selector) =>
+		selector === ".web-download-btn" ? [mockButton] : [],
+	);
+	document.getElementById = jest.fn((id) => {
+		if (id.startsWith("webDownloadModal-")) return mockModal;
+		if (id.startsWith("webDownloadModalLabel-")) return { innerHTML: "" };
+		if (id.startsWith("webDownloadDatasetName-")) return { textContent: "" };
+		if (id.startsWith("confirmWebDownloadBtn-")) return mockButton;
+		return null;
+	});
+}
+
+function installMockWindowOrigin(origin = "http://localhost:8000") {
+	if (!global.window) {
+		global.window = {};
+	}
+	Object.defineProperty(global.window, "location", {
+		value: { origin },
+		writable: true,
+		configurable: true,
+	});
+	if (typeof window !== "undefined") {
+		Object.defineProperty(window, "location", {
+			value: { origin },
+			writable: true,
+			configurable: true,
+		});
+	}
+}
+
+/**
+ * Standard beforeEach: preserve jest.setup globals on window, refresh DOM/API mocks.
+ * @param {object} [opts]
+ * @param {Record<string, unknown>} [opts.getElementByIdMap]
+ * @param {object} [opts.window]
+ * @param {object|false} [opts.apiClient] - false to skip APIClient assignment
+ * @param {object} [opts.apiClientOverrides]
+ */
+function setupStandardUnitTest(opts = {}) {
+	jest.clearAllMocks();
+	installDocumentQueryStubs();
+	if (opts.getElementByIdMap) {
+		installDocumentGetByIdMap(opts.getElementByIdMap);
+	} else {
+		installMinimalDocumentMocks();
+	}
+	const domUtils =
+		opts.domUtils ??
+		(opts.useModalDomUtils
+			? createMockDOMUtilsWithModals(opts.domUtilsOverrides)
+			: createMockDOMUtils(opts.domUtilsOverrides));
+	mergeWindowMocks({
+		DOMUtils: domUtils,
+		...opts.window,
+	});
+	if (opts.useModalDomUtils) {
+		require("../core/BaseManager.js");
+		const { ModalManager } = require("../core/ModalManager.js");
+		mergeWindowMocks({ ModalManager, BaseManager: global.BaseManager });
+	}
+	if (opts.apiClient !== false) {
+		const api = createMockAPIClient(opts.apiClientOverrides);
+		global.APIClient = api;
+		mergeWindowMocks({ APIClient: api });
+	}
+	return { domUtils };
+}
+
+function mockDatasetEditingHandlerConfig(overrides = {}) {
+	return {
+		datasetUuid: "test-dataset-uuid",
+		permissions: createMockPermissionsManager(overrides.permissions),
+		currentUserId: 1,
+		initialCaptures: overrides.initialCaptures ?? [
+			{ id: 1, name: "Capture 1", type: "drf", owner_id: 1 },
+			{ id: 2, name: "Capture 2", type: "drf", owner_id: 2 },
+		],
+		initialFiles: overrides.initialFiles ?? [
+			{ id: 1, name: "file1.h5", size: "1.2 MB", owner_id: 1 },
+			{ id: 2, name: "file2.h5", size: "2.5 MB", owner_id: 2 },
+		],
+		...overrides,
+	};
+}
+
+function createPermissionsManagerMockInstance() {
+	return {
+		canEditMetadata: jest.fn(() => true),
+		canAddAssets: jest.fn(() => true),
+		canRemoveAnyAssets: jest.fn(() => true),
+		canRemoveOwnAssets: jest.fn(() => true),
+		canShare: jest.fn(() => true),
+		canDownload: jest.fn(() => true),
+		canView: jest.fn(() => true),
+	};
+}
+
+function installMockDatasetListLocation() {
+	Object.defineProperty(window, "location", {
+		value: {
+			href: "http://localhost:8000/datasets/",
+			pathname: "/datasets/",
+			search: "",
+		},
+		writable: true,
+	});
+}
+
+function flushMicrotasks() {
+	return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/** @param {object} opts */
+function createMockFetchResponse(opts = {}) {
+	const {
+		ok = true,
+		status = ok ? 200 : 404,
+		contentType = "application/json",
+		jsonData = { success: true },
+		textData = "plain text",
+		jsonReject,
+	} = opts;
+	const headers = { get: jest.fn(() => contentType) };
+	const response = {
+		ok,
+		status,
+		statusText: opts.statusText ?? (ok ? "OK" : "Not Found"),
+		headers,
+		json: jsonReject
+			? jest.fn().mockRejectedValue(jsonReject)
+			: jest.fn().mockResolvedValue(jsonData),
+		text: jest.fn().mockResolvedValue(textData),
+	};
+	return response;
+}
+
+function mockFetchResolved(mockFetch, responseOpts) {
+	mockFetch.mockResolvedValue(createMockFetchResponse(responseOpts));
+}
+
+function installMinimalDocumentForApiClient() {
+	global.document = {
+		querySelector: jest.fn(() => null),
+		cookie: "",
+	};
+}
+
+function installCsrfMetaToken(token = "test-csrf-token") {
+	const mockMetaToken = {
+		getAttribute: jest.fn(() => token),
+	};
+	global.document.querySelector = jest.fn((selector) => {
+		if (selector === 'meta[name="csrf-token"]') return mockMetaToken;
+		if (selector === '[name="csrfmiddlewaretoken"]') return null;
+		return null;
+	});
+	return mockMetaToken;
+}
+
+function createMockDatasetHandlerInstance(mode = "edit") {
+	const base = {
+		initialize: jest.fn(),
+		setupEventListeners: jest.fn(),
+		filesSearchHandler: {
+			initialize: jest.fn(),
+			search: jest.fn(),
+		},
+	};
+	if (mode === "edit") {
+		return {
+			...base,
+			loadDatasetData: jest.fn(),
+			markCaptureForRemoval: jest.fn(),
+			markFileForRemoval: jest.fn(),
+			getPendingChanges: jest.fn(),
+		};
+	}
+	return {
+		...base,
+		navigateStep: jest.fn(),
+		validateCurrentStep: jest.fn(),
+		updateReviewStep: jest.fn(),
+	};
+}
+
+function installDatasetModeHandlerMocks(
+	DatasetEditingHandler,
+	DatasetCreationHandler,
+) {
+	const editing = createMockDatasetHandlerInstance("edit");
+	const creation = createMockDatasetHandlerInstance("creation");
+	DatasetEditingHandler.mockImplementation(() => editing);
+	DatasetCreationHandler.mockImplementation(() => creation);
+	return { editing, creation };
+}
+
+/**
+ * DOM fixture for DatasetModeManager publish/submit tests.
+ */
+function createPublishingSubmitDomFixture(opts = {}) {
+	const {
+		publicChecked = true,
+		statusValue = "final",
+		publishToggleChecked = true,
+		includePublicOption = true,
+		includeStatus = true,
+	} = opts;
+	const submitBtn = document.createElement("button");
+	submitBtn.id = "submitForm";
+	submitBtn.classList = { contains: jest.fn(() => false) };
+	Object.defineProperty(submitBtn, "offsetParent", {
+		get: () => submitBtn,
+		configurable: true,
+	});
+	const elements = {
+		submitForm: submitBtn,
+	};
+	if (opts.includePublishToggle !== false) {
+		const publishToggle = document.createElement("input");
+		publishToggle.id = "publish-dataset-toggle";
+		publishToggle.checked = publishToggleChecked;
+		elements["publish-dataset-toggle"] = publishToggle;
+	}
+	if (includeStatus) {
+		const statusField = document.createElement("input");
+		statusField.id = "id_status";
+		statusField.value = statusValue;
+		elements.id_status = statusField;
+	}
+	if (includePublicOption) {
+		const publicOption = document.createElement("input");
+		publicOption.id = "public-option";
+		publicOption.checked = publicChecked;
+		elements["public-option"] = publicOption;
+	}
+	return {
+		submitBtn,
+		elements,
+		install() {
+			installDocumentGetByIdMap(elements);
+			window.getComputedStyle = jest.fn(() => ({ display: "block" }));
+		},
+	};
+}
+
+function createDatasetModeManagerMockConfig(overrides = {}) {
+	return {
+		datasetUuid: "test-dataset-uuid",
+		userPermissionLevel: "owner",
+		currentUserId: 1,
+		isOwner: true,
+		datasetPermissions: {
+			canEditMetadata: true,
+			canAddAssets: true,
+		},
+		...overrides,
+	};
+}
+
+module.exports = {
+	createMockDOMUtils,
+	createMockDOMUtilsWithModals,
+	installMinimalDocumentMocks,
+	installDocumentQueryStubs,
+	installDocumentGetByIdMap,
+	mergeWindowMocks,
+	createMockAPIClient,
+	createMockPermissionsManager,
+	createMockFormElement,
+	createMockButtonElement,
+	createDefaultAssetSearchConfig,
+	createAssetSearchGetElementByIdMap,
+	createDefaultDatasetSearchConfig,
+	createDatasetSearchGetElementByIdMap,
+	createMockWebDownloadButton,
+	createMockWebDownloadModal,
+	installWebDownloadDomMocks,
+	installMockWindowOrigin,
+	setupStandardUnitTest,
+	mockDatasetEditingHandlerConfig,
+	createPermissionsManagerMockInstance,
+	installMockDatasetListLocation,
+	flushMicrotasks,
+	createMockFetchResponse,
+	mockFetchResolved,
+	installMinimalDocumentForApiClient,
+	installCsrfMetaToken,
+	createMockDatasetHandlerInstance,
+	installDatasetModeHandlerMocks,
+	createPublishingSubmitDomFixture,
+	createDatasetModeManagerMockConfig,
+};
diff --git a/gateway/sds_gateway/static/js/theme.js b/gateway/sds_gateway/static/js/theme.js
deleted file mode 100644
index 82011b5f5..000000000
--- a/gateway/sds_gateway/static/js/theme.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2024 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- */
-
-export const setBootstrapTheme = () => {
-	const getStoredTheme = () => localStorage.getItem("theme");
-	const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
-
-	const getPreferredTheme = () => {
-		const storedTheme = getStoredTheme();
-		if (storedTheme) {
-			return storedTheme;
-		}
-
-		return window.matchMedia("(prefers-color-scheme: dark)").matches
-			? "dark"
-			: "light";
-	};
-
-	const setTheme = (theme) => {
-		if (theme === "auto") {
-			document.documentElement.setAttribute(
-				"data-bs-theme",
-				window.matchMedia("(prefers-color-scheme: dark)").matches
-					? "dark"
-					: "light",
-			);
-		} else {
-			document.documentElement.setAttribute("data-bs-theme", theme);
-		}
-	};
-
-	setTheme(getPreferredTheme());
-
-	const showActiveTheme = (theme, focus = false) => {
-		const themeSwitcher = document.querySelector("#bd-theme");
-
-		if (!themeSwitcher) {
-			return;
-		}
-
-		const themeSwitcherText = document.querySelector("#bd-theme-text");
-		const activeThemeIcon = document.querySelector(".theme-icon-active use");
-		const btnToActive = document.querySelector(
-			`[data-bs-theme-value="${theme}"]`,
-		);
-		const svgOfActiveBtn = btnToActive
-			.querySelector("svg use")
-			.getAttribute("href");
-
-		for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
-			element.classList.remove("active");
-			element.setAttribute("aria-pressed", "false");
-		}
-
-		btnToActive.classList.add("active");
-		btnToActive.setAttribute("aria-pressed", "true");
-		activeThemeIcon.setAttribute("href", svgOfActiveBtn);
-		const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
-		themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
-
-		if (focus) {
-			themeSwitcher.focus();
-		}
-	};
-
-	window
-		.matchMedia("(prefers-color-scheme: dark)")
-		.addEventListener("change", () => {
-			const storedTheme = getStoredTheme();
-			if (storedTheme !== "light" && storedTheme !== "dark") {
-				setTheme(getPreferredTheme());
-			}
-		});
-
-	window.addEventListener("DOMContentLoaded", () => {
-		showActiveTheme(getPreferredTheme());
-
-		// use for...of for better readability and consistency
-		const themeToggles = document.querySelectorAll("[data-bs-theme-value]");
-		for (const toggle of themeToggles) {
-			toggle.addEventListener("click", () => {
-				const theme = toggle.getAttribute("data-bs-theme-value");
-				setStoredTheme(theme);
-				setTheme(theme);
-				showActiveTheme(theme, true);
-			});
-		}
-	});
-};
diff --git a/gateway/sds_gateway/static/js/upload/CaptureTypeSelector.js b/gateway/sds_gateway/static/js/upload/CaptureTypeSelector.js
new file mode 100644
index 000000000..061f225e2
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/CaptureTypeSelector.js
@@ -0,0 +1,151 @@
+/**
+ * Capture type dropdown for upload capture modal.
+ */
+class CaptureTypeSelector {
+	constructor() {
+		this.boundHandlers = new Map(); // Track event handlers for cleanup
+		this.initializeElements();
+		this.setupEventListeners();
+	}
+
+	initializeElements() {
+		this.captureTypeSelect = document.getElementById("captureTypeSelect");
+		this.channelInputGroup = document.getElementById("channelInputGroup");
+		this.scanGroupInputGroup = document.getElementById("scanGroupInputGroup");
+		this.captureChannelsInput = document.getElementById("captureChannelsInput");
+		this.captureScanGroupInput = document.getElementById(
+			"captureScanGroupInput",
+		);
+		this.uploadModal = document.getElementById("uploadCaptureModal");
+	}
+
+	setupEventListeners() {
+		// Ensure boundHandlers is initialized
+		if (!this.boundHandlers) {
+			this.boundHandlers = new Map();
+		}
+
+		if (this.captureTypeSelect) {
+			const changeHandler = (e) => this.handleTypeChange(e);
+			this.boundHandlers.set(this.captureTypeSelect, changeHandler);
+			this.captureTypeSelect.addEventListener("change", changeHandler);
+			this.handleTypeChange({ target: this.captureTypeSelect });
+		}
+
+		if (this.uploadModal) {
+			const hiddenHandler = () => this.resetForm();
+			this.boundHandlers.set(this.uploadModal, hiddenHandler);
+			this.uploadModal.addEventListener("hidden.bs.modal", hiddenHandler);
+		}
+	}
+
+	handleTypeChange(event) {
+		const selectedType = event.target.value;
+
+		if (!selectedType) {
+			this.hideInputGroups();
+			this.clearRequiredAttributes();
+			return;
+		}
+
+		if (!this.validateCaptureType(selectedType)) {
+			console.warn("Invalid capture type selected:", selectedType);
+			this.hideInputGroups();
+			this.clearRequiredAttributes();
+			return;
+		}
+
+		// Hide both input groups initially
+		this.hideInputGroups();
+
+		// Clear required attributes
+		this.clearRequiredAttributes();
+
+		// Show appropriate input group based on selection
+		if (selectedType === "drf") {
+			this.showChannelInput();
+		} else if (selectedType === "rh") {
+			this.showScanGroupInput();
+		}
+	}
+
+	hideInputGroups() {
+		if (this.channelInputGroup) {
+			this.channelInputGroup.classList.add("hidden-input-group");
+		}
+		if (this.scanGroupInputGroup) {
+			this.scanGroupInputGroup.classList.add("hidden-input-group");
+		}
+	}
+
+	clearRequiredAttributes() {
+		if (this.captureChannelsInput) {
+			this.captureChannelsInput.removeAttribute("required");
+		}
+		if (this.captureScanGroupInput) {
+			this.captureScanGroupInput.removeAttribute("required");
+		}
+	}
+
+	showChannelInput() {
+		if (this.channelInputGroup) {
+			this.channelInputGroup.classList.remove("hidden-input-group");
+		}
+		if (this.captureChannelsInput) {
+			this.captureChannelsInput.setAttribute("required", "required");
+		}
+	}
+
+	showScanGroupInput() {
+		if (this.scanGroupInputGroup) {
+			this.scanGroupInputGroup.classList.remove("hidden-input-group");
+		}
+		// scan_group is optional for RadioHound captures, so no required attribute
+	}
+
+	// Input validation methods
+	validateCaptureType(type) {
+		const validTypes = ["drf", "rh"];
+		return validTypes.includes(type);
+	}
+
+	// Memory management and cleanup
+	cleanup() {
+		// Remove all bound event handlers
+		for (const [element, handler] of this.boundHandlers) {
+			if (element?.removeEventListener) {
+				element.removeEventListener("change", handler);
+				element.removeEventListener("hidden.bs.modal", handler);
+			}
+		}
+		this.boundHandlers.clear();
+		console.log("CaptureTypeSelector cleanup completed");
+	}
+
+	resetForm() {
+		// Reset the form
+		const form = document.getElementById("uploadCaptureForm");
+		if (form) {
+			form.reset();
+		}
+
+		// Hide input groups
+		this.hideInputGroups();
+
+		// Clear required attributes
+		this.clearRequiredAttributes();
+
+		// Clear global variables if they exist
+		this.cleanupGlobalState();
+	}
+
+	cleanupGlobalState() {
+		window.captureUploadController?.resetSession?.();
+	}
+}
+if (typeof window !== "undefined") {
+	window.CaptureTypeSelector = CaptureTypeSelector;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { CaptureTypeSelector };
+}
diff --git a/gateway/sds_gateway/static/js/upload/CaptureUploadController.js b/gateway/sds_gateway/static/js/upload/CaptureUploadController.js
new file mode 100644
index 000000000..289584be4
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/CaptureUploadController.js
@@ -0,0 +1,774 @@
+/**
+ * Capture folder upload modal: duplicate check, chunked upload, results.
+ */
+class CaptureUploadController extends ModalManager {
+	constructor(options = {}) {
+		super();
+		this.options = options;
+
+		this.isProcessing = false;
+		this.uploadInProgress = false;
+		this.cancelRequested = false;
+		this.currentAbortController = null;
+
+		this.uploadModal = null;
+		this.cancelButton = null;
+		this.closeButton = null;
+		this.submitButton = null;
+		this.fileInput = null;
+
+		this._beforeUnloadHandler = null;
+		this._visibilityHandler = null;
+
+		this.selectedFiles = [];
+		this.filesToSkip = null;
+		this.fileCheckResults = null;
+		this._fileInputChangeHandler = null;
+	}
+
+	init() {
+		this.uploadModal = document.getElementById(
+			this.options.uploadModalId || "uploadCaptureModal",
+		);
+		if (!this.uploadModal) {
+			console.warn("uploadCaptureModal not found");
+			return;
+		}
+
+		this.cancelButton =
+			this.uploadModal.querySelector(this.options.cancelButtonSelector) ||
+			this.uploadModal.querySelector(".btn-secondary");
+		this.closeButton =
+			this.uploadModal.querySelector(this.options.closeButtonSelector) ||
+			this.uploadModal.querySelector(".btn-close");
+		this.submitButton = document.getElementById(
+			this.options.submitButtonId || "uploadSubmitBtn",
+		);
+		this.fileInput = document.getElementById(
+			this.options.fileInputId || "captureFileInput",
+		);
+
+		if (!this.cancelButton || !this.closeButton || !this.submitButton) {
+			console.warn("Required buttons not found in upload modal");
+			return;
+		}
+
+		this.clearExistingResultModal();
+		this.clearUploadSessionStorage();
+		this.addBeforeUnloadGuard();
+		this.addVisibilityListener();
+		this.addModalStateResetHandlers();
+		this.addCancelHandlers();
+		this.addSubmitHandler();
+		this.wireFileInputSelection();
+	}
+
+	clearExistingResultModal() {
+		const resultModalId = "uploadResultModal";
+		const existingResultModal = document.getElementById(resultModalId);
+		if (!existingResultModal) return;
+		this.closeModal(resultModalId);
+	}
+
+	clearUploadSessionStorage() {
+		try {
+			if (sessionStorage.getItem("uploadInProgress")) {
+				sessionStorage.removeItem("uploadInProgress");
+			}
+		} catch (_) {}
+	}
+
+	addBeforeUnloadGuard() {
+		if (this._beforeUnloadHandler) {
+			window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+		}
+		this._beforeUnloadHandler = (e) => {
+			let inProgress = false;
+			try {
+				inProgress =
+					this.isProcessing ||
+					this.uploadInProgress ||
+					Boolean(sessionStorage.getItem("uploadInProgress"));
+			} catch (_) {
+				inProgress = this.isProcessing || this.uploadInProgress;
+			}
+			if (!inProgress) return;
+			e.preventDefault();
+			e.returnValue =
+				"Upload in progress will be aborted. Are you sure you want to leave?";
+			return e.returnValue;
+		};
+		window.addEventListener("beforeunload", this._beforeUnloadHandler);
+	}
+
+	addVisibilityListener() {
+		if (this._visibilityHandler) {
+			document.removeEventListener("visibilitychange", this._visibilityHandler);
+		}
+		this._visibilityHandler = () => {
+			// Preserve legacy behavior (no-op but keeps a hook if needed later)
+			if (document.visibilityState === "hidden" && this.uploadInProgress) {
+				// page hidden during upload
+			}
+		};
+		document.addEventListener("visibilitychange", this._visibilityHandler);
+	}
+
+	addModalStateResetHandlers() {
+		this.uploadModal.addEventListener("show.bs.modal", () => {
+			this.isProcessing = false;
+			this.currentAbortController = null;
+		});
+		this.uploadModal.addEventListener("hidden.bs.modal", () => {
+			this.isProcessing = false;
+			this.currentAbortController = null;
+		});
+	}
+
+	wireFileInputSelection() {
+		if (!this.fileInput || !this.uploadModal) return;
+
+		if (this._fileInputChangeHandler) {
+			this.fileInput.removeEventListener("change", this._fileInputChangeHandler);
+		}
+		this._fileInputChangeHandler = (event) => {
+			this.isProcessing = false;
+			this.currentAbortController = null;
+			const files = event.target.files;
+			if (!files?.length) return;
+			this.setSelectedFiles(Array.from(files));
+		};
+		this.fileInput.addEventListener("change", this._fileInputChangeHandler);
+	}
+
+	setSelectedFiles(files) {
+		this.selectedFiles = Array.isArray(files) ? files : [];
+	}
+
+	getSelectedFiles() {
+		return this.selectedFiles || [];
+	}
+
+	resetSession() {
+		this.selectedFiles = [];
+		this.filesToSkip = null;
+		this.fileCheckResults = null;
+		this.isProcessing = false;
+		this.uploadInProgress = false;
+		this.cancelRequested = false;
+		this.currentAbortController = null;
+	}
+
+	addCancelHandlers() {
+		this.cancelButton.addEventListener("click", () => {
+			this.handleCancellation("cancel");
+		});
+		this.closeButton.addEventListener("click", () => {
+			this.handleCancellation("close");
+		});
+	}
+
+	addSubmitHandler() {
+		const uploadForm = document.getElementById(
+			this.options.uploadFormId || "uploadCaptureForm",
+		);
+		if (!uploadForm) return;
+
+		uploadForm.addEventListener("submit", async (e) => {
+			e.preventDefault();
+
+			this.isProcessing = true;
+			this.uploadInProgress = true;
+			this.cancelRequested = false;
+			try {
+				sessionStorage.setItem("uploadInProgress", "true");
+			} catch (_) {}
+
+			try {
+				if (!this.selectedFiles || this.selectedFiles.length === 0) {
+					alert("Please select files to upload.");
+					return;
+				}
+
+				const files = this.selectedFiles;
+
+				if (this.checkForLargeFiles(files, this.cancelButton, this.submitButton)) {
+					return;
+				}
+
+				await this.checkFilesForDuplicates(files);
+
+				const { filesToUpload, relativePathsToUpload, allRelativePaths, skippedFilesCount } =
+					this.partitionFilesForUpload(files);
+
+				const uploadResults = await this.uploadFilesInChunks(
+					filesToUpload,
+					relativePathsToUpload,
+					allRelativePaths,
+					filesToUpload.length,
+				);
+
+				this.currentAbortController = null;
+
+				this.showUploadResults(
+					uploadResults,
+					uploadResults.saved_files_count,
+					files.length,
+					skippedFilesCount,
+				);
+			} catch (error) {
+				if (this.cancelRequested) {
+					if (!this.uploadInProgress) {
+						// cancelled during duplicate checking; legacy flow already alerted
+					} else {
+						alert(
+							"Upload cancelled. Any files uploaded before cancellation have been saved.",
+						);
+						setTimeout(() => window.location.reload(), 1000);
+					}
+				} else if (error?.name === "AbortError") {
+					alert(
+						"Upload was interrupted. Any files uploaded before the interruption have been saved.",
+					);
+					setTimeout(() => window.location.reload(), 1000);
+				} else if (
+					error?.name === "TypeError" &&
+					String(error?.message || "").includes("fetch")
+				) {
+					let shouldSuppress = false;
+					try {
+						shouldSuppress =
+							this.uploadInProgress || Boolean(sessionStorage.getItem("uploadInProgress"));
+					} catch (_) {}
+					if (!shouldSuppress) {
+						alert(
+							"Network error during upload. Please check your connection and try again.",
+						);
+					}
+				} else {
+					alert(`Upload failed: ${error?.message || "Unknown error"}`);
+					setTimeout(() => window.location.reload(), 1000);
+				}
+			} finally {
+				this.resetUIState();
+			}
+		});
+	}
+
+	partitionFilesForUpload(files) {
+		const filesToUpload = [];
+		const relativePathsToUpload = [];
+		const allRelativePaths = [];
+		let skippedFilesCount = 0;
+
+		for (const file of files) {
+			const directory = UploadUtils.getDirectoryPathFromFile(file);
+
+			const fileKey = `${directory}/${file.name}`;
+			const relativePath = file.webkitRelativePath || file.name;
+
+			allRelativePaths.push(relativePath);
+
+			if (!this.filesToSkip?.has?.(fileKey)) {
+				filesToUpload.push(file);
+				relativePathsToUpload.push(relativePath);
+			} else {
+				skippedFilesCount++;
+			}
+		}
+
+		return { filesToUpload, relativePathsToUpload, allRelativePaths, skippedFilesCount };
+	}
+
+	/**
+	 * @param {File[]} files
+	 * @param {HTMLElement} cancelButton
+	 * @param {HTMLElement} submitButton
+	 * @returns {boolean} true if large files blocked flow
+	 */
+	checkForLargeFiles(files, cancelButton, submitButton) {
+		const progressSection = document.getElementById("checkingProgressSection");
+		const LARGE_FILE_THRESHOLD = 512 * 1024 * 1024; // 512MB
+		const largeFiles = (files || []).filter(
+			(file) => file && file.size > LARGE_FILE_THRESHOLD,
+		);
+
+		if (largeFiles.length === 0) return false;
+
+		if (progressSection) progressSection.style.display = "none";
+		if (cancelButton) {
+			cancelButton.textContent = "Cancel";
+			cancelButton.classList.remove("btn-warning");
+			cancelButton.disabled = false;
+		}
+		if (submitButton) submitButton.disabled = false;
+
+		const largeFileNames = largeFiles.map((file) => file.name).join(", ");
+		const alertMessage = `Large files detected (over 512MB): ${largeFileNames}\n\nPlease:\n1. Skip these large files and upload the remaining files, or\n2. Use the SpectrumX SDK (https://pypi.org/project/spectrumx/) to upload large files and add them to your capture.\n\nLarge files may cause issues with the web interface.`;
+		alert(alertMessage);
+		return true;
+	}
+
+	
+
+	async checkFilesForDuplicates(files) {
+		const progressSection = document.getElementById("checkingProgressSection");
+		const progressBar = document.getElementById("checkingProgressBar");
+		const progressText = document.getElementById("checkingProgressText");
+		const progressMessage = document.getElementById("progressMessage");
+
+		if (progressSection) progressSection.style.display = "block";
+		if (progressMessage) progressMessage.textContent = "Processing files for upload...";
+
+		if (this.cancelButton) this.cancelButton.textContent = "Cancel Processing";
+		if (this.submitButton) this.submitButton.disabled = true;
+
+		this.filesToSkip = new Set();
+		this.fileCheckResults = new Map();
+
+		const csrfToken = window.APIClient.getCSRFToken();
+		if (!csrfToken) {
+			throw new Error("CSRF token not found");
+		}
+
+		const totalFiles = files.length;
+		const checkFileUrl =
+			document.querySelector("[data-check-file-url]")?.dataset?.checkFileUrl ||
+			"/users/check-file-exists/";
+
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
+
+			const progress = Math.round(((i + 1) / totalFiles) * 100);
+			if (progressBar) progressBar.style.width = `${progress}%`;
+			if (progressText) progressText.textContent = `${progress}%`;
+
+			const hashHex = await UploadUtils.calculateBlake3Hash(file);
+			const directory = UploadUtils.getDirectoryPathFromFile(file);
+
+			try {
+				const data = await UploadUtils.checkFileExistsOnServer(
+					file,
+					hashHex,
+					csrfToken,
+					checkFileUrl,
+				);
+
+				const fileKey = `${directory}/${file.name}`;
+				this.fileCheckResults.set(fileKey, {
+					file,
+					directory,
+					filename: file.name,
+					checksum: hashHex,
+					data: data.data,
+				});
+				if (data?.data?.file_exists_in_tree === true) {
+					this.filesToSkip.add(fileKey);
+				}
+			} catch (error) {
+				console.error("Error checking file:", error);
+			}
+
+			if (this.cancelRequested) {
+				break;
+			}
+		}
+
+		if (progressSection) progressSection.style.display = "none";
+
+		if (this.cancelRequested) {
+			if (progressSection) progressSection.style.display = "none";
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			alert("Processing cancelled. No files were uploaded.");
+			throw new Error("Upload cancelled by user");
+		}
+	}
+
+	async handleSkippedFilesUpload(allRelativePaths, abortController) {
+		const skippedFormData = new FormData();
+		for (const path of allRelativePaths) {
+			skippedFormData.append("all_relative_paths", path);
+		}
+
+		UploadUtils.appendCaptureTypeToFormData(skippedFormData);
+
+		const uploadUrl =
+			document.querySelector("[data-upload-url]")?.dataset?.uploadUrl ||
+			"/users/upload-capture/";
+		const csrfToken = window.APIClient.getCSRFToken();
+
+		const response = await fetch(uploadUrl, {
+			method: "POST",
+			headers: { "X-CSRFToken": csrfToken },
+			body: skippedFormData,
+			signal: abortController.signal,
+		});
+		return await response.json();
+	}
+
+	calculateTotalChunks(filesToUpload, chunkSizeBytes) {
+		return UploadUtils.calculateTotalChunks(filesToUpload, chunkSizeBytes);
+	}
+
+	async uploadChunk({
+		chunk,
+		chunkPaths,
+		chunkNum,
+		totalChunks,
+		filesProcessed,
+		isFinalChunk,
+		allResults,
+		allRelativePaths,
+		totalFiles,
+		chunkSizeBytes,
+	}) {
+		const progressBar = document.getElementById("checkingProgressBar");
+		const progressText = document.getElementById("checkingProgressText");
+		const progressMessage = document.getElementById("progressMessage");
+
+		const progress = Math.round((filesProcessed / totalFiles) * 100);
+		if (progressBar) progressBar.style.width = `${progress}%`;
+		if (progressText) progressText.textContent = `${progress}%`;
+
+		if (progressMessage) {
+			if (chunk.length === 1 && chunk[0].size > chunkSizeBytes) {
+				const file = chunk[0];
+				progressMessage.textContent = `Uploading large file: ${file.name} (${(file.size / (1024 * 1024)).toFixed(1)} MB)...`;
+			} else {
+				progressMessage.textContent = `Uploading chunk ${chunkNum}/${totalChunks} (${filesProcessed} files processed)...`;
+			}
+		}
+
+		const chunkFormData = new FormData();
+		for (const file of chunk) chunkFormData.append("files", file);
+		for (const path of chunkPaths) chunkFormData.append("relative_paths", path);
+		for (const path of allRelativePaths)
+			chunkFormData.append("all_relative_paths", path);
+
+		UploadUtils.appendCaptureTypeToFormData(chunkFormData);
+
+		chunkFormData.append("is_chunk", "true");
+		chunkFormData.append("chunk_number", String(chunkNum));
+		chunkFormData.append("total_chunks", String(totalChunks));
+
+		if (this.cancelRequested) {
+			throw new Error("Upload cancelled by user");
+		}
+
+		const controller = new AbortController();
+		this.currentAbortController = controller;
+
+		const MIN_AVG_UPLOAD_RATE = 100 * 1024; // 100KB/s
+		const MIN_TIMEOUT_MS = 30000;
+		const totalChunkBytes = chunk.reduce((t, f) => t + f.size, 0);
+		const calculatedTimeout = (totalChunkBytes / MIN_AVG_UPLOAD_RATE) * 1000;
+		const timeout = Math.max(calculatedTimeout, MIN_TIMEOUT_MS);
+		const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+		const uploadUrl =
+			document.querySelector("[data-upload-url]")?.dataset?.uploadUrl ||
+			"/users/upload-capture/";
+		const csrfToken = window.APIClient.getCSRFToken();
+
+		let response;
+		let chunkResult;
+		try {
+			response = await fetch(uploadUrl, {
+				method: "POST",
+				headers: { "X-CSRFToken": csrfToken },
+				body: chunkFormData,
+				signal: controller.signal,
+			});
+			clearTimeout(timeoutId);
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+			}
+			chunkResult = await response.json();
+		} catch (error) {
+			clearTimeout(timeoutId);
+			if (error?.name === "AbortError") {
+				throw new Error("Upload timeout - connection may be lost");
+			}
+			throw error;
+		}
+
+		if (chunkResult.saved_files_count !== undefined) {
+			allResults.saved_files_count += chunkResult.saved_files_count;
+		}
+		if (chunkResult.captures && isFinalChunk) {
+			allResults.captures = allResults.captures.concat(chunkResult.captures);
+		}
+		if (chunkResult.message && isFinalChunk) {
+			allResults.message = chunkResult.message;
+		}
+		if (chunkResult.errors) {
+			allResults.errors = allResults.errors.concat(chunkResult.errors);
+		}
+
+		if (chunkResult.file_upload_status === "error") {
+			allResults.file_upload_status = "error";
+			allResults.message = chunkResult.message || "Upload failed";
+			if (progressMessage) {
+				progressMessage.textContent =
+					"Upload aborted due to errors. Please check the results.";
+			}
+			throw new Error(`Upload failed: ${chunkResult.message}`);
+		}
+		if (chunkResult.file_upload_status === "success" && isFinalChunk) {
+			allResults.file_upload_status = "success";
+		}
+	}
+
+	async uploadFilesInChunks(
+		filesToUpload,
+		relativePathsToUpload,
+		allRelativePaths,
+		totalFiles,
+	) {
+		const progressBar = document.getElementById("checkingProgressBar");
+		const progressText = document.getElementById("checkingProgressText");
+		const progressMessage = document.getElementById("progressMessage");
+		const progressSection = document.getElementById("checkingProgressSection");
+
+		if (filesToUpload.length > 0) {
+			if (progressSection) progressSection.style.display = "block";
+			if (progressMessage)
+				progressMessage.textContent = "Uploading files and creating captures...";
+			if (progressBar) progressBar.style.width = "0%";
+			if (progressText) progressText.textContent = "0%";
+		}
+
+		const abortController = new AbortController();
+		this.currentAbortController = abortController;
+
+		const CHUNK_SIZE_BYTES = 50 * 1024 * 1024;
+
+		let allResults = {
+			file_upload_status: "success",
+			saved_files_count: 0,
+			captures: [],
+			errors: [],
+			message: "",
+		};
+
+		if (filesToUpload.length === 0) {
+			allResults = await this.handleSkippedFilesUpload(
+				allRelativePaths,
+				abortController,
+			);
+		} else {
+			let currentChunk = [];
+			let currentChunkPaths = [];
+			let currentChunkSize = 0;
+			let chunkNumber = 1;
+			let filesProcessed = 0;
+
+			const totalChunks = this.calculateTotalChunks(
+				filesToUpload,
+				CHUNK_SIZE_BYTES,
+			);
+
+			for (let i = 0; i < filesToUpload.length; i++) {
+				const file = filesToUpload[i];
+				const filePath = relativePathsToUpload[i];
+
+				if (
+					currentChunkSize + file.size > CHUNK_SIZE_BYTES &&
+					currentChunk.length > 0
+				) {
+					await this.uploadChunk({
+						chunk: currentChunk,
+						chunkPaths: currentChunkPaths,
+						chunkNum: chunkNumber,
+						totalChunks,
+						filesProcessed,
+						isFinalChunk: false,
+						allResults,
+						allRelativePaths,
+						totalFiles,
+						chunkSizeBytes: CHUNK_SIZE_BYTES,
+					});
+					currentChunk = [];
+					currentChunkPaths = [];
+					currentChunkSize = 0;
+					chunkNumber++;
+				}
+
+				currentChunk.push(file);
+				currentChunkPaths.push(filePath);
+				currentChunkSize += file.size;
+				filesProcessed++;
+
+				if (i === filesToUpload.length - 1) {
+					await this.uploadChunk({
+						chunk: currentChunk,
+						chunkPaths: currentChunkPaths,
+						chunkNum: chunkNumber,
+						totalChunks,
+						filesProcessed,
+						isFinalChunk: true,
+						allResults,
+						allRelativePaths,
+						totalFiles,
+						chunkSizeBytes: CHUNK_SIZE_BYTES,
+					});
+				}
+
+				if (this.cancelRequested) break;
+			}
+		}
+
+		if (this.cancelRequested) {
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			throw new Error("Upload cancelled by user");
+		}
+
+		if (allResults.file_upload_status === "error") {
+			this.currentAbortController = null;
+			this.showUploadResults(allResults, allResults.saved_files_count, totalFiles);
+			return allResults;
+		}
+
+		this.currentAbortController = null;
+		return allResults;
+	}
+
+	resetUIState() {
+		if (this.submitButton) this.submitButton.disabled = false;
+
+		const progressSection = document.getElementById("checkingProgressSection");
+		if (progressSection) progressSection.style.display = "none";
+
+		if (this.cancelButton) {
+			this.cancelButton.textContent = "Cancel";
+			this.cancelButton.classList.remove("btn-warning");
+			this.cancelButton.disabled = false;
+		}
+
+		if (this.closeButton) {
+			this.closeButton.disabled = false;
+			this.closeButton.style.opacity = "1";
+		}
+
+		const progressBar = document.getElementById("checkingProgressBar");
+		const progressText = document.getElementById("checkingProgressText");
+		const progressMessage = document.getElementById("progressMessage");
+		if (progressBar) progressBar.style.width = "0%";
+		if (progressText) progressText.textContent = "0%";
+		if (progressMessage) progressMessage.textContent = "";
+
+		this.isProcessing = false;
+		this.uploadInProgress = false;
+		this.cancelRequested = false;
+		try {
+			sessionStorage.removeItem("uploadInProgress");
+		} catch (_) {}
+		this.currentAbortController = null;
+	}
+
+	/**
+	 * @param {string} buttonType
+	 */
+	handleCancellation(buttonType) {
+		if (!this.isProcessing) return;
+		this.cancelRequested = true;
+		if (this.currentAbortController) {
+			this.currentAbortController.abort();
+		}
+
+		if (buttonType === "cancel") {
+			this.cancelButton.textContent = "Cancelling...";
+			this.cancelButton.disabled = true;
+		} else if (buttonType === "close") {
+			this.closeButton.disabled = true;
+			this.closeButton.style.opacity = "0.5";
+		}
+
+		const progressMessage = document.getElementById("progressMessage");
+		if (progressMessage) {
+			progressMessage.textContent = "Cancelling upload...";
+		}
+
+		setTimeout(() => {
+			if (this.cancelRequested) {
+				this.resetUIState();
+			}
+		}, 500);
+	}
+
+	showUploadResults(result, uploadedCount, totalCount, skippedCount = 0) {
+		if (!this.uploadInProgress && result?.file_upload_status === "error") {
+			this.resetUIState();
+			return;
+		}
+
+		const resultModalId = "uploadResultModal";
+		const modalBody = document.getElementById("uploadResultModalBody");
+		const resultModalEl = document.getElementById(resultModalId);
+		if (!modalBody || !resultModalEl) {
+			return;
+		}
+
+		const uploadCaptureModalId = "uploadCaptureModal";
+		const captureModalEl = document.getElementById(uploadCaptureModalId);
+		if (captureModalEl) {
+			this.closeModal(uploadCaptureModalId);
+		}
+
+		let msg = "";
+		if (result.file_upload_status === "success") {
+			if (uploadedCount === 0 && totalCount > 0) {
+				msg = `<b>Upload complete!</b><br />All ${totalCount} files already existed on the server.`;
+			} else if (skippedCount > 0) {
+				msg = `<b>Upload complete!</b><br />Files uploaded: <strong>${uploadedCount}</strong> / ${totalCount}`;
+				msg += `<br />Files already exist: <strong>${skippedCount}</strong>`;
+			} else {
+				msg = `<b>Upload complete!</b><br />Files uploaded: <strong>${uploadedCount}</strong> / ${totalCount}`;
+			}
+
+			if (result.captures && result.captures.length > 0) {
+				const uuids = result.captures
+					.map((uuid) => `<li>${uuid}</li>`)
+					.join("");
+				msg += `<br />Created capture UUID(s):<ul>${uuids}</ul>`;
+			}
+
+			if (result.errors && result.errors.length > 0) {
+				const errs = result.errors.map((e) => `<li>${e}</li>`).join("");
+				msg += `<br /><b>Errors:</b><ul>${errs}</ul>`;
+				msg += "<br /><b>Please check details and upload again.</b>";
+			}
+		} else {
+			msg = "<b>Upload Failed</b><br />";
+			if (result.message) {
+				msg += `${result.message}<br /><br />`;
+			}
+			msg += "<b>Please check file validity and try again.</b>";
+			if (result.errors && result.errors.length > 0) {
+				const errs = result.errors.map((e) => `<li>${e}</li>`).join("");
+				msg += `<br /><br /><b>Error Details:</b><ul>${errs}</ul>`;
+			}
+		}
+
+		modalBody.innerHTML = msg;
+		this.openModal(resultModalId);
+
+		if (result.file_upload_status === "success") {
+			resultModalEl.addEventListener(
+				"hidden.bs.modal",
+				() => {
+					window.location.reload();
+				},
+				{ once: true },
+			);
+		}
+	}
+}
+
+if (typeof window !== "undefined") {
+	window.CaptureUploadController = CaptureUploadController;
+	window.UploadCaptureModalController = CaptureUploadController;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { CaptureUploadController };
+}
\ No newline at end of file
diff --git a/gateway/sds_gateway/static/js/upload/FileUploadHandler.js b/gateway/sds_gateway/static/js/upload/FileUploadHandler.js
new file mode 100644
index 000000000..9f3d35bc4
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/FileUploadHandler.js
@@ -0,0 +1,202 @@
+/**
+ * Single-file upload modal (files page, not capture batch).
+ */
+class FileUploadHandler extends ModalManager {
+	constructor() {
+		super();
+		this.uploadForm = document.getElementById("uploadFileForm");
+		this.fileInput = document.getElementById("fileInput");
+		this.folderInput = document.getElementById("folderInput");
+		this.submitBtn = document.getElementById("uploadFileSubmitBtn");
+		this.clearBtn = document.getElementById("clearUploadBtn");
+		this.uploadText = this.submitBtn?.querySelector(".upload-text");
+		this.uploadSpinner = this.submitBtn?.querySelector(".upload-spinner");
+		this.validationFeedback = document.getElementById(
+			"uploadValidationFeedback",
+		);
+		this._onSubmit = (e) => this.handleSubmit(e);
+
+		if (this.fileInput) {
+			this.fileInput.addEventListener("change", () =>
+				this.updateSubmitButton(),
+			);
+		}
+		if (this.folderInput) {
+			this.folderInput.addEventListener("change", () =>
+				this.updateSubmitButton(),
+			);
+		}
+
+		if (this.clearBtn) {
+			this.clearBtn.addEventListener("click", () => this.clearModal());
+		}
+
+		if (this.uploadForm) {
+			this.uploadForm.addEventListener("submit", this._onSubmit);
+		}
+	}
+
+	updateSubmitButton() {
+		if (this.submitBtn) {
+			const hasFiles = this.fileInput?.files.length > 0;
+			const hasFolders = this.folderInput?.files.length > 0;
+			this.submitBtn.disabled = !hasFiles && !hasFolders;
+
+			if (hasFiles || hasFolders) {
+				this.hideValidationFeedback();
+			}
+		}
+	}
+
+	showValidationFeedback() {
+		if (this.validationFeedback) {
+			this.validationFeedback.classList.add("d-block");
+		}
+		this.fileInput?.classList.add("is-invalid");
+		this.folderInput?.classList.add("is-invalid");
+	}
+
+	hideValidationFeedback() {
+		if (this.validationFeedback) {
+			this.validationFeedback.classList.remove("d-block");
+		}
+		this.fileInput?.classList.remove("is-invalid");
+		this.folderInput?.classList.remove("is-invalid");
+	}
+
+	clearModal() {
+		if (this.uploadForm) {
+			this.uploadForm.reset();
+		}
+		if (this.fileInput) {
+			this.fileInput.value = "";
+		}
+		if (this.folderInput) {
+			this.folderInput.value = "";
+		}
+		this.hideValidationFeedback();
+		this.updateSubmitButton();
+	}
+
+	async handleSubmit(event) {
+		event.preventDefault();
+
+		const files = Array.from(this.fileInput?.files || []);
+		const folderFiles = Array.from(this.folderInput?.files || []);
+
+		if (files.length === 0 && folderFiles.length === 0) {
+			this.showValidationFeedback();
+			return;
+		}
+
+		this.setUploadingState(true);
+
+		try {
+			const csrfToken = window.APIClient.getCSRFToken();
+			if (!csrfToken) {
+				throw new Error("CSRF token not found");
+			}
+
+			const formData = new FormData();
+			const allFiles = [...files, ...folderFiles];
+			const allRelativePaths = [];
+
+			for (const file of allFiles) {
+				formData.append("files", file);
+				const relativePath = file.webkitRelativePath || file.name;
+				allRelativePaths.push(relativePath);
+			}
+
+			for (const relativePath of allRelativePaths) {
+				formData.append("relative_paths", relativePath);
+			}
+			for (const relativePath of allRelativePaths) {
+				formData.append("all_relative_paths", relativePath);
+			}
+
+			formData.append("capture_type", "");
+			formData.append("channels", "");
+			formData.append("scan_group", "");
+			formData.append("csrfmiddlewaretoken", csrfToken);
+
+			const response = await fetch(window.uploadFilesUrl, {
+				method: "POST",
+				body: formData,
+				headers: {
+					"X-CSRFToken": csrfToken,
+				},
+			});
+
+			const result = await response.json();
+
+			if (response.ok) {
+				const fileCount = allFiles.length;
+				const successMsg =
+					fileCount === 1
+						? "1 file uploaded successfully!"
+						: `${fileCount} files uploaded successfully!`;
+				this.showResult("success", successMsg);
+				this.clearModal();
+				this.closeModal("uploadFileModal");
+
+				if (window.filesBrowserManager?.loadFiles) {
+					window.filesBrowserManager.loadFiles();
+				} else {
+					window.location.reload();
+				}
+			} else {
+				this.showResult(
+					"error",
+					result.error || "Upload failed. Please try again.",
+				);
+			}
+		} catch (error) {
+			console.error("Upload error:", error);
+			this.showResult(
+				"error",
+				"Upload failed. Please check your connection and try again.",
+			);
+		} finally {
+			this.setUploadingState(false);
+		}
+	}
+
+	setUploadingState(uploading) {
+		if (this.submitBtn) {
+			this.submitBtn.disabled = uploading;
+		}
+		if (this.uploadText && this.uploadSpinner) {
+			this.uploadText.classList.toggle("d-none", uploading);
+			this.uploadSpinner.classList.toggle("d-none", !uploading);
+		}
+	}
+
+	showResult(type, message) {
+		const resultModalId = "uploadResultModal";
+		const resultModal = document.getElementById(resultModalId);
+		const resultBody = document.getElementById("uploadResultModalBody");
+
+		if (resultModal && resultBody) {
+			resultBody.innerHTML = `
+				<div class="alert alert-${type === "success" ? "success" : "danger"}">
+					${message}
+				</div>
+			`;
+			this.openModal(resultModalId);
+		} else {
+			alert(message);
+		}
+	}
+
+	cleanup() {
+		if (this.uploadForm) {
+			this.uploadForm.removeEventListener("submit", this._onSubmit);
+		}
+	}
+}
+if (typeof window !== "undefined") {
+	window.FileUploadHandler = FileUploadHandler;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { FileUploadHandler };
+}
diff --git a/gateway/sds_gateway/static/js/file-manager.js b/gateway/sds_gateway/static/js/upload/FilesBrowserManager.js
similarity index 55%
rename from gateway/sds_gateway/static/js/file-manager.js
rename to gateway/sds_gateway/static/js/upload/FilesBrowserManager.js
index cbe928cd4..1ead867e3 100644
--- a/gateway/sds_gateway/static/js/file-manager.js
+++ b/gateway/sds_gateway/static/js/upload/FilesBrowserManager.js
@@ -1,5 +1,9 @@
-class FileManager {
-	constructor() {
+/**
+ * Files browser: grid navigation, previews, drag/drop, capture modal UI extras.
+ */
+class FilesBrowserManager extends ModalManager {
+	constructor(config = {}) {
+		super(config);
 		// Check browser compatibility before proceeding
 		if (!this.checkBrowserSupport()) {
 			this.showError(
@@ -14,9 +18,17 @@ class FileManager {
 		this.boundHandlers = new Map(); // Track bound event handlers for cleanup
 		this.activeModals = new Set(); // Track active modals
 
-		// Prevent browser from navigating away when user drags files over the whole window
-		this.addGlobalDropGuards();
-		this.init();
+		const hasFilesBrowser = Boolean(
+			document.querySelector(".files-container"),
+		);
+		if (hasFilesBrowser) {
+			// Prevent browser from navigating away when user drags files over the whole window
+			this.addGlobalDropGuards();
+			this.init();
+			window.filesBrowserManager = this;
+		}
+
+		
 	}
 
 	addGlobalDropGuards() {
@@ -49,7 +61,7 @@ class FileManager {
 			return;
 		}
 
-		const files = await this.collectFilesFromDataTransfer(dt);
+		const files = await UploadUtils.collectFilesFromDataTransfer(dt);
 
 		if (!files.length) {
 			console.warn("No files collected from global drop");
@@ -57,7 +69,7 @@ class FileManager {
 		}
 
 		// Store the dropped files globally
-		window.selectedFiles = files;
+		window.captureUploadController?.setSelectedFiles(files);
 
 		// Open the upload modal
 		const uploadModalEl = document.getElementById("uploadCaptureModal");
@@ -66,8 +78,7 @@ class FileManager {
 			return;
 		}
 
-		const uploadModal = new bootstrap.Modal(uploadModalEl);
-		uploadModal.show();
+		window.ModalManager.openModal("uploadCaptureModal");
 
 		// Wait a bit for modal to fully open, then trigger file selection
 		setTimeout(() => {
@@ -106,95 +117,6 @@ class FileManager {
 		}
 	}
 
-	convertToFiles(itemsOrFiles) {
-		if (!itemsOrFiles) return [];
-		// DataTransferItemList detection: items have getAsFile()
-		const first = itemsOrFiles[0];
-		if (first && typeof first.getAsFile === "function") {
-			return Array.from(itemsOrFiles)
-				.map((item) => item.getAsFile())
-				.filter((f) => !!f);
-		}
-		return Array.from(itemsOrFiles);
-	}
-
-	// Collect files from a directory or mixed drop using the File System API (Chrome/WebKit)
-	async collectFilesFromDataTransfer(dataTransfer) {
-		const items = Array.from(dataTransfer.items || []);
-		const supportsEntries =
-			items.length > 0 && typeof items[0].webkitGetAsEntry === "function";
-		if (!supportsEntries) {
-			return this.convertToFiles(
-				dataTransfer.files?.length ? dataTransfer.files : dataTransfer.items,
-			);
-		}
-
-		const allFiles = [];
-		for (const item of items) {
-			if (item.kind !== "file") continue;
-			const entry = item.webkitGetAsEntry();
-			if (!entry) continue;
-			const files = await this.traverseEntry(entry);
-			allFiles.push(...files);
-		}
-		return allFiles;
-	}
-
-	async traverseEntry(entry) {
-		if (entry.isFile) {
-			return new Promise((resolve) => {
-				entry.file((file) => {
-					// Preserve folder structure on drop by injecting webkitRelativePath
-					try {
-						const relative = (entry.fullPath || file.name).replace(/^\//, "");
-						Object.defineProperty(file, "webkitRelativePath", {
-							value: relative,
-							configurable: true,
-						});
-					} catch (_) {}
-					resolve([file]);
-				});
-			});
-		}
-
-		if (entry.isDirectory) {
-			const reader = entry.createReader();
-			const entries = await this.readAllEntries(reader);
-			const nestedFiles = [];
-			for (const child of entries) {
-				const files = await this.traverseEntry(child);
-				nestedFiles.push(...files);
-			}
-			return nestedFiles;
-		}
-
-		return [];
-	}
-
-	readAllEntries(reader) {
-		return new Promise((resolve) => {
-			const entries = [];
-			const readChunk = () => {
-				reader.readEntries((results) => {
-					if (!results.length) {
-						resolve(entries);
-						return;
-					}
-					entries.push(...results);
-					readChunk();
-				});
-			};
-			readChunk();
-		});
-	}
-
-	stripHtml(html) {
-		if (!html) return "";
-		const div = document.createElement("div");
-		div.innerHTML = html;
-		return (div.textContent || div.innerText || "").trim();
-	}
-
 	init() {
 		// Get container and data
 		this.container = document.querySelector(".files-container");
@@ -203,37 +125,6 @@ class FileManager {
 			return;
 		}
 
-		// Get data attributes
-		this.currentDir = this.container.dataset.currentDir;
-		this.userEmail = this.container.dataset.userEmail;
-
-		// Get all file cards for data
-		const fileCards = document.querySelectorAll(".file-card:not(.header)");
-		const items = Array.from(fileCards).map((card) => ({
-			type: card.dataset.type,
-			name: card.querySelector(".file-name").textContent,
-			path: card.dataset.path,
-			uuid: card.dataset.uuid,
-			is_capture: card.dataset.isCapture === "true",
-
-			is_shared: card.dataset.isShared === "true",
-			capture_uuid: card.dataset.captureUuid,
-			description: card.dataset.description,
-			modified_at: card.querySelector(".file-meta").textContent.trim(),
-			shared_by: card.querySelector(".file-shared").textContent.trim(),
-		}));
-
-		// Get dataset options
-		const datasetSelect = document.getElementById("datasetSelect");
-		const datasets = datasetSelect
-			? Array.from(datasetSelect.options)
-					.slice(1)
-					.map((opt) => ({
-						name: opt.text,
-						uuid: opt.value,
-					}))
-			: [];
-
 		// Initialize all handlers
 		this.initializeEventListeners();
 		this.initializeUploadHandlers();
@@ -271,7 +162,6 @@ class FileManager {
 	}
 
 	initializeUploadHandlers() {
-		// Initialize capture upload
 		const captureElements = {
 			uploadZone: document.getElementById("uploadZone"),
 			fileInput: document.getElementById("captureFileInput"),
@@ -283,27 +173,19 @@ class FileManager {
 			uploadForm: document.getElementById("uploadCaptureForm"),
 		};
 
-		// Only require the essentials; browseButton may be missing
 		const essentials = [
 			captureElements.uploadZone,
 			captureElements.fileInput,
 			captureElements.selectedFilesList,
 			captureElements.uploadForm,
 		];
-		// Skip initialization if we're on the files page which has its own custom handler
-		const isFilesPage = window.location.pathname.includes("/users/files/");
-		if (essentials.every((el) => el) && !isFilesPage) {
-			this.initializeCaptureUpload(captureElements);
-		}
 
-		// Initialize text file upload
-		const textUploadForm = document.getElementById("uploadFileForm");
-		if (textUploadForm) {
-			this.initializeTextFileUpload(textUploadForm);
+		if (essentials.every((el) => el)) {
+			this.initializeCaptureUploadUIOnly(captureElements);
 		}
 	}
 
-	initializeCaptureUpload(elements) {
+	initializeCaptureUploadUIOnly(elements) {
 		const {
 			uploadZone,
 			fileInput,
@@ -345,7 +227,7 @@ class FileManager {
 			uploadZone.classList.remove("drag-over");
 			const dt = e.dataTransfer;
 			if (dt) {
-				const files = await this.collectFilesFromDataTransfer(dt);
+				const files = await UploadUtils.collectFilesFromDataTransfer(dt);
 				this.droppedFiles = files;
 				// Clear any existing input selection so we rely on dropped files on submit
 				try {
@@ -358,158 +240,15 @@ class FileManager {
 		// Handle file input change
 		fileInput.addEventListener("change", (e) => {
 			this.droppedFiles = null; // prefer explicit file input selection
-			this.handleFileSelection(this.convertToFiles(e.target.files));
+			this.handleFileSelection(UploadUtils.convertToFiles(e.target.files));
 		});
 
-		// Toggle DRF/RH input groups
-		const typeSelect = document.getElementById("captureTypeSelect");
-		const channelGroup = document.getElementById("channelInputGroup");
-		const scanGroup = document.getElementById("scanGroupInputGroup");
-		const channelInput = document.getElementById("captureChannelsInput");
-
-		if (typeSelect) {
-			typeSelect.addEventListener("change", () => {
-				const v = typeSelect.value;
-
-				// Use Bootstrap classes instead of inline styles
-				if (channelGroup) {
-					if (v === "drf") {
-						channelGroup.classList.remove("d-none");
-						channelGroup.style.display = "";
-					} else {
-						channelGroup.classList.add("d-none");
-					}
-				}
-
-				if (scanGroup) {
-					if (v === "rh") {
-						scanGroup.classList.remove("d-none");
-						scanGroup.style.display = "";
-					} else {
-						scanGroup.classList.add("d-none");
-					}
-				}
-
-				if (channelInput) {
-					if (v === "drf") {
-						channelInput.setAttribute("required", "required");
-					} else {
-						channelInput.removeAttribute("required");
-					}
-				}
-			});
-
-			// Trigger change event to set initial state
-			typeSelect.dispatchEvent(new Event("change"));
-		}
-
 		// Check for globally dropped files when modal opens
-		if (window.selectedFiles?.length) {
-			this.handleFileSelection(window.selectedFiles);
+		if (window.captureUploadController?.getSelectedFiles()?.length) {
+			this.handleFileSelection(window.captureUploadController.getSelectedFiles());
 		}
 
-		// Handle form submission
-		uploadForm.addEventListener("submit", async (e) => {
-			e.preventDefault();
-
-			const formData = new FormData();
-			const submitBtn = uploadForm.querySelector('button[type="submit"]');
-			const uploadText = submitBtn.querySelector(".upload-text");
-			const uploadSpinner = submitBtn.querySelector(".upload-spinner");
-
-			try {
-				submitBtn.disabled = true;
-				uploadText.classList.add("d-none");
-				uploadSpinner.classList.remove("d-none");
-
-				// Get CSRF token and add it when present
-				const csrfToken = this.getCsrfToken();
-				if (csrfToken) {
-					formData.append("csrfmiddlewaretoken", csrfToken);
-				}
-
-				// Add capture type and channels from the form
-				const captureType = document.getElementById("captureTypeSelect").value;
-				const channels =
-					document.getElementById("captureChannelsInput")?.value || "";
-				const scanGroupVal =
-					document.getElementById("captureScanGroupInput")?.value || "";
-				formData.append("capture_type", captureType);
-				formData.append("channels", channels);
-				if (captureType === "rh" && scanGroupVal) {
-					formData.append("scan_group", scanGroupVal);
-				}
-
-				// Add files and their relative paths - check for globally dropped files first
-				const files = window.selectedFiles?.length
-					? Array.from(window.selectedFiles)
-					: this.droppedFiles?.length
-						? Array.from(this.droppedFiles)
-						: Array.from(fileInput.files);
-
-				// Create an array of relative paths in the same order as files
-				const relativePaths = files.map(
-					(file) => file.webkitRelativePath || file.name,
-				);
-
-				// Add each file
-				for (const [index, file] of files.entries()) {
-					formData.append("files", file);
-					formData.append("relative_paths", relativePaths[index]);
-				}
-
-				await this.handleUpload(formData, submitBtn, "uploadCaptureModal", {
-					files,
-				});
-			} catch (error) {
-				const userMessage = this.getUserFriendlyErrorMessage(
-					error,
-					"capture-upload",
-				);
-				this.showError(
-					`Upload failed: ${userMessage}`,
-					error,
-					"capture-upload",
-				);
-			} finally {
-				submitBtn.disabled = false;
-				uploadText.classList.remove("d-none");
-				uploadSpinner.classList.add("d-none");
-				this.droppedFiles = null;
-				window.selectedFiles = null; // Clear global files after upload
-			}
-		});
-	}
-
-	initializeTextFileUpload(uploadForm) {
-		uploadForm.addEventListener("submit", async (e) => {
-			e.preventDefault();
-
-			const formData = new FormData(uploadForm);
-			const submitBtn = uploadForm.querySelector('button[type="submit"]');
-			const uploadText = submitBtn.querySelector(".upload-text");
-			const uploadSpinner = submitBtn.querySelector(".upload-spinner");
-
-			try {
-				submitBtn.disabled = true;
-				uploadText.classList.add("d-none");
-				uploadSpinner.classList.remove("d-none");
-
-				// CSRF token attached in handleUpload
-
-				await this.handleUpload(formData, submitBtn, "uploadFileModal");
-			} catch (error) {
-				const userMessage = this.getUserFriendlyErrorMessage(
-					error,
-					"text-upload",
-				);
-				this.showError(`Upload failed: ${userMessage}`, error, "text-upload");
-			} finally {
-				submitBtn.disabled = false;
-				uploadText.classList.remove("d-none");
-				uploadSpinner.classList.add("d-none");
-			}
-		});
+		// Submit is handled by UploadCaptureModalController (chunked upload).
 	}
 
 	initializeFileClicks() {
@@ -539,6 +278,7 @@ class FileManager {
 				if (nameEl) nameEl.textContent = captureName;
 
 				// Show modal using helper method
+				this.activeModals.add("downloadModal");
 				this.openModal("downloadModal");
 
 				// Confirm handler
@@ -546,17 +286,8 @@ class FileManager {
 				if (confirmBtn) {
 					const onConfirm = () => {
 						this.closeModal("downloadModal");
-
-						// Use unified download handler if available
-						if (window.components?.handleDownload) {
-							const dummyButton = document.createElement("button");
-							dummyButton.style.display = "none";
-							window.components.handleDownload(
-								"capture",
-								captureUuid,
-								dummyButton,
-							);
-						}
+						this.activeModals.delete("downloadModal");
+						this.postDownloadItem("capture", captureUuid);
 					};
 					confirmBtn.addEventListener("click", onConfirm, { once: true });
 				}
@@ -580,29 +311,14 @@ class FileManager {
 					return;
 				}
 				// Show modal using helper method
+				this.activeModals.add("downloadModal");
 				this.openModal("downloadModal");
 				const confirmBtn = document.getElementById("confirmDownloadBtn");
 				if (confirmBtn) {
 					const onConfirm = () => {
 						this.closeModal("downloadModal");
-						fetch(
-							`/users/download-item/dataset/${encodeURIComponent(datasetUuid)}/`,
-							{
-								method: "POST",
-								headers: {
-									"Content-Type": "application/json",
-									"X-CSRFToken": this.getCsrfToken(),
-								},
-							},
-						)
-							.then(async (r) => {
-								try {
-									return await r.json();
-								} catch (_) {
-									return {};
-								}
-							})
-							.catch(() => {});
+						this.activeModals.delete("downloadModal");
+						this.postDownloadItem("dataset", datasetUuid);
 					};
 					confirmBtn.addEventListener("click", onConfirm, { once: true });
 				}
@@ -636,189 +352,26 @@ class FileManager {
 		});
 	}
 
-	async handleUpload(formData, submitBtn, modalId, options = {}) {
-		const uploadText = submitBtn.querySelector(".upload-text");
-		const uploadSpinner = submitBtn.querySelector(".upload-spinner");
-
-		try {
-			// Update UI
-			submitBtn.disabled = true;
-			uploadText.classList.add("d-none");
-			uploadSpinner.classList.remove("d-none");
-
-			// Make request with progress (XHR for upload progress events)
-			const response = await new Promise((resolve, reject) => {
-				const xhr = new XMLHttpRequest();
-				xhr.open("POST", "/users/upload-files/");
-				xhr.withCredentials = true;
-				xhr.setRequestHeader("X-CSRFToken", this.getCsrfToken());
-				xhr.setRequestHeader("Accept", "application/json");
-
-				// Progress UI elements + smoothing state
-				const wrap = document.getElementById("captureUploadProgressWrap");
-				const bar = document.getElementById("captureUploadProgressBar");
-				const text = document.getElementById("captureUploadProgressText");
-				if (wrap) wrap.classList.remove("d-none");
-				if (bar) {
-					bar.classList.add("progress-bar-striped", "progress-bar-animated");
-					bar.style.width = "100%";
-					bar.setAttribute("aria-valuenow", "100");
-					bar.textContent = "";
-				}
-				if (text) text.textContent = "Uploading…";
-
-				xhr.upload.onprogress = () => {
-					// Keep indeterminate to match button spinner timing (no file count)
-					if (text) text.textContent = "Uploading…";
-				};
-
-				xhr.onerror = () => reject(new Error("Network error during upload"));
-				xhr.upload.onloadstart = () => {
-					if (text) text.textContent = "Starting upload…";
-				};
-				xhr.upload.onloadend = () => {
-					if (bar) {
-						bar.classList.add("progress-bar-striped", "progress-bar-animated");
-						bar.style.width = "100%";
-						bar.setAttribute("aria-valuenow", "100");
-						bar.textContent = "";
-					}
-					if (text) text.textContent = "Processing on server…";
-				};
-				xhr.onload = () => {
-					// Build a Response-like object compatible with existing code
-					const status = xhr.status;
-					const headers = new Headers({
-						"content-type": xhr.getResponseHeader("content-type") || "",
-					});
-					const bodyText = xhr.responseText || "";
-					const responseLike = {
-						ok: status >= 200 && status < 300,
-						status,
-						headers,
-						json: async () => {
-							try {
-								return JSON.parse(bodyText);
-							} catch {
-								return {};
-							}
-						},
-						text: async () => bodyText,
-					};
-					resolve(responseLike);
-				};
-
-				xhr.send(formData);
-			});
-
-			let result = null;
-			let fallbackText = "";
-			try {
-				const contentType = response.headers.get("content-type") || "";
-				if (contentType.includes("application/json")) {
-					result = await response.json();
-				} else {
-					fallbackText = await response.text();
-				}
-			} catch (_) {}
-
-			if (response.ok) {
-				// Build a concise success message for inline banner
-				let successMessage = "Upload complete.";
-				if (result && (result.files_uploaded || result.total_files)) {
-					const uploaded = result.files_uploaded ?? result.total_uploaded ?? 0;
-					const total = result.total_files ?? result.total_uploaded ?? 0;
-					successMessage = `Upload complete: ${uploaded} / ${total} file${total === 1 ? "" : "s"} uploaded.`;
-					if (Array.isArray(result.errors) && result.errors.length) {
-						successMessage += " Some items were skipped or failed.";
-					}
-				}
+	postDownloadItem(itemType, itemUuid) {
+		const csrf = window.APIClient?.getCSRFToken?.() || "";
+		fetch(
+			`/users/download-item/${itemType}/${encodeURIComponent(itemUuid)}/`,
+			{
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					"X-CSRFToken": csrf,
+				},
+			},
+		)
+			.then(async (r) => {
 				try {
-					sessionStorage.setItem(
-						"filesAlert",
-						JSON.stringify({
-							message: successMessage,
-							type: "success",
-						}),
-					);
-				} catch (_) {}
-				// Reload to show inline banner on main page
-				window.location.reload();
-			} else {
-				let message = "";
-				if (result && (result.detail || result.error || result.message)) {
-					message = result.detail || result.error || result.message;
-				} else if (fallbackText) {
-					message = this.stripHtml(fallbackText)
-						.split("\n")
-						.slice(0, 3)
-						.join(" ");
-				}
-				if (!message) message = `Upload failed (${response.status})`;
-				// Friendly mapping for common statuses
-				if (response.status === 409) {
-					message =
-						"Upload skipped: a file with the same checksum already exists. Use PATCH to replace, or change the file.";
-				}
-				throw new Error(message);
-			}
-		} catch (error) {
-			const userMessage = this.getUserFriendlyErrorMessage(
-				error,
-				"upload-handler",
-			);
-			try {
-				sessionStorage.setItem(
-					"filesAlert",
-					JSON.stringify({
-						message: `Upload failed: ${userMessage}`,
-						type: "error",
-					}),
-				);
-				// Reload to display the banner via template startup script
-				window.location.reload();
-			} catch (_) {
-				this.showError(
-					`Upload failed: ${userMessage}`,
-					error,
-					"upload-handler",
-				);
-			}
-		} finally {
-			// Reset UI
-			submitBtn.disabled = false;
-			uploadText.classList.remove("d-none");
-			uploadSpinner.classList.add("d-none");
-		}
-	}
-
-	showUploadSuccess(result, modalId) {
-		const resultModal = new bootstrap.Modal(
-			document.getElementById("uploadResultModal"),
-		);
-		const resultBody = document.getElementById("uploadResultModalBody");
-
-		resultBody.innerHTML = `
-            <div class="alert alert-success">
-              <h6>Upload Complete!</h6>
-        ${
-					result.files_uploaded
-						? `<p>Files uploaded: ${result.files_uploaded} / ${result.total_files}</p>`
-						: "<p>File uploaded successfully!</p>"
+					return await r.json();
+				} catch (_) {
+					return {};
 				}
-              ${result.errors ? `<p>Errors: ${result.errors.join("<br>")}</p>` : ""}
-            </div>
-          `;
-
-		// Close upload modal and show result (guard instance)
-		const uploadModalEl = document.getElementById(modalId);
-		const uploadModalInstance = uploadModalEl
-			? bootstrap.Modal.getInstance(uploadModalEl)
-			: null;
-		if (uploadModalInstance) {
-			uploadModalInstance.hide();
-		}
-		resultModal.show();
+			})
+			.catch(() => {});
 	}
 
 	// File preview methods
@@ -840,10 +393,10 @@ class FileManager {
 					"file-preview",
 				);
 			} else {
-				const userMessage = this.getUserFriendlyErrorMessage(
-					error,
-					"file-preview",
-				);
+				const userMessage =
+					window.DOMUtils?.getUserFriendlyErrorMessage(error, "file-preview") ||
+					error?.message ||
+					"An unexpected error occurred";
 				this.showError(userMessage, error, "file-preview");
 			}
 		}
@@ -866,7 +419,8 @@ class FileManager {
 	}
 
 	showPreviewModal(fileName, content) {
-		const modal = document.getElementById("filePreviewModal");
+		const previewModalId = "filePreviewModal";
+		const modal = document.getElementById(previewModalId);
 		const modalTitle = modal.querySelector(".modal-title");
 		const previewContent = modal.querySelector(".preview-content");
 
@@ -893,7 +447,7 @@ class FileManager {
 			previewContent.appendChild(preElement);
 		}
 
-		new bootstrap.Modal(modal).show();
+		this.openModal(previewModalId);
 	}
 
 	// Helper methods for syntax highlighting
@@ -901,51 +455,16 @@ class FileManager {
 		return fileName.split(".").pop().toLowerCase();
 	}
 
-	// Helper method to open modal with fallbacks
-	openModal(modalId) {
-		this.activeModals.add(modalId);
-
-		if (window.components?.openCustomModal) {
-			window.components.openCustomModal(modalId);
-		} else if (typeof openCustomModal === "function") {
-			openCustomModal(modalId);
-		} else if (window.openCustomModal) {
-			window.openCustomModal(modalId);
-		} else {
-			const modal = document.getElementById(modalId);
-			if (modal) modal.style.display = "block";
-		}
-	}
-
-	// Helper method to close modal with fallbacks
-	closeModal(modalId) {
-		this.activeModals.delete(modalId);
-
-		if (window.components?.closeCustomModal) {
-			window.components.closeCustomModal(modalId);
-		} else if (typeof closeCustomModal === "function") {
-			closeCustomModal(modalId);
-		} else if (window.closeCustomModal) {
-			window.closeCustomModal(modalId);
-		} else {
-			const modal = document.getElementById(modalId);
-			if (modal) modal.style.display = "none";
-		}
-	}
-
-	// Helper method to show success message with fallbacks
 	showSuccessMessage(message) {
-		if (window.components?.showSuccess) {
-			window.components.showSuccess(message);
-		} else {
-			const live = document.getElementById("aria-live-region");
-			if (live) live.textContent = message;
+		if (window.DOMUtils?.showMessage) {
+			void window.DOMUtils.showMessage(message, {
+				variant: "success",
+				placement: "toast",
+			});
+			return;
 		}
-	}
-
-	// Helper method to get CSRF token
-	getCsrfToken() {
-		return document.querySelector("[name=csrfmiddlewaretoken]")?.value || "";
+		const live = document.getElementById("aria-live-region");
+		if (live) live.textContent = message;
 	}
 
 	// Helper method to check if file has extension
@@ -1355,7 +874,7 @@ class FileManager {
 	showError(message, error = null, context = "") {
 		// Log error details for debugging
 		if (error) {
-			console.error(`FileManager Error [${context}]:`, {
+			console.error(`FilesBrowserManager Error [${context}]:`, {
 				message: error.message,
 				stack: error.stack,
 				userMessage: message,
@@ -1363,12 +882,14 @@ class FileManager {
 				userAgent: navigator.userAgent,
 			});
 		} else {
-			console.warn(`FileManager Warning [${context}]:`, message);
+			console.warn(`FilesBrowserManager Warning [${context}]:`, message);
 		}
 
-		// Show user-friendly error message
-		if (window.components?.showError) {
-			window.components.showError(message);
+		if (window.DOMUtils?.showMessage) {
+			void window.DOMUtils.showMessage(message, {
+				variant: "danger",
+				placement: "toast",
+			});
 			return;
 		}
 		const live = document.getElementById("aria-live-region");
@@ -1387,43 +908,6 @@ class FileManager {
 		container.insertBefore(div, container.firstChild);
 	}
 
-	// Enhanced error message formatting
-	getUserFriendlyErrorMessage(error, context = "") {
-		if (!error) return "An unexpected error occurred";
-
-		// Handle common error types
-		if (error.name === "NetworkError" || error.message.includes("fetch")) {
-			return "Network error: Please check your connection and try again";
-		}
-		if (error.name === "TypeError" && error.message.includes("JSON")) {
-			return "Invalid response format: Please try again or contact support";
-		}
-		if (error.message.includes("403") || error.message.includes("Forbidden")) {
-			return "Access denied: You don't have permission to perform this action";
-		}
-		if (error.message.includes("404") || error.message.includes("Not Found")) {
-			return "Resource not found: The requested file or directory may have been moved or deleted";
-		}
-		if (
-			error.message.includes("500") ||
-			error.message.includes("Internal Server Error")
-		) {
-			return "Server error: Please try again later or contact support";
-		}
-
-		// Default user-friendly message
-		return error.message || "An unexpected error occurred";
-	}
-
-	escapeHtml(unsafe) {
-		return unsafe
-			.replace(/&/g, "&amp;")
-			.replace(/</g, "&lt;")
-			.replace(/>/g, "&gt;")
-			.replace(/"/g, "&quot;")
-			.replace(/'/g, "&#039;");
-	}
-
 	// Memory management and cleanup
 	cleanup() {
 		// Remove all bound event handlers
@@ -1442,47 +926,23 @@ class FileManager {
 
 		// Clear file references
 		this.droppedFiles = null;
-		window.selectedFiles = null;
+		window.captureUploadController?.resetSession?.();
 
-		console.log("FileManager cleanup completed");
+		console.log("FilesBrowserManager cleanup completed");
 	}
 
-	// Browser compatibility check
+	// Browser compatibility (see core/PageGate.js)
 	checkBrowserSupport() {
-		const requiredFeatures = {
-			"File API": "File" in window,
-			FileReader: "FileReader" in window,
-			FormData: "FormData" in window,
-			"Fetch API": "fetch" in window,
-			Promise: "Promise" in window,
-			Map: "Map" in window,
-			Set: "Set" in window,
-		};
-
-		const missingFeatures = Object.entries(requiredFeatures)
-			.filter(([name, supported]) => !supported)
-			.map(([name]) => name);
-
-		if (missingFeatures.length > 0) {
-			console.warn("Missing browser features:", missingFeatures);
-			return false;
+		if (
+			window.PageGate &&
+			typeof window.PageGate.checkUploadFeatures === "function"
+		) {
+			return window.PageGate.checkUploadFeatures();
 		}
-
-		return true;
-	}
-
-	// Track event handler for cleanup
-	bindEventHandler(element, event, handler) {
-		this.boundHandlers.set(element, handler);
-		element.addEventListener(event, handler);
+		return false;
 	}
 
 	handleFileSelection(files) {
-		const selectedFilesList = document.getElementById("selectedFilesList");
-		const selectedFiles = document.getElementById("selectedFiles");
-		if (!selectedFilesList || !selectedFiles) return;
-		selectedFilesList.innerHTML = "";
-
 		const allFiles = Array.from(files || []);
 		// Filter out likely directory placeholders that some browsers expose on drop
 		const realFiles = allFiles.filter((f) => {
@@ -1491,6 +951,13 @@ class FileManager {
 			return f.size > 0 || hasExtension || (f.type && f.type.length > 0);
 		});
 
+		window.captureUploadController?.setSelectedFiles(realFiles);
+
+		const selectedFilesList = document.getElementById("selectedFilesList");
+		const selectedFiles = document.getElementById("selectedFiles");
+		if (!selectedFilesList || !selectedFiles) return;
+		selectedFilesList.innerHTML = "";
+
 		// If selection came from the file input (webkitdirectory browse), show all files.
 		// If it came from drag-and-drop, we may have limited UI space; still show all for clarity.
 		for (const file of realFiles) {
@@ -1512,36 +979,6 @@ class FileManager {
 		}
 	}
 
-	renderFileTree(node, container, path = "") {
-		for (const [name, value] of Object.entries(node)) {
-			let li;
-			if (value instanceof File) {
-				// Render file
-				li = this.createElement(
-					"li",
-					"",
-					`
-          <i class="bi bi-file-text"></i>
-          <span>${name}</span>
-        `,
-				);
-			} else {
-				// Render directory
-				li = this.createElement(
-					"li",
-					"",
-					`
-          <i class="bi bi-folder"></i>
-          <span>${name}</span>
-          <ul></ul>
-        `,
-				);
-				this.renderFileTree(value, li.querySelector("ul"), `${path + name}/`);
-			}
-			container.appendChild(li);
-		}
-	}
-
 	handleFileCardClick(e, card) {
 		// Ignore clicks originating from the actions area (dropdown/buttons)
 		if (e.target.closest(".file-actions")) {
@@ -1619,7 +1056,10 @@ class FileManager {
 	}
 }
 
-// Initialize file manager when DOM is loaded
-document.addEventListener("DOMContentLoaded", () => {
-	new FileManager();
-});
+if (typeof window !== "undefined") {
+	window.FilesBrowserManager = FilesBrowserManager;
+	window.UploadManager = FilesBrowserManager;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { FilesBrowserManager };
+}
diff --git a/gateway/sds_gateway/static/js/upload/UploadUtils.js b/gateway/sds_gateway/static/js/upload/UploadUtils.js
new file mode 100644
index 000000000..6ff3752a8
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/UploadUtils.js
@@ -0,0 +1,187 @@
+/**
+ * Stateless helpers for capture / file uploads (hash, chunks, DataTransfer walk, FormData).
+ */
+const UploadUtils = {
+	getCheckFileExistsUrl() {
+		return (
+			window.checkFileExistsUrl ||
+			document.querySelector("[data-check-file-url]")?.dataset?.checkFileUrl ||
+			"/users/check-file-exists/"
+		);
+	},
+
+	getUploadPostUrl() {
+		return (
+			window.uploadFilesUrl ||
+			document.querySelector("[data-upload-url]")?.dataset?.uploadUrl ||
+			"/users/upload-capture/"
+		);
+	},
+
+	getDirectoryPathFromFile(file) {
+		if (!file?.webkitRelativePath) return "/";
+		const pathParts = file.webkitRelativePath.split("/");
+		if (pathParts.length > 1) {
+			pathParts.pop();
+			return `/${pathParts.join("/")}`;
+		}
+		return "/";
+	},
+
+	async calculateBlake3Hash(file) {
+		if (typeof hashwasm === "undefined" || !hashwasm?.createBLAKE3) {
+			throw new Error("BLAKE3 library not loaded");
+		}
+		const buffer = await file.arrayBuffer();
+		const hasher = await hashwasm.createBLAKE3();
+		hasher.init();
+		hasher.update(new Uint8Array(buffer));
+		return hasher.digest("hex");
+	},
+
+	async checkFileExistsOnServer(file, hashHex, csrfToken, url) {
+		const directory = UploadUtils.getDirectoryPathFromFile(file);
+		const response = await fetch(url || UploadUtils.getCheckFileExistsUrl(), {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken":
+					csrfToken || window.APIClient?.getCSRFToken?.() || "",
+			},
+			body: JSON.stringify({
+				directory,
+				filename: file.name,
+				checksum: hashHex,
+			}),
+		});
+		if (!response.ok) {
+			throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+		}
+		return response.json();
+	},
+
+	appendCaptureTypeToFormData(formData) {
+		const captureType =
+			document.getElementById("captureTypeSelect")?.value || "";
+		formData.append("capture_type", captureType);
+		if (captureType === "drf") {
+			formData.append(
+				"channels",
+				document.getElementById("captureChannelsInput")?.value || "",
+			);
+		} else if (captureType === "rh") {
+			formData.append(
+				"scan_group",
+				document.getElementById("captureScanGroupInput")?.value || "",
+			);
+		}
+	},
+
+	calculateTotalChunks(filesToUpload, chunkSizeBytes) {
+		let totalChunks = 0;
+		let tempChunkSize = 0;
+		let tempChunkFiles = 0;
+		for (const file of filesToUpload) {
+			if (tempChunkSize + file.size > chunkSizeBytes && tempChunkFiles > 0) {
+				totalChunks++;
+				tempChunkSize = 0;
+				tempChunkFiles = 0;
+			}
+			if (file.size > chunkSizeBytes) {
+				totalChunks++;
+				tempChunkSize = 0;
+				tempChunkFiles = 0;
+			} else {
+				tempChunkSize += file.size;
+				tempChunkFiles++;
+			}
+		}
+		if (tempChunkSize > 0) totalChunks++;
+		return totalChunks;
+	},
+
+	convertToFiles(itemsOrFiles) {
+		if (!itemsOrFiles) return [];
+		const first = itemsOrFiles[0];
+		if (first && typeof first.getAsFile === "function") {
+			return Array.from(itemsOrFiles)
+				.map((item) => item.getAsFile())
+				.filter((f) => !!f);
+		}
+		return Array.from(itemsOrFiles);
+	},
+
+	async collectFilesFromDataTransfer(dataTransfer) {
+		const items = Array.from(dataTransfer.items || []);
+		const supportsEntries =
+			items.length > 0 && typeof items[0].webkitGetAsEntry === "function";
+		if (!supportsEntries) {
+			return UploadUtils.convertToFiles(
+				dataTransfer.files?.length ? dataTransfer.files : dataTransfer.items,
+			);
+		}
+		const allFiles = [];
+		for (const item of items) {
+			if (item.kind !== "file") continue;
+			const entry = item.webkitGetAsEntry();
+			if (!entry) continue;
+			const files = await UploadUtils.traverseEntry(entry);
+			allFiles.push(...files);
+		}
+		return allFiles;
+	},
+
+	async traverseEntry(entry) {
+		if (entry.isFile) {
+			return new Promise((resolve) => {
+				entry.file((file) => {
+					try {
+						const relative = (entry.fullPath || file.name).replace(/^\//, "");
+						Object.defineProperty(file, "webkitRelativePath", {
+							value: relative,
+							configurable: true,
+						});
+					} catch (_) {}
+					resolve([file]);
+				});
+			});
+		}
+		if (entry.isDirectory) {
+			const reader = entry.createReader();
+			const entries = await UploadUtils.readAllEntries(reader);
+			const nestedFiles = [];
+			for (const child of entries) {
+				const files = await UploadUtils.traverseEntry(child);
+				nestedFiles.push(...files);
+			}
+			return nestedFiles;
+		}
+		return [];
+	},
+
+	readAllEntries(reader) {
+		return new Promise((resolve) => {
+			const entries = [];
+			const readChunk = () => {
+				reader.readEntries((results) => {
+					if (!results.length) {
+						resolve(entries);
+						return;
+					}
+					entries.push(...results);
+					readChunk();
+				});
+			};
+			readChunk();
+		});
+	},
+};
+
+if (typeof window !== "undefined") {
+	window.UploadUtils = UploadUtils;
+	// Back-compat for any stray references during transition
+	window.ChunkUploadPipeline = UploadUtils;
+}
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { UploadUtils };
+}
diff --git a/gateway/sds_gateway/static/js/upload/__tests__/CaptureUploadController.test.js b/gateway/sds_gateway/static/js/upload/__tests__/CaptureUploadController.test.js
new file mode 100644
index 000000000..875c7113d
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/__tests__/CaptureUploadController.test.js
@@ -0,0 +1,65 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const { CaptureUploadController } = require("../CaptureUploadController.js");
+
+describe("CaptureUploadController", () => {
+	let controller;
+
+	beforeEach(() => {
+		window.APIClient = { getCSRFToken: () => "csrf-test" };
+		controller = new CaptureUploadController();
+		controller.filesToSkip = new Set();
+	});
+
+	test("setSelectedFiles and getSelectedFiles round-trip", () => {
+		const file = new File(["a"], "a.txt", { type: "text/plain" });
+		controller.setSelectedFiles([file]);
+		expect(controller.getSelectedFiles()).toHaveLength(1);
+		expect(controller.getSelectedFiles()[0].name).toBe("a.txt");
+	});
+
+	test("resetSession clears selection and duplicate-check state", () => {
+		controller.setSelectedFiles([new File(["a"], "a.txt")]);
+		controller.filesToSkip = new Set(["/x"]);
+		controller.fileCheckResults = new Map([["k", {}]]);
+		controller.resetSession();
+		expect(controller.getSelectedFiles()).toHaveLength(0);
+		expect(controller.filesToSkip).toBeNull();
+		expect(controller.fileCheckResults).toBeNull();
+	});
+
+	test("partitionFilesForUpload skips entries in filesToSkip", () => {
+		const file = new File(["data"], "nested.txt", { type: "text/plain" });
+		Object.defineProperty(file, "webkitRelativePath", {
+			value: "mydir/nested.txt",
+			configurable: true,
+		});
+		controller.filesToSkip = new Set(["/mydir/nested.txt"]);
+		const result = controller.partitionFilesForUpload([file]);
+		expect(result.filesToUpload).toHaveLength(0);
+		expect(result.skippedFilesCount).toBe(1);
+		expect(result.allRelativePaths).toEqual(["mydir/nested.txt"]);
+	});
+
+	test("checkForLargeFiles blocks when file exceeds threshold", () => {
+		global.alert = jest.fn();
+		const huge = new File(["x"], "big.bin");
+		Object.defineProperty(huge, "size", {
+			value: 600 * 1024 * 1024,
+			configurable: true,
+		});
+		const blocked = controller.checkForLargeFiles([huge], null, null);
+		expect(blocked).toBe(true);
+		expect(global.alert).toHaveBeenCalled();
+	});
+
+	test("checkForLargeFiles allows small files", () => {
+		global.alert = jest.fn();
+		const small = new File(["x"], "small.bin");
+		Object.defineProperty(small, "size", { value: 1024, configurable: true });
+		expect(controller.checkForLargeFiles([small], null, null)).toBe(false);
+		expect(global.alert).not.toHaveBeenCalled();
+	});
+});
diff --git a/gateway/sds_gateway/static/js/upload/__tests__/UploadUtils.test.js b/gateway/sds_gateway/static/js/upload/__tests__/UploadUtils.test.js
new file mode 100644
index 000000000..0ffd41763
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/__tests__/UploadUtils.test.js
@@ -0,0 +1,57 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const { UploadUtils } = require("../UploadUtils.js");
+
+describe("UploadUtils", () => {
+	beforeEach(() => {
+		document.body.innerHTML = "";
+	});
+
+	test("calculateTotalChunks counts byte-sized groups", () => {
+		const chunkSize = 10;
+		const files = [
+			new File(["x"], "a.bin", { type: "application/octet-stream" }),
+			new File(["yy"], "b.bin", { type: "application/octet-stream" }),
+		];
+		Object.defineProperty(files[0], "size", { value: 6 });
+		Object.defineProperty(files[1], "size", { value: 6 });
+
+		expect(UploadUtils.calculateTotalChunks(files, chunkSize)).toBe(2);
+	});
+
+	test("calculateTotalChunks splits oversized single file", () => {
+		const chunkSize = 5;
+		const files = [
+			new File(["xxxxxxx"], "big.bin", { type: "application/octet-stream" }),
+		];
+		Object.defineProperty(files[0], "size", { value: 100 });
+
+		expect(UploadUtils.calculateTotalChunks(files, chunkSize)).toBe(1);
+	});
+
+	test("appendCaptureTypeToFormData reads modal fields", () => {
+		document.body.innerHTML = `
+			<select id="captureTypeSelect"><option value="drf" selected>drf</option></select>
+			<input id="captureChannelsInput" value="ch1,ch2" />
+			<input id="captureScanGroupInput" value="" />
+		`;
+		const fd = new FormData();
+		UploadUtils.appendCaptureTypeToFormData(fd);
+		expect(fd.get("capture_type")).toBe("drf");
+		expect(fd.get("channels")).toBe("ch1,ch2");
+	});
+
+	test("appendCaptureTypeToFormData appends scan_group for rh", () => {
+		document.body.innerHTML = `
+			<select id="captureTypeSelect"><option value="rh" selected>rh</option></select>
+			<input id="captureChannelsInput" value="" />
+			<input id="captureScanGroupInput" value="sg-1" />
+		`;
+		const fd = new FormData();
+		UploadUtils.appendCaptureTypeToFormData(fd);
+		expect(fd.get("capture_type")).toBe("rh");
+		expect(fd.get("scan_group")).toBe("sg-1");
+	});
+});
diff --git a/gateway/sds_gateway/static/js/upload/uploadBootstrap.js b/gateway/sds_gateway/static/js/upload/uploadBootstrap.js
new file mode 100644
index 000000000..6d4d581ac
--- /dev/null
+++ b/gateway/sds_gateway/static/js/upload/uploadBootstrap.js
@@ -0,0 +1,39 @@
+/**
+ * Initializes upload UI based on DOM (capture modal, files browser, plain file form).
+ */
+function initUploadPage() {
+	const hasFilesBrowser = Boolean(document.querySelector(".files-container"));
+
+	if (document.getElementById("uploadCaptureModal")) {
+		const ctrl = new CaptureUploadController({});
+		ctrl.init();
+		window.captureUploadController = ctrl;
+	}
+
+	if (document.getElementById("captureTypeSelect")) {
+		window.captureTypeSelectorInstance = new CaptureTypeSelector();
+	}
+
+	if (hasFilesBrowser) {
+		new FilesBrowserManager();
+	}
+
+	if (hasFilesBrowser && document.getElementById("uploadFileForm")) {
+		window.fileUploadHandlerInstance = new FileUploadHandler();
+		window.fileUploadHandler = window.fileUploadHandlerInstance;
+	}
+}
+
+if (typeof window !== "undefined") {
+	const isNodeTestEnv =
+		typeof process !== "undefined" &&
+		process.env &&
+		process.env.NODE_ENV === "test";
+	if (!isNodeTestEnv) {
+		document.addEventListener("DOMContentLoaded", initUploadPage);
+	}
+}
+
+if (typeof module !== "undefined" && module.exports) {
+	module.exports = { initUploadPage };
+}
diff --git a/gateway/sds_gateway/static/js/visualizations/common/asyncJobPolling.js b/gateway/sds_gateway/static/js/visualizations/common/asyncJobPolling.js
new file mode 100644
index 000000000..e130677f6
--- /dev/null
+++ b/gateway/sds_gateway/static/js/visualizations/common/asyncJobPolling.js
@@ -0,0 +1,24 @@
+/**
+ * Shared interval polling helpers for async visualization jobs.
+ * @param {{ pollingInterval?: ReturnType<typeof setInterval> | null }} host
+ * @param {() => void | Promise<void>} tick
+ * @param {number} [intervalMs]
+ */
+export function startAsyncJobPolling(host, tick, intervalMs = 3000) {
+	if (host.pollingInterval) {
+		clearInterval(host.pollingInterval);
+	}
+	host.pollingInterval = setInterval(() => {
+		void tick();
+	}, intervalMs);
+}
+
+/**
+ * @param {{ pollingInterval?: ReturnType<typeof setInterval> | null }} host
+ */
+export function stopAsyncJobPolling(host) {
+	if (host.pollingInterval) {
+		clearInterval(host.pollingInterval);
+		host.pollingInterval = null;
+	}
+}
diff --git a/gateway/sds_gateway/static/js/visualizations/errorHandler.js b/gateway/sds_gateway/static/js/visualizations/errorHandler.js
deleted file mode 100644
index c8ad02bc2..000000000
--- a/gateway/sds_gateway/static/js/visualizations/errorHandler.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Common Error Handler for Visualizations
- * Provides shared error handling functionality for visualizations
- */
-
-/**
- * Extract the last line from a traceback string
- */
-export function extractErrorDetail(traceback) {
-	if (!traceback) return "Check your capture data for issues.";
-
-	const tracebackLines = traceback.split("\n").filter((line) => line.trim());
-	return tracebackLines.length > 0
-		? tracebackLines[tracebackLines.length - 1].trim()
-		: "Check your capture data for issues.";
-}
-
-/**
- * Generate user-friendly error message based on error type
- * @returns {Object} Object with `message` (user-friendly message) and `errorDetail` (last error detail line, if any)
- */
-export function generateErrorMessage(errorInfo, hasSourceDataError) {
-	const message = hasSourceDataError
-		? "An error occurred while processing; it may be due to an issue with the capture data."
-		: "A server error occurred during processing. Please try again.";
-
-	let errorDetail = null;
-	if (hasSourceDataError && errorInfo.traceback) {
-		errorDetail = extractErrorDetail(errorInfo.traceback);
-	}
-
-	return { message, errorDetail };
-}
-
-/**
- * Handle error display setup for a visualization
- * @param {Object} config - Configuration object
- * @param {HTMLElement} config.messageElement - Element to display the error message
- * @param {HTMLElement} config.errorDetailElement - Element to display the error detail line (optional)
- * @param {string} config.message - Error message to display
- * @param {string} config.errorDetail - Last error detail line to display (optional)
- */
-export function setupErrorDisplay({
-	messageElement,
-	errorDetailElement,
-	message,
-	errorDetail,
-}) {
-	// Update the error message
-	if (messageElement) {
-		messageElement.textContent = message;
-		if (messageElement.classList) {
-			messageElement.classList.add("error-message-text");
-		}
-	}
-
-	// Update the error detail line if provided
-	if (errorDetailElement) {
-		if (errorDetail) {
-			errorDetailElement.textContent = errorDetail;
-			errorDetailElement.classList.remove("d-none");
-		} else {
-			errorDetailElement.textContent = "";
-			errorDetailElement.classList.add("d-none");
-		}
-	}
-}
diff --git a/gateway/sds_gateway/static/js/visualizations/processingErrorMessages.js b/gateway/sds_gateway/static/js/visualizations/processingErrorMessages.js
new file mode 100644
index 000000000..fad8ef002
--- /dev/null
+++ b/gateway/sds_gateway/static/js/visualizations/processingErrorMessages.js
@@ -0,0 +1,59 @@
+/**
+ * User-facing copy for async visualization job failures (spectrogram, waterfall).
+ */
+
+export function extractErrorDetail(traceback) {
+	if (!traceback) return "Check your capture data for issues.";
+
+	const tracebackLines = traceback.split("\n").filter((line) => line.trim());
+	return tracebackLines.length > 0
+		? tracebackLines[tracebackLines.length - 1].trim()
+		: "Check your capture data for issues.";
+}
+
+/**
+ * @returns {{ message: string, errorDetail: string|null }}
+ */
+/** Extract a readable error detail from API JSON (spectrogram create/status). */
+export function extractApiResponseDetail(responseData) {
+	if (!responseData) return null;
+	if (typeof responseData === "string") return responseData;
+	const detailFields = ["detail", "error", "message"];
+	for (const fieldName of detailFields) {
+		if (typeof responseData[fieldName] === "string") {
+			return responseData[fieldName];
+		}
+	}
+	if (Array.isArray(responseData.errors)) {
+		return responseData.errors.join(", ");
+	}
+	if (
+		responseData.errors &&
+		typeof responseData.errors === "object" &&
+		!Array.isArray(responseData.errors)
+	) {
+		const firstFieldErrors = Object.entries(responseData.errors)[0];
+		if (!firstFieldErrors) return null;
+		const [fieldName, fieldValue] = firstFieldErrors;
+		if (Array.isArray(fieldValue)) {
+			return `${fieldName}: ${fieldValue.join(", ")}`;
+		}
+		if (typeof fieldValue === "string") {
+			return `${fieldName}: ${fieldValue}`;
+		}
+	}
+	return null;
+}
+
+export function generateErrorMessage(errorInfo, hasSourceDataError) {
+	const message = hasSourceDataError
+		? "An error occurred while processing; it may be due to an issue with the capture data."
+		: "A server error occurred during processing. Please try again.";
+
+	let errorDetail = null;
+	if (hasSourceDataError && errorInfo.traceback) {
+		errorDetail = extractErrorDetail(errorInfo.traceback);
+	}
+
+	return { message, errorDetail };
+}
diff --git a/gateway/sds_gateway/static/js/visualizations/spectrogram/SpectrogramVisualization.js b/gateway/sds_gateway/static/js/visualizations/spectrogram/SpectrogramVisualization.js
index 915c371ec..38e3a063c 100644
--- a/gateway/sds_gateway/static/js/visualizations/spectrogram/SpectrogramVisualization.js
+++ b/gateway/sds_gateway/static/js/visualizations/spectrogram/SpectrogramVisualization.js
@@ -3,7 +3,14 @@
  * Orchestrates all spectrogram components and handles the main functionality
  */
 
-import { generateErrorMessage, setupErrorDisplay } from "../errorHandler.js";
+import {
+	startAsyncJobPolling,
+	stopAsyncJobPolling,
+} from "../common/asyncJobPolling.js";
+import {
+	extractApiResponseDetail,
+	generateErrorMessage,
+} from "../processingErrorMessages.js";
 import { SpectrogramControls } from "./SpectrogramControls.js";
 import { SpectrogramRenderer } from "./SpectrogramRenderer.js";
 import {
@@ -163,13 +170,7 @@ export class SpectrogramVisualization {
 	 * Start polling for job status
 	 */
 	startStatusPolling() {
-		if (this.pollingInterval) {
-			clearInterval(this.pollingInterval);
-		}
-
-		this.pollingInterval = setInterval(async () => {
-			await this.checkJobStatus();
-		}, 3000); // Poll every 3 seconds
+		startAsyncJobPolling(this, () => this.checkJobStatus());
 	}
 
 	/**
@@ -223,10 +224,7 @@ export class SpectrogramVisualization {
 	 * Stop status polling
 	 */
 	stopStatusPolling() {
-		if (this.pollingInterval) {
-			clearInterval(this.pollingInterval);
-			this.pollingInterval = null;
-		}
+		stopAsyncJobPolling(this);
 	}
 
 	/**
@@ -286,7 +284,7 @@ export class SpectrogramVisualization {
 
 		const responseData = await this.safeParseJson(response);
 		const processingStatus = responseData?.processing_status;
-		const responseDetail = this.extractResponseDetail(responseData);
+		const responseDetail = extractApiResponseDetail(responseData);
 
 		const details = [];
 		if (processingStatus) {
@@ -319,52 +317,6 @@ export class SpectrogramVisualization {
 		}
 	}
 
-	/**
-	 * Extract a readable error detail from API response payload
-	 */
-	extractResponseDetail(responseData) {
-		if (!responseData) {
-			return null;
-		}
-
-		if (typeof responseData === "string") {
-			return responseData;
-		}
-
-		const detailFields = ["detail", "error", "message"];
-		for (const fieldName of detailFields) {
-			if (typeof responseData[fieldName] === "string") {
-				return responseData[fieldName];
-			}
-		}
-
-		if (Array.isArray(responseData.errors)) {
-			return responseData.errors.join(", ");
-		}
-
-		if (
-			responseData.errors &&
-			typeof responseData.errors === "object" &&
-			!Array.isArray(responseData.errors)
-		) {
-			const firstFieldErrors = Object.entries(responseData.errors)[0];
-			if (!firstFieldErrors) {
-				return null;
-			}
-
-			const [fieldName, fieldValue] = firstFieldErrors;
-			if (Array.isArray(fieldValue)) {
-				return `${fieldName}: ${fieldValue.join(", ")}`;
-			}
-
-			if (typeof fieldValue === "string") {
-				return `${fieldName}: ${fieldValue}`;
-			}
-		}
-
-		return null;
-	}
-
 	/**
 	 * Format backend processing status for user display
 	 */
@@ -491,26 +443,14 @@ export class SpectrogramVisualization {
 	/**
 	 * Show non-error status message
 	 */
-	showStatus(message, detail = null) {
-		if (!this.errorDisplay) {
+	async showStatus(message, detail = null) {
+		if (!this.errorDisplay || !window.DOMUtils?.showVisualizationPanel) {
 			return;
 		}
-
-		const messageElement = this.errorDisplay.querySelector(
-			"p.error-message-text",
-		);
-		const errorDetailElement = this.errorDisplay.querySelector(
-			"p.error-detail-line",
-		);
-
-		setupErrorDisplay({
-			messageElement,
-			errorDetailElement,
-			message,
-			errorDetail: detail,
+		await window.DOMUtils.showVisualizationPanel(message, detail, {
+			target: this.errorDisplay,
+			variant: "info",
 		});
-
-		this.errorDisplay.classList.remove("d-none");
 	}
 
 	/**
@@ -520,22 +460,7 @@ export class SpectrogramVisualization {
 		if (!this.errorDisplay) {
 			return;
 		}
-
-		const messageElement = this.errorDisplay.querySelector(
-			"p.error-message-text",
-		);
-		const errorDetailElement = this.errorDisplay.querySelector(
-			"p.error-detail-line",
-		);
-
-		setupErrorDisplay({
-			messageElement,
-			errorDetailElement,
-			message: "",
-			errorDetail: null,
-		});
-
-		this.errorDisplay.classList.add("d-none");
+		window.DOMUtils?.hideVisualizationPanel?.(this.errorDisplay);
 	}
 
 	/**
@@ -569,29 +494,15 @@ export class SpectrogramVisualization {
 	/**
 	 * Show error message with details
 	 */
-	showErrorWithDetails(message, errorDetail = null) {
-		// Clear image
-		if (this.renderer) {
-			this.renderer.clearImage();
-		}
-
-		// Setup error display using the centralized handler
-		const errorDisplay = document.getElementById("visualizationErrorDisplay");
-		if (errorDisplay) {
-			const messageElement = errorDisplay.querySelector("p.error-message-text");
-			const errorDetailElement = errorDisplay.querySelector(
-				"p.error-detail-line",
-			);
-
-			setupErrorDisplay({
-				messageElement,
-				errorDetailElement,
-				message,
-				errorDetail,
-			});
-
-			errorDisplay.classList.remove("d-none");
+	async showErrorWithDetails(message, errorDetail = null) {
+		if (!this.errorDisplay || !window.DOMUtils?.showVisualizationPanel) {
+			return;
 		}
+		await window.DOMUtils.showVisualizationPanel(message, errorDetail, {
+			target: this.errorDisplay,
+			variant: "danger",
+			beforeShow: () => this.renderer?.clearImage(),
+		});
 	}
 
 	/**
diff --git a/gateway/sds_gateway/static/js/visualizations/visualizationModal.js b/gateway/sds_gateway/static/js/visualizations/visualizationModal.js
index bc6ce26a0..7721d8b9c 100644
--- a/gateway/sds_gateway/static/js/visualizations/visualizationModal.js
+++ b/gateway/sds_gateway/static/js/visualizations/visualizationModal.js
@@ -22,6 +22,9 @@ class VisualizationModal {
 		this.currentCaptureUuid = captureUuid;
 		this.currentCaptureType = captureType;
 
+		this.modal.dataset.captureUuid = captureUuid;
+		this.modal.dataset.captureType = captureType;
+
 		// Set the capture type on the modal for CSS-based filtering
 		this.modal.setAttribute("data-current-capture-type", captureType);
 
@@ -46,6 +49,11 @@ class VisualizationModal {
 	}
 
 	setupEventListeners() {
+		if (this.modal.dataset.visualizationModalWired === "1") {
+			return;
+		}
+		this.modal.dataset.visualizationModalWired = "1";
+
 		// Handle visualization selection buttons
 		this.modal.addEventListener("click", (e) => {
 			const button = e.target.closest(".visualization-select-btn");
@@ -60,6 +68,8 @@ class VisualizationModal {
 			// Clear the stored capture data
 			this.currentCaptureUuid = null;
 			this.currentCaptureType = null;
+			delete this.modal.dataset.captureUuid;
+			delete this.modal.dataset.captureType;
 
 			// Remove any lingering modal backdrops
 			const backdrops = Array.from(
@@ -161,15 +171,19 @@ class VisualizationModal {
 	 * Open the selected visualization
 	 */
 	openVisualization(visualizationType) {
-		if (!this.currentCaptureUuid || !this.visualizationCompatibility) {
+		const captureUuid =
+			this.currentCaptureUuid || this.modal.dataset.captureUuid || null;
+		if (!captureUuid) {
 			console.error("Missing required data:", {
 				currentCaptureUuid: this.currentCaptureUuid,
+				captureUuidFromModal: this.modal.dataset.captureUuid,
 				visualizationCompatibility: this.visualizationCompatibility,
 			});
 			return;
 		}
 
-		const config = this.visualizationCompatibility[visualizationType];
+		const compatibility = this.visualizationCompatibility || {};
+		const config = compatibility[visualizationType];
 		if (!config) {
 			console.error(
 				"No config found for visualization type:",
@@ -179,10 +193,7 @@ class VisualizationModal {
 		}
 
 		// Build URL from the pattern
-		const url = config.url_pattern.replace(
-			"{capture_uuid}",
-			this.currentCaptureUuid,
-		);
+		const url = config.url_pattern.replace("{capture_uuid}", captureUuid);
 		window.location.href = url;
 
 		// Close the modal
diff --git a/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallRenderer.js b/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallRenderer.js
index 6bfae5c49..d71ad9177 100644
--- a/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallRenderer.js
+++ b/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallRenderer.js
@@ -13,6 +13,7 @@ import {
 	WATERFALL_TOP_MARGIN,
 	WATERFALL_WINDOW_SIZE,
 } from "./constants.js";
+import { colorForNormalizedPower } from "./waterfallColorMaps.js";
 
 class WaterfallRenderer {
 	constructor(canvas, overlayCanvas) {
@@ -254,99 +255,7 @@ class WaterfallRenderer {
 	 * Get color for power value using selected color map
 	 */
 	getColorForPower(normalizedPower) {
-		const intensity = Math.floor(normalizedPower * 255);
-
-		switch (this.colorMap) {
-			case "viridis": {
-				// Blue to green to yellow to red
-				if (normalizedPower < 0.25) {
-					return `rgb(0, ${Math.floor(intensity * 4)}, ${255 - intensity})`;
-				}
-				if (normalizedPower < 0.5) {
-					const t = (normalizedPower - 0.25) * 4;
-					return `rgb(0, 255, ${Math.floor(255 * (1 - t))})`;
-				}
-				if (normalizedPower < 0.75) {
-					const t = (normalizedPower - 0.5) * 4;
-					return `rgb(${Math.floor(255 * t)}, 255, 0)`;
-				}
-				const t = (normalizedPower - 0.75) * 4;
-				return `rgb(255, ${Math.floor(255 * (1 - t))}, 0)`;
-			}
-			case "plasma": {
-				// Purple to blue to green to yellow to red
-				if (normalizedPower < 0.25) {
-					return `rgb(${Math.floor(intensity * 4)}, 0, ${255 - intensity})`;
-				}
-				if (normalizedPower < 0.5) {
-					const t = (normalizedPower - 0.25) * 4;
-					return `rgb(255, 0, ${Math.floor(255 * (1 - t))})`;
-				}
-				if (normalizedPower < 0.75) {
-					const t = (normalizedPower - 0.5) * 4;
-					return `rgb(255, ${Math.floor(255 * t)}, 0)`;
-				}
-				const t = (normalizedPower - 0.75) * 4;
-				return `rgb(255, 255, ${Math.floor(255 * t)})`;
-			}
-			case "hot": {
-				// Black to red to yellow to white
-				if (normalizedPower < 0.33) {
-					const t = normalizedPower * 3;
-					return `rgb(${Math.floor(255 * t)}, 0, 0)`;
-				}
-				if (normalizedPower < 0.67) {
-					const t = (normalizedPower - 0.33) * 3;
-					return `rgb(255, ${Math.floor(255 * t)}, 0)`;
-				}
-				const t = (normalizedPower - 0.67) * 3;
-				return `rgb(255, 255, ${Math.floor(255 * t)})`;
-			}
-			case "gray":
-				return `rgb(${intensity}, ${intensity}, ${intensity})`;
-			case "inferno": {
-				// Black to purple to red to yellow
-				if (normalizedPower < 0.33) {
-					const t = normalizedPower * 3;
-					return `rgb(${Math.floor(128 * t)}, 0, ${Math.floor(255 * t)})`;
-				}
-				if (normalizedPower < 0.67) {
-					const t = (normalizedPower - 0.33) * 3;
-					return `rgb(${Math.floor(128 + 127 * t)}, 0, ${Math.floor(255 - 255 * t)})`;
-				}
-				const t = (normalizedPower - 0.67) * 3;
-				return `rgb(255, ${Math.floor(255 * t)}, 0)`;
-			}
-			case "magma": {
-				// Black to purple to pink to white
-				if (normalizedPower < 0.33) {
-					const t = normalizedPower * 3;
-					return `rgb(${Math.floor(128 * t)}, 0, ${Math.floor(255 * t)})`;
-				}
-				if (normalizedPower < 0.67) {
-					const t = (normalizedPower - 0.33) * 3;
-					return `rgb(${Math.floor(128 + 127 * t)}, 0, ${Math.floor(255 - 127 * t)})`;
-				}
-				const t = (normalizedPower - 0.67) * 3;
-				return `rgb(255, ${Math.floor(255 * t)}, ${Math.floor(128 + 127 * t)})`;
-			}
-			default: {
-				// Default to viridis-like blue to green to yellow to red
-				if (normalizedPower < 0.25) {
-					return `rgb(0, ${Math.floor(intensity * 4)}, ${255 - intensity})`;
-				}
-				if (normalizedPower < 0.5) {
-					const t = (normalizedPower - 0.25) * 4;
-					return `rgb(0, 255, ${Math.floor(255 * (1 - t))})`;
-				}
-				if (normalizedPower < 0.75) {
-					const t = (normalizedPower - 0.5) * 4;
-					return `rgb(${Math.floor(255 * t)}, 255, 0)`;
-				}
-				const t = (normalizedPower - 0.75) * 4;
-				return `rgb(255, ${Math.floor(255 * (1 - t))}, 0)`;
-			}
-		}
+		return colorForNormalizedPower(this.colorMap, normalizedPower);
 	}
 
 	/**
diff --git a/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallVisualization.js b/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallVisualization.js
index 9cf9150a8..bf47ba8e8 100644
--- a/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallVisualization.js
+++ b/gateway/sds_gateway/static/js/visualizations/waterfall/WaterfallVisualization.js
@@ -3,7 +3,11 @@
  * Main orchestrator that coordinates all waterfall components
  */
 
-import { generateErrorMessage, setupErrorDisplay } from "../errorHandler.js";
+import {
+	startAsyncJobPolling,
+	stopAsyncJobPolling,
+} from "../common/asyncJobPolling.js";
+import { generateErrorMessage } from "../processingErrorMessages.js";
 import WaterfallSliceCache from "./WaterfallSliceCache.js";
 import WaterfallSliceLoader from "./WaterfallSliceLoader.js";
 import {
@@ -232,23 +236,10 @@ class WaterfallVisualization {
 	resizeCanvas() {
 		if (!this.canvas || !this.overlayCanvas) return;
 
-		const container = this.canvas.parentElement;
-		const rect = container.getBoundingClientRect();
-
-		this.canvas.width = rect.width;
-		this.canvas.height = rect.height;
-
-		// Resize overlay canvas to match
-		this.overlayCanvas.width = rect.width;
-		this.overlayCanvas.height = rect.height;
-		this.overlayCanvas.style.width = `${rect.width}px`;
-		this.overlayCanvas.style.height = `${rect.height}px`;
-
 		if (this.waterfallRenderer) {
 			this.waterfallRenderer.resizeCanvas();
 		}
 
-		// Re-render if we have data
 		if (this.parsedWaterfallData && this.parsedWaterfallData.length > 0) {
 			this.render();
 		}
@@ -770,6 +761,11 @@ class WaterfallVisualization {
 		);
 		this.calculatePowerBounds();
 		this.isStreamingMode = false;
+		this._finalizeLoadedWaterfallDisplay();
+	}
+
+	/** Shared UI refresh after waterfall data is parsed and bounds are set. */
+	_finalizeLoadedWaterfallDisplay() {
 		this.isLoading = false;
 		this.showLoading(false);
 		this.controls.setTotalSlices(this.totalSlices);
@@ -884,15 +880,7 @@ class WaterfallVisualization {
 				await this.calculatePowerBoundsFromSamples();
 			}
 
-			this.isLoading = false;
-			this.showLoading(false);
-
-			this.controls.setTotalSlices(this.totalSlices);
-			this.waterfallRenderer.setScaleBounds(this.scaleMin, this.scaleMax);
-			this.periodogramChart.updateYAxisBounds(this.scaleMin, this.scaleMax);
-			this.updateColorLegend();
-
-			this.render();
+			this._finalizeLoadedWaterfallDisplay();
 
 			// Prefetch in background so scrolling is smooth (don't block initial display)
 			// Cap to one batch on load so we don't make many API calls without user scroll
@@ -1011,15 +999,7 @@ class WaterfallVisualization {
 			await this.loadSliceRange(initialEnd, prefetchEnd);
 		}
 
-		this.isLoading = false;
-		this.showLoading(false);
-
-		this.controls.setTotalSlices(this.totalSlices);
-		this.waterfallRenderer.setScaleBounds(this.scaleMin, this.scaleMax);
-		this.periodogramChart.updateYAxisBounds(this.scaleMin, this.scaleMax);
-		this.updateColorLegend();
-
-		this.render();
+		this._finalizeLoadedWaterfallDisplay();
 		this.prefetchAhead();
 	}
 
@@ -1082,13 +1062,7 @@ class WaterfallVisualization {
 	 * Start polling for job status
 	 */
 	startStatusPolling() {
-		if (this.pollingInterval) {
-			clearInterval(this.pollingInterval);
-		}
-
-		this.pollingInterval = setInterval(async () => {
-			await this.checkJobStatus();
-		}, 3000); // Poll every 3 seconds
+		startAsyncJobPolling(this, () => this.checkJobStatus());
 	}
 
 	/**
@@ -1134,10 +1108,7 @@ class WaterfallVisualization {
 	 * Stop status polling
 	 */
 	stopStatusPolling() {
-		if (this.pollingInterval) {
-			clearInterval(this.pollingInterval);
-			this.pollingInterval = null;
-		}
+		stopAsyncJobPolling(this);
 	}
 
 	/**
@@ -1694,23 +1665,9 @@ class WaterfallVisualization {
 			this.controls.setTotalSlices(0);
 		}
 
-		// Update error display
-		const errorDisplay = document.getElementById("visualizationErrorDisplay");
-		if (errorDisplay) {
-			const messageElement = errorDisplay.querySelector("p.error-message-text");
-			const errorDetailElement = errorDisplay.querySelector(
-				"p.error-detail-line",
-			);
-
-			setupErrorDisplay({
-				messageElement,
-				errorDetailElement,
-				message,
-				errorDetail,
-			});
-
-			errorDisplay.classList.remove("d-none");
-		}
+		void window.DOMUtils?.showVisualizationPanel?.(message, errorDetail, {
+			variant: "danger",
+		});
 	}
 
 	/**
diff --git a/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallRenderer.test.js b/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallRenderer.test.js
index f727bcbe2..b9bf4003b 100644
--- a/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallRenderer.test.js
+++ b/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallRenderer.test.js
@@ -14,6 +14,16 @@ jest.mock("../constants.js", () => ({
 	WATERFALL_WINDOW_SIZE: 100,
 }));
 
+jest.mock("../waterfallColorMaps.js", () => ({
+	colorForNormalizedPower: (colorMap, normalizedPower) => {
+		const intensity = Math.floor(normalizedPower * 255);
+		if (colorMap === "gray") {
+			return `rgb(${intensity}, ${intensity}, ${intensity})`;
+		}
+		return `rgb(0, ${intensity}, ${255 - intensity})`;
+	},
+}));
+
 import "../WaterfallRenderer.js";
 
 const WaterfallRenderer = window.WaterfallRenderer;
diff --git a/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallVisualization.test.js b/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallVisualization.test.js
index 6f659472f..27e75958e 100644
--- a/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallVisualization.test.js
+++ b/gateway/sds_gateway/static/js/visualizations/waterfall/__tests__/WaterfallVisualization.test.js
@@ -49,12 +49,11 @@ window.PeriodogramChart = class MockPeriodogramChart {
 	}
 };
 
-jest.mock("../../errorHandler.js", () => ({
+jest.mock("../../processingErrorMessages.js", () => ({
 	generateErrorMessage: jest.fn(() => ({
 		message: "Error",
 		errorDetail: null,
 	})),
-	setupErrorDisplay: jest.fn(),
 }));
 
 const mockCacheInstance = {
diff --git a/gateway/sds_gateway/static/js/visualizations/waterfall/waterfallColorMaps.js b/gateway/sds_gateway/static/js/visualizations/waterfall/waterfallColorMaps.js
new file mode 100644
index 000000000..2117c779f
--- /dev/null
+++ b/gateway/sds_gateway/static/js/visualizations/waterfall/waterfallColorMaps.js
@@ -0,0 +1,95 @@
+/** Colormap RGB for normalized power [0,1]. */
+export function colorForNormalizedPower(colorMap, normalizedPower) {
+	const intensity = Math.floor(normalizedPower * 255);
+	switch (colorMap) {
+			case "viridis": {
+				// Blue to green to yellow to red
+				if (normalizedPower < 0.25) {
+					return `rgb(0, ${Math.floor(intensity * 4)}, ${255 - intensity})`;
+				}
+				if (normalizedPower < 0.5) {
+					const t = (normalizedPower - 0.25) * 4;
+					return `rgb(0, 255, ${Math.floor(255 * (1 - t))})`;
+				}
+				if (normalizedPower < 0.75) {
+					const t = (normalizedPower - 0.5) * 4;
+					return `rgb(${Math.floor(255 * t)}, 255, 0)`;
+				}
+				const t = (normalizedPower - 0.75) * 4;
+				return `rgb(255, ${Math.floor(255 * (1 - t))}, 0)`;
+			}
+			case "plasma": {
+				// Purple to blue to green to yellow to red
+				if (normalizedPower < 0.25) {
+					return `rgb(${Math.floor(intensity * 4)}, 0, ${255 - intensity})`;
+				}
+				if (normalizedPower < 0.5) {
+					const t = (normalizedPower - 0.25) * 4;
+					return `rgb(255, 0, ${Math.floor(255 * (1 - t))})`;
+				}
+				if (normalizedPower < 0.75) {
+					const t = (normalizedPower - 0.5) * 4;
+					return `rgb(255, ${Math.floor(255 * t)}, 0)`;
+				}
+				const t = (normalizedPower - 0.75) * 4;
+				return `rgb(255, 255, ${Math.floor(255 * t)})`;
+			}
+			case "hot": {
+				// Black to red to yellow to white
+				if (normalizedPower < 0.33) {
+					const t = normalizedPower * 3;
+					return `rgb(${Math.floor(255 * t)}, 0, 0)`;
+				}
+				if (normalizedPower < 0.67) {
+					const t = (normalizedPower - 0.33) * 3;
+					return `rgb(255, ${Math.floor(255 * t)}, 0)`;
+				}
+				const t = (normalizedPower - 0.67) * 3;
+				return `rgb(255, 255, ${Math.floor(255 * t)})`;
+			}
+			case "gray":
+				return `rgb(${intensity}, ${intensity}, ${intensity})`;
+			case "inferno": {
+				// Black to purple to red to yellow
+				if (normalizedPower < 0.33) {
+					const t = normalizedPower * 3;
+					return `rgb(${Math.floor(128 * t)}, 0, ${Math.floor(255 * t)})`;
+				}
+				if (normalizedPower < 0.67) {
+					const t = (normalizedPower - 0.33) * 3;
+					return `rgb(${Math.floor(128 + 127 * t)}, 0, ${Math.floor(255 - 255 * t)})`;
+				}
+				const t = (normalizedPower - 0.67) * 3;
+				return `rgb(255, ${Math.floor(255 * t)}, 0)`;
+			}
+			case "magma": {
+				// Black to purple to pink to white
+				if (normalizedPower < 0.33) {
+					const t = normalizedPower * 3;
+					return `rgb(${Math.floor(128 * t)}, 0, ${Math.floor(255 * t)})`;
+				}
+				if (normalizedPower < 0.67) {
+					const t = (normalizedPower - 0.33) * 3;
+					return `rgb(${Math.floor(128 + 127 * t)}, 0, ${Math.floor(255 - 127 * t)})`;
+				}
+				const t = (normalizedPower - 0.67) * 3;
+				return `rgb(255, ${Math.floor(255 * t)}, ${Math.floor(128 + 127 * t)})`;
+			}
+			default: {
+				// Default to viridis-like blue to green to yellow to red
+				if (normalizedPower < 0.25) {
+					return `rgb(0, ${Math.floor(intensity * 4)}, ${255 - intensity})`;
+				}
+				if (normalizedPower < 0.5) {
+					const t = (normalizedPower - 0.25) * 4;
+					return `rgb(0, 255, ${Math.floor(255 * (1 - t))})`;
+				}
+				if (normalizedPower < 0.75) {
+					const t = (normalizedPower - 0.5) * 4;
+					return `rgb(${Math.floor(255 * t)}, 255, 0)`;
+				}
+				const t = (normalizedPower - 0.75) * 4;
+				return `rgb(255, ${Math.floor(255 * (1 - t))}, 0)`;
+			}
+	}
+}
diff --git a/gateway/sds_gateway/templates/allauth/layouts/entrance.html b/gateway/sds_gateway/templates/allauth/layouts/entrance.html
index 3fa867eac..cbd10fcec 100644
--- a/gateway/sds_gateway/templates/allauth/layouts/entrance.html
+++ b/gateway/sds_gateway/templates/allauth/layouts/entrance.html
@@ -15,15 +15,7 @@
         <div class="col-md-4 py-4 my-4 px-4">
             {% if messages %}
                 {% for message in messages %}
-                    {% if message.tags == "error" %}
-                        {% include "users/components/toast.html" with message=message type="error" %}
-                    {% elif message.tags == "success" %}
-                        {% include "users/components/toast.html" with message=message type="success" %}
-                    {% elif message.tags == "warning" %}
-                        {% include "users/components/toast.html" with message=message type="warning" %}
-                    {% else %}
-                        {% include "users/components/toast.html" with message=message type="info" %}
-                    {% endif %}
+                    {% include "users/components/message.html" with message=message type=message.level_tag|default:"info" presentation="toast" %}
                 {% endfor %}
             {% endif %}
             {% block content %}
diff --git a/gateway/sds_gateway/templates/base.html b/gateway/sds_gateway/templates/base.html
index b121a037d..36e171bb8 100644
--- a/gateway/sds_gateway/templates/base.html
+++ b/gateway/sds_gateway/templates/base.html
@@ -42,9 +42,13 @@
             <!-- Permission constants (must be loaded first) -->
             <script src="{% static 'js/constants/PermissionLevels.js' %}"></script>
             <!-- Core JavaScript files - available globally -->
+            <script src="{% static 'js/core/BaseManager.js' %}"></script>
+            <script src="{% static 'js/core/ModalManager.js' %}"></script>
             <script src="{% static 'js/core/APIClient.js' %}"></script>
             <script src="{% static 'js/core/PermissionsManager.js' %}"></script>
             <script src="{% static 'js/core/DOMUtils.js' %}"></script>
+            <script src="{% static 'js/core/UserInputController.js' %}"></script>
+            <script src="{% static 'js/core/PageGate.js' %}"></script>
             <script src="{% static 'js/core/PageLifecycleManager.js' %}"></script>
             <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
         {% endblock javascript %}
@@ -188,10 +192,10 @@
                         <div class="alert alert-dismissible alert-{{ notification.level }}">{{ notification.user_message }}</div>
                     {% endfor %}
                 {% endif %}
-                {% comment %} Django messages rendered as toasts {% endcomment %}
+                {% comment %} Django messages: server-rendered toasts via message.html {% endcomment %}
                 {% if messages %}
                     {% for message in messages %}
-                        {% include "users/components/toast.html" with message=message type=message.level_tag|default:"info" %}
+                        {% include "users/components/message.html" with message=message type=message.level_tag|default:"info" presentation="toast" %}
                     {% endfor %}
                 {% endif %}
                 {% block body %}
diff --git a/gateway/sds_gateway/templates/pages/home.html b/gateway/sds_gateway/templates/pages/home.html
index c230b392a..8c552f007 100644
--- a/gateway/sds_gateway/templates/pages/home.html
+++ b/gateway/sds_gateway/templates/pages/home.html
@@ -59,10 +59,11 @@ <h2 class="card-title h4 mb-0">Latest Public Datasets</h2>
                                                 <div class="card-body d-flex flex-column">
                                                     <h5 class="card-title">
                                                         <a href="#"
-                                                           class="dataset-name-link text-decoration-none"
-                                                           data-bs-toggle="modal"
-                                                           data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
-                                                           data-dataset-uuid="{{ dataset.uuid }}">{{ dataset.name }}</a>
+                                                           class="dataset-name-link text-decoration-none dataset-details-open"
+                                                           data-dataset-uuid="{{ dataset.uuid }}"
+                                                           data-item-uuid="{{ dataset.uuid }}"
+                                                           data-item-type="dataset"
+                                                           aria-label="View details for {{ dataset.name }}">{{ dataset.name }}</a>
                                                         {% if dataset.is_public %}<i class="bi bi-globe ms-1 text-primary" title="Public"></i>{% endif %}
                                                     </h5>
                                                     <div class="mb-2">
@@ -163,13 +164,11 @@ <h2 class="card-title h5">SpectrumX Website</h2>
             </div>
         </div>
     </main>
-    <!-- Dataset details modals (one per card; IDs must match data-bs-target above) -->
-    {% for dataset in latest_datasets %}
-        {% include "users/partials/dataset_details_modal.html" with dataset=dataset %}
-    {% endfor %}
+    {% include "users/partials/asset_details_modal.html" %}
 {% endblock body %}
 {% block javascript %}
     {{ block.super }}
+    <script src="{% static 'js/constants/DetailsModalConfig.js' %}"></script>
     <!-- Action components -->
     <script src="{% static 'js/actions/DetailsActionManager.js' %}"></script>
     <!-- Keyword chip input component -->
@@ -177,28 +176,7 @@ <h2 class="card-title h5">SpectrumX Website</h2>
     {# djlint:off #}
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize DetailsActionManager for dataset details modal
-            // For the home page, we use viewer-level permissions since we're showing public datasets
-            if (typeof DetailsActionManager !== 'undefined' && typeof PermissionsManager !== 'undefined') {
-                const permissions = new PermissionsManager({
-                    userPermissionLevel: window.PermissionLevels.VIEWER,
-                    currentUserId: {{ request.user.id|default:"null" }},
-                    isOwner: false,
-                    datasetPermissions: {
-                        canEditMetadata: false,
-                        canAddAssets: false,
-                        canRemoveAnyAssets: false,
-                        canRemoveOwnAssets: false,
-                        canShare: false,
-                        canDownload: true, // Public datasets can be downloaded
-                        canDelete: false
-                    }
-                });
-
-                window.detailsActionManager = new DetailsActionManager({
-                    permissions: permissions
-                });
-            }
+            window.ModalManager?.initializeModal?.({ detailsClickDelegation: true });
         });
 </script>
     {# djlint:on #}
diff --git a/gateway/sds_gateway/templates/users/capture_list.html b/gateway/sds_gateway/templates/users/capture_list.html
new file mode 100644
index 000000000..edb8a466a
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/capture_list.html
@@ -0,0 +1,442 @@
+{# Captures list page (shell + filters + table + modals). Legacy URL/template name was file_list.html. #}
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block bodyclass %}
+    hero-white-page
+{% endblock bodyclass %}
+{% block css %}
+    {{ block.super }}
+    <link rel="stylesheet"
+          href="{% static 'css/visualizations/visualization_modal.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/permission-levels.css' %}" />
+{% endblock css %}
+{% block body %}
+    <!-- Add Font Awesome for sort arrows -->
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <!-- Add noUiSlider CSS first -->
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" />
+    <!-- Add file-list.css for upload modal styling -->
+    <link rel="stylesheet" href="{% static 'css/file-list.css' %}" />
+    <!-- Add noUiSlider JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
+    <style>
+        .clear-search-hidden {
+            display: none;
+        }
+    </style>
+    <!-- CSRF Token for JavaScript -->
+    {% csrf_token %}
+    <!-- System-wide notifications -->
+    {% if system_notifications %}
+        <div class="container">
+            {% for notification in system_notifications %}
+                <div class="alert alert-dismissible alert-{{ notification.level }}">{{ notification.user_message }}</div>
+            {% endfor %}
+        </div>
+    {% endif %}
+    {% if messages %}
+        <div class="container">
+            {% for message in messages %}
+                {% include "users/components/message.html" with message=message type=message.level_tag|default:"info" presentation="toast" %}
+            {% endfor %}
+        </div>
+    {% endif %}
+    <div id="upload-alert-container" class="container mt-3"></div>
+    <div class="content-wrapper">
+        <div class="main-content-area">
+            <div class="container-fluid px-5 pt-4">
+                <!-- Headers Row -->
+                <div class="row mb-1">
+                    <div class="col-12">
+                        <h1 class="mb-0 text-start">Captures</h1>
+                    </div>
+                </div>
+                <!-- Content Row -->
+                <div class="row">
+                    <!-- Sidebar Filters -->
+                    <aside class="col-md-3 mb-4">
+                        <div class="sidebar-filters">
+                            <div class="accordion" id="filtersAccordion">
+                                <!-- Frequency -->
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header" id="headingFrequency">
+                                        <button class="accordion-button collapsed"
+                                                type="button"
+                                                data-bs-target="#collapseFrequency"
+                                                aria-expanded="false"
+                                                aria-controls="collapseFrequency">
+                                            <i class="fas fa-signal me-2"></i>
+                                            Center Frequency
+                                        </button>
+                                    </h2>
+                                    <div id="collapseFrequency" class="accordion-collapse collapse">
+                                        <div class="accordion-body">
+                                            <label for="frequency-range" class="form-label">Center Frequency Range</label>
+                                            <div id="frequency-range-slider"
+                                                 class="mt-3 mb-3"
+                                                 role="slider"
+                                                 aria-valuemin="0"
+                                                 aria-valuemax="10"
+                                                 aria-valuenow="0,10"
+                                                 aria-valuetext="Frequency range from 0.0 GHz to 10.0 GHz"></div>
+                                            <div class="d-flex justify-content-between mb-3">
+                                                <span id="frequency-range-lower" aria-live="polite">0 GHz</span>
+                                                <span id="frequency-range-upper" aria-live="polite">10 GHz</span>
+                                            </div>
+                                            <div class="row mt-3">
+                                                <div class="col-6">
+                                                    <label for="centerFreqMinInput" class="form-label small">Min (GHz)</label>
+                                                    <input type="number"
+                                                           id="centerFreqMinInput"
+                                                           class="form-control form-control-sm"
+                                                           min="0"
+                                                           max="10"
+                                                           step="0.1"
+                                                           value="0"
+                                                           placeholder="0" />
+                                                </div>
+                                                <div class="col-6">
+                                                    <label for="centerFreqMaxInput" class="form-label small">Max (GHz)</label>
+                                                    <input type="number"
+                                                           id="centerFreqMaxInput"
+                                                           class="form-control form-control-sm"
+                                                           min="0"
+                                                           max="10"
+                                                           step="0.1"
+                                                           value="10"
+                                                           placeholder="10" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Date -->
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header" id="headingDate">
+                                        <button class="accordion-button collapsed"
+                                                type="button"
+                                                data-bs-target="#collapseDate"
+                                                aria-expanded="false"
+                                                aria-controls="collapseDate">
+                                            <i class="fas fa-calendar me-2"></i>
+                                            Date Range
+                                        </button>
+                                    </h2>
+                                    <div id="collapseDate" class="accordion-collapse collapse">
+                                        <div class="accordion-body">
+                                            <div class="row">
+                                                <div class="col mb-3">
+                                                    <label class="form-label" for="start_date">Start Date</label>
+                                                    <input type="date" class="form-control" id="start_date" name="date_start" />
+                                                </div>
+                                                <div class="col">
+                                                    <label class="form-label" for="end_date">End Date</label>
+                                                    <input type="date" class="form-control" id="end_date" name="date_end" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="d-flex gap-3 mt-4">
+                                <button class="btn btn-primary flex-fill"
+                                        type="button"
+                                        id="apply-filters-btn">Apply Filters</button>
+                                <button class="btn btn-secondary flex-fill"
+                                        type="button"
+                                        id="clear-filters-btn">Clear Filters</button>
+                            </div>
+                        </div>
+                    </aside>
+                    <!-- Main Content -->
+                    <main class="col-md-9 pt-0">
+                        <!-- Search Form -->
+                        <form id="search-form"
+                              role="search"
+                              aria-label="Search captures"
+                              class="text-start mt-0">
+                            <div class="row g-3 mb-3">
+                                <div class="col-12">
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <!-- Search Input Group -->
+                                        <div class="flex-grow-1 me-3">
+                                            <label for="search-input" class="visually-hidden">Search captures</label>
+                                            <div class="input-group">
+                                                <div class="position-relative flex-grow-1">
+                                                    <input type="search"
+                                                           class="form-control pe-5"
+                                                           id="search-input"
+                                                           name="search"
+                                                           placeholder="Search captures..."
+                                                           value="{{ search }}"
+                                                           aria-describedby="searchHelp" />
+                                                    <button type="button"
+                                                            class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-secondary px-3 clear-search-hidden"
+                                                            id="clear-search-btn"
+                                                            aria-label="Clear search">
+                                                        <i class="fas fa-times"></i>
+                                                    </button>
+                                                </div>
+                                                <button class="btn btn-primary"
+                                                        type="submit"
+                                                        id="search-btn"
+                                                        aria-label="Search captures">
+                                                    <i class="fas fa-search" aria-hidden="true"></i>
+                                                    <span class="d-none d-sm-inline ms-1">Search</span>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <!-- Upload Button Group -->
+                                        <div class="flex-shrink-0">
+                                            <div class="input-group">
+                                                <button type="button"
+                                                        class="btn btn-success"
+                                                        data-bs-toggle="modal"
+                                                        data-bs-target="#uploadCaptureModal">
+                                                    <i class="fas fa-upload"></i> Upload Capture
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                        <!-- Loading indicator -->
+                        <div id="loading-indicator" class="text-center py-3 d-none">
+                            <div class="spinner-border text-primary" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <p class="mt-2 text-muted">Searching captures...</p>
+                        </div>
+                        <!-- Bulk add to dataset (owned captures only) -->
+                        <div id="capture-list-bulk-actions"
+                             class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
+                            <span id="capture-list-selected-count"
+                                  class="text-muted small"
+                                  aria-live="polite">0 captures selected</span>
+                            <button type="button"
+                                    class="btn btn-sm btn-primary"
+                                    id="capture-list-add-to-dataset-btn"
+                                    disabled>
+                                <i class="bi bi-folder-plus me-1"></i>Add to dataset
+                            </button>
+                        </div>
+                        <!-- Captures Table -->
+                        <div id="capture-list-ajax-wrapper">
+                            {% include "users/components/asset_list_table.html" with page_obj=page_obj asset_type=asset_type table_headers=table_headers no_assets_message=no_assets_message asset_row_template=asset_row_template ajax_fragment=ajax_fragment %}
+                        </div>
+                    </main>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Quick Add to Dataset Modal (single or multiple captures) -->
+    {% include "users/partials/quick_add_to_dataset_modal.html" %}
+    {% include "users/partials/asset_details_modal.html" %}
+    <!-- Upload Capture Modal -->
+    {% include "users/partials/upload_capture_modal.html" %}
+    <!-- Upload Result Modal -->
+    {% include "users/partials/upload_result_modal.html" %}
+    <div id="capture-list-modals-container">
+        <!-- Per-capture Share and Download modals (replaced on AJAX list refresh) -->
+        {% include "users/components/capture_list_modals.html" with captures=page_obj.object_list %}
+    </div>
+{% endblock body %}
+{% block javascript %}
+    {{ block.super }}
+    <!-- Action components -->
+    <script src="{% static 'js/share/UserSearchDropdown.js' %}"></script>
+    <script src="{% static 'js/actions/ShareActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/download/captureDownloadSlider.js' %}"></script>
+    <script src="{% static 'js/actions/DownloadActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/details/CaptureDetailsModalBehavior.js' %}"></script>
+    <script src="{% static 'js/actions/details/AssetDetailsModalLoader.js' %}"></script>
+    <script src="{% static 'js/actions/quickAdd/quickAddApi.js' %}"></script>
+    <script src="{% static 'js/actions/QuickAddToDatasetManager.js' %}"></script>
+    <script src="{% static 'js/actions/CaptureListSelectionManager.js' %}"></script>
+    <script src="{% static 'js/constants/detailsModalConfig.js' %}"></script>
+    <script src="{% static 'js/visualizations/visualizationModal.js' %}"></script>
+    <script src="{% static 'js/constants/FileListConfig.js' %}"></script>
+    <script src="{% static 'js/search/AssetSearchHandler.js' %}"></script>
+    <script src="{% static 'js/core/PageController.js' %}"></script>
+    {# djlint:off #}
+    <script>
+        (function bootCaptureListPage() {
+            function run() {
+                if (!window.PageController || !window.PageController.initListPage) return;
+                window.PageController.initListPage({
+                    pageLifecycleConfig: {
+                        pageType: 'capture-list',
+                        permissions: {
+                            userPermissionLevel: 'owner',
+                            currentUserId: {{ request.user.id }},
+                            isOwner: true,
+                            capturePermissions: {
+                                canEditMetadata: false,
+                                canAddAssets: false,
+                                canRemoveAnyAssets: false,
+                                canRemoveOwnAssets: false,
+                                canShare: true,
+                                canDownload: true,
+                                canDelete: false
+                            }
+                        }
+                    },
+                    listRefreshConfig: {
+                        containerSelector: '#capture-list-ajax-wrapper',
+                        modalsContainerSelector: '#capture-list-modals-container',
+                        url: '{% url "users:capture_list" %}',
+                        itemType: 'capture'
+                    },
+                    captureList: true
+                });
+
+                if (window.ListPageSearchController && window.FileListConfig?.CAPTURE_LIST_PARAM_SPECS) {
+                    new window.ListPageSearchController({
+                        searchFormId: 'search-form',
+                        searchButtonId: 'search-btn',
+                        clearButtonId: 'clear-search-btn',
+                        paramSpecs: window.FileListConfig.CAPTURE_LIST_PARAM_SPECS,
+                        basePath: '{% url "users:capture_list" %}',
+                        preserveUrlParams: ['sort_by', 'sort_order', 'items_per_page'],
+                        applyFiltersButtonId: 'apply-filters-btn',
+                        clearFiltersButtonId: 'clear-filters-btn',
+                    });
+                }
+            }
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', run);
+            } else {
+                run();
+            }
+        })();
+</script>
+    {# djlint:on #}
+    <!-- Upload Capture Modal JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/hash-wasm@4.12.0/dist/blake3.umd.min.js"></script>
+    <script src="{% static 'js/upload/UploadUtils.js' %}"></script>
+    <script src="{% static 'js/upload/CaptureTypeSelector.js' %}"></script>
+    <script src="{% static 'js/upload/CaptureUploadController.js' %}"></script>
+    <script src="{% static 'js/upload/uploadBootstrap.js' %}"></script>
+    <!-- Pass Django context data to JavaScript -->
+    {# djlint:off #}
+    <script>
+        // Make visualization compatibility data available to JavaScript
+        window.visualizationCompatibility = {{ visualization_compatibility | safe }};
+</script>
+    <script>
+        // Initialize noUiSlider for frequency range
+        document.addEventListener('DOMContentLoaded', function() {
+            const frequencyRangeSlider = document.getElementById('frequency-range-slider');
+            if (frequencyRangeSlider) {
+                noUiSlider.create(frequencyRangeSlider, {
+                    start: [0, 10],
+                    connect: true,
+                    range: {
+                        'min': 0,
+                        'max': 10
+                    },
+                    step: 0.1,
+                    format: {
+                        to: function(value) {
+                            return parseFloat(value).toFixed(1);
+                        },
+                        from: function(value) {
+                            return parseFloat(value);
+                        }
+                    }
+                });
+
+                const lowerValue = document.getElementById('frequency-range-lower');
+                const upperValue = document.getElementById('frequency-range-upper');
+                const minInput = document.getElementById('centerFreqMinInput');
+                const maxInput = document.getElementById('centerFreqMaxInput');
+
+                // Track user interaction with slider
+                let userInteractedWithSlider = false;
+
+                frequencyRangeSlider.noUiSlider.on('update', function(values, handle) {
+                    const value = parseFloat(values[handle]);
+                    if (handle === 0) {
+                        lowerValue.textContent = value + ' GHz';
+                        minInput.value = value;
+                        frequencyRangeSlider.setAttribute('aria-valuetext', `Frequency range from ${value} GHz to ${parseFloat(values[1])} GHz`);
+                    } else {
+                        upperValue.textContent = value + ' GHz';
+                        maxInput.value = value;
+                        frequencyRangeSlider.setAttribute('aria-valuetext', `Frequency range from ${parseFloat(values[0])} GHz to ${value} GHz`);
+                    }
+                });
+
+                // Mark as interacted when user changes slider
+                frequencyRangeSlider.noUiSlider.on('change', function() {
+                    userInteractedWithSlider = true;
+                    // Trigger the global tracking
+                    if (window.initializeFrequencySlider) {
+                        // Update the global interaction tracking
+                        const event = new Event('change');
+                        minInput.dispatchEvent(event);
+                    }
+                });
+
+                // Update slider when input values change
+                minInput.addEventListener('change', function() {
+                    const value = parseFloat(this.value);
+                    if (!isNaN(value) && value >= 0 && value <= 10) {
+                        frequencyRangeSlider.noUiSlider.set([value, null]);
+                    }
+                });
+
+                maxInput.addEventListener('change', function() {
+                    const value = parseFloat(this.value);
+                    if (!isNaN(value) && value >= 0 && value <= 10) {
+                        frequencyRangeSlider.noUiSlider.set([null, value]);
+                    }
+                });
+
+                // Initialize from URL parameters after slider is created
+                if (window.initializeFrequencySlider) {
+                    window.initializeFrequencySlider();
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            if (window.VisualizationModal && !window.visualizationModalInstance) {
+                window.visualizationModalInstance = new window.VisualizationModal();
+            }
+
+            if (window.QuickAddToDatasetManager && document.getElementById("quickAddToDatasetModal")) {
+                window.quickAddToDatasetManager = new window.QuickAddToDatasetManager();
+                if (window.CaptureListSelectionManager) {
+                    window.captureListSelectionManager = new window.CaptureListSelectionManager(
+                        window.quickAddToDatasetManager,
+                    );
+                }
+            }
+
+            const downloadAlert = sessionStorage.getItem('captureDownloadAlert');
+            if (downloadAlert) {
+                const alertData = JSON.parse(downloadAlert);
+                const raw = alertData.type || "info";
+                const variant =
+                    raw === "error" || raw === "danger"
+                        ? "danger"
+                        : ["success", "warning", "info"].includes(raw)
+                          ? raw
+                          : "info";
+                void window.DOMUtils?.showMessage?.(alertData.message, {
+                    variant: variant,
+                    placement: "toast",
+                    presentation: "toast",
+                });
+                sessionStorage.removeItem('captureDownloadAlert');
+            }
+        });
+</script>
+    {# djlint:on #}
+{% endblock javascript %}
diff --git a/gateway/sds_gateway/templates/users/components/asset_list_table.html b/gateway/sds_gateway/templates/users/components/asset_list_table.html
new file mode 100644
index 000000000..445870574
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/asset_list_table.html
@@ -0,0 +1,104 @@
+{% comment %}
+Single source for the dataset list table (full page + AJAX refresh).
+
+Context:
+- page_obj, sort_by, sort_order (required)
+- asset_type: "dataset" | "capture" | "file" (default: "asset")
+- table_headers: list of { label, col_class, aria_label?, text_align? }
+- table_class: extra class on <table> (e.g. capture-list-table)
+- no_assets_message: message to display if no assets are found
+- asset_row_template: template to render for each asset row
+- ajax_fragment: True for AJAX partial (omit outer #dataset-list-ajax-wrapper)
+{% endcomment %}
+{% load tz %}
+
+{# Wrapper for ListRefreshManager; omitted when injecting into existing wrapper #}
+{% if not ajax_fragment %}<div id="dataset-list-ajax-wrapper">{% endif %}
+    <!-- Results count display -->
+    {% if page_obj.object_list %}
+        <div class="d-flex justify-content-end mb-3">
+            <span id="results-count" aria-live="polite" class="text-muted">
+                {{ page_obj.paginator.count }} {{ asset_type|default:"asset" }}{{ page_obj.paginator.count|pluralize }} found
+            </span>
+        </div>
+    {% endif %}
+    <!-- AJAX‑Updatable Table & Pagination -->
+    <div id="dynamic-table-container" class="table-and-pagination">
+        <div class="table-container">
+            <div class="table-responsive">
+                {% if not page_obj.object_list %}
+                    <table class="table table-striped table-hover datasets-table-fixed {{ table_class|default:'' }}">
+                        <caption class="visually-hidden">Your {{ asset_type|default:"asset" }} list</caption>
+                        {% include "users/components/asset_list_table_thead.html" %}
+                    </table>
+                    <div class="alert alert-info" role="alert">
+                        <h4 class="alert-heading">No {{ asset_type|default:"asset" }}s yet</h4>
+                        <p>{{ no_assets_message }}</p>
+                    </div>
+                {% else %}
+                    <table class="table table-striped table-hover datasets-table-fixed {{ table_class|default:'' }}">
+                        <caption class="visually-hidden">Your {{ asset_type|default:"asset" }} list</caption>
+                        {% include "users/components/asset_list_table_thead.html" %}
+                        <tbody>
+                            {% for asset in page_obj %}
+                                {% if "dataset_list_table_row" in asset_row_template %}
+                                    {% include asset_row_template with dataset=asset dropdown_menu_items=asset.dropdown_menu_items %}
+                                {% else %}
+                                    {% include asset_row_template with capture=asset dropdown_menu_items=asset.dropdown_menu_items %}
+                                {% endif %}
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% if page_obj and page_obj.has_other_pages %}
+        <nav aria-label="{{ asset_type|default:"asset" }} pagination">
+            <ul class="pagination justify-content-center" id="pagination-controls">
+                {% if page_obj.has_previous %}
+                    <li class="page-item">
+                        <a class="page-link"
+                           href="?page={{ page_obj.previous_page_number }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}"
+                           aria-label="Previous">
+                            <span aria-hidden="true">«</span>
+                        </a>
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
+                            <span aria-hidden="true">«</span>
+                        </a>
+                    </li>
+                {% endif %}
+                {% for num in page_obj.paginator.page_range %}
+                    {% if page_obj.number == num %}
+                        <li class="page-item active" aria-current="page">
+                            <span class="page-link">{{ num }}</span>
+                        </li>
+                    {% elif num|add:0 > page_obj.number|add:'-3' and num|add:0 < page_obj.number|add:'3' %}
+                        <li class="page-item">
+                            <a class="page-link"
+                               href="?page={{ num }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}">{{ num }}</a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+                {% if page_obj.has_next %}
+                    <li class="page-item">
+                        <a class="page-link"
+                           href="?page={{ page_obj.next_page_number }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}"
+                           aria-label="Next">
+                            <span aria-hidden="true">»</span>
+                        </a>
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
+                            <span aria-hidden="true">»</span>
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+    {% endif %}
+    {% if not ajax_fragment %}</div>{% endif %}
diff --git a/gateway/sds_gateway/templates/users/components/asset_list_table_thead.html b/gateway/sds_gateway/templates/users/components/asset_list_table_thead.html
new file mode 100644
index 000000000..634977335
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/asset_list_table_thead.html
@@ -0,0 +1,12 @@
+{% comment %}
+table_headers: list of { label, col_class, aria_label?, text_align? }
+{% endcomment %}
+<thead>
+    <tr>
+        {% for header in table_headers %}
+            <th scope="col"
+                class="{{ header.col_class }}{% if header.text_align %} text-{{ header.text_align }}{% endif %}"
+                {% if header.aria_label %}aria-label="{{ header.aria_label }}"{% endif %}>{{ header.label }}</th>
+        {% endfor %}
+    </tr>
+</thead>
diff --git a/gateway/sds_gateway/templates/users/components/badge.html b/gateway/sds_gateway/templates/users/components/badge.html
deleted file mode 100644
index 35ba47896..000000000
--- a/gateway/sds_gateway/templates/users/components/badge.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% comment %}
-Badge Component
-Renders Bootstrap badge
-{% endcomment %}
-<span class="badge bg-{{ badge_type }} {% if size %}badge-{{ size }}{% endif %} {{ custom_class }}">{{ text }}</span>
diff --git a/gateway/sds_gateway/templates/users/components/button.html b/gateway/sds_gateway/templates/users/components/button.html
deleted file mode 100644
index 719d30baa..000000000
--- a/gateway/sds_gateway/templates/users/components/button.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% comment %}
-Button Component
-Renders Bootstrap button with optional icon and loading state
-{% endcomment %}
-<button type="{{ button_type }}"
-        class="btn btn-{{ variant }} {% if size %}btn-{{ size }}{% endif %} {{ custom_class }}"
-        {% if disabled %}disabled{% endif %}
-        {% for attr, value in attributes.items %}{{ attr }}="{{ value }}"{% endfor %}>
-    {% if loading %}
-        <span class="spinner-border spinner-border-sm me-2"
-              role="status"
-              aria-hidden="true"></span>
-    {% endif %}
-    {% if icon %}<i class="bi {{ icon }} me-1"></i>{% endif %}
-    {{ text }}
-</button>
diff --git a/gateway/sds_gateway/templates/users/components/capture_details_modal_body.html b/gateway/sds_gateway/templates/users/components/capture_details_modal_body.html
new file mode 100644
index 000000000..cbf19bf8b
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/capture_details_modal_body.html
@@ -0,0 +1,164 @@
+{% comment %}
+Capture details modal body — rendered server-side for ModalManager injection.
+{% endcomment %}
+<div class="mb-4">
+    <div class="d-flex align-items-center mb-3">
+        <h6 class="mb-0 fw-bold">
+            <i class="bi bi-info-circle me-2"></i>Basic Information
+        </h6>
+    </div>
+    <div class="mb-3">
+        <label for="capture-name-input" class="form-label fw-medium">
+            <strong>Name:</strong>
+        </label>
+        <div class="input-group">
+            <input type="text"
+                   class="form-control"
+                   id="capture-name-input"
+                   value="{{ capture.name|default:'' }}"
+                   placeholder="Enter capture name"
+                   maxlength="255"
+                   data-uuid="{{ capture_uuid }}">
+            <button class="btn btn-outline-secondary edit-name-btn"
+                    type="button"
+                    id="edit-name-btn"
+                    title="Edit capture name">
+                <i class="bi bi-pencil"></i>
+            </button>
+            <button class="btn btn-outline-danger d-none"
+                    type="button"
+                    id="cancel-name-btn"
+                    title="Cancel editing">
+                <i class="bi bi-x-lg"></i>
+            </button>
+            <button class="btn btn-outline-primary save-name-btn d-none"
+                    type="button"
+                    id="save-name-btn"
+                    title="Save changes">
+                <i class="bi bi-check-lg"></i>
+            </button>
+        </div>
+        <div class="form-text">Click the edit button to modify the capture name</div>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Capture Type:</span>
+                <span class="ms-2">{{ capture.capture_type_display|default:capture.capture_type|default:"N/A" }}</span>
+            </p>
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Origin:</span>
+                <span class="ms-2">{{ capture.origin|default:"N/A" }}</span>
+            </p>
+        </div>
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Owner:</span>
+                <span class="ms-2">{{ owner_display }}</span>
+            </p>
+        </div>
+    </div>
+    <div class="mb-2">
+        <span class="fw-medium text-muted">{{ channel_label }}:</span>
+        <span class="ms-2">{{ channel_value }}</span>
+    </div>
+</div>
+<div class="mb-4">
+    <div class="d-flex align-items-center mb-3">
+        <h6 class="mb-0 fw-bold">
+            <i class="bi bi-gear me-2"></i>Technical Details
+        </h6>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Scan Group:</span>
+                <span class="ms-2">{{ capture.scan_group|default:"N/A" }}</span>
+            </p>
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Dataset:</span>
+                <span class="ms-2">{{ dataset_display }}</span>
+            </p>
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Is Public:</span>
+                <span class="ms-2">{{ is_public_yesno }}</span>
+            </p>
+        </div>
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Top Level Directory:</span>
+                <span class="ms-2 text-break">{{ capture.top_level_dir|default:"N/A" }}</span>
+            </p>
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Center Frequency:</span>
+                <span class="ms-2">{{ center_frequency_display }}</span>
+            </p>
+        </div>
+    </div>
+</div>
+<div class="mb-4">
+    <div class="d-flex align-items-center mb-3">
+        <h6 class="mb-0 fw-bold">
+            <i class="bi bi-clock me-2"></i>Timestamps
+        </h6>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Created At:</span>
+                <br>
+                <small class="text-muted">{{ capture.formatted_created_at|default:capture.created_at }}</small>
+            </p>
+        </div>
+        <div class="col-md-6">
+            <p class="mb-2">
+                <span class="fw-medium text-muted">Updated At:</span>
+                <br>
+                <small class="text-muted">{{ capture.updated_at }}</small>
+            </p>
+        </div>
+    </div>
+</div>
+{% if accordion_channels %}
+    <div class="mt-4">
+        <h6>Channel Details</h6>
+        <div class="accordion" id="channelsAccordion">
+            {% for ch in accordion_channels %}
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-channel-{{ forloop.counter0 }}">
+                        <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-channel-{{ forloop.counter0 }}"
+                                aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
+                                aria-controls="collapse-channel-{{ forloop.counter0 }}">
+                            <strong>{{ ch.channel_name }}</strong>
+                            <small class="text-muted ms-2">(Click to expand metadata)</small>
+                        </button>
+                    </h2>
+                    <div id="collapse-channel-{{ forloop.counter0 }}"
+                         class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
+                         aria-labelledby="heading-channel-{{ forloop.counter0 }}"
+                         data-bs-parent="#channelsAccordion">
+                        <div class="accordion-body">
+                            <div class="text-break">
+                                {% if ch.metadata_rows %}
+                                    {% for row in ch.metadata_rows %}
+                                        <p class="mb-1">
+                                            <strong>{{ row.label }}:</strong> {{ row.value }}
+                                        </p>
+                                    {% endfor %}
+                                {% else %}
+                                    <em>No metadata available</em>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
+<div class="mt-4">
+    {% include "users/components/capture_files_summary_fragment.html" %}
+</div>
diff --git a/gateway/sds_gateway/templates/users/components/capture_files_summary_fragment.html b/gateway/sds_gateway/templates/users/components/capture_files_summary_fragment.html
new file mode 100644
index 000000000..02fb87ca4
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/capture_files_summary_fragment.html
@@ -0,0 +1,20 @@
+{% load humanize %}
+<div class="row">
+    <div class="col-12">
+        <h6 class="mb-3">
+            <i class="bi bi-files me-2"></i>Files Summary
+        </h6>
+    </div>
+    <div class="col-md-6">
+        <p class="mb-2">
+            <span class="fw-medium text-muted">Number of Files:</span>
+            <span class="ms-2">{{ files_count }}</span>
+        </p>
+    </div>
+    <div class="col-md-6">
+        <p class="mb-2">
+            <span class="fw-medium text-muted">Total Size:</span>
+            <span class="ms-2">{{ total_size|filesizeformat }}</span>
+        </p>
+    </div>
+</div>
diff --git a/gateway/sds_gateway/templates/users/components/capture_list_modals.html b/gateway/sds_gateway/templates/users/components/capture_list_modals.html
new file mode 100644
index 000000000..9252d19a5
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/capture_list_modals.html
@@ -0,0 +1,9 @@
+{% comment %}
+Per-capture modals: share + web download (full page + AJAX list refresh).
+{% endcomment %}
+{% for cap in captures %}
+    {% if cap.capture %}
+        {% include "users/partials/share_modal.html" with item=cap item_type="capture" %}
+        {% include "users/partials/web_download_modal.html" with item=cap item_type="capture" %}
+    {% endif %}
+{% endfor %}
diff --git a/gateway/sds_gateway/templates/users/components/capture_list_table_row.html b/gateway/sds_gateway/templates/users/components/capture_list_table_row.html
new file mode 100644
index 000000000..cbeb7b3d7
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/capture_list_table_row.html
@@ -0,0 +1,58 @@
+{% comment %}
+Single source for the capture list table (full page + AJAX refresh).
+
+Context:
+- capture: capture object
+- dropdown_menu_items: list of dropdown menu items
+{% endcomment %}
+{% load tz %}
+
+<tr class="capture-row" data-capture-uuid="{{ capture.uuid }}">
+    <td class="capture-col-select" headers="select-header">
+        {% if capture.is_owner %}
+            <input type="checkbox"
+                   class="capture-select-checkbox form-check-input"
+                   data-capture-uuid="{{ capture.uuid }}"
+                   aria-label="Select capture {{ capture.name|default:capture.uuid }}" />
+        {% else %}
+            <span class="text-muted" aria-hidden="true">—</span>
+        {% endif %}
+    </td>
+    <td class="capture-col-name" headers="name-header">
+        <a href="#"
+           class="capture-link"
+           data-item-type="capture"
+           data-item-uuid="{{ capture.uuid }}"
+           data-uuid="{{ capture.uuid }}"
+           aria-label="View details for capture {{ capture.name|default:capture.uuid }}"
+           title="View capture details: {{ capture.name|default:capture.uuid }}">
+            {{ capture.name|default:"Unnamed Capture" }}
+        </a>
+        {% if capture.is_shared_with_me %}
+            <span class="ms-2 align-middle"
+                  data-bs-toggle="tooltip"
+                  title="Shared with you">
+                <i class="bi bi-people-fill text-success"></i>
+            </span>
+        {% endif %}
+    </td>
+    <td class="capture-col-directory text-truncate"
+        headers="top-level-dir-header"
+        title="{{ capture.top_level_dir|default:'' }}">{{ capture.top_level_dir|default:"-" }}</td>
+    <td class="capture-col-type" headers="type-header">{{ capture.capture_type_display }}</td>
+    <td class="capture-col-created text-nowrap" headers="created-header">
+        {% if capture.capture.created_at %}
+            {% localtime on %}
+            <div class="d-flex align-items-center gap-2">
+                <span class="bg-transparent pe-2">{{ capture.capture.created_at|date:"Y-m-d" }}</span>
+                <span class="text-muted bg-transparent">{{ capture.capture.created_at|date:"H:i:s T" }}</span>
+            </div>
+        {% endlocaltime %}
+    {% else %}
+        -
+    {% endif %}
+</td>
+<td class="capture-col-actions text-center" headers="actions-header">
+    {% include "users/components/dropdown_menu.html" with items=dropdown_menu_items %}
+</td>
+</tr>
diff --git a/gateway/sds_gateway/templates/users/components/dataset_details_modal_body.html b/gateway/sds_gateway/templates/users/components/dataset_details_modal_body.html
new file mode 100644
index 000000000..8c7537f2c
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/dataset_details_modal_body.html
@@ -0,0 +1,147 @@
+{% load tz %}
+<div class="container-fluid">
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header bg-light">
+                    <h6 class="mb-0">
+                        <i class="bi bi-file-earmark-text me-2"></i>Dataset Information
+                    </h6>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label class="fw-bold text-muted mb-0">Dataset Name:</label>
+                                <div class="d-flex align-items-center gap-2">
+                                    <p class="mb-0 dataset-details-name">{{ dataset.name }} (v{{ dataset.version }})</p>
+                                    <button type="button"
+                                            class="copy-uuid-btn btn btn-link p-0 border-0"
+                                            data-bs-toggle="tooltip"
+                                            data-bs-placement="top"
+                                            title="Copy Dataset UUID"
+                                            data-uuid="{{ dataset_uuid }}"
+                                            aria-label="Copy dataset UUID">
+                                        <i class="bi bi-clipboard"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="fw-bold text-muted">Author(s):</label>
+                                <p class="mb-0 dataset-details-author">
+                                    {% if dataset.authors %}
+                                        {% for author in dataset.authors %}
+                                            {% firstof author.name author %}
+                                            {% if not forloop.last %},{% endif %}
+                                        {% endfor %}
+                                    {% else %}
+                                        <span class="text-muted">No authors specified</span>
+                                    {% endif %}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label class="fw-bold text-muted">Status:</label>
+                                <p class="mb-0 dataset-details-status">
+                                    {% if dataset.status == "final" %}
+                                        <span class="badge bg-success">Final</span>
+                                    {% elif dataset.status == "draft" %}
+                                        <span class="badge bg-secondary">Draft</span>
+                                    {% else %}
+                                        <span class="badge bg-secondary">Unknown</span>
+                                    {% endif %}
+                                </p>
+                            </div>
+                            <div class="mb-3">
+                                <label class="fw-bold text-muted">Created:</label>
+                                <p class="mb-0 dataset-details-created">
+                                    {% if dataset.created_at %}
+                                        {{ dataset.created_at }}
+                                    {% else %}
+                                        —
+                                    {% endif %}
+                                </p>
+                            </div>
+                            <div class="mb-3">
+                                <label class="fw-bold text-muted">Last Updated:</label>
+                                <p class="mb-0 dataset-details-updated">
+                                    {% if dataset_updated_at %}
+                                        {% localtime on %}
+                                            {{ dataset_updated_at|date:"M j, Y, g:i A" }}
+                                        {% endlocaltime %}
+                                    {% else %}
+                                        —
+                                    {% endif %}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="fw-bold text-muted">Description:</label>
+                        <p class="mb-0 dataset-details-description">{{ dataset.description|default:"No description provided" }}</p>
+                    </div>
+                    <div class="mb-3">
+                        <label class="fw-bold text-muted">Keywords:</label>
+                        <div class="dataset-details-keywords">
+                            {% if dataset.keywords %}
+                                {% for keyword in dataset.keywords %}
+                                    <span class="badge bg-secondary me-2 mb-2">{{ keyword }}</span>
+                                {% endfor %}
+                            {% else %}
+                                <span class="text-muted">No keywords</span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header bg-light">
+                    <h6 class="mb-0">
+                        <i class="bi bi-files me-2"></i>File Summary
+                    </h6>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card bg-light">
+                                <div class="card-body text-center">
+                                    <h6 class="card-title mb-1">Total Files</h6>
+                                    <p class="mb-0 fw-bold text-primary" id="total-files-count">{{ statistics.total_files }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card bg-light">
+                                <div class="card-body text-center">
+                                    <h6 class="card-title mb-1">Capture Files</h6>
+                                    <p class="mb-0 fw-bold text-success" id="captures-count">{{ statistics.captures }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card bg-light">
+                                <div class="card-body text-center">
+                                    <h6 class="card-title mb-1">Artifact Files</h6>
+                                    <p class="mb-0 fw-bold text-info" id="artifacts-count">{{ statistics.artifacts }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card bg-light">
+                                <div class="card-body text-center">
+                                    <h6 class="card-title mb-1">Total Size</h6>
+                                    <p class="mb-0 fw-bold text-warning" id="total-size">{{ statistics.total_size|filesizeformat }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/gateway/sds_gateway/templates/users/components/dataset_list_modals.html b/gateway/sds_gateway/templates/users/components/dataset_list_modals.html
index d9475ea8f..c9223469e 100644
--- a/gateway/sds_gateway/templates/users/components/dataset_list_modals.html
+++ b/gateway/sds_gateway/templates/users/components/dataset_list_modals.html
@@ -4,10 +4,11 @@
 Context: page_obj (paginated dataset list)
 {% endcomment %}
 {% for dataset in page_obj %}
-    {% include "users/partials/dataset_details_modal.html" with dataset=dataset %}
     {% include "users/partials/web_download_modal.html" with item=dataset item_type="dataset" %}
-    {% include "users/partials/share_modal.html" with item=dataset item_type="dataset" %}
     {% include "users/partials/sdk_download_modal.html" with dataset=dataset %}
+    {% if dataset.is_owner or dataset.permission_level == 'co-owner' or dataset.permission_level == 'contributor' %}
+        {% include "users/partials/share_modal.html" with item=dataset item_type="dataset" %}
+    {% endif %}
     {% if dataset.is_owner or dataset.permission_level == 'co-owner' %}
         {% include "users/partials/dataset_version_control.html" with dataset=dataset %}
         {% if not dataset.dataset.status == 'final' or not dataset.is_public %}
diff --git a/gateway/sds_gateway/templates/users/components/dataset_list_table.html b/gateway/sds_gateway/templates/users/components/dataset_list_table.html
deleted file mode 100644
index 2257a7244..000000000
--- a/gateway/sds_gateway/templates/users/components/dataset_list_table.html
+++ /dev/null
@@ -1,257 +0,0 @@
-{% comment %}
-Single source for the dataset list table (full page + AJAX refresh).
-
-Context:
-- page_obj, sort_by, sort_order (required)
-- ajax_fragment: True for AJAX partial (omit outer #dataset-list-ajax-wrapper)
-{% endcomment %}
-{% load tz %}
-
-{# Wrapper for ListRefreshManager; omitted when injecting into existing wrapper #}
-{% if not ajax_fragment %}<div id="dataset-list-ajax-wrapper">{% endif %}
-    <!-- Results count display -->
-    {% if page_obj.object_list %}
-        <div class="d-flex justify-content-end mb-3">
-            <span id="results-count" aria-live="polite" class="text-muted">
-                {{ page_obj.paginator.count }} dataset{{ page_obj.paginator.count|pluralize }} found
-            </span>
-        </div>
-    {% endif %}
-    <!-- AJAX‑Updatable Table & Pagination -->
-    <div id="dynamic-table-container" class="table-and-pagination">
-        <div class="table-container">
-            <div class="table-responsive">
-                {% if not page_obj %}
-                    <table class="table table-striped table-hover datasets-table-fixed">
-                        <caption class="visually-hidden">Your datasets list</caption>
-                        <thead>
-                            <tr>
-                                <th scope="col" class="sortable w-35" data-sort="name">
-                                    Dataset Name <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="sortable w-35" data-sort="authors">
-                                    Author <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="sortable w-20" data-sort="created_at">
-                                    Created At <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="w-5">Actions</th>
-                            </tr>
-                        </thead>
-                    </table>
-                    <div class="alert alert-info" role="alert">
-                        <h4 class="alert-heading">No datasets yet</h4>
-                        <p>
-                            It looks like you don't have any datasets yet. To get started, <a href="{% url 'users:group_captures' %}" class="alert-link">create a new dataset</a> from your captures and files.
-                        </p>
-                    </div>
-                {% else %}
-                    <table class="table table-striped table-hover datasets-table-fixed">
-                        <caption class="visually-hidden">Your datasets list</caption>
-                        <thead>
-                            <tr>
-                                <th scope="col" class="sortable w-35" data-sort="name">
-                                    Dataset Name <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="sortable w-35" data-sort="authors">
-                                    Author <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="sortable w-20" data-sort="created_at">
-                                    Created At <i class="bi bi-caret-down-fill sort-icon"></i>
-                                </th>
-                                <th scope="col" class="w-5">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for dataset in page_obj %}
-                                <tr class="clickable-row" data-dataset-uuid="{{ dataset.uuid }}">
-                                    <td class="text-nowrap">
-                                        {% if dataset.is_owner %}
-                                            <a href="#"
-                                               class="dataset-name-link"
-                                               data-bs-toggle="modal"
-                                               data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
-                                               data-dataset-uuid="{{ dataset.uuid }}"
-                                               aria-label="View details for {{ dataset.name }}">{{ dataset.name }}</a>
-                                        {% else %}
-                                            <span class="text-muted dataset-name-link"
-                                                  data-bs-toggle="modal"
-                                                  data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
-                                                  data-dataset-uuid="{{ dataset.uuid }}">{{ dataset.name }}</span>
-                                        {% endif %}
-                                        {% if dataset.status == 'draft' %}
-                                            <span class="ms-2 badge bg-secondary">{{ dataset.status_display }}</span>
-                                        {% endif %}
-                                        {% if dataset.is_public %}<i class="bi bi-globe me-1 text-primary" title="Public"></i>{% endif %}
-                                        {% if dataset.is_shared_with_me %}
-                                            <span class="ms-2 align-middle"
-                                                  data-bs-toggle="tooltip"
-                                                  title="Shared with you">
-                                                <i class="bi bi-people-fill text-success"></i>
-                                            </span>
-                                        {% endif %}
-                                    </td>
-                                    <td class="text-break">
-                                        {% if dataset.authors %}
-                                            {% for author in dataset.authors %}
-                                                {% if forloop.counter <= 2 %}
-                                                    {% if author.name %}
-                                                        {% if author.orcid_id %}
-                                                            <a href="https://orcid.org/{{ author.orcid_id }}"
-                                                               target="_blank"
-                                                               rel="noopener noreferrer"
-                                                               class="text-decoration-none"
-                                                               title="View {{ author.name }}'s ORCID profile">
-                                                                {{ author.name }}
-                                                                <i class="bi bi-box-arrow-up-right text-muted sort-icon"></i>
-                                                            </a>
-                                                        {% else %}
-                                                            {{ author.name }}
-                                                        {% endif %}
-                                                        {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
-                                                    {% else %}
-                                                        {{ author }}
-                                                        {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
-                                                    {% endif %}
-                                                {% endif %}
-                                            {% endfor %}
-                                            {% if dataset.authors|length > 2 %}<span class="text-muted">...</span>{% endif %}
-                                        {% else %}
-                                            -
-                                        {% endif %}
-                                    </td>
-                                    <td class="text-nowrap">
-                                        {% if dataset.dataset.created_at %}
-                                            {% localtime on %}
-                                            <div class="d-flex align-items-center gap-2">
-                                                <span class="bg-transparent pe-2">{{ dataset.dataset.created_at|date:"Y-m-d" }}</span>
-                                                <span class="text-muted bg-transparent">{{ dataset.dataset.created_at|date:"H:i:s T" }}</span>
-                                            </div>
-                                        {% endlocaltime %}
-                                    {% else %}
-                                        -
-                                    {% endif %}
-                                </td>
-                                <td class="text-center">
-                                    <div class="dropdown">
-                                        <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown"
-                                                type="button"
-                                                data-bs-toggle="dropdown"
-                                                data-bs-boundary="viewport"
-                                                aria-expanded="false"
-                                                aria-label="Actions for {{ dataset.name }}">
-                                            <i class="bi bi-three-dots-vertical"></i>
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            {% if dataset.can_edit %}
-                                                {% if not dataset.dataset.status == 'final' and not dataset.is_public %}
-                                                    <li>
-                                                        <button class="dropdown-item"
-                                                                type="button"
-                                                                onclick="window.location.href='{% url 'users:group_captures' %}?dataset_uuid={{ dataset.uuid }}'">
-                                                            <i class="bi bi-pencil me-2"></i>Edit
-                                                        </button>
-                                                    </li>
-                                                {% endif %}
-                                                <li>
-                                                    <button class="dropdown-item"
-                                                            type="button"
-                                                            data-bs-toggle="modal"
-                                                            data-bs-target="#shareModal-{{ dataset.uuid }}">
-                                                        <i class="bi bi-share me-2"></i>Share
-                                                    </button>
-                                                </li>
-                                            {% endif %}
-                                            {% if dataset.is_owner or dataset.permission_level == 'co-owner' %}
-                                                {% if not dataset.dataset.status == 'final' or not dataset.is_public %}
-                                                    <li>
-                                                        <button class="dropdown-item publish-dataset-btn"
-                                                                type="button"
-                                                                data-dataset-uuid="{{ dataset.uuid }}">
-                                                            <i class="bi bi-journal-arrow-up me-2"></i>Publish
-                                                        </button>
-                                                    </li>
-                                                {% endif %}
-                                                <li>
-                                                    <button class="dropdown-item"
-                                                            type="button"
-                                                            onclick="window.DOMUtils.openModal('versioningModal-{{ dataset.uuid }}')">
-                                                        <i class="bi bi-folder-symlink me-2"></i>Create New Version
-                                                    </button>
-                                                </li>
-                                            {% endif %}
-                                            <li>
-                                                <button class="dropdown-item web-download-btn"
-                                                        type="button"
-                                                        data-item-uuid="{{ dataset.uuid }}"
-                                                        data-item-type="dataset">
-                                                    <i class="bi bi-download me-2"></i>Web Download
-                                                </button>
-                                            </li>
-                                            <li>
-                                                <button class="dropdown-item sdk-download-btn"
-                                                        type="button"
-                                                        data-dataset-uuid="{{ dataset.uuid }}">
-                                                    <i class="bi bi-code-slash me-2"></i>SDK Download Instructions
-                                                </button>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            {% endif %}
-        </div>
-    </div>
-</div>
-{% if page_obj and page_obj.has_other_pages %}
-    <nav aria-label="Dataset pagination">
-        <ul class="pagination justify-content-center" id="pagination-controls">
-            {% if page_obj.has_previous %}
-                <li class="page-item">
-                    <a class="page-link"
-                       href="?page={{ page_obj.previous_page_number }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}"
-                       aria-label="Previous">
-                        <span aria-hidden="true">«</span>
-                    </a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
-                        <span aria-hidden="true">«</span>
-                    </a>
-                </li>
-            {% endif %}
-            {% for num in page_obj.paginator.page_range %}
-                {% if page_obj.number == num %}
-                    <li class="page-item active" aria-current="page">
-                        <span class="page-link">{{ num }}</span>
-                    </li>
-                {% elif num|add:0 > page_obj.number|add:'-3' and num|add:0 < page_obj.number|add:'3' %}
-                    <li class="page-item">
-                        <a class="page-link"
-                           href="?page={{ num }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}">{{ num }}</a>
-                    </li>
-                {% endif %}
-            {% endfor %}
-            {% if page_obj.has_next %}
-                <li class="page-item">
-                    <a class="page-link"
-                       href="?page={{ page_obj.next_page_number }}&amp;sort_by={{ sort_by }}&amp;sort_order={{ sort_order }}"
-                       aria-label="Next">
-                        <span aria-hidden="true">»</span>
-                    </a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
-                        <span aria-hidden="true">»</span>
-                    </a>
-                </li>
-            {% endif %}
-        </ul>
-    </nav>
-{% endif %}
-{% if not ajax_fragment %}</div>{% endif %}
diff --git a/gateway/sds_gateway/templates/users/components/dataset_list_table_row.html b/gateway/sds_gateway/templates/users/components/dataset_list_table_row.html
new file mode 100644
index 000000000..33cb6aae0
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/components/dataset_list_table_row.html
@@ -0,0 +1,82 @@
+{% comment %}
+Single source for the dataset list table (full page + AJAX refresh).
+
+Context:
+- dataset: dataset object
+- dropdown_menu_items: list of dropdown menu items
+{% endcomment %}
+{% load tz %}
+
+<tr class="clickable-row dataset-details-open"
+    data-dataset-uuid="{{ dataset.uuid }}"
+    data-item-uuid="{{ dataset.uuid }}"
+    data-item-type="dataset"
+    role="button"
+    tabindex="0">
+    <td class="text-nowrap">
+        {% if dataset.is_owner %}
+            <a href="#"
+               class="dataset-name-link"
+               data-dataset-uuid="{{ dataset.uuid }}"
+               data-item-uuid="{{ dataset.uuid }}"
+               aria-label="View details for {{ dataset.name }}">{{ dataset.name }} (v{{ dataset.version }})</a>
+        {% else %}
+            <span class="text-muted dataset-name-link"
+                  data-dataset-uuid="{{ dataset.uuid }}"
+                  data-item-uuid="{{ dataset.uuid }}">{{ dataset.name }} (v{{ dataset.version }})</span>
+        {% endif %}
+        {% if dataset.status == 'draft' %}
+            <span class="ms-2 badge bg-secondary">{{ dataset.status_display }}</span>
+        {% endif %}
+        {% if dataset.is_public %}<i class="bi bi-globe me-1 text-primary" title="Public"></i>{% endif %}
+        {% if dataset.is_shared_with_me %}
+            <span class="ms-2 align-middle"
+                  data-bs-toggle="tooltip"
+                  title="Shared with you">
+                <i class="bi bi-people-fill text-success"></i>
+            </span>
+        {% endif %}
+    </td>
+    <td class="text-break">
+        {% if dataset.authors %}
+            {% for author in dataset.authors %}
+                {% if forloop.counter <= 2 %}
+                    {% if author.name %}
+                        {% if author.orcid_id %}
+                            <a href="https://orcid.org/{{ author.orcid_id }}"
+                               target="_blank"
+                               rel="noopener noreferrer"
+                               class="text-decoration-none"
+                               title="View {{ author.name }}'s ORCID profile">
+                                {{ author.name }}
+                                <i class="bi bi-box-arrow-up-right text-muted sort-icon"></i>
+                            </a>
+                        {% else %}
+                            {{ author.name }}
+                        {% endif %}
+                        {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
+                    {% else %}
+                        {{ author }}
+                        {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+            {% if dataset.authors|length > 2 %}<span class="text-muted">...</span>{% endif %}
+        {% else %}
+            -
+        {% endif %}
+    </td>
+    <td class="text-nowrap">
+        {% if dataset.dataset.created_at %}
+            {% localtime on %}
+            <div class="d-flex align-items-center gap-2">
+                <span class="bg-transparent pe-2">{{ dataset.dataset.created_at|date:"Y-m-d" }}</span>
+                <span class="text-muted bg-transparent">{{ dataset.dataset.created_at|date:"H:i:s T" }}</span>
+            </div>
+        {% endlocaltime %}
+    {% else %}
+        -
+    {% endif %}
+</td>
+<td class="text-center">{% include "users/components/dropdown_menu.html" with items=dropdown_menu_items %}</td>
+</tr>
diff --git a/gateway/sds_gateway/templates/users/components/dropdown_menu.html b/gateway/sds_gateway/templates/users/components/dropdown_menu.html
index 569b1bdb4..35671035c 100644
--- a/gateway/sds_gateway/templates/users/components/dropdown_menu.html
+++ b/gateway/sds_gateway/templates/users/components/dropdown_menu.html
@@ -29,7 +29,6 @@
     <button class="btn btn-icon-dropdown dropdown-toggle {{ button_class|default:'btn-sm btn-light' }}"
             type="button"
             data-bs-toggle="dropdown"
-            data-bs-popper="static"
             aria-expanded="false"
             aria-label="{{ button_label|default:'Actions' }}">
         <i class="bi bi-{{ button_icon|default:'three-dots-vertical' }}"></i>
@@ -47,7 +46,7 @@
                     </a>
                 {% else %}
                     <button type="button"
-                            class="dropdown-item"
+                            class="dropdown-item{% if item.extra_class %} {{ item.extra_class }}{% endif %}"
                             {% if item.modal_toggle %}data-bs-toggle="modal"{% endif %}
                             {% if item.modal_target %}data-bs-target="{{ item.modal_target }}"{% endif %}
                             {% for key, value in item.data_attrs.items %}data-{{ key }}="{{ value }}"{% endfor %}
diff --git a/gateway/sds_gateway/templates/users/components/loading_spinner.html b/gateway/sds_gateway/templates/users/components/loading_spinner.html
deleted file mode 100644
index aaabfbf6e..000000000
--- a/gateway/sds_gateway/templates/users/components/loading_spinner.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% comment %}
-Loading Spinner Component
-Renders Bootstrap spinner with text
-{% endcomment %}
-<span class="spinner-border {% if size == 'sm' %}spinner-border-sm{% endif %} me-2 {% if color %}text-{{ color }}{% endif %}"
-      role="status"
-      aria-hidden="true"></span>{{ text }}
diff --git a/gateway/sds_gateway/templates/users/components/error.html b/gateway/sds_gateway/templates/users/components/message.html
similarity index 52%
rename from gateway/sds_gateway/templates/users/components/error.html
rename to gateway/sds_gateway/templates/users/components/message.html
index 3d5222b51..2db7b3544 100644
--- a/gateway/sds_gateway/templates/users/components/error.html
+++ b/gateway/sds_gateway/templates/users/components/message.html
@@ -1,18 +1,27 @@
 {% comment %}
-Error Component - Generalized
-Renders errors in various formats: inline, table, alert, or list
-Context:
-  - message: Simple error message string
-  - error_list: List of tuples [(field, message), ...]
-  - format: 'inline' | 'table' | 'alert' | 'list' (default: 'inline')
-  - icon: Icon name (default: 'exclamation-triangle')
-  - alert_type: Alert variant for alert format (default: 'danger')
-  - colspan: Number of columns for table format (default: 5)
-  - show_field_names: Show field names in list/alert (default: False)
-  - dismissible: Show close button for alert format (default: True)
+  Context:
+  - message, type (success|error|warning|info)
+  - presentation: toast | inline | alert | list | table | visualization_panel
+  - optional: detail_line (visualization_panel second line)
+  - optional: error_list, colspan, icon, alert_type, dismissible, show_field_names
 {% endcomment %}
-{% if format == 'table' %}
-    {# Table row error format #}
+{% if presentation == "toast" %}
+    {% with toast_type=type|default:""|lower %}
+        <div class="toast align-items-center {% if 'success' in toast_type %}bg-success text-white {% elif 'error' in toast_type or 'danger' in toast_type %}bg-danger text-white {% elif 'warning' in toast_type %}bg-warning text-dark {% else %}bg-info text-white{% endif %}"
+             role="alert"
+             aria-live="assertive"
+             aria-atomic="true"
+             data-bs-delay="10000">
+            <div class="d-flex">
+                <div class="toast-body">{{ message }}</div>
+                <button type="button"
+                        class="btn-close {% if 'warning' not in toast_type %}btn-close-white{% endif %} me-2 m-auto"
+                        data-bs-dismiss="toast"
+                        aria-label="Close"></button>
+            </div>
+        </div>
+    {% endwith %}
+{% elif presentation == "table" %}
     <tr>
         <td colspan="{{ colspan|default:5 }}" class="text-center text-danger">
             {% if message %}
@@ -22,9 +31,8 @@
             {% endif %}
         </td>
     </tr>
-{% elif format == 'alert' %}
-    {# Alert box error format #}
-    <div class="alert alert-{{ alert_type|default:'danger' }}{% if dismissible|default:True %} alert-dismissible fade show{% endif %}"
+{% elif presentation == "alert" %}
+    <div class="alert alert-{{ alert_type|default:'danger' }}{% if dismissible|default:True %} alert-dismissible fade show{% endif %} js-ephemeral-message"
          role="alert">
         <i class="bi bi-{{ icon|default:'exclamation-triangle' }} me-2"></i>
         {% if message %}
@@ -47,8 +55,16 @@
                     aria-label="Close"></button>
         {% endif %}
     </div>
-{% elif format == 'list' %}
-    {# List error format #}
+{% elif presentation == "visualization_panel" %}
+    <div class="visualization-panel-message">
+        <p class="error-message-text">{{ message }}</p>
+        {% if detail_line %}
+            <p class="error-detail-line text-muted small mt-2">{{ detail_line }}</p>
+        {% else %}
+            <p class="error-detail-line text-muted small mt-2 d-none"></p>
+        {% endif %}
+    </div>
+{% elif presentation == "list" %}
     <ul class="mb-0 list-unstyled">
         {% if error_list %}
             {% for field, msg in error_list %}
@@ -62,6 +78,5 @@
         {% endif %}
     </ul>
 {% else %}
-    {# Inline error format (default) #}
     <span class="text-danger">{{ message|default:"Error loading data" }}</span>
 {% endif %}
diff --git a/gateway/sds_gateway/templates/users/components/modal_file_tree.html b/gateway/sds_gateway/templates/users/components/modal_file_tree.html
deleted file mode 100644
index 311fb4287..000000000
--- a/gateway/sds_gateway/templates/users/components/modal_file_tree.html
+++ /dev/null
@@ -1,38 +0,0 @@
-{% comment %}
-Modal File Tree Component
-Renders file tree for dataset details modal
-
-Context:
-{
-    "rows": [
-        {
-            "indent_level": 0,
-            "icon": "bi-file-earmark",
-            "icon_color": "text-primary",
-            "name": "file.txt",
-            "type": "File",
-            "size": "1.2 MB",
-            "created_at": "Jan 1, 2024",
-            "has_chevron": false
-        }
-    ]
-}
-{% endcomment %}
-{% for row in rows %}
-    <tr>
-        <td>
-            {% if row.has_chevron %}<i class="bi bi-chevron-down text-muted"></i>{% endif %}
-        </td>
-        <td>
-            {% for i in row.indent_range %}&nbsp;&nbsp;&nbsp;&nbsp;{% endfor %}
-            <i class="bi {{ row.icon }} {{ row.icon_color }}"></i> {{ row.name }}
-        </td>
-        <td>{{ row.type }}</td>
-        <td>{{ row.size }}</td>
-        <td>{{ row.created_at }}</td>
-    </tr>
-{% empty %}
-    <tr>
-        <td colspan="5" class="text-center text-muted py-4">No files found</td>
-    </tr>
-{% endfor %}
diff --git a/gateway/sds_gateway/templates/users/components/modal_permissions.html b/gateway/sds_gateway/templates/users/components/modal_permissions.html
deleted file mode 100644
index ae97c7cd8..000000000
--- a/gateway/sds_gateway/templates/users/components/modal_permissions.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% comment %}
-Modal Permissions Component
-Renders permissions list for dataset details modal
-{% endcomment %}
-{% for permission in permissions %}
-    <div class="d-flex justify-content-between align-items-center mb-2">
-        <span>
-            {% if permission.user_name %}
-                {{ permission.user_name }} ({{ permission.user_email }})
-            {% else %}
-                {{ permission.user_email }}
-            {% endif %}
-        </span>
-        <span class="badge {{ permission.badge_class }}">{{ permission.display_name }}</span>
-    </div>
-{% empty %}
-    <span class="text-muted">No shared permissions</span>
-{% endfor %}
diff --git a/gateway/sds_gateway/templates/users/components/modal_technical_details.html b/gateway/sds_gateway/templates/users/components/modal_technical_details.html
deleted file mode 100644
index 6df03d6c1..000000000
--- a/gateway/sds_gateway/templates/users/components/modal_technical_details.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% comment %}
-Modal Technical Details Component
-Renders technical details for capture details modal
-{% endcomment %}
-{% if details %}
-    <ul class="list-unstyled mb-0">
-        {% for detail in details %}<li>{{ detail }}</li>{% endfor %}
-    </ul>
-{% else %}
-    <span class="text-muted">No technical details available</span>
-{% endif %}
diff --git a/gateway/sds_gateway/templates/users/components/share_group_table_row.html b/gateway/sds_gateway/templates/users/components/share_group_table_row.html
index e7fa6b29b..10f1a27e8 100644
--- a/gateway/sds_gateway/templates/users/components/share_group_table_row.html
+++ b/gateway/sds_gateway/templates/users/components/share_group_table_row.html
@@ -29,7 +29,6 @@
             <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown"
                     type="button"
                     data-bs-toggle="dropdown"
-                    data-bs-popper="static"
                     aria-expanded="false"
                     aria-label="Actions for {{ group.name }}">
                 <i class="bi bi-three-dots-vertical"></i>
diff --git a/gateway/sds_gateway/templates/users/components/table_rows.html b/gateway/sds_gateway/templates/users/components/table_rows.html
index 2d6fdc9ac..06087fb80 100644
--- a/gateway/sds_gateway/templates/users/components/table_rows.html
+++ b/gateway/sds_gateway/templates/users/components/table_rows.html
@@ -10,6 +10,7 @@
             "cells": [{"value": "cell1"}, {"value": "cell2"}],
             "css_class": "optional-row-class",
             "data_attrs": {"key": "value"},  // Optional data-* attributes
+            "actions_td_class": "text-end",  // Optional class on actions <td>
             "actions": [  // Optional action buttons
                 {
                     "label": "Remove",
@@ -41,7 +42,7 @@
                 </td>
             {% endfor %}
             {% if row.actions %}
-                <td>
+                <td {% if row.actions_td_class %}class="{{ row.actions_td_class }}"{% endif %}>
                     {% for action in row.actions %}
                         <button type="button"
                                 class="btn btn-sm {{ action.css_class|default:'btn-outline-secondary' }} {{ action.extra_class|default:'' }}"
diff --git a/gateway/sds_gateway/templates/users/components/toast.html b/gateway/sds_gateway/templates/users/components/toast.html
deleted file mode 100644
index 667f57726..000000000
--- a/gateway/sds_gateway/templates/users/components/toast.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% comment %}
-Toast Component - Renders a single Bootstrap toast notification
-Matches the format used by showAlert for unified UI
-
-Context:
-- message: Toast message text
-- type: Toast type (success, error/danger, warning, info) - maps to Bootstrap classes
-{% endcomment %}
-{% comment %} Map type to Bootstrap classes matching showAlert logic {% endcomment %}
-{% with toast_type=type|default:""|lower %}
-    <div class=" toast align-items-center {% if 'success' in toast_type %} bg-success text-white {% elif 'error' in toast_type or 'danger' in toast_type %} bg-danger text-white {% elif 'warning' in toast_type %} bg-warning text-dark {% else %} bg-info text-white {% endif %} "
-         role="alert"
-         aria-live="assertive"
-         aria-atomic="true"
-         data-bs-delay="10000">
-        <div class="d-flex">
-            <div class="toast-body">{{ message }}</div>
-            <button type="button"
-                    class="btn-close {% if 'warning' not in toast_type %}btn-close-white{% endif %} me-2 m-auto"
-                    data-bs-dismiss="toast"
-                    aria-label="Close"></button>
-        </div>
-    </div>
-{% endwith %}
diff --git a/gateway/sds_gateway/templates/users/dataset_list.html b/gateway/sds_gateway/templates/users/dataset_list.html
index 4ead29d05..3a729ec89 100644
--- a/gateway/sds_gateway/templates/users/dataset_list.html
+++ b/gateway/sds_gateway/templates/users/dataset_list.html
@@ -26,56 +26,43 @@ <h1 class="page-title">Datasets</h1>
                     </a>
                 </div>
                 <hr />
-                {% include "users/components/dataset_list_table.html" %}
+                {% include "users/components/asset_list_table.html" with page_obj=page_obj asset_type=asset_type table_headers=table_headers no_assets_message=no_assets_message asset_row_template=asset_row_template ajax_fragment=ajax_fragment %}
             </div>
         </div>
     </div>
-    <!-- Modals to reveal on click; container is replaced on AJAX list refresh -->
-    {% include "users/components/dataset_list_modals.html" with page_obj=page_obj %}
+    <!-- Shared details shell (not replaced on list AJAX); per-dataset modals below -->
+    {% include "users/partials/asset_details_modal.html" %}
+    <div id="dataset-modals-container">
+        {% include "users/components/dataset_list_modals.html" with page_obj=page_obj %}
+    </div>
 {% endblock content %}
 {% block javascript %}
     {# djlint:off #}
     {{ block.super }}
-    <!-- Search components -->
     <script src="{% static 'js/search/AssetSearchHandler.js' %}"></script>
-    <script src="{% static 'js/search/DatasetSearchHandler.js' %}"></script>
     <!-- Dataset components -->
+    <script src="{% static 'js/dataset/AuthorsManager.js' %}"></script>
+    <script src="{% static 'js/dataset/DatasetAuthorsUI.js' %}"></script>
+    <script src="{% static 'js/dataset/DatasetPendingChanges.js' %}"></script>
     <script src="{% static 'js/dataset/DatasetCreationHandler.js' %}"></script>
     <script src="{% static 'js/dataset/DatasetEditingHandler.js' %}"></script>
     <script src="{% static 'js/dataset/DatasetModeManager.js' %}"></script>
     <!-- Action components -->
+    <script src="{% static 'js/share/UserSearchDropdown.js' %}"></script>
     <script src="{% static 'js/actions/ShareActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/download/captureDownloadSlider.js' %}"></script>
     <script src="{% static 'js/actions/DownloadActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/DownloadInstructionsManager.js' %}"></script>
     <script src="{% static 'js/actions/DetailsActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/details/AssetDetailsModalLoader.js' %}"></script>
     <script src="{% static 'js/actions/PublishActionManager.js' %}"></script>
     <script src="{% static 'js/actions/VersioningActionManager.js' %}"></script>
+    <script src="{% static 'js/constants/detailsModalConfig.js' %}"></script>
+    <script src="{% static 'js/core/PageController.js' %}"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            document.querySelectorAll('.btn-icon-dropdown').forEach(function(toggle) {
-                const dropdown = new bootstrap.Dropdown(toggle, {
-                    container: 'body',
-                    boundary: 'viewport',
-                    popperConfig: {
-                        modifiers: [{
-                            name: 'preventOverflow',
-                            options: {
-                                boundary: 'viewport'
-                            }
-                        }]
-                    }
-                });
-
-                // Manually move dropdown to body when shown
-                toggle.addEventListener('show.bs.dropdown', function() {
-                    const dropdownMenu = toggle.nextElementSibling;
-                    if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
-                        document.body.appendChild(dropdownMenu);
-                    }
-                });
-            });
-
-            // Initialize PageLifecycleManager for dataset list page
-            const pageConfig = {
+            window.PageController.initListPage({
+                pageLifecycleConfig: {
                 pageType: 'dataset-list',
                 permissions: {
                     userPermissionLevel: 'owner', // User is always owner of their own datasets
@@ -91,20 +78,13 @@ <h1 class="page-title">Datasets</h1>
                         canDelete: true
                     }
                 }
-            };
-
-            // Initialize the page lifecycle manager
-            // This will automatically handle all modal initialization including share modals
-            window.pageLifecycleManager = new PageLifecycleManager(pageConfig);
-
-
-            // Initialize ListRefreshManager for dataset list
-            // The change in case differentiates the instance from the class.
-            window.listRefreshManager = new ListRefreshManager({
+                },
+                listRefreshConfig: {
                 containerSelector: '#dataset-list-ajax-wrapper',
                 modalsContainerSelector: '#dataset-modals-container',
                 url: '/users/dataset-list/',
                 itemType: 'dataset'
+                }
             });
 
             // Initialize PublishActionManager for publish modals
@@ -116,20 +96,21 @@ <h1 class="page-title">Datasets</h1>
             const downloadAlert = sessionStorage.getItem('datasetDownloadAlert');
             if (downloadAlert) {
                 const alertData = JSON.parse(downloadAlert);
-                showAlert(alertData.message, alertData.type);
+                const raw = alertData.type || "info";
+                const variant =
+                    raw === "error" || raw === "danger"
+                        ? "danger"
+                        : ["success", "warning", "info"].includes(raw)
+                          ? raw
+                          : "info";
+                void window.DOMUtils?.showMessage?.(alertData.message, {
+                    variant: variant,
+                    placement: "toast",
+                    presentation: "toast",
+                });
                 sessionStorage.removeItem('datasetDownloadAlert');
             }
 
-            // Prevent row click when clicking on dropdown elements
-            document.addEventListener('click', function(event) {
-                if (event.target.closest('.dropdown') ||
-                    event.target.closest('.btn-icon-dropdown') ||
-                    event.target.closest('.dropdown-toggle') ||
-                    event.target.closest('.dropdown-menu')) {
-                    event.stopPropagation();
-                }
-            });
-
         });
 </script>
     {# djlint:on #}
diff --git a/gateway/sds_gateway/templates/users/file_list.html b/gateway/sds_gateway/templates/users/file_list.html
deleted file mode 100644
index bfd9e9ccb..000000000
--- a/gateway/sds_gateway/templates/users/file_list.html
+++ /dev/null
@@ -1,533 +0,0 @@
-{# templates/users/file_list.html #}
-{% extends "base.html" %}
-
-{% load static %}
-
-{% block bodyclass %}
-    hero-white-page
-{% endblock bodyclass %}
-{% block css %}
-    {{ block.super }}
-    <link rel="stylesheet"
-          href="{% static 'css/visualizations/visualization_modal.css' %}" />
-    <link rel="stylesheet" href="{% static 'css/permission-levels.css' %}" />
-{% endblock css %}
-{% block body %}
-    <!-- Add Font Awesome for sort arrows -->
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
-    <!-- Add noUiSlider CSS first -->
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" />
-    <!-- Add file-list.css for upload modal styling -->
-    <link rel="stylesheet" href="{% static 'css/file-list.css' %}" />
-    <!-- Add noUiSlider JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
-    <style>
-        .clear-search-hidden {
-            display: none;
-        }
-    </style>
-    <!-- CSRF Token for JavaScript -->
-    {% csrf_token %}
-    <!-- System-wide notifications -->
-    {% if system_notifications %}
-        <div class="container">
-            {% for notification in system_notifications %}
-                <div class="alert alert-dismissible alert-{{ notification.level }}">{{ notification.user_message }}</div>
-            {% endfor %}
-        </div>
-    {% endif %}
-    {% if messages %}
-        <div class="container">
-            {% for message in messages %}
-                {% if message.tags == "error" %}
-                    {% include "users/components/toast.html" with message=message type="error" %}
-                {% elif message.tags == "success" %}
-                    {% include "users/components/toast.html" with message=message type="success" %}
-                {% elif message.tags == "warning" %}
-                    {% include "users/components/toast.html" with message=message type="warning" %}
-                {% else %}
-                    {% include "users/components/toast.html" with message=message type="info" %}
-                {% endif %}
-            {% endfor %}
-        </div>
-    {% endif %}
-    <div id="upload-alert-container" class="container mt-3"></div>
-    <div class="container-fluid px-5 pt-4">
-        <!-- Headers Row -->
-        <div class="row mb-1">
-            <div class="col-12">
-                <h1 class="mb-0 text-start">Captures</h1>
-            </div>
-        </div>
-        <!-- Content Row -->
-        <div class="row">
-            <!-- Sidebar Filters -->
-            <aside class="col-md-3 mb-4">
-                <div class="sidebar-filters">
-                    <div class="accordion" id="filtersAccordion">
-                        <!-- Frequency -->
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingFrequency">
-                                <button class="accordion-button collapsed"
-                                        type="button"
-                                        data-bs-target="#collapseFrequency"
-                                        aria-expanded="false"
-                                        aria-controls="collapseFrequency">
-                                    <i class="fas fa-signal me-2"></i>
-                                    Center Frequency
-                                </button>
-                            </h2>
-                            <div id="collapseFrequency" class="accordion-collapse collapse">
-                                <div class="accordion-body">
-                                    <label for="frequency-range" class="form-label">Center Frequency Range</label>
-                                    <div id="frequency-range-slider"
-                                         class="mt-3 mb-3"
-                                         role="slider"
-                                         aria-valuemin="0"
-                                         aria-valuemax="10"
-                                         aria-valuenow="0,10"
-                                         aria-valuetext="Frequency range from 0.0 GHz to 10.0 GHz"></div>
-                                    <div class="d-flex justify-content-between mb-3">
-                                        <span id="frequency-range-lower" aria-live="polite">0 GHz</span>
-                                        <span id="frequency-range-upper" aria-live="polite">10 GHz</span>
-                                    </div>
-                                    <div class="row mt-3">
-                                        <div class="col-6">
-                                            <label for="centerFreqMinInput" class="form-label small">Min (GHz)</label>
-                                            <input type="number"
-                                                   id="centerFreqMinInput"
-                                                   class="form-control form-control-sm"
-                                                   min="0"
-                                                   max="10"
-                                                   step="0.1"
-                                                   value="0"
-                                                   placeholder="0" />
-                                        </div>
-                                        <div class="col-6">
-                                            <label for="centerFreqMaxInput" class="form-label small">Max (GHz)</label>
-                                            <input type="number"
-                                                   id="centerFreqMaxInput"
-                                                   class="form-control form-control-sm"
-                                                   min="0"
-                                                   max="10"
-                                                   step="0.1"
-                                                   value="10"
-                                                   placeholder="10" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Date -->
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingDate">
-                                <button class="accordion-button collapsed"
-                                        type="button"
-                                        data-bs-target="#collapseDate"
-                                        aria-expanded="false"
-                                        aria-controls="collapseDate">
-                                    <i class="fas fa-calendar me-2"></i>
-                                    Date Range
-                                </button>
-                            </h2>
-                            <div id="collapseDate" class="accordion-collapse collapse">
-                                <div class="accordion-body">
-                                    <div class="row">
-                                        <div class="col mb-3">
-                                            <label class="form-label" for="start_date">Start Date</label>
-                                            <input type="date" class="form-control" id="start_date" name="date_start" />
-                                        </div>
-                                        <div class="col">
-                                            <label class="form-label" for="end_date">End Date</label>
-                                            <input type="date" class="form-control" id="end_date" name="date_end" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex gap-3 mt-4">
-                        <button class="btn btn-primary flex-fill"
-                                type="button"
-                                id="apply-filters-btn">Apply Filters</button>
-                        <button class="btn btn-secondary flex-fill"
-                                type="button"
-                                id="clear-filters-btn">Clear Filters</button>
-                    </div>
-                </div>
-            </aside>
-            <!-- Main Content -->
-            <main class="col-md-9 pt-0">
-                <!-- Search Form -->
-                <form id="search-form"
-                      role="search"
-                      aria-label="Search captures"
-                      class="text-start mt-0">
-                    <div class="row g-3 mb-3">
-                        <div class="col-12">
-                            <div class="d-flex justify-content-between align-items-center">
-                                <!-- Search Input Group -->
-                                <div class="flex-grow-1 me-3">
-                                    <label for="search-input" class="visually-hidden">Search captures</label>
-                                    <div class="input-group">
-                                        <div class="position-relative flex-grow-1">
-                                            <input type="search"
-                                                   class="form-control pe-5"
-                                                   id="search-input"
-                                                   placeholder="Search captures..."
-                                                   value="{{ search }}"
-                                                   aria-describedby="searchHelp" />
-                                            <button type="button"
-                                                    class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-secondary px-3 clear-search-hidden"
-                                                    id="clear-search-btn"
-                                                    aria-label="Clear search">
-                                                <i class="fas fa-times"></i>
-                                            </button>
-                                        </div>
-                                        <button class="btn btn-primary"
-                                                type="submit"
-                                                id="search-btn"
-                                                aria-label="Search captures">
-                                            <i class="fas fa-search" aria-hidden="true"></i>
-                                            <span class="d-none d-sm-inline ms-1">Search</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <!-- Upload Button Group -->
-                                <div class="flex-shrink-0">
-                                    <div class="input-group">
-                                        <button type="button"
-                                                class="btn btn-success"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#uploadCaptureModal">
-                                            <i class="fas fa-upload"></i> Upload Capture
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </form>
-                <!-- Loading indicator -->
-                <div id="loading-indicator" class="text-center py-3 d-none">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2 text-muted">Searching captures...</p>
-                </div>
-                <!-- Upload Capture Modal -->
-                <div class="modal fade"
-                     id="uploadCaptureModal"
-                     tabindex="-1"
-                     aria-labelledby="uploadCaptureModalLabel"
-                     aria-hidden="true"
-                     data-check-file-url="{% url 'users:check_file_exists' %}"
-                     data-upload-url="{% url 'users:upload_capture' %}">
-                    <div class="modal-dialog">
-                        <div class="modal-content">
-                            <form id="uploadCaptureForm" enctype="multipart/form-data">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" id="uploadCaptureModalLabel">Upload Files & Create Capture</h5>
-                                    <button type="button"
-                                            class="btn-close"
-                                            data-bs-dismiss="modal"
-                                            aria-label="Close"></button>
-                                </div>
-                                <div class="modal-body">
-                                    <!-- Progress Bar Section (initially hidden) -->
-                                    <div id="checkingProgressSection" class="mt-3 progress-section-hidden">
-                                        <div class="d-flex align-items-center">
-                                            <div class="spinner-border spinner-border-sm me-2" role="status">
-                                                <span class="visually-hidden">Processing...</span>
-                                            </div>
-                                            <div class="flex-grow-1">
-                                                <div class="progress progress-bar-custom">
-                                                    <div id="checkingProgressBar"
-                                                         class="progress-bar progress-bar-width-0"
-                                                         role="progressbar"></div>
-                                                </div>
-                                            </div>
-                                            <small class="ms-2 text-muted" id="checkingProgressText">0%</small>
-                                        </div>
-                                        <small class="text-muted" id="progressMessage">Processing files for upload...</small>
-                                    </div>
-                                    <!-- File Selection Section -->
-                                    <label for="captureFileInput" class="form-label">Select a folder to upload</label>
-                                    <input type="file"
-                                           id="captureFileInput"
-                                           name="files"
-                                           multiple
-                                           webkitdirectory
-                                           directory
-                                           class="form-control" />
-                                    <!-- Capture Type Selection -->
-                                    <div class="mt-3">
-                                        <label for="captureTypeSelect" class="form-label">Capture Type</label>
-                                        <select id="captureTypeSelect"
-                                                name="capture_type"
-                                                class="form-select"
-                                                required>
-                                            <option value="">Select capture type...</option>
-                                            <option value="drf">DigitalRF</option>
-                                            <option value="rh">RadioHound</option>
-                                        </select>
-                                        <div class="form-text">
-                                            <strong>DigitalRF:</strong> For .h5/.hdf5 files with channel-based structure
-                                            <br />
-                                            <strong>RadioHound:</strong> For .rh.json files with scan group metadata
-                                        </div>
-                                    </div>
-                                    <!-- Channel Input (shown for DigitalRF) -->
-                                    <div id="channelInputGroup" class="mt-3 hidden-input-group">
-                                        <label for="captureChannelsInput" class="form-label">Capture Channel Names (comma-separated)</label>
-                                        <input type="text"
-                                               id="captureChannelsInput"
-                                               name="channels"
-                                               class="form-control"
-                                               placeholder="e.g. ch1,ch2,ch3" />
-                                        <div class="form-text">Required for DigitalRF captures</div>
-                                    </div>
-                                    <!-- Scan Group Input (shown for RadioHound) -->
-                                    <div id="scanGroupInputGroup" class="mt-3 hidden-input-group">
-                                        <label for="captureScanGroupInput" class="form-label">Scan Group</label>
-                                        <input type="text"
-                                               id="captureScanGroupInput"
-                                               name="scan_group"
-                                               class="form-control"
-                                               placeholder="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" />
-                                        <div class="form-text">For RadioHound captures, optional UUID</div>
-                                    </div>
-                                </div>
-                                <div class="modal-footer">
-                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                                    <button type="submit" class="btn btn-primary" id="uploadSubmitBtn">
-                                        <span class="upload-text">Check & Upload Files</span>
-                                        <span class="upload-spinner d-none">
-                                            <span class="spinner-border spinner-border-sm"
-                                                  role="status"
-                                                  aria-hidden="true"></span>
-                                            Uploading...
-                                        </span>
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-                <!-- Upload Result Modal -->
-                <div class="modal fade"
-                     id="uploadResultModal"
-                     tabindex="-1"
-                     aria-labelledby="uploadResultModalLabel"
-                     aria-hidden="true">
-                    <div class="modal-dialog">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="uploadResultModalLabel">Upload Result</h5>
-                                <button type="button"
-                                        class="btn-close"
-                                        data-bs-dismiss="modal"
-                                        aria-label="Close"></button>
-                            </div>
-                            <div class="modal-body" id="uploadResultModalBody">
-                                <!-- Content will be set by JS -->
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Captures Table -->
-                {% include "users/partials/captures_page_table.html" %}
-            </main>
-        </div>
-    </div>
-    <!-- Capture Details Modal -->
-    {% include "users/partials/capture_modal.html" %}
-    <!-- Quick Add to Dataset Modal (single or multiple captures) -->
-    {% include "users/partials/quick_add_to_dataset_modal.html" %}
-    <!-- Per-capture Share and Download modals -->
-    {% for cap in captures %}
-        {% if cap.capture %}
-            {% include "users/partials/share_modal.html" with item=cap.capture item_type="capture" %}
-            {% include "users/partials/web_download_modal.html" with item=cap.capture item_type="capture" %}
-        {% endif %}
-    {% endfor %}
-{% endblock body %}
-{% block javascript %}
-    {{ block.super }}
-    <!-- Action components -->
-    <script type="module" src="{% static 'js/actions/ShareActionManager.js' %}"></script>
-    <script type="module"
-            src="{% static 'js/actions/DownloadActionManager.js' %}"></script>
-    <script type="module"
-            src="{% static 'js/actions/QuickAddToDatasetManager.js' %}"></script>
-    <!-- Page-specific components -->
-    <script src="{% static 'js/components.js' %}"></script>
-    <script src="{% static 'js/file-list.js' %}"></script>
-    <script src="{% static 'js/visualizations/visualizationModal.js' %}"></script>
-    <!-- Upload Capture Modal JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/hash-wasm@4.12.0/dist/blake3.umd.min.js"></script>
-    <script src="{% static 'js/file_list_upload_capture_modal.js' %}"></script>
-    <!-- Pass Django context data to JavaScript -->
-    {# djlint:off #}
-    <script>
-        // Make visualization compatibility data available to JavaScript
-        window.visualizationCompatibility = {{ visualization_compatibility | safe }};
-</script>
-    <script>
-        // Initialize noUiSlider for frequency range
-        document.addEventListener('DOMContentLoaded', function() {
-            const frequencyRangeSlider = document.getElementById('frequency-range-slider');
-            if (frequencyRangeSlider) {
-                noUiSlider.create(frequencyRangeSlider, {
-                    start: [0, 10],
-                    connect: true,
-                    range: {
-                        'min': 0,
-                        'max': 10
-                    },
-                    step: 0.1,
-                    format: {
-                        to: function(value) {
-                            return parseFloat(value).toFixed(1);
-                        },
-                        from: function(value) {
-                            return parseFloat(value);
-                        }
-                    }
-                });
-
-                const lowerValue = document.getElementById('frequency-range-lower');
-                const upperValue = document.getElementById('frequency-range-upper');
-                const minInput = document.getElementById('centerFreqMinInput');
-                const maxInput = document.getElementById('centerFreqMaxInput');
-
-                // Track user interaction with slider
-                let userInteractedWithSlider = false;
-
-                frequencyRangeSlider.noUiSlider.on('update', function(values, handle) {
-                    const value = parseFloat(values[handle]);
-                    if (handle === 0) {
-                        lowerValue.textContent = value + ' GHz';
-                        minInput.value = value;
-                        frequencyRangeSlider.setAttribute('aria-valuetext', `Frequency range from ${value} GHz to ${parseFloat(values[1])} GHz`);
-                    } else {
-                        upperValue.textContent = value + ' GHz';
-                        maxInput.value = value;
-                        frequencyRangeSlider.setAttribute('aria-valuetext', `Frequency range from ${parseFloat(values[0])} GHz to ${value} GHz`);
-                    }
-                });
-
-                // Mark as interacted when user changes slider
-                frequencyRangeSlider.noUiSlider.on('change', function() {
-                    userInteractedWithSlider = true;
-                    // Trigger the global tracking
-                    if (window.initializeFrequencySlider) {
-                        // Update the global interaction tracking
-                        const event = new Event('change');
-                        minInput.dispatchEvent(event);
-                    }
-                });
-
-                // Update slider when input values change
-                minInput.addEventListener('change', function() {
-                    const value = parseFloat(this.value);
-                    if (!isNaN(value) && value >= 0 && value <= 10) {
-                        frequencyRangeSlider.noUiSlider.set([value, null]);
-                    }
-                });
-
-                maxInput.addEventListener('change', function() {
-                    const value = parseFloat(this.value);
-                    if (!isNaN(value) && value >= 0 && value <= 10) {
-                        frequencyRangeSlider.noUiSlider.set([null, value]);
-                    }
-                });
-
-                // Initialize from URL parameters after slider is created
-                if (window.initializeFrequencySlider) {
-                    window.initializeFrequencySlider();
-                }
-            }
-        });
-
-        // Initialize PageLifecycleManager for capture list page (download manager only)
-        document.addEventListener('DOMContentLoaded', function() {
-            const pageConfig = {
-                pageType: 'capture-list-minimal', // Custom page type for minimal managers
-                permissions: {
-                    userPermissionLevel: 'owner',
-                    currentUserId: {{ request.user.id }},
-                    isOwner: true,
-                    capturePermissions: {
-                        canEditMetadata: false, // Only owners can edit metadata (determined per-capture)
-                        canAddAssets: false,
-                        canRemoveAnyAssets: false,
-                        canRemoveOwnAssets: false,
-                        canShare: true, // Allow sharing for capture owners (determined per-capture)
-                        canDownload: true, // Allow downloads for all users (shared and owners)
-                        canDelete: false
-                    }
-                }
-            };
-
-            // Initialize managers for captures (use window.* — classes are attached by module/scripts)
-            const permissionsManager = new window.PermissionsManager(pageConfig.permissions);
-
-            // Initialize download manager
-            const downloadManager = new window.DownloadActionManager({
-                permissions: permissionsManager
-            });
-
-            // Initialize visualization modal
-            if (window.VisualizationModal) {
-                new window.VisualizationModal();
-            }
-
-            // Quick add to dataset modal ("Add capture(s) to dataset" flow)
-            if (window.QuickAddToDatasetManager && document.getElementById("quickAddToDatasetModal")) {
-                new window.QuickAddToDatasetManager();
-            }
-
-            window.currentDownloadManager = downloadManager;
-
-            // Initialize share action managers for each capture modal
-            for (const modal of document.querySelectorAll('.modal[data-item-uuid]')) {
-                const itemUuid = modal.getAttribute('data-item-uuid');
-                const itemType = modal.getAttribute('data-item-type');
-
-                if (window.ShareActionManager && itemUuid && itemType === 'capture') {
-                    const shareManager = new ShareActionManager({
-                        itemUuid: itemUuid,
-                        itemType: itemType,
-                        permissions: permissionsManager
-                    });
-                    // Store the handler on the modal element
-                    modal.shareActionManager = shareManager;
-                }
-
-                // Reset selections when modal is hidden
-                modal.addEventListener('hidden.bs.modal', function() {
-                    if (modal.shareActionManager) {
-                        modal.shareActionManager.clearSelections();
-                    }
-                });
-            }
-
-            // Check for download alert messages
-            const downloadAlert = sessionStorage.getItem('captureDownloadAlert');
-            if (downloadAlert) {
-                const alertData = JSON.parse(downloadAlert);
-                if (window.showAlert) {
-                    window.showAlert(alertData.message, alertData.type);
-                }
-                sessionStorage.removeItem('captureDownloadAlert');
-            }
-        });
-</script>
-    {# djlint:on #}
-{% endblock javascript %}
diff --git a/gateway/sds_gateway/templates/users/files.html b/gateway/sds_gateway/templates/users/files.html
index 44028e2e8..727484c0f 100644
--- a/gateway/sds_gateway/templates/users/files.html
+++ b/gateway/sds_gateway/templates/users/files.html
@@ -139,7 +139,6 @@ <h1 class="page-title">Files</h1>
                                                 <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown d-flex align-items-center justify-content-center"
                                                         type="button"
                                                         data-bs-toggle="dropdown"
-                                                        data-bs-popper="static"
                                                         aria-expanded="false"
                                                         aria-label="Actions for {{ item.name }}">
                                                     <i class="bi bi-three-dots-vertical"></i>
@@ -151,6 +150,8 @@ <h1 class="page-title">Files</h1>
                                                             <li>
                                                                 <button class="dropdown-item capture-details-btn"
                                                                         type="button"
+                                                                        data-item-type="capture"
+                                                                        data-item-uuid="{{ item.uuid }}"
                                                                         data-uuid="{{ item.uuid }}"
                                                                         data-name="{{ item.name|default:'' }}"
                                                                         data-channel="{{ item.capture_uuid }}"
@@ -260,150 +261,8 @@ <h5 class="custom-modal-title" id="downloadModalLabel">Download</h5>
             </div>
         </div>
     </div>
-    <!-- Upload Capture Modal -->
-    <div class="modal fade"
-         id="uploadCaptureModal"
-         tabindex="-1"
-         aria-labelledby="uploadCaptureModalLabel">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <form id="uploadCaptureForm" enctype="multipart/form-data">
-                    {% csrf_token %}
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="uploadCaptureModalLabel">Upload Files & Create Capture</h5>
-                        <button type="button"
-                                class="btn-close"
-                                data-bs-dismiss="modal"
-                                aria-label="Close"
-                                tabindex="-1"></button>
-                    </div>
-                    <div class="modal-body">
-                        <!-- File Selection Section (styled like file_list, but wrapper keeps drag & drop) -->
-                        <label for="captureFileInput" class="form-label">Select a folder to upload</label>
-                        <input type="file"
-                               id="captureFileInput"
-                               name="files"
-                               multiple
-                               webkitdirectory
-                               directory
-                               class="form-control"
-                               tabindex="0" />
-                        <div class="upload-zone mt-2"
-                             id="uploadZone"
-                             aria-label="Drag and drop folder here">
-                            <i class="material-icons upload-zone-icon">cloud_upload</i>
-                            <div class="upload-zone-text">Drag and drop your folder here</div>
-                            <div class="upload-zone-subtext">Or use the file picker above</div>
-                        </div>
-                        <div class="selected-files" id="selectedFiles">
-                            <div class="selected-files-header">Selected Files:</div>
-                            <ul class="selected-files-list" id="selectedFilesList">
-                            </ul>
-                        </div>
-                        <!-- Progress Bar Section (initially hidden) -->
-                        <div id="checkingProgressSection" class="mt-3 progress-section-hidden">
-                            <div class="d-flex align-items-center">
-                                <div class="spinner-border spinner-border-sm me-2" role="status">
-                                    <span class="visually-hidden">Processing...</span>
-                                </div>
-                                <div class="flex-grow-1">
-                                    <div class="progress progress-bar-custom">
-                                        <div id="checkingProgressBar"
-                                             class="progress-bar"
-                                             role="progressbar"
-                                             class="progress-bar progress-bar-width-0"></div>
-                                    </div>
-                                </div>
-                                <small class="ms-2 text-muted" id="checkingProgressText">0%</small>
-                            </div>
-                            <small class="text-muted" id="progressMessage">Checking files for duplicates...</small>
-                        </div>
-                        <!-- Capture Type Selection -->
-                        <div class="mt-3">
-                            <label for="captureTypeSelect" class="form-label">Capture Type</label>
-                            <select class="form-select"
-                                    id="captureTypeSelect"
-                                    name="capture_type"
-                                    required
-                                    tabindex="0">
-                                <option value="">Select capture type...</option>
-                                <option value="drf">DigitalRF</option>
-                                <option value="rh">RadioHound</option>
-                            </select>
-                            <div class="form-text">
-                                <strong>DigitalRF:</strong> For .h5/.hdf5 files with channel-based structure
-                                <br />
-                                <strong>RadioHound:</strong> For .rh.json files with scan group metadata
-                            </div>
-                        </div>
-                        <!-- Channel input (DigitalRF) -->
-                        <div id="channelInputGroup" class="mt-3 hidden-input-group">
-                            <label for="captureChannelsInput" class="form-label">Capture Channel Names (comma-separated)</label>
-                            <input type="text"
-                                   id="captureChannelsInput"
-                                   name="channels"
-                                   class="form-control"
-                                   placeholder="e.g. ch1,ch2,ch3"
-                                   tabindex="0" />
-                            <div class="form-text">Required for DigitalRF captures</div>
-                        </div>
-                        <!-- Scan Group input (RadioHound) -->
-                        <div id="scanGroupInputGroup" class="mt-3 hidden-input-group">
-                            <label for="captureScanGroupInput" class="form-label">Scan Group</label>
-                            <input type="text"
-                                   id="captureScanGroupInput"
-                                   name="scan_group"
-                                   class="form-control"
-                                   placeholder="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
-                                   tabindex="0" />
-                            <div class="form-text">For RadioHound captures, optional UUID</div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button"
-                                class="btn btn-secondary"
-                                data-bs-dismiss="modal"
-                                tabindex="0">Cancel</button>
-                        <button type="submit"
-                                class="btn btn-primary"
-                                id="uploadSubmitBtn"
-                                tabindex="0">
-                            <span class="upload-text">Check & Upload Files</span>
-                            <span class="upload-spinner d-none">
-                                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
-                                Uploading...
-                            </span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <!-- Upload Result Modal -->
-    <div class="modal fade"
-         id="uploadResultModal"
-         tabindex="-1"
-         aria-labelledby="uploadResultModalLabel">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="uploadResultModalLabel">Upload Result</h5>
-                    <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="modal"
-                            aria-label="Close"
-                            tabindex="-1"></button>
-                </div>
-                <div class="modal-body" id="uploadResultModalBody"></div>
-                <div class="modal-footer">
-                    <button type="button"
-                            class="btn btn-secondary"
-                            data-bs-dismiss="modal"
-                            tabindex="0">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    {% include "users/partials/upload_capture_modal.html" with show_upload_zone=True %}
+    {% include "users/partials/upload_result_modal.html" %}
     <!-- Upload File Modal -->
     <div class="modal fade"
          id="uploadFileModal"
@@ -501,8 +360,7 @@ <h5 class="modal-title" id="filePreviewModalLabel">File Preview</h5>
             </div>
         </div>
     </div>
-    <!-- Include capture modal for editing -->
-    {% include "users/partials/capture_modal.html" %}
+    {% include "users/partials/asset_details_modal.html" %}
     <!-- Include share modals for captures -->
     {% for item in items %}
         {% if item.is_capture %}
@@ -511,12 +369,20 @@ <h5 class="modal-title" id="filePreviewModalLabel">File Preview</h5>
     {% endfor %}
 {% endblock content %}
 {% block javascript %}
-    <script src="{% static 'js/components.js' %}"></script>
-    <script src="{% static 'js/deprecated/userSearchComponent.js' %}"></script>
-    {# Fallback modal helpers provided by components.js; inline duplicates removed #}
-    <script src="{% static 'js/file-manager.js' %}?v=7"></script>
-    <!-- Load the WASM library for BLAKE3 hashing -->
+    {{ block.super }}
+    <script src="{% static 'js/constants/detailsModalConfig.js' %}"></script>
+    <script src="{% static 'js/share/UserSearchDropdown.js' %}"></script>
+    <script src="{% static 'js/actions/ShareActionManager.js' %}"></script>
+    <script src="{% static 'js/actions/details/CaptureDetailsModalBehavior.js' %}"></script>
+    <script src="{% static 'js/actions/details/AssetDetailsModalLoader.js' %}"></script>
+    <!-- BLAKE3 (hash-wasm) for capture duplicate checks; load before upload bundle -->
     <script src="https://cdn.jsdelivr.net/npm/hash-wasm@4.12.0/dist/blake3.umd.min.js"></script>
+    <script src="{% static 'js/upload/UploadUtils.js' %}"></script>
+    <script src="{% static 'js/upload/CaptureTypeSelector.js' %}"></script>
+    <script src="{% static 'js/upload/CaptureUploadController.js' %}"></script>
+    <script src="{% static 'js/upload/FileUploadHandler.js' %}"></script>
+    <script src="{% static 'js/upload/FilesBrowserManager.js' %}"></script>
+    <script src="{% static 'js/upload/uploadBootstrap.js' %}?v=11"></script>
     <!-- Prism.js for syntax highlighting -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
@@ -526,6 +392,21 @@ <h5 class="modal-title" id="filePreviewModalLabel">File Preview</h5>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
     <!-- Configuration for external JavaScript files -->
     <script>
+        // Permissions for ShareActionManager on per-capture share modals (files browser)
+        window.filesSharePagePermissions = {
+            userPermissionLevel: "owner",
+            currentUserId: {{ request.user.id }},
+            isOwner: true,
+            datasetPermissions: {
+                canEditMetadata: true,
+                canAddAssets: true,
+                canRemoveAnyAssets: true,
+                canRemoveOwnAssets: true,
+                canShare: true,
+                canDownload: true,
+            },
+        };
+
         // Global configuration for files page JavaScript modules
         window.filesConfig = {
             urls: {
@@ -540,7 +421,60 @@ <h5 class="modal-title" id="filePreviewModalLabel">File Preview</h5>
         window.uploadFilesUrl = window.filesConfig.urls.uploadFiles;
         window.csrfToken = window.filesConfig.csrfToken;
     </script>
-    <!-- External JavaScript modules -->
-    <script src="{% static 'js/files-upload.js' %}"></script>
-    <script src="{% static 'js/files-ui.js' %}"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const key = "filesAlert";
+            const stored = sessionStorage.getItem(key);
+            if (stored) {
+                try {
+                    const data = JSON.parse(stored);
+                    if (window.components?.showError && data?.type === "error") {
+                        window.components.showError(data.message || "An error occurred.");
+                    } else if (window.components?.showSuccess && data?.type === "success") {
+                        window.components.showSuccess(data.message || "Success");
+                    }
+                } catch (_) {}
+                sessionStorage.removeItem(key);
+            }
+
+            try {
+                const needsFilesCaptureModals =
+                    document.querySelector(".modal[data-item-uuid]") ||
+                    document.getElementById("asset-details-modal");
+
+                let filesCaptureModalsCleanup = null;
+                if (needsFilesCaptureModals && window.ModalManager?.initializeModal) {
+                    filesCaptureModalsCleanup = window.ModalManager.initializeModal({
+                        registerFilesCaptureCoordinator: true,
+                        detailsClickDelegation: true,
+                        wireAllDataItemModalsShare: Boolean(window.filesSharePagePermissions),
+                        permissions: window.filesSharePagePermissions,
+                    });
+                }
+
+                window.filesUICleanup = function() {
+                    const captureSelector = window.captureTypeSelectorInstance;
+                    if (captureSelector && typeof captureSelector.cleanup === "function") {
+                        captureSelector.cleanup();
+                    }
+                    if (typeof filesCaptureModalsCleanup === "function") {
+                        filesCaptureModalsCleanup();
+                    }
+                    const fileUploadHandler = window.fileUploadHandlerInstance;
+                    if (
+                        fileUploadHandler &&
+                        typeof fileUploadHandler.cleanup === "function"
+                    ) {
+                        fileUploadHandler.cleanup();
+                    }
+                };
+            } catch (error) {
+                window.DOMUtils?.showError(
+                    "Failed to initialize Files UI components",
+                    "initialization",
+                    error,
+                );
+            }
+        });
+    </script>
 {% endblock javascript %}
diff --git a/gateway/sds_gateway/templates/users/group_captures.html b/gateway/sds_gateway/templates/users/group_captures.html
index f9f665208..741f450f7 100644
--- a/gateway/sds_gateway/templates/users/group_captures.html
+++ b/gateway/sds_gateway/templates/users/group_captures.html
@@ -114,7 +114,11 @@ <h5 class="mb-0">
     </body>
     {% block extra_js %}
         <!-- Dataset components -->
+        <script src="{% static 'js/dataset/datasetFormSnapshot.js' %}"></script>
         <script src="{% static 'js/dataset/DatasetModeManager.js' %}"></script>
+        <script src="{% static 'js/dataset/AuthorsManager.js' %}"></script>
+        <script src="{% static 'js/dataset/DatasetAuthorsUI.js' %}"></script>
+        <script src="{% static 'js/dataset/DatasetPendingChanges.js' %}"></script>
         <script src="{% static 'js/dataset/DatasetCreationHandler.js' %}"></script>
         <script src="{% static 'js/dataset/DatasetEditingHandler.js' %}"></script>
         <!-- Search components -->
diff --git a/gateway/sds_gateway/templates/users/partials/capture_modal.html b/gateway/sds_gateway/templates/users/partials/asset_details_modal.html
similarity index 66%
rename from gateway/sds_gateway/templates/users/partials/capture_modal.html
rename to gateway/sds_gateway/templates/users/partials/asset_details_modal.html
index 29366433b..a53fc82d8 100644
--- a/gateway/sds_gateway/templates/users/partials/capture_modal.html
+++ b/gateway/sds_gateway/templates/users/partials/asset_details_modal.html
@@ -1,22 +1,19 @@
-<!-- Capture Modal -->
+{# Shared shell for capture/dataset details (body from /users/details-modal/<type>/<uuid>/). #}
 <div class="modal fade"
-     id="capture-modal"
+     id="asset-details-modal"
      tabindex="-1"
      role="dialog"
-     aria-labelledby="capture-modal-label">
-    <div class="modal-dialog modal-lg">
+     aria-labelledby="asset-details-modal-label">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="capture-modal-label">Capture Details</h5>
+                <h5 class="modal-title" id="asset-details-modal-label">Details</h5>
                 <div class="d-flex align-items-center">
                     {% if VISUALIZATIONS_ENABLED %}
-                        <!-- Visualize button - opens visualization selection modal -->
                         <button type="button"
                                 class="btn btn-primary me-2 d-none"
                                 id="visualize-btn"
                                 title="Select visualization for this capture"
-                                data-bs-toggle="modal"
-                                data-bs-target="#visualization-modal"
                                 data-capture-uuid=""
                                 data-capture-type="">
                             <i class="bi bi-graph-up me-1"></i>Visualize
@@ -28,11 +25,10 @@ <h5 class="modal-title" id="capture-modal-label">Capture Details</h5>
                             aria-label="Close"></button>
                 </div>
             </div>
-            <div class="modal-body" id="capture-modal-body">
-                <!-- Capture details will be dynamically inserted here by JavaScript -->
+            <div class="modal-body" id="asset-details-modal-body">
                 <div class="d-flex justify-content-center py-4">
                     <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading capture details...</span>
+                        <span class="visually-hidden">Loading details...</span>
                     </div>
                 </div>
             </div>
@@ -42,7 +38,6 @@ <h5 class="modal-title" id="capture-modal-label">Capture Details</h5>
         </div>
     </div>
 </div>
-<!-- Include the visualization modal with context -->
-{% if VISUALIZATIONS_ENABLED %}
+{% if VISUALIZATIONS_ENABLED and visualization_compatibility %}
     {% include "visualizations/partials/visualization_modal.html" with visualization_compatibility=visualization_compatibility %}
 {% endif %}
diff --git a/gateway/sds_gateway/templates/users/partials/captures_page_table.html b/gateway/sds_gateway/templates/users/partials/captures_page_table.html
deleted file mode 100644
index 94b9bbc3e..000000000
--- a/gateway/sds_gateway/templates/users/partials/captures_page_table.html
+++ /dev/null
@@ -1,262 +0,0 @@
-{% load custom_filters %}
-{% load tz %}
-
-<!-- Add Bootstrap Icons for actions dropdown -->
-<link rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" />
-<!-- Search Results -->
-<div id="search-results">
-    <div class="d-flex justify-content-between align-items-center mb-2">
-        <!-- Add capture(s) to dataset (selection mode; wired by file-list.js) -->
-        <div class="d-flex gap-2 align-items-center">
-            <button type="button"
-                    class="btn btn-primary btn-sm"
-                    id="add-captures-to-dataset-btn"
-                    aria-pressed="false"
-                    title="Select captures to add to a dataset">
-                <i class="fas fa-check-square" aria-hidden="true"></i>
-                <span class="ms-1">Select</span>
-            </button>
-            <div id="add-to-dataset-mode-buttons" class="d-none d-flex gap-2">
-                <button type="button"
-                        class="btn btn-secondary btn-sm"
-                        id="add-to-dataset-cancel-btn">Cancel</button>
-                <button type="button"
-                        class="btn btn-primary btn-sm"
-                        id="add-to-dataset-add-btn"
-                        disabled
-                        title="Select at least one capture to add to a dataset"
-                        aria-label="Add to dataset — select at least one capture first">Add to Dataset</button>
-            </div>
-        </div>
-        <span id="results-count" aria-live="polite" role="status">
-            {% if captures %}
-                {{ captures|length }} capture{{ captures|length|pluralize }} found
-            {% else %}
-                0 captures found
-            {% endif %}
-        </span>
-    </div>
-    <div class="table-responsive">
-        <table id="captures-table"
-               class="table table-striped table-hover table-sm captures-table-fixed"
-               aria-labelledby="search-results-heading">
-            <caption id="search-results-heading" class="visually-hidden">
-                Search results for captures showing name, channel, creation date, type, author, center frequency, sample rate, and actions
-            </caption>
-            <thead>
-                <tr>
-                    <th scope="col" class="capture-select-column" id="select-header">Select</th>
-                    <th scope="col" id="name-header" class="w-25">Name</th>
-                    <th scope="col"
-                        id="top-level-dir-header"
-                        class="sortable w-20"
-                        data-sort="top_level_dir"
-                        aria-sort="none">
-                        Directory <i class="bi bi-caret-down-fill sort-icon" aria-hidden="true"></i>
-                    </th>
-                    <th scope="col"
-                        id="type-header"
-                        class="sortable w-15"
-                        data-sort="capture_type"
-                        aria-sort="none">
-                        Type <i class="bi bi-caret-down-fill sort-icon" aria-hidden="true"></i>
-                    </th>
-                    <th scope="col"
-                        id="created-header"
-                        class="sortable w-20"
-                        data-sort="created_at"
-                        aria-sort="none">
-                        Created <i class="bi bi-caret-down-fill sort-icon" aria-hidden="true"></i>
-                    </th>
-                    <th scope="col" id="actions-header" class="w-20 text-center">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% if captures %}
-                    {% for cap in captures %}
-                        <tr class="capture-row" data-capture-uuid="{{ cap.uuid }}">
-                            <td class="capture-select-column" headers="select-header">
-                                {% if cap.is_owner %}
-                                    <input type="checkbox"
-                                           class="capture-select-checkbox form-check-input"
-                                           data-capture-uuid="{{ cap.uuid }}"
-                                           aria-label="Select capture {{ cap.name|default:cap.uuid }}" />
-                                {% else %}
-                                    <span class="text-muted" aria-hidden="true">—</span>
-                                {% endif %}
-                            </td>
-                            <td headers="name-header">
-                                <a href="#"
-                                   class="capture-link"
-                                   data-uuid="{{ cap.uuid }}"
-                                   data-name="{{ cap.name|default:'' }}"
-                                   data-channel="{% if cap.is_multi_channel %}{% for channel in cap.channels %}{{ channel.channel }}{% if not forloop.last %}, {% endif %}{% endfor %}{% else %}{{ cap.channel }}{% endif %}"
-                                   data-scan-group="{{ cap.scan_group }}"
-                                   data-capture-type="{{ cap.capture_type }}"
-                                   data-top-level-dir="{{ cap.top_level_dir }}"
-                                   data-owner="{{ cap.owner }}"
-                                   data-origin="{{ cap.origin }}"
-                                   data-dataset="{{ cap.dataset }}"
-                                   data-created-at="{{ cap.created_at }}"
-                                   data-updated-at="{{ cap.updated_at }}"
-                                   data-is-public="{{ cap.is_public }}"
-                                   data-center-frequency-ghz="{{ cap.center_frequency_ghz }}"
-                                   data-is-multi-channel="{{ cap.is_multi_channel|yesno:'True,False' }}"
-                                   data-channels="{{ cap.channels|safe }}"
-                                   aria-label="View details for capture {{ cap.name|default:cap.uuid }}"
-                                   title="View capture details: {{ cap.name|default:cap.uuid }}">
-                                    {{ cap.name|default:"Unnamed Capture" }}
-                                </a>
-                                {% if cap.is_shared_with_me %}
-                                    <span class="ms-2 align-middle"
-                                          data-bs-toggle="tooltip"
-                                          title="Shared with you">
-                                        <i class="bi bi-people-fill text-success"></i>
-                                    </span>
-                                {% endif %}
-                            </td>
-                            <td headers="top-level-dir-header"
-                                class="text-truncate"
-                                title="{{ cap.top_level_dir|default:'' }}">{{ cap.top_level_dir|default:"-" }}</td>
-                            <td headers="type-header">{{ cap.capture_type_display }}</td>
-                            <td headers="created-header" class="text-nowrap">
-                                {% if cap.capture.created_at %}
-                                    {% localtime on %}
-                                    <div class="d-flex align-items-center gap-2">
-                                        <span class="bg-transparent pe-2">{{ cap.capture.created_at|date:"Y-m-d" }}</span>
-                                        <span class="text-muted bg-transparent">{{ cap.capture.created_at|date:"H:i:s T" }}</span>
-                                    </div>
-                                {% endlocaltime %}
-                            {% else %}
-                                -
-                            {% endif %}
-                        </td>
-                        <td headers="actions-header" class="text-center">
-                            <div class="dropdown">
-                                <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown d-flex align-items-center justify-content-center mx-auto"
-                                        type="button"
-                                        data-bs-toggle="dropdown"
-                                        data-bs-boundary="viewport"
-                                        aria-expanded="false"
-                                        aria-label="Actions for capture {{ cap.name|default:cap.uuid }}">
-                                    <i class="bi bi-three-dots-vertical"></i>
-                                </button>
-                                <ul class="dropdown-menu">
-                                    {% if cap.is_owner %}
-                                        <li>
-                                            <button class="dropdown-item capture-details-btn"
-                                                    type="button"
-                                                    data-uuid="{{ cap.uuid }}"
-                                                    data-name="{{ cap.name|default:'' }}"
-                                                    data-channel="{% if cap.is_multi_channel %}{% for channel in cap.channels %}{{ channel.channel }}{% if not forloop.last %}, {% endif %}{% endfor %}{% else %}{{ cap.channel }}{% endif %}"
-                                                    data-scan-group="{{ cap.scan_group }}"
-                                                    data-capture-type="{{ cap.capture_type }}"
-                                                    data-top-level-dir="{{ cap.top_level_dir }}"
-                                                    data-owner="{{ cap.owner }}"
-                                                    data-origin="{{ cap.origin }}"
-                                                    data-dataset="{{ cap.dataset }}"
-                                                    data-created-at="{{ cap.created_at }}"
-                                                    data-updated-at="{{ cap.updated_at }}"
-                                                    data-is-public="{{ cap.is_public }}"
-                                                    data-center-frequency-ghz="{{ cap.center_frequency_ghz }}"
-                                                    data-is-multi-channel="{{ cap.is_multi_channel|yesno:'True,False' }}"
-                                                    data-channels="{{ cap.channels|safe }}">Edit</button>
-                                        </li>
-                                        <li>
-                                            <button class="dropdown-item"
-                                                    type="button"
-                                                    data-bs-toggle="modal"
-                                                    data-bs-target="#shareModal-{{ cap.uuid }}">Share</button>
-                                        </li>
-                                        <li>
-                                            <button class="dropdown-item add-to-dataset-btn"
-                                                    type="button"
-                                                    data-capture-uuid="{{ cap.uuid }}"
-                                                    data-capture-name="{{ cap.name|default:'' }}">
-                                                Add to dataset
-                                            </button>
-                                        </li>
-                                    {% endif %}
-                                    <li>
-                                        <button class="dropdown-item web-download-btn"
-                                                type="button"
-                                                data-item-uuid="{{ cap.uuid }}"
-                                                data-item-type="capture"
-                                                data-length-of-capture-ms="{{ cap.length_of_capture_ms|default:0 }}"
-                                                data-file-cadence-ms="{{ cap.file_cadence_ms|default:1000 }}"
-                                                data-per-data-file-size="{{ cap.data_files_info.per_data_file_size|default:0 }}"
-                                                data-total-data-file-size="{{ cap.data_files_info.total_size|default:0 }}"
-                                                data-total-size="{{ cap.total_file_size|default:0 }}"
-                                                data-data-files-count="{{ cap.data_files_info.count|default:0 }}"
-                                                data-total-files-count="{{ cap.files|length|default:0 }}"
-                                                data-capture-start-epoch-sec="{{ cap.capture_start_epoch_sec|default:0 }}">
-                                            Download
-                                        </button>
-                                    </li>
-                                    {% if cap.capture_type == 'drf' %}
-                                        <li>
-                                            <button class="dropdown-item visualization-trigger-btn"
-                                                    type="button"
-                                                    data-capture-uuid="{{ cap.uuid }}"
-                                                    data-capture-type="{{ cap.capture_type }}">Visualize</button>
-                                        </li>
-                                    {% endif %}
-                                </ul>
-                            </div>
-                        </td>
-                    </tr>
-                {% endfor %}
-            {% else %}
-                <tr>
-                    <td colspan="6" class="text-center text-muted py-4">
-                        <em>No captures found matching your search criteria.</em>
-                    </td>
-                </tr>
-            {% endif %}
-        </tbody>
-    </table>
-</div>
-<!-- Pagination -->
-{% if captures and captures.paginator.num_pages > 1 %}
-    <nav aria-label="Search results pagination" class="mt-4">
-        <ul class="pagination justify-content-center" id="pagination-controls">
-            <!-- Previous button -->
-            <li class="page-item {% if not captures.has_previous %}disabled{% endif %}">
-                <a class="page-link"
-                   href="{% if captures.has_previous %}?page={{ captures.previous_page_number }}&search={{ search }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}&date_start={{ request.GET.date_start }}&date_end={{ request.GET.date_end }}&items_per_page={{ items_per_page|default:25 }}{% else %}#{% endif %}"
-                   aria-label="Go to previous page"
-                   {% if not captures.has_previous %}aria-disabled="true" tabindex="-1"{% endif %}>
-                    <span aria-hidden="true">«</span>
-                    <span class="visually-hidden">Previous</span>
-                </a>
-            </li>
-            <!-- Page numbers -->
-            {% for num in captures.paginator.page_range %}
-                <li class="page-item {% if num == captures.number %}active{% endif %}">
-                    {% if num == captures.number %}
-                        <a class="page-link"
-                           href="?page={{ num }}&search={{ search }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}&date_start={{ request.GET.date_start }}&date_end={{ request.GET.date_end }}&items_per_page={{ items_per_page|default:25 }}"
-                           aria-label="Go to page {{ num }}"
-                           aria-current="page">{{ num }}</a>
-                    {% else %}
-                        <a class="page-link"
-                           href="?page={{ num }}&search={{ search }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}&date_start={{ request.GET.date_start }}&date_end={{ request.GET.date_end }}&items_per_page={{ items_per_page|default:25 }}"
-                           aria-label="Go to page {{ num }}">{{ num }}</a>
-                    {% endif %}
-                </li>
-            {% endfor %}
-            <!-- Next button -->
-            <li class="page-item {% if not captures.has_next %}disabled{% endif %}">
-                <a class="page-link"
-                   href="{% if captures.has_next %}?page={{ captures.next_page_number }}&search={{ search }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}&date_start={{ request.GET.date_start }}&date_end={{ request.GET.date_end }}&items_per_page={{ items_per_page|default:25 }}{% else %}#{% endif %}"
-                   aria-label="Go to next page"
-                   {% if not captures.has_next %}aria-disabled="true" tabindex="-1"{% endif %}>
-                    <span aria-hidden="true">»</span>
-                    <span class="visually-hidden">Next</span>
-                </a>
-            </li>
-        </ul>
-    </nav>
-{% endif %}
-</div>
diff --git a/gateway/sds_gateway/templates/users/partials/dataset_details_modal.html b/gateway/sds_gateway/templates/users/partials/dataset_details_modal.html
deleted file mode 100644
index a36e14192..000000000
--- a/gateway/sds_gateway/templates/users/partials/dataset_details_modal.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!-- Dataset Details Modal -->
-<div class="modal fade"
-     id="datasetDetailsModal-{{ dataset.uuid }}"
-     data-item-uuid="{{ dataset.uuid }}"
-     data-item-type="dataset"
-     tabindex="-1"
-     aria-labelledby="datasetDetailsModalLabel-{{ dataset.uuid }}"
-     aria-hidden="true">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="datasetDetailsModalLabel">
-                    <i class="bi bi-info-circle me-2"></i>Dataset Details
-                </h5>
-                <button type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="container-fluid">
-                    <!-- Dataset Information Section -->
-                    <div class="row mb-4">
-                        <div class="col-12">
-                            <div class="card">
-                                <div class="card-header bg-light">
-                                    <h6 class="mb-0">
-                                        <i class="bi bi-file-earmark-text me-2"></i>Dataset Information
-                                    </h6>
-                                </div>
-                                <div class="card-body">
-                                    <div class="row">
-                                        <div class="col-md-6">
-                                            <div class="mb-3">
-                                                <label class="fw-bold text-muted mb-0">Dataset Name:</label>
-                                                <div class="d-flex align-items-center gap-2">
-                                                    <p class="mb-0 dataset-details-name">Loading...</p>
-                                                    <button type="button"
-                                                            class="copy-uuid-btn"
-                                                            data-bs-toggle="tooltip"
-                                                            data-bs-placement="top"
-                                                            title="Copy Dataset UUID">
-                                                        <i class="bi bi-clipboard"></i>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                            <div class="mb-3">
-                                                <label class="fw-bold text-muted">Author(s):</label>
-                                                <p class="mb-0 dataset-details-author">Loading...</p>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6">
-                                            <div class="mb-3">
-                                                <label class="fw-bold text-muted">Status:</label>
-                                                <p class="mb-0 dataset-details-status">Loading...</p>
-                                            </div>
-                                            <div class="mb-3">
-                                                <label class="fw-bold text-muted">Created:</label>
-                                                <p class="mb-0 dataset-details-created">Loading...</p>
-                                            </div>
-                                            <div class="mb-3">
-                                                <label class="fw-bold text-muted">Last Updated:</label>
-                                                <p class="mb-0 dataset-details-updated">Loading...</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label class="fw-bold text-muted">Description:</label>
-                                        <p class="mb-0 dataset-details-description">Loading...</p>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label class="fw-bold text-muted">Keywords:</label>
-                                        <div class="dataset-details-keywords">
-                                            <span class="text-muted">Loading...</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- File Tree Section -->
-                    <div class="row">
-                        <div class="col-12">
-                            <div class="card">
-                                <div class="card-header bg-light">
-                                    <h6 class="mb-0">
-                                        <i class="bi bi-folder2-open me-2"></i>Files and Captures
-                                    </h6>
-                                </div>
-                                <div class="card-body">
-                                    <!-- File Statistics -->
-                                    <div class="row mb-3">
-                                        <div class="col-md-3">
-                                            <div class="card bg-light">
-                                                <div class="card-body text-center">
-                                                    <h6 class="card-title mb-1">Total Files</h6>
-                                                    <p class="mb-0 fw-bold text-primary" id="total-files-count">0</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3">
-                                            <div class="card bg-light">
-                                                <div class="card-body text-center">
-                                                    <h6 class="card-title mb-1">Capture Files</h6>
-                                                    <p class="mb-0 fw-bold text-success" id="captures-count">0</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3">
-                                            <div class="card bg-light">
-                                                <div class="card-body text-center">
-                                                    <h6 class="card-title mb-1">Artifact Files</h6>
-                                                    <p class="mb-0 fw-bold text-info" id="artifacts-count">0</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3">
-                                            <div class="card bg-light">
-                                                <div class="card-body text-center">
-                                                    <h6 class="card-title mb-1">Total Size</h6>
-                                                    <p class="mb-0 fw-bold text-warning" id="total-size">0 B</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <!-- File Tree Table -->
-                                    <div class="table-responsive file-tree-container">
-                                        <table class="table table-striped" id="dataset-file-tree-table">
-                                            <thead class="sticky-top">
-                                                <tr>
-                                                    <th class="w-5"></th>
-                                                    <th class="w-30">Name</th>
-                                                    <th class="w-15">Type</th>
-                                                    <th class="w-20">Size</th>
-                                                    <th class="w-30">Created At</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <!-- File tree will be dynamically inserted here -->
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                    <!-- Pagination -->
-                                    <div id="dataset-files-pagination" class="mt-3">
-                                        <!-- Pagination will be dynamically inserted here -->
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/gateway/sds_gateway/templates/users/partials/dataset_version_control.html b/gateway/sds_gateway/templates/users/partials/dataset_version_control.html
index ed4991d4b..18fe1c11f 100644
--- a/gateway/sds_gateway/templates/users/partials/dataset_version_control.html
+++ b/gateway/sds_gateway/templates/users/partials/dataset_version_control.html
@@ -16,7 +16,7 @@ <h5 class="modal-title" id="versioningModalLabel-{{ dataset.uuid }}">
                         data-bs-dismiss="modal"
                         aria-label="Close"></button>
             </div>
-            {% if dataset.next_version %}
+            {% if dataset.next_version and dataset.next_version.owner == request.user %}
                 <div class="modal-body">
                     <div class="mb-4">
                         <p class="mb-3">
@@ -97,7 +97,7 @@ <h5 class="modal-title" id="versioningModalLabel-{{ dataset.uuid }}">
                 </button>
                 <button type="button"
                         class="btn btn-primary"
-                        {% if dataset.next_version %}disabled{% endif %}
+                        {% if dataset.next_version and dataset.next_version.owner == request.user %}disabled{% endif %}
                         id="createVersionBtn-{{ dataset.uuid }}">
                     <i class="bi bi-folder-symlink me-1"></i> Create Version
                 </button>
diff --git a/gateway/sds_gateway/templates/users/partials/search_published_datasets_tab.html b/gateway/sds_gateway/templates/users/partials/search_published_datasets_tab.html
index 99e4cfa29..5f7e53f91 100644
--- a/gateway/sds_gateway/templates/users/partials/search_published_datasets_tab.html
+++ b/gateway/sds_gateway/templates/users/partials/search_published_datasets_tab.html
@@ -40,13 +40,17 @@ <h4 class="alert-heading">No datasets found</h4>
                     </thead>
                     <tbody id="search-results-tbody">
                         {% for dataset in page_obj %}
-                            <tr class="clickable-row" data-dataset-uuid="{{ dataset.uuid }}">
+                            <tr class="clickable-row dataset-details-open"
+                                data-dataset-uuid="{{ dataset.uuid }}"
+                                data-item-uuid="{{ dataset.uuid }}"
+                                data-item-type="dataset"
+                                role="button"
+                                tabindex="0">
                                 <td class="text-nowrap">
                                     <a href="#"
                                        class="dataset-name-link"
-                                       data-bs-toggle="modal"
-                                       data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
                                        data-dataset-uuid="{{ dataset.uuid }}"
+                                       data-item-uuid="{{ dataset.uuid }}"
                                        aria-label="View details for {{ dataset.name }}">{{ dataset.name }}</a>
                                     {% if dataset.is_public %}<i class="bi bi-globe me-1 text-primary" title="Public"></i>{% endif %}
                                 </td>
diff --git a/gateway/sds_gateway/templates/users/partials/share_group_table.html b/gateway/sds_gateway/templates/users/partials/share_group_table.html
index b86baea4d..2caae9f3f 100644
--- a/gateway/sds_gateway/templates/users/partials/share_group_table.html
+++ b/gateway/sds_gateway/templates/users/partials/share_group_table.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="table-responsive">
+<div class="table-responsive share-groups-table-responsive">
     <table class="table table-hover">
         <thead>
             <tr>
@@ -41,7 +41,6 @@
                             <button class="btn btn-sm btn-light dropdown-toggle btn-icon-dropdown"
                                     type="button"
                                     data-bs-toggle="dropdown"
-                                    data-bs-popper="static"
                                     aria-expanded="false"
                                     aria-label="Actions for {{ group.name }}">
                                 <i class="bi bi-three-dots-vertical"></i>
diff --git a/gateway/sds_gateway/templates/users/partials/share_modal.html b/gateway/sds_gateway/templates/users/partials/share_modal.html
index f39ce465a..733eb8e44 100644
--- a/gateway/sds_gateway/templates/users/partials/share_modal.html
+++ b/gateway/sds_gateway/templates/users/partials/share_modal.html
@@ -10,8 +10,10 @@
      aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="share-modal-label-{{ item.uuid }}">Share {{ item_type|title }}: {{ item.name }}</h5>
+            <div class="modal-header flex-nowrap gap-2">
+                <h5 class="modal-title text-truncate mb-0 min-w-0"
+                    id="share-modal-label-{{ item.uuid }}"
+                    title="Share {{ item_type|title }}: {{ item.name|default:'Unnamed' }}">Share {{ item_type|title }}: {{ item.name|default:"Unnamed" }}</h5>
                 <button type="button"
                         class="btn-close"
                         data-bs-dismiss="modal"
@@ -189,7 +191,6 @@ <h5 class="mb-1">
                                                                     <button class="btn btn-sm dropdown-toggle access-level-dropdown"
                                                                             type="button"
                                                                             data-bs-toggle="dropdown"
-                                                                            data-bs-popper="static"
                                                                             aria-expanded="false"
                                                                             data-user-email="{{ user.email }}"
                                                                             data-user-name="{{ user.name }}"
diff --git a/gateway/sds_gateway/templates/users/partials/step_1.html b/gateway/sds_gateway/templates/users/partials/step_1.html
index f6daa6f98..25b6ddbfa 100644
--- a/gateway/sds_gateway/templates/users/partials/step_1.html
+++ b/gateway/sds_gateway/templates/users/partials/step_1.html
@@ -12,14 +12,6 @@
                             </label>
                             {{ dataset_form.name }}
                         </div>
-                        <div class="form-group mt-4">
-                            <label for="{{ dataset_form.status.id_for_label }}" class="form-label">
-                                {{ dataset_form.status.label }}
-                                <span class="text-danger">*</span>
-                            </label>
-                            {{ dataset_form.status }}
-                            {% if dataset_form.status.help_text %}<div class="form-text">{{ dataset_form.status.help_text }}</div>{% endif %}
-                        </div>
                     {% else %}
                         <div class="form-group mt-4">
                             <label class="form-label">Dataset Name</label>
@@ -28,13 +20,6 @@
                                    value="{{ existing_dataset.name }}"
                                    readonly />
                         </div>
-                        <div class="form-group mt-4">
-                            <label class="form-label">Status</label>
-                            <input type="text"
-                                   class="form-control"
-                                   value="{{ existing_dataset.get_status_display }}"
-                                   readonly />
-                        </div>
                     {% endif %}
                 </div>
                 <div class="col-md-8">
diff --git a/gateway/sds_gateway/templates/users/partials/upload_capture_modal.html b/gateway/sds_gateway/templates/users/partials/upload_capture_modal.html
new file mode 100644
index 000000000..4bacf3f55
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/partials/upload_capture_modal.html
@@ -0,0 +1,98 @@
+<!-- Upload Capture Modal -->
+<div class="modal fade"
+id="uploadCaptureModal"
+tabindex="-1"
+aria-labelledby="uploadCaptureModalLabel"
+aria-hidden="true"
+data-check-file-url="{% url 'users:check_file_exists' %}"
+data-upload-url="{% url 'users:upload_capture' %}">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <form id="uploadCaptureForm" enctype="multipart/form-data">
+                {% csrf_token %}
+                <div class="modal-header">
+                    <h5 class="modal-title" id="uploadCaptureModalLabel">Upload Files & Create Capture</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <label for="captureFileInput" class="form-label">Select a folder to upload</label>
+                    <input type="file"
+                            id="captureFileInput"
+                            name="files"
+                            multiple
+                            webkitdirectory
+                            directory
+                            class="form-control" />
+                    {% if show_upload_zone %}
+                        {% include "users/partials/upload_capture_modal_files_extras.html" %}
+                    {% endif %}
+                    <div id="checkingProgressSection" class="mt-3 progress-section-hidden">
+                        <div class="d-flex align-items-center">
+                            <div class="spinner-border spinner-border-sm me-2" role="status">
+                                <span class="visually-hidden">Processing...</span>
+                            </div>
+                            <div class="flex-grow-1">
+                                <div class="progress progress-bar-custom">
+                                    <div id="checkingProgressBar"
+                                            class="progress-bar progress-bar-width-0"
+                                            role="progressbar"></div>
+                                </div>
+                            </div>
+                            <small class="ms-2 text-muted" id="checkingProgressText">0%</small>
+                        </div>
+                        <small class="text-muted" id="progressMessage">Processing files for upload...</small>
+                    </div>
+                    <div class="mt-3">
+                        <label for="captureTypeSelect" class="form-label">Capture Type</label>
+                        <select id="captureTypeSelect"
+                                name="capture_type"
+                                class="form-select"
+                                required>
+                            <option value="">Select capture type...</option>
+                            <option value="drf">DigitalRF</option>
+                            <option value="rh">RadioHound</option>
+                        </select>
+                        <div class="form-text">
+                            <strong>DigitalRF:</strong> For .h5/.hdf5 files with channel-based structure
+                            <br />
+                            <strong>RadioHound:</strong> For .rh.json files with scan group metadata
+                        </div>
+                    </div>
+                    <div id="channelInputGroup" class="mt-3 hidden-input-group">
+                        <label for="captureChannelsInput" class="form-label">Capture Channel Names (comma-separated)</label>
+                        <input type="text"
+                                id="captureChannelsInput"
+                                name="channels"
+                                class="form-control"
+                                placeholder="e.g. ch1,ch2,ch3" />
+                        <div class="form-text">Required for DigitalRF captures</div>
+                    </div>
+                    <div id="scanGroupInputGroup" class="mt-3 hidden-input-group">
+                        <label for="captureScanGroupInput" class="form-label">Scan Group</label>
+                        <input type="text"
+                                id="captureScanGroupInput"
+                                name="scan_group"
+                                class="form-control"
+                                placeholder="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" />
+                        <div class="form-text">For RadioHound captures, optional UUID</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary" id="uploadSubmitBtn">
+                        <span class="upload-text">Check & Upload Files</span>
+                        <span class="upload-spinner d-none">
+                            <span class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"></span>
+                            Uploading...
+                        </span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/gateway/sds_gateway/templates/users/partials/upload_capture_modal_files_extras.html b/gateway/sds_gateway/templates/users/partials/upload_capture_modal_files_extras.html
new file mode 100644
index 000000000..e9b55e6cb
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/partials/upload_capture_modal_files_extras.html
@@ -0,0 +1,13 @@
+{# Drag-and-drop zone and selected-file list (files page capture modal) #}
+<div class="upload-zone mt-2"
+     id="uploadZone"
+     aria-label="Drag and drop folder here">
+    <i class="material-icons upload-zone-icon">cloud_upload</i>
+    <div class="upload-zone-text">Drag and drop your folder here</div>
+    <div class="upload-zone-subtext">Or use the file picker above</div>
+</div>
+<div class="selected-files" id="selectedFiles">
+    <div class="selected-files-header">Selected Files:</div>
+    <ul class="selected-files-list" id="selectedFilesList">
+    </ul>
+</div>
diff --git a/gateway/sds_gateway/templates/users/partials/upload_result_modal.html b/gateway/sds_gateway/templates/users/partials/upload_result_modal.html
new file mode 100644
index 000000000..03be2abb1
--- /dev/null
+++ b/gateway/sds_gateway/templates/users/partials/upload_result_modal.html
@@ -0,0 +1,24 @@
+<!-- Upload Result Modal -->
+<div class="modal fade"
+id="uploadResultModal"
+tabindex="-1"
+aria-labelledby="uploadResultModalLabel"
+aria-hidden="true">
+    <div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title" id="uploadResultModalLabel">Upload Result</h5>
+            <button type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+        </div>
+        <div class="modal-body" id="uploadResultModalBody">
+            <!-- Content will be set by JS -->
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/gateway/sds_gateway/templates/users/partials/web_download_modal.html b/gateway/sds_gateway/templates/users/partials/web_download_modal.html
index b3d60d0f1..aabac6141 100644
--- a/gateway/sds_gateway/templates/users/partials/web_download_modal.html
+++ b/gateway/sds_gateway/templates/users/partials/web_download_modal.html
@@ -3,7 +3,19 @@
      id="webDownloadModal-{{ item.uuid }}"
      tabindex="-1"
      aria-labelledby="webDownloadModalLabel-{{ item.uuid }}"
-     aria-hidden="true">
+     aria-hidden="true"
+     {% if item_type == "capture" %}
+     data-item-type="capture"
+     data-item-uuid="{{ item.uuid }}"
+     data-length-of-capture-ms="{{ item.length_of_capture_ms|default:0 }}"
+     data-file-cadence-ms="{{ item.file_cadence_ms|default:1000 }}"
+     data-per-data-file-size="{{ item.data_files_info.per_data_file_size|default:0 }}"
+     data-total-data-file-size="{{ item.data_files_info.total_size|default:0 }}"
+     data-total-size="{{ item.total_file_size|default:0 }}"
+     data-data-files-count="{{ item.data_files_info.count|default:0 }}"
+     data-total-files-count="{{ item.files|length|default:0 }}"
+     data-capture-start-epoch-sec="{{ item.capture_start_epoch_sec|default:0 }}"
+     {% endif %}>
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/gateway/sds_gateway/templates/users/published_datasets_list.html b/gateway/sds_gateway/templates/users/published_datasets_list.html
index 0de596706..884054ce0 100644
--- a/gateway/sds_gateway/templates/users/published_datasets_list.html
+++ b/gateway/sds_gateway/templates/users/published_datasets_list.html
@@ -25,11 +25,11 @@ <h1 class="page-title mb-4">Search Published Datasets</h1>
             </div>
         </div>
     </div>
+    {% include "users/partials/asset_details_modal.html" %}
     <!-- Modals to reveal on click -->
     {% if page_obj %}
         {% for dataset in page_obj %}
             {% include "users/partials/web_download_modal.html" with item=dataset item_type="dataset" %}
-            {% include "users/partials/dataset_details_modal.html" with dataset=dataset %}
             {% include "users/partials/sdk_download_modal.html" with dataset=dataset %}
         {% endfor %}
     {% endif %}
@@ -38,7 +38,9 @@ <h1 class="page-title mb-4">Search Published Datasets</h1>
     {# djlint:off #}
     {{ block.super }}
     <!-- Action components -->
+    <script src="{% static 'js/actions/download/captureDownloadSlider.js' %}"></script>
     <script src="{% static 'js/actions/DownloadActionManager.js' %}"></script>
+    <script src="{% static 'js/constants/DetailsModalConfig.js' %}"></script>
     <script src="{% static 'js/actions/DetailsActionManager.js' %}"></script>
     <!-- Keyword chip input component -->
     <script src="{% static 'js/search/KeywordChipInput.js' %}"></script>
@@ -66,6 +68,8 @@ <h1 class="page-title mb-4">Search Published Datasets</h1>
             // Initialize the page lifecycle manager
             window.pageLifecycleManager = new PageLifecycleManager(pageConfig);
 
+            window.ModalManager?.initializeModal?.({ detailsClickDelegation: true });
+
             // Initialize keyword chip input
             if (typeof KeywordChipInputInitializer !== 'undefined') {
                 KeywordChipInputInitializer.autoInitialize();
diff --git a/gateway/sds_gateway/templates/users/search_datasets.html b/gateway/sds_gateway/templates/users/search_datasets.html
deleted file mode 100644
index 988669349..000000000
--- a/gateway/sds_gateway/templates/users/search_datasets.html
+++ /dev/null
@@ -1,265 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load custom_filters %}
-{% load tz %}
-
-{% block css %}
-    {{ block.super }}
-    <link rel="stylesheet" href="{% static 'css/permission-levels.css' %}" />
-{% endblock css %}
-{% block bodyclass %}
-    hero-white-page
-{% endblock bodyclass %}
-{% block content %}
-    {% csrf_token %}
-    <div class="content-wrapper">
-        <div class="main-content-area">
-            <div class="container mt-4">
-                <div class="d-flex justify-content-between align-items-center mb-4">
-                    <h1 class="page-title">Search Published Datasets</h1>
-                </div>
-                <hr />
-                <!-- Search Form -->
-                <div class="card mb-4">
-                    <div class="card-body">
-                        <form id="dataset-search-form"
-                              method="get"
-                              action="{% url 'users:search_datasets' %}">
-                            <div class="row g-3">
-                                <div class="col-md-6">
-                                    <label for="{{ search_form.query.id_for_label }}" class="form-label">{{ search_form.query.label }}</label>
-                                    {{ search_form.query }}
-                                    {% if search_form.query.help_text %}
-                                        <small class="form-text text-muted">{{ search_form.query.help_text }}</small>
-                                    {% endif %}
-                                </div>
-                                <div class="col-md-6">
-                                    <label for="{{ search_form.keywords.id_for_label }}" class="form-label">{{ search_form.keywords.label }}</label>
-                                    {{ search_form.keywords }}
-                                    {% if search_form.keywords.help_text %}
-                                        <small class="form-text text-muted">{{ search_form.keywords.help_text }}</small>
-                                    {% endif %}
-                                </div>
-                                <div class="col-md-6">
-                                    <label for="{{ search_form.min_frequency.id_for_label }}" class="form-label">
-                                        {{ search_form.min_frequency.label }}
-                                    </label>
-                                    {{ search_form.min_frequency }}
-                                    {% if search_form.min_frequency.help_text %}
-                                        <small class="form-text text-muted">{{ search_form.min_frequency.help_text }}</small>
-                                    {% endif %}
-                                </div>
-                                <div class="col-md-6">
-                                    <label for="{{ search_form.max_frequency.id_for_label }}" class="form-label">
-                                        {{ search_form.max_frequency.label }}
-                                    </label>
-                                    {{ search_form.max_frequency }}
-                                    {% if search_form.max_frequency.help_text %}
-                                        <small class="form-text text-muted">{{ search_form.max_frequency.help_text }}</small>
-                                    {% endif %}
-                                </div>
-                                <div class="col-12">
-                                    <button type="submit" class="btn btn-primary" id="search-button">
-                                        <i class="bi bi-search me-2"></i>Search
-                                    </button>
-                                    <a href="{% url 'users:search_datasets' %}"
-                                       class="btn btn-secondary ms-2"
-                                       id="clear-button">
-                                        <i class="bi bi-x-circle me-2"></i>Clear
-                                    </a>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <!-- Results count display -->
-                {% if page_obj.object_list %}
-                    <div class="d-flex justify-content-end mb-3">
-                        <span id="results-count" aria-live="polite" class="text-muted">
-                            {{ page_obj.paginator.count }} dataset{{ page_obj.paginator.count|pluralize }} found
-                        </span>
-                    </div>
-                {% endif %}
-                <!-- Results Table -->
-                <div id="search-results-container" class="table-and-pagination">
-                    <div class="table-container">
-                        <div class="table-responsive">
-                            {% if not page_obj or not page_obj.object_list %}
-                                <div class="alert alert-info" role="alert">
-                                    <h4 class="alert-heading">No datasets found</h4>
-                                    <p>
-                                        {% if search_form.query.value or search_form.keywords.value or search_form.min_frequency.value or search_form.max_frequency.value %}
-                                            Try adjusting your search criteria or <a href="{% url 'users:search_datasets' %}" class="alert-link">clear the filters</a> to see all published datasets.
-                                        {% else %}
-                                            There are no published datasets available yet.
-                                        {% endif %}
-                                    </p>
-                                </div>
-                            {% else %}
-                                <table class="table table-striped table-hover datasets-table-fixed">
-                                    <caption class="visually-hidden">Published datasets search results</caption>
-                                    <thead>
-                                        <tr>
-                                            <th scope="col" class="w-30">Dataset Name</th>
-                                            <th scope="col" class="w-25">Authors</th>
-                                            <th scope="col" class="w-20">Keywords</th>
-                                            <th scope="col" class="w-15">Created At</th>
-                                            <th scope="col" class="w-10">Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody id="search-results-tbody">
-                                        {% for dataset in page_obj %}
-                                            <tr class="clickable-row" data-dataset-uuid="{{ dataset.uuid }}">
-                                                <td class="text-nowrap">
-                                                    <a href="#"
-                                                       class="dataset-name-link"
-                                                       data-bs-toggle="modal"
-                                                       data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
-                                                       data-dataset-uuid="{{ dataset.uuid }}"
-                                                       aria-label="View details for {{ dataset.name }}">
-                                                        {{ dataset.name }}
-                                                    </a>
-                                                    {% if dataset.is_public %}<i class="bi bi-globe me-1 text-primary" title="Public"></i>{% endif %}
-                                                </td>
-                                                <td class="text-break">
-                                                    {% if dataset.authors %}
-                                                        {% for author in dataset.authors %}
-                                                            {% if forloop.counter <= 2 %}
-                                                                {% if author.name %}
-                                                                    {% if author.orcid_id %}
-                                                                        <a href="https://orcid.org/{{ author.orcid_id }}"
-                                                                           target="_blank"
-                                                                           rel="noopener noreferrer"
-                                                                           class="text-decoration-none"
-                                                                           title="View {{ author.name }}'s ORCID profile">
-                                                                            {{ author.name }}
-                                                                            <i class="bi bi-box-arrow-up-right text-muted sort-icon"></i>
-                                                                        </a>
-                                                                    {% else %}
-                                                                        {{ author.name }}
-                                                                    {% endif %}
-                                                                    {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
-                                                                {% else %}
-                                                                    {{ author }}
-                                                                    {% if not forloop.last and forloop.counter < 2 and dataset.authors|length > 1 %},{% endif %}
-                                                                {% endif %}
-                                                            {% endif %}
-                                                        {% endfor %}
-                                                        {% if dataset.authors|length > 2 %}<span class="text-muted">...</span>{% endif %}
-                                                    {% else %}
-                                                        -
-                                                    {% endif %}
-                                                </td>
-                                                <td class="text-break">
-                                                    {% if dataset.keywords %}
-                                                        {% for keyword in dataset.keywords.all|slice:":3" %}
-                                                            <span class="badge bg-secondary me-1">{{ keyword.name }}</span>
-                                                        {% endfor %}
-                                                        {% if dataset.keywords.count > 3 %}<span class="text-muted">...</span>{% endif %}
-                                                    {% else %}
-                                                        -
-                                                    {% endif %}
-                                                </td>
-                                                <td class="text-nowrap">
-                                                    {% if dataset.dataset.created_at %}
-                                                        {% localtime on %}
-                                                        <div class="d-flex align-items-center gap-2">
-                                                            <span class="bg-transparent pe-2">{{ dataset.dataset.created_at|date:"Y-m-d" }}</span>
-                                                            <span class="text-muted bg-transparent">{{ dataset.dataset.created_at|date:"H:i:s T" }}</span>
-                                                        </div>
-                                                    {% endlocaltime %}
-                                                {% else %}
-                                                    -
-                                                {% endif %}
-                                            </td>
-                                            <td>
-                                                <button class="btn btn-sm btn-outline-primary dataset-name-link"
-                                                        data-bs-toggle="modal"
-                                                        data-bs-target="#datasetDetailsModal-{{ dataset.uuid }}"
-                                                        data-dataset-uuid="{{ dataset.uuid }}"
-                                                        aria-label="View details for {{ dataset.name }}">
-                                                    <i class="bi bi-eye"></i> View
-                                                </button>
-                                            </td>
-                                        </tr>
-                                    {% endfor %}
-                                </tbody>
-                            </table>
-                        {% endif %}
-                    </div>
-                </div>
-                <!-- Pagination -->
-                {% if page_obj and page_obj.has_other_pages %}
-                    <nav aria-label="Search results pagination" class="mt-4">
-                        <ul class="pagination justify-content-center">
-                            {% if page_obj.has_previous %}
-                                <li class="page-item">
-                                    <a class="page-link"
-                                       href="?page=1{% if search_form.query.value %}&query={{ search_form.query.value|urlencode }}{% endif %}{% if search_form.keywords.value %}&keywords={{ search_form.keywords.value|urlencode }}{% endif %}{% if search_form.min_frequency.value %}&min_frequency={{ search_form.min_frequency.value }}{% endif %}{% if search_form.max_frequency.value %}&max_frequency={{ search_form.max_frequency.value }}{% endif %}">First</a>
-                                </li>
-                                <li class="page-item">
-                                    <a class="page-link"
-                                       href="?page={{ page_obj.previous_page_number }}{% if search_form.query.value %}&query={{ search_form.query.value|urlencode }}{% endif %}{% if search_form.keywords.value %}&keywords={{ search_form.keywords.value|urlencode }}{% endif %}{% if search_form.min_frequency.value %}&min_frequency={{ search_form.min_frequency.value }}{% endif %}{% if search_form.max_frequency.value %}&max_frequency={{ search_form.max_frequency.value }}{% endif %}">Previous</a>
-                                </li>
-                            {% else %}
-                                <li class="page-item disabled">
-                                    <span class="page-link">First</span>
-                                </li>
-                                <li class="page-item disabled">
-                                    <span class="page-link">Previous</span>
-                                </li>
-                            {% endif %}
-                            <li class="page-item active">
-                                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
-                            </li>
-                            {% if page_obj.has_next %}
-                                <li class="page-item">
-                                    <a class="page-link"
-                                       href="?page={{ page_obj.next_page_number }}{% if search_form.query.value %}&query={{ search_form.query.value|urlencode }}{% endif %}{% if search_form.keywords.value %}&keywords={{ search_form.keywords.value|urlencode }}{% endif %}{% if search_form.min_frequency.value %}&min_frequency={{ search_form.min_frequency.value }}{% endif %}{% if search_form.max_frequency.value %}&max_frequency={{ search_form.max_frequency.value }}{% endif %}">Next</a>
-                                </li>
-                                <li class="page-item">
-                                    <a class="page-link"
-                                       href="?page={{ page_obj.paginator.num_pages }}{% if search_form.query.value %}&query={{ search_form.query.value|urlencode }}{% endif %}{% if search_form.keywords.value %}&keywords={{ search_form.keywords.value|urlencode }}{% endif %}{% if search_form.min_frequency.value %}&min_frequency={{ search_form.min_frequency.value }}{% endif %}{% if search_form.max_frequency.value %}&max_frequency={{ search_form.max_frequency.value }}{% endif %}">Last</a>
-                                </li>
-                            {% else %}
-                                <li class="page-item disabled">
-                                    <span class="page-link">Next</span>
-                                </li>
-                                <li class="page-item disabled">
-                                    <span class="page-link">Last</span>
-                                </li>
-                            {% endif %}
-                        </ul>
-                    </nav>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Dataset details modals (IDs must match data-bs-target on each row) -->
-{% if page_obj %}
-    {% for dataset in page_obj %}
-        {% include "users/partials/dataset_details_modal.html" with dataset=dataset %}
-    {% endfor %}
-{% endif %}
-{% block javascript %}
-    {{ block.super }}
-    <script src="{% static 'js/search/DatasetSearchHandler.js' %}"></script>
-    <script>
-        // Initialize search handler when DOM is ready
-        document.addEventListener('DOMContentLoaded', function() {
-            if (typeof DatasetSearchHandler !== 'undefined') {
-                window.datasetSearchHandler = new DatasetSearchHandler({
-                    searchFormId: 'dataset-search-form',
-                    searchButtonId: 'search-button',
-                    clearButtonId: 'clear-button',
-                    resultsContainerId: 'search-results-container',
-                    resultsTbodyId: 'search-results-tbody',
-                    resultsCountId: 'results-count'
-                });
-            }
-        });
-    </script>
-{% endblock javascript %}
-{% endblock content %}
diff --git a/gateway/sds_gateway/templates/users/share_group_list.html b/gateway/sds_gateway/templates/users/share_group_list.html
index b8a2451d0..fc25de8fc 100644
--- a/gateway/sds_gateway/templates/users/share_group_list.html
+++ b/gateway/sds_gateway/templates/users/share_group_list.html
@@ -36,6 +36,7 @@ <h5 class="mb-0">{% translate "Your Share Groups" %}</h5>
 {% block javascript %}
     {{ block.super }}
     <!-- Share components -->
+    <script src="{% static 'js/share/UserSearchDropdown.js' %}"></script>
     <script src="{% static 'js/share/ShareGroupManager.js' %}"></script>
     <script src="{% static 'js/actions/ShareActionManager.js' %}"></script>
     <script>
diff --git a/gateway/sds_gateway/templates/users/temporary_zip_download.html b/gateway/sds_gateway/templates/users/temporary_zip_download.html
index 2f5226cb5..976a6f8bd 100644
--- a/gateway/sds_gateway/templates/users/temporary_zip_download.html
+++ b/gateway/sds_gateway/templates/users/temporary_zip_download.html
@@ -107,22 +107,8 @@ <h4>Download Not Available</h4>
         }
 
         function showAlertAndRedirect(type, message) {
-            // Determine the appropriate redirect URL and alert key based on the filename
-            const filename = "{{ temp_zip.filename }}";
-            let redirectUrl;
-            let alertKey;
-
-            if (filename.startsWith("dataset_")) {
-                redirectUrl = "{% url 'users:dataset_list' %}";
-                alertKey = "datasetDownloadAlert";
-            } else if (filename.startsWith("capture_")) {
-                redirectUrl = "{% url 'users:capture_list' %}";
-                alertKey = "captureDownloadAlert";
-            } else {
-                // Default to dataset list if we can't determine the type
-                redirectUrl = "{% url 'users:dataset_list' %}";
-                alertKey = "datasetDownloadAlert";
-            }
+            const redirectUrl = "{{ post_download_redirect_url|escapejs }}";
+            const alertKey = "{{ post_download_alert_key|escapejs }}";
 
             sessionStorage.setItem(alertKey, JSON.stringify({
                 type: type,
diff --git a/gateway/sds_gateway/templates/users/user_api_key.html b/gateway/sds_gateway/templates/users/user_api_key.html
index dd83cf7b8..d4cf9021e 100644
--- a/gateway/sds_gateway/templates/users/user_api_key.html
+++ b/gateway/sds_gateway/templates/users/user_api_key.html
@@ -118,7 +118,6 @@ <h1 id="current-api-keys-section" class="page-title">API Keys</h1>
                                                             type="button"
                                                             id="actionDropdown{{ key.id }}"
                                                             data-bs-toggle="dropdown"
-                                                            data-bs-popper="static"
                                                             aria-expanded="false">
                                                         <i class="bi bi-three-dots-vertical"></i>
                                                     </button>
diff --git a/gateway/sds_gateway/users/forms.py b/gateway/sds_gateway/users/forms.py
index 4d00998ff..c924a8cae 100644
--- a/gateway/sds_gateway/users/forms.py
+++ b/gateway/sds_gateway/users/forms.py
@@ -15,6 +15,7 @@
 from loguru import logger
 
 from sds_gateway.api_methods.models import Dataset
+from sds_gateway.api_methods.models import DatasetStatus
 from sds_gateway.api_methods.models import File
 
 from .models import User
@@ -280,6 +281,17 @@ def clean_description(self):
         """Clean and validate the description."""
         return self.cleaned_data.get("description", "").strip()
 
+    def clean(self):
+        cleaned_data = super().clean()
+        status = cleaned_data.get("status") or DatasetStatus.DRAFT
+        is_public = cleaned_data.get("is_public", False)
+        if is_public and status != DatasetStatus.FINAL:
+            raise ValidationError(
+                "Draft datasets cannot be made public. Set status to Final on the "
+                "Publishing step before making the dataset public.",
+            )
+        return cleaned_data
+
 
 class CaptureSearchForm(forms.Form):
     directory = forms.CharField(
diff --git a/gateway/sds_gateway/users/mixins.py b/gateway/sds_gateway/users/mixins.py
index 35ffb4474..88599a5af 100644
--- a/gateway/sds_gateway/users/mixins.py
+++ b/gateway/sds_gateway/users/mixins.py
@@ -240,8 +240,11 @@ def serialize_item(
         relative_path: str | None = None,
     ) -> dict[str, Any]:
         if isinstance(item, Capture):
-            # Use utility function for consistent composite capture serialization
-            return serialize_composite_capture_for_display(item)
+            ctx: dict[str, Any] | None = None
+            request = getattr(self, "request", None)
+            if request is not None:
+                ctx = {"request": request, "exclude_files": True}
+            return serialize_composite_capture_for_display(item, context=ctx)
         if isinstance(item, File):
             return {
                 "id": item.uuid,
diff --git a/gateway/sds_gateway/users/tests/test_details_modal_registry.py b/gateway/sds_gateway/users/tests/test_details_modal_registry.py
new file mode 100644
index 000000000..1fba3ca6e
--- /dev/null
+++ b/gateway/sds_gateway/users/tests/test_details_modal_registry.py
@@ -0,0 +1,160 @@
+"""Unit tests for details modal registry helpers."""
+
+from __future__ import annotations
+
+import pytest
+
+from sds_gateway.users.views import details_modal_registry as reg
+
+pytestmark = pytest.mark.django_db
+
+
+class TestFormatChannelMetadataValue:
+    def test_none_returns_na(self) -> None:
+        assert reg.format_channel_metadata_value(None) == "N/A"
+
+    def test_bool_and_string_booleans(self) -> None:
+        assert reg.format_channel_metadata_value(True) == "Yes"
+        assert reg.format_channel_metadata_value(False) == "No"
+        assert reg.format_channel_metadata_value("true") == "Yes"
+        assert reg.format_channel_metadata_value("FALSE") == "No"
+
+    def test_plain_string(self) -> None:
+        assert reg.format_channel_metadata_value("hello") == "hello"
+
+    def test_timestamp_seconds(self) -> None:
+        # 2000-01-01 00:00:00 UTC
+        result = reg.format_channel_metadata_value(946684800, "computer_time")
+        assert "2000" in result
+        assert "UTC" in result
+
+    def test_frequency_mhz(self) -> None:
+        assert "MHz" in reg.format_channel_metadata_value(2_500_000)
+
+    def test_frequency_ghz(self) -> None:
+        assert "GHz" in reg.format_channel_metadata_value(2_500_000_000)
+
+    def test_list_joins(self) -> None:
+        assert reg.format_channel_metadata_value([1, 2]) == "1, 2"
+
+    def test_dict_json(self) -> None:
+        out = reg.format_channel_metadata_value({"a": 1})
+        assert '"a": 1' in out or '"a":1' in out.replace(" ", "")
+
+
+class TestBuildChannelMetadataRows:
+    def test_skips_none_values(self) -> None:
+        rows = reg.build_channel_metadata_rows({"keep": "x", "drop": None})
+        assert len(rows) == 1
+        assert rows[0]["label"] == "Keep"
+
+    def test_empty_metadata(self) -> None:
+        assert reg.build_channel_metadata_rows(None) == []
+        assert reg.build_channel_metadata_rows({}) == []
+
+
+class TestCaptureDetailsHelpers:
+    def test_capture_details_title_precedence(self) -> None:
+        assert reg.capture_details_title({"name": "N"}) == "N"
+        assert reg.capture_details_title({"top_level_dir": "/dir"}) == "/dir"
+        assert reg.capture_details_title({}) == "Unnamed Capture"
+
+    def test_capture_details_meta_drf(self) -> None:
+        meta = reg.capture_details_meta(
+            {"capture_type": "drf", "uuid": "u1", "name": "Cap"}
+        )
+        assert meta["visualize_enabled"] is True
+        assert meta["capture_type"] == "drf"
+        assert meta["uuid"] == "u1"
+
+    def test_capture_details_meta_non_drf(self) -> None:
+        meta = reg.capture_details_meta({"capture_type": "rh"})
+        assert meta["visualize_enabled"] is False
+
+    def test_owner_display(self) -> None:
+        assert reg._owner_display({"owner": {"email": "a@b.com"}}) == "a@b.com"
+        assert reg._owner_display({}) == "N/A"
+
+    def test_dataset_display(self) -> None:
+        assert reg._dataset_display({"datasets": [{"name": "D1"}]}) == "D1"
+        assert reg._dataset_display({"dataset": "legacy"}) == "legacy"
+        assert reg._dataset_display({}) == "N/A"
+
+    def test_center_frequency_display(self) -> None:
+        assert reg._center_frequency_display({"center_frequency_ghz": 2.5}) == (
+            "2.500 GHz"
+        )
+        assert reg._center_frequency_display({"center_frequency_ghz": None}) == "N/A"
+
+    def test_channel_summary_single(self) -> None:
+        cap = {"is_multi_channel": False, "channel": "ch0"}
+        assert reg._channel_summary_label(cap) == "Channel"
+        assert reg._channel_summary_value(cap) == "ch0"
+
+    def test_channel_summary_multi(self) -> None:
+        cap = {
+            "is_multi_channel": True,
+            "channels": [{"channel": "a"}, {"channel": "b"}],
+        }
+        assert reg._channel_summary_label(cap) == "Channels"
+        assert reg._channel_summary_value(cap) == "a, b"
+
+    def test_accordion_channels_empty_for_single(self) -> None:
+        assert reg._accordion_channels({"is_multi_channel": False}) == []
+
+    def test_accordion_channels_multi(self) -> None:
+        cap = {
+            "is_multi_channel": True,
+            "channels": [
+                {"channel": "ch1", "channel_metadata": {"gain": 1}},
+            ],
+        }
+        acc = reg._accordion_channels(cap)
+        assert len(acc) == 1
+        assert acc[0]["channel_name"] == "ch1"
+        assert acc[0]["metadata_rows"]
+
+
+class TestCaptureFileSummaryFromDict:
+    def test_uses_total_file_fields(self) -> None:
+        count, size = reg._capture_file_summary_from_dict(
+            {"total_file_count": 5, "total_file_size": 1000},
+        )
+        assert count == 5
+        assert size == 1000
+
+    def test_falls_back_to_data_files_info(self) -> None:
+        count, size = reg._capture_file_summary_from_dict(
+            {"data_files_info": {"total_count": 3, "total_size": 500}},
+        )
+        assert count == 3
+        assert size == 500
+
+
+class TestFinalizeModalJson:
+    def test_finalize_capture_modal_json(self) -> None:
+        ctx = {"capture": {"name": "C", "capture_type": "drf", "uuid": "id"}}
+        out = reg.finalize_capture_modal_json(ctx, "<p>x</p>")
+        assert out["html"] == "<p>x</p>"
+        assert out["title"] == "C"
+        assert out["meta"]["visualize_enabled"] is True
+
+    def test_finalize_dataset_modal_json_with_version(self) -> None:
+        ctx = {"dataset": {"name": "DS", "version": 3, "uuid": "d1"}}
+        out = reg.finalize_dataset_modal_json(ctx, "<div/>")
+        assert out["title"] == "DS (v3)"
+        assert out["meta"]["uuid"] == "d1"
+
+    def test_finalize_dataset_modal_json_without_version(self) -> None:
+        ctx = {"dataset": {"name": "DS", "uuid": "d1"}}
+        out = reg.finalize_dataset_modal_json(ctx, "")
+        assert out["title"] == "DS"
+
+
+class TestRegistryConsistency:
+    def test_registered_asset_types_align(self) -> None:
+        types = reg.get_registered_asset_types()
+        assert types == frozenset({"capture", "dataset"})
+        assert set(reg.DETAILS_MODAL_REGISTRY) == set(types)
+        assert set(reg.DETAILS_MODAL_BODY_TEMPLATES) == set(types)
+        assert set(reg.DETAILS_MODAL_JSON_BUILDERS) == set(types)
diff --git a/gateway/sds_gateway/users/tests/test_views.py b/gateway/sds_gateway/users/tests/test_views.py
index 07c3cb406..a38d73df1 100644
--- a/gateway/sds_gateway/users/tests/test_views.py
+++ b/gateway/sds_gateway/users/tests/test_views.py
@@ -25,8 +25,11 @@
 from sds_gateway.api_methods.models import Dataset
 from sds_gateway.api_methods.models import DatasetStatus
 from sds_gateway.api_methods.models import ItemType
+from sds_gateway.api_methods.models import PermissionLevel
 from sds_gateway.api_methods.models import UserSharePermission
+from sds_gateway.api_methods.tests.factories import CaptureFactory
 from sds_gateway.api_methods.tests.factories import DatasetFactory
+from sds_gateway.api_methods.tests.factories import UserSharePermissionFactory
 from sds_gateway.users.forms import UserAdminChangeForm
 from sds_gateway.users.models import User
 from sds_gateway.users.tests.factories import UserFactory
@@ -731,8 +734,8 @@ def test_render_fragment_without_authentication(self, client: Client) -> None:
         """Unauthenticated users can render HTML fragments."""
         url = reverse("users:render_html")
         data = {
-            "template": "users/components/modal_file_tree.html",
-            "context": {"rows": []},
+            "template": "users/components/empty_table_row.html",
+            "context": {"colspan": 3, "message": "No items"},
         }
 
         response = client.post(
@@ -752,8 +755,8 @@ def test_render_fragment_with_authentication(
         client.force_login(user)
         url = reverse("users:render_html")
         data = {
-            "template": "users/components/modal_file_tree.html",
-            "context": {"rows": []},
+            "template": "users/components/empty_table_row.html",
+            "context": {"colspan": 3, "message": "No items"},
         }
 
         response = client.post(
@@ -855,7 +858,7 @@ def test_renders_with_empty_context(self, client: Client) -> None:
         """Templates can be rendered with empty context."""
         url = reverse("users:render_html")
         data = {
-            "template": "users/components/modal_file_tree.html",
+            "template": "users/components/empty_table_row.html",
             "context": {},
         }
 
@@ -876,21 +879,10 @@ def test_context_data_is_properly_escaped(self, client: Client) -> None:
         # Attempt XSS through context data
         malicious_data = "<script>alert('XSS')</script>"
         data = {
-            "template": "users/components/modal_file_tree.html",
+            "template": "users/components/empty_table_row.html",
             "context": {
-                "rows": [
-                    {
-                        "name": malicious_data,
-                        "type": "File",
-                        "size": "1 MB",
-                        "created_at": "2024-01-01",
-                        "icon": "bi-file",
-                        "icon_color": "text-primary",
-                        "indent_level": 0,
-                        "indent_range": [],
-                        "has_chevron": False,
-                    }
-                ]
+                "colspan": 2,
+                "message": malicious_data,
             },
         }
 
@@ -909,36 +901,27 @@ def test_context_data_is_properly_escaped(self, client: Client) -> None:
         # Make sure raw script tag is NOT present
         assert "<script>alert" not in html
 
-    def test_multiple_rows_in_file_tree(self, client: Client) -> None:
-        """Can render multiple file tree rows."""
+    def test_renders_table_rows_component(self, client: Client) -> None:
+        """Can render generic table_rows with multiple text cells."""
         url = reverse("users:render_html")
         data = {
-            "template": "users/components/modal_file_tree.html",
+            "template": "users/components/table_rows.html",
             "context": {
                 "rows": [
                     {
-                        "name": "file1.txt",
-                        "type": "File",
-                        "size": "1 MB",
-                        "created_at": "2024-01-01",
-                        "icon": "bi-file",
-                        "icon_color": "text-primary",
-                        "indent_level": 0,
-                        "indent_range": [],
-                        "has_chevron": False,
+                        "cells": [
+                            {"kind": "text", "value": "file1.txt"},
+                            {"kind": "text", "value": "1 MB"},
+                        ],
                     },
                     {
-                        "name": "file2.txt",
-                        "type": "File",
-                        "size": "2 MB",
-                        "created_at": "2024-01-02",
-                        "icon": "bi-file",
-                        "icon_color": "text-success",
-                        "indent_level": 1,
-                        "indent_range": [0],
-                        "has_chevron": False,
+                        "cells": [
+                            {"kind": "text", "value": "file2.txt"},
+                            {"kind": "text", "value": "2 MB"},
+                        ],
                     },
-                ]
+                ],
+                "empty_colspan": 2,
             },
         }
 
@@ -952,6 +935,204 @@ def test_multiple_rows_in_file_tree(self, client: Client) -> None:
         payload = response.json()
         html = payload["html"]
 
-        # Both files should appear in rendered HTML
         assert "file1.txt" in html
         assert "file2.txt" in html
+
+
+class TestDetailsModalFragmentView:
+    """Tests for GET /users/details-modal/<asset_type>/<uuid>/."""
+
+    @pytest.fixture
+    def client(self) -> Client:
+        return Client()
+
+    @pytest.fixture
+    def user(self) -> User:
+        return cast("User", UserFactory(is_approved=True))
+
+    def test_anonymous_redirects_to_login(
+        self, client: Client, user: User
+    ) -> None:
+        cap = CaptureFactory(owner=user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.FOUND
+
+    def test_owner_receives_modal_payload(self, client: Client, user: User) -> None:
+        cap = CaptureFactory(owner=user, name="modal-test-cap")
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.OK
+        payload = response.json()
+        assert "html" in payload
+        assert "title" in payload
+        assert "meta" in payload
+        assert "capture-name-input" in payload["html"]
+        assert payload["meta"]["uuid"] == str(cap.uuid)
+
+    def test_non_owner_not_found(self, client: Client, user: User) -> None:
+        owner = cast("User", UserFactory(is_approved=True))
+        cap = CaptureFactory(owner=owner)
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.NOT_FOUND
+
+    def test_unknown_asset_type(self, client: Client, user: User) -> None:
+        cap = CaptureFactory(owner=user)
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "unknown", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.NOT_FOUND
+
+    def test_anonymous_public_dataset_modal_ok(
+        self, client: Client, user: User
+    ) -> None:
+        ds = DatasetFactory(
+            owner=user,
+            is_public=True,
+            status=DatasetStatus.FINAL,
+            keywords=None,
+        )
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "dataset", "uuid": str(ds.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.OK
+        payload = response.json()
+        assert "html" in payload
+        assert "dataset-details-name" in payload["html"]
+
+    def test_anonymous_private_dataset_modal_not_found(
+        self, client: Client, user: User
+    ) -> None:
+        ds = DatasetFactory(owner=user, is_public=False, keywords=None)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "dataset", "uuid": str(ds.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.NOT_FOUND
+
+    def test_owner_dataset_modal_ok(self, client: Client, user: User) -> None:
+        ds = DatasetFactory(owner=user, keywords=None)
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "dataset", "uuid": str(ds.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.OK
+        assert "dataset-details-name" in response.json()["html"]
+
+    def test_shared_capture_modal_ok(self, client: Client, user: User) -> None:
+        owner = cast("User", UserFactory(is_approved=True))
+        cap = CaptureFactory(owner=owner, name="shared-cap")
+        UserSharePermissionFactory(
+            owner=owner,
+            shared_with=user,
+            item_type=ItemType.CAPTURE,
+            item_uuid=cap.uuid,
+            permission_level=PermissionLevel.VIEWER,
+        )
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.OK
+        assert response.json()["meta"]["uuid"] == str(cap.uuid)
+
+    def test_deleted_capture_not_found(self, client: Client, user: User) -> None:
+        cap = CaptureFactory(owner=user, is_deleted=True)
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.NOT_FOUND
+
+    def test_capture_meta_visualize_enabled_for_drf(
+        self, client: Client, user: User
+    ) -> None:
+        cap = CaptureFactory(owner=user, capture_type="drf")
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        payload = client.get(url).json()
+        assert payload["meta"]["visualize_enabled"] is True
+        assert payload["meta"]["capture_type"] == "drf"
+
+    def test_capture_meta_visualize_disabled_for_non_drf(
+        self, client: Client, user: User
+    ) -> None:
+        cap = CaptureFactory(owner=user, capture_type="rh", index_name="captures-rh")
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+        )
+        payload = client.get(url).json()
+        assert payload["meta"]["visualize_enabled"] is False
+
+    def test_dataset_modal_title_includes_version(
+        self, client: Client, user: User
+    ) -> None:
+        ds = DatasetFactory(owner=user, name="My DS", version=7, keywords=None)
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "dataset", "uuid": str(ds.uuid)},
+        )
+        payload = client.get(url).json()
+        assert payload["title"] == "My DS (v7)"
+
+    def test_shared_private_dataset_modal_ok(
+        self, client: Client, user: User
+    ) -> None:
+        owner = cast("User", UserFactory(is_approved=True))
+        ds = DatasetFactory(owner=owner, is_public=False, keywords=None)
+        UserSharePermissionFactory(
+            owner=owner,
+            shared_with=user,
+            item_type=ItemType.DATASET,
+            item_uuid=ds.uuid,
+            permission_level=PermissionLevel.VIEWER,
+        )
+        client.force_login(user)
+        url = reverse(
+            "users:details_modal_fragment",
+            kwargs={"asset_type": "dataset", "uuid": str(ds.uuid)},
+        )
+        response = client.get(url)
+        assert response.status_code == HTTPStatus.OK
+
+    def test_anonymous_dataset_still_ok_capture_requires_login(
+        self, client: Client, user: User
+    ) -> None:
+        cap = CaptureFactory(owner=user)
+        response = client.get(
+            reverse(
+                "users:details_modal_fragment",
+                kwargs={"asset_type": "capture", "uuid": str(cap.uuid)},
+            ),
+        )
+        assert response.status_code == HTTPStatus.FOUND
diff --git a/gateway/sds_gateway/users/urls.py b/gateway/sds_gateway/users/urls.py
index 2afa5e067..fde3748f4 100644
--- a/gateway/sds_gateway/users/urls.py
+++ b/gateway/sds_gateway/users/urls.py
@@ -17,6 +17,7 @@
 from .views import revoke_api_key_view
 from .views import user_api_key_view
 from .views import user_captures_api_view
+from .views import details_modal_fragment_view
 from .views import user_dataset_details_view
 from .views import user_dataset_list_view
 from .views import user_dataset_versioning_view
@@ -85,6 +86,11 @@
     ),
     path("search-datasets/", user_search_datasets_view, name="search_datasets"),
     path("dataset-details/", user_dataset_details_view, name="dataset_details"),
+    path(
+        "details-modal/<str:asset_type>/<uuid:uuid>/",
+        details_modal_fragment_view,
+        name="details_modal_fragment",
+    ),
     path("render-html/", render_html_fragment_view, name="render_html"),
     path("group-captures/", user_group_captures_view, name="group_captures"),
     path(
diff --git a/gateway/sds_gateway/users/utils.py b/gateway/sds_gateway/users/utils.py
index 27802b0dd..c78f63f90 100644
--- a/gateway/sds_gateway/users/utils.py
+++ b/gateway/sds_gateway/users/utils.py
@@ -51,18 +51,23 @@ def deduplicate_composite_captures(captures: list[Capture]) -> list[Capture]:
     return unique_captures
 
 
-def serialize_composite_capture_for_display(capture: Capture) -> dict[str, Any]:
+def serialize_composite_capture_for_display(
+    capture: Capture,
+    *,
+    context: dict[str, Any] | None = None,
+) -> dict[str, Any]:
     """
     Serialize a capture (single or composite) for display in templates and JavaScript.
 
     Args:
         capture: Capture object to serialize
+        context: Optional serializer context (e.g. ``request``, ``exclude_files``)
 
     Returns:
         Dictionary with serialized capture data for display
     """
     # Use composite capture serialization to get proper details
-    serialized_data = serialize_capture_or_composite(capture)
+    serialized_data = serialize_capture_or_composite(capture, context=context)
 
     # Extract owner information
     owner_data = serialized_data.get("owner", {})
diff --git a/gateway/sds_gateway/users/views/__init__.py b/gateway/sds_gateway/users/views/__init__.py
index 2af01c9d1..fc30a8dc7 100644
--- a/gateway/sds_gateway/users/views/__init__.py
+++ b/gateway/sds_gateway/users/views/__init__.py
@@ -55,11 +55,9 @@
 from .files import FileDownloadView
 from .files import FileH5InfoView
 from .files import FilesView
-from .files import ListFilesView
 from .files import files_view
 from .files import user_check_file_exists_view
 from .files import user_file_detail_view
-from .files import user_file_list_view
 
 # Share group views
 from .share_groups import ShareGroupListView
@@ -87,6 +85,7 @@
 from .user_profile import user_update_view
 
 # Utility views
+from .details_modal import details_modal_fragment_view
 from .utilities import RenderHTMLFragmentView
 from .utilities import render_html_fragment_view
 
@@ -97,6 +96,7 @@
     "CheckFileExistsView",
     "DatasetDetailsView",
     "DatasetVersioningView",
+    "details_modal_fragment_view",
     "DownloadItemView",
     "FileContentView",
     "FileDetailView",
@@ -110,7 +110,6 @@
     "KeywordAutocompleteAPIView",
     "ListCapturesView",
     "ListDatasetsView",
-    "ListFilesView",
     "NewAPIKeyView",
     "QuickAddCaptureToDatasetView",
     "RenderHTMLFragmentView",
@@ -148,7 +147,6 @@
     "user_detail_view",
     "user_download_item_view",
     "user_file_detail_view",
-    "user_file_list_view",
     "user_group_captures_view",
     "user_publish_dataset_view",
     "user_redirect_view",
diff --git a/gateway/sds_gateway/users/views/captures.py b/gateway/sds_gateway/users/views/captures.py
index 5aff696d1..76f87da7c 100644
--- a/gateway/sds_gateway/users/views/captures.py
+++ b/gateway/sds_gateway/users/views/captures.py
@@ -15,6 +15,7 @@
 from django.http import HttpResponse
 from django.http import JsonResponse
 from django.shortcuts import render
+from django.template.loader import render_to_string
 from django.views import View
 from loguru import logger as log
 from rest_framework import status
@@ -68,6 +69,64 @@ def _parse_items_per_page(
     return min(n, max_items)
 
 
+def _capture_list_dropdown_menu_items(row: dict[str, Any]) -> list[dict[str, Any]]:
+    """Build dropdown_menu.html items for a serialized capture list row."""
+    uuid = str(row.get("uuid") or "")
+    if not uuid:
+        return []
+    
+    is_owner = row.get("is_owner")
+    permission_level = row.get("permission_level")
+    is_contributor = permission_level == PermissionLevel.CONTRIBUTOR
+    is_co_owner = permission_level == PermissionLevel.CO_OWNER
+    
+    items: list[dict[str, Any]] = []
+    if is_owner:
+        display_name = (
+            str(row.get("name") or "").strip()
+            or str(row.get("top_level_dir") or "").strip()
+            or "Capture"
+        )
+        items.append(
+            {
+                "label": "Add to dataset",
+                "icon": "folder-plus",
+                "type": "button",
+                "extra_class": "add-to-dataset-btn",
+                "data_attrs": {
+                    "capture-uuid": uuid,
+                    "capture-name": display_name[:200],
+                },
+            }
+        )
+
+    if is_owner or is_contributor or is_co_owner:
+        items.extend(
+            (
+                {
+                    "label": "Share",
+                    "icon": "person-plus",
+                    "type": "button",
+                    "modal_toggle": True,
+                    "modal_target": f"#shareModal-{uuid}",
+                    "data_attrs": {},
+                },
+            )
+        )
+
+    items.append(
+        {
+            "label": "Download",
+            "icon": "download",
+            "type": "button",
+            "modal_toggle": True,
+            "modal_target": f"#webDownloadModal-{uuid}",
+            "data_attrs": {},
+        }
+    )
+    return items
+
+
 def _get_captures_for_template(
     captures: QuerySet[Capture] | list[Capture] | Page[Capture],
     request: HttpRequest,
@@ -83,11 +142,16 @@ def _get_captures_for_template(
         # Add ownership flags for template display
         capture_data["is_owner"] = capture.owner == request.user
         capture_data["is_shared_with_me"] = capture.owner != request.user
+        if capture_data["is_owner"] and not capture_data.get("permission_level"):
+            capture_data["permission_level"] = PermissionLevel.OWNER
         capture_data["owner_name"] = capture.owner.name or "Owner"
         capture_data["owner_email"] = capture.owner.email or ""
 
         # Add the original model instance for template use
         capture_data["capture"] = capture
+        capture_data["dropdown_menu_items"] = _capture_list_dropdown_menu_items(
+            capture_data,
+        )
 
         # Add shared users data for share modal
         if user_has_access_to_item(request.user, capture.uuid, ItemType.CAPTURE):
@@ -436,10 +500,22 @@ def _get_filtered_and_sorted_captures(
     return unique_captures
 
 
+CAPTURES_LIST_TABLE_HEADERS = [
+    {"label": "", "col_class": "capture-col-select", "aria_label": "Select"},
+    {"label": "Name", "col_class": "capture-col-name"},
+    {"label": "Directory", "col_class": "capture-col-directory"},
+    {"label": "Type", "col_class": "capture-col-type"},
+    {"label": "Created", "col_class": "capture-col-created"},
+    {"label": "Actions", "col_class": "capture-col-actions", "text_align": "center"},
+]
+CAPTURES_LIST_TABLE_CLASS = "capture-list-table"
+CAPTURES_LIST_NO_ASSETS_MESSAGE = "No captures yet. Create one with Upload Capture."
+
+
 class ListCapturesView(Auth0LoginRequiredMixin, View):
     """Handle HTML requests for the captures list page."""
 
-    template_name = "users/file_list.html"
+    template_name = "users/capture_list.html"
     default_items_per_page = 25
     max_items_per_page = 100
 
@@ -479,11 +555,48 @@ def get(self, request, *args, **kwargs) -> HttpResponse:
         # Get visualization compatibility data
         visualization_compatibility = get_visualization_compatibility()
 
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            table_ctx = {
+                "page_obj": page_obj,
+                "asset_type": "capture",
+                "asset_row_template": "users/components/capture_list_table_row.html",
+                "table_headers": CAPTURES_LIST_TABLE_HEADERS,
+                "table_class": CAPTURES_LIST_TABLE_CLASS,
+                "no_assets_message": CAPTURES_LIST_NO_ASSETS_MESSAGE,
+                "sort_by": params["sort_by"],
+                "sort_order": params["sort_order"],
+                "search": params["search"],
+                "date_start": params["date_start"],
+                "date_end": params["date_end"],
+                "capture_type": params["cap_type"],
+                "min_freq": params["min_freq"],
+                "max_freq": params["max_freq"],
+                "items_per_page": params["items_per_page"],
+                "request": request,
+            }
+            table_html = render_to_string(
+                "users/components/asset_list_table.html",
+                table_ctx,
+                request=request,
+            )
+            modals_html = render_to_string(
+                "users/components/capture_list_modals.html",
+                {"captures": page_obj.object_list, "request": request},
+                request=request,
+            )
+            list_refresh_sep = "<!-- LIST_REFRESH_SEP -->"
+            return HttpResponse(table_html + list_refresh_sep + modals_html)
+
         return render(
             request,
             self.template_name,
             {
-                "captures": page_obj,
+                "page_obj": page_obj,
+                "asset_type": "capture",
+                "asset_row_template": "users/components/capture_list_table_row.html",
+                "table_headers": CAPTURES_LIST_TABLE_HEADERS,
+                "table_class": CAPTURES_LIST_TABLE_CLASS,
+                "no_assets_message": CAPTURES_LIST_NO_ASSETS_MESSAGE,
                 "sort_by": params["sort_by"],
                 "sort_order": params["sort_order"],
                 "search": params["search"],
diff --git a/gateway/sds_gateway/users/views/datasets.py b/gateway/sds_gateway/users/views/datasets.py
index 10f31841b..5c8265e07 100644
--- a/gateway/sds_gateway/users/views/datasets.py
+++ b/gateway/sds_gateway/users/views/datasets.py
@@ -14,7 +14,6 @@
 from django.db import DatabaseError
 from django.db import transaction
 from django.db.models import Q
-from django.db.models import Sum
 from django.db.models.query import QuerySet
 from django.db.utils import IntegrityError
 from django.http import Http404
@@ -47,9 +46,6 @@
 from sds_gateway.api_methods.serializers.dataset_serializers import (
     get_dataset_serializer,
 )
-from sds_gateway.api_methods.utils.relationship_utils import (
-    get_dataset_files_including_captures,
-)
 from sds_gateway.api_methods.utils.sds_files import sanitize_path_rel_to_user
 from sds_gateway.users.forms import CaptureSearchForm
 from sds_gateway.users.forms import DatasetInfoForm
@@ -1039,6 +1035,99 @@ def filter_by_frequency_range(
     return datasets.filter(uuid__in=matching_dataset_uuids)
 
 
+def _dataset_list_dropdown_menu_items(row: dict[str, Any]) -> list[dict[str, Any]]:
+    """Build dropdown_menu.html items for a serialized dataset list row."""
+    uuid = str(row.get("uuid") or "")
+    if not uuid:
+        return []
+
+    is_owner = row.get("is_owner")
+    permission_level = row.get("permission_level")
+    is_contributor = permission_level == PermissionLevel.CONTRIBUTOR
+    is_co_owner = permission_level == PermissionLevel.CO_OWNER
+    dataset_published = row.get("status") == DatasetStatus.FINAL and row.get("is_public")
+
+    items: list[dict[str, Any]] = []
+    if is_owner or is_contributor or is_co_owner:
+        # Share button
+        items.extend(
+            (
+                {
+                    "label": "Share",
+                    "icon": "person-plus",
+                    "type": "button",
+                    "modal_toggle": True,
+                    "modal_target": f"#shareModal-{uuid}",
+                    "data_attrs": {},
+                },
+            )
+        )
+
+        if not dataset_published:
+            # Edit button
+            items.append(
+                {
+                    "label": "Edit",
+                    "icon": "pencil",
+                    "type": "link",
+                    "href": f"{reverse('users:group_captures')}?dataset_uuid={uuid}",
+                    "data_attrs": {},
+                }
+            )
+
+    if is_owner or is_co_owner:
+        # Create new version button
+        items.append(
+            {
+                "label": "Create New Version",
+                "icon": "folder-symlink",
+                "type": "button",
+                "modal_toggle": True,
+                "modal_target": f"#versioningModal-{uuid}",
+                "data_attrs": {},
+            }
+        )
+        # Publish button
+        if not dataset_published:
+            items.append(
+                {
+                    "label": "Publish",
+                    "icon": "globe",
+                    "type": "button",
+                    "modal_toggle": True,
+                    "modal_target": f"#publish-dataset-modal-{uuid}",
+                    "data_attrs": {"dataset-uuid": uuid},
+                    "extra_class": "publish-dataset-btn",
+                }
+            )
+
+
+    # Web download button
+    items.append(
+        {
+            "label": "Web Download",
+            "icon": "download",
+            "type": "button",
+            "modal_toggle": True,
+            "modal_target": f"#webDownloadModal-{uuid}",
+            "data_attrs": {},
+        }
+    )
+
+    # SDK download instructions button
+    items.append(
+        {
+            "label": "SDK Instructions",
+            "icon": "code-slash",
+            "type": "button",
+            "modal_toggle": True,
+            "modal_target": f"#sdkDownloadModal-{uuid}",
+            "data_attrs": {},
+        }
+    )
+    return items
+
+
 def serialize_datasets_for_user(
     datasets: QuerySet[Dataset], user: User | None
 ) -> list[dict[str, Any]]:
@@ -1065,6 +1154,9 @@ def serialize_datasets_for_user(
             "ReturnDict", DatasetGetSerializer(dataset, context=context_req).data
         )
         dataset_data["dataset"] = dataset
+        dataset_data["dropdown_menu_items"] = _dataset_list_dropdown_menu_items(
+            dataset_data
+        )
         serialized_datasets.append(dataset_data)
     return serialized_datasets
 
@@ -1164,6 +1256,16 @@ def get(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
 user_search_datasets_view = SearchPublishedDatasetsView.as_view()
 
 
+DATASET_LIST_TABLE_HEADERS = [
+    {"label": "Name", "col_class": "w-35"},
+    {"label": "Authors", "col_class": "w-25"},
+    {"label": "Created", "col_class": "w-25"},
+    {"label": "Actions", "col_class": "w-10", "text_align": "center"},
+]
+DATASET_LIST_TABLE_CLASS = ""
+DATASET_LIST_NO_ASSETS_MESSAGE = "No datasets yet. Create one with Add Dataset."
+
+
 class ListDatasetsView(Auth0LoginRequiredMixin, View):
     template_name = "users/dataset_list.html"
 
@@ -1189,18 +1291,23 @@ def get(self, request, *args, **kwargs) -> HttpResponse:
         if request.headers.get("X-Requested-With") == "XMLHttpRequest":
             # Return table and modals so the client can update both after list refresh
             table_html = render_to_string(
-                "users/components/dataset_list_table.html",
+                "users/components/asset_list_table.html",
                 {
                     "page_obj": page_obj,
                     "sort_by": sort_by,
                     "sort_order": sort_order,
                     "ajax_fragment": True,
+                    "asset_type": "dataset",
+                    "asset_row_template": "users/components/dataset_list_table_row.html",
+                    "table_headers": DATASET_LIST_TABLE_HEADERS,
+                    "table_class": DATASET_LIST_TABLE_CLASS,
+                    "no_assets_message": DATASET_LIST_NO_ASSETS_MESSAGE,
                 },
                 request=request,
             )
             modals_html = render_to_string(
                 "users/components/dataset_list_modals.html",
-                {"page_obj": page_obj},
+                {"page_obj": page_obj, "page_type": "dataset-list"},
                 request=request,
             )
             # Separator used by ListRefreshManager to split table vs modals
@@ -1214,6 +1321,12 @@ def get(self, request, *args, **kwargs) -> HttpResponse:
                 "page_obj": page_obj,
                 "sort_by": sort_by,
                 "sort_order": sort_order,
+                "ajax_fragment": False,
+                "asset_type": "dataset",
+                "asset_row_template": "users/components/dataset_list_table_row.html",
+                "table_headers": DATASET_LIST_TABLE_HEADERS,
+                "table_class": DATASET_LIST_TABLE_CLASS,
+                "no_assets_message": DATASET_LIST_NO_ASSETS_MESSAGE,
             },
         )
 
@@ -1270,35 +1383,58 @@ def _paginate_datasets(
 user_dataset_list_view = ListDatasetsView.as_view()
 
 
-class DatasetDetailsView(FileTreeMixin, View):
-    """View to handle dataset details modal requests."""
+def load_dataset_details_bundle(
+    request: HttpRequest,
+    dataset_uuid: UUID,
+) -> dict[str, Any] | None:
+    """
+    Build dataset details payload (dataset dict and file statistics).
 
-    def _get_dataset_files(self, dataset: Dataset) -> QuerySet[File]:
-        """
-        Get all files associated with a dataset,
-        including files from linked captures.
+    Returns None if the dataset does not exist or is not visible to the request user.
+    On success, includes ``dataset_orm`` for server-rendered templates (omit from JSON).
+    """
+    try:
+        dataset = Dataset.objects.get(uuid=dataset_uuid, is_deleted=False)
+    except Dataset.DoesNotExist:
+        return None
 
-        Supports both FK and M2M relationships (expand-contract pattern).
+    has_public_access = (
+        dataset.is_public and dataset.status == DatasetStatus.FINAL
+    )
+    has_user_access = request.user.is_authenticated and user_has_access_to_item(
+        request.user, dataset_uuid, ItemType.DATASET
+    )
 
-        Args:
-            dataset: The dataset to get files for
+    if not (has_public_access or has_user_access):
+        return None
 
-        Returns:
-            A QuerySet of files associated with the dataset
-        """
-        return get_dataset_files_including_captures(dataset, include_deleted=False)
+    serializer_context: dict[str, Any] = {"exclude_files": True}
+    if request.user.is_authenticated:
+        serializer_context["request"] = request
+
+    dataset_data = get_dataset_serializer(
+        dataset,
+        has_user_access=has_user_access,
+        context=serializer_context,
+    )
+    statistics = dataset.get_dataset_file_statistics()
+
+    return {
+        "dataset": dataset_data,
+        "statistics": statistics,
+        "dataset_orm": dataset,
+    }
+
+
+class DatasetDetailsView(View):
+    """View to handle dataset details JSON (metadata + file statistics)."""
 
     def get(self, request, *args, **kwargs) -> JsonResponse:
         """
-        Get dataset details and files for the modal.
-
-        Args:
-            request: The HTTP request object
-            *args: Variable length argument list
-            **kwargs: Arbitrary keyword arguments
+        Get dataset details for editing modals and similar clients.
 
         Returns:
-            A JSON response containing the dataset details and files
+            JSON with ``dataset`` (serialized) and ``statistics`` (file counts/sizes).
         """
         dataset_uuid_str = request.GET.get("dataset_uuid")
 
@@ -1311,65 +1447,13 @@ def get(self, request, *args, **kwargs) -> JsonResponse:
             return JsonResponse({"error": "Invalid dataset UUID"}, status=400)
 
         try:
-            dataset = get_object_or_404(Dataset, uuid=dataset_uuid, is_deleted=False)
-
-            has_public_access = (
-                dataset.is_public and dataset.status == DatasetStatus.FINAL
-            )
-            has_user_access = request.user.is_authenticated and user_has_access_to_item(
-                request.user, dataset_uuid, ItemType.DATASET
-            )
-
-            if not (has_public_access or has_user_access):
+            bundle = load_dataset_details_bundle(request, dataset_uuid)
+            if bundle is None:
                 return JsonResponse(
                     {"error": "Dataset not found or access denied"}, status=404
                 )
-
-            # Get dataset information
-            dataset_data = get_dataset_serializer(
-                dataset, has_user_access=has_user_access
-            )
-
-            # Get all files associated with the dataset
-            files_queryset = self._get_dataset_files(dataset)
-
-            # Calculate statistics (check both deprecated FK and M2M for capture links)
-            total_files = files_queryset.count()
-            captures_count = (
-                files_queryset.filter(
-                    Q(capture__isnull=False) | Q(captures__isnull=False)
-                )
-                .distinct()
-                .count()
-            )
-            artifacts_count = files_queryset.filter(
-                capture__isnull=True,
-                captures__isnull=True,
-            ).count()
-            total_size = files_queryset.aggregate(total=Sum("size"))["total"] or 0
-
-            base_dir = sanitize_path_rel_to_user(
-                unsafe_path="/",
-                user=dataset.owner,
-            )
-
-            tree_data = self._get_directory_tree(files_queryset, str(base_dir))
-
-            response_data = {
-                "dataset": dataset_data,
-                "tree": tree_data,
-                "statistics": {
-                    "total_files": total_files,
-                    "captures": captures_count,
-                    "artifacts": artifacts_count,
-                    "total_size": total_size,
-                },
-            }
-
-            return JsonResponse(response_data)
-
-        except Dataset.DoesNotExist:
-            return JsonResponse({"error": "Dataset not found"}, status=404)
+            safe = {k: v for k, v in bundle.items() if k != "dataset_orm"}
+            return JsonResponse(safe)
         except Exception:  # noqa: BLE001
             log.exception("Error retrieving dataset details")
             return JsonResponse({"error": "Internal server error"}, status=500)
diff --git a/gateway/sds_gateway/users/views/details_modal.py b/gateway/sds_gateway/users/views/details_modal.py
new file mode 100644
index 000000000..cc07e1943
--- /dev/null
+++ b/gateway/sds_gateway/users/views/details_modal.py
@@ -0,0 +1,43 @@
+"""HTTP views for asset details modal HTML fragments."""
+
+from __future__ import annotations
+
+from uuid import UUID
+
+from django.http import Http404
+from django.http import JsonResponse
+from django.views import View
+
+from sds_gateway.users.mixins import Auth0LoginRequiredMixin
+from sds_gateway.users.views.details_modal_registry import DETAILS_MODAL_JSON_BUILDERS
+from sds_gateway.users.views.details_modal_registry import DETAILS_MODAL_REGISTRY
+from sds_gateway.users.views.details_modal_registry import render_details_modal_body
+
+
+class DetailsModalFragmentView(Auth0LoginRequiredMixin, View):
+    """GET /users/details-modal/<asset_type>/<uuid>/ → JSON { html, title, meta }."""
+
+    def dispatch(self, request, *args, **kwargs):
+        # Public published datasets: allow anonymous JSON/HTML fragment (access in registry).
+        if kwargs.get("asset_type") == "dataset":
+            return View.dispatch(self, request, *args, **kwargs)
+        return super().dispatch(request, *args, **kwargs)
+
+    def get(self, request, asset_type: str, uuid: UUID, *args, **kwargs) -> JsonResponse:
+        builder = DETAILS_MODAL_REGISTRY.get(asset_type)
+        json_builder = DETAILS_MODAL_JSON_BUILDERS.get(asset_type)
+        if builder is None or json_builder is None:
+            raise Http404("Unknown asset type")
+
+        ctx = builder(request, uuid)
+        if ctx is None:
+            raise Http404("Not found")
+
+        html = render_details_modal_body(request, asset_type, ctx)
+        if not html:
+            raise Http404("Not found")
+
+        return JsonResponse(json_builder(ctx, html))
+
+
+details_modal_fragment_view = DetailsModalFragmentView.as_view()
diff --git a/gateway/sds_gateway/users/views/details_modal_registry.py b/gateway/sds_gateway/users/views/details_modal_registry.py
new file mode 100644
index 000000000..742d801fa
--- /dev/null
+++ b/gateway/sds_gateway/users/views/details_modal_registry.py
@@ -0,0 +1,311 @@
+"""Registry for HTML details modal fragments (asset-type → builder)."""
+
+from __future__ import annotations
+
+import json
+from collections.abc import Callable
+from datetime import datetime
+from typing import Any
+from uuid import UUID
+
+from django.http import HttpRequest
+from django.template.loader import render_to_string
+from django.utils import timezone
+
+from sds_gateway.api_methods.models import Capture
+from sds_gateway.api_methods.serializers.capture_serializers import (
+    serialize_capture_or_composite,
+)
+from sds_gateway.api_methods.utils.asset_access_control import user_has_access_to_capture
+from sds_gateway.users.views.datasets import load_dataset_details_bundle
+
+TIME_METADATA_FIELDS = frozenset(
+    {
+        "computer_time",
+        "start_bound",
+        "end_bound",
+        "init_utc_timestamp",
+    },
+)
+
+
+def _format_field_label(field_name: str) -> str:
+    return field_name.replace("_", " ").title()
+
+
+def format_channel_metadata_value(value: Any, field_name: str = "") -> str:
+    """Format a metadata value for display (parity with legacy ModalManager JS)."""
+    if value is None:
+        return "N/A"
+    if isinstance(value, bool):
+        return "Yes" if value else "No"
+    if isinstance(value, str):
+        low = value.lower()
+        if low == "true":
+            return "Yes"
+        if low == "false":
+            return "No"
+        return value
+    if isinstance(value, int | float):
+        value_str = str(value)
+        fname = field_name.lower()
+        if fname in TIME_METADATA_FIELDS and 10 <= len(value_str) <= 13:
+            ts_ms = value * 1000 if len(value_str) == 10 else value
+            try:
+                return datetime.fromtimestamp(
+                    ts_ms / 1000.0,
+                    tz=timezone.utc,
+                ).strftime("%Y-%m-%d %H:%M:%S %Z")
+            except (OSError, OverflowError, ValueError):
+                pass
+        abs_v = abs(value)
+        if abs_v >= 1e9:
+            return f"{value / 1e9:.3f} GHz"
+        if abs_v >= 1e6:
+            return f"{value / 1e6:.1f} MHz"
+        return str(value)
+    if isinstance(value, list):
+        return ", ".join(
+            format_channel_metadata_value(item, field_name) for item in value
+        )
+    if isinstance(value, dict):
+        return json.dumps(value, default=str)
+    return str(value)
+
+
+def build_channel_metadata_rows(metadata: dict[str, Any] | None) -> list[dict[str, str]]:
+    """Turn channel_metadata dict into rows for the template (autoescaped text)."""
+    if not metadata:
+        return []
+    rows: list[dict[str, str]] = []
+    for key, value in metadata.items():
+        if value is None:
+            continue
+        rows.append(
+            {
+                "label": _format_field_label(str(key)),
+                "value": format_channel_metadata_value(value, str(key)),
+            }
+        )
+    return rows
+
+
+def _owner_display(capture_dict: dict[str, Any]) -> str:
+    owner = capture_dict.get("owner") or {}
+    if isinstance(owner, dict):
+        return str(owner.get("email") or owner.get("name") or "N/A")
+    return "N/A"
+
+
+def _dataset_display(capture_dict: dict[str, Any]) -> str:
+    datasets = capture_dict.get("datasets")
+    if isinstance(datasets, list) and datasets:
+        names: list[str] = []
+        for d in datasets:
+            if isinstance(d, dict) and d.get("name"):
+                names.append(str(d["name"]))
+        return ", ".join(names) if names else "N/A"
+    raw = capture_dict.get("dataset")
+    if raw is not None and raw != "":
+        return str(raw)
+    return "N/A"
+
+
+def _center_frequency_display(capture_dict: dict[str, Any]) -> str:
+    raw = capture_dict.get("center_frequency_ghz")
+    if raw is None or raw == "None":
+        return "N/A"
+    try:
+        return f"{float(raw):.3f} GHz"
+    except (TypeError, ValueError):
+        return "N/A"
+
+
+def _channel_summary_label(capture_dict: dict[str, Any]) -> str:
+    return "Channels" if capture_dict.get("is_multi_channel") else "Channel"
+
+
+def _channel_summary_value(capture_dict: dict[str, Any]) -> str:
+    if capture_dict.get("is_multi_channel"):
+        channels = capture_dict.get("channels") or []
+        if isinstance(channels, list) and channels:
+            parts = []
+            for ch in channels:
+                if isinstance(ch, dict) and ch.get("channel"):
+                    parts.append(str(ch["channel"]))
+            return ", ".join(parts) if parts else "N/A"
+        return str(capture_dict.get("channel") or "N/A")
+    return str(capture_dict.get("channel") or "N/A")
+
+
+def _accordion_channels(capture_dict: dict[str, Any]) -> list[dict[str, Any]]:
+    """Channels with precomputed metadata rows for accordion."""
+    if not capture_dict.get("is_multi_channel"):
+        return []
+    channels = capture_dict.get("channels") or []
+    if not isinstance(channels, list):
+        return []
+    out: list[dict[str, Any]] = []
+    for ch in channels:
+        if not isinstance(ch, dict):
+            continue
+        meta = ch.get("channel_metadata") or {}
+        meta_rows = build_channel_metadata_rows(meta if isinstance(meta, dict) else {})
+        out.append(
+            {
+                "channel_name": str(ch.get("channel") or "N/A"),
+                "metadata_rows": meta_rows,
+            }
+        )
+    return out
+
+
+def _capture_file_summary_from_dict(capture_dict: dict[str, Any]) -> tuple[int, int]:
+    """Read file count and total size from serialized capture (no file list)."""
+    files_count = capture_dict.get("total_file_count")
+    if files_count is None:
+        info = capture_dict.get("data_files_info") or {}
+        files_count = info.get("total_count", info.get("count", 0))
+    total_size = capture_dict.get("total_file_size")
+    if total_size is None:
+        info = capture_dict.get("data_files_info") or {}
+        total_size = info.get("total_size", 0)
+    return int(files_count or 0), int(total_size or 0)
+
+
+def build_capture_details_modal_context(
+    request: HttpRequest, capture_uuid: UUID
+) -> dict[str, Any] | None:
+    """
+    Build template context for capture details modal body.
+
+    Returns None if capture not found or user cannot access it.
+    """
+    try:
+        capture = Capture.objects.get(uuid=capture_uuid, is_deleted=False)
+    except Capture.DoesNotExist:
+        return None
+
+    if not request.user.is_authenticated:
+        return None
+
+    if not user_has_access_to_capture(request.user, capture):
+        return None
+
+    capture_dict = serialize_capture_or_composite(
+        capture,
+        context={"request": request, "exclude_files": True},
+    )
+    uuid_str = str(capture_dict.get("uuid", capture_uuid))
+
+    files_count, total_size = _capture_file_summary_from_dict(capture_dict)
+
+    return {
+        "capture": capture_dict,
+        "capture_uuid": uuid_str,
+        "owner_display": _owner_display(capture_dict),
+        "center_frequency_display": _center_frequency_display(capture_dict),
+        "channel_label": _channel_summary_label(capture_dict),
+        "channel_value": _channel_summary_value(capture_dict),
+        "accordion_channels": _accordion_channels(capture_dict),
+        "is_public_yesno": "Yes" if capture_dict.get("is_public") else "No",
+        "dataset_display": _dataset_display(capture_dict),
+        "files_count": files_count,
+        "total_size": total_size,
+    }
+
+
+def capture_details_title(capture_dict: dict[str, Any]) -> str:
+    name = capture_dict.get("name") or ""
+    top = capture_dict.get("top_level_dir") or ""
+    if name:
+        return str(name)
+    if top:
+        return str(top)
+    return "Unnamed Capture"
+
+
+def capture_details_meta(capture_dict: dict[str, Any]) -> dict[str, Any]:
+    """JSON meta for ModalManager (visualize, etc.)."""
+    ct = capture_dict.get("capture_type") or ""
+    return {
+        "visualize_enabled": ct == "drf",
+        "capture_type": str(ct),
+        "uuid": str(capture_dict.get("uuid", "")),
+        "name": str(capture_dict.get("name") or ""),
+        "top_level_dir": str(capture_dict.get("top_level_dir") or ""),
+    }
+
+
+def finalize_capture_modal_json(ctx: dict[str, Any], html: str) -> dict[str, Any]:
+    cap = ctx["capture"]
+    return {
+        "html": html,
+        "title": capture_details_title(cap),
+        "meta": capture_details_meta(cap),
+    }
+
+
+def build_dataset_details_modal_context(
+    request: HttpRequest, dataset_uuid: UUID
+) -> dict[str, Any] | None:
+    bundle = load_dataset_details_bundle(request, dataset_uuid)
+    if bundle is None:
+        return None
+
+    dataset_orm = bundle["dataset_orm"]
+    ds = bundle["dataset"]
+    uuid_str = str(ds.get("uuid", dataset_uuid))
+
+    return {
+        "dataset": ds,
+        "statistics": bundle["statistics"],
+        "dataset_updated_at": dataset_orm.updated_at,
+        "dataset_uuid": uuid_str,
+    }
+
+
+def finalize_dataset_modal_json(ctx: dict[str, Any], html: str) -> dict[str, Any]:
+    ds = ctx["dataset"]
+    name = str(ds.get("name") or "Dataset")
+    ver = ds.get("version")
+    title = f"{name} (v{ver})" if ver is not None else name
+    return {
+        "html": html,
+        "title": title,
+        "meta": {"uuid": str(ds.get("uuid", ""))},
+    }
+
+
+def render_details_modal_body(
+    request: HttpRequest, asset_type: str, ctx: dict[str, Any]
+) -> str:
+    template_name = DETAILS_MODAL_BODY_TEMPLATES.get(asset_type)
+    if not template_name:
+        return ""
+    return render_to_string(template_name, ctx, request=request)
+
+
+def get_registered_asset_types() -> frozenset[str]:
+    return frozenset(DETAILS_MODAL_REGISTRY.keys())
+
+
+DetailsModalContextBuilder = Callable[[HttpRequest, UUID], dict[str, Any] | None]
+DetailsModalJsonBuilder = Callable[[dict[str, Any], str], dict[str, Any]]
+
+DETAILS_MODAL_REGISTRY: dict[str, DetailsModalContextBuilder] = {
+    "capture": build_capture_details_modal_context,
+    "dataset": build_dataset_details_modal_context,
+}
+
+DETAILS_MODAL_BODY_TEMPLATES: dict[str, str] = {
+    "capture": "users/components/capture_details_modal_body.html",
+    "dataset": "users/components/dataset_details_modal_body.html",
+}
+
+DETAILS_MODAL_JSON_BUILDERS: dict[str, DetailsModalJsonBuilder] = {
+    "capture": finalize_capture_modal_json,
+    "dataset": finalize_dataset_modal_json,
+}
+
+CAPTURE_FILES_SUMMARY_TEMPLATE = "users/components/capture_files_summary_fragment.html"
diff --git a/gateway/sds_gateway/users/views/downloads.py b/gateway/sds_gateway/users/views/downloads.py
index c989c75b3..6ceb7f4dd 100644
--- a/gateway/sds_gateway/users/views/downloads.py
+++ b/gateway/sds_gateway/users/views/downloads.py
@@ -7,6 +7,7 @@
 from django.http import HttpRequest
 from django.http import HttpResponse
 from django.http import JsonResponse
+from django.urls import reverse
 from django.shortcuts import get_object_or_404
 from django.shortcuts import render
 from django.utils import timezone
@@ -23,6 +24,16 @@
 from sds_gateway.users.mixins import Auth0LoginRequiredMixin
 
 
+def _post_download_redirect_for_temp_zip(filename: str) -> tuple[str, str]:
+    """Return (redirect URL, sessionStorage alert key) after a temp zip download."""
+    name = filename or ""
+    if name.startswith("capture_") or "_capture_" in name:
+        return reverse("users:capture_list"), "captureDownloadAlert"
+    if name.startswith("dataset_") or "_dataset_" in name:
+        return reverse("users:dataset_list"), "datasetDownloadAlert"
+    return reverse("users:dataset_list"), "datasetDownloadAlert"
+
+
 class TemporaryZipDownloadView(Auth0LoginRequiredMixin, View):
     """View to display a temporary zip file download page and serve the file."""
 
@@ -72,12 +83,18 @@ def get(self, request, *args, **kwargs) -> HttpResponse:
                 timezone.localtime(temp_zip.expires_at) if temp_zip.expires_at else None
             )
 
+            redirect_url, alert_key = _post_download_redirect_for_temp_zip(
+                temp_zip.filename
+            )
+
             context = {
                 "temp_zip": temp_zip,
                 "status": status,
                 "message": message,
                 "file_exists": file_exists,
                 "expires_at_local": expires_at_local,
+                "post_download_redirect_url": redirect_url,
+                "post_download_alert_key": alert_key,
             }
 
             return render(request, template_name=self.template_name, context=context)
diff --git a/gateway/sds_gateway/users/views/files.py b/gateway/sds_gateway/users/views/files.py
index 0e82f3a7f..adb554410 100644
--- a/gateway/sds_gateway/users/views/files.py
+++ b/gateway/sds_gateway/users/views/files.py
@@ -1,7 +1,6 @@
 import json
 from typing import cast
 
-from django.core.paginator import Paginator
 from django.db.models.query import QuerySet
 from django.http import HttpRequest
 from django.http import HttpResponse
@@ -10,6 +9,7 @@
 from django.shortcuts import get_object_or_404
 from django.shortcuts import redirect
 from django.shortcuts import render
+from django.conf import settings
 from django.views import View
 from django.views.generic import DetailView
 from loguru import logger as log
@@ -36,77 +36,6 @@
 from sds_gateway.users.mixins import Auth0LoginRequiredMixin
 from sds_gateway.users.navigation_models import NavigationContext
 from sds_gateway.users.navigation_models import NavigationType
-from sds_gateway.visualizations.config import get_visualization_compatibility
-
-
-class ListFilesView(Auth0LoginRequiredMixin, View):
-    template_name = "users/file_list.html"
-    items_per_page = 25
-
-    def get(self, request, *args, **kwargs) -> HttpResponse:
-        # Get query parameters
-        sort_by = request.GET.get("sort_by", "created_at")
-        sort_order = request.GET.get("sort_order", "desc")
-
-        # Get filter parameters
-        search = request.GET.get("search", "")
-        date_start = request.GET.get("date_start", "")
-        date_end = request.GET.get("date_end", "")
-        center_freq = request.GET.get("center_freq", "")
-        bandwidth = request.GET.get("bandwidth", "")
-        location = request.GET.get("location", "")
-
-        # Base queryset
-        files_qs = request.user.files.filter(is_deleted=False)
-
-        # Apply search filter
-        if search:
-            files_qs = files_qs.filter(name__icontains=search)
-
-        # Apply date range filter
-        if date_start:
-            files_qs = files_qs.filter(created_at__gte=date_start)
-        if date_end:
-            files_qs = files_qs.filter(created_at__lte=date_end)
-
-        # Apply other filters
-        if center_freq:
-            files_qs = files_qs.filter(center_frequency=center_freq)
-        if bandwidth:
-            files_qs = files_qs.filter(bandwidth=bandwidth)
-        if location:
-            files_qs = files_qs.filter(location=location)
-
-        # Handle sorting
-        if sort_by:
-            if sort_order == "desc":
-                files_qs = files_qs.order_by(f"-{sort_by}")
-            else:
-                files_qs = files_qs.order_by(sort_by)
-
-        # Paginate the results
-        paginator = Paginator(files_qs, self.items_per_page)
-        files_page = paginator.get_page(request.GET.get("page", 1))
-
-        # Get visualization compatibility data
-        visualization_compatibility = get_visualization_compatibility()
-
-        return render(
-            request,
-            template_name=self.template_name,
-            context={
-                "files": files_page,
-                "total_pages": paginator.num_pages,
-                "current_page": files_page.number,
-                "total_items": paginator.count,
-                "sort_by": sort_by,
-                "sort_order": sort_order,
-                "visualization_compatibility": visualization_compatibility,
-            },
-        )
-
-
-user_file_list_view = ListFilesView.as_view()
 
 
 class FileDetailView(Auth0LoginRequiredMixin, DetailView):  # pyright: ignore[reportMissingTypeArgument]
@@ -333,15 +262,21 @@ def get(self, request, *args, **kwargs) -> HttpResponse:
         # Convert Pydantic models to dictionaries for template
         items_data = items_to_dicts(items)
 
+        ctx: dict = {
+            "items": items_data,
+            "current_dir": nav_context.to_path(),
+            "breadcrumb_parts": breadcrumb_parts,
+            "user_email": request.user.email,
+        }
+        if settings.VISUALIZATIONS_ENABLED:
+            from sds_gateway.visualizations.config import get_visualization_compatibility
+
+            ctx["visualization_compatibility"] = get_visualization_compatibility()
+
         return render(
             request,
             self.template_name,
-            {
-                "items": items_data,
-                "current_dir": nav_context.to_path(),
-                "breadcrumb_parts": breadcrumb_parts,
-                "user_email": request.user.email,
-            },
+            ctx,
         )
 
     def _add_root_items(self, request) -> list[Item]:
diff --git a/gateway/sds_gateway/users/views/utilities.py b/gateway/sds_gateway/users/views/utilities.py
index 63fbe40d7..94715ba13 100644
--- a/gateway/sds_gateway/users/views/utilities.py
+++ b/gateway/sds_gateway/users/views/utilities.py
@@ -40,7 +40,7 @@ class RenderHTMLFragmentView(View):
 
     This endpoint allows rendering of component templates with client-provided context.
     It's designed to support both authenticated and unauthenticated users for rendering
-    public UI components (e.g., file trees for public datasets).
+    public UI components (e.g., table rows, messages).
 
     Security:
     - Restricted to users/components/ templates only