diff --git a/docs/customization-profile-screens.md b/docs/customization-profile-screens.md
new file mode 100644
index 0000000000..539f853206
--- /dev/null
+++ b/docs/customization-profile-screens.md
@@ -0,0 +1,57 @@
+# Customization profile screens
+
+A customization manifest can add Library navigation pages with `rel: "screen"` links. Thorium displays the links matching the application locale; when none match, it uses English and language-neutral links in manifest order.
+
+Profile screen documents must follow this contract:
+
+- Use `text/html` (or omit the link type) and provide exactly one `<h1>`.
+- Do not add a `<main>` landmark. Thorium owns the page `<main>`; any nested `<main>` is converted to `<section class="profile-content">`.
+- Do not use scripts, frames, embedded objects, external stylesheets, `@import`, `@font-face`, `@keyframes`, or `@page`.
+- Inline `<style>` rules must target `.custom-profile-screen` or a descendant. A `body[data-theme]` condition may precede that selector.
+- Do not set application typography. Thorium enforces its Nunito font and standard heading and text sizes.
+- Inline layout and color styles are allowed. Thorium sanitizes the markup before rendering it.
+
+## Style selector rules
+
+Thorium checks every selector in every inline stylesheet, including each member of a comma-separated selector list and rules nested in grouping at-rules such as `@media` and `@supports`. If any selector is outside the profile screen, Thorium rejects the document.
+
+Every selector must start with the exact `.custom-profile-screen` class. It may optionally be preceded by one `body[data-theme]` condition, either without a value or with an exact value such as `body[data-theme="dark"]`. Conditions may be added to the profile root, and descendant or child combinators may then select content inside it.
+
+Allowed examples:
+
+```css
+.custom-profile-screen { color: var(--color-primary); }
+.custom-profile-screen.compact:hover { background: white; }
+.custom-profile-screen .card + .card { margin-block-start: 1rem; }
+.custom-profile-screen > section .card { display: grid; }
+body[data-theme="dark"] .custom-profile-screen .card { background: black; }
+```
+
+Selectors are rejected when they use another ancestor, merely contain or resemble the scope class, or use a sibling or column combinator directly after the profile root. A sibling combinator between descendants is allowed because its target remains inside the profile screen.
+
+Rejected examples:
+
+```css
+body .custom-profile-screen { color: red; }
+body[data-other] .custom-profile-screen { color: red; }
+:is(.custom-profile-screen, body) { color: red; }
+.custom-profile-screen-other { color: red; }
+.custom-profile-screen + .thorium-content { display: none; }
+.custom-profile-screen, body { color: red; }
+```
+
+Only selector scope is validated here. The other stylesheet restrictions still apply: global or resource-loading at-rules such as `@import`, `@font-face`, `@keyframes`, and `@page` are rejected, as are executable legacy CSS values. A parser error also rejects the document.
+
+### Selector validation algorithm
+
+The browser first parses the stylesheet into CSSOM rules and gives Thorium a `selectorText` for each retained style rule. Thorium then parses every selector list with [`css-selector-parser`](https://github.com/mdevils/css-selector-parser) in strict Selectors Level 4 mode. The AST is checked directly, without a second normalized model:
+
+1. An optional ancestor must be exactly `body[data-theme]` or `body[data-theme="value"]`, without a namespace, another compound condition, a case-sensitivity modifier, or an operator other than `=`. It must be connected to the profile root by descendant whitespace.
+2. The first item in the profile-root compound must be the exact `custom-profile-screen` class. Because the parser decodes CSS identifiers, a valid escaped spelling such as `.custom-profile-\73 creen` is also accepted, while lookalikes remain rejected.
+3. With no following compound, the selector targets the profile root and is safe.
+4. When another compound follows the root, its first combinator must be descendant whitespace or child (`>`). A sibling (`+` or `~`) or column (`||`) combinator at this position is rejected because it can target content outside the root.
+5. Later combinators cannot escape the subtree after the selector has entered it, so they do not affect the containment decision. For example, `.custom-profile-screen .card + .card` is safe, while `.custom-profile-screen + .card` is not.
+
+An empty selector list, a parser exception, an unsafe selector in a list, an unknown CSS rule shape, or an unsupported global at-rule causes validation to fail closed. `css-selector-parser` only provides the AST; the containment checks in `selectorCssParser.ts` remain the Thorium security policy.
+
+Thorium addresses each screen with an internal `/profile/:screenId` route. The identifier is derived from the manifest `href`; a route can only load the localized `rel: "screen"` resource it resolves to in the active manifest.
diff --git a/package-lock.json b/package-lock.json
index dfd0228a3a..e2c7fae26a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "ajv-formats": "^3.0.1",
         "classnames": "^2.5.1",
         "color": "^5.0.3",
+        "css-selector-parser": "^3.3.0",
         "css.escape": "^1.5.1",
         "cssesc": "^3.0.0",
         "debounce": "^3.0.0",
@@ -10813,6 +10814,22 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-selector-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.3.0.tgz",
+      "integrity": "sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
diff --git a/package.json b/package.json
index 5bf5a1e9cb..8701cfbc81 100644
--- a/package.json
+++ b/package.json
@@ -428,6 +428,7 @@
     "ajv-formats": "^3.0.1",
     "classnames": "^2.5.1",
     "color": "^5.0.3",
+    "css-selector-parser": "^3.3.0",
     "css.escape": "^1.5.1",
     "cssesc": "^3.0.0",
     "debounce": "^3.0.0",
diff --git a/src/renderer/assets/styles/components/profileScreen.scss b/src/renderer/assets/styles/components/profileScreen.scss
new file mode 100644
index 0000000000..e8186f9c92
--- /dev/null
+++ b/src/renderer/assets/styles/components/profileScreen.scss
@@ -0,0 +1,57 @@
+.profile_screen {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-family: Nunito, sans-serif !important;
+  font-size: 12px !important;
+  line-height: 1.5;
+
+  &,
+  & * {
+    font-family: Nunito, sans-serif !important;
+  }
+
+  & * {
+    font-size: 12px !important;
+  }
+
+  h1 {
+    font-size: 24px !important;
+  }
+
+  h2 {
+    font-size: 20px !important;
+  }
+
+  h3 {
+    font-size: 16px !important;
+  }
+
+  h4,
+  button,
+  label {
+    font-size: 14px !important;
+  }
+
+  img,
+  table {
+    max-width: 100%;
+  }
+}
+
+.loading {
+  width: 28px;
+  height: 28px;
+  margin: 40px auto;
+  border: 3px solid var(--color-gray-250);
+  border-top-color: var(--color-brand-primary);
+  border-radius: 50%;
+  animation: profile-screen-loading 800ms linear infinite;
+}
+
+@keyframes profile-screen-loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/renderer/assets/styles/components/profileScreen.scss.d.ts b/src/renderer/assets/styles/components/profileScreen.scss.d.ts
new file mode 100644
index 0000000000..2f1cbdca61
--- /dev/null
+++ b/src/renderer/assets/styles/components/profileScreen.scss.d.ts
@@ -0,0 +1,2 @@
+export declare const loading: string;
+export declare const profile_screen: string;
diff --git a/src/renderer/library/analytics/pageView.ts b/src/renderer/library/analytics/pageView.ts
index 74923cc97d..ac554f482b 100644
--- a/src/renderer/library/analytics/pageView.ts
+++ b/src/renderer/library/analytics/pageView.ts
@@ -6,8 +6,15 @@
 // ==LICENSE-END==
 
 import { TAnalyticsEventParams } from "readium-desktop/common/api/interface/analyticsApi.interface";
+import { ICustomizationManifest } from "readium-desktop/common/readium/customization/manifest";
+import { isProfileCatalogPathname } from "readium-desktop/renderer/library/customization/route";
 
-export type TLibraryPageTitle = "Home" | "Bookshelf" | "Catalog";
+export type TLibraryPageTitle = "Home" | "Bookshelf" | "Catalog" | "Profile Page" | "Profile Catalog";
+
+export interface ILibraryPageView {
+    pageTitle: TLibraryPageTitle;
+    routeKey: string;
+}
 
 export type TLibraryPageViewParams = TAnalyticsEventParams & {
     page_title: TLibraryPageTitle;
@@ -16,27 +23,47 @@ export type TLibraryPageViewParams = TAnalyticsEventParams & {
 
 const PAGE_LOCATION_ORIGIN = "https://desktop.thoriumreader.com/analytics";
 
-export const libraryPageTitleFromPathname = (pathname: string): TLibraryPageTitle | undefined => {
+export const libraryPageViewFromPathname = (
+    pathname: string,
+    customizationManifest?: ICustomizationManifest,
+): ILibraryPageView | undefined => {
     const normalizedPathname = pathname.replace(/\/+$/, "") || "/";
 
     if (normalizedPathname === "/" || normalizedPathname === "/home") {
-        return "Home";
+        return { pageTitle: "Home", routeKey: "Home" };
     }
 
     if (normalizedPathname === "/library") {
-        return "Bookshelf";
+        return { pageTitle: "Bookshelf", routeKey: "Bookshelf" };
+    }
+
+    if (/^\/profile\/[^/]+$/.test(normalizedPathname)) {
+        return { pageTitle: "Profile Page", routeKey: normalizedPathname };
     }
 
     if (normalizedPathname === "/opds" || normalizedPathname.startsWith("/opds/")) {
-        return "Catalog";
+        if (isProfileCatalogPathname(normalizedPathname, customizationManifest)) {
+            const rootIdentifier = normalizedPathname.split("/")[2];
+            return {
+                pageTitle: "Profile Catalog",
+                routeKey: `Profile Catalog:${rootIdentifier}`,
+            };
+        }
+        return { pageTitle: "Catalog", routeKey: "Catalog" };
     }
 
     return undefined;
 };
 
+export const libraryPageTitleFromPathname = (
+    pathname: string,
+    customizationManifest?: ICustomizationManifest,
+): TLibraryPageTitle | undefined =>
+    libraryPageViewFromPathname(pathname, customizationManifest)?.pageTitle;
+
 export const buildLibraryPageViewParams = (
     pageTitle: TLibraryPageTitle,
 ): TLibraryPageViewParams => ({
     page_title: pageTitle,
-    page_location: `${PAGE_LOCATION_ORIGIN}/${pageTitle}`,
+    page_location: `${PAGE_LOCATION_ORIGIN}/${encodeURIComponent(pageTitle)}`,
 });
diff --git a/src/renderer/library/components/customization/Customization.tsx b/src/renderer/library/components/customization/Customization.tsx
new file mode 100644
index 0000000000..cad688cf57
--- /dev/null
+++ b/src/renderer/library/components/customization/Customization.tsx
@@ -0,0 +1,169 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { encodeURIComponent_RFC3986 } from "@r2-utils-js/_utils/http/UrlUtils";
+import DOMPurify from "dompurify";
+import * as React from "react";
+import { Navigate, useParams } from "react-router-dom";
+
+import { convertMultiLangStringToString } from "readium-desktop/common/language-string";
+import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
+import {
+    URL_HOST_COMMON,
+    URL_PATH_PREFIX_CUSTOMPROFILEZIP,
+    URL_PROTOCOL_THORIUMHTTPS,
+} from "readium-desktop/common/streamerProtocol";
+import * as styles from "readium-desktop/renderer/assets/styles/components/profileScreen.scss";
+import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
+import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
+import { decodeProfileRouteParam, resolveProfileScreenLink } from "../../customization/route";
+import { profileCssIsSafeAndScoped } from "../../customization/style";
+import PublicationAddButton from "../catalog/PublicationAddButton";
+import LibraryLayout from "../layout/LibraryLayout";
+
+const secondaryHeader = <span style={{ display: "flex", justifyContent: "end", alignItems: "end", height: "53px", borderBottom: "1px solid var(--color-gray-250)", paddingBottom: "30px" }}><PublicationAddButton /></span>;
+
+type TProfileScreenState =
+    | { status: "loading" }
+    | { status: "ready"; html: string }
+    | { status: "error" };
+
+export function prepareProfileScreenHtml(rawHtmlContent: string): string | undefined {
+    // Profile packages are controlled and signed, so the page remains in the
+    // regular DOM instead of a Shadow DOM. This preserves Thorium's theme,
+    // focus management, accessibility landmarks, and link handling. Isolation
+    // is enforced by sanitizing the HTML and requiring retained stylesheet
+    // selectors to remain below .custom-profile-screen. Inline style
+    // attributes are local to their element, while Thorium's !important rules
+    // still enforce the application font and standard text sizes.
+    const sanitizedHtml = DOMPurify.sanitize(rawHtmlContent, {
+        FORCE_BODY: true,
+        FORBID_ATTR: ["srcdoc"],
+        FORBID_TAGS: ["base", "embed", "iframe", "link", "object", "script"],
+    });
+    const parsedDocument = new DOMParser().parseFromString(sanitizedHtml, "text/html");
+
+    if (Array.from(parsedDocument.body.querySelectorAll("style")).some(
+        (style) => !profileCssIsSafeAndScoped(style.textContent || ""),
+    )) {
+        return undefined;
+    }
+
+    // LibraryLayout already owns the page's main landmark.
+    for (const nestedMain of Array.from(parsedDocument.body.querySelectorAll("main"))) {
+        const section = parsedDocument.createElement("section");
+        for (const attribute of Array.from(nestedMain.attributes)) {
+            section.setAttribute(attribute.name, attribute.value);
+        }
+        section.classList.add("profile-content");
+        while (nestedMain.firstChild) {
+            section.appendChild(nestedMain.firstChild);
+        }
+        nestedMain.replaceWith(section);
+    }
+
+    if (parsedDocument.body.querySelectorAll("h1").length !== 1) {
+        return undefined;
+    }
+
+    return parsedDocument.body.innerHTML;
+}
+
+const CustomizationPage = () => {
+    const [__] = useTranslator();
+    const { screenId } = useParams<{ screenId: string }>();
+    const contentRef = React.useRef<HTMLDivElement>(null);
+
+    const customization = useSelector((state: ILibraryRootState) => state.customization);
+    const locale = useSelector((state: ILibraryRootState) => state.i18n.locale);
+    const customizationManifest = customization.manifest;
+    const decodedHref = screenId ? decodeProfileRouteParam(screenId) : undefined;
+    const screenLink = screenId
+        ? resolveProfileScreenLink(customizationManifest, locale, screenId)
+        : undefined;
+    const title = convertMultiLangStringToString(screenLink?.title, locale) || __("catalog.customization.fallback.screen");
+    const customizationId = customizationManifest?.identifier;
+    const customizationBaseUrl = customizationId
+        ? `${URL_PROTOCOL_THORIUMHTTPS}://${URL_HOST_COMMON}/${URL_PATH_PREFIX_CUSTOMPROFILEZIP}/${encodeURIComponent_RFC3986(Buffer.from(customizationId).toString("base64"))}/`
+        : undefined;
+
+    const [screenState, setScreenState] = React.useState<TProfileScreenState>({ status: "loading" });
+
+    React.useEffect(() => {
+        if (!screenLink || !customizationBaseUrl) {
+            setScreenState({ status: "loading" });
+            return undefined;
+        }
+
+        const controller = new AbortController();
+        setScreenState({ status: "loading" });
+
+        // URL is handled by Thorium's custom-profile-zip protocol.
+        const url = customizationBaseUrl + encodeURIComponent_RFC3986(Buffer.from(screenLink.href).toString("base64"));
+        fetch(url, { signal: controller.signal })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(response.statusText || `${response.status}`);
+                }
+                return response.text();
+            })
+            .then((rawHtmlContent) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                const html = rawHtmlContent && prepareProfileScreenHtml(rawHtmlContent);
+                setScreenState(html ? { status: "ready", html } : { status: "error" });
+            })
+            .catch((error) => {
+                if (controller.signal.aborted || error?.name === "AbortError") {
+                    return;
+                }
+                console.error("Error loading profile screen:", error);
+                setScreenState({ status: "error" });
+            });
+
+        return () => controller.abort();
+    }, [customizationBaseUrl, screenLink]);
+
+    React.useEffect(() => {
+        if (screenState.status !== "ready") {
+            return;
+        }
+        const heading = contentRef.current?.querySelector<HTMLElement>("h1");
+        if (heading) {
+            heading.tabIndex = -1;
+            heading.focus({ preventScroll: true });
+        }
+    }, [screenState]);
+
+    if (!decodedHref || !customization.activate.id) {
+        return <Navigate to="/home" replace />;
+    }
+    if (customizationManifest && !screenLink) {
+        return <Navigate to="/home" replace />;
+    }
+
+    return (
+        <LibraryLayout
+            page={title}
+            secondaryHeader={secondaryHeader}
+        >
+            <div
+                aria-busy={screenState.status === "loading"}
+                className={`custom-profile-screen ${styles.profile_screen}`}
+                lang={screenLink?.language || locale}
+                ref={contentRef}
+            >
+                {screenState.status === "loading" ? <div aria-hidden="true" className={styles.loading} /> : <></>}
+                {screenState.status === "error" ? <p role="alert">{__("opds.network.error")}</p> : <></>}
+                {screenState.status === "ready" ? <div dangerouslySetInnerHTML={{ __html: screenState.html }} /> : <></>}
+            </div>
+        </LibraryLayout>
+    );
+};
+
+export default CustomizationPage;
diff --git a/src/renderer/library/components/layout/LibraryHeader.tsx b/src/renderer/library/components/layout/LibraryHeader.tsx
index 9d617a0666..b5f5e9fe63 100644
--- a/src/renderer/library/components/layout/LibraryHeader.tsx
+++ b/src/renderer/library/components/layout/LibraryHeader.tsx
@@ -9,11 +9,9 @@ import { ipcRenderer } from "electron";
 
 import * as stylesHeader from "readium-desktop/renderer/assets/styles/header.scss";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.scss";
-import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.scss";
 import { useDispatch } from "readium-desktop/renderer/common/hooks/useDispatch";
 import { screenReaderActions, toastActions } from "readium-desktop/common/redux/actions";
 import { ToastType } from "readium-desktop/common/models/toast";
-import * as Dialog from "@radix-ui/react-dialog";
 
 import { Link } from "react-router-dom";
 import classNames from "classnames";
@@ -30,13 +28,15 @@ import SVG from "readium-desktop/renderer/common/components/SVG";
 import { Settings } from "../settings/Settings";
 import { _APP_NAME } from "readium-desktop/preprocessor-directives";
 import { buildOpdsBrowserRoute } from "../../opds/route";
+import {
+    buildProfileCatalogRootIdentifier,
+    buildProfileRoute,
+    getLocalizedProfileScreenLinks,
+} from "../../customization/route";
 import { encodeURIComponent_RFC3986 } from "@r2-utils-js/_utils/http/UrlUtils";
 import { URL_PROTOCOL_THORIUMHTTPS, URL_HOST_COMMON, URL_PATH_PREFIX_CUSTOMPROFILEZIP } from "readium-desktop/common/streamerProtocol";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import DOMPurify from "dompurify";
 import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
 import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
-import { IStringMap } from "@r2-shared-js/models/metadata-multilang";
 import { convertMultiLangStringToString } from "readium-desktop/common/language-string";
 // import { WizardModal } from "../Wizard";
 
@@ -44,6 +44,8 @@ export interface NavigationHeader {
     route: string;
     label: string;
     matchRoutes: string[];
+    exactMatch?: boolean;
+    replace?: boolean;
     searchEnable?: boolean;
     styles: string[];
     svg: any;
@@ -91,7 +93,7 @@ const Header = () => {
                 <Link
                     to={nextLocation}
                     state={{ displayType: resolveDisplayType(nextLocation.state, savedDisplayTypeSetting) }}
-                    replace={true}
+                    replace={item.replace ?? true}
                     aria-pressed={active}
                     role={"button"}
                     className={classNames(active ? stylesButtons.button_nav_primary : "", !active ? "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE" : "")}
@@ -164,18 +166,10 @@ const Header = () => {
     const logoObj = customizationManifest?.images?.find((ln) => ln?.rel === "logo");
     const customizationBaseUrl = customizationEnable ? `${URL_PROTOCOL_THORIUMHTTPS}://${URL_HOST_COMMON}/${URL_PATH_PREFIX_CUSTOMPROFILEZIP}/${encodeURIComponent_RFC3986(Buffer.from(customizationId).toString("base64"))}/` : "";
 
-    const screenZipLinks = React.useMemo(() => {
-        let a = customizationManifest?.links?.filter((ln) => ln.rel === "screen" && (!ln.type || ln.type === "text/html") && ln.language === locale);
-        if (!a) {
-            a = customizationManifest?.links?.filter((ln) => ln.rel === "screen" && (!ln.type || ln.type === "text/html") && (ln.language === "en" || !ln.language));
-        }
-        return a;
-    }, [customizationManifest, locale]);
-    const screenZipObj = React.useMemo(() => screenZipLinks?.map(({ href, title }) => href && customizationBaseUrl ? {url: customizationBaseUrl + encodeURIComponent_RFC3986(Buffer.from(href).toString("base64")), title } : undefined), [screenZipLinks, customizationBaseUrl]);
-
-    const [screenHtmlArray, setScreenHtmlArray] = React.useState<Array<{ dangerousInnerHTML_CustomProfileScreenSanitized: string, title: string | IStringMap }>>([]);
-    const [cancel, setCancel] = React.useState(false);
-
+    const screenZipLinks = React.useMemo(
+        () => getLocalizedProfileScreenLinks(customizationManifest, locale),
+        [customizationManifest, locale],
+    );
 
     const screenReaderActivate = useSelector((state: ILibraryRootState) => state.screenReader.activate);
 
@@ -215,64 +209,13 @@ const Header = () => {
         };
     }, [isAccessibilitySupportEnabled]);
 
-    React.useEffect(() => {
-        if (customizationId && screenZipObj?.length) {
-
-            setScreenHtmlArray([]);
-            setCancel(false);
-
-            for (const screenHref of screenZipObj) {
-
-                // URL is thoriumhttps:// "custom-profile-zip" protocol handler, so no use of isURL(url) and /^https?:\/\//.test(url) checks here
-                fetch(screenHref.url)
-                    .then((response) => {
-                        if (response.ok) {
-                            return response.text();
-                        }
-                        return Promise.reject(response.statusText);
-                    })
-                    .then((rawHtmlContent) => {
-                        // console.log("RAW HTML", rawHtmlContent);
-
-                        if (cancel) {
-                            return ;
-                        }
-
-                        if (!rawHtmlContent) {
-                            return ;
-                        }
-
-                        const htmlSanitized = DOMPurify.sanitize(rawHtmlContent, { FORBID_TAGS: [/*"style"*/], FORBID_ATTR: [/*"style"*/] /* TODO: handle external https links */ });
-                        // console.log(rawHtmlContent, htmlSanitized);
-                        // NOTE that <a href="yyy">xxx</a> is fine, caught by webContents.on("will-navigate", ...) with event.preventDefault() and shell.openExternal(...) on normalized/escaped URL and filtered on HTTP(S)://
-                        // NOTE that the attribute target="_blank" (etc) is automatically removed by DOMPurify but would be caught by webContents.setWindowOpenHandler(...) with { action: "deny" }, although no shell.openExternal(...) in this case
-                        setScreenHtmlArray((screenHtmlArray) => [...screenHtmlArray, { dangerousInnerHTML_CustomProfileScreenSanitized: htmlSanitized, title: screenHref.title }]);
-                    })
-                    .catch((e) => {
-                        console.error("Error fetching data:", e);
-                    });
-            }
-        } else {
-            setScreenHtmlArray([]);
-            setCancel(true);
-        }
-
-    }, [screenZipObj, customizationId, setScreenHtmlArray, cancel, setCancel]);
-
-
     const customizationCatalogs = customizationManifest?.links?.filter(({ rel }) => rel === "catalog");
     if (customizationCatalogs?.length) {
         for (const catalog of customizationCatalogs) {
-            let catalogOrigin = "";
-            try {
-                const { host } = new URL(catalog.href);
-                if (host) {
-                    catalogOrigin = host;
-                }
-            } catch {
-                // ignore
+            const hostEncoded = buildProfileCatalogRootIdentifier(catalog.href);
+            if (!hostEncoded) {
+                continue;
             }
-            const hostEncoded = Buffer.from(encodeURIComponent(catalogOrigin), "utf8").toString("base64");
             const label = convertMultiLangStringToString(catalog?.title, locale) || __("header.myCatalogs");
             headerNav.push({
                 route: buildOpdsBrowserRoute(hostEncoded, label, catalog.href),
@@ -285,6 +228,27 @@ const Header = () => {
             });
         }
     }
+
+    if (screenZipLinks?.length) {
+        for (const screenLink of screenZipLinks) {
+            if (!screenLink.href) {
+                continue;
+            }
+            const route = buildProfileRoute(screenLink.href);
+            const label = convertMultiLangStringToString(screenLink.title, locale) || __("catalog.customization.fallback.screen");
+            headerNav.push({
+                route,
+                label,
+                matchRoutes: [route],
+                exactMatch: true,
+                replace: false,
+                searchEnable: false,
+                styles: [],
+                svg: InfoIcon,
+            });
+        }
+    }
+
     const displayScreenReaderInvite = !screenReaderActivate && isAccessibilitySupportEnabled;
 
     return (<>
@@ -317,7 +281,10 @@ const Header = () => {
 
                                 const pathname = location.pathname;
 
-                                let active = false;
+                                let active = item.exactMatch && pathname === item.route;
+                                if (item.exactMatch) {
+                                    return buildNavItem(item, index, active);
+                                }
                                 const itemsFound = array.filter(({ matchRoutes }) => !!matchRoutes.find((route) => route.split("/")[1] === pathname.split("/")[1]));
                                 // console.log("ITEMS FOUND=", itemsFound);
                                 if (!itemsFound) {
@@ -347,43 +314,6 @@ const Header = () => {
                             },
                         )
                     }
-                {
-                    screenHtmlArray.length ? screenHtmlArray.map(({dangerousInnerHTML_CustomProfileScreenSanitized, title: titleStringOrObject}, index) => {
-
-                        const title = convertMultiLangStringToString(titleStringOrObject, locale);
-
-                        return <>
-                            <li className={classNames("R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")} key={`customization-screen-${index}`} style={{ height: "inherit" }}>
-                                <Dialog.Root>
-                                    <Dialog.Trigger asChild>
-                                        <button title={title || __("catalog.customization.fallback.screen")} className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE">
-                                            <SVG ariaHidden svg={InfoIcon} />
-                                            <h3>{title || __("catalog.customization.fallback.screen")}</h3>
-                                        </button>
-                                    </Dialog.Trigger>
-                                    <Dialog.Portal>
-                                        <div className={stylesModals.modal_dialog_overlay}></div>
-                                        <Dialog.Content className={classNames(stylesModals.modal_dialog)} aria-describedby={undefined}>
-                                            {
-                                                // FALSE this to test sourcemaps:
-                                                true &&
-                                                <VisuallyHidden.Root>
-                                                    <Dialog.Title>{title || __("catalog.customization.fallback.screen")}</Dialog.Title>
-                                                </VisuallyHidden.Root>
-                                            }
-
-                                            {
-                                                dangerousInnerHTML_CustomProfileScreenSanitized ?
-                                                    <div className={stylesModals.modal_dialog_body} dangerouslySetInnerHTML={{ __html: dangerousInnerHTML_CustomProfileScreenSanitized }} /> : <></>
-                                            }
-
-                                        </Dialog.Content>
-                                    </Dialog.Portal>
-                                </Dialog.Root>
-                            </li>
-                        </>;
-                    }) : <></>
-                }
                 </div>
                 <li /* style={{position: "absolute", bottom: "10px" }} */>
                     <Settings />
diff --git a/src/renderer/library/customization/route.ts b/src/renderer/library/customization/route.ts
new file mode 100644
index 0000000000..6f3b45d301
--- /dev/null
+++ b/src/renderer/library/customization/route.ts
@@ -0,0 +1,91 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { encodeB64, decodeB64 } from "../../common/logics/base64";
+import {
+    ICustomizationLink,
+    ICustomizationManifest,
+    ICustomizationManifestLinkPropertiesExtension,
+} from "readium-desktop/common/readium/customization/manifest";
+
+export type TProfileScreenLink = ICustomizationLink & {
+    properties: ICustomizationManifestLinkPropertiesExtension;
+};
+
+/**
+ * formating customization screen route to react-router route
+ * @param href href of the customization "screen" link (manifest.json)
+ */
+export function buildProfileRoute(href: string) {
+    return `/profile/${encodeB64(href)}`;
+}
+
+export function decodeProfileRouteParam(hrefEncoded: string): string | undefined {
+    try {
+        return decodeB64(hrefEncoded);
+    } catch {
+        return undefined;
+    }
+}
+
+export function getLocalizedProfileScreenLinks(
+    manifest: ICustomizationManifest | undefined,
+    locale: string,
+): TProfileScreenLink[] {
+    const screenLinks = manifest?.links?.filter(
+        (link): link is TProfileScreenLink =>
+            link.rel === "screen" &&
+            !!link.href &&
+            (!link.type || link.type === "text/html"),
+    ) || [];
+
+    const localizedLinks = screenLinks.filter((link) => link.language === locale);
+    if (localizedLinks.length) {
+        return localizedLinks;
+    }
+
+    return screenLinks.filter((link) => link.language === "en" || !link.language);
+}
+
+export function resolveProfileScreenLink(
+    manifest: ICustomizationManifest | undefined,
+    locale: string,
+    screenId: string,
+): TProfileScreenLink | undefined {
+    const href = decodeProfileRouteParam(screenId);
+    if (!href) {
+        return undefined;
+    }
+
+    return getLocalizedProfileScreenLinks(manifest, locale).find((link) => link.href === href);
+}
+
+export function buildProfileCatalogRootIdentifier(href: string): string | undefined {
+    try {
+        const { host } = new URL(href);
+        return host
+            ? Buffer.from(encodeURIComponent(host), "utf8").toString("base64")
+            : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+export function isProfileCatalogPathname(
+    pathname: string,
+    manifest: ICustomizationManifest | undefined,
+): boolean {
+    const routeRootIdentifier = pathname.match(/^\/opds\/([^/]+)\/browse\//)?.[1];
+    if (!routeRootIdentifier) {
+        return false;
+    }
+
+    return manifest?.links?.some((link) =>
+        link.rel === "catalog" &&
+        buildProfileCatalogRootIdentifier(link.href) === routeRootIdentifier,
+    ) || false;
+}
diff --git a/src/renderer/library/customization/selectorCssParser.ts b/src/renderer/library/customization/selectorCssParser.ts
new file mode 100644
index 0000000000..03efe9da01
--- /dev/null
+++ b/src/renderer/library/customization/selectorCssParser.ts
@@ -0,0 +1,89 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { AstRule, createParser } from "css-selector-parser";
+
+const PROFILE_SCREEN_SCOPE_CLASS = "custom-profile-screen";
+const parseSelector = createParser({
+    strict: true,
+    syntax: "latest",
+});
+
+const isThemeAncestor = (rule: AstRule): boolean => {
+    const [body, theme] = rule.items;
+    return (
+        rule.items.length === 2 &&
+        body.type === "TagName" &&
+        body.name === "body" &&
+        !body.namespace &&
+        theme.type === "Attribute" &&
+        theme.name === "data-theme" &&
+        !theme.namespace &&
+        !theme.caseSensitivityModifier &&
+        (!theme.operator || (theme.operator === "=" && theme.value?.type === "String"))
+    );
+};
+
+/**
+ * Verifies that one selector from the comma-separated selector list targets
+ * the profile root or something contained by it.
+ *
+ * `css-selector-parser` represents a selector from left to right as linked
+ * `AstRule` nodes. The next compound is stored in `nestedRule`, and the
+ * relationship to it is stored on that nested node. For example:
+ *
+ * `.custom-profile-screen > section`
+ *     profile rule -> nested section rule with `combinator: ">"`
+ *
+ * Descendant whitespace is represented by an undefined combinator. This is
+ * different from an absent `nestedRule`: both have an undefined combinator,
+ * but the former targets a descendant and the latter targets the root itself.
+ */
+const targetsProfileScreen = (rule: AstRule): boolean => {
+    let profileRoot: AstRule | undefined = rule;
+
+    if (isThemeAncestor(rule)) {
+        // `body[data-theme]` is only a permitted ancestor qualifier. Require
+        // an actual following profile-root compound connected by descendant
+        // whitespace; explicit child or sibling relationships are rejected.
+        profileRoot = rule.nestedRule;
+        if (!profileRoot || profileRoot.combinator !== undefined) {
+            return false;
+        }
+    } else if (rule.combinator !== undefined) {
+        // The first rule in a parsed selector should not itself have a
+        // combinator. Fail closed if the AST does not have that shape.
+        return false;
+    }
+
+    // The profile class must be the first condition in its compound. This
+    // rejects ancestors, universal selectors, and lookalike class names.
+    const firstItem = profileRoot.items[0];
+    if (firstItem?.type !== "ClassName" || firstItem.name !== PROFILE_SCREEN_SCOPE_CLASS) {
+        return false;
+    }
+
+    // With no nested rule, the selector targets the profile root itself.
+    if (!profileRoot.nestedRule) {
+        return true;
+    }
+
+    // The first relationship after the root may enter its subtree using
+    // descendant whitespace (undefined in this AST) or a child combinator.
+    // Sibling and column combinators could escape the root and are rejected.
+    const combinator = profileRoot.nestedRule.combinator;
+    return combinator === undefined || combinator === ">";
+};
+
+export const profileSelectorListTargetsProfileScreen = (selectorText: string): boolean => {
+    try {
+        const selector = parseSelector(selectorText);
+        return selector.rules.length > 0 && selector.rules.every(targetsProfileScreen);
+    } catch {
+        return false;
+    }
+};
diff --git a/src/renderer/library/customization/style.ts b/src/renderer/library/customization/style.ts
new file mode 100644
index 0000000000..5d78a7be58
--- /dev/null
+++ b/src/renderer/library/customization/style.ts
@@ -0,0 +1,57 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { profileSelectorListTargetsProfileScreen } from "./selectorCssParser";
+
+export type TProfileCssParser = (cssText: string) => CSSRuleList;
+
+// Walk every parsed CSS rule, including rules nested in @media, @supports, or
+// similar grouping rules. Each style selector must explicitly target the
+// stable profile container. Keyframes are rejected because their names belong
+// to the document-wide CSS namespace and could override a Thorium animation.
+const profileCssRulesAreScoped = (rules: CSSRuleList): boolean =>
+    Array.from(rules).every((rule) => {
+        if ("selectorText" in rule && typeof rule.selectorText === "string") {
+            return profileSelectorListTargetsProfileScreen(rule.selectorText);
+        }
+        if ("cssRules" in rule && rule.cssRules) {
+            return profileCssRulesAreScoped(rule.cssRules as CSSRuleList);
+        }
+        return false;
+    });
+
+const parseProfileCss = (cssText: string): CSSRuleList => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(cssText);
+    return sheet.cssRules;
+};
+
+export const profileCssIsSafeAndScoped = (
+    cssText: string,
+    parseCss: TProfileCssParser = parseProfileCss,
+): boolean => {
+    // DOMPurify sanitizes markup and element attributes, but it does not
+    // provide stylesheet isolation. Block CSS that can load another
+    // stylesheet or font, plus legacy executable URL forms, before parsing.
+    if (
+        /@(?:font-face|import)\b/i.test(cssText) ||
+        /expression\s*\(/i.test(cssText) ||
+        /url\s*\(\s*["']?\s*javascript:/i.test(cssText)
+    ) {
+        return false;
+    }
+
+    try {
+        // Let Chromium's CSS parser interpret the stylesheet instead of using
+        // regular expressions for complete CSS syntax. Invalid stylesheets or
+        // selectors that escape the profile root cause the document to be
+        // rejected rather than risking changes to Thorium's Library UI.
+        return profileCssRulesAreScoped(parseCss(cssText));
+    } catch {
+        return false;
+    }
+};
diff --git a/src/renderer/library/redux/sagas/customization.ts b/src/renderer/library/redux/sagas/customization.ts
index a9ddd2c40c..6da87bac72 100644
--- a/src/renderer/library/redux/sagas/customization.ts
+++ b/src/renderer/library/redux/sagas/customization.ts
@@ -18,6 +18,7 @@ import { encodeURIComponent_RFC3986 } from "@r2-utils-js/_utils/http/UrlUtils";
 import { URL_PROTOCOL_THORIUMHTTPS, URL_HOST_COMMON, URL_PATH_PREFIX_CUSTOMPROFILEZIP } from "readium-desktop/common/streamerProtocol";
 import { ICustomizationManifest, ICustomizationManifestColor } from "readium-desktop/common/readium/customization/manifest";
 import { contentTypeisOpdsAuth, parseContentType } from "readium-desktop/utils/contentType";
+import { logEvent } from "readium-desktop/renderer/common/analytics";
 
 
 // Logger
@@ -140,6 +141,7 @@ function* profileActivating(id: string): SagaGenerator<void> {
     }
 
     yield* putTyped(customizationActions.addHistory.build(id, (new Date(manifestJson.modified || manifestJson.created)).getTime()));
+    yield* callTyped(logEvent, "profile_activate");
 }
 
 
diff --git a/src/renderer/library/redux/sagas/history.ts b/src/renderer/library/redux/sagas/history.ts
index b95399c761..342336114f 100644
--- a/src/renderer/library/redux/sagas/history.ts
+++ b/src/renderer/library/redux/sagas/history.ts
@@ -8,13 +8,12 @@
 import { goBack, push } from "redux-first-history";
 import { Location } from "history";
 import debug_ from "debug";
-import { authActions, historyActions } from "readium-desktop/common/redux/actions";
+import { authActions, customizationActions, historyActions } from "readium-desktop/common/redux/actions";
 import { takeSpawnEvery } from "readium-desktop/common/redux/sagas/takeSpawnEvery";
 import { logEvent } from "readium-desktop/renderer/common/analytics";
 import {
     buildLibraryPageViewParams,
-    libraryPageTitleFromPathname,
-    TLibraryPageTitle,
+    libraryPageViewFromPathname,
 } from "readium-desktop/renderer/library/analytics/pageView";
 import { routerActions, winActions } from "readium-desktop/renderer/library/redux/actions";
 // eslint-disable-next-line local-rules/typed-redux-saga-use-typed-effects
@@ -26,24 +25,34 @@ import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/
 
 const debug = debug_("readium-desktop:renderer:redux:saga:history");
 
-let lastPageViewTitle: TLibraryPageTitle | undefined;
+let lastPageViewRouteKey: string | undefined;
 
 function* sendPageView(location: Location) {
-    const pageTitle = libraryPageTitleFromPathname(location.pathname);
+    const customization = yield* selectTyped((state: ILibraryRootState) => state.customization);
+    if (
+        location.pathname.startsWith("/opds/") &&
+        customization.activate.id &&
+        !customization.manifest
+    ) {
+        debug("GA4 page_view deferred until the active profile manifest is loaded", location.pathname);
+        return;
+    }
+
+    const pageView = libraryPageViewFromPathname(location.pathname, customization.manifest);
 
-    if (!pageTitle) {
+    if (!pageView) {
         debug("GA4 page_view skipped for untracked Library route", location.pathname);
-        lastPageViewTitle = undefined;
+        lastPageViewRouteKey = undefined;
         return;
     }
 
-    if (pageTitle === lastPageViewTitle) {
-        debug("GA4 page_view skipped for duplicate Library screen", pageTitle, location.pathname);
+    if (pageView.routeKey === lastPageViewRouteKey) {
+        debug("GA4 page_view skipped for duplicate Library screen", pageView.pageTitle, location.pathname);
         return;
     }
 
-    lastPageViewTitle = pageTitle;
-    const params = buildLibraryPageViewParams(pageTitle);
+    lastPageViewRouteKey = pageView.routeKey;
+    const params = buildLibraryPageViewParams(pageView.pageTitle);
     debug("GA4 page_view sent for Library route", location.pathname, params);
     yield call(logEvent, "page_view", params);
 }
@@ -55,6 +64,13 @@ function* sendInitialPageView() {
     }
 }
 
+function* customizationManifestChanged() {
+    const location = yield* selectTyped((state: ILibraryRootState) => state?.router?.location);
+    if (location) {
+        yield* sendPageView(location);
+    }
+}
+
 function* historyWatcher(action: routerActions.locationChanged.TAction) {
     yield* sendPageView(action.payload.location);
     yield put(winActions.history.build(action.payload.location));
@@ -101,6 +117,10 @@ export function saga() {
                 routerActions.locationChanged.ID,
                 historyWatcher,
             ),
+            takeSpawnEvery(
+                customizationActions.manifest.ID,
+                customizationManifestChanged,
+            ),
             takeSpawnEvery(
                 historyActions.refresh.ID,
                 historyRefresh,
diff --git a/src/renderer/library/routing.ts b/src/renderer/library/routing.ts
index 746b89de1d..141e63ef82 100644
--- a/src/renderer/library/routing.ts
+++ b/src/renderer/library/routing.ts
@@ -13,6 +13,7 @@ import Catalog from "./components/catalog/Catalog";
 import Browser from "./components/opds/Browser";
 import Opds from "./components/opds/Opds";
 import AllPublicationPage from "./components/searchResult/AllPublicationPage";
+import CustomizationPage from "./components/customization/Customization";
 // import TagSearchResult from "./components/searchResult/TagSearchResult";
 // import TextSearchResult from "./components/searchResult/TextSearchResult";
 
@@ -103,6 +104,11 @@ const _routes = {
         // exact: true,
         component: Catalog,
     } as Route,
+    "/profile": {
+        path: "/profile/:screenId",
+        // exact: true,
+        component: CustomizationPage,
+    } as Route,
     "/": {
         path: "/",
         // exact: false,
diff --git a/test/renderer/library/analytics/pageView.test.ts b/test/renderer/library/analytics/pageView.test.ts
new file mode 100644
index 0000000000..76812be8aa
--- /dev/null
+++ b/test/renderer/library/analytics/pageView.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "@jest/globals";
+import { ICustomizationManifest } from "readium-desktop/common/readium/customization/manifest";
+import {
+    buildLibraryPageViewParams,
+    libraryPageViewFromPathname,
+} from "readium-desktop/renderer/library/analytics/pageView";
+import { buildProfileCatalogRootIdentifier } from "readium-desktop/renderer/library/customization/route";
+
+const catalogHref = "https://example.com/catalog/root";
+const manifest = {
+    links: [{ rel: "catalog", href: catalogHref, properties: {} }],
+} as unknown as ICustomizationManifest;
+
+describe("Library page_view analytics", () => {
+    it("uses a generic Profile Page title and a per-screen deduplication key", () => {
+        expect(libraryPageViewFromPathname("/profile/first")).toEqual({
+            pageTitle: "Profile Page",
+            routeKey: "/profile/first",
+        });
+        expect(libraryPageViewFromPathname("/profile/second")?.routeKey).not.toBe("/profile/first");
+    });
+
+    it("recognizes every route below a manifest catalog without exposing its identity", () => {
+        const rootIdentifier = buildProfileCatalogRootIdentifier(catalogHref);
+        const pathname = `/opds/${rootIdentifier}/browse/2/title/feed`;
+
+        expect(libraryPageViewFromPathname(pathname, manifest)).toEqual({
+            pageTitle: "Profile Catalog",
+            routeKey: `Profile Catalog:${rootIdentifier}`,
+        });
+        expect(buildLibraryPageViewParams("Profile Catalog")).toEqual({
+            page_title: "Profile Catalog",
+            page_location: "https://desktop.thoriumreader.com/analytics/Profile%20Catalog",
+        });
+    });
+
+    it("keeps non-profile catalogs generic", () => {
+        expect(libraryPageViewFromPathname("/opds/other/browse/1/title/feed", manifest)).toEqual({
+            pageTitle: "Catalog",
+            routeKey: "Catalog",
+        });
+    });
+});
diff --git a/test/renderer/library/customization/route.test.ts b/test/renderer/library/customization/route.test.ts
new file mode 100644
index 0000000000..7b3db902c0
--- /dev/null
+++ b/test/renderer/library/customization/route.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "@jest/globals";
+import { ICustomizationManifest } from "readium-desktop/common/readium/customization/manifest";
+import {
+    buildProfileRoute,
+    decodeProfileRouteParam,
+    getLocalizedProfileScreenLinks,
+    resolveProfileScreenLink,
+} from "readium-desktop/renderer/library/customization/route";
+
+const manifest = {
+    links: [
+        { rel: "screen", href: "./faq-en.html", type: "text/html", language: "en", properties: {} },
+        { rel: "screen", href: "./faq-fr.html", type: "text/html", language: "fr", properties: {} },
+        { rel: "screen", href: "./neutral.html", type: "text/html", properties: {} },
+        { rel: "screen", href: "./ignored.xhtml", type: "application/xhtml+xml", language: "fr", properties: {} },
+    ],
+} as unknown as ICustomizationManifest;
+
+describe("profile screen routes", () => {
+    it("builds a URL-safe /profile route and decodes it", () => {
+        const route = buildProfileRoute("./écran/faq.html?x=1");
+        const screenId = route.replace("/profile/", "");
+
+        expect(route.startsWith("/profile/")).toBe(true);
+        expect(screenId).not.toMatch(/[+/=]/);
+        expect(decodeProfileRouteParam(screenId)).toBe("./écran/faq.html?x=1");
+    });
+
+    it("does not throw for a malformed route parameter", () => {
+        expect(decodeProfileRouteParam("%%%invalid%%%")).toBeUndefined();
+    });
+
+    it("selects exact-language screens before the English and neutral fallback", () => {
+        expect(getLocalizedProfileScreenLinks(manifest, "fr").map(({ href }) => href)).toEqual(["./faq-fr.html"]);
+        expect(getLocalizedProfileScreenLinks(manifest, "es").map(({ href }) => href)).toEqual([
+            "./faq-en.html",
+            "./neutral.html",
+        ]);
+    });
+
+    it("only resolves a screen from the localized manifest allow-list", () => {
+        const frenchId = buildProfileRoute("./faq-fr.html").replace("/profile/", "");
+        const englishId = buildProfileRoute("./faq-en.html").replace("/profile/", "");
+
+        expect(resolveProfileScreenLink(manifest, "fr", frenchId)?.href).toBe("./faq-fr.html");
+        expect(resolveProfileScreenLink(manifest, "fr", englishId)).toBeUndefined();
+    });
+});
diff --git a/test/renderer/library/customization/style.test.ts b/test/renderer/library/customization/style.test.ts
new file mode 100644
index 0000000000..ce7c1e5ed4
--- /dev/null
+++ b/test/renderer/library/customization/style.test.ts
@@ -0,0 +1,197 @@
+import { describe, expect, it } from "@jest/globals";
+import { JSDOM } from "jsdom";
+
+import { profileSelectorListTargetsProfileScreen } from "readium-desktop/renderer/library/customization/selectorCssParser";
+import {
+    profileCssIsSafeAndScoped,
+    TProfileCssParser,
+} from "readium-desktop/renderer/library/customization/style";
+
+const parseCssWithJSDOM: TProfileCssParser = (cssText) => {
+    const dom = new JSDOM("<!doctype html><html><head></head><body></body></html>");
+    const style = dom.window.document.createElement("style");
+    style.textContent = cssText;
+    dom.window.document.head.appendChild(style);
+
+    if (!style.sheet) {
+        throw new Error("CSS parsing failed");
+    }
+
+    return style.sheet.cssRules as unknown as CSSRuleList;
+};
+
+const isSafe = (cssText: string) => profileCssIsSafeAndScoped(cssText, parseCssWithJSDOM);
+
+describe("profile screen style enforcement", () => {
+    it("accepts rules rooted at the profile container", () => {
+        expect(
+            isSafe(`
+            .custom-profile-screen { color: black; }
+            .custom-profile-screen > section .card:hover { background: white; }
+        `),
+        ).toBe(true);
+    });
+
+    it("accepts complex selector lists without splitting nested commas", () => {
+        expect(
+            isSafe(`
+            .custom-profile-screen:is(.compact, .wide),
+            .custom-profile-screen [data-label="first,second"] {
+                color: black;
+            }
+        `),
+        ).toBe(true);
+    });
+
+    it("accepts theme-qualified rules", () => {
+        expect(
+            isSafe(`
+            body[data-theme] .custom-profile-screen .default-card,
+            body[data-theme="dark"] .custom-profile-screen,
+            body[data-theme = "sepia"] .custom-profile-screen .card,
+            body[data-theme="light"] .custom-profile-screen .card {
+                color: black;
+            }
+        `),
+        ).toBe(true);
+    });
+
+    it("rejects ancestors other than the supported theme condition", () => {
+        expect(isSafe("body .custom-profile-screen { color: red; }")).toBe(false);
+        expect(isSafe("body[data-other] .custom-profile-screen { color: red; }")).toBe(false);
+        expect(isSafe("html body[data-theme] .custom-profile-screen { color: red; }")).toBe(false);
+    });
+
+    it("accepts compound conditions on the profile root", () => {
+        expect(isSafe(".custom-profile-screen.compact:hover { color: black; }")).toBe(true);
+        expect(isSafe(".custom-profile-screen[data-layout='grid']::before { content: ''; }")).toBe(true);
+    });
+
+    it("accepts an escaped spelling of the profile root", () => {
+        expect(isSafe(".custom-profile-\\73 creen { color: black; }")).toBe(true);
+    });
+
+    it("recursively validates rules inside grouping at-rules", () => {
+        expect(
+            isSafe(`
+            @media (min-width: 400px) {
+                @supports (display: grid) {
+                    .custom-profile-screen .grid { display: grid; }
+                }
+            }
+        `),
+        ).toBe(true);
+
+        expect(
+            isSafe(`
+            @media (min-width: 400px) {
+                .custom-profile-screen .grid { display: grid; }
+                body { display: none; }
+            }
+        `),
+        ).toBe(false);
+    });
+
+    it("rejects keyframes because animation names are document-global", () => {
+        expect(
+            isSafe(`
+            @keyframes profile-fade-in {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+            .custom-profile-screen .card { animation: profile-fade-in 200ms; }
+        `),
+        ).toBe(false);
+    });
+
+    it("rejects unscoped and partially scoped selector lists", () => {
+        expect(isSafe("body { color: red; }")).toBe(false);
+        expect(isSafe(":root { color: red; }")).toBe(false);
+        expect(isSafe(".custom-profile-screen, body { color: red; }")).toBe(false);
+        expect(isSafe(".custom-profile-screen .card, .outside { color: red; }")).toBe(false);
+    });
+
+    it("rejects selectors that merely contain or resemble the scope", () => {
+        expect(isSafe(":is(.custom-profile-screen, body) { color: red; }")).toBe(false);
+        expect(isSafe(".custom-profile-screen-other { color: red; }")).toBe(false);
+        expect(isSafe("body:has(.custom-profile-screen) { color: red; }")).toBe(false);
+    });
+
+    it("rejects sibling combinators that escape the profile container", () => {
+        expect(isSafe(".custom-profile-screen + .thorium-content { display: none; }")).toBe(false);
+        expect(isSafe(".custom-profile-screen ~ .thorium-content { display: none; }")).toBe(false);
+        expect(isSafe(".custom-profile-screen.compact + .thorium-content { display: none; }")).toBe(false);
+
+        expect(isSafe(".custom-profile-screen .card + .card { margin-block-start: 1rem; }")).toBe(true);
+    });
+
+    it("rejects external stylesheets, font declarations, and executable CSS values", () => {
+        expect(isSafe("@import url(https://example.com/profile.css);")).toBe(false);
+        expect(isSafe("@font-face { font-family: Profile; src: url(profile.woff2); }")).toBe(false);
+        expect(isSafe(".custom-profile-screen { background: url(javascript:alert(1)); }")).toBe(false);
+        expect(isSafe(".custom-profile-screen { width: expression(alert(1)); }")).toBe(false);
+    });
+
+    it("rejects unsupported global at-rules", () => {
+        expect(isSafe("@page { margin: 0; }")).toBe(false);
+    });
+
+    it("fails closed when CSS parsing fails", () => {
+        const failingParser: TProfileCssParser = () => {
+            throw new Error("Invalid CSS");
+        };
+
+        expect(profileCssIsSafeAndScoped(".custom-profile-screen {}", failingParser)).toBe(false);
+    });
+});
+
+describe("profile selector policy", () => {
+    const selectorCases: Array<[selector: string, expected: boolean]> = [
+        [".custom-profile-screen", true],
+        [".custom-profile-\\73 creen", true],
+        [".custom-profile-screen.compact:hover", true],
+        [".custom-profile-screen[data-label='a>b,+~']", true],
+        [".custom-profile-screen:is(.compact, .wide)", true],
+        [".custom-profile-screen:has(> .card)", true],
+        [".custom-profile-screen::part(content)", true],
+        [".custom-profile-screen > section .card", true],
+        [".custom-profile-screen .card + .card", true],
+        [".custom-profile-screen .card ~ .card", true],
+        ["body[data-theme] .custom-profile-screen", true],
+        ["body[data-theme='dark'] .custom-profile-screen .card", true],
+        ["body[data-theme=light] .custom-profile-screen.compact > .card", true],
+        [".custom-profile-screen, .custom-profile-screen .card", true],
+        ["", false],
+        ["body", false],
+        [".other", false],
+        ["body .custom-profile-screen", false],
+        ["html body[data-theme] .custom-profile-screen", false],
+        ["BODY[data-theme] .custom-profile-screen", false],
+        ["body[data-other] .custom-profile-screen", false],
+        ["body[data-theme^='dark'] .custom-profile-screen", false],
+        ["body[data-theme='dark' i] .custom-profile-screen", false],
+        ["body[data-theme].compact .custom-profile-screen", false],
+        ["*|body[data-theme] .custom-profile-screen", false],
+        ["body[*|data-theme] .custom-profile-screen", false],
+        ["body[data-theme] > .custom-profile-screen", false],
+        ["body[data-theme] + .custom-profile-screen", false],
+        [".custom-profile-screen-other", false],
+        [".custom-profile-\\73 creen-other", false],
+        ["*.custom-profile-screen", false],
+        ["#profile.custom-profile-screen", false],
+        [".custom-profile-screen + .thorium-content", false],
+        [".custom-profile-screen ~ .thorium-content", false],
+        [".custom-profile-screen || td", false],
+        [".custom-profile-screen, body", false],
+        [".custom-profile-screen .card, .outside", false],
+        [":is(.custom-profile-screen, body)", false],
+        [":where(.custom-profile-screen)", false],
+        ["& .custom-profile-screen", false],
+        [".custom-profile-screen >", false],
+        [".custom-profile-screen[", false],
+    ];
+
+    it.each(selectorCases)("validates %s as %s", (selector, expected) => {
+        expect(profileSelectorListTargetsProfileScreen(selector)).toBe(expected);
+    });
+});