diff --git a/README.md b/README.md
index 757a75c0..9b73efb4 100644
--- a/README.md
+++ b/README.md
@@ -131,6 +131,23 @@ Convert your own TTF/OTF files into `.cpfont` files that load from the SD card.
 
 Conversion runs the firmware repo's `lib/EpdFont/scripts/fontconvert_sdcard.py` script unmodified, so output matches a local host build.
 
+## Custom SD-card themes
+
+Downloadable themes are packaged in the tools repo under `../crosspoint-tools/public/themes/<theme-id>/`. Each theme folder must contain a `theme.json`; optional assets such as generated BMP icons live beside it, usually under `icons/`.
+
+See [SD-card theme creation](./docs/theme-creation.md) for the full JSON format, device-specific overrides, icon generation, CrossInk extension fields, and packaging rules.
+
+After adding or changing a hosted theme, regenerate the download manifest:
+
+```bash
+python3 scripts/generate-theme-manifest.py \
+  --root ../crosspoint-tools/public/themes \
+  --base-url http://crosspointreader.com/themes \
+  --output ../crosspoint-tools/public/themes/themes.json
+```
+
+The script scans every theme folder, includes every file in each package, and writes size and CRC32 values used by the device downloader. Commit changed theme package files and the regenerated `themes.json` in `crosspoint-tools`.
+
 ---
 
 ## Documentation
@@ -138,6 +155,7 @@ Conversion runs the firmware repo's `lib/EpdFont/scripts/fontconvert_sdcard.py`
 - [User Guide](./USER_GUIDE.md)
 - [Web server usage](./docs/webserver.md)
 - [Web server endpoints](./docs/webserver-endpoints.md)
+- [SD-card theme creation](./docs/theme-creation.md)
 - [Project scope](./SCOPE.md)
 - [Contributing docs](./docs/contributing/README.md)
 
diff --git a/docs/theme-creation.md b/docs/theme-creation.md
new file mode 100644
index 00000000..2ed064b9
--- /dev/null
+++ b/docs/theme-creation.md
@@ -0,0 +1,881 @@
+# SD-card theme creation
+
+CrossPoint ships one built-in base theme, Lyra. Additional themes live on the SD card and are selected from Settings. A downloaded theme is just a folder containing a `theme.json` and optional assets such as 1-bit BMP icons.
+
+CrossPoint ignores unknown JSON fields. Other readers, such as CrossInk, can add their own fields under a namespaced object like `extensions.crossink` without breaking CrossPoint.
+
+## Folder layout
+
+Manual install paths:
+
+```text
+/.themes/<theme-id>/theme.json   # hidden folder used by the downloader
+/themes/<theme-id>/theme.json    # visible folder for manual installs
+```
+
+Hosted theme packages live in the tools repo under:
+
+```text
+../crosspoint-tools/public/themes/<theme-id>/theme.json
+../crosspoint-tools/public/themes/<theme-id>/icons/*.bmp
+```
+
+Theme ids must be path-safe: letters, numbers, `-`, and `_` only. Spaces are not accepted because ids are used in folder names, URLs, and settings.
+
+## Minimal theme
+
+```json
+{
+  "schema": 1,
+  "id": "my-theme",
+  "name": "My Theme",
+  "description": "Short user-facing description shown in the downloader.",
+  "inherits": "lyra",
+  "metrics": {
+    "homeTopPadding": 48,
+    "menuRowHeight": 42
+  },
+  "components": {
+    "homeMenu": {
+      "font": "medium",
+      "style": "regular",
+      "centeredText": true,
+      "selectionStyle": "underline",
+      "showIcons": false
+    }
+  },
+  "devices": {
+    "x3": {
+      "constraints": {
+        "screenWidth": 480,
+        "screenHeight": 800,
+        "frontButtons": 4,
+        "sideButtons": "up-down"
+      }
+    },
+    "x4": {
+      "constraints": {
+        "screenWidth": 480,
+        "screenHeight": 800,
+        "frontButtons": 0,
+        "sideButtons": "up-down"
+      }
+    }
+  }
+}
+```
+
+Top-level fields:
+
+- `schema`: currently `1`.
+- `id`: stable id used for settings, folder name, and downloads.
+- `name`: display name shown in Settings and the downloader.
+- `description`: short downloader text.
+- `inherits`: `lyra` for normal SD themes. `classic` is accepted for manually installed themes that intentionally build from the Classic renderer.
+- `metrics`: layout numbers shared across screens.
+- `components`: style rules for themeable UI surfaces.
+- `assets.icons`: optional icon file map.
+- `devices`: optional per-device overrides keyed by `x3` or `x4`.
+- `requires`: optional metadata for other tooling. CrossPoint currently ignores it.
+- `extensions`: optional namespaced metadata for other firmware/apps. CrossPoint currently ignores it.
+
+## Device overrides
+
+The active device id is `x3` or `x4`. Any supported field under `devices.<device-id>` overrides the top-level value:
+
+```json
+{
+  "metrics": {
+    "homeCoverHeight": 300
+  },
+  "components": {
+    "homeRecents": {
+      "maxBooks": 3
+    }
+  },
+  "devices": {
+    "x3": {
+      "metrics": {
+        "homeCoverHeight": 280
+      },
+      "components": {
+        "homeRecents": {
+          "maxBooks": 3
+        }
+      }
+    }
+  }
+}
+```
+
+Use `constraints` to document intended screen and button assumptions for builders and compatible apps:
+
+```json
+"constraints": {
+  "screenWidth": 480,
+  "screenHeight": 800,
+  "frontButtons": 4,
+  "sideButtons": "up-down"
+}
+```
+
+CrossPoint parses these constraints but does not reject themes when they do not match.
+
+## Metrics
+
+Metrics tune global spacing and layout. Any omitted metric keeps Lyra's default.
+
+Common home/list metrics:
+
+- `topPadding`: top inset above normal page headers.
+- `headerHeight`: default header band height for non-home screens.
+- `verticalSpacing`: default vertical gap between major screen regions.
+- `contentSidePadding`: left/right inset used by default list and menu renderers.
+- `listRowHeight`: row height for single-line lists.
+- `listWithSubtitleRowHeight`: row height for two-line lists such as Recent Books.
+- `menuRowHeight`: height of one home menu tile. In `launcherGrid`, this is used by `drawButtonMenu` inside each grid cell; it is not the gap between grid cells.
+- `menuSpacing`: vertical spacing between items when rendering a plain one-column home menu. It does not affect `launcherGrid`, because each grid cell is rendered as a one-item menu.
+- `tabSpacing`: spacing between tab labels.
+- `tabBarHeight`: height of the settings tab bar.
+- `scrollBarWidth`: list scrollbar width.
+- `scrollBarRightOffset`: list scrollbar inset from the right edge.
+- `homeTopPadding`: top inset before the home cover/recent-books area in the legacy home renderer.
+- `homeCoverHeight`: cover image height used by home recents.
+- `homeCoverTileHeight`: total home recents tile/slot height, including cover title space when applicable.
+- `homeRecentBooksCount`: number of recent books to request/render on home.
+- `homeContinueReadingInMenu`: whether Continue Reading is part of the home launcher/menu actions.
+- `homeShowContinueReadingHeader`: whether the current book title can appear in the home header.
+- `homeMenuTopOffset`: legacy/manual home menu offset below the cover area. SD `screens.home.layout` themes should prefer explicit layout slots such as `carouselMenuGap`.
+- `buttonHintsHeight`: bottom button-hint band height.
+- `sideButtonHintsWidth`: side button-hint band width.
+
+Other supported metric groups:
+
+- Battery: `batteryWidth`, `batteryHeight`, `batteryBarHeight`
+- Reader progress/status: `progressBarHeight`, `progressBarMarginTop`, `statusBarHorizontalMargin`, `statusBarVerticalMargin`
+- Keyboard: `keyboardKeyWidth`, `keyboardKeyHeight`, `keyboardKeySpacing`, `keyboardBottomKeyHeight`, `keyboardBottomKeySpacing`, `keyboardBottomAligned`, `keyboardCenteredText`, `keyboardVerticalOffset`, `keyboardTextFieldWidthPercent`, `keyboardWidthPercent`, `keyboardKeyCornerRadius`, `keyboardFillUnselected`, `keyboardOutlineAllUnselected`, `keyboardDrawSpecialOutlineWhenUnselected`, `keyboardSecondaryLabelRightPadding`, `keyboardSecondaryLabelTopPadding`, `keyboardMinArrowHeadSize`
+- Popups: `popupTopOffsetRatio`, `popupMarginX`, `popupMarginY`, `popupFrameThickness`, `popupCornerRadius`, `popupTextBold`, `popupTextInverted`, `popupTextBaselineOffsetY`, `popupProgressBarHeight`, `popupProgressDrawOutline`, `popupProgressClampPercent`, `popupProgressFillInverted`, `popupProgressOutlineInverted`
+- Text fields: `textFieldHorizontalPadding`, `textFieldNormalThickness`, `textFieldCursorThickness`, `textFieldLineEndOffset`
+
+## Screen Layouts
+
+Themes can define `screens.<screen>.layout` to place UI regions with the SDK row/column layout system. This is the preferred path for new SD themes.
+
+Each layout node can contain:
+
+- `id`: slot name used by widgets or firmware renderers.
+- `axis`: `column` stacks children top-to-bottom; `row` lays children left-to-right.
+- `gap`: pixels inserted between this node's direct children.
+- `slots`: child layout nodes.
+- `fixed`: exact pixel size along the parent axis.
+- `flex`: proportional size after fixed children and gaps are subtracted.
+- `token`: named size from `metrics`, such as `menuRow`, `recents`, `buttons`, `header`, `row`, `subtitleRow`, or `gap`.
+
+Example:
+
+```json
+"screens": {
+  "home": {
+    "navigation": "linear",
+    "layout": {
+      "axis": "column",
+      "gap": 0,
+      "slots": [
+        {
+          "id": "header",
+          "fixed": 40,
+          "axis": "row",
+          "gap": 4,
+          "slots": [
+            { "id": "homeClock", "fixed": 52 },
+            { "id": "homeTitle", "flex": 1 },
+            { "id": "homeBattery", "fixed": 66 }
+          ]
+        },
+        { "id": "recents", "fixed": 340 },
+        { "id": "carouselMenuGap", "fixed": 36 },
+        { "id": "launchers", "fixed": 192 },
+        { "id": "homeSpacer", "flex": 1 },
+        { "id": "buttons", "fixed": 40 }
+      ]
+    }
+  }
+}
+```
+
+Important layout rules:
+
+- A parent layout's `gap` only affects its direct child slots.
+- `fixed` and `flex` decide how much space a slot receives. They do not decide how a widget draws inside that slot.
+- Widget-specific `gap` fields control spacing inside that widget.
+- Named spacer slots such as `carouselMenuGap` and `homeSpacer` do not draw anything unless a widget targets them. They are useful for placing visible regions without manual `x`/`y` coordinates.
+- If a screen layout is invalid or missing required slots, CrossPoint falls back to the built-in Lyra-safe layout for that screen.
+
+Home `navigation` modes:
+
+- `linear`: default. Front/side navigation buttons all move through the visible home actions as one ordered list.
+- `splitAxis`: front left/right move through launcher actions; side up/down move through recent-book actions. Bottom button hints show Left/Right.
+- `carousel`: front left/right move through recent-book actions; side up/down move through launcher actions. Use this when left/right should stay inside a cover carousel and up/down should enter or leave the launcher menu.
+
+### Layouts vs widgets
+
+Layouts only create named rectangles. They do not choose whether a screen is a list, cover grid, carousel, or any other presentation.
+
+Widgets choose what renders inside those rectangles. This keeps themes explicit and prevents firmware from guessing a grid just because a screen has a `list` slot.
+
+For `screens.recentBooks`, use:
+
+- No `recentBooks` screen: use the built-in Lyra recent-books screen.
+- `layout` only, or a `list` widget: use the normal themed recent-books list in the `list` slot.
+- A `coverGrid` widget: use FreeInkUI's cover-grid component in the target slot.
+
+Minimal themed list example:
+
+```json
+"recentBooks": {
+  "layout": {
+    "axis": "column",
+    "gap": 8,
+    "slots": [
+      { "id": "header", "fixed": 48 },
+      { "id": "list", "flex": 1 },
+      { "id": "buttons", "fixed": 40 }
+    ]
+  },
+  "widgets": [
+    { "slot": "list", "type": "list" }
+  ]
+}
+```
+
+Cover-grid screen example:
+
+```json
+"recentBooks": {
+  "layout": {
+    "axis": "column",
+    "gap": 16,
+    "slots": [
+      { "id": "header", "fixed": 48 },
+      { "id": "list", "flex": 1 },
+      { "id": "buttons", "fixed": 40 }
+    ]
+  },
+  "widgets": [
+    {
+      "slot": "list",
+      "type": "coverGrid",
+      "columns": 3,
+      "rowGap": 36,
+      "coverWidth": 92,
+      "coverHeight": 132,
+      "rowHeight": 172,
+      "labelLines": 2,
+      "selectionStyle": "coverFrame"
+    }
+  ]
+}
+```
+
+Do not use screen-level `coverGrid`. Cover-grid settings belong on a widget with `type: "coverGrid"`.
+
+### Home widgets
+
+Home layouts use `screens.home.widgets` to map slot rectangles to visible content.
+
+Supported widget types:
+
+- `clock`: draws the clock when the device has RTC support. On devices without clock support, the slot stays empty.
+- `headerTitle`: draws the normal home/header title.
+- `battery`: draws the battery indicator.
+- `recents`: draws the configured home recents component.
+- `recentCoverGrid`: draws recent books with FreeInkUI's `coverGrid` component.
+- `launcherList`: draws actions as one vertical menu inside its slot.
+- `launcherGrid`: draws actions in a row/column grid inside its slot.
+- `buttonHints`: draws bottom button hints.
+
+`launcherGrid` fields:
+
+- `slot`: slot id to render into.
+- `presentation`: optional presentation style. Use `iconTabs` for icon-only launcher tabs with outlined unselected cells and filled selected cells.
+- `columns`: number of grid columns.
+- `rows`: optional fixed row count. If omitted, rows are derived from visible launcher count and columns.
+- `gap`: pixels between grid cells, both horizontally and vertically.
+- `items`: launcher actions. Each item accepts `text`, `icon`, and `action`.
+
+All home widgets also support visual placement fields:
+
+- `layer`: draw order. Lower layers draw first; higher layers paint on top. Widgets with the same layer keep JSON order.
+- `offsetX`: moves the widget right after layout. Negative values move left.
+- `offsetY`: moves the widget down after layout. Negative values move up.
+- `bleed`: expands the widget draw rectangle outside its slot without changing layout. Use either a single number or `{ "top": 0, "right": 0, "bottom": 0, "left": 0 }`.
+- `inset`: shrinks the widget draw rectangle inside its slot without changing layout. Use either a single number or `{ "top": 0, "right": 0, "bottom": 0, "left": 0 }`.
+
+Example overlap:
+
+```json
+{
+  "slot": "recents",
+  "type": "recents",
+  "layer": 0,
+  "bleed": { "bottom": 24 }
+},
+{
+  "slot": "launchers",
+  "type": "launcherGrid",
+  "layer": 10,
+  "offsetY": -12,
+  "columns": 2,
+  "gap": 24
+}
+```
+
+That keeps the structural row/column layout intact, but lets the launcher grid visually overlap the recents area by 12 pixels.
+
+`buttonHints` widget fields:
+
+- `labels.confirm`
+- `labels.previous`
+- `labels.next`
+- `labels.back`
+
+Button-hint labels are localized semantic tokens, not literal UI strings. Supported tokens are `default`, `empty`, `back`, `home`, `select`, `confirm`, `open`, `toggle`, `up`, `down`, `left`, and `right`. `default` uses the firmware fallback for that navigation mode; `empty` renders no label for that button.
+
+Example carousel hints:
+
+```json
+{
+  "slot": "buttons",
+  "type": "buttonHints",
+  "labels": {
+    "confirm": "select",
+    "previous": "left",
+    "next": "right"
+  }
+}
+```
+
+When `components.buttonHints.layout` is `shapes` or `icons`, these same localized tokens render as button shapes/icons where supported.
+
+Example icon tabs:
+
+```json
+{
+  "slot": "tabs",
+  "type": "launcherGrid",
+  "presentation": "iconTabs",
+  "columns": 5,
+  "rows": 1,
+  "gap": 6,
+  "iconSize": 32,
+  "selectedRadius": 5,
+  "items": [
+    { "icon": "folder", "action": "activity:fileBrowser" },
+    { "icon": "recent", "action": "activity:recentBooks" },
+    { "icon": "library", "action": "activity:opds" }
+  ]
+}
+```
+
+Launcher actions:
+
+- `activity:fileBrowser`
+- `activity:recentBooks`
+- `activity:opds`
+- `activity:fileTransfer`
+- `activity:settings`
+- `activity:reader`
+
+For `launcherGrid`, the final cell height is:
+
+```text
+(slot height - gap * (rows - 1)) / rows
+```
+
+Then each cell calls the themed home menu renderer with one item. That means:
+
+- Increase the widget `gap` to create more visible space between grid items.
+- Increase the launcher slot `fixed` height if larger gaps need more total room.
+- Use `menuRowHeight` to tune the selectable tile/text/icon band inside each cell.
+- Do not expect `menuSpacing` to change `launcherGrid` spacing.
+
+For a 3-row launcher grid with `menuRowHeight: 48` and `gap: 24`, use a launcher slot near:
+
+```text
+3 * 48 + 2 * 24 = 192
+```
+
+`recentCoverGrid` / recent-books `coverGrid` widget fields:
+
+- `slot`: slot id to render into.
+- `columns`: grid columns.
+- `rows`: grid rows.
+- `gap`: horizontal pixels between cells. Also used vertically when `rowGap` is omitted.
+- `rowGap`: vertical pixels between cover-grid rows.
+- `cellInset`: optional padding inside each cover-grid cell, before the cover and label are drawn.
+- `labelInset`: optional padding inside the title label area. Use `{ "left": 5, "right": 5 }` to keep two-line titles away from cell edges.
+- `coverWidth`: rendered cover width.
+- `coverHeight`: rendered cover height and thumbnail size to generate.
+- `placeholderIconSize`: maximum icon size for the missing-cover placeholder.
+- `rowHeight`: height of each cell row, including label space.
+- `labelHeight`: title label area below each cover. Use `0` to hide titles.
+- `labelGap`: vertical pixels between the cover and title label block.
+- `labelLines`: maximum title lines to render. Increase `rowHeight` when this is greater than `1`.
+- `selectionStyle`: `fill`, `outline`, `coverFrame`, or `none`. Prefer `coverFrame` for cover grids because it frames only the thumbnail and does not depend on title wrapping.
+- `startIndex`: first recent-book index to show. Use `2` when a featured area already uses the first two books.
+
+These cover-grid widgets use FreeInkUI's `coverGrid` for layout, labels, cell styling, and selected state. CrossPoint supplies a cover painter callback so SD-card thumbnails render from the existing recent-book cache.
+
+Cover widgets can use different visual `coverWidth` and `coverHeight` values on different screens. CrossPoint still generates and reads one largest-needed thumbnail height for the active theme, then scales/crops it into each widget. That keeps the same book cover available on home and recent-books instead of requiring separate BMPs per widget.
+
+`featuredBookCard` fields:
+
+- `coverWidth`, `coverHeight`: rendered cover size and thumbnail height to generate.
+- `placeholderIconSize`: maximum icon size for the missing-cover placeholder.
+- `coverGap`: horizontal gap between the cover and title/author text.
+- `titleGap`: vertical gap below the Continue Reading label before the book card starts.
+- `startIndex`: recent-book index to show.
+
+## Components
+
+### Fonts
+
+Most components accept:
+
+```json
+"font": "large",
+"style": "bold"
+```
+
+Supported `font` values are `small`, `medium`, and `large`.
+
+Semantic aliases are also accepted:
+
+- `chrome`, `caption`: same as `small`.
+- `body`, `label`: same as `medium`.
+- `title`, `display`: same as `large`.
+
+Supported `style` values are `regular` and `bold`.
+
+### Home recents
+
+`components.homeRecents` controls the home cover area.
+
+Supported types:
+
+- `default`: Lyra default.
+- `none`: no cover area.
+- `cover-strip`: one or more cover slots.
+
+Example:
+
+```json
+"homeRecents": {
+  "type": "cover-strip",
+  "maxBooks": 3,
+  "wrap": true,
+  "selectionLineWidth": 3,
+  "inactiveSelectionLineWidth": 1,
+  "selectionCornerRadius": 6,
+  "slots": [
+    {
+      "book": "previous",
+      "x": "padding",
+      "y": "center",
+      "height": 210,
+      "widthPercent": 62
+    },
+    {
+      "book": "selected",
+      "x": "center",
+      "y": "top",
+      "height": 280,
+      "widthPercent": 62,
+      "selected": true,
+      "title": {
+        "enabled": true,
+        "font": "large",
+        "style": "bold",
+        "maxLines": 2,
+        "offsetY": 12
+      }
+    },
+    {
+      "book": "next",
+      "x": "right-padding",
+      "y": "center",
+      "height": 210,
+      "widthPercent": 62
+    }
+  ]
+}
+```
+
+Slot fields:
+
+- `book`: `selected`, `previous`, `next`, or `index`.
+- `bookIndex`: zero-based index when `book` is `index`.
+- `x`: `padding`, `center`, or `right-padding`.
+- `y`: `top` or `center`.
+- `height`: requested thumbnail height. CrossPoint generates/cache-misses thumbnails at requested sizes.
+- `widthPercent`: cover width as a percent of the slot height.
+- `xOffset`, `yOffset`: positional adjustments.
+- `selected`: whether this slot receives the active selection outline.
+- `title`: optional book title under the cover.
+
+CrossPoint currently reads up to five cover slots.
+
+Cover slots with `selected: true` draw after unselected slots, so selected covers appear in front. Within each group, slots draw in the same order they appear in JSON. For a carousel where the side covers sit behind the middle cover, mark the middle slot as `selected: true`.
+
+Use `xOffset` and `yOffset` for small relative adjustments after `x`/`y` placement has been resolved:
+
+- Positive `xOffset` moves a cover right.
+- Negative `xOffset` moves a cover left.
+- Positive `yOffset` moves a cover down.
+- Negative `yOffset` moves a cover up.
+
+Example carousel layering:
+
+```json
+"slots": [
+  {
+    "book": "previous",
+    "x": "padding",
+    "y": "center",
+    "height": 225,
+    "widthPercent": 62,
+    "xOffset": 32
+  },
+  {
+    "book": "next",
+    "x": "right-padding",
+    "y": "center",
+    "height": 225,
+    "widthPercent": 62,
+    "xOffset": -32
+  },
+  {
+    "book": "selected",
+    "x": "center",
+    "y": "top",
+    "height": 300,
+    "widthPercent": 62,
+    "selected": true
+  }
+]
+```
+
+In that example, the side covers are pushed toward the center, and the selected cover is drawn in the foreground.
+
+### Home menu
+
+`components.homeMenu` styles the home menu options.
+
+Supported fields:
+
+- `font`, `style`, `bold`
+- `centeredText`
+- `centerVertically`
+- `showIcons`
+- `panelWidth`
+- `drawPanel`
+- `panelCornerRadius`
+- `selectionStyle`: `fill`, `outline`, `triangle`, `underline`, or `pill`
+- `selectionCornerRadius`
+- `selectionInset`
+- `selectedTextInverted`
+- `selectionFillBlack`
+- `rowPaddingX`
+- `textInsetX`
+
+### Lists
+
+`components.list` styles Settings, Browse, Recent Books, and similar list rows.
+
+Supported fields:
+
+- `font`, `style`, `bold`
+- `subtitleFontId`
+- `valueFontId`
+- `showIcons`
+- `iconSize`
+- `textGap`
+- `selectionStyle`: `fill`, `outline`, or `underline`
+- `selectionCornerRadius`
+- `selectionFill`
+- `selectionOutline`
+- `selectedTextInverted`
+- `rowBackgrounds`
+- `centerSingleLineRows`
+- `subtitleRowAutoHeight`
+- `centerValueVertically`
+- `rowSidePadding`
+- `rowGap`
+- `textInsetX`
+- `selectionInsetX`
+- `selectionInsetY`
+- `titleOffsetY`
+- `subtitleOffsetY`
+- `subtitleTopPadding`
+- `subtitleBottomPadding`
+- `subtitleInterLineGap`
+- `valueOffsetY`
+- `subtitleValueOffsetY`
+- `iconOffsetY`
+
+### Header
+
+`components.header` styles page headers.
+
+Supported fields:
+
+- `font`, `style`, `bold`
+- `centeredTitle`
+- `showDivider`
+- `titleOffsetY`
+- `batteryOffsetY`
+
+### Tab bar
+
+`components.tabBar` styles tabs.
+
+Supported fields:
+
+- `font`, `style`, `bold`
+- `equalWidth`
+- `selectionStyle`: `fill` or `underline`
+- `selectedCornerRadius`
+- `selectedTextInverted`
+- `drawDivider`
+- `horizontalInset`
+
+### Button hints
+
+`components.buttonHints` styles bottom and side button hints.
+
+Supported fields:
+
+- `font`, `style`, `bold`
+- `layout`: `buttons`, `groups`, `shapes`, or `icons`
+- `buttonWidth`
+- `smallButtonHeight`
+- `cornerRadius`
+- `fill`
+- `outline`
+- `drawEmpty`
+- `shapes`
+- `sidePadding`
+- `groupGap`
+- `bottomMargin`
+- `innerPadding`
+- `shapeSize`
+- `textOffsetY`
+
+Use `layout: "shapes"` or `layout: "icons"` for icon-only arrows/circle/square hints.
+
+### Reader chrome
+
+`screens.reader.chrome` styles the reader status lane. Reader chrome still uses `screens.reader.layout` slots for placement; the chrome object controls how those slots draw.
+
+Battery fields:
+
+- `style`: `icon` or `bar`.
+- `width`: battery glyph width in pixels.
+- `height`: battery glyph height in pixels.
+- `offsetY`: vertical adjustment applied after the battery is positioned in its slot. Positive values move it down; negative values move it up.
+- `track`: background/track style for bar batteries: `none`, `hairline`, `outline`, or `dither`.
+- `fill`: fill style for bar batteries: `solid`, `dither`, or `segments`.
+- `direction`: fill direction: `left-to-right`, `right-to-left`, `center-out`, `bottom-to-top`, or `top-to-bottom`.
+- `orientation`: `horizontal` or `vertical`. Vertical is also implied by `bottom-to-top` and `top-to-bottom`.
+- `caps`: `square` or `pixel`. `pixel` trims the four filled corners for a softer e-ink cap.
+- `segments`: number of filled blocks when `fill` is `segments`.
+- `segmentGap`: pixels between segments.
+- `radius`: rounded-rect radius for bar track/fill/segments. Keep this small for thin e-ink bars; `0` is square.
+- `showPercentage`: whether reader chrome may draw the battery percentage when the global setting allows it.
+
+Example:
+
+```json
+"screens": {
+  "reader": {
+    "layout": {
+      "axis": "row",
+      "gap": 8,
+      "slots": [
+        { "id": "bookmark", "fixed": 18 },
+        { "id": "battery", "fixed": 38 },
+        { "id": "title", "flex": 1 },
+        { "id": "clock", "fixed": 42 },
+        { "id": "progress", "fixed": 82 }
+      ]
+    },
+    "chrome": {
+      "battery": {
+        "style": "bar",
+        "width": 38,
+        "height": 3,
+        "offsetY": 1,
+        "track": "none",
+        "fill": "solid",
+        "direction": "left-to-right",
+        "radius": 0,
+        "showPercentage": false
+      }
+    }
+  }
+}
+```
+
+## Icons
+
+Icons are optional. If both `homeMenu.showIcons` and `list.showIcons` are false, omit `assets.icons` and the icon files to reduce download size and heap use.
+
+Supported icon keys:
+
+- `folder`, `folder24`
+- `text`, `text24`
+- `image`, `image24`
+- `book`, `book24`
+- `file`, `file24`
+- `recent`
+- `settings`, `settings2`
+- `transfer`
+- `library`
+- `wifi`
+- `hotspot`
+- `bookmark`
+
+Generate firmware-matching 1-bit BMP icons:
+
+```bash
+python3 scripts/generate-theme-icons.py \
+  --icons src/components/icons \
+  --themes ../crosspoint-tools/public/themes
+```
+
+The script writes rotated BMP files into each `../crosspoint-tools/public/themes/<theme-id>/icons/` folder.
+
+Reference them from `theme.json`:
+
+```json
+"assets": {
+  "icons": {
+    "folder": "icons/folder.bmp",
+    "book": "icons/book.bmp",
+    "settings": "icons/settings2.bmp"
+  }
+}
+```
+
+## CrossInk and extension fields
+
+CrossPoint only consumes the fields documented above. Unknown fields are ignored, so theme authors can include extra data for compatible apps and firmware.
+
+Put app-specific fields under `extensions.<namespace>`:
+
+```json
+{
+  "schema": 1,
+  "id": "crossink-stats",
+  "name": "CrossInk Stats",
+  "inherits": "lyra",
+  "components": {
+    "homeRecents": {
+      "type": "cover-strip",
+      "maxBooks": 1
+    }
+  },
+  "extensions": {
+    "crossink": {
+      "schema": 1,
+      "readingStats": {
+        "enabled": true,
+        "placement": "home-footer",
+        "font": "small",
+        "style": "regular",
+        "show": [
+          "currentStreak",
+          "readingTime",
+          "pagesRead",
+          "percentComplete"
+        ],
+        "labels": {
+          "currentStreak": "streak",
+          "readingTime": "reading",
+          "pagesRead": "pages"
+        }
+      }
+    }
+  }
+}
+```
+
+Recommended extension rules:
+
+- Keep CrossPoint layout fields in `metrics`, `components`, `assets`, and `devices`.
+- Keep CrossInk-only fields under `extensions.crossink`.
+- Add an extension-local `schema` when the app-specific format may evolve.
+- Prefer declarative fields such as `placement`, `font`, `show`, and `labels` over code-like strings.
+- Keep extension data compact. CrossPoint ignores it, but it is still parsed transiently when discovering themes.
+- Do not put required CrossPoint behavior only in an extension field. CrossPoint will not read it.
+
+CrossInk can also use `requires` for compatibility metadata:
+
+```json
+"requires": {
+  "crosspoint": {
+    "schema": 1,
+    "modules": ["cover-strip"]
+  },
+  "crossink": {
+    "schema": 1,
+    "modules": ["reading-stats"]
+  }
+}
+```
+
+CrossPoint currently treats `requires` as metadata.
+
+## Package manifest
+
+After adding or changing hosted themes, regenerate `themes.json` in `crosspoint-tools`:
+
+```bash
+python3 scripts/generate-theme-manifest.py \
+  --root ../crosspoint-tools/public/themes \
+  --base-url http://crosspointreader.com/themes \
+  --output ../crosspoint-tools/public/themes/themes.json
+```
+
+The manifest generator:
+
+- scans every `../crosspoint-tools/public/themes/<theme-id>/theme.json`
+- includes every file in each theme folder
+- writes per-file `size` and `crc32`
+- writes the theme `id`, `name`, `description`, and `totalSize`
+
+Commit the theme files and the regenerated manifest together in `crosspoint-tools`.
+
+## Validation checklist
+
+Before publishing:
+
+```bash
+for f in ../crosspoint-tools/public/themes/themes.json ../crosspoint-tools/public/themes/*/theme.json; do
+  python3 -m json.tool "$f" >/dev/null
+done
+
+python3 scripts/generate-theme-manifest.py \
+  --root ../crosspoint-tools/public/themes \
+  --base-url http://crosspointreader.com/themes \
+  --output ../crosspoint-tools/public/themes/themes.json
+
+pio run -e gh_release
+```
+
+On device:
+
+1. Download the theme from Settings -> UI Theme -> Download Themes.
+2. Exit the downloader and let the device silently restart to clear WiFi/TLS heap.
+3. Return to Settings -> UI Theme and select the downloaded theme.
+4. Check Home, Settings, Browse, Recent Books, button hints, tabs, popups, keyboard, and reader menus.
diff --git a/freeink-sdk b/freeink-sdk
index 8be32366..329a4beb 160000
--- a/freeink-sdk
+++ b/freeink-sdk
@@ -1 +1 @@
-Subproject commit 8be32366091e3e0eadeda9b983091166140f816f
+Subproject commit 329a4bebef0df10aecd3737f5676c832f03ba277
diff --git a/lib/GfxRenderer/GfxRenderer.cpp b/lib/GfxRenderer/GfxRenderer.cpp
index b024fab8..2bd5551f 100644
--- a/lib/GfxRenderer/GfxRenderer.cpp
+++ b/lib/GfxRenderer/GfxRenderer.cpp
@@ -8,6 +8,7 @@
 #include <Utf8.h>
 
 #include <algorithm>
+#include <cassert>
 
 #include "FontCacheManager.h"
 
@@ -1055,7 +1056,19 @@ void GfxRenderer::drawImage(const uint8_t bitmap[], const int x, const int y, co
 }
 
 void GfxRenderer::drawIcon(const uint8_t bitmap[], const int x, const int y, const int width, const int height) const {
-  display.drawImageTransparent(bitmap, y, getScreenWidth() - width - x, height, width);
+  if (bitmap == nullptr || width <= 0 || height <= 0) return;
+  assert(width == height);
+
+  const int bytesPerRow = (width + 7) / 8;
+  for (int sourceY = 0; sourceY < height; ++sourceY) {
+    for (int sourceX = 0; sourceX < width; ++sourceX) {
+      const uint8_t rowByte = bitmap[sourceY * bytesPerRow + sourceX / 8];
+      const bool background = (rowByte >> (7 - (sourceX % 8))) & 0x01;
+      if (background) continue;
+
+      drawPixel(x + height - 1 - sourceY, y + sourceX, true);
+    }
+  }
 }
 
 void GfxRenderer::drawBitmap(const Bitmap& bitmap, const int x, const int y, const int maxWidth, const int maxHeight,
diff --git a/lib/I18n/translations/belarusian.yaml b/lib/I18n/translations/belarusian.yaml
index de79ac91..a8d68988 100644
--- a/lib/I18n/translations/belarusian.yaml
+++ b/lib/I18n/translations/belarusian.yaml
@@ -300,3 +300,4 @@ STR_SLEEP_TIMER_STEP_HINT: "Улева/Управа: 1 хв  Уверх/Уніз
 STR_AUTO_TURN_ENABLED: "Аўтаперагортванне: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Аўтаперагортванне (старонак за хвіліну)"
 STR_TILT_PAGE_TURN: "Перагортванне нахілам"
+STR_MANAGE_THEMES: "Кіраванне тэмамі"
diff --git a/lib/I18n/translations/catalan.yaml b/lib/I18n/translations/catalan.yaml
index c1bf6c6b..26cc92f6 100644
--- a/lib/I18n/translations/catalan.yaml
+++ b/lib/I18n/translations/catalan.yaml
@@ -383,3 +383,4 @@ STR_FIRMWARE_WRITE_FAILED: "Ha fallat l'escriptura del firmware"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "No apagueu el dispositiu!"
 STR_RECOVERY_MODE: "Mode de recuperació"
 STR_RECOVERY_MODE_HINT: "Poseu firmware.bin a l'arrel de la targeta SD i seleccioneu-lo"
+STR_MANAGE_THEMES: "Gestiona els temes"
diff --git a/lib/I18n/translations/czech.yaml b/lib/I18n/translations/czech.yaml
index 696cdd33..eaf18be6 100644
--- a/lib/I18n/translations/czech.yaml
+++ b/lib/I18n/translations/czech.yaml
@@ -275,3 +275,4 @@ STR_SLEEP_TIMER_VALUE_FORMAT: "%u min"
 STR_SLEEP_NEVER: "Nikdy"
 STR_SLEEP_TIMER_STEP_HINT: "Vlevo/Vpravo: 1 min  Nahoru/Dolů: 5 min"
 STR_TILT_PAGE_TURN: "Otáčení stránek nakloněním"
+STR_MANAGE_THEMES: "Spravovat motivy"
diff --git a/lib/I18n/translations/danish.yaml b/lib/I18n/translations/danish.yaml
index cd4ba1ba..054b5a46 100644
--- a/lib/I18n/translations/danish.yaml
+++ b/lib/I18n/translations/danish.yaml
@@ -303,3 +303,4 @@ STR_SCREENSHOT_BUTTON: "Tag skærmbillede"
 STR_AUTO_TURN_ENABLED: "Automatisk sidevendning aktiveret: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Automatisk vending (sider per minut)"
 STR_TILT_PAGE_TURN: "Vip for at vende side"
+STR_MANAGE_THEMES: "Administrer temaer"
diff --git a/lib/I18n/translations/dutch.yaml b/lib/I18n/translations/dutch.yaml
index ee4ca64e..e8278436 100644
--- a/lib/I18n/translations/dutch.yaml
+++ b/lib/I18n/translations/dutch.yaml
@@ -303,3 +303,4 @@ STR_SCREENSHOT_BUTTON: "Screenshot maken"
 STR_AUTO_TURN_ENABLED: "Automatisch omslaan ingeschakeld: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Autom. omslaan (pagina's per minuut)"
 STR_TILT_PAGE_TURN: "Kantel om te bladeren"
+STR_MANAGE_THEMES: "Thema's beheren"
diff --git a/lib/I18n/translations/english.yaml b/lib/I18n/translations/english.yaml
index ecd7b0e0..86911277 100644
--- a/lib/I18n/translations/english.yaml
+++ b/lib/I18n/translations/english.yaml
@@ -350,6 +350,7 @@ STR_INSTALLED: "Installed"
 STR_DOWNLOAD_ALL: "Download All"
 STR_UPDATE_ALL: "Update All"
 STR_UPDATE_AVAILABLE: "Update"
+STR_MANAGE_THEMES: "Manage Themes"
 STR_CRASH_TITLE: "System Crash"
 STR_CRASH_DESCRIPTION: "A detailed report was saved to crash_report.txt. Please include this file in your bug report."
 STR_CRASH_REASON: "Crash reason:"
diff --git a/lib/I18n/translations/finnish.yaml b/lib/I18n/translations/finnish.yaml
index ebe120c1..d229c36c 100644
--- a/lib/I18n/translations/finnish.yaml
+++ b/lib/I18n/translations/finnish.yaml
@@ -273,3 +273,4 @@ STR_SLEEP_TIMER_VALUE_FORMAT: "%u min"
 STR_SLEEP_NEVER: "Ei koskaan"
 STR_SLEEP_TIMER_STEP_HINT: "Vasen/Oikea: 1 min  Ylös/Alas: 5 min"
 STR_TILT_PAGE_TURN: "Sivunkääntö kallistamalla"
+STR_MANAGE_THEMES: "Hallinnoi teemoja"
diff --git a/lib/I18n/translations/french.yaml b/lib/I18n/translations/french.yaml
index db4db7ec..0243f2e7 100644
--- a/lib/I18n/translations/french.yaml
+++ b/lib/I18n/translations/french.yaml
@@ -304,3 +304,4 @@ STR_SCREENSHOT_BUTTON: "Capture d'écran"
 STR_AUTO_TURN_ENABLED: "Tourne-page auto : "
 STR_AUTO_TURN_PAGES_PER_MIN: "Tourne-page auto (pages par minute)"
 STR_TILT_PAGE_TURN: "Tourner par inclinaison"
+STR_MANAGE_THEMES: "Gérer les thèmes"
diff --git a/lib/I18n/translations/german.yaml b/lib/I18n/translations/german.yaml
index a7c1ad08..59d1bea1 100644
--- a/lib/I18n/translations/german.yaml
+++ b/lib/I18n/translations/german.yaml
@@ -380,3 +380,4 @@ STR_FIRMWARE_WRITE_FAILED: "Schreiben der Firmware-Datei ist fehlgeschlagen"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "Nicht ausschalten!"
 STR_RECOVERY_MODE: "Wiederherstellungsmodus"
 STR_RECOVERY_MODE_HINT: "Lege firmware.bin im SD-Kartenwurzelverzeichnis ab und wähle es aus"
+STR_MANAGE_THEMES: "Designs verwalten"
diff --git a/lib/I18n/translations/hebrew.yaml b/lib/I18n/translations/hebrew.yaml
index 7d0835cf..d4b74070 100644
--- a/lib/I18n/translations/hebrew.yaml
+++ b/lib/I18n/translations/hebrew.yaml
@@ -384,6 +384,7 @@ STR_BOOKMARK_REMOVED: "הסימנייה הוסרה"
 STR_QUICK_RESUME: "חזרה מהירה"
 STR_REMOVE_FROM_RECENTS: "להסיר מרשימת הספרים האחרונים?"
 STR_CONFIRM_DELETE_BOOKMARK: "למחוק סימנייה זו?"
+STR_MANAGE_THEMES: "ניהול ערכות נושא"
 STR_LONG_PRESS_MENU: "לחיצה ארוכה על אישור"
 STR_KOSYNC: "KOSync"
 STR_BOOKMARK_OPTION: "סימנייה"
diff --git a/lib/I18n/translations/hungarian.yaml b/lib/I18n/translations/hungarian.yaml
index b6f10036..4c704212 100644
--- a/lib/I18n/translations/hungarian.yaml
+++ b/lib/I18n/translations/hungarian.yaml
@@ -300,3 +300,4 @@ STR_SCREENSHOT_BUTTON: "Képernyőkép készítése"
 STR_AUTO_TURN_ENABLED: "Automatikus lapozás bekapcsolva: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Automatikus lapozás (oldal/perc)"
 STR_TILT_PAGE_TURN: "Döntéses lapozás"
+STR_MANAGE_THEMES: "Témák kezelése"
diff --git a/lib/I18n/translations/italian.yaml b/lib/I18n/translations/italian.yaml
index f799e256..35a87cb8 100644
--- a/lib/I18n/translations/italian.yaml
+++ b/lib/I18n/translations/italian.yaml
@@ -376,6 +376,8 @@ STR_CLOCK_SYNCING: "Sincronizzazione con il server NTP..."
 STR_CLOCK_SYNC_FAIL: "Sincronizzazione non riuscita"
 STR_CLOCK_SYNC_NOW: "Sincronizza l'orologio adesso"
 STR_CLOCK_SYNC_NO_WIFI: "Wi-Fi non connesso"
+STR_HOLD_CONFIRM_TO_DELETE: "Tieni premuto Conferma per cancellare"
+STR_MANAGE_THEMES: "Gestisci temi"
 STR_HOLD_OPEN_TO_DELETE: "Tieni premuto Apri per eliminare"
 STR_NEXT_FIELD: "Succ."
 STR_CURRENT_TIME: "Ora attuale: "
diff --git a/lib/I18n/translations/kazakh.yaml b/lib/I18n/translations/kazakh.yaml
index 067aaa56..720532a6 100644
--- a/lib/I18n/translations/kazakh.yaml
+++ b/lib/I18n/translations/kazakh.yaml
@@ -299,3 +299,4 @@ STR_SCREENSHOT_BUTTON: "Скриншот түсіру"
 STR_AUTO_TURN_ENABLED: "Автоматты бет аудару қосулы: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Автоматты бет аудару (минутына бет саны)"
 STR_TILT_PAGE_TURN: "Еңкейту арқылы бет аудару"
+STR_MANAGE_THEMES: "Тақырыптарды басқару"
diff --git a/lib/I18n/translations/lithuanian.yaml b/lib/I18n/translations/lithuanian.yaml
index f79a3222..b6ff95b9 100644
--- a/lib/I18n/translations/lithuanian.yaml
+++ b/lib/I18n/translations/lithuanian.yaml
@@ -300,3 +300,4 @@ STR_SCREENSHOT_BUTTON: "Ekrano nuotrauka"
 STR_AUTO_TURN_ENABLED: "Auto-vertimas: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Auto-vertimas (psl/min)"
 STR_TILT_PAGE_TURN: "Puslapio vertimas pakreipiant"
+STR_MANAGE_THEMES: "Tvarkyti temas"
diff --git a/lib/I18n/translations/polish.yaml b/lib/I18n/translations/polish.yaml
index 0cb8f698..7d75dc96 100644
--- a/lib/I18n/translations/polish.yaml
+++ b/lib/I18n/translations/polish.yaml
@@ -360,3 +360,4 @@ STR_FIRMWARE_WRITE_FAILED: "Zapis oprogramowania nieudany"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "Nie wyłączać!"
 STR_RECOVERY_MODE: "Tryb przywracania"
 STR_RECOVERY_MODE_HINT: "Umieść firmware.bin w głównym katalogu karty SD i wybierz go"
+STR_MANAGE_THEMES: "Zarządzaj motywami"
diff --git a/lib/I18n/translations/portuguese.yaml b/lib/I18n/translations/portuguese.yaml
index 7b68383c..46efa0d8 100644
--- a/lib/I18n/translations/portuguese.yaml
+++ b/lib/I18n/translations/portuguese.yaml
@@ -275,3 +275,4 @@ STR_SLEEP_TIMER_VALUE_FORMAT: "%u min"
 STR_SLEEP_NEVER: "Nunca"
 STR_SLEEP_TIMER_STEP_HINT: "Esq/Dir: 1 min  Cima/Baixo: 5 min"
 STR_TILT_PAGE_TURN: "Virar página por inclinação"
+STR_MANAGE_THEMES: "Gerenciar temas"
diff --git a/lib/I18n/translations/romanian.yaml b/lib/I18n/translations/romanian.yaml
index 0fbae3c4..71ffbb68 100644
--- a/lib/I18n/translations/romanian.yaml
+++ b/lib/I18n/translations/romanian.yaml
@@ -303,3 +303,4 @@ STR_SCREENSHOT_BUTTON: "Captură ecran"
 STR_AUTO_TURN_ENABLED: "Răsfoire automată: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Pagini pe minut"
 STR_TILT_PAGE_TURN: "Întoarcere pagină prin înclinare"
+STR_MANAGE_THEMES: "Gestionează temele"
diff --git a/lib/I18n/translations/russian.yaml b/lib/I18n/translations/russian.yaml
index bac25717..1402b4d4 100644
--- a/lib/I18n/translations/russian.yaml
+++ b/lib/I18n/translations/russian.yaml
@@ -383,3 +383,4 @@ STR_FIRMWARE_WRITE_FAILED: "Ошибка записи прошивки"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "Не выключайте питание!"
 STR_RECOVERY_MODE: "Режим восстановления"
 STR_RECOVERY_MODE_HINT: "Поместите firmware.bin в корень SD-карты и выберите его"
+STR_MANAGE_THEMES: "Управление темами"
diff --git a/lib/I18n/translations/slovenian.yaml b/lib/I18n/translations/slovenian.yaml
index 317bcb43..22319476 100644
--- a/lib/I18n/translations/slovenian.yaml
+++ b/lib/I18n/translations/slovenian.yaml
@@ -300,3 +300,4 @@ STR_SCREENSHOT_BUTTON: "Naredi posnetek zaslona"
 STR_AUTO_TURN_ENABLED: "Samodejno obračanje: "
 STR_AUTO_TURN_PAGES_PER_MIN: "Samodejno obračanje (strani na minuto)"
 STR_TILT_PAGE_TURN: "Obračanje s priklonom"
+STR_MANAGE_THEMES: "Upravljanje tem"
diff --git a/lib/I18n/translations/spanish.yaml b/lib/I18n/translations/spanish.yaml
index 0daeac75..2a0ad51b 100644
--- a/lib/I18n/translations/spanish.yaml
+++ b/lib/I18n/translations/spanish.yaml
@@ -383,3 +383,4 @@ STR_FIRMWARE_WRITE_FAILED: "Falló la escritura del firmware"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "¡No apague el dispositivo!"
 STR_RECOVERY_MODE: "Modo de recuperación"
 STR_RECOVERY_MODE_HINT: "Ponga firmware.bin en la raíz de la tarj. SD y selecciónelo"
+STR_MANAGE_THEMES: "Gestionar temas"
diff --git a/lib/I18n/translations/swedish.yaml b/lib/I18n/translations/swedish.yaml
index 19105830..7e333c63 100644
--- a/lib/I18n/translations/swedish.yaml
+++ b/lib/I18n/translations/swedish.yaml
@@ -380,3 +380,4 @@ STR_FIRMWARE_WRITE_FAILED: "Skrivning till firmware misslyckades"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "Stäng inte av!"
 STR_RECOVERY_MODE: "Återställningsläge"
 STR_RECOVERY_MODE_HINT: "Placera firmware.bin i SD-kortroten och välj den"
+STR_MANAGE_THEMES: "Hantera teman"
diff --git a/lib/I18n/translations/turkish.yaml b/lib/I18n/translations/turkish.yaml
index ac6dd32c..c61b0bb8 100644
--- a/lib/I18n/translations/turkish.yaml
+++ b/lib/I18n/translations/turkish.yaml
@@ -303,3 +303,4 @@ STR_SELECTED: "Seçili"
 STR_SHOW: "Göster"
 STR_TITLE: "Başlık"
 STR_TILT_PAGE_TURN: "Eğerek sayfa çevirme"
+STR_MANAGE_THEMES: "Temaları Yönet"
diff --git a/lib/I18n/translations/ukrainian.yaml b/lib/I18n/translations/ukrainian.yaml
index 6a34e1a9..0b6fad19 100644
--- a/lib/I18n/translations/ukrainian.yaml
+++ b/lib/I18n/translations/ukrainian.yaml
@@ -380,3 +380,4 @@ STR_FIRMWARE_WRITE_FAILED: "Помилка запису прошивки"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "Не вимикайте пристрій!"
 STR_RECOVERY_MODE: "Режим відновлення"
 STR_RECOVERY_MODE_HINT: "Помістіть firmware.bin у корінь SD-карти та виберіть його"
+STR_MANAGE_THEMES: "Керування темами"
diff --git a/lib/I18n/translations/valencian.yaml b/lib/I18n/translations/valencian.yaml
index 89a7d962..4d89856c 100644
--- a/lib/I18n/translations/valencian.yaml
+++ b/lib/I18n/translations/valencian.yaml
@@ -383,3 +383,4 @@ STR_FIRMWARE_WRITE_FAILED: "Ha fallat l'escriptura del firmware"
 STR_FIRMWARE_UPDATE_DO_NOT_POWER_OFF: "No apagueu el dispositiu!"
 STR_RECOVERY_MODE: "Mode de recuperació"
 STR_RECOVERY_MODE_HINT: "Poseu firmware.bin a l'arrel de la targeta SD i seleccioneu-lo"
+STR_MANAGE_THEMES: "Gestiona els temes"
diff --git a/scripts/generate-theme-icons.py b/scripts/generate-theme-icons.py
new file mode 100644
index 00000000..b80f6833
--- /dev/null
+++ b/scripts/generate-theme-icons.py
@@ -0,0 +1,117 @@
+#!/usr/bin/env python3
+"""Export compiled 1-bit UI icon headers as BMP assets for SD themes."""
+
+import argparse
+import re
+import struct
+from pathlib import Path
+
+
+ICON_HEADERS = [
+    "book.h",
+    "book24.h",
+    "bookmark.h",
+    "cover.h",
+    "file24.h",
+    "folder.h",
+    "folder24.h",
+    "hotspot.h",
+    "image24.h",
+    "library.h",
+    "recent.h",
+    "settings2.h",
+    "text24.h",
+    "transfer.h",
+    "wifi.h",
+]
+
+
+def parse_icon_header(path: Path):
+    text = path.read_text()
+    size_match = re.search(r"//\s*size:\s*(\d+)x(\d+)", text)
+    if not size_match:
+        raise ValueError(f"missing size comment in {path}")
+    width = int(size_match.group(1))
+    height = int(size_match.group(2))
+
+    bitmap_match = re.search(r"static\s+const\s+uint8_t\s+\w+\s*\[\]\s*=\s*\{(?P<body>.*?)\};", text, re.DOTALL)
+    if not bitmap_match:
+        raise ValueError(f"missing bitmap data in {path}")
+    bitmap_body = bitmap_match.group("body")
+
+    values = [int(m.group(1), 16) for m in re.finditer(r"0x([0-9A-Fa-f]{2})", bitmap_body)]
+    expected = ((width + 7) // 8) * height
+    if len(values) != expected:
+        raise ValueError(f"{path}: expected {expected} bytes, found {len(values)}")
+    return width, height, bytes(values)
+
+
+def get_bit(bitmap: bytes, width: int, x: int, y: int) -> int:
+    stride = (width + 7) // 8
+    return (bitmap[y * stride + x // 8] >> (7 - (x % 8))) & 1
+
+
+def set_bit(buf: bytearray, width: int, x: int, y: int, value: int):
+    stride = (width + 7) // 8
+    if value:
+        buf[y * stride + x // 8] |= 1 << (7 - (x % 8))
+
+
+def rotate_1bit_cw(width: int, height: int, bitmap: bytes):
+    rotated_width = height
+    rotated_height = width
+    rotated = bytearray(((rotated_width + 7) // 8) * rotated_height)
+    for y in range(height):
+        for x in range(width):
+            set_bit(rotated, rotated_width, height - 1 - y, x, get_bit(bitmap, width, x, y))
+    return rotated_width, rotated_height, bytes(rotated)
+
+
+def write_1bit_bmp(path: Path, width: int, height: int, bitmap: bytes):
+    src_stride = (width + 7) // 8
+    dst_stride = ((width + 31) // 32) * 4
+    pixel_bytes = dst_stride * height
+    pixel_offset = 14 + 40 + 8
+    file_size = pixel_offset + pixel_bytes
+
+    path.parent.mkdir(parents=True, exist_ok=True)
+    with path.open("wb") as out:
+        # BITMAPFILEHEADER
+        out.write(b"BM")
+        out.write(struct.pack("<IHHI", file_size, 0, 0, pixel_offset))
+        # BITMAPINFOHEADER. Negative height stores rows top-down.
+        out.write(struct.pack("<IiiHHIIiiII", 40, width, -height, 1, 1, 0, pixel_bytes, 0, 0, 2, 0))
+        # Palette index 0 = black, index 1 = white. Existing icon arrays use 1s
+        # for white/transparent background and 0s for ink.
+        out.write(bytes([0, 0, 0, 0, 255, 255, 255, 0]))
+        for y in range(height):
+            row = bitmap[y * src_stride : (y + 1) * src_stride]
+            out.write(row)
+            out.write(b"\x00" * (dst_stride - src_stride))
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--icons", default="src/components/icons")
+    parser.add_argument("--themes", default="../crosspoint-tools/public/themes")
+    args = parser.parse_args()
+
+    icon_root = Path(args.icons)
+    theme_root = Path(args.themes)
+
+    parsed = []
+    for header in ICON_HEADERS:
+        icon_path = icon_root / header
+        width, height, data = parse_icon_header(icon_path)
+        width, height, data = rotate_1bit_cw(width, height, data)
+        parsed.append((icon_path.stem, width, height, data))
+
+    for theme_dir in sorted(theme_root.iterdir()):
+        if not theme_dir.is_dir() or not (theme_dir / "theme.json").exists():
+            continue
+        for name, width, height, data in parsed:
+            write_1bit_bmp(theme_dir / "icons" / f"{name}.bmp", width, height, data)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/scripts/generate-theme-manifest.py b/scripts/generate-theme-manifest.py
new file mode 100644
index 00000000..717f35d0
--- /dev/null
+++ b/scripts/generate-theme-manifest.py
@@ -0,0 +1,66 @@
+#!/usr/bin/env python3
+"""Generate a themes.json manifest from SD theme package folders."""
+
+import argparse
+import json
+import zlib
+from pathlib import Path
+
+
+def safe_theme_dirs(root: Path):
+    for child in sorted(root.iterdir()):
+        if not child.is_dir() or child.name.startswith(".") or child.name.startswith("_"):
+            continue
+        theme_json = child / "theme.json"
+        if theme_json.exists():
+            yield child
+
+
+def build_manifest(root: Path, base_url: str):
+    themes = []
+    for theme_dir in safe_theme_dirs(root):
+        theme_doc = json.loads((theme_dir / "theme.json").read_text(encoding="utf-8"))
+        files = []
+        total = 0
+        for file_path in sorted(p for p in theme_dir.rglob("*") if p.is_file()):
+            rel = file_path.relative_to(theme_dir).as_posix()
+            data = file_path.read_bytes()
+            total += len(data)
+            files.append(
+                {
+                    "path": rel,
+                    "url": f"{theme_dir.name}/{rel}",
+                    "size": len(data),
+                    "crc32": zlib.crc32(data) & 0xFFFFFFFF,
+                }
+            )
+
+        themes.append(
+            {
+                "id": theme_doc["id"],
+                "name": theme_doc.get("name", theme_doc["id"]),
+                "version": theme_doc.get("version", 1),
+                "description": theme_doc.get("description", ""),
+                "files": files,
+                "totalSize": total,
+            }
+        )
+
+    return {"version": 1, "baseUrl": base_url, "themes": themes}
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--root", default="../crosspoint-tools/public/themes")
+    parser.add_argument("--base-url", required=True)
+    parser.add_argument("--output", default="../crosspoint-tools/public/themes/themes.json")
+    args = parser.parse_args()
+
+    manifest = build_manifest(Path(args.root), args.base_url)
+    output = Path(args.output)
+    output.parent.mkdir(parents=True, exist_ok=True)
+    output.write_text(json.dumps(manifest, indent=2) + "\n", encoding="utf-8")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/src/CrossPointSettings.h b/src/CrossPointSettings.h
index 8a2cf217..4caa0556 100644
--- a/src/CrossPointSettings.h
+++ b/src/CrossPointSettings.h
@@ -161,7 +161,7 @@ class CrossPointSettings {
   };
 
   // UI Theme
-  enum UI_THEME { CLASSIC = 0, LYRA = 1, LYRA_3_COVERS = 2, ROUNDEDRAFF = 3 };
+  enum UI_THEME { CLASSIC = 0, LYRA = 1, LYRA_3_COVERS = 2, ROUNDEDRAFF = 3, UI_THEME_COUNT = 4 };
 
   // Image rendering in EPUB reader
   enum IMAGE_RENDERING { IMAGES_DISPLAY = 0, IMAGES_PLACEHOLDER = 1, IMAGES_SUPPRESS = 2, IMAGE_RENDERING_COUNT };
@@ -254,6 +254,8 @@ class CrossPointSettings {
   uint8_t focusReadingEnabled = 0;
   // SD card font family name (empty = use built-in fontFamily)
   char sdFontFamilyName[32] = "";
+  // SD card UI theme id/name (empty = use built-in Lyra)
+  char sdThemeName[32] = "";
   // Show hidden files/directories (starting with '.') in the file browser (0 = hidden, 1 = show)
   uint8_t showHiddenFiles = 0;
   // Remove a book from the Recent Books list when its End-of-Book screen is reached (0 = off, 1 = on)
diff --git a/src/JsonSettingsIO.cpp b/src/JsonSettingsIO.cpp
index 6f0a51d2..180b95f6 100644
--- a/src/JsonSettingsIO.cpp
+++ b/src/JsonSettingsIO.cpp
@@ -144,10 +144,16 @@ bool JsonSettingsIO::saveSettings(const CrossPointSettings& s, const char* path)
   doc["frontButtonRight"] = s.frontButtonRight;
   // Font family — uses dynamic getter/setter in SettingsList so the generic loop skips it.
   doc["fontFamily"] = s.fontFamily;
+  // UI theme — uses dynamic getter/setter in SettingsList so the generic loop skips it.
+  doc["uiTheme"] = s.uiTheme;
   // SD card font family name — not in SettingsList, save manually
   if (s.sdFontFamilyName[0] != '\0') {
     doc["sdFontFamilyName"] = s.sdFontFamilyName;
   }
+  // SD card UI theme id/name — dynamic setting, save manually.
+  if (s.sdThemeName[0] != '\0') {
+    doc["sdThemeName"] = s.sdThemeName;
+  }
 
   // Language -- managed by LanguageSelectActivity, not in SettingsList.
   // Stored as ISO code string ("EN", "DE", ...) for stability across enum reorders.
@@ -246,10 +252,17 @@ bool JsonSettingsIO::loadSettings(CrossPointSettings& s, const char* json, bool*
   // Font family — uses dynamic getter/setter in SettingsList so the generic loop skips it.
   const uint8_t storedFontFamily = doc["fontFamily"] | (uint8_t)0;
   s.fontFamily = clamp(storedFontFamily, CrossPointSettings::BUILTIN_FONT_COUNT, 0);
+  // UI theme — uses dynamic getter/setter in SettingsList so the generic loop skips it.
+  s.uiTheme = clamp(doc["uiTheme"] | (uint8_t)CrossPointSettings::LYRA, (uint8_t)CrossPointSettings::UI_THEME_COUNT,
+                    (uint8_t)CrossPointSettings::LYRA);
   // SD card font family name — not in SettingsList, load manually
   const char* sfn = doc["sdFontFamilyName"] | "";
   strncpy(s.sdFontFamilyName, sfn, sizeof(s.sdFontFamilyName) - 1);
   s.sdFontFamilyName[sizeof(s.sdFontFamilyName) - 1] = '\0';
+  // SD card UI theme id/name — not in SettingsList, load manually.
+  const char* stn = doc["sdThemeName"] | "";
+  strncpy(s.sdThemeName, stn, sizeof(s.sdThemeName) - 1);
+  s.sdThemeName[sizeof(s.sdThemeName) - 1] = '\0';
   if (storedFontFamily == CrossPointSettings::LEGACY_OPENDYSLEXIC && s.sdFontFamilyName[0] == '\0') {
     s.fontFamily = CrossPointSettings::NOTOSERIF;
     strncpy(s.sdFontFamilyName, "OpenDyslexic", sizeof(s.sdFontFamilyName) - 1);
diff --git a/src/SettingsList.h b/src/SettingsList.h
index a0e43cc8..67c7971f 100644
--- a/src/SettingsList.h
+++ b/src/SettingsList.h
@@ -13,6 +13,7 @@
 #include "CrossPointSettings.h"
 #include "KOReaderCredentialStore.h"
 #include "activities/settings/SettingsActivity.h"
+#include "components/themes/SdCardThemeRegistry.h"
 
 // Build the font family setting dynamically. When registry is non-null, SD card fonts
 // are appended after the built-in fonts. Otherwise only built-in fonts are listed.
@@ -90,6 +91,63 @@ inline SettingInfo buildFontFamilySetting(const SdCardFontRegistry* registry) {
   return s;
 }
 
+// Build the UI theme setting dynamically. Firmware themes keep their existing
+// indexes; SD card themes are appended after them.
+inline SettingInfo buildUiThemeSetting(const SdCardThemeRegistry* registry) {
+  std::vector<std::string> allStringValues;
+  allStringValues.push_back(I18N.get(StrId::STR_THEME_CLASSIC));
+  allStringValues.push_back(I18N.get(StrId::STR_THEME_LYRA));
+  allStringValues.push_back(I18N.get(StrId::STR_THEME_LYRA_EXTENDED));
+  allStringValues.push_back(I18N.get(StrId::STR_THEME_ROUNDEDRAFF));
+
+  std::vector<std::string> sdThemeIds;
+  if (registry) {
+    const auto& themes = registry->getThemes();
+    sdThemeIds.reserve(themes.size());
+    for (const auto& theme : themes) {
+      allStringValues.push_back(theme.name);
+      sdThemeIds.push_back(theme.id);
+    }
+  }
+
+  SettingInfo s;
+  s.nameId = StrId::STR_UI_THEME;
+  s.type = SettingType::ENUM;
+  s.enumStringValues = std::move(allStringValues);
+  s.key = "uiTheme";
+  s.category = StrId::STR_CAT_DISPLAY;
+
+  s.valueGetter = [sdThemeIds]() -> uint8_t {
+    if (SETTINGS.sdThemeName[0] != '\0') {
+      for (int i = 0; i < static_cast<int>(sdThemeIds.size()); i++) {
+        if (sdThemeIds[i] == SETTINGS.sdThemeName) {
+          return static_cast<uint8_t>(CrossPointSettings::UI_THEME_COUNT + i);
+        }
+      }
+    }
+    return SETTINGS.uiTheme < CrossPointSettings::UI_THEME_COUNT ? SETTINGS.uiTheme : CrossPointSettings::LYRA;
+  };
+
+  s.valueSetter = [sdThemeIds](uint8_t v) {
+    if (v < CrossPointSettings::UI_THEME_COUNT) {
+      SETTINGS.uiTheme = v;
+      SETTINGS.sdThemeName[0] = '\0';
+      return;
+    }
+
+    SETTINGS.uiTheme = CrossPointSettings::UI_THEME::LYRA;
+    const int sdIdx = v - CrossPointSettings::UI_THEME_COUNT;
+    if (sdIdx < static_cast<int>(sdThemeIds.size())) {
+      strncpy(SETTINGS.sdThemeName, sdThemeIds[sdIdx].c_str(), sizeof(SETTINGS.sdThemeName) - 1);
+      SETTINGS.sdThemeName[sizeof(SETTINGS.sdThemeName) - 1] = '\0';
+    } else {
+      SETTINGS.sdThemeName[0] = '\0';
+    }
+  };
+
+  return s;
+}
+
 // Shared settings list used by both the device settings UI and the web settings API.
 // Each entry has a key (for JSON API) and category (for grouping).
 // ACTION-type entries and entries without a key are device-only.
@@ -99,7 +157,8 @@ inline SettingInfo buildFontFamilySetting(const SdCardFontRegistry* registry) {
 // SdCardFontRegistry is supplied AND has SD card fonts installed, the
 // font-family entry is replaced in a per-call copy with a registry-aware
 // version. Callers without SD fonts pay only a vector copy.
-inline std::vector<SettingInfo> getSettingsList(const SdCardFontRegistry* registry = nullptr) {
+inline std::vector<SettingInfo> getSettingsList(const SdCardFontRegistry* fontRegistry = nullptr,
+                                                const SdCardThemeRegistry* themeRegistry = nullptr) {
   static const std::vector<SettingInfo> baseList = [] {
     std::vector<SettingInfo> v = {
         // --- Display ---
@@ -274,10 +333,16 @@ inline std::vector<SettingInfo> getSettingsList(const SdCardFontRegistry* regist
   }();
 
   std::vector<SettingInfo> v = baseList;
-  if (registry && registry->getFamilyCount() > 0) {
+  {
+    auto it = std::find_if(v.begin(), v.end(), [](const SettingInfo& s) { return s.nameId == StrId::STR_UI_THEME; });
+    if (it != v.end()) {
+      *it = buildUiThemeSetting(themeRegistry);
+    }
+  }
+  if (fontRegistry && fontRegistry->getFamilyCount() > 0) {
     auto it = std::find_if(v.begin(), v.end(), [](const SettingInfo& s) { return s.nameId == StrId::STR_FONT_FAMILY; });
     if (it != v.end()) {
-      *it = buildFontFamilySetting(registry);
+      *it = buildFontFamilySetting(fontRegistry);
     }
   }
   return v;
diff --git a/src/ThemeInstaller.cpp b/src/ThemeInstaller.cpp
new file mode 100644
index 00000000..e92e7ee0
--- /dev/null
+++ b/src/ThemeInstaller.cpp
@@ -0,0 +1,128 @@
+#include "ThemeInstaller.h"
+
+#include <HalStorage.h>
+#include <Logging.h>
+
+#include <cctype>
+#include <cstdio>
+#include <cstring>
+
+#include "CrossPointSettings.h"
+
+ThemeInstaller::ThemeInstaller(SdCardThemeRegistry& registry) : registry_(registry) {}
+
+bool ThemeInstaller::isValidThemeId(const char* id) {
+  if (id == nullptr || id[0] == '\0') return false;
+  if (strstr(id, "..") != nullptr || strchr(id, '/') != nullptr || strchr(id, '\\') != nullptr) return false;
+  for (const char* p = id; *p; ++p) {
+    const char c = *p;
+    if (!std::isalnum(static_cast<unsigned char>(c)) && c != '-' && c != '_') return false;
+  }
+  return true;
+}
+
+bool ThemeInstaller::isValidRelativePath(const char* path) {
+  if (path == nullptr || path[0] == '\0' || path[0] == '/') return false;
+  if (strstr(path, "..") != nullptr || strchr(path, '\\') != nullptr) return false;
+
+  bool segmentHasChar = false;
+  for (const char* p = path; *p; ++p) {
+    const char c = *p;
+    if (c == '/') {
+      if (!segmentHasChar) return false;
+      segmentHasChar = false;
+      continue;
+    }
+    if (!std::isalnum(static_cast<unsigned char>(c)) && c != '-' && c != '_' && c != '.') return false;
+    segmentHasChar = true;
+  }
+  return segmentHasChar;
+}
+
+bool ThemeInstaller::ensureThemeDir(const char* themeId) {
+  if (!isValidThemeId(themeId)) return false;
+  const char* root = SdCardThemeRegistry::findThemeRoot(themeId);
+  if (!root) root = SdCardThemeRegistry::defaultWriteRoot();
+
+  if (!Storage.exists(root) && !Storage.mkdir(root)) {
+    LOG_ERR("THEME", "Failed to create themes dir: %s", root);
+    return false;
+  }
+
+  char dirPath[180];
+  const int written = snprintf(dirPath, sizeof(dirPath), "%s/%s", root, themeId);
+  if (written < 0 || static_cast<size_t>(written) >= sizeof(dirPath)) {
+    LOG_ERR("THEME", "Theme dir path too long: %s", themeId);
+    return false;
+  }
+  if (!Storage.exists(dirPath) && !Storage.mkdir(dirPath)) {
+    LOG_ERR("THEME", "Failed to create theme dir: %s", dirPath);
+    return false;
+  }
+  return true;
+}
+
+bool ThemeInstaller::ensureParentDirs(const char* fullPath) {
+  if (!fullPath) return false;
+  char dir[180];
+  const int written = snprintf(dir, sizeof(dir), "%s", fullPath);
+  if (written < 0 || static_cast<size_t>(written) >= sizeof(dir)) {
+    LOG_ERR("THEME", "Theme parent path too long");
+    return false;
+  }
+
+  char* slash = strrchr(dir, '/');
+  if (!slash) return true;
+  *slash = '\0';
+  return Storage.ensureDirectoryExists(dir);
+}
+
+bool ThemeInstaller::validateThemeFile(const char* path) {
+  HalFile file;
+  if (!Storage.openFileForRead("THEME", path, file)) return false;
+  const bool ok = file.fileSize() > 0;
+  file.close();
+  return ok;
+}
+
+bool ThemeInstaller::buildThemePath(const char* themeId, const char* relativePath, char* outBuf, size_t outBufSize) {
+  if (!themeId || !relativePath || !outBuf || outBufSize == 0) return false;
+  const char* root = SdCardThemeRegistry::findThemeRoot(themeId);
+  if (!root) root = SdCardThemeRegistry::defaultWriteRoot();
+  const int written = snprintf(outBuf, outBufSize, "%s/%s/%s", root, themeId, relativePath);
+  if (written < 0 || static_cast<size_t>(written) >= outBufSize) {
+    LOG_ERR("THEME", "Theme file path too long: %s/%s", themeId, relativePath);
+    return false;
+  }
+  return true;
+}
+
+ThemeInstaller::Error ThemeInstaller::deleteTheme(const char* themeId) {
+  if (!isValidThemeId(themeId)) return Error::INVALID_THEME_ID;
+
+  const char* roots[] = {SdCardThemeRegistry::THEMES_DIR_HIDDEN, SdCardThemeRegistry::THEMES_DIR_VISIBLE};
+  for (const char* root : roots) {
+    char dirPath[180];
+    const int written = snprintf(dirPath, sizeof(dirPath), "%s/%s", root, themeId);
+    if (written < 0 || static_cast<size_t>(written) >= sizeof(dirPath)) {
+      LOG_ERR("THEME", "Theme dir path too long: %s", themeId);
+      return Error::INVALID_THEME_ID;
+    }
+    if (!Storage.exists(dirPath)) continue;
+    if (!Storage.removeDir(dirPath)) {
+      LOG_ERR("THEME", "Failed to remove theme dir: %s", dirPath);
+      return Error::SD_WRITE_ERROR;
+    }
+  }
+
+  if (strcmp(SETTINGS.sdThemeName, themeId) == 0) {
+    SETTINGS.sdThemeName[0] = '\0';
+    SETTINGS.uiTheme = CrossPointSettings::LYRA;
+    SETTINGS.saveToFile();
+  }
+  return Error::OK;
+}
+
+void ThemeInstaller::refreshRegistry() { registry_.discover(); }
+
+bool ThemeInstaller::isThemeInstalled(const char* themeId) const { return registry_.findTheme(themeId) != nullptr; }
diff --git a/src/ThemeInstaller.h b/src/ThemeInstaller.h
new file mode 100644
index 00000000..9658a106
--- /dev/null
+++ b/src/ThemeInstaller.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <cstddef>
+
+#include "components/themes/SdCardThemeRegistry.h"
+
+class ThemeInstaller {
+ public:
+  enum class Error {
+    OK,
+    INVALID_THEME_ID,
+    INVALID_FILE,
+    SD_WRITE_ERROR,
+  };
+
+  explicit ThemeInstaller(SdCardThemeRegistry& registry);
+
+  static bool isValidThemeId(const char* id);
+  static bool isValidRelativePath(const char* path);
+  bool ensureThemeDir(const char* themeId);
+  bool ensureParentDirs(const char* fullPath);
+  bool validateThemeFile(const char* path);
+  static bool buildThemePath(const char* themeId, const char* relativePath, char* outBuf, size_t outBufSize);
+  Error deleteTheme(const char* themeId);
+  void refreshRegistry();
+  bool isThemeInstalled(const char* themeId) const;
+
+ private:
+  SdCardThemeRegistry& registry_;
+};
diff --git a/src/activities/ActivityManager.cpp b/src/activities/ActivityManager.cpp
index 96e85460..70acde87 100644
--- a/src/activities/ActivityManager.cpp
+++ b/src/activities/ActivityManager.cpp
@@ -9,6 +9,7 @@
 #include "boot_sleep/BootActivity.h"
 #include "boot_sleep/SleepActivity.h"
 #include "browser/OpdsBookBrowserActivity.h"
+#include "components/UITheme.h"
 #include "home/CrashActivity.h"
 #include "home/FileBrowserActivity.h"
 #include "home/HomeActivity.h"
@@ -170,6 +171,7 @@ void ActivityManager::replaceActivity(std::unique_ptr<Activity>&& newActivity) {
 }
 
 void ActivityManager::goToFileTransfer() {
+  UITheme::getInstance().releaseSdThemeAssetMemory();
   replaceActivity(std::make_unique<CrossPointWebServerActivity>(renderer, mappedInput));
 }
 
@@ -184,6 +186,7 @@ void ActivityManager::goToRecentBooks() {
 }
 
 void ActivityManager::goToBrowser() {
+  UITheme::getInstance().releaseSdThemeAssetMemory();
   const auto& servers = OPDS_STORE.getServers();
   // Skip the server picker when there's only one server configured
   if (servers.size() == 1) {
@@ -194,6 +197,7 @@ void ActivityManager::goToBrowser() {
 }
 
 void ActivityManager::goToReader(std::string path) {
+  UITheme::getInstance().releaseSdThemeAssetMemory();
   replaceActivity(std::make_unique<ReaderActivity>(renderer, mappedInput, std::move(path)));
 }
 
@@ -223,6 +227,7 @@ void ActivityManager::goHome(HomeMenuItem initialMenuItem) {
       initialMenuItem = HomeMenuItem::SETTINGS_MENU;
     }
   }
+  UITheme::getInstance().reload();
   replaceActivity(std::make_unique<HomeActivity>(renderer, mappedInput, initialMenuItem));
 }
 void ActivityManager::goToCrashReport() { replaceActivity(std::make_unique<CrashActivity>(renderer, mappedInput)); }
diff --git a/src/activities/home/FileBrowserActivity.cpp b/src/activities/home/FileBrowserActivity.cpp
index 256a6755..f0ab4bc5 100644
--- a/src/activities/home/FileBrowserActivity.cpp
+++ b/src/activities/home/FileBrowserActivity.cpp
@@ -7,6 +7,7 @@
 #include <Memory.h>
 
 #include <algorithm>
+#include <vector>
 
 #include "CrossPointSettings.h"
 #include "MappedInputManager.h"
@@ -355,30 +356,60 @@ void FileBrowserActivity::render(RenderLock&&) {
       (mode == Mode::PickFirmware)
           ? std::string(tr(STR_SELECT_FIRMWARE_FILE))
           : ((basepath == "/") ? std::string(tr(STR_SD_CARD)) : basepath.substr(basepath.rfind('/') + 1));
-  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, folderName.c_str());
+
+  const ThemeScreenSpec* screenSpec = UITheme::getInstance().getScreenSpec(ThemeScreenKind::FileBrowser);
+  ThemeLayoutSlots slots;
+  Rect headerRect{0, metrics.topPadding, pageWidth, metrics.headerHeight};
+  Rect listRect;
+  Rect pathRect;
+  Rect buttonsRect{0, pageHeight - metrics.buttonHintsHeight, pageWidth, metrics.buttonHintsHeight};
 
   const int pathLineHeight = renderer.getLineHeight(SMALL_FONT_ID);
   const int pathReserved = pathLineHeight + metrics.verticalSpacing;
-  const int contentTop = metrics.topPadding + metrics.headerHeight + metrics.verticalSpacing;
-  const int contentHeight =
-      pageHeight - contentTop - metrics.buttonHintsHeight - metrics.verticalSpacing - pathReserved;
-  if (files.empty()) {
+  if (screenSpec != nullptr) {
+    layoutThemeSlots(screenSpec->layout, Rect{0, 0, pageWidth, pageHeight}, metrics, slots);
+    headerRect = normalizeThemeHeaderSlot(findThemeSlot(slots, "header"), metrics);
+    listRect = findThemeSlot(slots, "list");
+    pathRect = findThemeSlot(slots, "path");
+    buttonsRect = findThemeSlot(slots, "buttons");
+    if (listRect.width <= 0 || listRect.height <= 0) {
+      LOG_ERR("FileBrowser", "Invalid SD file layout: slots=%d; using built-in layout", static_cast<int>(slots.size()));
+      screenSpec = nullptr;
+    }
+  }
+  if (screenSpec == nullptr) {
+    const int contentTop = metrics.topPadding + metrics.headerHeight + metrics.verticalSpacing;
+    const int contentHeight =
+        pageHeight - contentTop - metrics.buttonHintsHeight - metrics.verticalSpacing - pathReserved;
+    headerRect = Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight};
+    listRect = Rect{0, contentTop, pageWidth, contentHeight};
+    pathRect = Rect{metrics.contentSidePadding,
+                    pageHeight - metrics.buttonHintsHeight - metrics.verticalSpacing - pathLineHeight,
+                    pageWidth - metrics.contentSidePadding * 2, pathLineHeight};
+    buttonsRect = Rect{0, pageHeight - metrics.buttonHintsHeight, pageWidth, metrics.buttonHintsHeight};
+  }
+
+  if (headerRect.width > 0 && headerRect.height > 0) {
+    GUI.drawHeader(renderer, headerRect, folderName.c_str());
+  }
+  if (listRect.width <= 0 || listRect.height <= 0) {
+    // Malformed theme layout: no list slot to draw into.
+  } else if (files.empty()) {
     const char* emptyMsg = (mode == Mode::PickFirmware) ? tr(STR_NO_BIN_FILES) : tr(STR_NO_FILES_FOUND);
-    renderer.drawText(UI_10_FONT_ID, metrics.contentSidePadding, contentTop + 20, emptyMsg);
+    renderer.drawText(UI_10_FONT_ID, metrics.contentSidePadding, listRect.y + 20, emptyMsg);
   } else {
     GUI.drawList(
-        renderer, Rect{0, contentTop, pageWidth, contentHeight}, files.size(), selectorIndex,
-        [this](int index) { return getFileName(files[index]); }, nullptr,
-        [this](int index) { return UITheme::getFileIcon(files[index]); },
+        renderer, listRect, files.size(), selectorIndex, [this](int index) { return getFileName(files[index]); },
+        nullptr, [this](int index) { return UITheme::getFileIcon(files[index]); },
         [this](int index) { return getFileExtension(files[index]); }, false);
   }
 
   // Full path display
-  {
-    const int pathY = pageHeight - metrics.buttonHintsHeight - metrics.verticalSpacing - pathLineHeight;
-    const int separatorY = pathY - metrics.verticalSpacing / 2;
+  if (pathRect.width > 0 && pathRect.height > 0) {
+    const int pathY = pathRect.y;
+    const int separatorY = pathRect.y - metrics.verticalSpacing / 2;
     renderer.drawLine(0, separatorY, pageWidth - 1, separatorY, 3, true);
-    const int pathMaxWidth = pageWidth - metrics.contentSidePadding * 2;
+    const int pathMaxWidth = pathRect.width;
     // Left-truncate so the deepest directory is always visible
     const char* pathStr = basepath.c_str();
     const char* pathDisplay = pathStr;
@@ -397,7 +428,7 @@ void FileBrowserActivity::render(RenderLock&&) {
       snprintf(leftTruncBuf, sizeof(leftTruncBuf), "%s%s", ellipsis, p);
       pathDisplay = leftTruncBuf;
     }
-    renderer.drawText(SMALL_FONT_ID, metrics.contentSidePadding, pathY, pathDisplay);
+    renderer.drawText(SMALL_FONT_ID, pathRect.x, pathY, pathDisplay);
   }
 
   // Help text
@@ -408,7 +439,9 @@ void FileBrowserActivity::render(RenderLock&&) {
   const char* confirmLabel = files.empty() ? "" : (selectingFirmwareFile ? tr(STR_SELECT) : tr(STR_OPEN));
   const auto labels = mappedInput.mapLabels(backLabel, confirmLabel, files.empty() ? "" : tr(STR_DIR_UP),
                                             files.empty() ? "" : tr(STR_DIR_DOWN));
-  GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  if (buttonsRect.width > 0 && buttonsRect.height > 0) {
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  }
 
   renderer.displayBuffer();
 }
diff --git a/src/activities/home/HomeActivity.cpp b/src/activities/home/HomeActivity.cpp
index 28743264..af9baa25 100644
--- a/src/activities/home/HomeActivity.cpp
+++ b/src/activities/home/HomeActivity.cpp
@@ -1,34 +1,40 @@
 #include "HomeActivity.h"
 
-#include <Bitmap.h>
 #include <Epub.h>
 #include <FsHelpers.h>
 #include <GfxRenderer.h>
 #include <HalStorage.h>
 #include <I18n.h>
-#include <Utf8.h>
+#include <Memory.h>
 #include <Xtc.h>
 
-#include <cstring>
+#include <algorithm>
 #include <vector>
 
-#include "CrossPointSettings.h"
-#include "CrossPointState.h"
 #include "MappedInputManager.h"
 #include "OpdsServerStore.h"
 #include "RecentBooksStore.h"
 #include "components/UITheme.h"
-#include "fontIds.h"
 
-int HomeActivity::getMenuItemCount() const {
-  int count = 4;  // File Browser, Recents, File transfer, Settings
-  if (!recentBooks.empty()) {
-    count += recentBooks.size();
-  }
-  if (hasOpdsServers) {
-    count++;
-  }
-  return count;
+void HomeActivity::buildHomeActions(std::vector<ThemeHomeActionEntry>& actions) const {
+  buildThemeHomeActions(UITheme::getInstance().getHomeScreenSpec(), recentBooks, hasOpdsServers, actions);
+}
+
+const std::vector<ThemeHomeActionEntry>& HomeActivity::refreshHomeActions() {
+  buildHomeActions(homeActions);
+  return homeActions;
+}
+
+int HomeActivity::getMenuItemCount() { return static_cast<int>(refreshHomeActions().size()); }
+
+bool HomeActivity::storeCoverBufferCallback(void* userData) {
+  auto* activity = static_cast<HomeActivity*>(userData);
+  return activity != nullptr && activity->storeCoverBuffer();
+}
+
+bool HomeActivity::restoreCoverBufferCallback(void* userData) {
+  auto* activity = static_cast<HomeActivity*>(userData);
+  return activity != nullptr && activity->restoreCoverBuffer();
 }
 
 void HomeActivity::loadRecentBooks(int maxBooks) {
@@ -51,7 +57,7 @@ void HomeActivity::loadRecentBooks(int maxBooks) {
   }
 }
 
-void HomeActivity::loadRecentCovers(int coverHeight) {
+void HomeActivity::loadRecentCovers(const std::vector<int>& coverHeights) {
   recentsLoading = true;
   bool showingLoading = false;
   Rect popupRect;
@@ -59,8 +65,16 @@ void HomeActivity::loadRecentCovers(int coverHeight) {
   int progress = 0;
   for (RecentBook& book : recentBooks) {
     if (!book.coverBmpPath.empty()) {
-      std::string coverPath = UITheme::getCoverThumbPath(book.coverBmpPath, coverHeight);
-      if (!Storage.exists(coverPath.c_str())) {
+      bool hasMissingThumb = false;
+      for (const int coverHeight : coverHeights) {
+        std::string coverPath = UITheme::getCoverThumbPath(book.coverBmpPath, coverHeight);
+        if (!Storage.exists(coverPath.c_str())) {
+          hasMissingThumb = true;
+          break;
+        }
+      }
+
+      if (hasMissingThumb) {
         // If epub, try to load the metadata for title/author and cover
         if (FsHelpers::hasEpubExtension(book.path)) {
           Epub epub(book.path, "/.crosspoint");
@@ -73,7 +87,13 @@ void HomeActivity::loadRecentCovers(int coverHeight) {
             popupRect = GUI.drawPopup(renderer, tr(STR_LOADING_POPUP));
           }
           GUI.fillPopupProgress(renderer, popupRect, 10 + progress * (90 / recentBooks.size()));
-          bool success = epub.generateThumbBmp(coverHeight);
+          bool success = true;
+          for (const int coverHeight : coverHeights) {
+            std::string coverPath = UITheme::getCoverThumbPath(book.coverBmpPath, coverHeight);
+            if (!Storage.exists(coverPath.c_str())) {
+              success = epub.generateThumbBmp(coverHeight) && success;
+            }
+          }
           if (!success) {
             RECENT_BOOKS.updateBook(book.path, book.title, book.author, "");
             book.coverBmpPath = "";
@@ -90,7 +110,13 @@ void HomeActivity::loadRecentCovers(int coverHeight) {
               popupRect = GUI.drawPopup(renderer, tr(STR_LOADING_POPUP));
             }
             GUI.fillPopupProgress(renderer, popupRect, 10 + progress * (90 / recentBooks.size()));
-            bool success = xtc.generateThumbBmp(coverHeight);
+            bool success = true;
+            for (const int coverHeight : coverHeights) {
+              std::string coverPath = UITheme::getCoverThumbPath(book.coverBmpPath, coverHeight);
+              if (!Storage.exists(coverPath.c_str())) {
+                success = xtc.generateThumbBmp(coverHeight) && success;
+              }
+            }
             if (!success) {
               RECENT_BOOKS.updateBook(book.path, book.title, book.author, "");
               book.coverBmpPath = "";
@@ -115,9 +141,36 @@ void HomeActivity::onEnter() {
 
   const auto& metrics = UITheme::getInstance().getMetrics();
   loadRecentBooks(metrics.homeRecentBooksCount);
+  LOG_DBG("HOME", "Loaded %d/%d recent book(s) for home theme", static_cast<int>(recentBooks.size()),
+          metrics.homeRecentBooksCount);
 
-  const auto base = static_cast<int>(recentBooks.size());
-  selectorIndex = initialMenuItem == HomeMenuItem::NONE ? 0 : base + menuItemToIndex(initialMenuItem, hasOpdsServers);
+  const auto& actions = refreshHomeActions();
+  selectorIndex = 0;
+  const auto wantedAction = [this]() {
+    switch (initialMenuItem) {
+      case HomeMenuItem::RECENTS:
+        return ThemeHomeAction::RecentBooks;
+      case HomeMenuItem::OPDS_BROWSER:
+        return ThemeHomeAction::OpdsBrowser;
+      case HomeMenuItem::FILE_TRANSFER:
+        return ThemeHomeAction::FileTransfer;
+      case HomeMenuItem::SETTINGS_MENU:
+        return ThemeHomeAction::Settings;
+      case HomeMenuItem::FILE_BROWSER:
+      case HomeMenuItem::NONE:
+      default:
+        return ThemeHomeAction::FileBrowser;
+    }
+  }();
+  if (initialMenuItem != HomeMenuItem::NONE) {
+    for (int i = 0; i < static_cast<int>(actions.size()); ++i) {
+      if (actions[i].action == wantedAction) {
+        selectorIndex = i;
+        break;
+      }
+    }
+  }
+  coverSelectorIndex = recentBooks.empty() ? 0 : std::min(selectorIndex, static_cast<int>(recentBooks.size()) - 1);
 
   // Trigger first update
   requestUpdate();
@@ -137,72 +190,123 @@ bool HomeActivity::storeCoverBuffer() {
   freeCoverBuffer();
   const size_t needed = renderer.getRegionByteSize(coverRectX, coverRectY, coverRectW, coverRectH);
   if (needed == 0) return false;
-  coverBuffer = static_cast<uint8_t*>(malloc(needed));
+  coverBuffer = makeUniqueNoThrow<uint8_t[]>(needed);
   if (!coverBuffer) {
     LOG_ERR("HOME", "OOM: cover buffer (%u bytes)", (unsigned)needed);
     return false;
   }
   coverBufferSize = needed;
-  if (!renderer.copyRegionToBuffer(coverRectX, coverRectY, coverRectW, coverRectH, coverBuffer, coverBufferSize)) {
-    free(coverBuffer);
-    coverBuffer = nullptr;
+  if (!renderer.copyRegionToBuffer(coverRectX, coverRectY, coverRectW, coverRectH, coverBuffer.get(),
+                                   coverBufferSize)) {
+    coverBuffer.reset();
     coverBufferSize = 0;
     return false;
   }
+  coverBufferSelectorIndex = coverSelectorIndex;
+  const auto& actions = refreshHomeActions();
+  coverBufferStripSelected = selectorIndex >= 0 && selectorIndex < static_cast<int>(actions.size()) &&
+                             actions[selectorIndex].action == ThemeHomeAction::RecentBook;
   return true;
 }
 
 bool HomeActivity::restoreCoverBuffer() {
   if (!coverBuffer || coverRectW <= 0 || coverRectH <= 0) return false;
-  return renderer.copyBufferToRegion(coverRectX, coverRectY, coverRectW, coverRectH, coverBuffer, coverBufferSize);
+  return renderer.copyBufferToRegion(coverRectX, coverRectY, coverRectW, coverRectH, coverBuffer.get(),
+                                     coverBufferSize);
 }
 
 void HomeActivity::freeCoverBuffer() {
-  if (coverBuffer) {
-    free(coverBuffer);
-    coverBuffer = nullptr;
-  }
+  coverBuffer.reset();
   coverBufferSize = 0;
   coverBufferStored = false;
+  coverBufferSelectorIndex = -1;
+  coverBufferStripSelected = false;
 }
 
 void HomeActivity::loop() {
   const int menuCount = getMenuItemCount();
+  const ThemeHomeScreenSpec* homeSpec = UITheme::getInstance().getHomeScreenSpec();
 
-  buttonNavigator.onNext([this, menuCount] {
-    selectorIndex = ButtonNavigator::nextIndex(selectorIndex, menuCount);
-    requestUpdate();
-  });
+  auto updateCoverSelection = [this]() {
+    const auto& actions = refreshHomeActions();
+    if (selectorIndex < static_cast<int>(actions.size()) &&
+        actions[selectorIndex].action == ThemeHomeAction::RecentBook) {
+      coverSelectorIndex = actions[selectorIndex].value;
+    }
+  };
 
-  buttonNavigator.onPrevious([this, menuCount] {
-    selectorIndex = ButtonNavigator::previousIndex(selectorIndex, menuCount);
+  auto moveWithin = [this, &updateCoverSelection](bool wantRecentBook, int delta) {
+    const auto& actions = refreshHomeActions();
+    if (actions.empty()) return;
+
+    navigationIndices.clear();
+    navigationIndices.reserve(actions.size());
+    for (int i = 0; i < static_cast<int>(actions.size()); ++i) {
+      if ((actions[i].action == ThemeHomeAction::RecentBook) == wantRecentBook) {
+        navigationIndices.push_back(i);
+      }
+    }
+    if (navigationIndices.empty()) return;
+
+    auto current = std::find(navigationIndices.begin(), navigationIndices.end(), selectorIndex);
+    int groupIndex = current == navigationIndices.end() ? (delta > 0 ? -1 : 0)
+                                                        : static_cast<int>(current - navigationIndices.begin());
+    groupIndex =
+        (groupIndex + delta + static_cast<int>(navigationIndices.size())) % static_cast<int>(navigationIndices.size());
+    selectorIndex = navigationIndices[groupIndex];
+    updateCoverSelection();
     requestUpdate();
-  });
+  };
+
+  if (homeSpec != nullptr && homeSpec->navigation == ThemeHomeNavigationMode::SplitAxis) {
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Right}, [moveWithin] { moveWithin(false, 1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Left}, [moveWithin] { moveWithin(false, -1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Down}, [moveWithin] { moveWithin(true, 1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Up}, [moveWithin] { moveWithin(true, -1); });
+  } else if (homeSpec != nullptr && homeSpec->navigation == ThemeHomeNavigationMode::CarouselAxis) {
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Right}, [moveWithin] { moveWithin(true, 1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Left}, [moveWithin] { moveWithin(true, -1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Down}, [moveWithin] { moveWithin(false, 1); });
+    buttonNavigator.onPressAndContinuous({MappedInputManager::Button::Up}, [moveWithin] { moveWithin(false, -1); });
+  } else {
+    buttonNavigator.onNext([this, menuCount, &updateCoverSelection] {
+      selectorIndex = ButtonNavigator::nextIndex(selectorIndex, menuCount);
+      updateCoverSelection();
+      requestUpdate();
+    });
+
+    buttonNavigator.onPrevious([this, menuCount, &updateCoverSelection] {
+      selectorIndex = ButtonNavigator::previousIndex(selectorIndex, menuCount);
+      updateCoverSelection();
+      requestUpdate();
+    });
+  }
 
   if (mappedInput.wasReleased(MappedInputManager::Button::Confirm)) {
-    if (selectorIndex < recentBooks.size()) {
-      onSelectBook(recentBooks[selectorIndex].path);
-    } else {
-      const int menuIndex = selectorIndex - static_cast<int>(recentBooks.size());
-      switch (indexToMenuItem(menuIndex, hasOpdsServers)) {
-        case HomeMenuItem::FILE_BROWSER:
-          onFileBrowserOpen();
-          break;
-        case HomeMenuItem::RECENTS:
-          onRecentsOpen();
-          break;
-        case HomeMenuItem::OPDS_BROWSER:
-          onOpdsBrowserOpen();
-          break;
-        case HomeMenuItem::FILE_TRANSFER:
-          onFileTransferOpen();
-          break;
-        case HomeMenuItem::SETTINGS_MENU:
-          onSettingsOpen();
-          break;
-        default:
-          break;
-      }
+    const auto& actions = refreshHomeActions();
+    if (selectorIndex < 0 || selectorIndex >= static_cast<int>(actions.size())) return;
+    const auto& entry = actions[selectorIndex];
+    switch (entry.action) {
+      case ThemeHomeAction::RecentBook:
+        if (entry.value >= 0 && entry.value < static_cast<int>(recentBooks.size()))
+          onSelectBook(recentBooks[entry.value].path);
+        break;
+      case ThemeHomeAction::RecentBooks:
+        onRecentsOpen();
+        break;
+      case ThemeHomeAction::OpdsBrowser:
+        onOpdsBrowserOpen();
+        break;
+      case ThemeHomeAction::FileTransfer:
+        onFileTransferOpen();
+        break;
+      case ThemeHomeAction::Settings:
+        onSettingsOpen();
+        break;
+      case ThemeHomeAction::FileBrowser:
+      default:
+        onFileBrowserOpen();
+        break;
     }
   }
 }
@@ -211,24 +315,86 @@ void HomeActivity::render(RenderLock&&) {
   const auto& metrics = UITheme::getInstance().getMetrics();
   const auto pageWidth = renderer.getScreenWidth();
   const auto pageHeight = renderer.getScreenHeight();
+  constexpr int coverCacheBleed = 12;
+  const ThemeHomeScreenSpec* homeSpec = UITheme::getInstance().getHomeScreenSpec();
+
+  if (homeSpec != nullptr) {
+    const auto& actions = refreshHomeActions();
+    ThemeHomeRenderContext context{renderer,
+                                   mappedInput,
+                                   metrics,
+                                   *homeSpec,
+                                   recentBooks,
+                                   actions,
+                                   hasOpdsServers,
+                                   selectorIndex,
+                                   coverSelectorIndex,
+                                   coverRendered,
+                                   coverBufferStored,
+                                   coverBufferSelectorIndex,
+                                   coverBufferStripSelected,
+                                   coverRectX,
+                                   coverRectY,
+                                   coverRectW,
+                                   coverRectH,
+                                   this,
+                                   &HomeActivity::storeCoverBufferCallback,
+                                   &HomeActivity::restoreCoverBufferCallback};
+    if (renderThemeHome(context)) {
+      if (!firstRenderDone) {
+        firstRenderDone = true;
+        requestUpdate();
+      } else if (!recentsLoaded && !recentsLoading && !UITheme::getInstance().getHomeCoverThumbHeights().empty()) {
+        recentsLoading = true;
+        loadRecentCovers(UITheme::getInstance().getHomeCoverThumbHeights());
+      }
+      return;
+    }
+  }
+
+  const bool hasCoverArea = metrics.homeCoverTileHeight > 0 && metrics.homeCoverHeight > 0;
 
   renderer.clearScreen();
-  bool bufferRestored = coverBufferStored && restoreCoverBuffer();
-
-  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.homeTopPadding},
-                 metrics.homeContinueReadingInMenu && !recentBooks.empty() ? recentBooks[0].title.c_str() : nullptr);
 
   // Record the tile rect so storeCoverBuffer (called from the theme) knows
-  // which sub-region of the framebuffer to snapshot. ~16 KB in Portrait
-  // instead of the 48 KB full framebuffer the previous bind captured.
+  // which sub-region of the framebuffer to snapshot. Include a small bleed
+  // because cover-strip themes can draw selection outlines just outside the
+  // nominal cover tile.
   coverRectX = 0;
-  coverRectY = metrics.homeTopPadding;
+  coverRectY = hasCoverArea ? std::max(0, metrics.homeTopPadding - coverCacheBleed) : 0;
   coverRectW = pageWidth;
-  coverRectH = metrics.homeCoverTileHeight;
+  coverRectH = hasCoverArea
+                   ? std::min(pageHeight - coverRectY,
+                              metrics.homeCoverTileHeight + (metrics.homeTopPadding - coverRectY) + coverCacheBleed)
+                   : 0;
 
-  GUI.drawRecentBookCover(renderer, Rect{0, metrics.homeTopPadding, pageWidth, metrics.homeCoverTileHeight},
-                          recentBooks, selectorIndex, coverRendered, coverBufferStored, bufferRestored,
-                          std::bind(&HomeActivity::storeCoverBuffer, this));
+  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.homeTopPadding},
+                 metrics.homeContinueReadingInMenu && metrics.homeShowContinueReadingHeader && !recentBooks.empty()
+                     ? recentBooks[std::min(coverSelectorIndex, static_cast<int>(recentBooks.size()) - 1)].title.c_str()
+                     : nullptr);
+
+  const bool selectorSensitiveCoverCache = GUI.homeCoverCacheDependsOnSelector();
+  const bool coverStripSelected = metrics.homeContinueReadingInMenu
+                                      ? selectorIndex == 0 && !recentBooks.empty()
+                                      : selectorIndex < static_cast<int>(recentBooks.size());
+  const bool coverCacheMatches = !selectorSensitiveCoverCache || (coverBufferSelectorIndex == coverSelectorIndex &&
+                                                                  coverBufferStripSelected == coverStripSelected);
+  if (hasCoverArea && coverBufferStored && !coverCacheMatches) {
+    freeCoverBuffer();
+    coverRendered = false;
+  }
+  bool bufferRestored = hasCoverArea && coverBufferStored && coverCacheMatches && restoreCoverBuffer();
+
+  if (hasCoverArea) {
+    GUI.drawRecentBookCover(
+        renderer, Rect{0, metrics.homeTopPadding, pageWidth, metrics.homeCoverTileHeight}, recentBooks,
+        coverSelectorIndex, coverRendered, coverBufferStored, bufferRestored, [this]() { return storeCoverBuffer(); },
+        coverStripSelected);
+  } else {
+    coverRendered = false;
+    coverBufferStored = false;
+    bufferRestored = false;
+  }
 
   // Build menu items dynamically
   std::vector<const char*> menuItems = {tr(STR_BROWSE_FILES), tr(STR_MENU_RECENT_BOOKS), tr(STR_FILE_TRANSFER),
@@ -264,9 +430,9 @@ void HomeActivity::render(RenderLock&&) {
   if (!firstRenderDone) {
     firstRenderDone = true;
     requestUpdate();
-  } else if (!recentsLoaded && !recentsLoading) {
+  } else if (!recentsLoaded && !recentsLoading && !UITheme::getInstance().getHomeCoverThumbHeights().empty()) {
     recentsLoading = true;
-    loadRecentCovers(metrics.homeCoverHeight);
+    loadRecentCovers(UITheme::getInstance().getHomeCoverThumbHeights());
   }
 }
 
diff --git a/src/activities/home/HomeActivity.h b/src/activities/home/HomeActivity.h
index 6d170cdd..dc5a3f7a 100644
--- a/src/activities/home/HomeActivity.h
+++ b/src/activities/home/HomeActivity.h
@@ -1,25 +1,28 @@
 #pragma once
-#include <functional>
+#include <memory>
 #include <vector>
 
 #include "./FileBrowserActivity.h"
+#include "./ThemeHomeRenderer.h"
 #include "activities/Activity.h"
 #include "util/ButtonNavigator.h"
 
 struct RecentBook;
-struct Rect;
 
 class HomeActivity final : public Activity {
   ButtonNavigator buttonNavigator;
   int selectorIndex = 0;
+  int coverSelectorIndex = 0;
   bool recentsLoading = false;
   bool recentsLoaded = false;
   bool firstRenderDone = false;
   bool hasOpdsServers = false;
-  bool coverRendered = false;      // Track if cover has been rendered once
-  bool coverBufferStored = false;  // Track if cover buffer is stored
-  uint8_t* coverBuffer = nullptr;  // HomeActivity's own buffer for cover image
-  size_t coverBufferSize = 0;      // Bytes allocated to coverBuffer
+  bool coverRendered = false;
+  bool coverBufferStored = false;
+  std::unique_ptr<uint8_t[]> coverBuffer;
+  size_t coverBufferSize = 0;
+  int coverBufferSelectorIndex = -1;
+  bool coverBufferStripSelected = false;
   // Logical rect last passed to drawRecentBookCover. The cover snapshot only
   // needs to cover this region, not the entire framebuffer, so we cache the
   // tile instead of all 48 KB. Set in render() before the call.
@@ -28,33 +31,10 @@ class HomeActivity final : public Activity {
   int coverRectW = 0;
   int coverRectH = 0;
   std::vector<RecentBook> recentBooks;
+  std::vector<ThemeHomeActionEntry> homeActions;
+  std::vector<int> navigationIndices;
   const HomeMenuItem initialMenuItem;
 
-  // Convert HomeMenuItem to menu index (used in onEnter)
-  static int menuItemToIndex(HomeMenuItem item, bool hasOpdsUrl) {
-    int i = 0;
-    if (item == HomeMenuItem::FILE_BROWSER) return i;
-    ++i;
-    if (item == HomeMenuItem::RECENTS) return i;
-    ++i;
-    if (item == HomeMenuItem::OPDS_BROWSER) return hasOpdsUrl ? i : 0;
-    if (hasOpdsUrl) ++i;
-    if (item == HomeMenuItem::FILE_TRANSFER) return i;
-    ++i;
-    if (item == HomeMenuItem::SETTINGS_MENU) return i;
-    return 0;
-  }
-
-  // Convert menu index to HomeMenuItem (used in loop)
-  static HomeMenuItem indexToMenuItem(int idx, bool hasOpdsUrl) {
-    int i = 0;
-    if (idx == i++) return HomeMenuItem::FILE_BROWSER;
-    if (idx == i++) return HomeMenuItem::RECENTS;
-    if (hasOpdsUrl && idx == i++) return HomeMenuItem::OPDS_BROWSER;
-    if (idx == i++) return HomeMenuItem::FILE_TRANSFER;
-    if (idx == i) return HomeMenuItem::SETTINGS_MENU;
-    return HomeMenuItem::NONE;
-  }
   void onSelectBook(const std::string& path);
   void onFileBrowserOpen();
   void onRecentsOpen();
@@ -62,12 +42,16 @@ class HomeActivity final : public Activity {
   void onFileTransferOpen();
   void onOpdsBrowserOpen();
 
-  int getMenuItemCount() const;
-  bool storeCoverBuffer();    // Store frame buffer for cover image
-  bool restoreCoverBuffer();  // Restore frame buffer from stored cover
-  void freeCoverBuffer();     // Free the stored cover buffer
+  void buildHomeActions(std::vector<ThemeHomeActionEntry>& actions) const;
+  const std::vector<ThemeHomeActionEntry>& refreshHomeActions();
+  int getMenuItemCount();
+  static bool storeCoverBufferCallback(void* userData);
+  static bool restoreCoverBufferCallback(void* userData);
+  bool storeCoverBuffer();
+  bool restoreCoverBuffer();
+  void freeCoverBuffer();
   void loadRecentBooks(int maxBooks);
-  void loadRecentCovers(int coverHeight);
+  void loadRecentCovers(const std::vector<int>& coverHeights);
 
  public:
   explicit HomeActivity(GfxRenderer& renderer, MappedInputManager& mappedInput,
diff --git a/src/activities/home/RecentBookCoverPainter.cpp b/src/activities/home/RecentBookCoverPainter.cpp
new file mode 100644
index 00000000..ec119367
--- /dev/null
+++ b/src/activities/home/RecentBookCoverPainter.cpp
@@ -0,0 +1,91 @@
+#include "RecentBookCoverPainter.h"
+
+#include <Bitmap.h>
+#include <GfxRenderer.h>
+#include <HalStorage.h>
+
+#include <algorithm>
+
+#include "RecentBooksStore.h"
+#include "components/UITheme.h"
+#include "components/icons/cover.h"
+
+namespace {
+constexpr int kCoverIconSourceSize = 32;
+
+void drawScaledCoverIcon(const GfxRenderer& renderer, int x, int y, int size) {
+  if (size <= 0) return;
+  constexpr int bytesPerRow = kCoverIconSourceSize / 8;
+  for (int destY = 0; destY < size; ++destY) {
+    const int sourceY = destY * kCoverIconSourceSize / size;
+    for (int destX = 0; destX < size; ++destX) {
+      const int sourceX = destX * kCoverIconSourceSize / size;
+      const uint8_t rowByte = CoverIcon[sourceY * bytesPerRow + sourceX / 8];
+      const bool background = (rowByte >> (7 - (sourceX % 8))) & 0x01;
+      if (background) continue;
+      renderer.drawPixel(x + size - 1 - destY, y + destX, true);
+    }
+  }
+}
+}  // namespace
+
+void drawDefaultRecentCover(const GfxRenderer& renderer, freeink::ui::Rect rect, int placeholderIconSize) {
+  renderer.fillRect(rect.x, rect.y, rect.width, rect.height, false);
+  const freeink::ui::Rect coverRect = rect;
+  renderer.drawRect(coverRect.x, coverRect.y, coverRect.width, coverRect.height, true);
+  renderer.fillRect(coverRect.x, coverRect.y + coverRect.height / 3, coverRect.width, 2 * coverRect.height / 3, true);
+  const int whiteBandHeight = std::max(1, coverRect.height / 3);
+  const int maxIconSize = std::max(1, std::min({coverRect.width - 12, whiteBandHeight - 4, coverRect.height - 12}));
+  const int iconSize = std::min(placeholderIconSize > 0 ? placeholderIconSize : 32, maxIconSize);
+  drawScaledCoverIcon(renderer, coverRect.x + std::max(0, (coverRect.width - iconSize) / 2),
+                      coverRect.y + std::max(0, (whiteBandHeight - iconSize) / 2), iconSize);
+}
+
+bool paintRecentBookCoverByIndex(freeink::ui::Rect rect, int bookIndex, void* userData) {
+  auto* data = static_cast<RecentBookCoverPainterData*>(userData);
+  if (data == nullptr || data->renderer == nullptr || data->books == nullptr) return false;
+  if (bookIndex < 0 || bookIndex >= static_cast<int>(data->books->size())) return false;
+
+  const RecentBook& book = (*data->books)[bookIndex];
+  if (book.coverBmpPath.empty()) {
+    drawDefaultRecentCover(*data->renderer, rect, data->placeholderIconSize);
+    return true;
+  }
+
+  const int thumbHeight = data->coverHeight > 0 ? data->coverHeight : rect.height;
+  const std::string coverBmpPath = UITheme::getCoverThumbPath(book.coverBmpPath, thumbHeight);
+  HalFile file;
+  if (!Storage.openFileForRead("HOME", coverBmpPath, file)) {
+    drawDefaultRecentCover(*data->renderer, rect, data->placeholderIconSize);
+    return true;
+  }
+
+  Bitmap bitmap(file);
+  if (bitmap.parseHeaders() != BmpReaderError::Ok) {
+    drawDefaultRecentCover(*data->renderer, rect, data->placeholderIconSize);
+    return true;
+  }
+
+  data->renderer->fillRect(rect.x, rect.y, rect.width, rect.height, false);
+  float cropX = 0.0f;
+  float cropY = 0.0f;
+  const float bitmapAspect = static_cast<float>(bitmap.getWidth()) / static_cast<float>(bitmap.getHeight());
+  const float targetAspect = static_cast<float>(rect.width) / static_cast<float>(rect.height);
+  if (bitmapAspect > targetAspect) {
+    cropX = std::max(0.0f, 1.0f - targetAspect / bitmapAspect);
+  } else if (bitmapAspect < targetAspect) {
+    cropY = std::max(0.0f, 1.0f - bitmapAspect / targetAspect);
+  }
+  data->renderer->drawBitmap(bitmap, rect.x, rect.y, rect.width, rect.height, cropX, cropY);
+  return true;
+}
+
+bool paintRecentCoverGridCover(freeink::ui::DrawTarget&, freeink::ui::Rect rect, const freeink::ui::CoverGridItem& item,
+                               uint16_t, void* userData) {
+  return paintRecentBookCoverByIndex(rect, item.actionValue, userData);
+}
+
+bool paintBookCardCover(freeink::ui::DrawTarget&, freeink::ui::Rect rect, const freeink::ui::BookCardProps& props,
+                        void* userData) {
+  return paintRecentBookCoverByIndex(rect, props.value, userData);
+}
diff --git a/src/activities/home/RecentBookCoverPainter.h b/src/activities/home/RecentBookCoverPainter.h
new file mode 100644
index 00000000..78e5b7e4
--- /dev/null
+++ b/src/activities/home/RecentBookCoverPainter.h
@@ -0,0 +1,22 @@
+#pragma once
+
+#include <FreeInkUI.h>
+
+#include <vector>
+
+class GfxRenderer;
+struct RecentBook;
+
+struct RecentBookCoverPainterData {
+  const GfxRenderer* renderer = nullptr;
+  const std::vector<RecentBook>* books = nullptr;
+  int coverHeight = 0;
+  int placeholderIconSize = 0;
+};
+
+void drawDefaultRecentCover(const GfxRenderer& renderer, freeink::ui::Rect rect, int placeholderIconSize = 0);
+bool paintRecentBookCoverByIndex(freeink::ui::Rect rect, int bookIndex, void* userData);
+bool paintRecentCoverGridCover(freeink::ui::DrawTarget& target, freeink::ui::Rect rect,
+                               const freeink::ui::CoverGridItem& item, uint16_t index, void* userData);
+bool paintBookCardCover(freeink::ui::DrawTarget& target, freeink::ui::Rect rect,
+                        const freeink::ui::BookCardProps& props, void* userData);
diff --git a/src/activities/home/RecentBooksActivity.cpp b/src/activities/home/RecentBooksActivity.cpp
index 7b4a0117..5ffdc02f 100644
--- a/src/activities/home/RecentBooksActivity.cpp
+++ b/src/activities/home/RecentBooksActivity.cpp
@@ -1,13 +1,17 @@
 #include "RecentBooksActivity.h"
 
+#include <FreeInkUIGfxRenderer.h>
 #include <GfxRenderer.h>
 #include <HalStorage.h>
 #include <I18n.h>
+#include <Logging.h>
 
 #include <algorithm>
 #include <memory>
+#include <vector>
 
 #include "MappedInputManager.h"
+#include "RecentBookCoverPainter.h"
 #include "RecentBooksStore.h"
 #include "activities/util/ConfirmationActivity.h"
 #include "components/UITheme.h"
@@ -16,10 +20,118 @@
 namespace {
 // Hold threshold for the long-press "remove from list" action (firmware convention).
 constexpr unsigned long LONG_PRESS_MS = 1000;
+
+struct RecentBooksRects {
+  Rect header;
+  Rect list;
+  Rect buttons;
+  bool themed = false;
+};
+
+struct RecentBooksCoverGridItemProviderData {
+  const std::vector<RecentBook>* recentBooks = nullptr;
+};
+
+freeink::ui::CoverGridItem provideRecentBooksCoverGridItem(uint16_t index, void* userData) {
+  auto* data = static_cast<RecentBooksCoverGridItemProviderData*>(userData);
+  if (data == nullptr || data->recentBooks == nullptr || index >= data->recentBooks->size()) return {};
+  return freeink::ui::coverGridItem((*data->recentBooks)[index].title.c_str(), index);
+}
+
+const ThemeCoverGridWidgetSpec* recentBooksCoverGridWidget(const ThemeScreenSpec* screenSpec) {
+  if (screenSpec == nullptr) return nullptr;
+  const auto it = std::find_if(screenSpec->widgets.begin(), screenSpec->widgets.end(),
+                               [](const auto& widget) { return widget.type == ThemeScreenWidgetType::CoverGrid; });
+  return it == screenSpec->widgets.end() ? nullptr : &it->coverGrid;
+}
+
+ThemeCoverGridWidgetSpec normalizedRecentBooksCoverGridSpec(const ThemeCoverGridWidgetSpec& source) {
+  ThemeCoverGridWidgetSpec spec = source;
+  if (!spec.configured) {
+    spec.columns = 3;
+    spec.gap = 14;
+    spec.rowGap = 20;
+    spec.coverWidth = 92;
+    spec.coverHeight = 132;
+    spec.rowHeight = 172;
+    spec.labelHeight = 34;
+    spec.labelLines = 2;
+    spec.selectedRadius = 0;
+    spec.selectionStyle = ThemeWidgetSelectionStyle::CoverFrame;
+    spec.cellInset.top = 5;
+    spec.labelInset.left = 5;
+    spec.labelInset.right = 5;
+  }
+  spec.columns = std::max(1, spec.columns);
+  spec.rowGap = spec.rowGap >= 0 ? spec.rowGap : std::max(0, spec.gap);
+  spec.coverHeight = spec.coverHeight > 0 ? spec.coverHeight : 132;
+  spec.coverWidth = spec.coverWidth > 0 ? spec.coverWidth : std::max(1, spec.coverHeight * 62 / 100);
+  spec.placeholderIconSize = std::max(0, spec.placeholderIconSize);
+  spec.labelHeight = std::max(0, spec.labelHeight);
+  spec.labelGap = std::max(0, spec.labelGap);
+  spec.labelLines = std::max(1, std::min(3, spec.labelLines));
+  spec.rowHeight = spec.rowHeight > 0 ? spec.rowHeight : spec.coverHeight + spec.labelHeight + 6;
+  return spec;
+}
+
+RecentBooksRects resolveRecentBooksRects(GfxRenderer& renderer, const ThemeMetrics& metrics,
+                                         const ThemeScreenSpec*& screenSpec) {
+  const auto pageWidth = renderer.getScreenWidth();
+  const auto pageHeight = renderer.getScreenHeight();
+  RecentBooksRects rects;
+
+  if (screenSpec != nullptr) {
+    ThemeLayoutSlots slots;
+    layoutThemeSlots(screenSpec->layout, Rect{0, 0, pageWidth, pageHeight}, metrics, slots);
+    rects.header = normalizeThemeHeaderSlot(findThemeSlot(slots, "header"), metrics);
+    rects.list = findThemeSlot(slots, "list");
+    rects.buttons = findThemeSlot(slots, "buttons");
+    if (rects.list.width > 0 && rects.list.height > 0) {
+      rects.themed = true;
+      return rects;
+    }
+    LOG_ERR("RecentBooks", "Invalid SD recent layout: slots=%d; using built-in layout", static_cast<int>(slots.size()));
+    screenSpec = nullptr;
+  }
+
+  const int contentTop = metrics.topPadding + metrics.headerHeight + metrics.verticalSpacing;
+  const int contentHeight = pageHeight - contentTop - metrics.buttonHintsHeight - metrics.verticalSpacing;
+  rects.header = Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight};
+  rects.list = Rect{0, contentTop, pageWidth, contentHeight};
+  rects.buttons = Rect{0, pageHeight - metrics.buttonHintsHeight, pageWidth, metrics.buttonHintsHeight};
+  return rects;
+}
+
+int recentBooksCoverGridPageItems(Rect listRect, const ThemeCoverGridWidgetSpec& spec) {
+  return std::max<int>(1, freeink::ui::coverGridVisibleCells(
+                              freeink::ui::makeRect(listRect.x, listRect.y, listRect.width, listRect.height),
+                              std::min<int>(std::max(1, spec.columns), 12), freeink::ui::clampI16(spec.rowHeight, 1),
+                              freeink::ui::clampI16(spec.rowGap)));
+}
+
+freeink::ui::Insets toFreeInkInsets(const ThemeEdgeInsets& insets) {
+  return freeink::ui::makeInsets(insets.top, insets.right, insets.bottom, insets.left);
+}
+
+freeink::ui::StyleSet recentBooksGridStyles(const ThemeCoverGridWidgetSpec& spec) {
+  return freeink::ui::selectedOutlineListRowStyles(spec.selectedRadius);
+}
+
 }  // namespace
 
 void RecentBooksActivity::loadRecentBooks() { recentBooks = RECENT_BOOKS.getBooks(); }
 
+int RecentBooksActivity::getPageItems() {
+  auto& theme = UITheme::getInstance();
+  const ThemeScreenSpec* screenSpec = theme.getScreenSpec(ThemeScreenKind::RecentBooks);
+  const auto rects = resolveRecentBooksRects(renderer, theme.getMetrics(), screenSpec);
+  if (rects.themed) {
+    const ThemeCoverGridWidgetSpec* grid = recentBooksCoverGridWidget(screenSpec);
+    if (grid != nullptr) return recentBooksCoverGridPageItems(rects.list, normalizedRecentBooksCoverGridSpec(*grid));
+  }
+  return theme.getNumberOfItemsPerPage(renderer, true, false, true, true);
+}
+
 void RecentBooksActivity::onEnter() {
   Activity::onEnter();
 
@@ -42,7 +154,7 @@ void RecentBooksActivity::onExit() {
 }
 
 void RecentBooksActivity::loop() {
-  const int pageItems = UITheme::getInstance().getNumberOfItemsPerPage(renderer, true, false, true, true);
+  const int pageItems = getPageItems();
 
   // After a long-press has fired, swallow input until Confirm is physically released
   // (so the release doesn't also open the book; re-arm only once the button is up).
@@ -124,28 +236,68 @@ void RecentBooksActivity::promptRemoveBook(const std::string& path, const std::s
 void RecentBooksActivity::render(RenderLock&&) {
   renderer.clearScreen();
 
-  const auto pageWidth = renderer.getScreenWidth();
-  const auto pageHeight = renderer.getScreenHeight();
-  const auto& metrics = UITheme::getInstance().getMetrics();
+  auto& theme = UITheme::getInstance();
+  const auto& metrics = theme.getMetrics();
+  const ThemeScreenSpec* screenSpec = theme.getScreenSpec(ThemeScreenKind::RecentBooks);
+  const auto rects = resolveRecentBooksRects(renderer, metrics, screenSpec);
+  const ThemeCoverGridWidgetSpec* coverGridWidget = rects.themed ? recentBooksCoverGridWidget(screenSpec) : nullptr;
 
-  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, tr(STR_MENU_RECENT_BOOKS));
-
-  const int contentTop = metrics.topPadding + metrics.headerHeight + metrics.verticalSpacing;
-  const int contentHeight = pageHeight - contentTop - metrics.buttonHintsHeight - metrics.verticalSpacing;
+  if (rects.header.width > 0 && rects.header.height > 0) {
+    GUI.drawHeader(renderer, rects.header, tr(STR_MENU_RECENT_BOOKS));
+  }
 
   // Recent tab
-  if (recentBooks.empty()) {
-    renderer.drawText(UI_10_FONT_ID, metrics.contentSidePadding, contentTop + 20, tr(STR_NO_RECENT_BOOKS));
+  if (rects.list.width <= 0 || rects.list.height <= 0) {
+    // Malformed theme layout: no list slot to draw into.
+  } else if (recentBooks.empty()) {
+    renderer.drawText(UI_10_FONT_ID, metrics.contentSidePadding, rects.list.y + 20, tr(STR_NO_RECENT_BOOKS));
+  } else if (coverGridWidget != nullptr) {
+#if FREEINK_HAVE_GFX_RENDERER
+    const auto gridSpec = normalizedRecentBooksCoverGridSpec(*coverGridWidget);
+    freeink::ui::GfxRendererFrame<> ui(renderer, SMALL_FONT_ID, UI_10_FONT_ID, UI_12_FONT_ID);
+    RecentBookCoverPainterData painterData{
+        &renderer, &recentBooks, UITheme::getInstance().getRecentBooksCoverThumbHeight(), gridSpec.placeholderIconSize};
+    RecentBooksCoverGridItemProviderData itemProviderData{&recentBooks};
+    const int pageItems = recentBooksCoverGridPageItems(rects.list, gridSpec);
+    freeink::ui::CoverGridProps props;
+    props.itemProvider = provideRecentBooksCoverGridItem;
+    props.itemProviderUserData = &itemProviderData;
+    props.count = static_cast<uint16_t>(std::min<size_t>(recentBooks.size(), 65535));
+    props.topIndex = freeink::ui::coverGridTopIndexFor(
+        static_cast<uint16_t>(selectorIndex), static_cast<uint16_t>(std::min<size_t>(recentBooks.size(), 65535)),
+        std::min<int>(std::max(1, gridSpec.columns), 12), static_cast<uint16_t>(pageItems));
+    props.selectedIndex = static_cast<int16_t>(selectorIndex);
+    props.columns = static_cast<uint8_t>(std::min(std::max(1, gridSpec.columns), 12));
+    props.gap = freeink::ui::clampI16(gridSpec.gap);
+    props.rowGap = freeink::ui::clampI16(gridSpec.rowGap);
+    props.cellInset = toFreeInkInsets(gridSpec.cellInset);
+    props.labelInset = toFreeInkInsets(gridSpec.labelInset);
+    props.coverSize = freeink::ui::makeSize(gridSpec.coverWidth, gridSpec.coverHeight);
+    props.rowHeight = freeink::ui::clampI16(gridSpec.rowHeight, 1);
+    props.labelHeight = freeink::ui::clampI16(gridSpec.labelHeight);
+    props.labelGap = freeink::ui::clampI16(gridSpec.labelGap);
+    props.titleText.font = freeink::ui::GfxRendererTarget::FONT_SMALL;
+    props.titleText.maxLines = static_cast<uint8_t>(std::max(1, std::min(3, gridSpec.labelLines)));
+    props.cellStyles = recentBooksGridStyles(gridSpec);
+    props.selectionIndicator = freeink::ui::CoverGridSelectionIndicator::CoverFrame;
+    props.selectedCoverFrameRadius = freeink::ui::clampRadius(gridSpec.selectedRadius);
+    props.coverPainter = paintRecentCoverGridCover;
+    props.coverPainterUserData = &painterData;
+    freeink::ui::coverGrid(
+        ui.frame, freeink::ui::makeRect(rects.list.x, rects.list.y, rects.list.width, rects.list.height), props);
+#endif
   } else {
     GUI.drawList(
-        renderer, Rect{0, contentTop, pageWidth, contentHeight}, recentBooks.size(), selectorIndex,
-        [this](int index) { return recentBooks[index].title; }, [this](int index) { return recentBooks[index].author; },
+        renderer, rects.list, recentBooks.size(), selectorIndex, [this](int index) { return recentBooks[index].title; },
+        [this](int index) { return recentBooks[index].author; },
         [this](int index) { return UITheme::getFileIcon(recentBooks[index].path); });
   }
 
   // Help text
   const auto labels = mappedInput.mapLabels(tr(STR_HOME), tr(STR_OPEN), tr(STR_DIR_UP), tr(STR_DIR_DOWN));
-  GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  if (rects.buttons.width > 0 && rects.buttons.height > 0) {
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  }
 
   renderer.displayBuffer();
 }
diff --git a/src/activities/home/RecentBooksActivity.h b/src/activities/home/RecentBooksActivity.h
index 0ccc07cc..53364ff6 100644
--- a/src/activities/home/RecentBooksActivity.h
+++ b/src/activities/home/RecentBooksActivity.h
@@ -24,6 +24,7 @@ class RecentBooksActivity final : public Activity {
 
   // Data loading
   void loadRecentBooks();
+  int getPageItems();
 
   // Show an OK/Cancel prompt to remove the given book from the Recent Books list.
   void promptRemoveBook(const std::string& path, const std::string& title);
diff --git a/src/activities/home/ThemeHomeRenderer.cpp b/src/activities/home/ThemeHomeRenderer.cpp
new file mode 100644
index 00000000..08040840
--- /dev/null
+++ b/src/activities/home/ThemeHomeRenderer.cpp
@@ -0,0 +1,561 @@
+#include "ThemeHomeRenderer.h"
+
+#include <FreeInkUIGfxRenderer.h>
+#include <GfxRenderer.h>
+#include <HalClock.h>
+#include <I18n.h>
+#include <Logging.h>
+
+#include <algorithm>
+#include <array>
+#include <cstring>
+#include <vector>
+
+#include "CrossPointSettings.h"
+#include "MappedInputManager.h"
+#include "RecentBookCoverPainter.h"
+#include "RecentBooksStore.h"
+#include "components/UITheme.h"
+#include "components/icons/book.h"
+#include "components/icons/folder.h"
+#include "components/icons/library.h"
+#include "components/icons/recent.h"
+#include "components/icons/settings2.h"
+#include "components/icons/transfer.h"
+#include "fontIds.h"
+
+namespace {
+constexpr int kCoverCacheBleed = 12;
+
+const char* defaultLauncherLabel(ThemeHomeAction action) {
+  switch (action) {
+    case ThemeHomeAction::RecentBooks:
+      return tr(STR_MENU_RECENT_BOOKS);
+    case ThemeHomeAction::OpdsBrowser:
+      return tr(STR_OPDS_BROWSER);
+    case ThemeHomeAction::FileTransfer:
+      return tr(STR_FILE_TRANSFER);
+    case ThemeHomeAction::Settings:
+      return tr(STR_SETTINGS_TITLE);
+    case ThemeHomeAction::RecentBook:
+      return tr(STR_CONTINUE_READING);
+    case ThemeHomeAction::FileBrowser:
+    default:
+      return tr(STR_BROWSE_FILES);
+  }
+}
+
+const char* buttonHintLabel(ThemeButtonHintLabel label, const char* fallback) {
+  switch (label) {
+    case ThemeButtonHintLabel::Empty:
+      return "";
+    case ThemeButtonHintLabel::Back:
+      return tr(STR_BACK);
+    case ThemeButtonHintLabel::Home:
+      return tr(STR_HOME);
+    case ThemeButtonHintLabel::Select:
+      return tr(STR_SELECT);
+    case ThemeButtonHintLabel::Confirm:
+      return tr(STR_CONFIRM);
+    case ThemeButtonHintLabel::Open:
+      return tr(STR_OPEN);
+    case ThemeButtonHintLabel::Toggle:
+      return tr(STR_TOGGLE);
+    case ThemeButtonHintLabel::Up:
+      return tr(STR_DIR_UP);
+    case ThemeButtonHintLabel::Down:
+      return tr(STR_DIR_DOWN);
+    case ThemeButtonHintLabel::Left:
+      return tr(STR_DIR_LEFT);
+    case ThemeButtonHintLabel::Right:
+      return tr(STR_DIR_RIGHT);
+    case ThemeButtonHintLabel::Default:
+    default:
+      return fallback;
+  }
+}
+
+UIIcon defaultLauncherIcon(ThemeHomeAction action) {
+  switch (action) {
+    case ThemeHomeAction::RecentBooks:
+      return UIIcon::Recent;
+    case ThemeHomeAction::OpdsBrowser:
+      return UIIcon::Library;
+    case ThemeHomeAction::FileTransfer:
+      return UIIcon::Transfer;
+    case ThemeHomeAction::Settings:
+      return UIIcon::Settings;
+    case ThemeHomeAction::RecentBook:
+      return UIIcon::Book;
+    case ThemeHomeAction::FileBrowser:
+    default:
+      return UIIcon::Folder;
+  }
+}
+
+std::string homeHeaderTitle(const ThemeMetrics& metrics, const std::vector<RecentBook>& recentBooks,
+                            const int coverSelectorIndex) {
+  if (metrics.homeContinueReadingInMenu && metrics.homeShowContinueReadingHeader && !recentBooks.empty()) {
+    return recentBooks[std::min(coverSelectorIndex, static_cast<int>(recentBooks.size()) - 1)].title;
+  }
+  return "";
+}
+
+Rect placedWidgetRect(Rect slot, const ThemeHomeWidgetSpec& widget) {
+  slot.x += widget.offsetX - widget.bleed.left;
+  slot.y += widget.offsetY - widget.bleed.top;
+  slot.width += widget.bleed.left + widget.bleed.right;
+  slot.height += widget.bleed.top + widget.bleed.bottom;
+  slot.x += widget.inset.left;
+  slot.y += widget.inset.top;
+  slot.width -= widget.inset.left + widget.inset.right;
+  slot.height -= widget.inset.top + widget.inset.bottom;
+  return slot;
+}
+
+freeink::ui::Insets toFreeInkInsets(const ThemeEdgeInsets& insets) {
+  return freeink::ui::makeInsets(insets.top, insets.right, insets.bottom, insets.left);
+}
+
+freeink::ui::StyleSet widgetSelectionStyles(ThemeWidgetSelectionStyle selectionStyle, int selectedRadius) {
+  if (selectionStyle == ThemeWidgetSelectionStyle::Outline) {
+    return freeink::ui::selectedOutlineListRowStyles(selectedRadius);
+  }
+  if (selectionStyle == ThemeWidgetSelectionStyle::None) return freeink::ui::selectedPlainListRowStyles();
+  return freeink::ui::defaultListRowStyles();
+}
+
+freeink::ui::CoverGridSelectionIndicator coverGridSelectionIndicator(ThemeWidgetSelectionStyle selectionStyle) {
+  return selectionStyle == ThemeWidgetSelectionStyle::CoverFrame ? freeink::ui::CoverGridSelectionIndicator::CoverFrame
+                                                                 : freeink::ui::CoverGridSelectionIndicator::Cell;
+}
+
+const uint8_t* homeTabIcon(UIIcon icon) {
+  switch (icon) {
+    case UIIcon::Folder:
+      return FolderIcon;
+    case UIIcon::Book:
+      return BookIcon;
+    case UIIcon::Recent:
+      return RecentIcon;
+    case UIIcon::Library:
+      return LibraryIcon;
+    case UIIcon::Transfer:
+      return TransferIcon;
+    case UIIcon::Settings:
+      return Settings2Icon;
+    default:
+      return nullptr;
+  }
+}
+
+struct HomeIconTabPainterData {
+  const GfxRenderer* renderer = nullptr;
+  const ThemeHomeLauncherSpec* const* launchers = nullptr;
+  size_t launcherCount = 0;
+};
+
+struct HomeCoverGridItemProviderData {
+  const std::vector<RecentBook>* recentBooks = nullptr;
+  int startIndex = 0;
+};
+
+freeink::ui::CoverGridItem provideHomeCoverGridItem(uint16_t index, void* userData) {
+  auto* data = static_cast<HomeCoverGridItemProviderData*>(userData);
+  if (data == nullptr || data->recentBooks == nullptr) return {};
+  const int bookIndex = data->startIndex + static_cast<int>(index);
+  if (bookIndex < 0 || bookIndex >= static_cast<int>(data->recentBooks->size())) return {};
+  return freeink::ui::coverGridItem((*data->recentBooks)[bookIndex].title.c_str(), bookIndex);
+}
+
+bool paintHomeIconTab(freeink::ui::DrawTarget&, freeink::ui::Rect rect, const freeink::ui::TabItem& tab, uint8_t,
+                      void* userData) {
+  auto* data = static_cast<HomeIconTabPainterData*>(userData);
+  if (data == nullptr || data->renderer == nullptr || data->launchers == nullptr) return false;
+  const int index = tab.value;
+  if (index < 0 || index >= static_cast<int>(data->launcherCount)) return false;
+  const auto& launcher = *data->launchers[index];
+  const uint8_t* icon =
+      homeTabIcon(launcher.icon == UIIcon::None ? defaultLauncherIcon(launcher.action) : launcher.icon);
+  if (icon == nullptr) return false;
+  data->renderer->drawIcon(icon, rect.x, rect.y, rect.width, rect.height);
+  return true;
+}
+
+struct WidgetRenderEntry {
+  const ThemeHomeWidgetSpec* widget;
+  int actionOffset;
+  size_t order;
+};
+
+struct WidgetRenderEntries {
+  std::array<WidgetRenderEntry, kMaxThemeWidgets> items;
+  size_t count = 0;
+
+  void push(const WidgetRenderEntry& entry) {
+    if (count >= items.size()) return;
+    items[count++] = entry;
+  }
+};
+
+bool themeHomeActionVisible(ThemeHomeAction action, bool hasOpdsServers, bool hasRecentBooks) {
+  if (action == ThemeHomeAction::OpdsBrowser) return hasOpdsServers;
+  if (action == ThemeHomeAction::RecentBook) return hasRecentBooks;
+  return true;
+}
+
+WidgetRenderEntries buildRenderEntries(const ThemeHomeScreenSpec& spec, const std::vector<RecentBook>& recentBooks,
+                                       bool hasOpdsServers) {
+  WidgetRenderEntries entries;
+  int nextActionOffset = 0;
+  for (size_t i = 0; i < spec.widgets.size(); ++i) {
+    const auto& widget = spec.widgets[i];
+    const int widgetActionOffset = nextActionOffset;
+    if (widget.type == ThemeHomeWidgetType::Recents) {
+      nextActionOffset += static_cast<int>(recentBooks.size());
+    } else if (widget.type == ThemeHomeWidgetType::FeaturedBookCard) {
+      if (std::max(0, widget.featured.startIndex) < static_cast<int>(recentBooks.size())) ++nextActionOffset;
+    } else if (widget.type == ThemeHomeWidgetType::RecentCoverGrid) {
+      const int maxItems = widget.coverGrid.rows > 0 ? widget.coverGrid.rows * std::max(1, widget.coverGrid.columns)
+                                                     : static_cast<int>(recentBooks.size());
+      const int startIndex = std::max(0, widget.coverGrid.startIndex);
+      nextActionOffset += std::min({std::max(0, static_cast<int>(recentBooks.size()) - startIndex), maxItems,
+                                    static_cast<int>(kMaxThemeCoverGridItems)});
+    } else if (widget.type == ThemeHomeWidgetType::LauncherList || widget.type == ThemeHomeWidgetType::LauncherGrid) {
+      nextActionOffset += static_cast<int>(
+          std::count_if(widget.launcher.items.begin(), widget.launcher.items.end(), [&](const auto& launcher) {
+            return themeHomeActionVisible(launcher.action, hasOpdsServers, !recentBooks.empty());
+          }));
+    }
+    entries.push(WidgetRenderEntry{&widget, widgetActionOffset, i});
+  }
+  std::stable_sort(entries.items.begin(), entries.items.begin() + entries.count, [](const auto& a, const auto& b) {
+    if (a.widget->layer != b.widget->layer) return a.widget->layer < b.widget->layer;
+    return a.order < b.order;
+  });
+  return entries;
+}
+}  // namespace
+
+void buildThemeHomeActions(const ThemeHomeScreenSpec* spec, const std::vector<RecentBook>& recentBooks,
+                           bool hasOpdsServers, std::vector<ThemeHomeActionEntry>& actions) {
+  actions.clear();
+  if (spec != nullptr) {
+    for (const auto& widget : spec->widgets) {
+      if (widget.type == ThemeHomeWidgetType::Recents) {
+        for (int i = 0; i < static_cast<int>(recentBooks.size()); ++i) {
+          actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::RecentBook, i});
+        }
+      } else if (widget.type == ThemeHomeWidgetType::FeaturedBookCard) {
+        const int index = std::max(0, widget.featured.startIndex);
+        if (index < static_cast<int>(recentBooks.size())) {
+          actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::RecentBook, index});
+        }
+      } else if (widget.type == ThemeHomeWidgetType::RecentCoverGrid) {
+        const int maxItems = widget.coverGrid.rows > 0 ? widget.coverGrid.rows * std::max(1, widget.coverGrid.columns)
+                                                       : static_cast<int>(recentBooks.size());
+        const int startIndex = std::max(0, widget.coverGrid.startIndex);
+        for (int i = 0; startIndex + i < static_cast<int>(recentBooks.size()) && i < maxItems &&
+                        i < static_cast<int>(kMaxThemeCoverGridItems);
+             ++i) {
+          actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::RecentBook, startIndex + i});
+        }
+      } else if (widget.type == ThemeHomeWidgetType::LauncherList || widget.type == ThemeHomeWidgetType::LauncherGrid) {
+        for (const auto& launcher : widget.launcher.items) {
+          if (themeHomeActionVisible(launcher.action, hasOpdsServers, !recentBooks.empty())) {
+            actions.push_back(ThemeHomeActionEntry{launcher.action, 0});
+          }
+        }
+      }
+    }
+    if (!actions.empty()) return;
+  }
+
+  for (int i = 0; i < static_cast<int>(recentBooks.size()); ++i) {
+    actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::RecentBook, i});
+  }
+  actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::FileBrowser, 0});
+  actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::RecentBooks, 0});
+  if (hasOpdsServers) actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::OpdsBrowser, 0});
+  actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::FileTransfer, 0});
+  actions.push_back(ThemeHomeActionEntry{ThemeHomeAction::Settings, 0});
+}
+
+bool renderThemeHome(ThemeHomeRenderContext& ctx) {
+  const auto pageWidth = ctx.renderer.getScreenWidth();
+  const auto pageHeight = ctx.renderer.getScreenHeight();
+
+  ThemeLayoutSlots slots;
+  layoutThemeSlots(ctx.spec.layout, Rect{0, 0, pageWidth, pageHeight}, ctx.metrics, slots);
+  if (slots.empty()) {
+    const auto& layout = ctx.spec.layout;
+    const auto& first = layout.children.empty() ? layout : layout.children.front();
+    LOG_ERR("HOME",
+            "SD home layout emitted no slots: page=%dx%d children=%d firstId=%s firstType=%d firstSize=%d firstFlex=%d",
+            pageWidth, pageHeight, static_cast<int>(layout.children.size()), first.id.c_str(),
+            static_cast<int>(first.sizeType), first.size, first.flex);
+  }
+  const bool sdHomeUsable = !slots.empty() && !ctx.actions.empty();
+  if (!sdHomeUsable) {
+    LOG_ERR("HOME", "Invalid SD home layout: widgets=%d slots=%d actions=%d; using built-in layout",
+            static_cast<int>(ctx.spec.widgets.size()), static_cast<int>(slots.size()),
+            static_cast<int>(ctx.actions.size()));
+    return false;
+  }
+
+  ctx.renderer.clearScreen();
+  ctx.coverRectX = 0;
+  ctx.coverRectY = 0;
+  ctx.coverRectW = 0;
+  ctx.coverRectH = 0;
+
+  const auto renderWidgets = buildRenderEntries(ctx.spec, ctx.recentBooks, ctx.hasOpdsServers);
+  for (size_t renderIndex = 0; renderIndex < renderWidgets.count; ++renderIndex) {
+    const auto& entry = renderWidgets.items[renderIndex];
+    const auto& widget = *entry.widget;
+    Rect slot = placedWidgetRect(findThemeSlot(slots, widget.slot), widget);
+    if (slot.width <= 0 || slot.height <= 0) continue;
+
+    if (widget.type == ThemeHomeWidgetType::Header) {
+      const auto title = homeHeaderTitle(ctx.metrics, ctx.recentBooks, ctx.coverSelectorIndex);
+      GUI.drawHeader(ctx.renderer, slot, title.empty() ? nullptr : title.c_str());
+    } else if (widget.type == ThemeHomeWidgetType::HeaderTitle) {
+      const auto title = homeHeaderTitle(ctx.metrics, ctx.recentBooks, ctx.coverSelectorIndex);
+      if (!title.empty()) {
+        const auto truncated = ctx.renderer.truncatedText(UI_10_FONT_ID, title.c_str(), slot.width);
+        const int textWidth = ctx.renderer.getTextWidth(UI_10_FONT_ID, truncated.c_str());
+        ctx.renderer.drawText(UI_10_FONT_ID, slot.x + std::max(0, (slot.width - textWidth) / 2),
+                              slot.y + std::max(0, (slot.height - ctx.renderer.getLineHeight(UI_10_FONT_ID)) / 2),
+                              truncated.c_str());
+      }
+    } else if (widget.type == ThemeHomeWidgetType::Battery) {
+      const bool showBatteryPercentage =
+          SETTINGS.hideBatteryPercentage != CrossPointSettings::HIDE_BATTERY_PERCENTAGE::HIDE_ALWAYS;
+      const int batteryX = slot.x + std::max(0, slot.width - ctx.metrics.batteryWidth);
+      GUI.drawBatteryRight(ctx.renderer, Rect{batteryX, slot.y, ctx.metrics.batteryWidth, ctx.metrics.batteryHeight},
+                           showBatteryPercentage);
+    } else if (widget.type == ThemeHomeWidgetType::Clock) {
+      if (halClock.isAvailable()) {
+        char timeBuf[9];
+        if (halClock.formatTime(timeBuf, sizeof(timeBuf), SETTINGS.clockUtcOffsetQ, SETTINGS.clockFormat == 1)) {
+          auto clockText = ctx.renderer.truncatedText(SMALL_FONT_ID, timeBuf, slot.width);
+          const int textWidth = ctx.renderer.getTextWidth(SMALL_FONT_ID, clockText.c_str());
+          ctx.renderer.drawText(SMALL_FONT_ID, slot.x + std::max(0, (slot.width - textWidth) / 2), slot.y,
+                                clockText.c_str());
+        }
+      }
+    } else if (widget.type == ThemeHomeWidgetType::Recents) {
+      const bool hasCoverArea = slot.height > 0 && ctx.metrics.homeCoverHeight > 0;
+      ctx.coverRectX = 0;
+      ctx.coverRectY = std::max(0, slot.y - kCoverCacheBleed);
+      ctx.coverRectW = pageWidth;
+      ctx.coverRectH =
+          std::min(pageHeight - ctx.coverRectY, slot.height + (slot.y - ctx.coverRectY) + kCoverCacheBleed);
+
+      const bool selectorSensitiveCoverCache = GUI.homeCoverCacheDependsOnSelector();
+      const bool coverStripSelected = ctx.selectorIndex >= entry.actionOffset &&
+                                      ctx.selectorIndex < entry.actionOffset + static_cast<int>(ctx.recentBooks.size());
+      if (coverStripSelected) {
+        ctx.coverSelectorIndex = ctx.actions[ctx.selectorIndex].value;
+      }
+      const bool coverCacheMatches =
+          !selectorSensitiveCoverCache || (ctx.coverBufferSelectorIndex == ctx.coverSelectorIndex &&
+                                           ctx.coverBufferStripSelected == coverStripSelected);
+      if (hasCoverArea && ctx.coverBufferStored && !coverCacheMatches) {
+        ctx.coverBufferStored = false;
+        ctx.coverRendered = false;
+      }
+      bool bufferRestored = hasCoverArea && ctx.coverBufferStored && coverCacheMatches &&
+                            ctx.restoreCoverBuffer != nullptr && ctx.restoreCoverBuffer(ctx.coverBufferUserData);
+
+      if (hasCoverArea) {
+        GUI.drawRecentBookCover(
+            ctx.renderer, slot, ctx.recentBooks, ctx.coverSelectorIndex, ctx.coverRendered, ctx.coverBufferStored,
+            bufferRestored,
+            [store = ctx.storeCoverBuffer, userData = ctx.coverBufferUserData]() {
+              return store != nullptr && store(userData);
+            },
+            coverStripSelected);
+      }
+    } else if (widget.type == ThemeHomeWidgetType::FeaturedBookCard) {
+      const int bookIndex = std::max(0, widget.featured.startIndex);
+      if (bookIndex < static_cast<int>(ctx.recentBooks.size())) {
+        const bool selected = ctx.selectorIndex >= entry.actionOffset && ctx.selectorIndex < entry.actionOffset + 1 &&
+                              ctx.actions[ctx.selectorIndex].value == bookIndex;
+        ctx.renderer.drawText(UI_10_FONT_ID, slot.x, slot.y, tr(STR_CONTINUE_READING), true, EpdFontFamily::BOLD);
+
+#if FREEINK_HAVE_GFX_RENDERER
+        const int labelH = ctx.renderer.getLineHeight(UI_10_FONT_ID) + std::max(0, widget.featured.titleGap);
+        const int coverHeight =
+            widget.featured.coverHeight > 0 ? widget.featured.coverHeight : std::max(1, slot.height - labelH - 8);
+        const int coverWidth =
+            widget.featured.coverWidth > 0 ? widget.featured.coverWidth : std::max(1, coverHeight * 62 / 100);
+        freeink::ui::GfxRendererFrame<> ui(ctx.renderer, SMALL_FONT_ID, UI_10_FONT_ID, UI_12_FONT_ID);
+        RecentBookCoverPainterData painterData{&ctx.renderer, &ctx.recentBooks,
+                                               UITheme::getInstance().getHomeCoverThumbHeight(),
+                                               widget.featured.placeholderIconSize};
+        freeink::ui::BookCardProps props;
+        props.title = ctx.recentBooks[bookIndex].title.c_str();
+        props.author = ctx.recentBooks[bookIndex].author.c_str();
+        props.progressMax = 0;
+        props.value = static_cast<int16_t>(bookIndex);
+        props.state = selected ? freeink::ui::StateSelected : freeink::ui::StateNormal;
+        props.coverSize = freeink::ui::makeSize(coverWidth, coverHeight);
+        props.padding = freeink::ui::makeInsets(0);
+        props.gap = freeink::ui::clampI16(widget.featured.coverGap);
+        props.titleText.font = freeink::ui::GfxRendererTarget::FONT_TITLE;
+        props.titleText.maxLines = 2;
+        props.authorText.font = freeink::ui::GfxRendererTarget::FONT_BODY;
+        props.centerTextVertically = true;
+        props.selectionIndicator = freeink::ui::BookCardSelectionIndicator::CoverFrame;
+        props.selectedCoverFrameRadius = freeink::ui::clampRadius(widget.featured.selectedRadius);
+        props.coverPainter = paintBookCardCover;
+        props.coverPainterUserData = &painterData;
+        freeink::ui::StyleSet styles =
+            widgetSelectionStyles(ThemeWidgetSelectionStyle::Outline, widget.featured.selectedRadius);
+        styles.normal.background = freeink::ui::Paint::solid(freeink::ui::Color::White);
+        props.styles = styles;
+        const int cardH = std::min(std::max(1, slot.height - labelH), coverHeight);
+        freeink::ui::bookCard(ui.frame, freeink::ui::makeRect(slot.x, slot.y + labelH, slot.width, cardH), props);
+#endif
+      }
+    } else if (widget.type == ThemeHomeWidgetType::RecentCoverGrid) {
+      const int columns = std::max(1, widget.coverGrid.columns);
+      const int rows = widget.coverGrid.rows > 0
+                           ? widget.coverGrid.rows
+                           : std::max(1, (static_cast<int>(ctx.recentBooks.size()) + columns - 1) / columns);
+      const int startIndex = std::max(0, widget.coverGrid.startIndex);
+      const int maxItems = std::min({std::max(0, static_cast<int>(ctx.recentBooks.size()) - startIndex), rows * columns,
+                                     static_cast<int>(kMaxThemeCoverGridItems)});
+      if (maxItems > 0) {
+        const int selectedLocal =
+            ctx.selectorIndex >= entry.actionOffset && ctx.selectorIndex < entry.actionOffset + maxItems
+                ? ctx.actions[ctx.selectorIndex].value - startIndex
+                : -1;
+        const int coverHeight =
+            widget.coverGrid.coverHeight > 0
+                ? widget.coverGrid.coverHeight
+                : std::max(1, (slot.height - std::max(0, widget.coverGrid.gap) * (rows - 1)) / rows -
+                                  widget.coverGrid.labelHeight);
+        const int coverWidth =
+            widget.coverGrid.coverWidth > 0 ? widget.coverGrid.coverWidth : std::max(1, coverHeight * 62 / 100);
+        const int rowHeight = widget.coverGrid.rowHeight > 0
+                                  ? widget.coverGrid.rowHeight
+                                  : coverHeight + std::max(0, widget.coverGrid.labelHeight) + 6;
+
+#if FREEINK_HAVE_GFX_RENDERER
+        freeink::ui::GfxRendererFrame<> ui(ctx.renderer, SMALL_FONT_ID, UI_10_FONT_ID, UI_12_FONT_ID);
+        RecentBookCoverPainterData painterData{&ctx.renderer, &ctx.recentBooks,
+                                               UITheme::getInstance().getHomeCoverThumbHeight(),
+                                               widget.coverGrid.placeholderIconSize};
+        HomeCoverGridItemProviderData itemProviderData{&ctx.recentBooks, startIndex};
+        freeink::ui::CoverGridProps props;
+        props.itemProvider = provideHomeCoverGridItem;
+        props.itemProviderUserData = &itemProviderData;
+        props.count = static_cast<uint16_t>(maxItems);
+        props.selectedIndex = static_cast<int16_t>(selectedLocal);
+        props.columns = static_cast<uint8_t>(std::min(columns, 12));
+        props.gap = freeink::ui::clampI16(widget.coverGrid.gap);
+        props.rowGap =
+            freeink::ui::clampI16(widget.coverGrid.rowGap >= 0 ? widget.coverGrid.rowGap : widget.coverGrid.gap);
+        props.cellInset = toFreeInkInsets(widget.coverGrid.cellInset);
+        props.labelInset = toFreeInkInsets(widget.coverGrid.labelInset);
+        props.coverSize = freeink::ui::makeSize(coverWidth, coverHeight);
+        props.rowHeight = freeink::ui::clampI16(rowHeight, 1);
+        props.labelHeight = freeink::ui::clampI16(widget.coverGrid.labelHeight);
+        props.labelGap = freeink::ui::clampI16(widget.coverGrid.labelGap);
+        props.titleText.font = freeink::ui::GfxRendererTarget::FONT_SMALL;
+        props.titleText.maxLines = static_cast<uint8_t>(std::max(1, std::min(3, widget.coverGrid.labelLines)));
+        props.cellStyles = widgetSelectionStyles(widget.coverGrid.selectionStyle, widget.coverGrid.selectedRadius);
+        props.selectionIndicator = coverGridSelectionIndicator(widget.coverGrid.selectionStyle);
+        props.selectedCoverFrameRadius = freeink::ui::clampRadius(widget.coverGrid.selectedRadius);
+        props.coverPainter = paintRecentCoverGridCover;
+        props.coverPainterUserData = &painterData;
+        freeink::ui::coverGrid(ui.frame, freeink::ui::makeRect(slot.x, slot.y, slot.width, slot.height), props);
+#endif
+      }
+    } else if (widget.type == ThemeHomeWidgetType::LauncherList || widget.type == ThemeHomeWidgetType::LauncherGrid) {
+      std::array<const ThemeHomeLauncherSpec*, kMaxThemeLauncherItems> launchers;
+      size_t launcherCount = 0;
+      for (const auto& launcher : widget.launcher.items) {
+        if (themeHomeActionVisible(launcher.action, ctx.hasOpdsServers, !ctx.recentBooks.empty())) {
+          if (launcherCount < launchers.size()) launchers[launcherCount++] = &launcher;
+        }
+      }
+      const int selectedLocal = ctx.selectorIndex >= entry.actionOffset &&
+                                        ctx.selectorIndex < entry.actionOffset + static_cast<int>(launcherCount)
+                                    ? ctx.selectorIndex - entry.actionOffset
+                                    : -1;
+
+      if (widget.launcher.presentation == ThemeLauncherPresentation::IconTabs) {
+#if FREEINK_HAVE_GFX_RENDERER
+        std::array<freeink::ui::TabItem, kMaxThemeLauncherItems> items;
+        size_t itemCount = 0;
+        for (int i = 0; i < static_cast<int>(launcherCount); ++i) {
+          items[itemCount++] = freeink::ui::tabItem(i, selectedLocal == i);
+        }
+        freeink::ui::GfxRendererFrame<> ui(ctx.renderer, SMALL_FONT_ID, UI_10_FONT_ID, UI_12_FONT_ID);
+        freeink::ui::StyleSet styles = freeink::ui::outlinedButtonStyles(widget.launcher.selectedRadius);
+        HomeIconTabPainterData painterData{&ctx.renderer, launchers.data(), launcherCount};
+        freeink::ui::TabBarProps props;
+        props.tabs = items.data();
+        props.count = static_cast<uint8_t>(std::min<size_t>(itemCount, 255));
+        props.tabStyles = styles;
+        props.gap = freeink::ui::clampI16(widget.launcher.gap);
+        props.iconSize = freeink::ui::clampI16(widget.launcher.iconSize, 1);
+        props.tabInset = freeink::ui::makeInsets(4);
+        props.iconPainter = paintHomeIconTab;
+        props.iconPainterUserData = &painterData;
+        freeink::ui::tabBar(ui.frame, freeink::ui::makeRect(slot.x, slot.y, slot.width, slot.height), props);
+#endif
+      } else if (widget.type == ThemeHomeWidgetType::LauncherGrid) {
+        const int columns = std::max(1, widget.launcher.columns);
+        const int rows = widget.launcher.rows > 0
+                             ? widget.launcher.rows
+                             : std::max(1, (static_cast<int>(launcherCount) + columns - 1) / columns);
+        const int gap = std::max(0, widget.launcher.gap);
+        const int cellW = std::max(1, (slot.width - gap * (columns - 1)) / columns);
+        const int cellH = std::max(1, (slot.height - gap * (rows - 1)) / rows);
+        for (int i = 0; i < static_cast<int>(launcherCount); ++i) {
+          const int col = i % columns;
+          const int row = i / columns;
+          if (row >= rows) break;
+          Rect cell{slot.x + col * (cellW + gap), slot.y + row * (cellH + gap),
+                    col == columns - 1 ? slot.x + slot.width - (slot.x + col * (cellW + gap)) : cellW, cellH};
+          GUI.drawButtonMenu(
+              ctx.renderer, cell, 1, selectedLocal == i ? 0 : -1,
+              [&launchers, i](int) {
+                return launchers[i]->text.empty() ? std::string(defaultLauncherLabel(launchers[i]->action))
+                                                  : launchers[i]->text;
+              },
+              [&launchers, i](int) {
+                return launchers[i]->icon == UIIcon::None ? defaultLauncherIcon(launchers[i]->action)
+                                                          : launchers[i]->icon;
+              });
+        }
+      } else {
+        GUI.drawButtonMenu(
+            ctx.renderer, slot, static_cast<int>(launcherCount), selectedLocal,
+            [&launchers](int index) {
+              return launchers[index]->text.empty() ? std::string(defaultLauncherLabel(launchers[index]->action))
+                                                    : launchers[index]->text;
+            },
+            [&launchers](int index) {
+              return launchers[index]->icon == UIIcon::None ? defaultLauncherIcon(launchers[index]->action)
+                                                            : launchers[index]->icon;
+            });
+      }
+    } else if (widget.type == ThemeHomeWidgetType::ButtonHints) {
+      const bool horizontalBottomHints = ctx.spec.navigation == ThemeHomeNavigationMode::SplitAxis ||
+                                         ctx.spec.navigation == ThemeHomeNavigationMode::CarouselAxis;
+      const auto labels = ctx.mappedInput.mapLabels(
+          buttonHintLabel(widget.buttonHints.back, ""), buttonHintLabel(widget.buttonHints.confirm, tr(STR_SELECT)),
+          buttonHintLabel(widget.buttonHints.previous, horizontalBottomHints ? tr(STR_DIR_LEFT) : tr(STR_DIR_UP)),
+          buttonHintLabel(widget.buttonHints.next, horizontalBottomHints ? tr(STR_DIR_RIGHT) : tr(STR_DIR_DOWN)));
+      GUI.drawButtonHints(ctx.renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+    }
+  }
+
+  ctx.renderer.displayBuffer();
+  return true;
+}
diff --git a/src/activities/home/ThemeHomeRenderer.h b/src/activities/home/ThemeHomeRenderer.h
new file mode 100644
index 00000000..1ecf6e2e
--- /dev/null
+++ b/src/activities/home/ThemeHomeRenderer.h
@@ -0,0 +1,44 @@
+#pragma once
+
+#include <vector>
+
+#include "components/themes/ThemeLayout.h"
+
+class GfxRenderer;
+class MappedInputManager;
+struct RecentBook;
+
+struct ThemeHomeActionEntry {
+  ThemeHomeAction action = ThemeHomeAction::FileBrowser;
+  int value = 0;
+};
+
+using ThemeHomeBufferCallback = bool (*)(void*);
+
+void buildThemeHomeActions(const ThemeHomeScreenSpec* spec, const std::vector<RecentBook>& recentBooks,
+                           bool hasOpdsServers, std::vector<ThemeHomeActionEntry>& actions);
+
+struct ThemeHomeRenderContext {
+  GfxRenderer& renderer;
+  MappedInputManager& mappedInput;
+  const ThemeMetrics& metrics;
+  const ThemeHomeScreenSpec& spec;
+  const std::vector<RecentBook>& recentBooks;
+  const std::vector<ThemeHomeActionEntry>& actions;
+  bool hasOpdsServers = false;
+  int selectorIndex = 0;
+  int& coverSelectorIndex;
+  bool& coverRendered;
+  bool& coverBufferStored;
+  int coverBufferSelectorIndex = -1;
+  bool coverBufferStripSelected = false;
+  int& coverRectX;
+  int& coverRectY;
+  int& coverRectW;
+  int& coverRectH;
+  void* coverBufferUserData = nullptr;
+  ThemeHomeBufferCallback storeCoverBuffer = nullptr;
+  ThemeHomeBufferCallback restoreCoverBuffer = nullptr;
+};
+
+bool renderThemeHome(ThemeHomeRenderContext& ctx);
diff --git a/src/activities/reader/EpubReaderActivity.cpp b/src/activities/reader/EpubReaderActivity.cpp
index 5948fd9a..b1b59b8c 100644
--- a/src/activities/reader/EpubReaderActivity.cpp
+++ b/src/activities/reader/EpubReaderActivity.cpp
@@ -1087,6 +1087,11 @@ void EpubReaderActivity::renderContents(std::unique_ptr<Page> page, const int or
     if (!scratch) {
       LOG_ERR("ERS", "OOM: grayscale strip scratch (%d bytes); skipping AA this page", gwBytes * STRIP_ROWS);
     } else {
+      // [#2190] Headroom probe: tiled scratch is ~8 KB here; the full-frame
+      // alternative would need ~52 KB total (chunked at 8 KB). Compare free vs
+      // ~52 KB and largest_block vs 8 KB to see if X3 could afford full-frame.
+      LOG_INF("ERS", "Grayscale heap @render: free=%u largest_block=%u scratch=%d", (unsigned)ESP.getFreeHeap(),
+              (unsigned)ESP.getMaxAllocHeap(), gwBytes * STRIP_ROWS);
       // Bands may be streamed in any order: X4 windows each via setRamArea, X3
       // via PTL.
       renderer.setRenderMode(GfxRenderer::GRAYSCALE_LSB);
diff --git a/src/activities/settings/SettingsActivity.cpp b/src/activities/settings/SettingsActivity.cpp
index 8c0a7ef6..068ec04a 100644
--- a/src/activities/settings/SettingsActivity.cpp
+++ b/src/activities/settings/SettingsActivity.cpp
@@ -21,6 +21,7 @@
 #include "SdFirmwareUpdateActivity.h"
 #include "SettingsList.h"
 #include "StatusBarSettingsActivity.h"
+#include "ThemeDownloadActivity.h"
 #include "activities/network/WifiSelectionActivity.h"
 #include "activities/util/IntervalSelectionActivity.h"
 #include "components/UITheme.h"
@@ -38,8 +39,9 @@ void SettingsActivity::rebuildSettingsLists() {
   // Pick up any fonts uploaded/deleted over the web server since the last
   // reader activity ran — otherwise the font-family picker shows stale list.
   sdFontSystem.refreshIfDirty();
+  UITheme::getInstance().refreshRegistry();
 
-  for (auto& setting : getSettingsList(&sdFontSystem.registry())) {
+  for (auto& setting : getSettingsList(&sdFontSystem.registry(), &UITheme::getInstance().registry())) {
     if (setting.category == StrId::STR_NONE_OPT) continue;
     if (setting.category == StrId::STR_CAT_DISPLAY) {
       displaySettings.push_back(setting);
@@ -55,6 +57,11 @@ void SettingsActivity::rebuildSettingsLists() {
       systemSettings.push_back(setting);
     }
   }
+  // getSettingsList copies the SD theme names/ids into the UI theme setting.
+  // Keeping the full parsed SD theme registry alive while child activities
+  // like the font downloader run leaves less contiguous heap for TLS/header
+  // parsing.
+  UITheme::getInstance().registry().clear();
 
   // Append device-only ACTION items
   controlsSettings.insert(controlsSettings.begin(),
@@ -66,6 +73,10 @@ void SettingsActivity::rebuildSettingsLists() {
   systemSettings.push_back(SettingInfo::Action(StrId::STR_CHECK_UPDATES, SettingAction::CheckForUpdates));
   systemSettings.push_back(SettingInfo::Action(StrId::STR_SD_FIRMWARE_UPDATE, SettingAction::SdFirmwareUpdate));
   systemSettings.push_back(SettingInfo::Action(StrId::STR_LANGUAGE, SettingAction::Language));
+  auto themeSettingIt = std::find_if(displaySettings.begin(), displaySettings.end(),
+                                     [](const SettingInfo& setting) { return setting.nameId == StrId::STR_UI_THEME; });
+  displaySettings.insert(themeSettingIt == displaySettings.end() ? displaySettings.end() : themeSettingIt + 1,
+                         SettingInfo::Action(StrId::STR_MANAGE_THEMES, SettingAction::DownloadThemes));
   // Insert "Manage Fonts" right after the font family setting so users discover it naturally
   readerSettings.insert(readerSettings.begin() + 1,
                         SettingInfo::Action(StrId::STR_MANAGE_FONTS, SettingAction::DownloadFonts));
@@ -89,6 +100,19 @@ void SettingsActivity::rebuildSettingsLists() {
   settingsCount = static_cast<int>(currentSettings->size());
 }
 
+void SettingsActivity::releaseSettingsLists() {
+  displaySettings.clear();
+  readerSettings.clear();
+  controlsSettings.clear();
+  systemSettings.clear();
+  displaySettings.shrink_to_fit();
+  readerSettings.shrink_to_fit();
+  controlsSettings.shrink_to_fit();
+  systemSettings.shrink_to_fit();
+  currentSettings = nullptr;
+  settingsCount = 0;
+}
+
 void SettingsActivity::onEnter() {
   Activity::onEnter();
 
@@ -191,6 +215,7 @@ void SettingsActivity::toggleCurrentSetting() {
   const auto& setting = (*currentSettings)[selectedSetting];
   const bool sleepScreenChanged = setting.valuePtr == &CrossPointSettings::sleepScreen;
   const bool quickResumeTimeoutChanged = setting.valuePtr == &CrossPointSettings::quickResumeSleepScreen;
+  const bool themeChanged = setting.nameId == StrId::STR_UI_THEME;
 
   if (setting.nameId == StrId::STR_TIME_TO_SLEEP) {
     openSleepTimeoutPicker();
@@ -255,9 +280,22 @@ void SettingsActivity::toggleCurrentSetting() {
         startActivityForResult(std::make_unique<SdFirmwareUpdateActivity>(renderer, mappedInput), resultHandler);
         break;
       case SettingAction::DownloadFonts:
+        releaseSettingsLists();
+        UITheme::getInstance().releaseSdThemeAssetMemory();
         startActivityForResult(std::make_unique<FontDownloadActivity>(renderer, mappedInput),
                                [this](const ActivityResult&) {
                                  SETTINGS.saveToFile();
+                                 UITheme::getInstance().reload();
+                                 rebuildSettingsLists();
+                               });
+        break;
+      case SettingAction::DownloadThemes:
+        releaseSettingsLists();
+        UITheme::getInstance().releaseSdThemeAssetMemory();
+        startActivityForResult(std::make_unique<ThemeDownloadActivity>(renderer, mappedInput),
+                               [this](const ActivityResult&) {
+                                 SETTINGS.saveToFile();
+                                 UITheme::getInstance().reload();
                                  rebuildSettingsLists();
                                });
         break;
@@ -275,8 +313,14 @@ void SettingsActivity::toggleCurrentSetting() {
 
   syncQuickResumeTimeoutForSleepScreen(sleepScreenChanged, quickResumeTimeoutChanged);
   SETTINGS.saveToFile();
+  if (themeChanged) {
+    UITheme::getInstance().reload();
+  }
   rebuildSettingsLists();
   selectedSettingIndex = std::min(selectedSettingIndex, settingsCount);
+  if (themeChanged) {
+    requestUpdate();
+  }
 }
 
 void SettingsActivity::syncQuickResumeTimeoutForSleepScreen(bool sleepScreenChanged, bool quickResumeTimeoutChanged) {
@@ -326,58 +370,90 @@ void SettingsActivity::render(RenderLock&&) {
 
   const auto& metrics = UITheme::getInstance().getMetrics();
 
-  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, tr(STR_SETTINGS_TITLE),
-                 CROSSPOINT_VERSION);
+  const ThemeScreenSpec* screenSpec = UITheme::getInstance().getScreenSpec(ThemeScreenKind::Settings);
+  ThemeLayoutSlots slots;
+  Rect headerRect{0, metrics.topPadding, pageWidth, metrics.headerHeight};
+  Rect tabsRect{0, metrics.topPadding + metrics.headerHeight, pageWidth, metrics.tabBarHeight};
+  Rect listRect{0, metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight + metrics.verticalSpacing,
+                pageWidth,
+                pageHeight - (metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight +
+                              metrics.buttonHintsHeight + metrics.verticalSpacing * 2)};
+  Rect buttonsRect{0, pageHeight - metrics.buttonHintsHeight, pageWidth, metrics.buttonHintsHeight};
+
+  if (screenSpec != nullptr) {
+    layoutThemeSlots(screenSpec->layout, Rect{0, 0, pageWidth, pageHeight}, metrics, slots);
+    headerRect = normalizeThemeHeaderSlot(findThemeSlot(slots, "header"), metrics);
+    tabsRect = findThemeSlot(slots, "tabs");
+    listRect = findThemeSlot(slots, "list");
+    buttonsRect = findThemeSlot(slots, "buttons");
+    if (listRect.width <= 0 || listRect.height <= 0) {
+      LOG_ERR("Settings", "Invalid SD settings layout: slots=%d; using built-in layout",
+              static_cast<int>(slots.size()));
+      screenSpec = nullptr;
+    }
+  }
+  if (screenSpec == nullptr) {
+    headerRect = Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight};
+    tabsRect = Rect{0, metrics.topPadding + metrics.headerHeight, pageWidth, metrics.tabBarHeight};
+    listRect =
+        Rect{0, metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight + metrics.verticalSpacing, pageWidth,
+             pageHeight - (metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight +
+                           metrics.buttonHintsHeight + metrics.verticalSpacing * 2)};
+    buttonsRect = Rect{0, pageHeight - metrics.buttonHintsHeight, pageWidth, metrics.buttonHintsHeight};
+  }
+
+  if (headerRect.width > 0 && headerRect.height > 0) {
+    GUI.drawHeader(renderer, headerRect, tr(STR_SETTINGS_TITLE), CROSSPOINT_VERSION);
+  }
 
   std::vector<TabInfo> tabs;
   tabs.reserve(categoryCount);
   for (int i = 0; i < categoryCount; i++) {
     tabs.push_back({I18N.get(categoryNames[i]), selectedCategoryIndex == i});
   }
-  GUI.drawTabBar(renderer, Rect{0, metrics.topPadding + metrics.headerHeight, pageWidth, metrics.tabBarHeight}, tabs,
-                 selectedSettingIndex == 0);
+  if (tabsRect.width > 0 && tabsRect.height > 0) {
+    GUI.drawTabBar(renderer, tabsRect, tabs, selectedSettingIndex == 0);
+  }
 
   const auto& settings = *currentSettings;
-  GUI.drawList(
-      renderer,
-      Rect{0, metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight + metrics.verticalSpacing, pageWidth,
-           pageHeight - (metrics.topPadding + metrics.headerHeight + metrics.tabBarHeight + metrics.buttonHintsHeight +
-                         metrics.verticalSpacing * 2)},
-      settingsCount, selectedSettingIndex - 1,
-      [&settings](int index) { return std::string(I18N.get(settings[index].nameId)); }, nullptr, nullptr,
-      [&settings](int i) {
-        const auto& setting = settings[i];
-        std::string valueText = "";
-        if (setting.type == SettingType::TOGGLE && setting.valuePtr != nullptr) {
-          const bool value = SETTINGS.*(setting.valuePtr);
-          valueText = value ? tr(STR_STATE_ON) : tr(STR_STATE_OFF);
-        } else if (setting.type == SettingType::ENUM && setting.valuePtr != nullptr) {
-          const uint8_t value = SETTINGS.*(setting.valuePtr);
-          valueText = I18N.get(setting.enumValues[value]);
-        } else if (setting.type == SettingType::ENUM && setting.valueGetter) {
-          const uint8_t value = setting.valueGetter();
-          if (!setting.enumStringValues.empty() && value < setting.enumStringValues.size()) {
-            valueText = setting.enumStringValues[value];
-          } else if (value < setting.enumValues.size()) {
+  if (listRect.width > 0 && listRect.height > 0) {
+    GUI.drawList(
+        renderer, listRect, settingsCount, selectedSettingIndex - 1,
+        [&settings](int index) { return std::string(I18N.get(settings[index].nameId)); }, nullptr, nullptr,
+        [&settings](int i) {
+          const auto& setting = settings[i];
+          std::string valueText = "";
+          if (setting.type == SettingType::TOGGLE && setting.valuePtr != nullptr) {
+            const bool value = SETTINGS.*(setting.valuePtr);
+            valueText = value ? tr(STR_STATE_ON) : tr(STR_STATE_OFF);
+          } else if (setting.type == SettingType::ENUM && setting.valuePtr != nullptr) {
+            const uint8_t value = SETTINGS.*(setting.valuePtr);
             valueText = I18N.get(setting.enumValues[value]);
-          }
-        } else if (setting.type == SettingType::VALUE && setting.valuePtr != nullptr) {
-          if (setting.nameId == StrId::STR_TIME_TO_SLEEP) {
-            char valueBuffer[32];
-            if (SETTINGS.sleepTimeoutMinutes >= CrossPointSettings::SLEEP_TIMEOUT_NEVER_MINUTES) {
-              valueText = tr(STR_SLEEP_NEVER);
+          } else if (setting.type == SettingType::ENUM && setting.valueGetter) {
+            const uint8_t value = setting.valueGetter();
+            if (!setting.enumStringValues.empty() && value < setting.enumStringValues.size()) {
+              valueText = setting.enumStringValues[value];
+            } else if (value < setting.enumValues.size()) {
+              valueText = I18N.get(setting.enumValues[value]);
+            }
+          } else if (setting.type == SettingType::VALUE && setting.valuePtr != nullptr) {
+            if (setting.nameId == StrId::STR_TIME_TO_SLEEP) {
+              char valueBuffer[32];
+              if (SETTINGS.sleepTimeoutMinutes >= CrossPointSettings::SLEEP_TIMEOUT_NEVER_MINUTES) {
+                valueText = tr(STR_SLEEP_NEVER);
+              } else {
+                snprintf(valueBuffer, sizeof(valueBuffer), tr(STR_SLEEP_TIMER_VALUE_FORMAT),
+                         static_cast<unsigned int>(SETTINGS.*(setting.valuePtr)));
+                valueText = valueBuffer;
+              }
             } else {
-              snprintf(valueBuffer, sizeof(valueBuffer), tr(STR_SLEEP_TIMER_VALUE_FORMAT),
-                       static_cast<unsigned int>(SETTINGS.*(setting.valuePtr)));
-              valueText = valueBuffer;
+              valueText = std::to_string(SETTINGS.*(setting.valuePtr));
             }
-          } else {
-            valueText = std::to_string(SETTINGS.*(setting.valuePtr));
           }
-        }
-        return valueText;
-      },
-      true);
+          return valueText;
+        },
+        true);
+  }
 
   // Draw help text
   const auto confirmLabel =
@@ -387,7 +463,9 @@ void SettingsActivity::render(RenderLock&&) {
                  ? tr(STR_SELECT)
                  : tr(STR_TOGGLE));
   const auto labels = mappedInput.mapLabels(tr(STR_BACK), confirmLabel, tr(STR_DIR_UP), tr(STR_DIR_DOWN));
-  GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  if (buttonsRect.width > 0 && buttonsRect.height > 0) {
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  }
 
   // Always use standard refresh for settings screen
   renderer.displayBuffer();
diff --git a/src/activities/settings/SettingsActivity.h b/src/activities/settings/SettingsActivity.h
index 5ec639a0..3929c932 100644
--- a/src/activities/settings/SettingsActivity.h
+++ b/src/activities/settings/SettingsActivity.h
@@ -23,6 +23,7 @@ enum class SettingAction {
   SdFirmwareUpdate,
   Language,
   DownloadFonts,
+  DownloadThemes,
 };
 
 struct SettingInfo {
@@ -166,6 +167,7 @@ class SettingsActivity final : public Activity {
   void toggleCurrentSetting();
   void openSleepTimeoutPicker();
   void rebuildSettingsLists();
+  void releaseSettingsLists();
   void syncQuickResumeTimeoutForSleepScreen(bool sleepScreenChanged, bool quickResumeTimeoutChanged);
 
  public:
diff --git a/src/activities/settings/ThemeDownloadActivity.cpp b/src/activities/settings/ThemeDownloadActivity.cpp
new file mode 100644
index 00000000..1ea0b5a8
--- /dev/null
+++ b/src/activities/settings/ThemeDownloadActivity.cpp
@@ -0,0 +1,584 @@
+#include "ThemeDownloadActivity.h"
+
+#include <ArduinoJson.h>
+#include <GfxRenderer.h>
+#include <HalStorage.h>
+#include <I18n.h>
+#include <Logging.h>
+#include <WiFi.h>
+#include <esp_rom_crc.h>
+
+#include <cstring>
+
+#include "MappedInputManager.h"
+#include "SilentRestart.h"
+#include "activities/network/WifiSelectionActivity.h"
+#include "activities/util/ConfirmationActivity.h"
+#include "components/UITheme.h"
+#include "fontIds.h"
+#include "network/HttpDownloader.h"
+
+ThemeDownloadActivity::ThemeDownloadActivity(GfxRenderer& renderer, MappedInputManager& mappedInput)
+    : Activity("ThemeDownload", renderer, mappedInput), themeInstaller_(UITheme::getInstance().registry()) {}
+
+void ThemeDownloadActivity::onEnter() {
+  Activity::onEnter();
+  WiFi.mode(WIFI_STA);
+  startActivityForResult(std::make_unique<WifiSelectionActivity>(renderer, mappedInput),
+                         [this](const ActivityResult& result) { onWifiSelectionComplete(!result.isCancelled); });
+}
+
+void ThemeDownloadActivity::onExit() {
+  Activity::onExit();
+  if (WiFi.getMode() != WIFI_MODE_NULL) {
+    WiFi.disconnect(false);
+    delay(30);
+    silentRestart();
+  }
+}
+
+void ThemeDownloadActivity::onWifiSelectionComplete(const bool success) {
+  if (!success) {
+    finish();
+    return;
+  }
+
+  {
+    RenderLock lock(*this);
+    state_ = LOADING_MANIFEST;
+    downloadingThemeIndex_ = -1;
+  }
+  requestUpdateAndWait();
+
+  if (!fetchAndParseManifest()) {
+    RenderLock lock(*this);
+    state_ = ERROR;
+    return;
+  }
+
+  {
+    RenderLock lock(*this);
+    state_ = THEME_LIST;
+    selectedIndex_ = 0;
+  }
+}
+
+bool ThemeDownloadActivity::fetchAndParseManifest() {
+  static constexpr const char* MANIFEST_TMP = "/themes_manifest.tmp";
+
+  auto result = HttpDownloader::downloadToFile(THEME_MANIFEST_URL, MANIFEST_TMP, nullptr);
+  if (result != HttpDownloader::OK) {
+    LOG_ERR("THEME", "Failed to fetch manifest from %s", THEME_MANIFEST_URL);
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+    Storage.remove(MANIFEST_TMP);
+    return false;
+  }
+
+  HalFile manifestFile;
+  if (!Storage.openFileForRead("THEME", MANIFEST_TMP, manifestFile)) {
+    Storage.remove(MANIFEST_TMP);
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+    return false;
+  }
+
+  JsonDocument doc;
+  DeserializationError err = deserializeJson(doc, manifestFile);
+  manifestFile.close();
+  Storage.remove(MANIFEST_TMP);
+
+  if (err) {
+    LOG_ERR("THEME", "Manifest parse error: %s", err.c_str());
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+    return false;
+  }
+
+  const int version = doc["version"] | 0;
+  if (version != THEMES_MANIFEST_VERSION) {
+    LOG_ERR("THEME", "Unsupported manifest version: %d", version);
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+    return false;
+  }
+
+  baseUrl_ = doc["baseUrl"] | "";
+  while (!baseUrl_.empty() && baseUrl_.back() == '/') {
+    baseUrl_.pop_back();
+  }
+  if (!baseUrl_.empty()) {
+    baseUrl_ += "/";
+  }
+  themes_.clear();
+  themeInstaller_.refreshRegistry();
+
+  JsonArray themesArr = doc["themes"].as<JsonArray>();
+  themes_.reserve(themesArr.size());
+
+  for (JsonObject tObj : themesArr) {
+    ManifestTheme theme;
+    theme.id = tObj["id"] | "";
+    theme.name = tObj["name"] | theme.id;
+    theme.description = tObj["description"] | "";
+    theme.version = tObj["version"] | 0;
+
+    if (!ThemeInstaller::isValidThemeId(theme.id.c_str())) {
+      errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+      return false;
+    }
+
+    JsonArray filesArr = tObj["files"].as<JsonArray>();
+    theme.files.reserve(filesArr.size());
+    for (JsonObject fileObj : filesArr) {
+      ManifestFile file;
+      file.path = fileObj["path"] | fileObj["name"] | "";
+      file.url = fileObj["url"] | file.path;
+      file.size = fileObj["size"] | 0;
+      if (!ThemeInstaller::isValidRelativePath(file.path.c_str()) ||
+          !ThemeInstaller::isValidRelativePath(file.url.c_str()) || !fileObj["crc32"].is<uint32_t>()) {
+        errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+        return false;
+      }
+      file.crc32 = fileObj["crc32"].as<uint32_t>();
+      theme.totalSize += file.size;
+      theme.files.push_back(std::move(file));
+    }
+
+    theme.installed = themeInstaller_.isThemeInstalled(theme.id.c_str());
+    if (theme.installed) {
+      // Primary update signal: the manifest declares a newer theme version than
+      // the copy installed on the SD card.
+      const auto* installed = UITheme::getInstance().registry().findTheme(theme.id);
+      const int installedVersion = installed != nullptr ? installed->version : 0;
+      if (theme.version > installedVersion) {
+        theme.hasUpdate = true;
+      } else {
+        // Safety net: even at the same version, re-offer if a file is missing or
+        // its size no longer matches (catches a corrupted or partial install).
+        for (const auto& file : theme.files) {
+          char path[180];
+          if (!ThemeInstaller::buildThemePath(theme.id.c_str(), file.path.c_str(), path, sizeof(path))) {
+            errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+            return false;
+          }
+          HalFile f;
+          if (Storage.openFileForRead("THEME", path, f)) {
+            const size_t actual = f.fileSize();
+            f.close();
+            if (actual != file.size) {
+              theme.hasUpdate = true;
+              break;
+            }
+          } else {
+            theme.hasUpdate = true;
+            break;
+          }
+        }
+      }
+    }
+
+    themes_.push_back(std::move(theme));
+  }
+  UITheme::getInstance().registry().clear();
+
+  LOG_DBG("THEME", "Manifest loaded: %zu themes", themes_.size());
+  return true;
+}
+
+void ThemeDownloadActivity::downloadAll() {
+  cancelRequested_ = false;
+  for (auto& theme : themes_) {
+    if (theme.installed) continue;
+    downloadTheme(theme);
+    if (state_ == ERROR || cancelRequested_) return;
+  }
+  RenderLock lock(*this);
+  state_ = COMPLETE;
+}
+
+void ThemeDownloadActivity::updateAll() {
+  cancelRequested_ = false;
+  for (auto& theme : themes_) {
+    if (!theme.hasUpdate) continue;
+    downloadTheme(theme);
+    if (state_ == ERROR || cancelRequested_) return;
+  }
+  RenderLock lock(*this);
+  state_ = COMPLETE;
+}
+
+bool ThemeDownloadActivity::showDownloadAllRow() const {
+  for (const auto& t : themes_) {
+    if (!t.installed) return true;
+  }
+  return false;
+}
+
+bool ThemeDownloadActivity::showUpdateAllRow() const {
+  for (const auto& t : themes_) {
+    if (t.hasUpdate) return true;
+  }
+  return false;
+}
+
+int ThemeDownloadActivity::specialRowCount() const {
+  return (showDownloadAllRow() ? 1 : 0) + (showUpdateAllRow() ? 1 : 0);
+}
+
+bool ThemeDownloadActivity::isDownloadAllRow(int index) const { return showDownloadAllRow() && index == 0; }
+
+bool ThemeDownloadActivity::isUpdateAllRow(int index) const {
+  return showUpdateAllRow() && index == (showDownloadAllRow() ? 1 : 0);
+}
+
+int ThemeDownloadActivity::listItemCount() const {
+  return themes_.empty() ? 0 : static_cast<int>(themes_.size()) + specialRowCount();
+}
+
+size_t ThemeDownloadActivity::totalDownloadSize() const {
+  size_t total = 0;
+  for (const auto& t : themes_) {
+    if (!t.installed) total += t.totalSize;
+  }
+  return total;
+}
+
+size_t ThemeDownloadActivity::totalUpdateSize() const {
+  size_t total = 0;
+  for (const auto& t : themes_) {
+    if (t.hasUpdate) total += t.totalSize;
+  }
+  return total;
+}
+
+bool ThemeDownloadActivity::computeFileCrc32(const char* path, uint32_t& outCrc) {
+  HalFile f;
+  if (!Storage.openFileForRead("THEME", path, f)) return false;
+  constexpr size_t BUF_SIZE = 128;
+  uint8_t buf[BUF_SIZE];
+  uint32_t crc = 0;
+  while (f.available()) {
+    const int n = f.read(buf, BUF_SIZE);
+    if (n <= 0) break;
+    crc = esp_rom_crc32_le(crc, buf, static_cast<uint32_t>(n));
+  }
+  f.close();
+  outCrc = crc;
+  return true;
+}
+
+void ThemeDownloadActivity::downloadTheme(ManifestTheme& theme) {
+  {
+    RenderLock lock(*this);
+    state_ = DOWNLOADING;
+    downloadingThemeIndex_ = static_cast<int>(&theme - themes_.data());
+    fileProgress_ = 0;
+    fileTotal_ = 0;
+    cancelRequested_ = false;
+  }
+  requestUpdateAndWait();
+
+  if (!themeInstaller_.ensureThemeDir(theme.id.c_str())) {
+    RenderLock lock(*this);
+    state_ = ERROR;
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+    return;
+  }
+
+  for (size_t i = 0; i < theme.files.size(); i++) {
+    const auto& file = theme.files[i];
+    {
+      RenderLock lock(*this);
+      fileProgress_ = 0;
+      fileTotal_ = file.size;
+    }
+    requestUpdateAndWait();
+
+    char destPath[180];
+    if (!ThemeInstaller::buildThemePath(theme.id.c_str(), file.path.c_str(), destPath, sizeof(destPath))) {
+      RenderLock lock(*this);
+      state_ = ERROR;
+      errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+      return;
+    }
+    if (!themeInstaller_.ensureParentDirs(destPath)) {
+      RenderLock lock(*this);
+      state_ = ERROR;
+      errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+      return;
+    }
+
+    std::string url = baseUrl_ + file.url;
+    auto result = HttpDownloader::downloadToFile(
+        url, destPath,
+        [this](size_t downloaded, size_t total) {
+          fileProgress_ = downloaded;
+          fileTotal_ = total;
+          mappedInput.update();
+          if (mappedInput.isPressed(MappedInputManager::Button::Back) ||
+              mappedInput.wasPressed(MappedInputManager::Button::Back)) {
+            cancelRequested_ = true;
+          }
+          requestUpdate(true);
+        },
+        &cancelRequested_);
+
+    if (result == HttpDownloader::ABORTED) {
+      themeInstaller_.deleteTheme(theme.id.c_str());
+      theme.installed = false;
+      theme.hasUpdate = false;
+      RenderLock lock(*this);
+      state_ = THEME_LIST;
+      return;
+    }
+
+    if (result != HttpDownloader::OK) {
+      themeInstaller_.deleteTheme(theme.id.c_str());
+      theme.installed = false;
+      theme.hasUpdate = false;
+      RenderLock lock(*this);
+      state_ = ERROR;
+      errorMessage_ = std::string(tr(STR_DOWNLOAD_FAILED)) + ": " + file.path;
+      return;
+    }
+
+    uint32_t actualCrc = 0;
+    if (!computeFileCrc32(destPath, actualCrc) || actualCrc != file.crc32 ||
+        !themeInstaller_.validateThemeFile(destPath)) {
+      themeInstaller_.deleteTheme(theme.id.c_str());
+      theme.installed = false;
+      theme.hasUpdate = false;
+      RenderLock lock(*this);
+      state_ = ERROR;
+      errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+      return;
+    }
+    currentFileIndex_++;
+  }
+
+  theme.installed = true;
+  theme.hasUpdate = false;
+  RenderLock lock(*this);
+  state_ = COMPLETE;
+}
+
+void ThemeDownloadActivity::promptDeleteSelectedTheme() {
+  const int pendingDeleteThemeIndex = themeIndexFromList(selectedIndex_);
+  if (pendingDeleteThemeIndex < 0 || pendingDeleteThemeIndex >= static_cast<int>(themes_.size())) return;
+
+  const auto& theme = themes_[pendingDeleteThemeIndex];
+  startActivityForResult(std::make_unique<ConfirmationActivity>(renderer, mappedInput, tr(STR_DELETE), theme.name),
+                         [this](const ActivityResult& result) { onDeleteConfirmationResult(result); });
+}
+
+void ThemeDownloadActivity::onDeleteConfirmationResult(const ActivityResult& result) {
+  if (result.isCancelled) {
+    requestUpdate();
+    return;
+  }
+
+  auto& theme = themes_[themeIndexFromList(selectedIndex_)];
+  if (themeInstaller_.deleteTheme(theme.id.c_str()) != ThemeInstaller::Error::OK) {
+    RenderLock lock(*this);
+    state_ = ERROR;
+    errorMessage_ = tr(STR_DOWNLOAD_FAILED);
+  } else {
+    theme.installed = false;
+    theme.hasUpdate = false;
+  }
+  requestUpdate();
+}
+
+bool ThemeDownloadActivity::isSelectedThemeDeletable() const {
+  if (isDownloadAllRow(selectedIndex_) || isUpdateAllRow(selectedIndex_)) return false;
+  if (selectedIndex_ < specialRowCount() || selectedIndex_ >= listItemCount()) return false;
+  const auto& theme = themes_[themeIndexFromList(selectedIndex_)];
+  return theme.installed && !theme.hasUpdate;
+}
+
+void ThemeDownloadActivity::loop() {
+  if (state_ == THEME_LIST) {
+    if (mappedInput.wasPressed(MappedInputManager::Button::Back)) {
+      finish();
+      return;
+    }
+
+    const int listSize = listItemCount();
+    const int pageItems = UITheme::getNumberOfItemsPerPage(renderer, true, false, true, false);
+    buttonNavigator_.onNextRelease([this, listSize] {
+      selectedIndex_ = ButtonNavigator::nextIndex(selectedIndex_, listSize);
+      requestUpdate();
+    });
+    buttonNavigator_.onPreviousRelease([this, listSize] {
+      selectedIndex_ = ButtonNavigator::previousIndex(selectedIndex_, listSize);
+      requestUpdate();
+    });
+    buttonNavigator_.onNextContinuous([this, listSize, pageItems] {
+      selectedIndex_ = ButtonNavigator::nextPageIndex(selectedIndex_, listSize, pageItems);
+      requestUpdate();
+    });
+    buttonNavigator_.onPreviousContinuous([this, listSize, pageItems] {
+      selectedIndex_ = ButtonNavigator::previousPageIndex(selectedIndex_, listSize, pageItems);
+      requestUpdate();
+    });
+
+    if (mappedInput.wasPressed(MappedInputManager::Button::Confirm) && !themes_.empty()) {
+      if (isDownloadAllRow(selectedIndex_)) {
+        currentFileIndex_ = 0;
+        currentFileTotal_ = 0;
+        for (const auto& t : themes_) {
+          if (!t.installed) currentFileTotal_ += t.files.size();
+        }
+        downloadAll();
+      } else if (isUpdateAllRow(selectedIndex_)) {
+        currentFileIndex_ = 0;
+        currentFileTotal_ = 0;
+        for (const auto& t : themes_) {
+          if (t.hasUpdate) currentFileTotal_ += t.files.size();
+        }
+        updateAll();
+      } else {
+        auto& theme = themes_[themeIndexFromList(selectedIndex_)];
+        if (!theme.installed || theme.hasUpdate) {
+          currentFileIndex_ = 0;
+          currentFileTotal_ = theme.files.size();
+          downloadTheme(theme);
+        } else {
+          promptDeleteSelectedTheme();
+          return;
+        }
+      }
+      requestUpdateAndWait();
+    }
+  } else if (state_ == COMPLETE) {
+    if (mappedInput.wasPressed(MappedInputManager::Button::Back) ||
+        mappedInput.wasPressed(MappedInputManager::Button::Confirm)) {
+      RenderLock lock(*this);
+      state_ = THEME_LIST;
+      requestUpdate();
+    }
+  } else if (state_ == ERROR) {
+    if (mappedInput.wasPressed(MappedInputManager::Button::Back)) {
+      RenderLock lock(*this);
+      state_ = THEME_LIST;
+      requestUpdate();
+    } else if (mappedInput.wasPressed(MappedInputManager::Button::Confirm)) {
+      if (downloadingThemeIndex_ >= 0 && downloadingThemeIndex_ < static_cast<int>(themes_.size())) {
+        downloadTheme(themes_[downloadingThemeIndex_]);
+        requestUpdateAndWait();
+      } else {
+        {
+          RenderLock lock(*this);
+          state_ = LOADING_MANIFEST;
+          errorMessage_.clear();
+        }
+        requestUpdateAndWait();
+
+        if (!fetchAndParseManifest()) {
+          RenderLock lock(*this);
+          state_ = ERROR;
+        } else {
+          RenderLock lock(*this);
+          state_ = THEME_LIST;
+          selectedIndex_ = 0;
+        }
+        requestUpdate();
+      }
+    }
+  }
+}
+
+std::string ThemeDownloadActivity::formatSize(size_t bytes) {
+  char buf[32];
+  if (bytes >= 1024 * 1024) {
+    snprintf(buf, sizeof(buf), "%.1f MB", static_cast<double>(bytes) / (1024.0 * 1024.0));
+  } else if (bytes >= 1024) {
+    snprintf(buf, sizeof(buf), "%.0f KB", static_cast<double>(bytes) / 1024.0);
+  } else {
+    snprintf(buf, sizeof(buf), "%zu B", bytes);
+  }
+  return buf;
+}
+
+void ThemeDownloadActivity::render(RenderLock&&) {
+  const auto& metrics = UITheme::getInstance().getMetrics();
+  const auto pageWidth = renderer.getScreenWidth();
+  const auto pageHeight = renderer.getScreenHeight();
+  renderer.clearScreen();
+
+  GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, tr(STR_MANAGE_THEMES));
+  const auto lineHeight = renderer.getLineHeight(UI_10_FONT_ID);
+  const auto contentTop = metrics.topPadding + metrics.headerHeight + metrics.verticalSpacing;
+  const auto centerY = (pageHeight - lineHeight) / 2;
+
+  if (state_ == LOADING_MANIFEST) {
+    renderer.drawCenteredText(UI_10_FONT_ID, centerY, tr(STR_LOADING));
+  } else if (state_ == THEME_LIST) {
+    if (themes_.empty()) {
+      renderer.drawCenteredText(UI_10_FONT_ID, centerY, tr(STR_DOWNLOAD_FAILED));
+      const auto labels = mappedInput.mapLabels(tr(STR_BACK), "", "", "");
+      GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+    } else {
+      GUI.drawList(
+          renderer,
+          Rect{0, contentTop, pageWidth, pageHeight - contentTop - metrics.buttonHintsHeight - metrics.verticalSpacing},
+          listItemCount(), selectedIndex_,
+          [this](int index) -> std::string {
+            if (isDownloadAllRow(index))
+              return std::string(tr(STR_DOWNLOAD_ALL)) + " (" + formatSize(totalDownloadSize()) + ")";
+            if (isUpdateAllRow(index))
+              return std::string(tr(STR_UPDATE_ALL)) + " (" + formatSize(totalUpdateSize()) + ")";
+            return themes_[themeIndexFromList(index)].name;
+          },
+          [this](int index) -> std::string {
+            if (isDownloadAllRow(index) || isUpdateAllRow(index)) return "";
+            return themes_[themeIndexFromList(index)].description;
+          },
+          nullptr,
+          [this](int index) -> std::string {
+            if (isDownloadAllRow(index) || isUpdateAllRow(index)) return "";
+            const auto& t = themes_[themeIndexFromList(index)];
+            if (t.hasUpdate) return tr(STR_UPDATE_AVAILABLE);
+            if (t.installed) return tr(STR_INSTALLED);
+            return "";
+          },
+          true,
+          [this](int index) -> bool {
+            if (isDownloadAllRow(index) || isUpdateAllRow(index)) return false;
+            const auto& t = themes_[themeIndexFromList(index)];
+            return t.installed && !t.hasUpdate;
+          });
+
+      const auto labels = mappedInput.mapLabels(tr(STR_BACK),
+                                                isSelectedThemeDeletable()       ? tr(STR_DELETE)
+                                                : isUpdateAllRow(selectedIndex_) ? tr(STR_UPDATE)
+                                                                                 : tr(STR_DOWNLOAD),
+                                                tr(STR_DIR_UP), tr(STR_DIR_DOWN));
+      GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+    }
+  } else if (state_ == DOWNLOADING) {
+    const auto& theme = themes_[downloadingThemeIndex_];
+    std::string statusText = std::string(tr(STR_DOWNLOADING)) + " " + theme.name + " (" +
+                             std::to_string(currentFileIndex_ + 1) + "/" + std::to_string(currentFileTotal_) + ")";
+    renderer.drawCenteredText(UI_10_FONT_ID, centerY - lineHeight, statusText.c_str());
+
+    float progress = 0;
+    if (fileTotal_ > 0) progress = static_cast<float>(fileProgress_) / static_cast<float>(fileTotal_);
+    GUI.drawProgressBar(renderer,
+                        Rect{metrics.contentSidePadding, centerY + metrics.verticalSpacing,
+                             pageWidth - metrics.contentSidePadding * 2, metrics.progressBarHeight},
+                        static_cast<int>(progress * 100), 100);
+
+    const auto labels = mappedInput.mapLabels(tr(STR_CANCEL), "", "", "");
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  } else if (state_ == COMPLETE) {
+    renderer.drawCenteredText(UI_10_FONT_ID, centerY, tr(STR_INSTALLED), true, EpdFontFamily::BOLD);
+    const auto labels = mappedInput.mapLabels(tr(STR_BACK), "", "", "");
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  } else if (state_ == ERROR) {
+    renderer.drawCenteredText(UI_10_FONT_ID, centerY - lineHeight, tr(STR_DOWNLOAD_FAILED), true, EpdFontFamily::BOLD);
+    if (!errorMessage_.empty())
+      renderer.drawCenteredText(UI_10_FONT_ID, centerY + metrics.verticalSpacing, errorMessage_.c_str());
+    const auto labels = mappedInput.mapLabels(tr(STR_BACK), tr(STR_RETRY), "", "");
+    GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
+  }
+
+  renderer.displayBuffer();
+}
diff --git a/src/activities/settings/ThemeDownloadActivity.h b/src/activities/settings/ThemeDownloadActivity.h
new file mode 100644
index 00000000..a6bc4ee6
--- /dev/null
+++ b/src/activities/settings/ThemeDownloadActivity.h
@@ -0,0 +1,93 @@
+#pragma once
+
+#include <string>
+#include <vector>
+
+#include "ThemeInstaller.h"
+#include "activities/Activity.h"
+#include "util/ButtonNavigator.h"
+
+#define THEMES_MANIFEST_VERSION 1
+#define THEME_ROOT_URL "http://crosspointreader.com/themes"
+
+#ifndef THEME_MANIFEST_URL
+#define THEME_MANIFEST_URL THEME_ROOT_URL "/themes.json"
+#endif
+
+class ThemeDownloadActivity : public Activity {
+ public:
+  explicit ThemeDownloadActivity(GfxRenderer& renderer, MappedInputManager& mappedInput);
+
+  void onEnter() override;
+  void onExit() override;
+  void loop() override;
+  void render(RenderLock&&) override;
+  bool preventAutoSleep() override {
+    return state_ == LOADING_MANIFEST || state_ == DOWNLOADING || state_ == COMPLETE || state_ == ERROR;
+  }
+  bool skipLoopDelay() override { return true; }
+
+ private:
+  enum State {
+    WIFI_SELECTION,
+    LOADING_MANIFEST,
+    THEME_LIST,
+    DOWNLOADING,
+    COMPLETE,
+    ERROR,
+  };
+
+  struct ManifestFile {
+    std::string path;
+    std::string url;
+    size_t size = 0;
+    uint32_t crc32 = 0;
+  };
+
+  struct ManifestTheme {
+    std::string id;
+    std::string name;
+    std::string description;
+    int version = 0;
+    std::vector<ManifestFile> files;
+    size_t totalSize = 0;
+    bool installed = false;
+    bool hasUpdate = false;
+  };
+
+  State state_ = WIFI_SELECTION;
+  ThemeInstaller themeInstaller_;
+  ButtonNavigator buttonNavigator_;
+
+  std::string baseUrl_;
+  std::vector<ManifestTheme> themes_;
+  int selectedIndex_ = 0;
+
+  size_t currentFileIndex_ = 0;
+  size_t currentFileTotal_ = 0;
+  size_t fileProgress_ = 0;
+  size_t fileTotal_ = 0;
+  int downloadingThemeIndex_ = -1;
+  std::string errorMessage_;
+  bool cancelRequested_ = false;
+
+  void onWifiSelectionComplete(bool success);
+  bool fetchAndParseManifest();
+  void downloadTheme(ManifestTheme& theme);
+  void downloadAll();
+  void updateAll();
+  static bool computeFileCrc32(const char* path, uint32_t& outCrc);
+  bool showDownloadAllRow() const;
+  bool showUpdateAllRow() const;
+  int specialRowCount() const;
+  bool isDownloadAllRow(int index) const;
+  bool isUpdateAllRow(int index) const;
+  bool isSelectedThemeDeletable() const;
+  void promptDeleteSelectedTheme();
+  void onDeleteConfirmationResult(const ActivityResult& result);
+  int themeIndexFromList(int listIndex) const { return listIndex - specialRowCount(); }
+  int listItemCount() const;
+  size_t totalDownloadSize() const;
+  size_t totalUpdateSize() const;
+  static std::string formatSize(size_t bytes);
+};
diff --git a/src/components/UITheme.cpp b/src/components/UITheme.cpp
index 9220d43c..ddf62f1e 100644
--- a/src/components/UITheme.cpp
+++ b/src/components/UITheme.cpp
@@ -2,12 +2,13 @@
 
 #include <FsHelpers.h>
 #include <GfxRenderer.h>
+#include <HalGPIO.h>
 #include <Logging.h>
 
+#include <algorithm>
+#include <cmath>
 #include <memory>
 
-#include "MappedInputManager.h"
-#include "RecentBooksStore.h"
 #include "components/themes/BaseTheme.h"
 #include "components/themes/lyra/Lyra3CoversTheme.h"
 #include "components/themes/lyra/LyraTheme.h"
@@ -15,39 +16,314 @@
 
 UITheme UITheme::instance;
 
+namespace {
+
+// Round a pixel dimension by a scale factor.
+int sp(int v, float s) { return static_cast<int>(std::lround(v * s)); }
+
+}  // namespace
+
+// Density scale is 1.0 here (button devices); touch builds override this to wire
+// in the per-board profile. Resolution scaling composes with it (see reload()).
+float UITheme::uiScale() { return 1.0f; }
+
+// Unified theme metric scaling. Two independent, composable inputs:
+//   res     - resolution ratio: this panel's pixels vs the theme's design
+//             resolution. Applies to EVERY pixel field, including the home cover
+//             and reader chrome, because more/fewer pixels means the whole layout
+//             scales proportionally and still fits by construction.
+//   density - per-board UI/touch-target scale (uiScale: 1.0 on button devices,
+//             >1 on high-density touch boards). Same pixel count, so it applies
+//             ONLY to chrome that can grow into spare space, and is deliberately
+//             withheld from fit-constrained elements (home cover, reader status/
+//             progress bars) that would overflow the fixed panel if enlarged.
+// Effective factor per field is res (always) times density (where eligible).
+// Counts, percents, ratios, and bools are never scaled. Degrades exactly: with
+// density==1 this is pure resolution scaling; with res==1, pure density scaling.
+ThemeMetrics scaleThemeMetrics(const ThemeMetrics& b, float res, float density) {
+  static_assert(sizeof(ThemeMetrics) == THEME_METRICS_SIZEOF,
+                "ThemeMetrics changed: review scaleThemeMetrics() and update THEME_METRICS_SIZEOF");
+  ThemeMetrics m = b;
+  const float full = res * density;  // resolution + density-eligible chrome
+  if (res == 1.0f && density == 1.0f) return m;
+  m.batteryWidth = sp(b.batteryWidth, full);
+  m.batteryHeight = sp(b.batteryHeight, full);
+  m.topPadding = sp(b.topPadding, full);
+  m.batteryBarHeight = sp(b.batteryBarHeight, full);
+  m.headerHeight = sp(b.headerHeight, full);
+  m.verticalSpacing = sp(b.verticalSpacing, full);
+  m.previewPadding = sp(b.previewPadding, full);  // previewHeightPercent is a percent: not scaled
+  m.contentSidePadding = sp(b.contentSidePadding, full);
+  m.listRowHeight = sp(b.listRowHeight, full);
+  m.listWithSubtitleRowHeight = sp(b.listWithSubtitleRowHeight, full);
+  m.menuRowHeight = sp(b.menuRowHeight, full);
+  m.menuSpacing = sp(b.menuSpacing, full);
+  m.tabSpacing = sp(b.tabSpacing, full);
+  m.tabBarHeight = sp(b.tabBarHeight, full);
+  m.scrollBarWidth = sp(b.scrollBarWidth, full);
+  m.scrollBarRightOffset = sp(b.scrollBarRightOffset, full);
+  m.homeTopPadding = sp(b.homeTopPadding, full);
+  // Fit-constrained: resolution only, never density (would push the menu off the
+  // fixed-height home screen). homeRecentBooksCount/bools are not scaled.
+  m.homeCoverHeight = sp(b.homeCoverHeight, res);
+  m.homeCoverTileHeight = sp(b.homeCoverTileHeight, res);
+  m.homeMenuTopOffset = sp(b.homeMenuTopOffset, full);
+  m.buttonHintsHeight = sp(b.buttonHintsHeight, full);
+  m.sideButtonHintsWidth = sp(b.sideButtonHintsWidth, full);
+  // Reader chrome (compact, uses the un-remapped SMALL font): resolution only,
+  // never density, so it does not eat reading area on high-density boards.
+  m.progressBarHeight = sp(b.progressBarHeight, res);
+  m.progressBarMarginTop = sp(b.progressBarMarginTop, res);
+  m.statusBarHorizontalMargin = sp(b.statusBarHorizontalMargin, res);
+  m.statusBarVerticalMargin = sp(b.statusBarVerticalMargin, res);
+  m.keyboardKeyWidth = sp(b.keyboardKeyWidth, full);
+  m.keyboardKeyHeight = sp(b.keyboardKeyHeight, full);
+  m.keyboardKeySpacing = sp(b.keyboardKeySpacing, full);
+  m.keyboardBottomKeyHeight = sp(b.keyboardBottomKeyHeight, full);
+  m.keyboardBottomKeySpacing = sp(b.keyboardBottomKeySpacing, full);
+  m.keyboardVerticalOffset = sp(b.keyboardVerticalOffset, full);
+  // keyboardTextFieldWidthPercent / keyboardWidthPercent are percents: not scaled
+  m.keyboardKeyCornerRadius = sp(b.keyboardKeyCornerRadius, full);
+  m.keyboardSecondaryLabelRightPadding = sp(b.keyboardSecondaryLabelRightPadding, full);
+  m.keyboardSecondaryLabelTopPadding = sp(b.keyboardSecondaryLabelTopPadding, full);
+  m.keyboardMinArrowHeadSize = sp(b.keyboardMinArrowHeadSize, full);
+  // popupTopOffsetRatio is a ratio: not scaled
+  m.popupMarginX = sp(b.popupMarginX, full);
+  m.popupMarginY = sp(b.popupMarginY, full);
+  m.popupFrameThickness = sp(b.popupFrameThickness, full);
+  m.popupCornerRadius = sp(b.popupCornerRadius, full);
+  m.popupTextBaselineOffsetY = sp(b.popupTextBaselineOffsetY, full);
+  m.popupProgressBarHeight = sp(b.popupProgressBarHeight, full);
+  m.textFieldHorizontalPadding = sp(b.textFieldHorizontalPadding, full);
+  m.textFieldNormalThickness = sp(b.textFieldNormalThickness, full);
+  m.textFieldCursorThickness = sp(b.textFieldCursorThickness, full);
+  m.textFieldLineEndOffset = sp(b.textFieldLineEndOffset, full);
+  return m;
+}
+
+namespace {
+
+// Scale the cover-strip slot geometry. Covers are fit-constrained, so like
+// homeCover they take the resolution factor only, never density. widthPercent is
+// a ratio of the cover height and stays unscaled; only pixel offsets/heights move.
+void scaleHomeRecents(ThemeHomeRecentsSpec& spec, float res) {
+  if (res == 1.0f) return;
+  spec.panelCornerRadius = sp(spec.panelCornerRadius, res);
+  spec.panelInsetX = sp(spec.panelInsetX, res);
+  spec.selectionCornerRadius = sp(spec.selectionCornerRadius, res);
+  for (auto& slot : spec.slots) {
+    slot.height = sp(slot.height, res);
+    slot.xOffset = sp(slot.xOffset, res);
+    slot.yOffset = sp(slot.yOffset, res);
+    slot.title.offsetY = sp(slot.title.offsetY, res);
+  }
+}
+
+// Resolution scale = (device native portrait panel) / (theme's declared design
+// resolution). Uniform min(width,height) ratio: no axis distortion, content fits
+// the tighter axis. Returns 1.0 when constraints are missing (back-compat no-op).
+float resolutionScale(const SdThemeDeviceConstraints& design) {
+  if (design.screenWidth <= 0 || design.screenHeight <= 0) return 1.0f;
+  // Native portrait dimensions are fixed per device (X3 528x792, X4 480x800).
+  const int actualW = gpio.deviceIsX3() ? 528 : 480;
+  const int actualH = gpio.deviceIsX3() ? 792 : 800;
+  const float wRatio = static_cast<float>(actualW) / static_cast<float>(design.screenWidth);
+  const float hRatio = static_cast<float>(actualH) / static_cast<float>(design.screenHeight);
+  return std::min(wRatio, hRatio);
+}
+
+}  // namespace
+
 UITheme::UITheme() {
   auto themeType = static_cast<CrossPointSettings::UI_THEME>(SETTINGS.uiTheme);
   setTheme(themeType);
 }
 
+void UITheme::clearSdThemeState() {
+  currentSdMetrics = ThemeMetrics{};
+  currentSdHomeRecents = ThemeHomeRecentsSpec{};
+  currentSdButtonMenu = ThemeButtonMenuSpec{};
+  currentSdList = ThemeListSpec{};
+  currentSdButtonHints = ThemeButtonHintsSpec{};
+  currentSdTabBar = ThemeTabBarSpec{};
+  currentSdHeader = ThemeHeaderSpec{};
+  currentSdHomeScreen = ThemeHomeScreenSpec{};
+  currentSdFileBrowserScreen = ThemeScreenSpec{};
+  currentSdRecentBooksScreen = ThemeScreenSpec{};
+  currentSdSettingsScreen = ThemeScreenSpec{};
+  currentSdReaderScreen = ThemeScreenSpec{};
+  currentSdReaderChrome = ThemeReaderChromeSpec{};
+  currentSdThemePath.clear();
+  currentSdIcons.clear();
+}
+
+void UITheme::refreshRegistry() { themeRegistry.discover(); }
+
+void UITheme::releaseSdThemeAssetMemory() {
+  // Keep active SD theme backing storage intact; currentTheme may hold pointers
+  // into it. This only releases discovered theme metadata that can be rebuilt.
+  themeRegistry.clear();
+}
+
+std::vector<int> UITheme::getHomeCoverThumbHeights() const {
+  std::vector<int> heights;
+  heights.reserve(1 + currentSdHomeRecents.slots.size());
+  auto addHeight = [&heights](int height) {
+    if (height > 0 && std::find(heights.begin(), heights.end(), height) == heights.end()) {
+      heights.push_back(height);
+    }
+  };
+
+  addHeight(currentMetrics->homeCoverHeight);
+  if (currentSdHomeRecents.type == ThemeHomeRecentsType::CoverStrip) {
+    for (const auto& slot : currentSdHomeRecents.slots) {
+      addHeight(slot.height);
+    }
+  }
+  if (currentSdHomeScreen.enabled) {
+    for (const auto& widget : currentSdHomeScreen.widgets) {
+      if (widget.type == ThemeHomeWidgetType::FeaturedBookCard) {
+        addHeight(widget.featured.coverHeight);
+      }
+      if (widget.type == ThemeHomeWidgetType::RecentCoverGrid) {
+        addHeight(widget.coverGrid.coverHeight);
+      }
+    }
+  }
+  if (currentSdRecentBooksScreen.enabled) {
+    for (const auto& widget : currentSdRecentBooksScreen.widgets) {
+      if (widget.type == ThemeScreenWidgetType::CoverGrid) {
+        addHeight(widget.coverGrid.coverHeight);
+      }
+    }
+  }
+  if (heights.empty()) return {};
+  return {*std::max_element(heights.begin(), heights.end())};
+}
+
+int UITheme::getHomeCoverThumbHeight() const {
+  const auto heights = getHomeCoverThumbHeights();
+  return heights.empty() ? 0 : heights.front();
+}
+
+int UITheme::getRecentBooksCoverThumbHeight() const { return getHomeCoverThumbHeight(); }
+
+const ThemeScreenSpec* UITheme::getScreenSpec(ThemeScreenKind screen) const {
+  switch (screen) {
+    case ThemeScreenKind::FileBrowser:
+      return currentSdFileBrowserScreen.enabled ? &currentSdFileBrowserScreen : nullptr;
+    case ThemeScreenKind::RecentBooks:
+      return currentSdRecentBooksScreen.enabled ? &currentSdRecentBooksScreen : nullptr;
+    case ThemeScreenKind::Settings:
+      return currentSdSettingsScreen.enabled ? &currentSdSettingsScreen : nullptr;
+    case ThemeScreenKind::Reader:
+      return currentSdReaderScreen.enabled ? &currentSdReaderScreen : nullptr;
+    case ThemeScreenKind::Home:
+    default:
+      return nullptr;
+  }
+}
+
 void UITheme::reload() {
-  auto themeType = static_cast<CrossPointSettings::UI_THEME>(SETTINGS.uiTheme);
-  setTheme(themeType);
+  if (SETTINGS.sdThemeName[0] != '\0') {
+    const SdCardThemeInfo* themeInfo = themeRegistry.findTheme(SETTINGS.sdThemeName);
+    if (themeInfo == nullptr) {
+      refreshRegistry();
+      themeInfo = themeRegistry.findTheme(SETTINGS.sdThemeName);
+    }
+    if (themeInfo == nullptr) {
+      LOG_ERR("UI", "SD theme not found: %s (falling back to built-in theme)", SETTINGS.sdThemeName);
+      themeRegistry.clear();
+      SETTINGS.sdThemeName[0] = '\0';
+      SETTINGS.saveToFile();
+      setTheme(static_cast<CrossPointSettings::UI_THEME>(SETTINGS.uiTheme));
+      return;
+    }
+
+    LOG_DBG("UI", "Using SD theme: %s recentsType=%d count=%d slots=%d", themeInfo->id.c_str(),
+            static_cast<int>(themeInfo->homeRecents.type), themeInfo->metrics.homeRecentBooksCount,
+            static_cast<int>(themeInfo->homeRecents.slots.size()));
+    // Adapt the theme (authored at its declared design resolution) to this panel:
+    // resolution ratio for everything, plus the per-board density scale for chrome.
+    const float res = resolutionScale(themeInfo->constraints);
+    LOG_DBG("UI", "Theme scale: res %d.%03d density %d.%03d (design %dx%d)", static_cast<int>(res),
+            static_cast<int>(res * 1000) % 1000, static_cast<int>(uiScale()), static_cast<int>(uiScale() * 1000) % 1000,
+            themeInfo->constraints.screenWidth, themeInfo->constraints.screenHeight);
+    currentSdMetrics = scaleThemeMetrics(themeInfo->metrics, res, uiScale());
+    currentSdHomeRecents = themeInfo->homeRecents;
+    scaleHomeRecents(currentSdHomeRecents, res);
+    currentSdButtonMenu = themeInfo->buttonMenu;
+    currentSdList = themeInfo->list;
+    currentSdButtonHints = themeInfo->buttonHints;
+    currentSdTabBar = themeInfo->tabBar;
+    currentSdHeader = themeInfo->header;
+    currentSdHomeScreen = themeInfo->homeScreen;
+    currentSdFileBrowserScreen = themeInfo->fileBrowserScreen;
+    currentSdRecentBooksScreen = themeInfo->recentBooksScreen;
+    currentSdSettingsScreen = themeInfo->settingsScreen;
+    currentSdReaderScreen = themeInfo->readerScreen;
+    currentSdReaderChrome = themeInfo->readerChrome;
+    currentSdThemePath = themeInfo->path;
+    currentSdIcons = themeInfo->icons;
+    const bool inheritsClassic = themeInfo->inherits == "classic";
+    themeRegistry.clear();
+    if (inheritsClassic) {
+      currentTheme = std::make_unique<BaseTheme>();
+      currentMetrics = &currentSdMetrics;
+      return;
+    }
+    const ThemeHomeRecentsSpec* homeRecents =
+        currentSdHomeRecents.type != ThemeHomeRecentsType::Default ? &currentSdHomeRecents : nullptr;
+    const ThemeButtonMenuSpec* buttonMenu = currentSdButtonMenu.enabled ? &currentSdButtonMenu : nullptr;
+    const ThemeListSpec* list = currentSdList.enabled ? &currentSdList : nullptr;
+    const ThemeButtonHintsSpec* buttonHints = currentSdButtonHints.enabled ? &currentSdButtonHints : nullptr;
+    const ThemeTabBarSpec* tabBar = currentSdTabBar.enabled ? &currentSdTabBar : nullptr;
+    const ThemeHeaderSpec* header = currentSdHeader.enabled ? &currentSdHeader : nullptr;
+    currentTheme = std::make_unique<LyraTheme>(&currentSdMetrics, homeRecents, buttonMenu, list, buttonHints, tabBar,
+                                               header, currentSdThemePath.c_str(), &currentSdIcons);
+    currentMetrics = &currentSdMetrics;
+    return;
+  }
+
+  setTheme(static_cast<CrossPointSettings::UI_THEME>(SETTINGS.uiTheme));
 }
 
 void UITheme::setTheme(CrossPointSettings::UI_THEME type) {
+  std::unique_ptr<BaseTheme> nextTheme;
+  const ThemeMetrics* nextMetrics = &LyraMetrics::values;
+
   switch (type) {
     case CrossPointSettings::UI_THEME::CLASSIC:
       LOG_DBG("UI", "Using Classic theme");
-      currentTheme = std::make_unique<BaseTheme>();
-      currentMetrics = &BaseMetrics::values;
+      nextTheme = std::make_unique<BaseTheme>();
+      nextMetrics = &BaseMetrics::values;
       break;
     case CrossPointSettings::UI_THEME::LYRA:
       LOG_DBG("UI", "Using Lyra theme");
-      currentTheme = std::make_unique<LyraTheme>();
-      currentMetrics = &LyraMetrics::values;
+      nextTheme = std::make_unique<LyraTheme>();
+      nextMetrics = &LyraMetrics::values;
       break;
     case CrossPointSettings::UI_THEME::ROUNDEDRAFF:
       LOG_DBG("UI", "Using RoundedRaff theme");
-      currentTheme = std::make_unique<RoundedRaffTheme>();
-      currentMetrics = &RoundedRaffMetrics::values;
+      nextTheme = std::make_unique<RoundedRaffTheme>();
+      nextMetrics = &RoundedRaffMetrics::values;
       break;
     case CrossPointSettings::UI_THEME::LYRA_3_COVERS:
       LOG_DBG("UI", "Using Lyra 3 Covers theme");
-      currentTheme = std::make_unique<Lyra3CoversTheme>();
-      currentMetrics = &Lyra3CoversMetrics::values;
+      nextTheme = std::make_unique<Lyra3CoversTheme>();
+      nextMetrics = &Lyra3CoversMetrics::values;
+      break;
+    default:
+      LOG_DBG("UI", "Using Lyra theme");
+      nextTheme = std::make_unique<LyraTheme>();
+      nextMetrics = &LyraMetrics::values;
       break;
   }
+
+  currentTheme = std::move(nextTheme);
+  currentMetrics = nextMetrics;
+  clearSdThemeState();
+  themeRegistry.clear();
 }
 
 int UITheme::getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader, bool hasTabBar, bool hasButtonHints,
diff --git a/src/components/UITheme.h b/src/components/UITheme.h
index 66602541..d4b73761 100644
--- a/src/components/UITheme.h
+++ b/src/components/UITheme.h
@@ -4,9 +4,11 @@
 
 #include <functional>
 #include <memory>
+#include <vector>
 
 #include "CrossPointSettings.h"
 #include "components/themes/BaseTheme.h"
+#include "components/themes/SdCardThemeRegistry.h"
 
 class UITheme {
   // Static instance
@@ -18,12 +20,28 @@ class UITheme {
 
   const ThemeMetrics& getMetrics() const { return *currentMetrics; }
   const BaseTheme& getTheme() const { return *currentTheme; }
+  int getHomeCoverThumbHeight() const;
+  std::vector<int> getHomeCoverThumbHeights() const;
+  int getRecentBooksCoverThumbHeight() const;
+  const ThemeHomeScreenSpec* getHomeScreenSpec() const {
+    return currentSdHomeScreen.enabled ? &currentSdHomeScreen : nullptr;
+  }
+  const ThemeScreenSpec* getScreenSpec(ThemeScreenKind screen) const;
+  const ThemeReaderChromeSpec* getReaderChromeSpec() const {
+    return currentSdReaderChrome.battery.enabled ? &currentSdReaderChrome : nullptr;
+  }
+  SdCardThemeRegistry& registry() { return themeRegistry; }
+  void refreshRegistry();
+  void releaseSdThemeAssetMemory();
   Rect getScreenSafeArea(const GfxRenderer& renderer, bool hasFrontButtonHints = false,
                          bool hasSideButtonHints = false);
   static void drawCenteredText(const GfxRenderer& renderer, Rect screen, int fontId, int y, const char* text,
                                bool black = true, EpdFontFamily::Style style = EpdFontFamily::REGULAR);
   void reload();
   void setTheme(CrossPointSettings::UI_THEME type);
+  // Per-board UI/touch-target density scale: 1.0 on button devices, >1 on
+  // high-density touch boards (wired to the board profile on touch builds).
+  static float uiScale();
   static int getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader, bool hasTabBar, bool hasButtonHints,
                                      bool hasSubtitle, int extraReservedHeight = 0);
   static std::string getCoverThumbPath(std::string coverBmpPath, int coverHeight);
@@ -32,9 +50,34 @@ class UITheme {
   static int getProgressBarHeight();
 
  private:
+  void clearSdThemeState();
+
   const ThemeMetrics* currentMetrics;
+  ThemeMetrics currentSdMetrics;
+  ThemeHomeRecentsSpec currentSdHomeRecents;
+  ThemeButtonMenuSpec currentSdButtonMenu;
+  ThemeListSpec currentSdList;
+  ThemeButtonHintsSpec currentSdButtonHints;
+  ThemeTabBarSpec currentSdTabBar;
+  ThemeHeaderSpec currentSdHeader;
+  ThemeHomeScreenSpec currentSdHomeScreen;
+  ThemeScreenSpec currentSdFileBrowserScreen;
+  ThemeScreenSpec currentSdRecentBooksScreen;
+  ThemeScreenSpec currentSdSettingsScreen;
+  ThemeScreenSpec currentSdReaderScreen;
+  ThemeReaderChromeSpec currentSdReaderChrome;
+  std::string currentSdThemePath;
+  ThemeIconMap currentSdIcons;
   std::unique_ptr<BaseTheme> currentTheme;
+  SdCardThemeRegistry themeRegistry;
 };
 
+// Unified theme metric scaling (definition + field classification in UITheme.cpp).
+//   res     - resolution ratio (panel pixels vs theme design resolution)
+//   density - per-board UI density (UITheme::uiScale())
+// Applies res to every pixel field; density additionally to non-fit-constrained
+// chrome. Degrades to either factor alone when the other is 1.0.
+ThemeMetrics scaleThemeMetrics(const ThemeMetrics& base, float res, float density);
+
 // Helper macro to access current theme
 #define GUI UITheme::getInstance().getTheme()
diff --git a/src/components/themes/BaseTheme.cpp b/src/components/themes/BaseTheme.cpp
index 735f1477..3d8bfa16 100644
--- a/src/components/themes/BaseTheme.cpp
+++ b/src/components/themes/BaseTheme.cpp
@@ -1,5 +1,6 @@
 #include "BaseTheme.h"
 
+#include <FreeInkUIGfxRenderer.h>
 #include <GfxRenderer.h>
 #include <HalClock.h>
 #include <HalPowerManager.h>
@@ -14,6 +15,7 @@
 #include "RecentBooksStore.h"
 #include "components/UITheme.h"
 #include "components/icons/bookmark.h"
+#include "components/themes/ThemeLayout.h"
 #include "fontIds.h"
 
 // Internal constants
@@ -43,6 +45,71 @@ void drawBookmarkStatusIcon(const GfxRenderer& renderer, const int x, const int
   }
 }
 
+std::string readerProgressText(const float bookProgress, const int currentPage, const int pageCount) {
+  char progressStr[32];
+  if (SETTINGS.statusBarBookProgressPercentage && SETTINGS.statusBarChapterPageCount) {
+    snprintf(progressStr, sizeof(progressStr), "%d/%d  %.0f%%", currentPage, pageCount, bookProgress);
+  } else if (SETTINGS.statusBarBookProgressPercentage) {
+    snprintf(progressStr, sizeof(progressStr), "%.0f%%", bookProgress);
+  } else if (SETTINGS.statusBarChapterPageCount) {
+    snprintf(progressStr, sizeof(progressStr), "%d/%d", currentPage, pageCount);
+  } else {
+    progressStr[0] = '\0';
+  }
+  return progressStr;
+}
+
+freeink::ui::BatteryBarTrack toFreeInkBatteryTrack(ThemeBatteryBarTrack value) {
+  switch (value) {
+    case ThemeBatteryBarTrack::Hairline:
+      return freeink::ui::BatteryBarTrack::Hairline;
+    case ThemeBatteryBarTrack::Outline:
+      return freeink::ui::BatteryBarTrack::Outline;
+    case ThemeBatteryBarTrack::Dither:
+      return freeink::ui::BatteryBarTrack::Dither;
+    case ThemeBatteryBarTrack::None:
+    default:
+      return freeink::ui::BatteryBarTrack::None;
+  }
+}
+
+freeink::ui::BatteryBarFill toFreeInkBatteryFill(ThemeBatteryBarFill value) {
+  switch (value) {
+    case ThemeBatteryBarFill::Dither:
+      return freeink::ui::BatteryBarFill::Dither;
+    case ThemeBatteryBarFill::Segments:
+      return freeink::ui::BatteryBarFill::Segments;
+    case ThemeBatteryBarFill::Solid:
+    default:
+      return freeink::ui::BatteryBarFill::Solid;
+  }
+}
+
+freeink::ui::BatteryBarDirection toFreeInkBatteryDirection(ThemeBatteryBarDirection value) {
+  switch (value) {
+    case ThemeBatteryBarDirection::RightToLeft:
+      return freeink::ui::BatteryBarDirection::RightToLeft;
+    case ThemeBatteryBarDirection::CenterOut:
+      return freeink::ui::BatteryBarDirection::CenterOut;
+    case ThemeBatteryBarDirection::BottomToTop:
+      return freeink::ui::BatteryBarDirection::BottomToTop;
+    case ThemeBatteryBarDirection::TopToBottom:
+      return freeink::ui::BatteryBarDirection::TopToBottom;
+    case ThemeBatteryBarDirection::LeftToRight:
+    default:
+      return freeink::ui::BatteryBarDirection::LeftToRight;
+  }
+}
+
+freeink::ui::BatteryBarCaps toFreeInkBatteryCaps(ThemeBatteryBarCaps value) {
+  return value == ThemeBatteryBarCaps::Pixel ? freeink::ui::BatteryBarCaps::Pixel : freeink::ui::BatteryBarCaps::Square;
+}
+
+freeink::ui::BatteryBarOrientation toFreeInkBatteryOrientation(ThemeBatteryBarOrientation value) {
+  return value == ThemeBatteryBarOrientation::Vertical ? freeink::ui::BatteryBarOrientation::Vertical
+                                                       : freeink::ui::BatteryBarOrientation::Horizontal;
+}
+
 }  // namespace
 
 void BaseTheme::drawBatteryOutline(const GfxRenderer& renderer, int x, int y, int battWidth, int rectHeight) {
@@ -56,7 +123,7 @@ void BaseTheme::drawBatteryOutline(const GfxRenderer& renderer, int x, int y, in
   renderer.drawLine(x + battWidth - 2, y + 1, x + battWidth - 2, y + rectHeight - 2);
   renderer.drawPixel(x + battWidth - 1, y + 3);
   renderer.drawPixel(x + battWidth - 1, y + rectHeight - 4);
-  renderer.drawLine(x + battWidth - 0, y + 4, x + battWidth - 0, y + rectHeight - 5);
+  renderer.drawLine(x + battWidth - 1, y + 4, x + battWidth - 1, y + rectHeight - 5);
 }
 
 void BaseTheme::drawBatteryLightningBolt(const GfxRenderer& renderer, int boltX, int boltY) {
@@ -435,10 +502,12 @@ void BaseTheme::drawTabBar(const GfxRenderer& renderer, const Rect rect, const s
 // Draw the "Recent Book" cover card on the home screen
 // TODO: Refactor method to make it cleaner, split into smaller methods
 void BaseTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                                    const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
-                                    bool& bufferRestored, std::function<bool()> storeCoverBuffer) const {
+                                    const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                    bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                                    bool coverStripSelected) const {
+  (void)coverSelectorIndex;
   const bool hasContinueReading = !recentBooks.empty();
-  const bool bookSelected = hasContinueReading && selectorIndex == 0;
+  const bool bookSelected = hasContinueReading && coverStripSelected;
 
   // --- Top "book" card for the current title (selectorIndex == 0) ---
   // When there's no cover image, use fixed size (half screen)
@@ -691,6 +760,113 @@ void BaseTheme::drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount
   }
 }
 
+void drawReaderBattery(const GfxRenderer& renderer, Rect rect, const bool showPercentage) {
+  const ThemeReaderChromeSpec* chrome = UITheme::getInstance().getReaderChromeSpec();
+  if (chrome == nullptr || chrome->battery.style == ThemeBatteryIndicatorStyle::Icon) {
+    const ThemeMetrics& metrics = UITheme::getInstance().getMetrics();
+    const bool effectiveShowPercentage = showPercentage && (chrome == nullptr || chrome->battery.showPercentage);
+    const int iconWidth = chrome != nullptr && chrome->battery.width > 0 ? chrome->battery.width : metrics.batteryWidth;
+    const int iconHeight =
+        chrome != nullptr && chrome->battery.height > 0 ? chrome->battery.height : metrics.batteryHeight;
+    const int offsetY = chrome != nullptr ? chrome->battery.offsetY : 0;
+    GUI.drawBatteryLeft(renderer, Rect{rect.x, rect.y + offsetY, iconWidth, iconHeight}, effectiveShowPercentage);
+    return;
+  }
+
+#if FREEINK_HAVE_GFX_RENDERER
+  const int barWidth = chrome->battery.width > 0 ? chrome->battery.width : rect.width;
+  const int barHeight = chrome->battery.height > 0 ? chrome->battery.height : std::max(3, rect.height / 3);
+  const uint16_t percentage = powerManager.getBatteryPercentage();
+  const bool effectiveShowPercentage = showPercentage && chrome->battery.showPercentage;
+  freeink::ui::GfxRendererFrame<> ui(renderer, SMALL_FONT_ID, UI_10_FONT_ID, UI_12_FONT_ID);
+  freeink::ui::BatteryIndicatorProps props;
+  props.percent = static_cast<uint8_t>(std::min<uint16_t>(percentage, 100));
+  props.charging = gpio.isUsbConnected();
+  props.style = freeink::ui::BatteryIndicatorStyle::Bar;
+  props.glyphWidth = freeink::ui::clampI16(barWidth);
+  props.glyphHeight = freeink::ui::clampI16(barHeight);
+  props.barTrack = toFreeInkBatteryTrack(chrome->battery.track);
+  props.barFill = toFreeInkBatteryFill(chrome->battery.fill);
+  props.barDirection = toFreeInkBatteryDirection(chrome->battery.direction);
+  props.barCaps = toFreeInkBatteryCaps(chrome->battery.caps);
+  props.barOrientation = toFreeInkBatteryOrientation(chrome->battery.orientation);
+  props.barSegments = static_cast<uint8_t>(std::max(0, std::min(24, chrome->battery.segments)));
+  props.barSegmentGap = freeink::ui::clampI16(chrome->battery.segmentGap);
+  props.barRadius = freeink::ui::clampRadius(chrome->battery.radius);
+
+  const Rect barRect{rect.x, rect.y + std::max(0, (rect.height - barHeight) / 2) + chrome->battery.offsetY, barWidth,
+                     barHeight};
+  freeink::ui::batteryIndicator(ui.frame, freeink::ui::makeRect(barRect.x, barRect.y, barRect.width, barRect.height),
+                                props);
+  if (effectiveShowPercentage) {
+    const auto percentageText = std::to_string(percentage) + "%";
+    renderer.drawText(SMALL_FONT_ID, rect.x + barWidth + BaseTheme::batteryPercentSpacing, rect.y,
+                      percentageText.c_str());
+  }
+#else
+  GUI.drawBatteryLeft(renderer, rect, showPercentage);
+#endif
+}
+
+bool drawThemedReaderStatusLane(const GfxRenderer& renderer, Rect laneRect, const float bookProgress,
+                                const int currentPage, const int pageCount, const std::string& title,
+                                const int textYOffset, const bool isPageBookmarked) {
+  const ThemeScreenSpec* readerSpec = UITheme::getInstance().getScreenSpec(ThemeScreenKind::Reader);
+  if (readerSpec == nullptr || !readerSpec->enabled) return false;
+
+  const ThemeMetrics& metrics = UITheme::getInstance().getMetrics();
+  ThemeLayoutSlots slots;
+  layoutThemeSlots(readerSpec->layout, laneRect, metrics, slots);
+
+  const auto progress = readerProgressText(bookProgress, currentPage, pageCount);
+  const bool showBatteryPercentage =
+      SETTINGS.hideBatteryPercentage == CrossPointSettings::HIDE_BATTERY_PERCENTAGE::HIDE_NEVER;
+
+  Rect bookmarkRect = findThemeSlot(slots, "bookmark");
+  if (isPageBookmarked && bookmarkRect.width > 0 && bookmarkRect.height > 0) {
+    drawBookmarkStatusIcon(renderer, bookmarkRect.x,
+                           bookmarkRect.y + std::max(0, (bookmarkRect.height - bookmarkStatusIconHeight) / 2));
+  }
+
+  Rect batteryRect = findThemeSlot(slots, "battery");
+  if (SETTINGS.statusBarBattery && batteryRect.width > 0 && batteryRect.height > 0) {
+    drawReaderBattery(renderer, batteryRect, showBatteryPercentage);
+  }
+
+  Rect clockRect = findThemeSlot(slots, "clock");
+  if (SETTINGS.statusBarClock && halClock.isAvailable() && clockRect.width > 0 && clockRect.height > 0) {
+    char timeBuf[9];
+    if (halClock.formatTime(timeBuf, sizeof(timeBuf), SETTINGS.clockUtcOffsetQ, SETTINGS.clockFormat == 1)) {
+      auto clockText = renderer.truncatedText(SMALL_FONT_ID, timeBuf, clockRect.width);
+      const int clockWidth = renderer.getTextWidth(SMALL_FONT_ID, clockText.c_str());
+      renderer.drawText(SMALL_FONT_ID, clockRect.x + std::max(0, (clockRect.width - clockWidth) / 2),
+                        clockRect.y + std::max(0, (clockRect.height - renderer.getLineHeight(SMALL_FONT_ID)) / 2),
+                        clockText.c_str());
+    }
+  }
+
+  Rect progressRect = findThemeSlot(slots, "progress");
+  if (!progress.empty() && progressRect.width > 0 && progressRect.height > 0) {
+    auto progressText = renderer.truncatedText(SMALL_FONT_ID, progress.c_str(), progressRect.width);
+    const int progressWidth = renderer.getTextWidth(SMALL_FONT_ID, progressText.c_str());
+    renderer.drawText(SMALL_FONT_ID, progressRect.x + std::max(0, progressRect.width - progressWidth),
+                      progressRect.y + std::max(0, (progressRect.height - renderer.getLineHeight(SMALL_FONT_ID)) / 2),
+                      progressText.c_str());
+  }
+
+  Rect titleRect = findThemeSlot(slots, "title");
+  if (!title.empty() && titleRect.width > 0 && titleRect.height > 0) {
+    titleRect.y -= textYOffset;
+    const auto titleText = renderer.truncatedText(SMALL_FONT_ID, title.c_str(), titleRect.width);
+    const int titleWidth = renderer.getTextWidth(SMALL_FONT_ID, titleText.c_str());
+    renderer.drawText(SMALL_FONT_ID, titleRect.x + std::max(0, (titleRect.width - titleWidth) / 2),
+                      titleRect.y + std::max(0, (titleRect.height - renderer.getLineHeight(SMALL_FONT_ID)) / 2),
+                      titleText.c_str());
+  }
+
+  return true;
+}
+
 Rect BaseTheme::drawPopup(const GfxRenderer& renderer, const char* message) const {
   const auto& metrics = UITheme::getInstance().getMetrics();
   const int marginX = metrics.popupMarginX;
@@ -764,21 +940,15 @@ void BaseTheme::drawStatusBar(GfxRenderer& renderer, const float bookProgress, c
   const int rightClusterX = renderer.getScreenWidth() - metrics.statusBarHorizontalMargin - orientedMarginRight;
   int leftClusterWidth = 0;
   int rightClusterWidth = 0;
+  const ThemeScreenSpec* readerSpec = UITheme::getInstance().getScreenSpec(ThemeScreenKind::Reader);
+  const bool hasThemedLane = readerSpec != nullptr && readerSpec->enabled;
 
-  if (SETTINGS.statusBarBookProgressPercentage || SETTINGS.statusBarChapterPageCount) {
+  if (!hasThemedLane && (SETTINGS.statusBarBookProgressPercentage || SETTINGS.statusBarChapterPageCount)) {
     // Right aligned text for progress counter
-    char progressStr[32];
+    const auto progressStr = readerProgressText(bookProgress, currentPage, pageCount);
 
-    if (SETTINGS.statusBarBookProgressPercentage && SETTINGS.statusBarChapterPageCount) {
-      snprintf(progressStr, sizeof(progressStr), "%d/%d  %.0f%%", currentPage, pageCount, bookProgress);
-    } else if (SETTINGS.statusBarBookProgressPercentage) {
-      snprintf(progressStr, sizeof(progressStr), "%.0f%%", bookProgress);
-    } else {
-      snprintf(progressStr, sizeof(progressStr), "%d/%d", currentPage, pageCount);
-    }
-
-    int progressTextWidth = renderer.getTextWidth(SMALL_FONT_ID, progressStr);
-    renderer.drawText(SMALL_FONT_ID, rightClusterX - progressTextWidth, textY, progressStr);
+    int progressTextWidth = renderer.getTextWidth(SMALL_FONT_ID, progressStr.c_str());
+    renderer.drawText(SMALL_FONT_ID, rightClusterX - progressTextWidth, textY, progressStr.c_str());
 
     rightClusterWidth += progressTextWidth;
   }
@@ -803,17 +973,26 @@ void BaseTheme::drawStatusBar(GfxRenderer& renderer, const float bookProgress, c
     renderer.fillRect(barMarginLeft, progressBarY, barWidth, barHeight, true);
   }
 
+  const Rect themedLaneRect{leftClusterX, textY, std::max(0, rightClusterX - leftClusterX),
+                            std::max(renderer.getLineHeight(SMALL_FONT_ID), metrics.statusBarVerticalMargin)};
+  if (hasThemedLane && drawThemedReaderStatusLane(renderer, themedLaneRect, bookProgress, currentPage, pageCount, title,
+                                                  textYOffset, isPageBookmarked)) {
+    return;
+  }
+
   // Draw Battery
   const bool showBatteryPercentage =
       SETTINGS.hideBatteryPercentage == CrossPointSettings::HIDE_BATTERY_PERCENTAGE::HIDE_NEVER;
 
   if (SETTINGS.statusBarBattery) {
-    GUI.drawBatteryLeft(renderer,
-                        Rect{leftClusterX + leftClusterWidth, textY, metrics.batteryWidth, metrics.batteryHeight},
-                        showBatteryPercentage);
-    int batteryWidth = metrics.batteryWidth;
+    const ThemeReaderChromeSpec* chrome = UITheme::getInstance().getReaderChromeSpec();
+    const int batteryVisualWidth =
+        chrome != nullptr && chrome->battery.width > 0 ? chrome->battery.width : metrics.batteryWidth;
+    drawReaderBattery(renderer, Rect{leftClusterX + leftClusterWidth, textY, batteryVisualWidth, metrics.batteryHeight},
+                      showBatteryPercentage);
+    int batteryWidth = batteryVisualWidth;
 
-    if (showBatteryPercentage) {
+    if (showBatteryPercentage && (chrome == nullptr || chrome->battery.showPercentage)) {
       const uint16_t percentage = powerManager.getBatteryPercentage();
       // width of icon + spacing + text for layout purposes
       batteryWidth +=
diff --git a/src/components/themes/BaseTheme.h b/src/components/themes/BaseTheme.h
index 39adb758..9efe04cb 100644
--- a/src/components/themes/BaseTheme.h
+++ b/src/components/themes/BaseTheme.h
@@ -3,6 +3,7 @@
 #include <cstddef>
 #include <cstdint>
 #include <functional>
+#include <map>
 #include <string>
 #include <vector>
 
@@ -52,6 +53,7 @@ struct ThemeMetrics {
   int homeCoverTileHeight;
   int homeRecentBooksCount;
   bool homeContinueReadingInMenu;
+  bool homeShowContinueReadingHeader;
   int homeMenuTopOffset;
 
   int buttonHintsHeight;
@@ -100,8 +102,181 @@ struct ThemeMetrics {
   int textFieldLineEndOffset;
 };
 
+// Guard for scaleThemeMetrics() (UITheme.cpp): every pixel field there is scaled
+// explicitly, so the static_assert there fails when a ThemeMetrics field is added
+// or removed. When it trips, classify the new field (scale it or document why not
+// in scaleThemeMetrics) and update this size.
+inline constexpr unsigned THEME_METRICS_SIZEOF = 224;
+
+enum class ThemeHomeRecentsType { Default, None, CoverStrip };
+enum class ThemeBookRef { Previous, Selected, Next, Index };
+enum class ThemeSlotX { Padding, Center, RightPadding };
+enum class ThemeSlotY { Top, Center };
+enum class ThemeMenuSelectionStyle { Fill, Outline, Triangle, Underline, Pill };
+enum class ThemeButtonHintsStyle { Buttons, Shapes, Groups };
+enum class ThemeBatteryIndicatorStyle { Icon, Bar };
+enum class ThemeBatteryBarTrack { None, Hairline, Outline, Dither };
+enum class ThemeBatteryBarFill { Solid, Dither, Segments };
+enum class ThemeBatteryBarDirection { LeftToRight, RightToLeft, CenterOut, BottomToTop, TopToBottom };
+enum class ThemeBatteryBarCaps { Square, Pixel };
+enum class ThemeBatteryBarOrientation { Horizontal, Vertical };
+
+struct ThemeTitleSpec {
+  bool enabled = false;
+  int fontId = 12;
+  bool bold = true;
+  int maxLines = 2;
+  int offsetY = 12;
+  // When true, the title may span the full carousel area width (centered on the
+  // area, not the cover) instead of being constrained to the cover width.
+  bool fullWidth = false;
+};
+
+struct ThemeCoverSlotSpec {
+  ThemeBookRef book = ThemeBookRef::Selected;
+  int bookIndex = 0;
+  ThemeSlotX x = ThemeSlotX::Center;
+  ThemeSlotY y = ThemeSlotY::Top;
+  int height = 300;
+  int widthPercent = 62;
+  int xOffset = 0;
+  int yOffset = 0;
+  bool selected = false;
+  ThemeTitleSpec title;
+};
+
+struct ThemeHomeRecentsSpec {
+  ThemeHomeRecentsType type = ThemeHomeRecentsType::Default;
+  int maxBooks = 1;
+  bool wrap = false;
+  bool drawPanel = false;
+  int panelCornerRadius = 6;
+  int panelInsetX = 0;
+  int selectionLineWidth = 3;
+  int inactiveSelectionLineWidth = 0;
+  int selectionCornerRadius = 6;
+  std::vector<ThemeCoverSlotSpec> slots;
+};
+
+struct ThemeButtonMenuSpec {
+  bool enabled = false;
+  int fontId = 12;
+  bool bold = false;
+  bool centeredText = false;
+  bool centerVertically = false;
+  bool showIcons = true;
+  int panelWidth = 0;
+  bool drawPanel = false;
+  int panelCornerRadius = 3;
+  ThemeMenuSelectionStyle selectionStyle = ThemeMenuSelectionStyle::Fill;
+  int selectionCornerRadius = 6;
+  int selectionInset = 16;
+  bool selectedTextInverted = false;
+  bool selectionFillBlack = false;
+  int rowPaddingX = 16;
+  int textInsetX = 16;
+};
+
+struct ThemeListSpec {
+  bool enabled = false;
+  int fontId = 10;
+  bool bold = false;
+  int subtitleFontId = 0;
+  int valueFontId = 0;
+  bool showIcons = true;
+  int iconSize = 0;
+  int textGap = 8;
+  ThemeMenuSelectionStyle selectionStyle = ThemeMenuSelectionStyle::Fill;
+  int selectionCornerRadius = 6;
+  bool selectionFill = true;
+  bool selectionOutline = false;
+  bool selectedTextInverted = false;
+  bool rowBackgrounds = false;
+  bool centerSingleLineRows = false;
+  bool subtitleRowAutoHeight = false;
+  bool centerValueVertically = false;
+  int rowSidePadding = 0;
+  int rowGap = 0;
+  int textInsetX = 8;
+  int selectionInsetX = 0;
+  int selectionInsetY = 0;
+  int titleOffsetY = 7;
+  int subtitleOffsetY = 30;
+  int subtitleTopPadding = 10;
+  int subtitleBottomPadding = 10;
+  int subtitleInterLineGap = 4;
+  int valueOffsetY = 6;
+  int subtitleValueOffsetY = 16;
+  int iconOffsetY = 0;
+};
+
+struct ThemeButtonHintsSpec {
+  bool enabled = false;
+  int fontId = 0;
+  bool bold = false;
+  int buttonWidth = 80;
+  int smallButtonHeight = 15;
+  int cornerRadius = 6;
+  bool fill = true;
+  bool outline = true;
+  bool drawEmpty = true;
+  bool shapes = false;
+  ThemeButtonHintsStyle style = ThemeButtonHintsStyle::Buttons;
+  int sidePadding = 20;
+  int groupGap = 10;
+  int bottomMargin = 10;
+  int innerPadding = 16;
+  int shapeSize = 18;
+  int textOffsetY = 7;
+};
+
+struct ThemeTabBarSpec {
+  bool enabled = false;
+  int fontId = 10;
+  bool bold = false;
+  bool equalWidth = false;
+  ThemeMenuSelectionStyle selectionStyle = ThemeMenuSelectionStyle::Fill;
+  int selectedCornerRadius = 6;
+  bool selectedTextInverted = true;
+  bool drawDivider = true;
+  int horizontalInset = 2;
+};
+
+struct ThemeHeaderSpec {
+  bool enabled = false;
+  int fontId = 12;
+  bool bold = true;
+  bool centeredTitle = false;
+  bool showDivider = true;
+  int titleOffsetY = 0;
+  int batteryOffsetY = 5;
+};
+
+struct ThemeReaderBatterySpec {
+  bool enabled = false;
+  ThemeBatteryIndicatorStyle style = ThemeBatteryIndicatorStyle::Icon;
+  int width = 0;
+  int height = 0;
+  int offsetY = 0;
+  ThemeBatteryBarTrack track = ThemeBatteryBarTrack::None;
+  ThemeBatteryBarFill fill = ThemeBatteryBarFill::Solid;
+  ThemeBatteryBarDirection direction = ThemeBatteryBarDirection::LeftToRight;
+  ThemeBatteryBarCaps caps = ThemeBatteryBarCaps::Square;
+  ThemeBatteryBarOrientation orientation = ThemeBatteryBarOrientation::Horizontal;
+  int segments = 0;
+  int segmentGap = 1;
+  int radius = 0;
+  bool showPercentage = true;
+};
+
+struct ThemeReaderChromeSpec {
+  ThemeReaderBatterySpec battery;
+};
+
 enum UIIcon { None = 0, Folder, Text, Image, Book, File, Recent, Settings, Transfer, Library, Wifi, Hotspot, Bookmark };
 
+using ThemeIconMap = std::map<UIIcon, std::string>;
+
 enum class KeyboardKeyType { Normal, Shift, Mode, Space, Del, Ok, Disabled };
 
 // Default theme implementation (Classic Theme)
@@ -130,6 +305,7 @@ constexpr ThemeMetrics values = {.batteryWidth = 15,
                                  .homeCoverTileHeight = 400,
                                  .homeRecentBooksCount = 1,
                                  .homeContinueReadingInMenu = false,
+                                 .homeShowContinueReadingHeader = true,
                                  .homeMenuTopOffset = 10,
                                  .buttonHintsHeight = 40,
                                  .sideButtonHintsWidth = 30,
@@ -201,11 +377,13 @@ class BaseTheme {
   virtual void drawTabBar(const GfxRenderer& renderer, Rect rect, const std::vector<TabInfo>& tabs,
                           bool selected) const;
   virtual void drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                                   const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
-                                   bool& bufferRestored, std::function<bool()> storeCoverBuffer) const;
+                                   const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                   bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                                   bool coverStripSelected = true) const;
   virtual void drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount, int selectedIndex,
                               const std::function<std::string(int index)>& buttonLabel,
                               const std::function<UIIcon(int index)>& rowIcon) const;
+  virtual bool homeCoverCacheDependsOnSelector() const { return true; }
   virtual Rect drawPopup(const GfxRenderer& renderer, const char* message) const;
   virtual void fillPopupProgress(const GfxRenderer& renderer, const Rect& layout, const int progress) const;
   void drawStatusBar(GfxRenderer& renderer, const float bookProgress, const int currentPage, const int pageCount,
diff --git a/src/components/themes/SdCardThemeRegistry.cpp b/src/components/themes/SdCardThemeRegistry.cpp
new file mode 100644
index 00000000..1c9a389d
--- /dev/null
+++ b/src/components/themes/SdCardThemeRegistry.cpp
@@ -0,0 +1,948 @@
+#include "SdCardThemeRegistry.h"
+
+#include <ArduinoJson.h>
+#include <HalGPIO.h>
+#include <HalStorage.h>
+#include <Logging.h>
+
+#include <algorithm>
+#include <cctype>
+#include <cstring>
+
+#include "CrossPointSettings.h"
+#include "ThemeInstaller.h"
+#include "components/themes/lyra/LyraTheme.h"
+#include "fontIds.h"
+
+namespace {
+constexpr int THEME_SCHEMA_VERSION = 1;
+constexpr size_t MAX_PERSISTED_THEME_ID_LENGTH = sizeof(SETTINGS.sdThemeName) - 1;
+
+void applyMetricOverrides(JsonObjectConst obj, ThemeMetrics& metrics) {
+  if (obj.isNull()) return;
+#define APPLY_INT_FIELD(name) metrics.name = obj[#name] | metrics.name
+#define APPLY_BOOL_FIELD(name) metrics.name = obj[#name] | metrics.name
+  APPLY_INT_FIELD(batteryWidth);
+  APPLY_INT_FIELD(batteryHeight);
+  APPLY_INT_FIELD(topPadding);
+  APPLY_INT_FIELD(batteryBarHeight);
+  APPLY_INT_FIELD(headerHeight);
+  APPLY_INT_FIELD(verticalSpacing);
+  APPLY_INT_FIELD(contentSidePadding);
+  APPLY_INT_FIELD(listRowHeight);
+  APPLY_INT_FIELD(listWithSubtitleRowHeight);
+  APPLY_INT_FIELD(menuRowHeight);
+  APPLY_INT_FIELD(menuSpacing);
+  APPLY_INT_FIELD(tabSpacing);
+  APPLY_INT_FIELD(tabBarHeight);
+  APPLY_INT_FIELD(scrollBarWidth);
+  APPLY_INT_FIELD(scrollBarRightOffset);
+  APPLY_INT_FIELD(homeTopPadding);
+  APPLY_INT_FIELD(homeCoverHeight);
+  APPLY_INT_FIELD(homeCoverTileHeight);
+  APPLY_INT_FIELD(homeRecentBooksCount);
+  APPLY_BOOL_FIELD(homeContinueReadingInMenu);
+  APPLY_BOOL_FIELD(homeShowContinueReadingHeader);
+  APPLY_INT_FIELD(homeMenuTopOffset);
+  APPLY_INT_FIELD(buttonHintsHeight);
+  APPLY_INT_FIELD(sideButtonHintsWidth);
+  APPLY_INT_FIELD(progressBarHeight);
+  APPLY_INT_FIELD(progressBarMarginTop);
+  APPLY_INT_FIELD(statusBarHorizontalMargin);
+  APPLY_INT_FIELD(statusBarVerticalMargin);
+  APPLY_INT_FIELD(keyboardKeyWidth);
+  APPLY_INT_FIELD(keyboardKeyHeight);
+  APPLY_INT_FIELD(keyboardKeySpacing);
+  APPLY_INT_FIELD(keyboardBottomKeyHeight);
+  APPLY_INT_FIELD(keyboardBottomKeySpacing);
+  APPLY_BOOL_FIELD(keyboardBottomAligned);
+  APPLY_BOOL_FIELD(keyboardCenteredText);
+  APPLY_INT_FIELD(keyboardVerticalOffset);
+  APPLY_INT_FIELD(keyboardTextFieldWidthPercent);
+  APPLY_INT_FIELD(keyboardWidthPercent);
+  APPLY_INT_FIELD(keyboardKeyCornerRadius);
+  APPLY_BOOL_FIELD(keyboardFillUnselected);
+  APPLY_BOOL_FIELD(keyboardOutlineAllUnselected);
+  APPLY_BOOL_FIELD(keyboardDrawSpecialOutlineWhenUnselected);
+  APPLY_INT_FIELD(keyboardSecondaryLabelRightPadding);
+  APPLY_INT_FIELD(keyboardSecondaryLabelTopPadding);
+  APPLY_INT_FIELD(keyboardMinArrowHeadSize);
+  metrics.popupTopOffsetRatio = obj["popupTopOffsetRatio"] | metrics.popupTopOffsetRatio;
+  APPLY_INT_FIELD(popupMarginX);
+  APPLY_INT_FIELD(popupMarginY);
+  APPLY_INT_FIELD(popupFrameThickness);
+  APPLY_INT_FIELD(popupCornerRadius);
+  APPLY_BOOL_FIELD(popupTextBold);
+  APPLY_BOOL_FIELD(popupTextInverted);
+  APPLY_INT_FIELD(popupTextBaselineOffsetY);
+  APPLY_INT_FIELD(popupProgressBarHeight);
+  APPLY_BOOL_FIELD(popupProgressDrawOutline);
+  APPLY_BOOL_FIELD(popupProgressClampPercent);
+  APPLY_BOOL_FIELD(popupProgressFillInverted);
+  APPLY_BOOL_FIELD(popupProgressOutlineInverted);
+  APPLY_INT_FIELD(textFieldHorizontalPadding);
+  APPLY_INT_FIELD(textFieldNormalThickness);
+  APPLY_INT_FIELD(textFieldCursorThickness);
+  APPLY_INT_FIELD(textFieldLineEndOffset);
+#undef APPLY_BOOL_FIELD
+#undef APPLY_INT_FIELD
+}
+
+ThemeSlotX parseSlotX(const char* value) {
+  if (value == nullptr) return ThemeSlotX::Center;
+  if (strcmp(value, "padding") == 0) return ThemeSlotX::Padding;
+  if (strcmp(value, "right-padding") == 0) return ThemeSlotX::RightPadding;
+  return ThemeSlotX::Center;
+}
+
+ThemeSlotY parseSlotY(const char* value) {
+  if (value == nullptr) return ThemeSlotY::Top;
+  if (strcmp(value, "center") == 0 || strcmp(value, "centerY") == 0) return ThemeSlotY::Center;
+  return ThemeSlotY::Top;
+}
+
+ThemeBookRef parseBookRef(const char* value) {
+  if (value == nullptr) return ThemeBookRef::Selected;
+  if (strcmp(value, "previous") == 0) return ThemeBookRef::Previous;
+  if (strcmp(value, "next") == 0) return ThemeBookRef::Next;
+  if (strcmp(value, "index") == 0) return ThemeBookRef::Index;
+  return ThemeBookRef::Selected;
+}
+
+ThemeBatteryBarTrack parseBatteryBarTrack(const char* value, ThemeBatteryBarTrack fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "hairline") == 0) return ThemeBatteryBarTrack::Hairline;
+  if (strcmp(value, "outline") == 0) return ThemeBatteryBarTrack::Outline;
+  if (strcmp(value, "dither") == 0) return ThemeBatteryBarTrack::Dither;
+  if (strcmp(value, "none") == 0) return ThemeBatteryBarTrack::None;
+  return fallback;
+}
+
+ThemeBatteryBarFill parseBatteryBarFill(const char* value, ThemeBatteryBarFill fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "dither") == 0) return ThemeBatteryBarFill::Dither;
+  if (strcmp(value, "segments") == 0) return ThemeBatteryBarFill::Segments;
+  if (strcmp(value, "solid") == 0) return ThemeBatteryBarFill::Solid;
+  return fallback;
+}
+
+ThemeBatteryBarDirection parseBatteryBarDirection(const char* value, ThemeBatteryBarDirection fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "right-to-left") == 0) return ThemeBatteryBarDirection::RightToLeft;
+  if (strcmp(value, "center-out") == 0) return ThemeBatteryBarDirection::CenterOut;
+  if (strcmp(value, "bottom-to-top") == 0) return ThemeBatteryBarDirection::BottomToTop;
+  if (strcmp(value, "top-to-bottom") == 0) return ThemeBatteryBarDirection::TopToBottom;
+  if (strcmp(value, "left-to-right") == 0) return ThemeBatteryBarDirection::LeftToRight;
+  return fallback;
+}
+
+ThemeBatteryBarCaps parseBatteryBarCaps(const char* value, ThemeBatteryBarCaps fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "pixel") == 0) return ThemeBatteryBarCaps::Pixel;
+  if (strcmp(value, "square") == 0) return ThemeBatteryBarCaps::Square;
+  return fallback;
+}
+
+ThemeBatteryBarOrientation parseBatteryBarOrientation(const char* value, ThemeBatteryBarOrientation fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "vertical") == 0) return ThemeBatteryBarOrientation::Vertical;
+  if (strcmp(value, "horizontal") == 0) return ThemeBatteryBarOrientation::Horizontal;
+  return fallback;
+}
+
+ThemeMenuSelectionStyle parseMenuSelectionStyle(const char* value, ThemeMenuSelectionStyle fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "outline") == 0) return ThemeMenuSelectionStyle::Outline;
+  if (strcmp(value, "triangle") == 0) return ThemeMenuSelectionStyle::Triangle;
+  if (strcmp(value, "underline") == 0) return ThemeMenuSelectionStyle::Underline;
+  if (strcmp(value, "pill") == 0) return ThemeMenuSelectionStyle::Pill;
+  if (strcmp(value, "fill") == 0) return ThemeMenuSelectionStyle::Fill;
+  return fallback;
+}
+
+int parseThemeFontName(const char* value, int fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "small") == 0 || strcmp(value, "chrome") == 0 || strcmp(value, "caption") == 0) {
+    return SMALL_FONT_ID;
+  }
+  if (strcmp(value, "medium") == 0 || strcmp(value, "body") == 0 || strcmp(value, "label") == 0) {
+    return UI_10_FONT_ID;
+  }
+  if (strcmp(value, "large") == 0 || strcmp(value, "title") == 0 || strcmp(value, "display") == 0) {
+    return UI_12_FONT_ID;
+  }
+  return fallback;
+}
+
+int parseThemeFontId(JsonObjectConst obj, int fallback) {
+  const char* font = obj["font"].as<const char*>();
+  if (font != nullptr) return parseThemeFontName(font, fallback);
+  return obj["fontId"] | fallback;
+}
+
+void parseTitleSpec(JsonObjectConst obj, ThemeTitleSpec& title) {
+  if (obj.isNull()) return;
+  title.enabled = obj["enabled"] | true;
+  title.fontId = parseThemeFontId(obj, title.fontId);
+  title.bold = obj["bold"] | title.bold;
+  title.maxLines = obj["maxLines"] | title.maxLines;
+  title.offsetY = obj["offsetY"] | title.offsetY;
+  title.fullWidth = obj["fullWidth"] | title.fullWidth;
+
+  const char* style = obj["style"].as<const char*>();
+  if (style != nullptr) {
+    title.bold = strcmp(style, "bold") == 0;
+  }
+}
+
+void parseCoverSlot(JsonObjectConst obj, ThemeCoverSlotSpec& slot) {
+  if (obj.isNull()) return;
+  slot.book = parseBookRef(obj["book"].as<const char*>());
+  slot.bookIndex = obj["bookIndex"] | slot.bookIndex;
+  slot.x = parseSlotX(obj["x"].as<const char*>());
+  slot.y = parseSlotY(obj["y"].as<const char*>());
+  slot.height = obj["height"] | slot.height;
+  slot.widthPercent = obj["widthPercent"] | slot.widthPercent;
+  slot.xOffset = obj["xOffset"] | slot.xOffset;
+  slot.yOffset = obj["yOffset"] | slot.yOffset;
+  slot.selected = obj["selected"] | slot.selected;
+  parseTitleSpec(obj["title"].as<JsonObjectConst>(), slot.title);
+}
+
+void parseHomeRecentsSpec(JsonObjectConst obj, ThemeHomeRecentsSpec& spec) {
+  if (obj.isNull()) return;
+  const char* type = obj["type"].as<const char*>();
+  if (type != nullptr) {
+    if (strcmp(type, "cover-strip") == 0) {
+      spec.type = ThemeHomeRecentsType::CoverStrip;
+    } else if (strcmp(type, "none") == 0) {
+      spec.type = ThemeHomeRecentsType::None;
+    }
+  }
+  spec.maxBooks = obj["maxBooks"] | spec.maxBooks;
+  spec.wrap = obj["wrap"] | spec.wrap;
+  spec.drawPanel = obj["drawPanel"] | spec.drawPanel;
+  spec.panelCornerRadius = obj["panelCornerRadius"] | spec.panelCornerRadius;
+  spec.panelInsetX = obj["panelInsetX"] | spec.panelInsetX;
+  spec.selectionLineWidth = obj["selectionLineWidth"] | spec.selectionLineWidth;
+  spec.inactiveSelectionLineWidth = obj["inactiveSelectionLineWidth"] | spec.inactiveSelectionLineWidth;
+  spec.selectionCornerRadius = obj["selectionCornerRadius"] | spec.selectionCornerRadius;
+
+  JsonArrayConst slots = obj["slots"].as<JsonArrayConst>();
+  if (!slots.isNull()) {
+    if (spec.type == ThemeHomeRecentsType::Default) {
+      spec.type = ThemeHomeRecentsType::CoverStrip;
+    }
+    spec.slots.clear();
+    for (JsonObjectConst slotObj : slots) {
+      if (spec.slots.size() >= 5) break;
+      ThemeCoverSlotSpec slot;
+      parseCoverSlot(slotObj, slot);
+      spec.slots.push_back(slot);
+    }
+  }
+}
+
+void applyFontSpec(JsonObjectConst obj, int& fontId, bool& bold) {
+  fontId = parseThemeFontId(obj, fontId);
+
+  bold = obj["bold"] | bold;
+  const char* style = obj["style"].as<const char*>();
+  if (style != nullptr) {
+    bold = strcmp(style, "bold") == 0;
+  }
+}
+
+void parseButtonMenuSpec(JsonObjectConst obj, ThemeButtonMenuSpec& spec) {
+  if (obj.isNull()) return;
+  spec.enabled = true;
+  applyFontSpec(obj, spec.fontId, spec.bold);
+  spec.centeredText = obj["centeredText"] | spec.centeredText;
+  spec.centerVertically = obj["centerVertically"] | spec.centerVertically;
+  spec.showIcons = obj["showIcons"] | spec.showIcons;
+  spec.panelWidth = obj["panelWidth"] | spec.panelWidth;
+  spec.drawPanel = obj["drawPanel"] | spec.drawPanel;
+  spec.panelCornerRadius = obj["panelCornerRadius"] | spec.panelCornerRadius;
+  spec.selectionCornerRadius = obj["selectionCornerRadius"] | spec.selectionCornerRadius;
+  spec.selectionInset = obj["selectionInset"] | spec.selectionInset;
+  spec.selectedTextInverted = obj["selectedTextInverted"] | spec.selectedTextInverted;
+  spec.selectionFillBlack = obj["selectionFillBlack"] | spec.selectionFillBlack;
+  spec.selectionStyle = parseMenuSelectionStyle(obj["selectionStyle"].as<const char*>(), spec.selectionStyle);
+  spec.rowPaddingX = obj["rowPaddingX"] | spec.rowPaddingX;
+  spec.textInsetX = obj["textInsetX"] | spec.textInsetX;
+}
+
+void parseListSpec(JsonObjectConst obj, ThemeListSpec& spec) {
+  if (obj.isNull()) return;
+  spec.enabled = true;
+  applyFontSpec(obj, spec.fontId, spec.bold);
+  spec.subtitleFontId = obj["subtitleFontId"] | spec.subtitleFontId;
+  spec.valueFontId = obj["valueFontId"] | spec.valueFontId;
+  spec.showIcons = obj["showIcons"] | spec.showIcons;
+  spec.iconSize = obj["iconSize"] | spec.iconSize;
+  spec.textGap = obj["textGap"] | spec.textGap;
+  spec.selectionStyle = parseMenuSelectionStyle(obj["selectionStyle"].as<const char*>(), spec.selectionStyle);
+  spec.selectionCornerRadius = obj["selectionCornerRadius"] | spec.selectionCornerRadius;
+  spec.selectionFill = obj["selectionFill"] | spec.selectionFill;
+  spec.selectionOutline = obj["selectionOutline"] | spec.selectionOutline;
+  spec.selectedTextInverted = obj["selectedTextInverted"] | spec.selectedTextInverted;
+  spec.rowBackgrounds = obj["rowBackgrounds"] | spec.rowBackgrounds;
+  spec.centerSingleLineRows = obj["centerSingleLineRows"] | spec.centerSingleLineRows;
+  spec.subtitleRowAutoHeight = obj["subtitleRowAutoHeight"] | spec.subtitleRowAutoHeight;
+  spec.centerValueVertically = obj["centerValueVertically"] | spec.centerValueVertically;
+  spec.rowSidePadding = obj["rowSidePadding"] | spec.rowSidePadding;
+  spec.rowGap = obj["rowGap"] | spec.rowGap;
+  spec.textInsetX = obj["textInsetX"] | spec.textInsetX;
+  spec.selectionInsetX = obj["selectionInsetX"] | spec.selectionInsetX;
+  spec.selectionInsetY = obj["selectionInsetY"] | spec.selectionInsetY;
+  spec.titleOffsetY = obj["titleOffsetY"] | spec.titleOffsetY;
+  spec.subtitleOffsetY = obj["subtitleOffsetY"] | spec.subtitleOffsetY;
+  spec.subtitleTopPadding = obj["subtitleTopPadding"] | spec.subtitleTopPadding;
+  spec.subtitleBottomPadding = obj["subtitleBottomPadding"] | spec.subtitleBottomPadding;
+  spec.subtitleInterLineGap = obj["subtitleInterLineGap"] | spec.subtitleInterLineGap;
+  spec.valueOffsetY = obj["valueOffsetY"] | spec.valueOffsetY;
+  spec.subtitleValueOffsetY = obj["subtitleValueOffsetY"] | spec.subtitleValueOffsetY;
+  spec.iconOffsetY = obj["iconOffsetY"] | spec.iconOffsetY;
+
+  if (spec.subtitleFontId == 0) spec.subtitleFontId = SMALL_FONT_ID;
+  if (spec.valueFontId == 0) spec.valueFontId = spec.fontId;
+}
+
+void parseButtonHintsSpec(JsonObjectConst obj, ThemeButtonHintsSpec& spec) {
+  if (obj.isNull()) return;
+  spec.enabled = true;
+  applyFontSpec(obj, spec.fontId, spec.bold);
+  spec.buttonWidth = obj["buttonWidth"] | spec.buttonWidth;
+  spec.smallButtonHeight = obj["smallButtonHeight"] | spec.smallButtonHeight;
+  spec.cornerRadius = obj["cornerRadius"] | spec.cornerRadius;
+  spec.fill = obj["fill"] | spec.fill;
+  spec.outline = obj["outline"] | spec.outline;
+  spec.drawEmpty = obj["drawEmpty"] | spec.drawEmpty;
+  spec.shapes = obj["shapes"] | spec.shapes;
+  const char* hintLayout = obj["layout"].as<const char*>();
+  if (hintLayout != nullptr) {
+    if (strcmp(hintLayout, "shapes") == 0 || strcmp(hintLayout, "icons") == 0) {
+      spec.style = ThemeButtonHintsStyle::Shapes;
+      spec.shapes = true;
+    } else if (strcmp(hintLayout, "groups") == 0) {
+      spec.style = ThemeButtonHintsStyle::Groups;
+      spec.shapes = false;
+    } else {
+      spec.style = ThemeButtonHintsStyle::Buttons;
+    }
+  } else if (spec.shapes) {
+    spec.style = ThemeButtonHintsStyle::Shapes;
+  }
+  spec.sidePadding = obj["sidePadding"] | spec.sidePadding;
+  spec.groupGap = obj["groupGap"] | spec.groupGap;
+  spec.bottomMargin = obj["bottomMargin"] | spec.bottomMargin;
+  spec.innerPadding = obj["innerPadding"] | spec.innerPadding;
+  spec.shapeSize = obj["shapeSize"] | spec.shapeSize;
+  spec.textOffsetY = obj["textOffsetY"] | spec.textOffsetY;
+  if (spec.fontId == 0) spec.fontId = SMALL_FONT_ID;
+}
+
+void parseTabBarSpec(JsonObjectConst obj, ThemeTabBarSpec& spec) {
+  if (obj.isNull()) return;
+  spec.enabled = true;
+  applyFontSpec(obj, spec.fontId, spec.bold);
+  spec.equalWidth = obj["equalWidth"] | spec.equalWidth;
+  spec.selectionStyle = parseMenuSelectionStyle(obj["selectionStyle"].as<const char*>(), spec.selectionStyle);
+  spec.selectedCornerRadius = obj["selectedCornerRadius"] | spec.selectedCornerRadius;
+  spec.selectedTextInverted = obj["selectedTextInverted"] | spec.selectedTextInverted;
+  spec.drawDivider = obj["drawDivider"] | spec.drawDivider;
+  spec.horizontalInset = obj["horizontalInset"] | spec.horizontalInset;
+}
+
+void parseHeaderSpec(JsonObjectConst obj, ThemeHeaderSpec& spec) {
+  if (obj.isNull()) return;
+  spec.enabled = true;
+  applyFontSpec(obj, spec.fontId, spec.bold);
+  spec.centeredTitle = obj["centeredTitle"] | spec.centeredTitle;
+  spec.showDivider = obj["showDivider"] | spec.showDivider;
+  spec.titleOffsetY = obj["titleOffsetY"] | spec.titleOffsetY;
+  spec.batteryOffsetY = obj["batteryOffsetY"] | spec.batteryOffsetY;
+}
+
+void parseReaderChromeSpec(JsonObjectConst obj, ThemeReaderChromeSpec& spec) {
+  if (obj.isNull()) return;
+
+  JsonObjectConst battery = obj["battery"].as<JsonObjectConst>();
+  if (!battery.isNull()) {
+    spec.battery.enabled = battery["enabled"] | true;
+    const char* style = battery["style"].as<const char*>();
+    if (style != nullptr) {
+      if (strcmp(style, "bar") == 0) {
+        spec.battery.style = ThemeBatteryIndicatorStyle::Bar;
+      } else {
+        spec.battery.style = ThemeBatteryIndicatorStyle::Icon;
+      }
+    }
+    spec.battery.width = battery["width"] | spec.battery.width;
+    spec.battery.height = battery["height"] | spec.battery.height;
+    spec.battery.offsetY = battery["offsetY"] | spec.battery.offsetY;
+    spec.battery.track = parseBatteryBarTrack(battery["track"].as<const char*>(), spec.battery.track);
+    spec.battery.fill = parseBatteryBarFill(battery["fill"].as<const char*>(), spec.battery.fill);
+    spec.battery.direction = parseBatteryBarDirection(battery["direction"].as<const char*>(), spec.battery.direction);
+    spec.battery.caps = parseBatteryBarCaps(battery["caps"].as<const char*>(), spec.battery.caps);
+    spec.battery.orientation =
+        parseBatteryBarOrientation(battery["orientation"].as<const char*>(), spec.battery.orientation);
+    spec.battery.segments = battery["segments"] | spec.battery.segments;
+    spec.battery.segmentGap = battery["segmentGap"] | spec.battery.segmentGap;
+    spec.battery.radius = battery["radius"] | spec.battery.radius;
+    spec.battery.showPercentage = battery["showPercentage"] | spec.battery.showPercentage;
+  }
+}
+
+bool iconForKey(const char* key, UIIcon& out) {
+  if (key == nullptr) return false;
+  if (strcmp(key, "folder") == 0 || strcmp(key, "folder24") == 0)
+    out = UIIcon::Folder;
+  else if (strcmp(key, "text") == 0 || strcmp(key, "text24") == 0)
+    out = UIIcon::Text;
+  else if (strcmp(key, "image") == 0 || strcmp(key, "image24") == 0)
+    out = UIIcon::Image;
+  else if (strcmp(key, "book") == 0 || strcmp(key, "book24") == 0)
+    out = UIIcon::Book;
+  else if (strcmp(key, "file") == 0 || strcmp(key, "file24") == 0)
+    out = UIIcon::File;
+  else if (strcmp(key, "recent") == 0)
+    out = UIIcon::Recent;
+  else if (strcmp(key, "settings") == 0 || strcmp(key, "settings2") == 0)
+    out = UIIcon::Settings;
+  else if (strcmp(key, "transfer") == 0)
+    out = UIIcon::Transfer;
+  else if (strcmp(key, "library") == 0)
+    out = UIIcon::Library;
+  else if (strcmp(key, "wifi") == 0)
+    out = UIIcon::Wifi;
+  else if (strcmp(key, "hotspot") == 0)
+    out = UIIcon::Hotspot;
+  else if (strcmp(key, "bookmark") == 0)
+    out = UIIcon::Bookmark;
+  else
+    return false;
+  return true;
+}
+
+void parseIconMap(JsonObjectConst obj, ThemeIconMap& icons) {
+  if (obj.isNull()) return;
+  for (JsonPairConst kv : obj) {
+    UIIcon icon = UIIcon::None;
+    const char* path = kv.value().as<const char*>();
+    if (iconForKey(kv.key().c_str(), icon) && path != nullptr && ThemeInstaller::isValidRelativePath(path)) {
+      if (strstr(kv.key().c_str(), "24") != nullptr && icons.find(icon) != icons.end()) continue;
+      icons[icon] = path;
+    }
+  }
+}
+
+ThemeLayoutAxis parseLayoutAxis(const char* value) {
+  if (value != nullptr && strcmp(value, "row") == 0) return ThemeLayoutAxis::Row;
+  return ThemeLayoutAxis::Column;
+}
+
+ThemeLayoutSizeType parseLayoutSizeType(const char* value) {
+  if (value == nullptr) return ThemeLayoutSizeType::Flex;
+  if (strcmp(value, "fixed") == 0) return ThemeLayoutSizeType::Fixed;
+  if (strcmp(value, "token") == 0) return ThemeLayoutSizeType::Token;
+  return ThemeLayoutSizeType::Flex;
+}
+
+void parseLayoutNode(JsonObjectConst obj, ThemeLayoutNode& out, int depth = 0) {
+  if (obj.isNull() || depth > 5) return;
+  const char* id = obj["id"].as<const char*>();
+  if (id == nullptr) id = obj["slot"].as<const char*>();
+  if (id != nullptr) out.id = id;
+  out.axis = parseLayoutAxis(obj["axis"].as<const char*>());
+  out.gap = obj["gap"] | out.gap;
+
+  if (obj["fixed"].is<int>()) {
+    out.sizeType = ThemeLayoutSizeType::Fixed;
+    out.size = obj["fixed"] | out.size;
+  } else if (obj["size"].is<int>()) {
+    out.sizeType = ThemeLayoutSizeType::Fixed;
+    out.size = obj["size"] | out.size;
+  } else if (obj["size"].is<const char*>()) {
+    out.sizeType = ThemeLayoutSizeType::Token;
+    out.sizeToken = obj["size"] | "";
+  } else if (obj["flex"].is<int>()) {
+    out.sizeType = ThemeLayoutSizeType::Flex;
+    out.flex = std::max(1, obj["flex"] | out.flex);
+  } else {
+    out.sizeType = parseLayoutSizeType(obj["type"].as<const char*>());
+  }
+
+  JsonArrayConst children = obj["children"].as<JsonArrayConst>();
+  if (children.isNull()) children = obj["slots"].as<JsonArrayConst>();
+  if (!children.isNull()) {
+    out.children.clear();
+    for (JsonObjectConst childObj : children) {
+      if (out.children.size() >= 12) break;
+      ThemeLayoutNode child;
+      child.sizeType = ThemeLayoutSizeType::Flex;
+      parseLayoutNode(childObj, child, depth + 1);
+      out.children.push_back(child);
+    }
+  }
+}
+
+ThemeHomeWidgetType parseHomeWidgetType(const char* value) {
+  if (value == nullptr) return ThemeHomeWidgetType::LauncherList;
+  if (strcmp(value, "header") == 0) return ThemeHomeWidgetType::Header;
+  if (strcmp(value, "headerTitle") == 0 || strcmp(value, "title") == 0) return ThemeHomeWidgetType::HeaderTitle;
+  if (strcmp(value, "battery") == 0) return ThemeHomeWidgetType::Battery;
+  if (strcmp(value, "clock") == 0) return ThemeHomeWidgetType::Clock;
+  if (strcmp(value, "recents") == 0 || strcmp(value, "coverCarousel") == 0 || strcmp(value, "recentBook") == 0) {
+    return ThemeHomeWidgetType::Recents;
+  }
+  if (strcmp(value, "featuredBookCard") == 0 || strcmp(value, "bookCard") == 0) {
+    return ThemeHomeWidgetType::FeaturedBookCard;
+  }
+  if (strcmp(value, "recentCoverGrid") == 0 || strcmp(value, "coverGrid") == 0) {
+    return ThemeHomeWidgetType::RecentCoverGrid;
+  }
+  if (strcmp(value, "launcherGrid") == 0 || strcmp(value, "grid") == 0) return ThemeHomeWidgetType::LauncherGrid;
+  if (strcmp(value, "launcherTabs") == 0 || strcmp(value, "iconTabs") == 0) return ThemeHomeWidgetType::LauncherGrid;
+  if (strcmp(value, "buttonHints") == 0 || strcmp(value, "buttons") == 0) return ThemeHomeWidgetType::ButtonHints;
+  return ThemeHomeWidgetType::LauncherList;
+}
+
+ThemeScreenWidgetType parseScreenWidgetType(const char* value) {
+  if (value != nullptr && (strcmp(value, "coverGrid") == 0 || strcmp(value, "recentCoverGrid") == 0)) {
+    return ThemeScreenWidgetType::CoverGrid;
+  }
+  return ThemeScreenWidgetType::List;
+}
+
+ThemeLauncherPresentation parseLauncherPresentation(const char* value, ThemeLauncherPresentation fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "iconTabs") == 0 || strcmp(value, "tabs") == 0 || strcmp(value, "icon-only") == 0) {
+    return ThemeLauncherPresentation::IconTabs;
+  }
+  if (strcmp(value, "menu") == 0) return ThemeLauncherPresentation::Menu;
+  return fallback;
+}
+
+ThemeWidgetSelectionStyle parseWidgetSelectionStyle(const char* value, ThemeWidgetSelectionStyle fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "outline") == 0) return ThemeWidgetSelectionStyle::Outline;
+  if (strcmp(value, "coverFrame") == 0 || strcmp(value, "cover-frame") == 0 || strcmp(value, "coverOutline") == 0 ||
+      strcmp(value, "cover-outline") == 0) {
+    return ThemeWidgetSelectionStyle::CoverFrame;
+  }
+  if (strcmp(value, "none") == 0) return ThemeWidgetSelectionStyle::None;
+  if (strcmp(value, "fill") == 0) return ThemeWidgetSelectionStyle::Fill;
+  return fallback;
+}
+
+ThemeHomeNavigationMode parseHomeNavigationMode(const char* value, ThemeHomeNavigationMode fallback) {
+  if (value == nullptr) return fallback;
+  if (strcmp(value, "splitAxis") == 0 || strcmp(value, "split-axis") == 0) {
+    return ThemeHomeNavigationMode::SplitAxis;
+  }
+  if (strcmp(value, "carousel") == 0 || strcmp(value, "carouselAxis") == 0 || strcmp(value, "carousel-axis") == 0 ||
+      strcmp(value, "coverHorizontal") == 0 || strcmp(value, "cover-horizontal") == 0) {
+    return ThemeHomeNavigationMode::CarouselAxis;
+  }
+  if (strcmp(value, "linear") == 0) return ThemeHomeNavigationMode::Linear;
+  return fallback;
+}
+
+void parseEdgeInsets(JsonObjectConst obj, const char* key, ThemeEdgeInsets& out) {
+  if (obj[key].is<int>()) {
+    const int value = obj[key] | 0;
+    out = ThemeEdgeInsets{value, value, value, value};
+    return;
+  }
+
+  JsonObjectConst insets = obj[key].as<JsonObjectConst>();
+  if (insets.isNull()) return;
+  out.top = insets["top"] | out.top;
+  out.right = insets["right"] | out.right;
+  out.bottom = insets["bottom"] | out.bottom;
+  out.left = insets["left"] | out.left;
+}
+
+ThemeHomeAction parseHomeAction(const char* value) {
+  if (value == nullptr) return ThemeHomeAction::FileBrowser;
+  if (strcmp(value, "activity:recentBooks") == 0 || strcmp(value, "recentBooks") == 0) {
+    return ThemeHomeAction::RecentBooks;
+  }
+  if (strcmp(value, "activity:opds") == 0 || strcmp(value, "opds") == 0) return ThemeHomeAction::OpdsBrowser;
+  if (strcmp(value, "activity:fileTransfer") == 0 || strcmp(value, "fileTransfer") == 0) {
+    return ThemeHomeAction::FileTransfer;
+  }
+  if (strcmp(value, "activity:settings") == 0 || strcmp(value, "settings") == 0) return ThemeHomeAction::Settings;
+  if (strcmp(value, "reader:recent") == 0 || strcmp(value, "recentBook") == 0) return ThemeHomeAction::RecentBook;
+  return ThemeHomeAction::FileBrowser;
+}
+
+void parseLauncherWidgetSpec(JsonObjectConst obj, const char* type, ThemeHomeLauncherWidgetSpec& out) {
+  out.presentation = parseLauncherPresentation(obj["presentation"].as<const char*>(), out.presentation);
+  if (type != nullptr && (strcmp(type, "launcherTabs") == 0 || strcmp(type, "iconTabs") == 0)) {
+    out.presentation = ThemeLauncherPresentation::IconTabs;
+  }
+  out.columns = std::max(1, std::min(12, obj["columns"] | out.columns));
+  out.rows = std::max(0, std::min(12, obj["rows"] | out.rows));
+  out.gap = obj["gap"] | out.gap;
+  out.iconSize = obj["iconSize"] | out.iconSize;
+  out.selectedRadius = obj["selectedRadius"] | out.selectedRadius;
+
+  JsonArrayConst items = obj["items"].as<JsonArrayConst>();
+  if (items.isNull()) return;
+  out.items.clear();
+  for (JsonObjectConst itemObj : items) {
+    if (out.items.size() >= kMaxThemeLauncherItems) break;
+    ThemeHomeLauncherSpec launcher;
+    launcher.text = itemObj["text"] | "";
+    UIIcon icon = UIIcon::None;
+    if (iconForKey(itemObj["icon"].as<const char*>(), icon)) launcher.icon = icon;
+    launcher.action = parseHomeAction(itemObj["action"].as<const char*>());
+    out.items.push_back(launcher);
+  }
+}
+
+void parseFeaturedBookWidgetSpec(JsonObjectConst obj, ThemeFeaturedBookWidgetSpec& out) {
+  out.startIndex = obj["startIndex"] | out.startIndex;
+  out.coverWidth = obj["coverWidth"] | out.coverWidth;
+  out.coverHeight = obj["coverHeight"] | out.coverHeight;
+  out.coverGap = obj["coverGap"] | out.coverGap;
+  out.titleGap = obj["titleGap"] | out.titleGap;
+  out.selectedRadius = obj["selectedRadius"] | out.selectedRadius;
+  out.placeholderIconSize = obj["placeholderIconSize"] | out.placeholderIconSize;
+}
+
+void parseCoverGridWidgetSpec(JsonObjectConst obj, ThemeCoverGridWidgetSpec& out) {
+  if (obj.isNull()) return;
+  out.configured = true;
+  out.columns = std::max(1, std::min(12, obj["columns"] | out.columns));
+  out.rows = std::max(0, std::min(12, obj["rows"] | out.rows));
+  out.gap = obj["gap"] | out.gap;
+  out.rowGap = obj["rowGap"] | out.rowGap;
+  out.coverWidth = obj["coverWidth"] | out.coverWidth;
+  out.coverHeight = obj["coverHeight"] | out.coverHeight;
+  out.placeholderIconSize = obj["placeholderIconSize"] | out.placeholderIconSize;
+  out.rowHeight = obj["rowHeight"] | out.rowHeight;
+  out.labelHeight = obj["labelHeight"] | out.labelHeight;
+  out.labelGap = obj["labelGap"] | out.labelGap;
+  out.labelLines = obj["labelLines"] | out.labelLines;
+  out.startIndex = obj["startIndex"] | out.startIndex;
+  out.selectedRadius = obj["selectedRadius"] | out.selectedRadius;
+  out.selectionStyle = parseWidgetSelectionStyle(obj["selectionStyle"].as<const char*>(), out.selectionStyle);
+  parseEdgeInsets(obj, "cellInset", out.cellInset);
+  parseEdgeInsets(obj, "labelInset", out.labelInset);
+}
+
+ThemeButtonHintLabel parseButtonHintLabel(const char* value) {
+  if (value == nullptr || value[0] == '\0' || strcmp(value, "default") == 0) return ThemeButtonHintLabel::Default;
+  if (strcmp(value, "none") == 0 || strcmp(value, "empty") == 0) return ThemeButtonHintLabel::Empty;
+  if (strcmp(value, "back") == 0) return ThemeButtonHintLabel::Back;
+  if (strcmp(value, "home") == 0) return ThemeButtonHintLabel::Home;
+  if (strcmp(value, "select") == 0) return ThemeButtonHintLabel::Select;
+  if (strcmp(value, "confirm") == 0) return ThemeButtonHintLabel::Confirm;
+  if (strcmp(value, "open") == 0) return ThemeButtonHintLabel::Open;
+  if (strcmp(value, "toggle") == 0) return ThemeButtonHintLabel::Toggle;
+  if (strcmp(value, "up") == 0) return ThemeButtonHintLabel::Up;
+  if (strcmp(value, "down") == 0) return ThemeButtonHintLabel::Down;
+  if (strcmp(value, "left") == 0) return ThemeButtonHintLabel::Left;
+  if (strcmp(value, "right") == 0) return ThemeButtonHintLabel::Right;
+  return ThemeButtonHintLabel::Default;
+}
+
+void parseButtonHintsWidgetSpec(JsonObjectConst obj, ThemeButtonHintsWidgetSpec& out) {
+  JsonObjectConst labels = obj["labels"].as<JsonObjectConst>();
+  if (!labels.isNull()) {
+    out.back = parseButtonHintLabel(labels["back"].as<const char*>());
+    out.confirm = parseButtonHintLabel(labels["confirm"].as<const char*>());
+    out.previous = parseButtonHintLabel(labels["previous"].as<const char*>());
+    out.next = parseButtonHintLabel(labels["next"].as<const char*>());
+  }
+  if (!obj["back"].isNull()) out.back = parseButtonHintLabel(obj["back"].as<const char*>());
+  if (!obj["confirm"].isNull()) out.confirm = parseButtonHintLabel(obj["confirm"].as<const char*>());
+  if (!obj["previous"].isNull()) out.previous = parseButtonHintLabel(obj["previous"].as<const char*>());
+  if (!obj["next"].isNull()) out.next = parseButtonHintLabel(obj["next"].as<const char*>());
+}
+
+void parseHomeWidget(JsonObjectConst obj, ThemeHomeWidgetSpec& out) {
+  if (obj.isNull()) return;
+  out.slot = obj["slot"] | out.slot.c_str();
+  const char* type = obj["type"].as<const char*>();
+  out.type = parseHomeWidgetType(type);
+  parseLauncherWidgetSpec(obj, type, out.launcher);
+  parseFeaturedBookWidgetSpec(obj, out.featured);
+  parseCoverGridWidgetSpec(obj, out.coverGrid);
+  parseButtonHintsWidgetSpec(obj, out.buttonHints);
+  out.layer = obj["layer"] | out.layer;
+  out.offsetX = obj["offsetX"] | out.offsetX;
+  out.offsetY = obj["offsetY"] | out.offsetY;
+  parseEdgeInsets(obj, "bleed", out.bleed);
+  parseEdgeInsets(obj, "inset", out.inset);
+}
+
+void parseHomeScreenSpec(JsonObjectConst obj, ThemeHomeScreenSpec& out) {
+  if (obj.isNull()) return;
+  JsonObjectConst layoutObj = obj["layout"].as<JsonObjectConst>();
+  JsonArrayConst widgets = obj["widgets"].as<JsonArrayConst>();
+  if (layoutObj.isNull() || widgets.isNull()) return;
+
+  out.enabled = true;
+  out.navigation = parseHomeNavigationMode(obj["navigation"].as<const char*>(), out.navigation);
+  out.layout = ThemeLayoutNode{};
+  out.layout.id = "root";
+  out.layout.sizeType = ThemeLayoutSizeType::Flex;
+  parseLayoutNode(layoutObj, out.layout);
+
+  out.widgets.clear();
+  for (JsonObjectConst widgetObj : widgets) {
+    if (out.widgets.size() >= kMaxThemeWidgets) break;
+    ThemeHomeWidgetSpec widget;
+    parseHomeWidget(widgetObj, widget);
+    out.widgets.push_back(widget);
+  }
+}
+
+void parseScreenSpec(JsonObjectConst obj, ThemeScreenSpec& out) {
+  if (obj.isNull()) return;
+  JsonObjectConst layoutObj = obj["layout"].as<JsonObjectConst>();
+  if (layoutObj.isNull()) return;
+
+  out.enabled = true;
+  out.layout = ThemeLayoutNode{};
+  out.layout.id = "root";
+  out.layout.sizeType = ThemeLayoutSizeType::Flex;
+  parseLayoutNode(layoutObj, out.layout);
+
+  out.widgets.clear();
+  JsonArrayConst widgets = obj["widgets"].as<JsonArrayConst>();
+  if (widgets.isNull()) return;
+  for (JsonObjectConst widgetObj : widgets) {
+    if (out.widgets.size() >= kMaxThemeWidgets) break;
+    ThemeScreenSpec::Widget widget;
+    widget.slot = widgetObj["slot"] | widget.slot.c_str();
+    widget.type = parseScreenWidgetType(widgetObj["type"].as<const char*>());
+    if (widget.type == ThemeScreenWidgetType::CoverGrid) parseCoverGridWidgetSpec(widgetObj, widget.coverGrid);
+    out.widgets.push_back(widget);
+  }
+}
+
+void applyTokenSizeOverrides(JsonObjectConst obj, ThemeMetrics& metrics) {
+  if (obj.isNull()) return;
+  metrics.headerHeight = obj["header"] | metrics.headerHeight;
+  metrics.listRowHeight = obj["row"] | metrics.listRowHeight;
+  metrics.listWithSubtitleRowHeight = obj["rowSubtitle"] | metrics.listWithSubtitleRowHeight;
+  metrics.menuRowHeight = obj["menuRow"] | metrics.menuRowHeight;
+  metrics.buttonHintsHeight = obj["footer"] | obj["buttonHints"] | metrics.buttonHintsHeight;
+  metrics.progressBarHeight = obj["progress"] | metrics.progressBarHeight;
+}
+
+ThemeMetrics defaultMetrics() { return LyraMetrics::values; }
+}  // namespace
+
+const char* SdCardThemeRegistry::activeDeviceId() { return gpio.deviceIsX3() ? "x3" : "x4"; }
+
+bool SdCardThemeRegistry::isSafeId(const char* value) {
+  if (value == nullptr || value[0] == '\0') return false;
+  if (strstr(value, "..") != nullptr || strchr(value, '/') != nullptr || strchr(value, '\\') != nullptr) return false;
+  for (const char* p = value; *p != '\0'; ++p) {
+    const auto c = static_cast<unsigned char>(*p);
+    if (std::iscntrl(c)) return false;
+  }
+  return true;
+}
+
+bool SdCardThemeRegistry::isSafeThemeId(const char* value) {
+  if (value == nullptr || value[0] == '\0') return false;
+  if (strlen(value) > MAX_PERSISTED_THEME_ID_LENGTH) return false;
+  if (strstr(value, "..") != nullptr || strchr(value, '/') != nullptr || strchr(value, '\\') != nullptr) return false;
+  for (const char* p = value; *p != '\0'; ++p) {
+    const char c = *p;
+    if (!std::isalnum(static_cast<unsigned char>(c)) && c != '-' && c != '_') return false;
+  }
+  return true;
+}
+
+bool SdCardThemeRegistry::parseThemeJson(const char* themeDirPath, SdCardThemeInfo& out) {
+  char jsonPath[180];
+  snprintf(jsonPath, sizeof(jsonPath), "%s/theme.json", themeDirPath);
+
+  HalFile file;
+  if (!Storage.openFileForRead("THREG", jsonPath, file)) {
+    return false;
+  }
+
+  JsonDocument doc;
+  DeserializationError err = deserializeJson(doc, file);
+  file.close();
+  if (err) {
+    LOG_ERR("THREG", "Theme JSON parse error in %s: %s", jsonPath, err.c_str());
+    return false;
+  }
+
+  const int schema = doc["schema"] | 0;
+  if (schema != THEME_SCHEMA_VERSION) {
+    LOG_ERR("THREG", "Unsupported theme schema %d in %s", schema, jsonPath);
+    return false;
+  }
+
+  const char* id = doc["id"] | "";
+  const char* name = doc["name"] | id;
+  if (!isSafeThemeId(id) || !isSafeId(name)) {
+    LOG_ERR("THREG", "Invalid theme id/name in %s", jsonPath);
+    return false;
+  }
+
+  const char* deviceId = activeDeviceId();
+  JsonObject deviceObj = doc["devices"][deviceId].as<JsonObject>();
+
+  const char* inherits = deviceObj["inherits"] | doc["inherits"] | "lyra";
+  out.id = id;
+  out.name = name;
+  out.version = doc["version"] | 0;
+  out.path = themeDirPath;
+  out.inherits = inherits;
+  out.metrics = defaultMetrics();
+  parseHomeRecentsSpec(doc["components"]["homeRecents"].as<JsonObjectConst>(), out.homeRecents);
+  parseHomeRecentsSpec(deviceObj["components"]["homeRecents"].as<JsonObjectConst>(), out.homeRecents);
+  parseButtonMenuSpec(doc["components"]["homeMenu"].as<JsonObjectConst>(), out.buttonMenu);
+  parseButtonMenuSpec(deviceObj["components"]["homeMenu"].as<JsonObjectConst>(), out.buttonMenu);
+  parseListSpec(doc["components"]["list"].as<JsonObjectConst>(), out.list);
+  parseListSpec(deviceObj["components"]["list"].as<JsonObjectConst>(), out.list);
+  parseButtonHintsSpec(doc["components"]["buttonHints"].as<JsonObjectConst>(), out.buttonHints);
+  parseButtonHintsSpec(deviceObj["components"]["buttonHints"].as<JsonObjectConst>(), out.buttonHints);
+  parseTabBarSpec(doc["components"]["tabBar"].as<JsonObjectConst>(), out.tabBar);
+  parseTabBarSpec(deviceObj["components"]["tabBar"].as<JsonObjectConst>(), out.tabBar);
+  parseHeaderSpec(doc["components"]["header"].as<JsonObjectConst>(), out.header);
+  parseHeaderSpec(deviceObj["components"]["header"].as<JsonObjectConst>(), out.header);
+  applyMetricOverrides(doc["metrics"].as<JsonObjectConst>(), out.metrics);
+  applyMetricOverrides(deviceObj["metrics"].as<JsonObjectConst>(), out.metrics);
+  applyTokenSizeOverrides(doc["tokens"]["size"].as<JsonObjectConst>(), out.metrics);
+  applyTokenSizeOverrides(deviceObj["tokens"]["size"].as<JsonObjectConst>(), out.metrics);
+  parseHomeScreenSpec(doc["screens"]["home"].as<JsonObjectConst>(), out.homeScreen);
+  parseHomeScreenSpec(deviceObj["screens"]["home"].as<JsonObjectConst>(), out.homeScreen);
+  parseScreenSpec(doc["screens"]["fileBrowser"].as<JsonObjectConst>(), out.fileBrowserScreen);
+  parseScreenSpec(deviceObj["screens"]["fileBrowser"].as<JsonObjectConst>(), out.fileBrowserScreen);
+  parseScreenSpec(doc["screens"]["recentBooks"].as<JsonObjectConst>(), out.recentBooksScreen);
+  parseScreenSpec(deviceObj["screens"]["recentBooks"].as<JsonObjectConst>(), out.recentBooksScreen);
+  parseScreenSpec(doc["screens"]["settings"].as<JsonObjectConst>(), out.settingsScreen);
+  parseScreenSpec(deviceObj["screens"]["settings"].as<JsonObjectConst>(), out.settingsScreen);
+  parseScreenSpec(doc["screens"]["reader"].as<JsonObjectConst>(), out.readerScreen);
+  parseScreenSpec(deviceObj["screens"]["reader"].as<JsonObjectConst>(), out.readerScreen);
+  parseReaderChromeSpec(doc["screens"]["reader"]["chrome"].as<JsonObjectConst>(), out.readerChrome);
+  parseReaderChromeSpec(deviceObj["screens"]["reader"]["chrome"].as<JsonObjectConst>(), out.readerChrome);
+  if ((out.buttonMenu.enabled && out.buttonMenu.showIcons) || (out.list.enabled && out.list.showIcons)) {
+    parseIconMap(doc["assets"]["icons"].as<JsonObjectConst>(), out.icons);
+    parseIconMap(deviceObj["assets"]["icons"].as<JsonObjectConst>(), out.icons);
+  }
+  if (out.homeRecents.type == ThemeHomeRecentsType::CoverStrip) {
+    out.metrics.homeRecentBooksCount = std::max(1, out.homeRecents.maxBooks);
+  } else if (out.homeRecents.type == ThemeHomeRecentsType::None) {
+    out.metrics.homeCoverHeight = 0;
+    out.metrics.homeCoverTileHeight = 0;
+  }
+  if (out.homeScreen.enabled) {
+    for (const auto& widget : out.homeScreen.widgets) {
+      if (widget.type == ThemeHomeWidgetType::RecentCoverGrid) {
+        const int rows = widget.coverGrid.rows > 0 ? widget.coverGrid.rows : 1;
+        out.metrics.homeRecentBooksCount =
+            std::max(out.metrics.homeRecentBooksCount,
+                     std::max(0, widget.coverGrid.startIndex) + rows * std::max(1, widget.coverGrid.columns));
+      }
+    }
+  }
+  out.constraints.screenWidth = deviceObj["constraints"]["screenWidth"] | doc["constraints"]["screenWidth"] | 0;
+  out.constraints.screenHeight = deviceObj["constraints"]["screenHeight"] | doc["constraints"]["screenHeight"] | 0;
+  return true;
+}
+
+void SdCardThemeRegistry::scanRoot(const char* rootPath, std::vector<SdCardThemeInfo>& out) {
+  HalFile root = Storage.open(rootPath);
+  if (!root) {
+    LOG_DBG("THREG", "Themes directory not found: %s", rootPath);
+    return;
+  }
+  if (!root.isDirectory()) {
+    LOG_ERR("THREG", "Themes path is not a directory: %s", rootPath);
+    return;
+  }
+
+  char nameBuffer[128];
+  while (true) {
+    HalFile entry = root.openNextFile();
+    if (!entry) break;
+    if (!entry.isDirectory()) {
+      entry.close();
+      continue;
+    }
+
+    entry.getName(nameBuffer, sizeof(nameBuffer));
+    entry.close();
+    if (nameBuffer[0] == '.' || nameBuffer[0] == '_') continue;
+    if (!isSafeThemeId(nameBuffer)) continue;
+
+    char themeDirPath[180];
+    snprintf(themeDirPath, sizeof(themeDirPath), "%s/%s", rootPath, nameBuffer);
+
+    SdCardThemeInfo info;
+    if (!parseThemeJson(themeDirPath, info)) continue;
+
+    bool exists = false;
+    for (const auto& theme : out) {
+      if (theme.id == info.id) {
+        exists = true;
+        break;
+      }
+    }
+    if (exists) continue;
+
+    LOG_DBG("THREG", "Found theme: %s (%s)", info.name.c_str(), info.path.c_str());
+    out.push_back(std::move(info));
+  }
+}
+
+bool SdCardThemeRegistry::discover() {
+  themes_.clear();
+  themes_.reserve(8);
+
+  scanRoot(THEMES_DIR_HIDDEN, themes_);
+  scanRoot(THEMES_DIR_VISIBLE, themes_);
+
+  std::sort(themes_.begin(), themes_.end(),
+            [](const SdCardThemeInfo& a, const SdCardThemeInfo& b) { return a.name < b.name; });
+
+  if (static_cast<int>(themes_.size()) > MAX_SD_THEMES) {
+    themes_.resize(MAX_SD_THEMES);
+  }
+
+  LOG_DBG("THREG", "Discovery complete: %d themes", static_cast<int>(themes_.size()));
+  return !themes_.empty();
+}
+
+void SdCardThemeRegistry::clear() {
+  themes_.clear();
+  themes_.shrink_to_fit();
+}
+
+const SdCardThemeInfo* SdCardThemeRegistry::findTheme(const std::string& id) const {
+  auto it = std::find_if(themes_.begin(), themes_.end(),
+                         [&](const SdCardThemeInfo& theme) { return theme.id == id || theme.name == id; });
+  return it == themes_.end() ? nullptr : &*it;
+}
+
+const char* SdCardThemeRegistry::findThemeRoot(const char* themeId) {
+  if (!isSafeThemeId(themeId)) return nullptr;
+  char path[180];
+  snprintf(path, sizeof(path), "%s/%s", THEMES_DIR_HIDDEN, themeId);
+  if (Storage.exists(path)) return THEMES_DIR_HIDDEN;
+  snprintf(path, sizeof(path), "%s/%s", THEMES_DIR_VISIBLE, themeId);
+  if (Storage.exists(path)) return THEMES_DIR_VISIBLE;
+  return nullptr;
+}
+
+const char* SdCardThemeRegistry::defaultWriteRoot() {
+  const bool hiddenExists = Storage.exists(THEMES_DIR_HIDDEN);
+  const bool visibleExists = Storage.exists(THEMES_DIR_VISIBLE);
+  if (hiddenExists) return THEMES_DIR_HIDDEN;
+  if (visibleExists) return THEMES_DIR_VISIBLE;
+  return THEMES_DIR_HIDDEN;
+}
diff --git a/src/components/themes/SdCardThemeRegistry.h b/src/components/themes/SdCardThemeRegistry.h
new file mode 100644
index 00000000..553d4d4e
--- /dev/null
+++ b/src/components/themes/SdCardThemeRegistry.h
@@ -0,0 +1,61 @@
+#pragma once
+
+#include <string>
+#include <vector>
+
+#include "components/themes/BaseTheme.h"
+#include "components/themes/ThemeLayout.h"
+
+// Theme's declared design resolution (portrait). Used to scale the theme's pixel
+// metrics to the actual device panel (see scaleThemeMetrics in UITheme.cpp).
+struct SdThemeDeviceConstraints {
+  int screenWidth = 0;
+  int screenHeight = 0;
+};
+
+struct SdCardThemeInfo {
+  std::string id;
+  std::string name;
+  int version = 0;
+  std::string path;
+  std::string inherits;
+  ThemeMetrics metrics = {};
+  ThemeHomeRecentsSpec homeRecents;
+  ThemeButtonMenuSpec buttonMenu;
+  ThemeListSpec list;
+  ThemeButtonHintsSpec buttonHints;
+  ThemeTabBarSpec tabBar;
+  ThemeHeaderSpec header;
+  ThemeHomeScreenSpec homeScreen;
+  ThemeScreenSpec fileBrowserScreen;
+  ThemeScreenSpec recentBooksScreen;
+  ThemeScreenSpec settingsScreen;
+  ThemeScreenSpec readerScreen;
+  ThemeReaderChromeSpec readerChrome;
+  ThemeIconMap icons;
+  SdThemeDeviceConstraints constraints;
+};
+
+class SdCardThemeRegistry {
+ public:
+  static constexpr int MAX_SD_THEMES = 64;
+  static constexpr const char* THEMES_DIR_HIDDEN = "/.themes";
+  static constexpr const char* THEMES_DIR_VISIBLE = "/themes";
+
+  bool discover();
+  void clear();
+
+  const std::vector<SdCardThemeInfo>& getThemes() const { return themes_; }
+  const SdCardThemeInfo* findTheme(const std::string& id) const;
+  static const char* findThemeRoot(const char* themeId);
+  static const char* defaultWriteRoot();
+
+ private:
+  std::vector<SdCardThemeInfo> themes_;
+
+  static const char* activeDeviceId();
+  static bool parseThemeJson(const char* themeDirPath, SdCardThemeInfo& out);
+  static bool isSafeId(const char* value);
+  static bool isSafeThemeId(const char* value);
+  static void scanRoot(const char* rootPath, std::vector<SdCardThemeInfo>& out);
+};
diff --git a/src/components/themes/ThemeLayout.cpp b/src/components/themes/ThemeLayout.cpp
new file mode 100644
index 00000000..10ebb63a
--- /dev/null
+++ b/src/components/themes/ThemeLayout.cpp
@@ -0,0 +1,110 @@
+#include "ThemeLayout.h"
+
+#include <FreeInkUILayout.h>
+
+#include <algorithm>
+#include <cstdint>
+#include <cstring>
+
+int themeLayoutTokenSize(const ThemeMetrics& metrics, const std::string& token) {
+  if (token == "topPadding") return metrics.topPadding;
+  if (token == "header") return metrics.headerHeight;
+  if (token == "tabBar" || token == "tabs") return metrics.tabBarHeight;
+  if (token == "footer" || token == "buttons" || token == "buttonHints") return metrics.buttonHintsHeight;
+  if (token == "row") return metrics.listRowHeight;
+  if (token == "subtitleRow") return metrics.listWithSubtitleRowHeight;
+  if (token == "menuRow") return metrics.menuRowHeight;
+  if (token == "recents") return metrics.homeCoverTileHeight;
+  if (token == "cover") return metrics.homeCoverHeight;
+  if (token == "verticalSpacing" || token == "gap") return metrics.verticalSpacing;
+  if (token == "progress") return metrics.progressBarHeight;
+  return 0;
+}
+
+namespace {
+
+freeink::ui::Axis toUiAxis(ThemeLayoutAxis axis) {
+  return axis == ThemeLayoutAxis::Row ? freeink::ui::Axis::Row : freeink::ui::Axis::Column;
+}
+
+freeink::ui::LayoutLength toUiLength(const ThemeLayoutNode& node, const ThemeMetrics& metrics) {
+  if (node.sizeType == ThemeLayoutSizeType::Fixed) {
+    return freeink::ui::LayoutLength::fixed(std::max(0, node.size));
+  }
+
+  if (node.sizeType == ThemeLayoutSizeType::Token) {
+    return freeink::ui::LayoutLength::fixed(std::max(0, themeLayoutTokenSize(metrics, node.sizeToken)));
+  }
+
+  return freeink::ui::LayoutLength::flexible(static_cast<uint8_t>(std::max(1, node.flex)));
+}
+
+struct LayoutTreeStorage {
+  static constexpr size_t kMaxNodes = 64;
+
+  freeink::ui::LayoutNode nodes[kMaxNodes];
+  size_t used = 0;
+  bool overflow = false;
+
+  freeink::ui::LayoutNode* allocate(size_t count) {
+    if (count == 0) return nullptr;
+    if (used + count > kMaxNodes) {
+      overflow = true;
+      return nullptr;
+    }
+    auto* out = &nodes[used];
+    used += count;
+    return out;
+  }
+};
+
+freeink::ui::LayoutNode toUiNode(const ThemeLayoutNode& node, const ThemeMetrics& metrics, LayoutTreeStorage& storage) {
+  freeink::ui::LayoutNode out;
+  out.id = node.id.empty() ? nullptr : node.id.c_str();
+  out.axis = toUiAxis(node.axis);
+  out.gap = static_cast<int16_t>(std::max(0, node.gap));
+  out.length = toUiLength(node, metrics);
+
+  const uint8_t childCount = static_cast<uint8_t>(std::min<size_t>(node.children.size(), UINT8_MAX));
+  if (childCount == 0) return out;
+
+  auto* children = storage.allocate(childCount);
+  if (children == nullptr) return out;
+  for (uint8_t i = 0; i < childCount; ++i) {
+    children[i] = toUiNode(node.children[i], metrics, storage);
+  }
+  out.children = children;
+  out.childCount = childCount;
+  return out;
+}
+
+}  // namespace
+
+void layoutThemeSlots(const ThemeLayoutNode& node, Rect rect, const ThemeMetrics& metrics, ThemeLayoutSlots& slots) {
+  slots.clear();
+  LayoutTreeStorage storage;
+  const freeink::ui::LayoutNode uiNode = toUiNode(node, metrics, storage);
+  freeink::ui::layoutTree(uiNode, freeink::ui::LayoutRect{rect.x, rect.y, rect.width, rect.height},
+                          [&](const char* id, freeink::ui::LayoutRect slot) {
+                            if (id != nullptr && id[0] != '\0') {
+                              slots.push(id, Rect{static_cast<int>(slot.x), static_cast<int>(slot.y),
+                                                  static_cast<int>(slot.width), static_cast<int>(slot.height)});
+                            }
+                          });
+}
+
+Rect findThemeSlot(const ThemeLayoutSlots& slots, const std::string& id) {
+  for (size_t i = 0; i < slots.count; ++i) {
+    const auto& slot = slots.items[i];
+    if (slot.id != nullptr && std::strcmp(slot.id, id.c_str()) == 0) return slot.rect;
+  }
+  return Rect{};
+}
+
+Rect normalizeThemeHeaderSlot(Rect rect, const ThemeMetrics& metrics) {
+  if (rect.y == 0 && metrics.topPadding > 0 && rect.height > metrics.topPadding) {
+    rect.y += metrics.topPadding;
+    rect.height -= metrics.topPadding;
+  }
+  return rect;
+}
diff --git a/src/components/themes/ThemeLayout.h b/src/components/themes/ThemeLayout.h
new file mode 100644
index 00000000..edf91c70
--- /dev/null
+++ b/src/components/themes/ThemeLayout.h
@@ -0,0 +1,170 @@
+#pragma once
+
+#include <cstddef>
+#include <string>
+#include <vector>
+
+#include "components/themes/BaseTheme.h"
+
+enum class ThemeLayoutAxis { Column, Row };
+enum class ThemeLayoutSizeType { Flex, Fixed, Token };
+enum class ThemeScreenKind { Home, FileBrowser, RecentBooks, Settings, Reader };
+enum class ThemeHomeWidgetType {
+  Header,
+  HeaderTitle,
+  Battery,
+  Clock,
+  Recents,
+  FeaturedBookCard,
+  RecentCoverGrid,
+  LauncherList,
+  LauncherGrid,
+  ButtonHints
+};
+enum class ThemeHomeAction { FileBrowser, RecentBooks, OpdsBrowser, FileTransfer, Settings, RecentBook };
+enum class ThemeLauncherPresentation { Menu, IconTabs };
+enum class ThemeWidgetSelectionStyle { Fill, Outline, CoverFrame, None };
+enum class ThemeHomeNavigationMode { Linear, SplitAxis, CarouselAxis };
+enum class ThemeScreenWidgetType { List, CoverGrid };
+enum class ThemeButtonHintLabel { Default, Empty, Back, Home, Select, Confirm, Open, Toggle, Up, Down, Left, Right };
+
+constexpr size_t kMaxThemeWidgets = 12;
+constexpr size_t kMaxThemeLauncherItems = 12;
+constexpr size_t kMaxThemeCoverGridItems = 64;
+
+struct ThemeLayoutNode {
+  std::string id;
+  ThemeLayoutAxis axis = ThemeLayoutAxis::Column;
+  int gap = 0;
+  ThemeLayoutSizeType sizeType = ThemeLayoutSizeType::Flex;
+  int size = 0;
+  int flex = 1;
+  std::string sizeToken;
+  std::vector<ThemeLayoutNode> children;
+};
+
+struct ThemeHomeLauncherSpec {
+  std::string text;
+  UIIcon icon = UIIcon::None;
+  ThemeHomeAction action = ThemeHomeAction::FileBrowser;
+};
+
+struct ThemeEdgeInsets {
+  int top = 0;
+  int right = 0;
+  int bottom = 0;
+  int left = 0;
+};
+
+struct ThemeHomeLauncherWidgetSpec {
+  ThemeLauncherPresentation presentation = ThemeLauncherPresentation::Menu;
+  int columns = 1;
+  int rows = 0;
+  int gap = 0;
+  int iconSize = 32;
+  int selectedRadius = 6;
+  std::vector<ThemeHomeLauncherSpec> items;
+};
+
+struct ThemeFeaturedBookWidgetSpec {
+  int startIndex = 0;
+  int coverWidth = 0;
+  int coverHeight = 0;
+  int coverGap = 14;
+  int titleGap = 8;
+  int selectedRadius = 6;
+  int placeholderIconSize = 0;
+};
+
+struct ThemeCoverGridWidgetSpec {
+  bool configured = false;
+  int columns = 1;
+  int rows = 0;
+  int gap = 0;
+  int rowGap = -1;
+  int coverWidth = 0;
+  int coverHeight = 0;
+  int placeholderIconSize = 0;
+  int rowHeight = 0;
+  int labelHeight = 20;
+  int labelGap = 2;
+  int labelLines = 1;
+  int startIndex = 0;
+  int selectedRadius = 6;
+  ThemeWidgetSelectionStyle selectionStyle = ThemeWidgetSelectionStyle::Fill;
+  ThemeEdgeInsets cellInset;
+  ThemeEdgeInsets labelInset;
+};
+
+struct ThemeButtonHintsWidgetSpec {
+  ThemeButtonHintLabel back = ThemeButtonHintLabel::Default;
+  ThemeButtonHintLabel confirm = ThemeButtonHintLabel::Default;
+  ThemeButtonHintLabel previous = ThemeButtonHintLabel::Default;
+  ThemeButtonHintLabel next = ThemeButtonHintLabel::Default;
+};
+
+struct ThemeHomeWidgetSpec {
+  std::string slot;
+  ThemeHomeWidgetType type = ThemeHomeWidgetType::LauncherList;
+  int layer = 0;
+  int offsetX = 0;
+  int offsetY = 0;
+  ThemeEdgeInsets bleed;
+  ThemeEdgeInsets inset;
+  ThemeHomeLauncherWidgetSpec launcher;
+  ThemeFeaturedBookWidgetSpec featured;
+  ThemeCoverGridWidgetSpec coverGrid;
+  ThemeButtonHintsWidgetSpec buttonHints;
+};
+
+struct ThemeHomeScreenSpec {
+  bool enabled = false;
+  ThemeHomeNavigationMode navigation = ThemeHomeNavigationMode::Linear;
+  ThemeLayoutNode layout;
+  std::vector<ThemeHomeWidgetSpec> widgets;
+};
+
+struct ThemeScreenSpec {
+  bool enabled = false;
+  ThemeLayoutNode layout;
+  struct Widget {
+    std::string slot;
+    ThemeScreenWidgetType type = ThemeScreenWidgetType::List;
+    ThemeCoverGridWidgetSpec coverGrid;
+  };
+  std::vector<Widget> widgets;
+};
+
+struct ThemeLayoutSlot {
+  const char* id = nullptr;
+  Rect rect;
+};
+
+struct ThemeLayoutSlots {
+  static constexpr size_t kMaxSlots = 32;
+
+  ThemeLayoutSlot items[kMaxSlots];
+  size_t count = 0;
+  bool overflow = false;
+
+  void clear() {
+    count = 0;
+    overflow = false;
+  }
+
+  bool empty() const { return count == 0; }
+  size_t size() const { return count; }
+
+  void push(const char* id, Rect rect) {
+    if (count >= kMaxSlots) {
+      overflow = true;
+      return;
+    }
+    items[count++] = ThemeLayoutSlot{id, rect};
+  }
+};
+
+int themeLayoutTokenSize(const ThemeMetrics& metrics, const std::string& token);
+void layoutThemeSlots(const ThemeLayoutNode& node, Rect rect, const ThemeMetrics& metrics, ThemeLayoutSlots& slots);
+Rect findThemeSlot(const ThemeLayoutSlots& slots, const std::string& id);
+Rect normalizeThemeHeaderSlot(Rect rect, const ThemeMetrics& metrics);
diff --git a/src/components/themes/lyra/Lyra3CoversTheme.cpp b/src/components/themes/lyra/Lyra3CoversTheme.cpp
index fdbed623..4e775961 100644
--- a/src/components/themes/lyra/Lyra3CoversTheme.cpp
+++ b/src/components/themes/lyra/Lyra3CoversTheme.cpp
@@ -19,8 +19,9 @@ constexpr int cornerRadius = 6;
 }  // namespace
 
 void Lyra3CoversTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                                           const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
-                                           bool& bufferRestored, std::function<bool()> storeCoverBuffer) const {
+                                           const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                           bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                                           bool coverStripSelected) const {
   const int tileWidth = (rect.width - 2 * Lyra3CoversMetrics::values.contentSidePadding) / 3;
   const int tileY = rect.y;
   const bool hasContinueReading = !recentBooks.empty();
@@ -82,7 +83,7 @@ void Lyra3CoversTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, con
 
     for (int i = 0; i < std::min(static_cast<int>(recentBooks.size()), Lyra3CoversMetrics::values.homeRecentBooksCount);
          i++) {
-      bool bookSelected = (selectorIndex == i);
+      bool bookSelected = coverStripSelected && coverSelectorIndex == i;
 
       int tileX = Lyra3CoversMetrics::values.contentSidePadding + tileWidth * i;
 
diff --git a/src/components/themes/lyra/Lyra3CoversTheme.h b/src/components/themes/lyra/Lyra3CoversTheme.h
index b17faed6..24678e4c 100644
--- a/src/components/themes/lyra/Lyra3CoversTheme.h
+++ b/src/components/themes/lyra/Lyra3CoversTheme.h
@@ -18,6 +18,7 @@ constexpr ThemeMetrics values = [] {
 class Lyra3CoversTheme : public LyraTheme {
  public:
   void drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                           const int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored,
-                           std::function<bool()> storeCoverBuffer) const override;
+                           const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                           bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                           bool coverStripSelected = true) const override;
 };
diff --git a/src/components/themes/lyra/LyraTheme.cpp b/src/components/themes/lyra/LyraTheme.cpp
index f04f7de0..ad6a55d4 100644
--- a/src/components/themes/lyra/LyraTheme.cpp
+++ b/src/components/themes/lyra/LyraTheme.cpp
@@ -6,6 +6,8 @@
 #include <HalStorage.h>
 #include <I18n.h>
 
+#include <algorithm>
+#include <cmath>
 #include <cstdint>
 #include <string>
 #include <vector>
@@ -40,6 +42,8 @@ constexpr int listIconSize = 24;
 constexpr int mainMenuColumns = 2;
 int coverWidth = 0;
 
+bool isBmpIconSize(int size) { return size > 0 && size <= 64; }
+
 const uint8_t* iconForName(UIIcon icon, int size) {
   if (size == 24) {
     switch (icon) {
@@ -82,8 +86,124 @@ const uint8_t* iconForName(UIIcon icon, int size) {
   }
   return nullptr;
 }
+
+enum class ButtonHintShape { None, Back, Select, Up, Down, Left, Right };
+
+bool matchesLabel(const char* label, const char* expected) {
+  return label != nullptr && expected != nullptr && strcmp(label, expected) == 0;
+}
+
+ButtonHintShape shapeForButtonHintLabel(const char* label) {
+  if (label == nullptr || label[0] == '\0') return ButtonHintShape::None;
+  if (matchesLabel(label, tr(STR_BACK)) || matchesLabel(label, tr(STR_CANCEL)) || matchesLabel(label, tr(STR_HOME))) {
+    return ButtonHintShape::Back;
+  }
+  if (matchesLabel(label, tr(STR_SELECT)) || matchesLabel(label, tr(STR_CONFIRM)) ||
+      matchesLabel(label, tr(STR_OK_BUTTON)) || matchesLabel(label, tr(STR_DONE)) ||
+      matchesLabel(label, tr(STR_OPEN)) || matchesLabel(label, tr(STR_TOGGLE))) {
+    return ButtonHintShape::Select;
+  }
+  if (matchesLabel(label, tr(STR_DIR_UP))) return ButtonHintShape::Up;
+  if (matchesLabel(label, tr(STR_DIR_DOWN))) return ButtonHintShape::Down;
+  if (matchesLabel(label, tr(STR_DIR_LEFT)) || strcmp(label, "<") == 0 || strcmp(label, "-") == 0) {
+    return ButtonHintShape::Left;
+  }
+  if (matchesLabel(label, tr(STR_DIR_RIGHT)) || strcmp(label, ">") == 0 || strcmp(label, "+") == 0) {
+    return ButtonHintShape::Right;
+  }
+  return ButtonHintShape::None;
+}
+
+void fillCircle(const GfxRenderer& renderer, int cx, int cy, int radius) {
+  const int r2 = radius * radius;
+  for (int y = -radius; y <= radius; ++y) {
+    for (int x = -radius; x <= radius; ++x) {
+      if (x * x + y * y <= r2) renderer.drawPixel(cx + x, cy + y, true);
+    }
+  }
+}
+
+void drawButtonHintShape(const GfxRenderer& renderer, ButtonHintShape shape, int centerX, int centerY, int size) {
+  const int half = std::max(4, size / 2);
+  if (shape == ButtonHintShape::Back) {
+    renderer.fillRect(centerX - half, centerY - half, half * 2, half * 2, true);
+  } else if (shape == ButtonHintShape::Select) {
+    fillCircle(renderer, centerX, centerY, half);
+  } else if (shape != ButtonHintShape::None) {
+    int xPoints[3] = {};
+    int yPoints[3] = {};
+    switch (shape) {
+      case ButtonHintShape::Up:
+        xPoints[0] = centerX;
+        yPoints[0] = centerY - half;
+        xPoints[1] = centerX - half;
+        yPoints[1] = centerY + half;
+        xPoints[2] = centerX + half;
+        yPoints[2] = centerY + half;
+        break;
+      case ButtonHintShape::Down:
+        xPoints[0] = centerX - half;
+        yPoints[0] = centerY - half;
+        xPoints[1] = centerX + half;
+        yPoints[1] = centerY - half;
+        xPoints[2] = centerX;
+        yPoints[2] = centerY + half;
+        break;
+      case ButtonHintShape::Left:
+        xPoints[0] = centerX - half;
+        yPoints[0] = centerY;
+        xPoints[1] = centerX + half;
+        yPoints[1] = centerY - half;
+        xPoints[2] = centerX + half;
+        yPoints[2] = centerY + half;
+        break;
+      case ButtonHintShape::Right:
+        xPoints[0] = centerX - half;
+        yPoints[0] = centerY - half;
+        xPoints[1] = centerX + half;
+        yPoints[1] = centerY;
+        xPoints[2] = centerX - half;
+        yPoints[2] = centerY + half;
+        break;
+      default:
+        return;
+    }
+    renderer.fillPolygon(xPoints, yPoints, 3, true);
+  }
+}
 }  // namespace
 
+bool LyraTheme::hasThemeIcon(UIIcon icon) const {
+  return assetRoot_ != nullptr && icons_ != nullptr && icons_->find(icon) != icons_->end();
+}
+
+bool LyraTheme::drawThemeIcon(const GfxRenderer& renderer, UIIcon icon, int x, int y, int size) const {
+  if (assetRoot_ == nullptr || icons_ == nullptr || !isBmpIconSize(size)) return false;
+  const auto it = icons_->find(icon);
+  if (it == icons_->end() || it->second.empty()) return false;
+
+  std::string path = assetRoot_;
+  if (!path.empty() && path.back() != '/') path += "/";
+  path += it->second;
+
+  HalFile file;
+  if (!Storage.openFileForRead("THEME", path.c_str(), file)) return false;
+  Bitmap bitmap(file);
+  if (bitmap.parseHeaders() != BmpReaderError::Ok) return false;
+
+  float scale = 1.0f;
+  if (bitmap.getWidth() > size) {
+    scale = std::min(scale, static_cast<float>(size) / static_cast<float>(bitmap.getWidth()));
+  }
+  if (bitmap.getHeight() > size) {
+    scale = std::min(scale, static_cast<float>(size) / static_cast<float>(bitmap.getHeight()));
+  }
+  const int drawnWidth = std::max(1, static_cast<int>(std::floor(bitmap.getWidth() * scale)));
+  const int drawnHeight = std::max(1, static_cast<int>(std::floor(bitmap.getHeight() * scale)));
+  renderer.drawBitmap(bitmap, x + (size - drawnWidth) / 2, y + (size - drawnHeight) / 2, drawnWidth, drawnHeight);
+  return true;
+}
+
 void LyraTheme::fillBatteryIcon(const GfxRenderer& renderer, Rect rect, uint16_t percentage) const {
   const bool charging = gpio.isUsbConnected();
 
@@ -105,14 +225,55 @@ void LyraTheme::fillBatteryIcon(const GfxRenderer& renderer, Rect rect, uint16_t
 }
 
 void LyraTheme::drawHeader(const GfxRenderer& renderer, Rect rect, const char* title, const char* subtitle) const {
+  if (header_ != nullptr && header_->enabled) {
+    renderer.fillRect(rect.x, rect.y, rect.width, rect.height, false);
+
+    const bool showBatteryPercentage =
+        SETTINGS.hideBatteryPercentage != CrossPointSettings::HIDE_BATTERY_PERCENTAGE::HIDE_ALWAYS;
+    const int batteryX = rect.x + rect.width - metrics().contentSidePadding - metrics().batteryWidth;
+    drawBatteryRight(renderer,
+                     Rect{batteryX, rect.y + header_->batteryOffsetY, metrics().batteryWidth, metrics().batteryHeight},
+                     showBatteryPercentage);
+
+    const auto style = header_->bold ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR;
+    if (title != nullptr) {
+      const int reserveRight = rect.width - batteryX + metrics().batteryWidth + metrics().contentSidePadding;
+      const int maxTitleWidth = std::max(0, rect.width - reserveRight * 2);
+      const auto truncatedTitle = renderer.truncatedText(header_->fontId, title, maxTitleWidth, style);
+      const int lineHeight = renderer.getLineHeight(header_->fontId);
+      const int titleY = rect.y + header_->titleOffsetY + std::max(0, (rect.height - lineHeight) / 2);
+      if (header_->centeredTitle) {
+        const int textWidth = renderer.getTextWidth(header_->fontId, truncatedTitle.c_str(), style);
+        renderer.drawText(header_->fontId, rect.x + (rect.width - textWidth) / 2, titleY, truncatedTitle.c_str(), true,
+                          style);
+      } else {
+        renderer.drawText(header_->fontId, rect.x + metrics().contentSidePadding, titleY, truncatedTitle.c_str(), true,
+                          style);
+      }
+    }
+
+    if (subtitle != nullptr && subtitle[0] != '\0') {
+      const auto truncatedSubtitle =
+          renderer.truncatedText(SMALL_FONT_ID, subtitle, rect.width - metrics().contentSidePadding * 2);
+      const int subtitleWidth = renderer.getTextWidth(SMALL_FONT_ID, truncatedSubtitle.c_str());
+      renderer.drawText(SMALL_FONT_ID, rect.x + rect.width - metrics().contentSidePadding - subtitleWidth,
+                        rect.y + rect.height - renderer.getLineHeight(SMALL_FONT_ID) - 4, truncatedSubtitle.c_str(),
+                        true);
+    }
+
+    if (header_->showDivider) {
+      renderer.drawLine(rect.x, rect.y + rect.height - 1, rect.x + rect.width - 1, rect.y + rect.height - 1, true);
+    }
+    return;
+  }
+
   renderer.fillRect(rect.x, rect.y, rect.width, rect.height, false);
 
   const bool showBatteryPercentage =
       SETTINGS.hideBatteryPercentage != CrossPointSettings::HIDE_BATTERY_PERCENTAGE::HIDE_ALWAYS;
   // Position icon at right edge, drawBatteryRight will place text to the left
-  const int batteryX = rect.x + rect.width - 12 - LyraMetrics::values.batteryWidth;
-  drawBatteryRight(renderer,
-                   Rect{batteryX, rect.y + 5, LyraMetrics::values.batteryWidth, LyraMetrics::values.batteryHeight},
+  const int batteryX = rect.x + rect.width - 12 - metrics().batteryWidth;
+  drawBatteryRight(renderer, Rect{batteryX, rect.y + 5, metrics().batteryWidth, metrics().batteryHeight},
                    showBatteryPercentage);
 
   int maxTitleWidth = title != nullptr ? renderer.getTextWidth(UI_12_FONT_ID, title, EpdFontFamily::BOLD) : 0;
@@ -120,7 +281,7 @@ void LyraTheme::drawHeader(const GfxRenderer& renderer, Rect rect, const char* t
       subtitle != nullptr ? renderer.getTextWidth(SMALL_FONT_ID, subtitle, EpdFontFamily::REGULAR) : 0;
 
   // Available space is the distance between the side paddings, and a with side padding between title and subtitle.
-  const int availableSpace = rect.width - LyraMetrics::values.contentSidePadding * 3;
+  const int availableSpace = rect.width - metrics().contentSidePadding * 3;
 
   if (maxTitleWidth + maxSubtitleWidth > availableSpace) {
     if ((maxTitleWidth > availableSpace / 2) && (maxSubtitleWidth > availableSpace / 2)) {
@@ -139,8 +300,10 @@ void LyraTheme::drawHeader(const GfxRenderer& renderer, Rect rect, const char* t
 
   if (title) {
     auto truncatedTitle = renderer.truncatedText(UI_12_FONT_ID, title, maxTitleWidth, EpdFontFamily::BOLD);
-    renderer.drawText(UI_12_FONT_ID, rect.x + LyraMetrics::values.contentSidePadding,
-                      rect.y + LyraMetrics::values.batteryBarHeight + 3, truncatedTitle.c_str(), true,
+    const int titleLineHeight = renderer.getLineHeight(UI_12_FONT_ID);
+    const int titleY =
+        std::min(rect.y + metrics().batteryBarHeight + 3, rect.y + std::max(0, rect.height - titleLineHeight - 6));
+    renderer.drawText(UI_12_FONT_ID, rect.x + metrics().contentSidePadding, titleY, truncatedTitle.c_str(), true,
                       EpdFontFamily::BOLD);
     renderer.drawLine(rect.x, rect.y + rect.height - 3, rect.x + rect.width - 1, rect.y + rect.height - 3, 3, true);
   }
@@ -148,26 +311,27 @@ void LyraTheme::drawHeader(const GfxRenderer& renderer, Rect rect, const char* t
   if (subtitle) {
     auto truncatedSubtitle = renderer.truncatedText(SMALL_FONT_ID, subtitle, maxSubtitleWidth, EpdFontFamily::REGULAR);
     int truncatedSubtitleWidth = renderer.getTextWidth(SMALL_FONT_ID, truncatedSubtitle.c_str());
-    renderer.drawText(SMALL_FONT_ID,
-                      rect.x + rect.width - LyraMetrics::values.contentSidePadding - truncatedSubtitleWidth,
-                      rect.y + 50, truncatedSubtitle.c_str(), true);
+    const int subtitleLineHeight = renderer.getLineHeight(SMALL_FONT_ID);
+    const int subtitleY = std::min(rect.y + 50, rect.y + std::max(0, rect.height - subtitleLineHeight - 6));
+    renderer.drawText(SMALL_FONT_ID, rect.x + rect.width - metrics().contentSidePadding - truncatedSubtitleWidth,
+                      subtitleY, truncatedSubtitle.c_str(), true);
   }
 }
 
 void LyraTheme::drawSubHeader(const GfxRenderer& renderer, Rect rect, const char* label, const char* rightLabel) const {
-  int currentX = rect.x + LyraMetrics::values.contentSidePadding;
-  int rightSpace = LyraMetrics::values.contentSidePadding;
+  int currentX = rect.x + metrics().contentSidePadding;
+  int rightSpace = metrics().contentSidePadding;
   if (rightLabel) {
     auto truncatedRightLabel =
         renderer.truncatedText(SMALL_FONT_ID, rightLabel, maxListValueWidth, EpdFontFamily::REGULAR);
     int rightLabelWidth = renderer.getTextWidth(SMALL_FONT_ID, truncatedRightLabel.c_str());
-    renderer.drawText(SMALL_FONT_ID, rect.x + rect.width - LyraMetrics::values.contentSidePadding - rightLabelWidth,
-                      rect.y + 7, truncatedRightLabel.c_str());
+    renderer.drawText(SMALL_FONT_ID, rect.x + rect.width - metrics().contentSidePadding - rightLabelWidth, rect.y + 7,
+                      truncatedRightLabel.c_str());
     rightSpace += rightLabelWidth + hPaddingInSelection;
   }
 
   auto truncatedLabel = renderer.truncatedText(
-      UI_10_FONT_ID, label, rect.width - LyraMetrics::values.contentSidePadding - rightSpace, EpdFontFamily::REGULAR);
+      UI_10_FONT_ID, label, rect.width - metrics().contentSidePadding - rightSpace, EpdFontFamily::REGULAR);
   renderer.drawText(UI_10_FONT_ID, currentX, rect.y + 6, truncatedLabel.c_str(), true, EpdFontFamily::REGULAR);
 
   renderer.drawLine(rect.x, rect.y + rect.height - 1, rect.x + rect.width - 1, rect.y + rect.height - 1, true);
@@ -175,7 +339,40 @@ void LyraTheme::drawSubHeader(const GfxRenderer& renderer, Rect rect, const char
 
 void LyraTheme::drawTabBar(const GfxRenderer& renderer, Rect rect, const std::vector<TabInfo>& tabs,
                            bool selected) const {
-  int currentX = rect.x + LyraMetrics::values.contentSidePadding;
+  if (tabBar_ != nullptr && tabBar_->enabled && tabBar_->equalWidth && !tabs.empty()) {
+    const int tabCount = static_cast<int>(tabs.size());
+    const int tabY = rect.y + 4;
+    const int tabHeight = rect.height - 12;
+    const auto style = tabBar_->bold ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR;
+    for (int i = 0; i < tabCount; ++i) {
+      const int slotX = rect.x + (i * rect.width) / tabCount;
+      const int nextSlotX = rect.x + ((i + 1) * rect.width) / tabCount;
+      const int slotWidth = nextSlotX - slotX;
+      const int inset = std::min(tabBar_->horizontalInset, slotWidth / 2);
+      const int tabX = slotX + inset;
+      const int tabWidth = std::max(0, slotWidth - inset * 2);
+      const auto& tab = tabs[i];
+      if (tab.selected && tabBar_->selectionStyle == ThemeMenuSelectionStyle::Fill) {
+        renderer.fillRoundedRect(tabX, tabY, tabWidth, tabHeight, tabBar_->selectedCornerRadius,
+                                 selected ? Color::Black : Color::LightGray);
+      }
+      const int textWidth = renderer.getTextWidth(tabBar_->fontId, tab.label, style);
+      const int textX = tabX + (tabWidth - textWidth) / 2;
+      const int textY = tabY + (tabHeight - renderer.getLineHeight(tabBar_->fontId)) / 2;
+      renderer.drawText(tabBar_->fontId, textX, textY, tab.label,
+                        !(tab.selected && selected && tabBar_->selectedTextInverted), style);
+      if (tab.selected && tabBar_->selectionStyle == ThemeMenuSelectionStyle::Underline) {
+        const int underlineY = std::min(rect.y + rect.height - 3, textY + renderer.getLineHeight(tabBar_->fontId) + 3);
+        renderer.drawLine(textX, underlineY, textX + textWidth - 1, underlineY, true);
+      }
+    }
+    if (tabBar_->drawDivider) {
+      renderer.drawLine(rect.x, rect.y + rect.height - 1, rect.x + rect.width - 1, rect.y + rect.height - 1, true);
+    }
+    return;
+  }
+
+  int currentX = rect.x + metrics().contentSidePadding;
 
   if (selected) {
     renderer.fillRectDither(rect.x, rect.y, rect.width, rect.height, Color::LightGray);
@@ -199,14 +396,14 @@ void LyraTheme::drawTabBar(const GfxRenderer& renderer, Rect rect, const std::ve
     renderer.drawText(UI_10_FONT_ID, currentX + hPaddingInSelection, rect.y + 6, tab.label, !(tab.selected && selected),
                       EpdFontFamily::REGULAR);
 
-    currentX += textWidth + LyraMetrics::values.tabSpacing + 2 * hPaddingInSelection;
+    currentX += textWidth + metrics().tabSpacing + 2 * hPaddingInSelection;
   }
 
   renderer.drawLine(rect.x, rect.y + rect.height - 1, rect.x + rect.width - 1, rect.y + rect.height - 1, true);
 }
 
 int LyraTheme::getListPageItems(int contentHeight, bool hasSubtitle) const {
-  int rowHeight = (hasSubtitle) ? LyraMetrics::values.listWithSubtitleRowHeight : LyraMetrics::values.listRowHeight;
+  int rowHeight = (hasSubtitle) ? metrics().listWithSubtitleRowHeight : metrics().listRowHeight;
   return contentHeight / rowHeight;
 }
 
@@ -216,8 +413,160 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
                          const std::function<UIIcon(int index)>& rowIcon,
                          const std::function<std::string(int index)>& rowValue, bool highlightValue,
                          const std::function<bool(int index)>& rowDimmed) const {
-  int rowHeight =
-      (rowSubtitle != nullptr) ? LyraMetrics::values.listWithSubtitleRowHeight : LyraMetrics::values.listRowHeight;
+  if (list_ != nullptr && list_->enabled) {
+    const ThemeListSpec& spec = *list_;
+    const bool hasSubtitle = rowSubtitle != nullptr;
+    int rowHeight = hasSubtitle ? metrics().listWithSubtitleRowHeight : metrics().listRowHeight;
+    if (hasSubtitle && spec.subtitleRowAutoHeight) {
+      rowHeight = spec.subtitleTopPadding + renderer.getLineHeight(spec.fontId) + spec.subtitleInterLineGap +
+                  renderer.getLineHeight(spec.subtitleFontId) + spec.subtitleBottomPadding;
+    }
+    const int rowStep = rowHeight + std::max(0, spec.rowGap);
+    const int pageItems = std::max(1, rect.height / std::max(1, rowStep));
+    const int totalPages = (itemCount + pageItems - 1) / pageItems;
+    const int contentWidth =
+        rect.width - (totalPages > 1 ? (metrics().scrollBarWidth + metrics().scrollBarRightOffset) : 1);
+
+    if (totalPages > 1) {
+      const int scrollAreaHeight = rect.height;
+      const int scrollBarHeight = std::max(metrics().scrollBarWidth, (scrollAreaHeight * pageItems) / itemCount);
+      const int currentPage = selectedIndex / pageItems;
+      const int scrollBarY = rect.y + ((scrollAreaHeight - scrollBarHeight) * currentPage) / (totalPages - 1);
+      const int scrollBarX = rect.x + rect.width - metrics().scrollBarRightOffset;
+      renderer.drawLine(scrollBarX, rect.y, scrollBarX, rect.y + scrollAreaHeight, true);
+      renderer.fillRect(scrollBarX - metrics().scrollBarWidth, scrollBarY, metrics().scrollBarWidth, scrollBarHeight,
+                        true);
+    }
+
+    if (selectedIndex >= 0 && !spec.rowBackgrounds) {
+      const int selectedY = rect.y + selectedIndex % pageItems * rowStep;
+      Rect selectionRect{rect.x + metrics().contentSidePadding + spec.selectionInsetX, selectedY + spec.selectionInsetY,
+                         contentWidth - metrics().contentSidePadding * 2 - spec.selectionInsetX * 2,
+                         rowHeight - spec.selectionInsetY * 2};
+      if (spec.selectionStyle == ThemeMenuSelectionStyle::Fill && spec.selectionFill) {
+        renderer.fillRoundedRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height,
+                                 spec.selectionCornerRadius, Color::LightGray);
+      }
+      if (spec.selectionStyle == ThemeMenuSelectionStyle::Outline || spec.selectionOutline) {
+        renderer.drawRoundedRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height, 1,
+                                 spec.selectionCornerRadius, true);
+      }
+    }
+
+    const int rowX = rect.x + spec.rowSidePadding;
+    const int rowWidth = contentWidth - spec.rowSidePadding * 2;
+    int textX =
+        spec.rowBackgrounds ? rowX + spec.textInsetX : rect.x + metrics().contentSidePadding + hPaddingInSelection;
+    int textWidth = spec.rowBackgrounds ? rowWidth - spec.textInsetX * 2
+                                        : contentWidth - metrics().contentSidePadding * 2 - hPaddingInSelection * 2;
+    const int iconSize =
+        spec.iconSize > 0 ? spec.iconSize : ((rowSubtitle != nullptr) ? mainMenuIconSize : listIconSize);
+    if (rowIcon != nullptr && spec.showIcons) {
+      textX += iconSize + spec.textGap;
+      textWidth -= iconSize + spec.textGap;
+    }
+
+    const auto pageStartIndex = selectedIndex / pageItems * pageItems;
+    const auto titleStyle = spec.bold ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR;
+    for (int i = pageStartIndex; i < itemCount && i < pageStartIndex + pageItems; i++) {
+      const int itemY = rect.y + (i % pageItems) * rowStep;
+      const bool selected = i == selectedIndex;
+      int rowTextWidth = textWidth;
+      if (spec.rowBackgrounds) {
+        renderer.fillRoundedRect(rowX, itemY, rowWidth, rowHeight, spec.selectionCornerRadius,
+                                 selected ? Color::Black : Color::White);
+      }
+
+      int valueWidth = 0;
+      std::string valueText;
+      if (rowValue != nullptr) {
+        valueText = rowValue(i);
+        valueText = renderer.truncatedText(spec.valueFontId, valueText.c_str(), maxListValueWidth);
+        valueWidth = renderer.getTextWidth(spec.valueFontId, valueText.c_str()) + hPaddingInSelection;
+        rowTextWidth -= valueWidth;
+      }
+
+      const auto itemName = rowTitle(i);
+      const auto item = renderer.truncatedText(spec.fontId, itemName.c_str(), rowTextWidth, titleStyle);
+      bool centerSingleLine = spec.centerSingleLineRows && rowSubtitle == nullptr;
+      std::string subtitleText;
+      if (rowSubtitle != nullptr) {
+        subtitleText = rowSubtitle(i);
+        centerSingleLine = spec.centerSingleLineRows && subtitleText.empty();
+      }
+      const int titleY = centerSingleLine
+                             ? itemY + (rowHeight - renderer.getLineHeight(spec.fontId)) / 2
+                             : itemY + (spec.subtitleRowAutoHeight && rowSubtitle != nullptr ? spec.subtitleTopPadding
+                                                                                             : spec.titleOffsetY);
+      renderer.drawText(spec.fontId, textX, titleY, item.c_str(), !(selected && spec.selectedTextInverted), titleStyle);
+      const bool underlineTitle =
+          selected && spec.selectionStyle == ThemeMenuSelectionStyle::Underline && subtitleText.empty();
+      if (underlineTitle) {
+        const int underlineWidth = renderer.getTextWidth(spec.fontId, item.c_str(), titleStyle);
+        const int underlineY = std::min(itemY + rowHeight - 4, titleY + renderer.getLineHeight(spec.fontId) + 2);
+        renderer.drawLine(textX, underlineY, textX + underlineWidth - 1, underlineY, 1, true);
+      }
+
+      if (rowDimmed && rowDimmed(i) && !selected) {
+        const int titleWidth = renderer.getTextWidth(spec.fontId, item.c_str(), titleStyle);
+        const int lineH = renderer.getLineHeight(spec.fontId);
+        for (int py = titleY; py < titleY + lineH; py++)
+          for (int px = textX; px < textX + titleWidth; px++)
+            if ((px + py) % 2 == 0) renderer.drawPixel(px, py, false);
+      }
+
+      if (rowIcon != nullptr && spec.showIcons) {
+        const UIIcon icon = rowIcon(i);
+        const int titleLineHeight = renderer.getLineHeight(spec.fontId);
+        const int textBlockTop = spec.titleOffsetY;
+        const int textBlockBottom = rowSubtitle != nullptr
+                                        ? spec.subtitleOffsetY + renderer.getLineHeight(spec.subtitleFontId)
+                                        : spec.titleOffsetY + titleLineHeight;
+        const int iconY = itemY + (textBlockTop + textBlockBottom - iconSize) / 2 + spec.iconOffsetY;
+        const int iconX =
+            spec.rowBackgrounds ? rowX + spec.textInsetX : rect.x + metrics().contentSidePadding + hPaddingInSelection;
+        if (!drawThemeIcon(renderer, icon, iconX, iconY, iconSize)) {
+          const uint8_t* iconBitmap = iconForName(icon, iconSize);
+          if (iconBitmap != nullptr) {
+            renderer.drawIcon(iconBitmap, iconX, iconY, iconSize, iconSize);
+          }
+        }
+      }
+
+      if (rowSubtitle != nullptr && !subtitleText.empty()) {
+        const auto subtitle = renderer.truncatedText(spec.subtitleFontId, subtitleText.c_str(), rowTextWidth);
+        const int subtitleY = spec.subtitleRowAutoHeight
+                                  ? titleY + renderer.getLineHeight(spec.fontId) + spec.subtitleInterLineGap
+                                  : itemY + spec.subtitleOffsetY;
+        renderer.drawText(spec.subtitleFontId, textX, subtitleY, subtitle.c_str(),
+                          !(selected && spec.selectedTextInverted));
+        if (selected && spec.selectionStyle == ThemeMenuSelectionStyle::Underline) {
+          const int underlineWidth = renderer.getTextWidth(spec.subtitleFontId, subtitle.c_str());
+          const int underlineY =
+              std::min(itemY + rowHeight - 4, subtitleY + renderer.getLineHeight(spec.subtitleFontId) + 2);
+          renderer.drawLine(textX, underlineY, textX + underlineWidth - 1, underlineY, 1, true);
+        }
+      }
+
+      if (!valueText.empty()) {
+        if (selected && highlightValue) {
+          renderer.fillRoundedRect(
+              rect.x + contentWidth - metrics().contentSidePadding - hPaddingInSelection - valueWidth, itemY,
+              valueWidth + hPaddingInSelection, rowHeight, spec.selectionCornerRadius, Color::Black);
+        }
+        const int valueY = (centerSingleLine || spec.centerValueVertically)
+                               ? itemY + (rowHeight - renderer.getLineHeight(spec.valueFontId)) / 2
+                               : itemY + (rowSubtitle != nullptr ? spec.subtitleValueOffsetY : spec.valueOffsetY);
+        const int valueX = spec.rowBackgrounds ? rowX + rowWidth - spec.textInsetX - valueWidth
+                                               : rect.x + contentWidth - metrics().contentSidePadding - valueWidth;
+        renderer.drawText(spec.valueFontId, valueX, valueY, valueText.c_str(),
+                          !(selected && (highlightValue || (spec.rowBackgrounds && spec.selectedTextInverted))));
+      }
+    }
+    return;
+  }
+
+  int rowHeight = (rowSubtitle != nullptr) ? metrics().listWithSubtitleRowHeight : metrics().listRowHeight;
   int pageItems = rect.height / rowHeight;
 
   const int totalPages = (itemCount + pageItems - 1) / pageItems;
@@ -228,24 +577,22 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
     const int scrollBarHeight = (scrollAreaHeight * pageItems) / itemCount;
     const int currentPage = selectedIndex / pageItems;
     const int scrollBarY = rect.y + ((scrollAreaHeight - scrollBarHeight) * currentPage) / (totalPages - 1);
-    const int scrollBarX = rect.x + rect.width - LyraMetrics::values.scrollBarRightOffset;
+    const int scrollBarX = rect.x + rect.width - metrics().scrollBarRightOffset;
     renderer.drawLine(scrollBarX, rect.y, scrollBarX, rect.y + scrollAreaHeight, true);
-    renderer.fillRect(scrollBarX - LyraMetrics::values.scrollBarWidth, scrollBarY, LyraMetrics::values.scrollBarWidth,
-                      scrollBarHeight, true);
+    renderer.fillRect(scrollBarX - metrics().scrollBarWidth, scrollBarY, metrics().scrollBarWidth, scrollBarHeight,
+                      true);
   }
 
   // Draw selection
-  int contentWidth =
-      rect.width -
-      (totalPages > 1 ? (LyraMetrics::values.scrollBarWidth + LyraMetrics::values.scrollBarRightOffset) : 1);
+  int contentWidth = rect.width - (totalPages > 1 ? (metrics().scrollBarWidth + metrics().scrollBarRightOffset) : 1);
   if (selectedIndex >= 0) {
-    renderer.fillRoundedRect(
-        rect.x + LyraMetrics::values.contentSidePadding, rect.y + selectedIndex % pageItems * rowHeight,
-        contentWidth - LyraMetrics::values.contentSidePadding * 2, rowHeight, cornerRadius, Color::LightGray);
+    renderer.fillRoundedRect(rect.x + metrics().contentSidePadding, rect.y + selectedIndex % pageItems * rowHeight,
+                             contentWidth - metrics().contentSidePadding * 2, rowHeight, cornerRadius,
+                             Color::LightGray);
   }
 
-  int textX = rect.x + LyraMetrics::values.contentSidePadding + hPaddingInSelection;
-  int textWidth = contentWidth - LyraMetrics::values.contentSidePadding * 2 - hPaddingInSelection * 2;
+  int textX = rect.x + metrics().contentSidePadding + hPaddingInSelection;
+  int textWidth = contentWidth - metrics().contentSidePadding * 2 - hPaddingInSelection * 2;
   int iconSize;
   if (rowIcon != nullptr) {
     iconSize = (rowSubtitle != nullptr) ? mainMenuIconSize : listIconSize;
@@ -255,7 +602,6 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
 
   // Draw all items
   const auto pageStartIndex = selectedIndex / pageItems * pageItems;
-  int iconY = (rowSubtitle != nullptr) ? 16 : 10;
   for (int i = pageStartIndex; i < itemCount && i < pageStartIndex + pageItems; i++) {
     const int itemY = rect.y + (i % pageItems) * rowHeight;
     int rowTextWidth = textWidth;
@@ -285,10 +631,18 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
 
     if (rowIcon != nullptr) {
       UIIcon icon = rowIcon(i);
-      const uint8_t* iconBitmap = iconForName(icon, iconSize);
-      if (iconBitmap != nullptr) {
-        renderer.drawIcon(iconBitmap, rect.x + LyraMetrics::values.contentSidePadding + hPaddingInSelection,
-                          itemY + iconY, iconSize, iconSize);
+      const int titleLineHeight = renderer.getLineHeight(UI_10_FONT_ID);
+      const int textBlockTop = 7;
+      const int textBlockBottom =
+          rowSubtitle != nullptr ? 30 + renderer.getLineHeight(SMALL_FONT_ID) : textBlockTop + titleLineHeight;
+      const int iconY = itemY + (textBlockTop + textBlockBottom - iconSize) / 2;
+      if (!drawThemeIcon(renderer, icon, rect.x + metrics().contentSidePadding + hPaddingInSelection, iconY,
+                         iconSize)) {
+        const uint8_t* iconBitmap = iconForName(icon, iconSize);
+        if (iconBitmap != nullptr) {
+          renderer.drawIcon(iconBitmap, rect.x + metrics().contentSidePadding + hPaddingInSelection, iconY, iconSize,
+                            iconSize);
+        }
       }
     }
 
@@ -303,7 +657,7 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
     if (!valueText.empty()) {
       if (i == selectedIndex && highlightValue) {
         renderer.fillRoundedRect(
-            rect.x + contentWidth - LyraMetrics::values.contentSidePadding - hPaddingInSelection - valueWidth, itemY,
+            rect.x + contentWidth - metrics().contentSidePadding - hPaddingInSelection - valueWidth, itemY,
             valueWidth + hPaddingInSelection, rowHeight, cornerRadius, Color::Black);
       }
 
@@ -311,8 +665,8 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
       if (rowSubtitle != nullptr) {
         valueY = itemY + 16;
       }
-      renderer.drawText(UI_10_FONT_ID, rect.x + contentWidth - LyraMetrics::values.contentSidePadding - valueWidth,
-                        valueY, valueText.c_str(), !(i == selectedIndex && highlightValue));
+      renderer.drawText(UI_10_FONT_ID, rect.x + contentWidth - metrics().contentSidePadding - valueWidth, valueY,
+                        valueText.c_str(), !(i == selectedIndex && highlightValue));
     }
   }
 }
@@ -323,11 +677,56 @@ void LyraTheme::drawButtonHints(GfxRenderer& renderer, const char* btn1, const c
   renderer.setOrientation(GfxRenderer::Orientation::Portrait);
 
   const int pageHeight = renderer.getScreenHeight();
-  constexpr int buttonWidth = 80;
-  constexpr int smallButtonHeight = 15;
-  constexpr int buttonHeight = LyraMetrics::values.buttonHintsHeight;
-  constexpr int buttonY = LyraMetrics::values.buttonHintsHeight;  // Distance from bottom
-  constexpr int textYOffset = 7;                                  // Distance from top of button to text baseline
+  const int pageWidth = renderer.getScreenWidth();
+  const int buttonWidth = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->buttonWidth : 80;
+  const int smallButtonHeight = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->smallButtonHeight : 15;
+  const int buttonHeight = metrics().buttonHintsHeight;
+  const int buttonY = metrics().buttonHintsHeight;  // Distance from bottom
+  const int textYOffset = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->textOffsetY : 7;
+  const int buttonCornerRadius =
+      buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->cornerRadius : cornerRadius;
+  const int fontId = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->fontId : SMALL_FONT_ID;
+  const auto style = buttonHints_ != nullptr && buttonHints_->enabled && buttonHints_->bold ? EpdFontFamily::BOLD
+                                                                                            : EpdFontFamily::REGULAR;
+  const ThemeButtonHintsStyle hintStyle =
+      buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->style : ThemeButtonHintsStyle::Buttons;
+  const bool shapes = hintStyle == ThemeButtonHintsStyle::Shapes;
+  const int shapeSize = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->shapeSize : 18;
+  if (hintStyle == ThemeButtonHintsStyle::Groups) {
+    const int sidePadding = buttonHints_->sidePadding;
+    const int groupGap = buttonHints_->groupGap;
+    const int bottomMargin = buttonHints_->bottomMargin;
+    const int innerPadding = buttonHints_->innerPadding;
+    const int hintHeight = std::max(1, metrics().buttonHintsHeight - bottomMargin);
+    const int groupWidth = std::max(1, (pageWidth - sidePadding * 2 - groupGap) / 2);
+    const int outlineY = pageHeight - hintHeight - bottomMargin;
+    const int leftGroupX = sidePadding;
+    const int rightGroupX = leftGroupX + groupWidth + groupGap;
+    const char* labels[] = {btn1, btn2, btn3, btn4};
+    const int selectWidth = labels[1] != nullptr ? renderer.getTextWidth(fontId, labels[1], style) : 0;
+    const int downWidth = labels[3] != nullptr ? renderer.getTextWidth(fontId, labels[3], style) : 0;
+
+    renderer.fillRect(leftGroupX, outlineY, groupWidth, hintHeight, false);
+    renderer.fillRect(rightGroupX, outlineY, groupWidth, hintHeight, false);
+    renderer.drawRoundedRect(leftGroupX, outlineY, groupWidth, hintHeight, 2, buttonCornerRadius, true);
+    renderer.drawRoundedRect(rightGroupX, outlineY, groupWidth, hintHeight, 2, buttonCornerRadius, true);
+
+    const int textY = outlineY + (hintHeight - renderer.getLineHeight(fontId)) / 2;
+    if (labels[0] != nullptr && labels[0][0] != '\0') {
+      renderer.drawText(fontId, leftGroupX + innerPadding, textY, labels[0], true, style);
+    }
+    if (labels[1] != nullptr && labels[1][0] != '\0') {
+      renderer.drawText(fontId, leftGroupX + groupWidth - innerPadding - selectWidth, textY, labels[1], true, style);
+    }
+    if (labels[2] != nullptr && labels[2][0] != '\0') {
+      renderer.drawText(fontId, rightGroupX + innerPadding, textY, labels[2], true, style);
+    }
+    if (labels[3] != nullptr && labels[3][0] != '\0') {
+      renderer.drawText(fontId, rightGroupX + groupWidth - innerPadding - downWidth, textY, labels[3], true, style);
+    }
+    renderer.setOrientation(orig_orientation);
+    return;
+  }
   // X3 has wider screen in portrait (528 vs 480), use more spacing
   constexpr int x4ButtonPositions[] = {58, 146, 254, 342};
   constexpr int x3ButtonPositions[] = {65, 157, 291, 383};
@@ -337,19 +736,30 @@ void LyraTheme::drawButtonHints(GfxRenderer& renderer, const char* btn1, const c
   for (int i = 0; i < 4; i++) {
     const int x = buttonPositions[i];
     if (labels[i] != nullptr && labels[i][0] != '\0') {
-      // Draw the filled background and border for a FULL-sized button
-      renderer.fillRoundedRect(x, pageHeight - buttonY, buttonWidth, buttonHeight, cornerRadius, Color::White);
-      renderer.drawRoundedRect(x, pageHeight - buttonY, buttonWidth, buttonHeight, 1, cornerRadius, true, true, false,
-                               false, true);
-      const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, labels[i]);
+      if (shapes) {
+        drawButtonHintShape(renderer, shapeForButtonHintLabel(labels[i]), x + buttonWidth / 2,
+                            pageHeight - buttonY + buttonHeight / 2, shapeSize);
+        continue;
+      }
+      if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->fill) {
+        renderer.fillRoundedRect(x, pageHeight - buttonY, buttonWidth, buttonHeight, buttonCornerRadius, Color::White);
+      }
+      if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->outline) {
+        renderer.drawRoundedRect(x, pageHeight - buttonY, buttonWidth, buttonHeight, 1, buttonCornerRadius, true, true,
+                                 false, false, true);
+      }
+      const int textWidth = renderer.getTextWidth(fontId, labels[i], style);
       const int textX = x + (buttonWidth - 1 - textWidth) / 2;
-      renderer.drawText(SMALL_FONT_ID, textX, pageHeight - buttonY + textYOffset, labels[i]);
-    } else {
-      // Draw the filled background and border for a SMALL-sized button
-      renderer.fillRoundedRect(x, pageHeight - smallButtonHeight, buttonWidth, smallButtonHeight, cornerRadius,
-                               Color::White);
-      renderer.drawRoundedRect(x, pageHeight - smallButtonHeight, buttonWidth, smallButtonHeight, 1, cornerRadius, true,
-                               true, false, false, true);
+      renderer.drawText(fontId, textX, pageHeight - buttonY + textYOffset, labels[i], true, style);
+    } else if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->drawEmpty) {
+      if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->fill) {
+        renderer.fillRoundedRect(x, pageHeight - smallButtonHeight, buttonWidth, smallButtonHeight, buttonCornerRadius,
+                                 Color::White);
+      }
+      if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->outline) {
+        renderer.drawRoundedRect(x, pageHeight - smallButtonHeight, buttonWidth, smallButtonHeight, 1,
+                                 buttonCornerRadius, true, true, false, false, true);
+      }
     }
   }
 
@@ -358,62 +768,86 @@ void LyraTheme::drawButtonHints(GfxRenderer& renderer, const char* btn1, const c
 
 void LyraTheme::drawSideButtonHints(const GfxRenderer& renderer, const char* topBtn, const char* bottomBtn) const {
   const int screenWidth = renderer.getScreenWidth();
-  constexpr int buttonWidth = LyraMetrics::values.sideButtonHintsWidth;  // Width on screen (height when rotated)
-  constexpr int buttonHeight = 78;                                       // Height on screen (width when rotated)
+  const int buttonWidth = metrics().sideButtonHintsWidth;  // Width on screen (height when rotated)
+  constexpr int buttonHeight = 78;                         // Height on screen (width when rotated)
   constexpr int buttonMargin = 0;
+  const int buttonCornerRadius =
+      buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->cornerRadius : cornerRadius;
+  const int fontId = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->fontId : SMALL_FONT_ID;
+  const auto style = buttonHints_ != nullptr && buttonHints_->enabled && buttonHints_->bold ? EpdFontFamily::BOLD
+                                                                                            : EpdFontFamily::REGULAR;
+  const ThemeButtonHintsStyle hintStyle =
+      buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->style : ThemeButtonHintsStyle::Buttons;
+  const bool shapes = hintStyle == ThemeButtonHintsStyle::Shapes;
+  const int shapeSize = buttonHints_ != nullptr && buttonHints_->enabled ? buttonHints_->shapeSize : 18;
+
+  auto drawSideHint = [&](const int x, const int y, const char* label, const bool leftOpen, const bool rightOpen) {
+    if (label == nullptr || label[0] == '\0') return;
+
+    if (shapes) {
+      ButtonHintShape shape = shapeForButtonHintLabel(label);
+      if (strcmp(label, ">") == 0 || matchesLabel(label, tr(STR_DIR_RIGHT))) {
+        shape = ButtonHintShape::Up;
+      } else if (strcmp(label, "<") == 0 || matchesLabel(label, tr(STR_DIR_LEFT))) {
+        shape = ButtonHintShape::Down;
+      }
+      drawButtonHintShape(renderer, shape, x + buttonWidth / 2, y + buttonHeight / 2, shapeSize);
+      return;
+    }
+
+    if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->fill) {
+      renderer.fillRoundedRect(x, y, buttonWidth, buttonHeight, buttonCornerRadius, Color::White);
+    }
+    if (buttonHints_ == nullptr || !buttonHints_->enabled || buttonHints_->outline) {
+      renderer.drawRoundedRect(x, y, buttonWidth, buttonHeight, 1, buttonCornerRadius, leftOpen, rightOpen, leftOpen,
+                               rightOpen, true);
+    }
+    const int textWidth = renderer.getTextWidth(fontId, label, style);
+    const int textHeight = renderer.getTextHeight(fontId);
+    const int textX = x + (buttonWidth - textHeight) / 2;
+    renderer.drawTextRotated90CW(fontId, textX, y + (buttonHeight + textWidth) / 2, label, true, style);
+  };
 
   if (gpio.deviceIsX3()) {
     // X3 layout: Up on left side, Down on right side, positioned higher
     constexpr int x3ButtonY = 155;
 
-    if (topBtn != nullptr && topBtn[0] != '\0') {
-      renderer.drawRoundedRect(buttonMargin, x3ButtonY, buttonWidth, buttonHeight, 1, cornerRadius, false, true, false,
-                               true, true);
-      const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, topBtn);
-      renderer.drawTextRotated90CW(SMALL_FONT_ID, buttonMargin, x3ButtonY + (buttonHeight + textWidth) / 2, topBtn);
-    }
-
-    if (bottomBtn != nullptr && bottomBtn[0] != '\0') {
-      const int rightX = screenWidth - buttonWidth;
-      renderer.drawRoundedRect(rightX, x3ButtonY, buttonWidth, buttonHeight, 1, cornerRadius, true, false, true, false,
-                               true);
-      const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, bottomBtn);
-      renderer.drawTextRotated90CW(SMALL_FONT_ID, rightX, x3ButtonY + (buttonHeight + textWidth) / 2, bottomBtn);
-    }
+    drawSideHint(buttonMargin, x3ButtonY, topBtn, false, true);
+    drawSideHint(screenWidth - buttonWidth, x3ButtonY, bottomBtn, true, false);
   } else {
     // X4 layout: Both buttons stacked on right side
     const char* labels[] = {topBtn, bottomBtn};
     const int x = screenWidth - buttonWidth;
 
-    if (topBtn != nullptr && topBtn[0] != '\0') {
-      renderer.drawRoundedRect(x, topHintButtonY, buttonWidth, buttonHeight, 1, cornerRadius, true, false, true, false,
-                               true);
-    }
-
-    if (bottomBtn != nullptr && bottomBtn[0] != '\0') {
-      renderer.drawRoundedRect(x, topHintButtonY + buttonHeight + 5, buttonWidth, buttonHeight, 1, cornerRadius, true,
-                               false, true, false, true);
-    }
-
     for (int i = 0; i < 2; i++) {
-      if (labels[i] != nullptr && labels[i][0] != '\0') {
-        const int y = topHintButtonY + (i * buttonHeight) + 5;
-        const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, labels[i]);
-        renderer.drawTextRotated90CW(SMALL_FONT_ID, x, y + (buttonHeight + textWidth) / 2, labels[i]);
-      }
+      const int y = topHintButtonY + (i * buttonHeight) + 5;
+      drawSideHint(x, y, labels[i], true, false);
     }
   }
 }
 
 void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                                    const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
-                                    bool& bufferRestored, std::function<bool()> storeCoverBuffer) const {
-  const int tileWidth = rect.width - 2 * LyraMetrics::values.contentSidePadding;
+                                    const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                    bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                                    bool coverStripSelected) const {
+  if (homeRecents_ != nullptr && homeRecents_->type == ThemeHomeRecentsType::CoverStrip) {
+    drawCoverStripRecents(renderer, rect, recentBooks, coverSelectorIndex, coverRendered, coverBufferStored,
+                          bufferRestored, storeCoverBuffer, coverStripSelected);
+    return;
+  }
+  if (homeRecents_ != nullptr && homeRecents_->type == ThemeHomeRecentsType::None) {
+    coverBufferStored = false;
+    coverRendered = false;
+    bufferRestored = false;
+    return;
+  }
+
+  const int tileWidth = rect.width - 2 * metrics().contentSidePadding;
   const int tileHeight = rect.height;
   const int tileY = rect.y;
   const bool hasContinueReading = !recentBooks.empty();
   if (coverWidth == 0) {
-    coverWidth = LyraMetrics::values.homeCoverHeight * 0.6;
+    coverWidth = metrics().homeCoverHeight * 0.6;
   }
 
   // Draw book card regardless, fill with message based on `hasContinueReading`
@@ -421,14 +855,18 @@ void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std:
   // Only load from SD on first render, then use stored buffer
   if (hasContinueReading) {
     RecentBook book = recentBooks[0];
+    int tileX = metrics().contentSidePadding;
+    if (coverRendered && !bufferRestored) {
+      coverRendered = false;
+    }
     if (!coverRendered) {
       std::string coverPath = book.coverBmpPath;
       bool hasCover = true;
-      int tileX = LyraMetrics::values.contentSidePadding;
+      renderer.fillRect(tileX, tileY, tileWidth, tileHeight, false);
       if (coverPath.empty()) {
         hasCover = false;
       } else {
-        const std::string coverBmpPath = UITheme::getCoverThumbPath(coverPath, LyraMetrics::values.homeCoverHeight);
+        const std::string coverBmpPath = UITheme::getCoverThumbPath(coverPath, metrics().homeCoverHeight);
 
         // First time: load cover from SD and render
         HalFile file;
@@ -437,23 +875,24 @@ void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std:
           if (bitmap.parseHeaders() == BmpReaderError::Ok) {
             coverWidth = bitmap.getWidth();
             renderer.drawBitmap(bitmap, tileX + hPaddingInSelection, tileY + hPaddingInSelection, coverWidth,
-                                LyraMetrics::values.homeCoverHeight);
+                                metrics().homeCoverHeight);
           } else {
             hasCover = false;
           }
           file.close();
+        } else {
+          hasCover = false;
         }
       }
 
       // Draw either way
-      renderer.drawRect(tileX + hPaddingInSelection, tileY + hPaddingInSelection, coverWidth,
-                        LyraMetrics::values.homeCoverHeight, true);
+      renderer.drawRect(tileX + hPaddingInSelection, tileY + hPaddingInSelection, coverWidth, metrics().homeCoverHeight,
+                        true);
 
       if (!hasCover) {
         // Render empty cover
-        renderer.fillRect(tileX + hPaddingInSelection,
-                          tileY + hPaddingInSelection + (LyraMetrics::values.homeCoverHeight / 3), coverWidth,
-                          2 * LyraMetrics::values.homeCoverHeight / 3, true);
+        renderer.fillRect(tileX + hPaddingInSelection, tileY + hPaddingInSelection + (metrics().homeCoverHeight / 3),
+                          coverWidth, 2 * metrics().homeCoverHeight / 3, true);
         renderer.drawIcon(CoverIcon, tileX + hPaddingInSelection + 24, tileY + hPaddingInSelection + 24, 32, 32);
       }
 
@@ -461,21 +900,20 @@ void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std:
       coverRendered = coverBufferStored;  // Only consider it rendered if we successfully stored the buffer
     }
 
-    bool bookSelected = (selectorIndex == 0);
+    bool bookSelected = coverStripSelected;
 
-    int tileX = LyraMetrics::values.contentSidePadding;
-    int textWidth = tileWidth - 2 * hPaddingInSelection - LyraMetrics::values.verticalSpacing - coverWidth;
+    int textWidth = tileWidth - 2 * hPaddingInSelection - metrics().verticalSpacing - coverWidth;
 
     if (bookSelected) {
       // Draw selection box
       renderer.fillRoundedRect(tileX, tileY, tileWidth, hPaddingInSelection, cornerRadius, true, true, false, false,
                                Color::LightGray);
-      renderer.fillRectDither(tileX, tileY + hPaddingInSelection, hPaddingInSelection,
-                              LyraMetrics::values.homeCoverHeight, Color::LightGray);
-      renderer.fillRectDither(tileX + hPaddingInSelection + coverWidth, tileY + hPaddingInSelection,
-                              tileWidth - hPaddingInSelection - coverWidth, LyraMetrics::values.homeCoverHeight,
+      renderer.fillRectDither(tileX, tileY + hPaddingInSelection, hPaddingInSelection, metrics().homeCoverHeight,
                               Color::LightGray);
-      renderer.fillRoundedRect(tileX, tileY + LyraMetrics::values.homeCoverHeight + hPaddingInSelection, tileWidth,
+      renderer.fillRectDither(tileX + hPaddingInSelection + coverWidth, tileY + hPaddingInSelection,
+                              tileWidth - hPaddingInSelection - coverWidth, metrics().homeCoverHeight,
+                              Color::LightGray);
+      renderer.fillRoundedRect(tileX, tileY + metrics().homeCoverHeight + hPaddingInSelection, tileWidth,
                                hPaddingInSelection, cornerRadius, false, false, true, true, Color::LightGray);
     }
 
@@ -487,7 +925,7 @@ void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std:
     const int authorHeight = book.author.empty() ? 0 : (renderer.getLineHeight(UI_10_FONT_ID) * 3 / 2);
     const int totalBlockHeight = titleBlockHeight + authorHeight;
     int titleY = tileY + tileHeight / 2 - totalBlockHeight / 2;
-    const int textX = tileX + hPaddingInSelection + coverWidth + LyraMetrics::values.verticalSpacing;
+    const int textX = tileX + hPaddingInSelection + coverWidth + metrics().verticalSpacing;
     for (const auto& line : titleLines) {
       renderer.drawText(UI_12_FONT_ID, textX, titleY, line.c_str(), true, EpdFontFamily::BOLD);
       titleY += titleLineHeight;
@@ -501,6 +939,167 @@ void LyraTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std:
   }
 }
 
+void LyraTheme::drawCoverStripRecents(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
+                                      const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                      bool bufferRestored, std::function<bool()> storeCoverBuffer,
+                                      bool coverStripSelected) const {
+  if (bufferRestored && coverRendered) {
+    return;
+  }
+
+  if (recentBooks.empty()) {
+    drawEmptyRecents(renderer, rect);
+    coverBufferStored = false;
+    coverRendered = false;
+    return;
+  }
+
+  const ThemeHomeRecentsSpec& spec = *homeRecents_;
+  if (spec.slots.empty()) {
+    coverBufferStored = false;
+    coverRendered = false;
+    return;
+  }
+
+  const int bookCount = static_cast<int>(recentBooks.size());
+  const int selected = selectorIndex >= 0 && selectorIndex < bookCount ? selectorIndex : 0;
+  const auto& m = metrics();
+
+  if (spec.drawPanel) {
+    const int inset = std::max(0, spec.panelInsetX);
+    renderer.fillRoundedRect(rect.x + inset, rect.y, std::max(0, rect.width - inset * 2), rect.height,
+                             spec.panelCornerRadius, Color::LightGray);
+  }
+
+  auto resolveBookIndex = [&](const ThemeCoverSlotSpec& slot) {
+    switch (slot.book) {
+      case ThemeBookRef::Previous:
+        if (bookCount <= 1) return -1;
+        return spec.wrap ? (selected + bookCount - 1) % bookCount : selected - 1;
+      case ThemeBookRef::Next:
+        if (bookCount <= 1) return -1;
+        return spec.wrap ? (selected + 1) % bookCount : selected + 1;
+      case ThemeBookRef::Index:
+        return slot.bookIndex >= 0 && slot.bookIndex < bookCount ? slot.bookIndex : -1;
+      case ThemeBookRef::Selected:
+      default:
+        return selected;
+    }
+  };
+
+  auto drawCover = [&](int bookIndex, int x, int y, int w, int h, bool selectedCover) {
+    const int inactiveWidth =
+        spec.inactiveSelectionLineWidth > 0 ? spec.inactiveSelectionLineWidth : spec.selectionLineWidth;
+    const int lineWidth = selectedCover ? std::max(1, coverStripSelected ? spec.selectionLineWidth : inactiveWidth) : 0;
+    const int clearPad = selectedCover ? 6 + std::max(0, lineWidth - 1) : 0;
+    renderer.fillRect(x - clearPad, y - clearPad, w + clearPad * 2, h + clearPad * 2, false);
+
+    bool hasCover = bookIndex >= 0 && bookIndex < bookCount && !recentBooks[bookIndex].coverBmpPath.empty();
+    if (hasCover) {
+      auto drawThumb = [&](int thumbHeight) {
+        const std::string coverBmpPath = UITheme::getCoverThumbPath(recentBooks[bookIndex].coverBmpPath, thumbHeight);
+        HalFile file;
+        if (!Storage.openFileForRead("HOME", coverBmpPath, file)) return false;
+        Bitmap bitmap(file);
+        if (bitmap.parseHeaders() == BmpReaderError::Ok) {
+          float cropX = 0.0f;
+          float cropY = 0.0f;
+          const float bitmapAspect = static_cast<float>(bitmap.getWidth()) / static_cast<float>(bitmap.getHeight());
+          const float targetAspect = static_cast<float>(w) / static_cast<float>(h);
+          if (bitmapAspect > targetAspect) {
+            cropX = std::max(0.0f, 1.0f - targetAspect / bitmapAspect);
+          } else if (bitmapAspect < targetAspect) {
+            cropY = std::max(0.0f, 1.0f - bitmapAspect / targetAspect);
+          }
+          renderer.drawBitmap(bitmap, x, y, w, h, cropX, cropY);
+          return true;
+        } else {
+          return false;
+        }
+      };
+
+      bool drawn = drawThumb(h);
+      if (!drawn && h != m.homeCoverHeight) {
+        drawn = drawThumb(m.homeCoverHeight);
+      }
+      if (!drawn) {
+        hasCover = false;
+      }
+    }
+
+    if (!hasCover) {
+      renderer.drawRect(x, y, w, h, true);
+      renderer.fillRect(x, y + h / 3, w, 2 * h / 3, true);
+      renderer.drawIcon(CoverIcon, x + std::max(4, (w - 32) / 2), y + 16, 32, 32);
+    }
+
+    renderer.drawRect(x, y, w, h, true);
+    if (selectedCover) {
+      for (int i = 0; i < lineWidth; ++i) {
+        renderer.drawRoundedRect(x - 6 - i, y - 6 - i, w + 12 + 2 * i, h + 12 + 2 * i, lineWidth,
+                                 spec.selectionCornerRadius, true);
+      }
+    }
+  };
+
+  auto drawSlot = [&](const ThemeCoverSlotSpec& slot) {
+    const int bookIndex = resolveBookIndex(slot);
+    if (bookIndex < 0 || bookIndex >= bookCount) return;
+
+    const int h = std::min(slot.height, rect.height);
+    const int w = std::max(1, h * std::max(1, slot.widthPercent) / 100);
+    int x = rect.x + (rect.width - w) / 2;
+    if (slot.x == ThemeSlotX::Padding) {
+      x = rect.x + m.contentSidePadding;
+    } else if (slot.x == ThemeSlotX::RightPadding) {
+      x = rect.x + rect.width - m.contentSidePadding - w;
+    }
+    x += slot.xOffset;
+
+    int y = rect.y;
+    if (slot.y == ThemeSlotY::Center) {
+      y = rect.y + (rect.height - h) / 2;
+    }
+    y += slot.yOffset;
+
+    const bool selectedCover = slot.selected && (slot.book != ThemeBookRef::Index || bookIndex == selected);
+    drawCover(bookIndex, x, y, w, h, selectedCover);
+
+    if (slot.title.enabled) {
+      // Full-width titles wrap/truncate against the whole carousel area (less
+      // side padding) and center on it; otherwise they track the cover: wrap a
+      // touch wider than the cover (w + 28) but stay centered on the cover (w).
+      const bool fullWidth = slot.title.fullWidth;
+      const int wrapWidth = fullWidth ? std::max(40, rect.width - 2 * m.contentSidePadding) : std::max(40, w + 28);
+      const int centerX = fullWidth ? rect.x + m.contentSidePadding : x;
+      const int centerWidth = fullWidth ? std::max(40, rect.width - 2 * m.contentSidePadding) : w;
+      const auto style = slot.title.bold ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR;
+      const auto titleLines = renderer.wrappedText(slot.title.fontId, recentBooks[bookIndex].title.c_str(), wrapWidth,
+                                                   slot.title.maxLines, style);
+      int titleY = y + h + slot.title.offsetY;
+      for (const auto& line : titleLines) {
+        const int textWidth = renderer.getTextWidth(slot.title.fontId, line.c_str(), style);
+        renderer.drawText(slot.title.fontId, centerX + (centerWidth - textWidth) / 2, titleY, line.c_str(), true,
+                          style);
+        titleY += renderer.getLineHeight(slot.title.fontId);
+      }
+    }
+  };
+
+  for (const auto& slot : spec.slots) {
+    if (slot.selected) continue;
+    drawSlot(slot);
+  }
+
+  for (const auto& slot : spec.slots) {
+    if (!slot.selected) continue;
+    drawSlot(slot);
+  }
+
+  coverBufferStored = storeCoverBuffer();
+  coverRendered = coverBufferStored;
+}
+
 void LyraTheme::drawEmptyRecents(const GfxRenderer& renderer, const Rect rect) const {
   constexpr int padding = 48;
   renderer.drawText(UI_12_FONT_ID, rect.x + padding,
@@ -512,11 +1111,96 @@ void LyraTheme::drawEmptyRecents(const GfxRenderer& renderer, const Rect rect) c
 void LyraTheme::drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount, int selectedIndex,
                                const std::function<std::string(int index)>& buttonLabel,
                                const std::function<UIIcon(int index)>& rowIcon) const {
+  if (buttonMenu_ != nullptr && buttonMenu_->enabled) {
+    const auto& spec = *buttonMenu_;
+    const auto& m = metrics();
+    const int panelWidth = spec.panelWidth > 0 ? std::min(spec.panelWidth, rect.width) : rect.width;
+    const int panelX = rect.x + (rect.width - panelWidth) / 2;
+    const int panelHeight = buttonCount * m.menuRowHeight + std::max(0, buttonCount - 1) * m.menuSpacing;
+    const int panelY =
+        spec.centerVertically && panelHeight < rect.height ? rect.y + (rect.height - panelHeight) / 2 : rect.y;
+
+    if (spec.drawPanel) {
+      renderer.drawRoundedRect(panelX, panelY, panelWidth, panelHeight, 1, spec.panelCornerRadius, true);
+    }
+
+    for (int i = 0; i < buttonCount; ++i) {
+      std::string labelStr = buttonLabel(i);
+      const char* label = labelStr.c_str();
+      const auto style = spec.bold ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR;
+      Rect tileRect = Rect{panelX + spec.selectionInset, panelY + i * (m.menuRowHeight + m.menuSpacing),
+                           panelWidth - spec.selectionInset * 2, m.menuRowHeight};
+      if (spec.selectionStyle == ThemeMenuSelectionStyle::Pill) {
+        const int maxLabelWidth = std::max(0, panelWidth - spec.selectionInset * 2 - spec.rowPaddingX);
+        labelStr = renderer.truncatedText(spec.fontId, label, maxLabelWidth, style);
+        label = labelStr.c_str();
+        tileRect.width = std::min(tileRect.width, renderer.getTextWidth(spec.fontId, label, style) + spec.rowPaddingX);
+      }
+      const bool selected = selectedIndex == i;
+
+      if (spec.selectionStyle == ThemeMenuSelectionStyle::Pill) {
+        renderer.fillRoundedRect(tileRect.x, tileRect.y, tileRect.width, tileRect.height, spec.selectionCornerRadius,
+                                 selected ? Color::Black : Color::White);
+      } else if (selected) {
+        if (spec.selectionStyle == ThemeMenuSelectionStyle::Outline) {
+          renderer.drawRoundedRect(tileRect.x, tileRect.y, tileRect.width, tileRect.height, 1,
+                                   spec.selectionCornerRadius, true);
+        } else if (spec.selectionStyle == ThemeMenuSelectionStyle::Triangle) {
+          constexpr int triangleWidth = 12;
+          constexpr int triangleHeight = 18;
+          const int triangleX = panelX + spec.selectionInset;
+          const int triangleCenterY = tileRect.y + tileRect.height / 2;
+          const int triangleXPoints[3] = {triangleX, triangleX, triangleX + triangleWidth};
+          const int triangleYPoints[3] = {triangleCenterY - triangleHeight / 2, triangleCenterY + triangleHeight / 2,
+                                          triangleCenterY};
+          renderer.fillPolygon(triangleXPoints, triangleYPoints, 3, true);
+        } else if (spec.selectionStyle == ThemeMenuSelectionStyle::Underline) {
+          // Drawn after text layout below.
+        } else {
+          renderer.fillRoundedRect(tileRect.x, tileRect.y, tileRect.width, tileRect.height, spec.selectionCornerRadius,
+                                   spec.selectionFillBlack ? Color::Black : Color::LightGray);
+        }
+      }
+
+      const int lineHeight = renderer.getLineHeight(spec.fontId);
+      const int textY = tileRect.y + (tileRect.height - lineHeight) / 2;
+      int textX = tileRect.x + spec.textInsetX;
+
+      if (spec.showIcons && rowIcon != nullptr) {
+        UIIcon icon = rowIcon(i);
+        const int iconY = tileRect.y + (tileRect.height - mainMenuIconSize) / 2;
+        if (!drawThemeIcon(renderer, icon, textX, iconY, mainMenuIconSize)) {
+          const uint8_t* iconBitmap = iconForName(icon, mainMenuIconSize);
+          if (iconBitmap != nullptr) {
+            renderer.drawIcon(iconBitmap, textX, iconY, mainMenuIconSize, mainMenuIconSize);
+          }
+        }
+        if (hasThemeIcon(icon) || iconForName(icon, mainMenuIconSize) != nullptr) {
+          textX += mainMenuIconSize + hPaddingInSelection + 2;
+        }
+      }
+
+      if (spec.centeredText) {
+        const int textWidth = renderer.getTextWidth(spec.fontId, label, style);
+        textX = tileRect.x + (tileRect.width - textWidth) / 2;
+      }
+      renderer.drawText(
+          spec.fontId, textX, textY, label,
+          !(selected && (spec.selectedTextInverted || spec.selectionStyle == ThemeMenuSelectionStyle::Pill)), style);
+      if (selected && spec.selectionStyle == ThemeMenuSelectionStyle::Underline) {
+        const int textWidth = renderer.getTextWidth(spec.fontId, label, style);
+        const int underlineY = std::min(tileRect.y + tileRect.height - 5, textY + lineHeight + 2);
+        renderer.drawLine(textX, underlineY, textX + textWidth - 1, underlineY, 1, true);
+      }
+    }
+    return;
+  }
+
   for (int i = 0; i < buttonCount; ++i) {
-    int tileWidth = rect.width - LyraMetrics::values.contentSidePadding * 2;
-    Rect tileRect = Rect{rect.x + LyraMetrics::values.contentSidePadding,
-                         rect.y + i * (LyraMetrics::values.menuRowHeight + LyraMetrics::values.menuSpacing), tileWidth,
-                         LyraMetrics::values.menuRowHeight};
+    int tileWidth = rect.width - metrics().contentSidePadding * 2;
+    Rect tileRect =
+        Rect{rect.x + metrics().contentSidePadding, rect.y + i * (metrics().menuRowHeight + metrics().menuSpacing),
+             tileWidth, metrics().menuRowHeight};
 
     const bool selected = selectedIndex == i;
 
@@ -528,13 +1212,18 @@ void LyraTheme::drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount
     const char* label = labelStr.c_str();
     int textX = tileRect.x + 16;
     const int lineHeight = renderer.getLineHeight(UI_12_FONT_ID);
-    const int textY = tileRect.y + (LyraMetrics::values.menuRowHeight - lineHeight) / 2;
+    const int textY = tileRect.y + (metrics().menuRowHeight - lineHeight) / 2;
 
     if (rowIcon != nullptr) {
       UIIcon icon = rowIcon(i);
-      const uint8_t* iconBitmap = iconForName(icon, mainMenuIconSize);
-      if (iconBitmap != nullptr) {
-        renderer.drawIcon(iconBitmap, textX, textY + 3, mainMenuIconSize, mainMenuIconSize);
+      const int iconY = tileRect.y + (tileRect.height - mainMenuIconSize) / 2;
+      if (!drawThemeIcon(renderer, icon, textX, iconY, mainMenuIconSize)) {
+        const uint8_t* iconBitmap = iconForName(icon, mainMenuIconSize);
+        if (iconBitmap != nullptr) {
+          renderer.drawIcon(iconBitmap, textX, iconY, mainMenuIconSize, mainMenuIconSize);
+        }
+      }
+      if (hasThemeIcon(icon) || iconForName(icon, mainMenuIconSize) != nullptr) {
         textX += mainMenuIconSize + hPaddingInSelection + 2;
       }
     }
diff --git a/src/components/themes/lyra/LyraTheme.h b/src/components/themes/lyra/LyraTheme.h
index cec79ca5..c21e53d5 100644
--- a/src/components/themes/lyra/LyraTheme.h
+++ b/src/components/themes/lyra/LyraTheme.h
@@ -28,6 +28,7 @@ constexpr ThemeMetrics values = {.batteryWidth = 16,
                                  .homeCoverTileHeight = 242,
                                  .homeRecentBooksCount = 1,
                                  .homeContinueReadingInMenu = false,
+                                 .homeShowContinueReadingHeader = true,
                                  .homeMenuTopOffset = 16,
                                  .buttonHintsHeight = 40,
                                  .sideButtonHintsWidth = 30,
@@ -73,6 +74,21 @@ constexpr ThemeMetrics values = {.batteryWidth = 16,
 
 class LyraTheme : public BaseTheme {
  public:
+  explicit LyraTheme(const ThemeMetrics* metrics = &LyraMetrics::values,
+                     const ThemeHomeRecentsSpec* homeRecents = nullptr, const ThemeButtonMenuSpec* buttonMenu = nullptr,
+                     const ThemeListSpec* list = nullptr, const ThemeButtonHintsSpec* buttonHints = nullptr,
+                     const ThemeTabBarSpec* tabBar = nullptr, const ThemeHeaderSpec* header = nullptr,
+                     const char* assetRoot = nullptr, const ThemeIconMap* icons = nullptr)
+      : metrics_(metrics),
+        homeRecents_(homeRecents),
+        buttonMenu_(buttonMenu),
+        list_(list),
+        buttonHints_(buttonHints),
+        tabBar_(tabBar),
+        header_(header),
+        assetRoot_(assetRoot),
+        icons_(icons) {}
+
   // Component drawing methods
   void fillBatteryIcon(const GfxRenderer& renderer, Rect rect, uint16_t percentage) const override;
   void drawHeader(const GfxRenderer& renderer, Rect rect, const char* title, const char* subtitle) const override;
@@ -92,9 +108,30 @@ class LyraTheme : public BaseTheme {
   void drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount, int selectedIndex,
                       const std::function<std::string(int index)>& buttonLabel,
                       const std::function<UIIcon(int index)>& rowIcon) const override;
+  bool homeCoverCacheDependsOnSelector() const override {
+    return homeRecents_ == nullptr || homeRecents_->type != ThemeHomeRecentsType::None;
+  }
   void drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                           const int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored,
-                           std::function<bool()> storeCoverBuffer) const override;
+                           const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                           bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                           bool coverStripSelected = true) const override;
   void drawEmptyRecents(const GfxRenderer& renderer, const Rect rect) const;
   bool showsFileIcons() const override { return true; }
+
+ private:
+  const ThemeMetrics* metrics_;
+  const ThemeHomeRecentsSpec* homeRecents_;
+  const ThemeButtonMenuSpec* buttonMenu_;
+  const ThemeListSpec* list_;
+  const ThemeButtonHintsSpec* buttonHints_;
+  const ThemeTabBarSpec* tabBar_;
+  const ThemeHeaderSpec* header_;
+  const char* assetRoot_;
+  const ThemeIconMap* icons_;
+  const ThemeMetrics& metrics() const { return metrics_ ? *metrics_ : LyraMetrics::values; }
+  bool hasThemeIcon(UIIcon icon) const;
+  bool drawThemeIcon(const GfxRenderer& renderer, UIIcon icon, int x, int y, int size) const;
+  void drawCoverStripRecents(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
+                             int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool bufferRestored,
+                             std::function<bool()> storeCoverBuffer, bool coverStripSelected) const;
 };
diff --git a/src/components/themes/roundedraff/RoundedRaffTheme.cpp b/src/components/themes/roundedraff/RoundedRaffTheme.cpp
index 50db2a8c..a4843afa 100644
--- a/src/components/themes/roundedraff/RoundedRaffTheme.cpp
+++ b/src/components/themes/roundedraff/RoundedRaffTheme.cpp
@@ -113,8 +113,10 @@ void RoundedRaffTheme::drawTabBar(const GfxRenderer& renderer, Rect rect, const
 }
 
 void RoundedRaffTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                                           const int selectorIndex, bool& coverRendered, bool& coverBufferStored,
-                                           bool& bufferRestored, std::function<bool()> storeCoverBuffer) const {
+                                           const int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored,
+                                           bool& bufferRestored, std::function<bool()> storeCoverBuffer,
+                                           bool coverStripSelected) const {
+  (void)coverSelectorIndex;
   const int tileWidth = rect.width - 2 * RoundedRaffMetrics::values.contentSidePadding;
   const int tileHeight = rect.height;
   const int tileY = rect.y;
@@ -131,6 +133,7 @@ void RoundedRaffTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, con
   if (hasContinueReading) {
     RecentBook book = recentBooks[0];
     if (!coverRendered) {
+      renderer.fillRect(tileX, tileY, tileWidth, tileHeight, false);
       std::string coverPath = book.coverBmpPath;
       bool hasCover = true;
       if (coverPath.empty()) {
@@ -175,15 +178,17 @@ void RoundedRaffTheme::drawRecentBookCover(GfxRenderer& renderer, Rect rect, con
       coverRendered = coverBufferStored;  // Only consider it rendered if we successfully stored the buffer
     }
 
-    renderer.fillRoundedRect(tileX, tileY, tileWidth, imgY - tileY, kRowRadius, true, true, false, false,
-                             Color::LightGray);
-    renderer.fillRectDither(tileX, imgY, (tileWidth - coverWidth) / 2, RoundedRaffMetrics::values.homeCoverHeight,
-                            Color::LightGray);
-    renderer.fillRectDither(tileX + (tileWidth + coverWidth) / 2, imgY, (tileWidth - coverWidth) / 2,
-                            RoundedRaffMetrics::values.homeCoverHeight, Color::LightGray);
-    renderer.fillRoundedRect(tileX, imgY + RoundedRaffMetrics::values.homeCoverHeight, tileWidth,
-                             tileHeight - (imgY - tileY + RoundedRaffMetrics::values.homeCoverHeight), kRowRadius,
-                             false, false, true, true, Color::LightGray);
+    if (coverStripSelected) {
+      renderer.fillRoundedRect(tileX, tileY, tileWidth, imgY - tileY, kRowRadius, true, true, false, false,
+                               Color::LightGray);
+      renderer.fillRectDither(tileX, imgY, (tileWidth - coverWidth) / 2, RoundedRaffMetrics::values.homeCoverHeight,
+                              Color::LightGray);
+      renderer.fillRectDither(tileX + (tileWidth + coverWidth) / 2, imgY, (tileWidth - coverWidth) / 2,
+                              RoundedRaffMetrics::values.homeCoverHeight, Color::LightGray);
+      renderer.fillRoundedRect(tileX, imgY + RoundedRaffMetrics::values.homeCoverHeight, tileWidth,
+                               tileHeight - (imgY - tileY + RoundedRaffMetrics::values.homeCoverHeight), kRowRadius,
+                               false, false, true, true, Color::LightGray);
+    }
   } else {
     renderer.fillRoundedRect(tileX, tileY, tileWidth, tileHeight, kRowRadius, Color::LightGray);
     renderer.drawCenteredText(kTitleFontId, rect.y + rect.height / 2 - renderer.getLineHeight(kTitleFontId) / 2,
diff --git a/src/components/themes/roundedraff/RoundedRaffTheme.h b/src/components/themes/roundedraff/RoundedRaffTheme.h
index a5bfeeb9..628717c3 100644
--- a/src/components/themes/roundedraff/RoundedRaffTheme.h
+++ b/src/components/themes/roundedraff/RoundedRaffTheme.h
@@ -78,8 +78,8 @@ class RoundedRaffTheme : public BaseTheme {
   void drawTabBar(const GfxRenderer& renderer, Rect rect, const std::vector<TabInfo>& tabs,
                   bool selected) const override;
   void drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
-                           int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored,
-                           std::function<bool()> storeCoverBuffer) const override;
+                           int coverSelectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored,
+                           std::function<bool()> storeCoverBuffer, bool coverStripSelected = true) const override;
   void drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount, int selectedIndex,
                       const std::function<std::string(int index)>& buttonLabel,
                       const std::function<UIIcon(int index)>& rowIcon) const override;
diff --git a/src/main.cpp b/src/main.cpp
index 13ba129b..ce319d3d 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -350,6 +350,7 @@ void setup() {
   I18N.setLanguage(static_cast<Language>(SETTINGS.language));
   KOREADER_STORE.loadFromFile();
   OPDS_STORE.loadFromFile();
+  UITheme::getInstance().refreshRegistry();
   UITheme::getInstance().reload();
   ButtonNavigator::setMappedInputManager(mappedInputManager);
 
diff --git a/src/network/CrossPointWebServer.cpp b/src/network/CrossPointWebServer.cpp
index dc54dd84..389cf7db 100644
--- a/src/network/CrossPointWebServer.cpp
+++ b/src/network/CrossPointWebServer.cpp
@@ -15,8 +15,10 @@
 #include "OpdsServerStore.h"
 #include "SdCardFontSystem.h"
 #include "SettingsList.h"
+#include "SilentRestart.h"
 #include "WebDAVHandler.h"
 #include "WifiCredentialStore.h"
+#include "components/UITheme.h"
 #include "html/FilesPageHtml.generated.h"
 #include "html/FontsPageHtml.generated.h"
 #include "html/HomePageHtml.generated.h"
@@ -1106,7 +1108,8 @@ void CrossPointWebServer::handleGetSettings() const {
   // Pass the SD font registry so the fontFamily setting's enumStringValues
   // includes SD-resident families — otherwise the web API only exposes the
   // three built-in fonts.
-  const auto& settings = getSettingsList(&sdFontSystem.registry());
+  UITheme::getInstance().refreshRegistry();
+  const auto& settings = getSettingsList(&sdFontSystem.registry(), &UITheme::getInstance().registry());
 
   server->setContentLength(CONTENT_LENGTH_UNKNOWN);
   server->send(200, "application/json", "");
@@ -1208,8 +1211,10 @@ void CrossPointWebServer::handlePostSettings() {
     return;
   }
 
-  const auto& settings = getSettingsList(&sdFontSystem.registry());
+  UITheme::getInstance().refreshRegistry();
+  const auto& settings = getSettingsList(&sdFontSystem.registry(), &UITheme::getInstance().registry());
   int applied = 0;
+  bool themeChanged = false;
 
   for (const auto& s : settings) {
     if (!s.key) continue;
@@ -1234,6 +1239,9 @@ void CrossPointWebServer::handlePostSettings() {
           } else if (s.valueSetter) {
             s.valueSetter(static_cast<uint8_t>(val));
           }
+          if (strcmp(s.key, "uiTheme") == 0) {
+            themeChanged = true;
+          }
           applied++;
         }
         break;
@@ -1268,6 +1276,12 @@ void CrossPointWebServer::handlePostSettings() {
   SETTINGS.saveToFile();
 
   LOG_DBG("WEB", "Applied %d setting(s)", applied);
+  if (themeChanged) {
+    server->send(200, "text/plain", String("Applied ") + String(applied) + " setting(s); restarting");
+    delay(100);
+    silentRestart();
+    return;
+  }
   server->send(200, "text/plain", String("Applied ") + String(applied) + " setting(s)");
 }
 
diff --git a/test/CMakeLists.txt b/test/CMakeLists.txt
index 17c46643..d630da1a 100644
--- a/test/CMakeLists.txt
+++ b/test/CMakeLists.txt
@@ -43,3 +43,4 @@ add_subdirectory(release_json_parser)
 add_subdirectory(differential_rounding)
 add_subdirectory(hyphenation_eval)
 add_subdirectory(utf8_compose)
+add_subdirectory(theme_layout)
diff --git a/test/theme_layout/CMakeLists.txt b/test/theme_layout/CMakeLists.txt
new file mode 100644
index 00000000..97900fe3
--- /dev/null
+++ b/test/theme_layout/CMakeLists.txt
@@ -0,0 +1,16 @@
+add_executable(ThemeLayoutTest
+  ThemeLayoutTest.cpp
+  ${REPO_ROOT}/src/components/themes/ThemeLayout.cpp
+)
+
+target_include_directories(ThemeLayoutTest PRIVATE
+  ${REPO_ROOT}/src
+  ${REPO_ROOT}/freeink-sdk/libs/ui/FreeInkUI/include
+)
+
+target_link_libraries(ThemeLayoutTest PRIVATE
+  crosspoint_test_common
+  GTest::gtest_main
+)
+
+gtest_discover_tests(ThemeLayoutTest)
diff --git a/test/theme_layout/ThemeLayoutTest.cpp b/test/theme_layout/ThemeLayoutTest.cpp
new file mode 100644
index 00000000..ac4ff056
--- /dev/null
+++ b/test/theme_layout/ThemeLayoutTest.cpp
@@ -0,0 +1,85 @@
+#include <gtest/gtest.h>
+
+#include "components/themes/ThemeLayout.h"
+
+namespace {
+
+ThemeMetrics testMetrics() {
+  ThemeMetrics metrics{};
+  metrics.headerHeight = 48;
+  metrics.buttonHintsHeight = 40;
+  metrics.tabBarHeight = 36;
+  metrics.listRowHeight = 42;
+  metrics.listWithSubtitleRowHeight = 58;
+  metrics.menuRowHeight = 42;
+  metrics.homeCoverTileHeight = 0;
+  metrics.homeCoverHeight = 0;
+  metrics.verticalSpacing = 8;
+  metrics.progressBarHeight = 4;
+  return metrics;
+}
+
+ThemeLayoutNode slot(const char* id, ThemeLayoutSizeType type, int value) {
+  ThemeLayoutNode node;
+  node.id = id;
+  node.sizeType = type;
+  if (type == ThemeLayoutSizeType::Fixed) {
+    node.size = value;
+  } else {
+    node.flex = value;
+  }
+  return node;
+}
+
+}  // namespace
+
+TEST(ThemeLayoutTest, EmitsSuperMinimalHomeSlots) {
+  ThemeLayoutNode root;
+  root.id = "root";
+  root.axis = ThemeLayoutAxis::Column;
+  root.children.push_back(slot("header", ThemeLayoutSizeType::Fixed, 48));
+  root.children.push_back(slot("menu", ThemeLayoutSizeType::Flex, 1));
+  root.children.push_back(slot("buttons", ThemeLayoutSizeType::Fixed, 40));
+
+  ThemeLayoutSlots slots;
+  layoutThemeSlots(root, Rect{0, 0, 528, 792}, testMetrics(), slots);
+
+  ASSERT_EQ(slots.size(), 3u);
+  EXPECT_STREQ(slots.items[0].id, "header");
+  EXPECT_EQ(slots.items[0].rect.x, 0);
+  EXPECT_EQ(slots.items[0].rect.y, 0);
+  EXPECT_EQ(slots.items[0].rect.width, 528);
+  EXPECT_EQ(slots.items[0].rect.height, 48);
+
+  EXPECT_STREQ(slots.items[1].id, "menu");
+  EXPECT_EQ(slots.items[1].rect.x, 0);
+  EXPECT_EQ(slots.items[1].rect.y, 48);
+  EXPECT_EQ(slots.items[1].rect.width, 528);
+  EXPECT_EQ(slots.items[1].rect.height, 704);
+
+  EXPECT_STREQ(slots.items[2].id, "buttons");
+  EXPECT_EQ(slots.items[2].rect.x, 0);
+  EXPECT_EQ(slots.items[2].rect.y, 752);
+  EXPECT_EQ(slots.items[2].rect.width, 528);
+  EXPECT_EQ(slots.items[2].rect.height, 40);
+}
+
+TEST(ThemeLayoutTest, EmitsFileBrowserSlotsWithPath) {
+  ThemeLayoutNode root;
+  root.id = "root";
+  root.axis = ThemeLayoutAxis::Column;
+  root.gap = 8;
+  root.children.push_back(slot("header", ThemeLayoutSizeType::Fixed, 48));
+  root.children.push_back(slot("list", ThemeLayoutSizeType::Flex, 1));
+  root.children.push_back(slot("path", ThemeLayoutSizeType::Fixed, 14));
+  root.children.push_back(slot("buttons", ThemeLayoutSizeType::Fixed, 40));
+
+  ThemeLayoutSlots slots;
+  layoutThemeSlots(root, Rect{0, 0, 528, 792}, testMetrics(), slots);
+
+  ASSERT_EQ(slots.size(), 4u);
+  EXPECT_EQ(findThemeSlot(slots, "header").height, 48);
+  EXPECT_EQ(findThemeSlot(slots, "list").height, 666);
+  EXPECT_EQ(findThemeSlot(slots, "path").height, 14);
+  EXPECT_EQ(findThemeSlot(slots, "buttons").height, 40);
+}