diff --git a/geniza/corpus/forms.py b/geniza/corpus/forms.py
index 48c49f715..11bd56d7f 100644
--- a/geniza/corpus/forms.py
+++ b/geniza/corpus/forms.py
@@ -162,7 +162,7 @@ class DocumentSearchForm(RangeForm):
         widget=forms.TextInput(
             attrs={
                 # Translators: placeholder for keyword search input
-                "placeholder": _("search by keyword"),
+                "placeholder": _("Search all fields by keyword"),
                 # Translators: accessible label for keyword search input
                 "aria-label": _("Keyword or Phrase"),
                 "type": "search",
@@ -207,9 +207,9 @@ class DocumentSearchForm(RangeForm):
         required=False,
         widget=SelectWithDisabled,
     )
-    # Translators: label for filter documents by date range
     docdate = RangeField(
-        label=_("Document Dates (CE)"),
+        # Translators: label for filter documents by date range
+        label=_("Dates"),
         required=False,
         widget=YearRangeWidget(
             attrs={"size": 4, "data-action": "input->search#update"},
@@ -218,23 +218,23 @@ class DocumentSearchForm(RangeForm):
 
     doctype = FacetChoiceField(
         # Translators: label for document type search form filter
-        label=_("Document Type"),
+        label=_("Document type"),
     )
     has_image = BooleanFacetField(
         # Translators: label for "has image" search form filter
-        label=_("Has Image"),
+        label=_("Image"),
     )
     has_transcription = BooleanFacetField(
         # Translators: label for "has transcription" search form filter
-        label=_("Has Transcription"),
+        label=_("Transcription"),
     )
     has_translation = BooleanFacetField(
         # Translators: label for "has translation" search form filter
-        label=_("Has Translation"),
+        label=_("Translation"),
     )
     has_discussion = BooleanFacetField(
         # Translators: label for "has discussion" search form filter
-        label=_("Has Discussion"),
+        label=_("Discussion"),
     )
 
     # mapping of solr facet fields to form input
@@ -258,6 +258,14 @@ def __init__(self, data=None, *args, **kwargs):
                 {"label": self.SORT_CHOICES[0][1], "disabled": True},
             )
 
+    def get_translated_label(self, field, label):
+        """Lookup translated label via db model object when applicable;
+        handle Person.gender as a special case; and otherwise just return the label"""
+        if field == "type" or field == "doctype":
+            # for doctype, label should be translated, so use doctype object
+            return DocumentType.objects_by_label.get(label, _("Unknown type"))
+        return label
+
     def filters_active(self):
         """Check if any filters are active; returns true if form fields other than sort or q are set"""
         if self.is_valid():
@@ -276,20 +284,10 @@ def set_choices_from_facets(self, facets):
         # populate facet field choices from current facets
         for key, facet_dict in facets.items():
             # restructure dict to set values of each key to tuples of (label, count)
-            if key == "type":
-                # for doctype, label should be translated, so use doctype object
-                facet_dict = {
-                    label: (
-                        DocumentType.objects_by_label.get(label, _("Unknown type")),
-                        count,
-                    )
-                    for (label, count) in facet_dict.items()
-                }
-            else:
-                # for other formfields, label == facet name
-                facet_dict = {
-                    label: (label, count) for (label, count) in facet_dict.items()
-                }
+            facet_dict = {
+                label: (self.get_translated_label(key, label), count)
+                for (label, count) in facet_dict.items()
+            }
             # use field from facet fields map or else field name as is
             formfield = self.solr_facet_fields.get(key, key)
             # for each facet, set the corresponding choice field
diff --git a/geniza/corpus/models.py b/geniza/corpus/models.py
index da6f16600..940bb93f9 100644
--- a/geniza/corpus/models.py
+++ b/geniza/corpus/models.py
@@ -1159,6 +1159,8 @@ def prep_index_chunk(cls, chunk):
             "languages",
             "log_entries",
             "dating_set",
+            "persondocumentrelation_set",
+            "documentplacerelation_set",
             Prefetch(
                 "textblock_set",
                 queryset=TextBlock.objects.select_related(
@@ -1237,6 +1239,7 @@ def index_data(self):
                 "old_pgpids_is": self.old_pgpids,
                 "language_code_s": self.primary_lang_code,
                 "language_script_s": self.primary_script,
+                "language_name_ss": [str(l) for l in self.languages.all()],
                 # use image info link without trailing info.json to easily convert back to iiif image client
                 # NOTE: if/when piffle supports initializing from full image uris, we could simplify this
                 # code to index the full image url, with rotation overrides applied
@@ -1247,6 +1250,8 @@ def index_data(self):
                 "iiif_labels_ss": [img["label"] for img in images],
                 "iiif_rotations_is": [img["rotation"] for img in images],
                 "has_image_b": len(images) > 0,
+                "people_count_i": self.persondocumentrelation_set.count(),
+                "places_count_i": self.documentplacerelation_set.count(),
             }
         )
 
@@ -1283,11 +1288,13 @@ def index_data(self):
                 fn.doc_relation
             )
 
-        # make sure digital editions are also counted as editions,
-        # whether or not there is a separate edition footnote
+        # make sure digital editions/translations are also counted,
+        # whether or not there is a separate edition/translation footnote
         for source, doc_relations in source_relations.items():
             if Footnote.DIGITAL_EDITION in doc_relations:
                 source_relations[source].add(Footnote.EDITION)
+            if Footnote.DIGITAL_TRANSLATION in doc_relations:
+                source_relations[source].add(Footnote.TRANSLATION)
 
         # flatten sets of relations by source into a list of relations
         for relation in list(chain(*source_relations.values())):
diff --git a/geniza/corpus/solr_queryset.py b/geniza/corpus/solr_queryset.py
index f4b7b47c1..134e2ba93 100644
--- a/geniza/corpus/solr_queryset.py
+++ b/geniza/corpus/solr_queryset.py
@@ -46,6 +46,7 @@ class DocumentSolrQuerySet(AliasedSolrQuerySet):
         "type": "type_s",
         "status": "status_s",
         "shelfmark": "shelfmark_s",  # string version for display
+        "shelfmarks": "fragment_shelfmark_ss",
         "document_date": "document_date_t",  # text version for search & display
         "original_date_t": "original_date",
         "collection": "collection_ss",
@@ -65,6 +66,7 @@ class DocumentSolrQuerySet(AliasedSolrQuerySet):
         "transcription": "text_transcription",
         "language_code": "language_code_s",
         "language_script": "language_script_s",
+        "languages": "language_name_ss",
         "translation": "text_translation",
         "translation_language_code": "translation_language_code_s",
         "translation_language_direction": "translation_language_direction_s",
@@ -79,6 +81,8 @@ class DocumentSolrQuerySet(AliasedSolrQuerySet):
         "old_shelfmark_t": "old_shelfmark_t",
         "transcription_nostem": "transcription_nostem",
         "description_nostem": "description_nostem",
+        "related_people": "people_count_i",
+        "related_places": "places_count_i",
     }
 
     # regex to convert field aliases used in search to actual solr fields
@@ -254,6 +258,18 @@ def get_result_document(self, doc):
             _("Unknown type"),
         )
 
+        if doc.get("shelfmarks"):
+            doc["related_documents"] = (
+                DocumentSolrQuerySet()
+                .filter("NOT pgpid_i:%d" % doc["pgpid"])
+                .filter(
+                    fragment_shelfmark_ss__in=[
+                        '"%s"' % shelfmark for shelfmark in doc["shelfmarks"]
+                    ]
+                )
+                .count()
+            )
+
         return doc
 
     def get_highlighting(self):
diff --git a/geniza/corpus/templates/corpus/document_list.html b/geniza/corpus/templates/corpus/document_list.html
index 3babcfccd..ccee49427 100644
--- a/geniza/corpus/templates/corpus/document_list.html
+++ b/geniza/corpus/templates/corpus/document_list.html
@@ -5,7 +5,7 @@
 {% block meta_description %}{{ page_description }}{% endblock meta_description %}
 
 {% block main %}
-    <h1 class="sr-only">{{ page_title }}</h1>
+    <h1>{{ page_title }}</h1>
     <form data-controller="search" data-turbo-frame="main" data-turbo-action="advance" data-page="document">
         <fieldset id="query">
             {% render_field form.q data-search-target="query" data-action="input->search#autoUpdateSort change->search#update" %}
@@ -14,60 +14,82 @@ <h1 class="sr-only">{{ page_title }}</h1>
             {% translate 'Submit search' as search_label %}
             <button type="submit" aria-label="{{ search_label }}" />
         </fieldset>
-        <a href="#filters" role="button" id="filters-button" data-action="click->search#openFilters"{% if form.filters_active %} class="active"{% endif %}>
-            <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
-            {% translate "Filters" %}
-        </a>
-
+        <div id="filters-header">
+            <a href="#filters" role="button" id="filters-button" data-search-target="filtersButton" data-action="click->search#toggleFiltersOpen">
+                <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
+                <span>{% translate "Filters" %}</span>
+                {% if applied_filters %}
+                    <span class="filter-count">{{ applied_filters|length }}</span>
+                {% endif %}
+            </a>
+            {% if applied_filters %}
+                {# convenient unapply filter buttons; aria role set to presentation as functionality duplicated below #}
+                <div id="applied-filters" role="presentation">
+                    {% for filter in applied_filters %}
+                        <button
+                            data-field="{{ filter.field }}"
+                            value="{{ filter.value }}"
+                            data-action="click->search#unapplyFilter"
+                        >
+                            {{ filter.label }}
+                            <i class="ph-x"></i>
+                        </button>
+                    {% endfor %}
+                </div>
+                <button id="clear-filters" data-action="click->search#clearFilters">
+                    {# Translators: label for button to clear all applied filters #}
+                    {% translate "Clear all" %}
+                </button>
+            {% endif %}
+        </div>
+        <div class="modal-backdrop" aria-hidden="true" data-action="click->search#closeFilters"></div>
         <fieldset id="filters" aria-expanded="false" data-search-target="filterModal">
+            <legend>{% translate "Filters" %}</legend>
             <a href="#" role="button" id="close-filters-modal" data-action="click->search#closeFilters">
                 {# Translators: label for 'filters' close button for mobile navigation #}
                 {% translate "Close filter options" as close_button %}
                 <span class="sr-only">{{ close_button }}</span>
             </a>
-            <a href="#" role="button" id="close-filters-button" data-action="click->search#closeFilters"{% if form.filters_active %} class="active"{% endif %}>
-                <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
-                {% translate "Filters" %}
-            </a>
-            <label for="{{ form.docdate.auto_id }}" class="date-range-label">
-                <span>{{ form.docdate.label }}</span>
-                {# NOTE: stimulus action is configured via django widget attrs #}
-                {{ form.docdate }}
-            </label>
-            <label for="{{ form.has_image.auto_id }}">
-                {% render_field form.has_image data-action="search#update" %}
-                {{ form.has_image.label }}
-            </label>
-            <label for="{{ form.has_transcription.auto_id }}">
-                {% render_field form.has_transcription data-action="search#update" %}
-                {{ form.has_transcription.label }}
-            </label>
-            <label for="{{ form.has_translation.auto_id }}">
-                {% render_field form.has_translation data-action="search#update" %}
-                {{ form.has_translation.label }}
-            </label>
-            <label for="{{ form.has_discussion.auto_id }}">
-                {% render_field form.has_discussion data-action="search#update" %}
-                {{ form.has_discussion.label }}
-            </label>
-            <details class="doctype-filter" data-search-target="doctypeFilter">
-                <summary data-action="click->search#toggleDoctypeFilter">
-                    {{ form.doctype.label }}
-                </summary>
+            <div class="fieldset-left-column">
+                <label for="{{ form.docdate.auto_id }}" class="date-range-label">
+                    <span class="fieldname">{{ form.docdate.label }}</span>
+                    {# NOTE: stimulus action is configured via django widget attrs #}
+                    {{ form.docdate }}
+                </label>
+            </div>
+            <fieldset class="includes-fields">
+                <legend><span class="fieldname">{% translate "Includes" %}</span></legend>
+                <ul>
+                    <li>
+                        <label for="{{ form.has_image.auto_id }}">
+                            {% render_field form.has_image data-action="search#update" %}
+                            {{ form.has_image.label }}
+                        </label>
+                    </li>
+                    <li>
+                        <label for="{{ form.has_transcription.auto_id }}">
+                            {% render_field form.has_transcription data-action="search#update" %}
+                            {{ form.has_transcription.label }}
+                        </label>
+                    </li>
+                    <li>
+                        <label for="{{ form.has_translation.auto_id }}">
+                            {% render_field form.has_translation data-action="search#update" %}
+                            {{ form.has_translation.label }}
+                        </label>
+                    </li>
+                    <li>
+                        <label for="{{ form.has_discussion.auto_id }}">
+                            {% render_field form.has_discussion data-action="search#update" %}
+                            {{ form.has_discussion.label }}
+                        </label>
+                    </li>
+                </ul>
+            </fieldset>
+            <label for="{{ form.doctype.auto_id }}">
+                <span class="fieldname">{{ form.doctype.label }}</span>
                 {% render_field form.doctype data-action="search#update" %}
-            </details>
-            <button type="submit" class="primary" data-action="click->search#applyFilters">
-                {% translate "Apply" %}
-            </button>
-        </fieldset>
-
-        <fieldset id="sort-fieldset">
-            <label for="{{ form.sort.html_name }}">
-                {{ form.sort.label }}
             </label>
-            {% render_field form.sort id="sort" data-search-target="sort" data-action="input->search#update" %}
-            {# caret icon for <select>; since we also have the select element, role=presentation #}
-            <i class="ph-caret-down" role="presentation"></i>
         </fieldset>
 
         {% if form.errors %}
@@ -80,31 +102,35 @@ <h1 class="sr-only">{{ page_title }}</h1>
                 {% endfor %}
             </ul>
         {% endif %}
-    </form>
-    <section id="document-list">
-        <h1>
-            {% comment %}Translators: number of search results{% endcomment %}
-            {% blocktranslate with count_humanized=paginator.count|intcomma count counter=paginator.count trimmed %}
-                1 result
-            {% plural %}
-                {{ count_humanized }} total results
-            {% endblocktranslate %}
-        </h1>
-        {% if is_paginated %}
-            {% include "corpus/snippets/pagination.html" %}
-        {% endif %}
-        <ol>
-            {% for document in documents %}
-                {% include "corpus/snippets/document_result.html" %}
-            {% endfor %}
-        </ol>
-        {% if is_paginated %}
-            {# Translators: screen reader label for pagination navigation displayed after search results #}
-            {% translate "secondary pagination" as pagination_label %}
-            {# don't include footer pagination on random sort, since it's disabled #}
-            {% if form.sort.value != 'random' %}
-                {% include "corpus/snippets/pagination.html" with aria_label=pagination_label %}
+        <section id="document-list">
+            <div class="header-row">
+                <h2>
+                    {# Translators: search results section header #}
+                    {% translate "Results" %}
+                </h2>
+                <span class="result-count">
+                    {% comment %}Translators: number of search results{% endcomment %}
+                    {% blocktranslate with count_humanized=paginator.count|intcomma count counter=paginator.count trimmed %}
+                        1 result
+                    {% plural %}
+                        {{ count_humanized }} results
+                    {% endblocktranslate %}
+                </span>
+                <fieldset id="sort-field">
+                    <label for="{{ form.sort.html_name }}">{{ form.sort.label }}</label>
+                    {% render_field form.sort id="sort" data-search-target="sort" data-action="input->search#update" %}
+                    {# caret icon for <select>; since we also have the select element, role=presentation #}
+                    <i class="ph-caret-down" role="presentation"></i>
+                </fieldset>
+            </div>
+            <ol>
+                {% for document in documents %}
+                    {% include "corpus/snippets/document_result.html" %}
+                {% endfor %}
+            </ol>
+            {% if is_paginated %}
+                {% include "corpus/snippets/pagination.html" %}
             {% endif %}
-        {% endif %}
-    </section>
+        </section>
+    </form>
 {% endblock main %}
diff --git a/geniza/corpus/templates/corpus/snippets/document_result.html b/geniza/corpus/templates/corpus/snippets/document_result.html
index 36cd9e270..33ac9bad7 100644
--- a/geniza/corpus/templates/corpus/snippets/document_result.html
+++ b/geniza/corpus/templates/corpus/snippets/document_result.html
@@ -7,14 +7,13 @@
                 {{ forloop.counter0|add:start_adjust }}
             {% endwith %}
         </span>
+        {# title #}
+        <h2 class="title">
+            {# type and shelfmark #}
+            <span class="doctype">{{ document.type }}</span>
+            <span class="shelfmark">{{ document.shelfmark|shelfmark_wrap }}</span>
+        </h2>
         <section class="{% if document.iiif_images %}has-image{% endif %}">
-            {# title #}
-            <h2 class="title">
-                {# type and shelfmark #}
-                <span class="doctype">{{ document.type }}</span>
-                <span class="shelfmark">{{ document.shelfmark|shelfmark_wrap }}</span>
-            </h2>
-
             {# metadata #}
             <dl class="metadata-list">
                 {% if document.document_date %}
@@ -27,21 +26,17 @@ <h2 class="title">
                         </time>
                     </dd>
                 {% endif %}
-                {% with document_highlights=highlighting|dict_item:document.id %}
-                    {% if document_highlights.old_shelfmark %}
-                        {# Translators: label for historical/old shelfmark on document fragments #}
-                        <dt>{% translate "Historical shelfmark" %}</dt>
-                        <dd>{{ document_highlights.old_shelfmark|striptags }}</dd>
-                    {% endif %}
-                {% endwith %}
-                {# Translators: Date document was first added to the PGP #}
-                <dt>{% translate "In PGP since" %}</dt>
-                {# Translators: label for unknown date for date added to PGP #}
-                {% translate "unknown" as unknown %}
-                <dd>{{ document.input_year|default:unknown }}</dd>
-                {# NOTE: Intentionally left untranslated #}
-                <dt lang="en">PGP ID</dt>
-                <dd>{{ document.pgpid }}</dd>
+                {% if document.languages|length %}
+                    <dt>
+                        {# Translators: Primary language label #}
+                        {% blocktranslate count counter=document.languages|length trimmed %}
+                            Primary language
+                        {% plural %}
+                            Primary languages
+                        {% endblocktranslate %}
+                    </dt>
+                    <dd>{{ document.languages|join:", " }}</dd>
+                {% endif %}
             </dl>
 
                 {# description #}
@@ -94,7 +89,41 @@ <h2 class="title">
                 {% endif %}
             {% endwith %}
 
-                {# scholarship records #}
+            {# related documents and entities #}
+            {% if document.related_documents or document.related_people or document.related_places %}
+                <dl class="related">
+                    {% if document.related_people %}
+                        <dt class="people">{% translate "Related People" %}</dt>
+                        <dd>{{ document.related_people }}</dd>
+                    {% endif %}
+                    {% if document.related_places %}
+                        <dt class="places">{% translate "Related Places" %}</dt>
+                        <dd>{{ document.related_places }}</dd>
+                    {% endif %}
+                    {% if document.related_documents %}
+                        <dt class="documents">{% translate "Related Documents" %}</dt>
+                        <dd>{{ document.related_documents }}</dd>
+                    {% endif %}
+                </dl>
+            {% endif %}
+
+            {# tags #}
+            {% if document.tags %}
+                    {# Translators: label for tags on a document #}
+                <h3 class="sr-only">{% translate 'Tags' %}</h3>
+                <ul class="tags">
+                    {% spaceless %}
+                        {% for tag in document.tags|alphabetize|slice:":5" %}
+                            <li><a href='{% url "corpus:document-search" %}?q=tag:"{{ tag }}"'>{{ tag }}</a></li>
+                        {% endfor %}
+                        {% if document.tags|length > 5 %}
+                            <li class="more">(+ {{ document.tags|length|add:"-5" }} {% translate 'more' %})</li>
+                        {% endif %}
+                    {% endspaceless %}
+                </ul>
+            {% endif %}
+
+            {# scholarship records #}
             <p class="scholarship">
                 {% if document.scholarship_count %}
                     {% if document.num_editions %}
@@ -131,44 +160,53 @@ <h2 class="title">
                     {% translate 'No Scholarship Records' %}
                 {% endif %}
             </p>
+        </section>
 
-                {# tags #}
-            {% if document.tags %}
-                    {# Translators: label for tags on a document #}
-                <h3 class="sr-only">{% translate 'Tags' %}</h3>
-                <ul class="tags">
-                    {% spaceless %}
-                        {% for tag in document.tags|alphabetize|slice:":5" %}
-                            <li><a href='{% url "corpus:document-search" %}?q=tag:"{{ tag }}"'>{{ tag }}</a></li>
-                        {% endfor %}
-                        {% if document.tags|length > 5 %}
-                            <li class="more">(+ {{ document.tags|length|add:"-5" }} {% translate 'more' %})</li>
-                        {% endif %}
-                    {% endspaceless %}
+        <div class="right-column">
+            {% if document.iiif_images %}
+                <ul class="images">
+                        {# list of tuples of (IIIF image, label, rotation) #}
+                    {% for image in document.iiif_images|slice:":3" %}
+                        {% with deg=image.2|stringformat:"i" %}
+                            {% with rotation="rotation:degrees="|add:deg %}
+                                <li class="image-{{ forloop.counter }}">
+                                    <img src="{{ image.0|iiif_image:"size:width=250"|iiif_image:rotation }}" loading="lazy" alt="{{ image.1 }}">
+                                </li>
+                            {% endwith %}
+                        {% endwith %}
+                    {% endfor %}
                 </ul>
+            {% else %}
+                {# Translators: label for when no image thumbnail is available #}
+                <span class="no-image">{% translate 'No Image' %}</span>
             {% endif %}
-        </section>
+            <dl class="pgp-metadata">
+                {# Translators: Date document was first added to the PGP #}
+                <dt>{% translate "In PGP since" %}</dt>
+                {# Translators: label for unknown date for date added to PGP #}
+                {% translate "unknown" as unknown %}
+                <dd>{{ document.input_year|default:unknown }}</dd>
+                {# NOTE: Intentionally left untranslated #}
+                <dt lang="en">PGPID</dt>
+                <dd>{{ document.pgpid }}</dd>
+            </dl>
+            <dl class="additional-metadata">
+                {% with document_highlights=highlighting|dict_item:document.id %}
+                    {% if document_highlights.old_shelfmark and document_highlights.old_shelfmark.0 %}
+                        {# Translators: label for historical/old shelfmark on document fragments #}
+                        <dt>{% translate "Historical shelfmark" %}</dt>
+                        <dd>{{ document_highlights.old_shelfmark.0|striptags }}</dd>
+                    {% endif %}
+                {% endwith %}
+            </dl>
+        </div>
 
-        {% if document.iiif_images %}
-            <ul class="images">
-                    {# list of tuples of (IIIF image, label, rotation) #}
-                {% for image in document.iiif_images|slice:":3" %}
-                    {% with deg=image.2|stringformat:"i" %}
-                        {% with rotation="rotation:degrees="|add:deg %}
-                            <li class="image-{{ forloop.counter }}">
-                                <img src="{{ image.0|iiif_image:"size:width=250"|iiif_image:rotation }}" loading="lazy" alt="{{ image.1 }}">
-                            </li>
-                        {% endwith %}
-                    {% endwith %}
-                {% endfor %}
-            </ul>
-        {% endif %}
             {# view link #}
 
             {# Translators: screen-reader label for "view document details" link #}
         {% blocktranslate asvar aria_view_details with document_label=document|get_document_label %}View details for {{ document_label }}{% endblocktranslate %}
         <a class="view-link" href="{% url 'corpus:document' document.pgpid %}" data-turbo-frame="main" aria-label="{{ aria_view_details }}">
-            <span>{% translate 'View document details' %}</span>
+            <span class="sr-only">{% translate 'View document details' %}</span>
         </a>
     </li>
 {% endspaceless %}
diff --git a/geniza/corpus/tests/test_corpus_models.py b/geniza/corpus/tests/test_corpus_models.py
index f863e6a60..ae7b63c12 100644
--- a/geniza/corpus/tests/test_corpus_models.py
+++ b/geniza/corpus/tests/test_corpus_models.py
@@ -1137,7 +1137,9 @@ def test_index_data_footnotes(
         index_data = document.index_data()
         assert index_data["num_editions_i"] == 2  # edition + digital edition
         assert index_data["has_digital_edition_b"] == True
-        assert index_data["num_translations_i"] == 2
+        assert (
+            index_data["num_translations_i"] == 3
+        )  # 2 translations + 1 digital translation
         assert index_data["has_digital_translation_b"] == True
         assert index_data["scholarship_count_i"] == 3  # unique sources
         assert index_data["text_transcription"] == ["transcrip[ti]on lines"]
diff --git a/geniza/corpus/views.py b/geniza/corpus/views.py
index 2db628aaa..4de2a17fc 100644
--- a/geniza/corpus/views.py
+++ b/geniza/corpus/views.py
@@ -77,13 +77,14 @@ class DocumentSearchView(
     context_object_name = "documents"
     template_name = "corpus/document_list.html"
     # Translators: title of document search page
-    page_title = _("Search Documents")
+    page_title = _("Documents")
     # Translators: description of document search page, for search engines
     page_description = _("Search and browse Geniza documents.")
     paginate_by = 50
     initial = {"sort": "random"}
     # NOTE: does not filter on status, since changing status could modify the page
     solr_lastmodified_filters = {"item_type_s": "document"}
+    applied_filter_labels = []
 
     # map form sort to solr sort field
     solr_sort = {
@@ -153,6 +154,27 @@ def get_form_kwargs(self):
 
         return kwargs
 
+    def get_applied_filter_labels(self, form, field, filters):
+        """return a list of objects with field/value pairs, and translated labels,
+        one for each applied filter"""
+        labels = []
+        for value in filters:
+            # remove escape characters
+            value = value.replace("\\", "")
+            # get translated label using form helper method
+            label = form.get_translated_label(field, value)
+            # return object with original field and value, so we can unapply programmatically
+            labels.append({"field": field, "value": value, "label": label})
+        return labels
+
+    def get_boolfield_label(self, form, fieldname):
+        """Return a label dict for a boolean field (works differently than other fields)"""
+        return {
+            "field": fieldname,
+            "value": "on",
+            "label": form.fields[fieldname].label,
+        }
+
     def get_queryset(self):
         """Perform requested search and return solr queryset"""
         # limit to documents with published status (i.e., no suppressed documents);
@@ -168,6 +190,7 @@ def get_queryset(self):
             )
             .facet_field("type", exclude="type", sort="value")
         )
+        self.applied_filter_labels = []
 
         form = self.get_form()
         # return empty queryset if not valid
@@ -233,24 +256,51 @@ def get_queryset(self):
                 typelist = literal_eval(search_opts["doctype"])
                 quoted_typelist = ['"%s"' % doctype for doctype in typelist]
                 documents = documents.filter(type__in=quoted_typelist, tag="type")
+                self.applied_filter_labels += self.get_applied_filter_labels(
+                    form, "doctype", typelist
+                )
 
             # image filter
             if search_opts["has_image"] == True:
                 documents = documents.filter(has_image=True)
+                self.applied_filter_labels.append(
+                    self.get_boolfield_label(form, "has_image")
+                )
 
             # scholarship filters
             if search_opts["has_transcription"] == True:
                 documents = documents.filter(has_digital_edition=True)
+                self.applied_filter_labels.append(
+                    self.get_boolfield_label(form, "has_transcription")
+                )
             if search_opts["has_discussion"] == True:
                 documents = documents.filter(has_discussion=True)
+                self.applied_filter_labels.append(
+                    self.get_boolfield_label(form, "has_discussion")
+                )
             if search_opts["has_translation"] == True:
                 documents = documents.filter(has_digital_translation=True)
+                self.applied_filter_labels.append(
+                    self.get_boolfield_label(form, "has_translation")
+                )
             if search_opts["docdate"]:
                 # date range filter; returns tuple of value or None for open-ended range
                 start, end = search_opts["docdate"]
                 documents = documents.filter(
                     document_date_dr="[%s TO %s]" % (start or "*", end or "*")
                 )
+                label = "%s–%s" % (start, end)
+                if start and not end:
+                    label = _("After %s") % start
+                elif end and not start:
+                    label = _("Before %s") % end
+                self.applied_filter_labels += [
+                    {
+                        "field": "docdate",
+                        "value": search_opts["docdate"],
+                        "label": label,
+                    }
+                ]
 
         self.queryset = documents
 
@@ -290,6 +340,7 @@ def get_context_data(self, **kwargs):
                 "page_type": "search",
                 "page_includes_transcriptions": True,  # preload transcription font
                 "highlighting": highlights,
+                "applied_filters": self.applied_filter_labels,
             }
         )
 
diff --git a/geniza/entities/templates/entities/person_list.html b/geniza/entities/templates/entities/person_list.html
index c188a3580..382e9cf40 100644
--- a/geniza/entities/templates/entities/person_list.html
+++ b/geniza/entities/templates/entities/person_list.html
@@ -12,14 +12,14 @@ <h1>{{ page_title }}</h1>
             <a href="#filters" role="button" id="filters-button" data-search-target="filtersButton" data-action="click->search#toggleFiltersOpen">
                 <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
                 <span>{% translate "Filters" %}</span>
-                {% if filters %}
-                    <span class="filter-count">{{ filters|length }}</span>
+                {% if applied_filters %}
+                    <span class="filter-count">{{ applied_filters|length }}</span>
                 {% endif %}
             </a>
-            {% if filters %}
+            {% if applied_filters %}
                 {# convenient unapply filter buttons; aria role set to presentation as functionality duplicated below #}
                 <div id="applied-filters" role="presentation">
-                    {% for filter in filters %}
+                    {% for filter in applied_filters %}
                         <button
                             data-field="{{ filter.field }}"
                             value="{{ filter.value }}"
@@ -66,14 +66,18 @@ <h1>{{ page_title }}</h1>
         <section id="person-list" data-action="click@document->search#clickCloseDropdown">
             <div class="header-row">
                 <h2>
+                    {# Translators: search results section header #}
+                    {% translate "Results" %}
+                </h2>
+                <span class="result-count">
                     {# Translators: number of results #}
                     {% blocktranslate with count_humanized=paginator.count|intcomma count counter=paginator.count trimmed %}
                         1 result
                     {% plural %}
                         {{ count_humanized }} results
                     {% endblocktranslate %}
-                </h2>
-                <fieldset id="sort">
+                </span>
+                <fieldset id="sort-field">
                     <label for="{{ form.sort.auto_id }}">{{ form.sort.label }}</label>
                     <details data-search-target="dropdownDetails">
                         <summary>
@@ -97,18 +101,15 @@ <h2>
                     <th class="dates">{% translate "Dates" %}</th>
                     {# Translators: Person "social role" column header on the browse page #}
                     <th>{% translate "Social role" %}</th>
-                    <th class="related">
-                        <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-documents-icon.svg' %}#related-documents" /></svg>
+                    <th class="related documents">
                         {# Translators: Person "document count" column header on the browse page #}
                         <span class="sr-only">{% translate "Number of related documents" %}</span>
                     </th>
-                    <th class="related">
-                        <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-people-icon.svg' %}#related-people" /></svg>
+                    <th class="related people">
                         {# Translators: Person "related people count" column header on the browse page #}
                         <span class="sr-only">{% translate "Number of related people" %}</span>
                     </th>
-                    <th class="related">
-                        <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-places-icon.svg' %}#related-places" /></svg>
+                    <th class="related places">
                         {# Translators: Person "related place count" column header on the browse page #}
                         <span class="sr-only">{% translate "Number of related places" %}</span>
                     </th>
@@ -160,18 +161,15 @@ <h2>
                         {# Translators: accessible label for section showing counts of entries related to an entity #}
                         <dl class="relations" aria-label="{% translate 'Related entries' %}">
                             <dt class="sr-only">{% translate "Number of related people" %}</dt>
-                            <dd>
-                                <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-people-icon.svg' %}#related-people" /></svg>
+                            <dd class="people">
                                 <span>{{ person.people }}</span>
                             </dd>
                             <dt class="sr-only">{% translate "Number of related places" %}</dt>
-                            <dd>
-                                <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-places-icon.svg' %}#related-places" /></svg>
+                            <dd class="places">
                                 <span>{{ person.places }}</span>
                             </dd>
                             <dt class="sr-only">{% translate "Number of related documents" %}</dt>
-                            <dd>
-                                <svg aria-hidden="true"><use xlink:href="{% static 'img/ui/all/all/related-documents-icon.svg' %}#related-documents" /></svg>
+                            <dd class="documents">
                                 <span>{{ person.documents }}</span>
                             </dd>
                         </dl>
diff --git a/geniza/entities/views.py b/geniza/entities/views.py
index 7621e063e..94b59ede8 100644
--- a/geniza/entities/views.py
+++ b/geniza/entities/views.py
@@ -608,7 +608,7 @@ def get_context_data(self, **kwargs):
                 "page_title": self.page_title,
                 "page_description": self.page_description,
                 "page_type": "people",
-                "filters": self.applied_filter_labels,
+                "applied_filters": self.applied_filter_labels,
             }
         )
         return context_data
diff --git a/sitemedia/img/ui/all/all/no-image-square-lg.png b/sitemedia/img/ui/all/all/no-image-square-lg.png
new file mode 100644
index 000000000..c4c973c15
Binary files /dev/null and b/sitemedia/img/ui/all/all/no-image-square-lg.png differ
diff --git a/sitemedia/img/ui/all/all/related-documents-icon.svg b/sitemedia/img/ui/all/all/related-documents-icon.svg
deleted file mode 100644
index a20bcbe09..000000000
--- a/sitemedia/img/ui/all/all/related-documents-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg id="related-documents" width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M13.023 4.78953L9.08547 0.852031C9.03319 0.799812 8.97114 0.758404 8.90285 0.730173C8.83457 0.701943 8.76139 0.687442 8.6875 0.6875H1.9375C1.63913 0.6875 1.35298 0.806027 1.142 1.017C0.931026 1.22798 0.8125 1.51413 0.8125 1.8125V14.1875C0.8125 14.4859 0.931026 14.772 1.142 14.983C1.35298 15.194 1.63913 15.3125 1.9375 15.3125H12.0625C12.3609 15.3125 12.647 15.194 12.858 14.983C13.069 14.772 13.1875 14.4859 13.1875 14.1875V5.1875C13.1876 5.11361 13.1731 5.04043 13.1448 4.97215C13.1166 4.90386 13.0752 4.84181 13.023 4.78953ZM9.25 2.60773L11.2673 4.625H9.25V2.60773ZM12.0625 14.1875H1.9375V1.8125H8.125V5.1875C8.125 5.33668 8.18426 5.47976 8.28975 5.58525C8.39524 5.69074 8.53832 5.75 8.6875 5.75H12.0625V14.1875ZM9.8125 8.5625C9.8125 8.71168 9.75324 8.85476 9.64775 8.96025C9.54226 9.06574 9.39918 9.125 9.25 9.125H4.75C4.60082 9.125 4.45774 9.06574 4.35225 8.96025C4.24676 8.85476 4.1875 8.71168 4.1875 8.5625C4.1875 8.41332 4.24676 8.27024 4.35225 8.16475C4.45774 8.05926 4.60082 8 4.75 8H9.25C9.39918 8 9.54226 8.05926 9.64775 8.16475C9.75324 8.27024 9.8125 8.41332 9.8125 8.5625ZM9.8125 10.8125C9.8125 10.9617 9.75324 11.1048 9.64775 11.2102C9.54226 11.3157 9.39918 11.375 9.25 11.375H4.75C4.60082 11.375 4.45774 11.3157 4.35225 11.2102C4.24676 11.1048 4.1875 10.9617 4.1875 10.8125C4.1875 10.6633 4.24676 10.5202 4.35225 10.4148C4.45774 10.3093 4.60082 10.25 4.75 10.25H9.25C9.39918 10.25 9.54226 10.3093 9.64775 10.4148C9.75324 10.5202 9.8125 10.6633 9.8125 10.8125Z"
-        fill="currentColor"
-    />
-</svg>
diff --git a/sitemedia/img/ui/all/all/related-people-icon.svg b/sitemedia/img/ui/all/all/related-people-icon.svg
deleted file mode 100644
index 4c909e2de..000000000
--- a/sitemedia/img/ui/all/all/related-people-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg id="related-people" width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M15.2365 13.9062C14.1657 12.0549 12.5154 10.7274 10.5896 10.0981C11.5422 9.53099 12.2823 8.66686 12.6963 7.63841C13.1103 6.60996 13.1752 5.47405 12.8811 4.40513C12.587 3.33621 11.9502 2.39338 11.0684 1.72142C10.1866 1.04947 9.10862 0.685547 7.99998 0.685547C6.89134 0.685547 5.81335 1.04947 4.93156 1.72142C4.04976 2.39338 3.41293 3.33621 3.11884 4.40513C2.82476 5.47405 2.88968 6.60996 3.30366 7.63841C3.71763 8.66686 4.45775 9.53099 5.41037 10.0981C3.48451 10.7267 1.83427 12.0542 0.763414 13.9062C0.724144 13.9702 0.698096 14.0415 0.686808 14.1158C0.67552 14.19 0.679219 14.2658 0.697689 14.3386C0.716159 14.4114 0.749024 14.4798 0.794346 14.5397C0.839668 14.5996 0.896528 14.6498 0.961572 14.6874C1.02662 14.7249 1.09853 14.7491 1.17306 14.7584C1.24759 14.7678 1.32324 14.7621 1.39554 14.7417C1.46784 14.7213 1.53532 14.6867 1.59401 14.6398C1.65269 14.5929 1.7014 14.5347 1.73724 14.4687C3.06193 12.1793 5.40334 10.8125 7.99998 10.8125C10.5966 10.8125 12.938 12.1793 14.2627 14.4687C14.2986 14.5347 14.3473 14.5929 14.4059 14.6398C14.4646 14.6867 14.5321 14.7213 14.6044 14.7417C14.6767 14.7621 14.7524 14.7678 14.8269 14.7584C14.9014 14.7491 14.9733 14.7249 15.0384 14.6874C15.1034 14.6498 15.1603 14.5996 15.2056 14.5397C15.2509 14.4798 15.2838 14.4114 15.3023 14.3386C15.3207 14.2658 15.3244 14.19 15.3131 14.1158C15.3019 14.0415 15.2758 13.9702 15.2365 13.9062ZM4.06248 5.74996C4.06248 4.9712 4.29341 4.20992 4.72607 3.5624C5.15872 2.91488 5.77368 2.4102 6.49316 2.11218C7.21264 1.81416 8.00435 1.73619 8.76815 1.88812C9.53195 2.04005 10.2335 2.41506 10.7842 2.96573C11.3349 3.5164 11.7099 4.21799 11.8618 4.98179C12.0137 5.74559 11.9358 6.53729 11.6378 7.25678C11.3397 7.97626 10.8351 8.59121 10.1875 9.02387C9.54002 9.45653 8.77874 9.68746 7.99998 9.68746C6.95603 9.68634 5.95516 9.27114 5.21698 8.53296C4.47879 7.79478 4.06359 6.79391 4.06248 5.74996Z"
-        fill="currentColor"
-    />
-</svg>
diff --git a/sitemedia/img/ui/all/all/related-places-icon.svg b/sitemedia/img/ui/all/all/related-places-icon.svg
deleted file mode 100644
index ebf063c87..000000000
--- a/sitemedia/img/ui/all/all/related-places-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg id="related-places" width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7 3.5C6.44374 3.5 5.89997 3.66495 5.43746 3.97399C4.97495 4.28303 4.61446 4.72229 4.40159 5.2362C4.18872 5.75012 4.13302 6.31562 4.24154 6.86119C4.35006 7.40676 4.61793 7.9079 5.01126 8.30124C5.4046 8.69457 5.90574 8.96244 6.45131 9.07096C6.99688 9.17948 7.56238 9.12378 8.0763 8.91091C8.59021 8.69804 9.02947 8.33755 9.33851 7.87504C9.64755 7.41253 9.8125 6.86876 9.8125 6.3125C9.8125 5.56658 9.51618 4.85121 8.98874 4.32376C8.46129 3.79632 7.74592 3.5 7 3.5ZM7 8C6.66624 8 6.33998 7.90103 6.06248 7.7156C5.78497 7.53018 5.56868 7.26663 5.44095 6.95828C5.31323 6.64993 5.27981 6.31063 5.34492 5.98328C5.41004 5.65594 5.57076 5.35526 5.80676 5.11926C6.04276 4.88326 6.34344 4.72254 6.67078 4.65742C6.99813 4.59231 7.33743 4.62573 7.64578 4.75345C7.95413 4.88118 8.21768 5.09747 8.40311 5.37498C8.58853 5.65248 8.6875 5.97874 8.6875 6.3125C8.6875 6.76005 8.50971 7.18928 8.19324 7.50574C7.87678 7.82221 7.44755 8 7 8ZM7 0.125C5.35954 0.126861 3.78681 0.779354 2.62683 1.93933C1.46685 3.09931 0.814361 4.67204 0.8125 6.3125C0.8125 8.52031 1.83273 10.8603 3.76562 13.0801C4.63414 14.0831 5.61165 14.9864 6.68008 15.773C6.77466 15.8393 6.88734 15.8748 7.00281 15.8748C7.11829 15.8748 7.23097 15.8393 7.32555 15.773C8.39201 14.986 9.36762 14.0828 10.2344 13.0801C12.1645 10.8603 13.1875 8.52031 13.1875 6.3125C13.1856 4.67204 12.5331 3.09931 11.3732 1.93933C10.2132 0.779354 8.64046 0.126861 7 0.125ZM7 14.6094C5.83773 13.6953 1.9375 10.3379 1.9375 6.3125C1.9375 4.96984 2.47087 3.68217 3.42027 2.73277C4.36967 1.78337 5.65734 1.25 7 1.25C8.34266 1.25 9.63032 1.78337 10.5797 2.73277C11.5291 3.68217 12.0625 4.96984 12.0625 6.3125C12.0625 10.3365 8.16227 13.6953 7 14.6094Z"
-        fill="currentColor"
-    />
-</svg>
diff --git a/sitemedia/img/ui/desktop/all/separator.svg b/sitemedia/img/ui/desktop/all/separator.svg
deleted file mode 100644
index ea789f8f2..000000000
--- a/sitemedia/img/ui/desktop/all/separator.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="814" height="47" viewBox="0 0 814 47" fill="inherit" xmlns="http://www.w3.org/2000/svg">
-    <g>
-        <path d="M0.25 27.5928L457.579 24.8428L813.865 18L804.844 27.5928L0.885255 27.5928L0.25 27.5928Z" fill="inherit" />
-    </g>
-</svg>
diff --git a/sitemedia/img/ui/mobile/all/separator.svg b/sitemedia/img/ui/mobile/all/separator.svg
deleted file mode 100644
index 11c73cd5f..000000000
--- a/sitemedia/img/ui/mobile/all/separator.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="300" height="6" viewBox="0 0 300 6" fill="inherit" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 5.36226L172.227 4.08764L300 0.916016L296.603 5.36226L0.239233 5.3623L0 5.36226Z" fill="inherit"/>
-</svg>
diff --git a/sitemedia/js/controllers/search_controller.js b/sitemedia/js/controllers/search_controller.js
index 10679d201..0be630aa8 100644
--- a/sitemedia/js/controllers/search_controller.js
+++ b/sitemedia/js/controllers/search_controller.js
@@ -90,14 +90,20 @@ export default class extends Controller {
         const filterValue = e.currentTarget.value;
         const searchParams = new URLSearchParams(window.location.search);
         if (searchParams.has(filterName, filterValue)) {
+            let selector = `value*="${filterValue}"`;
+            if (filterValue === "on") {
+                selector = "checked";
+            }
             const appliedFilter = this.filterModalTarget.querySelector(
-                `label[for*="${filterName}"] input[value*="${filterValue}"]`
+                `label[for*="${filterName}"] input[${selector}]`
             );
             appliedFilter.checked = false;
         } else if (
-            filterName === "date_range" &&
+            ["date_range", "docdate"].includes(filterName) &&
             (searchParams.has("date_range_0") ||
-                searchParams.has("date_range_1"))
+                searchParams.has("date_range_1") ||
+                searchParams.has("docdate_0") ||
+                searchParams.has("docdate_1"))
         ) {
             // special handling for date range filter
             const appliedFilters = this.filterModalTarget.querySelectorAll(
diff --git a/sitemedia/scss/base/_colors.scss b/sitemedia/scss/base/_colors.scss
index bd40348f6..16d6a0e69 100644
--- a/sitemedia/scss/base/_colors.scss
+++ b/sitemedia/scss/base/_colors.scss
@@ -78,7 +78,7 @@ $off-white: #f7f7f7;
     // JTS logo in image permissions
     --jts-logo: #231f20;
     // tag background color
-    --tag-bg: #e5eee5;
+    --tag-bg: rgba(86, 120, 86, 0.5);
     // selected language background color
     --selected-language: #f7f7f7;
     // alert message border/text/background colors
@@ -92,6 +92,8 @@ $off-white: #f7f7f7;
     --filter-chip-bg-active: #bdbdbd;
     // zoom control
     --zoom-control-bg: #d9d9d9;
+    // separators in search results
+    --searchresult-separator: #9e9e9e66;
 }
 
 // Dark mode theme colors
@@ -147,7 +149,7 @@ $off-white: #f7f7f7;
     --permalink-icon: #3d3d3d;
     --permalink-icon-bg: #f7f7f7;
     // placeholder text for date input
-    --date-placeholder: #ebebeb;
+    --date-placeholder: #9e9e9e;
     // toggle icons for ITT panel
     --toggle: #161616;
     --toggle-background: #f7f7f7;
@@ -155,7 +157,7 @@ $off-white: #f7f7f7;
     // JTS logo in image permissions
     --jts-logo: #f7f7f7;
     // tag background color
-    --tag-bg: rgba(195, 127, 151, 0.2);
+    --tag-bg: rgba(86, 120, 86, 0.5);
     // selected language background color
     --selected-language: #161616;
     // alert message border/text/background colors
@@ -169,6 +171,8 @@ $off-white: #f7f7f7;
     --filter-chip-bg-active: #616161;
     // zoom control
     --zoom-control-bg: #d9d9d9;
+    // separators in search results
+    --searchresult-separator: #59595966;
 }
 
 html {
diff --git a/sitemedia/scss/base/_typography.scss b/sitemedia/scss/base/_typography.scss
index d17135b78..5e31cdc63 100644
--- a/sitemedia/scss/base/_typography.scss
+++ b/sitemedia/scss/base/_typography.scss
@@ -265,6 +265,15 @@ $text-size-7xl: 2.25rem; //  = 36px
     line-height: 1.5;
 }
 
+// label for metadata in search results
+@mixin meta-label {
+    @include caption;
+    font-size: $text-size-sm;
+    @include breakpoints.for-tablet-landscape-up {
+        font-size: $text-size-md;
+    }
+}
+
 // small body text, e.g. for descriptions in search results
 @mixin body-sm {
     font-family: fonts.$primary;
@@ -328,6 +337,20 @@ $text-size-7xl: 2.25rem; //  = 36px
         line-height: calc(34 / 22);
     }
 }
+@mixin transcription-search {
+    font-family: fonts.$transcription;
+    line-height: calc(22.4 / 16);
+    font-size: $text-size-md;
+    @include breakpoints.for-tablet-landscape-up {
+        font-size: $text-size-xl;
+        line-height: calc(27 / 20);
+    }
+}
+@mixin arabic-transcription-search {
+    @include breakpoints.for-tablet-landscape-up {
+        line-height: calc(34 / 22);
+    }
+}
 @mixin transcription-numerals {
     font-family: fonts.$primary-semibold;
 }
diff --git a/sitemedia/scss/components/_pagination.scss b/sitemedia/scss/components/_pagination.scss
index 87579be04..883f9946d 100644
--- a/sitemedia/scss/components/_pagination.scss
+++ b/sitemedia/scss/components/_pagination.scss
@@ -20,14 +20,6 @@ nav.pagination {
         margin: spacing.$spacing-xl 0;
         justify-content: center;
     }
-    // special styling for pagination at bottom of page
-    &:last-of-type {
-        margin: spacing.$spacing-2xl 0 0;
-        @include breakpoints.for-tablet-landscape-up {
-            margin: spacing.$spacing-3xl 0 spacing.$spacing-xl;
-            justify-content: center;
-        }
-    }
     // spacing and style for page links, ellipsis, and disabled
     a,
     span {
diff --git a/sitemedia/scss/components/_peopleform.scss b/sitemedia/scss/components/_peopleform.scss
index 927d39c13..6620f9941 100644
--- a/sitemedia/scss/components/_peopleform.scss
+++ b/sitemedia/scss/components/_peopleform.scss
@@ -6,207 +6,11 @@
 @use "../base/breakpoints";
 @use "../base/colors";
 @use "../base/fonts";
+@use "../base/spacing";
 @use "../base/typography";
 
-main.people {
-    // Form with filters
-    form {
-        display: flex;
-        flex-flow: column;
-        width: 100%;
-        padding: 0;
-        border-top: 1px solid var(--background-gray);
-    }
-    div#filters-header {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        padding: 0.25rem 0;
-        gap: 1.5rem;
-        &:not(:has(#applied-filters)) {
-            height: 0;
-            padding: 0;
-            @include breakpoints.for-tablet-landscape-up {
-                height: auto;
-                padding: 0.25rem 0;
-            }
-        }
-        // filter chips container
-        #applied-filters {
-            display: flex;
-            flex-flow: row wrap;
-            align-items: center;
-            gap: 0.25rem 0.5rem;
-            padding: 0;
-            @include breakpoints.for-tablet-landscape-up {
-                flex: 1 1 100%;
-                padding: 0 1.5rem;
-            }
-            &::before {
-                content: "";
-                height: 1rem;
-                position: absolute;
-                margin-left: -1.5rem;
-                border-left: 1px solid colors.$gray;
-            }
-            // filter chip
-            button {
-                border: none;
-                outline: none;
-                cursor: pointer;
-                border-radius: 50px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 0.5rem;
-                height: 2rem;
-                padding: 0 1rem;
-                @include typography.form-option-xs;
-                line-height: 1.25;
-                color: var(--on-background-gray);
-                background-color: var(--background-gray);
-                transition: background-color 0.15s ease-in-out,
-                    color 0.15s ease-in-out;
-                &:hover {
-                    background-color: var(--filter-chip-bg-hover);
-                }
-                &:active {
-                    background-color: var(--filter-chip-bg-active);
-                }
-            }
-        }
-        button#clear-filters {
-            display: none;
-            @include breakpoints.for-tablet-landscape-up {
-                display: block;
-            }
-            cursor: pointer;
-            color: var(--disabled-on-background-light);
-            background-color: transparent;
-            border: none;
-            height: 2rem;
-            min-width: 4.5rem;
-            @include typography.meta;
-            transition: color 0.15s ease-in-out;
-            &:hover {
-                color: var(--date-placeholder);
-            }
-            &:active {
-                color: var(--on-background);
-            }
-        }
-    }
-    // button for opening and closing the filter panel/modal
-    a#filters-button {
-        text-decoration: none;
-        @include typography.meta-bold;
-        display: flex;
-        align-items: center;
-        min-height: 48px;
-        padding: 0 0.5rem;
-        border-radius: 5px;
-        position: absolute;
-        top: 9rem;
-        right: 1rem;
-        align-self: flex-start;
-        flex: 0 1 auto;
-        margin: auto 0;
-        @include breakpoints.for-tablet-landscape-up {
-            position: relative;
-            top: auto;
-            right: auto;
-            padding: 0 2rem 0 0.5rem;
-            span:last-of-type:after {
-                content: "\f0c2"; // phosphor caret-down icon
-            }
-            &:has(~ fieldset#filters:target),
-            &:has(~ fieldset#filters[aria-expanded="true"]) {
-                // prevent display and focus when expanded, maintain flow/spacing
-                visibility: hidden;
-            }
-        }
-        svg {
-            width: 20px;
-            height: 20px;
-        }
-        &:focus {
-            outline: 0.125rem solid var(--focus);
-        }
-        // text that reads "Filters"
-        span {
-            position: relative;
-            margin-left: 0.25rem;
-            display: flex;
-            align-items: center;
-            // caret to indicate opening and closing
-            &:last-of-type:after {
-                position: absolute;
-                font-family: "Phosphor";
-                font-size: typography.$text-size-md;
-                right: -1.5rem;
-                font-weight: 600;
-            }
-        }
-        // count of active filters
-        span.filter-count {
-            justify-content: center;
-            min-width: 1.25rem;
-            height: 1.25rem;
-            font-family: fonts.$primary;
-            font-weight: 400;
-            font-size: typography.$text-size-md;
-            background-color: var(--background-gray);
-            border-radius: 0.25rem;
-        }
-        // close button
-        &.open {
-            display: none;
-            @include breakpoints.for-tablet-landscape-up {
-                display: flex;
-                background-color: var(--secondary);
-                color: var(--on-secondary);
-                fill: var(--on-secondary);
-                span:last-of-type:after {
-                    content: "\f0c5"; // phosphor caret-up icon
-                }
-                span.filter-count {
-                    background-color: var(--primary);
-                }
-            }
-        }
-    }
-    a#close-filters-modal {
-        text-decoration: none;
-        position: absolute;
-        right: 0.25rem;
-        top: 0.25rem;
-        @include typography.icon-button-md;
-        width: 3rem;
-        height: 3rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        &::before {
-            content: "\f36d"; // phosphor X icon
-        }
-        @include breakpoints.for-tablet-landscape-up {
-            display: none;
-        }
-    }
-    // filter modal backdrop (mobile)
-    .modal-backdrop:has(~ fieldset#filters:target),
-    .modal-backdrop:has(~ fieldset#filters[aria-expanded="true"]) {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 7;
-        min-width: 100vw;
-        min-height: 100vh;
-        background-color: var(--modal-backdrop);
-        @include breakpoints.for-tablet-landscape-up {
-            display: none;
-        }
-    }
+main.people,
+main.search {
     // filters section
     fieldset#filters {
         // only display if targeted/expanded
@@ -235,8 +39,7 @@ main.people {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
                 gap: 2rem;
-                padding: 1.5rem;
-                border-top: 1px solid var(--background-gray);
+                padding: 1.5rem 0;
                 // desktop: in flow
                 overflow-y: auto;
                 top: auto;
@@ -246,8 +49,8 @@ main.people {
                 height: auto;
             }
         }
-        legend {
-            // legend should be visible on mobile, sr-only on desktop
+        & > legend {
+            // outermost legend should be visible on mobile, sr-only on desktop
             @include breakpoints.for-tablet-landscape-up {
                 @include a11y.sr-only;
             }
@@ -258,14 +61,15 @@ main.people {
             font-size: 1.5rem;
             line-height: 1.4166;
         }
-        label {
+        label,
+        fieldset legend {
             width: 100%;
             span.fieldname {
                 display: block;
                 @include typography.form-option-sm-bold;
                 font-size: typography.$text-size-lg;
                 line-height: 1.166;
-                margin-bottom: 0.75rem;
+                margin-bottom: 0.25rem;
             }
             &:not(last-of-type) {
                 border-bottom: 1px solid var(--background-gray);
@@ -341,8 +145,27 @@ main.people {
                     height: 2.25rem;
                     padding: 0 0.5rem 0 1rem;
                     background-color: var(--background-light);
+                    color: var(--on-background-light);
                     border: none;
                     @include typography.meta;
+                    &::placeholder {
+                        color: var(--date-placeholder);
+                    }
+                }
+            }
+        }
+        .includes-fields {
+            width: 100%;
+            legend {
+                border: none;
+                padding: 0;
+            }
+            ul {
+                border-bottom: 1px solid var(--background-gray);
+                padding-bottom: 1rem;
+                @include breakpoints.for-tablet-landscape-up {
+                    border: none;
+                    padding: 0;
                 }
             }
         }
@@ -352,7 +175,18 @@ main.people {
         display: flex;
         flex-flow: row;
         justify-content: space-between;
-        fieldset#sort {
+        align-items: center;
+        gap: 0.75rem;
+        padding-top: 1.5rem;
+        @include breakpoints.for-tablet-landscape-up {
+            gap: 1rem;
+        }
+        span.result-count {
+            flex-grow: 1;
+            @include typography.meta;
+            font-weight: normal;
+        }
+        fieldset#sort-field {
             display: flex;
             align-items: center;
             flex-flow: row nowrap;
@@ -363,7 +197,7 @@ main.people {
                     content: ":";
                 }
             }
-            // sort "dropdown" (actually details/summary)
+            // people sort "dropdown" (actually details/summary)
             details {
                 position: relative;
                 summary {
@@ -455,15 +289,64 @@ main.people {
                     }
                 }
             }
+            &:has(select) {
+                gap: 0.25rem;
+            }
+            select {
+                // A reset of styles, including removing the default dropdown arrow
+                // @link https://moderncss.dev/custom-select-styles-with-pure-css/
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                border: none;
+                font-family: inherit;
+                font-size: inherit;
+                border-radius: 0;
+                // Remove dropdown arrow in IE10 & IE11
+                // @link https://www.filamentgroup.com/lab/select-css.html
+                &::-ms-expand {
+                    display: none;
+                }
+                @include typography.meta;
+                position: relative;
+                cursor: pointer;
+                padding-left: 0.25rem;
+                padding-right: 2.25rem;
+                margin-right: spacing.$spacing-3xs;
+                background: transparent;
+                color: var(--on-background);
+                max-width: 33vw;
+                text-overflow: ellipsis;
+                @include breakpoints.for-tablet-landscape-up {
+                    max-width: none;
+                }
+            }
+            i.ph-caret-down {
+                @include typography.icon-button-md;
+                margin-left: -2.25rem;
+                margin-right: -0.25rem;
+                z-index: 1;
+                pointer-events: none;
+            }
         }
     }
 }
 // RTL overrides
-html[dir="rtl"] main.people {
+html[dir="rtl"] main.people,
+html[dir="rtl"] main.search {
+    div#filters-header #applied-filters::before {
+        margin-left: 0;
+        border-left: none;
+        margin-right: -1.5rem;
+        border-right: 1px solid colors.$gray;
+    }
     a#filters-button {
         padding: 0 0.5rem;
+        right: auto;
+        left: 1rem;
         @include breakpoints.for-tablet-landscape-up {
             padding: 0 0.5rem 0 2rem;
+            left: auto;
         }
         span {
             margin-left: auto;
@@ -488,15 +371,27 @@ html[dir="rtl"] main.people {
         right: auto;
         left: 0;
     }
-    div.header-row fieldset#sort details {
-        summary::after {
-            margin-right: 0.5rem;
-            margin-left: 0;
-            float: left;
+    div.header-row fieldset#sort-field {
+        details {
+            summary::after {
+                margin-right: 0.5rem;
+                margin-left: 0;
+                float: left;
+            }
+            div#sort-options {
+                right: auto;
+                left: 0;
+            }
+        }
+        select {
+            padding-right: 0.25rem;
+            padding-left: 2.25rem;
+            margin-left: spacing.$spacing-3xs;
+            margin-right: 0;
         }
-        div#sort-options {
-            right: auto;
-            left: 0;
+        i.ph-caret-down {
+            margin-right: -2.25rem;
+            margin-left: -0.25rem;
         }
     }
 }
diff --git a/sitemedia/scss/components/_results.scss b/sitemedia/scss/components/_results.scss
index 60c5b29e0..a0eac7c47 100644
--- a/sitemedia/scss/components/_results.scss
+++ b/sitemedia/scss/components/_results.scss
@@ -10,14 +10,12 @@
 
 section#document-list {
     width: 100%;
-    @include container.two-column;
     display: flex;
     flex-direction: column;
-    padding: 0 spacing.$spacing-md spacing.$spacing-md;
+    padding: 0 0 spacing.$spacing-md;
 
     // count of results
     h1 {
-        @include container.two-column;
         @include typography.caption;
         text-align: center;
         margin: spacing.$spacing-sm 0;
@@ -25,10 +23,9 @@ section#document-list {
     // list of results
     ol {
         list-style: none;
-        @include container.two-column;
-        margin-top: spacing.$spacing-2xl;
+        margin-top: spacing.$spacing-md;
         @include breakpoints.for-tablet-landscape-up {
-            margin-top: spacing.$spacing-4xl;
+            margin-top: spacing.$spacing-lg;
         }
     }
     nav.pagination + ol {
@@ -41,84 +38,91 @@ section#document-list {
 
 // single result
 .search-result {
-    @include container.two-column;
+    background-color: var(--background-light);
+    padding: spacing.$spacing-md;
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
     position: relative;
+    @include typography.body-sm;
 
     @include breakpoints.for-tablet-landscape-up {
         flex-flow: row wrap;
-        align-items: flex-start;
+        align-items: stretch;
         justify-content: flex-start;
+        padding: 1.5rem;
     }
 
     // spacing in between results
     & + .search-result {
         margin-top: spacing.$spacing-2xl;
-        // separator image (mobile)
-        &::before {
-            content: "";
-            display: block;
-            position: absolute; // needs to be absolute to prevent overflow
-            background-color: var(--link-primary);
-            left: 0;
-            margin-top: -#{spacing.$spacing-lg};
-            width: 300px;
-            height: 6px;
-            mask-image: url("/static/img/ui/mobile/all/separator.svg");
-            // separator image (desktop)
-            @include breakpoints.for-tablet-landscape-up {
-                margin-left: spacing.$spacing-2xl;
-                position: relative;
-                left: auto;
-                width: 100%;
-                height: 47px;
-                mask-image: url("/static/img/ui/desktop/all/separator.svg");
-            }
-        }
     }
 
     // result number in list
     .counter {
-        @include typography.headline-2;
-        text-align: left;
-        float: left;
-        flex: 0 1 auto;
+        display: none;
+        @include breakpoints.for-tablet-landscape-up {
+            display: none;
+            @include typography.headline-2;
+            text-align: right;
+            float: left;
+            position: absolute;
+            left: 0;
+            width: 2rem;
+        }
     }
 
+    // document titles
+    .title {
+        position: relative;
+        border-bottom: 1px solid var(--searchresult-separator);
+        flex: 1 0 90%;
+        padding-bottom: 0.75rem;
+        margin-bottom: 0.75rem;
+        font-size: typography.$text-size-lg;
+        line-height: calc(24 / 18);
+        @include breakpoints.for-tablet-landscape-up {
+            font-size: typography.$text-size-xl;
+            // TODO: figure out margin if counter numbers are staying
+            // margin-left: spacing.$spacing-md;
+            padding-bottom: spacing.$spacing-md;
+            margin-bottom: spacing.$spacing-md;
+            line-height: calc(24 / 20);
+        }
+
+        // document type, inside title
+        .doctype {
+            @include typography.doctype;
+        }
+        .shelfmark {
+            @include typography.shelfmark;
+        }
+    }
     // First row on mobile, left column on larger
     section:first-of-type {
-        margin-left: spacing.$spacing-md;
-        max-width: container.$measure;
+        max-width: none;
         display: flex;
         flex-flow: column;
         justify-content: flex-start;
         flex: 1 1 70%;
-        &.has-image {
-            @include breakpoints.for-tablet-landscape-up {
-                flex: 1 0 60%;
-                align-self: flex-start;
-                padding-right: spacing.$spacing-sm;
-            }
-        }
-        // document titles
-        .title {
-            position: relative;
-
-            // document type, inside title
-            .doctype {
-                @include typography.doctype;
-            }
-            .shelfmark {
-                @include typography.shelfmark;
-            }
+        @include breakpoints.for-tablet-landscape-up {
+            flex: 1 0 60%;
+            align-self: flex-start;
+            padding-right: spacing.$spacing-sm;
+            // TODO: figure out margin if counter numbers are staying
+            // margin-left: spacing.$spacing-md;
         }
 
         // other document metadata
         dl.metadata-list {
             grid-template-columns: auto 1fr;
-            column-gap: 1rem;
+            column-gap: spacing.$spacing-md;
+            dt {
+                @include typography.meta-label;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+            }
         }
 
         // document description, transcription, translation margins/highlighting
@@ -126,6 +130,7 @@ section#document-list {
         .transcription,
         .translation {
             margin: spacing.$spacing-md 0;
+            max-width: none;
 
             // keywords in context
             em {
@@ -141,31 +146,105 @@ section#document-list {
             }
         }
 
+        .transcription {
+            @include typography.transcription-search;
+
+            // arabic script
+            &[lang="ar"],
+            &[data-lang-script="arabic"],
+            span[lang="ar"] {
+                @include typography.arabic-transcription-search;
+            }
+        }
+
+        // related documents and entities
+        dl.related {
+            @include typography.meta;
+            border-top: 1px solid var(--searchresult-separator);
+            padding-top: 1.25rem;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            gap: spacing.$spacing-md;
+            dt {
+                display: flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                gap: 0.5rem;
+                @include typography.caption;
+                &::before {
+                    font-style: normal;
+                    @include typography.icon-button-sm;
+                }
+                &.documents::before {
+                    content: "\edf2";
+                }
+                &.people::before {
+                    content: "\f346";
+                }
+                &.places::before {
+                    content: "\f20d";
+                }
+            }
+            dd + dt {
+                border-left: 1px solid var(--disabled-on-background-light);
+                padding-left: spacing.$spacing-md;
+            }
+        }
+
+        // document tags
+        ul.tags {
+            padding-top: spacing.$spacing-md;
+            border-top: 1px solid var(--searchresult-separator);
+        }
+        dl.related ~ ul.tags {
+            border: none;
+        }
+
         // document scholarship records
         .scholarship {
             @include typography.meta;
             display: flex;
             flex-flow: row wrap;
-            & span {
-                padding-right: spacing.$spacing-md;
+            padding: 0.5rem;
+            span {
                 &:last-child {
                     padding-right: 0;
                 }
+                padding-right: spacing.$spacing-xs;
+                @include breakpoints.for-tablet-landscape-up {
+                    padding-right: spacing.$spacing-md;
+                }
+            }
+            span + span {
+                border-left: 1px solid var(--disabled-on-background-light);
+                padding-left: spacing.$spacing-xs;
+                @include breakpoints.for-tablet-landscape-up {
+                    padding-left: spacing.$spacing-md;
+                }
             }
+            border-top: 1px solid var(--searchresult-separator);
+            border-bottom: 1px solid var(--searchresult-separator);
+            margin-top: 1.25rem;
         }
+    }
 
-        // document tags
-        ul.tags {
-            margin-top: spacing.$spacing-md;
+    .right-column {
+        position: relative;
+        display: flex;
+        flex-flow: column;
+        @include breakpoints.for-tablet-landscape-up {
+            flex: 1 1 31%;
+        }
+        &:has(.no-image) {
+            align-items: flex-end;
         }
     }
-
     // document images
     ul.images {
         position: relative;
         display: flex;
         flex-flow: column;
-        margin-top: spacing.$spacing-lg;
         text-align: center;
         overflow-x: visible;
         overflow-y: clip;
@@ -202,8 +281,6 @@ section#document-list {
             }
         }
         @include breakpoints.for-tablet-landscape-up {
-            flex: 0 1 31%;
-            margin-top: spacing.$spacing-xl;
             img {
                 max-width: 100%;
                 max-height: 300px;
@@ -227,7 +304,18 @@ section#document-list {
             }
         }
     }
-
+    span.no-image {
+        width: 250px;
+        height: 250px;
+        background-image: url("/static/img/ui/all/all/no-image-square-lg.png");
+        background-size: 250px;
+        font-weight: 600;
+        font-size: typography.$text-size-6xl;
+        margin-top: spacing.$spacing-sm;
+        @include breakpoints.for-tablet-landscape-up {
+            margin-top: 0;
+        }
+    }
     /* use pseudo marker to get transcription line numbers from snippets */
     .transcription li,
     .translation li {
@@ -253,6 +341,13 @@ section#document-list {
             float: right;
         }
     }
+    .transcription[dir="ltr"] > p,
+    .translation[dir="ltr"] > p {
+        @include breakpoints.for-phone-only {
+            margin-left: 0;
+            padding-left: 0;
+        }
+    }
 
     /* set height on empty transcription/translation li to prevent overlap issue */
     .translation li:empty {
@@ -286,6 +381,33 @@ section#document-list {
         width: 100%;
         height: 100%;
     }
+    .pgp-metadata {
+        display: flex;
+        flex: 1 0 auto;
+        flex-flow: row nowrap;
+        justify-content: flex-end;
+        align-items: flex-end;
+        gap: 0.25rem;
+        dt[lang="en"]::before {
+            content: "(";
+        }
+        dt[lang="en"] + dd::after {
+            content: ")";
+        }
+    }
+    .pgp-metadata:not(:empty),
+    .pgp-metadata + .additional-metadata:not(:empty) {
+        margin-top: spacing.$spacing-md;
+    }
+    .additional-metadata {
+        text-align: right;
+        dt {
+            @include typography.meta-bold;
+            &::after {
+                content: ":";
+            }
+        }
+    }
 }
 
 // "view document details" link
@@ -293,11 +415,13 @@ a.view-link {
     display: flex;
     flex: 1 0 100%;
     width: max-content;
-    height: 1.75rem;
     margin-left: auto;
-    margin-top: spacing.$spacing-md;
     justify-content: flex-end;
     z-index: 3;
+    &:has(span:not(.sr-only)) {
+        margin-top: spacing.$spacing-md;
+        height: 1.75rem;
+    }
     & > span {
         display: flex;
         flex: 0 1 auto;
@@ -360,28 +484,41 @@ html[dir="rtl"] .search-result {
     }
     // First row on mobile, left column on larger
     section:first-of-type {
-        margin-right: spacing.$spacing-md;
+        // TODO: figure out margin if counter numbers are staying
+        // margin-right: spacing.$spacing-md;
         margin-left: 0;
-        &.has-image {
-            @include breakpoints.for-tablet-landscape-up {
-                padding-right: 0;
-                padding-left: spacing.$spacing-sm;
-            }
+        @include breakpoints.for-tablet-landscape-up {
+            padding-right: 0;
+            padding-left: spacing.$spacing-sm;
         }
         // document scholarship records
         .scholarship {
-            & span {
+            span {
                 padding-right: 0;
-                padding-left: spacing.$spacing-md;
                 &:last-child {
                     padding-left: 0;
                 }
+                padding-left: spacing.$spacing-xs;
+                @include breakpoints.for-tablet-landscape-up {
+                    padding-left: spacing.$spacing-md;
+                }
+            }
+            span + span {
+                border-left: none;
+                border-right: 1px solid var(--disabled-on-background-light);
+                padding-right: spacing.$spacing-xs;
+                @include breakpoints.for-tablet-landscape-up {
+                    padding-right: spacing.$spacing-md;
+                }
             }
         }
-        // document tags
-        ul.tags {
-            text-align: left;
-            align-self: flex-end;
+        dl.related {
+            dd + dt {
+                border-left: none;
+                padding-left: 0;
+                border-right: 1px solid var(--disabled-on-background-light);
+                padding-right: spacing.$spacing-md;
+            }
         }
     }
     // document images
@@ -438,6 +575,14 @@ html[dir="rtl"] .search-result {
     .translation[dir="ltr"] {
         align-self: flex-end;
     }
+    dt[lang="en"] {
+        line-height: calc(19.4 / 14);
+        font-size: typography.$text-size-sm;
+        @include breakpoints.for-tablet-landscape-up {
+            line-height: calc(24.3 / 18);
+            font-size: typography.$text-size-lg;
+        }
+    }
 }
 
 // Hebrew variant
diff --git a/sitemedia/scss/components/_searchform.scss b/sitemedia/scss/components/_searchform.scss
index 27c221edb..0a536fbc2 100644
--- a/sitemedia/scss/components/_searchform.scss
+++ b/sitemedia/scss/components/_searchform.scss
@@ -6,496 +6,273 @@
 @use "../base/breakpoints";
 @use "../base/colors";
 @use "../base/container";
+@use "../base/fonts";
 @use "../base/spacing";
 @use "../base/typography";
 
-/*
- * Mixin to add a box-shadow given a color.
- * @param {color} $color - The color variable
-*/
-@mixin box-shadow($color) {
-    box-shadow: 0px 2px 4px $color;
-}
-
-/*
- * Mixin for form button colors in all four states:
- * default, focus, hover, active.
- */
-@mixin form-button-colors {
-    color: var(--secondary);
-    background-color: var(--background-light);
-    @include box-shadow(var(--on-background-25));
-    &:focus {
-        outline: none;
-        @include box-shadow(var(--secondary-80));
-    }
-    &:hover {
-        box-shadow: none;
-        color: var(--on-secondary);
-        background-color: var(--secondary);
-    }
-    &:active {
-        box-shadow: none;
-        color: var(--on-primary);
-        background-color: var(--primary);
-    }
-    transition: background-color 0.15s ease-in-out, color 0.15s ease,
-        box-shadow 0.15s ease;
-}
-
-/*
- * Mixin for form drop shadow in three states:
- * default, focus, active.
- */
-@mixin form-drop-shadow($with-default: "true") {
-    transition: box-shadow 0.15s ease;
-    @include box-shadow(var(--on-background-25));
-    &:focus,
-    &:focus-within {
-        outline: none;
-        @include box-shadow(var(--secondary-80));
-    }
-    &:active {
-        @include box-shadow(var(--primary-80));
-    }
-}
-
 // search form
 main.search form {
-    // apply to all fieldsets
-    fieldset {
-        @include container.two-column;
-        max-width: 100%;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        justify-content: flex-start;
-    }
     // search query box and button
     fieldset#query {
-        order: 1;
+        display: flex;
+        margin-bottom: 1.5rem;
         // search box
         input[type="search"] {
-            max-width: calc(100% - 2.75rem - #{spacing.$spacing-sm});
-            flex: 1 1 auto;
+            flex-basis: 100%;
             border: none;
-            margin-right: spacing.$spacing-sm;
-            height: 2.5rem;
-            padding: 0 0 0 spacing.$spacing-sm;
-            @include typography.form-option;
+            border-radius: 5px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            height: 3rem;
+            padding: 0 1rem;
+            @include typography.body;
             background-color: var(--background-light);
             color: var(--on-background-light);
-            @include form-drop-shadow;
-            &::placeholder {
-                color: var(--on-background);
-            }
-            &:hover::placeholder,
-            &:active::placeholder {
-                color: var(--on-background-light-alt);
+            @include breakpoints.for-tablet-landscape-up {
+                height: 2.5rem;
             }
         }
         button[type="submit"] {
-            position: relative;
-            flex: 0 1 2.5rem;
-            width: auto;
-            height: 2.5rem;
-            border-radius: 0;
+            cursor: pointer;
+            width: 3rem;
+            height: 3rem;
+            border-radius: 5px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             border: none;
             margin-left: 0; // Needed to prevent wrapping on mobile
-            @include form-button-colors;
+            background-color: var(--secondary);
+            color: var(--on-secondary);
             @include breakpoints.for-tablet-landscape-up {
-                flex-basis: 3rem;
                 height: 2.5rem;
+                width: 2.5rem;
             }
             // Magnifying glass icon
             &::after {
                 content: "\f5e6"; // phosphor magnifying glass bold icon
-                @include typography.icon-button-sm;
+                @include typography.icon-button-md;
                 @include breakpoints.for-tablet-landscape-up {
-                    content: "\f20a"; // phosphor magnifying glass icon
-                    @include typography.icon-button-md;
+                    @include typography.icon-button-sm;
                 }
             }
         }
     }
-
-    // sort field and label
-    fieldset#sort-fieldset {
-        order: 4;
-        display: flex;
-        select {
-            // A reset of styles, including removing the default dropdown arrow
-            // @link https://moderncss.dev/custom-select-styles-with-pure-css/
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            border: none;
-            font-family: inherit;
-            font-size: inherit;
-            border-radius: 0;
-            // Remove dropdown arrow in IE10 & IE11
-            // @link https://www.filamentgroup.com/lab/select-css.html
-            &::-ms-expand {
-                display: none;
-            }
-
-            @include typography.form-option-sm;
-            @include form-drop-shadow;
-            position: relative;
-            flex: 1 1 auto;
-            min-height: 2.5rem;
-            max-width: 100%;
-            @include breakpoints.for-tablet-landscape-up {
-                min-width: auto;
-                max-width: 23rem;
-            }
-            margin-top: spacing.$spacing-sm;
-            cursor: pointer;
-            background-color: var(--background-light);
-            color: var(--on-background-light);
-            padding: 0.55rem 0.75rem;
-            margin-right: spacing.$spacing-3xs;
-        }
-        i.ph-caret-down {
-            @include typography.icon-button-md;
-            margin-left: -37px;
-            margin-top: 8px;
-            z-index: 1;
-            pointer-events: none;
-        }
-        // Focus styles using box-shadow
-        &:focus select,
-        &:focus-within select {
-            @include box-shadow(var(--secondary-80));
-        }
-        label[for="sort"] {
-            max-width: 100%;
-            flex: 1 0 100%;
-            margin-top: spacing.$spacing-lg;
-            @include typography.form-option;
+    // error messages
+    ul#search-errors {
+        margin-top: spacing.$spacing-md;
+        color: red;
+        li {
+            @include typography.meta;
         }
     }
+}
 
-    // buttons for opening and closing the filter modal
-    a#filters-button,
-    a#close-filters-button {
-        margin: spacing.$spacing-md 0 spacing.$spacing-lg;
-        text-decoration: none;
-        @include typography.body-bold;
+main.search,
+main.people {
+    // Form with filters
+    form {
         display: flex;
-        align-items: center;
-        svg {
-            fill: var(--logo);
-            color: var(--logo);
-            width: 26px;
-            height: 26px;
-            margin-right: spacing.$spacing-2xs;
-        }
-        &.active svg {
-            color: var(--filter-active);
-        }
-        &:focus {
-            outline: 0.125rem solid var(--focus);
-        }
-    }
-    a#filters-button {
-        align-self: flex-start;
-        order: 2;
-        margin: spacing.$spacing-xl 0 spacing.$spacing-sm;
-    }
-
-    // filter modal
-    fieldset#filters {
-        background-color: var(--background);
-        max-width: none;
-        z-index: 8;
-        position: fixed;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        display: none;
-        overflow-y: scroll;
-        padding: 0;
         flex-flow: column;
-        pointer-events: all;
-        align-items: flex-start;
-        // expand form on desktop
-        @include breakpoints.for-tablet-landscape-up {
-            order: 3;
-            position: relative;
-            width: 900px;
-            max-width: container.$two-column;
-            overflow-y: auto;
-            padding: spacing.$spacing-sm 1.275rem spacing.$spacing-sm
-                spacing.$spacing-sm;
-            margin: -4.2rem 0 0 -#{spacing.$spacing-sm};
-            height: auto;
-        }
-        // show when targeted
-        &:target,
-        &[aria-expanded="true"] {
-            display: flex;
+        width: 100%;
+        padding: 0;
+    }
+    div#filters-header {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        padding: 0.25rem 0;
+        gap: 1.5rem;
+        &:has(#applied-filters) {
+            border-top: 1px solid var(--background-gray);
+            border-bottom: 1px solid var(--background-gray);
         }
-        // close button
-        a#close-filters-modal {
-            text-decoration: none;
-            margin-top: -#{spacing.$spacing-xs};
-            @include typography.icon-button-xl;
-            &::before {
-                content: "\f36d"; // phosphor X icon
-            }
+        &:not(:has(#applied-filters)) {
+            height: 0;
+            padding: 0;
             @include breakpoints.for-tablet-landscape-up {
-                display: none;
+                height: auto;
+                padding: 0.25rem 0;
+                border-top: 1px solid var(--background-gray);
+                border-bottom: 1px solid var(--background-gray);
             }
         }
-        // all filter form inputs that are not nested within a details
-        & > label:not(.date-range-label) {
-            flex: 0 0 2.5rem;
-            max-width: 100%;
-            width: 100%;
+        // filter chips container
+        #applied-filters {
             display: flex;
-            flex-flow: row nowrap;
+            flex-flow: row wrap;
             align-items: center;
-            justify-content: flex-start;
-            cursor: pointer;
-            @include typography.form-option;
-            background-color: var(--background-light);
-            color: var(--on-background-light);
-            @include box-shadow(var(--on-background-25));
-            padding: 0 spacing.$spacing-sm;
+            gap: 0.25rem 0.5rem;
+            padding: 0;
             @include breakpoints.for-tablet-landscape-up {
-                padding: 0 spacing.$spacing-md;
-            }
-            border-top: 1px solid transparent;
-            border-bottom: 1px solid var(--filter-border);
-            &:focus-within,
-            &:active {
-                border: none;
-                outline: 2px solid var(--link-primary);
-                z-index: 3;
-            }
-            input[type="checkbox"] {
-                @include a11y.sr-only;
+                flex: 1 1 100%;
+                padding: 0 1.5rem;
             }
-            span.label {
-                white-space: nowrap;
+            &::before {
+                content: "";
+                height: 1rem;
+                position: absolute;
+                margin-left: -1.5rem;
+                border-left: 1px solid colors.$gray;
             }
-            span.count {
-                flex: 1 1 100%;
-                max-width: none;
+            // filter chip
+            button {
+                border: none;
+                outline: none;
+                cursor: pointer;
+                border-radius: 50px;
                 display: flex;
-                justify-content: space-between;
                 align-items: center;
-                padding-left: 1rem;
-                @include typography.meta;
+                justify-content: center;
+                gap: 0.5rem;
+                height: 2rem;
+                padding: 0 1rem;
+                @include typography.form-option-xs;
+                line-height: 1.25;
+                color: var(--on-background-gray);
+                background-color: var(--background-gray);
+                transition: background-color 0.15s ease-in-out,
+                    color 0.15s ease-in-out;
+                &:hover {
+                    background-color: var(--filter-chip-bg-hover);
+                }
+                &:active {
+                    background-color: var(--filter-chip-bg-active);
+                }
             }
-            span.count::after {
+        }
+        button#clear-filters {
+            display: none;
+            @include breakpoints.for-tablet-landscape-up {
                 display: block;
-                content: "\f0e8"; // phosphor check-circle icon
-                @include typography.icon-button-md;
-                transition: transform 0.75s ease;
-                float: right;
-                color: var(--secondary);
             }
-            input:active + span + span.count::after,
-            input:checked + span + span.count::after {
-                content: "\f851"; // phosphor check-circle-fill icon
+            cursor: pointer;
+            color: var(--disabled-on-background-light);
+            background-color: transparent;
+            border: none;
+            height: 2rem;
+            min-width: 4.5rem;
+            @include typography.meta;
+            transition: color 0.15s ease-in-out;
+            &:hover {
+                color: var(--date-placeholder);
             }
-            input:checked:active + span + span.count::after {
-                content: "\f0e8"; // phosphor check-circle icon
+            &:active {
+                color: var(--on-background);
             }
         }
-        // Date range label and input
-        & > label.date-range-label {
-            max-width: 100%;
-            width: 100%;
-            cursor: default;
-            span {
-                margin: 0 spacing.$spacing-sm;
-                @include breakpoints.for-tablet-landscape-up {
-                    margin: 0;
-                }
+    }
+    // button for opening and closing the filter panel/modal
+    a#filters-button {
+        text-decoration: none;
+        @include typography.meta-bold;
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+        padding: 0 0.5rem;
+        border-radius: 5px;
+        position: absolute;
+        top: 9rem;
+        right: 1rem;
+        align-self: flex-start;
+        flex: 0 1 auto;
+        margin: auto 0;
+        @include breakpoints.for-tablet-landscape-up {
+            position: relative;
+            top: auto;
+            right: auto;
+            padding: 0 2rem 0 0.5rem;
+            span:last-of-type:after {
+                content: "\f0c2"; // phosphor caret-down icon
             }
-            div.inputs {
-                display: flex;
-                flex-flow: row wrap;
-                margin-top: spacing.$spacing-xs;
-                label {
-                    flex: 1 0 33%;
-                    display: flex;
-                    align-items: center;
-                    padding: 0 spacing.$spacing-sm;
-                    @include breakpoints.for-tablet-landscape-up {
-                        padding: 0 spacing.$spacing-md;
-                        flex: 1 0 14%;
-                    }
-                }
-                input + span {
-                    // TODO: when redesigned, make this span visible
-                    @include a11y.sr-only;
-                }
-                input[type="number"] {
-                    flex: 1 0 66%;
-                    height: 2.9375rem;
-                    max-width: 100%;
-                    width: 100%;
-                    @include typography.form-option;
-                    background-color: var(--background-light);
-                    color: var(--on-background-light);
-                    @include form-drop-shadow;
-                    border-left: none;
-                    border-right: none;
-                    border-top: 1px solid transparent;
-                    border-bottom: 1px solid var(--filter-border);
-                    padding: 0 spacing.$spacing-sm;
-                    @include breakpoints.for-tablet-landscape-up {
-                        flex: 1 0 86%;
-                        padding: 0 spacing.$spacing-md;
-                    }
-                    &::placeholder {
-                        color: var(--date-placeholder);
-                    }
-                    &:focus-within,
-                    &:active {
-                        z-index: 3;
-                    }
-                }
+            &:has(~ fieldset#filters:target),
+            &:has(~ fieldset#filters[aria-expanded="true"]) {
+                // prevent display and focus when expanded, maintain flow/spacing
+                visibility: hidden;
             }
-            margin-bottom: 0.75rem;
         }
-        // document type filter
-        details.doctype-filter {
-            flex: 0 1 2.9375rem;
-            max-width: 100%;
-            width: 100%;
-            @include typography.form-option;
-            background-color: var(--background-light);
-            color: var(--on-background-light);
-            @include box-shadow(var(--on-background-25));
-            transition: box-shadow 0.15s ease;
-            // Label for document type filter
-            summary {
-                border-top: 1px solid transparent;
-                display: flex;
-                flex-flow: row nowrap;
-                align-items: center;
-                justify-content: space-between;
-                height: 2.9375rem;
-                max-width: 100%;
-                padding: 0 spacing.$spacing-sm;
-                @include breakpoints.for-tablet-landscape-up {
-                    padding: 0 spacing.$spacing-md;
-                }
-                list-style-type: none;
-                cursor: pointer;
-                // Suppress default details marker
-                &::-webkit-details-marker {
-                    display: none;
-                }
-                &::after {
-                    content: "\f0c2"; // phosphor caret-down icon
-                    @include typography.icon-button-md;
-                    transition: transform 0.75s ease;
-                    float: right;
-                }
-                transition: box-shadow 0.15s ease;
-                &:focus {
-                    outline: none;
-                    @include box-shadow(var(--secondary-80));
-                }
-            }
-            &[open] summary {
-                @include box-shadow(var(--on-background-125));
-                // Expanded details marker
-                &::after {
-                    transform: rotate(-180deg);
-                }
-                &:focus {
-                    outline: none;
-                    @include box-shadow(var(--secondary-80));
-                }
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+        &:focus {
+            outline: 0.125rem solid var(--focus);
+        }
+        // text that reads "Filters"
+        span {
+            position: relative;
+            margin-left: 0.25rem;
+            display: flex;
+            align-items: center;
+            // caret to indicate opening and closing
+            &:last-of-type:after {
+                position: absolute;
+                font-family: "Phosphor";
+                font-size: typography.$text-size-md;
+                right: -1.5rem;
+                font-weight: 600;
             }
-            &[open] {
-                @include box-shadow(var(--secondary-80));
-                summary {
-                    @include box-shadow(var(--secondary-80));
+        }
+        // count of active filters
+        span.filter-count {
+            justify-content: center;
+            min-width: 1.25rem;
+            height: 1.25rem;
+            font-family: fonts.$primary;
+            font-weight: 400;
+            font-size: typography.$text-size-md;
+            background-color: var(--background-gray);
+            border-radius: 0.25rem;
+        }
+        // close button
+        &.open {
+            display: none;
+            @include breakpoints.for-tablet-landscape-up {
+                display: flex;
+                background-color: var(--secondary);
+                color: var(--on-secondary);
+                fill: var(--on-secondary);
+                span:last-of-type:after {
+                    content: "\f0c5"; // phosphor caret-up icon
                 }
-            }
-
-            // List of filter options
-            ul#id_doctype {
-                max-width: 100%;
-                list-style-type: none;
-                padding: 0.25rem 0 0;
-                li {
-                    max-width: 100%;
-                    label {
-                        max-width: 100%;
-                        display: flex;
-                        span {
-                            display: flex;
-                            align-items: center;
-                            max-width: 100%;
-                            flex: 1 0 auto;
-                            padding: 0 spacing.$spacing-md;
-                            height: 2.25rem;
-                            @include breakpoints.for-tablet-landscape-up {
-                                height: 2.5rem;
-                            }
-                            transition: background-color 0.15s ease,
-                                color 0.15s ease;
-                        }
-                        .count {
-                            @include typography.filter-count;
-                            flex: 0 1 auto;
-                            margin-left: auto;
-                            padding: 0 spacing.$spacing-md;
-                            height: auto;
-                        }
-                        &:hover span,
-                        &:focus-within span {
-                            background-color: var(--background-gray);
-                            color: var(--on-background-gray);
-                        }
-                        &:hover input[type="checkbox"]:checked + span,
-                        &:hover input[type="checkbox"]:checked + span + .count,
-                        input[type="checkbox"]:checked:focus + span,
-                        input[type="checkbox"]:checked:focus + span + .count {
-                            background-color: var(--secondary);
-                            color: var(--on-secondary);
-                        }
-                        input[type="checkbox"] {
-                            @include a11y.sr-only;
-                            &:checked + span,
-                            &:checked + span + .count {
-                                background-color: var(--tertiary);
-                                color: var(--on-tertiary);
-                            }
-                        }
-                    }
+                span.filter-count {
+                    background-color: var(--primary);
                 }
             }
         }
-        // "apply" button
-        button.primary {
-            margin: spacing.$spacing-2xl 0 spacing.$spacing-md;
-            align-self: center;
-            @include breakpoints.for-tablet-landscape-up {
-                display: none;
-            }
+    }
+    a#close-filters-modal {
+        text-decoration: none;
+        position: absolute;
+        right: 0.25rem;
+        top: 0.25rem;
+        @include typography.icon-button-md;
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &::before {
+            content: "\f36d"; // phosphor X icon
+        }
+        @include breakpoints.for-tablet-landscape-up {
+            display: none;
         }
     }
-    // error messages
-    ul#search-errors {
-        margin-top: spacing.$spacing-md;
-        color: red;
-        li {
-            @include typography.meta;
+    // filter modal backdrop (mobile)
+    .modal-backdrop:has(~ fieldset#filters:target),
+    .modal-backdrop:has(~ fieldset#filters[aria-expanded="true"]) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 7;
+        min-width: 100vw;
+        min-height: 100vh;
+        background-color: var(--modal-backdrop);
+        @include breakpoints.for-tablet-landscape-up {
+            display: none;
         }
     }
 }
@@ -506,70 +283,16 @@ html[dir="rtl"] main.search form {
     fieldset#query {
         // search box
         input[type="search"] {
-            margin-right: 0;
-            margin-left: spacing.$spacing-sm;
-            text-align: right;
+            border-radius: 5px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
         }
         button[type="submit"] {
-            margin-right: 0; // Needed to prevent wrapping on mobile
-        }
-    }
-    // sort field and label
-    fieldset#sort-fieldset {
-        // sort options select (uses details/summary)
-        details.sort-select {
-            summary span {
-                margin-right: 0;
-                margin-left: spacing.$spacing-sm;
-            }
-        }
-    }
-
-    // buttons for opening and closing the filter modal
-    a#filters-button,
-    a#close-filters-button {
-        svg {
+            border-radius: 5px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-left: 0;
             margin-right: 0;
-            margin-left: spacing.$spacing-2xs;
-        }
-    }
-
-    // filter modal
-    fieldset#filters {
-        left: auto;
-        right: 0;
-        // expand form on desktop
-        @include breakpoints.for-tablet-landscape-up {
-            padding: spacing.$spacing-sm spacing.$spacing-sm spacing.$spacing-sm
-                1.275rem;
-            margin: -4.2rem -#{spacing.$spacing-sm} 0 0;
-        }
-        // all filter form inputs that are not nested within a details
-        & > label {
-            span.count {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
-            span.count::after {
-                float: left;
-            }
-        }
-        // document type filter
-        details.doctype-filter {
-            // Label for document type filter
-            summary {
-                &::after {
-                    float: left;
-                }
-            }
-        }
-    }
-
-    // sort field and label
-    fieldset#sort-fieldset {
-        i.ph-caret-down {
-            margin-left: auto;
-            margin-right: -35px;
         }
     }
 }
diff --git a/sitemedia/scss/components/_tag.scss b/sitemedia/scss/components/_tag.scss
index 034ca2dc1..47f4c5088 100644
--- a/sitemedia/scss/components/_tag.scss
+++ b/sitemedia/scss/components/_tag.scss
@@ -2,6 +2,7 @@
 // Visual labels for concepts, themes & other document metadata.
 // -----------------------------------------------------------------------------
 
+@use "../base/breakpoints";
 @use "../base/typography";
 
 .tags {
@@ -10,17 +11,22 @@
 .tags li {
     display: inline-block;
     a {
-        @include typography.meta;
+        font-size: typography.$text-size-sm;
+        @include breakpoints.for-tablet-landscape-up {
+            font-size: typography.$text-size-md;
+        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
         text-transform: lowercase;
-        display: inline-block;
+        border-radius: 5px;
         background-color: var(--tag-bg);
-        color: var(--on-background-light-alt);
-        padding: 2px 9px 3px;
-        min-width: 39px; // 48px - 9px padding
-        &::before {
-            content: "#";
-        }
+        color: var(--on-background-light);
+        padding: 0 14px;
+        min-width: 34px; // 48px - 14px for mobile touch target
+        min-height: 28px;
         text-decoration: none;
+        line-height: 1;
     }
     // spacing between tags
     margin-right: 6px;
@@ -47,14 +53,4 @@ html[dir="rtl"] .tags li {
     &:first-of-type {
         margin-right: 0;
     }
-    a::before {
-        content: "";
-    }
-    a::after {
-        display: inline-block;
-        content: "#";
-    }
-    &.more::after {
-        content: "";
-    }
 }
diff --git a/sitemedia/scss/components/_transcription.scss b/sitemedia/scss/components/_transcription.scss
index e2a4c95f9..c64f05b35 100644
--- a/sitemedia/scss/components/_transcription.scss
+++ b/sitemedia/scss/components/_transcription.scss
@@ -7,6 +7,31 @@
 @use "../base/typography";
 @use "../components/searchform";
 
+/*
+ * Mixin to add a box-shadow given a color.
+ * @param {color} $color - The color variable
+*/
+@mixin box-shadow($color) {
+    box-shadow: 0px 2px 4px $color;
+}
+
+/*
+ * Mixin for form drop shadow in three states:
+ * default, focus, active.
+ */
+@mixin form-drop-shadow($with-default: "true") {
+    transition: box-shadow 0.15s ease;
+    @include box-shadow(var(--on-background-25));
+    &:focus,
+    &:focus-within {
+        outline: none;
+        @include box-shadow(var(--secondary-80));
+    }
+    &:active {
+        @include box-shadow(var(--primary-80));
+    }
+}
+
 #itt-panel {
     * {
         max-width: 100vw;
@@ -166,7 +191,7 @@
             z-index: 20;
             width: calc(100% - 0.667rem);
             padding: spacing.$spacing-sm 0;
-            @include searchform.form-drop-shadow;
+            @include form-drop-shadow;
             background-color: var(--background);
             // label for single transcription option
             li {
diff --git a/sitemedia/scss/pages/_people.scss b/sitemedia/scss/pages/_people.scss
index a67eafb1f..6f072909e 100644
--- a/sitemedia/scss/pages/_people.scss
+++ b/sitemedia/scss/pages/_people.scss
@@ -11,32 +11,10 @@
 
 // TODO: standardize typography here once all redesigns are implemented
 
-main.people * {
-    max-width: none;
-    @include breakpoints.for-tablet-landscape-up {
-        max-width: 56rem; // = 896px
-    }
-}
 main.people {
-    padding: 0 1rem;
-    @include breakpoints.for-tablet-landscape-up {
-        padding: 0;
-    }
-    // Header
-    h1 {
-        width: 100%;
-        font-family: fonts.$primary;
-        font-size: typography.$text-size-5xl;
-        @include breakpoints.for-tablet-landscape-up {
-            font-size: typography.$text-size-7xl;
-        }
-        margin-bottom: 1rem;
-    }
     // Primary container
     section#person-list {
         width: 100%;
-        padding-top: 1.5rem;
-        border-top: 1px solid var(--background-gray);
         h2 {
             @include breakpoints.for-tablet-landscape-up {
                 font-size: typography.$text-size-2xl;
@@ -66,10 +44,17 @@ main.people {
             th.related {
                 text-align: center;
                 min-width: 2rem;
-                svg {
-                    width: 15px;
-                    height: 16px;
-                    vertical-align: middle;
+                &::before {
+                    @include typography.icon-button-sm;
+                }
+                &.documents::before {
+                    content: "\edf2";
+                }
+                &.people::before {
+                    content: "\f346";
+                }
+                &.places::before {
+                    content: "\f20d";
                 }
                 &:last-of-type {
                     min-width: 3rem;
@@ -159,11 +144,6 @@ main.people {
                         align-items: center;
                         justify-content: center;
                         gap: 0.5rem;
-                        svg {
-                            width: 15px;
-                            height: 16px;
-                            vertical-align: middle;
-                        }
                         &:not(:first-of-type) {
                             border-left: 1px solid colors.$gray;
                         }
@@ -172,6 +152,21 @@ main.people {
             }
         }
     }
+    th.related,
+    dl.relations dd {
+        &::before {
+            @include typography.icon-button-sm;
+        }
+        &.documents::before {
+            content: "\edf2";
+        }
+        &.people::before {
+            content: "\f346";
+        }
+        &.places::before {
+            content: "\f20d";
+        }
+    }
     .pagination-container {
         display: flex;
         flex-flow: row;
diff --git a/sitemedia/scss/pages/_related.scss b/sitemedia/scss/pages/_related.scss
index bc0ac0c1b..2e175eab3 100644
--- a/sitemedia/scss/pages/_related.scss
+++ b/sitemedia/scss/pages/_related.scss
@@ -86,7 +86,7 @@ main.place table.related-documents {
     td {
         display: flex;
         flex-flow: column;
-        line-height: (24 / 14);
+        line-height: calc(24 / 14);
         @include breakpoints.for-tablet-landscape-up {
             padding-right: 1.5rem;
             flex-flow: row;
@@ -126,18 +126,11 @@ main.place table.related-documents {
             }
             // placeholder for no image: text on image
             .no-image {
-                box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                text-align: center;
-                background-image: url("/static/img/ui/all/all/no-image-square.png");
-                font-family: fonts.$primary-bold;
-                font-weight: 700;
-                color: var(--on-background-light-alt);
                 font-size: 0.75rem;
                 padding: 0 0.5rem;
                 line-height: 0.875rem;
+                font-family: fonts.$primary-bold;
+                font-weight: 700;
             }
         }
     }
@@ -250,6 +243,16 @@ main.place section.relations {
     }
 }
 
+span.no-image {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-image: url("/static/img/ui/all/all/no-image-square.png");
+    color: var(--on-background-light-alt);
+}
+
 // RTL overrides
 html[dir="rtl"] main.person table.related-documents,
 html[dir="rtl"] main.place table.related-documents {
diff --git a/sitemedia/scss/pages/_search.scss b/sitemedia/scss/pages/_search.scss
index 7361b8ba0..b9ec4a175 100644
--- a/sitemedia/scss/pages/_search.scss
+++ b/sitemedia/scss/pages/_search.scss
@@ -1,22 +1,34 @@
 // -----------------------------------------------------------------------------
-// Document search page.
+// Document search, people list pages.
 // -----------------------------------------------------------------------------
 
 @use "../base/breakpoints";
 @use "../base/container";
+@use "../base/fonts";
 @use "../base/spacing";
+@use "../base/typography";
 
-main.search {
-    // Overall page layout
-    form {
-        @include container.two-column;
-        display: flex;
-        flex-direction: column;
-        padding: spacing.$spacing-md;
-        margin-top: spacing.$spacing-lg;
+main.search *,
+main.people * {
+    max-width: none;
+    @include breakpoints.for-tablet-landscape-up {
+        max-width: 56rem; // = 896px
+    }
+}
+main.search,
+main.people {
+    padding: 0 1rem;
+    @include breakpoints.for-tablet-landscape-up {
+        padding: 0;
+    }
+    // Header
+    & > h1 {
         width: 100%;
+        font-family: fonts.$primary;
+        font-size: typography.$text-size-5xl;
         @include breakpoints.for-tablet-landscape-up {
-            margin-top: spacing.$spacing-2xl;
+            font-size: typography.$text-size-7xl;
         }
+        margin-bottom: 1rem;
     }
 }