Merge migrations

Merge branch 'dev' into feature-document-versions-1218
Auto translate strings
2026-02-24 20:36:25 +00:00 · 2026-02-23 17:11:36 -08:00 · 2026-02-23 17:07:22 -08:00 · 2026-02-24 00:44:37 +00:00 · 2026-02-23 16:42:50 -08:00 · 2026-02-23 13:47:32 -08:00
143 changed files with 7533 additions and 2109 deletions
--- a/.github/workflows/ci-backend.yml
+++ b/.github/workflows/ci-backend.yml
@@ -129,6 +129,7 @@ jobs:
        run: |
          uv pip list
      - name: Check typing (pyrefly)
+        continue-on-error: true
        run: |
          uv run pyrefly \
            check \
@@ -143,6 +144,7 @@ jobs:
            ${{ runner.os }}-mypy-py${{ env.DEFAULT_PYTHON }}-
            ${{ runner.os }}-mypy-
      - name: Check typing (mypy)
+        continue-on-error: true
        run: |
          uv run mypy \
            --show-error-codes \
--- a/.mypy-baseline.txt
+++ b/.mypy-baseline.txt
@@ -96,9 +96,7 @@ src/documents/conditionals.py:0: error: Function is missing a type annotation fo
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "input_doc"  [attr-defined]
-src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "log"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
@@ -173,7 +171,6 @@ src/documents/filters.py:0: error: Function is missing a type annotation  [no-un
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
@@ -345,18 +342,11 @@ src/documents/migrations/0001_initial.py:0: error: Skipping analyzing "multisele
 src/documents/migrations/0008_sharelinkbundle.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/migrations/0008_sharelinkbundle.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Argument 1 to "Path" has incompatible type "Path | None"; expected "str | PathLike[str]"  [arg-type]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.deleted_objects"  [django-manager-missing]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.global_objects"  [django-manager-missing]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.objects"  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'custom_fields' for relation 'documents.models.CustomFieldInstance.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.correspondent'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.document_type'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.storage_path'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'fields' for relation 'documents.models.CustomFieldInstance.field'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'notes' for relation 'documents.models.Note.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'runs' for relation 'documents.models.WorkflowRun.workflow'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'share_links' for relation 'documents.models.ShareLink.document'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'workflow_runs' for relation 'documents.models.WorkflowRun.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
@@ -445,7 +435,6 @@ src/documents/permissions.py:0: error: Function is missing a type annotation  [n
 src/documents/permissions.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/permissions.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/permissions.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/permissions.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exclude"  [union-attr]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exists"  [union-attr]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exists"  [union-attr]
@@ -599,7 +588,6 @@ src/documents/serialisers.py:0: error: Function is missing a type annotation for
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Incompatible type for lookup 'pk': (got "str | None", expected "str | int")  [misc]
 src/documents/serialisers.py:0: error: Incompatible types in assignment (expression has type "PrimaryKeyRelatedField[Tag]", base class "Field" defined the type as "BaseSerializer[Any]")  [assignment]
 src/documents/serialisers.py:0: error: Incompatible types in assignment (expression has type "Sequence[str] | tuple[Lower]", variable has type "Sequence[str] | None")  [assignment]
@@ -703,15 +691,11 @@ src/documents/signals/handlers.py:0: error: Function is missing a type annotatio
 src/documents/signals/handlers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/signals/handlers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/signals/handlers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/signals/handlers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/signals/handlers.py:0: error: Incompatible return value type (got "tuple[DocumentMetadataOverrides | None, str]", expected "tuple[DocumentMetadataOverrides, str] | None")  [return-value]
 src/documents/signals/handlers.py:0: error: Incompatible types in assignment (expression has type "list[Tag]", variable has type "set[Tag]")  [assignment]
 src/documents/signals/handlers.py:0: error: Incompatible types in assignment (expression has type "tuple[Any, Any, Any]", variable has type "tuple[Any, Any]")  [assignment]
-src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "refresh_from_db"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "save"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "source_path"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "tags"  [union-attr]
-src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "tags"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "ConsumableDocument" of "Document | ConsumableDocument" has no attribute "title"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "None" of "Any | None" has no attribute "get"  [union-attr]
 src/documents/signals/handlers.py:0: error: Item "None" of "Any | None" has no attribute "get"  [union-attr]
@@ -982,10 +966,6 @@ src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annot
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
@@ -1011,7 +991,6 @@ src/documents/tests/test_bulk_edit.py:0: error: Item "dict[Any, Any]" of "Group
 src/documents/tests/test_bulk_edit.py:0: error: Item "dict[Any, Any]" of "Group | dict[Any, Any]" has no attribute "count"  [union-attr]
 src/documents/tests/test_bulk_edit.py:0: error: Too few arguments for "count" of "list"  [call-arg]
 src/documents/tests/test_bulk_edit.py:0: error: Too few arguments for "count" of "list"  [call-arg]
-src/documents/tests/test_bulk_edit.py:0: error: Unsupported operand types for - ("None" and "int")  [operator]
 src/documents/tests/test_caching.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_classifier.py:0: error: "None" has no attribute "classes_"  [attr-defined]
 src/documents/tests/test_classifier.py:0: error: "None" has no attribute "classes_"  [attr-defined]
@@ -1574,7 +1553,6 @@ src/documents/views.py:0: error: Function is missing a return type annotation  [
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
-src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]
@@ -2197,34 +2175,34 @@ src/paperless_mail/tests/test_mail.py:0: error: "MailMessage" has no attribute "
 src/paperless_mail/tests/test_mail.py:0: error: "MailMessage" has no attribute "flagged"  [attr-defined]
 src/paperless_mail/tests/test_mail.py:0: error: "MailMessage" has no attribute "seen"  [attr-defined]
 src/paperless_mail/tests/test_mail.py:0: error: "MailMessage" has no attribute "seen"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[att@480]" has no attribute "filename"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message2@426]" has no attribute "from_"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message2@426]" has no attribute "from_"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message2@426]" has no attribute "from_values"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message@419]" has no attribute "from_"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message@419]" has no attribute "from_values"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message@478]" has no attribute "subject"  [attr-defined]
-src/paperless_mail/tests/test_mail.py:0: error: "type[message@531]" has no attribute "attachments"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[att@481]" has no attribute "filename"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message2@427]" has no attribute "from_"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message2@427]" has no attribute "from_"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message2@427]" has no attribute "from_values"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message@420]" has no attribute "from_"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message@420]" has no attribute "from_values"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message@479]" has no attribute "subject"  [attr-defined]
+src/paperless_mail/tests/test_mail.py:0: error: "type[message@532]" has no attribute "attachments"  [attr-defined]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxFolderSelectError" has incompatible type "None"; expected "tuple[Any, ...]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxFolderSelectError" has incompatible type "None"; expected "tuple[Any, ...]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxLoginError" has incompatible type "str"; expected "tuple[Any, ...]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxLoginError" has incompatible type "str"; expected "tuple[Any, ...]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxLoginError" has incompatible type "str"; expected "tuple[Any, ...]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "MailboxLoginError" has incompatible type "str"; expected "tuple[Any, ...]"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message2@426]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message2@426]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@419]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@419]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@419]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@419]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@478]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@478]"; expected "MailMessage"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@478]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message2@427]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message2@427]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@420]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@420]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@420]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_correspondent" of "MailAccountHandler" has incompatible type "type[message@420]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@479]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@479]"; expected "MailMessage"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "_get_title" of "MailAccountHandler" has incompatible type "type[message@479]"; expected "MailMessage"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "filter" has incompatible type "Callable[[Any], bool]"; expected "Callable[[MailMessage], TypeGuard[Never]]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 1 to "filter" has incompatible type "Callable[[Any], bool]"; expected "Callable[[MailMessage], TypeGuard[Never]]"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@480]"; expected "MailAttachment"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@480]"; expected "MailAttachment"  [arg-type]
-src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@480]"; expected "MailAttachment"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@481]"; expected "MailAttachment"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@481]"; expected "MailAttachment"  [arg-type]
+src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "_get_title" of "MailAccountHandler" has incompatible type "type[att@481]"; expected "MailAttachment"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Argument 2 to "assertIn" of "TestCase" has incompatible type "str | None"; expected "Iterable[Any] | Container[Any]"  [arg-type]
 src/paperless_mail/tests/test_mail.py:0: error: Dict entry 0 has incompatible type "str": "None"; expected "str": "str"  [dict-item]
 src/paperless_mail/tests/test_mail.py:0: error: Dict entry 0 has incompatible type "str": "int"; expected "str": "str"  [dict-item]
--- a/docs/advanced_usage.md
+++ b/docs/advanced_usage.md
@@ -431,8 +431,10 @@ This allows for complex logic to be included in the format, including [logical s
 and [filters](https://jinja.palletsprojects.com/en/3.1.x/templates/#id11) to manipulate the [variables](#filename-format-variables)
 provided. The template is provided as a string, potentially multiline, and rendered into a single line.

-In addition, the entire Document instance is available to be utilized in a more advanced way, as well as some variables which only make sense to be accessed
-with more complex logic.
+In addition, a limited `document` object is available for advanced templates.
+This object includes common metadata fields such as `id`, `pk`, `title`, `content`, `page_count`, `created`, `added`, `modified`, `mime_type`,
+`checksum`, `archive_checksum`, `archive_serial_number`, `filename`, `archive_filename`, and `original_filename`.
+Related values are available as nested objects with limited fields, for example document.correspondent.name, etc.

 #### Custom Jinja2 Filters

@@ -782,9 +784,17 @@ below.

 ### Document Splitting {#document-splitting}

-When enabled, Paperless will look for a barcode with the configured value and create a new document
-starting from the next page. The page with the barcode on it will _not_ be retained. It
-is expected to be a page existing only for triggering the split.
+If document splitting is enabled, Paperless splits _after_ a separator barcode by default.
+This means:
+
+-   any page containing the configured separator barcode starts a new document, starting with the **next** page
+-   pages containing the separator barcode are discarded
+
+This is intended for dedicated separator sheets such as PATCH-T pages.
+
+If [`PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES`](configuration.md#PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES)
+is enabled, the page containing the separator barcode is retained instead. In this mode,
+each page containing the separator barcode becomes the **first** page of a new document.

 ### Archive Serial Number Assignment

@@ -793,8 +803,9 @@ archive serial number, allowing quick reference back to the original, paper docu

 If document splitting via barcode is also enabled, documents will be split when an ASN
 barcode is located. However, differing from the splitting, the page with the
-barcode _will_ be retained. This allows application of a barcode to any page, including
-one which holds data to keep in the document.
+barcode _will_ be retained. Each detected ASN barcode starts a new document _starting with
+that page_. This allows placing ASN barcodes on content pages that should remain part of
+the document.

 ### Tag Assignment

--- a/docs/api.md
+++ b/docs/api.md
@@ -211,6 +211,21 @@ However, querying the tasks endpoint with the returned UUID e.g.
 `/api/tasks/?task_id={uuid}` will provide information on the state of the
 consumption including the ID of a created document if consumption succeeded.

+## Document Versions
+
+Document versions are file-level versions linked to one root document.
+
+-   Root document metadata (title, tags, correspondent, document type, storage path, custom fields, permissions) remains shared.
+-   Version-specific file data (file, mime type, checksums, archive info, extracted text content) belongs to the selected/latest version.
+
+Version-aware endpoints:
+
+-   `GET /api/documents/{id}/`: returns root document data; `content` resolves to latest version content by default. Use `?version={version_id}` to resolve content for a specific version.
+-   `PATCH /api/documents/{id}/`: content updates target the selected version (`?version={version_id}`) or latest version by default; non-content metadata updates target the root document.
+-   `GET /api/documents/{id}/download/`, `GET /api/documents/{id}/preview/`, `GET /api/documents/{id}/thumb/`, `GET /api/documents/{id}/metadata/`: accept `?version={version_id}`.
+-   `POST /api/documents/{id}/update_version/`: uploads a new version using multipart form field `document` and optional `version_label`.
+-   `DELETE /api/documents/{root_id}/versions/{version_id}/`: deletes a non-root version.
+
 ## Permissions

 All objects (documents, tags, etc.) allow setting object-level permissions
@@ -300,13 +315,13 @@ The following methods are supported:
            -   `"doc": OUTPUT_DOCUMENT_INDEX` Optional index of the output document for split operations.
    -   Optional `parameters`:
        -   `"delete_original": true` to delete the original documents after editing.
-        -   `"update_document": true` to update the existing document with the edited PDF.
+        -   `"update_document": true` to add the edited PDF as a new version of the root document.
        -   `"include_metadata": true` to copy metadata from the original document to the edited document.
 -   `remove_password`
    -   Requires `parameters`:
        -   `"password": "PASSWORD_STRING"` The password to remove from the PDF documents.
    -   Optional `parameters`:
-        -   `"update_document": true` to replace the existing document with the password-less PDF.
+        -   `"update_document": true` to add the password-less PDF as a new version of the root document.
        -   `"delete_original": true` to delete the original document after editing.
        -   `"include_metadata": true` to copy metadata from the original document to the new password-less document.
 -   `merge`
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,25 @@
 # Changelog

+## paperless-ngx 2.20.8
+
+## paperless-ngx 2.20.7
+
+### Bug Fixes
+
+-   Performance fix: use subqueries to improve object retrieval in large installs [@shamoon](https://github.com/shamoon) ([#11950](https://github.com/paperless-ngx/paperless-ngx/pull/11950))
+-   Fix: correct user dropdown button icon styling [@shamoon](https://github.com/shamoon) ([#12092](https://github.com/paperless-ngx/paperless-ngx/issues/12092))
+-   Fix: fix broken docker create_classifier command in 2.20.6 [@shamoon](https://github.com/shamoon) ([#11965](https://github.com/paperless-ngx/paperless-ngx/issues/11965))
+
+### All App Changes
+
+<details>
+<summary>3 changes</summary>
+
+-   Performance fix: use subqueries to improve object retrieval in large installs [@shamoon](https://github.com/shamoon) ([#11950](https://github.com/paperless-ngx/paperless-ngx/pull/11950))
+-   Fix: correct user dropdown button icon styling [@shamoon](https://github.com/shamoon) ([#12092](https://github.com/paperless-ngx/paperless-ngx/issues/12092))
+-   Fix: fix broken docker create_classifier command in 2.20.6 [@shamoon](https://github.com/shamoon) ([#11965](https://github.com/paperless-ngx/paperless-ngx/issues/11965))
+</details>
+
 ## paperless-ngx 2.20.6

 ### Bug Fixes
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -89,6 +89,16 @@ You can view the document, edit its metadata, assign tags, correspondents,
 document types, and custom fields. You can also view the document history,
 download the document or share it via a share link.

+### Document File Versions
+
+Think of versions as **file history** for a document.
+
+-   Versions track the underlying file and extracted text content (OCR/text).
+-   Metadata such as tags, correspondent, document type, storage path and custom fields stay on the "root" document.
+-   By default, search and document content use the latest version.
+-   In document detail, selecting a version switches the preview, file metadata and content (and download etc buttons) to that version.
+-   Deleting a non-root version keeps metadata and falls back to the latest remaining version.
+
 ### Management Lists

 Paperless-ngx includes management lists for tags, correspondents, document types
@@ -564,6 +574,18 @@ For security reasons, webhooks can be limited to specific ports and disallowed f
 [configuration settings](configuration.md#workflow-webhooks) to change this behavior. If you are allowing non-admins to create workflows,
 you may want to adjust these settings to prevent abuse.

+##### Move to Trash {#workflow-action-move-to-trash}
+
+"Move to Trash" actions move the document to the trash. The document can be restored
+from the trash until the trash is emptied (after the configured delay or manually).
+
+The "Move to Trash" action will always be executed at the end of the workflow run,
+regardless of its position in the action list. After a "Move to Trash" action is executed
+no other workflow will be executed on the document.
+
+If a "Move to Trash" action is executed in a consume pipeline, the consumption
+will be aborted and the file will be deleted.
+
 #### Workflow placeholders

 Titles and webhook payloads can be generated by workflows using [Jinja templates](https://jinja.palletsprojects.com/en/3.1.x/templates/).
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "2.20.6"
+version = "2.20.8"
 description = "A community-supported supercharged document management system: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.10"
--- a/src-ui/e2e/dashboard/dashboard.spec.ts
+++ b/src-ui/e2e/dashboard/dashboard.spec.ts
@@ -52,11 +52,11 @@ test('dashboard saved view document links', async ({ page }) => {
 test('test slim sidebar', async ({ page }) => {
  await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
  await page.goto('/dashboard')
-  await page.locator('#sidebarMenu').getByRole('button').click()
+  await page.locator('.sidebar-slim-toggler').click()
  await expect(
    page.getByRole('link', { name: 'Dashboard' }).getByText('Dashboard')
  ).toBeHidden()
-  await page.locator('#sidebarMenu').getByRole('button').click()
+  await page.locator('.sidebar-slim-toggler').click()
  await expect(
    page.getByRole('link', { name: 'Dashboard' }).getByText('Dashboard')
  ).toBeVisible()
--- a/src-ui/e2e/permissions/global-permissions.spec.ts
+++ b/src-ui/e2e/permissions/global-permissions.spec.ts
@@ -33,9 +33,9 @@ test('should not allow user to view correspondents', async ({ page }) => {
  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
  await page.goto('/dashboard')
  await expect(
-    page.getByRole('link', { name: 'Correspondents' })
+    page.getByRole('link', { name: 'Attributes' })
  ).not.toBeAttached()
-  await page.goto('/correspondents')
+  await page.goto('/attributes/correspondents')
  await expect(page.locator('body')).toHaveText(
    /You don't have permissions to do that/i
  )
@@ -44,8 +44,10 @@ test('should not allow user to view correspondents', async ({ page }) => {
 test('should not allow user to view tags', async ({ page }) => {
  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
  await page.goto('/dashboard')
-  await expect(page.getByRole('link', { name: 'Tags' })).not.toBeAttached()
-  await page.goto('/tags')
+  await expect(
+    page.getByRole('link', { name: 'Attributes' })
+  ).not.toBeAttached()
+  await page.goto('/attributes/tags')
  await expect(page.locator('body')).toHaveText(
    /You don't have permissions to do that/i
  )
@@ -55,9 +57,9 @@ test('should not allow user to view document types', async ({ page }) => {
  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
  await page.goto('/dashboard')
  await expect(
-    page.getByRole('link', { name: 'Document Types' })
+    page.getByRole('link', { name: 'Attributes' })
  ).not.toBeAttached()
-  await page.goto('/documenttypes')
+  await page.goto('/attributes/documenttypes')
  await expect(page.locator('body')).toHaveText(
    /You don't have permissions to do that/i
  )
@@ -67,9 +69,9 @@ test('should not allow user to view storage paths', async ({ page }) => {
  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
  await page.goto('/dashboard')
  await expect(
-    page.getByRole('link', { name: 'Storage Paths' })
+    page.getByRole('link', { name: 'Attributes' })
  ).not.toBeAttached()
-  await page.goto('/storagepaths')
+  await page.goto('/attributes/storagepaths')
  await expect(page.locator('body')).toHaveText(
    /You don't have permissions to do that/i
  )
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "paperless-ngx-ui",
-  "version": "2.20.6",
+  "version": "2.20.8",
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "ng": "ng",
--- a/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@ -11,13 +11,9 @@ import { DashboardComponent } from './components/dashboard/dashboard.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
 import { DocumentListComponent } from './components/document-list/document-list.component'
-import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
+import { DocumentAttributesComponent } from './components/manage/document-attributes/document-attributes.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
-import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
 import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
 import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
@@ -106,52 +102,76 @@ export const routes: Routes = [
        },
      },
      {
-        path: 'tags',
-        component: TagListComponent,
+        path: 'attributes',
+        component: DocumentAttributesComponent,
        canActivate: [PermissionsGuard],
        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.Tag,
-          },
-          componentName: 'TagListComponent',
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.Correspondent,
+            },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+            { action: PermissionAction.View, type: PermissionType.StoragePath },
+            { action: PermissionAction.View, type: PermissionType.CustomField },
+          ],
+          componentName: 'DocumentAttributesComponent',
        },
      },
      {
-        path: 'documenttypes',
-        component: DocumentTypeListComponent,
+        path: 'attributes/:section',
+        component: DocumentAttributesComponent,
        canActivate: [PermissionsGuard],
        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.DocumentType,
-          },
-          componentName: 'DocumentTypeListComponent',
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.Correspondent,
+            },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+            { action: PermissionAction.View, type: PermissionType.StoragePath },
+            { action: PermissionAction.View, type: PermissionType.CustomField },
+          ],
+          componentName: 'DocumentAttributesComponent',
        },
      },
+      {
+        path: 'documentproperties',
+        redirectTo: '/attributes',
+        pathMatch: 'full',
+      },
+      {
+        path: 'documentproperties/:section',
+        redirectTo: '/attributes/:section',
+        pathMatch: 'full',
+      },
+      {
+        path: 'tags',
+        redirectTo: '/attributes/tags',
+        pathMatch: 'full',
+      },
      {
        path: 'correspondents',
-        component: CorrespondentListComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.Correspondent,
-          },
-          componentName: 'CorrespondentListComponent',
-        },
+        redirectTo: '/attributes/correspondents',
+        pathMatch: 'full',
+      },
+      {
+        path: 'documenttypes',
+        redirectTo: '/attributes/documenttypes',
+        pathMatch: 'full',
      },
      {
        path: 'storagepaths',
-        component: StoragePathListComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.StoragePath,
-          },
-          componentName: 'StoragePathListComponent',
-        },
+        redirectTo: '/attributes/storagepaths',
+        pathMatch: 'full',
      },
      {
        path: 'logs',
@@ -239,15 +259,8 @@ export const routes: Routes = [
      },
      {
        path: 'customfields',
-        component: CustomFieldsComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.CustomField,
-          },
-          componentName: 'CustomFieldsComponent',
-        },
+        redirectTo: '/attributes/customfields',
+        pathMatch: 'full',
      },
      {
        path: 'workflows',
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -195,8 +195,8 @@ export class AppComponent implements OnInit, OnDestroy {
      },
      {
        anchorId: 'tour.tags',
-        content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
-        route: '/tags',
+        content: $localize`Attributes like tags, correspondents, document types, storage paths and custom fields can all be managed here. They can also be created from the document edit view.`,
+        route: '/attributes/tags',
        backdropConfig: {
          offset: 0,
        },
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -5,13 +5,13 @@
  i18n-info
  >
  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
-    <i-bs class="me-1" name="airplane"></i-bs>&nbsp;<ng-container i18n>Start tour</ng-container>
+    <i-bs class="me-2" name="airplane"></i-bs><ng-container i18n>Start tour</ng-container>
  </button>
  @if (permissionsService.isAdmin()) {
    <button class="btn btn-sm btn-outline-primary position-relative ms-md-5 me-1" (click)="showSystemStatus()"
      [disabled]="!systemStatus">
      @if (!systemStatus) {
-        <div class="spinner-border spinner-border-sm me-1 h-75" role="status"></div>
+        <div class="spinner-border spinner-border-sm me-2 h-75" role="status"></div>
      } @else {
        <i-bs class="me-2" name="card-checklist"></i-bs>
        @if (systemStatusHasErrors) {
@@ -28,7 +28,7 @@
    </button>
    <a class="btn btn-sm btn-primary" href="admin/" target="_blank">
      <ng-container i18n>Open Django Admin</ng-container>
-      &nbsp;<i-bs name="arrow-up-right"></i-bs>
+      <i-bs class="ms-2" name="arrow-up-right"></i-bs>
    </a>
  }
 </pngx-page-header>
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.html
@@ -6,10 +6,10 @@
  >
  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
-      <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
    </button>
    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-      <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
+      <i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
    </button>
    <div class="form-inline d-flex align-items-center">
      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
@@ -113,12 +113,12 @@
          <td scope="row">
            <div class="btn-group" role="group">
              <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                <i-bs name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
              </button>
              <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                @if (task.related_document) {
                  <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                    <i-bs name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
+                    <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
                  </button>
                }
              </ng-container>
--- a/src-ui/src/app/components/admin/trash/trash.component.html
+++ b/src-ui/src/app/components/admin/trash/trash.component.html
@@ -5,16 +5,16 @@
    i18n-info
    infoLink="usage/#document-trash">
    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
-        <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+        <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
-        <i-bs name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore selected</ng-container>
+        <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete selected</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Empty trash</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
    </button>
 </pngx-page-header>

@@ -75,10 +75,10 @@
                    </div>
                    <div class="btn-group d-none d-sm-block">
                        <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
-                            <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore</ng-container>
+                            <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore</ng-container>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
-                            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                        </button>
                    </div>
                    </td>
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
@@ -11,7 +11,7 @@
  <h4 class="d-flex">
    <ng-container i18n>Users</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add User</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add User</ng-container>
    </button>
  </h4>
  <ul class="list-group">
@@ -32,10 +32,10 @@
          <div class="col">
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
              </button>
              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
              </button>
            </div>
          </div>
@@ -49,7 +49,7 @@
  <h4 class="mt-4 d-flex">
    <ng-container i18n>Groups</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Group</ng-container>
    </button>
  </h4>
  <ul class="list-group">
@@ -70,10 +70,10 @@
          <div class="col">
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
              </button>
              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
              </button>
            </div>
          </div>
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -86,14 +86,14 @@
            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-1" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
+              <i-bs class="me-2" name="house"></i-bs><span><ng-container i18n>Dashboard</ng-container></span>
            </a>
          </li>
          <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-1" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
+              <i-bs class="me-2" name="files"></i-bs><span><ng-container i18n>Documents</ng-container></span>
            </a>
          </li>
        </ul>
@@ -117,8 +117,7 @@
                    routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
                    [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                    popoverClass="popover-slim">
-                    <i-bs class="me-1" name="funnel"></i-bs>
-                      <span>&nbsp;<div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
+                    <i-bs class="me-2" name="funnel"></i-bs><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
                        @if (showSidebarCounts && !slimSidebarEnabled) {
                          <span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
                        }
@@ -151,7 +150,7 @@
                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                  popoverClass="popover-slim">
-                  <i-bs class="me-1" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <i-bs class="me-2" name="file-text"></i-bs><span>{{d.title | documentTitle}}</span>
                  <span class="close flex-column justify-content-center" (click)="closeDocument(d); $event.preventDefault()">
                    <i-bs name="x"></i-bs>
                  </span>
@@ -163,7 +162,7 @@
                <a class="nav-link app-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-1" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                  <i-bs class="me-2" name="x"></i-bs><span><ng-container i18n>Close all</ng-container></span>
                </a>
              </li>
            }
@@ -175,49 +174,65 @@
            <span i18n>Manage</span>
          </h6>
          <ul class="nav flex-column mb-2">
-            <li class="nav-item app-link"
-              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-              <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
-              tourAnchor="tour.tags">
-              <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
-                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
-                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link"
-              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-              <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-              <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
-              <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
-              </a>
-            </li>
+            @if (canManageAttributes) {
+              <li class="nav-item app-link" tourAnchor="tour.tags">
+                <div class="d-flex align-items-center attributes-row">
+                  <a class="nav-link flex-fill" routerLink="attributes" routerLinkActive="active" (click)="closeMenu()"
+                    ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                    container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                    <i-bs class="me-2" name="stack"></i-bs><span><ng-container i18n>Attributes</ng-container></span>
+                  </a>
+                  @if (!slimSidebarEnabled) {
+                    <button
+                      type="button"
+                      class="btn btn-link btn-sm text-muted p-0 me-3 attributes-expand-btn"
+                      (click)="toggleAttributesSections($event)"
+                      [attr.aria-label]="attributesSectionsCollapsed ? 'Expand attributes sections' : 'Collapse attributes sections'"
+                      i18n-aria-label
+                    >
+                      <i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
+                    </button>
+                  }
+                </div>
+                <div
+                  class="attributes-submenu ms-2"
+                  [ngbCollapse]="slimSidebarEnabled || attributesSectionsCollapsed"
+                >
+                  <ul class="nav flex-column">
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
+                      <a class="nav-link py-1" routerLink="attributes/tags" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="tags"></i-bs><span><ng-container i18n>Tags</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+                      <a class="nav-link py-1" routerLink="attributes/correspondents" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="person"></i-bs><span><ng-container i18n>Correspondents</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+                      <a class="nav-link py-1" routerLink="attributes/documenttypes" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="hash"></i-bs><span><ng-container i18n>Document types</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+                      <a class="nav-link py-1" routerLink="attributes/storagepaths" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="folder"></i-bs><span><ng-container i18n>Storage paths</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
+                      <a class="nav-link py-1" routerLink="attributes/customfields" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="ui-radios"></i-bs><span><ng-container i18n>Custom fields</ng-container></span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            }
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
              <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="window-stack"></i-bs><span>&nbsp;<ng-container i18n>Saved Views</ng-container></span>
+                <i-bs class="me-2" name="window-stack"></i-bs><span><ng-container i18n>Saved Views</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link"
@@ -226,7 +241,7 @@
              <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
+                <i-bs class="me-2" name="boxes"></i-bs><span><ng-container i18n>Workflows</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
@@ -234,14 +249,14 @@
              <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
+                <i-bs class="me-2" name="envelope"></i-bs><span><ng-container i18n>Mail</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
+                <i-bs class="me-2" name="trash"></i-bs><span><ng-container i18n>Trash</ng-container></span>
              </a>
            </li>
          </ul>
@@ -257,21 +272,21 @@
              <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
+                <i-bs class="me-2" name="gear"></i-bs><span><ng-container i18n>Settings</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.AppConfig }">
              <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
+                <i-bs class="me-2" name="sliders2-vertical"></i-bs><span><ng-container i18n>Configuration</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
              <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
+                <i-bs class="me-2" name="people"></i-bs><span><ng-container i18n>Users & Groups</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link"
@@ -280,7 +295,7 @@
              <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="list-task"></i-bs><span>&nbsp;<ng-container i18n>File Tasks</ng-container>@if (tasksService.failedFileTasks.length > 0) {
+                <i-bs class="me-2" name="list-task"></i-bs><span><ng-container i18n>File Tasks</ng-container>@if (tasksService.failedFileTasks.length > 0) {
                  <span><span class="badge bg-danger ms-2 d-inline">{{tasksService.failedFileTasks.length}}</span></span>
                }</span>
                @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
@@ -293,7 +308,7 @@
                <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
                  i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-1" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
+                  <i-bs class="me-2" name="text-left"></i-bs><span><ng-container i18n>Logs</ng-container></span>
                </a>
              </li>
            }
@@ -302,7 +317,7 @@
                target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="d-flex" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
+                <i-bs class="d-flex me-2" name="question-circle"></i-bs><span><ng-container i18n>Documentation</ng-container></span>
              </a>
            </li>
            <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
@@ -341,9 +356,9 @@
                          href="https://github.com/paperless-ngx/paperless-ngx/releases"
                          [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
                          container="body">
-                          <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                          <i-bs width="1.2em" height="1.2em" name="info-circle" class="me-1"></i-bs>
                          @if (appRemoteVersion?.update_available) {
-                            &nbsp;<ng-container i18n>Update available</ng-container>
+                            <ng-container i18n>Update available</ng-container>
                          }
                        </a>
                      }
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -177,6 +177,15 @@ main {
  }
 }

+.attributes-row .attributes-expand-btn {
+  opacity: 0.2;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.attributes-row:hover .attributes-expand-btn {
+  opacity: 1;
+}
+
 .sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
@@ -281,7 +290,7 @@ main {
 .navbar .dropdown-menu {
  font-size: 0.875rem; // body size

-  a i-bs {
+  a i-bs, button i-bs {
    opacity: 0.6;
  }
 }
--- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
@@ -28,7 +28,10 @@ import {
  DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
@@ -240,9 +243,19 @@ describe('AppFrameComponent', () => {

  it('should support toggling slim sidebar and saving', fakeAsync(() => {
    const saveSettingSpy = jest.spyOn(settingsService, 'set')
+    settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
    expect(component.slimSidebarEnabled).toBeFalsy()
    expect(component.slimSidebarAnimating).toBeFalsy()
    component.toggleSlimSidebar()
+    const requests = httpTestingController.match(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    expect(requests).toHaveLength(1)
+    expect(requests[0].request.body.settings.slim_sidebar).toBe(true)
+    expect(
+      requests[0].request.body.settings.attributes_sections_collapsed
+    ).toEqual(['attributes'])
+    requests[0].flush({ success: true })
    expect(component.slimSidebarAnimating).toBeTruthy()
    tick(200)
    expect(component.slimSidebarAnimating).toBeFalsy()
@@ -251,6 +264,10 @@ describe('AppFrameComponent', () => {
      SETTINGS_KEYS.SLIM_SIDEBAR,
      true
    )
+    expect(saveSettingSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
  }))

  it('should show error on toggle slim sidebar if store settings fails', () => {
@@ -258,7 +275,7 @@ describe('AppFrameComponent', () => {
    const toastSpy = jest.spyOn(toastService, 'showError')
    component.toggleSlimSidebar()
    httpTestingController
-      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .match(`${environment.apiBaseUrl}ui_settings/`)[0]
      .flush('error', {
        status: 500,
        statusText: 'error',
@@ -373,4 +390,103 @@ describe('AppFrameComponent', () => {
  it('should call maybeRefreshDocumentCounts after saved views reload', () => {
    expect(maybeRefreshSpy).toHaveBeenCalled()
  })
+
+  it('should indicate attributes management availability when any permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Tag
+      })
+
+    expect(component.canManageAttributes).toBe(true)
+  })
+
+  it('should indicate attributes management availability for other permission types', () => {
+    const canSpy = jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Correspondent
+      })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.DocumentType
+    })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.StoragePath
+    })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.CustomField
+    })
+    expect(component.canManageAttributes).toBe(true)
+  })
+
+  it('should toggle attributes sections and stop event bubbling', () => {
+    const preventDefault = jest.fn()
+    const stopPropagation = jest.fn()
+    const setSpy = jest.spyOn(settingsService, 'set')
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+
+    component.toggleAttributesSections({
+      preventDefault,
+      stopPropagation,
+    } as any)
+
+    expect(preventDefault).toHaveBeenCalled()
+    expect(stopPropagation).toHaveBeenCalled()
+    expect(setSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
+  })
+
+  it('should show error when saving slim sidebar setting fails', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    jest
+      .spyOn(settingsService, 'storeSettings')
+      .mockReturnValue(throwError(() => new Error('boom')))
+
+    component.slimSidebarEnabled = true
+
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should show error when saving attributes collapsed setting fails', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    jest
+      .spyOn(settingsService, 'storeSettings')
+      .mockReturnValue(throwError(() => new Error('boom')))
+
+    component.attributesSectionsCollapsed = true
+
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should persist attributes section collapse state', () => {
+    const setSpy = jest.spyOn(settingsService, 'set')
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+
+    component.attributesSectionsCollapsed = true
+
+    expect(setSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
+  })
+
+  it('should collapse attributes sections when enabling slim sidebar', () => {
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+    settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
+    settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, false)
+
+    component.toggleSlimSidebar()
+
+    expect(component.attributesSectionsCollapsed).toBe(true)
+  })
 })
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -21,7 +21,7 @@ import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { CollapsibleSection, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
@@ -140,12 +140,35 @@ export class AppFrameComponent

  toggleSlimSidebar(): void {
    this.slimSidebarAnimating = true
-    this.slimSidebarEnabled = !this.slimSidebarEnabled
+    const slimSidebarEnabled = !this.slimSidebarEnabled
+    this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, slimSidebarEnabled)
+    if (slimSidebarEnabled) {
+      this.settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [
+        CollapsibleSection.ATTRIBUTES,
+      ])
+    }
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
    setTimeout(() => {
      this.slimSidebarAnimating = false
    }, 200) // slightly longer than css animation for slim sidebar
  }

+  toggleAttributesSections(event?: Event): void {
+    event?.preventDefault()
+    event?.stopPropagation()
+    this.attributesSectionsCollapsed = !this.attributesSectionsCollapsed
+  }
+
  get versionString(): string {
    return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
  }
@@ -167,6 +190,31 @@ export class AppFrameComponent
    )
  }

+  get canManageAttributes(): boolean {
+    return (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Tag
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Correspondent
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.DocumentType
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.StoragePath
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.CustomField
+      )
+    )
+  }
+
  get slimSidebarEnabled(): boolean {
    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
  }
@@ -186,6 +234,31 @@ export class AppFrameComponent
      })
  }

+  get attributesSectionsCollapsed(): boolean {
+    return this.settingsService
+      .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
+      ?.includes(CollapsibleSection.ATTRIBUTES)
+  }
+
+  set attributesSectionsCollapsed(collapsed: boolean) {
+    // TODO: refactor to be able to toggle individual sections, if implemented
+    this.settingsService.set(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      collapsed ? [CollapsibleSection.ATTRIBUTES] : []
+    )
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
+  }
+
  get aiEnabled(): boolean {
    return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
  }
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.html
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
@@ -49,17 +49,13 @@
                [disabled]="disablePrimaryButton(type, item)"
                (mouseenter)="onButtonHover($event)">
                    @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.SavedView) {
-                        <i-bs width="1em" height="1em" name="eye"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="eye" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
-                        <i-bs width="1em" height="1em" name="pencil"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                    } @else {
-                        <i-bs width="1em" height="1em" name="filter"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Filter documents</ng-container></span>
+                        <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><span><ng-container i18n>Filter documents</ng-container></span>
                    }
                </button>
                @if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
@@ -69,11 +65,9 @@
                    [disabled]="disableSecondaryButton(type, item)"
                    (mouseenter)="onButtonHover($event)">
                        @if (type === DataType.Document) {
-                            <i-bs width="1em" height="1em" name="download"></i-bs>
-                            <span>&nbsp;<ng-container i18n>Download</ng-container></span>
+                            <i-bs width="1em" height="1em" name="download" class="me-1"></i-bs><span><ng-container i18n>Download</ng-container></span>
                        } @else {
-                            <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
-                            <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                        }
                    </button>
                }
--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
+++ b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
@@ -20,7 +20,7 @@
                    @for (docId of value; track docId) {
                      @if (getDocumentTitle(docId)) {
                          <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
-                              <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
+                              <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ getDocumentTitle(docId) }}</span>
                          </a>
                      }
                    }
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
@@ -1,7 +1,6 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions">
    <button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
-      <i-bs name="ui-radios"></i-bs>
-      <div class="d-none d-lg-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
+      <i-bs name="ui-radios"></i-bs><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
        <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
@@ -18,7 +17,7 @@
            @if (!filterText?.length || filteredFields.length === 0) {
                <button class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
                    <small>
-                        <i-bs width=".9em" height=".9em" name="asterisk"></i-bs>&nbsp;<ng-container i18n>Create new field</ng-container>
+                        <i-bs width=".9em" height=".9em" name="asterisk" class="me-1"></i-bs><ng-container i18n>Create new field</ng-container>
                    </small>
                </button>
            }
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -1,8 +1,7 @@
@if (useDropdown) {
  <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
    <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
-      <i-bs name="{{icon}}"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+      <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
      @if (isActive) {
        <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
      }
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
@@ -1,7 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
  <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
@@ -17,7 +17,7 @@
      @switch (objectForm.get('data_type').value) {
        @case (CustomFieldDataType.Select) {
          <button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
-            <span i18n>Add option</span>&nbsp;<i-bs name="plus-circle"></i-bs>
+            <span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
          </button>
          <div formArrayName="select_options">
            @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.html
@@ -9,19 +9,24 @@
  </div>
  <div class="modal-body">
    <div class="row">
-      <div class="col-md-4">
+      <div class="col-md-6">
        <pngx-input-text [horizontal]="true" i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
      </div>
-      <div class="col-md-3">
+      <div class="col-md-4">
        <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
      </div>
-      <div class="col-md-3">
-        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
-      </div>
      <div class="col-md-2 pt-2">
        <pngx-input-switch [horizontal]="true" i18n-title title="Enabled" formControlName="enabled"></pngx-input-switch>
      </div>
    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-switch [horizontal]="true" i18n-title title="Stop further processing" formControlName="stop_processing" i18n-hint hint="Stop processing further rules if this rule queues any document(s)."></pngx-input-switch>
+      </div>
+    </div>
    <hr class="mt-0"/>
    <div class="row">
      <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the criteria specified below.</p>
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
@@ -222,6 +222,7 @@ export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
      ),
      assign_correspondent: new FormControl(null),
      assign_owner_from_rule: new FormControl(true),
+      stop_processing: new FormControl(false),
    })
  }

--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
@@ -30,7 +30,7 @@
              <div class="d-flex">
                <p class="p-2" i18n>Trigger Workflow On:</p>
                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
-                  <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Trigger</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Trigger</ng-container>
                </button>
              </div>
              <div ngbAccordion [closeOthers]="true">
@@ -72,7 +72,7 @@
              <div class="d-flex">
                <p class="p-2" i18n>Apply Actions:</p>
                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
-                  <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Action</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Action</ng-container>
                </button>
              </div>
              <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@@ -187,7 +187,7 @@
                (click)="addFilter(formGroup)"
                [disabled]="!canAddFilter(formGroup)"
              >
-                <i-bs name="plus-circle"></i-bs>&nbsp;<span i18n>Add filter</span>
+                <i-bs name="plus-circle" class="me-1"></i-bs><span i18n>Add filter</span>
              </button>
            </div>
            <ul class="mt-2 list-group filters" formArrayName="filters">
@@ -448,6 +448,13 @@
          </div>
        </div>
      }
+      @case (WorkflowActionType.MoveToTrash) {
+        <div class="row">
+          <div class="col">
+            <p class="text-muted small" i18n>The document will be moved to the trash at the end of the workflow run.</p>
+          </div>
+        </div>
+      }
    }
  </div>
 </ng-template>
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
@@ -143,6 +143,10 @@ export const WORKFLOW_ACTION_OPTIONS = [
    id: WorkflowActionType.PasswordRemoval,
    name: $localize`Password removal`,
  },
+  {
+    id: WorkflowActionType.MoveToTrash,
+    name: $localize`Move to trash`,
+  },
 ]

 export enum TriggerFilterType {
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -1,7 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
  <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs name="{{icon}}"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    @if (!editing && selectionModel.totalCount > 0) {
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
    }
--- a/src-ui/src/app/components/common/input/check/check.component.html
+++ b/src-ui/src/app/components/common/input/check/check.component.html
@@ -5,7 +5,7 @@
        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
        @if (removable) {
          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
            </button>
          }
        </div>
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -4,7 +4,7 @@
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@@ -9,7 +9,7 @@
        }
        @if (removable) {
          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
@@ -44,11 +44,11 @@
        }
        @if (document.title) {
          <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
+            <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{document.title}}</span>
          </a>
        } @else {
          <span class="badge bg-light text-muted" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill"></i-bs>&nbsp;<span i18n>Not found</span>
+            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></i-bs><span i18n>Not found</span>
          </span>
        }
      </div>
--- a/src-ui/src/app/components/common/input/entries/entries.component.html
+++ b/src-ui/src/app/components/common/input/entries/entries.component.html
@@ -5,7 +5,7 @@
        <label class="form-label mb-0" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      }
      <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="addEntry()">
-        <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add</ng-container>
+        <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add</ng-container>
      </button>
    </div>
    <div class="position-relative">
--- a/src-ui/src/app/components/common/input/file/file.component.html
+++ b/src-ui/src/app/components/common/input/file/file.component.html
@@ -6,7 +6,7 @@
        }
        @if (removable) {
          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
            </button>
          }
        </div>
--- a/src-ui/src/app/components/common/input/monetary/monetary.component.html
+++ b/src-ui/src/app/components/common/input/monetary/monetary.component.html
@@ -6,7 +6,7 @@
      }
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
        </button>
      }
    </div>
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@@ -6,7 +6,7 @@
      }
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -7,7 +7,7 @@
        }
        @if (removable) {
          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
            </button>
        }
      </div>
--- a/src-ui/src/app/components/common/input/switch/switch.component.html
+++ b/src-ui/src/app/components/common/input/switch/switch.component.html
@@ -10,7 +10,7 @@
        </label>
        @if (removable) {
          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
@@ -22,7 +22,7 @@
          <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
            {{title}}
            @if (showUnsetNote && isUnset) {
-              &nbsp;<i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
+              <i-bs class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
            }
          </label>
        }
--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -6,7 +6,7 @@
      }
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
--- a/src-ui/src/app/components/common/input/textarea/textarea.component.html
+++ b/src-ui/src/app/components/common/input/textarea/textarea.component.html
@@ -6,7 +6,7 @@
      }
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
--- a/src-ui/src/app/components/common/input/url/url.component.html
+++ b/src-ui/src/app/components/common/input/url/url.component.html
@@ -4,7 +4,7 @@
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
        </button>
      }
    </div>
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@@ -5,7 +5,7 @@
      @if (id) {
        <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
          @if (copied) {
-            <i-bs width="1em" height="1em" name="clipboard-check"></i-bs>&nbsp;<ng-container i18n>Copied!</ng-container>
+            <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
          } @else {
            ID: {{id}}
          }
--- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss
+++ b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss
@@ -150,4 +150,8 @@
  position: absolute;
  inset: 0;
  pointer-events: none;
+
+  & .annotationTextContent {
+    opacity: 0;
+  }
 }
--- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts
+++ b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts
@@ -65,6 +65,13 @@ describe('PngxPdfViewerComponent', () => {
    const pageSpy = jest.fn()
    component.pageChange.subscribe(pageSpy)

+    // In real usage the viewer may have multiple pages; our pdfjs mock defaults
+    // to a single page, so explicitly simulate a multi-page document here.
+    const pdf = (component as any).pdf as { numPages: number }
+    pdf.numPages = 3
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.setDocument(pdf)
+
    component.zoomScale = PdfZoomScale.PageFit
    component.zoom = PdfZoomLevel.Two
    component.rotation = 90
@@ -81,7 +88,6 @@ describe('PngxPdfViewerComponent', () => {
      page: new SimpleChange(undefined, 2, false),
    })

-    const viewer = (component as any).pdfViewer as PDFViewer
    expect(viewer.pagesRotation).toBe(90)
    expect(viewer.currentPageNumber).toBe(2)
    expect(pageSpy).toHaveBeenCalledWith(2)
@@ -196,6 +202,8 @@ describe('PngxPdfViewerComponent', () => {
    const scaleSpy = jest.spyOn(component as any, 'applyViewerState')
    const resizeSpy = jest.spyOn(component as any, 'setupResizeObserver')

+    // Angular sets the input value before calling ngOnChanges; mirror that here.
+    component.src = 'test.pdf'
    component.ngOnChanges({
      src: new SimpleChange(undefined, 'test.pdf', true),
      zoomScale: new SimpleChange(
@@ -211,6 +219,25 @@ describe('PngxPdfViewerComponent', () => {
    expect(scaleSpy).not.toHaveBeenCalled()
  })

+  it('resets viewer state on src change', () => {
+    const mockViewer = {
+      setDocument: jest.fn(),
+      currentPageNumber: 7,
+      cleanup: jest.fn(),
+    }
+    ;(component as any).pdfViewer = mockViewer
+    ;(component as any).loadingTask = { destroy: jest.fn() }
+    jest.spyOn(component as any, 'loadDocument').mockImplementation(() => {})
+
+    component.src = 'test.pdf'
+    component.ngOnChanges({
+      src: new SimpleChange(undefined, 'test.pdf', true),
+    })
+
+    expect(mockViewer.setDocument).toHaveBeenCalledWith(null)
+    expect(mockViewer.currentPageNumber).toBe(1)
+  })
+
  it('applies viewer state after view init when already loaded', () => {
    const applySpy = jest.spyOn(component as any, 'applyViewerState')
    ;(component as any).hasLoaded = true
--- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts
+++ b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts
@@ -81,7 +81,7 @@ export class PngxPdfViewerComponent
    this.dispatchFindIfReady()
    this.rendered.emit()
  }
-  private readonly onPagesInit = () => this.applyScale()
+  private readonly onPagesInit = () => this.applyViewerState()
  private readonly onPageChanging = (evt: { pageNumber: number }) => {
    // Avoid [(page)] two-way binding re-triggers navigation
    this.lastViewerPage = evt.pageNumber
@@ -90,8 +90,10 @@ export class PngxPdfViewerComponent

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['src']) {
-      this.hasLoaded = false
-      this.loadDocument()
+      this.resetViewerState()
+      if (this.src) {
+        this.loadDocument()
+      }
      return
    }

@@ -139,6 +141,21 @@ export class PngxPdfViewerComponent
    this.pdfViewer = undefined
  }

+  private resetViewerState(): void {
+    this.hasLoaded = false
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+    this.lastViewerPage = undefined
+    this.loadingTask?.destroy()
+    this.loadingTask = undefined
+    this.pdf = undefined
+    this.linkService.setDocument(null)
+    if (this.pdfViewer) {
+      this.pdfViewer.setDocument(null)
+      this.pdfViewer.currentPageNumber = 1
+    }
+  }
+
  private async loadDocument(): Promise<void> {
    if (this.hasLoaded) {
      return
@@ -222,7 +239,11 @@ export class PngxPdfViewerComponent
      hasPages &&
      this.page !== this.lastViewerPage
    ) {
-      this.pdfViewer.currentPageNumber = this.page
+      const nextPage = Math.min(
+        Math.max(Math.trunc(this.page), 1),
+        this.pdfViewer.pagesCount
+      )
+      this.pdfViewer.currentPageNumber = nextPage
    }
    if (this.page === this.lastViewerPage) {
      this.lastViewerPage = undefined
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
@@ -1,7 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs name="person-fill-lock"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
  <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@@ -90,7 +90,7 @@
            <div class="list-group">
              @for (provider of socialAccountProviders; track provider.name) {
                <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
-                  {{provider.name}}&nbsp;<i-bs class="pb-1 ps-1" name="box-arrow-up-right"></i-bs>
+                  {{provider.name}}<i-bs class="pb-1 ms-2" name="box-arrow-up-right"></i-bs>
                </a>
              }
            </div>
@@ -139,7 +139,7 @@
          <label class="d-block mb-2" i18n>Two-factor Authentication</label>
          @if (recoveryCodes) {
            <div class="alert alert-warning" role="alert">
-              <i-bs name="exclamation-triangle"></i-bs>&nbsp;<ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
+              <i-bs name="exclamation-triangle" class="me-1"></i-bs><ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
            </div>
            <div class="d-flex flex-row align-items-start mb-3">
              <ul class="list-group w-50">
@@ -156,12 +156,10 @@
              </ul>
              <button type="button" class="btn btn-sm btn-outline-secondary ms-2" (click)="copyRecoveryCodes()" i18n-title title="Copy">
                @if (!codesCopied) {
-                  <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
-                  &nbsp;<span i18n>Copy codes</span>
+                  <i-bs width="1em" height="1em" name="clipboard-fill" class="me-1"></i-bs><span i18n>Copy codes</span>
                }
                @if (codesCopied) {
-                  <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary"></i-bs>
-                  &nbsp;<span class="text-primary" i18n>Copied!</span>
+                  <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary me-1"></i-bs><span class="text-primary" i18n>Copied!</span>
                }
              </button>
            </div>
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
+++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
@@ -173,7 +173,7 @@
                    <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                  } @else {
                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.IndexOptimize)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                      <ng-container i18n>Run Task</ng-container>
                    </button>
                  }
@@ -207,7 +207,7 @@
                    <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                  } @else {
                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.TrainClassifier)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                      <ng-container i18n>Run Task</ng-container>
                    </button>
                  }
@@ -241,7 +241,7 @@
                    <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                  } @else {
                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.SanityCheck)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                      <ng-container i18n>Run Task</ng-container>
                    </button>
                  }
@@ -289,7 +289,7 @@
                      <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                    } @else {
                      <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.LLMIndexUpdate)">
-                        <i-bs name="play-fill"></i-bs>&nbsp;
+                        <i-bs name="play-fill" class="me-1"></i-bs>
                        <ng-container i18n>Run Task</ng-container>
                      </button>
                    }
@@ -313,10 +313,10 @@
 <div class="modal-footer">
  <button class="btn btn-sm d-flex align-items-center btn-dark btn btn-sm d-flex align-items-center btn-dark btn-outline-secondary" (click)="copy()">
    @if (!copied) {
-      <i-bs name="clipboard-fill"></i-bs>&nbsp;
+      <i-bs name="clipboard-fill" class="me-1"></i-bs>
    }
    @if (copied) {
-      <i-bs name="clipboard-check-fill"></i-bs>&nbsp;
+      <i-bs name="clipboard-check-fill" class="me-1"></i-bs>
    }
    <ng-container i18n>Copy</ng-container>
  </button>
--- a/src-ui/src/app/components/common/toast/toast.component.html
+++ b/src-ui/src/app/components/common/toast/toast.component.html
@@ -35,10 +35,10 @@
                    <div class="col offset-sm-3">
                    <button class="btn btn-sm btn-outline-secondary" (click)="copyError(toast.error)">
                        @if (!copied) {
-                        <i-bs name="clipboard"></i-bs>&nbsp;
+                        <i-bs name="clipboard" class="me-1"></i-bs>
                        }
                        @if (copied) {
-                        <i-bs name="clipboard-check"></i-bs>&nbsp;
+                        <i-bs name="clipboard-check" class="me-1"></i-bs>
                        }
                        <ng-container i18n>Copy Raw Error</ng-container>
                    </button>
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
@@ -2,7 +2,7 @@
  <div content tourAnchor="tour.upload-widget">
    <form class="justify-content-center d-flex flex-column align-items-center">
      <button type="button" class="btn btn-outline-dark bg-light shadow-sm w-100 h-100 pt-3 pb-3" (click)="fileUpload.click()">
-        <i-bs class="text-primary" name="plus-circle"></i-bs>&nbsp;
+        <i-bs class="text-primary me-1" name="plus-circle"></i-bs>
        <span class="text-primary" i18n>Upload documents</span>
        <div class="text-muted smaller fst-italic" i18n>or drop files anywhere</div>
      </button>
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -1,7 +1,7 @@
 <pngx-page-header [(title)]="title" [id]="documentId">
  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
    @if (previewNumPages) {
-      <div class="input-group input-group-sm d-none d-md-flex">
+      <div class="input-group input-group-sm ms-2 d-none d-md-flex">
        <div class="input-group-text" i18n>Page</div>
          <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
        <div class="input-group-text" i18n>of {{previewNumPages}}</div>
@@ -24,6 +24,16 @@
    <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
  </button>

+  <pngx-document-version-dropdown
+    [documentId]="documentId"
+    [versions]="document?.versions ?? []"
+    [selectedVersionId]="selectedVersionId"
+    [userIsOwner]="userIsOwner"
+    [userCanEdit]="userCanEdit"
+    (versionSelected)="onVersionSelected($event)"
+    (versionsUpdated)="onVersionsUpdated($event)"
+  />
+
  <div class="btn-group">
    <button (click)="download()" class="btn btn-sm btn-outline-primary" [disabled]="downloading">
      @if (downloading) {
@@ -46,29 +56,28 @@

  <div class="ms-auto" ngbDropdown>
    <button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle>
-      <i-bs name="three-dots"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+      <i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
      <button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit || !userIsOwner">
-        <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<span i18n>Reprocess</span>
+        <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><span i18n>Reprocess</span>
      </button>

      <button ngbDropdownItem (click)="printDocument()" [hidden]="useNativePdfViewer || isMobile">
-        <i-bs width="1em" height="1em" name="printer"></i-bs>&nbsp;<span i18n>Print</span>
+        <i-bs width="1em" height="1em" name="printer" class="me-1"></i-bs><span i18n>Print</span>
      </button>

      <button ngbDropdownItem (click)="moreLike()">
-        <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
+        <i-bs width="1em" height="1em" name="diagram-3" class="me-1"></i-bs><span i18n>More like this</span>
      </button>

      <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
-        <i-bs name="pencil"></i-bs>&nbsp;<ng-container i18n>PDF Editor</ng-container>
+        <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
      </button>

      @if (userIsOwner && (requiresPassword || password)) {
        <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
-          <i-bs name="unlock"></i-bs>&nbsp;<ng-container i18n>Remove Password</ng-container>
+          <i-bs name="unlock" class="me-1"></i-bs><ng-container i18n>Remove Password</ng-container>
        </button>
      }
    </div>
@@ -76,16 +85,15 @@

  <div class="ms-auto" ngbDropdown>
    <button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle>
-      <i-bs name="send"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Send</ng-container></div>
+      <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
      <button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
-        <i-bs name="link"></i-bs>&nbsp;<span i18n>Share Links</span>
+        <i-bs name="link" class="me-1"></i-bs><span i18n>Share Links</span>
      </button>
      @if (emailEnabled) {
        <button ngbDropdownItem (click)="openEmailDocument()">
-          <i-bs name="envelope"></i-bs>&nbsp;<span i18n>Email</span>
+          <i-bs name="envelope" class="me-1"></i-bs><span i18n>Email</span>
        </button>
      }
    </div>
@@ -457,7 +465,7 @@
        @if (!useNativePdfViewer) {
          <div class="preview-sticky pdf-viewer-container">
            <pngx-pdf-viewer
-              [src]="{ url: previewUrl, password: password }"
+              [src]="pdfSource"
              [renderMode]="PdfRenderMode.All"
              [(page)]="previewCurrentPage"
              [zoomScale]="previewZoomScale"
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -294,6 +294,27 @@ describe('DocumentDetailComponent', () => {
    component = fixture.componentInstance
  })

+  function initNormally() {
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(of(Object.assign({}, doc)))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+    fixture.detectChanges()
+  }
+
  it('should load four tabs via url params', () => {
    jest
      .spyOn(activatedRoute, 'paramMap', 'get')
@@ -354,6 +375,117 @@ describe('DocumentDetailComponent', () => {
    expect(component.document).toEqual(doc)
  })

+  it('should redirect to root when opening a version document id', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 10, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(throwError(() => ({ status: 404 }) as any))
+    const getRootSpy = jest
+      .spyOn(documentService, 'getRootId')
+      .mockReturnValue(of({ root_id: 3 }))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(getRootSpy).toHaveBeenCalledWith(10)
+    expect(navigateSpy).toHaveBeenCalledWith(['documents', 3, 'details'], {
+      replaceUrl: true,
+    })
+  })
+
+  it('should navigate to 404 when root lookup fails', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 10, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(throwError(() => ({ status: 404 }) as any))
+    jest
+      .spyOn(documentService, 'getRootId')
+      .mockReturnValue(throwError(() => new Error('boom')))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true })
+  })
+
+  it('should not render a delete button for the root/original version', () => {
+    const docWithVersions = {
+      ...doc,
+      versions: [
+        {
+          id: doc.id,
+          added: new Date('2024-01-01T00:00:00Z'),
+          version_label: 'Original',
+          checksum: 'aaaa',
+          is_root: true,
+        },
+        {
+          id: 10,
+          added: new Date('2024-01-02T00:00:00Z'),
+          version_label: 'Edited',
+          checksum: 'bbbb',
+          is_root: false,
+        },
+      ],
+    } as Document
+
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+    jest.spyOn(documentService, 'get').mockReturnValueOnce(of(docWithVersions))
+    jest
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValue(of({ has_archive_version: true } as any))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+    fixture.detectChanges()
+
+    const deleteButtons = fixture.debugElement.queryAll(
+      By.css('pngx-confirm-button')
+    )
+    expect(deleteButtons.length).toEqual(1)
+  })
+
  it('should fall back to details tab when duplicates tab is active but no duplicates', () => {
    initNormally()
    component.activeNavID = component.DocumentDetailNavIDs.Duplicates
@@ -532,6 +664,18 @@ describe('DocumentDetailComponent', () => {
    expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true })
  })

+  it('discard should request the currently selected version', () => {
+    initNormally()
+    const getSpy = jest.spyOn(documentService, 'get')
+    getSpy.mockClear()
+    getSpy.mockReturnValueOnce(of(doc))
+
+    component.selectedVersionId = 10
+    component.discard()
+
+    expect(getSpy).toHaveBeenCalledWith(component.documentId, 10)
+  })
+
  it('should 404 on invalid id', () => {
    const navigateSpy = jest.spyOn(router, 'navigate')
    jest
@@ -584,6 +728,18 @@ describe('DocumentDetailComponent', () => {
    )
  })

+  it('save should target currently selected version', () => {
+    initNormally()
+    component.selectedVersionId = 10
+    const patchSpy = jest.spyOn(documentService, 'patch')
+    patchSpy.mockReturnValue(of(doc))
+
+    component.save()
+
+    expect(patchSpy).toHaveBeenCalled()
+    expect(patchSpy.mock.calls[0][1]).toEqual(10)
+  })
+
  it('should show toast error on save if error occurs', () => {
    currentUserHasObjectPermissions = true
    initNormally()
@@ -1036,7 +1192,32 @@ describe('DocumentDetailComponent', () => {
    const metadataSpy = jest.spyOn(documentService, 'getMetadata')
    metadataSpy.mockReturnValue(of({ has_archive_version: true }))
    initNormally()
-    expect(metadataSpy).toHaveBeenCalled()
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, null)
+  })
+
+  it('should pass metadata version only for non-latest selected versions', () => {
+    const metadataSpy = jest.spyOn(documentService, 'getMetadata')
+    metadataSpy.mockReturnValue(of({ has_archive_version: true }))
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, null)
+
+    metadataSpy.mockClear()
+    component.document.versions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+    jest.spyOn(documentService, 'getPreviewUrl').mockReturnValue('preview-root')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-root')
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(of({ content: 'root' } as Document))
+
+    component.selectVersion(doc.id)
+    httpTestingController.expectOne('preview-root').flush('root')
+
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, doc.id)
  })

  it('should show an error if failed metadata retrieval', () => {
@@ -1441,26 +1622,88 @@ describe('DocumentDetailComponent', () => {
    expect(closeSpy).toHaveBeenCalled()
  })

-  function initNormally() {
-    jest
-      .spyOn(activatedRoute, 'paramMap', 'get')
-      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+  it('selectVersion should update preview and handle preview failures', () => {
+    const previewSpy = jest.spyOn(documentService, 'getPreviewUrl')
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    previewSpy.mockReturnValueOnce('preview-version')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-version')
    jest
      .spyOn(documentService, 'get')
-      .mockReturnValueOnce(of(Object.assign({}, doc)))
-    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+      .mockReturnValue(of({ content: 'version-content' } as Document))
+
+    component.selectVersion(10)
+    httpTestingController.expectOne('preview-version').flush('version text')
+
+    expect(component.previewUrl).toBe('preview-version')
+    expect(component.thumbUrl).toBe('thumb-version')
+    expect(component.previewText).toBe('version text')
+    expect(component.documentForm.get('content').value).toBe('version-content')
+    const pdfSource = component.pdfSource as { url: string; password?: string }
+    expect(pdfSource.url).toBe('preview-version')
+    expect(pdfSource.password).toBeUndefined()
+
+    previewSpy.mockReturnValueOnce('preview-error')
+    component.selectVersion(11)
+    httpTestingController
+      .expectOne('preview-error')
+      .error(new ErrorEvent('fail'))
+
+    expect(component.previewText).toContain('An error occurred loading content')
+  })
+
+  it('selectVersion should show toast if version content retrieval fails', () => {
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    jest.spyOn(documentService, 'getPreviewUrl').mockReturnValue('preview-ok')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-ok')
    jest
-      .spyOn(openDocumentsService, 'openDocument')
-      .mockReturnValueOnce(of(true))
-    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
-      of({
-        count: customFields.length,
-        all: customFields.map((f) => f.id),
-        results: customFields,
-      })
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValue(of({ has_archive_version: true } as any))
+    const contentError = new Error('content failed')
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(throwError(() => contentError))
+    const toastSpy = jest.spyOn(toastService, 'showError')
+
+    component.selectVersion(10)
+    httpTestingController.expectOne('preview-ok').flush('preview text')
+
+    expect(toastSpy).toHaveBeenCalledWith(
+      'Error retrieving version content',
+      contentError
    )
-    fixture.detectChanges()
-  }
+  })
+
+  it('onVersionSelected should delegate to selectVersion', () => {
+    const selectVersionSpy = jest
+      .spyOn(component, 'selectVersion')
+      .mockImplementation(() => {})
+
+    component.onVersionSelected(42)
+
+    expect(selectVersionSpy).toHaveBeenCalledWith(42)
+  })
+
+  it('onVersionsUpdated should sync open document versions and save', () => {
+    component.documentId = doc.id
+    component.document = { ...doc, versions: [] } as Document
+    const updatedVersions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+    const openDoc = { ...doc, versions: [] } as Document
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(openDoc)
+    const saveSpy = jest.spyOn(openDocumentsService, 'save')
+
+    component.onVersionsUpdated(updatedVersions)
+
+    expect(component.document.versions).toEqual(updatedVersions)
+    expect(openDoc.versions).toEqual(updatedVersions)
+    expect(saveSpy).toHaveBeenCalled()
+  })

  it('createDisabled should return true if the user does not have permission to add the specified data type', () => {
    currentUserCan = false
@@ -1554,6 +1797,70 @@ describe('DocumentDetailComponent', () => {
    expect(urlRevokeSpy).toHaveBeenCalled()
  })

+  it('should include version in download and print only for non-latest selected version', () => {
+    initNormally()
+    component.document.versions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+
+    const getDownloadUrlSpy = jest
+      .spyOn(documentService, 'getDownloadUrl')
+      .mockReturnValueOnce('download-latest')
+      .mockReturnValueOnce('print-latest')
+      .mockReturnValueOnce('download-non-latest')
+      .mockReturnValueOnce('print-non-latest')
+
+    component.selectedVersionId = 10
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    httpTestingController
+      .expectOne('download-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(2, doc.id, false, null)
+    httpTestingController
+      .expectOne('print-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.selectedVersionId = doc.id
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(3, doc.id, false, doc.id)
+    httpTestingController
+      .expectOne('download-non-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(4, doc.id, false, doc.id)
+    httpTestingController
+      .expectOne('print-non-latest')
+      .error(new ProgressEvent('failed'))
+  })
+
+  it('should omit version in download and print when no version is selected', () => {
+    initNormally()
+    component.document.versions = [] as any
+    ;(component as any).selectedVersionId = undefined
+
+    const getDownloadUrlSpy = jest
+      .spyOn(documentService, 'getDownloadUrl')
+      .mockReturnValueOnce('download-no-version')
+      .mockReturnValueOnce('print-no-version')
+
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    httpTestingController
+      .expectOne('download-no-version')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(2, doc.id, false, null)
+    httpTestingController
+      .expectOne('print-no-version')
+      .error(new ProgressEvent('failed'))
+  })
+
  it('should download a file with the correct filename', () => {
    const mockBlob = new Blob(['test content'], { type: 'text/plain' })
    const mockResponse = new HttpResponse({
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -36,7 +36,7 @@ import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { DataType } from 'src/app/data/datatype'
-import { Document } from 'src/app/data/document'
+import { Document, DocumentVersionInfo } from 'src/app/data/document'
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentNote } from 'src/app/data/document-note'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
@@ -110,6 +110,7 @@ import { PDFEditorComponent } from '../common/pdf-editor/pdf-editor.component'
 import { PngxPdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
 import {
  PdfRenderMode,
+  PdfSource,
  PdfZoomLevel,
  PdfZoomScale,
  PngxPdfDocumentProxy,
@@ -119,6 +120,7 @@ import { SuggestionsDropdownComponent } from '../common/suggestions-dropdown/sug
 import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import { DocumentHistoryComponent } from './document-history/document-history.component'
+import { DocumentVersionDropdownComponent } from './document-version-dropdown/document-version-dropdown.component'
 import { MetadataCollapseComponent } from './metadata-collapse/metadata-collapse.component'

 enum DocumentDetailNavIDs {
@@ -176,6 +178,7 @@ enum ContentRenderType {
    TextAreaComponent,
    RouterModule,
    PngxPdfViewerComponent,
+    DocumentVersionDropdownComponent,
  ],
 })
 export class DocumentDetailComponent
@@ -183,6 +186,7 @@ export class DocumentDetailComponent
  implements OnInit, OnDestroy, DirtyComponent
 {
  PdfRenderMode = PdfRenderMode
+
  documentsService = inject(DocumentService)
  private route = inject(ActivatedRoute)
  private tagService = inject(TagService)
@@ -227,12 +231,16 @@ export class DocumentDetailComponent
  title: string
  titleSubject: Subject<string> = new Subject()
  previewUrl: string
+  pdfSource?: PdfSource
  thumbUrl: string
  previewText: string
  previewLoaded: boolean = false
  tiffURL: string
  tiffError: string

+  // Versioning
+  selectedVersionId: number
+
  correspondents: Correspondent[]
  documentTypes: DocumentType[]
  storagePaths: StoragePath[]
@@ -310,13 +318,19 @@ export class DocumentDetailComponent
  }

  get archiveContentRenderType(): ContentRenderType {
-    return this.document?.archived_file_name
+    const hasArchiveVersion =
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
+    return hasArchiveVersion
      ? this.getRenderType('application/pdf')
-      : this.getRenderType(this.document?.mime_type)
+      : this.getRenderType(
+          this.metadata?.original_mime_type || this.document?.mime_type
+        )
  }

  get originalContentRenderType(): ContentRenderType {
-    return this.getRenderType(this.document?.mime_type)
+    return this.getRenderType(
+      this.metadata?.original_mime_type || this.document?.mime_type
+    )
  }

  get showThumbnailOverlay(): boolean {
@@ -345,6 +359,47 @@ export class DocumentDetailComponent
    return ContentRenderType.Other
  }

+  private updatePdfSource() {
+    this.pdfSource = {
+      url: this.previewUrl,
+      password: this.password,
+    }
+  }
+
+  private loadMetadataForSelectedVersion() {
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
+    this.documentsService
+      .getMetadata(this.documentId, selectedVersionId)
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (result) => {
+          this.metadata = result
+          this.tiffURL = null
+          this.tiffError = null
+          if (this.archiveContentRenderType === ContentRenderType.TIFF) {
+            this.tryRenderTiff()
+          }
+          if (
+            this.archiveContentRenderType !== ContentRenderType.PDF ||
+            this.useNativePdfViewer
+          ) {
+            this.previewLoaded = true
+          }
+        },
+        error: (error) => {
+          this.metadata = {} // allow display to fallback to <object> tag
+          this.toastService.showError(
+            $localize`Error retrieving metadata`,
+            error
+          )
+        },
+      })
+  }
+
  get isRTL() {
    if (!this.metadata || !this.metadata.lang) return false
    else {
@@ -420,7 +475,12 @@ export class DocumentDetailComponent
  }

  private loadDocument(documentId: number): void {
-    this.previewUrl = this.documentsService.getPreviewUrl(documentId)
+    let redirectedToRoot = false
+    this.selectedVersionId = documentId
+    this.previewUrl = this.documentsService.getPreviewUrl(
+      this.selectedVersionId
+    )
+    this.updatePdfSource()
    this.http
      .get(this.previewUrl, { responseType: 'text' })
      .pipe(
@@ -435,11 +495,29 @@ export class DocumentDetailComponent
            err.message ?? err.toString()
          }`),
      })
-    this.thumbUrl = this.documentsService.getThumbUrl(documentId)
+    this.thumbUrl = this.documentsService.getThumbUrl(this.selectedVersionId)
    this.documentsService
      .get(documentId)
      .pipe(
-        catchError(() => {
+        catchError((error) => {
+          if (error?.status === 404) {
+            // if not found, check if there's root document that exists and redirect if so
+            return this.documentsService.getRootId(documentId).pipe(
+              map((result) => {
+                const rootId = result?.root_id
+                if (rootId && rootId !== documentId) {
+                  const section =
+                    this.route.snapshot.paramMap.get('section') || 'details'
+                  redirectedToRoot = true
+                  this.router.navigate(['documents', rootId, section], {
+                    replaceUrl: true,
+                  })
+                }
+                return null
+              }),
+              catchError(() => of(null))
+            )
+          }
          // 404 is handled in the subscribe below
          return of(null)
        }),
@@ -450,6 +528,9 @@ export class DocumentDetailComponent
      .subscribe({
        next: (doc) => {
          if (!doc) {
+            if (redirectedToRoot) {
+              return
+            }
            this.router.navigate(['404'], { replaceUrl: true })
            return
          }
@@ -666,36 +747,15 @@ export class DocumentDetailComponent

  updateComponent(doc: Document) {
    this.document = doc
+    // Default selected version is the newest version
+    const versions = doc.versions ?? []
+    this.selectedVersionId = versions.length
+      ? Math.max(...versions.map((version) => version.id))
+      : doc.id
+    this.previewLoaded = false
    this.requiresPassword = false
    this.updateFormForCustomFields()
-    if (this.archiveContentRenderType === ContentRenderType.TIFF) {
-      this.tryRenderTiff()
-    }
-    this.documentsService
-      .getMetadata(doc.id)
-      .pipe(
-        first(),
-        takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
-      )
-      .subscribe({
-        next: (result) => {
-          this.metadata = result
-          if (
-            this.archiveContentRenderType !== ContentRenderType.PDF ||
-            this.useNativePdfViewer
-          ) {
-            this.previewLoaded = true
-          }
-        },
-        error: (error) => {
-          this.metadata = {} // allow display to fallback to <object> tag
-          this.toastService.showError(
-            $localize`Error retrieving metadata`,
-            error
-          )
-        },
-      })
+    this.loadMetadataForSelectedVersion()
    if (
      this.permissionsService.currentUserHasObjectPermissions(
        PermissionAction.Change,
@@ -724,6 +784,78 @@ export class DocumentDetailComponent
    }
  }

+  // Update file preview and download target to a specific version (by document id)
+  selectVersion(versionId: number) {
+    this.selectedVersionId = versionId
+    this.previewLoaded = false
+    this.previewUrl = this.documentsService.getPreviewUrl(
+      this.documentId,
+      false,
+      this.selectedVersionId
+    )
+    this.updatePdfSource()
+    this.thumbUrl = this.documentsService.getThumbUrl(
+      this.documentId,
+      this.selectedVersionId
+    )
+    this.loadMetadataForSelectedVersion()
+    this.documentsService
+      .get(this.documentId, this.selectedVersionId, 'content')
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (doc) => {
+          const content = doc?.content ?? ''
+          this.document.content = content
+          this.documentForm.patchValue(
+            {
+              content,
+            },
+            {
+              emitEvent: false,
+            }
+          )
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error retrieving version content`,
+            error
+          )
+        },
+      })
+    // For text previews, refresh content
+    this.http
+      .get(this.previewUrl, { responseType: 'text' })
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (res) => (this.previewText = res.toString()),
+        error: (err) =>
+          (this.previewText = $localize`An error occurred loading content: ${
+            err.message ?? err.toString()
+          }`),
+      })
+  }
+
+  onVersionSelected(versionId: number) {
+    this.selectVersion(versionId)
+  }
+
+  onVersionsUpdated(versions: DocumentVersionInfo[]) {
+    this.document.versions = versions
+    const openDoc = this.openDocumentService.getOpenDocument(this.documentId)
+    if (openDoc) {
+      openDoc.versions = versions
+      this.openDocumentService.save()
+    }
+  }
+
  get customFieldFormFields(): FormArray {
    return this.documentForm.get('custom_fields') as FormArray
  }
@@ -892,7 +1024,7 @@ export class DocumentDetailComponent

  discard() {
    this.documentsService
-      .get(this.documentId)
+      .get(this.documentId, this.selectedVersionId)
      .pipe(
        first(),
        takeUntil(this.unsubscribeNotifier),
@@ -942,7 +1074,7 @@ export class DocumentDetailComponent
    this.networkActive = true
    ;(document.activeElement as HTMLElement)?.dispatchEvent(new Event('change'))
    this.documentsService
-      .patch(this.getChangedFields())
+      .patch(this.getChangedFields(), this.selectedVersionId)
      .pipe(first())
      .subscribe({
        next: (docValues) => {
@@ -997,7 +1129,7 @@ export class DocumentDetailComponent
    this.networkActive = true
    this.store.next(this.documentForm.value)
    this.documentsService
-      .patch(this.getChangedFields())
+      .patch(this.getChangedFields(), this.selectedVersionId)
      .pipe(
        switchMap((updateResult) => {
          this.savedViewService.maybeRefreshDocumentCounts()
@@ -1140,11 +1272,24 @@ export class DocumentDetailComponent
    })
  }

+  private getSelectedNonLatestVersionId(): number | null {
+    const versions = this.document?.versions ?? []
+    if (!versions.length || !this.selectedVersionId) {
+      return null
+    }
+    const latestVersionId = Math.max(...versions.map((version) => version.id))
+    return this.selectedVersionId === latestVersionId
+      ? null
+      : this.selectedVersionId
+  }
+
  download(original: boolean = false) {
    this.downloading = true
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
    const downloadUrl = this.documentsService.getDownloadUrl(
      this.documentId,
-      original
+      original,
+      selectedVersionId
    )
    this.http
      .get(downloadUrl, { observe: 'response', responseType: 'blob' })
@@ -1230,6 +1375,7 @@ export class DocumentDetailComponent
  onPasswordKeyUp(event: KeyboardEvent) {
    if ('Enter' == event.key) {
      this.password = (event.target as HTMLInputElement).value
+      this.updatePdfSource()
    }
  }

@@ -1575,9 +1721,11 @@ export class DocumentDetailComponent
  }

  printDocument() {
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
    const printUrl = this.documentsService.getDownloadUrl(
      this.document.id,
-      false
+      false,
+      selectedVersionId
    )
    this.http
      .get(printUrl, { responseType: 'blob' })
@@ -1625,7 +1773,7 @@ export class DocumentDetailComponent
    const modal = this.modalService.open(ShareLinksDialogComponent)
    modal.componentInstance.documentId = this.document.id
    modal.componentInstance.hasArchiveVersion =
-      !!this.document?.archived_file_name
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
  }

  get emailEnabled(): boolean {
@@ -1638,7 +1786,7 @@ export class DocumentDetailComponent
    })
    modal.componentInstance.documentIds = [this.document.id]
    modal.componentInstance.hasArchiveVersion =
-      !!this.document?.archived_file_name
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
  }

  private tryRenderTiff() {
--- a/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html
+++ b/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html
@@ -0,0 +1,97 @@
+<div class="btn-group" ngbDropdown autoClose="outside">
+  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle>
+    <i-bs name="file-earmark-diff"></i-bs>
+    <span class="d-none d-lg-inline ps-1" i18n>Versions</span>
+  </button>
+  <div class="dropdown-menu shadow" ngbDropdownMenu>
+    <div class="px-3 py-2">
+      @if (versionUploadState === UploadState.Idle) {
+        <div class="input-group input-group-sm mb-2">
+          <span class="input-group-text" i18n>Label</span>
+          <input
+            class="form-control"
+            type="text"
+            [(ngModel)]="newVersionLabel"
+            i18n-placeholder
+            placeholder="Optional"
+            [disabled]="!userIsOwner || !userCanEdit"
+          />
+        </div>
+        <input
+          #versionFileInput
+          type="file"
+          class="visually-hidden"
+          (change)="onVersionFileSelected($event)"
+        />
+        <button
+          class="btn btn-sm btn-outline-secondary w-100"
+          (click)="versionFileInput.click()"
+          [disabled]="!userIsOwner || !userCanEdit"
+        >
+          <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Add new version</span>
+        </button>
+      } @else {
+        @switch (versionUploadState) {
+          @case (UploadState.Uploading) {
+            <div class="small text-muted mt-1 d-flex align-items-center">
+              <output class="spinner-border spinner-border-sm me-2" aria-hidden="true"></output>
+              <span i18n>Uploading version...</span>
+            </div>
+          }
+          @case (UploadState.Processing) {
+            <div class="small text-muted mt-1 d-flex align-items-center">
+              <output class="spinner-border spinner-border-sm me-2" aria-hidden="true"></output>
+              <span i18n>Processing version...</span>
+            </div>
+          }
+          @case (UploadState.Failed) {
+            <div class="small text-danger mt-1 d-flex align-items-center justify-content-between">
+              <span i18n>Version upload failed.</span>
+              <button type="button" class="btn btn-link btn-sm p-0 ms-2" (click)="clearVersionUploadStatus()" i18n>Dismiss</button>
+            </div>
+            @if (versionUploadError) {
+              <div class="small text-muted mt-1">{{ versionUploadError }}</div>
+            }
+          }
+        }
+      }
+    </div>
+    <div class="dropdown-divider"></div>
+    @for (version of versions; track version.id) {
+      <div class="dropdown-item">
+        <div class="d-flex align-items-center w-100 version-item">
+          <button type="button" class="btn btn-link link-underline link-underline-opacity-0 d-flex align-items-center flex-grow-1 small ps-0 text-start" (click)="selectVersion(version.id)">
+            <div class="badge bg-light text-lowercase text-muted">
+              {{ version.checksum | slice:0:8 }}
+            </div>
+            <div class="d-flex flex-column small ms-2">
+              <div>
+                @if (version.version_label) {
+                  {{ version.version_label }}
+                } @else {
+                  <span i18n>ID</span> #{{version.id}}
+                }
+              </div>
+              <div class="text-muted">
+                {{ version.added | customDate:'short' }}
+              </div>
+            </div>
+          </button>
+          @if (selectedVersionId === version.id) { <span class="ms-2">✓</span> }
+          @if (!version.is_root) {
+            <pngx-confirm-button
+              buttonClasses="btn-link btn-sm text-danger ms-2"
+              iconName="trash"
+              confirmMessage="Delete this version?"
+              i18n-confirmMessage
+              [disabled]="!userIsOwner || !userCanEdit"
+              (confirm)="deleteVersion(version.id)"
+            >
+              <span class="visually-hidden" i18n>Delete version</span>
+            </pngx-confirm-button>
+          }
+        </div>
+      </div>
+    }
+  </div>
+</div>
--- a/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.spec.ts
@@ -0,0 +1,226 @@
+import { DatePipe } from '@angular/common'
+import { SimpleChange } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { Subject, of, throwError } from 'rxjs'
+import { DocumentVersionInfo } from 'src/app/data/document'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import {
+  UploadState,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+import { DocumentVersionDropdownComponent } from './document-version-dropdown.component'
+
+describe('DocumentVersionDropdownComponent', () => {
+  let component: DocumentVersionDropdownComponent
+  let fixture: ComponentFixture<DocumentVersionDropdownComponent>
+  let documentService: jest.Mocked<
+    Pick<DocumentService, 'deleteVersion' | 'getVersions' | 'uploadVersion'>
+  >
+  let toastService: jest.Mocked<Pick<ToastService, 'showError' | 'showInfo'>>
+  let finished$: Subject<{ taskId: string }>
+  let failed$: Subject<{ taskId: string; message?: string }>
+
+  beforeEach(async () => {
+    finished$ = new Subject<{ taskId: string }>()
+    failed$ = new Subject<{ taskId: string; message?: string }>()
+    documentService = {
+      deleteVersion: jest.fn(),
+      getVersions: jest.fn(),
+      uploadVersion: jest.fn(),
+    }
+    toastService = {
+      showError: jest.fn(),
+      showInfo: jest.fn(),
+    }
+
+    await TestBed.configureTestingModule({
+      imports: [
+        DocumentVersionDropdownComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        DatePipe,
+        {
+          provide: DocumentService,
+          useValue: documentService,
+        },
+        {
+          provide: SettingsService,
+          useValue: {
+            get: () => null,
+          },
+        },
+        {
+          provide: ToastService,
+          useValue: toastService,
+        },
+        {
+          provide: WebsocketStatusService,
+          useValue: {
+            onDocumentConsumptionFinished: () => finished$,
+            onDocumentConsumptionFailed: () => failed$,
+          },
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentVersionDropdownComponent)
+    component = fixture.componentInstance
+    component.documentId = 3
+    component.selectedVersionId = 3
+    component.versions = [
+      {
+        id: 3,
+        is_root: true,
+        checksum: 'aaaa',
+      },
+      {
+        id: 10,
+        is_root: false,
+        checksum: 'bbbb',
+      },
+    ]
+    fixture.detectChanges()
+  })
+
+  it('selectVersion should emit the selected id', () => {
+    const emitSpy = jest.spyOn(component.versionSelected, 'emit')
+    component.selectVersion(10)
+    expect(emitSpy).toHaveBeenCalledWith(10)
+  })
+
+  it('deleteVersion should refresh versions and select fallback when deleting current selection', () => {
+    const updatedVersions: DocumentVersionInfo[] = [
+      { id: 3, is_root: true, checksum: 'aaaa' },
+      { id: 20, is_root: false, checksum: 'cccc' },
+    ]
+    component.selectedVersionId = 10
+    documentService.deleteVersion.mockReturnValue(
+      of({ result: 'deleted', current_version_id: 3 })
+    )
+    documentService.getVersions.mockReturnValue(
+      of({ id: 3, versions: updatedVersions } as any)
+    )
+    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
+    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
+
+    component.deleteVersion(10)
+
+    expect(documentService.deleteVersion).toHaveBeenCalledWith(3, 10)
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(updatedVersions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(3)
+  })
+
+  it('deleteVersion should show an error toast on failure', () => {
+    const error = new Error('delete failed')
+    documentService.deleteVersion.mockReturnValue(throwError(() => error))
+
+    component.deleteVersion(10)
+
+    expect(toastService.showError).toHaveBeenCalledWith(
+      'Error deleting version',
+      error
+    )
+  })
+
+  it('onVersionFileSelected should upload and update versions after websocket success', () => {
+    const versions: DocumentVersionInfo[] = [
+      { id: 3, is_root: true, checksum: 'aaaa' },
+      { id: 20, is_root: false, checksum: 'cccc' },
+    ]
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    component.newVersionLabel = '  Updated scan  '
+    documentService.uploadVersion.mockReturnValue(
+      of({ task_id: 'task-1' } as any)
+    )
+    documentService.getVersions.mockReturnValue(of({ id: 3, versions } as any))
+    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
+    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
+
+    component.onVersionFileSelected({ target: input } as Event)
+    finished$.next({ taskId: 'task-1' })
+
+    expect(documentService.uploadVersion).toHaveBeenCalledWith(
+      3,
+      file,
+      'Updated scan'
+    )
+    expect(toastService.showInfo).toHaveBeenCalled()
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(versions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(20)
+    expect(component.newVersionLabel).toEqual('')
+    expect(component.versionUploadState).toEqual(UploadState.Idle)
+    expect(component.versionUploadError).toBeNull()
+  })
+
+  it('onVersionFileSelected should set failed state after websocket failure', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    documentService.uploadVersion.mockReturnValue(of('task-1'))
+
+    component.onVersionFileSelected({ target: input } as Event)
+    failed$.next({ taskId: 'task-1', message: 'processing failed' })
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('processing failed')
+    expect(documentService.getVersions).not.toHaveBeenCalled()
+  })
+
+  it('onVersionFileSelected should fail when backend response has no task id', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    documentService.uploadVersion.mockReturnValue(of({} as any))
+
+    component.onVersionFileSelected({ target: input } as Event)
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('Missing task ID.')
+    expect(documentService.getVersions).not.toHaveBeenCalled()
+  })
+
+  it('onVersionFileSelected should show error when upload request fails', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    const error = new Error('upload failed')
+    documentService.uploadVersion.mockReturnValue(throwError(() => error))
+
+    component.onVersionFileSelected({ target: input } as Event)
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('upload failed')
+    expect(toastService.showError).toHaveBeenCalledWith(
+      'Error uploading new version',
+      error
+    )
+  })
+
+  it('ngOnChanges should clear upload status on document switch', () => {
+    component.versionUploadState = UploadState.Failed
+    component.versionUploadError = 'something failed'
+
+    component.ngOnChanges({
+      documentId: new SimpleChange(3, 4, false),
+    })
+
+    expect(component.versionUploadState).toEqual(UploadState.Idle)
+    expect(component.versionUploadError).toBeNull()
+  })
+})
--- a/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.ts
+++ b/src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.ts
@@ -0,0 +1,203 @@
+import { SlicePipe } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { merge, of, Subject } from 'rxjs'
+import {
+  filter,
+  first,
+  map,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs/operators'
+import { DocumentVersionInfo } from 'src/app/data/document'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ToastService } from 'src/app/services/toast.service'
+import {
+  UploadState,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+
+@Component({
+  selector: 'pngx-document-version-dropdown',
+  templateUrl: './document-version-dropdown.component.html',
+  imports: [
+    FormsModule,
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+    ConfirmButtonComponent,
+    SlicePipe,
+    CustomDatePipe,
+  ],
+})
+export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
+  UploadState = UploadState
+
+  @Input() documentId: number
+  @Input() versions: DocumentVersionInfo[] = []
+  @Input() selectedVersionId: number
+  @Input() userCanEdit: boolean = false
+  @Input() userIsOwner: boolean = false
+
+  @Output() versionSelected = new EventEmitter<number>()
+  @Output() versionsUpdated = new EventEmitter<DocumentVersionInfo[]>()
+
+  newVersionLabel: string = ''
+  versionUploadState: UploadState = UploadState.Idle
+  versionUploadError: string | null = null
+
+  private readonly documentsService = inject(DocumentService)
+  private readonly toastService = inject(ToastService)
+  private readonly websocketStatusService = inject(WebsocketStatusService)
+  private readonly destroy$ = new Subject<void>()
+  private readonly documentChange$ = new Subject<void>()
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.documentId && !changes.documentId.firstChange) {
+      this.documentChange$.next()
+      this.clearVersionUploadStatus()
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.documentChange$.next()
+    this.documentChange$.complete()
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+
+  selectVersion(versionId: number): void {
+    this.versionSelected.emit(versionId)
+  }
+
+  deleteVersion(versionId: number): void {
+    const wasSelected = this.selectedVersionId === versionId
+    this.documentsService
+      .deleteVersion(this.documentId, versionId)
+      .pipe(
+        switchMap((result) =>
+          this.documentsService
+            .getVersions(this.documentId)
+            .pipe(map((doc) => ({ doc, result })))
+        ),
+        first(),
+        takeUntil(this.destroy$)
+      )
+      .subscribe({
+        next: ({ doc, result }) => {
+          if (doc?.versions) {
+            this.versionsUpdated.emit(doc.versions)
+          }
+
+          if (wasSelected || this.selectedVersionId === versionId) {
+            const fallbackId = result?.current_version_id ?? this.documentId
+            this.versionSelected.emit(fallbackId)
+          }
+        },
+        error: (error) => {
+          this.toastService.showError($localize`Error deleting version`, error)
+        },
+      })
+  }
+
+  onVersionFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement
+    if (!input?.files || input.files.length === 0) return
+    const uploadDocumentId = this.documentId
+    const file = input.files[0]
+    input.value = ''
+    const label = this.newVersionLabel?.trim()
+    this.versionUploadState = UploadState.Uploading
+    this.versionUploadError = null
+    this.documentsService
+      .uploadVersion(uploadDocumentId, file, label)
+      .pipe(
+        first(),
+        tap(() => {
+          this.toastService.showInfo(
+            $localize`Uploading new version. Processing will happen in the background.`
+          )
+          this.newVersionLabel = ''
+          this.versionUploadState = UploadState.Processing
+        }),
+        map((taskId) =>
+          typeof taskId === 'string'
+            ? taskId
+            : (taskId as { task_id?: string })?.task_id
+        ),
+        switchMap((taskId) => {
+          if (!taskId) {
+            this.versionUploadState = UploadState.Failed
+            this.versionUploadError = $localize`Missing task ID.`
+            return of(null)
+          }
+          return merge(
+            this.websocketStatusService.onDocumentConsumptionFinished().pipe(
+              filter((status) => status.taskId === taskId),
+              map(() => ({ state: 'success' as const }))
+            ),
+            this.websocketStatusService.onDocumentConsumptionFailed().pipe(
+              filter((status) => status.taskId === taskId),
+              map((status) => ({
+                state: 'failed' as const,
+                message: status.message,
+              }))
+            )
+          ).pipe(takeUntil(merge(this.destroy$, this.documentChange$)), take(1))
+        }),
+        switchMap((result) => {
+          if (result?.state !== 'success') {
+            if (result?.state === 'failed') {
+              this.versionUploadState = UploadState.Failed
+              this.versionUploadError =
+                result.message || $localize`Upload failed.`
+            }
+            return of(null)
+          }
+          return this.documentsService.getVersions(uploadDocumentId)
+        }),
+        takeUntil(this.destroy$),
+        takeUntil(this.documentChange$)
+      )
+      .subscribe({
+        next: (doc) => {
+          if (uploadDocumentId !== this.documentId) return
+          if (doc?.versions) {
+            this.versionsUpdated.emit(doc.versions)
+            this.versionSelected.emit(
+              Math.max(...doc.versions.map((version) => version.id))
+            )
+            this.clearVersionUploadStatus()
+          }
+        },
+        error: (error) => {
+          if (uploadDocumentId !== this.documentId) return
+          this.versionUploadState = UploadState.Failed
+          this.versionUploadError = error?.message || $localize`Upload failed.`
+          this.toastService.showError(
+            $localize`Error uploading new version`,
+            error
+          )
+        },
+      })
+  }
+
+  clearVersionUploadStatus(): void {
+    this.versionUploadState = UploadState.Idle
+    this.versionUploadError = null
+  }
+}
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -75,7 +75,7 @@
    }
    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
-        <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
+        <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Permissions</ng-container></div>
      </button>
    </div>
  </div>
@@ -83,18 +83,17 @@
    <div class="btn-toolbar">
      <div ngbDropdown>
        <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle>
-          <i-bs name="three-dots"></i-bs>
-          <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+          <i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
        </button>
        <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
          <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
-            <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Reprocess</ng-container>
+            <i-bs name="body-text" class="me-1"></i-bs><ng-container i18n>Reprocess</ng-container>
          </button>
          <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
-            <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
+            <i-bs name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Rotate</ng-container>
          </button>
          <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.selected.size < 2">
-            <i-bs name="journals"></i-bs>&nbsp;<ng-container i18n>Merge</ng-container>
+            <i-bs name="journals" class="me-1"></i-bs><ng-container i18n>Merge</ng-container>
          </button>
        </div>
      </div>
@@ -106,22 +105,20 @@
        ngbDropdownToggle
        [disabled]="disabled || list.selected.size === 0"
      >
-        <i-bs name="send"></i-bs>
-        <div class="d-none d-sm-inline">
-          &nbsp;<ng-container i18n>Send</ng-container>
+        <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container>
        </div>
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownSend" class="shadow">
        <button ngbDropdownItem (click)="createShareLinkBundle()">
-          <i-bs name="link"></i-bs>&nbsp;<ng-container i18n>Create a share link bundle</ng-container>
+          <i-bs name="link" class="me-1"></i-bs><ng-container i18n>Create a share link bundle</ng-container>
        </button>
        <button ngbDropdownItem (click)="manageShareLinkBundles()">
-          <i-bs name="list-ul"></i-bs>&nbsp;<ng-container i18n>Manage share link bundles</ng-container>
+          <i-bs name="list-ul" class="me-1"></i-bs><ng-container i18n>Manage share link bundles</ng-container>
        </button>
        <div class="dropdown-divider"></div>
        @if (emailEnabled) {
          <button ngbDropdownItem (click)="emailSelected()">
-            <i-bs name="envelope"></i-bs>&nbsp;<ng-container i18n>Email</ng-container>
+            <i-bs name="envelope" class="me-1"></i-bs><ng-container i18n>Email</ng-container>
          </button>
        }
      </div>
@@ -136,7 +133,7 @@
            <span class="visually-hidden">Preparing download...</span>
          </div>
        }
-        <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Download</ng-container></div>
+        <div class="d-none d-sm-inline ms-1"><ng-container i18n>Download</ng-container></div>
      </button>
      <div ngbDropdown class="me-2 d-flex btn-group" role="group">
        <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle-split rounded-end" ngbDropdownToggle></button>
@@ -164,7 +161,7 @@

    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
      </button>
    </div>
  </div>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -66,16 +66,16 @@
          <div class="btn-group">
            @if (document) {
              <a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()">
-                <i-bs name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
+                <i-bs name="diagram-3" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>More like this</span>
              </a>
              <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-                <i-bs name="file-earmark-richtext"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Open</span>
+                <i-bs name="file-earmark-richtext" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Open</span>
              </a>
              <pngx-preview-popup [document]="document" #popupPreview>
-                <i-bs name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
+                <i-bs name="eye" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>View</span>
              </pngx-preview-popup>
              <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
-                <i-bs name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
+                <i-bs name="download" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Download</span>
              </a>
            } @else {
              <div class="placeholder btn btn-sm btn-outline-secondary bg-secondary" style="width: 60px;">&nbsp;</div>
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -1,8 +1,7 @@
 <pngx-page-header [title]="getTitle()">
  <div ngbDropdown class="btn-group flex-fill d-sm-none">
    <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
-      <i-bs name="text-indent-left"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
+      <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
      @if (list.selected.size > 0) {
        <pngx-clearable-badge [selected]="list.selected.size > 0" [number]="list.selected.size" (cleared)="list.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
      }
@@ -20,21 +19,20 @@
    <div class="btn-group btn-group-sm flex-nowrap">
      @if (list.selected.size > 0) {
        <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
-          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
+          <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
        </button>
      }
      <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
-        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
+        <i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
      </button>
      <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
-        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
+        <i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
      </button>
    </div>
  </div>
  <div ngbDropdown class="btn-group flex-fill">
    <button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle>
-      <i-bs name="card-heading"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Show</ng-container></div>
+      <i-bs name="card-heading"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Show</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownDisplayFields" class="shadow">
      <div class="px-3">
@@ -64,8 +62,7 @@

  <div ngbDropdown class="btn-group flex-fill">
    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
-      <i-bs name="arrow-down-up"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Sort</ng-container></div>
+      <i-bs name="arrow-down-up"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Sort</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
      <div class="w-100 d-flex pb-2 mb-1 border-bottom">
@@ -90,8 +87,7 @@

  <div class="btn-group flex-fill" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown role="group">
    <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle>
-      <i-bs class="me-1" name="window-stack"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Views</ng-container></div>
+      <i-bs name="window-stack"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Views</ng-container></div>
      @if (savedViewIsModified) {
        <div class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
          <span class="visually-hidden">selected</span>
@@ -121,7 +117,7 @@
 </pngx-page-header>

 <div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body">
-  <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
+  <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [filterRules]="list.filterRules" (filterRulesChange)="onFilterRulesChange($event)" (resetFilterRules)="onFilterRulesReset($event)" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
  <pngx-bulk-editor [hidden]="!isBulkEditing" [disabled]="!isBulkEditing"></pngx-bulk-editor>
 </div>

--- a/src-ui/src/app/components/document-list/document-list.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts
@@ -147,21 +147,21 @@ describe('DocumentListComponent', () => {
  })

  it('should show score sort fields on fulltext queries', () => {
-    documentListService.filterRules = [
+    documentListService.setFilterRules([
      {
        rule_type: FILTER_HAS_TAGS_ANY,
        value: '10',
      },
-    ]
+    ])
    fixture.detectChanges()
    expect(component.getSortFields()).toEqual(documentListService.sortFields)

-    documentListService.filterRules = [
+    documentListService.setFilterRules([
      {
        rule_type: FILTER_FULLTEXT_QUERY,
        value: 'foo',
      },
-    ]
+    ])
    fixture.detectChanges()
    expect(component.getSortFields()).toEqual(
      documentListService.sortFieldsFullText
@@ -170,12 +170,12 @@ describe('DocumentListComponent', () => {

  it('should determine if filtered, support reset', () => {
    fixture.detectChanges()
-    documentListService.filterRules = [
+    documentListService.setFilterRules([
      {
        rule_type: FILTER_HAS_TAGS_ANY,
        value: '10',
      },
-    ]
+    ])
    documentListService.isReloading = false
    fixture.detectChanges()
    expect(component.isFiltered).toBeTruthy()
@@ -185,6 +185,20 @@ describe('DocumentListComponent', () => {
    expect(fixture.nativeElement.textContent.match(/Reset/g)).toHaveLength(1)
  })

+  it('should apply filter rule changes via list service', () => {
+    const setFilterRulesSpy = jest.spyOn(documentListService, 'setFilterRules')
+    const rules = [{ rule_type: FILTER_HAS_TAGS_ANY, value: '10' }]
+    component.onFilterRulesChange(rules)
+    expect(setFilterRulesSpy).toHaveBeenCalledWith(rules)
+  })
+
+  it('should reset filter rules to page one via list service', () => {
+    const setFilterRulesSpy = jest.spyOn(documentListService, 'setFilterRules')
+    const rules = [{ rule_type: FILTER_HAS_TAGS_ANY, value: '10' }]
+    component.onFilterRulesReset(rules)
+    expect(setFilterRulesSpy).toHaveBeenCalledWith(rules, true)
+  })
+
  it('should load saved view from URL', () => {
    const view: SavedView = {
      id: 10,
@@ -217,7 +231,7 @@ describe('DocumentListComponent', () => {
      .spyOn(activatedRoute, 'paramMap', 'get')
      .mockReturnValue(of(convertToParamMap(queryParams)))
    activatedRoute.snapshot.queryParams = queryParams
-    fixture.detectChanges()
+    component.ngOnInit()
    expect(getSavedViewSpy).toHaveBeenCalledWith(view.id)
    expect(activateSavedViewSpy).toHaveBeenCalledWith(
      view,
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -212,6 +212,14 @@ export class DocumentListComponent
    this.list.setSort(event.column, event.reverse)
  }

+  onFilterRulesChange(filterRules: FilterRule[]) {
+    this.list.setFilterRules(filterRules)
+  }
+
+  onFilterRulesReset(filterRules: FilterRule[]) {
+    this.list.setFilterRules(filterRules, true)
+  }
+
  get isBulkEditing(): boolean {
    return this.list.selected.size > 0
  }
@@ -300,7 +308,7 @@ export class DocumentListComponent
        if (this.list.selected.size > 0) {
          this.list.selectNone()
        } else if (this.isFiltered) {
-          this.filterEditor.resetSelected()
+          this.resetFilters()
        }
      })

--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
@@ -2107,6 +2107,22 @@ describe('FilterEditorComponent', () => {
    expect(component.filterRules).toEqual(rules)
  })

+  it('should emit reset filter rules when resetting', () => {
+    const rules = [{ rule_type: FILTER_HAS_TAGS_ANY, value: '2' }]
+    component.unmodifiedFilterRules = rules
+    component.filterRules = [
+      { rule_type: FILTER_DOES_NOT_HAVE_TAG, value: '2' },
+    ]
+
+    const resetFilterRulesSpy = jest.spyOn(component.resetFilterRules, 'next')
+    const filterRulesChangeSpy = jest.spyOn(component.filterRulesChange, 'next')
+
+    component.resetSelected()
+
+    expect(resetFilterRulesSpy).toHaveBeenCalledWith(rules)
+    expect(filterRulesChangeSpy).not.toHaveBeenCalled()
+  })
+
  it('should support resetting text field', () => {
    component.textFilter = 'foo'
    component.resetTextField()
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -1101,6 +1101,9 @@ export class FilterEditorComponent
  @Output()
  filterRulesChange = new EventEmitter<FilterRule[]>()

+  @Output()
+  resetFilterRules = new EventEmitter<FilterRule[]>()
+
  @Input()
  set selectionData(selectionData: SelectionData) {
    this.tagDocumentCounts = selectionData?.selected_tags ?? null
@@ -1244,7 +1247,7 @@ export class FilterEditorComponent
    this.textFilterTarget = TEXT_FILTER_TARGET_TITLE_CONTENT
    this.documentService.searchQuery = ''
    this.filterRules = this._unmodifiedFilterRules
-    this.updateRules()
+    this.resetFilterRules.next(this.filterRules)
  }

  toggleTag(tagId: number) {
--- a/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html
@@ -1,15 +1,3 @@
-<pngx-page-header
-  title="Custom Fields"
-  i18n-title
-  info="Customize the data fields that can be attached to documents."
-  i18n-info
-  infoLink="usage/#custom-fields"
-  >
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Field</ng-container>
-  </button>
-</pngx-page-header>
-
 <ul class="list-group">

  <li class="list-group-item">
@@ -55,10 +43,10 @@
          </div>
          <div class="btn-group d-none d-sm-inline-block">
            <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
-              <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+              <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
            </button>
            <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
-              <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+              <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
            </button>
          </div>
          @if (field.document_count > 0) {
@@ -67,7 +55,7 @@
                class="btn btn-sm btn-outline-secondary"
                [routerLink]="getDocumentFilterUrl(field)"
              >
-                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+                <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
                ><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
              </a>
            </div>
--- a/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.scss
+++ b/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.scss
--- a/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts
@@ -26,9 +26,9 @@ import { PermissionsService } from 'src/app/services/permissions.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConfirmDialogComponent } from '../../../common/confirm-dialog/confirm-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { PageHeaderComponent } from '../../../common/page-header/page-header.component'
 import { CustomFieldsComponent } from './custom-fields.component'

 const fields: CustomField[] = [
@@ -110,10 +110,7 @@ describe('CustomFieldsComponent', () => {
    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
    const reloadSpy = jest.spyOn(component, 'reload')

-    const createButton = fixture.debugElement
-      .queryAll(By.css('button'))
-      .find((btn) => btn.nativeElement.textContent.trim().includes('Add Field'))
-    createButton.triggerEventHandler('click')
+    component.editField()

    expect(modal).not.toBeUndefined()
    const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
--- a/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts
@@ -7,6 +7,10 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { delay, takeUntil, tap } from 'rxjs'
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
+import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
 import {
  CustomFieldQueryLogicalOperator,
@@ -21,18 +25,12 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'

@Component({
  selector: 'pngx-custom-fields',
  templateUrl: './custom-fields.component.html',
  styleUrls: ['./custom-fields.component.scss'],
  imports: [
-    PageHeaderComponent,
    IfPermissionsDirective,
    NgbDropdownModule,
    NgbPaginationModule,
@@ -44,14 +42,14 @@ export class CustomFieldsComponent
  extends LoadingComponentWithPermissions
  implements OnInit
 {
-  private customFieldsService = inject(CustomFieldsService)
-  permissionsService = inject(PermissionsService)
-  private modalService = inject(NgbModal)
-  private toastService = inject(ToastService)
-  private documentListViewService = inject(DocumentListViewService)
-  private settingsService = inject(SettingsService)
-  private documentService = inject(DocumentService)
-  private savedViewService = inject(SavedViewService)
+  private readonly customFieldsService = inject(CustomFieldsService)
+  public readonly permissionsService = inject(PermissionsService)
+  private readonly modalService = inject(NgbModal)
+  private readonly toastService = inject(ToastService)
+  private readonly documentListViewService = inject(DocumentListViewService)
+  private readonly settingsService = inject(SettingsService)
+  private readonly documentService = inject(DocumentService)
+  private readonly savedViewService = inject(SavedViewService)

  public fields: CustomField[] = []

--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
@@ -0,0 +1,77 @@
+<pngx-page-header
+  [title]="activeTabLabel"
+  info="Manage tags, correspondents, document types, storage paths, and custom fields."
+  i18n-info
+  [infoLink]="activeInfoLink"
+  [loading]="activeHeaderLoading"
+  >
+  @if (activeManagementList) {
+    <div ngbDropdown class="btn-group flex-fill d-sm-none">
+      <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
+        <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
+        @if (activeManagementList.selectedObjects.size > 0) {
+          <pngx-clearable-badge [selected]="activeManagementList.selectedObjects.size > 0" [number]="activeManagementList.selectedObjects.size" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+        }
+      </button>
+      <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
+        <button ngbDropdownItem (click)="activeManagementList.selectNone()" i18n>Select none</button>
+        <button ngbDropdownItem (click)="activeManagementList.selectPage(true)" i18n>Select page</button>
+        <button ngbDropdownItem (click)="activeManagementList.selectAll()" i18n>Select all</button>
+      </div>
+    </div>
+
+    <div class="d-none d-sm-flex flex-fill me-3">
+      <div class="input-group input-group-sm">
+        <span class="input-group-text border-0" i18n>Select:</span>
+      </div>
+      <div class="btn-group btn-group-sm flex-nowrap">
+        @if (activeManagementList.selectedObjects.size > 0) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="activeManagementList.selectNone()">
+            <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
+          </button>
+        }
+        <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectPage(true)">
+          <i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
+        </button>
+        <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectAll()">
+          <i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
+        </button>
+      </div>
+    </div>
+
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeManagementList.setPermissions()"
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || activeManagementList.selectedObjects.size === 0">
+      <i-bs name="person-fill-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="activeManagementList.delete()"
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || activeManagementList.selectedObjects.size === 0">
+      <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="activeManagementList.openCreateDialog()"
+      *pngxIfPermissions="{ action: PermissionAction.Add, type: activeManagementList.permissionType }">
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Create</ng-container>
+    </button>
+  } @else if (activeCustomFields) {
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeCustomFields.editField()"
+      *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Field</ng-container>
+    </button>
+  }
+</pngx-page-header>
+
+<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-underline">
+  @for (section of visibleSections; track section.id) {
+    <li [ngbNavItem]="section.id">
+      <a ngbNavLink >
+        <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
+      </a>
+    </li>
+  }
+</ul>
+
+<div class="my-3 shadow-sm">
+  <ng-container
+    [ngComponentOutlet]="activeSection?.component"
+    #activeOutlet="ngComponentOutlet"
+  ></ng-container>
+</div>
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.scss
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.spec.ts
@@ -0,0 +1,189 @@
+import { Component } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  ActivatedRoute,
+  convertToParamMap,
+  ParamMap,
+  Router,
+} from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import {
+  DocumentAttributesComponent,
+  DocumentAttributesSectionKind,
+} from './document-attributes.component'
+
+@Component({
+  selector: 'pngx-dummy-section',
+  template: '',
+  standalone: true,
+})
+class DummySectionComponent {}
+
+describe('DocumentAttributesComponent', () => {
+  let component: DocumentAttributesComponent
+  let fixture: ComponentFixture<DocumentAttributesComponent>
+  let router: Router
+  let paramMapSubject: Subject<ParamMap>
+  let permissionsService: PermissionsService
+
+  beforeEach(async () => {
+    paramMapSubject = new Subject<ParamMap>()
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        DocumentAttributesComponent,
+        DummySectionComponent,
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            paramMap: paramMapSubject.asObservable(),
+          },
+        },
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: jest.fn(),
+          },
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentAttributesComponent)
+    component = fixture.componentInstance
+    router = TestBed.inject(Router)
+    permissionsService = TestBed.inject(PermissionsService)
+
+    jest.spyOn(router, 'navigate').mockResolvedValue(true)
+    ;(component as any).sections = [
+      {
+        id: 1,
+        path: 'tags',
+        label: 'Tags',
+        icon: 'tags',
+        permissionType: PermissionType.Tag,
+        kind: DocumentAttributesSectionKind.ManagementList,
+        component: DummySectionComponent,
+      },
+      {
+        id: 2,
+        path: 'customfields',
+        label: 'Custom fields',
+        icon: 'ui-radios',
+        permissionType: PermissionType.CustomField,
+        kind: DocumentAttributesSectionKind.CustomFields,
+        component: DummySectionComponent,
+      },
+    ]
+  })
+
+  it('should navigate to default section when no section is provided', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return action === PermissionAction.View && type === PermissionType.Tag
+      })
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({}))
+
+    expect(router.navigate).toHaveBeenCalledWith(['attributes', 'tags'], {
+      replaceUrl: true,
+    })
+    expect(component.activeNavID).toBe(1)
+  })
+
+  it('should set active section from route param when valid', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return (
+          action === PermissionAction.View &&
+          type === PermissionType.CustomField
+        )
+      })
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'customfields' }))
+
+    expect(component.activeNavID).toBe(2)
+    expect(router.navigate).not.toHaveBeenCalled()
+  })
+
+  it('should update active nav id when route section changes', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+
+    fixture.detectChanges()
+    component.activeNavID = 1
+    paramMapSubject.next(convertToParamMap({ section: 'customfields' }))
+
+    expect(component.activeNavID).toBe(2)
+  })
+
+  it('should redirect to dashboard when no sections are visible', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(false)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({}))
+
+    expect(router.navigate).toHaveBeenCalledWith(['/dashboard'], {
+      replaceUrl: true,
+    })
+  })
+
+  it('should navigate when a nav change occurs', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation(() => true)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'tags' }))
+
+    component.onNavChange({ nextId: 2 } as any)
+
+    expect(router.navigate).toHaveBeenCalledWith(['attributes', 'customfields'])
+  })
+
+  it('should ignore nav changes for unknown sections', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'tags' }))
+
+    component.onNavChange({ nextId: 999 } as any)
+
+    expect(router.navigate).not.toHaveBeenCalled()
+  })
+
+  it('should return activeManagementList correctly', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    expect(component.activeManagementList).toBeNull()
+
+    component.activeNavID = 1
+    expect(component.activeSection.kind).toBe(
+      DocumentAttributesSectionKind.ManagementList
+    )
+    expect(component.activeManagementList).toBeDefined()
+  })
+
+  it('should return activeCustomFields correctly', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    expect(component.activeCustomFields).toBeNull()
+
+    component.activeNavID = 2
+    expect(component.activeSection.kind).toBe(
+      DocumentAttributesSectionKind.CustomFields
+    )
+    expect(component.activeCustomFields).toBeDefined()
+  })
+})
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.ts
@@ -0,0 +1,256 @@
+import { NgComponentOutlet } from '@angular/common'
+import {
+  AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  Type,
+  ViewChild,
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import {
+  NgbDropdownModule,
+  NgbNavChangeEvent,
+  NgbNavModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, takeUntil } from 'rxjs'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { CustomFieldsComponent } from './custom-fields/custom-fields.component'
+import { CorrespondentListComponent } from './management-list/correspondent-list/correspondent-list.component'
+import { DocumentTypeListComponent } from './management-list/document-type-list/document-type-list.component'
+import { ManagementListComponent } from './management-list/management-list.component'
+import { StoragePathListComponent } from './management-list/storage-path-list/storage-path-list.component'
+import { TagListComponent } from './management-list/tag-list/tag-list.component'
+
+enum DocumentAttributesNavIDs {
+  Tags = 1,
+  Correspondents = 2,
+  DocumentTypes = 3,
+  StoragePaths = 4,
+  CustomFields = 5,
+}
+
+export enum DocumentAttributesSectionKind {
+  ManagementList = 'managementList',
+  CustomFields = 'customFields',
+}
+
+interface DocumentAttributesSection {
+  id: DocumentAttributesNavIDs
+  path: string
+  label: string
+  icon: string
+  infoLink?: string
+  permissionType: PermissionType
+  kind: DocumentAttributesSectionKind
+  component: Type<any>
+}
+
+@Component({
+  selector: 'pngx-document-attributes',
+  templateUrl: './document-attributes.component.html',
+  styleUrls: ['./document-attributes.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    NgbNavModule,
+    NgbDropdownModule,
+    NgComponentOutlet,
+    NgxBootstrapIconsModule,
+    IfPermissionsDirective,
+    ClearableBadgeComponent,
+  ],
+})
+export class DocumentAttributesComponent
+  implements OnInit, OnDestroy, AfterViewChecked
+{
+  private readonly permissionsService = inject(PermissionsService)
+  private readonly activatedRoute = inject(ActivatedRoute)
+  private readonly router = inject(Router)
+  private readonly cdr = inject(ChangeDetectorRef)
+  private readonly unsubscribeNotifier = new Subject<void>()
+
+  protected readonly PermissionAction = PermissionAction
+  protected readonly PermissionType = PermissionType
+
+  readonly sections: DocumentAttributesSection[] = [
+    {
+      id: DocumentAttributesNavIDs.Tags,
+      path: 'tags',
+      label: $localize`Tags`,
+      icon: 'tags',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.Tag,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: TagListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.Correspondents,
+      path: 'correspondents',
+      label: $localize`Correspondents`,
+      icon: 'person',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.Correspondent,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: CorrespondentListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.DocumentTypes,
+      path: 'documenttypes',
+      label: $localize`Document types`,
+      icon: 'hash',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.DocumentType,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: DocumentTypeListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.StoragePaths,
+      path: 'storagepaths',
+      label: $localize`Storage paths`,
+      icon: 'folder',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.StoragePath,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: StoragePathListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.CustomFields,
+      path: 'customfields',
+      label: $localize`Custom fields`,
+      icon: 'ui-radios',
+      infoLink: 'usage/#custom-fields',
+      permissionType: PermissionType.CustomField,
+      kind: DocumentAttributesSectionKind.CustomFields,
+      component: CustomFieldsComponent,
+    },
+  ]
+
+  @ViewChild('activeOutlet', { read: NgComponentOutlet })
+  private readonly activeOutlet?: NgComponentOutlet
+
+  private lastHeaderLoading: boolean
+
+  activeNavID: number = null
+
+  get visibleSections(): DocumentAttributesSection[] {
+    return this.sections.filter((section) =>
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        section.permissionType
+      )
+    )
+  }
+
+  get activeSection(): DocumentAttributesSection | null {
+    return (
+      this.visibleSections.find((section) => section.id === this.activeNavID) ??
+      null
+    )
+  }
+
+  get activeManagementList(): ManagementListComponent<any> | null {
+    if (
+      this.activeSection?.kind !== DocumentAttributesSectionKind.ManagementList
+    )
+      return null
+    const instance = this.activeOutlet?.componentInstance
+    return instance instanceof ManagementListComponent ? instance : null
+  }
+
+  get activeCustomFields(): CustomFieldsComponent | null {
+    if (this.activeSection?.kind !== DocumentAttributesSectionKind.CustomFields)
+      return null
+    const instance = this.activeOutlet?.componentInstance
+    return instance instanceof CustomFieldsComponent ? instance : null
+  }
+
+  get activeTabLabel(): string {
+    return this.activeSection?.label ?? ''
+  }
+
+  get activeInfoLink(): string {
+    return this.activeSection?.infoLink ?? null
+  }
+
+  get activeHeaderLoading(): boolean {
+    return (
+      this.activeManagementList?.loading ??
+      this.activeCustomFields?.loading ??
+      false
+    )
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.paramMap
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((paramMap) => {
+        const section = paramMap.get('section')
+        const navIDFromSection =
+          this.getNavIDForSection(section) ?? this.getDefaultNavID()
+
+        if (navIDFromSection == null) {
+          this.router.navigate(['/dashboard'], { replaceUrl: true })
+          return
+        }
+
+        if (this.activeNavID !== navIDFromSection) {
+          this.activeNavID = navIDFromSection
+        }
+
+        if (!section || this.getNavIDForSection(section) == null) {
+          this.router.navigate(
+            ['attributes', this.getSectionForNavID(this.activeNavID)],
+            { replaceUrl: true }
+          )
+        }
+      })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next()
+    this.unsubscribeNotifier.complete()
+  }
+
+  ngAfterViewChecked(): void {
+    const current = this.activeHeaderLoading
+    if (this.lastHeaderLoading !== current) {
+      this.lastHeaderLoading = current
+      this.cdr.detectChanges()
+    }
+  }
+
+  onNavChange(navChangeEvent: NgbNavChangeEvent): void {
+    const nextSection = this.getSectionForNavID(navChangeEvent.nextId)
+    if (!nextSection) {
+      return
+    }
+    this.router.navigate(['attributes', nextSection])
+  }
+
+  private getDefaultNavID(): DocumentAttributesNavIDs | null {
+    return this.visibleSections[0]?.id ?? null
+  }
+
+  private getNavIDForSection(section: string): DocumentAttributesNavIDs | null {
+    const path = section?.toLowerCase()
+    if (!path) return null
+
+    const found = this.visibleSections.find((s) => s.path === path)
+    return found?.id ?? null
+  }
+
+  private getSectionForNavID(navID: number): string | null {
+    const section = this.visibleSections.find((s) => s.id === navID)
+    return section?.path ?? null
+  }
+}
--- a/src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.spec.ts
@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { CorrespondentListComponent } from './correspondent-list.component'

 describe('CorrespondentListComponent', () => {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,6 +7,7 @@ import {
  NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { CorrespondentEditDialogComponent } from 'src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { FILTER_HAS_CORRESPONDENT_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -14,21 +15,16 @@ import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'

@Component({
  selector: 'pngx-correspondent-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
  providers: [{ provide: CustomDatePipe }],
  imports: [
    SortableDirective,
    IfPermissionsDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
@@ -37,11 +33,10 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
  ],
 })
 export class CorrespondentListComponent extends ManagementListComponent<Correspondent> {
-  private datePipe = inject(CustomDatePipe)
+  private readonly datePipe = inject(CustomDatePipe)

  constructor() {
    super()
--- a/src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.spec.ts
@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { DocumentTypeListComponent } from './document-type-list.component'

 describe('DocumentTypeListComponent', () => {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
  NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { DocumentTypeEditDialogComponent } from 'src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { DocumentType } from 'src/app/data/document-type'
 import { FILTER_HAS_DOCUMENT_TYPE_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'

@Component({
  selector: 'pngx-document-type-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
  imports: [
    SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
  ],
 })
 export class DocumentTypeListComponent extends ManagementListComponent<DocumentType> {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html
@@ -1,50 +1,3 @@
-<pngx-page-header title="{{ typeNamePlural | titlecase }}" info="View, add, edit and delete {{ typeNamePlural }}." infoLink="usage/#terms-and-definitions" [loading]="loading">
-
-  <div ngbDropdown class="btn-group flex-fill d-sm-none">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
-      <i-bs name="text-indent-left"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
-      @if (selectedObjects.size > 0) {
-        <pngx-clearable-badge [selected]="selectedObjects.size > 0" [number]="selectedObjects.size" (cleared)="selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
-      }
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
-      <button ngbDropdownItem (click)="selectNone()" i18n>Select none</button>
-      <button ngbDropdownItem (click)="selectPage(true)" i18n>Select page</button>
-      <button ngbDropdownItem (click)="selectAll()" i18n>Select all</button>
-    </div>
-  </div>
-
-  <div class="d-none d-sm-flex flex-fill me-3">
-    <div class="input-group input-group-sm">
-      <span class="input-group-text border-0" i18n>Select:</span>
-    </div>
-    <div class="btn-group btn-group-sm flex-nowrap">
-      @if (selectedObjects.size > 0) {
-        <button class="btn btn-sm btn-outline-secondary" (click)="selectNone()">
-          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
-        </button>
-      }
-      <button class="btn btn-sm btn-outline-primary" (click)="selectPage(true)">
-        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectAll()">
-        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
-      </button>
-    </div>
-  </div>
-
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="setPermissions()" [disabled]="!userCanBulkEdit(PermissionAction.Change) || selectedObjects.size === 0">
-    <i-bs name="person-fill-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
-  </button>
-  <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete()" [disabled]="!userCanBulkEdit(PermissionAction.Delete) || selectedObjects.size === 0">
-    <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-  </button>
-  <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Create</ng-container>
-  </button>
-</pngx-page-header>
-
 <div class="row mb-3">
  <div class="col mb-2 mb-xl-0">
    <div class="form-inline d-flex align-items-center">
@@ -76,19 +29,19 @@
  <table class="table table-striped align-middle shadow-sm mb-0">
    <thead>
      <tr>
-        <th scope="col">
+        <th>
          <div class="form-check m-0 ms-2 me-n2">
-            <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="togggleAll" [disabled]="data.length === 0" (change)="selectPage($event.target.checked); $event.stopPropagation();">
+            <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="togggleAll" [disabled]="data.length === 0" (change)="$event.target.checked ? selectPage() : clearSelection(); $event.stopPropagation();">
            <label class="form-check-label" for="all-objects"></label>
          </div>
        </th>
-        <th scope="col" class="fw-normal" pngxSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
-        <th scope="col" class="fw-normal d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
-        <th scope="col" class="fw-normal" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
+        <th class="fw-normal" pngxSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+        <th class="fw-normal d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+        <th class="fw-normal" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
        @for (column of extraColumns; track column) {
-          <th scope="col" class="fw-normal" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
+          <th class="fw-normal" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
        }
-        <th scope="col" class="fw-normal" i18n>Actions</th>
+        <th class="fw-normal" i18n>Actions</th>
      </tr>
    </thead>
    <tbody>
@@ -131,16 +84,16 @@
        <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
      </div>
    </td>
-    <td scope="row" class="name-cell" style="--depth: {{depth}}">
+    <td class="name-cell" style="--depth: {{depth}}">
      @if (depth > 0) {
        <div class="indicator"></div>
      }
      <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
    </td>
-    <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
-    <td scope="row">{{ getDocumentCount(object) }}</td>
+    <td class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
+    <td>{{ getDocumentCount(object) }}</td>
    @for (column of extraColumns; track column) {
-      <td scope="row" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
+      <td [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
        @if (column.badgeFn) {
          <span
            class="badge"
@@ -156,7 +109,7 @@
        }
      </td>
    }
-    <td scope="row">
+    <td>
      <div class="btn-toolbar gap-2">
        <div class="btn-group d-block d-sm-none">
          <div ngbDropdown container="body" class="d-inline-block">
@@ -181,10 +134,10 @@
        </div>
        <div class="btn-group d-none d-sm-inline-block">
          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-            <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+            <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
          </button>
          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
          </button>
        </div>
        @if (getDocumentCount(object) > 0) {
@@ -195,7 +148,7 @@
              [routerLink]="getDocumentFilterUrl(object)"
              (click)="$event?.stopPropagation()"
            >
-              <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+              <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
              ><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
            </a>
          </div>
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.scss
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.scss
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts
@@ -44,12 +44,12 @@ import { BulkEditObjectOperation } from 'src/app/services/rest/abstract-name-fil
 import { TagService } from 'src/app/services/rest/tag.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { EditDialogComponent } from '../../common/edit-dialog/edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
-import { TagListComponent } from '../tag-list/tag-list.component'
+import { ConfirmDialogComponent } from '../../../common/confirm-dialog/confirm-dialog.component'
+import { EditDialogComponent } from '../../../common/edit-dialog/edit-dialog.component'
+import { PageHeaderComponent } from '../../../common/page-header/page-header.component'
+import { PermissionsDialogComponent } from '../../../common/permissions-dialog/permissions-dialog.component'
 import { ManagementListComponent } from './management-list.component'
+import { TagListComponent } from './tag-list/tag-list.component'

 const tags: Tag[] = [
  {
@@ -304,12 +304,12 @@ describe('ManagementListComponent', () => {
  })

  it('selectPage should select current page items or clear selection', () => {
-    component.selectPage(true)
+    component.selectPage()
    expect(component.selectedObjects).toEqual(new Set(tags.map((t) => t.id)))
    expect(component.togggleAll).toBe(true)

    component.togggleAll = true
-    component.selectPage(false)
+    component.clearSelection()
    expect(component.selectedObjects.size).toBe(0)
    expect(component.togggleAll).toBe(false)
  })
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts
@@ -16,6 +16,10 @@ import {
  takeUntil,
  tap,
 } from 'rxjs/operators'
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { PermissionsDialogComponent } from 'src/app/components/common/permissions-dialog/permissions-dialog.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import {
  MATCH_AUTO,
  MATCH_NONE,
@@ -40,10 +44,6 @@ import {
 } from 'src/app/services/rest/abstract-name-filter-service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
-import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'

 export interface ManagementListColumn {
  key: string
@@ -69,13 +69,14 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  implements OnInit, OnDestroy
 {
  protected service: AbstractNameFilterService<T>
-  private modalService: NgbModal = inject(NgbModal)
+  private readonly modalService: NgbModal = inject(NgbModal)
  protected editDialogComponent: any
-  private toastService: ToastService = inject(ToastService)
-  private documentListViewService: DocumentListViewService = inject(
+  private readonly toastService: ToastService = inject(ToastService)
+  private readonly documentListViewService: DocumentListViewService = inject(
    DocumentListViewService
  )
-  private permissionsService: PermissionsService = inject(PermissionsService)
+  private readonly permissionsService: PermissionsService =
+    inject(PermissionsService)
  protected filterRuleType: number
  public typeName: string
  public typeNamePlural: string
@@ -196,7 +197,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  }

  openCreateDialog() {
-    var activeModal = this.modalService.open(this.editDialogComponent, {
+    const activeModal = this.modalService.open(this.editDialogComponent, {
      backdrop: 'static',
    })
    activeModal.componentInstance.dialogMode = EditDialogMode.CREATE
@@ -215,7 +216,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  }

  openEditDialog(object: T) {
-    var activeModal = this.modalService.open(this.editDialogComponent, {
+    const activeModal = this.modalService.open(this.editDialogComponent, {
      backdrop: 'static',
    })
    activeModal.componentInstance.object = object
@@ -243,7 +244,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  }

  openDeleteDialog(object: T) {
-    var activeModal = this.modalService.open(ConfirmDialogComponent, {
+    const activeModal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
    })
    activeModal.componentInstance.title = $localize`Confirm delete`
@@ -343,13 +344,9 @@ export abstract class ManagementListComponent<T extends MatchingModel>
    this.clearSelection()
  }

-  selectPage(select: boolean) {
-    if (select) {
-      this.selectedObjects = new Set(this.getSelectableIDs(this.data))
-      this.togggleAll = this.areAllPageItemsSelected()
-    } else {
-      this.clearSelection()
-    }
+  selectPage() {
+    this.selectedObjects = new Set(this.getSelectableIDs(this.data))
+    this.togggleAll = this.areAllPageItemsSelected()
  }

  selectAll() {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.spec.ts
@@ -10,7 +10,7 @@ import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { StoragePathListComponent } from './storage-path-list.component'

 describe('StoragePathListComponent', () => {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
  NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { StoragePathEditDialogComponent } from 'src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { FILTER_HAS_STORAGE_PATH_ANY } from 'src/app/data/filter-rule-type'
 import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'

@Component({
  selector: 'pngx-storage-path-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
  imports: [
    SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
  ],
 })
 export class StoragePathListComponent extends ManagementListComponent<StoragePath> {
--- a/src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.spec.ts
@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { TagListComponent } from './tag-list.component'

 describe('TagListComponent', () => {
@@ -138,12 +138,12 @@ describe('TagListComponent', () => {
    }

    component.data = [parent as any]
-    component.selectPage(true)
+    component.selectPage()

    expect(component.selectedObjects.has(10)).toBe(true)
    expect(component.selectedObjects.has(11)).toBe(true)

-    component.selectPage(false)
+    component.clearSelection()
    expect(component.selectedObjects.size).toBe(0)
  })
 })
--- a/src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
  NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TagEditDialogComponent } from 'src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
 import { Tag } from 'src/app/data/tag'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'

@Component({
  selector: 'pngx-tag-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
  imports: [
    SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
  ],
 })
 export class TagListComponent extends ManagementListComponent<Tag> {
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/src-ui/src/app/components/manage/mail/mail.component.html
@@ -11,16 +11,16 @@
  <h4>
    <ng-container i18n>Mail accounts</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Account</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Account</ng-container>
    </button>
    @if (gmailOAuthUrl) {
      <a class="btn btn-sm btn-outline-secondary ms-2" [href]="gmailOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="google"></i-bs>&nbsp;<ng-container i18n>Connect Gmail Account</ng-container>
+        <i-bs name="google" class="me-1"></i-bs><ng-container i18n>Connect Gmail Account</ng-container>
      </a>
    }
    @if (outlookOAuthUrl) {
      <a class="btn btn-sm btn-outline-secondary ms-2" [href]="outlookOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="microsoft"></i-bs>&nbsp;<ng-container i18n>Connect Outlook Account</ng-container>
+        <i-bs name="microsoft" class="me-1"></i-bs><ng-container i18n>Connect Outlook Account</ng-container>
      </a>
    }
  </h4>
@@ -72,18 +72,18 @@
            <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
              <div class="btn-group">
                <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
                </button>
                <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
-                  <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
                </button>
                <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                </button>
              </div>
              <div class="btn-group">
                <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="processAccount(account)">
-                  <i-bs width="1em" height="1em" name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Process Mail</ng-container>
+                  <i-bs width="1em" height="1em" name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Process Mail</ng-container>
                </button>
              </div>
            </div>
@@ -102,7 +102,7 @@
  <h4 class="mt-4">
    <ng-container i18n>Mail rules</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Rule</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Rule</ng-container>
    </button>
  </h4>
  <ul class="list-group">
@@ -140,7 +140,7 @@
          </div>
          <div class="col d-flex align-items-center d-none d-sm-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
            <button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMail(rule)">
-              <i-bs width="1em" height="1em" name="clock-history"></i-bs>&nbsp;<ng-container i18n>View Processed Mail</ng-container>
+              <i-bs width="1em" height="1em" name="clock-history" class="me-1"></i-bs><ng-container i18n>View Processed Mail</ng-container>
            </button>
          </div>
          <div class="col-3">
@@ -160,18 +160,18 @@
            <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
              <div class="btn-group">
                <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
                </button>
                <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
-                  <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
                </button>
                <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                </button>
              </div>
              <div class="btn-group">
                <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="files"></i-bs>&nbsp;<ng-container i18n>Copy</ng-container>
+                  <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
                </button>
              </div>
            </div>
--- a/src-ui/src/app/components/manage/workflows/workflows.component.html
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.html
@@ -6,7 +6,7 @@
  infoLink="usage/#workflows"
  >
  <button type="button" class="btn btn-sm btn-outline-primary" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Workflow</ng-container>
+    <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Workflow</ng-container>
  </button>
 </pngx-page-header>

@@ -60,15 +60,15 @@
          <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
            <div class="btn-group">
              <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
              </button>
              <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
              </button>
            </div>
            <div class="btn-group">
              <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="files"></i-bs>&nbsp;<ng-container i18n>Copy</ng-container>
+                <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
              </button>
            </div>
          </div>
--- a/src-ui/src/app/components/not-found/not-found.component.html
+++ b/src-ui/src/app/components/not-found/not-found.component.html
@@ -6,7 +6,7 @@
      <h1 class="display-6" i18n>Not Found</h1>
      <p>
        <a class="btn btn-primary" routerLink="/dashboard">
-          <i-bs width="1.2em" height="1.2em" name="house"></i-bs>&nbsp;<ng-container i18n>Go to Dashboard</ng-container>
+          <i-bs width="1.2em" height="1.2em" name="house" class="me-1"></i-bs><ng-container i18n>Go to Dashboard</ng-container>
        </a>
      </p>
    </div>
--- a/src-ui/src/app/data/document.ts
+++ b/src-ui/src/app/data/document.ts
@@ -161,6 +161,18 @@ export interface Document extends ObjectWithPermissions {

  duplicate_documents?: Document[]

+  // Versioning
+  root_document?: number
+  versions?: DocumentVersionInfo[]
+
  // Frontend only
  __changedFields?: string[]
 }
+
+export interface DocumentVersionInfo {
+  id: number
+  added?: Date
+  version_label?: string
+  checksum?: string
+  is_root: boolean
+}
--- a/src-ui/src/app/data/mail-rule.ts
+++ b/src-ui/src/app/data/mail-rule.ts
@@ -84,4 +84,6 @@ export interface MailRule extends ObjectWithPermissions {
  assign_correspondent?: number // PaperlessCorrespondent.id

  assign_owner_from_rule: boolean
+
+  stop_processing: boolean
 }
--- a/src-ui/src/app/data/ui-settings.ts
+++ b/src-ui/src/app/data/ui-settings.ts
@@ -19,6 +19,10 @@ export enum GlobalSearchType {
  TITLE_CONTENT = 'title-content',
 }

+export enum CollapsibleSection {
+  ATTRIBUTES = 'attributes',
+}
+
 export const PAPERLESS_GREEN_HEX = '#17541f'

 export const SETTINGS_KEYS = {
@@ -51,6 +55,8 @@ export const SETTINGS_KEYS = {
  NOTES_ENABLED: 'general-settings:notes-enabled',
  AUDITLOG_ENABLED: 'general-settings:auditlog-enabled',
  SLIM_SIDEBAR: 'general-settings:slim-sidebar',
+  ATTRIBUTES_SECTIONS_COLLAPSED:
+    'general-settings:attributes-sections-collapsed',
  UPDATE_CHECKING_ENABLED: 'general-settings:update-checking:enabled',
  UPDATE_CHECKING_BACKEND_SETTING:
    'general-settings:update-checking:backend-setting',
@@ -112,6 +118,11 @@ export const SETTINGS: UiSetting[] = [
    type: 'boolean',
    default: false,
  },
+  {
+    key: SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+    type: 'array',
+    default: [],
+  },
  {
    key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
    type: 'number',
--- a/src-ui/src/app/data/workflow-action.ts
+++ b/src-ui/src/app/data/workflow-action.ts
@@ -6,6 +6,7 @@ export enum WorkflowActionType {
  Email = 3,
  Webhook = 4,
  PasswordRemoval = 5,
+  MoveToTrash = 6,
 }

 export interface WorkflowActionEmail extends ObjectWithId {
--- a/src-ui/src/app/guards/permissions.guard.spec.ts
+++ b/src-ui/src/app/guards/permissions.guard.spec.ts
@@ -96,4 +96,52 @@ describe('PermissionsGuard', () => {
    expect(canActivate).toHaveProperty('root') // returns UrlTree
    expect(toastSpy).toHaveBeenCalled()
  })
+
+  it('should activate when any required permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Tag
+      })
+
+    const canActivate = guard.canActivate(
+      {
+        data: {
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+          ],
+        },
+      } as any,
+      routerState.snapshot
+    )
+
+    expect(canActivate).toBeTruthy()
+  })
+
+  it('should not activate when no required permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation(() => false)
+
+    const canActivate = guard.canActivate(
+      {
+        data: {
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+          ],
+        },
+      } as any,
+      routerState.snapshot
+    )
+
+    expect(canActivate).toHaveProperty('root')
+  })
 })
--- a/src-ui/src/app/guards/permissions.guard.ts
+++ b/src-ui/src/app/guards/permissions.guard.ts
@@ -20,12 +20,20 @@ export class PermissionsGuard {
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | UrlTree {
+    const requiredPermissionAny: { action: any; type: any }[] =
+      route.data.requiredPermissionAny
+
    if (
      (route.data.requireAdmin && !this.permissionsService.isAdmin()) ||
      (route.data.requiredPermission &&
        !this.permissionsService.currentUserCan(
          route.data.requiredPermission.action,
          route.data.requiredPermission.type
+        )) ||
+      (Array.isArray(requiredPermissionAny) &&
+        requiredPermissionAny.length > 0 &&
+        !requiredPermissionAny.some((p) =>
+          this.permissionsService.currentUserCan(p.action, p.type)
        ))
    ) {
      // Check if tour is running 1 = TourState.ON
--- a/src-ui/src/app/services/document-list-view.service.spec.ts
+++ b/src-ui/src/app/services/document-list-view.service.spec.ts
@@ -164,7 +164,7 @@ describe('DocumentListViewService', () => {
        value: tags__id__in,
      },
    ]
-    documentListViewService.filterRules = filterRulesAny
+    documentListViewService.setFilterRules(filterRulesAny)
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&tags__id__in=${tags__id__in}`
    )
@@ -178,7 +178,7 @@ describe('DocumentListViewService', () => {
    )
    expect(req.request.method).toEqual('GET')
    // reset the list
-    documentListViewService.filterRules = []
+    documentListViewService.setFilterRules([])
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
    )
@@ -210,7 +210,7 @@ describe('DocumentListViewService', () => {
        value: tags__id__in,
      },
    ]
-    documentListViewService.filterRules = filterRulesAny
+    documentListViewService.setFilterRules(filterRulesAny)
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&tags__id__in=${tags__id__in}`
    )
@@ -218,7 +218,7 @@ describe('DocumentListViewService', () => {
    req.flush('Generic error', { status: 404, statusText: 'Unexpected error' })
    expect(documentListViewService.error).toEqual('Generic error')
    // reset the list
-    documentListViewService.filterRules = []
+    documentListViewService.setFilterRules([])
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
    )
@@ -295,13 +295,41 @@ describe('DocumentListViewService', () => {
  })

  it('should use filter rules to update query params', () => {
-    documentListViewService.filterRules = filterRules
+    documentListViewService.setFilterRules(filterRules)
    const req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.pageSize}&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}`
    )
    expect(req.request.method).toEqual('GET')
  })

+  it('should support setting filter rules and resetting to page one', () => {
+    documentListViewService.currentPage = 2
+    let req = httpTestingController.expectOne((request) =>
+      request.urlWithParams.startsWith(
+        `${environment.apiBaseUrl}documents/?page=2&page_size=50&ordering=-created&truncate_content=true`
+      )
+    )
+    expect(req.request.method).toEqual('GET')
+    req.flush(full_results)
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/selection_data/`
+    )
+    req.flush([])
+
+    documentListViewService.setFilterRules(filterRules, true)
+
+    const filteredReqs = httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}`
+    )
+    expect(filteredReqs).toHaveLength(1)
+    filteredReqs[0].flush(full_results)
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/selection_data/`
+    )
+    req.flush([])
+    expect(documentListViewService.currentPage).toEqual(1)
+  })
+
  it('should support quick filter', () => {
    documentListViewService.quickFilter(filterRules)
    const req = httpTestingController.expectOne(
@@ -336,7 +364,7 @@ describe('DocumentListViewService', () => {
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-added&truncate_content=true&tags__id__all=9`
    )
-    documentListViewService.filterRules = []
+    documentListViewService.setFilterRules([])
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-added&truncate_content=true`
    )
@@ -348,7 +376,7 @@ describe('DocumentListViewService', () => {
  })

  it('should support navigating next / previous', () => {
-    documentListViewService.filterRules = []
+    documentListViewService.setFilterRules([])
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
    )
@@ -558,7 +586,7 @@ describe('DocumentListViewService', () => {
    req.flush(full_results)
    expect(documentListViewService.selected.size).toEqual(6)

-    documentListViewService.filterRules = filterRules
+    documentListViewService.setFilterRules(filterRules)
    httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&tags__id__all=9`
    )
@@ -592,7 +620,7 @@ describe('DocumentListViewService', () => {

    documentListViewService.loadSavedView(view2)
    expect(documentListViewService.sortField).toEqual('score')
-    documentListViewService.filterRules = []
+    documentListViewService.setFilterRules([])
    expect(documentListViewService.sortField).toEqual('created')
    httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -342,7 +342,7 @@ export class DocumentListViewService {
      })
  }

-  set filterRules(filterRules: FilterRule[]) {
+  setFilterRules(filterRules: FilterRule[], resetPage: boolean = false) {
    if (
      !isFullTextFilterRule(filterRules) &&
      this.activeListViewState.sortField == 'score'
@@ -350,6 +350,9 @@ export class DocumentListViewService {
      this.activeListViewState.sortField = 'created'
    }
    this.activeListViewState.filterRules = filterRules
+    if (resetPage) {
+      this.activeListViewState.currentPage = 1
+    }
    this.reload()
    this.reduceSelectionToFilter()
    this.saveDocumentListView()
@@ -479,7 +482,7 @@ export class DocumentListViewService {

  quickFilter(filterRules: FilterRule[]) {
    this._activeSavedViewId = null
-    this.filterRules = filterRules
+    this.setFilterRules(filterRules)
    this.router.navigate(['documents'])
  }

--- a/src-ui/src/app/services/rest/document.service.spec.ts
+++ b/src-ui/src/app/services/rest/document.service.spec.ts
@@ -165,6 +165,14 @@ describe(`DocumentService`, () => {
    expect(req.request.method).toEqual('GET')
  })

+  it('should call appropriate api endpoint for versioned metadata', () => {
+    subscription = service.getMetadata(documents[0].id, 123).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/metadata/?version=123`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
  it('should call appropriate api endpoint for getting selection data', () => {
    const ids = [documents[0].id]
    subscription = service.getSelectionData(ids).subscribe()
@@ -233,11 +241,22 @@ describe(`DocumentService`, () => {
    )
  })

+  it('should return the correct preview URL for a specific version', () => {
+    const url = service.getPreviewUrl(documents[0].id, false, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/preview/?version=123`
+    )
+  })
+
  it('should return the correct thumb URL for a single document', () => {
    let url = service.getThumbUrl(documents[0].id)
    expect(url).toEqual(
      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/thumb/`
    )
+    url = service.getThumbUrl(documents[0].id, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/thumb/?version=123`
+    )
  })

  it('should return the correct download URL for a single document', () => {
@@ -249,6 +268,22 @@ describe(`DocumentService`, () => {
    expect(url).toEqual(
      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?original=true`
    )
+    url = service.getDownloadUrl(documents[0].id, false, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?version=123`
+    )
+    url = service.getDownloadUrl(documents[0].id, true, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?original=true&version=123`
+    )
+  })
+
+  it('should pass optional get params for version and fields', () => {
+    subscription = service.get(documents[0].id, 123, 'content').subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?full_perms=true&version=123&fields=content`
+    )
+    expect(req.request.method).toEqual('GET')
  })

  it('should set search query', () => {
@@ -283,12 +318,65 @@ describe(`DocumentService`, () => {
    expect(req.request.body.remove_inbox_tags).toEqual(true)
  })

+  it('should pass selected version to patch when provided', () => {
+    subscription = service.patch(documents[0], 123).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?version=123`
+    )
+    expect(req.request.method).toEqual('PATCH')
+  })
+
  it('should call appropriate api endpoint for getting audit log', () => {
    subscription = service.getHistory(documents[0].id).subscribe()
    const req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/history/`
    )
  })
+
+  it('should call appropriate api endpoint for getting root document id', () => {
+    subscription = service.getRootId(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/root/`
+    )
+    expect(req.request.method).toEqual('GET')
+    req.flush({ root_id: documents[0].id })
+  })
+
+  it('should call appropriate api endpoint for getting document versions', () => {
+    subscription = service.getVersions(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?fields=id,versions`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
+  it('should call appropriate api endpoint for deleting a document version', () => {
+    subscription = service.deleteVersion(documents[0].id, 10).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/versions/10/`
+    )
+    expect(req.request.method).toEqual('DELETE')
+    req.flush({ result: 'OK', current_version_id: documents[0].id })
+  })
+
+  it('should call appropriate api endpoint for uploading a new version', () => {
+    const file = new File(['hello'], 'test.pdf', { type: 'application/pdf' })
+
+    subscription = service
+      .uploadVersion(documents[0].id, file, 'Label')
+      .subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/update_version/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toBeInstanceOf(FormData)
+
+    const body = req.request.body as FormData
+    expect(body.get('version_label')).toEqual('Label')
+    expect(body.get('document')).toBeInstanceOf(File)
+
+    req.flush('task-id')
+  })
 })

 it('should construct sort fields respecting permissions', () => {
--- a/src-ui/src/app/services/rest/document.service.ts
+++ b/src-ui/src/app/services/rest/document.service.ts
@@ -155,44 +155,108 @@ export class DocumentService extends AbstractPaperlessService<Document> {
    }).pipe(map((response) => response.results.map((doc) => doc.id)))
  }

-  get(id: number): Observable<Document> {
+  get(
+    id: number,
+    versionID: number = null,
+    fields: string = null
+  ): Observable<Document> {
+    const params: { full_perms: boolean; version?: string; fields?: string } = {
+      full_perms: true,
+    }
+    if (versionID) {
+      params.version = versionID.toString()
+    }
+    if (fields) {
+      params.fields = fields
+    }
    return this.http.get<Document>(this.getResourceUrl(id), {
-      params: {
-        full_perms: true,
-      },
+      params,
    })
  }

-  getPreviewUrl(id: number, original: boolean = false): string {
+  getPreviewUrl(
+    id: number,
+    original: boolean = false,
+    versionID: number = null
+  ): string {
    let url = new URL(this.getResourceUrl(id, 'preview'))
    if (this._searchQuery) url.hash = `#search="${this.searchQuery}"`
    if (original) {
      url.searchParams.append('original', 'true')
    }
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
    return url.toString()
  }

-  getThumbUrl(id: number): string {
-    return this.getResourceUrl(id, 'thumb')
+  getThumbUrl(id: number, versionID: number = null): string {
+    let url = new URL(this.getResourceUrl(id, 'thumb'))
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return url.toString()
  }

-  getDownloadUrl(id: number, original: boolean = false): string {
-    let url = this.getResourceUrl(id, 'download')
+  getDownloadUrl(
+    id: number,
+    original: boolean = false,
+    versionID: number = null
+  ): string {
+    let url = new URL(this.getResourceUrl(id, 'download'))
    if (original) {
-      url += '?original=true'
+      url.searchParams.append('original', 'true')
    }
-    return url
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return url.toString()
+  }
+
+  uploadVersion(documentId: number, file: File, versionLabel?: string) {
+    const formData = new FormData()
+    formData.append('document', file, file.name)
+    if (versionLabel) {
+      formData.append('version_label', versionLabel)
+    }
+    return this.http.post<string>(
+      this.getResourceUrl(documentId, 'update_version'),
+      formData
+    )
+  }
+
+  getVersions(documentId: number): Observable<Document> {
+    return this.http.get<Document>(this.getResourceUrl(documentId), {
+      params: {
+        fields: 'id,versions',
+      },
+    })
+  }
+
+  getRootId(documentId: number) {
+    return this.http.get<{ root_id: number }>(
+      this.getResourceUrl(documentId, 'root')
+    )
+  }
+
+  deleteVersion(rootDocumentId: number, versionId: number) {
+    return this.http.delete<{ result: string; current_version_id: number }>(
+      this.getResourceUrl(rootDocumentId, `versions/${versionId}`)
+    )
  }

  getNextAsn(): Observable<number> {
    return this.http.get<number>(this.getResourceUrl(null, 'next_asn'))
  }

-  patch(o: Document): Observable<Document> {
+  patch(o: Document, versionID: number = null): Observable<Document> {
    o.remove_inbox_tags = !!this.settingsService.get(
      SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
    )
-    return super.patch(o)
+    this.clearCache()
+    return this.http.patch<Document>(this.getResourceUrl(o.id), o, {
+      params: versionID ? { version: versionID.toString() } : {},
+    })
  }

  uploadDocument(formData) {
@@ -203,8 +267,15 @@ export class DocumentService extends AbstractPaperlessService<Document> {
    )
  }

-  getMetadata(id: number): Observable<DocumentMetadata> {
-    return this.http.get<DocumentMetadata>(this.getResourceUrl(id, 'metadata'))
+  getMetadata(
+    id: number,
+    versionID: number = null
+  ): Observable<DocumentMetadata> {
+    let url = new URL(this.getResourceUrl(id, 'metadata'))
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return this.http.get<DocumentMetadata>(url.toString())
  }

  bulkEdit(ids: number[], method: string, args: any) {
--- a/src-ui/src/app/services/rest/mail-rule.service.spec.ts
+++ b/src-ui/src/app/services/rest/mail-rule.service.spec.ts
@@ -33,6 +33,7 @@ const mail_rules = [
    action: MailAction.MarkRead,
    assign_title_from: MailMetadataTitleOption.FromSubject,
    assign_owner_from_rule: true,
+    stop_processing: false,
  },
  {
    name: 'Mail Rule 2',
@@ -52,6 +53,7 @@ const mail_rules = [
    action: MailAction.Delete,
    assign_title_from: MailMetadataTitleOption.FromSubject,
    assign_owner_from_rule: true,
+    stop_processing: false,
  },
  {
    name: 'Mail Rule 3',
@@ -71,6 +73,7 @@ const mail_rules = [
    action: MailAction.Flag,
    assign_title_from: MailMetadataTitleOption.FromSubject,
    assign_owner_from_rule: false,
+    stop_processing: false,
  },
 ]

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
shamoon	5f67efbd3a	Merge migrations	2026-02-23 17:11:36 -08:00
shamoon	434409e0f1	Merge branch 'dev' into feature-document-versions-1218	2026-02-23 17:07:22 -08:00
GitHub Actions	e08287f791	Auto translate strings	2026-02-24 00:44:37 +00:00
Jan Kleine	c4ea332c61	Feature: move to trash action for workflows (#11176 ) Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>	2026-02-23 16:42:50 -08:00
shamoon	fa13ca7a42	Fix: pass api_base to OpenAIEmbedding (#12151 )	2026-02-23 13:47:32 -08:00
Trenton H	814f57b099	Allows the typing job to error and still pass, so we get results, but not failures for now (#12147 )	2026-02-23 09:44:35 -08:00
GitHub Actions	be7f1c6233	Auto translate strings	2026-02-22 23:18:50 +00:00
shamoon	d6cd6d0311	Tweakhancement: reset to page 1 on reset filters (#12143 )	2026-02-22 15:17:02 -08:00
Daniel Herrmann	095ea3cbd3	Documentation: clarify behaviour around document splitting (#12137 ) Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>	2026-02-22 08:26:38 -08:00
shamoon	5b667621cd	Try not to piss off mypy	2026-02-21 17:48:11 -08:00
shamoon	1b912c137a	Merge branch 'main' into dev	2026-02-21 17:45:28 -08:00
github-actions[bot]	98298e37cd	Changelog v2.20.8 - GHA (#12135 ) Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>	2026-02-21 17:43:19 -08:00
shamoon	35be0850ec	Bump version to 2.20.8	2026-02-21 16:49:52 -08:00
shamoon	1bb4b9b473	More permissions on mail account test endpoint	2026-02-21 16:47:55 -08:00
shamoon	f85094dc2b	Set owner on OAuth mail credentials	2026-02-21 16:37:32 -08:00
shamoon	65ca78e9e7	Security: fix/GHSA-7qqc-wrcw-2fj9	2026-02-21 16:34:33 -08:00
GitHub Actions	57c5939d7b	Auto translate strings	2026-02-20 20:55:01 +00:00
shamoon	43fe932c57	Fix: unify POSTs when toggling sidebar to prevent db lock (#12129 )	2026-02-20 12:53:16 -08:00
shamoon	83f68d6063	Fix mailrule_stop_processing migration	2026-02-20 10:19:16 -08:00
shamoon	51d6f0f579	Update .mypy-baseline.txt	2026-02-16 10:18:38 -08:00
shamoon	d463a422ea	Merge branch 'dev' into feature-document-versions-1218	2026-02-16 09:57:31 -08:00
shamoon	eda0e61cec	Update mypy baseline	2026-02-16 09:56:59 -08:00
shamoon	426c0a8974	Chore: typing fixes	2026-02-16 09:54:06 -08:00
shamoon	509b12822a	Merge branch 'dev' into feature-document-versions-1218	2026-02-16 09:41:15 -08:00
shamoon	e54b69f7c4	Update mypy baseline	2026-02-16 09:39:07 -08:00
shamoon	4884b67714	Fix more typing failures	2026-02-16 09:37:33 -08:00
GitHub Actions	2ccb315291	Auto translate strings	2026-02-16 17:33:37 +00:00
shamoon	02896a15fd	Fix: only pass user to SerializerWithPerms serializers	2026-02-16 09:31:33 -08:00
shamoon	d8e07b8d84	Fix typing issue	2026-02-16 09:17:20 -08:00
shamoon	f4ba1173cf	Merge branch 'dev' into feature-document-versions-1218	2026-02-16 09:07:38 -08:00
GitHub Actions	c08d3aa962	Auto translate strings	2026-02-16 17:05:24 +00:00
shamoon	be4e29a19c	Merge branch 'main' into dev	2026-02-16 09:01:19 -08:00
github-actions[bot]	5c1bbcd06d	Documentation: Add v2.20.7 changelog (#12100 ) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>	2026-02-16 09:00:19 -08:00
shamoon	bc734798e3	Add permissions	2026-02-16 08:12:45 -08:00
shamoon	5ecbfc9df7	Split build vs deploy docs	2026-02-16 07:46:09 -08:00
shamoon	e63b62d531	Bump version to 2.20.7	2026-02-16 07:26:59 -08:00
shamoon	dd3ec83569	Fix: correct user dropdown button icon styling (#12092 )	2026-02-16 07:26:52 -08:00
shamoon	7a23356898	Merge branch 'release/v2.20.x'	2026-02-16 07:24:37 -08:00
shamoon	afaf39e43a	Fix/GHSA-x395-6h48-wr8v	2026-02-16 00:02:15 -08:00
GitHub Actions	84163f4197	Auto translate strings	2026-02-15 00:39:28 +00:00
shamoon	ae234d15c8	Chore: track down the margin +   patterns	2026-02-14 16:37:35 -08:00
shamoon	118afa82b3	Fix: correct user dropdown button icon styling (#12092 )	2026-02-14 08:15:19 -08:00
shamoon	59609cc4c0	Merge branch 'dev' into feature-document-versions-1218	2026-02-13 09:47:35 -08:00
shamoon	56d1b5677a	Fix migration conflict	2026-02-13 09:47:15 -08:00
shamoon	43e54b9b02	Merge branch 'dev' into feature-document-versions-1218	2026-02-13 09:44:20 -08:00
GitHub Actions	6622349b5f	Auto translate strings	2026-02-13 17:37:56 +00:00
shamoon	b050fab77f	Enhancement: consolidate management lists into document attributes section (#12045 )	2026-02-13 09:36:12 -08:00
shamoon	a467df0755	Enhancement: option to stop processing further mail rules (#12053 )	2026-02-13 17:33:29 +00:00
shamoon	6b03988d49	Merge conflict	2026-02-13 09:31:39 -08:00
shamoon	f8056e41ee	Redundant	2026-02-13 09:27:08 -08:00
GitHub Actions	728c5ea07b	Auto translate strings	2026-02-13 16:40:48 +00:00
shamoon	36145fd71d	Merge branch 'dev' into feature-document-versions-1218	2026-02-13 08:40:20 -08:00
shamoon	4f2e16fdc7	Chore: Pngx pdf viewer fixes (#12083 )	2026-02-13 08:38:49 -08:00
shamoon	969eb8beaa	Update api.md	2026-02-13 07:50:39 -08:00
shamoon	80af37bf1f	Avoid a little redundancy here	2026-02-12 22:50:41 -08:00
shamoon	08b4cdbdf0	clarify audit log stuff, fix api descriptions	2026-02-12 22:48:33 -08:00
shamoon	c929f1c94c	dont add extra content query	2026-02-12 22:45:23 -08:00
shamoon	2bb73627d6	Make this dumber	2026-02-12 22:36:16 -08:00
shamoon	e049f3c7de	Chasing a little coverage	2026-02-12 22:11:37 -08:00
shamoon	c8b1ec1259	OK extract versions to its own component	2026-02-12 21:35:02 -08:00
shamoon	6a1dfe38a2	Typing	2026-02-12 21:34:45 -08:00
shamoon	be4ff994bc	Extract to a helper so its easier to see	2026-02-12 21:07:57 -08:00
shamoon	1df0201a2f	Normalize perms to root	2026-02-12 19:58:03 -08:00
shamoon	d9603840ac	DRY these perms checks too	2026-02-12 19:49:50 -08:00
shamoon	965a16120d	More simplification I think	2026-02-12 19:05:21 -08:00
shamoon	f5ee86e778	DRY, nice	2026-02-12 18:55:47 -08:00
shamoon	da865b85fa	And this	2026-02-12 17:00:40 -08:00
shamoon	0fbfd5431c	Bit more coverage	2026-02-12 17:00:09 -08:00
shamoon	d9eb6a9224	Docs	2026-02-12 11:51:56 -08:00
shamoon	3ba48953aa	DRY	2026-02-12 11:42:43 -08:00
shamoon	56e52f8701	Guard against stale ws events for version uploads	2026-02-12 11:39:34 -08:00
shamoon	825b241362	Ah, index should handle delete, update root when version changed	2026-02-12 11:35:04 -08:00
shamoon	e5d7abc8f9	Only send version when needed for metadata too	2026-02-12 11:34:59 -08:00
shamoon	472021b803	Fix discard goes to wrong version content	2026-02-12 11:15:31 -08:00
shamoon	c7c9845806	pre-fetch versions	2026-02-12 11:10:41 -08:00
shamoon	3b4112f930	Only append when needed	2026-02-12 11:07:11 -08:00
shamoon	6813542f29	Fix UI content should change on version select and thumbnail	2026-02-12 11:05:10 -08:00
shamoon	31e57db7ab	Frontend apply version id to retrieval when needed	2026-02-12 11:03:50 -08:00
shamoon	aceeb26d32	Allow retrieve to pull specific version	2026-02-12 10:56:04 -08:00
shamoon	755915c357	typing stuff	2026-02-12 10:33:00 -08:00
shamoon	b7d3be6f75	Make content edits target a specific version	2026-02-12 10:27:49 -08:00
shamoon	6a0fae67e9	Make content follow the version - store content per version - root doc retrieval returns latest content - updating content affects the latest version - load metadata per version	2026-02-12 10:20:47 -08:00
shamoon	60e400fb68	Fix version suffix	2026-02-11 23:24:55 -08:00
shamoon	595603f695	mypy too	2026-02-11 23:06:50 -08:00
shamoon	c414857ac4	pyrefly happy?	2026-02-11 23:02:46 -08:00
shamoon	f12d5cb610	Unify this a bit	2026-02-11 23:00:08 -08:00
shamoon	74ce218b78	more backend coverage	2026-02-11 22:41:59 -08:00
shamoon	f5195cdb96	Last part of frontend coverage	2026-02-11 22:16:35 -08:00
shamoon	46b4763706	Merge branch 'dev' into feature-document-versions-1218	2026-02-11 22:08:38 -08:00
shamoon	158aa46f9a	Frontend coverage, at least	2026-02-11 22:08:31 -08:00
shamoon	addb369d32	Simplfy this too	2026-02-11 21:56:40 -08:00
shamoon	fea289c29c	Some markup stuff	2026-02-11 21:45:21 -08:00
shamoon	de09a62550	Simplify this	2026-02-11 21:39:02 -08:00
shamoon	fe6b3a1a41	some more backend coverage	2026-02-11 00:08:53 -08:00
shamoon	65bf55f610	Move for sonar	2026-02-11 00:02:10 -08:00
shamoon	8391469b1c	Coverage for doc details	2026-02-10 23:58:55 -08:00
shamoon	a4f448e930	Oops leftover	2026-02-10 23:47:42 -08:00
shamoon	c2b4787c45	Sonar	2026-02-10 23:45:07 -08:00
shamoon	865c79a9cc	Set sp	2026-02-10 23:35:00 -08:00
shamoon	19171b1641	Tweak markup	2026-02-10 23:34:55 -08:00
shamoon	64e95d9903	Consolidate migration	2026-02-10 23:17:51 -08:00
shamoon	6092ea8ee8	Update .mypy-baseline.txt	2026-02-10 22:41:15 -08:00
shamoon	9cd71de89d	No of course it wasnt	2026-02-10 22:20:33 -08:00
shamoon	06b5c22858	Please be the last one	2026-02-10 22:03:50 -08:00
shamoon	b1f2606022	et tu, mypy?	2026-02-10 21:52:13 -08:00
shamoon	5a0a8a58b3	Try this way	2026-02-10 21:15:33 -08:00
shamoon	1a47f3801f	Ok one more	2026-02-10 21:11:04 -08:00
shamoon	23390d0890	More typing stuff	2026-02-10 21:08:36 -08:00
shamoon	8b663393c2	type checking	2026-02-10 20:52:00 -08:00
shamoon	640025f2a9	Ugh, help with typing stuff?	2026-02-10 20:52:00 -08:00
shamoon	e0a1688be8	Consistently version_label not label	2026-02-10 20:51:59 -08:00
shamoon	ddbf9982a5	frontend tests	2026-02-10 20:08:17 -08:00
shamoon	d36a64d3fe	some backend tests	2026-02-10 19:52:37 -08:00
shamoon	4e70f304fe	fix frontend tests	2026-02-10 19:45:08 -08:00
shamoon	8eb931f6f6	fix backend tests, schema	2026-02-10 19:45:07 -08:00
shamoon	1d0e80c784	Update views.py	2026-02-10 18:34:35 -08:00
shamoon	8b722a3db5	Fix deleted audit log [ci skip]	2026-02-10 17:54:17 -08:00
shamoon	9d3e62ff16	audit log entries for version	2026-02-10 17:27:20 -08:00
shamoon	d81748b39d	Merge branch 'dev' into feature-document-versions-1218	2026-02-10 17:02:06 -08:00
shamoon	daa4586eeb	Bulk edit and actions should update version	2026-02-10 16:42:38 -08:00
shamoon	8014932419	head --> root to avoid confusion, prevent root deletion [ci skip]	2026-02-10 16:26:13 -08:00
shamoon	7fa400f486	Markup stuff	2026-02-10 16:13:34 -08:00
shamoon	43480bb611	Merge migrations [ci skip]	2026-02-10 16:05:07 -08:00
shamoon	99199efb5f	Merge branch 'dev' into feature-document-versions-1218	2026-02-10 16:04:07 -08:00
shamoon	bfb65a1eb8	Fix switching between docs	2026-02-10 15:10:45 -08:00
shamoon	b676397b80	Fix these ones	2026-02-10 13:52:20 -08:00
shamoon	5dd2e1040d	Love an icon	2026-02-10 13:30:45 -08:00
shamoon	f7413506f3	Versions, move dropdown	2026-02-10 13:27:30 -08:00
shamoon	40d5f8f756	Exclude versions from duplicates	2026-02-10 13:25:17 -08:00
shamoon	a5c211cc0f	Handle opening a version should rediect to head	2026-02-10 13:20:45 -08:00
shamoon	667e4b81eb	Sweet, live updating	2026-02-10 13:13:21 -08:00
shamoon	3a5a32771e	Update versions after upload finishes	2026-02-10 11:11:23 -08:00
shamoon	79001c280d	Refresh versions after delete	2026-02-10 11:07:39 -08:00
shamoon	6ecd66da86	Delete version ui	2026-02-10 10:42:21 -08:00
shamoon	41d8854f56	Add delete-version endpoint	2026-02-10 09:57:01 -08:00
shamoon	57395ff99c	Trash versions when deleting head docs	2026-02-10 09:53:28 -08:00
shamoon	90e3ed142f	Set added timestamp for new versions	2026-02-10 09:47:16 -08:00
shamoon	9ca80af42f	Frontend version info updates, checksum	2026-02-10 09:43:15 -08:00
shamoon	224a873de2	Version label	2026-02-10 09:16:20 -08:00
shamoon	719582938e	Fix consume task args	2026-02-10 00:15:30 -08:00
shamoon	9b0af67033	Move migration	2026-02-09 23:42:25 -08:00
shamoon	7f2789e323	Merge branch 'dev' into feature-document-versions-1218	2026-02-09 23:41:44 -08:00
shamoon	5b45b89d35	Performance fix: use subqueries to improve object retrieval in large installs (#11950 )	2026-02-05 08:46:32 -08:00
shamoon	5b9bb147cf	Tweakhancement: tweak bulk delete text (#11967 )	2026-02-01 12:16:30 -08:00
shamoon	c278f52fb2	Fix: fix broken docker create_classifier command in 2.20.6 (#11965 )	2026-02-01 12:09:52 -08:00
shamoon	b436530e4f	Fix tests	2025-09-20 16:08:36 -07:00
shamoon	0ab94ab130	Make head_version and versions read-only via API	2025-09-20 15:38:21 -07:00
shamoon	ce5f5140f9	Random cleanup	2025-09-20 10:47:56 -07:00
shamoon	d8cb07b4a6	Llint	2025-09-20 10:17:54 -07:00
shamoon	1e48f9f9a9	Fix migration	2025-09-20 10:11:03 -07:00
shamoon	dc20db39e7	Fix caching [ci skip]	2025-09-20 10:10:09 -07:00
shamoon	065f501272	Fix frontend versions switching [ci skip]	2025-09-20 10:10:09 -07:00
shamoon	339a4db893	Update views.py	2025-09-20 10:10:08 -07:00
shamoon	0cc5f12cbf	version aware doc endpoints	2025-09-20 10:10:08 -07:00
shamoon	e099998b2f	Fix archive filename clash	2025-09-20 10:10:07 -07:00
shamoon	521628c1c3	Super basic UI stuff [ci skip]	2025-09-20 10:10:07 -07:00
shamoon	80ed84f538	Bulk editing to update version instead of replace	2025-09-20 10:10:06 -07:00
shamoon	2557c03463	Fix migration	2025-09-20 10:09:35 -07:00
shamoon	9ed75561e7	Basic start of update endpoint	2025-09-20 10:09:34 -07:00
shamoon	02a7500696	Add head_version	2025-09-20 10:09:31 -07:00