diff --git a/resources/css/investment-catalogue.css b/resources/css/investment-catalogue.css
index 38de9add..95266212 100644
--- a/resources/css/investment-catalogue.css
+++ b/resources/css/investment-catalogue.css
@@ -54,9 +54,26 @@
 .catalogue-filters-heading {
     display: none;
 }
-#catalogue-filter-fields {
+#catalogue-filter-fields,
+.catalogue-service-fields {
     padding: 0 1.15rem 1.15rem;
 }
+
+.catalogue-service-fields label {
+    min-width: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+.catalogue-service-fields label input:not([type='checkbox']),
+.catalogue-service-fields label select {
+    margin-top: 0.35rem;
+    font-weight: 400;
+}
+.catalogue-service-fields .catalogue-filter-submit > button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
 .catalogue-filters input:not([type='checkbox']),
 .catalogue-filters select {
     min-height: 44px;
diff --git a/resources/js/pages/portal/services.tsx b/resources/js/pages/portal/services.tsx
index 452d2e9f..56eec953 100644
--- a/resources/js/pages/portal/services.tsx
+++ b/resources/js/pages/portal/services.tsx
@@ -6,7 +6,9 @@ import {
     type PublicDocument,
 } from '@/components/public-document-content';
 import { Head, Link, useForm, usePage } from '@inertiajs/react';
-import { useState } from 'react';
+import { useId, useState, type FormEvent, type ReactNode } from 'react';
+import { ChevronDown, Search, SlidersHorizontal } from 'lucide-react';
+import '../../../css/investment-catalogue.css';
 import { PortalMenu } from '@/components/portal-menu';
 import { newSubmissionKey } from '@/lib/portal-api';
 import { ProvinceSelect } from '@/components/investment-territory';
@@ -125,6 +127,68 @@ const states: Record<string, string> = {
     published: 'Publicado',
     withdrawn: 'Retirado',
 };
+function ServiceFilters({
+    children,
+    onSubmit,
+    clearUrl,
+    onClear,
+    activeCount,
+}: {
+    children: ReactNode;
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    clearUrl: string;
+    onClear: () => void;
+    activeCount: number;
+}) {
+    const [expanded, setExpanded] = useState(true);
+    const fieldsId = useId();
+    return (
+        <form
+            className="catalogue-filters"
+            onSubmit={onSubmit}
+            aria-label="Filtros de pesquisa"
+        >
+            <button
+                type="button"
+                className="catalogue-filters-toggle"
+                aria-expanded={expanded}
+                aria-controls={fieldsId}
+                onClick={() => setExpanded(!expanded)}
+            >
+                <SlidersHorizontal size={18} aria-hidden="true" />
+                <span>Filtros</span>
+                {activeCount > 0 && (
+                    <span className="catalogue-count">{activeCount}</span>
+                )}
+                <ChevronDown size={18} aria-hidden="true" />
+            </button>
+            <h2 className="catalogue-filters-heading">
+                <SlidersHorizontal size={17} aria-hidden="true" /> Filtros
+            </h2>
+            <div
+                id={fieldsId}
+                className={`${expanded ? 'block' : 'hidden'} catalogue-service-fields lg:block`}
+            >
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+                    {children}
+                </div>
+                <div className="catalogue-filter-submit mt-5 grid gap-3">
+                    <button className={button}>
+                        <Search size={16} aria-hidden="true" /> Pesquisar
+                    </button>
+                    <Link
+                        className="rounded border px-4 py-2 text-center text-sm underline"
+                        href={clearUrl}
+                        onClick={onClear}
+                    >
+                        Limpar filtros
+                    </Link>
+                </div>
+            </div>
+        </form>
+    );
+}
+
 function Pagination({ page }: { page: Page<unknown> }) {
     return (
         <nav aria-label="Paginação" className="flex gap-6 py-5">
@@ -469,6 +533,35 @@ export default function Services(p: Props) {
         stage: Array.isArray(p.filters?.stage) ? p.filters.stage : [],
         module: Array.isArray(p.filters?.module) ? p.filters.module : [],
     });
+    const activeCount = Object.values(filter.data).reduce<number>(
+        (count, value) =>
+            count + (Array.isArray(value) ? value.length : value ? 1 : 0),
+        0,
+    );
+    const clearFilters = () =>
+        filter.setData((data) => ({
+            ...data,
+            q: '',
+            category: '',
+            topic: '',
+            sector: '',
+            province: '',
+            document_type: '',
+            language: '',
+            issuer: '',
+            legal_status: '',
+            source_confirmation: '',
+            territory_id: '',
+            activity: [],
+            stage: [],
+            module: [],
+        }));
+    // Keep a previously selected criterion visible if its option is no longer
+    // returned by the public catalogue, so it can still be removed.
+    const optionsWithSelection = (
+        options: string[] | undefined,
+        selected: string[],
+    ) => [...new Set([...(options ?? []), ...selected.filter(Boolean)])];
     const [selectedPartner, setSelectedPartner] = useState<number>();
     const title = p.sector?.name ?? titles[p.section];
     const formTypes = [
@@ -599,435 +692,550 @@ export default function Services(p: Props) {
                 )}
                 {(p.section === 'documents' || p.section === 'legislation') && (
                     <>
-                        <form
-                            className="grid min-w-0 gap-3 sm:grid-cols-2 lg:grid-cols-4"
-                            onSubmit={(e) => {
-                                e.preventDefault();
-                                filter.get(
-                                    p.section === 'documents'
-                                        ? '/documentos'
-                                        : '/legislacao',
-                                );
-                            }}
-                        >
-                            <label className="block min-w-0">
-                                Pesquisar
-                                <input
-                                    className={input}
-                                    value={filter.data.q}
-                                    onChange={(e) =>
-                                        filter.setData('q', e.target.value)
-                                    }
-                                />
-                            </label>
-                            {!!(p.topics?.length || filter.data.topic) && (
-                                <label className="block min-w-0">
-                                    Tema
-                                    <select
-                                        className={input}
-                                        value={filter.data.topic}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'topic',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todos</option>
-                                        {p.topics?.map((topic) => (
-                                            <option key={topic} value={topic}>
-                                                {documentFacetLabel(topic)}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            {!!(
-                                p.categories?.length || filter.data.category
-                            ) && (
-                                <label className="block min-w-0">
-                                    Categoria
-                                    <select
-                                        className={input}
-                                        value={filter.data.category}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'category',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todas</option>
-                                        {p.categories?.map((category) => (
-                                            <option
-                                                key={category}
-                                                value={category}
-                                            >
-                                                {documentTypeLabels[category] ??
-                                                    documentFacetLabel(
-                                                        category,
-                                                    )}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            {!!(
-                                p.documentTypes?.length ||
-                                filter.data.document_type
-                            ) && (
-                                <label className="block min-w-0">
-                                    Tipo documental
-                                    <select
-                                        className={input}
-                                        value={filter.data.document_type}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'document_type',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todos</option>
-                                        {p.documentTypes?.map((type) => (
-                                            <option key={type} value={type}>
-                                                {documentTypeLabels[type] ??
-                                                    'Documento'}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            {!!p.activities?.length && (
-                                <fieldset className="min-w-0 rounded border p-3">
-                                    <legend className="px-1">
-                                        Actividade ou CAE
-                                    </legend>
-                                    <div className="max-h-36 space-y-2 overflow-y-auto">
-                                        {p.activities.map((activity) => (
-                                            <label
-                                                key={activity}
-                                                className="flex items-start gap-2 break-words"
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    checked={filter.data.activity.includes(
-                                                        activity,
-                                                    )}
-                                                    onChange={(e) =>
-                                                        filter.setData(
-                                                            'activity',
-                                                            e.target.checked
-                                                                ? [
-                                                                      ...filter
-                                                                          .data
-                                                                          .activity,
-                                                                      activity,
-                                                                  ]
-                                                                : filter.data.activity.filter(
-                                                                      (value) =>
-                                                                          value !==
-                                                                          activity,
-                                                                  ),
-                                                        )
-                                                    }
-                                                />
-                                                <span>{activity}</span>
-                                            </label>
-                                        ))}
-                                    </div>
-                                </fieldset>
-                            )}
-                            {!!p.stages?.length && (
-                                <fieldset className="min-w-0 rounded border p-3">
-                                    <legend className="px-1">
-                                        Etapa do projecto
-                                    </legend>
-                                    <div className="max-h-36 space-y-2 overflow-y-auto">
-                                        {p.stages.map((stage) => (
-                                            <label
-                                                key={stage}
-                                                className="flex items-start gap-2 break-words"
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    checked={filter.data.stage.includes(
-                                                        stage,
-                                                    )}
-                                                    onChange={(e) =>
-                                                        filter.setData(
-                                                            'stage',
-                                                            e.target.checked
-                                                                ? [
-                                                                      ...filter
-                                                                          .data
-                                                                          .stage,
-                                                                      stage,
-                                                                  ]
-                                                                : filter.data.stage.filter(
-                                                                      (value) =>
-                                                                          value !==
-                                                                          stage,
-                                                                  ),
-                                                        )
-                                                    }
-                                                />
-                                                <span>{stage}</span>
-                                            </label>
-                                        ))}
-                                    </div>
-                                </fieldset>
-                            )}
-                            {!!p.modules?.length && (
-                                <fieldset className="min-w-0 rounded border p-3">
-                                    <legend className="px-1">Módulo</legend>
-                                    <div className="max-h-36 space-y-2 overflow-y-auto">
-                                        {p.modules.map((module) => (
-                                            <label
-                                                key={module}
-                                                className="flex items-start gap-2 break-words"
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    checked={filter.data.module.includes(
-                                                        module,
-                                                    )}
-                                                    onChange={(e) =>
-                                                        filter.setData(
-                                                            'module',
-                                                            e.target.checked
-                                                                ? [
-                                                                      ...filter
-                                                                          .data
-                                                                          .module,
-                                                                      module,
-                                                                  ]
-                                                                : filter.data.module.filter(
-                                                                      (value) =>
-                                                                          value !==
-                                                                          module,
-                                                                  ),
-                                                        )
-                                                    }
-                                                />
-                                                <span>
-                                                    {{
-                                                        simulator:
-                                                            'Simulador fiscal',
-                                                        procedures:
-                                                            'Como investir',
-                                                        investment:
-                                                            'Oportunidades',
-                                                        zones: 'Zonas e parques',
-                                                        education: 'Educação',
-                                                        business: 'Negócios',
-                                                        land: 'Terra e DUAT',
-                                                    }[module] ??
-                                                        'Documentos de apoio'}
-                                                </span>
-                                            </label>
-                                        ))}
-                                    </div>
-                                </fieldset>
-                            )}
-                            {!!(p.issuers?.length || filter.data.issuer) && (
-                                <label className="block min-w-0">
-                                    Entidade emitente
-                                    <select
-                                        className={input}
-                                        value={filter.data.issuer}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'issuer',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todas</option>
-                                        {p.issuers?.map((issuer) => (
-                                            <option key={issuer}>
-                                                {issuer}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            {!!(
-                                p.languages?.length || filter.data.language
-                            ) && (
-                                <label className="block min-w-0">
-                                    Idioma
-                                    <select
-                                        className={input}
-                                        value={filter.data.language}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'language',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todos</option>
-                                        {p.languages?.map((language) => (
-                                            <option
-                                                key={language}
-                                                value={language}
-                                            >
-                                                {documentFacetLabel(language)}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            {!!(
-                                p.legalStatuses?.length ||
-                                filter.data.legal_status
-                            ) && (
-                                <label className="block min-w-0">
-                                    Situação jurídica indicada
-                                    <select
-                                        className={input}
-                                        value={filter.data.legal_status}
-                                        onChange={(e) =>
-                                            filter.setData(
-                                                'legal_status',
-                                                e.target.value,
-                                            )
-                                        }
-                                    >
-                                        <option value="">Todas</option>
-                                        {p.legalStatuses?.map((status) => (
-                                            <option key={status} value={status}>
-                                                {legalStatusLabels[status] ??
-                                                    'Por confirmar'}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </label>
-                            )}
-                            <label className="block min-w-0">
-                                Confirmação da fonte
-                                <select
-                                    className={input}
-                                    value={filter.data.source_confirmation}
-                                    onChange={(e) =>
-                                        filter.setData(
-                                            'source_confirmation',
-                                            e.target.value,
-                                        )
+                        <div className="investment-catalogue catalogue-workspace">
+                            <aside aria-label="Filtros da biblioteca">
+                                <ServiceFilters
+                                    activeCount={activeCount}
+                                    onClear={clearFilters}
+                                    clearUrl={
+                                        p.section === 'documents'
+                                            ? '/documentos'
+                                            : '/legislacao'
                                     }
+                                    onSubmit={(e) => {
+                                        e.preventDefault();
+                                        filter.get(
+                                            p.section === 'documents'
+                                                ? '/documentos'
+                                                : '/legislacao',
+                                        );
+                                    }}
                                 >
-                                    <option value="">Todas</option>
-                                    <option value="official_confirmed">
-                                        Fonte oficial confirmada
-                                    </option>
-                                    <option value="identified">
-                                        Origem identificada
-                                    </option>
-                                    <option value="unconfirmed">
-                                        Por confirmar
-                                    </option>
-                                </select>
-                            </label>
-                            <label>
-                                Âmbito territorial
-                                <select
-                                    className={input}
-                                    value={filter.data.territory_id}
-                                    onChange={(e) =>
-                                        filter.setData(
-                                            'territory_id',
-                                            e.target.value,
-                                        )
-                                    }
-                                >
-                                    <option value="">Todos</option>
-                                    {p.territories?.map((territory) => (
-                                        <option
-                                            key={territory.id}
-                                            value={territory.id}
-                                        >
-                                            {territory.name}
-                                        </option>
-                                    ))}
-                                </select>
-                                <span className="text-xs text-slate-600">
-                                    Documentos nacionais aplicáveis permanecem
-                                    incluídos.
-                                </span>
-                            </label>
-                            <button className={button}>Pesquisar</button>
-                            <Link
-                                className="self-center underline"
-                                href={
-                                    p.section === 'documents'
-                                        ? '/documentos'
-                                        : '/legislacao'
-                                }
-                            >
-                                Limpar filtros
-                            </Link>
-                        </form>
-                        {!!p.topics?.length && (
-                            <nav
-                                aria-label="Navegar por assunto"
-                                className="flex flex-wrap gap-2"
-                            >
-                                <span className="font-semibold">Assuntos:</span>
-                                {p.topics.map((topic) => (
-                                    <Link
-                                        key={topic}
-                                        className="rounded-full border bg-white px-3 py-1 underline"
-                                        href={`${p.section === 'documents' ? '/documentos' : '/legislacao'}?${new URLSearchParams({ topic }).toString()}`}
-                                    >
-                                        {documentFacetLabel(topic)}
-                                    </Link>
-                                ))}
-                            </nav>
-                        )}
-                        <p className="text-sm">
-                            Os documentos nacionais aplicáveis continuam
-                            incluídos numa pesquisa territorial e são
-                            identificados como nacionais. A localização da
-                            entidade emitente não define o âmbito de aplicação.
-                        </p>
-                        {p.resources?.data.map((r, index) => (
-                            <div key={r.id} className="contents">
-                                {index === 0 && (
-                                    <h2 className="pt-4 text-xl font-bold">
-                                        {firstFormIndex === 0
-                                            ? 'Formulários e modelos'
-                                            : 'Documentos de consulta'}
-                                    </h2>
-                                )}
-                                {index === firstFormIndex &&
-                                    firstFormIndex > 0 && (
-                                        <h2 className="pt-4 text-xl font-bold">
-                                            Formulários e modelos
-                                        </h2>
+                                    <label className="block min-w-0">
+                                        Pesquisar
+                                        <input
+                                            className={input}
+                                            value={filter.data.q}
+                                            onChange={(e) =>
+                                                filter.setData(
+                                                    'q',
+                                                    e.target.value,
+                                                )
+                                            }
+                                        />
+                                    </label>
+                                    {!!(
+                                        p.topics?.length || filter.data.topic
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Tema
+                                            <select
+                                                className={input}
+                                                value={filter.data.topic}
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'topic',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todos</option>
+                                                {optionsWithSelection(
+                                                    p.topics,
+                                                    [filter.data.topic],
+                                                ).map((topic) => (
+                                                    <option
+                                                        key={topic}
+                                                        value={topic}
+                                                    >
+                                                        {documentFacetLabel(
+                                                            topic,
+                                                        )}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
                                     )}
-                                <article
-                                    key={r.id}
-                                    className="min-w-0 space-y-2 overflow-hidden rounded-xl border bg-white p-5"
-                                >
-                                    <PublicDocumentContent
-                                        resource={r}
-                                        back={currentUrl}
-                                    />
-                                </article>
-                            </div>
-                        ))}
-                        {!p.resources?.data.length && (
-                            <p>
-                                Não existem documentos publicados para esta
-                                pesquisa.{' '}
-                                <Link href="/apoio" className="underline">
-                                    Solicitar documento ao apoio
-                                </Link>
-                                .
-                            </p>
-                        )}
-                        {p.resources && <Pagination page={p.resources} />}
+                                    {!!(
+                                        p.categories?.length ||
+                                        filter.data.category
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Categoria
+                                            <select
+                                                className={input}
+                                                value={filter.data.category}
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'category',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todas</option>
+                                                {optionsWithSelection(
+                                                    p.categories,
+                                                    [filter.data.category],
+                                                ).map((category) => (
+                                                    <option
+                                                        key={category}
+                                                        value={category}
+                                                    >
+                                                        {documentTypeLabels[
+                                                            category
+                                                        ] ??
+                                                            documentFacetLabel(
+                                                                category,
+                                                            )}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
+                                    )}
+                                    {!!(
+                                        p.documentTypes?.length ||
+                                        filter.data.document_type
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Tipo documental
+                                            <select
+                                                className={input}
+                                                value={
+                                                    filter.data.document_type
+                                                }
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'document_type',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todos</option>
+                                                {optionsWithSelection(
+                                                    p.documentTypes,
+                                                    [filter.data.document_type],
+                                                ).map((type) => (
+                                                    <option
+                                                        key={type}
+                                                        value={type}
+                                                    >
+                                                        {documentTypeLabels[
+                                                            type
+                                                        ] ?? 'Documento'}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
+                                    )}
+                                    {!!(
+                                        p.activities?.length ||
+                                        filter.data.activity.length
+                                    ) && (
+                                        <fieldset className="min-w-0 rounded border p-3">
+                                            <legend className="px-1">
+                                                Actividade ou CAE
+                                            </legend>
+                                            <div className="max-h-36 space-y-2 overflow-y-auto">
+                                                {optionsWithSelection(
+                                                    p.activities,
+                                                    filter.data.activity,
+                                                ).map((activity) => (
+                                                    <label
+                                                        key={activity}
+                                                        className="flex items-start gap-2 break-words"
+                                                    >
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={filter.data.activity.includes(
+                                                                activity,
+                                                            )}
+                                                            onChange={(e) =>
+                                                                filter.setData(
+                                                                    'activity',
+                                                                    e.target
+                                                                        .checked
+                                                                        ? [
+                                                                              ...filter
+                                                                                  .data
+                                                                                  .activity,
+                                                                              activity,
+                                                                          ]
+                                                                        : filter.data.activity.filter(
+                                                                              (
+                                                                                  value,
+                                                                              ) =>
+                                                                                  value !==
+                                                                                  activity,
+                                                                          ),
+                                                                )
+                                                            }
+                                                        />
+                                                        <span>{activity}</span>
+                                                    </label>
+                                                ))}
+                                            </div>
+                                        </fieldset>
+                                    )}
+                                    {!!(
+                                        p.stages?.length ||
+                                        filter.data.stage.length
+                                    ) && (
+                                        <fieldset className="min-w-0 rounded border p-3">
+                                            <legend className="px-1">
+                                                Etapa do projecto
+                                            </legend>
+                                            <div className="max-h-36 space-y-2 overflow-y-auto">
+                                                {optionsWithSelection(
+                                                    p.stages,
+                                                    filter.data.stage,
+                                                ).map((stage) => (
+                                                    <label
+                                                        key={stage}
+                                                        className="flex items-start gap-2 break-words"
+                                                    >
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={filter.data.stage.includes(
+                                                                stage,
+                                                            )}
+                                                            onChange={(e) =>
+                                                                filter.setData(
+                                                                    'stage',
+                                                                    e.target
+                                                                        .checked
+                                                                        ? [
+                                                                              ...filter
+                                                                                  .data
+                                                                                  .stage,
+                                                                              stage,
+                                                                          ]
+                                                                        : filter.data.stage.filter(
+                                                                              (
+                                                                                  value,
+                                                                              ) =>
+                                                                                  value !==
+                                                                                  stage,
+                                                                          ),
+                                                                )
+                                                            }
+                                                        />
+                                                        <span>{stage}</span>
+                                                    </label>
+                                                ))}
+                                            </div>
+                                        </fieldset>
+                                    )}
+                                    {!!(
+                                        p.modules?.length ||
+                                        filter.data.module.length
+                                    ) && (
+                                        <fieldset className="min-w-0 rounded border p-3">
+                                            <legend className="px-1">
+                                                Módulo
+                                            </legend>
+                                            <div className="max-h-36 space-y-2 overflow-y-auto">
+                                                {optionsWithSelection(
+                                                    p.modules,
+                                                    filter.data.module,
+                                                ).map((module) => (
+                                                    <label
+                                                        key={module}
+                                                        className="flex items-start gap-2 break-words"
+                                                    >
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={filter.data.module.includes(
+                                                                module,
+                                                            )}
+                                                            onChange={(e) =>
+                                                                filter.setData(
+                                                                    'module',
+                                                                    e.target
+                                                                        .checked
+                                                                        ? [
+                                                                              ...filter
+                                                                                  .data
+                                                                                  .module,
+                                                                              module,
+                                                                          ]
+                                                                        : filter.data.module.filter(
+                                                                              (
+                                                                                  value,
+                                                                              ) =>
+                                                                                  value !==
+                                                                                  module,
+                                                                          ),
+                                                                )
+                                                            }
+                                                        />
+                                                        <span>
+                                                            {{
+                                                                simulator:
+                                                                    'Simulador fiscal',
+                                                                procedures:
+                                                                    'Como investir',
+                                                                investment:
+                                                                    'Oportunidades',
+                                                                zones: 'Zonas e parques',
+                                                                education:
+                                                                    'Educação',
+                                                                business:
+                                                                    'Negócios',
+                                                                land: 'Terra e DUAT',
+                                                            }[module] ??
+                                                                'Documentos de apoio'}
+                                                        </span>
+                                                    </label>
+                                                ))}
+                                            </div>
+                                        </fieldset>
+                                    )}
+                                    {!!(
+                                        p.issuers?.length || filter.data.issuer
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Entidade emitente
+                                            <select
+                                                className={input}
+                                                value={filter.data.issuer}
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'issuer',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todas</option>
+                                                {optionsWithSelection(
+                                                    p.issuers,
+                                                    [filter.data.issuer],
+                                                ).map((issuer) => (
+                                                    <option key={issuer}>
+                                                        {issuer}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
+                                    )}
+                                    {!!(
+                                        p.languages?.length ||
+                                        filter.data.language
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Idioma
+                                            <select
+                                                className={input}
+                                                value={filter.data.language}
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'language',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todos</option>
+                                                {optionsWithSelection(
+                                                    p.languages,
+                                                    [filter.data.language],
+                                                ).map((language) => (
+                                                    <option
+                                                        key={language}
+                                                        value={language}
+                                                    >
+                                                        {documentFacetLabel(
+                                                            language,
+                                                        )}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
+                                    )}
+                                    {!!(
+                                        p.legalStatuses?.length ||
+                                        filter.data.legal_status
+                                    ) && (
+                                        <label className="block min-w-0">
+                                            Situação jurídica indicada
+                                            <select
+                                                className={input}
+                                                value={filter.data.legal_status}
+                                                onChange={(e) =>
+                                                    filter.setData(
+                                                        'legal_status',
+                                                        e.target.value,
+                                                    )
+                                                }
+                                            >
+                                                <option value="">Todas</option>
+                                                {optionsWithSelection(
+                                                    p.legalStatuses,
+                                                    [filter.data.legal_status],
+                                                ).map((status) => (
+                                                    <option
+                                                        key={status}
+                                                        value={status}
+                                                    >
+                                                        {legalStatusLabels[
+                                                            status
+                                                        ] ?? 'Por confirmar'}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </label>
+                                    )}
+                                    <label className="block min-w-0">
+                                        Confirmação da fonte
+                                        <select
+                                            className={input}
+                                            value={
+                                                filter.data.source_confirmation
+                                            }
+                                            onChange={(e) =>
+                                                filter.setData(
+                                                    'source_confirmation',
+                                                    e.target.value,
+                                                )
+                                            }
+                                        >
+                                            <option value="">Todas</option>
+                                            <option value="official_confirmed">
+                                                Fonte oficial confirmada
+                                            </option>
+                                            <option value="identified">
+                                                Origem identificada
+                                            </option>
+                                            <option value="unconfirmed">
+                                                Por confirmar
+                                            </option>
+                                        </select>
+                                    </label>
+                                    <label>
+                                        Âmbito territorial
+                                        <select
+                                            className={input}
+                                            value={filter.data.territory_id}
+                                            onChange={(e) =>
+                                                filter.setData(
+                                                    'territory_id',
+                                                    e.target.value,
+                                                )
+                                            }
+                                        >
+                                            <option value="">Todos</option>
+                                            {filter.data.territory_id &&
+                                                !p.territories?.some(
+                                                    (territory) =>
+                                                        territory.id ===
+                                                        filter.data
+                                                            .territory_id,
+                                                ) && (
+                                                    <option
+                                                        value={
+                                                            filter.data
+                                                                .territory_id
+                                                        }
+                                                    >
+                                                        Localização seleccionada
+                                                        indisponível — remova o
+                                                        filtro
+                                                    </option>
+                                                )}
+                                            {p.territories?.map((territory) => (
+                                                <option
+                                                    key={territory.id}
+                                                    value={territory.id}
+                                                >
+                                                    {territory.name}
+                                                </option>
+                                            ))}
+                                        </select>
+                                        <span className="text-xs text-slate-600">
+                                            Documentos nacionais aplicáveis
+                                            permanecem incluídos.
+                                        </span>
+                                    </label>
+                                </ServiceFilters>
+                            </aside>
+                            <section
+                                className="catalogue-results space-y-5"
+                                aria-label="Resultados da biblioteca"
+                            >
+                                <h2 className="catalogue-results-heading text-xl font-bold">
+                                    Documentos disponíveis
+                                    {p.resources
+                                        ? ` · ${p.resources.total}`
+                                        : ''}
+                                </h2>
+                                {!!p.topics?.length && (
+                                    <nav
+                                        aria-label="Navegar por assunto"
+                                        className="flex flex-wrap gap-2"
+                                    >
+                                        <span className="font-semibold">
+                                            Assuntos:
+                                        </span>
+                                        {p.topics.map((topic) => (
+                                            <Link
+                                                key={topic}
+                                                className="rounded-full border bg-white px-3 py-1 underline"
+                                                href={`${p.section === 'documents' ? '/documentos' : '/legislacao'}?${new URLSearchParams({ topic }).toString()}`}
+                                            >
+                                                {documentFacetLabel(topic)}
+                                            </Link>
+                                        ))}
+                                    </nav>
+                                )}
+                                <p className="text-sm">
+                                    Os documentos nacionais aplicáveis continuam
+                                    incluídos numa pesquisa territorial e são
+                                    identificados como nacionais. A localização
+                                    da entidade emitente não define o âmbito de
+                                    aplicação.
+                                </p>
+                                {p.resources?.data.map((r, index) => (
+                                    <div key={r.id} className="contents">
+                                        {index === 0 && (
+                                            <h2 className="pt-4 text-xl font-bold">
+                                                {firstFormIndex === 0
+                                                    ? 'Formulários e modelos'
+                                                    : 'Documentos de consulta'}
+                                            </h2>
+                                        )}
+                                        {index === firstFormIndex &&
+                                            firstFormIndex > 0 && (
+                                                <h2 className="pt-4 text-xl font-bold">
+                                                    Formulários e modelos
+                                                </h2>
+                                            )}
+                                        <article
+                                            key={r.id}
+                                            className="min-w-0 space-y-2 overflow-hidden rounded-xl border bg-white p-5"
+                                        >
+                                            <PublicDocumentContent
+                                                resource={r}
+                                                back={currentUrl}
+                                            />
+                                        </article>
+                                    </div>
+                                ))}
+                                {!p.resources?.data.length && (
+                                    <p>
+                                        Não existem documentos publicados para
+                                        esta pesquisa.{' '}
+                                        <Link
+                                            href="/apoio"
+                                            className="underline"
+                                        >
+                                            Solicitar documento ao apoio
+                                        </Link>
+                                        .
+                                    </p>
+                                )}
+                                {p.resources && (
+                                    <Pagination page={p.resources} />
+                                )}
+                            </section>
+                        </div>
                         <div className="flex flex-wrap gap-4">
                             <Link
                                 className={button}
@@ -1135,87 +1343,109 @@ export default function Services(p: Props) {
                             intermediado pelo apoio; os dados privados dos
                             proponentes não são publicados.
                         </p>
-                        <form
-                            className="grid gap-3 md:grid-cols-4"
-                            onSubmit={(e) => {
-                                e.preventDefault();
-                                filter.get('/parcerias');
-                            }}
-                        >
-                            {(['q', 'sector', 'province'] as const).map(
-                                (key) => (
-                                    <label key={key}>
-                                        {
-                                            {
-                                                q: 'Pesquisar',
-                                                sector: 'Sector',
-                                                province: 'Província',
-                                            }[key]
-                                        }
-                                        {key === 'province' ? (
-                                            <ProvinceSelect
-                                                value={filter.data.province}
-                                                onChange={(province) =>
-                                                    filter.setData(
-                                                        'province',
-                                                        province,
-                                                    )
-                                                }
-                                                className={input}
-                                                placeholder="Todas as províncias"
-                                                label="Filtrar por província"
-                                            />
-                                        ) : (
-                                            <input
-                                                className={input}
-                                                value={filter.data[key]}
-                                                onChange={(e) =>
-                                                    filter.setData(
-                                                        key,
-                                                        e.target.value,
-                                                    )
-                                                }
-                                            />
-                                        )}
-                                    </label>
-                                ),
-                            )}
-                            <button className={button}>Filtrar</button>
-                        </form>
-                        {p.partnerships?.data.map((item) => (
-                            <article
-                                key={item.id}
-                                className="space-y-3 rounded-xl border bg-white p-6"
-                            >
-                                <h2 className="text-xl font-bold">
-                                    {item.title}
-                                </h2>
-                                <p>
-                                    {item.sector} · {item.province}
-                                </p>
-                                <h3 className="font-bold">Oferece</h3>
-                                <p className="whitespace-pre-line">
-                                    {item.offer}
-                                </p>
-                                <h3 className="font-bold">Procura</h3>
-                                <p className="whitespace-pre-line">
-                                    {item.seeking}
-                                </p>
-                                <button
-                                    className={button}
-                                    onClick={() => setSelectedPartner(item.id)}
+                        <div className="investment-catalogue catalogue-workspace">
+                            <aside aria-label="Filtros de parcerias">
+                                <ServiceFilters
+                                    activeCount={activeCount}
+                                    clearUrl="/parcerias"
+                                    onClear={clearFilters}
+                                    onSubmit={(e) => {
+                                        e.preventDefault();
+                                        filter.get('/parcerias');
+                                    }}
                                 >
-                                    Pedir contacto sobre esta parceria
-                                </button>
-                            </article>
-                        ))}
-                        {!p.partnerships?.data.length && (
-                            <p>
-                                Ainda não existem propostas publicadas para esta
-                                pesquisa.
-                            </p>
-                        )}
-                        {p.partnerships && <Pagination page={p.partnerships} />}
+                                    {(['q', 'sector', 'province'] as const).map(
+                                        (key) => (
+                                            <label key={key}>
+                                                {
+                                                    {
+                                                        q: 'Pesquisar',
+                                                        sector: 'Sector',
+                                                        province: 'Província',
+                                                    }[key]
+                                                }
+                                                {key === 'province' ? (
+                                                    <ProvinceSelect
+                                                        value={
+                                                            filter.data.province
+                                                        }
+                                                        onChange={(province) =>
+                                                            filter.setData(
+                                                                'province',
+                                                                province,
+                                                            )
+                                                        }
+                                                        className={input}
+                                                        placeholder="Todas as províncias"
+                                                        label="Filtrar por província"
+                                                    />
+                                                ) : (
+                                                    <input
+                                                        className={input}
+                                                        value={filter.data[key]}
+                                                        onChange={(e) =>
+                                                            filter.setData(
+                                                                key,
+                                                                e.target.value,
+                                                            )
+                                                        }
+                                                    />
+                                                )}
+                                            </label>
+                                        ),
+                                    )}
+                                </ServiceFilters>
+                            </aside>
+                            <section
+                                className="catalogue-results space-y-5"
+                                aria-label="Resultados de parcerias"
+                            >
+                                <h2 className="catalogue-results-heading text-xl font-bold">
+                                    Parcerias publicadas
+                                    {p.partnerships
+                                        ? ` · ${p.partnerships.total}`
+                                        : ''}
+                                </h2>
+                                {p.partnerships?.data.map((item) => (
+                                    <article
+                                        key={item.id}
+                                        className="space-y-3 rounded-xl border bg-white p-6"
+                                    >
+                                        <h2 className="text-xl font-bold">
+                                            {item.title}
+                                        </h2>
+                                        <p>
+                                            {item.sector} · {item.province}
+                                        </p>
+                                        <h3 className="font-bold">Oferece</h3>
+                                        <p className="whitespace-pre-line">
+                                            {item.offer}
+                                        </p>
+                                        <h3 className="font-bold">Procura</h3>
+                                        <p className="whitespace-pre-line">
+                                            {item.seeking}
+                                        </p>
+                                        <button
+                                            className={button}
+                                            onClick={() =>
+                                                setSelectedPartner(item.id)
+                                            }
+                                        >
+                                            Pedir contacto sobre esta parceria
+                                        </button>
+                                    </article>
+                                ))}
+                                {!p.partnerships?.data.length && (
+                                    <p>
+                                        Ainda não existem propostas publicadas
+                                        para esta pesquisa.
+                                    </p>
+                                )}
+                                {p.partnerships && (
+                                    <Pagination page={p.partnerships} />
+                                )}
+                            </section>
+                        </div>
                         {selectedPartner && (
                             <RequestForm
                                 key={selectedPartner}
@@ -1272,8 +1502,8 @@ export default function Services(p: Props) {
                             </p>
                         ))}
                         <Link href="/investidor" className="underline">
-                            Consultar oportunidades e manifestações de interesse da
-                            carteira
+                            Consultar oportunidades e manifestações de interesse
+                            da carteira
                         </Link>
                     </>
                 )}
diff --git a/tests/frontend/document-library-filters.test.mjs b/tests/frontend/document-library-filters.test.mjs
new file mode 100644
index 00000000..d3f9312b
--- /dev/null
+++ b/tests/frontend/document-library-filters.test.mjs
@@ -0,0 +1,133 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { compileFunction } from 'node:vm';
+import { createRequire } from 'node:module';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import ts from 'typescript';
+
+const require = createRequire(import.meta.url);
+const Empty = () => null;
+function render(section, filters = {}) {
+    const source = fs.readFileSync(
+        new URL(
+            '../../resources/js/pages/portal/services.tsx',
+            import.meta.url,
+        ),
+        'utf8',
+    );
+    const code = ts.transpileModule(source, {
+        compilerOptions: {
+            module: ts.ModuleKind.CommonJS,
+            target: ts.ScriptTarget.ES2022,
+            jsx: ts.JsxEmit.ReactJSX,
+        },
+    }).outputText;
+    const module = { exports: {} };
+    const props = { auth: { user: null } };
+    const mocks = {
+        'lucide-react': {
+            ChevronDown: Empty,
+            Search: Empty,
+            SlidersHorizontal: Empty,
+        },
+        '@inertiajs/react': {
+            Head: Empty,
+            Link: 'a',
+            usePage: () => ({ props, url: '/documentos' }),
+            useForm: (data) => ({ data, setData() {}, get() {} }),
+        },
+        '@/lib/document-facet-label': { documentFacetLabel: (value) => value },
+        '@/lib/portal-presentation': { PORTAL_MORE_LINK: '' },
+        '../../../css/investment-catalogue.css': {},
+    };
+    compileFunction(code, ['require', 'module', 'exports'])(
+        (name) => {
+            if (mocks[name]) return mocks[name];
+            if (name.startsWith('@/'))
+                return new Proxy(
+                    { __esModule: true, default: Empty },
+                    { get: (target, key) => target[key] ?? Empty },
+                );
+            return require(name);
+        },
+        module,
+        module.exports,
+    );
+    return renderToStaticMarkup(
+        createElement(module.exports.default, {
+            section,
+            filters,
+            topics: ['Fiscalidade'],
+            categories: ['Legislação'],
+            documentTypes: ['guide'],
+            activities: ['CAE exemplo'],
+            stages: ['Etapa exemplo'],
+            modules: ['simulator'],
+            issuers: ['Instituição exemplo'],
+            languages: ['Português'],
+            legalStatuses: ['amended'],
+            territories: [{ id: 'territory', name: 'Cabo Delgado' }],
+            resources: {
+                data: [],
+                total: 0,
+                prev_page_url: null,
+                next_page_url: null,
+            },
+        }),
+    );
+}
+
+test('biblioteca e legislação mantêm todos os critérios e opções visíveis no painel aberto', () => {
+    for (const section of ['documents', 'legislation']) {
+        const html = render(section);
+        for (const label of [
+            'Pesquisar',
+            'Tema',
+            'Fiscalidade',
+            'Categoria',
+            'Legislação',
+            'Tipo documental',
+            'Guia',
+            'Actividade ou CAE',
+            'CAE exemplo',
+            'Etapa do projecto',
+            'Etapa exemplo',
+            'Módulo',
+            'Simulador fiscal',
+            'Entidade emitente',
+            'Instituição exemplo',
+            'Idioma',
+            'Português',
+            'Situação jurídica indicada',
+            'Alterada; consulte alterações posteriores',
+            'Confirmação da fonte',
+            'Fonte oficial confirmada',
+            'Âmbito territorial',
+            'Cabo Delgado',
+            'Limpar filtros',
+        ])
+            assert.ok(html.includes(label), `${section}: ${label}`);
+        assert.match(html, /aria-expanded="true"/);
+    }
+});
+
+test('critérios seleccionados continuam acessíveis quando já não constam das opções', () => {
+    const html = render('documents', {
+        topic: 'Tema antigo',
+        activity: ['CAE antigo'],
+        stage: ['Etapa antiga'],
+        module: ['outro'],
+        territory_id: 'old-territory',
+    });
+    for (const value of [
+        'Tema antigo',
+        'CAE antigo',
+        'Etapa antiga',
+        'Documentos de apoio',
+        'old-territory',
+        'Localização seleccionada indisponível',
+    ])
+        assert.ok(html.includes(value), value);
+});